/* css/tiles.css — quality_dashboard.html <style> 에서 분리(2026-10-03). 링크 순서 5/7 */
  /* ── 핵심지표 요약 타일 = 본부 포털 KPI 타일 모양 (2026-09-28) ── */
  #core-summary-grid.pk-grid { grid-template-columns: repeat(6, minmax(0,1fr)) !important; gap: 12px !important; }
  @media (max-width: 1500px) { #core-summary-grid.pk-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
  @media (max-width: 700px)  { #core-summary-grid.pk-grid { grid-template-columns: 1fr !important; } }
  .pk-tile { --c: var(--ink-3); background: var(--surface,#fff); border: 1px solid var(--border,#e7e9ec); border-radius: var(--r-lg,14px); padding: 16px 18px 14px; box-shadow: var(--shadow-1); cursor: pointer; min-width: 0; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s; outline: none; }
  .pk-tile:hover, .pk-tile:focus-visible { border-color: var(--border-strong,#d5d9de); box-shadow: var(--shadow-2, 0 4px 12px rgba(16,24,40,.08)); }
  .pk-good { --c: var(--good); } .pk-warn { --c: var(--warn); } .pk-crit { --c: var(--danger); }
  .pk-lab { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; min-width: 0; }
  .pk-dot { width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }
  .pk-go { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
  .pk-tile:hover .pk-go, .pk-tile:focus-visible .pk-go { opacity: 1; color: var(--brand-700); }
  .pk-val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: 10px; color: var(--ink); display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
  .pk-val small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
  .pk-mini { height: 4px; border-radius: 99px; background: var(--brand-100); margin-top: 12px; overflow: hidden; display: flex; }
  .pk-mini i { display: block; height: 100%; background: var(--c); border-radius: 99px; }
  .pk-stack i { border-radius: 0; } .pk-stack i.lv1 { background: #9AA5B1; } .pk-stack i.lv2 { background: var(--warn); } .pk-stack i.lv3 { background: #D9622B; } .pk-stack i.lv4 { background: var(--danger); }
  .pk-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.4; }
  @media (max-width: 900px) { .pk-go { opacity: 1; } }

  /* ── ④ 디자인 통일 2단계 (2026-10-06, 형 "본부포털키트처럼 가자"): 모든 지표 카드(.metric·team-month-card·bigCard…) = 키트 타일 ── */
  .pk-grid { display: grid; gap: 12px; grid-template-columns: repeat(var(--cols, 4), minmax(0,1fr)); grid-auto-rows: 1fr; align-items: stretch; }
  .pk-grid.pk-c3 { --cols: 3; } .pk-grid.pk-c5 { --cols: 5; } .pk-grid.pk-c6 { --cols: 6; }
  @media (max-width: 1500px) { .pk-grid.pk-c5, .pk-grid.pk-c6 { --cols: 3; } }
  @media (max-width: 1100px) { .pk-grid, .pk-grid.pk-c3, .pk-grid.pk-c5, .pk-grid.pk-c6 { --cols: 2; } }
  @media (max-width: 700px)  { .pk-grid, .pk-grid.pk-c3, .pk-grid.pk-c5, .pk-grid.pk-c6 { --cols: 1; } }
  /* base.css 의 id 기반 !important 격자(옛 .metric 카드 260px 고정폭·높이)를 id+class 로 덮어씀 */
  #nccost-metrics.pk-grid, #erp-metrics.pk-grid, #vendor-metrics.pk-grid, #analysis-metrics.pk-grid, #worker-metrics.pk-grid,
  #tab-kpi #kpi-summary.pk-grid, #monthly-summary.pk-grid, #eqq-metrics.pk-grid, #claim-metrics.pk-grid, #capa-metrics.pk-grid,
  #proof-metrics.pk-grid, #home-signal.pk-grid, #tab-kpi #kpi-month-body .pk-grid {
    display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0,1fr)) !important; gap: 12px !important;
    height: auto; min-height: 0; padding: 0; overflow: visible;
  }
  .pk-tile { overflow: hidden; min-height: 134px; }                    /* 막대 있는 타일 높이 = 모든 타일 공통(여섯 화면 같은 크기) */
  .pk-tile .pk-lab { min-height: 20px; }                                 /* 알약이 있어도 이름 줄 높이 같게 */
  .pk-tile .pk-sub { margin-top: auto; padding-top: 10px; }              /* 설명은 늘 타일 바닥에 */
  .pk-static, .pk-static:hover { cursor: default; }
  .pk-static:hover { border-color: var(--border,#e7e9ec); box-shadow: var(--shadow-1); }
  .pk-static .pk-go { display: none; }
  .pk-tile.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-100); }
  .pk-tile.on .pk-go { opacity: 1; color: var(--brand-700); }
  .pk-lab .kpi-pill { margin: 0 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 8px; line-height: 1.4; border-radius: 999px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pk-lab .kpi-pill.good { background: var(--good-bg); color: var(--good); }
  .pk-lab .kpi-pill.warn { background: var(--warn-bg); color: var(--warn); }
  .pk-lab .kpi-pill.crit { background: var(--danger-bg); color: var(--danger); }
  .pk-val.pk-txt { display: block; font-size: 18px; line-height: 1.3; margin-top: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pk-mini.pk-split i { border-radius: 0; } .pk-mini.pk-split i.a { background: var(--brand); } .pk-mini.pk-split i.b { background: var(--s2); }
  /* 팀 KPI 월별 타일의 상세내역 접기(원래 .team-card-details) — 타일 바닥에 붙임 */
  .pk-tile .team-card-details, .pk-tile .team-no-details { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border,#e7e9ec); font-size: 12px; color: var(--ink-3); }
  .pk-tile .team-card-details summary { cursor: pointer; color: var(--brand-700); font-weight: 600; }
  .pk-tile .team-detail-list { max-height: 240px; overflow: auto; padding-top: 8px; }
  .pk-tile .team-detail-list > div { padding: 5px 0; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
  /* 취합대장 '연도별 건수' 미니 막대 타일(전폭) */
  .pk-years { display: flex; align-items: flex-end; gap: 10px; height: 56px; margin-top: 10px; }
  .pk-years > div { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 0; }
  .pk-years b { font-size: 11px; font-weight: 600; color: var(--ink-2); }
  .pk-years i { display: block; width: 100%; background: var(--s7); border-radius: 3px 3px 0 0; opacity: .8; }
  .pk-years small { font-size: 11px; color: var(--ink-3); }

  /* 5~6열 좁은 타일: 설명은 한 줄(넘치면 …) — 한 타일만 두 줄이 되면 줄 전체 높이가 달라짐(10-06) */
  .pk-grid.pk-c5 .pk-sub, .pk-grid.pk-c6 .pk-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }