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/design.md

@@ -1,31 +1,98 @@
-# RFS CFD — 2026-09-12 화면 보정 기록
+# design.md — RFS 실시간 유체 시뮬레이터 (2026-10-06 재작업)
 
-## 구도·타입·색 관찰
+## 진행 상태
 
-- 기준 1440px 화면에서 620px 가까운 캔버스가 제목과 운전 제어보다 먼저 높이를 차지해, 사용자가 바꿀 수 있는 조건이 첫 화면 아래로 밀렸다.
-- 제목·설명은 운전 제어의 맥락이어야 하며, 캔버스와 같은 세로 우선순위를 가져서는 안 된다.
-- 기존 어두운 계기판, 청록·녹색 신호, 모노 수치와 낮은 대비의 장비 윤곽은 RFS 정체성으로 유지한다.
+- 0단계 현행 감사 완료(8,222px·띠 교대 8개·고지 푸터 724px·Pretendard+IBM Plex Mono가 saebyeok과 0.887 수렴)
+- 1단계 레퍼런스 실측 완료(windy.com·earth.nullschool.net 브라우저 실측, luminary·flexcompute·simscale 푸터 텍스트 페처)
+- 2단계 방향 카드 3장 → A "계기판" 선택(사용자 위임)
+- 3단계 토큰 `styles/tokens.css` 재정의 완료
+- 4단계 구현 완료(레이아웃 → 재질 없음 → 모션은 캔버스뿐)
+- 5단계 검증 완료(html-validate·stylelint·no-hanja·showcase-audit 6/6·design-gate 13/0/0·recent-showcases-e2e rfs 전부 통과·루브릭 17/20)
+- 6단계 이 문서
 
-## 근거 확인 범위
+## 브리프
 
-- `outputs/full-showcase-upgrade-20260912/screenshots/rfs-cfd/1440x1000-first.png`
-- `index.html`, `styles/main.css`, `scripts/thermal-field.js`의 캔버스·슬라이더·감소 모션·화면 밖 정지 계약
-- 현재 제품 수치의 외부 근거는 이번 범위에서 확정하지 않는다.
+- 데이터센터 열관리용 실시간 GPU 유체 시뮬레이터 RFS(Twentyoz)의 소개 페이지. 방문자는 설비·운영 담당자다.
+- 목표 행동: 도입 문의(mailto). 그 전에 "설비를 건드리면 기류가 바로 바뀐다"를 첫 화면에서 직접 확인하게 한다.
+- 확정 슬롯(plan.md 배정): 데이터·도구가 주인 히어로(캔버스·제어가 먼저, 표제 작게) · 상단 바 · 다열 색인 푸터 · Spoqa Han Sans Neo 표제·본문 · 밝음·쿨 #f3f6f8, 띠 교대 제거 · 246° 청 유지 · radius 0 · 캔버스 유지, 등장 모션 없음 · 재질 없음.
+- 화면: `index.html` 한 장. 2차 페이지 없음.
+- 유지한 사실·자산: 상호·연락처(hello@twentyoz.kr, 070-4353-1190), 버전 0.13.0, 솔버 사양 8항목+SoA, 장비 5종, 에디터 기능 6항목·단축키, 시각화 4종, 5계층, 요구사항 표, 실물 렌더 2장(`assets/sph-topview.webp`, `assets/sph-sideview.webp`), 2D 데모 스크립트 `scripts/thermal-field.js`.
 
-## 결정 / 기각 조건
+## 미확정
 
-- 데스크톱은 좌측 설명·운전 장면·슬라이더·읽기 결과와 우측 420–480px 시뮬레이션을 한 계기면으로 배치한다.
-- 캔버스 바깥의 DOM 제어, 2D 축소 표현 라벨, 실시간 모델, fallback, 감소 모션과 화면 밖 정지는 유지한다.
-- 브라우저 데모를 100,000 파티클·60FPS 제품 성능으로 읽히게 하는 메타 카피는 기각한다. 공개 근거를 확인하지 못한 본문 성능 수치는 제거하고, 기능 설명으로 바꾼다.
+- 성능·정확도 수치 없음(이전 판에서 공개 근거 없는 값을 이미 제거했다). 푸터 고지 한 줄이 그 사실을 적는다.
+- og:image는 첫 화면 캡처(`og.png`, 1440×900)다. 1200×630 전용 이미지가 아니다.
+- `src/assets/shots/work-rfs-cfd*.png`(사이트 카드 썸네일)는 옛 어두운 판이다 — `node tools/capture-new-shots.mjs --slug rfs-cfd`로 다시 찍어야 한다(이 작업의 소유 범위 밖).
 
-## 토큰·규칙
+## 레퍼런스
 
-- 기존 `--dark-*`, `--band-*`, `--space-*`, `--font-mono`만 사용한다.
-- 제목은 데스크톱 `clamp(2.45rem, 3.6vw, 4.25rem)`, 조작 설명은 본문 단계로 낮춘다.
-- 캔버스는 데스크톱 `clamp(26.25rem, 31vw, 30rem)`으로 제한한다.
+| 슬롯 | 출처 | 실측(2026-10-06) | 가져온 원리 |
+|---|---|---|---|
+| R1′ 구도 | https://www.windy.com/ (playwright 1440×900) | 지도 캔버스가 1440×900 전부, h1 없음. 제어는 가장자리 패널(좌상 390px 검색·예보, 우측 레이어 버튼 세로 열, 하단 시간축 띠, 범례 kt 0~60). radius 0 384:83 | 제어를 캔버스 옆 세로 열(패널)에, 범례·캡션을 캔버스 아래 띠에 둔다 |
+| R1′ 구도 | https://earth.nullschool.net/ (playwright) | 캔버스 1440×900, h1 "earth" 18px 좌하단, 배경 #000005, radius 0 455:312 | 표제는 도구 옆에 작게 |
+| R1 푸터 | https://luminary.ai/ · https://www.flexcompute.com/ · https://www.simscale.com/ (텍스트 페처) | 셋 다 5열 색인 푸터(Platform/Resources/Industries/Company/Developers 등) | 다열 색인 푸터: 기술 차례·제품 사실·문의 3열 + 브랜드 |
+| R2 톤 | 제품 실물 렌더 `assets/sph-*.webp` | 어두운 바탕 위 시안→초록 입자 | 어두운 면은 캔버스 화면 하나뿐. 온도 램프는 실물 색 언어 |
+| 미검증 | ciechanow.ski(DNS 실패), simscale·luminary 첫 화면에 제품 UI 없음 | — | 캔버스 옆 제어 패널의 CFD 업계 실측 사례는 없음 — windy/nullschool(기상 시각화)로 대체 |
 
-## 2026-09-12 현재 검증 기록
+## 방향
 
-- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
-- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+지문: 히어로 데이터·도구(캔버스 좌 + 제어 패널 우, 표제 28px) · Spoqa Han Sans Neo 700 / Spoqa Han Sans Neo 400 · 바탕 밝음·쿨 #f3f6f8(어두운 면은 캔버스 하나) · 강조 LCh 246° #2a6b8a · radius 0 · 흐름 "계기판 → 기존 CFD 대비 → 솔버 사양 원장+5계층 → 장비 5종+에디터 → 시각화(실물 렌더 탭) → 요구사항+문의 → 다열 색인 푸터" · 상단 바(고정 아님, 흐림 없음, 브랜드+앵커 4+문의) · 푸터 다열 색인(브랜드·기술·제품·문의 + 고지 한 줄) · 이미지 실물 렌더 원본 비율 contain, 캡션 아래 · 모션 캔버스 시뮬레이션만, 등장 모션 없음
+
+한 문장 컨셉: 데이터센터 설비 담당자가 랙 부하와 급기량을 직접 움직여 기류가 바로 다시 계산되는 것을 첫 화면에서 확인하고, 사양·요구사항을 읽은 뒤 도입 문의를 보낸다.
+
+프리셋: 새로 정의 "instrument-light"(밝은 계기판). dark-instrument를 쓰지 않은 이유는 배정(밝음·쿨)과, 저장소에 어두운 계기판이 이미 둘(pulsegate·synapse) 있기 때문이다. 표현 리스크: 어두운 캔버스 한 장이 밝은 페이지 안에 있다 — 띠가 아니라 부품으로 읽히는지 회색조 캡처로 확인했다(첫 시선이 캔버스 → 패널 순).
+
+제시한 카드(사용자 위임, 구조가 다른 3장):
+
+- A **계기판** — 1440: 왼쪽 표제(작게)+리드+캔버스 808px, 오른쪽 흰 제어 패널 352px(장면 3·슬라이더 2·판독). 포기: 캔버스 전폭, 390에서 판독이 첫 화면 밖.
+- B **콘솔 전폭** — windy처럼 캔버스를 전폭으로 깔고 제어를 오버레이, h1 좌하단. 포기: 캔버스 위 글자에 어두운 스크림이 필요해 배정(띠 교대 제거)과 충돌, 390에서 오버레이가 캔버스를 가린다.
+- C **판독표가 먼저** — 세 장면(기준·과부하·급기저하)을 3열 수치표로 비교하고 캔버스는 작은 썸네일. 포기: 캔버스를 만지는 경험이 2차가 되고, E2E가 단언하는 장면 버튼·슬라이더 구조를 표 셀로 바꿔야 한다.
+
+고른 카드: A. 이유 — 배정값("제어 패널이 캔버스 옆에 있는 계기판")과 R1′ windy의 "캔버스 + 가장자리 제어 열" 구성이 A와 같고, `tools/recent-showcases-e2e.mjs`가 단언하는 `.scenario-btn`·`#ctlLoad`·`#fieldState` 구조를 그대로 쓸 수 있다. saebyeok(같은 히어로 패밀리)은 시세표 꼴이므로 rfs는 캔버스+패널 꼴로 갈린다.
+
+반사실: 첫 화면 고유 요소 — 살아 있는 2D 열유동 캔버스(FWU·서버랙 형상, 온도 램프), 운전 장면 3종(기준 운전·랙 과부하·급기 저하)과 판독 문장, "2D 축소 표현" 진실 라벨. 같은 업종 치환(다른 CFD 벤더)에서는 실시간 캔버스와 장면 프리셋이 성립하지 않는다(그들은 배치 계산). 다른 업종(세무사무소)에서는 캔버스·슬라이더·판독이 무의미 → 구조를 바꿔야 함 → 통과.
+
+수렴(plan 값·saebyeok 기준): 히어로 패밀리 같음 / 글 묶음 다름(작은 표제+한 문장 리드+행동 없음 vs 시세표) / 내비 다름(상단 바 vs 탭) / 푸터 다름(다열 색인 vs 연락처 카드) / 이미지 다름(렌더 contain vs 흘림) / 모션 다름(캔버스 vs 카운터) → 1/6. 토큰 4축: 서체·배경 명도(둘 다 밝음)·강조·radius 중 배경 명도 1개만 같음.
+
+보존 자산: 실물 렌더 2장, 데모 스크립트(프리셋·판독·감소 모션·화면 밖 정지 계약), 파비콘 유동 곡선.
+
+## 토큰과 예산
+
+값은 `styles/tokens.css` 한 곳. 역할: 표제·본문 Spoqa Han Sans Neo(400·700만 @font-face, jsdelivr `spoqa/spoqa-han-sans@3.3.0` 한글 서브셋, OFL 1.1, `font-display: swap`). 모노 없음 — 숫자는 `.num`(tabular-nums). 바탕 #f3f6f8 / 패널 #fff / 푸터 면 #e8edf1 / 글자 #121a21 / 보조 #4a5a67(6.56:1) / 희미 #55656f(5.56:1) / 강조 #2a6b8a(LCh 246°, 흰 글자 5.88:1, 바탕 위 5.42:1, 푸터 면 위 4.99:1). 캔버스 화면 #0e1114 위 글자 #98a3ab 7.36:1, 표식 선 #3e8fb0 5.20:1. radius 0 한 값. 간격 8단계, 섹션 간격 `--space-8` clamp(64, 112px).
+
+예산(tokens §5 데모 기준): JS 150KB → 실측 `thermal-field.js` 28KB(비압축). 폰트 200KB → **초과 364KB**(Regular 180.6KB + Bold 183.7KB, jsdelivr 한글 서브셋이 2,350자 단일 파일이라 더 못 줄인다. 배정 서체라 유지, `swap`이라 LCP를 막지 않는다). 첫 화면 같은 출처 전송 ≤2MB → E2E 통과. LCP ≤3.5s(로컬) → E2E 통과. CLS ≤0.1 → E2E 통과. LCP 후보는 히어로 폴백 이미지(`fetchpriority="high"`, lazy 아님).
+
+## 이펙트와 폴백
+
+- 캔버스: WebGL2 Stable Fluids + 파티클(`thermal-field.js`, 변경 없음). `data-field-state` loading → live. 화면 밖·탭 숨김이면 정지.
+- 폴백: WebGL 없음·감소 모션 → `static`, 실물 측면 렌더가 남는다. live가 아닐 때(loading·static·JS 없음)는 2D 데모의 장비 형상·표식·격자를 숨긴다 — 실물 렌더 위에 데모 좌표를 겹치면 라벨이 거짓말이 된다(이번에 추가).
+- 재질 없음. 등장 모션 없음. 전환은 색·테두리 160ms만.
+
+## 하지 않기로 한 것
+
+- 어두운 띠 교대와 `.band-*` 토큰 재정의 규칙 — 배정대로 제거. 어두운 면은 캔버스 화면과 실물 렌더 프레임뿐.
+- sticky 헤더·backdrop-filter — 페이지가 다섯 화면 남짓이라 늘 보일 이유가 없다(layout §2-c).
+- IBM Plex Mono — 한글 섞인 라벨이 흩어지던 원인. 숫자는 tabular-nums.
+- eyebrow("유체 엔진", "시각화")·"수치 판" 4칸(GPU 커널/연산 모델/SoA/Edit·Play) — SoA는 사양 원장 행으로, Edit·Play는 에디터 설명 문장으로 옮겼다.
+- 가운뎃점 메타 문자열 — 제목·표·푸터·판독(JS 문자열 "랙 배면 · 천장 배기" → "랙 배면과 천장 배기") 전부 쉼표·조사로.
+- 헤더의 "v0.13.0" 모노 표기 — 푸터 제품 열로.
+- 새 이미지 생성 — 하지 않았다.
+
+## 검증
+
+검증 줄: html-validate 0 오류 · stylelint 0 오류 · no-hanja PASS 4 files · showcase-audit PASS 6/FAIL 0(320~2560) · design-gate 충족 13/미검증 0/실패 0(꺼짐 3: static·visual·webkit) · recent-showcases-e2e rfs 블록 전부 통과(responsive 320/390/768/1440, controls 8/8, visual output 2/2, keyboard 2/2, reduced motion 2/2, axe 0 위반, performance 3/3, no-JS 2/2; 실패 1건은 saebyeok season) · similarity 21종 PASS(rfs-cfd는 상위 15쌍에 없음).
+
+시각 루브릭(캡처를 열어 채점, 약한 축부터): R5 여백 1(섹션 간격 전부 `--space-8`로 같다, 극단은 캔버스 486px vs 표제 28px) · R6 이미지 1(실물 렌더 2장에 역할 있음. 측면 렌더가 히어로 폴백과 시각화 측면 탭에 두 번 쓰인다 — live 상태에서는 한 번만 보인다) · R9 마감 1(200% 확대 캡처 미작성) · R1 2(3초 문장 "RFS, 데이터센터 기류를 실시간으로 계산하는 GPU 시뮬레이터, 부하·급기를 움직이면 바로 바뀐다"가 컨셉과 일치, 1440·390 모두) · R2 2(회색조·흐림: 캔버스 → 흰 패널 → 표제, 의도와 같음) · R3 2(1440 시작선 120·968/993 두 묶음) · R4 2(모노·이탤릭 없음, 마지막 줄 어절 ≥2, measure 36em) · R7 2(합니다체 하나, 섹션 제목에 5종·Windows 10·VRAM 6GB 사실) · R8 2(고유 요소 3, 수렴 1/6) · R10 2(390 첫 화면에 브랜드·표제·캔버스·내비, 장면 버튼 y=743). 합계 17/20.
+
+미검증: WebKit 렌더, 실기기 터치, 200% 확대 캡처, 폰트 전송량의 실제 네트워크 실측(Content-Length로 계산).
+
+## 피드백 기록 · 보존 목록
+
+- 보존: 캔버스 조작 계약(프리셋 → 슬라이더 동기화 → 판독), "2D 축소 표현" 진실 라벨, 실물 렌더 탭(상면/측면), 요구사항 표, 합니다체 카피.
+
+## 변경 기록
+
+- 2026-08-24 · 초판 "암실과 사양서"(어두운 띠 4 + 밝은 띠 4, Pretendard + IBM Plex Mono, luminary·teenage.engineering 레퍼런스).
+- 2026-09-12 · 데스크톱 히어로를 좌 설명·우 캔버스 한 계기면으로 보정, 성능 메타 카피 삭제.
+- 2026-10-02 · 카피를 합니다체로 통일, 말장난 제목 제거, 레드팀 06(h1 여백 0, 캔버스 잘림, 모노 한글 라벨) 수정.
+- 2026-10-06 · 재작업: 띠 교대 제거·밝음 쿨 한 체제, 계기판 히어로(캔버스+제어 패널, 표제 28px), 섹션 8 → 6(솔버+5계층, 장비+에디터 합침), 다열 색인 푸터(724 → 441px), Spoqa Han Sans Neo, 모노 제거, 가운뎃점 제거, 페이지 8,222 → 6,381px. 강조 hue 246°(LCh)·radius 0·캔버스 유지.

