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/form-architecture/styles/tokens.css

@@ -1,34 +1,65 @@
+/* 스튜디오 폼 — 토큰. 색·크기·간격은 여기서만 정한다(05 Q-25). */
 :root {
-  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
-  --surface: #fdfdfb;
-  --surface-raised: #ffffff;
-  --ink: #171b19;
-  --ink-muted: #5b615d;
-  --ink-faint: #686e6a;
-  --line: #d8dbd7;
-  --line-strong: #a7aca7;
-  --step--1: 0.75rem;
+  /* 서체: Gothic A1 한 패밀리, 두 웨이트. 표제·워드마크는 300(가늘고 넓게), 본문·색인은 400 */
+  --font-body: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  --weight-light: 300;
+  --weight-body: 400;
+
+  /* 색: 밝은 중립 종이 위에 먹만 쓴다. 강조색 없음(배정). */
+  --surface: #fcfcfb;
+  --sheet: #ffffff;
+  --ink: #161716;
+  --ink-muted: #585b58;
+  --ink-faint: #6b6e6b;
+  --line: #d9dad7;
+  --line-strong: #9a9c99;
+  --ink-rgb: 22 23 22;
+
+  /* 타입 스케일. 한글 캡션 하한 13px, 본문 16px(typography §6-5) */
+  --step--1: 0.8125rem;
   --step-0: 1rem;
-  --step-1: 1.25rem;
-  --step-2: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem);
-  --step-display: clamp(2.5rem, 5.5vw, 5.5rem);
-  --leading-tight: 1.12;
-  --leading-normal: 1.75;
-  --measure: 45rem;
-  --rail: 78rem;
-  --stage: 112.5rem;
-  --pad: clamp(1.25rem, 1rem + 2vw, 3rem);
+  --step-1: 1.125rem;
+  --step-2: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
+  --step-display: clamp(3.25rem, 1rem + 11vw, 11rem);
+  --leading-body: 1.7;
+  --leading-title: 1.55;
+  --leading-tight: 1.25;
+
+  /* 폭: 긴 문장 표제·본문 measure는 em(한글 32~40자) */
+  --measure: 36em;
+  --measure-title: 30em;
+  --rail-w: 15rem;
+  --sheet-max: 56rem;
+  --pad: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
+
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 1rem;
   --space-4: 1.5rem;
   --space-5: 2.5rem;
-  --space-6: clamp(3.5rem, 2.2rem + 4vw, 6rem);
-  --space-7: clamp(5rem, 3rem + 6vw, 9rem);
-  --header-h: 4rem;
+  --space-6: clamp(3rem, 2rem + 3vw, 5rem);
+  --space-7: clamp(5rem, 3rem + 7vw, 10rem);
+
+  /* 모서리: 도면·종이. 0 고정(배정) */
+  --radius: 0;
+
+  /* 무대 비율: 넓은 화면은 극단 파노라마, 세로 화면은 띠가 되지 않게 다시 정한다 */
+  --stage-ratio: 3.6 / 1;
+  --panel-ratio: 2.4 / 1;
+
+  /* 모션: 상태 전환만 시간 기반. 진행선·도면 선은 스크롤 축 */
   --dur-quick: 140ms;
-  --ease: cubic-bezier(.25, 1, .35, 1);
+  --ease: cubic-bezier(0.25, 1, 0.35, 1);
+
+  /* 재질: 종이 결. feTurbulence 한 장을 타일로 굽는다(런타임 필터 없음). 아주 약하게 */
+  --grain-opacity: 0.08;
+  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
 }
 
-@media (min-width: 120rem) { :root { --rail: 80rem; --stage: 112.5rem; } }
-@media (max-width: 20rem) { :root { --pad: 1rem; } }
+@media (max-width: 64rem) {
+  :root { --stage-ratio: 2.4 / 1; --panel-ratio: 2 / 1; }
+}
+
+@media (max-width: 40rem) {
+  :root { --stage-ratio: 16 / 10; --panel-ratio: 16 / 10; }
+}