데 스틸 네오플라스틱PREMIUM

# 데 스틸 네오플라스틱 — web 디자인 팩

## 이 스타일의 정체성
굵은 순흑 수직·수평 선이 페이지를 직사각형 면으로 비대칭 분할하고, 일부 면만 순수 빨강·노랑·파랑으로 채우며 나머지는 흰색으로 두는 1917년 신조형주의(몬드리안·리트벨트) 사이트다. 무엇을 보면 이 스타일임을 아는가 — 사선과 곡선이 단 하나도 없고 모든 분할이 수직·수평 직선이다, 검정 선이 6–12px로 굵게 면을 가른다, 색이 삼원색(빨강·노랑·파랑)뿐이고 그것도 면 전체에서 소수의 면만 채운다, 모션이 전혀 없는 정적 구성이다.

## 색
- 배경 / 화이트 필드: `#FFFFFF`.
- 프라이머리 레드: `#E30613`. 프라이머리 옐로: `#FFD500`. 프라이머리 블루: `#0050A0`.
- 블랙 라인: `#1A1A1A` (분할선·텍스트).
- 색 면은 전체 면 중 소수만 채움 — 대부분은 흰색. 삼원색 외 색 절대 금지.
- 본문 대비: `#1A1A1A` on `#FFFFFF` ≈ 16:1 (WCAG AAA). 색 면 위 텍스트는 흰색 또는 검정 중 대비 4.5:1 이상 확보.

## 타이포그래피
- 디스플레이: `Archivo Black`(Google Fonts) weight 400, 대체 `'Arial Black', Helvetica, sans-serif`. H1 `clamp(2.4rem, 5vw, 4.6rem)`, 대문자, line-height 1.0, `letter-spacing: -0.01em` — 기하학적 그로테스크.
- 본문: `Archivo`(Google Fonts) weight 500, `1rem`, line-height 1.5, 측정 56–66자.
- 라벨/메타: `Archivo` weight 700, `0.75rem`, 대문자, `letter-spacing: 0.12em`.
- 텍스트는 면 안에서 수평·수직 정렬만 — 회전·사선 텍스트 금지.

## 레이아웃 / 그리드
- 콘텐츠 폭: 풀폭 면 분할 — content_max 없음(데스크탑 1280px 뷰포트 기준). 화면 전체가 직사각형 면 구성.
- 브레이크포인트: 768px, 1120px.
- 비대칭 면 분할 — 굵은 검정 선(6–12px)이 화면을 크기가 제각각인 직사각형 면으로 가름(몬드리안 구성). 면 크기는 의도적으로 불균등 — 큰 흰 면 + 작은 색 면들이 비대칭 균형.
- CSS Grid `grid-template`로 불균등 트랙(`fr` 값 다르게) 정의, 면 사이를 굵은 검정 갭(`gap` 또는 보더)으로.
- 사선·곡선·대각 구성 일절 금지.
- **해소된 그리드 — 경계 없는 보이드·길 잃은 요소 절대 금지.** 신조형주의 구성의 핵심: 화면의 *모든* 면은 굵은 검정 룰로 사방이 경계 지어진 의도적 직사각형 plane이며, 면들은 빈틈없이 맞물려 화면 전체를 덮는다. 흰색이라도 "경계 없이 그냥 비어 있는 영역"은 존재할 수 없다 — 흰 면도 검정 룰로 둘러싸인 정당한 plane이다. 작은 색 사각형이 큰 빈 흰 공간에 홀로 떠 있는 구성은 실패다. 색 사각형은 항상 검정 룰을 공유하는 인접 면과 맞물려야 한다.
- 그리드 검증: 화면을 CSS Grid로 짤 때 모든 셀이 면으로 채워지고(빈 셀 없음), 모든 셀 경계에 검정 룰이 있는지 확인한다. 어떤 plane도 사방 중 한 변이라도 검정 룰 없이 끝나지 않는다(외곽 화면 경계 제외).
- **간격 리듬:** 검정 룰 두께는 섹션 내 일관 — 주 분할선 8–12px, 보조 분할선 6px. 면 내부 패딩 일관 `clamp(24px,3vw,48px)`. 면 안 텍스트는 패딩 기준 광학 정렬. 면 크기는 불균등하되 검정 룰 두께·면 패딩은 통일.

