/* ==========================================================================
   킹스맨 · 신사의 품격 | 디자인 토큰 + 기본 스타일 + 컴포넌트 (v1.0 · 2026-10-26)
   방향: 시네마틱 킹스맨. 모든 화면은 영화 한 장면이고, 위아래 검은 띠(레터박스)가 메뉴와 버튼을 담습니다.

   쓰는 법
   1) site/tokens.css 로 넣고 <link rel="stylesheet" href="tokens.css"> 를 씁니다. (그림 경로는 이 파일 기준 "assets/…")
   2) 글꼴은 index.html <head> 에 그대로 붙입니다. 굵기·광학 크기를 고정해서 받으므로 아래 숫자 말고는 쓰지 않습니다.
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&family=Bodoni+Moda:ital,opsz,wght@0,11,800;1,28,500&family=IBM+Plex+Sans+KR:wght@400;600&family=IBM+Plex+Mono:wght@500&display=swap">
      나눔명조 800 · Bodoni 이탤릭 500(광학 28) · Bodoni 숫자 800(광학 11) · Plex Sans KR 400/600 · Plex Mono 500. 다른 굵기를 적으면 가짜 굵기가 생기니 쓰지 않습니다.
   3) 아이콘: assets/icons.svg 내용을 <body> 맨 앞에 붙이고 <svg class="i" aria-hidden="true"><use href="#i-umbrella"/></svg>.
   4) 화면 맨 바깥 <div class="frame t-cloth"> 처럼 테마 하나를 줍니다: t-cloth(네이비, 남편 허브) · t-paper(아이보리, 남편 응답·설문·나눔지·운영진)
      · t-lining(옥스블러드, 아내) · t-deck(프로젝터) · t-deck.t-bright(밝은 방 프로젝터).
   5) 움직임은 transform·opacity 만 씁니다. 반복되는 움직임은 화면마다 LIVE 불빛 하나뿐입니다. 움직임 줄이기 설정이면 모두 120ms 페이드가 됩니다(18장).

   차례: 1 원색 · 2 테마 · 3 기본 · 4 화면 틀 · 5 글자 · 6 버튼 · 7 알약·배지 · 8 입력 · 9 카드·띠 · 10 아래 탭
         11 시트·토스트 · 12 입장권 · 13 설문 · 14 결과 · 15 상태 · 16 운영진 · 17 프로젝터 · 18 움직임
   ========================================================================== */

/* ── 1. 원색 ─────────────────────────────────────────────────────────────
   대비는 바로 옆 바탕 기준 WCAG 값입니다. "w" 는 프로젝터가 검은색을 12% 띄웠을 때 값입니다. */
:root {
  /* 필름 (레터박스 띠) */
  --film: #04060b;
  --film-2: #0a0e17;          /* 띠 안의 눌린 면 */
  /* 네이비 원단 */
  --cloth: #0d1626;
  --cloth-2: #131e33;         /* 한 단 올라온 면: 카드, 입장권 */
  --cloth-3: #1b2842;         /* 두 단: 눌린 면, 선택된 줄 */
  --seam: #2b3a54;            /* 솔기선 */
  /* 아이보리 셔츠 코튼 */
  --ivory: #efe9dc;           /* 네이비 위 15.0:1 */
  --ivory-2: #f7f3ea;
  --ivory-3: #e5ddcc;
  --stitch: #cfc5b0;          /* 장식 선만 (1.4:1). 글자·입력 테두리에 쓰지 않음 */
  --stitch-strong: #857a62;   /* 입력 테두리, 빈 별 (아이보리 위 3.5:1) */
  /* 잉크 (아이보리 위 글자) */
  --ink: #14203a;             /* 13.4:1 */
  --ink-2: #33405a;           /* 8.6:1 */
  --ink-muted: #5b6475;       /* 4.9:1, 13px 이상 */
  /* 네이비 위 보조 글자 */
  --mist: #97a3b6;            /* 7.1:1 */
  --mist-2: #8e99ac;          /* 검은 띠 위 7.0:1 (탭) */
  --fog: #d5d9e1;             /* 12.8:1 */
  /* 금 */
  --gold: #c8a25a;            /* 네이비 위 7.6:1 (w 6.1) */
  --gold-lt: #e4c88a;         /* 네이비 위 11.2:1, 안감 위 7.1:1 */
  --gold-hi: #f3e2b0;         /* 14.1:1 */
  --gold-lo: #8a6a2a;         /* 장식 선, 별 테두리 */
  --gold-ink: #7a5c22;        /* 아이보리 위 작은 금색 글자 5.1:1 */
  --gold-deck: #ecd39b;       /* 프로젝터 핵심 숫자, 한 가지 색 (12.4:1, w 9.3) */
  /* 옥스블러드 안감과 밀랍 */
  --lining: #6a1e2b;          /* 아이보리 글자 9.5:1 */
  --lining-2: #561722;
  --lining-3: #7a2635;
  --lining-muted: #dcc4c0;    /* 안감 위 6.9:1 */
  --wax: #74202f;
  --wax-hi: #a23a4b;
  --wax-lo: #4a0f1a;
  /* 자료 색: 남편 = 금, 아내 = 장미. 점·막대에만 쓰고, 글자는 위 글자색을 씁니다 */
  --rose: #e08a9a;            /* 네이비 위 7.1:1 */
  --rose-lt: #eda7b3;         /* 프로젝터 9.3:1 */
  --rose-ink: #8f3345;        /* 아이보리 위 6.4:1 */
  /* 상태 */
  --rec: #e2574c;             /* LIVE 불빛. 항상 'LIVE' 글자와 같이 */
  --live-fg: #f6c9c4;         /* LIVE 글자 12:1 */
  --danger: #ef8a80;          /* 네이비 위 오류 글자 7.4:1 */
  --danger-ink: #a3302a;      /* 아이보리 위 오류 글자 5.8:1 */
  --amber: #e7b04f;           /* 입구: 이미 입장 (9.2:1) */
  --bronze: #855a14;          /* 입장 도장 (아이보리 위 5.0:1) */
  --tape: #e6c34a;            /* 줄자 */
  --tape-ink: #2a2412;

  /* 금박. --foil 은 Kingsman 글자 전용(가장 어두운 색 4.4:1, 24px 이상만). --foil-light 는 큰 숫자용(모든 색 9.9:1 이상) */
  --foil: linear-gradient(100deg, #9c7633 0%, #e9d39a 22%, #c29a4c 40%, #f6e8bf 52%, #c29a4c 64%, #e9d39a 82%, #a8813a 100%);
  --foil-light: linear-gradient(100deg, #dcbc7c 0%, #f3e2b0 30%, #e4c88a 55%, #f6e8bf 75%, #dcbc7c 100%);
  --foil-btn: linear-gradient(180deg, #e6c886 0%, #cfa95f 52%, #b88f45 100%);   /* 네이비 글자 6.1:1 이상 */
  --hairline-gold: linear-gradient(90deg, rgba(200,162,90,0), rgba(200,162,90,.7) 50%, rgba(200,162,90,0));

  /* 글꼴 (대체 글꼴까지) */
  --f-display: "Nanum Myeongjo", "AppleMyungjo", "Noto Serif KR", "Batang", serif;  /* 22px 이상 한글 제목만 */
  --f-latin: "Bodoni Moda", "Bodoni 72", "Didot", "Times New Roman", serif;         /* Kingsman, 큰 숫자 */
  --f-body: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;    /* 번호, 시각, 카운터 */

  /* 글자 크기 (휴대폰) */
  --fs-wordmark: 64px;        /* S1 Kingsman */
  --fs-hero: 36px;            /* 신사의 품격 */
  --fs-title: 28px;
  --fs-h2: 24px;
  --fs-h3: 22px;              /* 나눔명조의 가장 작은 크기 */
  --fs-item: clamp(36px, 12vw, 52px);        /* 설문 항목 (짧은 이름) */
  --fs-item-long: clamp(29px, 9.2vw, 38px);  /* 7글자 넘는 항목 */
  --fs-lede: 17px;
  --fs-body: 16px;
  --fs-label: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;         /* 한글의 가장 작은 크기 */
  --fs-caps: 11px;            /* 영문 대문자 장식만 (자간 .2em 이상). 한글에는 쓰지 않음 */
  --fs-num-gap: 72px;         /* 휴대폰 결과의 차이 숫자 */
  --fs-num-ticket: 34px;      /* 입장 번호 */
  --fs-num-dday: 28px;
  --lh-tight: 1.12;
  --lh-title: 1.28;
  --lh-ui: 1.35;
  --lh-body: 1.6;

  /* 간격 (4px 단위) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;
  --gutter: clamp(16px, 5vw, 20px);

  /* 모서리 */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* 크기 */
  --tap: 44px;                /* 누르는 곳 최소 */
  --tap-l: 52px;
  --btn-h: 56px;
  --bar-top: 48px;            /* 허브 화면 위 띠 */
  --bar-top-slim: 44px;       /* 응답·설문 화면 위 띠 */
  --bar-tab: 56px;            /* 모임 날 아래 탭 */
  --max-w: 480px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* 그림자 (깊이) */
  --e-1: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px -6px rgba(0,0,0,.45);
  --e-2: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 44px -8px rgba(0,0,0,.55);
  --e-ticket: inset 0 0 0 1px rgba(200,162,90,.6), 0 1px 0 rgba(255,255,255,.04), 0 26px 50px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
  --e-paper: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(20,32,58,.06), 0 12px 26px -14px rgba(20,32,58,.28);
  --e-sheet: 0 -24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(200,162,90,.55);
  --e-gold: inset 0 1px 0 rgba(255,246,222,.65), inset 0 -1px 0 rgba(90,64,20,.35), 0 10px 28px -6px rgba(200,162,90,.28);
  --e-toast: 0 14px 34px rgba(0,0,0,.42);

  /* 움직임 */
  --ease-out: cubic-bezier(.2,.7,.1,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-stamp: cubic-bezier(.2,1.4,.4,1);    /* 살짝 튀었다가 앉음 */
  --d-tap: 120ms;
  --d-fast: 160ms;
  --d-med: 280ms;
  --d-slow: 600ms;
  --d-scene: 900ms;
  --d-advance: 350ms;         /* 별·보기를 누른 뒤 다음 문항까지 (채워진 모습을 먼저 보여 줌) */
  --d-live: 1600ms;           /* LIVE 불빛, 화면에서 유일하게 반복되는 움직임 */

  /* 쌓는 순서 */
  --z-bar: 20; --z-banner: 25; --z-scrim: 39; --z-sheet: 40; --z-toast: 50;
}

/* ── 2. 테마: 아래 컴포넌트는 이 변수만 씁니다 ───────────────────────────── */
.t-cloth {                  /* 네이비 허브: 초대장, 입장권, 결과 */
  --bg: var(--cloth); --bg-2: var(--cloth-2); --bg-3: rgba(239,233,220,.05);
  --fg: var(--ivory); --fg-2: var(--fog); --fg-muted: var(--mist);
  --line: rgba(239,233,220,.12); --line-strong: rgba(239,233,220,.42);   /* 경계 3.6:1 */
  --accent: var(--gold); --accent-2: var(--gold-lt); --on-gold: var(--cloth); --focus: var(--gold-lt);
  --opt-bg: rgba(239,233,220,.05); --opt-line: rgba(239,233,220,.42); --opt-on-bg: var(--ivory); --opt-on-fg: var(--cloth); --opt-on-mark: var(--gold-lo);
  --star-on: var(--gold); --star-line: var(--gold-lt); --star-off: rgba(239,233,220,.55);
  --data-h: var(--gold); --data-w: var(--rose); --data-h-fg: var(--gold-lt); --data-w-fg: var(--rose);
  --danger-fg: var(--danger); --chip-bg: rgba(239,233,220,.08); --chip-fg: var(--ivory);
  --card-shadow: var(--e-1); --bar-fade: rgba(4,6,11,.5); --notch: var(--cloth);
  --tex:
    url("../assets/grain-dark.png") 0 0 / 64px 64px,
    radial-gradient(90% 55% at 50% -8%, rgba(239,233,220,.075), rgba(239,233,220,0) 70%),
    radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%),
    repeating-linear-gradient(90deg, rgba(239,233,220,.014) 0 1px, rgba(0,0,0,0) 1px 13px),
    var(--cloth);
  color-scheme: dark;
}
.t-paper {                  /* 아이보리: 남편 응답·설문·나눔지, 운영진 */
  --bg: var(--ivory); --bg-2: var(--ivory-2); --bg-3: #fbf8f2;
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ink-muted);
  --line: var(--stitch); --line-strong: var(--stitch-strong);
  --accent: var(--gold-ink); --accent-2: var(--gold-ink); --on-gold: var(--cloth); --focus: var(--cloth);
  --opt-bg: var(--ivory-2); --opt-line: var(--stitch-strong); --opt-on-bg: var(--cloth); --opt-on-fg: var(--ivory); --opt-on-mark: var(--gold);
  --star-on: var(--gold); --star-line: var(--gold-ink); --star-off: var(--stitch-strong);
  --data-h: var(--gold-lo); --data-w: var(--rose-ink); --data-h-fg: var(--gold-ink); --data-w-fg: var(--rose-ink);
  --danger-fg: var(--danger-ink); --chip-bg: rgba(20,32,58,.06); --chip-fg: var(--ink-2);
  --card-shadow: var(--e-paper); --bar-fade: rgba(20,32,58,.1); --notch: var(--ivory);
  --tex:
    url("../assets/grain-light.png") 0 0 / 64px 64px,
    radial-gradient(100% 60% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(140% 100% at 50% 45%, rgba(0,0,0,0) 60%, rgba(60,45,20,.08) 100%),
    var(--ivory);
  color-scheme: light;
}
.t-lining {                 /* 옥스블러드 안감: 아내 화면 */
  --bg: var(--lining); --bg-2: rgba(239,233,220,.07); --bg-3: rgba(239,233,220,.07);
  --fg: var(--ivory); --fg-2: #f1dcd8; --fg-muted: var(--lining-muted);
  --line: rgba(239,233,220,.18); --line-strong: rgba(239,233,220,.5);
  --accent: var(--gold-lt); --accent-2: var(--gold-hi); --on-gold: var(--lining-2); --focus: var(--gold-hi);
  --opt-bg: rgba(239,233,220,.07); --opt-line: rgba(239,233,220,.5); --opt-on-bg: var(--ivory); --opt-on-fg: var(--lining); --opt-on-mark: var(--gold-lo);
  --star-on: var(--gold); --star-line: var(--gold-hi); --star-off: rgba(239,233,220,.55);
  --data-h: var(--gold-lt); --data-w: var(--ivory); --data-h-fg: var(--gold-lt); --data-w-fg: var(--ivory);
  --danger-fg: #ffb4a8; --chip-bg: rgba(239,233,220,.1); --chip-fg: var(--ivory);
  --card-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px -10px rgba(30,4,10,.55); --bar-fade: rgba(4,6,11,.45); --notch: var(--lining);
  --tex:
    url("../assets/grain-dark.png") 0 0 / 64px 64px,
    radial-gradient(90% 55% at 50% -8%, rgba(255,220,200,.10), rgba(0,0,0,0) 70%),
    linear-gradient(135deg, rgba(255,255,255,.025) 0 50%, rgba(0,0,0,0) 50%) 0 0 / 6px 6px,
    radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%),
    var(--lining);
  color-scheme: dark;
}
/* 아내도 결과(W-06)는 네이비 극장 화면(t-cloth)에서 봅니다. 장미색 점이 안감 위에서는 묻히기 때문입니다. */

.t-deck {                   /* 프로젝터 (밝게 뜬 검정에서도 읽히도록 밝은 색만) */
  --bg: var(--cloth); --fg: var(--ivory); --fg-2: var(--fog); --fg-muted: #b9c1ce;   /* w 7.7 */
  --accent: var(--gold-lt); --gap-fg: var(--gold-deck);
  --data-h: var(--gold-lt); --data-w: var(--rose-lt); --data-h-fg: var(--gold-lt); --data-w-fg: var(--rose-lt);
  --axis: rgba(239,233,220,.82); --axis-fg: #d8dde5; --ring: var(--cloth);
  --line: rgba(239,233,220,.16);
  --tex:
    url("../assets/grain-dark.png") 0 0 / 96px 96px,
    radial-gradient(42% 70% at 50% -10%, rgba(239,233,220,.12), rgba(239,233,220,0) 72%),
    radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,.4) 100%),
    var(--cloth);
  color-scheme: dark;
}
.t-deck.t-bright {          /* 4층 홀을 어둡게 못 할 때: L 키 */
  --bg: var(--ivory); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ink-2);
  --accent: var(--gold-ink); --gap-fg: #5e4511;                          /* 7.4:1 */
  --data-h: var(--gold-lo); --data-w: var(--rose-ink); --data-h-fg: var(--gold-ink); --data-w-fg: var(--rose-ink);
  --axis: var(--ink-2); --axis-fg: var(--ink); --ring: var(--ivory);
  --line: rgba(20,32,58,.18);
  --tex:
    radial-gradient(60% 80% at 50% -10%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%),
    var(--ivory);
  color-scheme: light;
}
/* 테마 색을 바탕까지 칠하고 싶을 때 (참고 페이지, 시트 안쪽 등) */
.surface { background: var(--tex, var(--bg)); color: var(--fg); }

