소개 페이지 — 스킬을 스스로 적용해 만든 첫 사례

designpaca 파이프라인 0~6단계를 실제로 돌려 만들었다. 근거는 research/site-brief.md,
결정 기록은 apps/site/design.md 에 있다.

한 문장 컨셉
- 이 페이지는 designpaca 를 거쳐 만들어졌고, 절차와 형태 수치를 한국어 기준으로 전부 공개한다

번호 없이 순서 표현 (C-07 회피)
- 파이프라인 6단계를 번호로 매기면 검출률 3위 슬롭 지문에 걸린다
- 시각: 스파인 위 위치가 순서를 만든다 / 내용: 같은 브리프가 단계마다 변한다
- 의미: <ol role="list"> — 화면에 번호 0개, 보조기술에는 "6개 중 n번째"

멀티링구얼
- / = 한국어, /en/ = 영어. 번역이 아니라 각 판을 따로 썼다
- 언어별 레이아웃이 자기 폰트만 로드한다 (판당 2개)
- 조판 섹션은 한국어판에서 주장이고 영어판에서 사례다

실측
- JS 314B (gzip, 예산 50KB) / CSS 3.0KB / HTML 4.4~4.8KB
- radius 2종 · backdrop-filter 0개 · 타입 5단계 · 강조색 1개
- 슬롭 지문 grep 9패턴 0건, 정적 하드 게이트 8개 전부 통과

감사에서 걸려 고친 것
- eyebrow 6개 → 상한 ceil(7/3)=3 위반 → 3개로
- clip-path 리빌 → 게이트 #8 위반 → transform 으로 교정
- 구분선 대비 1.30:1 → 입력 테두리용 별칭 분리 (WCAG 1.4.11)
- 본문 컬럼 960px → --measure 로. layout.md 예시 코드도 같이 수정

apps/site/src/components/Metrics.astro

@@ -0,0 +1,40 @@
+---
+import type { Content } from "../i18n/content";
+
+interface Props {
+  c: Content["metrics"];
+}
+const { c } = Astro.props;
+---
+
+<section class="section" aria-labelledby="metrics-h">
+  <p class="eyebrow">{c.eyebrow}</p>
+  <h2 id="metrics-h">{c.h2}</h2>
+  <p class="lead metrics-lead">{c.lead}</p>
+
+  <div class="table-scroll">
+    <table>
+      <tbody>
+        {
+          c.items.map((m) => (
+            <tr>
+              <th scope="row">{m.label}</th>
+              <td class="metric-value mono">{m.value}</td>
+              <td class="metric-note muted">{m.note}</td>
+            </tr>
+          ))
+        }
+      </tbody>
+    </table>
+  </div>
+
+  <p class="caveat muted">{c.caveat}</p>
+</section>
+
+<style>
+  .metrics-lead { margin-bottom: var(--space-5); }
+  .metric-value { white-space: nowrap; }
+  .metric-note { font-size: var(--step-0); }
+  .caveat { margin-top: var(--space-4); font-size: var(--step-0); }
+  th[scope="row"] { font-weight: 400; color: var(--ink); letter-spacing: 0; }
+</style>