/* styles.css — 형태만 담는다. 색·서체·질감은 전부 themes.js 가 흘려보낸 변수다.
 *
 * 여기에 #hex 리터럴이 등장하면 테마가 하나 더 늘 때 이 파일을 고쳐야 한다.
 * 예외는 흑백 알파(그림자·그레인) 뿐이다. */

/* ═══ 0. 기본값 ─ 테마가 붙기 전 한 프레임 ═══════════════════ */

:root {
  --bg: #DED8C8; --card: #E9E3D4; --card2: #EFE9DC;
  --ink: #2E2A24; --ink2: #554C3D; --faint: #7C7260;
  --rule: #BDB4A0; --accent: #3D4A6B; --stamp: #7A4335; --lockFace: #D6CEBB;
  --font-body: system-ui, sans-serif; --font-mono: ui-monospace, monospace;
  --font-scale: 1; --tracking: 0; --lock-radius: 3px; --label-case: none;
  --tex-grain: 0; --tex-vignette: 0; --tex-scanline: 0; --tex-stain: 0;
  --tex-shimmer: 0; --tex-banding: 0; --tex-flicker: 0;

  --gap: 14px;
  --pad: clamp(16px, 4vw, 28px);
  --max: 940px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale));
  letter-spacing: var(--tracking);
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}

#app {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--pad) var(--pad) 64px;
  position: relative;
  z-index: 1;
}

b, strong { font-weight: 700; }
i { font-style: normal; }

/* ═══ 1. 질감 레이어 ═══════════════════════════════════════════
 * 세 장 모두 pointer-events:none. 강도는 --tex-* 가 정한다.
 * 값이 0 이면 opacity 0 이라 GPU 비용도 사라진다. */

#tex-grain, #tex-band, #tex-stain, #tex-scan,
#tex-shimmer, #tex-flicker, #tex-vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9;
}

#tex-grain {
  opacity: var(--tex-grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

#tex-scan {
  opacity: var(--tex-scanline);
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
}

/* 형광등 띠 — 카메라에 찍힌 플리커 */
#tex-band {
  opacity: var(--tex-banding);
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.10) 0 3px, transparent 3px 7px);
}

/* 물 얼룩 — 벽지에 번진 자국. 위치는 고정이다 */
#tex-stain {
  opacity: var(--tex-stain);
  background:
    radial-gradient(circle at 18% 22%, var(--stamp) 0%, transparent 42%),
    radial-gradient(circle at 76% 61%, var(--stamp) 0%, transparent 38%),
    radial-gradient(circle at 41% 88%, var(--stamp) 0%, transparent 34%);
  filter: saturate(.6);
}

/* 네온 번짐 — 아주 느리게 훑고 지나간다 */
#tex-shimmer {
  opacity: var(--tex-shimmer);
  mix-blend-mode: screen;
  background: linear-gradient(to bottom,
    transparent 0%, var(--accent) 50%, transparent 100%);
  background-size: 100% 60%;
  animation: shimmer-pass 9s linear infinite;
}
@keyframes shimmer-pass {
  from { background-position: 0 -60%; }
  to   { background-position: 0 160%; }
}

/* CRT 깜빡임 — 눈에 띄면 실패한 것이다 */
#tex-flicker {
  background: #000;
  opacity: 0;
  animation: crt-flicker 2.7s ease-in-out infinite;
}
@keyframes crt-flicker {
  0%, 100% { opacity: calc(var(--tex-flicker) * .015); }
  43%      { opacity: calc(var(--tex-flicker) * .07); }
  71%      { opacity: calc(var(--tex-flicker) * .03); }
}

#tex-vignette {
  opacity: var(--tex-vignette);
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(0,0,0,.92) 128%);
}

/* 움직임을 원치 않는 사람에게는 멈춘 화면을 준다 */
@media (prefers-reduced-motion: reduce) {
  #tex-shimmer, #tex-flicker { animation: none; }
}

