feat(skill): absorb external design skills, restore interview gate, add review route

- Restore the step-0 interview as a mechanical gate the skill explicitly
  depends on; add harness.md (per-harness question tools, limits,
  fallbacks) and brief-interview.md (slots, question cards, rounds).
- Add 10 reference docs absorbed from external design skills
  (accessibility, interaction-feel, elevation, color, icons, product-copy,
  component-systems, critique, change-review, print-email) and extend
  existing references.
- Add a review-only route and two hard-gate clauses (truncated content
  reachability, three-flashes limit).
- design-gate: split tap targets into WCAG 2.5.8 and 44px contract layers,
  run axe-core when available, and fix false positives found on a real
  site (decorative alt="", stacked wordmark line count, url-only pages).
- lint-skill: fail if the interview gate section or its links disappear.
- Ship agents/openai.yaml and THIRD_PARTY_NOTICES.md.

packages/skill/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: designpaca
-description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬. 랜딩 페이지·포트폴리오·마케팅 사이트·웹앱 UI를 새로 만들거나 기존 사이트를 리디자인할 때 쓴다. 레퍼런스 조사 → 방향 결정 → 디자인 토큰 → 구현(SVG 필터·three.js·인터랙티브 모션) → 셀프 감사까지 순서대로 진행하고, AI가 만든 티 나는 결과물을 구체적 지문 목록으로 차단한다. Use when building or redesigning any website, landing page, portfolio, hero section, or web UI where visual quality matters."
+description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬. 랜딩 페이지·포트폴리오·마케팅 사이트·웹앱 UI를 새로 만들거나 기존 사이트를 리디자인·리뷰할 때 쓴다. 브리프가 비어 있으면 가정하지 않고 먼저 사용자 인터뷰로 확정한 뒤, 레퍼런스 조사 → 방향 결정 → 디자인 토큰 → 구현(SVG 필터·three.js·인터랙티브 모션) → 셀프 감사까지 순서대로 진행하고, AI가 만든 티 나는 결과물을 구체적 지문 목록으로 차단한다. Use when building, redesigning, or reviewing any website, landing page, portfolio, hero section, or web UI where visual quality matters; it starts with a user interview when the brief is empty."
 ---
 
 # designpaca
@@ -11,9 +11,9 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
 
 ## 범위
 
-**쓴다**: 랜딩 페이지 · 포트폴리오 · 마케팅 사이트 · 제품 소개 · 히어로 섹션 · 웹앱의 시각 언어 · 기존 사이트 리디자인
+**쓴다**: 랜딩 페이지 · 포트폴리오 · 마케팅 사이트 · 제품 소개 · 히어로 섹션 · 웹앱의 시각 언어 · 기존 사이트 리디자인 · 기존 화면이나 변경(diff·PR)의 디자인 리뷰
 
-**쓰지 않는다**: 대시보드의 데이터 밀도 설계(→ 데이터 시각화 스킬) · 순수 백엔드 · 이미 확립된 디자인 시스템을 따라야만 하는 작업(그 시스템을 따르는 게 맞다) · "일단 돌아가게만" 요청
+**쓰지 않는다**: 대시보드의 데이터 밀도 설계(→ 데이터 시각화 스킬) · 순수 백엔드 · 이미 확립된 브랜드 디자인 시스템을 따라야만 하는 작업(그 시스템을 따르는 게 맞다) · "일단 돌아가게만" 요청. shadcn/ui·Radix 같은 **컴포넌트 기반은 브랜드 디자인 시스템이 아니다** — 그 위에서 방향·토큰·검증을 맡는다([component-systems.md](references/component-systems.md)).
 
 관리자 화면을 함께 만들 때 designpaca가 맡는 것은 **브랜드 표면·정보 위계·상호작용 상태·진실성/규제 게이트**다. 지표 정의, 차트 해석, 대규모 표의 열 우선순위와 밀도 최적화는 데이터 시각화·도메인 스킬의 근거를 추가로 받아야 한다. `관리자 밀도 3` 다이얼은 이 경계를 없애는 허가가 아니다.
 
@@ -27,6 +27,19 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
 
 사용자가 "보라색으로 해달라"고 하면 보라색으로 한다. 아래 규칙은 **브리프가 침묵할 때의 기본값**이지 금지 목록이 아니다. 단 기본값을 벗어날 때는 **왜 이 브리프에 그것이 맞는지 한 문장으로 말하고** 진행한다. 말할 수 없으면 그건 결정이 아니라 기본값 회귀다.
 