/* ── 3. 기본 ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; background: var(--film); }
body {
  margin: 0; min-height: 100%;
  font: 400 var(--fs-body)/var(--lh-body) var(--f-body);
  color: var(--ivory); background: var(--film);
  word-break: keep-all; overflow-wrap: anywhere;          /* 한글 낱말을 중간에서 자르지 않음 */
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, figure, blockquote, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; touch-action: manipulation; background: none; border: 0; padding: 0; text-align: inherit; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
svg.i { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
:focus-visible { outline: 3px solid var(--focus, var(--gold-lt)); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(200,162,90,.35); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* ── 4. 화면 틀: 문서가 그대로 스크롤되고 위아래 띠만 붙어 있습니다 ───────────
   - 바탕 질감은 고정된 가상 요소 하나에 그립니다 (background-attachment: fixed 는 iOS 가 무시하므로 쓰지 않음).
   - 입력칸에 글을 쓰는 동안(html.is-typing) 아래 띠를 숨겨 키보드가 칸을 가리지 않게 합니다. */
.frame {
  position: relative; isolation: isolate;
  overflow-x: clip;                                     /* 설문 넘김(옆으로 미끄러짐) 등이 화면을 옆으로 넓히지 않게. clip 은 sticky 띠를 깨지 않음 */
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;                /* 100dvh 를 모르는 브라우저는 100vh */
  color: var(--fg); background: var(--bg);
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }   /* iOS 15 이하: 같은 막이 (body 값은 화면 전체로 옮겨 가서 sticky 는 그대로) */
.frame::before {
  content: ""; position: fixed; z-index: -1; top: 0; bottom: 0;
  left: max(0px, calc(50% - var(--max-w) / 2)); right: max(0px, calc(50% - var(--max-w) / 2));
  background: var(--tex); pointer-events: none;
}
.pic { position: relative; flex: 1 0 auto; padding: var(--s-5) var(--gutter) var(--s-8); }   /* 그림(내용) 영역 */
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack.is-tight { gap: var(--s-3); }
.stack.is-loose { gap: var(--s-6); }

/* 레터박스 띠 */
.lb { position: sticky; z-index: var(--z-bar); flex: none; color: var(--ivory); background: url("../assets/grain-dark.png") 0 0 / 64px 64px, var(--film);
  /* 띠는 어느 테마에서나 검은 필름이라 글자색도 어두운 테마 값으로 */
  --fg: var(--ivory); --fg-2: var(--fog); --fg-muted: var(--mist); --line: rgba(239,233,220,.12); --line-strong: rgba(239,233,220,.42);
  --accent: var(--gold); --accent-2: var(--gold-lt); --focus: var(--gold-lt); --bg-3: rgba(239,233,220,.05); }
.lb-top {
  top: 0; display: flex; align-items: center; gap: var(--s-3);
  min-height: calc(var(--bar-top) + var(--safe-t)); padding: var(--safe-t) var(--s-2) 0 var(--s-4);
}
.lb-top.is-slim { min-height: calc(var(--bar-top-slim) + var(--safe-t)); }
.lb-top.is-center { justify-content: center; }
.lb-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline-gold); opacity: .55; }
.lb-top .spacer { flex: 1; }
.lb-title { font: 600 15px/1.2 var(--f-body); color: var(--ivory); }
.lb-credit { font: 400 var(--fs-caption)/1.3 var(--f-body); letter-spacing: .04em; color: rgba(239,233,220,.72); }
.lb-back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 var(--s-2) 0 0; font: 600 14px/1 var(--f-body); color: rgba(239,233,220,.82); }
.lb-back svg.i { width: 20px; height: 20px; }
.lb-bottom {
  bottom: 0; display: grid; gap: 2px;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + var(--safe-b));
}
.lb-bottom::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: linear-gradient(rgba(0,0,0,0), var(--bar-fade, rgba(4,6,11,.5))); pointer-events: none; }
.lb-bottom::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline-gold); opacity: .5; }
.lb-note { font: 400 var(--fs-caption)/1.4 var(--f-body); color: var(--mist); text-align: center; }
html.is-typing .lb-bottom, html.is-typing .tabbar { display: none; }

/* 짧은 화면 (카카오톡 안 360×640 등) */
@media (max-height: 700px) {
  :root { --bar-top: 44px; --btn-h: 52px; --fs-wordmark: 56px; --fs-hero: 32px; }
}

/* ── 5. 글자 ─────────────────────────────────────────────────────────── */
/* 워드마크는 글자가 아니라 SVG 경로입니다 (assets/icons.svg 의 #wm-k, #wm-ko). 글꼴이 늦게 와도 바뀌지 않고, 금박은 SVG 그라데이션이라
   오래된 웹뷰에서도 그대로 보입니다. 크기는 '글자 크기'로 줍니다: style="--fs:64px".
   <svg class="wm-svg k" viewBox="0 0 446.3 101.6" role="img" aria-label="Kingsman"><use href="#wm-k" fill="url(#g-foil-wm)"/></svg>
   <svg class="wm-svg ko" viewBox="0 0 480.3 95.9" role="img" aria-label="신사의 품격"><use href="#wm-ko"/></svg> */
.wm-svg { display: block; flex: none; overflow: visible; fill: currentColor; }
.wm-svg.k { width: calc(var(--fs, 21px) * 4.463); height: calc(var(--fs, 21px) * 1.016); }
.wm-svg.ko { width: calc(var(--fs, 36px) * 4.803); height: calc(var(--fs, 36px) * .959); }
.wm-svg.k.on-baseline { margin-bottom: calc(var(--fs, 21px) * -.26); }   /* 글줄 기준선에 맞출 때 (g 의 꼬리만큼) */
.wm-sheen { transform: translateX(0) skewX(-18deg); }
.sweep-once .wm-sheen { animation: km-wm-sheen 1.4s var(--ease-in-out) var(--sweep-delay, .9s) 1 both; }
.wordmark { display: grid; justify-items: center; gap: calc(var(--fs-wordmark) * .1); }
.wm { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; color: var(--gold); }
.wm-k { font: italic 500 21px/1 var(--f-latin); color: var(--gold); padding: 0 .06em .08em 0; }   /* (글자판, 예비용) */
.wm-s { font: 600 13px/1 var(--f-body); color: var(--ivory); opacity: .9; }
.eyebrow { font: 600 var(--fs-caption)/1.35 var(--f-body); color: var(--accent); letter-spacing: .02em; }
.caps { font: 800 var(--fs-caps)/1.2 var(--f-latin); letter-spacing: .28em; text-transform: uppercase; }   /* 영문 장식만, aria-hidden 권장 */
.latin-i { font-family: var(--f-latin); font-style: italic; font-weight: 500; letter-spacing: 0; }
.display { font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; }
.title { font: 800 var(--fs-title)/var(--lh-title) var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.h2 { font: 800 var(--fs-h2)/1.3 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.h3 { font: 800 var(--fs-h3)/1.32 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--fg-2); }
.body-s { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); }
.strong { font-weight: 600; color: var(--fg); }
.num { font-family: var(--f-latin); font-weight: 800; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.mono { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.vs { font: italic 500 .82em/1 var(--f-latin); color: var(--accent); margin: 0 .12em; }
.gold { color: var(--accent); }

/* 금박 글씨: 지원하지 않으면 그냥 금색. sweep-once 는 첫 화면에서 한 번만 빛이 지나갑니다 (1.4초, 반복 없음) */
.foil { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .foil { display: inline-block; background-image: var(--foil); background-size: 240% 100%; background-position: 0% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
  .foil.is-light { background-image: var(--foil-light); }
  .foil.sweep-once { animation: km-foil 1.4s var(--ease-in-out) var(--sweep-delay, .5s) 1 both; }
}

/* 장우산 구분선 */
.rule-umbrella { display: flex; align-items: center; gap: 6px; width: min(300px, 100%); margin: 0 auto; color: var(--gold); }
.rule-umbrella span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,162,90,0), rgba(200,162,90,.8)); }
.rule-umbrella span:last-child { background: linear-gradient(90deg, rgba(200,162,90,.8), rgba(200,162,90,0)); }
.rule-umbrella svg { width: 168px; height: 20px; flex: none; opacity: .9; }
.rule { height: 1px; border: 0; margin: 0; background: var(--line); }

