@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');
html .entrance .scene img{object-fit:contain;object-position:center top}
:root{color-scheme:dark;--bg:#080e15;--gold:#e6bc79;--muted:#9ca49f;--paper:#ece4d6;--line:#a28b633a;font-family:'Noto Serif KR',Georgia,serif;color:var(--paper);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button:disabled{cursor:wait;opacity:.5}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button{border:0}html{scroll-behavior:smooth}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.entrance{height:100svh;min-height:650px;position:relative;isolation:isolate;overflow:hidden;background:#050b12}.scene{position:absolute;inset:0;max-width:900px;margin:auto}.scene img{width:100%;height:100%;object-fit:cover;object-position:center 46%;filter:brightness(.24) saturate(.5);animation:wake 4.5s 1s forwards;transform:scale(1.035);transition:filter 1s}.darkness{position:absolute;inset:0;background:linear-gradient(180deg,#050b1220 35%,#050b1200 60%,#050b12 99%);pointer-events:none}.scene:after{content:'';position:absolute;inset:0;box-shadow:inset 65px 0 90px -55px #050b12,inset -65px 0 90px -55px #050b12;pointer-events:none}.lamplight{position:absolute;left:19%;top:36%;width:70%;height:43%;background:radial-gradient(ellipse,#ffb43c2b,transparent 68%);mix-blend-mode:screen;opacity:0;animation:glow 5s 1s forwards;pointer-events:none}.topline{position:absolute;top:max(26px,env(safe-area-inset-top));left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-family:Arial,sans-serif;font-size:10px;letter-spacing:.2em;color:#eee2c2b0;z-index:2}.clock{display:flex;align-items:center;gap:10px}.clock i{height:5px;width:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold)}.arrival{position:absolute;bottom:max(32px,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center;opacity:0;transform:translateY(14px);animation:arrive 1.5s 3s forwards;z-index:3}.arrival-line{font-size:clamp(18px,2.2vw,24px);line-height:1.9;letter-spacing:.04em;text-shadow:0 2px 20px #000}.enter{display:inline-flex;align-items:center;justify-content:center;gap:36px;padding:17px 28px;margin-top:23px;background:var(--gold);color:#1b201e;font-weight:600;font-size:15px;border-radius:2px;transition:background .2s,transform .2s}.enter:hover{background:#f3ce94;transform:translateY(-2px)}.fine{font-family:Arial,'Apple SD Gothic Neo',sans-serif;font-size:12px;color:var(--muted);line-height:1.7;margin-top:17px}.skip{position:absolute;right:5%;top:65px;background:transparent;color:var(--muted);font-size:12px;padding:8px;z-index:4}.awake .scene img{animation:none;filter:brightness(1) saturate(1);transform:scale(1)}.awake .arrival{animation:none;opacity:1;transform:none}.awake .lamplight{animation:none;opacity:1}.entered .entrance{height:65svh;min-height:420px;transition:height 1.2s}.entered .arrival,.entered .skip{display:none}.entered .scene img{object-position:center 28%}.inside,.reading{max-width:1140px;margin:auto;padding:90px 40px 50px}.inside-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}.eyebrow{font-family:Arial,sans-serif;color:var(--gold);font-size:10px;letter-spacing:.2em;margin-bottom:18px;font-weight:600}h2{font-size:clamp(30px,4vw,46px);line-height:1.5;letter-spacing:-.045em;font-weight:400}h2 em{font-style:normal;color:var(--gold)}.inside-head>p{color:var(--muted);font-size:14px;line-height:1.9}.people{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.person{text-align:left;padding:0;background:#101820;border:1px solid var(--line);transition:transform .25s,border-color .25s;overflow:hidden}.person:hover{transform:translateY(-6px);border-color:var(--gold)}.portrait{display:block;background-image:url('assets/bookshop.png');background-repeat:no-repeat;filter:saturate(.8);height:280px;background-size:330% auto}.portrait.owner{background-position:49% 63%}.portrait.reader{background-position:91% 66%}.portrait.visitor{background-position:25% 75%}.person-body{position:relative;display:block;padding:24px 20px 28px}.person-body small{font-family:Arial,'Apple SD Gothic Neo',sans-serif;font-size:11px;color:var(--gold);letter-spacing:.05em;display:block}.person-body strong{display:block;font-size:22px;font-weight:500;margin:11px 0 16px}.person-body>span{display:block;font-size:12px;line-height:1.9;color:var(--muted);padding-right:10px}.person-body b{position:absolute;right:19px;top:42px;font-size:24px;font-weight:400;color:var(--gold)}.inside-foot{font-size:12px;text-align:center;color:var(--muted);margin-top:28px}.text-button{background:transparent;padding:12px 0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:6px}.text-button:hover{color:var(--gold)}.reading{border-top:1px solid var(--line);padding-top:42px}.reading-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px;margin-top:28px}.reading-art{position:relative}.reading-art .portrait{height:440px;background-size:400% auto}.reading-art>span{display:block;font-size:12px;letter-spacing:.14em;padding:15px 0;border-bottom:1px solid var(--line);color:var(--gold)}article h2{font-size:32px;outline:none}.story-lines{font-size:16px;line-height:2.2;color:#d8d4cc;min-height:235px;margin-top:27px;white-space:pre-line}.story-lines p{animation:page-in .65s both}.next{display:flex;justify-content:space-between;gap:50px;background:transparent;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:var(--gold);width:100%}.page-index{font-family:Arial,sans-serif;color:var(--muted);font-size:10px;letter-spacing:.2em;margin-top:15px}.quotes{max-width:700px;margin:65px auto 0;padding-top:35px;border-top:1px solid var(--line)}.quotes h3{font-size:23px;font-weight:400;line-height:1.6;margin-bottom:25px}.quote{display:block;width:100%;background:#111a21;text-align:left;border:1px solid var(--line);padding:24px;margin-top:12px;font-size:16px;line-height:1.9;transition:background .2s}.quote:hover,.quote.selected{background:#20271f;border-color:var(--gold)}.quote span{display:block;margin-top:12px;color:var(--gold);font-family:Arial,sans-serif;font-size:11px}.keepsake{padding:70px 24px;max-width:740px;margin:auto;text-align:center}.postcard{max-width:420px;margin:35px auto 0;transform:rotate(-2deg);box-shadow:0 20px 65px #0007}.postcard img{display:block;width:100%;height:auto}.save-actions{display:flex;flex-direction:column;align-items:center;gap:10px}.save-status{font-size:13px;color:var(--gold);margin-top:24px;line-height:1.7}footer{border-top:1px solid var(--line);text-align:center;padding:38px 24px calc(34px + env(safe-area-inset-bottom))}footer>span{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.2em;color:var(--gold)}footer p{font-size:13px;color:var(--muted);margin:18px 0}footer small{font-family:Arial,sans-serif;font-size:10px;color:#65716e}@keyframes wake{0%{filter:brightness(.24) saturate(.5)}25%{filter:brightness(.35) saturate(.7)}42%{filter:brightness(.8) saturate(.9)}50%{filter:brightness(.63) saturate(.8)}100%{filter:brightness(1) saturate(1);transform:scale(1)}}@keyframes glow{0%{opacity:0}50%{opacity:.5}100%{opacity:1}}@keyframes arrive{to{opacity:1;transform:none}}@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1000px){.scene{max-width:760px}.scene img{object-fit:cover}.entrance:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#18232a,#050b12 70%)}.arrival{bottom:28px}.arrival-line{font-size:19px}}
@media(max-width:650px){.entrance{min-height:620px}.scene img{object-fit:cover;object-position:center 43%}.scene:after{box-shadow:none}.topline{font-size:8px;top:22px}.arrival{bottom:27px}.arrival-line{font-size:18px}.fine{font-size:11px}.entered .entrance{height:49svh;min-height:350px}.inside,.reading{padding:52px 22px 35px}.inside-head{display:block;margin-bottom:28px}.inside-head>p{margin-top:18px;font-size:13px}.people{grid-template-columns:1fr;gap:14px}.person{display:grid;grid-template-columns:112px 1fr;min-height:170px}.person .portrait{height:100%;min-height:170px;background-size:440% auto}.person-body{padding:22px 18px}.person-body small{font-size:10px}.person-body strong{font-size:21px;margin:10px 0}.person-body>span{font-size:11px}.person-body b{font-size:22px;right:12px;top:40px}.reading-grid{grid-template-columns:1fr;gap:28px}.reading-art{display:none}article h2{font-size:29px}.story-lines{font-size:16px;min-height:275px}.quotes{margin-top:42px}.quote{padding:21px;font-size:15px}.keepsake h2{font-size:30px}.inside-foot{font-size:11px}.entered .topline{opacity:.6}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.scene img{filter:brightness(1);transform:none}.arrival{opacity:1;transform:none}.lamplight{opacity:1}}

/* Automatic opening: black -> warm scene -> softly glowing title. */
.entrance .intro-blackout{position:absolute;inset:0;background:#000;z-index:10;opacity:1;pointer-events:none}
.entrance .scene img{animation:none;filter:brightness(.3) saturate(.65) blur(3px);transform:none}
.entrance .lamplight{animation:none;opacity:0}
.entrance .arrival{animation:none;opacity:0;visibility:hidden;transform:translateY(12px)}
.entrance .topline{opacity:0}
.title-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--art-width,100%);height:var(--art-height,100%);opacity:0;pointer-events:none;z-index:2}
.title-glow canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px #ffd28d) drop-shadow(0 0 12px #ef9d32) drop-shadow(0 0 25px #dc842366)}
.intro-ready .intro-blackout{animation:black-to-scene 3.5s .25s ease-in-out forwards}
.intro-ready .entrance .scene img{animation:cinematic-focus 3.5s .25s ease-in-out forwards}
.intro-ready .entrance .lamplight{animation:glow 3s 1s ease-in-out forwards}
.intro-ready .title-glow{animation:title-warm-up .6s 3.2s ease-in-out forwards,title-breathe 1.6s 3.8s ease-in-out 6 forwards}
.intro-ready .entrance .topline{animation:quiet-reveal 1s 2.8s forwards}
.intro-ready .entrance .arrival{animation:welcome-reveal 1.2s 3.4s forwards}
.entered .intro-blackout{display:none}.entered .entrance .scene img{animation:none;filter:brightness(1) saturate(1);transform:none}
@keyframes black-to-scene{0%{opacity:1}100%{opacity:0}}
@keyframes cinematic-focus{0%{filter:brightness(.3) saturate(.65) blur(3px)}60%{filter:brightness(.8) saturate(.95) blur(.5px)}100%{filter:brightness(1) saturate(1) blur(0)}}
@keyframes title-warm-up{from{opacity:0}to{opacity:.55}}
@keyframes title-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes quiet-reveal{to{opacity:1}}
@keyframes welcome-reveal{0%{visibility:visible;opacity:0;transform:translateY(12px)}100%{visibility:visible;opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.entrance .intro-blackout{display:none}.entrance .scene img{filter:none;transform:none}.entrance .arrival{opacity:1;visibility:visible;transform:none}.entrance .topline,.entrance .lamplight{opacity:1}.title-glow{opacity:.22}}