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/cheongon-care/design.md

@@ -1,17 +1,78 @@
-# 청온 케어 — 디자인 결정 기록
+# design.md — 청온 케어
 
-## 관찰과 방향
+## 진행 상태
 
-- 관찰: 기존 첫 화면은 카드 안의 사진과 떠 있는 수치 배지가 서비스 범위보다 먼저 읽혔다.
-- 원리 적용 범위: 소개와 견적 행동은 왼쪽 읽기 폭에, 생활 공간 사진과 32개 검수 항목 예시는 오른쪽 한 장면에 둔다. 견적은 입력 작업표와 합계 명세를 분리한다.
-- 결정: 이중 프레임·떠 있는 배지를 제거하고 사진 캡션으로 검수 항목의 맥락을 연결했다. 성능 수치·인증·의학적 표현은 근거가 없으므로 작업표에 기록할 확인 절차로 바꿨다.
-- 기각 조건: 사진이 견적 행동을 밀거나 작은 폭에서 입력과 합계가 동시에 읽히지 않으면 1열 순서와 간격을 다시 조정한다.
+- 2026-10-06 재작업(전체·리디자인 경로, 방향 선택은 사용자 위임). 0 현행 감사 → 1 레퍼런스 → 2 카드 3장 중 A → 3 토큰 → 4 구현(index + protocol 공통 셸) → 5 감사 통과 → 6 이 문서. 완료.
 
-## 토큰과 검증
+## 브리프
 
