From ae8e96cef45a5bfbf4f8beb02253c5f226dffc3e Mon Sep 17 00:00:00 2001
From: Macbook <macbook@Macbookui-MacBookPro.local>
Date: Tue, 26 May 2026 01:32:25 +0900
Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EB=A7=88=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                          | 70 +++++++++------
 frontend/src/components/MarketSearchPanel.tsx | 13 ++-
 frontend/src/styles/appPopup.css              | 24 +++++
 frontend/src/styles/strategyEditorTheme.css   | 35 ++++++++
 frontend/src/styles/trendSearchDashboard.css  | 71 ++++++++-------
 .../src/styles/virtualTradingDashboard.css    | 88 +++++++++----------
 6 files changed, 195 insertions(+), 106 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2cb4ab6..a4a18af 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -26,6 +26,11 @@
   --down:       #4dabf7;
   --panel-bg:   #24283bee;
   --sep:        rgba(122, 162, 247, 0.15);
+  --panel:      #24283b;
+  --text-muted: #6272a4;
+  --btn-bg:     rgba(255, 255, 255, 0.07);
+  --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
+  --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
 }
 
 /* ── Dark Theme: 도쿄 나이트 (THEME_SETTINGS.md §2.2) ───────────── */
@@ -46,6 +51,11 @@ html.theme-dark {
   --down:       #4dabf7;
   --panel-bg:   #24283bee;
   --sep:        rgba(122, 162, 247, 0.15);
+  --panel:      #24283b;
+  --text-muted: #6272a4;
+  --btn-bg:     rgba(255, 255, 255, 0.07);
+  --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
+  --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
 }
 
 /* ── Light Theme (THEME_SETTINGS.md §2.1) ──────────────────────── */
@@ -66,6 +76,11 @@ html.theme-light {
   --down:       #1565c0;
   --panel-bg:   #ffffffee;
   --sep:        rgba(0, 0, 0, 0.10);
+  --panel:      #ffffff;
+  --text-muted: #757575;
+  --btn-bg:     rgba(0, 0, 0, 0.06);
+  --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent);
+  --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 }
 
 /* ── Blue Theme: 딥 네이비 (THEME_SETTINGS.md §2.3) ─────────────── */
@@ -86,6 +101,11 @@ html.theme-blue {
   --down:       #55aaff;
   --panel-bg:   #15273dee;
   --sep:        rgba(94, 181, 255, 0.15);
+  --panel:      #15273d;
+  --text-muted: #7aaed4;
+  --btn-bg:     rgba(255, 255, 255, 0.07);
+  --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
+  --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
 }
 
 /* ── App Root ───────────────────────────────────────────────────── */
@@ -978,7 +998,7 @@ html.theme-blue {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: 4px;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
+  box-shadow: var(--popup-shadow);
   z-index: 600;
 }
 /* 하단 바 — overflow 클리핑 회피 (body 포털) */
