@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Song+Myung&display=swap');
:root { --ink:#101918; --ink-2:#172321; --panel:#1d2b29; --paper:#e8e2d3; --muted:#9daaa4; --teal:#42c9b2; --teal-d:#1b7568; --orange:#f08a4b; --line:#31433f; --danger:#ef6a5b; color-scheme:dark; font-family:"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ink); color:var(--paper); min-height:100vh; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.skip { position:fixed; left:1rem; top:-5rem; background:var(--orange); color:#111; padding:.7rem 1rem; z-index:99; }
.skip:focus { top:1rem; }
.landing { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); overflow:hidden; }
.landing-art { min-height:100vh; position:relative; overflow:hidden; background:radial-gradient(circle at 45% 30%,#2b665e,#172522 45%,#0b100f); }
.landing-art-image { width:100%; height:100%; position:absolute; inset:0; display:block; object-fit:cover; object-position:center; }
.landing-art::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 72%,var(--ink)),repeating-linear-gradient(90deg,transparent 0 8vw,rgba(66,201,178,.06) 8vw calc(8vw + 1px)); }
.landing-copy { padding:clamp(2.5rem,7vw,7rem); display:flex; flex-direction:column; justify-content:center; position:relative; }
.eyebrow { color:var(--teal); letter-spacing:.24em; text-transform:uppercase; font-size:.78rem; font-weight:700; }
h1 { font-family:"Song Myung",serif; font-size:clamp(4rem,8vw,7.2rem); line-height:.9; margin:1rem 0 1.5rem; font-weight:400; }
.landing h1 span { display:block; color:var(--orange); font-size:.27em; font-family:"Noto Sans KR"; letter-spacing:.32em; margin-top:1.4rem; }
.premise { font-family:"Song Myung",serif; font-size:1.3rem; line-height:1.8; max-width:33rem; color:#c8c6ba; }
.actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2rem; }
.primary,.secondary,.ghost { border:0; border-radius:2px; padding:.9rem 1.2rem; font-weight:700; }
.primary { background:var(--orange); color:#17120f; }
.secondary { background:var(--teal); color:#0c1b18; }
.ghost { background:transparent; border:1px solid var(--line); color:var(--paper); }
.primary:disabled,.secondary:disabled { opacity:.42; cursor:not-allowed; }
.slot-row { display:grid; gap:.65rem; margin-top:2rem; max-width:34rem; }
.slot { display:flex; justify-content:space-between; align-items:center; width:100%; padding:1rem; background:var(--ink-2); color:var(--paper); border:1px solid var(--line); text-align:left; }
.slot.active { border-color:var(--teal); }
.slot small { color:var(--muted); }
.game { min-height:100vh; display:grid; grid-template-columns:18rem minmax(0,1fr); }
.sidebar { border-right:1px solid var(--line); padding:1.5rem; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; background:#0d1514; z-index:3; }
.brand { font-family:"Song Myung",serif; font-size:1.55rem; color:var(--paper); background:none; border:0; text-align:left; padding:0; }
.progress-label { display:flex; justify-content:space-between; margin:2rem 0 .45rem; color:var(--muted); font-size:.78rem; }
.progress { height:3px; background:#273532; }
.progress i { display:block; height:100%; background:var(--orange); }
.metrics { display:grid; gap:.9rem; margin-top:2rem; }
.metric-head { display:flex; justify-content:space-between; font-size:.8rem; }
.meter { height:4px; background:#263430; margin-top:.35rem; }
.meter i { display:block; height:100%; background:var(--teal); transition:width .4s; }
.metric.tension .meter i { background:var(--orange); }
.side-actions { margin-top:auto; display:grid; gap:.5rem; }
.side-actions button { color:var(--muted); background:transparent; border:0; padding:.6rem; text-align:left; }
.stage { min-width:0; }
.hero { width:100%; min-width:0; aspect-ratio:16/9; min-height:24rem; max-height:42rem; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 30%,#35685f,#15231f 55%,#0d1514); }
.hero-image { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,var(--ink),transparent 65%); pointer-events:none; }
.hero-meta { position:absolute; left:clamp(1.5rem,6vw,6rem); right:2rem; bottom:2rem; display:flex; justify-content:space-between; align-items:end; }
.chapter { color:var(--teal); font-size:.8rem; letter-spacing:.15em; }
.hero h2 { font-family:"Song Myung",serif; font-size:clamp(2.1rem,5vw,4rem); margin:.45rem 0 0; font-weight:400; }
.location { color:#c0c9c3; text-align:right; font-size:.85rem; }
.reader { max-width:58rem; margin:0 auto; padding:clamp(2rem,6vw,5rem) clamp(1.2rem,5vw,4rem) 8rem; }
.body { font-family:"Noto Sans KR","Malgun Gothic",sans-serif; font-size:clamp(1.125rem,1.6vw,1.25rem); font-weight:400; line-height:1.9; color:#d8d4c7; }
.body p { margin:0 0 1.55em; }
.explanation { margin:2.2rem 0; border:1px solid var(--line); background:#15211f; }
.explanation summary { cursor:pointer; color:var(--teal); font-weight:700; padding:1rem 1.2rem; }
.explanation summary:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.explanation div { padding:0 1.2rem 1rem; color:#c5ccc7; font-size:.95rem; line-height:1.8; }
.explanation p { margin:.4rem 0 .8rem; }
.choice-title { margin:4rem 0 1.25rem; font-size:.9rem; color:var(--orange); letter-spacing:.12em; }
.choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.choice { min-height:0; padding:0; overflow:hidden; border:1px solid var(--line); background:var(--ink-2); color:var(--paper); text-align:left; display:flex; flex-direction:column; transition:transform .2s,border-color .2s; }
.choice:hover:not(:disabled) { transform:translateY(-4px); border-color:var(--teal); }
.choice:disabled { opacity:.62; cursor:not-allowed; }
.choice-copy { padding:1.1rem; flex:1; display:flex; flex-direction:column; }
.tag { color:var(--teal); font-size:.72rem; letter-spacing:.1em; }
.choice h3 { margin:.55rem 0; font-size:1.1rem; }
.choice p { margin:0; color:#aeb8b2; font-size:.86rem; line-height:1.65; }
.effects { margin-top:auto; padding-top:1rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.effect { font-size:.7rem; padding:.22rem .4rem; background:#101817; color:#bfc8c2; }
.locked { color:#f1ad80 !important; margin-top:.8rem !important; }
.outcome { border-left:3px solid var(--orange); padding:1.5rem 1.7rem; background:#17211f; }
.outcome h3 { color:var(--orange); margin-top:0; }
.next { margin-top:2rem; width:100%; padding:1.1rem; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:10; }
.drawer { position:fixed; right:0; top:0; bottom:0; width:min(34rem,100%); background:#15201e; border-left:1px solid var(--line); z-index:11; padding:2rem; overflow:auto; }
.drawer-head { display:flex; justify-content:space-between; align-items:center; position:sticky; top:-2rem; background:#15201e; padding:1rem 0; z-index:1; }
.drawer-head h2 { margin:0; }
.close { border:0; background:transparent; color:var(--paper); font-size:1.5rem; }
.history { display:grid; gap:.7rem; }
.history-item,.timeline { padding:1rem; border:1px solid var(--line); background:#101918; }
.timeline-actions,.drawer-nav { display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.drawer-nav { display:grid; }
.drawer-nav button { color:var(--paper); background:var(--ink-2); border:1px solid var(--line); padding:1rem; text-align:left; }
.timeline-actions,.drawer-nav { display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.drawer-nav { display:grid; }
.drawer-nav button { color:var(--paper); background:var(--ink-2); border:1px solid var(--line); padding:1rem; text-align:left; }
.history-item strong { display:block; margin:.3rem 0; }
.history-item button { margin-top:.8rem; }
.flags { display:flex; flex-wrap:wrap; gap:.5rem; }
.flag { background:#20332f; color:#9ee1d4; padding:.4rem .6rem; font-size:.78rem; }
.notice { position:fixed; bottom:1rem; right:1rem; max-width:28rem; padding:.8rem 1rem; background:var(--orange); color:#17120f; z-index:30; box-shadow:0 5px 30px #0008; }
.error { min-height:100vh; display:grid; place-content:center; text-align:center; padding:2rem; background:radial-gradient(circle,#203f39,var(--ink) 65%); }
.error h1 { font-size:3rem; }
.ending-mark { color:var(--orange); font-size:.9rem; letter-spacing:.3em; }
.ending .body::first-letter { color:var(--orange); font-size:4rem; float:left; line-height:.8; padding:.25rem .5rem 0 0; }
.mobile-bar { display:none; }
@media (max-width:900px) {
  .landing { grid-template-columns:1fr; }.landing-art { min-height:34vh; }.landing-copy { padding:2rem 1.3rem 4rem; }.landing h1{font-size:3.8rem}.game{display:block}.sidebar{display:none}.mobile-bar{display:flex;position:sticky;top:0;z-index:8;background:#0d1514ee;backdrop-filter:blur(8px);padding:.8rem 1rem;justify-content:space-between;border-bottom:1px solid var(--line)}.mobile-bar button{background:none;border:0;color:var(--paper)}.hero{aspect-ratio:16/9;min-height:20rem;max-height:none}.hero-meta{left:1.2rem;bottom:1.5rem}.choices{grid-template-columns:1fr}.reader{padding-bottom:5rem}
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
@media (max-width:600px) {
  .hero-meta { flex-direction:column; align-items:flex-start; gap:.8rem; right:1.2rem; }
  .location { text-align:left; white-space:nowrap; }
}
@media (max-width:600px) {
  .hero-meta { flex-direction:column; align-items:flex-start; gap:.8rem; right:1.2rem; }
  .location { text-align:left; white-space:nowrap; }
}
.edition-note { margin-top: 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; } .edition-note h2 { font-family: inherit; font-size: 1rem; } .edition-note p { font-size: .9rem; line-height: 1.7; color: var(--muted); }