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

@@ -2,26 +2,45 @@
 
 ## 브리프
 
-- 무엇을: 분산 엣지 확인과 보고 필드를 보여 주는 가상 모니터링 워크플로.
-- 누구에게: 예시 프레임의 시간·단위·위치·응답값을 비교하려는 방문자.
-- 제약: 실제 probe·계정 생성이 없다는 표기와 기존 값·단위·원장형 정렬을 유지한다.
+- 무엇을: 한 엔드포인트를 세계 여러 지점에서 같은 형식으로 확인하는 가상 엣지 모니터링 서비스.
+- 누구에게: 지점별 응답 시간을 한눈에 비교하고, 늦어진 곳만 골라 보려는 운영 담당자.
+- 제약: 실제 점검·계정 생성이 없다는 사실을 페이지 범위에서 한 번 밝힌다. 기존 값(6개 지점의 DNS·TLS·첫 바이트·p99)과 표 구조, Tab으로 닿는 내부 앵커를 유지한다.
+- 기본 언어: 한국어(`lang="ko"`). 지점 코드와 프로토콜 이름만 라틴으로 둔다.
+
+## 2026-10 재작업 이유
+
+2026-09판은 전형적인 개발도구 다크 템플릿이었고 lumina-optics·synapse-bci와 같은 틀이었다(유사도 0.84·0.83). 영어 페이지에 고지 단어가 32회 나왔고 히어로 본문이 "This page illustrates…"로 시작했다.
 
 ## 결정표
 
-| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
+| 축 | 이 브리프의 재료 | 결정·역할 토큰 | 기각 조건 |
 |---|---|---|---|
-| 구도 | 기준 화면에서 명령과 제한 설명이 분산되고 히어로 하단 빈 면이 컸다. | 명령과 설명을 하나의 왼쪽 경계 군집으로 묶고 히어로 하단 간격을 줄인다. `--space-5`, `--space-6`, `--accent-stroke`. | 군집 경계가 코드 스크롤이나 제한 문구를 가리면 제거한다. |
-| 타입 | 시간·단위와 위치 행이 차트보다 약하면 값의 해석 범위가 흐려진다. | 머리말·행을 `--step--1`, 값은 `--font-mono` tabular 정렬로 유지한다. | 320px/200%에서 값 열이 잘리면 의도된 표 스크롤을 유지하고 행을 축소하지 않는다. |
-| 색 | 선택된 시계열과 보조 시계열이 같은 위계로 읽혔다. | `--accent-stroke` 선택선, `--ink-muted` 보조선, `--ink-faint` 먼 선으로 역할을 분리한다. | 코발트가 실제 서비스 상태·알람으로 오해되거나 단위보다 강하면 선 대비를 낮춘다. |
+| 은유 | 지점 이름 ICN·NRT·SIN·SJC·LHR·FRA가 원래 공항 코드다. | 공항 출발 안내판. 표가 곧 히어로 이미지이고, 지점 코드와 숫자를 플랩 낱장 한 칸에 한 글자씩 올린다. | 플랩 때문에 표가 화면 낭독기에서 읽히지 않으면 원문 `sr-only` 사본을 확인한다. |
+| 바탕 | 안내판과 도로 표지의 신호 노랑. 운영 화면은 보통 어둡다 — 그 관습을 뒤집어 이 서비스만의 얼굴로 쓴다. | `--surface: #ffd23a`, 잉크 `#121110`(대비 ≈13:1). 강조는 검은 낱장과 `--accent: #b3121f` '주의' 판정 하나. | 빨강 판정이 노랑 위에서 4.5:1 아래면 더 어둡게 한다. |
+| 판정 | p99 150 ms를 넘은 FRA-01만 다르게 보여야 한다. | 판정 열을 새로 두고 `주의 · 150 초과`만 빨강. 나머지는 `정상`. | 판정 색만으로 구분하지 않는다 — 문구가 함께 바뀐다. |
+| 타입 | 안내판 글자는 좁고 각진 간판체다. | 표제·플랩 도현(Do Hyeon), 본문 Gothic A1. 모노 없음 — 등폭은 낱장 칸이 맡는다. `code`도 본문 서체 800. | 도현의 좁은 자폭 때문에 두 줄 표제가 세 줄이 되면 `--step-3` 상한을 낮춘다. |
+| 구도 | 첫 화면에서 표제와 안내판이 함께 보여야 한다. | 왼쪽 큰 표제 + 오른쪽 짧은 설명·행동, 그 아래 화면 폭 전체 안내판. 좁은 화면은 DNS·TLS 열을 접어 p99와 판정을 남긴다. | 390 폭에서 표제와 안내판 머리가 첫 화면에 같이 들어오지 않으면 히어로 여백을 줄인다. |
+| 모션 | 기계식 안내판은 한 번 넘어가고 멈춘다. | 첫 로드에 플랩이 260~680 ms 넘어가다 표의 값에 멈춘다. 값을 지어내지 않는다. 움직임 줄이기면 넘기지 않는다. 호버는 즉시 반전. 스크롤 등장 없음. | — |
+| 형태 | 낱장 모서리만 둥글다. | `--radius: 4px`(플랩·버튼). 면과 구분선은 각지게. | — |
 
