/* ==========================================================================
   pages/home.css — Home 섹션 스타일
   모바일 우선. 브레이크포인트 640 / 1024 / 1280
   ========================================================================== */

/* ---------- Home 글자색 (2026-09-29 사용자 요청으로 통일) ----------
   어두운 파트의 글자는 **하나의 흰색과 하나의 투명도**만 쓴다.
   종전에는 순백 · --paper · rgba(244,245,247,.88) · rgba(244,246,248,.86/.78/.74/.38) ·
   파란 기가 도는 --text-muted 가 섞여 있어 파트마다 흰색이 달라 보였다.
   위계는 색이 아니라 크기·굵기로 만든다.
   같은 날 값을 tokens.css(--ink-on-dark / --ink-on-dark-faint)로 올려 전 페이지가 같은 색을
   쓰게 했고, 여기는 Home 안 사용처 20여 곳을 위한 별칭만 남겼다 —
   **흐리기·진하기를 바꾸려면 tokens.css 한 곳만** 고친다 */
body[data-page="home"] {
  --home-text: var(--ink-on-dark);              /* 모든 본문·제목 (너무 하얗지 않게) */
  --home-text-faint: var(--ink-on-dark-faint);  /* 출처 한 줄 같은 각주에만 */
}

/* ---------- Hero (2026-09-28 브랜드 시스템 v1.0 시안) ----------
   기준: design/brand/leoverse_hero_desktop_1920x1080.png
   종전의 6칸×4행 격자 박스·별 배경·인트로 영상 칸은 폐기했다 (격자 시스템 전체 폐기).
   짜임은 좌측 정렬 한 덩어리: 로고 락업 → H1 → 리드 → 버튼 둘 (eyebrow 는 2026-09-28 에 뺐다).
   배경은 Orbit Navy → Deep Navy 그라데이션 위에 우측 궤도 타원과 위성 점 */
/* Hero + 시장의 변화 공용 배경 (2026-09-28).
   시안 실측: 광원 중심 (73%, 58%) · 가로 반경 72%W · 세로 반경 62%H — 모두 **Hero 기준**이다.
   세로 값을 svh 로 주면 아래 소버린 섹션이 길어져도 Hero 의 모습이 그대로 유지되고,
   배경이 하나라 두 섹션 경계에서 색이 튀지 않는다.
   stop 색은 시안에서 중심으로부터 같은 거리에 있는 픽셀을 여러 각도로 평균해 뽑았다.
   광채는 radial-gradient 로만 낸다 (filter: blur 는 쓰지 않는다) */
