/* 남편 · 아내 화면 덧붙임 (레인 GUEST). 클래스는 g- (남편 · 공용) · w- (아내) 로 시작합니다. 공용 클래스는 tokens.css 에만.
   시안(art-final s1 s2 s2b s3 s3b s4 s4w s6)의 화면별 <style> 을 옮긴 것입니다. HTML 에 style="…" 을 쓸 수 없어서
   움직임 늦춤(--delay) · 워드마크 크기(--fs) · 줄자 길이(--p) 도 여기 클래스로 줍니다. */

/* ── 0. 늦춤 · 크기 도우미 ── */
.g-d10 { --delay: .1s; } .g-d20 { --delay: .2s; } .g-d30 { --delay: .3s; } .g-d40 { --delay: .4s; }
.g-d45 { --delay: .45s; } .g-d50 { --delay: .5s; } .g-d65 { --delay: .65s; } .g-d80 { --delay: .8s; }
.g-d90 { --delay: .9s; } .g-d100 { --delay: 1s; } .g-d110 { --delay: 1.1s; } .g-d120 { --delay: 1.2s; }
.g-sweep16 { --sweep-delay: 1.6s; } .g-sweep24 { --sweep-delay: 2.4s; }
.g-wm21 { --fs: 21px; } .g-wm25 { --fs: 25px; } .g-wm-hero { --fs: var(--fs-wordmark); } .g-ko-hero { --fs: var(--fs-hero); color: var(--ivory); }
.g-hidden { display: none !important; }
.g-center { text-align: center; }
.g-mono12 { font-size: 12px; }

/* 줄자 (21문항): 칸마다 길이, 라운드 끝 긴 눈금 */
.g-p0 { --p: 0%; } .g-p1 { --p: 4.8%; } .g-p2 { --p: 9.5%; } .g-p3 { --p: 14.3%; } .g-p4 { --p: 19%; } .g-p5 { --p: 23.8%; }
.g-p6 { --p: 28.6%; } .g-p7 { --p: 33.3%; } .g-p8 { --p: 38.1%; } .g-p9 { --p: 42.9%; } .g-p10 { --p: 47.6%; } .g-p11 { --p: 52.4%; }
.g-p12 { --p: 57.1%; } .g-p13 { --p: 61.9%; } .g-p14 { --p: 66.7%; } .g-p15 { --p: 71.4%; } .g-p16 { --p: 76.2%; } .g-p17 { --p: 81%; }
.g-p18 { --p: 85.7%; } .g-p19 { --p: 90.5%; } .g-p20 { --p: 95.2%; } .g-p21 { --p: 100%; }
.g-end1 { --at: 38.1%; } .g-end2 { --at: 61.9%; } .g-end3 { --at: 90.5%; }

/* 모임 날 허브 위 띠: 워드마크 + D-18 / D-DAY */
.g-hub-wm { display: inline-flex; align-items: baseline; gap: 8px; }

/* ── G-01 초대장 (s1) ── */
.g-s1 .pic { padding-top: 18px; text-align: center; }
.g-s1 .wordmark { margin-top: 12px; }
.g-s1-tag { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--fog); }
.g-s1 .rule-umbrella { margin-top: 16px; }
.g-s1 .dday { justify-content: center; margin-top: 14px; text-align: left; }
.g-s1 .credits { margin: 16px auto 0; width: fit-content; text-align: left; }
.g-s1-due { margin-top: 14px; font-size: var(--fs-caption); line-height: 1.5; color: var(--mist); }
.g-s1-due.is-past { color: var(--gold-lt); }
.g-s1-more { display: grid; gap: 28px; margin-top: 40px; text-align: left; }
.g-s1-note { margin-top: 18px; text-align: left; }
.g-s1-wife { text-align: center; font-size: var(--fs-small); color: var(--mist); }
.g-s1-wife a { color: var(--gold-lt); text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; }
.g-s1 .lb-bottom { padding-top: 10px; padding-bottom: calc(4px + var(--safe-b)); gap: 0; }
.g-s1 .lb-bottom .btn-text { color: rgba(239,233,220,.82); }
.g-s1 .lb-bottom.is-day { gap: 8px; padding-bottom: calc(10px + var(--safe-b)); }
.g-steps-cap { margin: 4px 0 10px; }
.g-strap-time { font-size: 12px; }
.g-trailer-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 3; }

