기록을 3D 링으로 보여 주는 운동 페이지

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

# 작업: 기록을 3D 링으로 보여 주는 운동 페이지

## 언제 쓰는 작업인가
숫자를 자랑해야 설득되는 페이지에 쓴다. 퍼스널 트레이닝, 재활, 학습 코칭, 다이어트 프로그램처럼 '몇 주 다녔더니 이만큼 바뀌었다'가 상품인 것들이다. 링 하나가 지표 하나라서, 세 개를 두 개로 줄이거나 다섯 개로 늘려도 나머지는 그대로 둔다.

## 준비물(이미 갖춰져 있다고 가정)
- 새 프로젝트다. Next.js 는 1번 뼈대가 깔려 있고, HTML 은 빈 index.html 에서 시작한다
- 링에 넣을 지표가 세 벌 있다. 각각 이름, 화면에 띄울 숫자, 그리고 고리를 얼마나 채울지 0 과 1 사이 값
- 운동 장면 영상이 있으면 쓴다. 하나는 가로로 가득 채울 것, 하나는 세로로 긴 것이다. 없으면 이 프롬프트가 CSS 로 그린 장면을 대신 쓴다
- Three.js·GSAP·차트 라이브러리는 설치하지 않는다

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

## 건드릴 범위
히어로, 진행 링 세 개, 수업료 3열, 트레이너 소개, 마감 CTA, 바닥글까지다. 예약 달력이나 결제, 회원 로그인은 만들지 않는다. 링 숫자는 코드에 적어 둔 값을 그대로 보여 주고 어디서도 불러오지 않는다.

