/* twin-poc-industry.css — Industry 디자인 시스템 오버라이드
   사용: twin-poc.html <head>의 기존 <style> 뒤에
     <link rel="stylesheet" href="/static/twin-poc-industry.css">
   Barlow / Barlow Condensed 는 아래 @import 로 받는다 (오프라인이면 폰트 파일을 /static/fonts 에 두고 @font-face 로 교체).
   원칙: 화면 크롬은 무채색 램프만 쓰고, 색은 이상 상태에만 쓴다 (ISA-101 색 예산).
         스틸 액센트가 남는 자리는 네 가지 — 주 동작 버튼(accent-700), 활성 탭·뷰 밑줄,
         키보드 포커스 링, 텍스트 선택.
         상태: 정상 = 외곽선(무채색), 주의 = 호박 면색, 경고 = 적 면색. 면색 위 글자는 전폭 잉크.
         모서리 0, 헤어라인 테두리, 헤딩은 Condensed. */
/* 자가 호스팅 - 온프레미스는 인터넷이 없다고 가정한다. Google Fonts @import 를 쓰면
   오프라인에서 표제가 system-ui 로 떨어져 화면 인상이 통째로 달라진다.
   라틴 서브셋 10페이스 178KB, 한글은 Malgun Gothic 폴백이 그린다. */
@import url('/static/fonts/barlow.css');

