/* Hallmark · macrostructure: Evidence Ladder · genre: modern-minimal
 * direction: 한 도형 (2026-09-26) — 따뜻한 회색 캔버스 + 흑백 부품 · Geist + Pretendard · 스프링 셋
 * hero: 한 도형 무대(morph.js) — 도형 하나가 아홉 장면을 지난다
 * tone: utilitarian-technical (검증 가능한 주장만)
 * nav: N9 edge-aligned · footer: Ft5 statement
 * enrichment: 실제 제품 스크린샷 1장 (가짜 크롬 0 — 게이트 47)
 * design-system: design.md (상속 + 이번에 Marketing 절을 다시 씀)
 * tokens: ./tokens.css · 활자 5단 · 마케팅 표면 분리(버튼 46px/r8)
 * 교체 근거: 기업 사이트 8곳 URL 모드 해부 + 자체 실측
 *   (이전) 섹션 9개 중 7개 같은 좌우 분할 · 제목 크기 2종 · 가짜 터미널 창 6개
 *   (지금) 증거 형식 6종이 한 번도 연속되지 않음 · 제목 5단 · 가짜 크롬 0
 * 검증: 320/375/1280 가로 스크롤 없음 · 라이트·다크 AA 미달 0건(최저 5.56)
 *       한국어 어절 보존(word-break: keep-all)
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

/* 폰트를 우리 도메인에서 준다. 예전에는 jsDelivr CDN 에서 불러왔는데,
   **국외이전 고지를 논증하는 페이지**에서 방문자 IP 가 서드파티로 가는 것은
   그 자체로 논지에 난 구멍이다. 수령자를 특정할 수 있다고 적어 놓고 우리
   페이지가 수령자를 하나 더 만들고 있었다.
   동적 서브셋이라 92개 파일이 있어도 브라우저는 이 페이지에 실제로 쓰인
   글자의 서브셋만 받는다. SIL OFL 1.1 — font/LICENSE.txt */
@import "./font/geist.css";
@import "./font/pretendard.css";
@import "./tokens.css";

/* 랜딩 전용 한글 글꼴 — 이 페이지에 **실제로 쓰인 글자만**(473자) 담은 Pretendard 한 벌, 123KB(2026-09-26).
   전에는 글자 범위별 조각(pretendard.css)을 한 번 열 때 25조각 · 671KB 받았다. 여기 없는 글자(글을 고쳤는데
   scripts/landing-font-subset.py 를 안 돌렸을 때, 문의 칸에 적는 글)는 글꼴 목록의 다음 — 조각으로 받는
   "Pretendard Variable" — 이 그린다. 깨지지 않고, 그만큼만 더 받는다. */
@font-face {
  font-family: "Pretendard Landing";
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: url(./font/pretendard-landing.woff2) format("woff2-variations"),
       url(./font/pretendard-landing.woff2) format("woff2");
}

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