/* ── 6. 버튼 ─────────────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 var(--s-5);
  border-radius: var(--r-md); border: 0;
  font: 600 17px/1.2 var(--f-body); text-align: center; text-decoration: none; white-space: nowrap;
  transition: transform var(--d-tap) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), background-color var(--d-fast);
  user-select: none; -webkit-user-select: none;
}
.btn.is-block { display: flex; width: 100%; }
.btn:active { transform: scale(.985); }
.btn svg.i { width: 20px; height: 20px; }
.btn-gold { background: var(--foil-btn); color: var(--on-gold, var(--cloth)); box-shadow: var(--e-gold); }
.btn-gold:active { box-shadow: inset 0 1px 0 rgba(255,246,222,.45), 0 4px 12px -4px rgba(200,162,90,.3); }
.btn-ink { background: var(--cloth); color: var(--ivory); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px -10px rgba(13,22,38,.6); }
.btn-ghost { min-height: var(--tap-l); border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--fg); font-size: 15px; }
.btn-ghost svg.i { color: var(--accent); }
.btn-danger { min-height: var(--tap-l); border: 1px solid var(--danger-fg); background: transparent; color: var(--danger-fg); font-size: 15px; }
.btn-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 var(--s-3);
  font: 600 15px/1.2 var(--f-body); color: var(--fg-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.btn-text.is-quiet { font-weight: 400; color: var(--fg-muted); }
.btn-text svg.i { width: 18px; height: 18px; }
.icon-btn { display: inline-grid; place-items: center; min-width: var(--tap); min-height: var(--tap); border-radius: var(--r-md); color: inherit; }
.icon-btn svg.i { width: 22px; height: 22px; }
/* 회색 '못 누름' 단추는 쓰지 않습니다. 누르면 빠진 것을 바로 옆에 알려 줍니다.
   정말 못 누르는 때(인터넷 끊김)만 점선 테두리 + 이유 한 줄. */
.btn[aria-disabled="true"] { background: transparent; color: var(--fg-muted); border: 1.5px dashed var(--line-strong); box-shadow: none; }
/* 보내는 중: 글자 옆 점 세 개 (요청이 끝나면 멈춤) */
.btn.is-busy { pointer-events: none; }
.btn .dots { display: inline-flex; gap: 4px; }
.btn .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: km-dots 1.1s infinite both; }
.btn .dots i:nth-child(2) { animation-delay: .15s; }
.btn .dots i:nth-child(3) { animation-delay: .3s; }
/* 금 단추 위로 빛이 한 번 지나감 (transform 만) */
.btn-gold.sweep-once::after, .sweep-once-box::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,248,226,0) 15%, rgba(255,248,226,.45) 50%, rgba(255,248,226,0) 85%);
  transform: translateX(-130%) skewX(-14deg);
  animation: km-glint 1.2s var(--ease-in-out) var(--sweep-delay, 1.2s) 1 both;
}
.btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }

/* ── 7. 알약 · 배지 ──────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  font: 600 var(--fs-caption)/1 var(--f-body); white-space: nowrap;
  background: var(--chip-bg); color: var(--chip-fg);
}
.pill svg.i { width: 15px; height: 15px; }
.pill.is-outline { background: transparent; color: var(--accent-2); box-shadow: inset 0 0 0 1px currentColor; }
.pill.is-gold { background: var(--foil-btn); color: var(--cloth); }
.pill.is-sample { background: transparent; color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-strong); border: 0; outline: 1px dashed var(--line-strong); outline-offset: -1px; }
.pill.is-new { min-height: 24px; padding: 0 9px; font-size: 12px; background: var(--foil-btn); color: var(--cloth); }   /* '방금 공개' 숫자처럼 짧은 말만 */
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-dday { font-family: var(--f-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }   /* D-18 의 붙임표가 보이도록 Plex */
/* LIVE 배지: 빨간 불빛 + LIVE 글자 (색만으로 알리지 않음) */
.live { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 10px; border-radius: var(--r-pill); border: 1px solid rgba(226,87,76,.6); color: var(--live-fg); background: rgba(226,87,76,.08); font: 500 12px/1 var(--f-mono); letter-spacing: .14em; white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px rgba(226,87,76,.85); animation: km-live var(--d-live) ease-in-out infinite; }
.live.is-still i { animation: none; }
/* 나눔 약속 칩 */
.rules { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.rules li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 var(--fs-caption)/1.2 var(--f-body); color: var(--fg-2); }
.tag { display: inline-block; font: 600 var(--fs-caption)/1.3 var(--f-body); color: var(--accent); }   /* 나눔지 질문 위 주제 */

/* ── 8. 입력 ─────────────────────────────────────────────────────────── */
.field { display: grid; gap: var(--s-2); scroll-margin: 96px 0 140px; }
.f-label { font: 600 var(--fs-label)/1.35 var(--f-body); color: var(--fg); }
.f-label .opt-tag { font-weight: 400; color: var(--fg-muted); }
.f-help { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); }
.f-error { display: flex; align-items: flex-start; gap: 6px; font: 600 var(--fs-caption)/1.45 var(--f-body); color: var(--danger-fg); }
.f-error svg.i { width: 17px; height: 17px; margin-top: 1px; }
.input, .textarea {
  width: 100%; min-height: 54px; padding: 0 var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--bg-3); color: var(--fg);
  font-size: 17px;          /* 16px 보다 작으면 iOS 가 화면을 확대합니다 */
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.textarea { min-height: 112px; padding: 12px var(--s-4); line-height: 1.6; resize: none; }
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,162,90,.3); }
.field.is-invalid .input, .field.is-invalid .last4, .field.is-invalid .opt { border-color: var(--danger-fg); }
.field.is-invalid .f-label { color: var(--danger-fg); }
.count { justify-self: end; font: 500 12px/1 var(--f-mono); color: var(--fg-muted); }

/* 휴대폰 뒷자리 4칸: 진짜 입력칸 하나를 네 칸 그림 위에 투명하게 덮습니다 (붙여넣기·지우기·자동 완성 모두 됨) */
.last4 {
  position: relative; display: flex; align-items: center; gap: var(--s-2);
  min-height: 62px; padding: 0 var(--s-2) 0 var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--bg-2);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.t-cloth .last4 { background: var(--bg-3); }
.last4:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,162,90,.3); }
.last4-pre { font: 500 17px/1 var(--f-mono); color: var(--fg-muted); white-space: nowrap; }
.last4-pre i { font-style: normal; font-size: .7em; letter-spacing: .08em; vertical-align: .12em; }
.last4-cells { display: grid; grid-template-columns: repeat(4, clamp(36px, 10.6vw, 44px)); gap: 6px; margin-left: auto; }
.last4-cells span {
  position: relative; display: grid; place-items: center; height: 48px;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-3);
  font: 500 23px/1 var(--f-mono); color: var(--fg);
}
.t-cloth .last4-cells span { background: var(--film-2); }
.last4-cells span.is-caret { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,162,90,.25); }
.last4-cells span.is-caret::after { content: ""; width: 2px; height: 24px; background: var(--accent); animation: km-caret 1s steps(1) infinite; }
.last4-input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit; opacity: .011;
  background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  font-size: 16px; outline: none; cursor: text;
}
.last4-input::selection { background: transparent; }

/* 고르기: 두 칸(세그먼트), 칩, 체크 */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.seg.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.seg.is-4 .opt { padding: 0 4px; }
@media (max-width: 374px) { .seg.is-4 .opt { font-size: 14px; } }   /* 360px 에서도 '13년 이상' 한 줄 */
/* 네 칸짜리는 고른 표시(✓)를 글자 옆이 아니라 칸 왼쪽 위에 얹어요: 골라도 '13년 이상'이 두 줄로 밀리지 않게 */
.seg.is-4 .opt { position: relative; white-space: nowrap; }
.seg.is-4 .opt .mark { position: absolute; top: 5px; left: 5px; width: 13px; height: 13px; }
.opt {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; padding: 0 var(--s-2);
  border-radius: var(--r-md); border: 1px solid var(--opt-line); background: var(--opt-bg); color: var(--fg);
  font: 600 15px/1.25 var(--f-body); text-align: center;
  transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast), transform var(--d-tap) var(--ease-out);
}
.opt:active { transform: scale(.98); }
.opt .mark { display: none; width: 17px; height: 17px; color: var(--opt-on-mark); }
.opt[aria-checked="true"], .opt.is-on { background: var(--opt-on-bg); border-color: var(--opt-on-bg); color: var(--opt-on-fg); }
.opt[aria-checked="true"] .mark, .opt.is-on .mark { display: block; }
.check { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); padding: 10px 0; font: 600 var(--fs-label)/1.45 var(--f-body); color: var(--fg); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.check .box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--bg-3); color: transparent; }
.check .box svg { width: 16px; height: 16px; }
.check input:checked + .box { background: var(--opt-on-bg); border-color: var(--opt-on-bg); color: var(--opt-on-mark); }
.check input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 2px; }
.check small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-caption); color: var(--fg-muted); }

/* 나만 보는 메모: 줄 노트 */
.memo { display: grid; gap: 6px; }
.memo-k { display: flex; align-items: center; gap: 5px; font: 600 var(--fs-caption)/1.2 var(--f-body); color: var(--fg-muted); }
.memo-k svg.i { width: 15px; height: 15px; }
.memo-k .r { margin-left: auto; font-weight: 400; }
.memo textarea {
  width: 100%; min-height: 92px; resize: none; padding: 6px 12px 4px;
  border-radius: 10px; border: 1px solid var(--line-strong); color: var(--fg);
  font: 400 15px/28px var(--f-body);
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 27px, rgba(122,92,34,.2) 27px 28px) 0 0 / 100% 28px content-box, var(--bg-3);
}
.memo textarea::placeholder { color: var(--fg-muted); opacity: 1; }
.memo textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,162,90,.25); }

