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/overtone-sound/styles/tokens.css

@@ -1,39 +1,55 @@
 /* ==========================================================================
-   오버톤 사운드랩 — 디자인 토큰
-   프리셋: anti-grid
-   컨셉 한 문장: 어두운 스튜디오 바닥에 흩뿌린 목록 — 격자는 일부러 비틀었다.
-   레퍼런스: R1 carstennicolai.de(실측: 1152px 컨테이너, 비대칭 15/20/85 열,
-            압축 타입 스케일 1.8:1, 아카이브 역연도, 형광 1색 → 앰버로 치환)
-            R2 obys.agency(스태거 2열, 라인 마스크 리빌, 마퀴 1회)
-            R3 절차적 유사-FFT 캔버스(오디오 디코드 회피)
-   하지 않은 것: 글래스 도크, 3열 카드, 커서 추적 이펙트, 대문자 타이틀.
-               이유: 파열은 하나(스태거+파형)로 족하다.
+   오버톤 사운드랩 — 디자인 토큰 (2026-10-06 재작업)
+   컨셉 한 문장: 전시 기획자가 파형·설치 사진·측정 수치 조각이 겹친 첫 화면에서
+   "이 연구소는 잔향을 재고 스피커를 놓는 곳"임을 읽고 작업 네 건을 확인한다.
+   레퍼런스: R1 boxoftoysaudio.com(실측 1440: 상단 내비 없음, 하단 도크만. 푸터 워드마크
+            1400×270px 전폭, 그 위 20px 열 행 + 1px 괘선) — 내비 없음·워드마크 푸터
+            R2 davidrudnick.org(실측 1440: 검정 바탕, 452×452 큰 조각 2 + 287px 폭 작은 조각
+            여러 장이 격자에서 벗어나 크기 차를 두고 놓임) — 어두운 콜라주의 조각 크기 차
+            R3 carstennicolai.de(기존: 아카이브 역연도 목록) — 작업 목록의 순서
+   하지 않은 것: 스크롤 리빌, 모노 서체, 앰버, 상단 바, 재질 필터, 사진 반복.
    ========================================================================== */
 
 :root {
-  /* 타입 — R1의 압축 스케일. 최대(40px) ÷ 본문(16px) = 2.5배(선언 문장 제외) */
+  /* 서체 — 표제 Black Han Sans(OFL, Google Fonts), 본문 Gothic A1(OFL, Google Fonts).
+     숫자는 모노 대신 본문 서체 + tabular-nums 로 정렬한다(typography §6-5). */
+  --font-display: "Black Han Sans", "Gothic A1", sans-serif;
+  --font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  --weight-body: 400;
+  --weight-strong: 700;
+
+  /* 타입 스케일 — 본문 16px, 보조 13px 하한(한글 조판 정본) */
   --step--1: 0.8125rem;
   --step-0: 1rem;
   --step-1: 1.125rem;
   --step-2: 1.375rem;
-  --step-3: clamp(1.875rem, 1.3rem + 2.8vw, 2.5rem); /* 40px 히어로 */
-  --step-manifesto: clamp(1.875rem, 1.2rem + 4.4vw, 3.75rem); /* 선언 — 이 페이지의 가장 큰 목소리 */
+  --step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);                /* 섹션 제목 */
+  --step-hero: clamp(1.6rem, 0.9rem + 4.9vw, 5.75rem);            /* 두 줄 문장 표제: 320=26px, 390=33px, 1440=85px */
+  --step-manifesto: clamp(2.25rem, 1.25rem + 4.4vw, 5.5rem);      /* 작업 방식 한 문장 */
+  --step-wordmark: clamp(2.5rem, 14.2vw, 13.5rem);                /* 푸터 워드마크(폭 6.05em): 390=55px, 1440=204px, 1920 이상 216px */
+  --step-figure: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);          /* 콜라주 수치 조각 */
 
-  --leading-tight: 1.25;
-  --leading-normal: 1.75;
-
-  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
-  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  --leading-tight: 1.15;
+  --leading-heading: 1.3;
+  --leading-body: 1.7;
+  --measure: 36em;
 
+  /* 색 — 어두운 스튜디오 바닥(#12100e 유지)과 345° 로즈 신호 */
   --surface: #12100e;
-  --surface-raised: #1d1915;
-  --ink: #f1ebe1;
-  --ink-muted: #b5aa9a;
-  --ink-faint: #91887c;
-  --line: #39322b;
-  --accent: #efad4b;        /* 앰버 — 선과 텍스트로만 */
-  --accent-dim: rgba(239, 173, 75, 0.38);
+  --surface-rgb: 18 16 14;
+  --surface-raised: #1c1816;
+  --surface-sunken: #0c0b0a;
+  --ink: #f4eee7;              /* 대비 17.6:1 */
+  --ink-muted: #bcb1a5;        /* 대비 9.0:1 */
+  --ink-faint: #93897c;        /* 대비 5.5:1 — 13px 보조 글자의 하한 */
+  --line: #3a332d;
+  --line-strong: #55493f;
+  --accent: #ef587e;           /* 345° 로즈(LCH 10°). #12100e 위 5.8:1 — 연도·선·파형·수치 면 */
+  --accent-rgb: 239 88 126;
+  --accent-deep: #8f2a47;      /* 듀오톤 중간 톤 */
+  --accent-on: #12100e;        /* 로즈 면 위 글자 */
 
+  /* 간격 */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 1rem;
@@ -43,12 +59,14 @@
   --space-7: 6rem;
   --space-8: clamp(4.5rem, 3rem + 6vw, 8.5rem);
 
-  --radius: 0;              /* 스튜디오 바닥에는 모서리가 없다 */
+  --radius: 0;                 /* 조각은 종이처럼 각지다 — 모서리 없음 */
+  --border: 1px;
 
-  --container: 78rem;
-  --pad-inline: clamp(1.25rem, 0.75rem + 3vw, 5.5rem);
+  --container: 84rem;
+  --pad-inline: clamp(1.25rem, 0.75rem + 2.4vw, 3.5rem);
 
+  /* 모션 — 캔버스(요청 애니메이션)와 마퀴만. 등장 리빌은 없다 */
   --dur-quick: 160ms;
-  --dur-normal: 460ms;
   --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+  --marquee-duration: 48s;
 }