/* admin-stat.css — 관리자 항공편 통계 팝업  v1 (2026-09-28 신설)
   ⛔ 색은 전부 theme.css 토큰을 쓰고, 없을 때만 되돌아갈 값을 둔다(admin.html은 라이트/다크 둘 다).
   ⚠ 모양의 정본은 이 파일이다 — JS 문자열에 스타일을 넣지 않는다(CLAUDE.md 7항). */

.ast-ov {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.ast-pop {
  width: min(1240px, 100%); height: min(920px, 94vh);
  display: flex; flex-direction: column;
  background: var(--bg-surface-elevated, #fff);
  color: var(--text-primary, #0f172a);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  font: 13px/1.5 var(--font-sans, system-ui, sans-serif);
  overflow: hidden;
}
.ast-top {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.ast-top b { font-size: 15px; white-space: nowrap }
.ast-tabs { display: flex; gap: 4px; flex-wrap: wrap }
.ast-tabs button, .ast-grp button, .ast-side button {
  padding: 5px 12px; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 8px;
  background: var(--bg-surface, #fff); color: var(--text-secondary, #475569); font-size: 12.5px; cursor: pointer;
}
.ast-tabs button.on, .ast-grp button.on, .ast-side button.on {
  background: var(--accent-indigo, #4f46e5); border-color: var(--accent-indigo, #4f46e5); color: #fff;
}
.ast-x {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px 6px; border-radius: 6px; color: var(--text-tertiary, #64748b);
}
.ast-x:hover { background: var(--bg-sunken, #f1f5f9) }

.ast-ctl { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); background: var(--bg-subtle, #f8fafc) }
.ast-bar-ctl { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12px; color: var(--text-secondary, #475569) }
.ast-grp { display: inline-flex; gap: 4px }
.ast-ctl select, .ast-sort select {
  margin-left: 4px; padding: 4px 6px; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 6px;
  background: var(--bg-input, #fff); color: var(--text-primary, #0f172a); font-size: 12px;
}

.ast-body { flex: 1; overflow: auto; padding: 12px 14px; display: grid; gap: 14px; align-content: start }
.ast-msg { padding: 28px 6px; text-align: center; color: var(--text-tertiary, #64748b) }
.ast-msg.err { color: var(--text-danger, #b91c1c) }
.ast-rule { padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--status-danger, #dc2626) 35%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--status-danger, #dc2626) 7%, var(--bg-surface, #fff)); color: var(--text-secondary, #475569) }
.ast-rule b, .ast-bad { color: var(--status-danger, #dc2626) }
.ast-bad { font-weight: 600 }

.ast-tiles { display: flex; flex-wrap: wrap; gap: 8px }
.ast-t { flex: 1 1 150px; padding: 8px 12px; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 10px; background: var(--bg-subtle, #f8fafc) }
.ast-t i { display: block; font-style: normal; font-size: 11px; color: var(--text-secondary, #475569) }
.ast-t b { display: block; font-size: 20px; line-height: 1.25; font-variant-numeric: tabular-nums }
.ast-t small { display: block; font-size: 11px; color: var(--text-tertiary, #64748b) }
.ast-tw { flex: 1.6 1 220px }

.ast-sec { border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 10px; padding: 10px 12px; background: var(--bg-surface, #fff) }
.ast-sec h3 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.ast-sec h3 small { font-weight: 400; font-size: 11px; color: var(--text-tertiary, #64748b) }
.ast-sort { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--text-secondary, #475569) }

.ast-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.ast-side small { margin-left: 8px; font-size: 11px; color: var(--text-tertiary, #64748b) }

/* 그래프 — 시리즈 색은 클래스 하나로 (막대·범례·표 막대가 같은 색을 쓴다) */
.ast-svg { width: 100%; height: 160px; display: block }
.ast-grid { stroke: var(--border-subtle, #e2e8f0); stroke-width: 1 }
.ast-ax { fill: var(--text-tertiary, #64748b); font-size: 11px }
.ast-line { fill: none; stroke: var(--status-warn, #d97706); stroke-width: 2 }
.ast-dot { fill: var(--status-warn, #d97706) }
.ast-na { fill: var(--border-medium, #cbd5e1) }
.ast-s0, i.ast-s0 { fill: var(--accent-indigo, #4f46e5); background: var(--accent-indigo, #4f46e5) }
.ast-s1, i.ast-s1 { fill: var(--accent-teal, #0d9488); background: var(--accent-teal, #0d9488) }
.ast-s2, i.ast-s2 { fill: var(--accent-cyan, #0891b2); background: var(--accent-cyan, #0891b2) }
.ast-s3, i.ast-s3 { fill: var(--status-warn, #d97706); background: var(--status-warn, #d97706) }
.ast-s4, i.ast-s4 { fill: var(--pink, #db2777); background: var(--pink, #db2777) }
.ast-s5, i.ast-s5 { fill: var(--accent-blue, #2563eb); background: var(--accent-blue, #2563eb) }
.ast-s6, i.ast-s6 { fill: var(--status-purple, #7c3aed); background: var(--status-purple, #7c3aed) }
.ast-s7, i.ast-s7 { fill: var(--gs-fair, #ca8a04); background: var(--gs-fair, #ca8a04) }
.ast-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-secondary, #475569); margin: 0 0 4px }
.ast-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px }

/* 표 */
.ast-wrap { overflow-x: auto; border: 1px solid var(--border-subtle, #e2e8f0); border-radius: 8px }
.ast-tbl { width: 100%; border-collapse: collapse }
.ast-tbl th, .ast-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle, #e2e8f0); text-align: left; white-space: nowrap; font-size: 12.5px }
.ast-tbl th { font-size: 11.5px; font-weight: 600; color: var(--text-secondary, #475569); background: var(--bg-subtle, #f8fafc) }
.ast-tbl .r { text-align: right; font-variant-numeric: tabular-nums }
.ast-tbl .w { width: 28% }
.ast-tbl td small { margin-left: 3px; font-size: 10.5px; color: var(--text-tertiary, #64748b) }
.ast-tbl tr:last-child td { border-bottom: 0 }
.ast-tbl .ast-fgn td { color: var(--text-secondary, #475569) }
.ast-tbl .ast-sum td { font-weight: 600; background: var(--bg-subtle, #f8fafc) }
.ast-tbl .ast-na-row td { color: var(--text-tertiary, #64748b); background: var(--bg-sunken, #f1f5f9) }   /* 자료 없는 날 — 0이 아니라 빈 칸 */
.ast-bar { display: flex; height: 10px; width: 100%; min-width: 120px; background: var(--bg-sunken, #f1f5f9); border-radius: 3px; overflow: hidden }
.ast-bar i { display: block; height: 100% }

/* 요일×시간 격자 — 칸 진하기는 --lv(0~1) */
.ast-heat { border-collapse: collapse; width: 100%; font-size: 10.5px; font-variant-numeric: tabular-nums }
.ast-heat th { font-weight: 600; color: var(--text-secondary, #475569); padding: 2px 3px; text-align: center }
.ast-heat td { text-align: center; padding: 3px 2px; min-width: 26px; border: 1px solid var(--bg-surface, #fff);
  background: color-mix(in srgb, var(--accent-indigo, #4f46e5) calc(var(--lv, 0) * 85%), var(--bg-subtle, #f8fafc));
  color: var(--text-primary, #0f172a) }
.ast-heat td.hi { color: #fff }   /* 진한 칸(--lv > .6)만 흰 글자 — 판정은 JS heatHtml */

/* 지연 분포·방향 비율 */
.ast-bins { display: flex; gap: 10px; align-items: flex-end; height: 120px; padding: 0 4px }
.ast-bins > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100% }
.ast-bins i { display: block; width: 70%; min-height: 2px; border-radius: 3px 3px 0 0 }
.ast-bins b { font-size: 12px; margin-top: 3px; font-variant-numeric: tabular-nums }
.ast-bins small { font-size: 10.5px; color: var(--text-tertiary, #64748b) }
.ast-share { display: grid; gap: 6px }
.ast-share span { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; font-size: 12px }
.ast-share i { display: block; height: 12px; border-radius: 3px; min-width: 2px }
.ast-share small { color: var(--text-tertiary, #64748b) }

.ast-foot {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-top: 1px solid var(--border-subtle, #e2e8f0); font-size: 11px; color: var(--text-tertiary, #64748b); line-height: 1.5;
}
.ast-ok { margin-left: auto; padding: 6px 14px; border: 0; border-radius: 8px; background: var(--accent-indigo, #4f46e5); color: #fff; cursor: pointer; white-space: nowrap }

/* 본문 칸(셸) — 창 열기 단추만 */
.ast-panel { max-width: 640px; display: grid; gap: 10px; font-size: 13px }
.ast-panel p { margin: 0 }
.ast-open { justify-self: start; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--accent-indigo, #4f46e5); color: #fff; font-size: 13px; cursor: pointer }
.ast-note { font-size: 11.5px; color: var(--text-tertiary, #64748b) }

@media (max-width: 720px) {
  .ast-ov { padding: 0 }
  .ast-pop { width: 100%; height: 100%; border-radius: 0 }
  .ast-top { flex-wrap: wrap; gap: 8px }
  .ast-t b { font-size: 17px }
}