/* 🔴 글자·버튼은 전부 DOM 이다 — 캔버스 오브젝트엔 getBoundingClientRect 가 없어
   44px·대비를 «증명»할 방법이 없다(장부 §4). 캔버스는 배경과 인물만 그린다. */
:root{
  --ink:#101828; --paper:#F4EBDD; --gold:#E7B85C; --jade:#55B89A;
  --clay:#D98B6A; --err:#C66A6A; --lock:#8A94A6; --line:#2A3446;
  --tap:44px; --gut:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0B1220;color:var(--paper);
  font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  -webkit-text-size-adjust:100%}
#world{position:fixed;inset:0;z-index:0}
/* 배경 위 가독성 스크림 — 그림은 보이되 글자는 읽힌다 */
#world::after{content:'';position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,32,.55) 0%,rgba(11,18,32,.35) 35%,rgba(11,18,32,.62) 100%)}
#ui{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) var(--gut) calc(env(safe-area-inset-bottom) + 20px)}
.wrap{width:100%;max-width:880px;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:14px}
h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(28px,7vw,46px)}
h2{font-size:clamp(20px,4.6vw,28px)}
h3{font-size:clamp(15px,3.4vw,18px);color:var(--gold)}
p{margin:0;line-height:1.65}
.small{font-size:13px}
.muted{color:#AEB9C9}
.card{background:rgba(16,24,40,.86);border:1px solid var(--line);border-radius:14px;padding:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.btn{min-height:var(--tap);min-width:var(--tap);padding:11px 16px;border-radius:11px;border:1px solid var(--line);
  background:#16203A;color:var(--paper);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:var(--gold);color:#241A06;border-color:#C79B3E}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.pick{width:100%;display:block;margin:0 0 8px}
.btn.pick.ok{background:rgba(85,184,154,.25);border-color:var(--jade)}
.btn.pick.no{background:rgba(198,106,106,.25);border-color:var(--err)}
.bar{height:8px;background:#18213A;border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--gold)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);font-size:13px;background:#131C31}
.chip.on{border-color:var(--jade);color:var(--jade)}
.chip.crack{border-color:var(--err);color:var(--err)}
.speech{display:flex;gap:12px;align-items:flex-start;margin:0 0 10px}
.who{font-weight:700;color:var(--gold);min-width:56px}
.step{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#131C31;margin:0 0 8px;
  min-height:var(--tap);display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--paper);
  font:inherit;cursor:pointer}
.step.sel{border-color:var(--gold);background:#1D2743}
.step .n{width:26px;height:26px;flex:none;border-radius:50%;background:#26324F;display:grid;place-items:center;font-size:13px}
.step.blank{border-style:dashed;color:var(--lock)}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){ .grid2{grid-template-columns:1.1fr .9fr} }
.stat{margin:0 0 10px}
.hidden{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;
  background:#16203A;border:1px solid var(--gold);border-radius:12px;padding:10px 16px;font-weight:600}

.face{width:auto;max-width:112px;height:auto;border-radius:12px;background:#131C31;border:1px solid var(--line);flex:none;object-fit:cover}
.speech .face{max-width:72px}

/* 유틸 — 🔴 CSP style-src 'self' 가 style= 속성을 막는다(실측 2026-09-21).
   인라인으로 쓰던 것을 전부 클래스로 내렸다. 폭처럼 «값이 데이터인» 것만 CSSOM 으로 넣는다. */
.grow{flex:1}
.minw0{min-width:0}
.top{align-items:flex-start}
.g12{gap:12px}
.g14{gap:14px}
.gap72{width:72px;flex:none}
.mt6{margin-top:6px}
.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt12{margin-top:12px}
.mt14{margin-top:14px}
.mb4{margin-bottom:4px}
.mb10{margin-bottom:10px}
.mb12{margin-bottom:12px}
.my10{margin:10px 0}
.good{color:var(--jade)}
.bad{color:var(--err)}

/* ── 장면(컷신) ────────────────────────────────────────────────────────────
   🔴 대사를 한꺼번에 뿌리면 «텍스트 덩어리»가 되고 아무도 안 읽는다. 한 줄씩 밀어 올린다. */
.cut{display:flex;flex-direction:column;gap:12px;outline:none;cursor:pointer;
  /* 🔴 컷신은 화면을 «채워야» 장면이 된다 — 짧은 대사 하나에 버튼이 중간에 떠 있으면 메뉴로 보인다 */
  min-height:calc(100vh - 150px)}
.cut-body{justify-content:flex-end}
.cut-title{font-size:clamp(20px,5vw,30px);font-weight:800;color:var(--gold);letter-spacing:-.02em}
.cut-body{display:flex;flex-direction:column;gap:12px;flex:1}
.cut-line{display:flex;gap:12px;align-items:flex-start;animation:rise .28s ease-out}
.cut-line .face{max-width:64px}
.cut-text{flex:1;min-width:0;background:rgba(16,24,40,.88);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
/* 🔴 지문을 «배경 없는 옅은 글씨»로 두면 밝은 배경 위에서 **사라진다**(실측: 봉합 화면이 빈 것처럼 보였다).
   배경 아트가 깔리는 순간 «투명한 UI»는 UI 가 아니다. */
.cut-line.narration .cut-text{background:rgba(11,18,32,.72);border-color:rgba(231,184,92,.22);
  padding:10px 14px;color:#EFE4CF;font-style:italic;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cut-text p{margin:0;line-height:1.7;min-height:1.7em}
.cut-foot{display:flex;gap:10px;position:sticky;bottom:0;padding:10px 0 2px;margin-top:auto}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cut-line{animation:none}}

/* 하람의 공책 — 손글씨 느낌의 종이 한 장 */
.note{background:rgba(244,235,221,.94);color:#2A2419;border-color:#C9B48A}
.note-head{font-size:13px;font-weight:700;color:#7A6647;letter-spacing:.02em}
.note-line{margin:0 0 8px;line-height:1.85;font-size:15px}
.note-line:last-child{margin-bottom:0}

/* 하람의 한 마디 — 문항 위에 얹히되 문항을 가리지 않는다 */
.say{margin:0 0 8px;color:var(--gold);font-size:14px;line-height:1.6}