추세검색기 기능 추가

frontend/src/styles/virtualTradingDashboard.css

@@ -1443,8 +1443,8 @@
 .vtd-sig-visual {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: stretch;
-  gap: 10px 12px;
+  align-items: start;
+  gap: 12px 14px;
   padding: 8px 10px;
   border: 1px solid color-mix(in srgb, var(--se-gold) 30%, var(--se-border));
   border-radius: 10px;
@@ -1465,6 +1465,15 @@
   flex-shrink: 0;
 }
 
+.vtd-sig-eq-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  min-width: 40px;
+  max-width: 52px;
+}
+
 .vtd-sig-eq-scale {
   display: flex;
   flex-direction: column;
@@ -1477,8 +1486,7 @@
 
 .vtd-sig-eq-bar-wrap {
   position: relative;
-  flex: 1;
-  min-width: 36px;
+  width: 100%;
 }
 
 .vtd-sig-eq-bar {
@@ -1516,18 +1524,18 @@
 }
 
 .vtd-sig-eq-badge {
-  position: absolute;
-  right: -8px;
-  top: -4px;
-  transform: translateX(100%);
-  font-size: 9px;
+  margin-top: 6px;
+  font-size: 8px;
   font-weight: 800;
+  letter-spacing: 0.04em;
   color: #82b1ff;
   white-space: nowrap;
+  text-align: center;
+  line-height: 1.2;
   text-shadow: 0 0 8px color-mix(in srgb, #82b1ff 60%, transparent);
 }
 
-/* Proximity Heatmap Bar — 이퀄라이저 ↔ 신호등 사이 (Cybernetic Command Desk) */
+/* Proximity Heatmap Bar — 이퀄라이저 ↔ 신호등 사이 */
 .vtd-heat-list {
   list-style: none;
   margin: 0;
@@ -1575,7 +1583,7 @@
   top: 50%;
   transform: translateY(-50%);
   z-index: 2;
-  max-width: calc(100% - 48px);
+  max-width: calc(100% - 52px);
   font-size: 9px;
   font-weight: 600;
   color: var(--vtd-heat-label-color);
@@ -1594,6 +1602,7 @@
   min-width: 0;
   border-radius: 7px 0 0 7px;
   transition: width 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
+  z-index: 0;
 }
 
 .vtd-heat-pct {
@@ -1601,7 +1610,7 @@
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 2;
+  z-index: 3;
   font-size: 10px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;