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/muwol-coffee/styles/fonts.css

@@ -1,15 +0,0 @@
-@font-face {
-  font-family: "MaruBuri";
-  src: url("../assets/fonts/MaruBuri-Regular.woff2") format("woff2");
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "MaruBuri";
-  src: url("../assets/fonts/MaruBuri-SemiBold.woff2") format("woff2");
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-}

apps/site/public/work/muwol-coffee/styles/tokens.css

@@ -1,51 +1,50 @@
 /* ==========================================================================
-   무월 (MUWOL) — 디자인 토큰
-   프리셋: quiet-commerce
-   컨셉 한 문장: 종이 원장처럼 정직한 구독 — 화면에는 사양과 실측만.
-   레퍼런스: R1 coffeecollective.dk(구조·가격 노출·거래 투명성)
-            R2 fitzcarraldoeditions.com(세리프 본문 정돈, 1강조색)
-            R3 scroll-driven view() — 채택 안 함(IO 등장만 씀. 정적 HTML + 폴백 우선)
-   하지 않은 것: 세로 GNB 레일, 영어 대문자 eyebrow, 전면 그레인 오버레이,
-               FIG.00 캡션 문법, 카드 그림자. 이유: 계기판 흉내가 상품을 가림.
+   무월 (MUWOL) — 디자인 토큰. 토큰은 이 파일 한 곳에만 둔다(05 Q-25).
+   컨셉 한 문장: 손님이 이번 로스팅 원두의 이름과 볶은 날을 첫 화면에서 읽고,
+                탭에서 산미·바디와 가격을 확인한다.
+   레퍼런스: R1 coffeecollective.dk(원두 하나가 첫 화면), sey.coffee·momos.co.kr(연락처·영업시간 푸터)
+            R2 37signals.com(타이포 단독, 단색 바탕, 한 웨이트)
+            R3 heartroasters.com(상품 위 role=tablist)
    ========================================================================== */
 
 :root {
-  /* 타입 스케일 — 최대(64px) ÷ 본문(16px) = 4.0배 */
-  --step--1: 0.8125rem;                                /* 13px — 캡션·주석 */
-  --step-0: 1rem;                                      /* 16px — 본문 */
-  --step-1: 1.25rem;                                   /* 20px — 소제목 */
-  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);  /* 28px — 섹션 표제 */
-  --step-3: clamp(1.5rem, 0.6rem + 3.4vw, 3.25rem);    /* 52px — 320px에서도 두 줄 */
+  /* 타입 스케일 — 표제(Gothic A1 900)는 본문의 최대 6.25배. 한 줄 큰 낱말이 첫 화면의 주인이다 */
+  --step--1: 0.8125rem;                                  /* 13px — 캡션·주석. 한글 하한 */
+  --step-0: 1.0625rem;                                   /* 17px — 본문. Gowun Dodum은 같은 px에서 작게 보여 1px 올린다 */
+  --step-1: 1.25rem;                                     /* 20px — 소제목·탭 */
+  --step-2: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);         /* 24~32px — 패널 표제 */
+  --step-3: clamp(2rem, 0.6rem + 4.4vw, 4.25rem);        /* 32~68px — 로스팅 날짜 줄 */
+  --step-4: clamp(3.25rem, 0.5rem + 6.6vw, 6.25rem);     /* 52~100px — h1. 1440에서 "에티오피아 구지 우라가" 한 줄 */
 
-  --leading-tight: 1.28;
-  --leading-normal: 1.75;
-  --measure: 34ch;
+  --leading-tight: 1.1;      /* h1·날짜 줄. 두 줄이 되는 390에서 받침·초성이 닿는지 실측(5단계) */
+  --leading-heading: 1.3;
+  --leading-normal: 1.7;
+  --measure: 36em;
 
-  --font-display: "MaruBuri", serif;
-  --font-serif: "MaruBuri", serif;
-  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
-  --font-mono: "JetBrains Mono", monospace;
+  --font-display: "Gothic A1", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  --font-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  --weight-display: 900;
+  --weight-body: 400;
 
-  /* 색 — hue 2개: 안개 종이 + 볶은 원두 앰버. 강조색은 앰버 하나. */
-  --surface: #f4f4f0;
-  --surface-raised: #eaeae4;
-  --surface-inverse: #181b18;
-  --ink: #181b18;
-  --ink-muted: #585c56;
-  --ink-faint: #696e68;
-  --ink-inverse: #f4f4f0;
-  --ink-inverse-muted: #a8aca4;
+  /* 색 — 어두운 갈색 바탕 하나 + 자두 강조 하나. 강조 hue는 similarity.mjs 기준(CIELAB LCh) 330°.
+     대비 실측(5단계에서 재검): ink/surface 14.97, muted/surface 7.24, faint/surface 6.46,
+     accent/surface 7.24, ink-on-accent 7.24, muted/raised 6.46 */
+  --surface: #1f1713;
+  --surface-raised: #2a211c;
+  --surface-sunken: #180f0c;
+  --ink: #f3ebe4;
+  --ink-muted: #b3a399;
+  --ink-faint: #a89a90;
 
-  --line: #d5d7d0;
-  --line-inverse: #3a3e39;
+  --line: #3d322b;
+  --line-strong: #5a4b42;
 
-  --accent: #7a3e1d;
-  --accent-hover: #5c2d13;
-  --surface-bright: #fffffa; /* 반전 블록 안 밝은 hover 단계 */
-  --accent-ink: #f4f4f0;
+  --accent: #d390ca;
+  --accent-hover: #e4a0db;
+  --accent-ink: #1f1713;
 
-  /* 대비(실측 예정 — 5단계에서 재검): ink/surface 15.6, muted/surface 6.2,
-     accent/surface 7.5, inverse 조합은 본문 AA 이상으로 설계 */
+  /* placeholder 표식 — 사용자만 아는 값(주소·영업시간·전화)의 자리. 점선 밑줄 하나로 통일 */
+  --ph-line: 1px dashed var(--line-strong);
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -54,14 +53,30 @@
   --space-5: 2.5rem;
   --space-6: 4rem;
   --space-7: 6rem;
-  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
+  --space-8: clamp(4rem, 2.5rem + 5vw, 8rem);
 
   --radius: 2px;
 
   --container: 1120px;
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  --pad-inline: clamp(1.25rem, 0.75rem + 2.5vw, 4rem);
+  --photo: clamp(11rem, 8rem + 12vw, 19rem);   /* 원형 크롭 지름 */
 
-  --dur-quick: 180ms;
+  /* 모션 — 등장 스태거(로드 1회)와 마퀴(앰비언트 루프). 감소 모션에서는 둘 다 0 */
+  --dur-quick: 160ms;
   --dur-normal: 420ms;
-  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+  --dur-rise: 620ms;
+  --stagger: 90ms;
+  --rise-shift: 0.6em;
+  --marquee-dur: 26s;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --dur-normal: 0ms;
+    --dur-rise: 0ms;
+    --stagger: 0ms;
+    --rise-shift: 0;
+    --marquee-dur: 0s;
+  }
 }