/* 어두운 테마에서 그레인은 곱하기가 아니라 더하기로 얹는다 */
body[data-mood="warm-dark"] #tex-grain,
body[data-mood="cold-dark"] #tex-grain,
body[data-mood="saturated-dark"] #tex-grain,
body[data-mood="phosphor"] #tex-grain { mix-blend-mode: screen; opacity: calc(var(--tex-grain) * .5); }

body[data-glow="strong"] #app { text-shadow: 0 0 6px currentColor; }
body[data-glow="soft"]   .tb-clock,
body[data-glow="strong"] .tb-clock { text-shadow: 0 0 10px currentColor; }

/* ═══ 2. 공통 부품 ═════════════════════════════════════════════ */

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--lock-radius);
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.section-label {
  font-size: .78em;
  letter-spacing: .16em;
  text-transform: var(--label-case);
  color: var(--faint);
  margin: 26px 0 9px;
  font-weight: 700;
}

.primary {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 15px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .12s ease, filter .2s ease;
}
.primary:hover { filter: brightness(1.1); }
.primary:active { transform: translateY(1px) scale(.995); }

.ghost {
  padding: 11px 15px;
  border: 1px solid var(--rule);
  color: var(--ink2);
  background: var(--card);
  transition: border-color .2s ease, color .2s ease;
}
.ghost:hover { border-color: var(--accent); color: var(--accent); }
.ghost.back { display: block; width: 100%; margin-top: 10px; text-align: center; background: none; border: none; }

.aside { display: block; margin-top: 10px; font-size: .82em; color: var(--faint); }

/* ═══ 3. 셋업 ══════════════════════════════════════════════════ */

.setup { animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.brand {
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.05;
  margin-top: 6vh;
}
.brand-sub { color: var(--ink2); margin-top: 8px; }

.lang-row { display: flex; gap: 6px; margin-top: 20px; }
.lang {
  padding: 5px 12px;
  font-size: .78em; font-weight: 700; letter-spacing: .12em;
  border: 1px solid var(--rule);
  color: var(--faint);
}
.lang.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.rank-card {
  display: grid; gap: 9px;
  margin-top: 24px; padding: 18px;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--lock-radius);
}
.rank-label {
  color: var(--accent); font-size: .72em; font-weight: 700;
  letter-spacing: .14em; text-transform: var(--label-case);
}
.rank-card > strong { font-size: 1.35em; }
.rank-count {
  margin-top: 3px; color: var(--faint);
  font-family: var(--font-mono); font-size: .76em; font-weight: 700;
  letter-spacing: .07em; text-transform: var(--label-case);
}
.rank-track {
  display: block; height: 8px; overflow: hidden;
  background: var(--card2); border-radius: 99px;
}
.rank-track i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.rank-note { color: var(--ink2); font-size: .88em; line-height: 1.5; }
.rank-open {
  justify-self: start; padding: 5px 8px;
  color: var(--accent); background: var(--card2);
  font-size: .72em; font-weight: 700; letter-spacing: .08em;
  text-transform: var(--label-case);
}

.episode-head {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  margin: 18px 0 10px;
  color: var(--accent); font-family: var(--font-mono);
  font-size: .76em; font-weight: 700; letter-spacing: .1em;
  text-transform: var(--label-case);
}
.episode-head > strong {
  grid-column: 1 / -1; color: var(--ink);
  font-family: var(--font-body); font-size: 1.55em; letter-spacing: 0;
  text-transform: none;
}
.episode-head.locked, .episode-head.locked > strong { color: var(--faint); }

.episode-locked {
  display: grid; gap: 8px; padding: 18px;
  color: var(--ink2); background: var(--card2);
  border: 1px solid var(--rule); border-radius: var(--lock-radius);
}
.episode-locked > span { font-size: .88em; line-height: 1.5; }
.episode-lock-bars { display: flex; gap: 6px; margin-top: 4px; }
.episode-lock-bars i { flex: 1; height: 7px; background: var(--rule); border-radius: 99px; }
.episode-lock-bars i.done { background: var(--accent); }

.case-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 620px) { .case-grid { grid-template-columns: 1fr 1fr; } }

.case-card {
  display: block; text-align: left;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--rule);
  transition: transform .16s ease, box-shadow .16s ease;
}
.case-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.14); }