/* 토글 (운영진) */
.toggle { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle i { position: absolute; inset: 0; border-radius: 16px; background: var(--stitch-strong); transition: background-color var(--d-fast); }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--ivory-2); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--d-fast) var(--ease-out); }
.toggle input:checked + i { background: var(--cloth); }
.toggle input:checked + i::after { transform: translateX(20px); background: var(--gold-lt); }
.toggle input:focus-visible + i { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── 9. 카드 · 띠 ────────────────────────────────────────────────────── */
.card { position: relative; border-radius: var(--r-lg); background: var(--bg-2); padding: var(--s-4); box-shadow: var(--card-shadow); }
.card.is-line { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.card.is-gold { box-shadow: inset 0 0 0 1px rgba(200,162,90,.45), var(--card-shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }

/* 다음 할 일 띠 (설문 안 끝남 → 끝남) */
.task {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  min-height: 68px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: 14px; background: linear-gradient(100deg, rgba(200,162,90,.16), rgba(200,162,90,.05)); box-shadow: inset 0 0 0 1px rgba(200,162,90,.5);
  color: var(--fg);
}
.task b { display: block; font: 600 16px/1.35 var(--f-body); }
.task small { display: block; margin-top: 2px; font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-muted); }
.task > svg.i { width: 22px; height: 22px; color: var(--accent-2); }
.task.is-done { min-height: 56px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); grid-template-columns: auto minmax(0, 1fr); }
.task.is-done b { color: var(--accent-2); }
.task .cuffs .cuff { width: 17px; height: 17px; }

/* 단계별 문 (결과 · 나눔지): 열림 / LIVE / 잠김 */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.door {
  position: relative; display: grid; align-content: space-between; gap: var(--s-3);
  min-height: 116px; padding: 14px; border-radius: 16px;
  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);
  color: var(--ivory);
}
.door-top { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.door-top svg.i { width: 24px; height: 24px; color: var(--gold); }
.door b { display: block; font: 800 20px/1.25 var(--f-display); letter-spacing: -.01em; }
.door small { display: block; margin-top: 3px; font-size: var(--fs-caption); line-height: 1.4; color: var(--mist); }
.door.is-locked { background: transparent; box-shadow: none; border: 1.5px dashed rgba(239,233,220,.3); }
.door.is-locked b { font: 600 16px/1.3 var(--f-body); color: var(--fog); }
.door.is-locked .door-top svg.i { color: var(--mist); }
.t-paper .door.is-locked { border-color: var(--stitch-strong); color: var(--ink); }
.t-paper .door.is-locked b { color: var(--ink-2); }
.t-paper .door.is-locked small, .t-paper .door.is-locked .door-top svg.i { color: var(--ink-muted); }

/* 모임 날 결과 발표 중 띠 */
.live-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  min-height: 60px; padding: 10px 10px 10px 12px; border-radius: 14px;
  background: url("../assets/grain-dark.png") 0 0 / 64px 64px, var(--film); box-shadow: inset 0 0 0 1px rgba(226,87,76,.45);
  color: var(--ivory);
}
.live-strip b { display: block; font: 600 15px/1.35 var(--f-body); }
.live-strip small { display: block; font-size: var(--fs-caption); line-height: 1.4; color: var(--mist); }
.live-strip > svg.i { width: 22px; height: 22px; color: var(--live-fg); }

/* 알림 띠: 안내(금색 줄) / 급함(옥스블러드) / 인터넷 약함 / 오류 */
.banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font: 600 var(--fs-small)/1.5 var(--f-body); }
.banner svg.i { width: 20px; height: 20px; margin-top: 1px; }
.banner.is-info { background: var(--bg-2); color: var(--fg); box-shadow: inset 3px 0 0 var(--gold); }
.banner.is-info svg.i { color: var(--accent); }
.banner.is-urgent { background: var(--lining); color: var(--ivory); box-shadow: inset 0 0 0 1px rgba(239,233,220,.2); }
.banner.is-urgent svg.i { color: var(--gold-lt); }
.banner.is-error { background: transparent; color: var(--danger-fg); box-shadow: inset 0 0 0 1px var(--danger-fg); }
/* '인터넷이 약해요' 띠는 main.js 가 frame 바로 안(여백 없는 곳)에 넣습니다: 겉 div 를 붙이고, 띠는 화면 폭 그대로 (음수 여백 금지: 화면이 옆으로 넓어짐) */
[data-auto-banner="offline"] { position: sticky; top: calc(var(--bar-top) + var(--safe-t)); z-index: var(--z-banner); }
.banner.is-offline {
  border-radius: 0; margin: 0; padding: 10px var(--gutter);
  background: var(--cloth-3); color: var(--fog); font-weight: 400; box-shadow: inset 0 -1px 0 rgba(239,233,220,.12);
}
.banner.is-offline svg.i { color: var(--gold-lt); }
.banner .act { margin-left: auto; flex: none; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }

/* 입장 직후 환영 */
.welcome { display: flex; align-items: center; gap: var(--s-3); padding: 12px 14px; border-radius: 14px; background: linear-gradient(100deg, rgba(200,162,90,.18), rgba(200,162,90,.05)); box-shadow: inset 0 0 0 1px rgba(200,162,90,.42); }
.welcome .ok { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--foil-btn); color: var(--cloth); }
.welcome .ok svg { width: 19px; height: 19px; }
.welcome b { display: block; font: 600 16px/1.35 var(--f-body); color: var(--ivory); }
.welcome p { font-size: var(--fs-small); line-height: 1.45; color: var(--fog); }

/* 개인정보 안내 */
.privacy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); padding: 14px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.privacy svg.i { width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.privacy b { display: block; font: 600 var(--fs-small)/1.45 var(--f-body); color: var(--fg); }
.privacy p { font-size: var(--fs-caption); line-height: 1.55; color: var(--fg-muted); margin-top: 2px; }

/* 크레딧 (모임 정보): 금색 이름표 오른쪽 정렬, 값은 왼쪽 정렬 */
.credits { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-2); }
.credits dt { text-align: right; font: 600 var(--fs-caption)/26px var(--f-body); color: var(--accent); }
.credits dd { font: 600 16px/26px var(--f-body); color: var(--fg); }
.credits dd small { font-weight: 400; color: var(--fg-muted); font-size: var(--fs-caption); }

/* 필름 리더 카운트다운 (D-18). 쐐기는 첫 화면에서 한 바퀴만 돕니다 */
.dday { display: flex; align-items: center; gap: 14px; }
.leader { position: relative; width: 64px; height: 64px; flex: none; }
.leader svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.leader .wedge { transform-origin: 50px 50px; }
.leader.turn-once .wedge { animation: km-turn 1.4s var(--ease-out) var(--turn-delay, 1s) 1 both; }
.leader .n { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 2px; font: 800 var(--fs-num-dday)/1 var(--f-latin); color: var(--ivory); }
.leader .n.is-ko { font: 800 22px/1 var(--f-display); padding-top: 0; }
.dday b { display: block; font: 600 17px/1.35 var(--f-body); color: var(--fg); }
.dday b em { font-style: normal; color: var(--accent-2); }
.dday small { display: block; font-size: var(--fs-caption); line-height: 1.45; color: var(--fg-muted); }

/* 링크 하나로 다 되는 순서 (I~IV) */
.steps ol { display: grid; }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(200,162,90,.6); font: 800 15px/1 var(--f-latin); color: var(--accent-2); }
.steps b { display: block; font: 600 16px/1.35 var(--f-body); color: var(--fg); }
.steps p { margin-top: 2px; font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); }
.steps li.is-now .no { background: var(--foil-btn); color: var(--cloth); box-shadow: none; }

/* 이날 하는 것: 엔딩 크레딧처럼 가운데 정렬 */
.programme { text-align: center; padding: 22px 16px 18px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(4,6,11,.55), rgba(4,6,11,.25)); box-shadow: inset 0 0 0 1px rgba(200,162,90,.3); }
.programme .caps { color: var(--gold); }
.programme h2 { margin-top: 6px; }
.programme ol { display: grid; gap: 14px; margin-top: 18px; }
.programme li { display: grid; gap: 2px; }
.programme li + li::before { content: ""; justify-self: center; width: 5px; height: 5px; margin-bottom: 12px; transform: rotate(45deg); background: var(--gold); opacity: .7; }
.programme b { font: 600 16px/1.35 var(--f-body); color: var(--fg); }
.programme span { font-size: var(--fs-caption); color: var(--fg-muted); }
.programme li.is-now b { color: var(--accent-2); }
.programme .caption { margin-top: 16px; }

/* 예고편 (첫 화면 사진): 사진이 안 열려도 조명 그라데이션과 검정 바탕이 남습니다 */
.trailer {
  position: relative; overflow: hidden; flex: none;
  aspect-ratio: 2 / 1; max-height: 240px; width: 100%;
  background: radial-gradient(60% 90% at 50% 0%, rgba(239,233,220,.18), rgba(239,233,220,0) 70%), var(--film);   /* 사진이 안 열릴 때 남는 바탕 */
}
.trailer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }   /* onerror 면 숨김 */
.trailer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,6,11,.45) 0%, rgba(4,6,11,0) 18%, rgba(4,6,11,0) 74%, rgba(4,6,11,.88) 100%), url("../assets/grain-dark.png") 0 0 / 64px 64px; }
.trailer .curtain { position: absolute; left: 0; right: 0; height: 50%; z-index: 3; background: var(--film); pointer-events: none; transform: scaleY(0); }
.trailer .curtain.t { top: 0; transform-origin: top; }
.trailer .curtain.b { bottom: 0; transform-origin: bottom; }
.trailer.open-once .curtain { animation: km-curtain 1.1s var(--ease-out) .1s 1 both; }
.trailer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; z-index: 4; }
.play { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px 0 8px; border-radius: var(--r-pill); background: rgba(4,6,11,.62); box-shadow: inset 0 0 0 1px rgba(243,226,176,.6); color: var(--gold-hi); font: 600 14px/1 var(--f-body); }
.play .ring { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--foil-btn); color: var(--cloth); }
.play .ring svg { width: 15px; height: 15px; margin-left: 2px; }
.strap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 34px; padding: 0 var(--gutter); background: url("../assets/grain-dark.png") 0 0 / 64px 64px, var(--film); color: rgba(239,233,220,.7); }
.strap .caps { color: var(--gold); letter-spacing: .3em; }
@media (max-height: 700px) { .trailer { aspect-ratio: auto; height: 168px; } .trailer > img { object-position: 50% 16%; } }

