/* GSECURITY 전용 — 공용 디자인(style.css) 위에 이 화면에 필요한 것만 얹는다.
   다른 사내앱과 같은 자리에 같은 것이 있어야 하므로, 새 모양은 최소로 만든다. */

/* ---- 타일 (한눈에) ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 16px;
  border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-color); }
.tile i { width: 26px; height: 26px; flex: 0 0 auto; }
.tile-value { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.tile-label { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 2px; }
.tile.red i { color: var(--color-danger); }     .tile.amber i { color: var(--color-warning); }
.tile.green i { color: var(--color-success); }  .tile.blue i { color: var(--color-primary); }
.tile.purple i { color: var(--color-purple); }  .tile.gray i { color: var(--text-muted); }
/* 취약이 하나라도 있으면 타일 자체가 눈에 띄어야 한다 — 숫자만 빨간 것으로는 부족했다 */
.tile.alarm { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .08); }

.card { padding: 18px; border-radius: 16px; margin-bottom: 18px; }
.card h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 0 0 12px; }
.card h3 i { width: 18px; height: 18px; color: var(--color-primary); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.card-head h3 { margin: 0; }
.muted { color: var(--text-muted); }
.small { font-size: 0.8rem; }
.mono { font-family: ui-monospace, Consolas, 'D2Coding', monospace; font-size: 0.82rem; }
.bad { color: var(--color-danger); font-weight: 700; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 4px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- 표 ---- */
.table-wrap { width: 100%; overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
table.grid th, table.grid td { padding: 9px 10px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; }
table.grid th { color: var(--text-muted); font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover td { background: rgba(59, 130, 246, .08); }
table.grid tr.off { opacity: .5; }

/* ---- 판정 뱃지 ----
   여섯 가지 상태를 색으로 구분한다. 색만으로 구분하지 않도록 글자를 반드시 함께 둔다
   (색각 이상인 사람에게 '빨간 줄' 은 아무 정보가 아니다). */
.st { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.st-vuln    { background: rgba(239, 68, 68, .18);  color: #f87171; }
.st-warn    { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.st-unknown { background: rgba(99, 102, 241, .18); color: #818cf8; }
.st-error   { background: rgba(168, 85, 247, .18); color: #c084fc; }
.st-safe    { background: rgba(16, 185, 129, .18); color: #34d399; }
.st-none    { background: rgba(148, 163, 184, .16); color: var(--text-muted); }
.st-run     { background: rgba(59, 130, 246, .18); color: #60a5fa; }

.sev { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: .04em; }
.sev-critical { background: rgba(239, 68, 68, .2); color: #f87171; }
.sev-high { background: rgba(249, 115, 22, .2); color: #fb923c; }
.sev-medium { background: rgba(245, 158, 11, .2); color: #fbbf24; }
.sev-low { background: rgba(59, 130, 246, .2); color: #60a5fa; }

/* ---- 취약점 머리글 ---- */
.cve-hero { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cve-hero .cve-id { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.cve-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.cve-meta b { color: var(--text-main); font-weight: 700; }
.ver-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ver-chip { padding: 3px 10px; border-radius: 8px; font-family: ui-monospace, Consolas, monospace;
  font-size: 0.78rem; font-weight: 700; border: 1px solid var(--border-color); }
.ver-chip.bad { background: rgba(239, 68, 68, .14); color: #f87171; border-color: rgba(239, 68, 68, .35); }
.ver-chip.good { background: rgba(16, 185, 129, .14); color: #34d399; border-color: rgba(16, 185, 129, .35); }
.cve-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); }
.cve-block h4 { font-size: 0.86rem; margin: 0 0 6px; color: var(--text-main); }
.cve-block p { margin: 0; font-size: 0.84rem; line-height: 1.75; color: var(--text-muted); }
.cve-refs { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 0.8rem; }
.cve-refs a { color: var(--color-primary); text-decoration: none; }
.cve-refs a:hover { text-decoration: underline; }

/* ---- 서버 카드 목록 ---- */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.server-card { padding: 14px 16px; border-radius: 14px; background: var(--bg-card);
  border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; }
.server-card.vuln { border-color: rgba(239, 68, 68, .45); }
.server-card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.server-card .nm { font-weight: 700; font-size: 0.92rem; }
.server-card .hostline { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; color: var(--text-muted); }
.server-card .sum { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; min-height: 2.4em; }
.server-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid var(--border-color); padding-top: 8px; }
.tag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 0.7rem;
  background: rgba(148, 163, 184, .16); color: var(--text-muted); margin-right: 4px; }

/* ---- 점검 진행 ---- */
.scan-progress { height: 8px; border-radius: 999px; background: rgba(148, 163, 184, .18); overflow: hidden; margin: 10px 0; }
.scan-progress > div { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width .3s ease; }
.scan-now { font-size: 0.82rem; color: var(--text-muted); line-height: 1.7; }
.scan-live { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; max-height: 180px; overflow-y: auto; }
.scan-live .st { font-size: 0.7rem; }

/* ---- 점검 상세 (모달) ---- */
.detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kv { display: grid; grid-template-columns: 116px 1fr; gap: 6px 12px; font-size: 0.82rem; margin-bottom: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; word-break: break-all; }
.reason { padding: 10px 12px; border-radius: 9px; font-size: 0.83rem; line-height: 1.7;
  background: rgba(59, 130, 246, .1); margin-bottom: 12px; }
.reason.vuln { background: rgba(239, 68, 68, .12); }
.reason.warn { background: rgba(245, 158, 11, .12); }
.raw { max-height: 240px; overflow: auto; padding: 10px 12px; border-radius: 9px;
  background: rgba(0, 0, 0, .28); font-family: ui-monospace, Consolas, monospace;
  font-size: 0.74rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }

/* ---- 메일 미리보기 ---- */
iframe.mail-preview { width: 100%; height: 62vh; border: 0; background: #eef2f7; display: block; }

/* ---- 설정 화면 ---- */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.check-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.82rem; }
.check-chip.on { border-color: var(--color-primary); background: rgba(59, 130, 246, .12); }
.check-chip input { accent-color: var(--color-primary); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.hint { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; margin-top: 6px; }
.guard-now { padding: 10px 14px; border-radius: 9px; background: rgba(59, 130, 246, .1); font-size: 0.88rem; }
.guard-now b { font-family: ui-monospace, Menlo, monospace; }
#guard-ips, #mail-to, #mail-cc { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; line-height: 1.7; }

/* ---- 눈에 띄는 것 (한눈에) ---- */
.finding-list { list-style: none; margin: 0; padding: 0; }
.finding-list li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: 0.86rem; }
.finding-list li:last-child { border-bottom: 0; }
.finding-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--text-muted); }
.finding-list li.lv-danger .dot { background: var(--color-danger); }
.finding-list li.lv-warn .dot { background: var(--color-warning); }
.finding-list li.lv-info .dot { background: var(--color-primary); }
.finding-list .fix { display: block; color: var(--text-muted); font-size: 0.78rem; margin-top: 3px; }

/* ---- 알림 ---- */
.toast-box { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 11px 15px; border-radius: 10px; font-size: 0.85rem; box-shadow: var(--shadow-lg);
  background: var(--bg-sidebar); border: 1px solid var(--border-color); }
.toast-success { border-left: 3px solid var(--color-success); }
.toast-error { border-left: 3px solid var(--color-danger); }

/* 알림·확인 상자 — 다른 앱과 같은 모양 (public/js/dialog.js) */
.app-dialog .modal-header h3 { display: flex; align-items: center; gap: 8px; }
.app-dialog .modal-header h3 i { width: 18px; height: 18px; flex: 0 0 auto; }
.app-dialog .dialog-msg { margin: 0; line-height: 1.65; color: var(--text-main); word-break: break-word; }
.app-dialog .dialog-detail { margin: 10px 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--text-muted); }
.app-dialog .dialog-detail code { padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, .08); font-size: 0.9em; }
.app-dialog .dialog-input { margin-top: 14px; width: 100%; }

/* 이 앱은 목록 층 없이 카드를 죽 늘어놓는 화면뿐이라, 화면 자체가 스크롤을 맡아야 한다
   (공용 틀은 '목록 층이 스크롤한다' 는 전제다 — 그대로 두면 넓은 화면에서 아래가 잘린다) */
.view-section.active { overflow-y: auto; min-height: 0; padding-right: 6px; padding-bottom: 12px; }

/* 관리자만 보이는 것 — 화면을 그린 뒤 app.js 가 이 클래스를 지운다 */
.admin-only.hidden { display: none !important; }

@media (max-width: 992px) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
  .kv { grid-template-columns: 96px 1fr; }
  .server-grid { grid-template-columns: 1fr; }
}

/* 라벨 안의 보조 설명 — 라벨 색을 그대로 물려받아 본문과 구분되지 않았다 */
.form-group label .muted, .form-group label .small { color: var(--text-muted); font-weight: 500; }

/* ---- gmsg 로 나갈 글 미리보기 ---- */
.msg-preview {
  margin: 0; padding: 14px 16px; border-radius: 12px; max-height: 46vh; overflow: auto;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--border-color);
  font-family: ui-monospace, Consolas, 'D2Coding', monospace; font-size: 0.82rem;
  line-height: 1.75; white-space: pre-wrap; word-break: break-word; color: var(--text-main);
}

/* ---- 알림 대화방 목록 ---- */
.hook-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-color); margin-bottom: 8px; flex-wrap: wrap; }
.hook-row .nm { font-weight: 700; font-size: 0.9rem; }
.hook-row .u { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; color: var(--text-muted);
  word-break: break-all; }
.hook-row .grow { flex: 1 1 240px; min-width: 0; }

/* ---- 네트워크에서 찾기 ---- */
.disc-form { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 14px; }
.disc-progress { font-size: 0.82rem; color: var(--text-muted); margin: 10px 0; }
.disc-table td.pick { width: 34px; text-align: center; }
.disc-table input[type="text"] { width: 100%; padding: 5px 8px; font-size: 0.8rem; }
.disc-note { padding: 10px 12px; border-radius: 9px; background: rgba(59, 130, 246, .1);
  font-size: 0.8rem; line-height: 1.65; margin-bottom: 12px; }
.port-chip { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 6px;
  font-family: ui-monospace, Consolas, monospace; font-size: 0.7rem;
  background: rgba(59, 130, 246, .16); color: #60a5fa; }
.port-chip.web { background: rgba(245, 158, 11, .16); color: #fbbf24; }

/* ---- 취약점 수집 목록 ---- */
.kev { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 0.68rem; font-weight: 800;
  background: rgba(239, 68, 68, .2); color: #f87171; letter-spacing: .02em; }
.new-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary); margin-right: 6px; vertical-align: middle; }
.nav-badge { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 800;
  background: var(--color-danger); color: #fff; }
.sidebar-collapsed .nav-badge { display: none; }
.feed-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.feed-filter .form-control { width: auto; min-width: 150px; }

/* ---- 팝업 크기 ----
   공용 틀의 기본은 550px 다. 이 앱의 팝업에는 설치 경로·배너·CVE 설명처럼 긴 글이 들어가서
   그 폭에서는 한 줄이 두세 줄로 접혀 읽기가 어려웠다. 화면을 넓게 쓰되 여백은 남긴다. */
.modal-container { max-height: 94vh; }
.modal-container.modal-xl { width: 96vw; max-width: 1500px; }
.modal-container.modal-lg { width: 94vw; max-width: 1080px; }
.modal-container.modal-md { width: 92vw; max-width: 780px; }
.modal-container.modal-sm { width: 92vw; max-width: 560px; }
.modal-xl .modal-body, .modal-lg .modal-body { max-height: calc(94vh - 150px); }

/* 표 안의 긴 경로는 접지 않는다 — 접히면 어느 줄이 한 서버인지 알아보기 어렵다.
   대신 표가 가로로 밀린다 (.table-wrap 이 스크롤을 맡는다). */
#detail-modal-body table.grid td.mono,
#detail-modal-body table.grid th,
.disc-table td.mono { white-space: nowrap; }
#detail-modal-body .kv { grid-template-columns: 130px 1fr; }
#detail-modal-body .raw { max-height: 42vh; }
.msg-preview { max-height: 56vh; }

/* 발견 목록은 세로로 길다 — 팝업 안에서 표만 굴러가게 */
#discover-modal .table-wrap { max-height: 46vh; overflow-y: auto; }
#discover-modal .disc-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-sidebar); }

@media (max-width: 900px) {
  .modal-container.modal-xl, .modal-container.modal-lg { width: 96vw; }
  #detail-modal-body table.grid td.mono { white-space: normal; word-break: break-all; }
}

/* ---- 설정 탭 ---- */
.tab-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: 0.85rem; font-weight: 600; }
.tab-btn i { width: 16px; height: 16px; }
.tab-btn:hover { color: var(--text-main); }
.tab-btn.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---- 쪽 넘기기 ---- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; }
.pg-group { display: flex; gap: 4px; flex-wrap: wrap; }
.pg { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-muted); font-size: 0.8rem; font-weight: 600; }
.pg:hover:not(:disabled) { color: var(--text-main); border-color: var(--color-primary); }
.pg.on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pg:disabled { opacity: .35; cursor: default; }

/* ---- 서비스 현황 ---- */
.inv-server { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.inv-server:last-child { border-bottom: 0; }
.inv-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.inv-chips { display: flex; flex-direction: column; gap: 6px; }
.inv-kind { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.inv-kind-label { flex: 0 0 92px; font-size: 0.74rem; color: var(--text-muted); }
.comp-chip { padding: 2px 9px; border-radius: 7px; font-size: 0.76rem;
  background: rgba(99, 102, 241, .12); border: 1px solid var(--border-color); }
.comp-chip b { font-family: ui-monospace, Consolas, monospace; font-weight: 700; }

/* 상세 팝업 안 소제목 */
.sec-title { font-size: 0.88rem; margin: 16px 0 8px; }
.sec-title.bad { color: var(--color-danger); }

/* ---- 점검 상세: 머리 요약 ---- */
.detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 12px; margin-bottom: 16px;
  background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--text-muted); }
.detail-hero.vuln { border-left-color: var(--color-danger); background: rgba(239, 68, 68, .07); }
.detail-hero.warn { border-left-color: var(--color-warning); background: rgba(245, 158, 11, .07); }
.detail-hero.safe { border-left-color: var(--color-success); }
.detail-hero.error, .detail-hero.unknown { border-left-color: var(--color-purple); }
.detail-hero-left { display: flex; flex-direction: column; gap: 4px; min-width: 260px; flex: 1 1 320px; }
.detail-hero-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.95rem; }

.mini-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-tile { min-width: 74px; padding: 8px 12px; border-radius: 10px; text-align: center;
  background: rgba(148, 163, 184, .1); border: 1px solid var(--border-color); }
.mini-tile .v { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.mini-tile .l { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.mini-tile.red .v { color: var(--color-danger); }
.mini-tile.amber .v { color: var(--color-warning); }
.mini-tile.blue .v { color: var(--color-primary); }

/* ---- 걸린 취약점 카드 ---- */
.find-list { display: flex; flex-direction: column; gap: 8px; }
.find-list.scroll { max-height: 34vh; overflow-y: auto; padding-right: 4px; }
.find-card { padding: 11px 14px; border-radius: 11px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-color); border-left: 3px solid var(--text-muted); }
.find-card:hover { background: var(--bg-card-hover); border-color: var(--color-primary); }
.find-card.is-exact { border-left-color: var(--color-danger); }
.find-card.is-likely { border-left-color: var(--color-warning); }
.find-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.find-id { font-size: 0.82rem; font-weight: 700; }
.find-conf { margin-left: auto; font-size: 0.72rem; font-weight: 700; }
.find-body { display: flex; flex-direction: column; gap: 4px; }
.find-comp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.find-title { font-size: 0.85rem; line-height: 1.6; }
.find-action { font-size: 0.82rem; color: var(--color-success); line-height: 1.6; }

.sec-title { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; margin: 18px 0 8px; }
.sec-title i { width: 16px; height: 16px; }

/* ---- 점검 결과 펼침 목록 ----
   팝업 대신 목록에서 그 자리에 펼친다. 두 대를 나란히 놓고 비교할 수 있어야 한다. */
.res-list { display: flex; flex-direction: column; gap: 8px; }
.res-item { border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-color); overflow: hidden; }
.res-item.open { border-color: rgba(99, 102, 241, .45); }
.res-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; flex-wrap: wrap; }
.res-head:hover { background: var(--bg-card-hover); }
.res-chevron { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-muted); transition: transform .18s ease; }
.res-item.open .res-chevron { transform: rotate(90deg); color: var(--color-primary); }
.res-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 260px; min-width: 0; }
.res-nums { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-muted); }
.res-num b { font-size: 0.86rem; color: var(--text-main); }
.res-num.bad b { color: var(--color-danger); }
.res-num.warn b { color: var(--color-warning); }
.res-when { flex: 0 0 auto; }
.res-body:not(:empty) { padding: 4px 16px 18px; border-top: 1px solid var(--border-color); }
.detail-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin: 12px 0 4px; }

