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/popups/caption-overlay/script.js

@@ -0,0 +1,193 @@
+// Caption Overlay 팝업 스크립트
+// Phase 10.1: Live Caption — 실시간 자막 오버레이
+// Vanilla JS (다른 팝업과 동일한 패턴)
+
+;(function () {
+  'use strict'
+
+  // ── 설정 (기본값, IPC로 업데이트) ─────────────────────
+  var config = {
+    fontSize: 18,
+    opacity: 0.85,
+    maxLines: 3,
+    autoClearMs: 5000
+  }
+
+  // ── DOM 참조 ─────────────────────────────────────────
+  var linesContainer = document.getElementById('lines')
+  var container = document.getElementById('container')
+
+  // ── 상태 ──────────────────────────────────────────────
+  /** @type {Array<{el: HTMLElement, timer: number|null, id: string}>} */
+  var lines = []
+  /** @type {HTMLElement|null} */
+  var deltaLine = null
+
+  // ── 자막 줄 추가 ──────────────────────────────────────
+
+  /**
+   * 확정된 자막 세그먼트를 추가한다.
+   * @param {{id: string, text: string, timestamp: number, isFinal: boolean}} segment
+   */
+  function addSegment(segment) {
+    // delta 줄이 있으면 제거 (확정 줄로 교체)
+    removeDeltaLine()
+
+    var el = document.createElement('div')
+    el.className = 'caption-line'
+    el.textContent = segment.text
+    el.style.fontSize = config.fontSize + 'px'
+    linesContainer.appendChild(el)
+
+    // auto-clear 타이머 설정
+    var timer = setTimeout(function () {
+      fadeAndRemoveLine(entry)
+    }, config.autoClearMs)
+
+    var entry = { el: el, timer: timer, id: segment.id }
+    lines.push(entry)
+
+    // maxLines 초과 시 가장 오래된 줄 제거
+    while (lines.length > config.maxLines) {
+      var oldest = lines.shift()
+      if (oldest) {
+        if (oldest.timer) clearTimeout(oldest.timer)
+        if (oldest.el.parentNode) {
+          oldest.el.parentNode.removeChild(oldest.el)
+        }
+      }
+    }
+  }
+
+  /**
+   * 중간(delta) 자막을 업데이트한다 (아직 확정되지 않은 줄).
+   * @param {{text: string, isFinal: boolean}} data
+   */
+  function updateDelta(data) {
+    if (data.isFinal) {
+      // isFinal이면 segment로 처리
+      removeDeltaLine()
+      return
+    }
+
+    if (!deltaLine) {
+      deltaLine = document.createElement('div')
+      deltaLine.className = 'caption-line delta'
+      deltaLine.style.fontSize = config.fontSize + 'px'
+      linesContainer.appendChild(deltaLine)
+    }
+
+    deltaLine.textContent = data.text
+  }
+
+  /**
+   * delta 줄을 제거한다.
+   */
+  function removeDeltaLine() {
+    if (deltaLine && deltaLine.parentNode) {
+      deltaLine.parentNode.removeChild(deltaLine)
+    }
+    deltaLine = null
+  }
+
+  /**
+   * 줄을 페이드 아웃 후 제거한다.
+   * @param {{el: HTMLElement, timer: number|null, id: string}} entry
+   */
+  function fadeAndRemoveLine(entry) {
+    entry.el.classList.add('fading')
+    setTimeout(function () {
+      if (entry.el.parentNode) {
+        entry.el.parentNode.removeChild(entry.el)
+      }
+      var idx = lines.indexOf(entry)
+      if (idx !== -1) {
+        lines.splice(idx, 1)
+      }
+    }, 500) // CSS transition 시간과 일치
+  }
+
+  /**
+   * 모든 줄을 제거한다.
+   */
+  function clearAllLines() {
+    for (var i = 0; i < lines.length; i++) {
+      if (lines[i].timer) clearTimeout(lines[i].timer)
+      if (lines[i].el.parentNode) {
+        lines[i].el.parentNode.removeChild(lines[i].el)
+      }
+    }
+    lines = []
+    removeDeltaLine()
+  }
+
+  /**
+   * 설정을 적용한다.
+   * @param {object} newConfig
+   */
+  function applyConfig(newConfig) {
+    if (newConfig.fontSize !== undefined) config.fontSize = newConfig.fontSize
+    if (newConfig.opacity !== undefined) config.opacity = newConfig.opacity
+    if (newConfig.maxLines !== undefined) config.maxLines = newConfig.maxLines
+    if (newConfig.autoClearMs !== undefined) config.autoClearMs = newConfig.autoClearMs
+
+    // 기존 줄에 폰트 크기 반영
+    for (var i = 0; i < lines.length; i++) {
+      lines[i].el.style.fontSize = config.fontSize + 'px'
+    }
+    if (deltaLine) {
+      deltaLine.style.fontSize = config.fontSize + 'px'
+    }
+
+    // 컨테이너 투명도
+    if (container) {
+      container.style.opacity = String(config.opacity)
+    }
+  }
+
+  // ── IPC 리스너 ────────────────────────────────────────
+
+  if (window.popupAPI) {
+    // 확정된 자막 세그먼트
+    window.popupAPI.on('caption:segment', function (segment) {
+      addSegment(segment)
+    })
+
+    // 중간 전사 결과 (delta)
+    window.popupAPI.on('caption:delta', function (data) {
+      updateDelta(data)
+    })
+
+    // 설정 업데이트
+    window.popupAPI.on('caption:config', function (newConfig) {
+      applyConfig(newConfig)
+    })
+
+    // 숨기기 (세션 종료)
+    window.popupAPI.on('caption:hide', function () {
+      clearAllLines()
+    })
+
+    // 상태 변경
+    window.popupAPI.on('caption:stateChanged', function (data) {
+      if (data.state === 'starting') {
+        // 로딩 표시
+        clearAllLines()
+        var loadingEl = document.createElement('div')
+        loadingEl.className = 'caption-line loading'
+        loadingEl.id = 'caption-loading'
+        loadingEl.textContent = '⏳ Loading STT model...'
+        loadingEl.style.fontSize = config.fontSize + 'px'
+        linesContainer.appendChild(loadingEl)
+      } else if (data.state === 'active') {
+        // 로딩 표시 제거
+        var existing = document.getElementById('caption-loading')
+        if (existing && existing.parentNode) {
+          existing.parentNode.removeChild(existing)
+        }
+      } else if (data.state === 'inactive' || data.state === 'stopping') {
+        clearAllLines()
+      }
+    })
+  }
+})()