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

@@ -1,24 +1,85 @@
-# 한남자리 디자인 기록
+# design.md — 한남자리
+
+## 진행 상태
+
+- 2026-10-06 · 0 현행 감사 → 1 레퍼런스 3슬롯 실측 → 2 카드 3장 중 A 선택(위임) → 3 토큰 재정의 → 4 구현(격자 히어로·푸터 폼·VT) → 5 검증 통과 → 6 이 문서. 재개하면 "검증"의 남은 위험부터 읽는다.
 
 ## 브리프
 
-- 무엇을: 다섯 조건으로 예시 주거 후보를 비교하고 공개 전 확인 책임을 분리해 보여 주는 브리핑과 운영 화면.
-- 누구에게: 조건을 정리하는 이용자와 검수 상태를 확인하는 운영 담당자.
-- 제약: 가상 매물·AI 참고·생성 이미지·미전송 안내와 기존 선택·검수·이력·대화상자 동작을 보존한다.
+- 무엇을: 한남 생활권 예시 매물 3곳을 다섯 조건(거래·예산·전용면적·입주일·주차)으로 비교하고 상담 전 확인 항목을 정리하는 공개 화면 + 매물 검수 운영 화면(`admin/`).
+- 누구에게: 집을 찾는 이용자(목표 행동: 조건을 넣고 분석 결과를 본 뒤 상담 준비 순서를 받는다) · 검수 담당자(운영 화면).
+- 제약: 정적 HTML/CSS/JS, 기본 언어 ko-KR(저장소 기존 로컬라이제이션), 기존 자산(사진 2장·og.png)만, 가상 매물·AI 참고·미전송 고지와 `landing.js`의 분석·선택·서류철·대화상자 동작, `admin/`의 구조를 보존. 2026-10-06 재작업 분배표(outputs/rework-2026-10-06/plan.md)의 배정값이 방향 제약.
+- 화면: `index.html`(공개), `admin/index.html`(운영).
 
-## 판단 기준
+## 미확정
 
-| 축 | 질문 | 적용 |
-| --- | --- | --- |
-| Warde · 정보 전달 | 다섯 조건의 라벨·입력값·결과 행동이 한 번에 읽히는가 | 13px 이상 라벨, 16px 입력, 결과 행동을 같은 조건판에 유지 |
-| Ruder · 비교 변수 | 후보 조건의 라벨과 값을 섞지 않고 비교하는가 | 조건 행의 라벨·값·보조 메모를 세 단계로 분리 |
-| Albers · 상태 맥락 | 가상 자료·AI 참고·중개사 확인의 책임이 구분되는가 | 상태 텍스트와 색조를 함께 사용하고 검수판의 간격·정렬을 통일 |
+- 방향 카드 선택은 사용자가 위임했다(plan.md "작업자가 그 안에서 방향 카드를 만들고 하나를 고른다"). 고른 이유는 "방향"에 있다.
+- 사진이 2장뿐이라 home-1과 home-3가 같은 거실 사진을 쓴다(home-3는 창가 크롭). 매물별 사진이 생기면 교체한다.
+- 월세 가격 문자열 "보증금 5억 · 월 1,200만"은 가운뎃점 메타 문자열이지만 `tools/showcase-duo-e2e.mjs:563`이 정확 일치로 단언해 유지했다.
 
-Warde, Ruder, Albers는 정보 전달·비교 변수·상태 맥락을 검토하는 참고 질문이며 인과나 성능 법칙이 아니다.
+## 레퍼런스
 
-## 역할 토큰과 검증
+| 슬롯 | 출처 | 가져온 것 |
+|---|---|---|
+| R1 구조 | The Modern House 매물 목록 https://www.themodernhouse.com/sales-list (브라우저 실측: 상단 바 64px, 필터 띠 80px에 h1 "Buy" 30px, 3열 389×260 격자, 캡션 두 열, 푸터 뉴스레터 폼) | 표제는 작게 필터 띠와 한 줄, 격자가 첫 화면, 캡션은 이름/가격 두 열, 푸터는 폼 하나 |
+| R2 톤 | Apple 리퍼비시 Mac 한국 https://www.apple.com/kr/shop/refurbished/mac (실측: 1:1 칸 247px, 간격 0 + 1px 선 격자, 떠 있는 카드 없음) | 선으로 나눈 1:1 칸, 그림자 없음 |
+| R3 디테일 | Chrome 문서 same-document View Transitions https://developer.chrome.com/docs/web-platform/view-transitions/same-document | `startViewTransition` + 칸별 고유 `view-transition-name`, 감소 모션은 `::view-transition-*` animation none |
 
