/* ============================================================================
   비노드 NexaNode — 대시보드 디자인 시스템 (밝은 단일 테마)
   팔레트는 :root 한 곳에서만 정의한다. 대부분 컴포넌트가 var(--*)를 쓰므로 팔레트만 바뀌면 전 페이지가 함께 적응한다.
   ========================================================================== */
/* ── Pretendard (SIL OFL 1.1, 로컬 동봉 — 폐쇄망에서도 외부 CDN 없이 로드) ─────────── */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap;
  src: url("/static/fonts/Pretendard-Regular.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap;
  src: url("/static/fonts/Pretendard-Medium.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap;
  src: url("/static/fonts/Pretendard-SemiBold.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap;
  src: url("/static/fonts/Pretendard-Bold.subset.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 800; font-display: swap;
  src: url("/static/fonts/Pretendard-ExtraBold.subset.woff2") format("woff2"); }

:root {
  /* 구조 토큰(verdana 원칙: 작은 라운드·넉넉한 간격·약한 그림자) */
  --radius: 8px;
  --radius-sm: 6px;
  --gap: 24px;
  /* 심각도 — 흰 표면 기준 4.5:1 이상(글자·채움 겸용). 단계 간 명도 차 유지 */
  --critical: #b91c1c;
  --high: #dc2626;
  --medium: #b45309;
  --low: #0369a1;
  --info: #64748b;
  /* 정상·완료·해소 — 심각도 --low(파랑)와 의미를 분리한다. 흰 표면 4.5:1 */
  --ok: #15803d;
  /* 배너 글자색(옅은 배경 위 대비 확보) */
  --banner-warn-fg: #7a5a00;
  --banner-error-fg: #a3121f;
  --banner-ok-fg: #0d6b3f;

  /* KISA 중요도(.imp-*)·자산 위험없음(.badge.risk-none) 배지 */
  --imp-high-bg: #fde2e1;
  --imp-high-fg: #b91c1c;
  --imp-mid-bg: #fdf0d5;
  --imp-mid-fg: #854d0e;
  --imp-low-bg: #eef1f5;
  --imp-low-fg: #555555;
  --risk-none-bg: #e2e8f4;
  --risk-none-fg: #5b6678;

  /* 밝은 팔레트(유일한 테마) */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e8edf3;
  --sidebar: #ffffff;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --text: #0f172a;
  --text-dim: #475569;
  --muted: #5d6c81;
  --accent: #017089;          /* 브랜드 시안 계열 — 글자용(흰 표면 4.5:1 이상). 채움은 --brand-cyan */
  --brand-cyan: #01b7df;      /* 브랜드 시안 원색(CI) */
  --accent-2: #062e5c;        /* 브랜드 네이비 */
  --accent-soft: rgba(1, 183, 223, .12);
  --brand-navy: #062e5c;
  --shadow: 0 1px 3px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --bg-glow: var(--bg);
  --code-bg: #f1f5f9;
  --topbar-bg: rgba(255,255,255,.85);
  color-scheme: light;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg-glow) fixed;
  color: var(--text);
  font: 14px/1.55 Pretendard, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  font-family: Pretendard, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 21px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 650; margin: 26px 0 12px; color: var(--text); letter-spacing: -.01em; }
h3 { font-size: 13.5px; font-weight: 600; margin: 18px 0 8px; }
.muted { color: var(--muted); }
code { background: var(--surface-3); padding: 1px 6px; border-radius: 5px; font-size: 12px; }

/* ── App shell (sidebar + main column) ──────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar {
  flex: 0 0 232px; width: 232px;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-brand {
  display: flex; align-items: center; gap: 9px; color: var(--text);
  font-weight: 800; font-size: 17px; padding: 6px 10px 16px; letter-spacing: -.02em;
}
/* 브랜드 로고(선택, app/static/brand/README.md) — 밝은 배경용 이미지 */
.brand-logo { height: 22px; width: auto; display: block; }
.brand-name { font-weight: 800; letter-spacing: -.02em; }
.dev-badge { font-size: 10px; margin-left: .4rem; }
.login-logo { height: 34px; width: auto; margin: 0 auto 10px; }
.logo-dot { width: 11px; height: 11px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent); }
.side-nav { display: flex; flex-direction: column; gap: 1px; }
.nav-group { color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: 16px 12px 6px; }
.side-nav a {
  display: flex; align-items: center; gap: 10px; color: var(--text-dim);
  padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500;
}
.side-nav a .ni { width: 18px; text-align: center; opacity: .85; font-size: 13px; }
.side-nav a:hover { background: var(--surface); color: var(--text); }
.side-nav a.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

.topbar {
  height: 60px; flex: 0 0 60px;
  display: flex; align-items: center;
  padding: 0; background: var(--topbar-bg); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.topbar-inner {
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 0 clamp(24px, 3.5vw, 56px);
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-title { font-weight: 650; color: var(--text-dim); font-size: 14px; }
.topbar-user { display: flex; align-items: center; gap: 10px; }

/* 페이지 도움말 · 진단가이드 — 상단바 ⓘ 호버 팝오버(순수 CSS, JS 없음) */
.topbar-head { display: flex; align-items: center; min-width: 0; }
.help { position: relative; display: inline-flex; align-items: center; margin-left: 10px; flex: 0 0 auto; font-weight: 400; }
.help-dot { display: inline-flex; align-items: center; gap: 4px; cursor: help; font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; transition: color .12s, border-color .12s, background .12s; }
.help:hover .help-dot, .help:focus-within .help-dot { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.help-pop { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  width: 340px; max-width: min(340px, 86vw); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius, 10px); box-shadow: 0 12px 34px rgba(6, 46, 92, .16); padding: 13px 15px; cursor: default; }
.help:hover .help-pop, .help:focus-within .help-pop { display: block; }
.help-pop .help-h { display: block; font-size: 13px; color: var(--text); margin-bottom: 6px; }
.help-pop ul { margin: 0; padding-left: 16px; }
.help-pop li { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 4px; }
.help-pop li:last-child { margin-bottom: 0; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim);
  font-size: 12.5px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 800; font-size: 12px; }
.content-banner { max-width: 1400px; margin: 0 auto; width: 100%; padding: 16px clamp(24px, 3.5vw, 56px) 0; }
.content { padding: 24px clamp(24px, 3.5vw, 56px) 48px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ── Form controls (base) ───────────────────────────────────────────────── */
/* 입력칸 스타일이 `.filters`·`.scan-form` 조상 아래에만 걸려 있어, 그 **밖**의 칸은
   브라우저 기본값으로 렌더됐다(2026-10-17 조사: 22곳 · 브라우저 실측으로 확인).
   UA 기본값은 Arial 13.3px·`inset` 테두리이고 높이가 18px 안팎이라, 제품 글꼴
   (Pretendard)·토큰 테두리·39px 칸과 나란히 놓이면 바로 드러난다.

   **요소 선택자(특이도 0,0,1)로 둔 것이 핵심이다** — 클래스·id 를 쓰는 기존 규칙
   (`.filters input`·`.act-as`·`#chat-input` 등)이 전부 이것을 이긴다. 그래서 이미
   스타일이 있던 칸은 하나도 바뀌지 않고, 아무것도 못 받던 칸만 바닥값을 얻는다.

   제외: 체크박스·라디오(`accent-color` 로 따로)·파일·범위·색상, 그리고 submit/button/
   reset — 그것들은 버튼이므로 `.btn` 을 쓴다. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
select,
textarea {
  font: inherit; font-size: 12.5px; line-height: 1.45; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 7px 10px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
select:focus,
textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500;
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: var(--accent); background: var(--surface-3); }
.btn.primary { background: linear-gradient(180deg, #017d98, #016a82); border-color: transparent; color: #fff; font-weight: 600; }  /* 브랜드 시안 */
.btn.primary:hover { filter: brightness(.92); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--critical); color: var(--critical); background: transparent; }
.btn.sm, .btn.small { padding: 5px 11px; font-size: 12.5px; }
/* 표 행의 조용한 삭제 버튼. 네 지면(피싱훈련 그룹·대상·프로그램·템플릿)이 같이 쓴다 —
   한 지면의 <style> 안에 있던 탓에 나머지 셋에서 브라우저 기본 버튼으로 나왔다. */
.gd-del { background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--radius-sm); padding: 3px 9px; font-size: 12px; cursor: pointer; }
.gd-del:hover { border-color: var(--critical); color: var(--critical); }

/* ── Cards / KPI ────────────────────────────────────────────────────────── */
.card, .kpi, .domain-card, .report-preview, .scan-detail, .asset-detail, .sbom-detail {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
/* 상세 페이지는 하나의 큰 카드로 감싸지 않고 평평하게 — 내부 요소(개요/필터/표 등)만 카드.
   그래야 목록 페이지처럼 콘텐츠 좌우 여백이 자연스럽게 생긴다(카드-in-카드 방지). */
.domain-detail, .scan-detail, .asset-detail { background: transparent; border: none; }
/* 점검하기 모든 표를 콘텐츠 길이와 무관하게 동일 폭으로 고정(모의해킹 등 긴 내용도 넘치지 않게). */
.domain-detail table.findings { table-layout: fixed; width: 100%; }
/* 구분(점검 회차·대상) · 점검일시 — 한 대상 여러 회차를 표에서 구분 */
.domain-detail table.findings th.col-scan { width: 9%; }
.domain-detail table.findings th.col-scanat { width: 9.5%; }
.domain-detail table.findings td.scan-col { font-variant-numeric: tabular-nums; }
.domain-detail table.findings td.scan-col .sub { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.domain-detail table.findings td.scan-at { white-space: nowrap; font-size: 12px; font-variant-numeric: tabular-nums; }
.domain-detail .findings th, .domain-detail .findings td { overflow-wrap: anywhere; word-break: break-word; }
/* 점검항목(vtype)·CWE는 기본이 nowrap이라 고정폭 칸을 넘어 옆 열로 흐른다 → 표 안에서는 줄바꿈 허용. */
.domain-detail .findings .vtype, .domain-detail .findings .cwe { white-space: normal; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 6px 0 4px; }
.kpi { padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .55; }
.kpi-num { font-size: 28px; font-weight: 750; line-height: 1.05; letter-spacing: -.02em; }
.kpi-num.ok { color: var(--ok); } .kpi-num.run { color: var(--accent); } .kpi-num.bad { color: var(--critical); }
.kpi-label { color: var(--muted); font-size: 12px; margin-top: 5px; }

/* ── Overview band (donut + summary) ────────────────────────────────────── */
.overview { margin-bottom: 8px; }
.viz-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--gap); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 14px 0; box-shadow: var(--shadow-sm); }
.donut { width: 150px; height: 150px; display: block; margin: 0 auto; }
.donut-track { fill: none; stroke: var(--surface-3); stroke-width: 14; }
.donut-seg { fill: none; stroke-width: 14; stroke-linecap: butt; }
.donut-num { fill: var(--text); font-size: 26px; font-weight: 750; text-anchor: middle; }
.donut-label { fill: var(--muted); font-size: 9px; text-anchor: middle; letter-spacing: .04em; }
.sev-critical-stroke { stroke: var(--critical); } .sev-high-stroke { stroke: var(--high); }
.sev-medium-stroke { stroke: var(--medium); } .sev-low-stroke { stroke: var(--low); } .sev-info-stroke { stroke: var(--info); }
.sev-legend { display: flex; flex-direction: column; gap: 9px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.legend-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.legend-fill { height: 100%; border-radius: 4px; }
.legend-val { color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; font-weight: 600; }
.dot-critical { background: var(--critical); } .dot-high { background: var(--high); }
.dot-medium { background: var(--medium); } .dot-low { background: var(--low); } .dot-info { background: var(--info); }
.fill-critical { background: var(--critical); } .fill-high { background: var(--high); }
.fill-medium { background: var(--medium); } .fill-low { background: var(--low); } .fill-info { background: var(--info); }

/* legacy severity bar (kept) */
.sevbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin: 8px 0; border: 1px solid var(--line); }
.sevseg { min-width: 4px; }
.sev-critical-bg { background: var(--critical); } .sev-high-bg { background: var(--high); }
.sev-medium-bg { background: var(--medium); } .sev-low-bg { background: var(--low); } .sev-info-bg { background: var(--info); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim); }
.badge.mini { padding: 1px 7px; font-size: 11px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.badge.queued { color: var(--text-dim); }
.badge.running, .badge.sending { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.badge.completed { color: var(--ok); border-color: rgba(21,128,61,.4); background: rgba(21,128,61,.1); }
.badge.failed { color: var(--critical); border-color: rgba(185,28,28,.4); background: rgba(185,28,28,.1); }
.badge.canceled { color: var(--text-dim); }
/* 대상 보호 중단 — 성공(초록)도 실패(빨강)도 아닌 '주의'. 규칙이 없으면 .badge
   기본 회색으로 떨어져 queued·canceled 와 육안상 구분되지 않는다(가장 경보적인
   상태가 페이지에서 가장 조용한 칩이 된다). .badge.sample 과 같은 호박색 관례. */
.badge.protective_stop { color: var(--medium); border-color: rgba(180,83,9,.45); background: rgba(180,83,9,.12); }
/* 일시정지(토큰 상한) — 종료가 아니라 재개 가능한 파킹 상태. 보호중단(호박)과 구분되게
   차분한 청보라 톤으로(진행중=accent 파랑과도 헷갈리지 않게). */
.badge.paused_budget { color: #4338ca; border-color: rgba(67,56,202,.4); background: rgba(67,56,202,.08); }
.badge.sample { color: var(--medium); border-color: rgba(180,83,9,.4); background: rgba(180,83,9,.1); }
.badge.real { color: var(--ok); border-color: rgba(21,128,61,.35); background: rgba(21,128,61,.08); }
.vtype { white-space: nowrap; }
.cwe { font-size: 11px; margin-left: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.type-stats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 16px; }
.chip { display: inline-flex; gap: 5px; align-items: center; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); font-size: 12px; text-decoration: none; background: transparent; }
.chip:hover { border-color: var(--accent); }
.chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip b { font-variant-numeric: tabular-nums; }
.finding-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.finding-link:hover { text-decoration: underline; }
/* finding detail (modal + full page) */
.finding-detail { max-width: 920px; }
.fd-head { display: flex; gap: 8px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.fd-title { font-size: 18px; margin: 12px 0 18px; line-height: 1.4; color: var(--text); }
.fd-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 18px; margin: 6px 0 18px; }
.fd-meta dt { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.fd-meta dd { margin: 0; font-size: 13px; color: var(--text); word-break: break-word; }
.finding-detail h3, .modal-body h3 { font-size: 13px; margin: 18px 0 7px; color: var(--accent-2);
  text-transform: none; letter-spacing: 0; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.detail-text { white-space: pre-wrap; line-height: 1.6; font-size: 13.5px; color: var(--text); }
.detail-list { margin: 0; padding-left: 20px; line-height: 1.7; font-size: 13.5px; }
.detail-list li { margin: 3px 0; }
.code-block { background: var(--surface-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.raw-wrap { margin-top: 22px; }
.raw-wrap > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }

/* ── 상세 조치(6섹션) ────────────────────────────────────────────────────────
   이 기능의 요점은 **줄 단위 출처 표시**다 — 검토된 문장과 AI 가 만든 문장이
   한 문서에 섞여 있고, 어느 쪽인지가 한눈에 갈려야 한다. 세 배지가 모두
   .badge 기본 회색으로 떨어지면 시각적으로 동일한 알약 셋이 되어 신뢰 신호가
   사라진다. 색 관례는 이미 있는 것을 그대로 쓴다: 초록=확인된 것(.badge.real),
   호박=주의(.badge.sample), 회색=미정(.badge.queued).
   모든 색은 var(--*) 토큰이거나 흰 표면 위 저채도 반투명이다. */
.badge.remediation-verified { color: var(--ok); border-color: rgba(21,128,61,.35);
  background: rgba(21,128,61,.08); }
.badge.remediation-llm { color: var(--medium); border-color: rgba(180,83,9,.4);
  background: rgba(180,83,9,.1); }
/* '초안' — 실패도 경고도 아닌 '아직 사람이 안 본 것'. 점선 테두리로 미완결을
   표시해, 색만으로 구분하지 않게 한다(색각 이상 사용자도 형태로 갈린다). */
.badge.remediation-unverified { color: var(--muted); border-style: dashed;
  background: transparent; }

.rem-section { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.rem-section:first-of-type { border-top: 0; padding-top: 0; }
.rem-section h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 650; margin: 0 0 7px; color: var(--accent-2); }
.rem-section .muted { font-size: 12.5px; }

.rem-steps { margin: 0; padding-left: 20px; line-height: 1.7; font-size: 13.5px; }
.rem-steps > li { margin: 0 0 10px; }
.rem-steps > li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.rem-steps .badge { margin-left: 6px; vertical-align: 1px; }
.rem-steps .code-block { margin: 6px 0 0; }
/* 명령 블록 + 복사 버튼. 버튼이 코드 블록 위에 겹치지 않고 오른쪽 위에 앉는다.
   .remediation-patch 는 보안 가이드·finding 상세도 함께 쓰는 공용 래퍼다. */
.remediation-patch { position: relative; }
.remediation-patch .copy-btn { position: absolute; top: 6px; right: 6px; z-index: 1; opacity: .75; }
.remediation-patch .copy-btn:hover { opacity: 1; }

/* ── 안내 문구(.notice) ──────────────────────────────────────────────────────
   .banner 와 같은 역할이지만 본문 흐름 안에 들어가는 짧은 문장용이다. 규칙이
   없으면 H1 '환경 확인 필요' 배너와 H5 '명령 제외' 고지가 그냥 본문처럼 보인다. */
.notice { padding: 10px 13px; border-radius: var(--radius-sm); margin: 8px 0;
  font-size: 12.5px; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); }
.notice.warn { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.35);
  color: var(--banner-warn-fg); }
/* finding detail modal */
.modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start;
  justify-content: center; padding: 6vh 16px; overflow-y: auto;
  background: rgba(6, 9, 14, .66); backdrop-filter: blur(3px); }
.modal-overlay[hidden] { display: none; }
.modal-card { position: relative; width: min(880px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 30px; animation: fd-pop .14s ease-out; }
.modal-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted);
  font: inherit; font-size: 13px; }
.modal-close:hover { color: var(--text); border-color: var(--accent); }
.modal-body .fd-head { margin-top: 0; padding-right: 36px; }
.modal-body h3:first-of-type { border-top: none; padding-top: 0; }
@keyframes fd-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* vulnerable-code viewer (line numbers + highlighted vuln lines) */
.codeview { margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.codeview-head { padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text); }
.codeview-pre { background: var(--surface-3); font-size: 12.5px; line-height: 1.55; overflow-x: auto; padding: 6px 0; }
.cl { display: flex; min-width: max-content; }
.cl .ln { flex: 0 0 46px; text-align: right; padding: 0 12px 0 8px; color: var(--muted); user-select: none; }
.cl .lc { flex: 1; white-space: pre; padding-right: 14px; }
.cl.vuln { background: rgba(185,28,28, .15); }
.cl.vuln .ln { color: var(--critical); font-weight: 700; }
.fix-wrap { padding: 8px 12px; border-top: 1px solid var(--line-soft); }
.fix-wrap > summary { cursor: pointer; color: var(--ok); font-size: 12px; }
.fix-wrap .code-block { margin-top: 8px; }
.sev-critical { color: #fff; background: var(--critical); border-color: transparent; }
.sev-high { color: #fff; background: var(--high); border-color: transparent; }
.sev-medium { color: #fff; background: var(--medium); border-color: transparent; }
.sev-low { color: #fff; background: var(--low); border-color: transparent; }
.sev-info { color: #fff; background: var(--info); border-color: transparent; }
.sev-review { color: #fff; background: var(--info); border-color: transparent; opacity: .85; }
.summary { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 6px 0 4px; }

/* ── Domain cards grid ──────────────────────────────────────────────────── */
.domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.domain-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; color: var(--text);
  box-shadow: var(--shadow-sm); transition: transform .12s, border-color .12s; }
a.domain-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.dc-head { display: flex; align-items: center; gap: 9px; }
.dc-icon { font-size: 17px; }
.dc-title { font-weight: 650; flex: 1; font-size: 14px; }
.dc-blurb { font-size: 11.5px; color: var(--muted); }
.dc-sev { display: flex; gap: 4px; flex-wrap: wrap; min-height: 22px; align-items: center; }
.dc-foot { font-size: 11.5px; color: var(--muted); margin-top: auto; padding-top: 4px; border-top: 1px solid var(--line-soft); }

/* ── CVE 지속 모니터링(신규취약점 위젯 + KISA 공지 패널) ─────────────────── */
.cve-monitor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cve-monitor h3 { font-size: 13px; font-weight: 650; margin: 0 0 8px; }
.cvm-new, .cvm-adv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm); }
.cvm-assets { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cvm-adv ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.cvm-adv a { color: var(--text); text-decoration: none; }
.cvm-adv a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 720px) { .cve-monitor { grid-template-columns: 1fr; } }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap, .scan-list, .findings { width: 100%; }
table.scan-list, table.findings {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.scan-list th, .findings th { text-align: left; padding: 11px 14px; color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-2); border-bottom: 1px solid var(--line); }
.scan-list td, .findings td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; vertical-align: middle; }
.scan-list tbody tr:last-child td, .findings tbody tr:last-child td { border-bottom: none; }
.scan-list tbody tr:hover, .findings tbody tr:hover { background: var(--surface-2); }
.row-link { cursor: pointer; }
.target, .loc { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: var(--text-dim); }
.findings details summary { cursor: pointer; font-weight: 550; }
.findings .desc { margin: 8px 0; color: var(--text-dim); }
.poc-label { color: var(--muted); font-size: 11px; margin: 8px 0 3px; }
pre.poc, pre.log, .raw-report pre, .raw pre {
  background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-dim); }
pre.log { max-height: 360px; }

/* ── ETA / 룰셋 배지 / 페이지네이션(게시판) ─────────────────────────────── */
.status-line .eta { color: var(--text-dim); font-size: 12px; margin-left: 8px;
  background: rgba(67,56,202,.06); border: 1px solid rgba(67,56,202,.28);
  border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
.badge.ruleset { background: rgba(21,128,61,.12); color: var(--ok); }
.list-meta { margin: 10px 0 4px; font-size: 12px; }
.pager { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.pager .pg { min-width: 30px; text-align: center; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text-dim); text-decoration: none; font-size: 13px; }
.pager .pg:hover { border-color: var(--accent); color: var(--text); }
.pager .pg.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pager .pg-gap { color: var(--muted); padding: 0 2px; }
.pager .btn.small.disabled { opacity: .4; pointer-events: none; }
/* .pg 는 원래 <a> 용 — 홈 최근점검 페이저는 <button> 이라 UA 기본 배경/폰트를 링크형에 맞춘다. */
.pager button.pg { background: transparent; cursor: pointer; font: inherit; line-height: 1.4; }
.pager button.pg.active { background: var(--accent); }

/* ── Sections / heads / filters / forms ─────────────────────────────────── */
.section-head { display: flex; align-items: center; justify-content: space-between; }
.detail-head { display: flex; align-items: center; gap: 14px; }
.findings-cell { white-space: nowrap; }
.filters { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 14px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; }
.filters label, .scan-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
/* 위 display:flex 는 브라우저 기본 [hidden]{display:none} 을 **항상 이긴다**(.es [hidden] 과
   같은 함정). 이 한 줄이 없으면 계정 생성 폼의 새 회사명 칸은 JS 가 멀쩡해도 늘 보인다. */
.scan-form label[hidden], .new-company-field[hidden] { display: none !important; }
.filters select, .filters input, .scan-form input, .scan-form select, .scan-form textarea,
.ai-setup__form select, .ai-setup__form input {
  padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 400; }
.filters select, .filters input { padding: 7px 10px; }
.ai-setup__form input[type="checkbox"] { width: auto; padding: 0; }
.scan-form { display: flex; flex-direction: column; gap: 15px; max-width: 620px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.scan-form input:focus, .scan-form select:focus, .scan-form textarea:focus,
.filters select:focus,
.ai-setup__form input:focus, .ai-setup__form select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.field-error { color: var(--critical); font-weight: 400; font-size: 12.5px; }

/* 자동 점검 설정 — 비전문가 운영자용 단계형 폼 */
.ai-setup { max-width: 680px; }
.ai-setup__head h1 { margin: 0 0 6px; }
.ai-setup__head .muted { margin: 0 0 18px; line-height: 1.55; }
.ai-setup__form { display: flex; flex-direction: column; gap: 6px; max-width: 680px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); }
.ai-step { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.ai-step:first-of-type { border-top: 0; padding-top: 4px; }
.ai-step__no { flex: none; width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); }
.ai-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ai-field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; }
.ai-field__label { font-size: 13px; font-weight: 700; color: var(--text); }
.ai-field__hint { font-size: 12px; font-weight: 400; color: var(--text-dim); line-height: 1.5; }
.ai-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ai-row .ai-field { flex: 1 1 200px; }
.ai-domains { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ai-domain { display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 13px; font-weight: 500; color: var(--text); }
.ai-domain:hover { border-color: var(--accent); }
.ai-domain:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ai-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.ai-actions { margin-top: 4px; }
.ai-setup__note { margin-top: 14px; line-height: 1.55; }
.form-actions { display: flex; gap: 10px; }
.add-asset { margin: 14px 0; }
.add-asset > summary { display: inline-block; list-style: none; cursor: pointer; }
.add-asset[open] > summary { margin-bottom: 12px; }

/* assets 필터 — 저사용 필터 5종을 접이식으로(항상 보이는 3종과 분리). */
.filters-advanced { flex-basis: 100%; }
.filters-advanced > summary { list-style: none; cursor: pointer; }
.filters-advanced[open] { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filters-advanced[open] > summary { flex-basis: 100%; margin-bottom: 4px; }

/* meta grid (detail pages) */
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; margin: 16px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.meta dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.meta dd { margin: 2px 0 0; font-size: 13.5px; }
/* 전체 폭 항목(예: 포트별 결과 표) — 3열 그리드 한 줄을 통째로 차지한다.
   1/3 칸에 넣으면 넓은 표가 오른쪽에 눌려 읽기 어렵다. */
.meta .meta-full { grid-column: 1 / -1; }
.meta .meta-full > dt { margin-bottom: 8px; }
.meta .meta-full > dd { margin: 0; }
/* 넓은 표는 자기 컨테이너 안에서만 가로 스크롤(페이지 본문은 가로 스크롤 금지). */
.table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.table-scroll > table.findings { margin: 0; min-width: 520px; }
.table-scroll > table.findings th:first-child, .table-scroll > table.findings td:first-child { padding-left: 16px; }
td.nowrap, th.nowrap { white-space: nowrap; }
.mono-cell { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); font-size: 12px; word-break: break-all; }

/* SBOM 상세 — 머리말·KPI·취약점 심각도 요약 */
.sbom-head { margin-bottom: 14px; }
.sbom-head h1 { margin: 0 0 4px; }
.sbom-target { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sbom-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 12px; }
.inline-note { margin: 0 0 12px; font-size: 12.5px; color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.sbom-sevsum { margin: 2px 0 10px; }
.sbom-vulns td .badge, .sbom-sevsum .badge { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbom-vulns td:first-child { white-space: nowrap; width: 1%; }
.port-table .port-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.scan-detail, .domain-detail, .asset-detail, .reports, .admin-users, .assets, .overview, .form-wrap { padding: 0; }
.scan-detail > *, .domain-detail > *, .asset-detail > *, .reports > * { /* spacing handled by elements */ }

/* ── Banners / empty / misc ─────────────────────────────────────────────── */
.banner { padding: 12px 16px; border-radius: var(--radius-sm); margin: 6px 0; font-size: 13px; }
.banner ul { margin: 6px 0 0; padding-left: 18px; }
.banner-warn { background: rgba(180,83,9,.08); border: 1px solid rgba(180,83,9,.35); color: var(--banner-warn-fg); }
.banner-error { background: rgba(185,28,28,.08); border: 1px solid rgba(185,28,28,.4); color: var(--banner-error-fg); }
/* 중립 배너 — 경고가 아니라 맥락(누가 점검했는지 같은)을 알리는 문장용. */
.banner-note { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); }
/* 보조 설명을 네이티브 title= 툴팁으로 옮길 때 쓰는 표시자. */
.hint { cursor: help; border-bottom: 1px dotted var(--muted); }
.hint-icon { cursor: help; color: var(--muted); font-size: 12px; margin-left: 4px; }
.empty { text-align: center; padding: 48px 0; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty .btn { margin-top: 12px; }
.status-line { display: flex; align-items: center; gap: 10px; }
.elapsed { color: var(--muted); font-variant-numeric: tabular-nums; }
.inline { display: inline; }
.readiness { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 18px; }
.ready-ok { color: var(--ok); }
.report-actions { display: flex; gap: 10px; align-items: center; margin: 14px 0; flex-wrap: wrap; }

/* ── 결과 보고서 (가독성 디자인) ─────────────────────────────────────────── */
.report-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.report-overview { padding: 18px 22px; margin: 14px 0; display: grid;
  grid-template-columns: 160px 1fr; gap: 26px; align-items: center; box-shadow: var(--shadow-sm); }
.ro-total { text-align: center; border-right: 1px solid var(--line); padding-right: 18px; }
.ro-total b { display: block; font-size: 36px; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.ro-total > span { color: var(--muted); font-size: 12px; }
.ro-total .ro-sup { display: block; margin-top: 8px; font-size: 11px; color: var(--accent); }
.ro-sevbars { display: flex; flex-direction: column; gap: 7px; }
.ro-sevrow { display: flex; align-items: center; gap: 10px; }
.ro-sevrow .sevbar-label { min-width: 72px; }
.ro-sevrow .sevbar-track { flex: 1; height: 15px; border-radius: 5px; background: var(--surface-3);
  border: 1px solid var(--line); overflow: hidden; }
.ro-sevrow .sevbar-fill { display: block; height: 100%; transition: width .4s ease; }
.ro-sevval { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--text-dim); font-weight: 600; }
/* 노출 추세 막대(신규/해소/잔존/미재검) — 위 ro-sevbars 구조 재사용, 색만 전용 */
.trend-new { color: #fff; background: var(--accent); border-color: transparent; }
.trend-resolved { color: #fff; background: var(--ok); border-color: transparent; }
.trend-persisting { color: #fff; background: var(--medium); border-color: transparent; }
.trend-unverified { color: #fff; background: var(--high); border-color: transparent; }
.trend-fill-new { background: var(--accent); }
.trend-fill-resolved { background: var(--ok); }
.trend-fill-persisting { background: var(--medium); }
.trend-fill-unverified { background: var(--high); }
/* 노출 추세 — KPI 타일 색·범례·표 숫자색 (상태색 관례 재사용) */
.kpi-num.t-new { color: var(--accent); }
.kpi-num.t-resolved { color: var(--ok); }
.kpi-num.t-persisting { color: var(--medium); }
.kpi-num.t-unverified { color: var(--high); }
.kpi.t-new::before { background: var(--accent); opacity: .85; }
.kpi.t-resolved::before { background: var(--ok); opacity: .85; }
.kpi.t-persisting::before { background: var(--medium); opacity: .85; }
.kpi.t-unverified::before { background: var(--high); opacity: .85; }
.kpi.t-open::before { background: var(--text-dim); opacity: .6; }
.trend-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 2px 2px 6px; font-size: 12px; color: var(--text-dim); }
.trend-legend span { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend i, .mttr-sev .badge i, .trend-sevdot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.mttr-sev { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mttr-sev .badge i, .trend-sevdot { border-radius: 50%; margin-right: 5px; }
.trend-table td.num { text-align: right; }
.trend-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.trend-num.t-new { color: var(--accent); }
.trend-num.t-resolved { color: var(--ok); }
.trend-num.t-persisting { color: var(--medium); }
.trend-num.t-unverified { color: var(--high); }
.trend-num.zero { color: var(--muted); font-weight: 500; }
tr.trend-latest { background: var(--accent-soft); }
.report-section { padding: 16px 20px; margin: 14px 0; box-shadow: var(--shadow-sm); }
.rs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rs-head h3 { margin: 0; font-size: 15px; }
.rs-count { color: var(--muted); font-size: 12px; }
.rs-sev { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.report-table { margin: 0; table-layout: fixed; width: 100%; }
.report-table td, .report-table th { overflow-wrap: anywhere; word-break: break-word; }
.report-table .vtype, .report-table .cwe { white-space: normal; }
.other-evidence { margin-top: .35rem; font-size: 12.5px; }
.other-evidence .evidence-row { margin: .25rem 0; }
.other-evidence pre { margin: .2rem 0 0; padding: .4rem .5rem; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.report-table tbody tr { border-left: 3px solid transparent; }
.report-table tbody tr.sevrow-critical { border-left-color: var(--critical); }
.report-table tbody tr.sevrow-high { border-left-color: var(--high); }
.report-table tbody tr.sevrow-medium { border-left-color: var(--medium); }
.report-table tbody tr.sevrow-low { border-left-color: var(--low); }
.report-table tbody tr.sevrow-info { border-left-color: var(--info); }
/* 접이식 리포트 섹션(대량 결과 가독성) */
.report-jump { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.report-jump .jump-chip { cursor: pointer; }
details.report-section > summary.rs-head { cursor: pointer; list-style: none; user-select: none;
  margin: 0; padding: 2px 0; }
details.report-section > summary.rs-head::-webkit-details-marker { display: none; }
.report-section .rs-caret { display: inline-block; transition: transform .15s ease; color: var(--muted); margin-right: 2px; }
details.report-section[open] .rs-caret { transform: rotate(90deg); }
.report-section .rs-more { padding: 6px 2px 2px; font-size: 12px; }
@media (max-width: 720px) { .report-overview { grid-template-columns: 1fr; }
  .ro-total { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 12px; } }

/* ── Login (standalone) ─────────────────────────────────────────────────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0;
  background: var(--bg-glow) fixed; }
.login-card { width: 360px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 30px; box-shadow: var(--shadow); }
.login-card .scan-form { background: none; border: none; padding: 0; box-shadow: none; margin-top: 18px; }
.brand-lg { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -.02em; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* 모바일 햄버거 토글 — 데스크톱에서는 숨김, ≤720px 미디어쿼리에서만 노출. */
.sidebar-toggle {
  display: none;
  width: 34px; height: 34px; margin-right: 8px;
  align-items: center; justify-content: center; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font: inherit;
  color: var(--text-dim); font-size: 16px; line-height: 1;
}
/* 데스크톱 기본: backdrop은 항상 숨김(모바일 미디어쿼리에서만 .open 시 노출) */
.sidebar-backdrop { display: none; }
@media (max-width: 720px) {
  .sidebar-toggle { display: inline-flex; }
  /* 오프캔버스: 기본은 화면 밖으로 밀어두고, .open일 때만 슬라이드-인. */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: none; }
  /* 사이드바 열림 시 배경 클릭/탭으로 닫기용 반투명 backdrop. 데스크톱에서는 아래 기본 규칙(display:none)이 유지됨. */
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 45;
    background: rgba(0, 0, 0, .5);
  }
  .sidebar-backdrop.open { display: block; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .domain-grid { grid-template-columns: 1fr; }
  .viz-row { grid-template-columns: 1fr; }
  /* 상단바 — 고정 60px 한 줄에 모드 전환기(버튼 3개)와 '처음이신가요?' 가 더해지며
     전화 폭에서 넘쳤다(넘치면 모든 지면이 가로로 스크롤된다). 높이를 내용에 맡기고
     줄바꿈을 허용한다. 데스크톱은 위의 기본 규칙(60px 한 줄)이 그대로다. */
  .topbar { height: auto; flex: 0 0 auto; }
  .topbar-inner { flex-wrap: wrap; row-gap: 8px; padding: 8px clamp(14px, 4vw, 24px); }
  .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-user { flex-wrap: wrap; row-gap: 8px; }
  .topbar-user .act-as { max-width: 46vw; }
}
@media (max-width: 560px) {
  .user-chip { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 전환기(.mode-switcher) 의 전화 폭 규칙은 그 기본 규칙 **뒤**에 있다 — 아래쪽 참조.
     @media 는 특정도를 더하지 않으므로 여기에 두면 기본 규칙에 덮여 죽는다. */
}

/* KISA 중요도(상/중/하) 배지 — 인프라 점검항목 (도메인 표·모달·보고서 공통) */
.imp { font-weight: 700; padding: 1px 8px; border-radius: 5px; font-size: .78rem; white-space: nowrap; }
.imp-high { background: var(--imp-high-bg); color: var(--imp-high-fg); }
.imp-mid { background: var(--imp-mid-bg); color: var(--imp-mid-fg); }
.imp-low { background: var(--imp-low-bg); color: var(--imp-low-fg); }
.imp-none { color: var(--muted); }

/* 수동 검증(정탐/오탐/예외) 칩 + 모달 검증 영역 */
.vchip { font-weight: 700; padding: 1px 8px; border-radius: 5px; font-size: .76rem; white-space: nowrap; }
.v-unreviewed { background: #eef1f5; color: #666; }
.v-confirmed { background: #fde2e1; color: #b91c1c; }
.v-false_positive { background: #e2f5e9; color: #1f7a44; }
.v-exception { background: #fdf0d5; color: #854d0e; }
/* 교차검증 신뢰도(정밀도 렌즈) */
.conf { font-weight: 700; padding: 1px 7px; border-radius: 5px; font-size: .74rem; white-space: nowrap; }
.conf-confirmed { background: #e2f0fb; color: #1a5f9e; }
.conf-single { background: transparent; color: #999; font-weight: 500; }
.findings tr.vrow-false_positive td { opacity: .6; }
.findings tr.vrow-confirmed td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.fd-verify { margin: .4rem 0 .8rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.fd-verify-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; }
.fd-verify-form input[name="note"] { flex: 1; min-width: 160px; }

/* compliance 판정(양호/취약/해당없음/판단보류) — 수동/전파/AI 출처 뱃지 */
.fd-verdict { margin: .4rem 0 .8rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.fd-verdict-form { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; }
.fd-verdict-form input[name="reason"] { flex: 1; min-width: 160px; }
.badge.verdict-manual { background: rgba(1,183,223,.08); color: var(--accent); border: none; }
.badge.verdict-propagated { background: rgba(126,34,206,.08); color: #7e22ce; border: none; }
.badge.verdict-llm { background: rgba(13,107,100,.09); color: #0d6b64; border: none; }

/* 대시보드 심각도 막대바 (또렷·동적) */
.sev-bars { display: flex; flex-direction: column; gap: 8px; }
.sev-bars-title { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 2px; }
.sevbar-row { display: flex; align-items: center; gap: 10px; }
.sevbar-label { min-width: 74px; text-align: center; text-transform: capitalize; }
.sevbar-track { flex: 1; height: 16px; border-radius: 5px; background: var(--surface-3);
                border: 1px solid var(--line); overflow: hidden; }
.sevbar-fill { display: block; height: 100%; border-radius: 4px 0 0 4px;
               transition: width .4s ease; }
.sevbar-val { min-width: 34px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 소스코드 분석 방식 배지 (AI=strix / 일반=semgrep) */
/* 분석 방식 / 룰셋 배지는 테두리 없이 표시(요청). */
.badge.method-strix, .badge.method-semgrep, .badge.method-amass,
.badge.method-mobsf, .badge.method-infra_agent, .badge.ruleset { border: none; }
.badge.method-strix { background: rgba(29,78,216,.08); color: #1d4ed8; }
.badge.method-semgrep { background: rgba(13,107,100,.09); color: #0d6b64; }
.badge.method-amass { background: rgba(126,34,206,.08); color: #7e22ce; }
.badge.method-mobsf { background: rgba(154,52,18,.08); color: #9a3412; }
.badge.method-infra_agent { background: rgba(67,56,202,.08); color: #4338ca; }

/* 자산 위험 레벨 배지 */
.badge.risk-crit{background:#b91c1c;color:#fff}
.badge.risk-high{background:#b45309;color:#fff}
.badge.risk-med{background:#e3b341;color:#1a1a1a}
.badge.risk-low{background:#15803d;color:#fff}
.badge.risk-none{background:var(--risk-none-bg);color:var(--risk-none-fg)}

/* /cve 신규 취약점 페이지 — 보안공지 목록 */
.advisory-list { list-style: none; display: flex; flex-direction: column; gap: 8px;
                 padding: 0; margin: 0; }
.advisory-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.advisory-list li:last-child { border-bottom: none; }

/* ============================================================================
   재설계 추가 — 작업 중심 홈 · 고급 접기 네비 (2026-07-25)
   ========================================================================== */

/* 사이드바 '고급' 접기 그룹 */
.nav-collapse { margin-top: 4px; }
.nav-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 6px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; padding: 16px 12px 6px; user-select: none; }
.nav-collapse > summary::-webkit-details-marker { display: none; }
.nav-collapse > summary .caret { transition: transform .15s ease; font-size: 9px; }
.nav-collapse[open] > summary .caret { transform: rotate(90deg); }

/* 작업 중심 홈 — 히어로 + 점검 유형 카드 */
.home-hero { margin: 4px 0 8px; }
.home-hero h1 { font-size: 24px; }
.home-hero .lead { color: var(--text-dim); font-size: 14px; margin: 2px 0 0; }
/* 홈 채팅 — 자연어 한 줄로 점검 화면/답변을 찾아간다(여기서 실행되지는 않는다) */
.home-chat { display: flex; gap: 8px; margin: 16px 0 8px; align-items: stretch; }
/* 높이 135px = 기존 한 줄 입력(45px)의 3배. 여러 줄을 한눈에 보며 쓰기 위한 크기다. */
.home-chat #chat-input { flex: 1; min-height: 135px; resize: vertical; padding: 11px 14px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.5; }
.home-chat #chat-input:focus { outline: none; border-color: var(--accent); }
/* 첨부·전송은 입력창 아래쪽에 모아 붙인다 — 135px 통짜 버튼이 되면 시선이 그리로 쏠린다. */
.chat-send { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 6px; }
.home-chat .btn { border-radius: 16px; padding: 11px 22px; }
.chat-attach { cursor: pointer; justify-content: center; }
.chat-attach-name { font-size: 11.5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-suggest .chip { cursor: pointer; font-size: 12.5px; }
.chat-turn { margin: 12px 0; }
.chat-msg-user { display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--text-dim); margin-bottom: 6px; }
.chat-dismiss { order: 2; background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 13px; line-height: 1; padding: 2px 4px; opacity: 0; transition: opacity .12s; }
.chat-turn:hover .chat-dismiss, .chat-dismiss:focus { opacity: 1; }
.chat-dismiss:hover { color: var(--text); }
.chat-clear { color: var(--muted); }
.chat-msg-bot { padding: 14px 16px; font-size: 13.5px; }
.chat-msg-bot code { font-size: 12.5px; }
/* 확인 카드 — 사람이 대상·방식을 읽고 확인한 뒤에만 실행된다 */
.chat-plan { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.chat-plan-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; font-size: 13px; }
.chat-plan-row + .chat-plan-row { border-top: 1px solid var(--line); }
.chat-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.task-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .12s, border-color .12s, box-shadow .12s; }
a.task-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.task-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
  font-size: 22px; background: var(--accent-soft); }
.task-title { font-weight: 700; font-size: 15.5px; }
.task-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.task-go { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* 홈 하단 요약(최근 결과 + 위험 요약) */
.home-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.home-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm); }
.home-panel h2 { margin: 0 0 14px; font-size: 15px; }
.risk-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.risk-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.risk-name { flex: 1; font-size: 13.5px; color: var(--text-dim); }
.risk-count { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mini-stat { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 13.5px; color: var(--text-dim); }
.mini-stat b { font-size: 22px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .task-grid { grid-template-columns: 1fr; }
  .home-summary { grid-template-columns: 1fr; }
}

/* 자산 다중선택 툴바 + 체크박스 컬럼 */
.bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.bulk-count { font-size: 13px; color: var(--text-dim); }
.bulk-count b { color: var(--accent); font-variant-numeric: tabular-nums; }
.bulk-actions { display: inline-flex; align-items: center; gap: 8px; transition: opacity .12s; }
.bulk-actions[data-none="true"] { opacity: .45; }
.bulk-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.bulk-owner select { padding: 5px 9px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; }
.bulk-hint { font-size: 11.5px; margin-left: auto; }
.col-check { width: 38px; text-align: center; }
.col-check input { width: 15px; height: 15px; cursor: pointer; vertical-align: middle; }
.asset-name { font-weight: 550; }
.asset-id { font-size: 11px; margin-top: 1px; }
@media (max-width: 720px) { .bulk-hint { display: none; } }

/* 접이식 섹션 헤딩(예: 홈의 '최근 점검 결과') */
details.fold > summary { cursor: pointer; list-style: none; user-select: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { display: inline-block; }
details.fold > summary::before { content: "▸"; color: var(--muted); margin-right: 8px;
  display: inline-block; transition: transform .15s ease; }
details.fold[open] > summary::before { transform: rotate(90deg); }

/* ── 회사별 점검 (company-scan) ── */
.cs-head { margin: 4px 0 14px; }
.cs-steps { display: grid; gap: 14px; }
.cs-step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; }
.cs-step__no { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13.5px;
  border: 1px solid var(--line); }
.cs-step__body { min-width: 0; }
.cs-step__title { font-weight: 600; font-size: 15px; margin: 2px 0 1px; }
.cs-step__hint { color: var(--muted); font-size: 12.5px; margin: 0 0 12px; }

.cs-company { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cs-company select { min-width: 200px; }
.cs-company .muted { font-size: 12.5px; }

.fn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.fn-card { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s, transform .12s; }
.fn-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.fn-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.fn-card__top { display: flex; gap: 9px; align-items: center; }
.fn-card__top input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.fn-card__ico { font-size: 15px; }
.fn-card__label { font-weight: 600; font-size: 13.5px; }
.fn-card__opt { margin-top: 10px; }
.fn-card__opt select { width: 100%; }
.fn-card__optlabel { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.fn-card:not(:has(input:checked)) .fn-card__opt { display: none; }

.cs-assets { display: grid; gap: 4px; max-height: 13rem; overflow: auto; margin-top: 2px; padding: 2px; }
.cs-asset { display: flex; gap: 9px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.cs-asset:hover { background: var(--surface-2); }
.cs-asset input { accent-color: var(--accent); }

.cs-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; }
.tg-field { display: flex; flex-direction: column; gap: 5px; }
.tg-field__label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.tg-field textarea { resize: vertical; min-height: 46px; }
.cs-targets__empty { color: var(--muted); font-size: 12.5px; }

@media (max-width: 720px) { .fn-grid, .cs-targets { grid-template-columns: 1fr; } .cs-step { padding: 14px; } }

/* ── 자산 상세 (asset-detail) ── */
.ad-badges { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 12px 0 4px; }
.ad-card { margin-top: 14px; padding: 16px 20px; }
.ad-card > .section-head { margin-bottom: 12px; justify-content: flex-start; gap: 10px; align-items: baseline; }
.ad-card .section-head h2, .ad-card .section-head h3 { margin: 0; font-size: 15px; }
.ad-card .section-head .muted { font-weight: 400; font-size: 12.5px; }

/* 관리 카드: 라벨-값(+인라인 편집)을 행으로 */
.ad-fields { display: grid; gap: 14px; }
.ad-field { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
.ad-field > dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-top: 4px; }
.ad-field > dd { margin: 0; font-size: 13.5px; }
.ad-edit { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.ad-edit select, .ad-edit input[type=text] { padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--surface-2); color: var(--text); font-size: 12.5px; }
.ad-edit label { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .ad-field { grid-template-columns: 1fr; } }

/* 작업 버튼 줄 */
.ad-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 범용 데이터 테이블(인벤토리·CVE) */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }

/* 변경 이력 타임라인 */
.timeline { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 9px; }
.timeline li { position: relative; padding-left: 16px; font-size: 13px; color: var(--text-dim); }
.timeline li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 7px; height: 7px;
  border-radius: 999px; background: var(--accent); }

/* 자산 목록 위험도 요약 스트립 */
.risk-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 15px; margin: 14px 0 8px; }
.risk-summary .ink-strong { color: var(--text); margin-right: 2px; }

/* ── 인증 흐름 레일 (auth-flow SP4) ── */
.auth-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
.auth-rail { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 8px 0 18px; }
.auth-node { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; min-width: 132px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.auth-node__step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; vertical-align: middle; }
.auth-node__label { font-weight: 600; font-size: 13px; }
.auth-node__meta { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.auth-conn { display: flex; align-items: center; padding: 0 8px; color: var(--muted); font-size: 16px; }
@media (max-width: 640px) { .auth-rail { flex-direction: column; } .auth-conn { transform: rotate(90deg); padding: 4px 0; } }

/* ── 점검항목 관리 (/inspection-items) ──────────────────────────────────── */
.banner-ok { background: rgba(21,128,61,.09); border: 1px solid rgba(21,128,61,.38); color: var(--banner-ok-fg); }

.ii-lead { color: var(--text-dim); font-size: 13.5px; max-width: 80ch; line-height: 1.6; margin: 2px 0 4px; }
.ii-lead b { color: var(--text); font-weight: 650; }

/* 적용 대상(고객사) 스코프 바 */
.ii-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; box-shadow: var(--shadow-sm); margin: 14px 0 20px; }
.ii-scope__form { display: flex; align-items: center; gap: 10px; }
.ii-scope__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); }
.ii-scope select { padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; min-width: 200px; }
.ii-scope select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.ii-scope__hint { color: var(--muted); font-size: 12px; margin: 0; flex: 1 1 240px; }

/* 도메인 카드 스택 */
.ii-cards { display: flex; flex-direction: column; gap: 18px; }
.ii-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden; }
.ii-card__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.ii-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; font-size: 20px;
  border-radius: 11px; background: var(--accent-soft); }
.ii-card__head h2 { font-size: 16px; margin: 0; letter-spacing: -.01em; }
.ii-card__active { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.ii-card__active b { color: var(--accent); font-weight: 700; }
.ii-card__note { margin: 6px 0 0; font-size: 11.5px; color: var(--text-dim);
  background: var(--accent-soft); border-radius: 6px; padding: 3px 9px; display: inline-block; }

/* 기준 스위처(세그먼트) */
.ii-picker { padding: 16px 20px 18px; }
.ii-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.ii-seg__item { position: relative; flex: 1 1 0; min-width: 150px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); transition: border-color .12s, background .12s; }
.ii-seg__item:hover { border-color: var(--accent); }
.ii-seg__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ii-seg__name { font-weight: 650; font-size: 13.5px; }
.ii-seg__count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim);
  background: var(--surface-3); border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.ii-seg__count.is-empty { color: var(--muted); background: transparent; border: 1px dashed var(--line); }
.ii-seg__count.is-method { color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; }
.ii-seg__item.is-active { border-color: var(--accent); background: var(--accent-soft); }
.ii-seg__item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ii-seg__item:has(input:checked) .ii-seg__count { color: var(--accent); }
.ii-seg__item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 열람 패널(기준별 항목표) — :has 전환 + 폴백 */
.ii-panels { margin-top: 14px; }
.ii-panel { display: none; }
.ii-panel.is-active { display: block; }
.ii-picker:has(input:checked) .ii-panel.is-active { display: none; }
.ii-picker:has(input[value="kisa"]:checked) .ii-panel[data-std="kisa"],
.ii-picker:has(input[value="jutong"]:checked) .ii-panel[data-std="jutong"],
.ii-picker:has(input[value="geumchwi"]:checked) .ii-panel[data-std="geumchwi"],
.ii-picker:has(input[value="mois"]:checked) .ii-panel[data-std="mois"],
.ii-picker:has(input[value="ai"]:checked) .ii-panel[data-std="ai"],
.ii-picker:has(input[value="caldera"]:checked) .ii-panel[data-std="caldera"] { display: block; }

.ii-panel__src { font-size: 11.5px; color: var(--muted); margin: 0 0 8px; }
.ii-scroll { max-height: 440px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table.ii-items { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.ii-items th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 9px 14px;
  color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-2); border-bottom: 1px solid var(--line); }
table.ii-items td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.ii-items tbody tr:last-child td { border-bottom: none; }
table.ii-items tbody tr:hover td { background: var(--surface-2); }
.ii-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  font-weight: 600; color: var(--accent); white-space: nowrap; }
.ii-cat { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.ii-title { color: var(--text); }
.ii-col-code { width: 78px; } .ii-col-imp { width: 66px; text-align: center; }
td.ii-col-imp { text-align: center; }
.ii-sev { font-weight: 700; min-width: 26px; justify-content: center; }
.ii-status { display: inline-block; font-size: 11px; color: var(--muted); white-space: nowrap; }

.ii-empty { text-align: center; padding: 34px 20px; color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.ii-empty b { display: block; color: var(--text-dim); font-size: 13.5px; margin-bottom: 4px; }
.ii-empty span { font-size: 12.5px; }

.ii-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ii-hint { color: var(--muted); font-size: 12px; }

@media (max-width: 560px) { .ii-seg__item { flex-basis: 100%; } }

/* ── 서버/인프라 점검(파싱) 업로드 (infra-import) ───────────────────────── */
.ii-head { margin: 4px 0 16px; }
.ii-head h1 { margin-bottom: 6px; }
/* 파일 선택 — 브라우저 기본 위젯은 카드 안에서 이질적이라 최소한만 앱 톤에 맞춘다. */
.ii-file { display: block; width: 100%; max-width: 560px; padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-dim); font: inherit; font-size: 13px;
  cursor: pointer; transition: border-color .12s, background .12s; }
.ii-file:hover { border-color: var(--accent); background: var(--accent-soft); }
.ii-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ii-file::file-selector-button { margin-right: 12px; padding: 7px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--text); cursor: pointer; }
/* 프로파일 카드의 부제 — 원시 키(linux-deb)만으로는 무엇을 고르는지 알 수 없다. */
.fn-card__desc { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.fn-card__desc code { font-size: 11px; color: var(--text-dim); background: var(--code-bg);
  padding: 1px 5px; border-radius: 5px; }
/* 3단계 '회사 연결' — 셀렉트가 .filters/.scan-form 어느 셀렉터에도 걸리지 않아
   카드 안에 브라우저 기본 위젯 그대로 떠 있었다(1·2단계의 카드 언어와 어긋남).
   폼 컨트롤 톤을 앱 기본값과 맞추고, '미지정' 의 결과를 같은 카드 안에서 읽게 한다. */
.ii-co { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.ii-co__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ii-co__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); }
/* select 와 날짜 입력칸을 같이 — 둘 다 .filters/.scan-form 셀렉터 밖이라 브라우저
   기본 위젯(border: inset)이 그대로 나온다. 단계 카드 안에서 같은 톤이어야 한다. */
.ii-co select, .ii-co input[type="datetime-local"], .ii-co input[type="text"] {
  min-width: 268px; max-width: 100%; padding: 9px 12px; font: inherit; font-weight: 400;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); cursor: pointer; }
.ii-co select:hover, .ii-co input:hover { border-color: var(--accent); }
.ii-co select:focus-visible, .ii-co input:focus-visible {
  outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.ii-co__meta { font-size: 12px; color: var(--text-dim); line-height: 1.5; padding-bottom: 2px; }
.ii-co__metahint { color: var(--muted); font-size: 11.5px; }
.ii-co__note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 76ch;
  padding-left: 11px; border-left: 2px solid var(--line); }
.ii-co__note b { color: var(--text-dim); font-weight: 650; }
/* 결과 머리의 회사 칩 — 폼 값이 아니라 라우트가 확정한 소속을 보여준다. */
.ii-co__chip { font-size: 12px; color: var(--text-dim); white-space: nowrap;
  padding: 4px 11px; border-radius: 999px; background: var(--accent-soft);
  border: 1px solid var(--line); }
.ii-co__chip b { color: var(--accent); font-weight: 700; }
.ii-co__chip.is-none { background: transparent; border-style: dashed; color: var(--muted); }
@media (max-width: 560px) { .ii-co select { min-width: 0; width: 100%; } .ii-co__field { width: 100%; } }
.ii-submit { margin: 2px 0 8px; }
.ii-plabel { color: var(--text-dim); font-size: 12.5px; font-weight: 600; }
.ii-reason { color: var(--text-dim); }

/* ── 서버/인프라 점검(고급) (caldera-infra) ─────────────────────────────── */
/* 두 경로(에이전트리스·에이전트)는 순서가 아니라 택일이므로 나란히 놓는다.
   설치가 필요 없는 쪽이 먼저다 — 더 쉬운 방법을 아래 접힌 패널에 숨기지 않는다. */
.ci-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.ci-path { padding: 18px 20px; display: flex; flex-direction: column; gap: 2px; }
.ci-path__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ci-path__ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--line); font-size: 18px; flex: none; }
.ci-path__title { font-weight: 650; font-size: 15px; }
.ci-path__hint { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.ci-path__head .badge { margin-left: auto; flex: none; }
.ci-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
  align-items: end; }
.ci-form .btn { justify-self: start; }
.ci-actions { margin-top: 12px; }
.ci-path .empty { padding: 28px 0; }
/* 설치 명령 — 실행할 명령 원문이므로 내용은 손대지 않고 담는 그릇만 정리한다. */
.ci-deploy { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.ci-deploy > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-dim); }
.ci-deploy > summary:hover { color: var(--accent); }
.ci-cmd { margin-top: 10px; }
.ci-cmd__head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); }
.ci-cmd__head .btn { margin-left: auto; }
.ci-cmd textarea { width: 100%; resize: vertical; padding: 9px 11px; font-size: 12px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--code-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); }
@media (max-width: 720px) { .ci-paths { grid-template-columns: 1fr; } }

/* ── 피싱훈련 (phishing) ─────────────────────────────────────────────────────
   회사별 점검(.cs-step)과 같은 '번호 붙은 단계' 언어를 재사용하고, 수집 방식만
   선택형 카드(.ph-mode)로 따로 둔다 — 두 방식의 차이가 결과를 좌우하는데
   평범한 라디오 두 줄로는 그 차이가 전혀 보이지 않았다. */
.ph-head { margin: 4px 0 14px; }
.ph-steps { max-width: 760px; }
.ph-steps .ph-target { width: 100%; max-width: 340px; }

.ph-modes { display: grid; gap: 10px; }
.ph-mode {
  display: block; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ph-mode:hover { border-color: var(--accent); }
.ph-mode:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ph-mode__top { display: flex; gap: 9px; align-items: center; }
.ph-mode__top input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.ph-mode__ico { font-size: 15px; }
.ph-mode__label { font-weight: 600; font-size: 13.5px; }
.ph-mode__tag { margin-left: auto; color: var(--accent); border-color: var(--accent); background: transparent; }
.ph-mode__desc { display: block; margin: 7px 0 0 25px; color: var(--text-dim); font-size: 12.5px; font-weight: 400; }
/* 보조 소스는 그 방식을 실제로 고른 뒤에만 의미가 있다 — 선택 전에는 접어 둔다. */
.ph-mode__opts { display: none; margin: 11px 0 2px 25px; }
.ph-mode:has(input:checked) .ph-mode__opts { display: block; }
.ph-mode__optlabel { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.ph-opt { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 12.5px; font-weight: 400; color: var(--text); }
.ph-opt input { accent-color: var(--accent); }
.ph-opt input:disabled + * { opacity: .5; }

/* 목록의 건수 열 — 0은 조용히, 발견이 있으면 눈에 띄게. */
.ph-num { font-variant-numeric: tabular-nums; color: var(--muted); }
.ph-num--hit { color: var(--text); font-weight: 650; }

.ph-detail__head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; }
.ph-detail__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 7px; font-size: 12.5px; }
.ph-detail__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ph-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 14px; }
@media (max-width: 720px) {
  .ph-kpis { grid-template-columns: 1fr; }
  .ph-mode__desc, .ph-mode__opts { margin-left: 0; }
}

/* 상단바 작업 고객사 전환(공급사 계정) — 고객사 시점일 때 강조 */
.act-as { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-dim); font: inherit; font-size: 12.5px; max-width: 200px; }
.act-as.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }


/* ── ASM 현황 대시보드(/domains/asm) ──────────────────────────────────────── */
.asm-dash { margin: 10px 0 18px; }
.asm-kpis { margin-bottom: 12px; }
.asm-dash-card { padding: 14px 16px 6px; }
.asm-dash-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.asm-dash-head h3 { margin: 0; font-size: 14px; font-weight: 650; }
.asm-dash-head .muted { font-size: 12px; }
.domain-detail table.asm-table { table-layout: auto; }
.asm-table th, .asm-table td { white-space: nowrap; }
.asm-table th.num, .asm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.asm-table td.dom b { display: block; font-size: 13.5px; }
.asm-table .sub { display: block; font-size: 11px; margin-top: 2px; }
.asm-table td.num .big { font-size: 16px; font-weight: 700; }
.asm-table td.spark { color: var(--accent); }
.asm-table td.spark svg { display: block; }
.asm-table td.delta .d-new { color: var(--accent); font-weight: 700; margin-right: 8px; font-variant-numeric: tabular-nums; }
.asm-table td.delta .d-gone { color: var(--muted); font-variant-numeric: tabular-nums; }
.asm-table td.last a { font-weight: 600; }
.asm-table td.act { text-align: right; }
.asm-table .badge.ioc { background: #7b2fbf; color: #fff; border-color: transparent; }
.asm-table tr.att-ioc td:first-child { box-shadow: inset 3px 0 0 var(--critical); }
.asm-table tr.att-mail td:first-child { box-shadow: inset 3px 0 0 var(--medium); }
.asm-table tr.att-new td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 900px) {
  .asm-kpis { grid-template-columns: repeat(2, 1fr); }
  .asm-table td.spark .sub { display: none; }
}


/* ── 홈 운영 현황(KPI·위험 요약·신규 취약점·최근 점검·도메인·공지) ─────────────── */
.home-ops { margin-top: 26px; }
.home-kpis { margin-bottom: 14px; }
.home-two { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; font-size: 15px; }
.card-head .muted { font-size: 12px; }
.risk-card, .newvuln-card, .adv-card { padding: 18px 20px; box-shadow: var(--shadow-sm); }
.sev-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-3); margin: 12px 0 14px; }
.sev-bar span { display: block; height: 100%; min-width: 2px; }
.sev-bar .sev-empty { width: 100%; background: var(--surface-3); }
.risk-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 18px; }
.risk-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); padding: 4px 0; }
.risk-item b { margin-left: auto; font-size: 17px; font-weight: 750; color: var(--text); font-variant-numeric: tabular-nums; }
.newvuln-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.newvuln-card .kpi-num { font-size: 34px; }
.card-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; }
/* ── 침투테스트(모의해킹) 화면 ─────────────────────────────────────────────
   위험 우선 히어로 + 보고서화된 서사. 색은 기존 심각도 토큰을 정보 색으로 쓴다
   (위험이 이 화면의 주제). bold 는 종합 위험도 한 곳에만 쓴다. */
.pentest-hero {
  position: relative; margin: 0 0 18px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(1,183,223,.08), transparent 55%),
    var(--surface);
  overflow: hidden;
}
/* 종합 위험도 톤 — 좌측 라인으로만 신호(밝은 표면 위, 과하지 않게) */
.pentest-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--info);
}
.pentest-hero.tone-critical::before { background: var(--critical); }
.pentest-hero.tone-high::before     { background: var(--high); }
.pentest-hero.tone-medium::before   { background: var(--medium); }
.pentest-hero.tone-low::before      { background: var(--low); }
.pentest-hero.tone-none::before     { background: var(--line); }

.pentest-hero .ph-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pentest-hero .ph-kind { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent-2); }
.pentest-hero h1 { margin: 0; font-size: 26px; line-height: 1.1; color: var(--text); }
.pentest-hero .ph-target {
  margin: 8px 0 0; font-size: 13px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; word-break: break-all; max-width: 54ch;
}
/* 유일한 bold 요소: 종합 위험도 */
.pentest-hero .ph-verdict { text-align: right; min-width: 150px; }
.pentest-hero .ph-verdict-label { display: block; font-size: 11px; color: var(--text-dim); letter-spacing: .04em; }
.pentest-hero .ph-verdict-value { display: block; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.pentest-hero.tone-critical .ph-verdict-value { color: var(--critical); }
.pentest-hero.tone-high     .ph-verdict-value { color: var(--high); }
.pentest-hero.tone-medium   .ph-verdict-value { color: var(--medium); }
.pentest-hero.tone-low      .ph-verdict-value { color: var(--low); }
.pentest-hero.tone-none     .ph-verdict-value { color: var(--text); font-size: 22px; font-weight: 700; }
.pentest-hero .ph-total { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); }

.pentest-hero .ph-dist { margin: 18px 0 2px; }
.pentest-hero .ph-dist .sev-bar { margin: 0; }
.pentest-hero .ph-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; }
.pentest-hero .ph-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.pentest-hero .ph-leg b { color: var(--text); font-variant-numeric: tabular-nums; }
.pentest-hero .ph-leg i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

.pentest-hero .ph-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pentest-hero .ph-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pentest-hero .ph-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.pentest-hero .ph-facts > div { display: flex; flex-direction: column; }
.pentest-hero .ph-facts dt { font-size: 10.5px; color: var(--text-dim); letter-spacing: .03em; }
.pentest-hero .ph-facts dd { margin: 1px 0 0; font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }

/* 침투테스트 보고서(서사) — 리딩 컬럼으로 보고서처럼 읽히게.
   .card 는 패딩이 없어(.ad-card 만 보유) 내용이 가장자리에 붙는다 — 카드 패딩을
   주고, 요청대로 좌측을 한 칸 이상(기본 22px + 약 1 gap) 더 들여 보고서 본문을
   안쪽으로 당긴다. */
.pentest-narrative { margin-top: 16px; padding: 18px 22px 20px 42px; }
.pentest-narrative > h2 { margin: 0 0 4px; }
.pentest-narrative .narrative-body { max-width: 74ch; font-size: 14px; line-height: 1.68; color: var(--text-dim); }
.pentest-narrative .narrative-body > :first-child { margin-top: 0; }
/* 섹션 머리말(요약·방법론·권고…) — 좌측 액센트 룰로 구획 */
.pentest-narrative .narrative-body h3 {
  font-size: 16.5px; font-weight: 700; color: var(--text); margin: 26px 0 10px;
  padding-left: 11px; border-left: 3px solid var(--accent); line-height: 1.3;
}
.pentest-narrative .narrative-body h4 { font-size: 14px; font-weight: 700; color: var(--text); margin: 18px 0 6px; }
.pentest-narrative .narrative-body h5 { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 4px; }
.pentest-narrative .narrative-body p { margin: 0 0 11px; }
/* 요약 첫 문단을 리드 콜아웃으로 — 보고서의 Executive Summary 느낌 */
.pentest-narrative .narrative-body h3:first-of-type + p {
  font-size: 15px; color: var(--text); line-height: 1.6;
  padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid rgba(1,183,223,.22);
}
.pentest-narrative .narrative-body ul, .pentest-narrative .narrative-body ol { margin: 6px 0 14px; padding-left: 1.4rem; }
.pentest-narrative .narrative-body li { margin: 4px 0; }
.pentest-narrative .narrative-body li::marker { color: var(--accent); }
.pentest-narrative .narrative-body strong { color: var(--text); font-weight: 700; }
.pentest-narrative .narrative-body code {
  background: var(--code-bg); border: 1px solid var(--line-soft); color: var(--accent-2);
  padding: 1px 6px; border-radius: 5px; font-size: 12.5px; word-break: break-all;
}
@media (max-width: 640px) {
  .pentest-hero { padding: 18px 16px; }
  .pentest-hero h1 { font-size: 22px; }
  .pentest-hero .ph-verdict { text-align: left; }
  .pentest-hero .ph-verdict-value { font-size: 28px; }
}
.table-card { padding: 0; overflow: hidden; margin-top: 16px; box-shadow: var(--shadow-sm); }
.table-card .card-head { padding: 16px 20px 8px; margin-bottom: 0; }
.table-card table.scan-list { margin: 0; border: none; border-radius: 0; }
.table-card .pager { padding: 0 16px 14px; margin: 8px 0 0; }
.table-card .empty { padding: 32px 0; }
.home-domains { margin-top: 24px; }
.home-domains .section-head { margin-bottom: 12px; }
.home-domains .section-head h2 { margin: 0; }
.adv-card { margin-top: 16px; }
.adv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 12.5px; }
.adv-list a { color: var(--text); }
.adv-list a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 900px) {
  .home-two { grid-template-columns: 1fr; }
  .home-kpis { grid-template-columns: repeat(2, 1fr); }
  .risk-legend { grid-template-columns: repeat(2, 1fr); }
  .adv-list { grid-template-columns: 1fr; }
}