/* 시트를 화면 아래에 깔 때 (G-04 · G-18): 아래 화면은 누를 수 없음 */
.g-under { pointer-events: none; }
.g-sheet { gap: 14px; }
.g-sheet .body-s { margin-top: -4px; }
.g-sheet-list { display: grid; gap: 10px; }
.g-me-hint { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2); }
.g-me-hint svg.i { width: 20px; height: 20px; color: var(--accent); flex: none; }
.g-me-hint b { color: var(--fg); font-weight: 600; }
.g-confirm { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--danger-fg); }
.g-confirm p { font-size: var(--fs-small); line-height: 1.55; color: var(--fg); }
.g-sheet-foot { text-align: center; }
.g-ro { opacity: .8; }

/* ── G-02 참석 응답 (s2) ── */
.g-s2 .pic { padding-top: 18px; }
.g-s2 .lb-top .lb-title { position: absolute; left: 50%; transform: translateX(-50%); }
.g-s2-intro .title { margin-top: 4px; }
.g-key { display: grid; gap: 14px; padding: 18px 14px 14px; margin-top: 4px; }
.g-key-head { display: flex; align-items: center; gap: 6px; font: 600 var(--fs-caption)/1 var(--f-body); color: var(--gold-ink); }
.g-key-head svg.i { width: 18px; height: 18px; }
.g-s2 .lb-bottom { padding-top: 10px; }
.g-note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.g-note svg.i { width: 18px; height: 18px; color: var(--gold-ink); margin-top: 2px; flex: none; }
.g-same { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.g-same p { font-size: var(--fs-small); line-height: 1.55; color: var(--fg); }
.g-same .btn-row { grid-template-columns: 1fr; }

/* ── G-06 홈 (s3) ── */
.g-s3 .pic { padding-top: 16px; }
.g-hello { font: 600 15px/1.4 var(--f-body); color: var(--fog); }
.g-hello b { color: var(--ivory); font-weight: 600; }
.g-foot { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 4px; }
.g-end { text-align: center; font-size: 16px; color: rgba(239,233,220,.55); padding: 6px 0 4px; }
.g-issued-head { text-align: center; }
.g-issued-head .title { margin-top: 2px; }
.g-door-pill { min-height: 24px; font-size: 13px; }
.g-later { gap: 0; }
.g-nopin { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed rgba(239,233,220,.3); font-size: var(--fs-small); line-height: 1.5; color: var(--fog); }
.g-nopin svg.i { width: 20px; height: 20px; color: var(--gold); flex: none; margin-top: 1px; }
.g-nopin b { display: block; color: var(--ivory); font-weight: 600; }
.g-qr-mid { width: 176px; }
.g-stamp-keep b { font-size: 21px; }

/* ── G-08 입장권 (s3b) · G-13 지금 ── */
.g-s3b .pic { padding-top: 12px; padding-bottom: 28px; }
.g-today { display: grid; }
.g-today li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.g-today li:first-child { border-top: 0; }
.g-today .tm { font: 500 13px/1.5 var(--f-mono); color: var(--mist); }
.g-today b { font-weight: 600; color: var(--ivory); }
.g-today small { display: block; color: var(--mist); font-size: var(--fs-caption); }
.g-today li.is-now .tm, .g-today li.is-now b { color: var(--gold-lt); }
.g-today-head { margin-bottom: 4px; }
.g-today-head b { font: 600 15px var(--f-body); }
.g-ticket-group { margin-top: 12px; }
.g-now { display: grid; gap: 10px; padding: 22px 18px; border-radius: var(--r-lg); background: linear-gradient(160deg, var(--cloth-3), var(--cloth-2)); box-shadow: inset 0 0 0 1px rgba(200,162,90,.38), var(--e-1); text-align: center; }
.g-now .caps { color: var(--gold); }
.g-now h1 { font: 800 26px/1.3 var(--f-display); color: var(--ivory); text-wrap: balance; }
.g-now p { font-size: var(--fs-small); line-height: 1.55; color: var(--fog); }
.g-now .btn { margin-top: 6px; }
.g-now.is-calm { background: rgba(4,6,11,.55); box-shadow: inset 0 0 0 1px rgba(239,233,220,.1); }
.g-now.is-calm h1 { color: var(--fog); }
.g-now.is-calm svg.i { color: var(--mist); }
.g-now > svg.i { justify-self: center; width: 30px; height: 30px; color: var(--gold); }
.g-next { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-caption); color: var(--mist); }
.g-next b { color: var(--fog); font-weight: 600; }
.g-mini { cursor: pointer; color: var(--ivory); text-align: left; width: 100%; }
.g-mini .no { font: 800 22px/1 var(--f-latin); color: var(--gold-lt); }