:root {
  --color-bg:#f2f2f3; --color-surface:#e9e9ea; --color-text:#1d1f20; --color-accent:#5980a6;
  --color-divider:color-mix(in srgb,#1d1f20 16%,transparent);
  --color-neutral-100:#f5f5f8; --color-neutral-200:#e7e7ea; --color-neutral-300:#d4d4d7; --color-neutral-400:#b7b7ba;
  --color-neutral-500:#98989b; --color-neutral-600:#7a7a7d; --color-neutral-700:#5d5d60; --color-neutral-800:#424244; --color-neutral-900:#2b2b2d;
  --color-accent-100:#eef6ff; --color-accent-200:#d6ebff; --color-accent-300:#b5d9fd; --color-accent-400:#94bce3;
  --color-accent-500:#749dc4; --color-accent-600:#597ea3; --color-accent-700:#416180; --color-accent-800:#2c455d; --color-accent-900:#1d2d3d;
  --font-heading:"Barlow Condensed",system-ui,sans-serif; --font-body:"Barlow","Malgun Gothic",system-ui,sans-serif;
  --shadow-md:0 3px 10px color-mix(in srgb,#2b2b2d 16%,transparent); --shadow-lg:0 12px 32px color-mix(in srgb,#2b2b2d 22%,transparent);

  /* 기존 변수 재매핑 — 나머지 규칙이 그대로 무채색 톤을 탄다 */
  --bg:var(--color-bg); --panel:var(--color-bg); --card:var(--color-bg); --card-line:var(--color-divider);
  --line:var(--color-divider); --ink:var(--color-text); --tx:var(--color-text); --sub:var(--color-neutral-700); --mut:var(--color-neutral-500);
  --head:var(--color-neutral-900); --head-tx:var(--color-bg);
  /* 상태색 — 사내 알람 팔레트. 표준은 색의 *의미*만 정하고 색상값은 정하지 않는다.
     의미 매핑: IEC 60073 — 적 = 즉시 조치 필요, 황 = 이상/주의.
     정상을 무채색으로 두는 것은 IEC 60073(정상 = 녹)이 아니라 ISA-101 / EEMUA 191의
       "무채색 기반 화면, 색 예산은 이상 상태에만" 원칙. 물리 표시등이라면 녹색이 맞다.
     ANSI Z535 / ISO 3864 안전색은 인쇄·표지용 색측정이므로 화면에 그대로 쓰지 않는다.
     값은 이 배경(#f2f2f3)에서 대비를 실측해 정함:
       칩/인디케이터 면색 --st-warn 2.0:1, --st-bad 5.0:1 → 면색은 도형 전용
       본문·수치 잉크 --st-warn-ink 4.9:1, --st-bad-ink 5.8:1 → 텍스트는 잉크색만 사용
     색은 유일한 단서가 아니다 — 칩 글자·좌측 룰·심각도 정렬이 함께 부호화한다
     (ISA-101 중복 부호화, ISA-18.2 우선순위 구분 요구). */
  --st-ok:var(--color-neutral-300);
  --st-warn:#e0a000; --st-warn-tx:#2b2003; --st-warn-ink:#8a6300; --st-warn-soft:#f8f3e6; --st-warn-line:#d9a24a;
  --st-bad:#c62828;  --st-bad-tx:#ffffff;  --st-bad-ink:#b81f1f;  --st-bad-soft:#fbecec;  --st-bad-line:#d3a5a0;
  --warn:var(--st-warn-ink); --warn-bg:var(--st-warn); --bad:var(--st-bad-ink); --bad-bg:var(--st-bad);
}
body { font-family:var(--font-body); font-size:13px; }
h1,h2,h3,h4,.rname,.rval,.metric b,#brand b,#nav button,#drawer-head,.wb-tabs button,.sig-tag,#ic-bar>b,#rp-bar>b,.ic-h>b,.rp-h,.rp-tile .rt-h b,.rt-m b,.sum b,#inbox-head h1,.ic-row .ic-rn b,.ic-kv b,.ic-num,.rp-fact b,.cstat b,.acard .hl,#chat-head
  { font-family:var(--font-heading); font-weight:600; letter-spacing:0; }
b,strong { font-weight:600; }
[class],[id] { border-radius:0 !important; }         /* 모서리 0 — 블루프린트 */
::selection { background:color-mix(in srgb,var(--color-accent) 30%,transparent); }
:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
::-webkit-scrollbar-thumb { background:var(--color-neutral-300); border-color:var(--color-bg); }

/* ── 상단 바: neutral-900 필드. 액센트는 활성 밑줄에만 ── */
#topbar { height:52px; min-height:52px; border-bottom:0; gap:20px; padding:0 18px; }
#brand b { font-size:18px; letter-spacing:.12em; } #brand small { color:var(--color-neutral-400); }
#brand svg path { stroke:var(--color-neutral-300) !important; }   /* 4색 마크 → 단색 */
#nav { height:52px; } #nav button { font-size:15px; color:var(--color-neutral-400); border-bottom-width:2px; }
#nav button:hover { color:var(--color-bg); } #nav button.on { color:var(--color-bg); border-bottom-color:var(--color-accent-400); }
.crumb { background:transparent; border-color:var(--color-neutral-700); color:var(--color-neutral-300); } .crumb b { color:var(--color-bg); font-weight:500; } .crumb .sep { color:var(--color-neutral-500); }
#summary { gap:0; } .sum { border-color:var(--color-neutral-700); } .sum + .sum { border-left:0; }
.sum b { font-family:var(--font-heading); font-size:16px; } .sum span { color:var(--color-neutral-400); }
.sum.warn.lit { background:var(--st-warn); border-color:var(--st-warn); } .sum.warn.lit b, .sum.warn.lit span { color:var(--st-warn-tx); }
.sum.bad.lit { background:var(--st-bad); border-color:var(--st-bad); } .sum.bad.lit b, .sum.bad.lit span { color:var(--st-bad-tx); }
.sum.sel { outline:2px solid var(--color-neutral-300); }
#ctlbar { gap:0; } #ctlbar button, #ctlbar select.mode-btn { background:transparent; border-color:var(--color-neutral-700); color:var(--color-bg); font-family:var(--font-heading); font-size:13px; }
#ctlbar > * + * { border-left:0 !important; } #ctlbar button:hover { background:var(--color-neutral-800); }
#ctl-pause.paused { background:var(--st-warn); color:var(--st-warn-tx); border-color:var(--st-warn); }
#speed-seg { border-color:var(--color-neutral-700); } #speed-seg button + button { border-left:1px solid var(--color-neutral-700) !important; }
#speed-seg button.on { background:var(--color-bg); color:var(--color-neutral-900); }
#transport-badge { background:var(--st-warn); color:var(--st-warn-tx); }
#stat, #conn, #clock { color:var(--color-neutral-400); } #clock { color:var(--color-bg); }
#conn::before { border-radius:0; background:var(--color-neutral-700); } #conn.live::before { background:var(--color-neutral-300); }
#conn.dead { color:#ff9d9d; } #conn.dead::before { background:var(--st-bad); }
#stall-banner { background:var(--st-bad); color:var(--st-bad-tx); } #stall-banner.paused { background:var(--st-warn); color:var(--st-warn-tx); }
#alarm-chip { border-color:var(--color-neutral-700); color:var(--color-neutral-400); font-family:var(--font-heading); font-size:13px; }
#alarm-chip:hover { border-color:var(--color-neutral-300); color:var(--color-bg); }
#alarm-chip.lit { background:var(--st-bad); border-color:var(--st-bad); color:var(--st-bad-tx); }

/* ── 공통 세그먼트/탭/버튼 ── */
.tabs button.on, #mt-bar .seg button.on, #rp-bar .seg button.on, #view-switch button.on { background:var(--color-neutral-900); color:var(--color-bg); }
.tabs button, #mt-bar .seg button, #rp-bar .seg button, #view-switch button { background:var(--color-bg); color:var(--color-text); }
#ic-list .tabs button.on b { color:var(--color-bg); }
.rp-btn, .row-act button, #ic-acts button, .mode-btn, #rp-pop-head button, #inbox-hide { background:transparent; border-color:var(--color-divider); color:var(--color-text); font-family:var(--font-heading); font-size:14px; }
.rp-btn:hover, .row-act button:hover, #ic-acts button:hover { background:color-mix(in srgb,var(--color-text) 7%,transparent); border-color:var(--color-divider); }
#ic-acts button.primary, .wb-btns button.primary, .row-act button.wo, #onto-btn { background:var(--color-accent-700); border-color:var(--color-accent-700); color:var(--color-bg); font-family:var(--font-heading); }
#ic-acts button.primary:hover, .wb-btns button.primary:hover, .row-act button.wo:hover, #onto-btn:hover { background:var(--color-accent-800); }
.mode-btn.armed { border-color:var(--color-neutral-900); color:var(--color-neutral-900); }
#ic-search { background:var(--color-surface); border-color:var(--color-divider); font:inherit; font-size:13px; }
#ic-search:focus-visible { border-color:var(--color-accent); outline-offset:0; }

/* ── 인박스 ── */
#inbox { box-shadow:var(--shadow-md); width:340px; right:16px; top:16px; bottom:16px; }
#inbox-head h1 { font-size:18px; } #dev-count { color:var(--color-neutral-700); }
#inbox-tab { border:0; letter-spacing:.08em; } #inbox-tab b { color:var(--st-warn); }
.fleet-divider { color:var(--color-neutral-700); }
.row { border-left-color:var(--color-neutral-300); background:transparent; }         /* 정상 = 회색 헤어라인 */
.row.warn { border-left-color:var(--st-warn); } .row.bad { border-left-color:var(--st-bad); }
.row:hover .row-main { background:color-mix(in srgb,var(--color-neutral-900) 8%,transparent); }
.row.open, .row.open .row-main { background:var(--color-bg); } .row.bad.open .row-main { background:var(--st-bad-soft); }
.row-main { height:42px; gap:10px; } .row-main .rname { font-size:15px; width:58px; }
.chip { font-size:11px; padding:0 7px; border:1px solid var(--color-neutral-400); color:var(--color-neutral-700); font-weight:400; }
.row.warn .chip { background:var(--st-warn); border-color:var(--st-warn); color:var(--st-warn-tx); font-family:var(--font-heading); font-weight:600; }
.row.bad .chip { background:var(--st-bad); border-color:var(--st-bad); color:var(--st-bad-tx); font-family:var(--font-heading); font-weight:600; }
.rval { font-size:15px; } .metric b { font-size:18px; }
.row.bad .metric b.k-score { color:var(--st-bad-ink); } .row.warn .metric b.k-score { color:var(--st-warn-ink); }
.row-x { background:var(--color-bg); }
.trend { border-color:var(--color-divider); background:var(--color-bg); }
.hint { background:var(--st-bad-soft); border:1px solid var(--st-bad-line); color:var(--st-bad-ink); }
.diag.on { color:var(--st-bad-ink); }
#cards-cap { color:var(--color-neutral-700); }

/* ── 트윈 스테이지 ── */
#view-switch { border-color:var(--color-divider); box-shadow:none; } #view-switch button { font-family:var(--font-heading); font-size:13px; padding:7px 14px; }
#load-cover .mark path { stroke:var(--color-neutral-700) !important; }
#load-cover .bar { background:var(--color-neutral-300); } #load-cover .bar i { background:var(--color-neutral-900); }
#load-cover h2 { font-size:22px; } #load-cover.fail h2 { color:var(--color-neutral-900); }
.spin { background:conic-gradient(var(--color-neutral-900) 0 25%, var(--color-neutral-700) 0 50%, var(--color-neutral-500) 0 75%, var(--color-neutral-300) 0); }
.stage-cap { border-color:var(--color-divider); }
#mt-bar { background:var(--color-bg); }

/* ── 진단 워크벤치 시트: 헤더는 밝게, 상단 2px 무채색 룰 ── */
#drawer { border-top:2px solid var(--color-neutral-900); box-shadow:var(--shadow-lg); }
#drawer-head { background:var(--color-bg); color:var(--color-text); border-bottom:1px solid var(--color-divider); padding:12px 18px; font-size:22px; }
#drawer-head b { color:var(--color-neutral-700); margin-left:10px; }
.wb-btns button { color:var(--color-text); border-color:var(--color-divider); font-family:var(--font-heading); font-size:14px; padding:7px 13px; }
.wb-btns button:hover { color:var(--color-text); border-color:var(--color-divider); background:color-mix(in srgb,var(--color-text) 7%,transparent); }
.wb-tabs { padding:0 18px; } .wb-tabs button { font-size:15px; padding:10px 14px 8px; border-bottom-width:2px; } .wb-tabs button.on { border-bottom-color:var(--color-accent); }
.wb-tabs button i { font-family:var(--font-body); font-weight:400; }
#sig-strip, #gf-strip { background:var(--color-bg); } #wb-pane-signal #sig-strip { gap:24px; padding:24px; }
.sig-tag { font-size:14px; } .sig-tag b { color:var(--st-warn-ink); } .sig-tag i { font-family:var(--font-body); }
.sig-box canvas, #gf-strip .gf-box, .trend, #rp-tl, .rp-frames canvas { background:var(--color-bg); border-color:var(--color-divider); }
.sig-wait { background:var(--color-surface); animation:none; } .sig-wait.late { background:var(--st-warn-soft); color:var(--st-warn-ink); }
#drawer-sum { background:var(--color-bg); border-right:1px solid var(--color-divider); }
#wb-hist-head { background:var(--color-bg); }

/* ── 지식 그래프 ── */
#ic-wrap, #rp-wrap { padding:20px 24px 24px; gap:16px; } #ic-body, #rp-body { gap:24px; }
#ic-bar > b, #rp-bar > b { font-size:22px; }
#ic-list, #ic-center, #ic-side, #rp-side, .rp-tile, #rp-pop-card, .rp-fact { background:transparent; border-color:var(--color-divider); }
#ic-list { width:320px; } #ic-side { width:380px; }
.ic-h > b, .rp-h { font-size:17px; }
.ic-row { border-left-color:var(--color-neutral-300); } .ic-row:hover { background:color-mix(in srgb,var(--color-neutral-900) 8%,transparent); }
.ic-row.on { background:var(--color-neutral-100); border-left-color:var(--color-neutral-900); }
.ic-row .dot { border-radius:0; background:var(--st-ok); } .ic-row.warn .dot { background:var(--st-warn); } .ic-row.bad .dot { background:var(--st-bad); }
.ic-row .ic-rn b { font-size:15px; } .ic-row em.warn { color:var(--st-warn-ink); } .ic-row em.bad { color:var(--st-bad-ink); }
#ic-title .ic-chip { background:transparent; border:1px solid var(--color-neutral-400); color:var(--color-neutral-700); }
#ic-title .ic-chip.warn { background:var(--st-warn); border-color:var(--st-warn); color:var(--st-warn-tx); }
#ic-title .ic-chip.bad { background:var(--st-bad); border-color:var(--st-bad); color:var(--st-bad-tx); }
#ic-title .ic-chip.closed { background:transparent; border-color:var(--color-neutral-300); color:var(--color-neutral-700); }
#ic-canvas { background-image:linear-gradient(color-mix(in srgb,#1d1f20 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,#1d1f20 8%,transparent) 1px,transparent 1px); background-size:48px 48px; }
/* 노드: 종류별 색 → 단일 무채색. 사고만 경보 필드, 추정은 점선 */
.ic-node rect { fill:var(--color-bg); stroke:var(--color-neutral-500); stroke-width:1; rx:0; }
.ic-node .gl { fill:var(--color-neutral-700); } .ic-node .tt { fill:var(--color-text); font-family:var(--font-heading); font-weight:600; font-size:15px; } .ic-node .st { fill:var(--color-neutral-700); }
.ic-node.inc rect { fill:var(--st-bad); stroke:var(--st-bad); } .ic-node.inc .gl, .ic-node.inc .tt { fill:#fff; } .ic-node.inc .st { fill:var(--st-bad-tx); }
.ic-node.inc.closed rect { fill:var(--color-bg); stroke:var(--color-neutral-500); } .ic-node.inc.closed .gl, .ic-node.inc.closed .tt { fill:var(--color-text); } .ic-node.inc.closed .st { fill:var(--color-neutral-700); }
.ic-node.sym rect, .ic-node.cause rect, .ic-node.dev rect, .ic-node.comp rect, .ic-node.sim rect, .ic-node.act rect { fill:var(--color-bg); stroke:var(--color-neutral-500); }
.ic-node.sym .gl, .ic-node.cause .gl, .ic-node.dev .gl, .ic-node.comp .gl, .ic-node.sim .gl, .ic-node.act .gl { fill:var(--color-neutral-700); }
.ic-node.empty rect, .ic-node.inf rect { stroke-dasharray:4 3; fill:var(--color-bg); }
.ic-edge { stroke:var(--color-neutral-700); stroke-width:1.2; } .ic-edge.inf { stroke:var(--color-neutral-700); stroke-dasharray:5 4; }
.ic-el { fill:var(--color-neutral-700); stroke:var(--color-bg); } .ic-el.inf { fill:var(--color-neutral-700); }
#ic-legend .ln { border-top-color:var(--color-neutral-700); } #ic-legend .ln.inf { border-top:1.5px dashed var(--color-neutral-700); }
.ic-sec h4 { font-size:14px; } .ic-sec h4 i { font-family:var(--font-body); }
.ic-kv b { font-size:15px; } .ic-kv b.bad { color:var(--st-bad-ink); } .ic-kv b.warn { color:var(--st-warn-ink); }
.ic-badge { color:var(--color-neutral-800); background:transparent; border-color:var(--color-neutral-500); font-weight:500; }
.ic-badge.inferred { border-style:dashed; border-color:var(--color-neutral-400); } .ic-badge.extracted { border-color:var(--color-neutral-400); }
.ic-big { background:var(--color-neutral-100); border-color:var(--color-neutral-400); } .ic-num { color:var(--color-neutral-900); }
/* 회고 폼 (incident.js) — 저장 버튼의 녹색을 주 동작 액센트로 */
.ic-form input { background:var(--color-surface); border-color:var(--color-divider); color:var(--color-text); font:inherit; font-size:12.5px; }
.ic-form input:focus { border-color:var(--color-accent); outline:none; }
.ic-form label span { color:var(--color-neutral-700); }
.ic-form-acts button { background:var(--color-accent-700); border-color:var(--color-accent-700); color:var(--color-bg); font-family:var(--font-heading); font-size:14px; }
.ic-form-acts button:hover { background:var(--color-accent-800); }
.ic-form-acts span { color:var(--color-neutral-700); }
.ic-form small { color:var(--color-neutral-700); } .ic-form small b { color:var(--color-text); font-family:var(--font-heading); }
.ic-form small u { text-decoration-color:var(--color-accent); text-underline-offset:3px; }
.ic-badge.none { color:var(--color-neutral-700); border-color:var(--color-neutral-300); }
.ic-free button { flex:none; }
/* 둥근 그래프(iframe)가 기본이 됐다 — 프레임도 블루프린트 톤으로 */
#graph-frame { background:var(--color-bg); }
#ic-full.on { background:var(--color-neutral-900); border-color:var(--color-neutral-900); color:var(--color-bg); }

/* ── 리플레이 ── */
#rp-cursor b { font-family:var(--font-heading); font-size:16px; }
#rp-legend .ln { border-top-color:var(--color-neutral-700); } #rp-legend .ln.dash { border-top:1.5px dashed var(--st-bad); }
#rp-legend .dia { background:var(--st-bad); }
#rp-grid { gap:16px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.rp-tile { padding:12px 14px; border-left:3px solid var(--st-ok); }
.rp-tile.warn { border-left-color:var(--st-warn); background:var(--st-warn-soft); }
.rp-tile.bad { border-left-color:var(--st-bad); background:var(--st-bad-soft); }
.rp-tile .rt-h b { font-size:16px; } .rt-m b { font-size:18px; }
.rp-tile .rt-run::before { border-radius:0; background:var(--color-neutral-500); } .rp-tile.stopped .rt-run::before { background:var(--color-neutral-300); }
.rp-ev.now { background:var(--color-neutral-100); } .rp-ev:hover { background:color-mix(in srgb,var(--color-neutral-900) 8%,transparent); }
.rp-ev .d { font-family:var(--font-heading); } .rp-ev.bad .m { color:var(--st-bad-ink); } .rp-ev.warn .m { color:var(--st-warn-ink); font-weight:500; }
#rp-pop:not([hidden]) { background:color-mix(in srgb,#2b2b2d 50%,transparent); }
#rp-pop-card { background:var(--color-bg); box-shadow:var(--shadow-lg); }
.rp-fact.bad b { color:var(--st-bad-ink); } .rp-fact.warn b { color:var(--st-warn-ink); }

/* ── AI 어시스턴트: neutral-900 다크 필드 ── */
#chat-toggle { border:0; background:var(--color-neutral-900); box-shadow:var(--shadow-md); width:48px; height:48px; }
#chat-toggle:hover { transform:none; box-shadow:var(--shadow-lg); } #chat-toggle:hover svg .mark { animation:none; }
#chat-toggle svg path, #chat-head svg path, #chat-welcome svg path { stroke:var(--color-neutral-300) !important; }
#chat-panel { width:400px; height:640px; background:var(--color-neutral-900); border:1px solid var(--color-neutral-900); box-shadow:var(--shadow-lg); color:var(--color-bg); }
#chat-head { border-bottom-color:var(--color-neutral-800); font-size:17px; letter-spacing:.06em; color:var(--color-bg); } #chat-head small { color:var(--color-neutral-400); letter-spacing:.06em; text-transform:uppercase; }
#chat-reset { border-color:var(--color-neutral-700); color:var(--color-neutral-300); } #chat-reset:hover { color:var(--color-bg); border-color:var(--color-neutral-400); }
#chat-welcome h2 { color:var(--color-bg); font-size:18px; } #chat-welcome p { color:var(--color-neutral-400); }
#chat-msgs { scrollbar-color:var(--color-neutral-700) transparent; } #chat-msgs::-webkit-scrollbar-thumb { background:var(--color-neutral-700); border-color:var(--color-neutral-900); }
.sugg { border-color:var(--color-neutral-700); color:var(--color-neutral-200); } .sugg:hover { background:var(--color-neutral-800); } .sugg svg { stroke:var(--color-neutral-400); }
.msg.user { background:var(--color-neutral-700); color:var(--color-bg); } .msg.bot { background:var(--color-neutral-800); color:var(--color-neutral-100); }
.msg.bot.err { border-left:0; border:1px solid #e57373; color:#ff9d9d; }
.msg.typing i { background:var(--color-neutral-400); border-radius:0; }
#chat-ctx { background:var(--color-neutral-800); color:var(--color-neutral-300); } #chat-ctx b { color:var(--color-bg); } #chat-ctx button { color:var(--color-neutral-500); } #chat-ctx button:hover { color:var(--color-bg); }
#chat-form { border-top-color:var(--color-neutral-800); }
#ask-in { background:transparent; border-color:var(--color-neutral-700); color:var(--color-bg); } #ask-in::placeholder { color:var(--color-neutral-500); } #ask-in:focus { border-color:var(--color-neutral-300); }
#ask-btn { background:var(--color-bg); color:var(--color-neutral-900); border-color:var(--color-bg); font-family:var(--font-heading); font-size:13px; } #ask-btn:hover { background:var(--color-neutral-200); }
#think-btn, #agent-btn { background:transparent; border-color:var(--color-neutral-700); color:var(--color-neutral-400); }
#think-btn.on, #agent-btn.on { background:var(--color-neutral-700); border-color:var(--color-neutral-500); color:var(--color-bg); }
#chat-form.rec #ask-in { border-color:var(--color-neutral-300); } #chat-form.rec #ask-btn { background:var(--color-neutral-300); border-color:var(--color-neutral-300); color:var(--color-neutral-900); }
#chat-foot { color:var(--color-neutral-500); }
.trace, .acard, .step, .csum, .cstat, .cmore, .step-pre, .cf-v { background:transparent; border-color:var(--color-neutral-700); }
.trace-ln { color:var(--color-neutral-300); } .trace-ln::before { color:var(--color-neutral-300); }
.acard .no { border-radius:0; background:transparent; border:1px solid var(--color-neutral-400); color:var(--color-bg); }
.acard.confirm .no { background:var(--color-neutral-300); color:var(--color-neutral-900); border-color:var(--color-neutral-300); } .acard.confirm { border-color:var(--color-neutral-400); }
.acard .tt { color:var(--color-neutral-400); } .acard .hl { color:var(--color-bg); font-size:14px; } .acard .sub { color:var(--color-neutral-300); }
.ctable th { color:var(--color-neutral-400); border-bottom-color:var(--color-neutral-700); } .ctable td { color:var(--color-neutral-100); border-bottom-color:var(--color-neutral-800); } .ctable tr.dim td { color:var(--color-neutral-500); }
.srcb, .srcb.pm, .srcb.lib, .srcb.syn, .srcb.none { color:var(--color-neutral-300); border-color:var(--color-neutral-500); } .srcb.syn, .srcb.none { border-style:dashed; }
.cmore { color:var(--color-neutral-300); } .cmore:hover { background:var(--color-neutral-800); color:var(--color-bg); }
.cstat .lab { color:var(--color-neutral-400); }
.cstat.ok, .cstat.warn, .cstat.bad { background:transparent; }
.cstat.ok { border-color:var(--color-neutral-700); } .cstat.ok b { color:var(--color-bg); } .cstat.ok .badge { background:transparent; border:1px solid var(--color-neutral-500); color:var(--color-neutral-300); }
.cstat.warn { border-color:#8a6300; } .cstat.warn b { color:#f0a500; } .cstat.warn .badge { background:var(--st-warn); color:var(--st-warn-tx); }
.cstat.bad { border-color:#8e2f2f; } .cstat.bad b { color:#ff6b6b; } .cstat.bad .badge { background:var(--st-bad); color:var(--st-bad-tx); }
.cstat.na b { color:var(--color-neutral-500); } .cstat .badge { border-radius:0; }
.csum { background:var(--color-neutral-800); border-color:var(--color-neutral-800); } .csum-tx { color:var(--color-neutral-100); }
.cwork { background:var(--color-bg); color:var(--color-neutral-900); font-family:var(--font-heading); font-size:12px; } .cwork:hover { background:var(--color-neutral-200); }
.cwork.alt { background:transparent; border:1px solid var(--color-neutral-400); color:var(--color-bg); } .cwork.alt:hover { background:var(--color-neutral-800); }
.step-fn { color:var(--color-neutral-100); } .step-fn .dot { border-radius:0; background:var(--color-neutral-300); }
.step.ok .dot { background:var(--color-neutral-300); } .step.bad .dot { background:#ff6b6b; } .step.note .dot { background:var(--color-neutral-500); } .step.note b { color:var(--color-neutral-400); }
.step-fn code { color:var(--color-neutral-300); } .step-res { color:var(--color-neutral-400); } .step-res::before { color:var(--color-neutral-500); } .step-res:hover { color:var(--color-bg); }
.step-pre { color:var(--color-neutral-200); } .cf-k { color:var(--color-neutral-400); } .cf-v { color:var(--color-bg); } .cf-v:focus { border-color:var(--color-neutral-300); } .cf-res { color:var(--color-neutral-300); }
.reason-h { color:var(--color-neutral-400); } .reason-h:hover { color:var(--color-bg); } .reason-b { color:var(--color-neutral-300); border-left-color:var(--color-neutral-700); }
.msg.bot.agent .atext { background:var(--color-neutral-800); color:var(--color-neutral-100); }

/* ── 저널 · 상태 바 (원본 CSS 뒷부분의 #journal/#statusbar 규칙을 덮는다) ── */
#journal { border-top:1px solid var(--color-divider); background:var(--color-bg); }
#journal-bar { background:var(--color-bg); color:var(--color-text); }
/* 저널 심각도 — 색 + 굵기 + 라벨 3중 부호화 */
#journal-body .jrow.bad, #journal-latest.bad { color:var(--st-bad-ink); font-weight:600; }
#journal-body .jrow.warn, #journal-latest.warn { color:var(--st-warn-ink); } #journal-bar .jtitle { font-family:var(--font-heading); font-weight:600; font-size:13px; }
#statusbar { background:var(--color-neutral-900); color:var(--color-neutral-400); font-size:11px; } #statusbar b { color:var(--color-bg); font-weight:500; }

/* ── ① 상단바 다이어트 — 시뮬 조작·처리량이 스테이지 안으로 내려왔다 ──
   헤더에 있을 때는 어두운 바닥이라 글자가 밝았다. 밝은 스테이지로 내려왔으니
   글자색을 뒤집지 않으면 흰 글자가 흰 바닥에 얹힌다. */
/* z-index 를 주지 않는다 - 트윈은 바닥 레이어이고 다른 화면(.stage)이 z-index:20 으로
   그 위를 덮는다. 22 로 올리면 공정 지표·리플레이 화면 위에 시뮬 조작이 떠 있게 된다.
   #view-switch 와 같은 규칙(자동 스택)을 따른다. */
#ctlbar { position:absolute; left:14px; top:62px; gap:0;
          background:var(--color-bg); border:1px solid var(--color-divider); }
#ctlbar .ctl-lab { font-family:var(--font-heading); font-weight:600; font-size:11px;
                   letter-spacing:.1em; color:var(--color-neutral-700);
                   padding:0 10px; white-space:nowrap; }
#ctlbar button, #ctlbar select.mode-btn { background:transparent; color:var(--color-text);
          border:0; border-left:1px solid var(--color-divider); }
#ctlbar button:hover, #ctlbar select.mode-btn:hover { background:var(--color-neutral-200); }
#speed-seg { border:0; } #speed-seg button + button { border-left:1px solid var(--color-divider); }
#speed-seg button.on { background:var(--color-neutral-900); color:var(--color-bg); }
/* 정지 상태는 데이터가 끊긴 상태다 - 주의 색을 쓰는 몇 안 되는 조작면 */
#ctl-pause.paused, #transport-badge { border-color:var(--st-warn); }

#stat { position:absolute; right:14px; bottom:12px;
        color:var(--color-neutral-700); font-variant-numeric:tabular-nums; }
/* 경로를 접을 이유가 없어졌다 - 헤더 그룹이 7개에서 5개로 줄었다 */
@media (max-width:1750px) { .crumb { display:flex; } }

/* ── ④ 저널 단일화 — 워크벤치 '경보 이력' 탭이 저널의 설비 필터로 들어왔다 ── */
#journal-bar .jf-seg { display:flex; font-family:var(--font-heading); font-weight:600;
                       font-size:11px; border:1px solid var(--color-divider); }
#journal-bar .jf-seg button { padding:2px 9px; background:transparent; color:var(--color-neutral-700);
                              border:0; border-left:1px solid var(--color-divider); cursor:pointer; }
#journal-bar .jf-seg button:first-child { border-left:0; }
#journal-bar .jf-seg button.on { background:var(--color-neutral-900); color:var(--color-bg); }
#journal-replay { margin-left:auto; }

/* 목록에서 "지금 보고 있는 설비" - 3D 의 파란 선택 테두리와 같은 뜻, 같은 색.
   심각도(좌측 룰·배경)와 겹치지 않게 왼쪽 굵은 액센트 바 + 아주 옅은 틴트만 쓴다. */
#inbox .row.active { position:relative; background:color-mix(in srgb,var(--color-accent) 8%,transparent); }
#inbox .row.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
                             background:var(--color-accent); }
