앵귤러 트루블랙 프레스티지PREMIUM

# 앵귤러 트루블랙 프레스티지 — web 디자인 팩

## 이 스타일의 정체성
순흑(true black) 캔버스 위에 헥사곤·예각 사선으로 clip-path된 패널이 비대칭으로 날카롭게 맞물리고, all-caps 압축 Neo-Grotesk가 공격적으로 외치며, 골드 1px 보더가 각진 모서리를 따라 빛나는 프레스티지 사이트다. 무엇을 보면 이 스타일임을 아는가 — 둥근 모서리가 단 하나도 없고 모든 패널이 헥사곤이나 예각 사선으로 잘려 있다, 배경은 회색조차 아닌 완전한 `#000000`이다, 헤드라인이 세로로 길게 압축된 콘덴스드 산세리프 대문자다, 골드는 면이 아니라 각진 1px 보더와 작은 라벨로만 등장한다.

## 색
- 배경: `#000000` (true black). 헥스 패널·표면: `#161616`.
- 텍스트: `#E8E8E8`. 보조·라벨: `#7C7C7C`.
- 강조: 골드 단 하나 — `#C9A24A`. 각진 1px 보더·라벨·구분선에만. 큰 면 배경으로 절대 금지. 면적 6% 이하.
- 본문 대비: `#E8E8E8` on `#000000` ≈ 15:1 (WCAG AAA).

## 타이포그래피
- 디스플레이: `Saira Condensed`(Google Fonts) weight 700, 대체 `Oswald, 'Arial Narrow', sans-serif`. H1 `clamp(2.6rem, 6vw, 5.5rem)`, 대문자, line-height 0.98, `letter-spacing: 0.01em` — 세로로 압축된 공격적 콘덴스드.
- 본문: `Saira`(Google Fonts) weight 400, `1rem`, line-height 1.6, 측정 58–66자.
- 키커/섹션 라벨: `Saira` weight 600, `0.72rem`, 대문자, `letter-spacing: 0.22em`, 색 `#C9A24A`.
- 스펙/인덱스 숫자: `Saira` weight 700, tabular-nums, 큰 수치 `clamp(2rem,3vw,3rem)`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭: `1320px`. 좌우 패딩 모바일 20px / 데스크탑 56px.
- 브레이크포인트: 768px, 1120px.
- 비대칭 — 균등 그리드가 아니라 크기·각도가 어긋난 헥사곤/사선 패널이 긴장감 있게 겹쳐 맞물림. 패널이 서로 16–32px 오버랩.
- 섹션 수직 리듬: `clamp(72px, 9vw, 112px)` (dense — 패널이 빽빽이 맞물림). 데스크탑 1280px 뷰포트 기준.
- 헥사곤·사선 패널은 `clip-path: polygon()`으로 — 예각 12–22°.
- **구성 균형 — 평면 보이드 금지.** 순흑 캔버스에 헥스 패널 하나만 덜렁 있고 나머지가 평평하면 미완성이다. 빈 순흑 영역에는 옅은(opacity 0.06–0.12) 헥사곤 와이어프레임 SVG 패턴, 골드 1px 사선 액센트 라인, 또는 작은 골드 인덱스 라벨 그룹을 깐다. 이미지 패널은 헥사곤/사선 clip-path된 실제 비주얼 또는 와이어프레임 SVG로 채운다 — 평면 단색 패널 금지.
- **간격 리듬:** 8px 베이스 스케일. 키커↔H1 16px, H1↔본문 24px, 본문↔CTA 32px, 헥스 패널 내부 패딩 32px 일관. 패널 오버랩은 16–32px 일관. 골드 보더 1px 두께 통일. 스펙 숫자는 tabular-nums 광학 정렬.
- 각 섹션은 완결 — 패널이 빽빽이 맞물려 화면을 채우고, 빈 영역은 헥사곤 와이어프레임으로 해소.

