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

@@ -1,27 +1,122 @@
-# Orbit Aerospace design.md
+# design.md — 궤도 우주공학 ORBIT-75 사양서
+
+## 진행 상태
+
+- 0 현행 감사 완료(2026-10-06) · 1 레퍼런스 3슬롯 실측 · 2 카드 3장 → A 선택(위임) · 3 토큰 재정의 · 4 구현(레이아웃 → 유리 → 선 그리기) · 5 검증 통과(아래) · 6 이 문서.
 
 ## 브리프
 
-- 무엇을: 가상 엔진 사양·도면·시험 기록의 읽기 순서를 보여 주는 페이지.
-- 누구에게: 값과 그 측정 조건을 같은 행에서 비교하려는 방문자.
-- 제약: 수치·조건·가상 사양서 표기를 바꾸지 않고, 도면은 설명용 표면으로 제한한다.
+- 무엇을: 가상 메탄 엔진 ORBIT-75의 사양서 한 장. 종단면도, 측정 조건이 붙은 사양표, 지상 연소 시험 다섯 회의 기록.
+- 누구에게: 발사체 통합 엔지니어. 값과 그 측정 조건을 같은 줄에서 읽고 자기 발사체에 맞는지 판단한다. 목표 행동은 없다(가상 브랜드, 자료 요청을 받지 않는다).
+- 제약: 정적 HTML/CSS, 기본 언어 ko-KR(기존 로컬라이제이션). 수치·시험 기록·사진 2장·상호는 바꾸지 않는다. plan.md 배정값(아래 지문) 안에서 고른다. 한자 금지.
+- 화면: `index.html` 한 장.
 
-## 결정표
+## 미확정
 
-| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
+- 방향 선택은 사용자 위임(재작업 분배표). 카드 A를 고른 이유는 "방향" 절.
+- 모든 수치·시험 기록·사진은 예시다(푸터·자료 요청 절에 고지).
+
+## 레퍼런스
+
+| 슬롯 | 출처 | 실측(2026-10-06, 브라우저 1440) | 가져온 것 |
 |---|---|---|---|
-| 구도 | 기준 화면의 모눈이 도면 밖 본문까지 이어져 본문과 도면의 역할이 섞였다. | 모눈을 `.blueprint` 표면에만 두고 본문은 단색 잉크 바탕에 둔다. `--surface`, `--surface-raised`, `--line`. | 본문 줄과 표의 값이 모눈과 경쟁하면 모눈을 더 약화한다. |
-| 타입 | 도면 라벨·치수는 설명이고 사양·시험표는 비교 대상이다. | 도면 라벨을 본문색으로, 치수는 `--font-mono`와 보조색으로 분리한다. | 320px/200%에서 라벨 또는 조건 열이 겹치면 도면·표의 폭을 별도 조정한다. |
-| 색 | 구리는 냉각 경로·리더선의 관계를 보이는 강조 역할이다. | `--accent`, `--accent-stroke`을 유로·리더선에만 사용한다. | 구리선이 값·조건을 가리거나 가상성 표기보다 더 강하면 선 굵기와 대비를 되돌린다. |
+| R1 구조(같은 시장) | 이노스페이스 한빛-나노 https://www.innospc.com/page/sub01_01_1 | 어두운 바탕, 사양을 묶음(OVERVIEW·탑재체·2단·1단)으로 나누고 "엔진추력 34 kN / 연소시간 270 sec / 비추력 325 sec"처럼 값에 단위를 붙인 행. 발사 궤도 도해를 전폭(약 2.3:1) 라벨 도면으로 실음. 본문 IBM Plex Sans KR 16px | 값+단위+조건을 한 행에, 도면은 전폭 라벨 도해로 |
+| R2 톤 | Rocket Lab Electron https://www.rocketlabcorp.com/launch/electron/ | h1 "Electron" 한 낱말 56px/300 자간 넓음, 전폭 사진 무대, 표 "Height 18 m / 59 ft …". 푸터는 5열 색인(Contact·Launch·Space Systems·About·Missions) + 소제목 굵게 | 제품명 한 낱말 표제, 다열 색인 푸터 |
+| R3 디테일 | developer.chrome.com scroll-driven-animations 문서 | 오른쪽 측면 차례 x=1253·폭 163px, 상단 73px 고정, 링크 16/24px, 현재 항목 `aria-current` + 강조색 | 오른쪽 고정 레일 + `aria-current` 현재 위치 |
+| 미검증 | rocketlabcorp·perigee.kr 텍스트 페처 403 → 브라우저로 열어 실측. ursamajor.com/engines/hadley 404 | — |
 
