/* BENET 웹. 색은 brand/brand-guidelines.md 에서 가져왔다. */

/* ───── 폰트 (로컬 호스팅) ─────
   디스플레이 = Wanted Sans  · 본문 = Pretendard Std
   앱 본문 폰트는 Pretendard다. 웹 제목만 Wanted Sans로 올려 브랜드 인상을 잡는다. */

@font-face {
  font-family: 'Wanted Sans';
  src: url('assets/fonts/WantedSansVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard Std';
  src: url('assets/fonts/PretendardStdVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas:       #F0F0EC;
  --surface:      #FFFFFF;
  --ink:          #1A1A1A;
  --muted:        #6B6B6B;
  --muted-soft:   #C8C8C4;
  --border:       #E5E5E0;
  --border-light: #EDEDEB;
  --coral:        #D85A56;
  --coral-deep:   #B0413E;
  --coral-soft:   #F7E4E2;
  --coral-border: #EBC8C4;

  --display: 'Wanted Sans', 'Pretendard Std', -apple-system, system-ui, sans-serif;
  --body:    'Pretendard Std', 'Wanted Sans', -apple-system, system-ui, sans-serif;

  /* scroll-world 엔진 테마 훅 */
  --sw-bg:      #F0F0EC;
  --sw-ink:     #1A1A1A;
  --sw-ink-soft:#6B6B6B;
  --sw-accent:  #D85A56;
  --sw-font-display: var(--display);
  --sw-font-body:    var(--body);

  --maxw: 68rem;
}

* { box-sizing: border-box; }

/* ⚠️ 전역 scroll-behavior: smooth 를 쓰지 않는다.
   스크럽 엔진은 스크롤 위치를 타임라인으로 읽으므로 전역 부드러운 스크롤과 싸운다. */
html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--body);
  letter-spacing: -0.014em;
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────── 비행 구간 ───────────────────── */

.sw-root .sw-copy__title { white-space: pre-line; }

/* 한글 조판 — 엔진 기본값(line-height 1.03, 42vw)은 라틴 기준이라 한글에서 깨진다 */
.sw-root .sw-copy { width: min(50vw, 620px); }

.sw-root .sw-copy__title {
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.036em;
  margin-top: 0.75rem;
  word-break: keep-all;
}
.sw-root .sw-copy__body {
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.78;
  letter-spacing: -0.016em;
  word-break: keep-all;
  max-width: 31rem;
}
.sw-root .sw-copy__eyebrow { font-weight: 600; letter-spacing: 0.01em; word-break: keep-all; }
.sw-root .sw-copy__tags li { word-break: keep-all; letter-spacing: -0.012em; }

/* 씬마다 밝기가 달라 카피 색을 뒤집는다.
   --sw-bg 를 바꾸면 엔진의 카피 스크림까지 같이 따라온다.

   ⚠️ `transition: background` 는 스크림에 안 먹는다. 스크림은 그라디언트고
   CSS 는 그라디언트끼리 보간하지 않는다 — 선언해 둬도 그냥 툭 바뀐다.
   그래서 색 변수 자체를 @property 로 등록해 보간시킨다. 변수가 서서히 변하면
   그걸 쓰는 그라디언트·로고·상단 버튼이 전부 같이 서서히 변한다. */
@property --sw-bg      { syntax: "<color>"; inherits: true; initial-value: #F0F0EC; }
@property --sw-ink     { syntax: "<color>"; inherits: true; initial-value: #1A1A1A; }
@property --sw-ink-soft{ syntax: "<color>"; inherits: true; initial-value: #6B6B6B; }

#world { transition: --sw-bg 0.5s ease, --sw-ink 0.5s ease, --sw-ink-soft 0.5s ease; }
#world .sw-copy__title,
#world .sw-copy__eyebrow,
#world .sw-copy__body,
#world .sw-copy__num,
#world .sw-copy__tags li { transition: color 0.4s ease, border-color 0.4s ease; }
/* 스크림 세기는 index.html 이 --scrim 으로 넣는다 (카피가 없으면 0) */
#world .sw-copylayer::before { opacity: var(--scrim, 1); }

/* 상단 UI 는 data-scene 선택자로 갈리므로 변수 보간과 별개로 따로 물려 준다 */
#world .sw-nav, #world .sw-topcta {
  transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

#world[data-scene="0"] {          /* 씬 1 — 새벽 어두운 방 */
  --sw-bg: #16131A;
  --sw-ink: #F4F1EC;
  --sw-ink-soft: #B9B2AE;
}

/* 비행이 끝나면 고정 레이어를 내린다. 상단 바는 내비게이션이라 남긴다. */
#world .sw-stage, #world .sw-copylayer, #world .sw-route,
#world .sw-sky, #world .sw-hint { transition: opacity 0.4s ease, visibility 0s linear 0s; }
#world.sw-done .sw-stage, #world.sw-done .sw-copylayer, #world.sw-done .sw-route,
#world.sw-done .sw-sky, #world.sw-done .sw-hint {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

@media (max-width: 860px) {
  .sw-root .sw-copy { width: auto; }
  .sw-root .sw-copy__title { font-size: clamp(1.65rem, 6.6vw, 2.25rem); line-height: 1.3; }
}

/* ───────────────────── 비행 이후 ───────────────────── */

.after { position: relative; z-index: 2; background: var(--canvas); }
.wrap  { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
.sec   { padding: clamp(5rem, 12vh, 9rem) 0; border-top: 1px solid var(--border-light); }

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--coral);
}
.h2 {
  font-family: var(--display);
  margin: 0 0 2.75rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 700; line-height: 1.32;
  letter-spacing: -0.034em; max-width: 24ch;
  word-break: keep-all;
}

/* 믿을 이유 */
.trust-grid {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--border);
  border: 1px solid var(--border); border-radius: 1rem; overflow: hidden;
}
.trust-grid li { background: var(--surface); padding: 1.75rem 1.5rem; }
.trust-grid h3 {
  font-family: var(--display);
  margin: 0 0 0.5rem; font-size: 1rem; font-weight: 700;
  line-height: 1.45; letter-spacing: -0.026em; word-break: keep-all;
}
.trust-grid p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--muted); word-break: keep-all; }
.fineprint { margin: 0; font-size: 0.8125rem; line-height: 1.75; color: var(--muted); max-width: 52ch; word-break: keep-all; }

