/* =========================================
   OMNIROUTE LANDING — V9 · discrete sections + organic flow
   ========================================= */

:root {
  /* 뉴트럴은 전부 파랑 쪽으로 살짝 기울인 쿨 계열이다.
     따뜻한 오프화이트를 쓰면 코발트가 탁해 보인다. */
  --stone:    #F3F5FA;
  --stone-2:  #E6ECF6;
  --stone-3:  #DFE5F1;
  --cream:    #FCFDFF;

  --graphite: #14171F;
  --ink-90:   rgba(20,23,31,.92);
  --ink-70:   rgba(20,23,31,.68);
  /* .54는 배경 대비 3.77:1로 본문 기준(4.5:1)에 미달했다. 본문에 쓰이는 두 단계는
     .60 이상으로 올려 AA를 넘긴다. ink-24 이하는 선·장식 전용이라 그대로 둔다. */
  --ink-55:   rgba(20,23,31,.64);
  --ink-40:   rgba(20,23,31,.62);
  --ink-24:   rgba(20,23,31,.24);
  --line:     rgba(20,23,31,.13);

  /* 코발트 한 톤으로 버티지 않도록 위아래로 폭을 넓혔다 */
  --cobalt:      #1F3BC9;
  --cobalt-soft: #4A66E3;
  --cobalt-mist: #E4E9FF;
  --cobalt-deep: #142383;
  --sky:         #6E90F2;

  --citrus: #F7B500;
  --mint:   #0C6B4A;   /* 가장 어두운 면(#E4E9FF)에서도 5.41:1 */
  --coral:  #B32D14;   /* 가장 어두운 면(#E4E9FF)에서도 5.27:1 */

  --navy-900: #0B1226;

  --font-kr:      'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  /* .psm-greeting 한 곳에서만 쓰인다. 내용이 한글이라 라틴 세리프는 렌더에 관여하지 못했고,
     실제로 화면에 나오던 것도 Pretendard 이탤릭이었다. 폰트 요청만 지웠고 화면은 그대로다. */
  --font-display: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  --container:        1440px;
  --container-narrow: 1060px;
  --gutter: 32px;
  --nav-h:  68px;

  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 9999px;

  --shadow-soft: 0 8px 24px rgba(27,27,29,.06);
}

*, *::before, *::after { box-sizing: border-box; }

/* 키보드로 들어온 사람이 내비게이션 전체를 지나치지 않아도 되게 */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 300;
  padding: 11px 20px;
  background: var(--graphite);
  color: var(--cream);
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 14px; }

/* 포커스 표시를 어디서나 또렷하게 */
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}
.feature.dark :focus-visible { outline-color: var(--sky); }

/* 화면에는 안 보이지만 스크린리더는 읽는 텍스트 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

/* 한 화면에 한 섹션만 보이게 한다.
   스냅만으로는 부족하다 — 섹션이 뷰포트보다 짧으면(0.31~0.88배였다)
   시작점에 붙여도 아래로 다음 섹션이 그대로 보인다. 높이를 먼저 채운다. */
.story,
.how,
.diff,
.lab,
.faq,
.beta {
  /* 꽉 채우되 성기지 않게. 아주 높은 화면에서도 860px 이상으로 늘리지 않는다. */
  min-height: min(calc(100svh - var(--nav-h)), 780px);
  display: flex;
  flex-direction: column;
  /* safe: 내용이 화면보다 크면 가운데 대신 위에서 시작한다(위가 잘리지 않는다) */
  justify-content: safe center;
}

/* 축소 모션에서는 부드러운 스크롤도 끈다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--stone);
  font-family: var(--font-kr);
  font-weight: 400;
  color: var(--graphite);
  background: var(--stone);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .2s var(--ease); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.025em; }
em { font-style: normal; }

::selection { background: var(--cobalt-mist); color: var(--cobalt-deep); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container.narrow { max-width: var(--container-narrow); }

/* =========================================
   AMBIENT — page-tall multi-zone background
   Scroll passes through different color regions for organic variation
   ========================================= */
/* 배경 노선도.
   전에는 방사형 마스크로 가장자리를 지워 선이 흐릿하게 사라졌다.
   지금은 마스크 없이 전체를 또렷하게 긋고, 스크롤에 따라 아주 조금만 밀린다. */
.bg-network {
  position: fixed;
  top: -12vh;
  left: 0;
  width: 100%;
  height: 124vh;
  pointer-events: none;
  z-index: -1;
  color: rgba(31, 59, 201, .17);
  transform: translate3d(0, var(--net-y, 0px), 0);
  will-change: transform;
  /* 하드웨어 스케일링으로 선이 뭉개지지 않게 한다 */
  shape-rendering: geometricPrecision;
}
.bg-network .net-lines {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linejoin: miter;
  /* viewBox가 늘어나도 선 굵기는 그대로 1.25px */
  vector-effect: non-scaling-stroke;
}
/* 스크롤이 곧 노선을 그리는 일이 된다.
   pathLength="1"로 정규화했으므로 경로 길이가 달라도 같은 비율로 그려진다.
   종착역(신청 폼)에 닿을 때 노선이 완성된다. */
/* 노선은 항상 끝까지 그린다.
   스크롤에 맞춰 부분만 그리면 중간 상태가 허공에서 끊긴 미완성 선으로 보인다.
   진행은 달리는 점과 채워지는 정거장이 말한다. */
.bg-network .net-links { opacity: .8; }
/* 노선 위를 달리는 점. 스크롤 진행도가 곧 위치가 된다. */
.bg-network .nt-dot {
  fill: var(--cobalt);
  stroke: var(--stone);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.bg-network .nt-halo {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 1.5;
  opacity: .35;
  vector-effect: non-scaling-stroke;
}
.bg-network .net-train { opacity: 1; }

/* 지나온 정거장은 채워진다 */
.station .st-num::before {
  transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.station.is-passed .st-num::before {
  background: var(--cobalt);
  box-shadow: 0 0 0 4px rgba(31, 59, 201, .16);
  transform: translateY(-50%) scale(1.15);
}
.station.light.is-passed .st-num::before {
  background: var(--sky);
  box-shadow: 0 0 0 4px rgba(110, 144, 242, .22);
}
.station .st-line { transition: background .5s var(--ease), width .5s var(--ease); }
.station.is-passed .st-line { background: var(--cobalt); width: 34px; }
.station.light.is-passed .st-line { background: var(--sky); }

@media (prefers-reduced-motion: reduce) {
  .station .st-num::before,
  .station .st-line { transition: none; }
  .bg-network .net-train { display: none; }
}

.bg-network .net-nodes circle {
  opacity: var(--draw, 1);
  transition: opacity .4s linear;
}
.bg-network .net-links {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
  opacity: .8;
  vector-effect: non-scaling-stroke;
}
/* 환승역 표식: 종이색으로 속을 파고 링만 남긴다 */
.bg-network .net-nodes circle {
  r: 4.5;
  fill: var(--stone);
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* =========================================
   SCROLL PROGRESS
   ========================================= */
/* width를 애니메이션하면 스크롤 프레임마다 레이아웃과 페인트가 돈다.
   폭을 100%로 고정하고 scaleX만 바꾸면 합성 단계에서 끝난다. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cobalt), var(--cobalt-soft));
  z-index: 200;
  will-change: transform;
  box-shadow: 0 0 8px rgba(31, 59, 201, .4);
}

/* =========================================
   NAV
   ========================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(243, 245, 250, .62);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.nav.scrolled {
  background: rgba(243, 245, 250, .9);
  border-bottom-color: var(--line);
}
.nav.dark {
  background: rgba(11, 18, 38, .65);
  border-bottom-color: rgba(255,255,255,.08);
}
.nav.dark .brand-name { color: var(--cream); }
.nav.dark .nav-links { color: rgba(255,255,255,.55); }
.nav.dark .nav-links a:hover { color: var(--cream); }
.nav.dark .nav-cta {
  background: var(--cream);
  color: var(--graphite);
}

.nav-inner {
  height: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand-name { color: var(--graphite); transition: color .3s var(--ease); }

.nav-orb {
  display: inline-flex;
  width: 28px;
  height: 28px;
  color: var(--cobalt);
  transition: color .6s var(--ease);
}
.nav-orb svg { width: 100%; height: 100%; overflow: visible; }
.nav-orb .pm-core { transform-origin: 20px 20px; animation: breathe 3.4s ease-in-out infinite; }
.nav-orb .pm-ring { transform-origin: 20px 20px; }
.nav-orb .pm-ring.r1 { animation: ping 3.4s var(--ease-out) infinite; }
.nav-orb .pm-ring.r2 { animation: ping 3.4s var(--ease-out) infinite 1.13s; }

.nav-orb[data-state="thinking"] { color: var(--cobalt-soft); }
.nav-orb[data-state="thinking"] .pm-ring { animation: none; opacity: 0; }
.nav-orb[data-state="speaking"] { color: var(--sky); }
.nav-orb[data-state="speaking"] .pm-ring.r1 { animation-duration: 2.4s; }
.nav-orb[data-state="speaking"] .pm-ring.r2 { animation-duration: 2.4s; }
.nav-orb[data-state="alert"] { color: var(--coral); }
.nav-orb[data-state="alert"] .pm-ring.r1 { animation-duration: 1.4s; }
.nav-orb[data-state="alert"] .pm-ring.r2 { animation-duration: 1.4s; animation-delay: .5s; }

@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes ping    { 0% { transform: scale(.5); opacity: .9 } 70% { opacity: .15 } 100% { transform: scale(2.35); opacity: 0 } }

.nav-links {
  display: flex;
  gap: 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-55);
}
.nav-links a {
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--graphite); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: var(--graphite);
  color: var(--cream);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .2s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.nav-cta:hover {
  background: var(--cobalt);
  color: var(--cream);
  transform: translateY(-1px);
}

/* =========================================
   BUTTONS
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  border: none;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}

.btn-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--graphite);
  padding: 14px 4px;
  letter-spacing: -.01em;
  position: relative;
}
.btn-link::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  bottom: 8px;
  height: 1.5px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.btn-link:hover { color: var(--cobalt); }
.btn-link:hover::after { transform: scaleX(1); }

/* =========================================
   줄바꿈
   한글은 keep-all 때문에 어절 단위로만 끊긴다. 그대로 두면
   "…먼저 알려주는 교통 / 비서." 처럼 마지막 줄에 두세 글자만 떨어진다.
   제목은 줄 길이를 고르게 나누고(balance), 본문은 고아줄만 막는다(pretty).
   ========================================= */
/* .hero-title 은 쉼표에서 끊는 <br> 을 직접 넣었다.
   balance 를 걸면 그 두 절을 또 나눠 의미 단위가 깨진다. */
.how-title,
.feat-title,
.diff-title,
.faq-title,
.beta-title,
.lab-title,
.m-what,
.f3-note b,
.faq-item summary {
  text-wrap: balance;
}

/* 두세 줄짜리 짧은 리드는 줄 길이를 고르게 나눈다 */
.hero-lede,
.feat-lede,
.diff-lede,
.lab-lede,
.beta-sub,
.how-cell p,
.f3-desc,
.ff-verdict p,
.mc-sub {
  text-wrap: balance;
}

/* 좁은 화면에서는 강제 개행이 balance 를 두 구역으로 갈라
   "…기본 서비스는 / 무료예요." 처럼 마지막 줄에 네 글자만 남는다.
   개행을 풀어 문단 전체를 고르게 나누게 한다. */
@media (max-width: 560px) {
  .beta-sub br,
  .how-title br,
  .diff-title br { display: none; }
}

/* 긴 본문은 마지막 줄에 한 단어만 떨어지는 것만 막는다 */
.beta-consent label,
.m-what {
  text-wrap: pretty;
}

/* =========================================
   제목 강조
   마크업 10곳이 쓰는데 규칙이 통째로 사라져 있었다.
   ========================================= */
.accent {
  background: linear-gradient(120deg, var(--cobalt-deep), var(--cobalt));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* =========================================
   정거장 표기
   섹션마다 붙던 작은 라벨을 노선도의 정거장으로 바꾼다.
   번호가 크게 서고, 짧은 선이 이름으로 이어진다.
   ========================================= */
.station {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.station.centered { justify-content: center; }

.st-num {
  font-family: var(--font-mono);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cobalt);
  position: relative;
  padding-left: 17px;
}
/* 번호 앞의 환승역 표식 */
.st-num::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.6px solid var(--cobalt);
  background: var(--stone);
}
.st-line {
  width: 26px;
  height: 1px;
  background: var(--ink-24);
  flex: none;
}
.st-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-55);
  white-space: nowrap;
}

/* 다크 섹션 */
.station.light .st-num { color: var(--sky); }
.station.light .st-num::before { border-color: var(--sky); background: var(--navy-900); }
.station.light .st-line { background: rgba(255,255,255,.28); }
.station.light .st-name { color: rgba(255,255,255,.62); }

/* 패널 위에서는 표식 속을 패널색으로 판다 */
.panel .st-num::before { background: var(--stone-2); }
.beta .st-num::before { background: var(--cobalt-mist); }

@media (max-width: 560px) {
  .st-num { font-size: 18px; }
  .st-line { width: 16px; }
  .st-name { font-size: 11.5px; letter-spacing: .06em; }
}

/* =========================================
   INTERACTIVE PHONE — shared shell
   ========================================= */
.phone {
  position: relative;
  width: 340px;
  aspect-ratio: 9 / 17.5;
  background: #0A0B0F;
  border-radius: 46px;
  box-shadow:
    inset 0 0 0 1.5px rgba(70, 72, 80, .8),
    inset 0 0 0 3px #0A0B0F,
    0 50px 80px -20px rgba(11, 18, 64, .22),
    0 16px 24px -10px rgba(11, 18, 64, .10);
  padding: 11px;
  overflow: hidden;
  transition: transform .5s var(--ease);
  /* will-change 를 걸면 레이어를 한 번 구워 두고 그 텍스처를 확대한다.
     장면마다 .93 → 1.08 → 1.2 배로 키우므로 작게 구운 글자가 늘어나 뭉갠다.
     빼면 배율이 바뀔 때마다 다시 그려서 정지 상태가 선명하다. */
  font-family: var(--font-kr);
}
.feat-1 .phone, .feat-2 .phone, .feat-3 .phone {
  width: 100%;
  max-width: 380px;
}
.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 28px;
  background: #050608;
  border-radius: 18px;
  z-index: 10;
}
.phone-statusbar {
  position: absolute;
  top: 24px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
  pointer-events: none;
  font-family: -apple-system, system-ui, sans-serif;
}
.psb-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--graphite);
}
.psb-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.psb-signal {
  width: 16px;
  height: 9px;
  background: linear-gradient(to right, var(--graphite) 25%, var(--graphite) 25%, var(--graphite) 50%, var(--graphite) 50%, var(--graphite) 75%, var(--ink-24) 75%);
  background-size: 4px 100%;
  background-position: 0 0;
  mask-image: linear-gradient(to right,
    var(--graphite) 0px, var(--graphite) 3px, transparent 3px, transparent 4px,
    var(--graphite) 4px, var(--graphite) 7px, transparent 7px, transparent 8px,
    var(--graphite) 8px, var(--graphite) 11px, transparent 11px, transparent 12px,
    var(--graphite) 12px, var(--graphite) 15px, transparent 15px);
  -webkit-mask-image: linear-gradient(to right,
    var(--graphite) 0px, var(--graphite) 3px, transparent 3px, transparent 4px,
    var(--graphite) 4px, var(--graphite) 7px, transparent 7px, transparent 8px,
    var(--graphite) 8px, var(--graphite) 11px, transparent 11px, transparent 12px,
    var(--graphite) 12px, var(--graphite) 15px, transparent 15px);
}
.psb-signal::before { content: ''; display: inline-block; width: 3px; height: 3px; background: currentColor; vertical-align: bottom; }
.psb-5g {
  font-size: 11px;
  font-weight: 700;
  color: var(--graphite);
}
.psb-battery {
  display: inline-block;
  width: 24px;
  height: 11px;
  border: 1px solid var(--graphite);
  border-radius: 3px;
  position: relative;
}
.psb-battery::before {
  content: '';
  position: absolute;
  top: 1px; left: 1px; bottom: 1px;
  width: 70%;
  background: var(--graphite);
  border-radius: 1px;
}
.psb-battery::after {
  content: '';
  position: absolute;
  right: -3px; top: 3px;
  width: 2px; height: 5px;
  background: var(--graphite);
  border-radius: 0 1px 1px 0;
}
.phone-statusbar.light .psb-time,
.phone-statusbar.light .psb-5g { color: var(--cream); }
.phone-statusbar.light .psb-battery { border-color: var(--cream); }
.phone-statusbar.light .psb-battery::before,
.phone-statusbar.light .psb-battery::after { background: var(--cream); }

