블루프린트 그리드

# 블루프린트 그리드 — web 디자인 팩

## 이 스타일의 정체성
페이지 전면에 1px 헤어라인 도트 또는 라인 그리드가 청사진처럼 깔리고, 모든 콘텐츠 블록이 그 격자선에 정확히 스냅된다. 그리드 텍스처 자체가 주인공 — 숨기지 않고 의도적으로 노출한다. 등폭 영향을 받은 산세리프로 라벨·코드·캡션을 통일하고, 색은 흑·백 양극과 단 하나의 시그널 컬러만. 섹션 경계는 그림자가 아니라 1px 분할선과 모서리 십자(+) 마커로 표현된다. 라이트 모드와 잉크 블랙 모드를 모두 지원하되 한 페이지는 한 모드를 고수한다.

## 색
**라이트 모드 (기본)**
- 배경: `#fafafa`
- 표면(카드): `#ffffff`
- 텍스트: `#0a0a0a` / 보조 `#6b6b6b`
- 그리드선·보더: `#e6e6e6` (1px 헤어라인)
- 십자(+) 마커: `#c2c2c2`

**잉크 블랙 모드 (대체)**
- 배경: `#0a0a0a` / 표면 `#131313`
- 텍스트: `#fafafa` / 보조 `#8a8a8a`
- 그리드선·보더: `#262626`

**시그널 컬러 (양 모드 공통, 1개)**: `#e5484d` (시그널 레드) — CTA·활성 노드·강조 마커에만, 면적 5% 이하. 브랜드 고유색이 아닌 팩 지정값.
- 그라디언트 금지. 색은 항상 솔리드. 흑·백·그레이 스케일 + 시그널 레드 외 색 없음.

## 타이포그래피
- 디스플레이/헤딩: `IBM Plex Sans, Inter, sans-serif` (Google Fonts 공개) — 등폭 산세 인상을 위해 좁은 트래킹 사용
- 라벨/코드/캡션: `JetBrains Mono, IBM Plex Mono, ui-monospace, monospace` (Google Fonts)
- 본문: `IBM Plex Sans, Inter, sans-serif`
- H1: `clamp(2.4rem, 5vw, 4.2rem)`, weight 600, letter-spacing `-0.02em`, line-height 1.08
- H2: `clamp(1.6rem, 2.8vw, 2.3rem)`, weight 600, line-height 1.15
- 본문: `1rem`, weight 400, line-height 1.6
- 라벨/eyebrow: `JetBrains Mono`, `0.75rem`, weight 500, letter-spacing `0.04em`, 대문자, 종종 `// 라벨` 또는 `[01]` 형식의 등폭 접두 기호를 붙인다
- 좌표·치수 캡션은 등폭으로 `x: 240 / y: 88`처럼 적어 청사진 느낌을 강화한다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1200px`, 좌우 패딩 `0` (그리드선이 가장자리까지 닿게)
- 베이스 그리드: `24px` 셀의 도트 또는 라인 그리드를 배경에 반복(`background-image`로 구현). 모든 콘텐츠는 `24px` 배수에 스냅.
- 콘텐츠 12열 그리드, 컬럼 거터 `24px`
- 브레이크포인트: `<768px` 1열 / `768–1024px` 6열 / `>1024px` 12열
- 섹션 수직 간격 `96px`, 블록 간격 `24px` (balanced)
- 섹션·카드의 네 모서리에 십자(+) 마커를 둔다 — 12px 크기, 보더 색. 카드는 그리드선 교차점에 모서리를 맞춘다.

## 형태 / 질감
- radius `0px` — 모든 요소 직각. 청사진은 둥글지 않는다.
- 보더: `1px solid` 그리드선 색. 강조 블록도 1px 유지(굵게 하지 않음).
- 그림자: 없음. 분리는 1px 선과 십자 마커로만.
- 카드: 배경 표면색, 1px 보더, radius 0, 네 모서리 + 마커. 호버 시 보더가 시그널 레드로.
- 이미지·다이어그램: 1px 보더, 직각. 코드는 등폭, 라인 넘버를 좌측에 등폭으로.
- 버튼: 직각, 1px 보더, 등폭 라벨. 1차 CTA만 시그널 레드 배경.

## 모션
- subtle. 트랜지션 `160ms ease-out`.
- 호버: 보더 색 `그리드선색 → #e5484d` 전환, 모서리 십자 마커도 레드로. transform 없음.
- 스크롤 진입: 그리드선이 먼저 그려지고(`opacity 0→1`, 200ms) 콘텐츠가 뒤이어 페이드(120ms 지연).
- `prefers-reduced-motion: reduce` 시 모든 전환을 즉시 표시.

## 하지 말 것
- 배경 그리드를 숨기지 말 것 — 그리드선 노출이 정체성. 그리드를 지우면 평범한 스위스 미니멀이 된다.
- 둥근 모서리 금지(radius 0 고정). 그림자 금지 — 분리는 1px 선과 십자 마커.
- 그라디언트 금지. 시그널 레드 외 유채색 금지. 보라/인디고 금지.
- 보더를 굵게(2px+) 하지 말 것 — 청사진 헤어라인은 항상 1px.
- 이모지·blob 도형·둥근 일러스트 금지. 라벨에 등폭 폰트 대신 일반 산세 쓰지 말 것.
- 콘텐츠를 그리드선 사이 임의 위치에 두지 말 것 — 모든 요소는 24px 배수에 스냅.
- 시그널 레드를 넓은 면에 칠하지 말 것 — 점·선·1차 CTA에만.

## 적용 예
- **히어로**: 도트 그리드 배경 위, 좌상단 그리드 교차점에 모서리를 맞춘 H1. 위에 `// INTRO` 등폭 eyebrow. 우측에 1px 보더 + 십자 마커 4개를 단 다이어그램/스크린샷 패널. 하단 CTA는 시그널 레드 직각 버튼.
- **카드 섹션**: 12열 그리드에 카드를 정확히 스냅, 카드 사이 거터에 그리드선이 보이게. 각 카드 네 모서리에 십자 마커, 좌상단에 `[01]` 등폭 인덱스.
- **푸터**: 그리드선 유지, 색 반전하지 않음. 등폭 폰트로 링크를 좌표 라벨처럼 정렬, 최하단에 1px 분할선과 십자 마커로 경계.