Phase 8: SSOT 리팩토링 + HotkeyRecordModal + Dashboard 재작성

- d3roPalette 11개 토큰 추가 (sidebar, chassis, inactive 등)
- DS 컴포넌트 6개 + 페이지 5개 매직넘버 → 팔레트 참조 (0개 잔여)
- HotkeyRecordModal 신규: 커스텀 핫키 녹화 모달
- SettingsModal 재작성: 음성 모드 3개(받아쓰기/Agent/원터치) + 핫키 변경
- DashboardPage 재작성: Hero + 통계 4카드 + CRT 서비스 상태 + 히스토리 날짜 그룹핑
- recording-tip 색상 수정: #1F5DF2(파란) → #f25b29(앰버)
- 설계 문서: phase-8.md, speakly-settings-ui.md

src/renderer/theme.ts

@@ -12,6 +12,11 @@ export const d3roPalette = {
     cardHover: '#2a2a2d',
     elevated: '#2e2e32',
     input: '#1e1e21',
+    sidebar: '#1e1f21',
+    inset: '#1b1c1e',
+    chassis: '#242528',
+    crtBezel: '#1a1a1c',
+    crtGlass: '#050605',
   },
   accent: {
     amber: '#f25b29',
@@ -27,12 +32,20 @@ export const d3roPalette = {
     redBg: 'rgba(239, 68, 68, 0.12)',
     green: '#22c55e',
     greenBg: 'rgba(34, 197, 94, 0.12)',
+    greenGlow: 'rgba(34, 197, 94, 0.6)',
+    redGlow: 'rgba(239, 68, 68, 0.6)',
+    orangeGlow: 'rgba(245, 158, 11, 0.6)',
   },
   text: {
     primary: '#ffffff',
     secondary: '#8e8e93',
     label: '#7c7c82',
     disabled: '#4a4a4e',
+    engraving: '#1a1a1c',
+    inactive: '#77797c',
+    dimLabel: '#5c2615',
+    muted: '#3a3b3f',
+    hover: '#aaaaaa',
   },
   border: {
     subtle: 'rgba(255, 255, 255, 0.04)',
@@ -45,6 +58,9 @@ export const d3roPalette = {
     scanline: 'rgba(0, 0, 0, 0.15)',
     bg: '#242528',
   },
+  led: {
+    off: '#111111',
+  },
 } as const
 
 export const d3roFontSans = [
@@ -59,20 +75,20 @@ export const d3roFontMono = [
 
 // ── 모드별 변동 팔레트 ────────────────────────────────────
 interface ModePalette {
-  bg: { app: string; card: string; cardHover: string; elevated: string; input: string }
-  text: { primary: string; secondary: string; label: string; disabled: string }
+  bg: { app: string; card: string; cardHover: string; elevated: string; input: string; sidebar: string; inset: string; chassis: string; crtBezel: string; crtGlass: string }
+  text: { primary: string; secondary: string; label: string; disabled: string; engraving: string; inactive: string; dimLabel: string; muted: string; hover: string }
   border: { subtle: string; default: string; strong: string }
 }
 
 const darkPalette: ModePalette = {
-  bg: { app: '#19191b', card: '#242427', cardHover: '#2a2a2d', elevated: '#2e2e32', input: '#1e1e21' },
-  text: { primary: '#ffffff', secondary: '#8e8e93', label: '#7c7c82', disabled: '#4a4a4e' },
+  bg: { app: '#19191b', card: '#242427', cardHover: '#2a2a2d', elevated: '#2e2e32', input: '#1e1e21', sidebar: '#1e1f21', inset: '#1b1c1e', chassis: '#242528', crtBezel: '#1a1a1c', crtGlass: '#050605' },
+  text: { primary: '#ffffff', secondary: '#8e8e93', label: '#7c7c82', disabled: '#4a4a4e', engraving: '#1a1a1c', inactive: '#77797c', dimLabel: '#5c2615', muted: '#3a3b3f', hover: '#aaaaaa' },
   border: { subtle: 'rgba(255,255,255,0.04)', default: 'rgba(255,255,255,0.08)', strong: 'rgba(255,255,255,0.12)' },
 }
 
 const lightPalette: ModePalette = {
-  bg: { app: '#f5f5f7', card: '#ffffff', cardHover: '#fafafa', elevated: '#f0f0f2', input: '#ffffff' },
-  text: { primary: '#1a1a1c', secondary: '#6e6e73', label: '#8e8e93', disabled: '#c7c7cc' },
+  bg: { app: '#f5f5f7', card: '#ffffff', cardHover: '#fafafa', elevated: '#f0f0f2', input: '#ffffff', sidebar: '#eeeef0', inset: '#e8e8ea', chassis: '#e0e0e3', crtBezel: '#d0d0d3', crtGlass: '#f8f8fa' },
+  text: { primary: '#1a1a1c', secondary: '#6e6e73', label: '#8e8e93', disabled: '#c7c7cc', engraving: '#d0d0d3', inactive: '#8e8e93', dimLabel: '#c4845a', muted: '#b0b0b4', hover: '#555555' },
   border: { subtle: 'rgba(0,0,0,0.04)', default: 'rgba(0,0,0,0.08)', strong: 'rgba(0,0,0,0.12)' },
 }