@font-face{font-family:Maple;src:url('../fonts/Maplestory-Light.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Maple;src:url('../fonts/Maplestory-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;font-family:Maple,'Apple SD Gothic Neo',sans-serif;background:#11171b;color:#fff8e9;--page-width:480px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;overflow-x:clip}button,input,a{-webkit-tap-highlight-color:transparent}a{color:inherit}
.reading-shell{position:relative;width:min(100%,var(--page-width));margin:auto;box-shadow:0 0 100px #0007;background:#111a20;isolation:isolate}
.masthead{position:fixed;z-index:20;top:0;width:min(100%,var(--page-width));height:94px;display:flex;align-items:flex-start;justify-content:space-between;padding:28px 28px;background:linear-gradient(#0b17205c,transparent);pointer-events:none}
.wordmark{pointer-events:auto;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.15em}.wordmark span{color:#e1b277}
.page-count{font-size:12px;letter-spacing:.14em;padding-top:3px;text-shadow:0 1px 10px #0009}.page-count i{font-style:normal;opacity:.4;margin:0 5px}
.scene{position:relative;height:max(100svh,calc(min(100vw,480px)*16/9));min-height:640px;overflow:hidden;isolation:isolate;scroll-margin-top:0;scroll-snap-align:start;scroll-snap-stop:always}
.scene-background{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover;z-index:-3;will-change:transform}
.scene-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(6,10,14,.28),rgba(6,10,14,.1) 40%,rgba(6,10,14,.58) 72%,rgba(6,10,14,.93))}
.scene[data-shade=top] .scene-shade{background:linear-gradient(180deg,rgba(6,10,14,.68),rgba(6,10,14,.68) 32%,rgba(6,10,14,.20) 60%,rgba(6,10,14,.15))}
.figure,.book-layer{position:absolute;margin:0;pointer-events:none;will-change:transform;z-index:1}
.figure img,.book-layer img{width:100%;height:100%;object-fit:contain;display:block}
.book-layer{z-index:2;filter:drop-shadow(0 12px 14px #0005);display:grid;place-items:center}
.book-object{position:relative;width:88%;aspect-ratio:2/3;isolation:isolate;transform:rotate(-2deg) skewY(-3deg)}
.book-object::before{content:'';position:absolute;inset:0;background:#252e2c;transform:translate(3.8%,1.5%);box-shadow:4px 7px 8px #0006;z-index:-2}
.book-object::after{content:'';position:absolute;top:.5%;right:-5.5%;width:5.5%;height:99%;background:repeating-linear-gradient(90deg,#d9d2bd 0 1px,#a9a18c 1px 2px);transform:skewY(35deg);transform-origin:left top;z-index:-1}
.book-object img{object-fit:cover;border-radius:1px;box-shadow:inset 2px 0 3px #0005}
.scene-copy{position:absolute;z-index:4;pointer-events:none;will-change:transform}
.scene-copy h2{margin:0;white-space:pre-line;font-size:clamp(32px,8.4vw,41px);line-height:1.2;letter-spacing:-.045em;font-weight:700;text-wrap:balance;text-shadow:0 2px 22px #0005}
.scene[data-id=answers] h2{font-size:clamp(26px,7.3vw,35px);line-height:1.25}
.scene[data-id=chiseon] h2{font-size:clamp(30px,8.1vw,39px)}
.scene[data-id=yeon] h2{font-size:clamp(48px,14vw,68px)}
.copy-rule{display:block;width:32px;height:2px;margin:0 0 15px;background:var(--accent);opacity:.85}
.scene-copy[data-align=right]{text-align:right}.scene-copy[data-align=right] .copy-rule{margin-left:auto}
.description-slot{margin-top:17px;min-height:5.5em;font-size:15px;line-height:1.8;word-break:keep-all;max-width:100%}
.work-external-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 15px;border:1px solid #d7bb8373;border-radius:2px;background:#111a21d9;color:#f7dfac;font-size:15px;line-height:1.5;text-decoration:none;pointer-events:auto;white-space:normal;box-shadow:0 4px 14px #0002}
.work-external-link:hover{background:#283136;color:#fff0cd;border-color:#e6c895}
.work-external-link:active{background:#364044}
.description-slot span{display:none;height:6px;background:#fff6;border-radius:10px;margin-bottom:11px;width:94%}
.description-slot span:last-child{width:69%}
body.show-guides .description-slot{outline:1px dashed #ffffff55;outline-offset:8px}
body.show-guides .description-slot span{display:block}
body.hide-copy .scene-copy{visibility:hidden}
.scene::after{content:'';position:absolute;inset:auto 0 0;height:60px;background:linear-gradient(transparent,#0d171e55);pointer-events:none;z-index:5}
.scene-index{position:absolute;z-index:4;bottom:22px;left:28px;right:28px;display:flex;align-items:center;gap:12px;color:#fff9;font-size:10px;letter-spacing:.16em}
.scene-index::before{content:'';width:26px;height:1px;background:var(--accent)}
.scene-index .next{margin-left:auto;opacity:.8;font-size:16px}
.colophon{padding:70px 30px 45px;text-align:center;background:#101a20;color:#e4e1d8}.colophon>span{letter-spacing:.18em;font-size:13px}.colophon p{font-size:18px;margin:24px 0 48px}
.preview-controls{position:fixed;left:calc(50% + 285px);top:80px;width:245px;color:#b9bdc0;font-size:13px}
.control-label{font-size:19px;color:#e7dfd0;margin:0 0 26px}.preview-controls nav{display:grid;gap:19px}
.preview-controls nav a{display:flex;gap:15px;text-decoration:none;line-height:1.7;opacity:.6}.preview-controls nav a[aria-current=true]{opacity:1;color:#fff2ce}.preview-controls nav b{font-size:10px;font-weight:400;padding-top:3px;color:#d3b48a}
.view-options{display:grid;gap:15px;margin-top:40px;border-top:1px solid #fff2;padding-top:25px}.view-options label{display:flex;align-items:center;gap:9px;cursor:pointer}.view-options input{accent-color:#d8b17e}
.art-link{display:inline-block;margin-top:26px;text-decoration:none;font-size:12px;color:#d0b592}
a:focus-visible,input:focus-visible{outline:2px solid #f4c780;outline-offset:5px}
@media(max-width:1050px){.preview-controls{display:none}}
@media(max-width:480px){.masthead{padding-top:max(25px,env(safe-area-inset-top));padding-left:24px;padding-right:24px}.scene-index{left:24px;right:24px}.reading-shell{box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene-background,.figure,.book-layer,.scene-copy{transform:none!important;will-change:auto}}



.colophon{scroll-snap-align:start;scroll-snap-stop:always;min-height:100svh}

html.snap-ready{scroll-snap-type:y mandatory}
.art-link{display:block;width:fit-content}

/* Seated scenes share one fixed spatial plane: furniture and stone never drift. */
.scene-art{position:absolute;inset:0;isolation:isolate;pointer-events:none}
.scene[data-motion=still] .scene-background,.scene[data-motion=still] .figure,.scene[data-motion=still] .book-layer{transform:none!important;will-change:auto}

.scene-painting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transform:none!important;will-change:auto}