feat(site): rework 19 marketing showcases for composition diversity

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.

apps/site/public/work/font-foundry/design.md

@@ -1,77 +1,75 @@
 # design.md — 한성활자연구소
 
+## 진행 상태
+
+- 2026-10-06 재작업(전체·리디자인 경로, 방향 위임): 0 감사 → 1 레퍼런스 → 2 카드 A 선택 → 3 토큰 → 4 구현 → 5 검증 통과 → 6 이 문서. 작업 노트 `outputs/rework-2026-10-06/font-foundry.md`.
+
 ## 브리프
 
-- **무엇을**: 가상 서체 기획을 정직하게 밝히면서, 실제 마루 부리와 Pretendard로 문장 조판의 형태 차이를 즉시 체험하는 한국어 타입 스튜디오.
-- **누구에게**: 활자를 고르거나 본문 조판 값을 결정해야 하는 편집자·디자이너·개발자.
-- **제약**: ko-KR 한국어, 밝은 아이보리·검정 본문·버밀리언 정체성 유지. 가상 서체를 판매하거나 가짜 스펙을 제시하지 않으며, 본문은 최대 42rem. 320px부터 가로 넘침이 없어야 한다.
+- **무엇을**: 한글 본문 서체 두 종(마루 부리·Pretendard)을 글자 하나의 굵기 축에서 보고, 같은 문장을 크기·자간·행간을 바꿔 조판해 보는 가상 서체 연구소 한 장.
+- **누구에게**: 본문 서체와 조판 값을 정해야 하는 편집자·디자이너·개발자. 목표 행동은 굵기 슬라이더와 조판 시험대를 직접 움직이는 것(문의·구매 없음).
+- **제약**: ko-KR. 정적 HTML/CSS/인라인 JS. 가상 기획이라 실제 주문으로 이어지지 않으며 가격은 예시. 마루 부리는 공식 배포본 그대로(서브셋 금지). 320px부터 가로 넘침 없음. 화면: `index.html` 한 장.
+- 확정 슬롯: 업종 서체 연구소 / 톤 "글자 자체가 이미지, 설명은 작게" / 자산 마루 부리 WOFF2 2종·견본 문장·예시 가격 / 좁은 화면 내비 탭 2개 그대로.
 
-## 리디자인 감사와 레퍼런스
+## 미확정
 
-이전 판은 한 글자 표본과 실제 렌더 서체의 관계가 멀고, 11,172자·1000 UPM 같은 가상 수치가 체험보다 앞섰다. 실제 사용자가 판단할 수 있는 것은 문장 안의 폭·획·간격이므로 그 역할을 첫 화면으로 올렸다.
+- 가격 140,000·220,000원 — 예시(order 섹션에 "예시" 명시).
+- 글리프 기본 글자 `활` — 브랜드 연상으로 정했고 사용자가 바꿀 수 있다.
+- 방향 카드 선택 — 위임으로 A를 골랐다(아래).
 