html {
  /* 어느 폭에서도 가로 스크롤이 생기면 안 된다. clip 이어야 sticky 가 산다. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-style: normal;          /* 제목은 언제나 로만 */
  letter-spacing: -0.03em;
  line-height: 1.14;
  text-wrap: pretty;
  /* 한국어는 어절 단위로 끊는다. overflow-wrap:anywhere 만 두면 "열어"가
     "열 / 어"로 갈라진다 — 라틴 문자 기준 규칙을 그대로 쓰면 생기는 일이다.
     keep-all 이 어절을 지키고, break-word 는 한 어절이 줄보다 길 때만 개입한다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  min-width: 0;
}

p { margin: 0; word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 숫자는 세로로 정렬되어야 한다 — 단가·건수 전부. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── 레이아웃 ─────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* 내용보다 여백이 크면 페이지가 비어 보인다. 실측으로 섹션마다 120~180px 이
   아무것도 없이 남았다. 화면 폭에 따라 늘되 상한을 낮춘다. */
.band { padding-block: clamp(var(--space-2xl), 6vw, var(--space-3xl)); }
.band + .band { border-top: var(--rule); }
.band--tint { background: var(--color-paper-2); }

/* Split Studio 의 골격: 주장 | 증거. 방향은 섹션마다 번갈아 뒤집는다. */
.diptych {
  display: grid;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .diptych { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .diptych--flip > :first-child { order: 2; }
}

/* ── 상단 바 (N9 edge-aligned) ─────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: var(--space-sm);
  background: color-mix(in oklab, var(--color-paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: var(--rule);
}

/* 헤더 안쪽. 본문과 **같은 shell** 을 쓰므로 로고의 왼쪽 선과 히어로 제목의
   왼쪽 선이 맞고, 버튼의 오른쪽 선이 본문 오른쪽 끝과 맞는다.
   메타 문구가 가운데를 밀고, 나머지는 양끝으로 간다. */
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
/* 자동 여백은 **항상 있는 요소**에 건다. 메타 문구는 좁은 화면에서
   display:none 이라, 거기에 걸면 그 폭에서 정렬이 통째로 무너진다. */
.topbar__inner .theme { margin-left: auto; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  text-decoration: none;
}
.wordmark em { font-style: normal; color: var(--color-accent); }

.topbar__meta {
  display: none;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
@media (min-width: 48rem) { .topbar__meta { display: block; } }

/* 밝기 전환 버튼. 주 동작(도입 문의) 옆에 서므로 조용해야 한다 —
   같은 무게로 그리면 무엇을 눌러야 하는지가 흐려진다. */
.theme {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--color-rule); border-radius: var(--radius-md);
  background: transparent; color: var(--color-ink-2);
  font: inherit; font-size: var(--text-xs); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.theme:hover { border-color: var(--color-rule-strong); color: var(--color-ink); }
.theme__dot {
  width: 0.7rem; height: 0.7rem; border-radius: 999px;
  border: 1px solid currentColor;
  /* 반달. 지금이 어느 쪽인지를 글자 없이도 알린다. */
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.theme[aria-pressed="true"] .theme__dot { transform: rotate(180deg); }
/* 좁은 화면에서는 글자를 접는다. 점만으로 뜻이 선다. */
@media (max-width: 32rem) { .theme__label { display: none; } }
/* 인쇄물에는 화면 조작 장치가 있을 이유가 없다. */
@media print { .theme { display: none; } }

/* ── 버튼 ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  /* 클릭 가능한 글자는 두 줄로 감기면 안 된다. */
  white-space: nowrap;
  /* 앱 버튼을 상속하지 않는다 — design.md / Marketing / 표면 분리. */
  min-height: var(--btn-h-marketing);
  padding: 0 1.35rem;
  border-radius: var(--radius-btn-marketing);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  /* 색은 quick, 누름의 크기는 snappy 스프링(design.md "Motion"). */
  transition: background-color var(--dur-quick) var(--spring-quick),
              border-color var(--dur-quick) var(--spring-quick),
              scale var(--dur-snappy) var(--spring-snappy);
}
.btn:active { scale: 0.97; }
/* 누를 것은 잉크색 알약이다 — 액센트 색은 없다. */
.btn--primary { background: var(--color-ink); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-ink) 84%, var(--color-paper)); }
.btn--quiet {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
}
.btn--quiet:hover { background: var(--color-paper-3); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ── 히어로 ───────────────────────────────────────────────── */

/* 세로 여백을 줄인다. 예전 값은 첫 화면에 제목만 들어오던 시절의 것이다 —
   지금은 카드·숫자·티커가 함께 들어와야 한다. */
.hero { padding-block: clamp(var(--space-2xl), 5.5vw, var(--space-3xl)); }

.hero__kicker {
  display: inline-block;
  margin-bottom: var(--space-lg);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: var(--rule);
  background: var(--color-card);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero h1 { font-size: var(--text-display); font-weight: 750; letter-spacing: -0.045em; }
/* 두 가지 잉크: 첫 줄은 옅게, 주장하는 줄은 진하게. 색 없이 무게로 강조한다(design.md — 액센트 없음).
   옅은 쪽도 대비 5.4:1 이다 — 큰 글자 기준(3:1)보다 넉넉하다. */
.hero h1 .dim { color: var(--color-ink-3); }
/* 주장하는 구절 하나만 브랜드 파랑 — 첫 화면에서 색이 서는 자리는 여기 하나다. */
.hero h1 .accent { color: var(--color-accent); }

.hero__lede {
  margin-top: var(--space-lg);
  max-width: 34rem;
  font-size: var(--text-lg);
  line-height: 1.72;
  color: var(--color-ink-2);
}

.hero__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hero__note {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* ── 장(章) 전환 ──────────────────────────────────────────
   한 문장짜리 짧은 섹션. 앞뒤의 긴 섹션 사이에서 숨을 만든다.
   모든 섹션이 같은 높이로 흐르면 스크롤에 리듬이 없다
   (design.md — Marketing / Evidence Ladder 규칙 3). */

.chapter {
  padding-block: var(--space-3xl);
}
.chapter p {
  max-width: 17em; /* ch 는 라틴 '0' 폭이라 한글에서 어긋난다. 1em ≈ 한글 한 자. */
  word-break: keep-all;
  margin: 0;
  font-size: var(--text-chapter);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  text-wrap: balance;
}
.chapter p .quiet { color: var(--color-ink-3); font-weight: 500; }

/* ── 증거 형식 ────────────────────────────────────────────
   design.md — Marketing / 증거 제시.

   이전 구현은 타이틀바가 달린 가짜 터미널 창 6개였다. 조사한 기업 사이트 8곳
   (Anthropic·Linear·Vercel·Modal·Baseten·Stripe·Upstage·Resend) 중 가짜 크롬을
   쓰는 곳은 하나도 없었다. 그리고 우리 증거는 4~7줄, 최대 44자다 — 창으로
   감싸면 크롬이 내용보다 커진다.

   형식은 여섯 가지이고 **연속으로 같은 것이 오면 안 된다**:
   (a) 큰 숫자 .figure-lead  (b) 표 .ledger  (c) 명령 출력 .readout
   (d) 제품 스크린샷 .shot   (e) 단계 목록 .step  (f) 폼 */

/* (c) 명령 출력 — 창을 그리지 않는다. 좌측 헤어라인과 등폭 글꼴이면 충분하다. */
.readout {
  margin: 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-rule-strong);
}
.readout__cmd {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  overflow-wrap: anywhere;
}
.readout pre {
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-ink-2);
  white-space: pre;
}
.readout pre b { color: var(--color-ink); font-weight: 600; }
.readout pre .ok { color: var(--color-positive); }
.readout pre .hi { color: var(--color-warn); }
.readout__stamp {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* (a) 큰 숫자 — 한 섹션의 논지가 숫자 하나로 끝날 때. 활자가 곧 그림이다. */
.figure-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md);
  margin: 0;
}
.figure-lead__n {
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}
.figure-lead__n--was {
  color: var(--color-ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.figure-lead__arrow { font-size: var(--text-chapter); color: var(--color-ink-3); }
.figure-lead__unit { font-size: var(--text-sub); color: var(--color-ink-2); }

/* (d) 제품 스크린샷 — 프레임을 그리지 않는다. 헤어라인까지만. */
.shot {
  margin: 0;
  border: var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-paper-2);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot figcaption {
  padding: var(--space-sm) var(--space-md);
  border-top: var(--rule);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

/* 표 형태 증거 — 좁은 화면에서 셀을 글자 단위로 쪼개지 않는다.
   폭을 줄이는 대신 감싸는 요소 안에서 가로로 스크롤한다. */
.ledger {
  width: 100%;
  min-width: 21rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.ledger td:first-child { white-space: nowrap; }
.ledger th, .ledger td {
  padding: 0.55rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-rule);
}
.ledger th {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-3);
  letter-spacing: 0.02em;
}
.ledger td:not(:first-child), .ledger th:not(:first-child) { text-align: right; }
.ledger tr:last-child td { border-bottom: 0; }
.ledger .up { color: var(--color-warn); }

/* ── 섹션 제목 ────────────────────────────────────────────── */

.sect__title {
  font-size: var(--text-section);
  font-weight: 750;
  max-width: 17em; /* ch 는 라틴 '0' 폭이라 한글에서 어긋난다. 1em ≈ 한글 한 자. */
}
/* 소제목 — 위계 4단. 섹션 제목과 본문 사이. */
.step__title, .sub { font-size: var(--text-sub); font-weight: 700; }
.sect__body {
  margin-top: var(--space-md);
  max-width: 38rem;
  color: var(--color-ink-2);
  line-height: 1.75;
}
.sect__list { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.sect__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  color: var(--color-ink-2);
}
.sect__list .mark {
  margin-top: 0.55em;
  width: 14px;
  height: 1px;
  background: var(--color-accent-line);
}

/* ── 모델 목록 ────────────────────────────────────────────── */

/* 제작사 격자.
   알약 20개를 흘려 두면 줄바꿈이 제멋대로라 목록이 아니라 태그 뭉치로 보인다.
   히어로의 블루프린트 격자와 같은 규칙(1px 헤어라인 칸)으로 세운다 —
   페이지 안에서 같은 언어를 두 번 쓰는 편이 새 장식을 하나 더 만드는 것보다 낫다.

   **마크가 없는 곳은 이름을 활자로 세운다.** CC0 아이콘 세트에 20곳 중 12곳만
   있고(OpenAI 는 상표 문제로 빠져 있다), 12개만 로고로 두면 나머지 8곳이
   빠진 것처럼 보인다. 칸 크기·색·광학 크기를 같게 맞춰 한 벌로 읽히게 한다. */
.makers {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--bp-hair);
  border-left: 1px solid var(--bp-hair);
}
@media (min-width: 30rem) { .makers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 48rem) { .makers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .makers { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.makers li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.85rem;
  border-right: 1px solid var(--bp-hair);
  border-bottom: 1px solid var(--bp-hair);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  transition: color 180ms var(--m-ease), background 180ms var(--m-ease);
}
.makers li:hover { color: var(--color-ink); background: var(--color-card); }
.makers svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: currentColor; opacity: 0.9;
}
.makers li:hover svg { opacity: 1; }
/* 사카나만 래스터다(벡터를 못 구했다). 20px 에서는 구분되지 않지만,
   색을 CSS 로 못 입히므로 잉크색을 이미지에 구워 두었다. */
.makers img { width: 20px; height: 20px; flex: 0 0 auto; opacity: 0.9; }
.makers li:hover img { opacity: 1; }

.figures {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.figure__n {
  font-size: var(--text-2xl);
  font-weight: 750;
  letter-spacing: -0.04em;
}
.figure__label {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* ── 절차 ─────────────────────────────────────────────────── */

.steps { margin-top: var(--space-xl); display: grid; gap: 0; }
.step {
  display: grid;
  /* **자리를 명시한다.** 예전에는 `auto minmax(0,1fr)` 에 자식을 셋 넣어
     흐르게 뒀는데, 그러면 번호(1열·1행) · 제목(2열·1행) · 설명(1열·2행) 로
     배치되고 `auto` 열이 설명 길이만큼 벌어진다. 그 결과 제목이 화면
     오른쪽 끝으로 밀렸다 — 스크린샷으로 확인한 실제 증상이다. */
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-top: var(--rule);
}
.step > .step__n { grid-column: 1; grid-row: 1 / span 2; }
.step > .step__title { grid-column: 2; grid-row: 1; }
.step > p { grid-column: 2; grid-row: 2; }
.step:last-child { border-bottom: var(--rule); }
.step__n {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent);
  padding-top: 0.15em;
}
.step h3 { font-size: var(--text-lg); font-weight: 700; }
.step p { margin-top: var(--space-2xs); color: var(--color-ink-2); }

/* ── 문의 폼 ──────────────────────────────────────────────── */
/* 2026-09-27 다시 그림: 폼은 입력창과 같은 흰 카드 안에. 칸의 높이를 맞추고(46px — 예전에는 고르는 칸만 42px 로
   어긋났다), 고르는 칸 · 동의 칸 · 글 속 링크도 브라우저 기본 모양이 아니라 이 페이지의 모양으로. */
.inquiry__card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: var(--rule);
  border-radius: var(--radius-xl);
  background: var(--color-card);
  box-shadow: var(--shadow-float);
}
.inquiry__gets { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.inquiry__gets li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.inquiry__gets i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: var(--rule);
  border-radius: 12px;
  background: var(--color-card);
  color: var(--color-accent);
}
.inquiry__gets svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.inquiry__gets span { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2); word-break: keep-all; }
.inquiry__gets b { display: block; font-size: var(--text-base); font-weight: 650; color: var(--color-ink); }
.inquiry__direct { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.inquiry__direct a,
.consent a {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-quick) var(--spring-quick);
}
.inquiry__direct a:hover, .consent a:hover { text-decoration-color: currentColor; }

.form { display: grid; gap: var(--space-md); }
.form[hidden] { display: none; }
/* align-content: start — 옆 칸이 더 길면(도움말 줄) 이 칸의 줄이 늘어나 입력칸이 아래로 밀렸다(예전 화면의 어긋남). */
.field { display: grid; gap: 6px; align-content: start; }
.field > label { font-size: var(--text-sm); font-weight: 600; }
.field__hint { font-size: var(--text-xs); color: var(--color-ink-3); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 14px;
  background: var(--color-field);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field input, .field select { height: 46px; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-ink-3); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--color-ink-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-focus) 18%, transparent);
  outline: none;
}
.field textarea { min-height: 7.5rem; padding-block: 12px; line-height: 1.6; resize: vertical; }
.field[data-state="error"] input,
.field[data-state="error"] textarea { border-color: var(--color-warn); }
.field__error { font-size: var(--text-xs); color: var(--color-warn); }

