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/components/StatusBar.tsx

@@ -4,10 +4,9 @@
 import { useState, useEffect } from 'react'
 import { Box, Typography } from '@mui/material'
 import { Led } from './ds'
+import { d3roPalette, d3roFontMono } from '../theme'
 import type { LLMStatus } from '@shared/types'
 
-const MONO = 'MONO_PLACEHOLDER'
-
 export function StatusBar(): React.ReactElement {
   const [llmStatus, setLlmStatus] = useState<LLMStatus | null>(null)
 
@@ -36,27 +35,27 @@ export function StatusBar(): React.ReactElement {
         gap: 2,
         px: 2,
         py: 0.5,
-        borderTop: '1px solid rgba(255,255,255,0.04)',
-        bgcolor: '#1e1f21',
+        borderTop: `1px solid ${d3roPalette.border.subtle}`,
+        bgcolor: d3roPalette.bg.sidebar,
         minHeight: 28,
       }}
     >
       <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
         <Led color={connected ? 'green' : 'red'} size={6} />
-        <Typography sx={{ fontFamily: MONO, fontSize: '9px', color: '#77797c', letterSpacing: '1px', fontWeight: 700 }}>
+        <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.inactive, letterSpacing: '1px', fontWeight: 700 }}>
           {connected ? 'OLLAMA' : 'OFFLINE'}
         </Typography>
       </Box>
 
       {llmStatus?.activeModel && (
-        <Typography sx={{ fontFamily: MONO, fontSize: '9px', color: '#5c2615', letterSpacing: '0.5px' }}>
+        <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.dimLabel, letterSpacing: '0.5px' }}>
           {llmStatus.activeModel.toUpperCase()}
         </Typography>
       )}
 
       <Box sx={{ flex: 1 }} />
 
-      <Typography sx={{ fontFamily: MONO, fontSize: '9px', color: '#3a3b3f', letterSpacing: '1px', fontWeight: 700 }}>
+      <Typography sx={{ fontFamily: d3roFontMono, fontSize: '9px', color: d3roPalette.text.muted, letterSpacing: '1px', fontWeight: 700 }}>
         PRECISION DATA LINK
       </Typography>
     </Box>