feat(ui): Midnight Glass v2 전면 리디자인 — 기반+셸+대시보드

- theme.ts 재작성: glass/gradient/glow 토큰군, 기본 dark=Midnight(블루),
  6종 테마 변형 전부 파생 토큰 유지 (테마 시스템 보존)
- DS 리스킨(API 호환): 글래스 카드/버튼, Pretendard 타이포, 소프트 LED
- 신규: GradientWave(canvas 스펙트럼 음파), StatRing(컬러 링 타일)
- 보더리스: frame:false + 커스텀 TitleBar, 네이티브 스크롤바 제거(폭 불변)
  + OverlayScrollbars 오버레이 스크롤
- AppLayout 와이드 사이드바(lucide, 그라디언트 액티브 필), 대시보드 재구축,
  StatusBar(브랜드/로컬시간), Pretendard 번들, i18n +20키(ko/en)

packages/ui/src/components/ds/StatRing.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+// src/renderer/components/ds/StatRing.tsx
+// v2 신규: 컬러 그라디언트 링 아이콘 — 스탯 타일의 원형 링 (레퍼런스 4타일 패턴)
+
+import { Box } from '@mui/material'
+import { d3roPalette } from '../../theme'
+
+type RingColor = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'accent'
+
+const RING_COLORS: Record<RingColor, { from: string; to: string; glow: string; icon: string }> = {
+  blue:   { from: '#22d3ee', to: '#3b82f6', glow: 'rgba(59,130,246,0.35)', icon: d3roPalette.tag.blue },
+  purple: { from: '#8b5cf6', to: '#d946ef', glow: 'rgba(167,139,250,0.35)', icon: d3roPalette.tag.purple },
+  green:  { from: '#34d399', to: '#10b981', glow: 'rgba(52,211,153,0.35)', icon: d3roPalette.tag.green },
+  orange: { from: '#fbbf24', to: '#f97316', glow: 'rgba(251,146,60,0.35)', icon: d3roPalette.tag.orange },
+  red:    { from: '#f87171', to: '#ef4444', glow: 'rgba(248,113,113,0.35)', icon: d3roPalette.tag.red },
+  accent: { from: 'var(--d3-accent-light)', to: 'var(--d3-accent-dark)', glow: 'var(--d3-accent-dim)', icon: d3roPalette.accent.light },
+}
+
+interface StatRingProps {
+  /** 링 색 (기본 blue) */
+  color?: RingColor
+  /** 외경 px (기본 56) */
+  size?: number
+  /** 링 두께 px (기본 2) */
+  thickness?: number
+  /** 중앙 아이콘/콘텐츠 */
+  children?: React.ReactNode
+}
+
+export function StatRing({
+  color = 'blue',
+  size = 56,
+  thickness = 2,
+  children,
+}: StatRingProps): React.ReactElement {
+  const c = RING_COLORS[color]
+  return (
+    <Box
+      sx={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        p: `${thickness}px`,
+        background: `conic-gradient(from 210deg, ${c.from}, ${c.to}, ${c.from})`,
+        boxShadow: `0 0 ${size / 3.5}px ${c.glow}`,
+        flexShrink: 0,
+      }}
+    >
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          borderRadius: '50%',
+          bgcolor: d3roPalette.bg.crtGlass,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: c.icon,
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}