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/rfs-cfd/styles/tokens.css

@@ -1,106 +1,84 @@
 /* ==========================================================================
-   RFS — Realtime Fluid Simulator · 디자인 토큰 SSOT
-   실시간 GPU 유체 시뮬레이션 엔진 (데이터센터 열관리) 프로모션 사이트
+   RFS — Realtime Fluid Simulator · 디자인 토큰 SSOT (2026-10-06 재작업)
 
-   컨셉 : 암실과 사양서 — 유동이 있는 곳은 어둡고, 읽는 곳은 밝다
-   프리셋: darkroom-spec (신규 정의. dark-instrument 를 쓰지 않은 이유는 아래)
-   강조색: 계기 청색 1색. 라이트/다크는 규칙으로 정의된 한 쌍이므로 1종으로 센다
+   컨셉 : 계기판 — 해석 캔버스와 제어 패널이 첫 화면의 주인이고, 표제는 작다.
+          페이지는 밝은 쿨 바탕 한 체제다. 어두운 면은 캔버스 화면(.hero-stage) 하나뿐이다.
+          이전 판의 "암실/사양서" 띠 교대(어두운 띠 4 + 밝은 띠 4)는 없앴다 —
+          쇼케이스 19종 계측에서 띠 교대·Pretendard·IBM Plex Mono·큰 고지 푸터가
+          saebyeok-cheonggwa 와 0.887 로 묶였기 때문이다(outputs/rework-2026-10-06/plan.md).
 
-   ── 레퍼런스 실측 (2026-08-24, 1440px computed style)
-   R1 구조 · luminary.ai (Physics AI 시뮬레이션 플랫폼)
-       배경 #2A2C2F · GT Standard + GT Standard Mono 2패밀리
-       h1 72px/600 · 본문 16px · 최대÷본문 4.5배
-       radius 0px 1898회 지배 (8px 36 / 9999px 11)
-       컨테이너 1425 전폭 ↔ 1297 ↔ 974 · 섹션 14
-       히어로: 시뮬레이션 영상 1440×1440 이 첫 화면을 100% 덮는다
-       → 가져온 원리: 시뮬레이션 결과가 히어로를 통째로 먹고 UI 는 무채색으로 물러난다.
-         색은 시각물 안에서만 소리친다
-       → 안 가져온 것: 섹션 14개, 비어 있는 h1(접근성 실패), 'Physics AI Factory' 류 조어
+   ── 레퍼런스 실측 (2026-10-06, 1440×900 playwright)
+   R1′ 구도 · windy.com — 지도 캔버스 1440×900 이 첫 화면 전부. h1 없음.
+       제어는 가장자리 패널(왼쪽 위 검색·예보 390px 폭, 오른쪽 레이어 버튼 세로 열,
+       아래 시간축 띠 + 범례 kt 0~60). radius 0 이 384 : 83 으로 지배.
+       → 가져온 것: 제어를 캔버스 옆 세로 열에, 범례·캡션을 캔버스 아래 띠에 둔다
+       → 안 가져온 것: 전폭 오버레이(캔버스 위 글자는 어두운 스크림이 필요해 띠가 되살아난다)
+   R1′ 구도 · earth.nullschool.net — 캔버스 1440×900, h1 "earth" 18px 좌하단,
+       배경 #000005, radius 0 455 : 312.
+       → 가져온 것: 표제는 도구 옆에 작게(18~22px)
+   R1 푸터 · luminary.ai / flexcompute.com / simscale.com (텍스트 페처) — 셋 다 5열 색인 푸터
+       (Platform·Resources·Industries·Company·Developers 등). → 다열 색인 형태의 근거
+   R2 톤 · 제품 실물 렌더(assets/sph-*.webp) — 어두운 바탕 위 시안→초록 입자.
+       캔버스 화면만 어둡게 두는 이유다. 온도 램프는 실물 렌더의 색 언어를 따른다.
 
-   R2 톤 · teenage.engineering / EP-133 (전자악기 — 다른 업종)
-       배경 #F9FAF9 · te-20 + TechnoType 2패밀리
-       radius 0px 2492회 지배 · 강조색 #FF5000 이 단 10회
-       밝은 페이지 안에 다크 블록 #0F0E12 가 18회 · 컨테이너 1308 ↔ 1440 전폭
-       최대 52.9px ÷ 본문 13.2px = 4.0배
-       → 가져온 원리: 밝은 바탕 안에 어두운 밴드를 리듬으로 둔다. 강조색은 극히 아껴 쓴다
-       → 안 가져온 것: h1 부재, 오렌지 색상 자체
-
-   R1 보조 · simscale.com (CFD SaaS)
-       배경 #F7F7F7 · Geist 1패밀리 · h1 49.78px/400 · 본문 15.38px (3.24배)
-       radius 0px 2558회 + pill 114회 · 컨테이너 1192 본문 ↔ 1425 전폭 교대
-       → 라이트 배경 CFD 사이트의 반례로 기록. 별점 리뷰 배너는 가져오지 않는다
-
-   ── dark-instrument 프리셋을 쓰지 않은 이유
-   이 저장소에 이미 dark-instrument 가 둘(Pulsegate 코발트, Synapse BCI 골드) 있다.
-   셋째를 같은 프리셋으로 만들면 그것은 이 브리프의 결정이 아니라 카테고리 평균이다.
-   RFS 는 파티클이 어두운 배경에서만 읽히지만(제품 실제 렌더 확인), 사양·도입 절차는
-   밝은 종이에서 읽는 것이 낫다. 그래서 한 페이지를 두 체제로 나눈다 — 그것이 감수한 리스크다.
-
-   ── 강조색의 출처
-   제품 실물의 에디터 테마는 --theme-accent: #3b82f6 (Tailwind blue-500) 이다.
-   그대로 쓰면 '색을 고르지 않았다'는 신호를 그대로 수입하게 되므로, 채도를 낮추고
-   청록 쪽으로 틀어 계기 청색으로 옮겼다. 출발점은 제품의 실제 색이 맞다.
+   ── 강조색 246° (유지)
+   246° 는 tools/similarity.mjs 가 재는 LCh hue 다 — 이전 판의 계기 청색 #2a6b8a 가 바로 246° 다.
+   plan.md 의 "246° 청(유지)" 대로 값을 그대로 쓴다(출발점은 제품 에디터 테마 #3b82f6 에서
+   채도를 낮추고 청록 쪽으로 튼 것). 흰 글자 5.88:1, 바탕 #f3f6f8 위 글자로 5.42:1.
    ========================================================================== */
 
 :root {
-  /* ── 타이포그래피 스케일 — 5단계 + 스케일 밖 디스플레이 1개 ── */
+  /* ── 타이포그래피 — 5단계. 표제가 작으므로 디스플레이 단계가 없다 ── */
   --step--1: 0.8125rem; /* 13px — 라벨·캡션·표 머리 */
   --step-0: 1rem; /* 16px — 본문 (한글 하한) */
-  --step-1: 1.1875rem; /* 19px — 리드 문장 */
-  --step-2: clamp(1.375rem, 1.15rem + 1.1vw, 1.9375rem); /* 22 → 31px — 섹션 헤딩 */
-  --step-3: clamp(1.875rem, 1.4rem + 2.4vw, 3rem); /* 30 → 48px — 큰 헤딩 */
-  --display: clamp(2.5rem, 1.6rem + 4.4vw, 4.5rem); /* 40 → 72px — 히어로 전용 */
-  /* 최대 ÷ 본문 = 72 ÷ 16 = 4.5배. R1(luminary) 과 같은 비율이다 */
+  --step-1: 1.1875rem; /* 19px — 리드·h3 */
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 22 → 28px — h1(작게)·h2 */
+  --step-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); /* 28 → 40px — 큰 수치 하나 */
+  /* 최대 ÷ 본문 = 40 ÷ 16 = 2.5배. 표제가 아니라 캔버스가 크기를 맡는다 */
 
