전략편집기 수정

frontend/src/styles/virtualTradingDashboard.css

@@ -469,6 +469,8 @@
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  container-type: inline-size;
+  container-name: vtd-wrap;
 }
 
 .vtd-grid-wrap--focus {
@@ -838,8 +840,9 @@
 .vtd-grid {
   flex: 1;
   min-height: 0;
+  width: 100%;
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
   grid-auto-rows: minmax(520px, auto);
   gap: 14px;
   padding: 4px 4px 12px;
@@ -851,13 +854,20 @@
   align-items: stretch;
 }
 
-@media (max-width: 1280px) {
+/* 좌·우 패널 접힘 시 중앙 영역이 넓어지면 카드 열 수 자동 증가 */
+@container vtd-wrap (min-width: 1180px) {
   .vtd-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
   }
 }
 
-@media (max-width: 780px) {
+@container vtd-wrap (min-width: 1540px) {
+  .vtd-grid {
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+  }
+}
+
+@container vtd-wrap (max-width: 720px) {
   .vtd-grid {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -1001,21 +1011,13 @@
 .vtd-card-strategy-field {
   display: flex;
   align-items: center;
-  gap: 6px;
   flex-shrink: 1;
   min-width: 0;
 }
 
-.vtd-card-strategy-label {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--se-text-muted);
-  white-space: nowrap;
-}
-
 .vtd-card-strategy-select {
-  min-width: 100px;
-  max-width: 180px;
+  min-width: 108px;
+  max-width: 160px;
   padding: 4px 8px;
   border-radius: 8px;
   border: 1px solid var(--se-border);
@@ -1177,16 +1179,26 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
+  flex: 1 1 96px;
+  min-width: 72px;
+  max-width: 200px;
+  overflow: hidden;
 }
 
 .vtd-card-ko {
   font-size: 14px;
   font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vtd-card-sym {
   font-size: 10px;
   color: var(--se-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .vtd-card-meta {