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

/* ---------- 별 배경 (2026-09-16 사용자 요청) ----------
   Hero·Why 의 검은 우주에서 별이 아주 천천히 왼쪽에서 오른쪽으로 흐른다.
   사진은 사용자가 고른 NASA/ESA 허블 딥필드 원본(design/nasa/nasa3.jpg)을 1800px WebP 로 가공한 것.
   가공 내용 (2026-09-16 사용자 지적 두 가지를 이미지 단계에서 해결):
   ① 검은 배경 누르기 — 원본의 '검정'은 휘도 19(≈#131313)라 screen 합성 때 별 배경이 깔린 영역만
      배경색이 밝아져 원 안팎에 경계가 보였다. contrast(1.32) brightness(1.5) 로 바탕을 휘도 0 까지 눌러,
      합성 뒤 배경이 --space(휘도 12.45)와 정확히 같아지고 단차가 사라진다 (brightness 는 contrast 뒤라 0 은 0 그대로)
   ② 세로 뒤집어 이어 붙이기 — 사진을 세로로 반복하면 위·아래 가장자리 밝기가 달라(20.2 vs 21.9) 잘린 선이 보였다.
      원본 아래에 상하 반전본을 붙여 한 장으로 만들면 반복 경계의 양쪽이 같은 픽셀이라 이음매가 사라진다
   같은 사진의 띠 두 장(i)을 이어 붙이고 띠 한 장 폭만큼 transform 으로 민다. 두 장이 같은 사진이라
   한 바퀴가 끝나는 순간 화면에 보이는 그림이 시작과 똑같아 이음매 없이 이어진다.
   mix-blend-mode: screen — 사진의 검은 바탕은 사라지고 별빛만 --space 위에 더해져 사이트 배경색이 그대로 유지된다 */
.starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  /* 글자 뒤에서 별이 읽기를 방해하지 않을 만큼만 밝힌다.
     채도 조정·검은 배경 누르기는 이미지에 미리 구워 두었으므로 여기서 filter 를 걸지 않는다 */
  opacity: 0.6;
}

.starfield__belt {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 200%;
  height: 100%;
  animation: starfield-drift 300s linear infinite;
}

/* 띠 한 장 = 화면 폭. 가로는 띠 폭에 정확히 맞추고(이음매 계산이 어긋나지 않게),
   세로는 사진 비율 그대로 반복해 섹션이 길어져도 별이 타원으로 늘어나지 않는다 */
.starfield__belt i {
  flex: 0 0 50%;
  background-image: url("../../img/bg/stars.webp");
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center top;
}

