:root{
  --navy:#1F4E78; --navy-d:#163A5A; --blue:#2E74B5; --lblue:#EAF2FA;
  --orange:#ED7D31; --green:#1E8E5A; --red:#C0392B; --amber:#B7791F;
  --bg:#F3F5F8; --card:#FFFFFF; --line:#E4E8EE;
  --text:#16202C; --muted:#6B7686; --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  background:var(--bg); color:var(--text);
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{height:6px;width:6px;}
::-webkit-scrollbar-thumb{background:#C7D0DB;border-radius:4px;}

/* ---------- App bar ---------- */
.appbar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(135deg,var(--navy),var(--navy-d));
  color:#fff; padding-top:calc(14px + env(safe-area-inset-top));
  padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.appbar .titles{min-width:0;}
.appbar h1{font-size:16px; margin:0; font-weight:800; letter-spacing:-.2px;}
.appbar .sub{font-size:11.5px; color:#BFD4E8; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.iconbtn{
  background:rgba(255,255,255,.14); border:none; color:#fff; border-radius:10px;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex:none;
}
.iconbtn:active{background:rgba(255,255,255,.26);}
a.iconbtn{text-decoration:none;}

/* week selector pill */
.weeksel{
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.14);
  border-radius:10px; padding:6px 10px; flex:none;
}
.weeksel select{
  background:transparent; border:none; color:#fff; font-family:inherit; font-size:12px; font-weight:700;
}
.weeksel select option{color:#000;}

/* ---------- content ---------- */
.content{padding:14px 14px 28px;}
@media (min-width:720px){ .content{max-width:760px; margin:0 auto;} }
.section-title{font-size:14px; font-weight:800; color:var(--navy); margin:18px 2px 10px; display:flex; align-items:center; gap:6px; justify-content:space-between;}
.section-title .tag{font-size:10.5px; font-weight:700; color:var(--muted); background:#fff; border:1px solid var(--line); padding:2px 7px; border-radius:99px;}

/* KPI cards */
.kpi-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
@media (min-width:720px){ .kpi-grid{grid-template-columns:repeat(3,1fr);} }
.kpi{ background:var(--card); border-radius:var(--radius); padding:14px 14px 12px; border:1px solid var(--line); position:relative; overflow:hidden; }
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);}
.kpi.warn::before{background:var(--orange);}
.kpi.danger::before{background:var(--red);}
.kpi.ok::before{background:var(--green);}
.kpi .label{font-size:11.5px; color:var(--muted); font-weight:600;}
.kpi .value{font-size:21px; font-weight:800; color:var(--navy); margin-top:4px; letter-spacing:-.3px;}

/* progress bar */
.pbar{height:7px; background:#EAEDF2; border-radius:99px; overflow:hidden; margin-top:8px;}
.pbar > i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--navy)); border-radius:99px;}

/* card / table containers */
.card{background:var(--card); border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; margin-bottom:12px;}
.card .card-h{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13px; font-weight:800; color:var(--navy); display:flex; justify-content:space-between; align-items:center;}
.card-pad{padding:13px 14px;}

