/* 네트워크 정책 (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: one column per step from the start, cards linked left to right;
   hovering a card dims everything it does not connect to. */
.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-scroll.puzzle2 { max-height: none; padding: var(--sp-sm) 0; }
.netpolicy-colhead text { font-size: 11px; font-weight: 600; fill: var(--on-surface-variant); letter-spacing: 0.04em; }
.netpolicy-colhead text.count { font-weight: 500; opacity: 0.7; }
.netpolicy-colhead line { stroke: var(--stroke); }
.netpolicy-link2 { fill: none; stroke: var(--signal-info); stroke-width: 1.4; opacity: 0.45; transition: opacity 120ms, stroke-width 120ms; }
.netpolicy-link2.estimated { stroke-dasharray: 4 3; }
.netpolicy-arrow { fill: var(--signal-info); }
.netpolicy-arrow-on { fill: var(--signal-crit); }
.netpolicy-card { cursor: pointer; transition: opacity 120ms; outline: none; }
.netpolicy-card .bg { fill: var(--surface-high); stroke: var(--stroke-strong); stroke-width: 1; transition: stroke 120ms, fill 120ms; }
.netpolicy-card .bar { fill: var(--on-surface-variant); opacity: 0.6; }
.netpolicy-card.internet .bar { fill: var(--signal-warn); opacity: 1; }
.netpolicy-card.pc .bar { fill: var(--signal-live); opacity: 1; }
.netpolicy-card.server .bar { fill: var(--signal-info); opacity: 1; }
.netpolicy-card.db .bar { fill: var(--signal-crit); opacity: 1; }
.netpolicy-svg .netpolicy-card text.name { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--on-surface); }
.netpolicy-svg .netpolicy-card text.sub { font-size: 10px; fill: var(--on-surface-variant); }
.netpolicy-card.critical .bg { stroke: var(--signal-crit); stroke-width: 1.5; }
.netpolicy-card.start .bg { stroke: var(--signal-live); stroke-width: 2; fill: var(--tint-live); }
.netpolicy-card.fold .bg { stroke-dasharray: 5 3; }
.netpolicy-card.unreached { opacity: 0.45; }
.netpolicy-card:hover .bg, .netpolicy-card:focus-visible .bg { stroke: var(--on-surface); }
.netpolicy-card.picked .bg { stroke: var(--on-surface); stroke-width: 2; }
.netpolicy-card .badge rect { fill: var(--surface-highest); }
.netpolicy-card .badge.vuln rect { fill: var(--signal-crit); }
.netpolicy-svg .netpolicy-card .badge text { font-size: 10px; font-weight: 700; fill: var(--on-surface); }
.netpolicy-svg .netpolicy-card .badge.vuln text { fill: #fff; }
.netpolicy-svg.focus .netpolicy-card:not(.on) { opacity: 0.18; }
.netpolicy-svg.focus .netpolicy-link2:not(.on) { opacity: 0.05; }
.netpolicy-svg.focus .netpolicy-link2.on { opacity: 1; stroke-width: 2.2; stroke: var(--signal-crit); }
.netpolicy-legends { align-items: center; }
.netpolicy-legend.reached::before { background: var(--signal-info); }
.netpolicy-legend.critnode::before, .netpolicy-legend.vuln::before { width: 12px; height: 12px; border-radius: 4px; }
.netpolicy-legend.critnode::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--signal-crit); }
.netpolicy-legend.vuln::before { border-radius: 6px; background: var(--signal-crit); }
.netpolicy-critrow { width: 100%; text-align: left; padding: var(--sp-xs) var(--sp-xs); border-radius: var(--r-sm); background: none; border: 0; color: inherit; cursor: pointer; align-items: center; }
.netpolicy-critrow:hover { background: var(--surface-high); }
/* The way to the picked node: nodes as dots on a rail, hops between them. */
.netpolicy-path { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--stroke); }
.netpolicy-path li { position: relative; padding: 2px 0 2px 10px; }
.netpolicy-path-node { font-size: var(--fs-body-sm); font-weight: 600; }
.netpolicy-path-node::before { content: ''; position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--signal-info); box-shadow: 0 0 0 3px var(--surface-container); }
.netpolicy-path-node.start::before { background: var(--signal-live); }
.netpolicy-path-node.critical { color: var(--signal-crit-text); }
.netpolicy-path-node.critical::before { background: var(--signal-crit); }
.netpolicy-path-hop { color: var(--on-surface-variant); padding-top: 4px; padding-bottom: 6px; }
.netpolicy-path-fw { font-weight: 600; color: 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 { 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; }