#inbox .row.active .rname { color:var(--color-accent-800); font-weight:700; }

/* ── ② 워크벤치: 하단 시트 → 우측 620px 패널 ──
   시트는 height:100% 로 트윈을 완전히 덮었다. 콘텐츠 밀도 문제를 높이로 푼 것이다.
   우측 패널로 열면 3D 가 계속 보이고 시트/전체 토글이 필요 없어진다. */
#drawer { left:auto; right:0; top:0; bottom:0; width:620px; height:auto;
          border-top:0; border-left:1px solid var(--color-divider);
          transform:translateX(100%); transition:transform .28s cubic-bezier(.2,.8,.25,1);
          display:flex; flex-direction:column; }
#drawer.open { transform:none; }
/* 접기 - 닫지 않고 폭만 36px 로 줄인다. 보던 설비·탭·캡처가 유지되고 3D 가 넓어진다.
   폭 전환에는 transition 을 걸지 않는다 (레이아웃 스래시). */
/* 접힌 띠는 인박스(z-index:32)보다 위에 있어야 한다 - 안 그러면 인박스가 돌아오면서
   접기 버튼을 덮어 다시 펼 수가 없다 (9/10 실측). 인박스는 띠만큼 왼쪽으로 비킨다. */
#drawer.fold { width:36px; z-index:33; }
#drawer.fold #drawer-body,
#drawer.fold #drawer-head > span,
#drawer.fold .wb-btns > :not(#wb-fold) { display:none; }
#drawer.fold #drawer-head { flex-direction:column; padding:8px 0; justify-content:flex-start; }
#drawer.fold .wb-btns { flex-direction:column; }
#wb-fold { font-size:16px; line-height:1; }
#drawer.fold #wb-fold { transform:rotate(180deg); }
/* 620px 에 제목 + 버튼 4개는 한 줄에 안 들어간다 - 제목이 버튼 밑으로 깔려 잘렸다.
   제목 줄과 동작 줄을 나눈다 (9/10 실측). */
