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/AppLayout.tsx

@@ -15,6 +15,7 @@ import { DictionaryPage } from '../pages/DictionaryPage'
 import { CommandsPage } from '../pages/CommandsPage'
 import { SettingsModal } from './SettingsModal'
 import { StatusBar } from './StatusBar'
+import { d3roPalette, d3roFontMono } from '../theme'
 
 type Route = 'dashboard' | 'history' | 'dictionary' | 'commands'
 
@@ -30,15 +31,15 @@ export function AppLayout(): React.ReactElement {
   const [settingsOpen, setSettingsOpen] = useState(false)
 
   return (
-    <Box sx={{ display: 'flex', height: '100vh', flexDirection: 'column', bgcolor: '#19191b' }}>
+    <Box sx={{ display: 'flex', height: '100vh', flexDirection: 'column', bgcolor: d3roPalette.bg.app }}>
       <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
         {/* ── 사이드바: 인스트루먼트 섀시 스타일 ─── */}
         <Box
           sx={{
             width: 72,
             flexShrink: 0,
-            bgcolor: '#1e1f21',
-            borderRight: '1px solid rgba(255,255,255,0.04)',
+            bgcolor: d3roPalette.bg.sidebar,
+            borderRight: `1px solid ${d3roPalette.border.subtle}`,
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
@@ -52,9 +53,9 @@ export function AppLayout(): React.ReactElement {
             <Typography
               sx={{
                 fontSize: '8px',
-                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+                fontFamily: d3roFontMono,
                 letterSpacing: '1.5px',
-                color: '#5c2615',
+                color: d3roPalette.text.dimLabel,
                 fontWeight: 700,
               }}
             >
@@ -79,11 +80,11 @@ export function AppLayout(): React.ReactElement {
                     justifyContent: 'center',
                     gap: 0.5,
                     cursor: 'pointer',
-                    bgcolor: isActive ? '#242528' : 'transparent',
+                    bgcolor: isActive ? d3roPalette.bg.chassis : 'transparent',
                     boxShadow: isActive
                       ? 'inset 0 2px 6px rgba(0,0,0,0.8), inset 0 0 0 1px #000'
                       : '0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.06)',
-                    color: isActive ? '#f25b29' : '#77797c',
+                    color: isActive ? d3roPalette.accent.amber : d3roPalette.text.inactive,
                     transition: 'all 0.05s linear',
                     transform: isActive ? 'translateY(1px)' : 'none',
                     '&:active': {
@@ -91,7 +92,7 @@ export function AppLayout(): React.ReactElement {
                       boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.6)',
                     },
                     '&:hover': {
-                      color: isActive ? '#f25b29' : '#aaa',
+                      color: isActive ? d3roPalette.accent.amber : d3roPalette.text.hover,
                     },
                   }}
                 >
@@ -99,7 +100,7 @@ export function AppLayout(): React.ReactElement {
                   <Typography
                     sx={{
                       fontSize: '7px',
-                      fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+                      fontFamily: d3roFontMono,
                       fontWeight: 700,
                       letterSpacing: '0.5px',
                     }}
@@ -126,14 +127,14 @@ export function AppLayout(): React.ReactElement {
                 alignItems: 'center',
                 justifyContent: 'center',
                 cursor: 'pointer',
-                color: '#77797c',
+                color: d3roPalette.text.inactive,
                 boxShadow: '0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.06)',
                 transition: 'all 0.05s linear',
                 '&:active': {
                   transform: 'translateY(2px)',
                   boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.6)',
                 },
-                '&:hover': { color: '#aaa' },
+                '&:hover': { color: d3roPalette.text.hover },
               }}
             >
               <SettingsIcon sx={{ fontSize: 20 }} />
@@ -147,9 +148,9 @@ export function AppLayout(): React.ReactElement {
           sx={{
             flexGrow: 1,
             overflow: 'auto',
-            bgcolor: '#19191b',
+            bgcolor: d3roPalette.bg.app,
             // 미묘한 방사형 비네팅 (시안 A 배경)
-            background: 'radial-gradient(circle at 50% 30%, #252628 0%, #19191b 70%)',
+            background: `radial-gradient(circle at 50% 30%, ${d3roPalette.bg.chassis} 0%, ${d3roPalette.bg.app} 70%)`,
           }}
         >
           {currentRoute === 'dashboard' && <DashboardPage />}