/* 웹 취약점 점검 (webscan, OWASP ZAP) styles. Loaded by index.html.
 * Build on tokens.css and components.css; every selector is prefixed with
 * .webscan- so nothing here can restyle another domain's screens. */

/* Risk colours: one palette for chips, counters and tiles. */
.webscan-risk-high { --webscan-c: var(--signal-crit); --webscan-tint: var(--tint-crit); }
.webscan-risk-medium { --webscan-c: var(--signal-warn); --webscan-tint: var(--tint-warn); }
.webscan-risk-low { --webscan-c: var(--signal-info); --webscan-tint: var(--tint-info); }
.webscan-risk-info { --webscan-c: var(--signal-idle); --webscan-tint: var(--surface-high); }

/* Summary tiles (open by risk). */
.webscan-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter, var(--sp-md)); }
@media (max-width: 900px) { .webscan-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.webscan-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-xs);
  padding: var(--sp-md); text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--glass-1); border: 1px solid var(--stroke); border-left: 3px solid var(--webscan-c);
  border-radius: var(--r-lg); transition: background var(--t-base, 150ms);
}
.webscan-tile:hover { background: var(--webscan-tint); }
.webscan-tile .stat-value { color: var(--webscan-c); }
.webscan-risk-high.webscan-tile .stat-value { color: var(--signal-crit-text); }

.webscan-statuscount {
  display: inline-flex; align-items: center; gap: var(--sp-xs); padding: 2px 4px;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-md);
}
.webscan-statuscount:hover { background: var(--surface-high); }

/* Four counters in a row (targets table, asset tab). */
.webscan-riskstrip { display: inline-flex; gap: 4px; }
.webscan-riskcount {
  min-width: 28px; padding: 1px 6px; border-radius: var(--r-sm); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-code); font-variant-numeric: tabular-nums;
  background: var(--webscan-tint); color: var(--webscan-c); cursor: default;
}
.webscan-riskcount.pick { cursor: pointer; }
.webscan-riskcount.pick:hover { outline: 1px solid var(--webscan-c); }
.webscan-riskcount.zero { background: transparent; color: var(--outline); opacity: 0.6; }

/* Filters and form. */
.webscan-filters { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: flex-end; }
.webscan-filters .field { min-width: 150px; }
.webscan-checkrow { cursor: pointer; align-items: center; }
.webscan-check { width: 16px; height: 16px; accent-color: var(--signal-live); }
.webscan-q { width: 280px; max-width: 100%; }
.webscan-textarea { min-height: 72px; resize: vertical; }
.webscan-num { width: 100%; }
.webscan-form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); }
.webscan-form4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-sm); }
@media (max-width: 640px) { .webscan-form2, .webscan-form4 { grid-template-columns: minmax(0, 1fr); } }
.webscan-ajax { justify-content: flex-end; }
.modal.webscan-modal { width: min(680px, calc(100vw - 32px)); }
.modal.webscan-modal.wide { width: min(980px, calc(100vw - 32px)); }

/* Tables. */
.webscan-url { display: inline-block; max-width: 340px; }
.webscan-cell { display: inline-block; max-width: 220px; }
.webscan-alertname { max-width: 320px; }
.webscan-rowactions { flex-wrap: nowrap; }
.webscan-progress { min-width: 140px; }
.webscan-meter { width: 96px; }
.webscan-meter > i { background: var(--signal-live); }
.webscan-candwrap { max-height: 56vh; }
.webscan-candurl { min-width: 240px; }
.webscan-jobline { align-items: flex-start; }

/* Drawer. */
.drawer.webscan-drawer { width: min(620px, 100vw); }
.webscan-drawer-title { min-width: 0; overflow-wrap: anywhere; }
.webscan-section {
  font-size: var(--fs-label-md); color: var(--outline);
  border-top: 1px solid var(--stroke); padding-top: var(--sp-sm);
}
.webscan-prose { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.webscan-evidence { max-height: 220px; margin: 0; }
.webscan-break { overflow-wrap: anywhere; word-break: break-all; }
.webscan-link { color: var(--signal-live); overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: 4px; }
a.webscan-tag { text-decoration: none; }
.webscan-timeline { display: flex; flex-direction: column; gap: 8px; border-left: 2px solid var(--outline-variant); padding-left: 12px; }
.webscan-timeline > div { position: relative; }
.webscan-timeline > div::before {
  content: ''; position: absolute; left: -17px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--signal-live);
}

/* The active-scan warning. */
.webscan-warning {
  display: flex; flex-direction: column; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-lg);
  background: var(--tint-crit); border: 1px solid rgb(239 68 68 / 0.45); color: var(--signal-crit-text);
  font-size: var(--fs-body-sm); line-height: var(--lh-body-md);
}
.webscan-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.webscan-note { font-size: var(--fs-body-sm); color: var(--outline); }