전략편집기 수정

frontend/src/styles/builderPageShell.css

@@ -77,6 +77,163 @@
   min-height: 0;
   display: flex;
   min-width: 0;
+  align-items: stretch;
+}
+
+/* 좌·우 접이식 패널 — 실시간 차트 mp-panel-handle / rsp-handle 과 동일 연결감 */
+.bps-side-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  align-self: stretch;
+  flex-shrink: 0;
+  min-height: 0;
+  height: 100%;
+  position: relative;
+  z-index: 8;
+}
+
+.bps-side-wrap--right {
+  flex-direction: row;
+  flex-shrink: 0;
+  min-width: 16px;
+}
+
+/* 접기 핸들 — 패널·탭 배경과 동일 색, 경계에 밀착 */
+.bps-panel-handle {
+  align-self: center;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 20;
+  pointer-events: auto;
+  width: 16px;
+  height: 56px;
+  border: 1px solid var(--se-border);
+  color: var(--se-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
+  padding: 0;
+}
+
+.bps-panel-handle--left {
+  margin-left: -1px;
+  background: var(--se-bg-elevated);
+  border-left: none;
+  border-radius: 0 8px 8px 0;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35);
+}
+
+.bps-panel-handle--right {
+  margin-right: -1px;
+  background: var(--se-palette-bg);
+  border-right: none;
+  border-radius: 8px 0 0 8px;
+  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.bps-panel-handle:hover {
+  color: var(--se-text);
+}
+
+.bps-panel-handle--left:hover {
+  background: var(--se-bg-muted);
+  box-shadow: 3px 0 14px rgba(0, 0, 0, 0.45);
+}
+
+.bps-panel-handle--right:hover {
+  background: color-mix(in srgb, var(--se-bg-muted) 70%, var(--se-palette-bg));
+  box-shadow: -3px 0 14px rgba(0, 0, 0, 0.45);
+}
+
+.bps-panel-handle--open.bps-panel-handle--left {
+  border-color: color-mix(in srgb, var(--se-accent) 30%, var(--se-border));
+}
+
+.bps-side-wrap--right.bps-side-wrap--open .bps-panel-handle--right {
+  border-color: color-mix(in srgb, var(--se-accent) 35%, var(--se-border));
+}
+
+/* 좌측 패널 — market-panel 처럼 핸들과 한 덩어리 */
+.bps-side-wrap--left .bps-left.bps-left--collapsible {
+  background: var(--se-bg-elevated);
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+}
+
+.bps-left--collapsible {
+  width: 0;
+  flex: 0 0 0;
+  min-width: 0;
+  border-right: none;
+  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.bps-left--collapsible.bps-left--collapsible--open,
+.bps-side-wrap--left.bps-side-wrap--open .bps-left--collapsible {
+  width: var(--bps-left-width, 380px);
+  flex: 0 0 var(--bps-left-width, 380px);
+  border-right: 1px solid var(--se-border);
+}
+
+.bps-side-wrap--left .bps-left--collapsible .bps-panel {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  margin: 0;
+  padding: 12px 10px 10px;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+/* 우측 패널 — rsp-wrap 처럼 탭+본문과 핸들 연결 */
+.bps-side-wrap--right .bps-right.bps-right--collapsible {
+  background: var(--se-palette-bg);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+.bps-side-wrap--right .bps-right--collapsible .bps-right-tabs {
+  flex-shrink: 0;
+  background: var(--se-bg-muted);
+  border-bottom: 1px solid var(--se-border);
+}
+
+.bps-side-wrap--right:not(.bps-side-wrap--open) .bps-right--collapsible .bps-right-tabs,
+.bps-side-wrap--right:not(.bps-side-wrap--open) .bps-right--collapsible .bps-right-body {
+  min-width: 0;
+}
+
+.bps-side-wrap--right.bps-side-wrap--open .bps-right--collapsible .bps-right-tabs,
+.bps-side-wrap--right.bps-side-wrap--open .bps-right--collapsible .bps-right-body,
+.bps-right--collapsible.bps-right--collapsible--open .bps-right-tabs,
+.bps-right--collapsible.bps-right--collapsible--open .bps-right-body {
+  min-width: var(--bps-right-width, 380px);
+}
+
+.bps-side-wrap--right .bps-right--collapsible .bps-right-body {
+  flex: 1;
+  min-height: 0;
+}
+
+.bps-center-content--left-collapsed,
+.bps-center-content--right-collapsed,
+.bps-center-content--both-collapsed {
+  flex: 1;
+  min-width: 0;
 }
 
 .bps-left {
@@ -219,6 +376,30 @@
   overflow: hidden;
 }
 
+/* 접이식 우측 — .bps-right 고정 너비(280px)보다 뒤에 두어 덮어씀 */
+.bps-right.bps-right--collapsible {
+  width: 0;
+  flex: 0 0 0;
+  min-width: 0;
+  max-width: 0;
+  border-left: none;
+  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.22s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.bps-right.bps-right--collapsible.bps-right--collapsible--open,
+.bps-side-wrap--right.bps-side-wrap--open .bps-right.bps-right--collapsible {
+  width: var(--bps-right-width, 380px);
+  flex: 0 0 var(--bps-right-width, 380px);
+  max-width: var(--bps-right-width, 380px);
+  border-left: 1px solid var(--se-border);
+}
+
+.bps-page .bps-right.bps-right--collapsible:not(.bps-right--collapsible--open) {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .bps-right-tabs {
   display: flex;
   border-bottom: 1px solid var(--se-border);

frontend/src/styles/strategyEditor.css

@@ -1087,7 +1087,18 @@
   color: var(--se-text);
   font-size: 0.72rem;
 }
-.se-combo-num { width: 100%; }
+.se-combo-num { width: 100%; display: flex; flex-direction: column; gap: 6px; }
+.se-combo-num--always-input .se-combo-num-input { order: -1; }
+.se-combo-num-select { width: 100%; }
+
+.se-combo-field {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.se-combo-field-select { width: 100%; }
+.sp-cond-field .se-combo-field .se-combo-num { margin-top: 0; }
 .se-combo-num-input:focus {
   outline: none;
   border-color: var(--se-input-focus);
@@ -1188,6 +1199,13 @@
   color: color-mix(in srgb, var(--se-success) 75%, transparent);
 }
 .se-node-config-bar .sp-cond-editor { margin: 0; }
+
+.sp-cond-row-composite-tf {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 8px;
+}
 .se-node-config-bar .sp-cond-sel,
 .se-node-config-bar .sp-cond-num {
   background: var(--se-input-bg);
@@ -1339,6 +1357,100 @@
   box-shadow: 0 0 12px color-mix(in srgb, var(--se-accent) 12%, transparent);
 }
 
+.se-palette-subtabs {
+  display: flex;
+  margin: 4px 10px 0;
+  border-bottom: 1px solid var(--se-border);
+  flex-shrink: 0;
+}
+.se-palette-subtab {
+  flex: 1;
+  padding: 8px 6px;
+  border: none;
+  background: transparent;
+  color: var(--se-text-muted);
+  font-size: 0.72rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.se-palette-subtab--on {
+  color: var(--se-tab-active);
+  box-shadow: inset 0 -2px 0 var(--se-tab-active);
+}
+.se-palette-subtab:first-child.se-palette-subtab--on {
+  color: var(--se-palette-section-ind, #2dd4bf);
+  box-shadow: inset 0 -2px 0 var(--se-palette-section-ind, #2dd4bf);
+}
+.se-palette-subtab:last-child.se-palette-subtab--on {
+  color: var(--se-palette-section-composite, #c084fc);
+  box-shadow: inset 0 -2px 0 var(--se-palette-section-composite, #c084fc);
+}
+
+.se-palette-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 8px 0 8px;
+  padding: 0 2px;
+}
+.se-palette-toolbar-title {
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--se-text-dim);
+  font-weight: 700;
+}
+.se-palette-section--aux .se-palette-toolbar-title { color: var(--se-palette-section-ind); }
+.se-palette-section--composite .se-palette-toolbar-title { color: var(--se-palette-section-composite, #c084fc); }
+
+.se-palette-toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.se-palette-tool-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 6px;
+  border: 1px solid var(--se-border);
+  background: var(--se-btn-bg);
+  color: var(--se-text-muted);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+.se-palette-tool-btn:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--se-accent) 45%, transparent);
+  color: var(--se-text);
+  background: var(--se-bg-elevated);
+}
+.se-palette-tool-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.se-palette-tool-btn--danger:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--se-danger) 50%, transparent);
+  color: var(--se-danger);
+}
+
+.se-palette-empty {
+  margin: 12px 0 0;
+  font-size: 0.72rem;
+  color: var(--se-text-muted);
+  text-align: center;
+}
+
+.se-palette-item-modal .se-field-lbl {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 10px;
+}
+
 .se-palette-section { padding: 0 10px 10px; }
 .se-palette-section--scroll { flex: 1; overflow-y: auto; min-height: 0; }
 .se-palette-section h3 {

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 {