/* ==========================================================================
   pages/platform.css — Platform 페이지
   세 단계 파이프라인: Leoverse(다크, 70%) → Digital Twin(라이트, 25%) → 실물 제조(최심부, 5%).
   도식은 전부 SVG·CSS 로 그린다 (이미지 파일 없음).
   스크롤 진입 연출은 **공용 훅 data-reveal 을 쓴다** (규칙은 components.css).
   2026-09-29 에 이 페이지 전용이던 data-pf-draw 를 걷어냈다 — 같은 일을 하는 두 벌이었고
   거리·시간·지연이 달라서 Home 과 인상이 어긋났다.
   AI Core Motherboard 개념도는 협력회사 페이지와 같은 공용 컴포넌트를 쓴다 (components.css).
   모바일 우선. 브레이크포인트 640 / 1024 / 1280

   ---- 글자 규격 (2026-09-29 Home 기준으로 통일 — 역할이 같으면 값도 같다) ----
   파트·섹션 제목(h2)  : --fs-2xl · semibold · --ink        ← 다른 5개 페이지 h2 와 같은 값
   블록 소제목(h3)     : --fs-lg · semibold · 본문 색 (base.css h3 그대로)
   파트 리드 · 강조 문장 : --fs-lg · semibold · --ink
   소소제목(h4)        : --fs-base · semibold (크기를 지정하지 않는다)
   문단 · 앞선 한 줄   : --fs-base · regular · --text-muted-on-light (강조 문단만 --ink)
   항목 제목(term)     : --fs-md · semibold · --ink
   항목 본문(desc)     : --fs-sm · regular · --text-muted-on-light
   작은 라벨           : --fs-caption · medium · --text-muted-on-light
   면·선 색            : 배경 --paper(섹션)·--white(카드) / 선 --line-on-light
                         강조면은 --ink 기반 회색 농도 rgba(10,18,34,…)

   **파랑(--electric-blue*)은 현재 위치(.pf-nav__step[data-active])에만 쓴다** —
   2026-10-06 에 .pf-close__cta 가 Partners 로 옮겨가 이 페이지에 누를 수 있는 것이 없다. 라벨·테두리·면에 쓰지 않는다.
   mono(--font-mono)는 번호·데이터에만: 내비 단계번호 · 검증 단계번호 · 로드맵 연도 · API 이름.
   ========================================================================== */

/* 페이지 머리 리드는 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);
}

/* 단계 버튼 칸 높이 (1024px 이상). **도면 sticky 오프셋(.pf-board)도 이 값을 쓴다** —
   이 토큰을 지우거나 이름을 바꾸면 calc() 전체가 무효가 되어 도면이 따라오지 않는다.
   2026-09-29: --pf-title-ink(#3C4149) 는 폐기했다. 팔레트 밖 생값이었고, 제목을 본문보다
   흐리게 두는 것이 "위계는 색이 아니라 크기·굵기로" 원칙의 반대였다. 제목은 --ink 를 쓴다 */
body[data-page="platform"] {
  --pf-nav-h: 4.5rem;
}

/* ---------- 파이프라인 내비게이터 ----------
   스크롤에 따라 platform.js 가 활성 단계를 옮긴다. 활성 단계만 색이 살아난다 */
.pf-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background-color: var(--orbit-navy);
  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-size: var(--fs-caption);
  opacity: 0.7;
}

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

.pf-nav__step[data-active] a {
  color: var(--electric-blue-dark);
  background-color: rgba(47, 107, 255, 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(--electric-blue-dark);
    border-color: var(--electric-blue-dark);
  }
}

/* 1024px 이상: 단계 버튼 세 칸 (2026-09-28 브랜드 v1.0 으로 다시 짰다).
   종전에는 머리 격자에 이어 붙인 칸이었으나 격자 시스템을 폐기해 독립 바로 바꿨다.
   페이지 머리 바로 아래 붙고, 스크롤하면 헤더 바 밑에 붙는다 */
