래디컬 섭트랙션 화이트PREMIUM

# 래디컬 섭트랙션 화이트 — web 디자인 팩

## 이 스타일의 정체성
풀뷰포트 시네마틱 사진 한 장 + 짧은 헤드라인 한 줄 + 외곽선/솔리드 버튼 한 쌍만 남기고 장식 UI를 전부 제거한, 극단적 환원의 클린 화이트 사이트다. 무엇을 보면 이 스타일임을 아는가 — 모든 콘텐츠가 중앙 축에 정렬되고 배지·태그·아이콘 같은 장식 UI가 하나도 없다, 각 섹션이 풀뷰포트 사진 한 장으로 채워지고 섹션 간 스냅 스크롤로 넘어간다, 색이 순수 무채(흰 배경 + near-black 텍스트)뿐이고 강조색이 없다, 버튼은 외곽선 1px 또는 솔리드 두 가지뿐 — 그것도 한 쌍.

## 색
- 배경: `#FFFFFF`. 패널(가격 카드 등): `#F4F4F4`.
- 텍스트: `#171A20` (near-black). 보조: `#5C5E62`.
- 강조색 없음 — 순수 무채. 버튼 외곽선·솔리드 모두 `#171A20`.
- 본문 대비: `#171A20` on `#FFFFFF` ≈ 16:1 (WCAG AAA).

## 타이포그래피
- 디스플레이: `Inter`(Google Fonts) weight 500, 대체 `Helvetica Neue, Arial, sans-serif`. H1 `clamp(2rem, 3.4vw, 3.4rem)`, weight 500(라이트한 지오메트릭 미니멀), `letter-spacing: -0.01em`, line-height 1.15.
- 본문: `Inter` weight 400, `1rem`, line-height 1.6, 측정 50–62자 — 짧게.
- 캡션/메타: `Inter` `0.8rem`, weight 400, 색 `#5C5E62`.
- 버튼 라벨: `Inter` `0.82rem`, weight 500, `letter-spacing: 0.02em`. 거대 디스플레이·헤비 웨이트 금지 — 환원의 미감.

## 레이아웃 / 그리드
- 콘텐츠 텍스트 폭: `680px` 중앙 정렬. 사진 섹션은 풀뷰포트(100vw × 100vh). 데스크탑 1280px 뷰포트 기준.
- 브레이크포인트: 768px, 1100px.
- 각 섹션 = 풀뷰포트 시네마틱 사진 한 장. 사진 위 또는 사진 아래 흰 영역에 콘텐츠 — 모두 중앙 정렬(좌우 정렬·비대칭 금지).
- 섹션 간 스냅 스크롤: `scroll-snap-type: y mandatory`, 각 섹션 `scroll-snap-align: start`.
- 콘텐츠는 헤드라인(중앙 상단) + 짧은 서브카피 + 버튼 페어(중앙) — 그게 전부.
- **절제 ≠ 빈약 — 풀뷰포트 사진은 필수 콘텐츠다.** 이 팩의 "여백"은 풀뷰포트 시네마틱 사진이 채우는 것이지 빈 흰/검정 면이 아니다. 사진 섹션은 반드시 화면을 가득 채우는 시네마틱 비주얼(실제 사진 또는 고품질 그라디언트·텍스처 이미지)을 담는다 — 평면 단색 면 금지. 흰 배경 섹션(가격 등)도 카드·콘텐츠가 중앙에 충실히 자리잡아 빈약하지 않게.
- **간격 리듬:** 8px 베이스 스케일. 헤드라인↔서브카피 16px, 서브카피↔버튼 페어 32px, 버튼 페어 내부 버튼 간 16px. 가격 카드 내부 패딩 36px, 옵션명↔가격 12px, 가격↔사양 20px, 사양↔버튼 24px 일관. 모든 콘텐츠는 중앙 축 기준 광학 정렬.
- 각 섹션은 완결 — 풀뷰포트 사진 + 중앙 콘텐츠가 함께 자리잡는다. 절제하되 파편 금지.