/* ── G-17 모임 뒤 ── */
.g-keep-head { text-align: center; }
.g-keep-head .title { margin-top: 4px; }
.g-thanks { display: grid; gap: 8px; padding: 18px; border-radius: var(--r-lg); background: rgba(4,6,11,.35); box-shadow: inset 0 0 0 1px rgba(200,162,90,.3); }
.g-thanks p { font-size: var(--fs-small); line-height: 1.7; color: var(--fog); white-space: pre-line; }
.g-thanks .sign { justify-self: end; font: 600 var(--fs-caption)/1.3 var(--f-body); color: var(--gold-lt); }
.g-home-q { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(200,162,90,.1); box-shadow: inset 0 0 0 1px rgba(200,162,90,.4); color: var(--ivory); }
.g-home-q svg.i { color: var(--gold); margin-top: 2px; }
.g-home-q b { display: block; font: 600 var(--fs-caption)/1.3 var(--f-body); color: var(--gold-lt); }
.g-home-q p { margin-top: 3px; font: 600 16px/1.5 var(--f-body); }
.g-album { display: grid; gap: 6px; text-align: center; }
.g-album p { font-size: var(--fs-small); line-height: 1.5; color: var(--fog); }

/* ── X-01 정리 완료 ── */
.g-x01 .pic { display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center; }
.g-x01 .wordmark { margin-bottom: 4px; }

/* ── G-11 · W-02 설문 (s4 · s4w) ── */
.g-s4 .q-pic { justify-content: flex-start; }
.g-s4 .q-pic.is-choice { padding-top: 18px; }
.g-s4 .q-item.is-q { font-size: clamp(26px, 7.6vw, 30px); line-height: 1.3; }
.g-intro { justify-content: center !important; gap: 14px; }
.g-intro .latin-i { font-size: 40px; color: var(--gold-ink); }
.t-lining .g-intro .latin-i { color: var(--gold-lt); }
.g-intro .title { font-size: 34px; }
.g-intro .meta { font: 500 13px/1 var(--f-mono); color: var(--fg-muted); }
.g-intro .privacy { text-align: left; margin-top: 6px; }
.g-line { text-align: left !important; align-items: stretch !important; gap: 14px; }
.g-line .q-eyebrow { justify-content: flex-start; }
.g-line .body-s { margin-top: -6px; }
.g-seal-wrap { display: grid; justify-items: center; margin-top: 6px; }
/* 키가 작은 휴대폰(360×640, 375×553): 밀랍 인장을 작게 옆으로 눕혀 '답 보내기'가 아래 띠에 가리지 않게 */
@media (max-height: 700px) {
  .g-line { gap: 10px; padding-top: var(--s-4); }
  .g-line .textarea { min-height: 76px; }
  .g-seal-btn { grid-template-columns: auto auto; justify-items: start; align-items: center; column-gap: 12px; row-gap: 2px; text-align: left; }
  .g-seal-btn svg { grid-row: 1 / 3; width: 60px; height: 60px; }
}
.g-seal-btn.is-fail b { color: var(--danger-fg); }
.g-seal-btn.is-busy { opacity: .85; }
.g-done { justify-content: center !important; gap: 14px; }
.g-done .cuffs { gap: 12px; }
.g-done .cuff { width: 34px; height: 34px; color: var(--gold); }
.g-done .btn-text { margin-top: 8px; }
.g-q-bonus { padding-top: 18px; }
.g-dock-space { width: 44px; }
.g-closed { justify-content: center !important; gap: 14px; }
.w-s4w .q-who { background: rgba(239,233,220,.1); }
.w-s4w .q-who i { background: var(--gold-lt); }