/* 띠 한 장 폭(= 전체의 50%)만큼 오른쪽으로 민다. 끝나는 순간 무늬가 처음과 같아 이어져 보인다 */
@keyframes starfield-drift {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

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

/* 별빛이 섹션 배경색하고만 섞이도록 블렌딩 범위를 섹션 안으로 가둔다 */
.hero,
.why {
  isolation: isolate;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: clamp(3rem, 9vh, 6.5rem);
  overflow: hidden;
}

/* 1024px 미만: 텍스트가 전체 폭을 쓰므로 도면은 텍스트 위쪽 영역에 둔다 */
.hero__orbit {
  position: absolute;
  top: var(--header-h);
  right: 0;
  left: 0;
  width: 100%;
  height: 42svh;
  pointer-events: none;
}

/* 1024px 미만에서 원 안쪽을 Hero 끝까지 이어 덮는다 (2026-09-16 사용자 선택: 원 안에는 별을 두지 않는다).
   도면 틀은 42svh 에서 끝나므로 그 아래를 같은 색으로 이어야 별도, 잘린 경계도 보이지 않는다.
   #08182E 는 틀 바닥(도면 좌표 y=620)에서의 림 그라데이션 색이라 이음매가 생기지 않는다.
   틀 높이·viewBox·path 는 건드리지 않는다 — .why 의 --limb-h 가 이 높이에 맞춰져 있다 */
.hero::after {
  content: "";
  position: absolute;
  top: calc(var(--header-h) + 42svh);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0; /* 별 배경 위, 본문(z-index 1) 아래 */
  background: linear-gradient(to bottom, #08182E, var(--space) 140px);
  pointer-events: none;
}

/* 좌표 그리드: 하단에서 위로 사라지는 십자 틱 */
.hero__grid-mark {
  fill: none;
  stroke: var(--paper);
  stroke-opacity: 0.1;
  stroke-width: 1;
}

/* 지구 림: 대기 경계선 + 안쪽으로 짙어지는 면.
   면은 불투명하다 (2026-09-16 사용자 요청) — 원이 별 배경 앞에 확실히 놓이고 별이 원 안으로 넘어오지 않는다.
   색은 예전 반투명 값(--blue 22% over --space)을 그대로 계산한 값이라 보이는 결과는 같다 */
.hero__limb-stop-top {
  stop-color: #0B2342;
  stop-opacity: 1;
}

.hero__limb-stop-bottom {
  stop-color: var(--space);
  stop-opacity: 1;
}

.hero__limb {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.25;
}

.hero__limb--halo {
  stroke-opacity: 0.18;
  stroke-width: 1;
}

/* 저궤도 점선 */
.hero__orbit-line {
  fill: none;
  stroke: var(--cyan);
  stroke-opacity: 0.28;
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

/* 위성 (2026-09-16 사용자 요청): 움직이지 않는다. 지나온 궤도를 선으로 그려 두고 선과 위성이
   천천히 밝아졌다 어두워진다 (글로우·블러 없이 밝기만). 1024px 미만은 림이 제목 뒤에 있어 숨긴다 */
.hero__trail {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100svh;
  pointer-events: none;
}

.hero__trail-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__trail-line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1;
  stroke-opacity: 0.22;
  animation: hero-trail-breathe 5.6s ease-in-out infinite;
}

/* 위성: 궤도선 끝(오른쪽 위, EN 버튼 살짝 오른쪽 아래)에 선다. 좌표는 곡선 끝점과 같은 97% · 12% */
.hero__flyby {
  position: absolute;
  top: 12%;
  left: 97%;
  margin: -13px 0 0 -26px; /* 좌표가 위성 가운데를 가리키도록 */
}

.hero__flyby-mark {
  display: block;
  width: 52px;
  height: 26px;
}

.hero__sat-core {
  fill: var(--cyan);
}

.hero__flyby-ring,
.hero__sat-panel {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1;
}

.hero__sat-panel {
  stroke-opacity: 0.7;
}

/* 고리는 궤도선과 같은 박자로 밝아졌다 어두워진다 */
.hero__flyby-ring {
  transform-box: fill-box;
  transform-origin: center;
  stroke-opacity: 0.4;
  animation: hero-sat-breathe 5.6s ease-in-out infinite;
}

@keyframes hero-trail-breathe {
  0%, 100% { stroke-opacity: 0.16; }
  50%      { stroke-opacity: 0.5; }
}

@keyframes hero-sat-breathe {
  0%, 100% { stroke-opacity: 0.35; transform: scale(0.94); }
  50%      { stroke-opacity: 1;    transform: scale(1.16); }
}

/* 모션 줄이기: 밝기 변화 없이 그대로 둔다 */
@media (prefers-reduced-motion: reduce) {
  .hero__trail-line { animation: none; stroke-opacity: 0.32; }
  .hero__flyby-ring { animation: none; stroke-opacity: 0.7; }
}

@media (min-width: 1024px) {
  .hero__trail {
    display: block;
  }
}

/* 텍스트 */
.hero__body {
  position: relative;
  z-index: 1;
}

.hero__title {
  font-weight: var(--fw-bold);
}

/* 윗줄 문장: 제품명(h1 기본 크기)의 3/5 */
.hero__title-lead {
  display: block;
  font-size: 0.6em;
  line-height: var(--lh-snug);
}

.hero__title-product {
  display: block;
  margin-top: 0.08em;
}

.hero__lead {
  max-width: 44rem; /* ch 는 웹폰트 로딩 전후로 폭이 달라져 두 줄 구분이 흔들린다 */
  margin-top: var(--sp-5);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-muted);
}

/* 1024px 이상: 사용자 문구의 두 줄 구분을 그대로 */
@media (min-width: 1024px) {
  .hero__lead-line {
    display: block;
  }
}

/* CTA: Primary(채움) · Secondary(테두리) — 왼쪽 정렬 */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3) 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-5);
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  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(--blue);
  color: #fff; /* blue 대비 4.9:1 */
}

.btn--primary:hover {
  background-color: #155CB0;
}

.btn--secondary {
  border-color: rgba(244, 246, 248, 0.45);
  color: var(--paper);
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan);
}

/* 인트로 영상 자리: 영상이 들어오기 전까지 1px 선으로 자리만 표시 */
.hero__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--sp-7);
  border: 1px solid var(--line-on-dark);
}

/* 1024px 이상: 문구는 왼쪽 위, 버튼은 왼쪽 아래(Hero 높이를 채운 격자의 마지막 행), 오른쪽 위에 인트로 영상 자리 */
@media (min-width: 1024px) {
  .hero {
    justify-content: flex-start;
    /* 버튼이 원과 겹치지 않게: 원 꼭대기(Hero 아래에서 100 × 확대비율) + 대기권 선·여유 20 + 간격.
       확대비율 = max(화면폭/1440, 원 틀 높이/620) — .hero__orbit 의 slice 확대 규칙과 같다 */
    padding-bottom: calc(max(100vw / 14.4, min(66vh, 620px) / 6.2) * 1.2 + var(--sp-5));
  }

  .hero__body {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-6);
    align-items: start;
  }

  .hero__text {
    grid-column: 1 / 7;
    grid-row: 1;
  }

  .hero__actions {
    grid-column: 1 / 7;
    grid-row: 2;
    align-self: end;
  }

  .hero__media {
    grid-column: 7 / 13;
    grid-row: 1;
    margin-top: var(--sp-2);
  }
}

/* 준비 중: 누를 수 없는 상태가 눈으로도 보이게 */
.btn:disabled {
  border-color: var(--line-on-dark);
  color: var(--text-subtle);
  cursor: not-allowed;
}

/* 1024px 이상: 좌표 그리드·지구 림 도면을 하단에 깐다 (원 크기·위치 고정) */
@media (min-width: 1024px) {
  .hero__orbit {
    top: auto;
    bottom: 0;
    height: min(66vh, 620px);
  }

  /* 도면이 Hero 바닥까지 닿으므로 이어 덮을 면이 필요 없다 */
  .hero::after {
    display: none;
  }
}

/* ---------- Home 섹션 머리 ----------
   헤드라인 → 본문 (영문 소제목은 2026-09-15 사용자 요청으로 삭제) */