/* ── 10. 아래 탭 (모임 날에만 보입니다) ────────────────────────────────── */
.tabbar {
  position: sticky; bottom: 0; z-index: var(--z-bar); flex: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: var(--safe-b);
  background: url("../assets/grain-dark.png") 0 0 / 64px 64px, var(--film);
}
.tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline-gold); opacity: .45; }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--bar-tab); color: var(--mist-2); font: 600 var(--fs-caption)/1 var(--f-body);
}
.tab svg.i { width: 23px; height: 23px; }
.tab[aria-current="page"] { color: var(--gold-lt); }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 2px; margin-left: -14px; border-radius: 0 0 2px 2px; background: var(--gold); box-shadow: 0 0 12px rgba(200,162,90,.6); }
.tab .dot { position: absolute; top: 9px; left: 50%; margin-left: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 2px var(--film); }
.tab .dot.is-gold { background: var(--gold-lt); }
.tab.is-locked { color: #6d7789; }

/* ── 11. 시트 · 토스트 ──────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(4,6,11,.72); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  width: 100%; max-width: var(--max-w); margin: 0 auto; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--s-4);
  padding: 10px var(--gutter) calc(var(--s-5) + var(--safe-b));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: url("../assets/grain-dark.png") 0 0 / 64px 64px, linear-gradient(180deg, #17233b, var(--cloth-2) 40%);
  color: var(--ivory); box-shadow: var(--e-sheet);
}
.sheet:not(.t-paper):not(.t-lining) { --bg: var(--cloth); --bg-2: var(--cloth-2); --bg-3: rgba(239,233,220,.05); --fg: var(--ivory); --fg-2: var(--fog); --fg-muted: var(--mist); --line: rgba(239,233,220,.12); --line-strong: rgba(239,233,220,.42); --accent: var(--gold); --accent-2: var(--gold-lt); --focus: var(--gold-lt); --danger-fg: var(--danger); --chip-bg: rgba(239,233,220,.08); --chip-fg: var(--ivory); }
.sheet.t-paper { background: url("../assets/grain-light.png") 0 0 / 64px 64px, var(--ivory); color: var(--ink); box-shadow: 0 -24px 60px rgba(0,0,0,.4); }
.sheet.is-static { position: relative; max-height: none; }
.sheet-grab { width: 40px; height: 4px; margin: 0 auto 2px; border-radius: 2px; background: rgba(239,233,220,.28); }
.sheet.t-paper .sheet-grab { background: rgba(20,32,58,.2); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.sheet-head .icon-btn { margin: -6px -10px 0 0; color: var(--fg-muted); }
.sheet-exits { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--s-2); margin: -6px -8px 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--toast-b, 92px) + var(--safe-b)); z-index: var(--z-toast);
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px 10px 16px;
  border-radius: var(--r-md); background: var(--ivory); color: var(--ink); box-shadow: var(--e-toast);
  font: 600 15px/1.35 var(--f-body);
}
.toast svg.i { width: 20px; height: 20px; color: var(--gold-ink); }
.toast.is-error { background: var(--lining); color: var(--ivory); }
.toast.is-error svg.i { color: var(--gold-lt); }
.toast > span { flex: 1; min-width: 0; }
.toast .act { flex: none; white-space: nowrap; margin-left: 6px; min-height: var(--tap); padding: 0 6px; font-weight: 600; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
.toast.is-error .act { color: var(--gold-hi); }
.toast .timer { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 1px; background: var(--gold); transform-origin: left; animation: km-countdown var(--timer, 15s) linear 1 both; }
.toast.is-static { position: relative; left: auto; bottom: auto; transform: none; }

/* ── 12. 입장권 ─────────────────────────────────────────────────────────
   상태: is-ghost(응답 전 빈 입장권) · 기본(모임 전) · is-door(당일, 큰 QR) · is-in(입장 완료 도장) · is-keep(모임 후 기념)
   QR 위에는 아무것도 올리지 않습니다 (인장 그림도 금지). QR 은 남색 모듈 + 아이보리 판 + 4모듈 여백. */
.ticket {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg); color: var(--ivory);
  background:
    url("../assets/rosette.svg") right 16px top 60px / 112px 112px no-repeat,   /* 동심원 로제트: 번호와 정보 줄 사이에 통째로 */
    radial-gradient(120% 60% at 0% 0%, rgba(200,162,90,.11), rgba(200,162,90,0) 60%),
    linear-gradient(165deg, #1a2741 0%, #121c31 52%, #0f182b 100%);
  box-shadow: var(--e-ticket);
}
.ticket::before { content: ""; position: absolute; inset: 6px; z-index: -1; border-radius: 13px; border: 1px solid rgba(200,162,90,.22); pointer-events: none; }
.t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding: 18px 18px 0; }
.t-brand { display: grid; gap: 4px; }
.t-brand .wm-svg { color: var(--gold); }
.t-brand small { font: 400 var(--fs-caption)/1.3 var(--f-body); color: rgba(239,233,220,.7); }
.t-no { display: grid; justify-items: end; gap: 3px; text-align: right; }
.t-no .caps { color: var(--gold); margin-right: -.28em; }
.t-no .no { display: inline-flex; align-items: baseline; gap: 3px; color: var(--ivory); line-height: 1; }
.t-no .no i { font: italic 500 16px/1 var(--f-latin); color: var(--gold-lt); }
.t-no .no b { font: 800 var(--fs-num-ticket)/1 var(--f-latin); letter-spacing: .01em; font-feature-settings: "lnum" 1; }
.t-name { padding: 14px 18px 0; }
.t-label { font: 400 var(--fs-caption)/1.3 var(--f-body); color: rgba(239,233,220,.68); }
.t-who { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.t-who .display { font-size: 36px; line-height: 1.12; color: var(--ivory); }
.t-who small { font: 400 17px/1 var(--f-body); color: rgba(239,233,220,.75); }
.t-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 18px 0; border-top: 1px solid rgba(239,233,220,.12); border-bottom: 1px solid rgba(239,233,220,.12); }
.t-facts > div { display: grid; gap: 2px; min-width: 0; padding: 10px 0 10px 10px; }
.t-facts > div:first-child { padding-left: 0; }
.t-facts > div + div { border-left: 1px solid rgba(239,233,220,.12); }
.t-facts dt { font: 600 var(--fs-caption)/1.25 var(--f-body); color: var(--gold); }
.t-facts dd { font: 600 16px/1.3 var(--f-body); color: var(--ivory); }
.t-line { display: flex; align-items: center; gap: 10px; margin: 12px 18px 0; font-size: var(--fs-small); line-height: 1.4; color: rgba(239,233,220,.8); }
.t-line svg.i { width: 20px; height: 20px; color: var(--gold); }
.t-line b { color: var(--ivory); font-weight: 600; }
.t-group { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 14px 12px 0; padding: 12px 14px; border-radius: var(--r-md); background: rgba(200,162,90,.08); box-shadow: inset 0 0 0 1px rgba(200,162,90,.3); }
.t-group > svg { width: 50px; height: 21px; color: var(--gold); }
.t-group .g1 { font: 600 16px/1.35 var(--f-body); color: var(--ivory); }
.t-group .g1 b { color: var(--gold-lt); font-weight: 600; }
.t-group .g2 { font-size: var(--fs-caption); line-height: 1.45; color: rgba(239,233,220,.72); }
.t-group.is-pending { background: transparent; box-shadow: none; border: 1px dashed rgba(239,233,220,.28); }
.t-group.is-pending > svg { color: var(--mist); }
.t-group.is-leader { background: linear-gradient(100deg, rgba(200,162,90,.22), rgba(200,162,90,.08)); }
.t-perf { position: relative; height: 28px; margin-top: 14px; }
.t-perf::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 1.5px dashed rgba(239,233,220,.22); }
.t-perf i { position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--notch, var(--cloth)); box-shadow: inset 0 0 0 1px rgba(200,162,90,.6); }
.t-perf i:first-child { left: -13px; }
.t-perf i:last-child { right: -13px; }
.t-stub { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: 2px 18px 20px; }
.stub-r { display: grid; gap: 7px; justify-items: start; }
.stub-r .s1 { font: 600 15px/1.45 var(--f-body); color: var(--ivory); }
.stub-r .s2 { font-size: var(--fs-caption); line-height: 1.45; color: var(--mist); }

/* QR 판 (판 자체가 4모듈 조용한 여백) */
.qr { position: relative; width: 108px; aspect-ratio: 1; border-radius: 10px; background: var(--ivory); color: var(--ink); box-shadow: 0 0 0 1px rgba(200,162,90,.55), 0 8px 18px rgba(0,0,0,.35); }
.qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; transition: opacity var(--d-med); }
.qr.is-big { width: min(244px, 100%); border-radius: 12px; }
.qr.is-used svg { opacity: .14; }
.qr .qr-seal { position: absolute; right: -12px; top: -12px; width: 38px; height: 38px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }

/* 상태 알약 */
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); font: 600 var(--fs-caption)/1 var(--f-body); white-space: nowrap; }
.status.is-pre { color: var(--gold-lt); box-shadow: inset 0 0 0 1px rgba(200,162,90,.8); }
.status.is-pre::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.is-in { color: var(--cloth); background: var(--foil-btn); }
.status.is-in svg.i { width: 15px; height: 15px; }
.status.is-keep { color: var(--fog); box-shadow: inset 0 0 0 1px rgba(239,233,220,.4); }

/* 입장 완료 도장 (청동 고무 도장) */
.stamp {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 118px; height: 118px; margin: -59px 0 0 -59px; border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 3px; text-align: center;
  color: var(--bronze); background: rgba(239,233,220,.62);
  border: 2.5px solid currentColor; box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 4.5px currentColor;
  transform: rotate(-12deg);
}
.stamp .s-top { font: 600 11px/1 var(--f-body); letter-spacing: .16em; margin-right: -.16em; }   /* J-HOUSE 의 붙임표가 보이도록 Plex */
.stamp b { font: 800 23px/1.05 var(--f-display); letter-spacing: -.01em; }
.stamp .s-time { font: 500 12px/1 var(--f-mono); letter-spacing: .04em; }
.qr.is-big .stamp { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.qr.is-big .stamp b { font-size: 28px; }
.qr.is-big .stamp .s-top, .qr.is-big .stamp .s-time { font-size: 13px; }

/* 당일 입구 모드: 이름과 번호, 그 아래 큰 QR (360×560 안에 다 보임) */
.ticket.is-door { background: radial-gradient(120% 60% at 0% 0%, rgba(200,162,90,.11), rgba(200,162,90,0) 60%), linear-gradient(165deg, #1a2741 0%, #121c31 52%, #0f182b 100%); }   /* 입구 모드는 로제트 없이 */
.ticket.is-door .t-head { align-items: center; padding: 16px 18px 0; }
.ticket.is-door .t-head > :first-child { min-width: 0; flex: 1 1 auto; }   /* 긴 이름은 줄을 바꾸고 */
.ticket.is-door .t-no { flex: none; white-space: nowrap; }                 /* 'ADMIT ONE · No. 027' 칸은 줄지 않게 (QA 2회차) */
.ticket.is-door .t-who .display { font-size: 30px; }
.ticket.is-door .t-who.is-long .display { font-size: 22px; line-height: 1.2; }   /* 7자 넘는 이름: 도장이 화면 안에 남게 */
.ticket.is-door .t-no .no b { font-size: 40px; }
.door-meta { margin: 4px 18px 0; font-size: var(--fs-caption); color: rgba(239,233,220,.75); }
.door-qr { display: grid; justify-items: center; gap: 10px; padding: 14px 18px 18px; text-align: center; }
.door-qr .s1 { font: 600 16px/1.4 var(--f-body); color: var(--ivory); }
.door-qr .s2 { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--mist); }
.door-qr .s2 svg.i { width: 16px; height: 16px; color: var(--gold); }

/* 응답 전 빈 입장권 (첫 화면 예고) */
.ticket.is-ghost { background: linear-gradient(165deg, rgba(26,39,65,.55), rgba(15,24,43,.55)); box-shadow: none; border: 1.5px dashed rgba(200,162,90,.55); }
.ticket.is-ghost::before { display: none; }
.ticket.is-ghost .blank { display: inline-block; width: 120px; height: 2px; margin: 0 2px 6px; background: rgba(239,233,220,.35); vertical-align: bottom; }
.ticket.is-ghost .qr { background: transparent; box-shadow: none; border: 1.5px dashed rgba(239,233,220,.4); display: grid; place-items: center; color: var(--mist); }
.ticket.is-ghost .qr svg.i { width: 34px; height: 34px; }
.ticket.is-ghost .t-no .no b { display: inline-block; width: 56px; height: 2px; margin-bottom: 4px; background: rgba(239,233,220,.35); }

/* 작은 입장권 (지금 탭 등) */
.ticket.is-mini { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 12px 14px; }
.ticket.is-mini .qr { width: 52px; border-radius: 6px; }
.ticket.is-mini b { display: block; font: 600 16px/1.3 var(--f-body); }
.ticket.is-mini small { display: block; font-size: var(--fs-caption); color: var(--mist); }

/* 입장권이 처음 나올 때 한 번 빛이 지나감 */
.ticket.issued { animation: km-ticket-in var(--d-scene) var(--ease-out) .1s 1 both; }
.ticket.issued::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 55%; pointer-events: none; z-index: 3; background: linear-gradient(100deg, rgba(255,240,205,0) 20%, rgba(255,240,205,.12) 50%, rgba(255,240,205,0) 80%); transform: translateX(-130%) skewX(-12deg); animation: km-glint 1.2s var(--ease-in-out) 1s 1 both; }

/* ── 13. 설문 ────────────────────────────────────────────────────────── */
/* 위 띠: 닫기 · 줄자(21문항, 라운드 끝마다 긴 눈금) · 소매 단추 4개(라운드) */
.q-bar { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); min-height: calc(52px + var(--safe-t)); padding: var(--safe-t) var(--s-4) 0 var(--s-1); }
.q-bar .icon-btn { color: rgba(239,233,220,.85); }
.tape { position: relative; height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(239,233,220,.18) 0 1px, rgba(0,0,0,0) 1px 6px) 0 100% / 100% 45% no-repeat, rgba(239,233,220,.06); }
.tape-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 2px 0 0 2px; transition: width var(--d-med) var(--ease-out);
  background-color: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgba(20,22,30,.8) 0 1px, rgba(0,0,0,0) 1px 30px), repeating-linear-gradient(90deg, rgba(20,22,30,.45) 0 1px, rgba(0,0,0,0) 1px 6px), linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%, rgba(0,0,0,.12));
  background-size: auto 100%, auto 45%, auto; background-repeat: repeat-x; }
