---
name: 보험유니버스 Insight Plan
description: FC가 고객 앞에서 진료·투약 이력을 짚어 가며 읽어 주는 분석 화면
colors:
  primary: "#6f51ea"
  primary-light: "#876cf7"
  primary-dark: "#593fc2"
  secondary: "#5265eb"
  accent: "#e74c3c"
  ink: "#2c3e50"
  ink-muted: "#7f8c8d"
  ink-quiet: "#888888"
  ink-strong: "#333333"
  surface: "#ffffff"
  surface-page: "#f3f1fb"
  surface-panel: "#f5f8fa"
  surface-panel-open: "#eef1f5"
  surface-inert: "#f2f2f2"
  line: "#eaeaea"
  line-card: "#e5e7eb"
  line-card-open: "#d0d5dd"
  rule-head: "#696969"
  rule-foot: "#cccccc"
  info: "#2563eb"
typography:
  display:
    fontFamily: "Pretendard Variable, Pretendard, -apple-system, sans-serif"
    fontSize: "3.2rem"
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: "-0.5px"
  headline:
    fontFamily: "Pretendard Variable, Pretendard, -apple-system, sans-serif"
    fontSize: "2.4rem"
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: "-0.5px"
  title:
    fontFamily: "Pretendard Variable, Pretendard, -apple-system, sans-serif"
    fontSize: "2rem"
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: "-0.5px"
  body:
    fontFamily: "Pretendard Variable, Pretendard, -apple-system, sans-serif"
    fontSize: "1.6rem"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.5px"
  label:
    fontFamily: "Pretendard Variable, Pretendard, -apple-system, sans-serif"
    fontSize: "1.4rem"
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: "-0.5px"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  pill: "50px"
  circle: "50%"
spacing:
  xs: "0.8rem"
  sm: "1.2rem"
  md: "1.6rem"
  lg: "2.4rem"
  xl: "3.2rem"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: "0 2.4rem"
    height: "6rem"
    typography: "{typography.title}"
  button-white:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: "0 2.4rem"
    height: "6rem"
    typography: "{typography.title}"
  tab-top:
    backgroundColor: "transparent"
    textColor: "#899096"
    typography: "{typography.title}"
    height: "8.8rem"
  tab-top-active:
    backgroundColor: "transparent"
    textColor: "{colors.secondary}"
    typography: "{typography.title}"
    height: "8.8rem"
  tab-inner:
    backgroundColor: "{colors.surface-inert}"
    textColor: "{colors.ink-muted}"
    rounded: "{rounded.md}"
    padding: "0 1.2rem"
    height: "4.8rem"
    typography: "{typography.label}"
  tab-inner-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: "0 1.2rem"
    height: "4.8rem"
    typography: "{typography.label}"
  card-panel:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: "3.2rem"
  card-accordion:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  card-accordion-header:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.ink-strong}"
    rounded: "{rounded.md}"
    padding: "1.2rem 1.6rem"
    typography: "{typography.label}"
  card-accordion-header-open:
    backgroundColor: "{colors.surface-panel-open}"
    textColor: "{colors.ink-strong}"
    padding: "1.2rem 1.6rem"
    typography: "{typography.label}"
---

# Design System: 보험유니버스 Insight Plan

> **적용 범위 — `insuniverse-site/front` 하나뿐이다.** 이 저장소의 서브모듈 셋은 디자인 시스템이
> 서로 다르다. `insuniverse-admin` 은 AdminLTE 계열이고 정본이
> `insuniverse-admin/public/_statics/_rsteam/style.css` 다 — 서체·토큰·컴포넌트 어휘가 여기와
> 겹치지 않는다. 이 문서의 규칙을 admin 에 적용하면 틀린다. admin 작업은 별도 DESIGN.md 를
> 그 서브모듈 안에서 세워야 한다.

## Overview

**Creative North Star: "설명 가능한 차트"**

