/* 대시보드 KPI 스트립 + 근태 타일 + 추이 카드 (2026-09-16, 사용자 확정 — 상단 B안·14일 추이 A안 부분 적용)
   .dsk-* = 한 줄 스트립(라벨 점·값·증감·부기·스파크라인 SVG) — KPI 와 오늘 근태 현황이 같은 골격을 쓴다.
   .dtr-* = 추이 카드(헤더 = 공용 .dsc-* 기간 세그먼트). 페이지 본문 표준 문법(카드·선·파랑) — 색은 테마 토큰(--ord-*), 2026-10-01. */
.dsk { display: grid; grid-template-columns: repeat(var(--dsk-cols, 6), minmax(0, 1fr)); background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.dsk-cell { position: relative; padding: 12px 14px; border-right: 1px solid var(--ord-line-soft); min-width: 0; }
.dsk-cell:last-child { border-right: 0; }
.dsk-lbl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ord-text-3); white-space: nowrap; }
.dsk-lbl i { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--dsk-tint, var(--ord-tint-blue-fg)); }
.dsk-val { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 20px; font-weight: 800; color: var(--ord-text); letter-spacing: -.4px; line-height: 1.15; }
.dsk-val small { font-size: 11px; color: var(--ord-text-4); font-weight: 600; }
.dsk-delta { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.dsk-delta.is-up { background: var(--ord-tint-green-bg); color: var(--ord-tint-green-fg); }
.dsk-delta.is-dn { background: var(--ord-tint-red-bg); color: var(--ord-tint-red-fg); }
.dsk-sub { font-size: 11px; color: var(--ord-text-4); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsk-spark { position: absolute; right: 10px; top: 10px; width: 70px; height: 26px; overflow: visible; pointer-events: none; }
.dsk-spark path { fill: none; stroke: var(--dsk-tint, var(--ord-tint-blue-fg)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dsk-spark .dsk-spark-fill { fill: var(--dsk-tint, var(--ord-tint-blue-fg)); fill-opacity: .12; stroke: none; }
.dsk-cell.has-spark .dsk-lbl, .dsk-cell.has-spark .dsk-val { padding-right: 76px; }
/* 근태 — 값 색이 상태를 말한다(출근 초록 · 지각 주황 · 미출근 빨강) */
.dsk-cell.is-att .dsk-val { color: var(--dsk-tint, var(--ord-text)); }
.dsk-card { background: var(--ord-surface); border: 1px solid var(--ord-line); border-radius: 12px; margin-bottom: 16px; }
.dsk-card .dsk { border: 0; border-top: 1px solid var(--ord-line-soft); border-radius: 0 0 12px 12px; margin: 0; }
.dsk-card-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.dsk-card-h .dsk-card-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.dsk-note { margin: 0; padding: 8px 16px 10px; font-size: 12px; color: var(--ord-tint-amber-fg); background: var(--ord-tint-amber-bg); border-top: 1px solid var(--ord-tint-amber-line); border-radius: 0 0 12px 12px; }
.dsk-empty { padding: 24px; text-align: center; color: var(--ord-text-4); font-size: 13px; }

/* 추이 카드 */
.dtr-legend { display: flex; justify-content: flex-end; gap: 14px; font-size: 11.5px; color: var(--ord-text-3); padding: 4px 0 2px; }
.dtr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.dtr-canvas { position: relative; height: 250px; }

@media (max-width: 1100px) {
  .dsk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dsk-cell:nth-child(3n) { border-right: 0; }
  .dsk-cell:nth-child(-n+3) { border-bottom: 1px solid var(--ord-line-soft); }
  .dsk-cell:nth-child(n+4) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .dsk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsk-cell { border-right: 0; border-bottom: 1px solid var(--ord-line-soft); }
  .dsk-cell:nth-child(odd) { border-right: 1px solid var(--ord-line-soft); }
  .dsk-cell:nth-child(3n) { border-right: 1px solid var(--ord-line-soft); }
  .dsk-cell:nth-child(even) { border-right: 0; }
  .dsk-spark { display: none; }
  .dsk-cell.has-spark .dsk-lbl, .dsk-cell.has-spark .dsk-val { padding-right: 0; }
  .dsk-val { font-size: 18px; }
  .dtr-canvas { height: 210px; }
}