/* FAQ */
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-family: var(--display);
  font-size: clamp(1rem, 1.9vw, 1.125rem); font-weight: 600;
  line-height: 1.55; letter-spacing: -0.026em; word-break: keep-all;
  transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--coral); }
.faq summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 4px; }
.faq summary::after, .faq summary::before {
  content: ''; position: absolute; right: 0.55rem; top: 50%;
  width: 15px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform 0.24s cubic-bezier(0.32,0.72,0,1), opacity 0.24s ease;
}
.faq summary::before { transform: translateY(-50%) rotate(90deg); }
.faq summary::after  { transform: translateY(-50%); }
.faq details[open] summary::before { transform: translateY(-50%); opacity: 0; }
.faq details[open] summary { color: var(--coral); }
.faq details[open] summary::after { background: var(--coral); }
.faq details > div { padding: 0 3rem 1.75rem 0; max-width: 58ch; }
.faq details p { margin: 0 0 0.85rem; font-size: 0.9688rem; line-height: 1.8; color: var(--muted); word-break: keep-all; }
.faq details p:last-child { margin-bottom: 0; }
.faq details strong { color: var(--ink); font-weight: 600; }

/* 설치 · 마무리 — 로고 · 배지 · 약관 · 연락처만 */
.finale {
  /* 5페이지와 같은 캔버스 한 색으로 간다.
     예전엔 위쪽에 코럴 방사형 그라디언트를 깔았는데, 앞 구간이 전부 크림색이라
     여기서만 분홍이 튀어나와 다른 페이지처럼 보였다. 경계선도 코럴이라 같이 뺐다. */
  text-align: center;
  background: var(--canvas);
  border-top: 0;
}
.finale-logo { display: block; width: auto; height: clamp(2.4rem, 5vw, 3.4rem); margin: 0 auto clamp(2rem, 5vh, 3rem); }

/* 애플 SVG는 여백이 없고 구글 PNG는 상하 여백을 잘라 뒀다.
   두 자산의 기준이 같아져서 같은 height 를 주면 실제로 같은 크기로 보인다. */
.badges { display: flex; gap: 0.9rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.badge { display: inline-flex; border-radius: 0.5rem; transition: transform 0.2s cubic-bezier(0.32,0.72,0,1); }
.badge img { display: block; width: auto; height: clamp(2.6rem, 5.2vw, 3.1rem); }
.badge:hover { transform: translateY(-2px); }
.badge:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; border-radius: 0.5rem; }
/* Play 페이지가 404인 동안에는 이 클래스를 붙여 둔다 — gtm/play-production-gate.md */
.badge--hidden { display: none; }

