/* app.css - RCS(AMR) Ver 1.1 웹 (S1)
   설계서 §4.2: CSS Custom Properties 기반 .theme-light / .theme-dark 실시간 전환.
   외부 CDN 0 - 로컬 벤더링된 Bootstrap 위에 관제실 테마를 얹는다. */

:root,
.theme-dark {
  --rcs-bg: #0d1117;
  --rcs-panel: #161b22;
  --rcs-panel-2: #1c2230;
  --rcs-border: #30363d;
  --rcs-text: #e6edf3;
  --rcs-muted: #8b949e;
  --rcs-accent: #58a6ff;
  --rcs-ok: #3fb950;
  --rcs-warn: #d29922;
  --rcs-crit: #f85149;
  --rcs-test: #a371f7;
  --rcs-shadow: rgba(0, 0, 0, .45);

  /* 좌측 콜랩서블 네비 (대표님 레퍼런스 스펙) */
  --rcs-nav-bg: var(--rcs-panel);
  --rcs-nav-text: #e6edf3;
  --rcs-nav-border: #30363d;
  --rcs-nav-chevron: #8b949e;
  --rcs-nav-hover: var(--rcs-panel-2);
  --rcs-nav-active-bg: color-mix(in srgb, var(--rcs-accent) 16%, transparent);
  --rcs-nav-active-text: #e6edf3;
  --rcs-nav-accent: var(--rcs-accent);
  --rcs-nav-shadow: rgba(0, 0, 0, .5);
}

.theme-light {
  --rcs-bg: #f6f8fa;
  --rcs-panel: #ffffff;
  --rcs-panel-2: #eef2f6;
  --rcs-border: #d0d7de;
  --rcs-text: #1f2328;
  --rcs-muted: #656d76;
  --rcs-accent: #0969da;
  --rcs-ok: #1a7f37;
  --rcs-warn: #9a6700;
  --rcs-crit: #cf222e;
  --rcs-test: #8250df;
  --rcs-shadow: rgba(140, 149, 159, .28);

  /* 좌측 콜랩서블 네비 — 레퍼런스 실측값(#FFF/#111/#E3E3E3/#7A807E) */
  --rcs-nav-bg: #ffffff;
  --rcs-nav-text: #111111;
  --rcs-nav-border: #e3e3e3;
  --rcs-nav-chevron: #7a807e;
  --rcs-nav-hover: #f6f8fa;
  --rcs-nav-active-bg: #f0f1f3;
  --rcs-nav-active-text: #111111;
  --rcs-nav-accent: var(--rcs-accent);
  --rcs-nav-shadow: rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--rcs-bg);
  color: var(--rcs-text);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  font-size: .9rem;
}

/* ---------------------------------------------------------------- navbar */
.rcs-navbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 .9rem;
  background: var(--rcs-panel);
  border-bottom: 1px solid var(--rcs-border);
  z-index: 1040;
}

.rcs-brand { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.rcs-brand .bi { color: var(--rcs-accent); }
.rcs-navbar-spacer { flex: 1 1 auto; }

.rcs-hamburger { display: none; }

.rcs-sysbadge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid var(--rcs-border); background: var(--rcs-panel-2);
  font-size: .78rem; color: var(--rcs-muted);
}
.rcs-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rcs-muted); }
.rcs-dot-ok { background: var(--rcs-ok); }
.rcs-dot-warn { background: var(--rcs-warn); }
.rcs-dot-crit { background: var(--rcs-crit); }

.rcs-theme-toggle, .rcs-hamburger {
  border: 1px solid var(--rcs-border);
  background: var(--rcs-panel-2);
  color: var(--rcs-text);
  display: inline-flex; align-items: center; gap: .35rem;
}
.rcs-theme-toggle:hover, .rcs-hamburger:hover { color: var(--rcs-accent); }

.rcs-user { display: inline-flex; align-items: center; gap: .35rem; color: var(--rcs-muted); font-size: .82rem; }

/* ---------------------------------------------------------------- layout */
.rcs-shell { display: flex; padding-top: 52px; min-height: 100vh; }

.rcs-sidebar {
  position: fixed;
  top: 52px; bottom: 0; left: 0;
  width: 283px;                      /* 레퍼런스: 측면 패널 폭 약 283px */
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--rcs-nav-bg);
  border-right: 1px solid var(--rcs-nav-border);   /* 얇은 회색선 */
  box-shadow: 1px 0 3px var(--rcs-nav-shadow);      /* 약한 그림자 */
  z-index: 1030;
}

/* 헤더: 검은 배지형 로고(27×24) + 브랜드 라벨(볼드 20px) */
.rcs-sidebar-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 12px 12px; flex: 0 0 auto;
}
.rcs-logo-badge {
  flex: 0 0 auto; width: 27px; height: 24px; border-radius: 6px;
  background: #111; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: -.5px; line-height: 1;
}
.theme-dark .rcs-logo-badge { background: #000; border: 1px solid var(--rcs-nav-border); }
.rcs-sidebar-brand .rcs-brand-label {
  font-size: 20px; font-weight: 700; color: var(--rcs-nav-text);
  letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 좌우 12px 인셋 구분선 */
.rcs-rule { border-top: 1px solid var(--rcs-nav-border); margin: 0 12px; flex: 0 0 auto; }

.rcs-stage-badge { margin-left: .1rem; }

.rcs-content { margin-left: 283px; padding: 1rem 1.25rem 3rem; flex: 1 1 auto; min-width: 0; }

.rcs-loading { color: var(--rcs-muted); padding: 2rem 0; }

.rcs-backdrop { display: none; }

/* ------------------------------------ menu (콜랩서블 그룹형, 레퍼런스 스펙) */
.rcs-menu { padding: 8px 12px 12px; flex: 1 1 auto; overflow-y: auto; }
.rcs-menu ul { list-style: none; margin: 0; padding: 0; }

/* 최상위 행: 볼드 · near-black · 16px · 행높이 36px · 쉐브론(x≈21~34) + 라벨(x≈40) */
.rcs-group-row {
  width: 100%; display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 8px 0 9px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; text-align: left;
  color: var(--rcs-nav-text); font-size: 16px; font-weight: 700;
}
.rcs-group-row:hover { background: var(--rcs-nav-hover); }
.rcs-group-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 쉐브론: 가는 스트로크 · #7A807E · 펼침=아래 V / 접힘=오른쪽 */
.rcs-chevron {
  flex: 0 0 13px; width: 13px; font-size: 13px; line-height: 1;
  color: var(--rcs-nav-chevron); transition: transform .15s ease;
}
.rcs-nav-group.open > .rcs-group-row .rcs-chevron,
.rcs-account.open > .rcs-account-head .rcs-chevron { transform: rotate(90deg); }

/* 하위 항목: 들여쓰기(라벨 x≈40) · 일반 굵기 · 14px · 행높이 29px */
.rcs-group-items { display: none; }
.rcs-nav-group.open > .rcs-group-items { display: block; }
.rcs-subitem {
  width: 100%; display: flex; align-items: center; gap: 8px;
  height: 29px; padding: 0 8px 0 28px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; text-align: left;
  color: var(--rcs-nav-text); font-size: 14px; font-weight: 400;
}
.rcs-subitem:hover { background: var(--rcs-nav-hover); }
.rcs-subitem-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 활성 항목 강조(절제된 톤): 옅은 배경 + 좌측 accent 바 + 텍스트 강조 */
.rcs-subitem.active {
  background: var(--rcs-nav-active-bg);
  color: var(--rcs-nav-active-text); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--rcs-nav-accent);
}

.rcs-menu-id {
  flex: 0 0 auto; color: var(--rcs-nav-chevron); font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 400;
}
.rcs-subitem.active .rcs-menu-id { color: var(--rcs-nav-accent); }

/* 키보드 접근성: 포커스 링 */
.rcs-group-row:focus-visible,
.rcs-subitem:focus-visible,
.rcs-account-head:focus-visible,
.rcs-account-link:focus-visible { outline: 2px solid var(--rcs-nav-accent); outline-offset: -2px; }

/* ------------------------------------ 하단 계정 섹션 (접힘) */
.rcs-sidebar-foot { flex: 0 0 auto; padding: 8px 12px 12px; }
.rcs-account-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 6px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; text-align: left;
  color: var(--rcs-nav-text); font-size: 14px; font-weight: 600;
}
.rcs-account-head:hover { background: var(--rcs-nav-hover); }
.rcs-account-name { white-space: nowrap; }
.rcs-account-role { margin-left: auto; color: var(--rcs-nav-chevron); font-weight: 400; font-size: 12px; }
.rcs-account-body { padding: 2px 6px 2px 34px; }
.rcs-account-row { display: block; font-size: 13px; color: var(--rcs-nav-chevron); padding: 3px 0; }
.rcs-account-link {
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  color: var(--rcs-nav-accent); font-size: 13px; padding: 3px 0;
}
.rcs-account-link:hover { text-decoration: underline; }
.rcs-menu-count { margin-top: 6px; font-size: 11px; color: var(--rcs-nav-chevron); }
.rcs-menu-count::before { content: "메뉴 "; }