apps/site/public/work/rfs-cfd/index.html

@@ -3,35 +3,27 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <title>RFS — 실시간 유체 시뮬레이터 · 데이터센터 열관리 GPU 엔진</title>
+    <title>RFS 실시간 유체 시뮬레이터 — 데이터센터 열관리 GPU 엔진</title>
     <meta
       name="description"
-      content="데이터센터 열관리 RFS의 운전 조건을 살펴보는 2D 축소 표현입니다. 이 페이지의 조작은 제품 성능 수치가 아니라 부하와 급기 변화의 관계를 보여 줍니다."
+      content="데이터센터 열관리용 실시간 GPU 유체 시뮬레이터 RFS. 랙 부하와 급기량을 바꾸면 메시를 다시 만들지 않고 같은 화면에서 기류 변화를 확인합니다. 첫 화면의 조작 화면은 2D 축소 표현입니다."
     />
-    <meta property="og:title" content="RFS — 실시간 유체 시뮬레이터" />
+    <meta property="og:title" content="RFS 실시간 유체 시뮬레이터" />
     <meta
       property="og:description"
-      content="설비를 옮기면 유동이 그 자리에서 바뀐다. 데이터센터 열관리를 위한 실시간 GPU 유체 시뮬레이션 엔진."
+      content="랙 부하와 급기량을 바꾸면 기류 변화를 바로 확인할 수 있는 데이터센터 열관리용 실시간 GPU 유체 시뮬레이션 엔진."
     />
     <meta property="og:type" content="website" />
-    <meta name="theme-color" content="#0e1114" />
+    <meta property="og:image" content="https://designpaca.chanpaca.net/work/rfs-cfd/og.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="theme-color" content="#f3f6f8" />
 
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
-    />
-    <link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
-    <link rel="stylesheet" href="./styles/main.css?v=20260912all" />
+    <link rel="stylesheet" href="./styles/tokens.css?v=20261006" />
+    <link rel="stylesheet" href="./styles/main.css?v=20261006" />
     <link
       rel="icon"
-      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230E1114'/%3E%3Cpath d='M4 21c4-6 8 4 12-2s8 3 12-3' stroke='%233E8FB0' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4 27c4-6 8 4 12-2s8 3 12-3' stroke='%238CC152' stroke-width='2.4' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F3F6F8'/%3E%3Cpath d='M4 21c4-6 8 4 12-2s8 3 12-3' stroke='%232A6B8A' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4 27c4-6 8 4 12-2s8 3 12-3' stroke='%2339A894' stroke-width='2.4' fill='none' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E"
     />
   </head>
 
@@ -54,162 +46,167 @@
           <a href="#solver">솔버</a>
           <a href="#equipment">장비</a>
           <a href="#visualization">시각화</a>
-          <a href="#adopt">도입</a>
+          <a href="#adopt">요구사항</a>
+          <a class="nav-cta" href="mailto:hello@twentyoz.kr?subject=RFS%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">도입 문의</a>
         </nav>
-
-        <p class="head-meta mono">v0.13.0</p>
       </div>
     </header>
 
     <main id="main">
       <!-- ══════════════════════════════════════════════════════════
-           1 · 히어로 — 암실. 실제로 도는 열유동이 첫 화면을 덮는다
+           1 · 계기판 — 캔버스와 제어 패널이 첫 화면의 주인. 표제는 작다
            ══════════════════════════════════════════════════════════ -->
-      <section class="band band-dark hero" id="top" aria-labelledby="heroHeading">
-        <div class="hero-stage" data-field-shell data-field-state="loading">
-          <canvas id="thermalField" aria-hidden="true"></canvas>
-
-          <!-- WebGL 이 없거나 모션을 줄이는 설정이면 이 렌더가 남는다.
-               폴백이 아니라 결과물이다 — RFS 실물의 파티클 뷰다 -->
-          <img
-            class="hero-fallback"
-            src="./assets/sph-sideview.webp"
-            width="691"
-            height="437"
-            alt="RFS 실물 파티클 뷰 — 서버랙을 통과한 공기가 데워져 위로 오르는 측면 단면"
-          />
-
-          <div class="hero-grid" aria-hidden="true"></div>
-
-          <!-- 장비 형상. 셰이더가 쓰는 좌표와 같은 값을 CSS 변수로 넘긴다 —
-               그림과 라벨이 어긋나면 라벨이 거짓말이 된다 -->
-          <div class="stage-solid stage-rack" aria-hidden="true"></div>
-          <div class="stage-solid stage-fwu" aria-hidden="true"></div>
-
-          <div class="hero-scrim" aria-hidden="true"></div>
-
-          <div class="stage-tag stage-tag-fwu" aria-hidden="true"><span>FWU 급기</span></div>
-          <div class="stage-tag stage-tag-rack" aria-hidden="true"><span>서버랙</span></div>
-        </div>
-
-        <div class="wrap hero-copy">
-          <h1 id="heroHeading">
-            메시를 다시 만들지 않는다
-          </h1>
-          <p class="hero-lead">
-            설비를 옮기면 유동이 그 자리에서 바뀐다. 데이터센터 열관리를 위한 실시간 GPU 유체
-            시뮬레이터.
-          </p>
-
-          <div class="scenario-strip" role="group" aria-label="열유동 조작 장면">
-            <p class="scenario-label">운전 장면</p>
-            <button
-              class="scenario-btn"
-              type="button"
-              data-field-preset="baseline"
-              data-load="70"
-              data-supply="65"
-              aria-pressed="true"
-            >
-              기준 운전
-            </button>
-            <button
-              class="scenario-btn"
-              type="button"
-              data-field-preset="overload"
-              data-load="95"
-              data-supply="50"
-              aria-pressed="false"
-            >
-              랙 과부하
-            </button>
-            <button
-              class="scenario-btn"
-              type="button"
-              data-field-preset="supply-loss"
-              data-load="65"
-              data-supply="25"
-              aria-pressed="false"
-            >
-              급기 저하
-            </button>
+      <section class="hero" id="top" aria-labelledby="heroHeading">
+        <div class="wrap hero-grid">
+          <div class="hero-copy">
+            <h1 id="heroHeading">데이터센터 기류를 실시간으로 계산하는 GPU 유체 시뮬레이터</h1>
+            <p class="hero-lead">
+              서버랙 부하와 항온항습기 급기량을 움직여 보세요. 메시를 다시 만들지 않고 같은 화면에서 기류가
+              바뀝니다.
+            </p>
           </div>
 
