Phase 10~11 전체 구현: 킬러 피처 5종 + 수익화 시스템

Phase 10 킬러 피처:
- MemoService: 태그 CRUD + 마크다운 내보내기 (memo_tags DB)
- VoiceCommandService: 키워드→명령어 매칭, 프리셋 4종
- ScreenContextService: PowerShell 활성 윈도우 + Ctrl+C 선택 텍스트
- ChainService: LLM 명령어 순차 실행 파이프라인
- CaptionService: 6초 청크 연속 전사 + 시스템 오디오 루프백

VoiceModeService 파이프라인 통합:
- 녹음 시작 → 컨텍스트 캡처 → STT → 키워드 매칭 → LLM(체인/컨텍스트 주입) → 삽입

시스템 오디오 캡처:
- setDisplayMediaRequestHandler + audio: 'loopback' (IPC 브릿지)
- electron-audio-loopback 패키지 contextIsolation 호환 불가 → 직접 구현

Phase 11 수익화:
- LicenseService: Free/Pro/Pro+ 3티어, LemonSqueezy API
- Feature Gate: requireFeature/checkFeature/consumeFeature
- 일일 쿼터: Free dictation 20/일, LLM 10/일 (SQLite daily_usage)
- LicenseModal, ProBadge, UpgradePromptModal UI

디자인 보강:
- d3roTypo(13종), d3roShadow(10종), d3roRadius(7종) 토큰 시스템
- ScreenPanel, ButtonGroup DS 컴포넌트 신규
- PhosphorText 4→13종 변형, MetalDial conic-gradient 광택
- 공유 컴포넌트: EmptyStateCard, SearchInput, PageHeader, HistoryEntryCard

기타:
- 자막 핫키 SSOT 전체 연동 (Config→Hotkey→VoiceMode→Caption→Settings)
- StatusBar 자막 LED + 효과음, 자막 로딩 UI
- LLM 상태 이벤트 전파 수정 (폴링 제거 → onStatusChanged)
- 커맨드 팝업 "선택 해제" 항목 추가

src/renderer/components/ds/MetalDial.tsx

@@ -1,8 +1,10 @@
 // src/renderer/components/ds/MetalDial.tsx
-// 시안 A: 메탈 다이얼 — 정밀기기 회전 노브, 동심원 그루브, LED 인디케이터
+// 시안 A: 메탈 다이얼 — 정밀기기 회전 노브, 동심원 그루브, 금속 광택, LED 인디케이터
+// 보강: 레퍼런스의 conic-gradient 정적 라이팅 + 방향성 그림자 추가
 
-import { Box, Typography } from '@mui/material'
-import { d3roPalette, d3roFontMono } from '../../theme'
+import { Box } from '@mui/material'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow } from '../../theme'
+import { PhosphorText } from './PhosphorText'
 
 interface MetalDialProps {
   /** 0.0 ~ 1.0 값 (다이얼 위치) */
@@ -22,97 +24,110 @@ export function MetalDial({
   ledColor = d3roPalette.accent.amber,
 }: MetalDialProps): React.ReactElement {
   const rotation = value * 270 - 135 // -135° ~ +135° 범위
+  const knobSize = size - 12 // 웰 패딩
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
-      {/* 다이얼 외곽 */}
+    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1.5 }}>
+      {/* 다이얼 웰 (inset well) */}
       <Box
         sx={{
           width: size,
           height: size,
           borderRadius: '50%',
-          bgcolor: d3roPalette.bg.chassis,
+          bgcolor: d3roPalette.bg.crtBezel,
           boxShadow: `
-            0 4px 12px rgba(0,0,0,0.5),
-            inset 0 2px 4px rgba(255,255,255,0.08),
-            inset 0 -2px 4px rgba(0,0,0,0.3)
+            inset 0 3px 8px rgba(0,0,0,0.8),
+            inset 0 -1px 2px rgba(255,255,255,0.08),
+            0 1px 1px rgba(255,255,255,0.05)
           `,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
           position: 'relative',
+          p: '6px',
         }}
       >
