판을 세워 돌리는 3D 제품 페이지

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

# 작업: 판을 세워 돌리는 3D 제품 페이지

## 언제 쓰는 작업인가
물건 하나를 파는 페이지에 쓴다. 화장품, 향수, 텀블러, 보조제처럼 통이나 병 모양이면 다 된다. 제품 촬영이 아직 없거나 렌더를 맡길 시간이 없을 때, 색과 크기만 바꿔서 그럴듯한 히어로를 먼저 세울 수 있다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 제품 이름과 용량, 가격, 그리고 팔 점 세 가지가 정해져 있다
- 통 색을 정한다. 위에서 아래로 흰빛에서 제품 색으로 넘어가는 두세 단계면 된다
- 쓰는 장면 영상이 있으면 쓴다. 가로 하나, 세로 하나다. 없으면 이 프롬프트가 CSS 로 그린 장면을 대신 쓴다
- Three.js·model-viewer·GSAP 은 설치하지 않는다

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

## 건드릴 범위
히어로와 3D 제품, 성분 3열, 영상 두 칸, 후기 3열, 구매 단, 바닥글까지다. 장바구니나 결제, 옵션 선택은 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
따뜻한 종이색 #FAF6F1 바탕에 진한 갈색 글자를 쓰고, 살구색 #E8A798 을 강조로 한 번씩만 찍는다. 제목은 세리프에 굵기 400 이라 광고보다 잡지에 가깝다. 히어로 오른쪽에는 크림 통 하나가 바닥에서 살짝 떠서 천천히 돈다. 통 뒤로 살구빛이 크게 번져 있고 아래에 납작한 타원 그림자가 깔린다. 돌아가는 동안 표면 밝기가 왼쪽에서 오른쪽으로 흐르면서 둥근 면처럼 보인다. 아래로는 흰 카드 세 장, 가로와 세로 영상 두 칸, 후기 세 장이 차례로 이어진다.