-## 근거와 경계
+## 방향
 
-[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 관련 맥락색 관찰은 구리선과 야간 바탕의 구분에만 적용했다. 원전은 보편 성능 주장으로 사용하지 않는다.
+지문: 표제+전폭 무대(도면 파노라마 4:1) · Orbit / Noto Sans KR · 어두운 청 #081018 · 강조 200° 시안 #45bcf7 · radius 2px · 흐름 [한 낱말 표제 + 사실 목록 → 도면 무대 → 사양표 → 시험 기록표 → 재생냉각(글 + 3:4 사진 유리 패널) → 연소 장면(16:9 유리 패널) → 자료 요청 → 다열 색인] · 오른쪽 고정 측면 색인(좁은 화면은 위쪽 차례 띠) · 다열 색인 푸터(4열) · 이미지 원본 비율, 유리 패널 안, 캡션은 패널 안 하단 · scroll-driven 도면 선 그리기(냉각 유로만), 나머지 정지
 
-[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)에 따라 가상 사양·시험 기록 표기와 값/조건의 가까운 연결을 유지한다.
+한 문장 컨셉: 발사체 통합 엔지니어가 ORBIT-75의 종단면과 사양을 한 화면에서 읽고, 값마다 붙은 측정 조건으로 자기 발사체에 맞는지 판단한다.
 
-## 2026-09-12 현재 검증 기록
+프리셋: dark-instrument 지배. 재질 축만 svg-glass(유리 패널)로 보조.
 
-- `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이다.
-- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+제시한 카드(위임):
+
+| 카드 | 한 줄 | 첫 화면 | 포기하는 것 |
+|---|---|---|---|
+| A. 도면 한 장짜리 사양서 | 엔진 이름을 한 낱말로 크게, 사실 네 줄, 그 아래 눕힌 종단면 파노라마 | 표제 → 사실 4열 → 4:1 도면 무대 | 첫 화면 행동 버튼 없음 |
+| B. 시험장 일지 | 최근 시험 "SF-31, 62 s"가 표제. 무대는 시험 다섯 회의 지속 시간 띠 | 표제 → 시험 띠 → 시험표가 먼저 | 엔진 형상이 첫 화면 밖 |
+| C. 유로 180개 | "구리 유로 180개"가 표제. 무대는 냉각 벽 단면의 반복 유로 패턴 | 표제 → 유로 단면 파노라마 → 재생냉각 글 | 엔진 전체 개요가 늦게 나옴 |
+
+고른 카드: **A** — 브리프가 "엔진 사양서"이고 R1(이노스페이스)이 기체 도해 바로 옆에 사양 묶음을, R2(Rocket Lab)가 제품명 한 낱말을 표제로 둔다. 방문자가 검색창에 치는 말도 엔진 이름이다. B는 시험 한 회에 기대고, C는 부품 하나로 좁다.
+
+반사실: 첫 화면 고유 요소 = Orbit으로 조판한 "ORBIT-75 메탄 엔진", 추력·비추력·연소실 압력·최근 연소의 측정 조건이 붙은 사실 목록, 눕힌 엔진 종단면 도면(인젝터→노즐). 같은 업종 치환(다른 엔진 회사)에서는 수치와 도면이 바뀌어야 하고, 세무사무소로 바꾸면 도면 무대와 사실 목록 구조가 성립하지 않는다 → 3개, 통과.
+
+수렴(B-2, form-architecture와 대조 — 같은 히어로 패밀리·측면 색인·scroll-driven 배정): 섹션 흐름 다름(표제+무대 → 표 → 표 → 사진 vs 표제+무대 → 도면+사양 → 사진 → 연구소) · 히어로 글 묶음 다름(한 낱말 + 사실 목록 vs 긴 문장 3줄 단독) · 내비 같음(측면 색인; 좌/우, 고정 방식 같음) · 푸터 다름(다열 색인 vs 워드마크) · 이미지 다름(원본 비율 컬러, 유리 패널 안 캡션 vs 흑백 극단 비율, 캡션 위/아래) · 모션 같음(scroll-driven 선 그리기) → 같음 2/6, 통과. B-1(히어로 5축): 구도 같음, 표제 서체 다름, eyebrow 둘 다 없음(같음), CTA 둘 다 없음(같음), 캡션 문법 다름 → 3 같음. 둘 다 "없음"이 같음으로 세는 규칙이라 걸리지만, 라벨·버튼 없음은 plan.md 배정값이다(표제 꼴 "라벨 없음", 패밀리가 첫 화면 버튼을 포기). 배정자 판단으로 수용.
+
+표현 리스크: Orbit(모노 셀 한글)으로 표제 한 줄. 과업 적합 이유 — 계기·도면 문맥의 숫자·라틴을 한글과 같은 리듬으로 묶는다. 검증 — 1440 한 줄, 390 두 줄(마지막 줄 2어절), 글리프 충돌 없음(final-1440-fold, final-390-fold).
+
+보존 자산: 상호 궤도 우주공학, ORBIT-75 수치 6개와 조건, SF-27~31 기록, 사진 2장(channel-macro 3:4, static-fire 16:9), 섹션 id `engine`·`spec`·`fires`·`contact`(E2E 앵커), 표의 `thead`/`tbody` 구조(E2E 가독 판정), 배경 #081018.
+
+## 토큰과 예산
+
+값: `styles/tokens.css`. 역할만 적는다.
+
+- 서체: Orbit(표제·색인 번호·캡션 번호. Google Fonts 한글 슬라이스 있음, 웨이트 400 하나) / Noto Sans KR 400·500(본문·표·사실 값). 모노 없음 — 숫자는 `tabular-nums`.
+- 색: surface #081018(유지), ink/muted/faint 대비 16.2 / 8.7 / 6.2, accent #45bcf7(HSL 200°, 대비 8.9; similarity 도구는 OKLCH 250°로 보고), accent-stroke(유로 선, 6.2), ink-on-glass(유리·모눈 위 캡션 전용).
+- 스케일: 13 / 16 / 18 / clamp(22~28) / 표제 clamp(40~104)px. 행간 본문 1.7, 제목 1.3, 표제 1.1. measure 36em.
+- radius 2px. 간격 4·8·16·24·40·64·96·clamp(72~136).
+- 유리: fill rgb(14 24 35 / .58), blur 14px, 헤어라인 linear-gradient 100°(conic 금지, svg-glass §1), reduced-transparency에서 불투명.
+
+예산(tokens §5 데모/포트폴리오) 실측(로컬, Chrome):
+- JS 0.9KB 인라인(색인 현재 위치만) · 히어로 전송 ≈ 700KB(이미지는 lazy, 첫 화면 0KB).
+- 폰트 344KB(Orbit 61 + Noto Sans KR 가변 슬라이스 283, 파일 21개) — **200KB 초과, 올렸다.** 본문 한글 범위가 슬라이스 20개를 건드린다. 배정 서체를 지키면서 줄일 수단(자체 서브셋 호스팅)은 공통 규칙 8(Google Fonts/jsdelivr 링크)에 막힌다.
+- LCP 448ms(1440, h1) / 324ms(390) · CLS 0.0007 / 0.0345(390, Orbit swap 전후 표제 높이) · INP 미측정(실기기 없음).
+
+## 이펙트와 폴백
+
+- 도면 선 그리기: `.bp-cool`·축 화살표에 `pathLength="1"` + `stroke-dasharray: 1`, `@supports (animation-timeline: scroll())` 안에서 `scroll(root block)` 0~60vh 구간에 dashoffset 0.55 → 0. 실측 1440: 스크롤 0 → 0.55, 250px → 0.30, 700px → 0. 390(세로 도면): 0.55 → 0.007(500px). 감소 모션·Firefox(미지원)·가드 밖: dashoffset 0 = 완성 상태.
+- 유리 패널: `backdrop-filter: blur(14px) saturate(1.25)` + 마스크 헤어라인. 뒤에 섹션의 시안 radial 글로우를 두어 흐림이 보인다. 굴절(`backdrop-filter: url()`)은 쓰지 않았다 — 모눈이 휘면 도면이 아니다. 본문 텍스트에는 `filter`를 걸지 않는다. `prefers-reduced-transparency`에서 불투명 + blur 4px.
+- 측면 색인 현재 위치: IntersectionObserver(rootMargin −35%/−55%)가 `aria-current`를 옮긴다. JS 없으면 01이 정적 current.
+- 좁은 화면(≤40rem): 가로 4:1 도면을 숨기고 세로 종단면(460×560)을 보인다(layout §2-b "무대 비율을 다시 정한다"). 라벨은 SVG 안 16px 단위 → 실제 약 12px.
+
+## 하지 않기로 한 것
+
+- 스크롤 리빌(IntersectionObserver fade-up) 전부 삭제 — 배정표에 없다.
+- 상단 고정 바·backdrop 헤더 — 측면 색인으로 대체. 좁은 화면 차례 띠는 접지 않는다: 접으면 안의 링크가 포커스를 못 받아 instrument E2E(40번 Tab 안 모든 앵커 도달)가 깨지고, 항목 6개가 두 줄에 들어간다.
+- 모노 서체(JetBrains Mono) — 하우스 룩, 한글 혼용 라벨 흩어짐.
+- 구리 강조(이전 #d08a5a) — 배정 200° 시안으로 교체. 도면의 열색 은유보다 배정 분포가 우선.
+- 가운뎃점 메타 문자열 전부 쉼표/문장으로.
+- 사진 재처리(듀오톤·흑백) — 배정이 "원본 비율"이고 유리 패널이 처리 역할을 한다.
+- 모바일 하단 행동 바 — 목표 행동이 없다.
+
+## 검증
+
+자동(2026-10-06, apps/site):
+- html-validate 오류 0 · stylelint 통과 · no-hanja PASS 3 files · showcase-audit PASS 6/FAIL 0(320·390·768·1440·1920·2560) · design-gate 충족 12 / 미검증 1 / 실패 0(꺼짐 3: static·visual·webkit) — 미검증 1 = 그라디언트·유리 위 대비 9요소 → 아래 수동 실측으로 닫음 · instrument-showcases-e2e(orbit 블록) desktop·mobile PASS, 앵커 24개 모두 존재·Tab 도달, 표 2개 가독 · similarity 경고 0.
+- 대비 실측(렌더 픽셀 중 가장 밝은 배경 대비, 1440/390): 색인 링크 7.8/8.7 · 사실 dt 5.9 · 사실 조건 8.2 · 도면 캡션 7.0/6.9 · 사진 캡션 8.6 · 도면 라벨 12.6 · 치수 6.8 · 표 조건 6.7 · 표 값 6.8 · 푸터 8.7 · 버튼 8.9. 세로 도면 "유로 (CH₄)"는 스크립트가 윗줄 글리프를 배경으로 잡아 1.07로 나왔으나 2x 캡처(v3-390-stage-2x)에서 선과 겹치지 않음을 눈으로 확인.
+- 키보드: skip → 워드마크 → 색인 6 → (390: 표 스크롤 영역 2) → 사양 다시 보기 → 푸터 링크 15. 포커스 링 2px 시안.
+- 표제 마지막 줄 어절: h1 1440 3 / 390 2, h2 전부 ≥3.
+
+시각 루브릭(critique §2-1, 약한 축부터; 캡처 `outputs`가 아닌 세션 스크래치 `scratchpad/orbit/final-*`):
+
+| 축 | 점수 | 근거 | 2점 반례 |
+|---|---|---|---|
+| R3 묶음·정렬 | 1 | 1440 시작선 x=52(표제·사실·섹션)·x=24(무대)·x=1332(레일) + 표 안 x=68. 넷째 선(표 패딩)을 의미로 설명하기 어렵다 | — |
+| R6 이미지 | 1 | 사진 2장 각 1회, 역할(유로 접사·연소 장면) 기록, 원본 비율. 그러나 390 첫 화면에 사진이 없고(컨셉은 "도면이 주연"이라 실패 신호는 아님) 두 사진의 조도(실내 금속 vs 야간 연소)가 한 세계로 읽히는지는 보는 이에 따라 갈린다 | — |
+| R1 첫인상 | 2 | 3초 문장 "궤도 우주공학의 ORBIT-75 메탄 엔진, 75.4 kN, 단면도와 측정 조건" — final-1440-fold·final-390-fold 모두 | 390에서 도면은 상단만 보인다 |
+| R2 위계 | 2 | 흐림 캡처(final-1440-blur) 시선 표제 → 도면 → 사실 4열. 의도와 같음. 표제/본문 차이 크기+서체+색 | 사실 값 4개가 같은 무게로 나란하다(의도된 목록) |
+| R4 타이포 | 2 | 합성 이탤릭 없음, 자간 −0.01em에서 글리프 충돌 없음, 마지막 줄 어절 ≥2, 모노 한글 없음, measure 36em | Orbit 한글의 넓은 모노 셀이 "메탄 엔진" 낱말 사이를 벌린다(word-spacing −0.3em으로 줄임) |
+| R5 리듬·긴장 | 2 | 묶음 안(사양표→시험표 0) < 묶음 사이(space-8); 극단 = 표제 104px vs 본문 16px(6.5배) | 사진 두 섹션 사이 간격은 다른 섹션과 같다 |
+| R7 카피 | 2 | h2 "값 여섯 개, 측정 조건을 같은 줄에 적었습니다", "지상 연소 다섯 회, 보류한 두 회도 기록에 남겼습니다" — 경쟁사 치환에서 깨짐. §13-c grep 0건, 은유 0, 합니다체 통일 | h1은 제품명이라 화법 비교 대상이 아니다 |
+| R8 구분성 | 2 | 고유 요소 3개(위), B-2 같음 2/6 | B-1에서 "없음=같음" 2축 포함 3 같음(배정값, 위에 기록) |
+| R9 마감 | 2 | 2x 크롭(spec·foot·rail·stage) 숫자 열 정렬, 캡션 여백, 패널 radius 2px 일치. 도면 화살표 방향 수정(위→아래, 좌→우) | — 찾지 못함 |
+| R10 모바일 | 2 | 390 첫 화면: 브랜드·차례·표제·사실·도면 시작. 세로 도면으로 재편집, 사실 목록 1열 | 차례 띠가 두 줄 |
+
+합계 18/20, 0점 없음, R1·R8 2점 — 통과선 충족.
+
+미검증: WebKit 렌더(꺼짐) · Firefox 실행(폴백 코드 경로만) · 실기기 INP · 스크린리더 · `prefers-reduced-transparency` 렌더.
+
+## 피드백 기록 · 보존 목록
+
+- 2026-10-06 재작업(분배표 배정, 방향 위임). 피드백 없음.
+- 보존: 수치·시험 기록·사진·상호·섹션 id 4개·표 구조.
+
+## 변경 기록
+
+- 2026-10-06 · 분배표 재작업 · 분할 히어로+상단 고정 바+고지 푸터를 표제+전폭 도면 무대·오른쪽 측면 색인·다열 색인 푸터로. Pretendard+JetBrains Mono+구리 → Orbit+Noto Sans KR+200° 시안. 스크롤 리빌 삭제, scroll-driven 유로 선 그리기·유리 패널 추가. 가운뎃점 메타 문자열 제거, 섹션 제목을 사실 문장으로.
+- 2026-10-02 · 카피 기준 수정 · h1 "메탄 75 kN, 62초를 태웠다" → "75 kN 메탄 엔진, 지상 연소 62초 완료", 잠언형 문장을 정보 문장으로, 합니다체 통일, 제목·OG를 "ORBIT-75 메탄 엔진 사양"으로.
+- 2026-10-02 · 레드팀 06 · 상투 은유 h1 제거, 면책 문구를 히어로에서 푸터·자료 요청으로 이동("예시" 10회 → 1회), 한글 라벨을 모노에서 본문 서체로.