여섯 가지가 돌아가는 밤 공원

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

# 작업: 여섯 가지가 돌아가는 밤 공원

## 언제 쓰는 작업인가
놀이공원·축제·야간 개장 페이지에 쓴다. 기구 사진을 아직 못 찍었어도, 도는 축만 있으면 밤 분위기를 먼저 세울 수 있다.

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

## 이 카드에 필요한 것
- CSS 3D. 패키지를 설치하지 않는다. transform-style: preserve-3d 로 만든다.

## 건드릴 범위
첫 화면 공원에 기구 여섯을 3D 로 두고, 아래 설명 여섯 카드와 마감 CTA, 바닥글까지다. 예매 결제나 대기열은 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
해 진 보랏빛 #160E18 위에 아이보리 글자 #F6E8D4, 금색 #F0C35A. 오른쪽 무대(폭 68%, perspective 1400px)에 기구 여섯이 같이 선다. 관람차는 left 58% · top 42%, 지름 460px, 곤돌라 열두 칸이 28초에 한 바퀴, 칸은 수평. 목마 여덟은 몸·목·머리·다리로 올리고 96×92px, 18초에 타원(118×40px)을 접시 앞(top 64%)에서 돈다. 찻잔 다섯, 바이킹 ±26도, 그네는 left 2% · top 16% 에서 의자 여덟, 귀신의 집은 문이 4초에 한 번 열린다. 바닥 타원과 달과 줄을 깐다.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #160E18, 글자 #F6E8D4, 보조 #C4A888, 금색 #F0C35A, 곤돌라 강조 #E07A9A. 제목은 세리프 굵기 400. 본문 폭은 1180px, 좌우 여백 28px. 히어로 배경은 위쪽 주홍 방사에서 보랏빛으로 내려간다. 달과 별과 줄전구를 깐다.
2. 글은 왼쪽, 공원 .fair 는 오른쪽 68% 에 absolute 로 깐다. perspective 1400px. 바닥 .ground 는 rotateX(74deg) 타원. 기구 여섯에 data-ride 를 붙인다: wheel, carousel, teacups, viking, swing, house.
3. 관람차는 left: 58% · top 42% 의 0×0 점. rotateX(12deg) rotateY(-22deg). 회전체 .spin 은 28s. 바깥 원 460px 선 12px, 안쪽 원 336px. 허브는 회전체 밖. 다리는 ±16deg.
4. 곤돌라 열두 칸. 스포크 i 는 rotate(i*30deg), 칸 홀더는 translateY(-220px) rotate(-i*30deg), 칸에 unspin 28s. 칸은 앞면·옆면·지붕 세 장이다. 앞면에 창문 띠를 넣는다.
5. 회전목마는 왼쪽 아래 320×300px. 접시는 rotateX(70deg) 줄무늬, 지붕은 작게. 목마 여덟은 몸·목·머리·귀·안장·꼬리·다리 넷으로 올리고 width: 96px, 타원 Math.cos(a) * 118, Math.sin(a) * 40 위에 둔 뒤 unspin 18s 로 세운다. 목마는 top 64% 라서 지붕 앞에 선다. 가운데 기둥 높이 96px.
6. 찻잔 다섯은 12초에 타원을 돈다. 바이킹은 배 120px, transform-origin 위, ±26deg 를 3.6초에. 그네는 left 2% · top 16%, 의자 30×18px, 사슬 96px, 타원 translate(cos*68, sin*20), 14초. 귀신의 집은 지붕·벽·창 둘·문, 문은 4초에 한 번 rotateY(-55deg). prefers-reduced-motion 이면 회전을 끈다. 원은 멈춘 채로도 관람차로 보인다.

## 기본값(필요하면 바꿔라)
- 관람차 반지름: translateY -220px · 원 460px (바꿀 수 있는 범위: 180 ~ 250px(칸이 화면 밖으로 나가면 줄인다))
- 한 바퀴 시간: 28초 (바꿀 수 있는 범위: 16 ~ 40초(칸의 unspin 과 반드시 같게))
- 목마 수: 8 (바꿀 수 있는 범위: 6 ~ 12)
- 관람차 기울기: rotateX 12deg · rotateY -22deg (바꿀 수 있는 범위: X 6 ~ 18, Y -30 ~ -12)

## 하지 말 것
- Three.js 나 기구 GLB 를 불러오지 않는다. 원은 CSS 로 그린다.
- 곤돌라의 unspin 시간을 회전체와 다르게 두지 않는다. 칸이 옆으로 눕는다.
- translateY 만 하고 반대 rotate 를 빼지 않는다. 칸이 원의 접선 방향으로 선다.
- 허브를 회전체 안에 넣지 않는다. 가운데 점이 같이 돌면 축이 안 보인다.
- 목마를 360도에 두 겹으로 세우지 않는다. 여덟 마리면 접시가 차고, 넘으면 포개진다.

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