# DESIGN.md — 가상 인사총무 ERP 디자인 기준

> 🎓 교육용 가상 앱 `인사총무ERP_교육용가상자료.html` 의 **겉모습 기준**입니다.
> **기능·데이터 규칙은 `PRD.md`가 정본입니다.** 이 문서는 색·글꼴·여백·버튼만 다루며,
> PRD의 계산 규칙·동작 규칙·확인 기준을 바꾸지 않습니다.

| | |
|---|---|
| 작성일 | 2026-09-14 |
| **주 출처** | **https://getdesign.md/cal/design-md** (Cal.com 기준 디자인 사양) — 이 문서의 뼈대 |
| **보조 출처** | **https://getdesign.md/bugatti/design-md** (Bugatti 기준 사양) — §12의 3가지만 선별 차용 |
| 원본 취득 | `npx getdesign@latest add cal` — 542줄 사양 문서 |
| 적용 대상 | `인사총무ERP_교육용가상자료.html` (단일 HTML, 외부 리소스 없음) |

---

## 0. 원본을 그대로 쓸 수 없는 이유 (먼저 읽어주세요)

출처 문서는 **Cal.com 마케팅 홈페이지**의 사양입니다. 우리 앱은 **표와 숫자가 빽빽한 사내 업무 도구**입니다.
성격이 달라 그대로 옮기면 오히려 못 쓰게 됩니다. 무엇을 **가져왔고**, 무엇을 **바꿨는지** 먼저 밝힙니다.

### ✅ 그대로 가져온 것

| 항목 | 원본 규칙 |
|---|---|
| **4px 기반 여백 스케일** | 모든 간격을 4의 배수로 |
| **모서리 위계** | 버튼·입력 8px < 카드 12px < 알약 9999px |
| **액션은 무채색** | 강조색(파랑·파스텔)을 주요 버튼에 쓰지 않는다 |
| **surface 3단 구조** | canvas → surface-card → hairline |
| **버튼 종류 4개** | primary / secondary / icon / text-link |
| **한 화면에 주요 동작 하나** | 시선이 갈라지지 않게 |
| **hover보다 pressed 우선** | 눌린 상태를 명확히 |
| **그리드는 줄이되 축소하지 않는다** | 좁아지면 열 수를 줄이지, 카드를 찌그러뜨리지 않는다 |

### 🔧 우리 앱에 맞춰 바꾼 것

| 항목 | 원본 (Cal.com) | 우리 앱 | 바꾼 이유 |
|---|---|---|---|
| **글꼴** | Cal Sans + Inter | **시스템 글꼴** (Pretendard → 맑은 고딕 → system-ui) | Cal Sans는 **유료 전용 글꼴**이고, Inter도 외부 CDN이 필요함. PRD §7이 **외부 리소스 금지**(더블클릭 실행 보장) |
| **본문 크기** | 16px | **14px** | 표가 많은 업무 화면. 16px면 한 화면에 들어가는 행이 크게 줄어듦 |
| **섹션 여백** | 96px | **24px** | 96px은 마케팅 페이지용 리듬. 업무 도구에서는 스크롤만 늘어남 |
| **카드 안쪽 여백** | 32px | **18px** | 위와 같은 이유 |
| **주요 버튼 색** | 검정 #111111 | **파랑 `--series-1`** | 이 파랑은 **차트 막대 색과 같은 색**이며, 색각이상·명암비 검사를 통과한 값임 (§3 참고). 바꾸려면 §9 참고 |
| **상태 색** | #10b981 / #f59e0b / #ef4444 | **#0ca30c / #fab219 / #d03b3b** | 우리 배경색 기준으로 명암비를 실제 측정해 통과한 값 |
| **다크 모드** | 없음 (푸터만 어두움) | **전면 지원** | 사내 도구는 야간·어두운 사무실에서도 쓰임. 원본에 없어 **우리가 추가**한 부분 |
| **hover 상태** | "문서화하지 말 것" | **표 행·버튼에 사용** | 표가 빽빽해서 "지금 어느 줄을 보고 있는지" 표시가 실제로 필요함 |
| **어두운 카드** | 푸터·강조 요금제만 | **사용 안 함** | 우리 앱엔 푸터가 없음 |
| **아바타·평점·요금제 카드** | 있음 | **없음** | 마케팅 전용 컴포넌트 |

