feat(skill): route fixes, delivery report, composition diversity, platform refresh

- route table: extension route for products with an existing visual
  language, feedback row, derived state tokens stay local
- completion: blocking 0 plus reported unverified; hard-gate surface is
  the touched scope; delivery report starts with what and how to open
- design.md created at step 0 with a skeleton, fingerprint line and
  change log; product-surface rubric reading; direction delegation
  states the chosen card and reason
- layout: hero families, nav forms, footer forms; art-direction page
  convergence 6 axes; genre sections; image treatments; placeholder
  conventions; multi-screen order; Tailwind theme mapping
- platform: scroll-driven examples, anchor positioning, canvas OT,
  three/R3F pins, shadcn style prefixes, Safari 26 notes, subgrid
- design-gate: four result states, exit codes, cwd module resolution,
  --url/--out-dir/--strict, oklch contrast, dead selector word match
- Korean font budget split from the Latin baseline

packages/skill/references/style-playbook.md

@@ -1,6 +1,25 @@
-# style playbook — 과업에 맞는 시각 언어
+# style playbook — 과업 분류와 시각 언어
 
-스타일은 성격 테스트가 아니라 과업·콘텐츠·운영 조건의 출발점이다. 아래 항목을 고른 뒤에도 [design foundations](design-foundations.md)의 접근성·성능·과업 검증을 통과해야 한다. 수치나 금지 목록을 복사하지 말고, 실제 렌더에서 결정의 이유를 확인한다.
+스타일 결정에는 서로 다른 두 축이 있다. 둘을 섞으면 "에이전시 사이트니까 anti-grid" 같은 지름길이 생기고, 사용자가 말한 시각 언어("아르데코", "Y2K")가 가장 가까운 과업 계열로 깎인다.
+
+| 축 | 묻는 것 | 어디서 고르나 |
+|---|---|---|
+| **과업 분류** | 이 화면이 무엇을 하게 하는가 — 읽기·비교·몰입·전환·학습 | 아래 계열 표 |
+| **시각 언어(스타일)** | 어떤 계보의 형태·색·재질·타입으로 말하는가 | [presets/](presets/README.md)(과업용 기본값) · [style-atlas.md](style-atlas.md)(사용자가 이름을 말한 스타일) |
+
+순서: 과업 계열을 먼저 정해 정보 구조·밀도·모션 상한을 잠그고, 그 위에 시각 언어를 고른다. 같은 과업도 여러 시각 언어로 말할 수 있다 — Dense 과업을 dark-instrument로도, 데이터 밀도 라이트로도 풀 수 있다. 시각 언어가 둘 이상이면 [remix.md](remix.md)로 지배 하나와 보조 축을 나눈다.
+
+과업 계열은 성격 테스트가 아니라 과업·콘텐츠·운영 조건의 출발점이다. 아래 항목을 고른 뒤에도 [design foundations](design-foundations.md)의 접근성·성능·과업 검증을 통과해야 한다. 수치나 금지 목록을 복사하지 말고, 실제 렌더에서 결정의 이유를 확인한다. 계보 원전의 확인 범위는 [visual-design-lineage.md](visual-design-lineage.md)를 따른다.
+
+## 이 문서를 읽는 법
+
+| 상황 | 읽을 곳 |
+|---|---|
+| 과업 계열을 고른다 | "과업 계열" 표에서 해당 행 하나, 그다음 "과업 계열별 빠른 선택 예와 오용"에서 같은 이름의 소절 하나 |
+| 시각 언어 후보를 연다 | "시각 언어 고르기" 표의 해당 행 |
+| 수상작·트렌드를 근거로 쓰려 한다 | "사례와 트렌드의 사용법" |
+
+## 과업 계열
 
 | 계열 | 목표·정보 구조 | 타입·색·이미지 | 모션 | 적합 조건 | 실패 | 검증 |
 |---|---|---|---|---|---|---|