-  --leading-tight: 1.18;
-  --leading-normal: 1.7; /* 한글 본문 하한 1.6 */
+  --leading-tight: 1.3; /* 한글 제목 1.2~1.35 */
+  --leading-normal: 1.7;
   --leading-loose: 1.85;
-  --measure: 34em; /* 한글 한 줄 25~40자 */
+  --measure: 36em;
 
-  /* 라틴을 폴백 앞에 두면 라틴까지 한글 폰트로 그려진다 — Pretendard 는 둘 다 좋다 */
-  --font-body: Pretendard, "Pretendard Variable", -apple-system, system-ui, sans-serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+  /* 표제·본문 모두 Spoqa Han Sans Neo(OFL, jsdelivr spoqa/spoqa-han-sans). 모노 없음 —
+     한글이 섞이는 라벨을 모노에 두면 글자가 흩어진다. 숫자는 tabular-nums 로 정렬한다 */
+  --font-body: "Spoqa Han Sans Neo", -apple-system, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
+  --weight-strong: 700;
 
-  /* ── 색 · 사양서(라이트) 체제 ── */
-  --surface: #f4f5f3;
-  --surface-2: #eaece8;
-  --surface-3: #dfe2dd;
-  --line: #d3d7d1;
-  --line-strong: #b6bcb5;
-  --ink: #14171a;
-  --ink-muted: #545c63; /* 6.23:1 */
-  --ink-faint: #626a70; /* 5.10:1 — 13px 캡션도 AA 를 지켜야 하므로 처음 값(#7C858C·3.43:1)에서 내렸다 */
-  --accent: #2a6b8a; /* 밝은 바탕 위 5.33:1 */
+  /* ── 색 · 밝음·쿨 한 체제 ── */
+  --surface: #f3f6f8;
+  --surface-2: #e8edf1;
+  --surface-3: #dde4e9;
+  --panel: #ffffff;
+  --line: #cfd8df;
+  --line-strong: #a9b6c0;
+  --ink: #121a21;
+  --ink-muted: #4a5a67; /* 바탕 6.56:1 · 패널 7.12:1 */
+  --ink-faint: #55656f; /* 바탕 5.56:1 · surface-2 5.12:1 — 13px 캡션도 AA */
+  --accent: #2a6b8a; /* LCh 246° · 흰 글자 5.88:1 · 바탕 #f3f6f8 위 5.42:1 · 푸터 면 #e8edf1 위 4.99:1 */
   --accent-hover: #1f5069;
   --accent-ink: #ffffff;
   --accent-wash: #e3ecf1;
 
