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

@@ -2,26 +2,48 @@
 
 ## 브리프
 
-- 무엇을: IOR와 분산을 조작하는 가상 광학 시험대.
-- 누구에게: 광선 모델의 조건과 결과물을 함께 읽으려는 방문자.
-- 제약: WebGL/정적 폴백, 기존 슬라이더와 가상·측정 아님 표기를 유지한다.
+- 무엇을: 굴절률과 분산을 직접 바꿔 보는 가상 광학 브랜드의 프리즘 시험대(L-85).
+- 누구에게: 렌즈 사양표의 숫자가 빛의 경로에서 무엇을 뜻하는지 손으로 확인하고 싶은 사진가·광학 입문자.
+- 제약: WebGL과 정적 폴백(움직임 줄이기·WebGL 불가), 기존 슬라이더 두 개(`#ior`, `#disp`)와 출력값 계약을 유지한다.
+- 기본 언어: 한국어(`lang="ko"`). 2026-09판은 영어였고 언어 결정 기록이 없었다(레드팀 06 P1-5). 브랜드명만 라틴으로 둔다.
+
+## 2026-10 재작업 이유
+
+2026-09판은 pulsegate·synapse-bci와 같은 틀이었다 — 니어블랙 바탕, 모노 소문자 워드마크, 왼쪽 글·오른쪽 다크 패널, radius 2px, IBM Plex. `tools/similarity.mjs` 기준 두 페이지와 유사도 0.84·0.83. 헤드라인 "bent honestly"는 정직함을 변명했고 히어로 본문이 면책 문구였다.
 
 ## 결정표
 
-| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
+| 축 | 이 브리프의 재료 | 결정·역할 토큰 | 기각 조건 |
 |---|---|---|---|