@media (max-width: 992px) {
  .res-nums { width: 100%; }
  .res-when { display: none; }
}

/* 줄마다 있는 [다시 점검] — 평소엔 옅게, 줄에 손이 가면 또렷하게 */
.res-rescan { flex: 0 0 auto; padding: 4px 8px; opacity: .45; transition: opacity .15s ease; }
.res-head:hover .res-rescan, .res-item.open .res-rescan { opacity: 1; }
.res-rescan i { width: 14px; height: 14px; }
.res-rescan:disabled { opacity: .4; }

/* 조치가 끝난 것 — 사라진 줄은 눈에 띄지 않는다. 초록으로 한 번 보여 주고 넘어간다 */
.sec-title.ok { color: var(--color-success); }
.find-card.is-done { border-left-color: var(--color-success); opacity: .85; }
.find-conf.ok { color: var(--color-success); }
.res-num.ok b { color: var(--color-success); }
.mini-tile.green .v { color: var(--color-success); }

/* ---- 조치 방법 제안 ---- */
.remedy-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 8px; }
.remedy { padding: 14px 16px; border-radius: 12px; margin: 4px 0 12px;
  background: rgba(99, 102, 241, .07); border: 1px solid rgba(99, 102, 241, .3); }
.remedy-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.remedy-sec { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin: 14px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border-color); }
.remedy-step { margin-bottom: 10px; }
.step-title { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.7rem; font-weight: 800; }
.risk { font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; }
.risk.r-low { background: rgba(16, 185, 129, .16); color: #34d399; }
.risk.r-medium { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.risk.r-high { background: rgba(239, 68, 68, .16); color: #f87171; }
.cmd-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: start; margin-bottom: 8px; }
.cmd { grid-column: 1; padding: 8px 11px; border-radius: 8px; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--border-color); font-family: ui-monospace, Consolas, 'D2Coding', monospace;
  font-size: 0.82rem; color: #a5b4fc; word-break: break-all; display: block; }
.copy-btn { grid-column: 2; padding: 6px 9px; }
.copy-btn i { width: 14px; height: 14px; }
.cmd-why { grid-column: 1 / -1; font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; }
.cmd-why.ok { color: var(--color-success); }
.remedy-notes { margin: 12px 0 6px; padding-left: 18px; font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; }

.remedy-for { font-size: 0.82rem; font-weight: 700; color: var(--color-primary); margin: 12px 0 4px; }