/* ============================================================================
   입구 태블릿(C) — 시안 proto/kiosk.html <style> A(입구 화면 배치)를 옮긴 것. 값은 tokens.css var() 만(새 색 0 · 새 글자 크기 0).
   시안 B(리뷰 페이지·기기 틀·조작 줄)는 옮기지 않았다. 시안의 인라인 style(선 그림 색·퇴장 문장 여백)은 아래 클래스로 옮겼다(CSP style-src 'self').
   틀: 화면 전체를 쓰는 .kiosk 하나가 컨테이너 쿼리(k)로 가로 · 세로 · 폰(≤520)을 바꾼다.
   ========================================================================== */

html.kiosk-page, html.kiosk-page body { height: 100%; overflow: hidden; }
body.kiosk-body { margin: 0; background: var(--surface); }

/* ── A-1. 입구 화면 틀 ── */
.kiosk {
  position: fixed; inset: 0; container: k / size; display: flex; flex-direction: column; overflow: hidden;
  color: var(--ink); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.kiosk .offline-band { flex: none; }
.k-top { flex: none; display: flex; align-items: center; justify-content: flex-end; height: var(--head); padding: 0 var(--s-8); }
.k-clock { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 0 var(--s-8); overflow-y: auto; scrollbar-width: none; }
.k-main::-webkit-scrollbar { display: none; }
.k-main > * { margin-top: auto; margin-bottom: auto; }
.k-foot { flex: none; display: flex; justify-content: center; padding: var(--s-2) 0 var(--s-4); }
.k-sub { font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; color: var(--muted); }
.k-sub.is-tight { margin-top: calc(var(--s-5) * -1); }
.kiosk h1, .kiosk h2 { text-align: center; }
.k-boot { display: grid; place-items: center; }

/* 입구 화면 버튼 — 손가락 키 최소 64(BRIEF 6-10 접근성) */
.kiosk .btn-ghost.is-lg { height: var(--cta-lg); padding: 0 var(--s-8); font-size: var(--fs-20); line-height: var(--lh-20); }
.kiosk .entry-actions .btn { min-width: 200px; }

/* ── A-2. 대기 카드(번호만 — QR 은 E단계) ── */
.k-panel { width: 100%; padding: var(--s-8) var(--s-10); }
.k-panel .qr-title { margin-top: 0; }
.k-hint { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.k-hint mark { padding: 0 var(--s-1); border-radius: var(--r-badge); background: var(--sky-1); color: var(--ink); }
.k-panel .digits { margin-top: var(--s-4); }
.k-panel .keypad { margin-top: var(--s-4); }
.k-lock { display: flex; align-items: center; justify-content: center; height: var(--key-h); margin-top: var(--s-4); }
.k-lock .num { margin-right: var(--s-1); }

/* 번호만: 가로 = 왼쪽 안내·누른 숫자 / 오른쪽 키패드(다른 센터 사진의 배치) */
.k-panel.is-pad { max-width: 880px; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "info keys" "vol keys"; column-gap: var(--s-12); align-items: start; }
.is-pad > .k-info { grid-area: info; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.is-pad > .k-info .qr-title { text-align: left; margin-top: var(--s-2); }
.is-pad > .k-info .digits, .is-pad > .k-info .k-lock { justify-content: flex-start; }
.is-pad > .keypad { grid-area: keys; margin-top: 0; }
.is-pad > .k-vol { grid-area: vol; align-self: end; }
.k-back { padding-top: var(--s-6); }

/* 음량 — 30 아래 불가, 30에 닿으면 한 줄 */
.k-vol { width: 100%; margin-top: var(--s-5); }
.k-vol-hint { display: none; margin-top: var(--s-1); text-align: center; }
.k-vol.is-min .k-vol-hint { display: block; }

/* ── A-3. 번호를 누른 뒤 · 결과 ── */
.k-stack { width: 100%; max-width: 880px; display: flex; flex-direction: column; align-items: center; gap: var(--s-8); text-align: center; }
.k-cands { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); }
.k-cand {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-width: 240px; padding: var(--s-6) var(--s-8);
  border-radius: var(--r-face); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--e-face);
  transition: transform var(--t-micro) var(--ease-micro), background-color var(--t-micro) var(--ease-micro);
}
.k-cand:hover { background: var(--paper); }
.k-cand:active { background: var(--sky-1); transform: scale(var(--press-pill)); }
.k-result { width: 100%; max-width: 880px; }
.k-result .k-sub { margin-top: calc(var(--s-3) * -1); }
.kiosk .entry-mini { max-width: 480px; padding: var(--s-6) var(--s-8); }
.kiosk .entry-mini .pass-title { font-size: var(--fs-18); line-height: var(--lh-18); }
.k-timer { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.k-art { width: 132px; height: 108px; flex: none; }
.k-drop { width: 28px; height: 39px; color: var(--drop); }

/* 선 그림 색(시안 인라인 style → 클래스) */
.ka-line { fill: none; stroke: var(--line-input); stroke-width: 1.5; }
.ka-body { fill: var(--surface); stroke: var(--faint); stroke-width: 1.5; }
.ka-faint { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-linecap: round; }
.ka-card { fill: var(--surface); stroke: var(--line-input); stroke-width: 1.5; }
.ka-text { fill: none; stroke: var(--line-input); stroke-width: 1.5; stroke-linecap: round; }
.ka-drop { fill: var(--drop); }
.ka-dot { fill: var(--drop); }
.ka-drop-soft { fill: var(--sky-1); stroke: var(--drop); stroke-width: 1.5; }
.ka-drop-soft.is-thick { stroke-width: 3; }
.ka-shine { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; }

/* ── A-4. 관리자 연결(처음 한 번) ── */
.k-pair { width: 100%; max-width: 600px; padding: var(--s-10) var(--s-10) var(--s-8); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.k-pair .k-art { margin-bottom: calc(var(--s-2) * -1); }
.k-code { font-size: var(--fs-64); line-height: var(--lh-64); letter-spacing: .04em; }
.k-code.is-dim { color: var(--faint); }
.k-pair .btn { margin-top: var(--s-3); }
.k-steps { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-4); margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); text-align: left; list-style: none; }
.k-steps li { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.k-step-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sky-1); color: var(--navy); font-family: var(--font-num); font-size: var(--fs-12); font-weight: 800; font-variation-settings: "wdth" 100; }