-| 구도 | 기준 1440 화면에서 큰 프리즘이 제목과 조작을 폴드 아래로 밀었다. | 제목·한계 설명을 상단에 두고 `9:4` 캔버스/제어 프레임을 배치한다. `--container`, `--space-4`, `--space-6`. | 캔버스가 제어보다 큰 면적을 차지해 둘 중 하나가 첫 화면에서 사라지면 재조정한다. |
-| 타입 | 제목은 모델의 의미, 모노는 조건과 조작값을 읽게 해야 한다. | `--step-3` 제목, `--step--1` 시험대 원장과 제어 보조문을 유지한다. | 실제 긴 라벨이 320px 또는 200% 확대에서 제어를 밀면 폭·간격을 수정한다. |
-| 색 | 스펙트럼만 광학 결과를 나타내며 UI 색은 보조여야 한다. | `--surface`, `--surface-raised`, `--accent-stroke`을 프레임·포커스·입력에만 쓴다. | UI 색이 캔버스의 분산 광선보다 먼저 읽히면 채도를 줄인다. |
+| 바탕 | 사진가가 노출을 맞추는 18% 그레이 카드. 광학 시험은 중성 회색 위에서 색을 판단한다. | `--surface: #a6a9a9`(L*≈68). 카드 값(#777)은 본문 대비가 4.5:1에 못 미쳐 명도만 올렸다. | 회색 위 보조 글자 대비가 4.5:1 아래로 떨어지면 `--ink-muted`를 더 어둡게 한다. |
+| 색 | 기존 판의 기준광 632.8 nm는 헬륨네온 레이저의 빨강이다. | `--accent: #d4231a`는 입사 빔·눈금·손잡이에만. 글자에는 쓰지 않는다. 스펙트럼은 캔버스만 소유한다. | 빨강이 스펙트럼보다 먼저 읽히면 선 굵기를 줄인다. |
+| 구도 | 손잡이 두 개와 프리즘이 같은 장치라는 것이 이 페이지의 요점이다. | 표제가 폭을 가로지르고, 아래 검은 시험 상자(`--surface-chamber`, `--radius: 28px`) 안쪽 하단에 조작 레일을 넣는다(961px 이상). 1440×900에서 상자와 두 출력값이 첫 화면에 함께 보인다. | 레일이 프리즘을 가리면 카메라 `position.y`를 조정한다. 좁은 화면은 레일을 상자 밖으로 뺀다. |
+| 타입 | 출력값 `1.52`, `0.18`과 사양 `85 mm`·`6군 7매`가 페이지의 이미지다. | SUIT 한 가족(본문 400, 표제·숫자 900), `tabular-nums`. 모노를 쓰지 않는다 — 2026-09판의 모노 소문자 메타가 템플릿 지문이었다. | 숫자 폭이 흔들려 출력값이 좌우로 튀면 `font-variant-numeric`을 다시 확인한다. |
+| 형태 | 렌즈는 원이다. | 단면 사진을 원형으로 자르고, 워드마크도 원 + 빔 한 줄로 만든다. 조작부는 알약형. | 원형 크롭이 경통 구조를 잘라 단면이 읽히지 않으면 크롭 중심을 옮긴다. |
+| 모션 | 시험대는 사람이 만질 때만 움직인다. | 스크롤 등장 애니메이션을 전부 뺐다. 드래그·슬라이더 입력에만 다시 그린다. | — |
 
-## 근거와 경계
+## 진실 범위
 
-[art-direction.md](../../../../../packages/skill/references/art-direction.md)의 Hofmann 관련 구도·군집 관찰을 제목/작업면 분리에만 적용했다. [typography.md](../../../../../packages/skill/references/typography.md)의 Ruder 관련 실제 카피·수치 proof 범위를 타입 계층에만 적용했다. [visual-design-lineage.md](../../../../../packages/skill/references/visual-design-lineage.md)의 Albers 관련 색 맥락은 캔버스와 UI 표면의 대비 확인에만 적용했다. 이 세 자료는 성능·이해도 법칙으로 사용하지 않는다.
+헤더 아래 띠 한 곳이 페이지 전체의 가상 범위를 소유한다("렌즈 L-85의 구성·곡선·사양은 설명을 위해 만든 값"). 사양표는 열 머리글 `값(예시)`에서 한 번만 표기한다. 히어로 본문과 표제에는 고지 문구를 넣지 않는다([trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md) 공통 부모 1회 규칙).
 
-[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)의 진실 범위에 따라 모델·사양·곡선의 illustrative 표기를 가까운 공통 표면에 유지한다. 캔버스 안에는 텍스트를 굽지 않는다.
+## 검증
 
-## 2026-09-12 현재 검증 기록
+- `node tools/instrument-showcases-e2e.mjs` — 움직임 줄이기 정적 폴백(`#hud-note` 문구를 한국어로 바꿔 검사 정규식에 `움직임 줄이기`를 추가), 슬라이더 출력 변화.
+- `node tools/similarity.mjs` — 재작업 엄격 대상. 다른 20종과 유사도 임계 0.78 미만.
 
-- `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이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+## 2026-10-02 카피 기준 수정 기록 (번역체·과장 카피 제거)
+
+기준: `outputs/redteam-2026-10-01/copy-criteria.md`. 레이아웃·토큰은 바꾸지 않고 화면 문장만 고쳤다.
+
+- h1 "흰 빛 한 줄이 색으로 갈라지는 각도"(명사 종결 수수께끼)를 "굴절률과 분산을 직접 바꿔 보세요"로 바꾸고, 키커에 "L-85 85mm f/1.8"을 넣어 렌즈 소개 페이지임을 먼저 밝혔다.
+- "유리 일곱 장이 빛의 길을 나눠 맡는다", "렌즈는 굴절의 사슬입니다", "색 번짐을 붙잡습니다"(무생물 주어 + 사람 동사·은유)를 "6군 7매 구성과 렌즈별 역할", "색 번짐을 줄였습니다"로 바꿨다.
+- "MTF는 조건과 함께 읽는다"(잠언형, 반말)를 "MTF 곡선과 측정 조건"으로 바꾸고 본문을 합니다체로 통일했다. "손잡이"는 화면 UI에 맞춰 "슬라이더"로 바꿨다.
+
+## 내비·푸터 결정 (2026-10-06 연장)
+
+- 내비: 상단 바 유지(시험대·단면·MTF·사양). 19종 분배표에서 상단 바 5종 안에 든다.
+- 푸터: 고지 띠(브랜드 한 줄 + "designpaca 쇼케이스") 유지. 근거는 마지막 섹션 `.closing`이 이미 행동을 끝냈다는 것 — h2 "굴절률을 바꿔 가며 다시 비교해 보세요" 아래 `.btn` "시험대로 돌아가기"(`#bench`) 하나가 있고, 이 페이지의 유일한 행동은 시험대를 만지는 것이다. 가상 브랜드라 자료 요청·문의 같은 행동을 두면 진실 범위(헤더 아래 띠 한 곳)와 어긋나므로 두지 않았다. 확인: `index.html` 마지막 `<section class="closing">`에 h2 + 버튼 1개, 푸터에는 링크 없음.
+
+## 변경 기록
+
+- 2026-10-06 연장: 토큰·서체·히어로·내비·푸터 모두 그대로. 푸터 고지 띠를 유지하는 근거(마지막 섹션의 행동)만 위에 적었다.