## 형태 / 질감
- 모서리: 버튼·카드 radius `4px` — 거의 직각, 미세하게만.
- 보더: 외곽선 버튼 `1px solid #171A20`. 카드 보더 없음 — `#F4F4F4` 면 채움으로만 구분.
- 그림자: 일절 없음.
- 아이콘: 최소화 — 내비 화살표 같은 필수 아이콘만, 1px 스트로크. 장식 아이콘·배지·이모지 금지.
- 이미지: 풀뷰포트 시네마틱 사진, radius 0px, 채도·콘트라스트 자연스럽게. 텍스트 가독을 위한 미세 어둠 그라데이션 오버레이 1줄만 허용.
- 버튼: 두 종류뿐 — (1) 솔리드 `#171A20` 배경 + 흰 텍스트, (2) 외곽선 `1px solid #171A20` + near-black 텍스트. 패딩 `11px 26px`, radius 4px.

## 모션
- 전환: `snappy` — `200ms cubic-bezier(0.4, 0, 0.2, 1)`.
- 섹션 전환: 스냅 스크롤이 200ms로 다음 풀뷰포트 섹션에 단호하게 안착.
- 스크롤 진입: 헤드라인·버튼이 `opacity 0→1` 200ms — 거의 즉각적, 트랜스폼 최소.
- 호버: 솔리드 버튼은 `#171A20 → #393C41`로 미세하게 밝아짐(200ms). 외곽선 버튼은 호버 시 솔리드로 채워짐(흰 텍스트, 200ms).
- `prefers-reduced-motion`: 스냅 스크롤 유지하되 fade 제거.
- 패럴랙스·바운스·느린 흐름 모션 금지 — 환원적이되 전환은 단호.

## 컴포넌트
- **헤더/내비:** 높이 56px, 투명 또는 흰 배경. 좌측 워드마크(Inter 500), 중앙/우측 메뉴(Inter 400 0.82rem, 항목 간격 24px). 보더·그림자 없음. 사진 섹션 위에서는 텍스트 색이 사진 명도에 따라 흰/검 전환. 메뉴 호버: 텍스트 opacity 0.7, 200ms.
- **풀뷰포트 섹션:** 100vh 사진 + 중앙 정렬 헤드라인 + 서브카피 + 버튼 페어. 카드·배지 없음. 사진은 화면을 꽉 채우는 시네마틱 비주얼 — 평면 단색 면 금지.
- **가격 카드:** `#F4F4F4` 면, 보더 없음, radius 4px, 내부 패딩 36px. 중앙 정렬 — 옵션명 + 가격(Inter 500) + 사양 리스트(불릿 없이 줄바꿈, 행 간 8px) + 버튼 페어. 카드 내부 간격 일관(레이아웃 항 참조), 카드 안 죽은 공백 금지.
- **아이콘:** 최소화 — 내비 화살표 같은 필수 아이콘만, 1px 스트로크로 정밀하게 크래프트. 제너릭 아이콘 세트·장식 아이콘·배지·이모지 금지.
- **버튼:** 두 종류뿐 — (1) 솔리드 `#171A20` 배경 + 흰 텍스트, (2) 외곽선 `1px solid #171A20` + near-black 텍스트. 패딩 `11px 26px`, radius 4px, Inter 500 0.82rem. 호버: 솔리드는 `#171A20→#393C41`, 외곽선은 솔리드로 채워짐(흰 텍스트), 200ms.
- **버튼 페어:** 솔리드 + 외곽선 버튼이 항상 한 쌍, 가로 또는 세로로 중앙 정렬, 버튼 간 16px.

## 하지 말 것
- 넓은 자간 럭셔리 라벨·좌우 정렬·풀블리드 비대칭 레이아웃 금지(minimal-luxury 자리) — 중앙 정렬 + 스냅 스크롤이 정체성.
- 배지·태그·장식 아이콘·일러스트 추가 금지 — 장식 UI 전부 제거.
- 강조색 금지 — 순수 무채 흰/near-black.
- 그라디언트(텍스트 가독용 미세 어둠 오버레이 1줄 예외)·둥근 카드(radius > 4px)·이모지 금지.
- 그림자 금지 — 깊이 표현 자체를 쓰지 않음.
- 거대 헤비 디스플레이 헤드라인 금지 — weight 500의 라이트 지오메트릭.
- 비대칭·다단 콜라주 레이아웃 금지 — 모든 것이 중앙 축.
- 느린 패럴랙스 모션 금지 — 전환은 snappy 스냅.
- 평면 단색 데드 보이드 금지 — 풀뷰포트 사진 섹션은 시네마틱 비주얼로 화면을 꽉 채운다. 빈 흰/검정 면을 사진 자리에 두지 말 것.
- 빈 플레이스홀더 채움 블록 금지 — 사진 자리에는 실제 시네마틱 이미지 또는 고품질 그라디언트/텍스처 비주얼을 담는다.
- 빈약함 금지 — 절제는 컴포넌트·디테일을 충실히 한 결과이지 콘텐츠를 누락한 것이 아니다. 가격 카드·풀뷰포트 사진은 충실히 완결한다.
- 길 잃은 떠다니는 요소 금지 — 모든 콘텐츠는 중앙 축에 정렬.
- 정체성 약화 금지 — 풀뷰포트 사진 + 중앙 정렬 + 스냅 스크롤 + 외곽선/솔리드 버튼 페어가 모든 페이지에서 또렷해야 한다.
- 제너릭 플레이스홀더 아이콘 금지 — 필수 아이콘만 1px 라인으로 정밀 크래프트.

