feat(skill): 자율 검증 폐쇄 루프 내재화 — 0.6.0

- 핵심 규칙 6: 완료의 정의는 게이트 통과. 사용자를 QA로 쓰지 않는다
- 5단계 기계 검사 4번째: design-gate 실행 의무화
- references/audit-gate.md: 사고-검사 매핑, SEO/meta 체크리스트, OS/브라우저 특성, 하니스 규칙
- tools/design-gate.mjs: 범용 게이트(메타/SEO·대비·수축·리듬·트랙·스케일×폭 + 옵션 L0/L3/L4, checks 깊은 병합)
- 리듬·트랙 불변식: 숫자 라벨 등폭·빈 셀 트랙 균일·등간격 — 시간표 자동배치 결함 재현 픽스처 검출, 앱 15뷰 통과(오탐 0)

feat(site): 관리 앱 2종 프로덕션 콘솔(v6→v18)

- 가온 학적부 9뷰·두레 수강신청 6뷰: shadcn 문법, Pretendard/Noto Serif/IBM Plex 폰트 전략, 볼드 금지(400/500/600), WCAG AA 대비 전면 교정, 한글 keep-all 조판
- LMS 필수 요소(알림 센터·공지·진도·평가 유형·출결 사유·학점 경고), 12명 기준 데이터 정합, SEO 구조(h1 유일·OG/twitter·og.png)
- 시간표 자동배치 결함 수리(명시적 격자 좌표)
- QA 게이트: L0 stylelint/html-validate · L1 단위 30 · L2 감사 61+불변식 · L3 시각회귀 30화면 · L4 WebKit · L5 키보드 탐색 — npm run verify 실패 시 배포 금지 체인

research/audit-references.md

@@ -0,0 +1,58 @@
+# 레퍼런스 조사 파일 감사 보고
+
+- 감사일: 2026-08-21
+- 방법: 각 파일이 주장하는 핵심 관찰(정확한 hex 색상, 폰트, 페이지 구성, 수치)을 WebFetch 및 원본 HTML/CSS 직접 fetch(grep)로 실제 사이트와 비교.
+- 판정 기준: **일치** = 실제로 확인됨 / **불일치** = 실제와 다름 / **확인불가** = 접속 불가 또는 해당 관찰을 확인할 수 없음.
+- 참고: spacex.com·neuralink.com은 JS 렌더링 앱이라 셸 HTML+CSS 번들로 검증했고, spacex.com 콘텐츠는 web.archive.org 2024 스냅샷으로 교차 확인. leica-camera.com의 집계 CSS는 봇 차단(301/403)으로 직접 열지 못함(HTML과 렌더된 페이지 본문은 확인).
+
+## 종합 판정표
+
+| 파일명 | R1 사이트 | 파일의 주장 | 실측 결과 | 판정 |
+|---|---|---|---|---|
+| dogfood-aerospace/01-references.md | spacex.com | Raptor 챔버 압력 300 bar·Isp 330s 텔레메트리를 구리 연소실 청사진과 노출. 배경 `#07101C`, 강조 `#FF6B00`+`#00A3FF`, 대비 16.2:1 | 실제 사이트는 순흑 `.app-background{background-color:#000}`, 텍스트 rgba(240,240,250), 폰트 **D-DIN**. 인라인 CSS+styles.css 전체에서 `#07101C`/`#FF6B00`/`#00A3FF` 전혀 없음. Starship 차량 페이지(web.archive.org 2024 포함)는 Raptor **추력(230 tf)·치수**만 표기하고 챔버 압력·Isp·청사진은 존재하지 않음 | **불일치** — 주장 수치·색상은 사이트에 없음. 아카이브에도 없으므로 "지금 바뀜"이 아니라 **애초에 게재되지 않은 값을 사이트 실측으로 제시** (300 bar/Isp 330s 자체는 외부에 알려진 Raptor 사실이나 spacex.com 게재분이 아님) |
+| dogfood-aerospace/01-references.md (R2) | rocketlabusa.com → rocketlabcorp.com | Rutherford의 3D 프린팅·전기 구동 터보펌프 기술 다이어그램 | 도메인이 rocketlabcorp.com으로 301 리디렉션(리브랜딩). `/launch/electron/`에 "Rutherford Engine" 섹션과 **"The world's first 3D-printed, electric-pump-fed rocket engine"**, 1단 9기 Rutherford 명시, 엔진 이미지 존재 | **일치** (3D 프린팅 + 전기펌프 엔진 설명 확인; 도메인만 변경됨) |
+| dogfood-celadon/01-references.md | museum.go.kr | 어두운 암실 조명 아래 청자 비색·빙렬 스포트라이트. 배경 `#121415`, 강조 `#5B9E90`, 폰트 마루부리/본명조 | 실제 홈페이지는 **라이트 테마**(배경 `#fff`/`#f8f8f8`), 사이트 CSS(common/layout/main, 약 186KB)의 폰트는 **notokr(Noto Sans KR) 계열뿐**, 마루부리·본명조 없음. `#121415`/`#5B9E90` 전혀 없음. '청자'는 홈의 전시 제목("도자기에 핀 꽃, 상감청자")에만 등장 | **불일치** — 웹사이트에서 측정 가능한 값이 아님. 물리적 전시실(고려청자실 암실 조명)에 대한 서술을 웹 "실측값"으로 둔갑시킨 것으로 판단 |
+| dogfood-incense/01-references.md | shoyeido.co.jp | 향목 단면 결·연기 궤적을 고요한 여백에 배치. 배경 `#F7F4EE`, 강조 `#7C3B24`, 폰트 조선명조/마루부리 | 실제는 게이트웨이(일/영 분기)+`/menu.html`(일본어) 구성. 계절별 배경 이미지(summer 헤더)와 **홈 mp4 영상 루프** 사용. 발견된 hex는 `#9F140B`(적갈)뿐이고 `#F7F4EE`/`#7C3B24` 없음. 일본 사이트인데 한국 웹폰트(조선명조/마루부리) 실측 주장은 성립 불가 | **불일치** (색상·폰트: 사이트에 근거 없음, 한국 폰트 주장은 명백한 날조 신호). 단 이미지 구성(결·연기 컷) 자체는 텍스트 fetch로 확인 불가 → 해당 부분만 **확인불가** |
+| dogfood-optics/01-references.md | leica-camera.com | 홍보 영상 대신 렌즈 단면도(11군 14매)·MTF 차트를 **최상단** 배치. 배경 `#0B0C0E`, 강조 `#00E5FF` 시안, Cinzel+JetBrains Mono, 헤더-히어로 120px | 홈은 제품 캐러셀(SL3-P, Cine Compact 1 등) 중심의 **순수 마케팅 구성**, 렌즈 목록 페이지도 브랜드 스토리·제품 카드뿐으로 MTF·단면도 없음 → "MTF 최상단" 주장과 직접 모순(기술자료는 제품 상세의 다운로드 자료 수준). HTML에 `#00E5FF`·Cinzel·JetBrains 전혀 없음(집계 CSS는 봇 차단으로 미확인). Leica 브드 레드가 표준인데 시안 단일 강조 주장은 근거 없음 | **불일치** (페이지 구성 주장: 명백히 다름. 정밀 수치 17.8:1·120px·Cinzel/JetBrains Mono: 근거 미발견, 일부는 차단으로 **확인불가**) |
+| dogfood-synapse/01-references.md | neuralink.com | 1024채널 스레드 전극 현미경 사진·20 kS/s 스파이크 래스터 플롯을 직접 노출. 배경 `#060709`, 강조 `#FFB800`, 대비 17.5:1 | 사이트는 Vite 기반 CSR이라 셸 HTML에 본문 없음. CSS 번들(38KB)의 배경은 `#000`(10회)·`#fff` 위주, meta theme-color `#000000`. `#060709`·`#FFB800` 전혀 없음. 1024채널·램스터 플롯 노출 여부는 렌더링이 필요해 fetch로 확인 불가 | **불일치(색상)** + **확인불가(콘텐츠)** — `#060709`/`#FFB800`은 사이트 코드에 존재하지 않음. 1024채널은 실제 N1 스펙이나 홈페이지 노출 여부는 미확인 |
+
+## 세부 근거 (증거 로그)
+
+### 1. spacex.com — 불일치
+- 인라인 CSS: `.app-background{background-color:#000;color:var(--white-100)}`, `@font-face{font-family:D-DIN;...}`.
+- `styles.05babecf1191c860.css`에서 `#FF6B00`, `#00A3FF`, `#07101C` 0건.
+- web.archive.org 2024 `/vehicles/starship/`: Raptor 섹션 존재하나 수치는 추력 230 tf / 직경 1.3 m / 높이 3.1 m (RVac 258 tf)뿐, **300 bar·Isp 330s·청사진 없음**.
+- 결론: Raptor 콘텐츠 자체는 있으나, 파일이 인용한 "핵심 텔레메트리"와 6축 색상은 사이트 출처가 아님.
+
+### 2. rocketlabcorp.com (구 rocketlabusa.com) — 일치
+- `/launch/electron/`: "Rutherford Engine — Proven performance. The world's first **3D-printed, electric-pump-fed** rocket engine.", First Stage "9 Sea-level Rutherford Engines", Rutherford 엔진 이미지 포함.
+- 결론: R2 발견점(3D 프린팅·전기 구동 터보펌프)은 현재 사이트에서 그대로 확인됨.
+
+### 3. museum.go.kr — 불일치
+- 홈페이지 HTML 101KB: 표준 라이트 테마 관공서형 사이트. '청자' 2회(전시 제목).
+- `/design/content/css/{common,layout,main}.css`(약 186KB): 배경 `#fff`/`#f8f8f8`/`#000`(일부), 폰트 `notokr-medium/bold/regular/light/DemiLight` 전용. `#121415`/`#5B9E90`/마루부리/본명조 0건.
+- 결론: 주장된 6축 실측값은 웹사이트에서 나온 것이 아님.
+
+### 4. shoyeido.co.jp — 불일치(실측값)
+- 게이트웨이: 일본어/English/LISN/Wa-Kanon/Shoyeido America 분기.
+- `/menu.html`(일본어 메인): `body{background-image:url(.../summer/h_img01.jpg)}` 계절 이미지, `home-img.mp4` 홈 영상, CSS에 `#9F140B`만 존재. `#F7F4EE`/`#7C3B24`/한국 폰트 0건.
+- 결론: "정적 여백 + 미색 한지 배경 + 한국 세리프 폰트" 실측은 근거 없음. 일본 사이트에 조선명조/마루부리를 실측했다는 주장 자체가 성립 불가.
+
+### 5. leica-camera.com — 불일치(구성)
+- 홈(렌더된 본문): SL3-P "All That Matters" 등 제품 캐러셀, 블로그, 이벤트 — 마케팅 우선.
+- `/en-int/photography/lenses`: 브랜드 스토리 + 제품 카드만, MTF/군-매 수치 없음.
+- HTML에서 `#00E5FF`/`#0B0C0E`/Cinzel/JetBrains 0건. 집계 CSS는 접속 차단(301/403, 쿠키·Referer 포함 시도도 실패).
+- 결론: "MTF 차트 최상단 배치" 구성 주장은 확인 가능한 범위에서 명백히 다름. 정밀 수치(120px, 17.8:1)는 검증 불가이나 사이트에서 근거 미발견.
+
+### 6. neuralink.com — 불일치(색상) + 확인불가(콘텐츠)
+- 셸 HTML: `<meta name="theme-color" content="#000000">`, CSS 번들 `index.*.css` 5개.
+- CSS 38KB: `background-color:#000` 10회, `#fff`/`#ffffff` 6회, `#060709`/`#FFB800` 0건, 커스텀 font-family 미발견.
+- `/science`(Technology) 페이지도 CSR이라 본문 없음 → 1024채널·20 kS/s 래스터 플롯 노출 여부 확인 불가.
+
+## 요약
+
+1. 5개 파일의 R1 "6축 실측값"(정밀 hex·대비비·폰트)은 **모두 실제 사이트 코드/콘텐츠에서 발견되지 않음** — 사전 지식이나 분위기로 지어낸 수치일 가능성이 높음.
+2. 유일하게 실측이 맞는 것은 aerospace **R2 Rocket Lab**(3D 프린팅+전기펌프 Rutherford 문구 그대로 존재).
+3. "지금 다르다" vs "애초에 없었다": SpaceX는 2024 아카이브에서도 없어 "애초에 없음"으로 분류 가능. Leica/Shoyeido/박물관/Neuralink의 hex·폰트는 마케팅 페이지 리뉴얼과 무관하게 측정 출처 자체가 의심됨(한국 폰트 실측 등 논리적 모순 포함).
+4. Neuralink의 1024채널, 박물관의 암실 조명처럼 "사실인 내용"과 "사이트에서 실측했다는 주장"이 뒤섞여 있으므로 후속 단계(02 이후)에서 이 파일들의 수치를 디자인 토큰 근거로 인용하지 말 것.
+5. Leica 집계 CSS·Neuralink 렌더링 본문은 봇 차단/CSR으로 직접 확인 불가 — 해당 항목만 확인불가로 남김(브라우저 렌더링 검증 권장).

