Neo-Brutalism

# Neo-Brutalism — web 디자인 팩

## 이 스타일의 정체성
거친 검정 하드 보더, 오프셋 하드 섀도, 직각 모서리. 원색 블록을 채도 그대로 충돌시키고 굵은 디스플레이 폰트로 외친다. 그림자가 흐릿하게 번지지 않고 칼처럼 또렷한 검정 덩어리로 떨어진다 — 모든 카드·버튼이 종이를 겹쳐 올린 듯 보인다. "거칠고 시끄럽고 일부러 못생긴" 반(反)미니멀 미감.

## 색
- 배경: `#fefef0` (약간 노란기 도는 오프화이트)
- 표면(카드): `#ffffff`, 그리고 강조 블록은 원색 그대로
- 텍스트: `#0a0a0a`
- 보더 색: `#0a0a0a` (항상 검정)
- 강조 원색 4개(블록·버튼·배지에 면적 크게 사용): `#ff5a36`(오렌지레드) · `#ffd400`(옐로) · `#2d6cdf`(블루) · `#1ec48f`(그린)
- 색은 흐리거나 톤다운하지 않는다 — 채도 100%에 가깝게 충돌시킨다. 그라디언트·투명도 금지.

## 타이포그래피
- 디스플레이: `Archivo Black, Arial Black, sans-serif` (Archivo Black은 Google Fonts 공개 웹폰트)
- 본문: `Space Grotesk, Inter, sans-serif` (Space Grotesk도 Google Fonts)
- H1: `clamp(3rem, 8vw, 6.5rem)`, weight 900, letter-spacing `-0.03em`, line-height 0.95, 종종 대문자
- H2: `clamp(1.75rem, 3.5vw, 2.75rem)`, weight 900, line-height 1.0
- 본문: `1.0625rem`, weight 500, line-height 1.5
- 라벨/배지: `0.875rem`, weight 700, 대문자, letter-spacing `0.02em`
- 텍스트를 일부러 비대칭·회전(±2deg) 배치해도 좋다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1160px`, 좌우 패딩 `20px`
- 비대칭 배치 — 요소를 의도적으로 어긋나게 둔다. 정렬된 균형을 피한다.
- 브레이크포인트: `<768px` 1열, `>768px` 다중 블록
- 섹션 간격 `80px`, 블록 간격 `28px` (dense — 여백을 아낀다)
- 블록들이 서로 살짝 겹치거나(`margin` 음수) 어긋나게 배치.

## 형태 / 질감
- radius `0px` — 모든 요소 직각.
- 보더: `3px solid #0a0a0a` (강조 요소는 `4px`)
- 그림자: `box-shadow: 6px 6px 0 #0a0a0a` — 블러 0, 100% 불투명, 항상 검정 하드 섀도. soft shadow 절대 금지.
- 버튼: 직각, 3px 검정 보더, 6px 하드 섀도, 원색 배경.
- 이미지: 직각, 3px 검정 보더. 필요시 듀오톤·하이콘트라스트 처리.

## 모션
- snappy. 트랜지션 `120ms steps(2)` 또는 `120ms cubic-bezier(0.2,0,0,1)`.
- 호버 시 요소를 `translate(-3px, -3px)`로 이동하고 그림자를 `9px 9px 0`으로 키운다(눌리기 전 들림).
- 클릭(active) 시 `translate(3px, 3px)` + 그림자 `0px 0px 0`으로 — 종이가 눌린 느낌.
- 부드러운 페이드·이징 금지. 동작은 딱딱 끊긴다.

## 하지 말 것
- 보라/인디고 그라디언트 금지. 어떤 그라디언트도 금지 — 색은 솔리드 원색.
- 둥근 모서리 금지(radius 0 고정). 흐릿한 soft/드롭 섀도 금지 — 그림자는 항상 블러 0의 검정 하드 섀도.
- 이모지 금지. 정체불명 일러스트·blob 도형 금지.
- 중앙 정렬로 모든 것을 가지런히 두지 말 것 — 비대칭과 어긋남이 정체성.
- 파스텔·톤다운 색 금지. 채도를 낮추지 말 것.
- glow·반투명 유리 효과 금지.

## 적용 예
- **히어로**: 오프화이트 배경에 거대 H1(900 weight, 대문자, ±1.5deg 회전 가능)을 좌측에 꽉 채우고, 우측에 원색 블록 하나를 3px 보더+6px 하드 섀도로 어긋나게 겹친다. CTA 버튼은 옐로 배경·검정 보더.
- **카드**: 흰색 또는 원색 배경, `3px solid #0a0a0a`, `box-shadow 6px 6px 0 #0a0a0a`, radius 0. 호버 시 위로 들리며 그림자 확대. 카드마다 다른 원색을 써서 충돌시킨다.
- **푸터**: 검정 배경(`#0a0a0a`)으로 색 반전, 텍스트는 오프화이트, 링크는 옐로. 상단에 4px 검정선 대신 굵은 원색 띠 배치.