/* 자동 생성 — 원본은 packages/ui/knowledge-map.css */
/* Binnie 지식 지도. 각진(0~2px) 단색 다크, 포인트 파랑 하나. 그라데이션 없음 — 셀 단계는 고정 불투명도 5단계.
   색은 --km-* 로 덮어쓰고, 없으면 호스트 변수(--accent / --line 또는 --border / --surface / --text / --muted 또는 --text-2 / --bn-*) → 기본값. */
.km {
  --_accent: var(--km-accent, var(--accent, var(--bn-accent, #3b82f6)));
  --_line: var(--km-line, var(--line, var(--border, var(--bn-line, #262a33))));
  --_line-strong: var(--km-line-strong, var(--line-strong, var(--border-strong, var(--bn-line-strong, #343947))));
  --_surface: var(--km-surface, var(--surface, var(--bn-surface, #14161b)));
  --_surface-2: var(--km-surface-2, var(--surface-2, var(--bn-surface-2, #1b1e25)));
  --_text: var(--km-text, var(--text, var(--bn-text, #e6e8ee)));
  --_muted: var(--km-muted, var(--muted, var(--text-2, var(--bn-muted, #9aa0ad))));
  --_danger: var(--km-danger, var(--danger, #ef4444));
  --_cell: var(--km-cell, 44px);
  --_gap: 3px;
  --_r: 2px;
  position: relative; color: var(--_text); font-size: 14px; line-height: 1.5;
}
.km * { box-sizing: border-box; }
.km a { color: inherit; text-decoration: none; }
.km-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 지표 타일 ------------------------------------------------------------ */
.km-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; }
.km-tile { min-width: 0; padding: 14px 16px; background: var(--_surface); border: 1px solid var(--_line); border-radius: var(--_r); }
.km-tile-v { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.km-tile-v small { font-size: 0.7em; font-weight: 500; color: var(--_muted); margin: 0 1px; }
.km-tile-l { margin-top: 4px; font-size: 12px; color: var(--_muted); }
.km-tile-h { margin-left: 6px; color: var(--_accent); font-size: 11px; }
.km-compact .km-tiles { gap: 6px; margin-bottom: 16px; }
.km-compact .km-tile { padding: 10px 12px; }
.km-compact .km-tile-v { font-size: 19px; }
.km-compact .km-tile-l { margin-top: 2px; font-size: 11px; }
.km-compact .km-tile-h { display: none; }

/* ---- 본문: 히트맵(좌) + 주제 막대(우) ------------------------------------- */
.km-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }

/* ---- 히트맵 ---------------------------------------------------------------- */
.km-heat-wrap { min-width: 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--_line-strong) transparent; }
.km-heat { border-collapse: separate; border-spacing: var(--_gap); table-layout: auto; margin: 0 -3px; }
.km-heat th { padding: 0; font-weight: 500; text-align: left; }
.km-corner { width: 1px; }
.km-year { width: var(--_cell); min-width: var(--_cell); max-width: var(--_cell); padding-bottom: 4px !important; text-align: center !important; vertical-align: bottom; }
.km-year-n { display: block; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.km-year-l { display: block; margin-top: 2px; font-size: 10px; line-height: 1.25; color: var(--_muted); word-break: keep-all; letter-spacing: -0.02em; }
.km-year-l > span { display: block; }
.km-year-s { display: none; font-size: 9.5px; line-height: 1.2; color: var(--_muted); letter-spacing: -0.02em; }
.km-topic { padding-right: 10px !important; white-space: nowrap; font-size: 12.5px; vertical-align: middle; }
.km-topic-n { color: var(--_text); }
.km-topic-c { margin-left: 6px; font-size: 11px; color: var(--_muted); font-variant-numeric: tabular-nums; }
.km-td { padding: 0; width: var(--_cell); height: var(--_cell); }
.km-cell { position: relative; display: block; width: var(--_cell); height: var(--_cell); border: 1px solid var(--_line); border-radius: var(--_r); background: var(--_surface); }
.km-cell::before { content: ""; position: absolute; inset: 0; background: var(--_accent); opacity: var(--_a, 0); }
/* 단계별 고정 불투명도 (그라데이션 아님) */
.km-l0 { --_a: 0; }
.km-l1 { --_a: 0.18; }
.km-l2 { --_a: 0.34; }
.km-l3 { --_a: 0.52; }
.km-l4 { --_a: 0.74; }
.km-l5 { --_a: 1; }
.km-cell.km-l4, .km-cell.km-l5 { border-color: var(--_accent); }
a.km-cell:hover, a.km-cell:focus-visible { border-color: var(--_text); outline: 1px solid var(--_text); outline-offset: 1px; z-index: 1; }

.km-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--_muted); }
.km-legend i { position: relative; display: inline-block; width: 12px; height: 12px; border: 1px solid var(--_line); border-radius: 1px; background: var(--_surface); }
.km-legend i::before { content: ""; position: absolute; inset: 0; background: var(--_accent); opacity: var(--_a, 0); }
.km-legend-note { margin-left: 8px; }

/* ---- 주제별 막대 ------------------------------------------------------------ */
.km-bars { min-width: 0; }
.km-bars-t { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--_muted); }
.km-bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.km-bar { display: grid; grid-template-columns: 124px minmax(0, 1fr) 3.2ch; gap: 8px; align-items: center; margin: 0 -4px; padding: 3px 4px; border-radius: var(--_r); font-size: 12.5px; }
.km-bar:hover, .km-bar:focus-visible { background: var(--_surface); }
.km-bar-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-bar-track { display: block; height: 10px; overflow: hidden; background: var(--_surface); border: 1px solid var(--_line); border-radius: 1px; }
.km-bar-fill { display: block; height: 100%; background: var(--_accent); }
.km-bar-v { text-align: right; font-size: 11.5px; color: var(--_muted); font-variant-numeric: tabular-nums; }

/* ---- 툴팁 ------------------------------------------------------------------ */
.km-tip { position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: 280px; padding: 8px 10px; background: var(--_surface-2); border: 1px solid var(--_line-strong); border-radius: var(--_r); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); font-size: 12px; line-height: 1.45; color: var(--_text); pointer-events: none; }
.km-tip[hidden] { display: none; }
.km-tip-h { font-weight: 600; }
.km-tip-l { margin: 6px 0 0; padding-left: 14px; color: var(--_muted); }
.km-tip-l li { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-tip-a { margin-top: 6px; font-size: 11px; color: var(--_accent); }

/* ---- 로딩 / 오류 / 비어 있음 ------------------------------------------------- */
.km-state { margin: 0; padding: 20px 16px; border: 1px dashed var(--_line-strong); border-radius: var(--_r); font-size: 13px; color: var(--_muted); text-align: center; }
.km-error .km-state { border-color: var(--_danger); color: var(--_danger); }

/* ---- 반응형 ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .km-body { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
  .km { --_cell: var(--km-cell-sm, 30px); --_gap: 2px; }
  .km-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
  .km-tile { padding: 10px 12px; }
  .km-tile-v { font-size: 20px; }
  .km-tile-h { display: none; }
  .km-year-n { font-size: 11px; }
  .km-year-l { display: none; }
  .km-year-s { display: block; margin-top: 1px; }
  .km-topic { padding-right: 8px !important; font-size: 11.5px; }
  .km-topic-c { margin-left: 4px; font-size: 10px; }
  .km-bar { grid-template-columns: 104px minmax(0, 1fr) 3.2ch; font-size: 12px; }
}