> 원본의 **"Known Gaps"** 에도 적혀 있듯, Cal Sans는 공개 웹폰트가 아니며
> 대체안으로 **Inter 600 + letter-spacing -0.04em** 을 권합니다.
> 우리는 외부 폰트를 못 쓰므로 **시스템 글꼴 + 음수 자간**으로 그 느낌만 흉내 냅니다.

---

## 1. 색 (Colors)

CSS 사용자 정의 속성으로 선언하고, **코드 어디에서도 hex를 직접 쓰지 않습니다.**
(원본 Iteration Guide 3번 — *"Use token refs everywhere — never inline hex"*)

### 1-1. 라이트 모드

| 토큰 | 값 | 쓰임 |
|---|---|---|
| `--bg` | `#f5f5f2` | 페이지 바닥 |
| `--surface` | `#fcfcfb` | 카드·타일·헤더·표 배경 |
| `--surface-2` | `#f0efec` | 표 머리글, 보조 버튼 배경, 합계 행 |
| `--border` | `#e3e2dd` | 1px 실선 테두리 (원본 `hairline`) |
| `--grid` | `#ebeae6` | 차트 격자선 (더 연함) |
| `--text-1` | `#0b0b0b` | 제목·본문 (원본 `ink`) |
| `--text-2` | `#52514e` | 보조 설명 (원본 `body`) |
| `--text-3` | `#85847e` | 각주·축 라벨 (원본 `muted`) |
| `--series-1` | `#2a78d6` | **차트 막대 + 주요 버튼** |
| `--series-soft` | `#cde2fb` | 선택된 메뉴·선택된 표 행 |

### 1-2. 다크 모드 (원본에 없는 우리 추가분)

**자동 뒤집기가 아니라, 어두운 배경 기준으로 따로 고른 값입니다.**

| 토큰 | 값 |
|---|---|
| `--bg` | `#121211` |
| `--surface` | `#1a1a19` |
| `--surface-2` | `#232320` |
| `--border` | `#33332f` |
| `--grid` | `#2a2a27` |
| `--text-1` | `#ffffff` |
| `--text-2` | `#c3c2b7` |
| `--text-3` | `#8f8e85` |
| `--series-1` | `#3987e5` |
| `--series-soft` | `#1c3a5e` |

선언 순서는 이렇게 합니다.

```css
:root { /* 라이트 값 전부 */ }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { /* 다크 값만 덮어쓰기 */ }
}
```

> ⚠️ **어떤 색도 다크 블록 안에서만 정의하지 않습니다.** 라이트에서 먼저 다 정의한 뒤 덮어씁니다.

### 1-3. 상태 색 (Semantic) — 시리즈 색과 절대 섞지 않음

| 상태 | 글자색 | 배경색 | 쓰임 |
|---|---|---|---|
| 승인 / 충분 | `--good-ink` `#0a6b0a` | `--good-bg` `#e7f6e7` | ✔ 승인, ✔ 재고 충분 |
| 대기 / 부족 | `--warn-ink` `#7a5600` | `--warn-bg` `#fdf3dd` | ⏳ 대기, ⚠️ 안전재고 미달 |
| 반려 / 차단 | `--crit-ink` `#9c2020` | `--crit-bg` `#fbe8e8` | ✕ 반려, ⛔ 신청 차단 경고 |

**규칙 3가지**
1. 상태 색은 **상태에만** 씁니다. "네 번째 차트 색"으로 재사용하지 않습니다.
2. **색만으로 뜻을 전하지 않습니다.** 반드시 **아이콘 + 글자**를 함께 둡니다 (`✔ 승인`, `⚠️ 부족`).
3. 배지는 **연한 배경 + 진한 글자** 조합만 씁니다. 진한 배경에 흰 글자는 쓰지 않습니다.

### 1-4. 교육용 배너 색 (우리 앱 고유)

| 토큰 | 라이트 | 다크 |
|---|---|---|
| `--banner-bg` | `#fff3d1` | `#3a2f10` |
| `--banner-ink` | `#6b4e00` | `#f0d99a` |
| `--banner-bd` | `#e8d08a` | `#5c4a1a` |

이 노란 띠는 **"교육용 가상 자료"를 알리는 전용 색**입니다. 다른 용도로 쓰지 않습니다.

### 1-5. 차트 색

