테크니컬 프리시전 마퀴PREMIUM

# 테크니컬 프리시전 마퀴 — web 디자인 팩

## 이 스타일의 정체성
딥 차콜 배경 위에 1px 헤어라인 사양 그리드가 계기판처럼 옅게 깔리고, 등폭 숫자 스펙 라벨(0–100 km/h · kW · Nm)이 계측기 눈금처럼 정렬되는 독일 엔지니어링 정밀의 다크 프리미엄 사이트다. 무엇을 보면 이 스타일임을 아는가 — 발광·글로우가 일절 없고 깊이는 헤어라인과 표면 명도 차로만 만든다, 모든 수치가 IBM Plex Mono 등폭으로 소수점까지 정렬돼 있다, 스틸 블루 단 한 색만 데이터 라인·강조 라벨에 쓰이며 그 외는 무채다, 호버하면 카드가 들뜨는 대신 헤어라인이 한 단계 또렷해지고 스펙 숫자가 계측기처럼 조용히 페이드 인한다.

## 색
- 배경: `#16181C` (딥 차콜). 섹션 교차 시 `#1B1E23`.
- 표면(패널·카드): `#2A2D33`. 헤어라인 그리드선도 같은 톤 `#2A2D33`.
- 텍스트: `#E4E6EA` (본문·헤드라인). 보조·스펙 라벨: `#9296A0`.
- 강조: 스틸 블루 단 하나 — `#5AA9E6`. 데이터 라인·차트 시리즈·강조 라벨·포커스 링·CTA 보더에만. 면적 7% 이하. 스틸 블루 외 강조색 절대 금지.
- 본문 대비: `#E4E6EA` on `#16181C` ≈ 13:1 (WCAG AAA).

## 타이포그래피
- 헤드라인: `IBM Plex Sans`(Google Fonts) weight 600, 대체 `Inter, Arial, sans-serif`. H1 `clamp(2.2rem, 3.4vw, 3rem)`, `letter-spacing: -0.01em`, line-height 1.2.
- 본문: `IBM Plex Sans` `1rem`, weight 400, line-height 1.65, 측정 62–70자.
- 스펙 숫자·계측 라벨: `IBM Plex Mono`(Google Fonts) weight 500, `font-variant-numeric: tabular-nums`. 큰 수치 `clamp(1.5rem, 2.4vw, 2.2rem)`, 단위 접미사(`kW`·`Nm`·`s`)는 `0.7em`로 축소. 소수점 정렬 필수.
- 키커/섹션 라벨: `IBM Plex Mono` `0.72rem`, weight 500, 대문자, `letter-spacing: 0.16em`, 색 `#5AA9E6`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1280px`. 좌우 패딩 모바일 24px / 데스크탑 64px.
- 브레이크포인트: 768px, 1120px.
- 12열 strict-grid, 컬럼 갭 24px. 모든 요소가 컬럼 경계에 스냅.
- 배경에 1px 헤어라인 사양 그리드를 옅게 노출 — 수직 12선 + 96px 간격 수평선, 색 `#2A2D33`, opacity 0.5.
- 섹션 수직 리듬: 일정한 `96px`(balanced — 불규칙 리듬 금지). 데스크탑 1280px 뷰포트 기준.
- 히어로는 좌 7열 제품 비주얼 + 우 5열 스펙 컬럼 비대칭이되 strict-grid 경계 준수.
- **구성 균형 — 평면 보이드 금지.** 절제된 다크 팩이지만 큰 빈 차콜 면은 미완성으로 읽힌다. 제품 비주얼 프레임이나 빈 영역에는 반드시 실제 트리트먼트를 담는다: 헤어라인 사양 그리드(수직 12선 + 96px 수평선)를 그 영역까지 연장, L자 코너 크롭마크, 옅은 등고선/계측 눈금 SVG, 또는 1px 헤어라인 차트(라인 그래프·바). 평면 단색 차콜 면을 그대로 두지 말 것.
- **간격 리듬:** 8px 베이스 스케일. 키커↔H1 16px, H1↔본문 24px, 스펙 행 간 16px, 카드 내부 패딩 32px 일관. 모든 헤어라인 1px 두께 통일. 스펙 숫자는 소수점 기준 광학 정렬, 컬럼 경계에 스냅.
- 각 섹션은 완결 — 콘텐츠 + 헤어라인 그리드 + 스펙/크롭마크가 함께 자리잡는다. 빈약한 파편 섹션 금지.

