/* ============================================================
   stz-chart-maker TypeDoc Custom Styles
   Plugin 배지 + 그룹별 색상 커스터마이징
   ============================================================ */

/* ── Plugin 배지 공통 스타일 ── */
.plugin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  margin-right: 0.35em;
  flex-shrink: 0;
  background-color: #7c3aed;
  color: #fff;
}

/* 사이드바 항목 안에 뱃지 정렬 */
.tsd-navigation .plugin-badge,
.tsd-index-list .plugin-badge {
  position: relative;
  top: -1px;
}

/* ── 그룹 헤딩 구분선 및 색상 ── */
/* Common Plugins 그룹 */
.tsd-panel-group[data-plugin-group="Common Plugins"] > h2,
section.tsd-panel-group > h2.common-plugins-heading {
  border-left: 4px solid #7c3aed;
  padding-left: 0.6em;
}

/* Cartesian Plugins 그룹 */
.tsd-panel-group[data-plugin-group="Cartesian Plugins"] > h2,
section.tsd-panel-group > h2.cartesian-plugins-heading {
  border-left: 4px solid #0ea5e9;
  padding-left: 0.6em;
}

/* Doughnut Plugins 그룹 */
.tsd-panel-group[data-plugin-group="Doughnut Plugins"] > h2,
section.tsd-panel-group > h2.doughnut-plugins-heading {
  border-left: 4px solid #f59e0b;
  padding-left: 0.6em;
}

/* ── 플러그인 그룹 행 배경 (인덱스 리스트) ── */
.tsd-index-section h3.common-plugins-heading ~ .tsd-index-list > li,
.tsd-index-section.common-plugins > .tsd-index-list > li {
  border-left: 2px solid #ede9fe;
  padding-left: 6px;
}

.tsd-index-section h3.cartesian-plugins-heading ~ .tsd-index-list > li,
.tsd-index-section.cartesian-plugins > .tsd-index-list > li {
  border-left: 2px solid #e0f2fe;
  padding-left: 6px;
}

.tsd-index-section h3.doughnut-plugins-heading ~ .tsd-index-list > li,
.tsd-index-section.doughnut-plugins > .tsd-index-list > li {
  border-left: 2px solid #fef3c7;
  padding-left: 6px;
}

/* ── Kind 아이콘 색상 재정의 ── */
/* 기본 TypeDoc CSS 변수 override */
:root {
  /* Function → 보라 계열 (플러그인 팩토리 함수 강조) */
  --color-ts-function: #7c3aed;
  /* Variable → 인디고 계열 */
  --color-ts-variable: #4f46e5;
}

/* ── 사이드바 플러그인 항목 hover 색상 ── */
.tsd-navigation a:hover .plugin-badge {
  background-color: #6d28d9;
}

/* ── 그룹 섹션 헤더 강조 ── */
.tsd-panel-group > h2 {
  font-size: 1.1em;
  padding-bottom: 0.3em;
  margin-bottom: 0.8em;
}

/* Plugin 카테고리 뱃지 색상 */
.tsd-tag.tsd-tag-plugin,
.tsd-tag[class*="plugin"] {
  background-color: #ede9fe;
  color: #5b21b6;
  border-color: #c4b5fd;
}