## 상세 페이지 (6종)

### 1. 히어로 (풀뷰포트 사진)
100vh 풀뷰포트 시네마틱 제품 사진 한 장. 사진 위 중앙 상단(상단에서 15vh)에 짧은 Inter 500 헤드라인(`clamp(2rem,3.4vw,3.4rem)`) + 1줄 서브카피. 화면 하단 중앙(하단에서 12vh)에 버튼 페어 — 솔리드 "Order Now" + 외곽선 "Learn More" 가로 배열. 그 외 UI 없음. 텍스트 색은 사진 명도에 따라 흰/검.
**사진 필수:** 히어로의 100vh는 시네마틱 제품 사진이 가득 채운다 — 평면 흰/검정 면 절대 금지. 실제 고품질 사진 또는 시네마틱 그라디언트·텍스처 비주얼(예: 깊이감 있는 다크-라이트 그라데이션 + 미세 노이즈)로 화면을 채운다. 텍스트 가독을 위한 미세 어둠 그라데이션 오버레이 1줄만 허용.

### 2. 헤더·내비게이션
높이 56px, 풀뷰포트 사진 위 투명 오버레이. 좌측 워드마크, 중앙 5개 메뉴(Inter 400 0.82rem), 우측 보조 링크 2개. 보더·그림자·배경 채움 없음. 메뉴 호버 시 텍스트 opacity 0.7. 모바일은 우측 1px 라인 햄버거 — 열면 풀스크린 흰 오버레이 중앙 정렬 메뉴.

### 3. 풀뷰포트 기능 스택
연속 3개의 100vh 섹션, 각 섹션 = 풀뷰포트 사진 + 중앙 정렬 헤드라인 + 서브카피 + 버튼 페어. 섹션마다 scroll-snap-align: start. 사진은 기능별로 다른 시네마틱 컷. 각 섹션 동일 구조 반복 — 환원의 리듬. 텍스트 위치는 사진 상단 또는 하단 중 가독 좋은 쪽.

### 4. 가격·구성 옵션
흰 배경 100vh 섹션(사진 없음). 중앙 상단 헤드라인 + 그 아래 가격 카드 2–3개를 가로 중앙 정렬. 각 카드 `#F4F4F4` 면(보더 없음, radius 4px, 패딩 36px) — 옵션명 + 큰 가격 숫자(Inter 500) + 사양 3–4줄(불릿 없이 줄바꿈, #5C5E62) + 버튼 페어. 카드 폭 균등.

### 5. 갤러리
연속 2–3개 100vh 풀뷰포트 사진 섹션 — 각 섹션 사진 한 장 + 하단 중앙 작은 캡션(Inter 0.8rem #5C5E62)만. 헤드라인·버튼 없이 사진 자체가 콘텐츠. 스냅 스크롤로 한 컷씩 넘김. 타일 그리드 금지.

### 6. 예약 CTA·푸터
CTA: 흰 배경 또는 풀뷰포트 사진 위, 중앙 정렬 헤드라인 + 버튼 페어("Schedule a Test Drive" 솔리드 + "Contact" 외곽선). 푸터: 흰 배경, 보더 없음. 중앙 정렬 — 워드마크 + 메뉴 링크 가로 1줄(Inter 400 0.82rem) + 최하단 카피라이트(0.8rem #5C5E62). 컬럼 분할 없이 중앙 단일 축, 패딩 80px.