feat(showcase): 트웬티온스 사이트를 전면 개편한다

apps/site/design.md

@@ -1077,3 +1077,29 @@ Pretendard `dynamic-subset` 은 유니코드 범위별로 파일을 쪼개고
 - **히어로 헤드라인 줄 수 초과** — `pulsegate` 320px 에서 4줄 / 1440px 에서 3줄, `synapse-bci` 3줄 (카운트 규칙 상한 2줄)
 
 전부 `node tools/showcase-audit.mjs <slug>` 로 재현된다.
+
+## TWENTYOZ 쇼케이스 — Precision Spatial (2026-08-24)
+
+### 제품·카피 기준
+
+- 정보 구조와 사실 카피의 단일 기준은 `https://twentyoz.kr/`의 회사·제품·뉴스 공개 자료다.
+- 메인 순서는 `현장 → 운영 원칙 → 제품 → 프로젝트 기록 → 회사 → 문의`다.
+- 제품 상세는 `products.html` 한 페이지에서 VIVEN, EduBill, XD Hub, XD Works를 기능·기술·사양·운영 순서로 공개한다.
+- 공개되지 않은 파트너 역할, 성과 수치, 채용 상태를 추정하지 않는다. 모든 한국어 인터페이스 카피는 존댓말 또는 공식 명사형을 사용한다.
+
+### 시각·3D 규칙
+
+- 콘셉트는 **정밀한 공간 계기**다. 평면 DOM은 직각·선·여백·타이포가 소유하고, 원형과 곡면은 3D 코어만 소유한다.
+- 외부 하드서피스 모델은 Javier Martín Hidalgo의 `Scifi Drone 1.1`을 CC BY 4.0 조건으로 사용하며, 화면 푸터와 로컬 라이선스 파일에 저작자·원본·라이선스를 표시한다.
+- 중심 모델은 전면 `z=0.46`, 호박색 신호 링은 `z=-0.48`, 청록색 스펙트럼 링은 더 크고 얇게 `z=-0.64`에 둔다. 두 링은 코어 뒤에서 깊이 가림되어 형태가 겹쳐 보이지 않아야 한다.
+- 셰이더는 필드 셸, 제한적 bloom, 미세 색수차·비네트·그레인에만 사용한다. 모델 재질을 덮는 임의 `onBeforeCompile`은 금지한다.
+- WebGL 실패·감소 모션·문서 비가시 상태에서는 정적 테마별 WebP와 완성된 DOM이 그대로 남아야 한다.
+
+### 검증 기준
+
+- `npm run test:e2e:twentyoz`: 메인 320/390/768/1440, 네 현장 상호작용, WebGL 모델·셰이더·이중 링, 라이트/다크 axe, 폴백, 제품 상세, 성능·런타임을 검사한다.
+- `npm run test:design:gate`: 메인 쇼케이스의 죽은 CSS·토큰·메타·오버플로·타입·대비·터치·인셋을 검사한다.
+- `npm run test:design:products`: 공통 CSS의 죽은 선택자는 메인 게이트에 위임하고 제품 상세의 실렌더 게이트를 검사한다.
+- `npm run verify`: 위 트웬티온스 전용 게이트와 저장소 전체 L0~L6를 한 번에 실행한다.
+- 3D 번들 예산은 gzip 200KB 이하이며 현재 기준은 166,225B다. GLB는 697,076B이며 로컬 폰트·폴백 이미지를 포함한 예산은 전용 E2E에서 하드 실패한다.
+- 2026-08-25 국소 조정: 3D 화면 중심은 모바일 50%, 태블릿 74%, 소형 PC 64%, 와이드 PC 60%를 기준으로 하며, 중복 현장 상태는 보조기술에만 알리고 3D 모션 제어는 히어로 CTA 행에 둔다.