-          <div class="hero-controls">
-            <div class="ctl">
-              <div class="ctl-head">
-                <label for="ctlLoad">서버랙 부하</label>
-                <output class="mono" id="outLoad" for="ctlLoad">70%</output>
-              </div>
-              <input type="range" id="ctlLoad" min="0" max="100" step="5" value="70" />
+          <div class="hero-screen">
+            <div class="hero-stage" data-field-shell data-field-state="loading">
+              <canvas id="thermalField" aria-hidden="true"></canvas>
+
+              <!-- WebGL 이 없거나 모션을 줄이는 설정이면 이 렌더가 남는다 — RFS 실물의 파티클 뷰다 -->
+              <img
+                class="hero-fallback"
+                src="./assets/sph-sideview.webp"
+                width="691"
+                height="437"
+                fetchpriority="high"
+                alt="RFS 실물 파티클 뷰. 서버랙을 통과한 공기가 데워져 위로 오르는 측면 단면"
+              />
+
+              <div class="stage-grid" aria-hidden="true"></div>
+
+              <!-- 장비 형상. 셰이더가 쓰는 좌표와 같은 값이다 — 그림과 라벨이 어긋나면 라벨이 거짓말이 된다 -->
+              <div class="stage-solid stage-rack" aria-hidden="true"></div>
+              <div class="stage-solid stage-fwu" aria-hidden="true"></div>
+
+              <div class="stage-tag stage-tag-fwu" aria-hidden="true"><span>FWU 급기</span></div>
+              <div class="stage-tag stage-tag-rack" aria-hidden="true"><span>서버랙</span></div>
             </div>
-            <div class="ctl">
-              <div class="ctl-head">
-                <label for="ctlSupply">FWU 급기량</label>
-                <output class="mono" id="outSupply" for="ctlSupply">65%</output>
+
+            <div class="stage-foot">
+              <div class="temp-key" role="list" aria-label="파티클 온도 색상 범례">
+                <span role="listitem"><i class="temp-cold" aria-hidden="true"></i>저온</span>
+                <span role="listitem"><i class="temp-mid" aria-hidden="true"></i>중간</span>
+                <span role="listitem"><i class="temp-hot" aria-hidden="true"></i>고온</span>
               </div>
-              <input type="range" id="ctlSupply" min="0" max="100" step="5" value="65" />
             </div>
           </div>
 
-          <div class="field-readout" aria-live="polite" aria-atomic="true">
-            <div class="field-readout-head">
-              <p class="field-readout-label mono">이 화면에서 보는 변화</p>
-              <p class="field-readout-state" id="fieldState">냉기와 발열이 맞서는 기준 상태입니다.</p>
+          <div class="hero-panel">
+            <div class="panel-block scenario-strip" role="group" aria-label="운전 장면">
+              <p class="panel-title">운전 장면</p>
+              <div class="scenario-btns">
+                <button
+                  class="scenario-btn"
+                  type="button"
+                  data-field-preset="baseline"
+                  data-load="70"
+                  data-supply="65"
+                  aria-pressed="true"
+                >
+                  기준 운전
+                </button>
+                <button
+                  class="scenario-btn"
+                  type="button"
+                  data-field-preset="overload"
+                  data-load="95"
+                  data-supply="50"
+                  aria-pressed="false"
+                >
+                  랙 과부하
+                </button>
+                <button
+                  class="scenario-btn"
+                  type="button"
+                  data-field-preset="supply-loss"
+                  data-load="65"
+                  data-supply="25"
+                  aria-pressed="false"
+                >
+                  급기 저하
+                </button>
+              </div>
             </div>
-            <dl class="field-readout-grid">
-              <div>
-                <dt>장면</dt>
-                <dd id="fieldScene">기준 운전</dd>
+
+            <div class="panel-block hero-controls">
+              <div class="ctl">
+                <div class="ctl-head">
+                  <label for="ctlLoad">서버랙 부하</label>
+                  <output class="num" id="outLoad" for="ctlLoad">70%</output>
+                </div>
+                <input type="range" id="ctlLoad" min="0" max="100" step="5" value="70" />
               </div>
-              <div>
-                <dt>먼저 볼 곳</dt>
-                <dd id="fieldWatch">랙 배면</dd>
+              <div class="ctl">
+                <div class="ctl-head">
+                  <label for="ctlSupply">FWU 급기량</label>
+                  <output class="num" id="outSupply" for="ctlSupply">65%</output>
+                </div>
+                <input type="range" id="ctlSupply" min="0" max="100" step="5" value="65" />
               </div>
-              <div>
-                <dt>다음 조작</dt>
-                <dd id="fieldAction">부하와 급기를 따로 움직여 비교</dd>
-              </div>
-            </dl>
+            </div>
+
+            <div class="panel-block field-readout" aria-live="polite" aria-atomic="true">
+              <p class="panel-title">판독</p>
+              <p class="field-readout-state" id="fieldState">냉기와 발열이 균형을 이룬 기준 상태입니다.</p>
+              <dl class="field-readout-grid">
+                <div>
+                  <dt>장면</dt>
+                  <dd id="fieldScene">기준 운전</dd>
+                </div>
+                <div>
+                  <dt>먼저 볼 곳</dt>
+                  <dd id="fieldWatch">랙 배면</dd>
+                </div>
+                <div>
+                  <dt>다음 조작</dt>
+                  <dd id="fieldAction">부하와 급기를 따로 움직여 비교</dd>
+                </div>
+              </dl>
+            </div>
           </div>
 
           <p class="hero-note">
-            이 페이지의 조작 화면은 <strong>2D 축소 표현</strong>입니다. 슬라이더를 움직이거나 화면을
-            문지르면 유동 변화가 바로 보입니다. RFS 본 제품의 Unity 6.4 기반 3D δ-SPH 사양은 이 데모와
-            별도로 확인해야 합니다.
+            이 조작 화면은 <strong>2D 축소 표현</strong>입니다. 화면을 문지르면 유동이 흔들립니다. RFS 본 제품의
+            Unity 6.4 기반 3D δ-SPH 사양은 아래에서 따로 확인하세요.
           </p>
         </div>
       </section>
 
       <!-- ══════════════════════════════════════════════════════════
-           2 · 문제 — 왜 기존 CFD 로는 안 되는가
+           2 · 문제 — 기존 CFD 와의 차이
            ══════════════════════════════════════════════════════════ -->
-      <section class="band band-light section-problem" id="problem" aria-labelledby="problemHeading">
+      <section class="section section-problem" id="problem" aria-labelledby="problemHeading">
         <div class="wrap split">
           <div class="split-lead">
-            <h2 id="problemHeading">
-              해가 나올 즈음에는<br />이미 다른 결정을 내린 뒤다
-            </h2>
+            <h2 id="problemHeading">기존 CFD는 결과가 나오기까지 몇 시간씩 걸립니다</h2>
           </div>
           <div class="split-body">
             <p>
-              범용 CFD 도구는 시뮬레이션 한 건에 수 시간에서 수 일이 걸린다. 랙 한 대를 옮길 때마다
-              메시를 다시 만들고 처음부터 다시 풀어야 하므로, 운영 중에 답을 얻는 용도로는 쓰이지
-              않는다. 그래서 현장의 배치 변경은 대개 계산이 아니라 경험으로 결정된다.
+              범용 CFD 도구는 시뮬레이션 한 건에 수 시간에서 수 일이 걸립니다. 랙 한 대를 옮길 때마다 메시를
+              다시 만들고 처음부터 다시 계산해야 해서, 운영 중에 바로 결과를 확인하는 용도로는 쓰기
+              어렵습니다. 그래서 현장에서는 배치 변경을 대개 계산보다 경험으로 결정합니다.
             </p>
             <p>
