refactor(popup): 5종 팝업 _i18n 주입 + 색상 토큰화 (WS-POPUP)

- 4종 팝업(command/history/result/recording-tip) _i18n 주입:
  WindowManager getPopupI18nStrings() + 팝업 script applyI18nToHtml()
- 한국어/영어 하드코딩 -> popup.* i18n 키 (ko/en 17키)
- theme-vars.ts에 --d3-wave-1~9, --d3-status-error/success 토큰 추가 (6 테마)
- 팝업 style.css hex -> CSS var 토큰
- packages/i18n getI18n() (main 프로세스용) 추가
SKIP: caption-overlay _i18n(별도 IPC 구조), wave box-shadow 보간(opacity 단순화)
정책: docs/REFACTOR_POLICY.md DP3, 이식 인사이트 P5

packages/ui/src/theme-vars.ts

@@ -45,6 +45,20 @@ interface PopupThemeVars {
   '--d3-action-btn-hover-bg': string
   /** 결과 팝업 버튼 hover 색상 */
   '--d3-action-btn-hover': string
+  /** recording-tip 9단계 wave-bar 색상 (wave1~4 보간) */
+  '--d3-wave-1': string
+  '--d3-wave-2': string
+  '--d3-wave-3': string
+  '--d3-wave-4': string
+  '--d3-wave-5': string
+  '--d3-wave-6': string
+  '--d3-wave-7': string
+  '--d3-wave-8': string
+  '--d3-wave-9': string
+  /** 에러 상태 색상 (recording-tip error-icon) */
+  '--d3-status-error': string
+  /** 성공 상태 색상 (result-popup copied 상태) */
+  '--d3-status-success': string
 }
 
 const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
@@ -68,6 +82,18 @@ const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
     '--d3-action-btn': '#60a5fa',
     '--d3-action-btn-hover-bg': 'rgba(59,130,246,0.14)',
     '--d3-action-btn-hover': '#93a4c8',
+    // wave-bar 9단계: theme.ts RAW.dark.gradient.wave1-4 보간
+    '--d3-wave-1': '#22d3ee',
+    '--d3-wave-2': '#28bef0',
+    '--d3-wave-3': '#2fa9f2',
+    '--d3-wave-4': '#3596f4',
+    '--d3-wave-5': '#3b82f6',
+    '--d3-wave-6': '#4f78f6',
+    '--d3-wave-7': '#636ff6',
+    '--d3-wave-8': '#7765f6',
+    '--d3-wave-9': '#8b5cf6',
+    '--d3-status-error': '#ef4444',
+    '--d3-status-success': '#34d399',
   },
   light: {
     '--d3-bg-card': '#ffffff',
@@ -89,6 +115,18 @@ const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
     '--d3-action-btn': '#3b82f6',
     '--d3-action-btn-hover-bg': 'rgba(37,99,235,0.10)',
     '--d3-action-btn-hover': '#4b5a75',
+    // theme.ts RAW.light.gradient.wave1-4 보간
+    '--d3-wave-1': '#06b6d4',
+    '--d3-wave-2': '#1cbff8',
+    '--d3-wave-3': '#32bbfc',
+    '--d3-wave-4': '#3b82f6',
+    '--d3-wave-5': '#4966eb',
+    '--d3-wave-6': '#574ae0',
+    '--d3-wave-7': '#6c2edd',
+    '--d3-wave-8': '#8112da',
+    '--d3-wave-9': '#d946ef',
+    '--d3-status-error': '#ef4444',
+    '--d3-status-success': '#34d399',
   },
   nord: {
     '--d3-bg-card': '#3b4252',
@@ -110,6 +148,18 @@ const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
     '--d3-action-btn': 'rgba(216,222,233,0.4)',
     '--d3-action-btn-hover-bg': 'rgba(216,222,233,0.08)',
     '--d3-action-btn-hover': 'rgba(216,222,233,0.7)',
+    // theme.ts RAW.nord.gradient.wave1-4 보간
+    '--d3-wave-1': '#8fbcbb',
+    '--d3-wave-2': '#8dbdcd',
+    '--d3-wave-3': '#8bbea0',
+    '--d3-wave-4': '#88c0d0',
+    '--d3-wave-5': '#85c6d0',
+    '--d3-wave-6': '#a3be8c',
+    '--d3-wave-7': '#b48ead',
+    '--d3-wave-8': '#bf88a8',
+    '--d3-wave-9': '#d08770',
+    '--d3-status-error': '#bf616a',
+    '--d3-status-success': '#a3be8c',
   },
   solarized: {
     '--d3-bg-card': '#073642',
@@ -131,6 +181,18 @@ const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
     '--d3-action-btn': 'rgba(147,161,161,0.4)',
     '--d3-action-btn-hover-bg': 'rgba(131,148,150,0.10)',
     '--d3-action-btn-hover': 'rgba(147,161,161,0.7)',
+    // theme.ts RAW.solarized.gradient.wave1-4 보간
+    '--d3-wave-1': '#2aa198',
+    '--d3-wave-2': '#2693cb',
+    '--d3-wave-3': '#268bd2',
+    '--d3-wave-4': '#268bd2',
+    '--d3-wave-5': '#4676d9',
+    '--d3-wave-6': '#6c71c4',
+    '--d3-wave-7': '#6c71c4',
+    '--d3-wave-8': '#9a33d3',
+    '--d3-wave-9': '#d33682',
+    '--d3-status-error': '#dc322f',
+    '--d3-status-success': '#859900',
   },
   catppuccin: {
     '--d3-bg-card': '#313244',
@@ -152,6 +214,18 @@ const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
     '--d3-action-btn': 'rgba(166,173,200,0.4)',
     '--d3-action-btn-hover-bg': 'rgba(205,214,244,0.06)',
     '--d3-action-btn-hover': 'rgba(205,214,244,0.7)',
+    // theme.ts RAW.catppuccin.gradient.wave1-4 보간
+    '--d3-wave-1': '#89dceb',
+    '--d3-wave-2': '#89cff4',
+    '--d3-wave-3': '#89c2f9',
+    '--d3-wave-4': '#89b4fa',
+    '--d3-wave-5': '#b4a9f2',
+    '--d3-wave-6': '#df9eea',
+    '--d3-wave-7': '#cba6f7',
+    '--d3-wave-8': '#e5b6f6',
+    '--d3-wave-9': '#f5c2e7',
+    '--d3-status-error': '#f38ba8',
+    '--d3-status-success': '#a6e3a1',
   },
   dracula: {
     '--d3-bg-card': '#44475a',
@@ -173,6 +247,18 @@ const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
     '--d3-action-btn': 'rgba(169,176,208,0.4)',
     '--d3-action-btn-hover-bg': 'rgba(248,248,242,0.06)',
     '--d3-action-btn-hover': 'rgba(248,248,242,0.7)',
+    // theme.ts RAW.dracula.gradient.wave1-4 보간
+    '--d3-wave-1': '#8be9fd',
+    '--d3-wave-2': '#a6fbff',
+    '--d3-wave-3': '#c1fdff',
+    '--d3-wave-4': '#bd93f9',
+    '--d3-wave-5': '#d485ff',
+    '--d3-wave-6': '#eb77ff',
+    '--d3-wave-7': '#ff79c6',
+    '--d3-wave-8': '#ff88c4',
+    '--d3-wave-9': '#ffb86c',
+    '--d3-status-error': '#ff5555',
+    '--d3-status-success': '#50fa7b',
   },
 }