/* ============================================================
   대시보드 정리안 3종 (.dv1 / .dv2 / .dv3)
   ------------------------------------------------------------
   index.html <style> 뒤에 로드해 덮어쓴다. 요소는 그대로 두고
   면·선·여백 처리만 바꿔 세 방향을 비교한다.
   색은 dash-variants.js가 인라인 값까지 함께 갈아끼운다.

   dv1 라인   — 그림자를 걷고 선으로만 정리. 얇은 링 도넛.
   dv2 소프트 — 선을 걷고 옅은 면과 부드러운 그림자. 간격 있는 굵은 링.
   dv3 대비   — 카드 경계를 줄이고 수치를 키운다. 반원 게이지.
   ============================================================ */

/* ── 시안 전환 원형 버튼 ('예시' 배지 왼쪽) ── */
.dv-bar {
  position: fixed;
  top: 70px; right: 12px;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 배지는 원래 자기가 fixed로 떠 있었다. 바 안으로 들어오면 흐름에 맡긴다 */
.dv-bar .example-badge { position: static; top: auto; right: auto; }
.dv-switch { display: flex; gap: 6px; }
.dv-switch button {
  width: 18px; height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  opacity: 0.55;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.dv-switch button:hover { opacity: 1; transform: translateY(-1px); }
.dv-switch button[aria-pressed="true"] { opacity: 1; }
/* 선택 표시는 링 대신 점 — 버튼 크기를 흔들지 않는다 */
.dv-switch button[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
}
.dv-switch .dv-c1 { background: #2f6fdb; }
.dv-switch .dv-c2 { background: #5b9bf8; }
.dv-switch .dv-c3 { background: #1d4ed8; }
.dv-switch button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* 도넛 굵기는 변형마다 다르다. 호버는 그 값에서 3 더 굵어진다 */
body[class*="dv"] .donut-seg { stroke-width: var(--seg-w, 18px); }
body[class*="dv"] .donut-seg:hover { stroke-width: calc(var(--seg-w, 18px) + 3px); }


/* ════════════════════════════════════════════════════════════
   dv1 — 라인. 그림자를 걷어내고 1px 선으로만 구분한다.
   ════════════════════════════════════════════════════════════ */
.dv1 .kpi,
.dv1 .panel {
  border-radius: 8px;
  box-shadow: none;
}
.dv1 .kpi { padding: 20px 22px; min-height: 142px; }
.dv1 .kpi:hover { box-shadow: none; border-color: var(--accent); }
/* 아이콘 면을 걷고 선만 남긴다 */
.dv1 .kpi-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: transparent !important;
  border: 1px solid var(--border);
}
.dv1 .kpi-icon svg { width: 20px; height: 20px; }
.dv1 .panel-header { border-bottom: 1px solid var(--border); }
.dv1 .progress-bar,
.dv1 .cert-bar { height: 4px; border-radius: 2px; }
.dv1 .progress-bar .fill,
.dv1 .cert-bar span { border-radius: 2px; }
.dv1 .donut-center .total { font-size: 26px; font-weight: 700; }
.dv1 .leg-dot { width: 8px; height: 8px; }
.dv1 .mat-tag { border-radius: 4px; }


/* ════════════════════════════════════════════════════════════
   dv2 — 소프트. 선을 걷고 옅은 면과 부드러운 그림자로 띄운다.
   ════════════════════════════════════════════════════════════ */
.dv2 .kpi,
.dv2 .panel {
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.06);
}
.dv2 .kpi:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.09);
}
[data-theme="dark"] .dv2 .kpi,
[data-theme="dark"] .dv2 .panel {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.dv2 .kpi { padding: 24px 26px; }
.dv2 .kpi-icon { border-radius: 50%; }
.dv2 .panel-header { border-bottom: none; padding-bottom: 4px; }
.dv2 .progress-bar,
.dv2 .cert-bar { height: 10px; }
.dv2 .donut-center .total { font-size: 30px; }
.dv2 .leg-dot { width: 11px; height: 11px; }


/* ════════════════════════════════════════════════════════════
   dv3 — 대비. 카드 경계를 줄이고 수치를 키워 위계를 세운다.
   ════════════════════════════════════════════════════════════ */
.dv3 .kpi,
.dv3 .panel {
  border-radius: 4px;
  box-shadow: none;
  border-color: var(--border);
}
.dv3 .kpi { padding: 24px; }
.dv3 .kpi:hover { box-shadow: none; }
/* 숫자를 키우고 라벨은 낮춘다 */
.dv3 .kpi-value { font-size: 42px; letter-spacing: -0.04em; }
.dv3 .kpi-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dv3 .kpi-icon {
  width: 36px; height: 36px;
  border-radius: 4px;
}
.dv3 .kpi-icon svg { width: 18px; height: 18px; }
.dv3 .panel-header { border-bottom: 2px solid var(--fg); }
.dv3 .panel-header h3 { letter-spacing: -0.02em; }
.dv3 .progress-bar,
.dv3 .cert-bar { height: 3px; border-radius: 0; }
.dv3 .progress-bar .fill,
.dv3 .cert-bar span { border-radius: 0; }
.dv3 .mat-tag { border-radius: 3px; }
.dv3 .leg-dot { width: 9px; height: 9px; border-radius: 2px; }
/* 반원 게이지라 중앙 수치가 아래로 쏠린다 — 호 안쪽으로 올린다 */
.dv3 .donut-center { justify-content: flex-end; padding-bottom: 14px; }
.dv3 .donut-center .total { font-size: 30px; }


/* ── 좁은 화면 ── */
@media (max-width: 640px) {
  .dv-bar { top: 62px; right: 8px; }
  .dv-switch button { width: 16px; height: 16px; }
}