글자가 두께를 갖는 히어로

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

# 작업: 글자가 두께를 갖는 히어로

## 언제 쓰는 작업인가
브랜드 이름·짧은 표어를 첫 화면의 주인공으로 쓸 때다. 사진이 없어도 글자 자체가 물건처럼 서 있게 만들 때 쓴다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 브랜드 이름 두 글자(또는 짧은 영문 네 자 안쪽)와 설명 한 문단이 있다
- Three.js·텍스트 GLB 는 쓰지 않는다

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

## 건드릴 범위
첫 화면의 입체 글자와 앞면·옆면 설명 두 카드, 마감 CTA, 바닥글까지다. 글자 편집기나 폰트 업로드는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
어두운 갈색 #11110F 위에 아이보리 #F4EFE4, 금색 #E2B15A 를 라벨과 글자 앞면에만 쓴다. 무대는 perspective 1600px, 높이 480px. 글자 한 칸은 200×260px, 앞면은 translateZ(28px) 금색 그라디언트 #f7ead2 → #e2b15a, 옆면은 폭 56px 에 rotateY(90deg) translateZ(28px), 뒷면은 translateZ(-28px) rotateY(180deg). 마우스로 Y ±12도, X ±8도.

## 구현 순서
1. 색을 먼저 정한다. 바탕 #11110F, 글자 #F4EFE4, 보조 #A39888, 금색 #E2B15A. 제목 글자는 세리프 168px 굵기 400. 본문 폭은 1180px, 좌우 여백 28px.
2. 히어로는 세로로 가운데 맞춘다. 라벨, 높이 480px 무대, 설명. 무대에 perspective 1600px. 단어 .word 에 transform-style: preserve-3d 와 rotateX(var(--rx, 8deg)) rotateY(var(--ry, -16deg)) 를 건다.
3. 글자마다 .ch 를 만든다. 한 칸 200×260px, 그 안에 앞·옆·뒤 세 장. 앞면 .f 는 translateZ(28px), 배경 linear-gradient(180deg, #f7ead2, #e2b15a), 글자색 #1a140c. 뒷면 .b 는 translateZ(-28px) rotateY(180deg), 배경 #6a4e22. 옆면 .s 는 폭 56px, left 172px, rotateY(90deg) translateZ(28px), 배경 #b88838.
4. pointermove 에서 --ry 는 (clientX / innerWidth - 0.5) * 24, --rx 는 (0.5 - clientY / innerHeight) * 16. 커서가 없으면 sin(t*0.6)*16 과 cos(t*0.45)*8 로 천천히 흔든다. transition 은 180ms linear.
5. 아래 카드는 2열, 앞면과 옆면. 900px 아래에서는 칸을 110×150px, 글자를 92px 로 줄인다. prefers-reduced-motion 이면 기울기를 8deg·-16deg 에 고정한다.

## 기본값(필요하면 바꿔라)
- 옆면 두께: 56px (바꿀 수 있는 범위: 36 ~ 72px(두꺼우면 옆면이 앞면을 가린다))
- 마우스 Y 기울기: ±12deg (바꿀 수 있는 범위: ±6 ~ ±20)
- 글자 크기: 168px · 칸 200×260 (바꿀 수 있는 범위: 120 ~ 200px)

## 하지 말 것
- text-shadow 로 두께를 흉내 내지 않는다. 옆면 상자가 있어야 기울일 때 두께가 보인다.
- Three.js 나 텍스트 GLB 를 불러오지 않는다. 글자는 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 을 한 줄씩 적어라.