:root{
  --bg:#f4f5fa; --bg2:#eef0f7; --card:#ffffff; --ink:#1b2030; --ink2:#3b4254;
  --muted:#8a90a4; --line:#ebedf3;
  --accent:#ff4d6d; --accent-d:#e23a59; --accent2:#5b8def; --accent2-d:#3f6fd1;
  --good:#15a86b; --warn:#e89b29; --bad:#e0524f; --dead:#9aa1b2;
  --shadow-sm:0 1px 2px rgba(24,28,45,.05);
  --shadow:0 2px 6px rgba(24,28,45,.05),0 12px 28px rgba(24,28,45,.06);
  --shadow-lg:0 8px 30px rgba(24,28,45,.10);
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
    "Malgun Gothic",Roboto,"Helvetica Neue",sans-serif;
  background:
    radial-gradient(1200px 400px at 100% -10%, #ffeef1 0%, rgba(255,238,241,0) 60%),
    radial-gradient(1000px 360px at -10% 0%, #eaf1ff 0%, rgba(234,241,255,0) 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h3{margin:0; font-weight:800; letter-spacing:-.3px}
h1{font-size:18px} h3{font-size:14.5px; font-weight:700}

/* topbar */
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:13px 24px; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  font-size:24px; color:#fff; width:42px;height:42px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#ff85a0); border-radius:13px;
  box-shadow:0 4px 12px rgba(255,77,109,.35);
}
.sub{margin:2px 0 0; color:var(--muted); font-size:12px; font-weight:500}
.topctrl{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* segmented control */
.seg{display:inline-flex; background:var(--bg2); border-radius:11px; padding:3px; border:1px solid var(--line)}
.seg button{
  border:0; background:transparent; padding:7px 15px; border-radius:8px;
  font-size:13px; color:var(--muted); cursor:pointer; font-weight:700; transition:.18s;
}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--card); color:var(--accent); box-shadow:var(--shadow-sm)}
.seg.sm button{padding:5px 11px; font-size:12px}
.seg-lbl{display:flex;flex-direction:column;gap:4px}

.ctrl{
  appearance:none; border:1px solid var(--line); background:var(--card);
  padding:9px 32px 9px 13px; border-radius:11px; font-size:13px; color:var(--ink);
  cursor:pointer; font-weight:600; transition:.15s; box-shadow:var(--shadow-sm);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238a90a4'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center;
}
.ctrl:hover{border-color:#d7dbe6}
.ctrl:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,77,109,.15)}

/* tabs */
.tabs{
  display:flex; gap:6px; padding:9px 20px; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line); overflow-x:auto; position:sticky; top:69px; z-index:19;
}
.tabs button{
  border:0; background:transparent; padding:8px 15px; font-size:13.5px; font-weight:700;
  color:var(--muted); cursor:pointer; border-radius:10px; white-space:nowrap; transition:.15s;
}
.tabs button:hover{background:var(--bg2); color:var(--ink)}
.tabs button.active{color:#fff; background:linear-gradient(135deg,var(--accent),#ff6f8a); box-shadow:0 4px 12px rgba(255,77,109,.30)}

/* layout */
main{padding:22px 24px 44px; max-width:1340px; margin:0 auto}
.panel.hidden{display:none}
.panel{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.span2{grid-column:1 / -1}
@media(max-width:900px){ .grid2{grid-template-columns:1fr} .span2{grid-column:auto} }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 15px; box-shadow:var(--shadow); min-width:0; transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-lg)}
.card-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:14px}
.card-h h3{position:relative; padding-left:11px}
.card-h h3::before{content:""; position:absolute; left:0; top:2px; bottom:2px; width:3.5px; border-radius:3px; background:linear-gradient(var(--accent),#ff8aa1)}
.hint{font-size:11.5px; color:var(--muted); font-weight:600; text-align:right}
.chartbox{position:relative; height:264px; width:100%}
.chartbox.tall{height:304px}
.chartbox canvas{position:absolute; inset:0}
@media(max-width:900px){ .chartbox{height:230px} .chartbox.tall{height:260px} }

/* filter bar */
.filterbar{display:flex; gap:18px; flex-wrap:wrap; align-items:flex-end; margin-bottom:6px}
.filterbar label{display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); font-weight:700}
.filt-hint{font-size:11.5px; color:var(--muted); font-weight:600; align-self:flex-end; padding-bottom:9px}

/* KPI cards */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px; margin:10px 0 4px}
.kpi{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:15px 16px 14px; box-shadow:var(--shadow); overflow:hidden; transition:transform .15s,box-shadow .2s;
}
.kpi::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--accent),#ff9bb0)}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.kpi .k-label{font-size:11.5px; color:var(--muted); font-weight:700; margin-bottom:7px; display:flex; align-items:center; gap:4px}
.kpi .k-val{font-size:22px; font-weight:800; letter-spacing:-.6px; color:var(--ink)}
.kpi .k-val .unit{font-size:12px; font-weight:600; color:var(--muted); margin-left:2px}
.kpi .k-delta{display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; margin-top:7px;
  padding:2px 8px; border-radius:20px}
