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/remix.md

@@ -0,0 +1,135 @@
+# remix — 두 스타일을 섞는 문법
+
+2단계에서 연다. 브리프나 사용자가 **둘 이상의 스타일 또는 이질적 물성**을 명시했을 때(예: "스위스 그리드 + Y2K 크롬", "한지 질감 + 다크 인스트루먼트"), 또는 R1 구조와 R2 톤이 서로 다른 스타일 계보에서 왔을 때다.
+
+리믹스가 아닌 것:
+- 한 스타일의 표현 강도를 화면마다 바꾸는 것 → 표면 다이얼(`trustworthy-showcases.md` §3)
+- 한 프리셋에 R2 톤을 섞는 것 → 프리셋 기본 절차(`presets/README.md`)
+
+리믹스가 없으면 결과는 "지배 프리셋 + 보조 스타일의 버튼 하나" 같은 표면 접착으로 끝난다. 이 문서의 목적은 두 스타일의 **축을 분해해 소유권을 나누는 것**이다. 스타일의 핵심·클리셰 정의는 [style-atlas.md](style-atlas.md)와 [presets/](presets/README.md)에서 가져온다.
+
+프리셋 문서와 재질 문서의 "이 프리셋에는 X가 어울리지 않는다" 류 문장은 **단독 사용 시 기본 비채택**이다. 아래 축 소유권 표에서 그 축의 소유자가 보조 스타일로 정해지면 채택할 수 있고, 그 결정을 `design.md`에 기록한다. 하드 게이트(접근성·진실성)는 예외가 아니다.
+
+**이 문서의 R-1~R-5는 리믹스 절차의 단계다. SKILL.md 파이프라인의 0~6단계가 아니다.** 예전에는 "1단계~5단계"로 적어 파이프라인 2단계(방향)와 헷갈렸다.
+
+---
+
+## R-1 — 스타일 게놈 분해 (9축)
+
+각 원천 스타일을 9축으로 분해하고, 축마다 **C(정체성 핵심)** 인지 **S(치환 가능)** 인지 표시한다. 판정 질문: "이 축을 다른 스타일 값으로 바꿔도 여전히 그 스타일로 읽히는가?" 읽히면 S, 아니면 C. 약한 핵심은 C(약)로 적는다.
+
+| 축 | 무엇을 보나 |
+|---|---|
+| 1 구조·그리드 | 열 체계, 정렬, 대칭/비대칭, 깨짐 |
+| 2 타입 | 서체 성격, 스케일 대비, 정렬, 대소문자·자간 |
+| 3 색 역할 | 배경 명도, 강조 hue, 면 대 선, 색 개수 |
+| 4 표면·재질 | 평면, 종이, 광택, 유리, 질감 |
+| 5 형태 언어 | radius, 선 두께, 도형, 외곽선 |
+| 6 깊이·elevation | 그림자, 겹침, 투과, 표면 단계 |
+| 7 모션 | 속도, 이징, 피드백 대 연출 |
+| 8 이미지·도상 | 사진 성격, 일러스트, 도표, 상징 |
+| 9 밀도·리듬·목소리 | 정보량, 여백 리듬, 카피 어조 |
+
+분해 예:
+
+| 축 | 스위스 | Y2K | 한지(물성) | 다크 인스트루먼트 |
+|---|---|---|---|---|
+| 1 구조 | **C** 모듈·비대칭 | S | S | **C** 정렬 엄격 |
+| 2 타입 | **C** 그로테스크·극단 스케일 | C(약) 와이드·픽셀 | S | **C** tabular 수치 |
+| 3 색 | S(원색 제한) | **C** 실버·아쿠아·핫핑크 | C(약) 생지색·먹 | **C** 저조도·좁은 강조 |
+| 4 재질 | S(평면) | **C** 크롬·젤리 | **C** 섬유·반투명·번짐 | S |
+| 5 형태 | S | **C** 캡슐·블롭 | S | S |
+| 6 깊이 | S | C(약) 광택 하이라이트 | C(약) 겹침 투과 | **C** 표면 3단 |
+| 7 모션 | S(피드백) | C(약) 반짝임 | S | **C** 빠르고 정확 |
+| 8 이미지 | **C** 객관 사진·도표 | **C** 미래 도상 | S | **C** 실제 데이터 |
+| 9 밀도 | C(약) 정보 질서 | S | S | **C** 고밀도 |
+
+---
+
+## R-2 — 지배/보조 선언과 축 소유권
+
+1. **지배 스타일(D) 하나를 선언한다.** 기본값은 브리프의 **과업**(읽기·비교·전환·몰입)에 맞는 쪽이다. 사용자가 순서를 말했으면 그 순서를 따르고, 인터뷰의 "주 방향" 기록과 연결한다. 과업으로도 순서로도 정할 수 없으면 "어느 쪽이 구조를, 어느 쪽이 표면을 맡나요?"를 사용자에게 묻는다(묻는 방법은 `brief-interview.md`).
+2. **축 소유권 표**를 만든다. 축마다 소유자는 하나다: D / A(보조) / 브리지(공유).
+3. **비율 규칙** — 면적이 아니라 축 개수와 노출 범위로 잰다.
+   - D는 **구조축(1·9)과 위계 축(2의 본문, 6)** 을 반드시 소유한다. 구조축을 둘로 나누면 그리드 두 개가 싸운다.
+   - A는 자기 C 축 중 **1~3개**만 가져간다. 그 이상이면 A가 사실상 지배이므로 D/A를 바꿔 다시 선언한다.
+   - A에는 **노출 예산**을 준다: "히어로 오브젝트 1 + 주 행동 1 + 반복 모티프 1"처럼 컴포넌트 범위로 적는다. 본문·폼·표·오류 상태는 기본적으로 D 소유다.
+4. **브리지 축을 하나 이상 찾는다.** 두 스타일이 이미 공유하는 성질이다(예: 스위스와 Y2K는 기술 낙관과 산세, 한지와 다크 인스트루먼트는 정밀한 제작 공정). 브리지가 없으면 두 스타일은 콜라주로 보인다. 브리지를 못 찾으면 섞지 말고 사용자에게 하나를 고르도록 되묻는다(예 C).
+
+## R-3 — 충돌 해소 순위 (위가 이긴다)
+
+1. **하드 게이트** — 대비·포커스·감소 모션·감소 투명도·진실성. 어떤 스타일 핵심보다 우선한다.
+2. **브랜드 자산이 잠근 축** — 로고 색이면 색축 잠금, 기존 서체면 타입축 잠금.
+3. **D의 정체성 핵심(C)**.
+4. **A의 정체성 핵심(C)** — A가 가져가기로 한 축에 한해서.
+5. 양쪽의 치환 가능(S) 축 — 브리지 축과 일관된 쪽을 택한다.
+
+| 충돌 유형 | 예 | 처리 |
+|---|---|---|
+| 구조 대 구조 | 스위스 모듈 그리드 대 그리드 해체 | 하나만 남긴다. 다른 쪽은 "한 장면의 예외"로 강등 |
+| 물성 대 물성 | 스위스 평면 대 Y2K 광택 | **층위 분리** — 광택은 오브젝트(제품·로고·주 CTA)에만, UI 크롬·텍스트 면은 평면 |
+| 색 체계 | 다크 저조도 대 한지 생지색 | 한쪽은 면(surface), 다른 쪽은 빛·물성 레이어 — 다크 면 위 한지는 반투명 오버레이·빛 투과로만 |
+| 시대 신호 | 아르데코 장식 대 미니멀 | 장식을 구조 장치(보더·구분선·숫자 체계)로 번역하고 장식 면적 상한을 적는다 |
+| 밀도 | 럭셔리 여백 대 데이터 밀도 | 표면 다이얼로 화면별 분리 |
+| 핵심 정면 충돌 | 뉴모피즘 저대비 대 대비 기준 | 1순위가 이긴다 → 핵심을 포커스·상태 보강으로 재설계하거나 사용자에게 트레이드오프를 알린다 |
+
+## R-4 — 브랜드 정합
+
+- "왜 이 두 스타일이 **이 브리프에** 맞는가"를 한 문장으로 적는다. 하나의 이유만 말할 수 있으면 나머지는 장식이다.
+- 반사실 점검: "이 조합이 다른 업종 브리프에서도 그대로 나왔을 것인가?" 그렇다면 조합이 아니라 유행이다.
+- 클리셰 감사: 스타일 카드의 클리셰 중 사용한 것을 센다. 각 스타일당 **정체성 핵심이 아닌 클리셰는 0~1개**. 예: Y2K에서 크롬은 핵심이지만 홀로그램 + 반짝이 + 픽셀 서체를 동시에 쓰면 클리셰 누적이다.
+- 문화 물성이 들어가면 [style-atlas.md](style-atlas.md) §7 번역 절차를 먼저 끝낸다.
+
+## R-5 — 리믹스 렌더 검증
+
+기존 하드 게이트·감소 투명도·저사양 폴백에 더해 세 가지를 캡처로 확인한다.
+
+1. **지배 식별** — 회색조 + 효과 off + A 요소 제거 상태에서 D 스타일로 읽히는가.
+2. **보조 식별** — A가 소유한 요소만 남긴 크롭에서 A 스타일로 읽히는가. 안 읽히면 A가 희석된 표면 접착이다.
+3. **경계** — A 요소가 D 소유 영역(본문·폼·표·오류)에 새어 들어갔는가. 노출 예산과 대조한다.
+
+하나라도 실패하면 R-2(소유권)로 돌아간다.
+
+## `design.md` 기록 템플릿
+
+```md
+## 리믹스
+- 원천: D = <스타일> · A = <스타일>
+- 이 브리프에 둘 다 필요한 이유: <한 문장>
+- 브리지 축: <공유 성질>
+- 축 소유권: 구조 D / 타입 D(표제만 A) / 색 D + A 강조 1 / 재질 A(오브젝트 한정) / 형태 D / 깊이 D / 모션 D + A(히어로 1회) / 이미지 A / 밀도 D
+- A 노출 예산: <컴포넌트 범위>
+- 단독 비채택을 푼 항목: <프리셋·재질 문서의 문장> → <소유 축과 이유>
+- 충돌과 결정: <유형> → <처리> / 근거
+- 클리셰 감사: <스타일별 사용 클리셰 수>
+- 검증: 지배 식별 · 보조 식별 · 경계 결과(캡처 경로)
+```
+
+---
+
+## 적용 예
+
+**예 A — 스위스 그리드 + Y2K 크롬 (기술 하드웨어 브랜드 랜딩)**
+- D = 스위스(사양 비교가 과업). A = Y2K(브랜드의 미래 낙관).
+- 브리지: 기술 진보에 대한 낙관과 산세 → 표제는 넓게 설계된 그로테스크로 Y2K의 폭 감각을 스위스 산세 계보 안에서 수용한다.
+- 유지: 모듈 그리드, 플러시 레프트, 사양 표, 객관적 제품 사진. A 소유: 제품 오브젝트와 주 CTA의 크롬 재질(`svg-filters.md` 금속·젤리 레시피), 강조색 1개를 아쿠아-실버로.
+- 비채택: 크롬 텍스트 본문, 홀로그램 배경 전면, 표·폼의 광택.
+- 검증: 효과 off에서 스위스 포스터로, 히어로 크롭만 보면 Y2K로 읽혀야 한다.
+
+**예 B — 한지 질감 + 다크 인스트루먼트 (전통 공예 데이터 아카이브, ko-KR)**
+- D = 다크 인스트루먼트(소장품 측정값 비교가 과업). A = 한지 물성(브랜드가 공방 기반).
+- 브리지: 정밀한 제작 공정. 한지의 섬유 방향성을 계기 눈금·측정선과 같은 방향 패턴으로 번역한다.
+- 유지: 표면 3단, tabular 수치, 빠른 피드백 모션. A 소유: 재질 축만 — 니어블랙이 아니라 먹의 깊이가 있는 저채도 갈흑, 상세 패널의 한지 반투명 레이어(비등방 `feTurbulence`), 이미지 캡션 경계의 번짐. dark-instrument의 "그레인 거의 안 씀"은 재질 축 소유권으로 풀고 기록한다.
+- 비채택: 붓글씨 표제, 낙관 장식, 의미 없는 한자 문구. 문양 대신 공정·물성만(`style-atlas.md` §7).
+- 검증: 반투명 합성 상태에서 대비 실측, 감소 투명도에서 한지 레이어를 불투명 면으로 바꿔도 정보가 같다.
+
+**예 C — 아르데코 + 데이터 밀도 라이트 (호텔 그룹 객실 요금 비교)**
+- D = 데이터 밀도 라이트(요금·조건 비교가 과업). A = 아르데코(브랜드 유산).
+- 브리지: 대칭 질서와 숫자 체계. 아르데코의 계단형 기하를 표 머리와 섹션 구분선의 단계로, 금속 색을 강조 1색(황동)과 숫자 서체의 고대비로만 가져간다.
+- 비채택: 금색 그라디언트 텍스트, 부채꼴 배경 전면, 표 셀 장식.
+- 검증: 장식 보더를 지워도 표가 그대로 읽히고, 히어로·섹션 머리 크롭만으로 아르데코가 읽힌다.
+
+**되묻는 사례 — 네오브루탈리즘 + 럭셔리 미니멀**
+- 정체성 핵심이 정면 충돌한다(하드 그림자·고채도 다색 대 절제·희소성). 공유하는 성질이 없어 브리지 축을 찾을 수 없다.
+- 섞지 않는다. 사용자에게 "이 브랜드가 약속하는 것은 친근한 에너지인가, 희소한 품질인가"를 묻는다. 답에 따라 하나를 D로 정하고, 다른 쪽은 캠페인 표면 하나에만 쓰는 표면 다이얼 분리로 제안한다.
+- 같은 판단이 필요한 신호: 브리지 후보가 "둘 다 예쁘다" 수준이거나, A가 C 축을 4개 이상 요구하거나, 하드 게이트 1순위가 한쪽 핵심을 전부 지운다.