:root{
  --font:'Roboto','Noto Sans KR',sans-serif;
  --ink:#16191D; --sub:#4A5561; --faint:#8A94A0;
  --line:#E1E4E9; --bg:#F5F6F8; --card:#FFFFFF;
  --accent:#16191D; --total-bg:#F4EFE6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:13px}
.num,td.num{font-variant-numeric:tabular-nums}

.app{display:flex;min-height:100vh}
.side{width:196px;flex:0 0 196px;background:#FFFFFF;border-right:1px solid var(--line);
  padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.app-brand{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:18px}
.brand-sub{font-size:12px;font-weight:400;color:var(--faint)}
.navgrp{font-size:12px;color:var(--faint);letter-spacing:.04em;margin:14px 0 6px;font-weight:500}
.navitem{padding:7px 10px;cursor:pointer;font-size:13px;color:var(--sub);border-left:2px solid transparent}
.navitem:hover{background:#F2F4F6}
.navitem.on{color:var(--ink);font-weight:700;background:#F2F4F6;border-left-color:var(--ink)}
.metacap{font-size:12px;color:var(--faint);line-height:1.5}

.main{flex:1;min-width:0;padding:18px 22px 60px}
.loading{display:flex;align-items:center;gap:10px;color:var(--sub);padding:40px 0;font-size:13px}
.spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--ink);
  border-radius:50%;animation:sp .8s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* 상단 날짜 바 */
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.topbar input[type=date]{font-family:var(--font);font-size:13px;padding:6px 8px;
  border:1px solid var(--line);background:#FFF;color:var(--ink)}
.pbtn{font-family:var(--font);font-size:12px;padding:6px 10px;border:1px solid var(--line);
  background:#FFF;color:var(--sub);cursor:pointer}
.pbtn:hover{background:#F2F4F6}
.pbtn.on{background:var(--ink);color:#FFF;border-color:var(--ink);font-weight:500}

/* 섹션/카드 */
.sec{margin:18px 0 8px;font-size:14px;font-weight:700}
.sec .cap{font-weight:400;color:var(--faint);font-size:12px;margin-left:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.card{background:var(--card);border:1px solid var(--line);padding:12px 14px}
.card .lb{font-size:12px;color:var(--sub)}
.card .v{font-size:19px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.card .d{font-size:12px;margin-top:3px;font-variant-numeric:tabular-nums}
.d.up{color:#127A46}.d.dn{color:#C22F2F}.d.fl{color:var(--faint)}

/* 컨트롤 행 */
.ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:10px 0}
.ctl .fld{display:flex;flex-direction:column;gap:4px}
.ctl label{font-size:12px;color:var(--sub)}
.ctl select,.ctl input[type=text]{font-family:var(--font);font-size:13px;padding:6px 8px;
  border:1px solid var(--line);background:#FFF;color:var(--ink);min-width:120px}

/* 멀티셀렉트(체크 드롭다운) */
.ms{position:relative}
.ms>button{font-family:var(--font);font-size:13px;padding:6px 10px;border:1px solid var(--line);
  background:#FFF;color:var(--ink);cursor:pointer;min-width:150px;max-width:280px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.ms .panel{position:absolute;z-index:40;top:calc(100% + 4px);left:0;background:#FFF;
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.10);padding:10px;
  min-width:220px;max-height:340px;overflow:auto;display:none}
.ms.open .panel{display:block}
.ms .pnbtns{display:flex;gap:6px;margin-bottom:8px}
.ms .pnbtns button{flex:1;font-size:12px;padding:5px 0;border:1px solid var(--line);background:#FFF;cursor:pointer}
.ms .pnbtns button:hover{background:#F2F4F6}
.ms .opt{display:flex;align-items:center;gap:7px;padding:4px 2px;font-size:13px;cursor:pointer;white-space:nowrap}
.ms .opt input{accent-color:var(--ink)}

/* 표 */
.tblwrap{overflow-x:auto;background:var(--card);border:1px solid var(--line)}
table.tb{border-collapse:collapse;width:100%;min-width:720px}
.tb th{position:sticky;top:0;background:#F2F4F6;color:var(--sub);font-weight:500;font-size:12px;
  padding:8px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;cursor:pointer;user-select:none}
.tb th:first-child{text-align:left}
.tb th .arr{font-size:12px;color:var(--ink)}
.tb td{padding:7px 12px;border-bottom:1px solid var(--line);font-size:13px;text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums;background:#FFF}
.tb td:first-child{text-align:left}
.tb tr.tot td{background:var(--total-bg);font-weight:700}
.tb td.dim{color:var(--ink)}
.tb td.hl-hi{background:#FFDE7A}
.tb td.hl-lo{background:#FFC5BC}

.chart{background:var(--card);border:1px solid var(--line);padding:8px;margin:10px 0}
.note{font-size:12px;color:var(--faint);margin:6px 0}
@media (max-width:900px){.side{display:none}.main{padding:12px}}