.hero-block {
  background-color: var(--orbit-navy);
  background-image:
    radial-gradient(72% 62svh at 73% 58svh,
      #183371 0%,
      #193370 13%,
      #14295B 26%,
      #122653 39%,
      #102047 52%,
      #0E1D3E 65%,
      #0B152A 78%,
      #0A1222 100%);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-h);
  /* 2026-09-28 사용자 요청: 글 묶음을 아주 살짝 위로 — 아래 여백을 키우면 가운데가 그만큼 올라간다 */
  padding-block: calc(var(--header-h) + var(--sp-7)) calc(var(--sp-8) + var(--sp-7));
  overflow: hidden;
  background-color: transparent;
}

/* ---- 배경 (시안 실측) ---- */
.hero__orbits {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__sky {
  width: 100%;
  height: 100%;
}

/* 별: 흰 점. 크기·투명도는 마크업이 하나씩 지정한다 */
.hero__stars circle {
  fill: var(--white);
}

/* 궤도 타원 4개 — 얇은 하늘색 실선 */
.hero__rings ellipse {
  fill: none;
  stroke: #6E93F5;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

/* 위성 점과 그 둘레 광채 */
.hero__sat {
  fill: var(--electric-blue-dark);
  animation: hero-sat-breathe 5.6s ease-in-out infinite;
}

.hero__sat-glow {
  animation: hero-sat-breathe 5.6s ease-in-out infinite;
}

@keyframes hero-sat-breathe {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sat,
  .hero__sat-glow {
    animation: none;
  }
}

/* 소개 영상 — 우측 하단 작은 칸 (2026-09-28 사용자 요청).
   같은 날 2차 요청으로 소리 버튼을 없앴다. 크기는 작은 칸 그대로이고,
   마우스를 올리면 브라우저 기본 조작 막대(재생 시간·재생/정지·전체화면)가 뜬다 (home.js) */
.hero__media {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  /* 1024px 미만은 본문 흐름에 놓인다. **width 를 쓰지 않는다** — `min(100%, …)` 의 100% 는
     margin-inline 을 빼지 않아 좌우 여백만큼 화면 밖으로 넘친다 (2026-10-01에 겪었다).
     stretch + max-width 로 두면 여백 안쪽을 채우고 넓은 화면에서만 45rem 에서 멈춘다 */
  align-self: flex-end;
  /* **`min(100%, …)` 만 쓰지 않는다** — 그 100% 는 아래 margin-inline 을 빼지 않아
     320px 에서 왼쪽이 11px 잘렸다. 여백을 뺀 폭으로 함께 제한한다 (2026-10-01) */
  /* 2026-10-06: 1024px 미만은 본문 흐름이라 궤도·글자를 가릴 일이 없다.
     데스크톱 최댓값(30rem)까지 열어 두고 좁은 화면에서는 여백을 뺀 폭이 이긴다 */
  width: min(30rem, 100% - 2 * clamp(var(--gutter), 6.4vw, 8rem));
  margin-top: var(--sp-7);
  margin-inline: clamp(var(--gutter), 6.4vw, 8rem) clamp(var(--gutter), 6.4vw, 8rem);
}

/* 영상 위 '크게보기' — **누르면 전체화면이 되는 버튼**이다 (2026-10-01).
   파란 포인트 색을 쓰지 않는다. 사이트의 텍스트 링크(.text-link)와 같은 문법으로,
   평소에는 본문 색이고 마우스를 올리면 밑줄만 그어진다 */
.hero__media-label {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--home-text);
  cursor: pointer;
}

.hero__media-label:hover,
.hero__media-label:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.hero__video {
  display: block;
  width: 100%;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 2px;
  background-color: #000;
}

@media (min-width: 1024px) {
  /* 시안에는 없던 요소라 본문 흐름을 밀지 않게 절대 위치로 띄운다 */
  .hero__media {
    position: absolute;
    right: clamp(var(--gutter), 6.4vw, 8rem);
    bottom: var(--sp-8);
    /* 2026-10-06: 고정 18.625rem(298px) → 화면 폭에 비례해 키운다.
       한때 45rem(3배)까지 갔다가 되돌렸던 이유는 그 폭에서 영상 왼쪽이 H1 글자를 덮었기 때문이다.
       **박스가 아니라 글자 실측**으로 다시 재니 Hero 글 묶음의 실제 오른쪽 끝은
       1280px 에서 673px · 1440px 에서 684px · 1920px 에서 734px(락업+태그라인)뿐이라
       아래 값은 어느 폭에서도 글자와 165px 이상 떨어진다.
       위로는 궤도 위성 점(1920px 에서 y 597)보다 120px 아래에서 멈춘다.
       **더 키우려면 Range 로 글자 오른쪽 끝을 다시 재고, 위성 점을 덮지 않는지 확인한다** */
    width: clamp(22rem, 28vw, 30rem); /* 352 → 480px */
    margin: 0;
  }
}

/* ---- 본문 ---- */
/* 시안 실측: 글 묶음이 화면 왼쪽 6.4% 지점에서 시작한다 (1920px 기준 123px).
   container 기본 여백(1920 에서 360px)보다 훨씬 왼쪽이라 Hero 만 따로 잡는다 */
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: clamp(var(--gutter), 6.4vw, 8rem);
}

/* 로고 락업: 시안에서 화면 폭의 약 54% 를 차지한다 (1920 기준 1040px) */
/* 락업 + 태그라인 한 덩어리. 폭 규칙을 여기로 올려 태그라인의 % 들여쓰기가
   컨테이너가 아니라 **락업 폭**을 기준으로 잡히게 한다 (2026-09-30) */
.hero__brand {
  width: min(100%, 54vw);
  max-width: 68rem;
  margin-top: var(--sp-7);
}

.hero__lockup {
  display: block;
  width: 100%;
  height: auto;
}

/* 22.66% = 공급된 락업 SVG 에서 워드마크 'L' 이 시작하는 자리다
   (viewBox x 6.8 + width 708.2, 글자 시작 x 167.3 → (167.3-6.8)/708.2).
   **락업 파일을 바꾸면 이 값을 다시 재야 한다** — 심볼과 글자의 비율이 달라진다.
   위계는 색이 아니라 크기로 준다 (글자색은 본문과 같은 --home-text) */
.hero__tagline {
  margin-top: var(--sp-2);
  margin-left: 22.66%;
  font-size: clamp(0.8125rem, 0.45rem + 1.1vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: var(--lh-snug);
  color: var(--home-text);
}

/* H1 — 끊는 자리를 마크업이 지정한다 */
/* 마크업이 지정한 자리에서만 끊는다. 국문이 영문보다 길어 폭을 넉넉히 준다
   (22ch 로 두면 국문이 세 줄로 접혀 시안의 두 줄 리듬이 깨진다) */
/* 2026-09-28 사용자 요청으로 한 단계 줄였다 (--fs-h1 32–44px → 26–36px) */
.hero__title {
  margin-top: var(--sp-7);
  max-width: 30ch;
  font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.25rem);
  white-space: pre-line;
  color: var(--home-text);
}

/* 2026-09-28 사용자 요청: 지정한 자리에서 줄을 바꾼다 (좁은 화면에서는 그 안에서 또 접힌다).
   영문 첫 줄이 54ch 를 넘겨 의도한 자리보다 먼저 접히므로 폭을 넓혔다 */
.hero__lead {
  max-width: 78ch;
  white-space: pre-line;
  margin-top: var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--home-text);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* ---------- 버튼 (파랑은 강조, 넓은 면을 칠하지 않는다) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--sp-6);
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-body);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
  background-color: var(--electric-blue-ink);
  color: var(--white); /* electric-blue 대비 4.5:1 — 굵은 14px 이상이라 AA */
}