.home-head {
  max-width: 44rem;
  margin-bottom: var(--sp-8);
}

.home-head__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}

/* 문장마다 줄을 나눌 때 (좁은 화면에서는 줄 안에서 접힌다) */
.home-head__line {
  display: block;
}

.home-head__body {
  max-width: 56ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

/* 본문이 두 문단이면 한 덩어리로 읽히게 간격을 좁힌다 */
.home-head__body + .home-head__body {
  margin-top: var(--sp-2);
}

.section--light .home-head__body {
  color: var(--text-muted-on-light);
}

/* ---------- Why (가운데 정렬 한 줄 흐름: 섹션 머리 → 문제별 기존 → Leoverse) ---------- */
/* 지구 림(원) 안에 담기: 배경은 원 내부(space + 림 그라데이션)
   --limb-h 는 .hero__orbit 높이와 같아야 한다 (틀 높이 비율로 원 크기를 맞춘다) */
.why {
  --limb-h: 42svh;
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--section-y) + var(--sp-7)); /* 아래 곡선이 내용과 겹치지 않게 */
}

/* 원 안을 가로지르는 짧은 선 (2026-09-16 사용자 요청)
   - 주기 13~22초, 보이는 구간은 0.5초 안팎 (2026-09-16 사용자 요청으로 더 빠르게·1.3배 자주)
   - 별 모양·별가루가 아니라 흐르는 선. 값은 마크업의 CSS 변수로 개별 지정 */
.why__meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 선마다 다른 자리·각도·주기 (서로 어긋나 불규칙하게 보인다) */
.why__meteor:nth-child(1) { --x: 6%; --y: 18%; --angle: 20deg; --len: 340px; --travel: 300px; --dur: 13s; --delay: 0s; }
.why__meteor:nth-child(2) { --x: 78%; --y: 12%; --angle: 28deg; --len: 260px; --travel: 240px; --dur: 18s; --delay: 4s; }
.why__meteor:nth-child(3) { --x: 34%; --y: 30%; --angle: -14deg; --len: 400px; --travel: 340px; --dur: 15s; --delay: 9s; }
.why__meteor:nth-child(4) { --x: 88%; --y: 42%; --angle: 34deg; --len: 220px; --travel: 220px; --dur: 20s; --delay: 2s; }
.why__meteor:nth-child(5) { --x: 14%; --y: 52%; --angle: -24deg; --len: 300px; --travel: 280px; --dur: 16s; --delay: 13s; }
.why__meteor:nth-child(6) { --x: 60%; --y: 22%; --angle: 16deg; --len: 440px; --travel: 360px; --dur: 22s; --delay: 7s; }
.why__meteor:nth-child(7) { --x: 46%; --y: 68%; --angle: -18deg; --len: 280px; --travel: 260px; --dur: 14s; --delay: 15s; }
.why__meteor:nth-child(8) { --x: 24%; --y: 78%; --angle: 24deg; --len: 240px; --travel: 240px; --dur: 18s; --delay: 11s; }
.why__meteor:nth-child(9) { --x: 70%; --y: 60%; --angle: -30deg; --len: 360px; --travel: 320px; --dur: 17s; --delay: 18s; }
.why__meteor:nth-child(10) { --x: 92%; --y: 72%; --angle: 18deg; --len: 200px; --travel: 200px; --dur: 21s; --delay: 6s; }
.why__meteor:nth-child(11) { --x: 4%; --y: 38%; --angle: 30deg; --len: 260px; --travel: 260px; --dur: 19s; --delay: 20s; }
.why__meteor:nth-child(12) { --x: 52%; --y: 88%; --angle: -20deg; --len: 320px; --travel: 300px; --dur: 15s; --delay: 16s; }

.why__meteor {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--len);
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(244, 246, 248, 0.75), transparent);
  opacity: 0;
  animation: why-meteor var(--dur) linear var(--delay) infinite;
}

@keyframes why-meteor {
  0%   { opacity: 0;    transform: rotate(var(--angle)) translateX(0); }
  0.8% { opacity: 0.85; }
  3.2% { opacity: 0;    transform: rotate(var(--angle)) translateX(var(--travel)); }
  100% { opacity: 0;    transform: rotate(var(--angle)) translateX(var(--travel)); }
}

@media (prefers-reduced-motion: reduce) {
  .why__meteors {
    display: none;
  }
}

/* 별 배경은 원 바깥(곡선 위쪽 띠)에서 멈춘다 (2026-09-16 사용자 요청).
   띠 높이를 원을 그리는 SVG 와 똑같이 잡아 두면, 그 안에서는 불투명한 원이 별을 덮고
   띠 아래(= 원 안쪽)에는 별 배경 자체가 없어 섹션 배경색만 남는다 */
.why .starfield {
  bottom: auto;
  height: calc(var(--limb-h) * 320 / 620); /* .why__limb--top 과 같은 높이 */
}

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

.why__limb {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  pointer-events: none;
}

/* Hero 원의 y=620 이후 부분 (1024px 이상에서만) */
.why__limb--continue {
  display: none;
  top: 0;
  height: calc(var(--limb-h) * 200 / 620);
}

/* 1024px 미만: 같은 크기 원의 윗부분을 섹션 위에 따로 */
.why__limb--top {
  top: 0;
  height: calc(var(--limb-h) * 320 / 620);
}