-              RFS 는 정확도의 상한을 낮추는 대신 <strong>회신 시간</strong>을 바꾼 도구다.
-              발열량을 올리고, 급기 밸브를 조이고, 랙을 한 칸 옮기는 조작이 같은 화면 안에서
-              유동에 반영된다. 검증할 것이 "결과 파일"이 아니라 "지금 보고 있는 장면"이 된다.
+              RFS는 정확도 상한을 일부 낮추는 대신 <strong>계산 시간</strong>을 줄인 도구입니다. 발열량을
+              올리거나 급기 밸브를 조이거나 랙을 한 칸 옮기면 같은 화면에서 기류 변화가 바로 반영됩니다.
+              결과 파일을 기다리지 않고 화면을 보면서 검토할 수 있습니다.
             </p>
             <dl class="contrast">
               <div>
                 <dt>범용 CFD 도구</dt>
-                <dd>배치를 바꾸면 메시 재생성 → 재계산. 한 건에 수 시간~수 일</dd>
+                <dd>배치를 바꾸면 메시를 다시 만들고 다시 계산합니다. 한 건에 수 시간에서 수 일</dd>
               </div>
               <div>
                 <dt>RFS</dt>
-                <dd>배치·발열·제어 변경이 같은 세션 안에서 유동에 반영된다</dd>
+                <dd>배치, 발열, 제어를 바꾸면 같은 세션에서 바로 반영됩니다</dd>
               </div>
             </dl>
           </div>
@@ -217,169 +214,225 @@
       </section>
 
       <!-- ══════════════════════════════════════════════════════════
-           3 · 솔버 — 암실. 사양을 숨기지 않는다
+           3 · 솔버 — 사양 원장 + 5계층 (이전 판의 솔버·아키텍처 두 띠를 합쳤다)
            ══════════════════════════════════════════════════════════ -->
-      <section class="band band-dark section-solver" id="solver" aria-labelledby="solverHeading">
+      <section class="section section-solver" id="solver" aria-labelledby="solverHeading">
         <div class="wrap">
-          <p class="eyebrow">유체 엔진</p>
-          <h2 id="solverHeading">GPU Compute Shader 위의 δ-SPH</h2>
+          <h2 id="solverHeading">격자를 다시 만들지 않는 GPU δ-SPH 솔버입니다</h2>
           <p class="section-lead">
-            격자를 깔지 않는다. 공기를 입자로 놓고 이웃 입자끼리 밀도·압력·열을 주고받게 한다.
-            벽이 움직여도 격자를 다시 만들 일이 없다 — 실시간이 가능한 이유가 여기에 있다.
+            격자 대신 공기를 입자로 다루고, 이웃 입자끼리 밀도, 압력, 열을 주고받도록 Compute Shader로
+            계산합니다. 벽이나 장비가 움직여도 격자를 다시 만들 필요가 없어 실시간 계산이 가능합니다.
           </p>
 
           <ul class="spec-ledger">
             <li>
               <p class="spec-name">보간 커널</p>
               <p class="spec-value">Wendland C2</p>
-              <p class="spec-note">Poly6·Spiky 혼용을 걷어내고 단일 경로로 통일했다</p>
+              <p class="spec-note">Poly6와 Spiky 혼용을 없애고 단일 커널로 통일했습니다</p>
             </li>
             <li>
               <p class="spec-name">상태방정식</p>
               <p class="spec-value">Tait</p>
-              <p class="spec-note">약압축성 가정. 압력 반복 없이 밀도에서 압력을 직접 얻는다</p>
+              <p class="spec-note">약압축성을 가정해 반복 계산 없이 밀도에서 압력을 바로 구합니다</p>
             </li>
             <li>
               <p class="spec-name">벽면 경계</p>
               <p class="spec-value">Adami Ghost Particle</p>
-              <p class="spec-note">엣지·코너까지 덮는다. 경계에서 입자가 새던 결함을 해소한 방식</p>
+              <p class="spec-note">모서리와 코너까지 처리해 경계에서 입자가 새는 문제를 막습니다</p>
             </li>
             <li>
               <p class="spec-name">시간 적분</p>
               <p class="spec-value">CFL 적응 서브스텝</p>
-              <p class="spec-note">유속이 빨라지면 스텝을 자동으로 잘게 쪼갠다</p>
+              <p class="spec-note">유속이 빨라지면 시간 간격을 자동으로 줄입니다</p>
             </li>
             <li>
               <p class="spec-name">배속</p>
-              <p class="spec-value">0.1× — 10×</p>
-              <p class="spec-note">배속을 바꿔도 같은 물리 결과가 나오도록 시간 불변을 보장한다</p>
+              <p class="spec-value num">0.1배에서 10배</p>
+              <p class="spec-note">배속을 바꿔도 같은 물리 결과가 나오도록 계산합니다</p>
             </li>
             <li>
-              <p class="spec-name">열·습도</p>
+              <p class="spec-name">열과 습도</p>
               <p class="spec-value">입자 간 전도 + 부력</p>
-              <p class="spec-note">습공기 밀도 보정을 포함한다</p>
+              <p class="spec-note">습공기 밀도 보정을 포함합니다</p>
             </li>
             <li>
               <p class="spec-name">주기 경계</p>
-              <p class="spec-value">PBC · 최소 이미지 규약</p>
-              <p class="spec-note">셀 래핑으로 무한 반복 공간을 다룬다</p>
+              <p class="spec-value">PBC, 최소 이미지 규약</p>
+              <p class="spec-note">셀 래핑으로 무한 반복 공간을 처리합니다</p>
             </li>
             <li>
               <p class="spec-name">이웃 탐색</p>
               <p class="spec-value">공간 해시 그리드</p>
-              <p class="spec-note">SpatialHash 커널 1개가 전담한다</p>
+              <p class="spec-note">SpatialHash 커널 1개로 처리합니다</p>
+            </li>
+            <li>
+              <p class="spec-name">데이터 배치</p>
+              <p class="spec-value">SoA</p>
+              <p class="spec-note">계산에 필요한 상태를 버퍼별로 분리해 다룹니다</p>
             </li>
           </ul>
 
-          <div class="figures">
-            <figure>
-              <p class="fig-num mono">01</p>
-              <p class="fig-title">GPU 커널</p>
-              <p class="fig-val mono">Compute</p>
-              <p class="fig-note">공간 해시와 유동 계산을 GPU 작업으로 나눕니다.</p>
-            </figure>
-            <figure>
-              <p class="fig-num mono">02</p>
-              <p class="fig-title">연산 모델</p>
-              <p class="fig-val mono">δ-SPH</p>
-              <p class="fig-note">운전 조건에 따른 유동 변화를 계산합니다.</p>
-            </figure>
-            <figure>
-              <p class="fig-num mono">03</p>
-              <p class="fig-title">데이터 배치</p>
-              <p class="fig-val mono">SoA</p>
-              <p class="fig-note">계산에 필요한 상태를 분리해 다룹니다.</p>
-            </figure>
-            <figure>
-              <p class="fig-num mono">04</p>
-              <p class="fig-title">검증 흐름</p>
-              <p class="fig-val mono">Edit · Play</p>
-              <p class="fig-note">장면과 운전 조건을 나눠 확인합니다.</p>
-            </figure>
-          </div>
+          <h3 class="sub-heading" id="archHeading">애플리케이션부터 외부 통신까지 5계층입니다</h3>
+          <ol class="layers" aria-labelledby="archHeading">
+            <li>
+              <p class="layer-id num">L1</p>
+              <p class="layer-name">애플리케이션</p>
+              <p class="layer-body">RFS Editor, Simulation3D, AI Advisor, 리플레이</p>
+            </li>
+            <li>
+              <p class="layer-id num">L2</p>
+              <p class="layer-name">파이프라인과 컨트롤러</p>
+              <p class="layer-body">SimulationPipeline → 스테이지 10개 → 컨트롤러 26개</p>
+            </li>
+            <li>
+              <p class="layer-id num">L3</p>
+              <p class="layer-name">GPU 컴퓨트</p>
+              <p class="layer-body">
+                SPHCore 8, DomainExt 14, SpatialHash 1, TempGrid 8, ObjectGrid 7, Integration 5, Scatter 4,
+                Trail 2, GlobalSDF 3, Coil 1
+              </p>
+            </li>
+            <li>
+              <p class="layer-id num">L4</p>
+              <p class="layer-name">데이터 버퍼</p>
+              <p class="layer-body">SoA 버퍼 6개, ParticleData 20B, 충돌 메시 데이터</p>
+            </li>
+            <li>
+              <p class="layer-id num">L5</p>
+              <p class="layer-name">외부 통신</p>
+              <p class="layer-body">Socket.IO v2 (RFS-XD 관제 연동), REST API, CSV 내보내기</p>
+            </li>
+          </ol>
         </div>
       </section>
 
       <!-- ══════════════════════════════════════════════════════════
