접시가 돌아가는 다이닝 예약 페이지

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

# 작업: 접시가 돌아가는 다이닝 예약 페이지

## 언제 쓰는 작업인가
식당·카페·케이터링처럼 차림을 보여 줘야 예약이 들어오는 곳에 쓴다. 메뉴가 자주 바뀌어도 접시 색과 이름만 고치면 되고, 음식 사진을 아직 못 찍었어도 페이지를 먼저 올릴 수 있다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 가게 이름과 첫 화면 문구가 있다. 라벨 한 줄, 제목 두 줄, 설명 한 문단
- 코스 여섯 접시의 이름과 재료 한 줄이 있다
- 영업시간·자리 수·코스 가격이 정해져 있다
- 주방이나 음식 영상이 있으면 쓴다. 없으면 이 프롬프트가 CSS 로 그린 장면을 대신 쓴다

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

## 건드릴 범위
예약 페이지 한 장(첫 화면·회전 접시·공간 소개·영업 정보·예약 CTA)까지다. 실제 예약 처리나 결제, 달력은 만들지 않는다. 버튼은 전화번호나 외부 예약 링크로 보낸다.

## 결과가 이렇게 보여야 한다
배경은 거의 검은 갈색 한 색이고 강조는 금색 하나뿐이다. 첫 화면은 음식 영상이 가득 채우고 그 위에 세리프 제목이 가운데 놓인다. 아래로 내려가면 흰 접시 여섯 장이 좌우로 늘어서 있는데, 가운데 한 장만 크고 선명하고 옆으로 갈수록 작아지며 흐려진다. 접시 안에는 음식 대신 색 원이 하나씩 들어 있다. 접시 아래에 지금 접시의 이름과 재료가 뜨고, 그 아래 점 여섯 개로 직접 고를 수 있다.

