네 박자로 도는 엔진 분해 페이지

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

# 작업: 네 박자로 도는 엔진 분해 페이지

## 언제 쓰는 작업인가
기계·부품·교육 교재를 파는 페이지에 쓴다. 엔진, 펌프, 기어박스처럼 '속이 어떻게 생겼는지'가 상품인 것들이다. 렌더를 맡길 시간이 없어도 치수 네 개만 있으면 돌아가는 분해도를 먼저 세울 수 있다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 브랜드 이름과 첫 화면 문구가 있다. 라벨 한 줄, 제목 두 줄, 설명 한 문단
- 곡축 반지름·로드 길이·실린더 안지름이 정해져 있다. 없으면 아래 기본값을 쓴다
- Three.js·model-viewer·GLB 파일은 쓰지 않는다

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

## 건드릴 범위
첫 화면의 엔진과 네 박자 설명, 치수 표, 마감 CTA, 바닥글까지다. 조립 순서 퀴즈나 결제, 로그인은 만들지 않는다. 버튼은 자리만 잡아 두고 링크는 비워 둔다.

## 결과가 이렇게 보여야 한다
모눈종이 #FDFCF7 바탕에 진한 갈색 글자를 쓰고, 강조는 붉은 벽돌색 #C0392B 하나뿐이다. 제목은 세리프 굵기 400 이라 광고보다 도면에 가깝다. 오른쪽에는 단실린더 엔진이 서 있다. 실린더 앞면이 잘려 있어 어두운 피스톤과 로드가 보이고, 아래 곡축이 두 장의 원판을 돌린다. 박자가 바뀔 때마다 위쪽 이름이 흡기·압축·팽창·배기로 바뀐다.

## 구현 순서
1. 종이 팔레트와 모눈을 먼저 깐다. 바탕 #FDFCF7, 한 단 어두운 면 #F3EEE3, 글자 #1C1A17 과 그 58% 농도, 선은 14% 농도다. 강조색은 #C0392B 이고 흡기는 #2F6F9E, 압축은 #B8860B, 배기는 #7D7669 를 박자 이름에만 쓴다. 본문 폭은 1180px, 좌우 여백 28px. 모눈은 26px 간격의 1px 선 두 겹을 body 위에 고정한다.
2. 상단 바는 높이 66px 로 붙인다. position sticky·top 0 에 배경을 종이색 88% 로 깔고 backdrop-filter blur(10px) 을 준다. 구매 버튼은 높이 40px 알약이고 색은 벽돌색 바탕에 흰 글자다.
3. 히어로는 0.92fr 과 1.08fr 두 칸에 간격 28px 이다. 왼쪽은 라벨·제목·설명·버튼, 오른쪽은 높이 540px 무대다. 무대 안 canvas 는 inset 0 이고 배경은 투명하다. WebGL2 컨텍스트를 { antialias: false, alpha: true } 로 얻고, 그리기 전에 gl.clearColor(0,0,0,0) 으로 비운다.
4. 운동학 상수를 셰이더 위에 둔다. const float R = 0.32 는 곡축 반지름, L = 0.98 은 로드 길이, BORE = 0.30 은 피스톤 반지름이다. 곡축 핀은 vec2(R*sin(th), R*cos(th)), 피스톤 핀은 R*cos(th) + sqrt(L*L - R*R*sin(th)*sin(th)) 이다. 행정은 2R, 상사점은 R+L 이다.
5. 부품을 거리 함수로 세운다. 곡축은 Z 방향 원기둥 샤프트와 원판 두 장, 핀, 플라이휠이다. 로컬 좌표에 rot(th) 를 걸어 돌린다. 로드는 핀과 피스톤 사이 중점에 둥근 상자를 놓고 atan 으로 기울인다. 피스톤은 Y 원기둥이다. 실린더는 바깥 원기둥에서 안을 빼고, max(cyl, p.z) 로 카메라 쪽 반을 잘라 속이 보이게 한다. 헤드와 밸브, 점화 플러그를 위에 얹는다.
6. 분해는 uExplode 유니폼 하나다. 0 에서 1 로 보간하며 곡축은 z -1.35, 로드는 z +0.85, 피스톤은 z +2.05, 헤드는 z -0.35 로 밀어낸다. 버튼 한 번에 목표값만 바꾸고, 매 프레임 0.08 씩 따라가게 한다. 돌리는 속도는 1.15 rad/s 이다.
7. 박자는 th 를 4π 로 나눈 몫이다. 0 흡기, 1 압축, 2 팽창, 3 배기. 이름과 설명, 점 네 개의 on 클래스를 그 인덱스에 맞춘다. 팽창 구간에만 점화 구의 반지름을 키워 불이 보이게 한다.
8. 캔버스는 CSS 크기의 68% 로 그리고 devicePixelRatio 는 1.5 로 상한한다. IntersectionObserver 로 무대가 화면 밖으로 나가면 그리기를 건너뛴다. prefers-reduced-motion 이면 첫 프레임만 그린다. 아래 네 박자 카드는 4열, 치수 표는 2열이다. 900px 아래에서는 히어로와 표를 1열로 접고 무대 높이를 420px 로 줄인다.

## 기본값(필요하면 바꿔라)
- 곡축 반지름 R: 0.32 (바꿀 수 있는 범위: 0.22 ~ 0.42(커지면 행정이 길어져 피스톤이 헤드에 닿는다))
- 로드 길이 L: 0.98 (바꿀 수 있는 범위: 0.80 ~ 1.20(R의 세 배 근처. 짧으면 로드가 꺾여 보인다))
- 분해 간격: 피스톤 z +2.05 (바꿀 수 있는 범위: 1.2 ~ 3.0(좁으면 조각이 겹친다))
- 회전 속도: 1.15 rad/s (바꿀 수 있는 범위: 0.4 ~ 2.4(빠르면 박자 이름이 안 읽힌다))

## 하지 말 것
- Three.js 나 GLB 를 불러오지 않는다. 이 장면은 캔버스 하나와 셰이더 한 장으로 끝난다.
- 실린더 앞면을 자르지 않은 채 유리만 투명하게 두지 않는다. 앞벽이 피스톤을 가린다.
- 캔버스를 불투명 회색으로 지우지 않는다. 모눈이 끊겨 도면처럼 안 보인다.
- 행정을 곡축 반지름과 따로 정하지 않는다. 행정이 2R 이 아니면 로드가 핀에서 떨어진다.
- 분해 때 모든 조각을 같은 방향으로 밀지 않는다. 한쪽으로만 가면 겹쳐서 한 덩어리다.

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