## 형태 / 질감
- 모서리: 카드·이미지·버튼 radius 최대 `2px` — 거의 직각.
- 보더: 1px 헤어라인만 — `1px solid #2A2D33`. 강조 보더는 `1px solid #5AA9E6`.
- 그림자: 일절 없음. 깊이는 표면 명도 차(`#2A2D33` 패널)와 헤어라인으로만.
- 아이콘: 1.25px 스트로크 라인 아이콘, 색 `#9296A0`. 면 아이콘·이모지 금지.
- 이미지: radius 2px, `1px solid #2A2D33`, 채도 -8%. 위에 1px 헤어라인 크롭마크(코너 L자)를 4모서리에 둘 수 있음.
- 버튼: CTA — 투명 배경 + `1px solid #5AA9E6` + 스틸 블루 텍스트, 패딩 `12px 28px`, `IBM Plex Mono` 대문자 `letter-spacing 0.1em`. 호버 시 보더·텍스트가 한 단계 밝아짐(채움 없음).

## 모션
- 전환: `subtle` — `200ms cubic-bezier(0.22, 1, 0.36, 1)` (ease-out 계열).
- 스크롤 진입: 스펙 숫자·헤어라인 그리드가 `opacity 0 → 1`, 220ms, 60ms stagger — 계측기 바늘이 안정되듯 조용히.
- 호버: 카드는 들뜨지 않음(`translateY` 금지). 헤어라인 보더가 `#2A2D33 → #5AA9E6`로 한 단계 또렷해지고, 스펙 숫자가 `#9296A0 → #E4E6EA`로 밝아짐.
- 숫자 카운트업 모션 허용 — 0에서 목표값까지 240ms, ease-out.
- `prefers-reduced-motion`: 진입 트랜스폼·카운트업 제거, 호버는 보더 색 변화만.
- 스냅·바운스·발광 펄스·1초 이상 모션 금지.

## 컴포넌트
- **헤더/내비:** 높이 64px, 배경 `#16181C` + 하단 `1px solid #2A2D33`. 좌측 워드마크(Plex Sans 600), 중앙 메뉴(Plex Mono 0.78rem 대문자, 항목 간격 28px), 우측 CTA 보더 버튼. 스크롤 시 헤어라인만 또렷해짐.
- **스펙 카드:** `#2A2D33` 표면, 1px 헤어라인, radius 2px, 내부 패딩 32px. 상단 Plex Mono 키커 라벨 + 거대 등폭 수치(소수점 정렬) + 단위 접미사 + 하단 1px 구분선 + 캡션. 카드 내부 간격: 키커↔수치 12px, 수치↔구분선 20px, 구분선↔캡션 12px 일관. 박스 안 죽은 공백 금지.
- **L자 크롭마크:** 카드·이미지 4모서리에 1px 헤어라인 L자 마크(길이 16px). 계측기 프레임 디테일 — 빈 비주얼 프레임에도 적용해 미완성 느낌 제거.
- **아이콘:** 1.25px 스트로크 라인 아이콘, 색 `#9296A0`. 제너릭 아이콘 세트 금지 — 계측·엔지니어링 모티프(눈금·게이지·캘리퍼)로 크래프트. 면 아이콘·이모지 금지.
- **헤어라인 차트:** 빈 영역 채움용 — 1px `#2A2D33` 그리드 위에 스틸 블루 1px 라인 그래프 또는 바. 데이터 시각화가 곧 장식.
- **스펙 카드:** `#2A2D33` 표면, 1px 헤어라인, radius 2px. 상단 Plex Mono 키커 라벨 + 거대 등폭 수치(소수점 정렬) + 단위 접미사 + 하단 1px 구분선 + 캡션.
- **비교 테이블:** 행 구분 1px 헤어라인, 헤더행 Plex Mono 대문자, 숫자 셀 우측 정렬·tabular-nums. 강조 행만 좌측에 2px 스틸 블루 표시선.
- **폼 입력:** 투명 배경 + 하단 `1px solid #2A2D33` 언더라인만(박스 보더 없음). 포커스 시 언더라인 스틸 블루.
- **버튼:** CTA — 투명 + `1px solid #5AA9E6` + 스틸 블루 텍스트, 패딩 `12px 28px`, Plex Mono 대문자 letter-spacing 0.1em, radius 2px. 호버 시 보더·텍스트 한 단계 밝아짐(채움 없음).

## 하지 말 것
- 발광 보더·라디얼 글로우·네온 펄스 금지 — 깊이는 헤어라인과 명도 차로만(luminous-dark-bento와 갈리는 핵심).
- 둥근 카드(radius > 2px)·그라디언트·이모지 금지.
- 스펙 숫자를 비등폭(프로포셔널) 폰트로 쓰기 금지 — 반드시 IBM Plex Mono tabular-nums.
- 스틸 블루 외 강조색 금지. 스틸 블루를 큰 면 배경으로 칠하기 금지 — 라인·라벨·보더에만.
- 카드 호버 시 `translateY`로 들어올리기 금지 — 헤어라인·숫자 밝기 변화로만.
- 순흑(`#000000`) 배경 금지 — 딥 차콜 `#16181C`.
- 불규칙 섹션 리듬 금지 — 96px 일정.
- 스냅·바운스 모션 금지 — 모션은 subtle.
- 평면 단색 데드 보이드 금지 — 빈 차콜 면은 헤어라인 사양 그리드·L자 크롭마크·계측 눈금 SVG·헤어라인 차트로 해소.
- 빈 플레이스홀더 채움 블록 금지 — 제품 비주얼 프레임에는 실제 이미지 또는 헤어라인 와이어프레임/차트를 담는다.
- 길 잃은 떠다니는 요소 금지 — 모든 요소는 12열 strict-grid 경계에 스냅.
- 정체성 약화 금지 — 헤어라인 사양 그리드·등폭 스펙 숫자가 모든 페이지에서 또렷해야 한다. 일반 다크 사이트로 회귀 금지.
- 제너릭 플레이스홀더 아이콘 금지 — 계측·엔지니어링 모티프로 크래프트한 1.25px 라인 아이콘만.

