feat: strengthen design skill and refresh all showcases

apps/site/design.md

@@ -1159,6 +1159,83 @@ Pretendard `dynamic-subset` 은 유니코드 범위별로 파일을 쪼개고
 - 갤러리 카드 네 장과 공유 이미지 두 장은 확정 화면을 실제 Chrome으로 다시 캡처했다.
 - 구현 중 발견한 21개 교훈은 `research/showcase-duo-learning-ledger-2026-08-29.md`에 근거와 함께 남겼고, 재사용 가능한 규칙은 `packages/skill/references/trustworthy-showcases.md`와 관련 게이트 문서에 반영했다.
 
+## 전 쇼케이스 반응형·여백 재감사 (2026-08-30)
+
+### 연장 범위와 유지한 방향
+
+이 판은 새 콘셉트로 갈아엎지 않는 **연장 경로**다. 21개 showcase의 서로 다른 프리셋과 실제/생성 이미지, 정보 구조는 유지하고, 화면이 커지거나 작아질 때 그 의도가 무너지는 지점만 고쳤다. 위의 "기존 16종에 남아 있는 것"은 이 항목으로 대체된다.
+
+- **본문과 정보 표면을 분리했다.** 1920·2560px에서 문장·폼은 기존 `measure`를 지키고, CFD 사양·시세·원장·관리 작업대·히어로처럼 정보 밀도가 필요한 표면만 named wide container로 넓혔다. 전역 `max-width`를 풀어 빈 여백을 만든 곳은 없다.
+- **가시 내용의 경계를 고쳤다.** 버튼·검색·select·저장 동작·모바일 프리셋·지도 핀의 hitbox와 실제 텍스트에 여백을 주고, 첫/마지막 table/flex 셀의 0px padding을 제거했다. 입력 상자의 실제 겹침도 DOM rect로 검사한다.
+- **읽기와 접근성을 함께 고쳤다.** 저대비 보조 토큰을 WCAG AA에 맞게 조정하고, `transition: all`을 대상 속성으로 분리했다. 갤러리의 클릭 div는 overlay button으로 바꾸고, 표 header `scope`, skip link, input label/name/autocomplete, `prefers-reduced-motion`, icon button 이름, 이미지 intrinsic size를 보완했다.
+- **가상 흐름의 진실 범위를 가깝게 표시했다.** 청온·카스크·마테리아의 견적/예약/갤러리 예시는 행동 근처에서 예시·저장/전송 없음 범위를 알리고, 만들어 낸 연락처·기본 개인정보·가짜 평점은 제거했다.
+
+### 감사기와 기준 화면
+
+`tools/showcase-audit.mjs`는 기본 폭을 `320, 390, 768, 1440, 1920, 2560`으로 확장했다. 실제 렌더에서 가로 overflow, 대비, h1, 컨트롤 줄바꿈뿐 아니라 다음을 hard fail로 잰다.
+
+- 버튼 라벨·field value·표/ARIA cell의 가시 좌우 inset(기본 8 CSS px)
+- visible input/select/textarea의 면적 겹침
+- native/ARIA table cell의 실제 글자와 셀 테두리 사이 여백
+
+CSS `color-mix()`가 Chromium에서 반환하는 CSS Color 4 `color(srgb …)`와 반투명 background 합성을 파서에 반영했다. 또 sr-only/aria-hidden 장식/빈 overlay를 `Range.selectNodeContents()`로 가시 텍스트에 섞어 여백 실패를 만들던 측정 오류를 text node 단위로 고쳤다. 테스트 도구의 false RED를 UI 수정으로 덮지 않는다.
+
+가온의 세 시각 기준은 44px 알림 hitbox와 캘린더·요약 표의 좌우 여백이라는 의도 변경을 실제 current/baseline 캡처로 비교한 뒤에만 갱신했다. `tools/visual.mjs --update-baseline=<이름,...>`로 대상 기준만 갱신할 수 있게 하여 다른 기준 화면을 재촬영으로 덮지 않는다.
+
+### 6단계 증거
+
+- 전 쇼케이스 정적 실렌더: **26개 HTML × 6개 폭 = 156/156 PASS**
+- 저장소 전체 `npm run verify`: L0~L6 **전 계층 PASS**. 여기에는 실렌더 156, 메인 디자인 게이트 178, 제품 게이트 15, 시각 회귀 30, WebKit 8, 최근 쇼케이스 E2E 115, TWENTYOZ E2E 148, 쇼케이스 듀오 90 scenario / 350 assertion / 12 capture가 포함된다.
+- `npm run build`: 성공. 배포 텍스트 한자 검사도 **98개 파일 PASS**.
+- 21개 카드의 현재 화면/보조 화면과 듀오 OG를 실제 Chromium으로 다시 캡처했다.
+
+### 재사용 규칙 승격
+
+문헌 근거와 이번의 RED→GREEN 증거는 designpaca skill의 `references/layout.md`, `references/preflight.md`, `references/audit-gate.md`에 반영했다. 초광폭 레이아웃을 별도 상태로 다루고, WCAG의 최소 target size와 프로젝트의 시각 여백 기본값을 구분하며, 반응형 표·폼·진실 라벨·측정기 정확도를 함께 게이트로 유지한다.
+
+## 정적 쇼케이스 재구성 · 모달 위치 · 초광폭 이미지 계약 (2026-08-30)
+
+### 이번 판의 판단
+
+최근의 상태형 작업물(목요일 화원, 마테리아, 한남자리, 철판클럽, RFS, 새벽청과, TWENTYOZ)은 이미 각 도메인의 정보 구조와 상호작용이 충분히 구분되어 있어 새 문법으로 덮지 않았다. 대신 그 안의 팝업 위치·짧은 화면·초광폭 수축 결함만 고쳤다. 오래된 정적 쇼케이스는 다음 10개를 실제 정보 표면과 첫 화면의 판단 근거가 보이도록 재구성했다.
+
+- `baekje-celadon`, `font-foundry`, `form-architecture`, `hyang-incense`: 전시·활자·도면·기록이 첫 시야에서 행동과 함께 읽히도록 재배치
+- `lumina-optics`, `orbit-aerospace`, `pulsegate`, `synapse-bci`: 빛/비행/접근/임상이라는 주장에 대응하는 실제 시험 조건·표본·한계를 판독 레지스터로 고정
+- `muwol-coffee`, `overtone-sound`: 장식적 영웅면 대신 로스터의 좌표/원장과 설치 아카이브의 조건을 정보 밀도로 구성
+
+### 사용자 보고에서 고정한 계약
+
+- 마테리아의 native dialog는 전역 reset이 UA `margin`을 지워 좌상단에 붙었던 결함이었다. 프로젝트 modal과 한남 듀플렉스 gallery lightbox에 `fixed + inset:0 + margin:auto`와 viewport 상한·내부 scroll owner를 명시했다. 390·1440·2560에서 중심 오차 0~0.008px, 배경 scroll lock을 자동 단언한다.
+- 가온의 알림 메뉴, 한남자리 공개 메뉴와 관리자 조사관은 390×320에서 화면 밖/0px scroll 상태가 되지 않도록 viewport-bound와 short-height 구성을 분리했다.
+- 철판클럽은 2560에서 hero `1680px`, copy `688px`, media `856.7px`, 다음 content rail `1400px`으로 고정했다. 사진을 화면 반까지 무한 확장하지 않으며, `stage-wide/media-wide/copy-wide/workbench-wide`를 구분한다.
+
+### 재발 방지와 증거
+
+`tools/audit.mjs`가 마테리아 두 modal의 중심/scroll lock을 390·1440·2560에서, 한남자리 짧은 화면 scroll owner와 가온 알림 메뉴를 390×320에서, 철판클럽 hero/media/content rail을 2560에서 hard fail로 검사한다. 이 규칙은 공통 스킬의 `layout.md`, `preflight.md`, `audit-gate.md`에 승격했다. 모달의 포커스·키보드·닫기 계약은 [WAI-ARIA APG](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)를 근거로 한다.
+
+### 공개 캐시 확인
+
+정적 CSS의 stable URL은 HTML만 새로 배포해도 사용자 브라우저에 이전 스타일을 남길 수 있다. 이번 수정의 `main/site/tokens/franchise/landing/admin` 링크와 CSS `@import` 버전을 함께 올렸다. 공개 검증은 HTTP 200이 아니라 새 stylesheet href와 새 토큰·핵심 computed value가 실제로 로드됐는지까지 확인한다.
+
+### 후속 정착 프레임 캡처·초광폭 보정 (2026-08-30)
+
+- 모든 쇼케이스 카드·OG 캡처 경로를 `tools/capture-stable.mjs`로 통합했다. `file://` 즉시 스크린샷 대신 no-store 로컬 HTTP에서 폰트·이미지 decode·페이지별 bounded settle을 기다린 뒤, reduced-motion 환경과 video/audio·WAAPI·rAF 정지로 완성된 한 프레임을 저장한다. local 4xx, pageerror, 깨진 이미지는 결과물 생성 실패로 취급한다.
+- 철판클럽의 2560px 히어로는 기존 1680px cap이 실제로 지나치게 좁아 양쪽에 맹탕을 만들었다. 히어로만 `2160px`, 카피 `900px`, 미디어 `1120px`으로 분리하고 메뉴/본문 레일은 `1400~1480px`에 남겼다. 넓은 화면은 하나의 전역 상한이 아니라, 시선의 중심이 되는 히어로와 읽기/정보 표면이 각각 다른 폭을 소유한다.
+- 이미지 생성은 제공된 실제 사진을 대체하지 않는다. 브랜드가 요구하는 정확한 장면·광학적 분위기 같은 시각 자산이 실제로 비어 있고, 생성물·연출 라벨을 함께 둘 수 있을 때만 이미지 바이블의 슬롯별로 생성한다. 이번 두 결함은 각각 레이아웃과 WebGL 역할의 문제라서 생성 이미지로 덮지 않는다.
+
+### 사용자 보고로 보강한 과정 분할 계약 (2026-08-30)
+
+- 철판클럽의 `process`는 hero와 별도의 텍스트/이미지 분할 표면이다. 기존 모바일/중간 폭의 `padding-left: calc((100vw - --wrap) / 2)`가 초광폭 규칙에 남아 2560px에서 실제 제목·설명 너비를 **12px**로 만들었다. hero만 통과한 것은 이 결함의 증거가 아니다.
+- 초광폭 과정 표면은 `--stage-wide` 1680px 안에서 copy **822px**, media **856px**로 제한하고 양쪽 logical padding을 함께 재설정했다. 제목은 의도한 2줄, 목록 문장은 읽는 폭으로 돌아왔으며 사진은 화면 절반까지 팽창하지 않는다.
+- `tools/audit.mjs`는 hero뿐 아니라 이처럼 DOM/여백 규칙이 다른 각 text-media split의 rail, copy/media 폭, 실제 제목 폭과 줄 수를 2560px에서 hard fail로 잠근다. 재사용 스킬의 preflight·layout·audit 규칙도 같은 원리로 보강했다.
+
+### 사용자 코멘트로 정정한 제품 카피와 이미지 계약 (2026-08-30)
+
+- 가상 흐름이라도 사용자가 하려는 일이 아닌 제작 목적을 문구로 노출하지 않는다. `화면 동작용`, `쇼케이스`, `저장`처럼 구현을 설명하는 말은 `실제 주문·결제·저장을 제공하지 않습니다`처럼 행동과 한계를 함께 이해할 수 있는 말로 바꾼다.
+- 조합 결과에 영속 동작이 없으면 저장 버튼이나 성공 상태를 만들지 않는다. 다음 행동은 실제로 가능한 범위 안에서 가상 매장 안내처럼 목적이 분명한 경로로 연결한다.
+- CSS 조각으로 제품 자체를 흉내 내지 않는다. 철판클럽의 싱글 버거는 전용 4:3 생성 이미지(`assets/single-smash-generated.webp`, `960×720`)로 바꾸고 카드 안에 `생성 이미지` 라벨을 붙였다. 제품 사진은 제품을 고르는 근거이고, DOM 도식은 비교·설명에만 쓴다.
+- 조합기처럼 반복되는 fieldset은 경계선만으로 묶지 않는다. 다음 fieldset 앞에 16px의 명시적 간격을 두고 1217px 실화면에서 legend와 이전 선택지가 붙어 보이지 않는지 확인한다.
+
 ## 홍보 사이트 전면 재설계 — Quiet Editorial Proof Surface (2026-08-30)
 
 ### 문제와 방향