@media (min-width: 1024px) {
  .pf-nav__step a {
    align-content: center;
    justify-items: center;
    height: var(--pf-nav-h);
    padding: var(--sp-2) var(--sp-4);
    text-align: center;
  }

  /* 누를 수 있는 칸: 마우스를 올리면 한 단계 밝아진다 (활성 단계 강조는 그대로) */
  .pf-nav__step a:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--white);
  }
}

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

/* 파트 제목(Leoverse · Digital Twin · 직접 제조).
   2026-09-29: 다른 페이지 h2 와 같은 --fs-2xl 로 내렸다. 종전 clamp(24–38px)는
   ① 1440px 이상에서 상세 페이지 h1(28–36px)보다 커 계단이 뒤집혔고
   ② 같은 페이지의 다른 h2(선언 없음 → 22–26px)와 달라 "h2 가 두 크기" 였다.
   굵기도 650 → 600 (650 은 브랜드 이름 표기 전용으로 돌렸다).
   색은 --pf-title-ink(#3C4149) 폐기 → --ink. 제목을 본문보다 흐리게 두는 것은
   "위계는 색이 아니라 크기·굵기로" 원칙의 반대였고, h3 는 이미 --ink 라 역전이었다.
   음수 자간도 걷었다 — base.css 의 H1·H2 는 --ls-tight(0)이고 한글은 어절이 붙어 읽힌다 */
.pf-part__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

/* Leoverse 로고 락업 (2026-09-28 정식 파일). 락업은 'BY TWYNBIT' 엔도스먼트를 포함해
   가로 855 × 세로 200 이라 종전 워드마크보다 세로가 두껍다. 높이가 아니라 **폭**으로 잡는다.
   가로 락업 최소 160px (브랜드 가이드) */
.pf-part__logo {
  display: block;
  width: clamp(11rem, 19vw, 16rem); /* 파트 제목과 함께 한 단계 줄였다 (2026-09-28) */
  height: auto;
}

/* ---------- 4계층 아키텍처 (2026-09-23 신설 — 덱 슬4) ----------
   그림은 사용자 제공 PNG 다 (SVG 재제작은 같은 날 철회). 원본이 820px 뿐이라 그 이상으로 키우지 않는다.
   계층 이름·설명은 그림 밖 텍스트로 둬야 국·영문이 토글되고 스크린리더가 읽는다 */
/* 2026-09-28 사용자 요청: 왼쪽 절반은 글, 오른쪽 절반은 그림.
   1024px 미만에서는 글 아래로 그림이 내려온다 */
.pf-arch {
  display: grid;
  gap: var(--sp-7);
  /* 2026-09-29 사용자 요청으로 좁혔다 (--sp-6 32px → --sp-2 8px).
     h3 의 아래 여백 16px 과 합쳐 24px 이다 */
  margin-top: var(--sp-2);
}

/* 그림은 1px 테두리로 감싸 바탕에 자연스럽게 앉힌다 */
.pf-stack {
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--line-on-light);
  border-radius: 2px;
  background-color: var(--white);
}

.pf-stack__img {
  display: block;
  width: 100%;
  max-width: 820px; /* 표시 크기는 그대로 둔다 (원본은 1640px 라 레티나에서 선명하다) */
  height: auto;
  margin-inline: auto;
}

/* 계층 목록: 상자 없이 행 위 1px 선만 (로드맵·Why 와 같은 문법) */
.pf-layers {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
}

.pf-layer {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-on-light);
}

/* 2026-09-28: 왼쪽 글 묶음 높이를 오른쪽 그림에 맞추려고 한 단계씩 줄였다 */
.pf-layer__term {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

.pf-layer__desc {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted-on-light);
}

@media (min-width: 1024px) {
  /* 글 : 그림 = 반반. 그림은 글 묶음 위쪽에 맞춰 붙는다 */
  .pf-arch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--sp-8);
  }
}


.pf-part__body {
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  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 · 실물 제조) 경계.
   **선 아래 여백은 사이트 전체에서 --sp-8(64px) 하나다** (2026-09-29 사용자 요청) —
   .pf-block(실시간 안전 소프트웨어 등)이 쓰는 값에 맞췄다. 섹션 기본 --section-y(80~152px)는
   선 바로 아래에서 너무 떨어져 보였다. 아래 여백은 --section-y 그대로 둔다 */
