/* ==========================================================================
   pages/platform.css — Platform 페이지
   세 단계 파이프라인: A1-Leoverse(다크, 70%) → Digital Twin(라이트, 25%) → 실물 제조(최심부, 5%).
   도식은 전부 SVG·CSS 로 그린다 (이미지 파일 없음). 스크롤 진입 시 순차로 그려지고,
   모션 줄이기 설정에서는 처음부터 완성 상태로 둔다.
   AI Core Motherboard 개념도는 협력회사 페이지와 같은 공용 컴포넌트를 쓴다 (components.css).
   모바일 우선. 브레이크포인트 640 / 1024 / 1280
   ========================================================================== */

/* 페이지 머리 리드는 Partners 페이지와 같은 값을 쓴다 (2026-09-16 사용자 요청) */
.pf-lead {
  max-width: 56ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.section--light .pf-lead {
  color: var(--text-muted-on-light);
}

/* ---------- 파이프라인 내비게이터 ----------
   스크롤에 따라 platform.js 가 활성 단계를 옮긴다. 활성 단계만 색이 살아난다 */
.pf-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background-color: var(--space);
  border-bottom: 1px solid var(--line-on-dark);
}

.pf-nav__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pf-step;
}

.pf-nav__step {
  counter-increment: pf-step;
  border-left: 1px solid var(--line-on-dark);
}

.pf-nav__step:first-child {
  border-left: 0;
}

.pf-nav__step a {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease;
}

.pf-nav__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* 단계 번호는 도식의 일부로만 (글로 쓰는 항목 번호 라벨이 아니다) */
.pf-nav__name::before {
  content: counter(pf-step);
  margin-right: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  opacity: 0.7;
}

.pf-nav__role {
  font-size: var(--fs-xs);
  opacity: 0.75;
}

.pf-nav__step[data-active] a {
  color: var(--cyan);
  background-color: rgba(27, 111, 208, 0.16);
}

.pf-nav__step a:hover,
.pf-nav__step a:focus-visible {
  color: var(--paper);
}

/* 640px 미만: 이름·역할을 접고 점 세 개로 줄인다 (2026-09-16 사용자 요청).
   글자는 남겨 두되 화면에서만 감춰 스크린리더·키보드에는 그대로 단계 이름이 읽힌다 */
@media (max-width: 639px) {
  .pf-nav__list {
    justify-content: center;
    grid-template-columns: repeat(3, auto);
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
  }

  .pf-nav__step {
    border-left: 0;
  }

  .pf-nav__step a {
    display: block;
    width: 44px; /* 손가락이 닿는 최소 크기 */
    height: 44px;
    padding: 0;
    position: relative;
  }

  .pf-nav__name,
  .pf-nav__role {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pf-nav__step a::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid var(--text-muted);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.25s ease, border-color 0.25s ease;
  }

  .pf-nav__step[data-active] a {
    background-color: transparent;
  }

  .pf-nav__step[data-active] a::after {
    background-color: var(--cyan);
    border-color: var(--cyan);
  }
}

/* ---------- 파트 공통 ---------- */
.pf-part__head {
  max-width: 62ch;
  padding-bottom: var(--sp-5);
}

/* 파트 제목(A1-Leoverse™ · Digital Twin)은 이 페이지에서 가장 큰 글자다 (2026-09-16 사용자 요청).
   블록 소제목(h3, 19–25px)과 확실히 차이가 나도록 h1 급 크기에 브랜드 블루를 쓴다 */
.pf-part__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--blue);
}

/* 2026-09-16 사용자 요청: Leoverse~실물 제조가 모두 흰 배경이라 기본 색을 밝은 배경 기준으로 둔다 */
.pf-part__lead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.pf-part__body {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--text-muted-on-light);
}

/* Digital Twin 을 앞 파트와 잇는 문장 */
.pf-part__link {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--text-muted-on-light);
}

/* 파트 구분 (2026-09-16 사용자 요청): 배경색이 같으므로 블록·파트 사이를 선으로 나눈다 */
.pf-block {
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-on-light);
}

/* 세 파트(Leoverse · Digital Twin · 실물 제조) 경계 */
.pf-twin,
.pf-make {
  border-top: 1px solid var(--line-on-light);
}

/* 비유 문장은 본문 크기·굵기로 둔다. 소제목(h3)만 제목으로 읽혀야 한다 (2026-09-16 사용자 요청) */
.pf-block__metaphor {
  max-width: 62ch;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.pf-block__title {
  margin-bottom: var(--sp-4);
}

.pf-block__title--spaced {
  margin-top: var(--sp-9);
}

.pf-block__lead {
  max-width: 62ch;
  font-size: var(--fs-md);
  color: var(--text-muted-on-light);
}

.pf-block__body {
  max-width: 62ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-md);
  color: var(--text-muted-on-light);
}

