/* A scrolling character-led pre-purchase story, with a non-transactional CTA. */
dialog.teaser-mode{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#05070b;overflow-y:auto;overscroll-behavior:contain}
.teaser-mode>.close{right:max(12px,calc((100vw - 480px)/2 + 12px));top:13px;z-index:70;background:#121b22e6;color:#eaffff}
.teaser-story{max-width:480px;margin:auto;background:#080e14;--teaser-accent:#91e6df;color:#f6f9fa;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.teaser-story.noel{--teaser-accent:#f4b9cd;background:#160e15}
.teaser-header{height:60px;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:0 55px 0 18px;background:#071017ed;backdrop-filter:blur(12px);border-bottom:1px solid #98cbd51f}
.teaser-header button{font-size:10px;color:#b6cbcf;flex-shrink:0;padding:5px 0}.teaser-header>span{font-size:10px;color:#e4eef1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teaser-hero{height:min(790px,92svh);min-height:550px;position:relative;overflow:hidden;isolation:isolate}
.teaser-illustration{display:block;width:100%;height:auto}.teaser-hero>.teaser-illustration{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.teaser-hero>.portrait{background-size:200% auto;background-position:100% 10%}
.teaser-hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#080e14 1%,#080e14d4 19%,transparent 57%)}.noel .teaser-hero-shade{background:linear-gradient(0deg,#160e15,#160e15d4 19%,transparent 57%)}
.teaser-hero-copy{position:absolute;bottom:25px;left:27px;right:25px;text-align:left}.teaser-hero-copy>small{font-size:9px;letter-spacing:2px;color:var(--teaser-accent)}
.teaser-hero-copy h1{font-size:37px;line-height:1.5;letter-spacing:-1.8px;font-weight:800;margin:17px 0 20px}.teaser-hero-copy p{font-size:12px;color:#b7cad1;line-height:1.9}.teaser-hero-copy>span{display:block;text-align:center;color:var(--teaser-accent);font-size:23px;margin-top:36px}
.teaser-prologue{padding:55px 29px 75px;text-align:center}.teaser-speaker{display:block;font-size:10px;color:var(--teaser-accent);letter-spacing:1px;margin-bottom:23px}.teaser-prologue>p{font-size:24px;letter-spacing:-.8px;line-height:1.9;font-weight:600}.teaser-prologue>small{display:block;font-size:10px;line-height:2;color:#7f9ba8;margin-top:25px}
.teaser-chapter{position:relative;margin-bottom:45px}.teaser-chapter-heading{padding:48px 27px 33px;text-align:center;border-top:1px solid #7596a12b;margin:0 24px}.teaser-chapter-heading>small{font-size:9px;letter-spacing:3px;color:var(--teaser-accent)}.teaser-chapter-heading h2{font-size:30px;color:#eefbff;letter-spacing:-1px;margin-top:16px}.teaser-chapter-heading>p{font-size:19px;color:#a7c4cd;line-height:1.9;letter-spacing:-.6px;margin-top:24px}
.teaser-chapter{scroll-margin-top:72px}
.teaser-comic-cut{position:relative;margin:0 17px;border:1px solid #3b61686b;overflow:hidden;background:#101e24}.teaser-comic-cut .portrait{min-height:650px;background-size:200% auto;background-position:100% 0}
/* CHAPTER 컷 대사: 그림 하단 그라데이션 위에 캐릭터 이름과 대사 */
.webtoon{--teaser-accent:#91e6df}.webtoon.noel{--teaser-accent:#f4b9cd}.webtoon.mate{--teaser-accent:#ffd37a}.webtoon.moon{--teaser-accent:#c9d8ff}.webtoon.keeper{--teaser-accent:#f3cf6b}.webtoon.mujin{--teaser-accent:#ff9b8a}
.teaser-speech{position:absolute;left:0;right:0;bottom:0;padding:110px 26px 28px;background:linear-gradient(0deg,#071014f2 0%,#071014b8 48%,transparent 100%);color:#fff;text-align:left;text-shadow:0 1px 8px #000c}
.teaser-speech>span{display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--teaser-accent);margin-bottom:9px}.teaser-speech>p{margin:0;font-size:15px;line-height:1.85;font-weight:600;letter-spacing:-.4px}
.teaser-comic-cut.caption-below .teaser-speech{position:static;padding:20px 22px 24px;background:#0b1419;text-shadow:none}
.teaser-chapter-notes{margin:25px 30px 0;border-left:1px solid #6a9ba46b;padding:4px 0 4px 18px}.teaser-chapter-notes>small{font-size:9px;color:#7e9da9;letter-spacing:.5px;display:block;margin-bottom:17px}.teaser-chapter-notes>p{font-size:12px;color:#c3dbe1;line-height:1.9;margin:11px 0}.teaser-chapter-notes>p>span{font-size:10px;color:var(--teaser-accent);margin-right:11px}
.teaser-last-cut{height:700px;position:relative;overflow:hidden;margin-top:70px}.teaser-last-cut>.teaser-illustration{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}.teaser-last-cut>.portrait{background-size:200% auto;background-position:100% 0}.teaser-last-shade{position:absolute;inset:0;background:linear-gradient(#080e1480,transparent 35%,#080e14f5 90%)}.noel .teaser-last-shade{background:linear-gradient(#160e1580,transparent 35%,#160e15f5 90%)}.teaser-last-copy{position:absolute;bottom:47px;left:30px;right:30px;text-align:center}.teaser-last-copy>span{font-size:10px;color:var(--teaser-accent);letter-spacing:1px}.teaser-last-copy>p{font-size:24px;font-weight:600;line-height:1.8;letter-spacing:-.8px;margin-top:22px}
.teaser-offer{padding:45px 29px 50px;text-align:center;scroll-margin-top:80px}.teaser-offer .kicker{font-size:9px;color:var(--teaser-accent);letter-spacing:1.6px}.teaser-offer h2{font-size:24px;line-height:1.5;margin:17px 0 13px}.teaser-offer>p:not(.kicker){font-size:11px;line-height:2;color:#a2bbc7}.teaser-included{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:25px 0 35px}.teaser-included span{font-size:9px;border:1px solid #48727c66;border-radius:5px;padding:7px 9px;color:#b3cfd8}.teaser-price{border-top:1px solid #6a8f9f44;border-bottom:1px solid #6a8f9f44;padding:22px 0;display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.teaser-price span{font-size:11px;color:#a5bbc7}.teaser-price strong{font-size:19px;color:#e8f8fc}.teaser-purchase{display:block;width:100%;padding:16px;background:#253d47;border:1px solid #50748166;color:#c1dbe5;border-radius:8px;font-size:13px;font-weight:700}.teaser-purchase:disabled{opacity:.85;cursor:default}.teaser-offer .teaser-notice{font-size:9px!important;color:#859eaa!important;margin-top:19px}.teaser-edit{font-size:10px;color:#a4c2cd;text-decoration:underline;text-underline-offset:4px;margin-top:25px}
.teaser-sticky{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,480px);padding:25px 15px max(14px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#060d15 28%);z-index:55}.teaser-sticky>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--teaser-accent);border:1px solid #d6fff580;border-radius:9px;padding:17px 19px;color:#112b31;font-size:13px;font-weight:800;box-shadow:0 0 25px #55dbcf17}.noel .teaser-sticky>button{color:#401d2c;border-color:#ffdeeb99}.teaser-sticky>button span{font-size:19px}
.chapter-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media(max-width:400px){.teaser-hero{min-height:500px}.teaser-hero-copy{left:23px;right:23px}.teaser-hero-copy h1{font-size:30px;line-height:1.55}.teaser-prologue{padding:43px 23px 58px}.teaser-prologue>p{font-size:21px}.teaser-chapter-heading{padding:40px 13px 30px;margin:0 19px}.teaser-chapter-heading h2{font-size:27px}.teaser-chapter-heading>p{font-size:17px}.teaser-comic-cut{margin:0 12px}.teaser-speech{padding:90px 20px 24px}.teaser-chapter-notes{margin:23px 24px 0;padding-left:15px}.teaser-chapter-notes>p{font-size:11px}.teaser-last-cut{height:610px}.teaser-last-copy{left:25px;right:25px}.teaser-last-copy>p{font-size:21px}.teaser-offer{padding:35px 23px 45px}.teaser-offer h2{font-size:22px}.teaser-sticky>button{font-size:12px;padding:15px 16px}}
.result-recommendations{padding:32px 24px;background:#0c1013;border-top:1px solid #243238}
.result-recommendations>small{color:#65ebdf;letter-spacing:.18em;font-size:11px}
.result-recommendations h2{font-size:24px;margin:12px 0}
.result-recommendations>p{color:#a9b5bc;font-size:14px;line-height:1.7;margin-bottom:24px}
.result-recommendation{display:flex;align-items:center;gap:14px;width:100%;padding:18px 14px;margin-top:10px;text-align:left;background:#151b20;color:#f6f9fa;border:1px solid #2a363d;border-radius:16px;cursor:pointer}
.result-recommendation:hover,.result-recommendation:focus-visible{border-color:#65ebdf;background:#1a272c}
.recommendation-symbol{display:grid;place-items:center;width:44px;height:50px;flex-shrink:0;border-radius:12px;background:#22343a;color:#85f4e9;font-size:26px}
.result-recommendation>span:nth-child(2){display:grid;gap:6px;min-width:0;flex:1}
.result-recommendation small{font-size:10px;color:#85f4e9}
.result-recommendation strong{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.result-recommendation span span{font-size:12px;color:#a9b5bc}
.result-recommendation>b{color:#85f4e9}
.result-ending .result-panel .chapter-art{object-position:50% 12%}
.comic-sales{background:#05090d}
.sales-opening{padding:72px 28px 45px;text-align:center;background:radial-gradient(ellipse at 50% 0,#14373b70,transparent 72%)}
.sales-opening small,.sales-offer>small{font-size:9px;letter-spacing:2px;color:#91e6df}
.sales-opening>p{font-size:37px;line-height:1.65;font-weight:800;letter-spacing:-1.5px;margin:25px 0}
.sales-opening>span{font-size:10px;color:#8aa6ad}
.sales-first-cut{position:relative;overflow:hidden;height:660px}
.sales-first-cut>img{width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.sales-dialogue{position:absolute;bottom:24px;left:24px;right:36px;background:#f7fcfd;color:#14262e;padding:23px 26px;border-radius:30px;box-shadow:5px 6px 0 #0005}
.sales-dialogue:before{content:'';position:absolute;top:-17px;left:45px;border:10px solid transparent;border-bottom-color:#f7fcfd}
.sales-dialogue>span{font-size:10px;color:#4c737a}
.sales-dialogue>p{font-size:22px;line-height:1.65;font-weight:700;margin-top:8px;overflow-wrap:anywhere}
.sales-gutter{text-align:center;padding:80px 24px 85px;line-height:2;color:#b9cbd1;font-size:18px}
.sales-gutter p+p{margin-top:30px}
.sales-gutter .sales-emphasis{color:#effffc;font-size:23px;font-weight:700;letter-spacing:-.7px}
.comic-sales .teaser-chapter{margin-bottom:0}
.sales-caption{padding:30px 26px 24px}
.sales-caption>span{font-size:10px;color:#91e6df;letter-spacing:2px}
.sales-caption h2{font-size:25px;line-height:1.6;margin-top:14px;letter-spacing:-.8px}
.comic-sales .sales-cut{margin:0;border:0;border-radius:0}
.sales-afterthought{text-align:center;padding:35px 24px 75px;line-height:1.9;font-size:15px;color:#bbd1d6}
.sales-afterthought>span{display:block;margin-top:22px;font-size:12px;color:#76999f}
.sales-pause{padding-top:20px}
.sales-signal{display:block;font-size:28px;letter-spacing:10px;color:#91e6df;margin-bottom:40px}
.comic-sales .sales-last-cut{margin-top:0}
.sales-offer{background:linear-gradient(#080e14,#0a1b20);padding-top:55px!important}
.sales-offer h2{font-size:29px;line-height:1.7;overflow-wrap:anywhere}
.sales-reading-order{display:flex;gap:7px;justify-content:center;align-items:center;flex-wrap:wrap;margin:28px 0 20px;font-size:11px;color:#c7e9e6}
.sales-reading-order i{font-style:normal;color:#507d82}
.sales-offer .teaser-purchase{margin-top:28px;padding:20px 12px;border-color:#80d7cf77;background:#234c4e;color:#d5fff8}
@media(max-width:400px){.sales-opening{padding-top:55px}.sales-opening>p{font-size:32px}.sales-first-cut{height:570px}.sales-dialogue>p{font-size:19px}.sales-gutter{font-size:16px}.sales-gutter .sales-emphasis{font-size:21px}.sales-caption h2{font-size:23px}.sales-afterthought{font-size:13px}.sales-offer h2{font-size:25px}}
.free-reading{margin:25px 18px 15px;padding:20px 0 30px;border-top:1px solid #518d9370;border-bottom:1px solid #518d9370}
.free-reading .sales-caption{padding:10px 10px 24px}
.free-reading-basis{display:flex;flex-wrap:wrap;gap:9px;margin:0 10px 25px;font-size:11px;color:#9dece0}
.free-reading-basis span{padding:8px 10px;background:#12282d;border:1px solid #31585e;border-radius:5px}
.free-reading-dialogue{padding:22px 20px;margin:15px 0;background:#f1fbfa;color:#172d34;border-radius:4px 25px 25px 25px}
.free-reading-dialogue>span{font-size:10px;color:#4f767e}
.free-reading-dialogue>p{font-size:17px;line-height:1.9;margin-top:12px;word-break:keep-all}
.free-reading-dialogue.candid{margin-left:15px;background:#15282e;color:#d3eae8;border:1px solid #3d646a;border-radius:25px 4px 25px 25px}
.free-reading-dialogue.candid>span{color:#95cfc7}
.free-reading-bridge{font-size:16px;line-height:2;text-align:center;margin:35px 8px;color:#d2e8e9}
.free-reading-method{font-size:11px;line-height:1.9;color:#8ba9b0;padding:0 10px}
.free-reading-method summary{cursor:pointer;color:#abc9cb}
.free-reading-method p{margin-top:15px}
.continuous-story{background:#05090d}
.continuous-story .story-opening{height:auto;min-height:0;max-height:none;padding:20px 24px 12px}
.story-opening small{font-size:9px;letter-spacing:2px;color:#82cfc8}
.story-opening h1{font-size:31px;line-height:1.5;letter-spacing:-1px;margin:9px 0 6px}
.story-opening>p{font-size:12px;line-height:1.8;color:#8eaeb7}
.story-panel{position:relative;padding-bottom:15px;scroll-margin-top:65px}
.story-panel>.teaser-illustration{width:100%;height:auto;display:block}
.story-dialogue{position:relative;margin:-28px 23px 0;padding:23px 25px;background:#12272e;color:#d7f3ef;border:1px solid #3b646c;border-radius:5px 28px 28px 28px;z-index:1;box-shadow:0 8px 24px #0004}
.story-dialogue:before{content:'';position:absolute;top:-18px;left:34px;border:10px solid transparent;border-bottom-color:#12272e}
.story-dialogue>span{font-size:10px;color:#4e747e}
.story-dialogue>p{font-size:19px;line-height:1.85;letter-spacing:-.4px;margin:0;overflow-wrap:anywhere}
.story-smirk .story-dialogue,.story-invite .story-dialogue{margin-left:40px;border-radius:28px 5px 28px 28px}
.story-smirk .story-dialogue:before,.story-invite .story-dialogue:before{left:auto;right:35px}
.story-lock .story-dialogue{background:#12272e;color:#d7f3ef;border-color:#3b646c}
.story-lock .story-dialogue:before{border-bottom-color:#12272e}
.story-narration{padding:42px 25px;text-align:center;color:#8eacb7;font-size:13px;line-height:2.1}
.visitor-line{font-size:17px;color:#e0f1f2;padding:55px 20px 70px}
.story-beat{text-align:center;letter-spacing:12px;color:#72bab7;padding:34px 20px;font-size:23px}
.story-read .free-reading{margin:0;padding:0 23px 12px;border:0;position:relative}
.story-read .free-reading .sales-caption{padding:25px 4px 0}
.story-read .free-reading .sales-caption>span{font-size:8px;letter-spacing:1px}
.story-read .free-reading .sales-caption h2{font-size:23px;margin-top:10px}
.story-read .free-reading-dialogue{margin:18px 0 0;border-radius:5px 28px 28px 28px;background:#12272e;color:#d7f3ef;border:1px solid #3b646c}
.story-read .free-reading-dialogue>p{font-size:19px;line-height:1.9;margin:0}
.story-read .free-reading-method{margin-top:20px;font-size:10px}
.story-offer{margin-top:60px}
.story-open>.teaser-illustration,.story-invite>.teaser-illustration{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.story-smirk{margin:0 14px}
.story-smirk>.teaser-illustration{aspect-ratio:5/4;object-fit:cover;object-position:50% 21%}
.story-risk>.teaser-illustration{aspect-ratio:1;object-fit:cover;object-position:50% 24%}
@media(max-width:400px){.story-opening h1{font-size:28px}.story-dialogue{margin-left:18px;margin-right:18px;padding:20px}.story-dialogue>p,.story-read .free-reading-dialogue>p{font-size:17px}.story-read .free-reading{padding-left:18px;padding-right:18px}}

.teaser-sticky[hidden]{display:none}
.result-copy .result-paragraphs>p{margin:0 0 1.4em;line-height:1.95}.result-copy .result-paragraphs>p:last-child{margin-bottom:0}
.test-result-preview{margin:16px 0 12px;padding:16px;border:1px dashed #658d87;border-radius:12px;background:#11221f}.test-result-preview button{width:100%;padding:12px 14px;border:1px solid #63d8be;border-radius:8px;color:#aaf6e4;background:#193932;font-weight:700}.test-result-preview button:disabled{opacity:.45;cursor:not-allowed}.test-result-preview p{font-size:12px!important;line-height:1.7!important;color:#a8bfb8!important;margin:10px 0 0!important}

.teaser-story.mate{--teaser-accent:#ffd37a;background:#17130d}
.teaser-story.moon{--teaser-accent:#c9d8ff;background:#0e1220}
.teaser-story.keeper{--teaser-accent:#f3cf6b;background:#161208}
.teaser-story.mujin{--teaser-accent:#ff9b8a;background:#170b0b}