## 구현 순서
1. 첫 화면을 만든다. min-height 100svh 인 구역에 영상을 깔고, 그 위에 위아래를 어둡게 하는 그라디언트를 한 겹 얹는다. rgba(23,18,14,.74) 로 시작해 30% 지점 .46, 58% 지점 .56, 바닥 .95 로 간다. 글 뒤에는 따로 radial-gradient 로 60%×66% 크기의 어둠을 한 겹 더 깐다. 요리 영상은 생각보다 밝아서 이 두 겹이 없으면 본문이 읽히지 않는다.
2. 영상과 대체 장면을 겹칠 때 순서를 믿지 않는다. 영상 요소에 z-index 2, 대체 장면에 1 을 명시한다. 마크업 순서만으로 두면 나중에 온 대체 장면이 영상을 덮어 아무리 기다려도 영상이 안 보인다.
3. 접시를 3D 원기둥에 세운다. 바깥 상자에 perspective 1500px 을 주고, 그 안에 크기가 0 인 회전축 요소를 transform-style preserve-3d 로 둔다. 접시 i 번째의 변형은 rotateY(i*60deg) translateZ(430px) rotateY(-i*60deg) 다. 마지막 역회전이 핵심이다. 이것이 없으면 옆쪽 접시가 비스듬히 서서 타원으로 눌린다.
4. 접시 한 장은 원 세 겹으로 그린다. 바깥은 radial-gradient(circle at 34% 28%, #FFFDF8, #E7DCC8 52%, #BFAF93 100%) 에 안쪽 그림자 inset 0 0 0 10px rgba(255,255,255,.55) 를 넣어 도자기 질감을 만든다. 안쪽 7% 지점에 얇은 테두리 선을 하나 두고, 가운데 22% 지점에 음식 자리 원을 놓는다. 음식은 접시마다 다른 radial-gradient 한 줄로 끝낸다.
5. 정면에서 멀어질수록 물러나게 한다. 회전 각도를 알고 있으니 접시마다 정면에서 몇 칸 떨어졌는지 구해(0 이 정면, 좌우로 -3 부터 3) 가까움 = 1 - min(1, 거리/2.2) 를 계산한다. 이 값으로 불투명도를 0.1 에서 1 로, 흐림을 3.4px 에서 0 으로, 쌓임 순서를 10 에서 7 로 함께 움직인다. 이 처리가 없으면 뒤 접시가 앞 접시 옆에 겹쳐 지저분해진다.
6. 돌리는 각도는 계속 더한다. 지금 번호를 0~5 로 되돌리지 말고 정수로 누적해 -번호*60deg 를 쓴다. 되돌리면 5 번에서 0 번으로 갈 때 다섯 칸을 거꾸로 되감는 게 보인다. 점을 눌러 고를 때는 지금 위치에서 가까운 쪽으로 돌도록, 차이가 3 보다 크면 6 을 빼고 -3 보다 작으면 6 을 더한다.
7. 회전은 900ms 에 cubic-bezier(.2,.7,.2,1) 로 두고, 불투명도와 흐림은 760ms 로 살짝 짧게 준다. 흐림이 먼저 정리되면서 접시가 도착하는 느낌이 난다. 자동 넘김은 3.2초 간격이고, 사람이 점을 누르면 멈춘다.
8. 아래 구역들은 단순하게 간다. 공간 소개는 세로로 긴 영상 한 칸과 글 한 칸을 2열로, 영업 정보는 세로 구분선으로 나눈 3칸으로, 예약은 가운데 정렬한 제목과 버튼 하나로 끝낸다. 제목은 전부 세리프로, 라벨과 숫자는 고정폭 글꼴로 쓴다.
9. 색과 글자를 못박는다. 배경 #17120E, 글자 #F6F0E6, 보조 글자는 같은 색 62% 투명, 경계선은 14% 투명, 강조는 금색 #C9A227 하나뿐이다. 제목은 세리프에 font-weight 400 으로 두고 clamp(2.6rem, 7vw, 5.4rem), 자간 -0.02em 을 준다. 고급 식당일수록 굵은 글씨를 쓰지 않는다.
10. 마무리로 확인한다. 영상은 IntersectionObserver 로 화면에 들어온 것만 재생한다. prefers-reduced-motion 이면 자동 넘김을 걸지 않고 전환도 없앤다. 900px 미만에서 2열을 1열로 접고 상단 링크를 숨기며, 접시 무대 높이를 줄인다. 400px 과 1440px 에서 가로 스크롤이 없는지 보고 빌드를 통과시킨다.

## 기본값(필요하면 바꿔라)
- 접시 원 반지름: 430px (바꿀 수 있는 범위: 300px ~ 600px(작으면 접시끼리 겹친다))
- 접시 지름: 184px (바꿀 수 있는 범위: 140px ~ 240px)
- 흐려지기 시작하는 거리: 2.2칸 (바꿀 수 있는 범위: 1.5 ~ 3.5(작을수록 옆 접시가 빨리 사라진다))
- 자동 넘김 간격: 3.2초 (바꿀 수 있는 범위: 2.4초 ~ 6초)
- 원근 거리: 1500px (바꿀 수 있는 범위: 900px ~ 2200px(짧을수록 왜곡이 세다))

## 하지 말 것
- 원기둥에 세운 접시에 역회전 rotateY(-i*60deg) 를 빼먹지 않는다. 옆 접시가 비스듬히 서서 타원으로 눌린다.
- 회전 각도를 0~5 로 되돌리지 않는다. 마지막에서 처음으로 갈 때 다섯 칸을 거꾸로 되감는 게 그대로 보인다.
- 영상과 대체 장면을 마크업 순서로만 겹치지 않는다. z-index 를 안 주면 대체 장면이 영상을 덮는다.
- 요리 영상 위에 그라디언트 한 겹만 깔지 않는다. 음식 조명이 밝아 본문이 묻힌다. 글 뒤에 한 겹 더 필요하다.
- 접시를 여섯 장보다 많이 넣지 않는다. 원이 커지면서 옆 접시가 화면 밖으로 나간다.
- 제목에 굵은 글씨를 쓰지 않는다. 세리프 400 이 이 업종의 기본값이다.

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