시그널 모노크롬

# Signal Monochrome — web 디자인 팩

## 이 스타일의 정체성
순백과 순흑만으로 짜인 고대비 캔버스에, 단 하나의 채도 높은 시그널 컬러가 CTA와 하이라이트에만 점처럼 찍힌다. 빽빽한 산세리프 위계, 헤어라인 분할선, 작은 알약 태그로 정보 밀도를 끝까지 올리고, 호버하면 색이 반전되며 짧은 스냅 트랜지션으로 절제된 긴장감을 준다. 큰 숫자 통계 블록이 페이지에 리듬을 만든다. 회색 톤조차 거의 쓰지 않는 양극 대비가 정체성이다.

## 색
- 배경: 순백 `#ffffff`.
- 텍스트/면반전: 순흑 `#000000`. 본문도 순흑(대비 21:1).
- 보조 텍스트: `#5c5c5c` — 캡션·메타에만, 최소한으로.
- 시그널 컬러: 단 하나, 일렉트릭 코발트 `#1f4dff`. CTA 채움·링크·통계 숫자 강조·활성 점에만. 전체 화면 면적 5% 이하.
- 보더/룰: 1px `#000000`(헤어라인은 진짜 검정). 옅은 분할이 필요하면 `#e6e6e6`.
- 회색 그라디언트·중간톤 면 채움 금지 — 면은 순백 아니면 순흑.

## 타이포그래피
- 폰트: 디스플레이·본문 모두 `Inter`(Google Fonts), 대체 `system-ui, sans-serif`. 단일 패밀리, 굵기로 위계.
- H1: `clamp(2.4rem, 4.5vw, 4rem)`, weight 700, letter-spacing `-0.035em`, line-height 1.05.
- H2: `clamp(1.5rem, 2.4vw, 2.25rem)`, weight 600, letter-spacing `-0.02em`, line-height 1.15.
- 본문: `1rem`, weight 400, line-height 1.55, 측정 폭 58~66ch.
- 통계 숫자: `clamp(3rem, 6vw, 5.5rem)`, weight 700, letter-spacing `-0.04em`, 색 `#1f4dff` 또는 `#000000`. 등폭 숫자(`font-variant-numeric: tabular-nums`).
- 라벨/태그: `0.75rem`, weight 600, letter-spacing `0.06em`, 대문자.
- 메타/캡션: `0.8125rem`, weight 400, 색 `#5c5c5c`.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 1240px. 좌우 패딩 `clamp(20px, 4vw, 56px)`.
- 12열 그리드, gap 20px(빽빽하게). 섹션 수직 리듬은 dense — 섹션 간 `clamp(56px, 7vw, 96px)`.
- 비대칭 배치: 헤드라인 블록은 좌측 7열, 메타·태그는 우측 5열에 몰아 정렬.
- 통계 블록: 3~4개 큰 숫자를 1px 검정 룰로 칸막이한 가로 행. 데스크탑 4열, 720px 미만 2열.
- 브레이크포인트: 1024px / 720px / 460px.
- 헤더: 고정, 높이 60px, 배경 순백, 하단 1px `#000000` 룰. 좌측 워드마크, 우측 메뉴 + 코발트 채움 알약 CTA.

## 형태 / 질감
- 카드: radius 0. 보더 1px `#000000`. 그림자 없음. 카드 간 gap 없이 보더를 공유해 격자처럼 붙일 수도 있음.
- 태그/칩: radius 999px(알약), 보더 1px `#000000`, 패딩 5px 12px, 배경 투명. 활성 시 배경 `#000000` 텍스트 흰색.
- 1차 버튼: radius 999px, 배경 `#1f4dff`, 텍스트 `#ffffff`, 패딩 12px 22px. 보더 없음.
- 2차 버튼: radius 999px, 배경 투명, 보더 1px `#000000`, 텍스트 `#000000`.
- 분할선: 섹션 경계마다 1px `#000000` 풀폭 룰.
- 아이콘: 1.5px stroke 라인 아이콘, 단색 `#000000`. 채워진 글리프·다색 금지.

## 모션 (웹)
- 호버 색 반전(핵심): 2차 버튼·카드 호버 시 배경 `#000000` + 텍스트/아이콘 `#ffffff`로 즉시 반전. duration 120ms, easing `ease-out`.
- 1차 코발트 버튼 호버: 배경 `#000000`로 전환(코발트→검정), 120ms.
- 링크 호버: `#000000` 텍스트에 코발트 1px 밑줄 등장, 100ms.
- 스크롤 등장: 통계 숫자가 `opacity 0→1` + `translateY(8px→0)`, 220ms ease-out, 숫자마다 40ms 스태거. 카운트업은 선택.
- 페이지 전반의 모션은 짧고 스냅. 부드러운 페이드·이징 곡선의 출렁임 금지 — 120~220ms 직선적 ease-out.
- `prefers-reduced-motion: reduce`이면 등장·카운트업 제거, 호버 색 반전은 즉시 유지.

## 하지 말 것
- 보라/인디고 그라디언트 금지. 시그널은 코발트 단색 하나, 그라디언트 아님.
- 회색 면 채움·중간톤 그라디언트 금지 — 면은 순백 또는 순흑 양극만.
- 둥근 카드 모서리 금지(카드 radius 0). 알약은 태그·버튼에만.
- soft drop-shadow를 어디에도 쓰지 말 것 — 깊이는 1px 검정 보더와 색 반전으로만.
- 시그널 코발트를 넓은 면으로 칠하지 말 것. 5% 면적 상한 엄수.
- 그라디언트 텍스트·이모지 금지.
- 여백을 헐겁게 두지 말 것 — 이 팩은 dense다. 섹션 간격·grid gap을 명세된 좁은 값으로 유지한다.
- 부드러운 긴 이징 모션 금지 — 전환은 짧은 스냅이다.

## 적용 예
- **히어로:** 순백 배경. 좌측 7열에 대문자 라벨 + 순흑 H1 + 본문 2줄 + 코발트 1차 CTA와 보더 2차 CTA, 우측 5열에 알약 태그 4개를 그리드로. 헤더 아래 1px 검정 룰.
- **통계 섹션:** 풀폭 가로 행에 큰 숫자 4개, 각 칸을 1px 검정 룰로 칸막이. 숫자는 코발트, 라벨은 대문자 검정. tabular-nums 정렬.
- **카드:** radius 0, 1px 검정 보더 카드를 gap 없이 격자로 붙임. 제목 + 본문 2줄 + 알약 태그. 호버 시 카드 전체 흑백 반전.
- **푸터:** 순흑 면반전 블록. `#ffffff` 텍스트, 좌측 워드마크, 우측 다열 링크. 코발트는 링크 호버 밑줄에만.