/* ============================================================
   대시보드 차트 (Figma node 111:5939 "chart", 1056 x 704)
   ------------------------------------------------------------
   partials/dashboard.html 전용. Figma 값을 반올림 없이 그대로 사용.
   에셋: assets/images/dash/
   ============================================================ */

.dash-chart {
  /* gray */
  --dc-gray-other: #f6f7f9;
  --dc-gray-bg: #ffffff;
  --dc-gray-100: #f3f4f8;
  --dc-gray-200: #e2e4ec;
  --dc-gray-300: #cdd1db;
  --dc-gray-400: #afb8c1;
  --dc-gray-500: #949ba8;
  --dc-gray-600: #858c9a;
  --dc-gray-700: #686d78;
  --dc-gray-800: #323439;
  /* primary */
  --dc-primary-100: #c4d5ff;
  --dc-primary-200: #99b6ff;
  --dc-primary-400: #5384ff;
  --dc-primary-500: #2f6aff;
  /* red */
  --dc-red-000: #fff3f3;
  --dc-red-100: #fac6c5;
  --dc-red-200: #f69f9e;
  --dc-red-300: #f37977;
  --dc-red-400: #ef524f;
  /* green */
  --dc-green-400: #22c55e;

  width: 1056px;
  height: 704px;
  background: var(--dc-gray-other);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  position: relative;
  font-family: 'Pretendard Variable', sans-serif;
  font-style: normal;
  line-height: normal;
  color: var(--dc-gray-800);
}

.dash-chart *,
.dash-chart *::before,
.dash-chart *::after { box-sizing: border-box; }

/* :where() 로 특이도 0 — 아래 컴포넌트 클래스가 항상 이김 */
:where(.dash-chart) :where(div, p, img) {
  margin: 0;
  padding: 0;
  border: 0;
}

:where(.dash-chart) :where(p) { line-height: normal; }

:where(.dash-chart) :where(img) {
  display: block;
  max-width: none;
}

/* 절대배치 이미지 (부모 박스를 꽉 채움) */
.dc-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
   좌측 사이드바 (111:5940)
   ------------------------------------------------------------ */
.dc-side {
  width: 42.204px;
  height: 703.394px;
  flex-shrink: 0;
  background: var(--dc-gray-other);
  border-right: 0.639px solid var(--dc-gray-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 10.231px;
  padding-bottom: 15.347px;
  overflow: hidden;
  position: relative;
}

.dc-side-nav {
  display: flex;
  flex-direction: column;
  gap: 1.279px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
}

.dc-side-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 5.116px 0;
  width: 42.204px;
  flex-shrink: 0;
  position: relative;
}

.dc-side-item-in {
  display: flex;
  flex-direction: column;
  gap: 2.558px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-side-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  width: 23.02px;
  height: 23.02px;
  flex-shrink: 0;
  position: relative;
}

.dc-side-tab--active { background: var(--dc-gray-300); }

.dc-side-ic {
  width: 14.388px;
  height: 14.388px;
  flex-shrink: 0;
  position: relative;
}

/* 차량 관리 아이콘은 14.388 박스 안에 12.949 일러스트 */
.dc-side-ic-ill {
  position: absolute;
  left: 0.72px;
  top: 0.72px;
  width: 12.949px;
  height: 12.949px;
}

.dc-side-label {
  font-weight: 500;
  font-size: 7.67px;
  color: var(--dc-gray-500);
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 9px;
}

.dc-side-label--active { color: var(--dc-gray-800); }

.dc-side-help {
  width: 20.462px;
  height: 20.462px;
  flex-shrink: 0;
  position: relative;
}

/* ------------------------------------------------------------
   차량 목록 패널 (111:5941)
   ------------------------------------------------------------ */
.dc-panel {
  display: flex;
  flex-direction: column;
  gap: 20.462px;
  align-items: flex-start;
  overflow: hidden;
  padding: 16.626px 8.952px 16.626px 12.789px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}