/* 고르는 칸 — 브라우저의 화살표 대신 이 페이지의 ▾(글자색을 따라 어두운 화면에서도 보인다). */
.select { position: relative; }
.field .select select { appearance: none; padding-right: 42px; cursor: pointer; }
.select__chev {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  translate: 0 -50%;
  fill: none;
  stroke: var(--color-ink-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* 동의 줄. 체크박스는 글줄 첫 칸에 고정하고 문장은 그 옆에서 접힌다 —
   자연 배치에 맡기면 두 번째 줄이 체크박스 아래로 흘러 들어간다. 상자는 이 페이지의 모양(반경 6 · 켜면 파랑). */
.field--consent { margin-top: 2px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; }
.consent input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--color-rule-strong);
  border-radius: 6px;
  background: var(--color-field);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--spring-quick), border-color var(--dur-quick) var(--spring-quick);
}
.consent input::after {
  content: "";
  width: 10px;
  height: 5.5px;
  border-left: 2px solid var(--color-accent-ink);
  border-bottom: 2px solid var(--color-accent-ink);
  rotate: -45deg;
  translate: 0 -1px;
  scale: 0;
  transition: scale var(--dur-snappy) var(--spring-snappy);
}
.consent input:checked { border-color: var(--color-accent); background: var(--color-accent); }
.consent input:checked::after { scale: 1; }
.consent input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.consent span { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.65; }
.consent b { color: var(--color-ink); font-weight: 600; }
.field[data-state="error"] .consent input { border-color: var(--color-warn); outline: 2px solid var(--color-warn); outline-offset: 2px; }