#drawer-head { background:var(--color-bg); color:var(--color-text);
               border-bottom:1px solid var(--color-divider);
               flex-wrap:wrap; row-gap:8px; }
#drawer-head > span { flex:1 1 100%; min-width:0; }
#drawer-head .wb-btns { flex:1 1 100%; }
#drawer-body { flex:1; min-height:0; }
/* 신호 3장은 620px 에서 2열이 좁다 → 세로 스택 */
#wb-pane-signal #sig-strip { grid-template-columns:1fr !important;
                             grid-template-rows:repeat(3,1fr) !important; }
#wb-pane-signal .sig-box:nth-child(3) { grid-column:auto; }
#gf-strip .gf-row { flex-direction:column; }
/* 사고·사례는 온톨로지만 보여준다. 620px 을 AI 브리핑과 나눠 쓰면 둘 다 못 읽고,
   브리핑 요약은 AI 어시스턴트가 더 잘한다. 상세 판독은 어차피 전용 페이지로 간다. */
#wb-row { flex-direction:column; }
#drawer-sum { display:none !important; }
#onto-frame { min-height:300px; }

/* 인박스 스트립 - 워크벤치가 열린 동안의 설비 목록 */
#inbox-strip { position:absolute; right:620px; top:0; bottom:0; width:64px; z-index:31;
               display:none; flex-direction:column; background:var(--color-bg);
               border-left:1px solid var(--color-divider);
               border-right:1px solid var(--color-divider); }
