/**
 * DentFlow 치식(tooth chart) 색상 / 레이아웃 — 이 파일만 수정하면 전역 톤·크기 조정 가능.
 *
 * 사용 위치:
 *  - Django 파셜:  core/templates/core/includes/tooth_chart.html
 *  - JS 빌더:     core/templates/core/includes/task_modal.html (_buildToothChart)
 *
 * 색은 task_modal.html 의 TOOTH_TYPE_COLORS 가 기존 "정답"이었으므로 그 값을 단일 출처로 한다.
 */

:root {
  --df-tooth-color-tooth: #2563eb;            /* 일반 치아 (파랑) */
  --df-tooth-color-implant-abutment: #dc2626; /* 임플란트 어버트먼트 (빨강) */
  --df-tooth-color-abutment: #dc2626;         /* 어버트먼트 (빨강) */
  --df-tooth-color-pontic: #7c3aed;           /* 폰틱 (보라) */
  --df-tooth-color-empty: transparent;        /* 미선택 */
  --df-tooth-border: #9ca3af;
}

/* 외곽 테이블 (4분면 컨테이너) */
.df-tooth-chart {
  border-collapse: collapse;
  width: 12rem;
  table-layout: fixed;
  flex-shrink: 0;
}

/* 작은 변형 (예: 고객 측 목록 카드) */
.df-tooth-chart--sm {
  width: 10rem;
}

/* 분면 셀 (8칸 행을 감싸는 td) */
.df-tooth-chart__quad {
  vertical-align: middle;
  padding: 0;
}
.df-tooth-chart__quad--upper-left {
  width: 50%;
  border-right: 1px solid var(--df-tooth-border);
  border-bottom: 1px solid var(--df-tooth-border);
}
.df-tooth-chart__quad--upper-right {
  width: 50%;
  border-bottom: 1px solid var(--df-tooth-border);
}
.df-tooth-chart__quad--lower-left {
  border-right: 1px solid var(--df-tooth-border);
}
.df-tooth-chart__quad--lower-right {
  /* 우하 분면은 보더 없음 */
}

/* 분면 안의 8칸 행 테이블 */
.df-tooth-chart__row {
  width: 100%;
  border: none;
}

/* 치아 한 칸 */
.df-tooth-cell {
  width: 12.5%;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  overflow: hidden;
  font-weight: 600;
  padding: 4px 0;
  color: var(--df-tooth-color-empty);
}

.df-tooth-chart--sm .df-tooth-cell {
  font-size: 14px;
  padding: 2px 0;
}

.df-tooth-cell--tooth { color: var(--df-tooth-color-tooth); }
.df-tooth-cell--implant-abutment { color: var(--df-tooth-color-implant-abutment); }
.df-tooth-cell--abutment { color: var(--df-tooth-color-abutment); }
.df-tooth-cell--pontic { color: var(--df-tooth-color-pontic); }
.df-tooth-cell--empty { color: var(--df-tooth-color-empty); }