.learnmap { display: block; background: #fff; cursor: grab; user-select: none; font-family: system-ui, -apple-system, "Noto Sans KR", sans-serif; }
.learnmap.dragging { cursor: grabbing; }

.learnmap .lane-bg { fill: #f9fafb; }
.learnmap .lane-bg.odd { fill: #f3f4f6; }
.learnmap .lane.dim { opacity: 0.15; }
.learnmap .lane-label { font-size: 11px; fill: #374151; font-weight: 600; pointer-events: none; }
.learnmap .head-bg { fill: #fff; }
.learnmap .layer-head { pointer-events: none; }
.learnmap .col-head { font-size: 13px; font-weight: 700; fill: #111827; }
.learnmap .col-line { stroke: #e5e7eb; stroke-width: 1; pointer-events: none; }

.learnmap .edge-base { fill: none; stroke: #d1d5db; stroke-width: 1; opacity: 0.7; }
.learnmap.has-selection .edge-base { opacity: 0.25; }
.learnmap.has-filter .edge-base { opacity: 0.12; }
.learnmap .edge-prereq, .learnmap .edge-next { fill: none; stroke-width: 2.5; }
.learnmap .edge-prereq { stroke: #d97706; }
.learnmap .edge-next { stroke: #dc2626; }
.learnmap .edge-prereq.candidate, .learnmap .edge-next.candidate { stroke-dasharray: 6 4; stroke-width: 2; }

.learnmap .dot { fill: #9ca3af; stroke: #fff; stroke-width: 1; cursor: pointer; }
.learnmap .dot:hover { stroke: #374151; }
.learnmap .dot.prereq { fill: #d97706; }
.learnmap .dot.next, .learnmap .dot.selected { fill: #dc2626; }
.learnmap .dot.cand { stroke: #374151; stroke-dasharray: 3 2; stroke-width: 1.5; }
.learnmap .dot.selected { stroke: #7f1d1d; stroke-width: 2.5; }
.learnmap .dot.hit { stroke: #1d4ed8; stroke-width: 2; }
.learnmap .dot.dim { opacity: 0.15; }
.learnmap .mark-selected { fill: none; stroke: #7f1d1d; stroke-width: 2.5; pointer-events: none; }
.learnmap .layer-marks { pointer-events: none; }
.learnmap .dot:focus { outline: none; }
.learnmap .dot:focus-visible { outline: none; stroke: #1d4ed8; stroke-width: 3.5; }

.learnmap .dot-label { font-size: 11px; fill: #1f2937; pointer-events: none; }
.learnmap .dot-label.dim { opacity: 0.15; }
.learnmap .dot.dim:is(.selected, .prereq, .next, .cand),
.learnmap .dot-label.dim:is(.selected, .prereq, .next, .cand) { opacity: 1; }
.learnmap .dot-label.selected, .learnmap .dot-label.next { fill: #991b1b; font-weight: 700; }
.learnmap .dot-label.prereq { fill: #92400e; font-weight: 700; }

.map-legend { list-style: none; margin: 0; padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #374151; }
.map-legend li { display: inline-flex; align-items: center; }
.map-legend .legend-prereq { color: #d97706; }
.map-legend .legend-next { color: #dc2626; }
.map-legend .legend-line, .map-legend .legend-size { color: #374151; }