## 구현 순서
1. 종이색 팔레트와 글꼴 역할을 먼저 정한다. 바탕 #FAF6F1, 한 단 어두운 면 #F0E8DF, 글자 #2A2320 과 그 58% 농도, 선은 13% 농도다. 강조색은 살구 #E8A798 이고 성분 표시에만 세이지 #9FB09A 를 더 쓴다. 제목은 세리프 굵기 400, 본문은 산세리프, 작은 라벨은 고정폭에 자간 0.22em 대문자다. 본문 폭은 1140px, 좌우 여백 28px 이다.
2. 상단 바는 높이 66px 로 붙여 둔다. position sticky·top 0 에 배경을 종이색 88% 로 깔고 backdrop-filter blur(10px) 을 준다. 아래쪽에 13% 선 한 줄을 그으면 스크롤할 때 내용이 바 밑으로 지나가는 게 보인다. 구매 버튼은 높이 40px 짜리 알약이고 색은 진한 갈색 바탕에 종이색 글자다.
3. 히어로는 1fr 과 1fr 두 칸에 간격 48px 이다. 왼쪽은 라벨·제목·설명·버튼과 가격이고, 오른쪽은 제품이 설 무대다. 무대는 높이 520px 에 perspective 1100px 을 준다. 원근은 무대에만 걸고 안쪽 회전체에는 걸지 않는다.
4. 회전체는 크기 없는 점으로 만든다. left 50%·top 50% 에 width 0·height 0 을 주고 translate(-50%, -50%) 로 맞춘 다음 transform-style preserve-3d 를 건다. 그 상태에서 rotateX(-8deg) 로 살짝 내려다보게 기울이고 rotateY 를 0 에서 360deg 까지 18초에 걸쳐 돌린다. 판은 이 점을 기준으로 left -62px·top -150px 처럼 음수 좌표에 매단다. 회전체에 크기를 주는 순간 판마다 기준이 달라져서 축이 어긋난다.
5. 판 열여덟 장을 세운다. i 번째 판을 rotateY((180 / 18) * i) 로 돌리니 10도 간격이다. 360도가 아니라 180도만 채우는 게 핵심인데, 판에는 앞뒤 구분이 없어서 180도를 넘기면 이미 세워 둔 판과 같은 자리에 한 장을 더 포개는 셈이 된다. 판 하나는 124px × 300px, 모서리는 위 14px·아래 10px 이고, 170도 방향 그라디언트로 흰빛 86% 에서 42% 지점 살구 54% 를 거쳐 짙은 살구 72% 까지 간다. 안쪽에 0 0 22px 흰색 55% 그림자를 넣으면 유리병처럼 가장자리가 밝아진다.
6. 겹쳐서 진해지도록 판을 투명하게 둔다. 한 장의 불투명도는 3.2 나누기 18, 대략 0.18 이다. 시선과 나란한 판은 거의 안 보이고 겹치는 쪽만 진해지면서 둥근 면이 생긴다. 여기에 판마다 밝기를 다르게 준다. 각도의 코사인 절댓값을 0.16 + 0.84 배로 펴서 밝기 0.72 + 그 값의 0.38 배를 쓰면, 정면을 보는 판이 밝고 옆으로 선 판이 어두워진다. 뚜껑은 세 장마다 한 번씩만 만들어 여섯 장을 세우고 80px × 52px 에 위아래 짙은 갈색 그라디언트를 준다. 불투명도는 1.6 나누기 6, 대략 0.27 이다.
7. 빛과 그림자를 통 바깥에 따로 깐다. 뒤쪽에는 지름 420px 짜리 원을 무대 42% 높이에 두고 살구색 55% 에서 68% 지점까지 흐려지는 radial-gradient 에 blur(60px) 을 건다. 아래쪽에는 300px × 56px 타원을 72% 높이에 두고 갈색 26% radial-gradient 에 blur(6px) 을 준다. 둘 다 회전체 밖에 있어야 통이 도는 동안 빛과 그림자는 가만히 있는다.
8. 성분은 흰 카드 3열로 놓는다. repeat(3, 1fr) 에 간격 18px, 카드는 모서리 18px 에 안쪽 여백 28px 26px 30px, 테두리는 13% 선이다. 카드마다 34px 짜리 동그라미를 하나 얹고 140도 그라디언트로 각각 살구·세이지·베이지를 넣는다. 제목은 16px 굵기 600, 설명은 14px 에 줄간격 1.72 다. 이 단만 가운데 정렬로 두고 제목 폭을 540px 로 묶는다.
9. 영상은 비율이 다른 두 칸으로 붙인다. 1.2fr 과 1fr 에 간격 18px, 왼쪽은 4:3 가로, 오른쪽은 3:4 세로다. 모서리 18px 로 자르고 왼쪽 아래 20px·18px 자리에 고정폭 캡션을 흰색으로 얹되 그림자를 깔아 밝은 장면에서도 읽히게 한다. video 에 z-index 2, 대체 장면에 1 을 줘서 앞뒤를 못 박는다. 마크업 순서만 믿으면 대체 장면이 영상을 덮는다.
10. 후기는 한 단 어두운 면 위에 흰 카드 3열로 얹고, 구매 단은 가운데 정렬로 제목과 한 줄 안내, 알약 버튼만 둔다. 마지막으로 IntersectionObserver 두 개를 건다. 하나는 화면에 들어온 영상만 재생하고, 다른 하나는 20px 아래에서 올라오는 등장 효과를 threshold 0.12 로 한 번만 걸고 관찰을 끊는다. 900px 아래에서는 히어로·영상·성분·후기를 모두 1열로 접고 무대 높이를 400px 로 줄인다. prefers-reduced-motion 이면 회전과 등장 효과를 모두 끈다. 통은 멈춘 채로도 원기둥으로 보인다.

## 기본값(필요하면 바꿔라)
- 세우는 판 수: 18장 (바꿀 수 있는 범위: 10 ~ 28(적으면 각지고 28을 넘으면 휴대폰에서 버벅인다))
- 판 한 장의 불투명도: 3.2 ÷ 18 ≈ 0.18 (바꿀 수 있는 범위: 0.10 ~ 0.30(높으면 통이 탁해진다))
- 한 바퀴 도는 시간: 18초 (바꿀 수 있는 범위: 10 ~ 30초)
- 내려다보는 각도: rotateX -8도 (바꿀 수 있는 범위: -20 ~ 0도(깊게 줄수록 위에서 본 통이 된다))
- 원근 거리: perspective 1100px (바꿀 수 있는 범위: 700 ~ 1600px(작을수록 통이 과장되게 휜다))

## 하지 말 것
- 판을 360도에 다 세우지 않는다. 판은 앞뒤가 같아서 180도만 채우면 되고, 넘기면 같은 자리에 두 장이 포개져 색만 탁해진다.
- 회전체에 width·height 를 주지 않는다. 0 × 0 점에 판을 음수 좌표로 매달아야 열여덟 장이 같은 축을 공유한다.
- 판을 불투명하게 두지 않는다. 앞판이 뒤판을 가려서 원기둥이 아니라 카드 한 장이 도는 것처럼 보인다.
- transform-style preserve-3d 를 빼먹지 않는다. 자식의 rotateY 가 납작하게 눌려 부채가 아니라 선 몇 개만 남는다.
- Three.js 나 model-viewer 를 설치하지 않는다. 제품 렌더 이미지를 구해 오는 것도 이 카드의 취지가 아니다.
- 빛과 그림자를 회전체 안에 넣지 않는다. 같이 돌면 조명이 통을 따라다녀서 입체감이 사라진다.

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