.form__row { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form__submit-row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; margin-top: 4px; }
@media (max-width: 40rem) { .form__submit-row .btn { width: 100%; } }
.form__status {
  min-height: 1.25rem;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.form__status[data-state="ok"] { color: var(--color-positive); }
.form__status[data-state="error"] { color: var(--color-warn); }

/* 접수 확인 — 폼 자리에 같은 카드로. 파랑 원의 ✓ 가 이 절에서 한 번뿐인 강조다. */
.inquiry__done { display: grid; justify-items: start; gap: 10px; padding-block: var(--space-md); outline: none; }
.inquiry__done[hidden] { display: none; }
.inquiry__check {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.inquiry__check svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.inquiry__done h3 { margin: 6px 0 0; font-size: var(--text-xl); font-weight: 750; letter-spacing: -0.02em; }
.inquiry__done p { margin: 0; font-size: var(--text-base); line-height: 1.7; color: var(--color-ink-2); }
.inquiry__done .quiet { color: var(--color-ink-3); }
.inquiry__done b { color: var(--color-ink); font-weight: 600; word-break: break-all; }
.inquiry__done .btn { margin-top: var(--space-sm); }

.privacy {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink-3);
}

/* ── 푸터 (Ft5 statement) ─────────────────────────────────── */

.footer { border-top: var(--rule); padding-block: var(--space-2xl); }
.footer__statement {
  font-size: var(--text-xl);
  font-weight: 700;
  max-width: 18em; /* 위와 같은 이유 */
  letter-spacing: -0.03em;
}
/* 사업자정보 — 대학 구매 담당자가 실제로 찾는 항목이다.
   라벨과 값을 한 줄로 붙여 두어 눈이 훑고 지나갈 수 있게 한다. */
.company {
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: var(--space-2xs) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
@media (min-width: 40rem) {
  .company { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .company { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.company__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
}
.company dt { color: var(--color-ink-3); }
.company dd {
  margin: 0;
  color: var(--color-ink-2);
  overflow-wrap: anywhere;
}
.company a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.company a:hover { color: var(--color-accent); }

.footer__meta {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.footer__meta a { color: inherit; }

/* 모바일에서 손가락으로 누를 수 있어야 한다. 15px 짜리 링크는 글자 높이만큼만
   눌리는데, 그건 실제로 못 누른다는 뜻이다. 세로 여백으로 44px 를 만든다. */
@media (max-width: 767px) {
  .footer__meta a,
  .privacy a,
  .company__row dd a {
    display: inline-block;
    padding-block: var(--space-sm);
    min-height: 44px;
    line-height: 28px;
  }
}

/* ── 모션: 상태 전환만. 등장 애니메이션은 쓰지 않는다. ────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* 표 캡션은 화면에서 감추되 스크린리더에는 남긴다. display:none 이면 읽히지도 않는다. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 표는 좁은 화면에서 셀을 글자 단위로 쪼개지 않는다 — 대신 이 컨테이너 안에서
   가로로만 스크롤한다. 페이지 전체는 overflow-x:clip 이라 이 래퍼가 없으면
   표가 그냥 잘려 보이지 않는다(320px 에서 실제로 그랬다). */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 스크롤 가능한 영역임을 키보드 사용자에게도 알린다. */
  scrollbar-width: thin;
}
.table-scroll:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }


/* (g) 정의 목록 — 과금 구조처럼 "항목: 설명"이 반복되는 내용.
   표로 만들면 좁은 화면에서 스크롤이 생기고, 불릿으로 만들면 항목 이름이
   문장에 묻힌다. dl 이 이 모양에 정확히 맞는 요소다. */
.facts {
  margin: var(--space-lg) 0 0;
  display: grid;
  gap: 0;
}
.facts > div {
  display: grid;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-sm);
  border-top: var(--rule);
}
.facts > div:last-child { border-bottom: var(--rule); }
@media (min-width: 40rem) {
  .facts > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}
.facts dt {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}
.facts dd {
  margin: 0;
  color: var(--color-ink-2);
  line-height: 1.7;
}

/* (h) 문답 — 검토자가 먼저 묻는 것. 아코디언으로 접지 않는다.
   접으면 스캔하는 사람이 답을 못 보고, 이 페이지에서 답은 숨길 것이 아니다. */
.qa {
  margin: var(--space-xl) 0 0;
  display: grid;
  gap: 0;
  max-width: 52rem;
}

/* 넓은 화면에서는 두 단. 한 단으로 두면 폭의 68% 만 쓰고 오른쪽 30% 가
   비어서, 질문 여덟 개가 화면 두 개 분량으로 늘어진다(실측 1080px).
   답변 폭은 그대로 44rem 아래라 한 줄이 길어지지도 않는다. */
@media (min-width: 68rem) {
  .qa {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  /* 두 단이 되면 "마지막 항목"이 둘이라, 아래 선을 개별로 그리면 어긋난다.
     전부 위에 긋고 마지막 두 개에만 아래를 긋는다. */
  .qa > div:last-child,
  .qa > div:nth-last-child(2) { border-bottom: var(--rule); }
}
.qa > div {
  padding-block: var(--space-lg);
  border-top: var(--rule);
}
.qa > div:last-child { border-bottom: var(--rule); }
.qa dt {
  font-size: var(--text-sub);
  font-weight: 700;
  color: var(--color-ink);
  word-break: keep-all;
}
.qa dd {
  margin: var(--space-sm) 0 0;
  max-width: 44rem;
  color: var(--color-ink-2);
  line-height: 1.78;
  word-break: keep-all;
}


/* 블루프린트 격자(motion.css)가 히어로 배경으로 깔리므로, 내용이 그 위에 온다.
   z-index 를 안 주면 격자가 텍스트를 덮지는 않지만 앵커·버튼이 안 눌린다. */
.hero > .shell { position: relative; z-index: 1; }

/* ── 수령자 축소: 59 → 16 ─────────────────────────────
   이 페이지에서 가장 강한 주장이라 숫자 두 개로 두지 않는다.
   왼쪽은 **이름 없는 칸 59개**다. 상류가 그때그때 고르므로 누가 받을지
   적을 수 없다는 사실이 그림 자체가 된다. 오른쪽 16개에는 이름이 있고,
   그 이름이 고지표에 그대로 들어간다.

   SVG 도 canvas 도 쓰지 않는다. 히어로 격자와 같은 헤어라인 언어다. */
.narrow {
  margin: 0;
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 34rem) {
  .narrow { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}
.narrow__k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-3);
}
.narrow__n {
  margin-top: 0.15rem;
  font-size: clamp(2.75rem, 6.5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* 좁히기 전은 회색이다. 강조하지 않는다 — 줄어든 쪽이 결론이다. */
.narrow__side .narrow__n { color: var(--color-ink-3); }
.narrow__side--after .narrow__n { color: var(--color-ink); }

.narrow__dots {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  max-width: 15rem;
}
.narrow__dots > i {
  aspect-ratio: 1;
  border-radius: 2px;
  /* 테두리만 두면 어두운 바탕에서 사라진다 — 실제로 빈 격자로 보였고,
     "이름을 댈 수 없는 59곳"이라는 뜻이 전혀 전달되지 않았다.
     채워야 오른쪽의 **이름 있는 16곳**과 대비가 선다. */
  background: color-mix(in oklab, var(--color-ink-3) 26%, transparent);
  border: 1px solid transparent;
  border-radius: 2px;
}

.narrow__list {
  margin-top: var(--space-md);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1px;
  background: var(--bp-hair);
  border: 1px solid var(--bp-hair);
}
.narrow__list li {
  padding: 0.4rem 0.55rem;
  background: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
/* 게이트웨이는 추론 공급자가 아니라 **전부를 지나는 곳**이다. 한 줄을 통째로
   내주고 구분한다 — 다른 칸과 같은 폭에 넣으면 이름이 잘려 줄바꿈이 깨진다. */
/* 이름이 15개(홀수)라 마지막 칸 옆이 빈다. 그 빈 자리는 컨테이너 배경이
   드러나 회색 상자로 보인다. 마지막 이름도 한 줄을 통째로 쓰게 한다. */
.narrow__list li:nth-last-child(2) { grid-column: 1 / -1; }
.narrow__gw {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--color-ink);
}
.narrow__gw span { color: var(--color-ink-3); white-space: nowrap; }

.narrow__note {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1.6;
}
.narrow__cap {
  grid-column: 1 / -1;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--bp-hair);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1.7;
}

/* ── 히어로: 문장 한 덩어리 + 전폭 스크린샷 판 ─────────
   예전에는 좌우 2열이었다. 오른쪽 570px 칸에 1440px 화면을 욱여넣으니
   글자가 하나도 안 읽혔고, **안 읽히는 스크린샷은 증거가 아니라 장식**이다.
   이 페이지의 논지가 "확인하실 수 있게"인데 확인할 수 없는 그림을 걸어 둔
   셈이었다. */
.hero__lead { max-width: 46rem; }
/* 제목은 <br> 로 두 줄을 잡아 뒀다. 본문 폭(46rem)에 묶으면 세 줄이 되고
   마지막 줄에 한 어절만 남는다. 제목만 폭을 푼다. */
.hero__lead h1 { max-width: 54rem; }

.shot--plate { margin-top: var(--space-2xl); }

.shot__stack { position: relative; }
.shot__stack img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--rule);
  border-radius: var(--radius-lg);
}

/* 확대 판. 새 이미지가 아니라 같은 PNG 의 일부를 background 로 다시 쓴다 —
   요청도 바이트도 늘지 않는다. 좌표는 원본 1440x900 기준 x=940 y=50
   w=380 h=300 이고, 육안으로 확인했다: 66 · 무제한 배지 · 모델별 단가가
   전부 들어온다. */
.shot__zoom {
  --z: 1.5;
  display: none;
  position: absolute;
  /* 큰 판의 오른쪽 아래를 물고 겹친다. 밴드 밖으로 크게 빠지면 잘려서
     잘린 조각으로 보인다. 살짝만 걸친다. */
  right: -1rem;
  bottom: -1.25rem;
  width: calc(var(--z) * 380px);
  height: calc(var(--z) * 300px);
  background-image: url("./img/shot-models.png");
  background-size: calc(var(--z) * 1440px) auto;
  background-position: calc(var(--z) * -940px) calc(var(--z) * -50px);
  border: var(--rule);
  border-radius: var(--radius-lg);
  /* 회전도 원근도 없다. 겹침과 그림자만으로 깊이를 만든다. */
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.55);
}
/* 겹칠 자리가 나오는 폭에서만 띄운다. 좁은 화면에서는 큰 판만으로 충분하다. */
@media (min-width: 64rem) { .shot__zoom { display: block; } }

/* ── 인쇄 ─────────────────────────────────────────────
   기관 담당자는 검토 자료를 **인쇄해서 결재에 올린다.** 지금 그대로 인쇄하면
   어두운 배경이 토너로 통째로 나가거나, 브라우저가 배경만 지워서 흰 종이에
   흰 글자에 가까운 것이 남는다. 둘 다 이 페이지가 결재 서류가 되는 것을
   막는다.

   경쟁 제품 페이지에는 인쇄 스타일이 없다. 종이에서 읽히는 쪽이 이긴다. */
