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/griddle-club/styles/tokens.css

@@ -1,32 +1,76 @@
+/* 철판클럽 토큰 — 2026-10-06 재작업(outputs/rework-2026-10-06/plan.md 배정값).
+   색·서체·radius·모션 값은 이 파일에만 둔다. site.css·franchise.css는 var()만 쓴다. */
 :root {
   color-scheme: light;
-  --paper: #f4f1e9;
-  --paper-bright: #fffdf8;
-  --ink: #211f1c;
-  --ink-soft: #56514a;
-  --ink-faint: #625d56;
-  --line: #c9c2b7;
-  --line-strong: #8a8379;
+
+  /* 바탕 — 유채 크림. 쟁반 위 유산지의 색이다. 섹션 교대는 밝은 크림(surface)과 진한 크림(bg-deep)으로만 한다 */
+  --bg: #fbe9c8;
+  --bg-deep: #f4d9a3;
+  --surface: #fff7e8;
+  --surface-rgb: 255 247 232;
+
+  /* 먹 — 따뜻한 갈색 먹. 패티 가장자리의 색. 크림 위 대비 14.3:1 */
+  --ink: #26190f;
+  --ink-soft: #5c4a39; /* 7.0:1 */
+  --ink-faint: #6b5744; /* 5.7:1 — 보조 라벨 하한 */
+  --ink-rgb: 38 25 15;
+  --on-ink: #fbe9c8;
+  --on-ink-soft: #e9d2a8; /* 먹 위 11.6:1 */
+  --on-ink-faint: #c9b79b; /* 먹 위 8.7:1 */
+
+  /* 선 — 크림보다 한 단 진한 모래색 */
+  --line: #e2c99e;
+  --line-strong: #b89a6c;
+
+  /* 강조 — 코발트(유지). 쟁반과 클립의 색. 크림 위 5.6:1, 흰 글자 6.7:1 */
   --blue: #2147e7;
   --blue-dark: #1533ac;
-  --blue-soft: #8ea5ff;
-  --blue-pale: #dce4ff;
-  --steel: #d9dcda;
+  --blue-pale: #dbe3ff;
+  --on-blue: #ffffff;
+  --on-blue-soft: #dbe3ff; /* 코발트 위 5.3:1 */
+
+  /* 치즈 — 스티커 한 장에만 쓴다 */
   --cheese: #ffc642;
-  --danger: #b33124;
-  --success: #17683b;
+  --on-cheese: #26190f; /* 10.9:1 */
+
+  /* 상태 */
+  --danger: #b33124; /* 크림 위 5.2:1 */
+  --success: #17683b; /* 5.7:1 */
+  --pause: #7a5a10; /* 5.3:1 */
   --focus: #2147e7;
-  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+
+  /* 서체 — 표제 Jua(한 굵기), 본문 Gothic A1. 둘 다 Google Fonts OFL, 한글 슬라이스 서브셋 */
+  --font-display: "Jua", "Gothic A1", "Apple SD Gothic Neo", sans-serif;
+  --font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  --weight-body: 500;
+  --weight-strong: 700;
+  --weight-heavy: 800;
+
+  /* 타입 스케일 — 본문 16, 표제는 vw 보간 */
+  --text-xs: 13px;
+  --text-sm: 14px;
+  --text-md: 16px;
+  --text-lg: clamp(17px, 1.4vw, 19px);
+  --text-h3: clamp(24px, 2.2vw, 30px);
+  --text-h2: clamp(36px, 4.4vw, 60px);
+  --text-h1: clamp(46px, 6.2vw, 92px);
+  --leading-body: 1.7;
+  --leading-tight: 1.2;
+  --leading-display: 1.14;
+  --tracking-display: -0.01em;
+
+  /* 폭 */
   --wrap: 1180px;
-  /* 초광폭에서도 히어로와 후속 정보 표면은 같은 폭을 쓰지 않는다. */
+  --measure: 36em;
   --hero-wide: 2160px;
   --stage-wide: 1680px;
   --workbench-wide: 1480px;
-  --copy-wide: 900px;
-  --media-wide: 1120px;
+  --copy-wide: 880px;
+  --media-wide: 1100px;
   --gutter: clamp(18px, 4vw, 52px);
-  --section: clamp(76px, 10vw, 144px);
+  --section: clamp(72px, 9vw, 128px);
+
+  /* 간격 */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
@@ -35,17 +79,32 @@
   --space-6: 32px;
   --space-7: 48px;
   --space-8: 72px;
-  --radius-sm: 4px;
-  --radius: 10px;
-  --radius-lg: 18px;
-  --shadow: 0 18px 50px rgb(33 31 28 / 10%);
-  --header-height: 78px;
+
+  /* radius — 알약과 16px, 둘뿐이다 */
+  --radius: 16px;
+  --radius-pill: 999px;
+
+  /* 깊이 — 그림자는 콜라주 조각에만 */
+  --shadow-piece: 0 24px 60px rgb(38 25 15 / 18%);
+  --shadow-card: 0 10px 30px rgb(38 25 15 / 10%);
+
+  /* 모션 — 스태거 등장(히어로 조각) + 마퀴. 감소 모션에서는 전부 0 */
+  --dur: 520ms;
+  --dur-fast: 180ms;
+  --stagger: 90ms;
+  --shift: 28px;
+  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --marquee-dur: 32s;
+
+  --header-height: 72px;
+  --action-bar-height: 64px;
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 @media (max-width: 720px) {
   :root {
-    --header-height: 64px;
-    --section: 72px;
+    --header-height: 60px;
+    --section: 64px;
   }
 }
 
@@ -60,3 +119,13 @@
     --wrap: 1400px;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur: 0.01ms;
+    --dur-fast: 0.01ms;
+    --stagger: 0ms;
+    --shift: 0px;
+    --marquee-dur: 0.01ms;
+  }
+}