전략평가 상세설명 표시

frontend/src/styles/strategyEvaluation.css

@@ -675,18 +675,18 @@
   height: auto;
 }
 
-/* ── 매수/매도 분리 시그널 패널 ─────────────────────────────────────────── */
+/* ── 매수/매도 분리 시그널 패널 (3단: 매수 상태 · 매도 상태 · 상세 분석) ─ */
 .seval-signal-split {
   flex: 1;
   min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr);
+  gap: 8px;
   padding: 4px 3px;
 }
 
 .seval-side-card {
-  flex: 1;
+  flex-shrink: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -778,8 +778,7 @@
 }
 
 .seval-side-card-body {
-  flex: 1;
-  min-height: 0;
+  flex-shrink: 0;
   padding: 0 6px 6px;
   overflow: hidden;
   display: flex;
@@ -788,8 +787,7 @@
 
 /* ── 전략평가 전용 매치 비주얼 (vtd-heat-* 미사용) ─────────────────────────── */
 .seval-match-visual {
-  flex: 1;
-  min-height: 0;
+  flex-shrink: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -808,7 +806,7 @@
 
 /* 이퀄라이저 | 지표 목록 | 신호등 — 3열 (가상매매 vtd-sig-visual 동일) */
 .seval-match-visual-row {
-  --seval-gauge-rail-height: 108px;
+  --seval-gauge-rail-height: 88px;
   flex-shrink: 0;
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
@@ -822,6 +820,116 @@
   box-sizing: border-box;
 }
 
+/* ── 3단 — 상세 분석 패널 ─────────────────────────────────────────────────── */
+.seval-detail-panel {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid color-mix(in srgb, var(--se-gold, #e6c200) 28%, var(--se-border));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--vtd-sig-panel-bg, #0d111f) 85%, transparent);
+  overflow: hidden;
+}
+
+.seval-detail-panel-head {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--se-border) 80%, transparent);
+}
+
+.seval-detail-panel-title {
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  color: var(--se-gold, #e6c200);
+}
+
+.seval-detail-panel-meta {
+  font-size: 0.64rem;
+  font-weight: 600;
+  color: var(--se-text-muted);
+}
+
+.seval-detail-panel-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px 10px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.seval-detail-side {
+  flex-shrink: 0;
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid var(--se-border, var(--btd-divider));
+  background: color-mix(in srgb, var(--se-input-bg, #0d111f) 60%, transparent);
+}
+
+.seval-detail-side--buy {
+  border-color: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 30%, var(--se-border));
+  background: color-mix(in srgb, var(--gc-trade-buy, #ef5350) 5%, var(--vtd-sig-panel-bg, #0d111f));
+}
+
+.seval-detail-side--sell {
+  border-color: color-mix(in srgb, var(--gc-trade-sell, #4dabf7) 30%, var(--se-border));
+  background: color-mix(in srgb, var(--gc-trade-sell, #4dabf7) 5%, var(--vtd-sig-panel-bg, #0d111f));
+}
+
+.seval-detail-side-label {
+  margin: 0 0 8px;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+}
+
+.seval-detail-side--buy .seval-detail-side-label {
+  color: var(--gc-trade-buy, #ef5350);
+}
+
+.seval-detail-side--sell .seval-detail-side-label {
+  color: var(--gc-trade-sell, #4dabf7);
+}
+
+.seval-detail-footnote {
+  flex-shrink: 0;
+  margin: 0;
+  padding-top: 4px;
+  font-size: 0.62rem;
+  line-height: 1.5;
+  color: var(--se-text-muted);
+}
+
+.seval-interpret-content--compact .seval-interpret-overall {
+  margin-bottom: 10px;
+  padding: 8px 10px;
+}
+
+.seval-interpret-content--compact .seval-interpret-overall-text {
+  font-size: 0.76rem;
+  line-height: 1.55;
+}
+
+.seval-interpret-content--compact .seval-interpret-list {
+  gap: 6px;
+}
+
+.seval-interpret-content--compact .seval-interpret-item {
+  padding: 8px 10px;
+}
+
+.seval-interpret-content--compact .seval-interpret-reason {
+  font-size: 0.72rem;
+  line-height: 1.5;
+}
+
 .seval-match-pane {
   display: flex;
   flex-direction: column;