/* 레이아웃: 가운데 게임 화면(15x11 타일) + 아래 조작 안내 / 터치 패드.
   분위기: 어둡고 덜 현상된 사진, 닳고 해진 괴담책 (맨 아래 "테마" 블록). */
:root {
  --night: #17121f;        /* 바깥 배경 */
  --night-2: #241c31;
  --ink: #2a2238;          /* 대화창 테두리, 글자 */
  --paper: #f8f3e6;        /* 대화창, 카드 바탕 */
  --chalk: #e9e3f2;        /* 어두운 바탕 위 글자 */
  --muted: #9c90b3;
  --accent: #e2574c;       /* 학교 빨간 띠, 강조 */
  --accent-2: #f2c14e;     /* 선택 표시, 배지 */
  --font-display: "Do Hyeon", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--night) radial-gradient(ellipse at 50% -10%, var(--night-2), var(--night) 70%);
  color: var(--chalk);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
}

.wrap { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- 게임 화면 ---------- */
#game {
  position: relative;
  width: 100%;
  aspect-ratio: 15 / 11;
  max-width: 100%;
  container-type: inline-size;
  background: #0d0a14;
  border: 4px solid var(--ink);
  outline: 2px solid #4a3e60;
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
}
#screen { width: 100%; height: 100%; display: block; }   /* 정수 배로 크게 그린 뒤 부드럽게 줄임 (game.js 의 fitCanvas) */

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .2s; }
#fade.on { opacity: 1; }

/* 눈 뜨는 연출 (game.js 의 openEyes): i = 눈 모양 ( ) 으로 뚫린 구멍. 바깥은 검은 그림자, ::after = 하얀 빛 */
#eyes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#eyes i {
  position: absolute; left: 50%; top: 50%; width: 150%; height: 0%;
  border-radius: 50%; transform: translate(-50%, -50%);
  box-shadow: 0 0 5cqw 200cqw #000, inset 0 0 4cqw 1cqw rgba(0,0,0,.85);
  transition: height .6s ease-in-out;
}
#eyes.shut i { height: 0%; }
#eyes.slow i { transition-duration: .35s; }
#eyes.peek i { height: 34%; }
#eyes.open i { height: 260%; transition: height .3s ease-out; }
#eyes::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 1.3s ease-out; }
#eyes.open::after { opacity: .9; transition: opacity .2s ease-in; }
#eyes.open.flash::after { opacity: 0; transition: opacity 1.3s ease-out; }

