feat: strengthen design skill and refresh all showcases

apps/site/public/work/overtone-sound/design.md

@@ -0,0 +1,27 @@
+# Overtone Sound Lab design.md
+
+## 브리프
+
+- 무엇을: 공간 음향 작업 기록의 가상 아카이브.
+- 누구에게: 작업명·연도·공간/기술 메타를 읽으면서 음향의 분위기를 느끼려는 방문자.
+- 제약: 앰버, 큰 타입, 아카이브의 의도적 엇갈림, 캔버스 outside-pause와 reduced-motion을 유지한다.
+
+## 결정표
+
+| 축 | 관찰과 적용 범위 | 결정·역할 토큰 | 기각 조건 |
+|---|---|---|---|
+| 구도 | 기준 화면에서 파형이 제목·설명 뒤로 지나가 텍스트가 불안정했다. | 왼쪽 텍스트 표면과 오른쪽 파형 표면을 독립 그리드로 둔다. `--container`, `--space-7`, `--line`. | 파형 표면이 모바일에서 제목보다 먼저 오거나 별도 표면의 의미를 잃으면 순서를 되돌린다. |
+| 타입 | 제목은 감각적 표면, 아카이브는 비교 가능한 기록이다. | 제목 `--step-3`, 작업 제목 `--step-2`, 연도·메타 `--step--1`을 유지하고 각 작업에서 같은 열에 정렬한다. | 200%에서 작업 제목·연도·메타의 관계가 깨지면 스태거를 제거한다. |
+| 색 | 앰버는 파형과 연도만 잇는 신호다. | `--accent`, `--accent-dim`, `--surface-raised`를 파형/연도/파형 표면에만 쓴다. | 앰버가 본문과 경쟁하거나 가상 표기를 약화하면 면적을 줄인다. |
+
+## 근거와 경계
+
+[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 관련 맥락색 관찰은 앰버와 갈색 바탕의 대비에만 적용했다. 이는 청취 경험의 성능 법칙이 아니다.
+
+[trustworthy-showcases.md](../../../../../packages/skill/references/trustworthy-showcases.md)에 따라 가상 아카이브와 작업·장소·수치 예시 표기를 기존 가까운 설명에 유지한다.
+
+## 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이다.
+- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.