From 2b8dcff26e9876d61564c866a5d2e2654e72afea Mon Sep 17 00:00:00 2001
From: Macbook <macbook@172-11-15-87.lightspeed.chrlnc.sbcglobal.net>
Date: Mon, 1 Jun 2026 09:07:00 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B0=80=EC=83=81=EB=A7=A4=EB=A7=A4=20?=
 =?UTF-8?q?=ED=88=B4=EB=B0=94=202=EB=9D=BC=EC=9D=B8=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=82=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/builderPageShell.css      | 53 +++++++++++----
 .../src/styles/virtualTradingDashboard.css    | 64 +++++++++++--------
 2 files changed, 79 insertions(+), 38 deletions(-)

diff --git a/frontend/src/styles/builderPageShell.css b/frontend/src/styles/builderPageShell.css
index 515d41d..e805c58 100644
--- a/frontend/src/styles/builderPageShell.css
+++ b/frontend/src/styles/builderPageShell.css
@@ -49,35 +49,64 @@
   align-self: center;
 }
 
-/* 가상투자 — 타이틀바 3열 (좌측패널폭 | 세션설정 | 뷰옵션) */
+/* 가상투자 — 타이틀·세션·뷰 옵션 한 줄 (좁은 해상도에서 2줄 줄바꿈 방지) */
 .bps-header--vtd {
-  display: grid;
-  grid-template-columns:
-    calc(var(--bps-left-width, 380px) + var(--bps-left-handle, 16px) + calc(var(--bps-left-open, 1) * var(--bps-splitter-w, 5px)))
-    minmax(0, 1fr)
-    auto;
+  display: flex;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 8px 12px;
-  padding: 8px 18px;
-  min-height: 48px;
+  gap: 8px 10px;
+  padding: 6px 14px;
+  min-height: 44px;
+  overflow: hidden;
 }
 
 .bps-header--vtd .bps-header-left {
+  flex: 0 0 auto;
   min-width: 0;
+  max-width: min(28vw, 200px);
   overflow: hidden;
 }
 
+.bps-header--vtd .bps-title {
+  font-size: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bps-header--vtd .bps-subtitle {
+  white-space: nowrap;
+}
+
 .bps-header--vtd .bps-header-center {
   display: flex;
   align-items: center;
+  flex: 1 1 auto;
   min-width: 0;
-  justify-self: stretch;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.bps-header--vtd .bps-header-center::-webkit-scrollbar {
+  display: none;
 }
 
 .bps-header--vtd .bps-header-actions {
-  justify-self: end;
-  flex-shrink: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  flex: 0 0 auto;
   min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.bps-header--vtd .bps-header-actions::-webkit-scrollbar {
+  display: none;
 }
 
 .bps-header--vtd .header-toolbar-divider {
diff --git a/frontend/src/styles/virtualTradingDashboard.css b/frontend/src/styles/virtualTradingDashboard.css
index 2e24f2f..f65631f 100644
--- a/frontend/src/styles/virtualTradingDashboard.css
+++ b/frontend/src/styles/virtualTradingDashboard.css
@@ -41,8 +41,8 @@
 
 .vtd-header-select {
   min-width: 0;
-  max-width: 148px;
-  padding: 4px 8px;
+  max-width: 128px;
+  padding: 4px 6px;
   border-radius: 8px;
   border: 1px solid var(--se-border);
   background: var(--se-panel-card-bg);
@@ -50,14 +50,19 @@
   font-size: 11px;
   line-height: 1.3;
   flex-shrink: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .vtd-header-select--strategy {
-  max-width: 132px;
+  max-width: 120px;
+  min-width: 72px;
 }
 
 .vtd-header-select--narrow {
-  max-width: 118px;
+  max-width: 104px;
+  min-width: 64px;
 }
 
 /* 타이틀바 — 뷰 옵션 (우측, 드롭다운·아이콘 한 줄) */
@@ -85,37 +90,44 @@
   font-size: 10px;
 }
 
-@media (max-width: 1280px) {
-  .bps-header--vtd {
-    gap: 6px 8px;
-    padding: 6px 12px;
-    min-height: 44px;
-  }
-
+@media (max-width: 1400px) {
   .bps-header--vtd .bps-header-left .bps-subtitle {
     display: none;
   }
 
-  .bps-header--vtd .bps-header-center {
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .bps-header--vtd .bps-header-actions {
-    flex-shrink: 0;
-  }
-
   .vtd-header-select--strategy {
-    max-width: 108px;
-  }
-
-  .vtd-header-select--narrow {
     max-width: 100px;
   }
 
+  .vtd-header-select--narrow {
+    max-width: 92px;
+  }
+}
+
+@media (max-width: 1280px) {
+  .bps-header--vtd {
+    gap: 6px;
+    padding: 6px 10px;
+    min-height: 42px;
+  }
+
+  .bps-header--vtd .bps-header-left {
+    max-width: min(24vw, 160px);
+  }
+
+  .vtd-header-select--strategy {
+    max-width: 88px;
+    min-width: 64px;
+  }
+
+  .vtd-header-select--narrow {
+    max-width: 80px;
+    min-width: 56px;
+  }
+
   .vtd-session-btn {
-    padding: 4px 10px;
-    font-size: 0.75rem;
+    padding: 4px 8px;
+    font-size: 0.72rem;
   }
 }