.phone-screen {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 70% 50% at 30% 10%, rgba(196, 212, 250, .34) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(198, 206, 240, .3) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 50%, rgba(255, 255, 255, .55) 0%, transparent 60%),
    #F5F7FC;
  border-radius: 35px;
  padding: 62px 18px 16px;
  overflow: hidden;
  position: relative;
}
@keyframes psmPing {
  0%   { transform: scale(.5); opacity: .85; }
  70%  { opacity: .15; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes psmBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ============ MULTIMODAL SCREEN ============ */
.ps-multi {
  padding: 64px 18px 14px;
}
.psx-searchbar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.85);
  border: .5px solid rgba(255,255,255,.9);
  border-radius: 18px;
  padding: 12px 14px;
  margin-bottom: 14px;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 12px -4px rgba(11,18,64,.06);
}
.psx-back {
  font-size: 16px;
  color: var(--graphite);
  cursor: pointer;
}
.psx-search-stack {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
}
.psx-search-from, .psx-search-to {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--graphite);
}
.psx-search-line {
  height: 1px;
  background: var(--line);
  margin: 5px 0 5px 14px;
}
.psx-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.psx-dot.blue { background: var(--cobalt); }
.psx-dot.red { background: var(--coral); }
.psx-swap {
  color: var(--ink-40);
  font-size: 14px;
  cursor: pointer;
}
.psx-filters {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.psx-filter, .psx-filter-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--ink-55);
  font-weight: 600;
}
.psx-options {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 10px;
}
.psx-opt {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(255,255,255,.82);
  border: .5px solid rgba(255,255,255,.9);
  border-radius: 18px;
  padding: 14px 14px;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 12px -4px rgba(11,18,64,.06), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  outline: none;
}
.psx-opt:hover, .psx-opt:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px rgba(31, 59, 201, .22), inset 0 1px 0 rgba(255,255,255,.95);
  border-color: rgba(31, 59, 201, .22);
}
.psx-opt:active { transform: translateY(-1px) scale(.99); }
.psx-opt { position: relative; }
.psx-opt.is-selected {
  border-color: var(--cobalt);
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 2px rgba(31,59,201,.18), 0 12px 28px -8px rgba(31,59,201,.2);
}
.psx-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s var(--ease), transform .25s var(--ease-back, var(--ease));
  pointer-events: none;
}
.psx-opt.is-selected .psx-check {
  opacity: 1;
  transform: scale(1);
}
.psx-opt:hover .psx-letter,
.psx-opt:focus-visible .psx-letter { transform: scale(1.1); transition: transform .25s var(--ease); }
.psx-letter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.psx-letter.A { background: var(--cobalt); }
.psx-letter.B { background: var(--mint); }
.psx-letter.C { background: var(--citrus); color: var(--graphite); }
.psx-opt-body { min-width: 0; }
.psx-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--graphite);
}
/* 시스템 이모지 대신 인라인 SVG. 기기가 달라도 같은 모양으로 그려진다. */
.ic { width: 1em; height: 1em; display: block; }
.psx-mi { display: inline-flex; align-items: center; font-size: 13px; }
.psx-mi.sub   { color: #00A84D; }
.psx-mi.bus   { color: #3D5BF0; }
.psx-mi.taxi  { color: #E8A33D; }
.psx-mi.pm    { color: #14B8A6; }
.psx-arrow { color: var(--ink-40); font-size: 10px; }
.psx-title { margin-left: 4px; }
.psx-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.psx-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: -.005em;
}
.psx-tag.bal { background: #E6EAFF; color: var(--cobalt-deep); }
.psx-tag.cost { background: #DEFCEC; color: #0F7B53; }
.psx-tag.fast { background: #FFE9C2; color: #8B5400; }
.psx-cost { color: var(--ink-55); font-weight: 600; }
.psx-opt-right { text-align: right; }
.psx-time {
  font-size: 22px;
  font-weight: 800;
  color: var(--graphite);
  letter-spacing: -.025em;
}
.psx-time span {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-55);
  margin-left: 1px;
}
.psx-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ink-55);
  background: rgba(31,59,201,.04);
  border-radius: 10px;
  padding: 9px 12px;
}
.psx-note-ico { color: var(--cobalt); font-size: 11px; }

/* ============ ROUTE SCREEN ============ */
.ps-route {
  padding: 64px 20px 14px;
  font-size: 13px;
}
.psr-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.psr-date { font-size: 11.5px; font-weight: 700; color: var(--graphite); }
.psr-mode { font-size: 10px; color: var(--ink-55); margin-top: 1px; }
.psr-prof {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cobalt-mist);
  color: var(--cobalt-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.psr-chat {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.psr-orb {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}
.psr-orb svg { width: 100%; height: 100%; overflow: visible; }
.psr-orb-rings { transform-origin: 14px 14px; }
.psr-ring { transform-origin: 14px 14px; animation: psmPing 3.2s var(--ease-out) infinite; }
.psr-orb-core {
  transform-origin: 14px 14px;
  animation: psmBreathe 3.6s ease-in-out infinite;
}
.psr-bubble {
  background: rgba(255,255,255,.82);
  border: .5px solid rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 11px 13px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--graphite);
  flex: 1;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(11,18,64,.04);
}
.psr-bubble strong { color: var(--cobalt-deep); font-weight: 700; }
.psr-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding-left: 31px;
}
.psr-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  color: var(--ink-55);
  background: rgba(11,18,64,.04);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.psr-card {
  background: rgba(255,255,255,.85);
  border: .5px solid rgba(31,59,201,.18);
  border-radius: 18px;
  padding: 14px 15px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px -8px rgba(31,59,201,.12), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
  outline: none;
}
.psr-card:hover, .psr-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px rgba(31, 59, 201, .26), inset 0 1px 0 rgba(255,255,255,.95);
  border-color: rgba(31, 59, 201, .35);
}
.psr-card:active { transform: translateY(-1px) scale(.995); }
.psr-card { position: relative; }
.psr-card.is-confirmed {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(31,194,138,.2), 0 14px 32px -8px rgba(31,194,138,.22);
}
.psr-toast {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #0F7B53;
  background: rgba(31,194,138,.16);
  padding: 3px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.psr-card.is-confirmed .psr-toast {
  opacity: 1;
  transform: translateY(0);
}
.psr-rank {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--cobalt-deep);
  background: var(--cobalt-mist);
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.psr-time-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.psr-big {
  font-size: 26px;
  font-weight: 800;
  color: var(--graphite);
  letter-spacing: -.035em;
}
.psr-arr { font-size: 11px; color: var(--ink-55); font-weight: 500; }
.psr-dur { font-size: 11px; color: var(--ink-55); font-weight: 500; margin-left: 2px; }
.psr-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.psr-chip.bus {
  /* 146번은 서울 간선버스다. 간선은 파랑, 지선이 초록이다.
     초록(#00B881)은 노선 등급도 틀렸고 흰 글자 대비도 2.57로 읽기 어려웠다. */
  background: #2A4FD8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
}
.psr-meta { font-size: 10px; color: var(--ink-55); }
.psr-transfer {
  margin-left: auto;
  font-size: 9.5px;
  background: #DEFCEC;
  color: #0F7B53;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.psr-reason {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-70);
}
.psr-reason p { margin: 0; }
.psr-reason strong { color: var(--cobalt-deep); font-weight: 700; }
.psr-reason-eye {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--cobalt);
  margin-bottom: 4px;
}
.psr-spark { color: var(--cobalt); }
.psr-other-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .06em;
  color: var(--ink-40);
  margin-bottom: 5px;
}
.psr-other {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.78);
  border: .5px solid rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 11px 14px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(11,18,64,.04);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  outline: none;
}
.psr-other:hover, .psr-other:focus-visible {
  transform: translateY(-1px);
  border-color: var(--cobalt-mist);
}
.psr-other-time { font-size: 11px; font-weight: 700; color: var(--graphite); }
.psr-other-sub { font-size: 9.5px; color: var(--ink-55); margin-top: 2px; }
.psr-faster {
  font-size: 9.5px;
  background: #FFE9C2;
  color: #8B5400;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 700;
}
/* 릴에서는 프레임이 하나뿐이라 .phone-dark 를 걸 수 없다.
   잠금화면 자체에 어두운 바탕을 준다. */