.pf-twin,
.pf-make {
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-on-light);
}


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

/* 2026-09-29 사용자 요청으로 한 단계 올렸다 (--sp-9 96px → --sp-7 48px) */
.pf-block__title--spaced {
  margin-top: var(--sp-7);
}

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

.pf-block__body {
  max-width: 62ch;
  margin-top: var(--sp-5);
  font-size: var(--fs-base);
  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;
}

/* 2026-10-06: 1px 선 SVG 도면을 사용자 제공 개념 이미지로 바꿨다.
   테두리·비율은 Digital Twin 카드(.twin-kind__img)와 같은 문법이다 */
.pf-board__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* 2026-10-06: 그림의 밝은 스튜디오 배경이 paper 와 붙어 경계가 사라졌다.
     --line-on-light(#D9DCE2)는 이 조합에서 묻히므로 Home 숫자 띠와 같은
     rgba(10,18,34,.14) 로 한 단계 진하게 두른다 */
  border: 1px solid rgba(10, 18, 34, 0.14);
}

/* 개념 이미지 고지 — .pf-twin__note 와 같은 값(12px · 가장 연한 회색 · 오른쪽 끝) */
.pf-board__note {
  margin-top: var(--sp-3);
  font-size: 0.75rem;
  line-height: var(--lh-snug);
  color: var(--text-note-on-light);
  text-align: right;
}

.pf-cores {
  margin: 0;
}

/* 코어 사이 간격이 곧 도면이 머무는 거리다 (2026-09-16 사용자 요청) */
.pf-core {
  /* 2026-09-29 사용자 요청으로 한 단계 좁혔다 (--sp-8 64px → --sp-7 48px) */
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--line-on-light);
}

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


.pf-core__part {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.pf-core__desc {
  max-width: 54ch;
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-muted-on-light);
}



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

/* h4 이므로 크기를 지정하지 않는다 — base.css 의 --fs-base(16px)를 받는다 (2026-09-29) */
.pf-sw__title {
  margin-bottom: var(--sp-4);
  color: var(--ink);
}

.pf-sw__body {
  max-width: 54ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  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;
}

/* 우선순위는 색이 아니라 **농도**로 (2026-09-29 — 파랑 면 3단을 걷었다).
   --ink(#0A1222 = 10,18,34) 기반 회색이라 .pf-driver__layer--fixed 와 같은 계열이 된다 */
.pf-queue__row--1 { background-color: rgba(10, 18, 34, 0.06); }
.pf-queue__row--2 { background-color: rgba(10, 18, 34, 0.03); }
.pf-queue__row--3 { background-color: transparent; }

.pf-queue__rank {
  flex: 0 0 auto;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted-on-light);
}

.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);
  /* 2026-09-29: 계층 이름(HAL·Platform Driver·Device Driver)은 데이터가 아니라
     항목 제목이라 본문 글꼴을 쓴다 (.pf-roadmap__stage 가 2026-09-28 에 같은 이유로 뗐다) */
  font-family: var(--font-sans);
  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, 18, 34, 0.03);
}

/* 아래 한 층만 강조하므로 테두리를 사방 똑같이 두른다 (2026-09-16 사용자 요청).
   층끼리 테두리를 겹쳐 쓰는 규칙(.pf-driver__layer + .pf-driver__layer)이 더 구체적이라
   같은 구체성으로 윗변을 되살린다. 위 층과 1px 겹쳐 두 겹으로 보이지 않게 한다 */
/* 2026-09-29: 파랑 면·파랑 테두리를 걷고 "여기만 교체된다"를 **선 농도**로만 준다.
   margin-top: -1px 는 유지 — 지우면 위 층과 테두리가 두 겹으로 보인다 */
.pf-driver__layer + .pf-driver__layer--swap {
  margin-top: -1px;
  border: 1px solid var(--ink);
}