-- 타입: `MaruBuri` 로컬 400·600은 제목 역할, Pretendard는 본문·입력 역할이다. 본문은 `--step-0`, 보조 기록은 `--step--1`을 유지한다.
-- 색: 기존 청록 `--accent`, 밝은 표면과 선 토큰을 유지한다. 청록은 상태·행동과 검수 표시에만 쓴다.
-- 구도: 넓은 화면은 5:7 소개/사진, 견적은 입력/합계 두 열이며 860px 이하에서는 한 열이다.
-- `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이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+- 무엇을: 가상 입주·이사·사무실 청소 브랜드의 견적 페이지 한 장 + 작업 절차 2차 페이지. 정적 HTML/CSS + 인라인 JS, 쇼케이스 사이트(`apps/site/public/work/cheongon-care/`) 안.
+- 누구에게: 입주·이사를 앞둔 사람이 평형과 옵션을 골라 예상 금액을 보고 견적을 요청한다. 보조로 운영 화면 예시(접수·배차)를 같은 페이지에서 전환해 본다.
+- 제약: 기본 언어 ko-KR(기존 로컬라이제이션). 상호·단가·옵션 가격·32개 항목·6단계 문구는 기존 파일 값 유지. 새 이미지 금지. 서체는 OFL·공개 배포본. plan.md 배정값(아래 지문 블록)이 제약이다.
+- 화면 목록: `index.html`(견적 계산기 → 절차 → 장비 → 요청 푸터, 운영 화면 예시 모드) · `protocol/index.html`(절차 상세, 같은 셸).
+
+## 미확정
+
+- 대표 전화번호 02-000-4172 — 푸터 연락처 줄, 전화 다이얼로그. 예시 값이다(사용자 결정 2026-10-06, 다이얼로그와 푸터 고지에 명시).
+- 응답 시간·서비스 지역 — 기존 파일에 없어 사실 목록에 넣지 않았다. 값이 오면 `.facts`에 행 하나 추가.
+- og:image — 전용 1200×630 이미지가 없어 기존 사진의 절대 URL을 가리킨다.
+- 방향 카드 선택(A)은 위임으로 정했다.
+
+## 레퍼런스
+
+- R1 구조: Homeaglow https://www.homeaglow.com/ — 중간 크기 표제 아래 입력 한 칸, 옆에 가격 사실 3줄($19·$59/월·7일 예약). 가져온 원리: 표제 작게, 사실 목록, 입력이 첫 화면.
+- R1′ 같은 시장: 청연 https://www.chyeon.com/, 미소 https://miso.kr/ — 앱 다운로드 히어로·상단 바·가격 없음. 가져온 원리: 가격을 첫 화면에 두는 것이 이 시장에서 차별점이다.
+- R2 톤: 기존 design.md의 "입력 작업표와 합계 명세 분리" 결정 재사용.
+- R3 디테일: designpaca `mobile-app-ux.md` safe area 절(`viewport-fit=cover` + `env()` + `max()`).
+- 미검증: 숨고 검색 페이지(404), 당근 비즈프로필 하단 바(페처 불가).
+
+## 방향
+
+지문: 히어로 데이터·도구(견적 패널이 첫 화면, 표제 작게, 사실 목록 4줄, 행동은 패널 안 링크) · 표제/본문 Wanted Sans / Wanted Sans · 바탕 밝음·쿨 #eef3f6 · 강조 187° #156a75 · radius 8px · 흐름 견적 계산기 → 6단계 번호 목록 → 장비 누끼 + 기록 4항목 → 견적 요청(푸터) · 내비 없음 + 모바일 하단 고정 바(전화·견적) · 푸터 = 견적 요청 폼 + 상호·전화 placeholder·고지 한 줄 · 이미지 multiply + 방사형 마스크 누끼 · 모션 없음(폼 상태 색·테두리 전환 160ms만)
+
+- 한 문장 컨셉: 입주를 앞둔 사람이 공간 유형·평형·옵션을 고르고 합계를 본 뒤 연락처를 남긴다.
+- 프리셋: swiss-minimal 지배(흰 작업 패널, 선으로 나눈 사실 목록) + 보조 없음. 강조색은 행동·합계·활성 상태에만.
+- 표현 리스크: 합계 숫자(44px)가 페이지에서 가장 큰 글자이고 표제(28px)보다 크다 — 도구가 주인이라는 구도를 글자 크기로 말한다. 검증: 회색조 캡처 첫 시선이 합계였다.
+- 표면 다이얼: 고객 화면 표현성 1·밀도 2 / 운영 화면 예시 표현성 0·밀도 3·증거 노출(예시 고지) 3.
+- 제시 카드: A 계산기가 첫 화면(채택) · B 영수증 한 장(기각 — 1440 폭 낭비, 390에서 합계가 멀다) · C 단가표가 먼저(기각 — 390 표 변환, 행동까지 읽을 것이 많다). A를 고른 이유: 배정 제약과 R1 구성이 같고, 기존 E2E가 슬라이더·유형·합계가 한 화면에서 바뀌는 것을 단언한다.
+- 반사실: 고유 요소 — 단가 3종 버튼(11,000/9,500/14,500), 32개 항목 검수 사실, 옵션 4종 가격. 같은 업종 치환에서 값이 바뀌어야 하고, 세무사무소 치환에서 평형 슬라이더가 무의미 → 통과. 수렴: plan 분포에서 같은 내비 형태인 thursday-flowers와 흐름·푸터·이미지·모션이 다르다(B-2 2/6 같음).
+- 보존 자산: 상호, 단가·옵션 가격, 32개 항목·6단계 문구, 운영 표 예시 행, `assets/*.webp` 3장, `#calculator`·`#pyeongSlider`·`#sumTotal`·`.type-btn[data-base]`·`#btnModeAdmin/#btnModeClient`·`#qcModal`·`.card a[href='../index.html#calculator']`(E2E 계약).
+
+## 토큰과 예산
+
+- 값은 `styles/tokens.css`. 역할: `--surface`(바탕) / `--surface-raised`(패널·입력) / `--surface-card`(합계 면·표 헤더) / `--accent`(행동·활성·절차 번호) / `--accent-hover`(합계 숫자·호버) / `--ink-faint`(가격·눈금, 흰 위 5.36:1) / 상태 알약 3종은 브랜드 강조와 분리.
+- 타입: step--1 13 / 0 16 / 1 19 / 2 22~28(h1·섹션 제목) / 3 32~44(합계 한 곳). measure 36em. 서체 하나(Wanted Sans Variable, jsdelivr split 서브셋, swap). 모노 없음 — 숫자는 `tabular-nums`.
+- 간격 토큰 1~8, 컨테이너 78rem, 컨트롤 44px, 하단 바 높이 4.25rem + safe area.
+- 예산: tokens §5 기본선. 실측 — 인라인 JS 약 5KB, 첫 화면 이미지 0장, 아래 사진 2장 lazy(84KB·72KB). 폰트 전송량은 split 서브셋이라 쓰인 글자 범위만 — 미측정.
+
+## 이펙트와 폴백
+
+- 누끼 대체: `.gear-cutout img { mix-blend-mode: multiply; mask-image: radial-gradient(ellipse …) }`. 마스크 미지원이면 직사각 사진 그대로 보인다(완성된 상태).
+- 폼 상태 전환 160ms 색·테두리. 감소 모션에서 1ms.
+- 그 밖의 모션·재질 없음.
+
+## 하지 않기로 한 것
+
+- 상단 바 내비·sticky·backdrop-filter — 한 장짜리에 행동 하나라 차례가 필요 없다.
+- 히어로 사진 — 도구가 주인인 구도가 포기한 것. `clean-hero.webp`는 남기되 쓰지 않는다.
+- eyebrow·영문 라벨·가운뎃점 메타 문자열 — 라벨은 `dt` 한 낱말.
+- JetBrains Mono·MaruBuri — 한글 라벨에 라틴 모노를 쓰지 않고, 쓰지 않는 표제 서체를 싣지 않는다(`assets/fonts/` 삭제).
+- 지어낸 전화번호·응답 시간·지역 — placeholder 또는 생략.
+- 스크롤 리빌·등장 모션 — 배정표에 없다.
+
+## 검증
+
+- 자동: html-validate 0 오류(2페이지) · stylelint 0 · no-hanja PASS · integrity cheongon-care 5/5 · design-gate 충족 28/미검증 0/실패 0(폭 320·390·768·1440·1920, axe AA 0건) · showcase-audit PASS 12/0 · archive E2E cheongon 블록 24/24.
+- 수동: 키보드 순회 1440·390 전부 도달·포커스 링 보임 · 전화 다이얼로그 Esc 닫힘·포커스 복귀 · 감소 모션 1ms · 대비 실측(흰/강조 6.27, 합계/회색 면 7.14, 희미/흰 5.36, 알약 6.56~7.42; 어두운 면 위 텍스트 없음) · h1·h2 마지막 줄 어절 ≥2.
+- 시각 루브릭(약한 축부터): R5 1 · R6 1 · R9 1 · R1 2 · R2 2 · R3 2 · R4 2 · R7 2 · R8 2 · R10 2 = 17/20. 대표 화면 index, 2차는 캡처만 열어 봄. 근거는 `outputs/rework-2026-10-06/cheongon-care.md`.
+- 미검증: 하단 바 국내 실측 사례, 실기기 safe area, 200% 확대 캡처, WebKit, 폰트 전송량.
+
+## 피드백 기록 · 보존 목록
+
+- 2026-10-02 카피 교정에서 정한 업종 어휘(입주청소, 평당 단가, 줄눈, 추가 옵션, 팀장)와 합니다체는 유지했다.
+
+## 변경 기록
+
+- 2026-08 초기: ledger-console 프리셋, 5:7 소개/사진 히어로, 입력 작업표/합계 명세 분리, verify-final 18묶음 통과.
+- 2026-10-02 카피 교정: "공간의 숨결"·"케어 솔루션"·영문 직함 제거, 합니다체 통일.
+- 2026-10-06 재작업: 히어로를 견적 패널로, 내비 제거 + 하단 행동 바, 푸터를 요청 폼으로, 서체 Wanted Sans 하나, radius 8 한 값, eyebrow 0, 가운뎃점 메타 0, 2차 페이지 공통 셸·인라인 style 제거, 운영 표 행 추가를 DOM 생성으로 변경.