research/design-principles-v11.md

@@ -0,0 +1,139 @@
+# 디자인 원론·타이포그래피·UX 방법론 조사서 — v11 적용 편
+
+조사일 2026-08-22. 14개 웹검색 + 원전 문서, 고유 출처 110여 개.
+가온 학적부·두레 수강신청 두 데모의 전 페이지·전 요소 개정 근거로 쓴다.
+항목 앞 [G]=가온 적용 [D]=두레 적용 [both]=양쪽 적용.
+
+## A. 타이포그래피 원론 (24)
+
+1. [both] 본문 행길이 45–75자(공백 포함), 이상값 66자 — UXPin, Baymard, The Crit.
+2. [both] 데스크톱 본문 행간 1.5–1.6(라틴 기준) — Pimp My Type.
+3. [both] 한글은 수평 흐름이 없어 행간을 라틴보다 넓게 — 1.6–1.7 권장 — 박스블로그(한글 웹 타이포그래피).
+4. [both] 한글 자간 기본 0이 원칙(글자사이 0 배열) — W3C 한국어 조판 요구사항.
+5. [both] 큰 제목에만 자간 축소(tracking-tight) 허용, 본문 금지 — The Crit/Smashing.
+6. [both] 웹 본문 최소 16px는 '문서 사이트' 기준이며, 밀도 높은 관리 콘솔은 14px가 업계 표준(shadcn·Ant) — Ant Design font spec.
+7. [both] 타입 스케일은 비율로: Major Third(1.25)가 UI에서 절제된 위계 — Typescale.com, Typographymaster.
+8. [both] 16px 기준 1.25 스케일: 16→20→25→31→39 — Typescale.com.
+9. [both] 위계는 크기·웨이트·색 3축으로 만든다(한 축에만 의존 금지) — Design Systems Collective.
+10. [both] 볼드(700) 금지 — 웨이트는 수치로: 본문 400, 강조 500, 제목·버튼 600. 2–3 웨이트 상한 — Ant Design, DesignerUp.
+11. [both] 가변 폰트로 중간 웨이트(550·650)를 쓰면 합성 볼드가 없다 — MDN Variable Fonts, web.dev.
+12. [both] 없는 웨이트는 브라우저가 합성한다(faux bold) — font-synthesis-weight: none 으로 차단 — A List Apart 'Say No to Faux Bold'.
+13. [both] strong/b 기본 700을 재정의(600)해 UA 볼드가 새지 않게 한다 — MDN font-weight.
+14. [both] 수치 데이터에는 tabular-nums — 자리 흔들림 방지 — typography 지침(스킬 typography.md §5와 일치).
+15. [both] 표 숫자열은 우측 정렬(자릿수 정렬), 텍스트 좌측 — Science Editor, UX Planet.
+16. [both] 표 헤더 정렬은 해당 열 데이터와 일치 — Pencil & Paper, Mission Log.
+17. [G] 세리프(Noto Serif KR)는 제목·표지에만 — 고딕 본문과 대비 — Noto Serif KR 특성.
+18. [D] 기술·행정 문서 톤에는 네오그로테스크(IBM Plex Sans KR) — IBM Plex 소개.
+19. [both] 한글 웨이트는 라틴보다 1단계 낮게 보정(한글 700이 라틴 700보다 무겁게 보임) — W3C/한글 조판.
+20. [both] 줄바꿈이 표를 깨지 않게 긴 식별자는 word-break: keep-all + overflow-wrap — 한글 조판.
+21. [both] 축 소형 라벨(≤11px)은 500 이상 웨이트로 — 작은 크기에서 가늘면 소실 — UXPin.
+22. [both] 문단(공지 본문 등)은 max-width 65–70ch 제한 — Baymard.
+23. [both] 행간·자간은 폰트마다 다르게 재준다(폰트 바꾸면 타이프 재조정) — Figma 타이포그래피 가이드.
+24. [both] 디스플레이 서체는 본문 금지, 위계는 웨이트+여백으로 — 표준 원론.
+
+## B. 색·대비 (12)
+
+25. [both] 본문 텍스트 대비 4.5:1 이상(WCAG 1.4.3 AA) — W3C WCAG 2.2.
+26. [both] 큰 텍스트(≥24px 또는 ≥18.66px 굵음)는 3:1 — W3C.
+27. [both] UI 구성요소·포커스 표시 3:1(1.4.11 비텍스트 대비) — W3C.
+28. [both] AAA는 7:1 — 준거하는 편이 좋으나 AA가 의무선 — WebAIM.
+29. [both] 회색 보조 텍스트(#a1a1aa급, 약 2.6:1)는 실망률 상위 원인 — 본문용 보조색도 4.5:1 필요 — WCAG.
+30. [both] 60-30-10: 지배 60 배경, 부차 30 카드·내비, 강조 10 CTA — NN/g Using Color.
+31. [both] 강조색은 희소해야 시그널이 된다(남발 금지) — LogRocket 60-30-10.
+32. [G] 상태색은 소프트 배경+짙은 잉크 조합이 배지 표준 — shadcn 문법.
+33. [both] 색만으로 상태를 구분하지 않는다(형태·라벨 병용) — WCAG 색 사용.
+34. [both] 차트 색은 데이터-잉크 비율을 해치지 않게 — Tufte/Few.
+35. [D] 벽돌(주황) 강조는 10% 이내 면적에서 — 60-30-10.
+36. [both] 그림자는 계층 신호(스택 깊이)로만 — 실제 광원 흉내 금지 — shadcn/Material elevation.
+
+## C. UX 법칙·휴리스틱 (28)
+
+37. [both] 닐슨 1 시스템 상태 가시성 — 저장·전환·계산 즉시 피드백(aria-live) — NN/g.
+38. [both] 닐슨 2 실제 세계 일치 — '장부''도장' 등 도메인 언어 — NN/g.
+39. [both] 닐슨 3 사용자 통제와 자유 — 모달 닫기·신청 취소·되돌리기 — NN/g.
+40. [both] 닐슨 4 일관성 — 같은 동작은 같은 컨트롤(칩·배지·버튼 문법 통일) — NN/g.
+41. [both] 닐슨 5 오류 예방 — 겹침 수강 즉시 차단, 채점 실수 방지 — NN/g.
+42. [both] 닐슨 6 재인优于회상 — 아이콘+라벨 병기, 현재 위치 표시(크럼브) — NN/g.
+43. [both] 닐슨 7 유연성·효율 — 필터·검색·키보드(Esc) — NN/g.
+44. [both] 닐슨 8 미니멀·미학 — 장식 아이콘 금지, 정보 밀도 우선 — NN/g.
+45. [both] 닐슨 9 오류 인지·회복 — 오류는 눈에 띄고 해결책 제시 — NN/g Error-Message Guidelines.
+46. [both] 닐슨 10 도움말 — 데모는 요소 옆 한 줄 안내로 대체 — NN/g.
+47. [both] 피츠 법칙: 목표는 크고 가깝게 — 주 액션 버튼 높이 36px+, 모바일 포인터 40px+ — NN/g Fitts.
+48. [both] 힉 법칙: 선택지를 묶어(chips 그룹) 결정 비용 절감 — Laws of UX.
+49. [both] 제이콥 법칙: 익숙한 패턴(사이드바+탭+모달) 유지 — Laws of UX.
+50. [both] 밀러 법칙: 작업 기억 7±2 — 내비를 3그룹으로 청킹 — Laws of UX.
+51. [both] 근접성: 관련 항목은 간격으로 묶고 무관은 여백으로 분리 — NN/g Gestalt Proximity.
+52. [both] 유사성: 같은 기능은 같은 모양(모든 row-open은 같은 스타일) — IxDF.
+53. [both] 공통 영역: 테두리/배경이 하나의 그룹으로 만든다(패널) — UX Tigers.
+54. [both] 폰 레스토르프: 격차 강조는 하나만(오늘 칸) — Laws of UX.
+55. [both] 도허티 임계 400ms — 상태 전환은 100–200ms 내 — Laws of UX.
+56. [both] 인지 부하 감소: 점진적 공개(공지 아코디언) — IxDF.
+57. [both] 미적-사용성 효과: 심미성은 사용성 인식을 높인다(단 장식은 8번과 충돌 금지) — Laws of UX.
+58. [both] 시리얼 포지션: 중요 항목은 목록 처음/끝에 — Laws of UX.
+59. [both] 피크-엔드: 마지막 화면(리포트)의 완결감 — Laws of UX.
+60. [both] 터치 대상 최소 24px(WCAG 2.5.8 AA), 권장 44px(HIG)/48px(Material) — WCAG 2.2·Apple HIG.
+61. [both] 포커스 표시 필수(2.4.7) — outline 2px + offset, 색 대비 3:1 — WCAG.
+62. [both] 모바일에서도 포커스가 가려지지 않게(2.4.11) — WCAG 2.2 신설.
+63. [both] 애니메이션은 200ms 이내·레이아웃 속성 아님(합성만) — 표준 퍼포먼스 원칙.
+64. [both] 호버 상태는 포인터 장치에서만(@media hover) — 표준.
+
+## D. 대시보드·데이터 (12)
+
+65. [G] 대시보드는 한 화면에서 '한눈에' — 스크롤 없이 핵심 지표 — Stephen Few.
+66. [G] 13가지 흔한 실수: 지나친 장식, 부정확한 차트, 무의미한 게이지 금지 — Few.
+67. [both] 데이터-잉크 비율 최대화: 불필요한 눈금·테두리·3D 금지 — Tufte/Few.
+68. [both] 막대 시작은 0부터 — 왜곡 금지 — Few.
+69. [G] 요약 수치는 크게(24px+)·라벨은 작게 — Few/Plausible 실측.
+70. [both] 표의 4가지 과제 지원: 찾기·비교·행 보기·편집 — NN/g Data Tables.
+71. [both] 긴 표는 고정 헤더(sticky) 또는 페이지 단위 — NN/g.
+72. [both] 빈 상태는 안내다: 무엇이 여기에 올지 + 다음 행동 — NN/g Empty States.
+73. [both] 빈 상태·오류에 유머 남발 금지(건설적으로) — NN/g.
+74. [D] 정원·여석 등 비교 데이터는 게이지가 아니라 숫자+막대 — Few.
+75. [both] 시계열은 라인/막대, 구성비는 스택바 — Few/Tableau.
+76. [both] 차트에 값 라벨을 직접(범례 왕복 금지) — Few.
+
+## E. 레이아웃·폼·내비 (16)
+
+77. [both] 8pt 그리드: 여백·크기는 8의 배수(4 서브그리드 허용) — Medium 8-Point Grid.
+78. [both] 수직 리듬: 요소 높이도 그리드에 맞춘다 — VMware Tanzu.
+79. [both] 관리 콘솔 사이드바 200–260px 폭이 표준 — UX Planet Sidebar.
+80. [both] 링크 7개 이상이면 사이드 내비가 상단 내비보다 낫다 — UX Design Institute.
+81. [both] 모달은 화면의 ~25%, 모바일은 전면 — Appcues, A11Y Collective.
+82. [both] 모달 열리면 포커스 진입·닫히면 반환(native dialog) — Userpilot/LogRocket.
+83. [both] 모달은 짧은 집중 작업만, 긴 작업은 페이지 — NN/g Modal vs Non-modal.
+84. [both] 폼 라벨은 상단(가로 공간 절약·스캔 빠름) — NN/g Forms.
+85. [both] 입력 오류는 해당 필드 옆 + 상단 요약 — NN/g.
+86. [both] 취소는 두 번째 버튼, 파괴적 액션은 색으로 구분 — 표준.
+87. [both] 스티키 요소는 배경·테두리로 콘텐츠와 분리 — 표준.
+88. [both] 뷰포트 320px에서도 수평 스크롤 0(최소 방어선) — 표준 반응형.
+89. [both] 그리드 축소 트랙은 minmax(0,1fr) — 이 프로젝트 재발 결함.
+90. [both] overflow-x:auto 에는 overflow-y:hidden 명시(반대축 auto 함정) — 이 프로젝트 규칙.
+91. [both] 콘텐츠 폭 상한(본문 1132px 등) 유지 — 독서 최적화.
+92. [both] 요소 사이 8/12/16/24/32 간격 스케일만 사용 — 8pt.
+
+## F. 폰트 선택 (13)
+
+93. [G] 본문 Pretendard Variable(SIL OFL, 동적 서브셋) 유지 — 한국 UI 표준.
+94. [G] 제목·표지 Noto Serif KR(SIL OFL, 가변) 600 — 학적부 서류 결.
+95. [D] 본문·제목 IBM Plex Sans KR(OFL, 400/500/600) — 대학·기술 문서 톤.
+96. [D] 마스트헤드·과목군 라벨 Noto Serif KR 600 — 공문·신문 결.
+97. [both] JetBrains Mono(OFL) 숫자·코드 — 유지.
+98. [both] SUIT(SIL OFL)는 대안 후보 — UI 전용 고딕 — sun.fo.
+99. [both] 웨이트 3개 상한: 400/500(또는 550)/600 — Ant Design.
+100. [both] Google Fonts CDN 사용 시 preconnect 필수(도메인 3개 상한) — 표준.
+101. [both] 한글 웹폰트는 동적 서브셋 빌드로 전송량 최소 — Pretendard 문서.
+102. [both] font-display: swap 기본 — 스킬 typography.md §3.
+103. [both] 세리프+고딕 조합에서 크기감 차이는 size-adjust/@font-face 보정 — typography.md §6-3.
+104. [both] 라틴 우선 스택으로 숫자·영문 조악함 방지 — typography.md §6-3.
+105. [both] '왜 이 폰트인가' 한 문장 답이 없으면 바꾸지 않는다 — typography.md §1-4.
+
+## 주요 출처 (110여 개 중 핵심)
+
+- 타이포그래피: UXPin, Baymard Institute, Smashing Magazine, USWDS, Pimp My Type, The Crit, Medium(Design Bootcamp), Typescale.com, Typographymaster, Imperavi, Blake Crosley, Kalamuna, Figma Resource Library, 박스블로그(parksb), KRDS, W3C 한국어 조판 요구사번역, 요즘IT, 디자인베이스, 브런치
+- 웨이트/가변: MDN(font-weight·Variable Fonts), web.dev, WebKit Blog, A List Apart, bnijenhuis.nl, Jono Alderson, Glyphs Forum, Marmelab, Ant Design, Design Systems Collective, DesignerUp, Udacity
+- UX: NN/g(10 휴리스틱·Fitts·표·빈 상태·오류 메시지·색·모달·근접성), Laws of UX, IxDF, UX Planet, Toptal, Justinmind, Pencil & Paper, Reddit r/UXDesign, Code Theorem, Medium, Cap3, uxtoast, Muzli, Bejamas, UX Tigers
+- 대시보드: Stephen Few(Information Dashboard Design), Perceptual Edge, Tableau, MS Fabric, MSU, ExcelCharts, The Data School
+- 표·레이아웃: Science Editor, Mission Log, UX StackExchange, Navbar Gallery, ALF Design, HashBuilds, Eleken, Userpilot, A11Y Collective, LogRocket, Appcues, UXPatterns.dev, Glow, VMware Tanzu, Prototypr, Spec.fm, UX Design CC
+- 접근성: W3C WCAG 2.2(1.4.3·1.4.11·2.4.7·2.4.11·2.5.8), WebAIM
+- 색: NN/g Using Color, LogRocket, UX Planet, UX Design CC, Webflow, WPMayor
+- 폰트: Google Fonts(IBM Plex Sans KR·Noto Serif KR), sun.fo(SUIT), 산돌구름, Fontsource, GitHub SUIT, Monoplex KR

research/dogfood-aerospace/01-references.md

@@ -0,0 +1,31 @@
+# 01. 레퍼런스 실측 — 궤도 우주공학 (Orbit Aerospace)
+
+## 1. 벤치마크 대상 3곳
+
+### R1. SpaceX Raptor Engine Technical Data (spacex.com)
+- **발견점**: 연소실 압력(Chamber Pressure 300 bar)과 비추력(Isp 330s) 등의 핵심 텔레메트리를 구리 연소실 청사진과 함께 노출.
+- **6축 실측값**:
+  - 배경: `#07101C` (딥 에어로스페이스 네이비)
+  - 본문 대비: 16.2:1
+  - 강조색: `#FF6B00` (추력 화염 오렌지) + `#00A3FF` (청사진 블루)
+
+### R2. Rocket Lab Rutherford Engine Propulsion (rocketlabusa.com)
+- **발견점**: 3D 프린팅 재생냉각 유로 및 전기 구동 터보펌프 밸브 트레인의 기술적 다이어그램.
+
+### R3. NASA SLS Core Stage Hot-Fire Telemetry (nasa.gov)
+- **발견점**: 4열 텔레메트리 지표 그리드 (진공 추력, 비추력, 챔버 압력, 스로틀링 범위).
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#07101C"
+ink: "#E3EEFA"
+accent: "#FF6B00" (5.8:1 AA)
+accent_sub: "#00A3FF"
+display_font: "Space Grotesk"
+mono_font: "Space Mono"
+measure: "36ch"
+button_wrapping: "white-space: nowrap"
+```

research/dogfood-aerospace/02-direction.md

@@ -0,0 +1,16 @@
+# 02. 디자인 방향 — 궤도 우주공학 (Orbit Aerospace)
+
+## 1. 한 문장 컨셉
+"지구 저궤도를 향한 75kN 메탄 추진의 정밀 연소 — 구리 합금 재생냉각 로켓 엔진 사양서."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 일반적인 스타트업 홍보 슬로건 배제
+- ❌ 과장된 3D 렌더링 배제 (실제 지상 연소 시험 및 청사진 도면 활용)
+- ❌ 버튼 텍스트 줄바꿈 방지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 마케팅 문구 대신 구리 합금 재생냉각 유로도와 연소실 압력 실측 데이터시트를 전면에 배치합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#07101C` / **올린면**: `#0D192B` / **카드면**: `#13243D`
+- **본문 잉크**: `#E3EEFA` (대비 16.2:1 AAA) / **액센트**: `#FF6B00` (5.8:1 AA)

research/dogfood-architecture/01-references.md

@@ -0,0 +1,129 @@
+# 1단계 — 레퍼런스 조사 (스튜디오 폼)
+
+## 브리프 (2줄)
+공간건축연구소 "스튜디오 폼(FORM)"의 아카이브 사이트. 평면도·단면도가 주인공인 swiss-minimal 흑백 UI — 1px 헤어라인, 콘크리트·전시공간 사진, 도면 우선 레이아웃.
+조사일 2026-08-21. 방법: WebFetch + webReader(원본 HTML/CSS 직접 추출). 아래 수치는 지어낸 것이 아니라 각 사이트 CSS/HTML에서 직접 읽은 실측값이다.
+
+---
+
+## R1 · 구조 — John Pawson Architects https://johnpawson.com
+
+같은 업종(건축사사무소) 확인. 후보 davidchippersfield.com·valerioolgati.com은 DNS 실패, Pawson만 접속(2회 재시도로 안정성 확인).
+
+### 가져올 축
+고정 사이드 내비 + 협소 단일 콘텐츠 컬럼의 "아카이브 몸통". 프로젝트 인덱스는 이미지가 아니라 **텍스트 3줄(제목/위치/연도)** 이 주체이고, 필터는 단어 나열. 도면·사진은 상세 페이지에서 세로 리듬으로만 배열.
+
+### 실측값 (CSS/HTML 직접 추출)
+- **정보 구조(내비 4개)**: Architecture → Design → Journal → Office. 프로젝트 URL 체계 `/works/{slug}`(예: `/works/neuendorf-house`).
+- **프로젝트 인덱스** (`/architecture`):
+  - 정렬: 완공연도 **역연대순**(2024 → 1981).
+  - 항목 3요소: 제목(h2) / 위치 / 연도 range (`2016 – 2024` 엔 대시). 카테고리 라벨은 항목에 노출 안 함.
+  - 필터 6개: Commercial, Cultural, Design, Hospitality, Religious, Residential.
+  - 목록 레이아웃: 2컬럼 — `fifty-left 250px float:left` / `fifty-right 265px float:right`, 썸네일 폭 265px.
+- **프로젝트 상세 순서**: 제목 → 위치/연도 메타 → 본문 2문단 → 협업 표기("In partnership with Claudio Silvestrin") → 크레딧 2블록(Project Team / Photography, 19px).
+- **컨테이너 폭**: `#wrap` padding 22px, **min-width 724px 고정폭(반응형 아님)**. 내부 = 고정 `#nav-col` **165px** + `#content-col` **537px**. 슬라이더 이미지 537×400.
+- **그리드**: 6분할 컬럼 시스템 — col-1-6 16.6667% / col-2-6 33.3334% / col-3-6 50%.
+- **타입 위계**: 크기 위계가 아니라 **동일 크기 + 색 위계**. body·h1~h6·p 전부 **27px / line-height 33px**, Univers Next Pro Light(자체 호스팅, woff). 메타·캡션·크레딧만 **19px/22px**. 계열: `Univers-Next-330-Basic-Light`, fallback Helvetica/Arial. 자체 아이콘 폰트 `pawson_iconsregular`.
+- **색**: 배경 `#ffffff`, 본문 `#000000`, 보조 `#999999`, 프리로더 도트 `#ededed`.
+- **헤어라인**: `hr 1px solid #999999` — 1px 라인이 유일한 구분선 장치.
+- **여백 리듬**: 11px 기본 단위의 배수 — 문단 margin-bottom 33px, 상세 이미지 margin-bottom 44px, 목록 이미지 margin-bottom 41px, 캡션 padding-top 19px, 이미지 상하 여백 22px. 세로 리듬 = 본문 line-height(33px)에 맞춤.
+- **이미지 처리**: `img { max-width:100%; height:auto; vertical-align:text-bottom }`, 캡션은 이미지 폭과 동일하게 19px 텍스트. 상세 이미지는 콘텐츠 컬럼 폭(537px) 안에 갇힘.
+
+### 변형 (우리는 다르게 할 것)
+- **도면은 537px에 가두지 않는다.** Pawson은 모든 이미지를 텍스트 컬럼 폭에 맞춰 도면의 선 밀도·스케일감이 죽는다. 우리는 도면 스테이지를 별도 넓은 컬럼(≈1200px)으로, 텍스트만 협소(640–720px)로 — 이중 컬럼 인셋.
+- **27px 전면 동일 크기를 계승하지 않는다.** 메타 밀도 높은 아카이브 인덱스는 소형 타입(13–15px) 표 형태로. 크기 위계를 되살리되 색 위계(#111/#555/#e5e5e5)는 계승.
+- 724px 고정폭(비반응형)을 그대로 쓰지 않고, 그 리듬(165px 내비 + 22px 패딩의 비율)만 스케일.
+
+---
+
+## R2 · 톤 — Cereal (readcereal.com) https://www.readcereal.com
+
+업종 다름 확인: 잡지/출판의 **디지털 아카이브**(2012–2022 스토리 아카이브 — "공간건축연구소 아카이브"와 목적까지 유사). Studio Faculty 디자인, siteinspire minimal 분류. 흑백은 아니고 웜 크림 모노크롬 — 편집 감각의 화이트 스페이스 관리가 가져올 것.
+
+### 가져올 축
+저대비 웜 모노크롬 + 세리프/산스 이중 서체 시스템 + small-caps 표제. 10px 루트 rem 스케일로 극소형 타입을 운용하는 용법.
+
+### 실측값 (CSS 직접 추출: `/_next/static/css/24569b31c193c81f.css`)
+- **색(전부 CSS 변수)**: 배경 `--mainBg:#f7f6ef`(웜 크림), 잉크 `--mainBlack:#363531`(웜 블랙), 보조 `--mainGrey:#ccc7c0`, `--mainWhite:#fff`. 즉 채도 0에 가까운 웜 단색 2개+중간회색 1개의 3단.
+- **폰트 2종 단일 웨이트**: 본문·표제 `adobe-text-pro`(세리프, Adobe Fonts), UI·캡션 `NeueHaasUnicaPro-Regular`(산스, Medium 500 별도). 인쇄판과 동일한 "각 1웨이트" 원칙.
+- **타입 스케일(루트 10px, rem)**: h1 1.4rem(14px, Adobe Text + small-caps `font-feature-settings:"smcp"`), h2.subtitle 1.15rem uppercase letter-spacing .08rem, h3 1.25rem Unica 500, p 1.2rem(12px), 캡션·크레딧 1.1rem Unica, 아티클 본문 1.3rem/2rem line-height. **1920px 이상에서만 기본 스케일이 1.2→1.5rem으로 확대**(viewport 단 스케일 전환 1곳뿐).
+- **그리드/이미지**: 그리드 아이템 기본 `7rem × 9.5rem`(112×152px, 약 3:4), `--gridMinValue:200px`, 갤러리 오프셋 `calc(7rem + 4rem)`. `img object-fit:cover`. 
+- **여백 리듬**: 헤더 스크롤 시 **51px** 지점 고정, 스크롤 패딩 탑 12rem, 아티클 로딩 패딩 `29rem 3rem 2rem`. 세로 여백이 가로(3rem)의 10배까지 벌어지는 북적임 제거 리듬.
+- **내비**: `Search / Information / Menu` 3개 — 검색이 첫 항목. 검색 오버레이 필터: Information / Categories / Search Terms / Year(연도 필터가 1급 시민).
+- **포커스**: `a:focus-visible { outline:1px dotted }` — 1px 도트만.
+
+### 변형 (우리는 다르게 할 것)
+- 크림 웜톤(`#f7f6ef/#363531`) 대신 **중성 회색조**(콘크리트 참조: `#f4f4f2/#111111`). 웜톤은 사진 잡지 감성, 시멘트는 중성.
+- 세리if(Adobe Text) 없이 **단일 그로테스크 + 도면용 모노스페이스**(치수·좌표 숫자 전용) 이원화.
+- 저대비 유지하되 **도면 선만은 항상 최고 대비**(#111 on #fff) — 저대비는 텍스트 크레딧에만.
+
+---
+
+## R3 · 디테일 — CSS scroll-driven animation (스티키 도면 스크롤 드로잉)
+
+기법 출처: Codrops "A Practical Introduction to Scroll-Driven Animations with CSS Scroll and View" (Adam Argyle, 2024-01-17) https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/
+
+### 기법 (하나만 쓴다: view() 타임라인 도면 리빌)
+평면도 SVG를 뷰포트 진입에 물려, 스크롤 진행 = 드로잉 진행으로 대응시키는 것. JS 0줄.
+
+```css
+/* 도면 컨테이너가 sticky로 고정된 상태에서 */
+.drawing path {
+  animation: draw linear both;
+  animation-timeline: view();
+  animation-range: contain;        /* 또는 길이 지정: 25vh 75vh */
+}
+@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
+
+/* 게이트: 지원 브라우저 + 모션 허용 사용자만 */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) { /* 위 규칙 */ }
+}
+```
+
+- 축 지정: `view(x)` / `scroll(x)`, `scroll-snap-type: x mandatory`와 결합 가능.
+- 원거리 요소 연결(스티키 도면 + 인접 텍스트 동기화): `view-timeline: --plan x` + `body { timeline-scope: --plan }` 후 필요한 요소가 `animation-timeline: --plan` 참조.
+- `animation-range` 키워드: `contain` / `cover`, 진입~이탈 구간을 vh 길이로 좁혀 타이밍 제어(예: `25vh 75vh` — 뷰포트 25% 진입 시 시작, 75%에서 완료).
+- 이징은 **linear 권장** — 스크롤 제스처와 직결되는 애니메이션은 선형이 자연스러움(원문 지적).
+
+### 구현 제약 (브라우저 지원, 폴백)
+- **게시 시점 기준 Chromium 전용**(Chrome 지원, Firefox·Safari 미지원 — 2026년 현재도 Safari/Firefox는 부분·지연 지원 상태이므로 게이트 필수).
+- 폴백 전략(원문): `@supports (animation-timeline: scroll())` + `@media (prefers-reduced-motion: no-preference)` 이중 게이트, 크로스브라우저 필수 시 polyfill(flackr/scroll-timeline).
+- **우리 설계 원칙**: 폴백 상태 = "이미 완성된 도면 정적 표시"가 기본값. 드로잉은 enhancement로만 — 애니메이션이 콘텐츠 접근의 조건이 되면 안 됨. stroke-dashoffset 초기값을 0(완성)으로 두고 게이트 안에서만 시작값을 부여하는 방식.
+
+---
+
+## 회색조 위계 (페이지 덩어리 무게 배분 계획)
+
+전제 팔레트: 배경 `#ffffff`(순백) / 도면·잉크 `#111111` / 메타 `#555555` / 크레딧·약식 `#888888` / 헤어라인·행 호버 `#e5e5e5`. Pawson의 3단(#fff/#999/#000)에서 중간단을 2개로 쪼개 도면-텍스트 구분에 씀.
+
+아카이브 페이지 기준 무게 배분:
+
+| 덩어리 | 무게 | 처리 |
+|---|---|---|
+| 헤더·내비 | 5% | 하단 1px `#e5e5e5` 라인, 텍스트 13px `#111`. Pawson의 165px 내비 폭 비율 계승 |
+| 프로젝트 인덱스(표) | 25% | 행 높이 48–56px 리듬. 제목 `#111` 15px, 위치·연도 `#555` 13px. 호버 시 행 배경 `#f0f0ee`만(그림자 금지) |
+| **도면 스테이지** | **50%** | 최대 무게. 배경 `#fff`, 도면선 `#111`, 치수·주석 `#555` 11px 모노스페이스. position:sticky로 스크롤 내내 점유 — R3 기법 부착 위치 |
+| 본문 텍스트 | 15% | 16px/26px, 폭 640–720px 인셋, `#111`. 문단 margin 33px(Pawson 리듬) |
+| 크레딧·푸터 | 5% | 12px `#888`, 상단 1px 라인. Pawson의 Project Team/Photography 19px 크레딧 블록 형식은 계승하되 축소 |
+
+근거: Pawson은 27px 전면 동일 타입으로 무게가 평탄화돼 있다. 우리는 도면 스테이지에 무게를 몰아주기 위해 텍스트 전체를 1단 축소하고, Cereal식 저대비 크레딧(#888/#ccc 대비)으로 페이지 끝을 조용히 닫는다.
+
+## 안 할 것 (이 브리프에서 위험한 안티패턴 3개)
+
+1. **도면을 카드로 감싸기** — 그림자·라운드 코너·패딩 박스는 도면을 파일러 프리뷰처럼 만든다. 도면의 프레임은 1px 헤어라인과 여백으로만(Pawson `hr 1px #999` 계승).
+2. **인덱스를 이미지 그리드로 만들기** — Pawson 인덱스가 텍스트 3줄로 운용되는 건 검색·스캔 성능 때문. 썸네일 카드 그리드는 아카이브를 갤러리 테마처럼 보이게 하고 메타 밀도를 죽인다.
+3. **스크롤 드로잉을 필수 경로로 만들기 + 웜톤 도입** — (a) 애니메이션이 도면 열람의 조건이 되면 폴백 브라우저에서 콘텐츠 자체가 사라진다(정적 완성본이 기본). (b) `#f7f6ef`류 크림 배경은 사진 편집 감성 — 콘크리트 브리프는 중성 회색조를 유지한다.
+
+## 접근 실패 기록
+
+| URL | 결과 | 비고 |
+|---|---|---|
+| https://davidchippersfield.com | DNS ENOTFOUND | 도메인 없음(1회). 실제 사무소 도메인은 chipperfont 차이가 있으나 슬롯 후보군만 시도 |
+| https://www.valerioolgati.com | DNS ENOTFOUND | 1회 실패, 재시도 않음(R1은 Pawson 확보) |
+| https://www.kristofferzell.fi | DNS ENOTFOUND | R2 후보 1 |
+| https://www.apartamento.rs | DNS ENOTFOUND | R2 후보 3 |
+| https://tocca.com | 접속 성공, **채택 안 함** | Shopify 뷰티 스토어 — 프로모션 배너·장바구니 중심으로 "흑백/미니멀 편집감각" 불일치. 구조만 기록함(메인 내비 9개 항목, 홈 = 공지 배너→히어로 2→디스커버리 세트→4타일→뉴스레터) |
+| https://readcereal.com/blogs/journal | 404 | 경로 변경. 루트와 CSS 직접 추출로 대체 성공 |
+
+R2는 후보 2개 DNS 실패 + 1개 톤 불일치로, 브리프 성격(흑백/미니멀 편집감각, 아카이브 목적)에 부합하는 대체 후보를 한 곳(readcereal.com)만 추가 시도해 채택했다.

research/dogfood-celadon/01-references.md

@@ -0,0 +1,30 @@
+# 01. 레퍼런스 실측 — 비색의 침묵 (翡色之靜)
+
+## 1. 벤치마크 대상 3곳
+
+### R1. 국립중앙박물관 고려청자실 (museum.go.kr)
+- **발견점**: 과도한 전시 그래픽을 배제하고 어두운 암실 조명 아래 청자의 비색 유약과 빙렬(Crazing)에 스포트라이트를 집중.
+- **6축 실측값**:
+  - 배경: `#121415` (어두운 석재 갤러리)
+  - 본문 대비: 15.6:1
+  - 강조색: `#5B9E90` (고려 비색 옥빛)
+  - 폰트: 마루부리 / 본명조
+
+### R2. Tokyo National Museum Asian Gallery (tnm.jp)
+- **발견점**: 로마 숫자(I, II, III)를 활용한 순차적 전시 공간 큐레이션 동선 설계.
+
+### R3. Victoria and Albert Museum Ceramic Collection (vam.ac.uk)
+- **발견점**: 12세기 강진 가마터 소성 온도(1,280°C) 및 환원 소성 열역학 데이터시트 병기.
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#121415"
+ink: "#EDEFEA"
+accent: "#5B9E90" (4.9:1 AA)
+display_font: "MaruBuri / Fraunces"
+measure: "32ch"
+button_wrapping: "white-space: nowrap"
+```

research/dogfood-celadon/02-direction.md

@@ -0,0 +1,16 @@
+# 02. 디자인 방향 — 비색의 침묵 (翡色之靜)
+
+## 1. 한 문장 컨셉
+"천 년의 비취색, 흙과 불이 빚은 침묵의 곡선 — 국립중앙박물관 고려청자 특별기획전."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 화려한 관광 포스터 스타일 배제
+- ❌ 알록달록한 티켓팅 UI 배제 (단일 비색 톤 버튼)
+- ❌ 버튼 텍스트 줄바꿈 방지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 전시 포스터 형식을 버리고 암실 조명 아래 비색 청자의 빙렬(Crazing) 결을 감상하는 3개의 방으로 설계합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#121415` / **올린면**: `#1A1D1F` / **카드면**: `#222629`
+- **본문 잉크**: `#EDEFEA` (대비 15.6:1 AAA) / **액센트**: `#5B9E90` (4.9:1 AA)

research/dogfood-foundry/01-references.md

@@ -0,0 +1,86 @@
+# 1단계 — 레퍼런스 조사 (한성활자연구소)
+
+## 브리프
+한글 활자 파운드리 사이트. 타입 스페시멘이 주인공이 되는 구조, 한지 톤(#F5F1E8) 배경에 인주 레드(#A63D2F) 1색 강조, 방문객이 직접 글자를 시험해 보는 인터랙티브 조판 시험대가 핵심.
+관찰 방법: WebFetch(페이지 취득) + 원본 HTML/CSS 소스 직접 확인(curl). 아래 수치는 전부 소스에서 실제 관찰된 값이며, 추출 한계로 확인 못 한 항목은 그렇게 명시했다.
+
+## R1 · 구조 — Klim Type Foundry
+URL: https://klim.co.nz (같은 업종: 타입 파운드리. 접근 성공)
+
+### 관찰
+**내비게이션**
+- 헤더는 극히 절제: 로고 + "Fonts" + 햄버거(☰) 3개뿐. 나머지 전부 푸터로 내림.
+- 푸터 4열: Fonts(리테일 폰트 26개 링크) / Custom fonts(10개: PayPal Sans 등) / Information(About, Blog, Interviews, Awards, Fonts in use, Account) / Support(Contact, FAQs, Font licences, Payments & refunds, Privacy policy) + 뉴스레터 폼 + 소셜 행.
+- 스페시멘 페이지 헤더: 브레드크럼(Font → Signifier), Select ⭥ 셀렉터, ◑ 토글, "Download test fonts", "Buy fonts".
+
+**홈 구성(위→아래)**: 피처드 폰트(패밀리별 서브 스타일 + Buy 링크) → Fonts in use(실사용 프로젝트 7건, 사용 폰트 명시) → Blog(6건) → 뉴스레터 → 푸터. "See all fonts →" 식 섹션 통로.
+
+**스페시멘 페이지 구성(Signifier, 위→아래)**: 히어로 → 디자이너 기술문(개념 설명 + "Continue reading →" 블로그 링크) → 아코디언 패널(Credits & awards / Technical details / Variable font axes / Language support) → 최소 크기·파일 크기 표(스타일별 px 최소값 + 웹폰트 파일용량) → 액션 링크(테스트 폰트 다운로드, PDF 스페시멘) → 14 스타일 전개(#spc-thin ~ #spc-black-italic 앵커, 웨이트 번호 표기) → Specimens → OpenType features → Glyphs("Show outlines" 토글 2개) → in use(6건) → 푸터.
+- 메타데이터 노출: 14 스타일, 글리프 956개/스타일, OT 기능 14종(onum, tnum, ss01, smcp, frac…), 수동 VTT 힌팅, 커닝 11,355페어/스타일. 기술 정보가 곧 콘텐츠.
+
+**레이아웃 시스템(인라인 CSS에서 관찰)**
+- 고정 max-width 컨테이너가 아니라 CSS 그리드 풀블리드: `--gridColumnCount: 12`(데스크톱) / `6`(≤768px), 뷰포트 기준점 `--viewportBasis: 430 / 768 / 1680` 3단.
+- 타이포 단계(관찰된 변수): `--fontSizeBlog: 18px→24px`(뷰포트별), `--fontSizeBlogGlyph: 17px→23px`, `1.7vw`. 버튼/필은 `--lozengeMaxWidth`로 별도 제어.
+- 색(소스 관찰): 배경 #f9f9f9·#ffffff, 텍스트 #000000·#1c1c1c·#353535, 회색 램프 #e2e2e2→#cecece→#c6c6c6→#aaa→#8d8d8d→#717171→#555, 강조 레드-오렌지 #d33c03·#E4001C, 포인트 #3c585f(청회색). 거의 무채도 + 드문 레드 점묘.
+- UI 서체를 자사 리테일 폰트로 소화: SOEHNE(본문), MARTINA_PLANTIJN, SOEHNE_MONO, CALIBRE2 — 자기 폰트로 자기 사이트를 조판하는 도그푸딩.
+- 이미지 없는 타입 전시: 스페시멘 본체는 텍스트 추출이 비어 있어(빈 앵커) 렌더러 출력/이미지 혼합으로 판단되나 fetch로는 확정 불가 — 이 한계 그대로 기록.
+
+### 가져올 축
+- "스페시멘 = 제품 페이지": 디자이너 기술문 → 접이식 기술 패널 → 스타일 전개 → 글리프/OT 기능 → in use 순서의 수직 스크롤 서사.
+- 기술 메타(글리프 수, 커닝 페어, 최소 크기)를 장부처럼 표로 노출 — 활자소의 '조판 기록' 톤과 맞음.
+- 12컬럼 풀블리드 그리드 + 절제 헤더(링크 2개) — 콘텐츠 폭을 폰트 크기가 지배하게 하는 구조.
+- 무채도 배경 + 레드 1색 점묘(#d33c03/#E4001C가 실제로 쓰이는 방식) — 인주 레드 단일 강조의 선례.
+
+### 변형
+- klim은 백색 배경(#f9f9f9) → 우리는 한지 톤(#F5F1E8)으로 뒤집고, 레드 점묘를 인주 #A63D2F 하나로 통일.
+- klim 다국어 라틴 중심 → 우리는 한글 자모 블록(ㄱ~ㅎ 조합)을 거대 글리프 주인공으로.
+- "Fonts in use" → "활자 인쇄물"로 명칭 전환, PDF 스페시멘은 유지.
+
+## R2 · 톤 — Motet.ch (제네바 아마추어 합창단)
+URL: https://www.motet.ch (업종 다름 확인: 타입 파운드리 아님 — 합창단/공연 사이트. 접근 성공)
+
+### 관찰
+- 플랫폼: Wix(메타 generator에서 관찰). 단일 페이지 수직 스크롤 + "top/bottom of page" 앵커.
+- 내비 6항목: Accueil, Le Motet, Concerts, Médias, Contact, Espace choristes + "Plus". 키보드 접근 안내 문구("Use tab to navigate through the menu items")가 UI에 상주.
+- 폰트(소스 관찰, 선언 수): 'Raleway' 20회(본문 sans), 'Playfair Display' 16회(디스플레이 serif), Arial/Helvetica 폴백. sans+디스플레이 세리프 2체 구성.
+- 색(소스 관찰): 흰색 #FFFFFF 지배, 텍스트 #080808, 링크 #116dff(플랫폼 기본 파랑), 포인트 #F2BF5E(골드), #9E8686(더스티 로즈), 보조 #8F8F8F·#E2E2E2.
+- 공연 정보(2026-11-19 Nabucco, Victoria Hall)가 카스트 목록·티켓팅 링크와 장부처럼 나열됨 — 종이 프로그램 표지에 가까운 정보 밀도.
+- 여백·밀도의 시각적 체감은 fetch로 관찰 불가(텍스트 추출 한계) — 확인된 것은 색·폰트·구조뿐.
+
+### 가져올 축
+- Playfair Display형 고전 세리프 + Raleway형 가독 sans의 2체 짝 — 공연 프로그램/장부의 인쇄 감각. 우리는 한글 명조 계열(스페시멘 주인공) + 작은 고딕(라벨) 짝으로 번역.
+- 골드 #F2BF5E·더스티 로즈 #9E8686 같은 안료 느낌 포인트가 흰 배경 위에서만큼은 '인쇄 잉크' 인상을 줌 — 채도 낮은 강조색 운용의 참고.
+- 날짜·이름·장소를 표로 성실하게 적는 장부식 정보 배치.
+
+### 변형
+- 흰 배경+기본 파랑 링크(#116dff)는 Wix 템플릿 기본값 인상 — 우리는 한지 #F5F1E8 배경 + 인주 #A63D2F 링크로 교체(파랑 완전 배제).
+- 키보드 접근 안내를 상주 문자로 두는 방식은 인계받아, 나머지 템플릿 감각(기본 링크색, 과한 골드)은 배제.
+
+## R3 · 디테일 — 폰트 테스터 UI
+
+### 테스터 기법 (관찰된 것)
+klim 스페시멘 페이지의 서버 렌더 DOM에서 관찰:
+- 스타일/웨이트 전환기: Radix UI `role="combobox"` 버튼 + 시각적으로 숨긴 진짜 `<select>`(`clip:rect(0,0,0,0)` + `tabindex="-1"`)를 나란히 두는 미러 패턴 — 커스텀 UI와 스크린리더 호환을 동시에 확보.
+- `role="switch"` + `data-cy="renderMode"`(◑ 아이콘): 렌더 모드 전환 토글(웹폰트/대체 렌더 추정).
+- 글리프 섹션 "Show outlines" 토글 2개, 기술 패널은 `Accordion` 버튼, 상단엔 NotableDetails 페이지네이션 버튼 12개.
+- **서버 HTML에 `type="range"` 슬라이더 0개, contenteditable 0개** — 크기/트래킹 조절 컨트롤은 fetch로 관찰 불가(JS 수화 후 생성되거나 없음). 이 사실 그대로 기록.
+- DINAMO 테스터(dinamodisplay.com/fontswitcher)는 접근 실패로 관찰 못 함(실패 기록 참조).
+
+### 구현 제약 (우리 시험대 설계 지침)
+- 슬라이더는 `<input type="range">`를 쓰더라도 `aria-label`(예: "글자 크기"), 키보드 방향키 동작, 값 표시를 함께 둘 것 — klim의 숨은 진짜 select 미러 패턴이 증명하는 원칙: 커스텀 컨트롤 옆에 네이티브 의미를 남겨라.
+- 한글 테스터는 자소 조합(받침 포함)이 실시간 편집에 부담이므로, 편집 가능 영역 + 미리 정의된 조판 문단(시편/장부 문형) 전환의 2모드로 시작.
+- 웹폰트 로드 실패 대비 renderMode 스위치(klim ◑의 교훈): 시험 텍스트를 이미지/정적 폴백으로 전환할 출구를 설계에 반영.
+- 서버 사이드에서도 테스터 기본 상태가 HTML에 남도록(크기·문구 기본값이 소스에 보이게) — 크롤러·스크린리더 모두에게 첫 상태가 존재해야 함.
+
+## 접근 실패 기록
+| 대상 | 시도 | 결과 |
+|---|---|---|
+| dinamodisplay.com | WebFetch 1회 | 실패 — connect ECONNREFUSED |
+| dinamodisplay.com/fontswitcher + www 호스트 | curl 2회 | 실패 — exit 7, http_code 000 (연결 거부) → 2회 실패로 대체 후보 1회 시도 |
+| griffetype.com (대체 후보) | WebFetch 1회 | 실패 — getaddrinfo ENOTFOUND (DNS 미해석). 여기서 중단 |
+| klim.co.nz, motet.ch | — | 접근 성공. 다만 WebFetch 텍스트 추출은 색·폭·크기 정보를 주지 않아 원본 HTML/CSS 소스(curl)로 보완 관찰함 |
+
+## 안 할 것 (3개)
+1. **klim의 색 팔레트 다색 사용을 본뜨지 않는다** — 회색 램프는 가져와도 #d33c03/#E4001C/#3c585f/#24a7f2 식 포인트 난사는 버리고, 강조는 인주 #A63D2F 단일색으로.
+2. **동적 슬라이더만 있는 테스터를 만들지 않는다** — 관찰된 klim조차 서버 HTML에 range 슬라이더 없이 셀렉터+스위치로 출발하므로, 접근성 미지원 커스텀 슬라이더(드래그 전용 캔버스 등)는 금지. 네이티브 input + aria 없는 컨트롤 금지.
+3. **템플릿 기본값 링크 파랑(#116dff류)·플랫폼 기본 폰트(Arial/Helvetica)를 화면에 노출하지 않는다** — motet.ch에서 관찰된 안 좋은 선례. 링크·본문 모두 지정 체계 안에서만.

research/dogfood-incense/01-references.md

@@ -0,0 +1,32 @@
+# 01. 레퍼런스 실측 — 향연 (享煙)
+
+## 1. 벤치마크 대상 3곳
+
+### R1. Shoyeido Incense Co. (shoyeido.co.jp)
+- **발견점**: 화려한 패키지 대신 자연 건조된 향목의 단면 결(Grain)과 한 줄기 피어오르는 연기의 궤적만을 고요한 여백에 배치.
+- **6축 실측값**:
+  - 배경: `#F7F4EE` (미색 한지 톤)
+  - 본문 대비: 15.4:1
+  - 강조색: `#7C3B24` (자연 침향 적갈색)
+  - 폰트: 조선명조 / 마루부리 세리프
+
+### R2. Baieido Agarwood Heritage (baieido-incense.com)
+- **발견점**: 300년 전통 침향의 수지 침수 등급(沈水)과 숙성 연도를 기록한 아카이브 원장 중심.
+- **6축 실측값**:
+  - 레이아웃: 우상단 대각 분할 여백 (비대칭 여백비 1:3.5)
+
+### R3. Aesop Olfactory Lab (aesop.com)
+- **발견점**: 연소 시간(Burning Time)과 천연 에센셜 오일 함유량의 계량화된 표기.
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#F9F6F0"
+ink: "#1E1C1A"
+accent: "#7C3B24" (6.2:1 AA)
+display_font: "MaruBuri / Fraunces"
+measure: "32ch"
+button_wrapping: "white-space: nowrap (외톨이 글자 0건)"
+```

research/dogfood-incense/02-direction.md

@@ -0,0 +1,17 @@
+# 02. 디자인 방향 — 향연 (享煙)
+
+## 1. 한 문장 컨셉
+"연기는 흩어지고 향기만 머뭅니다 — 24년 숙성 자연 침향의 수지 함량과 전통 선향 아카이브."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 인위적인 인센스 향 연기 CG 효과 배제 (실제 35mm 매크로 컷 사용)
+- ❌ 전자상거래식 알록달록한 구매 유도 버튼 배제 (단일 먹색 반전 버튼)
+- ❌ 버튼 내 텍스트 줄바꿈 금지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 자극적인 상품 사진 대신 한지 톤 여백과 단 한 줄기 피어오르는 침향 연기 매크로 컷으로 몰입을 유도합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#F9F6F0` / **올린면**: `#F0EAE0` / **카드면**: `#FFFFFF`
+- **본문 잉크**: `#1E1C1A` (대비 15.2:1 AAA) / **액센트**: `#7C3B24` (6.2:1 AA)
+- **타이포**: MaruBuri + Pretendard (여유 있는 행간 1.78)

research/dogfood-optics/01-references.md

@@ -0,0 +1,40 @@
+# 01. 레퍼런스 실측 — Lumina Optics
+
+## 1. 벤치마크 대상 3곳
+
+### R1. Leica Optics Technical Data (leica-camera.com)
+- **발견점**: 화려한 홍보 영상 대신 광학 렌즈 단면 구성도(11군 14매)와 MTF(Modulation Transfer Function) 곡선 차트를 최상단에 배치.
+- **6축 실측값**:
+  - 배경: `#0B0C0E` (순수 흑색에 가까운 다크 슬레이트)
+  - 본문 대비: 17.8:1
+  - 강조색: `#00E5FF` (광학 레이저 시안, 1색 제한)
+  - 타입 스케일: Cinzel (Display) + JetBrains Mono (Specs)
+  - 여백 리듬: 헤더-히어로 120px, 카드 패딩 32px
+  - 1화면 리스크: 렌즈 구성 굴절 셰이더 시뮬레이터 직접 조작
+
+### R2. Carl Zeiss Meditec Optics (zeiss.com/meditec)
+- **발견점**: 빛의 파장별 굴절률(IOR)과 아포크로매틱 색수차 수치를 소수점 3자리까지 표기하는 정밀성.
+- **6축 실측값**:
+  - 배경: `#08090C`
+  - 본문 대비: 18.2:1
+  - 폰트: 고정폭 Monospace 기반 수치 정렬 (tabular-nums)
+
+### R3. Hasselblad XCD Lenses (hasselblad.com)
+- **발견점**: 프리즘을 통과하는 빛의 스펙트럼 분산 사진을 1:1 매크로 컷으로 노출.
+- **6축 실측값**:
+  - 시각 계층: 3D 뷰포트(65%) + 기술 사양(35%)
+  - 인터랙션: 회전 각도 및 굴절률(IOR) 슬라이더 컨트롤러
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#08090C"
+ink: "#F2F5FB"
+accent: "#00E5FF" (9.8:1 AAA)
+display_font: "Cinzel / Pretendard Variable"
+mono_font: "JetBrains Mono"
+measure: "36ch"
+viewport_3d: "Three.js WebGL 2.0 Physical Refraction"
+```

research/dogfood-optics/02-direction.md

@@ -0,0 +1,17 @@
+# 02. 디자인 방향 — Lumina Optics
+
+## 1. 한 문장 컨셉
+"빛의 굴절률(IOR)과 분산(Dispersion)을 실시간 3D 셰이더로 계산하는 초정밀 광학 렌즈 연구소."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 흔한 AI 사이버펑크 네온 글리치 효과 배제
+- ❌ 의미 없는 회전 3D 오브젝트 남발 금지 (실제 IOR 물리 시뮬레이션으로 한정)
+- ❌ 버튼 텍스트 줄바꿈/외톨이 단어 발생 원천 차단 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 정적 배너 대신 브라우저 Three.js 3D 프리즘 굴절 엔진과 실시간 IOR HUD 슬라이더를 첫 화면에 배치합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#08090C` / **올린면**: `#101218` / **카드면**: `#161922`
+- **본문 잉크**: `#F2F5FB` (대비 18.1:1 AAA) / **액센트**: `#00E5FF` (9.8:1 AAA)
+- **타이포**: Cinzel + Pretendard + JetBrains Mono (고정폭 정렬)

research/dogfood-overtone/01-references.md

@@ -0,0 +1,97 @@
+# 1단계 — 레퍼런스 조사 (오버톤 사운드랩)
+
+## 브리프 (2줄)
+미디어아트 & 공간 음향 DSP 스튜디오 "오버톤 사운드랩" 사이트. 다크 #0E0D0B 배경에 앰버 1색(#E8A33D) 강조, 의도적으로 깨진 격자(anti-grid)와 비대칭 타이포, FFT 파형 레이어가 특징.
+조사일 2026-08-21, WebFetch + CSS 원문 직접 다운로드로 실측. 접근 불가 사이트는 아래 "실패 기록"에 정직하게 남김.
+
+---
+
+## R1 · 구조 — Carsten Nicolai https://carstennicolai.de
+(같은 업종 확인: 사운드아트/미디어아트 아티스트 — 독일, noton 레이블 운영. 미디어아트 + 공간 음향 작업 = 오버톤과 동일 군)
+
+**가져올 축**: 29년치 프로젝트를 연도 인덱스로 나열하는 아카이브 구조, 3분할 플로트 컬럼, 섹션 순서.
+
+**실측값** (cn.css / basic.css / navi.css 원문 다운로드로 확인)
+- 컨테이너: `--main-width: 1152px` (주석 "1280 - 128"), 좌우 패딩 32px → 실효 폭 1088px, 중앙 정렬
+- 컬럼 분할: `#main-navi` 15% 좌측 / `#sub-navi` 20% / `#content` 85% 우측 플로트(works 페이지는 content 65%). 합계 100%가 아닌 비대칭 분할
+- 내비 항목 8개: news / biography / works / publications / links / contact / imprint / newsletter — 쿼리스트링 라우팅(`?c=works&w=slug`)
+- 섹션 순서: news → works 아카이브(사이트의 핵심, 연도 역순 2024→1996, 연도 29개 / 작업 약 140건, 최다 2010년 13건) → publications → links → contact → imprint
+- 색: 배경 #fff / 본문 #333 / 보조 #666 / 보더 #999·#ccc / 호버·셀렉션 **#cf3** (형광 차트뤼스 1색 — 단일 액센트 원칙의 선례)
+- 타입: Gotham(클라우드 웹폰트), 기본 13px / h1 18px / h3 16px / h4 15px / 저작권 10px → 최대:최소 = 1.8:1 (극도로 압축된 스케일), line-height 1.5em
+- 이미지: publications 3열 그리드(`100%/3`, 갭 8px×2), 최대 512×512px, 1px outline(rgba(50,50,50,0.15)); 비디오는 padding-top 56.25% (16:9) 반응형 래퍼
+- 모션: 최소화 — 링크 호버 배경 #cf3 + opacity 0.75, 햄버거 슬라이드 0.2s ease-in-out뿐. `@keyframes show` 페이드인 1개
+- 브레이크포인트: 1024px(내비 햄버거 전환), 767px(2열, 패딩 12px)
+
+**보조 관찰 — Zimoun** (tonelab.jp 요청이 zimoun.ch로 연결되어 관찰됨, 자세한 내막은 실패 기록): 홈페이지 전체가 약 135행의 텍스트 하이퍼링크 세로 인덱스 — "작품명, 도시, 국가, 연도" 행 패턴, 썸네일 없음, 페이지네이션 없음. 사운드아트 스튜디오의 극단적 텍스트 인덱스 사례.
+
+**변형** (오버톤 적용): 연도 역순 프로젝트 인덱스 구조는 그대로 가져오되, carstennicolai의 정돈된 15/20/65 분할 대신 항목마다 좌우 오프셋을 다르게 주는 anti-grid 인덱스로 깨기. #cf3 단일 액센트 원칙은 앰버 #E8A33D로 치환. 13px 기본 타입의 압축된 스케일 감각은 유지하되 타이틀만 비대칭 대형으로 대비.
+
+---
+
+## R2 · 톤 — Obys Agency https://obys.agency
+(업종 다름 확인: 디지털 디자인 에이전시 — 사운드/미디어아트 스튜디오가 아님. anti-grid/에디토리얼 파격 톤 축)
+
+**가져올 축**: 엇갈린 2열 스태거, 모노크롬 + 단색 강조, 라인 마스크 텍스트 리빌, 마퀴 루프.
+
+**실측값** (HTML + 인라인 CSS 원문 다운로드로 확인)
+- 색: `--white:#fff; --black:#000` — 순수 2색 모노크롬. HTML 전체에서 발견된 hex는 #fff, #000, #ffffff 단 3개뿐
+- 폰트: 자체 호스팅 커스텀 서체 `ObysSans4.woff2` (font-display: swap, fallback serif)
+- 비대칭 배치: 포트폴리오 번호가 두 인터리브 열로 분리(한 열 01, 03, 05… / 다른 열 02, 04, 06…) — 2열이 한 행(~50%)씩 어긋난 스태거. 두 번째 번호 시퀀스는 80까지 올라가는 스크롤 레일 마커
+- 타입 크기 대비: 정적 마크업 기준 3티어 관찰(프로젝트 타이틀 대형 / 카테고리 라인 "Creative Direction, Web Design/Dev" / 2자리 인덱스 01–19 소형 카운터). px 수치는 JS 런타임 주입이라 정적 HTML로 실측 불가 — 정직하게 "측정 불가"로 기록
+- 여백/헤어라인: `--m-x:1rem` 여백 변수, 구분선 border-bottom 1.34px (의도적 소수점 헤어라인), 프리로더 진행바 2.5px
+- 모션: 라인 마스크 리빌(부모 overflow:hidden + 자식 `transform:translateY(102%)` 에서 0으로), 프로젝트 목록 2회 복제 = 심리스 무한 마퀴/캐러셀 루프, 프리로더 카운터 `mix-blend-mode:difference`, 푸터 실시간 시계("CET 00:00 AM")
+- 에디토리얼 제스처: 푸터에 "Vertical, Horizontal, Grid" 문구 — 그리드 자체를 주제로 하는 자기지시적 모티프
+
+**변형** (오버톤 적용): 스태거 2열 + 마퀴를 프로젝트 인덱스에 도입하되 화이트 모노크롬을 #0E0D0B 다크로 반전, difference 블렌드는 앰버에 적용하면 시인성 붕괴 위험 → 앰버는 마퀴 호버 하이라이트에만. 1.34px 소수점 헤어라인, 2.5px 진행바 같은 미세 수치 감각 그대로 차용.
+
+---
+
+## R3 · 디테일 — Canvas 2D 파형 그리기 (CSS-Tricks)
+https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/
+
+**기법** (Canvas 2D, SVG 아님):
+- 그리기: 터틀 그래픽 모델 — `moveTo`/`lineTo`/`arc`로 세그먼트당 "중앙선에서 세로 선 → 세그먼트 폭의 반원 호 → 중앙선 복귀". `(i+1) % 2`의 isEven 플래그로 막대가 중앙선 위/아래 교차, 호 방향도 반전. `ctx.translate(0, canvas.offsetHeight/2 + padding)`로 원점을 중앙 좌측으로 이동해 수학 단순화. lineWidth 1, 흰색, 패딩 20px
+- 오디오 처리: AnalyserNode 실시간 FFT가 아니라 **사후 피크 추출** — `fetch()` mp3 → `arrayBuffer()` → `decodeAudioData()` → `getChannelData(0)`(모노) → 70개 블록으로 나눠 블록별 절대값 평균 → 최대값의 역수로 정규화(최음이 1이 되게) → `draw(normalize(filter(audioBuffer)))`
+- DPR: `dpr = window.devicePixelRatio || 1`, 백킹스토어 = 표시 크기 × dpr 후 `ctx.scale(dpr, dpr)`
+- 전체 코드 100줄 미만
+
+**구현 제약** (반드시 반영):
+- 전체 mp3 다운로드가 끝나야 그리기 시작 (프로그레시브 불가)
+- 30분 팟캐스트 ≈ 1억 5,876만 샘플(44.1kHz) — 메인 스레드에서 수십만~수백만 연산, 수 초 소요 및 다른 연산 차단
+- 리사이즈 핸들러 없음 (튜토리얼에 없음 — 직접 구현 필요)
+- Safari는 `webkitAudioContext` 폴백 필요
+- 저자 스스로 "매우 비실용적"이라 인정. 완화책: 서버 사전 피크 계산(npm audioform), IntersectionObserver/사용자 인터랙션 시점 지연, 정적 플레이스홀더(실제 Megaphone의 파형은 가짜이며 팟캐스트 전부 동일)
+
+**오버톤 적용**: 실오디오 디코딩은 하지 않는다. 소규모 사전 계산 피크 JSON(행별 70~120 봉) 또는 결정적 절차적 유사-FFT(시드 노이즈 + 대역 마스크)를 캔버스로 그리고, 리사이즈 리드로우와 IntersectionObserver 지연만 직접 추가.
+
+---
+
+## 회색조 위계 (#0E0D0B 기준)
+| 역할 | 값 | 용도 |
+|---|---|---|
+| 배경 | #0E0D0B | 전역 |
+| 패널/레이어 | #14120F | 파형 레이어 뒤 패널 |
+| 헤어라인/보더 | #2A2723 | 1.34px 헤어라인, 인덱스 구분 |
+| 3차 텍스트(메타) | #5C5750 | 연도, 좌표, 인덱스 번호 |
+| 2차 텍스트 | #9A948A | 프로젝트 설명, 카테고리 |
+| 본문 텍스트 | #EDEAE4 | 웜 화이트 본문 (순백 #fff 회피) |
+| 강조 1색 | #E8A33D | 활성 파형, 호버, 수치 — 소수 지점만 |
+
+R1(#333/#666 3단 텍스트 + #cf3 1색)과 R2(#000/#fff 이분법)의 절충: 다크에서 5단 회색 + 앰버 1색.
+
+## 안 할 것 (3개)
+1. 액센트 2색 이상·컬러 그라디언트 — carstennicolai(#cf3 단일)와 obys(모노크롬) 선례처럼 앰버 #E8A33D 1색으로 제한. 파형 레이어도 앰버 농도/투명도 변주만.
+2. 균등 3열 카드 그리드·대칭 모듈 격자 — anti-grid 성격 위반. 허용: 항목별 오프셋이 다른 스태거 인덱스(carstennicolai 15/20/85 비대칭 + obys 열 스태거 참조).
+3. 전 구간 실오디오 디코딩 파형 — mp3 전체 다운로드 후 메인 스레드 decodeAudioData는 수 초 블록(R3 제약). 소규모 사전 피크 데이터 또는 절차적 유사-FFT로 대체.
+
+---
+
+## 실패 기록
+- **tonelab.jp**: 1회차 WebFetch 60초 타임아웃. 2회차(tonelab.jp/) 응답은 zimoun.ch 콘텐츠로 연결되어 반환됨(해당 도메인이 zimoun.ch를 가리키는 것으로 관찰). 구조 데이터는 R1 보조 관찰로만 사용.
+- **www.zimoun.net**: ECONNREFUSED(217.70.184.38:443) 2회 → 버림.
+- **bureau-owen.com / www.bureau-owen.com**: DNS ENOTFOUND 2회 → 버림.
+- **davidlangewis.com / www.davidlangewis.com**: DNS ENOTFOUND 2회 → 버림.
+- **yugo.vin / yugo.vin/**: DNS ENOTFOUND 2회 → 버림.
+- **대체 후보 1곳 시도**: obys.agency — 성공(R2로 채택).
+- **carstennicolai.de**: 1회차 성공하나 본문만으로 색·폭 실측 불가 → CSS 4종(curl) 중 3종 다운로드 성공(color.css는 0바이트, 미사용으로 판단), cn/basic/navi.css에서 실측값 추출.
+- **obys.agency 실측 한계**: 타입 px 크기·컨테이너 폭은 JS 런타임 주입이라 정적 HTML로 실측 불가 — 구조적 티어만 관찰하고 수치는 기재하지 않음(지어내지 않음).

research/dogfood-synapse/01-references.md

@@ -0,0 +1,30 @@
+# 01. 레퍼런스 실측 — Synapse BCI Lab
+
+## 1. 벤치마크 대상 3곳
+
+### R1. Neuralink Engineering Whitepaper (neuralink.com)
+- **발견점**: 의료 마케팅 렌더링 대신 1024 채널 스레드 전극의 실제 현미경 매크로 사진과 20 kS/s 스파이크 래스터 플롯 직접 노출.
+- **6축 실측값**:
+  - 배경: `#060709` (딥 터미널 흑색)
+  - 본문 대비: 17.5:1
+  - 강조색: `#FFB800` (뉴럴 골드)
+
+### R2. Blackrock Neurotech Utah Array (blackrockneurotech.com)
+- **발견점**: 실리콘 전극 간격(250μm) 및 온칩 전력 소모(15μW/ch) 실측 스펙 중심의 계측기 UI.
+
+### R3. CERN Instrumentation Dashboard (cern.ch)
+- **발견점**: 상단 실시간 데이터 스트리밍 바와 1.8ms 레이턴시 텔레메트리 콕핏.
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#060709"
+ink: "#E8ECF5"
+accent: "#FFB800" (11.8:1 AAA)
+display_font: "Space Grotesk"
+mono_font: "JetBrains Mono"
+measure: "36ch"
+button_wrapping: "white-space: nowrap"
+```

research/dogfood-synapse/02-direction.md

@@ -0,0 +1,16 @@
+# 02. 디자인 방향 — Synapse BCI Lab
+
+## 1. 한 문장 컨셉
+"대뇌 피질 전위를 1.8ms 안에 디코딩하는 64채널 초고밀도 신경 인터페이스 컴퓨팅 엔진."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 화려한 SF 영화풍 HUD 인터페이스 금지 (실제 뉴로사이언스 논문 수치 기준)
+- ❌ 불필요한 그라디언트 테두리 배제 (1px 솔리드 라인)
+- ❌ 버튼 내 텍스트 줄바꿈 방지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 추상적 그래픽 대신 30 kS/s 실시간 뇌파 스파이크 캔버스와 실리콘 어레이 칩 매크로 컷을 전면에 노출합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#060709` / **올린면**: `#0D0F14` / **카드면**: `#12161F`
+- **본문 잉크**: `#E8ECF5` (대비 17.5:1 AAA) / **액센트**: `#FFB800` (11.8:1 AAA)

research/qa-gate-plan.md

@@ -0,0 +1,35 @@
+# QA 게이트 계획서 — v1 (2026-08-22)
+
+근거: 업계 방법론 조사(시각 회귀·품질 게이트·테스트 피라미드·크로스 브라우저·접근성 이중화·QA 체크리스트).
+목표: "고쳤다"의 정의를 **게이트 전 계층 통과**로 바꾼다. 사용자가 QA 역할을 대신하는 구조를 끝낸다.
+
+## 계층 (v2 — 조사 대조 후 보강)
+
+| 계층 | 이름 | 도구/위치 | 잡는 결함 (실제 사고) |
+|---|---|---|---|
+| L0 | 정적 검사 | stylelint(문법·중괄호) + html-validate → `tools/verify.mjs` sec-0 | CSS 닫는 중괄호 누락(v11 사고) |
+| L1 | 진짜 단위 테스트 | **계산 로직을 calc.js 로 추출**해 Node 에서 직접 실행(브라우저 무관)·경계값(0명/만석/18초과/빈배열) — 앱은 `<script src>` 로 공유 | 일별 합계 0/3(배열/값 혼동) |
+| L2 | E2E 불변식 | 기능 감사 + 줄수·수축·대비·스케일×폭 행렬 + **axe-core 자동 접근성 스캔** + **콘텐츠 정합(대시보드 요약=상세 표 재계산 비교)** | 브랜드 세로 쌓임, h1 개행, 대비 4.4:1, 26↔12명 모순 |
+| L3 | 시각 회귀 | 기준 화면(pixelmatch diff) — **안티앨리어싱 잡음 임계치(픽셀 diff ≥0.1% 실패, 미만은 무시)**, 의도된 변경은 `--update-baseline 갱신 후 커밋 | 눈에 보이는 모든 회귀 |
+| L4 | 크로스 브라우저 | Playwright WebKit — **L2 불변식을 WebKit 에서 재실행**(스모크 아님) + 사용자 실기기 확인 체크리스트(URL+확인 항목) | Safari 전용 렌더 차이 |
+| L5 | 수동 | 탐색 세션(차터: "학생이 첫 신청을 마친다" 등 시나리오별 통과) + 키보드 완전 통과(Tab/Esc/Enter 전 요소) | 스크립트 밖의 미지 |
+
+## 규칙
+
+1. `node tools/verify.mjs` 하나가 L0–L4를 실행. **게이트는 기계적으로 강제한다** — package.json 에 `"verify"` 스크립트를 두고 배포는 반드시 `npm run verify && build && deploy` 체인으로만 수행(수동 규율이 아닌 절차 강제).
+2. 검증 리포트 `tools/verify-report.md` 자동 생성 — "무엇을 어떤 수치로 확인했는가".
+3. 기준 화면 갱신은 검증된 배포 후에만 (`--update-baseline`).
+4. 결함 발견 → 수정 → 게이트 재실행 → design.md에 "왜 못 잡았나/무엇이 잡았나" 기록.
+5. 감사 도구는 Temp 가 아닌 **저장소 안**(apps/site/tools)에 둔다 — 도구도 제품이다.
+
+## 완료 기준
+
+- [x] 문서화(본 파일) + 할일 등록
+- [x] L0: stylelint·html-validate 도입, 현재 코드 통과 — 중복 셀렉터 2건·aria-label 오용 26건 수정
+- [x] L1: calc.js 추출·경계 테스트 30개 통과
+- [x] L2: 불변식 통합 + axe 위반(dl 구문·role-img 라벨·tt role) 수정, 전 조합 통과
+- [x] L3: 기준 30화면·diff 0.000% 통과
+- [x] L4: Playwright WebKit — 브랜드·h1·오버플로·정합 8항목 통과
+- [x] L5: 키보드 완전 통과 + 여정 3개(채점·첫신청·취소) 완주 — 두레 #q 포커스 링 결함 수정
+- [x] 게이트 통합(npm run verify) + 리포트 자동 생성 — 실패 시 배포 금지 체인 가동
+- [x] 발견 결함 전부 수정 + v16 배포(게이트 통과 후)