.tape-fill::after { content: ""; position: absolute; right: -3px; top: -3px; bottom: -3px; width: 4px; border-radius: 1px; background: linear-gradient(90deg, #d9d4c7, #8d8778); }   /* 줄자 끝 쇠붙이 */
.tape .end { position: absolute; top: -4px; bottom: -4px; left: var(--at); width: 1.5px; background: rgba(239,233,220,.5); }   /* 라운드 끝 긴 눈금 */
.cuffs { display: flex; align-items: center; gap: 6px; }
.cuff { width: 18px; height: 18px; color: rgba(239,233,220,.4); }
.cuff.is-now { color: var(--gold); filter: drop-shadow(0 0 4px rgba(200,162,90,.55)); }
.cuff.is-done { color: var(--gold); }
.t-paper .task .cuff, .t-paper .cuffs.on-paper .cuff { color: var(--stitch-strong); }

.q-pic { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: calc(100dvh - 52px - 72px - var(--safe-t) - var(--safe-b)); padding: var(--s-6) var(--gutter) var(--s-5); }
.q-water { position: absolute; left: 0; right: 0; top: 40px; z-index: -1; text-align: center; font: 800 220px/1 var(--f-latin); color: rgba(122,92,34,.05); pointer-events: none; }
.t-lining .q-water { color: rgba(255,225,200,.05); }
.q-eyebrow { display: inline-flex; align-items: baseline; gap: 8px; font: 600 var(--fs-caption)/1.3 var(--f-body); color: var(--fg-2); }
.q-eyebrow .latin-i { font-size: 16px; color: var(--accent); }
.q-eyebrow .mono { font-size: 12px; color: var(--fg-muted); }
.q-who { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; margin-top: var(--s-5); padding: 0 12px; border-radius: var(--r-pill); background: var(--chip-bg); font: 600 var(--fs-caption)/1 var(--f-body); color: var(--fg-2); }
.q-who i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.q-item { margin-top: var(--s-3); font: 800 var(--fs-item)/1.14 var(--f-display); letter-spacing: -.015em; color: var(--fg); text-wrap: balance; }
.q-item.is-long { font-size: var(--fs-item-long); line-height: 1.2; }
.q-ask { margin-top: var(--s-3); font: 600 18px/1.4 var(--f-body); color: var(--fg-2); }
.q-answer { width: 100%; margin: auto 0; padding: var(--s-6) 0 var(--s-2); display: grid; justify-items: center; }   /* 질문 아래 남은 공간의 가운데 = 화면 아래쪽 절반 */
.q-note { margin-top: var(--s-6); max-width: 300px; font-size: var(--fs-caption); line-height: 1.55; color: var(--fg-muted); }
.q-note b { color: var(--fg); font-weight: 600; }
/* 아래 띠: 이전 · 안내 (별·보기는 누르면 바로 다음 문항으로) */
.q-dock { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding-top: 6px; padding-bottom: calc(6px + var(--safe-b)); }
.q-dock .prev { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 10px 0 0; font: 600 15px/1 var(--f-body); color: rgba(239,233,220,.88); }
.q-dock .prev svg.i { width: 20px; height: 20px; }
.q-dock .hint { text-align: center; font-size: var(--fs-caption); color: var(--mist); }

/* 별: 금색 한 가지 + 가는 테두리 (게임 보상처럼 보이지 않게). 빈 별 테두리는 3:1 이상 */
.stars { display: flex; justify-content: center; }
.star { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-md); }
.star svg { width: 52px; height: 52px; fill: transparent; stroke: var(--star-off); stroke-width: 1.4; transition: fill var(--d-fast), stroke var(--d-fast), transform var(--d-tap) var(--ease-out); }
.star.is-on svg { fill: var(--star-on); stroke: var(--star-line); stroke-width: 1.2; }
.star.is-picked svg { animation: km-pop 260ms var(--ease-out) 1; }
.star-anchors { display: flex; justify-content: space-between; width: 320px; max-width: 100%; margin-top: 6px; padding: 0 6px; font-size: var(--fs-caption); color: var(--fg-muted); }
.star-say { min-height: 28px; margin-top: var(--s-3); font: 600 17px/1.5 var(--f-body); color: var(--fg); }
.star-say .n { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; font: 500 15px/1 var(--f-mono); color: var(--accent); vertical-align: 1px; }
.star-say .n svg { width: 15px; height: 15px; fill: var(--star-on); stroke: var(--star-line); stroke-width: 1.2; }

/* 보기 카드 (Round 2 · 보너스): 두 줄 격자, 고르면 잉크색 + 금색 체크 */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.choices.is-list { grid-template-columns: 1fr; gap: 8px; }
.choice {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 64px; padding: 10px 12px 10px 14px; border-radius: 14px;
  border: 1px solid var(--opt-line); background: var(--opt-bg); color: var(--fg);
  font: 600 16px/1.3 var(--f-body); text-align: left;
  transition: background-color var(--d-fast), color var(--d-fast), border-color var(--d-fast), transform var(--d-tap) var(--ease-out);
}
.choice:active { transform: scale(.98); }
.choice small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-caption); color: var(--fg-muted); }
.choice .tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--opt-line); color: transparent; }
.choice .tick svg { width: 15px; height: 15px; }
.choice[aria-checked="true"], .choice.is-on { background: var(--opt-on-bg); border-color: var(--opt-on-bg); color: var(--opt-on-fg); }
.choice[aria-checked="true"] small, .choice.is-on small { color: inherit; opacity: .78; }
.choice[aria-checked="true"] .tick, .choice.is-on .tick { border-color: var(--opt-on-mark); background: var(--opt-on-mark); color: var(--opt-on-bg); }
.choice .who { font: 800 22px/1.1 var(--f-display); }   /* 킹스맨 캐스팅 이름 */

/* 밸런스 타일 (Round 3) */
.balance { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; width: 100%; }
.bal-tile {
  display: grid; place-items: center; min-height: 156px; padding: 16px 10px; border-radius: 18px;
  border: 1px solid var(--opt-line); background: var(--opt-bg); color: var(--fg);
  font: 800 22px/1.3 var(--f-display); text-align: center; text-wrap: balance;
  transition: background-color var(--d-fast), color var(--d-fast), transform var(--d-tap) var(--ease-out);
}
.bal-tile:active { transform: scale(.98); }
.bal-tile[aria-checked="true"], .bal-tile.is-on { background: var(--opt-on-bg); border-color: var(--opt-on-bg); color: var(--opt-on-fg); box-shadow: 0 0 0 3px rgba(200,162,90,.45); }
.bal-vs { align-self: center; font: italic 500 22px/1 var(--f-latin); color: var(--accent); }

/* 한 줄 + 동의 + 밀랍 인장 그림 단추 (글은 "답 보내기") */
.line-box { display: grid; gap: var(--s-2); width: 100%; text-align: left; }
.seal-btn { display: grid; justify-items: center; gap: 8px; min-width: 132px; padding: 8px 12px 6px; border-radius: var(--r-lg); color: var(--fg); }
.seal-btn svg { width: 96px; height: 96px; filter: drop-shadow(0 8px 12px rgba(40,6,14,.35)); transition: transform var(--d-tap) var(--ease-out); }
.seal-btn:active svg { transform: scale(.94); }
.seal-btn b { font: 600 17px/1.2 var(--f-body); }
.seal-btn small { font-size: var(--fs-caption); color: var(--fg-muted); }
.seal-btn.is-sent svg { animation: km-stamp-seal 520ms var(--ease-stamp) 1 both; }

/* 라운드 시작 카드 */
.round-intro { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.round-intro .latin-i { font-size: 30px; color: var(--accent); }
.round-intro .meta { font: 500 12px/1 var(--f-mono); color: var(--fg-muted); letter-spacing: .04em; }

/* ── 14. 결과 ──────────────────────────────────────────────────────────
   휴대폰은 앞 화면이 이미 보여 준 장만 보여 줍니다 (서버가 공개 장 수까지만 보냄). */
.slide-card { position: relative; border-radius: var(--r-lg); padding: 16px; background: radial-gradient(80% 60% at 50% 0%, rgba(239,233,220,.06), rgba(239,233,220,0) 70%), linear-gradient(170deg, #17233b, #0f182b); box-shadow: inset 0 0 0 1px rgba(200,162,90,.35), var(--e-1); }
.slide-card.is-new { box-shadow: inset 0 0 0 1.5px rgba(200,162,90,.75), 0 0 0 4px rgba(200,162,90,.08), var(--e-2); }
.slide-card .sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.slide-card .sc-k { font: 600 var(--fs-caption)/1.3 var(--f-body); color: var(--gold-lt); }
.slide-card .sc-t { margin-top: 2px; font: 800 22px/1.3 var(--f-display); color: var(--ivory); text-wrap: balance; }
.slide-card.is-past { padding: 12px 16px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.rank { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: var(--r-pill); font: 600 12px/1 var(--f-body); color: var(--cloth); background: var(--foil-btn); white-space: nowrap; }

/* 차이 숫자: Bodoni 광학 11 · 800 (가는 선 없음). 휴대폰은 밝은 금박, 프로젝터는 한 가지 색 */
.gapnum { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-top: var(--s-3); }
.gapnum .n { font: 800 var(--fs-num-gap)/1 var(--f-latin); font-feature-settings: "lnum" 1; letter-spacing: -.01em; padding: 0 .04em; }
.gapnum .u { font: 600 15px/1 var(--f-body); color: var(--fog); }

/* 차이 축: 별 1~5 축 위에 아내(장미) · 남편(금) 핀, 둘 사이 띠.
   --gx 하나로 크기를 바꿉니다 (휴대폰 1px, 프로젝터는 17장). 값은 style="--h:3.6; --w:2.2", 내 별은 --me.
   남편 이름표는 축 위, 아내 이름표는 축 아래 (값이 가까워도 겹치지 않음).
   아내가 더 높으면 .is-flip, 0.15 미만 차이는 .is-near (띠 최소 폭). */
.gapx { --gx: 1px; position: relative; height: calc(var(--gx) * 196); margin: 0 calc(var(--gx) * 22); }
.gapx .rail { position: absolute; left: 0; right: 0; top: calc(var(--gx) * 90); height: 0; }
.gapx .rail::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--gx) * -2); height: calc(var(--gx) * 4); border-radius: 2px; background: var(--axis, rgba(239,233,220,.42)); }
.gapx .tick { position: absolute; top: calc(var(--gx) * -6); width: calc(var(--gx) * 1.5); margin-left: calc(var(--gx) * -.75); height: calc(var(--gx) * 12); background: var(--axis, rgba(239,233,220,.55)); }
.gapx .tick-l { position: absolute; top: calc(var(--gx) * 16); transform: translateX(-50%); font: 500 calc(var(--gx) * 12)/1 var(--f-mono); color: var(--axis-fg, var(--mist)); white-space: nowrap; }   /* 프로젝터: 눈금마다 ★1~★5 */
.gapx .end { position: absolute; top: 0; transform: translateY(-50%); font: 500 calc(var(--gx) * 12)/1 var(--f-mono); color: var(--axis-fg, var(--mist)); }   /* 휴대폰: 양 끝에 1 · 5 (축 아래는 아내 이름표와 '나' 자리) */
.gapx .end.l { right: calc(100% + var(--gx) * 8); }
.gapx .end.r { left: calc(100% + var(--gx) * 8); }
.gapx .band { position: absolute; top: calc(var(--gx) * -5); height: calc(var(--gx) * 10); border-radius: calc(var(--gx) * 5);
  left: calc((min(var(--w), var(--h)) - 1) / 4 * 100%); width: calc((max(var(--w), var(--h)) - min(var(--w), var(--h))) / 4 * 100%);
  background: linear-gradient(90deg, var(--data-w), var(--data-h)); transform-origin: left center; }
.gapx.is-flip .band { background: linear-gradient(90deg, var(--data-h), var(--data-w)); }
.gapx.is-near .band { left: calc(((var(--w) + var(--h)) / 2 - 1) / 4 * 100% - var(--gx) * 7); width: calc(var(--gx) * 14); }
.gapx .mk { position: absolute; top: 0; left: calc((var(--v) - 1) / 4 * 100%); }
.gapx .mk::before { content: ""; position: absolute; left: calc(var(--gx) * -10); top: calc(var(--gx) * -10); width: calc(var(--gx) * 20); height: calc(var(--gx) * 20); border-radius: 50%; box-shadow: 0 0 0 calc(var(--gx) * 3) var(--ring, #121c31); }
.gapx .mk.h::before { background: var(--data-h); }
.gapx .mk.w::before { background: var(--data-w); }
.gapx .lab { position: absolute; left: 0; transform: translateX(-50%); display: grid; justify-items: center; white-space: nowrap; }
.gapx .mk.h .lab { bottom: calc(var(--gx) * 16); }
.gapx .mk.w .lab { top: calc(var(--gx) * 38); }
.gapx .lab .v { font: 600 calc(var(--gx) * 26)/1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--fg, var(--ivory)); }
.gapx .lab .k { font: 600 calc(var(--gx) * 13)/1.2 var(--f-body); }
.gapx .mk.h .lab .k { color: var(--data-h-fg); margin-bottom: calc(var(--gx) * 4); }
.gapx .mk.w .lab .k { color: var(--data-w-fg); margin-top: calc(var(--gx) * 4); }
/* 내 별 (이 폰에만): 축 아래 작은 표시 */
.gapx .me { position: absolute; top: calc(var(--gx) * 10); left: calc((var(--me) - 1) / 4 * 100%); transform: translateX(-50%); display: grid; justify-items: center; }
.gapx .me::before { content: ""; width: 0; height: 0; border: calc(var(--gx) * 5) solid transparent; border-bottom: calc(var(--gx) * 7) solid var(--ivory); border-top: 0; }
.gapx .me span { margin-top: 2px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--ivory); color: var(--cloth); font: 600 12px/1 var(--f-body); white-space: nowrap; }
.gapx.anim .band { animation: km-band var(--d-slow) var(--ease-out) .55s 1 both; }
.gapx.anim .mk.h { animation: km-pin 360ms var(--ease-stamp) .1s 1 both; }
.gapx.anim .mk.w { animation: km-pin 360ms var(--ease-stamp) .3s 1 both; }
.say { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid rgba(239,233,220,.08); text-align: center; font: 600 15px/1.45 var(--f-body); color: var(--ivory); }
.say b { color: var(--gold-lt); font-weight: 600; }

/* 순위 줄 (2위·3위) */
.gap-rows { display: grid; margin-top: var(--s-3); }
.gap-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 84px 40px; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid rgba(239,233,220,.08); }
.gap-row .rk { font: 600 12px/1 var(--f-body); color: var(--mist); }
.gap-row .nm { font: 600 15px/1.35 var(--f-body); color: var(--ivory); }
.gap-row .d { text-align: right; font: 800 18px/1 var(--f-latin); color: var(--gold-lt); }
.gap-row .d.is-neg { color: var(--rose); }
.mini { position: relative; height: 14px; }
.mini::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(239,233,220,.22); }
.mini .bd { position: absolute; top: 5px; height: 4px; border-radius: 2px; left: calc((min(var(--w), var(--h)) - 1) / 4 * 100%); width: calc((max(var(--w), var(--h)) - min(var(--w), var(--h))) / 4 * 100%); background: linear-gradient(90deg, var(--data-w), var(--data-h)); }
.mini.is-flip .bd { background: linear-gradient(90deg, var(--data-h), var(--data-w)); }
.mini .d-h, .mini .d-w { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--cloth-2); }
.mini .d-h { left: calc((var(--h) - 1) / 4 * 100%); background: var(--data-h); }
.mini .d-w { left: calc((var(--w) - 1) / 4 * 100%); background: var(--data-w); }

