feat(showcase): 신규 쇼케이스 3종 — RFS · 트웬티온스 · 새벽청과

각 워크를 서로 다른 클라이언트로 보고 0~6단계를 따로 돌았다(토큰 체계 신규 정의 =
전체 경로). 셋 모두 라이트/다크 반전을 .band-light / .band-dark 가 --band-* 를
재정의하는 규칙으로 정의해 하드 게이트 4를 통과시켰다 — 반전이 섹션마다의 기분이
아니라 두 클래스가 만드는 규칙이다.

RFS — 실시간 유체 시뮬레이터 (rfs-cfd)
  프리셋 darkroom-spec · 컨셉 "암실과 사양서"
  R1 luminary.ai · R2 teenage.engineering EP-133 · 보조 simscale.com (전부 실측)
  히어로에서 브라우저가 실제로 Navier–Stokes 를 푼다. 순수 WebGL2, three.js 미사용.
  이류 → 온도 소스 → 부력·설비 힘 → 발산 → 압력 Jacobi → 투영 → 파티클 전진.
  격자 224×126 / 파티클 26,000 / Jacobi 22회, 좁은 화면은 절반으로 줄인다.
  prefers-reduced-motion 이면 시작하지 않고 그 자리에 RFS 실물 파티클 렌더가 남는다.
  단위계로 세 번 실패했다: dt 를 프레임 단위로 넘겨 파티클이 0.2초 만에 소멸했고,
  전부 급기구에서만 재생성해 실 한 가닥이 됐으며, 랙이 위로 뿜어 핫/콜드 아일이
  갈라지지 않았다. dt 를 초로 못박고 속도를 초당 격자 셀로 통일해 해결했다.
  수치는 전부 RFS 저장소 README 출처. 정확도 지표는 싣지 않았다 — 사내 검증 자료이고
  현재 통과 상태가 아니다.

트웬티온스 (twentyoz-corp)
  프리셋 field-record · 컨셉 "네 개의 현장"
  R1 samsara.com · R2 lars-mueller-publishers.com · R3 = 현행 twentyoz.kr 감사
  현행 사이트 실측: 대비 실패 172개 요소(9~11px 가 3.61:1), 한글 폰트 미지정으로
  한글이 시스템 기본으로 떨어짐, h1 자간 −0.06em(한글 상한의 세 배), 배경 #020202.
  'Digital Genetics' 은유가 산업용 IoT 사업을 가리고 있었다.
  유지한 자산은 radius 0 과 무채색·모노 기조.
  첫 화면에 회사 이름 대신 현장 선택기를 뒀다 — 라디오 그룹이라 JS 0바이트이고
  좌우 화살표 키가 그냥 먹는다. 파트너 19곳은 원본에 도메인 표기가 없어 나누지 않았다.

새벽청과 (saebyeok-cheonggwa)
  프리셋 market-board · 컨셉 "오늘 새벽 두 시의 값"
  R1 natoora.com · R2 phillips.com · R3 제철 12개월 띠
  커머스가 감추는 시세 변동을 히어로의 주인공으로 삼았다. 상품 사진은 아래로 내렸다.
  경매 시각·경락가격·등급·당도 표시 규정을 조사해 카피의 근거로 썼다.
  무화과 당도를 "—" 로 두고 값이 없는 게 아니라 표시가 허용되지 않는 품목이라고 적었다.
  등락은 색이 아니라 ▲▼보합 기호가 먼저다.
  표의 숫자가 예시임을 판 아래와 푸터 두 곳에 명시하고, 주소·전화는 비웠다(게이트 11).
  사진 4장은 codex 내장 image_gen 생성물이며 합계 341KB.

검증: Astro 빌드 통과, verify 체인 L0~L6 10계층 전부 통과,
showcase-audit 신규 3종 12/12 통과(320/390/768/1440).
성능 실측(RFS): JS 24KB · 총 704KB. 폰트만 530KB 로 예산(200KB) 초과 —
한글 웹폰트 자체가 원인이고 기존 cheongon-care 는 650KB 로 더 크다.
저장소 공통 baseline 이라 이번 판은 기록만 남기고 넘어간다.