이 화면은 보라고 만든 것이 아니라 **같이 읽으려고** 만든 것이다. FC가 휴대폰을 고객 쪽으로 돌려 놓고 손가락으로 한 줄씩 짚어 가며 "이건 이래서 이렇게 잡힌 겁니다" 를 말하는 장면이 실사용 장면이고, 그 자리에서 화면이 하는 일은 인상을 주는 것이 아니라 **문장을 대신 지어 주는 것**이다. 그래서 이 시스템의 성능은 아름다움이 아니라 *짚을 수 있는가* 로 잰다. 짚을 곳이 없으면 실패이고, 짚을 곳이 너무 많아도 실패다.

바탕은 조용하다. 흰 면과 옅은 회청색 패널(`#f5f8fa`)이 대부분을 차지하고, 진짜 구분은 1px 실선(`#eaeaea` · `#e5e7eb`)이 진다. 그림자는 있지만 거의 보이지 않고(`0 4px 4px rgba(0,0,0,.02)`) 그것이 의도다 — 떠 있음으로 위계를 만들면 화면 공유 중 작은 화면에서 층이 뭉개진다. 자주색(`#6f51ea`)은 이 조용한 면 위에서 **지금 눌러야 하는 자리 하나**를 가리키는 데만 쓰이고, 붉은색(`#e74c3c`)은 경고에만 나온다. 색이 흔해지면 FC가 "여기 보세요" 라고 말할 자리가 사라진다.

밀도는 한국어 본문 기준으로 짜여 있다 — `letter-spacing: -0.5px`, 본문 1.6rem, 767px 이하에서 루트가 58%로 내려가 1rem 이 9.28px 가 되니 실효 14.85px 다. 이 화면이 다루는 것은 상병 코드와 약품명과 날짜라서, 줄이 끊기는 자리가 곧 오독이 되는 자리다. 그래서 이 시스템은 줄바꿈과 표 정렬을 장식이 아니라 정확성의 문제로 다룬다.

**Key Characteristics:**
- 경계선이 층을 지고, 그림자는 층을 지지 않는다
- 자주색은 화면당 한 자리 — 지금 읽을 곳
- 판정과 그 출처는 같은 덩어리 안에서만 산다
- 기본은 접혀 있고, 펼침은 언제나 한 번의 거리
- 한국어 어절이 끊기지 않는 것이 정렬보다 앞선다

## Colors

조용한 회청색 바탕 위에 자주색 하나가 드물게 서는 팔레트다. 색의 수가 아니라 **색이 나타나는 빈도**가 이 시스템의 성질이다.

### Primary
- **Signal Violet** (`#6f51ea`): 지금 누를 수 있는 것과 지금 읽어야 하는 것. 주요 버튼, 선택 표시, 텍스트 선택 배경. 한 화면에서 이 색이 두 군데 이상 나오면 우선순위가 사라진 것이다.
- **Violet Lift** (`#876cf7`): 그라데이션 상단과 hover 상승. 단독으로 의미를 지지 않는다.
- **Violet Press** (`#593fc2`): 눌린 상태와 자주색 면 위 텍스트.

### Secondary
- **Wayfinding Indigo** (`#5265eb`): 최상위 탭의 활성 표시(글자색과 4px 밑줄)에만 쓴다. "여기 있다" 를 말하는 색이고 "이걸 눌러라" 를 말하는 자주색과 역할이 다르다.

### Tertiary
- **Alarm Red** (`#e74c3c`): 경고·오류·주의사항 전용. 강조에 빌려 쓰지 않는다.
- **Reference Blue** (`#2563eb`): 아코디언 배지 — 구획 안에서 세어야 하는 수치 하나를 가리킨다.