.pf-note {
  max-width: 62ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted-on-light);
}

/* ---------- 1-1. 보드 도면 + 코어 3종 설명 ----------
   도면 자체(.board*)는 components.css 에 있다. 여기서는 자리만 잡는다.
   2026-09-16 사용자 요청: 1024px 이상에서 도면 왼쪽, 설명 오른쪽 */
.pf-hw {
  display: grid;
  gap: var(--sp-7);
  margin-top: var(--sp-6);
}

.pf-board {
  max-width: 460px;
  margin: 0;
}

.pf-cores {
  margin: 0;
}

/* 코어 사이 간격이 곧 도면이 머무는 거리다 (2026-09-16 사용자 요청) */
.pf-core {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line-on-light);
}

.pf-core:first-child {
  padding-top: 0;
  border-top: 0;
}

.pf-core__role {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--blue);
}

.pf-core__part {
  margin: var(--sp-2) 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.pf-core__maker {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted-on-light);
}

.pf-core__desc {
  max-width: 54ch;
  margin: 0;
  /* 한 줄 요약 다음에 오는 설명 */
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted-on-light);
}

/* 한 줄 요약 — 부품명 아래, 설명 위 */
.pf-core__line {
  margin: 0 0 var(--sp-3);
  max-width: 54ch;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* 기술 근거 한 줄 — 줄을 나누는 선은 쓰지 않는다 (2026-09-16 사용자 요청) */
.pf-core__spec {
  max-width: 54ch;
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted-on-light);
}

/* ---------- 1-2. 실시간 안전 소프트웨어 ---------- */
.pf-sw {
  display: grid;
  gap: var(--sp-7);
  margin-top: var(--sp-6);
}

.pf-sw__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--blue);
}

.pf-sw__body {
  max-width: 54ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted-on-light);
}

/* 우선순위 큐: 위에서부터 색이 옅어진다 */
.pf-queue {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-queue__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-on-light);
}

.pf-queue__row + .pf-queue__row {
  border-top: 0;
}

/* 우선순위는 색 농도로 (밝은 배경이라 파랑 계열 옅은 값) */
.pf-queue__row--1 { background-color: rgba(27, 111, 208, 0.16); }
.pf-queue__row--2 { background-color: rgba(27, 111, 208, 0.08); }
.pf-queue__row--3 { background-color: rgba(27, 111, 208, 0.03); }

.pf-queue__rank {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--blue);
}

.pf-queue__task {
  font-size: var(--fs-sm);
  color: var(--ink);
}

/* 3계층 드라이버: 아래 한 층만 교체된다 */
.pf-driver {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-driver__layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-on-light);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

.pf-driver__layer + .pf-driver__layer {
  border-top: 0;
}

.pf-driver__layer--fixed {
  background-color: rgba(10, 15, 24, 0.03);
}

/* 아래 한 층만 강조하므로 테두리를 사방 똑같이 두른다 (2026-09-16 사용자 요청).
   층끼리 테두리를 겹쳐 쓰는 규칙(.pf-driver__layer + .pf-driver__layer)이 더 구체적이라
   같은 구체성으로 윗변을 되살린다. 위 층과 1px 겹쳐 두 겹으로 보이지 않게 한다 */
.pf-driver__layer + .pf-driver__layer--swap {
  margin-top: -1px;
  background-color: rgba(27, 111, 208, 0.1);
  border: 1px solid var(--blue);
}

.pf-driver__tag {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--blue);
}

/* ---------- 1-3. 개방형 SDK 허브 ---------- */
.pf-hub {
  position: relative;
  margin-top: var(--sp-6);
}

.pf-hub__wires {
  display: none; /* 좁은 화면에서는 선 없이 목록으로 읽힌다 */
  width: 100%;
  height: 100%;
}

.pf-hub__wire {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1;
  stroke-opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

/* 허브 가운데 블록도 도식 한가운데에 놓는다 */
.pf-hub {
  text-align: center;
}

.pf-hub__core {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: var(--sp-3) var(--sp-5);
  background-color: #FFFFFF;
  border: 2px solid var(--blue);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.pf-hub__apis {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}

/* 2026-09-16 사용자 요청: 테두리를 또렷하게, 글과 블록 모두 가운데 정렬, 폭은 줄인다 */
.pf-hub__apis li {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  max-width: 260px;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--line-on-light);
  background-color: #FFFFFF;
  text-align: center;
}

.pf-hub__api {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
}

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

/* ---------- PART 2 · Digital Twin ---------- */
.pf-twin__kinds {
  display: grid;
  gap: var(--sp-5);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.twin-kind {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line-on-light);
}

.twin-kind__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-4);
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
}

