피트니스 모바일 앱

다음 규칙에 따라 피트니스 모바일 앱 UI를 만들어줘.

[사이트 설명]
(사이트 설명을 입력해주세요)

레이아웃:
- 모바일 퍼스트 (375px 기준)
- 하단 네비게이션 바 (4개 탭)
- progressive disclosure — 시작은 간결, 탭으로 상세 드러내기
- 풀스크린 전환 방식 (모달/팝업 최소화)

타이포그래피:
- 제목은 볼드 + 레터스페이싱 -0.02em
- clamp()로 유동적 사이즈
- 본문 #222, 보조 텍스트 #333까지만

컬러:
- OKLCH 기반 에너지 느낌의 액센트 컬러
- 뉴트럴도 브랜드 색조로 tint
- color-mix()로 상태별 컬러 변형

스타일:
- 보더 래디어스 4px (카드), 2px (버튼)
- pill 형태 금지 — 샤프한 인상 우선
- 애니메이션은 transform/opacity만
- 브루탈리스트 터치: 두꺼운 보더, 강한 타이포 대비

금지 사항:
- 뻔한 폰트 금지
- 네온 액센트 on 다크 배경 금지
- 카드 안에 카드 중첩 금지
- 중앙 정렬 남발 금지

테마: 라이트 모드
- 배경은 밝은 오프화이트 (OKLCH 기반, 순수 #fff 금지)
- 텍스트는 #111 ~ #333 범위
- 카드/섹션 구분은 미묘한 보더 또는 배경색 차이로

텍스트 크기: 기본
- 본문: clamp(0.875rem, 1vw, 1rem)
- 제목: clamp(1.5rem, 3vw, 2.5rem)
- 모듈러 스케일 비율 1.25

미적 방향: 미니멀
- 여백을 충분히 활용
- 장식 요소 최소화
- 타이포그래피와 공간으로 위계 표현
- 컬러는 모노톤 + 액센트 1개

시그니처 컬러:
- 메인 컬러: #4338ca
- 서브 컬러: #6366f1
- 액센트 컬러: #f59e0b
- 이 3가지 색상을 OKLCH로 변환하여 팔레트의 기반으로 사용
- 버튼, 링크, 히어로 배경, 로고에 메인 컬러 적용
- 보조 UI 요소, 호버 상태, 아이콘에 서브 컬러 적용
- 배지, CTA 강조, 알림에 액센트 컬러 적용