### Neutral
- **Slate Ink** (`#2c3e50`): 본문 기본색이자 내부 탭 활성 배경. 이 시스템에서 가장 어두운 면이다.
- **Muted Ink** (`#7f8c8d`) / **Quiet Ink** (`#888888`): 보조 설명, 날짜, 비활성 라벨.
- **Strong Ink** (`#333333`): 카드 제목.
- **Paper** (`#ffffff`): 카드와 패널 바탕.
- **Lilac Page** (`#f3f1fb`): 문서 바탕. 흰 카드를 띄우는 것은 그림자가 아니라 이 색 차이다.
- **Panel Mist** (`#f5f8fa`) / **Panel Mist Open** (`#eef1f5`): 아코디언 머리. 펼치면 한 단 더 어두워진다.
- **Inert Fill** (`#f2f2f2`): 선택되지 않은 내부 탭.
- **Hairline** (`#eaeaea`) / **Card Hairline** (`#e5e7eb`) / **Card Hairline Open** (`#d0d5dd`): 진짜 구분자.
- **Table Rule Head** (`#696969`) / **Table Rule Foot** (`#cccccc`): 표 위·아래 선. 표에는 세로선이 없다.

### Named Rules

**The One Violet Rule.** 자주색은 한 화면에 한 자리다. 판정 구획이 넷이면 셋은 중립 토큰으로 가고 하나만 자주색을 쓴다. 넷이 각자 색을 가지면 무엇을 먼저 읽어야 하는지가 사라진다.

**The Red-Means-Wrong Rule.** `#e74c3c` 는 경고에만 쓴다. 눈에 띄어야 한다는 이유로 강조에 빌려 쓰면, 진짜 경고가 나왔을 때 그것이 경고로 안 읽힌다.

**The Hairline Divider Rule.** 구분이 필요하면 1px `#eaeaea` 를 쓴다. 배경색을 살짝 바꿔서 나누지 않는다 — 화면 공유 중 밝은 조명 아래서 그 차이는 사라진다.

## Typography

**Display / Body Font:** Pretendard Variable (fallback: Pretendard, `-apple-system`, sans-serif)
**Label/Mono Font:** 없음 — 코드와 상병 코드도 같은 서체로 간다.

**Character:** 하나의 한국어 서체가 전부를 진다. 개성은 서체가 아니라 **굵기 대비**에서 나온다 — 본문 400, 라벨·제목 600, 탭·헤드라인 700. 자간은 전역 `-0.5px` 로 한국어 어절이 뭉치게 조여져 있다.

### Hierarchy
- **Display** (700, 3.2rem, 1.3): 페이지 최상단 이름·결과 제목. 화면당 한 번.
- **Headline** (700, 2.4rem, 1.4): 섹션 제목.
- **Title** (700, 2rem, 1.4): 최상위 탭 라벨, 주요 버튼 라벨, 카드 제목.
- **Body** (400, 1.6rem, 1.6): 본문 기본. 표 셀과 설명문. 767px 이하에서 루트가 58%로 내려가 실효 14.85px 가 되므로 **이 아래로 내려가는 본문을 만들지 않는다.**
- **Label** (600, 1.4~1.5rem): 배지, 날짜, 내부 탭, 보조 수치.

### Named Rules

**The 1.6 Floor Rule.** 읽어야 하는 텍스트는 1.6rem 아래로 내려가지 않는다. 그 아래는 라벨과 날짜의 자리다. 모바일 화면 공유가 실사용 장면이고 루트가 이미 58%까지 줄어 있다.

**The Unbroken Token Rule.** 상병 코드·날짜·약품명은 중간에서 줄바꿈되지 않는다(`white-space: nowrap`). 어절이 끊기면 값이 두 개로 읽힌다.

## Layout

세로 한 줄 흐름이다. 문서 바탕(`#f3f1fb`) 위에 흰 카드가 얹히고, 카드 안에서 내용이 위에서 아래로만 간다. 다단은 쓰지 않는다 — 화면 공유가 실사용 장면이라 가로로 눈을 옮기게 만들면 설명이 끊긴다.