/* ── G-15 나눔지 (s6) ── */
.g-s6 .pic { padding-top: 14px; }
.g-s6 .lb-top .lb-title em { font-style: italic; font-family: var(--f-latin); font-weight: 500; color: var(--gold); margin-right: 2px; font-size: 19px; }
.g-s6-saved { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font: 400 13px/1 var(--f-body); color: var(--mist); }
.g-s6-saved svg.i { width: 15px; height: 15px; color: var(--gold); }
.g-nanum { display: flex; flex-direction: column; gap: var(--s-4); }
.g-grp { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg); background: var(--cloth); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(200,162,90,.45), 0 10px 24px -8px rgba(20,32,58,.35); }
.g-grp .no { grid-row: span 2; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(200,162,90,.6); }
.g-grp .no b { font: 800 26px/1 var(--f-display); color: var(--gold-lt); }
.g-grp .no small { display: block; margin-top: 2px; font: 600 13px/1 var(--f-body); color: var(--mist); text-align: center; }
.g-grp .g1 { font: 600 16px/1.35 var(--f-body); }
.g-grp .g2 { font-size: var(--fs-caption); color: var(--mist); }
.g-grp.is-none .no b { font-size: 20px; color: var(--mist); }
.g-members { display: flex; flex-wrap: wrap; gap: 6px; }
.g-members span { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px; border-radius: var(--r-pill); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 600 var(--fs-caption)/1 var(--f-body); color: var(--fg-2); }
.g-members .me { background: var(--cloth); color: var(--ivory); box-shadow: none; }
.g-members .lead svg { width: 26px; height: 11px; color: var(--gold-ink); }
.g-members .in svg.i { width: 14px; height: 14px; color: var(--gold-ink); }
.g-members .me.in svg.i { color: var(--gold-lt); }
.g-roster { font: 600 var(--fs-caption)/1.3 var(--f-body); color: var(--fg-muted); }
.g-verse { text-align: center; padding: 2px 8px; }
.g-verse::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto 12px; background: var(--gold-lo); opacity: .6; }
.g-verse p { font: 400 15px/1.75 var(--f-body); color: var(--fg-2); white-space: pre-line; }
.g-verse cite { display: block; margin-top: 4px; font: 600 var(--fs-caption)/1 var(--f-body); font-style: normal; color: var(--gold-ink); }
.g-intro-line { text-align: center; font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }
.g-theme { display: block; text-align: center; }
.g-rules { margin-top: 10px; }
.g-nq { padding: 16px; border-radius: var(--r-lg); background: var(--bg-2); box-shadow: var(--e-paper); }
.g-nq-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-nq-head { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.g-nq-head .n { font: italic 500 28px/.95 var(--f-latin); color: var(--gold-ink); }
.g-nq-head p { font: 600 17px/1.55 var(--f-body); color: var(--ink); white-space: pre-line; }
.g-nq .memo { margin-top: 12px; }
.g-nq-write { height: 72px; margin-top: 12px; border-bottom: 1px solid var(--line-strong); background: repeating-linear-gradient(180deg, transparent 0 23px, var(--line) 23px 24px); }
.g-nhome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--cloth); color: var(--ivory); }
.g-nhome svg.i { color: var(--gold); margin-top: 2px; }
.g-nhome b { display: block; font: 600 var(--fs-caption)/1.3 var(--f-body); color: var(--gold-lt); }
.g-nhome p { margin-top: 3px; font: 600 16px/1.5 var(--f-body); white-space: pre-line; }
.g-closing { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--r-lg); border: 1px dashed var(--stitch-strong); }
.g-closing .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(200,162,90,.16); color: var(--gold-ink); }
.g-closing b { font: 600 15px/1.4 var(--f-body); }
.g-closing p { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); white-space: pre-line; }
.g-minutes { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: var(--r-pill); background: var(--cloth); color: var(--ivory); font: 600 var(--fs-small)/1 var(--f-body); }
.g-minutes svg.i { width: 18px; height: 18px; color: var(--gold); }
.g-lead-notes { padding: 14px 16px; border-radius: var(--r-lg); background: linear-gradient(100deg, rgba(200,162,90,.22), rgba(200,162,90,.08)); box-shadow: inset 0 0 0 1px rgba(122,92,34,.35); }
.g-lead-notes b { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--f-body); color: var(--ink); }
.g-lead-notes b svg { width: 34px; height: 14px; color: var(--gold-ink); }
.g-lead-notes ul { margin-top: 8px; display: grid; gap: 6px; }
.g-lead-notes li { position: relative; padding-left: 14px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.g-lead-notes li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; transform: rotate(45deg); background: var(--gold-ink); }
.g-nanum.is-print .g-nq { box-shadow: none; border: 1px solid var(--line-strong); break-inside: avoid; }

