feat(site): rework 19 marketing showcases for composition diversity

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.

apps/site/public/work/form-architecture/design.md

@@ -1,50 +1,87 @@
-# 스튜디오 폼 — 디자인 결정 기록
+# design.md — 스튜디오 폼
 
-## 0. 브리프와 범위
+## 진행 상태
 
-- 무엇을: 빛·비례·구조를 사진과 도면으로 함께 읽는 가상 공간건축 포트폴리오 예시.
-- 누구에게: 건축 작업의 기록 방식을 살피고 프로젝트 인덱스로 이동하려는 방문자.
-- 제약: 기존 흑백 사진·도면과 Pretendard를 보존한다. 실제 수행 이력·연락처로 오인될 수 없게 가상 사례와 생성 이미지라는 사실을 가까이에 표기한다. 기본 언어는 ko-KR 한국어이며, 영문은 고유 표기 FORM만 사용한다.
+- 2026-10-06 전체(리디자인) 경로 0~6단계 완료. 재개할 일이 생기면 "검증"의 미검증 목록부터 본다.
 
-경로: **연장**. 정적 HTML의 토큰·콘텐츠 구조를 재구성했으며 이 문서가 이후 작업의 국소 기준이 된다.
+## 브리프
 
-## 1. 조사와 관찰
+- 무엇을: 주택·기념관·재생 건축 여섯 건을 사진과 평면도로 기록하는 가상 건축연구소 포트폴리오 한 장. 대표 기록은 폼 하우스(가평, 2025).
+- 누구에게: 건축 작업의 기록 방식을 살피고 프로젝트 색인으로 이동하려는 건축주·협력사. 목표 행동 없음(상담·견적을 받지 않는 가상 연구소).
+- 제약: 정적 HTML·CSS, 기존 흑백 사진 3장과 평면도만 사용(새 이미지 없음), 기본 언어 ko-KR(상호 "스튜디오 폼"만 표기, 영문 FORM 미사용), 한자 금지, 가운뎃점 메타 문자열 금지, 폰트는 OFL·공개 배포본.
+- 배정(outputs/rework-2026-10-06/plan.md): 표제 + 전폭 무대 · 측면 색인 · 큰 워드마크 한 줄 푸터 · Gothic A1 300 / Gothic A1 · 밝음 중립 #fcfcfb · 강조 없음 · radius 0 · scroll-driven 진행선 · 종이 결 feTurbulence · 극단 비율 파노라마 + 흑백.
+- 화면: `index.html` 한 장(2차 페이지 없음).
 
