한 바퀴면 끝나는 작은 행성

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

# 작업: 한 바퀴면 끝나는 작은 행성

## 언제 쓰는 작업인가
작은 세계·전시·교육용 탐험을 첫 화면에 보여 줘야 할 때 쓴다. 행성을 세 가지 보기로 바꿔 가며 '들어가 보고 고르게' 만들 때다. 캐릭터 상표가 있는 이야기는 쓰지 않는다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 세계 이름과 첫 화면 문구가 있다. 라벨 한 줄, 제목 두 줄, 설명 한 문단
- 보기 세 가지의 이름과 한 줄 설명이 있다
- Three.js·행성 GLB·특정 동화 캐릭터는 쓰지 않는다

## 이 카드에 필요한 것
- WebGL2 셰이더. 패키지를 설치하지 않는다. 캔버스 한 장에 프래그먼트 셰이더로 그린다.

## 건드릴 범위
첫 화면의 행성 셰이더와 보기 세 가지, 설명 3열, 마감 CTA, 바닥글까지다. 실제 탐험 조작이나 결제는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
거의 검은 우주 #07070E 위에 아이보리 글자 #F3EDE0 을 올리고, 금색 #E8C46A 를 보기 단추에만 찍는다. 화면 한가운데 황토색 구체가 떠 있고, 보이는 면에 등대와 소나무, 표면에 작은 사람이 걷는다. 카메라는 거리 5.0 에서 천천히 한 바퀴 돈다. 별은 드문 흰 점이다.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #07070E, 글자 #F3EDE0, 보조 #A89B84, 금색 #E8C46A. 제목은 세리프 굵기 400, 작은 라벨은 고정폭에 자간 0.16em 대문자다. 본문 폭은 1180px, 좌우 여백 28px 이다.
2. 히어로는 min-height 100svh 다. canvas 를 inset 0 으로 깔고 내비와 제목은 z-index 3 이다. 위아래만 어둡게 하는 그라디언트를 한 겹 깐다. WebGL2 는 { antialias: false, alpha: false } 로 얻는다.
3. 행성은 length(p) - 1.0 에 fbm 변위를 0.032 만큼만 더한다. 등대·소나무·사람은 toTan 으로 표면 법선에 세운다. 등대는 sdCappedCone 탑과 램프 sdCylY, 소나무는 원뿔 세 겹. 걷는 사람은 sin(uTime*0.32) 으로 적도 근처를 한 바퀴 돈다. 몸 sdCylY(lp - vec3(0.0, 0.16, 0.0), 0.16, 0.06), 머리 반지름 0.075 이다.
4. 카메라는 vec3(sin(a)*5.0, 1.48, cos(a)*5.0) 에서 원점을 본다. a 는 uTime*0.10. 이보다 가까우면 행성이 산처럼 잘린다. 키 라이트 vec3(-0.35,0.82,0.48), 채움 빛 vec3(0.55,0.15,-0.35) 두 개라야 그림자 면이 회색 덩어리로 안 보인다.
5. 보기 세 개는 uView 유니폼 하나다. 0 은 행성 하나, 1 은 작은 별 일곱 개를 호로 늘어놓고 카메라를 z 7.4 로 물린다, 2 는 얇은 상자 두 장을 펼친 책으로 두고 그 위에 막대 일곱 개를 산등성이처럼 세운다. 단추는 0·1·2 만 바꾼다.
6. 별은 hash2(floor(rd.xy*80.0)) 가 0.992 넘는 칸만 켠다. 캔버스는 CSS 크기의 62% 로 그리고 devicePixelRatio 는 1.5 로 상한한다. IntersectionObserver 로 히어로가 나가면 그리기를 건너뛴다. prefers-reduced-motion 이면 첫 프레임만 그린다. 아래 설명은 3열, 900px 아래에서는 1열이다.

## 기본값(필요하면 바꿔라)
- 행성 반지름: 1.0 (바꿀 수 있는 범위: 0.7 ~ 1.4(카메라 거리 5.0 기준. 커지면 화면을 채운다))
- 카메라 거리: 5.0 (바꿀 수 있는 범위: 4.2 ~ 7.0(4 이하면 표면이 산처럼 잘린다))
- 한 바퀴 도는 속도: uTime*0.10 (바꿀 수 있는 범위: 0.04 ~ 0.22)
- 표면 굴곡: fbm * 0.032 (바꿀 수 있는 범위: 0.02 ~ 0.045(크면 공처럼 안 보인다))

## 하지 말 것
- Three.js 나 행성 GLB 를 불러오지 않는다. 구는 거리 함수로 만든다.
- 카메라를 거리 4.2 안으로 들이지 않는다. 표면이 산을 가리고 행성이 안 보인다.
- 동화 속 왕자·장미·여우처럼 상표가 있는 인물을 그리지 않는다. 등대와 우물과 소나무면 세계가 된다.
- 키 라이트 하나만 두지 않는다. 뒷면이 회색 덩어리로 떨어져 나간다.
- 별을 칸마다 다 켜지 않는다. 0.992 넘는 칸만 켜야 밤으로 보인다.

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