:root{
  --bg:#0B0E11; --panel:#10141B; --panel-2:#0C1016;
  --line:#1A1F28; --muted:#9AA4B2; --text:#E9EEF5;
  --accent:#F0B90B; --success:#0ECB81; --danger:#F6465D;
  --radius:14px; --radius-sm:10px; --shadow:0 6px 22px rgba(0,0,0,.35);
  --font:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html,body{background:var(--bg);color:var(--text);font-family:var(--font)}
*{box-sizing:border-box}

/* Header / Toolbar */
.header{padding:14px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent)}
.brand-title{font-size:18px;letter-spacing:.2px}
.subtle{color:var(--muted);font-size:12px}
.toolbar{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px;
}

/* KPIs */
.kpi-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:8px 0 4px}
@media (max-width:1200px){.kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi-card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
}
.kpi-title{font-size:11px;color:var(--muted);margin-bottom:6px}
.kpi-value{font-size:16px;font-weight:650}
.kpi-delta{font-size:11px;color:var(--success)}
.kpi-delta.neg{color:var(--danger)}
.value-pos{color:var(--success)} .value-neg{color:var(--danger)} .value-zero{color:var(--muted)}

/* Panels */
.chart-wrap{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; box-shadow:var(--shadow); margin-bottom:12px;
}

/* ✅ 차트 높이는 차트 div에만 */
#balance-chart{width:100%;height:420px}
#pnl-by-symbol,#trades-per-day,#cum-pnl,#return-by-symbol{width:100%;height:320px}

/* 📌 차트 겹침 방지 & 여백 균형 추가 */
.js-plotly-plot {
  margin-bottom: 20px;
}
.js-plotly-plot .xaxislayer-above text {
  transform: translateY(5px);
}
.plot-container {
  margin-bottom: 20px; /* 차트간 간격 확보 */
}

/* 📌 모바일에서도 좌우 균형 유지 */
@media (max-width: 768px) {
  .chart-wrap {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* ---- 거래내역 테이블 ---- */
.table-wrap .table-title{font-size:13px;color:var(--muted);margin:4px 0 10px 2px}

.table-wrap .table-scroll{
  max-height:420px; overflow:auto; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,0.02);
}

#trades-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:13px; color:#E6ECF3;
}
#trades-table thead th{
  position:sticky; top:0;
  background:#0E1218; color:#C7D0DB; font-weight:600;
  padding:10px; border-bottom:1px solid #242A33; z-index:1;
}
#trades-table tbody td{
  padding:9px 10px; border-bottom:1px solid #171C24;
}
#trades-table tbody tr:hover{ background:rgba(255,255,255,0.035); }

td.num{ font-family:var(--mono); text-align:right; }
td.side{ text-align:center; }

.badge{
  display:inline-block; min-width:48px; padding:3px 8px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
}
.badge-buy { background:rgba(14,203,129,.15); color:var(--success); border:1px solid rgba(14,203,129,.3); }
.badge-sell{ background:rgba(246,70,93,.15);  color:var(--danger);  border:1px solid rgba(246,70,93,.3); }

/* select */
.form-select{background-color:#0F141B;color:var(--text);border:1px solid var(--line)}
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px; /* 차트 사이 간격 */
}

/* 📱 모바일에서 세로 배치 */
@media (max-width: 768px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}


.chart-wrap {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
  height: 100%;
}
.balance-chart {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
}