/* ════════════════════════════════════════════════
   TwinFin 다크 디자인 시스템 (프로토타입 v0.5 이식)
   ════════════════════════════════════════════════ */
:root{
  --fig-neutral-0:#f5f5f7; --fig-neutral-50:#d1d1d5; --fig-neutral-100:#b3b3ba; --fig-neutral-200:#9999a3;
  --fig-neutral-300:#7a7a86; --fig-neutral-400:#5e5e6b; --fig-neutral-500:#404048; --fig-neutral-600:#323238;
  --fig-neutral-700:#26262c; --fig-neutral-800:#1c1c21; --fig-neutral-900:#141418;
  --fig-primary-400:#818cf8; --fig-primary-500:#6366f1; --fig-primary-800:#3730a3;
  --fig-blue-400:#52a7ec; --fig-success-400:#4ebe7a; --fig-warning-400:#f6a328; --fig-error-400:#f96565;

  --bg:var(--fig-neutral-900); --panel:var(--fig-neutral-800); --panel2:var(--fig-neutral-700); --line:var(--fig-neutral-600);
  --txt:var(--fig-neutral-0); --mut:var(--fig-neutral-200); --dim:var(--fig-neutral-300);
  --primary:var(--fig-primary-500); --primary-2:var(--fig-primary-400); --accent:var(--fig-blue-400);
  --green:var(--fig-success-400); --amber:var(--fig-warning-400); --rose:var(--fig-error-400);
  --grad:var(--primary-soft);   /* 액션버튼 필: 다크 인디고(트리 탭 active 와 동일) */
  --grad-soft:linear-gradient(135deg,rgba(99,102,241,.22),rgba(82,167,236,.14));
  --primary-soft:rgba(99,102,241,.16); --primary-line:rgba(99,102,241,.5);

  /* 앱 셸 여백/모서리 — 화면 가장자리에서 띄워 스크롤바 가시성 확보 */
  --shell-pad:7px; --shell-radius:14px;

  /* 스크롤바 — 트랙 폭/여백/색. 실제 보이는 두께 = --sb-size − (--sb-inset × 2) */
  --sb-size:15px; --sb-inset:3px;
  --sb-thumb:var(--fig-neutral-400); --sb-thumb-hover:var(--fig-neutral-200);

  --border:var(--line); --text:var(--txt); --muted:var(--mut); --code-bg:var(--panel2);
  --app-nav:var(--panel); --app-nav2:var(--bg); --app-nav-hi:var(--panel2); --app-blue:var(--primary-2);
  --app-line:var(--line); --app-text:var(--mut); --accent2:var(--green); --primary-c:var(--primary);
}
/* Firefox: thin 은 폭이 고정(≈11px)이라 auto 로 두어야 --sb-size 에 준하는 두께가 나온다 */
*{ box-sizing:border-box; margin:0; padding:0; scrollbar-width:auto; scrollbar-color:var(--sb-thumb) transparent; }
html,body{ height:100%; }
body{
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;
  color:var(--txt); font-size:14px; background:var(--bg); letter-spacing:-0.01em; color-scheme:dark;
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
  /* 화면 가장자리 여백 — 창 끝에 붙은 스크롤바가 잘 보이고 잡기 쉬워진다(--shell-pad 로 조절) */
  padding:var(--shell-pad);
}
/* 스크롤바: 배경(#141418) 대비가 낮고 얇아 잘 안 보이던 것을 굵게 + 밝게.
   투명 border + background-clip:content-box 로 트랙 안쪽에 여백을 만든다
   → 보이는 두께 = --sb-size − (--sb-inset × 2). 값은 :root 변수 4개로 조절. */
::-webkit-scrollbar{ width:var(--sb-size); height:var(--sb-size); }
::-webkit-scrollbar-thumb{ background:var(--sb-thumb); border-radius:9px;
  border:var(--sb-inset) solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--sb-thumb-hover); background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }
/* 가로·세로가 만나는 모서리가 밝은 기본색으로 뜨는 것 방지 */
::-webkit-scrollbar-corner{ background:transparent; }
code,.mono{ font-family:inherit; font-feature-settings:'tnum' 1; font-variant-numeric:tabular-nums; }

