# 사내 가이드북 — 디자인 문서

> 출처: 「아주헬스케어그룹 Gemini Enterprise 사용자 가이드 v1」(디지털혁신팀, 2026-10) 의 화면을 정리한 것.
> 사용 가이드·도입 안내·교육 교재처럼 **한 페이지 안에서 목차 → 상세로 내려가며 읽는 문서형 웹페이지**에 씁니다.

## 1. 성격

- 검정 머리말 띠 위에 제목, 그 아래로 **클릭 타일 목차**가 반쯤 겹쳐 올라온다. 타일을 누르면 같은 페이지의 상세 섹션으로 내려간다.
- 바탕은 연한 청회색, 내용은 흰 카드 섹션. 강조는 **선명한 블루 한 색**(#041FFF).
- 프롬프트 예시·단계·비교·주의 같은 **반복 블록**을 정해 두고 섹션마다 같은 모양으로 쓴다. 읽는 사람이 모양만 보고 "이건 따라 칠 문장", "이건 주의"를 안다.

## 2. 색 토큰

| 토큰 | 라이트 | 다크 | 쓰임 |
|---|---|---|---|
| `--color-bg` | `#f3f5fb` | `#14161d` | 페이지 바탕 |
| `--color-surface` | `#ffffff` | `#1d2029` | 섹션 카드, 타일 |
| `--color-fg` | `#1b1f2a` | `#eef0f6` | 본문 |
| `--color-muted` | `#5b6270` | `#a3a9ba` | 보조 설명 |
| `--color-border` | `#e2e5ee` | `#333748` | 경계선 |
| `--color-primary` | `#041FFF` | `#5d6bff` | 단계 배지, 소제목 막대, 선택 테두리 |
| `--color-primary-dark` | `#0017C1` | `#97a3ff` | 링크, 태그 글자, "바로가기" |
| `--color-blue-bg` | `#e9ecff` | `#1c2150` | 프롬프트 상자, 태그 바탕, 정보 콜아웃 |
| `--color-chip-bg` | `#eef1f8` | `#262a37` | 작은 카드, 표 머리글 |
| `--color-green` / `-bg` | `#1e8e5a` / `#e6f4ea` | `#81c995` / `#1e3327` | 체크 목록, "좋은 예" |
| `--color-red-bg` | `#fce8e6` | `#3a2323` | "나쁜 예" |
| `--color-yellow` / `-bg` | `#b8860b` / `#fff8e1` | `#fdd663` / `#3a3220` | 주의 콜아웃 |
| 머리말·꼬리말 | `#000000` | `#000000` | 상단 헤더 띠, 하단 푸터 |

- 다크 모드는 `prefers-color-scheme: dark` 로 위 토큰만 바꾼다. 머리말·꼬리말 검정은 그대로.

## 3. 글꼴

- `"Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif`, 본문 행간 1.6
- 크기: 페이지 제목 `clamp(28px, 4vw, 42px)` 800 / 섹션 제목 `clamp(21px, 2.6vw, 27px)` 800 / 소제목 16px 700 / 본문 14.5~15px / 보조 13.5px / 라벨 11.5~12px 700

## 4. 레이아웃

- 본문 폭 `max-width: 1180px`, 좌우 24px
- **머리말**: 검정 바탕, 위아래 48px / 64px. 파란 사각 라벨(eyebrow, 반경 8px) → 제목 → 부제(최대 660px) → 메타 알약(흰 12% 바탕, 반경 999px)
- **타일 목차**: `margin-top: -40px` 로 머리말에 겹쳐 올림. `repeat(auto-fit, minmax(240px, 1fr))`, 간격 16px. 타일 = 흰 카드 + 1px 경계 + 반경 16px + 그림자 md, 위에 아이콘 칸(46px, 블루 바탕, 반경 12px)·번호(01, 02…), 제목 16.5px, 설명 13.5px, 아래 "바로가기 →"
- **상세 섹션**: 흰 카드, 반경 20px, 안쪽 `36px clamp(20px,4vw,44px) 40px`, 섹션 사이 28px. 위에 태그 알약 → 제목 → 리드 문단(최대 780px) → 소제목들
- 소제목(h3): 왼쪽 4px 블루 막대 + 안쪽 12px
- **꼬리말**: 검정, 회색 글자 12.5px, 왼쪽 로고·저작 표기 / 오른쪽 태그라인
- 오른쪽 아래 「맨 위로」 원형 버튼(46px, 블루)

## 5. 반복 블록 (섹션 안에서 이 모양만 쓴다)

| 블록 | 모양 | 쓰임 |
|---|---|---|
| 카드 3개 `.cards3` | 칩 바탕 작은 카드, 위에 번호(블루 13px 800) | 요점 나열 |
| 체크 목록 `ul.check` | 앞에 초록 체크 | 할 수 있는 것, 준비물 |
| 프롬프트 상자 `.prompt-box` | 블루 바탕 + **블루 점선** 테두리, 위에 작은 라벨 | 그대로 따라 칠 문장 |
| 단계 `.steps` | 40px 블루 원 번호 + 제목·설명, 단계 사이 가로선 | 순서대로 하는 일 |
| 비교 `.compare2` | 두 칸, 빨강 바탕 = 나쁜 예 / 초록 바탕 = 좋은 예 | 이렇게 말고 이렇게 |
| 콜아웃 `.callout` | 노랑 = 주의, 블루 = 정보, 초록 = 좋은 점 | 꼭 알아야 할 한 가지 |
| 표 `table.data` | 모든 칸 1px 경계, 머리글 칩 바탕, 강조 칸은 블루 굵게 | 비교·사양 |
| 화면 캡처 `figure.shot` | 칩 바탕 카드, 캡처 높이 168px 위쪽 기준 자르기, 누르면 크게 보기 | 화면 안내 |
| 흐름 `.arch-flow` | 칩 바탕 노드 + 화살표 | 데이터·처리 흐름 |

## 6. 상호작용

- 타일 hover: 위로 3px, 테두리 블루. 전환 150ms
- 상세 섹션이 `:target` 이 되면 블루 테두리 + 옅은 블루 링이 한 번 퍼진다(0.6s) — 어디로 내려왔는지 알려 준다
- `html { scroll-behavior: smooth; }`, `scroll-margin-top: 24px`
- 캡처는 클릭하면 라이트박스(어두운 막 82%)로 크게
- 모션은 `prefers-reduced-motion` 이면 끈다

## 7. 하지 말 것

- 블루 외의 강조색 추가(초록·빨강·노랑은 **블록의 의미**에만)
- 타일 아이콘을 이모지로 — 원본 가이드는 이모지를 썼지만 사내 규칙상 **lucide 아이콘 또는 SVG**로 바꾼다
- 섹션마다 다른 카드 모양, 블록 밖에 임의 상자 만들기
- 그라디언트 머리말(머리말은 단색 검정)