#toast {
  position: absolute; top: 3cqw; left: 3cqw;
  background: var(--paper); color: var(--ink);
  border: .6cqw solid var(--ink);
  padding: .8cqw 2.4cqw;
  font-family: var(--font-display); font-size: 3.4cqw;
  border-radius: 1cqw;
}
#toast.show { animation: toast 1.8s ease forwards; }
@keyframes toast { 0% { transform: translateY(-160%); } 12%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* ---------- 대화창 ---------- */
#dialog {
  position: absolute; left: 2.5cqw; right: 2.5cqw; bottom: 2.5cqw;
  min-height: 25%;
  background: var(--paper); color: var(--ink);
  border: .7cqw solid var(--ink);
  box-shadow: inset 0 0 0 .6cqw var(--paper), inset 0 0 0 1.1cqw #b9a9d6;
  border-radius: 1.4cqw;
  padding: 3cqw 4cqw;
  font-size: 3.7cqw; line-height: 1.55;
  cursor: pointer;
}
#dialog-speaker {
  position: absolute; top: -4.4cqw; left: 3cqw;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-size: 3.3cqw;
  padding: .4cqw 2.4cqw; border-radius: 1cqw;
}
/* 시스템 메시지: 이름표 자리에 "Tip" (붉은 표) */
#dialog.tip #dialog-speaker { background: var(--accent) !important; color: #f4ecdc !important; font-style: italic; letter-spacing: .1em; }
#dialog-text { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
#dialog-more { position: absolute; right: 3cqw; bottom: 1.6cqw; font-size: 2.6cqw; animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#choices {
  position: absolute; right: 2.5cqw; bottom: calc(25% + 4.5cqw);
  display: flex; flex-direction: column;
  background: var(--paper);
  border: .7cqw solid var(--ink); border-radius: 1.4cqw;
  padding: 1.4cqw;
  max-width: 70%;
}
.choice {
  all: unset; cursor: pointer;
  color: var(--ink); font-family: var(--font-body); font-size: 3.5cqw;
  padding: .8cqw 2cqw .8cqw 4.4cqw; position: relative; border-radius: .8cqw;
}
.choice.on::before { content: "▶"; position: absolute; left: 1.2cqw; font-size: 2.6cqw; top: 1.4cqw; }
.choice.on { background: #efe6cf; }

/* ---------- 공통 오버레이 ---------- */
.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(13, 10, 20, .72);
  padding: 4cqw;
}
.panel {
  background: var(--paper); color: var(--ink);
  border: .7cqw solid var(--ink); border-radius: 1.6cqw;
  padding: 3.4cqw 4cqw;
  width: min(100%, 78cqw);
  font-size: 3.2cqw;
  display: flex; flex-direction: column; gap: 2cqw;
  max-height: 100%;
}
.btn {
  all: unset; cursor: pointer; text-align: center;
  font-family: var(--font-display); font-size: 3.4cqw;
  background: var(--ink); color: var(--paper);
  padding: 1.2cqw 3.6cqw; border-radius: 1cqw;
  box-shadow: 0 .6cqw 0 #120d1a;
}
.btn:active { transform: translateY(.4cqw); box-shadow: 0 .2cqw 0 #120d1a; }
/* ---------- 일시정지 / 저장 슬롯 ---------- */
#pause { z-index: 30; }
.pause { width: min(100%, 64cqw); }
.pause h2 { margin: 0; font-family: var(--font-display); font-size: 4.6cqw; text-align: center; }
#pause-msg { margin: 0; text-align: center; color: var(--muted, #6a5c84); min-height: 0; }
#pause-msg:empty { display: none; }
.pause-list { display: flex; flex-direction: column; gap: 1.4cqw; overflow-y: auto; max-height: 44cqw; min-height: 0; }
.pause-list > * { flex-shrink: 0; }
.pause-list .btn { display: block; }
.pause-list .slot { display: flex; justify-content: space-between; gap: 2cqw; text-align: left; font-family: var(--font-body); font-size: 2.9cqw; padding: 1.2cqw 2.4cqw; }
.pause-list .slot b { font-family: var(--font-display); font-weight: normal; white-space: nowrap; }
.pause-list .slot { align-items: center; }
.pause-list .slot span { opacity: .8; white-space: pre-line; text-align: right; font-size: 2.5cqw; line-height: 1.35; }
.pause-list .slot.empty { opacity: .55; }
.pause-list .btn[disabled] { opacity: .35; pointer-events: none; }
#pause-btn { position: absolute; top: 1.2cqw; right: 1.2cqw; z-index: 20; width: 6cqw; height: 6cqw; min-width: 26px; min-height: 26px;
  border: 0; border-radius: 1cqw; background: rgba(10,7,16,.55); color: #e9e1f5; font-size: 2.6cqw; cursor: pointer; }
#pause-btn[hidden] { display: none; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .4cqw var(--ink); }
.btn:focus-visible, .choice:focus-visible, .tab:focus-visible { outline: .5cqw solid var(--accent-2); outline-offset: .4cqw; }
input.field {
  font: inherit; font-size: 3.6cqw; color: var(--ink);
  background: #fffdf6; border: .5cqw solid var(--ink); border-radius: .8cqw;
  padding: 1cqw 2cqw; width: 100%;
}
input.field:focus { outline: .5cqw solid var(--accent-2); }

/* ---------- 환영 카드 ---------- */
#welcome {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #1d1729, #0f0b16);
}
.card {
  width: min(100%, 74cqw);
  background: var(--paper); color: var(--ink);
  border-radius: 2cqw;
  box-shadow: 0 0 0 .7cqw var(--ink), 0 2cqw 0 .7cqw #0a0710;
  overflow: hidden;
  transform: rotate(-1.2deg);
  animation: cardIn .7s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes cardIn { from { transform: translateY(14cqw) rotate(4deg); opacity: 0; } }
.card-band {
  background: var(--accent); color: #fff7ec;
  display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw;
  padding: 1.4cqw 3.4cqw;
  font-family: var(--font-display);
}
#w-school { font-size: 3.4cqw; }
.card-no { font-size: 2.4cqw; letter-spacing: .1em; opacity: .85; font-family: var(--font-body); }
.card-body { display: grid; grid-template-columns: 17cqw 1fr; gap: 3cqw; padding: 3cqw 3.4cqw 3.4cqw; }
.photo {
  aspect-ratio: 3 / 4; max-width: 100%;
  background: #ddd3bd;
  border: .5cqw dashed #a8987a; border-radius: 1cqw;
  display: grid; place-items: center;
  font-size: 2.2cqw; color: #8a7a5c; text-align: center;
  position: relative; overflow: hidden;
}
.photo canvas { width: 70%; image-rendering: pixelated; }
.card-main { display: flex; flex-direction: column; gap: 1.4cqw; min-width: 0; }
#w-heading { font-family: var(--font-display); font-size: 2.6cqw; color: var(--accent); letter-spacing: .08em; margin: 0; }
#w-game-title { font-family: var(--font-display); font-size: 5.4cqw; margin: 0; line-height: 1.1; text-wrap: balance; }
#w-message p { margin: 0; font-size: 2.8cqw; line-height: 1.5; }
#w-form { display: flex; flex-direction: column; gap: 1.4cqw; margin-top: .6cqw; }
.name-row { display: flex; align-items: center; gap: 1.6cqw; }
.name-row label { font-family: var(--font-display); font-size: 3cqw; white-space: nowrap; }
.btn-row { display: flex; gap: 1.6cqw; flex-wrap: wrap; }
#w-error { color: var(--accent); font-size: 2.6cqw; min-height: 1em; margin: 0; }
/* ---------- 졸업사진 (환영 카드) ---------- */
.photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; }
.flip { width: 64cqw; max-width: 100%; aspect-ratio: 144 / 110; perspective: 160cqw; }
.flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotate(-2deg);
  transition: transform .9s cubic-bezier(.3, .7, .2, 1);
}
.flip.flipped .flip-inner { transform: rotate(1.5deg) rotateY(180deg); }
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: .5cqw;
  box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, .6);
}
.front {
  border: 0; margin: 0; font: inherit; cursor: pointer;
  background: #e9e0cc;
  padding: 2.2cqw 2.2cqw 0;
  display: flex; flex-direction: column; align-items: stretch;
}
.front { position: absolute; overflow: hidden; }
.front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 252, 240, .22) 45%, rgba(255, 255, 255, .38) 50%, rgba(255, 252, 240, .22) 55%, transparent 70%);
  background-size: 250% 100%; background-position: 60% 0;
  transition: background-position .8s ease;
}
.front:hover::after { background-position: 40% 0; }
.front:focus-visible { outline: .6cqw solid var(--accent-2); outline-offset: .6cqw; }
.front canvas { width: 100%; display: block; image-rendering: pixelated; }
.caption { font-family: "Nanum Pen Script", var(--font-body); font-size: 4cqw; color: #5a4e40; padding-top: .8cqw; text-align: center; }
.back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(180deg, transparent 0 5.4cqw, rgba(120, 100, 70, .12) 5.4cqw 5.6cqw),
    #eee5d0;
  padding: 3cqw 4cqw;
  display: flex; flex-direction: column; gap: 1.6cqw;
  color: #2b3a67;
  font-family: "Nanum Pen Script", var(--font-body);
}
#w-back-heading { margin: 0; font-size: 4.2cqw; color: #6a5e50; }
#w-form { display: flex; flex-direction: column; gap: 1.6cqw; }
.back .row { display: flex; gap: 4cqw; }
.pen-field { display: flex; align-items: baseline; gap: 1.2cqw; font-size: 5.2cqw; }
.pen-field.wide { width: 100%; }
.pen {
  font-family: inherit; font-size: 5.6cqw; color: #2b3a67;
  background: transparent; border: 0; border-bottom: .4cqw solid #8a7f6c; border-radius: 0;
  width: 9cqw; padding: 0; text-align: center;
}
.pen-field.wide .pen { flex: 1; min-width: 0; text-align: left; }
.pen:focus { outline: none; border-bottom-color: #2b3a67; }
.back #w-error { margin: 0; min-height: 1em; color: #b3402e; font-family: var(--font-body); font-size: 2.8cqw; }
.hint-line { margin: 0; color: var(--chalk); font-size: 3cqw; animation: blink 1.6s steps(2) infinite; }
.link { all: unset; cursor: pointer; color: var(--muted); font-size: 2.6cqw; text-decoration: underline; }
.link:focus-visible { outline: .4cqw solid var(--accent-2); }
#welcome { background: radial-gradient(ellipse at 50% 40%, #2a2236, #0c0911 75%); }

/* ---------- 캐릭터 만들기 (환영 카드 전 화면) ---------- */
#create {
  background:
    radial-gradient(ellipse 40% 60% at 27% 55%, rgba(242, 193, 78, .16), transparent 70%),
    linear-gradient(180deg, #1d1729, #0f0b16);
}
.create { width: 100%; display: grid; grid-template-columns: 36% 1fr; gap: 4cqw; align-items: center; }
.create-preview { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; }
.stage {
  width: 100%; aspect-ratio: 1; max-width: 100%;
  display: grid; place-items: center;
  border-radius: 50% / 22%;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(255, 240, 200, .35), transparent 60%),
    repeating-linear-gradient(0deg, #c08650 0 2px, #d9a066 2px 25%);
  box-shadow: 0 0 0 .6cqw var(--ink), 0 0 0 1.2cqw #4a3e60;
}
.stage canvas { height: 84%; width: auto; max-width: 100%; image-rendering: pixelated; }
#c-caption:empty { display: none; }
#c-caption { margin: 0; font-family: var(--font-display); font-size: 3.4cqw; color: var(--accent-2); }
.create-main { display: flex; flex-direction: column; gap: 1.8cqw; min-width: 0; }
.kicker { margin: 0; font-family: var(--font-display); font-size: 2.6cqw; letter-spacing: .08em; color: var(--muted); }
#c-heading { margin: 0 0 .6cqw; font-family: var(--font-display); font-weight: normal; font-size: 5.4cqw; line-height: 1.1; text-wrap: balance; }
.opt-row { display: flex; align-items: center; gap: 1.6cqw; }
.opt-label { font-family: var(--font-display); font-size: 3cqw; width: 9cqw; flex: none; color: var(--muted); }
/* 십자키로 고를 때 지금 줄 표시 (v143) */
#create.keynav .opt-row.sel { outline: .3cqw dashed var(--accent); outline-offset: .6cqw; }
#create.keynav .opt-row.sel .opt-label { color: var(--chalk); }
#create.keynav .btn-row.sel .btn.sel { outline: .4cqw dashed var(--accent); outline-offset: .4cqw; }
.seg { display: flex; flex-wrap: wrap; gap: .9cqw; min-width: 0; }
.seg button { min-width: 2.2em; text-align: center;
}
.seg button {
  all: unset; cursor: pointer;
  font-family: var(--font-body); font-size: 2.9cqw;
  padding: .6cqw 1.8cqw; border-radius: .8cqw;
  box-shadow: inset 0 0 0 .3cqw #6a5c84; color: var(--chalk);
}
.seg button.on { background: var(--chalk); color: var(--ink); box-shadow: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 1cqw; }
.swatches button {
  all: unset; cursor: pointer;
  width: 4cqw; height: 4cqw; border-radius: 50%;
  box-shadow: inset 0 0 0 .3cqw rgba(0, 0, 0, .35);
}
.swatches button.on { outline: .5cqw solid var(--chalk); outline-offset: .4cqw; }
.seg button:focus-visible, .swatches button:focus-visible { outline: .5cqw solid var(--accent-2); outline-offset: .4cqw; }
#create .btn { background: var(--chalk); color: var(--ink); box-shadow: 0 .6cqw 0 #6a5c84; }
#create .btn.ghost { background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 .4cqw var(--chalk); }
#w-badges { display: flex; gap: 1cqw; flex-wrap: wrap; }
.badge { background: var(--accent-2); color: var(--ink); font-family: var(--font-display); font-size: 2.2cqw; padding: .3cqw 1.4cqw; border-radius: 1cqw; }

/* ---------- 메뉴 ---------- */
.tabs { display: flex; gap: 1cqw; border-bottom: .5cqw solid var(--ink); }
.tab {
  all: unset; cursor: pointer;
  font-family: var(--font-display); font-size: 3.4cqw;
  padding: .8cqw 2.4cqw; border-radius: 1cqw 1cqw 0 0; color: #7a6f8c;
}
.tab.on { background: var(--ink); color: var(--paper); }
/* 안내방송 (game.js 의 broadcastScene): 화면 위쪽 띠 */
#broadcast {
  position: absolute; left: 6cqw; right: 6cqw; top: 7cqw; z-index: 5;
  display: flex; gap: 2cqw; align-items: baseline; padding: 1.8cqw 2.6cqw;
  background: rgba(14, 12, 10, .86); color: #efe4cc; border: .4cqw solid #6b2a24;
  font-family: var(--font-body); font-size: 3.1cqw; line-height: 1.5; box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.6);
  animation: bc-in .35s ease-out;
}
#broadcast b { color: #d0574c; font-family: var(--font-display); white-space: nowrap; letter-spacing: .06em; }
@keyframes bc-in { from { opacity: 0; transform: translateY(-1.5cqw); } }