.pending-case {
  display: grid; gap: 5px; padding: 18px;
  background: var(--card); border: 1px dashed var(--rule);
  border-radius: var(--lock-radius); color: var(--faint);
}
.pending-case > span { font-size: .88em; }

.case-clear {
  display: inline-block; margin-bottom: 12px; padding: 4px 8px;
  color: var(--bg); background: var(--ink);
  font-family: var(--font-mono); font-size: .72em; font-weight: 700;
  letter-spacing: .08em; text-transform: var(--label-case);
}

.case-swatch { display: flex; gap: 4px; margin-bottom: 12px; }
.case-swatch i { width: 20px; height: 5px; border-radius: 2px; }

.case-title { display: block; font-size: 1.28em; font-weight: 700; }
.case-tag   { display: block; color: var(--ink2); margin-top: 3px; }
.case-meta  {
  display: block; margin-top: 10px;
  font-family: var(--font-mono); font-size: .76em;
  color: var(--faint); text-transform: var(--label-case); letter-spacing: .08em;
}

/* ── 브리핑 ── */
.brief-theme {
  font-family: var(--font-mono); font-size: .76em; letter-spacing: .18em;
  color: var(--faint); text-transform: var(--label-case); margin-top: 4vh;
}
.brief-title { font-size: clamp(1.9rem, 7vw, 2.6rem); margin: 6px 0 0; font-weight: 700; }
.brief-intro { color: var(--ink2); margin: 12px 0 0; max-width: 46em; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 9px 16px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink2);
  min-width: 58px;
}
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; }
/* 「기록을 남기는 사람」 — 첫째 칩에만 붙는다 (§4.5.1) */
.chip-host {
  display: block; margin-top: 2px;
  font-style: normal; font-size: .68em; letter-spacing: .06em;
  opacity: .72;
}

.seed-row { display: flex; flex-wrap: wrap; gap: 8px; }
.seed-input {
  flex: 1 1 190px; min-width: 0;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 1.34em; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase;
  background: var(--card2);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--lock-radius);
}
.seed-input:focus { outline: none; border-color: var(--accent); }
.seed-error { margin: 8px 0 0; color: var(--stamp); font-size: .88em; line-height: 1.5; }

/* ── 초대 ── */
.invited-box {
  display: grid; gap: 6px;
  margin-top: 22px; padding: 16px 18px;
  background: var(--card2);
  border: 1px solid var(--accent);
  border-radius: var(--lock-radius);
}
.invited-box b {
  font-size: .76em; letter-spacing: .14em;
  text-transform: var(--label-case); color: var(--accent);
}
.invited-box span { color: var(--ink2); }
.invited-box code {
  font-family: var(--font-mono);
  font-size: 1.3em; font-weight: 700; letter-spacing: .3em;
}

.invite-list { display: grid; gap: 8px; margin-top: 4px; }
.invite-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: var(--lock-radius);
}
.invite-role { font-weight: 700; }

.hint-btn:disabled { opacity: .45; pointer-events: none; }

.call-note {
  margin: 20px 0 0; padding: 13px 15px;
  border-left: 3px solid var(--stamp);
  background: var(--card);
  color: var(--ink2);
  font-size: .95em;
}

/* ═══ 4. 플레이 ════════════════════════════════════════════════ */

