feat: UI 표준화 Phase 1 - 네비게이션/헤더 통일

## 주요 변경사항

### 1. Design System 색상 업데이트
- 하늘색 계열 primary 색상으로 변경 (#0ea5e9, #38bdf8, #7dd3fc)
- CSS 변수 추가: --header-gradient

### 2. Navbar 컴포넌트 표준화
- 50개 이상의 하드코딩 값을 CSS 변수로 변경
- 모든 페이지에서 동일한 헤더 스타일 적용

### 3. 중복 코드 제거 (102줄)
- dashboard.html: 50줄 → 2줄 (navbar 컴포넌트로 교체)
- work/report-view.html: 54줄 → 2줄 (navbar 컴포넌트로 교체)
- modern-dashboard.css: 중복 헤더 스타일 제거
- project-management.css: 중복 헤더 스타일 제거

### 4. 표준 레이아웃 템플릿 생성
- dashboard-layout.html (대시보드용)
- work-layout.html (작업 페이지용)
- admin-layout.html (관리자 페이지용)
- simple-layout.html (프로필/설정용)
- templates/README.md (사용 가이드)

### 5. 누락된 design-system.css 추가
- work/report-view.html
- work/analysis.html
- admin/accounts.html

### 6. ES6 Module 문법 수정
- load-navbar.js: type="module" 추가
- modern-dashboard.js: navbar 엘리먼트 안전 처리

## 문서 업데이트
- CODING_GUIDE.md: 표준 컴포넌트 사용법 추가
- 개발 log/2026-01-20-ui-standardization-phase1.md: 상세 작업 로그

## 영향
- 수정: 10개 파일
- 신규: 6개 파일 (템플릿 5개 + 로그 1개)
- 코드 감소: -102줄

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

CODING_GUIDE.md

@@ -123,6 +123,74 @@ web-ui/pages/
 - 2차: `admin/index.html` (관리 허브)
 - 모든 페이지: navbar를 통해 profile, 작업 페이지로 이동 가능
 
+### 표준 컴포넌트 (2026-01-20 업데이트)
+
+#### 네비게이션 헤더
+모든 페이지는 표준 navbar 컴포넌트를 사용합니다:
+
+```html
+<!-- HTML에 컨테이너 추가 -->
+<div id="navbar-container"></div>
+
+<!-- 스크립트로 로드 -->
+<script src="/js/load-navbar.js"></script>
+```
+
+**특징**:
+- 자동으로 사용자 정보 표시 (이름, 역할)
+- 프로필 메뉴 (내 프로필, 비밀번호 변경, 로그아웃)
+- 관리자 전용 메뉴 자동 표시/숨김
+- 현재 시각 실시간 표시
+- 대시보드 버튼
+
+#### CSS 변수 시스템
+모든 스타일은 `design-system.css`의 CSS 변수를 사용합니다:
+
+```css
+/* 색상 - 하늘색 계열 primary */
+var(--primary-500)      /* 기본 하늘색: #0ea5e9 */
+var(--primary-400)      /* 밝은 하늘색: #38bdf8 */
+var(--header-gradient)  /* 헤더 그라디언트 */
+
+/* 간격 */
+var(--space-2)   /* 8px */
+var(--space-4)   /* 16px */
+var(--space-6)   /* 24px */
+
+/* 타이포그래피 */
+var(--text-sm)        /* 14px */
+var(--text-base)      /* 16px */
+var(--font-medium)    /* 500 */
+
+/* 기타 */
+var(--radius-md)         /* 8px 둥근 모서리 */
+var(--shadow-md)         /* 그림자 */
+var(--transition-fast)   /* 150ms */
+```
+
+**금지**: 하드코딩된 색상 값 사용 (`#0ea5e9` 대신 `var(--primary-500)` 사용)
+
+#### 페이지 레이아웃 템플릿
+`web-ui/templates/` 디렉토리에 4가지 표준 템플릿 제공:
+
+1. **dashboard-layout.html**: 메인 대시보드, 통계 페이지
+2. **work-layout.html**: 작업 관련 페이지 (보고서, 분석)
+3. **admin-layout.html**: 관리자 페이지 (테이블, CRUD)
+4. **simple-layout.html**: 프로필, 설정 등 단순 페이지
+
+새 페이지 생성 시:
+```bash
+# 템플릿 복사
+cp web-ui/templates/work-layout.html web-ui/pages/work/new-page.html
+
+# 내용 수정
+# - <title> 변경
+# - 페이지별 CSS/JS 추가
+# - 콘텐츠 작성
+```
+
+상세한 사용법은 `web-ui/templates/README.md` 참조.
+
 ---
 
 ## 📡 API 개발 가이드