/* ─── 매출/매입 허브 (D 레이아웃) ─── */

#page-sales, #page-purchases { padding:0; }

.hub-bar {
  flex-shrink:0;
  background:var(--bg3);
  border-bottom:1px solid var(--border);
}

/* hub-bar 내부 컨텐츠 패딩 영역 */
.hub-title-row,
.hub-tabs {
  padding-left:24px;
  padding-right:24px;
}

/* 1행: 타이틀 + 버튼 */
.hub-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:14px;
  gap:12px;
}
.hub-title {
  font-size:22px;
  font-weight:700;
  color:var(--txt);
  white-space:nowrap;
}
.hub-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}
.hub-actions .btn-notif,
.hub-actions .btn-new { margin:0; }

/* 2행: 탭 바 */
.hub-tabs {
  display:flex;
  gap:2px;
  align-items:flex-end;
  border-bottom:1px solid var(--border);
}
.hub-tab {
  padding:10px 20px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  font-size:13px;
  font-weight:600;
  color:var(--txt2);
  cursor:pointer;
  font-family:inherit;
  transition:color .12s, border-color .12s, background .12s;
  margin-bottom:-1px;
  border-radius:6px 6px 0 0;
}
.hub-tab:hover { color:var(--txt); background:rgba(91,107,82,0.04); }
.hub-tab-active {
  color:var(--green);
  border-bottom-color:var(--green);
  font-weight:700;
}

/* 3행: KPI 스트립 — 전체 너비 회색 밴드 */
.hub-kpi-strip {
  display:flex;
  gap:24px;
  align-items:center;
  padding:10px 24px;
  background:var(--bg2);
  flex-wrap:wrap;
}
.hub-kpi-item {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  white-space:nowrap;
}
.hub-kpi-label {
  color:var(--txt3);
  font-weight:600;
}
.hub-kpi-val {
  color:var(--txt);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:12px;
}
.hub-kpi-warn { color:#8B3A1F; }
.hub-masked { color:var(--txt3); font-weight:500; }

/* 서브 페이지는 허브 내부에서 전체 flex 차지 */
.page.sub-page {
  flex:1;
  min-height:0;
}

/* 서브페이지 원래 .header 전체 숨김 */
#page-sales .sub-page > .header,
#page-purchases .sub-page > .header {
  display:none !important;
}

@media(max-width:1100px) {
  .hub-kpi-strip { gap:14px; }
}
@media(max-width:900px) {
  .hub-title-row, .hub-tabs, .hub-kpi-strip { padding-left:16px; padding-right:16px; }
  .hub-title { font-size:18px; }
  .hub-title-row { padding-top:12px; padding-bottom:10px; }
  .hub-tab { padding:8px 14px; font-size:12px; }
}