diff --git a/itsm/.claude/agents/itsm-ui-refactor.md b/itsm/.claude/agents/itsm-ui-refactor.md
new file mode 100644
index 00000000..6aef0271
--- /dev/null
+++ b/itsm/.claude/agents/itsm-ui-refactor.md
@@ -0,0 +1,37 @@
+---
+name: itsm-ui-refactor
+description: "GUARDiA ITSM UI 개편 에이전트. itsm/static/style.css 및 app.js를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 다크 테마 유지하면서 색상 토큰·카드·사이드바·버튼·테이블을 현대화."
+model: opus
+---
+
+# ITSM UI Refactor Agent
+
+## 대상 파일
+- `itsm/static/style.css` — 전체 다크 테마 CSS
+- `itsm/static/login.css` — 로그인 페이지
+- `itsm/static/app.js` — 동적 UI 생성 코드
+
+## Variant 스타일 적용 원칙
+
+### 색상 토큰 (screenshot 참조)
+```css
+/* 기존 → 변경 */
+--primary: #4f8ef7 → #005A8C /* 미드블루 */
+--accent: #818cf8 → #00A0C8 /* 시안 */
+--main-bg: #0f172a → #001a33 /* 딥네이비 배경 */
+--card-bg: #1e293b → #0d2647 /* 카드 배경 */
+--sidebar-bg: #1a1d3e → #002040 /* 사이드바 */
+--border: #334155 → rgba(0,160,200,.15) /* 시안 계열 테두리 */
+```
+
+### 개편 우선순위
+1. **사이드바**: 배경 딥네이비, 활성 항목 시안 좌측 바, 아이콘 정렬
+2. **카드**: 그림자 개선 (`box-shadow: 0 4px 20px rgba(0,90,140,.2)`), 반경 12px
+3. **버튼**: Primary → 시안(#00A0C8), 둥근 radius
+4. **테이블**: 헤더 배경 딥네이비, 호버 시안 계열
+5. **대시보드 통계 카드**: 상단 색상 바 (시안)
+6. **로그인 페이지**: 다크 배경 + 중앙 카드 + 로고
+
+## 팀 통신
+- 수신: guardia-design-orchestrator
+- 발신: visual-qa-tester (before/after 캡처 요청)
diff --git a/itsm/.claude/agents/manager-ui-refactor.md b/itsm/.claude/agents/manager-ui-refactor.md
new file mode 100644
index 00000000..2703a892
--- /dev/null
+++ b/itsm/.claude/agents/manager-ui-refactor.md
@@ -0,0 +1,43 @@
+---
+name: manager-ui-refactor
+description: "GUARDiA Manager UI 개편 에이전트. manager/frontend/src/ React+TypeScript 컴포넌트를 Variant 스타일(C:/GUARDiA/screenshot 참조)로 개편. 라이트 테마 유지, NCloud 콘솔 패턴 강화."
+model: opus
+---
+
+# Manager UI Refactor Agent
+
+## 대상 파일
+- `manager/frontend/src/components/layout/Sidebar.tsx`
+- `manager/frontend/src/components/layout/GNB.tsx`
+- `manager/frontend/src/components/common/StatCard.tsx`
+- `manager/frontend/src/components/common/DataTable.tsx`
+- `manager/frontend/src/pages/Dashboard.tsx`
+- CSS-in-JS 스타일 전반
+
+## Variant 스타일 적용 원칙
+
+### 색상 (screenshot 기준)
+```
+Primary: #003366 (딥네이비)
+Accent: #00A0C8 (시안)
+BG: #F8FAFC (라이트 그레이)
+Card: #FFFFFF + shadow
+Border: #E2E8F0
+```
+
+### 개편 우선순위
+1. **Sidebar**: 활성 항목 시안 좌측 바 + 네이비 텍스트, 그룹 헤더 개선
+2. **GNB**: 화이트 배경 + 네이비 텍스트 + 시안 포인트
+3. **StatCard**: 상단 시안 바 + 변화율 표시, screenshot9 카드 스타일
+4. **Dashboard 레이아웃**: 3열 그리드, 카드 반경 12px, 그림자 개선
+5. **DataTable**: 헤더 딥네이비, 호버 연파랑, 페이지네이션 시안
+6. **Button**: 둥근 radius, 시안 primary / 네이비 secondary
+
+## screenshot 핵심 참조
+- screenshot9: 3×2 서비스 카드 (연파랑 아이콘 박스 + 딥네이비 텍스트)
+- screenshot10: 히어로 + 화이트 헤더 패턴
+- screenshot11: 파트너 로고 바 + 섹션 헤딩 스타일
+
+## 팀 통신
+- 수신: guardia-design-orchestrator
+- 발신: visual-qa-tester
diff --git a/itsm/.claude/skills/guardia-design-orchestrator/SKILL.md b/itsm/.claude/skills/guardia-design-orchestrator/SKILL.md
new file mode 100644
index 00000000..11c40500
--- /dev/null
+++ b/itsm/.claude/skills/guardia-design-orchestrator/SKILL.md
@@ -0,0 +1,118 @@
+---
+name: guardia-design-orchestrator
+description: "GUARDiA ITSM + Manager UI 전면 디자인 개편 오케스트레이터. C:/GUARDiA/screenshot(Variant 스타일) 기준으로 ITSM 다크테마 + Manager 라이트테마를 동시에 개편하고 Playwright MCP로 Before/After 검증. 다음 상황에서 반드시 사용: (1) 'ITSM 디자인 바꿔줘', 'Manager UI 개편', 'GUARDiA 디자인 전면 개편'; (2) screenshot 스타일 적용; (3) Before/After 시각적 QA; (4) 다시 실행, 업데이트, 수정, 보완."
+---
+
+# GUARDiA 디자인 개편 오케스트레이터
+
+**실행 모드:** 병렬 서브에이전트 — itsm-ui-refactor + manager-ui-refactor 동시 실행
+
+---
+
+## 레퍼런스 스크린샷
+
+```
+C:\GUARDiA\screenshot\
+├── screenshot1.png — 히어로 + 화이트헤더 + 로고
+├── screenshot2.png — 서비스 섹션 3열 카드
+├── screenshot3.png — 통계 + 다크CTA 카드
+├── screenshot5.png — 포트폴리오 (다크네이비 배경)
+├── screenshot8.png — 아이콘 색상 팔레트 (#003366 #005A8C #00A0C8)
+├── screenshot9.png — 3×2 서비스 카드 (연파랑 아이콘박스)
+├── screenshot10.png — 히어로 (라이트 배경 + 다크 텍스트)
+└── screenshot11.png — 화이트 헤더 + 파트너 바
+```
+
+**핵심 색상 (screenshot8):**
+- `#003366` 딥네이비 (Primary)
+- `#005A8C` 미드블루 (Secondary)
+- `#00A0C8` 시안 (Accent/Point)
+
+---
+
+## Phase 0: 컨텍스트 확인
+
+- `itsm/static/style.css` 읽기 → 기존 CSS 변수 파악
+- `manager/frontend/src/components/layout/Sidebar.tsx` 읽기 → 현재 구조 파악
+- Before 스크린샷 캡처 (Playwright MCP):
+ - `https://zioinfo.co.kr:8443` — ITSM 로그인 + 대시보드
+ - `https://zioinfo.co.kr:8090` — Manager 대시보드
+
+---
+
+## Phase 1: ITSM 개편 (itsm-ui-refactor)
+
+`itsm-design-overhaul` 스킬 참조.
+
+**작업 순서:**
+```
+1. itsm/static/style.css — CSS 변수 전체 교체
+2. 사이드바 스타일 업데이트
+3. 카드·버튼·테이블 스타일
+4. itsm/static/login.css — 로그인 페이지
+5. 배포: rsync → systemctl restart guardia
+```
+
+---
+
+## Phase 2: Manager 개편 (manager-ui-refactor)
+
+`manager-design-overhaul` 스킬 참조.
+
+**작업 순서:**
+```
+1. manager/frontend/src/ CSS 변수 추가
+2. Sidebar.tsx 스타일 업데이트
+3. GNB.tsx 화이트 헤더
+4. StatCard.tsx 시안 바 + 아이콘박스
+5. DataTable.tsx 헤더 네이비
+6. Dashboard.tsx 레이아웃
+7. npm run build → /var/www/manager/ 배포
+```
+
+---
+
+## Phase 3: 시각적 QA (visual-qa-tester)
+
+Playwright MCP로 After 캡처 + Before 비교.
+
+```
+After 캡처:
+- ITSM: 로그인 / 대시보드 / SR 목록 / 인시던트
+- Manager: 대시보드 / 서버 목록 / 스크랩핑 관리
+
+검증:
+□ 색상 토큰 준수 (#003366 / #00A0C8)
+□ 카드 그림자·반경 일관성
+□ 테이블 헤더 스타일
+□ 반응형 768px
+□ 로그인 페이지
+```
+
+---
+
+## 배포 스크립트
+
+```python
+# C:\GUARDiA\deploy_itsm_design.py (ITSM)
+# C:\GUARDiA\deploy_manager_design.py (Manager)
+# SSH → 파일 업로드 → systemctl restart
+```
+
+---
+
+## 테스트 시나리오
+
+**정상:** style.css 변수 교체 → ITSM 재시작 → 시안 색상 적용 확인
+**에러:** CSS 변수 누락 → fallback 색상으로 표시 → 변수명 확인
+
+---
+
+## should-trigger
+
+- "ITSM 디자인 바꿔줘"
+- "Manager UI screenshot 스타일로"
+- "GUARDiA 전체 디자인 개편"
+- "ITSM 색상 변경"
+- "관리자 시스템 UI 개선"
+- "before/after 비교 스크린샷"
diff --git a/itsm/.claude/skills/itsm-design-overhaul/SKILL.md b/itsm/.claude/skills/itsm-design-overhaul/SKILL.md
new file mode 100644
index 00000000..484d8bc6
--- /dev/null
+++ b/itsm/.claude/skills/itsm-design-overhaul/SKILL.md
@@ -0,0 +1,140 @@
+---
+name: itsm-design-overhaul
+description: "GUARDiA ITSM UI(itsm/static/) Variant 스타일 개편 스킬. C:/GUARDiA/screenshot 기준 색상·카드·사이드바·버튼·테이블을 현대화. 다크 테마 유지. 다음 상황에서 반드시 사용: (1) 'ITSM 디자인 바꿔줘', 'ITSM UI 개편'; (2) style.css 색상 토큰 변경; (3) 사이드바·카드·버튼 스타일 개선; (4) 다시 실행, 업데이트, 보완."
+---
+
+# GUARDiA ITSM UI 개편 스킬
+
+## 레퍼런스
+- `C:\GUARDiA\screenshot\` — Variant 디자인 스크린샷 13장
+- 핵심: screenshot9(서비스카드), screenshot10(히어로), screenshot11(섹션)
+- 적용 파일: `itsm/static/style.css`, `login.css`
+
+## 색상 토큰 변환 (style.css :root)
+
+```css
+:root {
+ /* ── Variant 색상 적용 ── */
+ --primary: #00A0C8; /* 시안 — 버튼·링크·강조 */
+ --primary-dark: #005A8C; /* 미드블루 — hover */
+ --accent: #29B8D8; /* 밝은 시안 — 포인트 */
+ --brand-navy: #003366; /* 딥네이비 — 중요 UI */
+ --brand-blue: #005A8C; /* 미드블루 */
+
+ /* 배경 (다크 테마 유지) */
+ --main-bg: #001020; /* 더 깊은 네이비 배경 */
+ --card-bg: #001e3c; /* 카드 배경 */
+ --sidebar-bg: #001530; /* 사이드바 */
+ --header-bg: #001020; /* 헤더 */
+
+ /* 텍스트 */
+ --text-main: #e8f0f8; /* 메인 텍스트 */
+ --text-muted: #7ba7c4; /* 보조 텍스트 */
+
+ /* 테두리 */
+ --border: rgba(0,160,200,.15); /* 시안 계열 */
+ --border-strong: rgba(0,160,200,.30);
+
+ /* 그림자 */
+ --shadow-card: 0 4px 20px rgba(0,30,60,.4), 0 1px 4px rgba(0,160,200,.1);
+
+ /* 반경 */
+ --radius-card: 12px;
+ --radius-btn: 8px;
+ --radius-sm: 6px;
+}
+```
+
+## 사이드바 개편
+
+```css
+#sidebar {
+ background: var(--sidebar-bg);
+ border-right: 1px solid var(--border);
+ box-shadow: 4px 0 20px rgba(0,0,0,.3);
+}
+#sidebar-logo { border-bottom: 1px solid var(--border); padding: 18px 20px; }
+.nav-item { border-radius: var(--radius-sm); margin: 2px 8px; }
+.nav-item:hover { background: rgba(0,160,200,.1); color: var(--primary); }
+.nav-item.active {
+ background: rgba(0,160,200,.15);
+ border-left: 3px solid var(--primary);
+ color: var(--primary);
+ font-weight: 600;
+}
+```
+
+## 카드 개편
+
+```css
+.card, .stat-card, .dashboard-card {
+ background: var(--card-bg);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-card);
+ box-shadow: var(--shadow-card);
+ transition: box-shadow .25s, border-color .25s;
+}
+.card:hover { border-color: var(--border-strong); box-shadow: 0 8px 32px rgba(0,30,60,.5); }
+
+/* 통계 카드 상단 컬러 바 */
+.stat-card { border-top: 3px solid var(--primary); }
+```
+
+## 버튼 개편
+
+```css
+.btn-primary {
+ background: var(--primary);
+ border-radius: var(--radius-btn);
+ font-weight: 600;
+ transition: all .2s;
+}
+.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(0,160,200,.3); }
+.btn-secondary {
+ background: transparent;
+ border: 1.5px solid var(--primary);
+ color: var(--primary);
+ border-radius: var(--radius-btn);
+}
+```
+
+## 테이블 개편
+
+```css
+.table thead th {
+ background: rgba(0,30,60,.6);
+ color: var(--text-muted);
+ font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+ border-bottom: 1px solid var(--border);
+}
+.table tbody tr:hover { background: rgba(0,160,200,.05); }
+.table td { border-bottom: 1px solid rgba(0,160,200,.08); }
+```
+
+## 로그인 페이지 개편
+
+```css
+/* login.css */
+.login-page {
+ background: linear-gradient(135deg, #001020 0%, #002040 60%, #003060 100%);
+ min-height: 100vh; display: flex; align-items: center; justify-content: center;
+}
+.login-card {
+ background: rgba(0,30,60,.8);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(0,160,200,.2);
+ border-radius: 16px;
+ box-shadow: 0 20px 60px rgba(0,0,0,.5);
+ padding: 48px 40px; width: 400px;
+}
+.login-title { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 8px; }
+.login-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
+```
+
+## 배포 방법
+
+```bash
+# ITSM 서버 적용
+python C:\GUARDiA\deploy_itsm_design.py
+systemctl restart guardia
+```
diff --git a/itsm/.claude/skills/manager-design-overhaul/SKILL.md b/itsm/.claude/skills/manager-design-overhaul/SKILL.md
new file mode 100644
index 00000000..bb978983
--- /dev/null
+++ b/itsm/.claude/skills/manager-design-overhaul/SKILL.md
@@ -0,0 +1,132 @@
+---
+name: manager-design-overhaul
+description: "GUARDiA Manager UI(manager/frontend/src/) Variant 스타일 개편 스킬. C:/GUARDiA/screenshot 기준 라이트 테마 + 네이비/시안 Variant 색상 적용. 다음 상황에서 반드시 사용: (1) 'Manager 디자인 바꿔줘', 'Manager UI 개편'; (2) Sidebar·StatCard·DataTable 스타일 변경; (3) Dashboard 레이아웃 개선; (4) 다시 실행, 업데이트, 보완."
+---
+
+# GUARDiA Manager UI 개편 스킬
+
+## 레퍼런스
+- `C:\GUARDiA\screenshot\` — Variant 디자인 스크린샷
+- 핵심: screenshot9(서비스카드 3×2), screenshot10(화이트헤더+히어로), screenshot11(파트너바+섹션)
+- 적용 위치: `manager/frontend/src/`
+
+## 글로벌 CSS 변수 (App.tsx 또는 global.css)
+
+```css
+:root {
+ --m-navy: #003366; /* 딥네이비 */
+ --m-blue: #005A8C; /* 미드블루 */
+ --m-cyan: #00A0C8; /* 시안 포인트 */
+ --m-cyan-lt: #E8F7FB; /* 연시안 배경 */
+ --m-blue-lt: #E8F0F8; /* 연파랑 배경 */
+ --m-bg: #F8FAFC; /* 페이지 배경 */
+ --m-card: #FFFFFF; /* 카드 배경 */
+ --m-border: #E2E8F0; /* 테두리 */
+ --m-text: #1E293B; /* 메인 텍스트 */
+ --m-muted: #64748B; /* 보조 텍스트 */
+ --m-shadow: 0 4px 12px rgba(0,51,102,.08);
+ --m-radius: 12px;
+}
+```
+
+## Sidebar.tsx 개편
+
+```tsx
+// 활성 메뉴 스타일 (CSS-in-JS)
+const activeStyle = {
+ background: 'var(--m-blue-lt)',
+ color: 'var(--m-navy)',
+ borderLeft: '3px solid var(--m-cyan)',
+ fontWeight: 700,
+};
+const hoverStyle = {
+ background: 'var(--m-blue-lt)',
+ color: 'var(--m-navy)',
+};
+// 섹션 헤더
+const sectionHeader = {
+ fontSize: 10, fontWeight: 700,
+ letterSpacing: '.1em', textTransform: 'uppercase',
+ color: 'var(--m-cyan)', padding: '12px 16px 4px',
+};
+```
+
+## StatCard.tsx 개편 (screenshot9 카드 스타일)
+
+```tsx
+// Variant 서비스 카드 패턴 적용
+const cardStyle = {
+ background: '#fff',
+ borderRadius: 'var(--m-radius)',
+ border: '1px solid var(--m-border)',
+ boxShadow: 'var(--m-shadow)',
+ padding: '24px',
+ borderTop: '3px solid var(--m-cyan)', // 상단 시안 바
+ transition: 'all .25s',
+};
+// 아이콘 박스 (screenshot9 연파랑 박스)
+const iconBoxStyle = {
+ width: 52, height: 52,
+ background: 'var(--m-blue-lt)',
+ borderRadius: 10,
+ display: 'flex', alignItems: 'center', justifyContent: 'center',
+ marginBottom: 16,
+};
+```
+
+## DataTable.tsx 개편
+
+```tsx
+// 헤더 스타일
+const thStyle = {
+ background: 'var(--m-navy)',
+ color: 'rgba(255,255,255,.85)',
+ fontSize: 11, fontWeight: 700,
+ letterSpacing: '.06em', textTransform: 'uppercase',
+ padding: '10px 14px',
+};
+// 행 호버
+const trHoverStyle = { background: 'var(--m-blue-lt)' };
+// 페이지네이션 활성
+const pageActivStyle = {
+ background: 'var(--m-cyan)', color: '#fff',
+ borderRadius: 6, fontWeight: 700,
+};
+```
+
+## GNB.tsx 개편
+
+```tsx
+// 화이트 헤더 (screenshot10 패턴)
+const gnbStyle = {
+ background: '#fff',
+ borderBottom: '1px solid var(--m-border)',
+ boxShadow: '0 1px 8px rgba(0,51,102,.08)',
+};
+// 브랜드 텍스트
+const brandStyle = {
+ color: 'var(--m-navy)', fontWeight: 800, fontSize: 16,
+};
+```
+
+## Dashboard.tsx 레이아웃
+
+```tsx
+// 3열 StatCard 그리드
+
+ {/* StatCards */}
+
+// 차트 카드
+
+```
+
+## 배포 방법
+
+```bash
+cd manager/frontend && npm run build
+# 빌드 결과를 /var/www/manager/에 복사 후 재시작
+```
diff --git a/itsm/CLAUDE.md b/itsm/CLAUDE.md
index 3fd6c6a3..2aa9a4c7 100644
--- a/itsm/CLAUDE.md
+++ b/itsm/CLAUDE.md
@@ -157,6 +157,25 @@ C:\GUARDiA\
---
+## 하네스: GUARDiA 디자인 개편
+
+**목표:** C:\GUARDiA\screenshot (Variant 스타일) 기준으로 ITSM + Manager UI 전면 개편.
+색상 토큰 통일(#003366·#005A8C·#00A0C8), Playwright MCP Before/After 검증.
+
+**트리거:** ITSM·Manager 디자인 개편, 색상 변경, UI 스타일 변경 요청 시 `guardia-design-orchestrator` 스킬을 사용하라.
+
+**에이전트:**
+- `itsm-ui-refactor`: ITSM style.css 다크테마 개편
+- `manager-ui-refactor`: Manager React 컴포넌트 라이트테마 개편
+- `visual-qa-tester`: Playwright MCP Before/After 캡처·비교
+
+**변경 이력:**
+| 날짜 | 변경 내용 | 대상 | 사유 |
+|------|----------|------|------|
+| 2026-05-31 | 디자인 개편 하네스 초기 구성 | ITSM + Manager | Variant 스타일 적용 |
+
+---
+
## 파일 작성 규칙
- **CLAUDE.md 수정 시**: 반드시 Python `open(encoding='utf-8')` 또는 Write 도구 사용