/* Shared moonlit plum and gold controls, including standalone information pages. */
:root{--control-gold:#efcc96;--control-ink:#fff0d3;--control-plum:linear-gradient(115deg,#482737,#653744 48%,#452333)}
body :is(button,a.action,a.quiet,.image-save-dialog a[download]){
 position:relative;isolation:isolate;box-sizing:border-box;min-height:44px;padding:12px 18px;
 border:1px solid var(--control-gold);border-radius:12px;background:var(--control-plum);color:var(--control-ink);
 font-family:'Noto Serif KR',serif;font-weight:600;line-height:1.6;text-align:center;text-decoration:none;
 box-shadow:0 5px 16px #0005,0 0 14px #dfa76416,inset 0 1px 0 #fff1ce33;
 transition:background .18s,box-shadow .18s,transform .18s;overflow-wrap:anywhere;
}
body :is(button,a.action,a.quiet,.image-save-dialog a[download])::before{
 content:'';position:absolute;inset:4px;border:1px solid #dfb57c66;border-radius:8px;pointer-events:none;
}
body :is(button,a.action,a.quiet,.image-save-dialog a[download]):hover{
 background:linear-gradient(115deg,#5a3041,#784652 48%,#562c3e);color:#fff5df;
 box-shadow:0 6px 20px #0006,0 0 24px #dfa76435,inset 0 1px 0 #fff1ce55;
}
body :is(button,a.action,a.quiet,.image-save-dialog a[download]):focus-visible{outline:2px solid #fff0ce;outline-offset:4px}
body :is(button,a.action,a.quiet,.image-save-dialog a[download]):active{transform:translateY(1px)}
body button:disabled{opacity:.55;cursor:wait;filter:saturate(.55);transform:none}
body button.primary{min-height:52px;padding:14px 20px;letter-spacing:.04em;text-shadow:0 1px 5px #1b0c19}
body button.quiet{background:linear-gradient(115deg,#30202b,#422b36 50%,#2b1d29);border-color:#c6a57699;color:#ead4b2}
body :is(button.choice,button.category){border-color:#b79569aa;background:linear-gradient(125deg,#2e202c,#402b35);color:#f3e1ca}
body :is(button.choice,button.category)[aria-pressed="true"]{
 border-color:#ffe1a3;background:linear-gradient(115deg,#72503b,#875949 48%,#633a42);
 outline:1px solid #ffe0a480;outline-offset:2px;box-shadow:0 0 19px #e6ad5033,inset 0 1px 0 #fff0cf55;
}
body :is(button.choice,button.category)[aria-pressed="true"]::before{border-color:#ffe6b299}
body button.category{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:13px 12px;min-height:100px}
body button.category .symbol{margin:0;color:#f0c98c;line-height:1.3}
body button.category small{margin:2px 0 0;color:#dbc4b3;text-align:center}
body .actions .quiet{padding:10px 15px;font-size:13px}
body :is(.more-menu-button,.business-close){min-height:40px;padding:7px 14px;font-size:12px;line-height:1.5;border-radius:10px}
body .more-menu-button{gap:7px;justify-content:center}
body .more-menu-button span{font-size:19px}
body :is(.comic-tools,.cut-actions) button{min-height:44px}
body .longread .save-reading{min-height:58px;font-size:17px}
body .image-save-dialog a[download]{display:block;padding:13px 18px}
body .cover-portal .portal-button{border-radius:15px;min-height:70px;outline:1px solid #d9b37666;outline-offset:4px}
body .cover-portal .portal-button::before{inset:5px;border-radius:10px}

/* Extend the opening scene's dark lower fade into the rest of the journey. */
body[data-view="question"] .shade,body[data-view="reading"] .shade{
 background:radial-gradient(ellipse at 50% 90%,#62304430,transparent 65%),linear-gradient(180deg,transparent 28%,#1a111525 43%,#1a1115c9 70%,#130e12f5 100%);
}
body[data-view="webtoon"] .shade,body[data-view="longread"] .shade{background:linear-gradient(180deg,#23141f75,#1b111be8 68%,#130e12fc)}
body :is(.one-question,.offer-summary,.pay-box,.longread,.sample-notice,.payment-problem,.business-dialog,.image-save-dialog){
 background:radial-gradient(ellipse at 50% 0%,#70404c22,transparent 75%),linear-gradient(155deg,#30212ceF,#1a131af7 70%,#120e13fc);
 border-color:#d8b48366;box-shadow:0 10px 36px #0004;
}
body[data-view="webtoon"] .preview-insights,body[data-view="webtoon"] .paid-outline,body[data-view="webtoon"] .review-examples{
 background:radial-gradient(ellipse at 50% 0%,#58303d25,transparent 70%),linear-gradient(180deg,#1d1319,#0c080b);
}
.information-page{background:radial-gradient(ellipse at 50% 0%,#54324455,transparent 65%),linear-gradient(160deg,#29202a,#171015 70%,#100c11);background-attachment:fixed}
.information-page :is(main,section){border-color:#d8b48344}
.information-page a.action{display:inline-block;min-width:220px}
@media(max-width:360px){body button.primary{padding-inline:12px;font-size:13px}body button.choice{padding:11px 13px}body .cover-portal .portal-button .portal-label{font-size:16px}}
@media(max-height:650px){body .cover-portal .portal-button{min-height:60px}}
@media(prefers-reduced-motion:reduce){body :is(button,a.action,a.quiet,.image-save-dialog a[download]){transition:none}}

/* The next chapter is the clear primary action at the end of the free preview. */
body[data-view="webtoon"] .cut-actions[data-preview-stage="preview_cta"]{gap:12px;padding:24px 8px 12px;margin-top:24px;border-top:1px solid #e2bd7c44}
body[data-view="webtoon"] #more{flex:1 1 100%;width:100%;min-height:82px;margin:0 0 8px;padding:23px 16px;border:1px solid #fff0bd;border-radius:16px;background:linear-gradient(115deg,#c68a48,#f4d59a 48%,#d5a260);color:#332014;font:700 clamp(15px,4.7vw,22px)/1.6 'Noto Serif KR',serif;letter-spacing:.025em;text-align:center;text-shadow:0 1px 0 #fff0c980;outline:1px solid #e8c38888;outline-offset:4px;box-shadow:0 7px 25px #0008,0 0 28px #e8ad4744,inset 0 1px 0 #fff8df99}
body[data-view="webtoon"] #more::before{inset:6px;border-color:#754b2c88;border-radius:10px}
body[data-view="webtoon"] #more:hover{background:linear-gradient(115deg,#deb16d,#ffe7b9 48%,#e6ba77);color:#28180f;box-shadow:0 8px 28px #0008,0 0 38px #e8ad4766,inset 0 1px 0 #fff8df}
body[data-view="webtoon"] #more:focus-visible{outline:2px solid #fff6d7;outline-offset:6px}
/* The standalone preview keeps a single next-chapter action within reach. */
body[data-view="webtoon"] .preview-dock{position:fixed;z-index:15;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:14px max(20px,calc((100vw - 520px)/2)) max(16px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#160d1600,#160d16ed 22%,#160d16fc);pointer-events:none}
body[data-view="webtoon"] .preview-dock #more{pointer-events:auto;max-width:520px;min-height:64px;margin:4px 0 0;padding:15px 12px;font-size:clamp(15px,4.7vw,21px)}
body[data-view="webtoon"] .conversation{padding-bottom:calc(120px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.preview-end{height:4px;margin-top:8px}
@media(max-height:600px){body[data-view="webtoon"] .preview-dock{padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}body[data-view="webtoon"] .preview-dock #more{min-height:54px;padding-block:11px}}
body[data-view="webtoon"] .preview-dock[hidden]{display:none}
body[data-view="webtoon"] .preview-dock{flex-direction:column;align-items:center}
.preview-discount-clock{width:100%;max-width:520px;margin:0 0 6px;padding:9px 14px 7px;border:1px solid #bf667d77;border-radius:12px;background:linear-gradient(100deg,#351722f5,#21111cf5);text-align:center;box-shadow:0 3px 16px #0005;pointer-events:auto}
.preview-discount-clock>div{display:flex;justify-content:center;align-items:center;gap:16px}.preview-discount-clock span{color:#ff9da9;font:700 14px/1.5 'Noto Sans KR',sans-serif}.discount-clock{color:#fff0d8;font:700 24px/1.2 'Noto Sans KR',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.05em}.preview-discount-clock small{display:block;margin-top:4px;color:#d0afb8;font:10px/1.5 'Noto Sans KR',sans-serif}
body[data-view="webtoon"] .conversation{padding-bottom:calc(190px + env(safe-area-inset-bottom));scroll-padding-bottom:calc(190px + env(safe-area-inset-bottom))}
@media(max-height:600px){.preview-discount-clock{padding:5px 12px}.discount-clock{font-size:20px}}
/* Test pages: a parchment dialogue window below the portrait. */
body[data-character] .strip .cut:not(.cut-invitation){display:flex;flex-direction:column;padding:0 0 30px;gap:0}
body[data-character] .strip .cut:not(.cut-invitation) .cut-portrait{position:relative;inset:auto;flex:none;width:100%;aspect-ratio:2/3;margin:0;mask-image:linear-gradient(#000 85%,transparent)}
body[data-character] .strip .cut-closeup .cut-portrait{aspect-ratio:1/1}
body[data-character] .strip .cut-dialogue{position:relative;z-index:2;align-self:stretch;margin:-16px 10px 0;padding:28px 25px 30px;border:1px solid #b99b67;border-radius:3px 18px 3px 18px;background:radial-gradient(ellipse at top left,#fff4da,#e3cdab);box-shadow:0 9px 25px #0005;color:#3f3026;text-align:left;font-family:'Noto Serif KR',serif}
body[data-character] .cut-dialogue::before{content:'';position:absolute;inset:5px;border:1px solid #94713c66;border-radius:1px 13px 1px 13px;pointer-events:none}
body[data-character] .cut-speaker{display:block;margin-bottom:12px;color:#806139;font-size:11px;letter-spacing:.16em}
body[data-character] .cut-dialogue p{position:relative;margin:0;font-size:clamp(16px,4.4vw,20px);line-height:1.9;word-break:keep-all;overflow-wrap:anywhere}
body[data-character] .cut-dialogue p+p{margin-top:10px}
body[data-character] .cut-dialogue em{font-style:normal;font-weight:700}
body[data-character] .dialogue-ornament{position:absolute;right:17px;bottom:10px;color:#96703b;font-size:12px}
body[data-character] .strip .cut-invitation{display:grid;position:relative;padding:0;isolation:isolate}
body[data-character] .cut-invitation .cut-portrait{grid-area:1/1;aspect-ratio:2/3}
body[data-character] .cut-invitation::after{display:block;content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#080507e8);z-index:1;pointer-events:none}
body[data-character] .invitation-type{grid-area:1/1;align-self:end;z-index:2;position:relative;margin:0;padding:35px 20px 44px;color:#fff0d8;font:600 clamp(30px,8vw,44px)/1.65 'Noto Serif KR',serif;letter-spacing:-.05em;text-align:center;text-shadow:0 3px 18px #000}
body[data-character] .invitation-type em{font-style:normal;font-weight:700;color:#ee9b91}
/* Female test: visual-novel dialogue overlays the lower portrait. */
body[data-character="female"] .strip .cut:has(> .cut-dialogue){display:grid;grid-template-columns:minmax(0,1fr);padding:0 0 30px;isolation:isolate}
body[data-character="female"] .strip .cut:has(> .cut-dialogue) .cut-portrait{grid-area:1/1;mask-image:none}
body[data-character="female"] .strip .cut:has(> .cut-dialogue) .cut-dialogue{grid-area:1/1;align-self:end;margin:0 12px 22px;padding:24px 23px 28px;background:radial-gradient(ellipse at top left,#fff4daed,#e3cdabeb);box-shadow:0 8px 30px #0007,0 0 0 4px #30292170;backdrop-filter:blur(8px)}
body[data-character="female"] .cut-dialogue .cut-speaker{position:relative;display:table;margin:-39px 0 14px;padding:5px 14px;border:1px solid #b99b67;border-radius:3px 9px 3px 9px;background:#302921;color:#efdab2;letter-spacing:.12em}
@media(max-width:360px){body[data-character="female"] .strip .cut:has(> .cut-dialogue) .cut-dialogue{margin-inline:10px;margin-bottom:17px;padding-inline:19px}}
/* Keep the mobile closing portrait and its final line in separate rows. */
@media(max-width:600px){
 body[data-character] .preview-closing .cut-invitation{display:flex;flex-direction:column;gap:0;min-height:0;background:#080507}
 body[data-character] .preview-closing .cut-invitation .cut-portrait{position:relative;inset:auto;flex:none;width:100%;height:auto;aspect-ratio:auto;grid-area:auto;mask-image:none;-webkit-mask-image:none}
 body[data-character] .preview-closing .cut-invitation .cut-art{display:block;position:static;width:100%;height:auto;max-width:100%;object-fit:contain;mask-image:none;-webkit-mask-image:none}
 body[data-character] .preview-closing .cut-invitation::before,body[data-character] .preview-closing .cut-invitation::after{display:none;content:none}
 body[data-character] .preview-closing .invitation-type{grid-area:auto;align-self:stretch;margin:0;padding:24px 20px 32px;font-size:clamp(26px,7vw,36px);line-height:1.6;background:#080507}
}

/* Fade the portrait frame, so closeups and character variants share soft cut edges. */
body[data-view="webtoon"] #content .strip .cut .cut-portrait{
 -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 4%,rgba(0,0,0,.55) 10%,#000 19%,#000 78%,rgba(0,0,0,.7) 87%,rgba(0,0,0,.2) 96%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 4%,rgba(0,0,0,.55) 10%,#000 19%,#000 78%,rgba(0,0,0,.7) 87%,rgba(0,0,0,.2) 96%,transparent 100%);
}
/* Compact checkout: essential terms remain visible. */
body[data-view="payment-wait"] .scene{display:none}
body[data-view="payment-wait"] main{justify-content:flex-start}
body[data-view="payment-wait"] .conversation{max-height:calc(100dvh - 70px);padding:12px 4px 10px;margin:0}
.payment-wait{max-width:480px;margin:0 auto 18px;overflow:hidden;border:1px solid #b99b6755;border-radius:20px;background:linear-gradient(#181117,#21171d);box-shadow:0 12px 35px #0005;text-align:center}
.payment-wait-portrait{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:5/4;background:#100d13}.payment-wait-portrait>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%;animation:undam-contemplate 6s ease-in-out infinite;transform-origin:50% 65%}.payment-wait-portrait::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#181117,transparent 30%),linear-gradient(90deg,#18111744,transparent 30%,transparent 70%,#18111744);pointer-events:none}
.wait-spark{position:absolute;z-index:1;color:#f0d29d;text-shadow:0 0 18px #f7c47b;animation:undam-glimmer 4s ease-in-out infinite;pointer-events:none}.spark-one{left:16%;top:22%;font-size:23px}.spark-two{right:17%;top:38%;font-size:29px;animation-delay:-1.5s}.spark-three{right:28%;top:14%;font-size:40px;animation-delay:-2.7s}
.payment-wait-copy{position:relative;padding:7px 21px 29px}.payment-wait-copy .kicker{color:#d5b991;font-size:10px;letter-spacing:.12em}.payment-wait-copy h2{margin:14px 0;color:#fff0d8;font:500 clamp(22px,6vw,29px)/1.75 'Noto Serif KR',serif;word-break:keep-all}.payment-wait-copy p{margin:16px 0 9px;color:#ddcbd0;font-size:13px;line-height:1.85}.payment-wait-copy small{color:#bca5af;font-size:11px}.wait-dots{display:flex;justify-content:center;gap:9px;margin:19px 0}.wait-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#e6c38b;animation:undam-dot 1.8s ease-in-out infinite}.wait-dots i:nth-child(2){animation-delay:.2s}.wait-dots i:nth-child(3){animation-delay:.4s}
@keyframes undam-contemplate{0%,100%{transform:scale(1.015) translateY(0)}50%{transform:scale(1.045) translateY(-3px)}}
@keyframes undam-glimmer{0%,100%{opacity:.2;transform:translateY(3px)}50%{opacity:.85;transform:translateY(-6px)}}
@keyframes undam-dot{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.payment-wait-portrait>img,.wait-spark,.wait-dots i{animation:none}.wait-spark{opacity:.6}}
@media(max-width:600px){
 body[data-view="payment-wait"] main{padding:0;height:calc(100dvh - 52px)}
 body[data-view="payment-wait"] .conversation{width:100%;height:100%;max-height:none;padding:0;border-radius:0;overflow-x:hidden;overflow-y:auto}
 body[data-view="payment-wait"] #content{min-height:100%;display:flex;flex-direction:column}
 .payment-wait{display:flex;flex-direction:column;flex:1;width:100%;max-width:none;min-height:calc(100dvh - 52px);margin:0;border:0;border-radius:0;box-shadow:none}
 .payment-wait-portrait{flex:1 0 260px;aspect-ratio:auto;min-height:260px}
 .payment-wait-portrait>img{position:absolute;inset:0;object-position:50% 25%}
 .payment-wait-copy{flex:none;padding:12px 22px max(28px,env(safe-area-inset-bottom));background:#181117}
 .payment-wait-copy h2{font-size:clamp(23px,6.4vw,30px);margin:12px 0;line-height:1.65}
 .payment-wait-copy p{font-size:13px;margin-top:14px}.payment-wait-copy .wait-dots{margin:16px 0}
}
@media(max-width:600px) and (max-height:700px){.payment-wait-portrait{flex-basis:200px;min-height:200px}.payment-wait-copy{padding-top:8px;padding-bottom:max(18px,env(safe-area-inset-bottom))}.payment-wait-copy h2{font-size:22px}.payment-wait-copy .wait-dots{margin:12px 0}}
/* The closing line shares the portrait's black canvas, without an overlay seam. */
body[data-view="webtoon"] #content .strip.preview-closing{margin-bottom:8px}
body[data-view="webtoon"] #content .preview-closing .cut-invitation{background:#000;padding-bottom:0}
body[data-view="webtoon"] #content .preview-closing .cut-invitation::after{display:none;content:none}
body[data-view="webtoon"] #content .strip.preview-closing .cut .cut-portrait{
 -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 76%,rgba(0,0,0,.65) 87%,transparent 100%);
 mask-image:linear-gradient(180deg,transparent,#000 12%,#000 76%,rgba(0,0,0,.65) 87%,transparent 100%);
}
body[data-view="webtoon"] #content .preview-closing .invitation-type{background:transparent;padding-bottom:22px}
body[data-view="webtoon"] #content>.strip-note{margin-top:8px;padding:0 12px 12px;text-align:center;color:#baaeb1}
@media(max-width:600px){
 body[data-view="webtoon"] #content .preview-closing .invitation-type{margin-top:-18px;padding:0 20px 20px}
}
.offer-summary .purchase-info-compact,.pay-box .purchase-info-compact{margin:12px 0;padding:0;border:0;background:none;line-height:1.65}.purchase-info-compact p{font-size:12px;line-height:1.65;margin:0 0 10px}.purchase-info-compact nav{display:flex;gap:14px;flex-wrap:wrap;font-size:12px}.offer-consent{margin:16px 0;text-align:left}.offer-consent .consent{margin:0;max-width:none;font-size:14px;line-height:1.6;display:flex;gap:8px;align-items:flex-start}.offer-consent input{flex:0 0 18px;width:18px;height:18px;margin:3px 0 0}.offer-consent .note{font-size:12px;line-height:1.6;margin:6px 0}.consent-details{font-size:12px;line-height:1.7}.consent-details summary{cursor:pointer;min-height:36px;display:list-item;padding:6px 0;color:#e8c9a4}.consent-details>div{margin:4px 0 8px;padding:10px 12px;border:1px solid #e8c9a444;border-radius:8px}.consent-details p{font-size:12px;margin:0 0 7px}.consent-details p:last-child{margin-bottom:0}.offer-summary #pay,.pay-box #pay{width:100%;margin-top:8px;font-size:15px;white-space:normal;line-height:1.5}

/* Female test: enlarge Undam only while entering information. */
body[data-test-mode][data-character="female"][data-view="question"] #character{transform:scale(1.4);transform-origin:50% 20%}

/* Clip enlarged artwork without adding a page scrollbar to the input form. */
body[data-test-mode][data-view="question"] .scene{overflow:clip}

/* The CTA rides up with the content, fully opaque, inside a clipped viewport. */
body[data-test-mode][data-view="webtoon"] .preview-dock-track{position:fixed;inset:0;z-index:15;overflow:clip;contain:paint;pointer-events:none}
body[data-test-mode][data-view="webtoon"] .preview-dock.scroll-arrival{position:absolute;transform:translate3d(0,var(--dock-offset,100%),0);opacity:1;transition:none;will-change:transform}
body[data-test-mode][data-view="webtoon"] .preview-dock.scroll-arrival[inert] #more{pointer-events:none}