@@ -1214,3 +1291,15 @@ Pretendard `dynamic-subset` 은 유니코드 범위별로 파일을 쪼개고
 - `2026-08-30` · 국소 — 히어로 아래 방향 결정·토큰 조판·검증 프레임과 7단계 진행 레일도 각각의 named CSS view timeline에 연결한다. 본문과 수치는 움직이지 않고 방향선·글립·토큰 표본·검사 화살표·짧은 진행선만 transform/opacity로 보간하며, 검증 프레임의 가장 넓은 판은 두 작은 판을 맞추는 고정 기준면으로 남긴다. 모바일 검증 완료 지점은 sticky GNB 아래 제목 여유 24px 이상에서 끝나도록 앞당기고, 미지원 브라우저·감소 모션·이펙트 제거 상태는 정적 완료 화면을 사용한다. KO/EN 전진·역스크롤 geometry 8개, 320~2560px 반응형, effects-off와 감소 모션을 80/80 시나리오·1000/1000 단언으로 고정한다.
 - `2026-08-30` · 국소 — 사용자 체감 실패를 반영해 방향 결정·토큰과 조판의 timeline subject를 article에서 실제 `.direction-stage`·`.type-stage`로 내리고, 방향 면·벡터·세 노드와 글립·세 토큰 표본을 각 자식의 첫 가시 시점 이후에 서로 다른 범위로 조립한다. 글자 대비는 opacity로 낮추지 않으며 미지원·감소 모션·이펙트 제거 상태는 정적 완료 화면이다. KO/EN × 390/1440에서 110px 실제 wheel 전진·역진, offscreen 진행 상한, 가시 구간 dwell, 독립 위상과 token stagger를 새 E2E 계약으로 추가했고 전체 85/85 시나리오·1094/1094 단언을 통과했다.
 - `2026-08-30` · 사용자 실화면 정정 — Direction의 한 줄짜리 독립 변형을 폐기하고, 정확한 세 점 좌표를 공유하는 두 SVG 선분으로 나눠 시작점을 고정한 채 스크롤로 길이만 드러낸다. 노드는 이동하지 않고 앞 선분이 좌표에 닿은 뒤 같은 중심에서 나타나며, 모바일도 `xMidYMid meet`로 비율을 보존한다. 마지막 선과 점은 `cover 80% / 86%` 안에 끝내 sticky GNB 아래에서 완성 상태를 읽을 시간을 남긴다. Tokens는 글립·기준선·세 역할 표본, Verification은 두 가변 프레임·네 검사 화살표, Process는 작은 행 장식 대신 목록 전체 높이의 연속 진행선을 각 named view timeline으로 보간한다. 실제 앱 브라우저 1316×1272에서 110px 전진·역진과 Direction endpoint 연결을 확인했고, KO/EN 320~2560px 전체 게이트는 86/86 시나리오·1122/1122 단언·8/8 캡처로 통과했다.