/* 원의 아랫부분: 같은 곡선을 뒤집어 섹션 끝에 */
.why__limb--bottom {
  bottom: 0;
  height: calc(var(--limb-h) * 320 / 620);
  transform: scaleY(-1);
}

@media (min-width: 1024px) {
  .why {
    --limb-h: min(66vh, 620px);
  }

  .why__limb--continue {
    display: block;
  }

  .why__limb--top {
    display: none;
  }

  /* 1024px 이상은 Hero 원이 이어지므로 별 띠도 이어 그리는 SVG 높이에 맞춘다 */
  .why .starfield {
    height: calc(var(--limb-h) * 200 / 620); /* .why__limb--continue 와 같은 높이 */
  }
}

.why__grid {
  display: grid;
  justify-items: center;
  row-gap: var(--sp-9); /* 머리글과 비교 목록 사이를 넉넉히 */
  text-align: center;
}

.why__head .home-head {
  max-width: 48rem;
  margin: 0 auto;
}

.why__head .home-head__body {
  margin-inline: auto;
}

.why__content {
  width: 100%;
  max-width: 48rem;
}

.why__compare {
  padding: 0;
  list-style: none;
}

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

.why__case:first-child {
  padding-top: 0;
}

/* 항목 사이 데이터 선 (섹션 내부만) */
.why__case + .why__case {
  border-top: 1px solid var(--line-on-dark);
}

/* 스크롤을 내리면 문제가 하나씩 떠오른다 (2026-09-16 사용자 요청).
   숨기는 규칙은 JS 가 data-reveal-armed 를 붙인 뒤부터 걸려 스크립트가 실패해도 본문이 사라지지 않는다 */
.why__case[data-reveal-armed] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s 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] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.why__case-title {
  font-size: var(--fs-xl);
}

.why__rows {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.why__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
}

.why__row dt {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.why__row dd {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.why__row--before dt {
  color: var(--text-subtle);
}

.why__row--before dd {
  color: var(--text-muted);
}

.why__row--after dt {
  color: var(--cyan);
}

.why__row--after dt::before {
  content: "→";
  content: "→" / ""; /* 화살표는 장식 — 스크린리더가 읽지 않게 */
  margin-right: var(--sp-2);
}

.why__row--after dd {
  font-weight: var(--fw-medium);
  color: var(--paper);
}

/* ---------- Numbers ---------- */
/* 위 Why 원의 아래 곡선과 간격을 더 둔다 (2026-09-16 사용자 요청) */
.numbers {
  padding-top: calc(var(--section-y) + var(--sp-8));
}

/* 셀 사이 1px 데이터 선: 격자 gap 으로 배경색을 드러낸다 */
.numbers__grid {
  display: grid;
  gap: 1px;
  background-color: var(--line-on-dark);
}

.stat {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) 0;
  background-color: var(--space);
}

.stat__value {
  order: -1; /* 시각적으로는 숫자가 먼저, 읽기 순서는 라벨 → 값 */
}

.stat__visual {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: clamp(2.75rem, 4.6vw, 4.5rem);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--paper);
}

.stat__unit {
  margin-left: 0.12em;
  font-family: var(--font-sans);
  font-size: 0.42em;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

.stat__unit--mono {
  font-family: var(--font-mono);
}

.stat__unit--before {
  margin-right: 0.2em;
  margin-left: 0;
}

.stat__unit--before:empty {
  margin: 0;
}

/* 1TB → 50MB: 출발값은 숫자 위에 작은 줄로 */
.stat__from {
  flex-basis: 100%;
  margin-bottom: var(--sp-2);
  font-size: 0.34em;
  letter-spacing: 0;
  color: var(--text-muted);
}

.stat__label {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--paper);
}

.stat__note {
  margin-top: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

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

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

  /* 여러 칸이 나란히 설 때 "1TB →" 줄 높이만큼 공간을 확보해 숫자 기준선을 맞춘다 */
  .stat__visual {
    align-content: flex-end;
    min-height: calc(1.34em + var(--sp-2));
  }
}

@media (min-width: 1024px) {
  .numbers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stat {
    padding: var(--sp-6) var(--sp-5);
  }

  .stat:first-child {
    padding-left: 0;
  }
}

/* ---------- Platform (라이트: 도면 + 설명 한 화면, 마우스 올리면 블록·설명 함께 강조) ---------- */
.platform__grid {
  display: grid;
  row-gap: var(--sp-6);
  align-items: center;
}

.platform__figure {
  width: 100%;
  max-width: 460px;
}

.platform__caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted-on-light);
}

/* 패널 묶음 소제목: 핵심 3중 코어 구조 / 확장 슬롯 */
.platform__group {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--blue);
}

.platform__group:not(:first-child) {
  margin-top: var(--sp-5);
}

.platform__panel {
  margin-inline: calc(var(--sp-4) * -1);
  padding: var(--sp-3) var(--sp-4);
  transition: background-color 0.2s ease;
}

.platform__panel + .platform__panel {
  border-top: 1px solid var(--line-on-light);
}

.platform__panel-title {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-lg);
  transition: color 0.2s ease;
}

.platform__panel-body {
  max-width: 52ch;
  font-size: var(--fs-sm);
  color: var(--text-muted-on-light);
}

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

/* ---------- 레고 블록 개념도 (2026-09-16 사용자 시안 참고) ----------
   --line/--fill 두 변수로 블록과 돌기 색을 함께 바꾼다. 블록 아래는 파내지 않고 메운다 (2026-09-16 사용자 요청) */
