/* RegPulse 차트 프리미티브 — 응답자 화면과 관리자 콘솔이 공유한다.
   색상 규칙: 03_UXUI §2.4 — 신호색(빨강/초록) 사용 금지.
   부정 = accent-700, 긍정 = neutral-300. 강조는 명도차와 형태(패턴/마커)로만 준다. */

/* Django admin base.css가 #content ul li에 disc 불릿을 넣는다.
   차트용 리스트는 의미상 목록이지만 불릿이 있으면 안 되므로 항목 단위로 다시 끈다. */
.rp-rank > li, .rp-split > li, .rp-legend > li { list-style: none; }

/* ── 차트 패널 ─────────────────────────────────────────── */
.rp-chart {
  margin: 0;
}
.rp-chart__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--space-1);
}
.rp-chart__subtitle {
  font-size: 12px;
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-3);
}
/* 높이를 먼저 확정해 레이아웃 이동(CLS)을 막는다 — 03_UXUI §7 */
.rp-chart__canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 280;
  min-height: 180px;
}
.rp-chart__canvas--short { aspect-ratio: 640 / 240; }
.rp-chart__canvas--cloud { aspect-ratio: 600 / 300; }
.rp-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── 워드클라우드 (regpulse-charts.js wordCloud()) ──
   JS는 <text>에 fill을 직접 안 찍고 rp-cloud__word(--N) 클래스만 붙인다.
   이 규칙이 없으면 SVG 기본 검정 텍스트 + 브라우저 기본 글꼴(주로 serif)로 떨어진다 —
   Word 리포트용 서버 렌더러(chart_png.wordcloud_png)의 4색 순환과 동일하게 맞춘다. */
.rp-cloud__word {
  font-family: var(--font-body);
  font-weight: 600;
  cursor: default;
}
.rp-cloud__word--1 { fill: var(--color-accent-700); }
.rp-cloud__word--2 { fill: var(--color-accent-2); }
.rp-cloud__word--3 { fill: var(--color-accent-900); }
.rp-cloud__word--4 { fill: var(--color-accent-400); }

/* ── 축·격자 ───────────────────────────────────────────── */
.rp-chart__axis { stroke: var(--color-neutral-500); stroke-width: 1; }
.rp-chart__gridline { stroke: var(--color-neutral-200); stroke-width: 1; }
.rp-chart__tick {
  fill: var(--color-neutral-600);
  font-family: var(--font-body);
  font-size: 11px;
}

/* ── 계열 색 + 형태 구분 (색만으로 정보 전달 금지, WCAG 1.4.1) ── */
.rp-chart__line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rp-chart__marker { stroke: #fff; stroke-width: 1.5; }
.rp-chart__area { fill-opacity: 1; }
.rp-chart__area-edge { stroke: #fff; stroke-width: 1; }
.rp-chart__bar { stroke: none; }

.rp-series-1 .rp-chart__line { stroke: var(--color-accent-700); }
.rp-series-1 .rp-chart__marker, .rp-series-1 .rp-chart__bar, .rp-series-1 .rp-chart__area { fill: var(--color-accent-700); }

.rp-series-2 .rp-chart__line { stroke: var(--color-accent-2); stroke-dasharray: 7 4; }
.rp-series-2 .rp-chart__marker, .rp-series-2 .rp-chart__bar, .rp-series-2 .rp-chart__area { fill: var(--color-accent-2); }

.rp-series-3 .rp-chart__line { stroke: var(--color-accent-900); stroke-dasharray: 2 3; }
.rp-series-3 .rp-chart__marker, .rp-series-3 .rp-chart__bar, .rp-series-3 .rp-chart__area { fill: var(--color-accent-900); }

.rp-series-4 .rp-chart__line { stroke: var(--color-accent-400); stroke-dasharray: 10 3 2 3; }
.rp-series-4 .rp-chart__marker, .rp-series-4 .rp-chart__bar, .rp-series-4 .rp-chart__area { fill: var(--color-accent-400); }

.rp-series-5 .rp-chart__line { stroke: var(--color-neutral-600); stroke-dasharray: 4 4; }
.rp-series-5 .rp-chart__marker, .rp-series-5 .rp-chart__bar, .rp-series-5 .rp-chart__area { fill: var(--color-neutral-600); }

.rp-series-6 .rp-chart__line { stroke: var(--color-neutral-400); stroke-dasharray: 1 4; }
.rp-series-6 .rp-chart__marker, .rp-series-6 .rp-chart__bar, .rp-series-6 .rp-chart__area { fill: var(--color-neutral-300); }

/* ── 범례 ──────────────────────────────────────────────── */
.rp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--color-neutral-700);
}
.rp-legend__item { display: flex; align-items: center; gap: 6px; }
.rp-legend__swatch {
  width: 14px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid var(--color-neutral-600);
}
.rp-legend__swatch--1 { background: var(--color-accent-700); }
.rp-legend__swatch--2 { background: var(--color-accent-2); }
.rp-legend__swatch--3 { background: var(--color-accent-900); }
.rp-legend__swatch--4 { background: var(--color-accent-400); }
.rp-legend__swatch--5 { background: var(--color-neutral-600); }
.rp-legend__swatch--6 { background: var(--color-neutral-300); }