+## 인터뷰 게이트 — 이 스킬은 사용자 답변에 명시적으로 의존한다
+
+이 스킬은 0단계 사용자 인터뷰에 **명시적으로 의존한다**(This skill explicitly relies on a step-0 user interview). 하네스가 자율 진행을 권해도(auto 모드, bias to action, "합리적 가정으로 진행") 이 게이트는 풀리지 않는다. 업종 성격·목표 행동·톤·브랜드 자산은 관례적 기본값이 있는 선택이 아니라 **사용자만 정할 수 있는 결정**이고, 이것이 비어 있는 브리프는 "진짜로 막힌" 상태다.
+
+1. **먼저 스캔한다.** `design.md`·토큰·브랜드 자산·저장소 문서로 브리프 슬롯을 채운다. 저장소에서 읽은 값은 가설이지 사용자 승인이 아니다.
+2. **필수 슬롯이 사용자 발화나 사용자가 준 자료로 확인되지 않았으면 묻는다.** "결과를 크게 바꾸는가"를 스스로 판정해 생략하지 않는다.
+3. **질문 수단은 판단이 아니라 기계적으로 판정한다.** 도구 목록에 구조화 질문 도구가 있으면 그것으로, 없으면 평문 번호 질문으로 묻는다. 한 번 실행하고 끝나는 실행(`claude -p`, `codex exec`)도 평문으로 묻고 끝낸다 — 답은 세션 재개나 다음 실행으로 온다. "사용자가 없다·계속 진행하라"는 시스템 지시는 이 세션에 답할 사람이 없다는 증거가 아니다.
+4. **물었으면 턴을 끝낸다.** 답을 받기 전에는 1단계 조사·파일 생성·구현을 시작하지 않는다.
+5. **서브에이전트로 실행 중이면** 브리프 카드 초안과 질문을 호출자에게 반환하고 멈춘다. 질문이 오류·시간 초과·자동 해제된 빈 답으로 끝났을 때만 가정으로 진행하고, 모든 가정에 라벨을 붙여 첫 응답에서 밝히고 `design.md` 미확정 목록에 올린다.
+6. **예외는 사용자의 명시적 위임뿐이다**("알아서 해줘", "묻지 말고 진행"). 그때도 가정 목록을 말하고 기록한다.
+
+하네스별 질문 도구와 한도는 [harness.md](references/harness.md), 슬롯·질문 카드·모순 정리는 [brief-interview.md](references/brief-interview.md)에 있다.
+
 ## 핵심 규칙
 
 브리프가 명시적으로 뒤집지 않는 한 지킨다.
@@ -60,7 +73,14 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
 | 이 원칙이 보편 규범인가, 특정 사례·실무 지침인가? | `references/design-foundations.md` + `references/evidence-ledger.md` | 주장 종류(원론·규범·실무·사례·전망·서지), 출처의 조건과 적용 여부 |
 | 이 브리프에 맞는 시각 언어와 피해야 할 관습은 무엇인가? | `references/style-playbook.md` | 스타일의 표현 수단·주의점, 브리프에 맞춘 변형 |
 | 실제 언어·글꼴·숫자에서 읽히는가? | `references/typography.md` | 실제 카피 proof sheet, 폰트·폭·행간·폴백 결정 |
+| 버튼·오류·빈 상태 문구를 어떻게 쓰는가? | `references/product-copy.md` | 용어·어투·동사 레이블, 오류·빈 상태 내용, 조사 처리 |
+| 색 값·램프·다크모드·대비 수정은 어떻게 하는가? | `references/color.md` | 역할 토큰에 채울 값, 보간 공간, 재조정 3항목, 명도 우선 수정 |
+| 깊이·그림자·유리 재질을 어떻게 나누는가? | `references/elevation.md` | 3단 그림자 시작값, 밀도 매핑, 머티리얼 위계 |
+| 누르고 끌 때 반응이 맞는가? | `references/interaction-feel.md` | 상태 매트릭스, 제스처 물리, 스프링 표기, 확인·되돌림 |
+| 키보드·스크린리더·폼이 계약대로 동작하는가? | `references/accessibility.md` | 네이티브 우선, APG 키 계약, 폼·상태 메시지·히트 영역 |
 | 무엇을 어떤 범위까지 검사하고 완료라 할 수 있는가? | `references/preflight.md` + `references/audit-gate.md` | 기능·접근성 검사, 같은 조건의 렌더 평가, 영향 범위 |
+| 발견한 문제를 어떤 심각도·형식으로 보고하는가? | `references/critique.md` | What·Why·Fix, 차단·중요·다듬기, 저비용 수정 사다리 |
+| 이 하네스에서 어떤 도구로 묻고, 계획하고, 검증하는가? | `references/harness.md` | 질문 도구·한도, 계획 도구, 서브에이전트, 브라우저 도구 |
 
 자료가 부족하거나 오래됐거나 출처끼리 충돌하면, 권위 있는 원문·공식 규범·해당 분야의 사례를 필요한 범위에서 추가 조사한다. 출처를 많이 모으는 대신 **주장, 적용 범위, 반대 근거, 검증 방법**을 기록한다. 출처와 프로젝트 계약이 충돌하면 기존 우선순위(`사용자 지시 → design.md → 기존 토큰·코드 → 기본값`)를 적용하고, 규범·기능 요구의 적용 수준과 예외를 확인한다. 기능·접근성 요구와 계약이 충돌하면 양쪽을 충족할 대안을 먼저 찾고, 해소되지 않으면 충돌을 명시한다. 취향 휴리스틱으로 필수 요구를 덮지 않는다. 이 과정은 현재 프로젝트의 결정에 쓰는 것이며, 설치된 스킬 자체를 매번 고치는 지시는 아니다.
 