-        {/* 동심원 그루브 (CSS로 시뮬레이션) */}
+        {/* 노브 회전체 (동심원 그루브) */}
         <Box
           sx={{
-            width: size - 16,
-            height: size - 16,
+            width: knobSize,
+            height: knobSize,
             borderRadius: '50%',
+            position: 'absolute',
+            top: 6,
+            left: 6,
             background: `
               repeating-radial-gradient(
-                circle at center,
-                ${d3roPalette.bg.chassis} 0px,
-                ${d3roPalette.bg.card} 1px,
-                ${d3roPalette.bg.chassis} 2px
+                circle at 50% 50%,
+                #e6e7e9 0px,
+                #e6e7e9 1px,
+                #b0b2b5 1.5px,
+                #b0b2b5 2.5px
               )
             `,
-            boxShadow: `
-              inset 0 1px 3px rgba(0,0,0,0.6),
-              0 1px 1px rgba(255,255,255,0.05)
-            `,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
             transform: `rotate(${rotation}deg)`,
             transition: 'transform 0.2s ease-out',
           }}
         >
-          {/* 포인터 인디케이터 */}
+          {/* 포인터 인디케이터 점 */}
           <Box
             sx={{
               position: 'absolute',
-              top: 8,
+              top: 10,
               left: '50%',
               transform: 'translateX(-50%)',
-              width: 4,
-              height: 4,
+              width: 8,
+              height: 8,
               borderRadius: '50%',
-              bgcolor: ledColor,
-              boxShadow: `0 0 6px ${ledColor}`,
+              bgcolor: d3roPalette.bg.crtBezel,
+              boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.8)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              '&::after': {
+                content: '""',
+                width: 4,
+                height: 4,
+                borderRadius: '50%',
+                bgcolor: ledColor,
+              },
             }}
           />
         </Box>
 
-        {/* LED 인디케이터 (우측 상단) */}
+        {/* 정적 금속 광택 오버레이 (노브와 별개, 회전 안 함) */}
         <Box
           sx={{
             position: 'absolute',
-            top: 4,
-            right: size * 0.25,
-            width: 5,
-            height: 5,
+            inset: '6px',
             borderRadius: '50%',
-            bgcolor: ledColor,
-            boxShadow: `0 0 4px ${ledColor}`,
+            pointerEvents: 'none',
+            // 레퍼런스의 핵심: directional light + conic reflections
+            background: `
+              linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,0.6) 100%),
+              conic-gradient(from 180deg at 50% 50%,
+                rgba(255,255,255,0) 0deg,
+                rgba(255,255,255,0.4) 45deg,
+                rgba(255,255,255,0) 90deg,
+                rgba(255,255,255,0.2) 180deg,
+                rgba(255,255,255,0) 270deg,
+                rgba(255,255,255,0.4) 315deg,
+                rgba(255,255,255,0) 360deg
+              )
+            `,
+            mixBlendMode: 'overlay',
+            // 방향성 그림자: 좌상 하이라이트 + 우하 쉐이드
+            boxShadow: `
+              -4px -4px 8px rgba(255,255,255,0.3),
+              12px 16px 20px rgba(0,0,0,0.7),
+              inset 0 2px 3px rgba(255,255,255,0.8)
+            `,
           }}
         />
       </Box>
 
       {/* 라벨 */}
       {label && (
-        <Typography
-          sx={{
-            fontFamily: d3roFontMono,
-            fontSize: '9px',
-            fontWeight: 700,
-            letterSpacing: '1.5px',
-            color: d3roPalette.text.inactive,
-            textTransform: 'uppercase',
-          }}
-        >
+        <PhosphorText variant="label" sx={{ color: d3roPalette.text.inactive }}>
           {label}
-        </Typography>
+        </PhosphorText>
       )}
     </Box>
   )