커서를 따라오는 유리 구

너는 이 저장소에서 작업하는 프론트엔드 엔지니어다. 아래 지시를 읽고 먼저 계획을 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, 바닥글까지다. 물리 엔진이나 결제는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
거의 검은 바탕 #0A0B10 위에 차가운 글자 #EEF1F6, 라벨 #9ad4ff. 오른쪽 캔버스 높이 520px 안에 반지름 1 유리 구가 있다. color 0xb8d8ee, transmission 0.96, roughness 0.06, ior 1.48, thickness 1.4, clearcoat 1. 환경 맵은 128×64 캔버스 그라디언트 #ffffff → #c8e8ff → #1a2740. 적도에 금색 TorusGeometry(1.32, 0.022, 12, 80) 0xc8a45a, 아래 바닥. 구는 마우스 쪽으로 매 프레임 0.08씩 따라가고, 스스로 y 축으로 천천히 돈다.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #0A0B10, 글자 #EEF1F6, 보조 #8A90A0, 라벨 #9ad4ff. 제목은 세리프 굵기 400. 본문 폭은 1180px, 좌우 여백 28px.
2. 히어로는 1fr 과 1.1fr 두 칸, 최소 높이 100svh. 왼쪽은 글, 오른쪽은 canvas#c 높이 520px. WebGLRenderer 는 { antialias: true, alpha: true }, pixel ratio 상한 1.5. 카메라 PerspectiveCamera(30, 1, 0.1, 40), 위치 (0.4, 0.35, 3.8).
3. 환경 맵을 캔버스로 만든다. 128×64, 세로 그라디언트 #ffffff 0 → #c8e8ff 0.2 → #1a2740 0.45 → #05060a 1. 흰 창 두 칸을 위에 그린다. CanvasTexture 에 EquirectangularReflectionMapping 을 걸고 scene.environment 에 넣는다. HDR 파일을 받지 않는다.
4. 구는 SphereGeometry(1, 64, 48) 과 MeshPhysicalMaterial. color 0xb8d8ee, metalness 0, roughness 0.06, transmission 0.96, thickness 1.4, ior 1.48, envMapIntensity 1.6, clearcoat 1, clearcoatRoughness 0.04. 적도에 TorusGeometry(1.32, 0.022, 12, 80) 금색 0xc8a45a 고리를 눕힌다. 바닥 CircleGeometry(2.4, 48) 를 y -1.15. AmbientLight 0.35, DirectionalLight 1.4 를 (-2, 3, 4), 채움 시안 0.7 을 (3, -1, 2).
5. pointermove 에서 mx, my 를 -1~1 로 바꾼다. 목표는 (mx*0.55, my*0.35, 0). 매 프레임 현재 위치에 0.08 을 섞어 따라간다. rotation.y 는 t * 0.25. prefers-reduced-motion 이면 목표를 sin·cos 작은 원으로 바꾸고 따라가기만 한다.
6. ResizeObserver 로 캔버스 크기를 맞춘다. 900px 아래에서는 히어로를 1열로 접고 캔버스를 360px 로 줄인다. Spline 뷰어는 붙이지 않는다.

## 기본값(필요하면 바꿔라)
- 따라가는 속도: 0.08 (바꿀 수 있는 범위: 0.04 ~ 0.18(크면 커서를 붙잡는다))
- 거칠기: 0.06 (바꿀 수 있는 범위: 0.02 ~ 0.25)
- 굴절: ior 1.48 (바꿀 수 있는 범위: 1.2 ~ 1.7)
- 이동 폭: x 0.55 · y 0.35 (바꿀 수 있는 범위: 0.2 ~ 0.9)

## 하지 말 것
- Spline 뷰어나 iframe 을 붙이지 않는다. Three.js 로 구를 직접 만든다.
- MeshBasicMaterial 이나 단색 원으로 유리를 흉내 내지 않는다. transmission 이 있어야 유리로 읽힌다.
- HDR 파일을 필수로 두지 않는다. 캔버스 그라디언트면 환경은 충분하다.
- 매 프레임 위치를 커서에 바로 넣지 않는다. 0.08씩 따라가야 무게가 있다.

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