-           4 · 장비 — 라이트. 이 제품이 아는 물건들
+           4 · 장비 + 에디터 (이전 판의 두 띠를 합쳤다)
            ══════════════════════════════════════════════════════════ -->
-      <section class="band band-light section-equipment" id="equipment" aria-labelledby="equipHeading">
+      <section class="section section-equipment" id="equipment" aria-labelledby="equipHeading">
         <div class="wrap">
-          <h2 id="equipHeading">전산실에 있는 물건을 그대로 안다</h2>
+          <h2 id="equipHeading">전산실 장비 5종을 제어 로직까지 재현합니다</h2>
           <p class="section-lead">
-            유동만 푸는 것으로는 답이 안 나온다. 열을 만드는 것과 식히는 것이 각자의 제어 논리를
-            가지고 장 안에 들어가 있어야 배치 변경이 의미를 갖는다.
+            기류만 계산해서는 배치 변경 효과를 판단하기 어렵습니다. 열을 내는 장비와 식히는 장비가 각자의 제어
+            로직대로 움직여야 실제 운전에 가까운 결과가 나옵니다.
           </p>
 
           <div class="equip-list">
             <article>
-              <h3>항온항습기 <span class="tag mono">FWU</span></h3>
+              <h3>항온항습기 <span class="tag">FWU</span></h3>
               <p>
-                PID 자동 제어로 목표 온도를 좇는다. 열교환은 ε-NTU 로 계산하고,
-                프리쿨링·쿨링 밸브와 댐퍼 모드를 각각 조작할 수 있다.
+                PID 자동 제어로 목표 온도를 유지합니다. 열교환은 ε-NTU 방식으로 계산하고, 프리쿨링과 쿨링
+                밸브, 댐퍼 모드를 각각 조작할 수 있습니다.
               </p>
             </article>
             <article>
               <h3>서버랙</h3>
               <p>
-                CFM 기반으로 통과 공기에 열을 싣는다. 동적 전력 프로파일 5종을 갖고 있고,
-                장애 상황을 만들어 그때 열이 어디로 가는지 볼 수 있다.
+                CFM(풍량) 기준으로 랙을 지나는 공기에 열을 더합니다. 동적 전력 프로파일 5종을 제공하고, 장애
+                상황을 재현해 열이 어디로 퍼지는지 확인할 수 있습니다.
               </p>
             </article>
             <article>
-              <h3>팬 · 댐퍼 · 냉각코일</h3>
+              <h3>팬, 댐퍼, 냉각코일</h3>
               <p>
-                듀얼 원뿔 존 모델로 GPU 파티클 물리에 직접 개입한다.
-                후처리로 그린 화살표가 아니라 실제로 입자를 민다.
+                듀얼 원뿔 존 모델로 GPU 입자 계산에 직접 힘을 가합니다. 화면에 덧그린 화살표가 아니라 실제로
+                입자의 움직임을 바꿉니다.
               </p>
             </article>
             <article>
               <h3>온도계</h3>
               <p>
-                물리 기반 센서 응답 특성을 갖는다. 값이 즉시 튀지 않고 실제 계기처럼 따라온다.
-                Cool Zone 과 Hot Zone 을 자동으로 분류한다.
+                실제 센서처럼 응답 지연이 있어 값이 한 번에 튀지 않습니다. Cool Zone과 Hot Zone을 자동으로
+                분류합니다.
               </p>
             </article>
             <article>
-              <h3>급기구 · 배기구</h3>
+              <h3>급기구와 배기구</h3>
               <p>
-                CFD inlet / outlet 패턴을 따른다. 경계에 걸린 파티클을 자동으로 재배치해
-                유입·유출이 끊기지 않게 한다.
+                CFD의 inlet/outlet 조건을 따릅니다. 경계에 걸린 입자를 자동으로 재배치해 유입과 유출이 끊기지
+                않게 합니다.
               </p>
             </article>
           </div>
+
+          <div class="split editor" id="editor">
+            <div class="split-lead">
+              <h3 class="sub-heading" id="editorHeading">시뮬레이션을 멈추지 않고 편집합니다</h3>
+              <p class="split-note">
+                RFS Editor는 Unity UI Toolkit으로 만든 런타임 편집 환경입니다. Edit 모드와 Play 모드를 나눠
+                장면과 운전 조건을 따로 확인합니다.
+              </p>
+            </div>
+            <div class="split-body">
+              <dl class="feature-rows">
+                <div>
+                  <dt>오브젝트 편집</dt>
+                  <dd>이동, 회전, 스케일 핸들, 다중 선택, Undo / Redo, 드래그 앤 드롭 배치</dd>
+                </div>
+                <div>
+                  <dt>속성 패널</dt>
+                  <dd>실시간 속성 편집, 관제 시스템의 XD 태그 바인딩</dd>
+                </div>
+                <div>
+                  <dt>리플레이</dt>
+                  <dd>CSV 또는 XD API 데이터로 시계열을 재생하고, 실측 대비 정확도 리포트를 생성</dd>
+                </div>
+                <div>
+                  <dt>AI Advisor</dt>
+                  <dd>26개 규칙의 Rule Engine과 LLM 프로바이더 4종(Anthropic, OpenAI, Gemini, 로컬 Ollama) 연동</dd>
+                </div>
+                <div>
+                  <dt>모니터링</dt>
+                  <dd>PUE, COP, 전력, CO₂ 대시보드, MetricsHUD 7섹션 26메트릭</dd>
+                </div>
+                <div>
+                  <dt>프로젝트</dt>
+                  <dd>생성, 저장, 불러오기, 다중 씬, glTF / GLB 3D 모델 임포트</dd>
+                </div>
+              </dl>
+
+              <div class="keys">
+                <p class="keys-title">단축키</p>
+                <ul>
+                  <li><kbd>Space</kbd> 일시정지와 재개</li>
+                  <li><kbd>H</kbd> 히트맵</li>
+                  <li><kbd>X</kbd><kbd>Y</kbd><kbd>Z</kbd> 슬라이스 축</li>
+                  <li><kbd>F3</kbd> 성능 통계</li>
+                  <li><kbd>Tab</kbd> UI 접기</li>
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
       </section>
 
       <!-- ══════════════════════════════════════════════════════════
-           5 · 시각화 — 암실. 실제 렌더를 그대로 싣는다
+           5 · 시각화 — 실물 렌더
            ══════════════════════════════════════════════════════════ -->
-      <section class="band band-dark section-vis" id="visualization" aria-labelledby="visHeading">
+      <section class="section section-vis" id="visualization" aria-labelledby="visHeading">
         <div class="wrap">
-          <p class="eyebrow">보이는 방식</p>
-          <h2 id="visHeading">읽는 방법을 네 가지로 나눈다</h2>
+          <h2 id="visHeading">파티클, 트레일, 히트맵, 벡터 필드 네 가지로 결과를 봅니다</h2>
 
           <div class="vis-layout">
             <ol class="vis-list">
               <li>
                 <h3>파티클</h3>
-                <p>온도로 색을 매핑하고 발광과 LOD 를 건다. 공기가 어디서 데워지는지 그대로 보인다.</p>
+                <p>온도에 따라 입자 색을 바꾸고 발광과 LOD를 적용합니다. 공기가 어디서 데워지는지 바로 보입니다.</p>
               </li>
               <li>
                 <h3>트레일</h3>
-                <p>Ring Buffer 로 궤적을 남긴다. 한 순간이 아니라 지나온 경로를 본다.</p>
+                <p>Ring Buffer로 입자 궤적을 남겨, 한 순간이 아닌 지나온 경로를 확인합니다.</p>
               </li>
               <li>
                 <h3>히트맵 슬라이스</h3>
                 <p>