@media print {
  :root {
    --color-bg: #fff;
    --color-bg-tint: #fff;
    --color-card: #fff;
    --color-ink: #111;
    --color-ink-2: #333;
    --color-ink-3: #555;
    --color-rule: #bbb;
    --color-rule-strong: #888;
    --color-accent: #1d58aa;
    --bp-hair: #ddd;
    --bp-tick: #bbb;
  }
  body { background: #fff; color: #111; }

  /* 화면 장치는 종이에서 의미가 없다. */
  .progress, .topbar, .bp__lines, .bp__tick, .hero__actions,
  .form, .footer__cta { display: none !important; }

  /* 등장 애니메이션의 숨김 상태가 종이에 그대로 굳으면 백지가 나온다. */
  [data-reveal], .line > i, .hero__kicker, .hero__lede,
  .hero__note, .shot, .narrow__list li {
    opacity: 1 !important;
    transform: none !important;
  }
  .lat__bar { transition: none !important; }

  /* 섹션이 페이지 경계에서 반으로 잘리지 않게. */
  .band { padding-block: 1.5rem; break-inside: avoid; }
  .shot, .readout, .narrow, table, .step { break-inside: avoid; }
  h1, h2 { break-after: avoid; }

  /* 종이에서는 링크 주소가 안 보인다. 뒤에 적어 준다. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a[href^="#"]::after { content: ""; }
}

/* 부하 시험 산점도. 캔버스는 스크립트가 성공한 뒤에만 hidden 이 풀린다. */
.lat__plot { display: block; width: 100%; margin-top: var(--space-md); }
.lat__plot[hidden] { display: none; }
.lat__rows[hidden] { display: none; }


/* ══ 히어로 ═════════════════════════════════════════════
   첫 화면은 문서가 아니라 **장면**이어야 한다 — 예전에는 그 일을 색 있는 그라디언트 밴드가 맡았다.
   이제는 무대(한 도형)가 장면이다. 캔버스는 따뜻한 회색 그대로 두고 그라디언트는 걷는다
   (design.md 금지 목록: UI 크롬의 그라디언트). */
.hero {
  position: relative;
  background: var(--color-paper);
  border-bottom: var(--rule);
}

/* 숫자 셋. 팩트챗은 여기에 "50만+ 유료 사용자 / 437개 도입 기관"을 적는다 —
   우리는 그런 실적이 없고, 없는 숫자를 적는 순간 이 페이지의 나머지 숫자도
   못 믿을 것이 된다. 대신 **다시 잴 수 있는 값**을 적는다. */
.hero__stats {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-lg);
  border-top: var(--rule);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  justify-content: start;
}
.hero__stats div { min-width: 0; }
.hero__stats dt {
  font-size: var(--text-sub);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero__stats dd {
  margin: 0.15rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-3);
}
.hero__stats .quiet { color: var(--color-accent); font-weight: 600; }

/* ── 제품 카드 ──────────────────────────────────────────
   스크린샷 PNG 를 버리고 HTML 로 만든다. PNG 는 어느 배율에서도 원본
   해상도에 묶여 흐렸고, 일부를 확대해 겹쳐 놓으니 두 판이 서로를 가렸다.
   여기서는 글자가 진짜 글자라 어느 화면에서도 선명하다. */
.pane {
  margin: 0;
  border: var(--rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
/* 판의 머리는 **이름표**다. 예전에는 신호등 점 셋을 그렸다 — 가짜 창 크롬(design.md 게이트 47)이라 뺐다. */
.pane__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 12px 20px;
  border-bottom: var(--rule);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-3);
}
/* 앱의 머리말처럼 — 굵은 워드마크(Q 는 로고처럼 파랑) · 가는 세로줄 · 화면 이름. */
.pane__head b { font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink); }
.pane__head b em { font-style: normal; color: var(--color-accent); }
.pane__head span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.pane__head span::before { content: ""; width: 1px; height: 12px; background: var(--color-rule-strong); }
.pane__body { padding: 0.85rem; }
.pane__search {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border: var(--rule);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}
.pane__search b { color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

.pane__list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.pane__list li {
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
}
.pane__list li + li { margin-top: 0.15rem; }
/* 고른 것 하나만 강조한다. 여럿을 강조하면 아무것도 강조되지 않는다. */
.pane__list .is-chosen {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-line);
}
.pane__row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.pane__row b { font-size: var(--text-sm); font-weight: 700; }
/* SVG 의 기본 fill 은 **검정**이지 currentColor 가 아니다. color 만 주면
   어두운 바탕에서 로고가 통째로 사라진다 — 실제로 그랬다. */
.pane__row svg { fill: currentColor; color: var(--color-ink-2); }
.pane__maker { font-size: var(--text-xs); color: var(--color-ink-3); }
.pane__badge {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 0.68rem;
  font-weight: 700;
}
.pane__badge--kr { background: var(--color-positive); }
.pane__list p {
  margin: 0.2rem 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  font-variant-numeric: tabular-nums;
}
.pane figcaption {
  padding: 0.75rem 0.9rem;
  border-top: var(--rule);
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-3);
}

/* ── 제작사 티커 ────────────────────────────────────────
   "69종"이 추상적인 숫자로 남지 않게 얼굴을 붙인다. */
.hero__ticker {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
}
.hero__ticker-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-3);
}
.hero__ticker ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: clamp(0.75rem, 2.2vw, 1.75rem);
}
.hero__ticker li {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-xs);
  color: var(--color-ink-2);
}
.hero__ticker svg { fill: currentColor; color: var(--color-ink-3); }

/* 좁은 화면에서는 무대가 제목 바로 아래, 본문보다 **위**에 선다(test_landing_hero.py — 제품 화면이 글 아래로
   내려가면 안 된다). 넓은 화면의 두 칸 배치는 바로 아래 68rem 규칙이 맡는다 — 이 규칙보다 **뒤에** 있어야 이긴다. */
.hero__body { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-xl); }
.hero__body > .stage { order: -1; }

/* ── 넓은 화면: 카드를 본문 옆에 ────────────────────────
   제목은 **전폭**이다. 80px 짜리를 좁은 칸에 넣으면 다섯 줄로 쪼개지고
   한 줄에 어절 하나만 남는다(실측: 432px 칸에서 5줄). 비어 있던 곳은
   제목 옆이 아니라 본문·버튼 오른쪽이었으므로 카드는 거기로 들어간다. */
@media (min-width: 68rem) {
  .hero__body {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    margin-top: var(--space-xl);
  }
  .hero__lead { max-width: none; }
  .hero__lede { max-width: none; margin-top: 0; }
  /* 카드는 줄이지 않는다. 좁히면 단가 숫자가 먼저 읽히지 않게 된다. */
  .pane { min-width: 0; }
  .hero__body > .stage { order: 0; }
}


/* ── 한 도형 무대 (히어로의 제품 화면) ────────────────────────
   design.md "랜딩 히어로 — 한 도형 무대". 도형(.st-shape) 하나가 크기·반경·색을 바꿔 가며 아홉 장면을
   지나고, 장면의 글(.st-layer)은 각자의 시각에 흐림에서 선명해진다. 값은 전부 morph.js 가 시각 t 로
   계산해서 적는다 — 여기에는 **정지 화면**과 모양만 있다. CSS 트랜지션을 두지 않는다(시각의 함수여야
   어느 장면으로든 바로 건너뛸 수 있다).

   세계(.st-world)는 400×330 px 이고 카메라가 통째로 키운다. 그래서 안의 크기는 전부 px 이다.
   **카메라가 키우는 것에는 will-change 를 걸지 않는다** — 글자가 흐린 그림으로 굳는다. */


.stage {
  --st-card: var(--color-card);
  --st-ink: var(--color-ink);
  --st-rule: var(--color-rule);
  --st-well: var(--color-paper-3);
  --st-muted: var(--color-ink-3);
  --st-good: var(--color-positive);
  --st-brand: var(--color-accent);
  --st-brand-ink: var(--color-accent-ink);
  --st-brand-soft: var(--color-accent-soft);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.stage figcaption {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-ink-3);
}

.stage__frame {
  position: relative;
  aspect-ratio: 400 / 330;
  max-height: 27rem;
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
}

.st-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 330px;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--st-ink);
}

.st-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 정지 화면(스크립트 없음)은 모델 목록 장면이다. */
  width: 330px;
  height: 248px;
  translate: -50% -50%;
  border: 1px solid var(--st-rule);
  border-radius: 20px;
  background: var(--st-card);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

.st-layer {
  position: absolute;
  left: calc(50% - var(--w) / 2);
  top: calc(50% - var(--h) / 2);
  width: var(--w);
  height: var(--h);
  padding: 14px 16px;
  opacity: 0;
  visibility: hidden;
}
.stage:not(.is-live) .st-models { opacity: 1; visibility: visible; }
.stage:not(.is-live) .st-cursor,
.stage:not(.is-live) .st-tip,
.stage:not(.is-live) .stage__bar { display: none; }

.st-i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-logo { width: 14px; height: 14px; flex: none; fill: currentColor; }
.st-badge {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--st-brand);
  color: var(--st-brand-ink);
}
.st-badge--soft { background: var(--st-well); color: var(--st-ink); }
.st-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--st-well);
  color: var(--st-ink);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.st-act .st-i { width: 14px; height: 14px; }
.st-act--ink { background: var(--st-ink); color: var(--st-card); }
.st-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--st-ink);
  opacity: 0;
}
.st-ph { color: var(--st-muted); }
.st-rest { color: transparent; }
.st-cap { font-size: 11px; font-weight: 600; color: var(--st-muted); }

