/* 랜딩 전용 — 감성 밴드 · 스크롤 스테이지 · 폰 안 화면.
   법적 고지 페이지는 이 파일을 받지 않는다(index.html 만 링크).
   색·간격 토큰은 css/style.css 의 :root 를 그대로 쓴다. */

/* ══ 감성 밴드 — 풀블리드 사진 + 하단 카피 ═══════════════════════
   랜딩의 호흡을 만드는 자리. 기능을 설명하지 않고 정서만 건넨다.
   기능 설명은 바로 뒤 스테이지가 맡는다. */
.band { position: relative; min-height: 74vh; display: flex; align-items: flex-end;
  overflow: hidden; background: #14100C; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band .veil { position: absolute; inset: 0; background: linear-gradient(180deg,
  rgba(20,16,12,.20) 0%, rgba(20,16,12,.30) 42%, rgba(20,16,12,.80) 100%); }
.band .container { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 66px; }
.band .eyebrow { color: rgba(255,255,255,.62); font-size: 13.5px; font-weight: 700;
  letter-spacing: .08em; }
.band h2 { color: #fff; margin-top: 13px; font-size: clamp(28px, 5vw, 52px);
  letter-spacing: -.03em; line-height: 1.2; text-shadow: 0 3px 24px rgba(0,0,0,.35); }
.band p { margin-top: 17px; color: rgba(255,255,255,.82); font-size: 17px; line-height: 1.75;
  max-width: 29em; text-shadow: 0 2px 14px rgba(0,0,0,.4); }

/* ══ 스크롤 스테이지 ═════════════════════════════════════════════
   기본은 평범한 세로 나열이다. has-js + 920px 이상에서만 sticky 무대로
   승격한다(Task 5). 마크업은 한 벌뿐이라 본문이 JS 에 갇히지 않는다. */
.stage-wrap { padding: 64px 0; }
.stage-viewport { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.st-rail { display: none; }               /* 눈금은 무대에서만 쓴다 */

.st-scene { padding: 40px 0; border-top: 1px solid var(--line); }
.st-scene:first-of-type { border-top: 0; padding-top: 0; }
.st-tag { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  color: var(--accent-ink); background: var(--accent-soft); padding: 4px 11px; border-radius: 999px; }
.st-copy h3 { margin-top: 14px; font-size: clamp(26px, 5vw, 44px); letter-spacing: -.03em;
  line-height: 1.2; }
.st-copy p { margin-top: 16px; color: var(--ink-soft); font-size: 17px; line-height: 1.75;
  max-width: 31em; }
.st-screen { margin-top: 26px; width: 300px; max-width: 100%; border-radius: 22px;
  overflow: hidden; }

/* ── 폰 안 화면 — 실기기 스크린샷 넉 장 ──
   CSS 재현(.sc-*)은 전부 스샷으로 대체돼 지웠다(이 커밋 이전에 있다).
   원본 비율 0.49 가 무대 슬롯 0.464 보다 살짝 넓어 cover 가 좌우를
   조금 자를 뿐, 세로는 다 보인다. */
.sc-shot { display: block; width: 100%; height: auto; }

/* ── has-js + 920px 이상에서만 sticky 무대로 승격 ──────────────────
   scroll 길이(500vh)에서 무대 높이(100vh)를 뺀 400vh 가 진행 구간이고,
   한 단계가 정확히 100vh 다. */
@media (min-width: 920px) {
  /* 여백은 승격될 때만 걷는다 — 920px 미만 폴백은 base 의 64px 0 을 그대로 쓴다. */
  .has-js .stage-wrap { height: 500vh; padding: 0; }
  .has-js .stage-track { position: sticky; top: 0; height: 100vh; overflow: hidden;
    background: #FBF8F4; transition: background .8s ease; }
  .has-js .stage-viewport { height: 100%; position: relative; }

  .has-js .st-rail { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0;
    list-style: none; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    z-index: 2; }
  .has-js .st-rail li { position: relative; padding-left: 22px; font-size: 14px; font-weight: 700;
    color: rgba(26,20,15,.62); line-height: 2; transition: color .5s ease; }
  .has-js .st-rail li::before { content: ""; position: absolute; left: 0; top: 50%; width: 11px;
    height: 2px; background: currentColor; transform: translateY(-50%); opacity: .5;
    transition: width .5s ease; }
  .has-js .st-rail li.is-on { color: var(--accent); }
  .has-js .st-rail li.is-on::before { width: 16px; opacity: 1; }

  /* padding: 0 은 base 의 40px 0 을 걷어내는 초기화다. 그 뒤에 오는 longhand 로
     헤더(fixed, 64px) 자리를 padding-top 으로 남긴다 — 순서를 바꾸면 무효가 된다.
     align-content 는 그래도 넘칠 때 행이 위로 붙는 걸 막는다. */
  .has-js .st-scene { position: absolute; inset: 0; padding: 0; border-top: 0;
    display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center;
    align-content: center;
    max-width: var(--container); margin: 0 auto;
    padding-top: 84px; padding-left: 130px; padding-right: 20px;
    opacity: 0; transition: opacity .55s ease; pointer-events: none; }
  .has-js .st-scene.is-on { opacity: 1; pointer-events: auto; }

  /* 높이는 뷰포트를 따라 줄어든다 — 낮은 창(1366×768·1280×720)에서 폰이 헤더
     밑으로 들어가거나 트랙에 잘리던 문제. 속이 스크린샷(cover)뿐이라
     프레임이 얼마나 줄든 넘치지 않고, 낮은 창에선 화면 아래쪽이 잘릴 뿐이다. */
  .has-js .st-screen { margin-top: 0; justify-self: center; width: 320px;
    height: min(660px, calc(100vh - 148px));
    border-radius: 40px; padding: 13px; background: #14100C; overflow: visible;
    box-shadow: 0 34px 90px rgba(0,0,0,.34), 0 0 0 1.5px rgba(255,255,255,.09); }
  .has-js .st-screen .sc-shot { height: 100%; border-radius: 28px;
    object-fit: cover; object-position: top; }

  /* 어두운 단계에서 글자를 뒤집는다 */
  .has-js .stage-track.is-dark .st-copy h3 { color: #fff; }
  .has-js .stage-track.is-dark .st-copy p { color: rgba(255,255,255,.72); }
  .has-js .stage-track.is-dark .st-tag { background: rgba(255,255,255,.13); color: #F2B08C; }
  .has-js .stage-track.is-dark .st-rail li { color: rgba(255,255,255,.55); }
  .has-js .stage-track.is-dark .st-rail li.is-on { color: #F2B08C; }
}

/* 폴백에서는 JS 가 칠한 인라인 배경을 무시한다.
   go() 는 폭과 무관하게 항상 배경을 칠하는데, 이를 보정하는 is-dark 글자 반전은
   920px 안에만 있다. 그대로 두면 폴백에서 어두운 배경 위에 어두운 글자가 남아
   제목 명암비가 1.1:1 까지 떨어진다. author !important 는 non-important 인라인
   스타일을 이기므로 JS 는 건드리지 않고 여기서 무력화한다. */
@media not all and (min-width: 920px) { .stage-track { background: transparent !important; } }

/* 눈에는 안 보이되 접근성 트리에는 남는 제목 — display:none 이면 안 된다.
   무대엔 보이는 제목을 두지 않기로 한 디자인이라, 문서 개요만 바로잡는다. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .stage-track, .st-scene, .st-rail li, .st-rail li::before { transition: none !important; }
}