/* ---------------------------------------------------------------- content */
.rcs-crumb { color: var(--rcs-muted); font-size: .8rem; margin-bottom: .35rem; }
.rcs-title { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 650; }
.rcs-title .screen-badge { font-size: .7rem; vertical-align: middle; margin-left: .45rem; }

.rcs-card {
  background: var(--rcs-panel);
  border: 1px solid var(--rcs-border);
  border-radius: 8px;
  padding: .85rem 1rem;
  box-shadow: 0 1px 2px var(--rcs-shadow);
  height: 100%;
}
.rcs-card h6 { color: var(--rcs-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.rcs-card .rcs-value { font-size: 1.02rem; }

.rcs-placeholder-note {
  border-left: 3px solid var(--rcs-warn);
  background: var(--rcs-panel-2);
  padding: .6rem .8rem; border-radius: 0 6px 6px 0;
  color: var(--rcs-muted); font-size: .82rem;
}

.badge.rcs-badge-ok { background: var(--rcs-ok); color: #fff; }
.badge.rcs-badge-warn { background: var(--rcs-warn); color: #111; }
.badge.rcs-badge-crit { background: var(--rcs-crit); color: #fff; }
.badge.rcs-badge-test { background: var(--rcs-test); color: #fff; }
.badge.rcs-badge-muted { background: var(--rcs-border); color: var(--rcs-text); }

.rcs-chip {
  display: inline-block; margin: .15rem .3rem .15rem 0; padding: .12rem .5rem;
  border: 1px solid var(--rcs-border); border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem;
  background: var(--rcs-panel-2); color: var(--rcs-text);
}
.rcs-chip .m { color: var(--rcs-accent); font-weight: 700; }

.rcs-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.rcs-kpi .rcs-value { font-size: 1.5rem; font-weight: 650; }

.rcs-sse-panel { display: flex; align-items: center; gap: .6rem; font-size: .82rem; }

/* ---------------------------------------------------------------- responsive */
/* ------------------------------------------------- S2 실데이터 화면 */
.rcs-context {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem .7rem; margin-bottom: .6rem; border: 1px solid var(--rcs-border);
  border-radius: 8px; background: var(--rcs-panel-2); font-size: .8rem; color: var(--rcs-muted);
}
.rcs-context-left { display: flex; align-items: center; gap: .35rem; }
.rcs-context-left strong { color: var(--rcs-text); }
.rcs-context-right { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.rcs-ctx-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem;
  border: 1px solid var(--rcs-border); border-radius: 999px; background: var(--rcs-panel); font-size: .74rem;
}
.rcs-ctx-sub { color: var(--rcs-accent); }

.rcs-toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .6rem; margin-bottom: .5rem;
  border: 1px solid var(--rcs-border); border-radius: 8px; background: var(--rcs-panel);
}
.rcs-inline { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--rcs-muted); }
.rcs-input {
  background: var(--rcs-panel-2); color: var(--rcs-text); border: 1px solid var(--rcs-border);
  border-radius: 6px; padding: .2rem .4rem; font-size: .8rem;
}
.rcs-btn {
  background: var(--rcs-panel-2); color: var(--rcs-text); border: 1px solid var(--rcs-border);
  display: inline-flex; align-items: center; gap: .3rem;
}
.rcs-btn:hover { color: var(--rcs-accent); border-color: var(--rcs-accent); }
.rcs-legend { font-size: .78rem; color: var(--rcs-muted); }
.rcs-statsline { font-size: .78rem; margin-bottom: .5rem; }

.vendor {
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .8rem;
}
.vendor::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.vendor.dot-jx::before { background: #c026d3; }
.vendor.dot-kc::before { background: #2563eb; }
.vendor.dot-other::before { background: var(--rcs-muted); }

.rcs-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rcs-table thead th {
  text-align: left; padding: .45rem .55rem; color: var(--rcs-muted); font-weight: 600;
  border-bottom: 2px solid var(--rcs-border); white-space: nowrap; background: var(--rcs-panel-2);
}
.rcs-table td { padding: .42rem .55rem; border-bottom: 1px solid var(--rcs-border); vertical-align: middle; }
.rcs-table tbody tr:hover { background: var(--rcs-panel-2); }
.rcs-table th.num, .rcs-table td.num { text-align: right; }
.rcs-table th.sortable { cursor: pointer; user-select: none; }
.rcs-table th.sortable:hover { color: var(--rcs-accent); }
.rcs-row { cursor: pointer; }
.rcs-row.selected { background: color-mix(in srgb, var(--rcs-accent) 14%, transparent); }
.rcs-table-sm { font-size: .78rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rcs-endpoint { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.rcs-badge-info { background: var(--rcs-accent); color: #fff; }

.rcs-battery { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.rcs-battery-val { font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: right; }
.rcs-battery-track { width: 44px; height: 6px; border-radius: 3px; background: var(--rcs-border); display: inline-block; overflow: hidden; }
.rcs-battery-fill { display: block; height: 100%; }
.bar-ok { background: var(--rcs-ok); } .bar-warn { background: var(--rcs-warn); } .bar-crit { background: var(--rcs-crit); }
.rcs-progress { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.rcs-progress-track { width: 60px; height: 6px; border-radius: 3px; background: var(--rcs-border); display: inline-block; overflow: hidden; }
.rcs-progress-fill { display: block; height: 100%; background: var(--rcs-accent); }
.rcs-progress-val { font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: right; }

.rcs-detail {
  margin-top: .8rem; border: 1px solid var(--rcs-border); border-radius: 8px;
  background: var(--rcs-panel); padding: .8rem .9rem;
}
.rcs-detail-empty { color: var(--rcs-muted); font-size: .84rem; }
.rcs-detail-head { display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--rcs-border); padding-bottom: .5rem; margin-bottom: .6rem; }
.rcs-detail-head h6 { margin: 0; font-size: .95rem; font-weight: 650; }
.rcs-kvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .35rem .9rem; }
.rcs-kv { display: flex; gap: .5rem; font-size: .82rem; padding: .15rem 0; border-bottom: 1px dashed var(--rcs-border); }
.rcs-kv-k { color: var(--rcs-muted); min-width: 5.5rem; flex: 0 0 auto; }
.rcs-kv-v { color: var(--rcs-text); }
.rcs-subhead { margin: .9rem 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rcs-muted); }

.rcs-steps { list-style: none; margin: 0; padding: 0; }
.rcs-step { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--rcs-border); font-size: .82rem; }
.rcs-step-seq { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--rcs-panel-2); border: 1px solid var(--rcs-border); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.rcs-step-type { font-weight: 600; min-width: 6.5rem; }
.rcs-step-meta { color: var(--rcs-muted); }
.rcs-step-time { margin-left: auto; color: var(--rcs-muted); font-variant-numeric: tabular-nums; }

.rcs-pager { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .78rem; }
.rcs-errorbox { border: 1px solid var(--rcs-crit); border-left-width: 4px; border-radius: 8px; background: var(--rcs-panel); padding: .8rem 1rem; color: var(--rcs-crit); font-size: .85rem; }
.rcs-emptybox { color: var(--rcs-muted); padding: .8rem; text-align: center; font-size: .84rem; }
.rcs-spinner { display: inline-block; width: .9rem; height: .9rem; border: 2px solid var(--rcs-border); border-top-color: var(--rcs-accent); border-radius: 50%; animation: rcs-spin .8s linear infinite; margin-right: .4rem; vertical-align: -2px; }
@keyframes rcs-spin { to { transform: rotate(360deg); } }

/* 좁은 화면(≤900px): 오버레이 사이드바 + 햄버거 */
@media (max-width: 900px) {
  .rcs-hamburger { display: inline-flex; }
  .rcs-sidebar { transform: translateX(-100%); transition: transform .18s ease-out; }
  .rcs-sidebar.show { transform: translateX(0); }
  .rcs-content { margin-left: 0; }
  .rcs-backdrop.show {
    display: block; position: fixed; inset: 52px 0 0 0;
    background: rgba(0,0,0,.45); z-index: 1025;
  }
}

/* 2026-10-05: 좌측 상단 로고(LogiAI) — 대표님 지시 */
.rcs-logo-link { display: flex; align-items: center; text-decoration: none; }
.rcs-logo-img { height: 30px; width: auto; display: block; border-radius: 4px; }
.theme-dark .rcs-logo-img { background: #fff; padding: 3px 6px; height: 30px; }
.rcs-sidebar-brand { gap: .55rem; }

/* 2026-10-05: 라이트/다크 로고 분기 (검정 배경용 로고 = 대표님 제공) */
.logo-for-dark { display: none; }
.theme-dark .logo-for-light { display: none; }
.theme-dark .logo-for-dark { display: block; }
.theme-dark .rcs-logo-img { background: transparent; padding: 0; }

/* 2026-10-05: 브랜드 텍스트 잘림 방지 (대표님 피드백) — 2줄 허용 + 로고 축소 */
.rcs-sidebar-brand { align-items: center; gap: .5rem; }
.rcs-sidebar-brand .rcs-brand-label {
  font-size: 14.5px; font-weight: 700; line-height: 1.2;
  white-space: normal; overflow-wrap: anywhere; word-break: keep-all;
  display: block; max-width: 100%;
}
.rcs-sidebar-brand .rcs-logo-link { flex: 0 0 auto; }
.rcs-logo-img { height: 40px; }
.theme-dark .rcs-logo-img { height: 40px; padding: 4px 8px; }
.rcs-brand-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--rcs-nav-muted, #8a8f98); }

/* ================= 2026-10-05: 공통 데이터 그리드 규칙 (S2 1차 배치 · 규칙 ①) =================
   모든 표 화면: 컬럼 헤더·정렬 아이콘·행 높이·zebra/hover·빈 본문 플레이스홀더·안내 셀 */
.rcs-table thead th { padding: .45rem .55rem; }
.rcs-table tbody tr { height: 34px; }
.rcs-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--rcs-panel-2) 55%, transparent); }
.rcs-table tbody tr:hover { background: var(--rcs-panel-2); }
.rcs-table tbody tr.selected,
.rcs-table tbody tr.selected:hover { background: color-mix(in srgb, var(--rcs-accent) 14%, transparent); }
.rcs-table th .rcs-sort { font-size: .68rem; color: var(--rcs-muted); margin-left: .18rem; }
.rcs-table th.sortable:hover .rcs-sort,
.rcs-table th .rcs-sort-active { color: var(--rcs-accent); }
.rcs-placeholder-row td { color: var(--rcs-muted); height: 34px; }
.rcs-dash { opacity: .3; }
.rcs-grid-notice .rcs-emptybox { padding: .5rem; }

/* 매 상 화면: 객체 개수 요약 카드 / 분포 칩 / 정책 유형 색·패턴 */
.rcs-countgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: .5rem; }
.rcs-countcard { display: flex; flex-direction: column; align-items: center; gap: .1rem;
  border: 1px solid var(--rcs-border); border-radius: 8px; background: var(--rcs-panel-2); padding: .5rem .4rem; }
.rcs-countcard-v { font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.rcs-countcard-k { font-size: .72rem; color: var(--rcs-muted); }
.rcs-chiprow { display: flex; flex-wrap: wrap; gap: .3rem; }
.rcs-pol { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .8rem; }
.rcs-pol-swatch { width: .75rem; height: .75rem; border-radius: 3px; display: inline-block; }
.rcs-pol.pol-keepout .rcs-pol-swatch { background: repeating-linear-gradient(45deg, var(--rcs-crit), var(--rcs-crit) 3px, #fff 3px, #fff 6px); }
.rcs-pol.pol-speed .rcs-pol-swatch { background: var(--rcs-warn); }
.rcs-pol.pol-oneway .rcs-pol-swatch { background: var(--rcs-accent); }
.rcs-table tr.rcs-policy-KEEPOUT td:first-child { box-shadow: inset 3px 0 0 var(--rcs-crit); }
.rcs-table tr.rcs-policy-SPEED td:first-child { box-shadow: inset 3px 0 0 var(--rcs-warn); }
.rcs-table tr.rcs-policy-ONEWAY td:first-child { box-shadow: inset 3px 0 0 var(--rcs-accent); }

/* ================= 2026-10-05: D01 대시보드 차트 (자체 SVG, 외부 CDN 0) ================= */
.rcs-donutwrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rcs-donut { flex: 0 0 auto; }
.rcs-donut-total { fill: var(--rcs-text); font-size: 1.45rem; font-weight: 700; }
.rcs-donut-sub { fill: var(--rcs-muted); font-size: .72rem; }
.rcs-legend-list { display: flex; flex-direction: column; gap: .25rem; min-width: 150px; }
.rcs-legend-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.rcs-legend-dot { width: .65rem; height: .65rem; border-radius: 50%; flex: 0 0 auto; }
.rcs-legend-k { flex: 1 1 auto; }
.rcs-legend-v { color: var(--rcs-muted); font-variant-numeric: tabular-nums; }
.rcs-legend-label { color: var(--rcs-muted); font-size: .74rem; }

.rcs-ordergrid { display: flex; flex-direction: column; gap: .6rem; }
.rcs-bars { display: flex; flex-direction: column; gap: .35rem; }
.rcs-bar-row { display: grid; grid-template-columns: 88px 1fr 44px; align-items: center; gap: .5rem; font-size: .8rem; }
.rcs-bar-label { color: var(--rcs-muted); }
.rcs-bar-track { height: 10px; background: var(--rcs-panel-2); border: 1px solid var(--rcs-border); border-radius: 5px; overflow: hidden; }
.rcs-bar-fill { display: block; height: 100%; }
.rcs-bar-fill.bar-accent { background: var(--rcs-accent); }
.rcs-bar-fill.bar-ok { background: var(--rcs-ok); }
.rcs-bar-fill.bar-crit { background: var(--rcs-crit); }
.rcs-bar-fill.bar-muted { background: var(--rcs-muted); }
.rcs-bar-val { text-align: right; font-variant-numeric: tabular-nums; }
.rcs-donebadge { border-top: 1px dashed var(--rcs-border); padding-top: .5rem; font-size: .84rem; color: var(--rcs-text); }
.rcs-donebadge .bi { color: var(--rcs-ok); }

.rcs-gauges { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-around; }
.rcs-gaugewrap { text-align: center; }
.rcs-gauge-title { font-size: .74rem; color: var(--rcs-muted); margin-bottom: .2rem; }
.rcs-gauge-val { fill: var(--rcs-text); font-size: .95rem; font-weight: 650; }
.rcs-serviceline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; font-size: .8rem; color: var(--rcs-muted); }
.rcs-svc-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .55rem; border: 1px solid var(--rcs-border);
  border-radius: 999px; background: var(--rcs-panel-2); color: var(--rcs-text); font-variant-numeric: tabular-nums; }
.rcs-svc-badge .bi { color: var(--rcs-ok); }
.rcs-svc-badge.muted .bi { color: var(--rcs-muted); }

.rcs-trendwrap { display: flex; flex-direction: column; gap: .3rem; }
.rcs-mini-empty { fill: var(--rcs-muted); font-size: 9px; }
.rcs-mini-axislabel { fill: var(--rcs-muted); font-size: 8px; }
.rcs-crit { color: var(--rcs-crit); }
.small { font-size: .76rem; }

/* 콘텐츠 최상위에 놓인 카드는 height:100% 스트레치를 받지 않도록 한다(4차 배치) */
.rcs-content > .rcs-card { height: auto; }

/* ================= 2026-10-05: 4차 배치 — 알람/통계 화면 (자체 SVG, 외부 CDN 0) ================= */
.badge.rcs-sev-error { background: #db6d28; color: #fff; }
.rcs-chart { display: block; margin-top: .2rem; }
.rcs-axislabel { fill: var(--rcs-muted); font-size: 8.5px; }
.rcs-barlabel { fill: var(--rcs-text); font-size: 9px; font-weight: 600; }
.rcs-chart-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .76rem; color: var(--rcs-muted); margin-top: .25rem; }
.rcs-chart-legend .rcs-legend-item { gap: .35rem; }
.rcs-note { border-left: 3px solid var(--rcs-warn); background: var(--rcs-panel-2); padding: .5rem .7rem; border-radius: 0 6px 6px 0; color: var(--rcs-muted); font-size: .8rem; }
.rcs-table tr.rcs-sev-CRIT td:first-child { box-shadow: inset 3px 0 0 var(--rcs-crit); }
.rcs-table tr.rcs-sev-ERROR td:first-child { box-shadow: inset 3px 0 0 #db6d28; }
.rcs-table tr.rcs-sev-WARN td:first-child { box-shadow: inset 3px 0 0 var(--rcs-warn); }
.rcs-table tr.rcs-sev-INFO td:first-child { box-shadow: inset 3px 0 0 var(--rcs-accent); }

/* ================= 2026-10-05: 배치6a — 이력·분석 H01~H04 (자체 SVG, 외부 CDN 0) ================= */
.rcs-hr { border: 0; border-top: 1px solid var(--rcs-border); margin: 1.1rem 0 .9rem; }
.rcs-toolbar .rcs-inline { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--rcs-muted); }
.rcs-toolbar button + button { margin-left: .25rem; }
.rcs-timeline { list-style: none; margin: 0; padding: .25rem 0 .25rem 1.1rem; border-left: 2px solid var(--rcs-border); }
.rcs-timeline-item { position: relative; padding: .45rem .6rem .45rem .5rem; border-radius: 6px; cursor: pointer; }
.rcs-timeline-item + .rcs-timeline-item { margin-top: .25rem; }
.rcs-timeline-item:hover { background: var(--rcs-panel-2); }
.rcs-timeline-item.rcs-timeline-active { background: var(--rcs-nav-active-bg); box-shadow: inset 3px 0 0 var(--rcs-accent); }
.rcs-timeline-dot { position: absolute; left: -1.42rem; top: .8rem; width: .62rem; height: .62rem; border-radius: 50%; background: var(--rcs-accent); border: 2px solid var(--rcs-panel); }
.rcs-timeline-item.rcs-timeline-active .rcs-timeline-dot { background: var(--rcs-ok); }
.rcs-timeline-body { display: block; }
.rcs-timeline-head { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--rcs-muted); flex-wrap: wrap; }
.rcs-timeline-line { margin-top: .15rem; font-size: .86rem; }

/* 배치6a — H01 화면 내부 탭(작업 이력 / 이벤트) */
.rcs-tabs { display: flex; gap: .25rem; list-style: none; margin: .2rem 0 .9rem; padding: 0; border-bottom: 1px solid var(--rcs-border); }
.rcs-tab button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--rcs-muted); padding: .45rem .9rem; font-size: .86rem; cursor: pointer; }
.rcs-tab button:hover { color: var(--rcs-text); }
.rcs-tab.active button { color: var(--rcs-text); border-bottom-color: var(--rcs-accent); font-weight: 600; }

/* ================= 2026-10-05: S2 ③-a 쓰기 명령 — 로봇 명령바 / ACK 버튼 / 토스트 ================= */
.rcs-cmdbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--rcs-border);
}
.rcs-cmdbar-label { font-size: .78rem; color: var(--rcs-muted); }
.rcs-cmdbar-label .bi { color: var(--rcs-accent); }
.rcs-cmd { min-width: 6.2rem; justify-content: center; }
.rcs-cmd-note { font-size: .74rem; }
.rcs-actioncell { white-space: nowrap; }
.rcs-table td.rcs-actioncell .rcs-btn { font-size: .74rem; padding: .1rem .5rem; }

