@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600&family=Noto+Sans+KR:wght@400;500&display=swap');
:root{color-scheme:dark;--ink:#0d0b08;--paper:#e5dfce;--gold:#d9b774;--muted:#a8b2ac;--line:#ffffff24}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:'Noto Sans KR',sans-serif;font-size:16px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button:hover{color:#ffe1a4}a{color:inherit}#experience{height:100svh;min-height:670px;position:relative;overflow:hidden}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:30px;left:44px;right:44px;display:flex;align-items:center;gap:30px;z-index:2}.wordmark{font-family:Georgia,serif;letter-spacing:.13em;font-size:19px;text-decoration:none}.wordmark span{font-size:12px;border-left:1px solid var(--line);margin-left:13px;padding-left:13px;color:var(--gold)}.header-note{font-size:13px;color:var(--muted);margin-left:auto}header button{font-size:14px;border-bottom:1px solid #d9b77466;padding:8px 0}.hero{position:absolute;top:19%;left:5.1%;pointer-events:none}.eyebrow{letter-spacing:.23em;font-size:12px;color:var(--gold);margin:0 0 24px}h1{font-family:'Noto Serif KR',serif;font-size:clamp(56px,6.1vw,96px);font-weight:400;letter-spacing:-.05em;line-height:1.12;margin:0}h1 em{font-style:normal;color:var(--gold)}.hanja{display:inline-block;font-size:16px;writing-mode:vertical-rl;letter-spacing:.35em;margin-left:24px;color:#b4a992;vertical-align:middle}.intro{font-size:15px;color:#b1b7af;line-height:1.9;margin:26px 0}.edition{font-size:11px;letter-spacing:.2em;color:#8c998f}.chapter{position:absolute;right:4.5%;bottom:25%;width:226px;pointer-events:none}.chapter>span:first-child{color:var(--gold);font-family:Georgia,serif;font-size:14px;letter-spacing:.13em}.chapter h2{font-family:'Noto Serif KR',serif;font-size:24px;font-weight:400;margin:14px 0}.chapter p{font-size:14px;line-height:1.9;color:#b5bdb6}.tag{font-size:11px;color:#b6c9be;border-top:1px solid var(--line);padding-top:12px;display:block}.orientation{position:absolute;right:5%;top:18%;display:grid;justify-items:center;gap:5px;color:#9aac9e;font:12px Georgia,serif}.orientation i{width:1px;height:36px;background:linear-gradient(var(--gold),transparent)}.orientation small{font:11px 'Noto Sans KR';writing-mode:vertical-rl;letter-spacing:.15em;opacity:.5}.hint{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.05em;color:#9dad9e;white-space:nowrap}.transport{position:absolute;bottom:25px;left:44px;right:44px;z-index:2;background:linear-gradient(transparent,#0d0b08c0);padding-top:15px}.controls{display:flex;align-items:center;gap:23px;font-size:13px}.controls button{padding:10px 0}.primary{color:var(--gold)}.primary span{margin-left:8px}.spacer{flex:1}#time{font-variant-numeric:tabular-nums;color:#a9b4ac;font-size:12px}input[type=range]{width:100%;height:22px;margin:9px 0 14px;background:none;appearance:none;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--gold) var(--progress,73.33%),#ffffff30 var(--progress,73.33%))}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:-3.5px;box-shadow:0 0 15px #edb95f77}nav{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}nav button{font-size:13px;text-align:left;color:#819087}nav span{font-family:Georgia,serif;font-size:12px;margin-right:10px;color:#65786c}nav button.active,nav button.active span{color:var(--gold)}#loading{position:absolute;inset:0;z-index:5;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .8s}#loading.done{opacity:0;pointer-events:none}.loader-mark{font:60px 'Noto Serif KR';color:var(--gold);animation:breathe 2s infinite}#loading p{font-size:14px;letter-spacing:.1em}#status{position:absolute;top:85px;right:44px;max-width:380px;padding:9px 16px;background:#101f1ee8;font-size:13px;border-left:2px solid var(--gold);z-index:6}#status:empty{display:none}dialog{color:var(--paper);background:#101b1a;border:1px solid #cfa96455;padding:50px;max-width:760px;width:calc(100% - 30px);max-height:88svh;overflow:auto}dialog::backdrop{background:#020908c9;backdrop-filter:blur(12px)}dialog h2{font:36px/1.5 'Noto Serif KR';margin:0 0 22px}dialog p{font-size:15px;line-height:1.9;color:#b2c0b4}dialog h3{font-size:16px;color:var(--gold);font-weight:400}dialog ul{padding-left:20px;line-height:2;font-size:14px}.facts{display:grid;grid-template-columns:1fr 1fr;gap:30px}.footnote{border-top:1px solid var(--line);padding-top:20px;font-size:12px!important}.close{position:absolute;right:22px;top:16px;font-size:28px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes breathe{50%{opacity:.4}}@media(max-width:900px){header{left:24px;right:24px;top:22px}.header-note{display:none}header button{margin-left:auto}.hero{top:15%;left:24px}h1{font-size:58px}.intro{font-size:13px}.chapter{right:24px;width:180px;bottom:27%}.chapter h2{font-size:21px}.chapter p{font-size:13px}.orientation{display:none}.transport{left:24px;right:24px}.controls{gap:16px}.hint{bottom:186px}.edition{display:none}}@media(max-width:600px){#experience{min-height:740px}.hero{top:104px}h1{font-size:43px}.eyebrow{font-size:10px;margin-bottom:13px}.hanja{font-size:11px;margin-left:10px}.intro{display:none}.chapter{left:24px;right:24px;width:auto;bottom:218px}.chapter h2{display:inline;margin-left:12px;font-size:20px}.chapter p{margin:8px 0;font-size:13px;max-width:310px}.tag{font-size:10px;padding-top:8px;display:inline-block}.transport{bottom:22px}.controls{gap:17px;flex-wrap:wrap}.controls .spacer{display:none}#time{margin-left:auto}#fullscreen{display:none}#reset{display:none}#sound,#record{font-size:12px}nav{gap:7px}nav button{font-size:11px;line-height:1.8}nav span{display:block;margin:0}.hint{bottom:338px;font-size:10px}.facts{grid-template-columns:1fr;gap:0}dialog{padding:35px 24px}#status{right:20px;left:20px;top:65px}.wordmark{font-size:16px}}
@media(max-width:600px){.chapter{background:linear-gradient(90deg,#0d0b08e6,#0d0b0866);padding:12px;margin-left:-12px}nav button{font-size:12px}}
.film-download{font-size:13px;color:var(--gold);text-decoration:none;border-bottom:1px solid #d9b77455;padding:5px 0}

/* Film v2: quiet nine-chapter timeline and a true black epilogue. */
nav{grid-template-columns:repeat(9,minmax(90px,1fr));gap:16px;overflow-x:auto;scrollbar-width:thin;padding-bottom:8px}nav button{white-space:nowrap;font-size:12px}nav span{margin-right:7px}#end-black{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:1}#end-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;z-index:2;padding-bottom:70px}#end-card img{width:min(70vw,850px);max-height:49vh;object-fit:contain}#end-card p{color:#b8ab91;font-size:clamp(9px,1.15vw,16px);letter-spacing:.08em;margin:20px 0 0}.transport{transition:opacity .6s}.transport.at-ending{opacity:0}.transport.at-ending:hover,.transport.at-ending:focus-within{opacity:1}@media(max-width:600px){nav{grid-template-columns:repeat(9,80px)}#end-card{padding-bottom:80px}#end-card img{width:94vw}#end-card p{letter-spacing:0;font-size:10px}.hero{top:110px}}