.play { animation: rise .35s ease both; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 18px;
  padding: 12px var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.tb-title {
  font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-clock {
  font-family: var(--font-mono);
  font-size: 1.24em; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.tb-clock.urgent { color: var(--stamp); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .48; } }

.tb-stat {
  font-family: var(--font-mono); font-size: .74em;
  color: var(--faint); white-space: nowrap;
}
.tb-quit { font-size: 1.4em; line-height: 1; color: var(--faint); padding: 2px 6px; }
.tb-quit:hover { color: var(--stamp); }

@media (max-width: 520px) {
  .topbar { grid-template-columns: 1fr auto auto; }
  .tb-stat { display: none; }
}

.cols { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cols { grid-template-columns: 1fr 1fr; align-items: start; } }

.room-col, .doc-col { min-width: 0; }

/* 넓은 화면에서는 유품을 붙잡아 둔다 — 방을 훑는 동안 손에 든 것이 사라지면 안 된다 */
@media (min-width: 760px) {
  .doc-col {
    position: sticky; top: 74px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.col-head {
  font-size: .76em; letter-spacing: .18em; font-weight: 700;
  text-transform: var(--label-case);
  color: var(--faint);
  padding-bottom: 7px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

/* ── 방 ── */
.obj-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }

/* 공간형 방. 이미지가 장식이 아니라 오브젝트를 찾는 플레이 표면이다. */
.scene-explorer { min-width: 0; }
.scene-nav {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 1px 1px 9px; scrollbar-width: none;
}
.scene-nav::-webkit-scrollbar { display: none; }
.scene-zone {
  flex: 0 0 auto; padding: 8px 12px;
  color: var(--faint); background: var(--card);
  border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: .72em; letter-spacing: .08em;
}
.scene-zone.active { color: var(--ink); border-color: var(--accent); background: var(--card2); }

.scene-viewport {
  width: 100%; aspect-ratio: 16 / 9;
  overflow: auto; overscroll-behavior: contain;
  background: #080b0d; border: 1px solid var(--rule);
  scrollbar-width: thin;
}
.scene-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  min-width: 100%; overflow: hidden;
  transition: width .2s ease;
}
.scene-viewport.zoomed .scene-stage { width: 160%; }
.scene-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; user-select: none;
}
.scene-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 62%, rgba(0,0,0,.24));
}
.scene-hotspot {
  position: absolute; z-index: 2;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 5px;
  max-width: 128px; padding: 6px 8px;
  color: #f7f3e8; background: rgba(8,11,13,.78);
  border: 1px solid rgba(247,243,232,.78);
  box-shadow: 0 0 15px rgba(255,255,255,.16);
  font-size: clamp(.66em, 2.3vw, .79em); font-weight: 700;
  line-height: 1.15; text-align: left;
  backdrop-filter: blur(5px);
}
.scene-hotspot:hover, .scene-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: #fff; background: rgba(8,11,13,.92);
}
.scene-hotspot.blocked { color: rgba(247,243,232,.64); border-color: rgba(247,243,232,.36); box-shadow: none; }
.scene-hotspot.done { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 15px color-mix(in srgb, var(--accent) 30%, transparent); }
.scene-hotspot.flavor { border-style: dashed; }
.spot-mark {
  display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px;
  border: 1px solid currentColor; border-radius: 50%; line-height: 1;
}
.scene-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 7px; color: var(--faint);
  font-family: var(--font-mono); font-size: .69em; letter-spacing: .04em;
}
.scene-hint { min-width: 0; }
.scene-zoom {
  flex: 0 0 auto; padding: 5px 8px; color: var(--ink2);
  background: var(--card); border: 1px solid var(--rule);
  font: inherit;
}

@media (max-width: 420px) {
  .scene-hotspot { max-width: 102px; padding: 5px 6px; }
  .scene-hint { max-width: 72%; }
}

.obj {
  display: flex; flex-direction: column; gap: 5px;
  text-align: left;
  padding: 15px;
  min-height: 78px;
  background: var(--lockFace);
  border: 1px solid var(--rule);
  transition: transform .14s ease, border-color .2s ease;
}
.obj:hover { transform: translateY(-2px); border-color: var(--accent); }
.obj-name  { font-weight: 700; }
.obj-state {
  font-family: var(--font-mono); font-size: .7em; letter-spacing: .14em;
  text-transform: var(--label-case); color: var(--faint);
}
.obj.done { background: var(--card2); border-color: var(--accent); }
.obj.done .obj-state { color: var(--accent); }
.obj.flavor { background: none; border-style: dashed; color: var(--ink2); }

.revealed { margin-top: 14px; display: grid; gap: 10px; }
.reveal-card {
  padding: 15px;
  background: var(--card2);
  border: 1px solid var(--accent);
  animation: rise .45s ease both;
}
.reveal-card b {
  display: block; margin-bottom: 7px;
  font-size: .76em; letter-spacing: .14em;
  text-transform: var(--label-case); color: var(--accent);
}
.shapes { display: flex; gap: 14px; margin-top: 10px; }
.shapes b {
  display: block; margin: 0;
  font-size: 1.9em; color: var(--ink);
  letter-spacing: 0; text-transform: none;
}

