/* MUST VN — 기본 스타일. 화면은 16:9 고정 비율, 크기는 컨테이너 단위(cqh)로 맞춘다. */

:root {
  --ink: #e9e6e1;
  --ink-dim: #a39e96;
  --paper: #e8e1d2;
  --paper-ink: #2a241c;
  --accent: #b3261e;
  --accent-soft: #d9534a;
  --ok: #7fb685;
  --panel: rgba(14, 13, 15, 0.94);
  --line: rgba(255, 255, 255, 0.14);
  --font: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
}

* { box-sizing: border-box; }
/* 스크롤바: 기본 회색·흰색 대신 어두운 바탕에 녹아드는 가는 막대. 손잡이는 옅은 회색, 올리면 붉게 */
/* 크롬·엣지는 ::-webkit-scrollbar 로(표준 속성을 쓰면 위아래 화살표가 남는다), 파이어폭스는 표준 속성으로 */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
  *:hover { scrollbar-color: rgba(217, 83, 74, 0.55) transparent; }
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(217, 83, 74, 0.7); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: transparent; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); font-family: var(--font); }
body { display: grid; place-items: center; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#game {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  container-type: size;
  /* 글자 크기 = 게임 화면 높이의 2.7%. 자기 자신에게는 cqh 가 안 먹어서(조상 컨테이너가 없으면 창 높이로 계산된다)
     게임 화면 높이 min(100dvh, 100vw × 9/16)로 직접 계산한다. 창이 16:9보다 세로로 길 때 글자가 커져 퍼즐이 잘리던 문제.
     아래쪽 한계는 두지 않는다(전에는 12px): 게임 화면이 높이 444px보다 작으면 글자만 화면보다 커져 퍼즐 창이 잘렸다 */
  font-size: min(2.7dvh, 1.51875vw, 30px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.layer { position: absolute; inset: 0; }

/* ── 배경 ─────────────────────────── */
#bg { transition: opacity 0.2s ease, filter 0.6s ease; background: #000; }
.bg-ghost { pointer-events: none; } /* @bg … cross: 걷히는 이전 배경 */
/* 배경 소품(D-017): 바탕 그림 위에 얹는 투명 그림. 자리·크기는 화면 대비 %(stage.js setProps) */
.bg-props, .bg-tint { position: absolute; inset: 0; pointer-events: none; }
.bg-prop { position: absolute; display: block; height: auto; }
.bg-prop.shadow { filter: drop-shadow(0 0.35em 0.35em rgba(0, 0, 0, 0.55)); } /* 바닥 소품: 떠 보이지 않게 */
.bg-prop.shadow-flat { filter: drop-shadow(0 0.04em 0.06em rgba(0, 0, 0, 0.5)); } /* 바닥에 납작한 종이: 그림자가 떨어져 있으면 떠 보인다 */
.bg-prop-ph { /* 그림이 아직 없는 소품: 이름표 단 점선 상자 */
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 2px dashed rgba(179, 38, 30, 0.7); background: rgba(179, 38, 30, 0.08);
  color: rgba(255, 255, 255, 0.85); font-size: 0.6em; text-align: center; text-shadow: 0 0 3px #000;
}
.bg-tint { mix-blend-mode: multiply; }
.bg-prop-text { /* 글자 소품: 벽에 박힌 금속 표지판 */
  box-sizing: border-box; padding: 0.5em 0.8em; text-align: center; white-space: pre-line; word-break: keep-all;
  font-family: var(--font-serif); line-height: 1.5; letter-spacing: 0.02em;
  color: #2a2a2a; background: linear-gradient(180deg, #ecebe6, #d9d8d2); border: 0.12em solid #5a5a5a; border-radius: 0.15em;
  box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.25), inset 0 0 0 0.25em rgba(255, 255, 255, 0.35);
}
.bg-prop-text-red { color: #8f1d16; }
/* 소품 배치 편집(F3): 소품을 집을 수 있게 하고 위를 덮는 층은 클릭을 통과시킨다 */
#game.prop-edit .bg-props { pointer-events: auto; z-index: 1; }
#game.prop-edit .bg-prop { cursor: grab; outline: 1px solid rgba(230, 200, 121, 0.8); outline-offset: 2px; }
#game.prop-edit #chars, #game.prop-edit #hotspots, #game.prop-edit #textbox, #game.prop-edit #fx, #game.prop-edit #scrawl { pointer-events: none !important; }
#game.prop-edit #chars { opacity: 0.35; }
#game.prop-edit #hotspots .hotspot { pointer-events: none; outline: 1px dashed rgba(255, 255, 255, 0.6); } /* 편집 중에는 핫스팟 자리를 보여 준다 */
#prop-edit-bar {
  position: absolute; left: 50%; bottom: 0.6em; transform: translateX(-50%); z-index: 90; width: min(94%, 60em);
  display: flex; flex-wrap: wrap; gap: 0.4em 0.8em; align-items: center; padding: 0.5em 0.8em;
  background: rgba(10, 10, 12, 0.92); border: 1px solid #e6c879; border-radius: 6px; font-size: 0.62em; color: #ddd;
}
#prop-edit-bar b { color: #e6c879; }
#prop-edit-bar .pe-help { color: #999; }
#prop-edit-bar .pe-info { flex: 1; min-width: 12em; font-family: ui-monospace, monospace; color: #e6c879; }
#prop-edit-bar button { font: inherit; background: #222; color: #ddd; border: 1px solid #555; border-radius: 4px; padding: 0.2em 0.7em; }
#prop-edit-bar .pe-out { flex-basis: 100%; height: 5.5em; resize: vertical; font: 0.95em ui-monospace, monospace; background: #050505; color: #bbb; border: 1px solid #333; }
#bg-label { /* 개발용 배경 이름표: 왼쪽 도크와 겹치지 않게 오른쪽 위 메뉴 옆 */
  position: absolute; right: 6.4em; top: 3.1em;
  font-size: 0.6em; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.35);
}

/* ── 효과 ─────────────────────────── */
#fx { pointer-events: none; }
/* @fx dying: 총에 맞아 쓰러진 뒤 죽어 가는 시야. 장면이 흐려지고 어두워지며, 가장자리 어둠이 숨 쉬듯 조여 온다 */
#game[data-fx="dying"] #bg, #game[data-fx="dying"] #chars { filter: blur(2.5px) brightness(0.7) saturate(0.5); transition: filter 2.5s ease; }
#game[data-fx="dying"] #chars::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 22vmin 12vmin rgba(0, 0, 0, 0.88);
  animation: dying-in 2.5s ease both, dying-breathe 3.2s ease-in-out 2.5s infinite alternate;
}
@keyframes dying-in { from { opacity: 0; } }
@keyframes dying-breathe { to { box-shadow: inset 0 0 30vmin 18vmin rgba(0, 0, 0, 0.94); } }
/* 비(@fx rain)는 js/ui/rain.js 가 캔버스에 그린다. 비 오는 날은 화면이 살짝 어둡고 푸르다 */
#fx.fx-rain { background: linear-gradient(180deg, rgba(20, 26, 34, 0.18), rgba(20, 26, 34, 0.06)); }
#fx .fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx.fx-smoke {
  background: radial-gradient(ellipse at 50% 120%, rgba(220, 220, 220, 0.55), transparent 70%);
  animation: smoke 3s ease-in-out infinite alternate;
}
@keyframes smoke { from { opacity: 0.5; } to { opacity: 0.95; } }

#flash { pointer-events: none; opacity: 0; background: #fff; z-index: 40; }
#game.shake { animation: shake var(--shake-ms, 500ms) linear; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-1.2%, 0.6%); } 40% { transform: translate(1%, -0.8%); }
  60% { transform: translate(-0.8%, 0.4%); } 80% { transform: translate(0.6%, -0.3%); }
}

