/* =========================================================================
 * 운영 페이지 「협력업체 성과」 탭(/ops/performance/) — 2026-10-26. 이 탭에서만 싣는다(functions.php).
 * 버튼 · 입력칸 · 알림은 ops.css 공통과 사이트 공용 .btn, 여기에는 이 탭에만 있는 것:
 *   .ops-perf-cards     상단 요약 네 칸
 *   .ops-perf-table     업체별 표 — ops.css 는 카드형 목록을 쓰지만 이 화면은 숫자를 세로로 견줘 보는 표라 표로 둔다.
 *                       좁은 화면에서는 표만 가로로 밀린다(.ops-perf-table-wrap), 업체 이름 칸은 고정.
 *   .ops-perf-print     인쇄용 보기 한 장
 *
 * ★ 인쇄 규칙(@media print)은 body.ops-performance-print-scope 아래에만 있다 — 그 class 는 이 탭의 아일랜드가
 *   「인쇄용 보기」를 누를 때만 붙인다(매장 QR 탭 ops-stores.css 와 같은 방식). 다른 화면의 인쇄는 건드리지 않는다.
 * ★ 인쇄 상자는 테마 색을 따르지 않는다 — 업체에 건네는 종이라 흰 바탕 · 검은 글자로 고정한다(다크 테마에서도).
 * ========================================================================= */

#screen-ops .ops-perf{display:flex; flex-direction:column; gap:14px}
.ops-perf-head{justify-content:space-between; margin:0}
.ops-perf-month{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700}

.ops-perf-cards{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px}
.ops-perf-card{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:2px solid var(--card-line);
  border-radius:var(--radius-card); background:var(--card, #fff)}
.ops-perf-card-label{font-size:12px; color:var(--muted)}
.ops-perf-card-value{font-size:18px; font-weight:800; color:var(--ink); overflow-wrap:anywhere}
.ops-perf-card-link{font-size:12px; font-weight:700; color:var(--action)}

.ops-perf-table-wrap{overflow-x:auto; border:2px solid var(--ink); border-radius:var(--radius-card); background:var(--card, #fff)}
.ops-perf-table{width:100%; min-width:760px; border-collapse:collapse; font-size:13.5px; color:var(--ink)}
.ops-perf-table th,
.ops-perf-table td{padding:10px 12px; border-bottom:1px solid var(--card-line); text-align:left; white-space:nowrap}
.ops-perf-table thead th{font-size:12px; color:var(--muted); background:var(--surface)}
.ops-perf-table tfoot th{border-bottom:0; background:var(--surface); font-weight:800}
.ops-perf-table .is-num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.ops-perf-table .ops-perf-name{font-weight:700; white-space:normal; min-width:160px}
.ops-perf-table .ops-perf-name .ops-badge{margin-left:6px}
.ops-perf-table .ops-empty{margin:0; padding:24px; text-align:center}
.ops-perf-unassigned td{color:var(--muted)}
/* 좁은 화면에서 표를 가로로 밀어도 업체 이름은 보이게 */
.ops-perf-table th:first-child,
.ops-perf-table td:first-child{position:sticky; left:0; z-index:1; background:var(--card, #fff)}
.ops-perf-table thead th:first-child,
.ops-perf-table tfoot th:first-child{background:var(--surface)}

.ops-perf-notes{display:flex; flex-direction:column; gap:4px}

.ops-perf-print[hidden]{display:none !important}

@media (max-width:760px){
  .ops-perf-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* ===== 인쇄 — 인쇄용 상자만 남긴다 ===== */
@media print{
  body.ops-performance-print-scope *{visibility:hidden}
  body.ops-performance-print-scope .ops-perf-print,
  body.ops-performance-print-scope .ops-perf-print *{visibility:visible}

  body.ops-performance-print-scope #wpadminbar,
  body.ops-performance-print-scope .toptape,
  body.ops-performance-print-scope > nav,
  body.ops-performance-print-scope > footer,
  body.ops-performance-print-scope #screen-ops .pback,
  body.ops-performance-print-scope #screen-ops .phead,
  body.ops-performance-print-scope #screen-ops .tabs,
  body.ops-performance-print-scope #dalshim-ops > :not(.ops-perf-print){display:none !important}

  body.ops-performance-print-scope{background:#fff !important}
  body.ops-performance-print-scope main,
  body.ops-performance-print-scope #screen-ops{margin:0 !important; padding:0 !important}

  body.ops-performance-print-scope .ops-perf-print{display:block; color:#111; background:#fff; font-size:12pt;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .ops-perf-print-brand{margin:0 0 4mm; font-size:10pt; color:#555}
  .ops-perf-print h2{margin:0 0 2mm; font-size:18pt; color:#111}
  .ops-perf-print-sub{margin:0 0 8mm; font-size:11pt; color:#333}
  .ops-perf-print table{width:100%; border-collapse:collapse}
  .ops-perf-print th,
  .ops-perf-print td{padding:3mm 2mm; border-bottom:1px solid #bbb; text-align:left; color:#111}
  .ops-perf-print td.is-num{text-align:right; font-weight:700; white-space:nowrap}
  .ops-perf-print-desc{font-size:9.5pt; color:#555 !important}
  .ops-perf-print-foot{margin:8mm 0 0; font-size:9pt; color:#555}
}