.phone-dark .phone-screen,
.phone-screen.ps-lock {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, #1F2A55 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(124, 92, 255, .35) 0%, transparent 60%),
    linear-gradient(180deg, #0B1226 0%, #050917 100%);
}
.ps-lock {
  padding: 72px 16px 14px;
  color: var(--cream);
}
.psl-clock {
  text-align: center;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 84px;
  font-weight: 200;
  color: var(--cream);
  letter-spacing: -.035em;
  line-height: 1;
  margin-bottom: 6px;
}
.psl-date {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  margin-bottom: 24px;
}
.psl-notif {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  border: .5px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 12px 13px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease);
  outline: none;
}
.psl-notif:hover, .psl-notif:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.18);
}
.psl-notif:active { transform: translateY(0) scale(.99); }
.psl-notif { position: relative; }
.psl-notif.is-dismissed {
  opacity: .35;
  transform: translateX(40%) scale(.96);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.psl-mini-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  bottom: -28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--cream);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  padding: 5px 10px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
  white-space: nowrap;
}
.psl-notif.is-dismissed .psl-mini-toast {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.psl-notif-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.psl-app-ico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(31, 59, 201, .9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.psl-app-ico svg { width: 18px; height: 18px; overflow: visible; }
.psl-ring { transform-origin: 12px 12px; animation: psmPing 2.8s var(--ease-out) infinite; }
.psl-app-core {
  transform-origin: 12px 12px;
  animation: psmBreathe 3s ease-in-out infinite;
}
.psl-app-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cream);
}
.psl-when {
  font-size: 10px;
  color: rgba(255,255,255,.55);
  margin-left: auto;
}
.psl-tag {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--citrus);
  background: rgba(247,181,0,.18);
  padding: 2px 6px;
  border-radius: 4px;
}
.psl-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
  letter-spacing: -.015em;
}
.psl-body {
  font-size: 11px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
  margin-bottom: 10px;
}
.psl-body strong { color: var(--cream); font-weight: 700; }
.psl-actions {
  display: flex;
  gap: 6px;
}
.psl-btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.12);
  color: var(--cream);
  cursor: pointer;
  transition: background .2s var(--ease);
  border: none;
  font-family: inherit;
}
.psl-btn:hover { background: rgba(255,255,255,.2); }
.psl-btn.primary {
  background: var(--cobalt);
  color: var(--cream);
}
.psl-btn.primary:hover { background: var(--cobalt-soft); }

.psl-notif.sm {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
}
/* 애플 이모지 📅 는 'JULY 17'이 인쇄돼 있어 옆의 '9:00 팀 미팅'과 어긋났다 */
.psl-cal-ico { display: flex; font-size: 16px; flex-shrink: 0; color: rgba(255,255,255,.66); }
.psl-cal-ico .ic { width: 15px; height: 15px; }
.psl-sm-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -.01em;
}
.psl-sm-sub {
  font-size: 10px;
  color: rgba(255,255,255,.6);
  margin-top: 1px;
}

/* =========================================
   HERO
   ========================================= */
.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 40px) 0 64px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* 90px 블러 원반 두 개가 히어로를 뿌옇게 덮고 있었다.
   깊이는 배경 노선도와 폰 그림자가 이미 만든다. 히어로는 깨끗한 종이로 둔다. */
/* =========================================
   히어로 — 가운데 글, 주변에 뜬 서비스 정보
   한쪽에 몰아 두면 정보가 뭉쳐 읽히지 않는다.
   글을 축으로 세우고 판단의 조각들을 사방에 배치한다.
   ========================================= */
.hero-copy {
  max-width: 640px;
  min-width: 0;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 3;
}
.hero-copy .wordmark { justify-content: center; }
.hero-copy .hero-lede { margin-left: auto; margin-right: auto; max-width: 44ch; }
.hero-copy .hero-actions { align-items: center; }
.hero-copy .hero-form { margin: 0 auto; }
.hero-copy .beta-consent { justify-content: center; }
.hero-actions .beta-msg { text-align: center; }

/* ── 주변에 뜬 조각들 ── */
.hero-float {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hf {
  position: absolute;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  /* backdrop-filter 를 무한 애니메이션과 같이 쓰면 매 프레임 배경을 다시 흐린다.
     카드가 4장이라 그 비용이 그대로 프레임 드랍으로 나타났다. 불투명 배경으로 대체한다. */
  background: rgba(14, 22, 46, .82);
  border: 1px solid rgba(255, 255, 255, .1);
  animation: hf-drift 14s ease-in-out infinite;
  /* 마우스를 따라다니지 않는다. 올렸을 때만 반응한다.
     부모(.hero-float)가 pointer-events:none 이라 글을 가리지 않는데,
     그대로 두면 카드도 마우스를 못 받아 :hover 가 영영 안 걸린다. 카드만 되돌린다. */
  pointer-events: auto;
  transition: translate .38s var(--ease), background .38s var(--ease),
              border-color .38s var(--ease), box-shadow .38s var(--ease);
  will-change: transform;
  transform: translateZ(0);
  contain: paint;
}
.hf-eye {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sky);
  margin-bottom: 10px;
  white-space: nowrap;
}
.hf-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky);
  box-shadow: 0 0 0 3px rgba(110,144,242,.24);
}

/* 좌상 — 출발까지 남은 시간 */

/* 우상 — 경로 */

/* 우하 — 소요·도착·요금 */

/* 좌하 — 왜 지금인지 */
.hf-spark { color: var(--sky); flex: none; font-size: 13px; line-height: 1.5; }

/* ── 네 조각: 상황 · 비교 · 절약 · 이유 ── */
.hf-when    { left: 5%;  top: 17%;  width: 210px; }
.hf-compare { right: 5%; top: 17%;  width: 282px; }
.hf-save    { right: 5%; bottom: 18%; width: 214px; }
.hf-why     { left: 5%;  bottom: 18%; display: flex; gap: 9px; max-width: 232px; }

/* 상황 */
.hf-trip {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 20px; font-weight: 750; letter-spacing: -.03em; color: var(--cream);
}
.hf-trip i { font-style: normal; color: var(--sky); font-weight: 600; }
.hf-sub { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.5); }

/* 비교 — 서비스의 핵심 */
/* 세 줄이 모두 읽혀야 '비교'가 된다.
   추천 한 줄만 색 블록으로 만들면 나머지가 죽어 '정답 하나'로 읽힌다.
   대비는 남기되 차이를 줄이고, 추천은 얇은 세로선과 작은 라벨로만 표시한다. */
.hf-opt {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 9px 7px 11px;
  border-left: 2px solid transparent;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.hf-opt + .hf-opt { margin-top: 1px; }
.hf-mode { font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hf-min  { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.6); }
.hf-won  { font-variant-numeric: tabular-nums; text-align: right; min-width: 58px; color: var(--cream); }

.hf-opt.is-pick { border-left-color: var(--sky); }
.hf-opt.is-pick .hf-won { color: var(--sky); }
.hf-pick-tag {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--sky);
  border: 1px solid rgba(110,144,242,.5);
  border-radius: 999px;
  padding: 1px 6px;
  flex: none;
}

/* 절약 */
.hf-big {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 30px; font-weight: 800; letter-spacing: -.04em;
  line-height: 1; color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.hf-big i { font-style: normal; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6); }

/* 이유 */
.hf-why p {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.68);
}

@media (max-width: 1280px) {
  .hf-when    { left: 2.5%; top: 15%; width: 190px; }
  .hf-compare { right: 2.5%; top: 15%; width: 272px; }
  .hf-save    { right: 2.5%; bottom: 16%; width: 196px; }
  .hf-why     { left: 2.5%; bottom: 16%; max-width: 205px; }
}
@media (max-width: 1080px) {
  /* 조각들이 바로 아래에서 '어떻게 동작하는지'를 직접 보여준다.
     같은 질문을 하는 링크는 중복이라 접는다. */
  .hero-actions .btn-link { display: none; }

  .hf-when, .hf-compare, .hf-save, .hf-why { width: auto; max-width: none; }
  .hf-compare { grid-column: 1 / -1; }
  .hf-why { grid-column: 1 / -1; }
  .hf-big { font-size: 26px; }
}