- **컨테이너**: `.diag-box` 는 안쪽 여백 3.2rem, 카드 사이 간격 0.8rem.
- **리듬**: 0.8 / 1.2 / 1.6 / 2.4 / 3.2rem. 아코디언 머리 안쪽은 `1.2rem 1.6rem`, 요소 간격은 12px.
- **브레이크포인트**: 1100 · 860/856 · 767 · 739 · 698 · 639 · 575 · 445 · 400 · 350px (전부 `max-width`). 모바일이 기본이고 데스크톱이 확장이다.
- **루트 스케일**: 62.5%(1rem = 10px), 767px 이하 58%(1rem = 9.28px).
- **가로 스크롤**: 탭 줄과 표만 가로로 흐른다(`overflow-x: auto`). 본문은 절대 가로로 넘치지 않는다.
- **표**: 위 `#696969`, 아래 `#cccccc` 가로선만. 세로선 없음.

### Named Rules

**The One Column Rule.** 분석 결과는 한 단이다. 넓은 화면에서 남는 폭은 여백으로 두지 두 단으로 쪼개지 않는다.

**예외 — `ans003b-dx-detail-modal` 한 곳.** 상병별 탭의 상세 모달은 뷰포트 1100px 초과에서 두 단(왼쪽 약효분류 목록 34rem · 오른쪽 약 상세 상한 64rem)으로 선다. 한 단의 읽기 폭 상한이 PC 에서 비워 둔 옆자리를 드릴다운의 앞 단계가 채워, 뒤로가기 없이 목록과 상세를 함께 보게 하려는 것이다. 이 예외는 다른 화면으로 상속되지 않는다 — 두 단을 원하는 다음 화면은 자기 근거를 따로 댄다.

**The Scroll-The-Table Rule.** 넓은 내용은 페이지가 아니라 그 요소가 스크롤한다. 문서 본문이 가로로 밀리면 손가락으로 짚던 자리를 잃는다.

## Elevation & Depth

**이 시스템에서 깊이는 경계선이 진다.** 그림자는 실재하지만(26곳이 `0 4px 4px rgba(0,0,0,.02)`) 거의 보이지 않고, 그것이 의도다. 층은 세 가지가 만든다 — 1px 실선(`#eaeaea` · `#e5e7eb`), 면 색의 단계(`#f3f1fb` 바탕 → `#ffffff` 카드 → `#f5f8fa` 패널 머리 → `#eef1f5` 펼친 머리), 그리고 상태에 따른 경계선 진하기(`#e5e7eb` → `#d0d5dd`).

### Shadow Vocabulary
- **Ambient hairline** (`box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.02)`): 카드·버튼·탭의 기본. 층을 만들지 않고 면이 바닥에 붙지 않게만 한다.
- **Violet ambient** (`box-shadow: 0px 4px 4px 0px rgba(111,81,234,0.12)`): 자주색 요소 전용. 색을 한 겹 더 얹는 것이지 높이를 주는 것이 아니다.
- **Violet lift** (`box-shadow: 0px 4px 10px rgba(111,81,234,0.5)`): 떠 있는 실행 버튼 한 자리.
- **Overlay** (`box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15)`): 모달·드롭다운 — 문서 흐름 밖에 있는 것만.

### Named Rules

**The Hairline Rule.** 새 그림자를 들이지 않는다. 층이 필요하면 경계선을 진하게 하거나 면 색을 한 단 내린다. 그림자로 층을 만들기 시작하면 이 시스템의 모든 카드가 서로 경쟁한다.

**The Overlay-Only Depth Rule.** 눈에 보이는 그림자는 문서 흐름 밖의 것(모달·드롭다운)만 가진다. 흐름 안에 있는 것은 평평하다.

## Shapes

모서리는 두 단계다. **바깥 컨테이너 12px, 안쪽 요소 8px.** 카드 안에 카드가 들어갈 때 안쪽이 더 둥글면 뜯어낸 것처럼 보인다. 4px·6px는 배지·칩 같은 작은 조각에만 남아 있고, 50px 알약형과 50% 원형은 아바타·아이콘·상태 점 전용이다.