@@ -1506,7 +1526,7 @@ html.theme-blue {
   z-index: 1201;
   display: flex;
   flex-direction: column;
-  box-shadow: 6px 0 24px rgba(0,0,0,0.4);
+  box-shadow: 6px 0 24px var(--popup-shadow);
 }
 
 /* 슬롯 내 심볼 버튼에서 열릴 때: 인라인 스타일로 위치 override됨.
@@ -1515,13 +1535,13 @@ html.theme-blue {
   border-right: none;
   border: 1px solid var(--border);
   border-radius: 6px;
-  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
+  box-shadow: var(--popup-shadow);
   /* top/left/width/height 는 JS 인라인 스타일로 지정됨 */
 }
 
 .msp-panel--dropdown {
   border-radius: 8px;
-  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
+  box-shadow: var(--popup-shadow);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -2544,7 +2564,7 @@ html.theme-blue {
   background: var(--bg);
   border: 1px solid var(--sep);
   border-radius: 8px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popup-shadow);
 }
 .ism-color-popover-native {
   margin-bottom: 10px;
@@ -4003,15 +4023,15 @@ html.theme-blue {
 
 /* 팝업 컨테이너 */
 .lp-popup {
-  background: var(--panel, #1e2130);
-  border: 1px solid var(--border, #2a2e3a);
+  background: var(--panel);
+  border: 1px solid var(--border);
   border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0,0,0,.55);
+  box-shadow: var(--popup-shadow);
   padding: 12px 0 8px;
   width: 420px;
   max-height: 80vh;
   overflow-y: auto;
-  color: var(--text, #d1d4dc);
+  color: var(--text);
   font-size: 13px;
   user-select: none;
 }
@@ -4024,7 +4044,7 @@ html.theme-blue {
   align-items: center;
   gap: 4px;
   padding: 4px 0;
-  border-bottom: 1px solid var(--border, #2a2e3a);
+  border-bottom: 1px solid var(--border);
 }
 .lp-row:last-child { border-bottom: none; }
 
@@ -4032,7 +4052,7 @@ html.theme-blue {
   width: 20px;
   text-align: center;
   font-size: 11px;
-  color: var(--text-muted, #787b86);
+  color: var(--text-muted);
   flex-shrink: 0;
 }
 
@@ -4052,24 +4072,24 @@ html.theme-blue {
   border: 1px solid transparent;
   border-radius: 4px;
   background: none;
-  color: var(--text, #d1d4dc);
+  color: var(--text);
   cursor: pointer;
   transition: background .12s, border-color .12s;
 }
 .lp-icon-btn:hover {
-  background: var(--btn-bg, rgba(255,255,255,.07));
-  border-color: var(--border, #3a3e4a);
+  background: var(--btn-bg);
+  border-color: var(--border);
 }
 .lp-icon-btn.active {
-  background: var(--accent-muted, rgba(41,98,255,.22));
-  border-color: var(--accent, #2962ff);
-  color: var(--accent, #2962ff);
+  background: var(--accent-muted);
+  border-color: var(--accent);
+  color: var(--accent);
 }
 
 /* 구분선 */
 .lp-divider {
   height: 1px;
-  background: var(--border, #2a2e3a);
+  background: var(--border);
   margin: 6px 0;
 }
 
@@ -4080,7 +4100,7 @@ html.theme-blue {
   font-size: 10px;
   font-weight: 600;
   letter-spacing: .08em;
-  color: var(--text-muted, #787b86);
+  color: var(--text-muted);
   margin-bottom: 8px;
   text-transform: uppercase;
 }
@@ -4094,7 +4114,7 @@ html.theme-blue {
 
 .lp-sync-name {
   font-size: 13px;
-  color: var(--text, #d1d4dc);
+  color: var(--text);
 }
 
 /* 토글 스위치 */
@@ -4104,7 +4124,7 @@ html.theme-blue {
   height: 20px;
   border: none;
   border-radius: 10px;
-  background: var(--btn-bg, #3a3e4a);
+  background: var(--btn-bg);
   cursor: pointer;
   transition: background .2s;
   flex-shrink: 0;
@@ -4115,11 +4135,11 @@ html.theme-blue {
   top: 2px; left: 2px;
   width: 16px; height: 16px;
   border-radius: 50%;
-  background: var(--text-muted, #787b86);
+  background: var(--text-muted);
   transition: transform .2s, background .2s;
 }
 .lp-toggle.on {
-  background: var(--accent, #2962ff);
+  background: var(--accent);
 }
 .lp-toggle.on::after {
   transform: translateX(16px);
@@ -4131,7 +4151,7 @@ html.theme-blue {
   position: relative;
 }
 .lp-trigger-btn.active {
-  color: var(--accent, #2962ff);
+  color: var(--accent);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -9787,7 +9807,7 @@ html.theme-blue {
   background: var(--bg2);
   border: 1px solid var(--border);
   border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--popup-shadow);
   padding: 4px 0;
   overflow: hidden;
 }
diff --git a/frontend/src/components/MarketSearchPanel.tsx b/frontend/src/components/MarketSearchPanel.tsx
index 72076ee..9b27aab 100644
--- a/frontend/src/components/MarketSearchPanel.tsx
+++ b/frontend/src/components/MarketSearchPanel.tsx
@@ -250,9 +250,9 @@ export const MarketSearchPanel: React.FC<MarketSearchPanelProps> = ({
             maxWidth:   Math.min(520, window.innerWidth - anchorRect.left - 8),
             minHeight:  320,
             zIndex:     PANEL_Z,
-            background: 'var(--bg2, #24283b)',
-            color:      'var(--text, #c0caf5)',
-            border:     '1px solid var(--border, rgba(122,162,247,0.15))',
+            background: 'var(--bg2)',
+            color:      'var(--text)',
+            border:     '1px solid var(--border)',
           }
         : {
             position:   'fixed',
@@ -262,10 +262,9 @@ export const MarketSearchPanel: React.FC<MarketSearchPanelProps> = ({
             height:     anchorRect.height - HEADER_H,
             maxWidth:   anchorRect.width,
             zIndex:     PANEL_Z,
-            // document.body 포털 시 CSS var()가 상속되지 않아 배경이 투명해지는 문제 방지
-            background: 'var(--bg2, #24283b)',
-            color:      'var(--text, #c0caf5)',
-            border:     '1px solid var(--border, rgba(122,162,247,0.15))',
+            background: 'var(--bg2)',
+            color:      'var(--text)',
+            border:     '1px solid var(--border)',
           }
       : undefined; // undefined → CSS 기본값(.msp-panel) 그대로 사용
 
diff --git a/frontend/src/styles/appPopup.css b/frontend/src/styles/appPopup.css
index 31ac4dd..de996e2 100644
--- a/frontend/src/styles/appPopup.css
+++ b/frontend/src/styles/appPopup.css
@@ -328,3 +328,27 @@ html.theme-light .app-popup-input,
 .app.light .app-popup-input,
 html.theme-light .app-popup-select,
 .app.light .app-popup-select { background: #f0f3f8; border-color: rgba(0, 0, 0, 0.12); color: #212121; }
+
+/* body 포털 팝업 — html.theme-* (syncDocumentTheme) 테마 변수 연동 */
+html.theme-light .lp-popup,
+.app.light .lp-popup,
+html.theme-light .msp-panel,
+.app.light .msp-panel,
+html.theme-light .chart-ctx-menu,
+.app.light .chart-ctx-menu,
+html.theme-light .ism-color-popover,
+.app.light .ism-color-popover,
+html.theme-light .tz-picker-menu,
+.app.light .tz-picker-menu {
+  color: var(--text);
+}
+html.theme-light .lp-popup,
+.app.light .lp-popup,
+html.theme-light .msp-panel,
+.app.light .msp-panel,
+html.theme-light .chart-ctx-menu,
+.app.light .chart-ctx-menu {
+  background: var(--panel);
+  border-color: var(--border);
+  box-shadow: var(--popup-shadow);
+}
diff --git a/frontend/src/styles/strategyEditorTheme.css b/frontend/src/styles/strategyEditorTheme.css
index cb29559..fe26c99 100644
--- a/frontend/src/styles/strategyEditorTheme.css
+++ b/frontend/src/styles/strategyEditorTheme.css
@@ -91,6 +91,24 @@
   --se-minimap-bg: color-mix(in srgb, var(--bg) 96%, transparent);
   --se-minimap-mask: color-mix(in srgb, var(--accent) 10%, transparent);
   --se-minimap-mask-stroke: color-mix(in srgb, var(--accent) 55%, transparent);
+
+  /* 가상투자 — 신호 패널·히트맵·지표 테이블 */
+  --vtd-sig-gold-text: color-mix(in srgb, var(--se-gold) 90%, #fff);
+  --vtd-sig-panel-bg: color-mix(in srgb, #0d111f 60%, transparent);
+  --vtd-sig-card-gradient: color-mix(in srgb, #1a2035 92%, #000);
+  --vtd-sig-eq-bg: color-mix(in srgb, #000 35%, transparent);
+  --vtd-heat-track-bg: color-mix(in srgb, #060a14 85%, #000);
+  --vtd-heat-label-color: color-mix(in srgb, var(--se-text) 88%, #fff);
+  --vtd-heat-label-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
+  --vtd-sig-table-bg: color-mix(in srgb, #0d111f 50%, transparent);
+  --vtd-sig-table-head-bg: color-mix(in srgb, var(--se-gold) 6%, transparent);
+  --vtd-cond-item-bg: color-mix(in srgb, var(--bg2) 70%, #000);
+  --vtd-light-housing-bg: linear-gradient(180deg, #2a2a2a, #1a1a1a);
+  --vtd-light-housing-border: color-mix(in srgb, #555 80%, #888);
+  --vtd-status-warm: #ffe082;
+  --vtd-status-hot: #82b1ff;
+  --vtd-status-cold: #ff8a80;
+  --vtd-heat-inset: inset 0 1px 4px rgba(0, 0, 0, 0.45);
 }
 
 .se-page--light {
@@ -147,6 +165,23 @@
   --se-palette-section-logic: #1565c0;
   --se-palette-section-band: #7b1fa2;
   --se-palette-section-ind: #2e7d32;
+
+  --vtd-sig-gold-text: color-mix(in srgb, var(--se-gold) 88%, #212121);
+  --vtd-sig-panel-bg: color-mix(in srgb, var(--se-gold) 5%, #ffffff);
+  --vtd-sig-card-gradient: color-mix(in srgb, var(--se-gold) 7%, #ffffff);
+  --vtd-sig-eq-bg: color-mix(in srgb, var(--bg4) 40%, #ffffff);
+  --vtd-heat-track-bg: color-mix(in srgb, var(--bg4) 55%, #ffffff);
+  --vtd-heat-label-color: var(--se-text);
+  --vtd-heat-label-shadow: none;
+  --vtd-sig-table-bg: #ffffff;
+  --vtd-sig-table-head-bg: color-mix(in srgb, var(--se-gold) 12%, #f5f5f5);
+  --vtd-cond-item-bg: var(--bg2);
+  --vtd-light-housing-bg: linear-gradient(180deg, #eceff1, #cfd8dc);
+  --vtd-light-housing-border: rgba(0, 0, 0, 0.18);
+  --vtd-status-warm: #e65100;
+  --vtd-status-hot: #1565c0;
+  --vtd-status-cold: #c62828;
+  --vtd-heat-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .se-page--blue {
diff --git a/frontend/src/styles/trendSearchDashboard.css b/frontend/src/styles/trendSearchDashboard.css
index c838256..3357f59 100644
--- a/frontend/src/styles/trendSearchDashboard.css
+++ b/frontend/src/styles/trendSearchDashboard.css
@@ -1,25 +1,36 @@
-/* GoldenChart 추세검색 — #131722 / #FFD700 테마 */
+/* GoldenChart 추세검색 — se-page / 앱 테마 연동 */
 
 .bps-page--tsd {
-  --tsd-bg: #131722;
-  --tsd-gold: #ffd700;
-  --tsd-gold-dim: color-mix(in srgb, #ffd700 65%, #131722);
-  --tsd-match: #26a69a;
-  --tsd-mismatch: #ef5350;
-  --tsd-pending: #ffd700;
-  --tsd-card: color-mix(in srgb, #1e222d 92%, #131722);
-  --tsd-border: color-mix(in srgb, #ffd700 12%, #2a2e39);
-  --tsd-text: #d1d4dc;
-  --tsd-muted: #787b86;
+  --tsd-bg: var(--se-bg);
+  --tsd-gold: var(--se-gold);
+  --tsd-gold-dim: color-mix(in srgb, var(--se-gold) 68%, var(--se-text-muted));
+  --tsd-match: var(--se-success);
+  --tsd-mismatch: var(--se-danger);
+  --tsd-pending: var(--se-gold);
+  --tsd-card: var(--se-bg-elevated);
+  --tsd-border: color-mix(in srgb, var(--se-gold) 12%, var(--se-border));
+  --tsd-text: var(--se-text);
+  --tsd-muted: var(--se-text-muted);
+  --tsd-input-bg: var(--se-input-bg);
+  --tsd-toggle-off: color-mix(in srgb, var(--se-text-muted) 30%, var(--se-bg-muted));
+  --tsd-on-gold-text: var(--se-bg);
+  --tsd-track-bg: color-mix(in srgb, var(--se-text-muted) 18%, var(--se-bg-muted));
+  --tsd-filter-cat-bg: color-mix(in srgb, var(--se-bg-muted) 55%, var(--se-bg-elevated));
   background: var(--tsd-bg);
 }
 
-.bps-page--tsd .bps-header-title {
-  color: var(--tsd-gold);
-  letter-spacing: 0.02em;
+.se-page--light.bps-page--tsd {
+  --tsd-on-gold-text: #ffffff;
+  --tsd-border: color-mix(in srgb, var(--se-gold) 22%, var(--se-border));
+  --tsd-gold-dim: color-mix(in srgb, var(--se-gold) 78%, var(--se-text));
+  --tsd-filter-cat-bg: color-mix(in srgb, var(--se-bg-muted) 70%, #ffffff);
 }
 
-.bps-page--tsd .bps-header-sub {
+.bps-page--tsd .bps-title {
+  color: transparent;
+}
+
+.bps-page--tsd .bps-subtitle {
   color: var(--tsd-muted);
   font-size: 11px;
 }
@@ -115,7 +126,7 @@
 .tsd-filter-cat {
   border: 1px solid var(--tsd-border);
   border-radius: 10px;
-  background: color-mix(in srgb, var(--tsd-bg) 40%, transparent);
+  background: var(--tsd-filter-cat-bg);
   overflow: hidden;
 }
 
@@ -162,7 +173,7 @@
   position: absolute;
   inset: 0;
   border-radius: 10px;
-  background: #3a3f4b;
+  background: var(--tsd-toggle-off);
   transition: background 0.2s;
 }
 
@@ -179,7 +190,7 @@
 }
 
 .tsd-toggle input:checked + .tsd-toggle-track {
-  background: color-mix(in srgb, var(--tsd-gold) 75%, #3a3f4b);
+  background: color-mix(in srgb, var(--tsd-gold) 75%, var(--tsd-toggle-off));
 }
 
 .tsd-toggle input:checked + .tsd-toggle-track::before {
@@ -268,8 +279,8 @@
 }
 
 .tsd-cond-badge--filter {
-  color: #6eb5ff;
-  border: 1px solid color-mix(in srgb, #6eb5ff 40%, transparent);
+  color: var(--se-accent);
+  border: 1px solid color-mix(in srgb, var(--se-accent) 40%, transparent);
 }
 
 .tsd-cond-badge--na {
@@ -282,7 +293,7 @@
   padding: 8px 10px;
   border-radius: 8px;
   border: 1px solid var(--tsd-border);
-  background: var(--tsd-bg);
+  background: var(--tsd-input-bg);
   color: var(--tsd-text);
   font-size: 11px;
 }
@@ -299,7 +310,7 @@
   padding: 4px 6px;
   border-radius: 6px;
   border: 1px solid var(--tsd-border);
-  background: var(--tsd-bg);
+  background: var(--tsd-input-bg);
   color: var(--tsd-text);
   font-size: 10px;
   text-align: center;
@@ -367,7 +378,7 @@
   border: none;
   border-radius: 10px;
   background: linear-gradient(135deg, color-mix(in srgb, var(--tsd-gold) 90%, #fff), var(--tsd-gold-dim));
-  color: #131722;
+  color: var(--tsd-on-gold-text);
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
@@ -519,7 +530,7 @@
   flex: 1;
   height: 6px;
   border-radius: 3px;
-  background: color-mix(in srgb, var(--tsd-mismatch) 15%, #2a2e39);
+  background: color-mix(in srgb, var(--tsd-mismatch) 15%, var(--tsd-track-bg));
   overflow: hidden;
   min-width: 60px;
 }
@@ -544,7 +555,7 @@
   font-weight: 800;
   letter-spacing: 0.06em;
   background: var(--tsd-gold);
-  color: #131722;
+  color: var(--tsd-on-gold-text);
 }
 
 .tsd-badge-mid {
@@ -638,7 +649,7 @@
   flex: 1;
   height: 4px;
   border-radius: 2px;
-  background: #2a2e39;
+  background: var(--tsd-track-bg);
   min-width: 40px;
 }
 
@@ -694,7 +705,7 @@
   height: 26px;
   border-radius: 6px;
   border: 1px solid var(--tsd-border);
-  background: color-mix(in srgb, var(--tsd-bg) 60%, transparent);
+  background: var(--tsd-input-bg);
   color: var(--tsd-muted);
   font-size: 12px;
   cursor: pointer;
@@ -743,7 +754,7 @@
 /* Card grid (가상투자 vtd 스타일 재사용) */
 .bps-page--tsd.bps-page--vtd .bps-center {
   padding: 0;
-  background: var(--tsd-bg);
+  background: var(--se-center-bg);
 }
 
 .tsd-header-view {
@@ -786,12 +797,12 @@
 }
 
 @keyframes tsd-flash-up {
-  from { box-shadow: inset 0 0 0 1px color-mix(in srgb, #26a69a 70%, transparent); }
+  from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tsd-match) 70%, transparent); }
   to { box-shadow: none; }
 }
 
 @keyframes tsd-flash-down {
-  from { box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef5350 70%, transparent); }
+  from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tsd-mismatch) 70%, transparent); }
   to { box-shadow: none; }
 }
 
diff --git a/frontend/src/styles/virtualTradingDashboard.css b/frontend/src/styles/virtualTradingDashboard.css
index 66c0c7b..5af31dd 100644
--- a/frontend/src/styles/virtualTradingDashboard.css
+++ b/frontend/src/styles/virtualTradingDashboard.css
@@ -557,7 +557,7 @@
   flex: 1;
   min-height: 0;
   gap: 8px;
-  border: 1px solid color-mix(in srgb, #c9a227 35%, var(--se-border));
+  border: 1px solid color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
   border-radius: 12px;
   background: var(--se-panel-card-bg);
   padding: 10px 12px 12px;
@@ -653,7 +653,7 @@
   min-height: 0;
   border: 1px solid var(--se-border);
   border-radius: 10px;
-  background: color-mix(in srgb, var(--se-center-bg, #131722) 60%, var(--se-panel-card-bg));
+  background: color-mix(in srgb, var(--se-center-bg) 60%, var(--se-panel-card-bg));
   overflow: hidden;
 }
 
@@ -983,10 +983,10 @@
 }
 
 .vtd-card--signal {
-  border-color: color-mix(in srgb, #c9a227 35%, var(--se-border));
+  border-color: color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
   background: linear-gradient(
     165deg,
-    color-mix(in srgb, #1a2035 92%, #000) 0%,
+    var(--vtd-sig-card-gradient) 0%,
     var(--se-panel-card-bg) 55%
   );
 }
@@ -1039,7 +1039,7 @@
     inset 0 0 48px color-mix(in srgb, #b9f6ca 14%, transparent);
   background: linear-gradient(
     165deg,
-    color-mix(in srgb, #b9f6ca 18%, #1a2035) 0%,
+    color-mix(in srgb, #b9f6ca 18%, var(--vtd-sig-card-gradient)) 0%,
     color-mix(in srgb, #69f0ae 6%, var(--se-panel-card-bg)) 45%,
     var(--se-panel-card-bg) 70%
   );
@@ -1178,7 +1178,7 @@
   border: 1px solid var(--se-border);
   border-radius: 10px;
   overflow: hidden;
-  background: var(--se-center-bg, #131722);
+  background: var(--se-center-bg);
 }
 
 .vtd-card-chart-canvas .chart-hover-toolbar {
@@ -1198,7 +1198,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--se-center-bg, #131722) 75%, transparent);
+  background: color-mix(in srgb, var(--se-center-bg) 75%, transparent);
   font-size: 11px;
   color: var(--se-text-muted);
 }
@@ -1383,14 +1383,14 @@
 }
 
 .vtd-card-met-count {
-  color: color-mix(in srgb, #c9a227 80%, var(--se-text));
+  color: color-mix(in srgb, var(--se-gold) 80%, var(--se-text));
   font-weight: 600;
 }
 
 .vtd-card--detail .vtd-card-met-count {
   font-size: 13px;
   font-weight: 800;
-  color: color-mix(in srgb, #f0c040 85%, #fff);
+  color: var(--vtd-sig-gold-text);
 }
 
 .vtd-card-foot {
@@ -1435,7 +1435,7 @@
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.08em;
-  color: color-mix(in srgb, #c9a227 90%, #fff);
+  color: var(--vtd-sig-gold-text);
   text-align: center;
   padding: 4px 0;
 }
@@ -1446,9 +1446,9 @@
   align-items: stretch;
   gap: 10px 12px;
   padding: 8px 10px;
-  border: 1px solid color-mix(in srgb, #c9a227 30%, var(--se-border));
+  border: 1px solid color-mix(in srgb, var(--se-gold) 30%, var(--se-border));
   border-radius: 10px;
-  background: color-mix(in srgb, #0d111f 60%, transparent);
+  background: var(--vtd-sig-panel-bg);
 }
 
 .vtd-sig-visual-eq {
@@ -1487,9 +1487,9 @@
   gap: 2px;
   height: 180px;
   padding: 4px;
-  border: 1px solid color-mix(in srgb, #c9a227 40%, var(--se-border));
+  border: 1px solid color-mix(in srgb, var(--se-gold) 40%, var(--se-border));
   border-radius: 6px;
-  background: color-mix(in srgb, #000 35%, transparent);
+  background: var(--vtd-sig-eq-bg);
 }
 
 .vtd-sig-eq-seg {
@@ -1546,7 +1546,7 @@
 }
 
 .vtd-heat-list::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, #c9a227 35%, var(--se-border));
+  background: color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
   border-radius: 2px;
 }
 
@@ -1563,10 +1563,10 @@
   min-width: 0;
   height: 26px;
   border-radius: 8px;
-  border: 1px solid color-mix(in srgb, var(--se-border) 70%, #3a4a6b);
-  background: color-mix(in srgb, #060a14 85%, #000);
+  border: 1px solid color-mix(in srgb, var(--se-border) 70%, var(--se-text-muted));
+  background: var(--vtd-heat-track-bg);
   overflow: hidden;
-  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
+  box-shadow: var(--vtd-heat-inset);
 }
 
 .vtd-heat-label {
@@ -1578,12 +1578,12 @@
   max-width: calc(100% - 48px);
   font-size: 9px;
   font-weight: 600;
-  color: color-mix(in srgb, var(--se-text) 88%, #fff);
+  color: var(--vtd-heat-label-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
-  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
+  text-shadow: var(--vtd-heat-label-shadow);
 }
 
 .vtd-heat-fill {
@@ -1606,7 +1606,7 @@
   font-weight: 800;
   font-variant-numeric: tabular-nums;
   pointer-events: none;
-  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
+  text-shadow: var(--vtd-heat-label-shadow);
 }
 
 .vtd-heat-icon {
@@ -1626,7 +1626,7 @@
 .vtd-heat-row--nomatch .vtd-heat-track {
   border-color: color-mix(in srgb, #ef5350 40%, var(--se-border));
   box-shadow:
-    inset 0 1px 4px rgba(0, 0, 0, 0.45),
+    var(--vtd-heat-inset),
     0 0 8px color-mix(in srgb, #ef5350 15%, transparent);
 }
 
@@ -1638,7 +1638,7 @@
 }
 
 .vtd-heat-row--nomatch .vtd-heat-pct {
-  color: #ff8a80;
+  color: var(--vtd-status-cold);
 }
 
 .vtd-heat-row--nomatch .vtd-heat-icon {
@@ -1649,7 +1649,7 @@
 .vtd-heat-row--pending .vtd-heat-track {
   border-color: color-mix(in srgb, #ffb300 45%, var(--se-border));
   box-shadow:
-    inset 0 1px 4px rgba(0, 0, 0, 0.45),
+    var(--vtd-heat-inset),
     0 0 10px color-mix(in srgb, #ffb300 18%, transparent);
 }
 
@@ -1661,7 +1661,7 @@
 }
 
 .vtd-heat-row--pending .vtd-heat-pct {
-  color: #ffe082;
+  color: var(--vtd-status-warm);
 }
 
 .vtd-heat-row--pending .vtd-heat-icon {
@@ -1672,7 +1672,7 @@
 .vtd-heat-row--match .vtd-heat-track {
   border-color: color-mix(in srgb, #3f7ef5 45%, var(--se-border));
   box-shadow:
-    inset 0 1px 4px rgba(0, 0, 0, 0.45),
+    var(--vtd-heat-inset),
     0 0 12px color-mix(in srgb, #3f7ef5 22%, transparent);
 }
 
@@ -1684,7 +1684,7 @@
 }
 
 .vtd-heat-row--match .vtd-heat-pct {
-  color: #82b1ff;
+  color: var(--vtd-status-hot);
 }
 
 .vtd-heat-row--match .vtd-heat-icon {
@@ -1733,7 +1733,7 @@
   gap: 8px;
   padding: 5px 8px;
   border-radius: 6px;
-  background: color-mix(in srgb, var(--se-panel-card-bg) 70%, #000);
+  background: var(--vtd-cond-item-bg);
   border: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent);
 }
 
@@ -1820,9 +1820,9 @@
   flex-direction: column;
   gap: 8px;
   padding: 10px 12px;
-  border: 2px solid color-mix(in srgb, #555 80%, #888);
+  border: 2px solid var(--vtd-light-housing-border);
   border-radius: 14px;
-  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
+  background: var(--vtd-light-housing-bg);
 }
 
 .vtd-sig-light-bulb {
@@ -1890,11 +1890,11 @@
 
 /* 지표 비교 테이블 */
 .vtd-sig-table-wrap {
-  border: 1px solid color-mix(in srgb, #c9a227 35%, var(--se-border));
+  border: 1px solid color-mix(in srgb, var(--se-gold) 35%, var(--se-border));
   border-radius: 8px;
   overflow-x: auto;
   overflow-y: visible;
-  background: color-mix(in srgb, #0d111f 50%, transparent);
+  background: var(--vtd-sig-table-bg);
   -webkit-overflow-scrolling: touch;
 }
 
@@ -1903,9 +1903,9 @@
   font-size: 9px;
   font-weight: 800;
   letter-spacing: 0.06em;
-  color: color-mix(in srgb, #c9a227 90%, #fff);
-  border-bottom: 1px solid color-mix(in srgb, #c9a227 25%, var(--se-border));
-  background: color-mix(in srgb, #c9a227 6%, transparent);
+  color: var(--vtd-sig-gold-text);
+  border-bottom: 1px solid color-mix(in srgb, var(--se-gold) 25%, var(--se-border));
+  background: var(--vtd-sig-table-head-bg);
 }
 
 .vtd-sig-table {
@@ -1928,7 +1928,7 @@
   font-size: 8px;
   font-weight: 700;
   letter-spacing: 0.02em;
-  color: color-mix(in srgb, #c9a227 80%, var(--se-text-muted));
+  color: color-mix(in srgb, var(--se-gold) 80%, var(--se-text-muted));
   border-bottom: 1px solid var(--se-border);
   white-space: nowrap;
 }
@@ -2060,13 +2060,13 @@
   font-variant-numeric: tabular-nums;
 }
 
-.vtd-sig-table-status--cold { color: #ef5350; }
-.vtd-sig-table-status--warming { color: #ffe082; }
-.vtd-sig-table-status--hot { color: #82b1ff; }
+.vtd-sig-table-status--cold { color: var(--vtd-status-cold); }
+.vtd-sig-table-status--warming { color: var(--vtd-status-warm); }
+.vtd-sig-table-status--hot { color: var(--vtd-status-hot); }
 
-.vtd-sig-table-status--nomatch { color: #ef5350; }
-.vtd-sig-table-status--pending { color: #ffe082; }
-.vtd-sig-table-status--match { color: #82b1ff; }
+.vtd-sig-table-status--nomatch { color: var(--vtd-status-cold); }
+.vtd-sig-table-status--pending { color: var(--vtd-status-warm); }
+.vtd-sig-table-status--match { color: var(--vtd-status-hot); }
 
 .vtd-sig-row-pct {
   font-size: 9px;
@@ -2266,7 +2266,7 @@
   border: 1px solid var(--se-border);
   border-radius: 10px;
   overflow: hidden;
-  background: var(--se-center-bg, #131722);
+  background: var(--se-center-bg);
 }
 
 /* TradingChart tv-chart-wrap — slot-chart-wrap 과 동일하게 가용 높이 확보 */
@@ -2283,7 +2283,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--se-center-bg, #131722) 75%, transparent);
+  background: color-mix(in srgb, var(--se-center-bg) 75%, transparent);
   font-size: 12px;
   color: var(--se-text-muted);
 }