/* ── 도넛: 순수 CSS conic-gradient (03_UXUI §6 — 차트 라이브러리 불필요) ── */
.rp-donut {
  --rp-donut-value: 0;
  --rp-donut-size: 168px;
  position: relative;
  width: var(--rp-donut-size);
  height: var(--rp-donut-size);
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-accent-700) 0 calc(var(--rp-donut-value) * 1%),
    var(--color-neutral-300) calc(var(--rp-donut-value) * 1%) 100%
  );
}
/* 두 세그먼트가 붙는 지점에 경계선을 넣어 고대비 모드에서도 구분되게 한다 */
.rp-donut::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-neutral-500);
}
.rp-donut::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-neutral-200);
}
.rp-donut__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-align: center;
  line-height: 1.15;
}
.rp-donut__value {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: var(--color-accent-700);
}
.rp-donut__caption { font-size: 11px; color: var(--color-neutral-600); }

/* ── 랭킹 막대 (RankBar, 03_UXUI §6 — 모서리 0px, 높이 9px) ── */
.rp-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rp-rank__row { display: block; }
.rp-rank__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 13px;
  margin-bottom: 5px;
}
.rp-rank__label { color: var(--color-text); }
.rp-rank__label-no { color: var(--color-neutral-600); font-variant-numeric: tabular-nums; margin-right: 4px; }
.rp-rank__value { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-rank__track { height: 9px; background: var(--color-neutral-200); border-radius: 0; overflow: hidden; }
.rp-rank__fill { height: 100%; background: var(--color-accent-600); }
.rp-rank__fill--muted { background: var(--color-neutral-400); }
/* '기타'는 잔여 범주라 랭킹 본문과 시각적으로 분리한다 (09_APPENDIX §7.1) */
.rp-rank__row--etc {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-neutral-300);
}

/* ── 100% 스택 가로 막대 (교차분석 그룹 막대, UX A-06) ── */
.rp-split { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rp-split__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; margin-bottom: 5px; gap: var(--space-3);
}
.rp-split__n { color: var(--color-neutral-600); font-size: 12px; font-variant-numeric: tabular-nums; }
.rp-split__bar { display: flex; height: 14px; background: var(--color-neutral-200); overflow: hidden; }
.rp-split__seg { height: 100%; }
.rp-split__seg--neg { background: var(--color-accent-700); }
.rp-split__seg--pos { background: var(--color-neutral-300); }
.rp-split__bar--suppressed {
  background: repeating-linear-gradient(
    45deg, var(--color-neutral-200), var(--color-neutral-200) 4px,
    var(--color-neutral-100) 4px, var(--color-neutral-100) 8px
  );
}

/* ── 소표본 억제 표기 (07_SECURITY §4.2) ── */
.rp-suppressed {
  color: var(--color-neutral-600);
  font-style: normal;
  cursor: help;
  border-bottom: 1px dotted var(--color-neutral-400);
}

/* ── 데이터 표 토글 (WCAG 1.1.1 — 차트 대체 표현) ── */
.rp-datatable { margin-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.rp-datatable > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--color-accent-700);
  padding: var(--space-2) 0;
  list-style: revert;
}
.rp-datatable > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* 열이 많은 표(예: 24시간 유입)는 표 자신이 가로 스크롤을 갖는다 — 페이지 본문이 밀리면 안 된다. */
.rp-datatable > div, .rp-datatable > table { overflow-x: auto; }
.rp-datatable table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: 12px; }
.rp-datatable table.rp-fluid { min-width: 0; }
.rp-datatable caption { text-align: left; color: var(--color-neutral-600); padding-bottom: var(--space-2); }
.rp-datatable th, .rp-datatable td {
  border-bottom: 1px solid var(--color-divider);
  padding: 5px 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rp-datatable th:first-child, .rp-datatable td:first-child { text-align: left; }
.rp-datatable thead th { color: var(--color-neutral-600); font-weight: 600; }

/* ── 빈 상태 ─────────────────────────────────────────── */
.rp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
  padding: var(--space-6) var(--space-4);
  color: var(--color-neutral-600);
  font-size: 13px;
  background: var(--color-neutral-100);
  border: 1px dashed var(--color-neutral-300);
}

/* ── 고대비 강제 모드에서도 도형이 사라지지 않게 테두리를 남긴다 (05_ADMIN §4.4) ── */
@media (forced-colors: active) {
  .rp-chart__bar, .rp-chart__area, .rp-rank__fill, .rp-split__seg, .rp-legend__swatch {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }
  .rp-donut { forced-color-adjust: none; }
}