-| 출처 ID · 슬롯 | 출처 | 관찰 | 채택한 원리와 검증 |
-| --- | --- | --- | --- |
-| `KLIM-FONTS` · R1 구조 | https://klim.co.nz/fonts/ | Display, Text, Narrow, Condensed처럼 같은 계열의 역할과 폭을 나란히 제시한다. | 글꼴을 사양 표가 아니라 읽는 역할로 비교한다. 같은 문장을 두 역할로 렌더해 비교한다. |
-| `CHIPPERFIELD-PROJECTS` · R2 톤 | https://davidchipperfield.com/projects | 프로젝트명·연도·필터가 정렬선과 짧은 메타 안에서 읽힌다. | 큰 표본 아래에 기준선, 짧은 메타, 한 가지 행동을 정렬한다. 1440px 첫 화면에서 표본·상태·CTA의 순서를 확인한다. |
-| `SANDOLL-TYPELAB` · R3 디테일 | https://typelab.sandoll.co.kr/experience | 권장규격과 맞춤규격, 한글 범위를 선택하며 표본을 실제 작업으로 연결한다. | 버튼과 조판 슬라이더가 즉시 보이는 결과를 바꾸게 한다. 키보드·range·리셋으로 값을 바꾸어 검증한다. |
-| `WCAG-READ` · 접근성 | 200% 텍스트 확대와 320 CSS px reflow를 핵심 화면에서 별도로 시험한다. | 큰 활자 장면은 접근성 제목을 대신하지 않는다. | 이전 판에서 320px·200% 확대와 `aria-hidden` 표본을 관찰했다. Round 4 현재 결과는 최종 proof를 참조한다. |
+## 레퍼런스
+
+| 슬롯 | 출처 | 가져온 원리 |
+|---|---|---|
+| R1 구조 | https://abcdinamo.com/typefaces/favorit (2026-10-06 텍스트 페처) | 첫 화면이 타입 테스터, 변종·보기를 탭으로 바꾼다 |
+| R2 톤 | https://rsms.me/inter/ (2026-10-06 텍스트 페처) | 글자 표본이 곧 첫 화면, 설명은 아래 작게 |
+| R3 디테일 | https://typelab.sandoll.co.kr/experience (이전 판 기록 재사용, 미재검증) | 조작이 즉시 표본을 바꾼다 |
+| 푸터 | https://pangrampangram.com/ 확인 — 워드마크 한 줄 푸터 아님. 배정값으로 감(미검증) | — |
 
 ## 방향
 
-- **컨셉**: 문장이 보여 주는 활자의 차이.
-- **프리셋**: `editorial` — 읽는 시간이 주제이므로 따뜻한 바탕, 제한된 색, 좁은 본문 폭, 세리프 표제를 쓴다.
-- **감수한 리스크**: 이미지를 히어로에서 빼고 버밀리언 세 글자 표본 하나를 가장 큰 장면으로 사용한다. 제목과 설명은 별도 DOM으로 남겨 접근성 판단을 표본에 기대지 않는다.
+**지문**: 히어로 타이포 단독(글자 하나 거대 + 굵기 슬라이더) · 표제 Noto Serif KR 900 / 본문 Noto Sans KR 400 · 바탕 밝은 쿨 중립 #f1f2f4 · 강조 240° 남색 잉크 #22235a · radius 0 · 흐름 글리프 → 같은 문장 비교 → 조판 시험대 → 옆면 여백과 자간 → 가격(예시) → 워드마크 · 내비 탭·세그먼트(서체별 보기, 상단 바 없음, sticky 없음) · 푸터 큰 워드마크 한 줄 · 이미지 없음(글자가 이미지) · 모션 탭 전환 View Transitions + 글리프 크기 scroll-driven.
 
-## 토큰과 구현
+- **컨셉**: 본문 서체를 고르는 편집자가 한 글자를 굵기 축으로 밀어 보며 마루 부리(정적 2굵기)와 Pretendard(가변 45~920)의 성격을 판단하고, 같은 문장 조판으로 확인한다.
+- **프리셋**: swiss-minimal 지배(격자·침묵·쿨 중립), 보조 없음. 서체·명도·hue·radius는 plan.md 배정값.
+- **표현 리스크**: 글자 하나가 첫 화면 56svh를 차지해 "무엇을 하는 곳"이 h1·리드에만 있다. 검증: 1440·390 첫 화면에 h1·리드·슬라이더가 함께 들어오는지(둘 다 들어옴, 390 하단 821px).
+- **카드**: A 글자 하나의 굵기(선택) / B 문장 폭포(문장 다섯 크기, 자간 슬라이더) / C 자모 분해(초·중·종성 세 칸). A를 고른 이유 — 브리프의 사실(정적 2굵기 vs 가변 축)이 굵기 축에서 가장 분명하고, R1·R2 둘 다 글자 표본이 첫 화면이었다. B는 비교 섹션과 역할이 겹치고 C는 글자 교체가 어렵다.
+- **반사실**: 고유 요소 — 마루 부리 거대 글리프 + 서체별로 바뀌는 굵기 축(400↔600 / 100~900), 서체 이름 탭, 네이버·OFL·굵기 수 사실. 세무사무소로 치환하면 슬라이더·탭이 성립하지 않는다. 수렴(muwol-coffee 대비 6축): 히어로 패밀리·탭 내비 같음, 나머지 4축 다름.
+- **보존 자산**: 상호, 견본 문장, 시험대 기본값 17px/0em/1.8과 `display/body` 값, 마루 부리 파일, 예시 가격, 가상 고지.
 
