칸이 떠오르는 스튜디오 격자

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

# 작업: 칸이 떠오르는 스튜디오 격자

## 언제 쓰는 작업인가
스튜디오·에이전시·프로젝트 목록의 첫 화면에 쓴다. 아직 작품 사진이 없어도, 칸이 떠오르는 격자만으로 공간이 먼저 선다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 스튜디오 이름과 첫 화면 문구가 있다. 라벨 한 줄, 제목 두 줄, 설명 한 문단
- 칸 열두 개에 올릴 짧은 이름이나 빈 칸이 있다
- Three.js·Spline 뷰어는 쓰지 않는다

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

## 건드릴 범위
첫 화면의 격자와 방식 세 카드, 마감 CTA, 바닥글까지다. 프로젝트 상세나 결제는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
거의 검은 바탕 #0B0C10 위에 아이보리 글자 #F2F4F7, 라벨은 연보라 #c8b8ff. 오른쪽 무대는 perspective 1200px 이고, 격자 전체가 rotateX(24deg) rotateY(-20deg) 로 기울어 있다. 칸은 4열 3행, 한 칸 96px, 간격 16px. 떠오른 칸만 translateZ(72px) rotateX(-12deg) 이고, 그때 높이 36px 보라색 #7C5CFF 윗면이 보인다. 칸은 앞·뒤·위·아래·좌·우 여섯 면이다.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #0B0C10, 글자 #F2F4F7, 보조 #8B919C, 강조 #7C5CFF, 라벨 #c8b8ff. 제목은 세리프 굵기 400. 본문 폭은 1180px, 좌우 여백 28px.
2. 히어로는 0.9fr 과 1.3fr 두 칸이다. 왼쪽은 글, 오른쪽은 높이 560px 무대에 perspective 1200px 을 건다. 격자 .grid3d 에 transform-style: preserve-3d 와 rotateX(24deg) rotateY(-20deg) 를 같이 건다.
3. 칸 열두 개를 grid-template-columns: repeat(4, 96px) 로 깐다. 각 칸은 여섯 면이다. 앞면 translateZ(18px), 그라디언트 #4a3d62 에서 #1a1624. 윗면 높이 36px, transform-origin: bottom, rotateX(90deg), 색 #7C5CFF. 좌우면도 36px.
4. 호버한 칸에만 transform: translateZ(72px) rotateX(-12deg) 를 준다. 미리보기처럼 칸이 순서대로 떠오르게 하려면 animation pop 6s ease-in-out infinite 에 delay 를 0.45초씩 늘린다. 호버 중에는 animation: none 으로 그 칸만 고정한다.
5. 아래 방식 카드는 3열이다. 떠오름·윗면·축. 900px 아래에서는 히어로를 1열로 접고 무대 높이를 380px 로 줄인다. prefers-reduced-motion 이면 떠오름을 끈다. 기울어진 격자만으로도 칸으로 보인다.

## 기본값(필요하면 바꿔라)
- 떠오르는 높이: translateZ 72px (바꿀 수 있는 범위: 48 ~ 96px(칸이 화면 밖으로 나가면 줄인다))
- 격자 기울기: rotateX 24deg · rotateY -20deg (바꿀 수 있는 범위: X 8 ~ 28, Y -32 ~ -8)
- 칸 한 변: 96px (바꿀 수 있는 범위: 72 ~ 110px)
- 한 칸 지연: 0.45초 (바꿀 수 있는 범위: 0.2 ~ 0.7초)

## 하지 말 것
- Three.js 나 Spline 뷰어를 붙이지 않는다. 칸은 CSS 다.
- 앞면만 두고 윗면을 빼지 않는다. 떠올라도 두께가 안 보인다.
- 열두 칸을 한꺼번에 띄우지 않는다. 한 칸만 움직인다.
- perspective 를 칸에 걸지 않는다. 무대에 한 번만 건다.

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