/* 첫 화면 '라이더의 하루' 전용. 다른 페이지와 같이 쓰는 styles.css 위에 얹는다. */
:root{
 /* 움직임 수치는 여기에만 둔다. home.js는 --reading-line, --stage-min-width만 읽는다. */
 --rise-distance:32px;--phone-rise:60px;--phone-scale-from:.92;--stage-duration:.5s;--tint-duration:.8s;--tint-switch:calc(var(--tint-duration)*.5);--reveal-stagger:80ms;--reading-line:.4;--stage-min-width:1024px;--stage-min-height:640px;
 --enter-range:.45;--observe-margin:160px;--reveal-line:15%;--reveal-duration:.6s;--fade-duration:.2s;--ease-out:cubic-bezier(.2,.7,.2,1);
 --day-strip-height:30px;--day-dot:8px;--stage-max-height:560px;--stage-breathing:120px;--stage-nudge:18px;
 --stage-bezel:6px;--stage-status-height:24px;--screen-aspect:.45;--wheel-gesture-gap:150ms;--wheel-tail-delta:10px;--wheel-lock:1200ms;
 --tint-bg:#fff;--tint-ink:var(--ink);--tint-muted:var(--secondary);--tint-accent:var(--blue);--phone-ring:transparent;
 --chapter-phone:min(280px,78%)
}
/* 시간대: 스크립트가 있으면 루트가, 없으면 각 장이 자기 색을 갖는다. */
:root[data-tint=morning],html:not(.js-story) [data-chapter][data-tint=morning]{--tint-bg:var(--soft)}
:root[data-tint=day],html:not(.js-story) [data-chapter][data-tint=day]{--tint-bg:#fff}
:root[data-tint=night],html:not(.js-story) [data-chapter][data-tint=night]{--tint-bg:var(--ink);--tint-ink:#fff;--tint-muted:#c9d6e6;--tint-accent:var(--lime);--phone-ring:#ffffff40}
:root[data-tint=rest],html:not(.js-story) [data-chapter][data-tint=rest]{--tint-bg:#edf3ea}
/* 시간대 색은 등록된 색 변수라 루트에서 전환된다. 배경은 고르게 바뀌고, 글자색은 배경이 중간 밝기일 때(--tint-switch) 한 번에 바뀐다.
   그래서 전환 중에도 글자와 배경이 같은 색으로 겹치지 않는다. 초기값은 위 :root 값이 바로 덮는다. */
@property --tint-bg{syntax:'<color>';inherits:true;initial-value:transparent}
@property --tint-ink{syntax:'<color>';inherits:true;initial-value:transparent}
@property --tint-muted{syntax:'<color>';inherits:true;initial-value:transparent}
@property --tint-accent{syntax:'<color>';inherits:true;initial-value:transparent}
@property --phone-ring{syntax:'<color>';inherits:true;initial-value:transparent}
.js-story{transition:--tint-bg var(--tint-duration) linear,--tint-ink 0s linear var(--tint-switch),--tint-muted 0s linear var(--tint-switch),--tint-accent 0s linear var(--tint-switch),--phone-ring 0s linear var(--tint-switch)}
.js-story body{background:var(--tint-bg)}

/* A: 버튼·목록·안내 글도 단어 단위로 줄을 바꾸고, 다운로드 버튼은 한 줄을 지킨다. */
.button,.chapter li,.screen-caption,.stage-caption,.story-note,.demo-instruction,.launcher-promise{word-break:keep-all}
.play-download{white-space:nowrap}
@media(max-width:374px){.hero-copy{padding-inline:12px}.play-download{padding-inline:14px;gap:8px;font-size:.92rem}.play-download>span{min-width:14px}}

/* h1 첫 줄(브랜드·검색어)은 예전 작은 윗줄 모양 그대로, 큰 문구는 그 아래 줄 */
.hero .hero-kicker{display:block;line-height:1.6;letter-spacing:.01em}
.hero h1 .hero-headline{display:block}
.story-note{font-size:.78rem;color:var(--secondary);text-align:center;margin-top:-28px;padding-bottom:20px}

/* 하루 막대: 스크립트가 없을 때는 예전 진행선처럼 얇은 선만 보인다. 진행값은 --day-progress 하나다. */
.day-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:#edf1f7;pointer-events:none}
.day-bar-label{display:none}
.day-bar-track,.day-bar-fill{position:absolute;inset:0}
.day-bar-track{container-type:inline-size}
.day-bar-fill{background:var(--blue);transform:scaleX(var(--day-progress,0));transform-origin:left}
.day-bar-track::after{content:"";position:absolute;top:50%;left:0;width:var(--day-dot);height:var(--day-dot);margin-top:calc(var(--day-dot)/-2);border-radius:50%;background:var(--blue);transform:translateX(calc(var(--day-progress,0)*(100cqw - var(--day-dot))));opacity:0;transition:opacity var(--fade-duration)}
/* 장 안에서는 메뉴 아래에 붙은 얇은 띠로 지금 시간을 보여준다(본문 위에 떠서 겹치지 않게). */
.js-story .day-bar-label{display:flex;align-items:center;position:absolute;left:0;right:0;top:100%;height:var(--day-strip-height);padding-inline:var(--gutter);background:var(--tint-bg);color:var(--tint-accent);border-bottom:1px solid #10233b12;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity var(--fade-duration)}
:root[data-day=outside] .day-bar-label{opacity:0}
:root[data-day=inside] .day-bar-track::after{opacity:1}

/* 장: 좁은 화면은 글 → 휴대폰 한 줄 */
.chapter{display:grid;gap:30px;padding-block:var(--section-space);color:var(--tint-ink)}
html:not(.js-story) .chapter{background:var(--tint-bg);border-radius:var(--radius);padding-inline:20px;margin-bottom:16px}
.chapter-copy{min-width:0}
.chapter-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.85rem;font-weight:600;margin-bottom:18px}
.chapter-clock{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 10px;border-radius:999px;background:var(--tint-accent);color:var(--tint-bg)}
.chapter-moment{color:var(--tint-ink)}
.chapter-feature{color:var(--tint-muted);font-weight:500}
.chapter-feature::before{content:"· "}
.chapter-copy h3{font-size:clamp(1.25rem,5.4vw,1.6rem);margin-top:22px}
.chapter-copy p{color:var(--tint-muted)}
.chapter .benefit-intro{font-size:1rem;line-height:1.75;margin-top:20px}
.chapter-copy h3+p,.chapter-copy h2+p:not(.benefit-intro){font-size:.95rem;line-height:1.7;margin-top:14px}
.chapter .launcher-support{font-size:.85rem;line-height:1.7;margin-top:14px}
.chapter .feature-note{font-size:.78rem;line-height:1.75;margin-top:12px}
.chapter-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;font-size:.92rem}
.chapter-points li{display:flex;align-items:baseline;gap:9px}
.chapter-points li::before{content:"·";font-weight:700;color:var(--tint-accent)}
.chapter-points.is-alert li::before{color:#d93025}

.chapter-media{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.chapter-screen{width:var(--chapter-phone)}
.chapter-screen>.phone{width:100%;box-shadow:0 0 0 1px var(--phone-ring),0 18px 38px #122c4c20}
.chapter-screen:has(.launcher-phone){width:auto}
.chapter-screen .launcher-phone{margin-block:14px}
.chapter-screen:has(.expense-demo){width:100%;max-width:440px;background:#dfe9fc;border-radius:var(--radius);padding:26px 16px}
.screen-caption{margin-top:14px;font-size:.8rem;color:var(--tint-muted)}
/* 휴대폰·체험 부품은 자기 화면 색을 지키고, 장 안의 링크·버튼·초점 테두리는 시간대 강조색을 따른다. */
[data-stage-screen]{color:var(--ink)}
.chapter .text-action,.chapter .settlement-flow,.chapter .launcher-demo-controls button{color:var(--tint-accent)}
.chapter :focus-visible,.story-stage :focus-visible{outline-color:var(--tint-accent)}
.chapter .demo-instruction{color:var(--tint-muted)}
.chapter .launcher-promise,.chapter .launcher-state-label,.chapter .demo-caption{color:var(--tint-muted)}

/* 등장 효과: 휴대폰은 스크롤 위치(--enter)를 따라 떠오르고, 글은 한 번만 순서대로 나타난다. */
.line{display:inline-block}
.js-story .story:not(.is-staged) .chapter-screen{opacity:var(--enter,1);transform:translateY(calc((1 - var(--enter,1))*var(--phone-rise))) scale(calc(var(--phone-scale-from) + (1 - var(--phone-scale-from))*var(--enter,1)));transform-origin:50% 100%}
.js-story [data-reveal]>:not(h2),.js-story [data-reveal] .line{--order:3;transition:opacity var(--reveal-duration) ease,transform var(--reveal-duration) var(--ease-out);transition-delay:calc(var(--order)*var(--reveal-stagger))}
.js-story [data-reveal]>.chapter-eyebrow{--order:0}
.js-story [data-reveal] .line{--order:1}
.js-story [data-reveal] .line:nth-of-type(2){--order:2}
.js-story [data-reveal]>:nth-child(n+4){--order:4}
.js-story [data-reveal]>:nth-child(n+5){--order:5}
.js-story [data-reveal]:not(.is-revealed):not(:focus-within)>:not(h2),.js-story [data-reveal]:not(.is-revealed):not(:focus-within) .line{opacity:0;transform:translateY(var(--rise-distance))}
@media(prefers-reduced-motion:reduce){
 .js-story .story:not(.is-staged) .chapter-screen{opacity:1;transform:none}
 .js-story [data-reveal]>:not(h2),.js-story [data-reveal] .line{opacity:1;transform:none}
}

@media(min-width:761px){
 .story-note{font-size:.85rem;margin-top:-40px}
 .chapter .benefit-intro{font-size:1.125rem}
 .chapter-points{font-size:1rem;gap:12px;margin-top:26px}
 .chapter-eyebrow{font-size:.95rem}
 .chapter-clock{font-size:1.1rem}
 .chapter .feature-note{font-size:.82rem}
 html:not(.js-story) .chapter{padding-inline:40px}
}
/* 넓은 화면, 무대가 없을 때(스크립트 없음): 장마다 글|휴대폰 2단. --stage-min-width와 짝이다. */
@media(min-width:1024px){
 :root{--chapter-phone:315px}
 .chapter{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:64px}
 .chapter h2{font-size:clamp(1.85rem,2.6vw,2.5rem)}
 html:not(.js-story) .chapter{padding-inline:56px}
}

/* 장 단위 스크롤: 장 첫머리는 메뉴와 시간 띠 바로 아래에 멈춘다. 장 밖 구역에도 멈춤 지점을 둬서 갇히지 않게 한다. */
html.js-story{scroll-snap-type:y proximity;scroll-padding-top:var(--nav-height)}
.js-story .chapter{scroll-snap-align:start;scroll-margin-top:var(--day-strip-height)}
.js-story .announcement,.js-story .hero,.js-story .guides-entry,.js-story .faq-section,.js-story .launch-section{scroll-snap-align:start}
.js-story .launch-section footer{scroll-snap-align:end}

/* 넓고 충분히 높은 화면 + 스크립트: 왼쪽은 장 글, 오른쪽은 화면 가운데에 고정된 휴대폰 무대 하나.
   미디어쿼리 숫자는 --stage-min-width, --stage-min-height와 짝이다(home.js가 같은 값으로 무대를 켠다). */
.story-stage[hidden]{display:none}
@media(min-width:1024px) and (min-height:640px){
 :root{--stage-frame-height:min(var(--stage-max-height),calc(100dvh - var(--nav-height) - var(--stage-breathing)))}
 html.js-story:has(.story.is-staged){scroll-snap-type:y mandatory}
 .story.is-staged{position:relative}
 .story.is-staged .chapter{display:flex;flex-direction:column;justify-content:center;align-items:stretch;width:56%;min-height:calc(100dvh - var(--nav-height) - var(--day-strip-height));padding-block:calc(var(--section-space)/2);padding-right:48px}
 .story.is-staged .chapter-media{align-items:flex-start;text-align:left;margin-top:24px}
 .story.is-staged .screen-caption,.story.is-staged .demo-instruction>span{display:none}
 .story-stage{position:absolute;top:0;bottom:0;right:var(--gutter);width:calc((100% - 2*var(--gutter))*.44)}
 .stage-sticky{position:sticky;top:calc(var(--nav-height) + (100dvh - var(--nav-height) - var(--stage-frame-height))/2 - var(--stage-nudge));display:flex;flex-direction:column;align-items:center}
 .stage-frame{position:relative;height:var(--stage-frame-height);width:calc((var(--stage-frame-height) - 2*var(--stage-bezel) - var(--stage-status-height))*var(--screen-aspect) + 2*var(--stage-bezel));padding:var(--stage-bezel);border-radius:32px;background:var(--ink);box-shadow:0 0 0 1px var(--phone-ring),0 24px 50px #122c4c2e}
 .stage-status{position:absolute;z-index:2;top:var(--stage-bezel);left:var(--stage-bezel);right:var(--stage-bezel);height:var(--stage-status-height);padding:0 18px;border-radius:26px 26px 0 0;background:#fff;display:flex;align-items:center;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
 .stage-screens{position:absolute;top:calc(var(--stage-bezel) + var(--stage-status-height));left:var(--stage-bezel);right:var(--stage-bezel);bottom:var(--stage-bezel);overflow:clip;border-radius:0 0 26px 26px;background:#fff}
 .stage-screens>[data-stage-screen]{position:absolute;inset:0;width:auto;max-width:none;transition:transform var(--stage-duration) var(--ease-out)}
 .stage-screens>[data-state=before]{transform:translateY(-100%)}
 .stage-screens>[data-state=after]{transform:translateY(100%)}
 .story-stage.is-moving *{transition:none!important}
 /* 무대 안에서는 각 화면의 휴대폰 틀을 감추고 내용만 꽉 채운다 */
 .stage-screens .phone,.stage-screens .launcher-phone{width:100%;height:100%;padding:0;border-radius:0;background:none;box-shadow:none}
 .stage-screens .phone>img,.stage-screens .phone>.record-screen>img{border-radius:0}
 .stage-screens .statusbar-cover{inset:0 0 auto;border-radius:0}
 .stage-screens .alert-phone>img{height:100%;object-fit:cover;object-position:top}
 .stage-screens .launcher-phone{aspect-ratio:auto;margin:0}
 .stage-screens .launcher-display{border-radius:0}
 .stage-screens .courier-statusbar{display:none}
 .stage-screens>[data-stage-screen]:has(.expense-demo){display:flex;align-items:center;padding:20px 10px;border-radius:0;background:#dfe9fc}
 .stage-screens .expense-notification,.stage-screens .expense-ledger{padding-inline:12px}
 .stage-screens .expense-row strong{white-space:nowrap}
 .stage-screens .expense-row>strong{font-size:1.15rem}
 .stage-caption{margin-top:16px;font-size:.85rem;color:var(--tint-muted);text-align:center}
}