.pf-driver__tag {
  /* 2026-09-28: --font-body 는 폐기된 토큰이라 값이 없었다. 본문 글꼴로 되돌린다 */
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  /* 2026-10-06 사용자 요청: 층 이름보다 한 단계 연한 회색으로 물린다.
     각주용 --text-note-on-light(#646B78, paper 4.92:1)가 AA 를 지키는 가장 연한 회색이다.
     --steel-grey(4.43:1)로 더 연하게 가지 않는다 — 13px 글자라 AA 미달이 된다 */
  color: var(--text-note-on-light);
}

/* ---------- 1-3. 개방형 SDK — API 4종 ----------
   2026-09-21: 허브 배선 도식을 1px 선 2열 목록으로 바꿨다 (배선은 정보를 더하지 않는 장식이었다) */
.pf-apis {
  margin-top: var(--sp-6);
}

.pf-apis__row {
  display: grid;
  gap: var(--sp-1) var(--sp-5);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line-on-light);
}

.pf-apis__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.pf-apis__target {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted-on-light);
}

@media (min-width: 1024px) {
  .pf-apis__row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: baseline;
  }
}

/* ---------- PART 2 · Digital Twin ---------- */
.pf-twin__kinds {
  display: grid;
  justify-items: center; /* 카드를 이미지 폭에 맞춰 줄이고 가운데로 (2026-09-17 사용자 요청) */
  gap: var(--sp-5);
  margin: var(--sp-5) 0 0; /* 2026-09-17 사용자 요청: 앞 문장과 그림 사이를 좁힌다 */
  padding: 0;
  list-style: none;
}

/* 박스는 이미지 폭에 맞춰 줄인다. 이미지가 박스 안 가운데에 놓인 것처럼 보이게 (2026-09-17 사용자 요청) */
.twin-kind {
  width: 100%;
  max-width: 420px;
  padding: var(--sp-5);
  border: 1px solid var(--line-on-light);
}

/* 화살표는 도형 하나 — 1024px 미만에서는 감춘다 */
.twin-kind__arrow {
  display: none;
}

/* 대표 이미지 (2026-09-17): 사용자 제공 AI 생성 개념 이미지. 두 장 모두 같은 3:2.
   실제 제품 사진이 아니므로 아래에 개념 이미지임을 밝힌다 (출처 표기가 아니라 고지) */
.twin-kind__media {
  margin: 0 0 var(--sp-4);
}

/* 2026-09-17 사용자 요청: 이미지가 너무 커서 폭을 줄인다 */
.twin-kind__img {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line-on-light);
}

/* 고지 문구는 두 카드 아래 오른쪽에 한 번만 (2026-09-17 사용자 요청) */
.pf-twin__note {
  /* 두 카드와 같은 폭 안에서 오른쪽 끝에 맞춘다 */
  max-width: calc(420px * 2 + var(--sp-7));
  margin-top: var(--sp-3);
  margin-inline: auto;
  /* 2026-09-29 사용자 요청: 본문보다 확실히 물러나게 — 한 단계 작고(13 → 12px)
     연한 회색이다. 사이트에서 이 색을 쓰는 유일한 곳이다 */
  font-size: 0.75rem;
  line-height: var(--lh-snug);
  color: var(--text-note-on-light);
  text-align: right;
}

.twin-kind__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.twin-kind__rows {
  margin: 0;
}

.twin-kind__rows > div {
  display: grid;
  gap: 1px;
  padding: var(--sp-2) 0; /* 2026-09-17 사용자 요청: 행간을 좁힌다 */
  border-top: 1px solid var(--line-on-light);
}

.twin-kind__rows dt {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-muted-on-light);
}

.twin-kind__rows dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  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-md);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

/* 2026-09-29 사용자 요청: 번호를 제목과 **같은 글씨**로 둔다 — 크기·색·글꼴을 따로 주지 않고
   .pf-step__name 의 값을 그대로 상속받는다 (종전 mono · --fs-caption · 보조색은 폐기) */
.pf-step__name::before {
  content: counter(pf-verify);
  margin-right: 0.6em;
}

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