.finale-legal { margin-top: clamp(2.5rem, 6vh, 3.5rem); font-size: 0.9375rem; letter-spacing: -0.024em; }
.finale-legal a { color: var(--coral-deep); text-decoration: none; font-weight: 500; }
.finale-legal a:hover { text-decoration: underline; }
.finale-legal span { margin: 0 0.5rem; color: var(--muted-soft); }

.finale-contact { margin: 1.4rem 0 0; font-size: 0.875rem; line-height: 1.9; color: var(--muted); }
.finale-contact a { color: inherit; }



@media (max-width: 640px) {
  .h2 { margin-bottom: 2rem; }
  .faq summary { padding-right: 2.25rem; }
  .faq details > div { padding-right: 0; }
}

/* 어두운 씬에서 상단 UI 대비 보정.
   엔진의 .sw-nav 배경은 #fff 55%로 하드코딩돼 있고 .sw-topcta 는 var(--sw-ink)를 쓴다.
   씬 1에서 ink를 뒤집으면 둘 다 밝은 바탕에 밝은 글자가 되어 안 보인다. */
#world[data-scene="0"] .sw-nav {
  background: color-mix(in srgb, #000 46%, transparent);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}
#world[data-scene="0"] .sw-topcta { background: var(--coral); color: #fff; }

/* ───── 브랜드 = 가로형 로고 ─────
   엔진은 [사각 마크] + [BENET 텍스트] 두 조각으로 브랜드를 그린다.
   확정 가로형 로고(아기 실루엣 + 워드마크)가 이미 그 둘을 합친 그림이라 텍스트는 버린다.

   색은 검정 고정이 아니라 var(--sw-ink) 다. 씬 1(새벽)에서 --sw-ink 가 크림으로 뒤집히는데,
   검정으로 박아 두면 그 씬에서 로고가 안 보인다. 잉크를 따라가야 어느 씬에서도 읽힌다. */

.sw-brand__mark {
  width: auto;
  height: 26px;
  aspect-ratio: 2475.2 / 1000;      /* benet-logo-horizontal.svg viewBox */
  border-radius: 0;
  background: var(--sw-ink);
  -webkit-mask: url('assets/logo/benet-logo-horizontal.svg') left center / contain no-repeat;
  mask: url('assets/logo/benet-logo-horizontal.svg') left center / contain no-repeat;
  box-shadow: none;
}
.sw-brand__name { display: none; }   /* 로고 안에 이미 있다 */
.sw-brand { gap: 0; }

/* 오른쪽 세로 점 내비(sw-route)는 쓰지 않는다. 상단 pill 내비(sw-nav)와 기능이 겹친다. */
.sw-route { display: none; }

/* ───── 상단바 = 브랜드 + 카테고리 ─────
   4개 라벨 내비는 걷어냈다(nav:false). 대신 두 가지가 그 일을 나눠 맡는다.
     · 여기가 어디인가  → 상단 3px 진행바(.sw-scrollbar) — 엔진이 이미 그린다
     · 여기가 무엇인가  → 브랜드 옆 카테고리 한 줄
   카테고리 문구는 확정 스토어 이름 `BENET · 말로 남기는 육아기록` 의 뒷부분이다. */

.sw-brand::after {
  content: '말로 남기는 육아기록';
  margin-left: 0.6rem;
  padding-left: 0.7rem;
  border-left: 1px solid color-mix(in srgb, var(--sw-ink) 22%, transparent);
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;              /* 세로줄 높이 = 워드마크 캡 높이(약 16.5px)에 맞춘다 */
  letter-spacing: -0.02em;
  color: var(--sw-ink-soft);
  white-space: nowrap;

  /* ⚠️ 로고 상자의 중앙과 'BENET' 워드마크의 광학 중심이 다르다.
     실루엣이 워드마크보다 위아래로 더 길어서, 상자 기준 중앙은 0.5인데
     워드마크 중심은 0.656 에 있다. 상자에 맞춰 가운데 정렬하면
     태그라인과 세로줄이 BENET 보다 3.6px 떠 보인다.
     눈은 태그라인을 워드마크와 짝지어 보므로 워드마크에 맞춘다.
     (26px 로고 실측: 워드마크 중심 49.0 · 태그라인 중심 45.4) */
  position: relative;
  top: 3.6px;
}

/* 진행바를 조금 또렷하게 — 이제 이게 유일한 위치 표시다 */
.sw-scrollbar { height: 4px; }

@media (max-width: 640px) {
  /* 좁은 화면에서는 브랜드만 남긴다 */
  .sw-brand::after { display: none; }
}

/* 예전엔 여기 min-height: 125vh 를 줬다. 설치 섹션이 뷰포트보다 짧아서
   문서 끝까지 내려도 track.bottom 이 뷰포트 위로 못 올라가 sw-done 이 안 켜졌기 때문이다.
   지금은 5페이지가 그 사이에 2,000px 넘게 들어와 있어 그 걱정이 없다.
   그대로 두면 마무리 아래로 빈 화면 반쪽이 남는다. */
.finale {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  border-top: 0;
}

/* ═══════════ 5페이지 · 증거 구역 ═══════════
   비행이 약속한 걸 실제 앱 화면으로 증명하는 구역. 설계는 SCENE5.md
   레지스터가 다르므로(일러스트 → 실물) 씬과 같은 문법을 쓰지 않는다.
   코럴 강조는 쓰지 않는다 — 씬에서 걷어낸 규칙을 여기서 되살리지 않는다. */

/* 씬 4에서 넘어오는 자리. 불투명 배경으로 시작하면 크림색 판이 아래에서
   쓸고 올라오는 것처럼 보여 딱딱하다. 위쪽을 투명하게 두면 고정된 씬 배경이
   그대로 비쳐 서서히 녹는다. 경계선(border-top)도 그래서 뺐다. */
.proof {
  background: linear-gradient(to bottom,
    rgba(240, 240, 236, 0) 0,
    rgba(240, 240, 236, 0.9) 5rem,
    var(--canvas) 11rem);
}
.proof-intro { padding-top: clamp(5.5rem, 13vh, 9rem); text-align: center; }
.proof-h {
  font-family: var(--display); margin: 0 0 0.8rem;
  font-size: clamp(1.8rem, 4.4vw, 2.8rem); font-weight: 700;
  line-height: 1.24; letter-spacing: -0.042em; word-break: keep-all;
}
.proof-lead { margin: 0; color: var(--muted); font-size: clamp(0.95rem, 1.9vw, 1.1rem); }

/* ⚠️ 엔진이 html,body 에 overflow-x:hidden 을 주입한다(scrub-engine.js:363).
   그게 스크롤 컨테이너를 만들어 버려서 .proof-stage 의 position:sticky 가 죽는다
   — 고정되지 않고 그냥 같이 스크롤돼 올라간다.
   clip 은 가로 넘침을 똑같이 잘라 내면서 스크롤 컨테이너를 만들지 않는다.
   되돌리면 5페이지가 다시 깨진다. */
html, body { overflow-x: clip; }

/* 폰 — 베젤을 그리지 않는다. 증거 구역이라 화면이 커야 한다 (SCENE5.md) */
.phone { --pw: clamp(15rem, 25vw, 19.5rem); width: var(--pw); flex: none; }
.phone-media {
  display: block; width: 100%; aspect-ratio: 1206 / 2622; object-fit: cover;
  border-radius: calc(var(--pw) * 0.135);       /* 실제 기기 곡률 비율 */
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(26,26,26,.06), 0 30px 60px -30px rgba(26,26,26,.35);
}

/* A · 한 화면 자동 재생.
   스크롤 스크럽(320vh 스티키)을 걷어냈다 — 끊어 보여 주면 스틸 3장처럼 읽힌다.
   스텝은 셋 다 띄워 두고 지금 것만 펼친다. 루프라서 글이 튀면 읽기 힘들다. */
.proof-stage { padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem); }
.proof-inner { display: flex; align-items: center; justify-content: center;
               gap: clamp(1.5rem, 3.4vw, 3rem); width: 100%; }

