:root {
  --bg: #0f172a;
  --panel: #111827;
  --panel2: #060b14;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --line: #334155;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; background: #0f172a; }
body { margin: 0; min-height: 100vh; max-width: 100%; overflow-x: hidden; color: var(--text); background: radial-gradient(circle at top, rgba(38,64,108,.14), transparent 30%), linear-gradient(180deg, #02050a 0%, #040916 42%, #02050a 100%); }
.benchmark-shell { width: 100%; max-width: none; margin: 0; padding: 76px 14px 14px; }
.app-topbar { position: fixed; top: 0; left: 14px; right: 14px; z-index: 60; display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:12px; padding:10px 12px; margin: 0; background:rgba(5,11,22,.94); border:1px solid rgba(71,85,105,.46); box-shadow: 0 10px 24px rgba(2,6,23,.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color:var(--text); }
.topbar-brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; }
.brand-mark { color:#93c5fd; font-weight:900; }
.topbar-title { color:#d7deea; font-size:.95rem; font-weight:700; }
.topbar-clock { display:inline-flex; align-items:center; gap:8px; color:#e2e8f0; font-variant-numeric:tabular-nums; }
.clock-dot { width:9px; height:9px; border-radius:999px; background:#3ad47c; box-shadow:0 0 0 2px rgba(58,212,124,.14); }
.topbar-mode { display:inline-flex; align-items:center; justify-content:center; padding:7px 12px; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:#111827; color:#e5e7eb; font-size:.86rem; font-weight:700; }
.topbar-action { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:14px; border:1px solid rgba(148,163,184,.18); background:#1e293b; color:var(--text); font-weight:800; cursor:pointer; }
.panel { background: linear-gradient(180deg, rgba(7, 12, 22, 0.992), rgba(5, 9, 17, 0.995)); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 16px rgba(2,6,23,.14); }
.benchmark-hero { display: flex; background: linear-gradient(180deg, rgba(5,8,13,.998), rgba(4,6,10,.998)); border-bottom: 1px solid rgba(255,255,255,.03); justify-content: space-between; gap: 12px; align-items: flex-start; padding: 14px; }
.eyebrow { color: #cbd5e1; font-size: .78rem; font-weight: 800; letter-spacing: .10em; margin: 0 0 6px; text-transform: uppercase; }
h1 { font-size: clamp(1.65rem, 4.8vw, 2.65rem); margin: 0 0 8px; line-height: 1.2; }
h2 { font-size: 1rem; margin: 0 0 10px; }
.lede, .muted-copy, .footer-note { color: var(--muted); line-height: 1.5; }
.footer-strip { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.04); color:#d7dee9; font-size:.92rem; }
.footer-strip-note { color:#e5e7eb; white-space:nowrap; }
.nav-link { color: var(--text); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; background: linear-gradient(180deg, rgba(9, 15, 26, 0.985), rgba(7, 12, 20, 0.99)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.012); font-weight: 700; font-size: .88rem; }
.filter-panel { display: grid; grid-template-columns: 1.2fr 1fr .6fr .6fr; gap: 12px; margin-top: 16px; padding: 14px; }
.filter-group { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.filter-group h2 { flex: 1 0 100%; }
.filter-group label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: linear-gradient(180deg, rgba(6, 10, 17, 0.992), rgba(5, 8, 14, 0.994)); font-weight: 700; }
.filter-group select { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #0b1220; color: var(--text); }
.strategy-family-group { min-width: 0; }
.family-options { display: flex; flex-wrap: wrap; gap: 8px; }
.kpi-grid,.summary-grid,.chart-grid,.table-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-top: 16px; }
.chart-panel,.table-panel,.summary-panel { padding: 14px; }
.market-chart-grid { display: block; width: 100%; margin-top: 16px; }
.market-card { width: 100%; padding: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(7, 12, 22, 0.992), rgba(5, 9, 17, 0.995)); border: 1px solid var(--line); border-radius: 12px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(6, 10, 17, .985); color: #d6deea; border: 1px solid rgba(121, 137, 160, .12); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); font-size: .77rem; font-weight: 800; }
.market-line-chart { width: 100%; min-width: 0; height: auto; display: block; }
.market-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.market-stats span { padding: 6px 10px; border-radius: 999px; background: linear-gradient(180deg, rgba(6, 10, 17, 0.992), rgba(5, 8, 14, 0.994)); border: 1px solid var(--line); color: #cbd5e1; font-size: .78rem; font-weight: 700; }
.single-chart-card { overflow: hidden; width: 100%; }
.unified-chart { width: 100%; min-height: clamp(520px, 55vh, 860px); display: block; }
.unified-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; color: var(--muted); font-size: .82rem; }
.unified-legend span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; background: linear-gradient(180deg, rgba(6, 10, 17, 0.992), rgba(5, 8, 14, 0.994)); }
.unified-legend i { width: 18px; height: 3px; border-radius: 999px; display: inline-block; }
.rank-return { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.muted { color: var(--muted); font-size: .86rem; }
table { width: 100%; border-collapse: collapse; margin: 8px 0 0; table-layout: fixed; }
th, td { border: 1px solid var(--line); padding: 8px; text-align: left; font-size: 13px; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
th { background: linear-gradient(180deg, rgba(6, 10, 17, 0.992), rgba(5, 8, 14, 0.994)); }
td { background: linear-gradient(180deg, rgba(7, 12, 22, 0.992), rgba(5, 9, 17, 0.995)); }
code { color: #93c5fd; white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 980px) { .filter-panel { grid-template-columns: 1fr; } .benchmark-hero { flex-direction: column; } .app-topbar { grid-template-columns:1fr auto; align-items:start; } .topbar-title, .topbar-clock, .topbar-mode { grid-column:1 / -1; } .footer-strip { flex-direction:column; align-items:flex-start; } .footer-strip-note { white-space:normal; } }
@media (max-width: 820px) {
  .benchmark-shell { padding: 14px; }
  table { display: block; width: 100%; background: transparent; border-collapse: separate; border-spacing: 0; table-layout: auto; }
  table thead { display: none; }
  table tbody { display: block; }
  table tr { display: block; width: 100%; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(7, 12, 22, 0.992), rgba(5, 9, 17, 0.995)); }
  table th, table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; border: 0; border-bottom: 1px solid rgba(148,163,184,.22); padding: 9px 0; font-size: 14px; line-height: 1.38; background: transparent; }
  table tr > :last-child { border-bottom: 0; }
  table td[data-label]::before { content: attr(data-label); flex: 0 0 42%; color: #f8fafc; font-weight: 800; text-align: left; }
}