.btn--primary:hover {
  background-color: var(--electric-blue-dark);
}

.btn--secondary {
  border-color: rgb(255 255 255 / 0.4);
  color: var(--white);
}

.btn--secondary:hover {
  border-color: var(--electric-blue-dark);
  color: var(--electric-blue-dark);
}

/* ---------- 시장의 변화 (2026-09-23 신설 · 같은 날 나레이션 스타일로 다시 짰다) ----------
   Hero 와 Why 사이. 이 섹션은 '파트'가 아니라 Why → How → Vision 세 주제로 들어가기 전
   빠르게 지나가는 **나레이션**이다 (2026-09-23 사용자 지시).
   - 제목을 두지 않는다. 줄글 세 문단뿐이다
   - 큰 수치·포인트 색을 쓰지 않는다. 통계는 문장 안에 녹인다
   - 배경은 Hero(--space)보다 한 단계 들뜨고 푸른 기를 뺀 색 — 파란 계열로 읽히면 안 된다 */
/* 배경은 위 .hero-block 이 함께 깐다 — 여기서는 투명하게 둔다 (2026-09-28) */
/* 2026-09-28 사용자 요청: Hero 와 소버린 사이에 빈 공간을 더 둔다 (배경은 그대로 이어진다) */
.shift {
  padding-block: calc(var(--sp-9) + var(--sp-7)) var(--sp-9);
  color: var(--home-text);
}

/* 나레이션이므로 본문보다 크지 않게, 흐리게 둔다. 문단 사이만 벌려 호흡을 만든다 */
.shift__line {
  max-width: 68ch;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--home-text);
}

.shift__line + .shift__line {
  margin-top: var(--sp-5);
}

/* 마지막 한 줄도 같은 색이다 (2026-09-29 통일) — 강조는 자리로만 준다 */
.shift .source-note {
  color: var(--home-text-faint);
}

/* 스크롤 진입: 문단이 차례로 떠오른다 (data-reveal 공통 훅) */
.shift__line[data-reveal-armed],
.shift .source-note[data-reveal-armed] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.shift__line[data-revealed],
.shift .source-note[data-revealed] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .shift__line[data-reveal-armed],
  .shift__line[data-revealed],
  .shift .source-note[data-reveal-armed],
  .shift .source-note[data-revealed] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Why (2026-09-28 사용자 요청으로 사진 위에 다시 얹었다) ----------
   섹션 전체가 화면 가로를 꽉 채운 사진 한 장이고, 헤드라인(위)과 문제 4개(아래)가 그 위에 놓인다.
   배경 글씨(Why Leoverse)는 2026-09-28 사용자 요청으로 뺐다 — 다시 넣지 않는다 */
.why {
  --why-line: rgba(255, 255, 255, 0.28);
  position: relative;
  padding-block: var(--sp-8);
  background-color: var(--orbit-navy);
}