@@ -10,9 +29,9 @@
 | Playful | 탐색과 학습의 긴장을 낮춘다. 핵심 행동은 여전히 예측 가능해야 한다 | 밝은 색은 의미 역할을 분리하고, 일러스트/캐릭터는 과업 단서를 보강 | 작은 보상·피드백은 가능하나 중지 가능성과 오류 회복을 제공 | 교육·커뮤니티·가벼운 소비 경험에서 놀이가 목표를 돕는 경우 | 재미가 상태·가격·위험 신호를 가림 | 처음 방문자가 다음 행동·오류 복구를 설명할 수 있는지, reduced motion |
 | Immersive | 공간·시간·감각적 몰입을 우선하되 대체 경로를 제공한다. 하나의 장면에서 깊이를 만든다 | 큰 원본 미디어, 제한된 overlay text, 읽을 수 있는 대비와 대체 콘텐츠 | WebGL/스크롤 연출은 progressive enhancement; pause·fallback 필수 | 전시·게임·영화·브랜드 스토리처럼 경험 자체가 가치일 때 | 로딩·멀미·배터리 비용을 감추고, 마우스/고성능 기기만 지원 | 저사양/느린 망/키보드/reduced motion에서 동일 핵심 정보와 행동 가능 여부 |
 | Dense | 빈번한 비교·감시·편집을 빠르게 한다. 요약→필터→상세의 정보 계층을 명시한다 | 가독성 높은 본문·tabular 수치·기능색·표/차트의 명확한 라벨 | 값 변화는 위치 이동보다 상태 표식; 빠른 피드백 | 운영 도구·분석·거래처럼 반복 과업과 숙련 사용자가 있을 때 | 미니멀이라는 이유로 필터·단위·오류 맥락을 숨김; 색만으로 상태 전달 | 대표 과업 시간, 200% 확대, keyboard, 좁은 폭의 우선순위/대체 경로 |
-| Platform-native (Apple풍) | PWA·모바일 웹앱이 OS 네이티브 앱과 나란히 놓일 때 플랫폼 소속감을 만든다. 정보 구조는 위 계열 중 과업에 맞는 것을 그대로 쓰고, 이 행은 표면 마감만 더한다 | 유동 인터페이스 물리(인터럽트 가능한 스프링, 제스처 인식), 머티리얼 위계([svg-filters.md](svg-filters.md) 유리 절), 시스템 폰트의 옵티컬 사이징을 존중하는 타이포 | 스프링 기반 전환, 인터럽트 가능성, 제스처에 반응하는 촉감([interaction-feel.md](interaction-feel.md)) | 브리프가 "iOS 느낌"·"네이티브 앱 감각"을 명시했을 때만. 그 자체가 목표 시장이 아니면 열지 않는다 | 특정 미학을 기본값으로 삼아 모든 프로젝트에 유리·스프링을 얹음; 저사양·Firefox에서 무너짐 | 필터 off·CPU throttling 4×, Firefox·저사양 기기에서 폴백이 성립하는지, reduced motion·reduced transparency |
+| Platform-native (Apple풍) | PWA·모바일 웹앱이 OS 네이티브 앱과 나란히 놓일 때 플랫폼 소속감을 만든다. 정보 구조는 위 계열 중 과업에 맞는 것을 그대로 쓰고, 이 행은 표면 마감만 더한다 | 유동 인터페이스 물리(인터럽트 가능한 스프링, 제스처 인식), 머티리얼 위계([svg-glass.md](svg-glass.md) §3), 시스템 폰트의 옵티컬 사이징을 존중하는 타이포 | 스프링 기반 전환, 인터럽트 가능성, 제스처에 반응하는 촉감([interaction-feel.md](interaction-feel.md)) | 브리프가 "iOS 느낌"·"네이티브 앱 감각"을 명시했을 때만. 그 자체가 목표 시장이 아니면 열지 않는다 | 특정 미학을 기본값으로 삼아 모든 프로젝트에 유리·스프링을 얹음; 저사양·Firefox에서 무너짐 | 필터 off·CPU throttling 4×, Firefox·저사양 기기에서 폴백이 성립하는지, reduced motion·reduced transparency |
 
-## 계열별 빠른 선택 예와 오용
+## 과업 계열별 빠른 선택 예와 오용
 
 ### Swiss / editorial
 
@@ -24,7 +43,7 @@
 
 - **구도**: 한 장면만 비대칭·중첩·대형 타입으로 만들고, 이후 정보는 안정된 grid로 회수한다.
 - **밀도·타입**: display의 개성과 본문의 읽기 역할을 분리하며, 강조색·질감·변형은 하나의 중심 아이디어에만 쓴다.
-- **오용**: 회전·세로쓰기·대문자·왜곡을 함께 쌓아 포커스 순서와 메시지를 잃지 않는다.
+- **오용**: 중심 개념 없이 회전·세로쓰기·대문자·왜곡을 쌓아 포커스 순서와 메시지를 잃지 않는다. 장치 수가 많은 것 자체는 실패가 아니다 — 맥시멀·네오브루탈 요청은 읽기 경로 고정·반복 모티프·효과 off 메시지로 판정한다([presets/anti-grid.md](presets/anti-grid.md)).
 
 ### Luxury
 
