/* ==========================================================================
   growth-age-report.css — 탭2 연령별 보고서 (A4 세로 연속 문서)
   판형: 210×297mm. 화면 = 컨테이너 padding, 인쇄 = @page margin.
   색: 네이비 #1e3a8a / 부드러운 우선순위 3색 (#e57373/#f5c451/#81c784)
   ========================================================================== */

/* 인쇄 페이지 여백 — CSS 최상단 전역 at-rule.
   @media print 밖에 있어도 되는 paged media 규칙. */
@page { size: A4 portrait; margin: 14mm 16mm; }

/* ==========================================================================
   탭2 패널 구조 — 상단 툴바 + 스크롤 래퍼 + 문서
   ========================================================================== */
#growthTabAgeReport {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #e5e7eb;
}

/* 상단 툴바 (화면 전용) */
.growth-ar-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid #d1d5db;
  background: #fff;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}
.growth-ar-topbar-title {
  font-size: 17px;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: -0.3px;
}
.growth-ar-topbar-sum {
  font-size: 14px;
  color: #6b7280;
  flex: 1;
}
.growth-ar-topbar-sum span {
  font-size: 18px;
  font-weight: 800;
  color: #1e3a8a;
  margin-right: 2px;
}
.growth-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1e3a8a;
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 2px 6px rgba(30,58,138,0.25);
}
.growth-print-btn:hover { background: #1e40af; transform: translateY(-1px); }
.growth-print-btn:active { transform: translateY(0); }
.growth-print-btn svg { flex-shrink: 0; }

/* 스크롤 래퍼 */
.growth-ar-doc-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 60px;
  background: #e5e7eb;
}

/* ==========================================================================
   문서 컨테이너 (A4 세로 크기 기준)
   ========================================================================== */
.growth-ar-doc {
  max-width: 210mm;
  margin: 0 auto;
  padding: 14mm 16mm;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  color: #1f2937;
  font-family: inherit;
}

/* ==========================================================================
   섹션 — 연령별 반복 단위
   ========================================================================== */
.ar-age-section { margin-bottom: 56px; }
.ar-age-section:not(:first-child) {
  padding-top: 20px;
  border-top: 1px dashed #d1d5db;
}

/* 차트 헤드 블록 — 헤더 + 통계 표를 한 덩어리로 보호 */
.chart-head-block {
  break-inside: avoid;
  break-after: avoid;
  page-break-inside: avoid;
  page-break-after: avoid;
}

/* ── 섹션 헤더 ── */
.ar-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid #1f2937;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.ar-hdr h1 {
  font-size: 20pt;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: -0.5px;
  margin: 0;
}
.ar-hdr h1 span {
  font-size: 11pt;
  color: #6b7280;
  font-weight: 400;
  margin-left: 4px;
}
.ar-meta {
  font-size: 9pt;
  color: #6b7280;
}

/* ── 통계 표 ── */
.ar-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ar-stats-table th,
.ar-stats-table td {
  padding: 8px 10px;
  text-align: center;
  border: 1px solid #d1d5db;
}
.ar-stats-table th {
  background: #f3f4f6;
  font-size: 9pt;
  color: #6b7280;
  font-weight: 600;
}
.ar-stats-table td {
  font-size: 11pt;
  font-weight: 700;
  color: #1f2937;
}
.ar-stats-table td.done {
  color: #1e3a8a;
  font-size: 13pt;
  background: #f8faff;
}

/* ==========================================================================
   차트 (카테고리별 완료 분포)
   ========================================================================== */
.ar-chart {
  margin-bottom: 18px;
}
.ar-chart h2 {
  font-size: 12pt;
  margin-bottom: 12px;
  color: #374151;
  font-weight: 700;
}

.ar-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 9.5pt;
  break-inside: avoid;
  page-break-inside: avoid;
}
.ar-bar-row .ar-cat {
  font-weight: 600;
  color: #1f2937;
}
.ar-bar-row .ar-total {
  text-align: right;
  color: #374151;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.ar-bar-row .ar-total .num { font-size: 9pt; }
.ar-bar-row .ar-total .pct { font-size: 7.5pt; color: #9ca3af; margin-top: 1px; }

.ar-bar {
  height: 20px;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  background: #e5e7eb;
}
.ar-bar .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9pt;
  font-weight: 600;
  min-width: 0;
}
.ar-bar .seg.p1 { background: #e57373; color: white; }
.ar-bar .seg.p2 { background: #f5c451; color: #1f2937; }
.ar-bar .seg.p3 { background: #81c784; color: white; }
.ar-bar .seg.empty { background: transparent; }

.ar-legend {
  display: flex;
  gap: 16px;
  font-size: 9pt;
  margin-top: 8px;
  justify-content: flex-end;
  break-inside: avoid;
  page-break-inside: avoid;
  color: #374151;
}
.ar-legend span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.ar-legend .l1::before { background: #e57373; }
.ar-legend .l2::before { background: #f5c451; }
.ar-legend .l3::before { background: #81c784; }

/* ==========================================================================
   단어 목록 (2컬럼 텍스트 블록)
   ========================================================================== */
.ar-words-hdr {
  font-size: 12pt;
  color: #374151;
  margin: 18px 0 10px 0;
  padding-top: 12px;
  border-top: 2px solid #1f2937;
  break-after: avoid;
  page-break-after: avoid;
  font-weight: 700;
}
.ar-words-block {
  font-size: 10pt;
  line-height: 1.75;
  color: #1f2937;
  column-count: 2;
  column-gap: 24px;
  column-rule: 1px solid #f3f4f6;
}
.ar-words-row {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 8px;
}
.ar-words-row b {
  color: #1e3a8a;
  margin-right: 6px;
  font-weight: 700;
}

/* ==========================================================================
   빈 상태
   ========================================================================== */
.ar-empty {
  margin: 60px auto;
  max-width: 420px;
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1.5px dashed #d1d5db;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.ar-empty-icon { font-size: 42px; margin-bottom: 12px; }
.ar-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}
.ar-empty-sub {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.55;
}

/* ==========================================================================
   인쇄 모드 — @page margin 이 여백 담당, 컨테이너 투명화
   ========================================================================== */
@media print {
  body { background: white; }

  /* 화면 전용 요소 숨김 */
  .nav-bar, .growth-anon-banner, .growth-tabbar-wrap,
  .growth-ar-topbar { display: none !important; }

  /* 패널·래퍼 투명 */
  #screen-growth,
  #screen-growth .growth-tab-panel,
  #growthTabAgeReport,
  .growth-ar-doc-wrap {
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    height: auto !important;
    border: none !important;
    overflow: visible !important;
  }

  /* 문서 컨테이너 — 섀도·padding 제거, @page margin이 여백 담당 */
  .growth-ar-doc {
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }

  /* 색 보존 */
  .ar-stats-table td.done,
  .ar-stats-table th,
  .ar-bar, .ar-bar .seg,
  .ar-legend span::before,
  .ar-words-row b {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}