.why__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* 문제 4개: 1024px 이상에서 가로로 나란히 (2026-09-23 덱 반영으로 3개 → 4개) */
.why__cases {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding: 0;
  list-style: none;
}

.why__case {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--why-line);
}

/* 2026-09-23 사용자 요청: 배경 사진 위에 자연스럽게 앉도록 한 단계 줄였다 (--fs-lg → --fs-md).
   2026-09-28 사용자 요청: 사진 위에 얹히므로 글자에 약간의 투명도를 준다 (대비 19:1 → 여유 있다) */
.why__case-title {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--home-text);
}

/* 본문도 한 단계 줄였다 (2026-09-23). 사진 위라 글자가 크면 사진을 가린다.
   색은 흰 계열로 올려 사진 위에서도 또렷하게 읽히게 한다 */
.why__case-body {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--home-text);
}

@media (min-width: 1024px) {
  /* 4열 (2026-09-23). 칸이 좁아지므로 칸 사이 간격만 한 단계 줄인다 */
  .why__cases {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }

  /* 1024px 이상에서는 마크업이 지정한 자리에서만 끊는다.
     그 아래 폭에서는 자연스럽게 흐르게 둔다 */
  .why__title {
    white-space: pre-line;
  }
}

/* 사진 (2026-09-28 사용자 요청 3차) — 화면 가로를 꽉 채우고 글을 그 위에 얹는다.
   1024px 미만에서는 글이 사진을 덮으므로 겹치지 않고 사진 아래로 흐른다 */
.why__figure {
  position: relative;
  margin: 0;
}

.why__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.why__overlay-inner {
  padding-block: var(--sp-8);
}

@media (min-width: 1024px) {
  .why__overlay {
    position: absolute;
    inset: 0;
  }

  /* 헤드라인은 위쪽, 문제 4개는 아래쪽 — 가운데를 비워 사진 속 위성이 보이게 한다
     (2026-09-28 사용자 요청). 위·아래 여백은 사진 안에서 잰다 */
  .why__overlay-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-block: clamp(var(--sp-6), 5vw, var(--sp-9));
  }

  .why__overlay-inner .why__cases {
    margin-top: 0;
  }
}

/* 스크롤 진입: 문제 4개가 차례로 떠오른다 (숨김은 JS 가 data-reveal-armed 를 붙인 뒤부터) */
.why__case[data-reveal-armed] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.why__case[data-revealed] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .why__case[data-reveal-armed],
  .why__case[data-revealed] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- How it works (2026-09-23 전면 개편) ----------
   2026-09-21 의 캐러셀(좌우 버튼으로 한 장씩)을 폐기하고 세로 목록으로 폈다.
   기준은 k2space.com 이고 사용자가 화면을 캡처해 지정했다 — 캐러셀은 4장 중 1장만 보여
   훑어 내려가는 주 방문자(투자자·정부기관)에게 맞지 않았다.
   짜임: 번호(왼쪽, 1급) + 제목 + 설명(오른쪽). 행마다 배경 톤을 교차해 띠처럼 읽힌다 */
/* 2026-09-28 사용자 요청으로 가로 사진 띠와 배경 글씨를 모두 뺐다 — 다시 넣지 않는다.
   제목은 섹션 머리(왼쪽 정렬)로 돌아왔고, 그 아래를 톤 교차 띠 4행이 잇는다 */
/* 섹션 자체의 상하 여백은 두지 않는다 — 머리·행·꼬리가 각자 여백을 가지므로,
   섹션 여백이 남으면 꼬리 띠 아래에 다른 색 줄이 하나 더 생긴다 (2026-09-28) */
.how {
  position: relative;
  padding-block: 0;
}

/* 2026-09-28 사용자 요청: 제목을 가운데 정렬하고 조금 위로 올린다
   (2026-09-29 에 왼쪽 정렬로 바꿨다가 같은 날 사용자 요청으로 되돌렸다) */
.how__head {
  padding-block: var(--sp-9) var(--sp-8);
  text-align: center;
}

