/* ==========================================================================
   제니 MES 데이터 시각화·대시보드·인쇄 (P5-a, dataviz 규칙)
   - 색은 토큰만(--jm-viz-1 코발트 = 1계열, --jm-viz-2 = 2계열(누적 비율·계획정지), 격자·축은 잉크 토큰).
   - 마크: 막대 끝 4px 둥근 모서리(기준선 쪽은 각), 막대 사이 2px 간격, 선 2px, 점 8px 이상 + 2px 표면 테두리.
   - 글자는 텍스트 토큰(계열색 금지). 범례는 2계열 이상일 때만, 표 대체 보기(<details>)를 항상 둔다.
   - 인쇄(@media print): 셸·필터·버튼 숨김, 카드 쪼개짐 방지, 흰 배경 잉크(브라우저 PDF 저장).
   ========================================================================== */

/* ---- 차트 공통 ---- */
.jm-viz { position: relative; width: 100%; min-height: 12rem; }
.jm-viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.jm-viz__grid { stroke: var(--jm-viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.jm-viz__base { stroke: var(--jm-line-strong); stroke-width: 1; shape-rendering: crispEdges; }
.jm-viz__axis { fill: var(--jm-text-subtle); font-family: var(--jm-font-num); font-size: 11px; font-variant-numeric: tabular-nums; }
.jm-viz__label { fill: var(--jm-text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jm-viz__bar { fill: var(--jm-viz-1); }
.jm-viz__bar--2 { fill: var(--jm-viz-2); }
.jm-viz__bar--empty { fill: var(--jm-viz-track); }
.jm-viz__line { fill: none; stroke: var(--jm-viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jm-viz__line--2 { stroke: var(--jm-viz-2); }
.jm-viz__dot { fill: var(--jm-viz-1); stroke: var(--jm-viz-surface-gap, var(--jm-surface)); stroke-width: 2; }
.jm-viz__dot--2 { fill: var(--jm-viz-2); }
.jm-viz__hit { fill: transparent; cursor: default; }
.jm-viz__mark { pointer-events: none; }
.jm-viz__hit--link { cursor: pointer; }
.jm-viz__hit:hover + .jm-viz__mark, .jm-viz__hit:focus-visible + .jm-viz__mark { opacity: .82; }
.jm-viz__hit:focus-visible { outline: none; stroke: var(--jm-focus); stroke-width: 2; }
.jm-viz__cross { stroke: var(--jm-line-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.jm-viz__empty { fill: var(--jm-text-subtle); font-size: 13px; }

/* 툴팁(차트 컨테이너 기준 절대 위치, 위치는 CSSOM 으로만) */
.jm-viz__tip { position: absolute; z-index: 5; pointer-events: none; min-width: 8rem; max-width: 16rem; padding: var(--jm-sp-2) var(--jm-sp-3);
  border-radius: var(--jm-radius-sm); background: var(--jm-surface-inverse); color: var(--jm-text-inverse); box-shadow: var(--jm-shadow-2);
  font-size: var(--jm-fs-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
.jm-viz__tip[hidden] { display: none; }
.jm-viz__tip b { display: block; font-weight: var(--jm-fw-bold); margin-bottom: 2px; }

/* 범례(2계열 이상) */
.jm-viz-legend { display: flex; flex-wrap: wrap; gap: var(--jm-sp-2) var(--jm-sp-4); margin: 0 0 var(--jm-sp-2); padding: 0; list-style: none;
  font-size: var(--jm-fs-sm); color: var(--jm-text-muted); }
.jm-viz-legend li { display: inline-flex; align-items: center; gap: var(--jm-sp-2); }
.jm-viz-legend__key { display: inline-block; width: .875rem; height: .875rem; border-radius: 3px; background: var(--jm-viz-1); }
.jm-viz-legend__key--2 { background: var(--jm-viz-2); }
.jm-viz-legend__key--line { height: 2px; width: 1.25rem; border-radius: 1px; }

/* 표 대체 보기 */
.jm-viz-table { margin-top: var(--jm-sp-3); }
.jm-viz-table > summary { cursor: pointer; color: var(--jm-primary-text); font-size: var(--jm-fs-sm); font-weight: var(--jm-fw-semibold); min-height: 2.75rem;
  display: inline-flex; align-items: center; }
.jm-viz-table > summary:focus-visible { outline: 2px solid var(--jm-focus); outline-offset: 2px; border-radius: 2px; }

/* 가로 막대 순위(설비별) */
.jm-hbars { display: grid; gap: var(--jm-sp-2); margin: 0; padding: 0; list-style: none; }
.jm-hbars__row { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) 5.5rem; gap: var(--jm-sp-3); align-items: center; font-size: var(--jm-fs-md); }
.jm-hbars__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jm-text); }
.jm-hbars__name a { color: inherit; }
.jm-hbars__track { position: relative; height: .75rem; border-radius: 0 4px 4px 0; background: var(--jm-viz-track); overflow: hidden; }
.jm-hbars__fill { display: block; height: 100%; width: 0; border-radius: 0 4px 4px 0; background: var(--jm-viz-1); }
.jm-hbars__val { text-align: right; font-family: var(--jm-font-num); font-variant-numeric: tabular-nums; font-weight: var(--jm-fw-semibold); }
@media (max-width: 599px) { .jm-hbars__row { grid-template-columns: minmax(0, 1fr) 4.5rem; } .jm-hbars__track { grid-column: 1 / -1; grid-row: 2; } }

/* ---- 필터바(기간·차원) ---- */
.jm-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--jm-sp-3); padding: var(--jm-sp-4) var(--jm-sp-5); }
.jm-filterbar .jm-field { min-width: 9rem; flex: 0 1 12rem; }
.jm-filterbar__actions { display: flex; flex-wrap: wrap; gap: var(--jm-sp-2); margin-left: auto; }
@media (max-width: 599px) {
  .jm-filterbar { padding: var(--jm-sp-3); }
  .jm-filterbar .jm-field { flex: 1 1 100%; min-width: 0; }
  .jm-filterbar__actions { margin-left: 0; width: 100%; }
}

/* ---- KPI 카드(값 + 증감) ---- */
.jm-kpis { display: grid; gap: var(--jm-sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
.jm-kpis .jm-kpi { min-width: 0; }
.jm-kpi__value { overflow-wrap: anywhere; }
.jm-kpi__sub { font-size: var(--jm-fs-sm); color: var(--jm-text-subtle); }
.jm-kpi__delta .jm-icon { width: .9em; height: .9em; }

/* ---- 위젯 그리드(08 §9: 12열, w = 3/6/12) ---- */
.jm-widgets { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--jm-sp-4); margin-top: var(--jm-sp-5); }
.jm-widget { grid-column: span 12; min-width: 0; margin: 0; }
.jm-widget[data-w="6"] { grid-column: span 6; }
.jm-widget[data-w="3"] { grid-column: span 3; }
.jm-widget + .jm-widget { margin-top: 0; }
.jm-widgets .jm-card + .jm-card { margin-top: 0; }
@media (max-width: 1023px) { .jm-widget[data-w="3"] { grid-column: span 6; } }
@media (max-width: 767px) { .jm-widget[data-w="6"], .jm-widget[data-w="3"] { grid-column: span 12; } }

.jm-analysis-grid { display: grid; gap: var(--jm-sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); margin-top: var(--jm-sp-5); }
.jm-analysis-grid .jm-card + .jm-card { margin-top: 0; }
.jm-analysis-grid .jm-card { min-width: 0; }
.jm-span-all { grid-column: 1 / -1; }
.jm-print-only { display: none; }

/* ---- 인쇄용(기간 리포트·분석 화면 → 브라우저 "PDF 로 저장") ---- */
@media print {
  @page { size: A4; margin: 12mm; }
  :root, [data-theme="dark"] { color-scheme: light; }
  html, body { background: var(--jm-p-n0) !important; }
  body { color: var(--jm-p-n1000); font-size: 10.5pt; }
  .jm-sidebar, .jm-topbar, .jm-skip, .jm-filterbar, .jm-filterbar__actions, .jm-no-print, .jm-toast-region, .jm-viz__tip, .jm-viz-table > summary,
  .jm-page-head .jm-row, .jm-banner { display: none !important; }
  .jm-print-only { display: block; }
  .jm-shell { display: block !important; }
  .jm-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .jm-card { box-shadow: none !important; border: 1px solid var(--jm-p-n400) !important; break-inside: avoid; page-break-inside: avoid; background: var(--jm-p-n0) !important; }
  .jm-widgets, .jm-analysis-grid { display: block; }
  .jm-widget, .jm-analysis-grid > .jm-card { margin-top: 4mm !important; }
  .jm-viz-table { display: block; }
  .jm-viz-table::details-content { content-visibility: visible; display: block; }
  .jm-table-wrap { overflow: visible !important; max-height: none !important; }
  .jm-table { font-size: 9pt; }
  .jm-table th, .jm-table td { padding: 2px 6px !important; }
  a { color: inherit; text-decoration: none; }
}

/* 넓은 표(설비별 KPI 10열)가 .jm-main 그리드 열을 넓히지 않게 - 표는 .jm-table-wrap 안에서 가로 스크롤 */
.jm-main > #report, .jm-main > #analysis, .jm-main > #widgets, .jm-main > #dash-state { min-width: 0; }
.jm-analysis-grid > *, .jm-widgets > * { min-width: 0; }