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/cask-archive/styles/tokens.css

@@ -1,59 +1,50 @@
 /* ==========================================================================
-   캐스크 아카이브 (CASK ARCHIVE) — 디자인 토큰 SSOT
-   프리셋: dark-instrument + editorial-archival
-   컨셉: 독립병입자 희귀 캐스크 원장과 1:1 위스키 도슨트 — 오크와 피트의 시간
-   단일 강조색: 앰버 골드 (#D99B38)
+   캐스크 아카이브 — 디자인 토큰 (이 파일 한 곳에서만 정의한다)
+   방향: 어두운 웜 바탕의 아카이브 문서. 캐스크 번호 목록이 첫 화면, 표제는 작게.
+   표제 Nanum Myeongjo / 본문 IBM Plex Sans KR / 강조 25° 구리 / radius 2px
    ========================================================================== */
 
 :root {
-  /* 타이포그래피 스케일 */
-  --step--1: 0.8125rem;                                /* 13px — 캡션·일련번호 */
-  --step-0: 1rem;                                      /* 16px — 본문 */
-  --step-1: 1.1875rem;                                 /* 19px — 소제목 */
-  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem); /* 30px — 섹션 표제 */
-  --step-3: clamp(1.8rem, 1.4rem + 1.2vw, 2.25rem);    /* 36px — 서브 표제 */
-  --step-4: clamp(2.4rem, 1.8rem + 2.2vw, 3.8rem);      /* 60px — 메인 디스플레이 */
+  /* 타입 스케일 — 한글 본문 16px, 캡션 하한 13px(typography §6-5) */
+  --step--1: 0.875rem;                                  /* 14px — 캡션·보조 라벨 */
+  --step-0: 1rem;                                       /* 16px — 본문 */
+  --step-1: 1.125rem;                                   /* 18px — 소제목·h1(작게) */
+  --step-2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);   /* 22~28px — 섹션 제목 */
+  --step-3: clamp(2rem, 1.5rem + 1.6vw, 3rem);          /* 32~48px — 캐스크 번호 */
 
-  --leading-tight: 1.18;
+  --leading-tight: 1.3;
   --leading-normal: 1.7;
-  --measure: 54ch;
+  --measure: 36em;
 
-  --font-serif: "MaruBuri", "Noto Serif KR", serif;
-  --font-display: "MaruBuri", "Noto Serif KR", serif;
-  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
+  --font-display: "Nanum Myeongjo", "Noto Serif KR", serif;
+  --font-body: "IBM Plex Sans KR", "Noto Sans KR", sans-serif;
 
-  /* 다크 럭셔리 색상 — 미드나이트 오닉스 + 앰버 골드 1강조색 */
-  --surface: #0b0b0d;
-  --surface-raised: #141418;
-  --surface-card: #1c1c22;
-  --surface-subtle: #24242c;
-  --surface-sunken: #070708;
-  --surface-inverse: #f4f4f0;
+  --weight-regular: 400;
+  --weight-strong: 600;
+  --weight-display: 700;
 
-  --ink: #f4f4f0;
-  --ink-muted: #9ca3af;
-  --ink-faint: #6b7280;
-  --ink-inverse: #0b0b0d;
-  --ink-inverse-muted: #4b5563;
+  /* 어두운 웜 바탕 — 숙성고의 오크색 그늘(#1a1512 계열) */
+  --surface: #1a1512;
+  --surface-raised: #211a16;
+  --surface-card: #28201b;
+  --surface-sunken: #140f0d;
 
-  --line: #2a2a34;
-  --line-strong: #3f3f4e;
-  --line-subtle: #1e1e26;
-  --line-inverse: #d1d5db;
+  --ink: #efe6da;
+  --ink-muted: #b3a595;      /* #1a1512 위 7.5:1, #28201b 위 6.7:1 */
+  --ink-faint: #8f8071;      /* 차례 번호 — #1a1512 위 4.7:1 */
+  --ink-inverse: #1a1512;
 
-  /* 단일 강조색 — 오크 숙성 싱글 몰트 앰버 골드 */
-  --accent: #d99b38;
-  --accent-hover: #c28528;
-  --accent-light: rgba(217, 155, 56, 0.12);
-  --accent-surface: rgba(217, 155, 56, 0.2);
-  --accent-ink: #0b0b0d;
+  --line: #3a3029;
+  --line-strong: #5a4b3f;
+
+  /* 단일 강조 — 25° 구리 */
+  --accent: #d18147;         /* hsl(25 60% 55%) — #1a1512 위 6.0:1 */
+  --accent-hover: #dc9160;
+  --accent-light: rgba(209, 129, 71, 0.12);
+  --accent-ink: #1a1512;
 
   --radius: 2px;
-  --radius-sm: 4px;
-  --radius-md: 8px;
 
-  /* 간격 — SSOT 표준 */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 1rem;
@@ -61,16 +52,15 @@
   --space-5: 2.5rem;
   --space-6: 4rem;
   --space-7: 6rem;
-  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
 
-  /* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
-  --container: clamp(70rem, 62vw, 85rem);
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  /* 측면 색인 + 본문의 두 열 */
+  --index-width: 15rem;
+  --content-max: 68rem;
+  --pad-inline: clamp(1rem, 0.5rem + 2.5vw, 3rem);
   --control-block: 2.75rem;
   --control-pad-inline: 0.875rem;
 
-  /* 모션 */
-  --dur-quick: 180ms;
-  --dur-normal: 420ms;
+  /* 모션 — hover·focus 상태 전환만 */
+  --dur-quick: 160ms;
   --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
 }