## 형태 / 질감
- 헥사곤·예각 사선 `clip-path`가 형태 정체성. 모서리 0px(둥근 모서리 절대 금지).
- 보더: 1px 골드 — `1px solid #C9A24A`, clip-path된 패널 가장자리를 따라(가상요소 또는 SVG stroke로). 일반 패널 보더는 `1px solid #161616`.
- 그림자 없음. 깊이는 패널 명도 차(`#161616`)와 골드 보더로.
- 아이콘: 1.5px 스트로크 각진 지오메트릭 라인, 색 `#7C7C7C`. 둥근 아이콘·이모지 금지.
- 이미지: 헥사곤 또는 사선 clip-path로 잘림. 채도 -10%, 어두운 그레이딩. 직사각형 그대로 쓰기 금지.
- 버튼: 평행사변형(사선 clip-path) — 투명 + `1px solid #C9A24A` + 골드 텍스트, 대문자 letter-spacing 0.16em. 호버 시 골드 보더 채도 한 단계 + 텍스트 밝아짐.

## 모션
- 전환: `subtle` — `180ms cubic-bezier(0.4, 0, 0.2, 1)`.
- 스크롤 진입: 헥사곤/사선 패널이 `clip-path` 살짝 확장 + `opacity 0→1`, 200ms, 80ms stagger — 절제된 마이크로모션.
- 호버: 패널 골드 보더가 한 단계 또렷해짐(채움 없음). 사선 엣지 라인이 1px → 1.5px로. 패널은 이동·확대하지 않음.
- 골드 라벨에 호버 시 letter-spacing이 0.22em → 0.26em으로 미세 확장.
- `prefers-reduced-motion`: 진입 트랜스폼 제거, opacity·보더 변화만.
- playful 모션·바운스·스냅 클립 리빌 금지 — 절제된 120–200ms 마이크로모션.

## 컴포넌트
- **헤더/내비:** 높이 68px, `#000000` 배경, 하단 1px 골드 헤어라인. 좌측 워드마크(Saira Condensed 700 대문자), 우측 메뉴(Saira 600 대문자 0.72rem, 항목 간격 28px). CTA는 평행사변형 골드 보더 버튼.
- **헥스 패널 카드:** 헥사곤 clip-path, `#161616` 표면, 1px 골드 보더(가상요소 또는 SVG stroke), 내부 패딩 32px. 안에 각진 라인 아이콘 + 골드 키커 + Saira Condensed 제목 + 본문. 카드 내부 간격: 아이콘↔키커 16px, 키커↔제목 12px, 제목↔본문 12px 일관. 헥사곤 안 죽은 공백 금지 — 콘텐츠를 패널 형태에 맞춰 정렬.
- **헥사곤 와이어프레임:** 빈 순흑 영역 채움용 — 옅은(opacity 0.08) 골드/회색 헥사곤 격자 SVG. 배경 텍스처이자 정체성 강화.
- **아이콘:** 1.5px 스트로크 각진 지오메트릭 라인, 색 `#7C7C7C`. 제너릭 아이콘 세트 금지 — 헥사곤·예각 모티프로 크래프트한 각진 아이콘. 둥근 아이콘·이모지 금지.
- **각진 기능 그리드:** 헥사곤 패널이 벌집처럼 교차 배열(홀수 행 오프셋).
- **스펙 패널:** 사선 clip-path 패널 + 거대 tabular 숫자 + 단위 + 골드 1px 구분선.
- **버튼:** 평행사변형(사선 clip-path) — 투명 + `1px solid #C9A24A` + 골드 텍스트, 대문자 letter-spacing 0.16em, 패딩 `12px 28px`. 호버 시 골드 보더 채도 한 단계 + 텍스트 밝아짐(채움 없음).

## 하지 말 것
- 둥근 모서리·둥근 벤토 타일 절대 금지(velvet-dark-boutique 자리) — 헥사곤·예각 사선 clip-path만.
- 풀블리드 미디어 콜라주·미디어 타일 콜라주 금지(immersive-media-grid 자리).
- 골드를 큰 면·버튼 솔리드 배경으로 칠하기 금지 — 각진 1px 보더·라벨에만.
- 골드 외 강조색 금지.
- 순흑이 아닌 차콜/그레이 배경 금지 — `#000000` true black.
- 이미지를 직사각형 그대로 쓰기 금지 — 헥사곤/사선 clip-path 필수.
- playful·바운스·스냅 모션 금지 — subtle 마이크로모션.
- 그라디언트·글로우·이모지 금지.
- 평면 단색 데드 보이드 금지 — 빈 순흑 영역은 옅은 헥사곤 와이어프레임 SVG·골드 사선 액센트로 해소.
- 빈 플레이스홀더 채움 블록 금지 — 이미지 패널에는 clip-path된 실제 비주얼 또는 와이어프레임 SVG를 담는다.
- 길 잃은 떠다니는 요소 금지 — 모든 패널은 서로 16–32px 오버랩하며 맞물린다. 고립된 단일 패널 금지.
- 정체성 약화 금지 — 헥사곤/사선 clip-path 패널과 골드 1px 보더가 모든 페이지에서 또렷해야 한다. 직사각형 패널로 회귀 금지.
- 제너릭 플레이스홀더 아이콘 금지 — 헥사곤·예각 모티프로 크래프트한 1.5px 각진 아이콘만.