.dc-panel-label {
  display: flex;
  flex-direction: column;
  gap: 7.673px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

/* 차량별 / 운행별 탭 (111:5943) */
.dc-tab {
  display: flex;
  height: 26.347px;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 2.558px;
  border-radius: 5.116px;
  width: 217.413px;
  flex-shrink: 0;
  position: relative;
}

.dc-tab-bg {
  position: absolute;
  inset: 0;
  background: var(--dc-gray-100);
  border-radius: 5.116px;
  pointer-events: none;
}

.dc-tab-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 1.279px 0 rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

.dc-tab-seg-wrap {
  display: flex;
  flex: 1 0 0;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.dc-tab-seg {
  display: flex;
  flex: 1 0 0;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-width: 1px;
  padding: 5.116px 12.789px;
  border-radius: 9px;
  position: relative;
}

.dc-tab-seg--active {
  background: var(--dc-gray-bg);
  border-radius: 6px;
  filter: drop-shadow(0px 0px 2.558px rgba(0, 0, 0, 0.12));
}

.dc-tab-txt {
  font-weight: 500;
  font-size: 8.95px;
  color: var(--dc-gray-600);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

.dc-tab-txt--active {
  font-weight: 600;
  color: var(--dc-gray-800);
}

/* 검색 (111:5944) */
.dc-search {
  background: var(--dc-gray-bg);
  box-shadow: inset 0 0 0 0.639px var(--dc-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10.231px 10.231px 10.231px 12.789px;
  border-radius: 100px;
  width: 217.413px;
  flex-shrink: 0;
  position: relative;
}

.dc-search-ph {
  font-weight: 500;
  font-size: 10.23px;
  color: var(--dc-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 12px;
}

.dc-search-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.789px;
  height: 12.789px;
  flex-shrink: 0;
  position: relative;
}

.dc-search-ic-box {
  overflow: hidden;
  width: 12.789px;
  height: 12.789px;
  flex-shrink: 0;
  position: relative;
}

.dc-search-ic-inner {
  position: absolute;
  inset: 12.5%;
}

.dc-search-ic-img {
  position: absolute;
  inset: -5.56%;
}

/* 목록 헤더 (111:5945 / 111:5946) */
.dc-list {
  display: flex;
  flex-direction: column;
  gap: 12.789px;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}

.dc-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-list-title {
  font-weight: 700;
  font-size: 11.51px;
  color: var(--dc-gray-800);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 14px;
}

.dc-sort {
  display: flex;
  gap: 3.837px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-sort-txt {
  font-weight: 600;
  font-size: 8.952px;
  color: var(--dc-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

.dc-sort-ic {
  width: 8.952px;
  height: 8.952px;
  flex-shrink: 0;
  position: relative;
  transform: rotate(-90deg);
}

/* 기간선택 (111:5953) */
.dc-daterange {
  background: var(--dc-gray-bg);
  box-shadow: inset 0 0 0 0.639px var(--dc-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8.952px;
  border-radius: 8px;
  width: 217.413px;
  flex-shrink: 0;
  position: relative;
  font-size: 10.23px;
  color: var(--dc-gray-800);
  letter-spacing: 0.1023px;
  white-space: nowrap;
  word-break: break-word;
  line-height: 12px;
}

.dc-daterange-label {
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
}

.dc-daterange-dates {
  display: flex;
  gap: 3.837px;
  align-items: center;
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
}

.dc-daterange-dates p { flex-shrink: 0; position: relative; }

/* 차량 카드 (111:5955 등) */
.dc-cards {
  display: flex;
  flex-direction: column;
  gap: 7.673px;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}

.dc-card {
  background: #ffffff;
  box-shadow: inset 0 0 0 0.639px var(--dc-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12.789px 15.347px;
  border-radius: 5.116px;
  width: 217.413px;
  flex-shrink: 0;
  position: relative;
}

.dc-card-in {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  min-width: 1px;
  position: relative;
}

.dc-card-left {
  display: flex;
  gap: 15.347px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-card-caric {
  width: 20.462px;
  height: 20.462px;
  flex-shrink: 0;
  position: relative;
}

.dc-card-caric-ill {
  position: absolute;
  left: 1.02px;
  top: 1.02px;
  width: 18.416px;
  height: 18.416px;
}

.dc-card-caric-ill--y103 { top: 1.03px; }

.dc-card-info {
  display: flex;
  flex-direction: column;
  height: 45.401px;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}

.dc-card-nowrap {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  position: relative;
}

.dc-card-no {
  font-weight: 600;
  font-size: 11.51px;
  color: var(--dc-gray-800);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 14px;
}

.dc-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2.558px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.dc-card-metarow {
  display: flex;
  gap: 3.837px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-meta-txt {
  font-weight: 500;
  font-size: 8.952px;
  color: var(--dc-gray-600);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

.dc-meta-div {
  height: 6.075px;
  width: 0;
  flex-shrink: 0;
  position: relative;
}

.dc-meta-div-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.32px;
  right: -0.32px;
}

.dc-meta-div-img img { width: 100%; height: 100%; }

/* 점수 링 (111:5973 등) */
.dc-score {
  width: 43.483px;
  height: 43.483px;
  flex-shrink: 0;
  position: relative;
}

.dc-score-track {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 43.483px;
  height: 43.483px;
}

.dc-score-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 43.483px;
  height: 43.483px;
}

.dc-score-arc-clip { position: absolute; }
.dc-score-arc-clip img { width: 100%; height: 100%; }

.dc-score-txt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  font-weight: 700;
  color: var(--dc-gray-800);
  white-space: nowrap;
  word-break: break-word;
}

.dc-score-num { font-size: 11.51px; flex-shrink: 0; position: relative; }
.dc-score-unit { font-size: 10.231px; flex-shrink: 0; position: relative; }

/* ------------------------------------------------------------
   세로 구분선 (111:6123)
   ------------------------------------------------------------ */
.dc-divider {
  height: 100%;
  width: 7.673px;
  flex-shrink: 0;
  position: relative;
  line-height: 14px;
  line-height: 12px;
}

/* ------------------------------------------------------------
   메인 영역 (111:6125)
   ------------------------------------------------------------ */
.dc-main {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 20.462px;
  align-items: flex-start;
  min-width: 1px;
  padding: 34.53px 23.02px 15.347px;
  position: relative;
}

.dc-main-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  white-space: nowrap;
  word-break: break-word;
}

.dc-main-title {
  font-weight: 700;
  font-size: 17.905px;
  color: var(--dc-gray-800);
  flex-shrink: 0;
  position: relative;
  line-height: 21px;
}

.dc-main-sub {
  font-weight: 500;
  font-size: 10.231px;
  color: var(--dc-gray-700);
  letter-spacing: -0.1023px;
  flex-shrink: 0;
  position: relative;
  line-height: 12px;
}

.dc-cols {
  display: flex;
  gap: 12.789px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-col-left {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 30.694px;
  align-items: flex-start;
  min-width: 1px;
  position: relative;
}

.dc-col-right {
  display: flex;
  flex-direction: column;
  gap: 10.231px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* ---- 요약 카드 3개 (111:6131 / 111:6132) ---- */
.dc-interaction {
  display: flex;
  flex-direction: column;
  gap: 10.231px;
  align-items: flex-start;
  min-width: 345.3024597167969px;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-stats {
  display: flex;
  gap: 10.231px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-stat {
  background: var(--dc-gray-bg);
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 10.231px;
  align-items: flex-start;
  min-width: 1px;
  padding: 17.905px 14.068px 17.905px 15.347px;
  border-radius: 5.116px;
  position: relative;
}

.dc-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-stat-head--h { height: 11.51px; }

.dc-stat-label {
  font-weight: 600;
  font-size: 10.231px;
  color: var(--dc-gray-600);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 12px;
}

.dc-stat-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.dc-stat-toggle-ic {
  width: 12.789px;
  height: 12.789px;
  position: relative;
  transform: rotate(180deg);
}

.dc-stat-body {
  display: flex;
  flex-direction: column;
  gap: 5.116px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  white-space: nowrap;
  word-break: break-word;
}

.dc-stat-valrow {
  display: flex;
  gap: 3.837px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-stat-val {
  font-weight: 600;
  font-size: 16.626px;
  color: var(--dc-gray-800);
  letter-spacing: -0.1663px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 20px;
}

.dc-stat-sub {
  font-weight: 500;
  font-size: 8.952px;
  color: var(--dc-gray-500);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

/* 증감 배지 */
.dc-growth {
  display: flex;
  gap: 1.279px;
  align-items: center;
  padding: 2.558px 3.837px 2.558px 2.558px;
  border-radius: 5.116px;
  flex-shrink: 0;
  position: relative;
}

.dc-growth--up { background: rgba(34, 197, 94, 0.08); }
.dc-growth--down { background: var(--dc-red-000); }

.dc-growth-ic {
  overflow: hidden;
  width: 10.231px;
  height: 10.231px;
  flex-shrink: 0;
  position: relative;
}

.dc-growth-ic--flip { transform: rotate(180deg); }

.dc-growth-ic-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5.685px;
  height: 3.764px;
}

.dc-growth-txt {
  font-weight: 600;
  font-size: 8.952px;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

.dc-growth-txt--up { color: var(--dc-green-400); }
.dc-growth-txt--down { color: var(--dc-red-400); }

/* ---- 평균 운전 점수 차트 (111:6161) ---- */
.dc-scorechart {
  background: var(--dc-gray-bg);
  display: flex;
  flex-direction: column;
  gap: 25.578px;
  align-items: center;
  justify-content: center;
  padding: 20.462px 15.347px 15.347px;
  border-radius: 5.116px;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-headleft {
  display: flex;
  flex-direction: column;
  gap: 10.231px;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-valrow {
  display: flex;
  gap: 7.673px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-val {
  font-weight: 600;
  font-size: 20.462px;
  color: var(--dc-gray-800);
  letter-spacing: 0.2046px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 24px;
}

.dc-export {
  background: var(--dc-gray-bg);
  box-shadow: inset 0 0 0 0.639px var(--dc-gray-200);
  display: flex;
  gap: 2.558px;
  align-items: center;
  padding: 5.116px;
  border-radius: 5.116px;
  flex-shrink: 0;
  position: relative;
}

.dc-export-ic {
  width: 10.231px;
  height: 10.231px;
  flex-shrink: 0;
  position: relative;
}

.dc-export-txt {
  font-weight: 600;
  font-size: 7.673px;
  color: var(--dc-gray-800);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 9px;
}

.dc-sc-body {
  display: flex;
  flex-direction: column;
  gap: 20.462px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-plot {
  display: flex;
  gap: 12.789px;
  align-items: flex-end;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-yaxis-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-self: stretch;
}

.dc-sc-yaxis {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 19.183px;
  width: 15px;
  flex-shrink: 0;
  position: relative;
  font-weight: 400;
  font-size: 8.952px;
  color: var(--dc-gray-500);
  word-break: break-word;
  line-height: 11px;
}

.dc-sc-yaxis p {
  height: 8.952px;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-right {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 20.462px;
  align-items: flex-start;
  min-width: 1px;
  position: relative;
}

.dc-sc-gridline {
  display: flex;
  flex-direction: column;
  height: 8.952px;
  align-items: flex-start;
  padding: 4.476px 0;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-line-solid {
  height: 0;
  width: 425.873px;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-line-dashed {
  height: 0;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-sc-line-dashed-img {
  position: absolute;
  top: -0.64px;
  right: 0;
  bottom: 0;
  left: 0;
}

.dc-sc-line-dashed-img img { width: 100%; height: 100%; }

.dc-sc-bars {
  display: flex;
  height: 126.611px;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-bar-group {
  display: flex;
  flex-direction: column;
  gap: 10.231px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-bar-group--none { width: 38.367px; }

.dc-bar-stack {
  display: flex;
  flex-direction: column;
  gap: 5.116px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-bar-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-bar-lbl {
  font-weight: 500;
  font-size: 8.952px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

.dc-bar-lbl--blue { color: var(--dc-primary-400); }
.dc-bar-lbl--gray { color: var(--dc-gray-400); }
.dc-bar-lbl--red { color: var(--dc-red-400); }

.dc-bar {
  width: 31.972px;
  border-radius: 7.673px 7.673px 5.116px 5.116px;
  flex-shrink: 0;
  position: relative;
}

.dc-bar--blue { background: var(--dc-primary-400); }
.dc-bar--gray { background: var(--dc-gray-300); }

.dc-bar-date {
  font-weight: 400;
  font-size: 8.952px;
  color: var(--dc-gray-500);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

/* 페이지네이션 (111:6220) */
.dc-pager {
  display: flex;
  gap: 19.183px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-pager-btn {
  display: flex;
  align-items: center;
  padding: 1.279px;
  border-radius: 100px;
  flex-shrink: 0;
  position: relative;
}

.dc-pager-btn-ic {
  width: 11.51px;
  height: 11.51px;
  position: relative;
}

.dc-pager-btn-ic--prev { transform: scaleY(-1); }
.dc-pager-btn-ic--next { transform: rotate(180deg); }

.dc-pager-nums {
  display: flex;
  gap: 10.231px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-pager-tag {
  background: var(--dc-gray-100);
  display: flex;
  align-items: center;
  padding: 1.279px;
  border-radius: 5.116px;
  flex-shrink: 0;
  position: relative;
}

.dc-pager-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 11.51px;
  height: 11.51px;
  flex-shrink: 0;
  position: relative;
}

.dc-pager-num p {
  font-weight: 500;
  font-size: 5.72px;
  color: var(--dc-gray-500);
  text-align: center;
  letter-spacing: -0.0572px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 7px;
}

.dc-pager-num--active p {
  color: var(--dc-gray-700);
  width: 100%;
  white-space: normal;
}

/* ---- 차량 이벤트 그래프 (111:6221) ---- */
.dc-eventgraph {
  display: flex;
  flex-direction: column;
  gap: 15.347px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-eg-head {
  display: flex;
  flex-direction: column;
  gap: 5.116px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-eg-title {
  font-weight: 700;
  font-size: 15.347px;
  color: var(--dc-gray-800);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 18px;
}

.dc-eg-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-eg-sub {
  font-weight: 500;
  font-size: 10.231px;
  color: var(--dc-gray-600);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 12px;
}

.dc-eg-btn {
  background: var(--dc-primary-400);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.116px 7.673px;
  border-radius: 5.116px;
  flex-shrink: 0;
  position: relative;
}

.dc-eg-btn p {
  font-weight: 600;
  font-size: 8.952px;
  color: var(--dc-gray-bg);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 11px;
}

.dc-graphs {
  display: flex;
  gap: 10.231px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-hexagon {
  background: #ffffff;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 10.231px;
  align-items: flex-start;
  min-width: 1px;
  padding: 15.347px 15.347px 20.462px;
  border-radius: 5.116px;
  position: relative;
}

.dc-hex-title {
  font-weight: 600;
  font-size: 11.51px;
  color: var(--dc-gray-700);
  letter-spacing: -0.1151px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 14px;
}

.dc-hex-body {
  display: flex;
  flex-direction: column;
  gap: 15.347px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

/* 도넛 그래프 */
.dc-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12.789px 0;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-donut {
  width: 140.679px;
  height: 140.679px;
  flex-shrink: 0;
  position: relative;
}

.dc-donut-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 198.95px;
  height: 198.95px;
}

.dc-donut-img--all { transform: translate(-50%, -50%) rotate(-5.62deg); }
.dc-donut-img--selected { transform: translate(-50%, -50%) rotate(-5.67deg); }

.dc-donut-center {
  position: absolute;
  left: 50%;
  top: calc(50% + 0.64px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 3.837px;
  align-items: center;
  white-space: nowrap;
  word-break: break-word;
}

.dc-donut-c-label {
  font-weight: 500;
  font-size: 8.952px;
  color: var(--dc-gray-700);
  letter-spacing: -0.0895px;
  flex-shrink: 0;
  position: relative;
  line-height: 11px;
}

.dc-donut-c-val {
  font-weight: 700;
  font-size: 15.347px;
  color: var(--dc-gray-800);
  text-align: center;
  letter-spacing: -0.1535px;
  flex-shrink: 0;
  position: relative;
  line-height: 18px;
}

/* 범례 */
.dc-legend {
  display: flex;
  gap: 12.789px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-legend-col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 11.51px;
  align-items: flex-start;
  min-width: 1px;
  position: relative;
}

.dc-legend-row {
  background: #ffffff;
  display: flex;
  gap: 5.116px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-legend-dotwrap {
  display: flex;
  align-items: center;
  padding: 1.279px 0;
  flex-shrink: 0;
  position: relative;
}

.dc-legend-dot {
  width: 7.673px;
  height: 7.673px;
  border-radius: 2.558px;
  flex-shrink: 0;
  position: relative;
}

.dc-legend-txt {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  min-width: 1px;
  position: relative;
  font-size: 8.952px;
  white-space: nowrap;
  word-break: break-word;
  line-height: 11px;
}

.dc-legend-name {
  font-weight: 600;
  color: var(--dc-gray-700);
  flex-shrink: 0;
  position: relative;
}

.dc-legend-val {
  font-weight: 500;
  color: var(--dc-gray-800);
  flex-shrink: 0;
  position: relative;
}

/* 선택 차량 범례 (스크롤바 포함) */
.dc-legend2 {
  display: flex;
  gap: 5.116px;
  align-items: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}

.dc-legend2-inner {
  display: flex;
  flex: 1 0 0;
  gap: 12.789px;
  align-items: center;
  min-width: 1px;
  position: relative;
}

.dc-legend2-col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 11.51px;
  align-items: center;
  min-width: 1px;
  overflow: hidden;
  border-radius: 2.558px;
  position: relative;
}

.dc-legend2-col .dc-legend-row { background: none; }

.dc-scrollbar {
  height: 38.367px;
  width: 3.837px;
  flex-shrink: 0;
  position: relative;
}

.dc-scrollbar-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 38.367px;
  width: 3.837px;
  background: var(--dc-gray-200);
  border-radius: 639.449px;
}

/* ------------------------------------------------------------
   우측 이벤트 카드 (111:6367 / 111:6424)
   ------------------------------------------------------------ */
.dc-evcard {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 15.347px;
  align-items: flex-start;
  padding: 15.347px 15.347px 17.905px;
  border-radius: 5.116px;
  width: 166.257px;
  flex-shrink: 0;
  position: relative;
}

.dc-evcard-title {
  font-weight: 600;
  font-size: 10.231px;
  color: var(--dc-gray-700);
  letter-spacing: -0.1023px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 12px;
}

.dc-evlist {
  display: flex;
  flex-direction: column;
  gap: 12.789px;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}

.dc-evrow {
  display: flex;
  gap: 15.347px;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.dc-evrow-txt {
  display: flex;
  flex-direction: column;
  gap: 3.837px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.dc-evrow-namewrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.dc-ev-name {
  font-weight: 600;
  font-size: 7.673px;
  color: var(--dc-gray-600);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 9px;
}

.dc-ev-valwrap {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  position: relative;
}

.dc-ev-val {
  font-weight: 600;
  font-size: 11.51px;
  color: var(--dc-gray-800);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  word-break: break-word;
  line-height: 14px;
}

.dc-ev-val--red { color: var(--dc-red-400); }

/* 이벤트 아이콘 변형 */
.dc-evic {
  width: 17.905px;
  height: 17.905px;
  flex-shrink: 0;
  position: relative;
}

.dc-evic--clip { overflow: hidden; }

/* ?(원형) 아이콘: 17.905 박스 안 12.789 중앙 배치 */
.dc-evic-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12.789px;
  height: 12.789px;
}

.dc-evic-center--up { top: calc(50% - 0.01px); }

/* 카드(결제) 아이콘 */
.dc-evic-card {
  position: absolute;
  top: 26.7%;
  right: 17.2%;
  bottom: 26.64%;
  left: 17.18%;
}

.dc-evic-card--alt { top: 26.69%; }

/* 불꽃 아이콘: Figma 클립 그룹을 그대로 옮긴 박스 */
.dc-evic-flame {
  width: 14.323px;
  height: 15.214px;
  flex-shrink: 0;
  position: relative;
}

.dc-evic-flame img {
  position: absolute;
  left: 2.941px;
  top: 2.041px;
  width: 12.0221px;
  height: 13.8126px;
}