/* 결제 (2026-11-04 "2 가짜 결제") — 결제 전 고지 창·작은 말풍선·주문 번호·1:1 추가 질문 버튼·일반 창 안내 */

/* 결제 전 고지 창 (지첩함 백업 창과 같은 틀, 버튼은 메뉴 색) */
.pay-ov{z-index:70}
.pay-card{width:min(400px,100%)}
.pay-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:var(--rc-bg,var(--bg));margin:2px 0 12px}
.pay-name{font-size:.98rem;font-weight:700;color:var(--ink)}
.pay-price{font-size:1.02rem;font-weight:700;color:var(--rc,var(--ink));white-space:nowrap}
.pay-lab{margin:0 0 4px;font-size:.8rem;font-weight:700;color:var(--ink)}
.pay-secs{margin:0 0 12px;font-size:.8rem;line-height:1.6;color:var(--muted);word-break:keep-all}
.pay-notes{margin:0;padding:0 0 0 18px;font-size:.8rem;line-height:1.6;color:var(--ink);word-break:keep-all}
.pay-notes li+li{margin-top:4px}
.pay-fake{margin:12px 0 0;font-size:.76rem;color:var(--muted);text-align:center}
/* 2026-11-05 05 결정 (공통 규칙): 첫 버튼만 채움·둘째는 흰 바탕+안쪽 선, 두 버튼 같은 폭(창 폭 반씩, 최대 180px)·같은 높이
   — 예전 규칙(.pay-ov .share-actions …)은 17·19번 css의 .share-ov[class*=" rk-"] .share-actions button 보다 우선순위가 낮아 덮였음 → .share-ov.pay-ov[class*=" rk-"] 로 높임 (다시 덮이지 않게)
   — 폰 세로에서 좌우가 잘리던 것: 버튼 폭이 글자 길이(최소 96px + 좌우 24px)로 늘어 창 밖으로 넘친 것을 창(overflow-x:hidden)이 자름 → 폭을 반씩 나눔 + 그림자 자리 */
.share-ov.pay-ov .share-actions,.share-ov.pn-ov .share-actions{justify-content:center;margin-top:16px;padding:0 4px 12px}
@media (max-width:480px){.share-ov.pay-ov .share-actions,.share-ov.pn-ov .share-actions{padding-left:32px;padding-right:32px}} /* 2026-11-05 05: 16px은 약간만 보여 32px (가로 보기와 비슷하게) */ /* 2026-11-05 05: 폰 세로에서 버튼이 창 가장자리에 붙어 보임 → 좌우 여백 */
.share-ov.pay-ov[class*=" rk-"] .share-actions button,.share-ov.pn-ov .share-actions button{flex:1 1 0;min-width:0;max-width:180px;padding-left:12px;padding-right:12px;border:0;border-radius:999px;white-space:normal;word-break:keep-all}
.share-ov.pay-ov[class*=" rk-"] .share-actions button.pay-no{background:var(--surface);color:var(--rc,var(--ink));box-shadow:inset 0 0 0 1px var(--rc,var(--line))}

/* 2026-11-05: 폰에서 결제창·일반 창 안내 창 내용이 상하좌우로 움직이지 않게 — 옆 스크롤 막기, 끝 튕김 막기(iOS 15는 core/pay.js noBounce), 위아래는 내용이 길 때만 */
.pay-ov,.pn-ov{touch-action:none;overscroll-behavior:contain}
.pay-card,.pn-card{max-width:100%}
/* 2026-11-05 05: 폰에서 결제창이 화면보다 길어 밀면 튀고 뒤 화면이 보임 → 창 높이를 보이는 화면 안으로(--pay-vh = 실제 보이는 높이, core/pay.js),
   제목·가격 줄은 위, [결제하기]·[취소]는 아래에 고정하고 가운데(.pay-body)만 스크롤 */
.pay-card{display:flex;flex-direction:column;overflow:hidden;max-height:calc(var(--pay-vh,100vh) - 32px)}
.pay-card>.bk-ttl,.pay-card>.pay-head,.pay-card>.share-actions{flex:none}
.pay-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;position:relative}
.pay-card *,.pn-card *{max-width:100%}

