# 하나랑 대시보드 — 디자인 시스템 v2

## 디자인 철학
미니멀 터미널 UI. 장식 최소화, 정보 밀도 최대화.
glassmorphism 제거 → 1px 보더 카드 + 모노스페이스 라벨.

---

## 색상 (Color Tokens)

| Token | Value | 용도 |
|-------|-------|------|
| `--bg-main` | `#151515` | 전체 배경 |
| `--bg-surface` | `#151515` | 카드/패널 배경 (배경과 동일, 보더로 구분) |
| `--bg-input` | `#1a1a1a` | 인풋/검색 배경 |
| `--bg-code` | `#0d0d0d` | 로그 테이블/코드 블록 배경 |
| `--text-primary` | `#F5F5F5` | 주 텍스트 |
| `--text-secondary` | `#8A8A8A` | 보조 텍스트, 라벨 |
| `--border-color` | `#333333` | 카드 보더, 구분선 |
| `--border-hover` | `#555555` | hover 시 보더 |
| `--accent-hover` | `#FFFFFF` | 네비 active, 강조 |

### 상태 색상 (조직도 전용)
| Token | Value | 용도 |
|-------|-------|------|
| `--level-high` | `#f43f5e` | 최상위/긴급 |
| `--level-mid` | `#3b82f6` | 중간/R&D |
| `--level-low` | `#10b981` | 하위/운영 |
| `--level-none` | `#525252` | 비활성 |

### 로그 태그 색상
| Tag | Color |
|-----|-------|
| SYSTEM | `#888` |
| SECURITY | `#ff5f5f` |
| ORG | `#5fafff` |
| BACKUP | `#5fff8a` |

### 상태 표시 색상
| Status | Color |
|--------|-------|
| PASS / 성공 | `#00FF00` |
| ACTIVE dot | `#FFF` + `box-shadow: 0 0 8px rgba(255,255,255,0.3)` |
| INACTIVE dot | `#555` |

---

## 타이포그래피

| 용도 | Font | Size | Weight |
|------|------|------|--------|
| 본문 | `--font-sans` | 14px | 400 |
| 페이지 제목 | `--font-sans` | 28px | 600 |
| 섹션 제목 | `--font-sans` | 14px | 600 |
| 라벨 (label-meta) | `--font-sans` | 11px | 700, uppercase |
| 브라켓 값 | `--font-sans` | 32px | 600 |
| 타임스탬프 | `--font-mono` | 11px | 400 |
| 로그 텍스트 | `--font-mono` | 12px | 400 |
| 브라켓 인풋 | `--font-mono` | 14px | 400 |
| 뱃지 | `--font-mono` | 9px | 400, uppercase |

**폰트 스택:**
- `--font-sans`: `-apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif`
- `--font-mono`: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`

---

## 스페이싱

| Token | Value |
|-------|-------|
| `--space-xs` | 4px |
| `--space-sm` | 8px |
| `--space-md` | 16px |
| `--space-lg` | 24px |
| `--space-xl` | 40px |
| `--space-xxl` | 64px |

---

## 컴포넌트

### Sidebar
- 너비: 240px (데스크톱), 64px (모바일 아이콘 모드)
- `border-right: 1px solid var(--border-color)`
- `position: sticky; top: 0; height: 100vh`
- 로고: ● + ◗ (circle-full + circle-half)
- 네비 active: `[대시]` 브라켓 표기 + 흰색 텍스트
- 네비 inactive: `#8A8A8A`
- 메뉴: 대시, 활동, 프로, 자매, 조직, 설정, 관리

### Card (상태 카드)
- `border: 1px solid var(--border-color)`
- `background: var(--bg-surface)`
- `padding: var(--space-lg)`
- hover: `border-color: #555`
- 내부: header(SYS:이름) + bracket-value([ON]) + label + tech-bar

### Tech Bar (진행 바)
- `height: 2px; background: var(--border-color)`
- fill: `background: var(--text-primary)`

### Timeline
- 왼쪽 세로선: `left: 3px; width: 1px; background: var(--border-color)`
- 도트: `width: 7px; height: 7px; border: 1px solid var(--text-primary); border-radius: 50%`

### Toggle Switch
- 34x18px, border 1px
- checked: border `var(--text-primary)`, dot 흰색

### Bracket Input
- `[ value ]` 형태, mono font
- 투명 배경, 포커스 시 흰색 텍스트

### Button
- 기본: 투명 + 보더, uppercase 12px
- primary: 흰색 배경 + 검정 텍스트, hover 반전
- toggle: fit-content, 11px, active 시 흰색 배경

### Log Table
- 배경: `#0d0d0d`, border 1px
- th: 11px uppercase, `--text-secondary`
- td: 12px mono, hover 배경 `#1a1a1a`

### Terminal Card (조직도)
- `border-left: 3px solid` (레벨별 색상)
- `box-shadow: 0 10px 30px rgba(0,0,0,0.5)`
- 뱃지: 9px mono, `#1a1a1a` 배경

---

## 반응형 (Breakpoints)

| Breakpoint | 화면 | 변경 사항 |
|------------|------|-----------|
| `≥1200px` | Desktop | 기본 레이아웃 |
| `768–1199px` | Tablet | 사이드바 64px 아이콘 모드, 카드 2열, 2열 그리드→1열 |
| `≤767px` | Mobile | 사이드바 하단 탭바, 카드 1열, 노드 엔트리 수직 스택, 테이블 카드 변환 |

### Mobile 세부 규칙
1. **사이드바 → 하단 탭바**: 고정 하단, 아이콘+짧은 라벨, `height: 56px`
2. **상태 카드 그리드**: `grid-template-columns: repeat(2, 1fr)` → `1fr` (모바일)
3. **data-columns (대시 하단)**: `1.5fr 1fr` → `1fr` 수직 스택
4. **project-grid (프로젝트 상세)**: `1fr 320px` → `1fr` 수직 스택
5. **node-entry (자매 관리)**: 3열 가로 → 수직 스택
6. **settings-grid**: 2열 → 1열
7. **log-table**: 가로 스크롤 또는 카드 형태 변환
8. **조직도 tree**: 수평 스크롤 + 핀치 줌
9. **padding 축소**: `--space-xxl` → `--space-lg`, `--space-xl` → `--space-md`
10. **bracket-value 크기**: 32px → 24px (모바일)