황혼 거리를 지나가는 여행 페이지

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

# 작업: 황혼 거리를 지나가는 여행 페이지

## 언제 쓰는 작업인가
여행·숙소·드라이브 코스를 파는 첫 화면에 쓴다. 실제 거리 영상을 아직 못 찍었어도, 해가 지는 방향과 건물 높이만 있으면 지나가는 느낌을 먼저 만들 수 있다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 코스 이름과 첫 화면 문구가 있다. 라벨 한 줄, 제목 두 줄, 설명 한 문단
- 오늘 고를 수 있는 길 세 가지의 이름과 한 줄 설명이 있다
- Three.js·지도 SDK·도시 GLB 는 쓰지 않는다

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

## 건드릴 범위
스크롤에 묶인 히어로 거리, 코스 세 가지, 엽서 네 장, 마감 CTA, 바닥글까지다. 실제 예약 결제나 지도 길찾기는 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
어두운 청록 #0E1814 위에 아이보리 글자 #F4E8C8 을 올리고, 금색 #E8C46A 를 라벨에만 찍는다. 첫 화면은 해가 지는 거리가 가득 채운다. 도로는 가운데로 사라지고, 양옆 건물은 높이가 제각각이며 창 일부만 노랗게 켜져 있다. 먼 쪽은 주황 안개로 녹는다. 글은 아래쪽 왼쪽에 붙인다.

## 구현 순서
1. 색을 먼저 정한다. 페이지 바탕 #0E1814, 글자 #F4E8C8, 보조 #C4B48A, 금색 #E8C46A. 제목은 세리프 굵기 400, 작은 라벨은 고정폭에 자간 0.16em 대문자다. 본문 폭은 1180px, 좌우 여백 28px 이다.
2. 무대를 먼저 잡는다. 바깥에 height 380vh 를 주고, 그 안의 히어로를 position sticky·top 0·height 100svh 로 붙인다. 히어로 안에 inset 0 인 canvas 를 깔고, 그 위에 내비와 제목을 z-index 3 으로 올린다. 위아래만 어둡게 하는 그라디언트를 한 겹 깐다.
3. WebGL2 컨텍스트를 { antialias: false, alpha: false } 로 얻는다. 정점 셰이더는 화면을 덮는 삼각형 하나다. uniform 은 vec2 uRes, float uTime, float uScroll 세 개다.
4. 도시를 반복 상자로 만든다. p.z 를 3.2 로 나눈 나머지로 한 블록을 만들고, x = -2.15 와 +2.15 에 건물을 세운다. 높이는 1.4 + hash*2.6 이라 블록마다 다르다. 도로는 p.y + 0.02. 레이마칭은 90회, 멀리 42 에서 끊는다.
5. 카메라는 vec3(sway, 0.62, uTime*3.4 + uScroll*28.0) 이다. sway 는 sin(uTime*0.7)*0.04 로 핸들을 흉내 낸다. 시선은 vec3(uv.x*0.92, uv.y*0.92 - 0.04, 1.0) 으로 약간 아래를 본다. uScroll 은 무대 안에서 0~1 이다.
6. 창문은 fract(p.y*2.4, p.z*2.0) 칸마다 그리고, hash 가 0.38 넘는 칸만 노란빛 #FFC76B 로 켠다. 도로 중앙선은 fract(p.z*0.35) 가 0.5 넘는 구간에만 잇는다. 안개는 1.0 - exp(-t*0.055) 로 먼 건물을 주황 하늘에 녹인다.
7. 하늘은 지평선 vec3(0.92,0.48,0.22) 에서 꼭대기 vec3(0.10,0.16,0.28) 로 보간하고, 해 방향 normalize(vec3(0.62,0.08,1.0)) 에 pow(dot, 80) 으로 해를 찍는다. 캔버스는 CSS 크기의 62% 로 그리며 devicePixelRatio 는 1.5 로 상한한다.
8. 아래 코스는 3열, 엽서는 3:4 비율 4열이다. 900px 아래에서는 둘 다 1열로 접는다. IntersectionObserver 로 히어로가 화면 밖으로 나가면 그리기를 건너뛴다. prefers-reduced-motion 이면 첫 프레임만 그린다.

## 기본값(필요하면 바꿔라)
- 앞으로 가는 속도: uTime*3.4 (바꿀 수 있는 범위: 1.6 ~ 6.0(빠르면 건물이 깜빡인다))
- 스크롤이 밀어주는 거리: uScroll*28 (바꿀 수 있는 범위: 12 ~ 48)
- 건물 간격: 3.2 (바꿀 수 있는 범위: 2.2 ~ 4.4(좁으면 골목, 넓으면 대로))
- 안개 농도: exp(-t*0.055) (바꿀 수 있는 범위: 0.03 ~ 0.10(클수록 먼 거리가 빨리 녹는다))
- 무대 높이: 380vh (바꿀 수 있는 범위: 240vh ~ 520vh)

## 하지 말 것
- Three.js 나 지도, 도시 GLB 를 불러오지 않는다. 거리 함수 반복으로 도시를 만든다.
- 모든 창문을 켜지 않는다. hash 로 일부만 켜야 사람이 사는 거리로 보인다.
- 카메라를 하늘에서 내려다보게 두지 않는다. 이 페이지는 운전석이다.
- 캔버스를 devicePixelRatio 그대로 그리지 않는다. 레티나에서 레이마칭이 멈춘다.
- 히어로 제목을 도로 한가운데에 두지 않는다. 소실점과 겹치면 둘 다 안 읽힌다.

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