/* 서로 다른 속도로 떠 있게 해 정지된 그림처럼 보이지 않게 */
@keyframes hf-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* 폭이 줄면 조각이 글을 덮는다. 순서대로 접는다. */
@media (max-width: 1240px) {
}
@media (max-width: 1080px) {
  /* 글 옆에 둘 자리가 없다. 조각을 글 아래로 내려 가로로 늘어놓는다. */
  .hero-float {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 40px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .hf {
    position: static;
    animation: none;
    padding: 14px 16px;
  }
}
@media (max-width: 520px) {
  .hero-float { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hf { animation: none; }
}

/* =========================================
   히어로 — 다크 캔버스
   페이지 전체가 밝은 톤 하나로 균일해 눈이 맞는 지점이 없었다.
   첫 화면을 네이비로 뒤집으면 폰 목업이 처음으로 빛나고,
   이어지는 밝은 섹션들이 대낮처럼 열린다.
   ========================================= */
.hero {
  background: var(--navy-900);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.hero-map {
  position: absolute;
  inset: 0;
  background: url("/assets/seoul-dark.jpg?v=998b9cbf") center right / cover no-repeat;
  opacity: .8;
}
/* 아래 밝은 섹션으로 부드럽게 넘어간다 */
/* 다크에서 밝은 섹션으로 넘어가는 이음매.
   길면 회색 띠처럼 탁해지므로 짧고 아래쪽에 몰아서 준다. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42px;
  background: linear-gradient(0deg, var(--stone) 30%, transparent);
  z-index: 3;
  pointer-events: none;
}


/* ── 다크 위 문구 ── */
.eyebrow.light {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.82);
}
.eyebrow.light .ey-dot { background: var(--sky); box-shadow: 0 0 0 3px rgba(110,144,242,.22); }
.hero .wm-en { color: var(--cream); }
.hero .wm-ko { color: rgba(255,255,255,.5); }
.hero .hero-title { color: var(--cream); }
.hero .hero-title .accent {
  background: linear-gradient(120deg, var(--sky), #cfdcff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .hero-lede { color: rgba(255,255,255,.72); }
.hero .btn-link { color: rgba(255,255,255,.72); }
.hero .btn-link:hover { color: var(--cream); }

/* 흰 알약이 네이비 위에서 가장 강한 대비를 만든다. 전환 지점이 저절로 드러난다. */
.hero-form .beta-field {
  background: rgba(255,255,255,.97);
  border-color: rgba(255,255,255,1);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.hero-form .beta-consent label { color: rgba(255,255,255,.62); }
.hero-form .beta-consent a { color: rgba(255,255,255,.85); }
.hero-form .beta-consent a:hover { color: var(--cream); }
.hero-form .beta-consent input[type="checkbox"] { accent-color: var(--sky); }
.hero-actions .beta-msg[data-state="ok"]    { color: #6EE7B7; }
.hero-actions .beta-msg[data-state="error"] { color: #FCA5A5; }

@media (max-width: 1080px) {
  /* 세로로 접히면 지도는 위쪽만 남아 텍스트 뒤로 간다 */
  .hero-map { background-position: center top; opacity: .72; }
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* 좌우 분할을 버리고 글을 가운데 축으로 세운다.
   서비스 정보는 .hero-float 가 그 주변에 절대 배치된다. */
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  z-index: 2;
}

/* 그리드 아이템의 기본 min-width:auto 는 자식의 최소 폭 아래로 줄어들지 못한다.
   좁은 화면에서 컬럼이 트랙을 넘어 글자가 잘리므로 0으로 풀어 준다. */
.hero-copy { max-width: 620px; min-width: 0; }

/* 히어로 안에서는 워드마크가 브랜드를 맡는다. 내비 글자는 스크롤 뒤에 나온다. */
.nav:not(.scrolled) .brand-name {
  opacity: 0;
  transform: translateX(-6px);
}
.brand-name {
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

/* =========================================
   브랜드 워드마크
   첫 화면에서 가장 큰 글자는 브랜드다. 헤드라인은 그 아래를 받친다.
   ========================================= */
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 26px 0 18px;
}
.wm-en {
  font-size: clamp(48px, 6.6vw, 88px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.055em;
  color: var(--graphite);
}
.wm-ko {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-55);
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 12px;
  background: rgba(255,255,255,.7);
  border: .5px solid rgba(255,255,255,.9);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-55);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}
.ey-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 0 0 0 4px rgba(31, 59, 201, .14);
  animation: eyDot 2.2s ease-in-out infinite;
}
@keyframes eyDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(31, 59, 201, .14); }
  50%      { box-shadow: 0 0 0 8px rgba(31, 59, 201, .04); }
}

.hero-title {
  margin: 0 0 18px;
  /* 브랜드가 가장 큰 글자가 됐으므로 헤드라인은 한 단계 내려 받친다 */
  font-size: clamp(29px, 3.4vw, 46px);
  line-height: 1.24;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--graphite);
}

.hero-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--ink-70);
  margin-bottom: 36px;
  max-width: 520px;
}

/* 이제 버튼 하나가 아니라 폼 + 안내 + 보조 링크가 세로로 쌓인다 */
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hero-actions .btn-link { margin-top: 10px; }

/* =========================================
   STORY
   ========================================= */
.story {
  padding: 80px 0 60px;
  position: relative;
}

.story-headline {
  font-size: clamp(26px, 4.4vw, 58px);
  line-height: 1.24;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--graphite);
  margin-bottom: 44px;
  word-break: keep-all;
}
/* .line 스팬이 이미 줄을 나눈다. text-wrap 을 걸면 스팬 안에서 또 쪼개진다. */
.story-headline .line { display: block; }
.story-headline .line.muted { color: var(--ink-40); }
.story-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.story-headline.is-revealed .word { opacity: 1; transform: translateY(0); }

.moments {
  display: flex;
  flex-direction: column;
}
/* 가지런한 목록 대신 오른쪽으로 흘러내리는 계단 */
.moment:nth-child(2) { margin-left: 8%; }
.moment:nth-child(3) { margin-left: 16%; }
@media (max-width: 880px) {
  .moment:nth-child(2),
  .moment:nth-child(3) { margin-left: 0; }
}
.moment {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.moment:first-child { border-top: 1px solid var(--line); }
.moment::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -1px;
  height: 1px;
  background: var(--cobalt);
  transition: right .5s var(--ease);
}
.moment:hover::after { right: 0; }
.moment:hover .m-what,
.moment:hover .m-when { color: var(--cobalt-deep); }

/* "출발 전 / 이동 중 / 심야 귀가" 는 한글이다.
   라틴 스몰캡스 자간(.18em)을 쓰면 글자가 흩어져 읽힌다. */
.m-when {
  font-family: var(--font-kr);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cobalt);
  transition: color .3s var(--ease);
}
.m-what {
  font-size: clamp(16px, 1.95vw, 25px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--graphite);
  line-height: 1.4;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

/* =========================================
   HOW — bleeds out of story
   ========================================= */
.how {
  padding: 60px 0 80px;
  position: relative;
  background:
    radial-gradient(ellipse 90% 50% at 50% 50%, rgba(255,255,255,.5) 0%, transparent 70%);
}

.how-lead {
  text-align: center;
  margin-bottom: 56px;
}
.how-lead .station { justify-content: center; }

.how-title {
  font-size: clamp(25px, 4.0vw, 52px);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--graphite);
  max-width: 760px;
  margin: 0 auto;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.how-cell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* 세 칸을 같은 선에 세우지 않고 한 칸씩 내려 읽는 리듬을 만든다 */
.how-cell:nth-child(2) { transform: translateY(34px); }
.how-cell:nth-child(3) { transform: translateY(68px); }
@media (max-width: 880px) {
  .how-cell:nth-child(2),
  .how-cell:nth-child(3) { transform: none; }
}
/* 번호는 정거장 표기가 맡는다. 여기는 칸을 나누는 선만 둔다. */
.hc-rule {
  height: 1px;
  background: var(--line);
  position: relative;
  margin-bottom: 4px;
}
.hc-rule::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0;
  height: 2px;
  background: var(--cobalt);
  transition: width .4s var(--ease);
}
.how-cell:hover .hc-rule::after { width: 44px; }
.how-cell h3 {
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--graphite);
}
.how-cell p {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.75;
  color: var(--ink-70);
}

/* =========================================
   FEATURE SECTIONS — phone + copy side-by-side
   ========================================= */
.feature {
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

/* =========================================
   섹션 표면
   색이 번지게 두지 않는다. 정보를 읽는 섹션(how · 비교 · FAQ)만
   한 톤 눌린 면으로 깔고, 나머지는 깨끗한 종이로 둔다.
   경계는 전부 그어진 선이다.
   ========================================= */
.panel {
  background: var(--stone-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* 종이 위 섹션끼리 맞닿는 곳에도 선을 하나 긋는다 */
.rule-top { border-top: 1px solid var(--line); }

.feat-2 { background: transparent; }

/* =========================================
   FEAT-2 — 12주 선택 기록
   폰 목업이 문장으로 말하는 "지난 12주간 환승 3회"를
   같은 화면에서 그림으로 한 번 더 보여준다.
   ========================================= */
/* 상자 대신 위쪽 선 하나로 구역을 표시한다 */
.learn-strip {
  margin-top: 34px;
  padding: 22px 0 0;
  max-width: 380px;
  border-top: 1px solid var(--ink-24);
}
.ls-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.ls-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-70);
  letter-spacing: -.01em;
}
.ls-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-55);
}
.ls-key {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--cobalt);
}
.ls-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 54px;
}
.ls-bars .lw {
  flex: 1;
  height: var(--h);
  border-radius: 3px;
  background: var(--stone-3);
  transition: height .6s var(--ease);
}
/* 환승을 고른 주만 코발트로 표시한다 */
.ls-bars .lw.transfer { background: var(--cobalt); }
.ls-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--ink-40);
}

@media (max-width: 880px) {
  .learn-strip { max-width: none; margin-top: 26px; }
}

/* 계단식 배치로 마지막 칸이 아래로 내려가므로 여유를 준다 */
.how { padding-bottom: 46px; }

/* =========================================
   FEATURES — 스크롤로 넘기는 한 대의 폰
   폰은 고정되고 화면과 텍스트가 바뀐다. 테마도 함께 넘어간다.
   ========================================= */
.reel {
  position: relative;
  /* 마지막 장면이 다크라 아래 섹션과의 이음매를 여기서 만든다 */
  background: var(--stone);
  transition: background .6s var(--ease);
}
.reel[data-chapter="1"] { background: var(--stone-2); }
.reel[data-chapter="2"] { background: var(--navy-900); }

/* 세 장면 분량의 스크롤 길이 */
.reel-track { height: 320vh; }  /* 장면 4개 · 장면당 약 55vh 씩 내린다 */

.reel-stage {
  position: sticky;
  /* 최상단에 붙이면 내용이 고정 내비 뒤로 숨는다 */
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.reel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
  transition: grid-template-columns .9s var(--ease);
}
/* 장면이 바뀌면 판을 다시 짠다.
   2장면에서는 폰이 글 자리로 건너가고, 3장면에서는 폰 쪽 칸이 넓어진다.
   order 를 바꾸면 순간이동한다. 좌우 이동은 transform 으로 해야 미끄러진다.
   ⚠ 좌우 교차는 2단 그리드가 전제다. 900px 이하는 1단이라
      -100% 를 주면 폰이 화면 밖으로 나간다. 반드시 폭으로 가둔다. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .reel-copy,
  .reel-visual { transition: transform .9s var(--ease); }
  .reel[data-chapter="1"] .reel-visual { transform: translateX(calc(-100% - 56px)); }
  .reel[data-chapter="1"] .reel-copy   { transform: translateX(calc(100% + 56px)); }
  .reel[data-chapter="2"] .reel-inner  { grid-template-columns: .78fr 1.22fr; }
}

/* 글 크기도 장면마다 달라진다 */
.reel { --rc-title: clamp(24px, 2.8vw, 34px); }
.reel[data-chapter="1"] { --rc-title: clamp(28px, 3.5vw, 43px); }
.reel[data-chapter="2"] { --rc-title: clamp(32px, 4.2vw, 54px); }
.reel .feat-title {
  font-size: var(--rc-title);
  transition: font-size .9s var(--ease), color .6s var(--ease);
}

