/* 네트워크 정책 (firewall policy system link) styles. Loaded by index.html.
 * Build on tokens.css and components.css; every selector is prefixed with
 * .netpolicy- so nothing here can restyle another domain's screens. */

.netpolicy-unlinked { align-items: flex-start; padding: var(--sp-md) 0; max-width: 640px; }
.netpolicy-error { display: inline-block; max-width: 420px; }
.netpolicy-zones, .netpolicy-policy { display: inline-block; max-width: 220px; }
.netpolicy-addr { display: inline-block; max-width: 180px; }
.netpolicy-field { min-width: 220px; }
.netpolicy-addr-input { font-family: var(--font-mono); }
.netpolicy-controls { align-items: center; }
.netpolicy-controls .select { width: auto; }
.netpolicy-controls label { white-space: nowrap; }

/* SVG maps scroll inside their panel rather than squeezing the labels. */
.netpolicy-scroll { overflow: auto; max-height: 640px; border-radius: var(--r-md); background: var(--surface-low); }
.netpolicy-svg { display: block; }
.netpolicy-svg text { font-size: 11px; fill: var(--on-surface-variant); font-family: var(--font-mono); }

/* Topology: devices and links; a traced path lights up. */
.netpolicy-link { stroke: var(--stroke-strong); stroke-width: 1.2; }
.netpolicy-link.hit { stroke: var(--signal-live); stroke-width: 3; }
.netpolicy-dev rect { fill: var(--surface-container); stroke: var(--stroke-strong); }
.netpolicy-dev.fw rect { stroke: var(--signal-warn); }
.netpolicy-dev.hit rect { fill: var(--tint-live); stroke: var(--signal-live); stroke-width: 2; }
.netpolicy-dev text { fill: var(--on-surface); }

/* Puzzle: layered nodes, edges by state. */
.netpolicy-puzzle { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-md); align-items: start; }
@media (max-width: 1200px) { .netpolicy-puzzle { grid-template-columns: minmax(0, 1fr); } }
.netpolicy-colhead { font-size: 12px; fill: var(--on-surface-variant); font-weight: 600; }
.netpolicy-edge { fill: none; stroke: var(--stroke); stroke-width: 1; opacity: 0.45; }
.netpolicy-edge.estimated { stroke-dasharray: 3 3; }
.netpolicy-edge.dead { opacity: 0.12; }
.netpolicy-edge.denied { stroke: var(--signal-ok); stroke-dasharray: 2 4; opacity: 0.5; }
.netpolicy-edge.reached { stroke: var(--signal-warn); opacity: 0.85; stroke-width: 1.5; }
.netpolicy-edge.crit { stroke: var(--signal-crit); opacity: 1; stroke-width: 2.5; }
.netpolicy-node { cursor: pointer; }
.netpolicy-node circle { fill: var(--surface-high); stroke: var(--stroke-strong); stroke-width: 1.5; }
.netpolicy-node.internet circle { stroke: var(--signal-crit); }
.netpolicy-node.reached circle { fill: var(--signal-warn); }
.netpolicy-node.critical circle { stroke: var(--signal-crit); stroke-width: 3; }
.netpolicy-node.start circle { fill: var(--signal-live); stroke: var(--signal-live); }
.netpolicy-node circle.vuln { fill: var(--signal-crit); stroke: none; }
.netpolicy-node text.depth { fill: var(--signal-warn); font-weight: 700; }
.netpolicy-node:hover text { fill: var(--on-surface); }
.netpolicy-side { min-width: 0; }
.netpolicy-pol { align-items: center; padding: var(--sp-xs) 0; border-bottom: 1px solid var(--stroke); }

/* Legend swatches. */
.netpolicy-legend::before {
  content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 6px;
  vertical-align: middle; background: var(--stroke-strong);
}
.netpolicy-legend.fw::before { background: var(--signal-warn); }
.netpolicy-legend.hit::before, .netpolicy-legend.reached::before { background: var(--signal-warn); }
.netpolicy-legend.hit::before { background: var(--signal-live); }
.netpolicy-legend.crit::before { background: var(--signal-crit); }
.netpolicy-legend.denied::before { background: var(--signal-ok); }
.netpolicy-legend.estimated::before { background: repeating-linear-gradient(90deg, var(--stroke-strong) 0 3px, transparent 3px 6px); }
.netpolicy-svc-input { font-family: var(--font-mono); width: 180px; }