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/pages/CommandsPage.tsx

@@ -7,6 +7,7 @@ import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
 import { MetalCard, PhosphorText, Led } from '../components/ds'
+import { d3roPalette } from '../theme'
 import type { IPCResult } from '@shared/errors'
 
 interface CustomInstruction {
@@ -42,7 +43,7 @@ export function CommandsPage(): React.ReactElement {
   return (
     <Box sx={{ maxWidth: 900, mx: 'auto', p: 4 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-        <PhosphorText variant="label" sx={{ color: '#77797c' }}>
+        <PhosphorText variant="label" sx={{ color: d3roPalette.text.inactive }}>
           LLM INSTRUCTIONS — {instructions.length} COMMANDS
         </PhosphorText>
         <Button variant="contained" startIcon={<AddIcon />} onClick={openAdd} size="small">ADD</Button>
@@ -64,16 +65,16 @@ export function CommandsPage(): React.ReactElement {
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
                   <Led color={inst.isBuiltin ? 'amber' : 'green'} size={6} />
                   <Box>
-                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: '#fff' }}>{inst.name}</Box>
-                    <Box sx={{ fontSize: '11px', color: '#77797c', mt: 0.25 }}>{inst.description}</Box>
+                    <Box sx={{ fontSize: '14px', fontWeight: 600, color: d3roPalette.text.primary }}>{inst.name}</Box>
+                    <Box sx={{ fontSize: '11px', color: d3roPalette.text.inactive, mt: 0.25 }}>{inst.description}</Box>
                   </Box>
                 </Box>
                 <Box sx={{ display: 'flex', gap: 0.5 }}>
-                  <IconButton size="small" onClick={() => openEdit(inst)} sx={{ color: '#77797c', '&:hover': { color: '#f25b29' } }}>
+                  <IconButton size="small" onClick={() => openEdit(inst)} sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
                     <EditIcon sx={{ fontSize: 16 }} />
                   </IconButton>
                   {!inst.isBuiltin && (
-                    <IconButton size="small" sx={{ color: '#77797c', '&:hover': { color: '#ef4444' } }}>
+                    <IconButton size="small" sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.tag.red } }}>
                       <DeleteIcon sx={{ fontSize: 16 }} />
                     </IconButton>
                   )}