/* Three romance stories share the existing Seon reveal. */
:root{--font-romance:var(--font-webtoon)}
body{font-family:var(--font-romance)}
.romance-nav{display:flex;gap:8px;padding:16px 6%;border-bottom:1px solid #ffffff12;align-items:center;flex-wrap:wrap}
.romance-nav a{font-size:12px;text-decoration:none;color:#bdacb2;padding:9px 12px;border:1px solid #ffffff1d;border-radius:30px}
.romance-nav a[aria-current=page]{background:#a73145;color:#fff;border-color:#a73145}
.romance-nav a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.story-heading{padding:13cqw 8% 11cqw;background:linear-gradient(155deg,#2c2027,#101014)}
.story-heading .eyebrow{font-size:12px;letter-spacing:.18em;color:#c88895}
.story-heading h1{font-family:var(--font-romance);font-size:clamp(28px,7.4cqw,49px);font-weight:700;line-height:1.5;letter-spacing:-.05em;word-break:keep-all;margin:5cqw 0 0;max-width:13em}
.romance-beat{padding:0 0 13cqw;position:relative}
.romance-beat:first-child{padding-top:7cqw}
.scene-art{aspect-ratio:var(--cell-ratio,1);position:relative;overflow:hidden;margin:0 0 9cqw;background:#28222a}
.scene-art .sprite-viewport{position:absolute;inset:0}
.scene-art img{position:absolute;width:var(--sheet-w);height:var(--sheet-h);max-width:none;left:var(--sheet-x);top:var(--sheet-y);object-fit:fill;display:block}
.story-copy{padding:0 8%;display:flex;flex-direction:column;gap:6cqw}
.story-copy p{margin:0;font-family:var(--font-romance);font-size:clamp(17px,4.15cqw,28px);line-height:1.95;word-break:keep-all;letter-spacing:-.025em;color:#d4c8c8}
.story-copy .dialogue{background:#f7eee7;color:#34242b;padding:4cqw 6cqw;border-radius:24px 24px 24px 5px;max-width:92%;font-family:var(--font-romance);font-weight:500;font-size:clamp(17px,4.4cqw,29px);line-height:1.7;align-self:flex-start;box-shadow:0 5px 20px #0002}
.story-copy .dialogue[data-speaker="me"]{align-self:flex-end;background:#e8d5d8;border-radius:24px 24px 5px 24px}
.dialogue-speaker{display:block;margin-bottom:.5em;color:#756b71;font-size:.65em;font-weight:400}
.romance-beat:last-child{padding-bottom:22cqw}
.romance-beat:last-child .scene-art.final{margin-top:10cqw;margin-bottom:0}
.act-romance{background:linear-gradient(#101014,#1d181b 65%,#101014);padding:0}
.act-reveal{border-top:1px solid #69354155}
.before-cut{padding-top:18cqw}
.comparison{padding:8cqw 6% 12cqw}
.comparison h1{font:700 clamp(26px,7cqw,46px)/1.4 var(--font-romance);margin:2cqw 0 5cqw}
.comparison>p{color:#b5a6ad;font-size:15px;line-height:1.8;word-break:keep-all;margin-bottom:8cqw}
.story-card{display:block;color:inherit;text-decoration:none;margin-bottom:8cqw;border:1px solid #ffffff18;background:#211920;border-radius:4px;overflow:hidden}
.story-card .scene-art{margin:0}
.story-card-copy{padding:6cqw}
.story-card small{color:#c48493;font-size:12px;letter-spacing:.1em}
.story-card h2{font:600 clamp(22px,5.8cqw,37px)/1.5 var(--font-romance);margin:3cqw 0;word-break:keep-all}
.story-card p{color:#c3b5ba;line-height:1.8;font-size:15px;margin:0;word-break:keep-all}
.story-card .read-label{display:block;margin-top:5cqw;font-size:14px;color:#f3cbd2}
.story-card:hover{border-color:#bd526b}
.story-card:focus-visible{outline:2px solid #f3cbd2;outline-offset:4px}
/* This edition uses the shared Pretendard family with its own heading weights. */
.masthead span:first-child,.bubble.sfx,.caption,.interlude,.time-label,.ending h1,.last-line,.hand-line{font-family:var(--font-romance)}
.masthead span:first-child,.ending h1,.last-line,.hand-line{font-weight:600}
.brand-mark{display:inline-block;width:1.35em;height:1.35em;margin-right:.32em;vertical-align:-.32em}
/* Korean phrases stay together; short headings/dialogue use balanced lines. */
.story-heading h1,.comparison h1,.story-card h2,.dialogue,.caption,.interlude p,.ending p,.ending h1{word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
.story-copy p,.story-card p,.comparison>p{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
.story-copy .dialogue{max-width:100%;text-wrap:balance}
.story-copy .phrase{display:block;text-wrap:balance}
/* Progressive enhancement: without JS all content remains visible. */
[data-reveal]{transition:opacity .55s ease,transform .65s cubic-bezier(.22,1,.36,1)}
[data-reveal="pending"]{opacity:0;transform:translateY(18px)}
[data-reveal="visible"]{opacity:1;transform:none}
.scene-art[data-reveal],.act-reveal>.panel[data-reveal]{transition-duration:.7s,.8s}
.story-copy .dialogue[data-reveal="pending"]{transform:translateY(12px)}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}
@media print{
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* Counseling is composed as illustrated comic panels, not a chat interface. */
.comic-sequence{padding:7cqw 0 11cqw}
.comic-panel{margin:4cqw 0 8cqw}
.comic-panel .frame{isolation:isolate}
.comic-panel .frame .comic-sheet{width:var(--sheet-width);height:var(--sheet-height);max-width:none;object-fit:fill;inset:auto;left:var(--sheet-left);top:var(--sheet-top)}
.comic-panel .bubble{font-family:var(--font-romance);font-size:clamp(15px,3.8cqw,25px);font-weight:500;line-height:1.6;padding:3.3cqw 4cqw;border-radius:48% 46% 45% 47% / 42% 45% 43% 46%;text-wrap:balance}
.comic-panel .bubble.tail-left::after{top:45%;bottom:auto;left:-3cqw;transform:rotate(90deg)}
.comic-panel .bubble.tail-right::after{top:45%;bottom:auto;left:auto;right:-3cqw;transform:rotate(-90deg)}
.comic-caption{margin:0;padding:7cqw 8%;font-size:clamp(17px,4.15cqw,28px);line-height:1.95;letter-spacing:-.025em;color:#c6b9bf;text-align:center;word-break:keep-all;text-wrap:balance}
.comic-caption.spoken{font-size:clamp(20px,5cqw,34px);color:#f1d9dc;padding:10cqw 8%}
.comic-impact{margin:0;padding:13cqw 6% 18cqw;font-size:clamp(27px,7cqw,48px);font-weight:600;line-height:1.6;text-align:center;word-break:keep-all;color:#ffb6c1}
.tone-arrival{background:radial-gradient(ellipse at 50% 10%,#381b2b55,transparent 65%)}
.tone-obsession{background:#08080b}
.tone-secret{background:#0b0b10;padding-top:10cqw;padding-bottom:13cqw}
.tone-secret .comic-caption{padding-top:10cqw;padding-bottom:12cqw}
.tone-invitation .comic-caption:last-child{color:#f2d9de}
.comic-panel[data-reveal]{transition-duration:.7s,.8s}

/* One-time iris change followed by the final invitation. No loop or flashing. */
.tone-eye-ending{padding-bottom:0;background:#08080b}
.tone-eye-ending .comic-panel:last-child{margin-bottom:0}
.eye-change .eye-glow{opacity:1}
.eye-change[data-reveal="pending"] .eye-glow{opacity:0}
.eye-change[data-reveal="visible"] .eye-glow{opacity:1;transition:opacity 1.15s ease .35s}
.eye-change[data-reveal="visible"] .bubble{animation:ending-line-in .5s ease 1s both}
@keyframes ending-line-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.act-reveal+.ending .ending-kicker{display:block;margin-bottom:7cqw}
@media(prefers-reduced-motion:reduce){
  .eye-change .eye-glow{opacity:1!important;transition:none!important}
  .eye-change .bubble{animation:none!important;opacity:1!important}
}

/* White recollection, then the black counseling room. */
body[data-story-page]{background:#fff;transition:background-color .65s ease;color-scheme:light}
body[data-story-page][data-tone="dark"]{background:#000;color-scheme:dark}
body[data-story-page] .webtoon{background:#fff;overflow:clip;box-shadow:none}
body[data-story-page] .masthead{background:#fff;color:#786b71;border-color:#eee8eb}
body[data-story-page] .masthead span:first-child{color:#2a2027}
body[data-story-page] .masthead+.romance-nav{background:#fff;border-color:#eee8eb}
body[data-story-page] .masthead+.romance-nav a{color:#66545e;border-color:#e3d9df}
body[data-story-page] .masthead+.romance-nav a[aria-current=page]{color:#fff}
body[data-story-page] .masthead+.romance-nav a:focus-visible{outline-color:#a73145}
body[data-story-page] .story-heading{background:#fff;color:#261c24}
body[data-story-page] .story-heading .eyebrow{color:#a3415a}
body[data-story-page] .act-romance{background:#fff;color:#2f2830}
body[data-story-page] .story-copy p{color:#40363e}
body[data-story-page] .story-copy .dialogue{background:#f5f0ed;color:#362830;box-shadow:none;border:1px solid #e9e0e4}
body[data-story-page] .story-copy .dialogue[data-speaker="me"]{background:#f2e5e9}
body[data-story-page] .story-copy .dialogue[data-speaker="member"]{background:#f0f0f0;border-color:#dedede}
body[data-story-page] .act-reveal{display:flow-root;background:#08080b;color:#f8f1e6;border-top:0}
body[data-story-page] .ending{background:#08080b;color:#f8f1e6}
body[data-story-page] .ending+.romance-nav{background:#08080b}
.story-copy:empty{display:none}

/* A native sticky stage gives an important line the whole viewport. */
.impact-scene{position:relative;min-height:150svh;margin:5cqw 0 7cqw;isolation:isolate}
.impact-stage{position:sticky;top:0;min-height:100svh;height:100svh;display:grid;place-items:center;padding:10svh 8%;overflow:clip}
.impact-copy{margin:0;max-width:15em;text-align:center;font-family:var(--font-romance);font-size:clamp(34px,8.8cqw,60px);font-weight:650;line-height:1.65;letter-spacing:-.045em;word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
.impact-line{display:block}
.impact-light{background:#fff;color:#271c25}
.impact-dark{background:#08080b;color:#fff0f3}
.impact-dark .impact-copy{font-weight:600}
.tone-obsession .impact-copy{color:#ffb6c1}
body[data-story-page].scroll-story-ready .impact-copy{opacity:var(--impact-opacity,1);transform:translateY(var(--impact-y,0px)) scale(var(--impact-scale,1));transform-origin:50% 50%}
body[data-impact-focus="true"] .reading-progress{opacity:0}
.reading-progress{transition:opacity .2s ease}
@media(prefers-reduced-motion:reduce){
  body[data-story-page]{transition:none}
  .impact-scene{min-height:0}
  .impact-stage{position:static;height:auto;min-height:75svh;padding:12svh 8%}
  body[data-story-page].scroll-story-ready .impact-copy{opacity:1;transform:none}
  .reading-progress{transition:none}
}
@media print{
  .impact-scene{min-height:0}
  .impact-stage{position:static;height:auto;min-height:0;padding:60px 8%}
  .impact-copy{opacity:1!important;transform:none!important}
}

/* The only full-screen interruption before Soi is her red call in the dark. */
.impact-return{margin:0;background:#000;color:#ed263e;min-height:240svh}
.impact-return .impact-stage{background:#000;min-height:100dvh;height:100dvh}
.impact-return .impact-copy{font-size:clamp(52px,14cqw,92px);font-weight:650;letter-spacing:.08em;color:#ed263e}
body[data-story-page].scroll-story-ready .impact-return .impact-copy{opacity:1;transform:none}
.return-char{display:inline-block}
.scroll-story-ready .return-char{visibility:hidden}
.scroll-story-ready .return-char.is-typed{visibility:visible}
@media(prefers-reduced-motion:reduce){
  .impact-return{min-height:0}
  .impact-return .impact-stage{min-height:100svh}
  .scroll-story-ready .return-char{visibility:visible}
}
@media print{.impact-return{min-height:0}.impact-return .impact-stage{height:auto;min-height:0}.scroll-story-ready .return-char{visibility:visible}}

/* Public service context lives on the story chooser, outside the three-page story flow. */
.service-intro{padding:4cqw 8% 13cqw;color:#d8cbd1;font-size:16px;line-height:1.85;word-break:keep-all;overflow-wrap:break-word}
.service-intro h2{font-size:clamp(27px,6cqw,39px);line-height:1.5;color:#f5e9ed;margin:12px 0 24px}
.service-intro .service-label{color:#d994a4;font-size:13px;letter-spacing:.08em}
.service-intro ul{padding-left:1.25em;margin:24px 0}.service-intro li{margin:8px 0}
.service-intro a{color:#efb9c7;text-underline-offset:5px}.service-intro a:focus-visible{outline:2px solid #efb9c7;outline-offset:5px}
.service-intro .service-note{font-size:13px;color:#b5a6ad;margin-top:24px}
.ending .service-link{display:block;margin-top:20px;font-size:13px;color:#baa5ae;text-underline-offset:4px}