/* 입력창 */
.st-composer { display: flex; flex-direction: column; justify-content: space-between; padding: 15px 12px 12px 16px; }
.st-q { font-size: 14px; white-space: nowrap; overflow: hidden; }
.st-bar { display: flex; align-items: center; justify-content: space-between; }
.st-chip {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  background: var(--st-well);
  font-size: 12px;
}
.st-chip__name { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st-chip b { font-weight: 600; }
.st-chev { grid-area: 1 / 2; width: 14px; height: 14px; color: var(--st-muted); }
.st-send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--st-well);
  color: var(--st-muted);
}

/* 모델 목록 */
.st-models { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.st-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--st-well);
  color: var(--st-muted);
  font-size: 12.5px;
}
.st-search b { margin-left: auto; color: var(--st-ink); font-weight: 600; }
.st-rows { position: relative; display: grid; }
.st-hover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45px;
  border-radius: 12px;
  background: var(--st-brand-soft);
}
.st-row { position: relative; padding: 5px 10px; }
.st-row div { display: flex; align-items: center; gap: 6px; line-height: 1.4; }
.st-row b { font-size: 13px; font-weight: 600; }
.st-maker { font-size: 11.5px; color: var(--st-muted); }
.st-tick { margin-left: auto; color: var(--st-brand); }
.st-row p { margin: 1px 0 0 20px; font-size: 11.5px; line-height: 1.4; color: var(--st-muted); font-variant-numeric: tabular-nums; }

/* 로더 — 잉크색 원 안에서 호 하나가 돈다 */
.st-loader { display: grid; place-items: center; padding: 0; }
.st-loader svg { width: 30px; height: 30px; fill: none; stroke: var(--st-card); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 46 100; }

/* 근거 있는 답 */
.st-answer { display: flex; flex-direction: column; gap: 8px; }
.st-me {
  align-self: flex-end;
  max-width: 82%;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--st-well);
  font-size: 12.5px;
}
.st-src {
  padding: 8px 10px;
  border: 1px solid var(--st-rule);
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--st-muted);
}
.st-src__cap { margin-bottom: 2px; font-weight: 600; color: var(--st-ink); }
.st-src b { font-family: var(--font-mono); font-weight: 500; }
.st-src strong { font-weight: 600; color: var(--st-ink); }
.st-ans { font-size: 13.5px; line-height: 1.55; }
.st-cite {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--st-brand);
  color: var(--st-brand-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
}
.st-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--st-muted); }
.st-tag { padding: 1px 6px; border: 1px solid var(--st-rule); border-radius: 999px; font-size: 11px; }
.st-tip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  margin: 0;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--st-ink);
  color: var(--st-card);
  font-size: 11.5px;
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.st-tip b { font-weight: 600; }

/* 한글 문서 */
.st-doc { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.st-doc__file { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--st-muted); }
.st-doc__file .st-i { width: 13px; height: 13px; }
.st-doc__title {
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--st-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}
.st-doc__p { font-size: 11.5px; line-height: 1.6; }
.st-doc__t { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.st-doc__t th,
.st-doc__t td { padding: 4px 8px; border: 1px solid var(--st-rule); text-align: left; }
.st-doc__t th { background: var(--st-well); font-weight: 600; }
.st-doc__sign { margin-top: auto; font-size: 11.5px; font-weight: 600; text-align: right; }
.st-doc__bar { display: flex; justify-content: flex-end; gap: 6px; }

/* 퀴즈 */
.st-quiz { display: flex; flex-direction: column; gap: 8px; }
.st-quiz__q { font-size: 15px; font-weight: 650; letter-spacing: -0.02em; }
.st-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-opts li {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--st-rule);
  border-radius: 12px;
  background: var(--st-card);
  font-size: 13px;
}
.st-ok { order: 2; margin-left: auto; color: var(--st-good); }
.st-quiz__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-quiz__foot p { font-size: 11.5px; font-weight: 600; color: var(--st-good); }

/* 발표 자료 */
.st-slides { padding: 0; }
.st-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 26px; }
.st-slide__kick { font-size: 11px; font-weight: 600; color: var(--st-muted); }
.st-slide__title { font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -0.03em; }
.st-slide__big { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.st-slide__big small { margin-left: 4px; font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.st-slide__sub { font-size: 12px; color: var(--st-muted); }
.st-rec {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--st-well);
  font-size: 11px;
  font-weight: 600;
}
.st-rec i { width: 7px; height: 7px; border-radius: 999px; background: var(--color-alert); }
.st-page { position: absolute; right: 16px; bottom: 15px; display: grid; font-size: 11px; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.st-page span { grid-area: 1 / 1; text-align: right; }

/* 녹음 중 알약 — 잉크색. 글자는 종이색이다(도형의 색이 뒤집혔다). */
.st-pill { display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--st-card); font-size: 12.5px; }
.st-pill b { font-weight: 600; }
.st-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--color-alert); }
.st-time { font-family: var(--font-mono); font-size: 12px; opacity: 0.72; }
.st-wave { margin-left: auto; display: flex; align-items: center; gap: 2.5px; height: 20px; }
.st-wave i { width: 3px; height: 20px; border-radius: 3px; background: currentColor; scale: 1 0.3; }

/* 회의록 */
.st-minutes { display: flex; flex-direction: column; gap: 5px; }
.st-min__h { margin-top: 4px; font-size: 12px; font-weight: 700; }
.st-minutes ul { display: grid; gap: 4px; }
.st-minutes li { position: relative; padding-left: 14px; font-size: 12.5px; }
.st-minutes li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--st-ink);
}
.st-minutes li b { font-weight: 600; }

/* ⌘K */
.st-palette { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.st-palette__in { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border-bottom: 1px solid var(--st-rule); font-size: 14px; }
.st-palette kbd {
  padding: 2px 6px;
  border: 1px solid var(--st-rule);
  border-radius: 6px;
  background: var(--st-card);
  color: var(--st-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.2;
}
.st-palette__in .st-i { color: var(--st-muted); }
.st-palette__in kbd { margin-left: auto; }
.st-cmds__cap { padding: 2px 10px 0; font-size: 11px; font-weight: 600; color: var(--st-muted); }
.st-cmds { position: relative; display: grid; }
.st-cmds li { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; font-size: 13px; }
.st-cmds li kbd { margin-left: auto; }
/* 줄 규칙(.st-cmds li)이 표시자까지 relative 로 만든다 — 표시자는 다시 띄운다. */
.st-cmds .st-hover { position: absolute; height: 34px; padding: 0; }


/* 커서 — 누르면 끝점을 중심으로 줄어든다 */
.st-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  transform-origin: 4px 2.5px;
  fill: var(--st-ink);
  stroke: var(--st-card);
  stroke-width: 1.25;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px oklch(0% 0 0 / 0.25));
  pointer-events: none;
}