## 상세 페이지 (6종)

### 1. 히어로 (헥사곤 클립)
풀폭 `#000000` 캔버스, min-height 90vh. 좌측에 거대 Saira Condensed 헤드라인 대문자(`clamp(2.6rem,6vw,5.5rem)`, line-height 0.98) + 골드 키커 + Saira 본문 + 평행사변형 골드 보더 CTA. 우측에 헥사곤 clip-path 제품 이미지 패널(채도 -10%) — 1px 골드 보더 따라. 헥스 패널과 좌측 텍스트 블록이 24px 오버랩.
**빈 영역 해소(필수):** 캔버스 빈 순흑 영역(헥스 패널 주변·배경)을 평면으로 두지 말 것 — 배경 전체에 옅은(opacity 0.08) 헥사곤 와이어프레임 격자 SVG를 깔고, 헥스 패널 가장자리에서 뻗어 나오는 골드 1px 사선 액센트 라인 2–3개를 더한다. 헥스 이미지 패널은 실제 제품 비주얼 또는 clip-path된 와이어프레임 SVG로 채운다 — 평면 단색 헥사곤 금지. 헤드라인이 화면의 다수를 차지하도록 거대하게.

### 2. 헤더·내비게이션
높이 68px `#000000` 헤더, 하단 1px 골드 헤어라인. 좌측 워드마크(Saira Condensed 700), 중앙 5개 메뉴(Saira 600 대문자 0.72rem letter-spacing 0.22em #7C7C7C), 우측 평행사변형 골드 보더 CTA. 메뉴 호버 시 골드 텍스트 + letter-spacing 미세 확장. 모바일은 각진 햄버거 라인 아이콘.

### 3. 각진 기능 그리드
content_max 1320px 안에 헥사곤 패널 6개를 벌집 배열 — 2행, 홀수 행을 패널 폭의 절반만큼 오프셋해 인접 패널과 사선 엣지가 맞물림. 각 헥스 패널 `#161616` + 1px 골드 보더, 안에 각진 라인 아이콘 + 골드 키커 + Saira Condensed 제목(1.4rem 대문자) + 본문. 호버 시 골드 보더 또렷.

### 4. 퍼포먼스 콘텐츠
풀폭 섹션. 좌 5열에 사선 clip-path된 콘텐츠 이미지 패널, 우 7열에 텍스트 — 골드 키커 + Saira Condensed 헤드라인 + 본문 + 3개 사선 스펙 패널(가로 배열, 각 패널 거대 tabular 숫자 + 단위 + 골드 구분선). 패널 간 12–22° 예각 엣지가 어긋나게 맞물림.

### 5. 갤러리
`#000000` 풀폭. 헥사곤/사선 clip-path 이미지 패널 5개를 크기 위계 다르게 비대칭 배열(큰 패널 1 + 작은 패널 4) — 패널들이 16–32px씩 오버랩하며 어긋나 맞물린다(고립된 패널 금지). 각 패널 1px 골드 보더 + 좌하단 골드 인덱스 라벨. 호버 시 골드 엣지 라인 1px→1.5px. 패널 사이 빈 순흑 영역은 옅은 헥사곤 와이어프레임으로 채운다. 이미지가 없는 패널은 clip-path된 와이어프레임 SVG로.

### 6. CTA·푸터
CTA: `#161616` 사선 clip-path 풀폭 패널, 중앙 Saira Condensed 대문자 CTA 문구 + 평행사변형 골드 버튼. 푸터: `#000000`, 상단 1px 골드 헤어라인. 4컬럼(워드마크 / 모델 / 퍼포먼스 / 법적고지), 각 컬럼 골드 대문자 헤더 + Saira 메뉴. 최하단 1px 골드 헤어라인 위 카피라이트(Saira 0.72rem #7C7C7C).