/* ── 글: 장면마다 갈아 끼운다 ── */
.reel-copy { position: relative; min-height: 340px; }
.reel-chapter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(22px);
  /* 나갈 때 — 짧게 지운다 */
  transition: opacity .2s var(--ease), transform .32s var(--ease);
  pointer-events: none;
}
.reel-chapter.is-live {
  opacity: 1;
  transform: none;
  /* 들어올 때 — 앞 장면이 지워진 뒤에 시작한다 */
  transition: opacity .34s var(--ease) .18s, transform .5s var(--ease) .14s;
  pointer-events: auto;
}
/* 다크 장면에서는 글자를 뒤집는다 */
.reel[data-chapter="2"] .feat-title { color: var(--cream); }
.reel[data-chapter="2"] .feat-lede  { color: rgba(255,255,255,.72); }
.reel[data-chapter="2"] .feat-points li { color: rgba(255,255,255,.82); }
.reel[data-chapter="2"] .st-num { color: var(--sky); }
.reel[data-chapter="2"] .st-num::before { border-color: var(--sky); background: var(--navy-900); }
.reel[data-chapter="2"] .st-line { background: rgba(255,255,255,.3); }
.reel[data-chapter="2"] .st-name { color: rgba(255,255,255,.6); }
.reel[data-chapter="2"] .accent {
  background: linear-gradient(120deg, var(--sky), #cfdcff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reel[data-chapter="2"] .fp-dot { background: var(--sky); }

/* ── 폰: 한 대가 계속 서 있고 화면만 바뀐다 ── */
.reel-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  height: 100%;
}
.reel-phone {
  width: 100%;
  /* 3장면에서 1.2배까지 커진다. 화면이 낮으면 그 상태가 무대를 넘겨 위아래가 잘리므로
     기기 폭 자체를 화면 높이에서 역산한다. (폰 높이 ≈ 폭 × 2.09, 최대 배율 1.2, 여백 80px) */
  /* 종횡비 1.83 이다. 무대(100svh - 내비)를 넘으면 노치까지 잘려 망가져 보인다.
     넘지 않는 선에서 최대로 키운다. */
  max-width: min(430px, calc((100svh - var(--nav-h) - 48px) / 1.83));
  position: relative;
  align-self: center;
  transition: transform .9s var(--ease), box-shadow .6s var(--ease);
  /* will-change 를 걸면 레이어를 한 번 구워 두고 그 그림을 확대한다.
     장면마다 .93 → 1.08 → 1.2 로 키우니 작게 구운 텍스처가 늘어나 글자가 뭉갰다.
     빼면 배율이 바뀔 때 다시 그려서 선명하다. */
  transform: rotate(-4deg) scale(.93);
}
.reel[data-chapter="1"] .reel-phone {
  transform: rotate(3deg) scale(1.08);
}
.reel[data-chapter="2"] .reel-phone {
  transform: rotate(-1.5deg) scale(1.2);
  background: #050608;
  box-shadow:
    inset 0 0 0 1.5px rgba(120,132,170,.55),
    inset 0 0 0 3px #0A0B0F,
    0 60px 110px -24px rgba(0,0,0,.7);
}
/* 화면 아래를 그라데이션으로 지우면 기기가 잘려 보인다.
   대신 바닥을 실제 UI(하단 바 + 홈 인디케이터)로 마감해 화면을 끝맺는다. */
.reel-phone .phone-screen {
  position: absolute;
  inset: 11px;
  width: auto;
  height: auto;
  opacity: 0;
  transform: scale(.985);
  /* 나갈 때 — 앞 화면이 뒤 화면에 비치지 않게 먼저 지운다 */
  transition: opacity .2s var(--ease), transform .32s var(--ease);
  pointer-events: none;
}
.reel-phone .phone-screen.is-live {
  opacity: 1;
  transform: none;
  transition: opacity .34s var(--ease) .2s, transform .52s var(--ease) .16s;
  pointer-events: auto;
}
/* 잠금화면 장면에서는 상태바 글자도 밝게 */
.reel[data-chapter="2"] .phone-statusbar { color: var(--cream); }
.reel[data-chapter="2"] .psb-5g { color: var(--cream); }
.reel[data-chapter="2"] .psb-battery { border-color: var(--cream); }
.reel[data-chapter="2"] .psb-battery::before,
.reel[data-chapter="2"] .psb-battery::after { background: var(--cream); }

/* ── 몇 번째 장면인지 ── */
.reel-dots {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.reel-dot {
  width: 22px; height: 3px; border-radius: 2px;
  background: var(--ink-24);
  transition: background .4s var(--ease), width .4s var(--ease);
}
.reel-dot.is-on { background: var(--cobalt); width: 34px; }
.reel[data-chapter="2"] .reel-dot { background: rgba(255,255,255,.22); }
.reel[data-chapter="2"] .reel-dot.is-on { background: var(--sky); }

/* ── 좁은 화면: 붙잡되 세로로 ──
   폰을 없애면 목업을 볼 수 없다. sticky 는 유지하고 배치만 세로로 바꾼다.
   100svh 를 써서 모바일 브라우저 주소창 높이 변화에 흔들리지 않게 한다. */
@media (max-width: 900px) {
  .reel-stage { height: calc(100svh - var(--nav-h)); }
  .reel-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    align-content: center;
  }
  .reel-copy { min-height: 0; height: 216px; }
  .reel-chapter { justify-content: flex-start; }
  .reel-chapter .feat-lede { margin-bottom: 12px; }
  /* 좁은 화면에서는 불릿까지 넣으면 폰이 눌린다 */
  .reel-chapter .feat-points { display: none; }
  .reel-visual { align-items: flex-start; min-height: 0; }
  .reel-phone { max-width: 268px; transform: none !important; }
  /* 하단 상시 CTA 바(약 88px)를 피해서 올린다 */
  .reel-dots { bottom: 104px; }
}
@media (max-width: 900px) and (max-height: 700px) {
  /* 화면이 낮으면 폰이 잘린다. 글을 더 줄인다. */
  .reel-copy { height: 168px; }
  .reel-chapter .feat-lede { display: none; }
}

/* ── 모션 감소: 붙잡지 않는다 ──
   세 장면을 그냥 쌓고, 폰 프레임을 벗겨 화면 세 개를 나란히 보여준다.
   어떤 화면도 잃지 않는다. */
@media (prefers-reduced-motion: reduce) {
  .reel { background: var(--stone) !important; }
  .reel-track { height: auto; }
  .reel-stage { position: static; height: auto; display: block; overflow: visible; }
  .reel-inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .reel-copy { min-height: 0; height: auto; display: flex; flex-direction: column; gap: 56px; }
  .reel-chapter {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    justify-content: flex-start;
  }
  .reel-chapter .feat-points,
  .reel-chapter .feat-lede { display: block; }

  /* 기기 프레임을 벗기고 화면 세 개를 그대로 쌓는다 */
  .reel-visual { display: block; height: auto; }
  .reel-phone {
    max-width: 340px;
    margin: 0 auto;
    background: none;
    box-shadow: none;
    padding: 0;
    transform: none !important;
    aspect-ratio: auto;
  }
  .reel-phone .phone-notch,
  .reel-phone .phone-statusbar,
  .reel-dots { display: none; }
  .reel-phone .phone-screen {
    position: static;
    inset: auto;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    height: 560px;
    border-radius: 22px;
    border: 1px solid var(--line);
    margin-bottom: 26px;
  }
}

/* feat-3 dark — full bleed with smooth in/out gradient */
.feature.dark {
  background: var(--navy-900);
  color: var(--cream);
}
/* 원래는 섹션 위쪽 바깥에 페이드를 두려고 translateY(-100%)를 썼는데
   .feature{overflow:hidden}에 잘려 렌더되지 않았다. 섹션 안쪽에 그린다. */
.feature.dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(180deg, var(--stone), transparent);
  z-index: 1;
  pointer-events: none;
}
.feature.dark::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(0deg, var(--stone-2), transparent);
  z-index: 1;
  pointer-events: none;
}

.feat-text { max-width: 480px; }

.feat-title {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--graphite);
  margin-bottom: 22px;
  word-break: keep-all;
}
.feat-title.light { color: var(--cream); }

.feat-lede {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-70);
  margin-bottom: 28px;
}
.feat-lede.light { color: rgba(255, 255, 255, .74); }

.feat-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feat-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-70);
  font-weight: 500;
}
.feat-points.light li { color: rgba(255,255,255,.78); }
.fp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(31,59,201,.14);
  flex-shrink: 0;
}
.feat-points.light .fp-dot {
  background: #8FA1FF;
  box-shadow: 0 0 0 3px rgba(143,161,255,.18);
}

.feat-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  position: relative;
  padding: 24px 0;
}

/* =========================================
   기능 섹션 폰 — 크게 키우고 아래를 흘린다
   실측: ps-multi 화면 788px 중 319px(40%), ps-route 30%, ps-lock 28%가 빈 그라데이션이었다.
   내용이 없는 하단을 부드럽게 지우면서 폰 자체를 키우면
   "온전히 놓인 작은 그림"이 아니라 "화면 밖으로 이어지는 기기"로 읽힌다.
   히어로(ps-morning)는 9%만 비어 있어 손대지 않는다.
   ========================================= */
@media (min-width: 881px) {
  .feat-1 .phone,
  .feat-2 .phone,
  .feat-3 .phone { max-width: 468px; }

  .feat-1 .feat-visual,
  .feat-2 .feat-visual,
  .feat-3 .feat-visual {
    align-items: flex-start;
    max-height: 600px;
    overflow: visible;
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 74%, transparent 97%);
  }
}
.feat-2 .phone {
  transform: rotate(2deg);
  animation: pf3 10s ease-in-out infinite;
}
/* 중앙 무대에서는 폰을 거의 정면으로 세운다. 좌우 카드가 이미 비대칭을 만든다. */
.feat-3 .phone {
  transform: rotate(-1deg);
  animation: pfNeg3 10s ease-in-out infinite;
}
@keyframes pf2 {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-10px); }
}
@keyframes pf3 {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-10px); }
}
@keyframes pfNeg3 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-10px); }
}

/* =========================================
   LAB
   ========================================= */
.lab {
  padding: 90px 0 80px;
  position: relative;
}

.lab-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
}
.lab-title {
  font-size: clamp(26px, 4.2vw, 56px);
  line-height: 1.22;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--graphite);
  margin-bottom: 18px;
  word-break: keep-all;
}
.lab-lede {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-70);
  margin-bottom: 32px;
  max-width: 480px;
}
.lab-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.lm-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  align-items: baseline;
}
.lm-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--cobalt);
}
.lm-body {
  font-size: 14.5px;
  color: var(--graphite);
  font-weight: 600;
  letter-spacing: -.01em;
}

.lab-marks {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;
}
.em-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .5s var(--ease);
  transform-style: preserve-3d;
  flex-shrink: 0;
}
/* outer ring + university name — rotates */
.em-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  animation: emRotate 80s linear infinite;
}
@keyframes emRotate { to { transform: rotate(360deg); } }

/* inner fixed: SNU shield centered + TRANSPORT label */
.em-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.em-shield {
  width: 64px;
  height: 100px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 153, .35));
  animation: shieldBreathe 5s ease-in-out infinite;
}
@keyframes shieldBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.em-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--cobalt-deep);
  margin-top: 10px;
  text-transform: uppercase;
}

.em-glow {
  position: absolute;
  inset: -16%;
  background: radial-gradient(circle, rgba(31, 59, 201, .22), transparent 65%);
  filter: blur(20px);
  border-radius: 50%;
  z-index: 1;
  animation: emGlowPulse 4s ease-in-out infinite;
}
@keyframes emGlowPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* 히어로 안의 신청 폼. 하단 폼과 같은 부품을 쓰되 크기만 맞춘다. */
.hero-form { max-width: 460px; margin: 0; }
.hero-form .beta-field { padding: 5px 5px 5px 20px; }
.hero-form .beta-field input { font-size: 14.5px; }
.hero-form .beta-field button { min-width: 108px; padding: 11px 20px; }
.hero-form .beta-consent {
  margin: 14px 0 0;
  max-width: 440px;
}
.hero-form .beta-consent label { font-size: 12px; }
.hero-actions .beta-msg { margin-top: 10px; text-align: left; }

/* =========================================
   무엇이 다른가 — 비교
   ========================================= */
.diff {
  padding: 74px 0 66px;
  position: relative;
  text-align: center;
}
.diff-title {
  font-size: clamp(24px, 3.8vw, 48px);
  line-height: 1.26;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 16px;
}
.diff-lede {
  max-width: 42ch;
  margin: 0 auto 40px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-70);
}

.diff-table {
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(12px);
}
.dt-head,
.dt-row {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1.15fr;
  gap: 0;
  padding: 0;
  align-items: stretch;
}
/* 패딩을 칸에 주면 '플릿' 칸의 배경이 위아래로 끊기지 않고 이어져
   열 하나를 통째로 두른 테두리가 된다. */
.dt-head > *,
.dt-row > * {
  padding: 16px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dt-head > *:first-child,
.dt-row > *:first-child { padding-left: 22px; }
.dt-head > *:last-child,
.dt-row > *:last-child { padding-right: 22px; }
.dt-head {
  background: rgba(20, 23, 31, .04);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-55);
}
.dt-row { border-top: 1px solid var(--line); font-size: 16px; }
.dt-row [role="rowheader"] {
  font-weight: 600;
  color: var(--ink-70);
  font-size: 15px;
}
.dt-row [role="cell"] { color: var(--ink-55); }
/* 우리 쪽 열만 코발트로 세운다 */
.dt-head .dt-us { color: var(--cobalt); }
.dt-row .dt-us {
  color: var(--graphite);
  font-weight: 600;
  position: relative;
}
.diff-note {
  margin: 20px auto 0;
  max-width: 52ch;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-40);
}