.how__title {
  max-width: 34ch;
  margin-inline: auto;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* 1024px 이상에서는 마크업이 지정한 자리에서만 끊는다 */
@media (min-width: 1024px) {
  .how__title {
    white-space: pre-line;
  }
}

/* 제목 아래 가로 사진 (2026-09-28 되살림). 화면 폭을 꽉 채우고 4행이 바로 밑에서 시작한다.
   밝기는 원본 그대로 둔다 (2026-09-28 사용자 요청 — 종전 brightness(0.62) 는 뺐다) */
.how__banner {
  margin: 0;
}

.how__banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- 세로 목록 ---- */
.how__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 행마다 배경 톤 교차. 화면 폭을 꽉 채우고 안쪽 내용만 container 로 가둔다.
   deep-navy 는 면으로 깔기엔 밝아, Orbit Navy 에서 한 단계만 들뜬 색을 쓴다 */
/* 행 배경 교차 — 짜임은 참고 화면(k2space)을 따르되 색은 사이트의 navy 계열로 되돌렸다
   (2026-09-28 사용자 요청: 중성 회색·검정은 사이트와 겉돈다) */
.how__row {
  background-color: #101A2E;
}

.how__row:nth-child(even) {
  background-color: var(--orbit-navy);
}

/* 2026-09-23 사용자 요청으로 행 간격을 절반으로 줄였다 (32px → 16px) */
.how__row-inner {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
}

/* 번호는 왼쪽 1급 요소다 (2026-09-23 — 항목 번호 라벨 금지 규칙의 해제 대상).
   장식이 아니라 보드 → SDK → 검증 → 제조 순서를 나타낸다 */
/* 2026-09-23 사용자 요청으로 번호·제목을 한 단계 줄이고 줄 간격도 좁혔다
   (종전 28–48px 은 너무 컸다). 번호와 제목은 같은 크기로 맞춘다 */
/* 2026-09-28 사용자 제공 참고 화면(k2space.com) 실측으로 맞췄다.
   번호·제목은 크고 가볍게(중간 굵기) · 밝은 회색, 설명은 작고 굵게 · 행간 좁게 */
.how__num,
.how__name {
  font-family: var(--font-sans);
  /* 2026-09-28 사용자 요청으로 3/5 로 줄였다 (28–46px → 17–28px) */
  font-size: clamp(1.05rem, 0.54rem + 1.44vw, 1.725rem);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--home-text);
}

.how__body {
  font-size: clamp(0.9375rem, 0.85rem + 0.25vw, 1.0625rem); /* 15 → 17px */
  font-weight: var(--fw-medium); /* 2026-09-28 사용자 요청으로 한 단계 낮췄다 (600 → 500) */
  line-height: 1.32;
  color: var(--home-text);
}

/* 목록 끝의 바로가기 하나 (2026-09-28 — 참고 화면 k2space.com 의 Learn more → 와 같은 자리).
   설명 칸 바로 아래에 오도록 행과 같은 3단 격자를 쓴다 */
/* 2026-09-28 사용자 요청: 이 줄도 행 교차를 이어받는 하나의 띠다.
   마지막 행(04, Orbit Navy)의 다음 차례인 #101A2E 로 칠한다 */
.how__foot-band {
  background-color: #101A2E;
}

/* 아래 여백을 넉넉히 둬 다음 파트(밝은 숫자 띠)가 바로 따라붙지 않게 한다 (2026-09-28 사용자 요청) */
.how__foot {
  display: grid;
  padding-block: var(--sp-5) var(--sp-9);
}

/* 1024px 이상: 번호 · 제목 · 설명 3단. 설명은 오른쪽 끝에 붙여 참고 화면과 같은 리듬을 만든다 */
@media (min-width: 1024px) {
  /* 설명 칸을 훨씬 넓혔다 (2026-09-23 사용자 요청 — 종전 22rem 은 너무 좁아 줄이 잘게 끊겼다).
     제목 칸이 줄어든 만큼 설명이 가져간다 */
  /* 2026-09-28 사용자 요청: 설명 칸은 오른쪽 끝에 붙이되 글은 왼쪽 정렬이고,
     글이 들어가는 가로 폭은 종전의 절반(44rem → 22rem)이다 */
  .how__row-inner {
    /* 참고 화면 실측: 번호 → 제목 사이가 넓고, 설명은 오른쪽 끝에 붙는다.
       글은 행 위쪽에 붙고 아래로 넉넉한 여백이 남아 행이 큼직하게 읽힌다 */
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 26rem);
    align-items: start;
    gap: var(--sp-5);
    padding-block: var(--sp-6) var(--sp-9);
  }

  /* 바로가기도 설명 칸과 같은 자리(오른쪽 끝, 글은 왼쪽 정렬)에 놓는다 */
  .how__foot {
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--sp-5);
  }

  .how__foot .how__more {
    grid-column: 3;
    justify-self: start;
    width: 100%;
  }

  /* 칸은 오른쪽 끝에 붙고, 그 안의 글은 왼쪽 정렬이다 */
  .how__aside {
    grid-column: 3;
  }
}