| 상황 | 규칙 |
|---|---|
| 값 하나짜리 막대그래프 | **`--series-1` 한 색**으로 모든 막대. 범례 없음 (제목이 곧 시리즈명) |
| 부서·월 같은 분류 축 | **색을 나누지 않습니다.** 분류는 x축이 담당 |
| 격자선 | `--grid`, 1px 실선. 점선 금지 |
| 축 글자 | `--text-3`. **막대 색을 글자에 쓰지 않습니다** |

> `--series-1`은 라이트·다크 양쪽에서 **명도 대역·채도·배경 대비 검사를 통과**한 값입니다.
> 임의로 바꾸면 검사를 다시 해야 합니다.

---

## 2. 글꼴 (Typography)

### 2-1. 글꼴 가족

```css
font-family: "Pretendard", "Malgun Gothic", "맑은 고딕",
             -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
```

- **외부 폰트를 불러오지 않습니다.** 원본의 Cal Sans·Inter는 둘 다 외부 리소스가 필요해
  PRD §7(외부 CDN 금지)과 충돌합니다.
- 한글이 주 언어이므로 **Pretendard → 맑은 고딕** 순으로 우선합니다.
- 원본의 "표시용 / 본문용 글꼴 분리"는 **굵기와 자간으로 대신**합니다.

### 2-2. 크기 위계

| 이름 | 크기 | 굵기 | 자간 | 쓰임 |
|---|---|---|---|---|
| `hero` | **48px** | 700 | -0.03em | 화면당 **딱 하나**인 대표 숫자 (예: 처리할 신청 11건) |
| `stat` | 26px | 700 | -0.03em | 나머지 KPI 타일 숫자 |
| `page-title` | 20px | 700 | -0.02em | 화면 제목 (🏠 홈 — 인사총무 담당자 현황) |
| `brand` | 17px | 700 | -0.02em | 왼쪽 위 앱 이름 |
| `card-title` | 14.5px | 700 | -0.01em | 카드 제목 |
| `body` | **14px** | 400 | 0 | 기본 본문·메뉴 |
| `table` | 13px | 400 | 0 | 표 내용 |
| `mono` | 13px | 400 | 0.02em | **사번·신청번호·날짜·금액** — 고정폭 글꼴 (§12-② 참고) |
| `button` | 13px | 600 | 0 | 버튼 글자 |
| `label` | 12px | 600 | 0 | 입력 라벨, 타일 설명 |
| `th` | 11.5px | 600 | 0 | 표 머리글 |
| `badge` | 11.5px | 600 | 0 | 상태 배지 |
| `footnote` | 11px | 400 | 0 | 표 아래 교육용 각주 |
| 줄간격 | **1.55** | | | 본문 기본 |

### 2-3. 원칙

- **숫자가 클수록 자간을 좁힙니다** (원본의 negative letter-spacing 규칙). 26px 이상은 `-0.03em`.
- **굵기는 400 / 600 / 700 세 가지만** 씁니다. 500·800은 쓰지 않습니다.
- **강조는 굵기보다 크기로** 합니다 (Cal Iteration Guide 7번 + Bugatti 원칙, §12-①).
  > Bugatti 사양은 *"굵기 700은 어디에도 쓰지 않는다. 강조는 크기·자간·대소문자·글꼴 대비로 만든다"* 고 합니다.
  > 우리는 한글이라 대소문자 대비를 못 쓰므로 **크기와 자간**으로 대신합니다.
  > **굵게 하기 전에 먼저 키울 수 있는지 봅니다.**
- 표의 숫자 칸은 `font-variant-numeric: tabular-nums`로 **자릿수를 맞춥니다.**
- **글자에 데이터 색을 입히지 않습니다.** 색은 막대·배지가 갖고, 글자는 텍스트 색만 씁니다.

---

## 3. 여백 (Spacing)

**기본 단위 4px.** 원본과 같지만, 큰 값들을 업무 화면 밀도에 맞게 낮췄습니다.