-- **폰트**: 마루 부리는 공식 로컬 WOFF2 Regular 400·SemiBold 600으로 제목·조판 시험대·표본의 제목 상태를 맡고, Pretendard CDN은 본문·기본 표본 상태를 맡는다. `font-synthesis-weight: none`으로 합성 굵기를 막는다.
-- **색**: `--surface #f5f1e8`, `--ink #26221d`, `--accent #a63d2f`. 버밀리언은 표본과 행동에만 쓴다.
-- **크기**: h1 `clamp(40px, 1.6rem + 3vw, 60px)`, 표본 `clamp(96px, 11vw, 180px)`, 본문 폭 최대 `42rem`.
-- **레이아웃**: 데스크톱 첫 화면은 5:7 두 칼럼으로, 종이색 소개면과 적갈색 표본면을 맞물린다. 900px 미만에서는 소개면 다음에 표본면을 한 칼럼으로 둔다.
-- **상호작용**: native 버튼 두 개의 `aria-pressed`가 표본 폰트와 상태 문구를 바꾼다. 조판 시험대는 실제 마루 부리·Pretendard 선택과 크기·자간·행간 range를 제공하고, 리셋은 네 값을 함께 복원한다.
-- **성능**: 새 JavaScript 라이브러리·이미지·애니메이션 없음. 초기 체험은 인라인 DOM 코드만 사용한다. 활자 케이스의 두 장면은 생성 이미지임을 캡션으로 밝힌다.
+## 토큰과 예산
 
-## 의도적으로 하지 않은 것
+값은 `styles/tokens.css`. 역할: `--font-display` 표제·h3·워드마크, `--font-body` 본문·UI, `--face-buri`·`--face-godic` 표본·시험대 전용(UI에 쓰지 않는다). `--accent`는 거대 글리프·활성 탭·슬라이더·버튼에만. `--line-strong`은 컨트롤 테두리(3.98:1). Noto Sans KR은 400 한 굵기만 싣고 강조는 서체·색으로 낸다.
 
-- 마루 부리·Pretendard를 가상의 한성 서체로 속여 판매하지 않는다. 가상 기획과 실제 구현 폰트를 표본 바로 위와 푸터에 밝힌다.
-- 인장·붓글씨·세로쓰기·종이결처럼 한국 활자를 이국화하는 장식을 사용하지 않는다. 활자의 형태와 조판만으로 분위기를 만든다.
-- 움직임으로 활자의 차이를 설명하지 않는다. reduced motion에서도 같은 표본과 모든 조작이 남는다.
+예산(tokens §5 데모): JS 150KB — 실측 인라인 4KB. LCP 2.5s — 로컬 308ms(`#glyph`), CLS 0.000. 폰트 전송 200KB — **실측 ≈939KB 초과**(마루 부리 424KB + Pretendard 동적 서브셋 229KB + Noto 286KB). 표본 서체가 제품이고 마루 부리는 공식 배포본 그대로라 이번 작업에서 줄이지 않았다. 별도 작업 제안: OFL 범위의 한글 서브셋.
 
-## 이전 판 검증 기록 · 2026-09-12
+## 이펙트와 폴백
 
-아래는 이전 판에서 남긴 역사적 관찰이며 Round 4의 현재 통과 결과가 아니다. Round 4 결과는 최종 proof를 참조한다.
+- 탭 전환: `document.startViewTransition` 래퍼. 미지원·감소 모션은 즉시 교체. `::view-transition-*(glyph|face-status)`만 저자 키프레임.
+- 글리프 축소: `animation-timeline: scroll(root block)` 0~80vh, scale 1→0.55. `@media (prefers-reduced-motion: no-preference)`와 `@supports` 안에 둬 Firefox·감소 모션은 고정 크기.
+- 재질 없음. 이펙트 전부 끄고 JS를 꺼도 글리프·비교·시험대가 그대로 남는다(검증 참조).
 
