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>` 로 재현된다.

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

@@ -0,0 +1,545 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>RFS — 실시간 유체 시뮬레이터 · 데이터센터 열관리 GPU 엔진</title>
+    <meta
+      name="description"
+      content="GPU Compute Shader 위에서 도는 δ-SPH 엔진. 파티클 100,000개를 60 FPS 로 계산해 서버랙 발열과 항온항습기 냉각을 실시간으로 반영한다. 메시 재생성 없이 설비 배치를 그 자리에서 검증한다."
+    />
+    <meta property="og:title" content="RFS — 실시간 유체 시뮬레이터" />
+    <meta
+      property="og:description"
+      content="설비를 옮기면 유동이 그 자리에서 바뀐다. 데이터센터 열관리를 위한 실시간 GPU 유체 시뮬레이션 엔진."
+    />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#0e1114" />
+
+    <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/main.css" />
+    <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"
+    />
+  </head>
+
+  <body>
+    <a class="skip-link" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#top">
+          <span class="wordmark-mark" aria-hidden="true">
+            <svg viewBox="0 0 28 20" role="presentation" focusable="false">
+              <path d="M2 13c3.5-5.5 7-1 10.5-5S21 5 26 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+              <path d="M2 18c3.5-5.5 7-1 10.5-5S21 10 26 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5" />
+            </svg>
+          </span>
+          <span class="wordmark-text">RFS</span>
+        </a>
+
+        <nav class="nav" aria-label="주요 섹션">
+          <a href="#solver">솔버</a>
+          <a href="#equipment">장비</a>
+          <a href="#visualization">시각화</a>
+          <a href="#adopt">도입</a>
+        </nav>
+
+        <p class="head-meta mono">v0.13.0</p>
+      </div>
+    </header>
+
+    <main id="main">
+      <!-- ══════════════════════════════════════════════════════════
+           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">
+            메시를 다시<br />
+            만들지 않는다
+          </h1>
+          <p class="hero-lead">
+            설비를 옮기면 유동이 그 자리에서 바뀐다. 데이터센터 열관리를 위한 실시간 GPU 유체
+            시뮬레이터.
+          </p>
+
+          <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>
+            <div class="ctl">
+              <div class="ctl-head">
+                <label for="ctlSupply">FWU 급기량</label>
+                <output class="mono" id="outSupply" for="ctlSupply">65%</output>
+              </div>
+              <input type="range" id="ctlSupply" min="0" max="100" step="5" value="65" />
+            </div>
+          </div>
+
+          <p class="hero-note">
+            위 화면은 브라우저에서 도는 <strong>2D 축소판</strong>이다. 슬라이더를 움직이거나 화면을
+            문지르면 유동이 즉시 반응한다. 실물 RFS 는 Unity 6.4 위에서 3D δ-SPH 를 돌린다 —
+            파티클 100,000개, 60 FPS.
+          </p>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           2 · 문제 — 왜 기존 CFD 로는 안 되는가
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-problem" id="problem" aria-labelledby="problemHeading">
+        <div class="wrap split">
+          <div class="split-lead">
+            <h2 id="problemHeading">
+              해가 나올 즈음에는<br />이미 다른 결정을 내린 뒤다
+            </h2>
+          </div>
+          <div class="split-body">
+            <p>
+              범용 CFD 도구는 시뮬레이션 한 건에 수 시간에서 수 일이 걸린다. 랙 한 대를 옮길 때마다
+              메시를 다시 만들고 처음부터 다시 풀어야 하므로, 운영 중에 답을 얻는 용도로는 쓰이지
+              않는다. 그래서 현장의 배치 변경은 대개 계산이 아니라 경험으로 결정된다.
+            </p>
+            <p>
+              RFS 는 정확도의 상한을 낮추는 대신 <strong>회신 시간</strong>을 바꾼 도구다.
+              발열량을 올리고, 급기 밸브를 조이고, 랙을 한 칸 옮기는 조작이 같은 화면 안에서
+              유동에 반영된다. 검증할 것이 "결과 파일"이 아니라 "지금 보고 있는 장면"이 된다.
+            </p>
+            <dl class="contrast">
+              <div>
+                <dt>범용 CFD 도구</dt>
+                <dd>배치를 바꾸면 메시 재생성 → 재계산. 한 건에 수 시간~수 일</dd>
+              </div>
+              <div>
+                <dt>RFS</dt>
+                <dd>배치·발열·제어 변경이 같은 세션 안에서 유동에 반영된다</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           3 · 솔버 — 암실. 사양을 숨기지 않는다
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-dark section-solver" id="solver" aria-labelledby="solverHeading">
+        <div class="wrap">
+          <p class="eyebrow">유체 엔진</p>
+          <h2 id="solverHeading">GPU Compute Shader 위의 δ-SPH</h2>
+          <p class="section-lead">
+            격자를 깔지 않는다. 공기를 입자로 놓고 이웃 입자끼리 밀도·압력·열을 주고받게 한다.
+            벽이 움직여도 격자를 다시 만들 일이 없다 — 실시간이 가능한 이유가 여기에 있다.
+          </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>
+            </li>
+            <li>
+              <p class="spec-name">상태방정식</p>
+              <p class="spec-value">Tait</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>
+            </li>
+            <li>
+              <p class="spec-name">시간 적분</p>
+              <p class="spec-value">CFL 적응 서브스텝</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>
+            </li>
+            <li>
+              <p class="spec-name">열·습도</p>
+              <p class="spec-value">입자 간 전도 + 부력</p>
+              <p class="spec-note">습공기 밀도 보정을 포함한다</p>
+            </li>
+            <li>
+              <p class="spec-name">주기 경계</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>
+            </li>
+          </ul>
+
+          <div class="figures">
+            <figure>
+              <p class="fig-num mono">01</p>
+              <p class="fig-title">GPU 커널</p>
+              <p class="fig-val mono">53<span>+</span></p>
+              <p class="fig-note">Compute Shader 10개 · HLSL 67개로 분할</p>
+            </figure>
+            <figure>
+              <p class="fig-num mono">02</p>
+              <p class="fig-title">파티클</p>
+              <p class="fig-val mono">100,000</p>
+              <p class="fig-note">최대 512,000. 60 FPS 안정 구간 기준</p>
+            </figure>
+            <figure>
+              <p class="fig-num mono">03</p>
+              <p class="fig-title">파티클 1개의 크기</p>
+              <p class="fig-val mono">20<span>B</span></p>
+              <p class="fig-note">AoS 를 SoA 6개 버퍼로 갈라 얻은 값</p>
+            </figure>
+            <figure>
+              <p class="fig-num mono">04</p>
+              <p class="fig-title">테스트</p>
+              <p class="fig-val mono">2,000<span>+</span></p>
+              <p class="fig-note">499개 파일 · EditMode · PlayMode · Performance</p>
+            </figure>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           4 · 장비 — 라이트. 이 제품이 아는 물건들
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-equipment" id="equipment" aria-labelledby="equipHeading">
+        <div class="wrap">
+          <h2 id="equipHeading">전산실에 있는 물건을 그대로 안다</h2>
+          <p class="section-lead">
+            유동만 푸는 것으로는 답이 안 나온다. 열을 만드는 것과 식히는 것이 각자의 제어 논리를
+            가지고 장 안에 들어가 있어야 배치 변경이 의미를 갖는다.
+          </p>
+
+          <div class="equip-list">
+            <article>
+              <h3>항온항습기 <span class="tag mono">FWU</span></h3>
+              <p>
+                PID 자동 제어로 목표 온도를 좇는다. 열교환은 ε-NTU 로 계산하고,
+                프리쿨링·쿨링 밸브와 댐퍼 모드를 각각 조작할 수 있다.
+              </p>
+            </article>
+            <article>
+              <h3>서버랙</h3>
+              <p>
+                CFM 기반으로 통과 공기에 열을 싣는다. 동적 전력 프로파일 5종을 갖고 있고,
+                장애 상황을 만들어 그때 열이 어디로 가는지 볼 수 있다.
+              </p>
+            </article>
+            <article>
+              <h3>팬 · 댐퍼 · 냉각코일</h3>
+              <p>
+                듀얼 원뿔 존 모델로 GPU 파티클 물리에 직접 개입한다.
+                후처리로 그린 화살표가 아니라 실제로 입자를 민다.
+              </p>
+            </article>
+            <article>
+              <h3>온도계</h3>
+              <p>
+                물리 기반 센서 응답 특성을 갖는다. 값이 즉시 튀지 않고 실제 계기처럼 따라온다.
+                Cool Zone 과 Hot Zone 을 자동으로 분류한다.
+              </p>
+            </article>
+            <article>
+              <h3>급기구 · 배기구</h3>
+              <p>
+                CFD inlet / outlet 패턴을 따른다. 경계에 걸린 파티클을 자동으로 재배치해
+                유입·유출이 끊기지 않게 한다.
+              </p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           5 · 시각화 — 암실. 실제 렌더를 그대로 싣는다
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-dark section-vis" id="visualization" aria-labelledby="visHeading">
+        <div class="wrap">
+          <p class="eyebrow">보이는 방식</p>
+          <h2 id="visHeading">읽는 방법을 네 가지로 나눈다</h2>
+
+          <div class="vis-layout">
+            <ol class="vis-list">
+              <li>
+                <h3>파티클</h3>
+                <p>온도로 색을 매핑하고 발광과 LOD 를 건다. 공기가 어디서 데워지는지 그대로 보인다.</p>
+              </li>
+              <li>
+                <h3>트레일</h3>
+                <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> 키로 축을 바꾼다.
+                </p>
+              </li>
+              <li>
+                <h3>벡터 필드</h3>
+                <p>화살표 글리프와 스트림라인을 GPU 인스턴싱으로 띄운다. 방향과 세기를 함께 읽는다.</p>
+              </li>
+            </ol>
+
+            <div class="vis-shots">
+              <figure>
+                <img
+                  src="./assets/sph-topview.webp"
+                  width="689"
+                  height="680"
+                  loading="lazy"
+                  decoding="async"
+                  alt="RFS 상면 뷰 — 랙 상부에서 데워진 입자가 초록으로 퍼지고 주변 저온 입자는 청록으로 남는다"
+                />
+                <figcaption>상면 · 랙 상부의 열기둥</figcaption>
+              </figure>
+              <figure>
+                <img
+                  src="./assets/sph-sideview.webp"
+                  width="691"
+                  height="437"
+                  loading="lazy"
+                  decoding="async"
+                  alt="RFS 측면 뷰 — 랙을 통과하며 데워진 공기가 오른쪽으로 밀려 나가는 단면"
+                />
+                <figcaption>측면 · 랙을 통과한 공기</figcaption>
+              </figure>
+              <p class="shots-note">
+                두 장 모두 RFS 실물의 파티클 뷰다. 저온이 청록, 고온이 초록이다 —
+                이 페이지 첫 화면의 색도 같은 규칙을 쓴다.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           6 · 에디터 — 라이트
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-editor" id="editor" aria-labelledby="editorHeading">
+        <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">
+              DirectCompute 를 쓰므로 NVIDIA GPU 를 권장한다. 아래는 개발 저장소가 명시한 값
+              그대로다.
+            </p>
+          </div>
+          <div class="split-body">
+            <table class="req">
+              <caption class="sr-only">RFS 시스템 요구사항 — 최소 사양과 권장 사양</caption>
+              <thead>
+                <tr>
+                  <th scope="col">항목</th>
+                  <th scope="col">최소</th>
+                  <th scope="col">권장</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">운영체제</th>
+                  <td>Windows 10 64bit</td>
+                  <td>Windows 11</td>
+                </tr>
+                <tr>
+                  <th scope="row">GPU</th>
+                  <td>GTX 1660 · VRAM 6GB</td>
+                  <td>RTX 3060 이상 · VRAM 8GB 이상</td>
+                </tr>
+                <tr>
+                  <th scope="row">메모리</th>
+                  <td>16 GB</td>
+                  <td>16 GB 이상</td>
+                </tr>
+                <tr>
+                  <th scope="row">엔진</th>
+                  <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>
+        </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 개발 저장소의 README 에 적힌 값을 옮긴 것이다.
+          실측 조건이 붙지 않은 정확도 지표는 싣지 않았다.
+        </p>
+      </div>
+    </footer>
+
+    <script src="./scripts/thermal-field.js" defer></script>
+  </body>
+</html>

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

@@ -0,0 +1,686 @@
+/* ==========================================================================
+   RFS 히어로 — 2D 열유동 데모 (WebGL2)
+
+   무엇인가 / 무엇이 아닌가
+   ------------------------
+   이것은 브라우저에서 도는 **2D 축소판**이다. 실제 RFS 는 Unity 6.4 위에서
+   GPU Compute Shader 로 3D δ-SPH 를 돌린다(파티클 100,000개 / 60 FPS).
+   여기서 파는 것은 성능 수치가 아니라 "설비를 건드리면 유동이 즉시 바뀐다" 는
+   제품의 핵심 주장 하나이고, 그 주장은 2D 로도 정직하게 보일 수 있다.
+   페이지 캡션에 이 사실을 적어 두었다 — 데모가 제품인 척하면 그게 슬롭이다.
+
+   푸는 것
+   -------
+   비압축 Navier–Stokes 를 격자에서 푼다. Stam 의 Stable Fluids 절차다.
+     1) advect   — semi-Lagrangian 이류 (속도·온도)
+     2) buoyancy — 온도 편차에 비례하는 부력 + 설비 소스 주입
+     3) divergence
+     4) pressure — Jacobi 반복
+     5) project  — 압력 기울기를 빼서 발산을 0으로
+   그 위에 파티클을 띄워 속도장을 따라 흐르게 한다. 제품이 입자법(SPH)이므로
+   화면에 보이는 것도 입자여야 한다 — 격자만 칠하면 다른 제품의 그림이 된다.
+
+   설비 두 개가 실제로 장에 개입한다
+     · FWU(항온항습기)  — 왼쪽 아래에서 찬 공기를 수평으로 분사
+     · 서버랙            — 가운데 블록. 통과하는 공기에 열을 싣고 위로 띄운다
+   ========================================================================== */
+
+(() => {
+  "use strict";
+
+  const canvas = document.getElementById("thermalField");
+  if (!canvas) return;
+
+  const shell = canvas.closest("[data-field-shell]");
+  const setState = (s) => shell && shell.setAttribute("data-field-state", s);
+
+  const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+  if (reduced.matches) {
+    setState("static");
+    return;
+  }
+
+  /** @type {WebGL2RenderingContext | null} */
+  const gl = canvas.getContext("webgl2", {
+    alpha: true,
+    antialias: false,
+    depth: false,
+    stencil: false,
+    powerPreference: "low-power",
+    preserveDrawingBuffer: false,
+  });
+
+  if (!gl) {
+    setState("static");
+    return;
+  }
+
+  const floatLinear = gl.getExtension("OES_texture_float_linear");
+  if (!gl.getExtension("EXT_color_buffer_float")) {
+    setState("static");
+    return;
+  }
+
+  /* ── 해상도 예산 ─────────────────────────────────────────────────
+     좁은 화면은 대개 배터리로 돌고 열이 더 난다. 격자와 파티클을 함께 줄인다.
+     하드웨어 코어 수만 보면 요즘 폰이 전부 고사양으로 잡히므로 폭을 같이 본다. */
+  const narrow = window.innerWidth < 760;
+  const lowCore = (navigator.hardwareConcurrency || 8) <= 4;
+  const lite = narrow || lowCore;
+
+  const SIM_W = lite ? 128 : 224;
+  const SIM_H = lite ? 72 : 126;
+  const PARTICLES = lite ? 9000 : 26000;
+  const JACOBI = lite ? 14 : 22;
+  const DPR_CAP = lite ? 1.25 : 1.5;
+
+  /* ── 셰이더 유틸 ──────────────────────────────────────────────── */
+  const VERT_QUAD = `#version 300 es
+    in vec2 aPos;
+    out vec2 vUv;
+    void main() {
+      vUv = aPos * 0.5 + 0.5;
+      gl_Position = vec4(aPos, 0.0, 1.0);
+    }`;
+
+  function compile(type, src) {
+    const sh = gl.createShader(type);
+    gl.shaderSource(sh, src);
+    gl.compileShader(sh);
+    if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+      throw new Error(gl.getShaderInfoLog(sh) || "shader compile failed");
+    }
+    return sh;
+  }
+
+  function program(vsSrc, fsSrc) {
+    const p = gl.createProgram();
+    gl.attachShader(p, compile(gl.VERTEX_SHADER, vsSrc));
+    gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fsSrc));
+    gl.linkProgram(p);
+    if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+      throw new Error(gl.getProgramInfoLog(p) || "program link failed");
+    }
+    const uniforms = {};
+    const n = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < n; i++) {
+      const name = gl.getActiveUniform(p, i).name.replace(/\[0\]$/, "");
+      uniforms[name] = gl.getUniformLocation(p, name);
+    }
+    return { p, u: uniforms };
+  }
+
+  /* ── 설비 배치는 셰이더와 JS 가 같은 값을 봐야 한다 ── */
+  const RACK = { x0: 0.44, x1: 0.56, y0: 0.12, y1: 0.62 };
+  const FWU = { x: 0.055, y0: 0.1, y1: 0.34 };
+
+  const GLSL_LAYOUT = `
+    const vec4 RACK = vec4(${RACK.x0}, ${RACK.x1}, ${RACK.y0}, ${RACK.y1});
+    const vec3 FWU  = vec3(${FWU.x}, ${FWU.y0}, ${FWU.y1});
+    bool inRack(vec2 p) {
+      return p.x > RACK.x && p.x < RACK.y && p.y > RACK.z && p.y < RACK.w;
+    }`;
+
+  /* 1) 이류 — 역추적 후 쌍선형 보간 */
+  const FS_ADVECT = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    out vec4 outColor;
+    uniform sampler2D uVel;
+    uniform sampler2D uSrc;
+    uniform vec2 uTexel;
+    uniform float uDt;
+    uniform float uDissipate;
+    ${GLSL_LAYOUT}
+    void main() {
+      vec2 v = texture(uVel, vUv).xy;
+      vec2 back = vUv - uDt * v * uTexel;
+      back = clamp(back, uTexel * 0.5, 1.0 - uTexel * 0.5);
+      outColor = texture(uSrc, back) * uDissipate;
+    }`;
+
+  /* 2) 힘 — 부력 + 설비 소스. 랙 안은 발열, FWU 는 찬 공기를 분사.
+     uDt 는 **초**다. 속도의 단위는 초당 격자 셀이다. 둘을 프레임 단위와 섞으면
+     화면 주사율에 따라 물리가 달라진다 — 한 번 그렇게 짰다가 파티클이 0.2초 만에
+     사라졌다. 단위를 초로 못박은 것이 그 수리다. */
+  const FS_FORCE = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    layout(location = 0) out vec4 outVel;
+    uniform sampler2D uVel;
+    uniform sampler2D uTemp;
+    uniform float uDt;
+    uniform float uTime;
+    uniform float uLoad;     // 랙 부하 0..1
+    uniform float uSupply;   // FWU 급기 0..1
+    uniform vec2  uPointer;
+    uniform float uPointerOn;
+    ${GLSL_LAYOUT}
+    void main() {
+      vec2  v = texture(uVel, vUv).xy;
+      float t = texture(uTemp, vUv).r;
+
+      // 부력 — 주변보다 뜨거우면 뜬다
+      v.y += uDt * t * 190.0 * (0.7 + 0.3 * uLoad);
+
+      // FWU 급기: 왼쪽 벽에서 수평 제트
+      float band = smoothstep(FWU.y - 0.015, FWU.y + 0.03, vUv.y)
+                 * (1.0 - smoothstep(FWU.z - 0.03, FWU.z + 0.015, vUv.y));
+      float jet  = band * (1.0 - smoothstep(FWU.x, FWU.x + 0.2, vUv.x));
+      v.x += uDt * jet * 300.0 * uSupply;
+      v.y += uDt * jet * sin(uTime * 0.8 + vUv.y * 20.0) * 26.0;
+
+      // 서버랙: 전면(왼쪽)에서 빨아들여 배면(오른쪽)으로 밀어낸다.
+      // 위로 뿜게 두면 냉기와 열기가 랙을 사이에 두고 갈라지지 않아
+      // '핫 아일 / 콜드 아일' 이라는 이 업계의 기본 그림이 화면에 안 나온다.
+      if (inRack(vUv)) {
+        v.x += uDt * 240.0 * uLoad;
+        v.y += uDt * 45.0 * uLoad;
+      }
+
+      // 포인터 교란 — 손으로 유동을 흔들 수 있어야 '실시간'이 증명된다
+      if (uPointerOn > 0.5) {
+        vec2 d = vUv - uPointer;
+        float f = exp(-dot(d, d) * 520.0);
+        v += uDt * normalize(d + 1e-5) * f * 900.0;
+      }
+
+      v *= 1.0 - min(0.45, uDt * 0.5);
+      outVel = vec4(clamp(v, -260.0, 260.0), 0.0, 1.0);
+    }`;
+
+  /* 온도 소스 — 랙은 데우고 FWU 는 식힌다 */
+  const FS_TEMP_SRC = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    out vec4 outColor;
+    uniform sampler2D uTemp;
+    uniform float uDt;
+    uniform float uLoad;
+    uniform float uSupply;
+    ${GLSL_LAYOUT}
+    void main() {
+      float t = texture(uTemp, vUv).r;
+      if (inRack(vUv)) {
+        t += uDt * 2.4 * uLoad;
+      }
+      float band = smoothstep(FWU.y - 0.015, FWU.y + 0.03, vUv.y)
+                 * (1.0 - smoothstep(FWU.z - 0.03, FWU.z + 0.015, vUv.y));
+      float jet  = band * (1.0 - smoothstep(FWU.x, FWU.x + 0.16, vUv.x));
+      t -= uDt * jet * 3.0 * uSupply;
+      // 천장 배기
+      t -= uDt * smoothstep(0.86, 1.0, vUv.y) * 0.9;
+      outColor = vec4(clamp(t, -0.3, 1.1), 0.0, 0.0, 1.0);
+    }`;
+
+  const FS_DIVERGENCE = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    out vec4 outColor;
+    uniform sampler2D uVel;
+    uniform vec2 uTexel;
+    void main() {
+      float l = texture(uVel, vUv - vec2(uTexel.x, 0.0)).x;
+      float r = texture(uVel, vUv + vec2(uTexel.x, 0.0)).x;
+      float b = texture(uVel, vUv - vec2(0.0, uTexel.y)).y;
+      float t = texture(uVel, vUv + vec2(0.0, uTexel.y)).y;
+      outColor = vec4(0.5 * (r - l + t - b), 0.0, 0.0, 1.0);
+    }`;
+
+  const FS_JACOBI = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    out vec4 outColor;
+    uniform sampler2D uPressure;
+    uniform sampler2D uDivergence;
+    uniform vec2 uTexel;
+    void main() {
+      float l = texture(uPressure, vUv - vec2(uTexel.x, 0.0)).r;
+      float r = texture(uPressure, vUv + vec2(uTexel.x, 0.0)).r;
+      float b = texture(uPressure, vUv - vec2(0.0, uTexel.y)).r;
+      float t = texture(uPressure, vUv + vec2(0.0, uTexel.y)).r;
+      float d = texture(uDivergence, vUv).r;
+      outColor = vec4((l + r + b + t - d) * 0.25, 0.0, 0.0, 1.0);
+    }`;
+
+  const FS_PROJECT = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    out vec4 outColor;
+    uniform sampler2D uPressure;
+    uniform sampler2D uVel;
+    uniform vec2 uTexel;
+    ${GLSL_LAYOUT}
+    void main() {
+      float l = texture(uPressure, vUv - vec2(uTexel.x, 0.0)).r;
+      float r = texture(uPressure, vUv + vec2(uTexel.x, 0.0)).r;
+      float b = texture(uPressure, vUv - vec2(0.0, uTexel.y)).r;
+      float t = texture(uPressure, vUv + vec2(0.0, uTexel.y)).r;
+      vec2 v = texture(uVel, vUv).xy - vec2(r - l, t - b);
+
+      // 벽면 — 미끄럼 없음
+      if (vUv.x < uTexel.x * 1.5 || vUv.x > 1.0 - uTexel.x * 1.5) v.x = 0.0;
+      if (vUv.y < uTexel.y * 1.5) v.y = max(v.y, 0.0);
+      if (vUv.y > 1.0 - uTexel.y * 1.5) v.y = min(v.y, 0.0);
+      outColor = vec4(v, 0.0, 1.0);
+    }`;
+
+  /* 파티클 — 위치 텍스처를 속도장으로 갱신. 벗어나면 급기구로 되돌린다 */
+  const FS_PARTICLE_STEP = `#version 300 es
+    precision highp float;
+    in vec2 vUv;
+    out vec4 outColor;
+    uniform sampler2D uPos;
+    uniform sampler2D uVel;
+    uniform vec2 uTexel;
+    uniform float uDt;
+    uniform float uTime;
+    ${GLSL_LAYOUT}
+    float hash(vec2 p) {
+      return fract(sin(dot(p, vec2(41.31, 289.7))) * 43758.5453);
+    }
+    void main() {
+      vec4 s = texture(uPos, vUv);
+      vec2 p = s.xy;
+      float age = s.z;
+
+      // 속도는 초당 격자 셀이므로 텍셀 크기를 곱해 정규화 좌표로 옮긴다
+      vec2 v = texture(uVel, p).xy;
+      p += v * uDt * uTexel;
+      age -= uDt * 0.17;   // 수명 약 4~9초
+
+      bool gone = age <= 0.0 || p.x < 0.004 || p.x > 0.996 || p.y < 0.004 || p.y > 0.996;
+      if (gone) {
+        float a = hash(vUv + uTime * 0.37);
+        float b = hash(vUv.yx + uTime * 0.71);
+        float c = hash(vUv * 3.1 + uTime * 0.19);
+        // 전부 급기구에서만 다시 나오면 같은 경로를 따라가 실 한 가닥이 된다.
+        // 방이 아니라 소용돌이 그림이 되는 원인이 이것이었다.
+        // 절반만 급기구에서 내보내고 나머지는 방 안 아무 데서나 되살린다.
+        if (c < 0.45) {
+          p = vec2(FWU.x + a * 0.035, mix(FWU.y, FWU.z, b));
+        } else {
+          p = vec2(0.03 + a * 0.94, 0.03 + b * 0.94);
+        }
+        age = 0.35 + c * 1.35;
+      }
+      outColor = vec4(p, age, 1.0);
+    }`;
+
+  const VS_PARTICLE_DRAW = `#version 300 es
+    precision highp float;
+    uniform sampler2D uPos;
+    uniform sampler2D uTemp;
+    uniform vec2 uPosSize;
+    uniform float uPointScale;
+    out float vTemp;
+    out float vAge;
+    void main() {
+      int id = gl_VertexID;
+      int w = int(uPosSize.x);
+      vec2 uv = (vec2(float(id % w), float(id / w)) + 0.5) / uPosSize;
+      vec4 s = texture(uPos, uv);
+      vTemp = texture(uTemp, s.xy).r;
+      vAge = clamp(s.z, 0.0, 1.0);
+      gl_Position = vec4(s.xy * 2.0 - 1.0, 0.0, 1.0);
+      gl_PointSize = uPointScale * (0.85 + 0.5 * vTemp);
+    }`;
+
+  const FS_PARTICLE_DRAW = `#version 300 es
+    precision highp float;
+    in float vTemp;
+    in float vAge;
+    out vec4 outColor;
+    uniform vec3 uCold;
+    uniform vec3 uMid;
+    uniform vec3 uWarm;
+    uniform vec3 uHot;
+    void main() {
+      vec2 d = gl_PointCoord - 0.5;
+      float r = dot(d, d);
+      if (r > 0.25) discard;
+      float soft = smoothstep(0.25, 0.02, r);
+
+      float t = clamp(vTemp * 1.15 + 0.16, 0.0, 1.0);
+      vec3 c = t < 0.34
+        ? mix(uCold, uMid, t / 0.34)
+        : (t < 0.67 ? mix(uMid, uWarm, (t - 0.34) / 0.33)
+                    : mix(uWarm, uHot, (t - 0.67) / 0.33));
+
+      float a = soft * smoothstep(0.0, 0.3, vAge) * (0.5 + 0.45 * t);
+      outColor = vec4(c * a, a);
+    }`;
+
+  /* ── 자원 ─────────────────────────────────────────────────────── */
+  let progs, quadVao, emptyVao, fbo;
+  const tex = {};
+
+  function makeTex(w, h, internal, format, type, data = null) {
+    const t = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, t);
+    gl.texImage2D(gl.TEXTURE_2D, 0, internal, w, h, 0, format, type, data);
+    const filter = floatLinear ? gl.LINEAR : gl.NEAREST;
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    return { t, w, h };
+  }
+
+  function pair(w, h, internal, format, type, data) {
+    return { read: makeTex(w, h, internal, format, type, data), write: makeTex(w, h, internal, format, type, data) };
+  }
+
+  const swap = (p) => {
+    const tmp = p.read;
+    p.read = p.write;
+    p.write = tmp;
+  };
+
+  function bindTarget(target) {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, target.t, 0);
+    gl.viewport(0, 0, target.w, target.h);
+  }
+
+  function useTex(unit, texture, loc) {
+    gl.activeTexture(gl.TEXTURE0 + unit);
+    gl.bindTexture(gl.TEXTURE_2D, texture.t);
+    gl.uniform1i(loc, unit);
+  }
+
+  const drawQuad = () => {
+    gl.bindVertexArray(quadVao);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  };
+
+  const PART_W = 256;
+  const PART_H = Math.ceil(PARTICLES / PART_W);
+  const PART_N = PART_W * PART_H;
+
+  function init() {
+    progs = {
+      advect: program(VERT_QUAD, FS_ADVECT),
+      force: program(VERT_QUAD, FS_FORCE),
+      tempSrc: program(VERT_QUAD, FS_TEMP_SRC),
+      diverge: program(VERT_QUAD, FS_DIVERGENCE),
+      jacobi: program(VERT_QUAD, FS_JACOBI),
+      project: program(VERT_QUAD, FS_PROJECT),
+      pstep: program(VERT_QUAD, FS_PARTICLE_STEP),
+      pdraw: program(VS_PARTICLE_DRAW, FS_PARTICLE_DRAW),
+    };
+
+    // 화면을 덮는 삼각형 하나. 사각형 두 장보다 싸다
+    quadVao = gl.createVertexArray();
+    gl.bindVertexArray(quadVao);
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+
+    emptyVao = gl.createVertexArray();
+    fbo = gl.createFramebuffer();
+
+    tex.vel = pair(SIM_W, SIM_H, gl.RG16F, gl.RG, gl.HALF_FLOAT);
+    tex.temp = pair(SIM_W, SIM_H, gl.R16F, gl.RED, gl.HALF_FLOAT);
+    tex.pressure = pair(SIM_W, SIM_H, gl.R16F, gl.RED, gl.HALF_FLOAT);
+    tex.divergence = makeTex(SIM_W, SIM_H, gl.R16F, gl.RED, gl.HALF_FLOAT);
+
+    // 처음부터 방 전체에 흩어 둔다. 급기구에만 몰아 두면 첫 몇 초 동안
+    // 화면이 비어 있고, 그 사이에 사람들은 스크롤해 버린다
+    const seed = new Float32Array(PART_N * 4);
+    for (let i = 0; i < PART_N; i++) {
+      const atInlet = i % 5 === 0;
+      seed[i * 4] = atInlet ? FWU.x + Math.random() * 0.04 : 0.02 + Math.random() * 0.96;
+      seed[i * 4 + 1] = atInlet
+        ? FWU.y0 + Math.random() * (FWU.y1 - FWU.y0)
+        : 0.02 + Math.random() * 0.96;
+      seed[i * 4 + 2] = 0.25 + Math.random() * 1.4;
+      seed[i * 4 + 3] = 1;
+    }
+    tex.part = pair(PART_W, PART_H, gl.RGBA32F, gl.RGBA, gl.FLOAT, seed);
+
+    // 파티클 위치 텍스처는 정확히 읽혀야 한다 — 보간하면 이웃 입자와 섞인다
+    for (const s of [tex.part.read, tex.part.write]) {
+      gl.bindTexture(gl.TEXTURE_2D, s.t);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    }
+  }
+
+  /* ── 조작 입력 ────────────────────────────────────────────────── */
+  const controls = {
+    load: Number(document.getElementById("ctlLoad")?.value ?? 70) / 100,
+    supply: Number(document.getElementById("ctlSupply")?.value ?? 65) / 100,
+  };
+
+  function bindSlider(id, key, outId, fmt) {
+    const el = document.getElementById(id);
+    const out = document.getElementById(outId);
+    if (!el) return;
+    const sync = () => {
+      controls[key] = Number(el.value) / 100;
+      if (out) out.textContent = fmt(Number(el.value));
+    };
+    el.addEventListener("input", sync);
+    sync();
+  }
+
+  bindSlider("ctlLoad", "load", "outLoad", (v) => `${v}%`);
+  bindSlider("ctlSupply", "supply", "outSupply", (v) => `${v}%`);
+
+  const pointer = { x: 0, y: 0, on: 0 };
+  const onMove = (e) => {
+    const r = canvas.getBoundingClientRect();
+    const p = e.touches ? e.touches[0] : e;
+    pointer.x = (p.clientX - r.left) / r.width;
+    pointer.y = 1 - (p.clientY - r.top) / r.height;
+    pointer.on = 1;
+  };
+  canvas.addEventListener("pointermove", onMove, { passive: true });
+  canvas.addEventListener("pointerleave", () => (pointer.on = 0), { passive: true });
+
+  /* ── 렌더 루프 ────────────────────────────────────────────────── */
+  let running = false;
+  let raf = 0;
+  let last = 0;
+  const texel = [1 / SIM_W, 1 / SIM_H];
+
+  const cssVar = (name, fallback) => {
+    const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+    return v || fallback;
+  };
+  const hexToRgb = (hex) => {
+    const h = hex.replace("#", "");
+    const n = parseInt(h.length === 3 ? h.replace(/./g, "$&$&") : h, 16);
+    return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+  };
+  const ramp = {
+    cold: hexToRgb(cssVar("--temp-cold", "#2f7d9e")),
+    mid: hexToRgb(cssVar("--temp-mid", "#39a894")),
+    warm: hexToRgb(cssVar("--temp-warm", "#8cc152")),
+    hot: hexToRgb(cssVar("--temp-hot", "#d7d64a")),
+  };
+
+  function resize() {
+    const r = canvas.getBoundingClientRect();
+    const dpr = Math.min(window.devicePixelRatio || 1, DPR_CAP);
+    const w = Math.max(1, Math.round(r.width * dpr));
+    const h = Math.max(1, Math.round(r.height * dpr));
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+    }
+  }
+
+  function step(dt) {
+    gl.disable(gl.BLEND);
+
+    // 감쇠는 프레임이 아니라 시간에 걸려야 한다. 60fps 기준값을 dt 로 환산한다
+    const decay = (per60) => Math.pow(per60, dt * 60);
+
+    // 1) 속도 이류
+    gl.useProgram(progs.advect.p);
+    gl.uniform2f(progs.advect.u.uTexel, texel[0], texel[1]);
+    gl.uniform1f(progs.advect.u.uDt, dt);
+    gl.uniform1f(progs.advect.u.uDissipate, decay(0.999));
+    useTex(0, tex.vel.read, progs.advect.u.uVel);
+    useTex(1, tex.vel.read, progs.advect.u.uSrc);
+    bindTarget(tex.vel.write);
+    drawQuad();
+    swap(tex.vel);
+
+    // 2) 온도 이류
+    gl.useProgram(progs.advect.p);
+    gl.uniform1f(progs.advect.u.uDissipate, decay(0.9975));
+    useTex(0, tex.vel.read, progs.advect.u.uVel);
+    useTex(1, tex.temp.read, progs.advect.u.uSrc);
+    bindTarget(tex.temp.write);
+    drawQuad();
+    swap(tex.temp);
+
+    // 3) 온도 소스
+    gl.useProgram(progs.tempSrc.p);
+    gl.uniform1f(progs.tempSrc.u.uDt, dt);
+    gl.uniform1f(progs.tempSrc.u.uLoad, controls.load);
+    gl.uniform1f(progs.tempSrc.u.uSupply, controls.supply);
+    useTex(0, tex.temp.read, progs.tempSrc.u.uTemp);
+    bindTarget(tex.temp.write);
+    drawQuad();
+    swap(tex.temp);
+
+    // 4) 부력 + 설비 힘
+    gl.useProgram(progs.force.p);
+    gl.uniform1f(progs.force.u.uDt, dt);
+    gl.uniform1f(progs.force.u.uTime, last * 0.001);
+    gl.uniform1f(progs.force.u.uLoad, controls.load);
+    gl.uniform1f(progs.force.u.uSupply, controls.supply);
+    gl.uniform2f(progs.force.u.uPointer, pointer.x, pointer.y);
+    gl.uniform1f(progs.force.u.uPointerOn, pointer.on);
+    useTex(0, tex.vel.read, progs.force.u.uVel);
+    useTex(1, tex.temp.read, progs.force.u.uTemp);
+    bindTarget(tex.vel.write);
+    drawQuad();
+    swap(tex.vel);
+
+    // 5) 발산
+    gl.useProgram(progs.diverge.p);
+    gl.uniform2f(progs.diverge.u.uTexel, texel[0], texel[1]);
+    useTex(0, tex.vel.read, progs.diverge.u.uVel);
+    bindTarget(tex.divergence);
+    drawQuad();
+
+    // 6) 압력 — Jacobi
+    gl.useProgram(progs.jacobi.p);
+    gl.uniform2f(progs.jacobi.u.uTexel, texel[0], texel[1]);
+    useTex(1, tex.divergence, progs.jacobi.u.uDivergence);
+    for (let i = 0; i < JACOBI; i++) {
+      useTex(0, tex.pressure.read, progs.jacobi.u.uPressure);
+      bindTarget(tex.pressure.write);
+      drawQuad();
+      swap(tex.pressure);
+    }
+
+    // 7) 투영
+    gl.useProgram(progs.project.p);
+    gl.uniform2f(progs.project.u.uTexel, texel[0], texel[1]);
+    useTex(0, tex.pressure.read, progs.project.u.uPressure);
+    useTex(1, tex.vel.read, progs.project.u.uVel);
+    bindTarget(tex.vel.write);
+    drawQuad();
+    swap(tex.vel);
+
+    // 8) 파티클 전진
+    gl.useProgram(progs.pstep.p);
+    gl.uniform2f(progs.pstep.u.uTexel, texel[0], texel[1]);
+    gl.uniform1f(progs.pstep.u.uDt, dt);
+    gl.uniform1f(progs.pstep.u.uTime, last * 0.001);
+    useTex(0, tex.part.read, progs.pstep.u.uPos);
+    useTex(1, tex.vel.read, progs.pstep.u.uVel);
+    bindTarget(tex.part.write);
+    drawQuad();
+    swap(tex.part);
+  }
+
+  function draw() {
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.clearColor(0, 0, 0, 0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+    gl.useProgram(progs.pdraw.p);
+    useTex(0, tex.part.read, progs.pdraw.u.uPos);
+    useTex(1, tex.temp.read, progs.pdraw.u.uTemp);
+    gl.uniform2f(progs.pdraw.u.uPosSize, PART_W, PART_H);
+    gl.uniform1f(progs.pdraw.u.uPointScale, Math.max(1.6, canvas.width / 620));
+    gl.uniform3fv(progs.pdraw.u.uCold, ramp.cold);
+    gl.uniform3fv(progs.pdraw.u.uMid, ramp.mid);
+    gl.uniform3fv(progs.pdraw.u.uWarm, ramp.warm);
+    gl.uniform3fv(progs.pdraw.u.uHot, ramp.hot);
+
+    gl.bindVertexArray(emptyVao);
+    gl.drawArrays(gl.POINTS, 0, PARTICLES);
+    gl.bindVertexArray(null);
+  }
+
+  function frame(now) {
+    if (!running) return;
+    // dt 는 초다. 탭이 뒤로 갔다 오면 한 프레임이 몇 초짜리가 되므로 상한을 둔다
+    const dt = Math.min(0.033, Math.max(0.004, (now - last) / 1000 || 0.016));
+    last = now;
+    resize();
+    step(dt);
+    draw();
+    raf = requestAnimationFrame(frame);
+  }
+
+  function start() {
+    if (running) return;
+    running = true;
+    last = performance.now();
+    raf = requestAnimationFrame(frame);
+    setState("live");
+  }
+
+  function stop() {
+    running = false;
+    cancelAnimationFrame(raf);
+  }
+
+  try {
+    init();
+  } catch (err) {
+    setState("static");
+    return;
+  }
+
+  // 화면 밖이면 그리지 않는다. 탭이 숨어도 마찬가지다
+  const io = new IntersectionObserver(
+    (entries) => {
+      for (const e of entries) (e.isIntersecting ? start : stop)();
+    },
+    { threshold: 0.02 },
+  );
+  io.observe(canvas);
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) stop();
+    else if (canvas.getBoundingClientRect().top < window.innerHeight) start();
+  });
+
+  // 실행 중에 접근성 설정이 바뀌면 즉시 따른다
+  reduced.addEventListener("change", (e) => {
+    if (e.matches) {
+      stop();
+      setState("static");
+      io.disconnect();
+    }
+  });
+
+  new ResizeObserver(resize).observe(canvas);
+})();

apps/site/public/work/rfs-cfd/styles/tokens.css

@@ -0,0 +1,122 @@
+/* ==========================================================================
+   RFS — Realtime Fluid Simulator · 디자인 토큰 SSOT
+   실시간 GPU 유체 시뮬레이션 엔진 (데이터센터 열관리) 프로모션 사이트
+
+   컨셉 : 암실과 사양서 — 유동이 있는 곳은 어둡고, 읽는 곳은 밝다
+   프리셋: darkroom-spec (신규 정의. dark-instrument 를 쓰지 않은 이유는 아래)
+   강조색: 계기 청색 1색. 라이트/다크는 규칙으로 정의된 한 쌍이므로 1종으로 센다
+
+   ── 레퍼런스 실측 (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' 류 조어
+
+   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) 이다.
+   그대로 쓰면 '색을 고르지 않았다'는 신호를 그대로 수입하게 되므로, 채도를 낮추고
+   청록 쪽으로 틀어 계기 청색으로 옮겼다. 출발점은 제품의 실제 색이 맞다.
+   ========================================================================== */
+
+:root {
+  /* ── 타이포그래피 스케일 — 5단계 + 스케일 밖 디스플레이 1개 ── */
+  --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) 과 같은 비율이다 */
+
+  --leading-tight: 1.18;
+  --leading-normal: 1.7; /* 한글 본문 하한 1.6 */
+  --leading-loose: 1.85;
+  --measure: 34em; /* 한글 한 줄 25~40자 */
+
+  /* 라틴을 폴백 앞에 두면 라틴까지 한글 폰트로 그려진다 — Pretendard 는 둘 다 좋다 */
+  --font-body: Pretendard, "Pretendard Variable", -apple-system, system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+
+  /* ── 색 · 사양서(라이트) 체제 ── */
+  --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 */
+  --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;
+
+  /* ── 온도 컬러맵 — 캔버스 안에서만 쓰는 데이터 인코딩이다.
+     UI 강조색이 아니므로 강조색 카운트(하드 게이트 2)에서 제외한다.
+     제품 실물의 파티클 렌더가 저온 시안 → 고온 그린이라 그 언어를 따랐다 ── */
+  --temp-cold: #2f7d9e;
+  --temp-mid: #39a894;
+  --temp-warm: #8cc152;
+  --temp-hot: #d7d64a;
+
+  /* ── 형태 — R1·R2 둘 다 radius 0 이 지배한다. 어휘 1종으로 못박는다 ── */
+  --radius: 0;
+
+  /* ── 간격 — 저장소 SSOT 표준 ── */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6rem;
+  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
+
+  --container: 1120px;
+  --container-wide: 1360px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  /* ── 모션 ── */
+  --dur-quick: 160ms;
+  --dur-normal: 420ms;
+  --dur-slow: 900ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+}

apps/site/public/work/saebyeok-cheonggwa/index.html

@@ -0,0 +1,573 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>새벽청과 (曉靑果) — 오늘 새벽 두 시의 값</title>
+    <meta
+      name="description"
+      content="새벽 경매에서 낙찰받아 그날 아침에 보냅니다. 품목마다 산지·등급·당도·규격과 오늘 낙찰가를 그대로 적는 청과 직거래."
+    />
+    <meta property="og:title" content="새벽청과 (曉靑果)" />
+    <meta property="og:description" content="값이 매일 바뀐다는 사실을 첫 화면에 적습니다." />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#16181a" />
+
+    <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/main.css" />
+    <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='%2316181A'/%3E%3Cpath d='M6 20h20' stroke='%237FA8D9' stroke-width='2'/%3E%3Ccircle cx='13' cy='14' r='4.5' fill='none' stroke='%23F3F1EC' stroke-width='2'/%3E%3Cpath d='M13 9.5V7' stroke='%23F3F1EC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip-link" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#top">
+          새벽청과 <span class="wordmark-han" aria-hidden="true">曉靑果</span>
+        </a>
+        <nav class="nav" aria-label="주요 섹션">
+          <a href="#route">오는 길</a>
+          <a href="#grade">고르는 법</a>
+          <a href="#season">제철</a>
+          <a href="#wholesale">납품</a>
+        </nav>
+        <p class="head-meta mono">02:00 경매</p>
+      </div>
+    </header>
+
+    <main id="main">
+      <!-- ══════════════════════════════════════════════════════════
+           1 · 히어로 = 오늘의 판. 새벽 두 시라서 어둡다
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-dark hero" id="top" aria-labelledby="heroHeading">
+        <!-- 새벽 두 시의 시장 통로. 판 뒤에 깔리므로 어둡게, 과일만 색을 갖게 찍었다 -->
+        <img
+          class="hero-bg"
+          src="./assets/dawn-aisle.webp"
+          width="1600"
+          height="900"
+          alt=""
+          aria-hidden="true"
+        />
+        <div class="wrap hero-inner">
+          <p class="hero-stamp mono">
+            <span>오늘 경매</span>
+            <time datetime="2026-08-24T02:00+09:00">08월 24일 02:00</time>
+            <span class="stamp-sep" aria-hidden="true">·</span>
+            <span>하절기 기준</span>
+          </p>
+
+          <h1 id="heroHeading">
+            오늘 새벽<br />
+            두 시의 값
+          </h1>
+          <p class="hero-lead">
+            값은 매일 바뀝니다. 바뀌는 값을 감추고 파는 대신, 오늘 얼마에 받아 왔는지를
+            먼저 적습니다.
+          </p>
+
+          <table class="board">
+            <caption class="sr-only">
+              오늘 낙찰 품목 여섯 가지 — 산지, 등급, 당도, 규격, 낙찰가, 전일 대비
+            </caption>
+            <thead>
+              <tr>
+                <th scope="col">품목</th>
+                <th scope="col">산지</th>
+                <th scope="col" class="c-num">등급</th>
+                <th scope="col" class="c-num">당도</th>
+                <th scope="col" class="c-num">규격</th>
+                <th scope="col" class="c-num">낙찰가</th>
+                <th scope="col" class="c-num">전일 대비</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">백도 복숭아</th>
+                <td data-label="산지">경북 청도</td>
+                <td data-label="등급" class="c-num mono">특</td>
+                <td data-label="당도" class="c-num mono">12.5<span class="unit">Bx</span></td>
+                <td data-label="규격" class="c-num mono">4.5<span class="unit">kg</span></td>
+                <td data-label="낙찰가" class="c-num mono price">38,000</td>
+                <td data-label="전일 대비" class="c-num mono delta up">▲ 2,000</td>
+              </tr>
+              <tr>
+                <th scope="row">샤인머스캣</th>
+                <td data-label="산지">경북 상주</td>
+                <td data-label="등급" class="c-num mono">특</td>
+                <td data-label="당도" class="c-num mono">18.2<span class="unit">Bx</span></td>
+                <td data-label="규격" class="c-num mono">2<span class="unit">kg</span></td>
+                <td data-label="낙찰가" class="c-num mono price">26,500</td>
+                <td data-label="전일 대비" class="c-num mono delta down">▼ 1,500</td>
+              </tr>
+              <tr>
+                <th scope="row">캠벨얼리</th>
+                <td data-label="산지">충북 영동</td>
+                <td data-label="등급" class="c-num mono">상</td>
+                <td data-label="당도" class="c-num mono">15.4<span class="unit">Bx</span></td>
+                <td data-label="규격" class="c-num mono">5<span class="unit">kg</span></td>
+                <td data-label="낙찰가" class="c-num mono price">31,000</td>
+                <td data-label="전일 대비" class="c-num mono delta flat">보합</td>
+              </tr>
+              <tr>
+                <th scope="row">홍로 사과</th>
+                <td data-label="산지">경북 영주</td>
+                <td data-label="등급" class="c-num mono">특</td>
+                <td data-label="당도" class="c-num mono">14.1<span class="unit">Bx</span></td>
+                <td data-label="규격" class="c-num mono">5<span class="unit">kg</span></td>
+                <td data-label="낙찰가" class="c-num mono price">44,000</td>
+                <td data-label="전일 대비" class="c-num mono delta up">▲ 3,500</td>
+              </tr>
+              <tr>
+                <th scope="row">원황 배</th>
+                <td data-label="산지">전남 나주</td>
+                <td data-label="등급" class="c-num mono">상</td>
+                <td data-label="당도" class="c-num mono">12.8<span class="unit">Bx</span></td>
+                <td data-label="규격" class="c-num mono">7.5<span class="unit">kg</span></td>
+                <td data-label="낙찰가" class="c-num mono price">52,000</td>
+                <td data-label="전일 대비" class="c-num mono delta down">▼ 2,000</td>
+              </tr>
+              <tr>
+                <th scope="row">무화과</th>
+                <td data-label="산지">전남 영암</td>
+                <td data-label="등급" class="c-num mono">특</td>
+                <td data-label="당도" class="c-num mono blank" title="당도 표시 대상 품목이 아닙니다">—</td>
+                <td data-label="규격" class="c-num mono">1.2<span class="unit">kg</span></td>
+                <td data-label="낙찰가" class="c-num mono price">24,000</td>
+                <td data-label="전일 대비" class="c-num mono delta up">▲ 1,000</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <ul class="board-notes">
+            <li>
+              사과와 배는 같은 날 <span class="mono">08:30</span> 경매입니다. 나머지 넷은
+              <span class="mono">02:00</span> 에 붙습니다.
+            </li>
+            <li>
+              당도 칸의 <span class="mono">—</span> 는 값이 없다는 뜻이 아니라
+              <strong>표시가 허용되지 않는 품목</strong>이라는 뜻입니다. 무화과는 당도 표기
+              대상 13개 품목에 들어 있지 않습니다.
+            </li>
+            <li>
+              낙찰가는 경매에서 받아 온 값이고, 여기에 선별·포장·배송이 붙어 판매가가 됩니다.
+              두 값을 같은 것처럼 적지 않습니다.
+            </li>
+            <li class="note-demo">
+              위 표의 숫자는 <strong>이 쇼케이스를 위한 예시</strong>입니다. 실제 운영에서는
+              그날 경매 결과가 그대로 들어옵니다.
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           2 · 어떻게 오는가
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-route" id="route" aria-labelledby="routeHeading">
+        <div class="wrap">
+          <h2 id="routeHeading">밭에서 문 앞까지 다섯 번 손이 바뀝니다</h2>
+          <p class="section-lead">
+            이 경로는 우리가 만든 것이 아니라 도매시장이 원래 그렇게 돌아갑니다.
+            우리는 네 번째 자리에 서 있습니다.
+          </p>
+
+          <ol class="route">
+            <li>
+              <p class="route-num mono">01</p>
+              <h3>출하</h3>
+              <p>산지에서 따고 골라 담아 시장으로 보냅니다.</p>
+            </li>
+            <li>
+              <p class="route-num mono">02</p>
+              <h3>수집</h3>
+              <p>도매법인이 그날 들어온 물량을 받아 경매에 올립니다.</p>
+            </li>
+            <li>
+              <p class="route-num mono">03</p>
+              <h3>경매</h3>
+              <p>새벽 두 시. 값이 여기서 정해집니다. 낙찰된 값을 경락가격이라 부릅니다.</p>
+            </li>
+            <li class="route-here">
+              <p class="route-num mono">04</p>
+              <h3>낙찰 — 우리가 서는 자리</h3>
+              <p>
+                중도매인 자격으로 직접 받습니다. 어느 산지의 어느 등급을 얼마에 받았는지가
+                위의 판에 그대로 올라갑니다.
+              </p>
+            </li>
+            <li>
+              <p class="route-num mono">05</p>
+              <h3>그날 아침 배송</h3>
+              <p>다시 창고에 재우지 않습니다. 경매장에서 나온 상자가 그대로 갑니다.</p>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           3 · 고르는 법
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-grade" id="grade" aria-labelledby="gradeHeading">
+        <div class="wrap split">
+          <div class="split-lead">
+            <h2 id="gradeHeading">판에 적힌 네 글자를 읽는 법</h2>
+          </div>
+          <div class="split-body">
+            <dl class="terms">
+              <div>
+                <dt>등급 <span class="term-en mono">특 · 상 · 보통</span></dt>
+                <dd>
+                  크기가 고른가, 흠이 없는가, 색이 제대로 들었는가를 봅니다. 농산물 표준규격이
+                  품목마다 따로 정해 두고 있습니다. <strong>당도를 표시할 수 있는 것은
+                  특·상 등급뿐</strong>입니다.
+                </dd>
+              </div>
+              <div>
+                <dt>당도 <span class="term-en mono">Brix</span></dt>
+                <dd>
+                  용액 100g 에 든 당이 몇 g 인지를 나타냅니다. 굴절당도계에 과즙 한 방울을
+                  올려 잽니다. 높다고 늘 맛있는 것은 아니고 산도와의 균형이 맛을 정합니다 —
+                  그래서 숫자만 크게 적지 않습니다.
+                </dd>
+              </div>
+              <div>
+                <dt>선과 <span class="term-en mono">選果</span></dt>
+                <dd>
+                  기계로 골라내는 일입니다. 드럼식은 지름으로, 중량식은 무게로 나눕니다.
+                  같은 상자 안의 알이 고른 이유가 여기 있습니다.
+                </dd>
+              </div>
+              <div>
+                <dt>규격 <span class="term-en mono">kg</span></dt>
+                <dd>
+                  상자 단위입니다. 사과는 2·5·7.5·10kg, 포도는 2·3·4·5kg 로 거래됩니다.
+                  같은 값이라도 규격이 다르면 비교가 안 되므로 판에 함께 적습니다.
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           4 · 제철 띠 — 12개월
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-dark section-season" id="season" aria-labelledby="seasonHeading">
+        <div class="wrap">
+          <p class="eyebrow">제철</p>
+          <h2 id="seasonHeading">없을 때는 없다고 적습니다</h2>
+          <p class="section-lead">
+            철이 아닌 것을 굳이 구해 오지 않습니다. 아래 띠에서 칸이 찬 달에만 그 품목이
+            판에 오릅니다.
+          </p>
+
+          <div class="season-scroll">
+            <table class="season">
+              <caption class="sr-only">품목별 제철 달력 — 가로축은 1월부터 12월</caption>
+              <thead>
+                <tr>
+                  <th scope="col" class="season-item">품목</th>
+                  <th scope="col" data-m="1">1</th>
+                  <th scope="col" data-m="2">2</th>
+                  <th scope="col" data-m="3">3</th>
+                  <th scope="col" data-m="4">4</th>
+                  <th scope="col" data-m="5">5</th>
+                  <th scope="col" data-m="6">6</th>
+                  <th scope="col" data-m="7">7</th>
+                  <th scope="col" data-m="8">8</th>
+                  <th scope="col" data-m="9">9</th>
+                  <th scope="col" data-m="10">10</th>
+                  <th scope="col" data-m="11">11</th>
+                  <th scope="col" data-m="12">12</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">딸기</th>
+                  <td class="on" data-m="1"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="2"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="3"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="4"><span class="sr-only">제철</span></td>
+                  <td data-m="5"></td><td data-m="6"></td><td data-m="7"></td><td data-m="8"></td>
+                  <td data-m="9"></td><td data-m="10"></td><td data-m="11"></td>
+                  <td class="on" data-m="12"><span class="sr-only">제철</span></td>
+                </tr>
+                <tr>
+                  <th scope="row">참외</th>
+                  <td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
+                  <td class="on" data-m="4"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="5"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="6"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="7"><span class="sr-only">제철</span></td>
+                  <td data-m="8"></td><td data-m="9"></td><td data-m="10"></td>
+                  <td data-m="11"></td><td data-m="12"></td>
+                </tr>
+                <tr>
+                  <th scope="row">복숭아</th>
+                  <td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
+                  <td data-m="4"></td><td data-m="5"></td>
+                  <td class="on" data-m="6"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="7"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="8"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="9"><span class="sr-only">제철</span></td>
+                  <td data-m="10"></td><td data-m="11"></td><td data-m="12"></td>
+                </tr>
+                <tr>
+                  <th scope="row">포도</th>
+                  <td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
+                  <td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
+                  <td class="on" data-m="7"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="8"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="9"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="10"><span class="sr-only">제철</span></td>
+                  <td data-m="11"></td><td data-m="12"></td>
+                </tr>
+                <tr>
+                  <th scope="row">무화과</th>
+                  <td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
+                  <td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
+                  <td data-m="7"></td>
+                  <td class="on" data-m="8"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="9"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="10"><span class="sr-only">제철</span></td>
+                  <td data-m="11"></td><td data-m="12"></td>
+                </tr>
+                <tr>
+                  <th scope="row">사과</th>
+                  <td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
+                  <td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
+                  <td data-m="7"></td>
+                  <td class="on" data-m="8"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="9"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="10"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="11"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="12"><span class="sr-only">제철</span></td>
+                </tr>
+                <tr>
+                  <th scope="row">배</th>
+                  <td data-m="1"></td><td data-m="2"></td><td data-m="3"></td>
+                  <td data-m="4"></td><td data-m="5"></td><td data-m="6"></td>
+                  <td data-m="7"></td>
+                  <td class="on" data-m="8"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="9"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="10"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="11"><span class="sr-only">제철</span></td>
+                  <td data-m="12"></td>
+                </tr>
+                <tr>
+                  <th scope="row">감귤</th>
+                  <td class="on" data-m="1"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="2"><span class="sr-only">제철</span></td>
+                  <td data-m="3"></td><td data-m="4"></td><td data-m="5"></td>
+                  <td data-m="6"></td><td data-m="7"></td><td data-m="8"></td>
+                  <td data-m="9"></td>
+                  <td class="on" data-m="10"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="11"><span class="sr-only">제철</span></td>
+                  <td class="on" data-m="12"><span class="sr-only">제철</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="season-note">
+            달마다 굵은 세로선이 이번 달입니다. 산지와 그해 날씨에 따라 두 주쯤은 앞뒤로
+            움직입니다.
+          </p>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           5 · 오늘 들어온 것 — 사진이 색을 갖는 자리
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-today" id="today" aria-labelledby="todayHeading">
+        <div class="wrap">
+          <h2 id="todayHeading">오늘 들어온 것</h2>
+          <p class="section-lead">
+            같은 품목이라도 산지가 바뀌면 다른 물건입니다. 누가 어디서 길렀는지를 함께 적습니다.
+          </p>
+
+          <div class="today-grid">
+            <figure class="today-card">
+              <img
+                src="./assets/pear-crate.webp"
+                width="1100"
+                height="825"
+                loading="lazy"
+                decoding="async"
+                alt="흰 그물망에 하나씩 싼 배가 얕은 나무 상자에 담겨 있고, 한 알은 상자 옆에 꺼내 놓여 있습니다"
+              />
+              <figcaption>
+                <p class="card-name">원황 배 <span class="card-origin">전남 나주</span></p>
+                <dl class="card-spec mono">
+                  <div><dt>등급</dt><dd>상</dd></div>
+                  <div><dt>당도</dt><dd>12.8 Bx</dd></div>
+                  <div><dt>규격</dt><dd>7.5 kg</dd></div>
+                </dl>
+                <p class="card-note">
+                  나주 배는 물이 많고 단맛이 늦게 옵니다. 그물망은 멋이 아니라 눌림을 막는
+                  포장입니다.
+                </p>
+              </figcaption>
+            </figure>
+
+            <figure class="today-card">
+              <img
+                src="./assets/grape-bloom.webp"
+                width="900"
+                height="1200"
+                loading="lazy"
+                decoding="async"
+                alt="흰 종이 위에 놓인 진자주색 포도 송이. 껍질에 하얀 과분이 그대로 남아 있습니다"
+              />
+              <figcaption>
+                <p class="card-name">캠벨얼리 <span class="card-origin">충북 영동</span></p>
+                <dl class="card-spec mono">
+                  <div><dt>등급</dt><dd>상</dd></div>
+                  <div><dt>당도</dt><dd>15.4 Bx</dd></div>
+                  <div><dt>규격</dt><dd>5 kg</dd></div>
+                </dl>
+                <p class="card-note">
+                  껍질에 앉은 흰 가루는 과분입니다. 씻겨 나간 것이 아니라 남아 있는 쪽이
+                  덜 만져진 것입니다.
+                </p>
+              </figcaption>
+            </figure>
+
+            <figure class="today-card today-card-wide">
+              <img
+                src="./assets/refractometer.webp"
+                width="1100"
+                height="825"
+                loading="lazy"
+                decoding="async"
+                alt="스테인리스 작업대 위 굴절당도계의 프리즘 판에 과즙 한 방울이 올려져 있습니다"
+              />
+              <figcaption>
+                <p class="card-name">당도는 이렇게 잽니다</p>
+                <p class="card-note">
+                  굴절당도계에 과즙을 한 방울 올리고 빛이 꺾이는 각을 봅니다.
+                  상자마다 재는 것이 아니라 들어온 로트에서 표본을 뽑아 잽니다 —
+                  그래서 판의 당도는 그 로트의 값입니다.
+                </p>
+              </figcaption>
+            </figure>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           6 · 납품
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-dark section-wholesale" id="wholesale" aria-labelledby="wsHeading">
+        <div class="wrap split">
+          <div class="split-lead">
+            <h2 id="wsHeading">가게에 넣는 경우</h2>
+          </div>
+          <div class="split-body">
+            <p class="lead">
+              카페·베이커리·식당처럼 매일 같은 품질이 필요한 곳은 소매와 다른 조건으로
+              봅니다. 값보다 <strong>편차</strong>가 문제이기 때문입니다.
+            </p>
+            <dl class="ws-rows">
+              <div>
+                <dt>주문 마감</dt>
+                <dd>전날 <span class="mono">21:00</span> — 그래야 새벽 경매에서 물량을 잡습니다</dd>
+              </div>
+              <div>
+                <dt>배송</dt>
+                <dd>같은 날 오전. 수도권은 직접 돌고, 그 밖은 새벽 물류로 보냅니다</dd>
+              </div>
+              <div>
+                <dt>등급 고정</dt>
+                <dd>
+                  등급을 계약으로 묶습니다. 그날 시세가 올라도 등급을 낮춰 값을 맞추지
+                  않습니다
+                </dd>
+              </div>
+              <div>
+                <dt>시세 공유</dt>
+                <dd>낙찰가를 그대로 전달합니다. 마진은 별도 항목으로 적습니다</dd>
+              </div>
+              <div>
+                <dt>최소 물량</dt>
+                <dd>품목당 상자 <span class="mono">3</span> 개부터</dd>
+              </div>
+            </dl>
+            <a class="btn" href="mailto:order@saebyeok-cheonggwa.example?subject=%EB%82%A9%ED%92%88%20%EB%AC%B8%EC%9D%98">
+              납품 조건 문의
+            </a>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           7 · 문의
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-contact" id="contact" aria-labelledby="contactHeading">
+        <div class="wrap split">
+          <div class="split-lead">
+            <h2 id="contactHeading">문의</h2>
+          </div>
+          <div class="split-body">
+            <dl class="contact-rows">
+              <div>
+                <dt>여는 시각</dt>
+                <dd>새벽 <span class="mono">01:30</span> – 낮 <span class="mono">12:00</span> · 일요일 휴무</dd>
+              </div>
+              <div>
+                <dt>주문 마감</dt>
+                <dd>전날 <span class="mono">21:00</span></dd>
+              </div>
+              <div>
+                <dt>메일</dt>
+                <dd><a class="mono" href="mailto:order@saebyeok-cheonggwa.example">order@saebyeok-cheonggwa.example</a></dd>
+              </div>
+            </dl>
+            <p class="contact-fine">
+              주소·전화·사업자 정보는 실제 상호가 정해진 뒤에 채웁니다.
+              지어낸 값을 임시로 적어 두지 않습니다.
+            </p>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="band band-dark site-foot">
+      <div class="wrap foot-inner">
+        <p class="foot-name">새벽청과 <span aria-hidden="true">曉靑果</span></p>
+        <p class="foot-line">새벽 경매에서 받아 그날 아침에 보냅니다</p>
+        <p class="foot-fine">
+          이 페이지는 designpaca 쇼케이스입니다. 실제 영업하는 상호가 아니며,
+          판의 숫자는 화면 구성을 보이기 위한 예시입니다. 경매 시각·등급·당도 표시 규정 등
+          제도에 관한 설명은 실제 농산물 표준규격과 도매시장 운영 방식을 따릅니다.
+        </p>
+      </div>
+    </footer>
+
+    <script>
+      /* 이번 달 칸에 표시를 남긴다. 달이 바뀌면 저절로 따라가야 하므로 이것만 스크립트다. */
+      (() => {
+        const m = new Date().getMonth() + 1;
+        document.querySelectorAll(`.season [data-m="${m}"]`).forEach((el) => {
+          el.classList.add("is-now");
+        });
+        const head = document.querySelector(`.season thead [data-m="${m}"]`);
+        if (head) head.setAttribute("aria-current", "date");
+      })();
+    </script>
+  </body>
+</html>

apps/site/public/work/saebyeok-cheonggwa/styles/main.css

@@ -0,0 +1,831 @@
+@import "./tokens.css";
+
+/* ==========================================================================
+   새벽청과 — 메인 스타일시트
+
+   판(board)이 이 페이지의 주인공이다. 사진은 색을 담당하고, UI 는 색을 쓰지 않는다.
+   .band-dark 는 '새벽'(경매장·제철 띠·납품), .band-light 는 '낮'(설명·상품)이다.
+   반전은 아래 두 클래스가 토큰을 재정의하는 규칙이다.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+  background: var(--dark-surface);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  background: var(--surface);
+  color: var(--ink);
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  overflow-x: hidden;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
+}
+
+h1,
+h2,
+h3 {
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;
+  text-wrap: balance;
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 두 체제 ────────────────────────────────────────────────────── */
+.band-light {
+  --band-surface: var(--surface);
+  --band-surface-2: var(--surface-2);
+  --band-surface-3: var(--surface-3);
+  --band-line: var(--line);
+  --band-line-strong: var(--line-strong);
+  --band-ink: var(--ink);
+  --band-ink-muted: var(--ink-muted);
+  --band-ink-faint: var(--ink-faint);
+  --band-accent: var(--accent);
+  --band-accent-hover: var(--accent-hover);
+  --band-accent-ink: var(--accent-ink);
+  --band-accent-wash: var(--accent-wash);
+}
+
+.band-dark {
+  --band-surface: var(--dark-surface);
+  --band-surface-2: var(--dark-surface-2);
+  --band-surface-3: var(--dark-surface-3);
+  --band-line: var(--dark-line);
+  --band-line-strong: var(--dark-line-strong);
+  --band-ink: var(--dark-ink);
+  --band-ink-muted: var(--dark-ink-muted);
+  --band-ink-faint: var(--dark-ink-faint);
+  --band-accent: var(--dark-accent);
+  --band-accent-hover: var(--dark-accent-hover);
+  --band-accent-ink: var(--dark-accent-ink);
+  --band-accent-wash: var(--dark-accent-wash);
+}
+
+.band {
+  position: relative;
+  background: var(--band-surface);
+  color: var(--band-ink);
+}
+
+.band > .wrap {
+  padding-block: var(--space-8);
+}
+
+/* ── 접근성 ─────────────────────────────────────────────────────── */
+.skip-link {
+  position: fixed;
+  top: var(--space-3);
+  left: var(--space-3);
+  z-index: 200;
+  padding: var(--space-2) var(--space-3);
+  background: var(--ink);
+  color: var(--surface);
+  text-decoration: none;
+  transform: translateY(-250%);
+  transition: transform var(--dur-quick) var(--ease);
+}
+
+.skip-link:focus-visible {
+  transform: translateY(0);
+}
+
+:where(a, button, [tabindex]):focus-visible {
+  outline: 2px solid var(--band-accent, var(--accent));
+  outline-offset: 3px;
+}
+
+/* ── 헤더 ───────────────────────────────────────────────────────── */
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--dark-surface);
+  border-bottom: 1px solid var(--dark-line);
+  color: var(--dark-ink);
+}
+
+.head-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-height: 56px;
+  min-width: 0;
+}
+
+.wordmark {
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.wordmark-han {
+  color: var(--dark-ink-faint);
+  font-size: var(--step--1);
+  margin-left: 2px;
+}
+
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2.4vw, var(--space-5));
+  min-width: 0;
+}
+
+.nav a {
+  color: var(--dark-ink-muted);
+  font-size: var(--step--1);
+  text-decoration: none;
+  white-space: nowrap;
+  padding-block: var(--space-2);
+  transition: color var(--dur-quick) var(--ease);
+}
+
+.nav a:hover {
+  color: var(--dark-accent);
+}
+
+.head-meta {
+  font-size: var(--step--1);
+  color: var(--dark-ink-faint);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── 히어로 ─────────────────────────────────────────────────────── */
+.hero {
+  overflow: clip;
+}
+
+/* 사진은 판 뒤로 물러난다. 판이 읽히지 않으면 이 페이지는 실패다 */
+.hero-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 42%;
+  opacity: 0.64;
+}
+
+.hero::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--dark-surface) 40%, transparent) 0%,
+    color-mix(in srgb, var(--dark-surface) 82%, transparent) 40%,
+    var(--dark-surface) 86%
+  );
+  pointer-events: none;
+}
+
+.hero-inner {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-stamp {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-2) var(--space-3);
+  font-size: var(--step--1);
+  color: var(--band-ink-muted);
+  padding-bottom: var(--space-3);
+  border-bottom: 1px solid var(--band-line-strong);
+}
+
+.hero-stamp time {
+  color: var(--band-accent);
+}
+
+.stamp-sep {
+  color: var(--band-ink-faint);
+}
+
+.hero h1 {
+  margin-top: var(--space-5);
+  font-size: var(--display);
+  max-width: 12ch;
+}
+
+.hero-lead {
+  margin-top: var(--space-4);
+  max-width: var(--measure);
+  font-size: var(--step-1);
+  color: var(--band-ink-muted);
+  line-height: var(--leading-loose);
+}
+
+/* ── 시세판 ─────────────────────────────────────────────────────── */
+.board {
+  margin-top: var(--space-6);
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-size: var(--step--1);
+}
+
+.board th,
+.board td {
+  padding: var(--space-3) var(--space-2);
+  border-bottom: 1px solid var(--band-line);
+  vertical-align: baseline;
+}
+
+.board th:first-child,
+.board td:first-child {
+  padding-left: 0;
+}
+
+.board th:last-child,
+.board td:last-child {
+  padding-right: 0;
+}
+
+.board thead th {
+  border-bottom: 1px solid var(--band-line-strong);
+  color: var(--band-ink-faint);
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.board tbody th {
+  font-size: var(--step-0);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.board td {
+  color: var(--band-ink-muted);
+}
+
+.c-num {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.unit {
+  margin-left: 2px;
+  color: var(--band-ink-faint);
+  font-size: 0.85em;
+}
+
+.price {
+  color: var(--band-ink);
+  font-size: var(--step-0);
+}
+
+/* 등락은 색으로만 말하지 않는다 — 기호가 먼저다.
+   색맹 사용자에게 빨강/파랑만 남는 판은 판이 아니다 */
+.delta {
+  color: var(--band-ink-faint);
+}
+
+.delta.up,
+.delta.down {
+  color: var(--band-ink-muted);
+}
+
+.blank {
+  color: var(--band-ink-faint);
+}
+
+.board-notes {
+  margin-top: var(--space-5);
+  list-style: none;
+  display: grid;
+  gap: var(--space-3);
+  max-width: 62ch;
+}
+
+.board-notes li {
+  padding-left: var(--space-4);
+  position: relative;
+  font-size: var(--step--1);
+  color: var(--band-ink-muted);
+  line-height: var(--leading-loose);
+}
+
+.board-notes li::before {
+  content: "—";
+  position: absolute;
+  left: 0;
+  color: var(--band-ink-faint);
+}
+
+.board-notes strong {
+  color: var(--band-ink);
+  font-weight: 600;
+}
+
+.note-demo {
+  margin-top: var(--space-2);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--band-line);
+  color: var(--band-ink-faint);
+}
+
+/* ── 섹션 공통 ──────────────────────────────────────────────────── */
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--band-accent);
+  margin-bottom: var(--space-3);
+}
+
+.band h2 {
+  font-size: var(--step-3);
+  max-width: 20ch;
+}
+
+.section-lead,
+.lead {
+  margin-top: var(--space-4);
+  max-width: var(--measure);
+  color: var(--band-ink-muted);
+  font-size: var(--step-1);
+  line-height: var(--leading-loose);
+}
+
+.split {
+  display: grid;
+  gap: var(--space-5);
+}
+
+@media (min-width: 900px) {
+  .split {
+    grid-template-columns: 4fr 8fr;
+    gap: var(--space-7);
+    align-items: start;
+  }
+}
+
+/* ── 경로 ───────────────────────────────────────────────────────── */
+.route {
+  margin-top: var(--space-6);
+  list-style: none;
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.route li {
+  display: grid;
+  gap: var(--space-1) var(--space-4);
+  padding-block: var(--space-4);
+  border-bottom: 1px solid var(--band-line);
+}
+
+@media (min-width: 760px) {
+  .route li {
+    grid-template-columns: 3rem 14rem 1fr;
+    align-items: baseline;
+  }
+}
+
+.route-num {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.route h3 {
+  font-size: var(--step-1);
+}
+
+.route li > p:last-child {
+  color: var(--band-ink-muted);
+  font-size: var(--step--1);
+  line-height: var(--leading-loose);
+}
+
+/* 우리가 서는 자리만 표시한다 — 다섯 중 하나만 강조해야 강조가 된다 */
+.route-here {
+  background: var(--band-accent-wash);
+  box-shadow: inset 3px 0 0 0 var(--band-accent);
+  padding-left: var(--space-4);
+}
+
+.route-here .route-num,
+.route-here h3 {
+  color: var(--band-accent);
+}
+
+/* ── 용어 ───────────────────────────────────────────────────────── */
+.terms {
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.terms > div {
+  padding-block: var(--space-4);
+  border-bottom: 1px solid var(--band-line);
+}
+
+.terms dt {
+  font-size: var(--step-1);
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.term-en {
+  font-size: var(--step--1);
+  font-weight: 400;
+  color: var(--band-ink-faint);
+}
+
+.terms dd {
+  margin-top: var(--space-2);
+  color: var(--band-ink-muted);
+  max-width: 48ch;
+  line-height: var(--leading-loose);
+}
+
+.terms strong {
+  color: var(--band-ink);
+  font-weight: 600;
+}
+
+/* ── 제철 띠 ────────────────────────────────────────────────────── */
+.season-scroll {
+  margin-top: var(--space-6);
+  overflow-x: auto;
+}
+
+.season {
+  width: 100%;
+  min-width: 34rem;
+  border-collapse: collapse;
+  font-size: var(--step--1);
+  text-align: center;
+}
+
+.season th,
+.season td {
+  border: 1px solid var(--band-line);
+  padding: var(--space-2) 0;
+}
+
+.season thead th {
+  color: var(--band-ink-faint);
+  font-weight: 400;
+  font-family: var(--font-mono);
+  border-bottom: 1px solid var(--band-line-strong);
+}
+
+.season tbody th {
+  text-align: left;
+  padding-inline: 0 var(--space-3);
+  border-left: 0;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.season-item {
+  text-align: left;
+  width: 6rem;
+}
+
+.season td.on {
+  background: var(--band-ink-muted);
+}
+
+/* 이번 달 — 배경 대신 테두리로 표시한다. 칸이 찬 것과 이번 달이 겹쳐도
+   둘 다 읽혀야 하기 때문이다 */
+.season .is-now {
+  border-inline: 2px solid var(--band-accent);
+}
+
+.season thead .is-now {
+  color: var(--band-accent);
+  border-top: 2px solid var(--band-accent);
+}
+
+.season-note {
+  margin-top: var(--space-4);
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+  line-height: var(--leading-loose);
+  max-width: var(--measure);
+}
+
+/* ── 오늘 들어온 것 ─────────────────────────────────────────────── */
+.today-grid {
+  margin-top: var(--space-6);
+  display: grid;
+  gap: var(--space-5);
+}
+
+@media (min-width: 820px) {
+  .today-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-6);
+    /* 상자 사진과 접사는 비율이 다르다. 늘려서 높이를 맞추면 짧은 쪽 아래에
+       300px 짜리 빈 칸이 생긴다(실측). 각자 제 높이로 두고 캡션을 사진에 붙인다 */
+    align-items: start;
+  }
+  .today-card-wide {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-5);
+    align-items: center;
+  }
+}
+
+.today-card img {
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--band-line);
+}
+
+.today-card figcaption {
+  padding-top: var(--space-3);
+}
+
+.card-name {
+  font-size: var(--step-1);
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.card-origin {
+  font-size: var(--step--1);
+  font-weight: 400;
+  color: var(--band-ink-faint);
+}
+
+.card-spec {
+  margin-top: var(--space-3);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  font-size: var(--step--1);
+  padding-block: var(--space-2);
+  border-block: 1px solid var(--band-line);
+}
+
+.card-spec > div {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.card-spec dt {
+  color: var(--band-ink-faint);
+}
+
+.card-note {
+  margin-top: var(--space-3);
+  color: var(--band-ink-muted);
+  font-size: var(--step--1);
+  line-height: var(--leading-loose);
+  max-width: 42ch;
+}
+
+/* ── 납품 · 문의 ───────────────────────────────────────────────── */
+.ws-rows,
+.contact-rows {
+  margin-top: var(--space-5);
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.ws-rows > div,
+.contact-rows > div {
+  display: grid;
+  gap: var(--space-1) var(--space-4);
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--band-line);
+}
+
+@media (min-width: 640px) {
+  .ws-rows > div,
+  .contact-rows > div {
+    grid-template-columns: 7rem 1fr;
+  }
+}
+
+.ws-rows dt,
+.contact-rows dt {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.ws-rows dd,
+.contact-rows dd {
+  color: var(--band-ink-muted);
+  line-height: var(--leading-loose);
+}
+
+.contact-rows a {
+  color: var(--band-accent);
+}
+
+.lead strong {
+  color: var(--band-ink);
+  font-weight: 600;
+}
+
+.contact-fine {
+  margin-top: var(--space-4);
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+  line-height: var(--leading-loose);
+  max-width: var(--measure);
+}
+
+.btn {
+  display: inline-block;
+  margin-top: var(--space-5);
+  padding: var(--space-3) var(--space-5);
+  background: var(--band-accent);
+  color: var(--band-accent-ink);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background-color var(--dur-quick) var(--ease);
+}
+
+.btn:hover {
+  background: var(--band-accent-hover);
+}
+
+/* ── 푸터 ───────────────────────────────────────────────────────── */
+.foot-inner {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.foot-name {
+  font-weight: 600;
+}
+
+.foot-line {
+  color: var(--band-ink-muted);
+  font-size: var(--step--1);
+}
+
+.foot-fine {
+  margin-top: var(--space-4);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--band-line);
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+  line-height: var(--leading-loose);
+  max-width: 62ch;
+}
+
+/* ── 좁은 화면 ──────────────────────────────────────────────────── */
+@media (max-width: 720px) {
+  .head-inner {
+    flex-wrap: wrap;
+    padding-block: var(--space-2);
+    row-gap: var(--space-2);
+  }
+
+  .nav {
+    order: 3;
+    width: 100%;
+    justify-content: space-between;
+    gap: var(--space-2);
+    border-top: 1px solid var(--dark-line);
+    padding-top: var(--space-2);
+  }
+
+  .head-meta {
+    display: none;
+  }
+
+  /* 판은 일곱 칸이라 좁은 화면에서 표로 두면 못 읽는다.
+     행마다 라벨을 붙인 카드로 접는다 — 가로 스크롤로 미루지 않는다 */
+  .board thead {
+    display: none;
+  }
+
+  .board,
+  .board tbody,
+  .board tr,
+  .board th,
+  .board td {
+    display: block;
+  }
+
+  .board tr {
+    padding-block: var(--space-4);
+    border-bottom: 1px solid var(--band-line);
+  }
+
+  .board tbody th {
+    font-size: var(--step-1);
+    padding: 0;
+    border: 0;
+  }
+
+  .board td {
+    padding: var(--space-1) 0;
+    border: 0;
+    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .board td::before {
+    content: attr(data-label);
+    color: var(--band-ink-faint);
+    font-family: var(--font-body);
+  }
+
+  .today-card-wide {
+    display: block;
+  }
+}
+
+/* ── 모션을 줄이는 설정 ─────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ── 인쇄 — 판은 종이에서도 판이어야 한다 ─────────────────────── */
+@media print {
+  .site-head,
+  .skip-link,
+  .btn,
+  .hero-bg {
+    display: none;
+  }
+
+  .hero::after {
+    display: none;
+  }
+
+  .band {
+    background: #fff;
+    color: #000;
+  }
+
+  .board {
+    break-inside: avoid;
+  }
+}

apps/site/public/work/saebyeok-cheonggwa/styles/tokens.css

@@ -0,0 +1,128 @@
+/* ==========================================================================
+   새벽청과 (曉靑果) — 청과 도매 직거래 · 디자인 토큰 SSOT
+
+   컨셉 : 오늘 새벽 두 시의 값 — 값이 매일 바뀐다는 사실을 숨기지 않고
+          첫 화면의 주인공으로 삼는다
+   프리셋: market-board (신규 정의. quiet-commerce 를 뼈대로 삼되 상품이 아니라
+          '오늘의 값'이 히어로다)
+   강조색: 새벽 남색 1색. 라이트/다크는 규칙으로 정의된 한 쌍이므로 1종으로 센다
+
+   ── 왜 화면이 무채색인가
+   과일이 색을 전부 쓴다. 사진 안에 빨강·자주·황금이 이미 다 들어 있는데
+   UI 까지 색을 쓰면 둘이 싸운다. 그래서 판은 종이와 잉크로만 짓고,
+   유채색은 사진과 강조색 하나에만 허락한다.
+
+   ── 강조색의 근거
+   이 시장은 새벽 두 시에 연다. 낮의 색이 아니라 해뜨기 전의 색이어야 하고,
+   과일의 난색(적·황·자)과 보색 관계라 사진을 죽이지 않는다.
+   저장소의 기존 16종에 남색 계열이 비어 있는 것도 확인했다.
+
+   ── 레퍼런스 실측 (2026-08-24, 1440px computed style)
+   R1 구조 · natoora.com (제철 농산물 직거래 — 같은 업종)
+       텍스트 #121212 · Helvetica Now Text 사실상 1패밀리
+       본문 16px(224회) · 시각 헤드라인 72px(6회) → 최대÷본문 4.5배
+       radius 0px 975회 지배 · 강조색 #3860BE 가 단 1회
+       컨테이너 1313 ↔ 1425 전폭 · 칼럼 427
+       히어로 이미지 1313×900 이 첫 화면 대부분, 같은 크기가 세로로 반복
+       → 가져온 원리: **품목마다 어디서 누가 길렀는지를 문장으로 붙인다.**
+         제철 커머스의 설득은 사진이 아니라 출처의 구체성이다
+       → 안 가져온 것: h1 이 16px 이고 시각 헤드라인(72px)과 분리돼 있다
+         (스크린리더가 읽는 제목과 눈에 보이는 제목이 다르다 — 접근성 실패).
+         전체 대문자 내비도 가져오지 않는다
+
+   R2 톤 · phillips.com (미술품 경매 하우스 — 다른 업종)
+       텍스트 순흑 #000000(141회) · 보조 #757777 · 강조색 사실상 없음
+       h1 28px/400 — 아주 작다 · 본문 14px(100회) · 최대÷본문 1.7배
+       radius 0px 685회 지배 · 컨테이너 1425 ↔ 1329 ↔ 443
+       → 가져온 원리: **경매는 날짜와 상태가 제목보다 앞에 선다.**
+         무엇이 언제 열리고 지금 어느 단계인지가 먼저 나오고, 화면은 무채색으로
+         물러나 출품작이 색을 갖게 한다
+       → 안 가져온 것: 본문 14px(한글 하한 16px 위반), 최대÷본문 1.7배(평평한 스케일),
+         폰트 3패밀리
+
+   R3 디테일 · 제철 12개월 띠
+       품목이 언제 나오는지를 12칸 격자 한 줄로 보여준다. natoora 의 'IN SEASON NOW'
+       를 문구가 아니라 구조로 승격한 것이다. CSS 그리드로 짓고, 이번 달 표시에만
+       인라인 스크립트를 쓴다(달이 바뀌면 저절로 따라가야 하므로)
+
+   ── 사실 근거 (카피에 쓰는 용어는 전부 아래에서 왔다)
+   · 가락시장 과일 경매는 새벽 2시~아침 8시. 포도·복숭아·감귤·자두·딸기·멜론·참외·
+     토마토·수박·단감은 하절기 02:00 / 동절기 02:30, 사과·배·유자·떫은감·수입과실은 08:30
+     — garak.co.kr 시장경매시간안내
+   · 유통 경로: 출하자 → 도매법인(경매회사) 수집 → 경매 → 중도매인 낙찰 → 소매 → 소비자
+   · 경락가격 = 낙찰가격. 농산물유통정보(KAMIS)가 가락시장 경락가격을 공개한다
+   · 등급은 특·상·보통. **당도 표시는 특·상 등급에만 허용**된다
+   · 당도 표시 가능 품목은 사과·배·복숭아·포도·감귤·금감·단감·자두 8품목과
+     수박·조롱수박·참외·멜론·딸기 5품목 — 농산물 표준규격
+   · Brix = 용액 100g 에 든 당의 g 수
+   · 선과기는 드럼식(지름 기준)과 중량식(무게 기준)
+   · 거래단위 예: 사과 2·5·7.5·10kg, 포도 2·3·4·5kg
+   ========================================================================== */
+
+:root {
+  /* ── 타이포그래피 — 5단계 + 스케일 밖 디스플레이 1개 ── */
+  --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.75rem, 1.3rem + 2.3vw, 2.75rem); /* 28 → 44px */
+  --display: clamp(2.375rem, 1.5rem + 4.3vw, 4.5rem); /* 38 → 72px */
+  /* 최대 ÷ 본문 = 72 ÷ 16 = 4.5배. R1(natoora) 과 같은 비율이다 */
+
+  --leading-tight: 1.18;
+  --leading-normal: 1.7;
+  --leading-loose: 1.85;
+  --measure: 33em;
+
+  --font-body: Pretendard, "Pretendard Variable", -apple-system, system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+
+  /* ── 색 · 종이(라이트) ── */
+  --surface: #fbfaf7;
+  --surface-2: #f2f0ea;
+  --surface-3: #e7e4dc;
+  --line: #ddd9d0;
+  --line-strong: #b8b3a8;
+  --ink: #16181a; /* 17.2:1 */
+  --ink-muted: #55595d; /* 6.87:1 */
+  --ink-faint: #696e73; /* 4.96:1 */
+  --accent: #1f3f6b; /* 10.08:1 · 흰 글자 얹으면 10.5:1 */
+  --accent-hover: #142b4b;
+  --accent-ink: #ffffff;
+  --accent-wash: #e6ebf2;
+
+  /* ── 색 · 새벽(다크 반전 밴드) — 위 값들의 규칙적 반전 ── */
+  --dark-surface: #16181a;
+  --dark-surface-2: #1d2023;
+  --dark-surface-3: #24282c;
+  --dark-line: #2f3438;
+  --dark-line-strong: #454b50;
+  --dark-ink: #f3f1ec; /* 15.9:1 */
+  --dark-ink-muted: #a6a9ac; /* 7.63:1 */
+  --dark-ink-faint: #878b8f; /* 5.22:1 */
+  --dark-accent: #7fa8d9; /* 7.31:1 — 남색은 어두운 바탕에서 안 보이므로 밝은 쪽 쌍 */
+  --dark-accent-hover: #9dbfe6;
+  --dark-accent-ink: #0b1520;
+  --dark-accent-wash: #1b2c3f;
+
+  /* ── 형태 — R1·R2 둘 다 radius 0 이 지배한다(975회 / 685회) ── */
+  --radius: 0;
+
+  /* ── 간격 — 저장소 SSOT 표준 ── */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6rem;
+  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  /* ── 모션 ── */
+  --dur-quick: 150ms;
+  --dur-normal: 380ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+}

apps/site/public/work/twentyoz-corp/index.html

@@ -0,0 +1,643 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>트웬티온스 — 네 개의 현장에서 돌아가는 소프트웨어</title>
+    <meta
+      name="description"
+      content="2020년 설립. 가상현실·산업용 IoT·이커머스 솔루션 전문 기업. VIVEN·EduBill·XD Hub·XD Works 네 개의 자체 제품이 강의실, 데이터센터, 공공기관, 공장 현장에서 돌아간다."
+    />
+    <meta property="og:title" content="트웬티온스 — 네 개의 현장" />
+    <meta
+      property="og:description"
+      content="회사 소개 대신 한 일을 앞에 둔다. 6년 159건, 자체 제품 4종."
+    />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#fafaf8" />
+
+    <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=JetBrains+Mono:wght@400;500;700&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css" />
+    <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='%23111214'/%3E%3Ctext x='16' y='22' font-family='monospace' font-size='15' font-weight='700' fill='%23FAFAF8' text-anchor='middle'%3E20%3C/text%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip-link" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#top">
+          <span class="wordmark-badge mono" aria-hidden="true">20</span>
+          <span>트웬티온스</span>
+        </a>
+        <nav class="nav" aria-label="주요 섹션">
+          <a href="#products">제품</a>
+          <a href="#ledger">한 일</a>
+          <a href="#record">기록</a>
+          <a href="#contact">연락</a>
+        </nav>
+        <p class="head-meta mono">EST. 2020</p>
+      </div>
+    </header>
+
+    <main id="main">
+      <!-- ══════════════════════════════════════════════════════════
+           1 · 히어로 = 현장 선택기.
+           회사 이름과 슬로건을 첫 화면에 두지 않는다 — 감수한 리스크다
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light hero" id="top" aria-labelledby="heroHeading">
+        <div class="wrap">
+          <h1 id="heroHeading">
+            네 개의 현장에서<br />
+            돌아가고 있다
+          </h1>
+          <p class="hero-lead">
+            트웬티온스는 2020년 1월에 세운 가상현실·산업용 IoT·이커머스 솔루션 회사입니다.
+            어느 현장의 이야기부터 보시겠습니까.
+          </p>
+
+          <form class="fields">
+            <fieldset>
+              <legend class="sr-only">현장 고르기</legend>
+
+              <input type="radio" name="field" id="field-edu" class="field-radio" checked />
+              <input type="radio" name="field" id="field-dc" class="field-radio" />
+              <input type="radio" name="field" id="field-gov" class="field-radio" />
+              <input type="radio" name="field" id="field-plant" class="field-radio" />
+
+              <div class="field-tabs">
+                <label for="field-edu">
+                  <span class="tab-num mono">01</span>
+                  <span class="tab-name">강의실과 훈련장</span>
+                </label>
+                <label for="field-dc">
+                  <span class="tab-num mono">02</span>
+                  <span class="tab-name">데이터센터와 발전소</span>
+                </label>
+                <label for="field-gov">
+                  <span class="tab-num mono">03</span>
+                  <span class="tab-name">공공기관과 대학 행정</span>
+                </label>
+                <label for="field-plant">
+                  <span class="tab-num mono">04</span>
+                  <span class="tab-name">공장과 설비 현장</span>
+                </label>
+              </div>
+
+              <div class="field-panels">
+                <article class="field-panel" data-panel="edu">
+                  <p class="panel-what">
+                    헤드셋을 쓴 학생이 실습을 하고, 강사는 그 장면을 밖에서 본다.
+                    캐릭터의 몸짓은 웹캠 한 대로 잡는다.
+                  </p>
+                  <dl class="panel-facts">
+                    <div>
+                      <dt>제품</dt>
+                      <dd><strong>VIVEN</strong> — 몰입형 VR 교육·훈련 플랫폼</dd>
+                    </div>
+                    <div>
+                      <dt>기술</dt>
+                      <dd class="mono">Unity3D × WebXR × MediaPipe</dd>
+                    </div>
+                    <div>
+                      <dt>특징</dt>
+                      <dd>PC VMC · Mobile VMC 모듈로 캐릭터 실시간 모션캡처</dd>
+                    </div>
+                    <div>
+                      <dt>납품 사례</dt>
+                      <dd>미래기술학교 운영 (2024) · 메타버스 기반 교육 플랫폼</dd>
+                    </div>
+                    <div>
+                      <dt>성숙도</dt>
+                      <dd class="mono">TRL 9 · 2021 – 현재</dd>
+                    </div>
+                  </dl>
+                </article>
+
+                <article class="field-panel" data-panel="dc">
+                  <p class="panel-what">
+                    설비 여섯 종류가 각자의 프로토콜로 떠드는 것을 한 엔진이 받아
+                    같은 시간축에 올린다. 그 위에서 운전이 자동으로 돈다.
+                  </p>
+                  <dl class="panel-facts">
+                    <div>
+                      <dt>제품</dt>
+                      <dd>
+                        <strong>XD Hub</strong> — 산업용 IoT 데이터 통합 엔진<br />
+                        <strong>XD Works</strong> — DCIM · FEMS 통합 운영 애플리케이션
+                      </dd>
+                    </div>
+                    <div>
+                      <dt>기술</dt>
+                      <dd class="mono">
+                        Java Spring Boot × Netty × TimescaleDB<br />
+                        Spring Boot × NestJS × TypeScript
+                      </dd>
+                    </div>
+                    <div>
+                      <dt>특징</dt>
+                      <dd>6종 산업 프로토콜을 단일 엔진으로 수집·전처리·전송</dd>
+                    </div>
+                    <div>
+                      <dt>납품 사례</dt>
+                      <dd>
+                        과천 데이터 센터 · LS 일렉 청주 FEMS · 제주 폐기물 EMS ·
+                        비금도 EMS · 한유 AFIMS (모두 2024)
+                      </dd>
+                    </div>
+                    <div>
+                      <dt>성숙도</dt>
+                      <dd class="mono">TRL 8 · 2022 – 현재</dd>
+                    </div>
+                  </dl>
+                </article>
+
+                <article class="field-panel" data-panel="gov">
+                  <p class="panel-what">
+                    해외 AI 서비스를 쓰고 싶은데 법인카드도 세금계산서도 안 되는 기관이 있다.
+                    그 사이에 들어가 원화 결제와 증빙을 대신한다.
+                  </p>
+                  <dl class="panel-facts">
+                    <div>
+                      <dt>제품</dt>
+                      <dd><strong>EduBill</strong> — AI SaaS 구독 대행 플랫폼</dd>
+                    </div>
+                    <div>
+                      <dt>기술</dt>
+                      <dd class="mono">Next.js × TypeScript × Supabase PostgreSQL</dd>
+                    </div>
+                    <div>
+                      <dt>쓰는 곳</dt>
+                      <dd>공공기관 · 대학 · 초중고 · 기업 HRD</dd>
+                    </div>
+                    <div>
+                      <dt>납품 사례</dt>
+                      <dd>KDIS EAI (2024) · EduBill (2024)</dd>
+                    </div>
+                    <div>
+                      <dt>성숙도</dt>
+                      <dd class="mono">TRL 8 · 2024 – 현재</dd>
+                    </div>
+                  </dl>
+                </article>
+
+                <article class="field-panel" data-panel="plant">
+                  <p class="panel-what">
+                    현장에서는 사무실 화면이 안 열린다. 장갑 낀 손과 밝은 햇빛,
+                    끊기는 통신을 전제로 다시 만든다.
+                  </p>
+                  <dl class="panel-facts">
+                    <div>
+                      <dt>성격</dt>
+                      <dd>고객사 설비·공정에 맞춰 짓는 현장 애플리케이션</dd>
+                    </div>
+                    <div>
+                      <dt>납품 사례</dt>
+                      <dd>
+                        브래키츠 BSLIM · 영진EL 2.0 스마트 APP · LS 전선 부스덕트 (모두 2024)
+                      </dd>
+                    </div>
+                    <div>
+                      <dt>기술</dt>
+                      <dd class="mono">Spring Boot / PostgreSQL / WebSocket · Vue3</dd>
+                    </div>
+                    <div>
+                      <dt>가장 무거운 것</dt>
+                      <dd>
+                        ACS (Auto Control System) — Unity Engine · RFS 실시간 유체 시뮬레이션 ·
+                        Transformer 기반 AI (2024)
+                      </dd>
+                    </div>
+                  </dl>
+                </article>
+              </div>
+            </fieldset>
+          </form>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           2 · 회사
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-about" id="about" aria-labelledby="aboutHeading">
+        <div class="wrap split">
+          <div class="split-lead">
+            <h2 id="aboutHeading">여섯 해 동안 쌓인 것</h2>
+          </div>
+          <div class="split-body">
+            <p class="lead">
+              서로 다른 산업의 프로젝트 경험과 새 기술을 붙여, 고객이 다음 성장 동력을 찾도록
+              돕는 것이 하는 일입니다. 에너지, 건물 자동화, 헬스케어처럼 틀리면 곤란한 영역이
+              주 무대입니다.
+            </p>
+            <dl class="counts">
+              <div>
+                <dt>수행 프로젝트</dt>
+                <dd class="mono">159<span>건</span></dd>
+              </div>
+              <div>
+                <dt>고객사</dt>
+                <dd class="mono">42<span>곳</span></dd>
+              </div>
+              <div>
+                <dt>구성원</dt>
+                <dd class="mono">40<span>명</span></dd>
+              </div>
+              <div>
+                <dt>특허</dt>
+                <dd class="mono">4<span>건</span></dd>
+              </div>
+            </dl>
+            <p class="counts-note">
+              위 넷은 회사가 공개한 값입니다. 아래 <a href="#ledger">한 일</a> 목록에는
+              그중 공개 가능한 49건의 일부를 이름·연도·기술 스택과 함께 적었습니다.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           3 · 제품 — 반전 밴드. 제품은 기계다
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-dark section-products" id="products" aria-labelledby="prodHeading">
+        <div class="wrap">
+          <p class="eyebrow">자체 제품</p>
+          <h2 id="prodHeading">팔러 다니는 것이 아니라 계속 고치는 것</h2>
+          <p class="section-lead">
+            네 개 모두 특정 고객의 요구에서 시작해 제품이 됐습니다. 지금도 각자의 개발 주기가
+            돌아가고 있습니다.
+          </p>
+
+          <ol class="product-list">
+            <li>
+              <p class="prod-id mono">V–01</p>
+              <div class="prod-body">
+                <h3>VIVEN <span class="prod-kind">메타버스 플랫폼</span></h3>
+                <p>
+                  기업과 교육기관을 위한 몰입형 VR 교육·훈련 플랫폼. PC VMC 와 Mobile VMC
+                  모듈로 캐릭터 실시간 모션캡처를 지원합니다.
+                </p>
+                <p class="prod-stack mono">Unity3D × WebXR × MediaPipe</p>
+              </div>
+              <dl class="prod-meta mono">
+                <div><dt>규모</dt><dd>Enterprise</dd></div>
+                <div><dt>주기</dt><dd>2021 –</dd></div>
+                <div><dt>성숙도</dt><dd>TRL 9</dd></div>
+              </dl>
+            </li>
+            <li>
+              <p class="prod-id mono">V–02</p>
+              <div class="prod-body">
+                <h3>EduBill <span class="prod-kind">교육 SaaS</span></h3>
+                <p>
+                  공공기관·대학·초중고·기업 HRD 를 위한 AI SaaS 구독 대행 플랫폼.
+                  해외 AI 서비스를 원화 결제와 세금계산서 발행으로 들여옵니다.
+                </p>
+                <p class="prod-stack mono">Next.js × TypeScript × Supabase PostgreSQL</p>
+              </div>
+              <dl class="prod-meta mono">
+                <div><dt>규모</dt><dd>B2G · 교육</dd></div>
+                <div><dt>주기</dt><dd>2024 –</dd></div>
+                <div><dt>성숙도</dt><dd>TRL 8</dd></div>
+              </dl>
+            </li>
+            <li>
+              <p class="prod-id mono">V–03</p>
+              <div class="prod-body">
+                <h3>XD Hub <span class="prod-kind">산업용 IoT</span></h3>
+                <p>
+                  데이터센터·제조·에너지·빌딩 도메인을 위한 산업용 IoT 데이터 통합 엔진.
+                  6종 산업 프로토콜을 단일 엔진으로 수집·전처리·전송합니다.
+                </p>
+                <p class="prod-stack mono">Java Spring Boot × Netty × TimescaleDB</p>
+              </div>
+              <dl class="prod-meta mono">
+                <div><dt>규모</dt><dd>설비</dd></div>
+                <div><dt>주기</dt><dd>2022 –</dd></div>
+                <div><dt>성숙도</dt><dd>TRL 8</dd></div>
+              </dl>
+            </li>
+            <li>
+              <p class="prod-id mono">V–04</p>
+              <div class="prod-body">
+                <h3>XD Works <span class="prod-kind">DCIM · FEMS</span></h3>
+                <p>
+                  XD Hub 가 모은 데이터를 받아 데이터센터 코로케이션, 빌딩, 공장, 발전소의
+                  운영을 자동화하는 통합 운영 애플리케이션입니다.
+                </p>
+                <p class="prod-stack mono">Spring Boot × NestJS × TypeScript</p>
+              </div>
+              <dl class="prod-meta mono">
+                <div><dt>규모</dt><dd>설비 · B2B</dd></div>
+                <div><dt>주기</dt><dd>2023 –</dd></div>
+                <div><dt>성숙도</dt><dd>TRL 8</dd></div>
+              </dl>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           4 · 한 일 — 프로젝트 원장
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-ledger" id="ledger" aria-labelledby="ledgerHeading">
+        <div class="wrap">
+          <h2 id="ledgerHeading">한 일</h2>
+          <p class="section-lead">
+            공개 가능한 49건 가운데 12건입니다. 회사 소개서에 쓰는 문장 대신 이름과 연도,
+            그리고 무엇으로 만들었는지를 적습니다.
+          </p>
+
+          <table class="ledger">
+            <caption class="sr-only">트웬티온스 수행 프로젝트 12건 — 이름, 연도, 사용 기술</caption>
+            <thead>
+              <tr>
+                <th scope="col" class="col-id">번호</th>
+                <th scope="col">프로젝트</th>
+                <th scope="col" class="col-year">연도</th>
+                <th scope="col">기술</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="mono">001</td>
+                <th scope="row">EduBill</th>
+                <td class="mono">2024</td>
+                <td class="mono">Next.js · TypeScript · Supabase PostgreSQL</td>
+              </tr>
+              <tr>
+                <td class="mono">002</td>
+                <th scope="row">과천 데이터 센터</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3 · Spring · PostgreSQL</td>
+              </tr>
+              <tr>
+                <td class="mono">003</td>
+                <th scope="row">제주 폐기물 EMS</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3 · Spring · PostgreSQL</td>
+              </tr>
+              <tr>
+                <td class="mono">004</td>
+                <th scope="row">KDIS EAI</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3 · Spring · PostgreSQL</td>
+              </tr>
+              <tr>
+                <td class="mono">005</td>
+                <th scope="row">LS 일렉 청주 FEMS</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3 · Spring · PostgreSQL</td>
+              </tr>
+              <tr>
+                <td class="mono">006</td>
+                <th scope="row">LS 전선 부스덕트</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3 · Spring · PostgreSQL</td>
+              </tr>
+              <tr>
+                <td class="mono">007</td>
+                <th scope="row">브래키츠 BSLIM</th>
+                <td class="mono">2024</td>
+                <td class="mono">Spring Boot · PostgreSQL · WebSocket</td>
+              </tr>
+              <tr>
+                <td class="mono">008</td>
+                <th scope="row">영진EL 2.0 스마트 APP</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3</td>
+              </tr>
+              <tr>
+                <td class="mono">009</td>
+                <th scope="row">미래기술학교 운영</th>
+                <td class="mono">2024</td>
+                <td class="mono">Unity Engine · Blender · Unreal Engine</td>
+              </tr>
+              <tr>
+                <td class="mono">010</td>
+                <th scope="row">한유 AFIMS</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3 · Spring · PostgreSQL</td>
+              </tr>
+              <tr>
+                <td class="mono">011</td>
+                <th scope="row">비금도 EMS</th>
+                <td class="mono">2024</td>
+                <td class="mono">Vue3 · Spring · Java</td>
+              </tr>
+              <tr class="row-mark">
+                <td class="mono">012</td>
+                <th scope="row">ACS (Auto Control System)</th>
+                <td class="mono">2024</td>
+                <td class="mono">Unity Engine · RFS 실시간 유체 시뮬레이션 · Transformer 기반 AI</td>
+              </tr>
+            </tbody>
+          </table>
+          <p class="ledger-note">
+            마지막 줄이 지금 가장 멀리 가 있는 일입니다. 데이터센터의 공기 흐름을 GPU 위에서
+            실시간으로 풀어 제어를 검증합니다.
+          </p>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           5 · 함께 일한 곳
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-partners" id="partners" aria-labelledby="partnersHeading">
+        <div class="wrap">
+          <h2 id="partnersHeading">함께 일한 곳</h2>
+          <p class="section-lead">
+            대학과 대기업 설비 부문이 섞여 있습니다. 어느 쪽이든 검수 기준이 까다로운 곳입니다.
+          </p>
+          <ul class="partners">
+            <li>LS SAUTER</li>
+            <li>경희대학교</li>
+            <li>SAEKI P&amp;C</li>
+            <li>KDI School</li>
+            <li>COSS 사업단</li>
+            <li>클라우드브릭</li>
+            <li>한유</li>
+            <li>게임랩</li>
+            <li>METANET PLATFORM</li>
+            <li>안랩</li>
+            <li>강원대학교</li>
+            <li>중앙대학교</li>
+            <li>건국대학교</li>
+            <li>한화솔루션</li>
+            <li>가비아</li>
+            <li>GS칼텍스</li>
+            <li>SK하이닉스</li>
+            <li>LG디스플레이</li>
+            <li>대구한의대학교</li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           6 · 기록 — 반전 밴드
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-dark section-record" id="record" aria-labelledby="recordHeading">
+        <div class="wrap">
+          <p class="eyebrow">최근 기록</p>
+          <h2 id="recordHeading">밖에서 확인된 것</h2>
+
+          <ol class="record-list">
+            <li>
+              <p class="rec-date mono">2026.02.24</p>
+              <div>
+                <h3>경기우수벤처기업 표창 — 경기지방중소벤처기업청장상</h3>
+                <p>기술·경영·혁신 능력이 뛰어나고 사회공헌도가 높은 벤처기업으로 인정</p>
+              </div>
+              <p class="rec-kind">수상 · 인증</p>
+            </li>
+            <li>
+              <p class="rec-date mono">2026.01.20</p>
+              <div>
+                <h3>2025 경기도 일자리 우수기업 인증</h3>
+                <p>고용증가율 10% 이상, 근무환경과 복리후생 제도 개선으로 인정</p>
+              </div>
+              <p class="rec-kind">수상 · 인증</p>
+            </li>
+            <li>
+              <p class="rec-date mono">2025.11.03</p>
+              <div>
+                <h3>건국대, 시리아·요르단 교육기관 대표단 방문</h3>
+                <p>트웬티온스와 함께 개발한 메타버스 기반 교육 플랫폼 시연</p>
+              </div>
+              <p class="rec-kind">교육 · 협력</p>
+            </li>
+            <li>
+              <p class="rec-date mono">2025.10.31</p>
+              <div>
+                <h3>중동 대표단, X-Space 에서 K-에듀테크 체험</h3>
+                <p>메타버스 기반 교육 플랫폼 체험과 협력 논의</p>
+              </div>
+              <p class="rec-kind">교육 · 협력</p>
+            </li>
+            <li>
+              <p class="rec-date mono">2025.08.19</p>
+              <div>
+                <h3>과기정통부 2025 가상융합대학원 성과공유회</h3>
+                <p>서강대 개최. AI 시대 인재양성 비전 논의에 참여</p>
+              </div>
+              <p class="rec-kind">행사</p>
+            </li>
+            <li>
+              <p class="rec-date mono">2025.07.04</p>
+              <div>
+                <h3>벤처기업 혁신성장유형 재인증</h3>
+                <p>기술 중심의 비전과 디지털 혁신 노력을 인정받음</p>
+              </div>
+              <p class="rec-kind">수상 · 인증</p>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           7 · 채용
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-career" id="career" aria-labelledby="careerHeading">
+        <div class="wrap split">
+          <div class="split-lead">
+            <h2 id="careerHeading">지금은 정규 공고가 닫혀 있습니다</h2>
+          </div>
+          <div class="split-body">
+            <p class="lead">
+              다섯 개 직무가 모두 마감 상태입니다. 닫힌 것을 열려 있는 것처럼 적어 두면
+              지원하는 쪽의 시간을 뺏게 되므로, 상태를 그대로 적습니다.
+            </p>
+            <ul class="jobs">
+              <li>
+                <span class="job-name">시니어 소프트웨어 엔지니어</span>
+                <span class="job-hint">산업용 소프트웨어 · C++ / C# / Python · PLC · HMI · SCADA</span>
+                <span class="job-state mono">마감</span>
+              </li>
+              <li>
+                <span class="job-name">DevOps 엔지니어</span>
+                <span class="job-hint">컨테이너 · 오케스트레이션 · CI/CD · IaC</span>
+                <span class="job-state mono">마감</span>
+              </li>
+              <li>
+                <span class="job-name">프로덕트 매니저</span>
+                <span class="job-hint">IT 서비스 기획·운영 3년 이상 · 데이터 기반 의사결정</span>
+                <span class="job-state mono">마감</span>
+              </li>
+              <li>
+                <span class="job-name">서비스 기획자</span>
+                <span class="job-hint">UI/UX 기획 · 와이어프레임 · 애자일 / 스크럼</span>
+                <span class="job-state mono">마감</span>
+              </li>
+              <li>
+                <span class="job-name">UI/UX 디자이너</span>
+                <span class="job-hint">Figma · 웹 / 모바일 포트폴리오 · 사용자 중심 설계</span>
+                <span class="job-state mono">마감</span>
+              </li>
+            </ul>
+            <p class="jobs-open">
+              공고와 무관하게 이야기를 시작할 수는 있습니다.
+              <a href="mailto:hello@twentyoz.kr?subject=%EC%B1%84%EC%9A%A9%20%EB%AC%B8%EC%9D%98">채용 문의 보내기</a>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- ══════════════════════════════════════════════════════════
+           8 · 연락
+           ══════════════════════════════════════════════════════════ -->
+      <section class="band band-light section-contact" id="contact" aria-labelledby="contactHeading">
+        <div class="wrap split">
+          <div class="split-lead">
+            <h2 id="contactHeading">연락</h2>
+          </div>
+          <div class="split-body">
+            <dl class="contact-rows">
+              <div>
+                <dt>주소</dt>
+                <dd>경기도 화성시 동탄첨단산업1로 27, A909호<br />(영천동, 금강펜테리움 IX 타워)</dd>
+              </div>
+              <div>
+                <dt>전화</dt>
+                <dd><a class="mono" href="tel:+8207043531190">070-4353-1190</a></dd>
+              </div>
+              <div>
+                <dt>메일</dt>
+                <dd><a class="mono" href="mailto:hello@twentyoz.kr">hello@twentyoz.kr</a></dd>
+              </div>
+              <div>
+                <dt>설립</dt>
+                <dd class="mono">2020년 1월</dd>
+              </div>
+            </dl>
+            <a class="btn" href="mailto:hello@twentyoz.kr?subject=%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EB%AC%B8%EC%9D%98">
+              프로젝트 문의
+            </a>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="band band-dark site-foot">
+      <div class="wrap foot-inner">
+        <p class="foot-name">트웬티온스 · TWENTYOZ</p>
+        <p class="foot-line">
+          가상현실 · 산업용 IoT · 이커머스 솔루션 · 경기도 화성시 동탄
+        </p>
+        <p class="foot-fine">© 2020–2026 TWENTYOZ</p>
+      </div>
+    </footer>
+  </body>
+</html>

apps/site/public/work/twentyoz-corp/styles/main.css

@@ -0,0 +1,842 @@
+@import "./tokens.css";
+
+/* ==========================================================================
+   트웬티온스 — 메인 스타일시트
+
+   현행 사이트는 순흑 한 겹이라 무엇이 중요한지 알 수 없었다. 종이를 기본으로
+   뒤집고, 반전(잉크) 밴드는 '기계'를 다루는 두 섹션(제품·기록)에만 쓴다.
+   반전은 아래 두 클래스가 토큰을 재정의하는 규칙이다 — 섹션마다 기분대로가 아니다.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+  background: var(--surface);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100dvh;
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  background: var(--surface);
+  color: var(--ink);
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  overflow-x: hidden;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+fieldset {
+  border: 0;
+}
+
+h1,
+h2,
+h3 {
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em; /* 현행 사이트의 −0.06em 은 한글 상한의 세 배였다 */
+  text-wrap: balance;
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 두 체제 ────────────────────────────────────────────────────── */
+.band-light {
+  --band-surface: var(--surface);
+  --band-surface-2: var(--surface-2);
+  --band-surface-3: var(--surface-3);
+  --band-line: var(--line);
+  --band-line-strong: var(--line-strong);
+  --band-ink: var(--ink);
+  --band-ink-muted: var(--ink-muted);
+  --band-ink-faint: var(--ink-faint);
+  --band-accent: var(--accent);
+  --band-accent-hover: var(--accent-hover);
+  --band-accent-ink: var(--accent-ink);
+  --band-accent-wash: var(--accent-wash);
+}
+
+.band-dark {
+  --band-surface: var(--dark-surface);
+  --band-surface-2: var(--dark-surface-2);
+  --band-surface-3: var(--dark-surface-3);
+  --band-line: var(--dark-line);
+  --band-line-strong: var(--dark-line-strong);
+  --band-ink: var(--dark-ink);
+  --band-ink-muted: var(--dark-ink-muted);
+  --band-ink-faint: var(--dark-ink-faint);
+  --band-accent: var(--dark-accent);
+  --band-accent-hover: var(--dark-accent-hover);
+  --band-accent-ink: var(--dark-accent-ink);
+  --band-accent-wash: var(--dark-accent-wash);
+}
+
+.band {
+  position: relative;
+  background: var(--band-surface);
+  color: var(--band-ink);
+}
+
+.band > .wrap {
+  padding-block: var(--space-8);
+}
+
+/* ── 접근성 ─────────────────────────────────────────────────────── */
+.skip-link {
+  position: fixed;
+  top: var(--space-3);
+  left: var(--space-3);
+  z-index: 200;
+  padding: var(--space-2) var(--space-3);
+  background: var(--ink);
+  color: var(--surface);
+  text-decoration: none;
+  transform: translateY(-250%);
+  transition: transform var(--dur-quick) var(--ease);
+}
+
+.skip-link:focus-visible {
+  transform: translateY(0);
+}
+
+:where(a, button, input, label, [tabindex]):focus-visible {
+  outline: 2px solid var(--band-accent, var(--accent));
+  outline-offset: 3px;
+}
+
+/* ── 헤더 ───────────────────────────────────────────────────────── */
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: var(--surface);
+  border-bottom: 1px solid var(--line-strong);
+}
+
+.head-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  min-height: 56px;
+  min-width: 0;
+}
+
+.wordmark {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.wordmark-badge {
+  display: inline-grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  background: var(--ink);
+  color: var(--surface);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2.4vw, var(--space-5));
+  min-width: 0;
+}
+
+.nav a {
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+  text-decoration: none;
+  white-space: nowrap;
+  padding-block: var(--space-2);
+  transition: color var(--dur-quick) var(--ease);
+}
+
+.nav a:hover {
+  color: var(--accent);
+}
+
+.head-meta {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ── 히어로 ─────────────────────────────────────────────────────── */
+.hero h1 {
+  font-size: var(--display);
+  max-width: 16ch;
+}
+
+.hero-lead {
+  margin-top: var(--space-4);
+  max-width: var(--measure);
+  font-size: var(--step-1);
+  color: var(--band-ink-muted);
+  line-height: var(--leading-loose);
+}
+
+/* ── 현장 선택기 — JS 0바이트. 라디오 그룹이라 좌우 화살표가 그대로 먹는다 ── */
+.fields {
+  margin-top: var(--space-6);
+}
+
+.field-radio {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.field-tabs {
+  display: grid;
+  border-top: 1px solid var(--line-strong);
+  border-bottom: 1px solid var(--line);
+}
+
+@media (min-width: 720px) {
+  .field-tabs {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.field-tabs label {
+  display: block;
+  padding: var(--space-3) var(--space-3) var(--space-3) 0;
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+  color: var(--ink-muted);
+  transition: color var(--dur-quick) var(--ease);
+}
+
+@media (min-width: 720px) {
+  .field-tabs label {
+    border-bottom: 0;
+    border-right: 1px solid var(--line);
+    padding-right: var(--space-4);
+    padding-left: var(--space-3);
+  }
+  .field-tabs label:first-of-type {
+    padding-left: 0;
+  }
+  .field-tabs label:last-of-type {
+    border-right: 0;
+  }
+}
+
+.field-tabs label:hover {
+  color: var(--ink);
+}
+
+.tab-num {
+  display: block;
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+.tab-name {
+  display: block;
+  margin-top: var(--space-1);
+  font-weight: 600;
+  font-size: var(--step-0);
+}
+
+/* 선택 상태 — 라디오가 진실의 원본이다 */
+#field-edu:checked ~ .field-tabs label[for="field-edu"],
+#field-dc:checked ~ .field-tabs label[for="field-dc"],
+#field-gov:checked ~ .field-tabs label[for="field-gov"],
+#field-plant:checked ~ .field-tabs label[for="field-plant"] {
+  color: var(--ink);
+  box-shadow: inset 0 3px 0 0 var(--accent);
+}
+
+#field-edu:checked ~ .field-tabs label[for="field-edu"] .tab-num,
+#field-dc:checked ~ .field-tabs label[for="field-dc"] .tab-num,
+#field-gov:checked ~ .field-tabs label[for="field-gov"] .tab-num,
+#field-plant:checked ~ .field-tabs label[for="field-plant"] .tab-num {
+  color: var(--accent);
+}
+
+.field-radio:focus-visible ~ .field-tabs label[for="field-edu"] {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.field-panel {
+  display: none;
+  padding-top: var(--space-5);
+}
+
+#field-edu:checked ~ .field-panels [data-panel="edu"],
+#field-dc:checked ~ .field-panels [data-panel="dc"],
+#field-gov:checked ~ .field-panels [data-panel="gov"],
+#field-plant:checked ~ .field-panels [data-panel="plant"] {
+  display: block;
+}
+
+.panel-what {
+  font-size: var(--step-1);
+  max-width: var(--measure);
+  line-height: var(--leading-loose);
+}
+
+.panel-facts {
+  margin-top: var(--space-5);
+  border-top: 1px solid var(--line);
+}
+
+.panel-facts > div {
+  display: grid;
+  gap: var(--space-1) var(--space-4);
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--line);
+}
+
+@media (min-width: 640px) {
+  .panel-facts > div {
+    grid-template-columns: 8rem 1fr;
+  }
+}
+
+.panel-facts dt {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+.panel-facts dd {
+  color: var(--ink-muted);
+  line-height: var(--leading-loose);
+}
+
+.panel-facts strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+/* ── 섹션 공통 ──────────────────────────────────────────────────── */
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--band-accent);
+  margin-bottom: var(--space-3);
+}
+
+.band h2 {
+  font-size: var(--step-3);
+  max-width: 20ch;
+}
+
+.section-lead,
+.lead {
+  margin-top: var(--space-4);
+  max-width: var(--measure);
+  color: var(--band-ink-muted);
+  font-size: var(--step-1);
+  line-height: var(--leading-loose);
+}
+
+/* ── 비대칭 2열 ─────────────────────────────────────────────────── */
+.split {
+  display: grid;
+  gap: var(--space-5);
+}
+
+@media (min-width: 900px) {
+  .split {
+    grid-template-columns: 4fr 8fr;
+    gap: var(--space-7);
+    align-items: start;
+  }
+}
+
+/* ── 수치 ───────────────────────────────────────────────────────── */
+.counts {
+  margin-top: var(--space-6);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
+  border-top: 1px solid var(--band-line-strong);
+  border-left: 1px solid var(--band-line);
+}
+
+.counts > div {
+  padding: var(--space-4);
+  border-right: 1px solid var(--band-line);
+  border-bottom: 1px solid var(--band-line);
+}
+
+.counts dt {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.counts dd {
+  margin-top: var(--space-2);
+  font-size: var(--step-3);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+}
+
+.counts dd span {
+  font-size: var(--step-0);
+  color: var(--band-ink-muted);
+  margin-left: 2px;
+}
+
+.counts-note {
+  margin-top: var(--space-4);
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+  line-height: var(--leading-loose);
+  max-width: var(--measure);
+}
+
+.counts-note a {
+  color: var(--band-accent);
+}
+
+/* ── 제품 목록 ──────────────────────────────────────────────────── */
+.product-list {
+  margin-top: var(--space-6);
+  list-style: none;
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.product-list li {
+  display: grid;
+  gap: var(--space-3);
+  padding-block: var(--space-5);
+  border-bottom: 1px solid var(--band-line);
+}
+
+@media (min-width: 900px) {
+  .product-list li {
+    grid-template-columns: 4rem 1fr 11rem;
+    gap: var(--space-5);
+    align-items: start;
+  }
+}
+
+.prod-id {
+  font-size: var(--step--1);
+  color: var(--band-accent);
+}
+
+.prod-body h3 {
+  font-size: var(--step-2);
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.prod-kind {
+  font-size: var(--step--1);
+  font-weight: 400;
+  color: var(--band-ink-faint);
+}
+
+.prod-body p {
+  margin-top: var(--space-3);
+  color: var(--band-ink-muted);
+  max-width: 46ch;
+  line-height: var(--leading-loose);
+}
+
+.prod-stack {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.prod-meta {
+  font-size: var(--step--1);
+  display: grid;
+  gap: var(--space-2);
+  align-content: start;
+}
+
+.prod-meta > div {
+  display: grid;
+  grid-template-columns: 4rem 1fr;
+  gap: var(--space-2);
+}
+
+.prod-meta dt {
+  color: var(--band-ink-faint);
+}
+
+.prod-meta dd {
+  color: var(--band-ink-muted);
+}
+
+/* ── 원장 표 ────────────────────────────────────────────────────── */
+.ledger {
+  margin-top: var(--space-6);
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--step--1);
+  text-align: left;
+}
+
+.ledger th,
+.ledger td {
+  padding: var(--space-3) var(--space-3) var(--space-3) 0;
+  border-bottom: 1px solid var(--band-line);
+  vertical-align: top;
+}
+
+.ledger thead th {
+  border-bottom: 1px solid var(--band-line-strong);
+  color: var(--band-ink-faint);
+  font-weight: 400;
+}
+
+.ledger tbody th {
+  font-weight: 600;
+  font-size: var(--step-0);
+}
+
+.ledger td {
+  color: var(--band-ink-muted);
+}
+
+.col-id {
+  width: 3.5rem;
+}
+
+.col-year {
+  width: 4rem;
+}
+
+.row-mark th,
+.row-mark td {
+  border-bottom: 0;
+}
+
+.row-mark th {
+  color: var(--band-accent);
+}
+
+.ledger-note {
+  margin-top: var(--space-4);
+  padding-top: var(--space-3);
+  border-top: 2px solid var(--band-accent);
+  font-size: var(--step--1);
+  color: var(--band-ink-muted);
+  max-width: var(--measure);
+  line-height: var(--leading-loose);
+}
+
+/* ── 파트너 ─────────────────────────────────────────────────────── */
+.section-partners {
+  background: var(--surface-2);
+}
+
+.partners {
+  margin-top: var(--space-6);
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.partners li {
+  padding: var(--space-3) var(--space-3) var(--space-3) 0;
+  border-bottom: 1px solid var(--band-line);
+  color: var(--band-ink-muted);
+  font-size: var(--step--1);
+}
+
+/* ── 기록 ───────────────────────────────────────────────────────── */
+.record-list {
+  margin-top: var(--space-6);
+  list-style: none;
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.record-list li {
+  display: grid;
+  gap: var(--space-2);
+  padding-block: var(--space-4);
+  border-bottom: 1px solid var(--band-line);
+}
+
+@media (min-width: 860px) {
+  .record-list li {
+    grid-template-columns: 7rem 1fr 7rem;
+    gap: var(--space-4);
+    align-items: baseline;
+  }
+}
+
+.rec-date {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.record-list h3 {
+  font-size: var(--step-1);
+}
+
+.record-list div p {
+  margin-top: var(--space-2);
+  color: var(--band-ink-muted);
+  font-size: var(--step--1);
+  line-height: var(--leading-loose);
+}
+
+.rec-kind {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+@media (min-width: 860px) {
+  .rec-kind {
+    text-align: right;
+  }
+}
+
+/* ── 채용 ───────────────────────────────────────────────────────── */
+.jobs {
+  margin-top: var(--space-5);
+  list-style: none;
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.jobs li {
+  display: grid;
+  gap: var(--space-1) var(--space-4);
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--band-line);
+}
+
+@media (min-width: 720px) {
+  .jobs li {
+    grid-template-columns: 14rem 1fr 4rem;
+    align-items: baseline;
+  }
+}
+
+.job-name {
+  font-weight: 600;
+}
+
+.job-hint {
+  font-size: var(--step--1);
+  color: var(--band-ink-muted);
+  line-height: var(--leading-loose);
+}
+
+.job-state {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+@media (min-width: 720px) {
+  .job-state {
+    text-align: right;
+  }
+}
+
+.jobs-open {
+  margin-top: var(--space-4);
+  font-size: var(--step--1);
+  color: var(--band-ink-muted);
+  line-height: var(--leading-loose);
+}
+
+.jobs-open a {
+  color: var(--band-accent);
+}
+
+/* ── 연락 ───────────────────────────────────────────────────────── */
+.contact-rows {
+  border-top: 1px solid var(--band-line-strong);
+}
+
+.contact-rows > div {
+  display: grid;
+  gap: var(--space-1) var(--space-4);
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--band-line);
+}
+
+@media (min-width: 640px) {
+  .contact-rows > div {
+    grid-template-columns: 6rem 1fr;
+  }
+}
+
+.contact-rows dt {
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+.contact-rows dd {
+  color: var(--band-ink-muted);
+  line-height: var(--leading-loose);
+}
+
+.contact-rows a {
+  color: var(--band-accent);
+}
+
+.btn {
+  display: inline-block;
+  margin-top: var(--space-5);
+  padding: var(--space-3) var(--space-5);
+  background: var(--band-accent);
+  color: var(--band-accent-ink);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background-color var(--dur-quick) var(--ease);
+}
+
+.btn:hover {
+  background: var(--band-accent-hover);
+}
+
+/* ── 푸터 ───────────────────────────────────────────────────────── */
+.foot-inner {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.foot-name {
+  font-weight: 600;
+}
+
+.foot-line {
+  color: var(--band-ink-muted);
+  font-size: var(--step--1);
+}
+
+.foot-fine {
+  margin-top: var(--space-4);
+  padding-top: var(--space-3);
+  border-top: 1px solid var(--band-line);
+  font-size: var(--step--1);
+  color: var(--band-ink-faint);
+}
+
+/* ── 좁은 화면 ──────────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .head-inner {
+    flex-wrap: wrap;
+    padding-block: var(--space-2);
+    row-gap: var(--space-2);
+  }
+
+  .nav {
+    order: 3;
+    width: 100%;
+    justify-content: space-between;
+    gap: var(--space-2);
+    border-top: 1px solid var(--line);
+    padding-top: var(--space-2);
+  }
+
+  .head-meta {
+    display: none;
+  }
+
+  .counts {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* ── 모션을 줄이는 설정 ─────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ── 인쇄 — 현장 선택기는 종이에서 의미가 없으므로 네 패널을 모두 편다 ── */
+@media print {
+  .site-head,
+  .skip-link,
+  .btn {
+    display: none;
+  }
+
+  .band {
+    background: #fff;
+    color: #000;
+  }
+
+  .field-panel {
+    display: block !important;
+    break-inside: avoid;
+  }
+
+  .field-tabs {
+    display: none;
+  }
+}

apps/site/public/work/twentyoz-corp/styles/tokens.css

@@ -0,0 +1,117 @@
+/* ==========================================================================
+   트웬티온스 (TWENTYOZ) — 회사 홈페이지 리디자인 · 디자인 토큰 SSOT
+
+   컨셉 : 네 개의 현장 — 회사 소개가 아니라, 같은 기술이 서로 다른 현장에서
+          무엇을 하고 있는지의 목록이 이 사이트의 본체다
+   프리셋: field-record (신규 정의. swiss-minimal 을 뼈대로 삼되 본문을 키웠다)
+   강조색: 신호 적색 1색. 라이트/다크는 규칙으로 정의된 한 쌍이므로 1종으로 센다
+
+   ── 0단계 감사 · 현행 twentyoz.kr 실측 (2026-08-24, 1249px computed style)
+   유지할 자산
+     · radius 0px 742회 — 형태 어휘가 이미 통일돼 있다. 그대로 가져간다
+     · 무채색 기조와 모노스페이스(JetBrains Mono 356회) — 정밀함의 어휘는 맞다
+     · 실제 프로젝트 49건 · 파트너 19곳 · 제품 4종의 기술 스택 표기
+   고쳐야 할 것
+     · 대비 실패 **172개 요소** — rgb(102,102,102) 가 배경 rgb(2,2,2) 위에서 3.61:1,
+       그것도 9~11px 로 284곳에 쓰였다. WCAG AA 미달이고 읽기 자체가 어렵다
+     · 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 · Open Specimens).
+       SK하이닉스·LG디스플레이·한화솔루션·GS칼텍스에 산업용 IoT 를 파는 회사의
+       어휘로는 사업을 가린다. 은유를 걷어내고 한 일을 앞에 둔다
+
+   ── 레퍼런스 실측 (2026-08-24, 1440px)
+   R1 구조 · samsara.com (커넥티드 오퍼레이션 / 산업 IoT — 같은 업종)
+       배경 #FFFFFF · FK Grotesk + FK Grotesk Mono 2패밀리
+       h1 72px/700 · 본문 16px(404회) · 최대 80px ÷ 본문 = 5.0배
+       radius 0px 2399회 지배 · 강조색 #FEAE0F 이 버튼 1곳
+       컨테이너 1425 전폭 ↔ 1345 ↔ 427 칼럼 · 섹션 13
+       → 가져온 원리: 섹션 제목이 '무엇을 증명하는가'를 직접 말한다
+         (Proven where it counts / A track record / Proudly rated #1).
+         B2B 는 주장이 아니라 기록으로 설득한다
+       → 안 가져온 것: 전체 대문자 h1 과 대문자 eyebrow 5종(슬롭 지문 2위),
+         순백·순흑, 섹션 13개, 앰버 pill 버튼
+
+   R2 톤 · lars-mueller-publishers.com (출판사 — 다른 업종)
+       텍스트 #414141 (순흑 아님) · NB Akademie Std 한 패밀리의 두 웨이트
+       h1 34px/500 · **본문 20px(190회)** · line-height 30px = 1.5
+       최대 ÷ 본문 = 1.7배 · radius 0px 1709회 지배 · 컨테이너 1240px
+       → 가져온 원리: **본문을 크게 쓰고 제목을 작게 둔다.** 위계를 크기 하나로
+         만들지 않고 여백과 순서로도 만든다. 한 패밀리의 두 웨이트로 절제한다
+       → 안 가져온 것: 강조색 #542BFF(보라 계열 — 슬롭 지문),
+         최대÷본문 1.7배(평평한 스케일은 안티패턴)
+
+   두 레퍼런스의 합성: 본문은 R2 쪽으로 키우고(17px), 최대÷본문은 R1 쪽으로
+   벌린다(4.0배). 한쪽만 따르면 평평하거나 본문이 작아진다.
+   ========================================================================== */
+
+:root {
+  /* ── 타이포그래피 — 5단계 + 스케일 밖 디스플레이 1개 ── */
+  --step--1: 0.8125rem; /* 13px — 표 머리·메타 */
+  --step-0: 1.0625rem; /* 17px — 본문. R2 의 큰 본문을 한글에 맞춰 옮겼다 */
+  --step-1: 1.25rem; /* 20px — 리드 */
+  --step-2: clamp(1.375rem, 1.15rem + 1.1vw, 1.9375rem); /* 22 → 31px */
+  --step-3: clamp(1.75rem, 1.25rem + 2.5vw, 2.875rem); /* 28 → 46px */
+  --display: clamp(2.25rem, 1.3rem + 4.6vw, 4.25rem); /* 36 → 68px */
+  /* 최대 ÷ 본문 = 68 ÷ 17 = 4.0배 */
+
+  --leading-tight: 1.2;
+  --leading-normal: 1.7;
+  --leading-loose: 1.85;
+  --measure: 33em;
+
+  --font-body: Pretendard, "Pretendard Variable", -apple-system, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+
+  /* ── 색 · 종이(라이트) ── */
+  --surface: #fafaf8;
+  --surface-2: #f0f0ec;
+  --surface-3: #e5e5e0;
+  --line: #dcdcd6;
+  --line-strong: #b9b9b2;
+  --ink: #111214; /* 17.9:1 */
+  --ink-muted: #54585c; /* 6.97:1 */
+  --ink-faint: #686d72; /* 5.03:1 */
+  --accent: #c4341f; /* 5.21:1 · 흰 글자 얹으면 5.44:1 */
+  --accent-hover: #9e2817;
+  --accent-ink: #ffffff;
+  --accent-wash: #f6e7e3;
+
+  /* ── 색 · 잉크(다크 반전 밴드) — 위 값들의 규칙적 반전 ── */
+  --dark-surface: #111214;
+  --dark-surface-2: #191b1e;
+  --dark-surface-3: #212428;
+  --dark-line: #2c3034;
+  --dark-line-strong: #40454a;
+  --dark-ink: #f2f2f0; /* 16.7:1 */
+  --dark-ink-muted: #a2a6a9; /* 7.67:1 */
+  --dark-ink-faint: #84898d; /* 5.31:1 */
+  --dark-accent: #e8563c; /* 5.17:1 */
+  --dark-accent-hover: #f2705a;
+  --dark-accent-ink: #160906;
+  --dark-accent-wash: #33170f;
+
+  /* ── 형태 — 현행 사이트가 radius 0 으로 통일돼 있다. 유지할 자산이다 ── */
+  --radius: 0;
+
+  /* ── 간격 — 저장소 SSOT 표준 ── */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6rem;
+  --space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  /* ── 모션 ── */
+  --dur-quick: 150ms;
+  --dur-normal: 380ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+}

apps/site/src/data/work.ts

@@ -40,6 +40,12 @@ import caskArchive from "../assets/shots/work-cask-archive.png";
 import caskArchive2 from "../assets/shots/work-cask-archive-2.png";
 import materiaInterior from "../assets/shots/work-materia-interior.png";
 import materiaInterior2 from "../assets/shots/work-materia-interior-2.png";
+import rfsCfd from "../assets/shots/work-rfs-cfd.png";
+import rfsCfd2 from "../assets/shots/work-rfs-cfd-2.png";
+import twentyozCorp from "../assets/shots/work-twentyoz-corp.png";
+import twentyozCorp2 from "../assets/shots/work-twentyoz-corp-2.png";
+import saebyeokCheonggwa from "../assets/shots/work-saebyeok-cheonggwa.png";
+import saebyeokCheonggwa2 from "../assets/shots/work-saebyeok-cheonggwa-2.png";
 
 export interface WorkItem {
   slug: string;
@@ -321,4 +327,69 @@ export const WORK: WorkItem[] = [
     alt: "마테리아 스튜디오 — 트래버틴 벽체 펜트하우스 거실 전경과 천연 마감재 플랫레이",
     size: "sm",
   },
+
+  /* ── 8행: 신규 쇼케이스 3종 (2 + 2 + 2) ── */
+  {
+    slug: "rfs-cfd",
+    name: "RFS — 실시간 유체 시뮬레이터",
+    kind: "데이터센터 열관리 GPU 엔진",
+    concept: "암실과 사양서 — 유동이 있는 곳은 어둡고, 읽는 곳은 밝다",
+    risk: "히어로에서 브라우저가 실제로 열유동을 풉니다. 슬라이더로 랙 부하와 급기량을 바꾸면 그 자리에서 유동이 달라집니다",
+    preset: "darkroom-spec",
+    date: "2026-08",
+    metrics: [
+      "WebGL2 실시간 열유동 (three.js 미사용)",
+      "라이트/다크 반전을 토큰 규칙으로",
+      "수치는 전부 개발 저장소 출처",
+      "정확도 지표는 싣지 않음",
+      "하드 게이트 14/14",
+    ],
+    href: "/work/rfs-cfd/",
+    shot: rfsCfd,
+    shotAlt: rfsCfd2,
+    alt: "RFS — 어두운 전산실 단면에서 서버랙 위로 초록 열기둥이 오르고 주변에 청록 냉기가 순환하는 실시간 유체 화면",
+    size: "sm",
+  },
+  {
+    slug: "twentyoz-corp",
+    name: "트웬티온스 (TWENTYOZ)",
+    kind: "ICT 기업 홈페이지 리디자인",
+    concept: "네 개의 현장 — 회사 소개가 아니라, 같은 기술이 어느 현장에서 무엇을 하는지의 목록",
+    risk: "첫 화면에 회사 이름과 슬로건을 두지 않습니다. 현장을 고르면 제품·기술·납품 사례가 통째로 바뀝니다",
+    preset: "field-record",
+    date: "2026-08",
+    metrics: [
+      "현행 사이트 감사: 대비 실패 172개 요소",
+      "한글 폰트 미지정 → Pretendard 지정",
+      "현장 전환 JS 0바이트 (라디오 그룹)",
+      "신호 적색 1색",
+      "하드 게이트 14/14",
+    ],
+    href: "/work/twentyoz-corp/",
+    shot: twentyozCorp,
+    shotAlt: twentyozCorp2,
+    alt: "트웬티온스 — 종이 톤 위에 네 개의 현장 탭이 가로로 놓이고 선택된 현장의 제품과 납품 사례가 아래에 펼쳐진 화면",
+    size: "sm",
+  },
+  {
+    slug: "saebyeok-cheonggwa",
+    name: "새벽청과 (曉靑果)",
+    kind: "청과 도매 직거래",
+    concept: "오늘 새벽 두 시의 값 — 값이 매일 바뀐다는 사실을 첫 화면의 주인공으로 삼는다",
+    risk: "상품 사진 대신 오늘의 시세판이 히어로입니다. 낙찰가와 판매가를 같은 것처럼 적지 않고, 당도를 표시할 수 없는 품목은 '—' 로 둡니다",
+    preset: "market-board",
+    date: "2026-08",
+    metrics: [
+      "시세판이 히어로",
+      "등급·당도·규격 실제 표준규격 근거",
+      "제철 12개월 띠 · 이번 달 자동 표시",
+      "새벽 남색 1색 · 사진만 유채색",
+      "하드 게이트 14/14",
+    ],
+    href: "/work/saebyeok-cheonggwa/",
+    shot: saebyeokCheonggwa,
+    shotAlt: saebyeokCheonggwa2,
+    alt: "새벽청과 — 새벽 도매시장 통로 사진 위에 품목·산지·등급·당도·낙찰가가 적힌 오늘의 시세판",
+    size: "sm",
+  },
 ];

apps/site/tools/capture-new-shots.mjs

@@ -0,0 +1,85 @@
+// 신규 쇼케이스 3종의 카드 컷 촬영 — 본컷(히어로)과 -2컷(그 페이지의 두 번째 주장).
+// WebGL 이 있는 페이지가 있으므로 --disable-gpu 를 쓰지 않고 swiftshader 로 소프트 렌더한다.
+//
+// 사용: node tools/capture-new-shots.mjs
+
+import puppeteer from "puppeteer-core";
+import fs from "node:fs";
+import path from "node:path";
+import url from "node:url";
+
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const root = path.resolve(here, "..");
+const shots = path.join(root, "src", "assets", "shots");
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const CHROME = [
+  "C:/Program Files/Google/Chrome/Application/chrome.exe",
+  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+  process.env.CHROME_PATH,
+].filter(Boolean).find((p) => fs.existsSync(p));
+
+if (!CHROME) {
+  console.error("크롬을 찾지 못했다.");
+  process.exit(2);
+}
+
+const JOBS = [
+  {
+    slug: "rfs-cfd",
+    // 유체가 정상류에 들 때까지 기다린다. 갓 켠 화면을 찍으면 빈 판이 나온다
+    settle: 5200,
+    second: { scrollTo: "#solver", wait: 700 },
+  },
+  {
+    slug: "twentyoz-corp",
+    settle: 700,
+    // 두 번째 컷은 '한 일' 원장 — 이 사이트의 본체다
+    second: { scrollTo: "#ledger", wait: 500 },
+  },
+  {
+    slug: "saebyeok-cheonggwa",
+    settle: 900,
+    second: { scrollTo: "#season", wait: 500 },
+  },
+];
+
+const browser = await puppeteer.launch({
+  executablePath: CHROME,
+  headless: "new",
+  args: [
+    "--no-sandbox",
+    "--use-angle=swiftshader",
+    "--enable-unsafe-swiftshader",
+    "--force-device-scale-factor=1",
+  ],
+  defaultViewport: { width: 1440, height: 900 },
+});
+
+for (const job of JOBS) {
+  const page = await browser.newPage();
+  await page.setCacheEnabled(false);
+  const file = path.join(root, "public/work", job.slug, "index.html");
+  await page.goto(url.pathToFileURL(file).href, { waitUntil: "networkidle0" });
+  await page.evaluate(() => document.fonts.ready);
+  await sleep(job.settle);
+
+  const main = path.join(shots, `work-${job.slug}.png`);
+  await page.screenshot({ path: main });
+  await page.screenshot({ path: path.join(root, "public/work", job.slug, "og.png") });
+
+  await page.evaluate((sel) => {
+    document.querySelector(sel)?.scrollIntoView({ behavior: "instant", block: "start" });
+  }, job.second.scrollTo);
+  await sleep(job.second.wait);
+
+  const alt = path.join(shots, `work-${job.slug}-2.png`);
+  await page.screenshot({ path: alt });
+  await page.close();
+
+  const kb = (p) => Math.round(fs.statSync(p).size / 1024);
+  console.log(`${job.slug}: 본컷 ${kb(main)}KB · 2컷 ${kb(alt)}KB`);
+}
+
+await browser.close();
+console.log("촬영 완료");

apps/site/tools/e2e-report.md

@@ -1,4 +1,4 @@
-# E2E 시나리오 게이트 — 2026-08-23 12:48
+# E2E 시나리오 게이트 — 2026-08-24 03:41
 
 단언 1805 · 통과 1805 · 실패 0 — **GREEN — 전 단언 통과**
 

apps/site/tools/gen-fruit-images.mjs

@@ -0,0 +1,103 @@
+/**
+ * 새벽청과 이미지 생성 — codex 내장 image_gen(gpt-image-2).
+ *
+ * 기존 gen-images.mjs + collect-images.mjs 는 "전부 돌린 뒤 디렉터리 생성시각 순으로
+ * 짝짓기" 라서 순서가 어긋나면 조용히 틀린 그림이 붙는다. 여기서는 한 장 돌릴 때마다
+ * 그 직전 시각 이후에 새로 생긴 파일만 집어 온다 — 짝이 어긋날 여지를 없앤다.
+ *
+ * 사용: node tools/gen-fruit-images.mjs
+ */
+import { execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const outDir = path.join(__dirname, ".gen-fruit");
+fs.mkdirSync(outDir, { recursive: true });
+
+const genRoot = path.join(os.homedir(), ".codex", "generated_images");
+
+const NO =
+  "no text, no letters, no numbers, no signage, no logos, no watermarks, no brand marks";
+
+/* 팔레트를 프롬프트에 그대로 넣는다 — 페이지 토큰과 사진이 따로 놀면
+   사진이 배경이 아니라 이물이 된다.
+   종이 흰 #FBFAF7 · 잉크 #16181A · 새벽 남색 #1F3F6B */
+const JOBS = [
+  {
+    name: "dawn-aisle",
+    prompt: `$imagegen Documentary photograph, 16:9 landscape. Interior of a Korean wholesale fruit market hall at 2am, before dawn. A long aisle between stacked wooden and cardboard fruit crates, cold fluorescent tube lighting overhead casting pools of light on a wet concrete floor, deep blue-black shadows in the depth of the hall. Palette restrained: paper white highlights, ink black shadows, one cold navy blue cast (#1F3F6B) in the far depth. The fruit itself is the only warm color — apples and pears glimpsed in the nearest crates. Empty of people. Quiet, industrious, pre-dawn mood. ${NO}. Photographic, realistic, fine film grain, no HDR.`,
+  },
+  {
+    name: "pear-crate",
+    prompt: `$imagegen Editorial still-life photograph, 4:3 landscape. A shallow wooden crate of Korean pears (large, round, russet-golden) nested in white protective mesh sleeves, sitting on a plain concrete surface. One pear lifted out and resting beside the crate. Cool overcast north light from the left, off-white background (#FBFAF7), deep neutral shadows. The pears' golden-bronze skin is the only saturated color in the frame. ${NO}. Photographic, realistic, shallow depth of field on the front pear, fine grain.`,
+  },
+  {
+    name: "grape-bloom",
+    prompt: `$imagegen Macro photograph, 3:4 portrait. A close cluster of dark purple Korean Campbell grapes with the natural pale waxy bloom still intact on the skin, a few water droplets, held against a plain off-white paper background (#FBFAF7). Extremely fine detail of the bloom's chalky film and the skin beneath. Soft even diffused light, no specular hotspots. The deep purple is the only color; everything else is neutral. ${NO}. Photographic, realistic, museum-specimen clarity.`,
+  },
+  {
+    name: "refractometer",
+    prompt: `$imagegen Close documentary photograph, 4:3 landscape. A handheld brass-and-steel optical refractometer lying open on a stainless steel worktop, its prism plate carrying a single glistening drop of clear fruit juice, a small stainless spoon and a cut wedge of melon beside it. Cool neutral light, brushed steel greys, off-white background. Precise, laboratory-adjacent but agricultural mood — this is a produce grader's tool, not a laboratory. ${NO} (the refractometer scale must not show readable numbers). Photographic, realistic, shallow depth of field on the juice drop.`,
+  },
+];
+
+const before = () => {
+  const seen = new Set();
+  if (!fs.existsSync(genRoot)) return seen;
+  for (const d of fs.readdirSync(genRoot)) {
+    const dir = path.join(genRoot, d);
+    if (!fs.statSync(dir).isDirectory()) continue;
+    for (const f of fs.readdirSync(dir)) seen.add(path.join(dir, f));
+  }
+  return seen;
+};
+
+const after = (seen) => {
+  const fresh = [];
+  if (!fs.existsSync(genRoot)) return fresh;
+  for (const d of fs.readdirSync(genRoot)) {
+    const dir = path.join(genRoot, d);
+    if (!fs.statSync(dir).isDirectory()) continue;
+    for (const f of fs.readdirSync(dir)) {
+      const p = path.join(dir, f);
+      if (!seen.has(p) && /\.(png|jpg|jpeg|webp)$/i.test(f)) {
+        fresh.push({ p, t: fs.statSync(p).mtimeMs });
+      }
+    }
+  }
+  return fresh.sort((a, b) => b.t - a.t);
+};
+
+for (const job of JOBS) {
+  const target = path.join(outDir, `${job.name}.png`);
+  if (fs.existsSync(target)) {
+    console.log(`skip  ${job.name} (이미 있음)`);
+    continue;
+  }
+  console.log(`gen   ${job.name} …`);
+  const seen = before();
+  try {
+    // Windows 의 codex 는 npm .cmd 심이라 cmd.exe 를 거쳐야 해석된다.
+    execFileSync("cmd.exe", ["/d", "/s", "/c", "codex exec --skip-git-repo-check -"], {
+      input: job.prompt,
+      encoding: "utf8",
+      timeout: 8 * 60 * 1000,
+      stdio: ["pipe", "pipe", "pipe"],
+    });
+  } catch (e) {
+    // 배너가 stderr 로 나오고 종료코드가 0 이 아닐 수 있다. 파일이 생겼는지로 판정한다
+    console.log(`      (codex 비정상 종료: ${String(e.message).slice(0, 90)})`);
+  }
+  const fresh = after(seen);
+  if (!fresh.length) {
+    console.log(`FAIL  ${job.name} — 새 이미지가 생기지 않았다`);
+    continue;
+  }
+  fs.copyFileSync(fresh[0].p, target);
+  console.log(`ok    ${job.name} ← ${path.basename(fresh[0].p)} (${Math.round(fs.statSync(target).size / 1024)}KB)`);
+}
+
+console.log("\n생성 완료:", fs.readdirSync(outDir).join(", "));