/* ---------- 숫자 띠 (2026-09-29 사용자 제공 코드로 다시 짰다) ----------
   짜임: 1px 선 SVG 아이콘 → 설명 한 줄 → 강조 한 줄. 박스는 Vision 3축 카드와
   같은 문법(1px 테두리 · 반경 2px)이라 Home 안에서 문법이 반복된다.
   **배경이 밝은 회청색(#D7DEE6)에서 Orbit Navy 로 바뀌었다** — 이제 Home 에
   밝은 면이 하나도 없다 (종전 "어두운 파트 사이에서 한 번 밝아지는 띠" 규칙은 폐기).
   가운데 정렬은 아이콘 위·글 아래로 쌓이는 구조라 그대로 둔다.
   폐기: 큰 PNG 아이콘 3장(.band__icon 132–192px) · 한 줄 글귀(.band__label) */
/* 배경 (2026-09-29 사용자 요청으로 밝은 띠를 되살렸다).
   **Home 에서 유일하게 밝은 면**이다 — 어두운 파트(How ↔ Vision) 사이에서 한 번 밝아진다.
   흰색이 아니라 한 단계 가라앉힌 밝은 회청색이다 (--ink 대비 14.1:1).
   같은 날 잠깐 Orbit Navy 로 어둡게 했다가(그때는 Learn more → Vision 그라데이션이었다) 되돌렸다 */
.band {
  padding-block: var(--sp-9);
  background-color: #D7DEE6;
  color: var(--ink);
}

.band__list {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.band__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--sp-6) + var(--sp-2)) var(--sp-5) var(--sp-6); /* 40 / 24 / 32 */
  /* **--line-on-light(#D9DCE2)를 쓰지 않는다** — 이 띠의 배경(#D7DEE6)과 거의 같은 색이라
     테두리가 사라진다. 어두운 면의 rgba(255,255,255,.12) 와 같은 문법을 뒤집어
     잉크를 옅게 깐다 (2026-09-29) */
  border: 1px solid rgba(10, 18, 34, 0.14);
  border-radius: 2px;
  text-align: center;
}

/* 2026-09-29 사용자 요청: 1.5배로 키우고(64 → 96px) 투명도를 낮춰 뒤로 물린다.
   글이 1급이고 아이콘은 그 배경이라는 위계다.
   overflow: visible — 글로우가 칸 밖으로 번져도 잘리지 않게 */
.band__svg {
  width: var(--sp-9);
  height: var(--sp-9);
  margin-bottom: var(--sp-5);
  opacity: 0.75; /* 2026-09-29 사용자 지정 */
  overflow: visible;
}

.band__svg .ln {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 아이콘 안의 강조 점 하나 (2026-09-29 사용자 제공 코드).
   **"네온 글로우 금지" 규칙의 예외로 사용자가 승인한 자리다** (2026-09-29) —
   사이트에서 filter 글로우를 쓰는 유일한 곳이고, 다른 곳으로 늘리지 않는다 */
.band__svg .dt {
  fill: var(--electric-blue-ink);
  filter: drop-shadow(0 0 5px var(--electric-blue-ink));
}

/* 2026-09-29 사용자 요청: 칸마다 한 문장이다 (종전 '설명 + 숫자' 두 줄 구조는 폐기).
   크기는 Vision 3축 이름(.vision__term)과 같은 --fs-lg 로 맞췄다.
   줄바꿈 자리는 마크업이 지정한다 (좁은 화면에서는 그 안에서 또 접힌다) */
.band__text {
  margin: 0;
  white-space: pre-line;
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--ink);
}

@media (min-width: 640px) {
  .band__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .band {
    padding-block: calc(var(--sp-9) + var(--sp-5)); /* 120px */
  }
}

/* Vision 3축: 화면에 들어오면 왼쪽 카드부터 차례로 떠오른다 (2026-09-22 사용자 요청).
   숨김은 JS 가 data-reveal-armed 를 붙인 뒤부터 걸린다 — 스크립트가 실패해도 카드는 그대로 보인다 */