| 토큰 | 값 | 쓰임 | 원본 값 |
|---|---|---|---|
| `xxs` | 4px | 배지 안쪽, 아이콘 간격 | 4px ✅ |
| `xs` | 8px | 표 칸 위아래 | 8px ✅ |
| `sm` | 12px | 입력칸 안쪽, 폼 항목 간격 | 12px ✅ |
| `md` | 16px | 타일 안쪽 | 16px ✅ |
| `lg` | 18px | **카드 안쪽** | 24px → 18px 🔧 |
| `xl` | 24px | 본문 좌우 여백 | 32px → 24px 🔧 |
| `section` | **24px** | 카드와 카드 사이 세로 리듬 | 96px → 24px 🔧 |
| 그리드 간격 | 14px | 카드·타일 사이 | 24px → 14px 🔧 |

### 실제 적용값

| 요소 | 여백 |
|---|---|
| 본문 영역 | `22px 24px 60px` |
| 카드 | `18px` |
| KPI 타일 | `16px 18px` |
| 표 칸 | `8px 10px` |
| 버튼 | `7px 13px` (작은 버튼 `4px 10px`) |
| 입력칸 | `8px 10px` |
| 배지 | `2px 8px` |
| 왼쪽 메뉴 | `16px 12px`, 항목 `10px 12px` |

> **여백 철학**: 원본은 "넉넉하되 과하지 않게(96px)"였지만, 우리는 **"한 화면에 표가 보이게"** 입니다.
> 다만 **밀도를 높이느라 4px 배수를 깨지 않습니다.**

---

## 4. 모서리 (Border Radius)

원본의 위계를 **그대로** 따릅니다.

| 토큰 | 값 | 쓰임 | 현재 앱 |
|---|---|---|---|
| `sm` | 6px | 작은 버튼 | 6px ✅ |
| `md` | **8px** | 버튼·입력칸·경고박스·메뉴 항목 | 7~8px ⚠️ **8px로 통일 필요** |
| `lg` | **12px** | 카드·KPI 타일 | 12px ✅ |
| `pill` | 9999px | 상태 배지 | 999px ✅ |

- **16px를 넘지 않습니다.** 원본 규칙 — 더 둥글면 "업무 도구"가 아니라 "소비자 앱"으로 읽힙니다.
- 표 머리글 양끝만 7px로 둥글립니다.

---

## 5. 버튼 (Buttons)

### 5-1. 종류 4가지

| 이름 | 배경 | 글자 | 테두리 | 쓰임 |
|---|---|---|---|---|
| **primary** | `--series-1` | 흰색 | 없음 | 화면당 **하나뿐인 주요 동작** — 신청하기, 시점 전환 |
| **secondary** | `--surface-2` | `--text-1` | 1px `--border` | 보조 동작 |
| **ghost** | 투명 | `--text-2` | 1px `--border` | 데이터 초기화, 취소, 닫기 |
| **status (ok / no)** | `--good-bg` / `--crit-bg` | `--good-ink` / `--crit-ink` | 없음 | **승인 / 반려** — 결과가 확 갈리는 한 쌍 |

### 5-2. 공통 규격

| 속성 | 값 |
|---|---|
| 글자 | 13px / 600 |
| 안쪽 여백 | `7px 13px` (작은 버튼 `4px 10px` / 12px) |
| 모서리 | 8px (작은 버튼 6px) |
| 최소 높이 | **32px** (작은 버튼 24px) |

### 5-3. 상태

| 상태 | 처리 |
|---|---|
| 기본 | 위 표대로 |
| hover | 테두리가 `--text-3`으로 진해짐 / primary는 살짝 밝아짐 |
| **disabled** | `opacity: .42` + `cursor: not-allowed` + **필터 없음** |
| disabled 이유 | **반드시 `title` 속성으로 이유를 적습니다** — "잔여연차를 초과합니다" |

> ⚠️ **disabled 버튼에 이유를 안 적는 것은 금지입니다.** 수강생이 "왜 안 눌리지?"에서 막힙니다.
> 이건 PRD §6-1의 차단 규칙을 **화면에서 설명하는 장치**입니다.

### 5-4. 배치 규칙

- **승인 / 반려는 항상 이 순서로, 나란히** 둡니다. 위치가 섞이면 오조작이 납니다.
- 주요 버튼은 **화면당 하나**. 여러 개면 하나만 primary, 나머지는 secondary·ghost.
- 표 안의 버튼은 전부 **작은 버튼(btn-sm)** 으로 통일합니다.

---

## 6. 그 외 구성요소

### 6-1. 교육용 배너 (우리 앱 고유 · 필수)