.rcs-toast-host {
  position: fixed; right: 16px; bottom: 16px; z-index: 2000;
  display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, 92vw);
}
.rcs-toast {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .55rem .8rem; border-radius: 8px; font-size: .84rem;
  border: 1px solid var(--rcs-border); background: var(--rcs-panel); color: var(--rcs-text);
  box-shadow: 0 6px 18px var(--rcs-shadow);
  animation: rcs-toast-in .16s ease-out;
}
.rcs-toast .bi { flex: 0 0 auto; margin-top: .1rem; }
.rcs-toast-ok { border-left: 4px solid var(--rcs-ok); }
.rcs-toast-ok .bi { color: var(--rcs-ok); }
.rcs-toast-warn { border-left: 4px solid var(--rcs-warn); }
.rcs-toast-warn .bi { color: var(--rcs-warn); }
.rcs-toast-crit { border-left: 4px solid var(--rcs-crit); }
.rcs-toast-crit .bi { color: var(--rcs-crit); }
.rcs-toast-hide { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
@keyframes rcs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rcs-mx-y { color: var(--rcs-ok); font-weight: 700; }

/* ================= 2026-10-05: S2 ③-b 수동 작업 주입 (2.2 · SC-03) ================= */
.rcs-inject-card { margin-bottom: .9rem; }
.rcs-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .55rem .8rem; align-items: end;
}
.rcs-field { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--rcs-muted); }
.rcs-field .rcs-input { width: 100%; }
.rcs-field-action { justify-content: flex-end; }
.rcs-field-action .rcs-btn { height: 2rem; justify-content: center; }
.rcs-btn-primary { background: var(--rcs-accent); color: #fff; border-color: var(--rcs-accent); font-weight: 600; }
.rcs-btn-primary:hover { background: color-mix(in srgb, var(--rcs-accent) 82%, #000); color: #fff; border-color: var(--rcs-accent); }
.rcs-inject-result {
  margin-top: .65rem; padding: .5rem .7rem; border-radius: 6px; font-size: .82rem;
  border: 1px solid var(--rcs-border); border-left-width: 4px; background: var(--rcs-panel-2); color: var(--rcs-text);
}
.rcs-inject-idle { border-left-color: var(--rcs-muted); color: var(--rcs-muted); }
.rcs-inject-wait { border-left-color: var(--rcs-accent); }
.rcs-inject-ok { border-left-color: var(--rcs-ok); color: var(--rcs-ok); }
.rcs-inject-warn { border-left-color: var(--rcs-warn); color: var(--rcs-warn); }
.rcs-inject-crit { border-left-color: var(--rcs-crit); color: var(--rcs-crit); }

/* 2.2 수동 작업 주입 — 엑셀 양식 다운로드 / 업로드(드래그&드롭) / 행별 결과표 */
.rcs-upload-card { margin-bottom: .9rem; }
.rcs-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.rcs-upload-actions .rcs-muted { font-size: .75rem; }
.rcs-drop {
  border: 1px dashed var(--rcs-border); border-radius: 6px; padding: 14px; text-align: center;
  color: var(--rcs-muted); cursor: pointer; font-size: .8rem;
  transition: background .15s, border-color .15s;
}
.rcs-drop:hover, .rcs-drop:focus { border-color: var(--rcs-accent); outline: none; }
.rcs-drop.rcs-drop-active { border-color: var(--rcs-accent); background: color-mix(in srgb, var(--rcs-accent) 12%, transparent); }
.rcs-drop i { font-size: 1.4rem; display: block; margin-bottom: .25rem; }
.rcs-file-name { margin-top: .35rem; font-size: .78rem; color: var(--rcs-text); word-break: break-all; }
.rcs-hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.rcs-upload-table { margin-top: .5rem; }

/* ================= 2026-10-05: S2 ③-c 수동 조작 Jog (3.2 · SC-05) ================= */
.rcs-statuscard { margin-bottom: .9rem; }
.rcs-jogreadout { margin-top: .55rem; font-size: .78rem; color: var(--rcs-muted); }
.rcs-jogreadout b { color: var(--rcs-text); }
.rcs-jogpad-row { margin-bottom: .9rem; }
/* 가운데 정렬 3열: 좌 로봇 카드 · 중앙 D-pad · 우 Lift */
.rcs-jog-layout {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch;
  gap: 1rem; margin: .2rem auto 0;
}
.rcs-jog-col { flex: 1 1 0; min-width: 0; max-width: none; display: flex; flex-direction: column; }
.rcs-jog-col > .rcs-card, .rcs-jog-col > #jogControls { flex: 1 1 auto; }
.rcs-jog-col > #jogControls { display: flex; flex-direction: column; }
.rcs-jog-col > #jogControls > .rcs-card { flex: 1 1 auto; }
.rcs-dpad-card, .rcs-lift-card { display: flex; flex-direction: column; }
/* 중앙 정렬(가로·세로) + Lift 는 살짝 아래로 */
.rcs-dpad-card { align-items: center; justify-content: center; }
.rcs-lift-card { align-items: center; justify-content: center; }
.rcs-lift-card .rcs-lift { padding-top: 24px; }
.rcs-cmdchip {
  display: inline-block; padding: .1rem .4rem; border-radius: 4px;
  background: var(--rcs-panel-2); border: 1px solid var(--rcs-border); font-size: .74rem;
}
.rcs-toolbar-inline { margin-bottom: .5rem; }
.rcs-dpad {
  display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px);
  gap: .45rem; justify-content: center; margin: .3rem auto .5rem;
}
.rcs-dpad-btn {
  width: 64px; height: 64px; min-width: 56px; min-height: 56px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  line-height: 1; cursor: pointer; user-select: none; touch-action: none;
  background: var(--rcs-panel-2); color: var(--rcs-text); border: 2px solid var(--rcs-border);
}
.rcs-dpad-glyph { font-size: 1.3rem; line-height: 1; }
.rcs-dpad-label { font-size: .68rem; font-weight: 600; }
.rcs-dpad-btn:hover { color: var(--rcs-accent); border-color: var(--rcs-accent); }
.rcs-dpad-btn.pressed { background: var(--rcs-accent); color: #fff; border-color: var(--rcs-accent); transform: scale(.96); }
.rcs-dpad-btn:focus-visible { outline: 3px solid var(--rcs-accent); outline-offset: 2px; }
.rcs-dpad-btn:nth-child(1) { grid-column: 2; grid-row: 1; }
.rcs-dpad-btn:nth-child(2) { grid-column: 1; grid-row: 2; }
.rcs-dpad-btn:nth-child(3) { grid-column: 2; grid-row: 2; }
.rcs-dpad-btn:nth-child(4) { grid-column: 3; grid-row: 2; }
.rcs-dpad-btn:nth-child(5) { grid-column: 2; grid-row: 3; }
.rcs-dpad-stop { font-size: 1.2rem; color: var(--rcs-crit); border-color: var(--rcs-crit); }
.rcs-dpad-stop.pressed { background: var(--rcs-crit); border-color: var(--rcs-crit); color: #fff; }
.rcs-keyhint { text-align: center; font-size: .74rem; color: var(--rcs-muted); }
.rcs-lift { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; margin: .3rem 0 .5rem; }
.rcs-lift-btn {
  width: 100%; max-width: 220px; min-height: 56px; border-radius: 12px; cursor: pointer; touch-action: none;
  display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1rem;
  background: var(--rcs-panel-2); color: var(--rcs-text); border: 2px solid var(--rcs-border);
}
.rcs-lift-btn:hover { color: var(--rcs-accent); border-color: var(--rcs-accent); }
.rcs-lift-btn.pressed { background: var(--rcs-accent); color: #fff; border-color: var(--rcs-accent); }
.rcs-lift-hint { font-size: .72rem; }
.rcs-card-danger { border-color: color-mix(in srgb, var(--rcs-crit) 45%, var(--rcs-border)); }
/* E-STOP: 아래로 내려 가운데 정렬 + 다른 버튼과 ≥24px 간격 */
.rcs-estop-wrap { display: flex; justify-content: center; margin: 24px auto .9rem; }
.rcs-estop-card { width: 100%; max-width: 560px; text-align: center; }
.rcs-estop-card .rcs-estop-release { max-width: 420px; margin: 0 auto; }
.rcs-estop {
  width: 100%; max-width: 420px; min-height: 96px; margin: 24px auto; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  background: var(--rcs-crit); color: #fff; border: 3px solid color-mix(in srgb, var(--rcs-crit) 60%, #000);
  font-weight: 800; letter-spacing: .04em;
}
.rcs-estop .bi { font-size: 1.6rem; }
.rcs-estop span { font-size: 1.25rem; line-height: 1; }
.rcs-estop small { font-weight: 600; opacity: .9; }
.rcs-estop:hover { filter: brightness(1.08); }
.rcs-estop:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.rcs-estop-release {
  width: 100%; min-height: 44px; border-radius: 10px; cursor: pointer;
  background: var(--rcs-panel-2); color: var(--rcs-text); border: 2px solid var(--rcs-crit);
  display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .9rem;
}
.rcs-estop-release:hover { background: color-mix(in srgb, var(--rcs-crit) 16%, transparent); }
.rcs-crit-note { text-align: left; color: var(--rcs-crit); }
.rcs-btn-danger { background: var(--rcs-crit); color: #fff; border-color: var(--rcs-crit); font-weight: 600; }
.rcs-btn-danger:hover { background: color-mix(in srgb, var(--rcs-crit) 82%, #000); color: #fff; border-color: var(--rcs-crit); }
.rcs-modal-backdrop {
  position: fixed; inset: 0; z-index: 2100; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.rcs-modal-backdrop.show { display: flex; }
.rcs-modal {
  width: min(440px, 92vw); background: var(--rcs-panel); border: 1px solid var(--rcs-border);
  border-radius: 12px; padding: 1rem 1.1rem; box-shadow: 0 18px 48px var(--rcs-shadow);
}
.rcs-modal h6 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.rcs-modal-body { font-size: .88rem; color: var(--rcs-text); }
.rcs-modal-body p { margin: 0 0 .4rem; }
.rcs-modal-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .9rem; }

/* ================= 2026-10-05: SC-07 알람 및 이벤트 티커 (1.2) ================= */
.rcs-ticker { border: 1px solid var(--rcs-border); border-radius: 8px; background: var(--rcs-panel); overflow: hidden; margin-bottom: .9rem; }
.rcs-ticker-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--rcs-border); background: var(--rcs-panel-2); font-size: .84rem; }
.rcs-ticker-head .bi-broadcast { color: var(--rcs-accent); }
.rcs-live-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .5rem; border-radius: 999px; border: 1px solid var(--rcs-border); background: var(--rcs-panel); font-size: .72rem; color: var(--rcs-ok); font-weight: 600; }
.rcs-ticker-viewport { position: relative; overflow: hidden; height: 2.7rem; }
.rcs-ticker-track { display: inline-flex; align-items: center; white-space: nowrap; height: 2.7rem; padding-left: .5rem; will-change: transform; animation: rcs-ticker-scroll 36s linear infinite; }
.rcs-ticker-viewport:hover .rcs-ticker-track { animation-play-state: paused; }
.rcs-ticker-empty-mode .rcs-ticker-track { animation: none; }
.rcs-tick { display: inline-flex; align-items: center; gap: .5rem; padding: .32rem .9rem; margin-right: .3rem; border-radius: 6px; border-left: 3px solid var(--rcs-muted); background: var(--rcs-panel-2); font-size: .8rem; color: var(--rcs-text); }
.rcs-tick-sev { font-weight: 700; font-size: .7rem; letter-spacing: .02em; }
.rcs-tick-time { color: var(--rcs-muted); font-variant-numeric: tabular-nums; font-size: .74rem; }
.rcs-tick-target { color: var(--rcs-muted); font-size: .72rem; }
.rcs-tick-CRIT { border-left-color: var(--rcs-crit); }
.rcs-tick-CRIT .rcs-tick-sev { color: var(--rcs-crit); }
.rcs-tick-ERROR { border-left-color: #db6d28; }
.rcs-tick-ERROR .rcs-tick-sev { color: #db6d28; }
.rcs-tick-WARN { border-left-color: var(--rcs-warn); }
.rcs-tick-WARN .rcs-tick-sev { color: var(--rcs-warn); }
.rcs-tick-INFO { border-left-color: var(--rcs-accent); }
.rcs-tick-INFO .rcs-tick-sev { color: var(--rcs-accent); }
.rcs-ticker-empty { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem; color: var(--rcs-muted); font-size: .82rem; }
@keyframes rcs-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rcs-ticker-track { animation: none; } }

/* ==================== 메뉴 4. 맵·스테이션 (4.1 지도 뷰어 / 4.2 스테이션 관리) ==================== */
.rcs-card-topo { overflow: hidden; }
.rcs-topo { width: 100%; height: 560px; display: block; background: radial-gradient(circle at 30% 20%, var(--rcs-panel-2), var(--rcs-bg)); border: 1px solid var(--rcs-border); border-radius: 8px; }
.rcs-topo-bg { fill: none; stroke: var(--rcs-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rcs-topo-zone { stroke-width: 1; vector-effect: non-scaling-stroke; }
.rcs-topo-zone.z-storage { fill: rgba(88, 166, 255, .10); stroke: rgba(88, 166, 255, .55); }
.rcs-topo-zone.z-picking { fill: rgba(163, 113, 247, .12); stroke: rgba(163, 113, 247, .6); }
.rcs-topo-zone.z-charging { fill: rgba(63, 185, 80, .12); stroke: rgba(63, 185, 80, .6); }
.rcs-topo-zone.z-inbound { fill: rgba(210, 153, 34, .12); stroke: rgba(210, 153, 34, .6); }
.rcs-topo-zone.z-outbound { fill: rgba(248, 81, 73, .10); stroke: rgba(248, 81, 73, .5); }
.rcs-topo-zone.z-speed { fill: rgba(210, 153, 34, .10); stroke: rgba(210, 153, 34, .5); }
.rcs-topo-zone.z-forbidden { fill: rgba(248, 81, 73, .18); stroke: rgba(248, 81, 73, .8); stroke-dasharray: 6 4; }
.rcs-topo-edge { stroke: var(--rcs-muted); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rcs-topo-edge.e-connector { stroke-dasharray: 5 4; }
.rcs-topo-edge.blocked { stroke: var(--rcs-crit); stroke-dasharray: 3 3; }
.rcs-topo-arrow { fill: var(--rcs-muted); }
.rcs-topo-node { stroke: var(--rcs-panel); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rcs-topo-node.n-wp { fill: var(--rcs-muted); }
.rcs-topo-node.n-aisle { fill: #6e7681; }
.rcs-topo-node.n-station { fill: var(--rcs-accent); }
.rcs-topo-node.n-charger { fill: var(--rcs-ok); }
.rcs-topo-node.n-rack { fill: var(--rcs-warn); }
.rcs-topo-node.n-parking { fill: var(--rcs-test); }
.rcs-topo-label { fill: var(--rcs-muted); font-size: 700px; font-weight: 600; }
.rcs-topo-rack { fill: rgba(210, 153, 34, .35); stroke: var(--rcs-warn); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rcs-topo-robot { stroke: var(--rcs-panel); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rcs-topo-robot.r-moving, .rcs-topo-robot.r-navigating { fill: var(--rcs-ok); }
.rcs-topo-robot.r-idle { fill: var(--rcs-accent); }
.rcs-topo-robot.r-charging { fill: var(--rcs-warn); }
.rcs-topo-robot.r-error { fill: var(--rcs-crit); }
.rcs-topo-robot.r-offline { fill: #6e7681; }
.rcs-topo-robot.r-manual, .rcs-topo-robot.r-maintenance { fill: var(--rcs-test); }
.rcs-topo-heading { stroke: var(--rcs-text); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rcs-topo-rlabel { fill: var(--rcs-text); font-size: 620px; font-weight: 700; }
.rcs-topo-swatch { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.rcs-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.rcs-legend-title { font-weight: 600; color: var(--rcs-text); margin-left: .4rem; }
.rcs-legend-title:first-child { margin-left: 0; }
.rcs-topo-swatch.n-station { background: var(--rcs-accent); }
.rcs-topo-swatch.n-charger { background: var(--rcs-ok); }
.rcs-topo-swatch.n-wp { background: var(--rcs-muted); }
.rcs-topo-swatch.n-parking { background: var(--rcs-test); }
.rcs-topo-swatch.e-aisle { background: var(--rcs-muted); }
.rcs-topo-swatch.e-connector { background: repeating-linear-gradient(90deg, var(--rcs-muted) 0 3px, transparent 3px 6px); }
.rcs-topo-swatch.e-forward { background: var(--rcs-accent); }
.rcs-topo-swatch.z-storage { background: rgba(88, 166, 255, .45); }
.rcs-topo-swatch.z-picking { background: rgba(163, 113, 247, .5); }
.rcs-topo-swatch.z-forbidden { background: rgba(248, 81, 73, .6); }
.rcs-topo-swatch.r-moving { background: var(--rcs-ok); }
.rcs-topo-swatch.r-idle { background: var(--rcs-accent); }
.rcs-topo-swatch.r-charging { background: var(--rcs-warn); }
.rcs-topo-swatch.r-error { background: var(--rcs-crit); }
.rcs-layerbar { display: inline-flex; gap: .35rem; }
.rcs-layer.active { background: var(--rcs-accent); color: #fff; border-color: var(--rcs-accent); }
.rcs-twin { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rcs-twin-url, .rcs-twin-open { color: var(--rcs-accent); text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rcs-twin-url:hover, .rcs-twin-open:hover { text-decoration: underline; }
.rcs-twin-open { display: inline-block; padding: .4rem .6rem; border: 1px solid var(--rcs-accent); border-radius: 6px; }
.rcs-twin-embed { margin-top: .6rem; border: 1px dashed var(--rcs-border); border-radius: 8px; padding: 1.4rem .8rem; text-align: center; color: var(--rcs-muted); background: var(--rcs-panel-2); }
.rcs-twin-embed .bi { font-size: 1.6rem; display: block; margin-bottom: .3rem; }
.rcs-twin-embed-lg { padding: 3.2rem .8rem; }
/* 라벨 가독성: 배경색 헤일로(paint-order) — 외부 폰트/스크립트 없이 SVG 만으로 처리 */
.rcs-topo-label, .rcs-topo-rlabel { paint-order: stroke; stroke: var(--rcs-bg); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.rcs-joglog-card { margin-top: .9rem; }

/* ================= 2026-10-05: 3.2 Jog v3 — 대표님 피드백 ================= */
/* ④ 뷰포트 전체 다크 채움 (하단 흰 빈 블록 제거) — html 배경까지 지정해 캔버스 전체를 덮는다 */
html { background: var(--rcs-bg); }
body { min-height: 100vh; }
.rcs-content { min-height: calc(100vh - 52px); }
/* ③ 3열 균등 폭 정렬 + 우측 컬럼(리프트+요약) 채움 */
.rcs-jog-layout {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; align-items: stretch; justify-content: stretch; margin: .2rem 0 0;
}
.rcs-jog-col { display: flex; flex-direction: column; min-width: 0; max-width: none; }
.rcs-jog-col > .rcs-card, .rcs-jog-col > #jogControls { flex: 1 1 auto; }
.rcs-jog-col > #jogControls > .rcs-statuscard { flex: 1 1 auto; }
.rcs-jog-col > .rcs-lift-card { flex: 0 0 auto; }
.rcs-jogcmd-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.rcs-jogcmd-card #jogRecent { flex: 1 1 auto; }
@media (max-width: 1100px) { .rcs-jog-layout { grid-template-columns: 1fr; } }
/* ① 식별자 단일 · 배지 분리(겹침/잘림 방지) */
.rcs-detail-head { flex-wrap: wrap; row-gap: .35rem; }
.rcs-head-badges { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rcs-head-badges .vendor, .rcs-head-badges .badge { white-space: nowrap; }
.rcs-kvgrid-tight { gap: .3rem .8rem; }
/* ② E-STOP 아래·가운데 정렬 + 다른 컨트롤과 간격 확보 */
.rcs-estop-wrap { display: flex; justify-content: center; margin: 28px auto 1rem; }
.rcs-estop-wrap .rcs-estop-card { max-width: 560px; }

/* 2026-10-05: 3.2 — 2행 배치(대표님 목표) · 행1=상태+명령로그 · 행2=D-pad+Lift+E-STOP */
.rcs-jog-layout { display:flex !important; flex-wrap:wrap !important; gap:.85rem; align-items:stretch; }
.rcs-jog-layout > .rcs-jog-col:nth-child(1) { order:1; flex:0 0 calc(50% - .43rem) !important; min-width:0; }
.rcs-jog-layout > .rcs-joglog-card { order:2; flex:0 0 calc(50% - .43rem) !important; min-width:0; }
.rcs-jog-layout > .rcs-joglog-card { background:var(--rcs-card-bg, transparent); }
.rcs-jog-layout > .rcs-jog-col:nth-child(2) { order:3; flex:0 0 calc(33.333% - .57rem) !important; min-width:0; }
.rcs-jog-layout > .rcs-jog-col:nth-child(3) { order:4; flex:0 0 calc(33.333% - .57rem) !important; min-width:0; }
.rcs-jog-layout > .rcs-estop-col { order:5; flex:0 0 calc(33.333% - .57rem) !important; min-width:0; display:flex; }
.rcs-jog-layout > .rcs-estop-col > .rcs-card { flex:1 1 auto; }
@media (max-width: 1100px) { .rcs-jog-layout > .rcs-jog-col, .rcs-jog-layout > .rcs-estop-col, .rcs-jog-layout > .rcs-joglog-col { flex:1 1 320px !important; } }

/* 2026-10-05: 3.2 — 명시적 2행(대표님 목표 배치) */
.rcs-jog-row { display:flex; gap:.85rem; align-items:stretch; margin-top:.6rem; }
.rcs-jog-row > .rcs-jog-cell { min-width:0; display:flex; flex-direction:column; }
.rcs-jog-row > .rcs-jog-cell > .rcs-card { flex:1 1 auto; }
.rcs-jog-row1 > .rcs-jog-cell { flex:1 1 50%; }
.rcs-jog-row2 > .rcs-jog-cell { flex:1 1 33.3333%; }
.rcs-jog-row2 .rcs-estop { width:100%; }
@media (max-width:1100px){ .rcs-jog-row{flex-wrap:wrap} .rcs-jog-row > .rcs-jog-cell{flex:1 1 320px !important} }

/* 2026-10-05: 3.2 — 행1 첫 칸에 로봇 선택(AMR-01) + 상태 카드 */
.rcs-jog-robotcard { margin-bottom:.6rem; }
.rcs-jog-robotcard h6 { margin-bottom:.35rem; }

/* 2026-10-05: 3.2 — 행3(명령 로그 전체 폭) */
.rcs-jog-row1 > .rcs-jog-cell { flex:1 1 calc(50% - .43rem) !important; }
.rcs-jog-row3 > .rcs-jog-cell { flex:1 1 100% !important; }

/* 2026-10-05: 3.2 — 행 컨테이너를 항상 전체 폭 블록으로 강제(한 줄로 붙는 문제 방지) */
.rcs-jog-row { display:flex !important; flex-wrap:nowrap !important; width:100% !important; flex:1 1 100% !important;
  box-sizing:border-box; gap:.85rem; margin-top:.6rem; align-items:stretch; }
#content > .rcs-jog-row, .rcs-main > .rcs-jog-row, #screenBody > .rcs-jog-row { flex:1 1 100% !important; width:100% !important; }
.rcs-jog-row1 > .rcs-jog-cell { flex:1 1 calc(50% - .43rem) !important; min-width:0; }
.rcs-jog-row2 > .rcs-jog-cell { flex:1 1 calc(33.3333% - .57rem) !important; min-width:0; }
.rcs-jog-row3 > .rcs-jog-cell { flex:1 1 100% !important; min-width:0; }
@media (max-width:1100px){ .rcs-jog-row { flex-wrap:wrap !important; } .rcs-jog-row > .rcs-jog-cell { flex:1 1 320px !important; } }

/* 2026-10-05: 3.2 — 부모(.rcs-content)가 가로 flex 라 행이 붙는 문제 → 3.2 화면에서만 세로 정렬 강제 */
.rcs-content:has(> .rcs-jog-row) { display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; }
.rcs-content > .rcs-jog-row { width:100% !important; flex:0 0 auto !important; }
.rcs-content > .rcs-jog-row1 { order:1; } .rcs-content > .rcs-jog-row2 { order:2; } .rcs-content > .rcs-jog-row3 { order:3; }

/* 2026-10-05: 3.2 — 래퍼로 세로 스택 고정(부모 flex 영향 차단 · :has 미지원 브라우저 대응) */
.rcs-jog-stack { display:block !important; width:100% !important; flex:0 0 100% !important; }
.rcs-jog-stack > .rcs-jog-row { display:flex !important; width:100% !important; box-sizing:border-box; gap:.85rem; margin-top:.6rem; align-items:stretch; flex-wrap:nowrap !important; }
.rcs-jog-stack > .rcs-jog-row1 > .rcs-jog-cell { flex:1 1 calc(50% - .43rem) !important; min-width:0; }
.rcs-jog-stack > .rcs-jog-row2 > .rcs-jog-cell { flex:1 1 calc(33.3333% - .57rem) !important; min-width:0; }
.rcs-jog-stack > .rcs-jog-row3 > .rcs-jog-cell { flex:1 1 100% !important; min-width:0; }
@media (max-width:1100px){ .rcs-jog-stack > .rcs-jog-row { flex-wrap:wrap !important; } .rcs-jog-stack > .rcs-jog-row > .rcs-jog-cell { flex:1 1 320px !important; } }

/* 2026-10-05: 3.2 — 표 기반 3행(부모 flex 영향 없음) */
.rcs-jog-tbl { width:100% !important; border-collapse:separate; border-spacing:.85rem .8rem; table-layout:fixed; }
.rcs-jog-tbl > tbody > tr > td { vertical-align:top; padding:0; }
.rcs-jog-tbl .rcs-card { height:100%; box-sizing:border-box; }

/* 2026-10-05: 3.2 — 같은 행 카드 높이 균등(표 셀 전체를 채움) */
.rcs-jog-tbl > tbody > tr > td { vertical-align:top; padding:0; height:100%; }
.rcs-jog-tbl > tbody > tr > td > .rcs-card { height:100%; min-height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; }
.rcs-jog-tbl > tbody > tr > td > .rcs-card > :last-child { flex:1 1 auto; }
.rcs-jog-tbl .rcs-dpad-card > .rcs-dpad, .rcs-jog-tbl .rcs-lift-card > .rcs-lift,
.rcs-jog-tbl .rcs-estop-card > .rcs-estop { margin-top:.2rem; }

/* 2026-10-05: 3.2 — 행별 카드 최소 높이 고정(같은 행 높이 통일, 확실한 방식) */
.rcs-jog-tbl > tbody > tr:nth-child(1) > td > .rcs-card { min-height: 300px; }
.rcs-jog-tbl > tbody > tr:nth-child(2) > td > .rcs-card { min-height: 340px; }
.rcs-jog-tbl .rcs-dpad-card, .rcs-jog-tbl .rcs-lift-card, .rcs-jog-tbl .rcs-estop-card { min-height: 340px; }
.rcs-jog-tbl .rcs-dpad-card { align-items: center; justify-content: center; }
.rcs-jog-tbl .rcs-lift-card { align-items: center; justify-content: center; }
.rcs-jog-tbl .rcs-estop-card { align-items: stretch; justify-content: flex-start; }

/* 2026-10-09: 하위 메뉴 탭 */
.rcs-subtabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 .7rem; }
.rcs-subtab { border:1px solid rgba(255,255,255,.18); background:transparent; color:#cfd6e4;
  padding:.35rem .7rem; border-radius:999px; font-size:.86rem; }
.rcs-subtab.active { background:#00d1a0; border-color:#00d1a0; color:#06251f; font-weight:600; }