/* 8개 항목 한눈에 (Round 1 이 앞 화면에서 끝난 뒤에만) */
.recap { display: grid; }
.recap .rc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--s-3); font-size: var(--fs-caption); color: var(--mist); }
.recap .rc-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; vertical-align: 0; }
.recap .gap-row { grid-template-columns: minmax(0, 1fr) 96px 44px; }

/* 고른 비율 막대 (Round 2 아내 마음 맞히기 · 밸런스 · 보너스) */
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; gap: 5px; }
.bar-row .bl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 600 15px/1.35 var(--f-body); color: var(--ivory); }
.bar-row .bl .mine { font: 600 12px/1 var(--f-body); padding: 3px 7px; border-radius: var(--r-pill); background: var(--ivory); color: var(--cloth); }
.bar-row .track { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font: 500 12px/1 var(--f-mono); color: var(--mist); }
.bar-row .track .fill { height: 10px; border-radius: 5px; background: rgba(239,233,220,.1); position: relative; overflow: hidden; }
.bar-row .track .fill i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct); border-radius: 5px; transform-origin: left; }
.bar-row .track.h .fill i { background: var(--data-h); }
.bar-row .track.w .fill i { background: var(--data-w); }
.bar-row .track .pc { text-align: right; color: var(--fog); }
.bar-row.is-top .bl > span:first-child { color: var(--gold-lt); }
.bars.anim .fill i { animation: km-band var(--d-slow) var(--ease-out) 1 both; }
/* 밸런스: 한 줄 막대를 두 색으로 나눔 */
.split { display: grid; gap: 4px; }
.split .sb { display: flex; height: 26px; border-radius: 6px; overflow: hidden; font: 600 12px/26px var(--f-body); }
.split .sb .a { width: var(--a); background: var(--gold); color: var(--cloth); padding-left: 8px; white-space: nowrap; }
.split .sb .b { flex: 1; background: rgba(239,233,220,.16); color: var(--fog); text-align: right; padding-right: 8px; white-space: nowrap; }
.split .sb.w .a { background: var(--rose); }
.split .sl { display: flex; justify-content: space-between; font-size: var(--fs-caption); color: var(--fog); }

/* 나만 보는 요약 */
.private { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(239,233,220,.05); box-shadow: inset 0 0 0 1px var(--line); }
.private svg.i { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; }
.private b { display: block; font: 600 var(--fs-small)/1.45 var(--f-body); color: var(--ivory); }
.private p { font-size: var(--fs-caption); line-height: 1.5; color: var(--mist); }

/* ── 15. 상태: 비어 있음 · 불러오는 중 · 오류 · 잠김 ─────────────────────── */
.empty { display: grid; justify-items: center; gap: 10px; padding: 30px 22px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); text-align: center; }
.empty svg.i { width: 40px; height: 40px; color: var(--accent); }
.empty b { font: 600 16px/1.4 var(--f-body); color: var(--fg); }
.empty p { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); }
/* 불러오는 중: 마지막 화면을 먼저 그리고, 한 번도 못 받은 부분만 정지된 회색 블록 (반짝임 없음) */
.sk { display: block; border-radius: var(--r-sm); background: rgba(239,233,220,.08); }
.t-paper .sk { background: rgba(20,32,58,.07); }
.sk.l { height: 14px; } .sk.m { height: 20px; } .sk.b { height: 120px; border-radius: var(--r-lg); }
.loading-note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--fg-muted); }
.err { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--danger-fg); }
.err p { display: flex; gap: 8px; font: 600 var(--fs-small)/1.5 var(--f-body); color: var(--danger-fg); }
.err p svg.i { width: 20px; height: 20px; flex: none; }
.locked { display: grid; justify-items: center; gap: 10px; padding: 28px 22px; border-radius: var(--r-lg); background: rgba(4,6,11,.25); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.t-paper .locked { background: var(--bg-2); box-shadow: var(--e-paper); }
.locked .lk { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--accent); }
.locked .lk svg.i { width: 24px; height: 24px; }
.locked b { font: 800 22px/1.3 var(--f-display); color: var(--fg); }
.locked p { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); max-width: 30ch; }

/* ── 16. 운영진 (아이보리, 촘촘하게, 아래 레터박스 없음) ─────────────────── */
.staff-bar { display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--bar-top) + var(--safe-t)); padding: var(--safe-t) var(--s-3) 0 var(--s-4); }
.staff-bar .who { font: 600 14px/1.25 var(--f-body); color: var(--ivory); }
.staff-bar .who small { display: block; font-weight: 400; font-size: 13px; color: var(--mist); }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.counts div { padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-2); box-shadow: var(--card-shadow); }
.counts b { display: block; font: 800 26px/1.1 var(--f-latin); color: var(--fg); font-feature-settings: "lnum" 1; }
.counts span { font-size: var(--fs-caption); color: var(--fg-muted); }
.search { position: relative; }
.search svg.i { position: absolute; left: 14px; top: 50%; margin-top: -11px; width: 22px; height: 22px; color: var(--fg-muted); pointer-events: none; }
.search .input { padding-left: 46px; min-height: 56px; font-size: 18px; }
.list { display: grid; border-radius: var(--r-md); background: var(--bg-2); box-shadow: var(--card-shadow); overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 62px; padding: 8px 14px; border-top: 1px solid var(--line); text-align: left; width: 100%; color: var(--fg); }
.row:first-child { border-top: 0; }
.row .nm { display: block; font: 600 17px/1.3 var(--f-body); }
.row .meta { display: block; font-size: var(--fs-caption); color: var(--fg-muted); }
.row .meta .mono { font-size: 12px; color: var(--fg-2); }
.row .st { font: 600 var(--fs-caption)/1 var(--f-body); color: var(--fg-muted); }
.row .st.is-in { color: var(--gold-ink); }
.row mark { background: rgba(200,162,90,.3); color: inherit; border-radius: 3px; padding: 0 1px; }
/* 입구 결과 (D-02): 크게, 색과 글로 같이 알림 */
.door-result { display: grid; justify-items: center; gap: 10px; padding: 28px 20px; border-radius: var(--r-xl); text-align: center; color: var(--ivory); background: var(--cloth); box-shadow: var(--e-2); }
.door-result .badge { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border-radius: var(--r-pill); font: 600 16px/1 var(--f-body); background: var(--foil-btn); color: var(--cloth); }
.door-result .nm { font: 800 40px/1.15 var(--f-display); }
.door-result .no { font: 800 30px/1 var(--f-latin); color: var(--gold-lt); }
.door-result .grp { font: 600 18px/1.4 var(--f-body); }
.door-result .lead { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-md); background: rgba(200,162,90,.14); font: 600 15px/1.3 var(--f-body); color: var(--gold-lt); }
.door-result .lead svg { width: 40px; height: 17px; }
.door-result.is-already { box-shadow: inset 0 0 0 3px var(--amber), var(--e-2); }
.door-result.is-already .badge { background: var(--amber); }
.door-result.is-unknown { box-shadow: inset 0 0 0 3px var(--danger), var(--e-2); }
.door-result.is-unknown .badge { background: var(--danger); color: var(--film); }
.undo-bar { position: relative; width: 100%; height: 3px; border-radius: 2px; background: rgba(239,233,220,.15); overflow: hidden; }
.undo-bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; animation: km-countdown var(--timer, 10s) linear 1 both; }
/* 단계 바꾸기 (A-06) */
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.stage { display: grid; gap: 2px; align-content: center; min-height: 64px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--bg-3); text-align: center; font: 600 15px/1.25 var(--f-body); color: var(--fg); }
.stage small { font: 400 13px/1.3 var(--f-body); color: var(--fg-muted); }
.stage[aria-current="step"] { background: var(--cloth); border-color: var(--cloth); color: var(--ivory); }
.stage[aria-current="step"] small { color: var(--gold-lt); }
.stage.is-done { color: var(--fg-muted); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: var(--fs-small); }
.kv dt { color: var(--fg-muted); }
.kv dd { font-weight: 600; color: var(--fg); }
.set { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 60px; padding: 8px 14px; border-top: 1px solid var(--line); }
.set:first-child { border-top: 0; }
.set b { display: block; font: 600 16px/1.3 var(--f-body); }
.set small { display: block; font-size: var(--fs-caption); color: var(--fg-muted); }
.now-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border-top: 1px solid var(--line); }
.now-item .tm { font: 500 13px/1 var(--f-mono); color: var(--fg-muted); }
.now-item b { font: 600 16px/1.3 var(--f-body); }
.now-item small { display: block; font-size: var(--fs-caption); color: var(--fg-muted); }
.now-item.is-now { background: rgba(200,162,90,.14); box-shadow: inset 3px 0 0 var(--gold); }
.btn-sm { min-height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; }

/* ── 17. 프로젝터 (S7) ──────────────────────────────────────────────────
   --u = min(1vw, 1.78vh): 16:9 · 4:3 · 넓은 화면 어디서나 같은 비율. 1920×1080 에서 19.2px.
   위아래 띠는 화면 높이의 6%. 금색 글자는 24px(1.3u) 이상. 핵심 숫자는 한 가지 밝은 색, 금박 그라데이션 없음. */