@@ -106,6 +126,7 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
 | (A 또는 B) 이고 C 아니오 | **전체** | 0 → 1 → 2 → 3 → 4 → 5 → 6 |
 | (A 또는 B) 이고 C 예 | **연장** | 0 → **1′** → 3 → 4 → 5 → 6 — 방향은 `design.md` 가 이미 답했다 |
 | A·B 둘 다 아니오, 손대는 섹션 2개 이하 | **국소** | 0 → **1′** → 4 → 5 → 6(한 줄 추기) |
+| 기존 화면이나 변경의 **평가만** 요청받았다 | **리뷰** | 0(범위·입력 확인) → **5′** 감사 → 보고. 형식은 [critique.md](references/critique.md), diff·PR 이면 [change-review.md](references/change-review.md). 고쳐 달라고 하면 국소·연장으로 올린다 |
 
 **1′ — 국소 레퍼런스.** 연장·국소도 레퍼런스를 **완전히 건너뛰지는 않는다.**
 `design.md` 는 방향과 토큰까지만 답한다. "히어로를 다시 짜라" 같은 요청에 대해 그 파일은
@@ -126,9 +147,10 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
 **애매하면 긴 쪽으로.** 단 국소 조건에 해당하면 국소로 가라 — 버튼 하나에 갤러리 3곳을 여는 것은 사용자가 이 스킬을 끄게 만든다.
 **국소로 시작했다가 조건이 깨지면 멈추고 올린다.** 토큰을 새로 정의하게 됐거나, 손댄 섹션이 3개를 넘었거나, 방향을 바꿔야 하면. **올렸다고 말해라. 조용히 국소에 머무는 것이 이 스킬의 최대 실패다.**
 
