:root{--g:#1E6B4F;--g2:#134A36;--gl:#EAF3EE;--o:#B4440E;--ol:#FBEDE5;--t:#13241D;--m:#5B6B64;--b:#E1E7E3;--bg:#F3F6F4}
*{box-sizing:border-box}
body{margin:0;font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--t);background:var(--bg);font-size:15px}
a{color:var(--g)}
header{background:#fff;border-bottom:1px solid var(--b);padding:0 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
header .brand{font-weight:800;color:var(--g);padding:16px 0}
header nav{display:flex;gap:4px;flex-wrap:wrap}
header nav a{text-decoration:none;color:var(--t);padding:16px 12px;font-weight:600}
header nav a.on{color:var(--g);box-shadow:inset 0 -3px 0 var(--g)}
header .me{margin-left:auto;color:var(--m);font-size:14px}
main{max-width:1180px;margin:0 auto;padding:24px}
h1{font-size:22px;margin:0 0 16px}
h2{font-size:17px;margin:24px 0 10px}
.card{background:#fff;border:1px solid var(--b);border-radius:12px;padding:18px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.kpi .n{font-size:28px;font-weight:800}
.kpi .l{color:var(--m);font-size:13px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border-bottom:1px solid var(--b);padding:9px 10px;text-align:left;vertical-align:top;font-size:14px}
th{background:#F7F9F8;font-weight:700;white-space:nowrap}
.tw{overflow-x:auto;border:1px solid var(--b);border-radius:12px}
.btn{display:inline-block;border:0;border-radius:8px;padding:10px 16px;font-weight:700;font-size:14px;cursor:pointer;text-decoration:none;font-family:inherit}
.btn.p{background:var(--g);color:#fff}.btn.p:hover{background:var(--g2)}
.btn.s{background:#fff;color:var(--t);border:1px solid #C9D2CD}
.btn.d{background:#fff;color:var(--o);border:1px solid #E7B89E}
.btn.big{padding:14px 28px;font-size:16px}
input,select,textarea{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid #C9D2CD;border-radius:8px}
label{font-size:13px;font-weight:700;color:#2A3A33}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.row>div{display:flex;flex-direction:column;gap:4px}
.flash{background:var(--gl);color:var(--g2);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-weight:600}
.err{background:var(--ol);color:#7A3410;border-radius:10px;padding:12px 16px;margin-bottom:16px}
.err li{margin:4px 0}
.warn{background:#FFF7E0;color:#6B4E00;border-radius:10px;padding:12px 16px;margin-bottom:16px}
.tag{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.tag.ok{background:var(--gl);color:var(--g2)}.tag.bad{background:var(--o);color:#fff}
.tag.mute{background:#EEF1EF;color:#4A5852}.tag.draft{background:#FFF2CC;color:#6B4E00}
.bad-n{color:var(--o);font-weight:800}
.muted{color:var(--m);font-size:13px}
.test-banner{background:#FFF2CC;color:#6B4E00;text-align:center;padding:6px;font-size:13px;font-weight:700}
.login{max-width:360px;margin:80px auto}
.login input{width:100%}

.kpi .n .unit,.trend-kpi .n .unit{font-size:15px;font-weight:700;margin-left:2px;color:var(--m)}
.trend-kpi{margin-bottom:12px}
.trend-kpi .l{color:var(--m);font-size:13px}
.trend-kpi .n{font-size:24px;font-weight:800}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#2A3A33;margin:4px 0 8px}
.chart-legend .sw{display:inline-block;width:14px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}
.chart-legend .sw.bar{background:#2F8A66}
.chart-legend .sw.line{background:#B4440E;height:3px}
.trend-table{margin-top:10px}
.trend-table summary{cursor:pointer;font-weight:700;color:var(--g);padding:6px 0}
.trend-table .tw{max-height:320px;overflow-y:auto;margin-top:6px}