/* 캐스트 열이 붙으면서 3단이 됐다. 기본 wrap(68rem)으로는 좁다 */
.proof-stage.wrap, .explore.wrap { max-width: 76rem; }

/* 배경 인물. 증거 구역이라 화면이 주인공이다 — 옆에서 거들기만 한다 */
/* 네 장 모두 700x580 같은 캔버스에 인물 키를 맞춰 넣어 뒀다.
   그래서 여기서는 높이만 정하면 인물 크기가 저절로 맞는다. */
.cast {
  position: relative; flex: 0 1 clamp(10rem, 21vw, 19rem);
  height: clamp(9.5rem, 19vw, 17.5rem); align-self: flex-end; margin-bottom: 0.5rem;
}
.cast-img {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 100%; width: auto; max-width: 100%;
  opacity: 0; transition: opacity 0.7s ease;
}
.cast-img.is-on { opacity: 1; }

.psteps { flex: 0 1 25rem; list-style: none; margin: 0; padding: 0;
          display: grid; gap: clamp(1.1rem, 2.4vh, 1.75rem); }
.pstep {
  position: relative; padding-left: 1.4rem;
  opacity: 0.34; transition: opacity 0.5s ease;
}
.pstep.is-on { opacity: 1; }
/* 왼쪽 레일 + 진행 막대. --f 는 지금 스텝 안의 진행도(0~1), JS가 채운다 */
.pstep::before, .pstep-bar {
  content: ''; position: absolute; left: 0; top: 0.3rem;
  width: 2px; border-radius: 2px;
}
.pstep::before { bottom: 0.3rem; background: var(--border); }
.pstep-bar { height: calc((100% - 0.6rem) * var(--f, 0)); background: var(--ink); }
.pstep:not(.is-on) .pstep-bar { height: 0; }