#inbox-strip.show { display:flex; }
#drawer.fold ~ #inbox-strip { display:none; }     /* 접힌 동안은 인박스가 원래 자리로 */
#inbox-strip .is-h { font-family:var(--font-heading); font-weight:600; font-size:12px;
                     text-align:center; padding:10px 0 6px;
                     border-bottom:1px solid var(--color-divider); }
#inbox-strip .is-h b { display:block; font-family:var(--font-body); font-weight:400;
                       font-size:11px; color:var(--color-neutral-700); }
#inbox-strip #is-rows { flex:1; overflow-y:auto; }
#inbox-strip .is-row { display:flex; align-items:center; justify-content:center; height:40px;
                       font-family:var(--font-heading); font-weight:600; font-size:15px;
                       font-variant-numeric:tabular-nums; cursor:pointer;
                       border-left:3px solid var(--color-neutral-300);
                       border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent); }
#inbox-strip .is-row:hover { background:var(--color-neutral-200); }
#inbox-strip .is-row.warn { border-left-color:var(--st-warn);
                            background:var(--st-warn-soft); color:var(--st-warn-ink); }
#inbox-strip .is-row.bad { border-left-color:var(--st-bad);
                           background:var(--st-bad); color:var(--st-bad-tx); }
/* 선택은 룰을 굵히지 않는다 - 좌측 룰은 심각도가 이미 쓰고 있는 채널이다.
   둘을 같은 채널에 겹치면 "굵은 회색"과 "얇은 빨강"을 견줘야 한다 (가이드 ② 규격). */
#inbox-strip .is-row.on { outline:2px solid var(--color-accent); outline-offset:-2px;
                          font-weight:700; }
#inbox-strip > button { border:0; border-top:1px solid var(--color-divider);
                        background:transparent; color:var(--color-neutral-700);
                        padding:8px 0; cursor:pointer; }
#inbox-strip > button:hover { background:var(--color-neutral-200); }
/* 인박스는 #drawer 의 형제가 아니라 #main 의 직계다 (#drawer 는 #twin-wrap 안).
   그래서 형제 선택자로는 못 닿는다 - syncInbox 가 #main 에 붙이는 클래스로 비킨다. */
#main.wb-open #inbox { right:698px; }    /* 패널 620 + 스트립 64 + 여백 */
#main.wb-fold #inbox { right:50px; }     /* 접힌 띠 36 + 여백 */

/* ③ 은 되돌렸다 (9/10) - AI 는 워크벤치 탭이 아니라 떠 있는 런처로 남는다.
   질문은 판독 흐름을 끊지 않고 아무 때나 던지는 행위라 패널 안에 갇히면 안 된다.
   팝업 자체의 스킨은 위 #chat-panel / #chat-toggle 블록이 이미 담당한다. */