/* 지도 (M) */
.map-panel { width: min(100%, 92cqw); gap: 1.2cqw; padding: 2.4cqw 3cqw; }
#map-title { font-family: var(--font-display); font-size: 4cqw; margin: 0; }
#map-canvas { width: auto; height: auto; max-width: 100%; max-height: 42cqw; margin: 0 auto; display: block; }
#map-note { margin: 0; font-size: 2.6cqw; opacity: .75; }
#menu-title { font-family: var(--font-display); font-size: 4cqw; margin: 0; }
#menu-list { display: flex; flex-direction: column; gap: 1.4cqw; overflow-y: auto; max-height: 38cqw; min-height: 12cqw; }
.entry { display: flex; flex-direction: column; gap: .4cqw; padding-bottom: 1.2cqw; border-bottom: .3cqw dashed #cbbfa5; }
.entry strong { font-family: var(--font-display); font-weight: normal; font-size: 3.4cqw; }
.entry span { font-size: 3cqw; line-height: 1.5; }
.empty { color: #8a7f9c; margin: 0; }
#menu-status { font-size: 2.8cqw; color: #3f8f4f; min-height: 1em; margin: 0; }

/* ---------- 입력 ---------- */
#input-prompt { margin: 0; font-size: 3.6cqw; }

/* ---------- 엔딩 ---------- */
#ending { background: #07050b; place-items: center; text-align: center; }
#ending .inner { max-width: 80cqw; display: flex; flex-direction: column; gap: 2.4cqw; align-items: center; }
#ending-label { font-family: var(--font-display); letter-spacing: .4em; font-size: 3cqw; color: var(--muted); animation: rise 1s both; }
#ending[data-kind="true"] #ending-label { color: var(--accent-2); }
#ending[data-kind="gameover"] #ending-label { color: #e8465a; }
#ending-title { font-family: var(--font-display); font-size: 7cqw; margin: 0; color: var(--chalk); animation: rise 1s .2s both; text-wrap: balance; }
#ending-text p { margin: 0 0 1.2cqw; font-size: 3.4cqw; line-height: 1.6; color: #cfc6de; animation: rise 1s both; word-break: keep-all; }
#ending-buttons { display: flex; flex-direction: column; gap: 1.6cqw; animation: rise 1s both; margin-top: 1.6cqw; }
#ending .btn { background: var(--chalk); color: var(--ink); box-shadow: none; }
@keyframes rise { from { opacity: 0; transform: translateY(2cqw); } }

/* ---------- 데이터 오류 표시 ---------- */
#errors {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  background: #5a1620; color: #ffe1e1; font-size: 2.6cqw;
  padding: 1.4cqw 2cqw; max-height: 40%; overflow: auto;
}
#errors pre { margin: .6cqw 0 0; white-space: pre-wrap; font-family: ui-monospace, monospace; }
#errors button { float: right; }

/* ---------- 아래 안내 / 터치 패드 ---------- */
.hint { margin: 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; }
.hint kbd {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--night-2); border: 1px solid #4a3e60; border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; color: var(--chalk);
}
.pad { display: none; justify-content: space-between; align-items: center; padding: 4px 8px; touch-action: none; }
.dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); }
.dpad button, .ab button {
  all: unset; display: grid; place-items: center;
  background: #3a2f4c; color: var(--chalk); font-size: 18px;
  box-shadow: inset 0 -4px 0 #241c31;
}
.dpad button:active, .ab button:active { background: #514266; }
.dpad [data-pad="up"] { grid-area: 1 / 2; border-radius: 8px 8px 0 0; }
.dpad [data-pad="left"] { grid-area: 2 / 1; border-radius: 8px 0 0 8px; }
.dpad [data-pad="right"] { grid-area: 2 / 3; border-radius: 0 8px 8px 0; }
.dpad [data-pad="down"] { grid-area: 3 / 2; border-radius: 0 0 8px 8px; }
.dpad .mid { grid-area: 2 / 2; background: #3a2f4c; }
.ab { display: flex; gap: 14px; align-items: center; transform: rotate(-18deg); }
.ab button { width: 60px; height: 60px; border-radius: 50%; font-family: var(--font-display); font-size: 20px; }
@media (max-width: 380px) {
  .dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .ab button { width: 52px; height: 52px; }
}
.ab [data-pad="confirm"] { background: var(--accent); box-shadow: inset 0 -4px 0 #9c342c; margin-top: -26px; }

.hint.touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .pad { display: flex; }
  .hint.keys { display: none; }
  /* 모바일 (v141): 게임 화면 바로 아래 조작 안내, 버튼은 맨 아래쪽, A·B 는 오른쪽 끝 (게임보이 어드밴스 배치) */
  .wrap { min-height: calc(100dvh - 32px); }
  .pad { margin-top: auto; padding: 4px 0 4px 8px; }
  .hint.touch { display: block; }
  /* 길게 눌러도 글자 선택·복사 메뉴가 뜨지 않게 */
  .pad, .pad *, #game, .hint.touch { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
}

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

/* =====================================================================
   테마: 어둡고 덜 현상된 사진 / 닳고 해진 괴담책
   잿빛 바탕 + 긁힘·얼룩·필름 입자. 위 기본 스타일을 덮어씁니다.
   ===================================================================== */
:root {
  --night: #141312;        /* 바깥 배경 (잿빛 검정) */
  --night-2: #2a2825;
  --ink: #1a1917;          /* 테두리, 글자 */
  --paper: #c9c2b2;        /* 바랜 종이 */
  --paper-2: #b3ab99;      /* 종이 그늘 */
  --chalk: #d6d0c4;        /* 어두운 바탕 위 글자 */
  --muted: #8a857b;
  --accent: #7c2420;       /* 말라붙은 붉은색 */
  --accent-2: #b5a582;     /* 바랜 금박 */
  --font-display: "Song Myung", "Nanum Myeongjo", serif;
  --font-body: "Nanum Myeongjo", "Gowun Batang", serif;
  --tex-scratch: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22600%22%20height%3D%22600%22%3E%3Cpath%20d%3D%22M271.4%20112.3%20L271.3%20188.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M271.3%20193.1%20L271.1%20294.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.33%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M271.1%20298.8%20L270.9%20408.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.40%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M270.9%20416.6%20L270.8%20505.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.29%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M270.8%20512.1%20L270.7%20547.8%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.47%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M270.7%20554.0%20L270.6%20613.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M270.6%20618.5%20L270.5%20693.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.36%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M152.4%20169.8%20L150.5%20250.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M146.6%20422.5%20L143.8%20540.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.27%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M143.8%20546.9%20L142.6%20601.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.33%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M142.6%20607.3%20L141.6%20647.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M141.6%20651.6%20L139.9%20725.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M461.7%2071.6%20L461.1%20190.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.47%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M461.1%20198.7%20L460.9%20230.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.50%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M460.9%20230.8%20L460.7%20273.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M460.7%20280.6%20L460.4%20345.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M460.4%20345.5%20L460.0%20408.6%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M460.0%20415.3%20L459.8%20457.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.41%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M459.8%20464.8%20L459.3%20568.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.30%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M232.9%2089.9%20L232.0%20129.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.31%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M232.0%20131.8%20L229.7%20235.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.32%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M229.7%20243.4%20L227.0%20361.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.37%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M227.0%20363.6%20L224.5%20476.1%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M149.4%20-36.5%20L149.6%2081.1%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M149.6%2088.9%20L149.8%20178.1%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.40%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M149.8%20182.8%20L149.9%20295.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.34%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M149.9%20303.6%20L150.0%20335.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.37%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M150.0%20338.1%20L150.2%20458.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.39%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M442.3%20154.1%20L443.5%20215.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.48%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M443.5%20223.3%20L444.2%20256.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.25%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M444.2%20259.0%20L444.9%20290.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.27%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M444.9%20298.1%20L447.1%20407.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.35%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M447.1%20410.8%20L449.3%20516.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.44%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M449.3%20518.8%20L450.1%20556.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.49%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M451.9%20648.0%20L452.5%20679.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.42%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M452.5%20683.1%20L454.5%20781.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.48%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M195.8%20252.7%20L195.6%20317.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.33%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M195.3%20422.6%20L195.1%20462.8%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.48%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M195.1%20465.8%20L194.9%20542.6%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.43%22%20stroke-width%3D%220.7%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M497.2%20166.9%20L486.9%20183.3%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.52%22%20stroke-width%3D%220.9%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M389.6%20338.4%20L395.5%20357.6%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.36%22%20stroke-width%3D%220.9%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M142.4%2084.5%20L139.7%2091.0%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.38%22%20stroke-width%3D%220.9%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M575.1%20410.7%20L575.9%20421.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.56%22%20stroke-width%3D%220.9%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M320.9%2021.7%20L312.5%2028.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.47%22%20stroke-width%3D%220.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M52.3%20559.6%20L72.4%20568.3%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.41%22%20stroke-width%3D%220.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M226.1%20341.3%20L205.7%20356.4%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.49%22%20stroke-width%3D%220.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M59.4%20519.7%20L36.5%20525.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.41%22%20stroke-width%3D%220.9%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M588.3%20586.4%20L574.2%20597.3%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.43%22%20stroke-width%3D%220.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M209.1%2049.7%20L206.6%2065.2%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.50%22%20stroke-width%3D%220.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M136.0%20520.9%20L159.1%20519.6%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.20%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M131.8%20530.5%20L159.5%20528.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.24%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M131.9%20519.3%20L159.2%20517.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.24%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M132.0%20525.6%20L149.6%20524.6%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.27%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M131.2%20521.7%20L142.8%20521.1%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.28%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M151.7%20409.4%20L179.1%20419.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.22%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M156.1%20397.2%20L174.6%20404.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.23%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M157.4%20394.0%20L184.9%20404.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.19%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M151.7%20408.4%20L170.7%20415.6%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.24%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M156.0%20394.3%20L174.6%20401.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.29%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M150.6%20410.6%20L163.6%20415.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.14%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M263.2%20491.9%20L259.4%20503.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.29%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M269.0%20486.3%20L261.1%20510.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.15%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M266.1%20489.1%20L258.8%20511.1%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M257.1%20491.3%20L253.8%20501.1%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.14%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M261.2%20485.9%20L256.9%20498.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.22%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M261.7%20488.8%20L256.6%20504.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.22%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M266.2%20493.1%20L262.2%20504.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.23%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M259.2%20490.5%20L250.8%20515.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.27%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M135.5%20445.6%20L162.3%20452.3%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M145.6%20439.7%20L155.4%20442.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.14%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M140.9%20436.3%20L156.9%20440.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.29%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M135.9%20444.4%20L158.7%20450.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.23%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M138.9%20450.5%20L148.7%20452.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M140.4%20451.3%20L155.9%20455.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.23%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M208.8%20591.7%20L217.3%20594.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.21%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M202.1%20599.5%20L212.9%20602.4%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.16%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M209.2%20607.1%20L238.0%20614.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.14%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M208.0%20590.6%20L235.9%20598.2%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.26%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M207.2%20595.9%20L224.8%20600.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.20%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M207.9%20601.7%20L215.9%20603.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.27%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Cpath%20d%3D%22M210.5%20593.8%20L227.9%20598.5%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.19%22%20stroke-width%3D%220.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22butt%22/%3E%3Ccircle%20cx%3D%22117%22%20cy%3D%2299%22%20r%3D%220.9%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.31%22/%3E%3Ccircle%20cx%3D%2251%22%20cy%3D%22505%22%20r%3D%221.2%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.53%22/%3E%3Ccircle%20cx%3D%22342%22%20cy%3D%22115%22%20r%3D%220.9%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.48%22/%3E%3Ccircle%20cx%3D%22155%22%20cy%3D%22547%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.49%22/%3E%3Ccircle%20cx%3D%22243%22%20cy%3D%22538%22%20r%3D%221.2%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.33%22/%3E%3Ccircle%20cx%3D%22259%22%20cy%3D%22109%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.22%22/%3E%3Ccircle%20cx%3D%22205%22%20cy%3D%22281%22%20r%3D%220.4%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.55%22/%3E%3Ccircle%20cx%3D%22542%22%20cy%3D%2230%22%20r%3D%220.6%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.30%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22244%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.34%22/%3E%3Ccircle%20cx%3D%22600%22%20cy%3D%22385%22%20r%3D%221.0%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.54%22/%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22369%22%20r%3D%221.1%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.36%22/%3E%3Ccircle%20cx%3D%22303%22%20cy%3D%22457%22%20r%3D%221.0%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.23%22/%3E%3Ccircle%20cx%3D%22151%22%20cy%3D%22543%22%20r%3D%220.9%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%22312%22%20cy%3D%22508%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.48%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%22359%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.34%22/%3E%3Ccircle%20cx%3D%22563%22%20cy%3D%22232%22%20r%3D%221.3%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.39%22/%3E%3Ccircle%20cx%3D%22358%22%20cy%3D%22258%22%20r%3D%220.8%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.38%22/%3E%3Ccircle%20cx%3D%22359%22%20cy%3D%22219%22%20r%3D%220.7%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.29%22/%3E%3Ccircle%20cx%3D%22558%22%20cy%3D%22398%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.20%22/%3E%3Ccircle%20cx%3D%22147%22%20cy%3D%2226%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.34%22/%3E%3Ccircle%20cx%3D%22539%22%20cy%3D%22449%22%20r%3D%220.4%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.53%22/%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%22543%22%20r%3D%220.8%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.29%22/%3E%3Ccircle%20cx%3D%22453%22%20cy%3D%2227%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.52%22/%3E%3Ccircle%20cx%3D%2287%22%20cy%3D%22576%22%20r%3D%220.6%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.24%22/%3E%3Ccircle%20cx%3D%22375%22%20cy%3D%22273%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.32%22/%3E%3Ccircle%20cx%3D%2293%22%20cy%3D%22218%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.36%22/%3E%3Ccircle%20cx%3D%22157%22%20cy%3D%22349%22%20r%3D%220.8%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.39%22/%3E%3Ccircle%20cx%3D%22599%22%20cy%3D%22572%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.37%22/%3E%3Ccircle%20cx%3D%22302%22%20cy%3D%22185%22%20r%3D%220.9%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.30%22/%3E%3Ccircle%20cx%3D%22366%22%20cy%3D%22435%22%20r%3D%221.0%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.42%22/%3E%3Ccircle%20cx%3D%22452%22%20cy%3D%22114%22%20r%3D%220.6%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.52%22/%3E%3Ccircle%20cx%3D%22527%22%20cy%3D%2224%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.29%22/%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2223%22%20r%3D%220.6%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.23%22/%3E%3Ccircle%20cx%3D%2252%22%20cy%3D%22406%22%20r%3D%220.9%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.54%22/%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%22212%22%20r%3D%220.7%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.46%22/%3E%3Ccircle%20cx%3D%22503%22%20cy%3D%2245%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.49%22/%3E%3Ccircle%20cx%3D%22461%22%20cy%3D%22267%22%20r%3D%221.1%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.48%22/%3E%3Ccircle%20cx%3D%22221%22%20cy%3D%22392%22%20r%3D%221.3%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.30%22/%3E%3Ccircle%20cx%3D%22455%22%20cy%3D%22496%22%20r%3D%220.6%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.33%22/%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%22525%22%20r%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%22341%22%20cy%3D%22489%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.23%22/%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22397%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.37%22/%3E%3Ccircle%20cx%3D%22458%22%20cy%3D%22197%22%20r%3D%221.2%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.33%22/%3E%3Ccircle%20cx%3D%22436%22%20cy%3D%22220%22%20r%3D%220.5%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.35%22/%3E%3Ccircle%20cx%3D%22357%22%20cy%3D%22541%22%20r%3D%221.0%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.35%22/%3E%3C/svg%3E");
  --tex-noise: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%200%20.5%20%200%200%200%201.4%20-.45%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E");
  --tex-stain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22500%22%20height%3D%22500%22%3E%3Cfilter%20id%3D%22s%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.012%22%20numOctaves%3D%224%22%20seed%3D%223%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.32%20%200%200%200%200%20.25%20%200%200%200%200%20.16%20%200%200%200%202.2%20-1.15%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23s%29%22/%3E%3C/svg%3E");
}

body {
  background:
    var(--tex-scratch),
    var(--tex-stain),
    var(--tex-noise),
    radial-gradient(ellipse at 50% 30%, #2b2926, #131211 72%, #0a0a09);
  background-size: 600px 600px, 900px 900px, 220px 220px, auto;
  background-blend-mode: soft-light, multiply, overlay, normal;
  background-color: var(--night);
}

/* 게임 화면: 낡은 사진 테두리 + 필름 입자, 긁힘, 가장자리 어둠 */
#game {
  background: #0e0d0c;
  border: 4px solid #0c0b0a;
  outline: 2px solid #4a4640;
  border-radius: 2px;
  box-shadow: 0 0 0 6px #1d1b19, 0 10px 30px rgba(0, 0, 0, .7);
}
#game::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none; z-index: 25;
  background:
    var(--tex-scratch),
    var(--tex-noise),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(8, 7, 6, .55) 100%),
    linear-gradient(100deg, rgba(120, 90, 50, .10), transparent 30%, transparent 75%, rgba(60, 50, 40, .14));
  background-size: 120% 120%, 160px 160px, auto, auto;
  mix-blend-mode: normal;
  opacity: .55;
  animation: grain .9s steps(8) infinite;
}
/* 카메라가 떨리듯 몇 픽셀만 흔들림 (긁힘 자리는 그대로) */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-1px, 1px); }
  25% { transform: translate(1px, 0); }
  37% { transform: translate(0, -1px); }
  50% { transform: translate(1px, 1px); }
  62% { transform: translate(-1px, 0); }
  75% { transform: translate(0, 1px); }
  87% { transform: translate(1px, -1px); }
}

