---
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 캡처 요청)