-| 출처 | 관찰 | 적용 범위 |
-| --- | --- | --- |
-| [David Chipperfield Architects — Projects](https://davidchipperfield.com/projects) | 프로젝트 사진·모형과 그 아래 정렬된 메타데이터가 탐색의 위계를 소유하고, Grid/List/Filter는 보조 탐색으로 물러난다. | 사진을 첫 화면의 주 장면으로 두고, 인덱스는 번호·이름·위치·연도를 정렬한다. |
-| [Klim Type Foundry](https://klim.co.nz/) | 글자와 작업물이 표면을 주도하고 인터페이스는 뒤로 물러난다. | 큰 헤드라인, 얇은 선, 흑백 사진의 우선순위. |
-| [Carbon 2x Grid](https://carbondesignsystem.com/elements/2x-grid/usage/) | 넓은 표면과 읽기 표면은 분리된 레일을 가져야 한다. | 최대 1800px stage와 1280px 정보 레일, 720px 본문 measure. |
+## 미확정
 
-표현을 복제하지 않았다. 이 페이지의 고유한 결합은 `제목 → 실제로 보이는 사진 → 도면의 이유`라는 건축 기록 순서다.
+- 프로젝트 02~06의 평면도·사양·사진 — 없음. 색인 여섯 건 모두 같은 예시 평면도(`#drawing`)로 연결되며 레일 아래에 그 사실을 적었다.
+- 연락처·주소 — 없음. 연구소 섹션과 `<address>`에 "연락처와 사무실 주소가 없습니다"로 표기.
+- 방향 카드는 위임으로 골랐다(아래 "방향").
 
-## 2. 수정 전 문제와 결정
+## 레퍼런스
 
-- 1440px 첫 화면에서 소개 문단이 약 80px 열에 갇혀 단어마다 줄바꿈됐고, 사진과 인덱스 행동이 첫 화면에 없었다.
-- `설립 연도 예시`, `팀 구성 예시`처럼 작업 판독에 기여하지 않는 가상 수치를 제거했다.
-- 기존 인덱스의 여섯 항목은 모두 같은 도면으로 연결됐지만 그 관계가 설명되지 않았다. 이제 목록 직전에 같은 가상 도면을 다른 관점에서 참조한다는 사실을 고지한다.
-- 기존 생성 이미지는 유지하고 각 사진 캡션에 `생성 이미지 · 실제 프로젝트 사진 아님`을 남긴다.
+| 슬롯 | 출처 | 가져온 원리 |
+|---|---|---|
+| R1 구조 | https://davidchipperfield.com/projects/neues-museum — 브라우저 실측 1440: h1 3줄(42px/700) 좌상단 → 바로 아래 전폭 무대 사진 1149×768 | 표제 블록 다음에 무대가 온다. 우리는 표제를 26px/300으로 낮추고 무대를 3.6:1로 늘렸다 |
+| R1' 색인 | https://www.6a.co.uk/projects — "_Tate Liverpool_, Royal Albert Dock 2022 - 2027" | 색인 행 = 번호 / 이름 / 장소 연도 |
+| R3 디테일 | https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline — sticky 우측 차례(폭 296, 링크 16/24, 행 32, 현재 항목 `aria-current` + 2px 막대 + 틴트) | 측면 색인의 현재 위치: `aria-current` + 왼쪽 2px 먹 막대. 틴트는 강조색 없음 규칙으로 뺐다 |
+| R2 톤 | 비움 — 흑백 사진·먹 선이 톤을 이미 정했고, 배정이 서체·바탕·강조를 고정했다 | — |
+| 미검증 | lacatonvassal.com(텍스트 페처 오판, 실측은 드롭다운 필터), sergisonbates.com 401, sanaa.co.jp 인증서 오류, pezo.cl 빈 응답 | 쓰지 않음 |
 
-## 3. 토큰과 레이아웃 계약
+## 방향
 
-- 표면 `#fdfdfb`, 전경 `#171b19`, 중립 선 `#d8dbd7`, 보조 글자 `#5b615d`.
-- 본문 16px 이상, 캡션 12px 이상, 본문 줄간 1.75, 읽기 폭 720px.
-- `h1: clamp(2.5rem, 5.5vw, 5.5rem)`; Pretendard 단일 패밀리.
-- 1440px 정보 레일 최대 1280px, stage 최대 1800px; 2560px에서는 사진만 stage에 머물고 산문은 720px 내에서 읽힌다.
-- 모바일 gutter는 20px, 320px에서 16px. 이미지의 원본 비율을 유지하며 `object-fit: cover`는 슬롯에서 정한 비율 안의 편집에만 사용한다.
+지문: 표제+전폭 무대 · Gothic A1 300 / Gothic A1 400 · 밝음 중립 #fcfcfb · 강조 없음(먹만) · radius 0 · 흐름 [긴 문장 표제 → 3.6:1 흑백 파노라마 → 평면도(스크롤로 선이 그어짐)+사양 → 사진 2장(3:4, 2.4:1) → 연구소 → 큰 워드마크 푸터] · 측면 색인(≤64rem 상단 접는 차례) · 큰 워드마크 한 줄 푸터 · 극단 비율 파노라마 + 흑백, 캡션은 번호와 함께 · scroll-driven(진행선 1px, 도면 stroke-dashoffset), 등장 리빌 없음
 
-성능 예산: 첫 화면 JS 0KB / 첫 인터랙션은 정적 링크 / 폰트 패밀리 1개. 이미지 생성·추가는 하지 않는다.
+- 한 문장 컨셉: 건축주가 폼 하우스 한 건의 파노라마와 평면도를 사실 문장과 함께 읽고, 왼쪽 색인에서 다른 다섯 건으로 이동한다.
+- 프리셋: swiss-minimal(평평한 종이, 재질 최소). 보조 축 없음. 종이 결은 재질 한 가지(종이)로 한정.
+- 히어로 글 묶음: 라벨 없음 / 서너 줄 긴 문장 표제 / 리드 없음 / 행동 없음(다음 정보인 무대로 이어진다).
+- 표현 리스크: 표제 26px vs 푸터 워드마크 176px(6.8배)의 크기 긴장. 1440·390 전체 캡처로 확인했다.
+- 카드(위임, 구조가 다른 3장): A 도면집 한 장(좌측 색인 + 표제 3줄 → 파노라마) / B 긴 두루마리(사진 3장을 가로 스크롤 띠로) / C 평면도가 무대(전폭 평면도 먼저). **A 채택** — 설득 재료가 사진(재료·빛)과 평면도(배치·동선) 둘이고 R1이 사진을 표제 바로 아래 무대로 두며, 색인의 현재 위치 표시는 한 장을 읽는 동안에만 의미가 생긴다. B는 가로 스크롤이 세로 진행선과 충돌해 기각, C는 첫 화면에 사진이 없어 기각.
+- 반사실: 첫 화면 고유 요소 3개 — 긴 수평창 파빌리온 파노라마(자산), 가평·백령도·성수 색인 6건, "사진과 평면도로 집을 왜 그렇게 앉혔는지" 방법 문장. 세무사무소로 치환하면 색인 레일·파노라마가 성립하지 않는다. 페이지 수렴: plan.md상 orbit-aerospace와 측면 색인·극단 비율·scroll-driven 도면 선 3축이 같다 — 글 묶음·푸터·바탕·서체로 갈라 둔 상태이고 섹션 흐름이 달라야 한다.
+- 보존 자산: pavilion-bw·interior-bw·model-bw webp, 프로젝트 6건의 이름·위치·연도, 폼 하우스 사양 수치와 설계 이유 문장, `.index a` 6개 → `#drawing`.
 
-## 4. 검증 추적
+## 토큰과 예산
 
-- 320, 390, 768, 1440, 1920, 2560px에서 문서 및 요소 가로 오버플로, h1/본문 가시성, 레일 상한, 이미지 로드, 탭 순서를 점검한다.
-- `prefers-reduced-motion`과 효과 제거 상태에서도 콘텐츠가 같은 순서로 읽히는지 점검한다.
-- 200% 텍스트 확대에서 본문·CTA가 사라지지 않는지 점검한다.
-- 실행 결과와 화면 캡처는 `outputs/design-expertise-20260912/form/`에 남긴다.
+값은 `styles/tokens.css`. 역할만 적는다.
 
-## 2026-09-12 전체 쇼케이스 점검
+- 서체 한 패밀리 두 웨이트: 300은 표제·h2·푸터 워드마크(가늘고 넓게), 400은 본문·색인. 500은 폰트 예산 때문에 뺐고 색인 이름은 색(ink)과 행 위치로 구분한다.
+- 색: 바탕 #fcfcfb(배정 유지), 먹 #161716, 보조 #585b58(6.7:1), 흐림 #6b6e6b(5.0:1), 선 두 단계. 강조색 없음.
+- 크기: 캡션 13px(한글 하한), 본문 16px, 표제·h2 clamp(20~26px) — "작은 표제", 워드마크 clamp(52~176px). 표제 measure 30em(1440에서 3줄), 본문 36em.
+- 무대 비율: 3.6:1(≥64rem) / 2.4:1 / 16:10(≤40rem). 사진 띠 2.4:1 / 2:1 / 16:10.
+- 예산(tokens §5 데모/포트폴리오): JS 인라인 1.2KB / 폰트 **254KB 실측 — 200KB를 올렸다**(Gothic A1 한글 슬라이스 두 웨이트; 본문까지 300으로 줄이면 가독성이 떨어진다) / LCP 348ms(1440)·252ms(390) 로컬 / CLS ≤0.001 / 첫 화면 전송 약 430KB.
 
-- 기존 흑백 사진·도면 구도, 앵커와 긴 모바일 라벨의 줄바꿈 규칙을 보존했다. 로컬 MaruBuri 파일을 함께 제공하되 현재 Pretendard 단일 패밀리 본문 계약은 바꾸지 않았다.
-- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
-- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+## 이펙트와 폴백
+
+- 도면 선 그리기: `.plan`에 `view-timeline: --plan`, 벽→내벽→창→문 순으로 `stroke-dashoffset 1 → 0`. `@supports (animation-timeline: view())` 안에만 초기 상태를 두어 미지원(Firefox)은 완성 상태. 감소 모션도 완성 상태.
+- 진행선: 레일 오른쪽 1px 실선 위 먹 구간이 `scroll(root block)`로 자란다. 감소 모션은 가득 찬 상태(정보).
+- 종이 결: feTurbulence 타일(220px, 2옥타브) SVG를 `body::before` 고정 레이어 배경으로, opacity 0.08. 런타임 필터 연산 없음. 끄면 바탕색만 남고 레이아웃은 그대로.
+- 읽는 위치: IntersectionObserver가 "이 장" 링크에 `aria-current`를 준다. JS가 없으면 표시만 없고 색인은 항상 열린다.
+- 좁은 화면 차례: `<details>`를 JS가 폭(64rem)에 따라 열고 닫는다. 링크를 누르면 닫힌다.
+
+## 하지 않기로 한 것
+
+- 상단 바·backdrop-filter·스크롤 리빌·eyebrow·리드·버튼 — 수렴 지문이라 뺐다.
+- 영문 "FORM" 워드마크·영문 장식 라벨 — 기본 언어 규칙.
+- 같은 사진을 두 번 싣기(옛 히어로·사진 섹션 중복) — R6 실패 신호.
+- 프로젝트 02~06의 상세 — 사실이 없어 만들지 않았다(placeholder 대신 색인에서 같은 예시 평면도로 보낸다는 고지).
+- 가운뎃점 메타 문자열, 캡션마다 붙던 "생성 이미지 · 실제 프로젝트 사진 아님" — 히어로 아래 고지 한 문단이 페이지 범위를 한 번 소유한다. 푸터는 브랜드 범위 한 줄만.
+- MaruBuri 로컬 폰트 — 싣지 않는다(파일은 출처 기록과 함께 남겨 둠). `fonts.css`는 지웠다.
+
+## 검증
+
+- 검증 줄: html-validate 0 오류 · stylelint 0 · no-hanja PASS · showcase-audit PASS 6/0(320~2560) · design-gate 충족 13 / 미검증 0 / 실패 0(꺼짐 3: static·visual·webkit; 대비 AA 66요소, axe 0, 터치타깃·오버플로·죽은 선택자·색 리터럴 0) · archive-showcases-e2e 107/108(실패 1 = 390 접힌 차례 선택자, 제안 수정은 outputs 노트) · similarity 경고 없음.
+- 시각 루브릭(약한 축부터): R3 1(레일 시작선 4개, 역할 설명 가능) · R6 2 · R1 2 · R2 2 · R4 2 · R5 2 · R7 2 · R8 2 · R9 2 · R10 2 = 19/20. 근거와 2점 반례는 `outputs/rework-2026-10-06/form-architecture.md`.
+- 미검증: WebKit 렌더, 실기기 INP, Firefox 실제 실행(폴백 경로는 `@supports`로 보장).
+- 캡처: 스크래치 `form/final-*.png`(1440·390 첫 화면·전체·회색조·흐림·감소 모션·도면 중간 상태·2x 크롭).
+
+## 피드백 기록 · 보존 목록
+
+- 보존: 흑백 사진 3장과 역할(남측 입면 파노라마 / 전시실 빛 / 석고 모형), 가로형 평면도, 색인 6건, 폼 하우스 사양.
+- 피드백: 없음(2026-10-06 재작업 직후).
+
+## 변경 기록
+
+- 2026-10-06 · 전체 리디자인 · plan.md 배정(측면 색인·표제+전폭 무대·워드마크 푸터·Gothic A1·진행선·종이 결·파노라마)에 따라 구조·토큰·카피를 다시 썼다. 평면도를 가로형(14,400×9,600)으로 다시 그려 치수·비례 불일치와 "기둥 없음" 문장과의 모순을 없앴다. 가운뎃점 메타 문자열·eyebrow·리드·버튼·고지 띠 푸터 제거.
+- 2026-10-02 · 카피 교정 · "빛이 머무는" 같은 무생물 주어·시구형 표제를 사실 문장으로.
+- 2026-09-12 · 전체 쇼케이스 점검 · verify-final 묶음 통과, MaruBuri 파일 동봉(미사용).
+- 2026-08 · 최초 작성 · Pretendard 단일 패밀리, 상단 바 + 두 줄 표제 + 2.35:1 사진 + 인덱스 + 도면 + 사진 시퀀스 + 상담 구성.