/* 1024px 이상은 줄바꿈 없이 한 줄로 길게 (2026-09-17 사용자 요청). 상자는 문장 폭에 맞춘다.
   상자와 글자 모두 가운데 정렬 (2026-09-17 사용자 요청) */
.pf-twin__statement {
  max-width: 62ch;
  margin-top: var(--sp-7);
  margin-inline: auto;
  text-align: center;
  padding: var(--sp-5);
  /* 2026-09-29: 파랑 테두리를 걷고 강조는 크기·굵기·가운데 정렬이 맡는다 */
  border: 1px solid var(--line-on-light);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ink);
}

@media (min-width: 1024px) {
  .pf-twin__statement {
    width: fit-content;
    max-width: none;
    white-space: nowrap;
  }
}

/* 1024~1279px: 영문 문장이 한 줄로 들어가도록 상자 안쪽 좌우 여백만 줄인다 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pf-twin__statement {
    padding-inline: var(--sp-4);
  }
}

/* 640px 이상: 디지털 트윈 두 종류를 **가로로 나란히**, 검증 4단계를 2열로.
   2026-09-29: 이 블록은 data-pf-draw 규칙을 지울 때 실수로 함께 삭제됐다가 복구한 것이다
   (그 사이 두 카드가 세로로 쌓이고 화살표가 사라져 있었다) */
@media (min-width: 640px) {
  /* 부품 검증 → 운영 시뮬레이션: 시간 순서를 화살표로 잇는다.
     두 카드는 가운데 선을 기준으로 좌우 대칭이다 (2026-09-17 사용자 요청) */
  .pf-twin__kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-7);
  }

  .twin-kind--parts {
    justify-self: end;
  }

  .twin-kind--ops {
    position: relative;
    justify-self: start;
  }

  /* 부품 → 운영: 두 박스 사이 한가운데에 놓인다 */
  .twin-kind__arrow {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(var(--sp-7) * -0.5 - 1px);
    width: 32px;
    height: 22px;
    fill: var(--deep-navy); /* 로고 딥네이비 (2026-09-17 사용자 요청) */
    transform: translate(-50%, -50%);
  }

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

/* Vision & Goals(.pf-goals* · .pf-goal*)는 2026-10-06 사용자 요청으로 마크업과 함께 걷어냈다.
   헤드라인·맺음말·Contact Us 버튼은 Partners 페이지(.partners-close*)로 옮겼다 */

/* ---------- PART 3 · 직접 제조 ----------
   2026-09-21 승격: 얇은 밴드였던 것을 Digital Twin 과 나란히 읽히는 파트로 올렸다.
   제목·리드는 .pf-part__* 를 그대로 쓰므로 여기서는 로드맵과 맺음말만 정의한다 */
.pf-make {
  border-top: 1px solid var(--line-on-light);
}

/* 실행 로드맵(.pf-roadmap*)은 2026-10-06 사용자 요청으로 마크업과 함께 걷어냈다 */

@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;
    /* 헤더 바 + 단계 버튼 칸(아래 여백 포함) 아래로.
       2026-09-28: 격자 시스템을 폐기하면서 --grid-inset-top 이 사라져 calc 전체가 무효가 됐고,
       top 이 auto 가 되면서 도면이 따라오지 않았다. 남은 토큰만으로 다시 계산한다 */
    top: calc(var(--header-h) + var(--pf-nav-h) + var(--sp-6));
    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));
  }

}

/* ---------- 영문판 전용 (2026-10-01 사용자 요청) ----------
   영문이 국문보다 길어 마크업이 지정한 자리가 아닌 데서 줄이 접혔다.
   `pre-line` 으로 지정한 자리를 살리고, 그 줄이 들어갈 만큼만 폭을 넓힌다.
   **국문은 건드리지 않는다.** 값을 바꾸면 각 문장이 1280~1920px 에서
   **정확히 두 줄**인지 다시 재야 한다 */
html[lang="en"] .pf-part__body,
html[lang="en"] .pf-block__lead {
  max-width: 92ch;
  white-space: pre-line;
}