:root{
  --bg:#f5f7fa;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --blue:#2563eb;
  --blue2:#1e40af;
}

/* =========================
   페이지 전용 래퍼
========================= */
.budget-page{
  width:100%;
}

/* 헤더 */
.budget-page .page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.budget-page .page-title{
  margin:0;
  font-size:24px;
  font-weight:800;
}

/* 버튼 */
.budget-page .btns{display:flex; gap:8px;}
.budget-page .btn{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.budget-page .btn.primary{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.budget-page .btn.primary:hover{background:var(--blue2);}
.budget-page .btn.soft{background:#f8fafc;}

/* 카드 */
.budget-page .card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.06);
}

/* 테이블 */
.budget-page .table-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto;
  max-height:520px;   /* ✅ 내부만 스크롤 */
}
.budget-page .grid{
  width:100%;
  border-collapse:collapse;
  min-width:980px;
}
.budget-page .grid thead th{
  position:sticky;
  top:0;
  background:#f1f5f9;
  z-index:1;
  border-bottom:1px solid var(--line);
  padding:10px 8px;
  font-size:13px;
  text-align:center;
  white-space:nowrap;
}
.budget-page .grid tbody td{
  border-top:1px solid var(--line);
  padding:8px;
  font-size:13px;
  background:#fff;
}
.budget-page .grid tbody tr:hover td{background:#fbfdff;}

/* 탭 패널 */
.tab-panel{display:none;}
.tab-panel.active{display:block;}