## 상세 페이지 (6종)

### 1. 히어로 (제품 + 스펙 컬럼)
풀폭 `#16181C` 배경에 헤어라인 사양 그리드 노출. 12열 중 좌 7열에 제품 비주얼(radius 2px, 4모서리 L자 크롭마크), 우 5열에 스펙 컬럼. 스펙 컬럼은 Plex Mono 키커("PERFORMANCE") + H1(Plex Sans 600, clamp(2.2rem,3.4vw,3rem)) + 3행 스펙 스택 — 각 행은 등폭 수치(예: `3.4` + `0–100 km/h` 단위) + 1px 구분선. 하단에 보더 CTA 버튼 한 개. 히어로 높이 min(88vh, 720px).
**좌 7열 제품 비주얼 해소(필수):** 실제 제품 이미지가 없으면 평면 차콜로 두지 말 것 — 헤어라인 사양 그리드를 그 면까지 촘촘히 연장하고, 그 위에 제품 윤곽 와이어프레임 SVG(1px `#2A2D33` 라인, 계측 도면처럼) + 4모서리 L자 크롭마크 + 한쪽에 치수 보조선·눈금. 계측 도면 같은 비주얼이 면을 채운다. 우 5열 스펙 컬럼은 죽은 공백 없이 키커·H1·스펙 스택·CTA가 컬럼 높이를 균형 있게 채운다.

### 2. 헤더·내비게이션
높이 64px 고정 헤더, 하단 `1px solid #2A2D33`. 좌측 워드마크, 중앙에 5개 메뉴 항목(Plex Mono 0.78rem 대문자 letter-spacing 0.16em, 색 #9296A0), 우측 보더 CTA. 메뉴 호버 시 텍스트 #E4E6EA + 하단 1px 스틸 블루 인디케이터. 모바일(<768px)은 우측 햄버거 1.25px 라인 아이콘.

### 3. 기능 그리드
12열 strict-grid에 3열 카드 3개(각 4열 span). 각 카드 `#2A2D33` 표면 + 1px 헤어라인 + radius 2px, 패딩 32px. 카드 상단 1.25px 라인 아이콘 + Plex Mono 키커 + H3(Plex Sans 600 1.25rem) + 본문 + 하단 1px 구분선 위 등폭 보조 수치 1개. 카드 간 갭 24px. 호버 시 헤어라인 스틸 블루.

### 4. 스펙 비교 테이블
content_max 1280px 안에 풀폭 비교 테이블. 첫 열은 항목명(Plex Sans), 우측 3개 열은 모델별 수치(Plex Mono tabular-nums, 우측 정렬). 헤더행 배경 `#1B1E23` + Plex Mono 대문자. 행마다 하단 1px 헤어라인. 추천 열은 상단부터 하단까지 좌측에 2px 스틸 블루 세로선 + 헤더 셀에 스틸 블루 텍스트. 12행 내외.

### 5. 모델 갤러리
풀폭 섹션, 12열을 2열 그리드(각 6열 span, 갭 24px)로 모델 이미지 카드 4개. 각 카드 이미지(radius 2px, 채도 -8%) + 하단 캡션 바(`#2A2D33`, Plex Mono 모델명 + 등폭 가격 수치). 카드 4모서리 L자 크롭마크. 호버 시 헤어라인 또렷 + 가격 숫자 밝아짐(이미지 줌 없음). 이미지가 없는 카드는 헤어라인 와이어프레임 도면 + 크롭마크로 채워 평면 보이드를 만들지 않는다.

### 6. CTA·푸터
CTA 섹션: `#1B1E23` 배경, 중앙 정렬 H2 + 보더 CTA 버튼 한 개 + 상하 헤어라인 룰. 푸터: `#16181C`, 상단 `1px solid #2A2D33`. 12열을 4컬럼(워드마크+소개 / 제품 / 회사 / 법적고지)으로, 각 컬럼 Plex Mono 대문자 헤더 + 라인 메뉴. 최하단 1px 헤어라인 위 카피라이트(Plex Mono 0.72rem #9296A0). 패딩 96px.