-## 근거와 경계
+## 카피 방향 (2026-10-02)
 
-[art-direction.md](../../../../../packages/skill/references/art-direction.md)의 Hofmann 관련 군집·정렬 관찰은 명령/설명과 수치 원장을 묶는 데만 적용했다. [typography.md](../../../../../packages/skill/references/typography.md)의 Ruder 관련 숫자·긴 라벨 proof는 표와 instrument 행에만 적용했다. [visual-design-lineage.md](../../../../../packages/skill/references/visual-design-lineage.md)의 Albers 관련 맥락색 관찰은 cobalt 선택선과 보조선 대비에만 적용했다. 원전은 판독 속도나 제품 성과 법칙으로 사용하지 않는다.
+표제·섹션 제목은 무엇을 하는 서비스인지 사실대로 쓴다. "28개 도시가 10초마다 묻는다"처럼 지점을 사람처럼 말하게 하는 문장(무생물 주어 + 사람 동사)을 "28개 지점에서 10초마다 점검"으로 바꿨다. 안내판은 디자인 은유로만 두고 카피에서는 "지점별 응답 시간", "점검 방식"처럼 운영 담당자가 쓰는 말을 쓴다. 어미는 합니다체 하나로 통일한다.
 
-[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)에 따라 illustrative latency frame, 시간·단위 설명, 실제 probe 부재 표기를 각 값·행동 가까이에 유지한다.
+## 진실 범위
 
-## 2026-09-12 현재 검증 기록
+헤더 아래 띠 한 곳("지점·응답 시간·요금은 예시이며, 이 페이지는 실제 점검을 실행하지 않습니다")과 요금표 열 머리글 `요금(예시)` 한 번. 표제·히어로 본문·안내판 셀에는 고지 문구를 넣지 않는다.
 
-- `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이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+## 검증
+
+- `node tools/instrument-showcases-e2e.mjs` — 내부 앵커 대상 존재·Tab 도달, 표 읽기 가능.
+- `node tools/similarity.mjs` — 재작업 엄격 대상.
+
+## 내비·푸터 결정 (2026-10-06 연장)
+
+- 내비 없음: 섹션이 넷(히어로·응답 시간·점검 방식·요금)이고 행동은 하나(무료 요금제로 시작)뿐이라 상단 바의 섹션 링크를 뺐다. 상단 바에는 워드마크와 `.btn.btn-head` "무료로 시작"(`#plan-free`, 요금표의 무료 행)만 남긴다. 히어로의 "요금 보기"·"점검 방식 보기" 두 링크도 같은 이유로 뺐다 — 표가 바로 아래에 있어 안내가 필요 없다.
+- 푸터: 다음 행동 하나 크게. `.foot-cta`(노랑 낱장 색, 표제 크기 `--step-3`, 높이 9~15rem)가 푸터 면적의 대부분이고, 아래 한 줄에 브랜드와 쇼케이스 표기만 둔다. 링크는 헤더와 같은 `#plan-free`. 가입 화면은 없다(진실 범위: 이 페이지는 계정을 만들지 않는다)고 이미 띠에 적혀 있으므로 푸터에 고지를 반복하지 않는다. 검은 푸터 위 포커스 링은 잉크색이 사라져 노랑(`--surface`)으로 바꿨다.
+
+## 변경 기록
+
+- 2026-10-06 연장: 상단 바 내비 제거, 히어로 행동 2개 제거, 푸터를 "다음 행동 하나 크게"로 교체. 토큰·서체·히어로 구도·표·플랩 모션은 그대로. E2E(`instrument-showcases-e2e.mjs`)가 보는 내부 앵커는 `#main`·`#plan-free`로 줄었고 모두 대상이 있다.