전략편집기 수정

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);