-- `--brief-label-size`, `--brief-input-size`, `--brief-panel-radius`, `--brief-rule`, `--admin-body-size`, `--admin-meta-size`가 공개·운영 표면의 역할을 관리한다.
-- `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이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+미검증: Inigo 매물 목록(텍스트 페처가 제목만 반환).
+
+## 방향
+
+지문: 격자·목록 히어로(3열 1:1 매물 칸, 조건 띠 위, h1 작게, 리드 없음) · IBM Plex Sans KR 700 / IBM Plex Sans KR 400 · #eceff1 쿨 회색 · 130° 녹 #2d7639 · 4px · 격자+조건 → 브리핑 → 선택한 집 비교 → 서류철 → 푸터(절차 + 상담 준비 폼) · 상단 바 + 메뉴 버튼(고정, 불투명) · 다음 행동 하나 크게(상담 준비 폼) · 1:1 원본 크롭, 캡션 위 · 분석 시 격자 재정렬 View Transitions 120ms, hover는 선·바탕색만
+
+- 컨셉: 집을 찾는 사람이 한남 생활권 예시 매물 3곳을 격자에서 한눈에 보고, 위의 조건 다섯 칸을 채워 어느 집이 가까운지와 중개사에게 확인할 것을 가려낸다.
+- 프리셋: swiss-minimal 계열(격자·선·단색 강조)을 지배로, 보조 없음. 재질 없음.
+- 표현 리스크: 분석 뒤 격자 재정렬(VT). 전환 중 문서가 히트테스트에서 빠지므로 120ms로 짧게 두고, 실제 클릭 E2E(`showcase-duo-e2e.mjs` "세 후보 장면")로 검증했다. 좁은 화면(≤60rem)에서는 재정렬을 끄고 등록 순서를 지킨다(세 번째 칸을 가로 한 줄로 펴기 때문).
+- 표면 다이얼: 공개 — 표현 1·밀도 2·모션 1·증거 노출 2 / 운영 — 표현 0·밀도 3·모션 0·증거 노출 3(구조 유지, 토큰·서체만 공유).
+- 반사실: 첫 화면 고유 요소 — 억 원·㎡·입주일·주차 대수 다섯 필터, 매물 캡션의 실제 수치("매매 118.42㎡ 38억 원"), 캡션 안 "연출 이미지" 고지. 세무사무소로 바꾸면 필터와 1:1 사진 격자 모두 성립하지 않는다.
+- 수렴(05 계측 19종 대비): 히어로 격자(분할 13종과 다름) · 표제 라벨 없음·1줄·리드 없음(라벨+2줄+리드 16~19종과 다름) · 푸터 폼(고지 띠 14종과 다름) · 캡션 위(아래 캡션 다수와 다름) · 상단 바는 배정대로 유지. 5축 중 같은 것은 "단색 버튼 1 + 밑줄 텍스트 1" CTA 조합 하나.
+- 카드(위임): **A. 선 격자 3칸(채택)** — 매물이 3곳이라 1440에서 세 칸이 한 줄에 다 보이고(R1 3열), R2의 1:1 선 격자가 배정 비율과 맞으며, E2E가 보는 비교·서류철 표면을 그대로 둘 수 있다. **B. 색인 표** — 숫자 행 + 썸네일. 사진 2장의 역할이 사라지고 390에서 표를 카드로 바꿔야 해 기각. **C. 큰 두 칸** — 2열 큰 사진, 선택 칸 안에서 브리핑 펼침. 첫 화면에 세 집이 다 안 보이고 매트릭스를 칸 안으로 접어야 해 기각.
+- 보존 자산: 상호·태그라인·HJ 마크, 세 매물의 이름·가격·면적·주차·입주일·관리비, 사진 2장, og.png, 고지 문구("상담은 접수되지 않습니다", "거래 서비스를 제공하지 않습니다"), `data-*` 계약 전부, 서류철 5탭, 상담 대화상자, 로컬 저장 키 `hannam-jari-conditions-v2`, `admin/` 구조.
+
+## 토큰과 예산
+
+값은 `styles/tokens.css` 한 곳. `landing.css`·`admin.css`는 토큰을 재정의하지 않는다(05 Q-25).
+
+- 서체: `--font-display`·`--font-body` = IBM Plex Sans KR(Google Fonts, OFL, 400·700만). 표제는 700, 본문 400. 중간 웨이트를 싣지 않아 합성 볼드가 없다. `--font-sans`는 admin.css가 쓰는 별칭.
+- 바탕: `--surface` #eceff1(페이지) / `--surface-raised` #f7f9fa(칸·판) / `--surface-sunken`(이미지 바닥). 글자 `--ink` #15191c, 보조 `--ink-3` #566069(#eceff1 위 5.56:1 실측).
+- 강조: `--accent` #2d7639(130°) — 선택 칸 테두리·주 버튼·현재 탭·탭 밑줄에만. `--accent-deep`(hover·텍스트), `--accent-soft`(어두운 푸터의 보조 글자).
+- radius: `--radius` 4px 하나. 배지만 `--radius-pill`.
+- 모션: `--transition` 160ms, VT 120ms. 감소 모션은 tokens.css에서 전역 0.01ms + `::view-transition-*` none.
+- 예산(tokens §5 기본선)과 실측(1440, 로컬 파일): JS 25KB(비압축, 예산 150KB gzip) · CSS 8+31KB · 첫 화면 이미지 214KB(E2E 예산 350KB/모바일 260KB 통과) · LCP 292ms(로컬, 첫 매물 사진 `fetchpriority="high"`) · CLS 0.0001 · 폰트 전송 229KB(1440)/198KB(390) + Google Fonts CSS. **폰트는 기본선 100KB를 넘는다** — 한글 2웨이트 슬라이스 합계라 데모/포트폴리오 기준 200KB로 올렸고, 그래도 29KB 초과다("검증" 남은 위험).
+
+## 이펙트와 폴백
+
+- View Transitions: `document.startViewTransition`이 없거나 감소 모션이면 즉시 갱신(`withViewTransition`). 순서는 CSS `order`로만 바꿔 DOM·키보드 순서를 유지한다.
+- hover: 칸 바탕 흰색 + 1px 안쪽 선, 버튼 진한 녹, 탭 글자색. 전부 꺼도 상태는 `aria-pressed`·`aria-selected`·테두리 2px로 보인다.
+- 이미지 실패: `data-image-fallback` 판이 같은 자리에 뜬다(기존 동작).
+- 무JS: h1·격자·매트릭스·서류철 기본 탭·푸터 폼이 정적으로 읽힌다. 분석·선택·대화상자는 `.no-script` 안내.
+
+## 하지 않기로 한 것
+
+- 새 이미지 생성 안 함(브리프). home-3는 같은 거실 사진의 창가 크롭(`.is-crop-window`).
+- 스크롤 리빌·등장 애니메이션·마퀴 없음. 재질(feTurbulence·유리) 없음. 상단 바에 `backdrop-filter` 없음(바탕이 단색).
+- 큰 표제·리드 문단·eyebrow를 히어로에 두지 않는다. `.eyebrow`는 `#homes`("예시 매물")·`#dossier`("선택한 예시 매물") 두 곳의 범위 고지뿐이다(E2E가 "예시"·"선택한 예시" 포함을 단언한다).
+- 상담 대화상자를 없애지 않았다. 푸터 폼에서 고른 항목이 대화상자 체크 상태로 넘어간다.
+- 운영 화면 구조·문구·밀도는 손대지 않았다(토큰·서체·강조색·고지 띠 문장만).
+
+## 검증
+
+- 검증 줄: html-validate 2파일 0건 · stylelint 3파일 0건 · no-hanja 7파일 통과 · showcase-audit 12/12 · design-gate 28/28(미검증 0, 꺼짐 3: static·visual·webkit) · showcase-duo-e2e 한남자리 48시나리오 184단언 통과(스크래치 사본으로 한남자리 블록만, 3회 연속) · audit.mjs 390×320 메뉴 단언 재현 통과.
+- 시각 루브릭(약한 축부터, 캡처 `outputs/rework-2026-10-06` 노트 참조): R6 1 — 사진 2장을 세 매물·비교·서류철에 다시 쓴다(크롭으로 나눴지만 같은 방). R9 1 — 200% 확대는 캡션·조건 띠만 확인. R1 2 · R2 2(흐림 캡처: 사진 셋 → 녹색 버튼 → 표제) · R3 2(시작선 32/53/78px) · R4 2 · R5 2(촘촘한 격자 ↔ 4~6rem 섹션 ↔ 어두운 푸터) · R7 2 · R8 2 · R10 2. 합계 18/20.
+- 대비 실측: 어두운 푸터 위 보조 글자 14.18:1, 표제 16.01:1 / 조건 띠 안내문 6.08:1 / 매물 판정문 6.42:1 / 주 버튼 5.58:1 / eyebrow 7.12:1.
+- 미검증·남은 위험: 폰트 전송량이 올린 예산(200KB)보다 29KB 많다 — 줄이려면 본문 400 한 웨이트로 가거나 자체 서브셋이 필요하다. Firefox·Safari는 VT 미지원 또는 부분 지원이라 즉시 갱신으로 떨어진다(기능은 같다). WebKit 렌더는 E2E의 WebKit 390·1440 단언으로만 봤다.
+
+## 피드백 기록 · 보존 목록
+
+- (없음) 납품 뒤 반응이 오면 feedback-loop로 축을 좁혀 여기 적는다.
+
+## 변경 기록
+
+- 2026-10-06 · 재작업: 분할 히어로 → 격자·목록, 웜 페이퍼+Pretendard+청동 → 쿨 회색+IBM Plex Sans KR+130° 녹, 고지 띠 푸터 → 상담 준비 폼 푸터, landing.css의 토큰 재정의를 tokens.css로 통합, 가운뎃점 메타 문자열 제거, 섹션 제목을 사실 문장으로. 운영 화면은 토큰·서체·강조색만 따라간다.
+- 2026-10-02 · 카피: 직역 태그라인·번역체 문장을 평이한 문장으로(outputs/redteam-2026-10-01/copy-criteria.md).
+- 2026-10-02 · 레드팀 06: h1 자간 -0.07em → -0.02em, `text-wrap: balance`(이번 재작업에서 h1 자체가 바뀌어 더는 해당 없음).
+- 2026-09 · 초판: 역할 토큰 `--brief-*`·`--admin-*`, verify-final 18묶음, stress 112건 기록.