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>

frontend/src/components/common/StatCard.tsx

@@ -8,32 +8,58 @@ interface Props {
   onClick?: () => void
 }
 
-export function StatCard({ title, value, sub, icon, color = '#e8ecff', trend, onClick }: Props) {
+/* Variant 스타일 StatCard — screenshot9 카드 패턴 적용 */
+export function StatCard({ title, value, sub, icon, color = '#E8F0F8', trend, onClick }: Props) {
   return (
-    <div onClick={onClick} style={{
+    <div
-      background: '#fff', border: '1px solid #e2e8f0',
+      onClick={onClick}
-      borderRadius: 10, padding: '20px 22px',
+      style={{
-      cursor: onClick ? 'pointer' : 'default',
+        background: '#ffffff',
-      transition: 'box-shadow .15s',
+        border: '1px solid #E2E8F0',
-    }}
+        borderTop: '3px solid #00A0C8',   /* 상단 시안 바 */
-    onMouseEnter={e => { if (onClick) (e.currentTarget as HTMLDivElement).style.boxShadow = '0 4px 16px rgba(0,0,0,.1)' }}
+        borderRadius: 12,
-    onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.boxShadow = 'none' }}
+        padding: '20px 22px',
+        cursor: onClick ? 'pointer' : 'default',
+        transition: 'all .2s',
+        boxShadow: '0 2px 8px rgba(0,51,102,.06)',
+      }}
+      onMouseEnter={e => {
+        const el = e.currentTarget as HTMLDivElement
+        el.style.boxShadow = '0 8px 24px rgba(0,51,102,.12)'
+        el.style.transform = 'translateY(-2px)'
+      }}
+      onMouseLeave={e => {
+        const el = e.currentTarget as HTMLDivElement
+        el.style.boxShadow = '0 2px 8px rgba(0,51,102,.06)'
+        el.style.transform = 'translateY(0)'
+      }}
     >
-      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
+        {/* 아이콘 박스 — screenshot9 연파랑 박스 스타일 */}
         <div style={{
-          width: 46, height: 46, borderRadius: 10, background: color,
+          width: 48, height: 48, borderRadius: 10,
+          background: '#E8F0F8',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
           fontSize: 22, flexShrink: 0,
         }}>{icon}</div>
         <div style={{ flex: 1 }}>
-          <div style={{ fontSize: 26, fontWeight: 700, lineHeight: 1.2 }}>{value}</div>
+          <div style={{ fontSize: 11, fontWeight: 700, color: '#00A0C8',
-          <div style={{ fontSize: 12, color: '#64748b', marginTop: 2 }}>{title}</div>
+            letterSpacing: '.08em', textTransform: 'uppercase', marginBottom: 4 }}>
-          {sub && <div style={{ fontSize: 11, color: '#94a3b8' }}>{sub}</div>}
+            {title}
+          </div>
+          <div style={{ fontSize: 28, fontWeight: 800, lineHeight: 1.1,
+            color: '#003366', letterSpacing: '-.02em' }}>
+            {value}
+          </div>
+          {sub && <div style={{ fontSize: 11, color: '#94A3B8', marginTop: 3 }}>{sub}</div>}
         </div>
       </div>
       {trend && (
-        <div style={{ marginTop: 10, fontSize: 11,
+        <div style={{
-          color: trend.up ? '#16a34a' : '#dc2626' }}>
+          marginTop: 12, fontSize: 12, fontWeight: 600,
+          color: trend.up ? '#16a34a' : '#dc2626',
+          display: 'flex', alignItems: 'center', gap: 4,
+        }}>
           {trend.up ? '▲' : '▼'} {Math.abs(trend.val)}% 전주 대비
         </div>
       )}

frontend/src/components/layout/AppLayout.tsx

@@ -35,7 +35,7 @@ export function AppLayout() {
         <main style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
           {/* 페이지 타이틀 바 */}
           <div style={{
-            padding: '14px 28px', background: '#fff',
+            padding: '12px 28px', background: '#ffffff',
             borderBottom: '1px solid #e2e8f0',
             display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
           }}>

frontend/src/components/layout/GNB.tsx

@@ -12,34 +12,53 @@ export function GNB() {
 
   return (
     <header style={{
-      height: 'var(--gnb-h)', background: 'var(--gnb-bg)',
+      height: 'var(--gnb-h)',
+      background: '#ffffff',
+      borderBottom: '1px solid #E2E8F0',
+      boxShadow: '0 1px 8px rgba(0,51,102,.06)',
       display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-      padding: '0 20px', flexShrink: 0, position: 'sticky', top: 0, zIndex: 100,
+      padding: '0 24px', flexShrink: 0, position: 'sticky', top: 0, zIndex: 100,
     }}>
-      {/* 로고 */}
+      {/* 로고 — Variant 스타일 */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-        <span style={{ fontSize: 20 }}>🛡️</span>
+        <div style={{
-        <span style={{ color: '#fff', fontWeight: 700, fontSize: 15 }}>GUARDiA Manager</span>
+          width: 32, height: 32, borderRadius: 8,
-        <span style={{ color: '#7c85a8', fontSize: 11, marginLeft: 4 }}>v2.0</span>
+          background: 'linear-gradient(135deg, #003366, #00A0C8)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          color: '#fff', fontWeight: 900, fontSize: 16, flexShrink: 0,
+        }}>G</div>
+        <span style={{ color: '#003366', fontWeight: 800, fontSize: 15, letterSpacing: '-.01em' }}>
+          GUARDiA Manager
+        </span>
+        <span style={{
+          fontSize: 10, fontWeight: 700, color: '#00A0C8',
+          background: 'rgba(0,160,200,.1)', borderRadius: 20,
+          padding: '2px 8px', letterSpacing: '.04em',
+        }}>v2.0</span>
       </div>
 
       {/* 우측 */}
       <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-        <a href="http://zioinfo.co.kr:8001" target="_blank" rel="noreferrer"
+        <a href="http://zioinfo.co.kr:8443" target="_blank" rel="noreferrer"
-          style={{ color: '#7c85a8', fontSize: 11, display: 'flex', alignItems: 'center', gap: 4 }}>
+          style={{
+            color: '#64748B', fontSize: 12, display: 'flex', alignItems: 'center', gap: 4,
+            textDecoration: 'none', padding: '5px 10px', borderRadius: 6,
+            border: '1px solid #E2E8F0',
+          }}>
           🌐 ITSM 바로가기
         </a>
         {user && (
           <>
             <span style={{
-              background: '#4f6ef7', color: '#fff',
+              background: 'rgba(0,90,140,.08)', color: '#005A8C',
-              padding: '3px 12px', borderRadius: 20, fontSize: 11, fontWeight: 600,
+              padding: '4px 14px', borderRadius: 20, fontSize: 12, fontWeight: 600,
+              border: '1px solid rgba(0,90,140,.18)',
             }}>
               👤 {user.display_name ?? user.username}
             </span>
             <button onClick={logout} style={{
-              background: 'transparent', border: '1px solid rgba(255,255,255,.2)',
+              background: 'transparent', border: '1px solid #E2E8F0',
-              color: '#b0b7cc', padding: '4px 12px', borderRadius: 6, fontSize: 12, cursor: 'pointer',
+              color: '#64748B', padding: '5px 12px', borderRadius: 6, fontSize: 12, cursor: 'pointer',
             }}>로그아웃</button>
           </>
         )}

frontend/src/components/layout/Sidebar.tsx

@@ -37,42 +37,66 @@ const NAV: NavItem[] = [
   ]},
 ]
 
+/* Variant 스타일 색상 상수 */
+const V = {
+  navy:    '#003366',
+  blue:    '#005A8C',
+  cyan:    '#00A0C8',
+  cyanLt:  'rgba(0,160,200,.10)',
+  cyanAct: 'rgba(0,160,200,.15)',
+  muted:   '#64748B',
+  text:    '#334155',
+  border:  '#E2E8F0',
+  bg:      '#F8FAFC',
+}
+
 function NavGroup({ item }: { item: NavItem }) {
   const [open, setOpen] = useState(true)
+
   if (!item.children) {
     return (
       <NavLink to={item.path!} style={({ isActive }) => ({
         display: 'flex', alignItems: 'center', gap: 8,
-        padding: '8px 16px', fontSize: 13, color: isActive ? '#1a3a6b' : '#475569',
+        padding: '8px 16px', fontSize: 13,
-        background: isActive ? '#dde4f5' : 'transparent',
+        color: isActive ? V.navy : V.muted,
-        borderLeft: isActive ? '3px solid #4f6ef7' : '3px solid transparent',
+        background: isActive ? V.cyanAct : 'transparent',
+        borderLeft: isActive ? `3px solid ${V.cyan}` : '3px solid transparent',
+        fontWeight: isActive ? 700 : 400,
         transition: 'all .15s',
+        textDecoration: 'none',
       })}>
         <span style={{ width: 18, textAlign: 'center' }}>{item.icon}</span>
         {item.label}
       </NavLink>
     )
   }
+
   return (
     <div>
       <button onClick={() => setOpen(o => !o)} style={{
         width: '100%', display: 'flex', alignItems: 'center', gap: 8,
-        padding: '8px 16px', fontSize: 13, color: '#1e293b', background: 'none',
+        padding: '8px 16px', fontSize: 13, color: V.navy, background: 'none',
-        border: 'none', cursor: 'pointer', fontWeight: 600,
+        border: 'none', cursor: 'pointer', fontWeight: 700,
+        letterSpacing: '-.01em',
       }}>
         <span style={{ width: 18, textAlign: 'center' }}>{item.icon}</span>
         {item.label}
-        <span style={{ marginLeft: 'auto', fontSize: 10, transition: 'transform .2s',
+        <span style={{
-          transform: open ? 'rotate(180deg)' : 'rotate(0)' }}>▾</span>
+          marginLeft: 'auto', fontSize: 9, color: V.cyan,
+          transition: 'transform .2s',
+          transform: open ? 'rotate(180deg)' : 'rotate(0)',
+        }}>▾</span>
       </button>
       {open && item.children.map(c => (
         <NavLink key={c.path} to={c.path!} style={({ isActive }) => ({
           display: 'flex', alignItems: 'center',
           padding: '7px 16px 7px 42px', fontSize: 12.5,
-          color: isActive ? '#1a3a6b' : '#64748b',
+          color: isActive ? V.navy : V.muted,
-          background: isActive ? '#dde4f5' : 'transparent',
+          background: isActive ? V.cyanAct : 'transparent',
-          borderLeft: isActive ? '3px solid #4f6ef7' : '3px solid transparent',
+          borderLeft: isActive ? `3px solid ${V.cyan}` : '3px solid transparent',
+          fontWeight: isActive ? 600 : 400,
           transition: 'all .15s',
+          textDecoration: 'none',
         })}>
           {c.label}
         </NavLink>
@@ -84,11 +108,24 @@ function NavGroup({ item }: { item: NavItem }) {
 export function Sidebar() {
   return (
     <aside style={{
-      width: 'var(--sidebar-w)', background: 'var(--sidebar-bg)',
+      width: 'var(--sidebar-w)',
-      borderRight: '1px solid var(--border)', height: '100%',
+      background: '#ffffff',
+      borderRight: `1px solid ${V.border}`,
+      height: '100%',
       display: 'flex', flexDirection: 'column', overflowY: 'auto',
+      boxShadow: '2px 0 12px rgba(0,51,102,.06)',
     }}>
-      <div style={{ padding: '14px 0', flex: 1 }}>
+      {/* 사이드바 헤더 */}
+      <div style={{
+        padding: '16px 16px 12px',
+        borderBottom: `1px solid ${V.border}`,
+      }}>
+        <div style={{ fontSize: 10, fontWeight: 700, color: V.cyan,
+          letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 2 }}>
+          Navigation
+        </div>
+      </div>
+      <div style={{ padding: '8px 0', flex: 1 }}>
         {NAV.map((item, i) => <NavGroup key={i} item={item} />)}
       </div>
     </aside>