---
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
```