/* 종이 질감: 대화창, 패널, 카드 */
#dialog::before, #choices, .panel, #toast {
  background:
    var(--tex-stain),
    var(--tex-noise),
    linear-gradient(180deg, #cec7b6, #b8b09e);
  background-size: 1400px 1400px, 220px 220px, auto;
  background-blend-mode: multiply, overlay, normal;
  color: var(--ink);
  border: .5cqw solid #2a2724;
  border-radius: .3cqw;
  box-shadow: inset 0 0 3cqw rgba(60, 45, 25, .45), 0 .8cqw 2cqw rgba(0, 0, 0, .55);
}
/* 대화창: 종이는 ::before 에만 (이름표가 잘리지 않도록). 모서리는 자르지 않음 */
#dialog { background: none; border: 0; box-shadow: none; isolation: isolate; font-family: var(--font-body); line-height: 1.65; }
#dialog::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  font-family: var(--font-body);
  line-height: 1.65;
}
#dialog::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--tex-scratch); background-size: 400px 400px; mix-blend-mode: multiply; opacity: .5;
  filter: invert(1);
}
#dialog-speaker {
  background: var(--ink); color: var(--paper);
  border-radius: 0; font-family: var(--font-display); letter-spacing: .06em;
}
#dialog-more { color: var(--accent); }
#toast { font-family: var(--font-display); letter-spacing: .05em; }
.choice { font-family: var(--font-body); color: var(--ink); border-radius: 0; }
.choice.on { background: rgba(26, 25, 23, .14); }
.choice.on::before { color: var(--accent); }

