받침대 위에서 도는 전화기

너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 3줄로 말한 뒤 바로 파일을 만들어라. 질문은 정말 막힐 때 한 번만 해라.

# 작업: 받침대 위에서 도는 전화기

## 언제 쓰는 작업인가
기기·앱 화면을 자랑하는 제품 페이지에 쓴다. 스튜디오 촬영 전에 받침대 위 전화기만 먼저 돌려 두고, 본체와 화면은 준비되는 대로 갈아끼울 때다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 브랜드 이름과 첫 화면 문구가 있다. 라벨 한 줄, 제목 두 줄, 설명 한 문단
- Next.js 는 시작 전에 npm i three 를 실행한다. HTML 은 three.min.js 를 한 줄로 불러온다
- Blender GLB 와 힉스필드 화면 루프는 없어도 된다. 있으면 public/phone.glb 와 화면 video 로 넣는다

## 이 카드에 필요한 것
- Three.js. Next.js 는 시작 전에 npm i three 를 실행한다. HTML 한 장은 importmap 으로 three 를 불러온다.
- Blender가 있으면 본체를 GLB 로 보내 public/ 에 둔다. 없으면 Three.js Box·Cylinder 로 먼저 돌리고 나중에 갈아끼운다.
- 힉스필드 MCP가 있으면 화면(또는 텍스처) 루프를 받아 video 에 넣는다. 없으면 CSS 로 그린 장면으로 대체한다.

## 건드릴 범위
첫 화면의 전화기와 재료 세 카드, 마감 CTA, 바닥글까지다. 앱 스토어 결제나 기기 스펙 표는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
따뜻한 종이 #F4F1EA 위에 진한 갈색 글자 #1C1A17, 라벨 #8a5a2a. 오른쪽 캔버스 높이 560px. 전화기 본체는 roundRect 1.22 × 2.42, 모서리 0.18 을 ExtrudeGeometry 로 민 둥근 판 plate(1.22, 2.42, 0.18, 0.13), 색 0x1a1c20, metalness 0.62, roughness 0.38. 앞면 베젤은 plate(1.16, 2.34, 0.16, 0.008) 를 z 0.07. 스크린은 512×1024 캔버스에 SONAN 과 9:41 을 그린 뒤 PlaneGeometry(1.06, 2.16), z 0.086. 뒷면 렌즈 판 plate(0.46, 0.58, 0.12, 0.04). 받침대는 CylinderGeometry(0.88, 1.18, 0.12, 64), y -1.4, 색 0xd8cfc2. 카메라는 fov 28, (2.45, 0.92, 4.55) 에서 (0, 0.08, 0) 을 본다. 본체는 y 축으로 0.72 + t * 0.28 만큼 돈다. 애플 로고는 없다.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #F4F1EA, 글자 #1C1A17, 보조는 58% 농도, 라벨 #8a5a2a. 제목은 세리프 굵기 400. 본문 폭은 1180px, 좌우 여백 28px. 상단 바는 높이 66px, 종이색 90% 에 blur(10px).
2. 히어로는 1fr 과 1.1fr 두 칸. 왼쪽은 글, 오른쪽은 canvas#c 높이 560px. WebGLRenderer 는 { antialias: true, alpha: true }, outputColorSpace SRGB, pixel ratio 상한 1.5. 카메라 PerspectiveCamera(28, 1, 0.1, 40), 위치 (2.45, 0.92, 4.55), lookAt(0, 0.08, 0).
3. 그룹 phone 에 둥근 본체 plate(1.22, 2.42, 0.18, 0.13) — roundRect 를 ExtrudeGeometry 로 민다. MeshStandardMaterial color 0x1a1c20, metalness 0.62, roughness 0.38. 앞면 금속 주름이 보이지 않게 베젤 plate(1.16, 2.34, 0.16, 0.008) 를 z 0.07 에 덮는다. 스크린은 512×1024 캔버스에 SONAN 과 9:41 을 그린 CanvasTexture, PlaneGeometry(1.06, 2.16) 를 z 0.086. 뒷면 렌즈 판 plate(0.46, 0.58, 0.12, 0.04), 렌즈 원 둘. 받침대 CylinderGeometry(0.88, 1.18, 0.12, 64) 는 장면 루트, y -1.4, roughness 0.5, 색 0xd8cfc2. AmbientLight 0.42, 키 라이트 1.7 를 (-3, 5, 4), 채움 0.65 를 (3, 1, 2). ACESFilmicToneMapping.
4. public/phone.glb 가 있으면 GLTFLoader 로 본체를 갈아끼운다. 파일은 없어도 되고, 없으면 둥근 본체를 그대로 둔다. 힉스필드 MCP 가 화면 루프를 주면 video 엘리먼트에 넣고 VideoTexture 를 스크린 재질에 올린다. 없으면 512×1024 캔버스의 SONAN 화면을 그대로 둔다.
5. 매 프레임 phone.rotation.y = 0.72 + t * 0.28. prefers-reduced-motion 이면 0.72 에 고정한다. ResizeObserver 로 캔버스 크기를 맞춘다. 900px 아래에서는 히어로를 1열로 접고 캔버스를 380px 로 줄인다. 애플 로고·노치 실사·Spline 뷰어는 두지 않는다.

## 기본값(필요하면 바꿔라)
- 회전 속도: 0.72 + t * 0.28 (바꿀 수 있는 범위: 0.12 ~ 0.6(빠르면 화면이 안 읽힌다))
- 카메라 거리: z 4.55 (바꿀 수 있는 범위: 4.0 ~ 7.0)
- 본체 크기: 1.22 × 2.42, 모서리 0.18 (바꿀 수 있는 범위: 비율을 유지한 채 0.8 ~ 1.3 배)
- 받침대 높이: y -1.4 (바꿀 수 있는 범위: -1.1 ~ -1.6)

## 하지 말 것
- 애플 로고나 다른 회사 마크를 그리지 않는다. 본체는 무늬 없는 둥근 판이다. 앞면 금속이 접힌 선으로 보이지 않게 베젤 판으로 덮는다.
- Spline 뷰어를 붙이지 않는다. Three.js 가 본체를 돌린다.
- GLB 가 없다고 페이지를 비우지 않는다. 둥근 판과 원기둥으로 먼저 돈다.
- 힉스필드가 없다고 스크린을 검은 면으로 두지 않는다. SONAN 을 그린 캔버스를 올린다.
- 노치·다이내믹 아일랜드를 실사로 베끼지 않는다. 렌즈 원기둥 하나면 충분하다.

## 출력 규칙 (HTML 단일 파일)
- 결과는 index.html 파일 하나로 저장한다. 외부 CDN 을 쓰지 않고 CSS·JS 를 파일 안에 넣는다.
- HTML 파일 하나로 완결한다. 별도 CSS·JS 파일을 만들지 않는다.
- 폰트는 시스템 폰트 스택을 기본으로 쓰고, 한글은 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic' 순으로 폴백한다.
- 색·간격·둥글기는 :root 의 CSS 변수로 모아 두고, 본문에서는 변수만 참조한다.
- 1200px 데스크톱과 400px 모바일에서 가로 스크롤이 생기지 않아야 한다.
- 움직임은 prefers-reduced-motion 을 존중한다.

끝나면 만든 파일 목록과 브라우저에서 확인할 URL 을 한 줄씩 적어라.