/* 한지·옻칠·놋쇠 팔레트, 어두운 화면 하나. */
:root{
  --ink:#08090b; --paper:#e4d9bf; --muted:#8c8473; --lacquer:#8a2318; --brass:#c99a46; --line:#2a2c30;
  --scrim:rgba(6,7,9,.9); --shadow:rgba(0,0,0,.9);
  --f-display:'Nanum Myeongjo','NanumMyeongjo','Batang','BatangChe','AppleMyungjo','Noto Serif KR',serif;
  --f-body:'Malgun Gothic','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--ink);color:var(--paper);overflow:hidden}
body{font-family:var(--f-body);font-size:14px;line-height:1.55}
.stage{position:fixed;inset:0;background:#000;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.stage canvas{width:100%;height:100%;display:block;cursor:crosshair}

.hud{position:absolute;inset:0;pointer-events:none;color:var(--paper);text-shadow:0 1px 3px var(--shadow)}
.obj{position:absolute;top:18px;left:22px;display:flex;flex-direction:column;gap:1px}
.obj #objText{font-family:var(--f-display);font-weight:700;font-size:clamp(14px,1.6vw,19px)}
.obj #roomText{font-size:12px;color:var(--muted);letter-spacing:.08em}
.tal{position:absolute;top:20px;right:22px;display:flex;gap:6px}
.tal span{width:12px;height:23px;background:var(--brass);box-shadow:inset 0 0 0 1px var(--lacquer);transition:opacity .4s}
.tal span.used{opacity:.12}
.calm{position:absolute;top:52px;right:22px;display:flex;gap:5px;align-items:center}
.calm span{width:7px;height:7px;border-radius:50%;border:1px solid rgba(228,217,191,.55)}
.calm span.on{background:var(--paper);border-color:var(--paper)}
.msg{position:absolute;left:50%;top:30%;transform:translateX(-50%);width:max-content;max-width:80%;text-align:center;font-family:var(--f-display);font-weight:700;font-size:clamp(16px,2vw,24px);opacity:0;transition:opacity .45s}
.msg.on{opacity:1}
.msg.bad{color:#e0715c}
.sub{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:max-content;max-width:80%;text-align:center;font-size:clamp(14px,1.7vw,20px);background:rgba(0,0,0,.5);padding:5px 14px;opacity:0;transition:opacity .3s}
.sub.on{opacity:1}
.sub .who{color:var(--brass);font-weight:600;margin-right:8px}
.sub.whisper{background:none;font-family:var(--f-display);font-style:italic;color:#bfc6cc;letter-spacing:.06em}
.prompt{position:absolute;left:50%;top:58%;transform:translateX(-50%);font-size:14px;opacity:0;transition:opacity .2s;white-space:nowrap}
.prompt.on{opacity:1}
.prompt kbd{font:600 12px var(--f-body);border:1px solid var(--paper);border-radius:2px;padding:0 5px;margin-right:6px}
.dot{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1px 0 0 -1px;border-radius:50%;background:var(--paper);opacity:.28}
.hint{position:absolute;left:22px;bottom:16px;font-size:12px;color:var(--muted)}

.rep{position:absolute;inset:0;pointer-events:none}
.rep::before,.rep::after{content:"";position:absolute;left:0;right:0;height:11%;background:#000}
.rep::before{top:0}.rep::after{bottom:0}
.rep-top,.rep-bot{position:absolute;left:0;right:0;height:11%;display:flex;align-items:center;z-index:1;padding:0 24px}
.rep-top{top:0;justify-content:space-between;font-size:13px;letter-spacing:.12em;color:#d9cfc0;font-variant-numeric:tabular-nums}
.rep-top .rec::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#c4392a;margin-right:9px;vertical-align:1px;animation:blink 1s steps(2) infinite}
.rep-bot{bottom:0;justify-content:center;font-size:12px;color:var(--muted)}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rep-top .rec::before{animation:none}}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--scrim);padding:24px;overflow:auto}
.overlay.soft{background:linear-gradient(90deg,rgba(6,7,9,.93) 0%,rgba(6,7,9,.82) 42%,rgba(6,7,9,.25) 75%,rgba(6,7,9,.1) 100%);justify-content:flex-start;padding-left:max(24px,7vw)}
.card{max-width:33rem;display:flex;flex-direction:column;gap:13px;margin:auto 0}
.card.center{align-items:center;text-align:center;margin:auto}
.card.wide{max-width:46rem;margin:auto}
.card h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.1}
.card p{margin:0}
.card .lead{color:var(--paper)}
.fine{color:var(--muted);font-size:12px}
.card ol{margin:0;padding-left:1.25em;display:flex;flex-direction:column;gap:3px}
.card ol li::marker{color:var(--brass);font-weight:600}
.namerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.namerow label{font-size:13px;color:var(--muted)}
.namerow input{font:500 16px var(--f-body);color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--muted);padding:4px 2px;width:7em}
.btnrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{font:600 15px var(--f-body);color:var(--ink);background:var(--paper);border:0;border-radius:2px;padding:10px 24px;cursor:pointer}
.btn:hover{background:#fff}
.ghostbtn{font:500 14px var(--f-body);color:var(--muted);background:none;border:1px solid var(--line);border-radius:2px;padding:9px 16px;cursor:pointer}
.ghostbtn:hover{color:var(--paper)}
.btn:focus-visible,.ghostbtn:focus-visible,.choice button:focus-visible,.namerow input:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.keys{margin:0;color:var(--muted);font-size:12px;display:flex;flex-wrap:wrap;gap:4px 14px}
.keys b{color:var(--paper);font-weight:600}
.choice{display:flex;flex-direction:column;gap:8px}
.choice button{display:flex;justify-content:space-between;gap:16px;text-align:left;font:500 15px var(--f-body);color:var(--paper);background:transparent;border:1px solid var(--line);border-left:3px solid var(--lacquer);padding:11px 15px;cursor:pointer}
.choice button:hover{background:rgba(138,35,24,.18)}
.choice button span:last-child{color:var(--muted);font-size:13px}
.stats{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:13px}
.stats dt{color:var(--muted)}
.stats dd{margin:0;font-variant-numeric:tabular-nums}
.bar{width:min(320px,70vw);height:2px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--brass);transition:width .2s}
.credits{max-height:52vh;overflow:auto;font-size:12px;color:var(--muted);white-space:pre-wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 2px;user-select:text;-webkit-user-select:text}