펼친 아코디언은 머리만 위쪽 모서리를 유지한다(`8px 8px 0 0`) — 머리와 몸이 하나의 카드라는 것이 모양으로 드러난다.

### Named Rules

**The Twelve-Eight Rule.** 바깥은 12px, 안쪽은 8px. 예외는 없고, 새 반경을 만들지 않는다.

## Components

### Buttons
- **Shape:** 넉넉하게 둥근 모서리(12px), 높이 6rem, 좌우 여백 2.4rem.
- **Primary:** 자주색 면에 흰 글자(`#6f51ea` / `#fff`), 라벨 2rem/500. 화면당 하나.
- **White:** 흰 면에 1px `#eaeaea` 테두리. 부수 동작 전부. hover `#f7f7f7`, active `#f0f0f0`.
- **Hover / Focus:** 색만 0.3s로 바뀐다. 크기·위치는 움직이지 않는다 — 손가락으로 짚는 화면에서 요소가 움직이면 짚던 자리를 잃는다.

### Tabs
- **최상위 탭:** 배경 없는 글자만. 2rem/700, 비활성 `#899096`, 활성 `#5265eb` 에 4px 밑줄이 `scaleX(0→1)` 로 자란다. 높이 8.8rem, 가로 스크롤되며 오른쪽 끝에 흰색 그라데이션 페이드.
- **내부 탭:** 알약이 아니라 8px 사각 칩. 비활성은 `#f2f2f2` 면에 `#eaeaea` 테두리, 활성은 `#2c3e50` 면에 흰 글자. 높이 4.8rem.
- **The Two-Level Tab Rule.** 탭은 두 단계까지다. 세 번째 탭 줄이 필요하면 그것은 탭이 아니라 접힘으로 가야 한다.

### Cards / Containers
- **패널 카드(`.diag-box`):** 12px 모서리, 흰 면, 1px `#eaeaea`, 안쪽 여백 3.2rem.
- **아코디언 카드:** 8px 모서리, 1px `#e5e7eb`. 펼치면 테두리가 `#d0d5dd` 로 진해지고 머리가 `#eef1f5` 로 내려간다.
- **머리:** `#f5f8fa` 면, 안쪽 `1.2rem 1.6rem`, 요소 간격 12px, 제목 1.6rem/600 `#333`.
- **날짜·부가:** `#888`/500, `nowrap`.
- **배지:** 1.5rem/600 `#2563eb`, `nowrap`. 구획 안의 수치 하나를 가리킨다.

### Tables
- **틀:** 위 1px `#696969`, 아래 1px `#cccccc`. 세로선 없음. 본문 1.6rem.
- **넘침:** 표 자신이 가로 스크롤한다.

### 판정 덩어리 (signature)
이 제품의 서명 요소는 **판정과 그 출처가 한 덩어리인 것**이다. 참조 화면이 정의한 구성은 — 앵글 라벨(작은 자주색 칩) · 한 문장(2rem/500) · 보조 설명(1.6rem, `#6a747e`) · `근거 N건` 펼침 버튼 · 펼친 근거(판정 규칙 · 근거 표 · **생성 출처**)다.

**The Explainable Pair Rule.** 판정이 화면에 나오면 그 판정이 어디서 나왔는지가 같은 덩어리 안에 있어야 한다. 근거를 다른 화면이나 다른 스크롤 위치로 보내면 FC가 고객 앞에서 설명을 이어 갈 수 없다.

**The Honest Badge Rule.** 문장을 만든 경로를 배지로 밝힌다 — 규칙이 만든 문장과 언어모델이 만든 문장은 다른 배지를 단다. **템플릿 문장에 언어모델 배지를 다는 것은 이 시스템이 해서는 안 되는 한 가지다.**

#### AI 인사이트 화면(`ANS015`)의 예외

