From 58cf1e1ec7874b66ce548f3f0fc1c4c10d7442fd Mon Sep 17 00:00:00 2001
From: Macbook <macbook@172-11-15-212.lightspeed.chrlnc.sbcglobal.net>
Date: Wed, 17 Jun 2026 08:36:37 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B0=A8=ED=8A=B8=20=ED=88=B4=EB=B0=94=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css | 48 +++++++++++++++++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6392f51..643ce33 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -62,6 +62,9 @@
     0 0 4px 2px #69f0ae,
     0 0 10px 4px #69f0ae55,
     0 0 16px 6px #b9f6ca1a;
+
+  /* 차트 우측 툴바 — 오버레이 visible 강조 (화면 타이틀 골드/오렌지 톤) */
+  --chart-overlay-visible-color: #e6c200;
 }
 
 /* ── Dark Theme: 도쿄 나이트 (THEME_SETTINGS.md §2.2) ───────────── */
@@ -91,6 +94,7 @@ html.theme-dark {
   --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
   --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
   --overlay-scrim: rgba(0, 0, 0, 0.55);
+  --chart-overlay-visible-color: #e6c200;
 }
 
 /* ── Light Theme (THEME_SETTINGS.md §2.1) ──────────────────────── */
@@ -120,6 +124,7 @@ html.theme-light {
   --accent-muted: color-mix(in srgb, var(--accent) 14%, transparent);
   --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
   --overlay-scrim: rgba(0, 0, 0, 0.35);
+  --chart-overlay-visible-color: #f57f17;
 }
 
 /* ── Blue Theme: 딥 네이비 (THEME_SETTINGS.md §2.3) ─────────────── */
@@ -149,6 +154,7 @@ html.theme-blue {
   --accent-muted: color-mix(in srgb, var(--accent) 22%, transparent);
   --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
   --overlay-scrim: rgba(0, 0, 0, 0.55);
+  --chart-overlay-visible-color: #ffd54f;
 }
 
 /* ── App Root ───────────────────────────────────────────────────── */
@@ -1177,6 +1183,9 @@ html.desktop-client .tmb-logo-version {
 
 /* 우측 세로 툴바 — 가격축 라벨 오른쪽 전용 영역 */
 .chart-right-toolbar {
+  --chart-overlay-visible-color: var(--se-toolbar-title, var(--se-gold, var(--chart-overlay-visible-color, #e6c200)));
+  --chart-overlay-visible-bg: color-mix(in srgb, var(--chart-overlay-visible-color) 20%, transparent);
+  --chart-overlay-visible-border: color-mix(in srgb, var(--chart-overlay-visible-color) 58%, transparent);
   width: var(--sidebar-w, 44px);
   flex-shrink: 0;
   background: var(--bg2);
@@ -2806,14 +2815,32 @@ html.desktop-client .tmb-logo-version {
   align-items: center;
 }
 .chart-right-toolbar-btn--overlay {
-  opacity: 0.92;
+  opacity: 1;
+  border: 1px solid transparent;
+  transition: color 0.12s, background 0.12s, border-color 0.12s, opacity 0.12s;
+}
+.chart-right-toolbar-btn--overlay:not(.chart-right-toolbar-btn--overlay-off) {
+  color: var(--chart-overlay-visible-color);
+  background: var(--chart-overlay-visible-bg);
+  border-color: var(--chart-overlay-visible-border);
+  opacity: 1;
+}
+.chart-right-toolbar-btn--overlay:not(.chart-right-toolbar-btn--overlay-off):hover {
+  color: var(--chart-overlay-visible-color);
+  background: color-mix(in srgb, var(--chart-overlay-visible-color) 30%, transparent);
+  border-color: color-mix(in srgb, var(--chart-overlay-visible-color) 72%, transparent);
+  opacity: 1;
 }
 .chart-right-toolbar-btn--overlay-off {
-  opacity: 0.38;
+  opacity: 0.32;
   color: var(--text-muted, #787b86);
+  background: transparent;
+  border-color: transparent;
 }
 .chart-right-toolbar-btn--overlay-off:hover {
-  opacity: 0.65;
+  opacity: 0.5;
+  color: var(--text2, var(--text-muted, #787b86));
+  background: color-mix(in srgb, var(--text-muted, #787b86) 10%, transparent);
 }
 .chart-right-toolbar-btn--restore.active {
   color: var(--accent);
@@ -2834,13 +2861,20 @@ html.desktop-client .tmb-logo-version {
   pointer-events: none;
 }
 .chart-right-toolbar-btn--custom1.active .chart-right-toolbar-custom1-badge {
-  color: var(--accent, #2962ff);
+  color: var(--chart-overlay-visible-color);
 }
 .chart-right-toolbar-btn--custom.active,
 .chart-right-toolbar-btn--custom1.active {
-  color: var(--accent);
-  border-color: rgba(122, 162, 247, 0.65);
-  background: rgba(122, 162, 247, 0.22);
+  color: var(--chart-overlay-visible-color) !important;
+  border: 1px solid var(--chart-overlay-visible-border) !important;
+  background: var(--chart-overlay-visible-bg) !important;
+  opacity: 1;
+}
+.chart-right-toolbar-btn--custom.active:hover,
+.chart-right-toolbar-btn--custom1.active:hover {
+  color: var(--chart-overlay-visible-color) !important;
+  background: color-mix(in srgb, var(--chart-overlay-visible-color) 30%, transparent) !important;
+  border-color: color-mix(in srgb, var(--chart-overlay-visible-color) 72%, transparent) !important;
 }
 
 /* Custom 오버레이 설정 모달 (보조지표 설정 ibsm 스타일) */