-- `outputs/design-expertise-20260912/font/font-redesign-e2e.mjs`가 독립 정적 서버에서 320·390·768·1440·1920·2560px를 열었다. 각 폭의 문서 `scrollWidth`는 뷰포트 폭과 같고, 내비는 한 줄, 버튼은 최소 44px이었다.
-- 320px에서 200% 텍스트 확대 후 문서 폭은 320px, 서술형 h1은 80px으로 실제 확대됐다. 장식 표본은 `aria-hidden="true"`로 남았다.
-- `prefers-reduced-motion: reduce`에서 `scroll-behavior`는 `auto`였다. 키보드 Space로 제목 버튼을 선택하면 `aria-pressed`와 상태 문구가 마루 부리로 바뀌었다.
-- 세 range는 24px·0.05em·2.2를 표본과 캡션에 적용했고, 리셋은 17px·0em·1.8을 둘 다 복원했다.
-- 지연 이미지 두 장은 scrollIntoView 뒤 `decode()`를 통과했고, `metaltype.webp` 응답은 HTTP 200·naturalWidth 900이었다. `font-foundry-1440-first.png`, `font-foundry-390-first.png`, 전체 캡처와 JSON 보고서는 같은 outputs 폴더에 있다.
+## 하지 않기로 한 것
 
-## Round 4 판단표 · 2026-09-12
+- 사진 2장(`metaltype.webp`·`inkstone.webp`)을 화면에서 뺐다 — 같은 생성 이미지를 두 번 싣던 자리였고 배정이 "글자가 이미지"다. 파일은 디스크에 남긴다.
+- 상단 바·앵커 내비·sticky·backdrop-filter를 두지 않았다 — 한 장짜리 4화면 길이, 내비는 서체 탭 하나로 충분하다.
+- 마루 부리·Pretendard를 UI 서체로 쓰지 않았다(6-6 하우스 룩). 표본으로만 남긴다.
+- 가운뎃점 메타 문자열(`A · B`)을 가시 텍스트에서 없앴다. 시험대 캡션은 쉼표.
+- 스크롤 리빌 없음. 눈썹 라벨 없음.
 
-| 축 | 참고 범위와 현재 질문 | 채택과 기각 조건 | 구현 |
-| --- | --- | --- | --- |
-| 구도 | Arnheim·Hofmann의 균형·대비·구도 관점을 참고해 소개와 표본의 관계, 5:7 대안, 작은 폭에서의 순서 유지를 살핀다. | 소개와 표본의 관계가 읽히고 작은 폭에서 순서가 유지되면 채택한다. CTA가 밀리면 기각한다. | `--container-wide`, `--pad-wide` |
-| 타입 | Ruder의 구조·리듬·비례와 Wallace의 개인·성능·선호 분리 범위를 참고해 같은 문장·22px·1.8·동일 폭 두 칼럼과 가족 선택을 살핀다. | 조절과 reset이 깨지지 않을 때만 채택한다. 읽기 성능의 보편 효과는 주장하지 않는다. | `--font-display`, `--font-body` |
-| 색 | Albers의 색 맥락 관점을 참고해 작은 accent와 큰 stage의 관계를 비교한다. | 역할 경계와 대비가 유지되고 상태가 묻히지 않을 때 채택한다. | `--stage-ink`, `--accent` |
+## 검증
 
-## Round 4 실증 기록 · 2026-09-12
+- 자동(2026-10-06, apps/site): html-validate 0오류 · stylelint 통과 · no-hanja PASS · showcase-audit PASS 6/FAIL 0 · design-gate 충족 13/미검증 0/실패 0(static·visual·webkit 꺼짐) · 상호작용 스크립트 34/34(탭 키보드 패턴, 슬라이더·지연 로드, 기존 E2E 3단언, 200%+1.4.12 간격 재정의 가로 넘침 0, 감소 모션, 이펙트·JS 끔, 표제 마지막 줄 어절 ≥2) · 기존 `archive-showcases-e2e.mjs` font-foundry 14/14.
+- 시각 루브릭(약한 축부터): R7 1(h1이 범용) · R9 1(390 글자 입력이 한 줄 독점) · R1 2 · R2 2 · R3 2 · R4 2 · R5 2 · R8 2 · R10 2 · R6 N/A — 16/18, 통과. 근거와 캡처 경로는 작업 노트.
+- 대비: 본문 15.96:1, 보조 6.21:1(띠 위 5.62:1), 남색 면 위 글자 12.88:1.
+- 미검증: WebKit 실렌더(게이트 webkit=false), 실기기 INP, Firefox 폴백은 코드 가드만 확인.
 