/* =========================================
   FAQ
   ========================================= */
.faq { padding: 64px 0 70px; position: relative; }
.faq-title {
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.3;
  letter-spacing: -.035em;
  font-weight: 800;
  text-align: center;
  margin: 0 0 40px;
}
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

/* 6문답을 전부 펼쳐 두면 모바일에서 1,175px이 최종 CTA 앞을 막는다.
   접어 두면 폼까지의 거리가 절반 이하로 줄어든다. */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--graphite);
  transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--cobalt); }
.faq-item summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }

/* 십자에서 빼기로 바뀌는 표식 */
.faq-mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.faq-mark::before,
.faq-mark::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 14px;
  height: 1.6px;
  background: var(--ink-55);
  border-radius: 2px;
  transition: transform .28s var(--ease), background .2s var(--ease);
}
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-item[open] .faq-mark::before,
.faq-item[open] .faq-mark::after { background: var(--cobalt); }

.faq-answer {
  padding: 0 4px 22px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--ink-70);
  text-wrap: pretty;
}
.faq-answer a {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-mark::before, .faq-mark::after { transition: none; }
}

@media (max-width: 720px) {
  .dt-head, .dt-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 16px 18px;
  }
  /* 좁은 화면에서는 헤더 행 대신 각 행이 스스로를 설명하게 한다 */
  .dt-head { display: none; }
  .dt-row [role="rowheader"] {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--ink-55);
    margin-bottom: 3px;
  }
  .dt-row [role="cell"]:not(.dt-us)::before {
    content: "지금까지 · ";
    color: var(--ink-40);
  }
  .dt-row .dt-us { margin-top: 2px; }
  .diff { padding: 56px 0 48px; }
  .faq { padding: 48px 0 56px; }
}

/* =========================================
   BETA
   ========================================= */
.beta {
  padding: 74px 0 84px;
  position: relative;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cobalt-mist) 0%, var(--stone) 82%);
}
/* 노선이 폼 한 지점으로 모인다. 페이지에서 여기 하나만 이런다. */
/* 좌표가 데스크톱 실측 기준이라 좁은 화면에서는 노드가 화면 밖으로 나간다.
   깨진 그래픽을 보이느니 감춘다. 종착 표시는 코발트 밴드와 정거장 08이 이미 한다. */

.beta .container { position: relative; z-index: 1; }

.beta-title {
  font-size: clamp(27px, 4.4vw, 60px);
  line-height: 1.2;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--graphite);
  margin: 0 0 18px;
}
.beta-sub {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-70);
  margin-bottom: 32px;
}

.beta-form {
  max-width: 520px;
  margin: 0 auto;
}

/* 이메일 입력 + 제출 버튼이 함께 들어가는 알약 */
.beta-field {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,.92);
  border: .5px solid rgba(255,255,255,.95);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 22px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
}
.beta-field:focus-within {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 4px rgba(31, 59, 201, .1);
}
.beta-form.is-invalid .beta-field {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(240, 100, 73, .12);
}
.beta-field input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  min-width: 0;
  color: var(--graphite);
}
.beta-field input::placeholder { color: var(--ink-40); }

.beta-field button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 116px;
  padding: 12px 22px;
  background: var(--graphite);
  color: var(--cream);
  border: none;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.beta-field button:hover:not(:disabled) {
  background: var(--cobalt);
  transform: translateY(-1px);
}
.beta-field button:disabled { cursor: default; opacity: .62; }
.beta-field button svg { transition: transform .3s var(--ease); }
.beta-field button:hover:not(:disabled) svg { transform: translateX(3px); }

/* 전송 중에는 화살표를 도는 고리로 바꾼다 */
.beta-form.is-sending .beta-field button svg { display: none; }
.beta-form.is-sending .beta-field button::after {
  content: "";
  width: 13px;
  height: 13px;
  border: 1.8px solid rgba(251,250,245,.35);
  border-top-color: var(--cream);
  border-radius: 50%;
  animation: beta-spin .7s linear infinite;
}
@keyframes beta-spin { to { transform: rotate(360deg); } }

/* 봇 함정. 화면에서 완전히 빼되 display:none은 피한다(일부 봇이 걸러낸다) */
.beta-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.beta-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 460px;
  margin: 18px auto 0;
  text-align: left;
}
.beta-consent input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--cobalt);
  cursor: pointer;
}
.beta-consent label {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-55);
  cursor: pointer;
}
.beta-consent a {
  color: var(--ink-70);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.beta-consent a:hover { color: var(--cobalt); }
.beta-form.is-invalid-consent .beta-consent label { color: var(--coral); }

/* 신청이 끝난 뒤에 나타나는 다음 행동. 베타 모집은 링크가 퍼져야 늘어난다. */
.beta-next {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.beta-next p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-55);
}
.beta-share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--ink-24);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--graphite);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.beta-share:hover { border-color: var(--cobalt); color: var(--cobalt); }
.beta-share[data-copied="true"] { border-color: var(--mint); color: var(--mint); }

.beta-msg {
  margin-top: 16px;
  min-height: 18px;
  font-size: 13.5px;
  color: var(--mint);
  font-weight: 500;
}
/* 색만으로 성공·실패를 구분하지 않도록 기호를 함께 붙인다 */
.beta-msg[data-state="error"] { color: var(--coral); }
.beta-msg[data-state="ok"]    { color: var(--mint); }
.beta-msg[data-state="info"]  { color: var(--ink-55); }
.beta-msg[data-state="error"]::before { content: "! "; font-weight: 700; }
.beta-msg[data-state="ok"]::before    { content: "\2713 "; font-weight: 700; }

/* =========================================
   FOOTER
   ========================================= */
.footer {
  padding: 52px 0 44px;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.ft-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ft-orb {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--cobalt);
}
.ft-orb svg { width: 100%; height: 100%; }
.ft-tag { font-size: 13px; color: var(--ink-55); }
.ft-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-40);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ft-meta a:hover { color: var(--graphite); }
.ft-sep { opacity: .45; }

/* =========================================
   REVEAL
   ========================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1080px) {
  /* 히어로는 이제 단일 컬럼이라 순서 규칙이 필요 없다.
     연구실 섹션만 2열에서 1열로 접는다. */
  .lab-grid { grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 880px) {
  :root { --gutter: 26px; }

  /* iOS Safari는 16px 미만 입력에 포커스가 가면 페이지를 확대한다.
     전환 지점에서 화면이 튀는 걸 막는다. */
  .beta-field input,
  .hero-form .beta-field input { font-size: 16px; }

  /* 알약 한 줄에 16px 입력과 버튼을 같이 넣으면 입력칸이 눌려 사라진다.
     좁은 화면에서는 세로로 쌓는다. */
  .beta-field,
  .hero-form .beta-field {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: var(--r-lg);
  }
  .beta-field input,
  .hero-form .beta-field input {
    width: 100%;
    padding: 13px 14px;
    border-radius: var(--r-md);
    background: rgba(255,255,255,.7);
  }
  .beta-field button,
  .hero-form .beta-field button {
    width: 100%;
    padding: 15px 20px;
    font-size: 15px;
  }
  .beta-consent,
  .hero-form .beta-consent { max-width: none; }
  .nav-links { display: none; }

  .hero { min-height: auto; padding: calc(var(--nav-h) + 36px) 0 64px; }

  .story { padding: 60px 0 48px; }
  .story-headline { margin-bottom: 36px; }
  .moment { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .m-what { white-space: normal; font-size: 16px; }

  .how { padding: 50px 0 70px; }
  .how-lead { margin-bottom: 48px; }
  .how-grid { grid-template-columns: 1fr; gap: 36px; }

  .feature { padding: 70px 0; }
  .feat-text { max-width: 100%; }

  .lab { padding: 70px 0 60px; }
  .em-wrap { width: 200px; height: 200px; }
  .lab-marks { gap: 24px; }
  .lm-item { grid-template-columns: 1fr; gap: 4px; }

  .beta { padding: 60px 0 90px; }
  /* 알약 레이아웃은 위 880px 블록의 .beta-field 규칙이 맡는다.
     .beta-form 이 알약이던 시절의 규칙은 제거했다. 입력을 가운데 정렬하던 것도 함께. */
}

@media (max-width: 520px) {
  /* CTA와 브랜드명을 지우면 모바일에는 신청 경로가 한 개도 남지 않는다.
     숨기는 대신 줄인다. */
  .nav-cta { padding: 8px 13px; font-size: 12.5px; }
  .brand-name { font-size: 15px; }
  .em-wrap { width: 170px; height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* 모션을 줄이면 배경 노선도도 스크롤에 따라 밀리지 않게 한다 */
  .bg-network { transform: none !important; --draw: 1 !important; }
}

/* =========================================
   모바일 하단 상시 CTA
   히어로를 지나면 올라오고, 베타 폼이 보이면 스스로 비킨다.
   ========================================= */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(252, 253, 255, .86);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .38s var(--ease);
}
.mobile-cta.is-shown { transform: translateY(0); }
.mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  background: var(--graphite);
  color: var(--cream);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  text-decoration: none;
}
.mobile-cta .mc-sub {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-55);
}
@media (max-width: 880px) {
  .mobile-cta { display: block; }
  /* 바에 가려 푸터 마지막 줄이 잘리지 않게 */
  .footer { padding-bottom: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}
/* 목업 안 아이콘 크기 */
.psr-tag .ic { width: 11px; height: 11px; }

/* =========================================
   폰 화면 바닥 마감
   화면 아래를 그라데이션으로 지우는 대신 실제 UI로 끝맺는다.
   바닥이 잡히면 가운데 여백은 앱의 정상 여백으로 읽힌다.
   ========================================= */
.phone-screen .ps-home {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 34%;
  height: 4px;
  border-radius: 4px;
  background: rgba(20, 23, 31, .26);
  transform: translateX(-50%);
}
.phone-screen.is-dark .ps-home { background: rgba(255, 255, 255, .34); }

.phone-screen .ps-botbar,
.phone-screen .ps-botcta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 24px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.phone-screen .ps-botbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink-70);
}
.ps-botbar-chev { color: var(--cobalt); font-size: 15px; line-height: 1; }
.phone-screen .ps-botcta {
  padding: 13px 14px;
  border-radius: 12px;
  background: var(--cobalt);
  color: #fff;
  text-align: center;
}

/* =========================================
   섹션 전환
   스크롤 타임라인은 합성기에서 돌아 메인 스레드를 막지 않는다.
   지원하지 않는 브라우저는 기존 [data-reveal] 등장으로 남는다.
   ========================================= */
/* 양끝 30%를 걸쳐 서서히 스미고 서서히 빠진다. 경계가 아니라 번짐으로 넘어간다. */
@keyframes sect-pass {
  0%       { opacity: 0; transform: translateY(60px) scale(.972); }
  30%, 70% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(-46px) scale(.98); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 881px) {
    .story > .container,
    .how > .container,
    .diff > .container,
    .lab > .container,
    .faq > .container,
    .beta > .container {
      animation: sect-pass linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: opacity, transform;
    }
  }
}

/* 화면이 낮으면 한 섹션이 안 들어간다. 높이 강제를 푼다. */
@media (max-height: 660px) {
  .story, .how, .diff, .lab, .faq, .beta { min-height: 0; }
  .hero { min-height: 88vh; }
}

/* =========================================
   첫 화면 — 순서대로 자리를 잡는다
   한 덩어리로 리빌하면 다섯 요소가 동시에 튀어나와 어수선하다.
   ========================================= */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-run {
  0%   { top: -6px; opacity: 0; }
  20%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { top: 42px; opacity: 0; }
}