-                  온도·속도·압력·밀도·습도 다섯 물리량의 단면을 5패스 GPU 파이프라인으로 그린다.
-                  <span class="mono">X</span> · <span class="mono">Y</span> ·
-                  <span class="mono">Z</span> 키로 축을 바꾼다.
+                  온도, 속도, 압력, 밀도, 습도 다섯 물리량의 단면을 5패스 GPU 파이프라인으로 그립니다.
+                  <kbd>X</kbd><kbd>Y</kbd><kbd>Z</kbd> 키로 축을 바꿉니다.
                 </p>
               </li>
               <li>
                 <h3>벡터 필드</h3>
-                <p>화살표 글리프와 스트림라인을 GPU 인스턴싱으로 띄운다. 방향과 세기를 함께 읽는다.</p>
+                <p>화살표와 스트림라인을 GPU 인스턴싱으로 그려 기류의 방향과 세기를 함께 보여 줍니다.</p>
               </li>
             </ol>
 
@@ -389,7 +442,7 @@
                   <button class="vis-tab" type="button" data-vis-target="top" aria-pressed="true">상면</button>
                   <button class="vis-tab" type="button" data-vis-target="side" aria-pressed="false">측면</button>
                 </div>
-                <p class="vis-source mono">RFS 실물 렌더</p>
+                <p class="vis-source">RFS 실물 렌더</p>
               </div>
               <div class="vis-frame">
                 <figure data-vis-panel="top">
@@ -397,11 +450,10 @@
                     src="./assets/sph-topview.webp"
                     width="689"
                     height="680"
-                    loading="lazy"
                     decoding="async"
-                    alt="RFS 상면 뷰 — 랙 상부에서 데워진 입자가 초록으로 퍼지고 주변 저온 입자는 청록으로 남는다"
+                    alt="RFS 상면 뷰. 랙 상부에서 데워진 입자가 초록으로 퍼지고 주변 저온 입자는 청록으로 남는다"
                   />
-                  <figcaption>상면 · 랙 상부의 열기둥</figcaption>
+                  <figcaption>상면에서 본 랙 상부의 열기둥</figcaption>
                 </figure>
                 <figure data-vis-panel="side" hidden>
                   <img
@@ -410,19 +462,14 @@
                     height="437"
                     loading="lazy"
                     decoding="async"
-                    alt="RFS 측면 뷰 — 랙을 통과하며 데워진 공기가 오른쪽으로 밀려 나가는 단면"
+                    alt="RFS 측면 뷰. 랙을 통과하며 데워진 공기가 오른쪽으로 밀려 나가는 단면"
                   />
-                  <figcaption>측면 · 랙을 통과한 공기</figcaption>
+                  <figcaption>측면에서 본 랙을 통과한 공기</figcaption>
                 </figure>
               </div>
-              <div class="temp-key" role="list" aria-label="파티클 온도 색상 범례">
-                <span role="listitem"><i class="temp-cold" aria-hidden="true"></i>저온</span>
-                <span role="listitem"><i class="temp-mid" aria-hidden="true"></i>중간</span>
-                <span role="listitem"><i class="temp-hot" aria-hidden="true"></i>고온</span>
-              </div>
               <p class="shots-note">
-                두 장 모두 RFS 실물의 파티클 뷰다. 저온이 청록, 고온이 초록이다 —
-                이 페이지 첫 화면의 색도 같은 규칙을 쓴다.
+                두 장 모두 RFS 실물의 파티클 뷰입니다. 저온은 청록, 고온은 초록으로 표시하며 이 페이지 첫 화면도
+                같은 색 규칙을 씁니다.
               </p>
             </div>
           </div>
@@ -430,118 +477,19 @@
       </section>
 
       <!-- ══════════════════════════════════════════════════════════
-           6 · 에디터 — 라이트
+           6 · 요구사항과 문의
            ══════════════════════════════════════════════════════════ -->
-      <section class="band band-light section-editor" id="editor" aria-labelledby="editorHeading">
+      <section class="section section-adopt" id="adopt" aria-labelledby="adoptHeading">
         <div class="wrap split">
           <div class="split-lead">
-            <h2 id="editorHeading">시뮬레이터가 아니라 작업 환경이다</h2>
-            <p class="section-lead">
-              배치를 바꿔 보려면 배치를 바꿀 수 있어야 한다. RFS Editor 는 Unity UI Toolkit 으로 만든
-              런타임 편집 환경이고, 시뮬레이션이 도는 채로 물건을 옮긴다.
-            </p>
-          </div>
-          <div class="split-body">
-            <dl class="feature-rows">
-              <div>
-                <dt>오브젝트 편집</dt>
-                <dd>이동·회전·스케일 핸들, 다중 선택, Undo / Redo, 드래그 앤 드롭 배치</dd>
-              </div>
-              <div>
-                <dt>속성 패널</dt>
-                <dd>실시간 속성 편집. 관제 시스템의 XD 태그를 여기서 바인딩한다</dd>
-              </div>
-              <div>
-                <dt>리플레이</dt>
-                <dd>
-                  CSV 또는 XD API 를 데이터소스로 삼아 시계열을 재생하고, 실측 대비 정확도 리포트를
-                  만든다
-                </dd>
-              </div>
-              <div>
-                <dt>AI Advisor</dt>
-                <dd>
-                  26개 규칙의 Rule Engine 과 LLM 프로바이더 4종(Anthropic · OpenAI · Gemini ·
-                  로컬 Ollama) 연동
-                </dd>
-              </div>
-              <div>
-                <dt>모니터링</dt>
-                <dd>PUE · COP · 전력 · CO₂ 대시보드, MetricsHUD 7섹션 26메트릭</dd>
-              </div>
-              <div>
-                <dt>프로젝트</dt>
-                <dd>생성·저장·불러오기, 다중 씬, glTF / GLB 3D 모델 임포트</dd>
-              </div>
-            </dl>
-
-            <div class="keys">
-              <p class="keys-title">손에 익는 키</p>
-              <ul>
-                <li><kbd>Space</kbd> 일시정지 · 재개</li>
-                <li><kbd>H</kbd> 히트맵</li>
-                <li><kbd>X</kbd><kbd>Y</kbd><kbd>Z</kbd> 슬라이스 축</li>
-                <li><kbd>F3</kbd> 성능 통계</li>
-                <li><kbd>Tab</kbd> UI 접기</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <!-- ══════════════════════════════════════════════════════════
-           7 · 아키텍처 — 라이트. 5계층
-           ══════════════════════════════════════════════════════════ -->
-      <section class="band band-dark section-arch" id="architecture" aria-labelledby="archHeading">
-        <div class="wrap">
-          <h2 id="archHeading">다섯 켜</h2>
-          <ol class="layers">
-            <li>
-              <p class="layer-id mono">L1</p>
-              <p class="layer-name">애플리케이션</p>
-              <p class="layer-body">RFS Editor · Simulation3D · AI Advisor · 리플레이</p>
-            </li>
-            <li>
-              <p class="layer-id mono">L2</p>
-              <p class="layer-name">파이프라인 · 컨트롤러</p>
-              <p class="layer-body">SimulationPipeline → 스테이지 10개 → 컨트롤러 26개</p>
-            </li>
-            <li>
-              <p class="layer-id mono">L3</p>
-              <p class="layer-name">GPU 컴퓨트</p>
-              <p class="layer-body">
-                SPHCore 8 · DomainExt 14 · SpatialHash 1 · TempGrid 8 · ObjectGrid 7 ·
-                Integration 5 · Scatter 4 · Trail 2 · GlobalSDF 3 · Coil 1
-              </p>
-            </li>
-            <li>
-              <p class="layer-id mono">L4</p>
-              <p class="layer-name">데이터 버퍼</p>
-              <p class="layer-body">SoA 버퍼 6개 · ParticleData 20B · 충돌 메시 데이터</p>
-            </li>
-            <li>
-              <p class="layer-id mono">L5</p>
-              <p class="layer-name">외부 통신</p>
-              <p class="layer-body">Socket.IO v2 (RFS-XD 관제 연동) · REST API · CSV 내보내기</p>
-            </li>
-          </ol>
-        </div>
-      </section>
-
-      <!-- ══════════════════════════════════════════════════════════
-           8 · 도입 — 라이트. 요구사양과 연락
-           ══════════════════════════════════════════════════════════ -->
-      <section class="band band-light section-adopt" id="adopt" aria-labelledby="adoptHeading">
-        <div class="wrap split">
-          <div class="split-lead">
-            <h2 id="adoptHeading">돌려 보려면 무엇이 필요한가</h2>
-            <p class="section-lead">
+            <h2 id="adoptHeading">Windows 10 이상, VRAM 6GB NVIDIA GPU부터 돌아갑니다</h2>
+            <p class="split-note">
               DirectCompute를 쓰므로 NVIDIA GPU를 권장합니다. 아래는 공개 기술 문서에 적힌 요구사항입니다.
             </p>
           </div>
           <div class="split-body">
             <table class="req">
