/* 관제 패널 — 서버 설정·미션·흐름 보기·운영 관리·파라미터폼
 * index.html <style> 에서 분리(2026-09-15) — 원래 1075~1168행.
 * ⚠️ 이어붙인 순서가 캐스케이드다. <link> 순서를 바꾸지 마라(tokens → fleet → cockpit → panels).
 *    scripts/test_css_split.js 가 네 파일을 이어붙여 분리 시점 원본과 바이트 동일한지 검사한다. */

  /* ===== 흐름 보기(trace) — 관측 전용 뷰. 렌더는 trace-panel.js(window.NXTrace), 다른 화면과 DOM 분리 ===== */
  #traceview{ flex:1; display:flex; min-height:0; }
  #traceview[hidden]{ display:none; }        /* [hidden] 이 #id{display:flex} 특이도를 이기게(#stage 와 같은 이유) */
  .trace-main{ flex:1; display:flex; flex-direction:column; min-height:0; min-width:0; }
  .trace-bar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:7px 12px; border-bottom:1px solid var(--line); }
  .trace-bar h2{ font-size:14px; color:var(--accent); margin:0; white-space:nowrap; }
  .trace-bar .btn{ padding:3px 9px; font-size:12px; }
  .trace-spacer{ flex:1; }
  .trace-stat{ font:11px/1.4 ui-monospace,monospace; color:var(--dim); }
  .trace-canvas-wrap{ position:relative; flex:1; min-height:0; margin:8px; border:1px solid var(--line); border-radius:6px;
    background:
      radial-gradient(circle at 30% 30%, var(--surface), var(--card2) 70%),
      repeating-linear-gradient(0deg,transparent 0 39px,color-mix(in srgb, var(--surface) 50%, transparent) 39px 40px),
      repeating-linear-gradient(90deg,transparent 0 39px,color-mix(in srgb, var(--surface) 50%, transparent) 39px 40px);
    background-size:cover, auto, auto; overflow:hidden; }
  .trace-canvas-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .trace-legend{ position:absolute; left:10px; bottom:8px; z-index:2; font-size:11px; color:var(--dim);
    background:color-mix(in srgb,var(--bg) 70%,transparent); padding:3px 8px; border-radius:5px; pointer-events:none; }
  .trace-tip{ position:absolute; z-index:3; max-width:250px; font:11px/1.4 ui-monospace,monospace; color:var(--ink);
    background:color-mix(in srgb,var(--bg) 88%,transparent); border:1px solid var(--line2); border-radius:5px;
    padding:3px 7px; pointer-events:none; word-break:break-all; }
  .trace-tip[hidden]{ display:none; }
  /* 안내(추적 꺼짐) — **에러가 아니다**: 에러색 없이 안내 톤으로만 */
  .trace-guide{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; overflow:auto;
    background:color-mix(in srgb,var(--bg) 82%,transparent); }
  .trace-guide[hidden]{ display:none; }
  .tg-in{ max-width:560px; padding:20px; }
  .tg-ic{ font-size:26px; color:var(--accent2); }
  .tg-in h3{ margin:6px 0 4px; font-size:16px; color:var(--ink); }
  .tg-sub{ margin:0 0 14px; font-size:12px; color:var(--ink2); }
  .tg-how{ border:1px solid var(--line); border-radius:8px; background:var(--card); padding:12px 14px; }
  .tg-t{ font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
  .tg-how ol{ margin:0; padding-left:18px; font-size:12px; color:var(--ink2); }
  .tg-how li{ margin-bottom:7px; }
  .tg-how pre{ margin:5px 0 0; background:var(--card2); border:1px solid var(--line); border-radius:5px; padding:7px 9px;
    font:11px/1.5 ui-monospace,monospace; color:var(--ink); overflow-x:auto; }
  .tg-dim{ color:var(--dim); }
  .tg-why{ margin-top:11px; padding-top:10px; border-top:1px solid var(--line); font-size:11px; line-height:1.6; color:var(--ink2); }
  .tg-ref{ margin-top:5px; color:var(--dim); font-family:ui-monospace,monospace; }
  .tg-net{ margin-top:10px; font:11px/1.4 ui-monospace,monospace; color:var(--dim); word-break:break-all; }
  /* 상세(엣지/노드) 사이드 */
  .trace-side{ width:340px; flex:none; border-left:1px solid var(--line); background:var(--panel); overflow:auto; padding:10px 12px; }
  .ts-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; color:var(--accent); }
  .ts-x{ margin-left:auto; background:none; border:none; color:var(--dim); font-size:12px; padding:0 2px; }
  .ts-x:hover{ color:var(--ink); }
  /* 틱/건별 배지 — 이 엣지에 타임라인이 있는지를 한 글자로 말한다(틱은 uuid 가 없어 조회 대상이 아니다) */
  .ts-badge{ font-size:10px; padding:1px 6px; border-radius:9px; border:1px solid var(--accent2); color:var(--accent2); }
  .ts-badge-tick{ border-color:var(--busy); color:var(--busy); }
  .ts-path{ font:12px/1.5 ui-monospace,monospace; color:var(--ink); overflow-wrap:anywhere; }
  .ts-ar{ color:var(--accent2); }
  .ts-topic{ font-size:11px; color:var(--dim); margin:2px 0 10px; word-break:break-all; }
  .ts-cap{ color:var(--accent2); }
  .ts-kv{ border:1px solid var(--line); border-radius:6px; background:var(--card); padding:6px 9px; }
  .ts-row{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink2); padding:2px 0; }
  .ts-row b{ color:var(--ink); font-variant-numeric:tabular-nums; }
  .ts-sub{ color:var(--dim); font-size:11px; }
  .ts-sec{ font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.5px; margin:12px 0 6px; }
  .ts-sec code{ text-transform:none; letter-spacing:0; }   /* uuid 는 대문자화하지 않는다(값 그대로 읽혀야 한다) */
  .ts-note{ font-size:11px; line-height:1.6; color:var(--dim); }
  .ts-note code, .ts-drop code, .tg-how code, .ts-sec code{ font-family:ui-monospace,monospace; color:var(--ink2); }
  /* 틱 엣지 고지 — 화면의 흐르는 점이 **재구성**이라는 사실을 숨기지 않는다 */
  .ts-tick{ margin-top:10px; border:1px solid var(--busy); border-radius:6px; padding:7px 9px; font-size:11px; color:var(--ink2); }
  .ts-tick b{ display:block; color:var(--busy); margin-bottom:4px; }
  /* 타임라인 도구줄 — uuid + 다시 받기(GET /api/trace/message/{uuid} 는 여기서만 호출된다) */
  .ts-tlbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
  .ts-tlbar code{ font:11px/1.4 ui-monospace,monospace; color:var(--ink2); }
  .ts-mini{ background:var(--card); border:1px solid var(--line); border-radius:4px; color:var(--ink2);
    font-size:11px; padding:1px 6px; cursor:pointer; }
  .ts-mini:hover{ border-color:var(--accent); color:var(--ink); }
  .ts-drop{ margin-top:10px; border:1px dashed var(--line2); border-radius:6px; padding:7px 9px; font-size:11px; color:var(--ink2); }
  .ts-drop b{ display:block; color:var(--ink); margin-bottom:4px; font-size:11px; }
  .ts-drop code{ display:inline-block; margin:1px 3px 1px 0; padding:1px 5px; background:var(--card2); border-radius:4px; }
  .ts-adj{ display:flex; flex-direction:column; gap:4px; }
  .ts-edge{ text-align:left; background:var(--card); border:1px solid var(--line); border-radius:5px; padding:4px 7px;
    font:11px/1.4 ui-monospace,monospace; color:var(--ink); word-break:break-all; }
  .ts-edge:hover{ border-color:var(--accent); }
  .ts-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:0; }
  .ts-legend2{ font-size:11px; color:var(--ink2); display:flex; flex-direction:column; gap:5px; }
  .ts-legend2 .lw{ display:inline-block; width:22px; height:5px; border-radius:3px; background:var(--ink2); margin-right:6px; vertical-align:2px; }
  .ts-legend2 .lc{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:3px; vertical-align:-1px; }
  .ts-legend2 .ld{ display:inline-block; width:22px; height:0; border-top:2px dashed var(--ink2); margin-right:6px; vertical-align:4px; }
  .ts-legend2 .lp{ display:inline-block; width:22px; height:0; border-top:3px dotted var(--accent2); margin-right:6px; vertical-align:4px; }
  /* uuid end-to-end 타임라인 — 340px 패널에 들어가야 하므로 hop 하나를 두 줄(시각·노드 / 토픽·지연·플래그)로 */
  .trace-tl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
  .trace-tl li{ font:11px/1.5 ui-monospace,monospace; border-left:2px solid var(--line2); padding:1px 0 2px 7px; }
  .trace-tl .tl-1{ display:flex; gap:6px; align-items:baseline; }
  .trace-tl .tl-2{ display:flex; gap:8px; flex-wrap:wrap; padding-left:54px; }
  .trace-tl .tl-t{ color:var(--dim); flex:none; width:48px; text-align:right; font-variant-numeric:tabular-nums; }
  .trace-tl .tl-a{ color:var(--accent2); flex:none; }
  .trace-tl .tl-n{ color:var(--ink); overflow-wrap:anywhere; }
  .trace-tl .tl-p{ color:var(--ink2); }
  .trace-tl .tl-l{ color:var(--dim); }
  .trace-tl .tl-f{ color:var(--accent2); }