/* 자동 생성 — 원본은 packages/ui/knowledge-graph.css */
/* Binnie 지식 그래프 — 캔버스 노드 뷰. 각진 단색 다크. 호스트 변수(--accent 등)를 우선 쓴다. */
.kg { --kg-topic: var(--accent, var(--bn-accent, #3b82f6)); --kg-course: #22c55e; --kg-project: #f59e0b; --kg-note: #9aa0ad;
      --kg-bg: var(--bg, var(--bn-bg, #0b0c0f)); --kg-surface: var(--surface, var(--bn-surface, #14161b)); --kg-surface2: var(--surface-2, var(--bn-surface-2, #1b1e26));
      --kg-line: var(--line, var(--bn-line, #262a33)); --kg-text: var(--text, var(--bn-text, #e6e8ee)); --kg-muted: var(--muted, var(--bn-muted, #9aa0ad));
      display: flex; flex-direction: column; border: 1px solid var(--kg-line); border-radius: 4px; background: var(--kg-bg); color: var(--kg-text); overflow: hidden; }
.kg-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--kg-line); background: var(--kg-surface); font-size: 12px; flex-wrap: wrap; }
.kg-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--kg-muted); }
.kg-lg { display: inline-flex; align-items: center; gap: 5px; color: var(--kg-text); }
.kg-lg::before { content: ""; width: 10px; height: 10px; border-radius: 1px; background: var(--kg-topic); }
.kg-lg-course::before { background: var(--kg-course); } .kg-lg-project::before { background: var(--kg-project); }
.kg-lg-regulation::before { background: #a78bfa; }
.kg-lg-edge { color: var(--kg-muted); } .kg-lg-explicit { color: var(--kg-text); text-decoration: underline dashed; text-underline-offset: 3px; }
.kg-tools { display: flex; gap: 6px; align-items: center; }
.kg-tools button, .kg-full { font: inherit; font-size: 12px; padding: 5px 9px; border: 1px solid var(--kg-line); border-radius: 3px; background: var(--kg-surface2); color: var(--kg-text); cursor: pointer; text-decoration: none; }
.kg-tools button:hover, .kg-full:hover { border-color: var(--kg-topic); }
.kg-stage { position: relative; height: 640px; }
.kg-compact .kg-stage { height: 520px; }
.kg-canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; touch-action: none; }
.kg-canvas.is-dragging { cursor: grabbing; }
.kg-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--kg-topic); }
.kg-tip { position: absolute; pointer-events: none; background: var(--kg-surface); border: 1px solid var(--kg-line); border-radius: 3px; padding: 7px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; max-width: 260px; z-index: 3; }
.kg-tip b { font-size: 13px; } .kg-tip-k { color: var(--kg-topic); } .kg-tip-c { color: var(--kg-muted); }
.kg-hint { position: absolute; left: 10px; bottom: 8px; font-size: 11px; color: var(--kg-muted); background: var(--kg-bg); padding: 3px 8px; border: 1px solid var(--kg-line); border-radius: 3px; pointer-events: none; }
.kg-inspector { position: absolute; top: 12px; right: 12px; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; background: var(--kg-surface); border: 1px solid var(--kg-line); border-radius: 4px; padding: 14px 14px 12px; font-size: 13px; z-index: 4; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.kg-close { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: var(--kg-muted); font-size: 20px; cursor: pointer; line-height: 1; }
.kg-kind { display: inline-block; font-size: 11px; letter-spacing: .06em; padding: 2px 7px; border-radius: 2px; color: #fff; background: var(--kg-topic); }
.kg-kind-course { background: var(--kg-course); color: #04150a; } .kg-kind-project { background: var(--kg-project); color: #1a1000; } .kg-kind-note { background: var(--kg-note); color: #111; }
.kg-inspector h3 { margin: 8px 0 2px; font-size: 16px; line-height: 1.3; }
.kg-meta { color: var(--kg-topic); font-size: 12px; } .kg-sum { margin: 8px 0; color: var(--kg-text); line-height: 1.5; }
.kg-stat { color: var(--kg-muted); font-size: 12px; margin: 6px 0 10px; } .kg-stat b { color: var(--kg-text); }
.kg-nb-t { font-size: 11px; color: var(--kg-muted); margin: 8px 0 4px; letter-spacing: .04em; }
.kg-nb { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.kg-nb button { width: 100%; display: flex; align-items: center; gap: 7px; font: inherit; font-size: 12.5px; text-align: left; padding: 5px 8px; border: 1px solid var(--kg-line); border-radius: 3px; background: var(--kg-surface2); color: var(--kg-text); cursor: pointer; }
.kg-nb button:hover { border-color: var(--kg-topic); }
.kg-dot { width: 8px; height: 8px; border-radius: 1px; background: var(--kg-topic); flex: none; } .kg-dot-course { background: var(--kg-course); } .kg-dot-project { background: var(--kg-project); }
.kg-nb-w { margin-left: auto; color: var(--kg-muted); font-size: 11px; }
.kg-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.kg-btn { font: inherit; font-size: 12.5px; padding: 6px 11px; border-radius: 3px; border: 1px solid var(--kg-topic); background: var(--kg-topic); color: #fff; text-decoration: none; cursor: pointer; }
.kg-btn-ghost { background: transparent; color: var(--kg-topic); }
.kg-state { padding: 40px 16px; text-align: center; color: var(--kg-muted); font-size: 13px; } .kg-error { color: #f87171; }
@media (max-width: 640px) { .kg-stage { height: 480px; } .kg-compact .kg-stage { height: 420px; } .kg-hint { display: none; } .kg-lg-edge { display: none; } }