다섯 겹으로 펼쳐지는 그림 전시

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

# 작업: 다섯 겹으로 펼쳐지는 그림 전시

## 언제 쓰는 작업인가
전시·화랑·아트숍처럼 한 점을 오래 보여 줘야 하는 페이지에 쓴다. 원본 사진을 아직 못 찍었어도, 겹을 다섯으로 나누는 규칙만 있으면 페이지를 먼저 올릴 수 있다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 작품 이름과 한 줄 설명이 있다
- 다섯 겹의 이름과, 어느 겹을 입체로 꺼낼지가 정해져 있다
- 이미지 파일과 Three.js 는 쓰지 않는다. 각 겹은 캔버스에 직접 그린다

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

## 건드릴 범위
첫 화면의 겹그림과 다섯 겹 설명, 전시 노트, 마감 CTA, 바닥글까지다. 예매 결제나 도슨트 채팅은 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
거의 검은 남색 #0A0D16 바탕에 금색 #E8C46A 를 이름과 단추에만 찍는다. 화면 가운데 640×496 그림이 다섯 장 겹쳐 서 있고, 기본 간격은 56px 이라 옆에서 보면 이미 깊이가 있다. 맨 앞은 어두운 소나무, 그 뒤로 불이 켜진 포구 마을, 먼 섬, 달, 밤하늘 순이다. 오른쪽에는 겹 이름이 위부터 아래로 다섯 줄 붙어 있다.

## 구현 순서
1. 색과 글꼴을 먼저 정한다. 바탕 #0A0D16, 글자 #E8ECF5, 보조 #8892A6, 금색 #E8C46A. 제목은 세리프 굵기 400, 작은 라벨은 고정폭에 자간 0.16em 대문자다. 본문 폭은 1180px, 좌우 여백 28px 이다.
2. 히어로는 min-height 100svh 에 그림을 가운데 둔다. 무대에 perspective 1600px 을 걸고, 그 안의 스택은 width 0·height 0 인 점에 transform-style preserve-3d 를 준다. 회전은 rotateX(var(--el)) rotateY(var(--az)) 이고 기본값은 8deg 와 22deg 다.
3. 겹 다섯 장을 스택의 자식으로 둔다. 각 장은 640×496, 기준점 left -320px·top -248px 이다. translateZ(calc(var(--z) * var(--gap))) 로 앞뒤를 벌리며 --z 는 0,1,2,3,4 이다. 기본 --gap 은 56px. 그림자는 0 18px 40px 검은색 35% 다.
4. 각 장 안의 canvas 에 그 겹만 그린다. 하늘은 남색 그라디언트와 별, 달은 노란 원과 가로 구름 획, 섬은 낮은 실루엣 두 줄, 마을은 창문 켜진 집 열네 채, 소나무는 앞에 선 어두운 덩어리다. 뒤 겹을 앞 겹에 다시 그리지 않는다. 투명 배경이어야 뒤가 비친다.
5. 펼치기는 --gap 을 88px, --az 를 26deg 로 올린다. 합치기는 8px 과 0deg 다. 슬라이더는 0~100 을 --gap 에 그대로 넣는다. 전환은 1100ms cubic-bezier(.22,.7,.2,1) 이다.
6. 포인터가 움직이면 기본 각도에 (mx-0.5)*16 과 (0.5-my)*8 을 더해 아주 조금만 기울인다. 합쳐진 상태(간격 20px 이하)에서는 기울이지 않는다. prefers-reduced-motion 이면 회전을 0 으로 두고 루프를 끈다.
7. 오른쪽 라벨은 장마다 top 을 8·26·44·62·80% 로 나눠 겹치지 않게 한다. 900px 아래에서는 장을 420×328 로 줄이고 라벨을 숨긴다. 아래 설명은 5열 카드, 노트는 2열이다.

## 기본값(필요하면 바꿔라)
- 기본 겹 간격: 56px (바꿀 수 있는 범위: 24 ~ 90(좁으면 한 장으로 보이고 넓으면 포스터가 된다))
- 펼쳤을 때 간격: 88px (바꿀 수 있는 범위: 60 ~ 140)
- 기본 옆보기 각도: rotateY 22deg (바꿀 수 있는 범위: 8 ~ 34deg)
- 그림 크기: 640×496 (바꿀 수 있는 범위: 480×372 ~ 800×620(비율은 4:3 근처))

## 하지 말 것
- 다섯 장을 같은 두께로 앞으로 꺼내지 않는다. 먼 하늘까지 입체면 무대 소품처럼 보인다.
- 한 캔버스에 다섯 겹을 다 그리지 않는다. 한 장에 다 그리면 벌려도 깊이가 없다.
- 이미지 파일이나 반 고흐 그림을 넣지 않는다. 겹의 규칙은 가져오되 그림은 이 페이지에서 그린다.
- 스택에 width·height 를 주지 않는다. 0×0 점에 장을 음수 좌표로 매달아야 다섯 장이 같은 축을 공유한다.
- 라벨을 모두 세로 한가운데에 두지 않는다. 벌어지면 다섯 줄이 한 자리에 포개진다.

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