/* ═══════════════════════════════════════════════════════════════════════════
   Report A4 Fix — a4-page 영역 내 overflow 차단 + 그래프 라벨 겹침 수정
   원인: .legacy-progress-card가 9컬럼 1행 그리드 (~668px 필요)인데
        a4-page 사용 폭 ~688px과 비슷해 라벨 길이로 마지막 쌍이 삐져나옴.
   수정: a4 컨텍스트에서만 3행 × 3컬럼으로 reflow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* a4-page 안전 격리 — 모든 자식이 a4-page 폭을 벗어나지 못하도록 */
.a4-page {
  overflow: hidden !important;
  contain: layout paint !important;
}
.a4-page > *,
.a4-page section,
.a4-page article {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══ 1. Progress Card — 9컬럼 → 3행 × 3컬럼 ═══ */
.a4-page .legacy-progress-card,
.a4-progress-card {
  grid-template-columns: 110px 1fr 56px !important;
  row-gap: 6px !important;
  column-gap: 10px !important;
  padding: 10px 12px !important;
  font-size: 11px !important;
}
.a4-page .legacy-progress-card .progress-label,
.a4-progress-card .progress-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.a4-page .legacy-progress-track,
.a4-progress-card .legacy-progress-track {
  height: 12px !important;
  width: 100% !important;
}
.a4-page .legacy-progress-card b,
.a4-progress-card b {
  font-size: 12px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* ═══ 2. Chart Grid (TYPE별/NODE별) ═══ */
.a4-chart-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
.a4-chart-grid .legacy-chart-card {
  padding: 10px 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 220px !important;
  overflow: hidden !important;
}
.a4-chart-grid .legacy-chart-card h2 {
  font-size: 11px !important;
  font-weight: 800 !important;
  margin: 0 0 4px !important;
  color: #1a2332 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 3px !important;
}

/* ═══ 3. Bar Legend — 그래프 영역 위 별도 라인 (겹침 방지) ═══ */
.a4-chart-grid .legacy-bar-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 9.5px !important;
  margin: 2px 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  position: static !important;
  height: auto !important;
  line-height: 1.3 !important;
}
.a4-chart-grid .legacy-bar-legend span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 2px !important;
  display: inline-block !important;
}
.a4-chart-grid .legacy-bar-legend small {
  font-size: 9px !important;
  color: #64748b !important;
}

/* ═══ 4. Stacked Chart (TYPE별 막대) ═══ */
.a4-chart-grid .legacy-stacked-chart {
  --chart-h: 130px !important;
  display: flex !important;
  flex: 1 !important;
  align-items: flex-end !important;
  gap: 3px !important;
  padding: 4px 2px 0 !important;
  overflow: hidden !important;
}
.a4-chart-grid .legacy-stacked-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  font-size: 8.5px !important;
}
.a4-chart-grid .legacy-stacked-column .stacked-bar {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column-reverse !important;
}
.a4-chart-grid .legacy-stacked-column em {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #1f4e79 !important;
  font-style: normal !important;
}
.a4-chart-grid .legacy-stacked-column b {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  transform-origin: center top;
  margin-top: 1px !important;
}

/* ═══ 5. Connection Bars (NODE별) ═══ */
.a4-chart-grid .legacy-conn-bars {
  display: grid !important;
  gap: 4px !important;
  flex: 1 !important;
  align-content: start !important;
  overflow: hidden !important;
}
.a4-chart-grid .legacy-conn-row {
  display: grid !important;
  grid-template-columns: 60px 1fr !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 9.5px !important;
}
.a4-chart-grid .legacy-conn-row b {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.a4-chart-grid .legacy-conn-row .conn-track {
  height: 9px !important;
  position: relative !important;
}
.a4-chart-grid .legacy-conn-row .conn-track em {
  font-size: 8.5px !important;
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ═══ 6. Donut Card ═══ */
.a4-chart-grid .legacy-donut-card { padding: 8px !important; }
.a4-chart-grid .legacy-donut-card svg { max-width: 100% !important; height: auto !important; max-height: 130px !important; }

/* ═══ 7. KPI Grid (이미 3컬럼이지만 안전망) ═══ */
.a4-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.a4-kpi-grid .legacy-kpi {
  padding: 8px 10px !important;
  min-width: 0 !important;
}

/* ═══ 8. Tables (Page 2) ═══ */
.a4-tables { overflow: hidden !important; }
.a4-tables table { width: 100% !important; table-layout: fixed !important; font-size: 9.5px !important; }
.a4-tables td, .a4-tables th {
  padding: 3px 5px !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ═══ 9. PRINT — A4 폭 fit, 2페이지 자동, 색상 보존 ═══ */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { width: 210mm !important; }
  .secms-cable-titlebar, .ribbon-bar, .topbar, .nav-bar, .app-footer, .toast,
  .report-toolbar, .no-print, #secms-titlebar, #secms-ribbon {
    display: none !important;
  }
  #main-content {
    padding: 0 !important;
    background: #fff !important;
  }
  .legacy-shell, .report-pages-wrap {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    gap: 0 !important;
    width: 210mm !important;
    max-width: 210mm !important;
  }
  .a4-page {
    width: 210mm !important;
    height: 297mm !important;
    min-height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 auto !important;
    padding: 10mm 12mm !important;
    box-shadow: none !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    break-after: page !important;
    overflow: hidden !important;
  }
  .a4-page:last-child { page-break-after: auto !important; break-after: auto !important; }
  .a4-page * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* 인쇄 시 KPI/그래프 폰트가 더 작아져 콘텐츠가 안 잘리도록 */
  .a4-kpi-grid .legacy-kpi strong { font-size: 13px !important; }
  .a4-chart-grid .legacy-stacked-chart { --chart-h: 100px !important; }
  .a4-chart-grid .legacy-chart-card { min-height: 170px !important; }
}