/* 작은 말풍선 — 무료 오늘 운세의 [재설명] → "재설명 기능은 유료서비스입니다" */
.rp-tail{position:relative}
.pay-tip{position:absolute;bottom:calc(100% + 6px);z-index:5;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--surface);font-size:.78rem;line-height:1.4;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18);animation:fadeIn .15s ease;transition:opacity .3s}
.pay-tip.is-out{opacity:0}
.share-btn.rp-btn.is-paid-only{cursor:pointer}

/* 보고서 맨 아래 주문 번호 (환불 문의용) */
.order-line{margin:10px 0 0;font-size:.72rem;color:var(--muted);text-align:center;word-break:keep-all}

/* 1:1 감정: 질문을 다 쓰면 입력칸 안 보내기 자리에 "질문 3회 더 추가" (2026-11-05)
   배경·글씨 = 내 질문 말풍선(옅은 면·진한 글씨), 밑줄 = 1:1 버튼 색 — 버튼 모양 아님(둥근 모서리·그림자·광택 없음) */
.chat-more{all:unset;box-sizing:border-box;flex:none;align-self:center;cursor:pointer;white-space:nowrap;font-size:.86rem;font-weight:400;line-height:1.4;padding:1px 4px;margin-right:8px;background:var(--counsel-bubble-bg);color:var(--counsel-bubble-ink);text-decoration:underline;text-decoration-color:var(--counsel-main);text-decoration-thickness:1.5px;text-underline-offset:3px}
.chat-more[hidden]{display:none}
.chat-more:disabled{opacity:.5;cursor:default}
.chat-more:focus-visible{outline:2px solid var(--counsel-main);outline-offset:2px}
.chat-send[hidden]{display:none}
/* 2026-11-05 05 결정: 흐린 글 "질문 N번을 모두 썼어요." 바로 오른쪽에 "질문 3회 더 추가"(보통 굵기), 오른쪽 끝 "N/N"·보내기 화살표는 흐린 비활성화 */
.chat-done-txt{flex:0 1 auto;min-width:0;align-self:center;font-size:.95rem;line-height:22px;padding:8px 0;color:var(--muted);white-space:pre;overflow:hidden;text-overflow:ellipsis}
.chat-done-txt[hidden],.chat-input-row textarea[hidden]{display:none}
.chat-input-row.is-more .chat-more{margin-left:-8px;margin-right:0} /* 2026-11-05 05: 흐린 글 끝의 공백 두 칸이 간격 — 줄 간격(8px)은 없앰 */
.chat-input-row.is-more .chat-left{order:3;margin-left:auto} /* 순서는 그대로 두고(입력칸 스크롤 막대가 "n/3" 바로 왼쪽 — 입력칸 바로 다음이어야 함) 다 썼을 때만 보이는 순서를 바꿈 */
.chat-input-row.is-more .chat-send{order:4}
@media (pointer:coarse){.chat-done-txt{font-size:16px}}
@media (pointer:coarse){.chat-more{font-size:15px}}

/* 일반 창 안내 */
.pn-ov{z-index:80}
.pn-text{margin:0;font-size:.88rem;line-height:1.65;color:var(--ink);word-break:keep-all}
.share-ov.pn-ov .share-actions .is-primary{background:var(--vault-pick);color:var(--vault-pick-ink)}
.share-ov.pn-ov .share-actions button.is-ghost{background:var(--surface);color:var(--vault-pick);box-shadow:inset 0 0 0 1px var(--vault-pick)}

/* 오늘 운세 자시 날짜 기준 줄도 펼칠 때 움직임 (사주 풀이와 같게) */
#fortune-jasi-rule:not([hidden]){transform-origin:top center;animation:listOpen .18s ease-out}
@media (prefers-reduced-motion:reduce){#fortune-jasi-rule:not([hidden]){animation:none}}

/* 2026-11-05 05: 창을 열 때 창 자체(tabindex=-1)에 초점이 가면 아이폰 iOS 15.3 사파리가 파란 기본 테두리를 그림 → 창 자체는 초점 테두리 없음 (모든 창, 버튼·입력칸 초점 표시는 그대로) */
.share-card[tabindex="-1"]:focus,.load-card[tabindex="-1"]:focus,[role="dialog"][tabindex="-1"]:focus{outline:none}

/* (2026-11-05 저녁) 폰 전체 화면 결제는 뺌 — 폰도 PC와 같은 가운데 팝업 */