/* 스크롤 마커 — 노선 위를 내려가는 점 */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  /* 가운데 정렬은 독립 translate 로 잡는다.
     transform 은 등장 애니메이션이 쓰므로 여기 쓰면 중앙이 풀린다. */
  translate: -50% 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.hs-rail {
  position: relative;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, .2);
  overflow: hidden;
}
.hs-dot {
  position: absolute;
  left: -1.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sky);
}
.hs-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  color: rgba(255, 255, 255, .55);
}
.hero-scroll:hover .hs-label { color: rgba(255, 255, 255, .72); }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: hero-in .85s cubic-bezier(.22, .7, .3, 1) both; }
  .hero-copy > *:nth-child(1) { animation-delay: .06s; }
  .hero-copy > *:nth-child(2) { animation-delay: .20s; }
  .hero-copy > *:nth-child(3) { animation-delay: .36s; }
  .hero-copy > *:nth-child(4) { animation-delay: .52s; }
  .hero-copy > *:nth-child(5) { animation-delay: .66s; }

  /* 조각은 글이 자리잡은 뒤 하나씩 붙는다.
     drift 와 나란히 돌리고 지연만 두 번째 값으로 따로 준다. */
  .hf { animation: hf-drift 14s ease-in-out infinite, hf-in .7s ease both; }
  .hf-when    { animation-delay: 0s, .82s; }
  .hf-compare { animation-delay: 0s, .97s; }
  .hf-save    { animation-delay: 0s, 1.12s; }
  .hf-why     { animation-delay: 0s, 1.27s; }

  .hs-dot { animation: hs-run 2s cubic-bezier(.6, 0, .4, 1) infinite; }
  .hero-scroll { animation: hero-in .8s cubic-bezier(.22, .7, .3, 1) both; animation-delay: 1.45s; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-dot { top: 18px; }
}

/* 히어로 노선 — 지도 위를 지나는 두 줄 */
.hero-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--sky);
  shape-rendering: geometricPrecision;
}
.hero-routes .hr-lines path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  opacity: .34;
}
.hero-routes .hr-nodes circle {
  fill: var(--navy-900);
  stroke: currentColor;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  opacity: .5;
}

/* 조각에 마우스를 올렸을 때 — 따라오는 대신 그 조각만 반응한다 */
@media (hover: hover) {
  .hf:hover {
    translate: 0 -6px;
    background: rgba(18, 28, 58, .92);
    border-color: rgba(120, 152, 255, .42);
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .7);
  }
  .hf:hover .hf-eye { color: var(--sky); }
}

/* 열차 — 배경에서 눈에 띄어야 '움직이는 것'으로 읽힌다 */
.bg-network .nt-halo2 {
  fill: var(--cobalt);
  opacity: .1;
  animation: nt-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes nt-pulse {
  0%, 100% { opacity: .08; }
  50%      { opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-network .nt-halo2 { animation: none; }
}

/* =========================================
   섹션 공기 — 평평한 한 색이 아니라 옅은 빛이 돈다
   ========================================= */
.story::before,
.lab::before,
.beta::before,
.faq::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.story > *,
.lab > *,
.beta > *,
.faq > * { position: relative; z-index: 1; }

.story::before {
  background:
    radial-gradient(1100px 520px at 12% 18%, rgba(110, 144, 242, .16), transparent 68%),
    radial-gradient(820px 460px at 88% 82%, rgba(31, 59, 201, .10), transparent 70%);
}
.lab::before {
  background:
    radial-gradient(900px 480px at 84% 22%, rgba(110, 144, 242, .17), transparent 66%),
    radial-gradient(700px 420px at 10% 88%, rgba(12, 107, 74, .06), transparent 70%);
}
.faq::before {
  background: radial-gradient(1000px 560px at 50% 6%, rgba(110, 144, 242, .13), transparent 70%);
}
.beta::before {
  background:
    radial-gradient(1200px 620px at 50% 100%, rgba(31, 59, 201, .18), transparent 68%),
    radial-gradient(760px 400px at 14% 12%, rgba(110, 144, 242, .12), transparent 70%);
}

/* =========================================
   좁은 화면 숨통
   글이 커지면서 좌우 22px 만 남아 답답했다. 가로는 거터로, 세로는 아래에서 넓힌다.
   ========================================= */
@media (max-width: 640px) {
  .story, .how, .diff, .lab, .faq, .beta { padding-block: 72px; }
  .hero { padding: calc(var(--nav-h) + 52px) 0 76px; }

  /* 한 줄이 화면 끝까지 닿지 않게 가둔다 */
  .hero-lede,
  .story-headline,
  .diff-lede,
  .lab-lede,
  .beta-sub,
  .feat-lede { max-width: 30ch; }

  .moment { padding: 20px 0; gap: 6px; }
  .faq-item summary { padding-block: 20px; }
  .how-cell { gap: 14px; }
  .hf { padding: 15px 18px; }
}

/* =========================================
   좁은 화면 규격 — 글과 폼을 화면에 맞춘다
   ========================================= */
@media (max-width: 640px) {
  /* 글씨 */
  .wm-en      { font-size: 38px; }
  .wm-ko      { font-size: 13px; }
  .hero-title { font-size: 25px; }
  .hero-lede  { font-size: 15px; line-height: 1.62; }
  .eyebrow    { font-size: 11px; }

  /* 폼 — 입력칸은 16px 밑으로 내리지 않는다. iOS 가 포커스 때 화면을 확대한다.
     위쪽 880px 블록이 .hero-form .beta-field 로 잡고 있어 구체도를 맞춰야 이긴다. */
  .beta-field,
  .hero-form .beta-field { padding: 6px; gap: 6px; border-radius: 16px; }
  .beta-field input,
  .hero-form .beta-field input {
    padding: 11px 13px;
    font-size: 16px;
  }
  .beta-field button,
  .hero-form .beta-field button {
    padding: 12px 18px;
    font-size: 14.5px;
    min-width: 0;
  }
  .beta-consent { gap: 8px; }
  .beta-consent label { font-size: 12px; line-height: 1.55; }

  /* 조각 */
  .hf     { padding: 13px 15px; border-radius: 14px; }
  .hf-eye { font-size: 10.5px; }
}

/* =========================================
   후기 — 양방향으로 흐르는 두 줄
   ========================================= */
.reviews {
  position: relative;
  padding: clamp(64px, 8vh, 104px) 0 clamp(72px, 9vh, 116px);
  background: var(--stone-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.rv-title {
  font-size: clamp(26px, 3.8vw, 48px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.2;
  color: var(--graphite);
  text-wrap: balance;
  margin: 0 0 clamp(28px, 4vh, 46px);
  text-align: center;
}

.rv-marquee {
  overflow: hidden;
  /* 양 끝에서 카드가 잘리지 않고 스며 사라지게 한다 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.rv-marquee + .rv-marquee { margin-top: 16px; }

.rv-track {
  display: flex;
  /* gap 은 마지막 카드 뒤에 안 붙는다. 그러면 '한 벌'의 폭과 -50% 이동 거리가
     간격 하나만큼 어긋나 이음매에서 튄다. 카드마다 오른쪽 여백을 줘서
     한 벌 = 카드수 × (카드폭 + 여백) 으로 딱 떨어지게 한다. */
  gap: 0;
  width: max-content;
  padding: 4px 0;   /* 좌우 패딩도 폭에 섞이므로 두지 않는다 */
  animation: rv-scroll 58s linear infinite;
}
/* 두 벌을 이어 붙였으므로 -50% 가 정확히 한 벌이다 */
@keyframes rv-scroll { to { transform: translateX(-50%); } }
.rv-rev .rv-track { animation-duration: 70s; animation-direction: reverse; }
.rv-marquee:hover .rv-track,
.rv-marquee:focus-within .rv-track { animation-play-state: paused; }

.rv-card {
  flex: 0 0 auto;
  width: min(360px, 78vw);
  margin: 0 16px 0 0;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px -6px rgba(20, 23, 31, .18);
}
.rv-stars {
  display: inline-flex;
  gap: 2px;
  color: #D9962A;
  margin-bottom: 11px;
}
.rv-stars .ic { width: 15px; height: 15px; display: block; }
.rv-card blockquote {
  margin: 0 0 13px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-70);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.rv-card figcaption {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-40);
  letter-spacing: -.01em;
}

/* 움직임을 줄이는 설정에서는 흐르지 않고, 손으로 넘겨 본다 */
@media (prefers-reduced-motion: reduce) {
  .rv-track {
    animation: none;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .rv-card { scroll-snap-align: center; }
  .rv-marquee { -webkit-mask-image: none; mask-image: none; }
  /* 애니메이션이 없으면 두 벌째는 같은 말의 반복일 뿐이다 */
  .rv-card[aria-hidden="true"] { display: none; }
}

@media (max-width: 640px) {
  .rv-card { padding: 17px 18px; margin-right: 12px; }
  .rv-card blockquote { font-size: 14px; }
  .rv-marquee + .rv-marquee { margin-top: 12px; }
}

/* 폰이 눌린다는 걸 알려주는 한 줄. 없으면 아무도 눌러보지 않는다. */
.reel-hint {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-40);
  transition: color .6s var(--ease);
}
.reel[data-chapter="2"] .reel-hint { color: rgba(255, 255, 255, .5); }
@media (hover: none) {
  .reel-hint { display: none; }   /* 손가락으로는 굳이 안내하지 않아도 눌러 본다 */
}

/* =========================================
   4장면 — 들러 가기
   3장면(잠금화면)이 어두웠으므로 다시 밝은 면으로 돌아온다.
   ========================================= */
.reel[data-chapter="3"] { background: var(--stone-2); }
.reel[data-chapter="3"] .reel-phone {
  transform: rotate(2.5deg) scale(1.02);
  background: #0A0B0F;
}
.reel[data-chapter="3"] { --rc-title: clamp(28px, 3.5vw, 43px); }

/* 화면 */
.ps-stop { background: var(--stone); padding: 64px 16px 14px; }
.pst-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 13px;
  margin-top: 10px;
}
.pst-eye {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-40);
  margin-bottom: 8px;
}
.pst-row { display: flex; align-items: center; gap: 9px; }
.pst-body { flex: 1 1 auto; min-width: 0; }
.pst-badge {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--cobalt);
  color: #fff;
}
.pst-badge.cup { background: var(--mint); }
.pst-name {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--graphite);
}
.pst-sub { font-size: 11px; color: var(--ink-40); margin-top: 2px; }
.pst-delta {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--cobalt);
  font-variant-numeric: tabular-nums;
}
.pst-alt {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--ink-40);
}
.pst-actions { display: flex; gap: 6px; margin-top: 11px; }
.pst-actions .psl-btn { flex: 1 1 0; }

/* 주문을 넣으면 뜨는 확인 */
.pst-toast {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%) translateY(6px);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--mint);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.pst-card.is-ordered .pst-toast { opacity: 1; transform: translateX(-50%) translateY(0); }
.pst-card.is-ordered .pst-actions { opacity: .45; }

/* =========================================
   경로 구간 막대
   '지하철 + 택시'라고 글자로만 쓰면 이어 탄다는 게 안 보인다.
   어느 수단으로 몇 분인지를 길이로 보여준다.
   ========================================= */