@@ -55,9 +74,25 @@
 언제: 브리프가 "iOS 느낌"·"네이티브 앱처럼"을 명시했거나 PWA가 OS 네이티브 앱 옆에 나란히 설치되는 과업일 때만 연다. 이 계열은 정보 구조를 새로 정하지 않는다 — 위 여섯 계열 중 과업에 맞는 것으로 뼈대를 고르고, 이 행은 그 위에 표면 마감만 얹는다.
 
 - **구도**: 전환은 하드 컷이 아니라 스프링 기반으로 하고, 진행 중인 애니메이션을 중간에 잡아도(interrupt) 속도가 끊기지 않게 한다. 제스처(드래그·스와이프)에 실시간으로 반응하는 표면을 우선 검토한다. 상세 물리·수치는 [interaction-feel.md](interaction-feel.md)를 따른다.
-- **재질**: 유리·머티리얼 위계는 [svg-filters.md](svg-filters.md)의 "머티리얼 위계와 가독성" 절을 그대로 따른다 — `swiss-minimal`은 이 계열과 함께 쓰지 않는다.
+- **재질**: 유리·머티리얼 위계는 [svg-glass.md](svg-glass.md) §3 "머티리얼 위계와 가독성"을 그대로 따른다. `swiss-minimal`에서 유리는 기본 비채택이다 — 금지가 아니라 출발점이며, 함께 쓰려면 [remix.md](remix.md)의 축 소유권 표에서 재질 축 소유자를 정하고 기록한다.
 - **타입**: 커스텀 서체보다 플랫폼 시스템 폰트를 기본으로 검토한다. 이미 옵티컬 사이징과 트래킹 테이블이 튜닝돼 있다. 오버라이드는 근거가 있을 때만 한다[SKILL-APPLE-DESIGN].
-- **오용**: 이 표면 마감을 모든 프로젝트의 기본값처럼 반복하지 않는다. 유리·스프링·머티리얼이 저사양 기기와 Firefox에서 무너지지 않는지 §7(svg-filters.md)의 폴백 규칙으로 확인한다 — "예뻐서"가 채택 이유가 되지 않는다.
+- **오용**: 이 표면 마감을 모든 프로젝트의 기본값처럼 반복하지 않는다. 유리·스프링·머티리얼이 저사양 기기와 Firefox에서 무너지지 않는지 [svg-filters.md](svg-filters.md) §7과 [svg-glass.md](svg-glass.md) §2의 폴백 규칙으로 확인한다 — "예뻐서"가 채택 이유가 되지 않는다.
+
+## 시각 언어 고르기
+
+과업 계열이 정해진 뒤 시각 언어 후보를 넓게 연다. 아래는 출발 후보일 뿐이며, 사용자가 스타일 이름을 말했으면 그 카드가 우선한다. 후보를 고른 뒤 프리셋이면 그 파일 하나, 카드면 [style-atlas.md](style-atlas.md)의 해당 카드, 둘 이상이면 [remix.md](remix.md)를 읽는다.
+
+| 과업 계열 | 프리셋 후보 | style-atlas 카드 후보 |
+|---|---|---|
+| Swiss / editorial | editorial · swiss-minimal | 스위스/인터내셔널 · 아카이브·인덱스 · 한국 출판·문화 그래픽 · 레트로 프린트 |
+| Expressive | anti-grid | 브루탈리즘 · 네오브루탈리즘 · 키치/맥시멀 · 멤피스 · 바우하우스 · 키네틱 타이포 |
+| Luxury | editorial · quiet-commerce | 아르데코 · 스칸디나비안(수렴 주의) · 스큐어모피즘(재질 한정) |
+| Playful | quiet-commerce(전환) | 멤피스 · 클레이·소프트 3D · Y2K · 한국 상업 웹 관례 · 게임 UI |
+| Immersive | — | 게임 UI · 사이버펑크 · 베이퍼웨이브 · 글래스모피즘 |
+| Dense | dark-instrument · swiss-minimal | 데이터 밀도 라이트 · 블루프린트·기술도면 |
+| Platform-native | — | 글래스모피즘 · 뉴모피즘(소수 화면) |
+
+같은 과업에 늘 같은 후보를 고르면 결과가 수렴한다. 직전 산출물과 같은 후보라면 표의 다른 칸을 한 번 proof로 비교한 뒤 정한다.
 
 ## 사례와 트렌드의 사용법