렌즈가 커서를 바라보는 페이지

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

# 작업: 렌즈가 커서를 바라보는 페이지

## 언제 쓰는 작업인가
광학·카메라·센서 제품의 첫 화면에 쓴다. 캐릭터가 커서를 따라보게 하고 싶을 때, 얼굴 대신 렌즈 하나로 그 일을 보여 준다.

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

## 이 카드에 필요한 것
- Three.js. Next.js 는 시작 전에 npm i three 를 실행한다. HTML 한 장은 importmap 으로 three 를 불러온다.

## 건드릴 범위
첫 화면의 렌즈와 원리 두 카드, 마감 CTA, 바닥글까지다. 트래킹 데모 앱이나 결제는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
어두운 바탕 #101114 위에 차가운 글자 #F1F3F6, 강조 호박 #FFB45A. 오른쪽 캔버스 높이 620px 안에 금속 원환 TorusGeometry(0.95, 0.14, 24, 64), 하우징 CylinderGeometry(0.72, 0.78, 0.28, 48), 유리 렌즈 CylinderGeometry(0.58, 0.58, 0.16, 48) z 0.08, 호박색 조리개 반지름 0.2 z 0.17 이 한 덩어리, 그룹 스케일 1.05. 아래 기둥과 받침대가 있다. 화면 좌표를 공간의 점으로 바꾼 뒤 그 점을 lookAt 한다. 커서가 없으면 사인 곡선으로 시선을 흔든다.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #101114, 글자 #F1F3F6, 보조 #8D93A0, 호박 #FFB45A. 제목은 세리프 굵기 400. 본문 폭은 1180px, 좌우 여백 28px.
2. 히어로는 1fr 과 1.15fr 두 칸, 최소 높이 100svh. 왼쪽은 글, 오른쪽은 canvas#c 높이 620px. WebGLRenderer 는 { antialias: true, alpha: true }, pixel ratio 상한 1.5. 카메라 PerspectiveCamera(32, 1, 0.1, 40), 위치 (2.55, 0.95, 3.45), lookAt(0, -0.15, 0). 그룹 스케일 1.05. 카메라는 옆에서 본다. 렌즈가 향하는 축과 겹치지 않게.
3. 그룹에 원환·하우징·렌즈·조리개를 넣는다. TorusGeometry(0.95, 0.14, 24, 64), MeshStandardMaterial color 0x2a2e36, metalness 0.9, roughness 0.22. 하우징 CylinderGeometry(0.72, 0.78, 0.28, 48) 를 X 축으로 90도. 렌즈 CylinderGeometry(0.58, 0.58, 0.16, 48) 를 같은 축으로 눕히고 z 0.08, MeshPhysicalMaterial color 0x88c8ff, roughness 0.05, transmission 0.92, thickness 0.5, ior 1.5. 조리개는 CircleGeometry(0.2, 32), 색 #FFB45A, z 0.17. 기둥 CylinderGeometry(0.08, 0.12, 1.1, 16) y -1.05, 받침대 CylinderGeometry(0.55, 0.62, 0.08, 32) y -1.58. AmbientLight 0.4, DirectionalLight 1.5 을 (2, 3, 4), 호박 림 0.55 를 (-3, 1, -1).
4. pointermove 가 오면 hasPtr 를 켠 뒤 mx, my 를 -1~1 로 바꾼다. 목표점 Vector3(mx*2.4, my*1.4, 2.2). 커서가 아직 없으면 x = sin(t*0.7)*1.6, y = cos(t*0.55)*0.8. 시작 목표는 (0.25, 0.15, 2.4). 그룹에 lookAt(target) 한 줄을 매 프레임 호출한다. 리그는 쓰지 않는다.
5. ResizeObserver 로 캔버스 크기를 맞춘다. 900px 아래에서는 히어로를 1열로 접고 캔버스를 360px 로 줄인다. 사람 얼굴·눈알·로봇 메시는 두지 않는다. Spline 뷰어는 붙이지 않는다.

## 기본값(필요하면 바꿔라)
- 시선 폭: x 2.4 · y 1.4 (바꿀 수 있는 범위: 1.0 ~ 3.2(크면 렌즈가 옆을 지나친다))
- 목표 z: 2.2 (바꿀 수 있는 범위: 1.2 ~ 3.5)
- 원환 반지름: 0.95 · 관 0.14 (바꿀 수 있는 범위: 0.7 ~ 1.2)

## 하지 말 것
- 사람 얼굴이나 로봇을 두지 않는다. 원환과 렌즈와 조리개다.
- Spline 뷰어나 iframe 을 붙이지 않는다. lookAt 한 줄이면 된다.
- 리그·IK·Bone 을 깔지 않는다. 그룹 하나다.
- 목표점을 카메라 뒤에 두지 않는다. z 는 렌즈 앞 2.2 근처다.

## 출력 규칙 (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 을 한 줄씩 적어라.