기존 16종에서 발견된 70건(대비 미달·히어로 줄 수 초과)은 이번 범위를 넘어
design.md 에 목록만 남겼다.

apps/site/design.md

@@ -891,3 +891,189 @@ v23 스크롤 리셋·단일 헤더에도 사용자 평가가 "여전히 깨져
   - `base.css`에 글로벌 미디어 리셋(`img, picture, video, canvas, svg { max-width: 100%; display: block; }`) 및 `html { overflow-x: hidden; }` 안전장치 추가.
 - **자동화 검증**:
   - `tools/test-showcase-dialog.mjs` (1440px / 768px / 390px / 320px 4개 뷰포트 E2E): 데스크톱 0px 스크롤 CTA 노출 확인, 좌측 cover 핏 실측, 모바일 스티키 독 활성화 확인, 모달 닫기/Esc/배경 클릭/카드 액션 등 17개 단언 100% PASS.
+
+## 2026-08-24 — 신규 쇼케이스 3종 (RFS · 트웬티온스 · 새벽청과) + 게이트 두 겹 신설
+
+각 워크는 서로 다른 클라이언트이므로 0~6단계를 워크 단위로 따로 돌았다(토큰 체계 신규 정의 = 전체 경로).
+세 워크 모두 **라이트/다크 반전을 토큰 규칙으로 정의**해 하드 게이트 4를 통과시켰다 —
+`.band-light` / `.band-dark` 가 `--band-*` 를 재정의하고, 컴포넌트는 `--band-*` 만 본다.
+그래서 반전은 섹션마다의 기분이 아니라 두 클래스가 만드는 규칙이다.
+
+### 워크별 한 줄 (상세는 각 tokens.css 머리글에 실측치까지 기록)
+
+| 워크 | 프리셋 | 레퍼런스 (실측) | 컨셉 · 감수한 리스크 |
+|---|---|---|---|
+| **RFS** `rfs-cfd` | `darkroom-spec` (신규) | R1 luminary.ai(배경 #2A2C2F·h1 72/600·radius 0 1898회·히어로 영상이 첫 화면 100%) · R2 teenage.engineering EP-133(#F9FAF9·강조 #FF5000 단 10회·밝은 판에 다크 블록 18회) · 보조 simscale.com(1192↔1425 교대·h1 49.78/400) | **암실과 사양서.** 유동이 있는 곳은 어둡고 읽는 곳은 밝다. 리스크: 히어로에서 브라우저가 실제로 Navier–Stokes 를 푼다 |
+| **트웬티온스** `twentyoz-corp` | `field-record` (신규) | R1 samsara.com(#FFFFFF·FK Grotesk 2패밀리·최대÷본문 5.0·radius 0 2399회) · R2 lars-mueller-publishers.com(**본문 20px**·h1 34px·최대÷본문 1.7·radius 0 1709회) · R3=현행 twentyoz.kr 감사 | **네 개의 현장.** 리스크: 첫 화면에 회사 이름·슬로건을 두지 않고 현장 선택기를 둔다 |
+| **새벽청과** `saebyeok-cheonggwa` | `market-board` (신규) | R1 natoora.com(#121212·본문 16px 224회·최대÷본문 4.5·히어로 이미지 1313×900) · R2 phillips.com(무채색·h1 28px/400·날짜와 상태가 제목보다 앞) · R3 제철 12개월 띠 | **오늘 새벽 두 시의 값.** 리스크: 상품 사진이 아니라 시세판이 히어로다 |
+
+두 레퍼런스의 합성을 기록해 둔다 — 트웬티온스는 R2(본문 20px)로 본문을 키우고
+R1(최대÷본문 5.0)로 스케일을 벌렸다. 한쪽만 따르면 평평하거나 본문이 작아진다.
+
+### RFS — 히어로가 실제로 유체를 푼다
+
+`scripts/thermal-field.js`, 순수 WebGL2. three.js 를 쓰지 않았다(예산 절약이 아니라
+셰이더 플레인 몇 장이면 되는 일에 씬 그래프가 필요 없어서다).
+
+- 패스: 이류(semi-Lagrangian) → 온도 소스 → 부력·설비 힘 → 발산 → 압력 Jacobi → 투영 → 파티클 전진
+- 격자 224×126 / 파티클 26,000 / Jacobi 22회. 좁은 화면·저코어면 128×72 / 9,000 / 14회, DPR 1.25
+- `prefers-reduced-motion` 이면 **아예 시작하지 않는다**. 그 자리에 RFS 실물 파티클 렌더가 남는다 — 폴백이 아니라 결과물이다
+- IntersectionObserver 로 화면 밖이면 정지, 탭이 숨어도 정지
+
+**세 번 고쳤고 원인은 전부 단위계였다.**
+
+1. **파티클이 0.2초 만에 사라졌다.** `dt` 를 "프레임 단위"로 넘기면서 수명 감쇠를
+   `age -= dt * 0.115` 로 걸었다. dt≈0.9 라 프레임당 0.1씩 줄어 10프레임이면 소멸이다.
+   **dt 를 초로 못박고** 속도의 단위를 "초당 격자 셀"로 통일해 해결했다.
+   감쇠도 프레임 상수(0.9965)에서 `pow(base, dt*60)` 으로 바꿨다 — 주사율이 물리를 바꾸면 안 된다.
+2. **입자가 실 한 가닥으로 뭉쳤다.** 전부 급기구에서만 재생성해서 같은 경로를 따라갔다.
+   방이 아니라 소용돌이 그림이 됐다. 절반만 급기구에서, 나머지는 방 안 임의 위치에서 되살린다.
+3. **핫 아일/콜드 아일이 안 보였다.** 랙이 위로 뿜게 했더니 냉기와 열기가 랙을 사이에 두고
+   갈라지지 않았다. 전면 흡입 → 배면 토출로 바꿔 이 업계의 기본 그림이 화면에 나오게 했다.
+
+수치는 전부 RFS 개발 저장소 README 출처다(파티클 100,000 / GPU 커널 53+ / 20B SoA /
+테스트 2,000+ / Unity 6.4 · URP 17.2 / GTX 1660~RTX 3060). **정확도 지표는 싣지 않았다** —
+사내 검증 문서의 등급은 고객사 대상 내부 자료이고 현재 통과 상태가 아니다.
+성능이 아니라 정직함이 이 페이지의 자산이므로, 없는 것은 없다고 두었다.
+
+### 트웬티온스 — 리디자인 감사가 R3 를 대신했다
+
+현행 twentyoz.kr 을 브라우저로 열어 computed style 을 실측했다. 여기서 나온 것이
+리디자인의 근거 전부다.
+
+- **대비 실패 172개 요소** — `rgb(102,102,102)` 가 배경 `rgb(2,2,2)` 위 **3.61:1**, 그것도 9~11px 로 284곳
+- **한글 폰트 미지정** — `font-family` 가 Inter 뿐이라 한국 회사의 한국어 사이트에서 한글이 시스템 기본으로 떨어진다
+- h1 174.86px 에 `letter-spacing: -10.49px` = **−0.06em**. 한글 상한(−0.02em)의 세 배
+- 배경 `#020202` — 순흑에 가깝다
+- 'Digital Genetics' 은유가 전면에 있다(CULTIVATING · DROPS · Sativa/Indica · Germination ·
+  Wholesale Desk · ACQUIRE GENETICS). SK하이닉스·LG디스플레이·한화솔루션·GS칼텍스에
+  산업용 IoT 를 파는 회사의 어휘로는 사업을 가린다
+
+**유지한 자산**: radius 0(742회로 이미 통일), 무채색 기조, 모노스페이스. 형태 어휘는 옳았다.
+
+현장 전환은 **라디오 그룹 + `:checked ~`** 로 JS 0바이트다. 탭 흉내를 내지 않고 라디오를
+쓴 이유는 좌우 화살표 키가 그냥 먹기 때문이다 — 직접 만든 탭은 그 키를 다시 구현해야 한다.
+
+파트너 19곳을 현장별로 나누지 않았다. 원본 사이트가 도메인을 표기하지 않으므로
+내가 나누면 그건 추측이다. 프로젝트 12건은 이름·연도·기술 스택이 원본에 있으므로 그대로 옮겼다
+(공개 카탈로그 49건 중 12건만 노출돼 있었다 — 그 사실도 페이지에 적었다).
+
+### 새벽청과 — 값이 바뀐다는 사실을 감추지 않는다
+
+커머스가 보통 감추는 것(시세 변동)을 히어로의 주인공으로 삼았다. 그래서 상품 사진은
+아래로 내렸고, 첫 화면은 표다.
+
+카피의 사실 근거를 전부 조사해서 넣었다: 가락시장 과일 경매는 새벽 2시~아침 8시이고
+사과·배는 08:30 이다 · 유통 경로는 출하 → 도매법인 수집 → 경매 → 중도매인 낙찰 → 소매 ·
+낙찰가를 경락가격이라 부른다 · 등급은 특·상·보통이고 **당도 표시는 특·상 등급에만 허용**된다 ·
+표시 가능 품목은 8+5 종이라 무화과는 들어 있지 않다 · 선과기는 드럼식(지름)과 중량식(무게) ·
+거래단위는 사과 2·5·7.5·10kg, 포도 2·3·4·5kg.
+
+무화과의 당도 칸을 `—` 로 두고 "값이 없다는 뜻이 아니라 표시가 허용되지 않는 품목"이라고
+적은 것이 이 페이지에서 가장 마음에 드는 한 줄이다. 규정을 아는 사람만 쓸 수 있는 문장이다.
+
+**하드 게이트 11 대응**: 표의 숫자는 가상 상호의 예시값이므로, 판 아래와 푸터 두 곳에
+"이 쇼케이스를 위한 예시" 라고 명시했다. 주소·전화·사업자 정보는 지어내지 않고 비웠다.
+
+등락은 색으로만 말하지 않는다. `▲ ▼ 보합` 기호가 먼저고 색은 거들지 않는다 —
+색맹 사용자에게 빨강/파랑만 남는 판은 판이 아니다.
+
+이미지 4장은 codex 내장 `image_gen`(gpt-image-2)으로 생성했다. 스톡이 아니다.
+프롬프트에 이 페이지의 토큰값(#FBFAF7 · #16181A · #1F3F6B)을 그대로 넣었다.
+합계 341KB(webp).
+
+### 게이트 두 겹을 새로 심었다
+
+기존 체인(stylelint · html-validate · L1~L6)이 **구조적으로 못 보던 자리**가 있었다.
+
+**1) `tools/integrity.mjs` — L0-무결성 (verify 체인에 편입)**
+
+`stylelint` 도 `html-validate` 도 "`var(--x)` 를 썼는데 `--x` 가 어디에도 없다"를 못 잡는다.
+미정의 변수는 **선언 전체를 무효로 만드는데 콘솔 에러가 없어서** 조용히 살아남는다.
+
+심자마자 직전 릴리스(v0.9.1)의 실제 결함이 나왔다:
+
+| 발견 | 내용 |
+|---|---|
+| 미정의 CSS 변수 | `cask-archive` 25건 · `cheongon-care` 20건 · `materia-interior` 19건. `--dur-fast` · `--radius-xs` 가 정의된 적이 없어 **transition 선언이 통째로 무효**였다(호버 전환이 전부 즉시 점프) |
+| 한글 조판 누락 | `lumina-optics` · `pulsegate` · `synapse-bci` 가 `word-break: keep-all` 없음, 그리고 `IBM Plex Sans` 만 지정해 **한글 폰트 미지정** |
+| 슬롭 지문 | `text-transform: uppercase` 로 만든 영문 대문자 eyebrow 19건(슬롭 검출률 2위 항목) |
+| 하드 게이트 9 | `materia-interior/hannam-duplex.html` 의 `100vh` |
+| 죽은 파일 | 그 리다이렉트 스텁은 어디서도 참조되지 않으면서 인라인 hex(게이트 1)까지 갖고 있었다 |
+
+전부 고쳤다. `--dur-fast → --dur-quick`, `--radius-xs → --radius` 로 **기존 토큰에 매핑**했다 —
+새 토큰을 추가하면 radius 어휘가 4종이 되어 하드 게이트 3에 걸린다.
+대문자 eyebrow 는 한글 문장으로 바꾸고 `font-mono` 도 본문 서체로 되돌렸다(한글에 모노는 폴백된다).
+
+**2) `tools/showcase-audit.mjs` — 실렌더 감사 (320/390/768/1440)**
+
+정적 grep 이 못 보는 것을 실제 렌더에서 잰다: 가로 스크롤 · 뷰포트 초과 · 컨트롤 줄바꿈 ·
+텍스트 대비 AA · 왼쪽 인셋 최소값 · h1 개수 · 히어로 헤드라인 줄 수 · 깨진 이미지 · 콘솔 에러.
+`html-validate` 대상도 두 페이지에서 `public/work/*/index.html` 전체로 넓혔다 —
+넓히자 기존 페이지에서 11건이 나왔다(라벨 하나가 컨트롤 둘에 걸림 5건,
+`dl > div > div > dt` 4건, div 에 붙은 `aria-label` 2건). 전부 수리.
+
+**측정기가 두 번 거짓말했고 둘 다 고쳤다.**
+
+- `.sr-only` 를 대비 판정에 넣어 34건을 실패로 잡았다. 눈에 보이지 않는 텍스트다.
+  `clip-path` + 2px 이하 상자를 sr-only 로 판정해 제외한다
+- `overflow-x: auto` 상자 안의 넓은 표(제철 띠)를 오버플로로 잡았다.
+  그 상자가 **실제로 스크롤될 때만** 면제하도록 조상을 걷어 올려 확인한다
+
+두 번 다 페이지가 아니라 도구가 틀렸다. 고치기 전의 통과·실패는 의미가 없었다.
+
+### 의도적으로 하지 않은 것
+
+- **RFS 에 정확도 지표를 싣지 않았다** — 사내 검증 등급은 공개할 성질이 아니고 현재 통과 상태도 아니다. 없는 것은 없다고 둔다
+- **RFS 히어로를 3D 로 만들지 않았다** — 제품이 3D 인 것과 홍보 페이지가 3D 여야 하는 것은 다른 문제다. 2D 축소판이라고 캡션에 적었다
+- **트웬티온스 파트너를 현장별로 배정하지 않았다** — 원본에 없는 정보다
+- **새벽청과에 주소·전화·사업자번호를 넣지 않았다** — 가상 상호에 그럴듯한 연락처를 적으면 하드 게이트 11 이다
+- **세 페이지 모두 마퀴·펄스 상태점·요금제 3열 카드를 쓰지 않았다**
+- **`dark-instrument` 를 세 번째로 쓰지 않았다** — 저장소에 이미 둘(Pulsegate·Synapse) 있다. 같은 프리셋의 셋째는 결정이 아니라 카테고리 평균이다
+
+### 다음 실행이 해야 할 일
+
+1. `tools/verify.mjs` 의 L2~L6 은 여전히 관리 앱 2종(가온·두레) 전용이다. 정적 쇼케이스 17종은 L0 두 겹과 `showcase-audit` 만 돈다 — 시각 회귀 기준을 쇼케이스로 넓힐 여지가 있다
+2. LCP·CLS 는 세 페이지 모두 **미측정**이다. 배포 후 모바일 프로파일 Lighthouse 로 재야 한다
+3. `pulsegate` · `synapse-bci` · `lumina-optics` 의 한글 폰트를 스택에만 추가했다. 실제 조판(자간·행간)은 IBM Plex Sans 기준으로 잡혀 있어 한글 눈 검수가 남아 있다
+
+### 성능 — 실측과 예산 이탈 한 건
+
+`performance.getEntriesByType('resource')` 로 첫 화면 전송량을 실측했다(RFS 기준).
+
+| 항목 | 예산(데모) | 실측 | 판정 |
+|---|---|---|---|
+| 히어로까지 JS (gzip) | 400KB | **24KB** | 통과 — three.js 를 쓰지 않았다 |
+| WebGL 추가분 | +600KB | **0KB** | 통과 — 순수 WebGL2 라 라이브러리가 없다 |
+| CSS | — | 41KB | — |
+| 이미지 | — | 107KB | — |
+| **폰트** | **200KB** | **530KB** | **초과** |
+| 총 전송량 | 2MB | **704KB** | 통과 |
+| 리소스 수 | — | 27 | — |
+| LCP · CLS | 3.5초 / 0.1 | **미측정** | 배포 후 Lighthouse |
+
+**폰트 예산 초과를 그대로 적는다.** 원인은 이펙트가 아니라 한글 웹폰트 자체다.
+Pretendard `dynamic-subset` 은 유니코드 범위별로 파일을 쪼개고 브라우저는 실제로 쓰인
+범위만 받는데, 한국어 본문은 받는 범위가 많다. 비교 실측: 기존 `cheongon-care` 는
+**650KB / 25개 파일**(jsdelivr 619KB + gstatic 31KB)로 더 크다. 이건 이번 판이
+악화시킨 값이 아니라 **저장소 공통 baseline** 이다.
+
+여기서 할 수 있는 선택은 셋이었다.
+(a) 한글 폰트를 빼고 시스템 기본으로 — `antipatterns.md` 가 금지한다.
+(b) 서브셋을 직접 만들어 호스팅 — 페이지에 실제로 쓰인 글자만 담으면 수십 KB로 떨어진다.
+(c) 초과를 기록하고 넘어간다.
+
+이번 판은 (c)다. 세 페이지가 정적 HTML 이고 CDN 캐시를 공유하므로 두 번째 페이지부터는
+0KB 이며, (b)는 쇼케이스마다 빌드 단계를 새로 붙여야 해서 이 작업의 범위를 넘는다.
+**다만 `tokens.md` §5 의 폰트 예산 200KB 는 한글 프로젝트에서 달성 불가능한 값이다** —
+한글 전용 예산선을 따로 두거나 (b)를 파이프라인에 넣는 것이 다음 판의 일이다.
+
+### 기존 16종에 남아 있는 것 (이번에 고치지 않았다)
+
+`showcase-audit.mjs` 를 19종 전체에 돌린 결과 신규 3종은 12/12 통과, **기존 16종에서 70건**이
+나왔다. 이번 작업의 범위(신규 3종)를 넘으므로 고치지 않고 목록만 남긴다.
+
+- **대비 미달** — `overtone-sound` 의 `.work-meta` 13px 모노 3.57:1, `synapse-bci` 의 11~12px 캡션 3.84~3.98:1, `thursday-flowers` 의 `.visit-mark` **1.33:1**(크림 #DDD7CA 글자가 크림 #F8F6F0 배경 위에 있다. 장식용 세로쓰기 표시지만 사실상 안 보인다)
+- **히어로 헤드라인 줄 수 초과** — `pulsegate` 320px 에서 4줄 / 1440px 에서 3줄, `synapse-bci` 3줄 (카운트 규칙 상한 2줄)
+
+전부 `node tools/showcase-audit.mjs <slug>` 로 재현된다.