.pstep-k {
  display: block; margin-bottom: 0.45rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--muted);
}
.pstep h3 {
  font-family: var(--display); margin: 0;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem); font-weight: 700;
  line-height: 1.34; letter-spacing: -0.036em; word-break: keep-all;
}
.pstep p {
  margin: 0; max-height: 0; opacity: 0; overflow: hidden; color: var(--muted);
  font-size: clamp(0.9rem, 1.6vw, 1rem); line-height: 1.8; word-break: keep-all;
  transition: max-height 0.5s cubic-bezier(0.32,0.72,0,1), opacity 0.35s ease, margin-top 0.5s ease;
}
.pstep.is-on p { max-height: 10rem; opacity: 1; margin-top: 0.6rem; }

/* B · 칩 탐색. 스크롤에 묶지 않는다 — 묶으면 탐색 중에 섹션이 풀려 밀려난다 */
.explore { padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(5rem, 12vh, 8rem); }
.explore-h {
  font-family: var(--display); text-align: center;
  margin: 0 0 clamp(2rem, 5vh, 3.25rem);
  font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.038em;
}
.explore-inner { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 5rem); }
.explore-side { flex: 0 1 27rem; }
/* 한 줄에 다섯 개를 고정한다. 줄바꿈이 생기면 마지막 칩만 떨어져 나가 목록이 깨져 보인다.
   좁은 화면(모바일 ~350px)에서는 다섯 개가 물리적으로 안 들어간다.
   그렇다고 줄바꿈을 허용하면 다시 깨지므로, 줄은 유지하고 가로로 밀어 보게 한다.
   ⚠️ body 의 overflow-x: clip 때문에 이 컨테이너가 스크롤되지 않으면
      마지막 칩이 그냥 잘려서 닿을 방법이 없어진다. overflow-x: auto 는 필수다. */
