Swiss Grid Minimal

# Swiss Grid Minimal — web 디자인 팩

## 이 스타일의 정체성
스위스 인터내셔널 타이포그래픽 스타일을 웹으로 옮긴 것. 흰 배경에 검정 텍스트, 엄격한 12열 모듈러 그리드, 좌측 정렬의 의도적 비대칭. 위계는 오직 글자 크기와 굵기로만 만든다 — 장식용 보더·그림자·아이콘·일러스트가 전혀 없고, 강조색은 단 하나(빨강)만 면적 3% 이하로 쓴다. "디자인을 한 흔적이 안 보이는데 정확하다"는 인상이 정답.

## 색
- 배경: `#ffffff` (페이지 전체, 단 하나의 배경색)
- 텍스트: `#111111` (본문·제목 공통)
- 보조 텍스트(메타·캡션): `#6b6b6b`
- 강조: `#e2231a` (빨강) — 단 1개. CTA 텍스트·활성 링크·섹션 번호에만, 화면 면적 합계 3% 이하.
- 헤어라인: `#111111` 1px (구분선에만)
- 그라디언트 금지. 색은 위 5개로 고정.

## 타이포그래피
- 전체 폰트: `Helvetica Neue, Inter, Arial, sans-serif` (Inter는 Google Fonts 공개 웹폰트로 로드)
- H1: `clamp(2.75rem, 6vw, 5rem)`, weight 700, letter-spacing `-0.02em`, line-height 1.05
- H2: `1.875rem`, weight 700, letter-spacing `-0.01em`, line-height 1.15
- 본문: `1.0625rem` (17px), weight 400, line-height 1.55, 측정 폭 60~72자
- 메타/캡션: `0.8125rem`, weight 500, letter-spacing `0.04em`, 대문자(`text-transform: uppercase`)
- 모든 텍스트 좌측 정렬. 중앙 정렬·양끝 맞춤(justify) 금지.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1200px`, 좌우 패딩 `24px`
- 12열 그리드, 거터 `24px`. 모든 요소는 열 경계에 스냅 — 임의 폭 금지.
- 브레이크포인트: `<768px` 1열 스택, `768~1024px` 6열, `>1024px` 12열
- 섹션 수직 간격 `120px`. 섹션 내 블록 간격 `32px`.
- 비대칭 배치: 히어로 제목은 1~7열, 본문 단락은 8~12열에 두는 식으로 좌우 비대칭을 의도한다. 모든 것을 중앙에 모으지 않는다.
- 8px 베이스 스페이싱 스케일(8/16/24/32/48/64/96/120).

## 형태 / 질감
- radius `0px` — 모든 요소 직각.
- 그림자 전무. `box-shadow` 사용 금지.
- 카드 개념 없음. 콘텐츠는 그리드 정렬과 헤어라인으로만 구분.
- 구분선: `1px solid #111111`. 섹션 상단 또는 콘텐츠 그룹 사이에만.
- 이미지: 직각, 보더 없음, 흑백 또는 무채 처리 권장. 그리드 열 폭에 정확히 맞춘다.

## 모션
- 모션 거의 없음. 호버 시 링크는 `text-decoration: underline`만, 0ms.
- 페이지 전환·스크롤 애니메이션 없음.
- 허용되는 유일한 트랜지션: 링크 색상 `100ms linear` (검정→빨강).

## 하지 말 것
- 보라/인디고 그라디언트 절대 금지 — 배경은 순백 단색.
- 둥근 모서리(radius > 0) 금지. soft shadow·드롭섀도 금지.
- 이모지 금지. 장식 아이콘 금지(기능 아이콘도 최소화).
- 중앙 정렬 히어로 금지 — 제목은 좌측 정렬·비대칭 배치.
- 그라디언트 텍스트·glow·blob 도형 금지.
- 카드 그리드(둥근 카드 3개 반복) 금지 — 구분은 헤어라인과 그리드로만.
- 강조색을 2개 이상 쓰거나 면적 3%를 넘기지 말 것.

## 적용 예
- **히어로**: 좌측 1~7열에 H1 한 줄(`clamp` 대형), 그 아래 8~12열에 17px 본문 2~3문장. 배경 순백, 이미지 없음. 상단에 가는 헤어라인 1줄.
- **카드/콘텐츠 블록**: 12열을 3분할(각 4열)한 텍스트 블록. 보더·배경 없이 각 블록 상단에 빨강 섹션 번호(`01`)와 1px 헤어라인. 호버 효과 없음.
- **푸터**: 색 반전 없음(흰 배경 유지). 상단 1px 헤어라인, 좌측 정렬 메타 텍스트(대문자 13px 회색), 12열에 분산 배치.