.k-delta.up{color:var(--good); background:#e6f7ef} .k-delta.down{color:var(--bad); background:#fdeceb}
.k-delta.flat{color:var(--muted); background:var(--bg2)}
.k-delta.inv-up{color:var(--bad); background:#fdeceb} .k-delta.inv-down{color:var(--good); background:#e6f7ef}

/* tables */
.tablewrap{overflow-x:auto; border-radius:10px}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px}
th,td{padding:9px 11px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th:first-child,td:first-child{text-align:left; position:sticky; left:0; background:var(--card)}
thead th{color:var(--muted); font-weight:800; font-size:11px; text-transform:none; background:var(--bg2);
  border-bottom:1px solid var(--line); position:sticky; top:0}
thead th:first-child{background:var(--bg2)}
tbody tr:hover td,tbody tr:hover th{background:#fbfcfe}
tbody tr:last-child td{border-bottom:0}
.grade{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:800}
.g-good{background:#e3f6ed; color:var(--good)} .g-warn{background:#fcf2dd; color:#b9831f}
.g-bad{background:#fde7e6; color:var(--bad)} .g-dead{background:#eceef1; color:var(--dead)}

/* custom builder */
.builder{display:flex; gap:16px; flex-wrap:wrap}
.builder label{display:flex; flex-direction:column; gap:5px; font-size:11.5px; color:var(--muted); font-weight:700}
.metricbox{margin-top:14px; padding-top:13px; border-top:1px dashed var(--line)}
.metric-label{font-size:11.5px; color:var(--muted); font-weight:700; display:block; margin-bottom:9px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  border:1px solid var(--line); background:var(--card); border-radius:20px; padding:6px 14px;
  font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; transition:.14s;
}
.chip:hover{border-color:#d7dbe6; color:var(--ink)}
.chip.on{background:linear-gradient(135deg,var(--accent),#ff6f8a); border-color:transparent; color:#fff; box-shadow:0 3px 9px rgba(255,77,109,.28)}
.btn-sm{
  border:1px solid var(--line); background:var(--card); border-radius:9px; padding:6px 12px;
  font-size:12px; font-weight:700; cursor:pointer; color:var(--ink); transition:.14s; box-shadow:var(--shadow-sm);
}
.btn-sm:hover{background:var(--bg2)}

.foot{
  padding:18px 24px 32px; color:var(--muted); font-size:11.5px; text-align:center;
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap; max-width:1340px; margin:0 auto;
}
.loading{padding:60px; text-align:center; color:var(--muted)}

/* ---- source notes / badges ---- */
.srcnote{font-size:12px; font-weight:600; padding:10px 14px; border-radius:11px; margin-bottom:16px; border:1px solid transparent; display:flex; align-items:center; gap:6px}
.srcnote::before{content:""; width:8px;height:8px;border-radius:50%;flex:none}
.srcnote b{font-weight:800}
.src-ab{background:#eef3fe; color:#2f5fb0; border-color:#dde7fb}
.src-ab.srcnote::before{background:#5b8def}
.src-rds{background:#e9faf1; color:#127a4d; border-color:#cfeede}
.src-rds.srcnote::before{background:#15a86b}
.src-mix{background:#fff4f7; color:#b0395a; border-color:#ffdde6}
.src-mix.srcnote::before{background:var(--accent)}
.badge-ab,.badge-rds{display:inline-block; font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:6px; margin-left:4px; vertical-align:middle; letter-spacing:.2px}
.badge-ab{background:#dbe6fb; color:#2f5fb0}
.badge-rds{background:#cfeede; color:#127a4d}
.hint.badge-rds,.hint.badge-ab{font-size:10px;padding:3px 9px; border-radius:7px}

.srcsplit{display:flex; gap:13px; flex-wrap:wrap; margin-bottom:16px; align-items:stretch}
.srcsplit .src{flex:1; min-width:262px; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; border:1px solid; box-shadow:var(--shadow-sm)}
.srcsplit .src b{font-size:13.5px; font-weight:800}
.srcsplit .src span{font-size:11.5px; line-height:1.45}
.srcsplit .src u{text-decoration-thickness:2px; text-underline-offset:2px}
.srcsplit .src-ab{background:linear-gradient(180deg,#f4f8ff,#eaf1fe); border-color:#dbe6fb; color:#2f5fb0}
.srcsplit .src-rds{background:linear-gradient(180deg,#f1fcf6,#e7f9ef); border-color:#cfeede; color:#127a4d}
.srcwarn{flex-basis:100%; margin:3px 0 0; font-size:11.5px; color:var(--muted); font-weight:600}

/* ---- verdict box ---- */
.verdict{border-radius:16px; padding:18px 20px; margin-bottom:18px; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--card)}
.verdict.v-good{border-left:5px solid var(--good); background:linear-gradient(180deg,#f3fbf7,#fff)}
.verdict.v-warn{border-left:5px solid var(--warn); background:linear-gradient(180deg,#fffaf0,#fff)}
.verdict.v-mix{border-left:5px solid var(--accent2); background:linear-gradient(180deg,#f4f8ff,#fff)}
.verdict .v-h{font-size:15.5px; font-weight:800; margin-bottom:8px; letter-spacing:-.2px}
.verdict .v-body{font-size:13px; line-height:1.65; color:#2b3142}
.verdict .v-nums{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.verdict .v-num{font-size:12px; font-weight:700; background:rgba(255,255,255,.8); border:1px solid var(--line); padding:6px 11px; border-radius:9px; box-shadow:var(--shadow-sm)}
.v-num .d-up{color:var(--good)} .v-num .d-down{color:var(--bad)}
.v-num .d-up.inv{color:var(--bad)} .v-num .d-down.inv{color:var(--good)}