**범위.** `ANS015` 의 `.ai_box` 서브트리 안에서 The Honest Badge Rule 의 **배지 표기 의무**를 면제한다. Rule 의 나머지 절반 — 「템플릿 문장에 언어모델 배지를 달지 않는다」 — 는 면제하지 않는다. 배지를 아예 달지 않으므로 그 금지는 자동으로 지켜지고, 거짓 배지가 생길 자리 자체가 없다.

**근거.** 확정 레퍼런스 `xai-report-reference.html` 이 이 화면의 정본이고(사용자 확정 2026-09-08), 레퍼런스는 발견 단위 출처 표기를 싣지 않는다. 화면 하나가 규칙을 이기는 것이 아니라, 이 화면에 한해 **정본이 바뀌었다**.

**대가.** 설계사는 한 문장이 규칙 산출인지 언어모델 산출인지 화면에서 구분할 수 없다. 그 구분이 필요해지면 이 예외를 먼저 걷어야 한다 — 배지를 새로 들이기 전에 레퍼런스를 고쳐야 한다는 뜻이다.

**함께 덮인 것.** 같은 결정이 PRD §Design Direction 의 세 규범(강조 예산 · 정보 위계 3단계 상한 · 목록 상한)도 덮는다. 그 기록은 `.claude/prds/ai-insight-report.prd.md` §Design Direction 에 있다. 위 Do 목록의 「자주색을 화면당 한 자리에만」과 「문장 생성 경로를 배지로 표기」 두 행은 이 화면에 적용되지 않는다.

**소유.** 게이트 `#13`(`.claude/plans/ai-insight-report-m1.gates.mjs`)이 이 절의 실재를 매 실행 확인한다. 예외를 지우려면 그 게이트를 먼저 지워야 하고, 그 삭제는 diff 에 남는다.

## Do's and Don'ts

### Do:
- **Do** 층이 필요하면 1px `#eaeaea`/`#e5e7eb` 경계선이나 면 색 한 단(`#fff` → `#f5f8fa` → `#eef1f5`)으로 낸다.
- **Do** 바깥 컨테이너는 12px, 그 안의 요소는 8px로 둥글린다.
- **Do** 자주색(`#6f51ea`)을 화면당 한 자리에만 쓰고 나머지 구획은 중립 토큰으로 둔다.
- **Do** 읽어야 하는 텍스트를 1.6rem 이상으로 둔다.
- **Do** 상병 코드·날짜·약품명에 `white-space: nowrap` 을 준다.
- **Do** 넓은 표는 페이지가 아니라 표 자신이 가로 스크롤하게 한다.
- **Do** 판정 옆에 그 판정의 출처를 같은 덩어리로 붙인다.
- **Do** 문장 생성 경로(규칙/언어모델)를 배지로 정확히 표기한다.
- **Do** 기존 클래스(`.diag-box` · `.table-box` · `.ans003-accordion-*` · `.tab-list` · `.tab-list-dark`)를 먼저 찾아 쓴다.

### Don't:
- **Don't** 새 그림자 값을 들이지 않는다. 흐름 안의 요소는 평평하다.
- **Don't** `#e74c3c` 를 경고 아닌 강조에 쓰지 않는다.
- **Don't** 새 모서리 반경을 만들지 않는다(12/8, 조각은 4·6, 원형 50%).
- **Don't** 탭을 세 단계로 쌓지 않는다. 세 번째 축은 접힘으로 간다.
- **Don't** hover·focus에서 요소를 이동시키거나 크기를 바꾸지 않는다. 색만 0.3s로 바꾼다.
- **Don't** 분석 결과를 두 단으로 쪼개지 않는다.
- **Don't** 판정 근거를 다른 화면이나 다른 스크롤 위치로 보내지 않는다.
- **Don't** 템플릿이 만든 문장에 언어모델 배지를 달지 않는다.
- **Don't** 새 디자인 시스템·아이콘 세트·서체를 들이지 않는다. Pretendard 하나와 기존 토큰이 정본이다.