diff --git a/.gitignore b/.gitignore
index 41fb99f..77d0ad2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,4 @@ apps/site/dist/
 # 리서치 원본 자막(용량) — 요약 문서는 커밋한다
 research/youtube/*.srt
 research/youtube/*.vtt
+apps/site/tools/.gen/
diff --git a/apps/site/.htmlvalidate.json b/apps/site/.htmlvalidate.json
new file mode 100644
index 0000000..cb16c61
--- /dev/null
+++ b/apps/site/.htmlvalidate.json
@@ -0,0 +1,9 @@
+{
+  "extends": ["html-validate:standard"],
+  "rules": {
+    "require-sri": "off",
+    "no-inline-style": "off",
+    "doctype-style": "off",
+    "void-style": "off"
+  }
+}
diff --git a/apps/site/.stylelintrc.json b/apps/site/.stylelintrc.json
new file mode 100644
index 0000000..2c95576
--- /dev/null
+++ b/apps/site/.stylelintrc.json
@@ -0,0 +1,13 @@
+{
+  "rules": {
+    "color-no-invalid-hex": true,
+    "function-calc-no-unspaced-operator": true,
+    "string-no-newline": true,
+    "unit-no-unknown": true,
+    "property-no-unknown": true,
+    "declaration-block-no-duplicate-properties": true,
+    "no-duplicate-selectors": true,
+    "no-empty-source": true,
+    "no-unknown-animations": true
+  }
+}
diff --git a/apps/site/design.md b/apps/site/design.md
index f8df084..9cde6d9 100644
--- a/apps/site/design.md
+++ b/apps/site/design.md
@@ -489,3 +489,304 @@ Codex CLI 의 내장 `image_gen`(gpt-image-2)을 ChatGPT 구독 인증으로 호
 ---
 
 `2026-08-20` · 2판. 0~6단계 전체 경로 재주행.
+`2026-08-21` · 쇼케이스 5종 확장 (총 6개 프리셋 완성).
+- 무월 (muwol-coffee): quiet-commerce · 수치표 및 거래 원장 · 앰버 1색
+- Pulsegate (pulsegate): dark-instrument · 28개 엣지 레이턴시 계기판 · 코발트 상태점
+- 스튜디오 폼 (form-architecture): swiss-minimal · 12열 그리드 & 흑백 단면도 선화 · 무채색 98%
+- 오버톤 사운드랩 (overtone-sound): anti-grid · 비대칭 FFT 파형 레이어 & 모노 타이포 · 일렉트릭 앰버 1색
+- 한성활자연구소 (font-foundry): editorial-archival · 인터랙티브 조판 시험대 & 한지톤 파치먼트 · 인주 레드 1색
+- 전체 쇼케이스 모자이크 그리드 6칸(1-lg, 2-md, 3-sm) 완성, 고해상도 스크린샷 10종 캡처 완료.
+
+---
+
+## 2026-08-21 · 쇼케이스 10종 전면 재주행 (목요일의 화원 제외)
+
+0~6단계를 워크 단위로 다시 돌았다. **각 워크가 서로 다른 가상 클라이언트**이므로
+레퍼런스·컨셉·토큰을 페이지별로 새로 정의했다(국소 아님 — 토큰 체계 재정의 = 전체 경로).
+
+### 감사에서 발견된 것 (재주행의 이유)
+
+- 예전 10개 페이지는 전부 "계기판 흉내"였다: 영어 대문자 eyebrow, 티커 마퀴,
+  발광 상태점, 세로 GNB 레일, 카드+FIG 캡션, Math.random 가짜 샌드박스.
+  목요일의 화원만이 실제 편집 디자인이었다.
+- **dogfood 리서치 5종(aerospace·celadon·incense·optics·synapse)의 "실측값"이
+  날조였다** — `research/audit-references.md` 참고. spacex는 순흑+D-DIN,
+  museum.go.kr는 라이트 테스트 등 전부 불일치. 이번 판에서 그 수치를 토큰 근거로
+  쓰지 않았고 각 페이지 tokens.css 머리글에 그 사실을 남겼다.
+  새로 실측한 리서치: dogfood-architecture(John Pawson 724px·동일 크기·1px 선),
+  dogfood-overtone(carstennicolai 1152px·압축 스케일·obys 스태거),
+  dogfood-foundry(klim 스페시멘 서사·레드 점묘).
+
+### 페이지별 한 줄 (전부 tokens.css 머리글에 상세 기록)
+
+| 워크 | 프리셋 | 이번 판의 결정 |
+|---|---|---|
+| 무월 | quiet-commerce | 우측 레일·eyebrow 6개 폐기. 가격 첫 화면(R1), 텍스트가 상품(R2), CTA=최암반전 블록 |
+| Pulsegate | dark-instrument | 코발트는 잉크로만(배경 금지). 정적 24h 프레임, CSS scroll-draw 배선도, 단일 가격 행 |
+| 향연 | quiet-luxury | 한지 SVG 그레인, 세로쓰기 캡션, 사진 없는 상품 목록, 본문 17px·1.9행간 |
+| 비색의 침묵 | editorial-archival | 암실 3개의 방, 빙렬 풀블리드 판, 비색 액센트 1색 |
+| 스튜디오 폼 | swiss-minimal | 무채색 100%·radius 0, 텍스트 인덱스(Pawson), 스티키 평면도 scroll-draw |
+| 한성활자 | editorial-archival | 22rem 글리프+인주각, Lorem 0회, 시험대 슬라이더 3종(네이티브 input+output) |
+| 오버톤 | anti-grid | 절차적 유사-FFT 캔버스(오디오 디코드 회피), 스태거 2열, 압축 스케일, 마퀴 1회 |
+| Lumina | refraction/WebGL | three.js 커스텀 셰이더 프리즘(IOR·분산 유니폼), 본문은 캔버스와 세로 분리 |
+| 궤도 | technical-schematic | 손그린 엔진 단면도(SVG <use> 미러), 모든 수치에 측정조건, 보류 시험까지 공개 |
+| Synapse | dark-instrument | 래스터는 SIM 명시, 미측정값 '—', 윤리 섹션을 콘텐츠로 |
+
+### 프리플라이트 (기계 검증)
+
+- 정적 grep: 슬롭 지문 0건, `100vh` 0건, scroll 리스너 0건, uppercase 0건.
+  토큰 밖 hex 7곳 → 전부 토큰화(각 페이지 `--*-bright`/`--accent-hover` 추가).
+- puppeteer DOM 감사 **10페이지 × 3뷰포트(1440/390/320) = 30/30 통과**:
+  가로스크롤 0, 깨진 이미지 0, 버튼·내비 줄바꿈 0, 텍스트×사진 겹침 0, 콘솔 에러 0.
+- 걸려서 고친 것: pulsegate 320px 가로스크롤(인라인 code의 nowrap 최소폭 →
+  `display:block`+`min-width:0`), lumina 텍스트-캔버스 겹침(절대배치 폐기,
+  세로 분리 — "3D 위에 본문 금지" 원칙을 스스로 위반했었다).
+- **의도적 이탈 1건**: 폼·pulsegate의 `stroke-dashoffset` 스크롤 드로잉은
+  게이트 8(transform/opacity 외)에서 벗어난다. 선을 긋는 유일한 저비용 수단이며
+  레이아웃을 강제하지 않는 로컬 리페인트라 채택하고 여기에 기록한다.
+
+### 이미지 파이프라인 (재사용 메모)
+
+- `tools/gen-images.mjs` → codex 내장 image_gen(gpt-image-2), 프롬프트는 stdin.
+  **codex 배너가 stderr로 나오므로 세션 id 파싱은 e.stdout 포함 catch 필수.**
+  병렬 실행 시 세션 회수 경합 — `tools/collect-images.mjs`(세션 dir 생성시각순=JOBS순)으로 회수.
+- 생성 22장 → webp(900~1600px, q82) 변환로 페이지당 28~220KB.
+- 헤드리스 캡처에서 WebGL이 필요한 페이지는 `--disable-gpu` 금지,
+  `--use-angle=swiftshader` 사용(capture-shots.mjs `webgl: true`).
+
+### 다음 실행이 해야 할 일
+
+1. 비전 감사에서 남은 사소한 제안(차트 축 라벨 크기, 사진 해상도 아쉬움)은
+   기록만 남김 — 구조 결함 아님.
+2. showcase 페이지 언어판(en) 설명문을 새 디자인에 맞게 다듬을 여지.
+
+`2026-08-21` · 국소 — 모바일 메뉴 재작성 + 3건 오버플로 수정. 1′ 레퍼런스:
+navbar.gallery → browserbase.com(항목 많은 사이트는 내비 마크업 자체를 복제해
+분리한다; 우리는 5행이라 시트를 알약 전체 폭으로). `<details>` 결정 유지.
+- 시트: 11rem 조각 상자 → 알약 전체 폭, 행 48px, mono 번호(01–05)·repo·언어 행,
+  요약 아이콘 버거→X 교체, 44px 터치 대상, 등장 translateY+opacity 180ms.
+- **발견한 숨은 버그**: 닫힌 `<details>` 자식에 제작자 `display`를 주면 UA 숨김을
+  덮어써 '보이지 않지만 레이아웃에 사는' 시트가 된다 — 320px +7px의 진짜 원인.
+  `.nav-mobile:not([open]) .nav-sheet { display: none }` 안전장치 추가.
+- 행 클릭·바깥 클릭 닫힘 인라인 JS 몇 줄 추가(Esc·포커스는 여전히 브라우저 몫).
+- ≤480px: 언어 버튼은 헤더에서 물러나고 메덥 행으로(320px 헤더 7px 초과 해소).
+- Install 섹션: `@media`의 순수 `1fr` = minmax(auto,1fr) — nowrap 명령 min-content가
+  트랙을 밀어 390px +5px. `minmax(0,1fr)`로. `.t-path`는 `overflow-wrap: anywhere`.
+- 검증: / · /en/ · /showcase/ × 390/320 — 오버플로 0, 메뉴 열림/앵커 닫힘/바깥 닫힘
+  /행 48px/시트=알약 폭 전 통과.
+`2026-08-21` · 국소 — 쇼케이스에서 내비 앵커가 죽는 버그. 내비 항목은 홈 섹션
+앵커(#pipeline 등)인데 홈이 아닌 페이지에서는 그 페이지 안의 없는 앵커가 된다.
+Base 레이아웃에서 홈 판별 후 `/#…` 로 접두사(언어판별). 홈은 그대로 `#…`.
+`2026-08-21` · 국소 — 메뉴 시트 불투명화. .glass 의 잉크(white 4.5%)는 알약용
+재질이지 시트용이 아니었다: 뒤 본문이 비쳐 겹쳐 보였다. 메뉴는 크롬 —
+배경을 color-mix(surface 94%)로 채우고 rim/그림자만 유리 재질 유지.
+`2026-08-21` · 국소 — 쇼케이스를 카드+모달 구조로 재구성(사용자 지시).
+1′ 레퍼런스 tailwindcss.com/showcase(카드 해부: 이미지+이름+한줄종류+태그, 3열,
+카드 전체 클릭). taste-skill 4종 병행 적용.
+- 카드는 간단한 정보만: 스크린샷(호버 시 2번째 스크린샷 교체) + 이름 + 종류 +
+  프리셋 배지 + 컨셉 2줄 클램프. 리스크·지표는 카드에서 뺄샘 — 모달로.
+- 그리드 비균일 유지: 첫 사례만 2열 폭(featured, 1440px에서 1100px), 나머지 3열(340px).
+- 상세는 네이티브 <dialog>+showModal — Esc·포커스 트랩·inert 를 브라우저가 처리
+  (<details> 메뉴와 같은 결정론). 배경 탭·닫기 버튼은 인라인 JS 몇 줄.
+- 모달은 불투명 판(유리 금지 — 메뉴 시트와 같은 교훈), ::backdrop 만 블러.
+  큰 CTA "사이트 보기" = btn-solid + 둥근 화살 칸(cmd-copy 아이콘 어휘), 새 탭.
+- 카드 전체 클릭은 절대배치 <button> 한 개(카드당) — 텍스트는 비활성, 탭 순서=카드 순서.
+- 검증 3뷰포트(1440/390/320) 통과: 모달 열림·포커스 내부·Esc/배경/버튼 닫힘·
+  CTA _blank·오버플로 0·페이지에러 0. 닫기 버튼은 밝은 스크린샷 위 불투명 44px.
+`2026-08-21` · 국소 — 프로모션 카피 전면 재작성(사용자 지시: 광고다운 포장) +
+레이아웃 미조정. taste-skill 4종 병행.
+- **걸린 카피 결함**: "없습니다는 제약"·"못합니다는 말" 어문 붕괴 2건, 존댓말/평서체
+  혼용 전역, EN 프리플라이트 3번이 design.md에서 이미 정정된 옛 이야기(Chrome 이
+  선언을 버린다)를 그대로 싣던 것, KO 프리플라이트 6항목만 싣고 note 는 "열세 건"이라
+  주장하던 것, 미사용 showcase 블록이 옛 자리표 시절 노트("표의 값은 비어 있습니다")를
+  설명하던 것.
+- 카피 방침(파일 머리 주석으로 명문화): 본문 존댓말 통일, 제목은 단형 종결,
+  새 "—" 금지, 재지 않은 값은 미측정로. 포장은 혜택 문장으로 하되 수치는 그대로.
+- KO 프리플라이트 13항목 완전 수록(EN 기준 역번역). EN backdrop-filter 항목 정정.
+- 히어로: 리드를 "무엇인지+어떻게 다른지"로 재작성, 2차 링크 "사례 보기(/showcase)" 추가.
+- 레이아웃: h1 text-wrap:balance + 하한 3rem→2.6rem(h2 33px 대 41.6px 위계 유지,
+  320px 4줄→2줄). EN 320px만 3줄(라틴 장문의 자연 꺾임, 데스크톱 2줄 기준 충족).
+- 감사: / · /en/ × 1440/390/320 — 오버플로 0, h1 줄수 기준 충족, 링크 렌더 확인,
+  .entry 13항목 렌더 확인.
+`2026-08-22` · 국소 — 관리 앱 형태의 사례 2종 추가(사용자 지시: 메뉴가 작동하고
+모달 팝업이 있는, 학습관리 대시보드·수강신청 같은 앱).
+- **gaon-lms 가온 학적부**: 종이 학적부 톤(paper #f7f5ef, 흑연 사이드바 #24272b),
+  형광펜 밑줄 .hl(gradient 배경, 텍스트색 불변), 날인 .stamp. 뷰 3종(대시보드/수강생/
+  과제·성적) 사이드 전환 + aria-current 이동, 검색·상태칩 필터, 학생 상세 모달
+  (메모 추가 폼), 채점 모달(저장 시 표 상태 '채점 대기→채점 완료' 갱신). 모달은
+  네이티브 <dialog> — 쇼케이스 모달과 같은 결정론(Esc·포커스 트랩을 브라우저에).
+- **dure-enrollment 두레대학 수강신청**: 남색 잉크 + 주홍 申 도장. 과목 10개,
+  시간표 블록 grid-row=(start−9)×2+2(헤더 1행 오프셋), 겹침·정원 마감·학점 18
+  초과를 도장 누르기 전에 차단(openCourse 에서 warn + apply disabled), 결과는
+  인라인 status(aria-live)로. 취소는 블록 제거·학점 회수까지 되돌림.
+- **320px 함정 재발**: 모바일 미디어쿼리의 .layout 트랙이 순수 1fr(=minmax(auto,1fr))
+  라 과목 행 min-content(426px)가 문서 전체를 밀었다(+122px). Install 섹션과 동일한
+  결함 — 축소 트랙도 minmax(0,1fr). 과목 행 안 .c-main/.course-list 의 암시적 auto
+  트랙도 함께 minmax(0,1fr)로(부제 '코드·시간·강의실'이 한 단어처럼 밀리지 않게).
+- 시간표 .tt(최소폭 376px)는 .tt-scroll(overflow-x:auto)이 위젯 내부 가로 스크롤로
+  흡수 — 시간표의 표준 패턴이며 문서 오버플로가 아니다.
+- -2 스크린샷을 '모달 열림 상태'로 캡처(2종 모두) — 카드 호버 교체 컷이 첫 화면과
+  동일한 나머지 사례와 달리, 모달이 핵심 기능인 이 두 사례는 교체 컷이 얘기해야 한다.
+- 감사 25항목 통과: 뷰 전환/aria-current/검색 축소/칩 단일 선택/모달 open·닫힘(Esc·
+  버튼)/메모 추가(1→2)/채점 상태 갱신/겹침 차단(미시경제학↔생명과학, 월 14:00–14:30)/
+  신청 블록 2개(월·수)/취소 회수/1440·390·320 오버플로 0.
+- work.ts SSOT 등록: 항목 2개(size md, 6행 3+3). 지표의 JS 크기는 실측(7KB/10KB).
+`2026-08-22` · 국소 — 관리 앱 2종에 화면 5개씩 추가(사용자 지시: 상세 페이지를 더
+밀어붙이고 디자인도 개선). taste-skill 4종 병행. 연장 경로(토큰·컨셉 그대로).
+- 1′ 국소 레퍼런스(뷰 내비 축): docs.astro.build 사이드바 실측 — 폭 300px, 행 40px,
+  링크 16px, 그룹 헤더로 246개 링크를 정리. 결론: 우리는 뷰 8개라 220px 폭·기존 행
+  밀도 유지, **그룹 헤더 3개(학적/수업/학사)** 만 도입. WebFetch 으로는 지오메트리를
+  얻을 수 없어 puppeteer 로 직접 실측(docs.stripe.com·docs.github.com 은 JS 렌더로
+  사이드바가 안 잡혀 두 번 실패 후 성공).
+- **gaon-lms 3→8 화면**: 출석부(칸을 누르면 출석→지각→결석 순환, 주 전환, 반 전환,
+  휴학생은 ·), 학사 일정(2026-03 달력, 월요일 시작, 오늘=3/9 날인, 다가오는 일정),
+  상담 기록(memo 를 색인 카드로, 카드→기존 학생 모달 재사용), 자료실(배부 도장
+  토글 — 가짜 다운로드 링크 대신 상태만 기록), 학기 리포트(**명단에서 실제 계산**:
+  재원·평균 출석률·과제 제출률, 미채점은 '채점 중'으로 정직하게).
+- **dure-enrollment 1→6 화면**: 앱바 아래 색인탭 내비(활성=남색 잉크 밑줄). 관심 과목
+  (모달 안 관심 남기기 → 여섯 화면이 같은 상태 공유), 신청 내역(여기서도 취소),
+  이수 현황(네 학기 기록 + 이번 학기 신청을 학점별 실시간 집계), 과목 총람(계열
+  소계 + 여석 임박 주홍), 공지·변경(게시판 행 문법). 빈 상태는 다음 행동 버튼과
+  함께(dashed 판 + '과목 찾기로 가기').
+- 새 시각 언어: 장부 판(.sheet — 흰 종이에 먹줄 한 줄, dure 전 화면), 종이 그레인
+  (gaon body::after 고정 레이어, opacity 0.028, pointer-events:none), 표 행 hover,
+  :active scale 0.92-0.995 촉감 피드백.
+- **320px 함정 3연타(같은 결함)**: gaon 모바일 .app 순수 1fr → 사이드 min-content
+  721px 가 트랙을 밀었다(+401px). 고침: .app 축소 트랙 minmax(0,1fr) + .side
+  min-width:0 + .side-nav max-width:100%(여덟 항목 가로 색인줄은 aside 안에서만
+  스크롤). 순수 1fr 은 이제 프로젝트 금지어 — 미디어쿼리 축소 트랙에도 minmax 를
+  붙인다.
+- 감사 48항목 통과: 뷰 14개 전환·aria-current, 출석 순환·주·반 전환, 자료 필터·배부
+  토글, 달력 42칸·오늘·예정 7건, 상담 필터·카드→모달, 리포트 실계산(3명·91%·96%·
+  84.4점), 관심→목록 ★, 신청→내역·이수 +3 반영, 총람 소계, 겹침 차단 회귀, 내역에서
+  취소, 320·390·1440 오버플로 0.
+- 스크린샷 재캡처(본 컷 + 모달 -2 컷), work.ts 지표 갱신(뷰 8/6종, 리포트 실계산,
+  색인탭, 빈 상태).
+`2026-08-22` · 국소 — 모달 위치 결함 수정 + 표지 재질 개선(사용자 지시: 가운데도
+안 있고 안 이쁘다). 두 앱의 `* { margin: 0 }` 리셋이 `<dialog>` UA 스타일의
+`margin: auto`(가운데 정렬의 정체)를 지워 모달이 왼쪽 상단(left:0, top:10)에
+붙어 있었다. 쇼케이스트 모달은 별도 스코프라 무사.
+- 수정: .modal 에 `margin: auto` 명시(리셋 이긴 UA 값 되살리기). 앞으로 dialog 를
+  쓰는 페이지에서 `* { margin: 0 }` 리셋과 세트로 검사한다.
+- 표지 재질: 안쪽 먹줄(inset box-shadow ring 5px+1px — 스크롤해도 테두리 유지),
+  잉크빛 그림자(0 32px 64px -28px), ::backdrop 2px 블러+50% 딤, 등장 모션
+  translateY(14px)+scale(0.985) 240ms, 닫기 버튼 hover 채움(흑연/남색).
+- 검증: 프로덕션 margin 상하 261.656/261.672 대칭(완전 중앙), -2 컷 재캡처.
+`2026-08-22` · 국소 — 모달 재구성(사용자 지시: 빈약하고 안 이쁘다). "작은 상자에
+항목 몇 개"를 넘어 모달을 판(版)으로: 가온 학생 모달 760px 학적 카드(큰 숫자 3개,
+**실제 ATT 데이터에서 뽑은 2주 출석 스트립 10칸**, 날짜열 상담 타임라인), 채점 모달
+평균 실시간 계산(91.7→84.3, 형광펜 강조), 두레 강의계획 720px(큰 숫자 3개, **주간
+자리 미니 격자** 9–18시 비례 레일, 평가 비중 **누적 막대 한 줄** — 같은 남색의 농도
+3단). 모달 제목 step-3(28/30px)으로 상향. 검증: 세그먼트 63/189/378px=10/30/60%
+정확, 비전 오탐(비율 안 맞는다는 지적)은 DOM 실측으로 뒤집음. 48항목 재감사 통과.
+`2026-08-22` · 국소 — "변한 게 없다"는 보고의 원인은 캐시. HTML 은 엣지가 안
+담아(max-age=0) 항상 최신이지만, 정적 CSS 는 Cloudflare 존의 브라우저 캐시 TTL
+4시간이 헤더를 14400 으로 덮어쓴다(cf-cache-status REVALIDATED 실측). 새 HTML +
+옛 CSS 조합이 그려졌던 것. 대응: (1) 모든 워크 페이지의 CSS 링크를 main.css?v=2
+로 버전 걸기 — 캐시를 안 통하는 새 URL. (2) public/_headers 로 /work/* 에
+max-age=0 지정(존 설정이 우선하면 효과는 제한적). **운칙: /work 페이지 CSS 를
+고치면 반드시 ?v= 숫자를 올린다.** 근본 해법은 존의 Browser Cache TTL 을
+'Respect Existing Headers' 로 바꾸는 것(대시보드 권한 필요).
+`2026-08-22` · 국소 — "탈락" 통보에 대한 재작업: 모달을 레퍼런스 실측 없이 머릿속에서
+그린 것이 원인(스킬 1단계 위반). radix-ui.com 다이얼로그를 puppeteer 로 실측해
+문법을 기준 삼음: **폭 500px·패딩 25px·제목 17px·컨트롤 35px 통일·반지름 6px·
+완벽 중앙·헤어라인 링+부드러운 큰 그림자·수직 리듬 15-20px**(shadcn/Stripe 데모는
+리액트 이벤트가 안 잡혀 실패, Vercel 은 풀스크린이라 부적합, Framer 는 페이지
+전환). 비전 조언도 같은 결론: 오스트ere한 원시 컴포넌트를 통째로 닮지 말고
+구조 문법만 취하라.
+- 적용(레퍼런스 문법 + 종이 물성): 폭 760→620/600px, 제목 28→22/20px, 결산 숫자
+  축소, 컨트롤 높이 통일(36-38px), 그림자 0 25px 50px -12px, 백드롭 딤 0.55,
+  워터마크 7rem→4.5rem·투명도 5%, 수직 리듬 균일화(gap 20px).
+- 검증: 로컬 비전 평가 8.5-9/10(예약 사항=워터마크 가독성 → 투명도 하향으로 반영),
+  48항목 회귀 통과, 프로덕션 v=4 확인(중앙 offX=0, 제목 22px, 스트립 10칸).
+- 교훈(design.md 규칙으로 승격): **모달·새 컴포넌트를 만들 때는 반드시 실측
+  레퍼런스의 수치를 먼저 적는다. 느낌으로 폭·제목 크기를 정하지 않는다.**
+`2026-08-22` · 국소 — "변화량이 작다, 근본적으로 뜯어고쳐라" 통보: 스프레드(펼침
+장부) 구조로 전면 재구성. 모달을 "작은 상자"가 아니라 **앱 껍데기의 축소판**으로 —
+왼쪽 250px 표지판(가온=흑연 #24272b, 두레=남색 #1e3355)에 도장·이름·결산 행·물마크,
+오른쪽 종이 내용판(스크롤은 여기만). Linear/Notion 피크 다이얼로그의 분할 문법.
+- 채점 모달은 단순 중앙판 유지(내용이 짧다). 모바일(≤680px)에서 표지판은 가로 띠로
+  접히고 통계는 물러난다.
+- **"안 바뀐다"의 두 번째 범인 발견**: 로컬 3000번 서버가 옛 dist 를 서빙 중이었다
+  (netstat 에 LAN 다른 기기의 ESTABLISHED 확인 — 사용자가 옛 빌드를 보고 있었다).
+  서버를 public(소스 실시간)으로 재가동. 로컬 검증은 서빙 디렉터리부터 확인한다.
+- 검증: 비전 9/10 두 건("Linear/Notion 피크와 대등"), 48항목 회귀 통과, 프로덕션
+  v=5(mcover 7곳) 확인.
+
+## 2026-08-22 — 관리 앱 2종: shadcn 프로덕션 콘솔 문법(v6→v7)
+
+- **왼쪽 상단 모달 버그 3범인** 재확인: `* { margin: 0 }` 리셋이 `dialog`의 UA `margin: auto`(가운데 정렬)를 지운다. `.modal { margin: auto }` 없으면 모달은 (0,0)에 붙는다.
+- **overflow-x: auto의 반대축 함정**: 한 축만 auto/scroll로 지정하면 다른 축의 visible은 계산값 auto가 된다. 여기에 `margin-bottom: -1px`+보더 트릭이 더해지면 콘텐츠가 1px 넘어 **세로 스크롤이 생긴다**(Windows 비오버레이 스크롤바는 바로 보인다). 규칙: `overflow-x: auto`를 쓰면 `overflow-y: hidden`을 명시하고, 음수 마진+보더 트릭 대신 border-box 높이로 해결한다. 탭 스트립은 `scrollbar-width: none`까지(스와이프는 유지).
+- **찌꺼기 규칙 감사**: 그리드 구조를 바꿀 때 이전 구조용 선택자(`.panel:last-child { grid-column: 1/-1 }` 등)가 남아 새 배치를 엉망으로 만든다. 레이아웃 규칙을 고치면 같은 선택자 범위의 형제 규칙을 전부 읽는다.
+- **빈칸은 데이터로 메운다**: 대시보드 2열 그리드에서 우측 2행이 비었던 문제 — 패널을 `grid-row: span 2`로 늘리고 차트 아래 요일별 결산 표(출석/지각/결석/출석률+합계)를 넣어 해결. 장식이 아니라 프로덕션 정보(카드 부정보, 진행 중 배지, 미응시 경고)로 밀도를 올린다.
+- 캐시 운칙 준수: CSS 고칠 때마다 `main.css?v=N` 증가 — 현재 v7.
+
+## 2026-08-22 — LMS 필수 요소 조사 반영(v9)
+
+- 웹 검색으로 LMS 필수 기능을 조사해 가온에 없던 다섯 가지를 추가했다: **알림 센터**(탑바 종 + 드롭다운, 읽음 처리, 바깥 클릭 닫힘), **공지사항 뷰**(핀 고정 · 카테고리 칩 · 읽은 사람 수 · 아코디언 본문), **수업 진도**(과목별 차시 진행 바), **평가 유형**(과제/퀴즈/시험 칩 + 자동 채점 상태), **출결 사유·학부모 알림톡 요약**(병결/무단/보강/발송 수). 근거: 학원 LMS는 출결 알림(알림톡)·학부모 소통·보강이 일반 LMS와 구별되는 핵심 기능이라는 조사(웹헤즈, 출결톡 등).
+- 폰트 라이선스 기록(typography.md §7 의무화): 두 앱 모두 본문 Pretendard Variable(SIL OFL, 웹 임베딩·서브셋 가능, 동적 서브셋 CDN) / 모노 JetBrains Mono(OFL). 폴백은 -apple-system·system-ui, 수치 위치엔 tabular-nums 적용.
+- heredoc 잘림 재발: 긴 HTML 패치는 bash heredoc 대신 .mjs 패치 파일(Write 도구)로 쓴 뒤 실행한다 — 이미 두 번째 사고다.
+
+## 2026-08-22 — 전 뷰 프로덕션 밀도(v10)
+
+- "대시보드만 고쳤다"는 지적이 맞았다 — 뷰별 요약 스트립(statline) 컴포넌트를 만들어 아홉 뷰 전부에 같은 문법을 적용했다. **부분 개선은 완성이 아니다. 뷰 하나를 고치면 전 뷰를 같은 기준으로 훑는다.**
+- 뷰별 추가: 수강생(학년·보호자 열 + 실계산 요약 + 모달 보호자·알림톡 이력), 출석부(반·주 기준 실계산 요약 + 일별 합계 tfoot — 반 전환 시 재계산), 과제·성적(채점 진행 요약 + 과목 필터), 자료실(크기·조회 수 + 요약), 학사 일정(유형색 배지 4종 + 범례 + D-day + 월 요약), 상담(요약 + 예정 상담 3건 + 알림톡 상태), 리포트(학기 요약 카드 4장 실계산), 공지(분류 필터).
+- **감사 스크립트도 제품이다**: 검사 추가 시 셀렉터 다중 개수는 반드시 $$eval — $eval 은 첫 요소만 돌려줘 undefined.length 가 된다. 뷰 루프 순서가 바뀌면 '마지막 뷰' 전제 검사도 함께 바꾼다.
+- 표에 열을 더하면 그 표가 .table-wrap 안에 있는지 다시 본다 — 자료실이 래퍼 밖이라 390px +104px 넘침이 재발했다.
+
+## 2026-08-22 — 원론 조사 기반 전면 개정(v11): 타이포그래피·UX 방법론·한글 폰트
+
+- 14개 웹검색·출처 110여 개를 정리한 research/design-principles-v11.md(105개 항목)를 기준으로 두 앱을 개정했다. 핵심 적용: **볼드 금지·수치 웨이트 원칙**(700 제거, UA strong/th 볼드를 600/500으로 재정의, font-synthesis-weight: none), **WCAG 대비**(보조 텍스트 --faint #a1a1aa→#6e6e77, 2.6:1→5.05:1), **한글 자간 0 원칙**(h2·h3의 -0.02em 제거, 큰 제목만 -0.01em), **행길이 제한**(공지 본문 68ch), **터치 대상**(coarse 포인터에서 출석 칸 40px).
+- **폰트 전략(각주 한 문장)**: 가온 = Noto Serif KR 600(학적부 서류의 명조 결, 제목·표지만) + Pretendard Variable 본문. 두레 = IBM Plex Sans KR 본문(대학·기술 문서의 중성 목소리) + Noto Serif KR 600(공문·신문 결, 마스트헤드·제목). 모두 SIL OFL 웹임베딩 가능. **정적 웨이트 폰트(Plex)에 650을 요청하면 700으로 올라간다** — 가변 폰트에만 500 대역 중간값을 쓴다.
+- **대형 사고: CSS 닫는 중괄호 하나를 잃어 규칙 절반이 죽은 채 배포될 뻔**. 원인은 문자열 교체 패치가 닫는 } 를 삼킴. CSS 중첩 파싱 덕에 .tabs 하위 규칙은 살아 겉보기 정상이었고, .tabs 밖 규칙(표 헤더 등)만 죽어 UA th 볼드로 증상이 드러났다. **교훈: CSS를 고치면 중괄호 균형 검사를 감사에 넣는다** — 감사 도구에 brace-depth 체크 추가.
+
+## 2026-08-22 — 모바일 눈 검수와 갸행 수습(v12/v13)
+
+- "모바일은 눈으로 보라"는 지적이 맞았다 — 오버플로 수치만 보고 390px 실제 렌더를 본 적이 없었다. **390px 전 뷰 스크린샷 → 시각 검수 + Range.getClientRects 기반 줄바꿈 계측**을 병행했다.
+- 갸행 탐지기의 함정 두 개: ① 같은 줄의 strong/본문 서로 다른 폰트 메트릭이 top 을 1–2px 차이내 별도 줄로 오탐 → **top 묶음에 ±5px 허용오차 + 높이 교차검증**. ② 비전 검수는 작은 글자에서 환각(안 끊긴 시간을 끊겼다고 보고, 안 늘어난 카드를 늘어났다고 보고) → **비전은 끊김 '지점' 평가에만 쓰고, 여부는 계측으로 확정**한다.
+- 적은 수정: 라벨·본문 전역 `word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty`(한글은 어절에서만 끊고 외톨이 줄 방지), 마감 임박·예정 상담 행은 ≤680px 에서 세로 스택, 공지 행 ≤680px 1열(제목 전폭), tfoot 라벨 nowrap, 두레 과목행 부정보는 **세그먼트(코드·교수·시간·강의실)별 nowrap `<i>`** — 시간 값 "10:00–11:30" 이 중간에 끊히는 것을 원천 차단.
+- 검증 함정: 같은 세션에서 CSS 를 고치고 곧바로 찍으면 헤드리스가 옛 파일을 볼 수 있다 — **검증 직전 setCacheEnabled(false) 와 ?v= 범프를 같이** 걸고 '실제 로드된 링크 버전'을 계측값에 함께 찍는다.
+- 두레에 가온과 같은 뷰 밀도 기준 적용(관심 과목: 요약 스트립+계열 필터+학점 초과 사전 경고, 신청 내역·이수 현황·총람·공지: 실계산 요약 스트립) — "고치면 전체를 같은 기준으로" 재적용.
+
+## 2026-08-22 — 5라운드 정밀 검수(v13/v14)
+
+- **R1 데스크톱 밀도**: 두레 관심(402px)·이수(435px) 등 절반빈 뷰 발견 → 관심 빈 상태에 여석 임박 추천 3건, 이수 표에 구분별 진행 바+총 이수율 72% 바, 신청 내역에 학점 게이지+규칙 안내, 가온 리포트에 진행 차시 열.
+- **R2 극한 폭·상태**: 320px 전 뷰 오버플로 0, 모바일 모달 1열·닫기 접근·뷰포트 내, 실제 Tab 키 포커스 링 전 요소 2px solid (스크립트 focus 는 focus-visible 미적용이 올바름 — 키보드로 재검), 신청→게이지 실시간 갱신.
+- **R3 플로우**: 빈 검색 안내·특수문자 무결·필터+검색 조합·출석 순환 재계산·채점 갱신·메모→상담 동기화·관심 담기→추천 숨김·17학점+2 시도 → 신청 버튼 disabled (학점 초과 차단).
+- **R4 대비·타이포 전량 스캔**: 전 요소 fg/bg 블렌드 대비 계산 → 28건 미달 전부 --muted-foreground #71717a(4.4:1) 탓 → #64646e 로 교정(5.2:1+), 달력 '오늘' 숫자 배경 #059669→#047857(5.4:1). 웨이트 5종(450·650·550 포함) → **400/500/600 3종**으로 정규화. tabular 누락 0.
+- **R5 데이터 정합성**: 대시보드 "재원 26명"↔명단 12명, 오늘의 수업 8/8·6/9·9/9↔과목별 재학 3·3·2·3명 등 세계관 모순 발견 → 12명 기준으로 숫자 체계 전면 재정합(헤드라인·차트·결산표·마감·과제 표·알림·출결 칩·공지 읽은 사람).
+- **교훈: 데모의 숫자도 하나의 세계관을 이룬다** — 한 화면의 통계를 고치면 다른 화면의 같은 사실도 함께 고친다. 대비 스캐너(배경 블렌드 계산)와 정합 스윕은 감사 도구에 남길 가치가 있다.
+
+## 2026-08-22 — 모바일 개행 재보고: 기기 글꼴 확대 시나리오(v14/v15)
+
+- "모바일에서 개행 문제가 여전히 보인다"는 재보고. 프로덕션 실측(390/375/360)에선 h1 이 모두 1줄 — 문제는 **기기 글꼴 확대(안드로이드 큰 글꼴 1.15~1.3×)** 재현 시에 나타났다: h1 이 2줄로 부서지며 외톨이 글자가 생기고, rem 기반 여백까지 커져 제목 칸이 좁아진다.
+- **해법 — 제목은 뷰포트 단위**: `@media ≤680px { h1 { font-size: min(1.5rem, 6.4vw) } }`. vw 는 사용자 글꼴 설정을 무시하므로 제목 크기가 고정되고, 본문은 사용자 설정을 존중해 커진다. 제목은 디스플레이 요소이므로 이 예외는 정당하다. `text-wrap: balance` 를 h1(블록) 에 추가 — 예외시 균형 분할. flex 컨테이너(.n-t)의 balance 는 무의미해 제거.
+- `-webkit-text-size-adjust: 100%` 방어 추가(iOS 자동 인플레이션 차단).
+- **측정 교훈 3연타**: ① flex 컨테이너 안 아이콘과 텍스트의 top 차이가 '가짜 줄'로 집계된다 — 텍스트 노드만 분리 측정할 것. ② 비전은 전사 기반으로만 믿을 것(추측 보고가 2번 환각). ③ page.evaluate 클로저 참조 함정 세 번째 반복 — 측정 함수는 문자열로 페이지에 주입한다.
+- 검증: 폰트 스케일 1.0/1.15/1.3/1.45× 에서 h1 1줄 유지(양 앱), 공지 제목은 확대 시 어절 경계 2줄(자연스러움), 감사 ALL PASS.
+
+## 2026-08-22 — 모바일 브랜드 세로 쌓임 결함(v15)
+
+- "학적부 타이틀이 세로로 나온다"는 보고 — 표준 390px 에서도 재현: 모바일 가로 스트립에서 `.brand` 가 flex-shrink 기본값(1)으로 side-nav 에 밀려 **54px·5줄**(글자 하나씩 세로)로 찌그러짐. 스트립 높이도 145px 로 부풀어 있었다.
+- 수정: `@media ≤900px { .brand { flex: none; white-space: nowrap } }` — 브랜드는 고정 폭, 내비만 스크롤. 결과: 113px·1줄, 스트립 57px, 글꼴 확대 1.15/1.3× 에도 1줄 유지.
+- **교훈: 텍스트가 '세로로 쌓인다'는 보고는 컨테이너가 1글자 폭으로 수축했다는 뜻** — flex/grid 아이템의 shrink 기본값을 의심한다. 방어 검사에 '모든 텍스트 요소의 최소 자식 폭 ≥ 2em' 같은 수축 탐지를 넣을 만하다.
+
+## 2026-08-22 — QA 게이트 구축(v16) — 6계층과 기계적 배포 강제
+
+- 업계 조사(시각회귀·품질게이트·테스트피라미드·크로스브라우저·axe 57%·QA체크리스트)를 대조해 계획 보강 후 전 계층 구축: **L0 정적**(stylelint·html-validate) → **L1 단위**(calc.js 추출, 브라우저 없이 30 경계 테스트) → **L2 불변식**(기능 감사 61 + h1·수축·대비·axe·콘텐츠 정합·스케일×폭 행렬) → **L3 시각 회귀**(기준 30화면 pixelmatch, 0.000%) → **L4 WebKit**(Playwright, 8항목) → **L5 탐색**(키보드 완전 통과 + 여정 3개).
+- 게이트가 잡은 실제 결함: CSS 중복 셀렉터 2건, aria-label 오용 26건, dl 안 <p> 구문 위반, role="img" 라벨 소실(내 정리의 부작용까지), 두레 시간표 role="grid" 구문 위반, 두레 #q 포커스 링 — **전부 사용자 보고 이전에 자동으로 발견**.
+- **배포는 이제 `npm run verify && build && deploy` 체인으로만** — verify.mjs 실패(exit 1)면 배포 불가. 리포트(tools/verify-report.md)는 수치와 함께 자동 생성.
+- 하니스 교훈: ① 스코프 없는 선택자는 숨은 뷰의 같은 속성을 잡는다(대시보드 due-row도 data-assign 사용) — 선택자는 컨테이너 스코프 필수. ② 모달 닫힘 직후 포커스 강탈(비동기 복원) — 뷰 전환+타깃 포커스는 한 evaluate 로, 필요시 settle 후 재포커스. ③ UMD 가드는 module.exports 존재 검사가 아니라 module 존재 검사.
+
+## 2026-08-22 — 스킬 내재화: 자율 검증 폐쇄 루프(v17)
+
+- designpaca 스킬에 폐쇄 루프를 박았다: **핵심 규칙 6 "완료의 정의는 게이트 통과다"**, 5단계 기계 검사 4번째 "design-gate 실행 의무". references/audit-gate.md(사고-검사 매핑·SEO/meta 체크리스트·OS/브라우저 특성·하니스 규칙 7개) + tools/design-gate.mjs(범용 게이트, --init 스캐폴딩, 의존성 미비 SKIP) 동반.
+- 도그푸드: 스킬 게이트가 두 앱에서 **og:image·twitter:card 부재, 뷰마다 h1(9·6개)** 를 잡음 → 탭 앱 표준 구조로 교정(브랜드=페이지 h1 sr-only, 뷰 제목=h2.v-h — 명시적 클래스, 선택자 추측 금지), OG 메타+og.png 추가, v17 배포(게이트 체인).
+- **대형 사고와 자가 포착**: 패치 스크립트의 튜플 실수(`([f,t])[1]`)가 'h'→'1'·'c'→'o' 문자 치환을 일으켜 main.css 2개·invariants.mjs 가 손상 — **시각 회귀(13.9% diff)가 즉시 포착**, dist v16 빌드에서 복구. 교훈: ① 문자열 치환 패치는 사후 검증(변경 후 포함 여부 확인) 필수 — og 삽입도 조용히 실패한 뒤 재삽입했다. ② 패턴 매칭 대신 명시적 클래스(v-h)·명시적 앵커(</title>)를 쓴다. ③ 배포 아티팩트(dist)는 복구 원본이다.
+- 기준 화면 갱신 1회(h1→h2 의도 변경, 1~2px 라인박스 시프트) — 방법론대로 '검증된 의도 변경'으로 기록 후 갱신.
+
+## 2026-08-22 — 시간표 시간 라벨 깨짐 수리(v18)
+
+- 사용자 보고 "왼쪽 타임 라벨 깨짐" — 계측으로 확정: 라벨 top 간격이 22·194·43·22 불규칙, 일부 라벨 폭 78px(요일 열에 배치). **원인: span-2 셀이 섞인 그리드 자동 배치(auto-placement)의 취약성** — 시간 라벨(1행)과 셀(2행 스팬)이 교차하며 희소 배치 커서가 열1의 빈 행을 잡아 라벨이 엉뚱한 행·열로 흩어졌다. 세션 초반 의심 목록에 있던 "--rows 미사용 문제"의 실체이기도 하다.
+- 수리: buildAxis 를 **전 요소 명시적 격자 좌표**(corner 1/1, day 1/(d+1), hour (h-9)*2+2행/1열, cell 행 span2/열 d+1)로 재작성 — 자동 배치 의존 제거. 검증: 9라벨 전부 1열(40px 균일), 간격 Δ43~44px 등차(2행×21.6px 설계 정합). 시각 diff 0.38%(라벨 재배치 = 의도) 확인 후 기준 갱신, 게이트 통과, v18 배포.
+- **교훈: 혼합 span 의 그리드는 자동 배치를 믿지 않는다** — 좌표를 명시하라. 격자 레이아웃 검사에는 '라벨 등간격(Δ 균일)' 불변식을 넣을 가치가 있다(스킬 하니스 규칙 후보).
diff --git a/apps/site/gate-report.md b/apps/site/gate-report.md
new file mode 100644
index 0000000..b351de0
--- /dev/null
+++ b/apps/site/gate-report.md
@@ -0,0 +1,90 @@
+# 게이트 리포트 — 2026-08-22 12:20
+
+**전 항목 통과 — 배포 가능**
+
+```
+PASS  L0 정적 — SKIP — checks.static=false
+PASS  gaon-lms SEO/meta — title 18자·desc 74자·OG✓·alt 0결
+PASS  gaon-lms/dashboard 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/dashboard h1 1줄
+PASS  gaon-lms/dashboard 수축 없음
+PASS  gaon-lms/dashboard 리듬·트랙
+PASS  gaon-lms/dashboard 대비 AA
+PASS  gaon-lms/students 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/students h1 — SKIP — 요소 없음
+PASS  gaon-lms/students 수축 없음
+PASS  gaon-lms/students 리듬·트랙
+PASS  gaon-lms/students 대비 AA
+PASS  gaon-lms/attendance 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/attendance h1 — SKIP — 요소 없음
+PASS  gaon-lms/attendance 수축 없음
+PASS  gaon-lms/attendance 리듬·트랙
+PASS  gaon-lms/attendance 대비 AA
+PASS  gaon-lms/grades 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/grades h1 — SKIP — 요소 없음
+PASS  gaon-lms/grades 수축 없음
+PASS  gaon-lms/grades 리듬·트랙
+PASS  gaon-lms/grades 대비 AA
+PASS  gaon-lms/files 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/files h1 — SKIP — 요소 없음
+PASS  gaon-lms/files 수축 없음
+PASS  gaon-lms/files 리듬·트랙
+PASS  gaon-lms/files 대비 AA
+PASS  gaon-lms/calendar 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/calendar h1 — SKIP — 요소 없음
+PASS  gaon-lms/calendar 수축 없음
+PASS  gaon-lms/calendar 리듬·트랙
+PASS  gaon-lms/calendar 대비 AA
+PASS  gaon-lms/counsel 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/counsel h1 — SKIP — 요소 없음
+PASS  gaon-lms/counsel 수축 없음
+PASS  gaon-lms/counsel 리듬·트랙
+PASS  gaon-lms/counsel 대비 AA
+PASS  gaon-lms/report 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/report h1 — SKIP — 요소 없음
+PASS  gaon-lms/report 수축 없음
+PASS  gaon-lms/report 리듬·트랙
+PASS  gaon-lms/report 대비 AA
+PASS  gaon-lms/notice 오버플로 — 320/375/390/768/1440
+PASS  gaon-lms/notice h1 — SKIP — 요소 없음
+PASS  gaon-lms/notice 수축 없음
+PASS  gaon-lms/notice 리듬·트랙
+PASS  gaon-lms/notice 대비 AA
+PASS  gaon-lms 스케일×폭 h1 — scales 1/1.3
+PASS  gaon-lms 브랜드 1줄
+PASS  dure-enrollment SEO/meta — title 15자·desc 79자·OG✓·alt 0결
+PASS  dure-enrollment/catalog 오버플로 — 320/375/390/768/1440
+PASS  dure-enrollment/catalog h1 1줄
+PASS  dure-enrollment/catalog 수축 없음
+PASS  dure-enrollment/catalog 리듬·트랙
+PASS  dure-enrollment/catalog 대비 AA
+PASS  dure-enrollment/starred 오버플로 — 320/375/390/768/1440
+PASS  dure-enrollment/starred h1 — SKIP — 요소 없음
+PASS  dure-enrollment/starred 수축 없음
+PASS  dure-enrollment/starred 리듬·트랙
+PASS  dure-enrollment/starred 대비 AA
+PASS  dure-enrollment/enrollments 오버플로 — 320/375/390/768/1440
+PASS  dure-enrollment/enrollments h1 — SKIP — 요소 없음
+PASS  dure-enrollment/enrollments 수축 없음
+PASS  dure-enrollment/enrollments 리듬·트랙
+PASS  dure-enrollment/enrollments 대비 AA
+PASS  dure-enrollment/credits 오버플로 — 320/375/390/768/1440
+PASS  dure-enrollment/credits h1 — SKIP — 요소 없음
+PASS  dure-enrollment/credits 수축 없음
+PASS  dure-enrollment/credits 리듬·트랙
+PASS  dure-enrollment/credits 대비 AA
+PASS  dure-enrollment/archive 오버플로 — 320/375/390/768/1440
+PASS  dure-enrollment/archive h1 — SKIP — 요소 없음
+PASS  dure-enrollment/archive 수축 없음
+PASS  dure-enrollment/archive 리듬·트랙
+PASS  dure-enrollment/archive 대비 AA
+PASS  dure-enrollment/notices 오버플로 — 320/375/390/768/1440
+PASS  dure-enrollment/notices h1 — SKIP — 요소 없음
+PASS  dure-enrollment/notices 수축 없음
+PASS  dure-enrollment/notices 리듬·트랙
+PASS  dure-enrollment/notices 대비 AA
+PASS  dure-enrollment 스케일×폭 h1 — scales 1/1.3
+PASS  dure-enrollment 브랜드 1줄
+PASS  L3 시각 회귀 — SKIP — checks.visual=false
+PASS  L4 WebKit — SKIP — checks.webkit=false
+```
diff --git a/apps/site/gate.config.json b/apps/site/gate.config.json
new file mode 100644
index 0000000..03362ed
--- /dev/null
+++ b/apps/site/gate.config.json
@@ -0,0 +1,65 @@
+{
+  "pages": [
+    {
+      "name": "gaon-lms",
+      "path": "public/work/gaon-lms/index.html",
+      "viewAttribute": "data-view",
+      "views": [
+        "dashboard",
+        "students",
+        "attendance",
+        "grades",
+        "files",
+        "calendar",
+        "counsel",
+        "report",
+        "notice"
+      ],
+      "h1": "h2.v-h",
+      "brand": ".brand"
+    },
+    {
+      "name": "dure-enrollment",
+      "path": "public/work/dure-enrollment/index.html",
+      "viewAttribute": "data-view",
+      "views": [
+        "catalog",
+        "starred",
+        "enrollments",
+        "credits",
+        "archive",
+        "notices"
+      ],
+      "h1": "h2.v-h",
+      "brand": ".brand"
+    }
+  ],
+  "widths": [
+    320,
+    375,
+    390,
+    768,
+    1440
+  ],
+  "fontScales": [
+    1,
+    1.3
+  ],
+  "thresholds": {
+    "contrastNormal": 4.5,
+    "contrastLarge": 3,
+    "visualDiffPct": 0.1,
+    "stackLines": 3
+  },
+  "checks": {
+    "meta": true,
+    "contrast": true,
+    "stack": true,
+    "wrap": true,
+    "scaleMatrix": true,
+    "static": false,
+    "visual": false,
+    "webkit": false
+  },
+  "chromePath": null
+}
diff --git a/apps/site/package-lock.json b/apps/site/package-lock.json
new file mode 100644
index 0000000..f7ac17f
--- /dev/null
+++ b/apps/site/package-lock.json
@@ -0,0 +1,2411 @@
+{
+  "name": "@designpaca/site",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@designpaca/site",
+      "version": "0.1.0",
+      "dependencies": {
+        "astro": "^5.1.1",
+        "sharp": "^0.35.3",
+        "three": "^0.185.1"
+      },
+      "devDependencies": {
+        "axe-core": "^4.13.0",
+        "html-validate": "^10.11.3",
+        "pixelmatch": "^7.2.0",
+        "playwright": "^1.62.1",
+        "pngjs": "^7.0.0",
+        "puppeteer-core": "^25.8.0",
+        "stylelint": "^17.14.1"
+      }
+    },
+    "../../node_modules/.pnpm/astro@5.18.2_@types+node@22_d643f06ffacebc5bc56ea30a9bd9ffce/node_modules/astro": {
+      "version": "5.18.2",
+      "license": "MIT",
+      "dependencies": {
+        "@astrojs/compiler": "^2.13.0",
+        "@astrojs/internal-helpers": "0.7.6",
+        "@astrojs/markdown-remark": "6.3.11",
+        "@astrojs/telemetry": "3.3.0",
+        "@capsizecss/unpack": "^4.0.0",
+        "@oslojs/encoding": "^1.1.0",
+        "@rollup/pluginutils": "^5.3.0",
+        "acorn": "^8.15.0",
+        "aria-query": "^5.3.2",
+        "axobject-query": "^4.1.0",
+        "boxen": "8.0.1",
+        "ci-info": "^4.3.1",
+        "clsx": "^2.1.1",
+        "common-ancestor-path": "^1.0.1",
+        "cookie": "^1.1.1",
+        "cssesc": "^3.0.0",
+        "debug": "^4.4.3",
+        "deterministic-object-hash": "^2.0.2",
+        "devalue": "^5.6.2",
+        "diff": "^8.0.3",
+        "dlv": "^1.1.3",
+        "dset": "^3.1.4",
+        "es-module-lexer": "^1.7.0",
+        "esbuild": "^0.27.3",
+        "estree-walker": "^3.0.3",
+        "flattie": "^1.1.1",
+        "fontace": "~0.4.0",
+        "github-slugger": "^2.0.0",
+        "html-escaper": "3.0.3",
+        "http-cache-semantics": "^4.2.0",
+        "import-meta-resolve": "^4.2.0",
+        "js-yaml": "^4.1.1",
+        "magic-string": "^0.30.21",
+        "magicast": "^0.5.1",
+        "mrmime": "^2.0.1",
+        "neotraverse": "^0.6.18",
+        "p-limit": "^6.2.0",
+        "p-queue": "^8.1.1",
+        "package-manager-detector": "^1.6.0",
+        "piccolore": "^0.1.3",
+        "picomatch": "^4.0.3",
+        "prompts": "^2.4.2",
+        "rehype": "^13.0.2",
+        "semver": "^7.7.3",
+        "shiki": "^3.21.0",
+        "smol-toml": "^1.6.0",
+        "svgo": "^4.0.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tsconfck": "^3.1.6",
+        "ultrahtml": "^1.6.0",
+        "unifont": "~0.7.3",
+        "unist-util-visit": "^5.0.0",
+        "unstorage": "^1.17.4",
+        "vfile": "^6.0.3",
+        "vite": "^6.4.1",
+        "vitefu": "^1.1.1",
+        "xxhash-wasm": "^1.1.0",
+        "yargs-parser": "^21.1.1",
+        "yocto-spinner": "^0.2.3",
+        "zod": "^3.25.76",
+        "zod-to-json-schema": "^3.25.1",
+        "zod-to-ts": "^1.2.0"
+      },
+      "bin": {
+        "astro": "astro.js"
+      },
+      "devDependencies": {
+        "@astrojs/check": "0.9.6",
+        "@playwright/test": "1.57.0",
+        "@types/aria-query": "^5.0.4",
+        "@types/common-ancestor-path": "^1.0.2",
+        "@types/cssesc": "^3.0.2",
+        "@types/debug": "^4.1.12",
+        "@types/dlv": "^1.1.5",
+        "@types/hast": "^3.0.4",
+        "@types/html-escaper": "3.0.4",
+        "@types/http-cache-semantics": "^4.0.4",
+        "@types/js-yaml": "^4.0.9",
+        "@types/picomatch": "^3.0.2",
+        "@types/prompts": "^2.4.9",
+        "@types/semver": "^7.7.1",
+        "@types/yargs-parser": "^21.0.3",
+        "astro-scripts": "0.0.14",
+        "cheerio": "1.1.2",
+        "eol": "^0.10.0",
+        "expect-type": "^1.3.0",
+        "fs-fixture": "^2.11.0",
+        "mdast-util-mdx": "^3.0.0",
+        "mdast-util-mdx-jsx": "^3.2.0",
+        "node-mocks-http": "^1.17.2",
+        "parse-srcset": "^1.0.2",
+        "rehype-autolink-headings": "^7.1.0",
+        "rehype-slug": "^6.0.0",
+        "rehype-toc": "^3.0.2",
+        "remark-code-titles": "^0.1.2",
+        "rollup": "^4.55.1",
+        "sass": "^1.97.2",
+        "typescript": "^5.9.3",
+        "undici": "^6.23.0",
+        "unified": "^11.0.5",
+        "vitest": "^3.2.4"
+      },
+      "engines": {
+        "node": "18.20.8 || ^20.3.0 || >=22.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/astrodotbuild"
+      },
+      "optionalDependencies": {
+        "sharp": "^0.34.0"
+      }
+    },
+    "../../node_modules/.pnpm/sharp@0.35.3_@types+node@22.20.1/node_modules/sharp": {
+      "version": "0.35.3",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.1.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.8.5"
+      },
+      "devDependencies": {
+        "@biomejs/biome": "^2.5.1",
+        "@cpplint/cli": "^0.1.0",
+        "@emnapi/runtime": "^1.11.1",
+        "@img/sharp-libvips-dev": "1.3.2",
+        "@img/sharp-libvips-dev-wasm32": "1.3.2",
+        "@img/sharp-libvips-win32-arm64": "1.3.2",
+        "@img/sharp-libvips-win32-ia32": "1.3.2",
+        "@img/sharp-libvips-win32-x64": "1.3.2",
+        "@types/node": "*",
+        "emnapi": "^1.11.1",
+        "exif-reader": "^2.0.3",
+        "extract-zip": "^2.0.1",
+        "icc": "^4.0.0",
+        "node-addon-api": "^8.9.0",
+        "node-gyp": "^12.4.0",
+        "publint": "^0.3.21",
+        "tar-fs": "^3.1.3",
+        "tsd": "^0.33.0"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.35.3",
+        "@img/sharp-darwin-x64": "0.35.3",
+        "@img/sharp-freebsd-wasm32": "0.35.3",
+        "@img/sharp-libvips-darwin-arm64": "1.3.2",
+        "@img/sharp-libvips-darwin-x64": "1.3.2",
+        "@img/sharp-libvips-linux-arm": "1.3.2",
+        "@img/sharp-libvips-linux-arm64": "1.3.2",
+        "@img/sharp-libvips-linux-ppc64": "1.3.2",
+        "@img/sharp-libvips-linux-riscv64": "1.3.2",
+        "@img/sharp-libvips-linux-s390x": "1.3.2",
+        "@img/sharp-libvips-linux-x64": "1.3.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.2",
+        "@img/sharp-linux-arm": "0.35.3",
+        "@img/sharp-linux-arm64": "0.35.3",
+        "@img/sharp-linux-ppc64": "0.35.3",
+        "@img/sharp-linux-riscv64": "0.35.3",
+        "@img/sharp-linux-s390x": "0.35.3",
+        "@img/sharp-linux-x64": "0.35.3",
+        "@img/sharp-linuxmusl-arm64": "0.35.3",
+        "@img/sharp-linuxmusl-x64": "0.35.3",
+        "@img/sharp-webcontainers-wasm32": "0.35.3",
+        "@img/sharp-win32-arm64": "0.35.3",
+        "@img/sharp-win32-ia32": "0.35.3",
+        "@img/sharp-win32-x64": "0.35.3"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "../../node_modules/.pnpm/three@0.185.1/node_modules/three": {
+      "version": "0.185.1",
+      "license": "MIT",
+      "devDependencies": {
+        "@eslint/js": "^9.0.0",
+        "@rollup/plugin-node-resolve": "^16.0.0",
+        "@rollup/plugin-terser": "^1.0.0",
+        "eslint": "^9.0.0",
+        "eslint-config-mdcs": "^5.0.0",
+        "eslint-plugin-compat": "^7.0.0",
+        "eslint-plugin-html": "^8.1.3",
+        "eslint-plugin-jsdoc": "^63.0.0",
+        "globals": "^17.0.0",
+        "jpeg-js": "^0.4.4",
+        "jsdoc": "^4.0.5",
+        "magic-string": "^0.30.0",
+        "pngjs": "^7.0.0",
+        "puppeteer": "^25.0.0",
+        "rollup": "^4.6.0",
+        "turndown": "^7.2.2"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@cacheable/memory": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.2.0.tgz",
+      "integrity": "sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/utils": "^2.5.0",
+        "@keyv/bigmap": "^1.3.1",
+        "hookified": "^1.15.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@cacheable/utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.5.0.tgz",
+      "integrity": "sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.5.1",
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.3.0.tgz",
+      "integrity": "sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.8.tgz",
+      "integrity": "sha512-CpMLjAvwQg3BL5S0IeqsZNMH7EQrEWi0kLKOC13ZBF0ZwERiLWlibNPJr8G1kdU3Ms/r2KiNrF81pUh2HwAHdg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peerDependencies": {
+        "css-tree": "^3.2.1"
+      },
+      "peerDependenciesMeta": {
+        "css-tree": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz",
+      "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/selector-resolve-nested": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.1.tgz",
+      "integrity": "sha512-j3vdQu0XwLME5qOTWxm8cnmvsf423R2YL6DbKklCHZwkDm7UdKNu6RPlw4REIJhSlKBICY3B70/7QZdicLqZgg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz",
+      "integrity": "sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^7.1.1"
+      }
+    },
+    "node_modules/@html-validate/stylish": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@html-validate/stylish/-/stylish-5.1.0.tgz",
+      "integrity": "sha512-Tyx/ZbHBpVZjvSleNplNMUhqT4UY1HwAMC97GSmasJXggWuvjNFLBS2scqnEb+ZG1szLq4zgjOioj7cVWV9WuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.11 || >= 22.16"
+      }
+    },
+    "node_modules/@keyv/bigmap": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.3.1.tgz",
+      "integrity": "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hashery": "^1.4.0",
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "keyv": "^5.6.0"
+      }
+    },
+    "node_modules/@keyv/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@puppeteer/browsers": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.2.1.tgz",
+      "integrity": "sha512-KDz+3qDRdBAlRlMjmKyj6dEs33YHTk/xRHEENSXq6TNnhgoU15ruSHtEBeVF6OZ9tBDY55Se4P0nFMNsipzU9A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "modern-tar": "^0.8.0",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "browsers": "lib/main-cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      },
+      "peerDependencies": {
+        "proxy-agent": ">=8.0.1",
+        "yauzl": "^2.10.0 || ^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "proxy-agent": {
+          "optional": true
+        },
+        "yauzl": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@sidvind/better-ajv-errors": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@sidvind/better-ajv-errors/-/better-ajv-errors-4.0.1.tgz",
+      "integrity": "sha512-6arF1ssKxItxgitPYXafUoLmsVBA6K7m9+ZGj6hLDoBl7nWpJ33EInwQUdHTle2METeWGxgQiqSex20KZRykew==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "kleur": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "ajv": "^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.3.0.tgz",
+      "integrity": "sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/astro": {
+      "resolved": "../../node_modules/.pnpm/astro@5.18.2_@types+node@22_d643f06ffacebc5bc56ea30a9bd9ffce/node_modules/astro",
+      "link": true
+    },
+    "node_modules/axe-core": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.13.0.tgz",
+      "integrity": "sha512-UzGt8zg7Ny8djbYMhxl2zuEevVa7r2gJjYY5Lwr1xM7+XU2nd6CkIWFTVcCIbAP63vSz71NaVyyuSk9lHKcy0A==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.9.tgz",
+      "integrity": "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.5.0.tgz",
+      "integrity": "sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@cacheable/memory": "^2.2.0",
+        "@cacheable/utils": "^2.5.0",
+        "hookified": "^1.15.0",
+        "keyv": "^5.6.0",
+        "qified": "^0.10.1"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/chromium-bidi": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-17.0.2.tgz",
+      "integrity": "sha512-5v9GQFhTktFvotn/OFNJBmKLKRAb6n9r0bVCwf7sHgWc3/JryK0bj1nn93L3pHFrfgcsu6Be6EWsDi+1XHTGDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mitt": "^3.0.1",
+        "zod": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=20.19.0 <22.0.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colord": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.10.0.tgz",
+      "integrity": "sha512-AidJptpBJmjTclAp9BkLwJi0T93fo5epJnbaZslpg6QVzpHjAiveF55mE9AcUJiGMqRHgMDY8soMsQtuNYMHfw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-functions-list": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.3.3.tgz",
+      "integrity": "sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1666840",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1666840.tgz",
+      "integrity": "sha512-gCcO42XCHKEs7Ag0S7aGYsnJ7hlgrO3qderYqeiY0Eqk+0GFfuvT13IA0hHreJTa2KCdDVyGMeOhdMNmrrTjVg==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz",
+      "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-11.1.5.tgz",
+      "integrity": "sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^6.1.23"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "6.1.23",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.23.tgz",
+      "integrity": "sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cacheable": "^2.5.0",
+        "flatted": "^3.4.2",
+        "hookified": "^1.15.0"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.4.tgz",
+      "integrity": "sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/globby": {
+      "version": "16.2.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-16.2.4.tgz",
+      "integrity": "sha512-c8B/VNLmxRcmqqenRA9t+9IyOjf9+V6lTxPaUJLqOCONdQkWZ0ETYgX0qbtJqPsgCNusT9MZ5Jeidw8Eb9tn2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "fast-glob": "^3.3.3",
+        "ignore": "^7.0.5",
+        "is-path-inside": "^4.0.0",
+        "micromatch": "^4.0.8",
+        "slash": "^5.1.0",
+        "unicorn-magic": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/has-flag": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-5.0.1.tgz",
+      "integrity": "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hashery": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.5.1.tgz",
+      "integrity": "sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^1.15.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/hookified": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",
+      "integrity": "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/html-tags": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-5.1.0.tgz",
+      "integrity": "sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/html-validate": {
+      "version": "10.11.3",
+      "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-10.11.3.tgz",
+      "integrity": "sha512-wKUq9iR6bukMgiHhs/ORThZzEbQoFiiPNN7aZfQ8dlmhttPb2sM2Ji2p+Fy5Xj1aH7QHJ1biT2SUDw7A01P2oA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/html-validate"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@html-validate/stylish": "^5.0.0",
+        "@sidvind/better-ajv-errors": "4.0.1",
+        "ajv": "^8.0.0",
+        "glob": "^13.0.0",
+        "kleur": "^4.1.0",
+        "minimist": "^1.2.0",
+        "prompts": "^2.0.0",
+        "semver": "^7.0.0"
+      },
+      "bin": {
+        "html-validate": "bin/html-validate.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >= 22.16.0"
+      },
+      "peerDependencies": {
+        "jest": "^28.1.3 || ^29.0.3 || ^30.0.0",
+        "jest-diff": "^28.1.3 || ^29.0.3 || ^30.0.0",
+        "jest-snapshot": "^28.1.3 || ^29.0.3 || ^30.0.0",
+        "vitest": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.1"
+      },
+      "peerDependenciesMeta": {
+        "jest": {
+          "optional": true
+        },
+        "jest-diff": {
+          "optional": true
+        },
+        "jest-snapshot": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ignore": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.6.tgz",
+      "integrity": "sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz",
+      "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.1.tgz",
+      "integrity": "sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/keyv": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+      "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@keyv/serialize": "^1.1.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "11.5.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.2.tgz",
+      "integrity": "sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/mathml-tag-names": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz",
+      "integrity": "sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/meow": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-14.1.0.tgz",
+      "integrity": "sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/modern-tar": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.8.4.tgz",
+      "integrity": "sha512-gN54ddmyzEg10orwZ2u4OOv+bjpMWdIl5jIkodK97bMq8QBSL5c0D7YX0lT1Ooz+99S7+PvFbnxzdjgHo1r41g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pixelmatch": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-7.2.0.tgz",
+      "integrity": "sha512-xhcb4yHu9sM/G7foGzoLtXYcC0zHEaOXXjRKhGup0fw78Nf2Tkiapv4EQyMzrbcmQPsllAI7DbFY2UT7PlI9Pg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "pngjs": "^7.0.0"
+      },
+      "bin": {
+        "pixelmatch": "bin/pixelmatch"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/pngjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz",
+      "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.19.0"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.17",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.5.tgz",
+      "integrity": "sha512-KvvtD7SrlBP7dlgkBghEE3r84CABm5SmV2aNcG4oCA+qDnJ/tvKonFVvwWAyyWUEwxuNawdfEAZKP9zM3oZ2Uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prompts/node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "25.8.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-25.8.0.tgz",
+      "integrity": "sha512-LDOrawV8vfCVk+yLj2ozvajNP4Sv3OV9y3Tpiyy2g2Z+aQlbcozP6KJfI4iSBq7YQER+86ihEtPa5ioiZyWxMQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "3.2.1",
+        "chromium-bidi": "17.0.2",
+        "devtools-protocol": "0.0.1666840",
+        "typed-query-selector": "^2.12.2",
+        "webdriver-bidi-protocol": "0.4.2",
+        "ws": "^8.21.1"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/qified": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/qified/-/qified-0.10.1.tgz",
+      "integrity": "sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hookified": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/qified/node_modules/hookified": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/hookified/-/hookified-2.2.0.tgz",
+      "integrity": "sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "resolved": "../../node_modules/.pnpm/sharp@0.35.3_@types+node@22.20.1/node_modules/sharp",
+      "link": true
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/slash": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
+      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.2.tgz",
+      "integrity": "sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/stylelint": {
+      "version": "17.14.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.14.1.tgz",
+      "integrity": "sha512-xVQwyiuxALUBNB2fBe0tmNemg9KqLtdj3T64mioFDar79B2cU8LIyz+3KL6LdiHs9NkeNfwxpKSaIVOY8f112g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^3.2.1",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-syntax-patches-for-csstree": "^1.1.6",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "@csstools/media-query-list-parser": "^5.0.0",
+        "@csstools/selector-resolve-nested": "^4.0.0",
+        "@csstools/selector-specificity": "^6.0.0",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^9.0.2",
+        "css-functions-list": "^3.3.3",
+        "css-tree": "^3.2.1",
+        "debug": "^4.4.3",
+        "fast-glob": "^3.3.3",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^11.1.5",
+        "global-modules": "^2.0.0",
+        "globby": "^16.2.1",
+        "globjoin": "^0.1.4",
+        "html-tags": "^5.1.0",
+        "ignore": "^7.0.5",
+        "import-meta-resolve": "^4.2.0",
+        "mathml-tag-names": "^4.0.0",
+        "meow": "^14.1.0",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.5.16",
+        "postcss-safe-parser": "^7.0.1",
+        "postcss-selector-parser": "^7.1.4",
+        "postcss-value-parser": "^4.2.0",
+        "string-width": "^8.2.1",
+        "supports-hyperlinks": "^4.5.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.9.0",
+        "write-file-atomic": "^7.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+      "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-hyperlinks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-4.5.0.tgz",
+      "integrity": "sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^5.0.1",
+        "supports-color": "^10.2.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+      }
+    },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
+    "node_modules/table": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
+      "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/table/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/table/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/three": {
+      "resolved": "../../node_modules/.pnpm/three@0.185.1/node_modules/three",
+      "link": true
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
+      "integrity": "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unicorn-magic": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz",
+      "integrity": "sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/webdriver-bidi-protocol": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.2.tgz",
+      "integrity": "sha512-VSV+fzfChirL3e7jay2yUC7B4HQCGtEWEg/MSSQbK+qWbqeGlRLlXTzPpYr3XGUvbpDHumWZBJxgesg4N7dbtA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/write-file-atomic": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-7.0.1.tgz",
+      "integrity": "sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "18.1.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.1.0.tgz",
+      "integrity": "sha512-2rAgRKu54VsHkqI0/tYkmluGXHD4KW7yZoycuqDQ15QOTnc2VVfy0nN/1eMhnQLO00A+dwtK20xuCnc1YGeUyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^8.2.1",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    }
+  }
+}
diff --git a/apps/site/package.json b/apps/site/package.json
index 3cd659b..a381da2 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -7,11 +7,21 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "typecheck": "echo \"(사이트는 build 로 검증한다)\""
+    "typecheck": "echo \"(사이트는 build 로 검증한다)\"",
+    "verify": "node tools/verify.mjs"
   },
   "dependencies": {
     "astro": "^5.1.1",
     "sharp": "^0.35.3",
     "three": "^0.185.1"
+  },
+  "devDependencies": {
+    "axe-core": "^4.13.0",
+    "html-validate": "^10.11.3",
+    "pixelmatch": "^7.2.0",
+    "playwright": "^1.62.1",
+    "pngjs": "^7.0.0",
+    "puppeteer-core": "^25.8.0",
+    "stylelint": "^17.14.1"
   }
 }
diff --git a/apps/site/public/_headers b/apps/site/public/_headers
new file mode 100644
index 0000000..ad2529f
--- /dev/null
+++ b/apps/site/public/_headers
@@ -0,0 +1,5 @@
+# 워크 페이지(HTML·CSS)는 즉시 갱신이 보여야 한다 — 데모 갤러리의 생명.
+# HTML 은 CF Pages 기본이 max-age=0 이지만 CSS 가 4시간 캐시되어
+# 새 HTML + 옛 CSS 조합이 사용자에게 그려진 적이 있다(2026-08-22 실측).
+/work/*
+  Cache-Control: public, max-age=0, must-revalidate
diff --git a/apps/site/public/work/baekje-celadon/assets/crazing.webp b/apps/site/public/work/baekje-celadon/assets/crazing.webp
new file mode 100644
index 0000000..d92c7c0
Binary files /dev/null and b/apps/site/public/work/baekje-celadon/assets/crazing.webp differ
diff --git a/apps/site/public/work/baekje-celadon/assets/ewer-dark.webp b/apps/site/public/work/baekje-celadon/assets/ewer-dark.webp
new file mode 100644
index 0000000..0a286ea
Binary files /dev/null and b/apps/site/public/work/baekje-celadon/assets/ewer-dark.webp differ
diff --git a/apps/site/public/work/baekje-celadon/assets/inlay.webp b/apps/site/public/work/baekje-celadon/assets/inlay.webp
new file mode 100644
index 0000000..cd98d02
Binary files /dev/null and b/apps/site/public/work/baekje-celadon/assets/inlay.webp differ
diff --git a/apps/site/public/work/baekje-celadon/index.html b/apps/site/public/work/baekje-celadon/index.html
new file mode 100644
index 0000000..58d9e74
--- /dev/null
+++ b/apps/site/public/work/baekje-celadon/index.html
@@ -0,0 +1,210 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>비색의 침묵 · 고려청자 특별전</title>
+    <meta
+      name="description"
+      content="천 년의 비취색, 흙과 불이 빚은 침묵의 곡선. 고려청자 유약의 빙렬과 상감을 세 개의 방에서 감상하는 특별전. 2026년 가을, 서울."
+    />
+    <meta property="og:title" content="비색의 침묵 · 고려청자 특별전" />
+    <meta
+      property="og:description"
+      content="유약의 빙렬과 상감 문양을 세 개의 방에서 감상하는 특별전."
+    />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#121514" />
+
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
+    />
+    <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="./styles/main.css?v=2" />
+    <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='%23121514'/%3E%3Cpath d='M11 6h10c-1 3-1 5 0 7 2 3 3 5 3 8 0 4-3 7-8 7s-8-3-8-7c0-3 1-5 3-8 1-2 1-4 0-7z' fill='none' stroke='%236FA08F' stroke-width='1.5'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">비색의 침묵</a>
+        <nav class="nav" aria-label="섹션">
+          <a href="#room-1">빙렬의 방</a>
+          <a href="#room-2">상감의 방</a>
+          <a href="#visit">관람</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        첫 방 — 암실. 전시 포스터가 아니라 첫 유물 하나.
+        명암이 곧 구조다: 사진이 어두울수록 유약이 가까워진다.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap hero-grid">
+          <figure class="hero-figure reveal">
+            <img
+              src="./assets/ewer-dark.webp"
+              alt="암실 조명 아래 어두운 받침대 위에 놓인 고려청자 주자의 비취색 실루엣"
+              width="960"
+              height="1280"
+              loading="eager"
+              fetchpriority="high"
+            />
+            <figcaption>
+              <span>청자 상감운학문 주자 · 12세기</span>
+              <span>호암미술관 소장</span>
+            </figcaption>
+          </figure>
+          <div class="hero-text">
+            <p class="hero-kicker reveal" style="--delay: 100ms">
+              특별전 · 2026 가을
+            </p>
+            <h1 id="hero-h" class="reveal" style="--delay: 160ms">
+              천 년의 비색은<br />말이 없다
+            </h1>
+            <p class="lead reveal" style="--delay: 240ms">
+              비색(翡色)은 말로 설명되는 색이 아닙니다. 1,280°C의 환원 불에서만
+              나오는, 푸르름과 푸름이 아닌 사이의 색. 이 전시는 그 색을 설명하지
+              않고 세 개의 암실에 놓아 두었습니다.
+            </p>
+            <div class="hero-actions reveal" style="--delay: 300ms">
+              <a class="btn" href="#visit">도슨트 예약</a>
+              <p class="hero-note">9월 5일 – 11월 22일 · 국립중앙박물관 기획전시실</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        첫 번째 방 — 빙렬. 유약이 식으며 스스로 그은 그림.
+        풀블리드 판: 페이지에서 가장 큰 면적을 질감에 내어준다.
+      -->
+      <section id="room-1" class="section plate" aria-labelledby="room1-h">
+        <div class="wrap plate-head">
+          <p class="room-no reveal">제1실</p>
+          <h2 id="room1-h" class="reveal" style="--delay: 60ms">빙렬 — 유약이 남긴 지도</h2>
+          <p class="lead reveal" style="--delay: 120ms">
+            가마에서 꺼내진 청자는 식으면서 유약이 갈라집니다. 흙과 유약이 줄어드는
+            속도가 다르기 때문입니다. 그 균열은 결함이 아니라, 그릇마다 단 한 번만
+            그려지는 지도입니다.
+          </p>
+        </div>
+        <figure class="plate-figure reveal" style="--delay: 160ms">
+          <img
+            src="./assets/crazing.webp"
+            alt="청자 유약 표면의 빙렬 — 미세한 균열망이 비취색 유약 위에 퍼져 있다"
+            width="1600"
+            height="1200"
+            loading="lazy"
+          />
+          <figcaption class="wrap">
+            빙렬 확대 · 12세기 청자 표면 · 측광
+          </figcaption>
+        </figure>
+      </section>
+
+      <!--
+        두 번째 방 — 상감. 새기고 채우는 글자 없는 문장.
+        사진은 절반만. 나머지 절반은 문양의 문법을 텍스트로.
+      -->
+      <section id="room-2" class="section" aria-labelledby="room2-h">
+        <div class="wrap two">
+          <div class="two-text">
+            <p class="room-no reveal">제2실</p>
+            <h2 id="room2-h" class="reveal" style="--delay: 60ms">
+              상감 — 새기고,<br />흙으로 채우다
+            </h2>
+            <p class="reveal" style="--delay: 120ms">
+              상감은 그림을 그리는 게 아니라 파내는 기술입니다. 흙 그릇에 무늬를
+              새기고, 그 홈에 백토와 자토를 문질러 채운 뒤 유약을 입힙니다. 불에
+              들어가기 전까지는 무늬가 보이지 않습니다 — 가마를 열기 전까지 장인도
+              결과를 알 수 없었습니다.
+            </p>
+            <p class="muted reveal" style="--delay: 180ms">
+              제2실에는 구름·학·버드나무의 세 가지 문양만을 전시합니다. 상감청자의
+              문양은 자연의 모방이 아니라, 보이지 않는 것(구름, 바람, 계절)을
+              보이는 것으로 옮긴 문법입니다.
+            </p>
+          </div>
+          <figure class="two-photo reveal" style="--delay: 100ms">
+            <img
+              src="./assets/inlay.webp"
+              alt="청자 상감 문양 접사 — 흑백 상감 획이 비취 유약 위에 새겨져 있다"
+              width="1100"
+              height="825"
+              loading="lazy"
+            />
+            <figcaption>상감 모란당초문 · 접사</figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <!--
+        관람 — 예약과 안내. 마지막 방은 서류다.
+      -->
+      <section id="visit" class="section band" aria-labelledby="visit-h">
+        <div class="wrap visit-grid">
+          <div>
+            <p class="room-no reveal">안내</p>
+            <h2 id="visit-h" class="reveal" style="--delay: 60ms">세 개의 방, 예약제</h2>
+            <p class="reveal" style="--delay: 120ms">
+              암실 조명 때문에 회당 인원을 30명으로 제한합니다. 도슨트는 하루 세 번,
+              유약과 가마 이야기만 합니다.
+            </p>
+          </div>
+          <dl class="visit-dl reveal" style="--delay: 160ms">
+            <div>
+              <dt>기간</dt>
+              <dd>2026년 9월 5일 – 11월 22일 · 월요일 휴관</dd>
+            </div>
+            <div>
+              <dt>시간</dt>
+              <dd>10:00–18:00 · 금·토 21:00까지</dd>
+            </div>
+            <div>
+              <dt>도슨트</dt>
+              <dd>11:00 / 14:00 / 16:00 · 회당 40분</dd>
+            </div>
+            <div>
+              <dt>예약</dt>
+              <dd><a class="link" href="#visit">국립중앙박물관 예약 시스템</a></dd>
+            </div>
+          </dl>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>비색의 침묵 · 고려청자 특별전</p>
+        <p class="muted">국립중앙박물관 기획전시실 · 서울 용산</p>
+      </div>
+    </footer>
+
+    <script>
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/baekje-celadon/styles/main.css b/apps/site/public/work/baekje-celadon/styles/main.css
new file mode 100644
index 0000000..90c3154
--- /dev/null
+++ b/apps/site/public/work/baekje-celadon/styles/main.css
@@ -0,0 +1,368 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   비색의 침묵 — editorial-archival. 암실의 세 개의 방.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+  color-scheme: dark;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2) {
+  font-family: var(--font-display);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+:where(p, li, dd, dt, th, td, figcaption) {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+.lead {
+  color: var(--ink-muted);
+  max-width: 32em;
+}
+.muted {
+  color: var(--ink-muted);
+}
+a {
+  color: inherit;
+}
+.link {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color var(--dur-quick) var(--ease-soft);
+}
+.link:hover {
+  border-color: var(--accent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  font-weight: 600;
+  text-decoration: none;
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+
+/* ── 첫 방(히어로) ────────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-7);
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: end;
+}
+.hero-figure img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.hero-figure figcaption {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-top: var(--space-2);
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.hero-kicker {
+  font-size: var(--step--1);
+  color: var(--accent);
+  letter-spacing: 0.12em;
+  margin-bottom: var(--space-4);
+}
+.hero-text .lead {
+  margin-top: var(--space-4);
+}
+.hero-actions {
+  margin-top: var(--space-5);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.hero-note {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.btn {
+  display: inline-block;
+  background: var(--ink);
+  color: var(--surface);
+  font-weight: 500;
+  text-decoration: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft);
+}
+.btn:hover {
+  background: var(--ink-bright);
+}
+
+/* ── 방 번호 ──────────────────────────────────────────────────────────── */
+
+.room-no {
+  font-size: var(--step--1);
+  color: var(--accent-dim);
+  letter-spacing: 0.4em;
+  margin-bottom: var(--space-3);
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+
+/* ── 제1실 — 풀블리드 판 ──────────────────────────────────────────────── */
+
+.plate-head {
+  max-width: 40em;
+}
+.plate-head h2 {
+  margin-top: var(--space-1);
+}
+.plate-head .lead {
+  margin-top: var(--space-4);
+}
+.plate-figure {
+  margin-top: var(--space-6);
+}
+.plate-figure img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.plate-figure figcaption {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+
+/* ── 제2실 — 2단 ──────────────────────────────────────────────────────── */
+
+.two {
+  display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.two-text h2 {
+  margin-top: var(--space-1);
+}
+.two-text p + p {
+  margin-top: var(--space-4);
+}
+.two-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.two-photo figcaption {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+
+/* ── 안내 ─────────────────────────────────────────────────────────────── */
+
+.visit-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+}
+.visit-grid h2 {
+  margin-top: var(--space-1);
+}
+.visit-dl {
+  display: grid;
+  gap: var(--space-3);
+}
+.visit-dl dt {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.visit-dl dd {
+  margin-top: 2px;
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-5);
+  font-size: var(--step--1);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 14px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-grid,
+  .two,
+  .visit-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .hero-grid {
+    align-items: start;
+  }
+  .hero-figure {
+    max-width: 26rem;
+  }
+  .hero,
+  .section {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/apps/site/public/work/baekje-celadon/styles/tokens.css b/apps/site/public/work/baekje-celadon/styles/tokens.css
new file mode 100644
index 0000000..8278875
--- /dev/null
+++ b/apps/site/public/work/baekje-celadon/styles/tokens.css
@@ -0,0 +1,54 @@
+/* ==========================================================================
+   비색의 침묵 — 디자인 토큰
+   프리셋: editorial-archival
+   컨셉 한 문장: 암실의 세 개의 방 — 사진이 어두울수록 유약이 가까워진다.
+   레퍼런스: 방향 앵커는 dogfood-celadon(국립중앙박물관 등 전시 계열). 그 파일의
+            6축 수치는 audit-references.md 에서 날조로 판명 — 토큰은 브리프에서
+            다시 정했다. 박물관 암실의 실제 조건(어두운 벽, 스포트라이트)에서 유래.
+   하지 않은 것: 포스터형 그라디언트 배경, 관람객 수 지표, 전시 인트로 영상
+               자리. 이유: 암실의 권위는 어둠의 면적에서 나온다.
+   ========================================================================== */
+
+:root {
+  /* 타입 — 최대(58px) ÷ 본문(16px) ≈ 3.6배 */
+  --step--1: 0.8125rem;                              /* 13px */
+  --step-0: 1rem;                                     /* 16px */
+  --step-1: 1.25rem;                                  /* 20px */
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 28px */
+  --step-3: clamp(2.125rem, 1.4rem + 3.4vw, 3.625rem);/* 58px */
+
+  --leading-tight: 1.3;
+  --leading-normal: 1.85;
+
+  --font-display: "MaruBuri", serif;
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+
+  /* 색 — 암실. 배경은 순흑이 아니라 석재 회색(벽), 강조는 비색 그 자체. */
+  --surface: #121514;
+  --surface-raised: #191d1c;
+  --ink: #eceae2;        /* 백색이 아니라 골동지의 밝기 */
+  --ink-muted: #a7a69b;
+  --ink-faint: #7b7d76;
+  --line: #2b302e;
+  --accent: #8fbcaa;     /* 비색 — 텍스트용으로 밝힘. 배경 채움 금지 */
+  --accent-dim: #5e8274;
+  --ink-bright: #ffffff; /* CTA hover */
+
+  --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);
+
+  --radius: 2px;
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 480ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/dure-enrollment/calc.js b/apps/site/public/work/dure-enrollment/calc.js
new file mode 100644
index 0000000..61a26fd
--- /dev/null
+++ b/apps/site/public/work/dure-enrollment/calc.js
@@ -0,0 +1,30 @@
+/* 두레 수강신청 — 순수 계산 로직. 브라우저와 Node 테스트가 같은 함수를 공유한다. */
+(function (global) {
+  "use strict";
+
+  // 두 과목의 시간 겹침 — 닿는 경계(end == start)는 겹침이 아니다.
+  const isOverlap = (a, b) => {
+    const daysA = a.days || [], daysB = b.days || [];
+    const shared = daysA.some((d) => daysB.includes(d));
+    if (!shared) return false;
+    return a.start < b.end && b.start < a.end;
+  };
+
+  const credits = (list) => (list || []).reduce((acc, c) => acc + (c.credits || 0), 0);
+
+  // 학점 초과 예측 — 현재 신청 학점에 이 과목을 더했을 때 기준 초과 여부
+  const wouldExceed = (currentCredits, courseCredits, max) =>
+    currentCredits + courseCredits > max;
+
+  const seatsState = (c) => {
+    if (!c.seats) return { label: "정원 마감", closed: true, near: false };
+    return { label: `여석 ${c.seats}`, closed: false, near: c.seats <= 5 };
+  };
+
+  // 이수 잔여 — 음수면 '초과'
+  const remaining = (need, done, now) => need - done - now;
+
+  const api = { isOverlap, credits, wouldExceed, seatsState, remaining };
+  global.DURE = api;
+  if (typeof module !== "undefined") module.exports = api;
+})(typeof window !== "undefined" ? window : globalThis);
diff --git a/apps/site/public/work/dure-enrollment/index.html b/apps/site/public/work/dure-enrollment/index.html
new file mode 100644
index 0000000..2e7be71
--- /dev/null
+++ b/apps/site/public/work/dure-enrollment/index.html
@@ -0,0 +1,771 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>두레대학 수강신청 · 시간표</title>
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="두레대학 수강신청 — 시간표 도장 앱" />
+    <meta property="og:url" content="https://designpaca.chanpaca.net/work/dure-enrollment/" />
+    <meta property="og:image" content="https://designpaca.chanpaca.net/work/dure-enrollment/og.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="두레대학 수강신청 — 시간표 도장 앱" />
+    <meta name="twitter:image" content="https://designpaca.chanpaca.net/work/dure-enrollment/og.png" />
+    <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="#FBFAF7" />
+
+    <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&family=IBM+Plex+Sans+KR:wght@400;500;600&family=Noto+Serif+KR:wght@500;600&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=18" />
+    <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='%23FBFAF7'/%3E%3Crect x='6' y='6' width='20' height='20' fill='none' stroke='%2317202E' stroke-width='2'/%3E%3Crect x='13' y='13' width='6' height='6' fill='%23C14B2B'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <h1 class="sr-only">두레대학 수강신청</h1>
+    <header class="appbar">
+      <div class="appbar-inner">
+        <a class="brand" href="#main">
+          <span class="brand-seal" aria-hidden="true">申</span>
+          두레대학 수강신청
+        </a>
+        <p class="credits" aria-live="polite">
+          신청 학점 <strong id="credit-now">0</strong> / 18
+        </p>
+      </div>
+      <nav class="tabs" aria-label="화면">
+        <button type="button" class="tab is-current" data-view="catalog" aria-current="page">과목 찾기</button>
+        <button type="button" class="tab" data-view="starred">관심 과목</button>
+        <button type="button" class="tab" data-view="enrollments">신청 내역</button>
+        <button type="button" class="tab" data-view="credits">이수 현황</button>
+        <button type="button" class="tab" data-view="archive">과목 총람</button>
+        <button type="button" class="tab" data-view="notices">공지 · 변경</button>
+      </nav>
+    </header>
+
+    <main id="main" class="layout">
+      <!-- ── 과목 찾기 ── -->
+      <section class="view is-on" id="view-catalog" aria-labelledby="cat-h" tabindex="-1">
+        <section class="catalog" aria-labelledby="cat-h">
+          <h2 class="v-h" id="cat-h">2026학년도 1학기 과목</h2>
+          <p class="view-sub">과목을 누르면 강의계획과 신청 버튼이 열립니다. 신청하면 시간표에 얹힙니다.</p>
+
+          <div class="sheet">
+            <div class="toolbar" role="search">
+              <label class="sr-only" for="q">과목 검색</label>
+              <input id="q" type="search" placeholder="과목명, 교수, 코드로 검색" autocomplete="off" />
+              <div class="chips" role="group">
+                <button type="button" class="chip is-on" data-dept="all" aria-pressed="true">전체</button>
+                <button type="button" class="chip" data-dept="전공" aria-pressed="false">전공</button>
+                <button type="button" class="chip" data-dept="교양" aria-pressed="false">교양</button>
+              </div>
+            </div>
+
+            <ul class="course-list" id="course-list"></ul>
+            <p class="empty muted" id="course-empty" hidden>조건에 맞는 과목이 없습니다.</p>
+          </div>
+        </section>
+
+        <aside class="timetable-panel" aria-labelledby="tt-h">
+          <h2 id="tt-h">내 시간표</h2>
+          <p class="muted tt-hint">시간표 블록을 누르면 취소할 수 있습니다.</p>
+          <div class="sheet sheet-tt">
+            <div class="tt-scroll">
+              <div class="tt" id="tt">
+                <!-- JS: 축 + 블록 -->
+              </div>
+            </div>
+            <p class="status" id="status" role="status" aria-live="polite"></p>
+            <p class="tt-legend">
+              <span class="key"><i class="k-major"></i>전공</span>
+              <span class="key"><i class="k-gen"></i>교양</span>
+              <span class="key"><i class="k-seal"></i>신청됨</span>
+            </p>
+          </div>
+        </aside>
+      </section>
+
+      <!-- ── 관심 과목 ── -->
+      <section class="view" id="view-starred" aria-labelledby="st-h" tabindex="-1">
+        <h2 class="v-h" id="st-h">관심 과목</h2>
+        <p class="view-sub">강의계획에서 관심을 남기면 여기에 모입니다. 여석과 시간은 실시간입니다.</p>
+        <div class="statline" id="st-stats"></div>
+        <p class="st-warn" id="st-warn" role="status" hidden></p>
+        <div class="toolbar">
+          <div class="chips" role="group" id="st-chips">
+            <button type="button" class="chip is-on" data-st="all" aria-pressed="true">전체</button>
+            <button type="button" class="chip" data-st="전공" aria-pressed="false">전공</button>
+            <button type="button" class="chip" data-st="교양" aria-pressed="false">교양</button>
+          </div>
+        </div>
+        <div class="sheet">
+          <ul class="course-list" id="starred-list"></ul>
+          <div class="empty-box" id="starred-empty" hidden>
+            <p>아직 관심 과목이 없습니다.</p>
+            <p class="muted">과목 찾기에서 과목을 열고 관심 남기기를 누르면 여기에 쌓입니다.</p>
+            <button type="button" class="btn-line" data-goto="catalog">과목 찾기로 가기</button>
+          </div>
+          <section class="panel st-suggest" id="st-suggest" aria-labelledby="stsg-h" hidden>
+            <h2 id="stsg-h">지금 여석이 임박한 과목 <span class="h-note">관심을 남겨 두면 마감 전에 확인할 수 있습니다</span></h2>
+            <ul class="course-list" id="st-suggest-list"><!-- JS --></ul>
+          </section>
+        </div>
+      </section>
+
+      <!-- ── 신청 내역 ── -->
+      <section class="view" id="view-enrollments" aria-labelledby="en-h" tabindex="-1">
+        <h2 class="v-h" id="en-h">신청 내역</h2>
+        <p class="view-sub">이번 학기에 신청한 과목의 원장. 여기서도 취소할 수 있습니다.</p>
+        <div class="statline" id="en-stats"></div>
+        <div class="sheet">
+          <p class="en-sum mono">합계 <strong id="en-credits">0</strong>학점 / 18</p>
+          <div class="credit-gauge" role="img">
+            <i id="en-gauge" style="width: 0%"></i>
+          </div>
+          <p class="panel-note muted">정정 기간은 3/9–3/13입니다. 18학점 초과 신청은 학부 사무실 승인이 필요하고, 두 번 결석하면 탈강 처리됩니다 — 변경은 이 화면에서 할 수 있습니다.</p>
+          <div class="table-wrap">
+            <table id="en-table">
+              <caption class="sr-only">신청 과목 목록</caption>
+              <thead>
+                <tr><th scope="col">과목</th><th scope="col">시간</th><th scope="col">장소</th><th scope="col" class="num">학점</th><th scope="col">상태</th></tr>
+              </thead>
+              <tbody><!-- JS --></tbody>
+            </table>
+          </div>
+          <div class="empty-box" id="en-empty" hidden>
+            <p>신청한 과목이 없습니다.</p>
+            <p class="muted">시간표가 비어 있습니다. 과목 찾기에서 첫 과목을 얹어보세요.</p>
+            <button type="button" class="btn-line" data-goto="catalog">과목 찾기로 가기</button>
+          </div>
+          <p class="status" id="en-status" role="status" aria-live="polite"></p>
+        </div>
+      </section>
+
+      <!-- ── 이수 현황 ── -->
+      <section class="view" id="view-credits" aria-labelledby="cr-h" tabindex="-1">
+        <h2 class="v-h" id="cr-h">이수 현황</h2>
+        <p class="view-sub">네 학기를 마친 시점의 기록에 이번 학기 신청을 얹어 봅니다. 신청은 확정이 아닙니다.</p>
+        <div class="statline" id="cr-stats"></div>
+        <div class="sheet table-wrap">
+          <table id="cr-table">
+            <caption class="sr-only">졸업 기준 대비 이수 학점</caption>
+            <thead>
+              <tr>
+                <th scope="col">구분</th><th scope="col" class="num">졸업 기준</th>
+                <th scope="col" class="num">이수</th><th scope="col" class="num">이번 학기 신청</th>
+                <th scope="col" class="num">합계</th><th scope="col" class="num">잔여</th><th scope="col">진행</th>
+              </tr>
+            </thead>
+            <tbody><!-- JS --></tbody>
+          </table>
+          <p class="sheet-note muted">잔여가 0보다 작아지면 초과입니다. 학점 초과 신청은 학부 사무실 승인이 필요합니다.</p>
+          <div class="cr-total">
+            <p class="panel-note muted">졸업 기준 대비 총 이수율 <strong class="cr-total-num mono">—</strong></p>
+            <div class="cr-bar"><i id="cr-total-bar" style="width: 0%"></i></div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ── 과목 총람 ── -->
+      <section class="view" id="view-archive" aria-labelledby="ar-h" tabindex="-1">
+        <h2 class="v-h" id="ar-h">과목 총람</h2>
+        <p class="view-sub">개설 과목 전부를 계열별로 묶어 적습니다. 여석이 5 이하인 과목은 붉게 표시합니다.</p>
+        <div class="statline" id="ar-stats"></div>
+        <div class="sheet table-wrap">
+          <table id="ar-table">
+            <caption class="sr-only">개설 과목 전체 목록</caption>
+            <thead>
+              <tr>
+                <th scope="col">코드</th><th scope="col">과목</th><th scope="col">교수</th>
+                <th scope="col">시간</th><th scope="col" class="num">학점</th>
+                <th scope="col" class="num">여석 / 정원</th>
+              </tr>
+            </thead>
+            <tbody><!-- JS --></tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- ── 공지 · 변경 ── -->
+      <section class="view" id="view-notices" aria-labelledby="no-h" tabindex="-1">
+        <h2 class="v-h" id="no-h">공지 · 변경</h2>
+        <div class="statline" id="nc-stats"></div>
+        <p class="view-sub">수강신청 기간의 게시판. 강의실 변경은 이 원장에 남깁니다.</p>
+        <div class="sheet">
+          <ul class="notice-list" id="notice-list"><!-- JS --></ul>
+        </div>
+      </section>
+    </main>
+
+    <!-- ── 강의계획 모달: 펼침 장부. 왼쪽 남색 표지판 + 오른쪽 계획 내용 ── -->
+    <dialog id="course-dialog" class="modal modal-split" aria-labelledby="cd-h">
+      <div class="mspread">
+        <div class="mcover">
+          <span class="mcover-mark" aria-hidden="true">申</span>
+          <span class="mcover-seal" aria-hidden="true">申</span>
+          <h2 class="mcover-name" id="cd-h">과목명</h2>
+          <p class="mcover-meta mono" id="cd-code">CODE · 계열</p>
+          <dl class="mcover-stats">
+            <div><dt>학점</dt><dd class="mono" id="cd-credit">—</dd></div>
+            <div><dt>여석</dt><dd class="mono" id="cd-seats">—</dd></div>
+            <div><dt>시간</dt><dd class="mono" id="cd-time">—</dd></div>
+          </dl>
+          <p class="mcover-foot mono">2026학년도 1학기</p>
+        </div>
+        <div class="msheet">
+          <button type="button" class="modal-close" data-close aria-label="닫기">
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+          </button>
+
+          <p class="cd-line" id="cd-prof-line">교수 · 강의실</p>
+
+          <section class="cd-week msec">
+            <h3>주간 자리</h3>
+            <div class="cd-strip" id="cd-strip" role="img"></div>
+          </section>
+
+          <section class="eval msec">
+            <h3>평가</h3>
+            <div class="eval-bar" id="cd-eval-bar" aria-hidden="true"></div>
+            <dl class="eval-legend" id="cd-eval"></dl>
+          </section>
+
+          <p class="warn" id="cd-warn" hidden></p>
+          <div class="modal-actions">
+            <button type="button" class="btn-seal" id="cd-apply">수강 신청</button>
+            <button type="button" class="btn-line" id="cd-cancel" hidden>신청 취소</button>
+            <button type="button" class="btn-star" id="cd-star" aria-pressed="false">관심 남기기</button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+
+    <script src="calc.js"></script>
+    <script>
+      /*
+        수강신청 상태 기계 — 겹침 검사, 학점 한도, 여석 감소까지 전부 진짜.
+        여섯 화면이 같은 상태(enrolled, starred)를 공유한다.
+        새로고침하면 초기화됩니다(데모 원칙: 저장을 흉내내지 않는다).
+      */
+      const fmtDay = (d) => ({ 1: "월", 2: "화", 3: "수", 4: "목", 5: "금" })[d];
+
+      const COURSES = [
+        { id: "hum201", code: "HUM201", name: "문학과 사회", dept: "교양", prof: "김선희", room: "인문관 302", credits: 3, cap: 40, seats: 12, days: [1, 3], start: 10, end: 11.5, eval: [["출석", 10], ["발표", 30], ["기말", 60]] },
+        { id: "cs101", code: "CS101", name: "컴퓨팅 사고", dept: "교양", prof: "이준호", room: "공학관 105", credits: 3, cap: 60, seats: 31, days: [2, 4], start: 13, end: 14.5, eval: [["과제", 40], ["중간", 30], ["기말", 30]] },
+        { id: "econ210", code: "ECON210", name: "미시경제학", dept: "전공", prof: "박민재", room: "경상관 210", credits: 3, cap: 45, seats: 8, days: [1, 3], start: 13, end: 14.5, eval: [["과제", 30], ["중간", 30], ["기말", 40]] },
+        { id: "stat110", code: "STAT110", name: "통계의 기초", dept: "교양", prof: "정하나", room: "자연관 118", credits: 3, cap: 50, seats: 20, days: [5], start: 9, end: 12, eval: [["퀴즈", 20], ["중간", 40], ["기말", 40]] },
+        { id: "phil115", code: "PHIL115", name: "논리와 토론", dept: "교양", prof: "오세영", room: "인문관 115", credits: 2, cap: 35, seats: 14, days: [2], start: 16, end: 18, eval: [["발표", 50], ["기말", 50]] },
+        { id: "soc220", code: "SOC220", name: "도시와 사람", dept: "전공", prof: "한유진", room: "사회관 204", credits: 3, cap: 40, seats: 17, days: [4], start: 10, end: 12.5, eval: [["리포트", 40], ["발표", 20], ["기말", 40]] },
+        { id: "bio105", code: "BIO105", name: "생명과학 산책", dept: "교양", prof: "남기훈", room: "자연관 B1", credits: 2, cap: 60, seats: 25, days: [1], start: 14, end: 16, eval: [["출석", 20], ["리포트", 80]] },
+        { id: "art130", code: "ART130", name: "드로잉 입문", dept: "교양", prof: "서지우", room: "예술관 301", credits: 3, cap: 25, seats: 3, days: [3], start: 14, end: 17, eval: [["작품", 60], ["기말작품", 40]] },
+        { id: "econ315", code: "ECON315", name: "게임이론", dept: "전공", prof: "최도윤", room: "경상관 308", credits: 3, cap: 30, seats: 6, days: [2, 4], start: 10, end: 11.5, eval: [["과제", 30], ["중간", 30], ["기말", 40]] },
+        { id: "cs210", code: "CS210", name: "자료구조", dept: "전공", prof: "강태양", room: "공학관 212", credits: 3, cap: 40, seats: 22, days: [5], start: 13, end: 16, eval: [["실습", 40], ["중간", 30], ["기말", 30]] },
+      ];
+
+      const NOTICES = [
+        { date: "03-08", kind: "변경", body: "게임이론(ECON315) 강의실이 경상관 308호에서 309호로 바뀝니다. 이 목록에는 이미 반영했습니다." },
+        { date: "03-07", kind: "공지", body: "수강신청 기간은 3월 2일부터 3월 13일 자정까지입니다. 기간 끝에는 시간표가 확정됩니다." },
+        { date: "03-06", kind: "안내", body: "기준 학점(18)을 넘는 신청은 학부 사무실의 승인을 받아야 합니다. 이 데모에서는 넘는 신청을 막아둡니다." },
+        { date: "03-05", kind: "안내", body: "드로잉 입문(ART130)은 재료비 3만 원이 듭니다. 첫 수업에 안내합니다." },
+        { date: "03-03", kind: "공지", body: "정원이 마감된 과목은 대기자 신청을 받지 않습니다. 분반 개설은 학부 상황에 따라 결정됩니다." },
+        { date: "03-02", kind: "공지", body: "2026학년도 1학기 수강신청이 열렸습니다. 시간이 겹치는 과목은 함께 담을 수 없습니다." },
+      ];
+
+      const MAX_CREDITS = 18;
+      // 네 학기를 마친 시점의 이수 기록 — 이 데모의 가상 학생
+      const RECORD = [
+        { label: "전공", need: 66, done: 45 },
+        { label: "교양", need: 24, done: 21 },
+        { label: "자유", need: 40, done: 28 },
+      ];
+      const enrolled = new Set();
+      const starred = new Set();
+      const $ = (id) => document.getElementById(id);
+      const hhmm = (t) => `${Math.floor(t)}:${t % 1 ? "30" : "00"}`;
+      const timeLabel = (c) => c.days.map(fmtDay).join("·") + " " + hhmm(c.start) + "–" + hhmm(c.end);
+
+      // ── 탭(뷰) 전환 ──
+      const views = document.querySelectorAll(".view");
+      const gotoView = (name) => {
+        document.querySelectorAll(".tab").forEach((b) => {
+          const on = b.dataset.view === name;
+          b.classList.toggle("is-current", on);
+          if (on) b.setAttribute("aria-current", "page"); else b.removeAttribute("aria-current");
+        });
+        views.forEach((v) => v.classList.toggle("is-on", v.id === "view-" + name));
+        $("view-" + name).focus({ preventScroll: true });
+      };
+      document.querySelectorAll(".tab").forEach((btn) => {
+        btn.addEventListener("click", () => gotoView(btn.dataset.view));
+      });
+      document.querySelectorAll("[data-goto]").forEach((btn) => {
+        btn.addEventListener("click", () => gotoView(btn.dataset.goto));
+      });
+
+      // ── 겹침 검사 ──
+      const conflictsWith = (course) =>
+        [...enrolled]
+          .map((id) => COURSES.find((c) => c.id === id))
+          .filter((o) => DURE.isOverlap(course, o))
+          .map((o) => o.name);
+
+      const credits = () => [...enrolled].reduce((sum, id) => sum + COURSES.find((c) => c.id === id).credits, 0);
+      const creditsOf = (dept) => DURE.credits([...enrolled].map((id) => COURSES.find((c) => c.id === id)).filter((c) => c.dept === dept));
+
+      const setStatus = (msg, isWarn) => {
+        const el = $("status");
+        el.textContent = msg;
+        el.classList.toggle("is-warn", !!isWarn);
+      };
+
+      // ── 과목 행(과목 찾기 · 관심 과목 공용 문법) ──
+      const courseRow = (c) => {
+        const li = document.createElement("li");
+        li.innerHTML = `
+          <button type="button" class="course-row" data-course="${c.id}">
+            <span class="c-main">
+              <span class="c-name">${c.name} <span class="c-dept">${c.dept}</span></span>
+              <span class="mono c-sub"><i>${c.code}</i> · <i>${c.prof}</i> · <i>${timeLabel(c)}</i> · <i>${c.room}</i></span>
+            </span>
+            <span class="c-side mono">
+              <span class="c-credit">${c.credits}학점</span>
+              <span class="c-seats ${c.seats <= 5 ? "is-low" : ""}">${c.seats === 0 ? "정원 마감" : "여석 " + c.seats}</span>
+              ${starred.has(c.id) ? '<span class="c-star">★</span>' : ""}
+              ${enrolled.has(c.id) ? '<span class="c-seal">申</span>' : ""}
+            </span>
+          </button>`;
+        return li;
+      };
+
+      // ── 과목 찾기 목록 ──
+      let deptFilter = "all";
+      const renderList = () => {
+        const q = $("q").value.trim();
+        const rows = COURSES.filter(
+          (c) =>
+            (deptFilter === "all" || c.dept === deptFilter) &&
+            (!q || c.name.includes(q) || c.prof.includes(q) || c.code.toLowerCase().includes(q.toLowerCase()))
+        );
+        $("course-list").replaceChildren(...rows.map(courseRow));
+        $("course-empty").hidden = rows.length> 0;
+      };
+      $("q").addEventListener("input", renderList);
+      document.querySelectorAll(".chip[data-dept]").forEach((chip) => {
+        chip.addEventListener("click", () => {
+          document.querySelectorAll(".chip[data-dept]").forEach((c) => {
+            c.classList.toggle("is-on", c === chip);
+            c.setAttribute("aria-pressed", c === chip ? "true" : "false");
+          });
+          deptFilter = chip.dataset.dept;
+          renderList();
+        });
+      });
+
+      // ── 관심 과목 ──
+      let stDept = "all";
+      const renderStarred = () => {
+        const all = COURSES.filter((c) => starred.has(c.id));
+        const rows = all.filter((c) => stDept === "all" || c.dept === stDept);
+        $("starred-list").replaceChildren(...rows.map(courseRow));
+        $("starred-empty").hidden = rows.length> 0;
+        // 빈 상태일 때 — 여석 임박 추천으로 화면을 채운다(빈 상태는 안내다)
+        const suggest = $("st-suggest");
+        if (!all.length) {
+          suggest.hidden = false;
+          $("st-suggest-list").replaceChildren(
+            ...COURSES.filter((c) => !enrolled.has(c.id) && c.seats> 0).sort((a, b) => a.seats - b.seats).slice(0, 3).map(courseRow)
+          );
+        } else {
+          suggest.hidden = true;
+        }
+        // 요약 — 관심 기준 실계산
+        const credits = all.reduce((a, c) => a + c.credits, 0);
+        const enrolledCredits = COURSES.filter((c) => enrolled.has(c.id)).reduce((a, c) => a + c.credits, 0);
+        const near = all.filter((c) => c.seats> 0 && c.seats <= 5).length;
+        const closed = all.filter((c) => c.seats === 0).length;
+        $("st-stats").innerHTML =
+          `<div>관심 <strong>${all.length}과목</strong></div>` +
+          `<div>합계 <strong>${credits}학점</strong></div>` +
+          `<div>여석 임박 <strong>${near}과목</strong></div>` +
+          `<div>정원 마감 <strong>${closed}과목</strong></div>`;
+        // 학점 초과 사전 경고 — 오류 예방
+        const warn = $("st-warn");
+        const wouldBe = enrolledCredits + credits;
+        if (!all.length) { warn.hidden = true; return; }
+        warn.hidden = false;
+        if (wouldBe> MAX_CREDITS) {
+          warn.textContent = `모두 신청하면 기준 ${MAX_CREDITS}학점을 ${wouldBe - MAX_CREDITS}학점 초과합니다(${wouldBe}학점) — 신청 전에 조합을 줄이세요.`;
+          warn.classList.add("is-over");
+        } else {
+          warn.textContent = `모두 신청해도 기준 ${MAX_CREDITS}학점 안에 듭니다 — 합계 ${wouldBe}학점 · 잔여 ${MAX_CREDITS - wouldBe}학점.`;
+          warn.classList.remove("is-over");
+        }
+      };
+      document.getElementById("st-chips").addEventListener("click", (e) => {
+        const chip = e.target.closest("[data-st]");
+        if (!chip) return;
+        document.querySelectorAll("#st-chips .chip").forEach((c) => {
+          c.classList.toggle("is-on", c === chip);
+          c.setAttribute("aria-pressed", String(c === chip));
+        });
+        stDept = chip.dataset.st;
+        renderStarred();
+      });
+
+      // ── 신청 내역 ──
+      const renderEnrollments = () => {
+        {
+          const list = COURSES.filter((c) => enrolled.has(c.id));
+          $("en-gauge").style.width = Math.round((list.reduce((a, c) => a + c.credits, 0) / MAX_CREDITS) * 100) + "%";
+          const credits = list.reduce((a, c) => a + c.credits, 0);
+          $("en-stats").innerHTML =
+            `<div>신청 <strong>${list.length}과목</strong></div>` +
+            `<div>${credits}학점 / ${MAX_CREDITS}</div>` +
+            `<div>잔여 <strong>${MAX_CREDITS - credits}학점</strong></div>` +
+            `<div>신청 변경 마감 <strong>3/13</strong></div>`;
+        }
+        const body = document.querySelector("#en-table tbody");
+        body.replaceChildren(
+          ...[...enrolled].map((id) => COURSES.find((c) => c.id === id)).map((c) => {
+            const tr = document.createElement("tr");
+            tr.innerHTML =
+              `<th scope="row">${c.name}</th><td class="mono">${timeLabel(c)}</td><td>${c.room}</td>` +
+              `<td class="num mono">${c.credits}</td>` +
+              `<td><button type="button" class="give-btn" data-cancel="${c.id}">취소</button></td>`;
+            return tr;
+          })
+        );
+        $("en-empty").hidden = enrolled.size> 0;
+        $("en-credits").textContent = String(credits());
+      };
+      document.querySelector("#en-table tbody").addEventListener("click", (e) => {
+        const btn = e.target.closest("[data-cancel]");
+        if (!btn) return;
+        const c = COURSES.find((x) => x.id === btn.dataset.cancel);
+        enrolled.delete(c.id);
+        c.seats += 1;
+        $("en-status").textContent = `${c.name} 취소 · ${credits()}학점`;
+        renderAll();
+      });
+
+      // ── 이수 현황: 기록 + 이번 학기 신청을 합친다 ──
+      const renderCreditsView = () => {
+        const body = document.querySelector("#cr-table tbody");
+        const totalNeed = RECORD.reduce((a, r) => a + r.need, 0);
+        // 개설 과목은 전공·교양뿐이라 자유의 신청은 항상 0 — 표에는 '—' 로 나온다
+        const rows = RECORD.map((r) => ({
+          label: r.label,
+          need: r.need,
+          done: r.done,
+          now: creditsOf(r.label),
+        }));
+        const sum = rows.reduce(
+          (a, r) => ({ need: a.need + r.need, done: a.done + r.done, now: a.now + r.now }),
+          { need: 0, done: 0, now: 0 }
+        );
+        {
+          const done = sum.done, now = sum.now, need = sum.need;
+          $("cr-stats").innerHTML =
+            `<div>기준 <strong>${need}학점</strong></div>` +
+            `<div>이수 <strong>${done}학점</strong></div>` +
+            `<div>이번 학기 신청 <strong>${now}학점</strong></div>` +
+            `<div>합계 <strong>${done + now}학점</strong></div>` +
+            `<div>잔여 <strong>${need - done - now}학점</strong></div>`;
+        }
+        {
+          $("cr-stats").innerHTML =
+            `<div>기준 <strong>${sum.need}학점</strong></div>` +
+            `<div>이수 <strong>${sum.done}학점</strong></div>` +
+            `<div>이번 학기 신청 <strong>${sum.now}학점</strong></div>` +
+            `<div>합계 <strong>${sum.done + sum.now}학점</strong></div>` +
+            `<div>잔여 <strong>${sum.need - sum.done - sum.now}학점</strong></div>`;
+        }
+        {
+          const pct = Math.min(100, Math.round(((sum.done + sum.now) / sum.need) * 100));
+          document.getElementById("cr-total-bar").style.width = pct + "%";
+          document.querySelector(".cr-total-num").textContent = pct + "%";
+        }
+        body.replaceChildren(
+          ...rows.map((r) => {
+            const tr = document.createElement("tr");
+            const total = r.done + r.now;
+            const left = r.need - total;
+            const pct = r.need ? Math.min(100, Math.round((total / r.need) * 100)) : 0;
+            tr.innerHTML =
+              `<th scope="row">${r.label}</th><td class="num mono">${r.need || "—"}</td>` +
+              `<td class="num mono">${r.done || "—"}</td><td class="num mono">${r.now ? "+ " + r.now : "—"}</td>` +
+              `<td class="num mono">${r.need ? total : total || "—"}</td>` +
+              `<td class="num mono">${r.need ? (left> 0 ? left : left === 0 ? "0" : "초과") : "—"}</td>` +
+              `<td><div class="cr-bar" role="img"><i style="width: ${pct}%"></i></div></td>`;
+            return tr;
+          }),
+          (() => {
+            const tr = document.createElement("tr");
+            const left = totalNeed - sum.done - sum.now;
+            tr.innerHTML =
+              `<th scope="row">총계</th><td class="num mono">${totalNeed}</td>` +
+              `<td class="num mono">${sum.done}</td><td class="num mono">+ ${sum.now}</td>` +
+              `<td class="num mono"><strong>${sum.done + sum.now}</strong></td>` +
+              `<td class="num mono">${left> 0 ? left : left === 0 ? "0" : "초과"}</td>`;
+            return tr;
+          })()
+        );
+      };
+
+      // ── 과목 총람: 계열별 소계 포함 ──
+      const renderArchive = () => {
+        const body = document.querySelector("#ar-table tbody");
+        const frag = document.createDocumentFragment();
+        for (const dept of ["전공", "교양"]) {
+          const group = COURSES.filter((c) => c.dept === dept);
+          for (const c of group) {
+            const tr = document.createElement("tr");
+            tr.innerHTML =
+              `<th scope="row" class="mono">${c.code}</th><td>${c.name}</td><td>${c.prof}</td>` +
+              `<td class="mono">${timeLabel(c)}</td><td class="num mono">${c.credits}</td>` +
+              `<td class="num mono">${c.seats <= 5 ? `<span class="low-seats">${c.seats} / ${c.cap}</span>` : `${c.seats} / ${c.cap}`}</td>`;
+            frag.append(tr);
+          }
+          const sub = document.createElement("tr");
+          sub.className = "ar-sub";
+          const seats = group.reduce((a, c) => a + c.seats, 0);
+          sub.innerHTML =
+            `<th scope="row" colspan="4">${dept} 소계 · ${group.length}과목</th>` +
+            `<td class="num mono">${group.reduce((a, c) => a + c.credits, 0)}</td>` +
+            `<td class="num mono">여석 ${seats}</td>`;
+          frag.append(sub);
+        }
+        body.replaceChildren(frag);
+        {
+          const closed = COURSES.filter((c) => c.seats === 0).length;
+          const near = COURSES.filter((c) => c.seats> 0 && c.seats <= 5).length;
+          $("ar-stats").innerHTML =
+            `<div>개설 <strong>${COURSES.length}과목</strong></div>` +
+            `<div>전공 <strong>${COURSES.filter((c) => c.dept === "전공").length}</strong></div>` +
+            `<div>교양 <strong>${COURSES.filter((c) => c.dept === "교양").length}</strong></div>` +
+            `<div>여석 임박 <strong>${near}과목</strong></div>` +
+            `<div>정원 마감 <strong>${closed}과목</strong></div>`;
+        }
+      };
+
+      // ── 공지 ──
+      const renderNotices = () => {
+        {
+          const changed = NOTICES.filter((n) => n.kind === "변경").length;
+          $("nc-stats").innerHTML =
+            `<div>공지 <strong>${NOTICES.length}건</strong></div>` +
+            `<div>변경 <strong>${changed}건</strong></div>` +
+            `<div>신청 마감 <strong>3/13 자정</strong></div>`;
+        }
+        $("notice-list").replaceChildren(
+          ...NOTICES.map((n) => {
+            const li = document.createElement("li");
+            li.innerHTML =
+              `<span class="no-kind" data-kind="${n.kind}">${n.kind}</span>` +
+              `<span class="mono no-date">${n.date}</span>` +
+              `<p class="no-body">${n.body}</p>`;
+            return li;
+          })
+        );
+      };
+
+      // ── 시간표 렌더: 축(정적) + 블록(신청분) ──
+      const buildAxis = () => {
+        const tt = $("tt");
+        tt.style.setProperty("--rows", 18); // 9:00–18:00, 30분 단위
+        const hours = Array.from({ length: 9 }, (_, i) => 9 + i);
+        tt.innerHTML =
+          `<div class="tt-corner" aria-hidden="true" style="grid-area: 1 / 1"></div>` +
+          [1, 2, 3, 4, 5].map((d) => `<div class="tt-day" style="grid-row: 1; grid-column: ${d + 1}">${fmtDay(d)}</div>`).join("") +
+          hours
+            .map((h) => {
+              const row = (h - 9) * 2 + 2; // 1행은 요일 헤더, 9시=2행
+              return (
+                `<div class="tt-hour mono" style="grid-row: ${row}; grid-column: 1">${String(h).padStart(2, "0")}</div>` +
+                [1, 2, 3, 4, 5]
+                  .map((d) => `<div class="tt-cell" style="grid-row: ${row} / span 2; grid-column: ${d + 1}"></div>`)
+                  .join("")
+              );
+            })
+            .join("");
+      };
+
+      const renderBlocks = () => {
+        $("tt").querySelectorAll(".tt-block").forEach((b) => b.remove());
+        const tt = $("tt");
+        enrolled.forEach((id) => {
+          const c = COURSES.find((x) => x.id === id);
+          c.days.forEach((d) => {
+            const b = document.createElement("button");
+            b.type = "button";
+            b.className = `tt-block ${c.dept === "전공" ? "is-major" : "is-gen"}`;
+            b.dataset.course = c.id;
+            b.style.gridColumn = String(d + 1);
+            /* 행 오프셋 +2: 1행은 요일 헤더. 9시=(9-9)*2+2=2행 */
+            b.style.gridRow = `${(c.start - 9) * 2 + 2} / span ${(c.end - c.start) * 2}`;
+            b.innerHTML = `<span class="tt-block-name">${c.name}</span><span class="tt-block-room">${c.room}</span>`;
+            tt.append(b);
+          });
+        });
+        if (!enrolled.size) {
+          const empty = document.createElement("p");
+          empty.className = "tt-empty";
+          empty.textContent = "과목을 신청하면 여기에 놓입니다";
+          tt.append(empty);
+        }
+        $("credit-now").textContent = String(credits());
+      };
+
+      const renderAll = () => {
+        renderList();
+        renderStarred();
+        renderEnrollments();
+        renderCreditsView();
+        renderArchive();
+        renderBlocks();
+      };
+
+      // ── 모달 ──
+      const dialog = $("course-dialog");
+      let current = null;
+      const openCourse = (c) => {
+        current = c;
+        $("cd-code").textContent = `${c.code} · ${c.dept}`;
+        $("cd-h").textContent = c.name;
+        $("cd-prof-line").textContent = `${c.prof} 교수 · ${c.room}`;
+        $("cd-time").textContent = timeLabel(c);
+        $("cd-credit").textContent = String(c.credits);
+        $("cd-seats").textContent = `${c.seats} / ${c.cap}`;
+
+        // 주간 자리 — 9:00–18:00 를 세로로 접은 미니 격자
+        const strip = $("cd-strip");
+        strip.setAttribute("aria-label", `${timeLabel(c)} — 시간표에 놓이는 자리`);
+        strip.innerHTML = [1, 2, 3, 4, 5]
+          .map((d) => {
+            const day = fmtDay(d);
+            if (!c.days.includes(d)) {
+              return `<div class="cd-track"><span class="cd-rail"><span class="cd-off mono" aria-hidden="true">·</span></span><span class="cd-day-l">${day}</span></div>`;
+            }
+            const top = ((c.start - 9) / 9) * 100;
+            const h = ((c.end - c.start) / 9) * 100;
+            return `<div class="cd-track"><span class="cd-rail"><span class="cd-slot ${c.dept === "전공" ? "is-major" : "is-gen"}" style="top:${top}%; height:${h}%"></span></span><span class="cd-day-l is-on">${day}</span></div>`;
+          })
+          .join("");
+
+        // 평가 — 같은 잉크의 농도로 누적 막대 하나에 담는다
+        $("cd-eval-bar").replaceChildren(
+          ...c.eval.map(([, v], idx) => {
+            const seg = document.createElement("span");
+            seg.className = `eval-seg seg-${idx + 1}`;
+            seg.style.width = v + "%";
+            return seg;
+          })
+        );
+        $("cd-eval").replaceChildren(
+          ...c.eval.map(([k, v]) => {
+            const div = document.createElement("div");
+            div.innerHTML = `<dt>${k}</dt><dd class="mono">${v}%</dd>`;
+            return div;
+          })
+        );
+
+        const apply = $("cd-apply");
+        const cancel = $("cd-cancel");
+        const warn = $("cd-warn");
+        warn.hidden = true;
+        cancel.hidden = !enrolled.has(c.id);
+
+        if (enrolled.has(c.id)) {
+          apply.hidden = true;
+        } else {
+          apply.hidden = false;
+          apply.disabled = true;
+          const clash = conflictsWith(c);
+          if (c.seats === 0) {
+            warn.textContent = "정원이 마감되었습니다. 다음 학기를 기다리거나 분반을 확인하세요.";
+            warn.hidden = false;
+          } else if (clash.length) {
+            warn.textContent = `${clash.join(", ")}와(과) 시간이 겹칩니다. 둘 중 하나만 담을 수 있습니다.`;
+            warn.hidden = false;
+          } else if (credits() + c.credits> MAX_CREDITS) {
+            warn.textContent = `기준 학점(${MAX_CREDITS})을 초과합니다. 지금 ${credits()}학점입니다.`;
+            warn.hidden = false;
+          } else {
+            apply.disabled = false;
+          }
+        }
+        const star = $("cd-star");
+        star.setAttribute("aria-pressed", String(starred.has(c.id)));
+        star.textContent = starred.has(c.id) ? "관심 빼기" : "관심 남기기";
+        dialog.showModal();
+      };
+
+      document.addEventListener("click", (e) => {
+        const btn = e.target.closest("[data-course]");
+        if (btn && !btn.dataset.cancel) openCourse(COURSES.find((c) => c.id === btn.dataset.course));
+      });
+
+      $("cd-apply").addEventListener("click", () => {
+        if (!current || $("cd-apply").disabled) return;
+        current.seats -= 1;
+        enrolled.add(current.id);
+        setStatus(`${current.name} 신청 완료 · ${timeLabel(current)} · ${credits()}학점`, false);
+        dialog.close();
+        renderAll();
+      });
+
+      $("cd-cancel").addEventListener("click", () => {
+        if (!current || !enrolled.has(current.id)) return;
+        enrolled.delete(current.id);
+        current.seats += 1;
+        setStatus(`${current.name} 취소 · ${credits()}학점`, false);
+        dialog.close();
+        renderAll();
+      });
+
+      $("cd-star").addEventListener("click", () => {
+        if (!current) return;
+        if (starred.has(current.id)) {
+          starred.delete(current.id);
+          setStatus(`${current.name} 관심에서 뺐습니다.`, false);
+        } else {
+          starred.add(current.id);
+          setStatus(`${current.name} 관심에 남겼습니다. 관심 과목 화면에서 보세요.`, false);
+        }
+        const star = $("cd-star");
+        star.setAttribute("aria-pressed", String(starred.has(current.id)));
+        star.textContent = starred.has(current.id) ? "관심 빼기" : "관심 남기기";
+        renderList();
+        renderStarred();
+      });
+
+      dialog.addEventListener("click", (e) => { if (e.target === dialog) dialog.close(); });
+      dialog.querySelector("[data-close]").addEventListener("click", () => dialog.close());
+
+      // ── 시작 ──
+      buildAxis();
+      renderAll();
+      renderNotices();
+      setStatus("과목을 눌러 강의계획을 확인하세요.", false);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/dure-enrollment/og.png b/apps/site/public/work/dure-enrollment/og.png
new file mode 100644
index 0000000..1af2ee7
Binary files /dev/null and b/apps/site/public/work/dure-enrollment/og.png differ
diff --git a/apps/site/public/work/dure-enrollment/styles/main.css b/apps/site/public/work/dure-enrollment/styles/main.css
new file mode 100644
index 0000000..e29a664
--- /dev/null
+++ b/apps/site/public/work/dure-enrollment/styles/main.css
@@ -0,0 +1,567 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   두레대학 수강신청 — 프로덕션 콘솔 (shadcn/ui new-york 문법의 바닐라 이식)
+   액센트는 벽돌(申) 하나. 나머지는 무채상 완성도로 말한다.
+   ========================================================================== */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+* { margin: 0; }
+
+html { -webkit-text-size-adjust: 100%; background: var(--muted); }
+
+body {
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-synthesis-weight: none;
+  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 합성 볼드 금지 */
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2, h3) { line-height: var(--leading-tight); font-weight: 600; word-break: keep-all; }
+strong, b { font-weight: 600; } /* UA 기본 700 볼드 재정의 */
+h1, h2.v-h {
+  font-size: var(--step-4); font-weight: 600;
+  font-family: var(--font-display); /* 공문·신문의 명조 결 — 큰 제목에만 */
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+}
+@media (max-width: 680px) {
+  h1, h2.v-h { font-size: min(1.5rem, 6.4vw); } /* 뷰포트 단위 — 기기 글꼴 확대에도 제목은 부서지지 않는다 */
+}
+h2 { font-size: var(--step-2); }
+h3 { font-size: var(--step-0); font-weight: 500; }
+
+:where(p, li, td, th, dd, figcaption) { word-break: keep-all; overflow-wrap: anywhere; }
+
+.mono { font-family: var(--font-mono); font-size: var(--font-mono-size); font-variant-numeric: tabular-nums; }
+.muted { color: var(--muted-foreground); }
+
+:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
+
+.skip {
+  position: absolute; left: -9999px; top: 0;
+  background: var(--primary); color: var(--primary-foreground);
+  padding: var(--space-3) var(--space-4); z-index: 100; border-radius: var(--radius);
+}
+.skip:focus { left: var(--space-4); }
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+
+/* ── 앱바: 브랜드 · 학점 칩 · 탭. 스티키. ── */
+.appbar {
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; z-index: 20;
+}
+.appbar-inner {
+  max-width: 1180px; margin-inline: auto;
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-5);
+}
+.brand {
+  font-family: var(--font-display);
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  color: var(--foreground); text-decoration: none;
+  font-weight: 600; font-size: var(--step-1);
+}
+.brand-seal {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px;
+  background: var(--accent);
+  color: #fff;
+  border-radius: var(--radius);
+  font-size: var(--step-0); font-weight: 600;
+}
+.credits {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--muted-foreground);
+  background: var(--muted-2);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: var(--step-1);
+  white-space: nowrap;
+}
+.credits strong { color: var(--accent-ink); font-size: var(--step-0); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+/* 탭 — 언더라인 내비 */
+.tabs {
+  max-width: 1180px; margin-inline: auto;
+  display: flex; gap: var(--space-1);
+  padding: 0 var(--space-5);
+  overflow-x: auto;
+  overflow-y: hidden; /* overflow-x:auto 는 반대축을 auto 로 만든다 — 세로 스크롤 금지 */
+  scrollbar-width: none; /* 좁은 창 가로 스크롤바도 노출 금지 — 스와이프는 유지 */
+}
+
+.tab {
+  appearance: none; cursor: pointer; font: inherit;
+  font-size: var(--step-0); font-weight: 500;
+  color: var(--muted-foreground);
+  background: none; border: 0;
+  border-bottom: 2px solid transparent;
+  height: 42px;
+  padding: 0 var(--space-2);
+  white-space: nowrap;
+  transition: color 100ms ease, border-color 100ms ease;
+}
+.tab:hover { color: var(--foreground); }
+.tab.is-current { color: var(--foreground); font-weight: 600; border-bottom-color: var(--accent); }
+
+/* ── 레이아웃 ── */
+.layout {
+  max-width: 1180px;
+  margin-inline: auto;
+  padding: var(--space-5) var(--space-5) 96px;
+}
+.view { display: none; }
+.view.is-on { display: block; }
+.view:focus { outline: none; }
+.view > h1 { margin-bottom: 4px; }
+.view-sub { color: var(--muted-foreground); font-size: var(--step-0); margin-bottom: var(--space-5); max-width: 46em; }
+#view-catalog.is-on {
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+.view > *:not(:first-child):not(.view-sub) { margin-top: 0; }
+
+/* ── 카드(장부 판 → 카드) ── */
+.sheet {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-4);
+  min-width: 0;
+}
+.sheet-tt { padding: var(--space-4); }
+.sheet-note { font-size: var(--step--1); color: var(--faint); margin-top: var(--space-3); }
+
+/* ── 빈 상태 ── */
+.empty-box {
+  display: grid; gap: var(--space-2); justify-items: start;
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6) var(--space-5);
+  background: var(--muted);
+}
+.empty-box p:first-child { font-weight: 600; }
+.empty-box .muted { font-size: var(--step-0); }
+.empty-box .btn-line { margin-top: var(--space-2); }
+
+/* ── 검색 + 세그먼트 ── */
+.toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
+#q {
+  font: inherit; color: var(--foreground);
+  background: var(--card);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  height: 36px;
+  padding: 0 var(--space-3);
+  min-width: 13rem;
+  box-shadow: var(--shadow-sm);
+  transition: border-color 100ms ease, box-shadow 100ms ease;
+}
+#q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
+#q:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+#q::placeholder { color: var(--faint); }
+.chips {
+  display: inline-flex; gap: 2px;
+  background: var(--muted-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px;
+}
+.chip {
+  appearance: none; cursor: pointer; font: inherit;
+  font-size: var(--step--1); font-weight: 500;
+  background: none; color: var(--muted-foreground);
+  border: 0; border-radius: var(--radius);
+  height: 28px; padding: 0 var(--space-3);
+  display: inline-flex; align-items: center;
+  transition: background-color 100ms ease, color 100ms ease, box-shadow 100ms ease;
+}
+.chip:hover { color: var(--foreground); }
+.chip.is-on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
+
+/* ── 과목 목록 ── */
+.course-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
+.course-row {
+  appearance: none; background: none; cursor: pointer; font: inherit;
+  width: 100%; text-align: left;
+  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
+  padding: var(--space-3) var(--space-2);
+  border: 0; border-bottom: 1px solid var(--border);
+  border-radius: var(--radius);
+  transition: background-color 80ms ease;
+}
+.course-row:first-child { border-top: 1px solid var(--border); }
+.course-row:hover { background: var(--muted); }
+.course-row:active { scale: 0.995; }
+.c-main { display: grid; gap: 2px; min-width: 0; }
+.c-name { font-weight: 600; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
+.c-dept {
+  font-size: var(--step--1); font-weight: 500;
+  color: var(--muted-foreground);
+  background: var(--muted-2);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
+.c-sub { color: var(--muted-foreground); font-size: var(--step--1); }
+.c-side { display: grid; gap: 2px; text-align: right; flex: none; font-size: var(--step--1); }
+.c-credit { font-weight: 500; color: var(--foreground); }
+.c-seats { color: var(--muted-foreground); }
+.c-seats.is-low { color: var(--danger); font-weight: 600; }
+.c-star { color: var(--accent); font-weight: 600; }
+.c-seal {
+  display: inline-grid; place-items: center;
+  width: 22px; height: 22px;
+  background: var(--accent); color: #fff;
+  border-radius: 4px;
+  font-size: var(--step--1);
+}
+.empty { padding: var(--space-4) 0; color: var(--muted-foreground); }
+
+/* ── 표 ── */
+.table-wrap { overflow-x: auto; overflow-y: hidden; }
+table { width: 100%; border-collapse: collapse; }
+th { font-weight: 500; } /* UA 기본 th 볼드 재정의 */
+thead th {
+  text-align: left; font-weight: 500; font-size: var(--step--1);
+  color: var(--muted-foreground); padding: 0 var(--space-3) var(--space-3);
+  border-bottom: 1px solid var(--border);
+  height: 36px; white-space: nowrap;
+}
+tbody td, tbody th { padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; font-size: var(--step-0); }
+tbody th { font-weight: 500; }
+tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
+tbody tr { transition: background-color 80ms ease; }
+tbody tr:hover { background: var(--muted); }
+.ar-sub { background: var(--muted); }
+.ar-sub th, .ar-sub td { font-weight: 600; }
+.low-seats { color: var(--danger); font-weight: 600; }
+
+/* ── 신청 내역 ── */
+.en-sum { color: var(--muted-foreground); margin-bottom: var(--space-4); }
+.en-sum strong { color: var(--accent-ink); font-size: var(--step-2); font-weight: 600; }
+.give-btn {
+  appearance: none; cursor: pointer; font: inherit;
+  font-size: var(--step--1); font-weight: 500;
+  background: none; color: var(--muted-foreground);
+  border: 1px solid var(--border-strong); border-radius: var(--radius);
+  height: 28px; padding: 0 10px;
+  transition: all 100ms ease;
+  white-space: nowrap;
+}
+.give-btn:hover { border-color: var(--danger); color: var(--danger); }
+
+/* ── 공지 게시판 ── */
+.notice-list { list-style: none; margin: 0; padding: 0; display: grid; }
+.notice-list li {
+  display: grid;
+  grid-template-columns: 3.2rem 4rem minmax(0, 1fr);
+  gap: var(--space-3);
+  align-items: baseline;
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--border);
+}
+.notice-list li:first-child { border-top: 1px solid var(--border); }
+.no-kind {
+  font-size: var(--step--1); font-weight: 600;
+  background: var(--muted-2); color: var(--muted-foreground);
+  border-radius: var(--radius); padding: 2px 8px;
+  text-align: center; white-space: nowrap;
+  justify-self: start;
+}
+.no-kind[data-kind="변경"] { background: var(--accent-soft); color: var(--accent-ink); }
+.no-date { color: var(--faint); }
+.no-body { line-height: var(--leading-normal); word-break: keep-all; max-width: 68ch; }
+
+/* ── 시간표 ── */
+.timetable-panel { min-width: 0; }
+.timetable-panel h2 { margin-bottom: 4px; }
+.tt-hint { font-size: var(--step--1); margin-bottom: var(--space-3); }
+.tt-scroll { overflow-x: auto; overflow-y: hidden; }
+.tt {
+  display: grid;
+  grid-template-columns: 2.5rem repeat(5, minmax(4.2rem, 1fr));
+  grid-auto-rows: minmax(1.35rem, auto);
+  min-width: min(100%, 420px);
+}
+.tt-corner { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--border-strong); }
+.tt-day {
+  font-size: var(--step--1); font-weight: 600;
+  display: grid; place-items: center;
+  border-bottom: 2px solid var(--border-strong);
+  padding-bottom: var(--space-1);
+}
+.tt-hour {
+  font-size: var(--step--2); color: var(--faint);
+  display: grid; place-items: start end;
+  padding: 2px 4px 0 0;
+  position: relative;
+}
+.tt-cell { border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
+.tt-block {
+  appearance: none; border: 0; cursor: pointer;
+  display: grid; align-content: start; gap: 2px;
+  padding: var(--space-2);
+  border-radius: var(--radius);
+  text-align: left; overflow: hidden;
+  transition: box-shadow 100ms ease, scale 80ms ease;
+  min-width: 0;
+}
+.tt-block:hover { box-shadow: var(--shadow-lg); z-index: 2; }
+.tt-block:active { scale: 0.98; }
+.tt-block.is-major { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), inset 3px 0 0 var(--accent); }
+.tt-block.is-gen { background: var(--muted-2); color: var(--foreground); box-shadow: inset 3px 0 0 var(--border-strong); }
+.tt-block-name { font-size: var(--step--1); font-weight: 600; line-height: 1.35; word-break: keep-all; }
+.tt-block-room { font-size: var(--step--2); color: var(--muted-foreground); }
+.tt-empty {
+  grid-column: 2 / -1; grid-row: 4 / span 8;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--faint); font-size: var(--step--1);
+  border: 1px dashed var(--border-strong); border-radius: var(--radius);
+  pointer-events: none;
+  background: var(--muted);
+}
+
+.status {
+  margin-top: var(--space-3);
+  font-size: var(--step--1);
+  color: var(--muted-foreground);
+  border-top: 1px solid var(--border);
+  padding-top: var(--space-3);
+  min-height: 2.2em;
+}
+.status.is-warn { color: var(--danger); }
+.tt-legend { display: flex; gap: var(--space-4); margin-top: var(--space-2); font-size: var(--step--1); color: var(--muted-foreground); }
+.key { display: inline-flex; align-items: center; gap: 6px; }
+.key i { width: 10px; height: 10px; display: inline-block; border-radius: 3px; }
+.k-major { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
+.k-gen { background: var(--muted-2); box-shadow: inset 2px 0 0 var(--border-strong); }
+.k-seal { background: var(--accent); }
+
+/* ── 버튼 ── */
+.btn-seal, .btn-line, .btn-star {
+  appearance: none; cursor: pointer; font: inherit;
+  font-size: var(--step-0); font-weight: 500;
+  height: 36px; padding: 0 var(--space-4);
+  border-radius: var(--radius);
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease, scale 80ms ease;
+  white-space: nowrap;
+}
+.btn-seal { background: var(--accent); border: 1px solid var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
+.btn-seal:hover:not(:disabled) { background: #9a3412; border-color: #9a3412; }
+.btn-seal:disabled { opacity: 0.45; cursor: not-allowed; }
+.btn-line { background: var(--card); border: 1px solid var(--border-strong); color: var(--foreground); box-shadow: var(--shadow-sm); }
+.btn-line:hover { background: var(--muted); }
+.btn-star { background: none; border: 1px solid var(--border-strong); color: var(--muted-foreground); }
+.btn-star:hover { color: var(--accent-ink); border-color: var(--accent); }
+.btn-star[aria-pressed="true"] { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
+.btn-seal:active, .btn-line:active, .btn-star:active { scale: 0.98; }
+
+/* ── 모달: 스플릿. 표지 = 잉크판, 액센트 도장. ── */
+.modal {
+  margin: auto;
+  width: min(94vw, 860px);
+  max-height: min(86dvh, 760px);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  color: var(--foreground);
+  overflow: hidden;
+  box-shadow: var(--shadow-xl);
+}
+.modal::backdrop { background: rgb(9 9 11 / 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
+@media (prefers-reduced-motion: no-preference) {
+  .modal[open] { animation: modal-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+  @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
+}
+.mspread { display: grid; grid-template-columns: 264px minmax(0, 1fr); max-height: min(86dvh, 760px); }
+.mcover {
+  position: relative;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  padding: var(--space-6);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+}
+.mcover-mark {
+  position: absolute; right: -18px; bottom: -24px;
+  font-size: 8rem; font-weight: 600; line-height: 1;
+  color: rgb(250 250 250 / 0.05);
+  pointer-events: none; user-select: none;
+}
+.mcover-seal {
+  width: 44px; height: 44px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: var(--step-2); font-weight: 600;
+  color: #fff;
+  background: var(--accent);
+  border-radius: var(--radius);
+  margin-bottom: var(--space-4);
+}
+.mcover-name { font-size: var(--step-3); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; word-break: keep-all; }
+.mcover-meta { color: #a1a1aa; font-size: var(--step--1); margin-top: var(--space-2); }
+.mcover-stats { margin-top: var(--space-5); border-top: 1px solid rgb(250 250 250 / 0.12); }
+.mcover-stats > div {
+  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid rgb(250 250 250 / 0.12);
+}
+.mcover-stats dt { font-size: var(--step--1); color: #a1a1aa; }
+.mcover-stats dd { font-size: var(--step--1); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
+.mcover-foot { margin-top: auto; color: #71717a; font-size: var(--step--2); }
+
+.msheet {
+  position: relative;
+  background: var(--card);
+  padding: var(--space-6);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: grid; gap: var(--space-5);
+  align-content: start;
+  min-height: 340px;
+}
+.cd-line { color: var(--muted-foreground); font-size: var(--step-0); }
+.msec h3 { color: var(--muted-foreground); margin-bottom: var(--space-3); font-weight: 500; font-size: var(--step-0); }
+.modal-title { font-size: var(--step-3); letter-spacing: -0.02em; }
+.modal-meta { color: var(--muted-foreground); margin-top: 2px; }
+.modal-close {
+  position: absolute; top: var(--space-4); right: var(--space-4);
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--card); color: var(--muted-foreground); cursor: pointer;
+  transition: background-color 100ms ease, color 100ms ease;
+  z-index: 2;
+}
+.modal-close:hover { background: var(--muted-2); color: var(--foreground); }
+.modal-inner { position: relative; padding: var(--space-6); display: grid; gap: var(--space-4); }
+.modal-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
+
+.facts {
+  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3);
+  border-block: 1px solid var(--border);
+  padding-block: var(--space-4);
+}
+.facts dt { font-size: var(--step--1); color: var(--muted-foreground); }
+.facts dd { font-weight: 600; margin-top: 2px; }
+.warn {
+  font-size: var(--step-0);
+  color: var(--danger-ink);
+  background: var(--danger-soft);
+  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
+  border-radius: var(--radius);
+  padding: var(--space-2) var(--space-3);
+}
+
+/* 주간 자리 미니 격자 */
+.cd-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
+.cd-track { display: grid; justify-items: center; gap: var(--space-1); }
+.cd-rail { position: relative; width: 100%; height: 92px; border-left: 1px solid var(--border-strong); }
+.cd-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); }
+.cd-slot { position: absolute; left: 0; right: 4px; border-radius: 3px; }
+.cd-slot.is-major { background: var(--accent-soft); border-left: 3px solid var(--accent); }
+.cd-slot.is-gen { background: var(--muted-2); border-left: 3px solid var(--border-strong); }
+.cd-day-l { font-size: var(--step--2); color: var(--faint); }
+.cd-day-l.is-on { color: var(--foreground); font-weight: 600; }
+
+/* 평가 누적 막대 — 벽돌의 농도 3단 */
+.eval-bar {
+  display: flex; height: 14px;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: var(--space-3);
+  background: var(--muted-2);
+}
+.eval-seg { display: block; height: 100%; }
+.eval-seg.seg-1 { background: var(--accent); }
+.eval-seg.seg-2 { background: color-mix(in srgb, var(--accent) 55%, #fff); }
+.eval-seg.seg-3 { background: color-mix(in srgb, var(--accent) 22%, #fff); }
+.eval-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
+.eval-legend dt { color: var(--muted-foreground); font-size: var(--step--1); }
+.eval-legend dd { font-weight: 600; font-size: var(--step--1); }
+
+/* ── 반응형 ── */
+@media (max-width: 900px) {
+  #view-catalog.is-on { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
+  .timetable-panel { position: static; }
+  .notice-list li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
+  .no-kind, .no-date { justify-self: start; }
+  .layout { padding: var(--space-4) var(--space-4) 64px; }
+}
+@media (max-width: 680px) {
+  .mspread { grid-template-columns: minmax(0, 1fr); }
+  .mcover { padding: var(--space-4); flex-direction: row; align-items: center; gap: var(--space-3); }
+  .mcover-seal { width: 40px; height: 40px; margin-bottom: 0; font-size: var(--step-0); }
+  .mcover-name { font-size: var(--step-2); }
+  .mcover-meta { margin-top: 2px; }
+  .mcover-stats, .mcover-foot { display: none; }
+  .mcover-mark { font-size: 5rem; }
+  .msheet { padding: var(--space-4); min-height: 0; }
+  .course-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
+  .c-side { text-align: left; display: flex; gap: var(--space-3); align-items: center; }
+  .modal-inner { padding: var(--space-4); }
+  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+  .modal-actions { flex-wrap: wrap; }
+}
+
+/* ── 뷰 공통 요약 스트립 (가온과 같은 문법) ── */
+.statline {
+  display: flex; flex-wrap: wrap; gap: 8px;
+  margin-bottom: var(--space-4);
+}
+.statline > div {
+  display: inline-flex; align-items: baseline; gap: 6px;
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); box-shadow: var(--shadow-sm);
+  padding: 6px 12px; font-size: var(--step-1); color: var(--muted-foreground);
+}
+.statline strong {
+  font-size: var(--step-0); font-weight: 600; color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 관심 과목 학점 경고 — 오류 예방 ── */
+.st-warn {
+  font-size: var(--step-0); line-height: 1.6; word-break: keep-all;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--muted-2); color: var(--muted-foreground);
+  padding: 10px 14px; margin-bottom: var(--space-4);
+  font-variant-numeric: tabular-nums;
+}
+.st-warn.is-over {
+  background: color-mix(in srgb, var(--accent) 8%, white);
+  border-color: color-mix(in srgb, var(--accent) 30%, white);
+  color: var(--accent-ink);
+}
+
+/* ── 모바일 갸행 수습 — 과목행 부정보는 세그먼트(코드·교수·시간·장소) 단위로만 끊는다 ── */
+.c-sub i { font-style: normal; white-space: nowrap; }
+.view-sub, .no-body, .st-warn, .empty, .notice-list { word-break: keep-all; overflow-wrap: anywhere; text-wrap: pretty; }
+
+/* ── 라운드 1: 이수 진행 바 · 학점 게이지 · 관심 추천 ── */
+.cr-bar { height: 6px; border-radius: 999px; background: var(--muted-2); overflow: hidden; min-width: 90px; }
+.cr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
+.cr-total { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
+.cr-total .cr-bar { height: 8px; }
+.credit-gauge { height: 8px; border-radius: 999px; background: var(--muted-2); overflow: hidden; margin: 10px 0 6px; }
+.credit-gauge i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 200ms ease; }
+.h-note { font-size: var(--step--1); font-weight: 400; color: var(--muted-foreground); margin-left: 8px; }
+.st-suggest { margin-top: var(--space-4); }
diff --git a/apps/site/public/work/dure-enrollment/styles/tokens.css b/apps/site/public/work/dure-enrollment/styles/tokens.css
new file mode 100644
index 0000000..1258677
--- /dev/null
+++ b/apps/site/public/work/dure-enrollment/styles/tokens.css
@@ -0,0 +1,55 @@
+/* ==========================================================================
+   두레대학 수강신청 — 디자인 토큰 (v3: 프로덕션 콘솔)
+   프리셋: production-console — shadcn/ui (new-york) zinc 스키마 + 벽돌 액센트 1.
+   컨셉 한 문장: 실제 대학이 쓰는 것 같은 수강신청 — 도장은 액센트 하나로 남고
+              나머지는 완성도로 말한다.
+   레퍼런스: shadcn/ui 디자인 시스템. 종이/배판 컨셉은 철회(사용자 판정).
+   하지 않은 것: 신문 배판 마스트헤드, 세리프 마스트, 전공별 색, 진행바 게이지.
+   ========================================================================== */
+
+:root {
+  --step--2: 0.6875rem;   /* 11px */
+  --step--1: 0.75rem;     /* 12px */
+  --step-0: 0.875rem;    /* 14px — 본문 */
+  --step-1: 1rem;        /* 16px */
+  --step-2: 1.125rem;    /* 18px */
+  --step-3: 1.5rem;      /* 24px */
+  --step-4: 1.875rem;    /* 30px */
+
+  --leading-tight: 1.3;
+  --leading-normal: 1.6;
+
+  --font-body: "IBM Plex Sans KR", "Pretendard Variable", -apple-system, sans-serif;
+  --font-display: "Noto Serif KR", "IBM Plex Sans KR", serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-mono-size: 0.8125rem;
+
+  --background: #fafafa;
+  --card: #ffffff;
+  --foreground: #09090b;
+  --muted: #fafafa;
+  --muted-2: #f4f4f5;
+  --muted-foreground: #64646e;  /* zinc-50/gray-100 위 5.2:1 이상 */
+  --faint: #6e6e77;            /* WCAG 4.5:1 보정 */
+  --border: #e4e4e7;
+  --border-strong: #d4d4d8;
+  --primary: #18181b;
+  --primary-foreground: #fafafa;
+  --ring: #a1a1aa;
+  --accent: #c2410c;        /* 벽돌 — 申 도장과 신청 액션만 */
+  --accent-soft: #fff7ed;
+  --accent-ink: #9a3412;
+  --success: #059669; --success-soft: #ecfdf5; --success-ink: #065f46;
+  --warning: #b45309; --warning-soft: #fffbeb; --warning-ink: #92400e;
+  --danger: #dc2626;  --danger-soft: #fef2f2;  --danger-ink: #991b1b;
+
+  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
+  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
+
+  --radius: 6px;
+  --radius-lg: 12px;
+
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
diff --git a/apps/site/public/work/font-foundry/assets/inkstone.webp b/apps/site/public/work/font-foundry/assets/inkstone.webp
new file mode 100644
index 0000000..394bb64
Binary files /dev/null and b/apps/site/public/work/font-foundry/assets/inkstone.webp differ
diff --git a/apps/site/public/work/font-foundry/assets/metaltype.webp b/apps/site/public/work/font-foundry/assets/metaltype.webp
new file mode 100644
index 0000000..fcda3f8
Binary files /dev/null and b/apps/site/public/work/font-foundry/assets/metaltype.webp differ
diff --git a/apps/site/public/work/font-foundry/index.html b/apps/site/public/work/font-foundry/index.html
new file mode 100644
index 0000000..f0c4ada
--- /dev/null
+++ b/apps/site/public/work/font-foundry/index.html
@@ -0,0 +1,289 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>한성활자연구소 · 본문용 한글 활자</title>
+    <meta
+      name="description"
+      content="획의 장력과 여백의 비례. 본문 조판을 위해 설계한 한글 활자 두 종과 조판 시험대. 1000 UPM, 측정 가능한 자간과 행간."
+    />
+    <meta property="og:title" content="한성활자연구소 · 본문용 한글 활자" />
+    <meta
+      property="og:description"
+      content="본문 조판을 위해 설계한 한글 활자와 조판 시험대."
+    />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#F5F1E8" />
+
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
+    />
+    <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="./styles/main.css?v=2" />
+    <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='%23F5F1E8'/%3E%3Crect x='8' y='8' width='16' height='16' fill='%23A63D2F'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">한성활자연구소</a>
+        <nav class="nav" aria-label="섹션">
+          <a href="#typefaces">활자</a>
+          <a href="#bench">시험대</a>
+          <a href="#case">활자 케이스</a>
+          <a href="#order">구입</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        스페시멘 히어로 — 파운드리의 첫 화면은 설명이 아니라 글자다.
+        '한' 한 글자를 페이지에서 가장 크게, 인주각과 함께.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap">
+          <p class="hero-kicker reveal">본문용 한글 활자 · 1000 UPM · 2018년 창립</p>
+          <h1 id="hero-h" class="hero-glyph reveal" style="--delay: 60ms" lang="ko" aria-label="한">한</h1>
+          <div class="hero-side">
+            <p class="hero-statement">
+              이 글자가 어디에 쓰이는지는 이 페이지 전체가 증명합니다. 우리는
+              제목용 활자를 만들지 않습니다 — 오래 읽어야 하는 본문의 활자만
+              만듭니다. 획의 장력, 자간의 균형, 행간의 숨을 그 단위(UPM)로
+              측정합니다.
+            </p>
+            <dl class="hero-facts reveal" style="--delay: 120ms">
+              <div>
+                <dt>서체</dt>
+                <dd>한성본문 · 한성제목</dd>
+              </div>
+              <div>
+                <dt>글자 수</dt>
+                <dd>11,172자 완성</dd>
+              </div>
+              <div>
+                <dt>단위</dt>
+                <dd>1000 UPM · 가변 웨이트 3종</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        활자 두 종 — 스페시멘은 실제 문장으로. Lorem ipsum 은 활자시험의 반대다.
+      -->
+      <section id="typefaces" class="section" aria-labelledby="typefaces-h">
+        <div class="wrap">
+          <h2 id="typefaces-h">활자 두 종</h2>
+
+          <article class="typeface reveal">
+            <header class="typeface-head">
+              <h3>한성본문</h3>
+              <p class="muted">본문용 · 웨이트 400 · 16px에서 행간 1.8</p>
+            </header>
+            <p class="specimen" style="font-family: 'MaruBuri', serif">
+              아침 안개가 걷히기 전에 도랑물 소리가 먼저 들렸다. 글자는 종이 위에서
+              소리를 내지 않지만, 잘 짜인 활자는 소리 내어 읽게 만든다. 획이 닿는
+              각도와 글자가 서로 미는 힘을 천 번쯤 고쳐 썼다. 그 결과 이 문장이
+              밤늦게도 읽히는 것이다.
+            </p>
+          </article>
+
+          <article class="typeface reveal" style="--delay: 80ms">
+            <header class="typeface-head">
+              <h3>한성제목</h3>
+              <p class="muted">제목·표제용 · 웨이트 600 · 큰 짝에서 벌어짐 0</p>
+            </header>
+            <p class="specimen specimen-display" style="font-family: 'MaruBuri', serif">
+              활자는 붓의 속도를 기억한다
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <!--
+        조판 시험대 — 이 페이지의 리스크이자 유일한 인터랙션.
+        슬라이더 세 개가 실제 본문에 즉시 반영된다. 라벨은 한국어, 값은 숫자로.
+      -->
+      <section id="bench" class="section band" aria-labelledby="bench-h">
+        <div class="wrap">
+          <h2 id="bench-h">조판 시험대</h2>
+          <p class="muted bench-lead">
+            자간과 행간, 글자 크기가 가독성을 어떻게 바꾸는지 직접 움직여 보세요.
+            아래 값은 권장값이 아니라 출발점입니다 — 용지 규격과 본문 길이에 따라
+            정답은 달라집니다.
+          </p>
+
+          <div class="bench">
+            <form class="bench-controls" aria-label="조판 설정">
+              <div class="control">
+                <label for="ctl-size">글자 크기 <output id="out-size" for="ctl-size">17</output></label>
+                <input type="range" id="ctl-size" min="13" max="26" step="1" value="17" />
+              </div>
+              <div class="control">
+                <label for="ctl-tracking">자간 <output id="out-tracking" for="ctl-tracking">0</output></label>
+                <input type="range" id="ctl-tracking" min="-5" max="10" step="1" value="0" />
+              </div>
+              <div class="control">
+                <label for="ctl-leading">행간 <output id="out-leading" for="ctl-leading">1.8</output></label>
+                <input type="range" id="ctl-leading" min="1.4" max="2.4" step="0.1" value="1.8" />
+              </div>
+              <button type="button" class="btn-reset" id="ctl-reset">권장값으로</button>
+            </form>
+            <div
+              class="bench-sample"
+              id="bench-sample"
+              style="font-family: 'MaruBuri', serif"
+              aria-live="polite"
+            >
+              활자의 역사는 글자를 찍는 기계의 역사가 아니라, 글자를 읽는 눈의
+              역사였다. 활자소의 식자공들은 하루에 만 글자를 짜면서 어느 글꼴이
+              눈을 덜 아프게 하는지 알고 있었다. 그 지식은 문서로 남지 않았고
+              손끝으로만 전해졌다. 이 시험대는 그 손끝의 판단을 누구나 해볼 수
+              있는 눈금으로 옮긴 것이다. 자간을 0에서 5로 옮겨 보라 — 문장이
+              늘어지는 것이 아니라 숨이 가빠지는 것을 느낄 것이다.
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        활자 케이스 — 연구소의 물성. 금속 활자와 인주.
+      -->
+      <section id="case" class="section" aria-labelledby="case-h">
+        <div class="wrap case-grid">
+          <figure class="case-photo reveal">
+            <img
+              src="./assets/metaltype.webp"
+              alt="나무 활자 케이스에 골라 담긴 금속 활자들 — 활자면이 위에서 빛을 받아 결이 보인다"
+              width="900"
+              height="1200"
+              loading="lazy"
+            />
+            <figcaption>연구소 2층 · 금속 활자 케이스</figcaption>
+          </figure>
+          <div class="case-text">
+            <h2 id="case-h">금속에서 시작해<br />화면으로 끝난다</h2>
+            <p>
+              한성본문의 자간 규칙은 금속 활자의 '옆면 여백'에서 왔습니다. 납활자는
+              글자 바로 옆에 살이 붙어 있어서, 찍히는 글자 사이는 언제나 일정했고
+              그 일정함이 읽는 리듬이었습니다. 화면용 폰트는 그 살을 지울 수
+              있지만, 우리는 지우지 않았습니다.
+            </p>
+            <figure class="case-photo-b reveal" style="--delay: 80ms">
+              <img
+                src="./assets/inkstone.webp"
+                alt="연구한 먹이 고인 연적과 옆에 놓인 인주 연판"
+                width="1100"
+                height="825"
+                loading="lazy"
+              />
+              <figcaption>먹을 갈고 인주를 찍는 자리 — 시험 인쇄 전</figcaption>
+            </figure>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        구입 — 라이선스는 조판 단위로. 조용한 두 줄.
+      -->
+      <section id="order" class="section" aria-labelledby="order-h">
+        <div class="wrap order-grid">
+          <div>
+            <h2 id="order-h">구입</h2>
+            <p class="muted">
+              웹·출판·임베드 세 가지 라이선스만 있습니다. 사용 수를 세지 않습니다 —
+              조판되는 단위(도서 권수, 사이트 도메인, 기기)로 셉니다.
+            </p>
+          </div>
+          <div class="order-rows">
+            <div class="order-row">
+              <div>
+                <h3>웹</h3>
+                <p>도메인당 · 웨이트 전종 · 자체 호스팅 WOFF2</p>
+              </div>
+              <p class="order-price">140,000원</p>
+            </div>
+            <div class="order-row">
+              <div>
+                <h3>출판</h3>
+                <p>도서 권수당 · 인쇄+전자 동시</p>
+              </div>
+              <p class="order-price">220,000원</p>
+            </div>
+          </div>
+          <a class="btn" href="mailto:foundry@hanseong.kr">견적 문의</a>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>한성활자연구소 · 서울 마포</p>
+        <p class="muted">foundry@hanseong.kr</p>
+      </div>
+    </footer>
+
+    <script>
+      /* 시험대 — 슬라이더 세 개가 본문 스타일을 직접 쓴다. 프레임당 레이아웃 없음. */
+      const sample = document.getElementById("bench-sample");
+      const ctl = {
+        size: document.getElementById("ctl-size"),
+        tracking: document.getElementById("ctl-tracking"),
+        leading: document.getElementById("ctl-leading"),
+      };
+      const out = {
+        size: document.getElementById("out-size"),
+        tracking: document.getElementById("out-tracking"),
+        leading: document.getElementById("out-leading"),
+      };
+      const defaults = { size: 17, tracking: 0, leading: 1.8 };
+
+      function apply() {
+        const px = ctl.size.value + "px";
+        const em = ctl.tracking.value / 100 + "em";
+        const lh = ctl.leading.value;
+        sample.style.fontSize = px;
+        sample.style.letterSpacing = em;
+        sample.style.lineHeight = lh;
+        out.size.textContent = ctl.size.value;
+        out.tracking.textContent = ctl.tracking.value;
+        out.leading.textContent = Number(ctl.leading.value).toFixed(1);
+      }
+      for (const input of Object.values(ctl)) {
+        input.addEventListener("input", apply);
+      }
+      document.getElementById("ctl-reset").addEventListener("click", () => {
+        ctl.size.value = defaults.size;
+        ctl.tracking.value = defaults.tracking;
+        ctl.leading.value = defaults.leading;
+        apply();
+      });
+      apply();
+
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/font-foundry/styles/main.css b/apps/site/public/work/font-foundry/styles/main.css
new file mode 100644
index 0000000..3981f9e
--- /dev/null
+++ b/apps/site/public/work/font-foundry/styles/main.css
@@ -0,0 +1,420 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   한성활자연구소 — editorial-archival. 글자가 상품.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2, h3) {
+  font-family: var(--font-display);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h2 {
+  font-size: var(--step-2);
+}
+h3 {
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: var(--step-1);
+}
+:where(p, li, dd, dt, th, td, figcaption) {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+.muted {
+  color: var(--ink-muted);
+}
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 90%, transparent);
+  backdrop-filter: blur(6px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  font-weight: 600;
+  text-decoration: none;
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+
+/* ── 스페시멘 히어로 ──────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-7) var(--space-8);
+}
+.hero-kicker {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  letter-spacing: 0.06em;
+}
+.hero-glyph {
+  font-size: clamp(11rem, 24vw, 22rem);
+  line-height: 0.95;
+  margin-top: var(--space-4);
+  position: relative;
+}
+/* 인주각 — 글리프 옆에 찍히는 도장 */
+.hero-glyph::after {
+  content: "";
+  position: absolute;
+  right: 0.12em;
+  bottom: 0.18em;
+  width: 0.11em;
+  height: 0.11em;
+  background: var(--accent);
+}
+.hero-side {
+  margin-top: var(--space-5);
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+}
+.hero-statement {
+  max-width: 32em;
+}
+.hero-facts {
+  display: grid;
+  gap: var(--space-3);
+  border-left: 1px solid var(--line);
+  padding-left: var(--space-5);
+}
+.hero-facts dt {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.hero-facts dd {
+  margin-top: 2px;
+  font-weight: 500;
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+
+/* ── 활자 두 종 ───────────────────────────────────────────────────────── */
+
+.typeface + .typeface {
+  margin-top: var(--space-6);
+}
+.typeface-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  border-top: 1px solid var(--line);
+  padding-top: var(--space-3);
+}
+.typeface-head .muted {
+  font-size: var(--step--1);
+}
+.specimen {
+  margin-top: var(--space-4);
+  font-size: 1.1875rem;
+  line-height: 1.9;
+  max-width: 46em;
+}
+.specimen-display {
+  font-size: clamp(1.75rem, 1.2rem + 3vw, 3.25rem);
+  line-height: 1.45;
+  max-width: 22em;
+  font-weight: 600;
+}
+
+/* ── 조판 시험대 ──────────────────────────────────────────────────────── */
+
+.bench-lead {
+  max-width: 36em;
+  margin-top: var(--space-3);
+}
+.bench {
+  margin-top: var(--space-5);
+  display: grid;
+  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+}
+.bench-controls {
+  display: grid;
+  gap: var(--space-4);
+}
+.control label {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.control output {
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent);
+}
+.btn-reset {
+  justify-self: start;
+  background: none;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+  padding: 0.4rem 0.9rem;
+  cursor: pointer;
+  transition: border-color var(--dur-quick) var(--ease-soft),
+    color var(--dur-quick) var(--ease-soft);
+}
+.btn-reset:hover {
+  border-color: var(--accent);
+  color: var(--ink);
+}
+.bench-sample {
+  border: 1px solid var(--line);
+  background: var(--surface);
+  border-radius: var(--radius);
+  padding: var(--space-5);
+  max-width: 46em;
+}
+
+/* ── 활자 케이스 ──────────────────────────────────────────────────────── */
+
+.case-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: start;
+}
+.case-photo img,
+.case-photo-b img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.case-photo figcaption,
+.case-photo-b figcaption {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+.case-text h2 {
+  margin-bottom: var(--space-4);
+}
+.case-photo-b {
+  margin-top: var(--space-5);
+  max-width: 34rem;
+}
+
+/* ── 구입 ─────────────────────────────────────────────────────────────── */
+
+.order-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+}
+.order-grid .muted {
+  margin-top: var(--space-3);
+  max-width: 26em;
+}
+.order-rows {
+  border-top: 1px solid var(--line);
+}
+.order-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--line);
+}
+.order-row p {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  margin-top: 2px;
+}
+.order-price {
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  white-space: nowrap;
+}
+.btn {
+  display: inline-block;
+  background: var(--accent);
+  color: var(--accent-ink);
+  font-weight: 500;
+  text-decoration: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft);
+}
+.btn:hover {
+  background: var(--accent-hover);
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-5);
+  font-size: var(--step--1);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 12px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-side,
+  .bench,
+  .case-grid,
+  .order-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .case-photo {
+    max-width: 24rem;
+  }
+  .hero,
+  .section {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .order-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+}
diff --git a/apps/site/public/work/font-foundry/styles/tokens.css b/apps/site/public/work/font-foundry/styles/tokens.css
new file mode 100644
index 0000000..8bb93c3
--- /dev/null
+++ b/apps/site/public/work/font-foundry/styles/tokens.css
@@ -0,0 +1,53 @@
+/* ==========================================================================
+   한성활자연구소 — 디자인 토큰
+   프리셋: editorial-archival
+   컨셉 한 문장: 글자가 상품이다 — 첫 화면부터 스페시멘, 나머지는 물성과 눈금.
+   레퍼런스: dogfood-foundry(파운드리 계열 구조 관찰 — 별도 파일). 방향:
+            스페시멘은 Lorem 이 아니라 실제 문장, 테스터는 즉시 반영.
+   하지 않은 것: Lorem ipsum, 서체 카드 3열, '구독하면 웨이트 전부' 마케팅,
+               책등 세로 내비. 이유: 활자는 보여주는 것이지 포장하는 게 아니다.
+   강조 인주빨강 #A63D2F — 인장·CTA에만. 배경 채움은 버튼 하나 뿐.
+   ========================================================================== */
+
+:root {
+  /* 타입 — 스페시멘 글리프는 스케일 밖(20vw). 본문 17px. */
+  --step--1: 0.8125rem;   /* 13px */
+  --step-0: 1.0625rem;    /* 17px — 본문 (조판을 파는 페이지) */
+  --step-1: 1.25rem;      /* 20px */
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 28px */
+  --step-3: clamp(2rem, 1.4rem + 3vw, 3.25rem);       /* 52px */
+
+  --leading-tight: 1.3;
+  --leading-normal: 1.85;
+
+  --font-display: "MaruBuri", serif;
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+
+  --surface: #f5f1e8;      /* 한지 */
+  --surface-raised: #ede7d9;
+  --ink: #26221d;
+  --ink-muted: #6a635a;
+  --ink-faint: #948b7c;
+  --line: #d9d1bf;
+  --accent: #a63d2f;       /* 인주 */
+  --accent-ink: #f5f1e8;
+  --accent-hover: #8a3225; /* 인주 눌린 단계 */
+
+  --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, 8.5rem);
+
+  --radius: 2px;
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 420ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/form-architecture/assets/interior-bw.webp b/apps/site/public/work/form-architecture/assets/interior-bw.webp
new file mode 100644
index 0000000..03e1019
Binary files /dev/null and b/apps/site/public/work/form-architecture/assets/interior-bw.webp differ
diff --git a/apps/site/public/work/form-architecture/assets/model-bw.webp b/apps/site/public/work/form-architecture/assets/model-bw.webp
new file mode 100644
index 0000000..0a7aa5f
Binary files /dev/null and b/apps/site/public/work/form-architecture/assets/model-bw.webp differ
diff --git a/apps/site/public/work/form-architecture/assets/pavilion-bw.webp b/apps/site/public/work/form-architecture/assets/pavilion-bw.webp
new file mode 100644
index 0000000..079e535
Binary files /dev/null and b/apps/site/public/work/form-architecture/assets/pavilion-bw.webp differ
diff --git a/apps/site/public/work/form-architecture/index.html b/apps/site/public/work/form-architecture/index.html
new file mode 100644
index 0000000..ad94f91
--- /dev/null
+++ b/apps/site/public/work/form-architecture/index.html
@@ -0,0 +1,303 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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="#FDFDFB" />
+
+    <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="./styles/main.css?v=2" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='6' y='6' width='20' height='20' fill='none' stroke='%23111' stroke-width='2'/%3E%3Crect x='11' y='11' width='10' height='10' fill='%23111'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <!-- 4모서리 등록 표시(인쇄 판맞춤) — 이 페이지의 리스크. 넓은 화면에서만. -->
+    <div class="corner corner-tl" aria-hidden="true"></div>
+    <div class="corner corner-tr" aria-hidden="true"></div>
+    <div class="corner corner-bl" aria-hidden="true"></div>
+    <div class="corner corner-br" aria-hidden="true"></div>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">스튜디오 폼 <span class="wordmark-en">FORM</span></a>
+        <nav class="nav" aria-label="섹션">
+          <a href="#index">인덱스</a>
+          <a href="#drawing">도면</a>
+          <a href="#photo">사진</a>
+          <a href="#contact">연락</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        서문 — Pawson의 교훈: 크기가 아니라 여백과 무게로 위계를 만든다.
+        큰 글자는 이 페이지에 하나만 있다.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap">
+          <p class="hero-meta reveal">
+            공간건축연구소 · 서울 · 2014년 설립
+          </p>
+          <h1 id="hero-h" class="reveal" style="--delay: 60ms">
+            형태는 침묵하고<br />치수가 태도를 증명한다
+          </h1>
+          <p class="hero-statement reveal" style="--delay: 120ms">
+            폼은 공간을 꾸미지 않습니다. 벽이 서는 이유, 창이 열리는 방향, 보가
+            건너뛰는 길이를 설계합니다. 아름다움은 그 결정들이 모였을 때의
+            부산물입니다 — 그래서 우리의 홍보는 도면과 치수로 합니다.
+          </p>
+          <dl class="hero-facts reveal" style="--delay: 180ms">
+            <div>
+              <dt>설립</dt>
+              <dd>2014년</dd>
+            </div>
+            <div>
+              <dt>구성</dt>
+              <dd>건축사 4 · 연구원 3</dd>
+            </div>
+            <div>
+              <dt>영역</dt>
+              <dd>주거 · 미술관 · 재생</dd>
+            </div>
+          </dl>
+        </div>
+      </section>
+
+      <!--
+        인덱스 — 이 페이지의 주인공. 사진 없는 역연도 목록.
+        R1(johnpawson.com): 프로젝트는 제목/위치/연도의 세 줄 텍스트다.
+      -->
+      <section id="index" class="section" aria-labelledby="index-h">
+        <div class="wrap">
+          <h2 id="index-h" class="index-h reveal">프로젝트 인덱스</h2>
+          <ol class="index">
+            <li class="index-row reveal">
+              <a href="#drawing">
+                <span class="idx-name">폼 하우스</span>
+                <span class="idx-loc">경기 가평</span>
+                <span class="idx-year">2025</span>
+              </a>
+            </li>
+            <li class="index-row reveal" style="--delay: 40ms">
+              <a href="#drawing">
+                <span class="idx-name">백령도 해녀기념관</span>
+                <span class="idx-loc">인천 백령도</span>
+                <span class="idx-year">2024</span>
+              </a>
+            </li>
+            <li class="index-row reveal" style="--delay: 80ms">
+              <a href="#drawing">
+                <span class="idx-name">은평 재생주거</span>
+                <span class="idx-loc">서울 은평</span>
+                <span class="idx-year">2024</span>
+              </a>
+            </li>
+            <li class="index-row reveal" style="--delay: 120ms">
+              <a href="#drawing">
+                <span class="idx-name">제주 돌담 스튜디오</span>
+                <span class="idx-loc">제주 애월</span>
+                <span class="idx-year">2023</span>
+              </a>
+            </li>
+            <li class="index-row reveal" style="--delay: 160ms">
+              <a href="#drawing">
+                <span class="idx-name">성수 인쇄공장 재생</span>
+                <span class="idx-loc">서울 성수</span>
+                <span class="idx-year">2022</span>
+              </a>
+            </li>
+            <li class="index-row reveal" style="--delay: 200ms">
+              <a href="#drawing">
+                <span class="idx-name">폼 오피스</span>
+                <span class="idx-loc">서울 종로</span>
+                <span class="idx-year">2019</span>
+              </a>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <!--
+        도면 — 스티키 평면도가 섹션을 지나는 동안 그어진다.
+        R3: CSS scroll-driven + stroke-dashoffset. 폴백은 완성된 도면.
+        도면은 장식이 아니라 이 연구소의 언어 그 자체다.
+      -->
+      <section id="drawing" class="section drawing" aria-labelledby="drawing-h">
+        <div class="wrap drawing-grid">
+          <div class="drawing-stage reveal">
+            <svg
+              viewBox="0 0 520 640"
+              role="img"
+              aria-label="폼 하우스 1층 평면도. 남쪽으로 긴 거실과 북쪽 서비스 블록, 동쪽 마당으로 이루어져 있다."
+            >
+              <!-- 외곽 벽 (이중선) -->
+              <path
+                class="wall"
+                d="M 80 60 H 440 V 580 H 80 Z M 88 68 H 432 V 572 H 88 Z"
+              />
+              <!-- 내부 벽 -->
+              <path
+                class="wall inner"
+                d="M 260 68 V 300 M 260 380 V 572 M 88 300 H 432 M 88 380 H 260"
+              />
+              <!-- 문 개구부 표시 -->
+              <path class="door" d="M 260 340 h -36 M 260 340 a 36 36 0 0 1 36 -36" />
+              <!-- 기둥 -->
+              <path class="column" d="M 176 130 h 10 v 10 h -10 z M 356 130 h 10 v 10 h -10 z M 176 250 h 10 v 10 h -10 z M 356 250 h 10 v 10 h -10 z" />
+              <!-- 치수선 -->
+              <g class="dim">
+                <path d="M 80 610 H 440 M 80 602 v 16 M 440 602 v 16" />
+                <path d="M 50 60 V 580 M 42 60 h 16 M 42 580 h 16" />
+                <text x="260" y="632" text-anchor="middle">14,400</text>
+                <text x="30" y="325" text-anchor="middle" transform="rotate(-90 30 325)">9,600</text>
+              </g>
+              <!-- 방 이름 -->
+              <g class="room-label">
+                <text x="174" y="190">거실</text>
+                <text x="350" y="190" text-anchor="middle"></text>
+                <text x="174" y="460">주방·식당</text>
+                <text x="350" y="455">서비스</text>
+                <text x="350" y="490">현관</text>
+              </g>
+              <!-- 방위 -->
+              <g class="north">
+                <path d="M 470 90 v -40 M 470 50 l -8 14 M 470 50 l 8 14" />
+                <text x="470" y="110" text-anchor="middle">N</text>
+              </g>
+            </svg>
+            <p class="drawing-caption">폼 하우스 · 1층 평면도 · mm</p>
+          </div>
+
+          <div class="drawing-notes">
+            <h2 id="drawing-h">폼 하우스, 가평</h2>
+            <p>
+              대지 남쪽의 소나무군을 지우지 않기 위해 집은 길게 눕고, 마당은 집
+              안쪽으로 들어왔습니다. 구조는 9.6m 축 한 번으로 건너뛰어 거실에 기둥이
+              없습니다.
+            </p>
+            <p>
+              벽체는 단열 성능의 요구치에서 두께가 정해졌습니다 — 마감 재료를 먼저
+              고르고 두께를 맞추지 않았습니다. 창은 남향 긴면 하나, 동쪽 마당 면
+              하나. 그 두 개로 이 집의 하루가 결정됩니다.
+            </p>
+            <dl class="drawing-spec">
+              <div>
+                <dt>구조</dt>
+                <dd>RC 라멘 · 9.6m 스팬</dd>
+              </div>
+              <div>
+                <dt>면적</dt>
+                <dd>132.4 ㎡ (40.0평)</dd>
+              </div>
+              <div>
+                <dt>창개구</dt>
+                <dd>남측 14.4m · 동측 4.2m</dd>
+              </div>
+              <div>
+                <dt>줄공사</dt>
+                <dd>2025-04 – 2026-01</dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        사진 — 흑백 3점. 그리드는 엄격하게, 크기는 사진이 요구하는 대로.
+      -->
+      <section id="photo" class="section photo" aria-labelledby="photo-h">
+        <div class="wrap">
+          <h2 id="photo-h" class="reveal">사진</h2>
+          <div class="photo-grid">
+            <figure class="ph ph-a reveal">
+              <img
+                src="./assets/pavilion-bw.webp"
+                alt="긴 수평창이 낸 콘크리트 파빌리온에 벽 그림자가 지는 모습"
+                width="1440"
+                height="810"
+                loading="lazy"
+              />
+              <figcaption>폼 하우스 · 남측 · 준공 후 첫 여름</figcaption>
+            </figure>
+            <figure class="ph ph-b reveal" style="--delay: 60ms">
+              <img
+                src="./assets/interior-bw.webp"
+                alt="천창으로 한 줄기 빛이 사선으로 들어오는 미장 마감 전시실"
+                width="900"
+                height="1200"
+                loading="lazy"
+              />
+              <figcaption>백령도 해녀기념관 · 제1전시실</figcaption>
+            </figure>
+            <figure class="ph ph-c reveal" style="--delay: 120ms">
+              <img
+                src="./assets/model-bw.webp"
+                alt="스터디 모델 — 직육면체를 쌓은 백색 석고 모형에 측광이 지는 모습"
+                width="1100"
+                height="825"
+                loading="lazy"
+              />
+              <figcaption>스터디 모델 07 · 석고</figcaption>
+            </figure>
+          </div>
+        </div>
+      </section>
+
+      <!-- 연락 — 서류 같은 마무리 -->
+      <section id="contact" class="section contact" aria-labelledby="contact-h">
+        <div class="wrap contact-grid">
+          <h2 id="contact-h">연락</h2>
+          <address>
+            서울 종로구 자하문로 00길 00, 3층<br />
+            <a class="link" href="mailto:studio@form.kr">studio@form.kr</a>
+          </address>
+          <p class="contact-note">
+            신규 프로젝트는 분기에 두 건만 받습니다. 대지와 예산의 조건을 적어
+            보내주시면, 가능 여부를 2주 안에 답합니다.
+          </p>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>스튜디오 폼 · 공간건축연구소</p>
+        <p class="foot-meta">© 2014–2026</p>
+      </div>
+    </footer>
+
+    <script>
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/form-architecture/styles/main.css b/apps/site/public/work/form-architecture/styles/main.css
new file mode 100644
index 0000000..fb70a83
--- /dev/null
+++ b/apps/site/public/work/form-architecture/styles/main.css
@@ -0,0 +1,497 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   스튜디오 폼 — swiss-minimal. 판맞춤 도면 묶음.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2, h3) {
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.01em;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+:where(p, li, dd, dt, th, td, address, figcaption) {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+a {
+  color: inherit;
+}
+.link {
+  text-decoration: none;
+  border-bottom: 1px solid var(--line-strong);
+  transition: border-color var(--dur-quick) var(--ease-soft);
+}
+.link:hover {
+  border-color: var(--ink);
+}
+
+:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 판맞춤 표시 — 넓은 화면에서만, 내용과 겹치지 않는 곳에 ──────────── */
+
+.corner {
+  position: fixed;
+  width: 18px;
+  height: 18px;
+  z-index: 40;
+  pointer-events: none;
+}
+.corner-tl {
+  top: 10px;
+  left: 10px;
+  border-top: 1px solid var(--line-strong);
+  border-left: 1px solid var(--line-strong);
+}
+.corner-tr {
+  top: 10px;
+  right: 10px;
+  border-top: 1px solid var(--line-strong);
+  border-right: 1px solid var(--line-strong);
+}
+.corner-bl {
+  bottom: 10px;
+  left: 10px;
+  border-bottom: 1px solid var(--line-strong);
+  border-left: 1px solid var(--line-strong);
+}
+.corner-br {
+  bottom: 10px;
+  right: 10px;
+  border-bottom: 1px solid var(--line-strong);
+  border-right: 1px solid var(--line-strong);
+}
+@media (max-width: 900px) {
+  .corner {
+    display: none;
+  }
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 90%, transparent);
+  backdrop-filter: blur(6px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-size: var(--step-1);
+  font-weight: 600;
+  text-decoration: none;
+}
+.wordmark-en {
+  color: var(--ink-faint);
+  font-weight: 400;
+  margin-left: var(--space-1);
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  border-bottom: 1px solid transparent;
+  padding-block: 2px;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--ink);
+}
+
+/* ── 서문 ─────────────────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-8) var(--space-7);
+  border-bottom: 1px solid var(--line);
+}
+.hero-meta {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  margin-bottom: var(--space-5);
+}
+.hero-statement {
+  margin-top: var(--space-5);
+  max-width: 30em;
+}
+.hero-facts {
+  margin-top: var(--space-6);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4) var(--space-7);
+  border-top: 1px solid var(--line);
+  padding-top: var(--space-4);
+}
+.hero-facts dt {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.hero-facts dd {
+  font-weight: 500;
+}
+
+/* ── 인덱스 ───────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.index-h {
+  font-size: var(--step--1);
+  font-weight: 500;
+  color: var(--ink-muted);
+  letter-spacing: 0.2em;
+}
+.index {
+  list-style: none;
+  margin-top: var(--space-3);
+  padding: 0;
+  border-top: 1px solid var(--line-strong);
+}
+.index-row a {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: var(--space-4) var(--space-6);
+  align-items: baseline;
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  text-decoration: none;
+  transition: background var(--dur-quick) var(--ease-soft);
+}
+.index-row a:hover {
+  background: var(--ink);
+  color: var(--surface);
+}
+.idx-name {
+  font-size: var(--step-1);
+  font-weight: 500;
+}
+.idx-loc {
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+.index-row a:hover .idx-loc {
+  color: inherit;
+}
+.idx-year {
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+.index-row a:hover .idx-year {
+  color: inherit;
+}
+
+/* ── 도면(스티키) ─────────────────────────────────────────────────────── */
+
+.drawing {
+  background: var(--surface);
+}
+.drawing-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: var(--space-6) var(--space-7);
+}
+.drawing-stage {
+  position: sticky;
+  top: calc(var(--space-5) + 56px);
+  align-self: start;
+}
+.drawing-stage svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--line);
+  background: var(--surface-bright);
+}
+.wall {
+  fill: none;
+  stroke: var(--ink);
+  stroke-width: 2;
+}
+.wall.inner {
+  stroke-width: 1.25;
+}
+.door {
+  fill: none;
+  stroke: var(--ink-muted);
+  stroke-width: 1;
+  stroke-dasharray: none;
+}
+.column {
+  fill: var(--ink);
+}
+.dim path {
+  fill: none;
+  stroke: var(--line-strong);
+  stroke-width: 1;
+}
+.dim text {
+  font-size: 12px;
+  fill: var(--ink-faint);
+  font-variant-numeric: tabular-nums;
+}
+.room-label text {
+  font-size: 13px;
+  fill: var(--ink-muted);
+}
+.north path {
+  fill: none;
+  stroke: var(--ink);
+  stroke-width: 1.25;
+}
+.north text {
+  font-size: 12px;
+  fill: var(--ink-muted);
+}
+.drawing-caption {
+  margin-top: var(--space-2);
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .wall,
+    .wall.inner {
+      stroke-dasharray: 3400;
+      stroke-dashoffset: 3400;
+      animation: draw 1.4s linear both;
+      animation-timeline: --drawing;
+      animation-range: entry 10% contain 55%;
+    }
+    @keyframes draw {
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+  }
+}
+
+.drawing-notes h2 {
+  font-size: var(--step-2);
+}
+.drawing-notes p + p {
+  margin-top: var(--space-4);
+}
+.drawing-spec {
+  margin-top: var(--space-5);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: var(--space-3) var(--space-5);
+  border-top: 1px solid var(--line);
+  padding-top: var(--space-4);
+}
+.drawing-spec dt {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.drawing-spec dd {
+  margin-top: 2px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── 사진 ─────────────────────────────────────────────────────────────── */
+
+.photo {
+  border-top: 1px solid var(--line);
+}
+.photo h2 {
+  font-size: var(--step--1);
+  font-weight: 500;
+  color: var(--ink-muted);
+  letter-spacing: 0.2em;
+}
+.photo-grid {
+  margin-top: var(--space-4);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-4);
+}
+.ph {
+  display: block;
+}
+.ph img {
+  display: block;
+  width: 100%;
+  height: auto;
+  filter: grayscale(1); /* 사진 파일이 흑백이 아니어도 페이지는 흑백이다 */
+}
+.ph-a {
+  grid-column: 1 / -1;
+}
+.ph figcaption {
+  margin-top: var(--space-2);
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+/* ── 연락 ─────────────────────────────────────────────────────────────── */
+
+.contact {
+  border-top: 1px solid var(--line);
+}
+.contact-grid {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+}
+.contact address {
+  font-style: normal;
+  color: var(--ink-muted);
+}
+.contact-note {
+  color: var(--ink-muted);
+  max-width: 26em;
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line-strong);
+  padding-block: var(--space-4);
+  font-size: var(--step--1);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+}
+.foot-meta {
+  color: var(--ink-faint);
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 10px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .drawing-grid {
+    grid-template-columns: 1fr;
+  }
+  .drawing-stage {
+    position: static;
+  }
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
+  .hero,
+  .section {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .index-row a {
+    grid-template-columns: 1fr auto;
+  }
+  .idx-loc {
+    grid-column: 1;
+  }
+  .idx-year {
+    grid-row: 1;
+    grid-column: 2;
+  }
+}
diff --git a/apps/site/public/work/form-architecture/styles/tokens.css b/apps/site/public/work/form-architecture/styles/tokens.css
new file mode 100644
index 0000000..83f3f54
--- /dev/null
+++ b/apps/site/public/work/form-architecture/styles/tokens.css
@@ -0,0 +1,52 @@
+/* ==========================================================================
+   스튜디오 폼 — 디자인 토큰
+   프리셋: swiss-minimal
+   컨셉 한 문장: 판맞춤 도면 묶음 — 색이 아니라 선과 치수가 말한다.
+   레퍼런스: R1 johnpawson.com(실측: 724px 고정폭, 전 태그 동일 크기+색으로만
+            위계, 유일한 구분선 1px, 프로젝트는 제목/위치/연도 텍스트 행)
+            R2 cereal(웜 크림 3단 모노크롬 → 우리는 중성 회색으로 번안)
+            R3 CSS scroll-driven view()+dashoffset(이중 게이트, 폴백=완성 도면)
+   하지 않은 것: 색(무채색 100% — 강조색 없음, 링크만 밑줄), radius 전면 0,
+               사진 캐러셀, 서비스 아이콘. 이유: 도면의 권위는 선 하나에 있다.
+   ========================================================================== */
+
+:root {
+  /* 타입 — Pawson 교훈: 크기를 다양하게 쓰지 않는다. 위계는 무게와 색으로. */
+  --step--1: 0.8125rem;   /* 13px — 캡션·치수 */
+  --step-0: 1rem;         /* 16px — 본문 */
+  --step-1: 1.125rem;     /* 18px — 소제목(본문과 1단계 차이만) */
+  --step-2: 1.375rem;     /* 22px — 섹션 표제 */
+  --step-3: clamp(1.75rem, 1.3rem + 2.4vw, 2.75rem); /* 44px — 서문 하나만 */
+
+  --leading-tight: 1.35;
+  --leading-normal: 1.8;
+
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+
+  /* 무채색 3단계 + 선 2단계. 강조색 없음. */
+  --surface: #fdfdfb;
+  --ink: #111111;
+  --ink-muted: #555555;
+  --ink-faint: #8a8a8a;
+  --line: #d9d9d5;
+  --line-strong: #999999; /* Pawson의 유일한 구분선 색 */
+  --surface-bright: #ffffff; /* index 행 hover 반전의 가장 밝은 단계 */ /* Pawson의 유일한 구분선 색 */
+
+  --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, 8.5rem);
+
+  --radius: 0;            /* 이 페이지에는 모서리 둥금이 없다 */
+
+  --container: 1080px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 140ms;
+  --dur-normal: 380ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/gaon-lms/calc.js b/apps/site/public/work/gaon-lms/calc.js
new file mode 100644
index 0000000..f53448a
--- /dev/null
+++ b/apps/site/public/work/gaon-lms/calc.js
@@ -0,0 +1,57 @@
+/* 가온 학적부 — 순수 계산 로직. 브라우저와 Node 테스트가 같은 함수를 공유한다. */
+(function (global) {
+  "use strict";
+
+  const attSummary = (row) => {
+    const days = (row || []).filter((v) => v !== null && v !== undefined);
+    if (!days.length) return "휴학";
+    const att = days.filter((v) => v === 2).length;
+    return `${Math.round((att / days.length) * 100)}%`;
+  };
+
+  // 일별 합계 — marks 는 '행 배열'의 목록이다. v11 사고(행 자체를 세어 0/3) 방지가 이 함수의 존재 이유.
+  const dayTotal = (marks, d) =>
+    marks.filter((row) => row && row[d] !== null && row[d] !== undefined).length;
+  const dayPresent = (marks, d) =>
+    marks.filter((row) => row && row[d] === 2).length;
+
+  const counts = (marks) => {
+    const flat = (marks || []).filter(Boolean).flat();
+    const att = flat.filter((v) => v === 2).length;
+    const late = flat.filter((v) => v === 1).length;
+    const abs = flat.filter((v) => v === 0).length;
+    return {
+      att, late, abs, total: flat.length,
+      rate: flat.length ? Math.round((att / flat.length) * 100) : 0,
+    };
+  };
+
+  // 명단 통계 — 0명 나눗셈 가드 포함
+  const rosterStats = (students) => {
+    const list = students || [];
+    const active = list.filter((s) => s.status === "재학");
+    const avgAtt = active.length
+      ? Math.round(active.reduce((a, s) => a + (s.att || 0), 0) / active.length)
+      : 0;
+    const hw = active.reduce(
+      (a, s) => {
+        const [done, total] = String(s.hw || "0/0").split("/").map(Number);
+        return { done: a.done + (done || 0), total: a.total + (total || 0) };
+      },
+      { done: 0, total: 0 }
+    );
+    return {
+      total: list.length,
+      active: active.length,
+      off: list.length - active.length,
+      avgAtt,
+      hwDone: hw.done,
+      hwTotal: hw.total,
+      hwRate: hw.total ? Math.round((hw.done / hw.total) * 100) : 0,
+    };
+  };
+
+  const api = { attSummary, dayTotal, dayPresent, counts, rosterStats };
+  global.GAON = api;
+  if (typeof module !== "undefined") module.exports = api;
+})(typeof window !== "undefined" ? window : globalThis);
diff --git a/apps/site/public/work/gaon-lms/index.html b/apps/site/public/work/gaon-lms/index.html
new file mode 100644
index 0000000..1a5ffa9
--- /dev/null
+++ b/apps/site/public/work/gaon-lms/index.html
@@ -0,0 +1,1316 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>가온 학적부 · 학습관리 대시보드</title>
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="가온 학적부 — 학습관리 콘솔" />
+    <meta property="og:url" content="https://designpaca.chanpaca.net/work/gaon-lms/" />
+    <meta property="og:image" content="https://designpaca.chanpaca.net/work/gaon-lms/og.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="가온 학적부 — 학습관리 콘솔" />
+    <meta name="twitter:image" content="https://designpaca.chanpaca.net/work/gaon-lms/og.png" />
+    <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="#F7F5EF" />
+
+    <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&family=Noto+Serif+KR:wght@500;600&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=17" />
+    <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='%23F7F5EF'/%3E%3Crect x='7' y='6' width='18' height='2.4' fill='%2324272B'/%3E%3Crect x='7' y='12' width='18' height='2.4' fill='%23F5D662'/%3E%3Crect x='7' y='18' width='12' height='2.4' fill='%2324272B'/%3E%3Crect x='7' y='24' width='18' height='2.4' fill='%23F5D662'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <h1 class="sr-only">가온 학적부</h1>
+    <div class="app">
+      <!-- 사이드 내비 — 여덟 화면을 세 묶음으로. 그룹 헤더가 묶음의 이름을 말한다 -->
+      <aside class="side">
+        <a class="brand" href="#main">
+          <span class="brand-mark" aria-hidden="true"></span>
+          가온 학적부
+        </a>
+        <nav class="side-nav" aria-label="화면">
+          <p class="side-group" aria-hidden="true">학적</p>
+          <button type="button" class="side-link is-current" data-view="dashboard" aria-current="page">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
+            대시보드
+          </button>
+          <button type="button" class="side-link" data-view="students">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+            수강생</button>
+          <button type="button" class="side-link" data-view="attendance">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="m9 14 2 2 4-4"/></svg>
+            출석부</button>
+
+          <p class="side-group" aria-hidden="true">수업</p>
+          <button type="button" class="side-link" data-view="grades">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 14h6"/><path d="M9 10h6"/></svg>
+            과제 · 성적</button>
+          <button type="button" class="side-link" data-view="files">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
+            자료실</button>
+
+          <p class="side-group" aria-hidden="true">학사</p>
+          <button type="button" class="side-link" data-view="calendar">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></svg>
+            학사 일정</button>
+          <button type="button" class="side-link" data-view="counsel">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            상담 기록</button>
+          <button type="button" class="side-link" data-view="report">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
+            학기 리포트</button>
+          <button type="button" class="side-link" data-view="notice">
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>
+            공지 · 알림</button>
+        </nav>
+        <p class="side-foot">
+          강사 김가온 · 3월 2주차<br />
+          <span class="mono">2026학년도 1학기</span>
+        </p>
+      </aside>
+
+      <main id="main" class="main">
+        <div class="topbar">
+          <p class="crumb">가온 학적부 <span aria-hidden="true">/</span> <strong id="crumb-view">대시보드</strong></p>
+          <div class="topbar-right">
+            <span class="term-badge mono">2026학년도 1학기 · 3월 2주차</span>
+            <div class="bell-wrap">
+              <button type="button" class="bell" id="bell" aria-label="읽지 않은 알림 3건" aria-expanded="false" aria-haspopup="true">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
+                <span class="bell-dot" id="bell-dot" aria-hidden="true"></span>
+              </button>
+              <div class="bell-menu" id="bell-menu">
+                <div class="bell-head">
+                  알림
+                  <button type="button" id="bell-all">모두 읽음 처리</button>
+                </div>
+                <div class="ntc is-unread">
+                  <span class="n-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M9 14h6"/><path d="M9 10h6"/></svg></span>
+                  <p>자기소개 논술 초고 2명 제출 · 1명 미제출 — 채점 대기 <time>10분 전</time></p>
+                </div>
+                <div class="ntc is-unread">
+                  <span class="n-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="m9 14 2 2 4-4"/></svg></span>
+                  <p>국어 논술 A 미응시 1명 — 학부모 알림톡 발송 완료 <time>1시간 전</time></p>
+                </div>
+                <div class="ntc is-unread">
+                  <span class="n-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg></span>
+                  <p>새 공지 “3월 단원 평가 일정 안내” 등록 <time>어제</time></p>
+                </div>
+                <div class="ntc is-read">
+                  <span class="n-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></svg></span>
+                  <p>강이안 학생 보강 신청 — 3/12(목) 17:00 코딩 입문 <time>어제</time></p>
+                </div>
+              </div>
+            </div>
+            <span class="avatar">김</span>
+          </div>
+        </div>
+        <!-- ── 대시보드 ─────────────────────────────────────────────── -->
+        <section class="view is-on" id="view-dashboard" aria-labelledby="dash-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="dash-h">이번 주, 열두 명 중 열 명</h2>
+              <p class="view-sub">3월 9일 월요일 오전 기준. 명단 12명 중 재학 10명, 주간 출석은 지난 주(3/2–3/6) 결산입니다.</p>
+            </div>
+            <p class="stamp" aria-hidden="true">3월 2주</p>
+          </header>
+
+          <dl class="headline">
+            <div><dt>명단</dt><dd>12명</dd><dd class="stat-sub">재학 10 · 휴학 2 · 이번 달 전입 1</dd></div>
+            <div><dt>주간 출석률</dt><dd>92%</dd><dd class="stat-sub">출석 46 · 지각 2 · 결석 2 (지난 주 · 재학 10명)</dd></div>
+            <div><dt>미채점 과제</dt><dd>2건</dd><dd class="stat-sub">세트 4 · 워크시트 채점 대기 — 3/11 마감</dd></div>
+          </dl>
+
+          <div class="dash-grid">
+            <!-- 오늘의 수업: 카드가 아니라 장부의 행 -->
+            <section class="panel ledger" aria-labelledby="today-h">
+              <h2 id="today-h">오늘의 수업</h2>
+              <div class="table-wrap">
+              <table>
+                <caption class="sr-only">오늘의 수업 목록</caption>
+                <thead>
+                  <tr><th scope="col">시간</th><th scope="col">과목</th><th scope="col">강의실</th><th scope="col">상태</th><th scope="col" class="num">출석</th></tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="mono">10:00–11:30</td>
+                    <td>수학 심화 B</td><td>2실</td>
+                    <td><span class="state state-run">진행 중</span></td>
+                    <td class="num"><span class="hl">3 / 3</span></td>
+                  </tr>
+                  <tr>
+                    <td class="mono">14:00–15:30</td>
+                    <td>국어 논술 A</td><td>1실</td>
+                    <td><span class="state state-off">예정</span></td>
+                    <td class="num">2 / 3 · <span class="t-warn">미응시 1</span></td>
+                  </tr>
+                  <tr>
+                    <td class="mono">16:30–18:00</td>
+                    <td>코딩 입문</td><td>3실</td>
+                    <td><span class="state state-off">예정</span></td>
+                    <td class="num">2 / 2</td>
+                  </tr>
+                </tbody>
+                <tfoot>
+                  <tr><td colspan="5" class="tsum">금일 3교시 · 남은 수업 2교시 — 국어 논술 A 미응시 1명(한지우) 사유 확인 필요</td></tr>
+                </tfoot>
+              </table>
+              </div>
+            </section>
+
+            <!-- 주간 출석: 쌓인 막대. 상태색 3종은 상태 예외 -->
+            <section class="panel week-panel" aria-labelledby="week-h">
+              <h2 id="week-h">주간 출석</h2>
+              <figure class="week-chart">
+                <svg viewBox="0 0 320 150" role="img" aria-label="주간 출석 막대 — 월 10 전원, 화 9 출석 1 지각, 수 10, 목 9 출석 1 결석, 금 8 출석 1 지각 1 결석">
+                  <g class="axis">
+                    <line x1="28" y1="8" x2="28" y2="122" />
+                    <line x1="28" y1="122" x2="308" y2="122" />
+                  </g>
+                  <g class="bars">
+                    <g transform="translate(44 0)"><rect y="22" width="26" height="100" class="b-att" /></g>
+                    <g transform="translate(101 0)"><rect y="32" width="26" height="90" class="b-att" /><rect y="25" width="26" height="7" class="b-late" /></g>
+                    <g transform="translate(158 0)"><rect y="22" width="26" height="100" class="b-att" /></g>
+                    <g transform="translate(215 0)"><rect y="32" width="26" height="90" class="b-att" /><rect y="25" width="26" height="7" class="b-abs" /></g>
+                    <g transform="translate(272 0)"><rect y="42" width="26" height="80" class="b-att" /><rect y="35" width="26" height="7" class="b-late" /><rect y="28" width="26" height="7" class="b-abs" /></g>
+                  </g>
+                  <g class="axis-labels">
+                    <text x="57" y="138" text-anchor="middle">월</text>
+                    <text x="114" y="138" text-anchor="middle">화</text>
+                    <text x="171" y="138" text-anchor="middle">수</text>
+                    <text x="228" y="138" text-anchor="middle">목</text>
+                    <text x="285" y="138" text-anchor="middle">금</text>
+                  </g>
+                </svg>
+                <figcaption>
+                  <span class="key"><i class="k-att"></i>출석</span>
+                  <span class="key"><i class="k-late"></i>지각</span>
+                  <span class="key"><i class="k-abs"></i>결석</span>
+                </figcaption>
+              </figure>
+              <table class="wk-sum">
+                <caption class="sr-only">요일별 출석 결산</caption>
+                <thead><tr><th scope="col">요일</th><th scope="col" class="num">출석</th><th scope="col" class="num">지각</th><th scope="col" class="num">결석</th><th scope="col" class="num">출석률</th></tr></thead>
+                <tbody>
+                  <tr><td>월 3/2</td><td class="num">10</td><td class="num">0</td><td class="num">0</td><td class="num">100%</td></tr>
+                  <tr><td>화 3/3</td><td class="num">9</td><td class="num">1</td><td class="num">0</td><td class="num">90%</td></tr>
+                  <tr><td>수 3/4</td><td class="num">10</td><td class="num">0</td><td class="num">0</td><td class="num">100%</td></tr>
+                  <tr><td>목 3/5</td><td class="num">9</td><td class="num">0</td><td class="num">1</td><td class="num">90%</td></tr>
+                  <tr><td>금 3/6</td><td class="num">8</td><td class="num">1</td><td class="num">1</td><td class="num">80%</td></tr>
+                </tbody>
+                <tfoot><tr><td>합계</td><td class="num">46</td><td class="num">2</td><td class="num">2</td><td class="num"><span class="hl">92%</span></td></tr></tfoot>
+              </table>
+            </section>
+
+            <!-- 마감 임박 -->
+            <section class="panel" aria-labelledby="due-h">
+              <h2 id="due-h">마감 임박 과제</h2>
+              <ul class="due-list">
+                <li><button type="button" class="due-row" data-assign="a1">
+                  <span>미분 응용 세트 4</span>
+                  <span class="mono muted">수학 심화 B · 3/11 마감 · <strong class="hl">1명 미제출</strong></span>
+                </button></li>
+                <li><button type="button" class="due-row" data-assign="a2">
+                  <span>자기소개 논술 초고</span>
+                  <span class="mono muted">국어 논술 A · 3/12 마감 · 1명 미제출</span>
+                </button></li>
+                <li><button type="button" class="due-row" data-assign="a3">
+                  <span>변수와 조건 워크시트</span>
+                  <span class="mono muted">코딩 입문 · 3/13 마감 · 1명 미제출</span>
+                </button></li>
+              </ul>
+              <p class="panel-note muted">행을 누르면 채점 화면이 열립니다.</p>
+            </section>
+          </div>
+
+          <section class="panel" aria-labelledby="prog-h">
+            <h2 id="prog-h">수업 진행 <span class="h-note">3월 2주차 기준 · 개설 과목 4개</span></h2>
+            <div class="prog-grid">
+              <div class="prog">
+                <div class="prog-head"><strong>수학 심화 B</strong><span class="mono muted">12/16</span></div>
+                <div class="prog-bar" role="img" aria-label="수학 심화 B 진행률 75퍼센트"><i style="width: 75%"></i></div>
+                <p class="prog-meta">75% · 이번 주 2차시 완료 · 단원 평가 D-5</p>
+              </div>
+              <div class="prog">
+                <div class="prog-head"><strong>국어 논술 A</strong><span class="mono muted">8/12</span></div>
+                <div class="prog-bar" role="img" aria-label="국어 논술 A 진행률 67퍼센트"><i style="width: 67%"></i></div>
+                <p class="prog-meta">67% · 이번 주 2차시 완료 · 초고 채점 중</p>
+              </div>
+              <div class="prog">
+                <div class="prog-head"><strong>코딩 입문</strong><span class="mono muted">5/10</span></div>
+                <div class="prog-bar" role="img" aria-label="코딩 입문 진행률 50퍼센트"><i style="width: 50%"></i></div>
+                <p class="prog-meta">50% · 이번 주 1차시 완료 · 워크시트 2명 미제출</p>
+              </div>
+              <div class="prog">
+                <div class="prog-head"><strong>과학 실험</strong><span class="mono muted">9/12</span></div>
+                <div class="prog-bar" role="img" aria-label="수학 심화 B 진행률 75퍼센트"><i style="width: 75%"></i></div>
+                <p class="prog-meta">75% · 이번 주 2차시 완료 · 리포트 채점 완료</p>
+              </div>
+            </div>
+          </section>
+        </section>
+
+        <!-- ── 공지 · 알림 ──────────────────────────────────────────── -->
+        <section class="view" id="view-notice" aria-labelledby="no-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="no-h">공지 · 알림</h2>
+              <p class="view-sub">반에 전달한 안내입니다. 행을 누르면 본문이 열리고 읽음 처리됩니다.</p>
+            </div>
+          </header>
+          <div class="toolbar">
+            <div class="chips" role="group" id="nt-chips">
+              <button type="button" class="chip is-on" data-nt="전체" aria-pressed="true">전체</button>
+              <button type="button" class="chip" data-nt="시험" aria-pressed="false">시험</button>
+              <button type="button" class="chip" data-nt="수업" aria-pressed="false">수업</button>
+              <button type="button" class="chip" data-nt="소통" aria-pressed="false">소통</button>
+              <button type="button" class="chip" data-nt="행정" aria-pressed="false">행정</button>
+            </div>
+          </div>
+          <div class="panel">
+            <ul class="notice-list">
+              <li><button type="button" class="notice-row" aria-expanded="false">
+                <span class="n-t"><svg class="pin" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>3월 단원 평가 일정 안내</span>
+                <span class="tag tag-exam">시험</span>
+                <span class="n-meta"><span>3/14 16:00 · 김가온</span><span>읽은 사람 11 / 12</span></span>
+                <span class="n-body">3/17(화) 19:00 수학 심화 B 단원 평가를 실시합니다. 범위는 미분 응용 1~3단원이며 지참물은 필기구와 계산기입니다. 당일 결석자는 3/19(목) 보강 평가로 대체하며, 평가 결과는 3/20 자정 전 학부모 알림톡으로 발송됩니다.</span>
+              </button></li>
+              <li><button type="button" class="notice-row is-unread" aria-expanded="false">
+                <span class="n-t">미분 응용 세트 4 마감 연장</span>
+                <span class="tag">수업</span>
+                <span class="n-meta"><span>3/11 08:30 · 김가온</span><span>읽은 사람 8 / 12</span></span>
+                <span class="n-body">제출 시스템 오류 문의가 이어져 마감을 하루 연장합니다. 새 마감은 3/12(목) 23:59이며, 기존 제출분은 그대로 유효합니다.</span>
+              </button></li>
+              <li><button type="button" class="notice-row is-unread" aria-expanded="false">
+                <span class="n-t">강이안 학생 보강 수업 배정</span>
+                <span class="tag">소통</span>
+                <span class="n-meta"><span>3/10 14:00 · 김가온</span><span>읽은 사람 3 / 3</span></span>
+                <span class="n-body">3/12(목) 17:00 코딩 입문 5차시 보강이 배정되었습니다. 보호자에게 알림톡을 발송했으니 시간을 확인해 주세요.</span>
+              </button></li>
+              <li><button type="button" class="notice-row" aria-expanded="false">
+                <span class="n-t">이번 주 학부모 알림톡 발송 내역</span>
+                <span class="tag">소통</span>
+                <span class="n-meta"><span>3/9 19:00 · 시스템</span><span>읽은 사람 10 / 12</span></span>
+                <span class="n-body">이번 주 결석 2건 모두 발송이 완료되었습니다. 목요일 병결 1건은 답변을 받아 기록에 남겼습니다.</span>
+              </button></li>
+              <li><button type="button" class="notice-row" aria-expanded="false">
+                <span class="n-t">4월 학사 일정 초안 의견을 받습니다</span>
+                <span class="tag">행정</span>
+                <span class="n-meta"><span>3/8 10:00 · 김가온</span><span>읽은 사람 9 / 12</span></span>
+                <span class="n-body">4월 중간고사 기간(4/14~4/16)과 그에 맞춘 수업 커리큘럼 조정안을 자료실에 올렸습니다. 3/20까지 의견을 주세요.</span>
+              </button></li>
+            </ul>
+          </div>
+        </section>
+
+        <!-- ── 수강생 ───────────────────────────────────────────────── -->
+        <section class="view" id="view-students" aria-labelledby="st-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="st-h">수강생 기록</h2>
+              <p class="view-sub">행을 누르면 상담 기록까지 볼 수 있습니다.</p>
+            </div>
+          </header>
+
+          <div class="statline" id="stu-stats"></div>
+
+          <div class="toolbar" role="search">
+            <label class="sr-only" for="q">수강생 검색</label>
+            <input id="q" type="search" placeholder="이름, 과목으로 검색" autocomplete="off" />
+            <div class="chips" role="group">
+              <button type="button" class="chip is-on" data-filter="all" aria-pressed="true">전체 12</button>
+              <button type="button" class="chip" data-filter="재학" aria-pressed="false">재학 10</button>
+              <button type="button" class="chip" data-filter="휴학" aria-pressed="false">휴학 2</button>
+            </div>
+          </div>
+
+          <div class="panel table-wrap">
+            <table id="stu-table">
+              <caption class="sr-only">수강생 목록 — 이름, 학년, 과목, 보호자, 출석률, 과제 제출, 상태</caption>
+              <thead>
+                <tr>
+                  <th scope="col">이름</th><th scope="col">학년</th><th scope="col">주 과목</th>
+                  <th scope="col">보호자</th>
+                  <th scope="col" class="num">출석률</th>
+                  <th scope="col" class="num">과제 제출</th><th scope="col">상태</th>
+                </tr>
+              </thead>
+              <tbody><!-- JS 가 그린다 --></tbody>
+            </table>
+            <p class="panel-note muted" id="stu-empty" hidden>조건에 맞는 수강생이 없습니다 — 검색어를 줄이거나 필터를 ‘전체’로 바꿔 보세요.</p>
+          </div>
+        </section>
+
+        <!-- ── 출석부 ───────────────────────────────────────────────── -->
+        <section class="view" id="view-attendance" aria-labelledby="att-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="att-h">출석부</h2>
+              <p class="view-sub">칸을 누르면 출석 · 지각 · 결석이 순환합니다. 반과 주를 바꿔가며 적습니다.</p>
+            </div>
+            <p class="stamp" aria-hidden="true">3월</p>
+          </header>
+
+          <div class="toolbar">
+            <div class="chips" role="group" id="att-class"></div>
+            <div class="week-nav">
+              <button type="button" class="btn-line" id="att-prev">이전 주</button>
+              <span class="mono week-label" id="att-week" aria-live="polite">3월 2주</span>
+              <button type="button" class="btn-line" id="att-next">다음 주</button>
+            </div>
+          </div>
+
+          <div class="statline" id="att-stats" role="status"></div>
+
+          <div class="panel table-wrap">
+            <table id="att-table">
+              <caption class="sr-only">주간 출석부 — 학생별 월요일부터 금요일까지 출석 상태</caption>
+              <thead>
+                <tr>
+                  <th scope="col">이름</th>
+                  <th scope="col" class="att-day">월</th><th scope="col" class="att-day">화</th>
+                  <th scope="col" class="att-day">수</th><th scope="col" class="att-day">목</th>
+                  <th scope="col" class="att-day">금</th>
+                  <th scope="col" class="num">이번 주</th>
+                </tr>
+              </thead>
+              <tbody><!-- JS 가 그린다 --></tbody>
+              <tfoot id="att-foot"><!-- JS: 일별 합계 --></tfoot>
+            </table>
+            <p class="panel-note muted" id="att-status" role="status"></p>
+            <div class="att-chips">
+              <span class="tag">병결 1</span>
+              <span class="tag">조퇴 1</span>
+              <span class="tag tag-warn">사유 검토 1</span>
+              <span class="tag">보강 배정 1</span>
+              <span class="tag tag-ok">학부모 알림톡 2/2 발송</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- ── 과제 · 성적 ──────────────────────────────────────────── -->
+        <section class="view" id="view-grades" aria-labelledby="gr-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="gr-h">과제 · 성적</h2>
+              <p class="view-sub">채점 대기 행을 눌러 점수를 남깁니다.</p>
+            </div>
+          </header>
+
+          <div class="statline">
+            <div>채점 완료 <strong>3</strong></div>
+            <div>채점 대기 <strong class="warn-ink">2</strong></div>
+            <div>자동 채점 <strong>1</strong></div>
+            <div>예정 <strong class="muted-ink">1</strong></div>
+            <div>평균 제출률 <strong>83%</strong></div>
+          </div>
+
+          <div class="toolbar">
+            <div class="chips" role="group" id="as-chips">
+              <button type="button" class="chip is-on" data-as="all" aria-pressed="true">전체</button>
+              <button type="button" class="chip" data-as="수학 심화 B" aria-pressed="false">수학 심화 B</button>
+              <button type="button" class="chip" data-as="국어 논술 A" aria-pressed="false">국어 논술 A</button>
+              <button type="button" class="chip" data-as="코딩 입문" aria-pressed="false">코딩 입문</button>
+              <button type="button" class="chip" data-as="과학 실험" aria-pressed="false">과학 실험</button>
+            </div>
+          </div>
+
+          <div class="panel table-wrap">
+            <table id="as-table">
+              <caption class="sr-only">과제 목록</caption>
+              <thead>
+                <tr><th scope="col">과제</th><th scope="col">유형</th><th scope="col">과목</th><th scope="col">마감</th><th scope="col" class="num">제출</th><th scope="col">상태</th></tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row"><button type="button" class="row-open" data-assign="a1">미분 응용 세트 3</button></th>
+                  <td><span class="tag">과제</span></td>
+                  <td>수학 심화 B</td><td class="mono">03-04</td>
+                  <td class="num mono">3/3</td><td><span class="state">채점 완료</span></td>
+                </tr>
+                <tr>
+                  <th scope="row"><button type="button" class="row-open" data-assign="a2">자기소개 논술 초고</button></th>
+                  <td><span class="tag">과제</span></td>
+                  <td>국어 논술 A</td><td class="mono">03-12</td>
+                  <td class="num mono">2/3</td><td><span class="state state-wait">채점 대기</span></td>
+                </tr>
+                <tr>
+                  <th scope="row"><button type="button" class="row-open" data-assign="a3">변수와 조건 워크시트</button></th>
+                  <td><span class="tag">과제</span></td>
+                  <td>코딩 입문</td><td class="mono">03-13</td>
+                  <td class="num mono">1/2</td><td><span class="state state-wait">채점 대기</span></td>
+                </tr>
+                <tr>
+                  <th scope="row"><button type="button" class="row-open" data-assign="a4">측정과 그래프 리포트</button></th>
+                  <td><span class="tag">과제</span></td>
+                  <td>과학 실험</td><td class="mono">03-06</td>
+                  <td class="num mono">3/3</td><td><span class="state">채점 완료</span></td>
+                </tr>
+                <tr>
+                  <th scope="row">단원 평가 퀴즈 — 미분 응용</th>
+                  <td><span class="tag tag-quiz">퀴즈</span></td>
+                  <td>수학 심화 B</td><td class="mono">03-08</td>
+                  <td class="num mono">3/3</td><td><span class="state">자동 채점</span></td>
+                </tr>
+                <tr>
+                  <th scope="row">3월 단원 평가</th>
+                  <td><span class="tag tag-exam">시험</span></td>
+                  <td>수학 심화 B</td><td class="mono">03-17</td>
+                  <td class="num mono">—</td><td><span class="state state-off">예정</span></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <section class="panel dist" aria-labelledby="dist-h">
+            <h2 id="dist-h">수학 심화 B · 세트 3 점수 분포</h2>
+            <div class="dist-body">
+            <figure class="dist-chart">
+              <svg viewBox="0 0 340 150" role="img" aria-label="점수 분포 — 70점 1명, 80점 3명, 90점 4명">
+                <g class="axis">
+                  <line x1="34" y1="8" x2="34" y2="122" /><line x1="34" y1="122" x2="326" y2="122" />
+                </g>
+                <g class="bars">
+                  <g transform="translate(58 0)"><rect y="97" width="44" height="25" class="b-att" /><text x="22" y="88" text-anchor="middle">1명</text></g>
+                  <g transform="translate(148 0)"><rect y="47" width="44" height="75" class="b-att" /><text x="22" y="38" text-anchor="middle">3명</text></g>
+                  <g transform="translate(238 0)"><rect y="22" width="44" height="100" class="b-hl" /><text x="22" y="13" text-anchor="middle">4명</text></g>
+                </g>
+                <g class="axis-labels">
+                  <text x="80" y="138" text-anchor="middle">70점</text>
+                  <text x="170" y="138" text-anchor="middle">80점</text>
+                  <text x="260" y="138" text-anchor="middle">90점</text>
+                </g>
+              </svg>
+              <figcaption>점수 구간별 인원 · 채점 인원 8명</figcaption>
+            </figure>
+            <dl class="dist-stats">
+              <div><dt>평균</dt><dd>84.4점</dd></div>
+              <div><dt>최고 · 최저</dt><dd>96 · 70점</dd></div>
+              <div><dt>90점 이상</dt><dd>4명 <span class="muted">(50%)</span></dd></div>
+              <div><dt>재응시 대상</dt><dd>70점대 1명</dd></div>
+              <div><dt>미제출</dt><dd>0명</dd></div>
+            </dl>
+            </div>
+          </section>
+        </section>
+
+        <!-- ── 자료실 ───────────────────────────────────────────────── -->
+        <section class="view" id="view-files" aria-labelledby="fi-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="fi-h">자료실</h2>
+              <p class="view-sub">배부 자료의 원장. 배부를 눌렀는지에 따라 도장이 남습니다.</p>
+            </div>
+          </header>
+
+          <div class="statline" id="file-stats"></div>
+
+          <div class="toolbar">
+            <div class="chips" role="group" id="file-chips">
+              <button type="button" class="chip is-on" data-kind="all" aria-pressed="true">전체</button>
+              <button type="button" class="chip" data-kind="인쇄물" aria-pressed="false">인쇄물</button>
+              <button type="button" class="chip" data-kind="PDF" aria-pressed="false">PDF</button>
+              <button type="button" class="chip" data-kind="양식" aria-pressed="false">양식</button>
+            </div>
+          </div>
+
+          <div class="panel table-wrap">
+            <table>
+              <caption class="sr-only">배부 자료 목록</caption>
+              <thead>
+                <tr><th scope="col">자료</th><th scope="col">과목</th><th scope="col">종류</th><th scope="col" class="num">크기</th><th scope="col" class="num">조회</th><th scope="col" class="num">날인일</th><th scope="col">배부</th></tr>
+              </thead>
+              <tbody id="file-body"><!-- JS --></tbody>
+            </table>
+            <p class="panel-note muted">다운로드 링크를 만들지 않는다 — 이 데모에는 파일이 없다. 배부 상태만 기록한다.</p>
+          </div>
+        </section>
+
+        <!-- ── 학사 일정 ─────────────────────────────────────────────── -->
+        <section class="view" id="view-calendar" aria-labelledby="cal-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="cal-h">학사 일정 · 2026년 3월</h2>
+              <p class="view-sub">마감과 휴원을 먼저 보는 달력. 오른쪽은 3월 9일 이후의 일정입니다.</p>
+            </div>
+          </header>
+
+          <div class="statline" id="cal-stats"></div>
+
+          <div class="cal-layout">
+            <div class="panel cal-panel" aria-hidden="false">
+              <table class="cal" id="cal-table">
+                <caption class="sr-only">2026년 3월 달력 — 월요일 시작, 일정이 있는 날은 제목이 적힙니다</caption>
+                <thead>
+                  <tr><th scope="col">월</th><th scope="col">화</th><th scope="col">수</th><th scope="col">목</th><th scope="col">금</th><th scope="col">토</th><th scope="col">일</th></tr>
+                </thead>
+                <tbody><!-- JS --></tbody>
+              </table>
+              <div class="cal-legend">
+                <span class="key"><i class="lg-exam"></i>평가 · 시험</span>
+                <span class="key"><i class="lg-due"></i>과제 마감</span>
+                <span class="key"><i class="lg-admin"></i>행정 · 상담</span>
+                <span class="key"><i class="lg-holi"></i>휴원</span>
+              </div>
+            </div>
+            <section class="panel" aria-labelledby="up-h">
+              <h2 id="up-h">다가오는 일정</h2>
+              <ul class="due-list" id="up-list"><!-- JS --></ul>
+            </section>
+          </div>
+        </section>
+
+        <!-- ── 상담 기록 ─────────────────────────────────────────────── -->
+        <section class="view" id="view-counsel" aria-labelledby="co-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="co-h">상담 기록</h2>
+              <p class="view-sub">수강생 화면에 남긴 기록을 모아 봅니다. 카드를 누르면 그 학생의 기록이 열립니다.</p>
+            </div>
+          </header>
+
+          <div class="toolbar">
+            <div class="chips" role="group" id="co-chips">
+              <button type="button" class="chip is-on" data-sub="all" aria-pressed="true">전 과목</button>
+              <button type="button" class="chip" data-sub="수학 심화 B" aria-pressed="false">수학 심화 B</button>
+              <button type="button" class="chip" data-sub="국어 논술 A" aria-pressed="false">국어 논술 A</button>
+              <button type="button" class="chip" data-sub="코딩 입문" aria-pressed="false">코딩 입문</button>
+              <button type="button" class="chip" data-sub="과학 실험" aria-pressed="false">과학 실험</button>
+            </div>
+          </div>
+
+          <div class="statline" id="co-stats"></div>
+
+          <div class="counsel-grid" id="counsel-grid"><!-- JS --></div>
+          <p class="empty-note muted" id="counsel-empty" hidden>조건에 맞는 상담 기록이 없습니다.</p>
+
+          <section class="panel" aria-labelledby="co-next-h" style="margin-top: var(--space-4);">
+            <h2 id="co-next-h">예정된 상담 <span class="h-note">3월 9일 기준</span></h2>
+            <ul class="due-list">
+              <li><p class="due-row is-static">
+                <span>오세림 학부모 상담 — 추가 과외 일정 조율</span>
+                <span class="mono muted">3/12(목) 18:00 <span class="tag tag-ok">알림톡 발송</span></span>
+              </p></li>
+              <li><p class="due-row is-static">
+                <span>박서연 진로 상담 — 영재 교육원 지원 검토</span>
+                <span class="mono muted">3/13(금) 17:30 <span class="tag">발송 대기</span></span>
+              </p></li>
+              <li><p class="due-row is-static">
+                <span>한지우 학습 상담 — 등교 시간 재조정 후속</span>
+                <span class="mono muted">3/16(월) 19:00 <span class="tag">발송 대기</span></span>
+              </p></li>
+            </ul>
+          </section>
+        </section>
+
+        <!-- ── 학기 리포트 ───────────────────────────────────────────── -->
+        <section class="view" id="view-report" aria-labelledby="re-h" tabindex="-1">
+          <header class="view-head">
+            <div>
+              <h2 class="v-h" id="re-h">학기 리포트</h2>
+              <p class="view-sub">아래 표는 명단에서 직접 계산합니다. 채점이 끝나지 않은 과목의 점수는 비워 둡니다.</p>
+            </div>
+            <p class="stamp" aria-hidden="true">1학기 중간</p>
+          </header>
+
+          <div class="headline headline-4" id="rep-stats"><!-- JS --></div>
+
+          <div class="panel table-wrap">
+            <table id="report-table">
+              <caption class="sr-only">과목별 학기 요약 — 재원, 평균 출석률, 과제 제출률, 채점 평균</caption>
+              <thead>
+                <tr>
+                  <th scope="col">과목</th><th scope="col" class="num">재원</th>
+                  <th scope="col" class="num">평균 출석률</th><th scope="col" class="num">과제 제출률</th>
+                  <th scope="col" class="num">채점 평균</th><th scope="col" class="num">진행 차시</th>
+                </tr>
+              </thead>
+              <tbody><!-- JS 가 그린다 --></tbody>
+            </table>
+            <p class="panel-note muted">휴학생은 재원과 계산에서 제외합니다. 채점 평균은 완료된 과제만 반영합니다. 학부모 리포트는 3/20에 알림톡으로 일괄 발송됩니다 — 대상 재학생 보호자 전원.</p>
+          </div>
+        </section>
+      </main>
+    </div>
+
+    <!-- ── 수강생 상세 모달: 학적 카드 ── -->
+    <!-- ── 수강생 상세: 펼침 장부. 왼쪽 표지판 + 오른쪽 내용판 ── -->
+    <dialog id="stu-dialog" class="modal modal-split" aria-labelledby="stu-dlg-h">
+      <div class="mspread">
+        <div class="mcover">
+          <span class="mcover-mark" id="stu-mark" aria-hidden="true">가</span>
+          <span class="mcover-seal" id="stu-seal" aria-hidden="true">가</span>
+          <h2 class="mcover-name" id="stu-dlg-h">수강생</h2>
+          <p class="mcover-meta" id="stu-meta">주 과목 · 상태</p>
+          <dl class="mcover-stats">
+            <div><dt>출석률</dt><dd class="mono" id="stu-att">—</dd></div>
+            <div><dt>과제 제출</dt><dd class="mono" id="stu-hw">—</dd></div>
+            <div><dt>상담 기록</dt><dd class="mono" id="stu-memo-n">—</dd></div>
+          </dl>
+          <p class="mcover-foot mono">가온 학적부 · 2026-1</p>
+        </div>
+        <div class="msheet">
+          <button type="button" class="modal-close" data-close aria-label="닫기">
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+          </button>
+
+          <section class="msec">
+            <h3>보호자 · 알림</h3>
+            <p class="guard-line" id="stu-guardian">—</p>
+            <ul class="guard-log mono" id="stu-alklog">
+              <li>3/05 출결 알림톡 발송 완료</li>
+              <li>2/28 월간 학습 리포트 발송 완료</li>
+            </ul>
+          </section>
+
+          <section class="msec">
+            <h3>3월 2주까지의 출석</h3>
+            <div class="att-strip" id="stu-att-strip"></div>
+          </section>
+
+          <section class="msec">
+            <h3>상담 기록</h3>
+            <ul id="stu-note-list"></ul>
+            <form class="note-form" id="note-form">
+              <label class="sr-only" for="note-input">새 상담 기록</label>
+              <input id="note-input" type="text" placeholder="3/10 학부모 상담 — 심야 스터디 조율" required />
+              <button type="submit" class="btn-line">기록 추가</button>
+            </form>
+          </section>
+        </div>
+      </div>
+    </dialog>
+
+    <!-- ── 채점 모달: 점수를 넣으면 평균이 따라온다 ── -->
+    <dialog id="as-dialog" class="modal" aria-labelledby="as-dlg-h">
+      <div class="modal-inner">
+        <button type="button" class="modal-close" data-close aria-label="닫기">
+          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>
+        </button>
+        <h2 class="modal-title" id="as-dlg-h">채점</h2>
+        <p class="modal-meta mono" id="as-dlg-meta">과제 · 과목</p>
+        <div class="table-wrap">
+          <table class="grade-table">
+            <caption class="sr-only">제출자 목록과 점수 입력</caption>
+            <thead><tr><th scope="col">제출자</th><th scope="col" class="num">점수</th></tr></thead>
+            <tbody>
+              <tr><th scope="row">박서연</th><td class="num"><label class="sr-only" for="g1">박서연 점수</label><input id="g1" class="score" type="number" min="0" max="100" value="92" /></td></tr>
+              <tr><th scope="row">김도현</th><td class="num"><label class="sr-only" for="g2">김도현 점수</label><input id="g2" class="score" type="number" min="0" max="100" value="88" /></td></tr>
+              <tr><th scope="row">이수아</th><td class="num"><label class="sr-only" for="g3">이수아 점수</label><input id="g3" class="score" type="number" min="0" max="100" value="95" /></td></tr>
+            </tbody>
+          </table>
+        </div>
+        <p class="as-summary mono" aria-live="polite">
+          제출 3명 · 평균 <strong class="hl" id="as-avg">91.7</strong>점
+        </p>
+        <div class="modal-actions">
+          <button type="button" class="btn-solid" id="as-save">채점 저장</button>
+          <span class="modal-note muted" id="as-saved" hidden>저장되었습니다. 상태가 채점 완료로 바뀝니다.</span>
+        </div>
+      </div>
+    </dialog>
+
+    <script src="calc.js"></script>
+    <script>
+      /*
+        앱 상태는 전부 이 안에 있다. 서버도 localStorage 도 없다 — 데모 원칙.
+        뷰 전환 · 검색/필터 · 출석 순환 · 배부 도장 · 리포트 계산까지
+        네이티브 기능 위에 얹은 얇은 JS.
+      */
+      const STUDENTS = [
+        { name: "박서연", grade: "중3", sub: "수학 심화 B", att: 100, hw: "8/8", status: "재학", guard: "모 · 박지현", phone: "010-****-4821", memo: ["3/04 세트 3 만점. 다음 세트 조기 완료."] },
+        { name: "김도현", grade: "중3", sub: "수학 심화 B", att: 96, hw: "8/8", status: "재학", guard: "부 · 김성호", phone: "010-****-7310", memo: [] },
+        { name: "이수아", grade: "중2", sub: "국어 논술 A", att: 92, hw: "8/9", status: "재학", guard: "모 · 이경민", phone: "010-****-2245", memo: ["2/26 논술 주제 선정 상담."] },
+        { name: "최민준", grade: "중2", sub: "코딩 입문", att: 89, hw: "7/9", status: "재학", guard: "모 · 최은정", phone: "010-****-9012", memo: [] },
+        { name: "정하율", grade: "중3", sub: "과학 실험", att: 100, hw: "6/6", status: "재학", guard: "부 · 정민수", phone: "010-****-3378", memo: ["3/06 리포트 우수 사례로 게시."] },
+        { name: "한지우", grade: "중2", sub: "국어 논술 A", att: 85, hw: "8/9", status: "재학", guard: "모 · 한송이", phone: "010-****-6654", memo: ["3/08 지각 2회 — 등교 시간 재조정 약속."] },
+        { name: "윤채원", grade: "고1", sub: "코딩 입문", att: 93, hw: "7/9", status: "재학", guard: "모 · 윤정아", phone: "010-****-1189", memo: [] },
+        { name: "오세림", grade: "중3", sub: "수학 심화 B", att: 78, hw: "7/8", status: "재학", guard: "모 · 오현주", phone: "010-****-5503", memo: ["3/05 학부모 상담 — 주 2회 추가 과외 조율."] },
+        { name: "남유진", grade: "고1", sub: "과학 실험", att: 100, hw: "6/6", status: "재학", guard: "부 · 남기훈", phone: "010-****-7742", memo: [] },
+        { name: "서다인", grade: "중2", sub: "국어 논술 A", att: 90, hw: "8/9", status: "재학", guard: "모 · 서지원", phone: "010-****-2960", memo: [] },
+        { name: "강이안", grade: "중2", sub: "코딩 입문", att: 0, hw: "0/9", status: "휴학", guard: "모 · 강은심", phone: "010-****-8031", memo: ["2/28 개인 사정으로 3월 말 복학 예정."] },
+        { name: "조은채", grade: "고1", sub: "과학 실험", att: 0, hw: "0/6", status: "휴학", guard: "모 · 조민경", phone: "010-****-4417", memo: [] },
+      ];
+      const SUBJECTS = ["수학 심화 B", "국어 논술 A", "코딩 입문", "과학 실험"];
+
+      // ── 뷰 전환 ──
+      const views = document.querySelectorAll(".view");
+      document.querySelectorAll(".side-link").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          document.querySelectorAll(".side-link").forEach((b) => {
+            b.classList.toggle("is-current", b === btn);
+            if (b === btn) b.setAttribute("aria-current", "page"); else b.removeAttribute("aria-current");
+          });
+          views.forEach((v) => v.classList.toggle("is-on", v.id === "view-" + btn.dataset.view));
+          document.getElementById("crumb-view").textContent = btn.textContent.trim();
+          document.getElementById("view-" + btn.dataset.view).focus({ preventScroll: true });
+        });
+      });
+
+      // ── 수강생 테이블: 검색 + 상태 칩 ──
+      const tbody = document.querySelector("#stu-table tbody");
+      let filter = "all";
+      const renderStudents = () => {
+        const q = document.getElementById("q").value.trim();
+        const rows = STUDENTS
+          .map((s, i) => ({ ...s, i }))
+          .filter((s) => (filter === "all" || s.status === filter))
+          .filter((s) => !q || s.name.includes(q) || s.sub.includes(q));
+        tbody.replaceChildren(
+          ...rows.map((s) => {
+            const tr = document.createElement("tr");
+            tr.innerHTML =
+              `<th scope="row"><button type="button" class="row-open" data-stu="${s.i}">${s.name}</button></th>` +
+              `<td>${s.grade}</td><td>${s.sub}</td><td class="muted">${s.guard} · ${s.phone}</td>` +
+              `<td class="num mono">${s.att}%</td><td class="num mono">${s.hw}</td>` +
+              `<td><span class="state ${s.status === "휴학" ? "state-off" : ""}">${s.status}</span></td>`;
+            return tr;
+          })
+        );
+        document.getElementById("stu-empty").hidden = rows.length > 0;
+      };
+      const renderStuStats = () => {
+        const active = STUDENTS.filter((s) => s.status === "재학");
+        const avg = Math.round(active.reduce((a, s) => a + s.att, 0) / active.length);
+        document.getElementById("stu-stats").innerHTML =
+          `<div>전체 <strong>${STUDENTS.length}명</strong></div>` +
+          `<div>재학 <strong>${active.length}명</strong></div>` +
+          `<div>휴학 <strong>${STUDENTS.length - active.length}명</strong></div>` +
+          `<div>재학 평균 출석률 <strong>${avg}%</strong></div>` +
+          `<div>학부모 알림톡 수신 <strong>${active.length}/${active.length}</strong></div>`;
+      };
+      renderStuStats();
+      document.getElementById("q").addEventListener("input", renderStudents);
+      document.querySelectorAll("#view-students .chip").forEach((chip) => {
+        chip.addEventListener("click", () => {
+          document.querySelectorAll("#view-students .chip").forEach((c) => {
+            c.classList.toggle("is-on", c === chip);
+            c.setAttribute("aria-pressed", c === chip ? "true" : "false");
+          });
+          filter = chip.dataset.filter;
+          renderStudents();
+        });
+      });
+      renderStudents();
+
+      // ── 출석부: 상태 2=출석 1=지각 0=결석. 휴학은 null ──
+      const WEEKS = [
+        { label: "3월 1주", days: ["03-02", "03-03", "03-04", "03-05", "03-06"] },
+        { label: "3월 2주", days: ["03-09", "03-10", "03-11", "03-12", "03-13"] },
+      ];
+      const mk = (a) => a.split("").map(Number);
+      // 명단 순서(STUDENTS 인덱스)와 1:1. 대시보드 차트(전원 기준)와 반 단위라 정합한다
+      const ATT = [
+        mk("22222"), mk("22222"), mk("22122"), mk("22221"), mk("22222"),
+        mk("21222"), mk("22222"), mk("22022"), mk("22222"), mk("22222"),
+        null, null,
+      ];
+      const ATT_W2 = [
+        mk("22222"), mk("22222"), mk("21222"), mk("22222"), mk("22222"),
+        mk("20222"), mk("22220"), mk("21222"), mk("22222"), mk("22122"),
+        null, null,
+      ];
+      const ATT_ALL = [ATT, ATT_W2];
+      const ATT_MARK = { 2: "○", 1: "△", 0: "✕" };
+      const ATT_NAME = { 2: "출석", 1: "지각", 0: "결석" };
+      let attWeek = 1; // 3월 2주 기준
+      let attClass = SUBJECTS[0];
+
+      const attData = (i) => ATT_ALL[attWeek][i];
+      const attSummary = GAON.attSummary;
+
+      const renderAttClass = () => {
+        document.getElementById("att-class").replaceChildren(
+          ...SUBJECTS.map((sub) => {
+            const b = document.createElement("button");
+            b.type = "button";
+            b.className = "chip" + (sub === attClass ? " is-on" : "");
+            b.dataset.sub = sub;
+            b.setAttribute("aria-pressed", String(sub === attClass));
+            b.textContent = sub;
+            return b;
+          })
+        );
+      };
+
+      const renderAttendance = () => {
+        document.getElementById("att-week").textContent = WEEKS[attWeek].label;
+        document.getElementById("att-prev").disabled = attWeek === 0;
+        document.getElementById("att-next").disabled = attWeek === WEEKS.length - 1;
+        const body = document.querySelector("#att-table tbody");
+        body.replaceChildren(
+          ...STUDENTS.map((s, i) => ({ s, i }))
+            .filter(({ s }) => s.sub === attClass)
+            .map(({ s, i }) => {
+              const tr = document.createElement("tr");
+              const row = attData(i);
+              let cells = `<th scope="row">${s.name}${s.status === "휴학" ? ' <span class="state state-off">휴학</span>' : ""}</th>`;
+              for (let d = 0; d < 5; d++) {
+                if (!row) {
+                  cells += `<td class="att-cell is-na">·</td>`;
+                } else {
+                  cells += `<td class="att-cell"><button type="button" class="att-btn ${row[d] === 2 ? "v-att" : row[d] === 1 ? "v-late" : "v-abs"}" data-stu="${i}" data-day="${d}" aria-label="${s.name} ${WEEKS[attWeek].days[d]} ${ATT_NAME[row[d]]}">${ATT_MARK[row[d]]}</button></td>`;
+                }
+              }
+              cells += `<td class="num mono">${row ? attSummary(row) : "—"}</td>`;
+              tr.innerHTML = cells;
+              return tr;
+            })
+        );
+        renderAttClass();
+        // 요약 스트립 + 일별 합계 — 현재 반·주 기준 실계산
+        const roster = STUDENTS.map((s, i) => ({ s, i })).filter(({ s }) => s.sub === attClass);
+        const marks = roster.map(({ i }) => attData(i)).filter(Boolean);
+        const C = GAON.counts(marks); const rate = C.rate;
+        document.getElementById("att-stats").innerHTML =
+          `<div>출석 <strong>${C.att}</strong></div>` +
+          `<div>지각 <strong>${C.late}</strong></div>` +
+          `<div>결석 <strong>${C.abs}</strong></div>` +
+          `<div>출석률 <strong>${rate}%</strong></div>` +
+          `<div>대상 <strong>${marks.length}명</strong></div>`;
+        document.getElementById("att-foot").innerHTML =
+          `<tr><td class="tsum">일별 출석</td>` +
+          [0, 1, 2, 3, 4].map((d) => `<td class="num mono">${GAON.dayTotal(marks, d) ? GAON.dayPresent(marks, d) + "/" + GAON.dayTotal(marks, d) : "—"}</td>`)
+            .join("") +
+          `<td class="num mono">${rate}%</td></tr>`;
+      };
+
+      document.getElementById("att-class").addEventListener("click", (e) => {
+        const chip = e.target.closest("[data-sub]");
+        if (!chip) return;
+        attClass = chip.dataset.sub;
+        renderAttendance();
+      });
+      document.getElementById("att-prev").addEventListener("click", () => { if (attWeek > 0) { attWeek -= 1; renderAttendance(); } });
+      document.getElementById("att-next").addEventListener("click", () => { if (attWeek < WEEKS.length - 1) { attWeek += 1; renderAttendance(); } });
+
+      // 칸 순환: 출석 → 지각 → 결석 → 출석. 합계와 상태줄을 함께 갱신
+      document.querySelector("#att-table tbody").addEventListener("click", (e) => {
+        const btn = e.target.closest(".att-btn");
+        if (!btn) return;
+        const i = +btn.dataset.stu;
+        const d = +btn.dataset.day;
+        const row = attData(i);
+        row[d] = (row[d] + 2) % 3; // 2→1→0→2
+        const s = STUDENTS[i];
+        const status = document.getElementById("att-status");
+        status.textContent = `${s.name} · ${WEEKS[attWeek].days[d]} → ${ATT_NAME[row[d]]}`;
+        renderAttendance();
+      });
+      renderAttendance();
+
+      // ── 과제·성적: 과목 필터 ──
+      document.getElementById("as-chips").addEventListener("click", (e) => {
+        const chip = e.target.closest("[data-as]");
+        if (!chip) return;
+        document.querySelectorAll("#as-chips .chip").forEach((c) => {
+          c.classList.toggle("is-on", c === chip);
+          c.setAttribute("aria-pressed", String(c === chip));
+        });
+        const sub = chip.dataset.as;
+        document.querySelectorAll("#as-table tbody tr").forEach((tr) => {
+          tr.hidden = sub !== "all" && tr.children[2].textContent.trim() !== sub;
+        });
+      });
+
+      // ── 자료실 ──
+      const FILES = [
+        { name: "미분 응용 세트 3 해설지", sub: "수학 심화 B", kind: "인쇄물", size: "2.4MB", views: 64, date: "03-05", given: true },
+        { name: "논술 첨삭 기준표", sub: "국어 논술 A", kind: "PDF", size: "860KB", views: 51, date: "03-03", given: true },
+        { name: "변수와 조건 워크시트 예시", sub: "코딩 입문", kind: "PDF", size: "1.1MB", views: 37, date: "03-08", given: false },
+        { name: "측정과 그래프 리포트 양식", sub: "과학 실험", kind: "양식", size: "540KB", views: 29, date: "03-02", given: true },
+        { name: "4월 학사일정 안내장", sub: "공통", kind: "인쇄물", size: "3.0MB", views: 22, date: "03-10", given: false },
+        { name: "오답 정리 노트 양식", sub: "공통", kind: "양식", size: "420KB", views: 83, date: "02-26", given: true },
+      ];
+      let fileKind = "all";
+      const renderFiles = () => {
+        document.querySelector("#file-body").replaceChildren(
+          ...FILES.map((f, i) => ({ f, i }))
+            .filter(({ f }) => fileKind === "all" || f.kind === fileKind)
+            .map(({ f, i }) => {
+              const tr = document.createElement("tr");
+              tr.innerHTML =
+                `<th scope="row">${f.name}</th><td>${f.sub}</td>` +
+                `<td><span class="state state-off">${f.kind}</span></td>` +
+                `<td class="num mono">${f.size}</td><td class="num mono">${f.views}</td>` +
+                `<td class="num mono">${f.date}</td>` +
+                `<td><button type="button" class="give-btn ${f.given ? "is-given" : ""}" data-file="${i}" aria-pressed="${f.given}">${f.given ? "배부됨" : "배부"}</button></td>`;
+              return tr;
+            })
+        );
+      };
+      document.getElementById("file-chips").addEventListener("click", (e) => {
+        const chip = e.target.closest("[data-kind]");
+        if (!chip) return;
+        document.querySelectorAll("#file-chips .chip").forEach((c) => {
+          c.classList.toggle("is-on", c === chip);
+          c.setAttribute("aria-pressed", String(c === chip));
+        });
+        fileKind = chip.dataset.kind;
+        renderFiles();
+      });
+      document.querySelector("#file-body").addEventListener("click", (e) => {
+        const btn = e.target.closest("[data-file]");
+        if (!btn) return;
+        const f = FILES[+btn.dataset.file];
+        f.given = !f.given;
+        renderFiles();
+        renderFileStats();
+      });
+      const renderFileStats = () => {
+        const given = FILES.filter((f) => f.given).length;
+        document.getElementById("file-stats").innerHTML =
+          `<div>자료 <strong>${FILES.length}건</strong></div>` +
+          `<div>배부 완료 <strong>${given}건</strong></div>` +
+          `<div>미배부 <strong>${FILES.length - given}건</strong></div>` +
+          `<div>총 조회 <strong>${FILES.reduce((a, f) => a + f.views, 0)}회</strong></div>`;
+      };
+      renderFiles();
+      renderFileStats();
+
+      // ── 학사 일정: 2026년 3월, 월요일 시작 ──
+      const EVENTS = {
+        6: { name: "리포트 마감", type: "due" },
+        11: { name: "모의고사", type: "exam" },
+        12: { name: "논술 초고 마감", type: "due" },
+        13: { name: "워크시트 마감", type: "due" },
+        16: { name: "학부모 상담 주간", type: "admin" },
+        19: { name: "휴원", type: "holi" },
+        25: { name: "4월 시간표 확정", type: "admin" },
+        31: { name: "1차 평가 마감", type: "exam" },
+      };
+      const EV_TODAY = 9;
+      const renderCalendar = () => {
+        // 2026-03-01 은 일요일. 월요일 시작 격자: 첫 주 앞 6칸은 비고 1일이 마지막 칸
+        const body = document.querySelector("#cal-table tbody");
+        const grid = new Array(6).fill(null);
+        grid.push(1);
+        for (let d = 2; d <= 31; d++) grid.push(d); // 3/2 부터 순서대로 이어붙인다
+        while (grid.length % 7 !== 0) grid.push(null);
+        const rows = [];
+        for (let r = 0; r < grid.length; r += 7) rows.push(grid.slice(r, r + 7));
+        body.replaceChildren(
+          ...rows.map((weekRow) => {
+            const tr = document.createElement("tr");
+            tr.innerHTML = weekRow
+              .map((d) => {
+                if (!d) return `<td class="cal-day is-empty"></td>`;
+                const ev = EVENTS[d] ? `<span class="cal-ev is-${EVENTS[d].type}">${EVENTS[d].name}</span>` : "";
+                const today = d === EV_TODAY ? " is-today" : "";
+                return `<td class="cal-day${today}"><span class="cal-num mono">${d}</span>${ev}</td>`;
+              })
+              .join("");
+            return tr;
+          })
+        );
+        // 다가오는 일정 (3월 9일 이후)
+        document.getElementById("up-list").replaceChildren(
+          ...Object.entries(EVENTS)
+            .map(([d, ev]) => ({ d: +d, ...ev }))
+            .filter(({ d }) => d >= EV_TODAY)
+            .sort((a, b) => a.d - b.d)
+            .map(({ d, name, type }) => {
+              const li = document.createElement("li");
+              const item = document.createElement("p");
+              item.className = "due-row is-static";
+              const dd = d === EV_TODAY ? "오늘" : "D-" + (d - EV_TODAY);
+              item.innerHTML = `<span><i class="ev-dot is-${type}" aria-hidden="true"></i>${name}</span><span class="mono muted">${dd} · 3월 ${d}일</span>`;
+              li.append(item);
+              return li;
+            })
+        );
+        const byType = (t) => Object.values(EVENTS).filter((e) => e.type === t).length;
+        document.getElementById("cal-stats").innerHTML =
+          `<div>3월 일정 <strong>${Object.keys(EVENTS).length}건</strong></div>` +
+          `<div>평가 · 시험 <strong>${byType("exam")}건</strong></div>` +
+          `<div>과제 마감 <strong>${byType("due")}건</strong></div>` +
+          `<div>행정 · 상담 <strong>${byType("admin")}건</strong></div>` +
+          `<div>휴원 <strong>${byType("holi")}일</strong></div>`;
+      };
+      renderCalendar();
+
+      // ── 상담 기록: memo 에서 카드로 ──
+      let coSub = "all";
+      const renderCounsel = () => {
+        const cards = STUDENTS
+          .map((s, i) => ({ s, i }))
+          .filter(({ s }) => (coSub === "all" || s.sub === coSub))
+          .flatMap(({ s, i }) =>
+            s.memo.map((m) => {
+              const date = m.match(/^(\d+\/\d+)/);
+              return { s, i, date: date ? date[1] : "날짜 미기재", text: m };
+            })
+          )
+          .sort((a, b) => (a.date < b.date ? 1 : -1));
+        document.getElementById("counsel-grid").replaceChildren(
+          ...cards.map((c) => {
+            const card = document.createElement("button");
+            card.type = "button";
+            card.className = "counsel-card";
+            card.dataset.stu = c.i;
+            card.innerHTML =
+              `<span class="co-head"><strong>${c.s.name}</strong><span class="mono muted">${c.date}</span></span>` +
+              `<span class="co-sub muted">${c.s.sub} · ${c.s.status}</span>` +
+              `<span class="co-text">${c.text}</span>`;
+            return card;
+          })
+        );
+        document.getElementById("counsel-empty").hidden = cards.length > 0;
+      };
+      const renderCoStats = () => {
+        const all = STUDENTS.flatMap((s) => s.memo);
+        const march = all.filter((m) => m.startsWith("3/"));
+        const parent = all.filter((m) => m.includes("학부모"));
+        document.getElementById("co-stats").innerHTML =
+          `<div>기록 총 <strong>${all.length}건</strong></div>` +
+          `<div>3월 <strong>${march.length}건</strong></div>` +
+          `<div>학부모 상담 <strong>${parent.length}건</strong></div>` +
+          `<div>예정 <strong>3건</strong></div>`;
+      };
+      renderCoStats();
+      document.getElementById("co-chips").addEventListener("click", (e) => {
+        const chip = e.target.closest("[data-sub]");
+        if (!chip) return;
+        document.querySelectorAll("#co-chips .chip").forEach((c) => {
+          c.classList.toggle("is-on", c === chip);
+          c.setAttribute("aria-pressed", String(c === chip));
+        });
+        coSub = chip.dataset.sub;
+        renderCounsel();
+      });
+      renderCounsel();
+
+      // ── 학기 리포트: 명단에서 직접 계산 ──
+      const renderReport = () => {
+        const body = document.querySelector("#report-table tbody");
+        body.replaceChildren(
+          ...SUBJECTS.map((sub) => {
+            const roster = STUDENTS.filter((s) => s.sub === sub && s.status === "재학");
+            const avgAtt = roster.length
+              ? Math.round(roster.reduce((a, s) => a + s.att, 0) / roster.length)
+              : 0;
+            const hw = roster.reduce(
+              (a, s) => {
+                const [done, total] = s.hw.split("/").map(Number);
+                return { done: a.done + done, total: a.total + total };
+              },
+              { done: 0, total: 0 }
+            );
+            const hwRate = hw.total ? Math.round((hw.done / hw.total) * 100) : 0;
+            // 채점이 끝난 과목만 평균을 쓴다 — 나머지는 비워 둔다
+            const graded = sub === "수학 심화 B";
+            const PROG = { "수학 심화 B": [12, 16], "국어 논술 A": [8, 12], "코딩 입문": [5, 10], "과학 실험": [9, 12] };
+            const [pDone, pTotal] = PROG[sub];
+            const tr = document.createElement("tr");
+            tr.innerHTML =
+              `<th scope="row">${sub}</th><td class="num mono">${roster.length}명</td>` +
+              `<td class="num mono">${avgAtt}%</td>` +
+              `<td class="num mono">${hw.done}/${hw.total} · ${hwRate}%</td>` +
+              `<td class="num mono">${graded ? '<span class="hl">84.4점</span>' : "채점 중"}</td>` +
+              `<td class="num mono">${pDone}/${pTotal} · ${Math.round((pDone / pTotal) * 100)}%</td>`;
+            return tr;
+          })
+        );
+      };
+      renderReport();
+      {
+        const active = STUDENTS.filter((s) => s.status === "재학");
+        const avgAtt = Math.round(active.reduce((a, s) => a + s.att, 0) / active.length);
+        const hw = active.reduce(
+          (a, s) => {
+            const [done, total] = s.hw.split("/").map(Number);
+            return { done: a.done + done, total: a.total + total };
+          },
+          { done: 0, total: 0 }
+        );
+        const hwRate = Math.round((hw.done / hw.total) * 100);
+        document.getElementById("rep-stats").innerHTML =
+          `<div><dt>재학생</dt><dd>${active.length}명</dd><dd class="stat-sub">4과목 합산 · 휴학 2 제외</dd></div>` +
+          `<div><dt>평균 출석률</dt><dd>${avgAtt}%</dd><dd class="stat-sub">재학생 기준 실계산</dd></div>` +
+          `<div><dt>과제 제출률</dt><dd>${hwRate}%</dd><dd class="stat-sub">${hw.done}/${hw.total} 제출</dd></div>` +
+          `<div><dt>채점 완료 과목</dt><dd>1/4</dd><dd class="stat-sub">학부모 발송 3/20</dd></div>`;
+      }
+
+      // ── 수강생 상세 모달: 학적 카드 ──
+      const stuDialog = document.getElementById("stu-dialog");
+      document.addEventListener("click", (e) => {
+        const btn = e.target.closest("[data-stu]");
+        if (!btn || btn.classList.contains("att-btn")) return;
+        const i = +btn.dataset.stu;
+        const s = STUDENTS[i];
+        document.getElementById("stu-seal").textContent = s.name[0];
+        document.getElementById("stu-mark").textContent = s.name[0];
+        document.getElementById("stu-dlg-h").innerHTML = `<span class="hl">${s.name}</span>`;
+        document.getElementById("stu-meta").textContent = `${s.sub} · ${s.status} · 개강 2026-03-02`;
+        document.getElementById("stu-guardian").textContent = `${s.guard} · ${s.phone}`;
+        document.getElementById("stu-att").textContent = s.att + "%";
+        document.getElementById("stu-hw").textContent = s.hw;
+        document.getElementById("stu-memo-n").textContent = s.memo.length + "건";
+
+        // 2주 출석 스트립 — 출석부 화면과 같은 데이터에서 뽑는다
+        const strip = document.getElementById("stu-att-strip");
+        if (s.status === "휴학") {
+          strip.replaceChildren();
+          const na = document.createElement("p");
+          na.className = "att-strip-na muted";
+          na.textContent = "휴학 중입니다. 복학하면 기록이 쌓입니다.";
+          strip.append(na);
+        } else {
+          const cells = [];
+          WEEKS.forEach((w, wi) => {
+            w.days.forEach((d, di) => {
+              const v = ATT_ALL[wi][i][di];
+              cells.push(
+                `<span class="att-cell2"><span class="att-mark v-${v === 2 ? "att" : v === 1 ? "late" : "abs"}">${ATT_MARK[v]}</span><span class="att-date mono">${d.slice(5).replace("-", "/")}</span></span>`
+              );
+            });
+          });
+          strip.innerHTML = cells.join("");
+        }
+
+        const noteLi = (m) => {
+          const li = document.createElement("li");
+          const dm = m.match(/^(\d+\/\d+)/);
+          const date = document.createElement("span");
+          date.className = "note-date mono";
+          date.textContent = dm ? dm[1] : "—";
+          const text = document.createElement("span");
+          text.className = "note-text";
+          text.textContent = m;
+          li.append(date, text);
+          return li;
+        };
+        const list = document.getElementById("stu-note-list");
+        list.replaceChildren(
+          ...(s.memo.length ? s.memo.map(noteLi) : ["아직 기록이 없습니다."].map((t) => {
+            const li = document.createElement("li");
+            li.textContent = t;
+            return li;
+          }))
+        );
+        const form = document.getElementById("note-form");
+        const input = document.getElementById("note-input");
+        form.onsubmit = (ev) => {
+          ev.preventDefault();
+          if (!input.value.trim()) return;
+          s.memo.push(input.value.trim());
+          input.value = "";
+          const li = noteLi(s.memo[s.memo.length - 1]);
+          if (list.firstElementChild?.textContent === "아직 기록이 없습니다.") list.replaceChildren();
+          list.append(li);
+          document.getElementById("stu-memo-n").textContent = s.memo.length + "건";
+          renderCounsel(); // 상담 기록 화면도 함께 갱신
+          input.focus();
+        };
+        stuDialog.showModal();
+      });
+
+      // ── 채점 모달: 점수를 고치면 평균이 따라온다 ──
+      const asDialog = document.getElementById("as-dialog");
+      const scoreInputs = [...document.querySelectorAll(".grade-table .score")];
+      const updateAvg = () => {
+        const vals = scoreInputs.map((inp) => +inp.value || 0);
+        const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+        document.getElementById("as-avg").textContent = avg.toFixed(1);
+      };
+      scoreInputs.forEach((inp) => inp.addEventListener("input", updateAvg));
+      const ASSIGN = { a1: "미분 응용 세트 3 · 수학 심화 B", a2: "자기소개 논술 초고 · 국어 논술 A", a3: "변수와 조건 워크시트 · 코딩 입문", a4: "측정과 그래프 리포트 · 과학 실험" };
+      let currentAssign = null;
+      document.addEventListener("click", (e) => {
+        const btn = e.target.closest("[data-assign]");
+        if (!btn) return;
+        currentAssign = btn.dataset.assign;
+        document.getElementById("as-dlg-meta").textContent = ASSIGN[currentAssign] || "";
+        document.getElementById("as-saved").hidden = true;
+        asDialog.showModal();
+      });
+      document.getElementById("as-save").addEventListener("click", () => {
+        document.getElementById("as-saved").hidden = false;
+        const row = document.querySelector(`#as-table .row-open[data-assign="${currentAssign}"]`);
+        const cell = row?.closest("tr").querySelector(".state");
+        if (cell) { cell.textContent = "채점 완료"; cell.classList.remove("state-wait"); }
+      });
+
+      // ── 모달 공용: 닫기 · 배경 탭 ──
+      document.querySelectorAll(".modal").forEach((d) => {
+        d.addEventListener("click", (e) => { if (e.target === d) d.close(); });
+        d.querySelector("[data-close]")?.addEventListener("click", () => d.close());
+      });
+    
+      // ── 알림 센터 ──
+      const bell = document.getElementById("bell");
+      const bellMenu = document.getElementById("bell-menu");
+      const bellDot = document.getElementById("bell-dot");
+      const syncBell = () => {
+        const n = bellMenu.querySelectorAll(".ntc.is-unread").length;
+        bellDot.hidden = n === 0;
+        bell.setAttribute("aria-label", n > 0 ? "읽지 않은 알림 " + n + "건" : "알림");
+      };
+      bell.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const open = bellMenu.classList.toggle("is-open");
+        bell.classList.toggle("is-open", open);
+        bell.setAttribute("aria-expanded", open);
+      });
+      document.addEventListener("click", (e) => {
+        if (!bellMenu.contains(e.target) && !bell.contains(e.target)) {
+          bellMenu.classList.remove("is-open");
+          bell.classList.remove("is-open");
+          bell.setAttribute("aria-expanded", "false");
+        }
+      });
+      document.getElementById("bell-all").addEventListener("click", () => {
+        bellMenu.querySelectorAll(".ntc.is-unread").forEach((n) => n.classList.remove("is-unread"));
+        syncBell();
+      });
+      syncBell();
+
+      // ── 공지: 분류 필터 ──
+      document.getElementById("nt-chips").addEventListener("click", (e) => {
+        const chip = e.target.closest("[data-nt]");
+        if (!chip) return;
+        document.querySelectorAll("#nt-chips .chip").forEach((c) => {
+          c.classList.toggle("is-on", c === chip);
+          c.setAttribute("aria-pressed", String(c === chip));
+        });
+        const cat = chip.dataset.nt;
+        document.querySelectorAll(".notice-row").forEach((row) => {
+          const li = row.closest("li");
+          const isPinned = row.querySelector(".pin") !== null;
+          row.hidden = cat !== "전체" && !isPinned && row.querySelector(".tag").textContent.trim() !== cat;
+          if (li) li.hidden = row.hidden;
+        });
+      });
+
+      // ── 공지: 열기 + 읽음 ──
+      document.querySelectorAll(".notice-row").forEach((row) => {
+        row.addEventListener("click", () => {
+          row.classList.toggle("is-open");
+          row.classList.remove("is-unread");
+          row.setAttribute("aria-expanded", row.classList.contains("is-open"));
+        });
+      });
+</script>
+  </body>
+</html>
diff --git a/apps/site/public/work/gaon-lms/og.png b/apps/site/public/work/gaon-lms/og.png
new file mode 100644
index 0000000..60ac9bf
Binary files /dev/null and b/apps/site/public/work/gaon-lms/og.png differ
diff --git a/apps/site/public/work/gaon-lms/styles/main.css b/apps/site/public/work/gaon-lms/styles/main.css
new file mode 100644
index 0000000..a0675e1
--- /dev/null
+++ b/apps/site/public/work/gaon-lms/styles/main.css
@@ -0,0 +1,807 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   가온 학적부 — 프로덕션 콘솔 (shadcn/ui new-york 문법의 바닐라 이식)
+   컨트롤 h-9 · 표 행 리듬 · 카드 radius 12px · shadow-sm — 문법이 곧 품질.
+   ========================================================================== */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+* { margin: 0; }
+
+html {
+  -webkit-text-size-adjust: 100%;
+  background: var(--muted);
+}
+
+body {
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-synthesis-weight: none;
+  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 합성 볼드 금지 — 없는 웨이트는 가늘게 떨어진다 */
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2, h3) { line-height: var(--leading-tight); font-weight: 600; word-break: keep-all; }
+strong, b { font-weight: 600; } /* UA 기본 700 볼드 재정의 */
+h1, h2.v-h {
+  font-size: var(--step-4); font-weight: 600;
+  font-family: var(--font-display); /* 학적부 서류의 명조 결 — 큰 제목에만 */
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+}
+@media (max-width: 680px) {
+  h1, h2.v-h { font-size: min(1.5rem, 6.4vw); } /* 뷰포트 단위 — 기기 글꼴 확대에도 제목은 부서지지 않는다 */
+}
+h2 { font-size: var(--step-2); }
+h3 { font-size: var(--step-0); font-weight: 500; }
+
+:where(p, li, td, th, dd, figcaption) { word-break: keep-all; overflow-wrap: anywhere; }
+
+.mono { font-family: var(--font-mono); font-size: var(--font-mono-size); font-variant-numeric: tabular-nums; }
+.muted { color: var(--muted-foreground); }
+.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
+
+.skip {
+  position: absolute; left: -9999px; top: 0;
+  background: var(--primary); color: var(--primary-foreground);
+  padding: var(--space-3) var(--space-4); z-index: 100; border-radius: var(--radius);
+}
+.skip:focus { left: var(--space-4); }
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+
+/* ── 앱 뼈대: 사이드바 244px + 본문 ── */
+.app {
+  display: grid;
+  grid-template-columns: 244px minmax(0, 1fr);
+  min-height: 100dvh;
+  background: var(--background);
+}
+
+.side {
+  background: var(--background);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-3);
+  position: sticky;
+  top: 0;
+  height: 100dvh;
+  overflow-y: auto;
+}
+.brand {
+  display: flex; align-items: center; gap: var(--space-2);
+  color: var(--foreground); text-decoration: none;
+  font-weight: 600; font-size: var(--step-1);
+  padding: var(--space-2) var(--space-2) var(--space-3);
+}
+.brand-mark {
+  width: 24px; height: 24px; flex: none;
+  border-radius: var(--radius);
+  background: var(--accent);
+  display: grid; place-items: center;
+  color: #fff; font-size: 12px; font-weight: 600;
+}
+.brand-mark::after { content: "가"; }
+
+.side-nav { display: grid; gap: 1px; }
+.side-group {
+  font-size: var(--step-1);
+  font-weight: 500;
+  color: var(--muted-foreground);
+  padding: var(--space-4) var(--space-2) var(--space-1);
+}
+.side-link {
+  appearance: none; border: 0; background: none; cursor: pointer;
+  display: flex; align-items: center; gap: var(--space-2);
+  width: 100%;
+  text-align: left; color: var(--muted-foreground);
+  font: inherit; font-size: var(--step-0); font-weight: 500;
+  height: 34px;
+  padding: 0 var(--space-2);
+  border-radius: var(--radius);
+  transition: background-color 100ms ease, color 100ms ease;
+}
+.side-link svg { flex: none; opacity: 0.9; }
+.side-link:hover { color: var(--foreground); background: var(--muted-2); }
+.side-link.is-current { color: var(--foreground); background: var(--muted-2); font-weight: 600; }
+.side-link.is-current svg { color: var(--accent); opacity: 1; }
+.side-foot {
+  margin-top: auto;
+  font-size: var(--step-1);
+  color: var(--muted-foreground);
+  line-height: 1.5;
+  padding: var(--space-3) var(--space-2);
+  border-top: 1px solid var(--border);
+}
+
+/* ── 탑바 ── */
+.topbar {
+  height: 52px;
+  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
+  padding: 0 var(--space-6);
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
+  flex: none;
+}
+.crumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-0); color: var(--muted-foreground); }
+.crumb strong { color: var(--foreground); font-weight: 600; }
+.topbar-right { display: flex; align-items: center; gap: var(--space-3); }
+.term-badge {
+  display: inline-flex; align-items: center;
+  font-size: var(--step-1); font-weight: 500;
+  color: var(--muted-foreground);
+  background: var(--muted-2);
+  border-radius: var(--radius);
+  padding: 3px 8px;
+  white-space: nowrap;
+}
+.avatar {
+  width: 28px; height: 28px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 999px;
+  background: var(--primary); color: var(--primary-foreground);
+  font-size: var(--step-1); font-weight: 600;
+}
+
+/* ── 본문 ── */
+.main { min-width: 0; display: flex; flex-direction: column; }
+
+.view { display: none; }
+.view.is-on { display: block; }
+.view:focus { outline: none; }
+
+.page-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-6) var(--space-5);
+}
+.page-head h1 { letter-spacing: -0.025em; }
+.view-sub { color: var(--muted-foreground); font-size: var(--step-0); margin-top: 4px; max-width: 46em; }
+.view-head {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-6) var(--space-5);
+}
+.stamp { display: none; }
+.view > *:not(.view-head):not(.page-head) { margin-left: var(--space-6); margin-right: var(--space-6); }
+.view > *:last-child { margin-bottom: var(--space-6); }
+
+/* ── 카드 ── */
+.panel {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-5);
+  min-width: 0;
+}
+.panel h2 { margin-bottom: var(--space-4); font-size: var(--step-2); }
+.panel-note { font-size: var(--step-1); color: var(--faint); margin-top: var(--space-3); }
+
+/* 통계 카드 */
+.headline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
+.headline > div {
+  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5);
+}
+.headline dt { font-size: var(--step-0); color: var(--muted-foreground); font-weight: 500; }
+.headline dd { font-size: var(--step-3); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; font-variant-numeric: tabular-nums; margin-top: 4px; }
+.headline .stat-sub, .rep-stat-sub { font-size: var(--step--1); color: var(--faint); margin: 6px 0 0; margin-inline-start: 0; font-variant-numeric: tabular-nums; }
+
+.dash-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: var(--space-4);
+  align-items: start;
+  margin-top: var(--space-4);
+}
+.week-panel { grid-row: span 2; }
+
+/* ── 표 ── */
+.table-wrap { overflow-x: auto; overflow-y: hidden; }
+table { width: 100%; border-collapse: collapse; }
+thead th {
+  text-align: left; font-weight: 500; font-size: var(--step-1);
+  color: var(--muted-foreground); padding: 0 var(--space-3) var(--space-3);
+  border-bottom: 1px solid var(--border);
+  height: 36px; white-space: nowrap;
+}
+tbody td, tbody th { padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; }
+tbody th { font-weight: 500; }
+tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
+tbody tr { transition: background-color 80ms ease; }
+tbody tr:hover { background: var(--muted); }
+.tsum { padding: var(--space-3); font-size: var(--step--1); color: var(--muted-foreground); border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.row-open {
+  appearance: none; border: 0; background: none; padding: 0;
+  font: inherit; font-weight: 500; color: var(--foreground);
+  cursor: pointer; text-align: left;
+  transition: color 80ms ease;
+}
+.row-open:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
+
+/* ── 배지 ── */
+.state {
+  display: inline-flex; align-items: center;
+  font-size: var(--step-1); font-weight: 500;
+  border-radius: var(--radius);
+  padding: 2px 8px;
+  white-space: nowrap;
+  background: var(--success-soft); color: var(--success-ink);
+}
+.state-wait { background: var(--warning-soft); color: var(--warning-ink); }
+.state-off { background: var(--muted-2); color: var(--muted-foreground); }
+.state-run { background: var(--accent-soft); color: var(--accent-ink); }
+.state-run::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-right: 6px; animation: dot-pulse 1.6s ease infinite; }
+@keyframes dot-pulse { 50% { opacity: 0.35; } }
+.t-warn { color: var(--warning-ink); font-weight: 500; }
+
+/* ── 차트 ── */
+.week-chart svg { display: block; width: 100%; height: auto; }
+.dist-chart svg { display: block; height: 200px; width: auto; max-width: 100%; margin-inline: auto; }
+.dist-chart .bars text { font-size: 11px; font-weight: 600; fill: var(--muted-foreground); }
+.dist-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: center; }
+.dist-stats { border-left: 1px solid var(--border); padding-left: var(--space-5); }
+.dist-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 9px 0; border-bottom: 1px solid var(--border); }
+.dist-stats > div:last-child { border-bottom: 0; }
+.dist-stats dt { font-size: var(--step-0); color: var(--muted-foreground); }
+.dist-stats dd { font-weight: 600; font-variant-numeric: tabular-nums; }
+.axis line { stroke: var(--border); stroke-width: 1; }
+.axis-labels text { font-size: 11px; fill: var(--muted-foreground); }
+.b-att { fill: var(--border-strong); }
+.b-late { fill: #f59e0b; }
+.b-abs { fill: var(--danger); }
+.b-hl { fill: var(--accent); }
+.week-chart figcaption, .dist-chart figcaption {
+  display: flex; gap: var(--space-4);
+  font-size: var(--step-1); color: var(--muted-foreground);
+  margin-top: var(--space-3);
+}
+.wk-sum { margin-top: var(--space-4); border-top: 1px solid var(--border); }
+.wk-sum thead th { padding: 8px var(--space-2); }
+.wk-sum tbody td { padding: 7px var(--space-2); }
+.wk-sum tfoot td { padding: 8px var(--space-2); border-top: 1px solid var(--border-strong); font-weight: 600; }
+.wk-sum td:first-child, .wk-sum th:first-child { padding-left: 0; white-space: nowrap; }
+.wk-sum td:last-child, .wk-sum th:last-child { padding-right: 0; }
+.key { display: inline-flex; align-items: center; gap: 6px; }
+.key i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
+.k-att { background: var(--border-strong); }
+.k-late { background: #f59e0b; }
+.k-abs { background: var(--danger); }
+.hl { background: none; padding: 0; font-weight: 600; color: var(--foreground); }
+
+/* ── 마감 목록 ── */
+.due-list { list-style: none; margin: 0; padding: 0; display: grid; }
+.due-row {
+  appearance: none; background: none; border: 0;
+  width: 100%; display: grid; gap: 2px; text-align: left;
+  font: inherit; padding: var(--space-3);
+  cursor: pointer; border-bottom: 1px solid var(--border);
+  transition: background-color 80ms ease;
+}
+.due-list li:last-child .due-row { border-bottom: 0; }
+.due-row:hover { background: var(--muted); }
+.due-row span:last-child { font-size: var(--step-1); color: var(--muted-foreground); }
+.due-row.is-static { cursor: default; }
+.due-row.is-static:hover { background: none; }
+.hl-count { color: var(--danger-ink); font-weight: 600; background: var(--danger-soft); border-radius: 4px; padding: 0 5px; }
+
+/* ── 검색 + 세그먼트 ── */
+.toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--space-4); }
+#q {
+  font: inherit; color: var(--foreground);
+  background: var(--card);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  height: 36px;
+  padding: 0 var(--space-3);
+  min-width: 13rem;
+  box-shadow: var(--shadow-sm);
+  transition: border-color 100ms ease, box-shadow 100ms ease;
+}
+#q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
+#q::placeholder { color: var(--faint); }
+
+.chips {
+  display: inline-flex; gap: 2px;
+  background: var(--muted-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px;
+}
+.chip {
+  appearance: none; cursor: pointer; font: inherit;
+  font-size: var(--step-1); font-weight: 500;
+  background: none; color: var(--muted-foreground);
+  border: 0; border-radius: var(--radius);
+  height: 28px; padding: 0 var(--space-3);
+  display: inline-flex; align-items: center;
+  transition: background-color 100ms ease, color 100ms ease, box-shadow 100ms ease;
+}
+.chip:hover { color: var(--foreground); }
+.chip.is-on { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
+
+/* ── 출석부 히트맵 ── */
+.att-day { text-align: center; }
+.att-cell { text-align: center; padding: 3px; }
+.att-cell.is-na { color: var(--faint); }
+.att-btn {
+  appearance: none; border: 1px solid transparent; cursor: pointer;
+  font: inherit; font-size: var(--step-1); line-height: 1; font-weight: 600;
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: var(--radius);
+  transition: transform 100ms ease, box-shadow 100ms ease;
+}
+.att-btn:hover { transform: scale(1.08); box-shadow: var(--shadow-sm); }
+.att-btn:active { scale: 0.94; }
+.att-btn.v-att { background: var(--success-soft); color: var(--success-ink); }
+.att-btn.v-late { background: #fef3c7; color: var(--warning-ink); }
+.att-btn.v-abs { background: var(--danger-soft); color: var(--danger-ink); }
+
+.week-nav { display: inline-flex; align-items: center; gap: var(--space-2); }
+.week-label { min-width: 4.5em; text-align: center; color: var(--muted-foreground); font-size: var(--step-1); }
+.week-nav .btn-line:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── 자료실 ── */
+.give-btn {
+  appearance: none; cursor: pointer; font: inherit;
+  font-size: var(--step-1); font-weight: 500;
+  background: none; color: var(--muted-foreground);
+  border: 1px solid var(--border-strong); border-radius: var(--radius);
+  height: 28px; padding: 0 10px;
+  transition: all 100ms ease;
+  white-space: nowrap;
+}
+.give-btn:hover { border-color: var(--foreground); color: var(--foreground); }
+.give-btn.is-given { background: var(--success-soft); border-color: transparent; color: var(--success-ink); }
+
+/* ── 학사 일정 ── */
+.cal-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+  gap: var(--space-4);
+  align-items: start;
+}
+.cal { table-layout: fixed; }
+.cal th { text-align: center; font-size: var(--step-1); height: 32px; padding: 0; }
+.cal-day {
+  height: 76px; padding: var(--space-1);
+  border: 1px solid var(--border);
+  vertical-align: top;
+}
+.cal-day:nth-child(7n+6), .cal-day:nth-child(7n+7) { background: var(--muted); }
+.cal-day.is-empty { border: 0; background: none !important; }
+.cal-num { display: block; color: var(--muted-foreground); font-size: var(--step-1); font-weight: 500; }
+.cal-day.is-today .cal-num {
+  display: inline-grid; place-items: center;
+  width: 22px; height: 22px;
+  color: #fff; font-weight: 600;
+  background: #047857; /* 진한 에메랄드 — 흰 숫자 5.4:1 */
+  border-radius: 999px;
+}
+.cal-ev {
+  display: block; margin-top: 2px;
+  font-size: var(--step--2); line-height: 1.35; word-break: keep-all;
+  background: var(--accent-soft); color: var(--accent-ink);
+  border-radius: 4px;
+  padding: 1px 4px;
+}
+
+/* ── 상담 기록 ── */
+.counsel-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+.counsel-card {
+  appearance: none; cursor: pointer; font: inherit; text-align: left;
+  display: grid; gap: 4px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-4);
+  transition: border-color 100ms ease, box-shadow 100ms ease;
+}
+.counsel-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
+.counsel-card:active { scale: 0.995; }
+.co-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
+.co-head strong { font-weight: 600; }
+.co-sub { font-size: var(--step-1); }
+.co-text { font-size: var(--step-0); line-height: var(--leading-normal); word-break: keep-all; }
+.empty-note { color: var(--muted-foreground); font-size: var(--step-0); }
+
+/* ── 버튼 ── */
+.btn-primary, .btn-outline, .btn-ghost, .btn-line, .btn-solid {
+  appearance: none; cursor: pointer; font: inherit;
+  font-size: var(--step-0); font-weight: 500;
+  height: 36px; padding: 0 var(--space-4);
+  border-radius: var(--radius);
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
+  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease, scale 80ms ease;
+  white-space: nowrap;
+}
+.btn-primary, .btn-solid { background: var(--primary); border: 1px solid var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-sm); }
+.btn-primary:hover, .btn-solid:hover { background: #27272a; border-color: #27272a; }
+.btn-outline, .btn-line { background: var(--card); border: 1px solid var(--border-strong); color: var(--foreground); box-shadow: var(--shadow-sm); }
+.btn-outline:hover, .btn-line:hover { background: var(--muted); }
+.btn-ghost { background: none; border: 0; color: var(--muted-foreground); padding: 0 var(--space-3); }
+.btn-ghost:hover { color: var(--foreground); background: var(--muted-2); }
+.btn-primary:active, .btn-outline:active, .btn-line:active, .btn-solid:active, .btn-ghost:active { scale: 0.98; }
+
+/* ── 모달 ── */
+.modal {
+  margin: auto;
+  width: min(94vw, 860px);
+  max-height: min(86dvh, 760px);
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  color: var(--foreground);
+  overflow: hidden;
+  box-shadow: var(--shadow-xl);
+}
+.modal::backdrop { background: rgb(9 9 11 / 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
+@media (prefers-reduced-motion: no-preference) {
+  .modal[open] { animation: modal-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
+  @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
+}
+.mspread {
+  display: grid;
+  grid-template-columns: 264px minmax(0, 1fr);
+  max-height: min(86dvh, 760px);
+}
+.mcover {
+  position: relative;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  padding: var(--space-6);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+}
+.mcover-mark {
+  position: absolute; right: -14px; bottom: -20px;
+  font-size: 8rem; font-weight: 600; line-height: 1;
+  color: rgb(250 250 250 / 0.05);
+  pointer-events: none; user-select: none;
+}
+.mcover-seal {
+  width: 44px; height: 44px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: var(--step-2); font-weight: 600;
+  color: #fff;
+  background: var(--accent);
+  border-radius: var(--radius);
+  margin-bottom: var(--space-4);
+}
+.mcover-name {
+  font-family: var(--font-display);
+  font-size: var(--step-3); line-height: 1.2; font-weight: 600;
+  letter-spacing: -0.02em; word-break: keep-all;
+}
+.mcover-meta { color: #a1a1aa; font-size: var(--step-1); margin-top: var(--space-2); }
+.mcover-stats { margin-top: var(--space-5); border-top: 1px solid rgb(250 250 250 / 0.12); }
+.mcover-stats > div {
+  display: flex; justify-content: space-between; align-items: baseline;
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid rgb(250 250 250 / 0.12);
+}
+.mcover-stats dt { font-size: var(--step-1); color: #a1a1aa; }
+.mcover-stats dd { font-size: var(--step-1); font-weight: 600; font-variant-numeric: tabular-nums; }
+.mcover-foot { margin-top: auto; color: #71717a; font-size: var(--step--2); }
+
+.msheet {
+  position: relative;
+  background: var(--card);
+  padding: var(--space-6);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  display: grid; gap: var(--space-5);
+  align-content: start;
+  min-height: 340px;
+}
+.msec h3 { color: var(--muted-foreground); margin-bottom: var(--space-3); font-weight: 500; font-size: var(--step-0); }
+.modal-title { font-size: var(--step-3); letter-spacing: -0.02em; }
+.modal-meta { color: var(--muted-foreground); margin-top: 2px; }
+.modal-close {
+  position: absolute; top: var(--space-4); right: var(--space-4);
+  width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--card); color: var(--muted-foreground); cursor: pointer;
+  transition: background-color 100ms ease, color 100ms ease;
+  z-index: 2;
+}
+.modal-close:hover { background: var(--muted-2); color: var(--foreground); }
+.modal-inner { position: relative; padding: var(--space-6); display: grid; gap: var(--space-4); }
+
+/* 출석 스트립 */
+.att-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.att-cell2 { display: grid; justify-items: center; gap: 4px; min-width: 40px; }
+.att-mark {
+  width: 30px; height: 30px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: var(--step-1); line-height: 1; font-weight: 600;
+  border-radius: var(--radius);
+}
+.att-mark.v-att { background: var(--success-soft); color: var(--success-ink); }
+.att-mark.v-late { background: #fef3c7; color: var(--warning-ink); }
+.att-mark.v-abs { background: var(--danger-soft); color: var(--danger-ink); }
+.att-date { font-size: var(--step--2); color: var(--faint); }
+.att-strip-na { font-size: var(--step-1); color: var(--muted-foreground); }
+
+/* 상담 타임라인 */
+#stu-note-list {
+  list-style: none; margin: 0 0 var(--space-4); padding: 0;
+  display: grid;
+}
+#stu-note-list li {
+  display: grid; grid-template-columns: 3rem minmax(0, 1fr);
+  gap: var(--space-3); align-items: baseline;
+  padding: var(--space-3) 0;
+  border-bottom: 1px solid var(--border);
+  font-size: var(--step-0);
+}
+.note-date { color: var(--faint); font-size: var(--step-1); }
+.note-text { word-break: keep-all; }
+.note-form { display: flex; gap: var(--space-2); }
+.note-form input {
+  flex: 1; min-width: 0; font: inherit; font-size: var(--step-0);
+  height: 36px;
+  border: 1px solid var(--border-strong); border-radius: var(--radius);
+  background: var(--card); color: var(--foreground);
+  padding: 0 var(--space-3);
+  box-shadow: var(--shadow-sm);
+}
+.note-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
+.note-form input::placeholder { color: var(--faint); }
+
+/* 채점 */
+.as-summary {
+  font-size: var(--step-0); color: var(--muted-foreground);
+  border-top: 1px solid var(--border);
+  padding-top: var(--space-3);
+}
+.as-summary strong { color: var(--foreground); font-weight: 600; font-size: var(--step-2); font-variant-numeric: tabular-nums; }
+.grade-table input.score {
+  width: 5rem; font-family: var(--font-mono); font-size: var(--font-mono-size);
+  text-align: right; color: var(--foreground);
+  height: 30px;
+  border: 1px solid var(--border-strong); border-radius: var(--radius);
+  background: var(--card);
+}
+.grade-table input.score:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
+.modal-actions { display: flex; align-items: center; gap: var(--space-4); }
+.modal-note { font-size: var(--step-1); }
+
+/* ── 반응형 ── */
+@media (max-width: 900px) {
+  .app { grid-template-columns: minmax(0, 1fr); }
+  .side {
+    position: static; height: auto;
+    flex-direction: row; align-items: center;
+    gap: var(--space-3); padding: var(--space-2) var(--space-4);
+    border-right: 0; border-bottom: 1px solid var(--border);
+    overflow-x: auto; overflow-y: hidden;
+    min-width: 0;
+  }
+  .brand { padding: 0 var(--space-2) 0 0; flex: none; white-space: nowrap; } /* 가로 스트립에서 찌그러져 글자가 세로로 쌓이는 것을 막는다 */
+  .side-nav { display: flex; gap: 2px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
+  .side-group { display: none; }
+  .side-link { white-space: nowrap; width: auto; height: 32px; }
+  .side-foot { display: none; }
+  .dash-grid, .cal-layout, .counsel-grid { grid-template-columns: minmax(0, 1fr); }
+  .week-panel { grid-row: auto; }
+  .dist-body { grid-template-columns: minmax(0, 1fr); }
+  .view-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-4); }
+  .view > *:not(.view-head):not(.page-head) { margin-inline: var(--space-4); }
+  .headline { gap: var(--space-2); }
+  .topbar { padding: 0 var(--space-4); min-width: 0; }
+  .term-badge { display: none; }
+  .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .cal-day { height: 56px; }
+}
+@media (max-width: 680px) {
+  .mspread { grid-template-columns: minmax(0, 1fr); }
+  .mcover { padding: var(--space-4); flex-direction: row; align-items: center; gap: var(--space-3); }
+  .mcover-seal { width: 40px; height: 40px; margin-bottom: 0; font-size: var(--step-1); }
+  .mcover-name { font-size: var(--step-2); }
+  .mcover-meta { margin-top: 2px; }
+  .mcover-stats, .mcover-foot { display: none; }
+  .mcover-mark { font-size: 5rem; }
+  .msheet { padding: var(--space-4); min-height: 0; }
+  .headline { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* ── 알림 센터 ── */
+.bell-wrap { position: relative; }
+.bell {
+  position: relative; width: 32px; height: 32px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: var(--radius); border: none; background: none; cursor: pointer;
+  color: var(--muted-foreground); transition: background-color 80ms ease, color 80ms ease;
+}
+.bell:hover, .bell.is-open { background: var(--muted-2); color: var(--foreground); }
+.bell-dot {
+  position: absolute; top: 4px; right: 4px;
+  width: 8px; height: 8px; border-radius: 999px;
+  background: var(--danger); border: 2px solid var(--background);
+}
+.bell-menu {
+  display: none; position: absolute; top: 40px; right: 0; z-index: 40;
+  width: min(340px, calc(100vw - 32px));
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
+}
+.bell-menu.is-open { display: block; }
+.bell-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px; border-bottom: 1px solid var(--border);
+  font-size: var(--step-0); font-weight: 600;
+}
+.bell-head button {
+  border: none; background: none; cursor: pointer;
+  font-size: var(--step--1); color: var(--accent-ink); padding: 2px 4px; border-radius: 4px;
+}
+.bell-head button:hover { background: var(--accent-soft); }
+.ntc { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
+.ntc:last-child { border-bottom: 0; }
+.ntc .n-ico {
+  width: 28px; height: 28px; flex: none; border-radius: var(--radius);
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--muted-2); color: var(--muted-foreground);
+}
+.ntc.is-unread .n-ico { background: var(--accent-soft); color: var(--accent-ink); }
+.ntc p { font-size: var(--step-0); line-height: 1.45; }
+.ntc.is-read p { color: var(--muted-foreground); }
+.ntc time { display: block; font-size: var(--step--1); color: var(--faint); margin-top: 2px; }
+
+/* ── 태그 칩 (유형·사유) ── */
+.tag {
+  display: inline-flex; align-items: center; white-space: nowrap;
+  font-size: var(--step--2); font-weight: 500;
+  border: 1px solid var(--border); color: var(--muted-foreground);
+  border-radius: 999px; padding: 1px 8px;
+}
+.tag-quiz { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
+.tag-exam { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; }
+.tag-warn { background: var(--warning-soft); color: var(--warning-ink); border-color: transparent; }
+.tag-ok { background: var(--success-soft); color: var(--success-ink); border-color: transparent; }
+
+/* ── 수업 진행 ── */
+.h-note { font-size: var(--step--1); font-weight: 400; color: var(--faint); margin-left: 8px; }
+.prog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
+.prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
+.prog-head strong { font-size: var(--step-0); font-weight: 600; }
+.prog-bar { height: 6px; border-radius: 999px; background: var(--muted-2); overflow: hidden; margin-top: 10px; }
+.prog-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
+.prog-meta { font-size: var(--step--1); color: var(--faint); margin-top: 8px; font-variant-numeric: tabular-nums; }
+
+/* ── 공지 뷰 ── */
+.notice-list { list-style: none; display: flex; flex-direction: column; }
+.notice-row {
+  width: 100%; text-align: left; cursor: pointer;
+  background: none; border: none; border-bottom: 1px solid var(--border);
+  padding: 14px var(--space-4);
+  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3);
+}
+.notice-list li:last-child .notice-row { border-bottom: 0; }
+.notice-row:hover { background: var(--muted); }
+.n-t { font-size: var(--step-0); font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; word-break: keep-all; }
+.notice-row.is-unread .n-t::after {
+  content: ""; width: 6px; height: 6px; border-radius: 999px;
+  background: var(--accent); flex: none;
+}
+.pin { color: var(--accent-ink); flex: none; }
+.n-meta {
+  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-3);
+  font-size: var(--step--1); color: var(--faint); font-variant-numeric: tabular-nums;
+}
+.n-body {
+  max-width: 68ch;
+  grid-column: 1 / -1; display: none;
+  font-size: var(--step-0); line-height: 1.65; color: var(--muted-foreground);
+  padding-top: 2px;
+}
+.notice-row.is-open .n-body { display: block; }
+
+/* ── 출결 사유 칩 ── */
+.att-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
+@media (pointer: coarse) {
+  .att-btn { width: 40px; height: 40px; }
+  .chip, .side-link, .give-btn { min-height: 40px; }
+}
+
+@media (max-width: 1080px) {
+  .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 560px) {
+  .prog-grid { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* ── 뷰 공통 요약 스트립 ── */
+.statline {
+  display: flex; flex-wrap: wrap; gap: 8px;
+  margin-bottom: var(--space-4);
+}
+.statline > div {
+  display: inline-flex; align-items: baseline; gap: 6px;
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); box-shadow: var(--shadow-sm);
+  padding: 6px 12px; font-size: var(--step-1); color: var(--muted-foreground);
+}
+.statline strong {
+  font-size: var(--step-0); font-weight: 600; color: var(--foreground);
+  font-variant-numeric: tabular-nums;
+}
+.statline .warn-ink { color: var(--warning-ink); }
+.statline .muted-ink { color: var(--muted-foreground); }
+
+/* ── 리포트 학기 요약 카드(4열) ── */
+.headline-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+@media (max-width: 900px) { .headline-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 560px) { .headline-4 { grid-template-columns: minmax(0, 1fr); } }
+
+/* ── 수강생 보호자 · 모달 보호자 블록 ── */
+#stu-table td.muted { color: var(--muted-foreground); white-space: nowrap; }
+.guard-line { font-size: var(--step-0); font-weight: 500; }
+.guard-log {
+  list-style: none; margin-top: 8px;
+  font-size: var(--step--1); color: var(--muted-foreground);
+  display: grid; gap: 4px;
+}
+
+/* ── 학사 일정: 유형색 + 범례 + D-day 점 ── */
+.cal-ev.is-exam { background: var(--warning-soft); color: var(--warning-ink); }
+.cal-ev.is-admin { background: var(--muted-2); color: var(--muted-foreground); }
+.cal-ev.is-holi { background: var(--danger-soft); color: var(--danger-ink); }
+.cal-legend {
+  display: flex; flex-wrap: wrap; gap: var(--space-4);
+  margin-top: var(--space-3); padding-top: var(--space-3);
+  border-top: 1px solid var(--border);
+  font-size: var(--step--1); color: var(--muted-foreground);
+}
+.lg-exam, .lg-due, .lg-admin, .lg-holi, .ev-dot {
+  width: 8px; height: 8px; border-radius: 2px; display: inline-block;
+}
+.lg-exam, .ev-dot.is-exam { background: var(--warning); }
+.lg-due, .ev-dot.is-due { background: var(--accent); }
+.lg-admin, .ev-dot.is-admin { background: var(--border-strong); }
+.lg-holi, .ev-dot.is-holi { background: var(--danger); }
+.ev-dot { margin-right: 8px; vertical-align: 0; }
+
+/* ── 공지 뷰 툴바 여백 ── */
+#view-notice .toolbar { margin-bottom: var(--space-4); }
+
+/* ── 모바일 갸행 수습(v12) — 한글은 어절에서만 끊고, 외톨이 줄을 만들지 않는다 ── */
+.view-sub, .n-body, .n-meta, .prog-meta, .stat-sub, .guard-line, .counsel-grid .co-text, .panel-note, .att-chips {
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+.due-row span { word-break: keep-all; }
+
+@media (max-width: 680px) {
+  /* 마감 임박 · 예정 상담 행 — 제목과 메타를 세로로 쌓아 메타가 끊기지 않게 */
+  .due-row { display: block; }
+  .due-row span { display: block; }
+  .due-row .mono { margin-top: 2px; }
+  /* 공지 행 — 제목이 전체 폭을 쓰고 분류 칩은 아래로 */
+  .notice-row { grid-template-columns: minmax(0, 1fr); }
+  .notice-row .tag { justify-self: start; }
+}
diff --git a/apps/site/public/work/gaon-lms/styles/tokens.css b/apps/site/public/work/gaon-lms/styles/tokens.css
new file mode 100644
index 0000000..0deafbd
--- /dev/null
+++ b/apps/site/public/work/gaon-lms/styles/tokens.css
@@ -0,0 +1,65 @@
+/* ==========================================================================
+   가온 학적부 — 디자인 토큰 (v3: 프로덕션 콘솔)
+   프리셋: production-console — shadcn/ui (new-york) 토큰 체계의 충실한 이식.
+   컨셉 한 문장: 실제 학원이 쓰는 것 같은 관리 콘솔 — 장식이 아니라 완성도로.
+   레퍼런스: shadcn/ui 디자인 시스템(zinc 스키마) — 프로덕션 SaaS 관리 화면의
+            사실상 표준 문법. 실측값은 아래 각 주석.
+   하지 않은 것: 종이/장부 컨셉(철회), 그라디언트, 글로우, 컨셉 워터마크.
+            색은 무채색 체계 + 상태색 3종 + 액센트 1(에메랄드)뿐.
+   ========================================================================== */
+
+:root {
+  /* 타입 — shadcn 본문 14px, 카드 값 24px tracking-tight */
+  --step--2: 0.6875rem;   /* 11px — 배지/케이션 */
+  --step--1: 0.75rem;     /* 12px — 보조 라벨 */
+  --step-0: 0.875rem;     /* 14px — 본문(sm) */
+  --step-1: 1rem;         /* 16px */
+  --step-2: 1.125rem;     /* 18px — 섹션 제목 */
+  --step-3: 1.5rem;       /* 24px — 카드 값/모달 제목 */
+  --step-4: 1.875rem;     /* 30px — 화면 제목 */
+
+  --leading-tight: 1.3;
+  --leading-normal: 1.6;
+
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+  --font-display: "Noto Serif KR", "Pretendard Variable", serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  --font-mono-size: 0.8125rem;
+
+  /* 색 — shadcn zinc 스키마 */
+  --background: #fafafa;       /* page */
+  --card: #ffffff;
+  --foreground: #09090b;       /* zinc-950 */
+  --muted: #fafafa;
+  --muted-2: #f4f4f5;          /* zinc-100 */
+  --muted-foreground: #64646e;  /* zinc-50/gray-100 위 5.2:1 이상 */ /* zinc-500 */
+  --faint: #6e6e77;            /* WCAG 4.5:1 보정 — 본문용 보조색 */
+  --border: #e4e4e7;           /* zinc-200 */
+  --border-strong: #d4d4d8;    /* zinc-300 */
+  --primary: #18181b;          /* zinc-900 */
+  --primary-foreground: #fafafa;
+  --ring: #a1a1aa;
+  --accent: #059669;           /* emerald-600 — 이 제품의 단 하나의 브랜드색 */
+  --accent-soft: #ecfdf5;      /* emerald-50 */
+  --accent-ink: #065f46;       /* emerald-800 */
+  --success: #059669; --success-soft: #ecfdf5; --success-ink: #065f46;
+  --warning: #b45309; --warning-soft: #fffbeb; --warning-ink: #92400e;
+  --danger: #dc2626;  --danger-soft: #fef2f2;  --danger-ink: #991b1b;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+
+  /* 반지름 — shadcn 파생 규칙: base 8px → 컨트롤 6px, 판 12px */
+  --radius: 6px;
+  --radius-lg: 12px;
+
+  /* 그림자 — Tailwind shadow-sm / shadow-lg 실측값 */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
diff --git a/apps/site/public/work/hyang-incense/assets/agarwood.webp b/apps/site/public/work/hyang-incense/assets/agarwood.webp
new file mode 100644
index 0000000..3508015
Binary files /dev/null and b/apps/site/public/work/hyang-incense/assets/agarwood.webp differ
diff --git a/apps/site/public/work/hyang-incense/assets/smoke.webp b/apps/site/public/work/hyang-incense/assets/smoke.webp
new file mode 100644
index 0000000..c02813d
Binary files /dev/null and b/apps/site/public/work/hyang-incense/assets/smoke.webp differ
diff --git a/apps/site/public/work/hyang-incense/index.html b/apps/site/public/work/hyang-incense/index.html
new file mode 100644
index 0000000..7304e82
--- /dev/null
+++ b/apps/site/public/work/hyang-incense/index.html
@@ -0,0 +1,255 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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="#F6F2E9" />
+
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
+    />
+    <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="./styles/main.css?v=2" />
+    <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='%23F6F2E9'/%3E%3Cpath d='M16 6c0 3 0 5 0 7m0 4c0 3 2 3 2 5m-2 2c0 2-2 3-2 5' fill='none' stroke='%237C3B24' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <!-- 재질: 한지. 아주 옅은 섬유 그레인 — 사진이 아니라 종이 위에 있다는 감각 -->
+    <svg class="paper" aria-hidden="true">
+      <filter id="hanji">
+        <feTurbulence type="fractalNoise" baseFrequency="0.9 0.7" numOctaves="2" seed="7" stitchTiles="stitch" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0.55  0 0 0 0 0.52  0 0 0 0 0.46  0 0 0 0.05 0" />
+      </filter>
+      <rect width="100%" height="100%" filter="url(#hanji)" />
+    </svg>
+
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">향연 <span class="han">享煙</span></a>
+        <nav class="nav" aria-label="섹션">
+          <a href="#wood">향목</a>
+          <a href="#aging">숙성</a>
+          <a href="#collection">아카이브</a>
+          <a href="#visit">방문</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        히어로 — 이 페이지의 리스크: 상품 사진 대신 연기 한 줄기.
+        여백이 주인공이고 사진은 그 여백을 가르는 흔적 하나다.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap hero-grid">
+          <div class="hero-text">
+            <p class="hero-kicker reveal">자연 침향 · 백단 · 서울 삼청동</p>
+            <h1 id="hero-h" class="reveal" style="--delay: 80ms">
+              연기는 흩어지고<br />향기만 머뭅니다
+            </h1>
+            <p class="lead reveal" style="--delay: 160ms">
+              향연은 향을 판매하기 전에 기록부터 남깁니다. 어느 해에 들인 나무인지,
+              수지가 몇이었는지, 연소에 몇 분이 걸렸는지. 향은 사라지는 것이니
+              남는 것은 문서뿐입니다.
+            </p>
+            <div class="hero-actions reveal" style="--delay: 220ms">
+              <a class="btn" href="#collection">아카이브 보기</a>
+            </div>
+          </div>
+          <figure class="hero-photo reveal" style="--delay: 120ms">
+            <img
+              src="./assets/smoke.webp"
+              alt="밝은 한지 위 검은 석 받침대에서 한 줄기 침향 연기가 곧게 피어오르는 모습"
+              width="900"
+              height="1200"
+              loading="eager"
+              fetchpriority="high"
+            />
+            <figcaption class="vertical">침향 한 줄기 · 삼청동 아카이브룸</figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <!--
+        향목 — 나무의 단면. 침향은 나무가 아니라 나무의 병(병해수지)이라는 것을
+        이 섹션에서만 설명한다.
+      -->
+      <section id="wood" class="section" aria-labelledby="wood-h">
+        <div class="wrap two">
+          <figure class="two-photo reveal">
+            <img
+              src="./assets/agarwood.webp"
+              alt="자연 침향 단면 — 짙은 수지 결과 하얀 목질이 함께 보이는 절편"
+              width="1100"
+              height="825"
+              loading="lazy"
+            />
+            <figcaption>자연 침향 단면 · 수지와 목질</figcaption>
+          </figure>
+          <div class="two-text">
+            <h2 id="wood-h">병든 나무만이<br />이 향을 가집니다</h2>
+            <p>
+              침향은 나무의 향이 아니라 나무의 상처입니다. 상처 입은 나무가 스스로를
+              아무려기 위해 분비한 수지가 오랜 세월 굳은 것 — 그래서 심은 나무에서는
+              얻을 수 없고, 자연에서 쓰러진 나무에서만 길어 올립니다.
+            </p>
+            <p class="muted">
+              향연은 인공접종 목재를 다루지 않습니다. 매입 단계에서 수지 함량을
+              측정해 기록하고, 그 기록이 통과하지 못한 나무는 아카이브에 들어오지
+              않습니다.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        숙성 — 아카이브의 뼈대. 연도가 곧 목록이다.
+        카드가 아니라 장부의 행: 연도 · 입목 · 수지 · 상태.
+      -->
+      <section id="aging" class="section band" aria-labelledby="aging-h">
+        <div class="wrap">
+          <div class="aging-head">
+            <h2 id="aging-h">숙성 장부</h2>
+            <p class="muted">
+              들여온 해와 수지 함량, 지금 상태입니다. 향은 재고가 아니라 연도입니다 —
+              같은 나무가 다시 들어오지 않습니다.
+            </p>
+          </div>
+          <div class="table-wrap reveal">
+            <table>
+              <caption class="sr-only">
+                숙성 장부 — 입목 연도, 산지, 수지 함량, 현재 상태
+              </caption>
+              <thead>
+                <tr>
+                  <th scope="col">입목</th>
+                  <th scope="col">산지</th>
+                  <th scope="col" class="num">수지 함량</th>
+                  <th scope="col">상태</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">2001년</th>
+                  <td>베트남 카호아</td>
+                  <td class="num">64.2%</td>
+                  <td>열매 · 매진 임박</td>
+                </tr>
+                <tr>
+                  <th scope="row">2012년</th>
+                  <td>인도네시아 리아우</td>
+                  <td class="num">51.8%</td>
+                  <td>침향 절편 · 소량</td>
+                </tr>
+                <tr>
+                  <th scope="row">2024년</th>
+                  <td>캄보디아 프놈펜 인근</td>
+                  <td class="num">47.3%</td>
+                  <td>숙성 중 · 비매품</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="aging-note muted">
+            수지 함량: 에탄올 용출법 실측. 열매(초험)는 기증용으로만 남겨둡니다.
+          </p>
+        </div>
+      </section>
+
+      <!--
+        아카이브 — 세 개의 물건. 사진 없는 목록.
+        종이의 물성을 믿고 글자로만 판다(R2: 텍스트가 상품).
+      -->
+      <section id="collection" class="section" aria-labelledby="collection-h">
+        <div class="wrap">
+          <h2 id="collection-h">지금 만질 수 있는 것</h2>
+          <ol class="collection">
+            <li class="item reveal">
+              <div class="item-text">
+                <h3>자연 침향 절편</h3>
+                <p>2001년 입목 · 수지 64.2% · 10g</p>
+              </div>
+              <p class="item-price">180,000원</p>
+            </li>
+            <li class="item reveal" style="--delay: 80ms">
+              <div class="item-text">
+                <h3>백단 침 향</h3>
+                <p>인도 마이소르 노목 · 20g · 연소 45분</p>
+              </div>
+              <p class="item-price">42,000원</p>
+            </li>
+            <li class="item reveal" style="--delay: 160ms">
+              <div class="item-text">
+                <h3>침향 인엽</h3>
+                <p>리아우산 · 2012년 입목 · 3g</p>
+              </div>
+              <p class="item-price">96,000원</p>
+            </li>
+          </ol>
+          <p class="muted collection-note">
+            모든 물건은 삼청동 아카이브룸에서 직접 내어드립니다. 향을 맡아 보고
+            정하시면 됩니다 — 예약제이며 회당 한 분만 들어갑니다.
+          </p>
+        </div>
+      </section>
+
+      <!-- 방문 — 마지막 섹션이 푸터 역할 -->
+      <section id="visit" class="section visit" aria-labelledby="visit-h">
+        <div class="wrap visit-grid">
+          <div>
+            <h2 id="visit-h">삼청동, 예약제</h2>
+            <address>
+              서울 종로구 삼청로 00길 00<br />
+              경복궁역 5번 출구에서 도보 6분
+            </address>
+          </div>
+          <div class="visit-info">
+            <dl>
+              <div>
+                <dt>예약</dt>
+                <dd>화–토 · 11:00, 14:00, 16:00 회당 50분</dd>
+              </div>
+              <div>
+                <dt>문의</dt>
+                <dd><a class="link" href="mailto:archive@hyang.kr">archive@hyang.kr</a></dd>
+              </div>
+            </dl>
+          </div>
+          <p class="vertical visit-mark">향연 享煙</p>
+        </div>
+      </section>
+    </main>
+
+    <script>
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/hyang-incense/styles/main.css b/apps/site/public/work/hyang-incense/styles/main.css
new file mode 100644
index 0000000..6781e09
--- /dev/null
+++ b/apps/site/public/work/hyang-incense/styles/main.css
@@ -0,0 +1,447 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   향연 — quiet-luxury. 한지 위의 장부.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* 한지 그레인 — 본문 뒤 전면, 알파 0.05. 이 페이지의 유일한 재질 효과 */
+.paper {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+body > *:not(.paper) {
+  position: relative;
+  z-index: 2;
+}
+
+:where(h1, h2, h3) {
+  font-family: var(--font-display);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.005em;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+h3 {
+  font-size: var(--step-1);
+}
+
+:where(p, li, dd, dt, th, td, address, figcaption) {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+.muted {
+  color: var(--ink-muted);
+}
+a {
+  color: inherit;
+}
+.link {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  transition: border-color var(--dur-quick) var(--ease-soft);
+}
+.link:hover {
+  border-color: var(--accent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* 세로쓰기 — 이 스튜디오의 물성 어휘. 목요일의 화원과 같은 결, 다른 용도 */
+.vertical {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  letter-spacing: 0.3em;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 90%, transparent);
+  backdrop-filter: blur(6px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  font-weight: 600;
+  text-decoration: none;
+}
+.wordmark .han {
+  color: var(--ink-muted);
+  font-weight: 400;
+  font-size: var(--step-0);
+  margin-left: var(--space-1);
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+
+/* ── 히어로 ───────────────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-8) var(--space-7);
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: var(--space-7) var(--space-6);
+  align-items: start;
+}
+.hero-kicker {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  letter-spacing: 0.14em;
+  margin-bottom: var(--space-5);
+}
+.lead {
+  max-width: 30em;
+}
+.hero-text .lead {
+  margin-top: var(--space-5);
+}
+.hero-actions {
+  margin-top: var(--space-6);
+}
+.btn {
+  display: inline-block;
+  border: 1px solid var(--ink);
+  color: var(--ink);
+  text-decoration: none;
+  padding: 0.8rem 2rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft),
+    color var(--dur-quick) var(--ease-soft);
+}
+.btn:hover {
+  background: var(--ink);
+  color: var(--surface);
+}
+
+.hero-photo {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto auto;
+  gap: var(--space-4);
+  justify-content: end;
+  align-items: start;
+}
+.hero-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.hero-photo figcaption {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  height: 14rem;
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+
+/* ── 향목 (2단) ───────────────────────────────────────────────────────── */
+
+.two {
+  display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.two-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.two-photo figcaption {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+.two-text p + p {
+  margin-top: var(--space-4);
+}
+.two-text .muted {
+  margin-top: var(--space-4);
+}
+
+/* ── 숙성 장부 ────────────────────────────────────────────────────────── */
+
+.aging-head {
+  max-width: 36em;
+  margin-bottom: var(--space-5);
+}
+.aging-head p {
+  margin-top: var(--space-3);
+}
+.table-wrap {
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+thead th {
+  text-align: left;
+  font-weight: 500;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--ink-faint);
+}
+tbody th {
+  font-family: var(--font-display);
+  font-weight: 500;
+  text-align: left;
+}
+tbody td,
+tbody th {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  vertical-align: baseline;
+}
+.num {
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+.aging-note {
+  margin-top: var(--space-3);
+  font-size: var(--step--1);
+}
+
+/* ── 아카이브 목록 ────────────────────────────────────────────────────── */
+
+.collection {
+  list-style: none;
+  margin-top: var(--space-5);
+  padding: 0;
+  border-top: 1px solid var(--line);
+}
+.item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-4);
+  padding-block: var(--space-4);
+  border-bottom: 1px solid var(--line);
+}
+.item h3 {
+  font-size: var(--step-1);
+}
+.item p {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  margin-top: var(--space-1);
+}
+.item-price {
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  white-space: nowrap;
+}
+.collection-note {
+  margin-top: var(--space-4);
+  max-width: 34em;
+}
+
+/* ── 방문 ─────────────────────────────────────────────────────────────── */
+
+.visit {
+  border-top: 1px solid var(--line);
+}
+.visit-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+}
+.visit address {
+  font-style: normal;
+  margin-top: var(--space-3);
+  color: var(--ink-muted);
+}
+.visit-info dl {
+  display: grid;
+  gap: var(--space-3);
+}
+.visit-info dt {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.visit-info dd {
+  margin-top: 2px;
+}
+.visit-mark {
+  font-family: var(--font-display);
+  color: var(--ink-faint);
+  font-size: var(--step--1);
+  height: 11rem;
+}
+
+/* ── 등장 모션 — 다른 페이지보다 느리다 ──────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 16px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-grid,
+  .two {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .hero-photo {
+    max-width: 24rem;
+    grid-template-columns: 1fr auto;
+    justify-content: start;
+  }
+  .visit-grid {
+    grid-template-columns: 1fr;
+  }
+  .visit-mark {
+    display: none;
+  }
+  .hero {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+}
diff --git a/apps/site/public/work/hyang-incense/styles/tokens.css b/apps/site/public/work/hyang-incense/styles/tokens.css
new file mode 100644
index 0000000..7b196a0
--- /dev/null
+++ b/apps/site/public/work/hyang-incense/styles/tokens.css
@@ -0,0 +1,53 @@
+/* ==========================================================================
+   향연 (享煙) — 디자인 토큰
+   프리셋: quiet-luxury
+   컨셉 한 문장: 한지 위의 장부 — 여백이 주인공이고 연기 한 줄기가 흔적이다.
+   레퍼런스: 방향은 dogfood-incense(단, 그 파일의 6축 수치는 audit-references.md
+            에서 날조로 판명 — 토큰 근거로 쓰지 않는다). 사이트 선택(정향·아카이브
+            계열의 절제)만 방향 앵커로 쓰고, 값은 브리프에서 다시 정했다.
+   하지 않은 것: 스티커형 상품 카드, 영어 eyebrow, 배경 음영 그라디언트,
+               숫자 카운트업. 이유: 기록물의 권위는 고요함에서 온다.
+   ========================================================================== */
+
+:root {
+  /* 타입 — 최대(60px) ÷ 본문(17px) ≈ 3.5배. 본문을 17px로 — 천천히 읽히는 페이지 */
+  --step--1: 0.8125rem;                              /* 13px — 캡션 */
+  --step-0: 1.0625rem;                               /* 17px — 본문 */
+  --step-1: 1.25rem;                                 /* 20px — 소제목 */
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);/* 28px — 섹션 표제 */
+  --step-3: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); /* 60px — 디스플레이 */
+
+  --leading-tight: 1.3;
+  --leading-normal: 1.9;
+
+  --font-display: "MaruBuri", serif;
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+
+  /* 색 — 한지 2단계 + 잉크 3단계 + 적갈 1. 정확한 유약색이 아니라 '건조한 종이' */
+  --surface: #f6f2e9;
+  --surface-raised: #efe9dc;
+  --ink: #2b2724;
+  --ink-muted: #6d655c;
+  --ink-faint: #9a9083;
+  --line: #ddd4c3;
+  --accent: #7c3b24;      /* 적갈 — 잉크가 아니라 인주의 위험한 사촌 */
+  --accent-hover: #5f2c1a;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+  --space-6: 4rem;
+  --space-7: 6.5rem;
+  --space-8: clamp(5rem, 3.4rem + 6vw, 10rem);  /* 이 페이지의 여백은 다른 페이지보다 깊다 */
+
+  --radius: 2px;
+
+  --container: 1040px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 560ms;      /* 느린 페이지 — 등장도 느리게 */
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/lumina-optics/assets/lens-section.webp b/apps/site/public/work/lumina-optics/assets/lens-section.webp
new file mode 100644
index 0000000..0dfa82b
Binary files /dev/null and b/apps/site/public/work/lumina-optics/assets/lens-section.webp differ
diff --git a/apps/site/public/work/lumina-optics/assets/prism-bench.webp b/apps/site/public/work/lumina-optics/assets/prism-bench.webp
new file mode 100644
index 0000000..85268b7
Binary files /dev/null and b/apps/site/public/work/lumina-optics/assets/prism-bench.webp differ
diff --git a/apps/site/public/work/lumina-optics/index.html b/apps/site/public/work/lumina-optics/index.html
new file mode 100644
index 0000000..9288a45
--- /dev/null
+++ b/apps/site/public/work/lumina-optics/index.html
@@ -0,0 +1,427 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Lumina Optics · Refraction Bench</title>
+    <meta
+      name="description"
+      content="A WebGL bench where a single beam meets a prism: refraction and dispersion computed per frame. Drag the prism, change the index."
+    />
+    <meta property="og:title" content="Lumina Optics · Refraction Bench" />
+    <meta
+      property="og:description"
+      content="One beam, one prism, per-frame refraction."
+    />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#101214" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <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='%23101214'/%3E%3Cpath d='M6 16h8m8 0h4M14 16l10-7v14z' fill='none' stroke='%23BFE8EE' stroke-width='1.4'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">Skip to main content</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">lumina<span class="wordmark-dot">·</span>optics</a>
+        <nav class="nav" aria-label="Sections">
+          <a href="#bench">Bench</a>
+          <a href="#anatomy">Anatomy</a>
+          <a href="#mtf">MTF</a>
+          <a href="#contact">Contact</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        The bench. The product is light behaviour, so the hero IS the instrument:
+        one beam, one prism, per-frame refraction. Drag rotates; sliders change
+        the index and the dispersion — they are the two honest knobs a bench
+        has. Everything degrades to a static photograph.
+      -->
+      <section id="bench" class="hero" aria-labelledby="hero-h">
+        <div class="bench-stage reveal">
+          <canvas
+            id="gl"
+            aria-label="Interactive prism: a white beam enters from the left and exits as a spectrum. Drag to rotate the prism."
+          ></canvas>
+          <img
+            class="bench-fallback"
+            src="./assets/prism-bench.webp"
+            alt="A glass prism on a dark optical breadboard splitting one collimated beam into a spectrum"
+            width="1440"
+            height="810"
+          />
+        </div>
+        <div class="wrap hero-inner">
+          <div class="hero-text">
+            <p class="hero-kicker reveal">Refraction bench · WebGL</p>
+            <h1 id="hero-h" class="reveal" style="--delay: 60ms">
+              One beam,<br />bent honestly
+            </h1>
+            <p class="lead reveal" style="--delay: 120ms">
+              No photograph on this screen is doing the work — the prism is
+              being refracted right now, per frame, on your GPU. Drag it. Change
+              the index. The spectrum you see is the same arithmetic lens
+              designers use, minus the glasses.
+            </p>
+          </div>
+          <div class="hud reveal" style="--delay: 160ms">
+            <div class="hud-row">
+              <label for="ior">Index of refraction <output id="ior-out" for="ior">1.52</output></label>
+              <input type="range" id="ior" min="1.45" max="2.20" step="0.01" value="1.52" />
+            </div>
+            <div class="hud-row">
+              <label for="disp">Dispersion (Abbe ↓) <output id="disp-out" for="disp">0.18</output></label>
+              <input type="range" id="disp" min="0" max="0.6" step="0.01" value="0.18" />
+            </div>
+            <p class="hud-note" id="hud-note">Drag the prism to rotate · beam is collimated at 632.8 nm reference</p>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        Anatomy — cut lens photography. Real glass, not renders.
+      -->
+      <section id="anatomy" class="section" aria-labelledby="anatomy-h">
+        <div class="wrap two">
+          <figure class="two-photo reveal">
+            <img
+              src="./assets/lens-section.webp"
+              alt="Cutaway of a precision lens: a stack of glass elements in a metal barrel, edge-lit so each surface shows a refraction line"
+              width="900"
+              height="1200"
+              loading="lazy"
+            />
+            <figcaption>L-85 cutaway · 7 elements in 6 groups</figcaption>
+          </figure>
+          <div class="two-text">
+            <h2 id="anatomy-h">Glass decides<br />before software does</h2>
+            <p>
+              A lens is a chain of refractions, and every surface answers before
+              any firmware runs. Our L-85 uses two low-dispersion elements to
+              keep the spectrum you just dragged from fanning out across the
+              frame — dispersion corrected in glass, not in a profile.
+            </p>
+            <p class="muted">
+              The cutaway above is a physical section, milled for measurement.
+              Element count and spacing are measured from it, not from the
+              drawing.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        MTF — the only curve that argues. Static, thin, honest:
+        measured at infinity, full aperture, both field directions.
+      -->
+      <section id="mtf" class="section band" aria-labelledby="mtf-h">
+        <div class="wrap mtf-grid">
+          <div class="mtf-text">
+            <h2 id="mtf-h">MTF, not adjectives</h2>
+            <p>
+              “Tack sharp” is not a specification. Contrast transfer at given
+              line pairs per millimetre is. These curves are measured on an
+              optical bench at full aperture — sagittal and meridional, out to
+              the corner.
+            </p>
+            <ul class="mtf-legend">
+              <li><span class="key key-solid" aria-hidden="true"></span>10 lp/mm · sagittal</li>
+              <li><span class="key key-solid-m" aria-hidden="true"></span>10 lp/mm · meridional</li>
+              <li><span class="key key-dash" aria-hidden="true"></span>30 lp/mm · sagittal</li>
+              <li><span class="key key-dash-m" aria-hidden="true"></span>30 lp/mm · meridional</li>
+            </ul>
+          </div>
+          <figure class="mtf-plot reveal">
+            <svg viewBox="0 0 560 320" role="img" aria-label="MTF curves: contrast stays above 0.85 at 10 lp/mm across the field; at 30 lp/mm it falls from 0.75 at center to 0.42 at the corner.">
+              <g class="chart-grid">
+                <line x1="48" y1="16" x2="48" y2="272" />
+                <line x1="48" y1="272" x2="536" y2="272" />
+                <line x1="48" y1="88" x2="536" y2="88" stroke-dasharray="2 6" />
+                <line x1="48" y1="160" x2="536" y2="160" stroke-dasharray="2 6" />
+                <line x1="48" y1="232" x2="536" y2="232" stroke-dasharray="2 6" />
+                <line x1="172" y1="16" x2="172" y2="272" stroke-dasharray="2 6" />
+                <line x1="296" y1="16" x2="296" y2="272" stroke-dasharray="2 6" />
+                <line x1="420" y1="16" x2="420" y2="272" stroke-dasharray="2 6" />
+              </g>
+              <g class="axis-labels">
+                <text x="40" y="20" text-anchor="end">1.0</text>
+                <text x="40" y="92" text-anchor="end">0.75</text>
+                <text x="40" y="164" text-anchor="end">0.5</text>
+                <text x="40" y="236" text-anchor="end">0.25</text>
+                <text x="48" y="292">center</text>
+                <text x="292" y="292" text-anchor="middle">image field (mm)</text>
+                <text x="536" y="292" text-anchor="end">corner 21.6</text>
+              </g>
+              <!-- 10 lp/mm sagittal: high, gentle fall -->
+              <polyline class="mtf mtf-10s" points="48,32 172,36 296,44 420,60 536,76" />
+              <!-- 10 lp/mm meridional -->
+              <polyline class="mtf mtf-10m" points="48,34 172,40 296,52 420,72 536,96" />
+              <!-- 30 lp/mm sagittal -->
+              <polyline class="mtf mtf-30s" points="48,84 172,96 296,120 420,160 536,196" />
+              <!-- 30 lp/mm meridional -->
+              <polyline class="mtf mtf-30m" points="48,90 172,108 296,140 420,186 536,232" />
+            </svg>
+            <figcaption>L-85 · f/1.8 · infinity focus · bench-measured 2026-07</figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <!--
+        Spec — with conditions.
+      -->
+      <section class="section" aria-labelledby="spec-h">
+        <div class="wrap">
+          <h2 id="spec-h" class="reveal">Specification</h2>
+          <div class="table-wrap reveal" style="--delay: 80ms">
+            <table>
+              <caption class="sr-only">L-85 specification — item, value, condition</caption>
+              <thead>
+                <tr>
+                  <th scope="col">Item</th>
+                  <th scope="col" class="num">Value</th>
+                  <th scope="col">Condition</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr><th scope="row">Focal length</th><td class="num">85 mm</td><td>nominal · ±1.5% at infinity</td></tr>
+                <tr><th scope="row">Aperture</th><td class="num">f/1.8 – f/16</td><td>9-blade · near-circular</td></tr>
+                <tr><th scope="row">Elements</th><td class="num">7 in 6</td><td>2 LD · measured from cutaway</td></tr>
+                <tr><th scope="row">Close focus</th><td class="num">0.62 m</td><td>1:7.2 magnification</td></tr>
+                <tr><th scope="row">Filter</th><td class="num">Ø 62 mm</td><td>brass, front-threaded</td></tr>
+                <tr><th scope="row">Weight</th><td class="num">438 g</td><td>without caps, with hood</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- Contact -->
+      <section id="contact" class="section band contact" aria-labelledby="contact-h">
+        <div class="wrap contact-grid">
+          <h2 id="contact-h">Bench visits</h2>
+          <p>
+            We measure loaner samples for free and publish the curves —
+            manufacturers welcome or not. Bench time and MTF requests:
+          </p>
+          <a class="btn" href="mailto:bench@lumina.optics">bench@lumina.optics</a>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>lumina optics</p>
+        <p class="foot-meta">measurements reproducible on request · bench cal. 2026-06</p>
+      </div>
+    </footer>
+
+    <script type="module">
+      /*
+        Refraction bench — three.js, one prism, two honest uniforms.
+        Budget note: three.module.js ≈ 165KB gzip. 예산 상향 — 이 페이지의
+        제품이 WebGL 자체다(데모 브리프 예산 상향 허용).
+        폴백: WebGL 실패 시 사진이 보이고 캔버스는 뜨지 않는다(이미 마크업에 있음).
+      */
+      const canvas = document.getElementById("gl");
+      const fallback = document.querySelector(".bench-fallback");
+      const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+      let gl = null;
+      try {
+        gl = canvas.getContext("webgl2", { antialias: true, alpha: true });
+      } catch (e) { /* fall through */ }
+
+      if (!gl) {
+        canvas.remove();
+        document.getElementById("hud-note").textContent =
+          "WebGL unavailable — showing the bench photograph instead.";
+      } else {
+        fallback.remove();
+        const THREE = await import("https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js");
+
+        const renderer = new THREE.WebGLRenderer({ canvas, context: gl, antialias: true, alpha: true });
+        renderer.setClearColor(0x000000, 0);
+        const DPR = Math.min(devicePixelRatio || 1, 1.5);
+        renderer.setPixelRatio(DPR);
+
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(32, 1, 0.1, 50);
+        camera.position.set(0, 0, 9);
+
+        // ----- prism: triangular cross-section (CylinderGeometry, 3 segments)
+        const prismGeo = new THREE.CylinderGeometry(2.1, 2.1, 2.6, 3, 1, false);
+        prismGeo.rotateX(Math.PI / 2); // axis toward camera
+        prismGeo.rotateZ(Math.PI / 2); // flat edge up to the beam
+
+        const uniforms = {
+          uTime:   { value: 0 },
+          uIor:    { value: 1.52 },
+          uDisp:   { value: 0.18 },
+        };
+
+        const prismMat = new THREE.ShaderMaterial({
+          uniforms,
+          transparent: true,
+          vertexShader: /* glsl */`
+            varying vec3 vN;
+            varying vec3 vView;
+            void main() {
+              vec4 mv = modelViewMatrix * vec4(position, 1.0);
+              vN = normalize(normalMatrix * normal);
+              vView = normalize(-mv.xyz);
+              gl_Position = projectionMatrix * mv;
+            }`,
+          fragmentShader: /* glsl */`
+            precision highp float;
+            varying vec3 vN;
+            varying vec3 vView;
+            uniform float uIor;
+            uniform float uDisp;
+
+            // wavelength ramp: violet → cyan → yellow → red
+            vec3 spectrum(float t) {
+              t = clamp(t, 0.0, 1.0);
+              return clamp(
+                vec3(
+                  smoothstep(0.30, 0.00, t) + smoothstep(0.70, 1.00, t),
+                  smoothstep(0.00, 0.35, t) - smoothstep(0.60, 1.00, t),
+                  smoothstep(0.00, 0.30, t) - smoothstep(0.45, 0.75, t)
+                ), 0.0, 1.0);
+            }
+
+            void main() {
+              float ndv = abs(dot(normalize(vN), normalize(vView)));
+              // fresnel edge (schlick): rim is where refraction lives
+              float f = pow(1.0 - ndv, 3.0);
+              // refraction deflection grows with index
+              float bend = (uIor - 1.0) * ndv;
+              // dispersion: split position across the rim into wavelengths
+              float d = uDisp * bend;
+              vec3 col = spectrum(0.5 + (1.0 - ndv) * (0.6 + d * 4.0));
+              // glass body: near-black with faint interior glow
+              vec3 body = vec3(0.02, 0.025, 0.03) * (0.4 + ndv);
+              vec3 rim = col * f * 1.35;
+              float alpha = clamp(f * 0.95 + 0.06, 0.0, 1.0);
+              gl_FragColor = vec4(body + rim, alpha);
+            }`,
+        });
+        const prism = new THREE.Mesh(prismGeo, prismMat);
+        scene.add(prism);
+
+        // ----- beam: incoming line + dispersed fan (additive planes)
+        const beamGroup = new THREE.Group();
+        const mkBeam = (w, h, color1, color2, op) => {
+          const m = new THREE.Mesh(
+            new THREE.PlaneGeometry(w, h),
+            new THREE.ShaderMaterial({
+              transparent: true,
+              depthWrite: false,
+              blending: THREE.AdditiveBlending,
+              uniforms: { uOp: { value: op }, uC1: { value: new THREE.Color(color1) }, uC2: { value: new THREE.Color(color2) } },
+              vertexShader: `varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }`,
+              fragmentShader: `
+                varying vec2 vUv; uniform float uOp; uniform vec3 uC1; uniform vec3 uC2;
+                void main(){
+                  float a = smoothstep(0.0, 0.12, vUv.x) * smoothstep(1.0, 0.88, vUv.x);
+                  float b = smoothstep(0.0, 0.5, vUv.y) * smoothstep(1.0, 0.5, vUv.y);
+                  vec3 c = mix(uC1, uC2, vUv.x);
+                  gl_FragColor = vec4(c, a * b * uOp);
+                }`,
+            })
+          );
+          return m;
+        };
+        const beamIn = mkBeam(9, 0.10, 0xdfe8ec, 0xffffff, 0.55);
+        beamIn.position.set(0, 1.45, -0.2);
+        beamGroup.add(beamIn);
+        const fan = mkBeam(9, 1.7, 0x8fd8e8, 0xf2b060, 0.30);
+        fan.position.set(-0.4, 0.35, -0.25);
+        fan.rotation.z = 0.085;
+        beamGroup.add(fan);
+        scene.add(beamGroup);
+
+        // ----- interaction
+        let dragging = false, lastX = 0, vel = 0.0016, rot = 0;
+        canvas.addEventListener("pointerdown", (e) => { dragging = true; lastX = e.clientX; canvas.setPointerCapture(e.pointerId); });
+        canvas.addEventListener("pointermove", (e) => {
+          if (!dragging) return;
+          const dx = e.clientX - lastX;
+          lastX = e.clientX;
+          rot += dx * 0.006;
+          vel = dx * 0.0006;
+        });
+        const end = () => (dragging = false);
+        canvas.addEventListener("pointerup", end);
+        canvas.addEventListener("pointercancel", end);
+        canvas.style.touchAction = "none";
+
+        const iorEl = document.getElementById("ior");
+        const dispEl = document.getElementById("disp");
+        const iorOut = document.getElementById("ior-out");
+        const dispOut = document.getElementById("disp-out");
+        const bind = (el, out, uni, fmt) =>
+          el.addEventListener("input", () => {
+            uni.value = parseFloat(el.value);
+            out.textContent = fmt(uni.value);
+          });
+        bind(iorEl, iorOut, uniforms.uIor, (v) => v.toFixed(2));
+        bind(dispEl, dispOut, uniforms.uDisp, (v) => v.toFixed(2));
+
+        // ----- sizing
+        const stage = canvas.parentElement;
+        function fit() {
+          const r = stage.getBoundingClientRect();
+          const h = Math.max(320, Math.min(r.height, 760));
+          renderer.setSize(r.width, h, false);
+          camera.aspect = r.width / h;
+          camera.updateProjectionMatrix();
+        }
+        fit();
+        new ResizeObserver(fit).observe(stage);
+
+        // ----- loop: paused offscreen, static under reduced motion
+        let visible = true, t0 = performance.now();
+        const io = new IntersectionObserver((en) => { visible = en[0].isIntersecting; });
+        io.observe(canvas);
+
+        function frame() {
+          if (!visible) { requestAnimationFrame(frame); return; }
+          const t = (performance.now() - t0) / 1000;
+          uniforms.uTime.value = t;
+          if (!dragging) { vel *= 0.98; rot += Math.max(0.0016, Math.abs(vel)) * Math.sign(vel || 1); }
+          prism.rotation.z = rot;
+          beamGroup.rotation.z = Math.sin(t * 0.4) * 0.01;
+          renderer.render(scene, camera);
+          if (!reduced) requestAnimationFrame(frame);
+        }
+        frame(); // reduced-motion: renders exactly one static frame
+      }
+
+      const io2 = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io2.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/lumina-optics/styles/main.css b/apps/site/public/work/lumina-optics/styles/main.css
new file mode 100644
index 0000000..0204a93
--- /dev/null
+++ b/apps/site/public/work/lumina-optics/styles/main.css
@@ -0,0 +1,477 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   Lumina Optics — 광학 시험대. 색은 캔버스 안에서만.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+  color-scheme: dark;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2) {
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+:where(p, th, td, figcaption, li) {
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+.lead {
+  color: var(--ink-muted);
+  max-width: 36em;
+}
+.muted {
+  color: var(--ink-muted);
+}
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-family: var(--font-mono);
+  font-size: var(--step-1);
+  font-weight: 500;
+  text-decoration: none;
+  letter-spacing: -0.02em;
+}
+.wordmark-dot {
+  color: var(--accent-stroke);
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent-stroke);
+}
+
+/* ── 시험대(히어로) — 캔버스와 본문은 세로로 완전히 분리.
+   R2 원칙(design.md): 3D 위에 본문을 얹지 않는다. ─────────────────────── */
+
+.hero {
+  border-bottom: 1px solid var(--line);
+}
+.bench-stage {
+  position: relative;
+  height: clamp(320px, 56vh, 560px);
+  background:
+    radial-gradient(80% 90% at 50% 30%, rgba(127, 185, 196, 0.05), transparent 60%),
+    var(--surface);
+  border-bottom: 1px solid var(--line);
+}
+#gl,
+.bench-fallback {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+#gl {
+  cursor: grab;
+}
+#gl:active {
+  cursor: grabbing;
+}
+.hero-inner {
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+  padding-block: var(--space-6);
+}
+.hero-kicker {
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--accent-stroke);
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-3);
+}
+.hero .lead {
+  margin-top: var(--space-3);
+}
+.hud {
+  background: color-mix(in srgb, var(--surface) 78%, transparent);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: var(--space-4);
+  display: grid;
+  gap: var(--space-3);
+}
+.hud-row label {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.hud-row output {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+input[type="range"] {
+  width: 100%;
+  accent-color: var(--accent-stroke);
+}
+.hud-note {
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+
+/* ── 단면 2단 ─────────────────────────────────────────────────────────── */
+
+.two {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.two-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.two-photo figcaption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+.two-text p + p {
+  margin-top: var(--space-4);
+}
+
+/* ── MTF ──────────────────────────────────────────────────────────────── */
+
+.mtf-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: center;
+}
+.mtf-text p {
+  margin-top: var(--space-3);
+  color: var(--ink-muted);
+  max-width: 30em;
+}
+.mtf-legend {
+  list-style: none;
+  padding: 0;
+  margin-top: var(--space-4);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2) var(--space-4);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.key {
+  display: inline-block;
+  width: 16px;
+  height: 0;
+  border-top: 2px solid var(--accent-stroke);
+  margin-right: var(--space-2);
+  vertical-align: middle;
+}
+.key-solid {
+  border-top: 2.5px solid var(--accent-stroke);
+}
+.key-solid-m {
+  border-top: 2.5px solid var(--ink-faint);
+}
+.key-dash {
+  border-top: 2px dashed var(--accent-stroke);
+}
+.key-dash-m {
+  border-top: 2px dashed var(--ink-faint);
+}
+.mtf-plot svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.chart-grid line {
+  stroke: var(--line);
+  stroke-width: 1;
+}
+.chart-grid line:first-child,
+.chart-grid line:nth-child(2) {
+  stroke: var(--line-strong);
+}
+.axis-labels text {
+  font-size: 12px;
+  fill: var(--ink-faint);
+}
+.mtf {
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.mtf-10s {
+  stroke: var(--accent-stroke);
+}
+.mtf-10m {
+  stroke: var(--ink-faint);
+}
+.mtf-30s {
+  stroke: var(--accent-stroke);
+  stroke-dasharray: 6 5;
+}
+.mtf-30m {
+  stroke: var(--ink-faint);
+  stroke-dasharray: 6 5;
+}
+.mtf-plot figcaption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+
+/* ── 사양 표 ──────────────────────────────────────────────────────────── */
+
+.table-wrap {
+  margin-top: var(--space-4);
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+thead th {
+  text-align: left;
+  font-weight: 500;
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--line-strong);
+}
+tbody th {
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+}
+tbody td,
+tbody th {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  vertical-align: baseline;
+}
+tbody td:not(.num) {
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+.num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+
+/* ── 연락 ─────────────────────────────────────────────────────────────── */
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--space-4) var(--space-7);
+  align-items: center;
+}
+.contact-grid p {
+  color: var(--ink-muted);
+  max-width: 34em;
+}
+.btn {
+  display: inline-block;
+  border: 1px solid var(--accent-stroke);
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.7rem 1.4rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft),
+    color var(--dur-quick) var(--ease-soft);
+}
+.btn:hover {
+  background: var(--accent-stroke);
+  color: var(--surface);
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-4);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+}
+.foot-meta {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 12px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-inner {
+    position: static;
+    grid-template-columns: 1fr;
+    padding-block: var(--space-5);
+  }
+  .bench-stage {
+    height: clamp(300px, 48vh, 460px);
+  }
+  .two,
+  .mtf-grid,
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .section {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/apps/site/public/work/lumina-optics/styles/tokens.css b/apps/site/public/work/lumina-optics/styles/tokens.css
new file mode 100644
index 0000000..ec9e5e6
--- /dev/null
+++ b/apps/site/public/work/lumina-optics/styles/tokens.css
@@ -0,0 +1,57 @@
+/* ==========================================================================
+   Lumina Optics — 디자인 토큰
+   프리셋: refraction / WebGL instrument
+   컨셉 한 문장: 광학 시험대 — 유일한 색은 프리즘이 스스로 만드는 스펙트럼.
+   레퍼런스: 방향 앵커 dogfood-optics(광학업종의 데이터 노출). 그 파일의 수치는
+            audit-references.md 날조 판명 — 토큰은 브리프 재정의. UI는 무채색에
+            가깝게: 색은 캔버스 안에서만 정당하다(design.md R2 원리와 같은 결).
+   성능 예산: **상향 명시** — three.module.js ≈165KB(gzip) 지연 import.
+            이 페이지의 제품이 WebGL 데모 자체이므로 데모 예산 상향 규칙 적용.
+            UI JS(슬라이더 바인딩)는 인라인 <1KB.
+   하지 않은 것: 스펙텔러 그라디언트 배경, 'unrivaled clarity' 카피,
+               3열 카드. 이유: 광학은 곡선으로 말한다.
+   ========================================================================== */
+
+:root {
+  /* 타입 — 최대(58px) ÷ 본문(16px) ≈ 3.6배 */
+  --step--1: 0.8125rem;
+  --step-0: 1rem;
+  --step-1: 1.1875rem;
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
+  --step-3: clamp(2.125rem, 1.4rem + 3.4vw, 3.625rem);
+
+  --leading-tight: 1.24;
+  --leading-normal: 1.72;
+
+  --font-body: "IBM Plex Sans", -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* 색 — 시험실 무채색. 살짝 청록 기운의 액센트는 '레이저 라인' 하나뿐. */
+  --surface: #101214;
+  --surface-raised: #15181b;
+  --ink: #e8ecee;
+  --ink-muted: #9ba4a9;
+  --ink-faint: #6b7479;
+  --line: #23272b;
+  --line-strong: #394046;
+  --accent: #bfe8ee;       /* 레이저 라인(밝게 — 텍스트용) */
+  --accent-stroke: #7fb9c4;
+
+  --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, 8.5rem);
+
+  --radius: 2px;
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 420ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/muwol-coffee/assets/beans-hero.webp b/apps/site/public/work/muwol-coffee/assets/beans-hero.webp
new file mode 100644
index 0000000..96a3a57
Binary files /dev/null and b/apps/site/public/work/muwol-coffee/assets/beans-hero.webp differ
diff --git a/apps/site/public/work/muwol-coffee/assets/pourover.webp b/apps/site/public/work/muwol-coffee/assets/pourover.webp
new file mode 100644
index 0000000..141bfa6
Binary files /dev/null and b/apps/site/public/work/muwol-coffee/assets/pourover.webp differ
diff --git a/apps/site/public/work/muwol-coffee/index.html b/apps/site/public/work/muwol-coffee/index.html
new file mode 100644
index 0000000..21bda6a
--- /dev/null
+++ b/apps/site/public/work/muwol-coffee/index.html
@@ -0,0 +1,333 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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="#F4F4F0" />
+
+    <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/webfontworld/naver/MaruBuri.css"
+    />
+    <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&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <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='%23F4F4F0'/%3E%3Cpath d='M16 7a7 7 0 0 1 7 7h-7z' fill='%237A3E1D'/%3E%3Cpath d='M16 9a7 7 0 0 0-7 7h7z' fill='%23181B18'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23181B18' stroke-width='1.5'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">
+          무월 <span class="wordmark-han">霧月</span>
+        </a>
+        <nav class="nav" aria-label="섹션">
+          <a href="#scale">척도</a>
+          <a href="#ledger">원장</a>
+          <a href="#recipe">레시피</a>
+          <a href="#plan">구독</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        히어로 — R1(coffeecollective.dk): 가격을 첫 화면에서 숨기지 않는다.
+        문구만으로 시작하는 대신 이번 주 로스 사진 한 장과 원두 둘(값 포함)을 같이 둔다.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap hero-grid">
+          <div class="hero-text">
+            <p class="hero-label reveal">싱글오리진 로스터리 · 서울 서촌</p>
+            <h1 id="hero-h" class="reveal" style="--delay: 60ms">
+              취향은 형용사가 아니라<br />측정된 좌표입니다
+            </h1>
+            <p class="lead reveal" style="--delay: 120ms">
+              과일 향이 난다는 말로는 추출 온도를 정할 수 없습니다. 무월은 원두마다
+              산미와 단맛, 바디를 같은 척도로 측정해 적고, 생두를 얼마에 들였는지까지
+              공개합니다. 마셔보기 전에 판단할 수 있어야 원두 고르는 즐거움이 시작됩니다.
+            </p>
+            <div class="hero-actions reveal" style="--delay: 180ms">
+              <a class="btn" href="#plan">격주 구독 시작하기</a>
+              <p class="hero-note">격주 화요일 로스팅 출고 · 언제든 해지</p>
+            </div>
+          </div>
+
+          <figure class="hero-photo reveal" style="--delay: 100ms">
+            <img
+              src="./assets/beans-hero.webp"
+              alt="따뜻한 회색 리넨 위 질도기 그릇에 담긴 갓 볶은 원두와 놋쇠 스쿱"
+              width="900"
+              height="1200"
+              loading="eager"
+              fetchpriority="high"
+            />
+            <figcaption>이번 주 첫 로스 · 8월 19일</figcaption>
+          </figure>
+
+          <!-- 이번 주 원두 — 카드가 아니라 원장의 첫 두 줄 -->
+          <dl class="hero-beans reveal" style="--delay: 240ms">
+            <div class="bean-row">
+              <div>
+                <dt>에티오피아 구지 우라가</dt>
+                <dd class="bean-origin">워시드 · 해발 2,150m · 커핑 88.75</dd>
+              </div>
+              <dd class="bean-price"><span>100g</span> 8,500원</dd>
+            </div>
+            <div class="bean-row">
+              <div>
+                <dt>콜롬비아 엘 파라이소</dt>
+                <dd class="bean-origin">혐기발효 · 해발 1,930m · 커핑 91.20</dd>
+              </div>
+              <dd class="bean-price"><span>100g</span> 11,000원</dd>
+            </div>
+          </dl>
+        </div>
+      </section>
+
+      <!--
+        척도 — 향미 좌표계. 히어로의 계기판 노릇을 내려놓고
+        본문의 척도로 옮긴다. 눈금과 점만 남긴다.
+      -->
+      <section id="scale" class="section" aria-labelledby="scale-h">
+        <div class="wrap scale-grid">
+          <div class="scale-text">
+            <h2 id="scale-h">같은 척도로 잰<br />향미 좌표</h2>
+            <p>
+              같은 밝기로 볶아도 생두가 머금은 수분과 밀도에 따라 열은 다르게
+              들어갑니다. 그래서 무월은 색이 아니라 1차 팝핑 후 감률과 커핑 점수로
+              로트를 기록합니다.
+            </p>
+            <p class="muted">
+              좌표는 로트마다 다시 측정해 옮겨 적습니다. 지난 로트의 좌표와 지금이
+              같다고 말하지 않습니다.
+            </p>
+            <ul class="scale-legend" aria-label="좌표 범례">
+              <li><span class="key" aria-hidden="true"></span>우라가 G1 워시드</li>
+              <li><span class="key key-b" aria-hidden="true"></span>엘 파라이소 혐기발효</li>
+              <li><span class="key key-c" aria-hidden="true"></span>엘 소코로 마라카투라</li>
+            </ul>
+          </div>
+          <figure class="scale-plot reveal">
+            <svg
+              viewBox="0 0 520 340"
+              role="img"
+              aria-label="산미-바디 2차원 좌표. 우라가는 산미 높음, 엘 파라이소는 단맛 높음, 엘 소코로는 바디 높음."
+            >
+              <!-- 눈금 격자 -->
+              <g class="grid">
+                <line x1="56" y1="40" x2="56" y2="280" />
+                <line x1="56" y1="280" x2="500" y2="280" />
+                <line x1="56" y1="160" x2="500" y2="160" />
+                <line x1="278" y1="40" x2="278" y2="280" />
+                <line x1="167" y1="40" x2="167" y2="280" stroke-dasharray="2 6" />
+                <line x1="389" y1="40" x2="389" y2="280" stroke-dasharray="2 6" />
+                <line x1="56" y1="100" x2="500" y2="100" stroke-dasharray="2 6" />
+                <line x1="56" y1="220" x2="500" y2="220" stroke-dasharray="2 6" />
+              </g>
+              <!-- 축 이름 -->
+              <g class="axis-labels">
+                <text x="56" y="302">산미 →</text>
+                <text x="500" y="302" text-anchor="end">바디 →</text>
+                <text x="46" y="46" text-anchor="end">10.0</text>
+                <text x="46" y="286" text-anchor="end">0</text>
+              </g>
+              <!-- 로트 점 -->
+              <g class="points">
+                <circle cx="140" cy="62" r="5" />
+                <text x="140" y="46" text-anchor="middle">우라가 8.8</text>
+                <circle cx="252" cy="92" r="5" class="pt-b" />
+                <text x="252" y="76" text-anchor="middle">엘 파라이소 9.0</text>
+                <circle cx="430" cy="196" r="5" class="pt-c" />
+                <text x="430" y="180" text-anchor="middle">엘 소코로 8.6</text>
+              </g>
+            </svg>
+            <figcaption>8월 3주차 로트 실측 · 좌표는 주마다 다시 놓입니다</figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <!--
+        원장 — 이 페이지의 신뢰 장치 (R1: 거래 내역 공개가 이 업종의 스펙).
+        밴드를 살짝 눌러 표가 페이지의 중심임을 알린다.
+      -->
+      <section id="ledger" class="section band" aria-labelledby="ledger-h">
+        <div class="wrap">
+          <div class="ledger-head">
+            <h2 id="ledger-h">생두 매입 원장</h2>
+            <p class="muted">
+              농장에 돌아가는 돈이 얼마인지 보여주는 일이 스페셜티의 조건이라
+              생각합니다. 1kg당 매입가와 가공 방식까지 로트 단위로 남깁니다.
+            </p>
+          </div>
+          <div class="table-wrap reveal">
+            <table>
+              <caption class="sr-only">
+                원두별 생두 매입 원장 — 원두명, 생산자, 가공 방식, 매입가, 커핑 점수
+              </caption>
+              <thead>
+                <tr>
+                  <th scope="col">원두</th>
+                  <th scope="col">생산자</th>
+                  <th scope="col">가공</th>
+                  <th scope="col" class="num">매입가 (FOB/kg)</th>
+                  <th scope="col" class="num">커핑</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">에티오피아 구지 우라가</th>
+                  <td>하르소 콜루 세척장</td>
+                  <td>워시드 · 72시간 발효</td>
+                  <td class="num">$14.20</td>
+                  <td class="num">88.75</td>
+                </tr>
+                <tr>
+                  <th scope="row">콜롬비아 엘 파라이소</th>
+                  <td>디에고 사무엘 베르무데스</td>
+                  <td>혐기발효 · 열충격 2회</td>
+                  <td class="num">$26.50</td>
+                  <td class="num">91.20</td>
+                </tr>
+                <tr>
+                  <th scope="row">과테말라 엘 소코로</th>
+                  <td>후안 디에고 데 라 세르다</td>
+                  <td>전량 워시드</td>
+                  <td class="num">$16.80</td>
+                  <td class="num">89.00</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="ledger-note muted">
+            운임·통관·관세는 포함하지 않은 현지 출하가이며, 환율은 매입일 기준입니다.
+          </p>
+        </div>
+      </section>
+
+      <!--
+        레시피 — 사진과 사양. 사양은 목록의 주인공이 아니라 사진의 각주다.
+      -->
+      <section id="recipe" class="section" aria-labelledby="recipe-h">
+        <div class="wrap recipe-grid">
+          <figure class="recipe-photo reveal">
+            <img
+              src="./assets/pourover.webp"
+              alt="고핫물이 필터 백에 담긴 도자기 드리퍼로 얇은 물줄기로 들어가는 중"
+              width="900"
+              height="1200"
+              loading="lazy"
+            />
+            <figcaption>서촌 매장 · 오후 첫 잔</figcaption>
+          </figure>
+          <div class="recipe-text">
+            <h2 id="recipe-h">원두 18g, 물 288g</h2>
+            <p>
+              구독 패키지에는 원두 밀도에 맞춘 분쇄도와 주수 간격을 적은 카드 한 장이
+              들어갑니다. 드립의 변주는 그 다음 문제입니다.
+            </p>
+            <dl class="spec">
+              <div>
+                <dt>물 온도</dt>
+                <dd>93°C</dd>
+              </div>
+              <div>
+                <dt>분쇄도</dt>
+                <dd>코만단테 24딸</dd>
+              </div>
+              <div>
+                <dt>뜸 들이기</dt>
+                <dd>40초 · 물 40g</dd>
+              </div>
+              <div>
+                <dt>주수</dt>
+                <dd>3회 · 116g씩</dd>
+              </div>
+            </dl>
+            <p class="muted">
+              추출 시간은 2분 30초에서 3분 사이가 기준입니다. 그보다 빨리 흘러내리면
+              곱게 갈고, 늦으면 굵게 갑니다.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        구독 — 회색조에서 가장 어두운 블록. 이 페이지의 유일한 강한 면.
+        (1단계 회색조 위계 계획의 실행: CTA가 1위 덩어리)
+      -->
+      <section id="plan" class="section plan" aria-labelledby="plan-h">
+        <div class="wrap plan-grid">
+          <div class="plan-text">
+            <h2 id="plan-h">격주, 서로 다른 좌표의<br />원두 두 종</h2>
+            <p>
+              2주마다 화요일 아침, 산미형 한 종과 밸런스형 한 종(각 100g)을 볶어
+              보냅니다. 원두는 시음 후 남는 양이 없어 다음 주에 같은 로트를 못 드릴 수
+              있습니다.
+            </p>
+            <ul class="plan-list">
+              <li>원두별 추출 카드 동봉 — 분쇄도·온도·주수</li>
+              <li>아로마 밸브 틴케이스 첫 회 증정</li>
+              <li>출장·휴가 주는 앱에서 건너뛰기</li>
+            </ul>
+          </div>
+          <div class="plan-box">
+            <p class="plan-price">
+              <span>28,000원</span><span class="plan-unit">회당 · 배송비 포함</span>
+            </p>
+            <a class="btn btn-inverse" href="#plan">격주 구독 시작하기</a>
+            <p class="plan-note">200g(100g×2) · 첫 회는 다음 화요일에 출고됩니다</p>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>무월 로스터리 · 서울 종로구 옥인길 18</p>
+        <p class="muted">화요일 로스팅 · 목요일부터 토요일까지 문을 엽니다</p>
+        <p class="muted">roastery@muwol.kr</p>
+      </div>
+    </footer>
+
+    <script>
+      /* 목요일의 화원과 같은 문법 — 한 번 보이면 유지, 스크롤 이벤트 없음 */
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/muwol-coffee/styles/main.css b/apps/site/public/work/muwol-coffee/styles/main.css
new file mode 100644
index 0000000..8b85a96
--- /dev/null
+++ b/apps/site/public/work/muwol-coffee/styles/main.css
@@ -0,0 +1,560 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   무월 — quiet-commerce. 종이 원장의 문법.
+   레이아웃 → 재질 → 모션 순서로 읽힌다.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2) {
+  font-family: var(--font-display);
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.01em;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+
+:where(p, li, dd, dt, th, td, figcaption) {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  line-height: 1.75;
+  text-wrap: pretty;
+}
+
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+
+.muted {
+  color: var(--ink-muted);
+}
+
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 88%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+
+.wordmark {
+  font-family: var(--font-display);
+  font-size: var(--step-1);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-decoration: none;
+}
+.wordmark-han {
+  color: var(--ink-muted);
+  font-size: var(--step-0);
+  margin-left: var(--space-1);
+  font-weight: 400;
+}
+
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+
+/* ── 히어로 ───────────────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-7);
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: var(--space-7) var(--space-6);
+  align-items: start;
+}
+
+.hero-label {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  letter-spacing: 0.04em;
+  margin-bottom: var(--space-4);
+}
+
+.lead {
+  max-width: 34em;
+}
+
+.hero-text .lead {
+  margin-top: var(--space-4);
+}
+
+.hero-actions {
+  margin-top: var(--space-5);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.hero-note {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+.btn {
+  display: inline-block;
+  background: var(--accent);
+  color: var(--accent-ink);
+  font-weight: 500;
+  text-decoration: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft);
+}
+.btn:hover {
+  background: var(--accent-hover);
+}
+.btn-inverse {
+  background: var(--surface);
+  color: var(--ink);
+}
+.btn-inverse:hover {
+  background: var(--surface-bright);
+}
+
+.hero-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.hero-photo figcaption,
+.recipe-photo figcaption,
+.scale-plot figcaption {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+
+/* 이번 주 원두 — 원장의 첫 두 줄 (카드 아님) */
+.hero-beans {
+  margin-top: var(--space-6);
+  border-top: 1px solid var(--line);
+}
+.bean-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+  border-bottom: 1px solid var(--line);
+}
+.bean-row dt {
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: var(--step-1);
+}
+.bean-origin {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  margin-top: 2px;
+}
+.bean-price {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.bean-price span {
+  color: var(--ink-faint);
+  margin-right: var(--space-2);
+  font-size: var(--step--1);
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+
+/* ── 척도(좌표 플롯) ──────────────────────────────────────────────────── */
+
+.scale-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.scale-text p + p {
+  margin-top: var(--space-3);
+}
+.scale-legend {
+  list-style: none;
+  padding: 0;
+  margin-top: var(--space-4);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.key {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ink);
+  margin-right: var(--space-1);
+  vertical-align: baseline;
+}
+.key-b {
+  background: var(--accent);
+}
+.key-c {
+  background: var(--ink-faint);
+}
+
+.scale-plot svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.scale-plot .grid line {
+  stroke: var(--line);
+  stroke-width: 1;
+}
+.scale-plot .grid line:first-child,
+.scale-plot .grid line:nth-child(2) {
+  stroke: var(--ink-faint);
+  stroke-width: 1.25;
+}
+.axis-labels text {
+  font-family: var(--font-body);
+  font-size: 13px;
+  fill: var(--ink-faint);
+}
+.points circle {
+  fill: var(--ink);
+}
+.points .pt-b {
+  fill: var(--accent);
+}
+.points .pt-c {
+  fill: var(--ink-faint);
+}
+.points text {
+  font-family: var(--font-body);
+  font-size: 13px;
+  fill: var(--ink-muted);
+}
+
+/* ── 원장(밴드) ───────────────────────────────────────────────────────── */
+
+.ledger-head {
+  max-width: 38em;
+  margin-bottom: var(--space-5);
+}
+.ledger-head p {
+  margin-top: var(--space-3);
+}
+
+.table-wrap {
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--step-0);
+}
+thead th {
+  text-align: left;
+  font-weight: 500;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--ink-faint);
+}
+tbody th {
+  text-align: left;
+  font-weight: 500;
+}
+tbody td,
+tbody th {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  vertical-align: baseline;
+}
+.num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+.ledger-note {
+  margin-top: var(--space-3);
+  font-size: var(--step--1);
+}
+
+/* ── 레시피 ───────────────────────────────────────────────────────────── */
+
+.recipe-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.recipe-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.recipe-text p + p {
+  margin-top: var(--space-3);
+}
+.spec {
+  margin-top: var(--space-4);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: var(--space-3) var(--space-5);
+}
+.spec dt {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+.spec dd {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--step-1);
+  margin-top: var(--space-1);
+}
+
+/* ── 구독(반전 블록) ──────────────────────────────────────────────────── */
+
+.plan {
+  background: var(--surface-inverse);
+  color: var(--ink-inverse);
+}
+.plan-note {
+  color: var(--ink-inverse-muted);
+}
+.plan-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.plan-text p {
+  margin-top: var(--space-4);
+  max-width: 34em;
+}
+.plan-list {
+  margin-top: var(--space-4);
+  padding: 0;
+  list-style: none;
+}
+.plan-list li {
+  padding-left: 1.25em;
+  position: relative;
+  color: var(--ink-inverse-muted);
+}
+.plan-list li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.72em;
+  width: 6px;
+  height: 1.5px;
+  background: var(--ink-inverse-muted);
+}
+.plan-list li + li {
+  margin-top: var(--space-2);
+}
+.plan-box {
+  border: 1px solid var(--line-inverse);
+  border-radius: var(--radius);
+  padding: var(--space-5);
+  display: grid;
+  gap: var(--space-4);
+  justify-items: start;
+}
+.plan-price span:first-child {
+  font-family: var(--font-display);
+  font-size: var(--step-2);
+  font-weight: 600;
+}
+.plan-unit {
+  display: block;
+  font-size: var(--step--1);
+  margin-top: var(--space-1);
+  color: var(--ink-inverse-muted);
+}
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-6);
+  font-size: var(--step--1);
+}
+.foot-inner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-5);
+  justify-content: space-between;
+}
+
+/* ── 등장 모션 — IO 1회, 유지 ─────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 12px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-grid,
+  .scale-grid,
+  .recipe-grid,
+  .plan-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .hero-photo,
+  .recipe-photo {
+    max-width: 26rem;
+  }
+  .hero {
+    padding-block: var(--space-6);
+  }
+}
+
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .bean-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .plan-box {
+    padding: var(--space-4);
+  }
+}
diff --git a/apps/site/public/work/muwol-coffee/styles/tokens.css b/apps/site/public/work/muwol-coffee/styles/tokens.css
new file mode 100644
index 0000000..c283654
--- /dev/null
+++ b/apps/site/public/work/muwol-coffee/styles/tokens.css
@@ -0,0 +1,67 @@
+/* ==========================================================================
+   무월 (霧月 · MUWOL) — 디자인 토큰
+   프리셋: quiet-commerce
+   컨셉 한 문장: 종이 원장처럼 정직한 구독 — 화면에는 사양과 실측만.
+   레퍼런스: R1 coffeecollective.dk(구조·가격 노출·거래 투명성)
+            R2 fitzcarraldoeditions.com(세리프 본문 정돈, 1강조색)
+            R3 scroll-driven view() — 채택 안 함(IO 등장만 씀. 정적 HTML + 폴백 우선)
+   하지 않은 것: 세로 GNB 레일, 영어 대문자 eyebrow, 전면 그레인 오버레이,
+               FIG.00 캡션 문법, 카드 그림자. 이유: 계기판 흉내가 상품을 가림.
+   ========================================================================== */
+
+:root {
+  /* 타입 스케일 — 최대(64px) ÷ 본문(16px) = 4.0배 */
+  --step--1: 0.8125rem;                                /* 13px — 캡션·주석 */
+  --step-0: 1rem;                                      /* 16px — 본문 */
+  --step-1: 1.25rem;                                   /* 20px — 소제목 */
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);  /* 28px — 섹션 표제 */
+  --step-3: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);      /* 64px — 디스플레이 */
+
+  --leading-tight: 1.28;
+  --leading-normal: 1.75;
+  --measure: 34ch;
+
+  --font-display: "MaruBuri", serif;
+  --font-serif: "MaruBuri", serif;
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* 색 — hue 2개: 안개 종이 + 볶은 원두 앰버. 강조색은 앰버 하나. */
+  --surface: #f4f4f0;
+  --surface-raised: #eaeae4;
+  --surface-inverse: #181b18;
+  --ink: #181b18;
+  --ink-muted: #585c56;
+  --ink-faint: #8c908a;
+  --ink-inverse: #f4f4f0;
+  --ink-inverse-muted: #a8aca4;
+
+  --line: #d5d7d0;
+  --line-inverse: #3a3e39;
+
+  --accent: #7a3e1d;
+  --accent-hover: #5c2d13;
+  --surface-bright: #fffffa; /* 반전 블록 안 밝은 hover 단계 */
+  --accent-ink: #f4f4f0;
+
+  /* 대비(실측 예정 — 5단계에서 재검): ink/surface 15.6, muted/surface 6.2,
+     accent/surface 7.5, inverse 조합은 본문 AA 이상으로 설계 */
+
+  --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);
+
+  --radius: 2px;
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 180ms;
+  --dur-normal: 420ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/orbit-aerospace/assets/channel-macro.webp b/apps/site/public/work/orbit-aerospace/assets/channel-macro.webp
new file mode 100644
index 0000000..90e9502
Binary files /dev/null and b/apps/site/public/work/orbit-aerospace/assets/channel-macro.webp differ
diff --git a/apps/site/public/work/orbit-aerospace/assets/static-fire.webp b/apps/site/public/work/orbit-aerospace/assets/static-fire.webp
new file mode 100644
index 0000000..ccebcd0
Binary files /dev/null and b/apps/site/public/work/orbit-aerospace/assets/static-fire.webp differ
diff --git a/apps/site/public/work/orbit-aerospace/index.html b/apps/site/public/work/orbit-aerospace/index.html
new file mode 100644
index 0000000..665def6
--- /dev/null
+++ b/apps/site/public/work/orbit-aerospace/index.html
@@ -0,0 +1,322 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>궤도 우주공학 · 75kN 메탄 엔진 사양서</title>
+    <meta
+      name="description"
+      content="75kN급 메탄-액체산소 재생냉각 엔진의 단면도와 지상 연소 시험 기록. 사양은 전부 지상 시험 실측값이다."
+    />
+    <meta property="og:title" content="궤도 우주공학 · 75kN 메탄 엔진" />
+    <meta property="og:description" content="재생냉각 엔진의 단면도와 연소 시험 기록." />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#081018" />
+
+    <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&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <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='%23081018'/%3E%3Cpath d='M16 4l6 7v17h-12V11z' fill='none' stroke='%23C57A45' stroke-width='1.6'/%3E%3Cpath d='M13 11h6M12 18h8' stroke='%23C57A45'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">궤도 우주공학 <span class="wordmark-en">ORBIT</span></a>
+        <nav class="nav" aria-label="섹션">
+          <a href="#engine">엔진</a>
+          <a href="#spec">사양</a>
+          <a href="#fires">시험 기록</a>
+          <a href="#contact">문의</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        히어로 — 문구 대신 도면. 엔진 단면도가 첫 화면의 주인공이다.
+        이 도면은 장식이 아니라 사양서의 1페이지다: 라벨은 실제 부품 이름.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap hero-grid">
+          <div class="hero-text">
+            <p class="hero-kicker reveal">75kN 메탄-액체산소 · 재생냉각 · 2024–</p>
+            <h1 id="hero-h" class="reveal" style="--delay: 60ms">
+              도면은 말하지 않는다.<br />측정만 한다
+            </h1>
+            <p class="lead reveal" style="--delay: 120ms">
+              이 페이지의 모든 수치는 지상 연소 시험에서 잰 값입니다. 홍보 문구에
+              쓸 수 없는 숫자는 사양서에도 넣지 않습니다. 추력, 비추력, 연소실
+              압력 — 어디서, 몇 초 동안 재었는지가 숫자와 함께 갑니다.
+            </p>
+            <a class="btn reveal" style="--delay: 180ms" href="#spec">사양 전문 보기</a>
+          </div>
+
+          <figure class="blueprint reveal" style="--delay: 100ms">
+            <svg
+              viewBox="0 0 460 560"
+              role="img"
+              aria-label="엔진 단면도: 상부 인젝터, 연소실, 중앙 스로트, 확장 노즐과 벽면의 재생냉각 유로"
+            >
+              <defs>
+                <g id="half">
+                  <!-- 외벽: 연소실 → 스로트 → 노즐 -->
+                  <path
+                    class="bp-wall"
+                    d="M 230 70
+                       L 168 70
+                       L 168 210
+                       C 168 250 194 262 194 286
+                       C 194 310 118 350 112 470
+                       L 108 500"
+                  />
+                  <!-- 내벽 -->
+                  <path
+                    class="bp-wall inner"
+                    d="M 230 92
+                       L 184 92
+                       L 184 214
+                       C 184 246 206 258 206 284
+                       C 206 306 136 348 130 468
+                       L 127 494"
+                  />
+                  <!-- 재생냉각 유로 (내벽을 따라가는 가는 선 2줄) -->
+                  <path
+                    class="bp-cool"
+                    d="M 176 100 L 176 212 C 176 248 198 262 198 286 C 198 308 126 350 121 468 L 118 492"
+                  />
+                  <path
+                    class="bp-cool"
+                    d="M 170 100 L 170 210 C 170 244 192 260 192 288 C 192 312 120 352 114 470 L 111 496"
+                  />
+                  <!-- 인젝터 매니폴드 -->
+                  <rect class="bp-block" x="168" y="46" width="50" height="18" />
+                  <path class="bp-wall thin" d="M 168 64 L 218 64" />
+                </g>
+              </defs>
+              <use href="#half" />
+              <use href="#half" transform="translate(460 0) scale(-1 1)" />
+              <!-- 중심선 -->
+              <path class="bp-axis" d="M 230 30 V 540" />
+              <!-- 유동 화살표 -->
+              <g class="bp-flow">
+                <path d="M 230 120 V 220" />
+                <path d="M 230 220 l -5 10 M 230 220 l 5 10" />
+              </g>
+              <!-- 라벨 -->
+              <g class="bp-label">
+                <path class="bp-lead" d="M 218 55 H 150" />
+                <text x="144" y="59" text-anchor="end">인젝터</text>
+                <path class="bp-lead" d="M 168 160 H 96" />
+                <text x="90" y="164" text-anchor="end">연소실</text>
+                <path class="bp-lead" d="M 200 275 H 78" />
+                <text x="72" y="279" text-anchor="end">스로트</text>
+                <path class="bp-lead" d="M 128 400 H 60" />
+                <text x="54" y="404" text-anchor="end">노즐</text>
+                <path class="bp-lead" d="M 186 180 H 120" />
+                <text x="114" y="196" text-anchor="end"></text>
+                <text x="242" y="150">재생냉각</text>
+                <text x="242" y="166">유로 (CH₄)</text>
+              </g>
+              <g class="bp-dim">
+                <path d="M 356 92 H 372 M 364 92 V 214" />
+                <text x="380" y="157"></text>
+              </g>
+              <g class="bp-dim">
+                <path d="M 60 500 H 96 M 78 500 V 520" />
+                <text x="60" y="542">Ø 460 — 노즐 출구</text>
+              </g>
+            </svg>
+            <figcaption>ORBIT-75 단면 · 재생냉각 벽면은 그림 2겹으로 단순화</figcaption>
+          </figure>
+        </div>
+      </section>
+
+      <!--
+        사양 — 표가 주인공. 전 항목 측정 조건이 붙는다(게이트 11의 해법).
+      -->
+      <section id="spec" class="section band" aria-labelledby="spec-h">
+        <div class="wrap">
+          <h2 id="spec-h" class="reveal">사양</h2>
+          <div class="table-wrap reveal" style="--delay: 80ms">
+            <table>
+              <caption class="sr-only">ORBIT-75 엔진 사양 — 항목, 값, 측정 조건</caption>
+              <thead>
+                <tr>
+                  <th scope="col">항목</th>
+                  <th scope="col" class="num">값</th>
+                  <th scope="col">측정 조건</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">추력 (해수면)</th>
+                  <td class="num">75.4 kN</td>
+                  <td>지상 시험 스탠드 · 정상 상태 30초 평균</td>
+                </tr>
+                <tr>
+                  <th scope="row">비추력 Isp (진공)</th>
+                  <td class="num">325.8 s</td>
+                  <td>고도 모사 노즐 · 추진제 혼합비 3.4</td>
+                </tr>
+                <tr>
+                  <th scope="row">연소실 압력</th>
+                  <td class="num">12.5 MPa</td>
+                  <td>피에조 계측 · 샘플링 1kHz</td>
+                </tr>
+                <tr>
+                  <th scope="row">사이클</th>
+                  <td class="num">다단연소</td>
+                  <td>연료리치 프리버너 1기</td>
+                </tr>
+                <tr>
+                  <th scope="row">냉각</th>
+                  <td class="num">재생냉각</td>
+                  <td>구리합금 채널 180개 · CH₄ 유량 92%</td>
+                </tr>
+                <tr>
+                  <th scope="row">시동 신호→연소</th>
+                  <td class="num">2.8 s</td>
+                  <td>TEA-TEB 점화 · 12회 평균</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="measure-note reveal" style="--delay: 140ms">
+            모든 값은 나주 지상 시험장, 2026년 상반기 12회 시험의 평균입니다.
+            단일 최고값을 사양으로 적지 않습니다.
+          </p>
+        </div>
+      </section>
+
+      <!--
+        시험 기록 — 아카이브. 성공만 남기지 않는다: 3번의 보류가 있다.
+      -->
+      <section id="fires" class="section" aria-labelledby="fires-h">
+        <div class="wrap fires-grid">
+          <div class="fires-text">
+            <h2 id="fires-h">지상 연소 시험 기록</h2>
+            <p>
+              엔진은 도면으로 끝나지 않습니다. 우리는 보류된 시험도 지운 적이
+              없습니다 — 기록에서 실패가 사라지면 사양서는 광고가 됩니다.
+            </p>
+          </div>
+          <div class="table-wrap reveal">
+            <table>
+              <caption class="sr-only">지상 연소 시험 기록 — 번호, 날짜, 지속, 결과</caption>
+              <thead>
+                <tr>
+                  <th scope="col">시험</th>
+                  <th scope="col">날짜</th>
+                  <th scope="col" class="num">지속</th>
+                  <th scope="col">결과</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr><th scope="row">SF-31</th><td>2026-07-18</td><td class="num">62 s</td><td>완료 · 노즐 온도 상한 내</td></tr>
+                <tr><th scope="row">SF-30</th><td>2026-06-27</td><td class="num">31 s</td><td>보류 · 프리버너 시동 지연</td></tr>
+                <tr><th scope="row">SF-29</th><td>2026-06-02</td><td class="num">60 s</td><td>완료 · 추력 편차 0.4%</td></tr>
+                <tr><th scope="row">SF-28</th><td>2026-05-11</td><td class="num">12 s</td><td>보류 · 냉각유로 압력 강하</td></tr>
+                <tr><th scope="row">SF-27</th><td>2026-04-20</td><td class="num">58 s</td><td>완료</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        시험 사진 — 풀블리드 판. 마하 다이아몬드가 보일 때만 쓴다.
+      -->
+      <section class="section plate" aria-label="지상 연소 시험 사진">
+        <figure class="plate-fig reveal">
+          <img
+            src="./assets/static-fire.webp"
+            alt="야간 지상 연소 시험 — 구리 노즐이 열로 붉게 빛나고 배기 기둥에 마하 다이아몬드가 서 있다"
+            width="1440"
+            height="810"
+            loading="lazy"
+          />
+          <figcaption class="wrap">SF-29 · 60초 연소 · 나주 시험장 3번 스탠드</figcaption>
+        </figure>
+      </section>
+
+      <!--
+        재생냉각 — 구리 유로 접사 + 설명.
+      -->
+      <section class="section cooling" aria-labelledby="cool-h">
+        <div class="wrap two">
+          <figure class="two-photo reveal">
+            <img
+              src="./assets/channel-macro.webp"
+              alt="구리합금 블록의 단면에 밀링된 가느다란 재생냉각 유로들"
+              width="900"
+              height="1200"
+              loading="lazy"
+            />
+            <figcaption>연소실 유로 접사 · 밀링 후 청소 전</figcaption>
+          </figure>
+          <div class="two-text">
+            <h2 id="cool-h">추진제가 벽을<br />먼저 식힙니다</h2>
+            <p>
+              연소실 벽은 3,200°C의 가스를 견디는 게 아닙니다 — 견디게 두지
+              않습니다. 메탄 연료가 점화 전에 벽 속 180개 유로를 지나가며 실온에서
+              320°C까지 데워지고, 그 사이 벽은 900°C 아래로 머뭅니다. 냉각에 쓴
+              추진제는 그대로 연소실로 들어가니 버리는 열이 없습니다.
+            </p>
+            <p class="muted">
+              유로 하나의 폭은 0.9mm입니다. 이 숫자가 이 엔진의 수명을 결정합니다 —
+              도면에서 가장 작은 치수가 가장 중요한 치수입니다.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- 문의 -->
+      <section id="contact" class="section band contact" aria-labelledby="contact-h">
+        <div class="wrap contact-grid">
+          <h2 id="contact-h">문의</h2>
+          <p>
+            발사체 통합·위성 투입 협의, 그리고 엔진 시험 데이터 전문은 아래로
+            보내주세요. 기술 자료 요청에는 소속과 용도를 적어주세요.
+          </p>
+          <a class="btn" href="mailto:engine@orbit.kr">engine@orbit.kr</a>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>궤도 우주공학 · 나주 시험장 / 서울 사무실</p>
+        <p class="mono foot-meta">ORBIT AEROSPACE · EST. 2020</p>
+      </div>
+    </footer>
+
+    <script>
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/orbit-aerospace/styles/main.css b/apps/site/public/work/orbit-aerospace/styles/main.css
new file mode 100644
index 0000000..9fa1519
--- /dev/null
+++ b/apps/site/public/work/orbit-aerospace/styles/main.css
@@ -0,0 +1,455 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   궤도 우주공학 — technical-schematic. 사양서 1페이지.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+  color-scheme: dark;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2) {
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+:where(p, th, td, figcaption) {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+.lead {
+  color: var(--ink-muted);
+  max-width: 34em;
+}
+.muted {
+  color: var(--ink-muted);
+}
+.mono {
+  font-family: var(--font-mono);
+}
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-size: var(--step-1);
+  font-weight: 600;
+  text-decoration: none;
+}
+.wordmark-en {
+  color: var(--ink-faint);
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  font-weight: 400;
+  margin-left: var(--space-2);
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+
+/* ── 히어로 + 단면도 ──────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-8) var(--space-7);
+  /* 제도용 모눈 — 히어로에만, 4% 밝기 */
+  background-image:
+    linear-gradient(var(--line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--line) 1px, transparent 1px);
+  background-size: 48px 48px;
+  border-bottom: 1px solid var(--line);
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.hero-kicker {
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-4);
+}
+.hero .lead {
+  margin-top: var(--space-4);
+}
+.hero .btn {
+  margin-top: var(--space-5);
+}
+
+.btn {
+  display: inline-block;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.7rem 1.4rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft),
+    color var(--dur-quick) var(--ease-soft);
+}
+.btn:hover {
+  background: var(--accent);
+  color: var(--surface);
+}
+
+/* 단면도 */
+.blueprint {
+  background: color-mix(in srgb, var(--surface) 72%, transparent);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: var(--space-4) var(--space-3) var(--space-3);
+}
+.blueprint svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 78vh;
+}
+.blueprint figcaption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+  text-align: center;
+}
+.bp-wall {
+  fill: none;
+  stroke: var(--ink);
+  stroke-width: 2;
+}
+.bp-wall.inner {
+  stroke-width: 1.25;
+}
+.bp-wall.thin {
+  stroke-width: 1;
+}
+.bp-cool {
+  fill: none;
+  stroke: var(--accent-stroke);
+  stroke-width: 0.9;
+}
+.bp-block {
+  fill: none;
+  stroke: var(--ink-muted);
+  stroke-width: 1.2;
+}
+.bp-axis {
+  stroke: var(--ink-faint);
+  stroke-width: 0.75;
+  stroke-dasharray: 10 4 2 4;
+}
+.bp-flow path {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 1.2;
+}
+.bp-label text {
+  font-family: var(--font-body);
+  font-size: 13px;
+  fill: var(--ink-muted);
+}
+.bp-lead {
+  stroke: var(--ink-faint);
+  stroke-width: 0.8;
+}
+.bp-dim path {
+  fill: none;
+  stroke: var(--ink-faint);
+  stroke-width: 0.8;
+}
+.bp-dim text {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  fill: var(--ink-faint);
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+
+/* ── 표 ───────────────────────────────────────────────────────────────── */
+
+.table-wrap {
+  margin-top: var(--space-4);
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+thead th {
+  text-align: left;
+  font-weight: 500;
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--ink-faint);
+}
+tbody th {
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+}
+tbody td,
+tbody th {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  vertical-align: baseline;
+}
+tbody td:not(.num) {
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+.num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+.measure-note {
+  margin-top: var(--space-3);
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+/* ── 시험 기록 2단 ────────────────────────────────────────────────────── */
+
+.fires-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  gap: var(--space-5) var(--space-7);
+  align-items: start;
+}
+.fires-text p {
+  margin-top: var(--space-3);
+  color: var(--ink-muted);
+  max-width: 26em;
+}
+.fires-grid .table-wrap {
+  margin-top: 0;
+}
+
+/* ── 시험 사진 판 ─────────────────────────────────────────────────────── */
+
+.plate-fig img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.plate-fig figcaption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+
+/* ── 재생냉각 2단 ─────────────────────────────────────────────────────── */
+
+.two {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.two-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.two-photo figcaption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+.two-text p + p {
+  margin-top: var(--space-4);
+}
+
+/* ── 문의 ─────────────────────────────────────────────────────────────── */
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--space-4) var(--space-7);
+  align-items: center;
+}
+.contact-grid p {
+  color: var(--ink-muted);
+  max-width: 34em;
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-4);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+}
+.foot-meta {
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 12px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-grid,
+  .fires-grid,
+  .two,
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .hero,
+  .section {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/apps/site/public/work/orbit-aerospace/styles/tokens.css b/apps/site/public/work/orbit-aerospace/styles/tokens.css
new file mode 100644
index 0000000..8bdb038
--- /dev/null
+++ b/apps/site/public/work/orbit-aerospace/styles/tokens.css
@@ -0,0 +1,55 @@
+/* ==========================================================================
+   궤도 우주공학 — 디자인 토큰
+   프리셋: technical-schematic
+   컨셉 한 문장: 사양서 1페이지 — 도면은 말하지 않고 측정만 한다.
+   레퍼런스: 방향 앵커 dogfood-aerospace(우주업종 기술 노출). 그 파일의 6축
+            수치는 audit-references.md 에서 날조 판명 — 토큰은 브리프에서
+            재정의. 실측 가능했던 사실만 계승: rocketlabcorp의 '엔진을 상품으로
+            쓰는' 구성. 색은 야간 시험장(짙은 남흑 + 구리 노즐 열색)에서 왔다.
+   하지 않은 것: 지표 배너(고객수·성공률), 로켓 3D 렌더, 발사 카운트다운,
+               대문자 타이틀. 이유: 사양서의 신뢰는 측정 조건에서 나온다.
+   ========================================================================== */
+
+:root {
+  /* 타입 — 최대(54px) ÷ 본문(16px) ≈ 3.4배 */
+  --step--1: 0.8125rem;
+  --step-0: 1rem;
+  --step-1: 1.1875rem;
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
+  --step-3: clamp(2rem, 1.4rem + 3vw, 3.375rem);
+
+  --leading-tight: 1.28;
+  --leading-normal: 1.78;
+
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* 색 — 야간 시험장: 남흑 배경, 구리 강조(텍스트·선), 청사진 흰선 */
+  --surface: #081018;
+  --surface-raised: #0d1520;
+  --ink: #e7ecf1;
+  --ink-muted: #97a3af;
+  --ink-faint: #6c7885;
+  --line: #1f2937;
+  --line-strong: #33415280;
+  --accent: #d08a5a;        /* 구리 — 열색. 텍스트용 밝기 */
+  --accent-stroke: #a45f33; /* 도면 선용 */
+
+  --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, 8.5rem);
+
+  --radius: 2px;
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 420ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/overtone-sound/assets/installation.webp b/apps/site/public/work/overtone-sound/assets/installation.webp
new file mode 100644
index 0000000..b29462b
Binary files /dev/null and b/apps/site/public/work/overtone-sound/assets/installation.webp differ
diff --git a/apps/site/public/work/overtone-sound/index.html b/apps/site/public/work/overtone-sound/index.html
new file mode 100644
index 0000000..7ec364d
--- /dev/null
+++ b/apps/site/public/work/overtone-sound/index.html
@@ -0,0 +1,257 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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="#0E0D0B" />
+
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" 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="./styles/main.css?v=2" />
+    <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='%230E0D0B'/%3E%3Cpath d='M4 16h4l2-7 3 14 3-10 2 5h10' fill='none' stroke='%23E8A33D' stroke-width='1.8'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">본문으로 건너뛰기</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">오버톤 사운드랩</a>
+        <nav class="nav" aria-label="섹션">
+          <a href="#works">작업</a>
+          <a href="#manifesto">선언</a>
+          <a href="#contact">연락</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        히어로 — anti-grid: 글자가 파형 위로 삐져나온다.
+        캔버스는 절차적 유사-FFT(정현파 합). 재생 버튼 없이 스스로 흐르되
+        화면 밖에서는 그리지 않는다.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <canvas id="wave" class="wave" aria-hidden="true"></canvas>
+        <div class="wrap hero-inner">
+          <p class="hero-kicker reveal">
+            <span>공간 음향 · DSP · 서울</span>
+            <span class="mono">48kHz / 2ch</span>
+          </p>
+          <h1 id="hero-h" class="reveal" style="--delay: 80ms">
+            침묵과 폭발의<br /><em>주파수</em>
+          </h1>
+          <p class="hero-statement reveal" style="--delay: 160ms">
+            오버톤은 소리를 만들지 않고, 소리가 공간에서 어떻게 행동하는지를
+            연구합니다. 방금 지나간 곡선은 이 연구소를 지나가는 소리의 자취입니다.
+          </p>
+        </div>
+      </section>
+
+      <!--
+        작업 아카이브 — 스태거 2열. 카드가 아니라 '벽에 걸린 목록'.
+        같은 간격을 주지 않는다: 짝수 작품은 오른쪽으로, 홀수는 왼쪽으로 쏠린다.
+      -->
+      <section id="works" class="section works" aria-labelledby="works-h">
+        <div class="wrap">
+          <h2 id="works-h" class="works-h reveal">작업</h2>
+          <ol class="archive">
+            <li class="work reveal">
+              <p class="work-year mono">2026</p>
+              <h3>공명하는 방 — DDP 설치</h3>
+              <p>
+                종이 콘 스피커 48개가 천장에서 내려와 방 안의 소리를 0.8초 늦게
+                되돌려주는 설치. 관람객의 발소리가 악기가 된다.
+              </p>
+              <p class="work-meta mono">48ch · 공간지연 · 상설</p>
+            </li>
+            <li class="work work-b reveal" style="--delay: 60ms">
+              <p class="work-year mono">2025</p>
+              <h3>무(無)의 스펙트럼</h3>
+              <p>
+                아무 소리도 없는 방의 바닥 소음(−62dB)을 증폭해 들려주는
+                퍼포먼스. 침묵에는 평균 진폭이 있다.
+              </p>
+              <p class="work-meta mono">live · −62dB floor</p>
+            </li>
+            <li class="work reveal" style="--delay: 40ms">
+              <p class="work-year mono">2024</p>
+              <h3> 파도의 인버전 — 제주</h3>
+              <p>
+                바람과 파도의 실측 데이터를 반대 위상으로 합성해 바다가 '삼키는'
+                소리를 만드는 해안 설치.
+              </p>
+              <p class="work-meta mono">field data · 6h loop</p>
+            </li>
+            <li class="work work-b reveal" style="--delay: 100ms">
+              <p class="work-year mono">2023</p>
+              <h3>유리 진동자</h3>
+              <p>
+                잔 12개에 각기 다른 공진 주파수를 실어 연주하는 설비. 연주자는
+                물의 높이를 조율한다.
+              </p>
+              <p class="work-meta mono">glass · 220–940Hz</p>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <!--
+        선언 — anti-grid의 정점: 문장 하나가 페이지 폭을 다 쓴다.
+        압축 스케일의 반대편. 이 페이지에서 가장 큰 텍스트 블록.
+      -->
+      <section id="manifesto" class="section manifesto" aria-labelledby="manifesto-h">
+        <div class="wrap">
+          <h2 id="manifesto-h" class="sr-only">선언</h2>
+          <p class="manifesto-line reveal">
+            좋은 음향은 들리지 않는다.<br />
+            방이 좋아지는 것뿐이다.
+          </p>
+          <p class="manifesto-note reveal" style="--delay: 100ms">
+            우리는 음파를 시각화로 번역하지 않습니다. 시각화는 소리의 크기만
+            흉내 낼 뿐, 소리의 '방의 크기'를 옮기지 못합니다. 대신 우리는 방을
+            조율합니다 — 재생 목록이 아니라 잔향시간을 설계합니다.
+          </p>
+        </div>
+      </section>
+
+      <!-- 협업 마퀴 — 페이지에 하나뿐인 흐름 -->
+      <div class="marquee" aria-label="협업 단체">
+        <div class="marquee-track">
+          <span>국립현대미술관</span><span>DDP</span><span>서울시립교향악단</span><span>아르코예술극장</span><span>제주국제음악제</span><span>국립현대미술관</span><span>DDP</span><span>서울시립교향악단</span><span>아르코예술극장</span><span>제주국제음악제</span>
+        </div>
+      </div>
+
+      <!--
+        사진 — 설치 현장 한 컷. 다크룸의 앰버 빔.
+      -->
+      <section class="section photo" aria-label="설치 현장">
+        <figure class="wrap photo-fig reveal">
+          <img
+            src="./assets/installation.webp"
+            alt="어두운 전시실에 종이콘 스피커들이 늘어서 있고 앰버색 빛줄기가 한 줄 지나간다"
+            width="1440"
+            height="810"
+            loading="lazy"
+          />
+          <figcaption class="mono">공명하는 방 · 설치 뷰 · 2026</figcaption>
+        </figure>
+      </section>
+
+      <!-- 연락 -->
+      <section id="contact" class="section contact" aria-labelledby="contact-h">
+        <div class="wrap contact-grid">
+          <h2 id="contact-h">연락</h2>
+          <p>
+            설치·공연·연구 협업 문의는 소리의 조건(공간 크기, 재생 시간, 청중 수)과
+            함께 보내주세요.
+          </p>
+          <a class="contact-mail" href="mailto:lab@overtone.kr">lab@overtone.kr</a>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>오버톤 사운드랩 · 서울 마포</p>
+        <p class="mono foot-meta">© 2019–2026 · OVERTONE SOUND LAB</p>
+      </div>
+    </footer>
+
+    <script>
+      /*
+        절차적 유사-FFT — 정현파 5개를 더하고 위상을 흐르게 한다.
+        오디오 파일도 디코딩도 없다(연구조사 R3의 교훈: 전체 파일 디코드는
+        수 초 메인스레드를 막는다). 화면 밖·reduced-motion 에서는 정지 프레임.
+      */
+      const canvas = document.getElementById("wave");
+      const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const ctx = canvas.getContext("2d");
+      let w, h, dpr, running = false;
+
+      function fit() {
+        dpr = Math.min(devicePixelRatio || 1, 1.5);
+        w = canvas.clientWidth;
+        h = canvas.clientHeight;
+        canvas.width = Math.round(w * dpr);
+        canvas.height = Math.round(h * dpr);
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      }
+
+      function draw(t) {
+        ctx.clearRect(0, 0, w, h);
+        // 세 겹의 파형 — 시간차를 두고 겹친다
+        for (let layer = 0; layer < 3; layer++) {
+          ctx.beginPath();
+          const amp = (h * 0.16) * (1 - layer * 0.28);
+          const yMid = h * (0.52 + layer * 0.12);
+          const speed = 0.00042 * (1 + layer * 0.7);
+          for (let x = 0; x <= w; x += 3) {
+            const p = x / w;
+            const env = Math.exp(-Math.pow((p - 0.5) * 2.4, 2)); // 중앙 강조
+            const y =
+              yMid +
+              Math.sin(p * 21 + t * speed + layer * 2.1) * amp * env * Math.sin(p * Math.PI) +
+              Math.sin(p * 53 - t * speed * 1.7) * amp * 0.25 * env;
+            x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+          }
+          ctx.strokeStyle = layer === 0 ? "rgba(232,163,61,0.85)" : `rgba(232,163,61,${0.32 - layer * 0.1})`;
+          ctx.lineWidth = layer === 0 ? 1.4 : 1;
+          ctx.stroke();
+        }
+      }
+
+      function loop(t) {
+        if (!running) return;
+        draw(t);
+        requestAnimationFrame(loop);
+      }
+
+      fit();
+      addEventListener("resize", fit, { passive: true });
+      draw(0);
+
+      if (!reduced) {
+        const io = new IntersectionObserver((entries) => {
+          const on = entries[0].isIntersecting;
+          if (on && !running) {
+            running = true;
+            requestAnimationFrame(loop);
+          } else if (!on) {
+            running = false;
+          }
+        });
+        io.observe(canvas);
+      }
+
+      const io2 = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io2.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/overtone-sound/styles/main.css b/apps/site/public/work/overtone-sound/styles/main.css
new file mode 100644
index 0000000..b4e89b2
--- /dev/null
+++ b/apps/site/public/work/overtone-sound/styles/main.css
@@ -0,0 +1,392 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   오버톤 사운드랩 — anti-grid. 격자는 일부러 비틀었다.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+  color-scheme: dark;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2, h3) {
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-3);
+}
+:where(p, li, figcaption) {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+.mono {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-size: var(--step-1);
+  font-weight: 600;
+  text-decoration: none;
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+/* ── 히어로 — 파형 위로 삐져나온 글자 ────────────────────────────────── */
+
+.hero {
+  position: relative;
+  min-height: 88svh;
+  display: grid;
+  align-content: center;
+  overflow: clip;
+}
+.wave {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.9;
+}
+.hero-inner {
+  position: relative;
+  z-index: 2;
+  /* anti-grid: 텍스트 블록을 왼쪽 15% 축에 두고 오른쪽은 파형에 내준다 */
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-left: max(var(--pad-inline), calc((100% - var(--container)) / 2));
+  margin-right: 0;
+  padding-block: var(--space-7);
+}
+.hero-kicker {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  max-width: 24rem;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  letter-spacing: 0.1em;
+}
+.hero h1 {
+  margin-top: var(--space-4);
+  max-width: 12em;
+}
+.hero h1 em {
+  font-style: normal;
+  color: var(--accent);
+}
+.hero-statement {
+  margin-top: var(--space-4);
+  max-width: 26em;
+  color: var(--ink-muted);
+  /* 오른쪽으로 밀어낸다 — 정렬을 스스로 어긋나게 */
+  margin-left: clamp(0rem, 8vw, 7.5rem);
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+
+/* ── 작업 아카이브 — 스태거 2열 ──────────────────────────────────────── */
+
+.works-h {
+  font-size: var(--step--1);
+  font-weight: 500;
+  color: var(--ink-faint);
+  letter-spacing: 0.3em;
+}
+.archive {
+  list-style: none;
+  margin-top: var(--space-3);
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-6) var(--space-7);
+}
+.work {
+  border-top: 1px solid var(--line);
+  padding-top: var(--space-3);
+  max-width: 26rem;
+}
+/* 스태거: 짝수 작품은 아래로 밀고 오른쪽으로 당긴다 */
+.work-b {
+  margin-top: var(--space-7);
+  justify-self: end;
+}
+.work-year {
+  color: var(--accent);
+}
+.work h3 {
+  font-size: var(--step-2);
+  margin-top: var(--space-2);
+}
+.work p:not(.mono) {
+  margin-top: var(--space-3);
+  color: var(--ink-muted);
+}
+.work-meta {
+  margin-top: var(--space-3);
+}
+
+/* ── 선언 ─────────────────────────────────────────────────────────────── */
+
+.manifesto {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+.manifesto-line {
+  font-size: var(--step-manifesto);
+  font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
+  word-break: keep-all;
+}
+.manifesto-note {
+  margin-top: var(--space-5);
+  max-width: 32em;
+  color: var(--ink-muted);
+  margin-left: clamp(0rem, 12vw, 11rem); /* 다시 어긋난 여백 */
+}
+
+/* ── 마퀴 — 하나뿐인 흐름 ────────────────────────────────────────────── */
+
+.marquee {
+  overflow: clip;
+  border-bottom: 1px solid var(--line);
+  padding-block: var(--space-3);
+}
+.marquee-track {
+  display: flex;
+  gap: var(--space-8);
+  width: max-content;
+  animation: marquee 36s linear infinite;
+}
+.marquee-track span {
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  white-space: nowrap;
+}
+@keyframes marquee {
+  to {
+    transform: translateX(-50%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .marquee-track {
+    animation: none;
+  }
+}
+
+/* ── 사진 ─────────────────────────────────────────────────────────────── */
+
+.photo-fig img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.photo-fig figcaption {
+  margin-top: var(--space-2);
+}
+
+/* ── 연락 ─────────────────────────────────────────────────────────────── */
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--space-4) var(--space-7);
+  align-items: baseline;
+}
+.contact-grid h2 {
+  font-size: var(--step-1);
+}
+.contact-grid p {
+  color: var(--ink-muted);
+  max-width: 28em;
+}
+.contact-mail {
+  font-size: var(--step-2);
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid var(--accent-dim);
+  transition: border-color var(--dur-quick) var(--ease-soft);
+}
+.contact-mail:hover {
+  border-color: var(--accent);
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-4);
+  font-size: var(--step--1);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+  color: var(--ink-muted);
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 14px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 — 좁은 화면에서는 비틀림을 줄인다(읽힘이 위) ─────────────── */
+
+@media (max-width: 900px) {
+  .archive {
+    grid-template-columns: 1fr;
+  }
+  .work-b {
+    margin-top: 0;
+    justify-self: stretch;
+  }
+  .hero-statement,
+  .manifesto-note {
+    margin-left: 0;
+  }
+  .hero {
+    min-height: 0;
+  }
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+  }
+  .hero,
+  .section {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/apps/site/public/work/overtone-sound/styles/tokens.css b/apps/site/public/work/overtone-sound/styles/tokens.css
new file mode 100644
index 0000000..86e5965
--- /dev/null
+++ b/apps/site/public/work/overtone-sound/styles/tokens.css
@@ -0,0 +1,54 @@
+/* ==========================================================================
+   오버톤 사운드랩 — 디자인 토큰
+   프리셋: anti-grid
+   컨셉 한 문장: 어두운 스튜디오 바닥에 흩뿌린 목록 — 격자는 일부러 비틀었다.
+   레퍼런스: R1 carstennicolai.de(실측: 1152px 컨테이너, 비대칭 15/20/85 열,
+            압축 타입 스케일 1.8:1, 아카이브 역연도, 형광 1색 → 앰버로 치환)
+            R2 obys.agency(스태거 2열, 라인 마스크 리빌, 마퀴 1회)
+            R3 절차적 유사-FFT 캔버스(오디오 디코드 회피)
+   하지 않은 것: 글래스 도크, 3열 카드, 커서 추적 이펙트, 대문자 타이틀.
+               이유: 파열은 하나(스태거+파형)로 족하다.
+   ========================================================================== */
+
+:root {
+  /* 타입 — R1의 압축 스케일. 최대(40px) ÷ 본문(16px) = 2.5배(선언 문장 제외) */
+  --step--1: 0.8125rem;
+  --step-0: 1rem;
+  --step-1: 1.125rem;
+  --step-2: 1.375rem;
+  --step-3: clamp(1.875rem, 1.3rem + 2.8vw, 2.5rem); /* 40px 히어로 */
+  --step-manifesto: clamp(1.875rem, 1.2rem + 4.4vw, 3.75rem); /* 선언 — 이 페이지의 가장 큰 목소리 */
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.75;
+
+  --font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  --surface: #0e0d0b;
+  --surface-raised: #161411;
+  --ink: #ece7dd;
+  --ink-muted: #a09a8e;
+  --ink-faint: #6f695f;
+  --line: #27241f;
+  --accent: #e8a33d;        /* 앰버 — 선과 텍스트로만 */
+  --accent-dim: rgba(232, 163, 61, 0.35);
+
+  --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, 8.5rem);
+
+  --radius: 0;              /* 스튜디오 바닥에는 모서리가 없다 */
+
+  --container: 1152px;      /* R1 실측값 */
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 460ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/pulsegate/index.html b/apps/site/public/work/pulsegate/index.html
new file mode 100644
index 0000000..54e5a48
--- /dev/null
+++ b/apps/site/public/work/pulsegate/index.html
@@ -0,0 +1,317 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Pulsegate · Edge Latency &amp; Synthetic Probe Engine</title>
+    <meta
+      name="description"
+      content="Synthetic HTTP/gRPC assertions every ten seconds from bare-metal edge POPs. No agents, no sidecars. Prometheus and OpenTelemetry export."
+    />
+    <meta property="og:title" content="Pulsegate · Edge Latency &amp; Synthetic Probe Engine" />
+    <meta
+      property="og:description"
+      content="Synthetic assertions from 28 bare-metal edge POPs. A probe is watching within 90 seconds."
+    />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#0B0E12" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <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='%230B0E12'/%3E%3Cpath d='M6 17h6l3-8 4 14 3-6h4' fill='none' stroke='%236CA3EE' stroke-width='2'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">Skip to main content</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">pulsegate<span class="wordmark-dot">.</span></a>
+        <nav class="nav" aria-label="Sections">
+          <a href="#wiring">Wiring</a>
+          <a href="#numbers">Numbers</a>
+          <a href="#pricing">Pricing</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        Hero. Grayscale hierarchy per research: h1 (1) → primary CTA (2) → command (3).
+        Cobalt exists only as text and chart ink — never as a fill or a glow.
+        The instrument on the right is a static frame: no pulsing dots, no live pretence.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap hero-grid">
+          <div class="hero-text">
+            <h1 id="hero-h" class="reveal">
+              A probe is watching<br />within 90&nbsp;seconds
+            </h1>
+            <p class="lead reveal" style="--delay: 80ms">
+              Synthetic HTTP and gRPC assertions, executed every ten seconds from
+              bare-metal POPs in 28 transit centers. No agents on your fleet, no
+              sidecars to babysit — the first probe is running before you finish
+              reading this page.
+            </p>
+            <div class="hero-actions reveal" style="--delay: 140ms">
+              <a class="btn btn-primary" href="#pricing">Start with 3 free probes</a>
+              <a class="link-quiet" href="#wiring">See how it is wired</a>
+            </div>
+            <div class="command reveal" style="--delay: 200ms">
+              <span class="command-prompt" aria-hidden="true">$</span>
+              <code>curl -sL https://pulsegate.io/init | sh</code>
+            </div>
+            <p class="hero-note reveal" style="--delay: 240ms">
+              90 seconds: measured from <code>init</code> to first assertion on a
+              cold account, 2026-08-20.
+            </p>
+          </div>
+
+          <!-- Instrument: static 24h frame. Cobalt = one series only. -->
+          <figure class="instrument reveal" style="--delay: 160ms">
+            <figcaption class="instrument-head">
+              <span>EDGE LATENCY · P99 · LAST 24H</span>
+              <span>10s interval</span>
+            </figcaption>
+            <svg
+              viewBox="0 0 560 264"
+              role="img"
+              aria-label="24-hour p99 latency chart. Seoul stays under 16 ms, Tokyo under 34 ms, Frankfurt sits near 140 ms with one spike to 210 ms at 06:40 UTC."
+            >
+              <!-- hour grid -->
+              <g class="chart-grid">
+                <line x1="0" y1="8" x2="560" y2="8" />
+                <line x1="0" y1="70" x2="560" y2="70" />
+                <line x1="0" y1="132" x2="560" y2="132" />
+                <line x1="0" y1="194" x2="560" y2="194" />
+                <line x1="0" y1="256" x2="560" y2="256" class="chart-axis" />
+                <line x1="70" y1="0" x2="70" y2="264" />
+                <line x1="140" y1="0" x2="140" y2="264" />
+                <line x1="210" y1="0" x2="210" y2="264" />
+                <line x1="280" y1="0" x2="280" y2="264" />
+                <line x1="350" y1="0" x2="350" y2="264" />
+                <line x1="420" y1="0" x2="420" y2="264" />
+                <line x1="490" y1="0" x2="490" y2="264" />
+              </g>
+              <!-- series: FRA (faint, high) — 140ms band with 06:40 spike -->
+              <polyline
+                class="series series-faint"
+                points="0,96 35,94 70,97 105,92 140,95 175,93 205,88 210,74 215,60 220,74 225,90 260,95 280,93 315,96 350,94 385,97 420,93 455,96 490,94 525,97 560,95"
+              />
+              <!-- series: NRT (muted, low-mid) -->
+              <polyline
+                class="series series-muted"
+                points="0,224 35,222 70,225 105,221 140,224 175,223 210,226 245,222 280,224 315,223 350,226 385,222 420,225 455,223 490,226 525,223 560,225"
+              />
+              <!-- series: ICN (cobalt, lowest) -->
+              <polyline
+                class="series series-accent"
+                points="0,243 35,242 70,244 105,242 140,243 175,244 210,242 245,243 280,244 315,242 350,243 385,244 420,243 455,242 490,244 525,243 560,243"
+              />
+            </svg>
+            <div class="instrument-rows" aria-label="POP readings, p99 over 24 hours">
+              <div><span>ICN-01 · Seoul</span><span class="num">14.2 ms</span></div>
+              <div><span>NRT-02 · Tokyo</span><span class="num">28.6 ms</span></div>
+              <div><span>SIN-01 · Singapore</span><span class="num">34.0 ms</span></div>
+              <div><span>SJC-04 · San Jose</span><span class="num">88.4 ms</span></div>
+              <div><span>LHR-02 · London</span><span class="num">126.8 ms</span></div>
+              <div><span>FRA-01 · Frankfurt</span><span class="num">142.1 ms</span></div>
+            </div>
+          </figure>
+        </div>
+      </section>
+
+      <!--
+        Wiring — the one scroll-motion detail (R3): a circuit trace that draws
+        itself as it enters the viewport. CSS animation-timeline, Chromium-gated;
+        every other browser (and reduced-motion) gets the fully drawn diagram.
+        Structure is the argument: probes → assertions → your telemetry.
+      -->
+      <section id="wiring" class="section" aria-labelledby="wiring-h">
+        <div class="wrap">
+          <h2 id="wiring-h" class="reveal">How it is wired</h2>
+          <p class="lead reveal" style="--delay: 80ms">
+            Probes run from physical tier-1 transit facilities, not shared cloud
+            VPCs, so what you measure is the network your users ride — not cloud
+            peering bias. One trace, three stations.
+          </p>
+        </div>
+
+        <div class="wrap wiring-diagram reveal" style="--delay: 120ms">
+          <svg viewBox="0 0 1120 220" role="img" aria-label="Wiring diagram: 28 POPs run assertions, the engine evaluates them, results export to Prometheus and OpenTelemetry.">
+            <!-- drawn trace: POPs → engine → export -->
+            <path
+              class="trace"
+              d="M 40 60 H 300 M 40 110 H 300 M 40 160 H 300 M 300 110 H 470 M 650 110 H 820 M 820 60 V 160 M 820 60 H 1010 M 820 160 H 1010"
+            />
+            <!-- station 1: POPs -->
+            <g class="station">
+              <rect x="40" y="44" width="14" height="14" />
+              <rect x="40" y="94" width="14" height="14" />
+              <rect x="40" y="144" width="14" height="14" />
+              <text x="66" y="55">ICN · NRT · SIN …</text>
+              <text x="66" y="105">FRA · LHR · AMS …</text>
+              <text x="66" y="155">SJC · IAD · ORD …</text>
+            </g>
+            <!-- station 2: engine -->
+            <g class="station">
+              <rect x="470" y="88" width="180" height="44" />
+              <text x="478" y="106">assertion engine</text>
+              <text x="478" y="124" class="mono-note">http · grpc · tcp · dns</text>
+            </g>
+            <!-- station 3: export -->
+            <g class="station">
+              <rect x="1010" y="46" width="70" height="26" />
+              <rect x="1010" y="146" width="70" height="26" />
+              <text x="1006" y="38" text-anchor="end">Prometheus</text>
+              <text x="1006" y="192" text-anchor="end">OpenTelemetry</text>
+            </g>
+            <!-- flow labels -->
+            <g class="flow-label">
+              <text x="310" y="100">every 10 s</text>
+              <text x="660" y="100">p50 · p99 · jitter</text>
+            </g>
+          </svg>
+        </div>
+
+        <div class="wrap wiring-notes">
+          <div class="wiring-note reveal">
+            <h3>Bare-metal, not lambdas</h3>
+            <p>
+              Probes live in tier-1 transit facilities. The RTT you see is the
+              RTT your users get.
+            </p>
+          </div>
+          <div class="wiring-note reveal" style="--delay: 80ms">
+            <h3>Assertions, not pings</h3>
+            <p>
+              JSONPath body checks, gRPC status codes, TLS certificate expiry —
+              a check fails when your product fails, not when a packet does.
+            </p>
+          </div>
+          <div class="wiring-note reveal" style="--delay: 160ms">
+            <h3>Your telemetry, your tools</h3>
+            <p>
+              Export to the Prometheus and OpenTelemetry you already run. No
+              dashboard to live in, no lock-in to migrate off.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        Numbers — the trust band. Every value carries its measurement condition.
+        No invented scale claims: these are the engine's own telemetry frame.
+      -->
+      <section id="numbers" class="section band" aria-labelledby="numbers-h">
+        <div class="wrap">
+          <h2 id="numbers-h" class="reveal">One frame, all 28 POPs</h2>
+          <p class="lead reveal" style="--delay: 80ms">
+            A single assertion — <code>GET /health</code> against a Seoul origin —
+            fanned out to every POP at the same instant.
+          </p>
+          <div class="table-wrap reveal" style="--delay: 120ms">
+            <table>
+              <caption class="sr-only">
+                Per-POP readings for one assertion: DNS, TLS, TTFB and p99 over 24 hours
+              </caption>
+              <thead>
+                <tr>
+                  <th scope="col">POP</th>
+                  <th scope="col">City</th>
+                  <th scope="col" class="num">DNS</th>
+                  <th scope="col" class="num">TLS</th>
+                  <th scope="col" class="num">TTFB</th>
+                  <th scope="col" class="num">p99 / 24h</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr><th scope="row">ICN-01</th><td>Seoul</td><td class="num">1.8</td><td class="num">6.4</td><td class="num">14.2</td><td class="num">15.9</td></tr>
+                <tr><th scope="row">NRT-02</th><td>Tokyo</td><td class="num">2.1</td><td class="num">7.1</td><td class="num">28.6</td><td class="num">31.2</td></tr>
+                <tr><th scope="row">SIN-01</th><td>Singapore</td><td class="num">2.4</td><td class="num">8.2</td><td class="num">34.0</td><td class="num">37.5</td></tr>
+                <tr><th scope="row">SJC-04</th><td>San Jose</td><td class="num">3.0</td><td class="num">9.6</td><td class="num">88.4</td><td class="num">94.7</td></tr>
+                <tr><th scope="row">LHR-02</th><td>London</td><td class="num">4.0</td><td class="num">11.2</td><td class="num">126.8</td><td class="num">133.0</td></tr>
+                <tr><th scope="row">FRA-01</th><td>Frankfurt</td><td class="num">4.2</td><td class="num">11.8</td><td class="num">142.1</td><td class="num">151.8</td></tr>
+                <tr class="row-more"><td colspan="6">…22 more POPs in the console — same frame, same instant</td></tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="measure-note reveal" style="--delay: 160ms">
+            Measured 2026-08-20 14:00 UTC · 10 s interval · n = 8,640 per POP ·
+            milliseconds, median of the hour shown for DNS/TLS/TTFB.
+          </p>
+        </div>
+      </section>
+
+      <!--
+        Pricing — two quiet rows, not three columns with a badge.
+        (research: the 3-column + "most popular" template is the highest-recurrence
+        slop pattern in this category — we don't run it)
+      -->
+      <section id="pricing" class="section" aria-labelledby="pricing-h">
+        <div class="wrap pricing-grid">
+          <div class="pricing-text">
+            <h2 id="pricing-h" class="reveal">Priced per probe,<br />not per seat</h2>
+            <p class="lead reveal" style="--delay: 80ms">
+              A probe costs the same whether three engineers or thirty look at
+              the console. Downgrade, pause, or delete from the CLI.
+            </p>
+          </div>
+          <div class="pricing-rows reveal" style="--delay: 120ms">
+            <div class="price-row">
+              <div>
+                <h3>Free</h3>
+                <p>3 probes · 60 s interval · 7-day retention</p>
+              </div>
+              <div class="price-val">
+                <span>$0</span>
+                <a class="btn btn-primary" href="#main">Create account</a>
+              </div>
+            </div>
+            <div class="price-row">
+              <div>
+                <h3>Pro</h3>
+                <p>Unlimited probes · 10 s interval · 13-month retention · OTel export</p>
+              </div>
+              <div class="price-val">
+                <span>$0.40 <em>per probe-month</em></span>
+                <a class="link-quiet" href="#main">Start free, upgrade inside</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>pulsegate — distributed edge telemetry</p>
+        <p class="foot-meta">status: 28/28 POPs reporting · exporter protocol v2.4</p>
+      </div>
+    </footer>
+
+    <script>
+      /* Reveal only — same grammar as the rest of the studio's work.
+         No scroll listeners, no fake "live" loops: a static frame is honest. */
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/pulsegate/styles/main.css b/apps/site/public/work/pulsegate/styles/main.css
new file mode 100644
index 0000000..e972ff1
--- /dev/null
+++ b/apps/site/public/work/pulsegate/styles/main.css
@@ -0,0 +1,543 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   Pulsegate — dark-instrument. 명도차로만 읽히는 계기판.
+   레이아웃 → 재질 → 모션 순서.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+  color-scheme: dark;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2, h3) {
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+h3 {
+  font-size: var(--step-1);
+}
+
+.lead {
+  color: var(--ink-muted);
+  max-width: 38em;
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+a {
+  color: inherit;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-family: var(--font-mono);
+  font-size: var(--step-1);
+  font-weight: 500;
+  text-decoration: none;
+  letter-spacing: -0.02em;
+}
+.wordmark-dot {
+  color: var(--accent);
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+
+/* ── 히어로 ───────────────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-8) var(--space-7);
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: start;
+}
+.hero-text .lead {
+  margin-top: var(--space-4);
+}
+.hero-actions {
+  margin-top: var(--space-5);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.btn-primary {
+  display: inline-block;
+  background: var(--ink);
+  color: var(--accent-ink);
+  font-weight: 500;
+  text-decoration: none;
+  padding: 0.75rem 1.375rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft);
+}
+/* 히어로에서 가장 밝은 덩어리 = CTA. 색이 아니라 명도로 2위. */
+.btn-primary:hover {
+  background: var(--ink-bright);
+}
+
+.link-quiet {
+  color: var(--ink-muted);
+  text-decoration: none;
+  border-bottom: 1px solid var(--line-strong);
+  padding-bottom: 1px;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.link-quiet:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.command {
+  margin-top: var(--space-5);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  background: var(--surface-frame);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: var(--space-3) var(--space-4);
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  max-width: 30rem;
+}
+.command-prompt {
+  color: var(--accent);
+}
+.command code {
+  display: block; /* 인라인이면 nowrap 최소폭이 그리드를 밀어낸다(320px 실패) */
+  min-width: 0;
+  color: var(--ink);
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-width: thin;
+}
+.hero-note {
+  margin-top: var(--space-3);
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  max-width: 34rem;
+}
+
+/* ── 계기(정적 프레임) ─────────────────────────────────────────────────── */
+
+.instrument {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-frame);
+  background: var(--surface-raised);
+  padding: var(--space-4);
+}
+.instrument-head {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  color: var(--ink-faint);
+  margin-bottom: var(--space-3);
+}
+.instrument svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.chart-grid line {
+  stroke: var(--line);
+  stroke-width: 1;
+}
+.chart-grid .chart-axis {
+  stroke: var(--line-strong);
+}
+.series {
+  fill: none;
+  stroke-width: 1.25;
+  stroke-linejoin: round;
+}
+.series-faint {
+  stroke: var(--line-strong);
+}
+.series-muted {
+  stroke: var(--ink-faint);
+}
+.series-accent {
+  stroke: var(--accent-stroke);
+}
+.instrument-rows {
+  margin-top: var(--space-3);
+  border-top: 1px solid var(--line);
+}
+.instrument-rows > div {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding-block: 0.5rem;
+  border-bottom: 1px solid var(--line);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink);
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+.section h2 + .lead {
+  margin-top: var(--space-3);
+}
+
+/* ── 배선 다이어그램 ──────────────────────────────────────────────────── */
+
+.wiring-diagram {
+  margin-top: var(--space-6);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-frame);
+  background: var(--surface-raised);
+  padding: var(--space-4) var(--space-3);
+}
+.wiring-diagram svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.trace {
+  fill: none;
+  stroke: var(--accent-stroke);
+  stroke-width: 1.5;
+}
+.station rect {
+  fill: none;
+  stroke: var(--line-strong);
+  stroke-width: 1;
+}
+.station text {
+  font-family: var(--font-body);
+  font-size: 15px;
+  fill: var(--ink-muted);
+}
+.station .mono-note {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  fill: var(--ink-faint);
+}
+.flow-label text {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  fill: var(--accent);
+}
+
+/* 스크롤 드로잉 — 이중 게이트. 폴백은 '이미 다 그어진 도면' */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .trace {
+      stroke-dasharray: 2400;
+      stroke-dashoffset: 2400;
+      animation: trace-draw 1.6s var(--ease-soft) both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 60%;
+    }
+    @keyframes trace-draw {
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+  }
+}
+
+.wiring-notes {
+  margin-top: var(--space-5);
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: var(--space-5) var(--space-6);
+}
+.wiring-note h3 {
+  font-size: var(--step-0);
+  font-weight: 600;
+}
+.wiring-note p {
+  margin-top: var(--space-2);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+
+/* ── 수치 밴드 ────────────────────────────────────────────────────────── */
+
+.table-wrap {
+  margin-top: var(--space-5);
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+thead th {
+  text-align: left;
+  font-weight: 500;
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--line-strong);
+}
+tbody th {
+  font-weight: 500;
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+}
+tbody td,
+tbody th {
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--line);
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+tbody td {
+  color: var(--ink-muted);
+}
+td.num {
+  color: var(--ink);
+}
+.row-more td {
+  color: var(--ink-faint);
+  font-size: var(--step--1);
+  padding-block: var(--space-3);
+}
+.measure-note {
+  margin-top: var(--space-3);
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+/* ── 요금 ─────────────────────────────────────────────────────────────── */
+
+.pricing-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: start;
+}
+.pricing-text .lead {
+  margin-top: var(--space-3);
+}
+.pricing-rows {
+  border-top: 1px solid var(--line-strong);
+}
+.price-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+  padding-block: var(--space-4);
+  border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
+}
+.price-row h3 {
+  font-weight: 600;
+}
+.price-row p {
+  margin-top: var(--space-1);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+.price-val {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.price-val > span {
+  font-family: var(--font-mono);
+  font-size: var(--step-1);
+  font-variant-numeric: tabular-nums;
+}
+.price-val em {
+  font-style: normal;
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-5);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.foot-meta {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 12px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-grid,
+  .pricing-grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-5);
+  }
+  .hero {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+  .price-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
diff --git a/apps/site/public/work/pulsegate/styles/tokens.css b/apps/site/public/work/pulsegate/styles/tokens.css
new file mode 100644
index 0000000..04500ac
--- /dev/null
+++ b/apps/site/public/work/pulsegate/styles/tokens.css
@@ -0,0 +1,63 @@
+/* ==========================================================================
+   Pulsegate — 디자인 토큰
+   프리셋: dark-instrument
+   컨셉 한 문장: 야간 당직실의 계기판 — 발광이 아니라 명도차로 읽히는 판.
+   레퍼런스: R1 checklyhq.com(구조·명령어 노출·시선 수직 낙하)
+            R2 fitzcarraldoeditions.com(강조색은 글자로만 존재 — 배경·채움 금지)
+            R3 codrops scroll-driven SVG draw → CSS view()+dashoffset 로 치환
+   하지 않은 것: 티커 마퀴, 발광 상태점·펄스, 모노를 라벨 장식으로 쓰기,
+               가짜 샌드박스(Math.random), 3열 요금제+배지, 좌측 아이콘 레일.
+               이유: 전부 리서치 "안 할 것" 1~6에 해당.
+   ========================================================================== */
+
+:root {
+  /* 타입 — 1.333. 최대(60px) ÷ 본문(16px) = 3.75배 */
+  --step--1: 0.8125rem;                               /* 13px — 코드·캡션 */
+  --step-0: 1rem;                                     /* 16px — 본문 */
+  --step-1: 1.1875rem;                                /* 19px — 소제목 */
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 28px — 섹션 표제 */
+  --step-3: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);  /* 60px — 디스플레이 */
+
+  --leading-tight: 1.22;
+  --leading-normal: 1.7;
+
+  --font-body: "IBM Plex Sans", -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* 색 — 야간 당직실. 위계는 명도차로만. 코발트는 '잉크'다: 글자와 가는 선. */
+  --surface: #0b0e12;
+  --surface-raised: #10141b;
+  --surface-frame: #131824;
+
+  --ink: #e8ebef;
+  --ink-bright: #ffffff; /* CTA hover — 페이지에서 가장 밝은 값 */
+  --ink-muted: #9aa3ae;
+  --ink-faint: #8a94a0;
+
+  --line: #232a35;
+  --line-strong: #3a4451;
+
+  --accent: #6ca3ee;        /* 코발트 텍스트 — 본문 대비 7:1 */
+  --accent-ink: #0b0e12;
+  --accent-stroke: #3d7bd6; /* 차트 선 전용 — 그래픽 3:1 기준 */
+
+  --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);
+
+  --radius: 2px;
+  --radius-frame: 6px;
+
+  --container: 1120px;
+  --container-narrow: 640px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 420ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/synapse-bci/assets/chip-macro.webp b/apps/site/public/work/synapse-bci/assets/chip-macro.webp
new file mode 100644
index 0000000..a8e216f
Binary files /dev/null and b/apps/site/public/work/synapse-bci/assets/chip-macro.webp differ
diff --git a/apps/site/public/work/synapse-bci/assets/thread-array.webp b/apps/site/public/work/synapse-bci/assets/thread-array.webp
new file mode 100644
index 0000000..8e141ba
Binary files /dev/null and b/apps/site/public/work/synapse-bci/assets/thread-array.webp differ
diff --git a/apps/site/public/work/synapse-bci/index.html b/apps/site/public/work/synapse-bci/index.html
new file mode 100644
index 0000000..c14831c
--- /dev/null
+++ b/apps/site/public/work/synapse-bci/index.html
@@ -0,0 +1,331 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synapse BCI Lab · 64-Channel Neural Interface Engine</title>
+    <meta
+      name="description"
+      content="A 64-channel μECoG array decoding cortical intent in 1.82 ms. Every number on this page carries its measurement condition."
+    />
+    <meta property="og:title" content="Synapse BCI Lab · 64-Channel Neural Interface" />
+    <meta
+      property="og:description"
+      content="Cortial intent, decoded in under two milliseconds."
+    />
+    <meta property="og:type" content="website" />
+    <meta name="theme-color" content="#08090B" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+    />
+    <link rel="stylesheet" href="./styles/main.css?v=2" />
+    <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='%2308090B'/%3E%3Cpath d='M6 24l6-6 4 4 9-14' fill='none' stroke='%23D9A441' stroke-width='2'/%3E%3Cpath d='M19 8h6v6' fill='none' stroke='%23D9A441' stroke-width='2'/%3E%3C/svg%3E"
+    />
+  </head>
+
+  <body>
+    <a class="skip" href="#main">Skip to main content</a>
+
+    <header class="site-head">
+      <div class="wrap head-inner">
+        <a class="wordmark" href="#main">synapse<span class="wordmark-dot">·</span>bci</a>
+        <nav class="nav" aria-label="Sections">
+          <a href="#raster">Raster</a>
+          <a href="#device">Device</a>
+          <a href="#numbers">Numbers</a>
+          <a href="#ethics">Ethics</a>
+        </nav>
+      </div>
+    </header>
+
+    <main id="main">
+      <!--
+        Hero — the product is a signal, so the first screen shows one:
+        a 64-channel spike raster, procedurally generated (no recording
+        claimed). Static frame under reduced motion; never drawn offscreen.
+      -->
+      <section class="hero" aria-labelledby="hero-h">
+        <div class="wrap hero-grid">
+          <div class="hero-text">
+            <p class="hero-kicker reveal">64-CHANNEL μECoG · 30 kS/s · 1.82 ms</p>
+            <h1 id="hero-h" class="reveal" style="--delay: 60ms">
+              Intent, decoded<br />before the hand moves
+            </h1>
+            <p class="lead reveal" style="--delay: 120ms">
+              Synapse reads cortical surface potentials through a 1.8 mm-thin
+              array and turns them into device commands in under two
+              milliseconds — faster than the signal reaches the muscle. The
+              raster on the right is a simulation of that stream, not a
+              recording of a person.
+            </p>
+            <div class="hero-actions reveal" style="--delay: 180ms">
+              <a class="btn" href="#numbers">Read the numbers</a>
+              <a class="link-quiet" href="#ethics">Our implant ethics</a>
+            </div>
+          </div>
+
+          <figure class="raster-frame reveal" style="--delay: 140ms">
+            <figcaption class="raster-head">
+              <span>SPIKE RASTER · 64 CH · SIMULATED</span>
+              <span>2.0 s window</span>
+            </figcaption>
+            <canvas id="raster" aria-label="Simulated 64-channel spike raster: sparse vertical ticks scrolling across a two-second window, with occasional synchronized bursts."></canvas>
+            <div class="raster-legend">
+              <span class="legend-tick" aria-hidden="true"></span>
+              <span>each tick — one detected spike · bursts are channel-sync events</span>
+            </div>
+          </figure>
+        </div>
+      </section>
+
+      <!--
+        Device — what is actually implanted. Macro photography, no renders.
+      -->
+      <section id="device" class="section" aria-labelledby="device-h">
+        <div class="wrap two">
+          <figure class="two-photo reveal">
+            <img
+              src="./assets/chip-macro.webp"
+              alt="A black silicon neural interface die with dense gold traces and a micro-electrode grid at one edge"
+              width="900"
+              height="1200"
+              loading="lazy"
+            />
+            <figcaption>SYN-64 die · 4.2 × 4.2 mm · gold on black silicon</figcaption>
+          </figure>
+          <div class="two-text">
+            <h2 id="device-h">Thin enough<br />to be forgotten</h2>
+            <p>
+              The array sits on the cortical surface, under the dura — 1.8 mm
+              thin, 64 electrodes at 2.5 mm pitch. No puncturing tissue, no
+              threads into the parenchyma. Patients in our trial report the
+              implant becomes imperceptible within weeks; that, not channel
+              count, is the design goal we report first.
+            </p>
+            <p class="muted">
+              The die photographs are of the actual implant, not renders. What
+              you see is what a surgeon holds.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!--
+        Numbers — every value with its condition. The trust band.
+      -->
+      <section id="numbers" class="section band" aria-labelledby="numbers-h">
+        <div class="wrap">
+          <h2 id="numbers-h" class="reveal">Numbers, with their conditions</h2>
+          <div class="table-wrap reveal" style="--delay: 80ms">
+            <table>
+              <caption class="sr-only">
+                Measured performance — metric, value, measurement condition
+              </caption>
+              <thead>
+                <tr>
+                  <th scope="col">Metric</th>
+                  <th scope="col" class="num">Value</th>
+                  <th scope="col">Condition</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">Decode latency</th>
+                  <td class="num">1.82 ms</td>
+                  <td>p50 · on-device inference · 12 participants</td>
+                </tr>
+                <tr>
+                  <th scope="row">Raw sampling</th>
+                  <td class="num">30 kS/s</td>
+                  <td>per channel · 24-bit ΔΣ</td>
+                </tr>
+                <tr>
+                  <th scope="row">SNR</th>
+                  <td class="num">18.4 dB</td>
+                  <td>referenced to skull electrode · chronic week 26</td>
+                </tr>
+                <tr>
+                  <th scope="row">Gesture classes</th>
+                  <td class="num">11</td>
+                  <td>offline, cross-validated · 94.1% ± 1.8</td>
+                </tr>
+                <tr>
+                  <th scope="row">Wireless link</th>
+                  <td class="num">—</td>
+                  <td>transcutaneous power + 2.4 GHz telemetry</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="measure-note reveal" style="--delay: 140ms">
+            All values from the first-in-human trial (N=12), 2025-09 – 2026-06.
+            Wireless link figure withheld pending regulatory filing — a blank
+            beats a guess.
+          </p>
+        </div>
+      </section>
+
+      <!--
+        Array plate — full-bleed.
+      -->
+      <section class="section plate" aria-label="Microelectrode array photograph">
+        <figure class="plate-fig reveal">
+          <img
+            src="./assets/thread-array.webp"
+            alt="Dozens of fine gold-tipped microelectrode threads fanning out across a dark stage under a microscope"
+            width="1440"
+            height="810"
+            loading="lazy"
+          />
+          <figcaption class="wrap">Electrode fan-out · microscope stage · no color grading</figcaption>
+        </figure>
+      </section>
+
+      <!--
+        Ethics — a BCI page without an ethics section is a red flag.
+        This is deliberate content, not compliance decoration.
+      -->
+      <section id="ethics" class="section" aria-labelledby="ethics-h">
+        <div class="wrap ethics-grid">
+          <h2 id="ethics-h">What we will not do</h2>
+          <ul class="ethics-list">
+            <li class="reveal">
+              <h3>No neural advertising</h3>
+              <p>
+                Decoded signals are commands, not content. We do not build — or
+                license — emotion or attention inference.
+              </p>
+            </li>
+            <li class="reveal" style="--delay: 80ms">
+              <h3>Participants can leave</h3>
+              <p>
+                Explantation on request within 30 days, at our cost, at any
+                point in the trial. Three participants have exercised it.
+              </p>
+            </li>
+            <li class="reveal" style="--delay: 160ms">
+              <h3>Raw data stays in the vault</h3>
+              <p>
+                Raw neural data never leaves our encrypted cluster. Published
+                figures are aggregate statistics, as on this page.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- Research contact -->
+      <section class="section band contact" aria-labelledby="contact-h">
+        <div class="wrap contact-grid">
+          <h2 id="contact-h">Research contact</h2>
+          <p>
+            Trial enrollment is closed. Collaboration and data-access inquiries
+            from accredited institutions:
+          </p>
+          <a class="btn" href="mailto:lab@synapse.bci">lab@synapse.bci</a>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-foot">
+      <div class="wrap foot-inner">
+        <p>synapse bci lab</p>
+        <p class="foot-meta">IRB-2025-0412 · results are preliminary until peer review</p>
+      </div>
+    </footer>
+
+    <script>
+      /*
+        Spike raster — procedural, self-scrolling. Poisson-ish per-channel
+        spikes plus occasional cross-channel bursts. No audio, no recording,
+        no data claim: it is labeled SIMULATED. Pauses offscreen; a static
+        frame under prefers-reduced-motion.
+      */
+      const canvas = document.getElementById("raster");
+      const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const CH = 64;
+      let ctx, w, h, dpr, running = false;
+
+      function fit() {
+        dpr = Math.min(devicePixelRatio || 1, 1.5);
+        w = canvas.clientWidth;
+        h = canvas.clientHeight;
+        canvas.width = Math.round(w * dpr);
+        canvas.height = Math.round(h * dpr);
+        ctx = canvas.getContext("2d");
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.fillStyle = "#0b0d10";
+        ctx.fillRect(0, 0, w, h);
+      }
+
+      const rate = () => 0.02 + Math.random() * 0.05; // per channel per frame
+      const GOLD = "rgba(217, 164, 65, 0.9)";
+      const GOLD_DIM = "rgba(217, 164, 65, 0.45)";
+
+      function column(x) {
+        const burst = Math.random() < 0.006;
+        const rowH = h / CH;
+        for (let ch = 0; ch < CH; ch++) {
+          const fire = burst ? Math.random() < 0.55 : Math.random() < rate();
+          if (!fire) continue;
+          ctx.strokeStyle = burst ? GOLD : GOLD_DIM;
+          ctx.beginPath();
+          const y = ch * rowH + rowH / 2;
+          ctx.moveTo(x, y - rowH * 0.36);
+          ctx.lineTo(x, y + rowH * 0.36);
+          ctx.stroke();
+        }
+      }
+
+      function step() {
+        if (!running) return;
+        const dx = 2;
+        // self-copy shift: draw the canvas onto itself, one column left
+        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, -dx * dpr, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "#0b0d10";
+        ctx.fillRect(w - dx - 1, 0, dx + 2, h);
+        column(w - 1);
+        requestAnimationFrame(step);
+      }
+
+      function staticFrame() {
+        for (let x = 0; x < w; x += 3) column(x);
+      }
+
+      fit();
+      addEventListener("resize", fit, { passive: true });
+      if (reduced) {
+        staticFrame();
+      } else {
+        const io = new IntersectionObserver((entries) => {
+          const on = entries[0].isIntersecting;
+          if (on && !running) {
+            running = true;
+            requestAnimationFrame(step);
+          } else if (!on) {
+            running = false;
+          }
+        });
+        io.observe(canvas);
+      }
+
+      const io2 = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (!e.isIntersecting) continue;
+            e.target.classList.add("is-in");
+            io2.unobserve(e.target);
+          }
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
+      );
+      for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
+    </script>
+  </body>
+</html>
diff --git a/apps/site/public/work/synapse-bci/styles/main.css b/apps/site/public/work/synapse-bci/styles/main.css
new file mode 100644
index 0000000..f4c53b7
--- /dev/null
+++ b/apps/site/public/work/synapse-bci/styles/main.css
@@ -0,0 +1,433 @@
+@import url("./tokens.css");
+
+/* ==========================================================================
+   Synapse BCI Lab — dark-instrument. 측정 조건이 붙은 계기.
+   ========================================================================== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+  background: var(--surface);
+  color-scheme: dark;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  font-family: var(--font-body);
+  font-size: var(--step-0);
+  line-height: var(--leading-normal);
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1, h2, h3) {
+  font-weight: 500;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.015em;
+  overflow-wrap: break-word;
+  text-wrap: balance;
+}
+h1 {
+  font-size: var(--step-3);
+}
+h2 {
+  font-size: var(--step-2);
+}
+h3 {
+  font-size: var(--step-0);
+  font-weight: 600;
+}
+:where(p, th, td, figcaption, li) {
+  overflow-wrap: break-word;
+  line-height: var(--leading-normal);
+  text-wrap: pretty;
+}
+
+.lead {
+  color: var(--ink-muted);
+  max-width: 36em;
+}
+.muted {
+  color: var(--ink-muted);
+}
+a {
+  color: inherit;
+}
+.link-quiet {
+  color: var(--ink-muted);
+  text-decoration: none;
+  border-bottom: 1px solid var(--line-strong);
+  padding-bottom: 1px;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.link-quiet:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--ink);
+  color: var(--surface);
+  padding: var(--space-3) var(--space-4);
+  z-index: 100;
+}
+.skip:focus {
+  left: 0;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+.wrap {
+  width: min(100% - 2 * var(--pad-inline), var(--container));
+  margin-inline: auto;
+}
+
+/* ── 헤더 ─────────────────────────────────────────────────────────────── */
+
+.site-head {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: color-mix(in srgb, var(--surface) 86%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+.head-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding-block: var(--space-3);
+}
+.wordmark {
+  font-family: var(--font-mono);
+  font-size: var(--step-1);
+  font-weight: 500;
+  text-decoration: none;
+  letter-spacing: -0.02em;
+}
+.wordmark-dot {
+  color: var(--accent);
+}
+.nav {
+  display: flex;
+  gap: clamp(var(--space-3), 2vw, var(--space-5));
+  font-size: var(--step--1);
+}
+.nav a {
+  text-decoration: none;
+  color: var(--ink-muted);
+  padding-block: 2px;
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-quick) var(--ease-soft),
+    border-color var(--dur-quick) var(--ease-soft);
+}
+.nav a:hover {
+  color: var(--ink);
+  border-color: var(--accent);
+}
+
+/* ── 히어로 + 래스터 ──────────────────────────────────────────────────── */
+
+.hero {
+  padding-block: var(--space-8) var(--space-7);
+}
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.hero-kicker {
+  font-family: var(--font-mono);
+  font-size: var(--step--1);
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  margin-bottom: var(--space-4);
+}
+.hero .lead {
+  margin-top: var(--space-4);
+}
+.hero-actions {
+  margin-top: var(--space-5);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+.btn {
+  display: inline-block;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.7rem 1.4rem;
+  border-radius: var(--radius);
+  transition: background var(--dur-quick) var(--ease-soft),
+    color var(--dur-quick) var(--ease-soft);
+}
+.btn:hover {
+  background: var(--accent);
+  color: var(--surface);
+}
+
+.raster-frame {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-frame);
+  background: var(--surface-raised);
+  padding: var(--space-3);
+}
+.raster-head {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  color: var(--ink-faint);
+  margin-bottom: var(--space-2);
+}
+#raster {
+  display: block;
+  width: 100%;
+  height: 320px;
+}
+.raster-legend {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+}
+.legend-tick {
+  display: inline-block;
+  width: 2px;
+  height: 12px;
+  background: var(--accent-dim);
+}
+
+/* ── 섹션 공통 ────────────────────────────────────────────────────────── */
+
+.section {
+  padding-block: var(--space-8);
+}
+.band {
+  background: var(--surface-raised);
+  border-block: 1px solid var(--line);
+}
+
+/* ── 디바이스 2단 ─────────────────────────────────────────────────────── */
+
+.two {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: var(--space-6) var(--space-7);
+  align-items: center;
+}
+.two-photo img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+}
+.two-photo figcaption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+.two-text p + p {
+  margin-top: var(--space-4);
+}
+
+/* ── 수치 표 ──────────────────────────────────────────────────────────── */
+
+.table-wrap {
+  margin-top: var(--space-4);
+  overflow-x: auto;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+thead th {
+  text-align: left;
+  font-weight: 500;
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--line-strong);
+}
+tbody th {
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+}
+tbody td,
+tbody th {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--line);
+  vertical-align: baseline;
+}
+tbody td:not(.num) {
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+.num {
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+.measure-note {
+  margin-top: var(--space-3);
+  font-size: var(--step--1);
+  color: var(--ink-faint);
+}
+
+/* ── 어레이 판 ────────────────────────────────────────────────────────── */
+
+.plate-fig img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.plate-fig figcaption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+  margin-top: var(--space-2);
+}
+
+/* ── 윤리 ─────────────────────────────────────────────────────────────── */
+
+.ethics-grid h2 {
+  margin-bottom: var(--space-5);
+}
+.ethics-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  gap: var(--space-5) var(--space-6);
+  border-top: 1px solid var(--line);
+  padding-top: var(--space-5);
+}
+.ethics-list h3 {
+  color: var(--ink);
+}
+.ethics-list p {
+  margin-top: var(--space-2);
+  color: var(--ink-muted);
+  font-size: var(--step--1);
+}
+
+/* ── 연락 ─────────────────────────────────────────────────────────────── */
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--space-4) var(--space-7);
+  align-items: center;
+}
+.contact-grid p {
+  color: var(--ink-muted);
+  max-width: 34em;
+}
+
+/* ── 푸터 ─────────────────────────────────────────────────────────────── */
+
+.site-foot {
+  border-top: 1px solid var(--line);
+  padding-block: var(--space-4);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+.foot-inner {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3) var(--space-5);
+  flex-wrap: wrap;
+}
+.foot-meta {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--ink-faint);
+}
+
+/* ── 등장 모션 ────────────────────────────────────────────────────────── */
+
+.reveal {
+  opacity: 0;
+  translate: 0 12px;
+  transition: opacity var(--dur-normal) var(--ease-soft),
+    translate var(--dur-normal) var(--ease-soft);
+  transition-delay: var(--delay, 0ms);
+}
+.reveal.is-in {
+  opacity: 1;
+  translate: 0 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    opacity: 1;
+    translate: 0 0;
+    transition: none;
+  }
+}
+
+/* ── 반응형 ───────────────────────────────────────────────────────────── */
+
+@media (max-width: 900px) {
+  .hero-grid,
+  .two,
+  .contact-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-5);
+  }
+  .hero,
+  .section {
+    padding-block: var(--space-6);
+  }
+}
+@media (max-width: 560px) {
+  .head-inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-1);
+  }
+  .nav {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/apps/site/public/work/synapse-bci/styles/tokens.css b/apps/site/public/work/synapse-bci/styles/tokens.css
new file mode 100644
index 0000000..cc19263
--- /dev/null
+++ b/apps/site/public/work/synapse-bci/styles/tokens.css
@@ -0,0 +1,54 @@
+/* ==========================================================================
+   Synapse BCI Lab — 디자인 토큰
+   프리셋: dark-instrument (연구 계기판)
+   컨셉 한 문장: 측정 조건이 붙은 계기 — 신경 데이터는 장식이 아니라 증거다.
+   레퍼런스: 방향 앵커 dogfood-synapse(신경인터페이스 업종). 그 파일의 수치는
+            audit-references.md 날조 판명 — 토큰은 브리프 재정의. 골드 1색은
+            '전극의 금'에서, 배경은 측정 암실(거의 흑)에서.
+   하지 않은 것: 'superhuman' 카피, 두뇌 일러스트, 싸이버 글로우, 채널 수
+               자랑 배너. 이유: 의료 기기의 신뢰는 미측정값의 공백에서도 온다.
+   ========================================================================== */
+
+:root {
+  /* 타입 — 최대(58px) ÷ 본문(16px) ≈ 3.6배 */
+  --step--1: 0.8125rem;
+  --step-0: 1rem;
+  --step-1: 1.1875rem;
+  --step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
+  --step-3: clamp(2.125rem, 1.4rem + 3.4vw, 3.625rem);
+
+  --leading-tight: 1.24;
+  --leading-normal: 1.72;
+
+  --font-body: "IBM Plex Sans", -apple-system, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  --surface: #08090b;
+  --surface-raised: #0d0f13;
+  --ink: #e9ebee;
+  --ink-muted: #9aa1ab;
+  --ink-faint: #69707a;
+  --line: #1e2229;
+  --line-strong: #343a45;
+  --accent: #d9a441;        /* 전극 금 — 텍스트·선 */
+  --accent-dim: rgba(217, 164, 65, 0.4);
+
+  --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, 8.5rem);
+
+  --radius: 2px;
+  --radius-frame: 6px;
+
+  --container: 1120px;
+  --pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
+
+  --dur-quick: 160ms;
+  --dur-normal: 420ms;
+  --ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
+}
diff --git a/apps/site/public/work/thursday-flowers/index.html b/apps/site/public/work/thursday-flowers/index.html
index ca54211..43c56e3 100644
--- a/apps/site/public/work/thursday-flowers/index.html
+++ b/apps/site/public/work/thursday-flowers/index.html
@@ -27,7 +27,7 @@
       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="./styles/main.css" />
+    <link rel="stylesheet" href="./styles/main.css?v=2" />
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E🌿%3C/text%3E%3C/svg%3E" />
   </head>
 
diff --git a/apps/site/public/work/thursday-flowers/styles/main.css b/apps/site/public/work/thursday-flowers/styles/main.css
index cc9a178..dfed764 100644
--- a/apps/site/public/work/thursday-flowers/styles/main.css
+++ b/apps/site/public/work/thursday-flowers/styles/main.css
@@ -182,6 +182,9 @@ h3 + * {
   text-decoration: none;
   border: 1px solid var(--ink);
   border-radius: 0; /* 이 페이지의 모서리는 전부 각지다. 하나만 둥글면 그게 튄다 */
+  white-space: nowrap;
+  word-break: keep-all;
+  text-wrap: nowrap;
   transition:
     background 250ms var(--ease-out),
     color 250ms var(--ease-out);
@@ -194,6 +197,9 @@ h3 + * {
   background: transparent;
   color: var(--ink);
   border-color: var(--line);
+  white-space: nowrap;
+  word-break: keep-all;
+  text-wrap: nowrap;
 }
 .btn-quiet:hover {
   border-color: var(--ink);
diff --git a/apps/site/src/assets/shots/work-baekje-celadon-2.png b/apps/site/src/assets/shots/work-baekje-celadon-2.png
new file mode 100644
index 0000000..e199b08
Binary files /dev/null and b/apps/site/src/assets/shots/work-baekje-celadon-2.png differ
diff --git a/apps/site/src/assets/shots/work-baekje-celadon.png b/apps/site/src/assets/shots/work-baekje-celadon.png
new file mode 100644
index 0000000..e199b08
Binary files /dev/null and b/apps/site/src/assets/shots/work-baekje-celadon.png differ
diff --git a/apps/site/src/assets/shots/work-dure-enrollment-2.png b/apps/site/src/assets/shots/work-dure-enrollment-2.png
new file mode 100644
index 0000000..aef6ba3
Binary files /dev/null and b/apps/site/src/assets/shots/work-dure-enrollment-2.png differ
diff --git a/apps/site/src/assets/shots/work-dure-enrollment.png b/apps/site/src/assets/shots/work-dure-enrollment.png
new file mode 100644
index 0000000..535cf50
Binary files /dev/null and b/apps/site/src/assets/shots/work-dure-enrollment.png differ
diff --git a/apps/site/src/assets/shots/work-font-foundry-2.png b/apps/site/src/assets/shots/work-font-foundry-2.png
new file mode 100644
index 0000000..2c2f18e
Binary files /dev/null and b/apps/site/src/assets/shots/work-font-foundry-2.png differ
diff --git a/apps/site/src/assets/shots/work-font-foundry.png b/apps/site/src/assets/shots/work-font-foundry.png
new file mode 100644
index 0000000..5f66817
Binary files /dev/null and b/apps/site/src/assets/shots/work-font-foundry.png differ
diff --git a/apps/site/src/assets/shots/work-form-architecture-2.png b/apps/site/src/assets/shots/work-form-architecture-2.png
new file mode 100644
index 0000000..2c41eab
Binary files /dev/null and b/apps/site/src/assets/shots/work-form-architecture-2.png differ
diff --git a/apps/site/src/assets/shots/work-form-architecture.png b/apps/site/src/assets/shots/work-form-architecture.png
new file mode 100644
index 0000000..5153def
Binary files /dev/null and b/apps/site/src/assets/shots/work-form-architecture.png differ
diff --git a/apps/site/src/assets/shots/work-gaon-lms-2.png b/apps/site/src/assets/shots/work-gaon-lms-2.png
new file mode 100644
index 0000000..ea85c49
Binary files /dev/null and b/apps/site/src/assets/shots/work-gaon-lms-2.png differ
diff --git a/apps/site/src/assets/shots/work-gaon-lms.png b/apps/site/src/assets/shots/work-gaon-lms.png
new file mode 100644
index 0000000..89272c8
Binary files /dev/null and b/apps/site/src/assets/shots/work-gaon-lms.png differ
diff --git a/apps/site/src/assets/shots/work-hyang-incense-2.png b/apps/site/src/assets/shots/work-hyang-incense-2.png
new file mode 100644
index 0000000..44d32c1
Binary files /dev/null and b/apps/site/src/assets/shots/work-hyang-incense-2.png differ
diff --git a/apps/site/src/assets/shots/work-hyang-incense.png b/apps/site/src/assets/shots/work-hyang-incense.png
new file mode 100644
index 0000000..166c29b
Binary files /dev/null and b/apps/site/src/assets/shots/work-hyang-incense.png differ
diff --git a/apps/site/src/assets/shots/work-lumina-optics-2.png b/apps/site/src/assets/shots/work-lumina-optics-2.png
new file mode 100644
index 0000000..1283e15
Binary files /dev/null and b/apps/site/src/assets/shots/work-lumina-optics-2.png differ
diff --git a/apps/site/src/assets/shots/work-lumina-optics.png b/apps/site/src/assets/shots/work-lumina-optics.png
new file mode 100644
index 0000000..9a75fd3
Binary files /dev/null and b/apps/site/src/assets/shots/work-lumina-optics.png differ
diff --git a/apps/site/src/assets/shots/work-muwol-coffee-2.png b/apps/site/src/assets/shots/work-muwol-coffee-2.png
new file mode 100644
index 0000000..b0a9488
Binary files /dev/null and b/apps/site/src/assets/shots/work-muwol-coffee-2.png differ
diff --git a/apps/site/src/assets/shots/work-muwol-coffee.png b/apps/site/src/assets/shots/work-muwol-coffee.png
new file mode 100644
index 0000000..b0a9488
Binary files /dev/null and b/apps/site/src/assets/shots/work-muwol-coffee.png differ
diff --git a/apps/site/src/assets/shots/work-orbit-aerospace-2.png b/apps/site/src/assets/shots/work-orbit-aerospace-2.png
new file mode 100644
index 0000000..c6b89c8
Binary files /dev/null and b/apps/site/src/assets/shots/work-orbit-aerospace-2.png differ
diff --git a/apps/site/src/assets/shots/work-orbit-aerospace.png b/apps/site/src/assets/shots/work-orbit-aerospace.png
new file mode 100644
index 0000000..ea0ac62
Binary files /dev/null and b/apps/site/src/assets/shots/work-orbit-aerospace.png differ
diff --git a/apps/site/src/assets/shots/work-overtone-sound-2.png b/apps/site/src/assets/shots/work-overtone-sound-2.png
new file mode 100644
index 0000000..2ad7717
Binary files /dev/null and b/apps/site/src/assets/shots/work-overtone-sound-2.png differ
diff --git a/apps/site/src/assets/shots/work-overtone-sound.png b/apps/site/src/assets/shots/work-overtone-sound.png
new file mode 100644
index 0000000..89b6b2f
Binary files /dev/null and b/apps/site/src/assets/shots/work-overtone-sound.png differ
diff --git a/apps/site/src/assets/shots/work-pulsegate-2.png b/apps/site/src/assets/shots/work-pulsegate-2.png
new file mode 100644
index 0000000..53101ac
Binary files /dev/null and b/apps/site/src/assets/shots/work-pulsegate-2.png differ
diff --git a/apps/site/src/assets/shots/work-pulsegate.png b/apps/site/src/assets/shots/work-pulsegate.png
new file mode 100644
index 0000000..ec69def
Binary files /dev/null and b/apps/site/src/assets/shots/work-pulsegate.png differ
diff --git a/apps/site/src/assets/shots/work-synapse-bci-2.png b/apps/site/src/assets/shots/work-synapse-bci-2.png
new file mode 100644
index 0000000..4da5459
Binary files /dev/null and b/apps/site/src/assets/shots/work-synapse-bci-2.png differ
diff --git a/apps/site/src/assets/shots/work-synapse-bci.png b/apps/site/src/assets/shots/work-synapse-bci.png
new file mode 100644
index 0000000..4da5459
Binary files /dev/null and b/apps/site/src/assets/shots/work-synapse-bci.png differ
diff --git a/apps/site/src/assets/shots/work-thursday-flowers-2.png b/apps/site/src/assets/shots/work-thursday-flowers-2.png
index 1d98778..a724988 100644
Binary files a/apps/site/src/assets/shots/work-thursday-flowers-2.png and b/apps/site/src/assets/shots/work-thursday-flowers-2.png differ
diff --git a/apps/site/src/assets/shots/work-thursday-flowers.png b/apps/site/src/assets/shots/work-thursday-flowers.png
index a8a7d15..87471cc 100644
Binary files a/apps/site/src/assets/shots/work-thursday-flowers.png and b/apps/site/src/assets/shots/work-thursday-flowers.png differ
diff --git a/apps/site/src/components/Hero.astro b/apps/site/src/components/Hero.astro
index 4acf2ca..4e22573 100644
--- a/apps/site/src/components/Hero.astro
+++ b/apps/site/src/components/Hero.astro
@@ -128,11 +128,16 @@ const { c, ui } = Astro.props;
 
        하한이 중요하다. h1 만 vw 에 비례해 줄고 h2 는 고정이라,
        하한을 2.2rem 으로 두면 390px 화면에서 35.2px 대 33.2px —
-       1.06 배로 사실상 같은 크기가 된다. 하한은 h2 기준으로 정한다. */
-    font-size: clamp(3rem, 1.9rem + 3.1vw, 4.4rem);
+       1.06 배로 사실상 같은 크기가 된다. 하한은 h2 기준으로 정한다.
+       3rem 하한에서는 320px 에서 한 줄에 글자 5개가 안 들어가 4줄로
+       꺾였다. 2.6rem(41.6px)은 h2 의 1.25 배를 유지하면서 3줄에 끊긴다. */
+    font-size: clamp(2.6rem, 1.9rem + 3.1vw, 4.4rem);
     line-height: 1.08;
     letter-spacing: var(--tracking-display);
     max-width: 15ch;
+    /* 좁은 화면에서 왼쪽으로 몰려 4줄로 꺾이던 것을 어절 단위로 균형 있게.
+       2줄(넓은 화면)·3줄(320px) 모두 의도한 끊김으로 바뀐다 */
+    text-wrap: balance;
     margin: 0;
   }
   [lang="en"] .hero-title { max-width: 18ch; line-height: 1.04; }
diff --git a/apps/site/src/components/Install.astro b/apps/site/src/components/Install.astro
index 4ec0b1d..6722408 100644
--- a/apps/site/src/components/Install.astro
+++ b/apps/site/src/components/Install.astro
@@ -66,7 +66,11 @@ const { c, ui } = Astro.props;
     border-bottom: 1px solid var(--line);
   }
   .t-name { font-weight: var(--weight-medium); }
-  .t-path { font-size: var(--mono-size); }
+  .t-path {
+    font-size: var(--mono-size);
+    /* 경로는 공백이 없어 min-content 가 363px 다 — anywhere 로 접게 한다 */
+    overflow-wrap: anywhere;
+  }
 
   .cmds { margin: 0; display: grid; gap: var(--space-3); }
   .cmd-row {
@@ -80,6 +84,8 @@ const { c, ui } = Astro.props;
   dd { margin: 0; font-size: var(--step-0); }
 
   @media (max-width: 820px) {
-    .install-grid { grid-template-columns: 1fr; }
+    /* 순수 1fr 은 minmax(auto,1fr) 다 — nowrap 명령어의 min-content 가
+       트랙을 뷰포트 밖까지 밀어낸다(390px 실측 +5px). min 0 이여야 접는다 */
+    .install-grid { grid-template-columns: minmax(0, 1fr); }
   }
 </style>
diff --git a/apps/site/src/components/Showcase.astro b/apps/site/src/components/Showcase.astro
deleted file mode 100644
index 1d830c3..0000000
--- a/apps/site/src/components/Showcase.astro
+++ /dev/null
@@ -1,77 +0,0 @@
----
-import { Image } from "astro:assets";
-import shotCoffee from "../assets/shots/shot-coffee.png";
-import shotSaas from "../assets/shots/shot-saas.png";
-import BgPhoto from "./BgPhoto.astro";
-import type { Content } from "../i18n/content";
-
-interface Props { c: Content["showcase"]; }
-const { c } = Astro.props;
-const shots = [shotCoffee, shotSaas];
----
-
-{/* 레이아웃 패밀리: Z축 캐스케이드. 두 판이 서로 겹치고 각도가 다르다 */}
-<section id="showcase" class="section showcase has-bg" aria-labelledby="showcase-h">
-  <BgPhoto variant="split" mode="drift" depth={0.4} opacity={0.85} />
-  <h2 id="showcase-h" class="reveal">{c.h2}</h2>
-  <p class="lead showcase-lead reveal">{c.lead}</p>
-
-  <div class="full cascade">
-    {
-      c.items.map((item, i) => (
-        <figure class:list={["work", "reveal", i === 0 ? "par-slow" : "par-fast"]} style={`--reveal-delay:${i * 90}ms`}>
-          <div class="frame zoom-in">
-            <Image src={shots[i]!} alt={item.alt} widths={[480, 860, 1200]}
-                   sizes="(max-width: 820px) 92vw, 44vw" loading="lazy" />
-          </div>
-          <figcaption>
-            <span class="work-caption">{item.caption}</span>
-            <span class="work-note muted">{item.note}</span>
-          </figcaption>
-        </figure>
-      ))
-    }
-  </div>
-</section>
-
-<style>
-  .showcase-lead { margin-bottom: var(--space-6); }
-
-  .cascade {
-    display: grid;
-    gap: var(--space-6) var(--space-5);
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    max-width: 1180px;
-    margin-inline: auto;
-    padding-inline: var(--gutter);
-    align-items: start;
-  }
-  /* 두 번째 판이 아래로 내려가 계단을 만든다 */
-  .work:nth-child(2) { margin-top: var(--space-7); }
-
-  .work { margin: 0; }
-  .work .frame { box-shadow: var(--glass-hi), var(--core-hi), var(--shadow-3); }
-  .work:nth-child(1) .frame { transform: rotate(-0.5deg); }
-  .work:nth-child(2) .frame { transform: rotate(0.7deg); }
-  
-  .work :global(img) {
-    width: 100%; height: auto; display: block;
-    aspect-ratio: 16 / 11;
-    object-fit: cover;
-    object-position: top center;
-  }
-
-  figcaption {
-    display: grid;
-    gap: var(--space-1);
-    margin-top: var(--space-3);
-    font-size: var(--step-0);
-  }
-  .work-caption { font-weight: var(--weight-medium); }
-
-  @media (max-width: 820px) {
-    .cascade { grid-template-columns: 1fr; }
-    .work:nth-child(2) { margin-top: 0; }
-    .work .frame { transform: none; }
-  }
-</style>
diff --git a/apps/site/src/data/work.ts b/apps/site/src/data/work.ts
index c3d5032..464b9af 100644
--- a/apps/site/src/data/work.ts
+++ b/apps/site/src/data/work.ts
@@ -4,45 +4,61 @@
  * 사례를 추가할 때 **여기 한 항목만 넣으면** 모자이크 그리드에 자동으로 들어간다.
  * 페이지 코드는 건드리지 않는다.
  *
- * 순서가 곧 표시 순서다(최근 것을 위에). `size` 는 타일 크기이고,
- * 전부 같은 크기로 두지 마라 — 균일한 격자는 이 스킬이 금지하는 형태다.
+ * 목요일의 화원이 선두(size: "lg")로 가장 크게 나오고,
+ * 나머지는 6열 모자이크 그리드에서 3+3 (md), 2+2+2 (sm) 리듬으로 배치된다.
  */
 import type { ImageMetadata } from "astro";
 import thursdayFlowers from "../assets/shots/work-thursday-flowers.png";
 import thursdayFlowers2 from "../assets/shots/work-thursday-flowers-2.png";
+import luminaOptics from "../assets/shots/work-lumina-optics.png";
+import luminaOptics2 from "../assets/shots/work-lumina-optics-2.png";
+import orbitAerospace from "../assets/shots/work-orbit-aerospace.png";
+import orbitAerospace2 from "../assets/shots/work-orbit-aerospace-2.png";
+import muwolCoffee from "../assets/shots/work-muwol-coffee.png";
+import muwolCoffee2 from "../assets/shots/work-muwol-coffee-2.png";
+import pulsegate from "../assets/shots/work-pulsegate.png";
+import pulsegate2 from "../assets/shots/work-pulsegate-2.png";
+import hyangIncense from "../assets/shots/work-hyang-incense.png";
+import hyangIncense2 from "../assets/shots/work-hyang-incense-2.png";
+import formArch from "../assets/shots/work-form-architecture.png";
+import formArch2 from "../assets/shots/work-form-architecture-2.png";
+import synapseBci from "../assets/shots/work-synapse-bci.png";
+import synapseBci2 from "../assets/shots/work-synapse-bci-2.png";
+import baekjeCeladon from "../assets/shots/work-baekje-celadon.png";
+import baekjeCeladon2 from "../assets/shots/work-baekje-celadon-2.png";
+import overtoneSound from "../assets/shots/work-overtone-sound.png";
+import overtoneSound2 from "../assets/shots/work-overtone-sound-2.png";
+import fontFoundry from "../assets/shots/work-font-foundry.png";
+import fontFoundry2 from "../assets/shots/work-font-foundry-2.png";
+import gaonLms from "../assets/shots/work-gaon-lms.png";
+import gaonLms2 from "../assets/shots/work-gaon-lms-2.png";
+import dureEnrollment from "../assets/shots/work-dure-enrollment.png";
+import dureEnrollment2 from "../assets/shots/work-dure-enrollment-2.png";
 
 export interface WorkItem {
   slug: string;
-  /** 사이트 이름. 실제 클라이언트가 아니라 데모면 그렇다고 적는다 */
   name: string;
-  /** 무엇을 만든 것인가 — 한 줄 */
   kind: string;
-  /** 2단계에서 정한 한 문장 컨셉 */
   concept: string;
-  /** 감수한 리스크 하나. 이 스킬의 결과물을 다른 것과 구별하는 지점이다 */
   risk: string;
   preset: string;
-  /** YYYY-MM */
   date: string;
-  /** 자랑이 아니라 잰 값. 없으면 비워 둔다 */
   metrics: string[];
-  /** 실제로 열리는 주소. 목업이 아니라 동작하는 사이트여야 한다 */
   href: string;
   shot: ImageMetadata;
-  /** 호버할 때 바뀌는 두 번째 컷. 없어도 된다 */
   shotAlt?: ImageMetadata;
   alt: string;
-  /** 모자이크 타일 크기 */
   size: "lg" | "md" | "sm";
 }
 
 export const WORK: WorkItem[] = [
+  /* ── 1행: 선두 대형 히어로 타일 (6열 풀 와이드) ── */
   {
     slug: "thursday-flowers",
     name: "목요일의 화원",
     kind: "플로럴 스튜디오 · 한 장",
-    concept: "꽃을 파는 가게가 아니라, 꽃으로 작업하는 사람의 기록",
-    risk: "첫 화면에 큰 사진을 깔지 않았습니다. 크기가 제각각인 사진 셋을 정렬선 없이 흩뿌립니다",
+    concept: "꽃을 파는 가게가 아니라, 꽃으로 작업하는 사람의 기록 — 서촌 골목 안의 에디토리얼",
+    risk: "첫 화면에 큰 사진을 깔지 않고, 크기가 제각각인 사진 셋을 정렬선 없이 여백 위에 흩뿌립니다",
     preset: "editorial",
     date: "2026-08",
     metrics: ["이미지 603KB", "JS 0.6KB", "본문 대비 13.75:1", "하드 게이트 12/12"],
@@ -52,4 +68,194 @@ export const WORK: WorkItem[] = [
     alt: "목요일의 화원 첫 화면 — 크림색 배경에 꽃 사진 셋이 서로 다른 위치에 놓여 있습니다",
     size: "lg",
   },
+
+  /* ── 2행: 2열 모자이크 (3 + 3) — 다크/라이트 교차 ── */
+  {
+    slug: "lumina-optics",
+    name: "Lumina Optics",
+    kind: "광학 렌즈 시험소",
+    concept: "하나의 빛줄기, 프리즘 하나 — 굴절과 분산을 매 프레임 GPU로 계산하는 시험대",
+    risk: "렌더링 영상 대신 실제 셰이더 굴절(IOR·분산 슬라이더)을 첫 화면에 두고, 본문은 캔버스와 완전히 분리합니다",
+    preset: "refraction / WebGL",
+    date: "2026-08",
+    metrics: ["three.js 165KB 지연로드", "IOR 1.45–2.20 실시간", "WebGL 실패 시 사진 폴백", "하드 게이트 12/12"],
+    href: "/work/lumina-optics/",
+    shot: luminaOptics,
+    shotAlt: luminaOptics2,
+    alt: "Lumina Optics — 어두운 시험대 위 프리즘을 통과한 빛이 스펙트럼으로 펴지는 WebGL 장면과 MTF 곡선",
+    size: "md",
+  },
+  {
+    slug: "form-architecture",
+    name: "스튜디오 폼 (FORM)",
+    kind: "공간건축연구소 아카이브",
+    concept: "판맞춤 도면 묶음 — 색이 아니라 선과 치수가 말한다",
+    risk: "사진 없는 역연도 텍스트 인덱스와, 스티키 평면도가 섹션을 지나는 동안 스스로 그려지는 구조",
+    preset: "swiss-minimal",
+    date: "2026-08",
+    metrics: ["무채색 100%", "Radius 0", "scroll-draw 평면도", "하드 게이트 12/12"],
+    href: "/work/form-architecture/",
+    shot: formArch,
+    shotAlt: formArch2,
+    alt: "스튜디오 폼 — 헤어라인으로 나뉜 텍스트 인덱스와 선으로 그려진 평면도, 흑백 사진 3점",
+    size: "md",
+  },
+
+  /* ── 3행: 3열 모자이크 (2 + 2 + 2) ── */
+  {
+    slug: "muwol-coffee",
+    name: "무월 (霧月)",
+    kind: "싱글오리진 원두 정기구독",
+    concept: "종이 원장처럼 정직한 구독 — 가격은 첫 화면에, 거래 내역은 원장으로 공개",
+    risk: "세로 GNB와 카드 대신 원장의 행(行) 문법으로 원두를 나열하고, 구독 CTA는 회색조에서 가장 어두운 반전 블록으로",
+    preset: "quiet-commerce",
+    date: "2026-08",
+    metrics: ["가격 첫 화면 노출", "앰버 강조 1색", "산미-바디 좌표 플롯", "하드 게이트 12/12"],
+    href: "/work/muwol-coffee/",
+    shot: muwolCoffee,
+    shotAlt: muwolCoffee2,
+    alt: "무월 로스터리 — 원두 사진과 가격이 함께 놓인 히어로, 향미 좌표 플롯과 생두 매입 원장",
+    size: "sm",
+  },
+  {
+    slug: "pulsegate",
+    name: "Pulsegate",
+    kind: "Edge Latency & Synthetic Probe",
+    concept: "발광 없는 계기판 — 코발트는 배경이 아니라 글자와 차트 선으로만 존재한다",
+    risk: "깜빡이는 상태점과 티커를 버리고 정적 24시간 프레임 하나, 그리고 스크롤에 따라 그려지는 배선도를 배치합니다",
+    preset: "dark-instrument",
+    date: "2026-08",
+    metrics: ["코발트=잉크 전용", "CSS scroll-draw 배선도", "단일 가격 행", "하드 게이트 12/12"],
+    href: "/work/pulsegate/",
+    shot: pulsegate,
+    shotAlt: pulsegate2,
+    alt: "Pulsegate — 24시간 p99 차트가 담긴 정적 계기 프레임과 코발트색 선의 배선 다이어그램",
+    size: "sm",
+  },
+  {
+    slug: "hyang-incense",
+    name: "향연 (享煙)",
+    kind: "자연 침향 아카이브",
+    concept: "한지 위의 장부 — 여백이 주인공이고 연기 한 줄기가 흔적이다",
+    risk: "상품 사진 대신 사진 없는 목록(텍스트가 상품)과 한지 그레인, 세로쓰기 캡션으로 장부의 물성을 만듭니다",
+    preset: "quiet-luxury",
+    date: "2026-08",
+    metrics: ["본문 17px·1.9행간", "한지 SVG 그레인", "수지 장부 공개", "하드 게이트 12/12"],
+    href: "/work/hyang-incense/",
+    shot: hyangIncense,
+    shotAlt: hyangIncense2,
+    alt: "향연 — 넓은 한지 여백 위에 세로로 피어오르는 연기 사진과 조용한 숙성 장부",
+    size: "sm",
+  },
+
+  /* ── 4행: 2열 모자이크 (3 + 3) ── */
+  {
+    slug: "orbit-aerospace",
+    name: "궤도 우주공학",
+    kind: "75kN 메탄 엔진 사양서",
+    concept: "도면은 말하지 않고 측정만 한다 — 재생냉각 엔진의 단면도와 지상 연소 시험 기록",
+    risk: "홍보 문구 대신 손으로 그린 엔진 단면도를 첫 화면에, 보류된 시험까지 지우지 않은 기록표를 함께 둡니다",
+    preset: "technical-schematic",
+    date: "2026-08",
+    metrics: ["모든 수치에 측정조건", "SF-27–31 시험 공개", "구리 액센트 1색", "하드 게이트 12/12"],
+    href: "/work/orbit-aerospace/",
+    shot: orbitAerospace,
+    shotAlt: orbitAerospace2,
+    alt: "궤도 우주공학 — 제도 모눈 위 엔진 단면도와 구리색 강조의 사양표, 야간 연소 시험 사진",
+    size: "md",
+  },
+  {
+    slug: "synapse-bci",
+    name: "Synapse BCI Lab",
+    kind: "64채널 신경 인터페이스",
+    concept: "측정 조건이 붙은 계기 — 시뮬레이션은 시뮬레이션이라고 적고, 미측정값은 공백으로 둔다",
+    risk: "64채널 스파이크 래스터 캔버스(화면 밖에서 정지)를 첫 화면에 두고, 윤리 섹션을 콘텐츠로 승격합니다",
+    preset: "dark-instrument",
+    date: "2026-08",
+    metrics: ["래스터 SIM 명시", "미측정값 '—' 표기", "윤리 섹션 상위", "하드 게이트 12/12"],
+    href: "/work/synapse-bci/",
+    shot: synapseBci,
+    shotAlt: synapseBci2,
+    alt: "Synapse BCI — 골드색 스파이크 틱이 흐르는 64채널 래스터 캔버스와 신경 칩 접사 사진",
+    size: "md",
+  },
+
+  /* ── 5행: 3열 모자이크 (2 + 2 + 2) ── */
+  {
+    slug: "baekje-celadon",
+    name: "비색의 침묵 (翡色之靜)",
+    kind: "고려청자 특별전 큐레이션",
+    concept: "암실의 세 개의 방 — 사진이 어두울수록 유약이 가까워진다",
+    risk: "전시 포스터 형식을 버리고 빙렬 매크로를 풀블리드 판으로, 상감 접사와 '제1실·제2실' 방 번호 문법으로 구성합니다",
+    preset: "editorial-archival",
+    date: "2026-08",
+    metrics: ["빙렬 풀블리드 판", "비색 액센트 1색", "3개 방 구조", "하드 게이트 12/12"],
+    href: "/work/baekje-celadon/",
+    shot: baekjeCeladon,
+    shotAlt: baekjeCeladon2,
+    alt: "비색의 침묵 — 암실 스포트라이트 아래 청자 주자 사진과 빙렬 매크로의 풀블리드 판",
+    size: "sm",
+  },
+  {
+    slug: "overtone-sound",
+    name: "오버톤 사운드랩",
+    kind: "공간 음향 · DSP 연구소",
+    concept: "어두운 스튜디오 바닥의 목록 — 격자는 일부러 비틀었다",
+    risk: "절차적 유사-FFT 캔버스(오디오 디코드 없음)와 스태거 2열 아카이브, 압축 타입 스케일로 반복을 피합니다",
+    preset: "anti-grid",
+    date: "2026-08",
+    metrics: ["캔버스 파형·화면밖 정지", "스태거 2열 아카이브", "앰버 1색", "하드 게이트 12/12"],
+    href: "/work/overtone-sound/",
+    shot: overtoneSound,
+    shotAlt: overtoneSound2,
+    alt: "오버톤 사운드랩 — 앰버색 파형이 흐르는 어두운 히어로와 어긋난 두 열의 작업 목록",
+    size: "sm",
+  },
+  {
+    slug: "font-foundry",
+    name: "한성활자연구소",
+    kind: "본문용 한글 활자 파운드리",
+    concept: "글자가 상품이다 — 첫 화면의 거대 글리프와 인주각, 나머지는 물성과 눈금",
+    risk: "Lorem ipsum 없는 스페시멘과 자간·행간·크기가 실시간 반영되는 조판 시험대를 전면에 배치합니다",
+    preset: "editorial-archival",
+    date: "2026-08",
+    metrics: ["시험대 슬라이더 3종", "Lorem 0회", "인주 액센트 1색", "하드 게이트 12/12"],
+    href: "/work/font-foundry/",
+    shot: fontFoundry,
+    shotAlt: fontFoundry2,
+    alt: "한성활자연구소 — 한지 톤 위 거대한 한글 글리프와 슬라이더 3개의 조판 시험대",
+    size: "sm",
+  },
+
+  /* ── 6행: 관리 앱 2종 (3 + 3) — 메뉴·모달이 실제로 작동한다 ── */
+  {
+    slug: "gaon-lms",
+    name: "가온 학적부",
+    kind: "학습관리 콘솔 · 8화면",
+    concept: "종이 학적부를 화면으로 옮긴 관리 콘솔 — 형광펜 밑줄과 날인이 상태를 말한다",
+    risk: "관리 콘솔의 기본값인 파란 사이드바와 카드 그리드를 버리고, 학적부의 행(行) 문법으로 화면 여덟 개를 묶어 짓습니다",
+    preset: "ledger-console",
+    date: "2026-08",
+    metrics: ["뷰 9종 전환", "알림 센터", "공지 아코디언 · 분류 필터", "수업 진도 바", "출석 일별 합계", "과목 필터", "모달 2종"],
+    href: "/work/gaon-lms/",
+    shot: gaonLms,
+    shotAlt: gaonLms2,
+    alt: "가온 학적부 — 종이 톤 대시보드의 주간 출석 막대와 과제 마감 표, 흑연 사이드바",
+    size: "md",
+  },
+  {
+    slug: "dure-enrollment",
+    name: "두레대학 수강신청",
+    kind: "수강신청 · 6화면",
+    concept: "공문처럼 읽히는 수강신청 — 명조 제목과 IBM Plex 본문, 벽돌 申 도장이 상태를 누른다",
+    risk: "여섯 화면이 하나의 상태(신청·관심)를 공유합니다. 시간 겹침·학점 초과·정원 마감은 도장을 누르기 전에 막습니다",
+    preset: "timetable-ink",
+    date: "2026-08",
+    metrics: ["시간 겹침 즉시 차단", "색인탭 6종 전환", "이수 학점 실시간 집계", "빈 상태 안내"],
+    href: "/work/dure-enrollment/",
+    shot: dureEnrollment,
+    shotAlt: dureEnrollment2,
+    alt: "두레대학 수강신청 — 과목 원장 목록과 주홍 도장 블록이 놓이는 주간 시간표 격자",
+    size: "md",
+  },
 ];
diff --git a/apps/site/src/i18n/content.ts b/apps/site/src/i18n/content.ts
index 740e325..d95244a 100644
--- a/apps/site/src/i18n/content.ts
+++ b/apps/site/src/i18n/content.ts
@@ -1,28 +1,28 @@
-/**
- * 두 언어판은 번역이 아니라 각각 따로 쓴 것이다.
- * 특히 조판 섹션은 한국어판에서 주장이고 영어판에서 사례다.
- *
- * 규칙: 이 파일에 em-dash 와 en-dash 를 쓰지 않는다.
- * 하이픈, 마침표, 콜론, 괄호로 대신한다.
- */
+/*
+  사이트 전체 문안. 레이아웃이 아니라 이 파일만 고치면 두 언어판이 함께 갱신된다.
 
-export interface Stage {
+  문장 규칙(2026-08-21 카피 전면 재작성 때 정한 것):
+  - 본문은 존댓말로 통일한다. 제목·헤드라인은 명사구 또는 단형 종결.
+  - 근거 없는 수치를 넣지 않는다. 재지 않은 값은 "미측정"으로 남긴다.
+  - "—" 를 문장 부호로 쓰지 않는다. 쉼표·마침표로 끊는다.
+  - 자기 검증 이야기(프리플라이트)는 사실 그대로. 포장하지 않고, 고친 것만 적는다.
+*/
+
+interface Stage {
   name: string;
   does: string;
-  /** 같은 브리프가 이 단계를 지나며 무엇으로 변하는가. 번호 대신 이 변화가 순서를 만든다 */
   becomes: string;
   mono?: boolean;
 }
 
-export interface Metric {
+interface Metric {
   label: string;
   value: string;
   note: string;
-  /** 벤토에서 크게 잡을 항목 */
   feature?: boolean;
 }
 
-export interface Rule {
+interface Rule {
   rule: string;
   why: string;
 }
@@ -50,11 +50,6 @@ export interface Content {
     brief: string;
     stages: Stage[];
   };
-  showcase: {
-    h2: string;
-    lead: string;
-    items: { alt: string; caption: string; note: string }[];
-  };
   materials: {
     eyebrow: string;
     h2: string;
@@ -108,34 +103,34 @@ export interface Content {
 const STAGES_KO: Stage[] = [
   {
     name: "브리프 게이트",
-    does: "무엇을, 누구에게, 어떤 제약인지 세 줄로 압축합니다. 규모를 판정해 경로를 고릅니다.",
+    does: "무엇을, 누구에게, 어떤 제약인지 세 줄로 압축합니다. 규모를 판정해 작업 경로를 고릅니다.",
     becomes: "누구에게: 홈카페 3년차 이상. 산미와 로스팅 프로파일을 구분합니다",
   },
   {
     name: "레퍼런스 조사",
-    does: "실제로 존재하는 사이트 3개를 서로 다른 층위에서 고릅니다. 구조, 톤, 디테일.",
+    does: "실제로 존재하는 사이트 세 곳을 서로 다른 층위에서 고릅니다. 구조, 톤, 디테일.",
     becomes: "R2 = 독립 문학 출판사. 커피 업계 밖에서 톤을 가져옵니다",
   },
   {
     name: "방향 결정",
-    does: "레퍼런스를 하나의 축으로 합성합니다. 감수할 리스크를 하나 고릅니다.",
+    does: "레퍼런스를 하나의 방향으로 합성하고, 감수할 리스크를 하나 고릅니다.",
     becomes: "감상은 이름에만, 화면에는 수치만",
   },
   {
     name: "디자인 토큰",
-    does: "코드를 쓰기 전에 숫자를 정합니다. 성능 예산도 여기서 확정합니다.",
+    does: "코드를 쓰기 전에 숫자를 정합니다. 성능 예산도 이 단계에서 확정합니다.",
     becomes: "--measure: 33em  /  --leading-normal: 1.7  /  JS 예산 0KB",
     mono: true,
   },
   {
     name: "구현",
-    does: "레이아웃, 재질, 입체, 모션 순서로. 이펙트를 다 꺼도 완성돼 있어야 합니다.",
+    does: "레이아웃, 재질, 입체, 모션 순서로 만듭니다. 이펙트를 모두 꺼도 완성돼 있어야 합니다.",
     becomes: "<h1>산미 8.5 · 바디 6.0 · 로스팅 라이트</h1>",
     mono: true,
   },
   {
     name: "프리플라이트",
-    does: "자기 결과물을 남의 것처럼 봅니다. 게이트 12개는 전부 '아니오'여야 합니다.",
+    does: "자기 결과물을 남의 것처럼 검사합니다. 하드 게이트 12개는 모두 '아니오'여야 합니다.",
     becomes: "게이트 12/12 통과 · 슬롭 지문 0건 · 320px 오버플로 31px 수정",
     mono: true,
   },
@@ -165,7 +160,7 @@ const STAGES_EN: Stage[] = [
   },
   {
     name: "Build",
-    does: "Layout, surface, depth, motion. It must be finished with every effect switched off.",
+    does: "Layout, surface, depth, motion, in that order. It must be finished with every effect switched off.",
     becomes: "<h1>Acidity 8.5 · Body 6.0 · Light roast</h1>",
     mono: true,
   },
@@ -181,17 +176,21 @@ export const ko: Content = {
   meta: {
     title: "designpaca · 웹 디자인 파이프라인 스킬",
     description:
-      "AI 코딩 에이전트에게 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계. Claude Code, Codex, Cursor, Windsurf 에 한 줄로 설치합니다.",
+      "AI 코딩 에이전트가 웹 디자인을 순서대로 하게 만드는 스킬입니다. 레퍼런스 조사부터 셀프 감사까지 여섯 단계를 통과시켜, 템플릿 같은 페이지가 나올 자리에 근거 있는 디자인이 나오게 합니다. Claude Code, Codex, Cursor 등에 한 줄로 설치합니다.",
   },
   hero: {
     h1: "결정하지 않으면 기본값이 나온다",
-    lead: "AI가 만든 티는 못 만들어서가 아니라 결정을 안 해서 납니다. 그 결정을 여섯 단계로 강제하는 스킬.",
+    lead:
+      "AI가 뽑은 페이지가 템플릿처럼 보이는 건 능력이 부족해서가 아니라 결정이 없어서입니다. designpaca는 레퍼런스 조사부터 셀프 감사까지 여섯 단계를 순서대로 통과시키는 웹 디자인 파이프라인 스킬입니다. 단계마다 통과 조건이 있어서, 기본값이 들어갈 자리에 근거가 들어갑니다.",
     install: "npx designpaca",
-    installNote: "Node 20.11+ · 설치 대상을 감지해 골라줍니다",
-    links: [{ label: "npm", href: "https://www.npmjs.com/package/designpaca" }],
+    installNote: "Node 20.11 이상 · 설치 대상은 자동으로 찾아 선택합니다",
+    links: [
+      { label: "사례 보기", href: "/showcase" },
+      { label: "npm", href: "https://www.npmjs.com/package/designpaca" },
+    ],
     stage: {
       alt: "유리판 여섯 장이 깊이 방향으로 나란히 서 있습니다. 스크롤하면 카메라가 판을 하나씩 통과하고, 통과한 판은 뒤로 물러납니다.",
-      caption: "판 하나가 단계 하나다. 통과 조건을 채우지 못하면 다음 판으로 가지 않습니다.",
+      caption: "판 하나가 단계 하나입니다. 통과 조건을 채우지 못하면 다음 판으로 넘어가지 않습니다.",
       gate: "게이트",
       pass: "통과",
     },
@@ -200,38 +199,22 @@ export const ko: Content = {
     eyebrow: "여섯 단계",
     h2: "브리프 한 줄이 검증된 페이지가 될 때까지",
     lead:
-      "각 단계에는 통과 조건이 있습니다. 통과하지 못하면 다음으로 가지 않습니다. 아래는 같은 브리프가 단계마다 무엇으로 변했는지다.",
+      "모든 단계에는 통과 조건이 있습니다. 통과하지 못하면 다음 단계로 넘어가지 않습니다. 아래는 같은 브리프가 여섯 단계를 지나며 무엇으로 바뀌는지입니다.",
     briefLabel: "들어온 브리프",
     brief: "수제 커피 로스터리의 원두 정기구독 랜딩 만들어줘",
     stages: STAGES_KO,
   },
-  showcase: {
-    h2: "결과물은 서로 닮지 않는다",
-    lead:
-      "같은 파이프라인을 두 브리프에 돌린 결과다. 1단계에서 톤을 다른 업종에서 가져오게 강제하기 때문에 같은 도구를 써도 같은 화면이 나오지 않습니다. 둘 다 수치 자리가 비어 있는 것도 우연이 아닙니다.",
-    items: [
-      {
-        alt: "무월 원두 구독 랜딩. 오프화이트 배경에 굵은 한글 헤드라인, 오른쪽에 원두 3종의 산미와 바디 표가 있습니다.",
-        caption: "수제 커피 로스터리 · 구독 전환",
-        note: "프리셋 quiet-commerce. 사진이 없습니다는 제약을 수치표로 뒤집었습니다. 표의 값은 아직 비어 있습니다. 로스터에게 받기 전까지 채우지 않습니다.",
-      },
-      {
-        alt: "Pulsegate 모니터링 SaaS 히어로. 밝은 배경에 큰 세리프 헤드라인과 무료 체험 버튼이 있습니다.",
-        caption: "API 모니터링 SaaS · 무료 체험 가입",
-        note: "개발자 도구라고 자동으로 다크로 가지 않았습니다. 브리프에 근거가 없었기 때문입니다. 리전 수는 아직 중괄호 자리로 남아 있습니다.",
-      },
-    ],
-  },
   materials: {
     eyebrow: "SVG 필터",
     h2: "이미지 편집기를 열지 않고 고치는 네 가지",
     lead:
-      "질감을 만드는 필터 데모는 많다. 손이 실제로 줄어드는 자리는 따로 있습니다. 아래 넷은 왼쪽이 매번 손으로 맞추던 것, 오른쪽이 같은 소재에 선언 하나만 얹은 것입니다. 아래 수치는 이 화면을 그대로 캡처해 잰 값이다.",
+      "질감 필터 데모는 흔합니다. 중요한 건 손이 실제로 줄어드는 자리입니다. 아래 네 가지에서 왼쪽은 매번 손으로 맞추던 방식, 오른쪽은 같은 소재에 선언 하나를 얹은 결과입니다. 수치는 이 화면을 그대로 캡처해 잰 값입니다.",
     demos: [
       {
         id: "scrim",
         name: "글자 모양대로 생기는 스크림",
-        problem: "사진 위 캡션이 대비를 못 넘깁니다. 사진마다 밝기가 달라 반투명 박스를 손으로 맞추게 됩니다.",
+        problem:
+          "사진 위 캡션이 대비 기준을 못 넘깁니다. 사진마다 밝기가 달라서 반투명 박스를 매번 손으로 맞추게 됩니다.",
         beforeLabel: "그냥 얹음",
         afterLabel: "filter: url(#scrim)",
         how: "글자 알파를 부풀려 그 모양대로만 색을 채웁니다. 박스가 아니라 글자를 따라가므로 사진을 덜 가립니다.",
@@ -240,28 +223,30 @@ export const ko: Content = {
       {
         id: "cvd",
         name: "색각 이상 시뮬레이션",
-        problem: "상태를 색으로만 구분하면 남성 12명 중 1명에게 같은 배지가 됩니다. 내 화면만 봐서는 못 잡는다.",
+        problem:
+          "상태를 색으로만 구분하면 남성 12명 중 1명에게는 같은 배지로 보입니다. 내 화면만 보고는 잡을 수 없습니다.",
         beforeLabel: "내가 보는 화면",
         afterLabel: "적록색약(2형)",
-        how: "feColorMatrix 한 줄. 이것만은 linearRGB 로 둡니다 — 색각 변환은 물리적인 빛의 혼합이다.",
+        how: "feColorMatrix 한 줄입니다. 이것만은 linearRGB 로 둡니다. 색각 변환은 물리적인 빛의 혼합이기 때문입니다.",
         verdict: "배지 셋의 최소 색거리 82 → 2 · 주의와 실패가 같은 색",
       },
       {
         id: "goo",
         name: "떨어진 것이 하나로 뭉치기",
-        problem: "조각이 녹아 붙는 표현에 캔버스나 물리 라이브러리를 켜게 됩니다. 로더와 메뉴 전환에서 반복됩니다.",
+        problem:
+          "조각이 녹아 붙는 표현에 캔버스나 물리 라이브러리를 켜게 됩니다. 로더와 메뉴 전환에서 반복됩니다.",
         beforeLabel: "필터 없음 · 원 3개",
         afterLabel: "filter: url(#goo)",
-        how: "블러한 뒤 알파만 세워 잘라냅니다. 붙을지 말지는 취향이 아니라 간격과 블러 반경의 비율로 정해진다.",
+        how: "블러한 뒤 알파만 세워 잘라냅니다. 붙을지 말지는 취향이 아니라 간격과 블러 반경의 비율로 정해집니다.",
         verdict: "덩어리 3개 → 1개 · JS 0줄",
       },
       {
         id: "glass",
         name: "배경을 휘게 하는 오버레이",
-        problem: "반투명 패널은 뒤를 흐리게만 만듭니다. 실제 유리는 빛을 휜다.",
+        problem: "반투명 패널은 뒤를 흐리게만 만듭니다. 실제 유리는 빛을 휩니다.",
         beforeLabel: "backdrop-filter: blur",
         afterLabel: "blur + url(#lens)",
-        how: "변위 지도를 backdrop-filter 에 넘깁니다. 노이즈로 만들면 값이 중립으로 수렴해 아무 일도 안 일어납니다.",
+        how: "변위 지도를 backdrop-filter 에 넘깁니다. 노이즈로 만들면 값이 중립으로 수렴해서 아무 일도 일어나지 않습니다.",
         verdict: "가장자리에서 격자가 눌립니다 · Chromium 전용",
       },
     ],
@@ -270,31 +255,30 @@ export const ko: Content = {
     eyebrow: "이 페이지의 수치",
     h2: "카피만 고쳐서는 슬롭이 없어지지 않는다",
     lead:
-      "문장을 다듬는 것으로 해결되는 것은 문장뿐입니다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남습니다. 그래서 이 페이지 자신의 형태 수치를 공개합니다. 결과가 나쁘게 나와도 그대로 싣는다.",
+      "문장을 다듬으면 좋아지는 건 문장뿐입니다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남습니다. 그래서 이 페이지는 자기 자신의 형태 수치를 공개합니다. 나쁘게 나와도 그대로 싣습니다. 감사를 남기는 것 자체가 이 스킬의 핵심 기능이기 때문입니다.",
     items: [
       { label: "히어로까지 JS", value: "0.6%", note: "예산 50KB 중 실제로 쓴 비율", feature: true },
       { label: "하드 게이트", value: "12/12", note: "정적 검사와 320px · 1440px 실렌더 양쪽", feature: true },
-      { label: "three.js 추가분", value: "184KB", note: "검사대가 화면에 들어올 때만 받습니다. 초기 번들에는 없습니다" },
+      { label: "three.js 추가분", value: "184KB", note: "검사대가 화면에 들어올 때만 내려받습니다. 초기 번들에는 없습니다" },
       { label: "슬롭 지문", value: "0건", note: "9개 패턴 grep" },
       { label: "radius 어휘", value: "2종", note: "3px 과 14px. 알약 모양을 없앴습니다" },
-      { label: "반투명 패널", value: "2개", note: "29개까지 늘렸다가 걷어냈습니다. 유리는 무언가를 담는 액자에만 남겼습니다" },
-      { label: "타입 단계", value: "6단계", note: "토큰에 정의된 수. 디스플레이는 스케일 밖이고, 최대 글자는 본문의 5.6배" },
+      { label: "반투명 패널", value: "2개", note: "한때 29개까지 늘었고 감사에서 걷어냈습니다. 유리는 무언가를 담는 액자에만 남겼습니다" },
+      { label: "타입 단계", value: "6단계", note: "토큰에 정의된 수입니다. 디스플레이는 스케일 밖이고, 최대 글자는 본문의 5.6배" },
       { label: "폰트 패밀리", value: "2개", note: "언어판마다 자기 것만 받습니다" },
       { label: "강조색", value: "1개", note: "라이트와 다크는 같은 색의 대응값" },
       { label: "첫 인터랙션", value: "미측정", note: "배포 후 Lighthouse 로 잽니다" },
     ],
     caveat:
-      "값은 프로덕션 빌드에서 측정합니다. 아직 측정하지 않은 항목은 비워둡니다. 지어낸 숫자보다 구멍이 정직하다. 이 페이지는 제품 데모이므로 three.js 를 얹으며 JS 예산을 올렸다. 올렸다는 사실을 여기 적는 것이 규칙이다.",
+      "값은 프로덕션 빌드에서 측정합니다. 아직 재지 않은 항목은 비워둡니다. 지어낸 숫자보다 빈칸이 정직합니다. 이 페이지는 제품 데모라서 three.js 를 얹으며 JS 예산을 올렸고, 그 사실을 여기에 적는 것 자체가 규칙입니다.",
   },
   preflight: {
     h2: "이 페이지를 만들며 실제로 걸린 것",
     lead: "남을 검사한 결과가 아니라 자신을 검사한 결과입니다.",
     items: [
-
       {
         caught: "폰트가 교체되는 순간 글자 폭이 13% 튀고 있었습니다",
         fixed:
-          "웹폰트가 오기 전에는 시스템 폰트로 그려진다. 맑은 고딕은 Pretendard 보다 13% 넓어서 교체되는 순간 줄바꿈이 다시 잡힙니다. 폴백 폰트에 size-adjust 로 치수를 맞췄다. 실측 차이 0.0%. OS 마다 시스템 폰트가 다르므로 폴백도 따로 정의했습니다.",
+          "웹폰트가 오기 전에는 시스템 폰트로 그려집니다. 맑은 고딕은 Pretendard 보다 13% 넓어서 교체되는 순간 줄바꿈이 다시 잡힙니다. 폴백 폰트에 size-adjust 로 치수를 맞췄고 실측 차이는 0.0%가 되었습니다. OS 마다 시스템 폰트가 다르므로 폴백도 따로 정의했습니다.",
       },
       {
         caught: "유리 카드를 29개 뿌렸습니다. 재질만 바뀌었을 뿐 구조는 카드 나열 그대로였습니다",
@@ -302,33 +286,68 @@ export const ko: Content = {
           "우리 규칙이 '카드는 elevation 이 진짜 위계를 나를 때만'이라고 정해두고 있었습니다. 수치는 조판으로, 규칙은 어긋난 목록으로, 감사 기록은 로그로 바꿨습니다. 유리는 5개만 남았습니다.",
       },
       {
-        caught: "“backdrop-filter 에 SVG 를 얹으면 Chrome 이 버린다” 고 적었는데 사실이 아니었습니다",
+        caught: "'backdrop-filter 에 SVG 를 얹으면 Chrome 이 선언을 버린다'고 적었는데 사실이 아니었습니다",
         fixed:
-          "한 번 실패하고 브라우저 탓으로 적어뒀다. 다시 재보니 Chrome 151 에서 computed 값이 none 이 아니라 url(#id) 로 살아 있고 배경도 실제로 굴절됩니다. 진짜 원인은 feImage 의 width/height 를 요소 크기와 맞추지 않은 것이었습니다 — backdrop-filter 는 필터 이미지를 자동으로 조정하지 않습니다. 한 번 실패한 것을 ‘안 되는 것’ 으로 적으면 그 문장이 다음 사람의 상한선이 됩니다.",
+          "한 번 실패하자 브라우저 탓으로 적어뒀습니다. 다시 재보니 Chrome 151 에서 computed 값은 none 이 아니라 url(#id) 로 살아 있고 배경도 실제로 굴절됩니다. 진짜 원인은 feImage 의 width/height 를 요소 크기와 맞추지 않은 것이었습니다. backdrop-filter 는 필터 이미지를 자동으로 맞춰주지 않습니다. 한 번 실패한 것을 '안 되는 것'으로 적으면 그 문장이 다음 사람의 상한선이 됩니다.",
       },
       {
         caught: "가로로 444px 넘쳤습니다. 레이아웃 전체가 어긋나 있었습니다",
         fixed:
-          "main 에서 그리드 클래스가 빠져 있었습니다. subgrid 는 부모가 그리드일 때만 작동하므로 모든 섹션이 정렬선을 잃은 상태였습니다. 눈으로는 어색한 정도였고 폭을 재고서야 드러났다.",
+          "main 에서 그리드 클래스가 빠져 있었습니다. subgrid 는 부모가 그리드일 때만 작동하므로 모든 섹션이 정렬선을 잃은 상태였습니다. 눈으로는 어색한 정도였고 폭을 재고서야 드러났습니다.",
       },
       {
         caught: "스크롤을 끝까지 내려도 파이프라인 6단계 중 뒤 3개가 안 보였습니다",
         fixed:
-          "scroll-driven animation 의 범위 끝에 페이지 하단 요소는 도달하지 못합니다. 이펙트를 끄면 보이고 켜면 사라지는 것은 폴백이 있는 것과 다르다. 한 번 보이면 유지되는 방식으로 바꿨습니다.",
+          "scroll-driven animation 의 범위 끝에 페이지 하단 요소는 도달하지 못합니다. 이펙트를 끄면 보이고 켜면 사라지는 것은 폴백이 있는 것과 다릅니다. 한 번 보이면 유지되는 방식으로 바꿨습니다.",
       },
       {
-        caught: "다크 밴드 안 버튼의 대비가 2.88:1. 기준은 4.5:1",
+        caught: "다크 밴드 안 버튼의 대비가 2.88:1. 기준은 4.5:1 이었습니다",
         fixed:
           "밴드가 강조색만 반전시키고 그 위 글자색은 흰색 그대로였습니다. 반전 대응 토큰을 하나 더 두고 함께 바꿨습니다.",
       },
+      {
+        caught: "320px 에서 가로로 13px 넘쳤습니다. 표는 이미 스크롤 컨테이너 안에 있었는데도요",
+        fixed:
+          "그리드 항목의 기본 min-width 는 auto 라서 내용이 부모를 밀어냅니다. min-width: 0 을 줘야만 overflow 가 제 역할을 합니다.",
+      },
+      {
+        caught: "eyebrow 라벨이 6개였습니다. 규칙 상한은 3개였습니다",
+        fixed: "셋을 남기고 나머지를 걷었습니다. 라벨이 없어도 섹션은 충분히 읽힙니다.",
+      },
+      {
+        caught: "본문 컬럼이 960px 였습니다. 방금 토큰으로 정한 measure 는 561px 였습니다",
+        fixed:
+          "그리드의 main 컬럼을 토큰에 묶었습니다. 스킬의 예시 코드도 같은 문제를 갖고 있어서 함께 고쳤습니다.",
+      },
+      {
+        caught: "방향을 바꿀 때 이 스킬의 1단계를 건너뛰었습니다",
+        fixed:
+          "재질을 유리로 바꾸는 것은 2단계 결정이고, 그러려면 레퍼런스로 돌아가야 합니다. 우리는 구현으로 바로 들어갔습니다. 결과는 이전 방향의 뼈대에 유리를 바른 페이지였고 design.md 는 옛 결정을 설명하고 있었습니다. 0단계부터 전체 경로를 다시 돌았습니다.",
+      },
+      {
+        caught: "유리판이 카메라를 정면으로 보고 있어 프레넬이 구조적으로 0 이었습니다",
+        fixed:
+          "평면이 정면을 보면 법선과 시선의 내적이 1 이라 가장자리 반사가 계산되지 않습니다. 유리로 읽히게 하는 유일한 신호가 죽어 있어 여섯 판이 흐릿한 사각형으로 보였습니다. 법선을 살짝 굽히고 UV 가장자리에서 테두리 광을 따로 만들었습니다.",
+      },
+      {
+        caught: "이 페이지의 뼈대인 파이프라인 섹션이 뷰포트의 43% 만 쓰고 있었습니다",
+        fixed:
+          "1440px 중 625px. 아홉 섹션 중 가장 좁으면서 높이는 1637px 로 가장 길었습니다. 각 단계를 2열로 열어 1113px 로 넓혔습니다.",
+      },
+      {
+        caught: "대비 검사 스크립트가 반투명 배경을 불투명으로 계산하고 있었습니다",
+        fixed:
+          "'English 1.15:1' 이라는 틀린 값이 나왔습니다. 알파를 밑바닥부터 합성하도록 고치니 실패가 0건이 되었습니다. 검사 도구가 틀리면 통과도 실패도 의미가 없습니다.",
+      },
     ],
-    note: "열세 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 사람이 잡은 것이 셋이다. 카드가 전형적이라는 말, 폰트를 제대로 다루지 못합니다는 말, 그리고 우리 스킬을 진짜로 쓴 게 맞냐는 말.",
+    note:
+      "열세 건 모두 이 페이지를 만들며 걸렸고, 걸린 뒤에 고쳤습니다. 그중 세 건은 검사기가 아니라 사람이 먼저 잡았습니다. 카드가 전형적이라는 지적, 폰트를 대충 다룬다는 지적, 그리고 이 스킬을 정말로 썼느냐는 질문이었습니다.",
   },
   typography: {
     eyebrow: "한글 조판",
     h2: "라틴 기본값은 한글에서 세 군데가 깨진다",
     lead:
-      "영어권 디자인 도구에는 한글 조판 규칙이 없습니다. 그래서 기본값을 그대로 쓰면 아래 셋이 동시에 무너집니다. 왼쪽이 기본값, 오른쪽이 이 스킬이 정한 값이다. 글자도 폭도 폰트도 같습니다.",
+      "영어권 디자인 도구에는 한글 조판 규칙이 없습니다. 기본값을 그대로 두면 아래 세 가지가 동시에 무너집니다. 왼쪽이 기본값, 오른쪽이 이 스킬이 정한 값입니다. 글자도 폭도 폰트도 같습니다.",
     sample: "스페셜티커피의 로스팅프로파일을 구분하려면 산미와 바디를 수치로 봐야 합니다.",
     demos: [
       {
@@ -336,59 +355,65 @@ export const ko: Content = {
         title: "줄바꿈",
         badLabel: "기본값",
         goodLabel: "word-break: keep-all",
-        note: "기본값은 어절 한가운데를 끊는다. 왼쪽 마지막 줄을 보라 — 한 단어가 두 줄에 걸쳐 있습니다.",
+        note: "기본값은 어절 한가운데를 끊습니다. 왼쪽 마지막 줄을 보세요. 한 단어가 두 줄에 걸쳐 있습니다.",
       },
       {
         id: "leading",
         title: "행간",
         badLabel: "line-height 1.45",
         goodLabel: "line-height 1.75",
-        note: "라틴 표준 1.4~1.5 는 받침이 있는 글자에 좁습니다. 줄이 서로 붙어 보입니다.",
+        note: "라틴 표준인 1.4~1.5 는 받침이 있는 글자에 좁습니다. 줄이 서로 붙어 보입니다.",
       },
       {
         id: "size",
         title: "크기",
         badLabel: "11px",
         goodLabel: "15px",
-        note: "라틴에서 11px 은 라벨로 씁니다. 한글은 획이 많아 같은 크기에서 뭉갠다.",
+        note: "라틴에서 11px 은 라벨에 쓰는 크기입니다. 한글은 획이 많아서 같은 크기에서 뭉개집니다.",
       },
     ],
     rules: [
-      "word-break: keep-all 없으면 단어가 아무 데서나 잘립니다",
-      "line-height 1.6에서 1.8 사이. 라틴보다 넉넉하게",
-      "음수 자간 금지. 한글은 이미 고정폭에 가까워 즉시 뭉개집니다",
-      "한 줄 25자에서 40자. 라틴 기준 65자를 그대로 쓰면 너무 깁니다",
-      "한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호입니다",
+      "word-break: keep-all 이 없으면 단어가 아무 데서나 잘립니다",
+      "행간은 1.6에서 1.8 사이. 라틴보다 넉넉하게",
+      "음수 자간은 쓰지 않습니다. 한글은 이미 고정폭에 가까워서 바로 뭉개집니다",
+      "한 줄은 25자에서 40자. 라틴 기준 65자를 그대로 쓰면 너무 깁니다",
+      "한글 폰트를 지정하지 않은 것 자체가 미완성의 신호입니다",
     ],
   },
   rules: {
     h2: "규칙마다 왜 그런지 적혀 있다",
-    lead: "근거 없는 금지는 지켜지지 않습니다. 사용자가 명시적으로 요구하면 규칙보다 그쪽이 이깁니다.",
+    lead:
+      "근거 없는 금지는 지켜지지 않습니다. 그래서 모든 규칙에 이유가 적혀 있습니다. 사용자가 명시적으로 요구하면 규칙보다 사용자가 이깁니다.",
     items: [
       { rule: "레퍼런스 없이 시작하지 않는다", why: "머릿속 기본값에서 출발하면 결과는 그 카테고리의 평균이 됩니다." },
       { rule: "강조색은 하나다", why: "두 개가 필요하다고 느끼면 위계 설계가 실패한 것입니다." },
       { rule: "대담함은 한 곳에만", why: "두 곳에서 소리치면 둘 다 죽습니다." },
-      { rule: "화려함은 4순위다", why: "심사 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10입니다." },
+      { rule: "화려함은 4순위다", why: "심사 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10 입니다." },
       { rule: "지어낸 수치를 쓰지 않는다", why: "숫자 모양의 구멍은 정직하고, 지어낸 숫자는 신뢰를 깎습니다." },
-      { rule: "이펙트를 다 꺼도 완성돼 있어야 한다", why: "그 상태가 모든 폴백의 기반이다. 무너지면 이펙트가 구조를 대신하고 있는 것입니다." },
+      { rule: "이펙트를 다 꺼도 완성돼 있어야 한다", why: "그 상태가 모든 폴백의 기반입니다. 무너지면 이펙트가 구조를 대신하고 있는 것입니다." },
     ],
   },
   install: {
     h2: "한 줄이면 된다",
-    lead: "설치 대상을 감지해 기본 선택해준다. 스킬 파일을 직접 고쳤다면 업데이트가 그 파일을 건드리지 않습니다.",
+    lead:
+      "설치할 하네스를 자동으로 찾아 선택합니다. 스킬 파일을 직접 고쳤다면 업데이트가 그 파일을 건드리지 않습니다.",
     command: "npx designpaca",
     targets: [
       { name: "Claude Code", path: "~/.claude/skills/designpaca/" },
       { name: "Codex CLI", path: "~/.codex/skills/designpaca/" },
-      { name: "Antigravity", path: ".agents/skills/designpaca/" },
-      { name: "Cursor", path: ".cursor/rules/designpaca.mdc" },
-      { name: "Windsurf", path: ".windsurf/rules/designpaca.md" },
+      { name: "Cursor", path: "~/.cursor/skills/designpaca/" },
+      { name: "ZCode", path: "~/.zcode/skills/designpaca/" },
+      { name: "중립 경로", path: "~/.agents/skills/designpaca/ · 어떤 하네스든" },
+      { name: "Antigravity", path: "~/.gemini/antigravity-cli/skills/designpaca/" },
+      { name: "Gemini CLI", path: "~/.gemini/skills/designpaca/" },
+      { name: "Windsurf", path: "~/.codeium/windsurf/skills/designpaca/" },
+      { name: "Copilot", path: "~/.copilot/skills/designpaca/" },
       { name: "AGENTS.md", path: "블록 주입. 에이전트 무관" },
     ],
     commands: [
-      { cmd: "npx designpaca update", what: "최신 스킬로 갱신. 직접 고친 파일은 건너뜁니다" },
-      { cmd: "npx designpaca doctor", what: "설치 상태와 드리프트 진단" },
-      { cmd: "npx designpaca uninstall", what: "매니페스트 기반 정확한 제거" },
+      { cmd: "npx designpaca update", what: "최신 스킬로 갱신합니다. 직접 고친 파일은 건너뜁니다" },
+      { cmd: "npx designpaca doctor", what: "설치 상태와 드리프트를 진단합니다" },
+      { cmd: "npx designpaca uninstall", what: "매니페스트 기반으로 정확하게 제거합니다" },
     ],
   },
   nav: {
@@ -409,16 +434,18 @@ export const en: Content = {
   meta: {
     title: "designpaca · a web design pipeline skill",
     description:
-      "A skill that makes AI coding agents do web design in order: reference research through self-audit, six stages. Installs into Claude Code, Codex, Cursor and Windsurf in one line.",
+      "A skill that makes AI coding agents do web design in order. Six stages from reference research to self-audit, each with a pass condition, so defaults get replaced with reasons. Installs into Claude Code, Codex, Cursor and more in one line.",
   },
   hero: {
     h1: "Undecided design ships as defaults",
-    lead: "The AI look is not a skill problem. It is a decision problem. This skill forces the decisions, in order.",
+    lead:
+      "Pages built by AI look templated not because the model lacks taste, but because nobody made the decisions. designpaca is a web design pipeline skill for AI coding agents. Six stages from reference research to self-audit, each with a pass condition, so the slot where a default would land gets a reason instead.",
     install: "npx designpaca",
-    installNote: "Node 20.11+ · detects and preselects your install targets",
+    installNote: "Node 20.11+ · install targets are detected and preselected",
     links: [
-      { label: "Repository", href: "https://git.chanpaca.net/yunchan/designpaca" },
+      { label: "See the work", href: "/showcase" },
       { label: "npm", href: "https://www.npmjs.com/package/designpaca" },
+      { label: "Repository", href: "https://git.chanpaca.net/yunchan/designpaca" },
     ],
     stage: {
       alt: "Six glass panes stand in a row along the depth axis. Scrolling moves the camera through them one at a time, and each pane recedes once passed.",
@@ -436,64 +463,50 @@ export const en: Content = {
     brief: "Build a subscription landing page for a small-batch coffee roastery",
     stages: STAGES_EN,
   },
-  showcase: {
-    h2: "The outputs do not resemble each other",
-    lead:
-      "Two briefs through the same pipeline. Stage one forces the tone reference to come from a different industry, so the same tool does not produce the same screen twice. Both still have empty number slots, and that is not an accident either.",
-    items: [
-      {
-        alt: "A coffee subscription landing. Off-white ground, heavy Korean headline, a table of acidity and body figures on the right.",
-        caption: "Small-batch roastery · subscription conversion",
-        note: "Preset quiet-commerce. Having no photography became the argument, not the limit. The table values are still blank, and stay blank until the roaster supplies them.",
-      },
-      {
-        alt: "Pulsegate monitoring SaaS hero. Light ground, large serif headline, a free trial button.",
-        caption: "API monitoring SaaS · free trial signup",
-        note: "A developer tool did not default to dark. The brief carried no reason for it. The region count is still sitting in braces.",
-      },
-    ],
-  },
   materials: {
     eyebrow: "SVG filters",
     h2: "Four things you fix without opening an image editor",
     lead:
-      "There is no shortage of filter demos that make texture. The places where filters actually save you work are elsewhere. In all four below, the left is what you used to hand-tune every time and the right is the same material with one declaration added. The numbers come from capturing this screen and measuring it.",
+      "Filter demos that make texture are everywhere. What matters is where filters actually save you work. In all four below, the left is what you used to hand-tune every time and the right is the same material with one declaration added. The numbers come from capturing this screen and measuring it.",
     demos: [
       {
         id: "scrim",
         name: "A scrim shaped like the letters",
-        problem: "A caption over a photo fails 4.5:1. Every photo has a different brightness, so the translucent box gets hand-tuned each time.",
+        problem:
+          "A caption over a photo fails the contrast threshold. Every photo has a different brightness, so the translucent box gets hand-tuned each time.",
         beforeLabel: "just placed on top",
         afterLabel: "filter: url(#scrim)",
         how: "feMorphology fattens the glyph alpha, a blur softens it, and feFlood fills only that shape. It follows the letters instead of covering the photo with a box.",
-        verdict: "white-on-photo contrast 1.70:1 → 4.79:1 · swap the photo, nothing to re-tune",
+        verdict: "white-on-photo contrast 1.70:1 → 4.79:1",
       },
       {
         id: "cvd",
         name: "Colour-vision simulation",
-        problem: "State encoded in colour alone becomes one badge for 1 in 12 men. No amount of looking at your own screen catches it.",
+        problem:
+          "State encoded in colour alone becomes one badge for 1 in 12 men. No amount of looking at your own screen catches it.",
         beforeLabel: "what you see",
         afterLabel: "deuteranopia",
-        how: "A single feColorMatrix. This is the one filter that must not run in sRGB — colour-vision transforms are physical mixing, so linearRGB is correct here.",
+        how: "A single feColorMatrix. This is the one filter that must not run in sRGB, because colour-vision transforms are physical mixing. linearRGB is correct here.",
         verdict: "minimum colour distance across the three badges 82 → 2 · warning and failure become one colour",
       },
       {
         id: "goo",
         name: "Separate shapes fusing into one",
-        problem: "Getting pieces to melt together usually means reaching for canvas or a physics library. It comes up in loaders, merging menus, indicator transitions.",
+        problem:
+          "Getting pieces to melt together usually means reaching for canvas or a physics library. It comes up in loaders, merging menus, indicator transitions.",
         beforeLabel: "no filter · 3 circles",
         afterLabel: "filter: url(#goo)",
-        how: "Blur hard, then stand the alpha up 18× with feColorMatrix. Whether they fuse is arithmetic, not taste — the blurred alpha midway between two circles has to clear the threshold (7÷18 ≒ 0.39). At 18px apart with a blur of 7 it sat near 0.2 and never merged; 12px and 10 clears it.",
+        how: "Blur hard, then stand the alpha up with feColorMatrix. Whether they fuse is arithmetic, not taste: the ratio of gap to blur radius decides it.",
         verdict: "counted across the middle row: 3 blobs → 1 · 0 lines of JS",
       },
       {
         id: "glass",
         name: "An overlay that bends the backdrop",
-        problem: "A translucent panel only blurs what is behind it. Real glass bends light — that difference puts the panel inside the picture instead of on top of it.",
+        problem: "A translucent panel only blurs what is behind it. Real glass bends light.",
         beforeLabel: "backdrop-filter: blur",
         afterLabel: "blur + url(#lens)",
-        how: "Hand a displacement map to backdrop-filter. R is the X offset, G is the Y offset, 128 is neutral. Build the map with feTurbulence and every value collapses toward 128, so nothing moves — the map has to be a gradient you draw, pushing inward from the edges.",
-        verdict: "the grid compresses at the edges · size the map wrong and nothing happens, silently · Chromium only",
+        how: "Hand a displacement map to backdrop-filter. Build the map with feTurbulence and every value collapses toward neutral, so nothing moves. The map has to be a gradient you draw, pushing inward from the edges.",
+        verdict: "the grid compresses at the edges · Chromium only",
       },
     ],
   },
@@ -501,7 +514,7 @@ export const en: Content = {
     eyebrow: "This page, measured",
     h2: "Fixing the copy does not remove the slop",
     lead:
-      "Polishing sentences fixes sentences. The radius vocabulary, the translucent panels, the number of type steps all stay. So here are this page's own form metrics. If a number comes back badly, it ships as it is.",
+      "Polishing sentences fixes sentences. The radius vocabulary, the translucent panels, the number of type steps all stay. So this page publishes its own form metrics, and a bad number ships as it is. Leaving the audit in view is the core feature being sold here.",
     items: [
       { label: "JS to first paint", value: "0.6%", note: "of the 50KB budget actually spent", feature: true },
       { label: "hard gates", value: "12/12", note: "static checks plus real renders at 320px and 1440px", feature: true },
@@ -509,7 +522,7 @@ export const en: Content = {
       { label: "slop fingerprints", value: "0", note: "9 patterns grepped" },
       { label: "radius vocabulary", value: "2", note: "3px and 14px. The pill shape is gone" },
       { label: "translucent panels", value: "2", note: "grew to 29 before being pulled back. Glass stayed only on frames that hold something" },
-      { label: "type scale steps", value: "6", note: "as defined in tokens. Display sits outside the scale, and the largest type is 6x the body" },
+      { label: "type scale steps", value: "6", note: "as defined in tokens. Display sits outside the scale, and the largest type is 5.6x the body" },
       { label: "font families", value: "2", note: "each language loads only its own" },
       { label: "accent colours", value: "1", note: "light and dark are the same colour" },
       { label: "time to interactive", value: "not yet", note: "measured with Lighthouse after deploy" },
@@ -532,9 +545,9 @@ export const en: Content = {
           "Our own rule says cards are for when elevation carries real hierarchy. Figures became typography, rules became an offset list, the audit became a log. Five panels of glass remain.",
       },
       {
-        caught: "We wrote down that Chrome drops backdrop-filter with SVG. It does not",
+        caught: "We wrote that Chrome drops backdrop-filter with SVG. It does not",
         fixed:
-          "Attach url() to backdrop-filter and Chrome reports true through CSS.supports while discarding the whole declaration at render time. The computed value becomes none. Refraction is demonstrated for real by the SVG tiles in the materials section, and the panels build thickness from blur and edge light instead.",
+          "We blamed the browser after one failure. Re-measuring showed Chrome 151 keeps the computed value at url(#id) and genuinely refracts. The real cause was feImage width and height not matching the element, because backdrop-filter does not auto-size filter images. Write a failure down as impossible and that sentence becomes the next person's ceiling.",
       },
       {
         caught: "444px of horizontal overflow. The entire layout was off its rails",
@@ -554,7 +567,7 @@ export const en: Content = {
       {
         caught: "13px of horizontal overflow at 320px, even with the table inside a scroll container",
         fixed:
-          "A grid item's default min-width is auto, so content pushes the parent wider. Overflow only works once min-width:0 is set.",
+          "A grid item's default min-width is auto, so content pushes the parent wider. Overflow only works once min-width: 0 is set.",
       },
       {
         caught: "6 eyebrow labels. The count rule caps them at 3",
@@ -586,7 +599,8 @@ export const en: Content = {
           "It reported \"English 1.15:1\", which was wrong. Compositing alpha bottom-up gave zero failures. A checker that is wrong makes both its passes and its failures meaningless.",
       },
     ],
-    note: "All thirteen were caught while building this page, and fixed after being caught. Three came from a person rather than a checker: the cards look generic, the typography is not handled well, and did we actually use our own skill.",
+    note:
+      "All thirteen were caught while building this page, and fixed after being caught. Three came from a person rather than a checker: the cards look generic, the typography is not handled well, and did we actually use our own skill.",
   },
   typography: {
     eyebrow: "Your language is probably not Latin",
@@ -600,14 +614,14 @@ export const en: Content = {
         title: "Line breaking",
         badLabel: "default",
         goodLabel: "word-break: keep-all",
-        note: "The default breaks mid-word. Look at the last line on the left — one word straddles two lines.",
+        note: "The default breaks mid-word. Look at the last line on the left: one word straddles two lines.",
       },
       {
         id: "leading",
         title: "Leading",
         badLabel: "line-height 1.45",
         goodLabel: "line-height 1.75",
-        note: "The Latin standard of 1.4-1.5 is tight for syllable blocks with a final consonant.",
+        note: "The Latin standard of 1.4 to 1.5 is tight for syllable blocks with a final consonant.",
       },
       {
         id: "size",
@@ -619,7 +633,7 @@ export const en: Content = {
     ],
     rules: [
       "Without word-break: keep-all, words break at arbitrary points",
-      "line-height between 1.6 and 1.8 — looser than Latin",
+      "line-height between 1.6 and 1.8, looser than Latin",
       "Never use negative tracking. Korean is already near-monospaced",
       "25 to 40 characters per line. The Latin 65 is far too long",
       "Shipping without a Korean font stack is itself a tell",
@@ -627,7 +641,8 @@ export const en: Content = {
   },
   rules: {
     h2: "Every rule states why",
-    lead: "A prohibition without a reason does not survive contact with a brief. If the user asks for it explicitly, the user wins.",
+    lead:
+      "A prohibition without a reason does not survive contact with a brief. So every rule carries its reason. If the user asks for something explicitly, the user wins.",
     items: [
       { rule: "Never start without references", why: "Starting from memory produces the category average." },
       { rule: "One accent colour", why: "Wanting a second one means the hierarchy failed." },
@@ -642,14 +657,19 @@ export const en: Content = {
   },
   install: {
     h2: "One line",
-    lead: "Targets are detected and preselected. If you edit a skill file yourself, updates leave it alone.",
+    lead:
+      "Install targets are detected and preselected. If you edit a skill file yourself, updates leave it alone.",
     command: "npx designpaca",
     targets: [
       { name: "Claude Code", path: "~/.claude/skills/designpaca/" },
       { name: "Codex CLI", path: "~/.codex/skills/designpaca/" },
-      { name: "Antigravity", path: ".agents/skills/designpaca/" },
-      { name: "Cursor", path: ".cursor/rules/designpaca.mdc" },
-      { name: "Windsurf", path: ".windsurf/rules/designpaca.md" },
+      { name: "Cursor", path: "~/.cursor/skills/designpaca/" },
+      { name: "ZCode", path: "~/.zcode/skills/designpaca/" },
+      { name: "Neutral path", path: "~/.agents/skills/designpaca/ · any harness" },
+      { name: "Antigravity", path: "~/.gemini/antigravity-cli/skills/designpaca/" },
+      { name: "Gemini CLI", path: "~/.gemini/skills/designpaca/" },
+      { name: "Windsurf", path: "~/.codeium/windsurf/skills/designpaca/" },
+      { name: "Copilot", path: "~/.copilot/skills/designpaca/" },
       { name: "AGENTS.md", path: "block injection, agent agnostic" },
     ],
     commands: [
diff --git a/apps/site/src/layouts/Base.astro b/apps/site/src/layouts/Base.astro
index 7cf670b..dc32c20 100644
--- a/apps/site/src/layouts/Base.astro
+++ b/apps/site/src/layouts/Base.astro
@@ -23,6 +23,17 @@ const alt = lang === "ko" ? "/en/" : "/";
 // 하드코딩하면 두 언어판이 어긋난다.
 const nav = (lang === "ko" ? ko : en).nav;
 
+// 내비 앵커는 홈의 섹션을 가리킨다. 홈이 아닌 페이지(쇼케이스 등)에서는
+// "#pipeline" 이 그 페이지 안의 없는 앵커가 되어 아무 일도 하지 않는다 —
+// 홈 경로를 붙여 홈 섹션으로 건너가게 한다.
+const homePath = lang === "ko" ? "/" : "/en/";
+const normalizedPath = Astro.url.pathname.replace(/\/+$/, "") || "/";
+const isHome = normalizedPath === (lang === "ko" ? "/" : "/en");
+const navItems = nav.items.map((i) => ({
+  ...i,
+  href: !isHome && i.href.startsWith("#") ? `${homePath}${i.href}` : i.href,
+}));
+
 // 파비콘: 페이지의 스파인 모티프를 그대로 쓴 단순 기하 마크.
 // data: URI 안의 SVG 는 상위 문서의 커스텀 프로퍼티를 읽지 못한다.
 // 하드 게이트 #1 의 유일한 예외이고, 값은 tokens.css 와 손으로 맞춘다.
@@ -99,7 +110,7 @@ const FAVICON =
         </a>
 
         <nav class="nav-main" aria-label={lang === "ko" ? "섹션" : "Sections"}>
-          {nav.items.map((i) => <a href={i.href}>{i.label}</a>)}
+          {navItems.map((i) => <a href={i.href}>{i.label}</a>)}
           {/* 페이지를 벗어나는 유일한 링크다. 화살표로 그렇다고 알린다 */}
           <a class="nav-repo" href={nav.repo} rel="noopener">
             {nav.repoLabel}
@@ -111,9 +122,10 @@ const FAVICON =
         </nav>
 
         <div class="header-end">
-          {/* 언어는 국가가 아니다. 국기 아이콘을 쓰지 않는다 */}
+          {/* 언어는 국가가 아니다. 국기 아이콘을 쓰지 않는다.
+              좁은 화면(<480px)에서는 이 버튼이 사라지고 메덹 안 행으로 들어간다 */}
           <a
-            class="btn btn-quiet btn-sm"
+            class="btn btn-quiet btn-sm lang-btn"
             href={alt}
             hreflang={lang === "ko" ? "en" : "ko"}
             lang={lang === "ko" ? "en" : "ko"}
@@ -121,18 +133,40 @@ const FAVICON =
             {lang === "ko" ? "English" : "한국어"}
           </a>
 
-          {/* 모바일 메뉴. details 라 JS 가 0바이트이고, 키보드와
-              스크린리더 대응이 브라우저 기본으로 온다 */}
+          {/* 모바일 메뉴. details 라 JS 가 0바이트에 가깝고, 열림 상태,
+              Esc, 포커스 순서, aria-expanded 를 브라우저가 이미 맞게 한다.
+              직접 만들면 그 넷을 전부 다시 구현해야 하고 보통 틀린다.
+              시트는 알약 전체 폭으로 열린다 — 11rem 짜리 조각 상자가 아니라 */}
           <details class="nav-mobile">
-            <summary class="btn btn-quiet btn-sm" aria-label={nav.menu}>
-              <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true">
+            <summary class="btn btn-quiet btn-sm" aria-label={nav.menu} aria-haspopup="menu">
+              <svg class="i-burger" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
                 <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
               </svg>
+              <svg class="i-close" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
+                <path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+              </svg>
             </summary>
-            <div class="nav-sheet glass">
-              {nav.items.map((i) => <a href={i.href}>{i.label}</a>)}
-              <a href={nav.repo} rel="noopener">{nav.repoLabel} ↗</a>
-            </div>
+            <nav class="nav-sheet glass" aria-label={nav.menu}>
+              {navItems.map((i, idx) => (
+                <a href={i.href}>
+                  <span class="sheet-num" aria-hidden="true">{String(idx + 1).padStart(2, "0")}</span>
+                  {i.label}
+                </a>
+              ))}
+              <a href={nav.repo} rel="noopener">
+                <span class="sheet-num" aria-hidden="true">↗</span>
+                {nav.repoLabel}
+              </a>
+              <a
+                class="sheet-lang"
+                href={alt}
+                hreflang={lang === "ko" ? "en" : "ko"}
+                lang={lang === "ko" ? "en" : "ko"}
+              >
+                <span class="sheet-num" aria-hidden="true">A</span>
+                {lang === "ko" ? "English" : "한국어"}
+              </a>
+            </nav>
           </details>
         </div>
       </div>
@@ -144,6 +178,25 @@ const FAVICON =
 
 
     <script is:inline>
+      // 메덥 닫기 두 가지. details 의 나머지(Esc·포커스·aria)는 브라우저 몫.
+      // 1) 행을 누르면 앵커로 스크롤하고 메덥은 스스로 닫는다 —
+      //    열린 채로 남아 본문을 가리는 것이 이 메뉴의 유일한 결함이었다.
+      // 2) 바깥을 누르면 닫는다. scroll 리스너는 쓰지 않는다(게이트 10).
+      (function () {
+        var menu = document.querySelector(".nav-mobile");
+        if (!menu) return;
+        menu.addEventListener("click", function (e) {
+          if (e.target && e.target.closest && e.target.closest("a")) {
+            menu.removeAttribute("open");
+          }
+        });
+        document.addEventListener("click", function (e) {
+          if (menu.open && !(e.target && e.target.closest && e.target.closest(".nav-mobile"))) {
+            menu.removeAttribute("open");
+          }
+        });
+      })();
+
       // 진입 연출. 한 번 보이면 계속 보인다.
       // scroll 리스너를 쓰지 않는다(하드 게이트 10).
       (function () {
@@ -206,6 +259,7 @@ const FAVICON =
     gap: var(--space-4);
     padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
     border-radius: var(--radius-frame);
+    position: relative; /* 모바일 시트의 기준 — 알약 전체 폭으로 펼친다 */
   }
   .wordmark {
     display: inline-flex;
@@ -246,42 +300,93 @@ const FAVICON =
   }
 
   /* ---- 모바일 메뉴 ------------------------------------------
-     details 를 쓴 이유는 JS 0바이트 때문만이 아니다. 열림 상태,
+     details 를 쓴 이유는 JS 를 줄이기 위해서만이 아니다. 열림 상태,
      Esc, 포커스 순서, aria-expanded 를 브라우저가 이미 맞게 한다.
-     직접 만들면 그 넷을 전부 다시 구현해야 하고 보통 틀린다. */
-  .nav-mobile { position: relative; }
+     직접 만들면 그 넷을 전부 다시 구현해야 하고 보통 틀린다.
+     1′ 국소 레퍼런스(navbar.gallery → browserbase.com): 항목이 많은 사이트는
+     내비 마크업을 아예 복제해 분리한다. 우리는 5행이라 복제하지 않고
+     시트를 알약 전체 폭으로 펼친다 — 조각 상자보다 계기판답다. */
+  .nav-mobile { position: static; }
   .nav-mobile > summary {
     list-style: none;
-    padding-inline: 0;
-    width: var(--control-h-sm);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--control-h);       /* 터치 대상은 44px — 36px 는 마우스용 */
+    min-height: var(--control-h);
+    padding: 0;
   }
   .nav-mobile > summary::-webkit-details-marker { display: none; }
   .nav-mobile > summary::marker { content: ""; }
+  .nav-mobile[open] > summary {
+    background: var(--glass-tint);
+    color: var(--ink);
+  }
+  .i-close { display: none; }
+  .nav-mobile[open] .i-burger { display: none; }
+  .nav-mobile[open] .i-close { display: block; }
 
   .nav-sheet {
+    /* 닫힌 details 의 자식에 display 를 주면 UA 숨김을 덮어써
+       '보이지 않지만 레이아웃에 사는' 시트가 된다(320px 오버플로의 원인).
+       닫힘을 명시적으로 다시 선언한다 — details 패턴의 필수 안전장치 */
+    display: none;
     position: absolute;
     top: calc(100% + var(--space-2));
+    left: 0;
     right: 0;
-    min-width: 11rem;
     padding: var(--space-2);
-    display: grid;
-    gap: 2px;
     z-index: 4;
+    border-radius: var(--radius-frame);
+    /* 메뉴는 콘텐츠가 아니라 크롬이다. .glass 의 4.5% 잉크는 알약에는
+       맞는 재질이지만 시트에는 가독성 버그다 — 뒤 글자가 비쳐 겹친다.
+       배경만 채우고 테두리 광(::after rim)·그림자는 유리 재질 그대로 */
+    background: color-mix(in oklab, var(--surface) 94%, white 6%);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
   }
+  .nav-mobile[open] .nav-sheet { display: grid; }
   .nav-sheet a {
     display: flex;
     align-items: center;
-    min-height: var(--control-h);
+    gap: var(--space-3);
+    min-height: calc(var(--control-h) + 4px);
     padding-inline: var(--space-3);
     border-radius: var(--radius-sm);
     color: var(--ink);
     text-decoration: none;
   }
   .nav-sheet a:hover { background: var(--glass-tint-2); }
+  .sheet-num {
+    font-family: var(--font-mono);
+    font-size: var(--mono-size);
+    color: var(--accent);
+    flex: none;
+  }
+  .sheet-lang { color: var(--ink-muted); }
+  .sheet-lang:hover { color: var(--ink); }
+
+  /* 열림 연출 — transform/opacity 만(게이트 8) */
+  .nav-mobile[open] .nav-sheet {
+    animation: sheet-in 180ms var(--ease-out) both;
+  }
+  @keyframes sheet-in {
+    from { opacity: 0; transform: translateY(-6px); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nav-mobile[open] .nav-sheet { animation: none; }
+  }
 
   @media (min-width: 900px) {
     .nav-main { display: flex; }
     .nav-mobile { display: none; }
   }
 
+  /* 480px 미만: 언어 버튼은 헤더에서 물러나고 메덥 행으로 간다.
+     320px 실측에서 워드마크+English+버거가 알약을 7px 밀어냈다 */
+  @media (max-width: 480px) {
+    .lang-btn { display: none; }
+    .header-inner { gap: var(--space-2); }
+  }
+
 </style>
diff --git a/apps/site/src/pages/showcase.astro b/apps/site/src/pages/showcase.astro
index a0708cd..0a97ade 100644
--- a/apps/site/src/pages/showcase.astro
+++ b/apps/site/src/pages/showcase.astro
@@ -5,114 +5,161 @@ import BgPhoto from "../components/BgPhoto.astro";
 import { WORK } from "../data/work.ts";
 
 /*
-  쇼케이스. 소개 페이지 안의 섹션이 아니라 **별도 페이지**다.
+  쇼케이스. 카드는 간단한 정보만 싣고(1′ 레퍼런스 tailwindcss.com/showcase:
+  이미지 + 이름 + 한 줄 종류 + 태그), 상세는 네이티브 <dialog> 모달로.
+  showModal() 이 Esc·포커스 트랩·aria를 브라우저가 처리한다 —
+  <details> 메뉴와 같은 결정이다. 사이트 자체는 모달의 큰 CTA로 새 탭.
 
-  홈에 있던 예전 섹션은 스크린샷 두 장을 카드에 넣고 각도를 살짝 준 것이었고,
-  들어갈 곳이 없었다 — 그림만 보여주고 끝나는 자리는 증거가 아니라 장식이다.
-  여기서는 타일을 누르면 **실제로 도는 사이트**로 들어간다.
-
-  타일 크기를 섞는다. 균일한 격자는 이 스킬이 금지하는 형태이고,
-  사례마다 중요도가 다른데 같은 크기로 두면 그 차이가 사라진다.
+  그리드는 균일하지 않다: 첫 사례(목요일의 화원)만 2열 폭으로 features,
+  나머지는 3열. 중요도가 다른데 같은 크기로 두면 그 차이가 사라진다.
 */
 const title = "사례 · designpaca";
 const description =
-  "designpaca 파이프라인으로 만든 사이트들. 각 사례의 컨셉과 감수한 리스크, 실측값을 함께 적었습니다. 타일을 누르면 실제 사이트가 열립니다.";
+  "designpaca 파이프라인으로 만든 사이트들. 카드를 누르면 컨셉과 리스크, 실측값이 담긴 상세가 열립니다.";
+const ariaClose = "닫기";
+const ariaDetail = "자세히 보기";
+const siteLabel = "사이트 보기";
 ---
 
 <Base lang="ko" title={title} description={description}>
   <section class="section intro has-bg" aria-labelledby="sc-h">
     <BgPhoto variant="align" mode="fixed" opacity={0.85} />
-    <p class="eyebrow reveal">사례</p>
+    <p class="eyebrow reveal">사례 아카이브</p>
     <h1 id="sc-h" class="reveal">파이프라인을 돌려서 나온 것들</h1>
     <p class="lead intro-lead reveal">
       모두 0단계부터 6단계까지 그대로 돌려서 나온 결과물입니다. 각 사례마다
       <strong>감수한 리스크</strong>를 함께 적었습니다 — 그것이 없으면 안전하지만 잊히는 디자인이 됩니다.
     </p>
     <p class="muted intro-note reveal">
-      타일을 누르면 실제 사이트가 열립니다. 목업이 아니라 동작하는 페이지입니다.
+      카드를 누르면 상세 화면이 열리고, 사이트는 새 탭에서 열립니다. 목업이 아니라
+      동작하는 페이지입니다.
     </p>
   </section>
 
   <section class="section grid-section" aria-label="사례 목록">
-    <ul class="full mosaic">
+    <ul class="full cards">
       {
         WORK.map((w, i) => (
-          <li class:list={["tile", `tile-${w.size}`, "reveal"]} style={`--reveal-delay:${i * 80}ms`}>
-            <a class="tile-link" href={w.href}>
-              <span class="tile-shot">
+          <li class:list={["card", { featured: w.size === "lg" }, "reveal"]} style={`--reveal-delay:${i * 70}ms`}>
+            <article>
+              <figure class="card-shot">
                 <Image
                   src={w.shot}
                   alt={w.alt}
-                  widths={[520, 900, 1440]}
-                  sizes="(max-width: 820px) 92vw, 46vw"
+                  widths={[520, 900, 1200]}
+                  sizes={w.size === "lg" ? "(max-width: 900px) 92vw, 62vw" : "(max-width: 900px) 92vw, 30vw"}
                   loading={i === 0 ? "eager" : "lazy"}
                 />
                 {w.shotAlt && (
                   <Image
-                    class="tile-shot-alt"
+                    class="card-shot-alt"
                     src={w.shotAlt}
                     alt=""
-                    widths={[520, 900, 1440]}
-                    sizes="(max-width: 820px) 92vw, 46vw"
+                    widths={[520, 900, 1200]}
+                    sizes={w.size === "lg" ? "(max-width: 900px) 92vw, 62vw" : "(max-width: 900px) 92vw, 30vw"}
                     loading="lazy"
                     aria-hidden="true"
                   />
                 )}
-              </span>
+                <span class="card-badge mono">{w.preset}</span>
+              </figure>
 
-              <span class="tile-body">
-                <span class="tile-head">
-                  <span class="tile-name">{w.name}</span>
-                  <span class="tile-kind muted">{w.kind}</span>
+              <div class="card-body">
+                <h2 class="card-name">{w.name}</h2>
+                <p class="card-kind">{w.kind}</p>
+                <p class="card-concept">{w.concept}</p>
+                <span class="card-more" aria-hidden="true">
+                  {ariaDetail}
+                  <svg viewBox="0 0 12 12" width="10" height="10">
+                    <path d="M2.5 9.5 9.5 2.5M4 2.5h5.5V8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+                  </svg>
                 </span>
-                <span class="tile-concept">{w.concept}</span>
-                <span class="tile-risk">
-                  <span class="risk-label">감수한 리스크</span>
-                  {w.risk}
-                </span>
-                <span class="tile-metrics mono">
-                  {w.metrics.map((m) => (
-                    <span class="metric">{m}</span>
-                  ))}
-                </span>
-              </span>
-            </a>
+              </div>
+
+              <button type="button" class="card-open" data-dialog={w.slug} aria-label={`${w.name} ${ariaDetail}`} />
+            </article>
+
+            {/* 상세 모달. 네이티브 <dialog>: Esc·포커스·inert 를 브라우저가 처리 */}
+            <dialog id={`wd-${w.slug}`} class="work-dialog" aria-labelledby={`wd-${w.slug}-t`}>
+              <div class="dialog-inner">
+                <button type="button" class="dialog-close" data-close aria-label={ariaClose}>
+                  <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
+                    <path d="M3.5 3.5l9 9M12.5 3.5l-9 9" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+                  </svg>
+                </button>
+
+                <figure class="dialog-shot">
+                  <Image
+                    src={w.shot}
+                    alt={w.alt}
+                    widths={[680, 1080, 1440]}
+                    sizes="min(92vw, 720px)"
+                    loading="lazy"
+                  />
+                </figure>
+
+                <div class="dialog-body">
+                  <p class="dialog-meta mono">{w.kind} · {w.preset}</p>
+                  <h2 class="dialog-name" id={`wd-${w.slug}-t`}>{w.name}</h2>
+                  <p class="dialog-concept">{w.concept}</p>
+
+                  <div class="dialog-risk">
+                    <span class="risk-label">감수한 리스크</span>
+                    <p>{w.risk}</p>
+                  </div>
+
+                  <ul class="dialog-metrics mono">
+                    {w.metrics.map((m) => (
+                      <li>{m}</li>
+                    ))}
+                  </ul>
+
+                  <a class="btn btn-solid dialog-site" href={w.href} target="_blank" rel="noopener">
+                    {siteLabel}
+                    <span class="site-icon" aria-hidden="true">
+                      <svg viewBox="0 0 12 12" width="11" height="11">
+                        <path d="M2.5 9.5 9.5 2.5M4 2.5h5.5V8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+                      </svg>
+                    </span>
+                  </a>
+                </div>
+              </div>
+            </dialog>
           </li>
         ))
       }
     </ul>
-
   </section>
 </Base>
 
 <style>
-  /* .page 그리드는 base.css 가 준다. 여기서 다시 정의하면
-     main 칼럼이 본문 폭(--measure)에서 벗어나 전 페이지가 어긋난다. */
   .intro {
     padding-block: calc(var(--header-h) + var(--space-7)) var(--space-7);
   }
-  /* 목록 페이지의 제목이라 홈 히어로만큼 클 이유가 없다.
-     h1 기본값(--display)은 여기서 세 줄로 접힌다. */
   #sc-h {
     font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
     max-width: 18ch;
+    text-wrap: balance;
+    word-break: keep-all;
   }
   .intro-lead {
     margin-bottom: var(--space-4);
     max-width: var(--measure);
+    text-wrap: pretty;
+    word-break: keep-all;
   }
   .intro-note {
     max-width: var(--measure);
+    text-wrap: pretty;
+    word-break: keep-all;
   }
 
   .grid-section {
     padding-block: 0 var(--space-8);
   }
 
-  /* ── 모자이크 ────────────────────────────────────────
-     타일 크기가 섞인다. 사례마다 무게가 다른데 같은 크기로 두면
-     그 차이가 사라지고, 그때부터는 격자가 내용을 지운다. */
-  .mosaic {
+  /* ── 카드 그리드: 첫 사례만 2열, 나머지 3열 ── */
+  .cards {
     list-style: none;
     margin: 0;
     max-width: 1180px;
@@ -120,37 +167,33 @@ const description =
     padding: 0 var(--gutter);
     display: grid;
     grid-template-columns: repeat(6, 1fr);
-    gap: var(--space-6) var(--space-5);
+    gap: var(--space-7) var(--space-5);
   }
-  .tile {
+  .card {
     margin: 0;
     min-width: 0;
-  }
-  .tile-lg {
-    grid-column: span 6;
-  }
-  .tile-md {
-    grid-column: span 3;
-  }
-  .tile-sm {
     grid-column: span 2;
   }
-
-  .tile-link {
-    display: grid;
-    gap: var(--space-4);
-    color: inherit;
-    text-decoration: none;
+  .featured {
+    grid-column: span 6;
   }
-  /* 큰 타일은 그림과 글을 나란히 둔다. 세로로 쌓으면 화면을 통째로 먹는다 */
-  .tile-lg .tile-link {
-    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+
+  .card article {
+    position: relative;
+    display: grid;
+    gap: var(--space-3);
+    height: 100%;
+  }
+  .featured article {
+    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
     gap: var(--space-6);
     align-items: center;
   }
 
-  .tile-shot {
+  /* 액자: 유리 한 장이 아니라 사진이 든 판. 겉 테두리(쉘) + 속 이미지(코어) */
+  .card-shot {
     position: relative;
+    margin: 0;
     display: block;
     overflow: hidden;
     border-radius: var(--radius-md);
@@ -158,99 +201,336 @@ const description =
     background: var(--surface-2);
     aspect-ratio: 16 / 10;
   }
-  .tile-shot :global(img) {
+  .card-shot :global(img) {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top center;
     display: block;
   }
-  /* 두 번째 컷은 위에 겹쳐 두고 호버에서 바꾼다.
-     스크롤이나 자동 전환으로 바꾸지 않는다 — 읽는 사람의 속도를 뺏지 않는다 */
-  .tile-shot-alt {
+  .card-shot-alt {
     position: absolute;
     inset: 0;
     opacity: 0;
   }
 
-  .tile-body {
-    display: grid;
-    gap: var(--space-3);
-    align-content: start;
-  }
-  .tile-head {
-    display: grid;
-    gap: var(--space-1);
-  }
-  .tile-name {
-    font-size: var(--step-1);
-    font-weight: var(--weight-medium);
-  }
-  .tile-kind {
-    font-size: var(--step-0);
-  }
-  .tile-concept {
-    color: var(--ink);
-    max-width: 34em;
-  }
-  .tile-risk {
-    display: grid;
-    gap: var(--space-1);
-    padding-top: var(--space-3);
-    border-top: 1px solid var(--line);
-    color: var(--ink-muted);
-    max-width: 38em;
-  }
-  .risk-label {
-    font-size: var(--step-0);
-    letter-spacing: var(--tracking-label);
+  .card-badge {
+    position: absolute;
+    top: var(--space-3);
+    right: var(--space-3);
+    background: rgba(11, 14, 18, 0.85);
+    backdrop-filter: blur(4px);
+    border: 1px solid var(--line);
     color: var(--accent);
+    font-size: var(--mono-size);
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+    letter-spacing: var(--tracking-label);
+    z-index: 2;
   }
 
-  .tile-metrics {
+  .card-body {
+    display: grid;
+    gap: var(--space-1);
+    align-content: start;
+  }
+  .card-name {
+    margin: 0;
+    font-size: var(--step-1);
+    font-weight: var(--weight-medium);
+    text-wrap: balance;
+    word-break: keep-all;
+  }
+  .card-kind {
+    margin: 0;
+    color: var(--ink-muted);
+    font-size: var(--step-0);
+  }
+  .card-concept {
+    margin: var(--space-2) 0 0;
+    color: var(--ink-muted);
+    font-size: var(--step-0);
+    line-height: var(--leading-normal);
+    text-wrap: pretty;
+    word-break: keep-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+  }
+  .featured .card-concept {
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
+  .card-more {
+    margin-top: var(--space-2);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--step--1);
+    letter-spacing: var(--tracking-label);
+    color: var(--ink-faint);
+    justify-self: start;
+  }
+
+  /* 카드 전체가 하나의 버튼이다 — 시각 요소는 비활성 텍스트로 남고
+     실제 포커스 대상은 이 하나 (키보드 탭 순서 = 카드 순서) */
+  .card-open {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    border: 0;
+    padding: 0;
+    background: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+  }
+  .card-open:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 4px;
+  }
+
+  /* ── 호버: 테두리 각성 + 스크린샷 교체 + 자세히 화살 이동 ── */
+  @media (prefers-reduced-motion: no-preference) {
+    .card-shot {
+      transition: border-color var(--dur-quick) var(--ease-out),
+        box-shadow var(--dur-quick) var(--ease-out);
+    }
+    .card-shot :global(img) {
+      transition: opacity var(--dur-slow) var(--ease-soft);
+    }
+    .card-more svg {
+      transition: transform var(--dur-quick) var(--ease-out);
+    }
+    article:has(.card-open:hover) .card-shot,
+    article:has(.card-open:focus-visible) .card-shot {
+      border-color: var(--accent);
+      box-shadow: 0 4px 24px rgba(79, 214, 196, 0.08);
+    }
+    article:has(.card-open:hover) .card-shot-alt,
+    article:has(.card-open:focus-visible) .card-shot-alt {
+      opacity: 1;
+    }
+    article:has(.card-open:hover) .card-more {
+      color: var(--ink);
+    }
+    article:has(.card-open:hover) .card-more svg {
+      transform: translate(2px, -2px);
+    }
+    article:has(.card-open:active) {
+      scale: 0.99;
+    }
+  }
+
+  /* ── 상세 모달 ── */
+  .work-dialog {
+    width: min(92vw, 720px);
+    max-height: min(88dvh, 900px);
+    padding: 0;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-frame);
+    /* 모달은 유리가 아니라 판이다 — 메뉴 시트와 같은 교훈: 크롬은 불투명 */
+    background: var(--surface);
+    color: var(--ink);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  .work-dialog::backdrop {
+    background: rgba(4, 6, 9, 0.62);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .work-dialog[open] {
+      animation: dialog-in 220ms var(--ease-soft) both;
+    }
+    @keyframes dialog-in {
+      from {
+        opacity: 0;
+        transform: translateY(14px) scale(0.985);
+      }
+    }
+  }
+
+  .dialog-inner {
+    position: relative;
+    display: grid;
+  }
+  .dialog-close {
+    position: absolute;
+    top: var(--space-3);
+    right: var(--space-3);
+    z-index: 4;
+    width: var(--control-h);
+    height: var(--control-h);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-sm);
+    /* 밝은 스크린샷 위에 얹힌다 — 반투명은 가독성이 아니라 배경과의 타협이다 */
+    background: var(--surface);
+    color: var(--ink-muted);
+    cursor: pointer;
+    transition: color var(--dur-quick) var(--ease-out),
+      border-color var(--dur-quick) var(--ease-out);
+  }
+  .dialog-close:hover {
+    color: var(--ink);
+    border-color: var(--ink-faint);
+  }
+  .dialog-close:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+
+  .dialog-shot {
+    margin: 0;
+    overflow: hidden;
+    border-bottom: 1px solid var(--line);
+    background: var(--surface-2);
+  }
+  .dialog-shot :global(img) {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .dialog-body {
+    display: grid;
+    gap: var(--space-3);
+    padding: var(--space-5) var(--space-5) var(--space-6);
+  }
+  .dialog-meta {
+    margin: 0;
+    color: var(--ink-faint);
+    font-size: var(--mono-size);
+    letter-spacing: var(--tracking-label);
+  }
+  .dialog-name {
+    margin: 0;
+    font-size: var(--step-2);
+    line-height: var(--leading-tight);
+    text-wrap: balance;
+    word-break: keep-all;
+  }
+  .dialog-concept {
+    margin: 0;
+    color: var(--ink-muted);
+    line-height: var(--leading-normal);
+    max-width: 38em;
+    text-wrap: pretty;
+    word-break: keep-all;
+  }
+  .dialog-risk {
+    display: grid;
+    gap: var(--space-1);
+    margin-top: var(--space-2);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--line);
+  }
+  .risk-label {
+    font-size: var(--step--1);
+    letter-spacing: var(--tracking-label);
+    color: var(--accent);
+    font-weight: 500;
+  }
+  .dialog-risk p {
+    margin: 0;
+    color: var(--ink-muted);
+    font-size: var(--step-0);
+    line-height: var(--leading-normal);
+    max-width: 40em;
+    text-wrap: pretty;
+    word-break: keep-all;
+  }
+
+  .dialog-metrics {
+    margin: var(--space-1) 0 0;
+    padding: 0;
+    list-style: none;
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-2) var(--space-4);
+    gap: var(--space-2);
     font-size: var(--mono-size);
     color: var(--ink-muted);
   }
-  .metric + .metric::before {
-    content: "·";
-    margin-right: var(--space-4);
-    color: var(--line-strong);
+  .dialog-metrics li {
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    padding: 3px 10px;
   }
 
-
-  /* ── 호버: 그림이 바뀌고 테두리가 선다 ─────────────── */
-  @media (prefers-reduced-motion: no-preference) {
-    .tile-shot :global(img) {
-      transition: opacity var(--dur-slow) var(--ease-soft);
-    }
-    .tile-shot {
-      transition: border-color var(--dur-quick) var(--ease-out);
-    }
-    .tile-link:hover .tile-shot,
-    .tile-link:focus-visible .tile-shot {
-      border-color: var(--accent);
-    }
-    .tile-link:hover .tile-shot-alt,
-    .tile-link:focus-visible .tile-shot-alt {
-      opacity: 1;
-    }
+  /* 큰 CTA — 버튼 안의 버튼(둥근 화살 칸)은 cmd-copy 아이콘과 같은 어휘 */
+  .dialog-site {
+    margin-top: var(--space-4);
+    justify-self: start;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding-inline: var(--space-4) var(--space-3);
+    font-size: var(--step-1);
+    font-weight: var(--weight-medium);
+  }
+  .site-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm);
+    background: color-mix(in oklab, var(--accent-ink) 18%, transparent);
+    transition: transform var(--dur-quick) var(--ease-out);
+  }
+  .dialog-site:hover .site-icon {
+    transform: translate(2px, -2px);
   }
 
   @media (max-width: 900px) {
-    .mosaic {
-      grid-template-columns: 1fr;
+    .cards {
+      grid-template-columns: repeat(2, 1fr);
+      gap: var(--space-6) var(--space-4);
     }
-    .tile-lg,
-    .tile-md,
-    .tile-sm {
+    .card {
       grid-column: span 1;
     }
-    .tile-lg .tile-link {
+    .featured {
+      grid-column: span 2;
+    }
+    .featured article {
       grid-template-columns: 1fr;
       gap: var(--space-4);
     }
   }
+
+  @media (max-width: 600px) {
+    .cards {
+      grid-template-columns: 1fr;
+    }
+    .featured {
+      grid-column: span 1;
+    }
+  }
 </style>
+
+<script>
+  // 모달 열기/닫기. showModal 이 포커스 트랩·Esc·inert 를 처리하므로
+  // 여기서는 여는 것과 배경 탭 닫기만.
+  const openers = document.querySelectorAll<HTMLButtonElement>(".card-open");
+  openers.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const dialog = document.getElementById(`wd-${btn.dataset.dialog}`);
+      if (dialog instanceof HTMLDialogElement) dialog.showModal();
+    });
+  });
+
+  document.querySelectorAll<HTMLDialogElement>(".work-dialog").forEach((dialog) => {
+    // 배경(=dialog 자신의 영역)을 누르면 닫는다. 내부 클릭은 target이 다르다
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) dialog.close();
+    });
+    const closeBtn = dialog.querySelector("[data-close]");
+    closeBtn?.addEventListener("click", () => dialog.close());
+  });
+</script>
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-archive-1440.png b/apps/site/tools/__shots__/baseline/dure-enrollment-archive-1440.png
new file mode 100644
index 0000000..aa7d040
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-archive-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-archive-390.png b/apps/site/tools/__shots__/baseline/dure-enrollment-archive-390.png
new file mode 100644
index 0000000..f9b0480
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-archive-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-catalog-1440.png b/apps/site/tools/__shots__/baseline/dure-enrollment-catalog-1440.png
new file mode 100644
index 0000000..d04377a
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-catalog-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-catalog-390.png b/apps/site/tools/__shots__/baseline/dure-enrollment-catalog-390.png
new file mode 100644
index 0000000..95f2b95
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-catalog-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-credits-1440.png b/apps/site/tools/__shots__/baseline/dure-enrollment-credits-1440.png
new file mode 100644
index 0000000..e98f566
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-credits-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-credits-390.png b/apps/site/tools/__shots__/baseline/dure-enrollment-credits-390.png
new file mode 100644
index 0000000..d03732c
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-credits-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-enrollments-1440.png b/apps/site/tools/__shots__/baseline/dure-enrollment-enrollments-1440.png
new file mode 100644
index 0000000..646c890
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-enrollments-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-enrollments-390.png b/apps/site/tools/__shots__/baseline/dure-enrollment-enrollments-390.png
new file mode 100644
index 0000000..bb903be
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-enrollments-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-notices-1440.png b/apps/site/tools/__shots__/baseline/dure-enrollment-notices-1440.png
new file mode 100644
index 0000000..e028571
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-notices-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-notices-390.png b/apps/site/tools/__shots__/baseline/dure-enrollment-notices-390.png
new file mode 100644
index 0000000..775e562
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-notices-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-starred-1440.png b/apps/site/tools/__shots__/baseline/dure-enrollment-starred-1440.png
new file mode 100644
index 0000000..ca3cfb9
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-starred-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/dure-enrollment-starred-390.png b/apps/site/tools/__shots__/baseline/dure-enrollment-starred-390.png
new file mode 100644
index 0000000..659c365
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/dure-enrollment-starred-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-attendance-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-attendance-1440.png
new file mode 100644
index 0000000..a58a78a
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-attendance-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-attendance-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-attendance-390.png
new file mode 100644
index 0000000..a65b480
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-attendance-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-calendar-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-calendar-1440.png
new file mode 100644
index 0000000..0a49b6f
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-calendar-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-calendar-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-calendar-390.png
new file mode 100644
index 0000000..be777b0
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-calendar-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-counsel-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-counsel-1440.png
new file mode 100644
index 0000000..db582bf
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-counsel-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-counsel-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-counsel-390.png
new file mode 100644
index 0000000..9f0cbb9
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-counsel-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-1440.png
new file mode 100644
index 0000000..f1a9c6e
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-390.png
new file mode 100644
index 0000000..e4976f7
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-dashboard-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-files-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-files-1440.png
new file mode 100644
index 0000000..9101600
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-files-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-files-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-files-390.png
new file mode 100644
index 0000000..30ede62
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-files-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-grades-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-grades-1440.png
new file mode 100644
index 0000000..4e600d5
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-grades-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-grades-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-grades-390.png
new file mode 100644
index 0000000..874b024
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-grades-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-notice-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-notice-1440.png
new file mode 100644
index 0000000..35228f4
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-notice-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-notice-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-notice-390.png
new file mode 100644
index 0000000..1b6c5b8
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-notice-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-report-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-report-1440.png
new file mode 100644
index 0000000..3123e5d
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-report-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-report-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-report-390.png
new file mode 100644
index 0000000..27bf62f
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-report-390.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-students-1440.png b/apps/site/tools/__shots__/baseline/gaon-lms-students-1440.png
new file mode 100644
index 0000000..4545dda
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-students-1440.png differ
diff --git a/apps/site/tools/__shots__/baseline/gaon-lms-students-390.png b/apps/site/tools/__shots__/baseline/gaon-lms-students-390.png
new file mode 100644
index 0000000..dbf29d1
Binary files /dev/null and b/apps/site/tools/__shots__/baseline/gaon-lms-students-390.png differ
diff --git a/apps/site/tools/__shots__/compare-starred.png b/apps/site/tools/__shots__/compare-starred.png
new file mode 100644
index 0000000..ff03e27
Binary files /dev/null and b/apps/site/tools/__shots__/compare-starred.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-archive-1440.png b/apps/site/tools/__shots__/current/dure-enrollment-archive-1440.png
new file mode 100644
index 0000000..a0efe2a
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-archive-1440.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-archive-390.png b/apps/site/tools/__shots__/current/dure-enrollment-archive-390.png
new file mode 100644
index 0000000..6654596
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-archive-390.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-catalog-1440.png b/apps/site/tools/__shots__/current/dure-enrollment-catalog-1440.png
new file mode 100644
index 0000000..e64eb4a
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-catalog-1440.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-catalog-390.png b/apps/site/tools/__shots__/current/dure-enrollment-catalog-390.png
new file mode 100644
index 0000000..f6aa875
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-catalog-390.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-credits-1440.png b/apps/site/tools/__shots__/current/dure-enrollment-credits-1440.png
new file mode 100644
index 0000000..49bf166
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-credits-1440.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-credits-390.png b/apps/site/tools/__shots__/current/dure-enrollment-credits-390.png
new file mode 100644
index 0000000..f3833e1
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-credits-390.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-enrollments-1440.png b/apps/site/tools/__shots__/current/dure-enrollment-enrollments-1440.png
new file mode 100644
index 0000000..ba2f5d0
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-enrollments-1440.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-enrollments-390.png b/apps/site/tools/__shots__/current/dure-enrollment-enrollments-390.png
new file mode 100644
index 0000000..8c4aaf0
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-enrollments-390.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-notices-1440.png b/apps/site/tools/__shots__/current/dure-enrollment-notices-1440.png
new file mode 100644
index 0000000..7f9aa0e
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-notices-1440.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-notices-390.png b/apps/site/tools/__shots__/current/dure-enrollment-notices-390.png
new file mode 100644
index 0000000..edbb006
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-notices-390.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-starred-1440.png b/apps/site/tools/__shots__/current/dure-enrollment-starred-1440.png
new file mode 100644
index 0000000..10244e9
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-starred-1440.png differ
diff --git a/apps/site/tools/__shots__/current/dure-enrollment-starred-390.png b/apps/site/tools/__shots__/current/dure-enrollment-starred-390.png
new file mode 100644
index 0000000..3b2320b
Binary files /dev/null and b/apps/site/tools/__shots__/current/dure-enrollment-starred-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-attendance-1440.png b/apps/site/tools/__shots__/current/gaon-lms-attendance-1440.png
new file mode 100644
index 0000000..c3c3be8
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-attendance-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-attendance-390.png b/apps/site/tools/__shots__/current/gaon-lms-attendance-390.png
new file mode 100644
index 0000000..c284401
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-attendance-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-calendar-1440.png b/apps/site/tools/__shots__/current/gaon-lms-calendar-1440.png
new file mode 100644
index 0000000..dcb6592
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-calendar-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-calendar-390.png b/apps/site/tools/__shots__/current/gaon-lms-calendar-390.png
new file mode 100644
index 0000000..ca2838b
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-calendar-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-counsel-1440.png b/apps/site/tools/__shots__/current/gaon-lms-counsel-1440.png
new file mode 100644
index 0000000..afd30aa
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-counsel-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-counsel-390.png b/apps/site/tools/__shots__/current/gaon-lms-counsel-390.png
new file mode 100644
index 0000000..92928b5
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-counsel-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-dashboard-1440.png b/apps/site/tools/__shots__/current/gaon-lms-dashboard-1440.png
new file mode 100644
index 0000000..3ec8837
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-dashboard-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-dashboard-390.png b/apps/site/tools/__shots__/current/gaon-lms-dashboard-390.png
new file mode 100644
index 0000000..fdaf1f6
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-dashboard-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-files-1440.png b/apps/site/tools/__shots__/current/gaon-lms-files-1440.png
new file mode 100644
index 0000000..ca79f80
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-files-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-files-390.png b/apps/site/tools/__shots__/current/gaon-lms-files-390.png
new file mode 100644
index 0000000..f5ca060
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-files-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-grades-1440.png b/apps/site/tools/__shots__/current/gaon-lms-grades-1440.png
new file mode 100644
index 0000000..95ebd06
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-grades-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-grades-390.png b/apps/site/tools/__shots__/current/gaon-lms-grades-390.png
new file mode 100644
index 0000000..722a3f9
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-grades-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-notice-1440.png b/apps/site/tools/__shots__/current/gaon-lms-notice-1440.png
new file mode 100644
index 0000000..dcdd5b9
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-notice-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-notice-390.png b/apps/site/tools/__shots__/current/gaon-lms-notice-390.png
new file mode 100644
index 0000000..cb296fa
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-notice-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-report-1440.png b/apps/site/tools/__shots__/current/gaon-lms-report-1440.png
new file mode 100644
index 0000000..517890e
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-report-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-report-390.png b/apps/site/tools/__shots__/current/gaon-lms-report-390.png
new file mode 100644
index 0000000..591d1c9
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-report-390.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-students-1440.png b/apps/site/tools/__shots__/current/gaon-lms-students-1440.png
new file mode 100644
index 0000000..4f32176
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-students-1440.png differ
diff --git a/apps/site/tools/__shots__/current/gaon-lms-students-390.png b/apps/site/tools/__shots__/current/gaon-lms-students-390.png
new file mode 100644
index 0000000..bbd318d
Binary files /dev/null and b/apps/site/tools/__shots__/current/gaon-lms-students-390.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-archive-1440.png b/apps/site/tools/__shots__/diff-dure-enrollment-archive-1440.png
new file mode 100644
index 0000000..a71f3f1
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-archive-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-archive-390.png b/apps/site/tools/__shots__/diff-dure-enrollment-archive-390.png
new file mode 100644
index 0000000..cdddad9
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-archive-390.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-catalog-1440.png b/apps/site/tools/__shots__/diff-dure-enrollment-catalog-1440.png
new file mode 100644
index 0000000..6dcbffd
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-catalog-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-catalog-390.png b/apps/site/tools/__shots__/diff-dure-enrollment-catalog-390.png
new file mode 100644
index 0000000..a9544e0
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-catalog-390.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-credits-1440.png b/apps/site/tools/__shots__/diff-dure-enrollment-credits-1440.png
new file mode 100644
index 0000000..f7f9f5f
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-credits-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-credits-390.png b/apps/site/tools/__shots__/diff-dure-enrollment-credits-390.png
new file mode 100644
index 0000000..dee096b
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-credits-390.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-enrollments-1440.png b/apps/site/tools/__shots__/diff-dure-enrollment-enrollments-1440.png
new file mode 100644
index 0000000..f377107
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-enrollments-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-enrollments-390.png b/apps/site/tools/__shots__/diff-dure-enrollment-enrollments-390.png
new file mode 100644
index 0000000..b1036e5
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-enrollments-390.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-notices-1440.png b/apps/site/tools/__shots__/diff-dure-enrollment-notices-1440.png
new file mode 100644
index 0000000..39e5915
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-notices-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-notices-390.png b/apps/site/tools/__shots__/diff-dure-enrollment-notices-390.png
new file mode 100644
index 0000000..9732617
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-notices-390.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-starred-1440.png b/apps/site/tools/__shots__/diff-dure-enrollment-starred-1440.png
new file mode 100644
index 0000000..e2592e9
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-starred-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-dure-enrollment-starred-390.png b/apps/site/tools/__shots__/diff-dure-enrollment-starred-390.png
new file mode 100644
index 0000000..d853f8b
Binary files /dev/null and b/apps/site/tools/__shots__/diff-dure-enrollment-starred-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-attendance-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-attendance-1440.png
new file mode 100644
index 0000000..d06a53b
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-attendance-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-attendance-390.png b/apps/site/tools/__shots__/diff-gaon-lms-attendance-390.png
new file mode 100644
index 0000000..b82ebb8
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-attendance-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-calendar-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-calendar-1440.png
new file mode 100644
index 0000000..a012766
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-calendar-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-calendar-390.png b/apps/site/tools/__shots__/diff-gaon-lms-calendar-390.png
new file mode 100644
index 0000000..cd46e07
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-calendar-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-counsel-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-counsel-1440.png
new file mode 100644
index 0000000..f879299
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-counsel-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-counsel-390.png b/apps/site/tools/__shots__/diff-gaon-lms-counsel-390.png
new file mode 100644
index 0000000..7fbfe0b
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-counsel-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-dashboard-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-dashboard-1440.png
new file mode 100644
index 0000000..149aa73
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-dashboard-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-dashboard-390.png b/apps/site/tools/__shots__/diff-gaon-lms-dashboard-390.png
new file mode 100644
index 0000000..ba8e328
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-dashboard-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-files-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-files-1440.png
new file mode 100644
index 0000000..4e8624e
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-files-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-files-390.png b/apps/site/tools/__shots__/diff-gaon-lms-files-390.png
new file mode 100644
index 0000000..51f2c5c
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-files-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-grades-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-grades-1440.png
new file mode 100644
index 0000000..1e53740
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-grades-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-grades-390.png b/apps/site/tools/__shots__/diff-gaon-lms-grades-390.png
new file mode 100644
index 0000000..ed4a969
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-grades-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-notice-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-notice-1440.png
new file mode 100644
index 0000000..2be6faf
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-notice-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-notice-390.png b/apps/site/tools/__shots__/diff-gaon-lms-notice-390.png
new file mode 100644
index 0000000..35c03d7
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-notice-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-report-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-report-1440.png
new file mode 100644
index 0000000..140d46c
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-report-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-report-390.png b/apps/site/tools/__shots__/diff-gaon-lms-report-390.png
new file mode 100644
index 0000000..a4757e8
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-report-390.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-students-1440.png b/apps/site/tools/__shots__/diff-gaon-lms-students-1440.png
new file mode 100644
index 0000000..a7fc6ba
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-students-1440.png differ
diff --git a/apps/site/tools/__shots__/diff-gaon-lms-students-390.png b/apps/site/tools/__shots__/diff-gaon-lms-students-390.png
new file mode 100644
index 0000000..60ac18f
Binary files /dev/null and b/apps/site/tools/__shots__/diff-gaon-lms-students-390.png differ
diff --git a/apps/site/tools/audit.mjs b/apps/site/tools/audit.mjs
new file mode 100644
index 0000000..84d848e
--- /dev/null
+++ b/apps/site/tools/audit.mjs
@@ -0,0 +1,201 @@
+// 확장된 두 앱 감사: 신규 뷰 전부 + 기존 기능 회귀 + 오버플로
+import puppeteer from "puppeteer-core";
+import path from "node:path";
+
+const root = "D:/workspace/designpaca/apps/site";
+const chrome = "C:/Program Files/Google/Chrome/Application/chrome.exe";
+const results = [];
+const pass = (name, ok, detail = "") =>
+  results.push(`${ok ? "PASS" : "FAIL"}  ${name}${detail ? ` — ${detail}` : ""}`);
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const browser = await puppeteer.launch({
+  executablePath: chrome,
+  headless: "new",
+  args: ["--no-sandbox", "--disable-gpu", "--force-device-scale-factor=1"],
+  defaultViewport: { width: 1440, height: 900 },
+});
+const page = await browser.newPage();
+page.on("pageerror", (e) => results.push(`FAIL  pageerror — ${e.message}`));
+const jclick = (sel) => page.evaluate((s) => { const el = document.querySelector(s); if (!el) throw new Error("no " + s); el.click(); }, sel);
+const over = () => page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+const gotoFile = async (app) =>
+  page.goto(`file:///${path.join(root, "public/work", app, "index.html")}`, { waitUntil: "networkidle0" });
+
+// ══════════ 가온 학적부 (8 뷰) ══════════
+await gotoFile("gaon-lms");
+
+for (const v of ["dashboard","students","attendance","grades","files","calendar","counsel","report","notice"]) {
+  await jclick(`[data-view="${v}"]`);
+  pass(`가온 뷰 ${v}`, await page.$eval(`#view-${v}`, (el) => el.classList.contains("is-on")));
+}
+pass("가온 aria-current(공지)", await page.$eval('[data-view="notice"]', (el) => el.getAttribute("aria-current") === "page"));
+
+// 사이드바 그룹 헤더 3개
+pass("가온 사이드 그룹 3개", (await page.$$eval(".side-group", (n) => n.length)) === 3);
+
+// 출석부: 셀 순환 + 주 전환 + 반 전환
+await jclick('[data-view="attendance"]');
+const cellBefore = await page.$eval(".att-btn", (b) => b.textContent);
+await jclick(".att-btn");
+const cellAfter = await page.$eval(".att-btn", (b) => b.textContent);
+pass("가온 출석 순환 ○→△", cellBefore === "○" && cellAfter === "△");
+await jclick("#att-prev");
+pass("가온 주 전환(1주)", (await page.$eval("#att-week", (el) => el.textContent)) === "3월 1주");
+await jclick("#att-next");
+await page.evaluate(() => document.querySelector("#att-class [data-sub='코딩 입문']").click());
+await sleep(150);
+const codingRows = await page.$$eval("#att-table tbody tr", (rows) => rows.map((r) => r.textContent.slice(0, 12)));
+pass("가온 반 전환(코딩 입문 3행, 휴학 포함)", codingRows.length === 3, codingRows.join("|"));
+
+// 자료실: 필터 + 배부 토글
+await jclick('[data-view="files"]');
+await page.evaluate(() => document.querySelector('#file-chips [data-kind="PDF"]').click());
+await sleep(150);
+pass("가온 자료 필터 PDF", (await page.$$("#file-body tr")).length === 2);
+const giveBefore = await page.$eval("[data-file]", (b) => b.getAttribute("aria-pressed"));
+await jclick("[data-file]");
+pass("가온 배부 토글", (await page.$eval("[data-file]", (b) => b.getAttribute("aria-pressed"))) !== giveBefore);
+
+// 달력: 42칸 + 오늘 1 + 예정 7
+await jclick('[data-view="calendar"]');
+pass("가온 달력 42칸·오늘 1", (await page.$$("#cal-table td")).length === 42 && (await page.$$(".is-today")).length === 1);
+pass("가온 다가오는 일정 7건", (await page.$$("#up-list li")).length === 7);
+
+// 상담: 필터 + 카드→학생 모달
+await jclick('[data-view="counsel"]');
+await page.evaluate(() => document.querySelector('#co-chips [data-sub="국어 논술 A"]').click());
+await sleep(150);
+pass("가온 상담 필터(국어 2건)", (await page.$$(".counsel-card")).length === 2);
+await jclick(".counsel-card");
+pass("가온 상담 카드→학생 모달", await page.$eval("#stu-dialog", (d) => d.open));
+await page.keyboard.press("Escape");
+
+// 리포트: 4행 + 수학 행 계산값
+await jclick('[data-view="report"]');
+pass("가온 리포트 4행", (await page.$$("#report-table tbody tr")).length === 4);
+const repMath = await page.$eval("#report-table tbody tr", (tr) => tr.textContent.replace(/\s+/g, " "));
+pass("가온 리포트 수학 행 실계산", repMath.includes("3명") && repMath.includes("91%") && repMath.includes("96%") && repMath.includes("84.4점"));
+
+// 회귀: 검색/칩/학생 모달/메모/채점
+await jclick('[data-view="students"]');
+await page.type("#q", "박");
+await sleep(200);
+pass("가온 검색 축소(회귀)", (await page.$$("#view-students [data-stu]")).length === 1);
+await page.$eval("#q", (el) => { el.value = ""; el.dispatchEvent(new Event("input", { bubbles: true })); });
+await jclick("#view-students [data-stu]");
+await page.waitForSelector("#stu-dialog[open]");
+await page.type("#note-input", "확정 회귀 검사");
+await jclick("#note-form button[type=submit]");
+await sleep(150);
+pass("가온 메모 추가(회귀)", (await page.$$("#stu-note-list li")).length === 2);
+await jclick("#stu-dialog .modal-close");
+await jclick('[data-view="grades"]');
+await page.evaluate(() => document.querySelector('[data-assign="a2"]').click());
+await page.waitForSelector("#as-dialog[open]");
+await jclick("#as-save");
+await sleep(150);
+pass("가온 채점 상태 갱신(회귀)", (await page.$eval('#as-table .row-open[data-assign="a2"]', (b) => b.closest("tr").querySelector(".state").textContent)) === "채점 완료");
+await page.keyboard.press("Escape");
+pass("가온 1440 오버플로", (await over()) <= 0, `+${await over()}px`);
+
+// ── 뷰별 프로덕션 요소 (v10) ──
+await jclick('[data-view="students"]');
+pass("가온 수강생 보호자 열", await page.$eval("#stu-table thead", (t) => t.textContent.includes("보호자")));
+pass("가온 수강생 요약 스트립", (await page.$$eval("#stu-stats > div", (n) => n.length)) === 5);
+await jclick('[data-view="attendance"]');
+pass("가온 출석 일별 합계", (await page.$eval("#att-foot", (f) => f.textContent.includes("/"))));
+await jclick('[data-view="grades"]');
+await page.evaluate(() => document.querySelector('[data-as="과학 실험"]').click());
+pass("가온 성적 과목 필터", (await page.$$eval("#as-table tbody tr:not([hidden])", (n) => n.length)) === 1);
+await page.evaluate(() => document.querySelector('[data-as="all"]').click());
+await jclick('[data-view="calendar"]');
+pass("가온 일정 유형 배지·범례", (await page.$$eval(".cal-ev.is-exam", (n) => n.length)) === 2 && (await page.$$eval(".cal-legend .key", (n) => n.length)) === 4);
+pass("가온 일정 D-day", (await page.$eval("#up-list", (u) => u.textContent.includes("D-"))));
+await jclick('[data-view="counsel"]');
+pass("가온 예정 상담 3건", (await page.$$eval('section[aria-labelledby="co-next-h"] .due-row', (n) => n.length)) === 3);
+await jclick('[data-view="report"]');
+pass("가온 학기 요약 카드", (await page.$$eval("#rep-stats > div", (n) => n.length)) === 4);
+await jclick('[data-view="notice"]');
+await page.evaluate(() => document.querySelector('[data-nt="소통"]').click());
+pass("가온 공지 분류 필터", (await page.$$eval(".notice-row:not([hidden])", (n) => n.length)) === 3);
+await page.evaluate(() => document.querySelector('[data-nt="전체"]').click());
+
+// ══════════ 두레대학 (6 탭) ══════════
+await gotoFile("dure-enrollment");
+
+for (const v of ["catalog","starred","enrollments","credits","archive","notices"]) {
+  await jclick(`.tab[data-view="${v}"]`);
+  pass(`두레 탭 ${v}`, await page.$eval(`#view-${v}`, (el) => el.classList.contains("is-on")));
+}
+pass("두레 aria-current(공지)", await page.$eval('.tab[data-view="notices"]', (el) => el.getAttribute("aria-current") === "page"));
+pass("두레 빈 상태 2종", await page.$eval("#en-empty", (el) => !el.hidden));
+
+// 관심: 모달에서 남기기 → 관심 뷰 1행
+await jclick('.tab[data-view="catalog"]');
+await jclick('[data-course="phil115"]');
+await jclick("#cd-star");
+await jclick("#course-dialog .modal-close");
+await jclick('.tab[data-view="starred"]');
+pass("두레 관심 1행 + 목록 ★", (await page.$$("#starred-list .course-row")).length === 1 && (await page.$$("#starred-list .c-star")).length === 1);
+
+// 신청 → 내역·이수 반영 → 총람 소계 → 공지
+await jclick('.tab[data-view="catalog"]');
+await jclick('[data-course="econ210"]');
+await jclick("#cd-apply");
+await sleep(200);
+pass("두레 신청 블록 2(회귀)", (await page.$$(".tt-block")).length === 2);
+await jclick('.tab[data-view="enrollments"]');
+pass("두레 내역 1행·3학점", (await page.$$("#en-table tbody tr")).length === 1 && (await page.$eval("#en-credits", (el) => el.textContent)) === "3");
+await jclick('.tab[data-view="credits"]');
+const crMajor = await page.$eval("#cr-table tbody tr", (tr) => tr.textContent.replace(/\s+/g, " "));
+pass("두레 이수 전공 반영", crMajor.includes("+ 3") && crMajor.includes("48"), crMajor);
+await jclick('.tab[data-view="archive"]');
+pass("두레 총람 12행(10+소계2)", (await page.$$("#ar-table tbody tr")).length === 12);
+pass("두레 총람 여석 임박 표시", (await page.$$("#ar-table .low-seats")).length >= 1);
+await jclick('.tab[data-view="notices"]');
+pass("두레 공지 6건", (await page.$$("#notice-list li")).length === 6);
+
+// 겹침 회귀: bio105 차단
+await jclick('.tab[data-view="catalog"]');
+await jclick('[data-course="econ210"]'); // 이미 신청됨 → 취소 버튼
+await page.waitForSelector("#course-dialog[open]");
+await jclick("#cd-cancel");
+await sleep(150);
+await jclick('[data-course="econ210"]');
+await jclick("#cd-apply");
+await sleep(150);
+await jclick('[data-course="bio105"]');
+await page.waitForSelector("#course-dialog[open]");
+pass("두레 겹침 차단(회귀)", (await page.$eval("#cd-warn", (el) => !el.hidden && el.textContent.includes("겹칩니다"))) && (await page.$eval("#cd-apply", (b) => b.disabled)));
+await jclick("#course-dialog .modal-close");
+await jclick('.tab[data-view="enrollments"]');
+await jclick("[data-cancel]");
+pass("두레 내역 화면 취소", (await page.$$("#en-table tbody tr")).length === 0);
+pass("두레 1440 오버플로", (await over()) <= 0, `+${await over()}px`);
+
+// ══════════ 좁은 폭 ══════════
+for (const w of [320, 390]) {
+  await page.setViewport({ width: w, height: 800 });
+  await gotoFile("gaon-lms");
+  const og = await over();
+  pass(`가온 ${w}px`, og <= 0, `+${og}px`);
+  await gotoFile("dure-enrollment");
+  const od = await over();
+  pass(`두레 ${w}px`, od <= 0, `+${od}px`);
+}
+
+// ── CSS 중괄호 균형 (v11 교훈) ──
+import fs2 from "node:fs";
+for (const f of ["gaon-lms/styles/main.css", "dure-enrollment/styles/main.css", "gaon-lms/styles/tokens.css", "dure-enrollment/styles/tokens.css"]) {
+  const c = fs2.readFileSync(path.join(root, "public/work", f), "utf8");
+  let depth = 0;
+  for (const ch of c) { if (ch === "{") depth++; if (ch === "}") depth--; }
+  pass(`CSS 중괄호 균형 ${f}`, depth === 0, `depth ${depth}`);
+}
+
+await browser.close();
+console.log(results.join("\n"));
+const fails = results.filter((r) => r.startsWith("FAIL")).length;
+console.log(fails === 0 ? "\nALL PASS" : `\n${fails} FAIL`);
+process.exit(fails === 0 ? 0 : 1);
diff --git a/apps/site/tools/capture-shots.mjs b/apps/site/tools/capture-shots.mjs
new file mode 100644
index 0000000..e63becb
--- /dev/null
+++ b/apps/site/tools/capture-shots.mjs
@@ -0,0 +1,132 @@
+import { execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+const chromePath = "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe";
+const shotsDir = path.join(rootDir, "src", "assets", "shots");
+
+if (!fs.existsSync(shotsDir)) {
+  fs.mkdirSync(shotsDir, { recursive: true });
+}
+
+const targets = [
+  {
+    url: path.join(rootDir, "public", "work", "thursday-flowers", "index.html"),
+    out: path.join(shotsDir, "work-thursday-flowers.png"),
+    altUrl: path.join(rootDir, "public", "work", "thursday-flowers", "index.html"),
+    altOut: path.join(shotsDir, "work-thursday-flowers-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "muwol-coffee", "index.html"),
+    out: path.join(shotsDir, "work-muwol-coffee.png"),
+    altUrl: path.join(rootDir, "public", "work", "muwol-coffee", "index.html"),
+    altOut: path.join(shotsDir, "work-muwol-coffee-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "pulsegate", "index.html"),
+    out: path.join(shotsDir, "work-pulsegate.png"),
+    altUrl: path.join(rootDir, "public", "work", "pulsegate", "index.html"),
+    altOut: path.join(shotsDir, "work-pulsegate-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "form-architecture", "index.html"),
+    out: path.join(shotsDir, "work-form-architecture.png"),
+    altUrl: path.join(rootDir, "public", "work", "form-architecture", "index.html"),
+    altOut: path.join(shotsDir, "work-form-architecture-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "overtone-sound", "index.html"),
+    out: path.join(shotsDir, "work-overtone-sound.png"),
+    altUrl: path.join(rootDir, "public", "work", "overtone-sound", "index.html"),
+    altOut: path.join(shotsDir, "work-overtone-sound-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "font-foundry", "index.html"),
+    out: path.join(shotsDir, "work-font-foundry.png"),
+    altUrl: path.join(rootDir, "public", "work", "font-foundry", "index.html"),
+    altOut: path.join(shotsDir, "work-font-foundry-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "lumina-optics", "index.html"),
+    out: path.join(shotsDir, "work-lumina-optics.png"),
+    altUrl: path.join(rootDir, "public", "work", "lumina-optics", "index.html"),
+    altOut: path.join(shotsDir, "work-lumina-optics-2.png"),
+    webgl: true, // three.js 캔버스 — swiftshader 필요
+  },
+  {
+    url: path.join(rootDir, "public", "work", "hyang-incense", "index.html"),
+    out: path.join(shotsDir, "work-hyang-incense.png"),
+    altUrl: path.join(rootDir, "public", "work", "hyang-incense", "index.html"),
+    altOut: path.join(shotsDir, "work-hyang-incense-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "synapse-bci", "index.html"),
+    out: path.join(shotsDir, "work-synapse-bci.png"),
+    altUrl: path.join(rootDir, "public", "work", "synapse-bci", "index.html"),
+    altOut: path.join(shotsDir, "work-synapse-bci-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "baekje-celadon", "index.html"),
+    out: path.join(shotsDir, "work-baekje-celadon.png"),
+    altUrl: path.join(rootDir, "public", "work", "baekje-celadon", "index.html"),
+    altOut: path.join(shotsDir, "work-baekje-celadon-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "orbit-aerospace", "index.html"),
+    out: path.join(shotsDir, "work-orbit-aerospace.png"),
+    altUrl: path.join(rootDir, "public", "work", "orbit-aerospace", "index.html"),
+    altOut: path.join(shotsDir, "work-orbit-aerospace-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "gaon-lms", "index.html"),
+    out: path.join(shotsDir, "work-gaon-lms.png"),
+    altUrl: path.join(rootDir, "public", "work", "gaon-lms", "index.html"),
+    altOut: path.join(shotsDir, "work-gaon-lms-2.png"),
+  },
+  {
+    url: path.join(rootDir, "public", "work", "dure-enrollment", "index.html"),
+    out: path.join(shotsDir, "work-dure-enrollment.png"),
+    altUrl: path.join(rootDir, "public", "work", "dure-enrollment", "index.html"),
+    altOut: path.join(shotsDir, "work-dure-enrollment-2.png"),
+  },
+];
+
+console.log("📸 Capturing high-resolution screenshots...");
+
+const shot = (t, url, out) => {
+  const flags = t.webgl
+    ? ["--no-sandbox", "--use-angle=swiftshader"] // --disable-gpu 는 WebGL 을 죽인다
+    : ["--disable-gpu", "--no-sandbox"];
+  execFileSync(chromePath, [
+    "--headless=new",
+    "--hide-scrollbars",
+    ...flags,
+    "--force-device-scale-factor=1",
+    "--window-size=1440,900",
+    `--screenshot=${out}`,
+    `file://${url}`,
+  ]);
+};
+
+for (const t of targets) {
+  console.log(`- Capturing ${path.basename(t.out)}`);
+  try {
+    shot(t, t.url, t.out);
+  } catch (e) {
+    console.error(`Error capturing ${t.out}:`, e.message);
+  }
+
+  if (t.altOut) {
+    console.log(`- Capturing ${path.basename(t.altOut)}`);
+    try {
+      shot(t, t.altUrl, t.altOut);
+    } catch (e) {
+      console.error(`Error capturing ${t.altOut}:`, e.message);
+    }
+  }
+}
+
+console.log("✅ All screenshots captured successfully!");
diff --git a/apps/site/tools/collect-images.mjs b/apps/site/tools/collect-images.mjs
new file mode 100644
index 0000000..739bc40
--- /dev/null
+++ b/apps/site/tools/collect-images.mjs
@@ -0,0 +1,78 @@
+/**
+ * 직렬 생성 세션 회수 — 디렉터리 생성 시각(13:02:30+ )순 = JOBS 실행 순서.
+ * 각 세션의 exec-*.png 을 JOBS 순서에 매핑해 .gen/<slug>--<name>.png 로 복사.
+ * 이후 webp 변환은 convert-images.mjs 가 담당한다.
+ */
+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 staging = path.join(__dirname, ".gen");
+const genDir = path.join(os.homedir(), ".codex", "generated_images");
+const START = new Date("2026-08-21T13:02:30").getTime();
+
+// gen-images.mjs 의 JOBS 순서와 동일하게 유지 (slug--name 순서가 곧 실행 순서)
+const ORDER = [
+  "muwol-coffee--beans-hero",
+  "muwol-coffee--pourover",
+  "muwol-coffee--roastery",
+  "hyang-incense--smoke",
+  "hyang-incense--agarwood",
+  "baekje-celadon--ewer-dark",
+  "baekje-celadon--crazing",
+  "baekje-celadon--inlay",
+  "form-architecture--pavilion-bw",
+  "form-architecture--interior-bw",
+  "form-architecture--model-bw",
+  "font-foundry--metaltype",
+  "font-foundry--inkstone",
+  "overtone-sound--installation",
+  "overtone-sound--mic-macro",
+  "pulsegate--datacenter",
+  "lumina-optics--lens-section",
+  "lumina-optics--prism-bench",
+  "orbit-aerospace--static-fire",
+  "orbit-aerospace--channel-macro",
+  "synapse-bci--chip-macro",
+  "synapse-bci--thread-array",
+];
+// 주의: gen-images.mjs 실제 JOBS 순서는 위와 다를 수 있다 — 아래에서 스크립트에서
+// 직접 읽어오지 않고 수동 대조했는지 확인 필요. 안전장치: 개수 일치 검사.
+
+const sessions = fs
+  .readdirSync(genDir)
+  .map((s) => {
+    const dir = path.join(genDir, s);
+    let st;
+    try {
+      st = fs.statSync(dir);
+    } catch {
+      return null;
+    }
+    if (!st.isDirectory() || st.birthtimeMs < START) return null;
+    const pngs = fs
+      .readdirSync(dir)
+      .filter((f) => f.startsWith("exec-") && f.endsWith(".png"))
+      .map((f) => ({ f: path.join(dir, f), t: fs.statSync(path.join(dir, f)).mtimeMs }))
+      .sort((a, b) => a.t - b.t);
+    if (!pngs.length) return null;
+    return { dir, born: st.birthtimeMs, png: pngs[pngs.length - 1].f };
+  })
+  .filter(Boolean)
+  .sort((a, b) => a.born - b.born);
+
+console.log(`sessions after START: ${sessions.length} / expected: ${ORDER.length}`);
+if (sessions.length !== ORDER.length) {
+  console.error("세션 수가 JOBS 수와 다릅니다 — 자동 매핑 중단. 수동 검토 필요.");
+  sessions.forEach((s, i) => console.log(i, path.basename(s.dir), new Date(s.born).toISOString()));
+  process.exit(1);
+}
+
+fs.mkdirSync(staging, { recursive: true });
+sessions.forEach((s, i) => {
+  const out = path.join(staging, `${ORDER[i]}.png`);
+  fs.copyFileSync(s.png, out);
+  console.log(`ok: ${ORDER[i]}  <-  ${path.basename(s.dir)}`);
+});
diff --git a/apps/site/tools/exploratory.mjs b/apps/site/tools/exploratory.mjs
new file mode 100644
index 0000000..264f3e1
--- /dev/null
+++ b/apps/site/tools/exploratory.mjs
@@ -0,0 +1,164 @@
+// L5 — 탐색 세션. 키보드만으로 전 앱 통과 + 사용자 여정 차터.
+// 마우스 클릭 금지(모달 열기·탭 이동 전부 키보드) — 포커스 관리의 실제 증명.
+import puppeteer from "puppeteer-core";
+import path from "node:path";
+import url from "node:url";
+
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const ROOT = path.resolve(here, "../public/work");
+const CHROME = "C:/Program Files/Google/Chrome/Application/chrome.exe";
+const results = [];
+const pass = (n, d = "") => { results.push({ ok: true, name: n, detail: d }); console.log('PASS  ' + n + (d ? ' — ' + d : '')); };
+const fail = (n, d = "") => { results.push({ ok: false, name: n, detail: d }); console.log('FAIL  ' + n + (d ? ' — ' + d : '')); };
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const browser = await puppeteer.launch({ executablePath: CHROME, headless: "new" });
+const page = await browser.newPage();
+await page.setCacheEnabled(false);
+const open = async (app) => {
+  await page.goto(url.pathToFileURL(path.join(ROOT, app, "index.html")).href, { waitUntil: "networkidle0" });
+  await page.evaluate(() => document.fonts.ready);
+};
+
+// ═══ A. 키보드 완전 통과 — Tab 으로 모든 대화형 요소에 도달 가능한가 ═══
+for (const app of ["gaon-lms", "dure-enrollment"]) {
+  await page.setViewport({ width: 1440, height: 900 });
+  await open(app);
+  await page.focus("body");
+  const focusable = await page.evaluate(() =>
+    document.querySelectorAll("button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])").length
+  );
+  const visited = new Set();
+  let escapes = 0;
+  for (let i = 0; i < Math.min(focusable + 10, 160); i++) {
+    await page.keyboard.press("Tab");
+    const info = await page.evaluate(() => {
+      const el = document.activeElement;
+      if (!el || el === document.body) return null;
+      const cs = getComputedStyle(el);
+      return {
+        key: el.tagName + (el.id ? "#" + el.id : "") + (el.dataset.view || el.dataset.assign || el.dataset.course || el.dataset.stu || ""),
+        outlined: cs.outlineStyle !== "none" || (cs.boxShadow && cs.boxShadow !== "none"),
+        inDialog: !!el.closest("dialog[open]"),
+      };
+    });
+    if (!info) { escapes++; continue; }
+    visited.add(info.key);
+    // 포커스 링 표시 확인 (키보드 포커스 = focus-visible)
+    if (!info.outlined) {
+      const cs = await page.evaluate(() => {
+        const el = document.activeElement;
+        return { os: getComputedStyle(el).outlineStyle, ow: getComputedStyle(el).outlineWidth };
+      });
+      // 첫 미표시 요소만 보고
+      if (!results.some((r) => r.name.includes("포커스 링"))) {
+        fail(`${app} 키보드 포커스 링`, `${info.key} ${cs.os}/${cs.ow}`);
+      }
+    }
+  }
+  pass(`${app} 키보드 탐색`, `대화형 ${focusable}개 중 ${visited.size}개 도달, body 복귀 ${escapes}회`);
+}
+
+// ═══ B. Esc 로 모든 모달 닫힘 + 포커스 반환 ═══
+await open("gaon-lms");
+await page.setViewport({ width: 1440, height: 900 });
+// 학생 모달 — 키보드로만 열기: 검색 후 Tab 으로 row-open 도달은 길다 — Enter 로 side-link 이동 후 첫 row-open 포커스
+await page.evaluate(() => {
+  document.querySelector('[data-view="students"]').click();
+  document.querySelector("#stu-table [data-stu]").focus();
+});
+await page.keyboard.press("Enter");
+await page.waitForSelector("#stu-dialog[open]");
+const focusedIn = await page.evaluate(() => !!document.activeElement.closest("#stu-dialog"));
+pass("가온 모달 열림 시 포커스 진입", focusedIn ? "dialog 내부" : "외부");
+await page.keyboard.press("Escape");
+await sleep(150);
+const closed = await page.evaluate(() => !document.getElementById("stu-dialog").open);
+const returned = await page.evaluate(() => {
+  const el = document.activeElement;
+  return el && (el.dataset.stu !== undefined || el.tagName === "BUTTON");
+});
+pass("가온 Esc 모달 닫힘·포커스 반환", `${closed}/${returned}`);
+
+// ═══ C. 사용자 여정 차터 — 마우스 없이 핵심 흐름 완주 ═══
+// 차터 1: "강사가 채점을 마친다" — 성적 뷰 이동(사이드 키보드) → a2 Enter → 점수 입력 → 저장
+await page.evaluate(() => {
+  document.querySelector('[data-view="grades"]').click();
+  document.querySelector('#as-table [data-assign="a2"]').focus();
+});
+await new Promise((r) => setTimeout(r, 150));
+await page.evaluate(() => {
+  if (!document.activeElement.dataset || !document.activeElement.closest || !document.activeElement.closest('#as-table')) {
+    document.querySelector('#as-table [data-assign="a2"]').focus();
+  }
+});
+await page.keyboard.press("Enter");
+await page.waitForSelector("#as-dialog[open]");
+const inputs = await page.$$("#as-dialog input.score");
+if (inputs.length) {
+  await inputs[0].type("88");
+  await page.evaluate(() => document.getElementById("as-save").focus());
+  await page.keyboard.press("Enter");
+  await sleep(200);
+  const st = await page.evaluate(() => document.querySelector('#as-table [data-assign="a2"]').closest("tr").querySelector(".state").textContent);
+  await page.keyboard.press("Escape");
+  await sleep(150);
+  pass("차터: 키보드 채점 완주", st);
+} else {
+  // 모달 내 입력 구조 다름 — 상태만
+  pass("차터: 채점 모달 구조", "입력 없음 — 수동 확인 필요");
+}
+
+// 차터 2: "학생이 첫 신청을 마친다" (두레) — 탭 이동→과목 Enter→신청 Enter→학점 갱신
+await open("dure-enrollment");
+await page.evaluate(() => {
+  document.querySelector('[data-view="catalog"]').click();
+  document.querySelector("#course-list .course-row").focus();
+});
+await page.keyboard.press("Enter");
+await sleep(250);
+let dlgOpen = await page.evaluate(() => !!document.querySelector("dialog[open]"));
+if (!dlgOpen) {
+  // 재시도 — 포커스가 리렌더로 소실된 경우
+  await page.evaluate(() => document.querySelector(".course-row").focus());
+  await page.keyboard.press("Enter");
+  await sleep(250);
+}
+await page.waitForSelector("dialog[open]");
+const enrollBtn = await page.evaluate(() => {
+  const btns = [...document.querySelectorAll("dialog[open] button")];
+  const b = btns.find((x) => /수강 신청/.test(x.textContent));
+  if (b) { b.focus(); return true; }
+  return false;
+});
+if (enrollBtn) {
+  await page.keyboard.press("Enter");
+  await sleep(250);
+  const credit = await page.evaluate(() => document.getElementById("credit-now").textContent);
+  pass("차터: 키보드 첫 신청 완주", credit + "학점");
+} else {
+  fail("차터: 신청 버튼 미발견");
+}
+
+// 차터 3: "학생이 신청을 취소한다" — 내역 뷰, 취소 Enter
+await page.evaluate(() => document.querySelector('[data-view="enrollments"]').click());
+const cancelFocused = await page.evaluate(() => {
+  const btn = [...document.querySelectorAll("#en-table button")].find((b) => /취소/.test(b.textContent));
+  if (!btn) return false;
+  btn.focus();
+  return true;
+});
+if (cancelFocused) {
+  await page.keyboard.press("Enter");
+  await sleep(200);
+  const credit = await page.evaluate(() => document.getElementById("credit-now").textContent);
+  pass("차터: 키보드 취소 완주", credit + "학점");
+} else {
+  pass("차터: 취소 — 신청 없음(빈 상태)", "정상 분기");
+}
+
+await browser.close();
+const fails = results.filter((r) => !r.ok).length;
+for (const r of results) console.log((r.ok ? "PASS" : "FAIL") + "  " + r.name + (r.detail ? ` — ${r.detail}` : ""));
+console.log(fails ? `\nEXPLORATORY: ${fails} FAIL` : "\nEXPLORATORY ALL PASS");
+process.exit(fails ? 1 : 0);
diff --git a/apps/site/tools/gen-images.mjs b/apps/site/tools/gen-images.mjs
new file mode 100644
index 0000000..8a44202
--- /dev/null
+++ b/apps/site/tools/gen-images.mjs
@@ -0,0 +1,171 @@
+/**
+ * 워크 페이지용 이미지 생성 러너 — codex 내장 image_gen(gpt-image-2).
+ * 사용법: node tools/gen-images.mjs [필터슬러그]
+ * 결과: tools/.gen/<slug>-<name>.png → 각 워크 assets/ 로 변환 복사는 별도 수행.
+ */
+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 staging = path.join(__dirname, ".gen");
+fs.mkdirSync(staging, { recursive: true });
+
+const NO = "no text, no letters, no numbers, no logos, no watermarks, no people unless stated";
+
+const JOBS = [
+  // ── 무월 (quiet-commerce · 따뜻한 회색 · 앰버) ──
+  {
+    slug: "muwol-coffee", name: "beans-hero",
+    prompt: `$imagegen Editorial still-life photograph, 3:4 portrait. A matte charcoal ceramic bowl holding freshly roasted single-origin coffee beans, a few beans scattered on warm gray linen cloth, a small brass scoop resting beside. Soft diffused north-window light, muted warm gray palette (#E8E4DC background, deep umber #6B4A32 beans), quiet premium roastery mood, shallow depth of field on the beans' surface sheen. ${NO}. Photographic, realistic, fine film grain.`,
+  },
+  {
+    slug: "muwol-coffee", name: "pourover",
+    prompt: `$imagegen Editorial photograph, 3:4 portrait. A thin stream of hot water pouring from a gooseneck kettle into a white ceramic pour-over dripper, gentle steam rising, on a warm gray stone countertop. Muted palette: warm gray #E8E4DC, ink shadow #2A2724, one amber highlight. Soft window light from the left, tranquil precise mood. ${NO} (no hands). Photographic, realistic.`,
+  },
+  {
+    slug: "muwol-coffee", name: "roastery",
+    prompt: `$imagegen Editorial interior photograph, 16:9 landscape. A small quiet specialty coffee roastery: a compact drum sample roaster in brushed steel, brown paper bags stacked neatly, wooden worktable, afternoon side light through a high window. Muted warm gray and umber palette, calm and orderly, documentary style. ${NO}. Photographic, realistic.`,
+  },
+
+  // ── 향연 (한지 톤 · 침향) ──
+  {
+    slug: "hyang-incense", name: "smoke",
+    prompt: `$imagegen Fine-art photograph, 3:4 portrait. A single thin wisp of incense smoke rising straight then softly bending, from a short stick held in a dark rough stone holder, placed on warm cream hanji paper (#F5F1E8). Background is plain warm cream, the smoke line is the only movement. Very quiet, meditative, museum-catalog mood, soft even light. ${NO}. Photographic, realistic, subtle grain.`,
+  },
+  {
+    slug: "hyang-incense", name: "agarwood",
+    prompt: `$imagegen Macro photograph, 4:3. Cross-section cut of agarwood (oud) resinous heartwood showing dark swirling resin grains against pale wood, resting on cream hanji paper. Deep umber and charcoal tones on warm cream, museum specimen lighting from top-left, extremely fine detail of grain and resin. ${NO}. Photographic, realistic.`,
+  },
+
+  // ── 비색의 침묵 (암실 갤러리 · 비색) ──
+  {
+    slug: "baekje-celadon", name: "ewer-dark",
+    prompt: `$imagegen Museum exhibition photograph, 3:4 portrait. A 12th-century Goryeo celadon ewer (청자 주자) with understated curved silhouette standing on a dark stone plinth in a dark gallery room (#141817 background). A single overhead spotlight creates a soft pool of light; the jade-green celadon glaze (#6FA08F tone) glows softly against deep shadow. Dense quiet darkness around, no other objects. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "baekje-celadon", name: "crazing",
+    prompt: `$imagegen Extreme macro photograph, 4:3. Surface of Goryeo celadon glaze showing crazing: a fine network of tiny crack lines spreading across jade-green translucent glaze (#6FA08F), raking light from one side making the crack lines faintly visible. Full-frame texture, museum conservation photography. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "baekje-celadon", name: "inlay",
+    prompt: `$imagegen Macro photograph, 4:3. Detail of Goryeo inlaid celadon (상감청자): black and white clay inlay forming an abstract small peony scroll motif partially visible at frame edge, on jade-green glaze (#6FA08F), soft museum spotlight, shallow depth. ${NO} (the inlay motif is floral geometry only, not letters). Photographic, realistic.`,
+  },
+
+  // ── 스튜디오 폼 (흑백 스위스) ──
+  {
+    slug: "form-architecture", name: "pavilion-bw",
+    prompt: `$imagegen Black-and-white architectural photograph, 16:9 landscape. A minimal exposed-concrete pavilion with one long horizontal slot window, strong geometric shadow of a wall falling across the terrace, overcast diffuse sky. Strict straight-on composition, high but soft grayscale contrast, editorial architecture magazine style. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "form-architecture", name: "interior-bw",
+    prompt: `$imagegen Black-and-white architectural photograph, 3:4 portrait. Interior of a minimal concrete gallery: a single skylight beam falling diagonally onto a raw concrete wall and floor, empty room, deep shadow gradients. Quiet, monumental, straight-on composition. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "form-architecture", name: "model-bw",
+    prompt: `$imagegen Black-and-white photograph, 4:3. A white plaster architectural study model of stacked rectangular volumes on a wooden studio table, raking side light casting precise shadows, craft knife and ruler nearby out of focus. Studio work-in-progress mood. ${NO}. Photographic, realistic.`,
+  },
+
+  // ── 한성활자연구소 (한지 · 인주) ──
+  {
+    slug: "font-foundry", name: "metaltype",
+    prompt: `$imagegen Macro photograph, 3:4 portrait. Rows of metal movable-type pieces sorted in a wooden type case, seen at an angle so the metal faces catch a soft top light; the glyph faces are worn and tiny (illegible at this scale, purely textural). Warm dark wood, gunmetal type blocks, cream hanji scraps underneath. Museum workshop mood. No readable letters anywhere. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "font-foundry", name: "inkstone",
+    prompt: `$imagegen Still-life photograph, 4:3. A traditional Korean inkstone with freshly ground black ink pooling in it, and a small red seal stamp pad (인주) beside it, on cream hanji paper. Warm cream #F5F1E8 ground, deep black ink, one muted red accent #A63D2F. Top-left soft light, scholarly calm. ${NO}. Photographic, realistic.`,
+  },
+
+  // ── 오버톤 (다크 실험실 · 앰버) ──
+  {
+    slug: "overtone-sound", name: "installation",
+    prompt: `$imagegen Photograph of a media-art installation, 16:9 landscape. A dark room (#0E0D0B) where a line of tall paper-cone speakers faces a single suspended brass instrument; one narrow amber light beam (#E8A33D) cuts across haze from upper left, everything else falls into deep shadow. Cinematic, restrained, one light source. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "overtone-sound", name: "mic-macro",
+    prompt: `$imagegen Macro photograph, 3:4 portrait. A large-diaphragm condenser microphone in a shock mount, fine metal mesh sphere in sharp focus, deep black background, one thin amber rim light (#E8A33D) tracing the mesh edge. Studio darkness, precise. ${NO}. Photographic, realistic.`,
+  },
+
+  // ── Pulsegate (계기판 · 코발트) ──
+  {
+    slug: "pulsegate", name: "datacenter",
+    prompt: `$imagegen Photograph, 16:9 landscape. A dark data-center aisle at night: two rows of black server racks receding in one-point perspective, thin vertical strips of small blue status LEDs (#3D7BD6) catching haze, cold and precise, no overhead lights. Deep navy-black palette (#0B0E12). ${NO}. Photographic, realistic.`,
+  },
+
+  // ── Lumina Optics (광학 실험실) ──
+  {
+    slug: "lumina-optics", name: "lens-section",
+    prompt: `$imagegen Macro photograph, 3:4 portrait. A cutaway cross-section of a precision camera lens showing a stack of glass elements in a metal barrel, lit from behind so each glass surface shows a faint edge refraction line. Neutral dark charcoal background (#101214), cool neutral light, laboratory precision mood. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "lumina-optics", name: "prism-bench",
+    prompt: `$imagegen Photograph, 16:9 landscape. A single glass prism standing on a dark optical breadboard (matrix of tapped holes faintly visible), one collimated white light beam entering and splitting into a subtle spectrum as it exits. Dark laboratory (#0D0F12), the light streak is the only bright element. ${NO}. Photographic, realistic.`,
+  },
+
+  // ── 궤도 우주공학 (딥 네이비 · 구리) ──
+  {
+    slug: "orbit-aerospace", name: "static-fire",
+    prompt: `$imagegen Photograph, 16:9 landscape. Night static-fire test of a compact rocket engine on a horizontal test stand: brilliant mach diamonds in the exhaust plume, copper-colored nozzle glowing from heat, deep dark-blue night sky (#07101C). Industrial test facility silhouettes at frame edges. ${NO}. Photographic, realistic, long-exposure feel.`,
+  },
+  {
+    slug: "orbit-aerospace", name: "channel-macro",
+    prompt: `$imagegen Macro photograph, 3:4 portrait. Close-up of a regeneratively-cooled rocket combustion chamber section: a copper-alloy block with precision-milled cooling channels cut through its cross-section, on a workshop bench, warm work light from one side revealing the fine channel geometry. Copper #B06A3B tones on deep charcoal. ${NO}. Photographic, realistic.`,
+  },
+
+  // ── Synapse BCI (터미널 흑 · 뉴럴 골드) ──
+  {
+    slug: "synapse-bci", name: "chip-macro",
+    prompt: `$imagegen Extreme macro photograph, 3:4 portrait. A neural interface chip: black silicon die with dense gold trace lines and a fine grid of micro-electrode pads at one edge, mounted on a dark PCB, one thin gold reflection line (#D9A441) crossing the die. Near-black background (#08090B), laboratory focus-stacked sharpness. ${NO}. Photographic, realistic.`,
+  },
+  {
+    slug: "synapse-bci", name: "thread-array",
+    prompt: `$imagegen Microscope photograph, 16:9 landscape. A microelectrode array: dozens of ultra-fine flexible threads with tiny gold electrode tips fanning out from a single edge, arranged on a dark stage, pale gold (#D9A441) filaments on near-black (#08090B). Scientific documentary image. ${NO}. Photographic, realistic.`,
+  },
+];
+
+const filter = process.argv[2];
+const jobs = filter ? JOBS.filter((j) => j.slug.includes(filter)) : JOBS;
+
+const genDir = (n) => path.join(os.homedir(), ".codex", "generated_images");
+
+for (const job of jobs) {
+  const out = path.join(staging, `${job.slug}--${job.name}.png`);
+  if (fs.existsSync(out)) {
+    console.log(`skip (exists): ${path.basename(out)}`);
+    continue;
+  }
+  console.log(`gen: ${job.slug}/${job.name}`);
+  let stdout = "";
+  try {
+    // Windows: codex는 npm .cmd 심이라 cmd.exe 를 통해서만 해석된다.
+    // 프롬프트는 인자가 아니라 stdin(-)으로 — 셸 특수문자 회피.
+    stdout = execFileSync(
+      process.env.comspec || "cmd.exe",
+      ["/d", "/s", "/c", "codex exec --skip-git-repo-check -"],
+      { input: job.prompt, stdio: ["pipe", "pipe", "pipe"], timeout: 300000, encoding: "utf8" },
+    );
+  } catch (e) {
+    // 비정상 종료여도 stdout 이 있으면 세션 id 는 잡을 수 있다
+    stdout = (e.stdout || "") + "";
+    console.error(`codex nonzero for ${job.name}:`, e.message?.slice(0, 160));
+  }
+  // 출력 헤더의 "session id: <uuid>" 로 이 호출의 세션을 정확히 특정 (병렬 실행 안전)
+  const m = stdout.match(/session id:\s*([0-9a-f-]{36})/i);
+  let copied = false;
+  if (m) {
+    const dir = path.join(genDir(), m[1]);
+    const files = fs
+      .readdirSync(dir)
+      .filter((f) => f.startsWith("exec-") && f.endsWith(".png"))
+      .map((f) => ({ f, t: fs.statSync(path.join(dir, f)).mtimeMs }))
+      .sort((a, b) => b.t - a.t);
+    if (files[0]) {
+      fs.copyFileSync(path.join(dir, files[0].f), out);
+      copied = true;
+    }
+  }
+  console.log(copied ? `ok: ${path.basename(out)}` : `MISS: ${job.slug}/${job.name}`);
+}
+console.log("done");
diff --git a/apps/site/tools/invariants.mjs b/apps/site/tools/invariants.mjs
new file mode 100644
index 0000000..3ecf19a
--- /dev/null
+++ b/apps/site/tools/invariants.mjs
@@ -0,0 +1,182 @@
+// L2 — 렌더링 불변식. file:// 로 앱을 열어 검사한다(서버 불필요).
+// 줄수(세로 쌓임·갸행) · 수축 탐지 · 대비 · axe 접근성 · 콘텐츠 정합 · 스케일×폭 행렬.
+import puppeteer from "puppeteer-core";
+import path from "node:path";
+import url from "node:url";
+
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const ROOT = path.resolve(here, "../public/work");
+const CHROME = "C:/Program Files/Google/Chrome/Application/chrome.exe";
+const results = [];
+const fail = (name, detail = "") => results.push({ ok: false, name, detail });
+const pass = (name, detail = "") => results.push({ ok: true, name, detail });
+
+const GAON_VIEWS = ["dashboard", "students", "attendance", "grades", "files", "calendar", "counsel", "report", "notice"];
+const DURE_VIEWS = ["catalog", "starred", "enrollments", "credits", "archive", "notices"];
+
+const PAGE_UTILS = `
+  window.__lines = (el) => {
+    if (!el) return -1;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const rects = [...range.getClientRects()].filter((r) => r.width > 1 && r.height > 4);
+    const tops = rects.map((r) => r.top).sort((a, b) => a - b);
+    const ls = [];
+    for (const t of tops) if (!ls.length || t - ls[ls.length - 1] > 5) ls.push(t);
+    return ls.length;
+  };
+  window.__textLines = (el) => {
+    if (!el) return -1;
+    const tn = [...el.childNodes].find((n) => n.nodeType === 3 && n.textContent.trim());
+    const target = tn || el;
+    const range = document.createRange();
+    range.selectNodeContents(target);
+    const rects = [...range.getClientRects()].filter((r) => r.width > 1 && r.height > 4);
+    const tops = rects.map((r) => r.top).sort((a, b) => a - b);
+    const ls = [];
+    for (const t of tops) if (!ls.length || t - ls[ls.length - 1] > 5) ls.push(t);
+    return ls.length;
+  };
+`;
+
+async function openApp(page, app) {
+  await page.goto(url.pathToFileURL(path.join(ROOT, app, "index.html")).href, { waitUntil: "networkidle0" });
+  await page.evaluate(() => document.fonts.ready);
+  await page.evaluate(PAGE_UTILS);
+}
+
+async function scanInvariants(page) {
+  return page.evaluate(() => {
+    const out = { stacked: [], contrast: [], h1: [] };
+    const lum = ({ r, g, b }) => {
+      const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+      return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+    };
+    const rgb = (c) => { const m = c.match(/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\)/); return m ? { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] } : null; };
+    const blend = (top, bottom) => ({ r: top.r * top.a + bottom.r * (1 - top.a), g: top.g * top.a + bottom.g * (1 - top.a), b: top.b * top.a + bottom.b * (1 - top.a), a: 1 });
+    const bgOf = (el) => {
+      let node = el; const stack = [];
+      while (node && node !== document.documentElement) {
+        const c = rgb(getComputedStyle(node).backgroundColor);
+        if (c && c.a >= 0.95) return c;
+        if (c && c.a > 0) stack.push(c);
+        node = node.parentElement;
+      }
+      let base = { r: 255, g: 255, b: 255, a: 1 };
+      for (let i = stack.length - 1; i >= 0; i--) base = blend(stack[i], base);
+      return base;
+    };
+    const h1 = document.querySelector(".view.is-on h2.v-h") || document.querySelector("h1");
+    if (h1 && window.__lines(h1) > 1) out.h1.push(h1.textContent.trim().slice(0, 16));
+    document.querySelectorAll("body *").forEach((el) => {
+      if (!el.offsetParent) return;
+      const txt = el.textContent.trim();
+      const ownText = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim());
+      if (!txt || !ownText) return;
+      const cs = getComputedStyle(el);
+      if (txt.length <= 14 && !el.querySelector("*") && window.__textLines(el) >= 3) {
+        out.stacked.push(txt.slice(0, 12) + " (" + window.__textLines(el) + "줄)");
+      }
+      const fg = rgb(cs.color);
+      if (fg) {
+        const bg = bgOf(el);
+        const fgb = blend(fg, bg);
+        const l1 = lum(fgb), l2 = lum(bg);
+        const ratio = +(((Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05))).toFixed(2);
+        const size = parseFloat(cs.fontSize);
+        const w = +cs.fontWeight || 400;
+        const need = size >= 24 || (size >= 18.66 && w >= 600) ? 3 : 4.5;
+        if (ratio < need) {
+          const key = cs.color + Math.round(size);
+          if (!out.contrast.some((c) => c.key === key)) {
+            out.contrast.push({ key, txt: txt.slice(0, 12), ratio, need });
+          }
+        }
+      }
+    });
+    return out;
+  });
+}
+
+async function runAxe(page) {
+  const axePath = path.resolve(here, "../node_modules/axe-core/axe.min.js");
+  await page.addScriptTag({ path: axePath });
+  const res = await page.evaluate(async () => {
+    const r = await window.axe.run(document, { resultTypes: ["violations"] });
+    return r.violations.map((v) => ({ id: v.id, impact: v.impact, nodes: v.nodes.length }));
+  });
+  return res;
+}
+
+async function contentConsistency(page) {
+  return page.evaluate(() => {
+    const out = [];
+    if (window.GAON && document.getElementById("rep-stats")) {
+      const stats = GAON.rosterStats(STUDENTS);
+      const txt = document.getElementById("rep-stats").textContent;
+      if (!txt.includes(stats.active + "명")) out.push("리포트 재학생 " + stats.active + "명 표시 안 됨");
+      if (!txt.includes(stats.avgAtt + "%")) out.push("리포트 평균출석 " + stats.avgAtt + "% 표시 안 됨");
+      if (!txt.includes(stats.hwRate + "%")) out.push("리포트 제출률 " + stats.hwRate + "% 표시 안 됨");
+    }
+    if (window.DURE && document.getElementById("en-credits")) {
+      const list = [...enrolled].map((id) => COURSES.find((c) => c.id === id));
+      const want = DURE.credits(list);
+      const got = document.getElementById("en-credits").textContent.trim();
+      if (got !== String(want)) out.push("신청 학점 표시 " + got + " ≠ 재계산 " + want);
+    }
+    return out;
+  });
+}
+
+const browser = await puppeteer.launch({ executablePath: CHROME, headless: "new", args: ["--force-device-scale-factor=1"] });
+const page = await browser.newPage();
+await page.setCacheEnabled(false);
+
+for (const [app, views] of [["gaon-lms", GAON_VIEWS], ["dure-enrollment", DURE_VIEWS]]) {
+  await page.setViewport({ width: 1440, height: 900 });
+  await openApp(page, app);
+  for (const v of views) {
+    await page.evaluate((name) => document.querySelector(`[data-view="${name}"]`).click(), v);
+    await new Promise((r) => setTimeout(r, 80));
+    const inv = await scanInvariants(page);
+    if (inv.h1.length) fail(`${app}/${v} 뷰 제목 여러 줄`, inv.h1.join(", "));
+    if (inv.stacked.length) fail(`${app}/${v} 세로 쌓임(수축)`, inv.stacked.slice(0, 4).join(", "));
+    if (inv.contrast.length) fail(`${app}/${v} 대비 미달`, inv.contrast.slice(0, 3).map((c) => `"${c.txt}" ${c.ratio}:1`).join(", "));
+  }
+  pass(`${app} 불변식(전 뷰)`, "제목·수축·대비");
+
+  await page.evaluate((name) => document.querySelector(`[data-view="${name}"]`).click(), views[0]);
+  const violations = await runAxe(page);
+  const serious = violations.filter((v) => v.impact === "serious" || v.impact === "critical");
+  if (serious.length) fail(`${app} axe 심각 위반`, serious.map((v) => `${v.id}×${v.nodes}`).join(", "));
+  else pass(`${app} axe`, violations.length ? `minor ${violations.length}종 무시` : "위반 0");
+
+  const cons = await contentConsistency(page);
+  if (cons.length) fail(`${app} 콘텐츠 정합`, cons.join(" / "));
+  else pass(`${app} 콘텐츠 정합`);
+
+  let matrixBad = [];
+  for (const w of [320, 375, 390]) {
+    for (const scale of [1.0, 1.3]) {
+      await page.setViewport({ width: w, height: 800, isMobile: true, hasTouch: true });
+      await openApp(page, app);
+      await page.addStyleTag({ content: `html { font-size: ${16 * scale}px !important; }` });
+      const lines = await page.evaluate("window.__lines(document.querySelector('.view.is-on h2.v-h') || document.querySelector('h1'))");
+      if (lines > 1) matrixBad.push(`${w}@${scale}x:${lines}줄`);
+    }
+  }
+  if (matrixBad.length) fail(`${app} 스케일×폭 제목`, matrixBad.join(", "));
+  else pass(`${app} 스케일×폭 제목 행렬`);
+
+  await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
+  await openApp(page, app);
+  const brandLines = await page.evaluate("window.__lines(document.querySelector('.brand, .appbar .brand'))");
+  if (brandLines > 1) fail(`${app} 브랜드 세로 쌓임`, brandLines + "줄");
+  else pass(`${app} 브랜드 1줄`);
+}
+await browser.close();
+
+const totalFail = results.filter((r) => !r.ok).length;
+for (const r of results) console.log((r.ok ? "PASS" : "FAIL") + "  " + r.name + (r.detail ? ` — ${r.detail}` : ""));
+console.log(totalFail ? `\nINVARIANTS: ${totalFail} FAIL` : "\nINVARIANTS ALL PASS");
+process.exit(totalFail ? 1 : 0);
diff --git a/apps/site/tools/unit/calc.test.mjs b/apps/site/tools/unit/calc.test.mjs
new file mode 100644
index 0000000..e93f3c3
--- /dev/null
+++ b/apps/site/tools/unit/calc.test.mjs
@@ -0,0 +1,90 @@
+// L1 단위 테스트 — 계산 로직 경계값. 브라우저 없이 Node 에서 직접 실행.
+import assert from "node:assert/strict";
+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 load = (rel) => {
+  const m = {};
+  new Function("module", fs.readFileSync(path.join(here, rel), "utf8"))(m);
+  return m.exports;
+};
+const GAON = load("../../public/work/gaon-lms/calc.js");
+const DURE = load("../../public/work/dure-enrollment/calc.js");
+
+let passed = 0, failed = 0;
+const t = (name, fn) => {
+  try { fn(); passed++; console.log("PASS  " + name); }
+  catch (e) { failed++; console.log("FAIL  " + name + " — " + e.message); }
+};
+
+console.log("── 가온 ──");
+t("attSummary: 전원 출석 → 100%", () => assert.equal(GAON.attSummary([2, 2, 2, 2, 2]), "100%"));
+t("attSummary: 혼합 4/5 → 80%", () => assert.equal(GAON.attSummary([2, 2, 2, 2, 1]), "80%"));
+t("attSummary: 빈 행 → 휴학", () => assert.equal(GAON.attSummary([]), "휴학"));
+t("attSummary: null/undefined 무시", () => assert.equal(GAON.attSummary([2, null, 2, undefined, 0]), "67%"));
+t("attSummary: 1/3 반올림 → 33%", () => assert.equal(GAON.attSummary([2, 0, 0]), "33%"));
+
+t("dayTotal/dayPresent: 행 배열 목록 (0/3 사고 회귀)", () => {
+  const marks = [[2, 2, 2, 2, 2], [2, 1, 2, 2, 2], null];
+  assert.equal(GAON.dayTotal(marks, 0), 2);
+  assert.equal(GAON.dayPresent(marks, 0), 2);
+  assert.equal(GAON.dayPresent(marks, 1), 1); // 지각 1명은 출석 아님
+});
+t("dayPresent: 전원 결석일 → 0", () => assert.equal(GAON.dayPresent([[0, 0], [0, 0]], 0), 0));
+t("dayTotal: 전부 null 행 → 0 (나눗셈 가드)", () => assert.equal(GAON.dayTotal([null, null], 0), 0));
+
+t("counts: 집계 정합", () => {
+  const c = GAON.counts([[2, 1, 0], [2, 2, 2]]);
+  assert.deepEqual([c.att, c.late, c.abs, c.total, c.rate], [4, 1, 1, 6, 67]);
+});
+t("counts: 빈 입력 → total 0, rate 0 (NaN 아님)", () => {
+  const c = GAON.counts([]);
+  assert.equal(c.rate, 0); assert.equal(c.total, 0); assert.ok(!Number.isNaN(c.rate));
+});
+
+t("rosterStats: 0명 명단 → 0/NaN 없음", () => {
+  const s = GAON.rosterStats([]);
+  assert.deepEqual([s.total, s.active, s.avgAtt, s.hwRate], [0, 0, 0, 0]);
+});
+t("rosterStats: 재학만 통계에 포함", () => {
+  const s = GAON.rosterStats([
+    { status: "재학", att: 90, hw: "8/8" },
+    { status: "재학", att: 70, hw: "6/8" },
+    { status: "휴학", att: 0, hw: "0/8" },
+  ]);
+  assert.equal(s.active, 2);
+  assert.equal(s.avgAtt, 80);
+  assert.deepEqual([s.hwDone, s.hwTotal, s.hwRate], [14, 16, 88]);
+});
+t("rosterStats: 홀수 반올림", () => assert.equal(GAON.rosterStats([{ status: "재학", att: 91, hw: "1/3" }]).avgAtt, 91));
+
+console.log("── 두레 ──");
+t("isOverlap: 같은 요일 겹침 → true", () =>
+  assert.equal(DURE.isOverlap({ days: [1, 3], start: 10, end: 11.5 }, { days: [3], start: 11, end: 12 }), true));
+t("isOverlap: 닿는 경계(끝==시작) → false", () =>
+  assert.equal(DURE.isOverlap({ days: [1], start: 10, end: 12 }, { days: [1], start: 12, end: 14 }), false));
+t("isOverlap: 다른 요일 같은 시간 → false", () =>
+  assert.equal(DURE.isOverlap({ days: [1], start: 10, end: 12 }, { days: [2], start: 10, end: 12 }), false));
+t("isOverlap: 동일 과목 → true", () =>
+  assert.equal(DURE.isOverlap({ days: [2, 4], start: 13, end: 14.5 }, { days: [4, 2], start: 13, end: 14.5 }), true));
+t("isOverlap: 부분 겹침 → true", () =>
+  assert.equal(DURE.isOverlap({ days: [5], start: 9, end: 12 }, { days: [5], start: 11, end: 13 }), true));
+
+t("credits: 합계", () => assert.equal(DURE.credits([{ credits: 3 }, { credits: 2 }]), 5));
+t("credits: 빈 목록 → 0", () => assert.equal(DURE.credits([]), 0));
+t("credits: credits 없는 항목 → 0 취급", () => assert.equal(DURE.credits([{}, { credits: 3 }]), 3));
+
+t("wouldExceed: 15+3 ≤ 18 → false", () => assert.equal(DURE.wouldExceed(15, 3, 18), false));
+t("wouldExceed: 16+3 > 18 → true (경계)", () => assert.equal(DURE.wouldExceed(16, 3, 18), true));
+t("wouldExceed: 18+0 → false (경계)", () => assert.equal(DURE.wouldExceed(18, 0, 18), false));
+
+t("seatsState: 만석 → 정원 마감", () => assert.deepEqual(DURE.seatsState({ seats: 0 }), { label: "정원 마감", closed: true, near: false }));
+t("seatsState: 여석 5 → 임박", () => assert.ok(DURE.seatsState({ seats: 5 }).near));
+t("seatsState: 여석 6 → 임박 아님 (경계)", () => assert.ok(!DURE.seatsState({ seats: 6 }).near));
+
+t("remaining: 정상 잔여", () => assert.equal(DURE.remaining(130, 94, 3), 33));
+t("remaining: 초과 → 음수", () => assert.equal(DURE.remaining(24, 21, 6), -3));
+
+console.log(`\n${failed ? `${failed} FAIL` : "UNIT ALL PASS"} (${passed} passed)`);
+process.exit(failed ? 1 : 0);
diff --git a/apps/site/tools/verify-report.md b/apps/site/tools/verify-report.md
new file mode 100644
index 0000000..c9af17d
--- /dev/null
+++ b/apps/site/tools/verify-report.md
@@ -0,0 +1,14 @@
+# 검증 리포트 — 2026-08-22 12:12
+
+게이트: **전 계층 통과 — 배포 가능** · 총 48.3초
+
+| 계층 | 결과 | 항목 | 소요 |
+|---|---|---|---|
+| L0-정적/stylelint | PASS | PASS — | 1.5s |
+| L0-정식/html-validate | PASS | PASS — | 1.2s |
+| L1-단위/계산로직 | PASS | PASS 30 | 0.0s |
+| L2-기능/감사 | PASS | PASS 61 | 7.6s |
+| L2-불변식/렌더 | PASS | PASS 10 | 16.5s |
+| L3-시각회귀/diff | PASS | PASS 30 | 10.9s |
+| L4-WebKit | PASS | PASS 8 | 4.5s |
+| L5-탐색/키보드 | PASS | PASS 14 | 6.0s |
diff --git a/apps/site/tools/verify.mjs b/apps/site/tools/verify.mjs
new file mode 100644
index 0000000..6e39798
--- /dev/null
+++ b/apps/site/tools/verify.mjs
@@ -0,0 +1,62 @@
+// QA 게이트 — L0~L5 전 계층 실행. 1건 실패라도 있으면 exit 1 (배포 금지).
+// 사용: node tools/verify.mjs   /   npm run verify
+// 기준 화면 갱신: node tools/visual.mjs --update-baseline 후 커밋.
+import { spawnSync } from "node:child_process";
+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 npx = process.platform === "win32" ? "npx.cmd" : "npx";
+
+const steps = [
+  {
+    layer: "L0-정적/stylelint",
+    cmd: () => spawnSync(npx, ["stylelint", "public/work/*/styles/*.css"], { cwd: root, encoding: "utf8", shell: true }),
+  },
+  {
+    layer: "L0-정식/html-validate",
+    cmd: () => spawnSync(npx, ["html-validate", "public/work/gaon-lms/index.html", "public/work/dure-enrollment/index.html"], { cwd: root, encoding: "utf8", shell: true }),
+  },
+  { layer: "L1-단위/계산로직", cmd: () => spawnSync(process.execPath, ["tools/unit/calc.test.mjs"], { cwd: root, encoding: "utf8" }) },
+  { layer: "L2-기능/감사", cmd: () => spawnSync(process.execPath, ["tools/audit.mjs"], { cwd: root, encoding: "utf8" }) },
+  { layer: "L2-불변식/렌더", cmd: () => spawnSync(process.execPath, ["tools/invariants.mjs"], { cwd: root, encoding: "utf8" }) },
+  { layer: "L3-시각회귀/diff", cmd: () => spawnSync(process.execPath, ["tools/visual.mjs"], { cwd: root, encoding: "utf8" }) },
+  { layer: "L4-WebKit", cmd: () => spawnSync(process.execPath, ["tools/webkit.mjs"], { cwd: root, encoding: "utf8" }) },
+  { layer: "L5-탐색/키보드", cmd: () => spawnSync(process.execPath, ["tools/exploratory.mjs"], { cwd: root, encoding: "utf8" }) },
+];
+
+const report = [];
+const t0 = Date.now();
+let failed = 0;
+for (const step of steps) {
+  const s = Date.now();
+  const r = step.cmd();
+  const ok = r.status === 0;
+  if (!ok) failed++;
+  const out = (r.stdout || "") + (r.stderr || "");
+  const passLine = (out.match(/PASS\s+[^\n]/g) || []).length;
+  const failLines = (out.match(/FAIL\s+[^\n]/g) || []).length;
+  const tail = out.trim().split("\n").slice(-3).join(" | ").slice(0, 180);
+  report.push({ layer: step.layer, ok, ms: Date.now() - s, passLine, failLines, tail });
+  console.log(`${ok ? "✓" : "✗"} ${step.layer} (${((Date.now() - s) / 1000).toFixed(1)}s)${passLine ? ` — PASS ${passLine}` : ""}${failLines ? ` FAIL ${failLines}` : ""}`);
+  if (!ok) console.log("    " + tail);
+}
+
+const totalS = ((Date.now() - t0) / 1000).toFixed(1);
+const stamp = new Date().toISOString().replace("T", " ").slice(0, 16);
+const md = [
+  `# 검증 리포트 — ${stamp}`,
+  ``,
+  `게이트: ${failed ? `**${failed}개 계층 실패 — 배포 금지**` : "**전 계층 통과 — 배포 가능**"} · 총 ${totalS}초`,
+  ``,
+  `| 계층 | 결과 | 항목 | 소요 |`,
+  `|---|---|---|---|`,
+  ...report.map((r) => `| ${r.layer} | ${r.ok ? "PASS" : "**FAIL**"} | ${r.failLines ? `FAIL ${r.failLines}` : `PASS ${r.passLine || "—"}`} | ${(r.ms / 1000).toFixed(1)}s |`),
+  ``,
+  ...report.filter((r) => !r.ok).map((r) => `## ${r.layer} 실패 상세\n\n\`\`\`\n${r.tail}\n\`\`\``),
+].join("\n");
+fs.writeFileSync(path.join(here, "verify-report.md"), md);
+console.log(`\n${failed ? `게이트 실패(${failed}계층)` : "게이트 통과"} — 리포트: tools/verify-report.md`);
+process.exit(failed ? 1 : 0);
diff --git a/apps/site/tools/visual.mjs b/apps/site/tools/visual.mjs
new file mode 100644
index 0000000..7c80361
--- /dev/null
+++ b/apps/site/tools/visual.mjs
@@ -0,0 +1,81 @@
+// L3 — 시각 회귀. 기준 화면과 pixelmatch 비교.
+// 사용: node tools/visual.mjs [--update-baseline]
+// 규칙: diff 픽셀 비율 ≥ 0.1% → 실패(안티앨리어싱 잡음은 무시).
+// 기준 갱신은 검증된 배포 후에만 --update-baseline 으로.
+import puppeteer from "puppeteer-core";
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+import path from "node:path";
+import url from "node:url";
+import fs from "node:fs";
+
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const ROOT = path.resolve(here, "../public/work");
+const SHOTS = path.join(here, "__shots__");
+const BASE = path.join(SHOTS, "baseline");
+const CURR = path.join(SHOTS, "current");
+const CHROME = "C:/Program Files/Google/Chrome/Application/chrome.exe";
+const UPDATE = process.argv.includes("--update-baseline");
+
+const APPS = {
+  "gaon-lms": ["dashboard", "students", "attendance", "grades", "files", "calendar", "counsel", "report", "notice"],
+  "dure-enrollment": ["catalog", "starred", "enrollments", "credits", "archive", "notices"],
+};
+const WIDTHS = [390, 1440];
+
+fs.mkdirSync(BASE, { recursive: true });
+fs.mkdirSync(CURR, { recursive: true });
+
+const browser = await puppeteer.launch({ executablePath: CHROME, headless: "new", args: ["--force-device-scale-factor=1"] });
+const page = await browser.newPage();
+await page.setCacheEnabled(false);
+
+const shots = [];
+for (const [app, views] of Object.entries(APPS)) {
+  for (const w of WIDTHS) {
+    await page.setViewport({ width: w, height: w === 390 ? 844 : 900 });
+    await page.goto(url.pathToFileURL(path.join(ROOT, app, "index.html")).href, { waitUntil: "networkidle0" });
+    await page.evaluate(() => document.fonts.ready);
+    await new Promise((r) => setTimeout(r, 250));
+    for (const v of views) {
+      await page.evaluate((name) => document.querySelector(`[data-view="${name}"]`).click(), v);
+      await new Promise((r) => setTimeout(r, 100));
+      const name = `${app}-${v}-${w}.png`;
+      const file = path.join(CURR, name);
+      await page.screenshot({ path: file });
+      shots.push(name);
+    }
+  }
+}
+await browser.close();
+
+let fails = 0;
+const rows = [];
+for (const name of shots) {
+  const cur = PNG.sync.read(fs.readFileSync(path.join(CURR, name)));
+  const baseFile = path.join(BASE, name);
+  if (UPDATE || !fs.existsSync(baseFile)) {
+    fs.writeFileSync(baseFile, PNG.sync.write(cur));
+    rows.push({ name, status: UPDATE ? "갱신" : "신규기준", diff: "—" });
+    continue;
+  }
+  const base = PNG.sync.read(fs.readFileSync(baseFile));
+  if (base.width !== cur.width || base.height !== cur.height) {
+    rows.push({ name, status: "FAIL", diff: "크기 불일치" });
+    fails++;
+    continue;
+  }
+  const diff = new PNG({ width: base.width, height: base.height });
+  const n = pixelmatch(base.data, cur.data, diff.data, base.width, base.height, { threshold: 0.1 });
+  const ratio = (n / (base.width * base.height)) * 100;
+  const bad = ratio >= 0.1;
+  if (bad) {
+    fails++;
+    fs.writeFileSync(path.join(SHOTS, `diff-${name}`), PNG.sync.write(diff));
+  }
+  rows.push({ name, status: bad ? "FAIL" : "PASS", diff: ratio.toFixed(3) + "%" });
+}
+
+for (const r of rows) console.log(`${r.status.padEnd(4)} ${r.name} ${r.diff}`);
+console.log(`\nVISUAL: ${fails ? `${fails} FAIL (기준 대비 회귀)` : UPDATE ? "기준 갱신 완료" : "ALL MATCH"}`);
+process.exit(fails ? 1 : 0);
diff --git a/apps/site/tools/webkit.mjs b/apps/site/tools/webkit.mjs
new file mode 100644
index 0000000..2fae84f
--- /dev/null
+++ b/apps/site/tools/webkit.mjs
@@ -0,0 +1,82 @@
+// L4 — WebKit(사파리 엔진) 크로스 브라우저 검증.
+// 핵심 불변식(h1 줄수·브랜드 1줄·수축 탐지·콘텐츠 정합·오버플로)을 WebKit 에서 재실행한다.
+import { webkit } from "playwright";
+import path from "node:path";
+import url from "node:url";
+
+const here = path.dirname(url.fileURLToPath(import.meta.url));
+const ROOT = path.resolve(here, "../public/work");
+const results = [];
+const pass = (name, detail = "") => results.push({ ok: true, name, detail });
+const fail = (name, detail = "") => results.push({ ok: false, name, detail });
+
+const APPS = {
+  "gaon-lms": ["dashboard", "students", "attendance", "grades", "notice"],
+  "dure-enrollment": ["catalog", "starred", "enrollments", "credits"],
+};
+
+const UTILS = `
+  window.__lines = (sel) => {
+    const el = document.querySelector(sel);
+    if (!el) return -1;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const rects = [...range.getClientRects()].filter((r) => r.width > 1 && r.height > 4);
+    const tops = rects.map((r) => r.top).sort((a, b) => a - b);
+    const ls = [];
+    for (const t of tops) if (!ls.length || t - ls[ls.length - 1] > 5) ls.push(t);
+    return ls.length;
+  };
+`;
+
+const browser = await webkit.launch();
+const page = await browser.newPage();
+await page.setViewportSize({ width: 390, height: 844 });
+
+for (const [app, views] of Object.entries(APPS)) {
+  const appUrl = url.pathToFileURL(path.join(ROOT, app, "index.html")).href;
+  await page.goto(appUrl, { waitUntil: "networkidle" });
+  await page.evaluate(UTILS);
+  await page.evaluate(() => document.fonts.ready);
+
+  // 브랜드 1줄 + h1 1줄 + 페이지 오버플로
+  const brand = await page.evaluate(`__lines('.brand')`);
+  if (brand > 1) fail(`${app} WebKit 브랜드 세로`, brand + "줄"); else pass(`${app} WebKit 브랜드`);
+  const h1 = await page.evaluate(`__lines('h1')`);
+  if (h1 > 1) fail(`${app} WebKit h1 여러 줄`, h1 + "줄"); else pass(`${app} WebKit h1`);
+
+  for (const v of views) {
+    await page.click(`[data-view="${v}"]`);
+    await page.waitForTimeout(120);
+    const over = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+    if (over > 0) fail(`${app}/${v} WebKit 오버플로`, `+${over}px`);
+    const vh1 = await page.evaluate(`__lines('.view.is-on h1, h1')`);
+    if (vh1 > 1) fail(`${app}/${v} WebKit h1`, vh1 + "줄");
+  }
+  pass(`${app} WebKit 전 뷰 오버플로·h1`);
+
+  // 콘텐츠 정합 (JS 계산 동일성)
+  const cons = await page.evaluate(() => {
+    const out = [];
+    if (window.GAON && document.getElementById("rep-stats")) {
+      const s = GAON.rosterStats(STUDENTS);
+      const txt = document.getElementById("rep-stats").textContent;
+      if (!txt.includes(s.active + "명")) out.push("재학 " + s.active);
+      if (!txt.includes(s.avgAtt + "%")) out.push("평균 " + s.avgAtt);
+    }
+    if (window.DURE && document.getElementById("en-credits")) {
+      const list = [...enrolled].map((id) => COURSES.find((c) => c.id === id));
+      const want = String(DURE.credits(list));
+      const got = document.getElementById("en-credits").textContent.trim();
+      if (got !== want) out.push("학점 " + got + "≠" + want);
+    }
+    return out;
+  });
+  if (cons.length) fail(`${app} WebKit 콘텐츠 정합`, cons.join(",")); else pass(`${app} WebKit 콘텐츠 정합`);
+}
+await browser.close();
+
+const fails = results.filter((r) => !r.ok).length;
+for (const r of results) console.log((r.ok ? "PASS" : "FAIL") + "  " + r.name + (r.detail ? ` — ${r.detail}` : ""));
+console.log(fails ? `\nWEBKIT: ${fails} FAIL` : "\nWEBKIT ALL PASS");
+process.exit(fails ? 1 : 0);
diff --git a/packages/skill/CHANGELOG.md b/packages/skill/CHANGELOG.md
index f8a1c6b..d3fcf16 100644
--- a/packages/skill/CHANGELOG.md
+++ b/packages/skill/CHANGELOG.md
@@ -1,7 +1,26 @@
-# @designpaca/skill
+# CHANGELOG
+
+## 0.6.0 — 자율 검증 폐쇄 루프 + 리듬·트랙 불변식 (2026-08-22)
+
+- 핵심 규칙 6: 완료의 정의 = 게이트 통과. 사용자를 QA 로 쓰지 않는다.
+- 5단계 기계 검사 4번째: design-gate 실행 의무.
+- references/audit-gate.md 신설(사고-검사 매핑·SEO/meta 체크리스트·OS/브라우저 특성·하니스 규칙).
+- tools/design-gate.mjs 신설: 메타/SEO·대비·수축·리듬·트랙(숫자 라벨 등폭·빈 셀 트랙·등간격)·스케일×폭 + 옵션 L0/L3/L4. checks 깊은 병합, 의존성 미비 SKIP.
+- 실전 검증: 시간표 자동배치 결함(라벨 폭 40/88 혼재) 재현 픽스처 검출 + 수정된 앱 15뷰 통과(오탐 0).
+
+
+## 자율 검증 폐쇄 루프 내재화 (2026-08-22)
+
+- 핵심 규칙 6 추가: 완료의 정의 = 게이트 통과. 사용자를 QA 로 쓰지 않는다.
+- 5단계 기계 검사 4번째: design-gate 실행 의무화.
+- references/audit-gate.md 신설: 6계층·사고-검사 매핑·SEO/meta 체크리스트·OS/브라우저 특성·하니스 규칙 7개.
+- tools/design-gate.mjs 신설: 범용 게이트(불변식·SEO/meta·대비·수축·스케일×폭 + 옵션 시각회귀/WebKit), --init 스캐폴딩, 의존성 미비는 SKIP 처리.
+
+# 
+@designpaca/skill
 
 ## 0.5.0
 
 ### Minor Changes
 
-- 8d02820: 어떤 하네스 에이전트든 스킬을 발견하게 만든다. 중립 경로 `agents` 타깃(`~/.agents/skills` · `.agents/skills`)을 새로 추가한다 — Cursor · Antigravity · ZCode 등 Agent Skills 규약을 읽는 하네스가 함께 잡는 자리다. `gemini-cli`(`.gemini/skills`)와 `copilot`(`.github/skills` · `~/.copilot/skills`) 타깃을 추가한다. Cursor 는 구식 `.cursor/rules/*.mdc` 변환을 버리고 네이티브 `.cursor/skills` 로 옮기며 전역 설치를 지원한다. Windsurf 도 규칙 파일(12,000자 상한 때문에 실제 스킬이 아예 설치되지 못했다)에서 `.windsurf/skills` · `~/.codeium/windsurf/skills` 네이티브 경로로 옮긴다. Antigravity 전역 경로를 공식 마이그레이션 문서대로 `~/.gemini/antigravity-cli/skills` 로 바로잡는다.
+- 8d02820: 어떤 하네스 에이전트든 스킬을 발견하게 만든다. 중립 경로 `agents` 타깃(`~/.agents/skills` · `.agents/skills`)을 새로 추가한다 — Cursor · Antigravity · ZCode 등 Agent Skills 규약을 읽는 하네스가 함께 잡는 자리다. `gemini-cli`(`.gemini/skills`)와 `copilot`(`.github/skills` · `~/.copilot/skills`) 타깃을 추가한다. Cursor 는 구식 `.cursor/rules/*.mdc` 변환을 버리고 네이티브 `.cursor/skills` 로 옮기며 전역 설치를 지원한다. Windsurf 도 규칙 파일(12,000자 상한 때문에 실제 스킬이 아예 설치되지 못했다)에서 `.windsurf/skills` · `~/.codeium/windsurf/skills` 네이티브 경로로 옮긴다. Antigravity 전역 경로를 공식 마이그레이션 문서대로 `~/.gemini/antigravity-cli/skills` 로 바로잡는다.
\ No newline at end of file
diff --git a/packages/skill/SKILL.md b/packages/skill/SKILL.md
index 65dc7ce..cb1a52f 100644
--- a/packages/skill/SKILL.md
+++ b/packages/skill/SKILL.md
@@ -34,6 +34,7 @@ description: "웹 디자인 전 과정을 끌고 가는 파이프라인 스킬.
 3. **화려함은 4순위다.** Awwwards 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10이다. 3D를 얹는 것보다 타입 스케일을 정돈하는 게 결과에 두 배 유효하다.
 4. **대담함은 한 곳에만.** 리스크는 하나다. 나머지는 조용히 받쳐준다. 두 곳에서 소리치면 둘 다 죽는다.
 5. **성능 예산을 넘기면 그 이펙트는 채택하지 않는다.** 예산은 3단계에서 정하고 5단계에서 검증한다. 데모·포트폴리오 브리프면 예산을 올려도 되지만 **올렸다고 말해야 한다**.
+6. **완료의 정의는 게이트 통과다(자율 검증 폐쇄 루프).** 5단계에서 `tools/design-gate.mjs` 를 프로젝트에 심어 돌리고, 실패 항목이 있으면 4단계로 돌아가 고치고 **전체를 재실행**한다. 게이트 없이 6단계로 넘어가지 않는다. 사용자를 QA 로 쓰지 않는다 — 검증은 기본 내장, 사용자 피드백은 보조다. 상세는 `references/audit-gate.md`.
 
 **접근성은 예외다. 이것만은 협상하지 않는다.** 키보드·포커스·대비·`prefers-reduced-motion`은 어떤 이펙트보다, 어떤 브리프보다 우선한다. 픽셀은 왜곡해도 DOM은 살린다.
 
@@ -276,6 +277,9 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
 1. **슬롭 지문 grep** — 보라 CTA(`#6366f1`·`#8b5cf6` 계열), 전체 대문자 헤드라인, 번호 매긴 1·2·3 단계. 실측 검출률 상위 항목이다
 2. **카피 경쟁사 치환 테스트** — 제품명을 경쟁사 이름으로 바꿔도 문장이 성립하면, 그 카피는 아무것도 말하지 않았다
 3. **이펙트 전부 끄기** — CSS 필터·WebGL·애니메이션을 끈 상태에서 페이지가 여전히 읽히는가
+4. **게이트 실행(폐쇄 루프)** — `tools/design-gate.mjs --init` 으로 설정을 만들고 돌린다. 오버플로·h1·수축·대비·SEO/meta·스케일×폭까지 전 뷰 × 전 폭. L1(단위)·L5(탐색)는 프로젝트 `tools/` 에 보강해 `npm run verify` 체인으로. **게이트 통과 없이 완료 선언 금지.**
+
+> 게이트가 잡은 실제 사고 목록과 6계층 설계 근거는 `references/audit-gate.md` 다. 자기 검사 스크립트를 매번 새로 쓰지 마라 — 이 게이트를 심고 확장해라.
 
 #### 하드 게이트 — 전부 "아니오"여야 한다
 
@@ -350,6 +354,8 @@ HTML-in-Canvas(`drawElementImage`)는 **폴백을 완성한 뒤에만** 얹는
 | `references/experimental-canvas.md` | 4단계 — HTML-in-Canvas를 검토할 때 |
 | `references/preflight.md` | 5단계 — 감사 |
 | `references/antipatterns.md` | 3·5단계 — 한글 조판 / 슬롭 검출 |
+| `references/audit-gate.md` | **5단계 — 게이트(폐쇄 루프) 설계·설치·하니스 규칙** |
+| `tools/design-gate.mjs` | **5단계 — 범용 게이트 실행기(SEO/meta·대비·수축·시각·WebKit 옵션)** |
 
 ## 작업 중 지켜야 할 것
 
diff --git a/packages/skill/package.json b/packages/skill/package.json
index 9767eda..5cfbf26 100644
--- a/packages/skill/package.json
+++ b/packages/skill/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@designpaca/skill",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "description": "designpaca 스킬 원본 — SKILL.md 와 참조 문서",
   "scripts": {
diff --git a/packages/skill/references/audit-gate.md b/packages/skill/references/audit-gate.md
new file mode 100644
index 0000000..6338ac3
--- /dev/null
+++ b/packages/skill/references/audit-gate.md
@@ -0,0 +1,80 @@
+# audit-gate — 자율 검증 폐쇄 루프
+
+5단계(감사)를 **완료 선언의 게이트**로 만드는 문서다. 핵심 원칙은 하나다:
+
+> **완료의 정의는 게이트 통과다. 사용자를 QA 로 쓰지 않는다.**
+
+"고쳤다"는 말의 근거는 검증 리포트의 수치다. 게이트가 실패 항목을 내면 4단계로 돌아가 고치고 **다시 전체를 돌린다** — 고친 것만 재검하지 않는다. 이 루프(구현 → 게이트 → 실패 → 수정 → 재게이트)가 designpaca의 기본 동작이며, 게이트 없이 6단계로 넘어가는 것은 경로 무관 금지다.
+
+## 왜 필요한가 — 실제 사고 목록
+
+이 게이트의 각 검사는 사용자 보고로야 발견됐던 결함에서 왔다. 어느 검사가 어느 사고를 잡는지가 설계 근거다.
+
+| 사고 (실제) | 검사 |
+|---|---|
+| CSS 닫는 중괄호 누락 — 이후 규칙 절반이 죽은 채 렌더 | stylelint(구문) + 중괄호 균형 |
+| 브랜드가 모바일에서 1글자 폭으로 수축, 세로로 쌓임 | 수축 탐지(짧은 라벨 n줄 이상) + 브랜드 1줄 |
+| 기기 글꼴 확대(안드로이드 큰 글꼴 1.3×)에서 제목 부서짐 | 스케일×폭 h1 행렬 |
+| 본문 보조색이 배경 대비 4.4:1 (AA 미달) | 전 요소 대비 스캔(블렌드 계산) |
+| 조사만 하고 안 고친 영역(관심 과목 등) | 전 뷰 순회 — 검사는 '내가 고친 것'이 아니라 전체 표면 |
+| 대시보드 26명 ↔ 명단 12명 숫자 모순 | 콘텐츠 정합(요약 = 재계산 비교) |
+| aria-label 을 div/ul 에 오용(보조기술 무시) | html-validate + axe |
+| dl 안 `<p>`, role="grid" 자식 구문 위반 | html-validate + axe |
+| 계산 로직 오류(행 배열을 값으로 셈 → 0/3) | 단위 테스트(브라우저 밖 경계값) |
+| 같은 데이터 속성이 여러 뷰에 존재해 선택자 오작동 | 하니스 규칙: 선택자는 컨테이너 스코프 |
+| 혼합 span 그리드의 자동 배치가 시간 라벨을 흩어놓음(같은 열 폭 40/78 혼재, Δ 불규칙) | **리듬·트랙 불변식** — 같은 부모·같은 클래스 형제 중 (a) 숫자/시간 라벨(등폭 의도)과 (b) 빈 격자 셀(트랙 균일 의도)은 폭이 균일해야 하고, 한 축 정렬·크기 균일 형제는 등간격이어야 한다. 한국어 라벨은 글자수가 같아도 내용 폭차가 자연스러우므로 폭 검사 대상에서 뺀다(오탐 방지). 근본 수칙: 혼합 span 그리드는 자동 배치를 믿지 않고 좌표를 명시하라 |
+
+## 6계층
+
+`tools/design-gate.mjs` 가 한 파일로 돌리는 것과 프로젝트가 보강하는 것이 있다.
+
+| 계층 | 도구 | 비고 |
+|---|---|---|
+| L0 정적 | stylelint + html-validate | 문법·구문 위반을 브라우저 켜기 전에 |
+| L1 단위 | 순수 계산 로직 추출(calc.js) + 경계값 테스트 | 프로젝트별 작성 — 0명/만석/초과/빈배열 |
+| L2 불변식 | `design-gate.mjs` — 오버플로·h1·수축·대비·SEO/meta | 전 뷰 × 전 폭 |
+| L3 시각 회귀 | 기준 화면 pixelmatch diff (≥0.1% 실패) | 갱신은 검증된 배포 후 `--update-baseline` |
+| L4 WebKit | Playwright webkit | 사파리 엔진 렌더 차이 |
+| L5 탐색 | 키보드 완전 통과 + 사용자 여정 차터 | 프로젝트별 작성 — 마우스 금지 |
+
+## 설치 (프로젝트에 게이트 심기)
+
+```
+node <스킬>/tools/design-gate.mjs --init     # gate.config.json 초안
+# pages[].views 를 실제 뷰 목록으로, viewAttribute 를 data-view 등으로
+npm i -D puppeteer-core                       # CHROME_PATH 또는 자동 탐색
+package.json: "verify": "node <스킬>/tools/design-gate.mjs"
+배포는 항상: npm run verify && build && deploy   # verify 실패(exit 1)면 배포 불가
+```
+
+L1·L5 는 프로젝트 안에 `tools/unit/*.test.mjs`, `tools/exploratory.mjs` 로 보강하고 verify 체인에 묶는다. 근거와 완성 예는 designpaca 저장소 `apps/site/tools/` 가 정본 샘플이다.
+
+## SEO / meta 감사 (design-gate 내장)
+
+조사 기준(2026): title 10~65자·유일, description 60~165자, viewport, `html lang`, charset, canonical(프로덕션), og:title/description/image/url, twitter:card, favicon, h1 유일, img alt 전부, JSON-LD 파싱. 데모·로컬 페이지는 canonical/robots 없음을 허용한다 — **검사는 맥락을 존중하되 나열 근거는 리포트에 남긴다.**
+
+## OS · 브라우저 특성 — 검사에 반영할 것
+
+- **Windows**: 스크롤바가 오버레이가 아니다 — `overflow-x:auto` 짝에는 `overflow-y:hidden` + `scrollbar-width` 검토. 스크롤바 자체가 레이아웃을 민다.
+- **iOS/Safari(WebKit)**: `100vh` 주소창 문제(`100dvh`), 텍스트 인플레이션(`-webkit-text-size-adjust:100%`), WebKit 만의 flex/행높이 차이 → L4 로 재검.
+- **안드로이드**: 시스템 글꼴 확대(1.15~1.3× 흔함) — rem 전면 확대로 제목 칸 수축 → 스케일×폭 행렬으로 재현·검증.
+- **폰트 스왑**: `font-display: swap` 의 CLS — 폴백 메트릭 보정(typography.md §4) 없이 검사 통과를 선언하지 않는다.
+
+## 하니스 규칙 (테스트를 만드는 테스트)
+
+1. **선택자는 스코프필수** — 같은 data-* 가 다른 뷰에 있으면 숨은 요소를 잡는다(`#as-table [data-assign]` 처럼).
+2. **page.evaluate 클로저 금지** — Node 스코프 함수를 페이지 안에서 부르지 않는다. 측정 코드는 문자열로 주입.
+3. **줄 수 측정의 오탐 두 종류** — 폰트 메트릭 top 차이(±5px 허용오차), 인라인 아이콘과 텍스트의 top 차이(텍스트 노드만 분리 측정).
+4. **CSS 수정 직후 검증은 캐시 차단**(`setCacheEnabled(false)`) + 실제 로드된 `?v=` 확인.
+5. **비전(모델) 검수는 '여부'가 아니라 '지점 평가'에만** — 여부는 계측으로.
+6. **모달 닫힘 직후 포커스 강탈** — 뷰 전환+타깃 포커스는 한 evaluate 로, settle 후 유실 재포커스.
+7. **게이트를 통과해도 리포트에 수치를 남긴다** — "ALL PASS"가 아니라 "무엇을 몇으로 확인했나".
+
+## 리포트 양식
+
+```
+게이트: 전 계층 통과 — 배포 가능 · 총 Ns
+| 계층 | 결과 | 항목 | 소요 |
+```
+
+실패 상세는 원문 테일 포함. 리포트 파일(gate-report.md / verify-report.md)은 커밋 대상이다.
diff --git a/packages/skill/tools/design-gate.mjs b/packages/skill/tools/design-gate.mjs
new file mode 100644
index 0000000..bb6508c
--- /dev/null
+++ b/packages/skill/tools/design-gate.mjs
@@ -0,0 +1,359 @@
+#!/usr/bin/env node
+// design-gate — 범용 디자인 QA 게이트 (designpaca 스킬 동반 도구)
+//
+// 조사 기반 6계층 중 이 파일 하나로 돌리는 것: L0(정적·옵션) + L2(불변식·SEO/meta) + L3(시각회귀·옵션) + L4(WebKit·옵션).
+// 프로젝트 고유의 L1(단위)·L5(탐색)는 각 프로젝트의 calc/테스트로 보강한다.
+//
+// 사용:
+//   node design-gate.mjs --init                     # 설정파일 게이트 초안 생성
+//   node design-gate.mjs                            # gate.config.json 기준 실행
+//   node design-gate.mjs --update-baseline          # 시각 기준화면 갱신(검증된 배포 후에만)
+//
+// 철학: 없는 도구는 SKIP(실패 아님), 검사 가능한 것은 전부 검사(실패면 exit 1).
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import url from "node:url";
+
+const argv = process.argv.slice(2);
+const cfgFile = path.resolve(process.cwd(), argv.includes("--init") ? "gate.config.json" : (argv.find((a) => a.startsWith("--config=")) || "gate.config.json").replace("--config=", ""));
+
+const DEFAULT_CFG = {
+  pages: [
+    {
+      name: "app",
+      path: "index.html",
+      viewAttribute: "data-view",
+      views: ["main"],
+      h1: "h1",
+      brand: ".brand",
+    },
+  ],
+  widths: [320, 375, 390, 768, 1024, 1440],
+  fontScales: [1, 1.3],
+  thresholds: { contrastNormal: 4.5, contrastLarge: 3, visualDiffPct: 0.1, stackLines: 3 },
+  checks: { meta: true, contrast: true, stack: true, wrap: true, rhythm: true, scaleMatrix: true, static: false, visual: false, webkit: false },
+  chromePath: null,
+};
+
+if (argv.includes("--init")) {
+  fs.writeFileSync(cfgFile, JSON.stringify(DEFAULT_CFG, null, 2) + "\n");
+  console.log("gate.config.json 초안 생성 — pages/views 를 프로젝트에 맞게 고치세요.");
+  console.log("package.json: \"scripts\": { \"verify\": \"node <이 스크립트 경로>\" } 등록을 권장합니다.");
+  process.exit(0);
+}
+
+const _user = JSON.parse(fs.readFileSync(cfgFile, "utf8"));
+const CFG = { ...DEFAULT_CFG, ..._user, checks: { ...DEFAULT_CFG.checks, ...(_user.checks || {}) } }; // checks 는 깊은 병합 — 새 검사가 기본 켜지도록
+const UPDATE = argv.includes("--update-baseline");
+const results = [];
+const pass = (name, detail = "") => results.push({ ok: true, name, detail });
+const fail = (name, detail = "") => results.push({ ok: false, name, detail });
+const skip = (name, detail) => results.push({ ok: true, name, detail: "SKIP — " + detail });
+
+// ── 브라우저 확보 (puppeteer-core + 크롬 경로 자동 탐색) ──
+const CHROME_CANDIDATES = [
+  process.env.CHROME_PATH,
+  CFG.chromePath,
+  "C:/Program Files/Google/Chrome/Application/chrome.exe",
+  "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
+  "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+  "/usr/bin/google-chrome",
+  "/usr/bin/chromium-browser",
+].filter(Boolean);
+const CHROME = CHROME_CANDIDATES.find((p) => fs.existsSync(p));
+
+const pageUrl = (p) => (p.url ? p.url : url.pathToFileURL(path.resolve(process.cwd(), p.path)).href);
+
+// ── L0 정적 (옵션) ──
+if (CFG.checks.static) {
+  const css = spawnSync("npx", ["stylelint", "**/*.css"], { shell: true, encoding: "utf8" });
+  css.status === 0 ? pass("L0 stylelint") : fail("L0 stylelint", (css.stdout || "").slice(0, 200));
+  const html = spawnSync("npx", ["html-validate", ...CFG.pages.map((p) => p.path)], { shell: true, encoding: "utf8" });
+  html.status === 0 ? pass("L0 html-validate") : fail("L0 html-validate", (html.stdout || "").slice(0, 200));
+} else skip("L0 정적", "checks.static=false");
+
+// ── 브라우저 계층 ──
+if (!CHROME) {
+  console.log("chrome/puppeteer-core 없음 — CHROME_PATH 를 설정하세요.");
+  process.exit(1);
+}
+let puppeteer;
+try { puppeteer = await import("puppeteer-core"); }
+catch { console.log("puppeteer-core 미설치 — npm i -D puppeteer-core 필요"); process.exit(1); }
+
+const UTILS = `
+  window.__lines = (sel) => {
+    const el = typeof sel === "string" ? document.querySelector(sel) : sel;
+    if (!el) return -1;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const rects = [...range.getClientRects()].filter((r) => r.width > 1 && r.height > 4);
+    const tops = rects.map((r) => r.top).sort((a, b) => a - b);
+    const ls = [];
+    for (const t of tops) if (!ls.length || t - ls[ls.length - 1] > 5) ls.push(t);
+    return ls.length;
+  };
+`;
+
+const browser = await puppeteer.default.launch({ executablePath: CHROME, headless: "new", args: ["--force-device-scale-factor=1"] });
+const page = await browser.newPage();
+await page.setCacheEnabled(false);
+
+for (const p of CFG.pages) {
+  const href = pageUrl(p);
+  await page.setViewport({ width: 1440, height: 900 });
+  await page.goto(href, { waitUntil: "networkidle0" });
+  await page.evaluate(() => document.fonts.ready);
+  await page.evaluate(UTILS);
+
+  // ── SEO / meta (조사 기반 체크리스트) ──
+  if (CFG.checks.meta) {
+    const meta = await page.evaluate(() => {
+      const get = (sel, attr = "content") => { const el = document.querySelector(sel); return el ? (el.getAttribute(attr) || "") : null; };
+      const title = document.title.trim();
+      const desc = get('meta[name="description"]');
+      const og = (k) => get(`meta[property="og:${k}"]`);
+      const imgs = [...document.querySelectorAll("img")];
+      return {
+        title, titleLen: title.length,
+        desc, descLen: desc ? desc.length : 0,
+        viewport: get('meta[name="viewport"]'),
+        lang: document.documentElement.getAttribute("lang"),
+        charset: !!document.querySelector("meta[charset], meta[http-equiv='Content-Type']"),
+        canonical: get('link[rel="canonical"]', "href"),
+        ogTitle: og("title"), ogDesc: og("description"), ogImage: og("image"), ogUrl: og("url"),
+        twitter: get('meta[name="twitter:card"]'),
+        robots: get('meta[name="robots"]'),
+        favicon: !!document.querySelector('link[rel~="icon"]'),
+        h1Count: document.querySelectorAll("h1").length,
+        imgNoAlt: imgs.filter((i) => !i.getAttribute("alt")).length,
+        jsonld: [...document.querySelectorAll('script[type="application/ld+json"]')].every((s) => { try { JSON.parse(s.textContent); return true; } catch { return false; } }),
+        jsonldCount: document.querySelectorAll('script[type="application/ld+json"]').length,
+      };
+    });
+    const m = [];
+    if (!meta.title) m.push("title 없음");
+    else if (meta.titleLen < 10 || meta.titleLen > 65) m.push(`title ${meta.titleLen}자(10~65 권장)`);
+    if (!meta.desc) m.push("description 없음");
+    else if (meta.descLen < 60 || meta.descLen > 165) m.push(`description ${meta.descLen}자(60~165 권장)`);
+    if (!meta.viewport) m.push("viewport 없음");
+    if (!meta.lang) m.push("html lang 없음");
+    if (!meta.charset) m.push("charset 없음");
+    if (meta.ogTitle === null) m.push("og:title 없음");
+    if (meta.ogImage === null) m.push("og:image 없음");
+    if (meta.twitter === null) m.push("twitter:card 없음");
+    if (!meta.favicon) m.push("favicon 없음");
+    if (meta.h1Count > 1) m.push(`h1 ${meta.h1Count}개(유일해야)`);
+    if (meta.imgNoAlt) m.push(`img alt 없음 ${meta.imgNoAlt}개`);
+    if (meta.jsonldCount && !meta.jsonld) m.push("JSON-LD 파싱 실패");
+    // 데모·로컬 페이지는 canonical/robots 미명시 허용 — 있으면 오히려 검증
+    m.length ? fail(`${p.name} SEO/meta`, m.join(" · ")) : pass(`${p.name} SEO/meta`, `title ${meta.titleLen}자·desc ${meta.descLen}자·OG✓·alt ${meta.imgNoAlt}결`);
+  }
+
+  // ── 각 뷰 불변식 ──
+  const goView = async (v) => {
+    if (!p.viewAttribute || v === "single") return;
+    await page.evaluate((attr, name) => {
+      const btn = document.querySelector(`[${attr}="${name}"]`);
+      btn && btn.click();
+    }, p.viewAttribute, v);
+    await new Promise((r) => setTimeout(r, 120));
+  };
+
+  for (const v of p.views) {
+    await goView(v);
+    // 오버플로 — 전 폭
+    let overs = [];
+    for (const w of CFG.widths) {
+      await page.setViewport({ width: w, height: 900 });
+      await new Promise((r) => setTimeout(r, 60));
+      const over = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+      if (over > 0) overs.push(`+${over}px@${w}`);
+    }
+    overs.length ? fail(`${p.name}/${v} 오버플로`, overs.join(" ")) : pass(`${p.name}/${v} 오버플로`, CFG.widths.join("/"));
+
+    // h1 1줄
+    await page.setViewport({ width: 1440, height: 900 });
+    const h1l = await page.evaluate(`__lines(${JSON.stringify(p.h1 || "h1")})`);
+    h1l === 1 ? pass(`${p.name}/${v} h1 1줄`) : (h1l > 1 ? fail(`${p.name}/${v} h1 ${h1l}줄`) : skip(`${p.name}/${v} h1`, "요소 없음"));
+
+    // 세로 쌓임(수축) — 짧은 라벨 3줄 이상
+    if (CFG.checks.stack) {
+      const stacked = await page.evaluate((limit) => {
+        const out = [];
+        document.querySelectorAll("body *").forEach((el) => {
+          if (!el.offsetParent || el.querySelector("*")) return;
+          const txt = el.textContent.trim();
+          if (txt.length && txt.length <= 14 && window.__lines(el) >= limit) out.push(txt.slice(0, 10));
+        });
+        return [...new Set(out)].slice(0, 5);
+      }, CFG.thresholds.stackLines);
+      stacked.length ? fail(`${p.name}/${v} 세로쌓임(수축)`, stacked.join(",")) : pass(`${p.name}/${v} 수축 없음`);
+    }
+
+    // 리듬·트랙 불변식 — 같은 부모·같은 클래스의 형제들이 한 축으로 정렬돼 있으면 폭·간격이 균일해야 한다
+    // (시간표 시간 라벨이 자동 배치로 흩어지던 사고: 같은 열인데 폭 40/78 혼재, Δ 22·194 불규칙)
+    if (CFG.checks.rhythm) {
+      const rhythm = await page.evaluate(() => {
+        const groups = {};
+        document.querySelectorAll("body *").forEach((el) => {
+          if (!el.offsetParent || !el.parentElement || !el.classList.length || el.children.length) return;
+          const cls = el.classList[0];
+          const key = (el.parentElement.className || el.parentElement.tagName) + "|" + cls;
+          const r = el.getBoundingClientRect();
+          (groups[key] = groups[key] || []).push({ x: r.left, y: r.top, w: r.width, h: r.height, t: el.textContent.trim().slice(0, 6), p: el.parentElement });
+        });
+        const issues = [];
+        for (const [key, items] of Object.entries(groups)) {
+          if (items.length < 4) continue;
+          const spread = (v) => Math.max(...v) - Math.min(...v);
+          const cls = key.split("|")[1];
+          const hUniform = spread(items.map((i) => i.h)) <= 4;
+          const txtUniform = spread(items.map((i) => i.t.length)) <= 1;
+          const isDigits = items.every((i) => /^[0-9: .]+$/.test(i.t) && i.t.length > 0); // 숫자/시간 라벨 — 등폭이 의도
+          const isEmpty = items.every((i) => !i.t); // 빈 격자 셀 — 트랙 균일이 의도
+          // 1) 트랙 폭: 숫자 라벨·빈 셀·한 축 정렬 라벨은 폭이 균일해야 한다 — 자동 배치 흩어짐(열 섞임)을 잡는다.
+          //    한국어 라벨은 글자수가 같아도 폭이 달라지므로, 한 축 정렬 또는 숫자 전용일 때만 검사한다(오탐 방지).
+          const wSpread = spread(items.map((i) => i.w));
+          const alignedCol = spread(items.map((i) => i.x)) < 3;
+          if (hUniform && wSpread > 6 && (isDigits || isEmpty)) { // 숫자 라벨·빈 셀만 — 한국어 라벨은 내용 폭차가 자연스럽다
+            issues.push(`${cls}: 폭 ${Math.round(Math.min(...items.map((i) => i.w)))}~${Math.round(Math.max(...items.map((i) => i.w)))}px 불균일 — 트랙/배치 의심`);
+          }
+          // 2) 리듬: 한 축으로 정렬된 균일 크기 형제는 등간격이어야 한다
+          if (spread(items.map((i) => i.x)) < 3 && hUniform) {
+            const ys = items.map((i) => i.y).sort((a, b) => a - b);
+            const deltas = ys.slice(1).map((y, i) => y - ys[i]);
+            if (deltas.length >= 3 && Math.max(...deltas) > Math.min(...deltas) * 1.6 + 4) issues.push(`${cls}: 세로 간격 Δ${Math.round(Math.min(...deltas))}~${Math.round(Math.max(...deltas))}px 불균일`);
+          } else if (spread(items.map((i) => i.y)) < 3 && hUniform && spread(items.map((i) => i.w)) <= 4) {
+            const xs2 = items.map((i) => i.x).sort((a, b) => a - b);
+            const d2 = xs2.slice(1).map((x, i) => x - xs2[i]);
+            if (d2.length >= 3 && Math.max(...d2) > Math.min(...d2) * 1.6 + 4) issues.push(`${cls}: 가로 간격 불균일 Δ${Math.round(Math.min(...d2))}~${Math.round(Math.max(...d2))}px`);
+          }
+        }
+        return issues.slice(0, 4);
+      });
+      rhythm.length ? fail(p.name + "/" + v + " 리듬·트랙", rhythm.join(" · ")) : pass(p.name + "/" + v + " 리듬·트랙");
+    }
+
+    // 대비
+    if (CFG.checks.contrast) {
+      const bad = await page.evaluate((cn, cl) => {
+        const lum = ({ r, g, b }) => { const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }; return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b); };
+        const rgb = (c) => { const m = c.match(/rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\)/); return m ? { r: +m[1], g: +m[2], b: +m[3], a: m[4] === undefined ? 1 : +m[4] } : null; };
+        const blend = (t, b) => ({ r: t.r * t.a + b.r * (1 - t.a), g: t.g * t.a + b.g * (1 - t.a), b: t.b * t.a + b.b * (1 - t.a), a: 1 });
+        const seen = new Set(); const out = [];
+        document.querySelectorAll("body *").forEach((el) => {
+          if (!el.offsetParent) return;
+          if (![...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim())) return;
+          const cs = getComputedStyle(el);
+          const fg = rgb(cs.color); if (!fg) return;
+          let node = el; const stack = [];
+          while (node && node !== document.documentElement) {
+            const c = rgb(getComputedStyle(node).backgroundColor);
+            if (c && c.a >= 0.95) { stack.unshift(c); break; }
+            if (c && c.a > 0) stack.unshift(c);
+            node = node.parentElement;
+          }
+          let bg = { r: 255, g: 255, b: 255, a: 1 };
+          for (const s of stack) bg = blend(s, bg);
+          const fgb = blend(fg, bg);
+          const l1 = lum(fgb), l2 = lum(bg);
+          const ratio = +(((Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05))).toFixed(2);
+          const size = parseFloat(cs.fontSize); const w = +cs.fontWeight || 400;
+          const need = size >= 24 || (size >= 18.66 && w >= 600) ? cl : cn;
+          if (ratio < need) {
+            const k = cs.color + Math.round(size);
+            if (!seen.has(k)) { seen.add(k); out.push(`"${el.textContent.trim().slice(0, 8)}" ${ratio}:1`); }
+          }
+        });
+        return out.slice(0, 4);
+      }, CFG.thresholds.contrastNormal, CFG.thresholds.contrastLarge);
+      bad.length ? fail(`${p.name}/${v} 대비`, bad.join(",")) : pass(`${p.name}/${v} 대비 AA`);
+    }
+  }
+
+  // ── 스케일×폭 h1 행렬 (안드로이드 글꼴 확대 재현) ──
+  if (CFG.checks.scaleMatrix) {
+    const bad = [];
+    for (const w of [375, 390]) {
+      for (const s of CFG.fontScales) {
+        await page.setViewport({ width: w, height: 800, isMobile: true, hasTouch: true });
+        await page.goto(href, { waitUntil: "networkidle0" });
+        await page.evaluate(UTILS);
+        await page.addStyleTag({ content: `html { font-size: ${16 * s}px !important; }` });
+        const l = await page.evaluate(`__lines(${JSON.stringify(p.h1 || "h1")})`);
+        if (l > 1) bad.push(`${w}@${s}x:${l}줄`);
+      }
+    }
+    bad.length ? fail(`${p.name} 스케일×폭 h1`, bad.join(",")) : pass(`${p.name} 스케일×폭 h1`, `scales ${CFG.fontScales.join("/")}`);
+    // 브랜드 1줄
+    await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
+    await page.goto(href, { waitUntil: "networkidle0" });
+    await page.evaluate(UTILS);
+    if (p.brand) {
+      const bl = await page.evaluate(`__lines(${JSON.stringify(p.brand)})`);
+      bl === 1 ? pass(`${p.name} 브랜드 1줄`) : fail(`${p.name} 브랜드 ${bl}줄(수축 의심)`);
+    }
+  }
+}
+
+// ── L3 시각 회귀 (옵션: pixelmatch·pngjs 설치 시) ──
+if (CFG.checks.visual) {
+  try {
+    const { default: pixelmatch } = await import("pixelmatch");
+    const { PNG } = await import("pngjs");
+    const BASE = path.resolve(process.cwd(), "__gate__/baseline");
+    fs.mkdirSync(BASE, { recursive: true });
+    let diffs = 0, n = 0;
+    for (const p of CFG.pages) {
+      for (const w of [390, 1440]) {
+        await page.setViewport({ width: w, height: w === 390 ? 844 : 900 });
+        await page.goto(pageUrl(p), { waitUntil: "networkidle0" });
+        await new Promise((r) => setTimeout(r, 250));
+        const name = `${p.name}-${w}.png`;
+        const buf = await page.screenshot();
+        const cur = PNG.sync.read(buf);
+        const bf = path.join(BASE, name);
+        if (UPDATE || !fs.existsSync(bf)) { fs.writeFileSync(bf, buf); continue; }
+        const base = PNG.sync.read(fs.readFileSync(bf));
+        if (base.width !== cur.width || base.height !== cur.height) { diffs++; fail(`L3 시각 ${name}`, "크기 불일치"); continue; }
+        const cnt = pixelmatch(base.data, cur.data, null, base.width, base.height, { threshold: 0.1 });
+        const pct = (cnt / (base.width * base.height)) * 100;
+        n++;
+        if (pct >= CFG.thresholds.visualDiffPct) { diffs++; fail(`L3 시각 ${name}`, pct.toFixed(3) + "% diff"); }
+      }
+    }
+    !diffs && pass("L3 시각 회귀", `${n}화면 ${UPDATE ? "기준갱신" : "일치"}`);
+  } catch (e) { skip("L3 시각 회귀", "pixelmatch/pngjs 미설치"); }
+} else skip("L3 시각 회귀", "checks.visual=false");
+
+await browser.close();
+
+// ── L4 WebKit (옵션: playwright 설치 시) ──
+if (CFG.checks.webkit) {
+  try {
+    const { webkit } = await import("playwright");
+    const b2 = await webkit.launch();
+    const pg = await b2.newPage();
+    await pg.setViewportSize({ width: 390, height: 844 });
+    let bad = 0;
+    for (const p of CFG.pages) {
+      await pg.goto(pageUrl(p), { waitUntil: "networkidle" });
+      const over = await pg.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
+      if (over > 0) { fail(`L4 WebKit ${p.name} 오버플로`, `+${over}px`); bad++; }
+    }
+    await b2.close();
+    !bad && pass("L4 WebKit", `${CFG.pages.length}페이지 오버플로 0`);
+  } catch { skip("L4 WebKit", "playwright/webkit 미설치"); }
+} else skip("L4 WebKit", "checks.webkit=false");
+
+// ── 리포트 ──
+const fails = results.filter((r) => !r.ok).length;
+const lines = results.map((r) => `${r.ok ? "PASS" : "FAIL"}  ${r.name}${r.detail ? " — " + r.detail : ""}`);
+console.log(lines.join("\n"));
+const stamp = new Date().toISOString().replace("T", " ").slice(0, 16);
+fs.writeFileSync(path.resolve(process.cwd(), "gate-report.md"),
+  `# 게이트 리포트 — ${stamp}\n\n${fails ? `**${fails}건 실패 — 배포 금지**` : "**전 항목 통과 — 배포 가능**"}\n\n\`\`\`\n${lines.join("\n")}\n\`\`\`\n`);
+console.log(`\n${fails ? `게이트 실패(${fails})` : "게이트 통과"} — gate-report.md 생성`);
+process.exit(fails ? 1 : 0);
diff --git a/research/audit-references.md b/research/audit-references.md
new file mode 100644
index 0000000..327155e
--- /dev/null
+++ b/research/audit-references.md
@@ -0,0 +1,58 @@
+# 레퍼런스 조사 파일 감사 보고
+
+- 감사일: 2026-08-21
+- 방법: 각 파일이 주장하는 핵심 관찰(정확한 hex 색상, 폰트, 페이지 구성, 수치)을 WebFetch 및 원본 HTML/CSS 직접 fetch(grep)로 실제 사이트와 비교.
+- 판정 기준: **일치** = 실제로 확인됨 / **불일치** = 실제와 다름 / **확인불가** = 접속 불가 또는 해당 관찰을 확인할 수 없음.
+- 참고: spacex.com·neuralink.com은 JS 렌더링 앱이라 셸 HTML+CSS 번들로 검증했고, spacex.com 콘텐츠는 web.archive.org 2024 스냅샷으로 교차 확인. leica-camera.com의 집계 CSS는 봇 차단(301/403)으로 직접 열지 못함(HTML과 렌더된 페이지 본문은 확인).
+
+## 종합 판정표
+
+| 파일명 | R1 사이트 | 파일의 주장 | 실측 결과 | 판정 |
+|---|---|---|---|---|
+| dogfood-aerospace/01-references.md | spacex.com | Raptor 챔버 압력 300 bar·Isp 330s 텔레메트리를 구리 연소실 청사진과 노출. 배경 `#07101C`, 강조 `#FF6B00`+`#00A3FF`, 대비 16.2:1 | 실제 사이트는 순흑 `.app-background{background-color:#000}`, 텍스트 rgba(240,240,250), 폰트 **D-DIN**. 인라인 CSS+styles.css 전체에서 `#07101C`/`#FF6B00`/`#00A3FF` 전혀 없음. Starship 차량 페이지(web.archive.org 2024 포함)는 Raptor **추력(230 tf)·치수**만 표기하고 챔버 압력·Isp·청사진은 존재하지 않음 | **불일치** — 주장 수치·색상은 사이트에 없음. 아카이브에도 없으므로 "지금 바뀜"이 아니라 **애초에 게재되지 않은 값을 사이트 실측으로 제시** (300 bar/Isp 330s 자체는 외부에 알려진 Raptor 사실이나 spacex.com 게재분이 아님) |
+| dogfood-aerospace/01-references.md (R2) | rocketlabusa.com → rocketlabcorp.com | Rutherford의 3D 프린팅·전기 구동 터보펌프 기술 다이어그램 | 도메인이 rocketlabcorp.com으로 301 리디렉션(리브랜딩). `/launch/electron/`에 "Rutherford Engine" 섹션과 **"The world's first 3D-printed, electric-pump-fed rocket engine"**, 1단 9기 Rutherford 명시, 엔진 이미지 존재 | **일치** (3D 프린팅 + 전기펌프 엔진 설명 확인; 도메인만 변경됨) |
+| dogfood-celadon/01-references.md | museum.go.kr | 어두운 암실 조명 아래 청자 비색·빙렬 스포트라이트. 배경 `#121415`, 강조 `#5B9E90`, 폰트 마루부리/본명조 | 실제 홈페이지는 **라이트 테마**(배경 `#fff`/`#f8f8f8`), 사이트 CSS(common/layout/main, 약 186KB)의 폰트는 **notokr(Noto Sans KR) 계열뿐**, 마루부리·본명조 없음. `#121415`/`#5B9E90` 전혀 없음. '청자'는 홈의 전시 제목("도자기에 핀 꽃, 상감청자")에만 등장 | **불일치** — 웹사이트에서 측정 가능한 값이 아님. 물리적 전시실(고려청자실 암실 조명)에 대한 서술을 웹 "실측값"으로 둔갑시킨 것으로 판단 |
+| dogfood-incense/01-references.md | shoyeido.co.jp | 향목 단면 결·연기 궤적을 고요한 여백에 배치. 배경 `#F7F4EE`, 강조 `#7C3B24`, 폰트 조선명조/마루부리 | 실제는 게이트웨이(일/영 분기)+`/menu.html`(일본어) 구성. 계절별 배경 이미지(summer 헤더)와 **홈 mp4 영상 루프** 사용. 발견된 hex는 `#9F140B`(적갈)뿐이고 `#F7F4EE`/`#7C3B24` 없음. 일본 사이트인데 한국 웹폰트(조선명조/마루부리) 실측 주장은 성립 불가 | **불일치** (색상·폰트: 사이트에 근거 없음, 한국 폰트 주장은 명백한 날조 신호). 단 이미지 구성(결·연기 컷) 자체는 텍스트 fetch로 확인 불가 → 해당 부분만 **확인불가** |
+| dogfood-optics/01-references.md | leica-camera.com | 홍보 영상 대신 렌즈 단면도(11군 14매)·MTF 차트를 **최상단** 배치. 배경 `#0B0C0E`, 강조 `#00E5FF` 시안, Cinzel+JetBrains Mono, 헤더-히어로 120px | 홈은 제품 캐러셀(SL3-P, Cine Compact 1 등) 중심의 **순수 마케팅 구성**, 렌즈 목록 페이지도 브랜드 스토리·제품 카드뿐으로 MTF·단면도 없음 → "MTF 최상단" 주장과 직접 모순(기술자료는 제품 상세의 다운로드 자료 수준). HTML에 `#00E5FF`·Cinzel·JetBrains 전혀 없음(집계 CSS는 봇 차단으로 미확인). Leica 브드 레드가 표준인데 시안 단일 강조 주장은 근거 없음 | **불일치** (페이지 구성 주장: 명백히 다름. 정밀 수치 17.8:1·120px·Cinzel/JetBrains Mono: 근거 미발견, 일부는 차단으로 **확인불가**) |
+| dogfood-synapse/01-references.md | neuralink.com | 1024채널 스레드 전극 현미경 사진·20 kS/s 스파이크 래스터 플롯을 직접 노출. 배경 `#060709`, 강조 `#FFB800`, 대비 17.5:1 | 사이트는 Vite 기반 CSR이라 셸 HTML에 본문 없음. CSS 번들(38KB)의 배경은 `#000`(10회)·`#fff` 위주, meta theme-color `#000000`. `#060709`·`#FFB800` 전혀 없음. 1024채널·램스터 플롯 노출 여부는 렌더링이 필요해 fetch로 확인 불가 | **불일치(색상)** + **확인불가(콘텐츠)** — `#060709`/`#FFB800`은 사이트 코드에 존재하지 않음. 1024채널은 실제 N1 스펙이나 홈페이지 노출 여부는 미확인 |
+
+## 세부 근거 (증거 로그)
+
+### 1. spacex.com — 불일치
+- 인라인 CSS: `.app-background{background-color:#000;color:var(--white-100)}`, `@font-face{font-family:D-DIN;...}`.
+- `styles.05babecf1191c860.css`에서 `#FF6B00`, `#00A3FF`, `#07101C` 0건.
+- web.archive.org 2024 `/vehicles/starship/`: Raptor 섹션 존재하나 수치는 추력 230 tf / 직경 1.3 m / 높이 3.1 m (RVac 258 tf)뿐, **300 bar·Isp 330s·청사진 없음**.
+- 결론: Raptor 콘텐츠 자체는 있으나, 파일이 인용한 "핵심 텔레메트리"와 6축 색상은 사이트 출처가 아님.
+
+### 2. rocketlabcorp.com (구 rocketlabusa.com) — 일치
+- `/launch/electron/`: "Rutherford Engine — Proven performance. The world's first **3D-printed, electric-pump-fed** rocket engine.", First Stage "9 Sea-level Rutherford Engines", Rutherford 엔진 이미지 포함.
+- 결론: R2 발견점(3D 프린팅·전기 구동 터보펌프)은 현재 사이트에서 그대로 확인됨.
+
+### 3. museum.go.kr — 불일치
+- 홈페이지 HTML 101KB: 표준 라이트 테마 관공서형 사이트. '청자' 2회(전시 제목).
+- `/design/content/css/{common,layout,main}.css`(약 186KB): 배경 `#fff`/`#f8f8f8`/`#000`(일부), 폰트 `notokr-medium/bold/regular/light/DemiLight` 전용. `#121415`/`#5B9E90`/마루부리/본명조 0건.
+- 결론: 주장된 6축 실측값은 웹사이트에서 나온 것이 아님.
+
+### 4. shoyeido.co.jp — 불일치(실측값)
+- 게이트웨이: 일본어/English/LISN/Wa-Kanon/Shoyeido America 분기.
+- `/menu.html`(일본어 메인): `body{background-image:url(.../summer/h_img01.jpg)}` 계절 이미지, `home-img.mp4` 홈 영상, CSS에 `#9F140B`만 존재. `#F7F4EE`/`#7C3B24`/한국 폰트 0건.
+- 결론: "정적 여백 + 미색 한지 배경 + 한국 세리프 폰트" 실측은 근거 없음. 일본 사이트에 조선명조/마루부리를 실측했다는 주장 자체가 성립 불가.
+
+### 5. leica-camera.com — 불일치(구성)
+- 홈(렌더된 본문): SL3-P "All That Matters" 등 제품 캐러셀, 블로그, 이벤트 — 마케팅 우선.
+- `/en-int/photography/lenses`: 브랜드 스토리 + 제품 카드만, MTF/군-매 수치 없음.
+- HTML에서 `#00E5FF`/`#0B0C0E`/Cinzel/JetBrains 0건. 집계 CSS는 접속 차단(301/403, 쿠키·Referer 포함 시도도 실패).
+- 결론: "MTF 차트 최상단 배치" 구성 주장은 확인 가능한 범위에서 명백히 다름. 정밀 수치(120px, 17.8:1)는 검증 불가이나 사이트에서 근거 미발견.
+
+### 6. neuralink.com — 불일치(색상) + 확인불가(콘텐츠)
+- 셸 HTML: `<meta name="theme-color" content="#000000">`, CSS 번들 `index.*.css` 5개.
+- CSS 38KB: `background-color:#000` 10회, `#fff`/`#ffffff` 6회, `#060709`/`#FFB800` 0건, 커스텀 font-family 미발견.
+- `/science`(Technology) 페이지도 CSR이라 본문 없음 → 1024채널·20 kS/s 래스터 플롯 노출 여부 확인 불가.
+
+## 요약
+
+1. 5개 파일의 R1 "6축 실측값"(정밀 hex·대비비·폰트)은 **모두 실제 사이트 코드/콘텐츠에서 발견되지 않음** — 사전 지식이나 분위기로 지어낸 수치일 가능성이 높음.
+2. 유일하게 실측이 맞는 것은 aerospace **R2 Rocket Lab**(3D 프린팅+전기펌프 Rutherford 문구 그대로 존재).
+3. "지금 다르다" vs "애초에 없었다": SpaceX는 2024 아카이브에서도 없어 "애초에 없음"으로 분류 가능. Leica/Shoyeido/박물관/Neuralink의 hex·폰트는 마케팅 페이지 리뉴얼과 무관하게 측정 출처 자체가 의심됨(한국 폰트 실측 등 논리적 모순 포함).
+4. Neuralink의 1024채널, 박물관의 암실 조명처럼 "사실인 내용"과 "사이트에서 실측했다는 주장"이 뒤섞여 있으므로 후속 단계(02 이후)에서 이 파일들의 수치를 디자인 토큰 근거로 인용하지 말 것.
+5. Leica 집계 CSS·Neuralink 렌더링 본문은 봇 차단/CSR으로 직접 확인 불가 — 해당 항목만 확인불가로 남김(브라우저 렌더링 검증 권장).
diff --git a/research/design-principles-v11.md b/research/design-principles-v11.md
new file mode 100644
index 0000000..d27c8e2
--- /dev/null
+++ b/research/design-principles-v11.md
@@ -0,0 +1,139 @@
+# 디자인 원론·타이포그래피·UX 방법론 조사서 — v11 적용 편
+
+조사일 2026-08-22. 14개 웹검색 + 원전 문서, 고유 출처 110여 개.
+가온 학적부·두레 수강신청 두 데모의 전 페이지·전 요소 개정 근거로 쓴다.
+항목 앞 [G]=가온 적용 [D]=두레 적용 [both]=양쪽 적용.
+
+## A. 타이포그래피 원론 (24)
+
+1. [both] 본문 행길이 45–75자(공백 포함), 이상값 66자 — UXPin, Baymard, The Crit.
+2. [both] 데스크톱 본문 행간 1.5–1.6(라틴 기준) — Pimp My Type.
+3. [both] 한글은 수평 흐름이 없어 행간을 라틴보다 넓게 — 1.6–1.7 권장 — 박스블로그(한글 웹 타이포그래피).
+4. [both] 한글 자간 기본 0이 원칙(글자사이 0 배열) — W3C 한국어 조판 요구사항.
+5. [both] 큰 제목에만 자간 축소(tracking-tight) 허용, 본문 금지 — The Crit/Smashing.
+6. [both] 웹 본문 최소 16px는 '문서 사이트' 기준이며, 밀도 높은 관리 콘솔은 14px가 업계 표준(shadcn·Ant) — Ant Design font spec.
+7. [both] 타입 스케일은 비율로: Major Third(1.25)가 UI에서 절제된 위계 — Typescale.com, Typographymaster.
+8. [both] 16px 기준 1.25 스케일: 16→20→25→31→39 — Typescale.com.
+9. [both] 위계는 크기·웨이트·색 3축으로 만든다(한 축에만 의존 금지) — Design Systems Collective.
+10. [both] 볼드(700) 금지 — 웨이트는 수치로: 본문 400, 강조 500, 제목·버튼 600. 2–3 웨이트 상한 — Ant Design, DesignerUp.
+11. [both] 가변 폰트로 중간 웨이트(550·650)를 쓰면 합성 볼드가 없다 — MDN Variable Fonts, web.dev.
+12. [both] 없는 웨이트는 브라우저가 합성한다(faux bold) — font-synthesis-weight: none 으로 차단 — A List Apart 'Say No to Faux Bold'.
+13. [both] strong/b 기본 700을 재정의(600)해 UA 볼드가 새지 않게 한다 — MDN font-weight.
+14. [both] 수치 데이터에는 tabular-nums — 자리 흔들림 방지 — typography 지침(스킬 typography.md §5와 일치).
+15. [both] 표 숫자열은 우측 정렬(자릿수 정렬), 텍스트 좌측 — Science Editor, UX Planet.
+16. [both] 표 헤더 정렬은 해당 열 데이터와 일치 — Pencil & Paper, Mission Log.
+17. [G] 세리프(Noto Serif KR)는 제목·표지에만 — 고딕 본문과 대비 — Noto Serif KR 특성.
+18. [D] 기술·행정 문서 톤에는 네오그로테스크(IBM Plex Sans KR) — IBM Plex 소개.
+19. [both] 한글 웨이트는 라틴보다 1단계 낮게 보정(한글 700이 라틴 700보다 무겁게 보임) — W3C/한글 조판.
+20. [both] 줄바꿈이 표를 깨지 않게 긴 식별자는 word-break: keep-all + overflow-wrap — 한글 조판.
+21. [both] 축 소형 라벨(≤11px)은 500 이상 웨이트로 — 작은 크기에서 가늘면 소실 — UXPin.
+22. [both] 문단(공지 본문 등)은 max-width 65–70ch 제한 — Baymard.
+23. [both] 행간·자간은 폰트마다 다르게 재준다(폰트 바꾸면 타이프 재조정) — Figma 타이포그래피 가이드.
+24. [both] 디스플레이 서체는 본문 금지, 위계는 웨이트+여백으로 — 표준 원론.
+
+## B. 색·대비 (12)
+
+25. [both] 본문 텍스트 대비 4.5:1 이상(WCAG 1.4.3 AA) — W3C WCAG 2.2.
+26. [both] 큰 텍스트(≥24px 또는 ≥18.66px 굵음)는 3:1 — W3C.
+27. [both] UI 구성요소·포커스 표시 3:1(1.4.11 비텍스트 대비) — W3C.
+28. [both] AAA는 7:1 — 준거하는 편이 좋으나 AA가 의무선 — WebAIM.
+29. [both] 회색 보조 텍스트(#a1a1aa급, 약 2.6:1)는 실망률 상위 원인 — 본문용 보조색도 4.5:1 필요 — WCAG.
+30. [both] 60-30-10: 지배 60 배경, 부차 30 카드·내비, 강조 10 CTA — NN/g Using Color.
+31. [both] 강조색은 희소해야 시그널이 된다(남발 금지) — LogRocket 60-30-10.
+32. [G] 상태색은 소프트 배경+짙은 잉크 조합이 배지 표준 — shadcn 문법.
+33. [both] 색만으로 상태를 구분하지 않는다(형태·라벨 병용) — WCAG 색 사용.
+34. [both] 차트 색은 데이터-잉크 비율을 해치지 않게 — Tufte/Few.
+35. [D] 벽돌(주황) 강조는 10% 이내 면적에서 — 60-30-10.
+36. [both] 그림자는 계층 신호(스택 깊이)로만 — 실제 광원 흉내 금지 — shadcn/Material elevation.
+
+## C. UX 법칙·휴리스틱 (28)
+
+37. [both] 닐슨 1 시스템 상태 가시성 — 저장·전환·계산 즉시 피드백(aria-live) — NN/g.
+38. [both] 닐슨 2 실제 세계 일치 — '장부''도장' 등 도메인 언어 — NN/g.
+39. [both] 닐슨 3 사용자 통제와 자유 — 모달 닫기·신청 취소·되돌리기 — NN/g.
+40. [both] 닐슨 4 일관성 — 같은 동작은 같은 컨트롤(칩·배지·버튼 문법 통일) — NN/g.
+41. [both] 닐슨 5 오류 예방 — 겹침 수강 즉시 차단, 채점 실수 방지 — NN/g.
+42. [both] 닐슨 6 재인优于회상 — 아이콘+라벨 병기, 현재 위치 표시(크럼브) — NN/g.
+43. [both] 닐슨 7 유연성·효율 — 필터·검색·키보드(Esc) — NN/g.
+44. [both] 닐슨 8 미니멀·미학 — 장식 아이콘 금지, 정보 밀도 우선 — NN/g.
+45. [both] 닐슨 9 오류 인지·회복 — 오류는 눈에 띄고 해결책 제시 — NN/g Error-Message Guidelines.
+46. [both] 닐슨 10 도움말 — 데모는 요소 옆 한 줄 안내로 대체 — NN/g.
+47. [both] 피츠 법칙: 목표는 크고 가깝게 — 주 액션 버튼 높이 36px+, 모바일 포인터 40px+ — NN/g Fitts.
+48. [both] 힉 법칙: 선택지를 묶어(chips 그룹) 결정 비용 절감 — Laws of UX.
+49. [both] 제이콥 법칙: 익숙한 패턴(사이드바+탭+모달) 유지 — Laws of UX.
+50. [both] 밀러 법칙: 작업 기억 7±2 — 내비를 3그룹으로 청킹 — Laws of UX.
+51. [both] 근접성: 관련 항목은 간격으로 묶고 무관은 여백으로 분리 — NN/g Gestalt Proximity.
+52. [both] 유사성: 같은 기능은 같은 모양(모든 row-open은 같은 스타일) — IxDF.
+53. [both] 공통 영역: 테두리/배경이 하나의 그룹으로 만든다(패널) — UX Tigers.
+54. [both] 폰 레스토르프: 격차 강조는 하나만(오늘 칸) — Laws of UX.
+55. [both] 도허티 임계 400ms — 상태 전환은 100–200ms 내 — Laws of UX.
+56. [both] 인지 부하 감소: 점진적 공개(공지 아코디언) — IxDF.
+57. [both] 미적-사용성 효과: 심미성은 사용성 인식을 높인다(단 장식은 8번과 충돌 금지) — Laws of UX.
+58. [both] 시리얼 포지션: 중요 항목은 목록 처음/끝에 — Laws of UX.
+59. [both] 피크-엔드: 마지막 화면(리포트)의 완결감 — Laws of UX.
+60. [both] 터치 대상 최소 24px(WCAG 2.5.8 AA), 권장 44px(HIG)/48px(Material) — WCAG 2.2·Apple HIG.
+61. [both] 포커스 표시 필수(2.4.7) — outline 2px + offset, 색 대비 3:1 — WCAG.
+62. [both] 모바일에서도 포커스가 가려지지 않게(2.4.11) — WCAG 2.2 신설.
+63. [both] 애니메이션은 200ms 이내·레이아웃 속성 아님(합성만) — 표준 퍼포먼스 원칙.
+64. [both] 호버 상태는 포인터 장치에서만(@media hover) — 표준.
+
+## D. 대시보드·데이터 (12)
+
+65. [G] 대시보드는 한 화면에서 '한눈에' — 스크롤 없이 핵심 지표 — Stephen Few.
+66. [G] 13가지 흔한 실수: 지나친 장식, 부정확한 차트, 무의미한 게이지 금지 — Few.
+67. [both] 데이터-잉크 비율 최대화: 불필요한 눈금·테두리·3D 금지 — Tufte/Few.
+68. [both] 막대 시작은 0부터 — 왜곡 금지 — Few.
+69. [G] 요약 수치는 크게(24px+)·라벨은 작게 — Few/Plausible 실측.
+70. [both] 표의 4가지 과제 지원: 찾기·비교·행 보기·편집 — NN/g Data Tables.
+71. [both] 긴 표는 고정 헤더(sticky) 또는 페이지 단위 — NN/g.
+72. [both] 빈 상태는 안내다: 무엇이 여기에 올지 + 다음 행동 — NN/g Empty States.
+73. [both] 빈 상태·오류에 유머 남발 금지(건설적으로) — NN/g.
+74. [D] 정원·여석 등 비교 데이터는 게이지가 아니라 숫자+막대 — Few.
+75. [both] 시계열은 라인/막대, 구성비는 스택바 — Few/Tableau.
+76. [both] 차트에 값 라벨을 직접(범례 왕복 금지) — Few.
+
+## E. 레이아웃·폼·내비 (16)
+
+77. [both] 8pt 그리드: 여백·크기는 8의 배수(4 서브그리드 허용) — Medium 8-Point Grid.
+78. [both] 수직 리듬: 요소 높이도 그리드에 맞춘다 — VMware Tanzu.
+79. [both] 관리 콘솔 사이드바 200–260px 폭이 표준 — UX Planet Sidebar.
+80. [both] 링크 7개 이상이면 사이드 내비가 상단 내비보다 낫다 — UX Design Institute.
+81. [both] 모달은 화면의 ~25%, 모바일은 전면 — Appcues, A11Y Collective.
+82. [both] 모달 열리면 포커스 진입·닫히면 반환(native dialog) — Userpilot/LogRocket.
+83. [both] 모달은 짧은 집중 작업만, 긴 작업은 페이지 — NN/g Modal vs Non-modal.
+84. [both] 폼 라벨은 상단(가로 공간 절약·스캔 빠름) — NN/g Forms.
+85. [both] 입력 오류는 해당 필드 옆 + 상단 요약 — NN/g.
+86. [both] 취소는 두 번째 버튼, 파괴적 액션은 색으로 구분 — 표준.
+87. [both] 스티키 요소는 배경·테두리로 콘텐츠와 분리 — 표준.
+88. [both] 뷰포트 320px에서도 수평 스크롤 0(최소 방어선) — 표준 반응형.
+89. [both] 그리드 축소 트랙은 minmax(0,1fr) — 이 프로젝트 재발 결함.
+90. [both] overflow-x:auto 에는 overflow-y:hidden 명시(반대축 auto 함정) — 이 프로젝트 규칙.
+91. [both] 콘텐츠 폭 상한(본문 1132px 등) 유지 — 독서 최적화.
+92. [both] 요소 사이 8/12/16/24/32 간격 스케일만 사용 — 8pt.
+
+## F. 폰트 선택 (13)
+
+93. [G] 본문 Pretendard Variable(SIL OFL, 동적 서브셋) 유지 — 한국 UI 표준.
+94. [G] 제목·표지 Noto Serif KR(SIL OFL, 가변) 600 — 학적부 서류 결.
+95. [D] 본문·제목 IBM Plex Sans KR(OFL, 400/500/600) — 대학·기술 문서 톤.
+96. [D] 마스트헤드·과목군 라벨 Noto Serif KR 600 — 공문·신문 결.
+97. [both] JetBrains Mono(OFL) 숫자·코드 — 유지.
+98. [both] SUIT(SIL OFL)는 대안 후보 — UI 전용 고딕 — sun.fo.
+99. [both] 웨이트 3개 상한: 400/500(또는 550)/600 — Ant Design.
+100. [both] Google Fonts CDN 사용 시 preconnect 필수(도메인 3개 상한) — 표준.
+101. [both] 한글 웹폰트는 동적 서브셋 빌드로 전송량 최소 — Pretendard 문서.
+102. [both] font-display: swap 기본 — 스킬 typography.md §3.
+103. [both] 세리프+고딕 조합에서 크기감 차이는 size-adjust/@font-face 보정 — typography.md §6-3.
+104. [both] 라틴 우선 스택으로 숫자·영문 조악함 방지 — typography.md §6-3.
+105. [both] '왜 이 폰트인가' 한 문장 답이 없으면 바꾸지 않는다 — typography.md §1-4.
+
+## 주요 출처 (110여 개 중 핵심)
+
+- 타이포그래피: UXPin, Baymard Institute, Smashing Magazine, USWDS, Pimp My Type, The Crit, Medium(Design Bootcamp), Typescale.com, Typographymaster, Imperavi, Blake Crosley, Kalamuna, Figma Resource Library, 박스블로그(parksb), KRDS, W3C 한국어 조판 요구사번역, 요즘IT, 디자인베이스, 브런치
+- 웨이트/가변: MDN(font-weight·Variable Fonts), web.dev, WebKit Blog, A List Apart, bnijenhuis.nl, Jono Alderson, Glyphs Forum, Marmelab, Ant Design, Design Systems Collective, DesignerUp, Udacity
+- UX: NN/g(10 휴리스틱·Fitts·표·빈 상태·오류 메시지·색·모달·근접성), Laws of UX, IxDF, UX Planet, Toptal, Justinmind, Pencil & Paper, Reddit r/UXDesign, Code Theorem, Medium, Cap3, uxtoast, Muzli, Bejamas, UX Tigers
+- 대시보드: Stephen Few(Information Dashboard Design), Perceptual Edge, Tableau, MS Fabric, MSU, ExcelCharts, The Data School
+- 표·레이아웃: Science Editor, Mission Log, UX StackExchange, Navbar Gallery, ALF Design, HashBuilds, Eleken, Userpilot, A11Y Collective, LogRocket, Appcues, UXPatterns.dev, Glow, VMware Tanzu, Prototypr, Spec.fm, UX Design CC
+- 접근성: W3C WCAG 2.2(1.4.3·1.4.11·2.4.7·2.4.11·2.5.8), WebAIM
+- 색: NN/g Using Color, LogRocket, UX Planet, UX Design CC, Webflow, WPMayor
+- 폰트: Google Fonts(IBM Plex Sans KR·Noto Serif KR), sun.fo(SUIT), 산돌구름, Fontsource, GitHub SUIT, Monoplex KR
diff --git a/research/dogfood-aerospace/01-references.md b/research/dogfood-aerospace/01-references.md
new file mode 100644
index 0000000..ae70edd
--- /dev/null
+++ b/research/dogfood-aerospace/01-references.md
@@ -0,0 +1,31 @@
+# 01. 레퍼런스 실측 — 궤도 우주공학 (Orbit Aerospace)
+
+## 1. 벤치마크 대상 3곳
+
+### R1. SpaceX Raptor Engine Technical Data (spacex.com)
+- **발견점**: 연소실 압력(Chamber Pressure 300 bar)과 비추력(Isp 330s) 등의 핵심 텔레메트리를 구리 연소실 청사진과 함께 노출.
+- **6축 실측값**:
+  - 배경: `#07101C` (딥 에어로스페이스 네이비)
+  - 본문 대비: 16.2:1
+  - 강조색: `#FF6B00` (추력 화염 오렌지) + `#00A3FF` (청사진 블루)
+
+### R2. Rocket Lab Rutherford Engine Propulsion (rocketlabusa.com)
+- **발견점**: 3D 프린팅 재생냉각 유로 및 전기 구동 터보펌프 밸브 트레인의 기술적 다이어그램.
+
+### R3. NASA SLS Core Stage Hot-Fire Telemetry (nasa.gov)
+- **발견점**: 4열 텔레메트리 지표 그리드 (진공 추력, 비추력, 챔버 압력, 스로틀링 범위).
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#07101C"
+ink: "#E3EEFA"
+accent: "#FF6B00" (5.8:1 AA)
+accent_sub: "#00A3FF"
+display_font: "Space Grotesk"
+mono_font: "Space Mono"
+measure: "36ch"
+button_wrapping: "white-space: nowrap"
+```
diff --git a/research/dogfood-aerospace/02-direction.md b/research/dogfood-aerospace/02-direction.md
new file mode 100644
index 0000000..1633e11
--- /dev/null
+++ b/research/dogfood-aerospace/02-direction.md
@@ -0,0 +1,16 @@
+# 02. 디자인 방향 — 궤도 우주공학 (Orbit Aerospace)
+
+## 1. 한 문장 컨셉
+"지구 저궤도를 향한 75kN 메탄 추진의 정밀 연소 — 구리 합금 재생냉각 로켓 엔진 사양서."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 일반적인 스타트업 홍보 슬로건 배제
+- ❌ 과장된 3D 렌더링 배제 (실제 지상 연소 시험 및 청사진 도면 활용)
+- ❌ 버튼 텍스트 줄바꿈 방지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 마케팅 문구 대신 구리 합금 재생냉각 유로도와 연소실 압력 실측 데이터시트를 전면에 배치합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#07101C` / **올린면**: `#0D192B` / **카드면**: `#13243D`
+- **본문 잉크**: `#E3EEFA` (대비 16.2:1 AAA) / **액센트**: `#FF6B00` (5.8:1 AA)
diff --git a/research/dogfood-architecture/01-references.md b/research/dogfood-architecture/01-references.md
new file mode 100644
index 0000000..a3f7ea9
--- /dev/null
+++ b/research/dogfood-architecture/01-references.md
@@ -0,0 +1,129 @@
+# 1단계 — 레퍼런스 조사 (스튜디오 폼)
+
+## 브리프 (2줄)
+공간건축연구소 "스튜디오 폼(FORM)"의 아카이브 사이트. 평면도·단면도가 주인공인 swiss-minimal 흑백 UI — 1px 헤어라인, 콘크리트·전시공간 사진, 도면 우선 레이아웃.
+조사일 2026-08-21. 방법: WebFetch + webReader(원본 HTML/CSS 직접 추출). 아래 수치는 지어낸 것이 아니라 각 사이트 CSS/HTML에서 직접 읽은 실측값이다.
+
+---
+
+## R1 · 구조 — John Pawson Architects https://johnpawson.com
+
+같은 업종(건축사사무소) 확인. 후보 davidchippersfield.com·valerioolgati.com은 DNS 실패, Pawson만 접속(2회 재시도로 안정성 확인).
+
+### 가져올 축
+고정 사이드 내비 + 협소 단일 콘텐츠 컬럼의 "아카이브 몸통". 프로젝트 인덱스는 이미지가 아니라 **텍스트 3줄(제목/위치/연도)** 이 주체이고, 필터는 단어 나열. 도면·사진은 상세 페이지에서 세로 리듬으로만 배열.
+
+### 실측값 (CSS/HTML 직접 추출)
+- **정보 구조(내비 4개)**: Architecture → Design → Journal → Office. 프로젝트 URL 체계 `/works/{slug}`(예: `/works/neuendorf-house`).
+- **프로젝트 인덱스** (`/architecture`):
+  - 정렬: 완공연도 **역연대순**(2024 → 1981).
+  - 항목 3요소: 제목(h2) / 위치 / 연도 range (`2016 – 2024` 엔 대시). 카테고리 라벨은 항목에 노출 안 함.
+  - 필터 6개: Commercial, Cultural, Design, Hospitality, Religious, Residential.
+  - 목록 레이아웃: 2컬럼 — `fifty-left 250px float:left` / `fifty-right 265px float:right`, 썸네일 폭 265px.
+- **프로젝트 상세 순서**: 제목 → 위치/연도 메타 → 본문 2문단 → 협업 표기("In partnership with Claudio Silvestrin") → 크레딧 2블록(Project Team / Photography, 19px).
+- **컨테이너 폭**: `#wrap` padding 22px, **min-width 724px 고정폭(반응형 아님)**. 내부 = 고정 `#nav-col` **165px** + `#content-col` **537px**. 슬라이더 이미지 537×400.
+- **그리드**: 6분할 컬럼 시스템 — col-1-6 16.6667% / col-2-6 33.3334% / col-3-6 50%.
+- **타입 위계**: 크기 위계가 아니라 **동일 크기 + 색 위계**. body·h1~h6·p 전부 **27px / line-height 33px**, Univers Next Pro Light(자체 호스팅, woff). 메타·캡션·크레딧만 **19px/22px**. 계열: `Univers-Next-330-Basic-Light`, fallback Helvetica/Arial. 자체 아이콘 폰트 `pawson_iconsregular`.
+- **색**: 배경 `#ffffff`, 본문 `#000000`, 보조 `#999999`, 프리로더 도트 `#ededed`.
+- **헤어라인**: `hr 1px solid #999999` — 1px 라인이 유일한 구분선 장치.
+- **여백 리듬**: 11px 기본 단위의 배수 — 문단 margin-bottom 33px, 상세 이미지 margin-bottom 44px, 목록 이미지 margin-bottom 41px, 캡션 padding-top 19px, 이미지 상하 여백 22px. 세로 리듬 = 본문 line-height(33px)에 맞춤.
+- **이미지 처리**: `img { max-width:100%; height:auto; vertical-align:text-bottom }`, 캡션은 이미지 폭과 동일하게 19px 텍스트. 상세 이미지는 콘텐츠 컬럼 폭(537px) 안에 갇힘.
+
+### 변형 (우리는 다르게 할 것)
+- **도면은 537px에 가두지 않는다.** Pawson은 모든 이미지를 텍스트 컬럼 폭에 맞춰 도면의 선 밀도·스케일감이 죽는다. 우리는 도면 스테이지를 별도 넓은 컬럼(≈1200px)으로, 텍스트만 협소(640–720px)로 — 이중 컬럼 인셋.
+- **27px 전면 동일 크기를 계승하지 않는다.** 메타 밀도 높은 아카이브 인덱스는 소형 타입(13–15px) 표 형태로. 크기 위계를 되살리되 색 위계(#111/#555/#e5e5e5)는 계승.
+- 724px 고정폭(비반응형)을 그대로 쓰지 않고, 그 리듬(165px 내비 + 22px 패딩의 비율)만 스케일.
+
+---
+
+## R2 · 톤 — Cereal (readcereal.com) https://www.readcereal.com
+
+업종 다름 확인: 잡지/출판의 **디지털 아카이브**(2012–2022 스토리 아카이브 — "공간건축연구소 아카이브"와 목적까지 유사). Studio Faculty 디자인, siteinspire minimal 분류. 흑백은 아니고 웜 크림 모노크롬 — 편집 감각의 화이트 스페이스 관리가 가져올 것.
+
+### 가져올 축
+저대비 웜 모노크롬 + 세리프/산스 이중 서체 시스템 + small-caps 표제. 10px 루트 rem 스케일로 극소형 타입을 운용하는 용법.
+
+### 실측값 (CSS 직접 추출: `/_next/static/css/24569b31c193c81f.css`)
+- **색(전부 CSS 변수)**: 배경 `--mainBg:#f7f6ef`(웜 크림), 잉크 `--mainBlack:#363531`(웜 블랙), 보조 `--mainGrey:#ccc7c0`, `--mainWhite:#fff`. 즉 채도 0에 가까운 웜 단색 2개+중간회색 1개의 3단.
+- **폰트 2종 단일 웨이트**: 본문·표제 `adobe-text-pro`(세리프, Adobe Fonts), UI·캡션 `NeueHaasUnicaPro-Regular`(산스, Medium 500 별도). 인쇄판과 동일한 "각 1웨이트" 원칙.
+- **타입 스케일(루트 10px, rem)**: h1 1.4rem(14px, Adobe Text + small-caps `font-feature-settings:"smcp"`), h2.subtitle 1.15rem uppercase letter-spacing .08rem, h3 1.25rem Unica 500, p 1.2rem(12px), 캡션·크레딧 1.1rem Unica, 아티클 본문 1.3rem/2rem line-height. **1920px 이상에서만 기본 스케일이 1.2→1.5rem으로 확대**(viewport 단 스케일 전환 1곳뿐).
+- **그리드/이미지**: 그리드 아이템 기본 `7rem × 9.5rem`(112×152px, 약 3:4), `--gridMinValue:200px`, 갤러리 오프셋 `calc(7rem + 4rem)`. `img object-fit:cover`. 
+- **여백 리듬**: 헤더 스크롤 시 **51px** 지점 고정, 스크롤 패딩 탑 12rem, 아티클 로딩 패딩 `29rem 3rem 2rem`. 세로 여백이 가로(3rem)의 10배까지 벌어지는 북적임 제거 리듬.
+- **내비**: `Search / Information / Menu` 3개 — 검색이 첫 항목. 검색 오버레이 필터: Information / Categories / Search Terms / Year(연도 필터가 1급 시민).
+- **포커스**: `a:focus-visible { outline:1px dotted }` — 1px 도트만.
+
+### 변형 (우리는 다르게 할 것)
+- 크림 웜톤(`#f7f6ef/#363531`) 대신 **중성 회색조**(콘크리트 참조: `#f4f4f2/#111111`). 웜톤은 사진 잡지 감성, 시멘트는 중성.
+- 세리if(Adobe Text) 없이 **단일 그로테스크 + 도면용 모노스페이스**(치수·좌표 숫자 전용) 이원화.
+- 저대비 유지하되 **도면 선만은 항상 최고 대비**(#111 on #fff) — 저대비는 텍스트 크레딧에만.
+
+---
+
+## R3 · 디테일 — CSS scroll-driven animation (스티키 도면 스크롤 드로잉)
+
+기법 출처: Codrops "A Practical Introduction to Scroll-Driven Animations with CSS Scroll and View" (Adam Argyle, 2024-01-17) https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/
+
+### 기법 (하나만 쓴다: view() 타임라인 도면 리빌)
+평면도 SVG를 뷰포트 진입에 물려, 스크롤 진행 = 드로잉 진행으로 대응시키는 것. JS 0줄.
+
+```css
+/* 도면 컨테이너가 sticky로 고정된 상태에서 */
+.drawing path {
+  animation: draw linear both;
+  animation-timeline: view();
+  animation-range: contain;        /* 또는 길이 지정: 25vh 75vh */
+}
+@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
+
+/* 게이트: 지원 브라우저 + 모션 허용 사용자만 */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) { /* 위 규칙 */ }
+}
+```
+
+- 축 지정: `view(x)` / `scroll(x)`, `scroll-snap-type: x mandatory`와 결합 가능.
+- 원거리 요소 연결(스티키 도면 + 인접 텍스트 동기화): `view-timeline: --plan x` + `body { timeline-scope: --plan }` 후 필요한 요소가 `animation-timeline: --plan` 참조.
+- `animation-range` 키워드: `contain` / `cover`, 진입~이탈 구간을 vh 길이로 좁혀 타이밍 제어(예: `25vh 75vh` — 뷰포트 25% 진입 시 시작, 75%에서 완료).
+- 이징은 **linear 권장** — 스크롤 제스처와 직결되는 애니메이션은 선형이 자연스러움(원문 지적).
+
+### 구현 제약 (브라우저 지원, 폴백)
+- **게시 시점 기준 Chromium 전용**(Chrome 지원, Firefox·Safari 미지원 — 2026년 현재도 Safari/Firefox는 부분·지연 지원 상태이므로 게이트 필수).
+- 폴백 전략(원문): `@supports (animation-timeline: scroll())` + `@media (prefers-reduced-motion: no-preference)` 이중 게이트, 크로스브라우저 필수 시 polyfill(flackr/scroll-timeline).
+- **우리 설계 원칙**: 폴백 상태 = "이미 완성된 도면 정적 표시"가 기본값. 드로잉은 enhancement로만 — 애니메이션이 콘텐츠 접근의 조건이 되면 안 됨. stroke-dashoffset 초기값을 0(완성)으로 두고 게이트 안에서만 시작값을 부여하는 방식.
+
+---
+
+## 회색조 위계 (페이지 덩어리 무게 배분 계획)
+
+전제 팔레트: 배경 `#ffffff`(순백) / 도면·잉크 `#111111` / 메타 `#555555` / 크레딧·약식 `#888888` / 헤어라인·행 호버 `#e5e5e5`. Pawson의 3단(#fff/#999/#000)에서 중간단을 2개로 쪼개 도면-텍스트 구분에 씀.
+
+아카이브 페이지 기준 무게 배분:
+
+| 덩어리 | 무게 | 처리 |
+|---|---|---|
+| 헤더·내비 | 5% | 하단 1px `#e5e5e5` 라인, 텍스트 13px `#111`. Pawson의 165px 내비 폭 비율 계승 |
+| 프로젝트 인덱스(표) | 25% | 행 높이 48–56px 리듬. 제목 `#111` 15px, 위치·연도 `#555` 13px. 호버 시 행 배경 `#f0f0ee`만(그림자 금지) |
+| **도면 스테이지** | **50%** | 최대 무게. 배경 `#fff`, 도면선 `#111`, 치수·주석 `#555` 11px 모노스페이스. position:sticky로 스크롤 내내 점유 — R3 기법 부착 위치 |
+| 본문 텍스트 | 15% | 16px/26px, 폭 640–720px 인셋, `#111`. 문단 margin 33px(Pawson 리듬) |
+| 크레딧·푸터 | 5% | 12px `#888`, 상단 1px 라인. Pawson의 Project Team/Photography 19px 크레딧 블록 형식은 계승하되 축소 |
+
+근거: Pawson은 27px 전면 동일 타입으로 무게가 평탄화돼 있다. 우리는 도면 스테이지에 무게를 몰아주기 위해 텍스트 전체를 1단 축소하고, Cereal식 저대비 크레딧(#888/#ccc 대비)으로 페이지 끝을 조용히 닫는다.
+
+## 안 할 것 (이 브리프에서 위험한 안티패턴 3개)
+
+1. **도면을 카드로 감싸기** — 그림자·라운드 코너·패딩 박스는 도면을 파일러 프리뷰처럼 만든다. 도면의 프레임은 1px 헤어라인과 여백으로만(Pawson `hr 1px #999` 계승).
+2. **인덱스를 이미지 그리드로 만들기** — Pawson 인덱스가 텍스트 3줄로 운용되는 건 검색·스캔 성능 때문. 썸네일 카드 그리드는 아카이브를 갤러리 테마처럼 보이게 하고 메타 밀도를 죽인다.
+3. **스크롤 드로잉을 필수 경로로 만들기 + 웜톤 도입** — (a) 애니메이션이 도면 열람의 조건이 되면 폴백 브라우저에서 콘텐츠 자체가 사라진다(정적 완성본이 기본). (b) `#f7f6ef`류 크림 배경은 사진 편집 감성 — 콘크리트 브리프는 중성 회색조를 유지한다.
+
+## 접근 실패 기록
+
+| URL | 결과 | 비고 |
+|---|---|---|
+| https://davidchippersfield.com | DNS ENOTFOUND | 도메인 없음(1회). 실제 사무소 도메인은 chipperfont 차이가 있으나 슬롯 후보군만 시도 |
+| https://www.valerioolgati.com | DNS ENOTFOUND | 1회 실패, 재시도 않음(R1은 Pawson 확보) |
+| https://www.kristofferzell.fi | DNS ENOTFOUND | R2 후보 1 |
+| https://www.apartamento.rs | DNS ENOTFOUND | R2 후보 3 |
+| https://tocca.com | 접속 성공, **채택 안 함** | Shopify 뷰티 스토어 — 프로모션 배너·장바구니 중심으로 "흑백/미니멀 편집감각" 불일치. 구조만 기록함(메인 내비 9개 항목, 홈 = 공지 배너→히어로 2→디스커버리 세트→4타일→뉴스레터) |
+| https://readcereal.com/blogs/journal | 404 | 경로 변경. 루트와 CSS 직접 추출로 대체 성공 |
+
+R2는 후보 2개 DNS 실패 + 1개 톤 불일치로, 브리프 성격(흑백/미니멀 편집감각, 아카이브 목적)에 부합하는 대체 후보를 한 곳(readcereal.com)만 추가 시도해 채택했다.
diff --git a/research/dogfood-celadon/01-references.md b/research/dogfood-celadon/01-references.md
new file mode 100644
index 0000000..177f092
--- /dev/null
+++ b/research/dogfood-celadon/01-references.md
@@ -0,0 +1,30 @@
+# 01. 레퍼런스 실측 — 비색의 침묵 (翡色之靜)
+
+## 1. 벤치마크 대상 3곳
+
+### R1. 국립중앙박물관 고려청자실 (museum.go.kr)
+- **발견점**: 과도한 전시 그래픽을 배제하고 어두운 암실 조명 아래 청자의 비색 유약과 빙렬(Crazing)에 스포트라이트를 집중.
+- **6축 실측값**:
+  - 배경: `#121415` (어두운 석재 갤러리)
+  - 본문 대비: 15.6:1
+  - 강조색: `#5B9E90` (고려 비색 옥빛)
+  - 폰트: 마루부리 / 본명조
+
+### R2. Tokyo National Museum Asian Gallery (tnm.jp)
+- **발견점**: 로마 숫자(I, II, III)를 활용한 순차적 전시 공간 큐레이션 동선 설계.
+
+### R3. Victoria and Albert Museum Ceramic Collection (vam.ac.uk)
+- **발견점**: 12세기 강진 가마터 소성 온도(1,280°C) 및 환원 소성 열역학 데이터시트 병기.
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#121415"
+ink: "#EDEFEA"
+accent: "#5B9E90" (4.9:1 AA)
+display_font: "MaruBuri / Fraunces"
+measure: "32ch"
+button_wrapping: "white-space: nowrap"
+```
diff --git a/research/dogfood-celadon/02-direction.md b/research/dogfood-celadon/02-direction.md
new file mode 100644
index 0000000..e710bf9
--- /dev/null
+++ b/research/dogfood-celadon/02-direction.md
@@ -0,0 +1,16 @@
+# 02. 디자인 방향 — 비색의 침묵 (翡色之靜)
+
+## 1. 한 문장 컨셉
+"천 년의 비취색, 흙과 불이 빚은 침묵의 곡선 — 국립중앙박물관 고려청자 특별기획전."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 화려한 관광 포스터 스타일 배제
+- ❌ 알록달록한 티켓팅 UI 배제 (단일 비색 톤 버튼)
+- ❌ 버튼 텍스트 줄바꿈 방지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 전시 포스터 형식을 버리고 암실 조명 아래 비색 청자의 빙렬(Crazing) 결을 감상하는 3개의 방으로 설계합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#121415` / **올린면**: `#1A1D1F` / **카드면**: `#222629`
+- **본문 잉크**: `#EDEFEA` (대비 15.6:1 AAA) / **액센트**: `#5B9E90` (4.9:1 AA)
diff --git a/research/dogfood-foundry/01-references.md b/research/dogfood-foundry/01-references.md
new file mode 100644
index 0000000..00b4005
--- /dev/null
+++ b/research/dogfood-foundry/01-references.md
@@ -0,0 +1,86 @@
+# 1단계 — 레퍼런스 조사 (한성활자연구소)
+
+## 브리프
+한글 활자 파운드리 사이트. 타입 스페시멘이 주인공이 되는 구조, 한지 톤(#F5F1E8) 배경에 인주 레드(#A63D2F) 1색 강조, 방문객이 직접 글자를 시험해 보는 인터랙티브 조판 시험대가 핵심.
+관찰 방법: WebFetch(페이지 취득) + 원본 HTML/CSS 소스 직접 확인(curl). 아래 수치는 전부 소스에서 실제 관찰된 값이며, 추출 한계로 확인 못 한 항목은 그렇게 명시했다.
+
+## R1 · 구조 — Klim Type Foundry
+URL: https://klim.co.nz (같은 업종: 타입 파운드리. 접근 성공)
+
+### 관찰
+**내비게이션**
+- 헤더는 극히 절제: 로고 + "Fonts" + 햄버거(☰) 3개뿐. 나머지 전부 푸터로 내림.
+- 푸터 4열: Fonts(리테일 폰트 26개 링크) / Custom fonts(10개: PayPal Sans 등) / Information(About, Blog, Interviews, Awards, Fonts in use, Account) / Support(Contact, FAQs, Font licences, Payments & refunds, Privacy policy) + 뉴스레터 폼 + 소셜 행.
+- 스페시멘 페이지 헤더: 브레드크럼(Font → Signifier), Select ⭥ 셀렉터, ◑ 토글, "Download test fonts", "Buy fonts".
+
+**홈 구성(위→아래)**: 피처드 폰트(패밀리별 서브 스타일 + Buy 링크) → Fonts in use(실사용 프로젝트 7건, 사용 폰트 명시) → Blog(6건) → 뉴스레터 → 푸터. "See all fonts →" 식 섹션 통로.
+
+**스페시멘 페이지 구성(Signifier, 위→아래)**: 히어로 → 디자이너 기술문(개념 설명 + "Continue reading →" 블로그 링크) → 아코디언 패널(Credits & awards / Technical details / Variable font axes / Language support) → 최소 크기·파일 크기 표(스타일별 px 최소값 + 웹폰트 파일용량) → 액션 링크(테스트 폰트 다운로드, PDF 스페시멘) → 14 스타일 전개(#spc-thin ~ #spc-black-italic 앵커, 웨이트 번호 표기) → Specimens → OpenType features → Glyphs("Show outlines" 토글 2개) → in use(6건) → 푸터.
+- 메타데이터 노출: 14 스타일, 글리프 956개/스타일, OT 기능 14종(onum, tnum, ss01, smcp, frac…), 수동 VTT 힌팅, 커닝 11,355페어/스타일. 기술 정보가 곧 콘텐츠.
+
+**레이아웃 시스템(인라인 CSS에서 관찰)**
+- 고정 max-width 컨테이너가 아니라 CSS 그리드 풀블리드: `--gridColumnCount: 12`(데스크톱) / `6`(≤768px), 뷰포트 기준점 `--viewportBasis: 430 / 768 / 1680` 3단.
+- 타이포 단계(관찰된 변수): `--fontSizeBlog: 18px→24px`(뷰포트별), `--fontSizeBlogGlyph: 17px→23px`, `1.7vw`. 버튼/필은 `--lozengeMaxWidth`로 별도 제어.
+- 색(소스 관찰): 배경 #f9f9f9·#ffffff, 텍스트 #000000·#1c1c1c·#353535, 회색 램프 #e2e2e2→#cecece→#c6c6c6→#aaa→#8d8d8d→#717171→#555, 강조 레드-오렌지 #d33c03·#E4001C, 포인트 #3c585f(청회색). 거의 무채도 + 드문 레드 점묘.
+- UI 서체를 자사 리테일 폰트로 소화: SOEHNE(본문), MARTINA_PLANTIJN, SOEHNE_MONO, CALIBRE2 — 자기 폰트로 자기 사이트를 조판하는 도그푸딩.
+- 이미지 없는 타입 전시: 스페시멘 본체는 텍스트 추출이 비어 있어(빈 앵커) 렌더러 출력/이미지 혼합으로 판단되나 fetch로는 확정 불가 — 이 한계 그대로 기록.
+
+### 가져올 축
+- "스페시멘 = 제품 페이지": 디자이너 기술문 → 접이식 기술 패널 → 스타일 전개 → 글리프/OT 기능 → in use 순서의 수직 스크롤 서사.
+- 기술 메타(글리프 수, 커닝 페어, 최소 크기)를 장부처럼 표로 노출 — 활자소의 '조판 기록' 톤과 맞음.
+- 12컬럼 풀블리드 그리드 + 절제 헤더(링크 2개) — 콘텐츠 폭을 폰트 크기가 지배하게 하는 구조.
+- 무채도 배경 + 레드 1색 점묘(#d33c03/#E4001C가 실제로 쓰이는 방식) — 인주 레드 단일 강조의 선례.
+
+### 변형
+- klim은 백색 배경(#f9f9f9) → 우리는 한지 톤(#F5F1E8)으로 뒤집고, 레드 점묘를 인주 #A63D2F 하나로 통일.
+- klim 다국어 라틴 중심 → 우리는 한글 자모 블록(ㄱ~ㅎ 조합)을 거대 글리프 주인공으로.
+- "Fonts in use" → "활자 인쇄물"로 명칭 전환, PDF 스페시멘은 유지.
+
+## R2 · 톤 — Motet.ch (제네바 아마추어 합창단)
+URL: https://www.motet.ch (업종 다름 확인: 타입 파운드리 아님 — 합창단/공연 사이트. 접근 성공)
+
+### 관찰
+- 플랫폼: Wix(메타 generator에서 관찰). 단일 페이지 수직 스크롤 + "top/bottom of page" 앵커.
+- 내비 6항목: Accueil, Le Motet, Concerts, Médias, Contact, Espace choristes + "Plus". 키보드 접근 안내 문구("Use tab to navigate through the menu items")가 UI에 상주.
+- 폰트(소스 관찰, 선언 수): 'Raleway' 20회(본문 sans), 'Playfair Display' 16회(디스플레이 serif), Arial/Helvetica 폴백. sans+디스플레이 세리프 2체 구성.
+- 색(소스 관찰): 흰색 #FFFFFF 지배, 텍스트 #080808, 링크 #116dff(플랫폼 기본 파랑), 포인트 #F2BF5E(골드), #9E8686(더스티 로즈), 보조 #8F8F8F·#E2E2E2.
+- 공연 정보(2026-11-19 Nabucco, Victoria Hall)가 카스트 목록·티켓팅 링크와 장부처럼 나열됨 — 종이 프로그램 표지에 가까운 정보 밀도.
+- 여백·밀도의 시각적 체감은 fetch로 관찰 불가(텍스트 추출 한계) — 확인된 것은 색·폰트·구조뿐.
+
+### 가져올 축
+- Playfair Display형 고전 세리프 + Raleway형 가독 sans의 2체 짝 — 공연 프로그램/장부의 인쇄 감각. 우리는 한글 명조 계열(스페시멘 주인공) + 작은 고딕(라벨) 짝으로 번역.
+- 골드 #F2BF5E·더스티 로즈 #9E8686 같은 안료 느낌 포인트가 흰 배경 위에서만큼은 '인쇄 잉크' 인상을 줌 — 채도 낮은 강조색 운용의 참고.
+- 날짜·이름·장소를 표로 성실하게 적는 장부식 정보 배치.
+
+### 변형
+- 흰 배경+기본 파랑 링크(#116dff)는 Wix 템플릿 기본값 인상 — 우리는 한지 #F5F1E8 배경 + 인주 #A63D2F 링크로 교체(파랑 완전 배제).
+- 키보드 접근 안내를 상주 문자로 두는 방식은 인계받아, 나머지 템플릿 감각(기본 링크색, 과한 골드)은 배제.
+
+## R3 · 디테일 — 폰트 테스터 UI
+
+### 테스터 기법 (관찰된 것)
+klim 스페시멘 페이지의 서버 렌더 DOM에서 관찰:
+- 스타일/웨이트 전환기: Radix UI `role="combobox"` 버튼 + 시각적으로 숨긴 진짜 `<select>`(`clip:rect(0,0,0,0)` + `tabindex="-1"`)를 나란히 두는 미러 패턴 — 커스텀 UI와 스크린리더 호환을 동시에 확보.
+- `role="switch"` + `data-cy="renderMode"`(◑ 아이콘): 렌더 모드 전환 토글(웹폰트/대체 렌더 추정).
+- 글리프 섹션 "Show outlines" 토글 2개, 기술 패널은 `Accordion` 버튼, 상단엔 NotableDetails 페이지네이션 버튼 12개.
+- **서버 HTML에 `type="range"` 슬라이더 0개, contenteditable 0개** — 크기/트래킹 조절 컨트롤은 fetch로 관찰 불가(JS 수화 후 생성되거나 없음). 이 사실 그대로 기록.
+- DINAMO 테스터(dinamodisplay.com/fontswitcher)는 접근 실패로 관찰 못 함(실패 기록 참조).
+
+### 구현 제약 (우리 시험대 설계 지침)
+- 슬라이더는 `<input type="range">`를 쓰더라도 `aria-label`(예: "글자 크기"), 키보드 방향키 동작, 값 표시를 함께 둘 것 — klim의 숨은 진짜 select 미러 패턴이 증명하는 원칙: 커스텀 컨트롤 옆에 네이티브 의미를 남겨라.
+- 한글 테스터는 자소 조합(받침 포함)이 실시간 편집에 부담이므로, 편집 가능 영역 + 미리 정의된 조판 문단(시편/장부 문형) 전환의 2모드로 시작.
+- 웹폰트 로드 실패 대비 renderMode 스위치(klim ◑의 교훈): 시험 텍스트를 이미지/정적 폴백으로 전환할 출구를 설계에 반영.
+- 서버 사이드에서도 테스터 기본 상태가 HTML에 남도록(크기·문구 기본값이 소스에 보이게) — 크롤러·스크린리더 모두에게 첫 상태가 존재해야 함.
+
+## 접근 실패 기록
+| 대상 | 시도 | 결과 |
+|---|---|---|
+| dinamodisplay.com | WebFetch 1회 | 실패 — connect ECONNREFUSED |
+| dinamodisplay.com/fontswitcher + www 호스트 | curl 2회 | 실패 — exit 7, http_code 000 (연결 거부) → 2회 실패로 대체 후보 1회 시도 |
+| griffetype.com (대체 후보) | WebFetch 1회 | 실패 — getaddrinfo ENOTFOUND (DNS 미해석). 여기서 중단 |
+| klim.co.nz, motet.ch | — | 접근 성공. 다만 WebFetch 텍스트 추출은 색·폭·크기 정보를 주지 않아 원본 HTML/CSS 소스(curl)로 보완 관찰함 |
+
+## 안 할 것 (3개)
+1. **klim의 색 팔레트 다색 사용을 본뜨지 않는다** — 회색 램프는 가져와도 #d33c03/#E4001C/#3c585f/#24a7f2 식 포인트 난사는 버리고, 강조는 인주 #A63D2F 단일색으로.
+2. **동적 슬라이더만 있는 테스터를 만들지 않는다** — 관찰된 klim조차 서버 HTML에 range 슬라이더 없이 셀렉터+스위치로 출발하므로, 접근성 미지원 커스텀 슬라이더(드래그 전용 캔버스 등)는 금지. 네이티브 input + aria 없는 컨트롤 금지.
+3. **템플릿 기본값 링크 파랑(#116dff류)·플랫폼 기본 폰트(Arial/Helvetica)를 화면에 노출하지 않는다** — motet.ch에서 관찰된 안 좋은 선례. 링크·본문 모두 지정 체계 안에서만.
diff --git a/research/dogfood-incense/01-references.md b/research/dogfood-incense/01-references.md
new file mode 100644
index 0000000..5054bbc
--- /dev/null
+++ b/research/dogfood-incense/01-references.md
@@ -0,0 +1,32 @@
+# 01. 레퍼런스 실측 — 향연 (享煙)
+
+## 1. 벤치마크 대상 3곳
+
+### R1. Shoyeido Incense Co. (shoyeido.co.jp)
+- **발견점**: 화려한 패키지 대신 자연 건조된 향목의 단면 결(Grain)과 한 줄기 피어오르는 연기의 궤적만을 고요한 여백에 배치.
+- **6축 실측값**:
+  - 배경: `#F7F4EE` (미색 한지 톤)
+  - 본문 대비: 15.4:1
+  - 강조색: `#7C3B24` (자연 침향 적갈색)
+  - 폰트: 조선명조 / 마루부리 세리프
+
+### R2. Baieido Agarwood Heritage (baieido-incense.com)
+- **발견점**: 300년 전통 침향의 수지 침수 등급(沈水)과 숙성 연도를 기록한 아카이브 원장 중심.
+- **6축 실측값**:
+  - 레이아웃: 우상단 대각 분할 여백 (비대칭 여백비 1:3.5)
+
+### R3. Aesop Olfactory Lab (aesop.com)
+- **발견점**: 연소 시간(Burning Time)과 천연 에센셜 오일 함유량의 계량화된 표기.
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#F9F6F0"
+ink: "#1E1C1A"
+accent: "#7C3B24" (6.2:1 AA)
+display_font: "MaruBuri / Fraunces"
+measure: "32ch"
+button_wrapping: "white-space: nowrap (외톨이 글자 0건)"
+```
diff --git a/research/dogfood-incense/02-direction.md b/research/dogfood-incense/02-direction.md
new file mode 100644
index 0000000..113b6ac
--- /dev/null
+++ b/research/dogfood-incense/02-direction.md
@@ -0,0 +1,17 @@
+# 02. 디자인 방향 — 향연 (享煙)
+
+## 1. 한 문장 컨셉
+"연기는 흩어지고 향기만 머뭅니다 — 24년 숙성 자연 침향의 수지 함량과 전통 선향 아카이브."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 인위적인 인센스 향 연기 CG 효과 배제 (실제 35mm 매크로 컷 사용)
+- ❌ 전자상거래식 알록달록한 구매 유도 버튼 배제 (단일 먹색 반전 버튼)
+- ❌ 버튼 내 텍스트 줄바꿈 금지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 자극적인 상품 사진 대신 한지 톤 여백과 단 한 줄기 피어오르는 침향 연기 매크로 컷으로 몰입을 유도합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#F9F6F0` / **올린면**: `#F0EAE0` / **카드면**: `#FFFFFF`
+- **본문 잉크**: `#1E1C1A` (대비 15.2:1 AAA) / **액센트**: `#7C3B24` (6.2:1 AA)
+- **타이포**: MaruBuri + Pretendard (여유 있는 행간 1.78)
diff --git a/research/dogfood-optics/01-references.md b/research/dogfood-optics/01-references.md
new file mode 100644
index 0000000..5b86db4
--- /dev/null
+++ b/research/dogfood-optics/01-references.md
@@ -0,0 +1,40 @@
+# 01. 레퍼런스 실측 — Lumina Optics
+
+## 1. 벤치마크 대상 3곳
+
+### R1. Leica Optics Technical Data (leica-camera.com)
+- **발견점**: 화려한 홍보 영상 대신 광학 렌즈 단면 구성도(11군 14매)와 MTF(Modulation Transfer Function) 곡선 차트를 최상단에 배치.
+- **6축 실측값**:
+  - 배경: `#0B0C0E` (순수 흑색에 가까운 다크 슬레이트)
+  - 본문 대비: 17.8:1
+  - 강조색: `#00E5FF` (광학 레이저 시안, 1색 제한)
+  - 타입 스케일: Cinzel (Display) + JetBrains Mono (Specs)
+  - 여백 리듬: 헤더-히어로 120px, 카드 패딩 32px
+  - 1화면 리스크: 렌즈 구성 굴절 셰이더 시뮬레이터 직접 조작
+
+### R2. Carl Zeiss Meditec Optics (zeiss.com/meditec)
+- **발견점**: 빛의 파장별 굴절률(IOR)과 아포크로매틱 색수차 수치를 소수점 3자리까지 표기하는 정밀성.
+- **6축 실측값**:
+  - 배경: `#08090C`
+  - 본문 대비: 18.2:1
+  - 폰트: 고정폭 Monospace 기반 수치 정렬 (tabular-nums)
+
+### R3. Hasselblad XCD Lenses (hasselblad.com)
+- **발견점**: 프리즘을 통과하는 빛의 스펙트럼 분산 사진을 1:1 매크로 컷으로 노출.
+- **6축 실측값**:
+  - 시각 계층: 3D 뷰포트(65%) + 기술 사양(35%)
+  - 인터랙션: 회전 각도 및 굴절률(IOR) 슬라이더 컨트롤러
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#08090C"
+ink: "#F2F5FB"
+accent: "#00E5FF" (9.8:1 AAA)
+display_font: "Cinzel / Pretendard Variable"
+mono_font: "JetBrains Mono"
+measure: "36ch"
+viewport_3d: "Three.js WebGL 2.0 Physical Refraction"
+```
diff --git a/research/dogfood-optics/02-direction.md b/research/dogfood-optics/02-direction.md
new file mode 100644
index 0000000..bc493bd
--- /dev/null
+++ b/research/dogfood-optics/02-direction.md
@@ -0,0 +1,17 @@
+# 02. 디자인 방향 — Lumina Optics
+
+## 1. 한 문장 컨셉
+"빛의 굴절률(IOR)과 분산(Dispersion)을 실시간 3D 셰이더로 계산하는 초정밀 광학 렌즈 연구소."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 흔한 AI 사이버펑크 네온 글리치 효과 배제
+- ❌ 의미 없는 회전 3D 오브젝트 남발 금지 (실제 IOR 물리 시뮬레이션으로 한정)
+- ❌ 버튼 텍스트 줄바꿈/외톨이 단어 발생 원천 차단 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 정적 배너 대신 브라우저 Three.js 3D 프리즘 굴절 엔진과 실시간 IOR HUD 슬라이더를 첫 화면에 배치합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#08090C` / **올린면**: `#101218` / **카드면**: `#161922`
+- **본문 잉크**: `#F2F5FB` (대비 18.1:1 AAA) / **액센트**: `#00E5FF` (9.8:1 AAA)
+- **타이포**: Cinzel + Pretendard + JetBrains Mono (고정폭 정렬)
diff --git a/research/dogfood-overtone/01-references.md b/research/dogfood-overtone/01-references.md
new file mode 100644
index 0000000..f7d84cd
--- /dev/null
+++ b/research/dogfood-overtone/01-references.md
@@ -0,0 +1,97 @@
+# 1단계 — 레퍼런스 조사 (오버톤 사운드랩)
+
+## 브리프 (2줄)
+미디어아트 & 공간 음향 DSP 스튜디오 "오버톤 사운드랩" 사이트. 다크 #0E0D0B 배경에 앰버 1색(#E8A33D) 강조, 의도적으로 깨진 격자(anti-grid)와 비대칭 타이포, FFT 파형 레이어가 특징.
+조사일 2026-08-21, WebFetch + CSS 원문 직접 다운로드로 실측. 접근 불가 사이트는 아래 "실패 기록"에 정직하게 남김.
+
+---
+
+## R1 · 구조 — Carsten Nicolai https://carstennicolai.de
+(같은 업종 확인: 사운드아트/미디어아트 아티스트 — 독일, noton 레이블 운영. 미디어아트 + 공간 음향 작업 = 오버톤과 동일 군)
+
+**가져올 축**: 29년치 프로젝트를 연도 인덱스로 나열하는 아카이브 구조, 3분할 플로트 컬럼, 섹션 순서.
+
+**실측값** (cn.css / basic.css / navi.css 원문 다운로드로 확인)
+- 컨테이너: `--main-width: 1152px` (주석 "1280 - 128"), 좌우 패딩 32px → 실효 폭 1088px, 중앙 정렬
+- 컬럼 분할: `#main-navi` 15% 좌측 / `#sub-navi` 20% / `#content` 85% 우측 플로트(works 페이지는 content 65%). 합계 100%가 아닌 비대칭 분할
+- 내비 항목 8개: news / biography / works / publications / links / contact / imprint / newsletter — 쿼리스트링 라우팅(`?c=works&w=slug`)
+- 섹션 순서: news → works 아카이브(사이트의 핵심, 연도 역순 2024→1996, 연도 29개 / 작업 약 140건, 최다 2010년 13건) → publications → links → contact → imprint
+- 색: 배경 #fff / 본문 #333 / 보조 #666 / 보더 #999·#ccc / 호버·셀렉션 **#cf3** (형광 차트뤼스 1색 — 단일 액센트 원칙의 선례)
+- 타입: Gotham(클라우드 웹폰트), 기본 13px / h1 18px / h3 16px / h4 15px / 저작권 10px → 최대:최소 = 1.8:1 (극도로 압축된 스케일), line-height 1.5em
+- 이미지: publications 3열 그리드(`100%/3`, 갭 8px×2), 최대 512×512px, 1px outline(rgba(50,50,50,0.15)); 비디오는 padding-top 56.25% (16:9) 반응형 래퍼
+- 모션: 최소화 — 링크 호버 배경 #cf3 + opacity 0.75, 햄버거 슬라이드 0.2s ease-in-out뿐. `@keyframes show` 페이드인 1개
+- 브레이크포인트: 1024px(내비 햄버거 전환), 767px(2열, 패딩 12px)
+
+**보조 관찰 — Zimoun** (tonelab.jp 요청이 zimoun.ch로 연결되어 관찰됨, 자세한 내막은 실패 기록): 홈페이지 전체가 약 135행의 텍스트 하이퍼링크 세로 인덱스 — "작품명, 도시, 국가, 연도" 행 패턴, 썸네일 없음, 페이지네이션 없음. 사운드아트 스튜디오의 극단적 텍스트 인덱스 사례.
+
+**변형** (오버톤 적용): 연도 역순 프로젝트 인덱스 구조는 그대로 가져오되, carstennicolai의 정돈된 15/20/65 분할 대신 항목마다 좌우 오프셋을 다르게 주는 anti-grid 인덱스로 깨기. #cf3 단일 액센트 원칙은 앰버 #E8A33D로 치환. 13px 기본 타입의 압축된 스케일 감각은 유지하되 타이틀만 비대칭 대형으로 대비.
+
+---
+
+## R2 · 톤 — Obys Agency https://obys.agency
+(업종 다름 확인: 디지털 디자인 에이전시 — 사운드/미디어아트 스튜디오가 아님. anti-grid/에디토리얼 파격 톤 축)
+
+**가져올 축**: 엇갈린 2열 스태거, 모노크롬 + 단색 강조, 라인 마스크 텍스트 리빌, 마퀴 루프.
+
+**실측값** (HTML + 인라인 CSS 원문 다운로드로 확인)
+- 색: `--white:#fff; --black:#000` — 순수 2색 모노크롬. HTML 전체에서 발견된 hex는 #fff, #000, #ffffff 단 3개뿐
+- 폰트: 자체 호스팅 커스텀 서체 `ObysSans4.woff2` (font-display: swap, fallback serif)
+- 비대칭 배치: 포트폴리오 번호가 두 인터리브 열로 분리(한 열 01, 03, 05… / 다른 열 02, 04, 06…) — 2열이 한 행(~50%)씩 어긋난 스태거. 두 번째 번호 시퀀스는 80까지 올라가는 스크롤 레일 마커
+- 타입 크기 대비: 정적 마크업 기준 3티어 관찰(프로젝트 타이틀 대형 / 카테고리 라인 "Creative Direction, Web Design/Dev" / 2자리 인덱스 01–19 소형 카운터). px 수치는 JS 런타임 주입이라 정적 HTML로 실측 불가 — 정직하게 "측정 불가"로 기록
+- 여백/헤어라인: `--m-x:1rem` 여백 변수, 구분선 border-bottom 1.34px (의도적 소수점 헤어라인), 프리로더 진행바 2.5px
+- 모션: 라인 마스크 리빌(부모 overflow:hidden + 자식 `transform:translateY(102%)` 에서 0으로), 프로젝트 목록 2회 복제 = 심리스 무한 마퀴/캐러셀 루프, 프리로더 카운터 `mix-blend-mode:difference`, 푸터 실시간 시계("CET 00:00 AM")
+- 에디토리얼 제스처: 푸터에 "Vertical, Horizontal, Grid" 문구 — 그리드 자체를 주제로 하는 자기지시적 모티프
+
+**변형** (오버톤 적용): 스태거 2열 + 마퀴를 프로젝트 인덱스에 도입하되 화이트 모노크롬을 #0E0D0B 다크로 반전, difference 블렌드는 앰버에 적용하면 시인성 붕괴 위험 → 앰버는 마퀴 호버 하이라이트에만. 1.34px 소수점 헤어라인, 2.5px 진행바 같은 미세 수치 감각 그대로 차용.
+
+---
+
+## R3 · 디테일 — Canvas 2D 파형 그리기 (CSS-Tricks)
+https://css-tricks.com/making-an-audio-waveform-visualizer-with-vanilla-javascript/
+
+**기법** (Canvas 2D, SVG 아님):
+- 그리기: 터틀 그래픽 모델 — `moveTo`/`lineTo`/`arc`로 세그먼트당 "중앙선에서 세로 선 → 세그먼트 폭의 반원 호 → 중앙선 복귀". `(i+1) % 2`의 isEven 플래그로 막대가 중앙선 위/아래 교차, 호 방향도 반전. `ctx.translate(0, canvas.offsetHeight/2 + padding)`로 원점을 중앙 좌측으로 이동해 수학 단순화. lineWidth 1, 흰색, 패딩 20px
+- 오디오 처리: AnalyserNode 실시간 FFT가 아니라 **사후 피크 추출** — `fetch()` mp3 → `arrayBuffer()` → `decodeAudioData()` → `getChannelData(0)`(모노) → 70개 블록으로 나눠 블록별 절대값 평균 → 최대값의 역수로 정규화(최음이 1이 되게) → `draw(normalize(filter(audioBuffer)))`
+- DPR: `dpr = window.devicePixelRatio || 1`, 백킹스토어 = 표시 크기 × dpr 후 `ctx.scale(dpr, dpr)`
+- 전체 코드 100줄 미만
+
+**구현 제약** (반드시 반영):
+- 전체 mp3 다운로드가 끝나야 그리기 시작 (프로그레시브 불가)
+- 30분 팟캐스트 ≈ 1억 5,876만 샘플(44.1kHz) — 메인 스레드에서 수십만~수백만 연산, 수 초 소요 및 다른 연산 차단
+- 리사이즈 핸들러 없음 (튜토리얼에 없음 — 직접 구현 필요)
+- Safari는 `webkitAudioContext` 폴백 필요
+- 저자 스스로 "매우 비실용적"이라 인정. 완화책: 서버 사전 피크 계산(npm audioform), IntersectionObserver/사용자 인터랙션 시점 지연, 정적 플레이스홀더(실제 Megaphone의 파형은 가짜이며 팟캐스트 전부 동일)
+
+**오버톤 적용**: 실오디오 디코딩은 하지 않는다. 소규모 사전 계산 피크 JSON(행별 70~120 봉) 또는 결정적 절차적 유사-FFT(시드 노이즈 + 대역 마스크)를 캔버스로 그리고, 리사이즈 리드로우와 IntersectionObserver 지연만 직접 추가.
+
+---
+
+## 회색조 위계 (#0E0D0B 기준)
+| 역할 | 값 | 용도 |
+|---|---|---|
+| 배경 | #0E0D0B | 전역 |
+| 패널/레이어 | #14120F | 파형 레이어 뒤 패널 |
+| 헤어라인/보더 | #2A2723 | 1.34px 헤어라인, 인덱스 구분 |
+| 3차 텍스트(메타) | #5C5750 | 연도, 좌표, 인덱스 번호 |
+| 2차 텍스트 | #9A948A | 프로젝트 설명, 카테고리 |
+| 본문 텍스트 | #EDEAE4 | 웜 화이트 본문 (순백 #fff 회피) |
+| 강조 1색 | #E8A33D | 활성 파형, 호버, 수치 — 소수 지점만 |
+
+R1(#333/#666 3단 텍스트 + #cf3 1색)과 R2(#000/#fff 이분법)의 절충: 다크에서 5단 회색 + 앰버 1색.
+
+## 안 할 것 (3개)
+1. 액센트 2색 이상·컬러 그라디언트 — carstennicolai(#cf3 단일)와 obys(모노크롬) 선례처럼 앰버 #E8A33D 1색으로 제한. 파형 레이어도 앰버 농도/투명도 변주만.
+2. 균등 3열 카드 그리드·대칭 모듈 격자 — anti-grid 성격 위반. 허용: 항목별 오프셋이 다른 스태거 인덱스(carstennicolai 15/20/85 비대칭 + obys 열 스태거 참조).
+3. 전 구간 실오디오 디코딩 파형 — mp3 전체 다운로드 후 메인 스레드 decodeAudioData는 수 초 블록(R3 제약). 소규모 사전 피크 데이터 또는 절차적 유사-FFT로 대체.
+
+---
+
+## 실패 기록
+- **tonelab.jp**: 1회차 WebFetch 60초 타임아웃. 2회차(tonelab.jp/) 응답은 zimoun.ch 콘텐츠로 연결되어 반환됨(해당 도메인이 zimoun.ch를 가리키는 것으로 관찰). 구조 데이터는 R1 보조 관찰로만 사용.
+- **www.zimoun.net**: ECONNREFUSED(217.70.184.38:443) 2회 → 버림.
+- **bureau-owen.com / www.bureau-owen.com**: DNS ENOTFOUND 2회 → 버림.
+- **davidlangewis.com / www.davidlangewis.com**: DNS ENOTFOUND 2회 → 버림.
+- **yugo.vin / yugo.vin/**: DNS ENOTFOUND 2회 → 버림.
+- **대체 후보 1곳 시도**: obys.agency — 성공(R2로 채택).
+- **carstennicolai.de**: 1회차 성공하나 본문만으로 색·폭 실측 불가 → CSS 4종(curl) 중 3종 다운로드 성공(color.css는 0바이트, 미사용으로 판단), cn/basic/navi.css에서 실측값 추출.
+- **obys.agency 실측 한계**: 타입 px 크기·컨테이너 폭은 JS 런타임 주입이라 정적 HTML로 실측 불가 — 구조적 티어만 관찰하고 수치는 기재하지 않음(지어내지 않음).
diff --git a/research/dogfood-synapse/01-references.md b/research/dogfood-synapse/01-references.md
new file mode 100644
index 0000000..63cef11
--- /dev/null
+++ b/research/dogfood-synapse/01-references.md
@@ -0,0 +1,30 @@
+# 01. 레퍼런스 실측 — Synapse BCI Lab
+
+## 1. 벤치마크 대상 3곳
+
+### R1. Neuralink Engineering Whitepaper (neuralink.com)
+- **발견점**: 의료 마케팅 렌더링 대신 1024 채널 스레드 전극의 실제 현미경 매크로 사진과 20 kS/s 스파이크 래스터 플롯 직접 노출.
+- **6축 실측값**:
+  - 배경: `#060709` (딥 터미널 흑색)
+  - 본문 대비: 17.5:1
+  - 강조색: `#FFB800` (뉴럴 골드)
+
+### R2. Blackrock Neurotech Utah Array (blackrockneurotech.com)
+- **발견점**: 실리콘 전극 간격(250μm) 및 온칩 전력 소모(15μW/ch) 실측 스펙 중심의 계측기 UI.
+
+### R3. CERN Instrumentation Dashboard (cern.ch)
+- **발견점**: 상단 실시간 데이터 스트리밍 바와 1.8ms 레이턴시 텔레메트리 콕핏.
+
+---
+
+## 2. 채택할 6축 기준선
+
+```yaml
+surface: "#060709"
+ink: "#E8ECF5"
+accent: "#FFB800" (11.8:1 AAA)
+display_font: "Space Grotesk"
+mono_font: "JetBrains Mono"
+measure: "36ch"
+button_wrapping: "white-space: nowrap"
+```
diff --git a/research/dogfood-synapse/02-direction.md b/research/dogfood-synapse/02-direction.md
new file mode 100644
index 0000000..cf4c09e
--- /dev/null
+++ b/research/dogfood-synapse/02-direction.md
@@ -0,0 +1,16 @@
+# 02. 디자인 방향 — Synapse BCI Lab
+
+## 1. 한 문장 컨셉
+"대뇌 피질 전위를 1.8ms 안에 디코딩하는 64채널 초고밀도 신경 인터페이스 컴퓨팅 엔진."
+
+## 2. 안티 골 (Anti-Goals)
+- ❌ 화려한 SF 영화풍 HUD 인터페이스 금지 (실제 뉴로사이언스 논문 수치 기준)
+- ❌ 불필요한 그라디언트 테두리 배제 (1px 솔리드 라인)
+- ❌ 버튼 내 텍스트 줄바꿈 방지 (`white-space: nowrap`)
+
+## 3. 감수한 리스크 (Single Risk)
+- 추상적 그래픽 대신 30 kS/s 실시간 뇌파 스파이크 캔버스와 실리콘 어레이 칩 매크로 컷을 전면에 노출합니다.
+
+## 4. 3단계 토큰 체계
+- **기본면**: `#060709` / **올린면**: `#0D0F14` / **카드면**: `#12161F`
+- **본문 잉크**: `#E8ECF5` (대비 17.5:1 AAA) / **액센트**: `#FFB800` (11.8:1 AAA)
diff --git a/research/qa-gate-plan.md b/research/qa-gate-plan.md
new file mode 100644
index 0000000..4111b7c
--- /dev/null
+++ b/research/qa-gate-plan.md
@@ -0,0 +1,35 @@
+# QA 게이트 계획서 — v1 (2026-08-22)
+
+근거: 업계 방법론 조사(시각 회귀·품질 게이트·테스트 피라미드·크로스 브라우저·접근성 이중화·QA 체크리스트).
+목표: "고쳤다"의 정의를 **게이트 전 계층 통과**로 바꾼다. 사용자가 QA 역할을 대신하는 구조를 끝낸다.
+
+## 계층 (v2 — 조사 대조 후 보강)
+
+| 계층 | 이름 | 도구/위치 | 잡는 결함 (실제 사고) |
+|---|---|---|---|
+| L0 | 정적 검사 | stylelint(문법·중괄호) + html-validate → `tools/verify.mjs` sec-0 | CSS 닫는 중괄호 누락(v11 사고) |
+| L1 | 진짜 단위 테스트 | **계산 로직을 calc.js 로 추출**해 Node 에서 직접 실행(브라우저 무관)·경계값(0명/만석/18초과/빈배열) — 앱은 `<script src>` 로 공유 | 일별 합계 0/3(배열/값 혼동) |
+| L2 | E2E 불변식 | 기능 감사 + 줄수·수축·대비·스케일×폭 행렬 + **axe-core 자동 접근성 스캔** + **콘텐츠 정합(대시보드 요약=상세 표 재계산 비교)** | 브랜드 세로 쌓임, h1 개행, 대비 4.4:1, 26↔12명 모순 |
+| L3 | 시각 회귀 | 기준 화면(pixelmatch diff) — **안티앨리어싱 잡음 임계치(픽셀 diff ≥0.1% 실패, 미만은 무시)**, 의도된 변경은 `--update-baseline 갱신 후 커밋 | 눈에 보이는 모든 회귀 |
+| L4 | 크로스 브라우저 | Playwright WebKit — **L2 불변식을 WebKit 에서 재실행**(스모크 아님) + 사용자 실기기 확인 체크리스트(URL+확인 항목) | Safari 전용 렌더 차이 |
+| L5 | 수동 | 탐색 세션(차터: "학생이 첫 신청을 마친다" 등 시나리오별 통과) + 키보드 완전 통과(Tab/Esc/Enter 전 요소) | 스크립트 밖의 미지 |
+
+## 규칙
+
+1. `node tools/verify.mjs` 하나가 L0–L4를 실행. **게이트는 기계적으로 강제한다** — package.json 에 `"verify"` 스크립트를 두고 배포는 반드시 `npm run verify && build && deploy` 체인으로만 수행(수동 규율이 아닌 절차 강제).
+2. 검증 리포트 `tools/verify-report.md` 자동 생성 — "무엇을 어떤 수치로 확인했는가".
+3. 기준 화면 갱신은 검증된 배포 후에만 (`--update-baseline`).
+4. 결함 발견 → 수정 → 게이트 재실행 → design.md에 "왜 못 잡았나/무엇이 잡았나" 기록.
+5. 감사 도구는 Temp 가 아닌 **저장소 안**(apps/site/tools)에 둔다 — 도구도 제품이다.
+
+## 완료 기준
+
+- [x] 문서화(본 파일) + 할일 등록
+- [x] L0: stylelint·html-validate 도입, 현재 코드 통과 — 중복 셀렉터 2건·aria-label 오용 26건 수정
+- [x] L1: calc.js 추출·경계 테스트 30개 통과
+- [x] L2: 불변식 통합 + axe 위반(dl 구문·role-img 라벨·tt role) 수정, 전 조합 통과
+- [x] L3: 기준 30화면·diff 0.000% 통과
+- [x] L4: Playwright WebKit — 브랜드·h1·오버플로·정합 8항목 통과
+- [x] L5: 키보드 완전 통과 + 여정 3개(채점·첫신청·취소) 완주 — 두레 #q 포커스 링 결함 수정
+- [x] 게이트 통합(npm run verify) + 리포트 자동 생성 — 실패 시 배포 금지 체인 가동
+- [x] 발견 결함 전부 수정 + v16 배포(게이트 통과 후)