/* 차트와 아바타의 시각 표면을 독립적으로 정의합니다. */
.visual-chart {
  display: grid;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--ui-border, #d9dee7);
  border-radius: .5rem;
  background: var(--ui-page, #fff);
}

.visual-chart header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.visual-chart header small,
.visual-chart .chart-description,
.visual-chart .chart-legend {
  color: var(--ui-muted, #687384);
}

.visual-chart svg {
  display: block;
  width: 100%;
  min-height: 12rem;
  overflow: visible;
}

.visual-chart .chart-grid { stroke: var(--ui-border, #d9dee7); stroke-width: 1; }
.visual-chart .chart-axis-label { fill: var(--ui-muted, #687384); font-size: 12px; }
.visual-chart .chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.visual-chart .chart-area { opacity: .16; }
.visual-chart .chart-point { stroke: var(--ui-page, #fff); stroke-width: 2; }
.visual-chart .chart-legend { display: flex; flex-wrap: wrap; gap: .4rem; }
.visual-chart .chart-legend button { border: 1px solid var(--ui-border, #d9dee7); border-radius: 999px; background: var(--ui-page, #fff); color: var(--ui-text, #18202b); cursor: pointer; }
.visual-chart .chart-legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.visual-chart .chart-data-table { margin: 0; font-size: .85rem; }
.visual-chart .chart-data-table caption { text-align: left; font-weight: 700; }
.visual-chart .visual-donut { width: min(13rem, 60vw); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: conic-gradient(var(--chart-colors)); position: relative; }
.visual-chart .visual-donut::after { content: ''; position: absolute; inset: 25%; border-radius: 50%; background: var(--ui-page, #fff); }
.visual-chart .visual-kpi { display: flex; align-items: baseline; gap: .7rem; }
.visual-chart .visual-kpi strong { font-size: 2.4rem; }
.visual-chart .visual-kpi span { color: #087443; font-weight: 700; }
.visual-chart .visual-heatmap { display: grid; grid-template-columns: repeat(var(--heatmap-columns), minmax(1.5rem, 1fr)); gap: .25rem; }
.visual-chart .heat-cell { aspect-ratio: 1.5; border-radius: .2rem; background: color-mix(in srgb, var(--ui-accent, #176b52) calc(var(--heat) * 1%), transparent); }
.visual-chart .visual-funnel { display: grid; justify-items: center; gap: .25rem; }
.visual-chart .funnel-step { display: grid; place-items: center; min-height: 2rem; border-radius: .25rem; background: var(--ui-accent, #176b52); color: #fff; font-weight: 700; }
.visual-chart .visual-gauge { display: grid; place-items: center; width: min(14rem, 60vw); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; background: conic-gradient(var(--ui-accent, #176b52) calc(var(--gauge-value) * 1%), var(--ui-border, #d9dee7) 0); }
.visual-chart .visual-gauge::after { content: attr(data-label); display: grid; place-items: center; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--ui-page, #fff); font-size: 1.6rem; font-weight: 800; }
.avatar-card { display: inline-flex; align-items: center; gap: .75rem; margin: 0; padding: .75rem 1rem; border: 1px solid var(--ui-border, #d9dee7); border-radius: .5rem; background: var(--ui-page, #fff); }
.avatar-initials { display: grid; flex: 0 0 3rem; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #176b52; color: #fff; font-weight: 800; }
.avatar-card figcaption { display: grid; gap: .2rem; }
.avatar-card small { color: var(--ui-muted, #687384); }