/* ── 캐릭터 (D-007 임시 실루엣) ─────────────────── */
#chars { pointer-events: none; }
/* @pop: 소품을 장면 주 화면 가운데에 크게(아래에서 살짝 올라오며 나타난다). 대사창보다 아래, 인물보다 위 */
#pop { pointer-events: none; z-index: 14; }
#pop .pop-item { position: absolute; left: 50%; top: 39%; width: 34%; transform: translate(-50%, -50%); }
#pop .pop-item img { display: block; width: 100%; filter: drop-shadow(0 0.6em 1.2em rgba(0, 0, 0, 0.35)); }
#pop .pop-item.fly img { animation: pop-in 0.5s ease-out both; } /* 인물이 나타날 때처럼 살짝 아래에서 올라오며 */
#pop .pop-item.out { transition: opacity 0.3s ease; opacity: 0; }
@keyframes pop-in { from { opacity: 0; transform: translateY(6%); } }
.char {
  position: absolute; bottom: 0; height: 72%; aspect-ratio: 0.5;
  transform: translateX(-50%) translateY(3%); opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease, left 0.4s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.char.shown { opacity: 1; transform: translateX(-50%); }
/* 장면 이동(빨리 감기) 중에는 배경·인물 전환 애니메이션을 끈다 */
#game.fast-forward .char, #game.fast-forward #bg { transition: none !important; }
.char.dim { filter: brightness(0.5); }
.char[data-pos="left"] { left: 24%; }
.char[data-pos="center"] { left: 50%; }
.char[data-pos="right"] { left: 76%; }
/* 실제 스탠딩 그림: 1024x1536(2:3), 머리끝~허벅지. 아래쪽은 대사창에 가려진다 */
/* --char-scale: 인물별 키 (data/game.json characters.<id>.scale) */
.char.has-sprite { height: calc(97% * var(--char-scale, 1)); aspect-ratio: 2 / 3; }
.char img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; }
.char img.char-prev { position: absolute; inset: 0; } /* @show … fade: 걷히는 이전 그림 */
.silhouette { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; }
.silhouette .head {
  width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: var(--char-color); margin-top: 6%;
}
.silhouette .body {
  width: 78%; flex: 1; margin-top: 2%;
  background: var(--char-color);
  border-radius: 42% 42% 0 0 / 22% 22% 0 0;
}
.char-tag {
  position: absolute; top: -1.6em;
  padding: 0.15em 0.6em; font-size: 0.7em; white-space: nowrap;
  background: rgba(0, 0, 0, 0.6); border: 1px dashed rgba(255, 255, 255, 0.4); border-radius: 4px;
}

/* ── 대사창 ─────────────────────────── */
#textbox {
  position: absolute; left: 4%; right: 4%; bottom: 4%;
  min-height: 26%; padding: 1em 1.4em 1.2em;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.82), rgba(8, 8, 10, 0.92));
  border: 1px solid var(--line); border-radius: 6px;
  z-index: 41; /* 암전(#flash 40) 위: 어두운 화면 위의 독백도 보이게 */
}
#speaker { min-height: 1.3em; font-weight: 700; margin-bottom: 0.35em; color: #f0d9a8; }
#text { line-height: 1.65; white-space: pre-wrap; word-break: keep-all; }
#text .ghost { display: inline-block; width: 0; overflow: visible; white-space: nowrap; color: var(--accent); text-shadow: 0 0 0.4em rgba(179, 38, 30, 0.8); transform: translate(-0.15em, -0.8em); font-size: 1.1em; animation: ghost 2.2s ease-in forwards; pointer-events: none; } /* {~x}: 스치는 글자. 자리를 차지하지 않고 글줄 위로 스친다 */
#text .ghost.lead { transform: translate(-0.6em, -0.8em); }
@keyframes ghost { 0% { opacity: 0; } 6% { opacity: 1; } 55% { opacity: 0.9; } 100% { opacity: 0; } }
#text.blur { filter: blur(0.22em); opacity: 0.75; user-select: none; } /* {blur} 줄: 잘 안 들린 말. 대사 기록에서는 또렷하다 */
#textbox.narration #speaker { display: none; }
/* 음성 변조된 목소리: 줄이 뜰 때 이름표와 글자가 잠깐 지직거리고(어긋남·잘림), 붉은·회색 잔상이 옅게 남는다 */
#textbox.voice #speaker, #textbox.voice #text { text-shadow: 1px 0 rgba(217, 83, 74, 0.4), -1px 0 rgba(150, 165, 180, 0.3); }
#textbox.voice #speaker { animation: voice-glitch 0.5s steps(1) 1; }
#textbox.voice #text { animation: voice-glitch 0.5s steps(1) 0.05s 1; }
@keyframes voice-glitch {
  0% { transform: translate(2px, 0); text-shadow: 3px 0 rgba(217, 83, 74, 0.85), -3px 0 rgba(150, 165, 180, 0.7); }
  20% { transform: translate(-3px, 1px); clip-path: inset(0 0 45% 0); }
  40% { transform: translate(1px, -1px); clip-path: inset(40% 0 0 0); text-shadow: -2px 0 rgba(217, 83, 74, 0.8), 2px 0 rgba(150, 165, 180, 0.6); }
  60% { transform: translate(-1px, 0); clip-path: none; }
  80% { transform: translate(1px, 0); }
  100% { transform: none; }
}
#textbox.narration #text { font-family: var(--font-serif); color: #ddd8cf; }
#textbox.thought #text { font-style: italic; color: var(--ink-dim); }
#textbox.quoted #text { font-family: inherit; color: inherit; } /* 이름표 없는 '나'의 말: 서술이 아니라 대사처럼 */
#next-indicator {
  position: absolute; right: 1.2em; bottom: 0.6em; font-size: 0.7em; opacity: 0;
  color: var(--ink-dim);
}
#textbox.ready #next-indicator { opacity: 1; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(25%); } }

/* ── HUD ─────────────────────────── */
/* HUD: 왼쪽 도크(이전·기록·소지품) + 오른쪽 위 메뉴. 평소엔 반투명, 올리면 밝아지고 붉은 테 */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
#game:has(.panel-puzzle) #hud { z-index: 66; } /* 퍼즐 창이 떠 있어도 도크·메뉴를 쓸 수 있다(앨범을 찾는 문제 등) */
#dock { position: absolute; left: 0.9em; top: 0.9em; display: flex; flex-direction: column; gap: 0.5em; }
#menu-btn { position: absolute; right: 0.9em; top: 0.9em; }
.hud-btn {
  position: relative; pointer-events: auto;
  width: 2.3em; height: 2.3em; padding: 0.42em; display: grid; place-items: center;
  color: #cfc9be; background: rgba(10, 10, 12, 0.55); border: 1px solid var(--line); border-radius: 50%;
  opacity: 0.62; transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.hud-btn svg { width: 100%; height: 100%; display: block; }
.hud-btn:hover, .hud-btn:focus-visible { opacity: 1; color: #fff; border-color: rgba(217, 83, 74, 0.8); background: rgba(10, 10, 12, 0.8); outline: none; }
/* 이름표: 도크는 오른쪽에, 메뉴는 왼쪽에 */
.hud-btn::after {
  content: attr(data-label); position: absolute; top: 50%; left: calc(100% + 0.6em); transform: translateY(-50%);
  padding: 0.2em 0.6em; font-size: 0.62em; white-space: nowrap; color: var(--ink);
  background: rgba(10, 10, 12, 0.85); border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity 0.12s;
}
#menu-btn::after { left: auto; right: calc(100% + 0.6em); }
.hud-btn:hover::after, .hud-btn:focus-visible::after { opacity: 1; }
/* 새 소지품 알림 */
.hud-badge {
  position: absolute; top: 0.05em; right: 0.05em; width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--accent-soft); box-shadow: 0 0 0.5em rgba(217, 83, 74, 0.8);
  animation: badge 1.4s ease-in-out infinite;
}
@keyframes badge { 50% { transform: scale(1.25); } }
.hud-btn:has(.hud-badge:not([hidden])) { opacity: 1; }

.panel button, .title-menu button {
  background: rgba(20, 20, 22, 0.75); border: 1px solid var(--line); border-radius: 4px;
  padding: 0.3em 0.8em; font-size: 0.72em;
}
.panel button:hover:not(:disabled), .title-menu button:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.45); }
button:disabled { opacity: 0.4; cursor: default; }

