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/hyang-incense/styles/tokens.css

@@ -1,37 +1,41 @@
 /* ==========================================================================
-   향연 — 디자인 토큰
-   프리셋: quiet-luxury
-   컨셉 한 문장: 밝은 편집면 위의 기록 — 여백이 주인공이고 연기 한 줄기가 흔적이다.
-   레퍼런스: 방향은 dogfood-incense(단, 그 파일의 6축 수치는 audit-references.md
-            에서 날조로 판명 — 토큰 근거로 쓰지 않는다). 사이트 선택(정향·아카이브
-            계열의 절제)만 방향 앵커로 쓰고, 값은 브리프에서 다시 정했다.
-   하지 않은 것: 스티커형 상품 카드, 영어 eyebrow, 배경 음영 그라디언트,
-               숫자 카운트업. 이유: 기록물의 권위는 고요함에서 온다.
+   향연 — 디자인 토큰 (2026-10-06 재작업)
+   컨셉 한 문장: 침향을 찾는 손님이 돌 받침에 꽂힌 향 한 자루와 연기를 보고,
+                 입고 연도·수지 함량 기록을 읽은 뒤 시향 시간을 확인한다.
+   배정(outputs/rework-2026-10-06/plan.md): 제품 단독 히어로 · 내비 없음 ·
+     큰 워드마크 푸터 · Gowun Batang / Noto Sans KR · 회보라 #e6e1ea ·
+     강조 LCh 10° · radius 2px · scroll-driven 연기 · feTurbulence 연기 재질.
+   하지 않은 것: 웜 페이퍼 바탕, 마루 부리, 적갈 강조, 상단 바, 스크롤 리빌 —
+     font-foundry·thursday·muwol·materia와 0.80~0.96으로 묶였던 군집의 축이다.
    ========================================================================== */
 
 :root {
-  /* 타입 — 최대(60px) ÷ 본문(17px) ≈ 3.5배. 본문을 17px로 — 천천히 읽히는 페이지 */
-  --step--1: 0.8125rem;                              /* 13px — 캡션 */
-  --step-0: 1.0625rem;                               /* 17px — 본문 */
-  --step-1: 1.25rem;                                 /* 20px — 소제목 */
-  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);/* 28px — 섹션 표제 */
-  --step-3: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* 60px — 디스플레이 */
+  /* 타입 — 본문 17px(천천히 읽히는 페이지), 표제는 한 줄 큰 낱말 하나뿐이라
+     본문의 8배까지 올린다(1440에서 144px, 390에서 63px). */
+  --step--1: 0.8125rem; /* 13px — 캡션·표 머리 */
+  --step-0: 1.0625rem; /* 17px — 본문 */
+  --step-1: 1.25rem; /* 20px — 소제목·가격 */
+  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); /* 24~34px — 섹션 표제 */
+  --step-3: clamp(3.5rem, 2rem + 8vw, 9rem); /* 56~144px — h1 한 줄 */
+  --step-mark: clamp(5rem, 2rem + 22vw, 20rem); /* 푸터 워드마크 */
 
-  --leading-tight: 1.3;
-  --leading-normal: 1.9;
+  --leading-tight: 1.2;
+  --leading-normal: 1.8;
 
-  --font-display: "MaruBuri", serif;
-  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+  --font-display: "Gowun Batang", "Noto Serif KR", serif;
+  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
+  --weight-strong: 400; /* 폰트 전송량 때문에 웨이트는 패밀리당 하나(400)만 싣는다. 강조는 색·크기로 */
 
-  /* 색 — 따뜻한 중성 바탕 2단계 + 텍스트 3단계 + 적갈 1. */
-  --surface: #f6f2e9;
-  --surface-raised: #efe9dc;
-  --ink: #2b2724;
-  --ink-muted: #6d655c;
-  --ink-faint: #746c60;
-  --line: #ddd4c3;
-  --accent: #7c3b24;      /* 적갈 — 링크와 핵심 동작만 */
-  --accent-hover: #5f2c1a;
+  /* 색 — 회보라 바탕 2단계 + 먹 3단계 + 불씨 1. 강조는 링크·행동·표의 "숙성 중" 한 칸.
+     대비(실측 2026-10-06): ink 11.6:1, ink-muted 5.7:1, accent 4.8:1 (모두 #e6e1ea 위). */
+  --surface: #e6e1ea;
+  --surface-raised: #ddd7e2;
+  --ink: #2a2530;
+  --ink-muted: #5a5361;
+  --line: #c6bfcd;
+  --accent: #b62752; /* 불씨 — CIELAB LCh 10.7° (similarity.mjs 기준) */
+  --accent-deep: #8f1f40; /* hover·작은 글자 */
+  --smoke: #6f6678; /* 연기 — 먹을 바탕 쪽으로 눕힌 회보라 */
 
   --space-1: 0.25rem;
   --space-2: 0.5rem;
@@ -40,16 +44,17 @@
   --space-5: 2.5rem;
   --space-6: 4rem;
   --space-7: 6.5rem;
-  --space-8: clamp(5rem, 3.4rem + 6vw, 10rem);  /* 이 페이지의 여백은 다른 페이지보다 깊다 */
+  --space-8: clamp(5rem, 3.4rem + 6vw, 10rem);
 
   --radius: 2px;
 
-  /* 향의 문장은 좁게, 장부와 실물 기록은 넓게 둔다. */
+  --measure: 36em; /* 한글 본문 한 줄 32~40자 (typography §6-5) */
   --container: 1160px;
-  --container-wide: 1440px;
   --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4.5rem);
 
   --dur-quick: 160ms;
-  --dur-normal: 560ms;      /* 느린 페이지 — 등장도 느리게 */
   --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+
+  /* 연기 — 스크롤 0~40vh 동안 마스크가 올라가며 연기가 더 높이 보인다. */
+  --smoke-rest: 55%; /* 미지원·감소 모션에서 드러나는 높이 */
 }