모의투자, 백테스팅 레이아웃 수정

frontend/src/styles/backtestDashboard.css

@@ -1,6 +1,7 @@
-/* 백테스팅 대시보드 (btd-*) — 앱 테마 변수 + 금색 포인트 */
+/* 백테스팅 대시보드 (btd-*) — BuilderPageShell 내부 콘텐츠 스타일 */
 
-.btd-page {
+.bps-page,
+.se-page {
   --btd-gold: #c9a227;
   --btd-gold-light: #e8c547;
   --btd-gold-dark: #b8860b;
@@ -8,105 +9,109 @@
   --btd-gold-border-strong: rgba(201, 162, 39, 0.35);
   --btd-gold-bg: rgba(201, 162, 39, 0.08);
   --btd-gold-bg-hover: rgba(201, 162, 39, 0.14);
-
-  display: flex;
-  height: calc(100vh - var(--tmb-h, 46px));
-  overflow: hidden;
-  background: var(--bg);
-  color: var(--text);
-  font-family: var(--font, 'Noto Sans KR', sans-serif);
 }
 
-.app.light .btd-page,
-html.theme-light .btd-page {
+.se-page--light {
   --btd-gold-border: rgba(184, 134, 11, 0.28);
   --btd-gold-border-strong: rgba(184, 134, 11, 0.45);
   --btd-gold-bg: rgba(201, 162, 39, 0.1);
   --btd-gold-bg-hover: rgba(201, 162, 39, 0.16);
 }
 
-/* ── 좌측 타임라인 사이드바 (~23%) ── */
-.btd-sidebar {
-  width: 23%;
-  min-width: 220px;
-  max-width: 300px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--btd-gold-border);
-  background: var(--bg2);
-  overflow: hidden;
-}
+.bps-center-content .btd-empty span { font-size: 48px; opacity: 0.35; }
+.btd-sidebar-hint { font-size: 0.72rem; opacity: 0.75; line-height: 1.6; }
 
-.btd-sidebar-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 12px 10px;
-  border-bottom: 1px solid var(--btd-gold-border);
-  flex-shrink: 0;
-}
-
-.btd-sidebar-bar {
-  width: 3px;
-  height: 18px;
-  border-radius: 2px;
-  background: linear-gradient(180deg, var(--btd-gold-light), var(--btd-gold-dark));
-  flex-shrink: 0;
-}
-
-.btd-sidebar-title {
-  margin: 0;
-  flex: 1;
-  font-size: 13px;
-  font-weight: 800;
-  color: var(--text);
-  letter-spacing: -0.2px;
-}
-
-.btd-sidebar-actions {
-  display: flex;
-  gap: 4px;
-}
-
-.btd-icon-btn {
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: 1px solid var(--btd-gold-border);
-  background: var(--btd-gold-bg);
-  color: var(--btd-gold);
-  font-size: 13px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.btd-icon-btn:hover:not(:disabled) { background: var(--btd-gold-bg-hover); }
-.btd-icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
-.btd-icon-btn--danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
-
-.btd-sidebar-empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  text-align: center;
-  color: var(--text3);
-  font-size: 12px;
-  gap: 8px;
-}
-.btd-sidebar-hint { font-size: 11px; opacity: 0.75; line-height: 1.6; }
-
-.btd-timeline {
+.bps-panel-body .btd-timeline {
   position: relative;
   flex: 1;
   overflow-y: auto;
-  padding: 12px 10px 16px 22px;
+  padding: 4px 2px 8px 14px;
+  min-height: 120px;
 }
 
+.bps-panel-body .btd-sidebar-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--se-text-dim);
+  font-size: 0.78rem;
+  gap: 8px;
+}
+
+.bps-center-content .btd-dashboard {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0;
+  overflow: hidden;
+}
+
+.bps-center-content .btd-empty {
+  flex: 1;
+  min-height: 240px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  color: var(--se-text-dim);
+  font-size: 0.85rem;
+}
+
+.btd-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.btd-meta-value {
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: var(--se-text);
+}
+
+.btd-footer-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.btd-footer-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--se-border);
+  background: color-mix(in srgb, var(--se-bg-elevated) 88%, transparent);
+}
+
+.btd-footer-stat-label {
+  font-size: 0.68rem;
+  color: var(--se-text-muted);
+}
+
+.btd-footer-stat-value {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--se-text);
+}
+
+.btd-footer-stat-value.up { color: var(--se-up); }
+.btd-footer-stat-value.down { color: var(--se-down); }
+
+@media (max-width: 1200px) {
+  .btd-footer-stats { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* legacy page layout removed — shell handles structure */
+
 .btd-timeline-line {
   position: absolute;
   left: 28px;
@@ -207,39 +212,6 @@ html.theme-light .btd-page {
   border: 1px solid rgba(239, 68, 68, 0.25);
 }
 
-/* ── 우측 메인 ── */
-.btd-main {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg);
-}
-
-.btd-dashboard {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 12px 16px 10px;
-  overflow: hidden;
-}
-
-.btd-empty {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  color: var(--text3);
-  font-size: 13px;
-}
-.btd-empty span { font-size: 48px; opacity: 0.35; }
-
 /* ── 섹션 헤더 (금색 바) ── */
 .btd-section-head {
   display: flex;