# 프로젝트 상세 (`/projects/[id]`) — 디자인 v2

> 참조: DESIGN-SYSTEM.md | 원본: 자기야 디자인 파일 #2

## 레이아웃

```
┌──────────┬────────────────────────────────────────────┐
│ Sidebar  │  PROJECTS / P-402 / SUMMARY                │
│          │  데이터 파이프라인 최적화   STATUS: ACTIVE/P2 │
│          │  ─────────────────────────────────────────  │
│          │                                             │
│          │  PHASE TIMELINE          │ ASSIGNED NODES   │
│          │  ────────────            │ ─────────────    │
│          │  P1: 아키텍처 분석 ✓      │ 하랑 [PRIMARY] ●  │
│          │  ●P2: 실시간 동기화       │ 나랑 [SECONDARY]● │
│          │  P3: 스트레스 테스트       │                  │
│          │                          │ TASK CHECKLIST   │
│          │  SECURITY AUDIT LOG      │ ─────────────    │
│          │  ───────────────         │ ■ 인프라 요구사항  │
│          │  14:02 CRYPTO_KEY  PASS  │ ■ 보안 프로토콜   │
│          │  11:30 CODE_SCAN   PASS  │ □ 캐시 무효화     │
│          │  09:15 ACCESS_LOG  WARN  │ □ 부하 분산       │
└──────────┴────────────────────────────────────────────┘
```

## 헤더
- breadcrumb: mono 11px uppercase, secondary
- page-title-row: 제목(28px) + STATUS label-meta

## 본문 그리드
- `grid-template-columns: 1fr 320px` / gap: 64px

### 좌: Phase Timeline + Audit Log

#### Phase Timeline
- phase-item: `grid-template-columns: 120px 1fr`
- 왼쪽: phase-meta — mono 11px, "COMPLETED / 2023.10.12"
- 오른쪽: phase-box — `border-left: 2px solid`
  - active: border 흰색 + 8px 원형 도트
  - 완료/대기: border `--border-color`
- phase-name: 600 weight
- phase-desc: 13px secondary

#### Security Audit Log
- section-title: `SECURITY AUDIT LOG` + `LAST CHECK: 4H AGO`
- audit-log: 1px gap 줄무늬 (배경 #333)
- audit-row: `grid-template-columns: 100px 1fr 80px`
- header row: secondary uppercase 700
- status-tag: 10px, border 1px
  - `.pass`: border #00FF00, color #00FF00
  - 기본: border #333

### 우: Assigned Nodes + Task Checklist

#### Assigned Nodes
- node-mini-card: border 1px, 가로 정렬 (이름 + 녹색 도트)
- 녹색 도트: 6x6px, `#00FF00`

#### Task Checklist
- check-item: mono 12px, flex 가로
- check-box: 14x14px, border 1px
  - checked: `■` 10px 텍스트
- done 항목: secondary + line-through

## 모바일 반응형
- project-grid: 1열 수직 스택 (좌측 먼저, 우측 아래)
- phase-item: 1열 (meta 위, box 아래)
- audit-row: 가로 스크롤 또는 카드 변환