/* ── A-5. 세로(768×1024 등): 위 안내 / 아래 키패드 ── */
@container k (orientation: portrait) {
  .k-br { display: none; }
  .k-panel.is-pad { max-width: 560px; grid-template-columns: minmax(0,1fr); grid-template-areas: "info" "keys" "vol"; }
  .is-pad > .k-info { align-items: center; }
  .is-pad > .k-info .qr-title { text-align: center; }
  .is-pad > .k-info .digits, .is-pad > .k-info .k-lock { justify-content: center; }
  .is-pad > .keypad { justify-self: center; margin-top: var(--s-6); }
}
/* ── A-6. 폰을 세워 둘 때(390, 피그마 393): 키 96×64 ── */
@container k (max-width: 520px) {
  .k-top { padding: 0 var(--s-5); height: var(--head-m); }
  .k-main { padding: 0 var(--s-4); }
  .k-panel, .k-pair { padding: var(--s-5); }
  .kiosk .t-face-2 { font-size: var(--fs-24); line-height: var(--lh-24); }
  .kiosk .t-face { font-size: var(--fs-28); line-height: var(--lh-28); }
  .kiosk .keypad { --key-h: 64px; gap: var(--s-2); }
  .kiosk .digit { width: 56px; height: 64px; }
  .k-lock { height: 64px; }
  .k-code { font-size: var(--fs-40); line-height: var(--lh-40); }
  .k-steps { grid-template-columns: minmax(0,1fr); }
  .k-cands { width: 100%; }
  .k-cand { min-width: 0; width: 100%; }
  .kiosk .entry-actions { width: 100%; }
  .kiosk .entry-actions .btn { min-width: 0; flex: 1; padding: 0 var(--s-4); }
  .kiosk .entry-mini { padding: var(--s-5); }
  .k-hint { font-size: var(--fs-16); line-height: var(--lh-16); }
  .kiosk .offline-band + .k-top { display: none; }
  .k-foot { padding: var(--s-1) 0 var(--s-3); }
  .k-panel .digits { margin-top: var(--s-3); }
  .k-vol { margin-top: var(--s-3); }
}

/* 움직임 줄이기: 반복·등장 움직임 멈춤(입장 물방울은 마지막 모습으로) */
@media (prefers-reduced-motion: reduce) {
  .kiosk *, .kiosk *::before, .kiosk *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}