@charset "utf-8";

/* ============================================================
   charts.css — ChartLib(charts.js) 공유 SVG 차트 스타일
   ============================================================ */

:root {
	--ig-blue:   #1b5fa8;
	--ig-amber:  #f59e0b;
	--ig-green:  #22c55e;
	--ig-grid:   #ebebeb;
}

/* ── SVG 컨테이너 ── */
.ig-line-svg,
.ig-bar-svg,
.ig-donut-svg {
	width: 100%;
	height: auto;
	display: block;
}

/* ── 선 그래프 ── */
.ig-grid {
	stroke: var(--ig-grid);
	stroke-width: 1;
}

.ig-grid--dashed {
	stroke-dasharray: 4 4;
}

.ig-area {
	fill: rgba(27, 95, 168, 0.07);
	opacity: 0;
	transition: opacity 0.6s ease;
}

.ig-area.is-visible {
	opacity: 1;
}

.ig-line {
	stroke: var(--ig-blue);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ig-dot {
	fill: var(--ig-blue);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ig-dot.is-visible {
	opacity: 1;
}

.ig-axis-y,
.ig-axis-x {
	fill: #999;
	font-family: "Pretendard Variable", sans-serif;
}

.ig-dot-label {
	fill: var(--ig-blue);
	font-weight: 600;
	font-family: "Pretendard Variable", sans-serif;
	opacity: 0;
	transition: opacity 0.4s ease 0.8s;
}

.ig-dot-label--end {
	fill: #333;
}

.ig-dot-label.is-visible {
	opacity: 1;
}

.ig-annot-line {
	stroke: #999;
	stroke-width: 1;
	stroke-dasharray: 3 3;
	opacity: 0;
	transition: opacity 0.4s ease 1s;
}

.ig-annot-line.is-visible {
	opacity: 1;
}

.ig-annot {
	fill: #888;
	font-family: "Pretendard Variable", sans-serif;
	font-style: italic;
	opacity: 0;
	transition: opacity 0.4s ease 1s;
}

.ig-annot.is-visible {
	opacity: 1;
}

/* ── 바 차트 ── */
.ig-bar {
	fill: var(--ig-blue);
	opacity: 0.85;
}

.ig-bar-label {
	fill: #444;
	font-family: "Pretendard Variable", sans-serif;
	dominant-baseline: central;
}

.ig-bar-val {
	fill: var(--ig-blue);
	font-weight: 600;
	font-family: "Pretendard Variable", sans-serif;
	dominant-baseline: central;
}

/* ── 도넛 차트 ── */
.donut-seg {
	transition: stroke-dasharray 0.05s linear;
}

.ig-donut-center-label {
	fill: #777;
	font-family: "Pretendard Variable", sans-serif;
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 768px) {
	.ig-line-svg .ig-axis-y,
	.ig-line-svg .ig-axis-x {
		font-size: 15px;
	}

	.ig-dot-label { font-size: 15px; }
	.ig-annot     { font-size: 14px; }
	.ig-bar-label { font-size: 15px; }
	.ig-bar-val   { font-size: 14px; }
}

@media (max-width: 499px) {
	.ig-line-svg .ig-axis-y,
	.ig-line-svg .ig-axis-x {
		font-size: 18px;
	}

	.ig-dot-label { font-size: 17px; }
	.ig-annot     { font-size: 15px; }
	.ig-bar-label { font-size: 17px; }
	.ig-bar-val   { font-size: 15px; }
}

/* ============================================================
   다크모드
   ============================================================ */
body.dark .ig-grid {
	stroke: #333;
}

body.dark .ig-axis-y,
body.dark .ig-axis-x {
	fill: #666;
}

body.dark .ig-dot-label--end {
	fill: #ccc;
}

body.dark .ig-bar-label {
	fill: #aaa;
}

body.dark .ig-donut-center-label {
	fill: #888;
}