.psx-legs {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.psx-leg {
  position: relative;
  border-radius: 3px;
  min-width: 14px;
  overflow: hidden;
}
/* 글자를 막대 안에 넣으면 좁은 구간에서 잘린다(실측 최대 19px).
   막대는 얇게 두고 시간은 그 아래에 적는다. */
.psx-leg {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 26px;
  overflow: visible;
  background: none !important;
  border-radius: 0;
}
.psx-bar {
  flex: none;          /* 안 잡으면 칸 높이만큼 늘어난다 */
  height: 5px;
  border-radius: 3px;
  background: currentColor;
}
.psx-leg i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
}
.psx-leg.sub  { color: #00A84D; }
.psx-leg.bus  { color: #2A4FD8; }
.psx-leg.pm   { color: #0E8A5F; }
.psx-leg.taxi { color: #C77A12; }
.psx-leg.stop { color: var(--ink-55); }
.psx-leg.walk { color: var(--ink-40); }
/* 수단 색은 화면 안의 아이콘과 같게 맞춘다 */
.psx-leg.sub  { background: #00A84D; }
.psx-leg.bus  { background: #2A4FD8; }
.psx-leg.pm   { background: #0E8A5F; }
.psx-leg.taxi { background: #C77A12; }
.psx-leg.walk { background: rgba(20,23,31,.32); }

/* =========================================
   수단 아이콘 줄 — 글 목록 대신 그림으로
   ========================================= */
.fp-wide { list-style: none; padding: 0; margin: 4px 0 0; }
.fp-wide::before { content: none; }
.modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--cream);
}
.mode .ic {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mode b {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink-70);
}
.mode.sub  { color: #00A84D; }
.mode.bus  { color: #2A4FD8; }
.mode.bike { color: #0E8A5F; }
.mode.pm   { color: #14B8A6; }
.mode.taxi { color: #C77A12; }
.mode.walk { color: var(--ink-40); }

.reel[data-chapter="2"] .mode {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
}
.reel[data-chapter="2"] .mode b { color: rgba(255,255,255,.82); }

/* how 세 칸의 아이콘 */
.hc-ico {
  display: block;
  margin: 14px 0 10px;
  color: var(--cobalt);
}
.hc-ico .ic {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 비교표 — 행 아이콘과 수단 칩 */
.dt-ico {
  width: 15px; height: 15px;
  margin-right: 7px;
  vertical-align: -3px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-24);
}
.dt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-size: 11.5px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink-70);
}
.dt-chip .ic {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.dt-chip.sub { color: #00A84D; } .dt-chip.bus { color: #2A4FD8; }
.dt-chip.bike { color: #0E8A5F; } .dt-chip.pm { color: #14B8A6; }
.dt-chip.taxi { color: #C77A12; } .dt-chip.walk { color: var(--ink-40); }

/* =========================================
   좁은 화면 — 히어로 조각을 줄인다
   네 개가 세로로 쌓이면 473px 을 먹어 히어로가 화면 1.4배가 된다.
   맥락(어디서 어디로)과 근거(비교) 둘만 남긴다.
   ========================================= */
@media (max-width: 880px) {
  .hf-save, .hf-why { display: none; }
  .hf-when, .hf-compare { animation-delay: 0s, .5s; }
}

/* =========================================
   좁은 화면 글자 크기
   실측하니 9.5~11.5px 짜리가 40곳이었다. 한글은 이 크기면 폰에서 안 읽힌다.
   본문성 글자는 12.5px 이상으로, 목업 안쪽도 최소 11px 로 올린다.
   ========================================= */
@media (max-width: 900px) {
  /* 페이지 본문 */
  .st-name    { font-size: 13px; }
  .hs-label   { font-size: 11.5px; }
  .lm-eyebrow { font-size: 12px; }
  .hf-eye     { font-size: 12px; }
  .rc-eye     { font-size: 12px; }
  .rc-sub     { font-size: 12.5px; }
  .mc-sub     { font-size: 12.5px; }
  .em-label   { font-size: 11px; }

  /* 폰 목업 안쪽 — 목업이라도 읽히긴 해야 한다 */
  .psx-tag, .psr-other-label, .psl-tag        { font-size: 10.5px; }
  .psr-toast, .psr-rank, .psr-transfer,
  .psr-other-sub, .psr-faster                 { font-size: 11px; }
  .psx-filter, .psx-filter-right, .psx-cost,
  .psr-mode, .psr-chip, .psr-meta,
  .psl-when, .psl-mini-toast, .psl-sm-sub,
  .pst-eye, .pst-badge, .pst-toast            { font-size: 11.5px; }
  .psl-app-name, .pst-alt                     { font-size: 11.5px; }
  .psb-5g, .psr-arr, .psr-dur,
  .psr-other-time, .psl-btn, .pst-sub         { font-size: 12px; }
  .psx-title, .psr-date, .psl-sm-title        { font-size: 12.5px; }

  .ls-axis, .ls-axis span { font-size: 11.5px; }
  .psx-note { font-size: 11.5px; }

  /* 글자를 키웠으니 줄바꿈이 깨지지 않게 여유를 준다 */
  .psx-title, .psr-other-sub, .psl-sm-sub { white-space: normal; }
}

/* =========================================
   장면 배경 — 소구점을 선으로 그린다
   배경 레이어(z-index 0, pointer-events none)라 글 배치에 영향을 주지 않는다.
   ========================================= */
.reel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.reel-inner { position: relative; z-index: 2; }

.rb {
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.reel[data-chapter="0"] .rb[data-bg="0"],
.reel[data-chapter="1"] .rb[data-bg="1"],
.reel[data-chapter="2"] .rb[data-bg="2"],
.reel[data-chapter="3"] .rb[data-bg="3"] {
  opacity: 1;
  transition-delay: .18s;
}

.rb-line {
  fill: none;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.rb-line.sub   { stroke: #00A84D; stroke-width: 9;  opacity: .16; }
.rb-line.taxi  { stroke: #C77A12; stroke-width: 9;  opacity: .16; }
.rb-line.stop  { stroke: var(--graphite); stroke-width: 9; opacity: .13; }
.rb-line.pick  { stroke: var(--cobalt); stroke-width: 10; opacity: .16; }
.rb-line.ghost { stroke: var(--graphite); stroke-width: 5; opacity: .05; }
.rb-line.dim   { stroke: var(--sky); stroke-width: 6; opacity: .1; }

.rb-node {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 5;
  opacity: .2;
  vector-effect: non-scaling-stroke;
}
.rb-ring {
  fill: none;
  stroke: var(--sky);
  stroke-width: 2.5;
  opacity: .16;
  vector-effect: non-scaling-stroke;
}
.reel[data-chapter="2"] .rb-node { stroke: var(--sky); opacity: .5; }

/* 좁은 화면에서는 배경 선이 글과 겹쳐 읽기를 방해한다 */
@media (max-width: 900px) {
  .reel-bg { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .rb { transition: none; }
}

/* 기반 섹션과 장면 불릿의 아이콘 */
.lm-ico {
  width: 14px; height: 14px;
  margin-right: 6px; vertical-align: -2px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  color: var(--cobalt);
}
.fp-ico {
  width: 15px; height: 15px;
  flex: none;
  margin-right: 9px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  color: var(--cobalt);
}
.reel[data-chapter="2"] .fp-ico { color: var(--sky); }

/* =========================================
   비교표 — '플릿' 열을 통째로 두른다
   앞머리에 파란 점을 찍으면 색이 글보다 먼저 읽혀 어색했다.
   열 자체를 테두리로 묶어 어느 쪽이 우리인지 한눈에 보이게 한다.
   ========================================= */
.dt-us {
  background: rgba(31, 59, 201, .055);
  box-shadow: inset 2px 0 0 0 var(--cobalt), inset -2px 0 0 0 var(--cobalt);
}
.dt-head .dt-us {
  box-shadow: inset 2px 0 0 0 var(--cobalt), inset -2px 0 0 0 var(--cobalt),
              inset 0 2px 0 0 var(--cobalt);
  color: var(--cobalt);
  font-weight: 700;
}
.diff-table .dt-row:last-of-type .dt-us {
  box-shadow: inset 2px 0 0 0 var(--cobalt), inset -2px 0 0 0 var(--cobalt),
              inset 0 -2px 0 0 var(--cobalt);
}

/* 좁은 화면에서는 행이 세로로 쌓이므로 왼쪽 한 줄만 남긴다 */
@media (max-width: 720px) {
  .dt-head > *, .dt-row > * { padding: 12px 16px; }
  .dt-us,
  .dt-head .dt-us,
  .diff-table .dt-row:last-of-type .dt-us {
    box-shadow: inset 3px 0 0 0 var(--cobalt);
  }
  .dt-row { font-size: 15px; }
  .dt-row [role="rowheader"] { font-size: 12.5px; }
}

/* 매장 아이콘 */
.pst-ico {
  width: 14px; height: 14px;
  margin-right: 6px; vertical-align: -2px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  color: var(--cobalt);
}

/* =========================================
   폰을 키우면서 생기는 두 가지를 같이 잡는다
   1) 위를 기준으로 세워 잘림이 아래에서만 생기게
   2) 장면별 배율을 1 근처로 좁혀 글자가 다시 그려지지 않게
      (배율이 1에서 멀수록 합성기가 텍스처를 늘려 뭉갠다)
   ========================================= */
.reel-stage { overflow: hidden; }

.reel-phone                        { transform: rotate(-2.5deg) scale(1); }
.reel[data-chapter="1"] .reel-phone { transform: rotate(2deg)   scale(1.02); }
.reel[data-chapter="2"] .reel-phone { transform: rotate(-1deg)  scale(1.04); }
.reel[data-chapter="3"] .reel-phone { transform: rotate(1.5deg) scale(1.01); }

/* =========================================
   2번 — 왜 이게 최적인지 화면이 말한다
   ========================================= */
.psx-opt.is-best {
  border-color: var(--cobalt);
  background: rgba(31, 59, 201, .045);
  box-shadow: 0 0 0 1px var(--cobalt);
}
.psx-best {
  position: absolute;
  top: -8px;
  left: 12px;
  z-index: 2;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  background: var(--cobalt);
  padding: 3px 8px;
  border-radius: 999px;
}
.psx-why {
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: var(--ink-55);
  letter-spacing: -.02em;
}
.psx-why b { color: var(--cobalt); font-weight: 700; }

/* =========================================
   5번 — 말이 적히고, 잠깐 헤아리고, 답이 나온다
   ========================================= */
.pst-say span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-right: 1.5px solid var(--cobalt);
}
.pst-think {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  height: 6px;
}
.pst-think i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cobalt);
  opacity: .25;
}

@media (prefers-reduced-motion: no-preference) {
  /* 장면에 들어올 때만 돌린다 */
  .reel[data-chapter="3"] .pst-say span {
    animation: pst-type 1.1s steps(24, end) .25s both,
               pst-caret .7s step-end .25s 3;
  }
  .reel[data-chapter="3"] .pst-think i {
    animation: pst-dot 1.1s ease-in-out infinite;
  }
  .reel[data-chapter="3"] .pst-think i:nth-child(2) { animation-delay: .16s; }
  .reel[data-chapter="3"] .pst-think i:nth-child(3) { animation-delay: .32s; }
  /* 다 헤아리면 사라지고 아래 카드가 답이 된다 */
  .reel[data-chapter="3"] .pst-think {
    animation: pst-done .4s ease 2.5s both;
  }
  .reel[data-chapter="3"] .pst-card {
    animation: pst-in .5s var(--ease) both;
  }
  .reel[data-chapter="3"] .pst-card:nth-of-type(1) { animation-delay: 2.4s; }
  .reel[data-chapter="3"] .pst-card:nth-of-type(2) { animation-delay: 2.7s; }
}
@keyframes pst-type  { from { width: 0; } to { width: 100%; } }
@keyframes pst-caret { 50% { border-right-color: transparent; } }
@keyframes pst-dot   { 0%, 100% { opacity: .25; transform: translateY(0); }
                       40% { opacity: 1; transform: translateY(-3px); } }
@keyframes pst-done  { to { opacity: 0; height: 0; margin-top: 0; } }
@keyframes pst-in    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 주문 버튼 안의 컵 */
.psl-btn .ic {
  width: 13px; height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}