/* ── 앱바 ── */
/* 앱바 + .app 이 하나의 카드처럼 보이도록 위/아래 모서리를 나눠 갖는다 */
.appbar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; background:var(--panel); color:var(--txt); padding:10px 18px; border:1px solid var(--line); border-radius:var(--shell-radius) var(--shell-radius) 0 0; }
.appbar .brand{ font-size:15px; font-weight:800; color:var(--txt); display:flex; align-items:center; gap:9px; }
.appbar .brand .ver{ font-size:10px; color:var(--dim); font-weight:500; background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:2px 9px; letter-spacing:.02em; }
.appbar .spacer{ flex:1; }
.appbar button{ background:transparent; color:var(--mut); border:1px solid var(--line); padding:7px 13px; border-radius:9px; font-size:12px; font-weight:600; font-family:inherit; cursor:pointer; transition:.15s; }
.appbar button:hover{ border-color:var(--primary-line); color:var(--txt); }
.appbar button.primary{ background:var(--grad); color:#fff; border:1px solid var(--primary-line); }
.appbar button.primary:hover{ filter:brightness(1.1); }

/* ── Admin 인증 게이팅 ── */
/* admin 전용 요소는 로그인 전(뷰어)엔 숨김. 서버도 강제하므로 UI 은닉은 편의/명료화용. */
body:not(.is-admin) .admin-only{ display:none !important; }
body:not(.is-admin) .add-expert{ display:none !important; }
.auth{ position:relative; display:flex; align-items:center; gap:8px; }
.viewer-tag{ font-size:10.5px; font-weight:700; color:#f5a524; background:rgba(245,165,36,.12); border:1px solid rgba(245,165,36,.34); border-radius:20px; padding:3px 10px; letter-spacing:.02em; }
body.is-admin .viewer-tag{ display:none; }
body.is-admin #authOpen{ display:none; }
#authWho{ display:none; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#6ee7b7; }
body.is-admin #authWho{ display:inline-flex; }
.auth-form{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:50; width:240px; background:var(--panel); border:1px solid var(--primary-line); border-radius:11px; box-shadow:0 14px 40px rgba(0,0,0,.5); padding:14px; }
.auth-form.show{ display:block; }
.auth-form input{ width:100%; box-sizing:border-box; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px; font-family:inherit; color:var(--txt); margin-bottom:8px; }
.auth-form input:focus{ outline:none; border-color:var(--primary); }
.auth-row{ display:flex; gap:8px; }
.auth-form .auth-row button{ flex:1; }
.auth-err{ color:var(--rose); font-size:11px; margin-top:8px; min-height:14px; overflow-wrap:anywhere; }

/* overflow:hidden = 하단 둥근 모서리 밖으로 내부 패널이 삐져나오지 않게 클리핑 */
.app{ flex:1; display:flex; min-height:0; background:var(--bg);
  border:1px solid var(--line); border-top:none;
  border-radius:0 0 var(--shell-radius) var(--shell-radius); overflow:hidden; }

/* ── 리사이저(좌우/상하 드래그) ── */
.resizer-v{ flex:0 0 5px; cursor:col-resize; background:transparent; z-index:6; }
.resizer-h{ flex:0 0 5px; cursor:row-resize; background:transparent; z-index:6; }
.resizer-col{ flex:0 0 5px; cursor:col-resize; background:transparent; align-self:stretch; }
.resizer-v:hover, .resizer-h:hover, .resizer-col:hover, .app.resizing .resizer-v, .app.resizing .resizer-h, .app.resizing .resizer-col{ background:var(--primary-line); }
.app.resizing{ user-select:none; cursor:inherit; }
.app.resizing .app-sidebar, .app.resizing .pane-bottom{ transition:none; }
.app.dc-collapsed .resizer-h{ display:none; }

/* ── 사이드바 헤더 ≡ / 패널 열기 ≡ ── */
.side-head .sideburger{ margin-left:auto; background:var(--panel2); border:1px solid var(--line); border-radius:7px; width:28px; height:26px; cursor:pointer; font-size:14px; line-height:1; color:var(--mut); font-family:inherit; transition:.15s; }
.side-head .sideburger:hover{ border-color:var(--primary-line); color:var(--txt); }
.nav-reopen{ display:none; background:var(--panel2); border:1px solid var(--line); border-radius:8px; width:32px; height:30px; cursor:pointer; font-size:16px; line-height:1; color:var(--mut); font-family:inherit; transition:.15s; }
.nav-reopen:hover{ border-color:var(--primary-line); color:var(--txt); }
.app.nav-collapsed .nav-reopen{ display:inline-block; }

/* ── 좌측 패널 ── */
.app-sidebar{ width:300px; flex-shrink:0; background:var(--panel); color:var(--mut); display:flex; flex-direction:column; transition:width .2s ease, min-width .2s ease; overflow:hidden; border-right:1px solid var(--line); }
.app.nav-collapsed .app-sidebar{ width:0; min-width:0; }
.side-head{ display:flex; align-items:center; gap:8px; height:53px; padding:0 16px; border-bottom:1px solid var(--line); }
.side-head .logo{ font-size:13px; font-weight:800; color:var(--txt); white-space:nowrap; letter-spacing:.02em; }
.side-head .ver{ font-size:10px; color:var(--dim); }
.side-search{ height:56px; padding:0 12px; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.side-search input{ width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--txt); padding:8px 10px 8px 32px; border-radius:8px; font-size:12px; font-family:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239999a3' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat; background-position:10px center; }
.side-search input::placeholder{ color:var(--dim); }
.side-search input:focus{ outline:none; border-color:var(--primary-line); }
/* OS 필터 세그먼트 (All / Windows / Linux) */
.side-filter{ display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); }
.side-filter .ftab{ flex:1; padding:6px 0; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.03); color:var(--mut); font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer; transition:.15s; }
.side-filter .ftab:hover{ border-color:var(--primary-line); color:var(--txt); }
.side-filter .ftab.active{ background:var(--primary-soft); border-color:var(--primary-line); color:#fff; }
.tree{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0 20px; }
.tnode{ user-select:none; }
.trow{ display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:13px; white-space:nowrap; border-left:3px solid transparent; transition:background .12s; }
.trow:hover{ background:rgba(99,102,241,.06); }
.trow.selected{ background:var(--primary-soft); border-left-color:var(--primary); color:var(--txt); }
.trow .chev{ width:14px; text-align:center; font-size:9px; color:var(--dim); transition:transform .15s; flex-shrink:0; }
.trow.open > .chev{ transform:rotate(90deg); }
.trow .ico{ font-size:14px; flex-shrink:0; display:inline-flex; align-items:center; }
.trow .ico .vico{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.trow .lbl{ overflow:hidden; text-overflow:ellipsis; }
.trow .lbl small{ color:var(--dim); font-weight:400; }
.lvl-tactic > .trow{ font-weight:800; color:var(--txt); padding-left:14px; }
.lvl-tech   > .trow{ padding-left:28px; color:var(--mut); }
.lvl-sub      .trow{ padding-left:50px; color:var(--dim); font-size:12.5px; }
.tchildren{ display:none; }
.tnode.open > .tchildren{ display:block; }
.tnode.lvl-sub .trow .chev{ visibility:hidden; }
.tree-empty{ padding:20px 16px; color:var(--dim); font-size:12px; }
/* 노드 점: 전문가 분석 기준 있음→녹색 / 비어있음→파란색 */
.has-data::after{ content:'●'; color:var(--accent); font-size:9px; margin-left:6px; }
.has-data.exp-yes::after{ color:var(--green); }
.has-data.exp-no::after{ color:var(--accent); }
.trow .ostag{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px; font-size:9.5px; font-weight:700; letter-spacing:.02em; background:var(--primary-soft); color:#b3b8ff; border:1px solid var(--primary-line); vertical-align:middle; }
.crumb-os{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:5px; font-size:11px; font-weight:700; background:var(--primary-soft); color:#b3b8ff; border:1px solid var(--primary-line); }
/* 측면이동 role 뱃지(src/dst) — 트리 leaf / 크럼브. 인증증거 색조로 OS 뱃지와 구분 */
.trow .roletag{ display:inline-block; margin-left:5px; padding:1px 6px; border-radius:4px; font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background:rgba(52,211,153,.12); color:#6ee7b7; border:1px solid rgba(52,211,153,.32); vertical-align:middle; }
.crumb-role{ display:inline-block; margin-left:8px; padding:2px 8px; border-radius:5px; font-size:11px; font-weight:700; text-transform:uppercase; background:rgba(52,211,153,.12); color:#6ee7b7; border:1px solid rgba(52,211,153,.32); }
/* 구조용 그룹 행(자체 데이터 없음, sub 로 생성된 토글) — 데이터 행과 구분 */
.trow.node-group .lbl{ color:var(--dim); font-weight:400; }
.trow.node-group .ico{ opacity:.75; }
.trow.node-group:hover{ background:rgba(255,255,255,.03); }
.trow .grp-tag{ display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:600; color:#e0ddd6; background:#5a4636; border:1px solid #6f5743; vertical-align:middle; }

/* ── 좌측 패널 가독성: 글씨·아이콘 전부 흰색 ── */
.app-sidebar{ color:var(--txt); }
.app-sidebar .trow,
.app-sidebar .lvl-tactic > .trow,
.app-sidebar .lvl-tech > .trow,
.app-sidebar .lvl-sub .trow,
.app-sidebar .trow .lbl,
.app-sidebar .trow .lbl small,
.app-sidebar .trow .chev,
.app-sidebar .trow .ico,
.app-sidebar .trow.node-group .lbl,
.app-sidebar .side-head .logo,
.app-sidebar .side-head .ver,
.app-sidebar .tree-empty{ color:var(--txt); }
.app-sidebar .trow.node-group .ico,
.app-sidebar .tnode.lvl-sub .trow .chev{ opacity:1; }

/* ── 메인 ── */
.app-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.main-top{ display:flex; align-items:center; gap:12px; height:53px; padding:0 16px; background:var(--panel); border-bottom:1px solid var(--line); }
.burger{ background:var(--panel2); border:1px solid var(--line); border-radius:8px; width:32px; height:30px; cursor:pointer; font-size:16px; line-height:1; color:var(--mut); transition:.15s; }
.burger:hover{ border-color:var(--primary-line); color:var(--txt); }
.main-top .crumb{ font-size:14px; font-weight:800; color:var(--txt); }
.main-top .crumb small{ font-weight:400; color:var(--mut); margin-left:6px; }
.main-top .t0badge{ margin-left:auto; font-size:11px; background:rgba(246,163,40,.15); color:var(--amber); border:1px solid rgba(246,163,40,.35); padding:4px 11px; border-radius:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:pre-line; line-height:1.5; text-align:left; }

/* ── 상하 분할 ── */
.split{ flex:1; display:flex; flex-direction:column; min-height:0; }

/* ── 위 60% — 타임라인 ── */
.pane-top{ flex:1 1 60%; display:flex; flex-direction:column; min-height:0; border-bottom:1px solid var(--line); background:var(--bg); }
.query-bar{ height:56px; padding:0 14px; background:var(--bg); border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; }
.query-bar .sqlhint{ font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:11px; color:var(--primary-2); font-weight:700; white-space:nowrap; }
.query-bar input{ flex:1; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:12.5px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.04); color:var(--txt); }
.query-bar input::placeholder{ color:var(--dim); }
.query-bar input:focus{ outline:none; border-color:var(--primary-line); }
.query-bar button{ background:var(--grad); color:#fff; border:1px solid var(--primary-line); padding:9px 16px; border-radius:9px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:.15s; white-space:nowrap; }
.query-bar button:hover{ filter:brightness(1.15); }
.query-bar button.ghost{ background:transparent; color:var(--mut); border:1px solid var(--line); box-shadow:none; font-weight:600; }
.query-bar button.ghost:hover{ border-color:var(--primary-line); color:var(--txt); filter:none; }
.tl-status{ padding:6px 14px; font-size:11.5px; color:var(--mut); background:var(--bg); border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.tl-status b{ color:var(--txt); font-variant-numeric:tabular-nums; }
.tl-status .qtag{ font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; background:var(--primary-soft); color:var(--primary-2); border:1px solid var(--primary-line); padding:1px 8px; border-radius:5px; max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tl-status .err{ color:var(--rose); font-weight:600; }
.tz-btn{ margin-left:auto; background:var(--primary-soft); color:var(--primary-2); border:1px solid var(--primary-line);
  border-radius:6px; padding:3px 10px; font-size:11.5px; cursor:pointer; white-space:nowrap; }
.tz-btn b{ color:var(--primary-2)!important; font-variant-numeric:tabular-nums; }
.tz-btn:hover{ background:var(--primary-line); }
/* 타임라인 표시부: 좌(목록) / 리사이저 / 우(상세) 가로 분할 */
.tl-body{ flex:1; display:flex; min-height:0; }
.tl-scroll{ flex:1 1 auto; min-width:0; overflow:auto; position:relative; }
.tl-detail-resizer{ flex:0 0 5px; cursor:col-resize; background:transparent; align-self:stretch; }
.tl-detail-resizer:hover, .app.resizing .tl-detail-resizer{ background:var(--primary-line); }
.tl-detail{ flex:0 0 40%; min-width:240px; display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line); background:#0e0e13; }
.tl-detail-head{ flex:0 0 auto; display:flex; align-items:center; height:36px; padding:0 8px 0 14px; border-bottom:1px solid var(--line); background:var(--panel2); }
.tl-detail-head .tl-detail-title{ font-size:11px; font-weight:800; color:var(--mut); text-transform:uppercase; letter-spacing:.05em; }
.tl-detail-head .tl-detail-x{ margin-left:auto; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; color:var(--mut); font-size:13px; transition:.15s; }
.tl-detail-head .tl-detail-x:hover{ background:rgba(255,255,255,.08); color:var(--txt); }
.tl-detail-body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:14px 16px; }
.tl-detail-body .kv{ display:grid; grid-template-columns:92px 1fr; gap:9px 12px; font-size:12px; line-height:1.65; }
.tl-detail-body .k{ color:var(--primary-2); font-weight:700; }
.tl-detail-body .v{ color:var(--txt); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
/* 상세 보기 — Message Analyzer 스타일 필드:값 구조 */
.det-title{ font-size:13px; font-weight:800; color:var(--txt); margin:0 0 12px; padding:7px 10px;
  background:var(--primary-soft); border:1px solid var(--primary-line); border-radius:6px;
  overflow-wrap:anywhere; word-break:break-word; }
.det-sec{ margin-bottom:14px; }
.det-sec-t{ font-size:10.5px; font-weight:800; color:var(--mut); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--line); }
.fv{ display:grid; grid-template-columns:minmax(90px,34%) 1fr; gap:5px 12px; font-size:12px; line-height:1.6; }
.fv .fk{ color:var(--primary-2); font-weight:700; overflow-wrap:anywhere; word-break:break-word; }
.fv .fvv{ color:var(--txt); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.det-msg{ margin:0; padding:10px 12px; background:#0a0a0f; border:1px solid var(--line); border-radius:6px;
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;
  font-size:12px; line-height:1.55; color:var(--txt); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.det-raw{ margin-top:8px; }
.det-raw>summary{ cursor:pointer; font-size:11px; color:var(--mut); padding:4px 0; user-select:none; }
.det-raw>summary:hover{ color:var(--txt); }
.det-rawblk{ margin-top:6px; }
.det-rawblk>b{ font-size:10.5px; color:var(--primary-2); text-transform:uppercase; letter-spacing:.05em; }
.det-rawblk>pre{ margin:3px 0 0; padding:8px 10px; background:#0a0a0f; border:1px solid var(--line); border-radius:5px;
  font-size:11px; line-height:1.5; color:var(--mut); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
table.timeline{ border-collapse:collapse; min-width:1100px; width:100%; font-size:12px; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; }
table.timeline thead tr{ background:var(--panel2); color:var(--mut); position:sticky; top:0; z-index:2; }
table.timeline th{ padding:9px 10px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; text-align:left; border-bottom:1px solid var(--line); }
table.timeline td{ padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; color:var(--mut); }
table.timeline tbody tr.tlrow{ cursor:pointer; transition:background .1s; }
table.timeline tbody tr.tlrow:hover{ background:rgba(99,102,241,.06); }
table.timeline tbody tr.tlrow.open{ background:var(--primary-soft); }
.src{ display:inline-block; padding:2px 8px; border-radius:5px; font-size:10px; font-weight:700; white-space:nowrap; letter-spacing:.02em; }
.src.filestat{ background:rgba(78,190,122,.15); color:#74dca2; border:1px solid rgba(78,190,122,.35); }
.src.journal{ background:rgba(82,167,236,.15); color:#8fcdf5; border:1px solid rgba(82,167,236,.35); }
.src.logfile{ background:rgba(255,255,255,.06); color:var(--mut); border:1px solid var(--line); }
.src.apt{ background:rgba(246,163,40,.15); color:#ffc46b; border:1px solid rgba(246,163,40,.35); }
.src.dpkg{ background:rgba(246,163,40,.10); color:#e3b574; border:1px solid rgba(246,163,40,.25); }
.src.cron{ background:rgba(249,101,101,.15); color:#ff9a9a; border:1px solid rgba(249,101,101,.32); }
.src.utmp{ background:rgba(99,102,241,.18); color:#b3b8ff; border:1px solid var(--primary-line); }
/* Windows 소스타입 색상 */
.src.evtx{ background:rgba(45,212,191,.16); color:#5fd8c6; border:1px solid rgba(45,212,191,.38); }
.src.registry{ background:rgba(168,120,255,.16); color:#c9a5ff; border:1px solid rgba(168,120,255,.40); }
.src.usn{ background:rgba(246,190,60,.16); color:#ffcf6b; border:1px solid rgba(246,190,60,.38); }
.src.prefetch{ background:rgba(236,120,180,.16); color:#f2a3d1; border:1px solid rgba(236,120,180,.38); }
.src.mft{ background:rgba(130,160,200,.16); color:#a6bfe0; border:1px solid rgba(130,160,200,.38); }
.src.task{ background:rgba(80,200,190,.15); color:#6fd8ce; border:1px solid rgba(80,200,190,.36); }
.src.lnk{ background:rgba(255,150,80,.15); color:#ffb27a; border:1px solid rgba(255,150,80,.36); }
.src.srum{ background:rgba(150,140,240,.16); color:#c1b6ff; border:1px solid rgba(150,140,240,.38); }
.src.etw{ background:rgba(249,101,140,.16); color:#ff9ab3; border:1px solid rgba(249,101,140,.38); }
.more{ color:var(--accent); font-weight:700; }
.tl-more{ padding:13px 14px; font-size:12px; color:var(--mut); display:flex; gap:10px; align-items:center; flex-wrap:wrap; border-top:1px dashed var(--line); background:var(--bg); }
.tl-more b{ color:var(--txt); font-variant-numeric:tabular-nums; }
.tl-more button{ background:var(--grad); color:#fff; border:1px solid var(--primary-line); padding:6px 13px; border-radius:8px; font-size:11.5px; font-weight:700; font-family:inherit; cursor:pointer; }
.tl-more button:hover{ filter:brightness(1.1); }
.tl-more button.ghost{ background:transparent; color:var(--mut); border:1px solid var(--line); box-shadow:none; font-weight:600; }
.tl-more button.ghost:hover{ border-color:var(--primary-line); color:var(--txt); }
.loading{ padding:24px; text-align:center; color:var(--dim); font-size:12px; }

/* ── 아래 40% — Data Components ── */
.pane-bottom{ flex:0 0 40%; display:flex; flex-direction:column; min-height:0; background:var(--bg); }
.app.dc-collapsed .pane-bottom{ flex:0 0 auto; }
.dc-header{ padding:11px 14px; font-size:13px; font-weight:800; color:var(--txt); background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; cursor:pointer; transition:.15s; }
.dc-header:hover{ background:var(--panel2); }
.dc-header .dchev{ font-size:10px; color:var(--mut); transition:transform .15s; }
.app.dc-collapsed .dc-header .dchev{ transform:rotate(-90deg); }
.dc-header .cnt{ font-size:11px; color:var(--primary-2); font-weight:600; }
.app.dc-collapsed .dc-tabs, .app.dc-collapsed .dc-content{ display:none; }

.dc-tabs{ display:flex; gap:6px; background:var(--panel); padding:8px 10px 0; overflow-x:auto; flex-shrink:0; border-bottom:1px solid var(--line); }
.dc-tab{ padding:8px 15px; font-size:12px; font-weight:600; color:var(--mut); background:var(--panel2); border:1px solid var(--line); border-bottom:none; border-radius:9px 9px 0 0; cursor:pointer; white-space:nowrap; transition:.15s; }
.dc-tab:hover{ color:var(--txt); border-color:var(--primary-line); }
.dc-tab.active{ background:var(--grad-soft); color:#fff; border-color:var(--primary); box-shadow:0 -2px 0 var(--primary) inset; }

.dc-content{ flex:1; display:flex; min-height:0; }
.dc-col{ flex:1 1 50%; min-width:0; overflow:auto; padding:14px 16px; }
.dc-col.mitre{ border-right:1px solid var(--line); background:var(--bg); }
.dc-col.expert{ background:rgba(99,102,241,.03); }
.dc-col h5{ font-size:12px; font-weight:800; margin-bottom:9px; display:flex; align-items:center; gap:6px; position:sticky; top:-14px; background:inherit; padding:6px 0; text-transform:uppercase; letter-spacing:.03em; }
.dc-col.mitre h5{ color:var(--accent); }
.dc-col.expert h5{ color:var(--green); }
.dc-col .sub{ font-size:11px; color:var(--mut); margin-bottom:10px; }
.artifact{ display:block; padding:9px 11px; margin-bottom:7px; border:1px solid var(--line); border-radius:9px; background:var(--panel); cursor:pointer; font-size:12.5px; line-height:1.5; color:var(--mut); transition:.15s; }
.artifact:hover{ border-color:var(--primary-line); background:rgba(99,102,241,.06); color:var(--txt); }
.artifact.active{ border-color:var(--primary); background:var(--grad-soft); color:#fff; box-shadow:0 2px 12px rgba(99,102,241,.22); }
.artifact .dash{ color:var(--primary-2); font-weight:700; margin-right:5px; font-variant-numeric:tabular-nums; }
.artifact .q{ display:block; margin-top:6px; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:10.5px; color:var(--dim); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:5px; padding:3px 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artifact.active .q{ color:#cdd2ff; background:rgba(0,0,0,.2); border-color:transparent; }
.artifact .art-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.artifact .art-name{ font-weight:700; color:var(--txt); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:11.5px; }
.artifact.active .art-name{ color:#fff; }
.artifact .art-ch{ font-size:11px; color:var(--mut); }
.artifact.active .art-ch{ color:#dfe2ff; }
.artifact.noquery{ cursor:default; opacity:.72; border-style:dashed; }
.artifact.noquery:hover{ border-color:var(--line); background:var(--panel); color:var(--mut); }
.artifact .q.none{ color:var(--dim); font-style:italic; background:transparent; border-style:dashed; }
.art-empty{ font-size:11.5px; color:var(--dim); padding:6px 2px; }

.placeholder{ padding:40px 24px; text-align:center; color:var(--dim); font-size:13px; margin:auto; }
.placeholder .big{ font-size:34px; margin-bottom:10px; opacity:.5; }

/* ── 드로어(결과 업로드 / 테스트 실행) — 앱 셸 위에 뜨는 오버레이라 여백 없이 화면 끝에 붙는다 ── */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:.2s; z-index:40; }
.overlay.show{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100vh; width:460px; min-width:360px; max-width:96vw; background:var(--panel); border-left:1px solid var(--line); box-shadow:-8px 0 28px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.12); transform:translateX(100%); transition:transform .22s ease; z-index:50; overflow-y:auto; }
.drawer.show{ transform:translateX(0); }
.drawer.resizing{ transition:none; user-select:none; }
#runDrawer{ width:660px; }   /* 테스트 실행 폼은 기본으로 넓게(드래그로 더 조절 가능) */
/* 드로어 좌측 폭 조절 핸들 — 헤더보다 위(z), 드래그로 좌우 확장/축소 */
.drawer-resizer{ position:absolute; top:0; left:0; width:6px; height:100%; cursor:col-resize; z-index:3; }
.drawer-resizer:hover, .drawer.resizing .drawer-resizer{ background:var(--primary-line); }
/* 헤더: 불투명 바탕(var(--panel)) 위에 인디고 틴트만 얹어 스크롤 시 비침 방지 */
.drawer .dh{ background:linear-gradient(180deg, rgba(99,102,241,.14), rgba(99,102,241,0)), var(--panel); color:var(--txt); padding:18px 22px; position:sticky; top:0; border-bottom:1px solid var(--line); z-index:2; }
.drawer .dh h2{ font-size:18px; font-weight:800; }
.drawer .dh p{ font-size:12px; color:var(--mut); margin:4px 0 0; }
.drawer .dh .x{ position:absolute; top:14px; right:16px; cursor:pointer; font-size:18px; color:var(--mut); padding:4px 8px; border-radius:6px; transition:.15s; }
.drawer .dh .x:hover{ color:var(--rose); background:rgba(249,101,101,.12); }
.drawer .db{ padding:18px 22px; font-size:13px; color:var(--txt); }
.drawer h3{ font-size:12px; font-weight:700; color:var(--primary-2); margin:20px 0 9px; letter-spacing:.03em; text-transform:uppercase; padding-bottom:7px; border-bottom:1px solid var(--line); }
.drawer h3:first-child{ margin-top:0; }
.drawer ol,.drawer ul{ padding-left:20px; color:var(--mut); } .drawer li{ margin-bottom:6px; }
.drawer b{ color:var(--txt); }
.drawer code{ background:var(--panel2); border:1px solid var(--line); padding:1px 5px; border-radius:4px; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:12px; color:var(--primary-2); }
.drawer .note{ background:var(--primary-soft); border-left:3px solid var(--primary); padding:10px 12px; border-radius:0 8px 8px 0; margin:10px 0; font-size:12.5px; color:var(--mut); }

/* 업로드 폼 */
.upload-box{ border:1.5px dashed var(--line); border-radius:12px; padding:22px; text-align:center; background:rgba(255,255,255,.02); transition:.15s; }
.upload-box.drag{ border-color:var(--primary); background:rgba(99,102,241,.08); }
.upload-box input[type=file]{ display:none; }
.upload-box label{ display:inline-block; cursor:pointer; background:var(--grad); color:#fff; border:1px solid var(--primary-line); padding:9px 18px; border-radius:9px; font-size:12.5px; font-weight:700; }
.upload-box .hint{ margin-top:14px; font-size:11.5px; color:var(--dim); line-height:1.45; }
.upload-box .hint > div{ margin-top:3px; }
.upload-box .hint > div:first-child{ margin-top:0; }
/* 안내문 안의 code 는 칩(테두리·배경·패딩) 제거 + 모두 동일한 회색 (겹침/색 불일치 방지) */
.upload-box .hint code{ background:transparent; border:none; padding:0; border-radius:0; color:var(--mut); font-size:11.5px; overflow-wrap:anywhere; }
.upload-box .hint .hint-ex2{ padding-left:30px; }   /* "예시: " 폭만큼 들여 둘째 예시 정렬 */
.upload-box .hint .hint-note{ margin-top:7px; color:var(--mut); }
.upload-box .fname{ margin-top:10px; font-size:12px; color:var(--primary-2); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; word-break:break-all; }
.btn-row{ display:flex; gap:8px; margin-top:14px; }
.btn-row button{ flex:1; padding:10px; border-radius:9px; font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer; border:none; }
.btn-row button.go{ background:var(--grad); color:#fff; border:1px solid var(--primary-line); }
.btn-row button.go:disabled{ opacity:.5; cursor:not-allowed; }
.btn-row button.ghost{ background:transparent; color:var(--mut); border:1px solid var(--line); }
.upload-result{ margin-top:16px; font-size:12.5px; }
.upload-result.ok{ color:var(--green); }
.upload-result.err{ color:var(--rose); }
.upload-result .kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin-top:10px; color:var(--mut); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:11.5px; }
.upload-result .kv b{ color:var(--txt); font-weight:500; }
.upload-result .kv b code{ background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--primary-2); font-size:11px; overflow-wrap:anywhere; }
.run-dim{ color:var(--dim); font-style:italic; }

/* ── 테스트 실행 폼 (VM 클론 · Technique) ── */
.run-warn{ background:rgba(249,101,101,.10); border-left:3px solid var(--rose); padding:9px 12px; border-radius:0 8px 8px 0; font-size:11.5px; color:var(--mut); margin-bottom:16px; }
.run-warn b{ color:var(--txt); }
.run-form label{ display:block; font-size:11.5px; font-weight:700; color:var(--mut); margin:12px 0 5px; letter-spacing:.02em; }
.run-form label .dim{ color:var(--dim); font-weight:500; }
.run-form input, .run-form select{ width:100%; box-sizing:border-box; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12.5px; font-family:inherit; color:var(--txt); transition:.15s; }
.run-form input:focus, .run-form select:focus{ outline:none; border-color:var(--primary); }
.run-form input::placeholder{ color:var(--dim); }
.run-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.run-hint{ font-size:11px; color:var(--primary-2); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; min-height:14px; margin-top:5px; }
/* 경량 수집 체크박스 — .run-form label/input 전역 규칙(특이도·width:100%)을 눌러야 하므로 특이도를 올린다 */
.run-form label.run-lite{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:12.5px; font-weight:600; color:var(--mut); cursor:pointer; letter-spacing:0; }
.run-form label.run-lite input{ width:auto; flex:none; margin:0; padding:0; background:none; border:none; border-radius:0; box-shadow:none; cursor:pointer; }
.run-lite .dim{ color:var(--dim); font-weight:500; }
/* VM 템플릿 목록 새로고침(↻) — Proxmox 에서 다시 읽기 */
.tpl-reload{ background:transparent; border:1px solid var(--line); color:var(--mut); border-radius:6px;
  width:22px; height:20px; line-height:1; font-size:12px; cursor:pointer; font-family:inherit; margin-left:6px; transition:.15s; }
.tpl-reload:hover{ border-color:var(--primary-line); color:var(--txt); }

/* 프로시저 목록 (technique YAML 기반) */
.proc-list{ display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; padding:2px; }
.proc-empty{ font-size:12px; color:var(--dim); padding:10px; text-align:center; border:1px dashed var(--line); border-radius:8px; }
.proc-noyaml{ color:var(--bad, #e5534b); border-color:var(--bad, #e5534b); font-weight:600; }
.proc-manual{ width:80px; margin-left:6px; background:var(--panel2); border:1px solid var(--line); border-radius:6px; color:var(--txt); padding:3px 6px; font-family:inherit; }
.proc-item{ border:1px solid var(--line); border-radius:9px; padding:8px 10px; background:var(--panel2); cursor:pointer; transition:.12s; }
.proc-item:hover{ border-color:var(--primary-line); }
.proc-item.on{ border-color:var(--primary); background:var(--grad-soft); }
.proc-item.dis{ cursor:not-allowed; opacity:.5; }
.proc-item.dis:hover{ border-color:var(--line); }
.proc-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.proc-head b{ color:var(--txt); font-size:12.5px; font-weight:700; }
.proc-tag{ font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:11px; font-weight:700; color:#fff; background:var(--primary); border-radius:5px; padding:1px 7px; flex-shrink:0; }
.proc-tag.none{ background:var(--fig-neutral-500); color:var(--mut); }
.proc-plat{ font-size:10px; color:var(--mut); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:4px; padding:0 5px; font-style:normal; }
.proc-note{ font-size:10.5px; color:var(--amber); }
.proc-desc{ margin-top:5px; font-size:11px; color:var(--mut); line-height:1.5; white-space:pre-wrap; max-height:88px; overflow-y:auto; }

/* input 인자 동적 필드 */
.arg-fields{ display:flex; flex-direction:column; gap:9px; }
.arg-row{ display:flex; flex-direction:column; gap:3px; }
/* input 인자 2개 이상 — 각 인자를 카드+번호로 구분 */
.arg-row.arg-card{ gap:6px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); }
.arg-idx{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; border-radius:5px;
  background:var(--primary-soft); border:1px solid var(--primary-line); color:#b3b8ff; font-size:9.5px; font-weight:800; flex:0 0 auto; }
.arg-fields .arg-name{ margin:0; font-size:11.5px; font-weight:700; color:var(--txt); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; display:flex; align-items:center; gap:7px; }
.arg-type{ font-size:9.5px; font-weight:500; color:var(--mut); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:4px; padding:0 5px; font-family:inherit; }
.arg-fs{ font-size:9.5px; font-weight:700; color:var(--green); background:rgba(78,190,122,.12); border:1px solid rgba(78,190,122,.4); border-radius:4px; padding:0 5px; font-family:inherit; }
.arg-desc{ font-size:10.5px; color:var(--dim); line-height:1.4; }
.arg-fields .arg-input{ width:100%; box-sizing:border-box; background:var(--panel2); border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:12px; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; color:var(--txt); }
.arg-fields .arg-input:focus{ outline:none; border-color:var(--primary); }
.run-check{ display:flex !important; align-items:center; gap:8px; margin-top:14px !important; cursor:pointer; }
.run-check input{ width:auto !important; }
.run-mock{ display:inline-block; font-size:10px; font-weight:700; color:#fff; background:var(--dim); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:middle; }
.run-steps-h{ margin-top:14px; font-size:11px; font-weight:700; color:var(--primary-2); text-transform:uppercase; letter-spacing:.03em; }
ol.run-steps{ margin:8px 0 0; padding-left:20px; color:var(--mut); font-size:11.5px; line-height:1.7; }
ol.run-steps li{ margin-bottom:2px; }
.run-note{ margin-top:12px; background:var(--primary-soft); border-left:3px solid var(--primary); padding:9px 12px; border-radius:0 8px 8px 0; font-size:11.5px; color:var(--mut); }
/* Technique 커스텀 자동완성 드롭다운 (네이티브 datalist 대체) */
.tech-field{ position:relative; }
.tech-drop{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; max-height:340px; overflow-y:auto; background:var(--panel); border:1px solid var(--primary-line); border-radius:9px; box-shadow:0 10px 30px rgba(0,0,0,.5); padding:4px; }
.tech-more{ padding:6px 9px; font-size:10.5px; color:var(--dim); text-align:center; border-top:1px solid var(--line); margin-top:2px; position:sticky; bottom:-4px; background:var(--panel); }
.tech-more b{ color:var(--mut); }
.tech-opt{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:6px; cursor:pointer; font-size:12px; }
.tech-opt:hover, .tech-opt.active{ background:var(--primary-soft); }
.tech-opt b{ color:var(--primary-2); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:11.5px; flex:0 0 auto; }
.tech-opt span{ color:var(--txt); flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tech-opt i{ font-style:normal; font-size:9px; font-weight:700; color:#b3b8ff; background:var(--primary-soft); border:1px solid var(--primary-line); border-radius:4px; padding:1px 5px; flex:0 0 auto; }
/* corpus 에 YAML 있는(실행 가능) 기법 → 빨간색 강조 + ● 마커 */
/* 인라인 SVG 아이콘(이모지 대체) — 텍스트 색(currentColor) 상속, 글자 크기에 맞춰 1em */
.ic{ display:inline-block; width:1.05em; height:1.05em; vertical-align:-0.15em; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ic-fill{ fill:currentColor; stroke:none; }
.placeholder .big .ic{ width:34px; height:34px; }
.trow .chev .ic{ width:11px; height:11px; vertical-align:-0.1em; stroke-width:2.2; }
.dc-header .dchev .ic{ width:12px; height:12px; vertical-align:-0.1em; }
/* YAML 있는(실행가능) Technique — ID 만 빨간색(점 ● 은 제외) */
.tech-opt.has-yaml b{ color:var(--bad, #e5534b); font-weight:700; }
/* 업로드 결과(SQLite) 보유 Technique — 배지만(좌측바 제거) */
.tech-opt .data-mark{ font-style:normal; font-size:9px; font-weight:800; letter-spacing:.02em;
  color:#052e16; background:var(--green, #4ebe7a); border-radius:4px; padding:1px 6px; flex:0 0 auto; }
/* 'VM 템플릿' 라벨 오른쪽 Proxmox 연동 상태 표기 */
.tpl-msg{ margin-left:8px; font-size:10.5px; font-weight:500; color:var(--amber); overflow-wrap:anywhere; }
/* VM 템플릿 라벨의 role 뱃지 (src/dst) */
.roletag-inline{ display:inline-block; padding:1px 6px; border-radius:4px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; }
.roletag-inline.src{ background:rgba(52,211,153,.14); color:#6ee7b7; border:1px solid rgba(52,211,153,.34); }
.roletag-inline.dst{ background:rgba(96,165,250,.14); color:#93c5fd; border:1px solid rgba(96,165,250,.34); }
.run-node{ display:inline-block; min-width:30px; font-size:9.5px; font-weight:700; text-transform:uppercase; color:#6ee7b7; margin-right:4px; }

/* ── run 진행 표시(M4-5): 상태 뱃지 · 단계 · 노드 · 로그 · 중단 ── */
.run-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.run-badge{ display:inline-block; font-size:11px; font-weight:800; border-radius:6px; padding:2px 9px; letter-spacing:.02em; }
.rb-live{ color:#fff; background:var(--primary); }
.rb-live::after{ content:'●'; margin-left:6px; font-size:8px; vertical-align:middle; animation:runpulse 1.1s ease-in-out infinite; }
@keyframes runpulse{ 0%,100%{opacity:.35;} 50%{opacity:1;} }
.rb-ok{ color:#052e16; background:var(--green); }
.rb-err{ color:#fff; background:var(--rose); }
.rb-warn{ color:#3a2400; background:#f5a524; }
.run-step{ font-size:11.5px; color:var(--mut); flex:1 1 auto; overflow-wrap:anywhere; }
/* ── 실행 큐(대기열) 목록 ── */
.run-queue-wrap{ margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.run-queue-head{ font-size:12px; font-weight:800; color:var(--mut); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.run-queue-head .dim{ font-weight:500; color:var(--dim); }
.run-queue-head #runQueueClear{ margin-left:auto; }
.run-queue-head button{ background:transparent; color:var(--mut); border:1px solid var(--line);
  border-radius:6px; font-weight:700; font-size:11.5px; line-height:1; padding:3px 8px; cursor:pointer; }
.run-queue-head #runQueueRefresh{ font-size:13px; }
.run-queue-head button:hover{ border-color:var(--primary-line); color:var(--txt); }
.rq-del{ background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:12px;
  line-height:1; padding:2px 4px; border-radius:5px; flex:0 0 auto; }
.rq-del:hover{ color:#fff; background:var(--rose); }
.rq-del-sp{ flex:0 0 auto; width:20px; }
.run-queue{ display:flex; flex-direction:column; gap:4px; max-height:340px; overflow-y:auto; }
.rq-empty{ font-size:12px; color:var(--dim); padding:10px 4px; }
.rq-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer;
  background:rgba(255,255,255,.02); border:1px solid transparent; transition:background .12s,border-color .12s; }
.rq-item:hover{ background:rgba(255,255,255,.05); }
.rq-item.rq-sel{ border-color:var(--primary); background:rgba(99,102,241,.10); }
.rq-ord{ font-size:10px; font-weight:800; color:var(--dim); min-width:14px; text-align:right; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; }
.rq-tech{ font-size:12px; font-weight:700; color:var(--fg); white-space:nowrap; }
.rq-step{ font-size:11px; color:var(--mut); flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rq-el{ font-size:10.5px; color:var(--dim); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; white-space:nowrap; }
.run-el{ font-size:11px; color:var(--dim); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; }
.run-abort{ font-size:11px; font-weight:700; color:#fff; background:var(--rose); border:none; border-radius:6px; padding:4px 11px; cursor:pointer; }
.run-abort:hover{ filter:brightness(1.1); }
.run-abort:disabled{ opacity:.6; cursor:default; }
.run-steps-row{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 3px; margin:12px 0 4px; }
.rstep{ font-size:10px; font-weight:700; border-radius:5px; padding:2px 7px; letter-spacing:.02em; }
.rstep.rs-pending, .rstep.rs-idle{ color:var(--dim); background:rgba(255,255,255,.04); }
.rstep.rs-done{ color:#6ee7b7; background:rgba(52,211,153,.12); }
.rstep.rs-active{ color:#fff; background:var(--primary); }
.rs-arrow{ color:var(--dim); font-style:normal; font-size:10px; }
.run-id{ font-size:10.5px; overflow-wrap:anywhere; }
table.run-nodes{ width:100%; border-collapse:collapse; margin:12px 0 2px; font-size:11px; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; }
table.run-nodes th{ text-align:left; color:var(--dim); font-weight:600; padding:3px 6px; border-bottom:1px solid var(--line); }
table.run-nodes td{ padding:3px 6px; color:var(--mut); border-bottom:1px solid rgba(255,255,255,.04); }
table.run-nodes td.rn-ok{ text-align:center; color:var(--txt); }
.run-err{ margin-top:12px; background:rgba(249,101,101,.10); border-left:3px solid var(--rose); padding:9px 12px; border-radius:0 8px 8px 0; font-size:11.5px; color:#fca5a5; overflow-wrap:anywhere; }
.run-arr{ margin-top:10px; font-size:11px; color:#6ee7b7; overflow-wrap:anywhere; }
.run-log-h{ margin-top:14px; font-size:10.5px; font-weight:700; color:var(--primary-2); text-transform:uppercase; letter-spacing:.03em; }
.run-log{ margin-top:5px; max-height:160px; overflow-y:auto; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:10.5px; line-height:1.6; }
.run-log .rl{ color:var(--mut); overflow-wrap:anywhere; }
.run-log .rl-err{ color:#fca5a5; }

/* ── 모달(쿼리 정의 / 전문가 추가) ── */
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); }
.modal-card{ width:min(560px,92vw); max-height:88vh; overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.modal-head{ display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line); }
.modal-head h3{ font-size:14px; font-weight:800; }
.modal-head .x{ margin-left:auto; cursor:pointer; color:var(--dim); font-size:15px; }
.modal-head .x:hover{ color:var(--txt); }
.modal-body{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; }
.modal-body label{ font-size:11px; font-weight:700; color:var(--mut); margin-top:8px; }
.modal-body input, .modal-body textarea{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--txt); font-size:12.5px; font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; }
.modal-body input:focus, .modal-body textarea:focus{ outline:none; border-color:var(--primary); }
.modal-body input[readonly]{ opacity:.7; cursor:not-allowed; }
.modal-hint{ font-size:11px; color:var(--dim); margin-top:8px; }
.modal-err{ margin-top:8px; font-size:12px; color:var(--rose); }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--line); }
.modal-foot .go{ background:var(--grad); color:#fff; border:1px solid var(--primary-line); border-radius:8px; padding:8px 18px; font-weight:700; cursor:pointer; }
.modal-foot .ghost{ background:transparent; border:1px solid var(--line); color:var(--mut); border-radius:8px; padding:8px 16px; cursor:pointer; }
.modal-foot .ghost.danger{ margin-right:auto; color:var(--rose); border-color:rgba(249,101,101,.4); }
.modal-foot .ghost.danger:hover{ background:rgba(249,101,101,.12); }
.dc-col.expert h5 .add-expert{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--primary-2); cursor:pointer; border:1px solid var(--primary-line); border-radius:6px; padding:2px 8px; background:var(--primary-soft); }
.artifact .art-edit{ float:right; font-size:11px; color:var(--dim); cursor:pointer; padding:0 2px; }
.artifact .art-edit:hover{ color:var(--primary-2); }

/* ETW DC 안내(테스트 실행 폼) — DC 에 ETW provider 유무/모호 표시 */
.etw-dc{margin:12px 0 2px;padding:9px 11px;border-radius:7px;font-size:12.5px;line-height:1.55}
.etw-dc b{font-weight:600}
.etw-dc.ok{background:rgba(70,160,110,.12);border:1px solid rgba(70,160,110,.35);color:#8bd8ac}
.etw-dc.warn{background:rgba(214,162,64,.12);border:1px solid rgba(214,162,64,.4);color:#e4bd6a}
.etw-dc.none{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);color:#98a2ad}

/* 🎯 명령 관련 행 강조 (YAML 공격 명령 키워드가 든 아티팩트 행) */
.cmd-hi-btn{background:transparent;border:1px solid rgba(255,255,255,.15);color:#c7ced8;
  border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12.5px;white-space:nowrap}
.cmd-hi-btn:disabled{opacity:.4;cursor:not-allowed}
.cmd-hi-btn.on{background:rgba(230,170,60,.18);border-color:rgba(230,170,60,.55);color:#eabf6b}
.timeline tr.cmd-match td{background:rgba(230,170,60,.14)!important}
.timeline tr.cmd-match td:first-child{box-shadow:inset 3px 0 0 #e0a83c}
/* 📜 공격 명령 모달 */
.modal-card.cmd-card{ width:min(820px,94vw); }
#cmdDlgBody{ gap:0; }
.cmd-empty{ font-size:12.5px; color:var(--dim); padding:8px 2px; }
.cmd-empty.err{ color:var(--rose); }
.cmd-tech{ font-size:12px; color:var(--mut); margin-bottom:10px; }
.cmd-proc{ border:1px solid var(--line); border-radius:10px; padding:12px 12px 8px; margin-bottom:12px; background:rgba(255,255,255,.015); }
.cmd-proc-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:800; color:var(--txt); margin-bottom:8px; }
.cmd-proc-name{ font-weight:600; color:var(--mut); font-size:12px; }
.cmd-plat{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#b3b8ff; background:var(--primary-soft); border:1px solid var(--primary-line); border-radius:5px; padding:2px 8px; }
.cmd-sec{ margin-bottom:8px; }
.cmd-sec-h{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.cmd-kind{ font-size:11px; font-weight:800; color:var(--mut); }
.cmd-exec{ font-size:10.5px; color:var(--dim); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;
  border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
.cmd-pre{ margin:0; background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; overflow-x:auto; }
.cmd-pre code{ font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:12px; line-height:1.5;
  color:#d7dde6; white-space:pre; }
.cmd-inputs{ font-size:11px; color:var(--dim); margin-top:6px; }
.cmd-inputs code{ font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; color:var(--mut); }
/* 📖 사용설명서 모달 */
.modal-card.help-card{ width:min(920px,95vw); }
.help-body{ gap:0; }
.help-intro{ font-size:12.5px; color:var(--mut); line-height:1.6; margin:0 0 14px;
  padding:10px 12px; background:rgba(255,255,255,.03); border-radius:8px; border:1px solid var(--line); }
.help-sec{ margin-bottom:14px; }
.help-sec h4{ font-size:13px; font-weight:800; color:var(--txt); margin:0 0 6px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.help-loc{ font-size:10.5px; font-weight:700; color:#7dd3fc; background:rgba(56,189,248,.12);
  border-radius:5px; padding:2px 8px; }
.help-sec ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; }
.help-sec li{ font-size:12px; color:var(--mut); line-height:1.55; }
.help-sec li b{ color:var(--txt); font-weight:700; }
.help-note{ display:inline-block; margin-top:3px; font-size:10.5px; font-weight:700; color:#eabf6b;
  background:rgba(230,170,60,.12); border:1px solid rgba(230,170,60,.35); border-radius:5px; padding:2px 8px; }
.help-body code{ font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; font-size:11px; color:#d7dde6;
  background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.help-body .kbd{ font-size:11px; font-weight:700; color:var(--txt); background:rgba(255,255,255,.06);
  border:1px solid var(--line); border-radius:5px; padding:1px 7px; white-space:nowrap; }
.help-admin h4{ }
.help-badge{ font-size:10px; font-weight:800; color:#3a2400; background:#f5a524;
  border-radius:5px; padding:2px 8px; }
.help-tip{ font-size:12px; color:var(--mut); line-height:1.6; margin-top:6px;
  padding:10px 12px; background:rgba(245,165,36,.08); border:1px solid rgba(245,165,36,.25);
  border-radius:8px; }
.help-tip b{ color:var(--txt); }