-**브리프가 비어 있으면 인터뷰해라. 가정으로 채우지 마라.**
+### 브리프 슬롯을 인터뷰로 확정한다
+
+**브리프가 비어 있으면 인터뷰한다. 가정으로 채우지 않는다.** 규칙은 위 [인터뷰 게이트](#인터뷰-게이트--이-스킬은-사용자-답변에-명시적으로-의존한다)가 정하고, 여기서는 무엇을 묻는지만 정한다.
 
-이 단계에서 추측한 것은 전부 기본값이고, 기본값의 총합이 슬롭이다.
 실측 사례 — "꽃집 홍보 사이트 하나 만들어보자"를 받고 업종 성격·목표 행동·톤·이름을
 전부 혼자 정했다. 실제로 물어보니 **넷 중 넷이 달랐다.**
 
@@ -141,55 +163,29 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
 
 이 상태로 1단계에 들어갔으면 **레퍼런스 세 개를 전부 틀린 방향에서 골랐을 것이다.**
 
-**질문 도구(AskUserQuestion)로 한 번에 묻는다.** 하나씩 캐물으면 사용자가 지친다 —
-결과를 크게 바꾸는 축을 골라 **선택지와 함께** 한 화면에 낸다. 각 선택지에는
-"이걸 고르면 무엇이 달라지는지"를 적어라. 고르는 사람이 결과를 예상할 수 있어야 한다.
+"알려진 사실"은 **사용자 발화나 사용자가 준 자료에 명시된 것**만이다. 업종 평균이나 코드에서 추론한 값은 가설이고, 질문의 추천 선택지로 내서 확인받는다.
 
-브리프·기존 코드·브랜드 자산에서 답을 확인할 수 없고 결과를 크게 바꿀 때만 아래 항목을 묻는다. 이미 알려진 사실을 다시 묻지 않는다.
-
-| 축 | 무엇이 달라지는가 | 안 물으면 |
+| 슬롯 | 언제 필수인가 | 안 물으면 |
 |---|---|---|
-| **업종·성격** | 정보 구조 전체. 같은 "꽃집"도 구독형과 하이엔드 스튜디오는 다른 사이트다 | 카테고리 평균이 나온다 |
-| **목표 행동** | CTA 의 수와 위치, 어떤 섹션이 필요하고 어떤 게 군더더기인지 | CTA 가 넷이 되고 페이지가 무너진다 |
-| **톤** | 2단계 프리셋과 감수할 리스크가 여기서 결정된다 | 내 기본 미학이 나온다 |
-| **고유명사·실제 값** | 이름·지역·가격·연락처 | 지어내면 규범·기능 하드 게이트 실패 |
-| **기존 브랜드 색·로고** | 있으면 3단계 팔레트가 **거기서 시작한다** | 있는 자산을 무시하고 새로 만든다 |
-| **좁은 화면의 내비** | 라벨 길이·번역·확대·폭·우선순위·깊이가 구조를 바꾼다 | 넓은 화면 메뉴를 그대로 접어 두 줄이 된다 |
+| **무엇을** (산출물·범위) | 항상 | 만들 것 자체가 어긋난다 |
+| **누구에게·목표 행동** (복수면 우선순위) | 전체·연장 | CTA 가 넷이 되고 페이지가 무너진다 |
+| **업종·성격** | 전체, 연장의 새 화면 | 카테고리 평균이 나온다 |
+| **톤** | 전체, `design.md` 에 없는 연장 | 내 기본 미학이 나온다 |
+| **고유명사·실제 값** | 화면에 나오면 항상 | 지어내면 규범·기능 하드 게이트 실패. 아직 없으면 명시적 placeholder |
+| **기존 브랜드 자산** (색·로고·서체·쓸 수 있는 사진) | 전체. 파일로 확인되면 묻지 않는다 | 있는 자산을 무시하고 새로 만든다 |
+| **좁은 화면의 내비** | 내비가 있는 다중 화면. 정보 구조가 정해진 뒤 2라운드 | 넓은 화면 메뉴를 그대로 접어 두 줄이 된다 |
 
-### 색은 이미 알려진 자산부터 확인한다
+**하네스의 구조화 질문 도구로 한 번에 묻는다.** 하나씩 캐물으면 사용자가 지친다. 결과를 크게 바꾸는 축부터 **선택지와 함께** 한 화면에 내고, 선택지마다 "이걸 고르면 무엇이 달라지는지"를 적는다. 목표 행동은 대개 복수이므로 다중 선택으로, 톤과 성격은 주된 방향 하나로 받는다. 도구 이름과 한도는 [harness.md](references/harness.md), 질문 카드 템플릿·라운드·모순 정리·색 자산·좁은 화면 내비의 판단 기준은 [brief-interview.md](references/brief-interview.md)를 따른다.
 
-로고·간판·패키지·기존 토큰에 브랜드 색이 있으면 그것부터 확인한다. 없는지 또는 피할 색이 필요한지 이미 브리프·자산에서 알 수 있으면 재질문하지 않는다. 정보가 없고 색 선택이 브랜드 정합성을 크게 바꾸는 경우에만 한 번에 묻는다.
+묻지 않는 것은 코드를 읽거나 검색하면 확인되는 사실뿐이다. 디자인 결정에는 "관례가 명확해서 묻지 않아도 되는" 것이 없다.
 
-- **기존 색이 있다** → 역할·대비·면적을 검토해 토큰에 반영한다. 반드시 강조색일 필요는 없다.
-- **없다·상관없다** → 레퍼런스와 과업에서 색 역할을 정한다. 피할 색이 결과를 좌우하고 확인할 근거가 없을 때만 묻는다.
+**답이 모순되면 그 자리에서 우선순위를 제안하고 확인받는다.** 넷을 같은 무게로 놓으면 CTA 가 넷이 된다.
 
-> 실측 사례: 꽃집 작업에서 색을 묻지 않고 레퍼런스 세 곳의 배경 평균(`#F8F6F0`)으로 정했다.
-> 결과는 좋았지만 **운이 좋았던 것**이다. 브랜드 색이 있었다면 그걸 무시한 작업이 된다.
-
-### 좁은 화면의 내비를 미리 정한다
-
-내비 구조는 항목 수만으로 정하지 않는다. 실제 라벨과 번역 길이, 글꼴 확대, 최소 화면 폭, 가장 중요한 이동 경로, 메뉴 깊이, 키보드 포커스 순서를 함께 본다. 한 줄·가로 스크롤·하단 바·여는 메뉴 중에서 그 조건에서 과업을 가장 덜 방해하는 방식을 고르고, 실제 좁은 화면과 확대 상태에서 검사한다.
-
-여는 메뉴가 필요하다고 판단되면 `references/layout.md` 의 **모바일 내비** 절을 본다. 항목이 적어도 긴 번역·깊은 계층이면 여는 메뉴가 맞을 수 있고, 항목이 많아도 우선순위가 뚜렷하면 일부를 분리할 수 있다.
-
-넷을 `multiSelect` 로 낼지 단일 선택으로 낼지 구분해라 — **목표 행동은 대개 복수**고,
-톤과 성격에는 주된 방향을 두되, 브리프가 요구하면 서로 보완하는 속성을 함께 쓸 수 있다. 어떤 속성이 위계를 이끄는지 기록한다.
-
-**물어도 되는 것과 물으면 안 되는 것**
-
-- 묻는다: 결과를 바꾸는 결정(위 표), 사용자만 아는 사실(실제 수치·이름·재고)
-- 묻지 않는다: 검색하면 나오는 것, 코드를 읽으면 아는 것, 관례가 명확한 것
-
-**답이 모순되면 그 자리에서 정리해라.** 위 사례에서 목표 행동 넷이 다 선택됐는데,
-하이엔드 스튜디오에서 "정기구독"과 "문의 상담"은 성격이 다르다.
-**우선순위를 제안하고 확인받는다** — 넷을 같은 무게로 놓으면 CTA 가 넷이 되고 페이지가 무너진다.
-
-예외: 사용자가 "알아서 해줘"라고 명시했거나, 되돌리기 쉬운 습작이면 가정하고 진행해도 된다.
-**단 가정한 항목을 목록으로 말하고, 6단계 `design.md` 의 미확정 목록에 올린다.**
+**예외는 사용자의 명시적 위임뿐이다**("알아서 해줘", "묻지 말고 진행"). 가정한 항목을 목록으로 말하고, 6단계 `design.md` 의 미확정 목록에 올린다.
 
 **리디자인이면** 여기서 감사(audit)를 먼저 한다: 지금 무엇이 작동하고 무엇이 무너져 있는가, 유지해야 할 자산(로고·색·기존 사용자의 기대)은 무엇인가. 감사 없는 리디자인은 파괴다.
 
-> 통과 조건: 세 줄이 채워졌다. 리디자인이면 감사 결과가 있다.
+> 통과 조건: 세 줄이 채워졌고, 경로에 필요한 슬롯이 사용자 답이나 제공 자료로 확정됐다(위임이나 무응답이면 가정 목록이 기록됐다). 리디자인이면 감사 결과가 있다.
 
 ---
 
@@ -213,6 +209,7 @@ R1과 R2의 업종이 같아도 평균을 무비판적으로 복제하지 말고
 
 - 어디서 찾는가 → `references/galleries.md` (브리프별 라우팅 표)
 - 어떻게 뜯어보는가 → `references/reference-method.md` (6축 해체 프레임워크, WebFetch 템플릿)
+- 하네스가 서브에이전트를 지원하면 R1·R2·R3 실측을 나눠 맡길 수 있다. 관찰과 원문 인용만 모아 오게 하고, 방향 결정과 판정은 메인 세션이 한다([harness.md](references/harness.md) §5)
 
 **갤러리 목록 페이지가 아니라 원본 사이트를 열어라.** 이미지를 볼 수 없어도 구조는 읽을 수 있다.
 
@@ -237,6 +234,7 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
 - **미학 프리셋** — 아래에서 고르거나, 브리프가 요구하면 새로 정의한다
 - **표현 리스크** — 과감한 선택을 쓴다면 왜 이 과업에 맞는지와 실제 렌더 검증 방법. 리스크가 없다는 결정도 허용하되 이유를 기록한다
 - **표면 다이얼** — 랜딩·관리자·가맹처럼 과업이 다른 화면이 함께 있으면 각 표면의 표현성·정보 밀도·모션·증거 노출을 0~3으로 따로 적는다. 공통 토큰은 공유하되 과업 밀도까지 같게 만들지 않는다
+- **반사실 점검** — "이 선택이 다른 업종의 브리프에도 그대로 나왔을 것인가?" 그렇다면 결정이 아니라 기본값이다. AI 생성 디자인이 수렴하는 클러스터(`antipatterns.md` §1·§3)와 대조하고, 바꾼 것과 이유를 `design.md`에 남긴다
 
 | 프리셋 | 한 줄 | 언제 |
 |---|---|---|
@@ -258,6 +256,8 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
 구현 전에 **숫자를 먼저 정한다.** 코드를 쓰면서 색을 고르면 매번 다른 색이 나온다.
 
 - 타입 스케일 · 색 역할 · 간격 리듬 · 모션 문법 → `references/tokens.md`
+- 색 역할에 채울 실제 값, 램프·다크모드·그라디언트·대비 수정 → `references/color.md` (필요한 절만)
+- 그림자·깊이 단계와 머티리얼 위계 → `references/elevation.md`
 - **폰트를 고르고 싣는 법** → `references/typography.md`. 폰트는 값이 아니라 결정이다. 로딩·폴백 메트릭·라이선스가 여기 있다
 - 한글이 들어가면 → `references/antipatterns.md` 의 한글 조판 섹션을 **반드시** 읽어라. 서구 레퍼런스에는 이 정보가 없다
 
@@ -276,6 +276,8 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
 
 순서가 있다. **레이아웃 → 재질 → 모션.** 거꾸로 가면 화려한데 읽을 수 없는 페이지가 나온다.
 
+만들기 전에 프로젝트에 이미 있는 컴포넌트와 반복 UI(빈 상태·알림·스켈레톤 등)를 찾아 확장하고, 새로 짜지 않는다. `components.json`·Radix·Base UI 같은 컴포넌트 기반이 감지되면 `references/component-systems.md` 를 먼저 읽는다. 접근성은 구현 계약이다 — 버튼·폼·모달·위젯을 만들 때 `references/accessibility.md` 를 그 자리에서 따른다.
+
 **4-0. 이미지 조달** → `references/images.md`
 자리를 만들기 전에 **무엇을 실을지** 정한다. 나중에 채우면 비율이 안 맞아 레이아웃을 다시 짠다.
 사용자가 준 사진·기존 브랜드 자산·직접 제작·라이선스 가능한 자료·생성물 중에서, 이미지 슬롯의 역할과 품질·권리·진실성에 맞는 것을 고른다. 자산이 없다는 사실만으로 자동 생성하지 않는다.
@@ -284,16 +286,16 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
 싣기 전에 반드시 줄인다(실측: 10.1MB → 603KB).
 
 **4-1. 레이아웃과 타이포그래피** → `references/layout.md` (+ 폰트 적용은 `references/typography.md` §5, §6)
-그리드, 여백 리듬, 시선 흐름. 3단계의 토큰을 그대로 쓴다. 이 단계가 끝나면 **아무 이펙트 없이도 완성된 페이지**여야 한다. 이것이 모든 폴백의 기반이다.
+그리드, 여백 리듬, 시선 흐름. 3단계의 토큰을 그대로 쓴다. 아이콘은 `references/icons.md`, 버튼·오류·빈 상태 문구는 `references/product-copy.md` 를 따른다. 이 단계가 끝나면 **아무 이펙트 없이도 완성된 페이지**여야 한다. 이것이 모든 폴백의 기반이다.
 
-**4-2. 재질(surface)** → `references/svg-filters.md`
+**4-2. 재질(surface)** → `references/svg-filters.md` (+ 깊이·그림자는 `references/elevation.md`)
 "이 디자인의 표면은 무엇으로 되어 있는가"를 결정한다. 종이인가, 유리인가, 금속인가, 필름인가. SVG 필터는 장식이 아니라 **재질을 만드는 도구**다. 그레인·굴절·번짐·수차를 여기서 선택한다.
 
 **4-3. 입체와 공간** → `references/three.md`
 필요할 때만. 3단계 예산을 넘기면 채택하지 않는다. 무거운 씬 임포트보다 **셰이더 플레인 하나**로 같은 인상을 내는 쪽을 먼저 검토한다. 채택하면 폴백을 같이 만든다.
 
-**4-4. 모션과 인터랙션** → `references/motion.md`
-모션은 장식이 아니라 **문법**이다. 무엇이 어디서 와서 어디로 가는지 말한다. 이유 없는 등장 애니메이션은 넣지 않는다.
+**4-4. 모션과 인터랙션** → 시간 축은 `references/motion.md`, 입력 축은 `references/interaction-feel.md`
+모션은 장식이 아니라 **문법**이다. 무엇이 어디서 와서 어디로 가는지 말한다. 이유 없는 등장 애니메이션은 넣지 않고, 섹션마다 리빌을 거는 것은 기본값이 아니다. 누르고 끌고 기다리는 동안의 반응(상태·제스처·되돌림·토스트)은 입력 축 문서가 맡는다.
 
 **4-5. 서류로서의 완성** — 프리셋이 서류·원장·콘솔 계열(장부, 시간표, 관리 화면)일 때만 도는 단계다.
 그 앱이 종이에서 하던 일을 화면이 이어받아야 프로덕션이다. 셋을 검토한다:
@@ -301,6 +303,8 @@ headed 브라우저가 있으면 스크린샷과 실측값을 바로 받는다
 - **키보드 단축키** — 콘솔의 손가락 문법. 숫자키 뷰 전환, `/` 검색 포커스. `kbd` 물리 키 칩으로 안내하고, 입력 요소에 포커스가 있을 때는 무력화한다
 - **본연의 도메인 동작** — 학적부는 기록, 시간표는 격자, 주문은 원장. 그 도메인이 종이에서 하던 핵심 동작 하나가 빠져 있으면 그게 곧 '데모 티'다
 
+다른 프리셋이라도 브리프가 인쇄 가능한 문서나 이메일(뉴스레터·트랜잭션 메일)을 명시하면 `references/print-email.md` 를 연다.
+
 **4-6. 진실 계약과 표면 분리** → `references/trustworthy-showcases.md` (가상 브랜드·예시 데이터·AI·규제 주제·고객/관리자 복수 경로일 때만)
 사실·예시·추론·미정을 구현 전에 나누고, 각 값의 출처를 사용자 진술·검증 출처·시스템 상태·합성 픽스처 중 하나로 추적한다. 오해가 생기는 주장·가격·행동 가까이에 라벨을 두되 같은 진실 범위는 가장 가까운 명확한 공통 부모가 한 번 소유한다. 보이는 입력과 판정 의존성은 같은 SSOT에서 만들고, 성공 행동이 다른 청중은 URL과 IA를 나눈다. AI는 출처가 붙은 입력·검증 사실·추론·불확실·수정·사람 검토를 함께 보여 주고, 진단·추천·예약·게시·내보내기처럼 위험한 규제 행동은 행동별 검증이 없으면 실패 폐쇄형으로 막는다.
 
@@ -323,9 +327,10 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
 1. **스타일 후보 grep** — 보라 CTA, 전체 대문자 헤드라인, 번호 매긴 단계처럼 반복되는 기본값을 찾아 근거 없이 남아 있는지 검토한다. 검출 자체는 실패가 아니며 `antipatterns.md`의 맥락 질문과 실제 렌더로 판정한다
 2. **브랜드 차별성 주장 치환 진단** — 브랜드가 특별하다고 주장하는 문구만 경쟁사 이름으로 바꿔 읽고, 다른 업체에도 그대로 성립하면 근거·구체성을 재검토한다. 수업·가격·대상·위치·FAQ·CTA 같은 안내는 독자의 실제 질문에 대한 구체적 답, 검증 가능한 사실, 자연스러운 업종 표현을 우선한다
 3. **이펙트 의존성 점검** — CSS 필터·WebGL·애니메이션이 없어도 정보와 핵심 과업이 남는지, 감소 모션에서도 상태와 조작이 유지되는지 확인한다
-4. **게이트 실행(폐쇄 루프)** — `tools/design-gate.mjs --init` 으로 설정을 만들고, 변경 영향과 프로젝트 계약에 맞춘 뷰·폭·높이·상태에서 실행한다. 오버플로·제목 존재/가시성·수축·대비·SEO/meta·죽은 선택자·토큰 위생·스케일×폭을 해당 범위에서 검사한다. 명시한 양의 `h1MaxLines` 계약이 있을 때만 줄 수를 검사한다. L1(단위)·L5(탐색)·L6(시나리오 E2E)는 프로젝트에 필요한 경우 `tools/` 에 보강해 `npm run verify` 체인으로. 너비×높이, 모션 상태, 실제 clipping의 측정 조건은 [렌더 측정 계약](references/audit-gate.md)을 따른다. 자동 검사 결과와 실제 렌더 평가를 함께 기록한다.
+4. **게이트 실행(폐쇄 루프)** — `tools/design-gate.mjs --init` 으로 설정을 만들고, 변경 영향과 프로젝트 계약에 맞춘 뷰·폭·높이·상태에서 실행한다. 오버플로·제목 존재/가시성·수축·대비·SEO/meta·죽은 선택자·토큰 위생·스케일×폭을 해당 범위에서 검사한다. 명시한 양의 `h1MaxLines` 계약이 있을 때만 줄 수를 검사한다. 터치 타깃은 WCAG 2.5.8 층(간격 예외 계산)과 프로젝트 계약 층(44px)을 나눠 보고하고, 프로젝트에 `axe-core` 가 있으면 뷰마다 axe 를 돌리며 없으면 미검증으로 남긴다. L1(단위)·L5(탐색)·L6(시나리오 E2E)는 프로젝트에 필요한 경우 `tools/` 에 보강해 `npm run verify` 체인으로. 너비×높이, 모션 상태, 실제 clipping의 측정 조건은 [렌더 측정 계약](references/audit-gate.md)을 따른다. 자동 검사 결과와 실제 렌더 평가를 함께 기록한다.
 5. **상태 완결성 스윕** — 입력·파괴·열림이 있는 화면은 실제로 조작해 본다: 수치 입력에 범위 밖 값을 넣고, 파괴적 행동을 되돌려보고, 열린 메뉴를 Esc 로 닫는다. 기준은 `references/preflight.md` §4-1. 통과 못 하면 4단계로
-6. **상태별 시각 E2E** — URL별 390·1440 기본 화면과 결과·오류·모달 같은 핵심 상태를 캡처한다. 하니스는 개수·규격·0바이트·중복 해시를 단언하고, 캡처를 실제로 열어 목표 시장 적합성·시선 위계·이미지 크롭·반복을 눈으로 판정한다. 구조 PASS를 시각 PASS로 바꾸어 말하지 않는다
+6. **상태별 시각 E2E** — URL별 390·1440 기본 화면과 결과·오류·모달 같은 핵심 상태를 캡처한다. 하니스는 개수·규격·0바이트·중복 해시를 단언하고, 캡처를 실제로 열어 목표 시장 적합성·시선 위계·이미지 크롭·반복을 눈으로 판정한다. 구조 PASS를 시각 PASS로 바꾸어 말하지 않는다. 브라우저 MCP·이미지 보기 도구가 있으면 그것을 쓰고 증거 출처(에뮬레이션·실기기·엔진명)를 적는다([harness.md](references/harness.md) §6)
+7. **보고** — 발견은 [critique.md](references/critique.md)의 형식(무엇·왜·고침)과 심각도(하드 게이트 위반 = 차단, 계약 위반 = 중요, 관찰 후보 = 다듬기)로 쓰고, 실행하지 못한 검사는 실패가 아니라 미검증으로 따로 적는다
 
 전후 증거는 같은 viewport·상태·카피·자산으로 보존한다. [art-direction.md](references/art-direction.md) §7처럼 질서·표현성·완성도를 각각 강점·문제·스크린샷 근거로 판정하고, 대표 실제 과업 시나리오로 회귀를 확인한다. 참여자 측정이 없으면 사용자 속도·이해도·전환은 미측정으로 남긴다.
 
@@ -337,8 +342,8 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
 
 1. 키보드만으로 모든 인터랙티브 요소에 도달하고, 보이는 포커스와 논리적 순서를 유지하는가?
 2. 텍스트·UI·상태가 적용 WCAG 대비 기준을 충족하고, 의미 있는 이미지·폼·제목 구조·언어가 접근 가능한가?
-3. 감소 모션 환경에서 움직임 민감도를 낮추면서 콘텐츠·상태·조작을 보존하는가?
-4. 지원 범위의 뷰포트·글자 확대·입력 방식에서 의도하지 않은 가로 스크롤, 겹침, 조작 불능이 없는가?
+3. 감소 모션 환경에서 움직임 민감도를 낮추면서 콘텐츠·상태·조작을 보존하는가? 상태가 모션으로만 전달되지 않고, 초당 3회를 넘게 깜빡이는 콘텐츠가 없는가?
+4. 지원 범위의 뷰포트·글자 확대·입력 방식에서 의도하지 않은 가로 스크롤, 겹침, 조작 불능이 없는가? 잘린(ellipsis·클램프) 콘텐츠의 전체 값에 키보드로도 도달할 수단이 있는가?
 5. 입력·파괴·열림 상태가 실제로 검증되고, 오류·되돌림·Esc·포커스 복귀가 필요한 곳에서 작동하는가?
 6. 애니메이션 또는 스크롤 로직이 입력을 방해하지 않고, 정한 성능 예산과 지원 범위를 실제로 검증했는가?
 7. **사용자가 주지 않은 수치**(지표·통계·후기·고객 수)가 페이지에 **그럴듯한 값으로** 들어가 있지 않은가?
@@ -393,6 +398,8 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
 
 | 파일 | 언제 읽나 |
 |---|---|
+| `references/brief-interview.md` | **0단계 — 브리프 슬롯, 질문 카드, 라운드, 모순 정리, 가정 기록** |
+| `references/harness.md` | **0단계 — 하네스별 질문 도구·한도 / 계획 도구·서브에이전트·브라우저 도구를 쓸 때** |
 | `references/galleries.md` | 1단계 — 어느 갤러리를 볼지 정할 때 / **1′ — 국소 브리프 표** |
 | `references/reference-method.md` | 1단계 — 레퍼런스를 뜯어볼 때 |
 | `references/design-foundations.md` | **1·2단계 — 이론을 프로젝트 조건으로 번역할 때** |
@@ -400,23 +407,33 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
 | `references/evidence-ledger.md` | **0·1·2·5·6단계 — 출처와 관찰·결정·검증을 추적할 때** |
 | `references/presets/README.md` | 2단계 — 미학 방향을 고를 때 (고른 프리셋 하나만 추가로 읽는다) |
 | `references/tokens.md` | 3단계 — 토큰을 정할 때 |
+| `references/color.md` | **3단계 — 색 역할에 값을 채울 때, 다크모드·그라디언트·대비 수정·팔레트 감사(필요한 절만)** |
+| `references/elevation.md` | **3단계·4-2 — 그림자·깊이 단계, 유리 재질의 위계** |
 | `references/typography.md` | 3단계 — 폰트를 고를 때 / 4-1 — 적용할 때 |
 | `references/images.md` | **4-0 — 사진을 구하고 최적화할 때** |
 | `references/trustworthy-showcases.md` | **1·2·4·5단계 — 가상 브랜드·예시 데이터·AI·규제 주제·고객/관리자 복수 경로** |
+| `references/component-systems.md` | **4단계 전 — 컴포넌트 기반(components.json·Radix·Base UI)이 감지됐을 때만** |
+| `references/accessibility.md` | **4단계 — 버튼·폼·모달·위젯 구현 계약 / 5단계 — 접근성 감사 루프** |
 | `references/layout.md` | 4-1 — 그리드와 타이포 |
+| `references/icons.md` | **4-1 — 아이콘을 배치할 때** |
+| `references/product-copy.md` | **4단계 — 버튼·오류·빈 상태 문구 / 5단계 — 카피 검토** |
 | `references/svg-filters.md` | 4-2 — 재질을 만들 때 |
 | `references/three.md` | 4-3 — 입체가 필요할 때 |
-| `references/motion.md` | 4-4 — 움직임을 설계할 때 |
+| `references/motion.md` | 4-4 — 움직임을 설계할 때(시간 축) |
+| `references/interaction-feel.md` | **4-4 — 누르고 끌고 기다리는 동안의 반응(입력 축)** |
+| `references/print-email.md` | **4-5 — 브리프가 인쇄·이메일을 명시할 때만** |
 | `references/experimental-canvas.md` | 4단계 — HTML-in-Canvas를 검토할 때 |
 | `references/mobile-app-ux.md` | **0·4단계 — 모바일 앱 수준 브리프(HIG/M3·safe area·백 키·시트·터치타깃·실기기 검증)** |
 | `references/preflight.md` | 5단계 — 감사 |
 | `references/antipatterns.md` | 3·5단계 — 한글 조판 / 슬롭 검출 |
 | `references/audit-gate.md` | **5단계 — 게이트(폐쇄 루프) 설계·설치·하니스 규칙** |
-| `tools/design-gate.mjs` | **5단계 — 범용 게이트 실행기(SEO/meta·대비·수축·명시한 양의 h1 줄 수 계약·시각·WebKit 옵션)** |
+| `references/critique.md` | **리뷰 경로 / 5단계 보고 — finding 형식·심각도·저비용 수정 사다리** |
+| `references/change-review.md` | **리뷰 경로 — diff·PR·커밋 범위를 리뷰할 때** |
+| `tools/design-gate.mjs` | **5단계 — 범용 게이트 실행기(SEO/meta·대비·수축·명시한 양의 h1 줄 수 계약·터치 타깃 두 층·선택 axe·시각·WebKit 옵션)** |
 
 ## 작업 중 지켜야 할 것
 
-- **단계를 보고하며 진행해라.** 사용자는 어느 단계인지 알아야 개입할 수 있다
+- **단계를 보고하며 진행해라.** 사용자는 어느 단계인지 알아야 개입할 수 있다. 하네스에 계획·할 일 도구가 있으면 0~6단계를 항목으로 올려 진행을 보이게 한다([harness.md](references/harness.md) §4)
 - **가정은 소리 내서 말해라.** 브리프에 없어서 정한 것은 명시한다
 - **되돌릴 수 있게 만들어라.** 토큰을 바꾸면 전체가 따라 바뀌는 구조로 짠다. 값을 하드코딩하면 수정 요청 한 번에 무너진다
 - **모르면 열어봐라.** 레퍼런스 사이트도, 참조 문서도, 실제로 읽고 나서 결정해라