-  /* ── 색 · 암실(다크) 체제 — 위 값들의 규칙적 반전 ── */
-  --dark-surface: #0e1114;
-  --dark-surface-2: #14181c;
-  --dark-surface-3: #1b2126;
-  --dark-line: #262c31;
-  --dark-line-strong: #3a434a;
-  --dark-ink: #e8ecef;
-  --dark-ink-muted: #98a3ab; /* 7.35:1 */
-  --dark-ink-faint: #7b858c; /* 5.03:1 — 처음 값(#6D777E)은 4.14:1 로 미달이었다 */
-  --dark-accent: #3e8fb0; /* 어두운 바탕 위 5.20:1 */
-  --dark-accent-hover: #5aa6c4;
-  --dark-accent-ink: #071016;
-  --dark-accent-wash: #16303c;
+  /* ── 캔버스 화면 — 페이지에서 유일한 어두운 면. 띠가 아니라 부품이다 ── */
+  --screen: #0e1114;
+  --screen-2: #1b2126;
+  --screen-line: #2c343a;
+  --screen-ink: #e8ecef; /* 15.94:1 */
+  --screen-ink-muted: #98a3ab; /* 7.36:1 */
+  --screen-accent: #3e8fb0; /* 어두운 화면 위 장비 표식 선 · 5.20:1 */
 
-  /* ── 온도 컬러맵 — 캔버스 안에서만 쓰는 데이터 인코딩이다.
-     UI 강조색이 아니므로 강조색 카운트(하드 게이트 2)에서 제외한다.
-     제품 실물의 파티클 렌더가 저온 시안 → 고온 그린이라 그 언어를 따랐다 ── */
+  /* ── 온도 컬러맵 — 캔버스 안에서만 쓰는 데이터 인코딩. UI 강조색이 아니다 ── */
   --temp-cold: #2f7d9e;
   --temp-mid: #39a894;
   --temp-warm: #8cc152;
   --temp-hot: #d7d64a;
 
-  /* ── 형태 — R1·R2 둘 다 radius 0 이 지배한다. 어휘 1종으로 못박는다 ── */
+  /* ── 형태 — radius 0 한 값 (plan.md 배정 · R1′ 둘 다 0 이 지배) ── */
   --radius: 0;
 
-  /* ── 간격 — 저장소 SSOT 표준 ── */
+  /* ── 간격 ── */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 1rem;
@@ -108,15 +86,15 @@
   --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, 7rem);
 
-  --container: 1120px;
-  --container-wide: 1360px;
-  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+  --container: 1200px;
+  --container-wide: 1440px;
+  --pad-inline: clamp(1rem, 0.5rem + 2.5vw, 3rem);
+  --panel-width: 22rem;
 
-  /* ── 모션 ── */
+  /* ── 모션 — 상태 전환만. 등장 모션 없음 ── */
   --dur-quick: 160ms;
-  --dur-normal: 420ms;
   --dur-slow: 900ms;
   --ease: cubic-bezier(0.2, 0, 0, 1);
 }