Monospace Docs

# Monospace Docs — web 디자인 팩

## 이 스타일의 정체성
전면 모노스페이스 타이포로 짠 문서/레퍼런스 사이트. 라이트 모드 — 흰 배경, 검정 텍스트. 등폭 글자를 활용한 문자 셀 단위 정렬, 헤어라인 1px 보더로 그은 표와 코드 블록, 각진 모서리. 색도 그림자도 일러스트도 거의 없이, 오직 정보 밀도와 정렬의 정밀함만으로 성립한다. (web-dark-terminal과 달리 라이트·정적·문서 중심 — 네온 강조나 커서 깜빡임 없음.) "잘 짜인 API 문서" 같은 인상이 정답.

## 색
- 배경: `#ffffff` (순백)
- 표면(코드 블록·테이블 헤더): `#f6f6f4` (아주 옅은 그레이)
- 텍스트: `#171717` (본문·제목)
- 보조 텍스트(메타·주석): `#737373`
- 강조: `#1a56db` (차분한 블루) — 단 1개. 링크·활성 상태에만. glow 없음, 면적 4% 이하.
- 보더: `#e2e2df` (헤어라인 1px)
- 그라디언트 금지. 네온 금지.

## 타이포그래피
- 전체 폰트: `"IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace` (IBM Plex Mono는 Google Fonts 공개 웹폰트). 제목·본문·표·라벨 전부 모노스페이스.
- H1: `clamp(1.875rem, 3.5vw, 2.75rem)`, weight 600, letter-spacing `-0.01em`, line-height 1.2
- H2: `1.25rem`, weight 600 — 앞에 `#` 또는 `##` 마크다운 글리프(보조색)를 둘 수 있다
- 본문: `0.9375rem` (15px), weight 400, line-height 1.65
- 코드/인라인: `0.875rem`, weight 400, `#f6f6f4` 배경 패딩
- 라벨/메타: `0.8125rem`, weight 500, `#737373` — 종종 `// ` 주석 접두
- 등폭 정렬을 적극 활용 — 표·키밸류 목록을 글자 칸으로 줄 맞춤.

## 레이아웃 / 그리드
- 전체 폭 `1200px`. 좌측 고정 사이드바(`240px`, 목차/네비) + 우측 본문(`max-width 720px`) 2열 구조.
- 좌우 패딩 `24px`. 본문은 측정 폭 70~80자(모노라 약간 넓게 허용).
- 브레이크포인트: `<900px` 사이드바를 상단 접이식으로, 1열 스택
- 섹션 간격 `48px` (dense — 문서는 빽빽하게), 문단 간격 `1em`
- 모든 요소를 헤어라인 1px 보더 격자에 정렬. 좌측에 줄 번호 또는 앵커(`§`) 거터 허용.

## 형태 / 질감
- radius `0px` — 코드 블록·테이블·버튼 모두 직각. (또는 `2px` 극소값까지 허용)
- 그림자 전무. 깊이는 헤어라인 보더와 옅은 배경 그레이(`#f6f6f4`)로만.
- 보더: `1px solid #e2e2df`. 표는 모든 셀에 헤어라인, 코드 블록은 4면 헤어라인.
- 코드 블록: `#f6f6f4` 배경, 1px 보더, radius 0, 좌상단에 작은 언어 라벨.
- 테이블: 헤어라인 그리드, 헤더 행 `#f6f6f4` 배경, 등폭 정렬.
- 아이콘: 거의 없음. 필요시 텍스트 글리프(`→ ↳ § # ·`)로 대체.
- 이미지: 직각, 1px 헤어라인 보더, 캡션은 모노 메타 스타일.

## 모션
- 모션 없음(none). 트랜지션은 링크 색상 변화 정도(`80ms linear`)만 허용.
- 호버: 링크 `text-decoration: underline`, 사이드바 항목 배경 `#f6f6f4`. 이동·스케일·페이드 없음.
- 스크롤 애니메이션·등장 효과 없음. 커서 깜빡임 없음(터미널 팩과의 차별점).

## 하지 말 것
- 보라/인디고 그라디언트 금지 — 배경은 순백 단색.
- 산세리프·세리프 본문 금지 — 전면 모노스페이스.
- 둥근 모서리(radius > 2px) 금지. soft shadow·드롭섀도 금지 — 깊이는 헤어라인과 옅은 그레이로만.
- 네온 강조·glow·커서 깜빡임 금지(다크 터미널 팩과 혼동 차단 — 이 팩은 라이트·정적).
- 이모지 금지(텍스트 글리프로). 카드 그리드(둥근 카드 3개) 금지.
- 강조색을 2개 이상 쓰거나 면적 4%를 넘기지 말 것.
- 거대 디스플레이 타이포 금지 — 제목도 절제된 크기, 정보 위계는 보더와 들여쓰기로.

## 적용 예
- **헤더/네비**: 상단 고정, 흰 배경, 하단 1px 헤어라인. 로고는 모노 텍스트, 우측에 검색창(1px 보더, radius 0).
- **레이아웃**: 좌측 240px 사이드바(목차, 헤어라인 구분, 현재 항목 `#f6f6f4` 배경), 우측 720px 본문.
- **본문/코드**: 모노 H1 + 15px 모노 본문. 코드 블록은 `#f6f6f4` 배경·1px 보더·radius 0·언어 라벨. 키밸류 표는 헤어라인 그리드에 등폭 정렬.
- **푸터**: 색 반전 없음(흰 유지). 상단 1px 헤어라인, 모노 메타 텍스트, `// ` 주석 스타일 카피라이트.