/* ── 유품 ── */
.doc {
  padding: 17px 18px;
  margin-bottom: 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule);
}
.doc-title {
  font-size: .76em; letter-spacing: .14em; font-weight: 700;
  text-transform: var(--label-case);
  color: var(--faint);
  margin-bottom: 10px;
}
.doc-body { font-size: .97em; }

.doc-letter { background: var(--card2); border-left: 3px solid var(--stamp); }
.doc-letter .doc-body { line-height: 1.85; }
.doc-note   { font-family: var(--font-mono); }
.doc-label  { border-style: dashed; }
.doc-chart  { font-family: var(--font-mono); font-size: .94em; }

.empty { color: var(--faint); font-size: .92em; }

.photo {
  margin-top: 11px; padding: 11px 13px;
  background: var(--card2);
  border: 1px solid var(--rule);
}
.photo-face { color: var(--ink2); }
.photo-back {
  margin-top: 6px;
  font-family: var(--font-mono); font-size: .8em;
  letter-spacing: .1em; color: var(--faint);
}
.photo-back b { color: var(--ink); font-size: 1.16em; letter-spacing: .2em; }

.cipher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.cipher-cell {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 9px;
  background: var(--card2);
  border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 1.05em;
}
.cipher-cell b { font-size: 1.3em; }

.label-strip {
  margin-top: 11px; padding: 11px 13px;
  background: var(--card2);
  border: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: .92em; line-height: 1.7;
}

.chart-head {
  font-family: var(--font-mono); font-size: .78em; letter-spacing: .08em;
  color: var(--faint); margin-bottom: 9px;
}
table.chart { width: 100%; border-collapse: collapse; }
table.chart th, table.chart td {
  text-align: left; padding: 8px 6px;
  border-bottom: 1px solid var(--rule);
}
table.chart th {
  font-size: .74em; letter-spacing: .12em; color: var(--faint);
  text-transform: var(--label-case); font-weight: 700;
}
table.chart td:first-child { font-weight: 700; font-size: 1.08em; }

/* ═══ 5. 잠금 모달 ═════════════════════════════════════════════ */

.modal-bg {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  animation: fade .2s ease both;
  overflow-y: auto;
}
@keyframes fade { from { opacity: 0; } }
@media (min-width: 620px) { .modal-bg { align-items: center; } }

.modal {
  width: min(460px, 100%);
  margin: auto 0 0;
  padding: 24px var(--pad) 28px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--lock-radius) var(--lock-radius) 0 0;
  animation: slide .28s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes slide { from { transform: translateY(26px); opacity: 0; } }
@media (min-width: 620px) { .modal { margin: auto; border-radius: var(--lock-radius); } }

.modal-title { font-size: 1.32em; font-weight: 700; }
.modal-prompt { color: var(--ink2); margin: 7px 0 20px; font-size: .95em; }

.sticker {
  margin-top: 13px; padding: 13px;
  background: var(--card2);
  border: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: .86em;
}
.sticker span {
  display: block; margin-bottom: 8px;
  font-size: .82em; letter-spacing: .16em;
  text-transform: var(--label-case); color: var(--faint);
}
.sticker i { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.sticker i b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ── 입력 ── */
.lockbox { display: block; }
.lockbox.shake { animation: shake .34s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-7px); } 45% { transform: translateX(6px); }
  68% { transform: translateX(-4px); } 86% { transform: translateX(2px); }
}

.digits, .seq-disp { display: flex; justify-content: center; gap: 9px; margin-bottom: 20px; }

.digit, .seq-slot {
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 62px;
  background: var(--lockFace);
  border: 1px solid var(--rule);
  border-radius: var(--lock-radius);
  font-family: var(--font-mono);
  font-size: 1.7em; font-weight: 700;
  color: var(--faint);
  transition: border-color .16s ease, color .16s ease;
}
.digit.filled, .seq-slot.filled { color: var(--ink); border-color: var(--accent); }
.digit.hangul { font-family: var(--font-body); font-size: 1.5em; }
.seq-slot { font-size: 1.5em; }

