feat(design): ITSM+Manager Variant style applied

ITSM (style.css):
- CSS tokens: indigo -> cyan(#00A0C8)+navy(#003366) palette
- Background: deeper navy (#001020, #001530, #001e3c)
- Sidebar active: cyan left bar + light bg (not full gradient)
- Buttons: solid cyan, rounded
- Logo icon: navy-to-cyan gradient

Manager (React):
- GNB: white header, navy branding, cyan badge
- Sidebar: white bg, cyan active border + light bg, navy text
- StatCard: cyan top bar, light blue icon box (screenshot9 pattern)
- AppLayout: navy page title

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

static/style.css

@@ -2,9 +2,8 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 /* ─── KWCAG 2.1 웹접근성 포커스 표시 (GS인증 필수) ─ */
-/* outline:none 대신 :focus-visible 로 키보드 포커스만 표시 */
 :focus-visible {
-  outline: 2px solid #818cf8 !important;
+  outline: 2px solid #00A0C8 !important;
   outline-offset: 2px !important;
   border-radius: 4px;
 }
@@ -14,53 +13,55 @@
 /* 스킵 네비게이션 (키보드 접근성) */
 .skip-nav {
   position: absolute; top: -60px; left: 8px; z-index: 99999;
-  background: #818cf8; color: #fff; padding: 8px 16px;
+  background: #00A0C8; color: #fff; padding: 8px 16px;
   border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600;
   transition: top .2s; text-decoration: none;
 }
 .skip-nav:focus { top: 0; }
 
-/* ─── Design Tokens (Nifty Dark) ────────────────── */
+/* ─── Design Tokens (Variant Navy-Cyan Dark) ────── */
 :root {
-  /* backgrounds */
+  /* backgrounds — Variant 딥네이비 계열 */
-  --main-bg:       #0f172a;
+  --main-bg:       #001020;
-  --sidebar-bg:    #1e293b;
+  --sidebar-bg:    #001530;
-  --card-bg:       #1e293b;
+  --card-bg:       #001e3c;
-  --card-inner:    #0f172a;
+  --card-inner:    #001020;
-  --input-bg:      #0f172a;
+  --input-bg:      #001530;
 
-  /* borders & shadows */
+  /* borders & shadows — 시안 계열 */
-  --border:        rgba(255,255,255,.07);
+  --border:        rgba(0,160,200,.15);
-  --shadow-sm:     0 2px 8px rgba(0,0,0,.3);
+  --border-strong: rgba(0,160,200,.30);
-  --shadow-md:     0 4px 20px rgba(0,0,0,.35);
+  --shadow-sm:     0 2px 8px rgba(0,10,30,.4);
-  --shadow-lg:     0 8px 40px rgba(0,0,0,.4);
+  --shadow-md:     0 4px 20px rgba(0,10,30,.45), 0 1px 4px rgba(0,160,200,.08);
+  --shadow-lg:     0 8px 40px rgba(0,10,30,.5),  0 2px 8px rgba(0,160,200,.12);
 
   /* text — KWCAG 2.1 AA 색상 대비 4.5:1 이상 보장 */
-  --text-bright:   #f8fafc;  /* 대비 15.8:1 (배경 #0f172a 대비) */
+  --text-bright:   #e8f4fd;  /* 대비 기준 유지 */
-  --text-primary:  #cbd5e1;  /* 대비 9.2:1 */
+  --text-primary:  #b8d4ea;
-  --text-muted:    #94a3b8;  /* 대비 4.7:1 ✅ (기존 #64748b=3.1:1 → 개선) */
+  --text-muted:    #7ba7c4;
 
-  /* brand colors */
+  /* brand colors — Variant 팔레트 */
-  --accent:        #818cf8;
+  --accent:        #00A0C8;   /* 시안 메인 */
-  --accent-dark:   #6366f1;
+  --accent-dark:   #005A8C;   /* 미드블루 */
+  --brand-navy:    #003366;   /* 딥네이비 */
   --green:         #34d399;
   --yellow:        #fbbf24;
   --red:           #f87171;
   --orange:        #fb923c;
   --purple:        #a78bfa;
-  --cyan:          #22d3ee;
+  --cyan:          #00A0C8;
 
-  /* sidebar active */
+  /* sidebar active — 시안 강조 */
-  --sidebar-active-bg:    #6366f1;
+  --sidebar-active-bg:  rgba(0,160,200,.18);
-  --sidebar-hover-bg:     rgba(255,255,255,.06);
+  --sidebar-hover-bg:   rgba(0,160,200,.08);
 
-  /* typography */
+  /* typography — Pretendard 우선 */
-  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font: "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 
   /* radii */
   --radius:    8px;
-  --radius-lg: 14px;
+  --radius-lg: 12px;
-  --radius-xl: 20px;
+  --radius-xl: 18px;
 }
 
 /* ─── Base ──────────────────────────────────────── */
@@ -93,10 +94,10 @@ html, body {
 }
 .logo-icon {
   width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
-  background: linear-gradient(135deg, var(--accent-dark), #8b5cf6);
+  background: linear-gradient(135deg, #005A8C, #00A0C8);
   color: #fff; font-size: 20px; font-weight: 900;
   display: flex; align-items: center; justify-content: center;
-  box-shadow: 0 4px 14px rgba(99,102,241,.45);
+  box-shadow: 0 4px 14px rgba(0,160,200,.35);
 }
 .logo-title { font-size: 16px; font-weight: 800; color: var(--text-bright); letter-spacing: -.01em; }
 .logo-sub   { font-size: 10px; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
@@ -117,9 +118,10 @@ html, body {
 }
 .nav-item:hover  { background: var(--sidebar-hover-bg); color: var(--text-primary); }
 .nav-item.active {
-  background: linear-gradient(90deg, var(--accent-dark), #8b5cf6);
+  background: var(--sidebar-active-bg);
-  color: #fff; font-weight: 600;
+  color: var(--accent); font-weight: 700;
-  box-shadow: 0 4px 14px rgba(99,102,241,.35);
+  border-left: 3px solid var(--accent);
+  padding-left: 9px;
 }
 .nav-icon { font-size: 16px; width: 20px; text-align: center; }
 
@@ -216,11 +218,12 @@ html, body {
 .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
 .btn:active { transform: none; }
 .btn-primary {
-  background: linear-gradient(135deg, var(--accent-dark), #8b5cf6);
+  background: var(--accent);
   color: #fff; border-color: transparent;
-  box-shadow: 0 2px 10px rgba(99,102,241,.35);
+  box-shadow: 0 2px 10px rgba(0,160,200,.3);
+  border-radius: var(--radius);
 }
-.btn-primary:hover { box-shadow: 0 4px 18px rgba(99,102,241,.5); }
+.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 4px 18px rgba(0,160,200,.45); }
 .btn-secondary { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text-primary); }
 .btn-secondary:hover { background: rgba(255,255,255,.1); }
 .btn-approve { background: rgba(52,211,153,.15); color: var(--green); border-color: rgba(52,211,153,.3); }
@@ -290,7 +293,7 @@ html, body {
 .stat-card.purple  .stat-value { color: var(--purple);  }
 .stat-card.orange  .stat-value { color: var(--orange);  }
 .stat-card.cyan    .stat-value { color: var(--cyan);    }
-.stat-card.accent  .stat-icon  { background: rgba(129,140,248,.15); color: var(--accent); }
+.stat-card.accent  .stat-icon  { background: rgba(0,160,200,.15); color: var(--accent); }
 .stat-card.green   .stat-icon  { background: rgba(52,211,153,.15);  color: var(--green); }
 .stat-card.yellow  .stat-icon  { background: rgba(251,191,36,.15);  color: var(--yellow); }
 .stat-card.red     .stat-icon  { background: rgba(248,113,113,.15); color: var(--red); }