## 형태 / 질감
- 굵은 검정 선(6–12px)이 유일한 형태 장치 — 면 경계·구분.
- 모서리 0px(직각만). 둥근 모서리·곡선·사선 절대 금지.
- 그림자 없음. 깊이 표현 없음 — 평면 구성.
- 아이콘: 거의 없음. 필요 시 직사각형·직선만으로 구성한 도형. 이모지 금지.
- 이미지: 직사각형 면 안에 꽉 차게, radius 0px. 굵은 검정 보더로 면과 분리.
- 버튼: 직사각형 색 면(레드/블루) + 굵은 검정 보더(4–6px) + Archivo Black 대문자 텍스트. 모서리 0px, 패딩 `14px 32px`.

## 모션
- 모션 없음 — `motion: none`. 정적 신조형주의 구성.
- 스크롤 진입 애니메이션 없음. 호버 시 면 이동·확대 없음.
- 허용되는 유일한 인터랙션: 버튼·링크 호버 시 색 면이 즉시(0ms, 트랜지션 없이) 다른 삼원색으로 교체되거나 검정으로 반전 — 깜빡임 같은 즉각 상태 변화만, 트랜지션 애니메이션 없음.
- `prefers-reduced-motion`: 영향 없음(이미 모션 없음).
- 페이드·슬라이드·스케일·드로우 등 일체의 트랜지션 애니메이션 금지.

## 컴포넌트
- **헤더/내비:** 화면 상단 가로 면 1개 — 흰 면, 하단에 굵은 검정 선(8px). 좌측 워드마크(Archivo Black), 우측 메뉴는 작은 색 면(노랑/블루)에 담긴 라벨. 메뉴 항목 사이 검정 선 구분. 헤더 면도 검정 룰로 경계 지어진 plane.
- **면 분할 카드:** 직사각형 면, 굵은 검정 보더. 색 면 또는 흰 면. 안에 Archivo Black 제목 + Archivo 본문. 카드 내부 패딩 `clamp(24px,3vw,48px)` 일관, 제목↔본문 16px, 텍스트는 면 좌상단 또는 좌하단 정렬(면 안 죽은 공백 금지 — 텍스트가 면을 충분히 채우거나, 면 자체가 작아 텍스트에 맞춰짐).
- **색 면 블록:** 순수 레드/옐로/블루로 채운 직사각형 — 텍스트 또는 빈 면(구성 요소). 빈 색 면도 정당한 컴포넌트 — 단, 반드시 검정 룰로 인접 면과 맞물려야 한다. 큰 흰 공간에 홀로 떠 있는 작은 색 사각형 금지.
- **아이콘:** 제너릭 아이콘 세트 금지 — 직사각형·직선만으로 구성한 기하 도형. 검정 또는 삼원색. 면 안에 plane처럼 배치.
- **버튼:** 레드 또는 블루 직사각형 면 + 굵은 검정 보더(4–6px), Archivo Black 대문자, 패딩 `14px 32px`, radius 0. 호버 시 면 색이 0ms로 다른 삼원색·검정으로 즉시 교체.

## 하지 말 것
- 원·삼각형·대각선 구성 금지(bauhaus 자리) — 직사각형 면 분할만.
- 사선·곡선·회전 텍스트 절대 금지 — 모든 선과 면이 수직·수평.
- 삼원색(빨강·노랑·파랑) 외 색 금지 — 보라·초록·주황·파스텔 전부 금지.
- 그라디언트·그림자·둥근 모서리·이모지 금지.
- 모션·트랜지션 애니메이션 추가 금지 — 정적 구성이 정체성.
- 검정 선을 가늘게(< 6px) 쓰기 금지 — 굵은 선이 정체성.
- 모든 면을 색으로 채우기 금지 — 대부분 흰 면, 소수만 삼원색.
- 균등한 면 분할 금지 — 비대칭 불균등 면 크기.
- **경계 없는 빈 보이드 절대 금지** — 화면에 검정 룰로 둘러싸이지 않은 빈 흰 영역이 있으면 미완성이다. 모든 흰 영역은 검정 룰로 경계 지어진 의도적 plane이어야 한다. 큰 흰 공백 = 데드 보이드.
- **길 잃은 떠다니는 요소 절대 금지** — 작은 색 사각형이 빈 흰 공간에 홀로 떠 있으면 실패다. 모든 색 면은 검정 룰을 공유하며 인접 면과 빈틈없이 맞물린다.
- 빈 플레이스홀더 채움 블록("이미지 영역" 회색 박스) 금지 — 이미지 면은 실제 이미지 또는 정당한 색/흰 plane.
- 정체성 약화 금지 — 신조형 면 분할 그리드가 모든 페이지에서 또렷해야 한다. 검정 룰을 가늘게·면 분할을 균등하게 만들어 일반 그리드 사이트로 회귀 금지.
- 제너릭 플레이스홀더 아이콘 금지 — 직사각형·직선 기하 도형으로 크래프트한 아이콘만.