/* ── 조사 핫스팟 ─────────────────────── */
#hotspots { pointer-events: none; z-index: 15; }
#hotspots.active { pointer-events: auto; }
.hotspot { /* 보이지 않는 영역. 그 자리의 그림에 흰 윤곽, 마우스를 올리면 붉은 윤곽(investigate.js linkTargets) */
  position: absolute; padding: 0; background: none; border: none; border-radius: 6px; cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.hotspot:focus-visible { outline: none; }
.hotspot:not(.has-target):hover, .hotspot:not(.has-target):focus-visible { /* 겹치는 그림이 없을 때: 영역이 붉게 빛난다 */
  box-shadow: inset 0 0 0 2px rgba(192, 38, 28, 0.75), 0 0 1.2em rgba(192, 38, 28, 0.35);
}
/* 조사 중 고를 수 있는 그림: 평소엔 은은한 흰 윤곽, 마우스를 올리면 붉은 윤곽. 그림 모양을 따라간다(drop-shadow) */
.bg-prop, .char img { transition: filter 0.15s ease; }
.bg-prop.inv-target, .char.inv-target img { filter: drop-shadow(0 0 0.08em #fff) drop-shadow(0 0 0.08em #fff) drop-shadow(0 0 0.08em rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.4em rgba(0, 0, 0, 0.35)); } /* 흰 테두리 + 바깥 옅은 그림자: 밝은 바탕에서도 보인다 */
.bg-prop.inv-hot, .char.inv-hot img { filter: drop-shadow(0 0 0.08em #c0261c) drop-shadow(0 0 0.08em #c0261c) drop-shadow(0 0 0.5em rgba(192, 38, 28, 0.6)); }
.bg-prop.shadow.inv-target { filter: drop-shadow(0 0.35em 0.35em rgba(0, 0, 0, 0.55)) drop-shadow(0 0 0.08em #fff) drop-shadow(0 0 0.08em #fff) drop-shadow(0 0 0.08em rgba(0, 0, 0, 0.7)) drop-shadow(0 0 0.4em rgba(0, 0, 0, 0.35)); }
.bg-prop.shadow.inv-hot { filter: drop-shadow(0 0.35em 0.35em rgba(0, 0, 0, 0.55)) drop-shadow(0 0 0.08em #c0261c) drop-shadow(0 0 0.08em #c0261c) drop-shadow(0 0 0.5em rgba(192, 38, 28, 0.6)); }
.bg-prop.shadow-flat.inv-target { filter: drop-shadow(0 0 0.05em #fff) drop-shadow(0 0 0.05em rgba(0, 0, 0, 0.6)); } /* 납작한 종이: 넓게 번지는 그림자는 얼룩처럼 보인다 */
.bg-prop.shadow-flat.inv-hot { filter: drop-shadow(0 0 0.06em #c0261c) drop-shadow(0 0 0.06em #c0261c); }
.bg-prop-ph.inv-target { filter: none; outline: 0.12em solid #fff; outline-offset: 0.1em; }
.bg-prop-ph.inv-hot { border-color: #c0261c; outline-color: #c0261c; }
/* 캄캄한 조사(dark): 커서 둘레만 희미하게. 새긴 글자(inv-mark)도 그 안에서만 보인다 */
.inv-mark { position: absolute; font-family: var(--font-serif); font-size: 1.5em; letter-spacing: 0.5em; color: rgba(214, 206, 192, 0.5); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.12); white-space: nowrap; pointer-events: none; }
.inv-mark-img { height: auto; filter: brightness(0.75); }
.inv-mark i { display: inline-block; font-style: normal; }
.inv-dark-mask { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 7.5em at var(--mx, -50em) var(--my, -50em), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.55) 45%, #000 100%); }
#hotspots.inv-dark { cursor: none; }
#hotspots.inv-dark::after { content: ''; position: absolute; left: var(--mx, -50em); top: var(--my, -50em); width: 0.5em; height: 0.5em; margin: -0.25em 0 0 -0.25em; border-radius: 50%; background: rgba(214, 206, 192, 0.35); pointer-events: none; } /* 손끝 */
.inv-dark .hotspot, .inv-dark .hotspot:hover, .inv-dark .hotspot:focus-visible { box-shadow: none; cursor: none; }

/* ── 창(패널) ─────────────────────── */
#panels { position: absolute; inset: 0; pointer-events: none; z-index: 65; } /* 타이틀(60) 위: 타이틀에서 연 장면 선택 창이 보여야 한다 */
.panel {
  position: absolute; inset: 0; pointer-events: auto;
  /* grid 로 가운데 두면 % 높이가 내용 크기를 따라 늘어나 창이 화면 밖으로 나간다 → flex */
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55);
}
.panel-box {
  position: relative; width: min(78%, 46em); max-height: 88%;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1em 3em rgba(0, 0, 0, 0.6);
}
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.7em 1em 0.4em; }
.panel-header h2 { margin: 0; font-size: 0.95em; letter-spacing: 0.04em; }
.panel-sub { margin: 0.3em 0 0; font-size: 0.68em; }
.panel .panel-close { border: none; background: none; font-size: 0.9em; }
.panel-body { padding: 0.4em 1.2em 0.8em; overflow: auto; min-height: 0; } /* min-height: 0 이 없으면 긴 내용이 창 밖으로 밀고 나간다 */
.panel-footer { display: flex; gap: 0.5em; justify-content: flex-end; padding: 0.5em 1em 0.8em; }
.panel-footer:empty { display: none; }
.muted { color: var(--ink-dim); font-size: 0.8em; }

/* 대사 기록 */
/* 대사 기록: 상자 없이 '> 대사' 줄. 누를 수 있다는 건 hover 색으로만 */
.log-list { list-style: none; margin: 0; padding: 0; font-size: 0.8em; }
.log-list li { line-height: 1.55; }
.log-list li.narration .log-text { font-family: var(--font-serif); color: #cfc9be; }
.log-speaker { margin-right: 0.6em; color: #f0d9a8; font-weight: 700; }
.panel .log-line {
  display: grid; grid-template-columns: 1.1em 1fr; width: 100%; padding: 0.3em 0.6em; text-align: left;
  background: none; border: none; border-radius: 2px; font-size: inherit; line-height: inherit;
}
.panel .log-line:hover, .panel .log-line:focus-visible { background: rgba(217, 83, 74, 0.14); }
/* 대사 목록 칸: 창 머리와 구분되게 테두리 친 안쪽 영역에서만 스크롤 */
.panel-log .panel-body { margin: 0.2em 1em 1em; padding: 0.4em 0.3em; border: 1px solid var(--line); border-radius: 3px; background: rgba(0, 0, 0, 0.28); }
.log-line::before { content: '>'; color: rgba(255, 255, 255, 0.22); font-family: var(--font-sans, sans-serif); }
.log-line:hover::before, .log-line:focus-visible::before { color: #d9534a; }
.log-line:hover .log-text, .log-line:focus-visible .log-text { color: #fff; }
.log-line:focus-visible { outline: none; }

/* 장면 이동 */
/* 장면 이동 창은 크기를 고정하고 목록만 스크롤한다 */
.panel-jump .panel-box { height: 88%; max-height: 88%; }
.panel-jump .panel-body { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.panel-jump .panel-body > p { margin: 0 0 0.3em; flex-shrink: 0; }
.jump-help { font-size: 0.68em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump-tabs { display: flex; gap: 0.3em; margin: 0 0 0.4em; flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.panel .jump-tab { padding: 0.35em 1.2em; font-size: 0.8em; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; background: none; color: var(--ink-dim); }
.panel .jump-tab.on { color: var(--ink); background: rgba(255, 255, 255, 0.06); border-color: var(--line); font-weight: 700; }
.jump-tabs.searching .jump-tab { opacity: 0.5; } /* 검색 중에는 모든 부에서 찾는다 */
.jump-bar { display: flex; gap: 0.5em; align-items: center; margin: 0.1em 0 0.4em; flex: 0 0 auto; }
.panel-jump .jump-search { flex: 1; min-width: 0; font-size: 0.8em !important; }
.jump-bar .jump-toggle-all { flex: 0 0 auto; font-size: 0.7em; }
.panel .jump-puzzle-only { flex: 0 0 auto; font-size: 0.7em; }
.panel .jump-puzzle-only.on { border-color: #e6c879; color: #e6c879; background: rgba(230, 200, 121, 0.1); }
/* 문제만 보기: 퍼즐 이름 · 장면(↳ 핫스팟) · 종류 */
.panel .jump-line.puzzle { padding-left: 1em; }
.jump-line.puzzle .jump-text { color: #e6c879; }
.jump-where { color: var(--ink-dim); font-size: 0.85em; white-space: nowrap; }
.jump-line.puzzle .jump-idx { min-width: 4.5em; }
.jump-list { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.4em; }
.jump-list { display: flex; flex-direction: column; font-size: 0.78em; }
.jump-part { margin: 0.8em 0 0.2em; padding-bottom: 0.2em; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 1.05em; }
.jump-group { display: flex; align-items: center; gap: 0.4em; margin-top: 0.3em; border-radius: 4px; }
.jump-group.current { background: rgba(179, 38, 30, 0.12); }
.panel .jump-group-title {
  flex: 1; display: flex; align-items: baseline; gap: 0.5em; text-align: left; border: none; background: none;
  color: var(--accent-soft); font-size: 0.95em; padding: 0.35em 0.5em;
}
.panel .jump-group-title:hover { background: rgba(255, 255, 255, 0.06); }
.jump-caret { width: 1em; color: var(--ink-dim); }
.jump-count { margin-left: auto; color: var(--ink-dim); font-size: 0.8em; }
.panel .jump-group-go { flex: 0 0 auto; font-size: 0.75em; padding: 0.2em 0.6em; opacity: 0.55; }
.jump-group:hover .jump-group-go { opacity: 1; }
.panel .jump-group-puzzle { color: #e6c879; }
.jump-group.open + .jump-scene { margin-top: 0.3em; }
.jump-here { margin-left: 0.6em; padding: 0 0.4em; font-size: 0.75em; font-weight: 400; color: #fff; background: var(--accent); border-radius: 3px; }
.panel .jump-scene, .panel .jump-line { display: flex; gap: 0.6em; align-items: baseline; width: 100%; text-align: left; border: none; border-radius: 3px; background: none; }
.panel .jump-scene { margin-top: 0.7em; font-weight: 700; color: #e6c879; }
.panel .jump-line { padding: 0.25em 0.6em 0.25em 1.4em; line-height: 1.5; }
.panel .jump-line:hover, .panel .jump-scene:hover { background: rgba(255, 255, 255, 0.07); }
.jump-line.mark .jump-text { color: var(--accent-soft); }
.jump-idx { min-width: 2em; color: var(--ink-dim); font-size: 0.85em; text-align: right; }
.jump-text { flex: 1; }
.jump-line.sub { opacity: 0.8; }
.jump-hotspot { color: #9cc3e6; font-size: 0.85em; white-space: nowrap; }

/* 다시 보기 */
#game.reviewing #panels, #game.reviewing #hotspots { visibility: hidden; }
/* @flashback 회상: 장면이 세피아로 바래고 가장자리가 어두워진다(들어가고 나올 때 0.6초) */
#chars, #pop { transition: filter 0.6s ease; }
#game.flashback #bg, #game.flashback #chars, #game.flashback #pop { filter: sepia(0.75) saturate(0.8) brightness(0.9) contrast(0.95); }
#game.flashback #fx { box-shadow: inset 0 0 18vmin 6vmin rgba(30, 18, 6, 0.75); transition: box-shadow 0.6s ease; }
#game.reviewing #textbox { border-color: rgba(230, 200, 121, 0.55); }
#game.reviewing #next-indicator { display: none; }
#game.reviewing #bg, #game.reviewing #chars { filter: sepia(0.35) brightness(0.85); }
#review-banner {
  position: absolute; left: 50%; top: 0.9em; transform: translateX(-50%); z-index: 46;
  padding: 0.3em 1em; font-size: 0.7em; white-space: nowrap;
  background: rgba(40, 32, 12, 0.9); color: #e6c879; border: 1px solid rgba(230, 200, 121, 0.4); border-radius: 999px;
}

/* 소지품 */
.item-layout { display: grid; grid-template-columns: 11em 1fr; gap: 1em; min-height: 12em; }
.item-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; }
.item-list button { width: 100%; text-align: left; }
.item-list li.active button { border-color: var(--accent-soft); }
.item-detail h3 { margin: 0 0 0.3em; font-size: 0.9em; }
.item-desc { margin: 0 0 0.7em; color: var(--ink-dim); font-size: 0.78em; line-height: 1.5; }
.item-note {
  white-space: pre-wrap; word-break: keep-all; padding: 1em 1.2em; font-size: 1em; line-height: 1.7;
  background: var(--paper); color: var(--paper-ink); border-radius: 3px;
  font-family: var(--font-serif);
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.4);
}
.item-image { max-width: 100%; }
.puzzle-note { width: min(100%, 36em); box-sizing: border-box; font-size: 0.72em; line-height: 1.6; padding: 0.9em 1.2em; word-break: keep-all; } /* 한국어 낱말이 중간에서 끊기지 않게 */

/* 메뉴 */
.menu-buttons { display: flex; gap: 0.6em; justify-content: center; padding: 0.6em 0; }

/* ── 퍼즐 공통 ─────────────────────── */
.panel-puzzle .panel-box { border-color: rgba(179, 38, 30, 0.45); max-height: 94%; width: fit-content; min-width: min(28em, 90%); max-width: min(90%, 56em); }
/* 퍼즐 창 크기는 열릴 때 내용에 맞춰 재고 그 자리에서 고정한다(frame.js). 조작해도 창이 출렁이지 않게 */
.panel-puzzle .panel-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.panel-puzzle .panel-body > * { flex-shrink: 0; }
/* 설명(위) / 문제(가운데, 남은 공간) / 정답 / 메시지 / 본 힌트(아래) — 정답 쪽이 바뀌거나 힌트가 쌓여도 문제 영역은 움직이지 않는다 */
.panel-puzzle .puzzle-body { flex: 1 1 auto; min-height: 0; overflow: auto; overflow-x: hidden; justify-content: safe center; } /* 가로 스크롤은 쓰지 않는다(종이 기울임 1~2px 넘침 포함) */
.puzzle-answer { display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding-top: 0.6em; }
.puzzle-answer:empty { display: none; }
.panel-puzzle.solved .panel-box { border-color: var(--ok); transition: border-color 0.3s; }
.puzzle-prompt { white-space: pre-line; margin: 0 0 0.5em; font-size: 0.82em; line-height: 1.6; color: #d8d2c8; }
.puzzle-body { display: flex; flex-direction: column; align-items: center; gap: 0.8em; padding: 0.4em 0 0.2em; }
.puzzle-body > * { flex-shrink: 0; } /* 문제(쪽지 등)가 눌려서 안쪽 스크롤이 생기지 않게. 넘치면 문제 영역 전체가 스크롤 */
.puzzle-msg { margin: 0; padding: 0 1em; min-height: 1.6em; max-height: 3.2em; overflow: hidden; line-height: 1.6em; text-align: center; font-size: 0.8em; } /* 단추 줄 위, 창 가운데. 두 줄까지 */
.puzzle-msg.wrong { color: var(--accent-soft); }
.puzzle-msg.right { color: var(--ok); }
/* 힌트 목록: 힌트마다 줄바꿈 없는 한 줄. 아직 안 본 힌트는 자리를 차지하지 않고, 열 때마다 창이 한 줄씩
   부드럽게 늘어난다. 창 너비만 '힌트를 다 연 상태'로 잰다(frame.js). 너무 긴 줄은 frame.js 가 그 줄만 글자를 줄인다 */
.puzzle-hints {
  list-style: none; margin: 0.3em 0 0; padding: 0 0.2em;
  display: flex; flex-direction: column; gap: 0.15em;
  font-size: 0.72em; line-height: 1.5; user-select: text; /* 끌어서 선택할 수 있다([[…]] 투명 글씨) */
}
.puzzle-hints li { display: flex; gap: 0.7em; white-space: nowrap; overflow: hidden; color: rgba(230, 200, 121, 0.6); transition: color 0.3s; }
.puzzle-hints li.pending { display: none; }
.puzzle-hints.measuring li.pending { display: flex; visibility: hidden; } /* 창 너비를 잴 때만 자리를 차지한다 */
.puzzle-hints:not(.measuring):not(:has(li:not(.pending))) { display: none; } /* 연 힌트가 없으면 여백도 없다 */
.puzzle-hints li.latest { color: #e6c879; }
.puzzle-hints .hint-no { flex-shrink: 0; opacity: 0.75; }
.msg-hidden { color: transparent; margin-left: 0.6em; } /* [[…]] 투명 글씨: 선택하면 보인다 */
.msg-hidden::selection { color: #e6c879; }
.msg-em { font-weight: 800; color: #fff3cf; } /* **…** 굵은 글씨(힌트 강조) */
#text strong.em, .log-text strong.em { font-weight: 800; color: #fff3cf; } /* 대사 속 **…** 강조(중요한 낱말) */
.btn-hint.pulse { animation: pulse 1.2s ease-in-out infinite; border-color: #e6c879 !important; }
@keyframes pulse { 50% { box-shadow: 0 0 0.8em rgba(230, 200, 121, 0.6); } }

.answer-row { display: flex; gap: 0.5em; width: min(100%, 20em); }
.answer-input {
  flex: 1; min-width: 0; padding: 0.4em 0.7em; font: inherit; font-size: 0.9em;
  background: #0a0a0b; color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
}
.answer-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); }
.answer-row button { font-size: 0.8em; }

/* 키패드 */
/* 벽 낙서 (answer 의 graffiti) */
.graffiti { background: #f4f3ef; padding: 0.7em 1.6em 0.9em; border-radius: 2px; box-shadow: inset 0 0 1.4em rgba(0,0,0,0.12), 0 0.4em 1em rgba(0,0,0,0.35); }
.gf-row { display: flex; gap: 0.7em; justify-content: flex-start; }
.gf { font: 900 3.4em "Comic Sans MS", "Malgun Gothic", sans-serif; letter-spacing: -0.02em; transform: rotate(-3deg); display: inline-block;
  text-shadow: 0 0 0.04em currentColor, 0.03em 0.03em 0 rgba(0,0,0,0.12); }
.gf:nth-child(2n) { transform: rotate(2.5deg) translateY(0.05em); }
.gf small { font-size: 0.4em; font-weight: 700; margin-left: 0.05em; }
.gf-blue { color: #1f4fd6; }
.gf-red { color: #d22b2b; }
/* 좌표판 점 잇기 (coords) */
.co { display: flex; align-items: center; gap: 1.4em; } /* 표지판(왼쪽) + 낙서(오른쪽): 퍼즐 창 높이에 맞추려고 나란히 */
.co-board { width: 13.5em; height: 13.5em; }
.co-frame { fill: #f7f5ef; stroke: #222; stroke-width: 4; }
.co-bg { fill: #fff; stroke: #222; stroke-width: 2.5; }
.co-cell { cursor: pointer; }
.co-cell:hover .co-bg { fill: #fff6d6; }
.co-cell.on .co-bg { fill: #fdeec2; }
.co-ch { font: 900 38px "Malgun Gothic", "Noto Sans KR", sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke: rgba(0,0,0,0.12); stroke-width: 1.5px; }
.co-line { fill: none; stroke: #7b2cbf; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; opacity: 0.75; pointer-events: none; }
.co-origin { fill: #5a189a; stroke: #fff; stroke-width: 2; }
.co-badge { fill: #7b2cbf; pointer-events: none; }
.co-badge-n { fill: #fff; font: 700 12px sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.co-code { display: flex; flex-direction: column; gap: 0.25em; padding: 0.6em 0.9em; background: #efe9da; color: #2b2b2b; border-radius: 3px;
  font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; letter-spacing: 0.04em; box-shadow: 0 0.3em 0.8em rgba(0,0,0,0.35); }
.co-strip { font-size: 1em; letter-spacing: 0.2em; }
/* 휴대폰 문자 (phone): 폰 테두리 안의 LCD 화면만. 번호는 아래 입력칸에 넣는다 */
.ph { padding: 0.9em 0.8em 1.1em; border-radius: 1.3em; background: linear-gradient(180deg, #3b3f46, #24272c); border: 1px solid #555a62;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0.6em 1.4em rgba(0,0,0,0.45); }
.ph-screen { background: #b9c9a3; color: #1d2616; border: 0.25em solid #15181c; border-radius: 0.35em; padding: 0.4em 0.6em 0.6em;
  font-family: "DungGeunMo", "Galmuri11", ui-monospace, Consolas, "Malgun Gothic", monospace; font-size: 0.82em; box-shadow: inset 0 0 0.6em rgba(0,0,0,0.25); }
.ph-bar { display: flex; justify-content: space-between; gap: 1.5em; font-size: 0.85em; border-bottom: 1px solid rgba(29,38,22,0.45); padding-bottom: 0.15em; margin-bottom: 0.35em; }
.ph-msg { line-height: 1.45; }
.ph-line { white-space: pre; }
.panel .ph-call { background: rgba(127, 182, 133, 0.22); }
.kp { display: flex; flex-direction: column; align-items: center; gap: 0.7em; }
.kp-strip { background: #fbfaf6; color: #151515; padding: 0.55em 1.1em; border-radius: 2px; font: 500 1.35em/1.2 "Noto Sans KR", "Malgun Gothic", sans-serif;
  letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 0.3em 0.8em rgba(0,0,0,0.35); }
.kp-slot { display: inline-block; box-sizing: border-box; width: 0.82em; height: 1.1em; margin: 0 0.04em; vertical-align: -0.16em; border: 1.5px solid #444; text-align: center; line-height: 1em; font-size: 0.95em; color: #b3261e; overflow: hidden; }
.kp-slot.filled { border-color: #b3261e; }
.kp-label { margin: 0; font-size: 0.75em; color: var(--ink-dim); }
.kp-screen {
  display: flex; gap: 0.4em; padding: 0.4em 0.8em;
  background: #0d1a10; border: 1px solid #253a2a; border-radius: 4px;
  font-family: ui-monospace, Consolas, monospace; font-size: 1.4em; color: #4a6a50;
}
.kp-digit.filled { color: #8fe39d; text-shadow: 0 0 0.4em rgba(143, 227, 157, 0.5); }
.kp-grid { display: grid; grid-template-columns: repeat(3, 3.2em); gap: 0.35em; }
.panel .kp-key { height: 2.4em; font-size: 0.85em; }
.panel .kp-ok { background: rgba(127, 182, 133, 0.18); }

/* 문제 그림(answer image): 종이 위 그림 */
.puzzle-figure { display: flex; justify-content: center; }
.pf-frame { position: relative; display: inline-block; }
.puzzle-figure.marked img { background: #fff; transform: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.pf-mark { position: absolute; transform: translate(-50%, -50%) rotate(-4deg); font-family: var(--font-serif); font-weight: 700; font-size: 1.35em; color: #1d1b18; pointer-events: none; }
.puzzle-side { display: flex; align-items: center; justify-content: center; gap: 1.2em; }
.puzzle-side .puzzle-figure { flex: none; }
.puzzle-side .puzzle-figure img { height: min(48vh, 24em); }
.puzzle-side .puzzle-note { flex: none; width: max-content; font-size: 0.95em; padding: 1em 1.3em; text-align: left; white-space: pre; line-height: 1.8; } /* 문장마다 한 줄(줄바꿈은 글에 적힌 대로만) */
.puzzle-figure img { height: min(48vh, 24em); width: auto; max-width: 100%; padding: 0; background: var(--paper); border-radius: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); user-select: none; }

/* 배열 */
.arr-slots { display: flex; gap: 0.4em; min-height: 3.6em; }
.panel .arr-slot {
  position: relative; width: 2.6em; height: 3.2em; font-size: 1.1em; display: grid; place-items: center; border-radius: 4px;
  background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--line);
}
.panel .arr-slot.filled { cursor: grab; }
.panel .arr-slot.drop-over { border-color: var(--accent-soft); border-style: solid; box-shadow: inset 0 0 0 2px rgba(217, 83, 74, 0.5); }
.panel .arr-slot.filled { border-style: solid; background: rgba(232, 225, 210, 0.1); }
.arr-slot-label { position: absolute; top: 0.15em; left: 0.3em; font-size: 0.5em; color: var(--ink-dim); }
.arr-slots.revealing .arr-slot { transition: opacity 0.4s; opacity: 0; }
.arr-reveal {
  font-family: var(--font-serif); font-size: 2.4em; color: var(--accent-soft);
  display: flex; justify-content: center; gap: 0.15em;
}
.arr-reveal span { display: inline-block; animation: reveal 0.8s ease-out both; }
@keyframes reveal { from { opacity: 0; transform: translateX(calc(var(--k) * 1.6em)); filter: blur(4px); } }
.arr-pool { display: flex; gap: 0.4em; flex-wrap: wrap; justify-content: center; }
.panel .arr-tile {
  width: 2.4em; height: 2.4em; font-size: 1.05em; display: grid; place-items: center; border-radius: 4px; cursor: grab;
  background: var(--paper); color: var(--paper-ink); border: none;
  font-family: var(--font-serif);
}
.panel .arr-tile, .panel .arr-slot { user-select: none; touch-action: none; }
.arr-dragging { opacity: 0.25; }
.arr-ghost {
  position: fixed; z-index: 1000; pointer-events: none; display: grid; place-items: center; border-radius: 4px;
  background: var(--paper); color: var(--paper-ink); font-family: var(--font-serif);
  box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.55); transform: rotate(-3deg); cursor: grabbing;
}

/* 배열: 판(grid) + 그림 조각 */
.arr-slots.arr-grid { display: grid; gap: 0; }
.panel .arr-grid .arr-slot, .panel .arr-pool-grid .arr-tile { width: 4.4em; height: 4.4em; padding: 0; font-size: 1em; border-radius: 0; }
.panel .arr-pool-grid .arr-tile { width: 3.8em; height: 3.8em; }
.arr-notes { display: flex; gap: 1em; justify-content: center; margin-bottom: 0.8em; }
.arr-note { white-space: pre-line; text-align: center; min-width: 7em; padding: 0.5em 0.9em; font-size: 0.9em; line-height: 1.5; }
.arr-note.arr-note-long { text-align: left; max-width: 34em; }
.arr-note-long .arr-note-title { text-align: center; }
.arr-note-title { font-size: 0.72em; opacity: 0.6; margin-bottom: 0.2em; }
.arr-side { display: flex; align-items: center; gap: 1.6em; }
.arr-pool-grid { display: grid; grid-template-columns: repeat(3, 3.8em); grid-auto-rows: 3.8em; gap: 0.4em; width: auto; height: calc(3 * 3.8em + 0.8em); align-content: start; } /* 판 옆 3×3 자리: 조각이 빠져도 크기가 그대로 */
/* 넓은 카드(wide): 낱말 두 줄. [X] 붉은 글자 */
.arr-red { color: var(--accent); font-weight: 700; }
.panel .arr-wide .arr-slot { width: 6.8em; height: 3.9em; }
.panel .arr-wide .arr-tile { width: 6.4em; height: 3.5em; }
.panel .arr-wide .arr-slot.filled { background: var(--paper); }
.arr-wide .arr-slot-label { font-size: 0.62em; color: var(--accent-soft); top: -1.5em; left: 50%; transform: translateX(-50%); }
.arr-slots.arr-wide { margin-top: 1.2em; }
.arr-wide .arr-face { align-items: center; justify-content: center; padding: 0.2em; }
.arr-wide .arr-word { font-size: 0.85em; color: var(--paper-ink); text-shadow: none; }
.arr-wide .arr-sub { font-size: 0.62em; letter-spacing: 0.05em; color: #3d3a35; text-shadow: none; text-align: center; }
/* 피라미드(layout: pyramid): 칸마다 층 하나. 위가 좁고 아래가 넓다. 오른쪽 붉은 화살표는 읽는 방향(위 → 아래) */
.arr-pyr-wrap { position: relative; padding-right: 2.2em; }
.arr-slots.arr-pyr { flex-direction: column; align-items: center; gap: 0.18em; width: 19em; }
.panel .arr-pyr .arr-slot {
  width: 100%; height: 2.5em; border: none; border-radius: 0; background: none; font-size: 1em;
}
.panel .arr-pyr .arr-slot::before {
  content: ''; position: absolute; inset: 0; background: rgba(232, 225, 210, 0.1); transition: background 0.2s;
  clip-path: polygon(calc(50% - 50% * (var(--i) + 1.6) / (var(--n) + 1.6)) 0, calc(50% + 50% * (var(--i) + 1.6) / (var(--n) + 1.6)) 0,
    calc(50% + 50% * (var(--i) + 2.6) / (var(--n) + 1.6)) 100%, calc(50% - 50% * (var(--i) + 2.6) / (var(--n) + 1.6)) 100%);
}
.panel .arr-pyr .arr-slot.filled::before { background: var(--paper); }
.panel .arr-pyr .arr-slot.drop-over { box-shadow: none; }
.panel .arr-pyr .arr-slot.drop-over::before { background: rgba(217, 83, 74, 0.35); }
.arr-pyr-br { position: relative; color: var(--accent-soft); font-size: 0.9em; letter-spacing: 0.1em; }
.arr-pyr .arr-face { flex-direction: row; align-items: baseline; justify-content: center; gap: 0.35em; padding: 0; }
.arr-pyr .arr-word { font-size: 0.85em; color: var(--paper-ink); text-shadow: none; }
.arr-pyr .arr-sub { font-size: 0.85em; color: var(--accent); font-weight: 700; text-shadow: none; }
.arr-pyr-arrow { position: absolute; right: 0.4em; top: 0.6em; bottom: 0.3em; width: 2px; background: var(--accent); }
.arr-pyr-arrow::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 0.7em; height: 0.7em; border: solid var(--accent); border-width: 0 2px 2px 0; transform: translateX(-50%) rotate(45deg); }
.arr-pool.arr-pool-list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.35em; counter-reset: arr-n; }
.panel .arr-pool-list .arr-tile { width: auto; min-width: 7.5em; height: 2.2em; padding: 0 0.7em; counter-increment: arr-n; display: flex; align-items: center; }
.arr-pool-list .arr-tile::before { content: counter(arr-n) ")"; font-size: 0.75em; color: #6a645a; margin-right: 0.5em; }
.arr-pool-list .arr-face { flex-direction: row; align-items: baseline; gap: 0.5em; padding: 0; width: auto; height: auto; }
.arr-pool-list .arr-word { font-size: 0.9em; text-shadow: none; }
.arr-pool-list .arr-sub { font-size: 0.85em; color: var(--accent); font-weight: 700; text-shadow: none; }
.panel .arr-pool-list .arr-tile.arr-used { opacity: 0.25; cursor: default; pointer-events: none; }
.arr-face { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.12em; width: 100%; height: 100%; padding: 0.4em 0.42em; box-sizing: border-box; text-align: left; }
.arr-fig { position: absolute; inset: 0; width: 100%; height: 100%; }
.arr-fig path { fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.arr-word { position: relative; font-size: 0.72em; color: #2f5fb8; font-family: var(--font-serif); font-weight: 700; text-shadow: 0 0 0.3em var(--paper); }
.arr-sub { position: relative; font-size: 0.34em; line-height: 1.4; color: #6a645a; text-align: left; word-break: keep-all; text-shadow: 0 0 0.3em var(--paper); }
.arr-grid .arr-slot.filled { background: var(--paper); }
.arr-grid.complete .arr-slot { border-color: transparent; transition: border-color 0.6s; }
.arr-grid.complete .arr-word, .arr-grid.complete .arr-sub { opacity: 0.15; transition: opacity 0.8s; }

/* 문서 읽기 */
.txt-doc {
  max-width: 100%; overflow-x: auto; padding: 0.8em 1.1em; font-size: 0.85em; line-height: 1.75;
  background: var(--paper); color: var(--paper-ink); font-family: var(--font-serif); border-radius: 3px;
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.4);
}
.txt-line { display: flex; align-items: center; white-space: nowrap; }
.txt-line:has(.txt-chars:empty) { height: 0.9em; } /* 빈 줄은 문단 사이 띄움 */
.txt-ch { cursor: pointer; border-radius: 2px; }
.txt-ch.space, .txt-ch.plain { cursor: default; }
.txt-ch.plain:hover { background: none !important; }
.txt-doc.txt-note { font-size: 0.78em; line-height: 1.6; }
.txt-line.l-title { justify-content: center; font-size: 1.6em; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 0.2em; }
.txt-line.l-alert { font-size: 1.1em; font-weight: 700; color: var(--accent); margin-top: 0.3em; }
.txt-line.l-call { font-size: 1.1em; font-weight: 700; color: #3a2a18; }
.txt-line.l-sign { justify-content: flex-end; font-weight: 700; margin-top: 0.2em; }
.txt-line.l-blue { color: #2348c9; }
/* 무지개 이야기(style: moo): 짙은 적갈색 바탕에 누런 글씨, 가운데 정렬. split 글자는 첫소리가 지워져 있다 */
.txt-doc.txt-moo { background: #5a1414; color: #d2bf78; font: 700 0.8em/1.38 "Noto Sans KR", "Malgun Gothic", sans-serif; letter-spacing: 0.06em; padding: 0.8em 1.4em; box-shadow: inset 0 0 1.4em rgba(0,0,0,0.45), 0 0.4em 1em rgba(0,0,0,0.4); }
.txt-moo .txt-line { justify-content: center; }
.txt-ch.split { position: relative; }
/* 빨간 종이(style: red): 원작 책 그림처럼 짙은 빨강 바탕에 흰 손글씨, 마지막 물음은 검게 */
.txt-doc.txt-red { background: #6e1612; color: #f4eee6; font-size: 1.05em; line-height: 1.7; letter-spacing: 0.04em; box-shadow: inset 0 0 1.4em rgba(0,0,0,0.45), 0 0.4em 1em rgba(0,0,0,0.4); }
.txt-red .txt-line.l-sign { color: #170606; font-size: 0.9em; }
.txt-doc.txt-wrap { width: 34em; font-size: 0.72em; line-height: 1.38; padding-top: 0.6em; padding-bottom: 0.6em; }
.txt-wrap .txt-line { white-space: normal; align-items: flex-start; }
.txt-wrap .txt-chars { min-width: 0; word-break: keep-all; }
.txt-wrap .txt-line.l-alert { text-align: center; justify-content: center; font-size: 1em; margin-top: 0; }
.txt-wrap .txt-line:has(.txt-chars:empty) { height: 0.6em; }
.txt-ch:not(.space):hover { background: rgba(179, 38, 30, 0.18); }
.txt-ch.marked { background: var(--accent); color: #fff; }
.txt-line.covered .txt-chars { pointer-events: none; color: transparent; background: repeating-linear-gradient(-45deg, #3a3631 0 0.3em, #4a453e 0.3em 0.6em); border-radius: 2px; }
.panel .txt-cover { width: 1.9em; margin-right: 0.7em; padding: 0.05em 0; font-size: 0.65em; color: var(--paper-ink); background: rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.25); }
.txt-line.covered .txt-cover { background: #3a3631; color: var(--paper); }
.txt-memo { background: #e6dccb; box-shadow: inset 0 0 2.5em rgba(110, 20, 15, 0.35), 0 0.3em 1em rgba(0, 0, 0, 0.4); }
/* 자: 글자 한 칸 = 눈금 한 칸(1cm) */
.txt-ruler { --cm: 1.35em; padding: 0 0.6em 0.6em; line-height: 1.7; background: #d8c79f; }
.txt-scale { display: flex; margin-bottom: 0.2em; }
.txt-tick {
  width: calc(var(--cm) / 0.55); flex: 0 0 auto; height: 1.6em; /* 글꼴이 0.55em 이라 칸 너비를 되돌려 맞춘다 */ border-left: 1px solid #4a3d28;
  font: 0.55em/1 ui-monospace, Consolas, monospace; color: #4a3d28; padding: 0.15em 0 0 0.2em; box-sizing: border-box;
}
.txt-ruler .txt-ch { display: inline-block; width: var(--cm); text-align: center; }
.txt-tools { display: flex; gap: 0.6em; align-items: center; }
.txt-strip { width: 16em; height: 1.9em; line-height: 1.9em; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 0.7em; font-size: 0.85em; letter-spacing: 0.1em; text-align: center; border: 1px solid var(--line); border-radius: 4px; color: var(--accent-soft); }
.txt-strip.empty { color: var(--ink-dim); letter-spacing: 0; } /* 글씨 크기는 그대로 두어 칸 크기가 안 바뀌게 */
.txt-tools button { font-size: 0.7em; }

.ruler-paper { width: 100%; max-width: 40em; display: block; touch-action: none; user-select: none; }
.ruler-paper .rp-sheet { fill: var(--paper); }
.ruler-paper .rp-ch { font-family: var(--font-serif); fill: #2b2621; text-anchor: middle; }
.ruler-paper .rp-ch.hit { fill: var(--accent); }
.ruler-paper .rp-ruler { cursor: grab; }
.ruler-paper .rp-ruler.dragging { cursor: grabbing; }
.ruler-paper .rp-body { fill: rgba(220, 230, 235, 0.55); stroke: #5f6b70; stroke-width: 1; }
.ruler-paper .rp-cm { stroke: #2e3538; stroke-width: 1.4; }
.ruler-paper .rp-mm { stroke: #2e3538; stroke-width: 0.6; }
.ruler-paper .rp-num { font: 10px ui-monospace, Consolas, monospace; fill: #2e3538; text-anchor: middle; }
.rp-help { margin: 0; font-size: 0.7em; }

/* 회전 */
.rot-stage { width: 100%; height: 12em; display: grid; place-items: center; }
.rot-prop { transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1); }
.rot-stage { overflow: hidden; }
.rot-controls { display: flex; gap: 0.5em; }
.laptop { display: flex; flex-direction: column; align-items: center; }
.laptop-screen {
  position: relative; width: 14em; height: 8.5em; padding: 1.4em 1.6em;
  background: #120707; border: 0.45em solid #2a2a2e; border-radius: 0.4em 0.4em 0 0;
  display: grid; place-items: center;
}
.sevenseg { width: 100%; }
.sevenseg .on { fill: #e2382c; filter: drop-shadow(0 0 3px rgba(226, 56, 44, 0.75)); } /* 붉은 7세그먼트: 장면의 노트북 소품(prop_laptop)과 같은 색 */
.sevenseg .off { fill: rgba(226, 56, 44, 0.07); }
.laptop-cursor { position: absolute; right: 1em; top: 0.8em; width: 0.8em; transform: rotate(180deg); }
.laptop-cursor path { fill: #fff; stroke: #000; stroke-width: 1; }
.laptop-base {
  width: 16em; padding: 0.35em 0; text-align: center; font-size: 0.6em;
  background: #3a3a40; color: #9a9aa2; border-radius: 0 0 0.6em 0.6em;
}

.sunflower { width: 21em; height: 18.75em; }
.rot-stage:has(.sunflower) { width: 22em; height: 19em; }
/* 바닥 글자판 (rotate floor): 옆으로 돌리면 0.72배로 줄어드니 세로도 넉넉히 */
.rot-stage:has(.floor) { width: 22em; height: 12.5em; }
.floor { background: #f1efe9; padding: 0.5em 0.7em; border-radius: 2px; box-shadow: inset 0 0 1.2em rgba(0,0,0,0.15), 0 0.4em 1em rgba(0,0,0,0.35); }
.floor-row { display: flex; }
.floor-ch { width: 1.8em; text-align: center; font: 700 1.05em/1.5 "Noto Serif KR", "Nanum Myeongjo", serif; color: #1d1d1d; }
.sunflower .sf-stem { fill: none; stroke: #3f7a3a; stroke-width: 6; stroke-linecap: round; }
.sunflower .sf-leaf { fill: #4f8f45; stroke: #234a20; stroke-width: 1.5; }
.sunflower .sf-petal { fill: #f1c84a; stroke: #8a6a12; stroke-width: 1; }
.sunflower .sf-core { fill: #d9762e; stroke: #5a3210; stroke-width: 1.5; }
.sunflower .sf-core-line { stroke: #5a3210; stroke-width: 1; }
.sunflower .sf-pot { fill: #2f5f7f; stroke: #142c3c; stroke-width: 2; }
.sunflower .sf-lcd { fill: #a9e6ff; stroke: #142c3c; stroke-width: 1.5; }
.sunflower .sf-clock-text { font: 700 11.5px ui-monospace, Consolas, monospace; fill: #10303f; text-anchor: middle; dominant-baseline: central; }
.sunflower .sf-bead { fill: #f7e98e; stroke: #9a9a9a; stroke-width: 2.5; }
.sunflower .sf-letter { font: 700 17px Arial, sans-serif; fill: #c62828; text-anchor: middle; dominant-baseline: central; }
.sunflower .sf-center { font: 700 64px Arial, sans-serif; fill: #e040fb; text-anchor: middle; dominant-baseline: central; }
.sunflower .sf-hands { animation: sf-hands-in .6s ease-out; }
.sunflower:has(.sf-hands) .sf-center { opacity: .4; transition: opacity .6s; } /* 바늘이 나오면 가운데 글자는 흐리게 */
@keyframes sf-hands-in { from { opacity: 0; } }
.sunflower .sf-hand { cursor: grab; }
.sunflower .sf-hand.dragging { cursor: grabbing; }
.sunflower .sf-hand-line { stroke: #f2f2f2; stroke-linecap: round; }
.sunflower .sf-hand-edge { stroke: #111; stroke-linecap: round; }
.sunflower .sf-hand-hour .sf-hand-line { stroke-width: 6; }
.sunflower .sf-hand-hour .sf-hand-edge { stroke-width: 9.5; }
.sunflower .sf-hand-min .sf-hand-edge { stroke-width: 7.5; }
.sunflower .sf-hand-sec .sf-hand-edge { stroke-width: 5; }
.sunflower .sf-hand-min .sf-hand-line { stroke-width: 4; }
.sunflower .sf-hand-sec .sf-hand-line { stroke: #ff5a4f; stroke-width: 2; }
.sunflower .sf-hand-hit { stroke: transparent; stroke-width: 14; stroke-linecap: round; }
.sunflower .sf-hand-pin { fill: #f2f2f2; stroke: #111; stroke-width: 2; pointer-events: none; }

/* ── 장 제목 카드 ─────────────────────── */
#card {
  z-index: 42; /* 암전(#flash 40) 위: @fadeout 뒤의 장 제목도 보이게 */ display: grid; place-content: center; text-align: center; gap: 0.6em;
  background: rgba(0, 0, 0, 0.92);
  animation: fadein 0.8s ease;
}
#card h2 { margin: 0; font-family: var(--font-serif); font-size: 2.2em; letter-spacing: 0.25em; }
#card p { margin: 0; color: var(--ink-dim); letter-spacing: 0.1em; }
@keyframes fadein { from { opacity: 0; } }

/* ── 알림 ─────────────────────────── */
#toast { position: absolute; top: 6.75em; left: 3.9em; display: flex; flex-direction: column; gap: 0.4em; align-items: flex-start; z-index: 45; pointer-events: none; } /* 배낭 아이콘 옆 */
.toast-item {
  padding: 0.35em 0.9em; font-size: 0.75em;
  background: rgba(20, 20, 22, 0.9); border-left: 3px solid #e6c879; border-radius: 3px;
  animation: fadein 0.25s ease; transition: opacity 0.4s;
}
.toast-item.out { opacity: 0; }

/* ── 타이틀 ─────────────────────────── */
#title {
  z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1c0d0d 0%, #050505 70%);
}
#title h1 {
  margin: 0; font-family: var(--font-serif); font-size: 5em; letter-spacing: 0.4em; padding-left: 0.4em;
  color: #d7d2ca; text-shadow: 0 0 0.4em rgba(179, 38, 30, 0.45);
}
#title .subtitle { margin: 0.2em 0 2.4em; color: var(--ink-dim); font-size: 0.75em; letter-spacing: 0.3em; }
.title-menu { display: flex; flex-direction: column; gap: 0.6em; width: 10em; }
.title-menu button { font-size: 0.9em; padding: 0.5em; }
#title .credit { position: absolute; bottom: 1.2em; font-size: 0.6em; color: rgba(255, 255, 255, 0.35); }

#error {
  position: absolute; left: 1em; right: 1em; bottom: 1em; z-index: 100;
  padding: 0.8em 1em; font-size: 0.75em; font-family: ui-monospace, Consolas, monospace;
  background: #3a0d0d; border: 1px solid var(--accent); border-radius: 4px; white-space: pre-wrap;
}

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

/* 화면 위 가운데 안내 글귀(@guide). 원작 페이지마다 붙어 있던 안내문처럼, 늘 그 자리에 있어 아무도 안 읽는다.
   퍼즐 창·암전 위에도 보이게 맨 위에 둔다 */
#guide { position: absolute; top: 1.15em; left: 50%; transform: translateX(-50%); z-index: 66; pointer-events: none; white-space: nowrap;
  font-size: 0.62em; letter-spacing: 0.22em;
  /* 배경색에 따라 저절로 대비가 생기게(difference): 어두운 데선 흐린 붉은 회색, 밝은 데선 짙은 회색 */
  color: rgb(165, 120, 115); mix-blend-mode: difference; opacity: 0.7; }

/* 대사창 숨기기(H): 장면만 남긴다 */
#game.ui-hidden #textbox, #game.ui-hidden #hud, #game.ui-hidden #guide, #game.ui-hidden #toast, #game.ui-hidden .review-bar { visibility: hidden; }
/* 장면 벽 낙서(@scrawl): 대사창이 덮는 자리(화면 아래쪽)에 있다. 대사창이 반투명이라 비치지 않게, 대사창을 숨겼을 때(H)만 보인다 */
#game:not(.ui-hidden) #scrawl { visibility: hidden; }
#scrawl { z-index: 12; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 13%;
  font: 700 1.9em/1 "Nanum Pen Script", "Nanum Brush Script", "Gungsuh", serif; letter-spacing: 0.12em; color: rgba(25, 5, 5, 0.78);
  transform: rotate(-2deg); text-shadow: 0 0 0.06em rgba(0,0,0,0.5); }

/* 녹화 표시(@rec): 장면의 주 화면(대사창과 같은 폭) 안 오른쪽 위에 '● REC'. 따로 바탕 없이 장면 위에 얹는다.
   글자는 배경에 따라 반전(흰 방에서는 어둡게, 어두운 방에서는 밝게), 붉은 점은 겹쳐 둔 다른 층이라 늘 붉다 */
#rec, #rec-dot { position: absolute; top: 8.5%; right: 5%; z-index: 44; pointer-events: none; display: flex; align-items: center; gap: 0.45em;
  font-family: var(--font-sans, sans-serif); font-size: 0.78em; font-weight: 700; letter-spacing: 0.14em; color: #e8e3da; }
#rec { mix-blend-mode: difference; }
#rec[hidden], #rec-dot[hidden] { display: none; }
#rec b { width: 0.8em; height: 0.8em; visibility: hidden; }
#rec-dot { color: transparent; }
#rec-dot b { width: 0.8em; height: 0.8em; border-radius: 50%; background: #e0261c; box-shadow: 0 0 0.5em rgba(224, 38, 28, 0.7); animation: rec-blink 1.6s steps(1) infinite; }
#rec.blink, #rec-dot.blink { font-size: 1.05em; }
#rec-dot.blink b { animation-duration: 0.8s; }
@keyframes rec-blink { 50% { opacity: 0.15; } }

/* 좌우 반전(@mirror): 장면·대사창·이름표·REC까지 거울처럼. 퍼즐·기록 창(#panels)은 다시 뒤집어 읽을 수 있게 */
#game.mirrored { scale: -1 1; }
#game.mirrored #panels { scale: -1 1; }
.log-list li.mirrored .log-line { scale: -1 1; }

/* 장면 보기(peek): 퍼즐 창을 잠깐 치운다. 직전 대사는 대사창에 남아 있다 */
#game.peek #panels { visibility: hidden; }

/* 앨범 */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: 0.8em; padding: 0.4em 0; }
.panel .album-item { display: flex; flex-direction: column; gap: 0.35em; padding: 0; border: none; background: none; text-align: center; }
.album-thumb { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 3px; border: 1px solid var(--line); background: #0d0d0d; color: var(--ink-dim); font-size: 1.4em; }
.album-thumb { overflow: hidden; position: relative; }
.album-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; } /* 자기 층에 고정: 테두리가 바뀌어도 다시 그리지 않는다 */
.album-item:not(.locked):hover .album-thumb { border-color: var(--accent-soft); }
.album-label { font-size: 0.72em; color: var(--ink); }
.album-item.locked .album-label { color: var(--ink-dim); }
.album-view { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6em; background: rgba(0, 0, 0, 0.92); cursor: pointer; }
.album-view[hidden] { display: none; }
.album-big { width: 78%; aspect-ratio: 16 / 9; border-radius: 3px; }
.album-caption { font-family: var(--font-serif); font-size: 0.9em; letter-spacing: 0.1em; color: var(--ink); }

/* 그림이 아직 없는 CG 자리(@cg, src 없음): 무슨 그림이 들어갈지 화면 가운데 크게 */
#bg-label.cg-ph { inset: 0; top: 0; right: 0; display: flex; align-items: center; justify-content: center; padding: 0 12%; text-align: center;
  font-size: 1.05em; letter-spacing: 0.06em; line-height: 1.6; color: #e8e1d2; mix-blend-mode: difference; background: none; white-space: normal; } /* 흰 배경에서도 보이게 반전 */