## 결과가 이렇게 보여야 한다
거의 검은 화면(#0A0B0D)에 형광 연두 #D2FF3A 하나만 강조색으로 쓴다. 첫 화면은 운동 장면 영상이 꽉 채우고 그 위에 큰 제목이 아래쪽에 붙어 있다. 내려오면 카드 세 장이 나오고, 각 카드 안에서 굵은 고리가 접시처럼 뒤로 누운 채 천천히 돈다. 고리는 납작한 선이 아니라 옆면이 보이는 띠고, 채운 만큼만 색이 들어가 있다. 세 고리의 속도와 시작 각도가 서로 달라서 같은 자세로 겹쳐 보이는 순간이 없다. 고리 한가운데에는 숫자가 박혀 있고 회전과 무관하게 정면을 본다.

## 구현 순서
1. 색과 폭을 먼저 정한다. 배경 #0A0B0D, 카드 배경 #121418, 선은 흰색 9%와 20% 두 단계, 본문 글자 #F1F3F5, 보조 글자 #8B9099, 강조색은 형광 연두 #D2FF3A 하나뿐이다. 본문 폭은 1160px 에 좌우 여백 28px 이다. 작은 라벨과 바닥글에만 고정폭 글꼴을 쓰고 자간을 0.14em~0.24em 으로 벌려 대문자로 둔다.
2. 히어로는 영상 위에 글을 얹는다. min-height 100svh 에 align-items flex-end 로 글을 아래쪽에 붙이고 padding-bottom 96px 을 준다. 제목은 clamp(2.6rem, 8vw, 6rem), 줄간격 0.96, 자간 -0.045em, 굵기 800 이다. 영상 위에는 세로 그라디언트를 한 겹 덮는데 위 72%, 30% 지점 26%, 66% 지점 62%, 맨 아래 96% 로 농도를 바꾼다. 위아래만 어둡게 하고 가운데를 열어 둬야 글도 읽히고 영상도 보인다.
3. 영상과 대체 장면의 앞뒤를 z-index 로 못 박는다. video 에 position relative·z-index 2, 대체 장면에 z-index 1 이다. 마크업 순서만 믿으면 대체 장면이 영상을 덮어 버린다. 대체 장면은 radial-gradient 로 찍은 빛 한 덩이와 200deg 방향 어두운 그라디언트를 겹쳐 만든다. 영상 파일을 못 받아도 화면이 비지 않는다.
4. 링 무대를 만든다. 카드 안에 높이 210px·perspective 700px 인 상자를 두고, 그 안에 transform-style preserve-3d 인 회전판을 넣는다. 회전판은 rotateX(-64deg) 로 뒤로 눕힌 뒤 rotateZ 를 0 에서 360deg 까지 돌린다. perspective 는 회전판이 아니라 바깥 상자에 줘야 겹쳐 둔 판들이 같은 소실점을 공유한다. 세 링의 한 바퀴 시간을 11초·13초·9.5초로 다르게 주고 뒤쪽 둘에 -3s·-6s 딜레이를 걸어 시작 각도까지 어긋나게 한다.
5. 두께는 겹쳐서 만든다. 156px 정사각형에 border-radius 50%, 두께 13px 인 흰색 7% 테두리 고리를 한 장 만들고, 같은 고리를 열두 장 찍어 translateZ((i - 6) * 1.2px) 로 띄운다. 판 한 장은 종이처럼 얇지만 1.2px 씩 벌린 열두 장이 겹치면 옆에서 봤을 때 14px 남짓한 실제 띠가 된다. conic-gradient 원 하나로는 이 옆면이 절대 나오지 않는다.
6. 채운 비율은 층마다 색 고리를 한 장 더 겹쳐서 표시한다. 색 고리에도 같은 translateZ 를 주고, clip-path polygon 으로 12시부터 시계 방향으로 채운 각도만큼만 남긴다. 좌표는 가운데 점과 12시 점에서 시작해 6도 간격으로 (각도 - 90)도 방향에 반지름 80% 로 찍는다. 반지름을 50% 로 잡으면 정사각형 안쪽에 딱 붙어서 네 모서리가 잘려 나간다. 80% 는 바깥으로 넉넉히 넘겨 두고 상자가 알아서 자르게 하는 값이다.
7. 링마다 칠하는 테두리 면을 다르게 둔다. 첫째는 위와 오른쪽을 형광 연두로, 둘째는 위·오른쪽·아래를 하늘색 #6BE3FF 로, 셋째는 위만 주황 #FF7A6B 로 칠하고 나머지 면은 transparent 로 둔다. 부채꼴과 칠한 면이 겹치는 부분만 색으로 남기 때문에, 같은 코드로도 링마다 다른 호가 나온다. 채운 비율은 각각 0.80·0.72·0.55 로 넣었다. 숫자는 회전판 밖에 따로 두고 top 50%·translateY(-50%) 로 가운데에 세운다. 30px 굵기 800 에 font-variant-numeric tabular-nums 를 줘야 값이 바뀌어도 자리가 안 흔들린다.
8. 수업료는 3열로 깐다. repeat(3, 1fr) 에 간격 18px, 카드는 모서리 16px, 안쪽 여백 30px 26px 32px 이다. 가운데 추천 카드만 테두리를 형광 연두 40%, 배경을 같은 색 4% 로 올린다. 값은 32px 굵기 800 자간 -0.035em 이고 단위는 그 옆에 14px 보조색으로 붙인다. 목록 앞머리는 점 대신 10px × 2px 형광 연두 막대를 왼쪽 0·위 15px 에 둔다. 카드에 hover 하면 테두리가 밝아지며 4px 떠오르는데 360ms ease-out 이면 충분하다.
9. 트레이너 단은 1fr 과 1.1fr 로 나누고 간격 52px 을 준다. 왼쪽은 aspect-ratio 4/5 에 모서리 14px 인 세로 영상, 오른쪽은 제목과 문단 두 개다. 마지막으로 IntersectionObserver 를 두 개 둔다. 하나는 화면에 들어온 영상만 재생하고 나간 영상은 멈춘다. 다른 하나는 20px 아래에서 올라오는 등장 효과를 threshold 0.12, rootMargin '0px 0px -8% 0px' 로 한 번만 걸고 바로 관찰을 끊는다. 900px 아래에서는 링과 수업료와 트레이너를 모두 1열로 접고 상단 메뉴를 감춘다. prefers-reduced-motion 이면 회전과 등장 효과를 모두 끄되 rotateX(-64deg) 기울기는 그대로 둔다.

## 기본값(필요하면 바꿔라)
- 겹치는 판 수: 12장 (바꿀 수 있는 범위: 6 ~ 20(적으면 계단이 보이고 많으면 무거워진다))
- 판 사이 간격: 1.2px (바꿀 수 있는 범위: 0.8 ~ 2px(테두리 두께 13px 과 비슷해질 때까지))
- 고리를 눕힌 각도: rotateX -64도 (바꿀 수 있는 범위: -40 ~ -80도(0에 가까울수록 정면에서 본 원이 된다))
- 한 바퀴 도는 시간: 11초 · 13초 · 9.5초 (바꿀 수 있는 범위: 7 ~ 20초)
- 부채꼴 좌표 간격: 6도 (바꿀 수 있는 범위: 3 ~ 12도(크면 호가 각져 보인다))

## 하지 말 것
- clip-path polygon 좌표를 반지름 50% 안쪽으로 잡지 않는다. 정사각형에 내접해 버려서 부채꼴 네 모서리가 잘려 나간다. 80% 로 넉넉히 넘긴다.
- 고리를 conic-gradient 원 하나로 대신하지 않는다. 눕히는 순간 옆면이 없어 종잇장으로 보인다. 겹쳐야 두께가 생긴다.
- perspective 를 회전판 자신에게 걸지 않는다. 바깥 상자에 걸어야 열두 장이 같은 소실점을 쓴다.
- 영상 위에 대체 장면이 올라오게 두지 않는다. z-index 를 2와 1로 못 박는다.
- 판을 12장보다 훨씬 늘리지 않는다. 링 셋이면 요소가 벌써 일흔두 개고, 전부 계속 돌고 있다.
- prefers-reduced-motion 에서 기울기까지 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 을 한 줄씩 적어라.