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

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 예시 코드도 같이 수정

packages/skill/references/layout.md

@@ -14,7 +14,7 @@
   grid-template-columns:
     [full-start] minmax(var(--space-4), 1fr)
     [wide-start] minmax(0, 12rem)
-    [main-start] minmax(0, 60rem) [main-end]
+    [main-start] minmax(0, var(--measure)) [main-end]   /* 3단계에서 정한 값이다 */
     minmax(0, 12rem) [wide-end]
     minmax(var(--space-4), 1fr) [full-end];
 }
@@ -23,6 +23,10 @@
 .page > .full { grid-column: full; }
 ```
 
+**`main` 폭에 고정값을 쓰지 마라.** `--measure` 는 3단계에서 언어와 폰트에 맞춰 정한 값이다.
+여기에 60rem 같은 숫자를 넣으면 본문이 measure 를 넘어가 이 문서의 통과 조건을 스스로 어긴다.
+한글은 보통 라틴보다 좁다(35ch ≈ 561px vs 640px).
+
 이 한 번의 정의로 **본문 폭 · 넓은 블록 · 전체 폭**이 전부 정렬된다. 섹션마다 `max-width` 와 `padding` 을 다시 쓰면 반드시 어긋난다.
 
 ### 비대칭을 두려워하지 마라

packages/skill/references/motion.md

@@ -132,7 +132,7 @@
 .btn {
   position: relative; isolation: isolate;
   background: var(--accent); color: var(--accent-ink);
-  border: 0; padding: 0.75rem 1.5rem; border-radius: var(--radius);
+  border: 0; padding: 0.75rem 1.5rem; border-radius: var(--radius-md);
   transition: translate var(--dur-instant) var(--ease-out),
               scale     var(--dur-instant) var(--ease-out);
 }
@@ -246,7 +246,7 @@ if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
 
 ```css
 .tip {
-  margin: 0; padding: 0.75rem 1rem; border: 0; border-radius: var(--radius);
+  margin: 0; padding: 0.75rem 1rem; border: 0; border-radius: var(--radius-md);
   background: var(--surface-raised); color: var(--ink); max-width: 18rem;
   /* 닫힌 상태 = 퇴장의 종착점 */
   opacity: 0; translate: 0 var(--shift-sm); scale: 0.96;