@moda-chart/core 0.1.2

package/dist/styles.css

@@ -0,0 +1,989 @@
+/* @moda-chart/core 공통 스타일 — 어댑터는 @import로 재사용한다.
+ * 색상은 --chart-* CSS 변수로 노출해 테마를 연다.
+ * .mc-root[data-theme="dark"]가 다크 모드 변수를 덮어쓴다. */
+
+.mc-root {
+  --chart-bg: #ffffff;
+  --chart-text-color: #1e293b;
+  --chart-text-muted: #64748b;
+  --chart-border-color: #e2e8f0;
+  --chart-grid-color: #e2e8f0;
+  --chart-axis-color: #cbd5e1;
+  --chart-tooltip-bg: #0f172a;
+  --chart-tooltip-color: #f8fafc;
+  --chart-selection-color: rgba(37, 99, 235, 0.12);
+  --chart-focus-color: #0f172a;
+  --chart-mark-color: #f43f5e;
+  --chart-mark-band-color: rgba(244, 63, 94, 0.08);
+  --chart-up-color: #16a34a;
+  --chart-down-color: #dc2626;
+  --chart-waterfall-line-color: #94a3b8;
+  --chart-heat-from: #dbeafe;
+  --chart-heat-to: #1d4ed8;
+  --chart-annotation-color: #475569;
+  --chart-error-color: #64748b;
+  --chart-nav-bg: #f1f5f9;
+  --chart-nav-handle: #94a3b8;
+  --chart-map-from: #dbeafe;
+  --chart-map-to: #1d4ed8;
+  --chart-map-empty: #e2e8f0;
+  --chart-map-border: #ffffff;
+  --chart-node-border: #ffffff;
+  --chart-link-opacity: 0.45;
+  --chart-gauge-track: #e2e8f0;
+  --chart-gauge-needle: #475569;
+  --chart-menu-bg: #ffffff;
+  --chart-menu-hover: #f1f5f9;
+  --chart-org-link-color: #94a3b8;
+  --chart-map-line-color: #64748b;
+  --chart-draw-color: #7c3aed;
+  --chart-loading-bg: rgba(255, 255, 255, 0.7);
+  --chart-palette-1: #2563eb;
+  --chart-palette-2: #16a34a;
+  --chart-palette-3: #f59e0b;
+  --chart-palette-4: #dc2626;
+  --chart-palette-5: #7c3aed;
+  --chart-palette-6: #0891b2;
+  --chart-palette-7: #db2777;
+  --chart-palette-8: #65a30d;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--chart-text-color);
+  font: inherit;
+  outline: none;
+  max-width: 100%;
+}
+
+.mc-root[data-theme="dark"] {
+  --chart-bg: #0f172a;
+  --chart-text-color: #e2e8f0;
+  --chart-text-muted: #94a3b8;
+  --chart-border-color: #334155;
+  --chart-grid-color: #1e293b;
+  --chart-axis-color: #475569;
+  --chart-tooltip-bg: #f1f5f9;
+  --chart-tooltip-color: #0f172a;
+  --chart-selection-color: rgba(96, 165, 250, 0.18);
+  --chart-focus-color: #f8fafc;
+  --chart-mark-color: #fb7185;
+  --chart-mark-band-color: rgba(251, 113, 133, 0.14);
+  --chart-up-color: #4ade80;
+  --chart-down-color: #f87171;
+  --chart-waterfall-line-color: #64748b;
+  --chart-heat-from: #1e293b;
+  --chart-heat-to: #38bdf8;
+  --chart-annotation-color: #94a3b8;
+  --chart-error-color: #94a3b8;
+  --chart-nav-bg: #1e293b;
+  --chart-nav-handle: #475569;
+  --chart-map-from: #1e293b;
+  --chart-map-to: #38bdf8;
+  --chart-map-empty: #334155;
+  --chart-map-border: #0f172a;
+  --chart-node-border: #0f172a;
+  --chart-gauge-track: #334155;
+  --chart-gauge-needle: #cbd5e1;
+  --chart-menu-bg: #1e293b;
+  --chart-menu-hover: #334155;
+  --chart-org-link-color: #64748b;
+  --chart-map-line-color: #94a3b8;
+  --chart-draw-color: #a78bfa;
+  --chart-loading-bg: rgba(15, 23, 42, 0.7);
+  --chart-palette-1: #60a5fa;
+  --chart-palette-2: #4ade80;
+  --chart-palette-3: #fbbf24;
+  --chart-palette-4: #f87171;
+  --chart-palette-5: #a78bfa;
+  --chart-palette-6: #22d3ee;
+  --chart-palette-7: #f472b6;
+  --chart-palette-8: #a3e635;
+}
+
+.mc-root:focus-visible {
+  outline: 2px solid var(--chart-palette-1);
+  outline-offset: 2px;
+}
+
+/* 제목/부제목 — 없으면 hidden으로 렌더된다 */
+.mc-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--chart-text-color);
+}
+
+.mc-subtitle {
+  font-size: 12px;
+  color: var(--chart-text-muted);
+}
+
+/* 범례 위치 — left/right면 세로 배치 */
+.mc-root[data-legend="top"],
+.mc-root[data-legend="bottom"] {
+  flex-direction: column;
+}
+.mc-root[data-legend="left"],
+.mc-root[data-legend="right"] {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.mc-root[data-legend="left"] .mc-legend {
+  order: -1;
+}
+.mc-root[data-legend="top"] .mc-legend {
+  order: -1;
+}
+.mc-root[data-legend="right"] .mc-legend {
+  order: 1;
+}
+
+.mc-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.mc-toolbar button {
+  font: inherit;
+  font-size: 11px;
+  padding: 3px 10px;
+  border: 1px solid var(--chart-border-color);
+  border-radius: 5px;
+  background: var(--chart-bg);
+  color: var(--chart-text-muted);
+  cursor: pointer;
+}
+
+.mc-toolbar button:hover:not(:disabled) {
+  color: var(--chart-text-color);
+  border-color: var(--chart-axis-color);
+}
+
+.mc-toolbar button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.mc-viewport {
+  position: relative;
+}
+
+.mc-svg {
+  display: block;
+  max-width: 100%;
+}
+
+.mc-axis-line,
+.mc-tick-line {
+  stroke: var(--chart-axis-color);
+}
+
+.mc-grid-line {
+  stroke: var(--chart-grid-color);
+  stroke-dasharray: 2 3;
+}
+
+.mc-tick-label,
+.mc-axis-label {
+  fill: var(--chart-text-muted);
+  font-size: 11px;
+}
+
+.mc-axis-label {
+  font-weight: 600;
+}
+
+.mc-line {
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.mc-area {
+  opacity: 0.25;
+}
+
+.mc-point {
+  stroke: var(--chart-bg);
+  stroke-width: 1.5;
+}
+
+.mc-bubble {
+  fill-opacity: 0.7;
+}
+
+.mc-heat-cell {
+  stroke: var(--chart-bg);
+  stroke-width: 1;
+}
+
+.mc-slice {
+  stroke: var(--chart-bg);
+}
+
+.mc-point.mc-focused,
+.mc-bar.mc-focused,
+.mc-slice.mc-focused,
+.mc-heat-cell.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2.5;
+}
+
+.mc-point.mc-dimmed,
+.mc-bar.mc-dimmed,
+.mc-slice.mc-dimmed,
+.mc-heat-cell.mc-dimmed {
+  opacity: 0.35;
+}
+
+/* allowPointSelect — 클릭으로 선택된 요소 */
+.mc-point.mc-selected,
+.mc-bar.mc-selected,
+.mc-slice.mc-selected,
+.mc-bubble.mc-selected,
+.mc-heat-cell.mc-selected {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+
+/* 워드클라우드 — 카테고리=단어, 값=크기 */
+.mc-word {
+  text-anchor: middle;
+  dominant-baseline: central;
+  font-weight: 600;
+}
+.mc-word.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-word.mc-selected {
+  text-decoration: underline;
+}
+
+/* 레이더 — 극좌표 그리드 + 폴리곤 */
+.mc-radar-ring,
+.mc-radar-spoke {
+  stroke: var(--chart-grid-color);
+}
+.mc-radar-ring-label,
+.mc-spoke-label {
+  fill: var(--chart-text-muted);
+  font-size: 10px;
+}
+.mc-radar {
+  stroke-width: 2;
+  stroke-linejoin: round;
+}
+/* radar-area는 패턴/팔레트 fill을 쓰고 반투명으로 */
+.mc-radar-area {
+  fill-opacity: 0.18;
+}
+.mc-range-area {
+  fill-opacity: 0.3;
+}
+
+/* 캔들스틱 — up/down 톤은 --chart-up/down-color(waterfall과 공유) */
+.mc-candle-body {
+  stroke-width: 1;
+}
+.mc-candle-wick {
+  stroke-width: 1.2;
+}
+.mc-candle-up .mc-candle-wick {
+  stroke: var(--chart-up-color);
+}
+.mc-candle-down .mc-candle-wick {
+  stroke: var(--chart-down-color);
+}
+.mc-candle.mc-focused .mc-candle-body,
+.mc-range-bar.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2.5;
+}
+.mc-candle.mc-dimmed,
+.mc-range-bar.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-range-bar.mc-selected {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+.mc-candle.mc-selected .mc-candle-body {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+
+/* 에러바 — 포인트 값±오차 오버레이 */
+.mc-errors {
+  pointer-events: none;
+}
+.mc-error {
+  stroke: var(--chart-error-color);
+  stroke-width: 1.4;
+}
+
+/* 추세선 — series.trend 오버레이 (선색은 시리즈 색상으로 인라인) */
+.mc-trendlines {
+  pointer-events: none;
+}
+.mc-trendline {
+  stroke-width: 1.6;
+  stroke-dasharray: 6 3;
+}
+
+/* 네비게이터 — 플롯 아래 미니맵. 창 드래그·핸들 리사이즈·트랙 점프 */
+.mc-navigator {
+  pointer-events: all;
+}
+.mc-nav-bg {
+  fill: var(--chart-nav-bg);
+}
+.mc-nav-track {
+  stroke-width: 1.5;
+  pointer-events: none;
+}
+.mc-nav-window {
+  fill: var(--chart-selection-color);
+  stroke: var(--chart-palette-1);
+  stroke-opacity: 0.4;
+  cursor: grab;
+}
+.mc-nav-handle {
+  fill: var(--chart-nav-handle);
+  cursor: ew-resize;
+}
+
+/* 지도 — 지역 폴리곤 (choropleth). 데이터 없음은 --chart-map-empty */
+.mc-map-region {
+  stroke: var(--chart-map-border);
+  stroke-width: 0.5;
+}
+.mc-map-no-data {
+  fill: var(--chart-map-empty);
+}
+.mc-map-region.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+.mc-map-region.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-map-region.mc-selected {
+  stroke: var(--chart-focus-color);
+  stroke-width: 1.8;
+}
+.mc-map-scale-bar {
+  stroke: var(--chart-border-color);
+  stroke-width: 0.5;
+}
+.mc-map-scale-label {
+  fill: var(--chart-text-muted);
+  font-size: 10px;
+}
+
+/* 계층 차트 — sunburst 섹터 / treemap 노드 (노드 경계는 --chart-node-border) */
+.mc-sunburst-node,
+.mc-treemap-node,
+.mc-sankey-node,
+.mc-chord-group,
+.mc-nightingale-node,
+.mc-radial-bar,
+.mc-radial-column {
+  stroke: var(--chart-node-border);
+  stroke-width: 1;
+}
+.mc-sunburst-node.mc-focused,
+.mc-treemap-node.mc-focused,
+.mc-sankey-node.mc-focused,
+.mc-chord-group.mc-focused,
+.mc-nightingale-node.mc-focused,
+.mc-radial-bar.mc-focused,
+.mc-radial-column.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2.5;
+}
+.mc-sunburst-node.mc-dimmed,
+.mc-treemap-node.mc-dimmed,
+.mc-sankey-node.mc-dimmed,
+.mc-chord-group.mc-dimmed,
+.mc-nightingale-node.mc-dimmed,
+.mc-radial-bar.mc-dimmed,
+.mc-radial-column.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-sunburst-node.mc-selected,
+.mc-treemap-node.mc-selected,
+.mc-sankey-node.mc-selected,
+.mc-chord-group.mc-selected,
+.mc-nightingale-node.mc-selected,
+.mc-radial-bar.mc-selected,
+.mc-radial-column.mc-selected,
+.mc-gauge-value.mc-selected {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+
+/* 게이지 — 배경 트랙/바늘/중앙 라벨 */
+.mc-gauge-track {
+  fill: var(--chart-gauge-track);
+}
+.mc-gauge-needle {
+  stroke: var(--chart-gauge-needle);
+  stroke-width: 2.5;
+}
+.mc-gauge-hub {
+  fill: var(--chart-gauge-needle);
+}
+.mc-gauge-target {
+  stroke: var(--chart-mark-color);
+  stroke-width: 2;
+}
+.mc-gauge-label {
+  fill: var(--chart-text-color);
+  font-size: 20px;
+  font-weight: 600;
+}
+.mc-gauge-tick {
+  fill: var(--chart-text-muted);
+  font-size: 10px;
+}
+.mc-gauge-value.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2.5;
+}
+
+/* 플로우 — 리본은 노드 색을 계승하고 반투명 */
+.mc-sankey-link,
+.mc-chord-ribbon {
+  fill-opacity: var(--chart-link-opacity);
+  stroke: none;
+}
+
+/* 인라인 주석 — annotations 옵션 */
+.mc-annotations {
+  pointer-events: none;
+}
+.mc-annotation-dot {
+  fill: var(--chart-annotation-color);
+}
+.mc-annotation-label {
+  fill: var(--chart-annotation-color);
+  font-size: 10px;
+}
+
+/* 값 라벨 — dataLabels 옵션 */
+.mc-data-label {
+  fill: var(--chart-text-muted);
+  font-size: 10px;
+  pointer-events: none;
+}
+
+/* 값 축 기준선/영역 — markLines/markBands 옵션 */
+.mc-mark-line {
+  stroke: var(--chart-mark-color);
+  stroke-width: 1;
+  stroke-dasharray: 5 4;
+  pointer-events: none;
+}
+
+.mc-mark-band {
+  fill: var(--chart-mark-band-color);
+  pointer-events: none;
+}
+
+.mc-waterfall-line {
+  stroke: var(--chart-waterfall-line-color);
+  stroke-width: 1;
+  stroke-dasharray: 3 3;
+  pointer-events: none;
+}
+
+.mc-mark-label {
+  fill: var(--chart-mark-color);
+  font-size: 10px;
+  pointer-events: none;
+}
+
+/* 로딩 오버레이 — setLoading(true) */
+.mc-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--chart-loading-bg);
+  z-index: 3;
+}
+
+.mc-loading[hidden] {
+  display: none;
+}
+
+.mc-spinner {
+  width: 26px;
+  height: 26px;
+  border: 3px solid var(--chart-grid-color);
+  border-top-color: var(--chart-palette-1);
+  border-radius: 50%;
+  animation: mc-spin 0.8s linear infinite;
+}
+
+@keyframes mc-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.mc-crosshair {
+  stroke: var(--chart-text-muted);
+  stroke-dasharray: 4 3;
+  pointer-events: none;
+}
+
+.mc-selection {
+  fill: var(--chart-selection-color);
+  pointer-events: none;
+}
+
+.mc-empty {
+  fill: var(--chart-text-muted);
+  font-size: 13px;
+}
+
+.mc-overlay {
+  position: absolute;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.mc-tooltip {
+  position: absolute;
+  transform: translate(-50%, calc(-100% - 8px));
+  background: var(--chart-tooltip-bg);
+  color: var(--chart-tooltip-color);
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  pointer-events: none;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  z-index: 2;
+}
+
+.mc-tooltip.mc-flip-x {
+  transform: translate(-90%, calc(-100% - 8px));
+}
+
+.mc-tooltip[hidden] {
+  display: none;
+}
+
+.mc-tooltip-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.mc-tooltip-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.mc-tooltip-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.mc-tooltip-value {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.mc-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  padding: 2px 0;
+}
+
+.mc-root[data-legend="left"] .mc-legend,
+.mc-root[data-legend="right"] .mc-legend {
+  flex-direction: column;
+}
+
+.mc-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: inherit;
+  font-size: 12px;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  color: var(--chart-text-color);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.mc-legend-item:hover {
+  background: var(--chart-grid-color);
+}
+
+.mc-legend-item.mc-hidden {
+  opacity: 0.45;
+  text-decoration: line-through;
+}
+
+.mc-legend-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+
+/* 범례 체크박스 — legend.checkboxes (IBChart seriesCheckBoxClick 해당) */
+.mc-legend-check {
+  accent-color: var(--chart-palette-1);
+  width: 12px;
+  height: 12px;
+  margin: 0;
+  cursor: pointer;
+}
+
+/* 범례 페이지네이션 — legend.pagination */
+.mc-legend-prev,
+.mc-legend-next {
+  border: none;
+  background: none;
+  font: inherit;
+  font-size: 13px;
+  color: var(--chart-text-muted);
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 4px;
+}
+
+.mc-legend-prev:hover:not(:disabled),
+.mc-legend-next:hover:not(:disabled) {
+  background: var(--chart-grid-color);
+  color: var(--chart-text-color);
+}
+
+.mc-legend-prev:disabled,
+.mc-legend-next:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.mc-legend-page {
+  align-self: center;
+  font-size: 11px;
+  color: var(--chart-text-muted);
+}
+
+/* 픽토그램 — type:"pictogram"의 사람 아이콘 행 (.mc-picto-*) */
+.mc-picto-label {
+  font-size: 11px;
+  fill: var(--chart-text-muted);
+}
+
+.mc-picto-empty {
+  fill: none;
+  stroke: var(--chart-grid-color);
+  stroke-width: 0.09;
+}
+
+/* 주석 그리기 — drawing 옵션 + setDrawMode로 만든 .mc-draw-* 요소 */
+.mc-root.mc-drawing .mc-overlay {
+  cursor: crosshair;
+}
+
+.mc-draw-seg {
+  stroke-width: 1.5;
+}
+
+.mc-draw-draft {
+  opacity: 0.75;
+}
+
+.mc-draw-label {
+  font-size: 10px;
+  fill: var(--chart-draw-color);
+}
+
+/* 컨텍스트 메뉴 — contextMenu 옵션의 우클릭 메뉴 */
+.mc-menu {
+  position: absolute;
+  min-width: 140px;
+  background: var(--chart-menu-bg);
+  border: 1px solid var(--chart-border-color);
+  border-radius: 6px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  padding: 4px;
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+}
+
+.mc-menu[hidden] {
+  display: none;
+}
+
+.mc-menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  font: inherit;
+  font-size: 12px;
+  color: var(--chart-text-color);
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.mc-menu-item:hover {
+  background: var(--chart-menu-hover);
+}
+
+/* 스크롤바 — 미니 시리즈 없는 얇은 줌 스트립 (네비게이터 없을 때) */
+.mc-scrollbar {
+  pointer-events: all;
+}
+.mc-sb-bg {
+  fill: var(--chart-nav-bg);
+}
+.mc-sb-window {
+  fill: var(--chart-selection-color);
+  stroke: var(--chart-palette-1);
+  stroke-opacity: 0.4;
+  cursor: grab;
+}
+.mc-sb-handle {
+  fill: var(--chart-nav-handle);
+  cursor: ew-resize;
+}
+
+/* boxplot — 상자(Q1~Q3) + 수염 + 캡 + 중앙값. 선색은 시리즈색 인라인 */
+.mc-box-body {
+  fill-opacity: 0.65;
+  stroke-width: 1;
+}
+.mc-box-whisker,
+.mc-box-cap,
+.mc-box-median {
+  stroke-width: 1.4;
+}
+.mc-box.mc-focused .mc-box-body {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2.5;
+}
+.mc-box.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-box.mc-selected .mc-box-body {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+
+/* ohlc — 시가(좌)/종가(우) 틱 + 고저 심지. 톤은 up/down 변수 */
+.mc-ohlc line {
+  stroke-width: 1.5;
+}
+.mc-ohlc-up line {
+  stroke: var(--chart-up-color);
+}
+.mc-ohlc-down line {
+  stroke: var(--chart-down-color);
+}
+.mc-ohlc.mc-focused line {
+  stroke: var(--chart-focus-color);
+}
+.mc-ohlc.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-ohlc.mc-selected line {
+  stroke: var(--chart-focus-color);
+}
+
+/* linear-gauge — 수평 트랙 + 값 채움 + 목표 눈금 */
+.mc-lg-track {
+  fill: var(--chart-gauge-track);
+}
+.mc-lg-target {
+  stroke: var(--chart-mark-color);
+  stroke-width: 2;
+}
+.mc-lg-label {
+  fill: var(--chart-text-color);
+  font-size: 14px;
+  font-weight: 600;
+}
+.mc-lg-tick {
+  fill: var(--chart-text-muted);
+  font-size: 10px;
+}
+.mc-lg-value.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2.5;
+}
+.mc-lg-value.mc-selected {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+
+/* organization — 노드 박스 + 부모→자식 엘보 커넥터 */
+.mc-org-link {
+  stroke: var(--chart-org-link-color);
+  stroke-width: 1.2;
+  pointer-events: none;
+}
+.mc-org-node {
+  stroke: var(--chart-node-border);
+  stroke-width: 1;
+}
+.mc-org-node.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2.5;
+}
+.mc-org-node.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-org-node.mc-selected {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+
+/* 지도 위성 레이어 — mapPoints 마커 / mapLines 연결선 */
+.mc-map-marker {
+  stroke: var(--chart-map-border);
+  stroke-width: 1;
+}
+.mc-map-marker.mc-focused {
+  stroke: var(--chart-focus-color);
+  stroke-width: 2;
+}
+.mc-map-marker.mc-dimmed {
+  opacity: 0.35;
+}
+.mc-map-marker.mc-selected {
+  stroke: var(--chart-focus-color);
+  stroke-width: 1.8;
+}
+.mc-map-line {
+  stroke: var(--chart-map-line-color);
+  stroke-width: 1.5;
+  stroke-dasharray: 4 2;
+  pointer-events: none;
+}
+
+/* 지도 아바타 핀 — 프로필 이미지 원형 클립 + 외곽 링 */
+.mc-map-avatar-ring {
+  stroke: var(--chart-map-avatar-ring, #ffffff);
+  stroke-width: 2;
+}
+.mc-map-avatar.mc-dimmed {
+  opacity: 0.35;
+}
+/* 내 위치 펄스 — 마커 주위로 퍼지는 링 */
+.mc-map-pulse {
+  stroke: var(--chart-map-pulse, #db2777);
+  stroke-width: 2;
+  opacity: 0.9;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: mc-map-ping 1.6s ease-out infinite;
+  pointer-events: none;
+}
+@keyframes mc-map-ping {
+  from {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  to {
+    transform: scale(2.6);
+    opacity: 0;
+  }
+}
+/* 지도 클러스터 — 묶인 마커 수를 보여주는 버블 */
+.mc-map-cluster-bg {
+  fill: var(--chart-map-cluster-bg, #475569);
+  stroke: var(--chart-bg);
+  stroke-width: 1.5;
+}
+.mc-map-cluster-count {
+  fill: var(--chart-map-cluster-color, #ffffff);
+  font-size: 11px;
+  font-weight: 600;
+  pointer-events: none;
+}
+
+/* 그룹 카테고리 축 — 두 번째 틱 행의 구분선과 그룹 라벨 */
+.mc-tick-group-line {
+  stroke: var(--chart-axis-color);
+}
+.mc-tick-group-label {
+  fill: var(--chart-text-muted);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+/* 진입 애니메이션 — animation:false면 .mc-animated가 붙지 않는다 */
+.mc-animated .mc-series {
+  animation: mc-enter var(--chart-animation-duration, 300ms) ease both;
+}
+
+.mc-animated .mc-point,
+.mc-animated .mc-bar,
+.mc-animated .mc-slice {
+  transition: opacity 0.15s ease;
+}
+
+/* 데이터 갱신 전환 — animation.updates가 켜지고 데이터가 바뀐 첫 렌더에
+   .mc-updating이 붙는다. 진입(mc-enter)보다 짧고 옅은 페이드로 구분한다 */
+.mc-animated.mc-updating .mc-series {
+  animation: mc-update calc(var(--chart-animation-duration, 300ms) * 0.7)
+    ease both;
+}
+
+/* 갱신 morph — 같은 키의 bar/point가 이전 박스에서 새 박스로 전이된다.
+   applyMorph가 transform을 입히고 해제하면 이 transition이 보간한다 */
+.mc-animated.mc-updating .mc-bar,
+.mc-animated.mc-updating .mc-point {
+  transition:
+    transform var(--chart-animation-duration, 300ms) ease,
+    opacity 0.15s ease;
+  transform-box: fill-box;
+}
+
+@keyframes mc-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes mc-update {
+  from {
+    opacity: 0.35;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 스크린리더 전용 */
+.mc-a11y {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}