.lego {
  --stud-w: 34px;
  --stud-h: 14px;
  --lego-left: 26px;
  width: 100%;
  padding-top: var(--stud-h); /* 맨 위 돌기가 도면 영역 안에 들어오도록 */
}

.lego__block {
  --line: rgba(244, 246, 248, 0.55); /* 밝은 회색 헤어라인 (2026-09-16 사용자 요청) */
  --fill: var(--navy);
  position: relative;
  /* 부품명 글자 크기를 블록 제 폭에 맞춘다 (2026-09-16 사용자 요청: 좁은 블록에서 글씨가 넘쳤다) */
  container-type: inline-size;
  padding: 30px 26px 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background-color: var(--fill);
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* 블록 색: 사이트 남색 계열의 명도 단계로 쌓는다 (2026-09-16 사용자 요청으로 원래 색 복귀).
   밝은 섹션 위에 놓인 짙은 덩어리라 레고가 하나의 부품처럼 읽히고, 위로 갈수록 밝아 AI 가 맨 위에 온다.
   --acc-N 은 오른쪽 설명 제목에도 쓰는 값이라 paper 위에서 대비가 나오는 짙은 색으로 둔다 */
.platform {
  --acc-0: #1B4A86;  /* Edge AI */
  --acc-1: #143A6B;  /* CPU */
  --acc-2: #0E2A52;  /* MCU */
  --acc-3: #0B1F3D;  /* 확장 슬롯 */
}

.lego__block[data-block="0"] { --fill: var(--acc-0); --fill-active: #24609F; }
.lego__block[data-block="1"] { --fill: var(--acc-1); --fill-active: #1C5085; }
.lego__block[data-block="2"] { --fill: var(--acc-2); --fill-active: #163E70; }
.lego__block[data-block="3"] { --fill: var(--acc-3); --fill-active: #12305A; }

/* 아래 블록이 위 블록의 홈에 끼워지도록 겹친다 (뒤에 오는 블록이 위로) */
.lego__row,
.lego__block--last {
  position: relative;
  margin-top: calc(var(--stud-h) * -1);
}

.lego__block { z-index: 1; }
.lego__row { z-index: 2; display: flex; gap: 0; }
.lego__row .lego__block { flex: 1 1 0; min-width: 0; }
.lego__row .lego__block + .lego__block { margin-left: -1px; } /* 테두리를 겹쳐 한 겹으로 */
.lego__block--last { z-index: 3; }

/* 위 돌기 */
.lego__studs {
  position: absolute;
  top: calc(var(--stud-h) * -1);
  z-index: 1;
  left: var(--lego-left);
  display: flex;
  gap: 14px;
}

/* 돌기: 아래로 1px 더 그려 블록의 위 테두리를 덮는다 (이어진 한 덩어리로 보이게) */
.lego__studs i {
  width: var(--stud-w);
  height: calc(var(--stud-h) + 1px);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background-color: var(--fill);
  /* 블록 몸통과 같은 속도로 색이 바뀌어야 한 덩어리로 보인다 */
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* 확장 블록: 돌기 두 개를 블록 폭 기준으로 배치 (위 블록의 돌기와 같은 자리) */
.lego__studs--two {
  left: 0;
  width: 100%;
  gap: 0;
}

.lego__studs--two i:first-child {
  margin-left: var(--lego-left);
}

.lego__studs--two i:last-child {
  margin-left: calc(50% + 29px - var(--lego-left) - var(--stud-w));
}

.lego__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: 1.5;
  color: rgba(244, 246, 248, 0.76); /* 가장 밝은 블록(#1B4A86) 위에서도 4.5:1 이상 */
}

/* 부품명: 블록 폭(cqw)에 따라 줄어든다. 가로로 둘로 나뉜 CPU·MCU 블록에서 글씨가 넘치던 문제를 없앤다
   (2026-09-16 사용자 요청). 위·아래 넓은 블록에서는 최대값에 걸려 예전 크기와 비슷하게 보인다 */
.lego__name {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.25rem, 10cqw, 2.25rem);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--paper);
  overflow-wrap: anywhere; /* 넘치더라도 블록 밖으로 삐져나가지 않게 */
}

.lego__name--sm {
  font-size: clamp(1.125rem, 8.5cqw, 1.75rem);
}

/* 확장 슬롯 자국 */
.lego__slots {
  display: block;
  width: 152px;
  height: 40px;
  margin-top: var(--sp-4);
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 14px);
}

/* 스크롤을 내리면 블록이 위에서 차례로 내려와 끼워진다 (2026-09-16 사용자 요청).
   숨기는 규칙은 JS 가 data-reveal-armed 를 붙인 뒤부터 걸려 스크립트가 실패해도 도면이 사라지지 않는다.
   animation-fill-mode 는 backwards — 다 내려온 뒤에는 애니메이션이 풀려 마우스 올림 transform 이 그대로 먹는다 */
.lego[data-reveal-armed] .lego__block {
  opacity: 0;
}

.lego[data-revealed] .lego__block {
  opacity: 1;
  animation: lego-drop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}

.lego[data-revealed] .lego__row .lego__block:first-child { animation-delay: 0.16s; }
.lego[data-revealed] .lego__row .lego__block + .lego__block { animation-delay: 0.26s; }
.lego[data-revealed] .lego__block--last { animation-delay: 0.38s; }

@keyframes lego-drop {
  from {
    transform: translateY(-40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

/* 마우스를 올린 블록: 살짝 들리고 흰 테두리 (오른쪽 설명과 함께 강조) */
.platform[data-active="0"] [data-block="0"],
.platform[data-active="1"] [data-block="1"],
.platform[data-active="2"] [data-block="2"],
.platform[data-active="3"] [data-block="3"] {
  --line: #FFFFFF; /* 강조 테두리는 흰색 (2026-09-16 사용자 요청) */
  --fill: var(--fill-active);
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(10, 15, 24, 0.18);
}

/* 도면 블록: 자기 중심 기준으로 살짝 커진다 */
.platform .board__block {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease;
}

.platform[data-active="0"] .board__block[data-block="0"],
.platform[data-active="1"] .board__block[data-block="1"],
.platform[data-active="2"] .board__block[data-block="2"],
.platform[data-active="3"] .board__block[data-block="3"] {
  transform: scale(1.05);
}

.platform[data-active="0"] .board__block[data-block="0"] rect,
.platform[data-active="1"] .board__block[data-block="1"] rect,
.platform[data-active="2"] .board__block[data-block="2"] rect,
.platform[data-active="3"] .board__block[data-block="3"] rect {
  fill: rgba(27, 111, 208, 0.1);
  stroke: var(--blue);
  stroke-opacity: 1;
}

/* 강조된 설명의 배경도 블록 색 계열의 옅은 값으로 맞춘다 */
.platform[data-active="0"] [data-panel="0"] { background-color: #E4EEFA; }
.platform[data-active="1"] [data-panel="1"] { background-color: #E5EBF5; }
.platform[data-active="2"] [data-panel="2"] { background-color: #E4E9F2; }
.platform[data-active="3"] [data-panel="3"] { background-color: #E3E7EF; }

/* 설명 제목 색도 블록 색과 맞춘다 */
.platform[data-active="0"] [data-panel="0"] .platform__panel-title { color: var(--acc-0); }
.platform[data-active="1"] [data-panel="1"] .platform__panel-title { color: var(--acc-1); }
.platform[data-active="2"] [data-panel="2"] .platform__panel-title { color: var(--acc-2); }
.platform[data-active="3"] [data-panel="3"] .platform__panel-title { color: var(--acc-3); }

@media (min-width: 1024px) {
  .platform__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-6);
    row-gap: 0;
  }

  .platform__figure {
    grid-column: 1 / 7;
    max-width: 560px;
  }

  .platform__panels {
    grid-column: 7 / 13;
  }
}

/* ---------- Digital Twin (네이비): 가로 선 위의 검증 단계 ----------
   2026-09-16 사용자 요청 (vercel.com/design 참고): 좌우로 사라지는 흰 선 + 선 위쪽 가운데의 별,
   스크롤을 내리면 밝은 선이 왼쪽에서 오른쪽으로 나아간다 */
.twin {
  overflow: hidden; /* 100vw 선이 세로 스크롤바 폭만큼 넘치지 않게 */
}

/* 헤드라인을 "쏘아 올리기 전," 에서 한 줄 내린다 (2026-09-16 사용자 요청).
   data-ko/data-en 은 textContent 로 교체돼 <br> 을 쓸 수 없어 줄바꿈 문자로 처리 */
.twin .home-head__title {
  white-space: pre-line;
}

.twin__timeline {
  --twin-progress: 0;
  position: relative;
  margin-top: var(--sp-8);
  padding-top: 140px; /* 별이 놓이는 하늘 높이 */
}

/* 별: 선 위쪽 가운데에 모여 있다 (위치·크기는 아래 :nth-child 로 하나씩) */
.twin__sky {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1180px, 100%);
  height: 140px;
  transform: translateX(-50%);
  pointer-events: none;
}

.twin__star,
.twin__spark {
  position: absolute;
}

.twin__star {
  border-radius: 50%;
  background-color: var(--paper);
}

/* 네 갈래로 반짝이는 별: 블러·글로우 없이 가로세로 두 줄로 그린다 */
.twin__spark {
  background:
    radial-gradient(closest-side, rgba(244, 246, 248, 0.9), transparent) center / 1.5px 100% no-repeat,
    radial-gradient(closest-side, rgba(244, 246, 248, 0.9), transparent) center / 100% 1.5px no-repeat;
}

.twin__star:nth-child(1) { left: 79.4%; top: 85.0%; width: 3px; height: 3px; opacity: 0.75; }
.twin__star:nth-child(2) { left: 54.6%; top: 52.7%; width: 2px; height: 2px; opacity: 0.77; }
.twin__star:nth-child(3) { left: 62.5%; top: 43.1%; width: 1px; height: 1px; opacity: 0.73; }
.twin__star:nth-child(4) { left: 47.8%; top: 17.3%; width: 1px; height: 1px; opacity: 0.2; }
.twin__star:nth-child(5) { left: 49.9%; top: 16.0%; width: 2px; height: 2px; opacity: 0.53; }
.twin__star:nth-child(6) { left: 42.7%; top: 23.2%; width: 3px; height: 3px; opacity: 0.42; }
.twin__star:nth-child(7) { left: 43.2%; top: 35.8%; width: 1px; height: 1px; opacity: 0.49; }
.twin__star:nth-child(8) { left: 42.9%; top: 69.8%; width: 1px; height: 1px; opacity: 0.23; }
.twin__star:nth-child(9) { left: 38.0%; top: 88.8%; width: 2px; height: 2px; opacity: 0.27; }
.twin__star:nth-child(10) { left: 48.7%; top: 67.4%; width: 2px; height: 2px; opacity: 0.43; }
.twin__star:nth-child(11) { left: 59.3%; top: 35.0%; width: 3px; height: 3px; opacity: 0.29; }
.twin__star:nth-child(12) { left: 40.6%; top: 73.3%; width: 1px; height: 1px; opacity: 0.44; }
.twin__star:nth-child(13) { left: 21.5%; top: 52.9%; width: 2px; height: 2px; opacity: 0.16; }
.twin__star:nth-child(14) { left: 53.6%; top: 73.6%; width: 1px; height: 1px; opacity: 0.2; }
.twin__star:nth-child(15) { left: 76.5%; top: 58.9%; width: 3px; height: 3px; opacity: 0.61; }
.twin__star:nth-child(16) { left: 33.7%; top: 33.8%; width: 2px; height: 2px; opacity: 0.42; }
.twin__star:nth-child(17) { left: 61.3%; top: 74.2%; width: 1px; height: 1px; opacity: 0.48; }
.twin__star:nth-child(18) { left: 27.6%; top: 69.0%; width: 1px; height: 1px; opacity: 0.62; }
.twin__star:nth-child(19) { left: 29.8%; top: 88.9%; width: 1px; height: 1px; opacity: 0.38; }
.twin__star:nth-child(20) { left: 44.6%; top: 34.9%; width: 1px; height: 1px; opacity: 0.18; }
.twin__star:nth-child(21) { left: 87.0%; top: 72.6%; width: 1px; height: 1px; opacity: 0.66; }
.twin__star:nth-child(22) { left: 90.6%; top: 69.2%; width: 1px; height: 1px; opacity: 0.53; }
.twin__star:nth-child(23) { left: 66.8%; top: 56.3%; width: 1px; height: 1px; opacity: 0.57; }
.twin__star:nth-child(24) { left: 48.3%; top: 37.8%; width: 1px; height: 1px; opacity: 0.55; }
.twin__star:nth-child(25) { left: 33.5%; top: 29.1%; width: 2px; height: 2px; opacity: 0.78; }
.twin__star:nth-child(26) { left: 60.2%; top: 59.6%; width: 1px; height: 1px; opacity: 0.38; }
.twin__star:nth-child(27) { left: 46.1%; top: 79.9%; width: 1px; height: 1px; opacity: 0.64; }
.twin__star:nth-child(28) { left: 58.2%; top: 52.2%; width: 1px; height: 1px; opacity: 0.38; }
.twin__star:nth-child(29) { left: 60.1%; top: 52.1%; width: 2px; height: 2px; opacity: 0.52; }
.twin__star:nth-child(30) { left: 76.3%; top: 69.0%; width: 2px; height: 2px; opacity: 0.58; }
.twin__star:nth-child(31) { left: 45.4%; top: 70.5%; width: 2px; height: 2px; opacity: 0.35; }
.twin__star:nth-child(32) { left: 17.4%; top: 44.3%; width: 1px; height: 1px; opacity: 0.2; }
.twin__star:nth-child(33) { left: 41.1%; top: 59.7%; width: 3px; height: 3px; opacity: 0.45; }
.twin__star:nth-child(34) { left: 29.6%; top: 64.5%; width: 1px; height: 1px; opacity: 0.61; }
.twin__star:nth-child(35) { left: 52.1%; top: 40.8%; width: 2px; height: 2px; opacity: 0.53; }
.twin__star:nth-child(36) { left: 67.6%; top: 91.8%; width: 1px; height: 1px; opacity: 0.44; }
.twin__star:nth-child(37) { left: 43.7%; top: 71.4%; width: 1px; height: 1px; opacity: 0.56; }
.twin__star:nth-child(38) { left: 45.0%; top: 71.9%; width: 1px; height: 1px; opacity: 0.26; }
.twin__star:nth-child(39) { left: 47.5%; top: 52.7%; width: 1px; height: 1px; opacity: 0.26; }
.twin__star:nth-child(40) { left: 37.7%; top: 61.5%; width: 2px; height: 2px; opacity: 0.35; }
.twin__star:nth-child(41) { left: 30.6%; top: 58.4%; width: 1px; height: 1px; opacity: 0.68; }
.twin__star:nth-child(42) { left: 22.0%; top: 77.8%; width: 3px; height: 3px; opacity: 0.27; }
.twin__star:nth-child(43) { left: 43.7%; top: 15.6%; width: 1px; height: 1px; opacity: 0.22; }
.twin__star:nth-child(44) { left: 38.7%; top: 46.6%; width: 1px; height: 1px; opacity: 0.21; }
.twin__spark:nth-child(45) { left: 21%; top: 26%; width: 13px; height: 13px; opacity: 0.45; }
.twin__spark:nth-child(46) { left: 42%; top: 52%; width: 10px; height: 10px; opacity: 0.35; }
.twin__spark:nth-child(47) { left: 62%; top: 34%; width: 15px; height: 15px; opacity: 0.5; }
.twin__spark:nth-child(48) { left: 78%; top: 66%; width: 9px; height: 9px; opacity: 0.32; }

/* 선: 화면 폭만큼 그리고 좌우 끝에서 사라진다 */
.twin__line {
  position: absolute;
  top: 140px;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background-color: rgba(244, 246, 248, 0.28);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

/* 스크롤에 따라 자라는 밝은 선 (transform 만 바꿔 다시 그리는 비용을 줄인다) */
.twin__progress {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--twin-progress));
  transform-origin: left center;
  background-color: var(--paper);
}

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

/* 단계: 선 위의 점 + 그 아래 이름 */
.twin__step {
  position: relative;
  padding-top: var(--sp-6);
}

.twin__dot {
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(244, 246, 248, 0.45);
  border-radius: 50%;
  background-color: var(--navy);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* 밝은 선이 지나간 점은 채워진다 */
.twin__step[data-reached] .twin__dot {
  border-color: var(--paper);
  background-color: var(--paper);
  transform: scale(1.25);
}

.twin__step-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.twin__step-body {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.twin__more {
  margin-top: var(--sp-8);
}

/* 모션 줄이기: 선을 처음부터 끝까지 그려 두고 점도 모두 채운다 */
@media (prefers-reduced-motion: reduce) {
  .twin__timeline {
    --twin-progress: 1;
  }

  .twin__dot {
    transition: none;
  }
}

/* 1024px 미만: 선 하나에 네 단계를 두면 글자가 눌린다 → 선·별은 구분선으로 두고 단계는 아래로 쌓는다 */
@media (max-width: 1023px) {
  .twin__timeline {
    padding-top: 110px;
  }

  .twin__sky {
    height: 110px;
  }

  .twin__line {
    top: 110px;
  }

  .twin__dot {
    display: none;
  }

  .twin__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: var(--sp-7);
  }

  .twin__step {
    padding-top: 0;
  }
}

@media (max-width: 479px) {
  .twin__steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .twin__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 점이 각 칸 가운데에 오고 글자도 그 아래 가운데로 */
  .twin__step {
    text-align: center;
  }

  .twin__dot {
    left: 50%;
    transform: translateX(-50%);
  }

  .twin__step[data-reached] .twin__dot {
    transform: translateX(-50%) scale(1.25);
  }
}

/* ---------- Vision (가운데 정렬 섹션 머리 + 개방 · 합리 · 안전 3축 카드) ---------- */
.vision__body {
  text-align: center;
}

.vision__title {
  max-width: 20em;
  margin-inline: auto;
  font-size: var(--fs-2xl); /* 다른 섹션 헤드라인과 같은 크기 */
  font-weight: var(--fw-bold);
}

.vision__axes {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

/* 속이 빈 둥근 사각형. 마우스를 올리면 빛줄기가 한 번 지나간다 */
.vision__axis {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line-on-dark);
  border-radius: 14px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.vision__axis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 47%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.14) 53%,
    transparent 62%
  );
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

/* 스크롤로 내려오면 왼쪽 카드부터 차례로 빛줄기가 지나간다 (2026-09-16 사용자 요청).
   마우스 올림 반응은 그대로 두되 keyframes 이름을 달리해 스크롤 연출이 끝난 카드에서도 다시 재생된다 */
.vision__axes[data-revealed] .vision__axis:nth-child(1)::after { animation: vision-sweep-in 0.85s ease-out 0s; }
.vision__axes[data-revealed] .vision__axis:nth-child(2)::after { animation: vision-sweep-in 0.85s ease-out 0.18s; }
.vision__axes[data-revealed] .vision__axis:nth-child(3)::after { animation: vision-sweep-in 0.85s ease-out 0.36s; }

.vision__axis:hover,
.vision__axis:focus-within {
  border-color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.05);
}

/* 마우스 올림이 스크롤 연출 규칙을 이기도록 한 단계 더 구체적으로 쓴다 */
.vision__axes .vision__axis:hover::after,
.vision__axes .vision__axis:focus-within::after {
  animation: vision-sweep 0.85s ease-out;
}

@keyframes vision-sweep-in {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes vision-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vision__axis::after {
    display: none;
  }
}

.vision__term {
  white-space: nowrap; /* "합리 (Reasonable)" 가 괄호 중간에서 끊기지 않게 */
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--cyan);
}

/* 지정한 자리에서 줄을 바꾼다 (2026-09-16 사용자 요청).
   data-ko/data-en 은 textContent 로 교체돼 <br> 을 쓸 수 없어 줄바꿈 문자로 처리 */
.vision__desc {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--paper);
  white-space: pre-line;
}

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

/* ---------- Partners strip (라이트, 8개 영역) ---------- */
/* 셀 사이 1px 데이터 선 */
.partners-strip {
  display: grid;
  gap: 1px;
  padding: 0;
  list-style: none;
  background-color: var(--line-on-light);
}

.partners-strip__area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  background-color: var(--paper);
}

.partners-strip__area-name {
  font-size: var(--fs-md);
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--blue);
}

.partners-strip__role {
  font-size: var(--fs-sm);
  color: var(--text-muted-on-light);
}

.partners-strip__names {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}

.partners-strip__partner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
}

.partners-strip__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* 로고 비율이 제각각이라 높이·최대 폭을 함께 제한 */
.partners-strip__logo {
  width: auto;
  max-width: min(100%, 180px);
  height: auto;
  max-height: 36px;
  object-fit: contain;
}

.partners-strip__status {
  font-size: var(--fs-xs);
  color: var(--text-muted-on-light);
}

.partners-strip__more {
  margin-top: var(--sp-6);
}

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

  .partners-strip__area {
    padding: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  .partners-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .partners-strip__area {
    padding: var(--sp-6) var(--sp-5);
  }
}