/* 장면 막대 — 멈춤 단추 · 지금 장면의 이름 · 아홉 칸. 칸을 누르면 그 장면으로 간다. */
.stage__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stage__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  background: var(--color-card);
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--spring-quick), scale var(--dur-snappy) var(--spring-snappy);
}
.stage__play:hover { background: var(--color-paper-3); }
.stage__play:active { scale: 0.94; }
.stage__play svg { width: 16px; height: 16px; fill: currentColor; }
.stage__now { flex: none; min-width: 5.5rem; margin: 0; font-size: var(--text-sm); font-weight: 600; }
.stage__now span { display: inline-block; }
.stage__now .is-swapping { animation: st-swap var(--dur-quick) var(--spring-quick) both; }
@keyframes st-swap {
  from { opacity: 0; filter: blur(4px); translate: 0 4px; }
}
.stage__chapters { flex: 1 1 14rem; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.stage__chapters button {
  position: relative;
  display: block;
  width: 100%;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.stage__chapters button::before,
.stage__chapters i {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
}
.stage__chapters button::before { background: var(--color-rule-strong); }
.stage__chapters button:hover::before { background: var(--color-ink-3); }
.stage__chapters i { background: var(--color-accent); transform-origin: left center; scale: 0 1; }
.stage__chapters button:focus-visible { outline-offset: 0; }

/* ── 관리자 카드 ────────────────────────────────────────
   1440px 스크린샷을 565px 칸에 넣으니 숫자가 하나도 안 읽혔다. 원가를
   보여 주는 것이 그 섹션의 논지인데 그 원가를 읽을 수 없었다. */
.admin__totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.admin__totals div {
  padding: 0.6rem 0.7rem;
  border: var(--rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}
.admin__totals dt { font-size: var(--text-xs); color: var(--color-ink-3); }
.admin__totals dd {
  margin: 0.15rem 0 0;
  font-size: var(--text-sub);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
/* 원가는 이 화면의 요점이라 다른 두 값과 색을 달리한다. */
.admin__usd { color: var(--color-accent); }

.admin__cap {
  margin: var(--space-md) 0 0.35rem;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
.admin__table { width: 100%; border-collapse: collapse; }
.admin__table td {
  padding: 0.45rem 0.2rem;
  border-top: var(--rule);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.admin__table td:first-child { text-align: left; }
.admin__table td + td { text-align: right; color: var(--color-ink-2); width: 5.5rem; }
.admin__table td span:not(.pane__badge) {
  margin-left: 0.35rem;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}


/* ── 기능 둘러보기 (탭 + 무대) ──────────────────────────────
   2026-09-27 다시 그림(대표: "너무 구려"). 히어로 무대와 같은 말투로 맞춘다 — 회색 우물(paper-2 · 반경 28) 위에 뜬
   흰 카드 하나, 카드 안은 앱의 부품을 글자로 옮긴 것이다. 탭은 테두리 상자 열 개가 아니라 **앱 사이드바와 같은 아이콘**
   이 붙은 목록이고, 고른 줄만 흰 종이로 떠오르며 설명을 편다(아이콘 칸은 파랑). 스스로 넘어간다 — 보고 있을 때만,
   손을 대면 멈추고, 멈춤 단추가 있다(WCAG 2.2.2). 움직임을 줄이는 설정이면 넘어가지 않는다(tour.js). */
.tour {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 68rem) {
  .tour { grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--space-xl); align-items: stretch; }
}
.tour__tabs { display: grid; gap: 2px; align-content: start; }
.tour__tab {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  text-align: left;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--color-ink-2);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--spring-quick), box-shadow var(--dur-quick) var(--spring-quick),
              scale var(--dur-snappy) var(--spring-snappy);
}
.tour__ico {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  transition: background-color var(--dur-quick) var(--spring-quick), color var(--dur-quick) var(--spring-quick);
}
.tour__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tour__tab b { font-size: var(--text-base); font-weight: 650; letter-spacing: -0.01em; color: var(--color-ink); }
/* 설명은 고른 줄에만 편다(smooth) — 열 줄의 설명을 다 펴면 탭 기둥이 무대보다 길어진다. */
.tour__tab span {
  grid-column: 2;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-ink-3);
  word-break: keep-all;
  transition: max-height var(--dur-smooth) var(--spring-smooth), opacity var(--dur-quick) var(--spring-quick),
              margin var(--dur-smooth) var(--spring-smooth);
}
.tour__tab:hover { background: color-mix(in oklch, var(--color-card) 60%, transparent); }
.tour__tab:active { scale: 0.99; }
.tour__tab[aria-selected="true"] { background: var(--color-card); box-shadow: var(--shadow-float); }
.tour__tab[aria-selected="true"] .tour__ico { background: var(--color-accent); color: var(--color-accent-ink); }
.tour__tab[aria-selected="true"] span { max-height: 4.5rem; opacity: 1; margin-top: 2px; }
.tour__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* 스스로 넘어가는 동안 고른 줄 아래에 가는 막대가 찬다(히어로 장면 막대와 같은 파랑). 다 차면 다음 줄로 —
   tour.js 가 animationend 를 듣는다. 손이 올라가 있거나 초점이 안에 있으면 선다. */
.tour__tab::after {
  content: "";
  position: absolute;
  left: 54px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform-origin: left center;
  scale: 0 1;
  opacity: 0;
}
.tour.is-auto .tour__tab[aria-selected="true"]::after { opacity: 1; animation: tour-fill 6.5s linear forwards; }
.tour.is-auto:hover .tour__tab[aria-selected="true"]::after,
.tour.is-auto:focus-within .tour__tab[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes tour-fill { from { scale: 0 1; } to { scale: 1 1; } }

/* 좁은 화면: 탭은 가로로 흐르는 알약(아이콘 + 이름). 설명은 무대 아래 캡션이 대신한다. */
@media (max-width: 67.99rem) {
  .tour__tabs {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .tour__tabs::-webkit-scrollbar { display: none; }
  .tour__tab { grid-template-columns: 26px auto; column-gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; scroll-snap-align: start; }
  .tour__tab:not([aria-selected="true"]) { background: color-mix(in oklch, var(--color-card) 55%, transparent); }
  .tour__ico { width: 26px; height: 26px; border-radius: 999px; }
  .tour__ico svg { width: 15px; height: 15px; }
  .tour__tab b { font-size: var(--text-sm); white-space: nowrap; }
  .tour__tab span { display: none; }
  .tour__tab::after { left: 14px; right: 14px; bottom: 2px; }
}

/* 무대 — 히어로의 우물과 같은 바탕 위에 카드 하나가 뜬다. */
.tour__panes {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 34rem;
  padding: clamp(1rem, 3.4vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--color-paper-2);
  isolation: isolate;
}
@media (max-width: 40rem) {
  .tour__panes { min-height: 0; padding: 0.75rem 0.75rem 3.5rem; border-radius: var(--radius-lg); }
}
.tour__pane { width: 100%; max-width: 40rem; min-width: 0; border-radius: 20px; }
.tour__pane[hidden] { display: none; }
/* 판이 바뀔 때: 흐림에서 선명해지며 조금 올라온다(히어로 장면 이름과 같은 결). */
.tour__pane.is-entering { animation: tour-in var(--dur-smooth) var(--spring-smooth) both; }
@keyframes tour-in { from { opacity: 0; translate: 0 14px; scale: 0.985; filter: blur(4px); } }
.tour__auto { position: absolute; right: 14px; bottom: 14px; }
.tour__auto[hidden] { display: none; }
.tour__auto .tour__play { display: none; }
.tour__auto[aria-pressed="true"] .tour__pause { display: none; }
.tour__auto[aria-pressed="true"] .tour__play { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .tour__pane.is-entering { animation: none; }
  .tour__tab::after { display: none; }
}

/* 무대 안의 카드 — 앱 화면처럼 읽히게 글자를 키운다(예전 판은 12px 글자가 대부분이라 멀리서 회색 덩어리였다).
   내 말풍선은 회색, 답은 바탕 없이 — 앱의 대화 화면과 같다. 주 단추는 잉크색 알약(랜딩 · 앱의 주 단추). */
.tour .pane__body { padding: 18px 20px 20px; }
.tour .pane__bubble { font-size: var(--text-base); line-height: 1.65; }
.tour .pane__bubble--me { margin-left: 22%; padding: 9px 14px; border-radius: 18px; background: var(--color-paper-3); box-shadow: none; }
.tour .pane__bubble:not(.pane__bubble--me) { padding: 2px 0; background: none; }
.tour .pane__src { padding: 10px 12px; border-radius: 14px; font-size: var(--text-sm); }
.tour .pane__meta { font-size: var(--text-xs); }
.tour .pane__btn { padding: 6px 14px; border-radius: 999px; font-size: var(--text-sm); }
.tour .pane__btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-card); }
.tour .pane__chips li { padding: 5px 12px; font-size: var(--text-sm); }
.tour .pane__kv > div { font-size: var(--text-base); }
.tour .pane__kv dt { font-size: var(--text-sm); }
.tour .pane__list p, .tour .pane__card { font-size: var(--text-sm); }
.tour .pane__row b { font-size: var(--text-base); }
.tour .pane__search { padding: 10px 14px; border: 0; border-radius: 14px; background: var(--color-paper-3); }
.tour .pane__quiz li, .tour .pane__quiz-a, .tour .pane__drop .quiet { font-size: var(--text-sm); }
.tour .pane__doc { font-size: var(--text-base); }
.tour .pane__doc table { font-size: var(--text-sm); }
.tour .pane figcaption { padding: 12px 20px; background: none; font-size: var(--text-sm); }

/* 판 안의 부품. 실제 앱의 부품(말풍선·출처 상자·칩)을 글자로 옮긴 것이다. */
.pane__bubble {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper-2);
  word-break: keep-all;
}
.pane__bubble + .pane__bubble, .pane__src + .pane__bubble, .pane__bubble + .pane__src { margin-top: 0.5rem; }
.pane__bubble--me {
  margin-left: 18%;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent-line);
}
.pane__src {
  padding: 0.55rem 0.75rem;
  border: var(--rule);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  line-height: 1.55;
}
.pane__src p { margin: 0; }
.pane__src p + p { margin-top: 0.25rem; }
.pane__src-cap { font-weight: 600; color: var(--color-ink-3); }
.pane__src b { font-family: var(--font-mono); color: var(--color-ink-3); }
.pane__link { text-decoration: underline; text-underline-offset: 3px; color: var(--color-ink-3); }
.pane__meta { margin: 0.6rem 0 0; font-size: var(--text-xs); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.pane__tag {
  padding: 0 0.35rem; border: var(--rule); border-radius: 4px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
}
.pane__kv { margin: 0; display: grid; gap: 0.55rem; }
.pane__kv > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; font-size: var(--text-sm); }
.pane__kv dt { color: var(--color-ink-3); font-size: var(--text-xs); padding-top: 0.15em; }
.pane__kv dd { margin: 0; color: var(--color-ink); line-height: 1.55; word-break: keep-all; }
.pane__file {
  display: inline-block; margin: 0 0.25rem 0.25rem 0;
  padding: 0.1rem 0.45rem; border: var(--rule); border-radius: 6px;
  font-size: var(--text-xs); color: var(--color-ink-2);
}
.pane__actions { margin-top: 0.75rem; display: flex; gap: 0.4rem; justify-content: flex-end; }
.pane__btn {
  padding: 0.35rem 0.7rem; border: var(--rule); border-radius: 8px;
  font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2);
}
.pane__btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.pane__list--store li + li { margin-top: 0.35rem; }
.pane__list--store li { border: var(--rule); }
.pane__drop {
  padding: 1rem; border: 1px dashed var(--color-rule-strong); border-radius: var(--radius-md);
  text-align: center; font-size: var(--text-sm); color: var(--color-ink-2);
}
.pane__drop .quiet { display: block; margin-top: 0.2rem; font-size: var(--text-xs); }
.pane__chips { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pane__chips li {
  padding: 0.25rem 0.65rem; border: var(--rule); border-radius: 999px;
  font-size: var(--text-xs); color: var(--color-ink-2);
}
.pane__chips .is-on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.pane__quiz { margin-top: 0.75rem; padding: 0.7rem 0.8rem; border: var(--rule); border-radius: var(--radius-md); font-size: var(--text-sm); }
.pane__quiz-q { margin: 0; font-weight: 700; }
.pane__quiz ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.pane__quiz li { padding: 0.35rem 0.6rem; border: var(--rule); border-radius: 8px; font-size: var(--text-xs); }
.pane__quiz .is-right { border-color: var(--color-positive); box-shadow: inset 0 0 0 1px var(--color-positive); }
.pane__quiz-a { margin: 0.5rem 0 0; font-size: var(--text-xs); color: var(--color-ink-3); }
/* 이미지 생성의 결과 — 2026-09-27 부터 **실제로 만든 그림**이다(예전에는 색 번짐으로 자리만 그렸다). 그림은 판을 고를
   때까지 받지 않는다(loading="lazy" — 숨은 판의 그림은 첫 화면의 짐이 아니다). 오기 전에는 우물 색의 빈칸이 자리를 지킨다.
   만든 모델의 이름표는 그림 위의 알약 — 두 화면 모드 모두 잉크 · 종이를 뒤집어 어떤 사진 위에서도 읽힌다. */
.pane__img {
  position: relative;
  margin-top: 0.6rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-paper-3);
}
.pane__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pane__img span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-ink) 68%, transparent);
  color: var(--color-card);
  font-size: var(--text-xs);
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.pane__warn {
  margin: 0.6rem 0 0; padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--color-warn) 40%, transparent);
  background: color-mix(in oklch, var(--color-warn) 12%, transparent);
  font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink);
}

