/* WEB-STUDIO 결제 전 확인 시트 (2026-09-07) — index.html 의 토큰(--paper·--ink·--muted·--line·--lime, Archivo·Pretendard)만 쓴다.
   모바일은 아래에서 올라오는 시트, 861px 이상은 가운데 상자. z-index 120 — #webPayDone(99) 위. */
[hidden] { display:none !important; }
html.is-sheet-open { overflow:hidden; scrollbar-gutter:stable; }

/* inset:0 은 레이아웃 뷰포트에 붙는다. 보이는 뷰포트와 레이아웃 뷰포트가 다른 환경(주소창·확대·미리보기 창)에서는
   시트가 화면 밖으로 밀린다 — 2026-09-07 실측. 100vw × 100dvh 로 '지금 보이는 만큼' 에 앉힌다(vh 는 구형 폴백). */
.pay-sheet { position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh; z-index:120; display:flex; align-items:flex-end; justify-content:center; }
.pay-sheet-back { position:absolute; inset:0; background:rgba(20,19,17,.55); touch-action:none; }
.pay-sheet-panel {
  position:relative; width:100%; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--paper); color:var(--ink); border-top:1px solid var(--ink);
  padding:22px 22px calc(22px + env(safe-area-inset-bottom)); display:grid; gap:16px;
  transform:translateY(14px); transition:transform .22s ease;
}
.pay-sheet.is-in .pay-sheet-panel { transform:translateY(0); }
.pay-sheet-panel:focus { outline:none; }

.pay-sheet-title { font:700 10px 'Archivo', 'Pretendard Variable', sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.pay-sheet-order { margin:0; padding:14px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); display:grid; gap:8px; }
.pay-sheet-order div { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.pay-sheet-order dt { font:700 10px 'Archivo', 'Pretendard Variable', sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.pay-sheet-order dd { margin:0; font-weight:800; font-size:15px; text-align:end; }
.pay-sheet-order dd.en { font:900 22px 'Archivo', 'Pretendard Variable', sans-serif; letter-spacing:-.03em; }

.pay-sheet .pay-consent { display:grid; gap:8px; font-size:13px; line-height:1.7; }
.pay-sheet .pay-consent label { display:block; cursor:pointer; }
.pay-sheet .pay-consent input { margin-inline-end:8px; }
.pay-sheet-hint { font-size:11.5px; line-height:1.6; color:var(--muted); }

.pay-sheet-actions { display:grid; grid-template-columns:1fr auto; gap:10px; }
/* .pay-sheet .buy 의 바탕은 index.html 의 .price-card .buy 선택자에 함께 얹혀 있다 — 버튼 규칙은 한 곳. 여기는 자리(카드용 margin-top:auto 해제)와 비활성 상태만. */
.pay-sheet .pay-sheet-actions .buy { margin-top:0; } /* index.html 인라인 <style> 이 뒤에 오므로 선택자 하나 더 — 같은 특이도면 진다 */
.pay-sheet .buy:disabled { background:var(--line); color:var(--muted); cursor:not-allowed; transform:none; }
.pay-sheet-close { cursor:pointer; background:transparent; color:var(--ink); border:1px solid var(--ink); padding:15px 18px; font:800 13px 'Pretendard Variable', Pretendard, sans-serif; letter-spacing:-.01em; }

@media (min-width:861px) {
  .pay-sheet { align-items:center; }
  .pay-sheet-panel { width:min(460px, calc(100vw - 44px)); max-height:calc(100vh - 48px); border:1px solid var(--ink); padding:28px 26px; }
}
@media (prefers-reduced-motion:reduce) {
  .pay-sheet-panel { transition:none; transform:none; }
}