```
position: sticky; top: 0; z-index: 50;
배경 --banner-bg / 글자 --banner-ink / 아래 1px --banner-bd
padding 7px 16px · 12.5px · 600 · 가운데 정렬
```

- **스크롤해도 항상 보입니다.** PRD §8의 4곳 표시 중 하나이므로 **지우거나 숨기면 안 됩니다.**

### 6-2. 카드

`--surface` 배경 + 1px `--border` + 12px 모서리 + 18px 안쪽 여백.
구조는 **제목(14.5px/700) → 설명(12px/`--text-3`) → 내용 → 각주** 순서를 지킵니다.

### 6-3. KPI 타일

- 구조: **라벨(12px) → 값(26px/700) → 보조설명(11.5px)**
- **대표 숫자(hero)는 화면당 하나**, 48px. 여러 개면 위계가 사라집니다.
- 경고 상태 타일은 테두리를 `--warn`으로 바꾸고 값 색을 `--warn-ink`로 합니다.

### 6-4. 표

| 항목 | 규칙 |
|---|---|
| 머리글 | `--surface-2` 배경, 11.5px/600, `--text-3` |
| 칸 여백 | `8px 10px`, 아래쪽만 1px `--border` |
| 숫자 칸 | 오른쪽 정렬 + `tabular-nums` |
| 행 hover | `--surface-2` |
| 선택된 행 | `--series-soft` |
| 값이 없음 | **`—` (빈칸을 임의로 채우지 않음, PRD §6-4)** |
| 가로 넘침 | **표를 감싼 상자만 가로 스크롤**. 페이지 전체는 절대 가로 스크롤 금지 |
| 각주 | 모든 데이터 표 아래 교육용 각주 **필수** (PRD §8) |

### 6-5. 배지

알약 모양(9999px) + `2px 8px` + 11.5px/600 + **아이콘 + 글자**.
`✔ 승인` · `⏳ 대기` · `✕ 반려` · `⚠️ 부족`

### 6-6. 입력칸

`--bg` 배경 + 1px `--border` + 8px 모서리 + `8px 10px` + 13px.
포커스는 **`outline: 2px solid --series-1; outline-offset: -1px`** — 테두리 대신 외곽선을 씁니다(레이아웃이 안 흔들림).

### 6-7. 왼쪽 메뉴

186px 고정 폭. 항목은 `10px 12px` + 8px 모서리.
선택된 항목만 `--series-soft` 배경.

### 6-8. 안내 박스 (alertbox)

| 종류 | 배경 / 글자 |
|---|---|
| 오류·차단 | `--crit-bg` / `--crit-ink` |
| 성공 | `--good-bg` / `--good-ink` |
| 정보 | `--surface-2` / `--text-2` |

`10px 13px` + 8px 모서리 + 12.5px. **아이콘(⚠️ ✅ ↩️ 🗑️)을 문장 앞에 반드시** 둡니다.

---

## 7. 반응형

| 구간 | 처리 |
|---|---|
| **> 760px** | 왼쪽 세로 메뉴 186px + 본문 |
| **≤ 760px** | 메뉴가 **가로 스크롤 줄**로 바뀜, 본문 여백 `16px 14px`로 축소 |
| 카드 그리드 | 최소 폭 **330px** 아래로는 열 수를 줄임 |
| 타일 그리드 | 최소 폭 **158px** |

- **열 수를 줄이지, 카드를 찌그러뜨리지 않습니다** (원본 규칙).
- 차트는 `viewBox` + `width:100%`로 비율을 유지합니다.
- **페이지 전체 가로 스크롤은 어떤 폭에서도 생기면 안 됩니다.** (420px에서 확인 완료)

---

## 8. 하지 말 것

| 금지 | 이유 |
|---|---|
| 외부 글꼴·CDN·라이브러리 불러오기 | 더블클릭 실행이 깨짐 (PRD §7) |
| 코드에 hex 색 직접 쓰기 | 다크 모드가 깨짐. 반드시 토큰 사용 |
| 상태 색을 차트 색으로 재사용 | 상태와 데이터가 구분되지 않음 |
| 색만으로 뜻 전달 | 색각이상 사용자가 못 읽음. 아이콘+글자 필수 |
| 굵기 800·글꼴 크기 임의 추가 | 위계가 무너짐 |
| 카드 모서리 16px 초과 | 업무 도구가 아니라 소비자 앱처럼 보임 |
| 교육용 배너 숨기기·색 바꾸기 | PRD §8 필수 표시 |
| disabled 버튼에 이유 안 적기 | 수강생이 막힘 |
| 한 화면에 48px 대표 숫자 2개 이상 | 강조가 사라짐 |
| 그림자 남발 | 이 시스템은 **테두리와 배경색**으로 층을 나눔 |