.overlay { background: rgba(10, 9, 8, .78); }
.panel { position: relative; }
.panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--tex-scratch); background-size: 400px 400px; filter: invert(1); mix-blend-mode: multiply; opacity: .45;
}
.panel > * { position: relative; }
.pause h2, #menu-title { font-family: var(--font-display); letter-spacing: .12em; font-weight: normal; }
#pause-msg { color: #5a544a; }

/* 버튼: 먹으로 찍은 듯한 직사각형 */
.btn {
  font-family: var(--font-display); letter-spacing: .06em;
  background: #22201d; color: #d9d2c3;
  border-radius: 0;
  box-shadow: inset 0 0 0 .25cqw #3b3732, 0 .4cqw 0 #0c0b0a;
}
.btn:hover { background: #2e2b27; }
.btn:active { box-shadow: inset 0 0 0 .25cqw #3b3732, 0 .1cqw 0 #0c0b0a; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 .3cqw rgba(26, 25, 23, .7); }
.btn:focus-visible, .choice:focus-visible, .tab:focus-visible { outline: .4cqw dashed var(--accent); outline-offset: .4cqw; }
.pause-list .slot { font-family: var(--font-body); }
input.field { background: #ddd6c6; border: .4cqw solid #2a2724; border-radius: 0; font-family: var(--font-body); }
input.field:focus { outline: .4cqw dashed var(--accent); }

#pause-btn { background: rgba(14, 13, 12, .6); color: #cfc8b8; border-radius: 0; box-shadow: inset 0 0 0 1px #4a4640; }

/* 메뉴 */
.tabs { border-bottom-color: #2a2724; }
.tab { border-radius: 0; color: #6b655b; font-family: var(--font-display); }
.tab.on { background: var(--ink); color: var(--paper); }
.entry { border-bottom: .3cqw dashed rgba(42, 39, 36, .45); }
.empty { color: #6b655b; }

/* 첫 화면 (캐릭터 만들기, 졸업사진) */
#create, #welcome {
  background:
    var(--tex-scratch),
    var(--tex-stain),
    var(--tex-noise),
    radial-gradient(ellipse at 50% 45%, #2d2b28, #0f0e0d 78%);
  background-size: 600px 600px, 700px 700px, 220px 220px, auto;
  background-blend-mode: soft-light, multiply, overlay, normal;
}
.stage {
  background:
    radial-gradient(ellipse at 50% 85%, rgba(230, 215, 180, .22), transparent 60%),
    repeating-linear-gradient(0deg, #6e5a43 0 2px, #85705a 2px 25%);
  box-shadow: 0 0 0 .6cqw #0c0b0a, 0 0 0 1.2cqw #3e3a35;
  filter: sepia(.35) saturate(.7) brightness(.85);
}
#c-caption { color: var(--accent-2); font-family: var(--font-display); }
.kicker, .opt-label { color: var(--muted); font-family: var(--font-display); }
#c-heading { font-family: var(--font-display); letter-spacing: .04em; }
.seg button { box-shadow: inset 0 0 0 .25cqw #5a554d; color: var(--chalk); border-radius: 0; font-family: var(--font-body); }
.seg button.on { background: var(--chalk); color: var(--ink); }
#create .btn { background: var(--chalk); color: var(--ink); box-shadow: 0 .4cqw 0 #4a4640; }
#create .btn.ghost { background: transparent; color: var(--chalk); box-shadow: inset 0 0 0 .3cqw var(--chalk); }
.badge { background: var(--accent-2); color: var(--ink); border-radius: 0; font-family: var(--font-display); }

/* 졸업사진: 더 바래고 얼룩진 인화지 */
.front { background: #cfc6b2; }
.front canvas { filter: sepia(.45) contrast(.92) brightness(.9); }
.front::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--tex-scratch), var(--tex-stain), radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(50, 35, 20, .45));
  background-size: 300px 300px, 400px 400px, auto;
  mix-blend-mode: multiply; opacity: .8;
}
.caption { color: #4a4034; }
.back {
  background:
    var(--tex-stain),
    repeating-linear-gradient(180deg, transparent 0 5.4cqw, rgba(80, 65, 45, .16) 5.4cqw 5.6cqw),
    #d3cab6;
  background-size: 400px 400px, auto, auto;
  background-blend-mode: multiply, normal, normal;
  color: #2a2a3a;
}
.pen { color: #23233a; border-bottom-color: #6e6455; }
.hint-line { color: var(--chalk); font-family: var(--font-body); }
.link { color: var(--muted); }

/* 엔딩 */
#ending {
  background:
    var(--tex-scratch), var(--tex-noise),
    radial-gradient(ellipse at 50% 50%, #1a1816, #070606 80%);
  background-size: 600px 600px, 220px 220px, auto;
  background-blend-mode: soft-light, overlay, normal;
}
#ending-title { font-family: var(--font-display); letter-spacing: .08em; }
#ending-text p { color: #bdb6a8; font-family: var(--font-body); }
#ending[data-kind="gameover"] #ending-label { color: #a0342c; }
#ending[data-kind="true"] #ending-label { color: var(--accent-2); }
#ending .btn { background: var(--chalk); color: var(--ink); }

/* 아래 안내 / 터치 패드 */
.hint { color: var(--muted); font-family: var(--font-body); }
.hint kbd { background: #23211e; border-color: #4a4640; color: var(--chalk); border-radius: 2px; }
.dpad button, .ab button, .dpad .mid { background: #2d2a26; color: var(--chalk); box-shadow: inset 0 -4px 0 #181715; }
.dpad button:active, .ab button:active { background: #3d3934; }
.ab [data-pad="confirm"] { background: var(--accent); box-shadow: inset 0 -4px 0 #4a1512; }

/* 게임 화면 색을 살짝 빼서 오래된 인화 사진처럼 */
#screen { filter: saturate(.72) sepia(.18) contrast(1.04); }

@media (prefers-reduced-motion: reduce) { #game::after { animation: none; } }
#toast { top: 8.5cqw; }

/* ---------- 안내 문구 (튜토리얼) : 대화창이 떠 있으면 숨김 ---------- */
#hint {
  position: absolute; left: 0; right: 0; bottom: 3cqw; margin: 0 auto; width: fit-content;
  max-width: 90%; padding: .9cqw 2.4cqw;
  background: rgba(14, 13, 12, .78); color: #d8d1c0;
  border: .3cqw solid #5a5348; border-left: .9cqw solid var(--accent);
  font-family: var(--font-body); font-size: 2.9cqw; line-height: 1.5; text-align: center;
  pointer-events: none; white-space: pre-line;
}
#dialog:not([hidden]) ~ #hint { display: none; }

/* 타이틀 화면: 검은 바탕 원고지 */
#title-screen { background: #050505; z-index: 40; cursor: pointer; }
#title-canvas { width: 100%; height: 100%; display: block; }

/* 눈을 감은 채(검은 화면) 나오는 안내 문장은 눈꺼풀 위에 보이게 */
#game.eyes-text #dialog { z-index: 7; }

/* ---------- 시점전환 뒤 (uniform_on): 화면 긁힘 없음, 대화창은 원고지 (한 칸에 한 글자) ---------- */
#game.dollview::after { background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(8, 7, 6, .35) 100%); animation: none; opacity: 1; }
#game.dollview #dialog::after { display: none; }
#game.dollview #dialog { --cw: 1.05em; --lh: 1.6em; --gap: .3em; line-height: 1.6; }
#game.dollview #dialog::before {
  --red: rgba(196, 64, 52, .6);
  background-color: #f4efe2; background-blend-mode: normal;
  background-image:
    linear-gradient(180deg, #f4efe2 0 var(--gap), transparent var(--gap)),
    linear-gradient(180deg, transparent var(--gap), var(--red) var(--gap), var(--red) calc(var(--gap) + 1px), transparent calc(var(--gap) + 1px)),
    linear-gradient(0deg, var(--red) 1px, transparent 1px),
    linear-gradient(90deg, var(--red) 1px, transparent 1px);
  background-size: 100% var(--lh), 100% var(--lh), 100% var(--lh), var(--cw) var(--lh);
  background-position: 0 calc(3cqw - .3em), 0 calc(3cqw - .3em), 0 calc(3cqw - .3em), 4cqw calc(3cqw - .3em);
  border: 2px solid rgba(196, 64, 52, .75); box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .55);
}
#game.dollview #dialog-text { white-space: normal; }
#game.dollview .gc { display: inline-block; width: var(--cw); text-align: center; vertical-align: top; height: var(--lh); line-height: calc(var(--lh) + var(--gap)); }
/* 소지품: 고른 줄, 쓸 수 있는 아이템 */
.entry.on { background: rgba(26, 25, 23, .1); outline: .3cqw solid rgba(26, 25, 23, .25); }
.entry.usable { cursor: pointer; }
.entry em { font-style: normal; font-size: 2.6cqw; color: var(--accent); }

/* ---------- 메모지 단서 (줄 노트): 화면 가운데 ---------- */
#note { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(8, 7, 6, .55); cursor: pointer; }
#note[hidden] { display: none; }
.note-paper {
  --lh: 6.2cqw;
  position: relative; width: 62%; min-height: 34cqw; padding: calc(var(--lh) * .9) 5cqw calc(var(--lh) * .9) 9cqw; box-sizing: border-box;
  background-color: #f7f3e6;
  background-image:
    linear-gradient(90deg, transparent 6.6cqw, rgba(200, 70, 70, .55) 6.6cqw, rgba(200, 70, 70, .55) calc(6.6cqw + 2px), transparent calc(6.6cqw + 2px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--lh) - 1px), rgba(90, 130, 190, .45) calc(var(--lh) - 1px), rgba(90, 130, 190, .45) var(--lh));
  background-position: 0 0, 0 calc(var(--lh) * .9);
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .6); transform: rotate(-1.2deg);
  font-family: "Nanum Pen Script", cursive; font-size: 4.6cqw; line-height: var(--lh); color: #2a2a3a;
}
.note-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.2cqw; background: repeating-linear-gradient(90deg, transparent 0 2cqw, rgba(0,0,0,.08) 2cqw 2.4cqw); }
#note-lines p { margin: 0; white-space: pre-line; }
#note-lines p.me { text-align: right; color: #22305a; }
#note-lines p.them { text-align: left; color: #3a2a2a; font-size: 1.08em; transform: skewX(-6deg); }

/* 엔딩 스코어 (오른쪽 정렬) + 크레딧 (아래에서 위로 천천히) */
#ending-score { align-self: stretch; text-align: right; font-family: var(--font-display); font-size: 3.6cqw; letter-spacing: .12em; color: var(--chalk); animation: rise 1s 1.2s both; }
#ending-credits { align-self: stretch; height: 22cqw; overflow: hidden; position: relative; animation: rise 1s 1.8s both;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
#ending-credits .roll { position: absolute; left: 0; right: 0; top: 100%; animation: credits-roll 18s 2.4s linear forwards; }
#ending-credits p { margin: 0 0 2.4cqw; font-size: 3cqw; color: #bdb6a8; font-family: var(--font-body); }
@keyframes credits-roll { to { transform: translateY(calc(-100% - 22cqw)); } }
#ending[data-kind="happy02"] #ending-label, #ending[data-kind="happy03"] #ending-label { color: #e9a3b6; }

/* 시스템 메시지(Tip): 말상자 대신 화면 아래 안내 띠 (#hint 와 같은 모양), Z 로 넘김 */
#game #dialog.tip {
  left: 0; right: 0; bottom: 3cqw; margin: 0 auto; width: fit-content; max-width: 90%; min-height: 0;
  padding: .9cqw 4.2cqw .9cqw 2.4cqw; border-radius: 0;
  background: rgba(14, 13, 12, .78); color: #d8d1c0;
  border: .3cqw solid #5a5348; border-left: .9cqw solid var(--accent); box-shadow: none;
  font-family: var(--font-body); font-size: 2.9cqw; line-height: 1.5; text-align: center;
}
#game #dialog.tip::before, #game #dialog.tip::after { display: none; }
#game #dialog.tip #dialog-speaker { display: none; }
#game #dialog.tip #dialog-text { white-space: pre-line; }
#game #dialog.tip #dialog-more { right: 1.2cqw; bottom: .9cqw; font-size: 2cqw; }
/* 엔딩 번호와 제목 두 줄은 왼쪽 정렬 (Lee v98, 모든 엔딩) */
#ending #ending-label, #ending #ending-title { align-self: stretch; text-align: left; }

/* ---------- 종이 그림 창 (game.js 의 showPaper): 가정통신문 / 노트 낙서 / 게임기 화면 ---------- */
.paper-view { position: absolute; inset: 0; z-index: 20; background: rgba(8, 7, 6, .62); overflow-y: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; padding: 3cqw 0; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: #8a8173 transparent; }
.paper-view::-webkit-scrollbar { width: 1cqw; }
.paper-view::-webkit-scrollbar-thumb { background: #8a8173; border-radius: 1cqw; }
.paper-view::-webkit-scrollbar-track { background: transparent; }
.paper-view.console, .paper-view.doodle { justify-content: center; }
/* 가정통신문 (previews/letter-draft-v1.html 과 같은 모양, px → cqw) */
.letter-page {
  flex: none; width: 64cqw; zoom: 1.3; padding: 3.6cqw 4.2cqw 2.8cqw;   /* zoom = 크기 (1.3배) */ position: relative; color: #2b2723; box-sizing: border-box;
  font-family: "Nanum Myeongjo", serif; font-size: 1.45cqw; line-height: 1.75;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(120,90,40,.10), transparent 40%),
    radial-gradient(ellipse at 85% 80%, rgba(110,70,30,.16), transparent 45%),
    #e9e2d0;
  box-shadow: 0 1cqw 3cqw rgba(0,0,0,.6), inset 0 0 6cqw rgba(90,60,20,.22);
  filter: sepia(.12) contrast(1.02);
}
.letter-page::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.18) 0 .3cqw, transparent .6cqw, transparent calc(100% - .6cqw), rgba(0,0,0,.14) calc(100% - .3cqw));
  mix-blend-mode: multiply; }
.letter-page p { margin: 0 0 .9cqw; text-indent: 1em; white-space: pre-line; }
.lt-head { display: grid; grid-template-columns: 6.6cqw 1fr auto; gap: 1.5cqw; align-items: center; border-bottom: .35cqw double #3b342d; padding-bottom: 1cqw; }
.lt-logo { width: 6cqw; height: 6cqw; border-radius: 50%; border: .2cqw solid #3b342d; display: grid; place-items: center; font-family: "Do Hyeon"; font-size: 1.6cqw; }
.lt-logo span { border-top: 1px solid #3b342d; border-bottom: 1px solid #3b342d; padding: 0 .3cqw; }
.lt-title { font-family: "Do Hyeon"; font-size: 3.6cqw; letter-spacing: .35em; line-height: 1; }
.lt-title small { display: block; font-family: "Gowun Dodum"; font-size: 1.15cqw; letter-spacing: .15em; margin-top: .6cqw; color: #5a5148; }
.lt-meta { border-collapse: collapse; font-family: "Gowun Dodum"; font-size: 1.1cqw; line-height: 1.5; }
.lt-meta td { border: 1px solid #5a5148; padding: .2cqw .7cqw; }
.lt-meta td:first-child { background: rgba(60,50,40,.1); }
.letter-page h1 { font-size: 2cqw; font-weight: 700; text-align: center; margin: 1.9cqw 0 1.5cqw; letter-spacing: .04em; }
.letter-page h1::before, .letter-page h1::after { content: "─"; margin: 0 1cqw; color: #8a7f72; }
.lt-items { margin: 1cqw 0 .8cqw; padding: 0; list-style: none; }
.lt-items li { margin: .3cqw 0; }
.lt-items b { display: inline-block; width: 7.8cqw; }
.lt-box { border: 1px solid #5a5148; padding: .8cqw 1.3cqw; margin: .8cqw 0 1cqw; background: rgba(255,255,255,.18); }
.lt-box ol { margin: 0; padding-left: 1.9cqw; }
.lt-box li { margin: .2cqw 0; }
.lt-date { text-align: center; margin: 1.5cqw 0 .4cqw; letter-spacing: .1em; }
.lt-sign { text-align: center; font-size: 2.1cqw; font-weight: 700; letter-spacing: .3em; position: relative; margin: .6cqw 0 1cqw; }
.lt-seal { position: absolute; left: calc(50% + 9.6cqw); top: -1.2cqw; width: 4.8cqw; height: 4.8cqw; border: .25cqw solid rgba(170,40,32,.78); color: rgba(170,40,32,.78);
  font-size: 1.1cqw; line-height: 1.15; letter-spacing: 0; display: grid; place-items: center; text-align: center; white-space: pre-line; transform: rotate(-6deg); border-radius: 3px; mix-blend-mode: multiply; }
.lt-cut { border-top: 1.5px dashed #6b6157; margin: 1.5cqw -1cqw 1cqw; text-align: center; font-family: "Gowun Dodum"; font-size: 1.05cqw; color: #6b6157; }
.lt-cut span { position: relative; top: -1cqw; background: #e7e0cd; padding: 0 .8cqw; }
.lt-reply { white-space: pre-line; font-size: 1.3cqw; }
.lt-blood { position: absolute; right: 5.6cqw; bottom: 7.7cqw; width: 4cqw; height: 2.7cqw; background: radial-gradient(ellipse, rgba(110,25,20,.42), rgba(110,25,20,.15) 60%, transparent 70%); transform: rotate(18deg); }
/* 음악실 노트 구석 낙서 */
.doodle-page { flex: none; position: relative; width: 62cqw; min-height: 30cqw; padding: 5cqw 5cqw 4cqw 8cqw; box-sizing: border-box; transform: rotate(1.5deg);
  background-color: #f7f3e6;
  background-image:
    linear-gradient(90deg, transparent 6cqw, rgba(200,70,70,.5) 6cqw, rgba(200,70,70,.5) calc(6cqw + 2px), transparent calc(6cqw + 2px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(5.6cqw - 1px), rgba(90,130,190,.4) calc(5.6cqw - 1px), rgba(90,130,190,.4) 5.6cqw);
  background-position: 0 0, 0 2.6cqw;
  box-shadow: 0 1.5cqw 4cqw rgba(0,0,0,.6);
  font-family: "Nanum Pen Script", cursive; font-size: 4cqw; line-height: 5.6cqw; color: #33334a; }
.doodle-page p { margin: 0; white-space: pre-line; transform: rotate(-2deg); }
.doodle-page p + p { margin-left: 2cqw; }
.doodle-scribble { position: absolute; right: 3cqw; bottom: 2.5cqw; width: 8cqw; height: 6cqw; opacity: .55;
  background:
    radial-gradient(circle at 30% 40%, transparent 1.4cqw, #33334a 1.4cqw, #33334a calc(1.4cqw + 2px), transparent calc(1.4cqw + 2px)),
    radial-gradient(circle at 70% 60%, transparent 1.8cqw, #33334a 1.8cqw, #33334a calc(1.8cqw + 2px), transparent calc(1.8cqw + 2px)); }
/* 압수된 게임기: 도트 그림을 크게 */
.console-cv { width: 60cqw; image-rendering: pixelated; filter: drop-shadow(0 1.5cqw 3cqw rgba(0,0,0,.6)); }
.lt-box li.lt-red { color: #a8231c; }

/* 안내 화면 (타이틀 다음): 줄 있는 편지지에 2차 창작 안내, 오른쪽 아래 구석에 SNS */
#disclaimer { background: #050505; z-index: 40; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#disclaimer[hidden] { display: none; }
.dc-box {
  --lh: 5.4cqw;
  position: relative; width: 95%; height: 93%; box-sizing: border-box; padding: 4.2cqw 6cqw 5.4cqw 10cqw;
  text-align: left; font-family: var(--font-body); color: #2b2723; font-size: 2.9cqw; line-height: var(--lh); word-break: keep-all;
  background-color: #efe8d6;
  background-image:
    linear-gradient(90deg, transparent 7.2cqw, rgba(190, 70, 60, .5) 7.2cqw, rgba(190, 70, 60, .5) calc(7.2cqw + 2px), transparent calc(7.2cqw + 2px)),
    repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--lh) - 1px), rgba(90, 120, 170, .38) calc(var(--lh) - 1px), rgba(90, 120, 170, .38) var(--lh));
  background-position: 0 0, 0 4.2cqw;
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .7), inset 0 0 5cqw rgba(110, 80, 40, .18);
}
#dc-heading { margin: 0 0 var(--lh); font-family: var(--font-display); font-weight: normal; font-size: 3.4cqw; line-height: var(--lh); letter-spacing: .04em; }
#dc-lines p { margin: 0 0 var(--lh); white-space: pre-line; }
#dc-sns { position: absolute; right: 3cqw; bottom: 2cqw; margin: 0; font-size: 1.8cqw; line-height: 1; color: #6f675b; letter-spacing: .04em; }
#dc-prompt { position: absolute; left: 0; right: 0; bottom: 1.1cqw; margin: 0; text-align: center; line-height: 1; font-size: 2.2cqw; color: #a59c8d; font-family: var(--font-body); animation: blink 1.4s steps(2) infinite; }

/* 메인 메뉴 (타이틀 화면 위): 새 게임 / 이어하기 / 추억노트 / 조작 */
#main-menu { z-index: 41; background: none; }
#main-menu[hidden] { display: none; }
.mm-box { position: absolute; inset: 0; }
/* 메뉴 글자는 타이틀 원고지 캔버스에 칸마다 그림 (drawTitleScreen). 버튼은 그 칸 위의 투명한 누르는 자리 */
.mm-box .btn { position: absolute; margin: 0; padding: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; color: transparent !important; font-size: 1px; outline: none; cursor: pointer; }
.mm-box .btn[disabled] { cursor: default; }
#pause.over-title { z-index: 45; }
.pause-list .memo-row, .pause-list .ctrl-row { cursor: default; }
.pause-list .memo-row.got b { color: #a8231c; }
.pause-list .ctrl-row span { text-align: left; flex: 1; }
.pause-list .ctrl-row b { min-width: 14cqw; }
.pause-list .memo-row span { text-align: left; flex: 1; }
.pause-list .memo-row b { min-width: 17cqw; }

/* 엔딩 화면 구석의 "이 엔딩을 이미지로 저장" (버튼 모양 없이 글씨만) */
#ending-save { position: absolute; right: 2.4cqw; bottom: 1.8cqw; background: none; border: 0; padding: .4cqw; cursor: pointer;
  font-family: var(--font-body); font-size: 2cqw; color: #8a8173; letter-spacing: .04em; animation: rise 1s 1.2s both; }
#ending-save:hover { color: #cfc6b4; text-decoration: underline; }
#ending-save[hidden] { display: none; }

/* 엔딩 화면 배치 (v133): 글자를 줄이고 왼쪽 정렬, 제목 아래 가는 선, 버튼은 왼쪽 아래 한 줄 */
#ending { place-items: stretch; padding: 0; text-align: left; }
#ending .inner { position: absolute; left: 10cqw; right: 10cqw; top: 0; bottom: 9cqw; max-width: none;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; }
#ending #ending-label { font-size: 1.7cqw; letter-spacing: .55em; margin-bottom: 1.6cqw; }
#ending #ending-title { font-size: 4.4cqw; letter-spacing: .06em; line-height: 1.25; text-wrap: pretty;
  padding-bottom: 2.4cqw; margin-bottom: 2.8cqw; border-bottom: 1px solid rgba(207, 198, 180, .22); min-width: 40cqw; }
#ending #ending-text { max-width: 62cqw; }
#ending #ending-text p { font-size: 2.25cqw; line-height: 1.95; margin: 0 0 .2cqw; text-align: left; }
#ending #ending-score { align-self: stretch; text-align: right; font-size: 1.9cqw; letter-spacing: .3em; margin-top: 2.6cqw; color: #cfc6b4; }
#ending #ending-buttons { position: absolute; left: 0; bottom: -4cqw; flex-direction: row; gap: 1.4cqw; margin: 0; }
#ending #ending-buttons .btn { background: transparent; color: #cfc6b4; border: 1px solid rgba(207, 198, 180, .45); border-radius: 0;
  font-size: 1.8cqw; padding: .9cqw 2.2cqw; letter-spacing: .08em; }
#ending #ending-buttons .btn:hover, #ending #ending-buttons .btn:focus-visible { background: #cfc6b4; color: #14110f; }
#ending #ending-save { bottom: 5.6cqw; right: 10cqw; font-size: 1.6cqw; }