*{box-sizing:border-box;margin:0;padding:0}
:root{--paper:#ece5d6;--night:#191714;--ink:#f3ede1;--muted:rgba(255,255,255,.48);--gold:#c99a43;--max-w:800px}
html{scroll-behavior:smooth;background:var(--night)}
body{min-height:100vh;background:var(--night);font-family:'Nanum Myeongjo',serif;overflow-x:hidden;color:var(--ink)}
button{font:inherit}
#loading{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--night);transition:opacity .25s}
#loading.done{opacity:0;pointer-events:none}
#loading .star{font-size:34px;color:var(--gold);animation:pulse 1.35s ease-in-out infinite}
#loading p{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.45)}
@keyframes pulse{0%,100%{opacity:.2;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}
#titlebar{position:fixed;top:10px;left:50%;z-index:120;transform:translateX(-50%);font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.2);pointer-events:none;white-space:nowrap}
#status{position:fixed;left:14px;bottom:10px;z-index:120;max-width:calc(100vw - 100px);font-family:system-ui,sans-serif;font-size:10px;letter-spacing:.05em;color:rgba(255,255,255,.28)}
.view-toggle{position:absolute;top:16px;right:16px;z-index:20;padding:7px 14px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(10,12,18,.32);backdrop-filter:blur(8px);color:rgba(255,255,255,.78);font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.08em;cursor:pointer;transition:.18s}
.view-toggle:hover{background:rgba(255,255,255,.17);color:#fff}
.cover-title{position:absolute;z-index:3;left:0;right:0;bottom:8%;width:100%;max-width:100%;padding-inline:5%;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;overflow:hidden}
.cover-title .star{color:var(--gold);font-size:clamp(18px,3cqw,24px)}
.cover-title h1{max-width:100%;font-size:clamp(20px,4.5cqw,36px);letter-spacing:.18em;text-shadow:0 2px 12px rgba(0,0,0,.8);white-space:nowrap}
.cover-title small{max-width:100%;font-family:system-ui,sans-serif;font-size:clamp(8px,1.5cqw,12px);letter-spacing:.16em;color:#9ba4b4;white-space:nowrap}
.book-cover .cover-title{padding-inline:4%}
.book-cover .cover-title h1{font-size:clamp(9px,4.2cqw,18px);letter-spacing:.12em}
.book-cover .cover-title small{font-size:clamp(5px,1.8cqw,9px);letter-spacing:.08em}
.cover-grad{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 28%,rgba(3,5,10,.42) 58%,rgba(3,5,10,.92) 100%);pointer-events:none}
.drive-img{display:block;width:100%;height:100%;object-fit:cover;background:#0d1018}
.wt-cover>.drive-img,.book-cover>.drive-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.img-error{display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#0d111b;color:#33405b;font-family:system-ui,sans-serif;font-size:11px}
.img-error strong{font-size:28px;color:#27334c}

/* 노션 정본의 강제 줄바꿈을 그대로 보존한다. */
.wt-page,.wt-image,.wt-cover,.book-page{container-type:inline-size}
.book-caption p,.wt-overlay p,.wt-gap p,.wt-top-caption p,.wt-cut-caption p,.wt-panel-caption p{width:100%;word-break:normal;overflow-wrap:normal}
.text-line{display:inline-block;white-space:nowrap}

/* 동화책뷰 */
#book-view{display:none;flex-direction:column;align-items:center;gap:clamp(100px,48vh,440px);padding:6vh 0 28vh}
#book-view.active{display:flex}
.spread{position:relative;display:flex;width:min(96vw,calc(88vh * 1.5));aspect-ratio:3/2;overflow:hidden;background:#090c13;box-shadow:0 18px 76px rgba(0,0,0,.86);scroll-margin-block:5vh}
.spread::after{content:'';position:absolute;z-index:10;top:0;bottom:0;left:50%;width:44px;transform:translateX(-50%);background:linear-gradient(to right,transparent,rgba(0,0,0,.22) 44%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.22) 56%,transparent);pointer-events:none}
.book-page{position:relative;width:50%;height:100%;overflow:hidden;background:#0a0d15}
.book-page.blank{background:#0b0e15}
.book-cover{position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8%}
.book-caption{--pad-x:8%;position:absolute;z-index:5;left:0;right:0;bottom:0;max-height:68%;overflow:hidden;padding:16% var(--pad-x) 6%;background:linear-gradient(to bottom,transparent 0%,rgba(3,5,10,.38) 32%,rgba(3,5,10,.76) 68%,rgba(3,5,10,.88) 100%);color:#f4eee4;text-shadow:0 1px 7px rgba(0,0,0,.9);font-size:clamp(7px,2.15cqw,15px);line-height:1.86;word-break:keep-all}
.end-page{display:flex;align-items:center;justify-content:center;background:var(--paper);color:#685e50;text-align:center;font-size:clamp(13px,1.5vw,20px);line-height:2.4;letter-spacing:.28em}

/* 웹툰뷰 */
#webtoon-view{display:none;flex-direction:column;align-items:center;padding-bottom:14vh}
#webtoon-view.active{display:flex}
.wt-page{position:relative;width:100%;max-width:var(--max-w);scroll-margin-top:0}
.wt-cover{position:relative;aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8%;overflow:hidden}
.wt-cover-spacer{width:100%;max-width:var(--max-w);height:min(66.667vw,533px);flex:0 0 auto;background:var(--night)}
.wt-image{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#0c1018}
.wt-overlay{--pad-x:9%;position:absolute;z-index:4;left:0;right:0;bottom:0;padding:17% var(--pad-x) 7%;background:linear-gradient(to bottom,transparent 0%,rgba(3,5,10,.28) 35%,rgba(3,5,10,.67) 72%,rgba(3,5,10,.78) 100%);text-shadow:0 1px 7px rgba(0,0,0,.88)}
.wt-overlay p,.wt-gap p,.wt-top-caption p,.wt-cut-caption p,.wt-panel-caption p{font-size:clamp(14px,2.4cqw,19px);line-height:2.08}
.wt-gap{--pad-x:9%;width:100%;min-height:22cqw;display:flex;align-items:center;padding:9cqw var(--pad-x);background:var(--night);color:#ded8ca}
.wt-gap.center{justify-content:center;text-align:center}
.wt-gap.right{justify-content:flex-end;text-align:right}
.wt-gap-before{min-height:32cqw;align-items:center}
.wt-spacer{height:min(26.667cqw,213px);background:var(--night)}
.wt-section-spacer{height:min(26.667cqw,213px)}
.wt-end{display:flex;align-items:center;justify-content:center;min-height:38vh;color:#64594a;text-align:center;line-height:2.6;letter-spacing:.28em}

/* 장면별 이미지 텍스트 */
.wt-top-caption{--pad-x:7%;position:absolute;z-index:6;left:0;right:0;top:0;padding:5.5% var(--pad-x) 11%;background:linear-gradient(to bottom,rgba(3,5,10,.62) 0%,rgba(3,5,10,.36) 48%,transparent 100%);color:#f4eee4;text-shadow:0 1px 7px rgba(0,0,0,.9)}
.wt-top-caption.right,.wt-top-caption.layout-right,.wt-overlay.layout-right{text-align:right}
.wt-top-caption.layout-left,.wt-overlay.layout-left{text-align:left}
.wt-top-caption.layout-center,.wt-overlay.layout-center{text-align:center}
.wt-cut-caption{--pad-x:6%;position:absolute;z-index:6;left:0;right:0;top:var(--cut-y);transform:translateY(-100%);padding:5% var(--pad-x) 2.2%;text-align:right;color:#f4eee4;text-shadow:0 1px 7px rgba(0,0,0,.94);background:linear-gradient(to bottom,transparent 0%,rgba(3,5,10,.28) 52%,rgba(3,5,10,.52) 100%)}
.wt-cut-caption.dark{color:#2f271e;background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.16) 58%,rgba(255,255,255,.36) 100%)}
.scene-10 .wt-cut-caption.readability-glow{font-weight:700;text-shadow:0 0 3px rgba(255,250,236,.58),0 0 8px rgba(255,246,222,.3)}
.wt-panel-caption{--pad-x:8%;position:absolute;z-index:6;left:0;right:0;padding:8% var(--pad-x) 3%;color:#f4eee4;text-shadow:0 1px 7px rgba(0,0,0,.94);background:linear-gradient(to bottom,transparent 0%,rgba(3,5,10,.32) 54%,rgba(3,5,10,.62) 100%)}
.wt-panel-caption.upper{top:50%;transform:translateY(-100%)}
.wt-panel-caption.lower{bottom:0}
.scene-10 .cut-1{--cut-y:33.3%}
.scene-10 .cut-2{--cut-y:66.6%}
.scene-10 .cut-3{--cut-y:100%}
.scene-11 .wt-overlay,.scene-12 .wt-overlay,.scene-13 .wt-overlay{padding-top:19%}
.scene-14 .wt-top-caption,.scene-15 .wt-top-caption{padding-bottom:13%}
.scene-14 .wt-overlay{padding-top:19%}
.scene-15 .wt-overlay{padding-top:14%}
.scene-16 .wt-panel-caption p{line-height:1.95}

/* 후반부 확정 배치 */
.scene-23 .scene23-gap{height:173.333cqw;min-height:173.333cqw;padding:0 9%;align-items:center;justify-content:center;text-align:center}
.scene-23 .scene23-gap p{font-size:clamp(18px,3.2cqw,26px);letter-spacing:.08em}
.scene-24 .scene24-gap{min-height:42cqw;justify-content:center;text-align:center}
.scene-25 .scene25-before{min-height:38cqw;justify-content:center;text-align:center}
.scene-25 .scene25-after{min-height:34cqw;justify-content:center;text-align:center}
.scene-27 .scene27-before{min-height:36cqw}
.scene-27 .scene27-after{min-height:38cqw;justify-content:center;text-align:center}

/* 우측 하단 고정 페이지 이동 */
#nav{position:fixed;z-index:500;right:max(12px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:7px;opacity:.9}
.nav-btn{width:48px;height:48px;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(18,18,18,.56);backdrop-filter:blur(10px);box-shadow:0 5px 18px rgba(0,0,0,.48);color:rgba(255,255,255,.94);font-family:system-ui,sans-serif;font-size:22px;cursor:pointer;transition:.15s}
.nav-btn:hover{background:rgba(18,18,18,.76);color:#fff;transform:scale(1.06)}
.nav-btn:disabled{opacity:.28;cursor:default;transform:none}
#indicator{min-width:48px;padding:3px 5px;border-radius:8px;background:rgba(10,10,10,.42);font-family:system-ui,sans-serif;font-size:10px;line-height:1.35;letter-spacing:.04em;color:rgba(255,255,255,.78);text-align:center;white-space:pre-line}

@media(max-width:720px){
  #nav{right:8px;bottom:max(10px,env(safe-area-inset-bottom))}
  .nav-btn{width:42px;height:42px;font-size:20px}
  #indicator{min-width:40px;font-size:9px}
  #book-view{gap:24vh;padding-top:4vh}
  .spread{width:98vw}
  .book-caption{--pad-x:7%;padding-top:14%;font-size:clamp(7px,3.6cqw,11px);line-height:1.65}
  .view-toggle{top:10px;right:10px;padding:6px 11px;font-size:10px}
  .wt-top-caption{--pad-x:4.5%}
  .wt-cut-caption{--pad-x:4.5%}
  .wt-panel-caption{--pad-x:5%}
  .wt-overlay p,.wt-gap p,.wt-top-caption p,.wt-cut-caption p,.wt-panel-caption p{font-size:clamp(14px,3.55cqw,18px)}
  .book-cover .cover-title h1{font-size:clamp(9px,2.55cqw,14px)}
  .book-cover .cover-title small{font-size:5px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}