/* ── 신규취약점 영향 자산(/cve) ─────────────────────────────────────────────── */
.cve-page .detail-head { align-items: flex-start; margin-bottom: 14px; }
.cve-page .detail-head h1 { margin: 0 0 4px; }
.cve-page .lead { font-size: 13px; margin: 0; max-width: 820px; }
.cve-page .card.cve-verify { padding: 14px 18px; margin-bottom: 14px; }
.cve-page .verdict-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cve-page .verdict-chips .chip b { font-size: 13px; }
.cve-page .table-card { margin-top: 0; margin-bottom: 14px; }
.cve-page table.findings { table-layout: fixed; width: 100%; }
.cve-page .cve-assets .c-asset { width: 30%; } .cve-page .cve-assets .c-sev { width: 17%; }
.cve-page .cve-assets .c-risk { width: 9%; } .cve-page .cve-assets .c-latest { width: 30%; } .cve-page .cve-assets .c-when { width: 14%; }
.cve-page .cve-recent .c-cve { width: 16%; } .cve-page .cve-recent .c-sev { width: 9%; }
.cve-page .cve-recent .c-asset { width: 27%; } .cve-page .cve-recent .c-comp { width: 32%; } .cve-page .cve-recent .c-when { width: 16%; }
.cve-page .asset-cell .asset-label { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cve-page .asset-cell .asset-meta { display: block; font-size: 11px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cve-page .sev-cell { white-space: normal; }
.cve-page .sev-cell .badge { margin: 0 3px 3px 0; }
.cve-page .risk-cell .badge { white-space: nowrap; }
.cve-page .latest-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cve-page .when-cell { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cve-page .cve-id a { font-weight: 600; white-space: nowrap; }
.cve-page .comp-cell .comp { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.cve-page .comp-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cve-page .adv-card { margin-top: 0; }
@media (max-width: 900px) {
  .cve-page table.findings { table-layout: auto; }
  .cve-page .cve-assets .c-latest, .cve-page .cve-recent .c-comp { width: auto; }
}

/* 메뉴 표시 프로필 토글 — 사이드바 맨 아래. 접근 통제가 아니라 표시 전환이다. */
.menu-profile { margin: 14px 10px 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.menu-profile__btn { width: 100%; padding: 7px 10px; cursor: pointer; font: inherit; font-size: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim); }
.menu-profile__btn:hover { border-color: var(--accent); color: var(--accent); }

/* 사용 방식 전환기(상단바) — 새 색을 만들지 않고 기존 토큰만 쓴다. 현재 항목은 aria-current 로 표시. */
.mode-switcher { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.mode-switcher form { margin: 0; }
.mode-switcher button { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.mode-switcher button:hover { background: var(--surface-3); color: var(--text); }
.mode-switcher button[aria-current="page"] { background: var(--surface); color: var(--accent); font-weight: 700; box-shadow: 0 0 0 1px var(--accent); }
.mode-switcher button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 전화 폭: 버튼 3개 + 안내 링크가 한 줄에 안 들어간다 — 줄바꿈과 축소를 허용한다.
   @media 는 특정도를 더하지 않으므로 이 블록은 위 기본 규칙들보다 **뒤**에 있어야 한다.
   (앞에 두었다가 font-size·padding 이 영원히 덮여 죽은 CSS 가 된 적이 있다.
   가드: test_no_media_declaration_is_overridden_by_a_later_base_rule) */
@media (max-width: 560px) {
  .mode-switcher { flex-wrap: wrap; }
  .mode-switcher button { padding: 4px 8px; font-size: 12px; }
}

/* 첫 방문 모드 선택 — 카드 하나가 폼 하나, 카드 전체가 하나의 제출 버튼 */
.start-mode { max-width: 920px; margin: 32px auto; }
.start-mode h1 { margin: 0 0 6px; font-size: 22px; }
.start-mode-sub { margin: 0 0 22px; color: var(--text-dim); }
.start-mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.start-mode-card { margin: 0; }
.start-mode-card button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: 100%; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; cursor: pointer; }
.start-mode-card button:hover { border-color: var(--accent); background: var(--surface-2); }
.start-mode-card button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.start-mode-card.recommended button { border-color: var(--accent); }
.start-mode-name { font-size: 18px; font-weight: 700; }
.start-mode-desc { color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.start-mode-badge { font-size: 12px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; }
.mode-switcher-first { align-self: center; padding: 0 8px; font-size: 12.5px; color: var(--accent); text-decoration: underline; }

/* ── 워크플로 화면(/flow) ── */
.flow { max-width: 880px; margin: 0 auto; }
.flow-head h1 { margin: 0 0 4px; }
.flow-steps { list-style: none; margin: 16px 0; padding: 0; }
.flow-step details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.flow-step + .flow-step { margin-top: 8px; }
.flow-step summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; }
.flow-step summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flow-no { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-navy); color: #fff; font-size: 13px; }
.flow-items { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.flow-items a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--accent); text-decoration: none; }
.flow-items a:hover, .flow-items a:focus-visible { border-color: var(--accent); }
/* 보기 전용(열려서 읽히지만 시작은 못 하는 항목) — 글자 + 테두리·배경으로 구별한다(색만 아님). */
.flow-viewonly { margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-3); color: var(--text-dim); font-size: 12px; font-weight: 600; white-space: nowrap; }
.flow-handoff-row { list-style: none; margin: 14px 0; }
.flow-handoff { background: var(--surface-3); border: 2px solid var(--brand-navy); border-left-width: 8px; border-radius: var(--radius); padding: 14px 18px; color: var(--text); }
.flow-handoff__title { font-size: 17px; font-weight: 800; color: var(--brand-navy); margin-bottom: 8px; }
.flow-handoff__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; color: var(--text); }
@media (max-width: 640px) { .flow-handoff__sides { grid-template-columns: 1fr; } }
.flow-outside { margin-top: 24px; }
/* 다른 방식(챗)에서 시작한 점검을 이름 붙여 보여주는 띠 — 출처를 숨기지 않는다. */
.flow-from { margin: 0 0 8px; padding: 10px 14px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.flow-from p { margin: 0 0 4px; }
.flow-from ul { margin: 0; padding-left: 18px; }
.flow-from a { color: var(--accent); }
.flow-state { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.flow-state__open { display: none; }
.flow-step details[open] .flow-state__open { display: inline; }
.flow-step details[open] .flow-state__closed { display: none; }
.flow-step summary::-webkit-details-marker { display: none; }
.flow-handoff__title { margin-top: 0; }

/* 단계 상태 배지 + 판단 출처 배지.
   상태는 **글자**가 단일 출처다(색만으로 말하지 않는다). 출처는 글자에 더해 테두리 모양으로도
   갈린다(실선=사람 표시, 점선=자동 판단) — 배지 무리 속에서 한눈에 구별돼야 한다. */
.flow-step summary { flex-wrap: wrap; }
.flow-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); }
.flow-badge--done { background: var(--surface-2); color: var(--ok); }
.flow-badge--active { background: var(--surface-2); color: var(--accent); }
.flow-badge--waiting { background: var(--surface-2); color: var(--text-dim); }
.flow-badge--out { background: var(--surface-2); color: var(--muted); }
.flow-badge--unknown { background: var(--surface-2); color: var(--text-dim); }
.flow-judge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; background: var(--surface); color: var(--text-dim); }
.flow-judge--person { border: 1px solid var(--line); }
.flow-judge--system { border: 1px dashed var(--muted); }
.flow-why { margin: 0 0 2px; color: var(--text); font-weight: 600; }
.flow-judge-detail { margin: 0 0 10px; font-size: 13px; }
.flow-mark { margin: 0 0 14px; padding: 12px 14px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); }
.flow-mark p { margin: 0 0 6px; }
.flow-mark label { display: block; margin-bottom: 4px; color: var(--text-dim); font-size: 13px; }
.flow-mark textarea { width: 100%; max-width: 520px; margin-bottom: 8px; }
.flow-mark-locked { margin: 0 0 14px; }
.flow-note { white-space: pre-wrap; }
.flow-handoff__facts { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--brand-navy); color: var(--text); }
.flow-handoff__facts p { margin: 0 0 4px; }

/* ── 대화 화면(/conversations): 내비(사이드바) · 목록 · 대화 ── */
.conv { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.conv-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.conv-new { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.conv-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-items li a { display: block; padding: 8px 10px; border-radius: var(--radius); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.conv-items li a:hover { background: var(--surface-2); }
.conv-items li.is-active a { background: var(--surface-3); color: var(--text); font-weight: 600; border-left: 3px solid var(--accent); }
.conv-main { min-width: 0; }
.conv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.conv-head h1 { margin: 0; overflow-wrap: anywhere; }
.conv-delete summary { cursor: pointer; }
.conv-delete[open] { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.conv-replies { margin: 12px 0; min-height: 120px; }
.conv-composer { display: flex; flex-direction: column; gap: 6px; }
.conv-composer textarea { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
.conv-composer textarea:focus { outline: none; border-color: var(--accent); }
.conv-hint { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-left: 6px; }
@media (max-width: 800px) { .conv { grid-template-columns: minmax(0, 1fr); } }