-- **방향과 원리**: 한성활자연구소의 종이색·적갈색·금속 활자 이미지는 유지하고, 첫 화면을 5:7 종이 소개면과 적갈색 표본면으로 재배치했다. 표본면의 큰 흰 글자, 기준선, 선택 상태는 같은 시선 안에서 글꼴 전환을 읽게 한다.
-- **비교 조건**: Ruder의 구조·리듬·비례를 현재 화면의 검증 질문으로만 번역했다. 비교 두 칼럼은 같은 원문, 동일 폭, 기본 22px(`1.375rem`)와 `1.8` 행간을 공유하며 글꼴 가족만 다르다. 서체마다 글자가 보이는 크기는 다를 수 있다는 안내를 함께 둔다.
-- **채택과 측정 한계**: 조판 시험대는 실제 웹폰트 선택을 문장에 적용하고 네 제어값을 리셋한다. 화면 비교는 형태·폭·줄바꿈의 관찰을 돕지만, 읽기 속도·이해도 향상은 사용자 과업 측정 전까지 주장하지 않는다. 역사처럼 보일 수 있는 견본 문단은 견본글임을 명시했다.
-- **동일 브리프 보존**: 가상 기획·예시 가격·라이선스 안내, 네 개의 내비와 앵커, 기존 CTA, 금속 이미지와 생성 이미지 표기, 버튼의 `aria-pressed`·상태 문구, 기존 조판 range와 reset 기능을 보존한다.
+## 피드백 기록 · 보존 목록
 
-### Round 4 최종 판정
+- 보존: 같은 문장 22px/1.8 동일 폭 비교, 시험대 네 컨트롤과 리셋, 가상 고지 위치(가격 섹션 + 푸터).
 
-2026-09-12 원본 담당자 판정: 수용. 소개와 표본의 면 구분, 표본과 제어의 군집, 같은 조건의 문장 비교를 실제 데스크톱·모바일 캡처에서 확인했다. 작은 폭의 확대에서 발견한 내비·가격·제목의 넘침과 앵커 가림을 수정했다.
+## 변경 기록
 
-`outputs/design-expertise-20260912/round4/browser-proof/root-final-v3/feature-check-results.json`: 수정본 320·390·1440·1920px 4개 행 통과, 실패 0. 글꼴 실제 로딩, 키보드 선택·range·초기화, 앵커, 감소 모션, 이미지 decode, 문서 가로 넘침을 검사했다. 확대 검사는 루트 글자 크기 200% 및 자간 0.12em·행간 2의 조합이며, 브라우저 확대나 WCAG 전체 적합성 인증을 대신하지 않는다. 표본면의 설명·상태·선택/비선택 버튼 텍스트 대비는 6.07:1이었다. 사용자 읽기 속도·이해도·전환은 미측정이다.
-
-## 2026-09-12 전체 쇼케이스 점검
-
-- 기존 글꼴 선택·range·reset, 22px·1.8·동일 폭 비교 계약과 캡션·앵커 구도를 유지했다. 로컬 MaruBuri 경로는 `fonts.css?v=20260912all`로 명시했다.
-- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
-- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+- 2026-09-12 Round 4: 5:7 종이 소개면 + 적갈색 표본면, 마루 부리·Pretendard 비교 계약, 320·200% 확대 검사(옛 기록).
+- 2026-10-02 레드팀 06: 헤더 정렬·가격 "예시" 표기 정리.
+- 2026-10-06 재작업: 타이포 단독 히어로(거대 글리프 + 굵기 축), 서체 탭 내비, 큰 워드마크 푸터, Noto Serif KR 900/Noto Sans KR, #f1f2f4·#22235a·radius 0, View Transitions·scroll-driven, 사진 제거, og.png 추가. 이유: 19종 구성 수렴 해소(plan.md 배정).