.vision__axes[data-reveal-armed] .vision__axis {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.vision__axes[data-revealed] .vision__axis {
  opacity: 1;
  transform: none;
}

.vision__axes[data-revealed] .vision__axis:nth-child(2) { transition-delay: 0.1s; }
.vision__axes[data-revealed] .vision__axis:nth-child(3) { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .vision__axes[data-reveal-armed] .vision__axis,
  .vision__axes[data-revealed] .vision__axis {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Vision (가운데 정렬 섹션 머리 + 개방 · 합리 · 안전 3축 카드) ----------
   배경 글씨(Vision)는 2026-09-28 사용자 요청으로 뺐다 — 다시 넣지 않는다 */
.vision {
  position: relative;
  overflow: hidden;
  /* 마무리 사진이 섹션 아래 변에 딱 붙는다 */
  padding-bottom: 0;
  /* 2026-09-28 사용자 요청: 아래 지구 사진의 위쪽 색(#020204)과 이어지게 한다.
     사진은 화면 폭을 꽉 채우고 비율이 1916:821 이라 높이가 정확히 42.85vw 다.
     그래서 그라데이션을 '섹션 높이 − 사진 높이' 만큼만 깔면 사진 윗변에서 정확히 #020204 로 만난다.
     사진을 바꾸면 이 비율도 같이 고쳐야 한다 */
  background-color: #020204;
  background-image: linear-gradient(to bottom, var(--orbit-navy) 0%, #070B14 55%, #020204 100%);
  background-repeat: no-repeat;
  background-size: 100% calc(100% - 42.85vw);
}

/* 마무리 사진 — 궤도에서 본 지구 (2026-09-23 사용자 제공).
   사진 위쪽이 검은 우주라 --space 배경과 그대로 이어진다. 스크림·마스크가 필요 없다.
   3축 카드 아래에서 지구가 떠오르며 페이지가 닫힌다 */
/* 2026-09-29 사용자 요청: 3축과 지구 사진 사이를 좁힌다. 사진 위쪽은 검은 우주라
   글이 그 위에 겹쳐도 되고 **지구만 가리지 않으면** 된다 — 음수 여백으로 끌어올린다.
   **고정 px 을 쓰지 않는다**: 사진 높이가 폭에 비례하므로(42.85vw) 좁은 화면에서는
   같은 96px 이 사진의 절반을 넘어 지구를 덮는다. 사진 높이의 약 15.6% 로 잡아
   어느 폭에서나 검은 우주 영역 안에만 겹치게 한다 (1440px 에서 -96px) */
.vision__earth {
  margin: -6.7vw 0 0;
}

.vision__earth img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2026-09-29 사용자 제공 코드: 제목은 왼쪽, 3축은 오른쪽에 세로로 쌓는다.
   종전의 가운데 정렬 한 덩어리 + 3열 카드는 폐기했다.
   1024px 미만에서는 한 줄로 쌓인다 (모바일 우선) */
.vision__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

/* 색은 Home 공통 글자색을 쓴다 (2026-09-29 통일).
   굵기도 지정하지 않는다 — h2 기본값(500)을 그대로 받아 Why·How 헤드라인과 같아진다.
   종전 --fw-bold(650) 는 Vision 제목만 혼자 굵어 같은 위계로 읽히지 않았다 (2026-09-29 실측 지적) */
.vision__head {
  margin: 0;
}

.vision__title {
  color: var(--home-text);
  max-width: 20em;
  margin: 0;
  font-size: var(--fs-2xl); /* 다른 섹션 헤드라인과 같은 크기 */
}

/* 2026-09-29 사용자 제공 코드: 속이 빈 박스를 걷고 **행 사이 1px 선**으로만 나눈다
   (상자 없이 행 위 1px 선 — 사이트 전체에서 반복되는 문법이다).
   마우스 올림 연출은 함께 없앴다 — 누를 수 있는 요소가 아니다 */
.vision__axes {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.vision__axis {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line-on-dark);
}

.vision__axis:last-child {
  border-bottom: 1px solid var(--line-on-dark);
}

/* 카드 제목이므로 H3 단계(--fs-lg 18–20px · 500)를 쓴다 (2026-09-29 실측 지적).
   종전 --fs-xl(22–30px) + 600 은 섹션 제목(--fs-2xl 24–30px)과 크기가 겹쳐
   카드 제목이 섹션 제목만큼 커 보였다 */
.vision__term {
  font-family: var(--font-sans);
  white-space: nowrap; /* 낱말 하나이지만 줄 끝에서 쪼개지지 않게 둔다 */
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--home-text);
}

/* 지정한 자리에서 줄을 바꾼다 (2026-09-16 사용자 요청).
   data-ko/data-en 은 textContent 로 교체돼 <br> 을 쓸 수 없어 줄바꿈 문자로 처리 */
/* 본문은 Hero·시장의 변화와 같은 16px·행간 1.63 이다
   (2026-09-29 실측 지적 — 종전 --fs-md 18px 은 Home 안에서 혼자 큰 본문이었다) */
.vision__desc {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--home-text);
  white-space: pre-line;
}

/* ---------- 파트 높이: 각 파트가 한 화면 (2026-09-21) ----------
   스크롤 스냅은 넣었다가 사용자 요청으로 뺐다 — 높이만 남긴다.
   내용을 가운데에 두므로 섹션 여백은 최소만 남긴다 (여백을 다 쓰면 Platform 이 화면을 넘긴다) */
@media (min-width: 1024px) {
  /* 제외: How it works 는 4행이라 한 화면에 못 들어가고,
     '시장의 변화'(.shift)는 빠르게 지나가는 나레이션이라 한 화면을 차지하면 안 된다 */
  .why,
  .vision {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-block: var(--sp-8);
  }

  /* 제목 왼쪽 : 3축 오른쪽 = 5 : 7 (2026-09-29 사용자 제공 코드) */
  .vision__body {
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-8);
  }

  .vision__head {
    padding-top: var(--sp-6);
  }

  /* 2026-09-28 사용자 요청 ① 위 숫자 띠와 너무 붙어 있어 위 공간을 넓힌다
     ② 아래 여백을 0 으로 둬야 마무리 사진 밑에 검은 띠가 남지 않는다 */
  .vision {
    justify-content: flex-end;
    padding-top: calc(var(--sp-9) + var(--sp-7));
    padding-bottom: 0;
  }
}

/* ---------- Home 배경 톤 사다리 (2026-09-28 정리) ----------
   전체를 어둡게 깔고 톤 차이로만 파트를 나눈다. 중간에 튀는 색(검정 #090909 띠)은 없앴다.
   순서: Hero·시장의 변화 = 궤도 그라데이션(끝이 Orbit Navy)
         → Why = Orbit Navy 바탕 + 전체 폭 사진
         → How = Orbit Navy 머리 + 행마다 #101A2E ↔ Orbit Navy 교차
         → 숫자 띠 = 밝은 회청색(#D7DEE6) 한 번
         → Vision = Orbit Navy → #020204 그라데이션 + 지구 사진
   새 팔레트에 중성 회색(--graphite)은 없다. navy 계열 농도 차이로만 나눈다 */
.why {
  background-color: var(--orbit-navy);
}

/* How 의 머리·꼬리는 Orbit Navy 다.
   꼬리(Learn more 자리)는 마지막 행(04, Orbit Navy)과 같은 색이라 이음매 없이 이어지고,
   머리는 첫 행(#101A2E) 바로 위에서 한 단계만 어두워진다 — 중간에 다른 색 띠가 생기지 않는다 */
.how {
  background-color: var(--orbit-navy);
}

/* 이 파트들은 원래 밝은 배경 전제로 짜여 있었다. 그 토큰들을 어두운 짝으로 다시 정의하면
   아래 규칙들(글자색·선)이 따라온다 — 규칙을 하나하나 고치지 않는다 */
.why,
.how {
  --ink: var(--home-text);
  --text-muted-on-light: var(--home-text);
  --line-on-light: var(--line-on-dark);
  color: var(--home-text);
}

/* ---------- 영문판 전용 (2026-10-01 사용자 요청) ----------
   영문이 국문보다 길어 마크업이 지정한 자리가 아닌 데서 줄이 접혔다.
   **국문은 건드리지 않는다** — `html[lang="en"]` 안에서만 폭·크기를 조정한다.
   값을 바꾸면 1280~1920px 에서 각 문장이 **정확히 두 줄**인지 다시 재야 한다 */

/* How 제목: 영문 첫 줄이 34ch 를 넘겨 세 줄이 됐다. 영문만 넓힌다 */
html[lang="en"] .how__title {
  max-width: 56ch;
}