## 상세 페이지 (5종)

### 1. 히어로 (면 분할 구성)
풀폭 화면(min-height 88vh)을 굵은 검정 선(8–12px)으로 직사각형 면 분할 — 큰 흰 면 1개(좌상, 화면의 약 55%)에 거대 Archivo Black 헤드라인(`clamp(2.4rem,5vw,4.6rem)` 대문자) + Archivo 본문 + 레드 직사각형 CTA 버튼. 우측에 세로로 긴 블루 색 면 1개 + 그 아래 작은 노랑 면 1개 + 작은 흰 면. 면 크기 비대칭. 사선·곡선 없음.
**해소된 그리드(필수):** 히어로 화면 전체가 검정 룰로 경계 지어진 면들로 빈틈없이 덮인다 — 큰 흰 면, 블루 세로 면, 노랑 면, 작은 흰 면이 검정 룰을 공유하며 맞물려 화면 100%를 채운다. 경계 없는 빈 영역·홀로 떠 있는 색 사각형 금지. 각 면은 사방(외곽 제외) 검정 룰로 닫힌다.

### 2. 기능 그리드
화면을 굵은 검정 선으로 3×2 불균등 직사각형 면으로 분할(각 트랙 fr 값 다르게). 6개 면 중 2개만 색 면(레드 1, 블루 1), 나머지 4개는 흰 면. 각 면 안에 Archivo Black 제목 + Archivo 본문. 색 면 위 텍스트는 흰색. 면 사이 굵은 검정 갭.

### 3. 콘텐츠 상세
화면을 좌우로 굵은 검정 선 분할 — 좌 큰 흰 면에 콘텐츠 텍스트(Archivo Black 제목 + 본문 2단), 우 좁은 세로 면을 다시 가로 검정 선으로 나눠 노랑 면 + 흰 면 + 블루 면 스택(구성 요소). 좌측 텍스트 면 안에 작은 레드 직사각형 강조 면 1개 임베드 — 이 레드 면도 텍스트 면 안에서 검정 룰로 경계 지어진 정당한 plane(텍스트 면의 한 모서리·구석에 맞물려 배치, 흰 공간에 둥둥 띄우지 말 것). 좌측 텍스트 면은 텍스트가 면을 충분히 채워 죽은 공백이 없어야 한다 — 본문 2단을 면 높이에 맞춰 배치.

### 4. 갤러리
화면을 굵은 검정 선으로 불균등 직사각형 면 분할 — 각 면이 이미지 또는 색 면. 이미지 면 5개(크기 제각각, radius 0) + 사이사이 색 면 3개(레드/옐로/블루 빈 면, 구성 균형용). 이미지 면 아래 작은 Archivo 700 대문자 캡션. 면 사이 굵은 검정 갭.

### 5. CTA·푸터
CTA: 화면 폭 가로 면 — 좌측 큰 블루 색 면에 흰 Archivo Black CTA 헤드라인, 우측 흰 면에 레드 직사각형 CTA 버튼. 굵은 검정 선 구분. 푸터: 화면 하단 가로 면을 굵은 검정 선으로 3–4개 세로 면으로 분할 — 각 면에 메뉴 컬럼(Archivo 700 대문자 헤더 + 링크). 한 면은 노랑 색 면. 최하단 굵은 검정 선 위 카피라이트.