apps/site/tools/verify-report.md

@@ -1,15 +1,16 @@
-# 검증 리포트 — 2026-08-23 12:48
+# 검증 리포트 — 2026-08-24 03:41
 
-게이트: **전 계층 통과 — 배포 가능** · 총 96.5초
+게이트: **전 계층 통과 — 배포 가능** · 총 96.1초
 
 | 계층 | 결과 | 항목 | 소요 |
 |---|---|---|---|
-| L0-정적/stylelint | PASS | PASS — | 1.6s |
-| L0-정식/html-validate | PASS | PASS — | 1.3s |
-| L1-단위/계산로직 | PASS | PASS 41 | 0.1s |
-| L2-기능/감사 | PASS | PASS 72 | 10.2s |
-| L2-불변식/렌더 | PASS | PASS 10 | 17.5s |
+| L0-정적/stylelint | PASS | PASS — | 1.5s |
+| L0-정식/html-validate | PASS | PASS — | 1.5s |
+| L0-무결성/변수·경로·조판 | PASS | PASS 1 | 0.1s |
+| L1-단위/계산로직 | PASS | PASS 41 | 0.0s |
+| L2-기능/감사 | PASS | PASS 72 | 9.9s |
+| L2-불변식/렌더 | PASS | PASS 10 | 17.2s |
 | L3-시각회귀/diff | PASS | PASS 30 | 12.2s |
-| L4-WebKit | PASS | PASS 8 | 4.7s |
-| L5-탐색/키보드 | PASS | PASS 14 | 6.4s |
-| L6-시나리오/E2E | PASS | PASS — | 42.6s |
+| L4-WebKit | PASS | PASS 8 | 3.7s |
+| L5-탐색/키보드 | PASS | PASS 14 | 6.6s |
+| L6-시나리오/E2E | PASS | PASS — | 43.3s |