.twin-kind__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
}

.twin-kind__rows {
  margin: 0;
}

.twin-kind__rows > div {
  display: grid;
  gap: 2px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-on-light);
}

.twin-kind__rows dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--blue);
}

.twin-kind__rows dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted-on-light);
}

/* 검증 4단계 */
.pf-steps {
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pf-verify;
}

.pf-step {
  counter-increment: pf-verify;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--line-on-light);
}

.pf-step__name {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
}

.pf-step__name::before {
  content: counter(pf-verify);
  margin-right: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--blue);
}

.pf-step__desc {
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted-on-light);
}

.pf-twin__statement {
  max-width: 62ch;
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 1px solid var(--blue);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* ---------- PART 3 · 실물 제조 (얇은 밴드) ---------- */
.pf-make {
  padding-block: var(--sp-8);
  text-align: center;
}

.pf-make__title {
  font-size: var(--fs-xl);
}

.pf-make__body {
  max-width: 48ch;
  margin: var(--sp-3) auto 0;
  font-size: var(--fs-md);
  color: var(--text-muted-on-light);
}

.pf-make__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--sp-5);
  padding-inline: var(--sp-5);
  border: 1px solid var(--blue);
  border-radius: 2px;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--blue);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pf-make__cta:hover,
.pf-make__cta:focus-visible {
  background-color: var(--blue);
  color: #FFFFFF;
}

/* ---------- 스크롤 진입 시 그려지는 도식 ----------
   숨기는 것은 JS 가 data-draw-armed 를 붙인 뒤부터다. 스크립트가 실패하면 그냥 다 보인다 */
[data-pf-draw][data-draw-armed] > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-pf-draw][data-drawn] > * {
  opacity: 1;
  transform: none;
}

[data-pf-draw][data-drawn] > *:nth-child(2) { transition-delay: 0.1s; }
[data-pf-draw][data-drawn] > *:nth-child(3) { transition-delay: 0.2s; }
[data-pf-draw][data-drawn] > *:nth-child(4) { transition-delay: 0.3s; }

.pf-hub__wire {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  transition: stroke-dashoffset 0.9s ease 0.2s;
}

[data-drawn] .pf-hub__wire {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-pf-draw][data-draw-armed] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pf-hub__wire {
    stroke-dashoffset: 0;
    transition: none;
  }
}

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

  /* 부품 검증 → 운영 시뮬레이션: 시간 순서를 화살표로 잇는다 */
  .twin-kind--ops {
    position: relative;
  }

  .twin-kind--ops::before {
    content: "";
    position: absolute;
    left: calc(var(--sp-5) * -1);
    top: 50%;
    width: calc(var(--sp-5) - 2.5px);
    height: 1px;
    background-color: var(--text-muted-on-light);
  }

  .twin-kind--ops::after {
    content: "";
    position: absolute;
    left: -8.5px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--text-muted-on-light);
    border-bottom: 1px solid var(--text-muted-on-light);
    transform: translateY(-50%) rotate(-45deg);
  }

  .pf-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  /* 예전 Platform 페이지처럼 도면은 자리에 머물고 오른쪽 설명만 따로 내려간다 (2026-09-16 사용자 요청) */
  .pf-hw {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: start;
  }

  .pf-board {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-8));
    align-self: start;
  }

  .pf-sw {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .pf-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 허브: 가운데 SDK, 네 갈래가 모서리로 뻗는다 */
  .pf-hub {
    min-height: 260px;
  }

  .pf-hub__wires {
    display: block;
    position: absolute;
    inset: 0;
  }

  /* 선 한가운데에 놓는다. 그리기 효과의 transform 초기화(0,2,0)보다 구체적이어야
     가운데 정렬이 풀리지 않는다 (2026-09-16: 이 때문에 오른쪽으로 밀려 있었다) */
  .pf-hub__core,
  [data-pf-draw][data-draw-armed] > .pf-hub__core,
  [data-pf-draw][data-drawn] > .pf-hub__core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .pf-hub__apis {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    column-gap: 300px;
    row-gap: 120px;
    margin: 0;
  }
}