/* 슈퍼 에이전트: 어느 도구로 갔는지(칩 + 이유) · 결과 카드 */
.pane__route {
  margin: 0.5rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  font-size: var(--text-xs); color: var(--color-ink-3); line-height: 1.5;
}
.pane__route-tool {
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  font-weight: 700; color: var(--color-ink);
}
.pane__card {
  padding: 0.7rem 0.8rem;
  border: var(--rule);
  border-radius: var(--radius-md);
  font-size: var(--text-xs); line-height: 1.6; color: var(--color-ink-3);
}
.pane__card .pane__row { justify-content: space-between; }
.pane__card .pane__row b { color: var(--color-ink); }
.pane__card p { margin: 0.25rem 0 0; word-break: keep-all; }

/* HWP 편집: 종이 한 장. 앱의 편집기가 그리는 것과 같은 뼈대(제목 · 본문 · 표)만 옮긴다. */
.pane__doc {
  padding: 1rem 1.1rem;
  border: var(--rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  font-size: var(--text-sm); line-height: 1.65; color: var(--color-ink);
}
.pane__doc p { margin: 0; word-break: keep-all; }
.pane__doc-title { font-weight: 700; text-align: center; margin-bottom: 0.5rem !important; }
.pane__doc table {
  width: 100%; margin-top: 0.6rem;
  border-collapse: collapse;
  font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.pane__doc th, .pane__doc td { padding: 0.3rem 0.5rem; border: 1px solid var(--color-rule-strong); text-align: center; }
.pane__doc th { font-weight: 700; background: var(--color-paper-2); }
.pane__doc + .pane__src { margin-top: 0.6rem; }


/* ── 되는 일 전부 — 색인 ─────────────────────────────────────
   카드가 아니라 **줄**이다: 요구사항 목록과 하나씩 대조하는 사람이 읽는다. 묶음 이름은 왼쪽 기둥에,
   줄마다 이름 · 하는 일 · 조심하는 것. 좁은 화면에서는 기둥이 위로 올라가고 줄은 한 칸으로 접힌다. */
.index { margin-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.index__group {
  display: grid;
  gap: var(--space-sm) var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-rule-strong);
}
.index h3 {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-accent);
}
.index dl { margin: 0; display: grid; }
.index dl > div {
  display: grid;
  gap: 0.15rem var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  padding: 0.6rem 0;
  font-size: var(--text-sm); line-height: 1.6;
}
.index dl > div + div { border-top: var(--rule); }
.index dt { font-weight: 700; color: var(--color-ink); word-break: keep-all; }
.index dd { margin: 0; color: var(--color-ink-2); word-break: keep-all; }
.index__care { color: var(--color-ink-3) !important; font-size: var(--text-xs); line-height: 1.6; }
@media (min-width: 48rem) {
  .index dl > div { grid-template-columns: 11rem minmax(0, 1fr); }
  .index dl > div .index__care { grid-column: 2; }
}
@media (min-width: 68rem) {
  .index__group { grid-template-columns: 9rem minmax(0, 1fr); }
  .index dl > div { grid-template-columns: 12rem minmax(0, 1.25fr) minmax(0, 1fr); align-items: baseline; }
  .index dl > div .index__care { grid-column: auto; font-size: var(--text-sm); }
}


/* ── 통제 8칸 ──────────────────────────────────────────────── */
.trust {
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.trust li {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: var(--space-md);
  border: var(--rule);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}
.trust__k { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--color-accent); }
.trust h3 { font-size: var(--text-lg); font-weight: 700; word-break: keep-all; }
.trust p { margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--color-ink-2); word-break: keep-all; }
.trust code { margin-top: 0.3rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-3); }