/* 이야기형 도입(public/js/story-landing.js?v=c9bc1b42) — 월하당(VSProjects/wolhadang, 운영자 소유) V6 상세의 CSS 를 그대로 옮겼다(2026-10-09 운영자: "상세페이지도 월하당이랑 똑같이").
   아래 webtoon.css·scene-layouts.css 부분은 월하당 원본과 같고, 글꼴 경로와 덮개(#storyLanding)만 우리 쪽에 맞췄다. 원본을 고치면 out/story/build-css.cjs 로 다시 만든다.
   글꼴: KoPub Batang·Nanum Brush Script (OFL, /fonts/wolha/licenses). */
@font-face{font-family:'Moon Batang';src:url('/fonts/wolha/KoPubBatang-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Moon Batang';src:url('/fonts/wolha/KoPubBatang-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Moon Brush';src:url('/fonts/wolha/NanumBrushScript.woff2') format('woff2');font-weight:400;font-display:swap}
html.sl-open-doc,html.sl-open-doc body{overflow:hidden}
#storyLanding{position:fixed;inset:0;z-index:2147483000;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#1b1019;font-family:'Pretendard Variable',Pretendard,'Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
#storyLanding>main{max-width:448px;margin:0 auto}
:where(#storyLanding) *,:where(#storyLanding) *::before,:where(#storyLanding) *::after{box-sizing:border-box}
:where(#storyLanding) :where(button,input){font:inherit}
:where(#storyLanding) button{border:0;cursor:pointer;background:none;color:inherit}
:where(#storyLanding) a{color:inherit;text-decoration:none}
:where(#storyLanding) img{display:block;max-width:100%}
:where(#storyLanding) .icon{display:block;width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
:where(#storyLanding) .icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:10px}
/* 리셋은 :where() 로 우선순위를 0 으로 둔다 — #id 로 두면 월하당 원본의 탭·단추 꾸밈을 덮었다. */
/* 월하당 원본에는 없는 우리 쪽 추가: 시작 단추 아래 안내, 영상 대신 제목 글자(제목 그림이 없을 때) */
#storyLanding .comic-title-text{display:block;font:400 clamp(64px,19vw,88px)/1 'Moon Brush',serif;color:#fff;letter-spacing:-2px;text-shadow:0 4px 22px #0009}
/* 머리줄·하단 메뉴 — 우리 사이트 기본(public/css/cinematic.css?v=2553a528 의 .header·.bottom-nav 떠 있는 알약 독)과 같은 값. 월하당 머리줄·독 대신 쓴다. */
#storyLanding .sl-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:448px;margin:0 auto -64px;height:64px;padding:0 16px;background:linear-gradient(180deg,rgba(8,8,10,.72),rgba(8,8,10,0));transition:background .2s}
#storyLanding.is-scrolled .sl-header{background:rgba(8,8,10,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 30px rgba(0,0,0,.6)}
#storyLanding .sl-logo{display:flex;align-items:center;gap:6px}
#storyLanding .sl-logo img{width:34px;height:34px}
#storyLanding .sl-logo span{display:inline-flex;align-items:baseline;gap:5px;font:700 16px/1 'Gowun Batang','Noto Serif KR',serif;letter-spacing:.5px;color:#f3f3f5;text-shadow:0 2px 12px rgba(0,0,0,.7)}
#storyLanding .sl-logo em{font-style:normal;font-size:13px;letter-spacing:1px;background:linear-gradient(180deg,#f0323f,#8f141c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#storyLanding .sl-login{display:inline-flex;align-items:center;height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(10,10,12,.68);color:#f3f3f5;font-size:12px;font-weight:750;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#storyLanding .sl-nav{position:fixed;z-index:61;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);transform:translateX(-50%);display:flex;gap:2px;height:58px;padding:0 10px;border-radius:999px;background:rgba(20,21,24,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 34px rgba(0,0,0,.55)}
#storyLanding .sl-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:64px;color:#66666f;font-size:10px;font-weight:600;line-height:1}
#storyLanding .sl-nav a svg{width:24px;height:24px}
#storyLanding .sl-nav a.is-on{color:#f0323f}
#storyLanding .sl-nav a.is-on svg{filter:drop-shadow(0 0 8px rgba(240,50,63,.55))}
#storyLanding .sl-dock{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 80px);width:min(calc(100% - 32px),416px)}
#storyLanding .sl-dock[hidden]{display:none}
#storyLanding .sl-dock-start{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border-radius:999px;background:#ead8b7;color:#463227;border:1px solid #fff0d4;box-shadow:inset 0 0 0 3px #dcc4a0,0 10px 26px rgba(0,0,0,.45);font-size:15px;font-weight:700}
#storyLanding .sl-dock-start .icon{width:18px;height:18px}
#storyLanding .webtoon-landing{--webtoon-dock-height:calc(150px + env(safe-area-inset-bottom,0px))}

/* ---- wolhadang webtoon.css ---- */
.webtoon-landing{position:relative;width:100%;overflow:clip;isolation:isolate;padding-bottom:var(--webtoon-dock-height)}
.webtoon-wordmark{font:32px/1 'Moon Brush',serif;letter-spacing:-1px}
.webtoon-icon-button{width:44px;height:48px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.webtoon-icon-button .icon{width:21px;height:21px}
.webtoon-start{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:14px 18px;font-size:15px;font-weight:650;line-height:1.6}
.webtoon-start .icon{width:19px;height:19px;flex:none}
.webtoon-choice-options{display:flex;flex-direction:column}
.webtoon-choice-options>button{display:flex;align-items:center;text-align:left;width:100%;gap:16px}
.webtoon-choice-options strong{flex:1}
.webtoon-choice-options .icon{width:18px;height:18px;flex:none}
.webtoon-book-tabs{display:flex}
.webtoon-book-tabs>button{flex:1;min-width:0;word-break:keep-all}
.webtoon-book{position:relative;touch-action:pan-y}
.webtoon-book-page{display:flex;align-items:center;flex-direction:column}
.webtoon-book-rule{width:35px;height:1px}
.webtoon-page-number{margin-top:auto}
.webtoon-book-controls{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:25px}
.webtoon-dock{position:fixed;z-index:60;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;width:min(100%,448px)}
.webtoon-dock[hidden]{display:none}
.webtoon-dock-home{display:flex;align-items:center;flex-direction:column;font-size:10px;line-height:17px}
.webtoon-dock .save-button{position:static;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:0}

/* ---- wolhadang scene-layouts.css ---- */
/* V6: a continuous illustrated story, followed by a readable interactive report. */
.comic-landing{--scene-bg:#f5f0e7;--scene-ink:#302923;--scene-accent:#665436;--scene-muted:#78695c;--scene-line:#d3c5ad;--scene-night:#0c1522;--scene-glow:#d4c6a7;--scene-light:#fcf4e7;--webtoon-dock-height:calc(78px + env(safe-area-inset-bottom,0px));background:var(--scene-bg);color:var(--scene-ink);word-break:keep-all;overflow-wrap:break-word}
.comic-landing[data-layout=romance]{--scene-night:#1b1019;--scene-glow:#f0c6bd;--scene-accent:#993d54;--scene-bg:#f8efe6;--scene-line:#d7bfb1}
.comic-landing[data-layout=letter]{--scene-night:#351d28;--scene-glow:#efd0c1;--scene-accent:#944754;--scene-bg:#faf1e7;--scene-line:#dcc1b5}
.comic-landing[data-layout=impact]{--scene-night:#0c0c12;--scene-glow:#e7bac6;--scene-accent:#7b3655;--scene-bg:#f2eee8;--scene-line:#cfc0bc}
.comic-landing[data-layout=noir]{--scene-night:#101616;--scene-glow:#d3bf93;--scene-accent:#776043;--scene-bg:#eae5d8;--scene-line:#c8bd9f}
.comic-landing[data-layout=journey]{--scene-night:#112921;--scene-glow:#d2dcb4;--scene-accent:#476347;--scene-bg:#f1f1e4;--scene-line:#c4ceb0}
.comic-landing[data-layout=tea]{--scene-night:#382d25;--scene-glow:#ead6ae;--scene-accent:#8a6740;--scene-bg:#fcf4e5;--scene-line:#dfc9a6}
.comic-landing[data-layout=stars]{--scene-night:#14152e;--scene-glow:#d8c7ed;--scene-accent:#75559b;--scene-bg:#f0edf4;--scene-line:#cfc3dd}
.comic-landing[data-layout=season]{--scene-night:#223d30;--scene-glow:#e6e2b5;--scene-accent:#617340;--scene-bg:#f5f1dd;--scene-line:#d6cfac}
.comic-landing[data-layout=tarot]{--scene-night:#221426;--scene-glow:#e9bdde;--scene-accent:#824273;--scene-bg:#f6ecf0;--scene-line:#d6bdcf}
.comic-landing h1,.comic-landing h2,.comic-landing h3,.comic-landing p,.comic-landing blockquote,.comic-landing figcaption{margin:0;word-break:keep-all;overflow-wrap:break-word}
.comic-landing h2,.comic-landing h3{font-family:'Moon Batang',serif;font-weight:700}
.scene-topbar{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 12px;color:var(--scene-light)}
.scene-topbar>div{display:flex;align-items:center}
.scene-topbar .webtoon-wordmark{position:absolute;left:50%;transform:translateX(-50%);font-size:29px;opacity:.82}
.scene-topbar .save-button{position:static;width:40px;height:46px;background:transparent;color:inherit}
.scene-topbar .save-button.is-saved{color:var(--scene-glow)}
.landing-prologue{position:relative;min-height:790px;overflow:hidden;color:var(--scene-light);background:var(--scene-night);padding:105px 0 90px;text-align:center}
.opening-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.opening-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,#84809516,transparent 55%);pointer-events:none}
.opening-copy{position:relative;z-index:2;padding:0 28px}
.opening-label{display:block;font:13px/1.7 'Moon Batang',serif;color:var(--scene-glow);letter-spacing:2px}
.opening-motif{display:block;font:11px/1.6 'Moon Batang',serif;letter-spacing:5px;opacity:.6;margin:48px 0 24px}
.opening-copy h2{font:700 clamp(35px,10.4vw,47px)/1.55 'Moon Batang',serif;letter-spacing:-2px;text-shadow:0 3px 28px #0005;text-wrap:balance}
.opening-copy h2>span{display:block}
.opening-copy h2>span:last-child{color:var(--scene-glow)}
.opening-copy>p{font:400 20px/1.85 'Moon Batang',serif;letter-spacing:-.4px;margin-top:44px;color:#e8ddd2}
.opening-window{position:relative;margin-top:65px;isolation:isolate}
.opening-window:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--scene-night),transparent 25%,transparent 78%,var(--scene-night))}
.scene-scroll{position:absolute;bottom:28px;left:24px;right:24px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:48px;color:var(--scene-glow);font-size:10px;letter-spacing:2px;z-index:3}
.scene-scroll .icon{width:15px;height:15px}
.has-opening-art{min-height:960px;padding-top:115px}
.has-opening-art .opening-vignette{background:linear-gradient(#180f1977,transparent 45%,transparent 80%,var(--scene-night))}
.has-opening-art .opening-motif{margin-top:39px}
.has-opening-art .opening-copy>p{margin-top:36px}
.scene-story{background:var(--scene-night);color:var(--scene-light);outline:none;scroll-margin-top:0}
.story-thought{position:relative;padding:55px 28px 95px;text-align:center}
.story-thread{display:block;width:1px;height:68px;background:linear-gradient(transparent,var(--scene-glow));margin:0 auto 45px;opacity:.7}
.story-thought p{font:400 25px/1.8 'Moon Batang',serif;letter-spacing:-.7px}
.story-thought small{display:block;margin-top:27px;font-size:12px;letter-spacing:1px;color:var(--scene-glow)}
.comic-sequence{position:relative;margin:0;aspect-ratio:var(--panel-ratio);overflow:hidden;background:var(--scene-bg)}
.comic-sequence>img{position:absolute;top:0;left:0;display:block;width:100%;height:auto;transform:translateY(var(--panel-offset))}
.story-insert{position:relative;padding:0 23px 65px}
.story-insert .comic-sequence{outline:1px solid #e2cabe55;outline-offset:6px}
.paper-caption{position:relative;z-index:2;width:max-content;max-width:90%;margin:-8px 12px 0 auto;padding:19px 22px;text-align:left;background:#fffaf0;color:#3b2c29;font:400 17px/1.8 'Moon Batang',serif;box-shadow:4px 4px 0 #0002}
.story-closeup{position:relative;padding:28px 0 0}
.story-closeup .comic-sequence{border-top:1px solid #e2d7cc88;border-bottom:1px solid #e2d7cc88}
.closeup-caption{position:relative;padding:28px 31px 0;text-align:right;font:400 20px/1.8 'Moon Batang',serif;color:var(--scene-glow)}
.story-turn{padding:38px 29px 96px;text-align:center}
.story-turn>span{display:block;font:22px/1.8 serif;opacity:.5;margin-bottom:45px}
.story-turn h2{font-size:32px;line-height:1.75;letter-spacing:-1px;color:var(--scene-glow)}
.story-meeting{position:relative;margin:0;overflow:hidden}
.story-meeting>img{width:100%;height:auto}
.story-meeting:after{content:'';position:absolute;inset:0;background:linear-gradient(var(--scene-night),transparent 16%,transparent 62%,var(--scene-night));pointer-events:none}
.story-meeting figcaption{position:absolute;bottom:30px;left:30px;right:30px;z-index:1;font:700 24px/1.6 'Moon Batang',serif;text-align:center;text-shadow:0 2px 9px #0009}
.story-dialogue{position:relative;padding-top:70px;background:var(--scene-bg);color:var(--scene-ink)}
.story-dialogue:before{content:'';position:absolute;top:0;left:0;right:0;height:75px;background:linear-gradient(var(--scene-night),transparent)}
.dialogue-bubble{position:relative;z-index:2;width:calc(100% - 58px);max-width:340px;margin:0 auto 32px;padding:30px 27px 35px;border:1px solid #675749;border-radius:50%/43%;background:#fffdf8;text-align:center;box-shadow:2px 4px 0 #40342c0d}
.dialogue-bubble:after{content:'';position:absolute;bottom:-16px;right:22%;width:20px;height:28px;border-right:1px solid #675749;background:#fffdf8;transform:skewY(-43deg) rotate(28deg);clip-path:polygon(0 0,100% 0,100% 100%)}
.dialogue-bubble>span{display:block;font:12px/1.5 'Pretendard Variable',sans-serif;color:var(--scene-accent);letter-spacing:1px;margin-bottom:12px}
.dialogue-bubble blockquote{font:400 21px/1.6 'Moon Batang',serif}
.character-reveal{position:relative;background:var(--scene-night);color:var(--scene-light);text-align:center;overflow:hidden}
.reveal-preface{padding:75px 25px 40px;background:var(--scene-night)}
.scene-seal{display:block;width:max-content;margin:0 auto 27px;border:1px solid currentColor;color:var(--scene-accent);font:14px/1.5 serif;writing-mode:vertical-rl;letter-spacing:3px;padding:9px 5px}
.reveal-preface .scene-seal{color:var(--scene-glow)}
.reveal-preface>p{font:400 24px/1.75 'Moon Batang',serif;color:var(--scene-glow)}
.reveal-portrait{position:relative}
.scene-art{width:100%;aspect-ratio:2/3;background-image:var(--scene-image);background-size:var(--scene-size);background-position:var(--scene-position);background-repeat:no-repeat;background-color:var(--scene-night)}
.reveal-shade{position:absolute;inset:0;background:linear-gradient(var(--scene-night),transparent 18%,transparent 50%,var(--scene-night))}
.reveal-side-note{position:absolute;top:28%;right:24px;writing-mode:vertical-rl;font:14px/1.8 'Moon Batang',serif;letter-spacing:4px;text-shadow:0 2px 8px #000}
.character-title{position:relative;z-index:1;margin-top:-95px;padding:0 27px 62px}
.comic-character-name{display:block;font:700 21px/1.5 'Moon Batang',serif;letter-spacing:7px;color:var(--scene-glow);margin-bottom:12px}
.character-title h1{font:700 57px/1.35 'Moon Batang',serif;letter-spacing:-3px}
.character-title h1.is-long{font-size:38px;line-height:1.5;letter-spacing:-1.4px}
.comic-title-art{width:100%;height:auto;max-height:145px;object-fit:contain;filter:drop-shadow(0 2px 18px #0006)}
.character-title>p{font:400 17px/1.8 'Moon Batang',serif;margin-top:17px;color:#e5d8ca}
.title-ornament{display:block;font-size:23px;color:var(--scene-glow);margin:35px auto 0}
.scene-introduction{position:relative;padding:90px 35px 83px;text-align:center;background:radial-gradient(ellipse at top,#fffdfa,var(--scene-bg) 70%)}
.scene-label{display:block;font:12px/1.7 'Pretendard Variable',sans-serif;letter-spacing:1.8px;color:var(--scene-accent)}
.scene-introduction h2{font-size:33px;line-height:1.7;letter-spacing:-1px;margin:28px 0}
.scene-introduction>p{font:400 18px/1.95 'Moon Batang',serif;color:var(--scene-muted)}
.intro-signature{font:31px/1.5 'Moon Brush',serif;color:var(--scene-accent);margin-top:28px}
.scene-outline{padding:78px 31px 88px;background:var(--scene-night);color:var(--scene-light)}
.scene-outline>.scene-label{color:var(--scene-glow);text-align:center}
.scene-outline>h2,.scene-choices>h2,.scene-sample>h2{font-size:31px;line-height:1.6;letter-spacing:-1px;text-align:center;margin:24px 0 40px}
.scene-outline ol{list-style:none;margin:0;padding:0}
.scene-outline li{position:relative;display:flex;gap:21px;padding:34px 0;border-top:1px solid #c2af9433}
.scene-outline li>span{font:400 33px/1.3 'Moon Batang',serif;color:var(--scene-glow)}
.scene-outline h3{font-size:21px;line-height:1.65}
.scene-outline li p{font:14px/1.85 'Pretendard Variable',sans-serif;margin-top:10px;color:#c4beb1}
.scene-choices{padding:80px 26px;background:var(--scene-bg)}
.scene-choices>.scene-label{text-align:center}
.scene-choices .webtoon-choice-options{gap:0;border-top:1px solid var(--scene-line)}
.scene-choices .webtoon-choice-options>button{position:relative;min-height:79px;padding:17px 5px;border-bottom:1px solid var(--scene-line);color:var(--scene-muted);transition:color .18s,background .18s}
.scene-choices .webtoon-choice-options>button>span{font:18px/1.5 'Moon Batang',serif;color:var(--scene-accent);width:25px;flex:none}
.scene-choices .webtoon-choice-options strong{font:400 19px/1.65 'Moon Batang',serif}
.scene-choices .webtoon-choice-options>button.is-selected{color:var(--scene-accent);background:#fff8ed}
.scene-choices .webtoon-choice-options>button.is-selected strong{font-weight:700}
.scene-answer{padding:34px 8px 10px}
.scene-answer>span{font-size:12px;color:var(--scene-accent);letter-spacing:1px}
.scene-answer h3{font-size:23px;line-height:1.65;margin:16px 0}
.scene-answer p{font-size:15px;line-height:1.95;color:var(--scene-muted)}
.scene-text-link{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:54px;margin-top:21px;padding:12px 10px;color:var(--scene-accent);border-bottom:1px solid var(--scene-accent);font-size:14px}
.scene-text-link .icon{width:18px;height:18px}
.scene-sample{position:relative;padding:85px 25px 70px;background:#e6dccb;scroll-margin-top:20px;outline:none}
.scene-sample>.scene-label{text-align:center}
.sample-instruction{text-align:center;font-size:13px;color:var(--scene-muted);margin:-20px 0 33px!important}
.scene-sample .webtoon-book-tabs{gap:5px}
.scene-sample .webtoon-book-tabs>button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:78px;padding:12px 4px;background:#d5c5ac;color:#645b4b;font-size:12px;line-height:1.6;border:1px solid #c1af94;border-bottom:0;border-radius:3px 3px 0 0}
.scene-sample .webtoon-book-tabs>button>span{font:18px/1.4 'Moon Batang',serif}
.scene-sample .webtoon-book-tabs>button[aria-selected=true]{background:var(--scene-night);color:var(--scene-light);border-color:var(--scene-night)}
.scene-sample .webtoon-book{min-height:520px;border:1px solid #c1aa89;border-left:7px solid #a88e6b;background:linear-gradient(90deg,#e6d8bf,#fffaf0 5%,#fffaf0 95%,#ece0ca);box-shadow:4px 5px 0 #c2ac8a,8px 10px 0 #b79e78,0 20px 30px #7b5a4022}
.scene-sample .webtoon-book-page{min-height:520px;padding:37px 25px 29px;text-align:center}
.webtoon-book-number{font:12px/1.6 'Moon Batang',serif;letter-spacing:3px;color:#987850}
.webtoon-book-topic{font-size:12px;line-height:1.7;color:#887454;margin-top:9px}
.scene-sample .webtoon-book-page h3{font-size:27px;line-height:1.6;letter-spacing:-1px;margin-top:26px;color:#393027}
.webtoon-book-rule{background:#c3a67e;margin:25px auto}
.scene-sample .webtoon-book-page>p{font:400 18px/1.9 'Moon Batang',serif;text-align:left;color:#655742}
.scene-sample .webtoon-book-page blockquote{font:400 16px/1.8 'Moon Batang',serif;width:100%;margin:27px 0 24px;padding:18px 0;border-top:1px solid #d9c8a9;border-bottom:1px solid #d9c8a9;color:#826542}
.webtoon-page-number{font:12px/1.6 'Moon Batang',serif;color:#a18c6f}
.webtoon-book-controls>span{font-size:12px;color:#776345;letter-spacing:3px}
.scene-sample .webtoon-book-controls button{width:48px;height:48px;border:1px solid #baa17f;border-radius:50%;background:#fff9ee;color:#765732}
.scene-preview-note{font-size:11px;line-height:1.8;text-align:center;color:#756550;margin-top:25px!important}
.scene-faq{padding:56px 26px 70px;background:var(--scene-bg)}
.scene-faq h2{font-size:23px;line-height:1.6;margin-bottom:25px}
.scene-faq details{border-bottom:1px solid var(--scene-line)}
.scene-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:65px;padding:19px 0;font-size:14px;line-height:1.7;list-style:none;cursor:pointer}
.scene-faq summary::-webkit-details-marker{display:none}
.scene-faq .icon{width:16px;height:16px;flex:none}
.scene-faq details[open] .icon{transform:rotate(180deg)}
.scene-faq details p{padding:0 0 24px;font-size:14px;line-height:1.9;color:var(--scene-muted)}
.scene-ending{position:relative;overflow:hidden;background:var(--scene-night);color:var(--scene-light);text-align:center}
.scene-ending-copy{position:relative;padding:68px 30px 70px}
.ending-moon{display:block;font:56px/1 serif;color:var(--scene-glow);margin:0 auto 29px}
.scene-ending .scene-label{color:var(--scene-glow);font-family:'Moon Batang',serif;font-size:17px}
.scene-ending h2{font-size:31px;line-height:1.8;letter-spacing:-1px;margin:26px 0}
.scene-ending p{font:17px/1.85 'Moon Batang',serif;color:#dfd1c2}
.scene-ending .webtoon-start{margin-top:38px;background:#ead8b7;color:#463227;border:1px solid #fff0d4;box-shadow:inset 0 0 0 3px #dcc4a0;border-radius:3px}
.scene-ending small{display:block;font-size:11px;line-height:1.7;color:var(--scene-glow);margin-top:18px}
.comic-invitation-image{width:100%;height:auto}
.scene-ending.has-illustration:before{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,var(--scene-night) 45%);z-index:1;pointer-events:none}
.has-illustration .scene-ending-copy{margin-top:-140px;z-index:2;padding-top:0}
.has-illustration .ending-moon{display:none}
.scene-footer{padding:38px 20px 25px;text-align:center;background:var(--scene-bg);color:var(--scene-muted)}
.scene-footer>div{display:flex;justify-content:center;gap:18px;margin:14px 0;font-size:12px}
.scene-footer a,.scene-footer button{min-height:44px;display:inline-flex;align-items:center}
.scene-footer p{font-size:11px;line-height:1.8}
.comic-landing .webtoon-dock{height:var(--webtoon-dock-height);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));gap:6px;background:#fffcf7fa;border-top:1px solid var(--scene-line);box-shadow:0 -4px 24px #150c150d}
.comic-landing .webtoon-dock-home{width:42px;min-width:42px;color:var(--scene-muted)}
.comic-landing .webtoon-dock .save-button{width:40px;min-width:40px;height:48px;color:var(--scene-muted)}
.comic-landing .webtoon-dock .save-button.is-saved{color:var(--scene-accent)}
.comic-landing .webtoon-dock .webtoon-start{flex:1;min-height:54px;padding:12px;background:var(--scene-accent);color:#fff8ed;border:1px solid #ffffff33;box-shadow:inset 0 0 0 3px #ffffff10;border-radius:4px;font-size:14px}
.comic-landing button:focus-visible,.comic-landing a:focus-visible,.comic-landing summary:focus-visible,.webtoon-book:focus-visible{outline:3px solid var(--scene-accent);outline-offset:4px}
/* Each storyteller has a distinct page rhythm and framing language. */
[data-layout=impact] .opening-copy h2{font-size:48px;line-height:1.48;letter-spacing:-2.8px}
[data-layout=impact] .opening-window{margin:80px 0 25px;transform:rotate(-4deg) scale(1.05)}
[data-layout=impact] .story-closeup{transform:rotate(3deg) scale(1.04);margin:0 0 20px}
[data-layout=impact] .closeup-caption{padding-right:38px;transform:rotate(-3deg)}
[data-layout=impact] .story-turn h2{font-size:39px;line-height:1.55}
[data-layout=impact] .dialogue-bubble{border-radius:7px;transform:rotate(-3deg);font-weight:700}
[data-layout=impact] .scene-outline li>span{font-size:40px}
[data-layout=noir] .opening-copy{text-align:left;padding-left:40px}
[data-layout=noir] .opening-copy h2{font-size:43px;line-height:1.7}
[data-layout=noir] .opening-motif{writing-mode:vertical-rl;position:absolute;right:29px;top:25px;margin:0}
[data-layout=noir] .opening-copy>p{font-size:18px;border-left:1px solid #b79e7744;padding-left:18px}
[data-layout=noir] .opening-window{margin:70px 27px 35px;border:1px solid #bbaa7666;outline:1px solid #bbaa7622;outline-offset:7px}
[data-layout=noir] .story-thought{text-align:left;padding-left:38px}
[data-layout=noir] .story-thread{margin-left:0}
[data-layout=noir] .story-closeup{padding-left:40px}
[data-layout=noir] .dialogue-bubble{margin-right:25px;border-radius:5px;max-width:75%}
[data-layout=noir] .scene-outline>h2{text-align:left}
[data-layout=letter] .opening-copy h2{font-size:43px;line-height:1.75}
[data-layout=letter] .opening-window{margin:70px 30px 30px;box-shadow:8px 8px 0 #f4dccb15;transform:rotate(-3deg)}
[data-layout=letter] .story-closeup{padding-left:22px;padding-right:22px}
[data-layout=letter] .story-closeup .comic-sequence{border:8px solid #faf0e7;transform:rotate(3deg)}
[data-layout=letter] .scene-introduction{margin:0;padding-left:43px;padding-right:43px}
[data-layout=letter] .intro-signature{text-align:right}
[data-layout=tea] .landing-prologue{background:#f3e9d8;color:#503e2b;padding-top:105px}
[data-layout=tea] .scene-topbar{color:#6d533b}
[data-layout=tea] .opening-label,[data-layout=tea] .opening-copy>p,[data-layout=tea] .opening-copy h2>span:last-child,[data-layout=tea] .scene-scroll{color:#80633f}
[data-layout=tea] .opening-copy h2{font-size:37px;line-height:1.9;letter-spacing:-1.3px;text-shadow:none}
[data-layout=tea] .opening-window{margin:65px 30px 0;border:1px solid #a78e6033;border-radius:50% 50% 0 0;overflow:hidden}
[data-layout=tea] .opening-window:after{background:linear-gradient(transparent 70%,#f3e9d8)}
[data-layout=tea] .story-thought{padding-top:85px}
[data-layout=tea] .story-dialogue{padding-top:90px}
[data-layout=tea] .dialogue-bubble{border-radius:48%/42%}
[data-layout=journey] .opening-window{margin-top:95px;clip-path:polygon(0 0,100% 9%,100% 100%,0 91%)}
[data-layout=journey] .story-closeup{padding-right:40px}
[data-layout=journey] .closeup-caption{text-align:left}
[data-layout=journey] .story-turn{padding-top:65px;padding-bottom:125px}
[data-layout=journey] .scene-outline li{padding:38px 0}
[data-layout=stars] .opening-vignette{background:radial-gradient(circle at 25% 28%,#cebfed88 0 1px,transparent 2px),radial-gradient(circle at 80% 37%,#fff8cd 0 1px,transparent 2px),radial-gradient(circle at 15% 49%,#cebfed 0 1px,transparent 2px),radial-gradient(ellipse at 50% 32%,#6356a525,transparent 60%)}
[data-layout=stars] .opening-copy h2{text-shadow:0 0 25px #9985c94d}
[data-layout=stars] .opening-window{margin:70px 22px 20px;border:1px solid #cdb9df55;outline:1px solid #cdb9df22;outline-offset:8px}
[data-layout=stars] .scene-outline li>span{font-size:28px;border:1px solid #e1c9ff44;border-radius:50%;width:50px;height:50px;line-height:50px;text-align:center;flex:none}
[data-layout=season] .landing-prologue{background:#f3f0de;color:#38492d}
[data-layout=season] .scene-topbar{color:#617348}
[data-layout=season] .opening-copy h2{text-shadow:none;font-size:42px}
[data-layout=season] .opening-copy h2>span:last-child,[data-layout=season] .opening-label,[data-layout=season] .opening-copy>p,[data-layout=season] .scene-scroll{color:#6a704b}
[data-layout=season] .opening-window{margin:65px 24px 20px;border:10px solid #fffbee;transform:rotate(3deg);box-shadow:0 8px 22px #79734e1c}
[data-layout=season] .opening-window:after{background:none}
[data-layout=season] .story-closeup{padding:18px 35px}
[data-layout=season] .story-closeup .comic-sequence{border:7px solid #fff8e9;transform:rotate(-3deg)}
[data-layout=tarot] .opening-window{margin:60px 45px 20px;border:1px solid #cf9fc0;outline:1px solid #cf9fc044;outline-offset:8px;border-radius:70px 70px 5px 5px;overflow:hidden}
[data-layout=tarot] .story-closeup{padding:20px 23px}
[data-layout=tarot] .story-turn h2{font-size:35px}
[data-layout=tarot] .dialogue-bubble{margin-right:24px}
[data-layout=tarot] .scene-outline{background:#34223a}
[data-layout=romance] .story-turn h2{font-size:36px}
[data-layout=romance] .dialogue-bubble{margin-right:24px}
[data-layout=romance] .character-title{margin-top:-115px}
[data-layout=romance] .scene-outline{background:#482330}
[data-layout=impact] .scene-sample,[data-layout=stars] .scene-sample,[data-layout=tarot] .scene-sample{background:#e6deeb}
[data-layout=journey] .scene-sample,[data-layout=season] .scene-sample{background:#e3e4cf}
@media(max-width:374px){
 .landing-prologue{min-height:745px;padding-top:100px}.has-opening-art{min-height:850px}.opening-copy{padding:0 21px}.opening-copy h2{font-size:33px;letter-spacing:-1.5px}.opening-copy>p{font-size:17px}.opening-motif{margin-top:36px}
 [data-layout=impact] .opening-copy h2{font-size:38px}[data-layout=noir] .opening-copy h2,[data-layout=letter] .opening-copy h2,[data-layout=season] .opening-copy h2{font-size:35px}[data-layout=tea] .opening-copy h2{font-size:32px}
 [data-layout=noir] .opening-copy{padding-left:28px}.story-thought p{font-size:22px}.story-turn h2{font-size:28px}[data-layout=impact] .story-turn h2{font-size:32px}[data-layout=romance] .story-turn h2,[data-layout=tarot] .story-turn h2{font-size:30px}
 .dialogue-bubble{width:calc(100% - 42px);padding:26px 23px 31px}.dialogue-bubble blockquote{font-size:19px}.story-dialogue{padding-top:60px}.paper-caption{font-size:15px;padding:17px}.closeup-caption{font-size:18px}
 .character-title h1{font-size:48px}.character-title h1.is-long{font-size:32px}.comic-character-name{font-size:18px}.reveal-preface>p{font-size:21px}.character-title>p{font-size:15px}
 .scene-introduction{padding:72px 27px}.scene-introduction h2{font-size:29px}.scene-introduction>p{font-size:17px}.scene-outline,.scene-choices,.scene-sample{padding:65px 22px}.scene-outline>h2,.scene-choices>h2,.scene-sample>h2{font-size:28px}.scene-outline h3{font-size:19px}.scene-choices .webtoon-choice-options strong{font-size:17px}
 .scene-sample .webtoon-book-page{padding:32px 20px 25px}.scene-sample .webtoon-book-page h3{font-size:24px}.scene-sample .webtoon-book-page>p{font-size:17px}.scene-ending h2{font-size:27px}.scene-ending-copy{padding-left:24px;padding-right:24px}
 .comic-landing .webtoon-dock{padding-left:8px;padding-right:8px;gap:3px}.comic-landing .webtoon-dock .webtoon-start{font-size:13px;padding:10px 7px}
}
@media(prefers-reduced-motion:reduce){.comic-landing *{scroll-behavior:auto!important;transition:none!important}}