+
+### 디자인 전문성 근거와 홍보 카피 정렬 (2026-09-12)
+
+- Quiet Editorial Proof Surface의 밝은 Wanted Sans·신호 적색·이미지 없는 산출물 표본 세 개와 히어로의 양방향 스크롤 계약은 그대로 둔다. 고객 성과처럼 읽힐 수 있는 프로젝트 캡처를 홈에 되돌리지 않으며, 실제 사이트는 낮은 위계의 `/showcase/` 또는 `/en/showcase/` 링크로 직접 찾는다.
+- 히어로는 웹 디자인 원리와 실제 사례 조사, 브랜드 맥락에 맞는 방향 결정, 반응형 구현, 실화면 검증을 한 제품 흐름으로 설명한다. 이 순서는 [NN/g의 사용성 휴리스틱](https://www.nngroup.com/articles/ten-usability-heuristics/)으로 확인하는 보편 기준과, 프로젝트 목적에 맞춰 선택하는 시각 스타일을 구분하는 근거를 드러낸다.
+- 검증 근거는 수나 전환 성과로 포장하지 않는다. `7`은 0~6 파이프라인이고, 나머지 두 사실은 근거·맥락의 분리와 기능 검사/실화면 검토의 분리다. [Webby Awards 심사 기준](https://www.webbyawards.com/judging-criteria/)의 콘텐츠·구조와 내비게이션·시각 디자인·기능성·상호작용·전반 경험 구분도 화면의 인상만으로 품질을 단정하지 않는 보조 근거로 쓴다.
+- 세부 검사에는 320px, 대비, 키보드, 감소 모션, 200% 확대, 실제 전후 화면의 구성·위계·반응형 동작, 출처 연결을 포함한다. 기존의 토큰·SEO 검사는 유지하되, 프로젝트에 따라 달라지는 검증 범위를 단일 하드 게이트 수로 홍보하지 않는다.
+- 보존한 계약: 실제 고객 성과 주장 없음, 홈 산출물에는 이미지 없음, 히어로 그래픽과 모션은 변경하지 않음, 한국어·영어는 같은 정보 구조와 목적지 링크를 가짐. 빌드한 사이트 E2E는 86개 시나리오·1,122개 단언·8개 캡처를 통과했고, 개발 서버의 별도 증거는 KO/EN × 320·390·768·1440·1920·2560에서 overflow 0, 새 링크 12/12의 44px 이상 hit area와 키보드 목적지 2/2를 확인했다. 실제 클립보드 권한은 이 headless 환경에서 거절되어 두 언어 모두 선택 복사 안내와 전체 명령 선택으로 안전하게 전환됨을 확인했다. 새 캡처와 JSON은 `outputs/design-expertise-20260912/home/`에 보관한다.
+
+### 확대 텍스트 표본 보정 (2026-09-12)
+
+- 홈의 Direction 표본 문장은 절대 배치와 `overflow: clip` 조합에서 200% 확대 시 잘릴 수 있었다. 문장을 `position: relative`의 normal flow로 옮기고 기존 왼쪽 48%·너비를 유지했다. stage는 `display: flow-root`로 첫 자식 margin의 외부 collapse를 막는다. 기본 2:1 표본은 stage width 기준 `margin-top: 24%`, `margin-bottom: 5%`로 기존 중앙 위치를 보존하며, 긴 문장은 stage 높이를 자연스럽게 늘린다. 모바일 16:9에서는 `margin-top: 27%`, 28rem 이하에서는 기존 왼쪽 39%·너비 55%를 유지한다.