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/lumina-optics/styles/tokens.css

@@ -1,41 +1,47 @@
 /* ==========================================================================
-   Lumina Optics — 디자인 토큰
-   프리셋: refraction / WebGL instrument
-   컨셉 한 문장: 광학 시험대 — 유일한 색은 프리즘이 스스로 만드는 스펙트럼.
-   레퍼런스: 방향 앵커 dogfood-optics(광학업종의 데이터 노출). 그 파일의 수치는
-            audit-references.md 날조 판명 — 토큰은 브리프 재정의. UI는 무채색에
-            가깝게: 색은 캔버스 안에서만 정당하다(design.md R2 원리와 같은 결).
-   성능 예산: **상향 명시** — three.module.js ≈165KB(gzip) 지연 import.
-            이 페이지의 제품이 WebGL 데모 자체이므로 데모 예산 상향 규칙 적용.
-            UI JS(슬라이더 바인딩)는 인라인 <1KB.
-   하지 않은 것: 스펙텔러 그라디언트 배경, 'unrivaled clarity' 카피,
-               3열 카드. 이유: 광학은 곡선으로 말한다.
+   Lumina Optics — 디자인 토큰 (2026-10 재작업)
+   컨셉 한 문장: 18% 그레이 카드 위에 놓인 검은 시험 상자 — 색은 프리즘이 만든
+               스펙트럼과 632.8 nm 헬륨네온 빨강 한 줄뿐이다.
+   재작업 이유: 2026-09판은 pulsegate·synapse-bci와 같은 틀(니어블랙 바탕, 모노
+               소문자 워드마크, 왼쪽 글·오른쪽 다크 패널, radius 2px, IBM Plex)
+               이었다(레드팀 06 P0-1, tools/similarity.mjs 유사도 0.84).
+   결정:
+     - 바탕: 사진가가 노출을 맞추는 중성 회색 카드에서 출발해 본문 대비 7:1이
+             나오도록 명도를 끌어올린 중간 회색(L*≈68). 어두운 면은 시험 상자 하나.
+     - 서체: 한글 본문·표제 모두 SUIT. 숫자가 주인공인 페이지라 SUIT의 숫자 폭과
+             900 굵기를 쓴다. 모노는 쓰지 않는다 — 수치는 tabular-nums로 맞춘다.
+     - 형태: 렌즈는 원이다. 상자·패널은 큰 반경(28px), 조작부는 알약형.
+     - 모션: 스크롤 등장 없음. 조작(슬라이더·드래그)에만 반응한다.
+   하지 않은 것: 스펙트럼 그라디언트 배경, 'unrivaled clarity' 카피, 3열 카드,
+               스크롤 리빌. 이유: 색과 움직임은 시험대가 소유한다.
    ========================================================================== */
 
 :root {
-  /* 타입 — 최대(58px) ÷ 본문(16px) ≈ 3.6배 */
+  /* 타입 — 최대 표제(88px) ÷ 본문(17px) ≈ 5.2배. 숫자를 이미지로 쓴다. */
   --step--1: 0.8125rem;
-  --step-0: 1rem;
-  --step-1: 1.1875rem;
-  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
-  --step-3: clamp(2.125rem, 1.4rem + 3.4vw, 3.625rem);
+  --step-0: 1.0625rem;
+  --step-1: 1.25rem;
+  --step-2: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
+  --step-3: clamp(2.375rem, 1.2rem + 4.6vw, 5.5rem);
+  --step-num: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem);
 
-  --leading-tight: 1.24;
-  --leading-normal: 1.72;
+  --leading-tight: 1.08;
+  --leading-normal: 1.7;
 
-  --font-body: "IBM Plex Sans", "IBM Plex Sans KR", Pretendard, -apple-system, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
+  --font-body: "SUIT Variable", "SUIT", "Apple SD Gothic Neo", sans-serif;
 
-  /* 색 — 시험실 무채색. 살짝 청록 기운의 액센트는 '레이저 라인' 하나뿐. */
-  --surface: #101214;
-  --surface-raised: #15181b;
-  --ink: #e8ecee;
-  --ink-muted: #9ba4a9;
-  --ink-faint: #849096;
-  --line: #23272b;
-  --line-strong: #394046;
-  --accent: #bfe8ee;       /* 레이저 라인(밝게 — 텍스트용) */
-  --accent-stroke: #7fb9c4;
+  /* 색 — 회색 카드와 검은 시험 상자 */
+  --surface: #a6a9a9;          /* 중간 회색 바탕 — 본문 잉크 대비 ≈7.8:1 */
+  --surface-raised: #b9bcbc;   /* MTF·표 면 */
+  --surface-chamber: #070808;  /* 시험 상자 */
+  --ink: #0d0f10;
+  --ink-muted: #2c3133;        /* 회색 바탕 위 대비 ≈4.9:1 */
+  --ink-on-dark: #e9eceb;
+  --ink-on-dark-muted: #a9b0b1;
+  --line: #7e8383;
+  --line-strong: #0d0f10;
+  --accent: #d4231a;           /* 632.8 nm 헬륨네온 빨강 — 선·점·눈금 전용, 글자 금지 */
+  --accent-on-dark: #ff5a4a;
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -44,14 +50,14 @@
   --space-5: 2.5rem;
   --space-6: 4rem;
   --space-7: 6rem;
-  --space-8: clamp(4.5rem, 3rem + 6vw, 8.5rem);
+  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
 
-  --radius: 2px;
+  --radius: 28px;
+  --radius-pill: 999px;
 
-  --container: 1240px;
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 5rem);
+  --container: 1280px;
+  --pad-inline: clamp(1rem, 0.6rem + 2.4vw, 4.5rem);
 
-  --dur-quick: 160ms;
-  --dur-normal: 420ms;
-  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+  --dur-quick: 140ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
 }