/* ── W-01 아내 홈 ── */
.w-home .pic { padding-top: 18px; }
.w-hero { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 8px 0 4px; }
.w-hero .wordmark { margin: 4px 0 2px; }
.w-hero .title { font-size: 34px; }
.w-hero .lede { max-width: 30ch; }
.w-pill { min-height: 28px; }
.w-count { text-align: center; }
.w-done { display: grid; gap: 10px; justify-items: center; padding: 22px 18px; border-radius: var(--r-lg); background: rgba(4,6,11,.28); box-shadow: inset 0 0 0 1px rgba(239,233,220,.18); text-align: center; }
.w-done .cuffs { gap: 10px; }
.w-done .cuff { width: 28px; height: 28px; color: var(--gold-lt); }
.w-done .caps { color: var(--gold-lt); }
.w-done p { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }
.w-lines { display: grid; gap: 10px; }
.w-lines li { padding: 14px 16px; border-radius: var(--r-md); background: rgba(4,6,11,.25); box-shadow: inset 0 0 0 1px rgba(239,233,220,.14); font: 600 16px/1.55 var(--f-body); color: var(--fg); }
.w-lines li::before { content: "\201C"; margin-right: 4px; font: italic 500 22px/1 var(--f-latin); color: var(--gold-lt); }
.w-foot { display: flex; flex-direction: column; align-items: center; gap: 0; }
.w-live { display: grid; gap: 8px; padding: 18px; border-radius: var(--r-lg); background: rgba(4,6,11,.3); box-shadow: inset 0 0 0 1px rgba(200,162,90,.4); text-align: center; }
.w-live h2 { font: 800 22px/1.3 var(--f-display); }
.w-live p { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.w-live .live { justify-self: center; }

/* 화면 제목은 읽기 프로그램을 위해 포커스를 받지만, 누르는 곳이 아니라서 테두리는 그리지 않습니다 */
.g-s1 [tabindex="-1"]:focus, .g-s2 [tabindex="-1"]:focus, .g-s3 [tabindex="-1"]:focus, .g-s3b [tabindex="-1"]:focus,
.g-s4 [tabindex="-1"]:focus, .g-s6 [tabindex="-1"]:focus, .g-x01 [tabindex="-1"]:focus, .w-home [tabindex="-1"]:focus, .g-sheet [tabindex="-1"]:focus { outline: none; }