---

## 9. 지금 앱과 다른 점

| # | 항목 | 상태 |
|---|---|---|
| 1 | 버튼·입력 모서리 8px 통일 | ✅ **적용 완료** (2026-09-14) |
| 3 | 사번·번호·날짜·금액에 고정폭 `.mono` | ✅ **적용 완료** (2026-09-14) — 4개 메뉴 전체 |
| 2 | 주요 버튼이 **차트 막대와 같은 파랑** | ⬜ **보류** — 아래 참고 |

**2번에 대한 판단**: 원본은 *"강조색을 주요 CTA에 쓰지 말라(모노크롬 액션)"* 고 합니다.
우리 앱은 주요 버튼과 차트 막대가 **같은 파랑**이라, 홈 화면에서 버튼과 데이터가 같은 무게로 보입니다.
버튼을 `--text-1`(거의 검정) 계열로 바꾸면 **데이터에만 색이 남아** 원본 철학에 더 맞습니다.
다만 이건 **눈에 띄는 변경**이라 임의로 하지 않고 남겨 둡니다.

---

## 10. PRD와의 관계

| 문서 | 정하는 것 |
|---|---|
| **`PRD.md`** | 목적 · 기능 · 데이터 · 계산 규칙 · 동작 규칙 · 확인 기준 **(정본)** |
| **`DESIGN.md`** (이 문서) | 색 · 글꼴 · 여백 · 버튼 · 구성요소 **(겉모습만)** |

**충돌하면 PRD가 이깁니다.**
특히 다음 세 가지는 디자인 사정으로 절대 바꾸지 않습니다.

1. **교육용 가상 자료 표시 4곳** (PRD §8) — 배너·각주를 미관상 뺄 수 없습니다.
2. **빈 값은 `—`로 표시** (PRD §6-4) — 보기 좋으라고 0이나 "없음"으로 채우지 않습니다.
3. **차단된 동작의 이유 표시** (PRD §6-1) — 경고 문구를 미관상 줄이지 않습니다.

---

## 11. 출처

- **주 출처** — https://getdesign.md/cal/design-md (Cal.com 기준 디자인 사양, 이 문서의 뼈대)
  - 원본 전문 취득: `npx getdesign@latest add cal`
- **보조 출처** — https://getdesign.md/bugatti/design-md (Bugatti 기준 사양) → §12의 3가지만 차용
- 두 원본 모두 **마케팅 웹사이트** 기준이므로, 사내 업무 도구인 우리 앱에 맞게 §0·§12 표대로 조정했습니다.
- 차트 색·상태 색의 명암비 및 색각이상 검사 기준은 우리 앱 자체 검증값을 따릅니다.

---

## 12. Bugatti 사양에서 선별 차용한 것

출처: **https://getdesign.md/bugatti/design-md**

Bugatti 시스템은 **사진이 주인공인 순수 블랙 마케팅 사이트**용입니다.
우리 앱은 사진이 한 장도 없는 **표 중심 업무 도구**라 **전면 적용은 하지 않습니다.**
철학이 우리와 맞는 **3가지만** 가져옵니다.

### ① 굵기 대신 크기·자간으로 강조한다

> 원본: *"The system NEVER uses bold weight. Emphasis comes from size, letter-spacing, case, family contrast."*

| 우리 적용 | 내용 |
|---|---|
| 채택 | **굵게 하기 전에 먼저 크기를 키울 수 있는지 본다** (§2-3) |
| 미채택 | "굵기 400만 사용"은 안 씁니다. 표에서 **잔여 12.0**을 굵게 못 하면 숫자 위계가 사라집니다 |
| 한글 사정 | 원본은 대문자/소문자 대비도 강조 수단으로 쓰지만, **한글에는 대문자가 없어** 크기·자간만 남습니다 |

### ② 사번·번호·날짜·금액은 고정폭 글꼴로

> 원본: *"Bugatti Monospace — button labels, navigation, captions, dates, monospace-precision contexts."*