-              <caption class="sr-only">RFS 시스템 요구사항 — 최소 사양과 권장 사양</caption>
+              <caption class="sr-only">RFS 시스템 요구사항. 최소 사양과 권장 사양</caption>
               <thead>
                 <tr>
                   <th scope="col">항목</th>
@@ -557,8 +505,8 @@
                 </tr>
                 <tr>
                   <th scope="row">GPU</th>
-                  <td>GTX 1660 · VRAM 6GB</td>
-                  <td>RTX 3060 이상 · VRAM 8GB 이상</td>
+                  <td>GTX 1660, VRAM 6GB</td>
+                  <td>RTX 3060 이상, VRAM 8GB 이상</td>
                 </tr>
                 <tr>
                   <th scope="row">메모리</th>
@@ -567,47 +515,69 @@
                 </tr>
                 <tr>
                   <th scope="row">엔진</th>
-                  <td colspan="2">Unity 6.4 (6000.4.5f1) · URP 17.2</td>
+                  <td colspan="2">Unity 6.4 (6000.4.5f1), URP 17.2</td>
                 </tr>
               </tbody>
             </table>
 
             <div class="adopt-cta">
               <p>
-                도입 검토와 기술 문의는 트웬티온스로 연락해 주세요.
-                제품은 독점 소프트웨어이며, 평가판 제공 여부는 협의가 필요합니다.
+                도입 검토와 기술 문의는 트웬티온스로 연락해 주세요. 제품은 독점 소프트웨어이며, 평가판 제공
+                여부는 협의가 필요합니다.
               </p>
               <a class="btn" href="mailto:hello@twentyoz.kr?subject=RFS%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">
                 RFS 도입 문의
               </a>
-              <p class="adopt-fine mono">hello@twentyoz.kr · 070-4353-1190</p>
             </div>
           </div>
         </div>
       </section>
     </main>
 
-    <footer class="band band-dark site-foot">
-      <div class="wrap foot-inner">
-        <div>
-          <p class="foot-name">RFS — Realtime Fluid Simulator</p>
-          <p class="foot-line">데이터센터 열관리를 위한 실시간 GPU 유체 시뮬레이션 엔진</p>
+    <!-- 다열 색인 푸터 — 끝까지 읽은 사람이 다음에 갈 곳과 마지막에 찾는 사실 -->
+    <footer class="site-foot">
+      <div class="wrap foot-grid">
+        <div class="foot-col foot-brand">
+          <p class="foot-name">RFS</p>
+          <p class="foot-line">Realtime Fluid Simulator. 데이터센터 열관리를 위한 실시간 GPU 유체 시뮬레이션 엔진</p>
+        </div>
+        <nav class="foot-col" aria-labelledby="footNavTech">
+          <p class="foot-head" id="footNavTech">기술</p>
+          <ul>
+            <li><a href="#problem">기존 CFD와의 차이</a></li>
+            <li><a href="#solver">δ-SPH 솔버 사양</a></li>
+            <li><a href="#archHeading">5계층 구조</a></li>
+            <li><a href="#equipment">장비 5종</a></li>
+            <li><a href="#editor">RFS Editor</a></li>
+            <li><a href="#visualization">시각화 네 가지</a></li>
+          </ul>
+        </nav>
+        <div class="foot-col">
+          <p class="foot-head">제품</p>
+          <dl class="foot-facts">
+            <div><dt>버전</dt><dd class="num">0.13.0</dd></div>
+            <div><dt>엔진</dt><dd>Unity 6.4, URP 17.2</dd></div>
+            <div><dt>라이선스</dt><dd>Proprietary</dd></div>
+            <div><dt>요구사항</dt><dd><a href="#adopt">최소와 권장 사양</a></dd></div>
+          </dl>
+        </div>
+        <div class="foot-col">
+          <p class="foot-head">문의</p>
+          <ul>
+            <li><a href="mailto:hello@twentyoz.kr">hello@twentyoz.kr</a></li>
+            <li><a href="tel:+82-70-4353-1190" class="num">070-4353-1190</a></li>
+            <li>Twentyoz Co., Ltd.</li>
+          </ul>
         </div>
-        <dl class="foot-meta mono">
-          <div><dt>버전</dt><dd>0.13.0</dd></div>
-          <div><dt>엔진</dt><dd>Unity 6.4 · URP 17.2</dd></div>
-          <div><dt>제작</dt><dd>Twentyoz Co., Ltd.</dd></div>
-          <div><dt>라이선스</dt><dd>Proprietary</dd></div>
-        </dl>
       </div>
       <div class="wrap foot-fine">
         <p>
-          이 페이지의 수치는 RFS 공개 기술 문서에 적힌 값입니다.
-          실측 조건이 없는 정확도 지표는 표시하지 않습니다.
+          이 페이지의 수치는 RFS 공개 기술 문서에 적힌 값입니다. 실측 조건이 없는 정확도 지표는 표시하지 않으며,
+          첫 화면의 조작 화면은 제품 성능이 아니라 부하와 급기 변화의 관계를 보여 주는 2D 축소 표현입니다.
         </p>
       </div>
     </footer>
 
-    <script src="./scripts/thermal-field.js?v=2" defer></script>
+    <script src="./scripts/thermal-field.js?v=20261006" defer></script>
   </body>
 </html>

apps/site/public/work/rfs-cfd/scripts/thermal-field.js

@@ -55,21 +55,21 @@
     const selected = activePreset();
     if (fieldScene) fieldScene.textContent = selected?.textContent.trim() || "수동 조정";
 
-    let state = "냉기와 발열이 맞서는 기준 상태입니다.";
+    let state = "냉기와 발열이 균형을 이룬 기준 상태입니다.";
     let watch = "랙 배면";
     let action = "부하와 급기를 따로 움직여 비교";
 
     if (gap >= 35) {
-      state = "발열이 급기보다 크게 앞섭니다. 배면에서 천장으로 오르는 열기둥을 확인하십시오.";
-      watch = "랙 배면 · 천장 배기";
+      state = "발열량이 급기 냉방량보다 훨씬 많습니다. 랙 배면에서 천장으로 올라가는 열기둥을 확인하세요.";
+      watch = "랙 배면과 천장 배기";
       action = "급기 상향과 부하 재배분을 비교";
     } else if (gap >= 15) {
-      state = "발열 우세 구간입니다. 랙 뒤에 머무는 고온 입자의 경로를 비교하십시오.";
+      state = "발열량이 급기 냉방량보다 조금 많습니다. 랙 뒤에 남는 고온 입자의 경로를 확인하세요.";
       watch = "랙 배면";
       action = "급기량을 한 단계씩 높여 비교";
     } else if (gap <= -15) {
-      state = "급기가 발열을 앞섭니다. FWU 제트가 만드는 저온 구간을 확인하십시오.";
-      watch = "FWU 제트 · 냉점";
+      state = "급기 냉방량이 발열량보다 많습니다. FWU 토출구 앞의 저온 구간을 확인하세요.";
+      watch = "FWU 토출구 앞 냉점";
       action = "과냉 구간과 팬 운전을 함께 검토";
     }
 

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);
 }