.deck { --u: min(1vw, 1.7778vh); position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--fg); background: var(--film); }
.deck-bar { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); height: 6vh; min-height: 40px; padding: 0 calc(var(--u) * 3.2); background: url("../assets/grain-dark.png") 0 0 / 96px 96px, var(--film); color: var(--ivory); }
.deck-bar.is-top::after, .deck-bar.is-bottom::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--hairline-gold); opacity: .4; }
.deck-bar.is-top::after { bottom: 0; }
.deck-bar.is-bottom::before { top: 0; }
.deck-wm { display: flex; align-items: baseline; gap: calc(var(--u) * .7); }
.deck-wm .wm-svg { color: var(--gold); }
.deck-wm .s { font: 600 calc(var(--u) * 1.3)/1 var(--f-body); color: rgba(239,233,220,.88); }
.deck-round { font: 600 calc(var(--u) * 1.3)/1 var(--f-body); color: rgba(239,233,220,.88); }
.deck-round .latin-i { font-size: calc(var(--u) * 1.6); color: var(--gold); margin-right: calc(var(--u) * .6); }
.deck-meta { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font: 600 calc(var(--u) * 1.3)/1 var(--f-body); color: rgba(239,233,220,.88); }
.deck .live { height: calc(var(--u) * 2.2); padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * .9); font-size: calc(var(--u) * 1); gap: calc(var(--u) * .6); }
.deck .live i { width: calc(var(--u) * .7); height: calc(var(--u) * .7); }
.deck-pic { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(var(--u) * 1.5) calc(var(--u) * 4); background: var(--tex); color: var(--fg); }
.deck-eye { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); font: 600 calc(var(--u) * 1.9)/1.2 var(--f-body); color: var(--accent); }
.deck-eye .vs { font-size: 1.15em; }
.deck-eye .rank { height: calc(var(--u) * 2.4); padding: 0 calc(var(--u) * 1); font-size: calc(var(--u) * 1.35); }
.deck-item { margin-top: calc(var(--u) * 1.4); max-width: 82vw; font: 800 calc(var(--u) * 5.4)/1.1 var(--f-display); letter-spacing: -.01em; text-wrap: balance; color: var(--fg); }
.deck-item.is-long { font-size: calc(var(--u) * 4.4); }
.deck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; width: calc(var(--u) * 76); max-width: 92vw; margin-top: calc(var(--u) * 2); }
.deck-side { display: grid; justify-items: center; gap: calc(var(--u) * .8); padding-bottom: calc(var(--u) * 2.4); }
.deck-side .k { font: 600 calc(var(--u) * 2)/1 var(--f-body); }
.deck-side .v { font: 600 calc(var(--u) * 6.8)/.92 var(--f-body); font-variant-numeric: tabular-nums; color: var(--fg); }
.deck-side.h .k { color: var(--data-h-fg); }
.deck-side.w .k { color: var(--data-w-fg); }
.deck-gap { display: grid; justify-items: center; padding: 0 calc(var(--u) * 3); }
.deck-gap .n { font: 800 calc(var(--u) * 12)/.86 var(--f-latin); font-feature-settings: "lnum" 1; letter-spacing: -.01em; color: var(--gap-fg); }
.deck-gap .u { margin-top: calc(var(--u) * 1); font: 600 calc(var(--u) * 2)/1 var(--f-body); color: var(--fg-2); }
.deck .gapx { --gx: calc(var(--u) * .115); width: calc(var(--u) * 76); max-width: 92vw; height: calc(var(--gx) * 64); margin: calc(var(--u) * 1.4) 0 0; }
.deck .gapx .rail { top: calc(var(--gx) * 22); }
.deck .gapx .tick-l { top: calc(var(--gx) * 20); font: 600 calc(var(--u) * 2)/1 var(--f-body); color: var(--axis-fg); }   /* 1080 에서 38px, 꽉 찬 색 */
.deck .gapx .mk::before { box-shadow: 0 0 0 calc(var(--gx) * 4) var(--ring); }
.deck-say { margin-top: calc(var(--u) * 2.4); font: 600 calc(var(--u) * 2.5)/1.3 var(--f-body); color: var(--fg); }
.deck-say b { color: var(--accent); font-weight: 600; }
.deck-steps { display: flex; align-items: center; gap: calc(var(--u) * .5); font: 600 calc(var(--u) * 1.3)/1 var(--f-body); color: rgba(239,233,220,.55); }
.deck-steps span { padding: calc(var(--u) * .45) calc(var(--u) * .8); border-radius: var(--r-pill); }
.deck-steps .is-done { color: rgba(239,233,220,.75); }
.deck-steps .is-now { background: var(--gold); color: var(--cloth); }
.deck-nav { display: flex; align-items: center; gap: calc(var(--u) * .5); }
.deck-nav i { width: calc(var(--u) * 1.6); height: 3px; border-radius: 2px; background: rgba(239,233,220,.22); }
.deck-nav i.is-done { background: rgba(200,162,90,.6); }
.deck-nav i.is-now { width: calc(var(--u) * 3.4); background: var(--gold); }
.deck-pg { margin-left: calc(var(--u) * 1); font: 500 calc(var(--u) * 1.3)/1 var(--f-mono); color: rgba(239,233,220,.85); }
.deck-hint { font: 500 calc(var(--u) * 1)/1 var(--f-body); color: rgba(239,233,220,.6); }
.deck-hint kbd { font: 500 calc(var(--u) * .9)/1 var(--f-mono); padding: calc(var(--u) * .25) calc(var(--u) * .45); border-radius: 4px; border: 1px solid rgba(239,233,220,.3); margin: 0 calc(var(--u) * .2); }
:fullscreen .deck-hint, html.is-fs .deck-hint { display: none; }          /* 전체 화면에서는 키 안내를 숨김 */
.deck-phone { display: flex; align-items: center; gap: calc(var(--u) * .6); font: 600 calc(var(--u) * 1.3)/1 var(--f-body); color: rgba(239,233,220,.85); }
.deck-phone svg { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); color: var(--gold); }
.deck-row.is-flip .deck-side.w { order: 3; }
.deck-row.is-flip .deck-side.h { order: 1; }
.deck-row.is-flip .deck-gap { order: 2; }
.deck.t-bright .deck-pic { color: var(--fg); }
.deck .watermark { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 2); font: 600 calc(var(--u) * 1.3)/1 var(--f-body); color: var(--accent); border: 1px dashed currentColor; padding: calc(var(--u) * .5) calc(var(--u) * .9); border-radius: var(--r-pill); }

/* ── 18. 움직임 ─────────────────────────────────────────────────────────
   장면 전환: 띠는 그대로 두고 그림(내용)만 바뀝니다 (영화의 컷). 들어오는 내용은 14px 올라오며 나타나고 60ms 씩 차례로.
   한 번만: 첫 화면 커튼 · 제목 · 금박 빛 · 필름 리더 · 입장권 빛 · 도장. 반복: LIVE 불빛 하나. */
@keyframes km-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes km-fade { from { opacity: 0; } }
@keyframes km-curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes km-foil { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes km-wm-sheen { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(660px) skewX(-18deg); } }
@keyframes km-glint { from { transform: translateX(-130%) skewX(-14deg); } to { transform: translateX(320%) skewX(-14deg); } }
@keyframes km-turn { to { transform: rotate(360deg); } }
@keyframes km-ticket-in { from { opacity: 0; transform: translateY(40px) rotate(-1.2deg); } 70% { opacity: 1; transform: translateY(-4px) rotate(.2deg); } }
@keyframes km-stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.6); } 60% { opacity: 1; transform: rotate(-12deg) scale(.94); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes km-stamp-seal { from { transform: scale(1.25) rotate(-8deg); opacity: .6; } 60% { transform: scale(.95) rotate(0); opacity: 1; } }
@keyframes km-band { from { transform: scaleX(0); } }
@keyframes km-pin { from { opacity: 0; transform: scale(.4); } }
@keyframes km-pop { 50% { transform: scale(1.12); } }
@keyframes km-slide-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes km-slide-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes km-live { 50% { opacity: .3; } }
@keyframes km-caret { 50% { opacity: 0; } }
@keyframes km-dots { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes km-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes km-sheet-up { from { transform: translateY(100%); } }

.a-rise { animation: km-rise var(--d-slow) var(--ease-out) var(--delay, 0s) 1 both; }
.a-fade { animation: km-fade var(--d-slow) var(--ease-out) var(--delay, 0s) 1 both; }
.scene-in > * { animation: km-rise var(--d-med) var(--ease-out) 1 both; }
.scene-in > *:nth-child(2) { animation-delay: 60ms; }
.scene-in > *:nth-child(3) { animation-delay: 120ms; }
.scene-in > *:nth-child(4) { animation-delay: 180ms; }
.scene-in > *:nth-child(n+5) { animation-delay: 240ms; }
.q-in { animation: km-slide-in var(--d-med) var(--ease-out) 1 both; }
.q-out { animation: km-slide-out var(--d-fast) var(--ease-in-out) 1 both; }
.stamp.in { animation: km-stamp 550ms var(--ease-stamp) var(--delay, .3s) 1 both; }
.sheet.in { animation: km-sheet-up var(--d-med) var(--ease-out) 1 both; }
/* 글꼴이 오기 전에는 제목 움직임을 시작하지 않음: html.fonts-ready 가 붙으면 시작 (최대 1.2초 기다림) */
html:not(.fonts-ready) .wait-fonts { opacity: 0; animation-play-state: paused; }

/* 움직임 줄이기: 모든 움직임을 120ms 페이드로 바꾸고, 반복을 멈춥니다 */
@media (prefers-reduced-motion: reduce) {
  @keyframes km-rise { from { opacity: 0; } }
  @keyframes km-curtain { from { opacity: 1; } to { opacity: 0; } }
  @keyframes km-foil { from { opacity: 1; } to { opacity: 1; } }
  @keyframes km-glint { from { opacity: 0; } to { opacity: 0; } }
  @keyframes km-wm-sheen { from { opacity: 0; } to { opacity: 0; } }
  @keyframes km-turn { from { opacity: 1; } to { opacity: 1; } }
  @keyframes km-ticket-in { from { opacity: 0; } }
  @keyframes km-stamp { from { opacity: 0; transform: rotate(-12deg); } to { opacity: 1; transform: rotate(-12deg); } }
  @keyframes km-stamp-seal { from { opacity: .6; } }
  @keyframes km-band { from { opacity: 0; } }
  @keyframes km-pin { from { opacity: 0; } }
  @keyframes km-pop { from { opacity: .7; } }
  @keyframes km-slide-in { from { opacity: 0; } }
  @keyframes km-slide-out { to { opacity: 0; } }
  @keyframes km-sheet-up { from { opacity: 0; } }
  @keyframes km-live { from { opacity: 1; } to { opacity: 1; } }
  @keyframes km-caret { from { opacity: 1; } to { opacity: 1; } }
  @keyframes km-dots { from { opacity: 1; } to { opacity: 1; } }
  @keyframes km-countdown { from { opacity: 1; } to { opacity: 1; } }   /* 남은 시간은 글자로 알립니다 ("되돌리기 · 15초") */
  *, *::before, *::after { animation-duration: 120ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
  html:not(.fonts-ready) .wait-fonts { opacity: 1; }
}

/* ── 19. 빌드 덧붙임 (CORE) ─────────────────────────────────────────────
   디자인 시스템 파일은 그대로 두고, 빌드에 꼭 필요한 몇 줄만 여기 덧붙입니다.
   보안 설정(CSP) 때문에 HTML 의 style="…" 을 쓸 수 없어서, 아이콘 묶음 숨기기와 첫 안내 글은 클래스로 줍니다. */
#km-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.km-boot { max-width: var(--max-w); margin: 0 auto; padding: 72px var(--gutter); text-align: center; color: var(--ivory); background: var(--cloth); min-height: 100vh; font: 400 var(--fs-body)/1.6 var(--f-body); }
.km-boot p { margin: 0 auto; max-width: 30ch; }
.km-boot .btn { margin-top: var(--s-6); }
html { background: var(--film); }
.km-stub { display: grid; gap: var(--s-3); }
.km-stub code { font: 500 var(--fs-caption)/1.5 var(--f-mono); color: var(--fg-muted); word-break: break-all; }