/* bar list */
.bars{padding:12px 14px 14px;}
.bar-row{display:flex; align-items:center; gap:8px; margin-bottom:9px;}
.bar-row .nm{width:84px; font-size:11.5px; font-weight:700; color:var(--text); flex:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-row .track{flex:1; height:14px; background:#EEF1F5; border-radius:7px; overflow:hidden;}
.bar-row .fill{height:100%; background:linear-gradient(90deg,var(--blue),var(--navy)); border-radius:7px;}
.bar-row .pct{width:46px; text-align:right; font-size:11px; font-weight:800; color:var(--navy); flex:none;}

/* filters */
.chiprow{display:flex; gap:6px; overflow-x:auto; padding:2px 2px 10px; scrollbar-width:none;}
.chiprow::-webkit-scrollbar{display:none;}
.chip{flex:none; font-size:12px; font-weight:700; padding:7px 13px; border-radius:99px; background:#fff; border:1px solid var(--line); color:var(--muted);}
.chip.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.searchbox{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:11px; padding:9px 12px; margin-bottom:10px;}
.searchbox input,.searchbox select{border:none; outline:none; font-size:13.5px; flex:1; background:transparent; font-family:inherit;}
.searchbox svg{flex:none; color:var(--muted);}
.sortbar{display:flex; gap:6px; margin-bottom:10px;}
.sortbar button{flex:1; font-size:12px; font-weight:700; padding:8px 6px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--muted); font-family:inherit;}
.sortbar button.active{background:var(--lblue); border-color:var(--blue); color:var(--navy);}

/* tab pills (in-page sub-tabs) */
.subtabs{display:flex; gap:6px; margin-bottom:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px;}
.subtabs button{flex:1; border:none; background:transparent; padding:9px 4px; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--muted); font-family:inherit;}
.subtabs button.active{background:var(--navy); color:#fff;}

/* region/vendor cards */
.region-list{display:flex; flex-direction:column; gap:8px;}
.region-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 13px;}
.region-card .top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.region-card .nm{font-size:13.5px; font-weight:800;}
.region-card .nm span{font-size:11px; color:var(--muted); font-weight:600; margin-right:5px;}
.region-card .co{font-size:11px; color:var(--blue); font-weight:700; background:var(--lblue); padding:2px 8px; border-radius:99px; flex:none; white-space:nowrap;}
.region-card .stats{display:flex; gap:12px; margin-top:8px; font-size:11.5px; color:var(--muted); flex-wrap:wrap;}
.region-card .stats b{color:var(--text); font-weight:800;}
.region-card .pbar{margin-top:8px;}
.region-card .pct{font-size:11px; font-weight:800; color:var(--navy); margin-top:5px; text-align:right;}
.badge{display:inline-block; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:99px;}
.badge.ok{background:#E6F4EC; color:var(--green);}
.badge.warn{background:#FDF1E6; color:var(--orange);}
.badge.danger{background:#FBEAEA; color:var(--red);}
.badge.muted{background:#EEF1F5; color:var(--muted);}

/* generic data table */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.dt{border-collapse:collapse; width:100%; font-size:12px; white-space:nowrap;}
table.dt th{ background:var(--lblue); color:var(--navy); font-weight:800; text-align:center; padding:9px 10px; border-bottom:1px solid var(--line); }
table.dt td{padding:9px 10px; text-align:center; border-bottom:1px solid #F0F2F5; color:var(--text);}
table.dt tr:nth-child(even) td{background:#FAFBFD;}
table.dt td.left{text-align:left;}

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--blue); color:#fff; border:none; padding:12px 18px; border-radius:11px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn:active{background:var(--navy);}
.btn.outline{background:#fff; color:var(--blue); border:1.4px solid var(--blue);}
.btn.ghost{background:transparent;color:var(--blue);padding:8px 10px;font-size:12.5px;}
.btn.sm{padding:8px 12px;font-size:12px;}
.btn[disabled]{opacity:.45; pointer-events:none;}

/* upload zone */
.upload-card{ width:100%; background:var(--card); border-radius:20px; padding:30px 22px; text-align:center; box-shadow:0 8px 30px rgba(20,40,70,.06); border:1px dashed #C7D6E6; }
.upload-card.drag{border-color:var(--blue); background:var(--lblue);}
.upload-emoji{width:50px;height:50px;margin:0 auto 14px; color:var(--blue);}
.upload-card h2{font-size:16px; margin:0 0 6px;}
.upload-card p{font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 18px;}
.upload-note{font-size:11px; color:#9AA6B5; margin-top:16px; line-height:1.6;}
#fileInput{display:none;}

/* fields/notes */
.field-row{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.field{flex:1; min-width:140px; display:flex; flex-direction:column; gap:5px;}
.field label{font-size:11px; font-weight:700; color:var(--muted);}
.field input,.field select{border:1px solid var(--line); border-radius:9px; padding:9px 10px; font-size:13px; font-family:inherit;}
textarea.note{ width:100%; border:1px solid var(--line); border-radius:11px; padding:11px 12px; font-size:13px; font-family:inherit; resize:vertical; min-height:74px; color:var(--text); background:#fff; }

.empty{text-align:center; padding:30px 10px; color:var(--muted); font-size:13px;}
.note-box{font-size:12px; color:var(--muted); line-height:1.7; background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 14px;}
.note-box b{color:var(--text);}
.note-box code{background:var(--lblue); color:var(--navy); padding:1px 5px; border-radius:5px; font-size:11px;}

/* ---------- bottom nav ---------- */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--line); display:flex; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 14px rgba(20,40,70,.05); }
.tabbar a{ flex:1; background:none; border:none; padding:8px 2px 7px; display:flex; flex-direction:column; align-items:center; gap:3px; color:#9AA6B5; font-family:inherit; text-decoration:none; }
.tabbar a svg{width:21px; height:21px;}
.tabbar a span{font-size:10px; font-weight:700;}
.tabbar a.active{color:var(--navy);}
.tabbar a.active svg{color:var(--blue);}

.hidden{display:none !important;}
@media print{ .tabbar, .appbar .iconbtn{display:none !important;} body{padding-bottom:0;background:#fff;} }