원본은 "기계적 정밀함이 필요한 곳"에 고정폭을 씁니다.
우리 앱에서 그런 자리는 **식별번호와 숫자**입니다.

```css
.mono {
  font-family: ui-monospace, "Cascadia Mono", "D2Coding", Consolas, monospace;
  font-size: 13px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
```

**적용 대상**

| 적용함 | 적용 안 함 |
|---|---|
| 사번 `E006` | 이름·부서·직급 |
| 신청번호 `L015` `P013` · 급여번호 `PY202609-E006` | 사유·설명 문장 |
| 날짜 `2026-09-14` `09.21 ~ 09.22` | 버튼 글자 (원본은 버튼도 고정폭이지만, **한글 버튼에 고정폭은 어색**) |
| 금액 `3,100,000원` · 일수 `12.0` · 재고 `32` | 화면 제목·카드 제목 |

**왜 좋은가**: 자릿수가 세로로 딱 맞아 **표에서 숫자를 위아래로 비교하기 쉬워집니다.**
`E006`과 `E011`이 같은 폭으로 정렬되어 "기록"처럼 읽힙니다.

> ⚠️ **한글에는 고정폭을 쓰지 않습니다.** 한글 고정폭 글꼴은 자간이 어색하고 가독성이 떨어집니다.
> 영문·숫자·기호 자리에만 씁니다.

### ③ 입력칸은 테두리 대신 아래 밑줄

> 원본: *"text-input — background transparent, 1px hairline-strong bottom border only (no top, left, right border)."*

| | 현재 | Bugatti식 대안 |
|---|---|---|
| 스타일 | 사방 1px 테두리 + 8px 모서리 | **아래쪽 1px만**, 배경 투명 |
| 장점 | 입력칸 위치가 분명함 | 폼이 빽빽할 때 **테두리 소음이 줄어듦** |

**판단**: 우리 폼은 한 줄에 항목이 4개(종류·시작일·종료일·사유)라 밀도가 높습니다.
밑줄만 쓰면 깔끔해지지만, **비개발자 수강생에게는 "여기가 입력칸"이 덜 분명**해질 수 있습니다.
→ **선택 적용 항목으로 남깁니다.** 기본은 현재의 사방 테두리를 유지하고,
폼이 더 복잡해지면 그때 밑줄 방식으로 바꿉니다.

### 🚫 Bugatti에서 **가져오지 않은 것**과 그 이유

| Bugatti 규칙 | 안 가져온 이유 |
|---|---|
| 순수 검정 배경 · 라이트 모드 없음 | 주간 사무실 사용. 우리는 라이트/다크 **둘 다** 지원 |
| 굵기 400만 (bold 금지) | 표에서 잔여·KPI 숫자를 강조 못 함 |
| 본문 serif (Garamond 계열) | **한글 명조는 13px 표에서 가독성 급락** |
| 대문자 + 자간 2~4px | **한글에 대문자가 없고**, 넓은 자간은 한글 가독성을 해침 |
| 모서리 0px (버튼 제외) | 상태 배지가 알약이 아니게 되어 승인/대기/반려 구분이 약해짐 |
| 버튼 = 투명 + 1px 외곽선 | **승인/반려를 색으로 구분 못 함** → 오조작 위험 |
| 강조색 없음 (#c3d9f3 링크뿐) | 상태색·차트색이 사라짐. 색각이상 검사를 마친 설계가 무너짐 |
| 섹션 여백 120px | 표 화면에서 스크롤만 폭증 |
| 전면 사진(full-bleed photography) | **우리 앱엔 사진이 한 장도 없음** — 이 시스템의 핵심 동력이 통째로 빠짐 |
| 커스텀 폰트 3종 | PRD §7 **외부 리소스 금지** 위반 (더블클릭 실행이 깨짐) |

### 적용 상태

| 항목 | 문서 반영 | 앱 반영 |
|---|---|---|
| ① 크기·자간 우선 원칙 | ✅ §2-3 | ✅ 지켜지고 있음 |
| ② 고정폭 숫자·식별번호 | ✅ §2-2 `mono` | ✅ **적용 완료** — 4개 메뉴 전체 |
| ③ 입력칸 밑줄 | ✅ 선택 항목으로 기록 | ⬜ 적용 안 함 (기본 유지) |