/* 해봄 스크롤 월드 — 프로세스 01~04 공용 스타일
   배경(영상 3장면)과 화면 골격은 네 메뉴가 함께 씁니다.
   메뉴별로 달라지는 것은 문구뿐이며, 각 HTML 이 갖습니다. */

:root{--ink:#17201d;--cream:#f8f1e6;--coral:#ff694b;--peach:#ffb298;--pink:#f6a1ad;--line:rgba(255,255,255,.27);--ease:cubic-bezier(.22,.7,.19,1)}
    *{box-sizing:border-box} html{scroll-behavior:smooth;background:#071421} body{margin:0;color:#fff;font-family:"IBM Plex Sans KR",Pretendard,"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;overflow-x:hidden}.skip{position:fixed;z-index:100;top:12px;left:12px;padding:10px 14px;color:#111;background:#fff;border-radius:8px;transform:translateY(-160%)}.skip:focus{transform:none}button,a{font:inherit}h1,h2,h3{font-family:"Gowun Batang","Noto Serif KR",serif}
    .scroll-track{height:1715vh;position:relative;background:#071421}.world{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#071421;isolation:isolate}.backdrop,.screen,.hud{position:absolute;inset:0}.backdrop{z-index:0}.film{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);will-change:opacity}.film.active{opacity:1}.film video,.still{width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(1.035) saturate(1.04)}.still{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}.still.active{opacity:1}.backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,21,.52),rgba(3,12,21,.07) 58%,rgba(3,12,21,.24)),linear-gradient(0deg,rgba(3,12,21,.52),transparent 55%);pointer-events:none}.world.day .backdrop:after{background:linear-gradient(90deg,rgba(61,35,23,.14),rgba(255,235,211,.025) 62%,rgba(69,38,31,.1)),linear-gradient(0deg,rgba(71,38,27,.18),transparent 55%)}
    .grain{position:absolute;inset:-30%;z-index:2;opacity:.055;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.sunrise-fx{--fx:0;--fx-tail:0;position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none;opacity:var(--fx)}.sunrise-fx .halo,.sunrise-fx .reflection{display:block}.sunrise-fx .halo{position:absolute;left:50%;top:41%;width:clamp(116px,17vw,255px);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.52 + var(--fx) * .48));border-radius:50%;background:radial-gradient(circle,rgba(255,251,219,.46) 0 5%,rgba(255,225,164,.19) 20%,rgba(255,171,112,.08) 43%,transparent 71%);mix-blend-mode:screen;filter:blur(1px)}.sunrise-fx .reflection{position:absolute;left:50%;top:51%;width:clamp(145px,29vw,430px);height:50%;transform:translateX(-50%) scaleY(calc(.3 + var(--fx) * .7));transform-origin:top;opacity:calc(.2 + var(--fx) * .47);background:linear-gradient(180deg,rgba(255,244,191,.72),rgba(255,189,120,.24) 36%,transparent 92%);-webkit-mask:url("../assets/clarify-scroll-v1/water-reflection-mask-v1.svg") center top/100% 100% no-repeat;mask:url("../assets/clarify-scroll-v1/water-reflection-mask-v1.svg") center top/100% 100% no-repeat;mix-blend-mode:screen;filter:blur(1.2px)}.sunrise-fx .mist{position:absolute;inset:42% 0 auto;width:100%;height:60%;opacity:calc(var(--fx) * .19 + var(--fx-tail) * .08);mix-blend-mode:screen;filter:blur(1px);transform:translateY(calc(var(--fx) * -1.5%))}.journey-layer{position:absolute;z-index:7;inset:0;pointer-events:none}.journey{position:absolute;inset:0;width:100%;height:100%;opacity:.92;filter:drop-shadow(0 0 9px rgba(255,191,167,.32))}.journey .draw{fill:none;stroke:#ffc3a5;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
    /* 마디점 — 선이 닿기 전에는 별빛으로 미리 반짝이다가, 선이 도착하면 벚꽃이 핍니다.
       SVG 안이 아니라 HTML 로 얹습니다. .journey 는 preserveAspectRatio="none" 이라
       화면 비율에 따라 좌우로 눌리는데, 그 안에 두면 꽃도 같이 찌그러지기 때문입니다.
       위치는 백분율이라 왜곡과 무관하게 선 위 제자리에 정확히 얹힙니다. */
    .jnode{--s:clamp(26px,3.4vw,40px);position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);filter:drop-shadow(0 0 8px rgba(255,170,140,.5))}
    .jnode:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,244,226,.95) 0 5%,rgba(255,198,168,.45) 16%,rgba(255,198,168,0) 56%);animation:jtwinkle 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * .7s);transition:opacity .5s ease,transform .5s ease}
    @keyframes jtwinkle{0%,100%{opacity:.42;transform:scale(.9)}50%{opacity:.92;transform:scale(1.08)}}
    .jbloom{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.2) rotate(-40deg);transition:opacity .5s ease,transform .8s cubic-bezier(.34,1.56,.64,1)}
    .jbloom .p{fill:#ffb3a2}.jbloom .c{fill:#ff8a72}
    .jnode.on:before{animation:none;opacity:0;transform:scale(1.9)}
    .jnode.on .jbloom{opacity:1;transform:none}
    /* 마지막 마디(HARVEST)는 여정의 결실이라 조금 더 크게, 한 번 더 번지며 핍니다. */
    .jnode-final{--s:clamp(34px,4.6vw,52px)}
    .jnode-final.on .jbloom{animation:jfinale 1.4s ease-out .12s 1}
    @keyframes jfinale{0%{filter:brightness(2.4) saturate(1.3)}60%{filter:brightness(1.25)}100%{filter:none}}
    /* 선머리 불꽃 — 자라나는 선의 끝을 따라 달립니다. 위치는 JS 가 --x/--y 로 넣습니다. */
    .jspark{--s:clamp(15px,1.9vw,24px);position:absolute;left:var(--x,-99%);top:var(--y,-99%);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;opacity:0;transition:opacity .35s ease;background:radial-gradient(circle,#fff 0 13%,rgba(255,232,199,.95) 27%,rgba(255,172,124,.5) 49%,rgba(255,140,90,0) 73%);filter:drop-shadow(0 0 9px rgba(255,184,140,.9)) drop-shadow(0 0 20px rgba(255,140,90,.45))}
    .jspark.on{opacity:1;animation:jflicker 1.1s ease-in-out infinite}
    @keyframes jflicker{0%,100%{transform:scale(1)}50%{transform:scale(1.24)}}.type-scrim{position:absolute;z-index:8;inset:0;pointer-events:none;background:radial-gradient(ellipse 63% 66% at 50% 50%,rgba(3,12,21,.52) 0%,rgba(3,12,21,.28) 45%,rgba(3,12,21,0) 76%);transition:opacity .55s ease,background .55s ease}.world.day .type-scrim{background:radial-gradient(ellipse 63% 66% at 50% 50%,rgba(255,246,230,.64) 0%,rgba(255,246,230,.3) 48%,rgba(255,246,230,0) 76%)}.world[data-stage="6"] .type-scrim{opacity:0}
    .topbar{position:absolute;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(24px,4.3vw,72px);pointer-events:none}.brand,.nav-cta{pointer-events:auto;text-decoration:none}.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:850;letter-spacing:-.06em;font-size:1.22rem}.brand-mark{width:24px;height:28px;border-radius:50% 50% 50% 7px;background:linear-gradient(145deg,#ffc1cf,#f26e59);box-shadow:0 5px 20px rgba(250,141,135,.55);transform:rotate(-32deg)}.nav-cta{padding:10px 15px;color:#17201d;background:#fff;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.08em}
    .rail{position:absolute;z-index:25;left:26px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font:700 .64rem/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.2em;color:rgba(255,255,255,.72);pointer-events:none}.rail:after{content:"";display:block;width:1px;height:48px;margin:13px auto 0;background:rgba(255,255,255,.42)}.dots{position:absolute;z-index:31;right:25px;top:50%;display:flex;flex-direction:column;gap:10px;transform:translateY(-50%)}.dots button{width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:transparent;cursor:pointer;transition:height .28s,background .28s,border-color .28s}.dots button.on{height:31px;border-radius:8px;background:#fff;border-color:#fff}.dots button:focus-visible,.route-dot:focus-visible,.nav-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
    .route-dots{position:absolute;z-index:31;right:24px;bottom:33px;display:flex;gap:7px;align-items:flex-end}/* 이동 버튼 — 소사이어티 맵 상세의 알약 버튼과 같은 결로 맞췄습니다.
   예전에는 B·F·X·H 한 글자만 동그라미에 담겨 있어 무엇으로 가는 버튼인지
   눌러 보기 전에는 알 수 없었습니다. 라벨을 늘 보이게 하고 형태도 알약으로
   바꿔, 메뉴라는 것이 형태와 글자 양쪽으로 읽히게 합니다. */
.route-dot{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid rgba(255,178,140,.34);border-radius:999px;background:rgba(6,14,24,.58);color:rgba(255,243,236,.85);text-decoration:none;backdrop-filter:blur(12px);font-weight:800;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}
.route-dot:hover,.route-dot:focus-visible{border-color:rgba(255,186,150,.95);background:rgba(255,115,76,.15);color:#fff;transform:translateY(-2px)}
.route-dot b{font:800 .62rem ui-monospace,SFMono-Regular,monospace;opacity:.62}.route-dot span{white-space:nowrap;font-size:.62rem;letter-spacing:.08em}
    .progress{position:absolute;z-index:30;left:calc(26px + 15px);bottom:32px;width:115px;height:2px;background:rgba(255,255,255,.24)}.progress i{display:block;width:0;height:100%;background:#fff;transition:width .12s linear}.progress em{position:absolute;top:-21px;left:0;font:700 .59rem ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em;font-style:normal;color:rgba(255,255,255,.73)}
    .screen{z-index:10;display:grid;place-items:center;padding:110px clamp(66px,9vw,150px) 88px;pointer-events:none;opacity:0;transform:translateY(22px) scale(.985);filter:blur(7px);transition:opacity .48s var(--ease),transform .68s var(--ease),filter .5s var(--ease)}.screen.active{opacity:1;transform:none;filter:none;pointer-events:auto}.screen-inner{width:min(1120px,100%)}.eyebrow{display:block;margin-bottom:17px;color:#ffc0ca;font-size:.72rem;font-weight:850;letter-spacing:.17em}.screen h1,.screen h2,.screen h3,.screen p{margin-top:0}.hero{justify-items:start}.hero .screen-inner{margin-top:3vh}.hero h1{max-width:8ch;margin-bottom:21px;font-size:clamp(4rem,9vw,9rem);line-height:.86;letter-spacing:-.1em}.hero p{max-width:39ch;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.75;color:rgba(255,255,255,.82)}.scroll-hint{margin-top:30px;font:700 .64rem ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em;color:rgba(255,255,255,.65)}.scroll-hint:after{content:"↓";display:inline-block;margin-left:11px;animation:bob 1.5s ease-in-out infinite}@keyframes bob{50%{transform:translateY(5px)}}
    .glass{max-width:665px;padding:clamp(27px,4vw,54px);border:1px solid rgba(255,255,255,.18);border-radius:26px;background:linear-gradient(135deg,rgba(11,29,42,.47),rgba(4,15,25,.17));box-shadow:0 24px 90px rgba(0,0,0,.21);backdrop-filter:blur(15px)}.glass h2{margin-bottom:19px;font-size:clamp(2.8rem,5.7vw,5.9rem);line-height:.96;letter-spacing:-.085em}.glass>p{margin-bottom:25px;max-width:48ch;line-height:1.7;color:rgba(255,255,255,.78)}.symptoms{display:grid;gap:0;margin:0;padding:0;list-style:none}.symptoms li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.18)}.symptoms b{color:#ffb5c0;font:800 .78rem ui-monospace,SFMono-Regular,monospace}.symptoms span{font-size:.94rem;line-height:1.5}
    .fit-screen{justify-items:start}.fit-layout{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(300px,1.25fr);gap:clamp(36px,7vw,100px);align-items:center}.fit-intro h2{font-size:clamp(3.2rem,6vw,6.4rem);line-height:.91;letter-spacing:-.09em}.fit-intro p{max-width:30ch;line-height:1.7;color:rgba(255,255,255,.78)}.fit-card{position:relative;min-height:345px;padding:clamp(28px,4vw,50px);border:1px solid rgba(255,255,255,.22);border-radius:28px;background:linear-gradient(135deg,rgba(7,23,37,.56),rgba(34,68,87,.27));box-shadow:0 30px 90px rgba(0,0,0,.23);overflow:hidden}.fit-card:after{content:"";position:absolute;width:360px;height:360px;right:-130px;bottom:-155px;border-radius:50%;background:radial-gradient(circle,rgba(255,166,130,.38),transparent 65%)}.fit-index{position:relative;z-index:1;color:#ffc3ca;font:800 .72rem ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em}.fit-card h3{position:relative;z-index:1;margin:19px 0 15px;font-size:clamp(2rem,4vw,4.4rem);line-height:.94;letter-spacing:-.075em}.fit-card p{position:relative;z-index:1;max-width:37ch;line-height:1.7;color:rgba(255,255,255,.8)}.fit-tag{position:absolute;z-index:1;bottom:30px;left:clamp(28px,4vw,50px);padding:8px 11px;border:1px solid rgba(255,255,255,.32);border-radius:999px;color:#fff;font-size:.73rem}.fit-steps{display:flex;gap:7px;margin-top:23px}.fit-steps i{width:24px;height:3px;background:rgba(255,255,255,.28);transition:background .25s}.fit-steps i.on{background:#ffb6bd}
    .flow-screen{justify-items:end}.flow-card{width:min(640px,100%);padding:clamp(25px,4vw,48px);border-left:1px solid rgba(255,198,165,.75);background:linear-gradient(90deg,rgba(7,18,27,.56),transparent)}.flow-card h2{font-size:clamp(3rem,5.8vw,6rem);line-height:.93;letter-spacing:-.09em}.flow-card>p{max-width:39ch;line-height:1.7;color:rgba(255,255,255,.8)}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px}.step{padding-top:12px;border-top:1px solid rgba(255,255,255,.35)}.step b{display:block;margin-bottom:8px;color:#ffc3b0;font:800 .7rem ui-monospace,SFMono-Regular,monospace}.step span{font-weight:800;font-size:.96rem}.step small{display:block;margin-top:5px;line-height:1.45;color:rgba(255,255,255,.68);font-size:.75rem}
    .service-screen{justify-items:start}.service-panel{width:min(950px,100%);padding:clamp(29px,4vw,55px);border:1px solid rgba(255,255,255,.18);border-radius:28px;background:rgba(6,24,37,.48);backdrop-filter:blur(16px)}.service-panel h2{max-width:10ch;font-size:clamp(3rem,6vw,6.2rem);line-height:.91;letter-spacing:-.09em}.service-panel>p{max-width:47ch;line-height:1.65;color:rgba(255,255,255,.78)}.programs{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:32px}.program{min-height:165px;padding:20px;border:1px solid rgba(255,255,255,.19);border-radius:17px;background:rgba(255,255,255,.05);transition:background .25s,transform .25s}.program:hover{background:rgba(255,255,255,.13);transform:translateY(-5px)}.program b{display:block;color:#fbb0bd;font:800 .66rem ui-monospace,SFMono-Regular,monospace}.program h3{margin:18px 0 9px;font-size:1.28rem;letter-spacing:-.055em}.program p{margin:0;color:rgba(255,255,255,.7);font-size:.83rem;line-height:1.55}
    .outcome-screen{justify-items:end}.outcome-card{position:relative;width:min(700px,100%);padding:clamp(28px,4.5vw,60px);color:#2d201b;border:1px solid rgba(129,78,58,.2);border-radius:28px;background:rgba(255,244,225,.88);box-shadow:0 30px 80px rgba(42,17,7,.2)}.outcome-card .eyebrow{color:#d96655}.outcome-card h2{font-size:clamp(3rem,5.5vw,6rem);line-height:.94;letter-spacing:-.09em}.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:31px}.compare>div{padding-top:12px;border-top:1px solid rgba(74,41,28,.25)}.compare b{font-size:.68rem;letter-spacing:.12em}.compare ul{margin:12px 0 0;padding:0;list-style:none;font-size:.88rem;line-height:1.7}.compare .after b{color:#db5b46}.compare .after li{font-weight:750}
    /* 정지사진이 뜨는 시점(영상이 멈추는 progress = .835/PACE, scroll-world.js 참조)에
       맞춰 비교 카드에서 결론 헤드라인으로 넘어갑니다. 카드 높이는 비교 얼굴(더 큼)이
       기준이 되고, 헤드라인 얼굴은 그 위에 절대위치로 겹쳐 카드 크기가 안 흔들립니다. */
    .outcome-face{transition:opacity .6s var(--ease),transform .6s var(--ease)}
    .outcome-face--note{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none;transform:translateY(12px)}
    .outcome-card[data-phase="note"] .outcome-face--compare{opacity:0;pointer-events:none;transform:translateY(-12px)}
    .outcome-card[data-phase="note"] .outcome-face--note{opacity:1;pointer-events:auto;transform:none}
    /* .screen:not(.final) p{font-size:clamp(13px,1vw,16px);line-height:1.7} 가 이 .outcome-note
       보다 나중에 선언되고 특이성도 같거나 높아(0-2-1 vs 0-1-0) 그대로 두면 본문 크기로 눌립니다.
       헤드라인다운 크기를 지키기 위해 명시적으로 우선시킵니다. */
    .outcome-note{margin:0;font-size:clamp(1.9rem,3.4vw,3.2rem)!important;font-weight:700;line-height:1.28!important;letter-spacing:-.03em}
    .final{color:#251a15;background:radial-gradient(circle at 50% 120%,#ffd7a1 0,transparent 35%),#f9f0e3}.final:before{content:"";position:absolute;inset:0;opacity:.55;background:radial-gradient(circle at 5% 28%,#ffc679 0 2px,transparent 7px),radial-gradient(circle at 18% 8%,#ffc679 0 2px,transparent 8px),radial-gradient(circle at 90% 20%,#ffc679 0 2px,transparent 8px),radial-gradient(circle at 80% 82%,#ffc679 0 2px,transparent 7px),radial-gradient(circle at 14% 84%,#ffc679 0 1px,transparent 7px)}.final .screen-inner{text-align:center;position:relative}.flower{width:180px;height:155px;margin:0 auto 10px}.flower-stem{fill:none;stroke:#e39162;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.55s cubic-bezier(.4,0,.2,1)}.flower-stem:nth-of-type(2){transition-delay:.42s}.flower-stem:nth-of-type(3){transition-delay:.62s}.flower .bud,.flower .free-flower{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .78s cubic-bezier(.34,1.56,.64,1),opacity .48s ease-out;transition-delay:calc(.88s + var(--i)*.12s)}.flower .petal{fill:#ffa98f;stroke:none}.flower .core{fill:#ff7b69;stroke:none}.flower .free-flower .petal{fill:#ffaf9a}.flower .free-flower .core{fill:#ff826e}.final.active .flower-stem{stroke-dashoffset:0}.final.active .bud,.final.active .free-flower{transform:scale(1);opacity:1}.final.active .free-flower{animation:flower-sway 3.2s ease-in-out calc(1.5s + var(--i)*.13s) infinite alternate}@keyframes flower-sway{from{rotate:-3deg;translate:0 0}to{rotate:5deg;translate:2px -4px}}.final h2,.final p,.final-actions{opacity:0;transform:translateY(14px);transition:opacity .65s ease,transform .8s var(--ease)}.final.active h2{opacity:1;transform:none;transition-delay:1.44s}.final.active p{opacity:1;transform:none;transition-delay:1.62s}.final.active .final-actions{opacity:1;transform:none;transition-delay:1.8s}.final h2{margin:0;font-size:clamp(3.4rem,6.4vw,7rem);letter-spacing:-.1em}.final p{margin:24px auto 0;max-width:46ch;color:#715e51;line-height:1.75}.final-actions{display:flex;justify-content:center;gap:12px;margin-top:34px}.final-actions a{padding:16px 25px;border-radius:999px;text-decoration:none;font-weight:800;font-size:.84rem}.start{color:#fff;background:#ff6145;box-shadow:0 15px 32px rgba(255,97,69,.24)}.enter{color:#33241e;border:1px solid rgba(56,38,29,.34)}
    /* Scroll Cinema typography: information lands on the world; it is never boxed inside a card. */
    .glass,.fit-card,.service-panel,.outcome-card{border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}.hero,.fit-screen,.service-screen,.flow-screen,.outcome-screen{justify-items:center}.hero .screen-inner{margin-top:0;text-align:center}.hero p{margin-inline:auto}.glass,.fit-layout,.flow-card,.service-panel,.outcome-card{text-align:center}.glass{padding:0}.eyebrow{margin-bottom:18px;font-size:11px;font-weight:400;letter-spacing:.35em;text-shadow:0 1px 10px rgba(0,0,0,.38)}.hero h1{max-width:none;font-size:clamp(30px,3.6vw,52px);font-weight:400;line-height:1.15;letter-spacing:-.02em}.hero h1,.screen:not(.final) h2,.screen:not(.final) h3{text-shadow:0 7px 26px rgba(0,0,0,.34),0 1px 3px rgba(0,0,0,.38)}.screen:not(.final) p{font-size:clamp(13px,1vw,16px);line-height:1.7;text-shadow:0 2px 12px rgba(0,0,0,.27)}.glass h2,.fit-intro h2,.flow-card h2,.service-panel h2,.outcome-card h2{margin-bottom:18px;font-size:clamp(28px,3.2vw,46px);font-weight:400;line-height:1.2;letter-spacing:-.02em}.fit-layout{grid-template-columns:1fr;justify-items:center;max-width:760px}.fit-intro p{margin-inline:auto}.fit-card{min-height:0;max-width:560px;padding:18px 0 14px;border-top:1px solid rgba(255,206,188,.82)}.fit-card:after{display:none}.fit-index{font-size:10px;font-weight:400;letter-spacing:.35em}.fit-card h3{margin:15px 0 13px;font-size:clamp(22px,2.25vw,32px);font-weight:400;line-height:1.2;letter-spacing:-.02em}.fit-card p{margin-inline:auto}.fit-tag{position:static;display:inline-block;margin-top:20px;padding:0;border:0;font-size:11px;font-weight:400;letter-spacing:.15em}.flow-card{padding:24px 0;border:0;background:none}.flow-card>p{margin-inline:auto}.steps{margin-top:26px}.step span{font-size:15px;font-weight:500}.service-panel{padding:0}.service-panel>p{margin-inline:auto}.programs{gap:0;border-top:1px solid rgba(255,255,255,.35)}.program{min-height:155px;padding:20px 18px 16px;border:0;border-right:1px solid rgba(255,255,255,.28);border-radius:0;background:none;text-align:center}.program:last-child{border-right:0}.program b{font-size:10px;font-weight:400;letter-spacing:.35em}.program h3{font-family:"Gowun Batang","Noto Serif KR",serif;font-size:20px;font-weight:400;letter-spacing:-.01em}.program p{font-size:13px!important}.program:hover{background:rgba(255,255,255,.04);transform:none}.outcome-card{padding:0}.outcome-card h2,.outcome-card p,.outcome-card li,.outcome-card b{text-shadow:0 2px 14px rgba(255,248,231,.46)}.compare{max-width:560px;margin-inline:auto;text-align:left}.compare>div{border-top-color:rgba(74,41,28,.45)}.compare b{font-size:10px;font-weight:400;letter-spacing:.35em}.compare ul{font-size:14px}.journey{opacity:.92}
    /* WHY HAEBOM uses the galaxy's empty center: editorial copy left, choices right. */
    .screen[data-screen="1"]{justify-items:stretch}.screen[data-screen="1"] .glass{display:grid;grid-template-columns:minmax(0,460px) minmax(320px,430px);column-gap:clamp(56px,8vw,116px);align-items:center;align-self:center;max-width:1006px;margin:0 auto;transform:none;text-align:left}.screen[data-screen="1"] .eyebrow,.screen[data-screen="1"] h2,.screen[data-screen="1"]>p{grid-column:1}.screen[data-screen="1"] .glass>p{margin-inline:0;max-width:430px}.screen[data-screen="1"] .symptoms{grid-column:2;grid-row:1 / span 3;width:100%;margin:0;align-self:center}.screen[data-screen="1"] .symptoms li{grid-template-columns:42px 1fr;padding:16px 0}.screen[data-screen="1"] .symptoms span{font-size:14px}.screen[data-screen="1"] .eyebrow{margin-bottom:20px}.screen[data-screen="1"] h2{margin-bottom:20px}
    /* One centered reading column: chapter → statement → evidence. */
    .glass,.fit-layout,.flow-card,.service-panel,.outcome-card{width:min(760px,100%)}.glass h2,.fit-intro h2,.flow-card h2,.service-panel h2,.outcome-card h2{max-width:620px;margin-inline:auto}.glass>p,.fit-intro>p,.flow-card>p,.service-panel>p{max-width:460px;margin-inline:auto}.service-panel h2{max-width:none}.symptoms{max-width:620px;margin:40px auto 0}.symptoms li{grid-template-columns:42px 1fr;text-align:left}.fit-steps{justify-content:center}.steps{max-width:650px;margin-inline:auto}.hero h1,.screen:not(.final) h2,.screen:not(.final) h3{ text-shadow:0 1px 2px rgba(0,0,0,.22)}.screen:not(.final) p,.eyebrow{ text-shadow:0 1px 4px rgba(0,0,0,.18)}.world.day .outcome-card h2,.world.day .outcome-card p,.world.day .outcome-card li,.world.day .outcome-card b{ text-shadow:0 1px 3px rgba(255,250,238,.35)}
    /* Shared stage grid — outer system UI never competes with the reading field. */
    :root{--edge:clamp(24px,7vw,112px);--nav-edge:clamp(16px,2.4vw,36px);--reading:620px;--stage:1080px}.topbar{padding:24px var(--edge)}.rail{left:var(--nav-edge)}.dots{right:var(--nav-edge)}.route-dots{right:var(--nav-edge)}.progress{left:calc(var(--nav-edge) + 15px)}.screen{padding:clamp(94px,14vh,142px) var(--edge) clamp(82px,11vh,112px)}.screen-inner{width:min(var(--stage),100%)}.hero .screen-inner{transform:translateY(-2vh)}.hero .eyebrow{margin-bottom:25px}.hero h1{margin-bottom:24px}.hero p{max-width:440px}.scroll-hint{margin-top:35px}.glass,.fit-layout,.flow-card,.service-panel,.outcome-card{width:min(var(--stage),100%)}.glass,.flow-card{max-width:var(--reading)}.glass h2,.fit-intro h2,.flow-card h2,.service-panel h2,.outcome-card h2{margin-bottom:22px}.glass>p,.fit-intro>p,.flow-card>p,.service-panel>p{max-width:460px}.symptoms{margin-top:38px}.symptoms li{padding:15px 0}.fit-layout{gap:clamp(30px,4vh,46px)}.fit-intro .fit-steps{margin-top:27px}.fit-card{margin-top:0}.flow-screen{justify-items:center}.flow-card{padding-block:0}.flow-card .steps{width:100%;margin-top:38px}.step{min-width:0}.service-panel{max-width:960px}.service-panel .programs{width:100%;margin-top:42px}.program{min-height:170px;padding:24px 20px 20px}.outcome-card{max-width:680px}.outcome-card .compare{margin-top:38px}.final .screen-inner{transform:translateY(-1vh)}
    @media(max-width:800px){.scroll-track{height:1740vh}.topbar{padding:20px 22px}.rail{display:none}.dots{right:14px}.route-dots{right:14px;left:14px;bottom:17px;justify-content:center;flex-wrap:wrap;gap:6px}.route-dot{padding:0 12px;min-height:36px}.route-dot span{font-size:.58rem}
    /* 이동 버튼이 알약이 되면서 두 줄을 차지합니다. 진행 표시가 그 아래 깔려
       가려졌으므로, 버튼 더미 위로 올려 둘이 겹치지 않게 합니다. */
    .progress{left:22px;bottom:108px}.screen{padding:90px 39px 74px 22px}.hero .screen-inner{margin-top:0}.hero h1{font-size:30px}.glass{padding:0}.screen[data-screen="1"]{justify-items:center}.screen[data-screen="1"] .glass{display:block;align-self:center;transform:none;max-width:620px;text-align:center}.screen[data-screen="1"] .glass>p{margin-inline:auto}.screen[data-screen="1"] .symptoms{margin:34px auto 0;text-align:left}.screen[data-screen="1"] .symptoms li{padding:14px 0}.fit-layout{grid-template-columns:1fr;gap:15px}.fit-intro h2,.flow-card h2,.service-panel h2,.outcome-card h2{margin:0 0 17px;font-size:28px}.fit-intro p{display:none}.fit-card{min-height:0;padding:17px 0 16px 18px}.fit-card h3{font-size:22px}.flow-screen{justify-items:center}.flow-card{padding:20px 0}.flow-card>p{font-size:13px}.steps{grid-template-columns:1fr 1fr;margin-top:24px}.step small{display:none}.service-panel{padding:0}.service-panel>p{font-size:13px}.programs{grid-template-columns:1fr;gap:0;margin-top:19px}.program{min-height:0;padding:13px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.24)}.program:last-child{border-bottom:0}.program h3{display:inline;margin:0 10px;font-size:18px}.program p{display:inline;font-size:12px!important}.compare{gap:12px}.outcome-card{padding:0}.compare ul{font-size:12px}.final-actions{flex-direction:column;align-items:center}.final-actions a{min-width:220px}.nav-cta{font-size:.63rem;padding:9px 11px}.journey-layer{top:50%;height:74%;transform:translateY(-50%)}.journey{opacity:.6}.jnode{--s:22px}}
    @media(prefers-reduced-motion:reduce){html,.scroll-viewport{scroll-behavior:auto}.screen,.film,.still{transition:none}.scroll-hint:after{animation:none}.grain{display:none}.jnode:before{animation:none}.jbloom{transition:opacity .3s ease}.jnode-final.on .jbloom{animation:none}.jspark.on{animation:none}}
    /* Desktop information scenes share one bilateral grid. The right edge is the inner R1 guide, never the viewport edge. */
    @media(min-width:801px){
      .screen[data-screen="2"],.screen[data-screen="3"],.screen[data-screen="4"],.screen[data-screen="5"]{justify-items:stretch}
      .screen[data-screen="2"] .fit-layout,.screen[data-screen="3"] .flow-card,.screen[data-screen="4"] .service-panel,.screen[data-screen="5"] .outcome-card{display:grid;grid-template-columns:minmax(0,460px) minmax(320px,430px);column-gap:clamp(56px,8vw,116px);align-items:center;align-self:center;max-width:1006px;margin:0 auto;text-align:left}
      .screen[data-screen="2"] .fit-intro,.screen[data-screen="3"] .eyebrow,.screen[data-screen="3"] h2,.screen[data-screen="3"] .flow-card>p,.screen[data-screen="4"] .eyebrow,.screen[data-screen="4"] h2,.screen[data-screen="4"] .service-panel>p,.screen[data-screen="5"] .eyebrow,.screen[data-screen="5"] h2{grid-column:1}
      .screen[data-screen="2"] .fit-intro p,.screen[data-screen="3"] .flow-card>p,.screen[data-screen="4"] .service-panel>p{margin-inline:0}
      .screen[data-screen="3"] .flow-card h2,.screen[data-screen="4"] .service-panel h2,.screen[data-screen="5"] .outcome-card h2{max-width:460px;margin-left:0;margin-right:0}
      .screen[data-screen="2"] .fit-steps{justify-content:flex-start}
      .screen[data-screen="2"] .fit-card{width:100%;max-width:none;margin:0;text-align:left}
      .screen[data-screen="2"] .fit-card p{margin-inline:0}
      .screen[data-screen="3"] .steps,.screen[data-screen="4"] .programs,.screen[data-screen="5"] .compare{grid-column:2;grid-row:1 / span 3;align-self:center;width:100%;margin:0}
      .screen[data-screen="3"] .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}
      .screen[data-screen="3"] .step{text-align:left}
      .screen[data-screen="4"] .programs{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.35)}
      .screen[data-screen="4"] .program{min-height:0;padding:17px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.25);text-align:left}
      .screen[data-screen="4"] .program:last-child{border-bottom:0}
      .screen[data-screen="4"] .program h3{margin:8px 0 5px}
      .screen[data-screen="5"] .outcome-card{max-width:1006px}
      .screen[data-screen="5"] .compare{text-align:left}
    }
    /* Outcome stays in the same dusk system: no light card, no dark type, no rectangular mist edge. */
    .sunrise-fx .mist{display:none}.world.day .backdrop:after{background:linear-gradient(90deg,rgba(3,12,21,.52),rgba(3,12,21,.07) 58%,rgba(3,12,21,.24)),linear-gradient(0deg,rgba(3,12,21,.52),transparent 55%)}.world.day .type-scrim{background:radial-gradient(ellipse 63% 66% at 50% 50%,rgba(3,12,21,.52) 0%,rgba(3,12,21,.28) 45%,rgba(3,12,21,0) 76%)}.screen[data-screen="5"] .outcome-card{color:#fff!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;filter:none!important}.screen[data-screen="5"] .outcome-card .eyebrow{color:#ffc0ca}.screen[data-screen="5"] .outcome-card h2,.screen[data-screen="5"] .outcome-card p,.screen[data-screen="5"] .outcome-card li,.screen[data-screen="5"] .outcome-card b{text-shadow:0 1px 3px rgba(0,0,0,.32)}.screen[data-screen="5"] .compare>div{border-top-color:rgba(255,255,255,.34)}.type-scrim{display:none!important}

    /* ══════════════════════════════════════════════════════════════
     * 모바일: 주소창이 나타나며 화면이 흔들리는 문제
     *
     * 앞서 dvh→svh, 배경 fixed+lvh, sticky→fixed 를 차례로 시도했지만 모두
     * "주소창이 움직이는 걸 전제로 그 변화를 흡수하자"는 방향이었고, 셋 다
     * 실패했습니다. 여기서는 방향을 바꿔 변수 자체를 없앱니다.
     *
     * 브라우저는 "문서(페이지 전체)가 스크롤될 때"만 주소창을 접습니다.
     * 그래서 문서는 아예 못 움직이게 잠그고(html,body overflow:hidden),
     * 대신 안쪽 상자 .scroll-viewport 가 스크롤을 맡습니다. 브라우저 입장에서는
     * 문서가 가만히 있으므로 주소창을 접지 않고, 주소창이 움직이지 않으니
     * 화면 높이가 끝까지 일정합니다 — 흔들릴 원인 자체가 사라집니다.
     *
     * 주소창이 늘 펼쳐진 상태로 유지되므로 실제 화면은 항상 svh 입니다.
     * .world 를 100svh 로 두면 화면과 정확히 일치해 배경 틈도 생기지 않습니다.
     *
     * 스크롤 주체가 window 에서 .scroll-viewport 로 바뀌므로 scroll-world.js 의
     * 스크롤 리스너와 점프 이동도 같은 상자를 보도록 맞춰 두었습니다.
     * ══════════════════════════════════════════════════════════════ */
    @media (max-width: 900px), (pointer: coarse) {
      html, body { height: 100%; overflow: hidden; }
      .scroll-viewport {
        height: 100svh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* 안쪽 상자의 위/아래 끝에서 손가락으로 더 당길 때의 러버밴드 바운스를
           막습니다. 바깥 문서는 이미 잠겨 있어 페이지째 들리지 않습니다. */
        overscroll-behavior-y: none;
      }
      .scroll-track { height: 1925svh; }
      /* .world 는 sticky 그대로 둡니다. 한때 fixed 로 바꿨었는데, 그러면 화면을
         덮은 이 레이어가 스크롤 흐름에서 빠져 손가락 터치가 .scroll-viewport 에
         닿지 않고 — 모바일에서 스크롤이 아예 먹지 않았습니다. 이제는 문서를
         잠가 주소창이 움직이지 않으므로 화면 높이가 늘 일정하고, sticky 로도
         흔들림이 없습니다. fixed 는 그 전 방식의 잔재였습니다. */
      .world { height: 100svh; }
    }

    /* Society-detail route grammar: a quiet colour point that expands left only on intent. */
    :root {
      --side-nav-right: clamp(16px, 2.4vw, 36px);
      --scene-nav-half-height: 72.5px;
      --scene-nav-gap: 10px;
    }
    .dots,
    .route-dots { right: var(--side-nav-right); }
    .route-dots {
      position: absolute;
      z-index: 31;
      /* 31px active marker + six 9px markers + six 10px gaps = 145px. */
      top: calc(50% + var(--scene-nav-half-height) + var(--scene-nav-gap));
      bottom: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }
    .route-hit {
      width: 46px;
      height: 9px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      transition: width .24s cubic-bezier(.22,1,.36,1), height .24s cubic-bezier(.22,1,.36,1);
    }
    .route-hit:hover,
    .route-hit:focus-within { width: min(214px, calc(100vw - 46px)); height: 34px; }
    .route-dot {
      --route-color: #86B8FF;
      display: inline-flex;
      width: 9px;
      min-height: 9px;
      height: 9px;
      padding: 0;
      align-items: center;
      justify-content: center;
      gap: 9px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--route-color) 76%, white);
      border-radius: 999px;
      background: var(--route-color);
      color: #071421;
      box-shadow: 0 0 12px color-mix(in srgb, var(--route-color) 62%, transparent);
      text-decoration: none;
      backdrop-filter: none;
      transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .18s ease;
    }
    .route-hit:nth-child(1) .route-dot { --route-color: #86B8FF; }
    .route-hit:nth-child(2) .route-dot { --route-color: #FF9E68; }
    .route-hit:nth-child(3) .route-dot { --route-color: #E9C278; }
    .route-hit:nth-child(4) .route-dot { --route-color: #9FE4D0; }
    .route-dot b { flex: 0 0 8px; color: currentColor; font: 900 .39rem/1 ui-monospace,SFMono-Regular,monospace; text-align: center; }
    .route-dot span { flex: 0 0 auto; color: currentColor; font-size: .59rem; font-weight: 900; letter-spacing: .12em; white-space: nowrap; opacity: 0; transform: translateX(-5px); transition: opacity .18s ease, transform .28s ease; }
    .route-hit:hover .route-dot,
    .route-hit:focus-within .route-dot,
    .route-dot:focus-visible,
    .route-dot.is-expanded {
      width: min(196px, calc(100vw - 64px));
      min-height: 34px;
      height: 34px;
      padding: 0 13px;
      justify-content: flex-start;
      border-color: color-mix(in srgb, var(--route-color) 82%, white);
      background: var(--route-color);
      color: #071421;
      transform: none;
      box-shadow: 0 0 22px color-mix(in srgb, var(--route-color) 74%, transparent);
      outline: none;
      transition: width .24s cubic-bezier(.22,1,.36,1), height .24s cubic-bezier(.22,1,.36,1), padding .24s cubic-bezier(.22,1,.36,1), border-color .16s ease, background .16s ease, color .16s ease, box-shadow .18s ease;
    }
    .route-hit:hover .route-dot b,
    .route-hit:focus-within .route-dot b,
    .route-dot:focus-visible b,
    .route-dot.is-expanded b { opacity: 0; transform: scale(.55); }
    .route-hit:hover .route-dot span,
    .route-hit:focus-within .route-dot span,
    .route-dot:focus-visible span,
    .route-dot.is-expanded span { opacity: 1; transform: translateX(0); }

    @media (max-width: 800px), (pointer: coarse) {
      :root { --side-nav-right: max(14px, env(safe-area-inset-right)); }
      .route-dots { top: calc(50% + var(--scene-nav-half-height) + var(--scene-nav-gap)); bottom: auto; left: auto; gap: 10px; }
      .route-dot { width: 9px; min-height: 9px; height: 9px; transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease; }
      .route-dot:nth-child(1) { --route-color: #86B8FF; }
      .route-dot:nth-child(2) { --route-color: #FF9E68; }
      .route-dot:nth-child(3) { --route-color: #E9C278; }
      .route-dot:nth-child(4) { --route-color: #9FE4D0; }
      .route-dot.is-expanded { width: min(196px, calc(100vw - 56px)); min-height: 34px; height: 34px; padding: 0 13px; justify-content: flex-start; transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease; }
      .route-dot.is-expanded b { opacity: 0; transform: scale(.55); }
      .route-dot.is-expanded span { opacity: 1; transform: translateX(0); }
    }

    /* Process observation frame — shared by all four scroll-world pages. */
    .rail,
    .progress { display: none !important; }
    .cinema-hud {
      position: absolute;
      inset: clamp(16px, 2.4vw, 34px);
      z-index: 29;
      pointer-events: none;
      color: rgb(255, 185, 148);
    }
    .cinema-hud__corner { position: absolute; width: 26px; height: 26px; opacity: .58; filter: drop-shadow(0 0 6px rgba(255, 185, 148, .4)); }
    .cinema-hud__corner::before,
    .cinema-hud__corner::after { content: ''; position: absolute; background: currentColor; }
    .cinema-hud__corner::before { width: 26px; height: 1px; }
    .cinema-hud__corner::after { width: 1px; height: 26px; }
    .cinema-hud__corner--tl { left: 0; top: 0; }
    .cinema-hud__corner--tr { right: 0; top: 0; transform: rotate(90deg); }
    .cinema-hud__corner--br { right: 0; bottom: 0; transform: rotate(180deg); }
    .cinema-hud__corner--bl { left: 0; bottom: 0; transform: rotate(270deg); }
    .cinema-hud__readout { position: absolute; top: 12px; left: 34px; display: flex; align-items: center; gap: 7px; color: rgba(255, 230, 214, .62); font: 700 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .18em; white-space: nowrap; }
    .cinema-hud__readout::before { content: ''; width: 16px; height: 1px; background: currentColor; }
    @media (max-width: 800px), (pointer: coarse) {
      .cinema-hud { inset: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
      .cinema-hud__corner { width: 18px; height: 18px; opacity: .48; }
      .cinema-hud__corner::before { width: 18px; }
      .cinema-hud__corner::after { height: 18px; }
      .cinema-hud__readout { top: 9px; left: 24px; font-size: 7px; }
    }

    /* Preserve the moving image; sharpen only the type edge where contrast varies. */
    .hero h1,
    .screen:not(.final) h2,
    .screen:not(.final) h3 {
      color: #fffdf9;
      text-shadow: 0 1px 2px rgba(1, 9, 17, .84), 0 3px 11px rgba(1, 9, 17, .48);
      -webkit-text-stroke: .26px rgba(1, 9, 17, .4);
      paint-order: stroke fill;
    }
    .screen:not(.final) p {
      color: rgba(255, 251, 246, .92);
      text-shadow: 0 1px 2px rgba(1, 9, 17, .78), 0 3px 8px rgba(1, 9, 17, .24);
    }
    .eyebrow,
    .scroll-hint {
      text-shadow: 0 1px 2px rgba(1, 9, 17, .74), 0 2px 7px rgba(1, 9, 17, .18);
    }
    .world[data-stage="5"] .screen:not(.final) h2,
    .world[data-stage="5"] .screen:not(.final) h3 {
      text-shadow: 0 1px 2px rgba(12, 11, 12, .9), 0 4px 13px rgba(12, 11, 12, .54);
      -webkit-text-stroke-color: rgba(12, 11, 12, .48);
    }
    .world[data-stage="5"] .screen:not(.final) p { text-shadow: 0 1px 2px rgba(12, 11, 12, .84), 0 3px 9px rgba(12, 11, 12, .3); }
    .fit-index,
    .fit-tag,
    .symptoms b,
    .step b,
    .step small,
    .program b,
    .compare b,
    .compare li {
      text-shadow: 0 1px 2px rgba(1, 9, 17, .72), 0 2px 6px rgba(1, 9, 17, .18);
    }
    .world[data-stage="5"] .fit-index,
    .world[data-stage="5"] .fit-tag,
    .world[data-stage="5"] .symptoms b,
    .world[data-stage="5"] .step b,
    .world[data-stage="5"] .step small,
    .world[data-stage="5"] .program b,
    .world[data-stage="5"] .compare b,
    .world[data-stage="5"] .compare li {
      text-shadow: 0 1px 2px rgba(12, 11, 12, .8), 0 2px 7px rgba(12, 11, 12, .24);
    }