.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keys-wide, .keys-hangul { grid-template-columns: repeat(4, 1fr); }
.keys-seq { grid-template-columns: repeat(3, 1fr); }

.key {
  padding: 15px 4px;
  background: var(--lockFace);
  border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 1.2em; font-weight: 700;
  transition: transform .1s ease, background .16s ease;
}
.key:hover { background: var(--card2); border-color: var(--accent); }
.key:active { transform: scale(.94); }
.key-del { color: var(--faint); }
.key.used { opacity: .3; pointer-events: none; }

.key-h { font-family: var(--font-body); font-size: 1.28em; line-height: 1.15; }
.key-h i {
  display: block;
  font-family: var(--font-mono); font-size: .5em; font-weight: 400;
  color: var(--faint); letter-spacing: .04em;
}
.key-seq { font-size: 1.5em; }

.modal-row { display: flex; gap: 8px; margin-top: 20px; }
.modal-row .ghost { flex: 1; text-align: center; }

/* ── 인터폰 ── */
.hint-wait {
  margin-top: 14px; padding: 12px;
  text-align: center;
  border: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: .84em;
  color: var(--faint);
}
.hint-card {
  margin-top: 14px; padding: 15px;
  background: var(--card2);
  border-left: 3px solid var(--accent);
  animation: rise .3s ease both;
}
.hint-card b {
  display: block; margin-bottom: 6px;
  font-size: .76em; letter-spacing: .14em;
  text-transform: var(--label-case); color: var(--accent);
}
.hint-card p { margin: 0; font-size: .95em; }

/* ═══ 6. 종료 ══════════════════════════════════════════════════ */

.end { text-align: center; }
.end-verdict {
  margin-top: 8vh;
  font-size: clamp(2rem, 10vw, 3.2rem); font-weight: 700; letter-spacing: .12em;
  animation: rise .5s ease both;
}
.end-verdict.ok { color: var(--accent); }
.end-verdict.no { color: var(--stamp); }

.end-story {
  max-width: 26em; margin: 18px auto 0;
  color: var(--ink2); line-height: 1.9;
}
.end-grade {
  margin-top: 30px;
  font-size: .84em; letter-spacing: .2em;
  text-transform: var(--label-case); color: var(--faint);
}
.end-grade b {
  display: block; margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 3.1em; letter-spacing: 0; color: var(--ink);
}

.badge {
  display: inline-block; margin-top: 12px;
  padding: 5px 14px;
  border: 1px solid var(--stamp); color: var(--stamp);
  font-size: .74em; letter-spacing: .18em; font-weight: 700;
  border-radius: var(--lock-radius);
}

.score-table { margin-top: 26px; text-align: left; }
.score-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: .92em;
  color: var(--ink2);
}
.score-row b { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.score-row:last-child { border-bottom: none; border-top: 2px solid var(--ink); font-weight: 700; color: var(--ink); }

/* 이 코드가 팀 기록인지 참고인지. 넷이 서로 다른 코드를 들고 있으므로
 * 화면이 말해주지 않으면 어느 것을 보내야 할지 알 수 없다 (§4.5.1) */
.record-note { margin: 8px 0 0; font-size: .88em; color: var(--ink2); }
.record-note.aside { color: var(--faint); }

.code-row { display: flex; gap: 8px; align-items: stretch; }
.result-code {
  flex: 1;
  padding: 13px;
  background: var(--card2);
  border: 1px solid var(--rule);
  border-radius: var(--lock-radius);
  font-family: var(--font-mono);
  font-size: clamp(.82rem, 3.4vw, 1.05rem);
  letter-spacing: .1em;
  display: flex; align-items: center; justify-content: center;
}

/* ═══ 7. 토스트 ════════════════════════════════════════════════ */

#toast {
  position: fixed; z-index: 40;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 14px);
  max-width: min(420px, calc(100vw - 32px));
  padding: 13px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--lock-radius);
  font-size: .93em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ═══ 8. 접근성 ════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}