.chips {
  display: flex; flex-wrap: nowrap; gap: 0.4rem; margin-bottom: 1.4rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  scroll-padding-inline: 0.5rem;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  font: inherit; font-size: 0.875rem; font-weight: 500; letter-spacing: -0.03em;
  padding: 0.55rem 0.85rem; border-radius: 99px; white-space: nowrap; flex: 0 0 auto;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.chip:hover { border-color: var(--muted-soft); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.explore-t {
  font-family: var(--display); margin: 0 0 0.55rem;
  font-size: clamp(1.15rem, 2.3vw, 1.55rem); font-weight: 700;
  line-height: 1.34; letter-spacing: -0.036em;
}
.explore-cap {
  margin: 0; max-width: 36ch; color: var(--muted);
  font-size: clamp(0.95rem, 1.8vw, 1.05rem); line-height: 1.85; word-break: keep-all;
}

@media (max-width: 860px) {
  /* 세로로 쌓는다. 폰이 너무 커지면 카피가 화면 밖으로 밀린다 */
  .phone { --pw: min(46vw, 12rem); }
  .proof-inner, .explore-inner { flex-direction: column; gap: 1.5rem; }
  /* ⚠️ column 으로 바뀌면 flex-basis 가 '폭'이 아니라 '높이'로 먹는다.
     데스크톱의 flex:0 1 31rem 을 그대로 두면 카피 칸이 496px 높이가 되어
     스티키 화면 밖으로 밀려 나간다. 반드시 auto 로 되돌린다. */
  .psteps, .explore-side { flex: 0 0 auto; width: 100%; }
  /* 세로로 쌓이면 옆 여백이 없다. 캐스트는 맨 아래로 내려 마무리 그림으로 쓴다.
     ⚠️ 폭으로 크기를 주면 안 된다. 네 장은 700x580 공통 캔버스에 인물을 앉힌 것이라
        캔버스 대비 인물 폭이 제각각이다(cast1 62% · cast4 92%).
        폭 기준이면 cast1 만 유독 작아지고, 좁은 화면에서 인물이 안 보인다.
        데스크톱과 똑같이 '높이'로 준다 — 인물 키가 어느 장이든 같아진다.
        남는 투명 캔버스는 옆으로 흘러도 보이지 않는다(body 의 overflow-x: clip). */
  .cast { order: 9; flex: 0 0 auto; width: 100%; height: 15.5rem;
          align-self: center; margin: 0.75rem 0 0; }
  .cast-img { max-width: none; }
  .psteps { gap: 1rem; }
  .pstep h3 { font-size: clamp(1.05rem, 4.4vw, 1.35rem); }
  .pstep p { font-size: 0.9063rem; line-height: 1.75; }
  /* 스크롤되는 줄이라 가운데 정렬하면 첫 칩이 잘린 채로 시작한다 */
  .chips { justify-content: flex-start; gap: 0.35rem; }
  .chip { font-size: 0.8125rem; padding: 0.5rem 0.7rem; }
  .explore-cap { margin-inline: auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pstep { transition: none; }
}

/* ───── 모바일 씬 초점 보정 ─────
   가로 아트(16:9)를 세로 폰에 cover 로 채우면 가로의 26%만 남는다. 엔진 기본값은
   `object-position: center 44%` 라 가운데만 보이는데, 우리 아트는 인물이 오른쪽에
   치우쳐 있어 씬 2는 빈 소파만, 씬 3은 요람이 통째로 잘려 나간다.
   그래서 씬마다 가로 초점을 따로 준다. 값은 원본을 26% 창으로 잘라 보며 고른 것이다.
   무대의 자식 순서는 다이브·커넥터가 번갈아 놓인다 —
   1 다이브1 · 2 커넥터1→2 · 3 다이브2 · 4 커넥터2→3 · 5 다이브3 · 6 커넥터3→4 · 7 다이브4.
   커넥터는 다음 다이브의 아트를 쓰므로 짝을 지어 같은 값을 준다.

   ⚠️ 미봉책이다. 가로 26%만 보이는 근본 문제는 그대로라 씬 2는 폰과 리플이 화면 밖으로
   밀리고, 씬 3은 아기 얼굴이 카피와 겹친다. 제대로 된 답은 네이티브 9:16 아트다. */

@media (max-width: 860px) and (orientation: portrait) {
  /* 씬 1 통증 — 엄마 표정과 품에 안긴 아기가 함께 들어온다 */
  #world .sw-stage > .sw-scene:nth-child(1) :is(.sw-scene__video, .sw-scene__still) {
    object-position: 57% 44%;
  }
  /* 씬 2 해결 — 가운데는 빈 소파다. 아기 얼굴과 속싸개가 보이는 자리로 민다 */
  #world .sw-stage > .sw-scene:nth-child(2) :is(.sw-scene__video, .sw-scene__still),
  #world .sw-stage > .sw-scene:nth-child(3) :is(.sw-scene__video, .sw-scene__still) {
    object-position: 76% 44%;
  }
  /* 씬 3 패턴 — 별자리만 남고 요람이 잘렸다. 둘이 같이 보이는 자리 */
  #world .sw-stage > .sw-scene:nth-child(4) :is(.sw-scene__video, .sw-scene__still),
  #world .sw-stage > .sw-scene:nth-child(5) :is(.sw-scene__video, .sw-scene__still) {
    object-position: 72% 44%;
  }
  /* 씬 4 부름 — 엄마와 아기 얼굴이 둘 다 들어오는 자리 */
  #world .sw-stage > .sw-scene:nth-child(6) :is(.sw-scene__video, .sw-scene__still),
  #world .sw-stage > .sw-scene:nth-child(7) :is(.sw-scene__video, .sw-scene__still) {
    object-position: 62% 44%;
  }
}