:root {
  --blue: #1267e8;
  --blue-dark: #06499f;
  --cyan: #21a5d8;
  --ink: #172236;
  --muted: #64748b;
  --line: #dce4ee;
  --panel: #fff;
  --bg: #f1f5f9;
  --soft: #edf4fd;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.06);

  /* 컴포넌트 높이 규격화 토큰 */
  --topbar-height: 50px;
  --header-height: 40px;
  --control-height: 30px;
  --control-height-sm: 24px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 9px;

  /* 통일 폰트 계층 (동일 레벨 객체/글씨 동일 크기) */
  --font-l1: 15px; /* Level 1 대제목: 화면명, 모달 타이틀 */
  --font-l2: 13px; /* Level 2 중제목: 섹션/패널 헤더, 툴바 타이틀 */
  --font-l3: 12px; /* Level 3 소제목: 카드명, 목록 볼드 항목 */
  --font-l4: 12px; /* Level 4 본문/컨트롤: 인풋, 버튼, 탭, 폼 라벨 */
  --font-l5: 11px; /* Level 5 메타/보조: 뱃지, 설명글, 상태 텍스트, 범례 */
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; }
button, input, select, textarea { font: inherit; }
.hidden { display: none !important; }
.panel { background: var(--panel); }

/* ==========================================================
   1. 상단 탑바 (Top Bar) - 오와 열 수직 중앙 일렬 정렬 & 슬림화
   ========================================================== */
.topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  position: relative;
  z-index: 30;
  box-sizing: border-box;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-l1, 16px);
  font-weight: 800;
  color: #074ca6;
  min-width: auto;
  white-space: nowrap;
  line-height: 1;
}
.brand span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.brand small {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1;
  font-weight: 700;
}
.brand-mark,
.environment-badge {
  display: none !important;
}

.main-nav {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.nav-btn, .admin-nav-btn {
  border: 0;
  background: transparent;
  padding: 0 14px;
  color: #475569;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: var(--font-l2);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  outline: none;
}
.nav-btn:hover, .admin-nav-btn:hover { color: var(--blue); }
.nav-btn.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  font-weight: 700;
}

.top-context {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.top-context select {
  height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: #fff;
  font-size: var(--font-l4);
  color: var(--ink);
  max-width: 180px;
}

/* 통합관제 화면에서 게이트웨이 상태, 새로고침 버튼 숨김 */
body[data-view="monitor"] #gatewayStatus,
body[data-view="monitor"] #refreshBtn,
body:not([data-view="config"]):not([data-view="scenario"]) #gatewayStatus,
body:not([data-view="config"]):not([data-view="scenario"]) #refreshBtn {
  display: none !important;
}

body[data-view="config"] #gatewayStatus,
body[data-view="scenario"] #gatewayStatus {
  display: inline-flex !important;
}

body[data-view="config"] #refreshBtn,
body[data-view="scenario"] #refreshBtn {
  display: inline-flex !important;
}
.gateway-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
  border-radius: 12px;
  padding: 0 8px;
  font-size: var(--font-l5);
  font-weight: 600;
  white-space: nowrap;
}
.gateway-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.gateway-status.error {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}
.gateway-status.error i { background: var(--amber); }
.dirty-status {
  font-size: var(--font-l5);
  color: var(--muted);
  white-space: nowrap;
}
.dirty-status.unsaved { color: #b45309; font-weight: 600; }

/* ==========================================================
   2. 버튼 및 액션 컨트롤 (크기 균형 & 오와 열 정렬)
   ========================================================== */
.btn {
  height: var(--control-height);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  cursor: pointer;
  font-size: var(--font-l4);
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn.primary:hover {
  background: #0d59cc;
  border-color: #0d59cc;
}
.btn.danger {
  color: var(--red);
  border-color: #fecaca;
  background: #fff;
}
.btn.danger:hover {
  background: #fef2f2;
  border-color: #f87171;
}
.btn.ghost { background: #fff; }
.btn.full {
  width: 100%;
  margin-top: 6px;
}
.btn.small, .btn.compact {
  height: var(--control-height-sm);
  padding: 0 7px;
  font-size: var(--font-l5);
  border-radius: 4px;
}
/* 개별 제어 버튼 그리드 및 선택(Active) 상태 표시 */
.control-grid {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 6px;
}
.control-grid .btn,
.btn.control-power,
.btn.control-occupancy {
  flex: 1;
  font-weight: 600;
  text-align: center;
  justify-content: center;
  border: 1px solid var(--line, #cbd5e1);
  background: #fff;
  color: #334155;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.control-grid .btn:hover,
.btn.control-power:hover,
.btn.control-occupancy:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.control-grid .btn.active,
.btn.control-power.active,
.btn.control-occupancy.active {
  background: var(--blue, #1267e8) !important;
  border-color: var(--blue, #1267e8) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(18, 103, 232, 0.35) !important;
}
.control-grid .btn.active:hover,
.btn.control-power.active:hover,
.btn.control-occupancy.active:hover {
  background: #0d59cc !important;
  border-color: #0d59cc !important;
  color: #ffffff !important;
}
.icon-btn {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  padding: 0;
  transition: background .15s, color .15s;
}
.icon-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.tool {
  height: var(--control-height);
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 0 8px;
  color: #475569;
  cursor: pointer;
  font-size: var(--font-l4);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.tool:hover { background: #f1f5f9; }
.tool.active {
  background: #e0edff;
  color: var(--blue);
  font-weight: 700;
  border-color: #b9d6fc;
}
.tool-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ==========================================================
   3. 폼 컨트롤 및 입력란 규격화
   ========================================================== */
.field { margin-bottom: 8px; }
.field label {
  display: block;
  font-size: var(--font-l5);
  color: #475569;
  margin-bottom: 3px;
  font-weight: 600;
  line-height: 1.3;
}
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%;
  height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0 8px;
  font-size: var(--font-l4);
  color: var(--ink);
  box-sizing: border-box;
}
.field input[type="checkbox"], .field input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.field textarea {
  height: auto;
  min-height: 52px;
  padding: 5px 8px;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.form-row.three {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.segmented {
  display: flex;
  background: #f1f5f9;
  border-radius: var(--radius-sm);
  padding: 2px;
  margin-bottom: 8px;
  gap: 2px;
  flex-wrap: nowrap;
}
.segmented button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  border-radius: 4px;
  color: #64748b;
  cursor: pointer;
  font-size: var(--font-l5);
  font-weight: 600;
  white-space: nowrap;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  transition: background .15s, color .15s;
}
.segmented button.active {
  background: #fff;
  color: #1e293b;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ==========================================================
   4. 카드 및 섹션 (일관된 여백, 테두리, 수평 정렬)
   ========================================================== */
.section-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.section-head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  box-sizing: border-box;
}
.section-head h3 {
  font-size: var(--font-l2);
  font-weight: 700;
  margin: 0;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-head .muted {
  font-size: var(--font-l5);
  font-weight: 400;
}
.section-body {
  padding: 8px 10px;
  box-sizing: border-box;
}

/* ==========================================================
   Gateway 카드 및 Code 라인 스타일
   ========================================================== */
.code-line {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: #334155;
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.35;
  box-sizing: border-box;
}
.gateway-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.gateway-actions .btn {
  height: 28px;
  font-size: 11px;
}

/* ==========================================================
   제어 이력 (History) 패널 및 카드 스타일
   ========================================================== */
.history-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.history-panel-header span {
  font-size: var(--font-l3);
  font-weight: 700;
  color: #334155;
}
.history-total {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 10px;
}
.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-item {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .15s ease;
  box-sizing: border-box;
}
.history-item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.history-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.history-action-title {
  font-size: var(--font-l3);
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-count-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.history-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.history-status-badge.accepted {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.history-status-badge.success {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.history-status-badge.error,
.history-status-badge.failed {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}
.history-item-mid {
  display: flex;
  align-items: center;
}
.history-time {
  font-size: 11px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.history-item-bot {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.history-receipt-label {
  color: #64748b;
  flex-shrink: 0;
}
.history-receipt-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 타이포그래피 공통 유틸리티 */
.eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.count {
  font-size: var(--font-l5);
  background: #edf3fb;
  padding: 1px 6px;
  border-radius: 10px;
  color: #475569;
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
}
.muted {
  color: var(--muted);
  font-size: var(--font-l5);
  line-height: 1.4;
}
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
}
.dot.online { background: var(--green); }
.dot.stopped { background: #94a3b8; }
.dot.error { background: var(--red); }
.dot.warning { background: var(--amber); }

/* ==========================================================
   5. 통합감시 화면 (Monitor View) - 그리드 오와 열 정렬
   ========================================================== */
.monitor-view {
  display: grid;
  grid-template-columns: 300px minmax(460px, 1fr) 340px;
  height: calc(100vh - var(--topbar-height));
  background: var(--bg);
}
.monitor-side {
  border-right: 1px solid var(--line);
  padding: 12px 14px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.side-heading {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
  flex: 0 0 auto;
}
.side-heading-text-wrap {
  position: relative;
}
.side-heading-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}
.btn-upload-logo {
  font-size: 10.5px;
  font-weight: 600;
  color: #0284c7;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 4px;
  padding: 1.5px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.btn-upload-logo:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
  transform: translateY(-0.5px);
}
.company-logo-wrap {
  position: relative;
  width: 100%;
}
.company-logo-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-height: 70px;
  padding: 4px 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  overflow: hidden;
  box-sizing: border-box;
}
.company-logo-container:hover {
  background: rgba(2, 132, 199, 0.05);
}
.company-logo-img {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.company-logo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.18s ease;
  backdrop-filter: blur(2px);
  border-radius: 6px;
}
.company-logo-container:hover .company-logo-overlay {
  opacity: 1;
}
.company-logo-overlay button {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  border: 0;
  transition: transform 0.12s ease;
}
.company-logo-overlay button:hover {
  transform: scale(1.05);
}
.company-logo-overlay .btn-logo-change {
  background: #ffffff;
  color: #0f172a;
}
.company-logo-overlay .btn-logo-change:hover {
  background: #f1f5f9;
}
.company-logo-overlay .btn-logo-delete {
  background: #ef4444;
  color: #ffffff;
}
.company-logo-overlay .btn-logo-delete:hover {
  background: #dc2626;
}
.side-heading h1 {
  font-size: var(--font-l1);
  margin: 2px 0 3px;
  font-weight: 700;
}
.side-heading p {
  font-size: var(--font-l5);
  color: var(--muted);
  margin: 0;
}
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0;
}
.summary-grid div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}
.summary-grid b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #0f4c9c;
  white-space: nowrap;
}
.summary-grid span {
  font-size: var(--font-l5);
  color: var(--muted);
  white-space: nowrap;
}
.mini-title {
  font-size: var(--font-l2);
  font-weight: 700;
  margin: 14px 2px 6px;
  color: #334155;
}
.monitor-device-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.monitor-device-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  min-height: 38px;
}
.monitor-device-card:hover, .monitor-device-card.selected {
  border-color: #82b2f2;
  background: #f6faff;
}
.monitor-device-card .device-icon {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.monitor-device-card b {
  display: block;
  font-size: var(--font-l3);
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.monitor-device-card small {
  display: block;
  font-size: var(--font-l5);
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.state-text {
  font-size: var(--font-l5);
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
.state-text.stopped { color: #64748b; }
.state-text.fault { color: var(--red); }
.state-text.unlinked, .state-text.checking { color: var(--amber); }

.monitor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
}
.automation-strip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.mode-strip-wrap,
.scenario-strip-wrap {
  min-width: 0;
  padding: 8px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.mode-strip-wrap {
  border-right: 1px solid var(--line);
}
.mode-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  min-height: 32px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.mode-strip-head > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.mode-strip-head .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1267e8;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}
.mode-strip-head h2 {
  font-size: var(--font-l2, 13px);
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  color: #1e293b;
}
.mode-strip-head > span {
  font-size: var(--font-l5, 11px);
  color: var(--muted, #64748b);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}
.mode-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  min-height: 38px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}
.mode-empty,
.mode-empty.compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm, 5px);
  box-sizing: border-box;
  margin: 0;
}
.mode-empty b,
.mode-empty.compact b {
  font-size: var(--font-l3, 12px);
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.mode-empty span,
.mode-empty.compact span {
  font-size: var(--font-l5, 11px);
  font-weight: 400;
  color: var(--muted, #64748b);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.scene-btn,
.scenario-monitor-btn {
  display: grid;
  grid-template-columns: 26px auto;
  gap: 6px;
  align-items: center;
  min-width: 120px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.scene-btn:hover,
.scenario-monitor-btn:hover {
  border-color: #82aff1;
  box-shadow: 0 2px 8px rgba(35,101,189,.08);
}
.scene-btn .scene-icon,
.scenario-monitor-btn .scene-icon {
  grid-row: 1/3;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: #eff6ff;
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.scenario-monitor-btn .scene-icon {
  background: #f3e8ff;
  color: #7c3aed;
}
.scene-btn b,
.scenario-monitor-btn b {
  font-size: var(--font-l3, 12px);
  font-weight: 600;
  line-height: 1.2;
  color: #1e293b;
  white-space: nowrap;
}
.scene-btn small,
.scenario-monitor-btn small {
  font-size: var(--font-l5, 11px);
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}

.monitor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg);
  height: 100%;
}
.monitor-operations {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.monitor-map-wrap {
  padding: 10px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.map-toolbar {
  display: none !important;
}
.map-toolbar-info,
.map-toolbar > div:first-child:not(.status-legend) {
  display: none !important;
}
.status-legend {
  display: none !important;
}
.status-legend span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.monitor-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  height: 100%;
  background-color: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.monitor-inspector {
  border-left: 1px solid var(--line);
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.monitor-inspector > .inspector-hero,
.monitor-inspector > .section-card {
  margin-bottom: 0;
}
.monitor-inspector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 340px;
  text-align: center;
  color: #64748b;
  padding: 32px 16px;
  box-sizing: border-box;
}
.empty-placeholder-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 260px;
}
.empty-icon-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1.5px dashed #cbd5e1;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #64748b;
  margin-bottom: 14px;
}
.empty-placeholder-box h3 {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  margin: 0 0 8px 0;
}
.empty-placeholder-box p {
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}
.empty-placeholder-box p b {
  color: #1e293b;
}

.inspector-hero {
  background: #ffffff;
  color: #1e293b;
  border-radius: var(--radius-md, 8px);
  border: 1px solid #e2e8f0;
  border-top: 3px solid #2563eb;
  padding: 12px 14px;
  position: relative;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  box-sizing: border-box;
}
.inspector-hero.roi-hero {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-top: 3px solid #2563eb;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
.inspector-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.inspector-hero-top .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #2563eb;
  text-transform: uppercase;
  line-height: 1;
}
.btn-clear-selection {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.btn-clear-selection:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
.roi-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.roi-title-row:last-child {
  margin-bottom: 2px;
}
.roi-title-row h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  line-height: 1.3;
}
.roi-title-row p {
  font-size: 11.5px;
  margin: 2px 0 0 0;
  color: #64748b;
  line-height: 1.3;
}
.roi-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  font-size: 16px;
  flex-shrink: 0;
  color: #2563eb;
}
.roi-quick-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}
.roi-quick-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
}
.roi-quick-stats span b {
  color: #0f172a;
  font-weight: 700;
  font-size: 11.5px;
}
.btn-back-to-roi {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 5px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-back-to-roi:hover {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

/* --- Section Card in Monitor Inspector --- */
.monitor-inspector .section-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  box-sizing: border-box;
}
.monitor-inspector .section-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  box-sizing: border-box;
}
.monitor-inspector .section-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.monitor-inspector .section-head .eyebrow {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
}
.monitor-inspector .section-head h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.25;
}
.monitor-inspector .section-head .count {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 2px 8px;
  line-height: 1.3;
  flex-shrink: 0;
}
.monitor-inspector .section-body {
  padding: 10px 12px;
  box-sizing: border-box;
}

/* --- Collapsible Card in Monitor Inspector --- */
.monitor-inspector .section-card .section-head {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}
.monitor-inspector .section-card .section-head:hover {
  background: #f8fafc;
}
.monitor-inspector .section-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.monitor-inspector .card-collapse-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #64748b;
  border-radius: 4px;
  transition: all 0.15s ease;
  user-select: none;
}
.monitor-inspector .section-card .section-head:hover .card-collapse-icon {
  color: #1e293b;
  background: rgba(0, 0, 0, 0.05);
}
.monitor-inspector .section-card.collapsed .section-head {
  border-bottom-color: transparent;
}
.monitor-inspector .section-card.collapsed .section-body {
  display: none;
}

/* --- Quick Control Modes --- */
.inspector-modes-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scene-btn.inspector-scene-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.scene-btn.inspector-scene-btn:hover {
  border-color: #93c5fd;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}
.inspector-scene-btn .scene-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.inspector-scene-btn .scene-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  display: block;
}
.inspector-scene-btn .scene-icon.preset-meeting {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
}
.inspector-scene-btn .scene-icon.preset-normal {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}
.inspector-scene-btn .scene-icon.preset-unused {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.inspector-scene-btn .scene-icon.preset-break {
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}
.inspector-scene-btn .scene-icon.preset-presentation {
  background: #f5f3ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}
.inspector-scene-btn .scene-icon.preset-custom {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}
.inspector-scene-btn .scene-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
  flex: 1;
}
.inspector-scene-btn .scene-info b {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.inspector-scene-btn .scene-info small {
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* --- Automation Scenarios --- */
.inspector-scenarios-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scenario-monitor-btn.inspector-scenario-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}
.scenario-monitor-btn.inspector-scenario-btn:hover {
  border-color: #c4b5fd;
  background: #fdf4ff;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.08);
}
.inspector-scenario-btn .scene-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  background: #f5f3ff;
  border: 1px solid #ede9fe;
  color: #7c3aed;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.inspector-scenario-btn .scene-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
  flex: 1;
}
.inspector-scenario-btn .scene-info b {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.inspector-scenario-btn .scene-info small {
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.inspector-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  text-align: center;
  box-sizing: border-box;
}
.inspector-empty-card b {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.inspector-empty-card span {
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
  word-break: keep-all;
}

/* --- ROI Devices Sublist --- */
.inspector-device-sublist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inspector-device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
}
.inspector-device-row:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.inspector-device-row .device-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #3b82f6;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.inspector-device-row .device-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.inspector-device-row .device-meta b {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.inspector-device-row .device-meta small {
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.inspector-device-row .state-text {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.2;
}
.inspector-device-row .state-text.checking,
.inspector-device-row .state-text.unlinked {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.inspector-device-row .state-text.running {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}
.inspector-device-row .state-text.stopped {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.inspector-device-row .state-text.fault {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.inspector-hero .device-symbol {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  font-size: 16px;
  flex-shrink: 0;
  color: #2563eb;
}
.inspector-hero .device-symbol svg,
.inspector-hero .device-symbol .device-symbol-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  display: block;
}
.inspector-hero h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: #0f172a;
  line-height: 1.25;
}
.inspector-hero p {
  font-size: 11.5px;
  margin: 2px 0 0 0;
  color: #64748b;
  line-height: 1.3;
}
.live-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
}
.live-value {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: #f8fafc;
}
.live-value span {
  display: block;
  font-size: var(--font-l5);
  color: var(--muted);
}
.live-value b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-top: 2px;
  color: #0f4c9c;
}

/* ==========================================================
   6. 환경설정 레이아웃 (Config View) - 상단 기준선 완벽 통일
   ========================================================== */
.workspace {
  display: grid;
  grid-template-columns: 252px minmax(420px, 1fr) 350px;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
  background: var(--bg);
}
.left-panel {
  border-right: 1px solid var(--line);
  padding: 10px 12px;
  overflow: auto;
  background: #fff;
}
.left-panel .panel-title,
.panel-title {
  display: none !important;
}
.panel-title h2 {
  font-size: var(--font-l2);
  font-weight: 700;
  margin: 0;
  color: #1e293b;
}
.library-search {
  height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: #fff;
  margin-bottom: 8px;
  color: #64748b;
}
.library-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: var(--font-l4);
  color: var(--ink);
  padding: 0;
}
.library-card {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 4px 0;
  background: #fff;
  cursor: grab;
  min-height: 38px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.library-card:hover {
  border-color: #82b2f2;
  box-shadow: 0 2px 6px rgba(18,103,232,.06);
}
#deviceLibrary .device-icon,
#deviceLibrary .library-icon {
  display: none !important;
}
.library-card .library-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm, 6px);
  background: #f1f5f9;
  color: #2563eb;
  flex: none;
  transition: background-color .15s ease, color .15s ease;
}
.library-card:hover .library-icon {
  background: #eff6ff;
  color: #1d4ed8;
}
.library-card .library-icon svg,
.library-card .library-icon .library-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  display: block;
}
.device-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: #eff6ff;
  color: var(--blue);
  font-size: 13px;
  flex: none;
}
.library-card .library-meta,
.library-card > span:not(.device-icon):not(.drag-handle):not(.direction-badge) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.library-card b {
  display: block;
  font-size: var(--font-l3);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.library-card small {
  display: block;
  color: var(--muted);
  font-size: var(--font-l5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 2px;
}
.library-card .drag-handle {
  flex: none;
  margin-left: auto;
  color: #64748b;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  user-select: none;
  text-align: center;
}
.library-card:hover .drag-handle {
  color: var(--blue, #1267e8);
}
.device-add-btn {
  display: none !important;
}

/* ── API 포인트 장비별 계층 트리 뷰 ── */
.source-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0 8px;
}
.source-tree-group {
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.source-tree-group:hover {
  border-color: #cbd5e1;
}
.source-tree-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background .15s ease;
}
.source-tree-header:hover {
  background: #f1f5f9;
}
.source-tree-group:not(.collapsed) .source-tree-header {
  border-bottom-color: #e2e8f0;
}
.source-tree-header .tree-arrow {
  font-size: 11px;
  color: #64748b;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.source-tree-group.collapsed .source-tree-header .tree-arrow {
  transform: rotate(-90deg);
}
.source-tree-header .device-icon,
#sourceLibrary .device-icon {
  display: none !important;
}
.source-tree-header .group-title {
  font-weight: 700;
  color: #1e293b;
  font-size: 12px;
  flex: 1;
}
.source-tree-header .group-count {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #e2e8f0;
  padding: 1px 7px;
  border-radius: 10px;
}
.source-tree-header .btn-group-add-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  padding: 0;
  margin-left: 5px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  color: #0284c7;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.source-tree-header .btn-group-add-source:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
  transform: scale(1.05);
}
.btn-lib-action {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  line-height: 1.3;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-lib-action:hover {
  background: #f1f5f9;
  color: #0284c7;
  border-color: #0284c7;
}
.btn-lib-action.btn-edit-source {
  color: #0284c7;
  border-color: #bae6fd;
  background: #f0f9ff;
}
.btn-lib-action.btn-edit-source:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}
.source-tree-children {
  padding: 6px 8px 6px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #ffffff;
}
.source-tree-group.collapsed .source-tree-children {
  display: none !important;
}
.source-tree-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #edf2f7;
  border-radius: 5px;
  background: #fcfdfe;
  cursor: grab;
  transition: all .15s ease;
}
.source-tree-card:hover {
  border-color: #93c5fd;
  background: #f8faff;
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08);
}
.source-tree-card:active {
  cursor: grabbing;
}

/* 중앙 에디터 영역 */
.editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--bg);
}
.editor-toolbar {
  height: var(--header-height);
  min-height: var(--header-height);
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}
.editor-toolbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.office-ctrl-group,
.building-ctrl-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.office-ctrl-group select#officeSelect,
.building-ctrl-group select#buildingSelect {
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: #fff;
  font-size: var(--font-l3, 12px);
  font-weight: 700;
  color: var(--ink);
  min-width: 120px;
  max-width: 220px;
  cursor: pointer;
  box-sizing: border-box;
}
.office-ctrl-group .icon-btn,
.building-ctrl-group .icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #475569;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}
.office-ctrl-group .icon-btn:hover,
.building-ctrl-group .icon-btn:hover {
  background: #f1f5f9;
  color: var(--blue);
  border-color: #94a3b8;
}
.office-ctrl-group .icon-btn.delete-office:hover,
.building-ctrl-group .icon-btn.delete-building:hover {
  background: #fef2f2;
  color: var(--red);
  border-color: #fca5a5;
}
.building-ctrl-group .icon-btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.building-ctrl-group .icon-btn.disabled:hover {
  background: #fff;
  color: #475569;
  border-color: var(--line);
}
.editor-tool-group,
.building-tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.editor-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.editor-toolbar-sep {
  width: 1px;
  height: 16px;
  background: var(--line, #cbd5e1);
  margin: 0 4px;
}
.editor-toolbar-right .dirty-status {
  margin-right: 4px;
  font-size: var(--font-l5, 11px);
}
.editor-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.editor-title b {
  display: block;
  font-size: var(--font-l2);
  font-weight: 700;
  white-space: nowrap;
}
.editor-title span,
#deviceSummary {
  display: none !important;
}
.canvas-viewport {
  position: relative;
  flex: 1;
  overflow: auto;
  padding: 16px;
  background-color: #f1f5f9;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 16px 16px;
}
.canvas {
  width: 900px;
  height: 600px;
  position: relative;
  margin: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  transform-origin: center;
  overflow: hidden;
}
/* 도면 이미지 정합 및 계층 레이어 규격화 */
.monitor-canvas > img,
.canvas > img,
.building-canvas > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: none;
  pointer-events: none;
  user-select: none;
}
.monitor-canvas > img.visible,
.canvas > img.visible,
.building-canvas > img.visible {
  display: block;
}
.empty-plan {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  z-index: 1;
}
.empty-plan h3 {
  margin: 6px 0 3px;
  color: #334155;
  font-size: var(--font-l2);
  font-weight: 700;
}
.empty-plan p {
  margin: 0 0 10px;
  font-size: var(--font-l5);
}
.empty-icon {
  font-size: 1.6rem;
  color: #64748b;
}

/* ROI 그리기 프리뷰 및 힌트 */
.roi-polygon-preview {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}
.roi-polygon-preview polyline {
  fill: rgba(18, 103, 232, 0.12);
  stroke: var(--blue, #1267e8);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.roi-draw-preview {
  position: absolute;
  border: 2px dashed var(--blue, #1267e8);
  background: rgba(18, 103, 232, 0.12);
  pointer-events: none;
  z-index: 10;
  box-sizing: border-box;
}
.roi-draw-preview.shape-circle {
  border-radius: 50%;
}
.roi-polygon-hint {
  position: absolute;
  transform: translate(-50%, -100%) translateY(-8px);
  background: #1e293b;
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
  max-width: max-content;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  display: none !important;
}
.roi-polygon-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
}
.roi-polygon-hint.visible:not(:empty) {
  display: block !important;
}
.roi-polygon-hint.hidden,
.roi-polygon-hint:empty {
  display: none !important;
}
.legend {
  height: 30px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  color: #64748b;
  font-size: var(--font-l5);
}

/* 우측 ROI 작업 패널 */
.right-panel {
  border-left: 1px solid var(--line);
  background: #fff;
  overflow: auto;
}
.right-tabs {
  margin: 6px 8px;
  display: flex;
  flex-wrap: nowrap;
}
.right-tabs button {
  padding: 4px 4px;
  font-size: 11px;
  white-space: nowrap;
  flex: 1 1 auto;
}
.right-content {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
}

/* ==========================================================
   7. 도면 위 ROI 및 장비 노드 스타일
   ========================================================== */
.device-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}
.device-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}
.canvas .device-node { cursor: move; }
.device-node .node-circle {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1.5px solid var(--blue);
  box-shadow: 0 2px 6px rgba(15, 75, 160, 0.18);
  font-size: 13px;
  color: var(--blue);
  box-sizing: border-box;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.device-node:hover .node-circle {
  transform: scale(1.12);
  border-color: #0b57c7;
  box-shadow: 0 4px 12px rgba(18, 103, 232, 0.3);
}
.device-node .node-circle svg,
.device-node .node-circle .device-node-svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.device-node:hover .node-circle svg,
.device-node:hover .node-circle .device-node-svg {
  transform: scale(1.08);
}
.empty-inspector .empty-device-svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.8;
  display: inline-block;
  opacity: 0.6;
}
.device-node.state-on .node-circle {
  border-color: #16a34a;
  color: #16a34a;
}
.device-node.state-warn .node-circle {
  border-color: var(--amber);
  color: #b45309;
}
.device-node.state-error .node-circle {
  border-color: var(--red);
  color: var(--red);
}
/* 경보 발생 시 장비 객체(Device Node) 색상 - ROI 색상과 동일한 붉은 계열 톤 */
.device-node.state-alarm .node-circle,
.device-node.alarm .node-circle {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.24) !important;
  color: #ef4444 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55), inset 0 0 10px rgba(239, 68, 68, 0.22) !important;
}
.device-node.state-alarm:hover .node-circle,
.device-node.alarm:hover .node-circle {
  border-color: #ff4d4f !important;
  background: rgba(255, 77, 79, 0.3) !important;
  box-shadow: 0 0 18px rgba(255, 77, 79, 0.75), inset 0 0 12px rgba(255, 77, 79, 0.28) !important;
}
.device-node.state-alarm .node-badge,
.device-node.alarm .node-badge {
  background: #ef4444 !important;
  box-shadow: 0 0 8px #ef4444 !important;
}
.device-node.state-alarm .node-label,
.device-node.alarm .node-label,
.device-node.state-alarm .node-data-label,
.device-node.alarm .node-data-label {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 1px solid #ff7875 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5) !important;
}
.device-node .node-label {
  margin-top: 4px;
  background: rgba(15, 57, 118, 0.92);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10.5px;
  white-space: nowrap;
  line-height: 1.25;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
.device-node .node-label b {
  font-weight: 700;
  font-size: 10.5px;
}
.device-node .node-label small {
  font-size: 9.5px;
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.device-node .node-data-label {
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  justify-content: center;
}
.device-node .node-data-label small {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.98;
  gap: 3px;
}

/* 장비 위로 마우스 커서를 올렸을 때만 표시되는 장비 명칭 툴팁 */
.device-name-tooltip {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  line-height: 1.3;
}
.device-name-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.94);
}
.device-node:hover,
.device-node.force-hover {
  z-index: 50;
}
.device-node:hover .device-name-tooltip,
.device-node.force-hover .device-name-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.device-node .node-badge {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: var(--green);
  z-index: 2;
  box-sizing: border-box;
}
.device-node.unlinked .node-badge { background: var(--amber); }
.device-node.state-off .node-badge { background: #94a3b8; }
.device-node.state-warn .node-badge { background: var(--amber); }
.device-node.state-error .node-badge { background: var(--red); }
.device-node.state-on .node-badge { background: var(--green); }

.zone-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.zone-box {
  position: absolute;
  border: 1.5px dashed rgba(0, 180, 255, 0.7);
  background: rgba(0, 180, 255, 0.14);
  color: #0284c7;
  pointer-events: auto;
  cursor: pointer;
}
.zone-box:hover, .zone-box.selected {
  border-style: solid;
  border-color: #00e5ff;
  background: rgba(0, 210, 255, 0.24);
}
.zone-box.alarm {
  border-color: #ef4444;
  border-style: solid;
  background: rgba(239, 68, 68, 0.24);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55), inset 0 0 12px rgba(239, 68, 68, 0.18);
}
.zone-box.alarm:hover, .zone-box.alarm.selected {
  border-color: #ff4d4f;
  background: rgba(255, 77, 79, 0.3);
  box-shadow: 0 0 18px rgba(255, 77, 79, 0.75), inset 0 0 16px rgba(255, 77, 79, 0.25);
}
.zone-box.alarm > span {
  border-color: #ef4444;
  color: #dc2626;
  background: #ffffff;
}
.zone-filter {
  display: flex;
  gap: 5px;
  overflow: auto;
  margin-bottom: 6px;
  padding-bottom: 2px;
}
.zone-filter:empty {
  display: none;
}
.zone-filter-btn {
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: #475569;
  padding: 0 8px;
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--font-l5);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}
.zone-filter-btn:hover { border-color: #93c5fd; }
.zone-filter-btn.active {
  border-color: var(--blue);
  background: #eff6ff;
  color: var(--blue);
  font-weight: 700;
}

/* ==========================================================
   8. 모달 및 팝업 (정갈한 오와 열)
   ========================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}
.modal {
  width: min(520px, calc(100vw - 30px));
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  padding: 14px 16px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.modal-head h3 {
  margin: 0;
  font-size: var(--font-l1);
  font-weight: 700;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
}

/* ==========================================================
   API 연결 및 포인트 설정 모달 확장 및 스크롤 방지 레이아웃
   ========================================================== */
.modal-backdrop:has(.modal-source),
.modal-backdrop:has(#sourceTypeInput),
.modal-backdrop:has(.modal-gateway),
.modal-backdrop:has(#gatewayProvider) {
  padding: 8px;
}
.modal:has(#gatewayProvider),
.modal.modal-gateway,
.modal:has(#sourceTypeInput),
.modal.modal-source {
  width: min(660px, calc(100vw - 20px));
  max-height: min(97vh, 960px);
  padding: 10px 18px 12px;
}
.modal:has(#sourceTypeInput) .modal-head,
.modal.modal-source .modal-head {
  padding-bottom: 5px;
  margin-bottom: 6px;
}
.modal:has(#sourceTypeInput) .segmented,
.modal.modal-source .segmented {
  margin-bottom: 6px !important;
}
.modal:has(#gatewayProvider) .field,
.modal.modal-gateway .field,
.modal:has(#sourceTypeInput) .field,
.modal.modal-source .field {
  margin-bottom: 5px;
}
.modal:has(#sourceTypeInput) .field label,
.modal.modal-source .field label {
  margin-bottom: 2px;
  font-size: 11px;
}
.modal:has(#sourceTypeInput) input,
.modal.modal-source input,
.modal:has(#sourceTypeInput) select,
.modal.modal-source select {
  height: 27px;
  padding: 2px 8px;
  font-size: 12px;
}
.modal:has(#sourceTypeInput) .section-card,
.modal.modal-source .section-card {
  margin-bottom: 4px;
}
.modal:has(#sourceTypeInput) .section-head,
.modal.modal-source .section-head {
  min-height: 24px;
  padding: 2px 8px;
}
.modal:has(#sourceTypeInput) .section-head h3,
.modal.modal-source .section-head h3 {
  font-size: 12px;
  font-weight: 700;
}
.modal:has(#sourceTypeInput) .section-body,
.modal.modal-source .section-body {
  padding: 6px 8px;
}
.modal:has(#sourceTypeInput) .modal-actions,
.modal.modal-source .modal-actions {
  margin-top: 6px;
}

/* 클라우드 OpenAPI / OAuth 게이트웨이 연동 박스 */
.oauth-config-box {
  margin: 6px 0 8px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-sizing: border-box;
}
.oauth-section-head {
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.oauth-section-title {
  display: block;
  font-size: var(--font-l3);
  font-weight: 700;
  color: var(--blue-dark, #06499f);
  margin-bottom: 1px;
}
.oauth-section-desc {
  margin: 0;
  font-size: var(--font-l5);
  color: var(--muted);
  line-height: 1.35;
}
.oauth-config-box .field {
  margin-bottom: 6px;
}
.oauth-config-box .field:last-child {
  margin-bottom: 0;
}
.oauth-token-tool {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.oauth-tool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.oauth-tool-header span {
  font-size: var(--font-l4);
  font-weight: 600;
  color: var(--ink);
}
.gateway-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  margin-bottom: 2px;
}
.gateway-enable-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-l4);
  color: var(--ink);
}
.oauth-tool-body {
  display: flex;
  gap: 6px;
  align-items: center;
}
.oauth-tool-body input {
  flex: 1;
  height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 0 8px;
  font-size: var(--font-l4);
  color: var(--ink);
  box-sizing: border-box;
}
.oauth-tool-body .btn {
  height: var(--control-height);
  white-space: nowrap;
}

/* ==========================================================
   시나리오 예시 템플릿 모달 스타일
   ========================================================== */
.modal:has(.scenario-template-container),
.modal.modal-scenario-template {
  width: min(720px, calc(100vw - 32px));
  max-height: 90vh;
}
.scenario-template-container {
  display: flex;
  flex-direction: column;
}
.template-intro-desc {
  font-size: var(--font-l4);
  color: #64748b;
  margin: 0 0 10px 0;
  line-height: 1.45;
}
.template-category-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.template-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: var(--font-l4);
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .15s ease;
}
.template-tab:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.template-tab.active {
  background: #eff6ff;
  color: #1267e8;
  border-color: #bfdbfe;
}
.scenario-template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 2px 4px 6px 2px;
  margin-bottom: 8px;
}
@media (max-width: 620px) {
  .scenario-template-grid {
    grid-template-columns: 1fr;
  }
}
.scenario-template-option {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #ffffff;
  cursor: pointer;
  transition: all .15s ease;
  box-sizing: border-box;
  text-align: left;
}
.scenario-template-option:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.scenario-template-option.selected,
.scenario-template-option:has(input:checked) {
  border-color: #1267e8;
  background: #f0f7ff;
  box-shadow: 0 0 0 1px #1267e8, 0 2px 8px rgba(18, 103, 232, 0.1);
}
.scenario-template-option.hidden {
  display: none !important;
}
.template-opt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.template-opt-header input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #1267e8;
  cursor: pointer;
  flex-shrink: 0;
}
.template-opt-name {
  font-size: var(--font-l3);
  font-weight: 700;
  color: #1e293b;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenario-template-option.selected .template-opt-name {
  color: #0f4c9c;
}
.template-group-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.2;
}
.template-group-pill.pill-work {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.template-group-pill.pill-meet {
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}
.template-opt-desc {
  margin: 0 0 6px 0;
  font-size: var(--font-l5);
  color: #64748b;
  line-height: 1.4;
  min-height: 31px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-opt-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 4px;
  padding: 3px 6px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenario-template-option.selected .template-opt-trigger {
  background: #e8f2fe;
  border-color: #dbeafe;
}
.template-opt-trigger .trigger-label {
  font-weight: 700;
  color: #64748b;
  flex-shrink: 0;
}
.template-opt-trigger .trigger-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-opt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.template-opt-actions .action-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}
.scenario-template-option.selected .action-tag {
  background: #e0edff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.template-opt-actions .action-tag.more {
  background: #e2e8f0;
  color: #64748b;
  border-color: transparent;
}
.scenario-roi-field {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.scenario-roi-field .roi-field-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.scenario-roi-field label {
  font-size: var(--font-l3);
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.scenario-roi-field .muted {
  font-size: var(--font-l5);
  color: #64748b;
  margin: 0;
}
.scenario-roi-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: var(--font-l4);
}
.scenario-roi-box p {
  margin: 0;
  color: #1e293b;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.scenario-roi-box p::before {
  content: '🎯';
  font-size: 12px;
}
.scenario-roi-box .muted {
  font-size: 10.5px;
  color: #64748b;
  font-weight: normal;
  margin-top: 4px;
}
.scenario-roi-box .scenario-target-tree {
  max-height: 140px;
  overflow-y: auto;
}
.scenario-target-tree details summary {
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-l4);
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}
.scenario-target-tree details summary:hover {
  background: #f1f5f9;
}
.scenario-target-tree details summary small {
  margin-left: auto;
  font-size: var(--font-l5);
  color: #64748b;
  font-weight: normal;
}
.scenario-target-tree details > div {
  padding-left: 14px;
}
.scenario-tree-roi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-l4);
}
.scenario-tree-roi:hover {
  background: #f1f5f9;
}
.scenario-tree-roi.selected {
  background: #eff6ff;
  color: #1267e8;
  font-weight: 600;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #1e293b;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  opacity: 0;
  pointer-events: none;
  transition: .2s;
  z-index: 200;
  box-shadow: var(--shadow);
  font-size: var(--font-l4);
  font-weight: 500;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* 경고(warning) 토스트: 앰버 계열 배경으로 시각적 구분 */
.toast.toast-warning {
  background: #92400e;
  border-left: 3px solid var(--amber, #d97706);
}
/* 오류(error) 토스트: 레드 계열 배경으로 시각적 구분 */
.toast.toast-error {
  background: #7f1d1d;
  border-left: 3px solid var(--red, #dc2626);
}

/* ==========================================================
   9. 시나리오 구성 (Scenario View)
   ========================================================== */
.scenario-view {
  display: grid;
  grid-template-columns: 240px minmax(480px, 1fr) 320px;
  height: calc(100vh - var(--topbar-height));
  background: var(--bg);
}
.scenario-side {
  border-right: 1px solid var(--line);
  padding: 10px 12px;
  background: #fff;
  overflow: auto;
}
.scenario-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.scenario-side-head h1 {
  font-size: var(--font-l1);
  font-weight: 700;
  margin: 0;
}
.scenario-side-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}
.scenario-list-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  padding: 9px 10px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s, transform 0.18s;
  box-sizing: border-box;
}
.scenario-list-item:hover {
  border-color: #93c5fd;
  background: #fbfdff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.scenario-list-item.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #3b82f6, 0 3px 10px rgba(59, 130, 246, 0.14);
}
.scenario-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.scenario-item-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}
.scenario-status-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.scenario-status-indicator.active {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.22);
}
.scenario-status-indicator.inactive {
  background: #94a3b8;
}
.scenario-item-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenario-list-item.selected .scenario-item-name {
  color: #1d4ed8;
}
.scenario-item-arrow {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  line-height: 1;
  transition: transform 0.15s, color 0.15s;
}
.scenario-list-item:hover .scenario-item-arrow {
  transform: translateX(2px);
  color: #3b82f6;
}
.scenario-item-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.scenario-chip {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.3;
}
.scenario-chip.roi-chip,
.scenario-chip.action-chip {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.scenario-list-item.selected .scenario-chip.roi-chip,
.scenario-list-item.selected .scenario-chip.action-chip {
  background: #ffffff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.scenario-chip.active-chip {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.scenario-chip.off-chip {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}
.scenario-toolbar {
  height: auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.scenario-toolbar #scenarioHeader {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.scenario-toolbar h2 {
  font-size: var(--font-l2);
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}
.scenario-toolbar p {
  font-size: var(--font-l5);
  color: var(--muted);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}
.scenario-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.scenario-inspector {
  border-left: 1px solid var(--line);
  padding: 10px 12px;
  background: #fff;
  overflow: auto;
}
.scenario-inspector-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.scenario-inspector-title h2 {
  font-size: var(--font-l2);
  font-weight: 700;
  margin: 0;
  color: #1e293b;
}
.scenario-inspector-title .btn.danger {
  height: 25px;
  padding: 0 8px;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Modern Scenario Stage & Cards (Fallback/Overview) */
.scenario-stage {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.scenario-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  background: #ffffff;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.15s ease;
}
.scenario-card:hover {
  border-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.scenario-card.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #3b82f6, 0 3px 8px rgba(59, 130, 246, 0.12);
}
.scenario-card b {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
}
.scenario-card span {
  font-size: 11px;
  color: #475569;
  line-height: 1.35;
}
.scenario-card small {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* ==========================================================
   10. 빌딩·층 설정 오버레이 (Building Configuration)
   ========================================================== */
.building-config-overlay {
  position: fixed;
  top: var(--topbar-height, 50px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--bg, #f1f5f9);
  overflow: hidden;
}
.building-config-overlay.hidden {
  display: none !important;
}
.building-config-entry {
  margin: 0 0 8px;
  font-size: var(--font-l3, 12px);
  font-weight: 700;
  height: var(--control-height, 30px);
}
.building-config-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 252px minmax(400px, 1fr) 350px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #dbe3ed;
  gap: 1px;
}
.building-list-panel {
  background: #fff;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
}
.building-config-back-btn {
  margin: 0 0 8px;
  font-size: var(--font-l3, 12px);
  font-weight: 700;
  height: var(--control-height, 30px);
}
.building-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 10px;
  height: var(--header-height, 40px);
  min-height: var(--header-height, 40px);
  border-bottom: 1px solid var(--line);
  box-sizing: border-box;
}
.building-list-head .eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--blue, #1267e8);
  line-height: 1.2;
}
.building-list-head h3 {
  margin: 0;
  font-size: var(--font-l2, 13px);
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}
.building-list-item {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 5px);
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s;
}
.building-list-item:hover {
  border-color: var(--blue);
  background: #f8fafc;
}
.building-list-item.selected {
  border-color: var(--blue);
  background: #eff6ff;
  box-shadow: 0 1px 4px rgba(18, 103, 232, 0.15);
}
.building-list-item b {
  font-size: var(--font-l3, 12px);
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.building-list-item small {
  font-size: var(--font-l5, 11px);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.building-editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
.building-toolbar {
  height: var(--header-height, 40px);
  min-height: var(--header-height, 40px);
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 6px;
  box-sizing: border-box;
}
.building-toolbar-left,
.building-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.building-toolbar-title {
  font-size: var(--font-l2, 13px);
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  margin-left: 2px;
}
.building-canvas {
  flex: 1;
  position: relative;
  margin: 16px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md, 7px);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.building-inspector {
  border-left: 1px solid var(--line);
  background: #fff;
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#deleteBuildingBtn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
/* ==========================================================
   층 ROI 및 구역 목록 (Zone / Floor ROI List)
   ========================================================== */
.zone-list-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.zone-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 5px);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: all .15s ease;
  font-family: inherit;
  gap: 8px;
}
.zone-list-item:hover {
  background: #f8fafc;
  border-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
}
.zone-list-item.selected {
  background: #eff6ff;
  border-color: var(--blue, #1267e8);
  box-shadow: 0 0 0 1px var(--blue, #1267e8);
}
.zone-list-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.zone-list-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.zone-list-title {
  font-size: var(--font-l3, 12px);
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
.zone-list-item.selected .zone-list-title {
  color: #1d4ed8;
}
.zone-shape-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  line-height: 1.3;
}
.zone-list-item.selected .zone-shape-badge {
  background: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}
.zone-list-meta {
  font-size: var(--font-l5, 11px);
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.zone-list-meta b {
  color: #334155;
  font-weight: 600;
}
.zone-list-item.selected .zone-list-meta b {
  color: #1d4ed8;
}
.zone-list-arrow {
  font-size: 16px;
  font-style: normal;
  color: #64748b;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .15s, color .15s;
}
.zone-list-item:hover .zone-list-arrow {
  color: var(--blue, #1267e8);
  transform: translateX(2px);
}
.zone-list-item.selected .zone-list-arrow {
  color: var(--blue, #1267e8);
}

/* Fallback / 레거시 markup 호환 */
.zone-list-item > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.zone-list-item > span > b {
  font-size: var(--font-l3, 12px);
  color: #1e293b;
}
.zone-list-item > span > small {
  font-size: var(--font-l5, 11px);
  color: var(--muted, #64748b);
}
.zone-list-item > i {
  font-style: normal;
  font-size: 15px;
  color: #64748b;
}

/* ==========================================================
   연결 사무실 (복수 선택) 목록
   ========================================================== */
.office-binding-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 5px);
  padding: 6px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.office-bind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  transition: all .15s ease;
  user-select: none;
}
.office-bind-row:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.office-bind-row.checked,
.office-bind-row:has(input[type="checkbox"]:checked) {
  background: #eff6ff;
  border-color: #93c5fd;
}
.office-bind-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.office-bind-row input[type="checkbox"],
.office-binding-list input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--blue, #1267e8);
  cursor: pointer;
  flex-shrink: 0;
}
.office-bind-name {
  font-size: var(--font-l4, 12px);
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.office-bind-row.checked .office-bind-name,
.office-bind-row:has(input[type="checkbox"]:checked) .office-bind-name {
  font-weight: 600;
  color: #1d4ed8;
}
.office-bind-badge {
  font-size: 10.5px;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
}
.office-bind-row.checked .office-bind-badge,
.office-bind-row:has(input[type="checkbox"]:checked) .office-bind-badge {
  background: #dbeafe;
  color: #1e40af;
  border-color: #bfdbfe;
}
.office-binding-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-l4, 12px);
  color: #334155;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #fff;
  white-space: nowrap;
  transition: all .15s ease;
}
.office-binding-list label:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.office-binding-list label:has(input:checked) {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  font-weight: 600;
}
.office-binding-list label span {
  white-space: nowrap;
}
.building-roi {
  cursor: pointer;
}
.building-roi.selected {
  border-color: var(--blue, #1267e8) !important;
  background: rgba(18, 103, 232, 0.22) !important;
}
.building-floor-summary {
  padding: 10px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm, 5px);
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.building-floor-summary b {
  font-size: var(--font-l3, 12px);
  color: #1d4ed8;
}
.building-floor-summary span {
  font-size: var(--font-l5, 11px);
  color: #475569;
}
.office-switcher {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 8px;
}
.office-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 5px);
  background: #fff;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: all .15s;
}
.office-switch:hover {
  background: #f8fafc;
  border-color: #93c5fd;
}
.office-switch.active {
  background: #eff6ff;
  border-color: var(--blue, #1267e8);
  font-weight: 700;
}
.office-switch span {
  font-size: var(--font-l3, 12px);
  color: #1e293b;
  white-space: nowrap;
}
.office-switch small {
  font-size: var(--font-l5, 11px);
  color: var(--muted, #64748b);
  white-space: nowrap;
}
.office-switch.building-back {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.office-switch.building-back:hover {
  background: #e2e8f0;
}

/* ==========================================================
   Monitor Spatial Hierarchy Tree (Building -> Floor -> Office -> ROI)
   ========================================================== */
.monitor-spatial-section {
  margin: 2px 0 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.monitor-spatial-head {
  display: none !important;
}
.spatial-tree-title {
  margin: 0;
  font-size: var(--font-l3, 12px);
  font-weight: 700;
  color: #334155;
}
.monitor-spatial-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: #fbfcfe;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}
.spatial-node {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.spatial-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s;
  user-select: none;
  gap: 4px;
}
.spatial-row:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.spatial-row.active {
  background: #eff6ff;
  border-color: #93c5fd;
  box-shadow: inset 3px 0 0 #2563eb, 0 1px 3px rgba(37, 99, 235, 0.08);
}
.spatial-main {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}
.spatial-toggle {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 3px;
  transition: transform 0.15s ease, color 0.15s;
}
.spatial-toggle:hover {
  color: #1e293b;
  background: rgba(0, 0, 0, 0.05);
}
.spatial-toggle.expanded {
  transform: rotate(90deg);
}
.spatial-toggle.leaf-spacer {
  visibility: hidden;
}
.spatial-icon {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.spatial-icon.bldg {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.spatial-icon.floor {
  background: #f5f3ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}
.spatial-icon.office {
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.spatial-icon.roi {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.spatial-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.spatial-row.active .spatial-name {
  color: #1d4ed8;
  font-weight: 700;
}
.spatial-meta {
  font-size: 9.5px;
  font-weight: 500;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.spatial-row.active .spatial-meta {
  background: #ffffff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.spatial-children {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 11px;
  border-left: 1px dashed #cbd5e1;
  margin-left: 11px;
  margin-top: 1px;
  margin-bottom: 2px;
}
.spatial-children.collapsed {
  display: none !important;
}

.source-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 5px);
  background: #fff;
  margin-bottom: 4px;
  box-sizing: border-box;
}
.source-chip span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.source-chip b {
  font-size: var(--font-l4, 12px);
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-chip small {
  font-size: var(--font-l5, 11px);
  color: var(--muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.direction-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  white-space: nowrap;
  background: #edf4fd;
  color: #1a56db;
}
.direction-badge.sim-badge {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.sim-live-box {
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 반응형 모바일 축약 */
@media(max-width: 850px) {
  body { overflow: auto; }
  .topbar {
    height: auto;
    min-height: var(--topbar-height);
    padding: 6px 10px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .monitor-view, .workspace, .scenario-view {
    display: block;
    height: auto;
  }
}

/* ==========================================================
   9. 통합감시 층별 사무실 도면 그리드 갤러리 (Floor Offices Grid)
   ========================================================== */
.floor-offices-view {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  padding: 14px 16px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.floor-offices-view.hidden {
  display: none !important;
}

.floor-offices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
  flex-shrink: 0;
}
.floor-offices-head .head-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.floor-offices-head .floor-badge {
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: -0.2px;
}
.floor-offices-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.floor-offices-head p {
  display: none !important;
}

/* 최대 가로x세로 4개(2x2) 화면 맞춤 그리드 & 5개 이상 스크롤 */
.floor-offices-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

/* 4개 이하일 때: 뷰포트 높이에 꼭 맞게 2x2 균등 분할 */
.floor-offices-grid.fit-grid {
  flex: 1;
  min-height: 0;
  height: 100%;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
/* 사무실이 1개일 때: 단일 뷰포트 크기로 시원하게 표시 */
.floor-offices-grid.single-office {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
/* 사무실이 2개일 때: 가로 2열 1행으로 가득 채움 */
.floor-offices-grid.two-offices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
/* 5개 이상일 때: 2열 구조 유지 + 각 행 최소 높이로 세로 스크롤 생성 */
.floor-offices-grid.scroll-grid {
  grid-auto-rows: minmax(280px, auto);
  padding-bottom: 16px;
}

/* 개별 사무실 도면 카드 */
.floor-office-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  min-height: 0;
}
.floor-office-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.11);
  border-color: #2563eb;
}
.floor-office-card:active {
  transform: translateY(-1px);
}

.floor-office-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.floor-office-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}
.floor-office-card-title .office-icon {
  font-size: 14px;
}
.floor-office-card-action {
  font-size: 11px;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 5px;
  padding: 2px 7px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.floor-office-card:hover .floor-office-card-action {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* 도면 원본 이미지 전용 본문 (ROI/장비 없음) */
.floor-office-plan-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfc;
  padding: 8px;
  overflow: hidden;
}
.floor-office-plan-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  display: block;
}

.floor-office-empty-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #64748b;
  padding: 24px;
  text-align: center;
}
.floor-office-empty-plan .empty-icon {
  font-size: 28px;
  opacity: 0.6;
}
.floor-office-empty-plan span {
  font-size: 12px;
  font-weight: 500;
}

/* 해당 층에 등록된 사무실이 없을 때 */
.floor-offices-empty-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
  text-align: center;
  color: #64748b;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  box-sizing: border-box;
}
.floor-offices-empty-notice .empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: 0.7;
}
.floor-offices-empty-notice h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
}
.floor-offices-empty-notice p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

/* ==========================================================
   API 포인트 선택 모달 및 판단 편집 필드 (Point Picker)
   ========================================================== */
.modal.modal-point-picker,
.modal.modal-device-picker {
  width: min(860px, calc(100vw - 32px)) !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 22px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.modal.modal-point-picker #modalBody,
.modal.modal-device-picker #modalBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.point-picker-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.point-picker-topbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}
.point-picker-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--radius-md, 8px);
  padding: 9px 14px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.point-picker-search-bar:focus-within {
  border-color: var(--blue, #1267e8);
  box-shadow: 0 0 0 3px rgba(18, 103, 232, 0.15);
  background: #ffffff;
}
.point-picker-search-bar .search-icon {
  font-size: 15px;
  color: #64748b;
}
.point-picker-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: #1e293b;
}
.point-picker-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line, #e2e8f0);
  flex-shrink: 0;
}
.point-picker-tabs::-webkit-scrollbar {
  display: none;
}
.point-picker-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .15s ease;
}
.point-picker-tab:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.point-picker-tab.active {
  background: #eff6ff;
  color: var(--blue, #1267e8);
  border-color: #bfdbfe;
  font-weight: 700;
}
.point-picker-list {
  display: block; /* Normal block layout with vertical scrolling, preventing flex-crush! */
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 54vh;
  min-height: 180px;
  padding-right: 6px;
}
.point-picker-list::-webkit-scrollbar {
  width: 6px;
}
.point-picker-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.point-picker-list::-webkit-scrollbar-track {
  background: #f8fafc;
}
.point-picker-group {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.point-picker-group:last-child {
  margin-bottom: 4px;
}
.point-picker-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line, #e2e8f0);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  min-height: 44px;
  box-sizing: border-box;
}
.point-picker-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.point-picker-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  font-size: 14px;
  flex-shrink: 0;
}
.point-picker-group-icon.picker-dev-svg-wrap {
  width: 22px;
  height: 22px;
  margin-right: 3px;
}
.picker-svg-icon {
  width: 18px;
  height: 18px;
  stroke: var(--blue, #2563eb);
  stroke-width: 2.2;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}
.point-picker-tab .picker-svg-icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.2;
  margin-right: 3px;
}
.point-row-meta .picker-tag-svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  vertical-align: middle;
  display: inline-block;
  margin-right: 3px;
}
.picker-group-hierarchy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.4;
}
.picker-hier-badge {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  background: #e2e8f0;
  padding: 1.5px 6px;
  border-radius: 4px;
  letter-spacing: -0.2px;
}
.picker-hier-badge.roi {
  color: var(--blue, #1267e8);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.picker-hier-name {
  font-weight: 700;
  color: #1e293b;
  font-size: 13px;
}
.picker-hier-divider {
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  margin: 0 1px;
}
.picker-hier-device {
  font-weight: 700;
  color: #0f172a;
  font-size: 13px;
}
.point-picker-group-name {
  font-weight: 700;
  font-size: 13px;
  color: #1e293b;
}
.point-picker-group-loc {
  font-size: 11px;
  color: #64748b;
  margin-left: 6px;
}
.point-picker-group-count {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 9px;
  border-radius: 12px;
  flex-shrink: 0;
}
.point-picker-items {
  display: flex;
  flex-direction: column;
}
.point-device-subgroup {
  border-bottom: 1px solid #e2e8f0;
}
.point-device-subgroup:last-child {
  border-bottom: none;
}
.point-device-subgroup-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px 7px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12.5px;
  color: #1e293b;
}
.point-device-subgroup-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
}
.point-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  background: #ffffff;
  min-height: 48px;
  box-sizing: border-box;
  transition: background .15s ease, border-color .15s ease;
}
.point-picker-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
.point-picker-row:hover {
  background: #f8fafc;
}
.point-picker-row.is-selected {
  background: #eff6ff;
  border-left: 4px solid var(--blue, #1267e8);
}
.point-row-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.point-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.point-row-name {
  font-size: 13px;
  color: #0f172a;
}
.point-row-id {
  font-family: inherit;
  font-size: 11px;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  letter-spacing: -0.2px;
}
.badge-current-selected {
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 10px;
}
.point-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meta-inline-info {
  font-size: 11.5px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
  letter-spacing: -0.2px;
}
.meta-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.meta-tag.tag-group {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
  font-weight: 600;
}
.meta-tag.tag-type {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
  font-weight: 500;
}
.meta-tag.tag-dir {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
  font-weight: 500;
}
.meta-tag.tag-prop {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
}
.meta-tag.tag-gw {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
}
.meta-tag.tag-live {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.live-pulse {
  width: 6px;
  height: 6px;
  background: #16a34a;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.3);
}
.point-row-action {
  margin-left: 12px;
  flex-shrink: 0;
}
.point-row-action .btn {
  min-width: 64px;
}
.point-row-action .btn.outline {
  background: #ffffff;
  border: 1px solid #dce4ee;
  color: #475569;
  font-weight: 600;
  transition: all .15s ease;
}
.point-picker-row:hover .point-row-action .btn.outline {
  border-color: var(--blue, #1267e8);
  color: var(--blue, #1267e8);
  background: #f0f7ff;
}
.point-picker-row.is-selected .point-row-action .btn.outline {
  border-color: var(--blue, #1267e8);
  color: var(--blue, #1267e8);
  background: #eff6ff;
}

/* 판단 편집 인스펙터 내 포인트 선택 상자 및 Action 장비 선택 상자 스타일 */
.scenario-point-field,
.scenario-device-field {
  margin-top: 4px;
}
.scenario-selected-point-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md, 6px);
  background: #f0f7ff;
  transition: all .15s;
}
.scenario-selected-point-box:hover {
  border-color: var(--blue, #1267e8);
  box-shadow: 0 1px 6px rgba(18, 103, 232, 0.1);
}
.selected-point-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.selected-point-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.selected-point-name {
  font-size: 13px;
  color: #0f172a;
}
.point-code-badge {
  font-family: monospace;
  font-size: 11px;
  background: #ffffff;
  color: #3b82f6;
  border: 1px solid #bfdbfe;
  padding: 1px 6px;
  border-radius: 4px;
}
.selected-point-desc {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.selected-point-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.scenario-unselected-point-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border: 1px dashed var(--line, #cbd5e1);
  border-radius: var(--radius-md, 6px);
  background: #fafafa;
  transition: all .15s;
}
.scenario-unselected-point-box:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}
.unselected-prompt {
  font-size: 12px;
  color: #64748b;
}

/* ========================================================================== */
/* SECTION: ROI 모드 출력 설정 순차 실행 및 딜레이 구분선 UI                 */
/* ========================================================================== */
.mode-guide-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #1e40af;
  line-height: 1.4;
}
.mode-guide-alert .guide-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.mode-device-card {
  position: relative;
  transition: all .2s ease;
  border: 1px solid #e2e8f0;
}
.mode-device-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 6px rgba(59,130,246,0.08);
}
.mode-device-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #2563eb;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
  box-shadow: 0 1px 3px rgba(37,99,235,0.3);
  flex-shrink: 0;
}
.mode-device-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mode-order-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 2px;
}
.mode-order-btn {
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #475569;
  cursor: pointer;
  transition: all .15s;
  padding: 0;
}
.mode-order-btn:hover:not(:disabled) {
  background: #2563eb;
  color: #fff;
}
.mode-order-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.mode-device-delay-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 6px 0;
}
.mode-delay-sep-line {
  width: 2px;
  height: 10px;
  background: linear-gradient(to bottom, #bfdbfe, #93c5fd);
  border-radius: 2px;
  flex-shrink: 0;
}
.mode-delay-sep-body {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, #eff6ff, #f0fdf4);
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 4px 12px;
  box-shadow: 0 1px 4px rgba(59,130,246,0.10);
}
.mode-delay-sep-icon {
  font-size: 12px;
  color: #2563eb;
}
.mode-delay-sep-label {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.02em;
}
.mode-delay-sep-input {
  width: 52px !important;
  height: 24px !important;
  min-height: 24px !important;
  text-align: center;
  font-size: 12px !important;
  font-weight: 700;
  border: 1px solid #93c5fd !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #1d4ed8 !important;
  padding: 0 4px !important;
}
.mode-delay-sep-unit {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}

/* ========================================================================== */
/* SECTION: 사용자 인증 (Login Overlay)                                        */
/* ========================================================================== */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-overlay.hidden {
  display: none !important;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
}
.login-heading {
  font-size: var(--font-l1, 16px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 20px;
  text-align: center;
  letter-spacing: -0.01em;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.login-field label {
  font-size: var(--font-l5);
  font-weight: 600;
  color: #475569;
}
.login-field input {
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  padding: 0 10px;
  font-size: var(--font-l4);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.login-field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(18, 103, 232, 0.15);
}
.login-btn {
  height: 36px;
  margin-top: 6px;
  font-size: var(--font-l3);
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(18, 103, 232, 0.25);
  transition: background .15s;
}
.login-btn:hover {
  background: var(--blue-dark);
}
.login-btn:active {
  transform: translateY(1px);
}
.login-options {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: -2px 0 2px;
}
.login-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-l5, 11px);
  color: var(--muted, #64748b);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}
.login-checkbox-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--blue, #1267e8);
  margin: 0;
}
.login-checkbox-label:hover span {
  color: var(--ink, #172236);
}
.login-error {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--red);
  font-size: 12px;
  text-align: center;
}

/* ========================================================================== */
/* SECTION: 상단바 사용자 프로필 & 로그아웃 버튼                               */
/* ========================================================================== */
.user-header-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  margin-left: 4px;
}
.user-tenant-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.user-tenant-badge.master {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}
.user-role-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: #eff6ff;
  color: var(--blue);
  border: 1px solid #bfdbfe;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.user-name-text {
  font-size: var(--font-l3);
  font-weight: 600;
  color: var(--ink);
}
.btn-logout {
  color: var(--muted) !important;
  font-size: 11px !important;
  height: var(--control-height-sm) !important;
  padding: 0 8px !important;
}
.btn-logout:hover {
  color: var(--red) !important;
  border-color: #fca5a5 !important;
  background: #fef2f2 !important;
}

/* ========================================================================== */
/* SECTION: 사용자 관리 뷰 (Users View) - 다른 화면과 일관된 라이트 테마     */
/* ========================================================================== */
.users-view {
  height: calc(100vh - var(--topbar-height));
  overflow-y: auto;
  background: var(--bg);
  padding: 20px 24px;
  box-sizing: border-box;
}
.users-container {
  max-width: 1160px;
  margin: 0 auto;
}
.users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.users-header .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--blue);
  text-transform: uppercase;
}
.users-title {
  font-size: var(--font-l1, 16px);
  font-weight: 800;
  color: var(--ink);
  margin: 2px 0 0;
}

/* 요약 통계 지표 카드 */
.users-summary-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.summary-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--shadow);
}
.summary-label {
  font-size: var(--font-l5);
  font-weight: 600;
  color: var(--muted);
}
.summary-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.text-success { color: var(--green) !important; }
.text-primary { color: var(--blue) !important; }

/* 검색 및 필터 툴바 */
.users-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.users-search-wrap {
  flex: 1;
  position: relative;
}
.users-search-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
  pointer-events: none;
}
.users-search-wrap input {
  width: 100%;
  height: var(--control-height);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0 10px 0 30px;
  font-size: var(--font-l4);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.users-search-wrap input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(18, 103, 232, 0.15);
}
.users-filter-bar select {
  height: var(--control-height);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font-size: var(--font-l4);
  outline: none;
  box-sizing: border-box;
}
.users-filter-bar select:focus {
  border-color: var(--blue);
}

/* 사용자 데이터 테이블 카드 */
.users-table-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.users-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.users-table th {
  background: #f8fafc;
  padding: 10px 14px;
  font-size: var(--font-l5);
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.02em;
}
.users-table td {
  padding: 10px 14px;
  font-size: var(--font-l4);
  color: var(--ink);
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.users-table tr:last-child td {
  border-bottom: none;
}
.users-table tr:hover td {
  background: #f8fafc;
}
.users-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: var(--font-l4);
}

/* 권한 및 상태 배지 */
.role-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.role-badge.admin {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.role-badge.operator {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.role-badge.viewer {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
}
.status-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.status-badge.active {
  color: var(--green);
}
.status-badge.active i {
  background: var(--green);
  box-shadow: 0 0 5px rgba(22, 163, 74, 0.4);
}
.status-badge.inactive {
  color: var(--muted);
}
.status-badge.inactive i {
  background: #94a3b8;
}

.users-actions-cell {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}
.btn-action-sm {
  height: var(--control-height-sm) !important;
  padding: 0 8px !important;
  font-size: var(--font-l5) !important;
  border-radius: var(--radius-sm) !important;
}

/* 사용자 관리 팝업 모달 */
.user-modal, .password-modal {
  width: min(440px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  padding: 16px 20px;
}
.user-modal .modal-head, .password-modal .modal-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.user-modal .modal-head h3, .password-modal .modal-head h3 {
  color: var(--ink);
  font-size: var(--font-l1);
  font-weight: 700;
}
.user-modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.user-modal-body .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-modal-body .form-row label {
  font-size: var(--font-l5);
  font-weight: 600;
  color: #475569;
}
.req {
  color: var(--red);
  font-weight: 700;
  margin-left: 2px;
}
.field-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}
.user-modal-body .form-row input, .user-modal-body .form-row select {
  height: var(--control-height);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font-size: var(--font-l4);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.user-modal-body .form-row input:focus, .user-modal-body .form-row select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(18, 103, 232, 0.15);
}
.form-row-checkbox {
  padding-top: 2px;
}
.form-row-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-l4);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.modal-error {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--red);
  font-size: 12px;
  text-align: center;
}
.modal-info-text {
  font-size: 13px;
  color: #475569;
  margin: 0 0 4px;
}

/* Tenant Management Modal */
.tenant-modal {
  width: 720px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tenant-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px;
}
.tenant-create-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-sizing: border-box;
}
.tenant-create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.tenant-create-box .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tenant-create-box .form-row label {
  font-size: var(--font-l5);
  font-weight: 600;
  color: #475569;
}
.tenant-create-box .form-row input {
  height: var(--control-height);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font-size: var(--font-l4);
  box-sizing: border-box;
  width: 100%;
}
.tenant-create-box .form-row input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(18, 103, 232, 0.15);
}
.tenant-create-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.tenant-create-submit button {
  height: var(--control-height);
  padding: 0 16px;
  white-space: nowrap;
}
.tenant-table-wrap {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.tenant-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.tenant-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 600;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}
.tenant-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--ink);
  vertical-align: middle;
}
.tenant-table tr:hover td {
  background: #f8fafc;
}
.tenant-table .tenant-actions {
  display: flex;
  gap: 6px;
}

/* Resource Monitoring Modal */
.resource-modal {
  width: 660px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  box-sizing: border-box;
  overflow-y: auto;
}
.resource-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.stat-value.stat-ok {
  color: #16a34a;
}

/* Reauth Modal */
.reauth-modal {
  width: 380px;
  max-width: calc(100vw - 32px);
}

/* Resources & Tenants View Enhancements */
.resources-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px;
  margin-bottom: 16px;
}
.resources-summary-grid .summary-card {
  padding: 12px 14px;
  min-width: 0;
  gap: 4px;
}
.resources-summary-grid .summary-label {
  font-size: var(--font-l5);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.resources-summary-grid .summary-val {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.plan-badge.enterprise {
  background: #fdf2f8;
  color: #be185d;
  border: 1px solid #fbcfe8;
}
.plan-badge.standard {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.plan-badge.trial {
  background: #fefce8;
  color: #a16207;
  border: 1px solid #fef08a;
}

/* ==========================================================
   헤이홈 기기 검색 및 선택 모달 (Device Discovery Modal)
   ========================================================== */
.device-discovery-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s ease-out;
}
.device-discovery-modal {
  width: min(840px, calc(100vw - 32px));
  max-height: 88vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleUp 0.18s ease-out;
}
.device-discovery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.device-discovery-head h3 {
  margin: 2px 0 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.device-discovery-head .eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  letter-spacing: 0.5px;
}
.device-discovery-notice {
  margin: 12px 20px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.device-discovery-notice.notice-live {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.device-discovery-notice.notice-preview {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.device-discovery-body {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.device-discovery-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.15s ease;
}
.device-discovery-search:focus-within {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}
.device-discovery-search input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: #1e293b;
}
.device-discovery-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.device-discovery-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.device-discovery-tab:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.device-discovery-tab.active {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
  font-weight: 700;
}
.device-discovery-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 48vh;
  min-height: 160px;
  padding-right: 4px;
}
.device-discovery-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  transition: all 0.15s ease;
  cursor: pointer;
}
.device-discovery-card:hover {
  border-color: #38bdf8;
  background: #f0f9ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(56, 189, 248, 0.12);
}
.device-discovery-card.is-current {
  border-color: #10b981;
  background: #f0fdf4;
}
.device-discovery-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.device-discovery-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.device-discovery-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.device-discovery-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.device-discovery-sub {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.device-discovery-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  background: #f1f5f9;
  color: #0284c7;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}
.btn-discovery-select {
  height: var(--control-height-sm, 24px);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: var(--blue, #1267e8);
  border: 1px solid var(--blue, #1267e8);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-discovery-select:hover {
  background: #0d59cc;
  border-color: #0d59cc;
}
@keyframes flashHighlight {
  0% { background-color: #bae6fd; box-shadow: 0 0 0 3px #0284c7; }
  100% { background-color: transparent; box-shadow: none; }
}
.flash-highlight {
  animation: flashHighlight 1.5s ease-out;
}

/* Hejhome authentication and device mapping */
#hejWebAuth[hidden],#hejApiAuth[hidden],#hejDeviceConfig[hidden],#hejIrFields[hidden],#hejInfoResult[hidden]{display:none!important}
#hejDeviceConfig .oauth-tool-body{flex-wrap:wrap}
#hejDeviceConfig .oauth-tool-body select{max-width:100%;height:var(--control-height)}
#hejInfoResult{width:100%;box-sizing:border-box;margin-top:8px;min-height:110px;resize:vertical;white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:var(--font-l5)}
#hejWebAuth .field{margin-top:6px}
#hejApiAuth{margin-top:8px}
.oauth-tool-body{flex-wrap:wrap}

/* Simple API point setup: technical fields stay in the collapsed advanced section. */
.modal-api-point-simple .field{margin-bottom:9px}
.api-point-simple{display:grid;gap:2px}
.api-point-simple label{font-size:var(--font-l4)}
.api-device-picker,.api-remote-picker{display:flex;gap:8px;align-items:center;min-width:0}
.api-device-picker{border:1px solid var(--line);border-radius:var(--radius-md);padding:7px 8px;background:var(--soft)}
.api-device-picker span{flex:1;overflow-wrap:anywhere;min-width:0;font-size:var(--font-l4);color:var(--ink)}
.api-remote-picker select{flex:1;min-width:0}
.api-point-summary{font-size:var(--font-l5);color:var(--muted);line-height:1.6}
.api-point-details{margin:10px 0 0;border-top:1px solid var(--line);padding-top:9px}
.api-point-details summary{font-size:var(--font-l4);font-weight:600;color:var(--ink);cursor:pointer;padding:4px 0 9px}
.api-point-details .oauth-section-desc{margin:0 0 8px}
.api-point-inspect{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.api-point-info{font-size:var(--font-l5);font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow-y:auto;background:var(--soft);padding:8px;border-radius:var(--radius-md)}
.api-point-check{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.api-point-check input{width:auto;height:auto}
.api-point-simple [hidden],.modal-api-point-simple details[hidden],.api-point-info[hidden]{display:none!important}
.modal-api-point-simple input[readonly]{background:var(--bg);color:var(--muted)}
@media(max-width:600px){.modal-api-point-simple .form-row{grid-template-columns:1fr}.api-remote-picker{flex-wrap:wrap}}

.modal:has(#apiPointSimple){width:min(560px,calc(100vw - 24px));max-height:92vh;overflow-x:hidden}
.modal:has(#apiPointSimple) input,.modal:has(#apiPointSimple) select{height:var(--control-height);min-width:0}
.modal-api-point-simple .api-point-check input{height:auto}

/* Status messages must remain visible above setup and device picker dialogs. */
.toast { z-index: 2200; }
#apDiscoveryStatus { margin: 5px 0 0; overflow-wrap: anywhere; }

#apiPointSimple #apAutoFlow[hidden],#apiPointSimple #apManualNotice[hidden],#apiPointSimple #apVersionWrap[hidden]{display:none!important}
#apiPointSimple .api-remote-picker select{min-width:0;flex:1}
#apiPointSimple #apStatus:not(:empty),#apiPointSimple #apDiscoveryStatus:not(:empty){padding:7px 9px;background:var(--soft);border-radius:var(--radius-sm);overflow-wrap:anywhere}
#apiPointSimple .api-point-inspect{flex-wrap:wrap;margin:5px 0 10px}
#apStateResult{font-size:var(--font-l5);color:var(--muted);overflow-wrap:anywhere}

/* Device control binding editor */
.uc-layout{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px}.uc-list{display:flex;flex-direction:column;gap:6px}.uc-list .btn{height:auto;min-height:30px;white-space:normal;overflow-wrap:anywhere}.uc-binding{border:1px solid var(--line,#dce4ee);border-radius:7px;padding:10px;margin:8px 0}.uc-order{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:8px}.bound-control label{display:flex;align-items:center;justify-content:space-between;gap:6px}.bound-control .range-row input[type=number]{width:95px;min-width:65px}.bound-control .control-grid{display:flex;flex-wrap:wrap;gap:6px}.bound-control .control-grid .btn{flex:1;min-width:65px}.uc-layout input,.uc-layout select{min-width:0;width:100%}.uc-layout details{margin:8px 0}.uc-layout summary{cursor:pointer;font-size:12px;color:var(--muted)}@media(max-width:620px){.uc-layout{grid-template-columns:1fr}.uc-list{flex-direction:row;flex-wrap:wrap}}

.modal.modal-device-controls{width:min(860px,calc(100vw - 32px));max-width:860px}.modal-device-controls .modal-body{overflow:auto}.modal-device-controls .uc-layout .form-row{display:flex;flex-wrap:wrap;gap:8px}.modal-device-controls .uc-layout .field{flex:1 1 100px;min-width:0}.modal-device-controls .uc-binding{margin-bottom:10px}
.modal.modal-device-controls{display:flex;flex-direction:column;overflow:hidden}.modal-device-controls #modalBody{min-height:0;overflow:auto}.modal-device-controls .modal-head,.modal-device-controls .modal-actions{flex-shrink:0}.modal-device-controls .uc-layout input{height:var(--control-height);border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:0 8px;font:inherit;color:var(--ink);box-sizing:border-box}.modal-device-controls .uc-layout .form-row[data-feedback-row],.modal-device-controls .uc-layout .form-row[data-context-row]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.modal-device-controls .uc-list{align-self:start}

/* Product family equipment registration */
.equipment-library-toolbar{padding:6px 0 10px}.equipment-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.equipment-choice{display:flex;align-items:center;gap:10px;padding:16px;border:1px solid var(--line);border-radius:7px;cursor:pointer}.equipment-choice:has(input:checked){border-color:var(--blue);background:var(--soft)}.equipment-step-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.equipment-register-row{display:grid;grid-template-columns:130px minmax(0,1fr) 65px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.equipment-register-row input:not([type=checkbox]){height:30px;width:100%;min-width:0;border:1px solid var(--line);border-radius:5px;padding:0 8px;box-sizing:border-box;font:inherit}.equipment-register-row label{font-size:12px}.equipment-register-row input[hidden]{display:none}.equipment-register-row:has(input[type=checkbox]:not(:checked)) input:not([type=checkbox]){opacity:.5}#equipmentWizardError,#equipmentBindingError{font-size:12px;color:var(--red);margin:8px 0 0}.library-card .library-meta small{display:block;font-size:11px;color:var(--muted);margin-top:3px}@media(max-width:520px){.equipment-register-row{grid-template-columns:100px minmax(0,1fr) 50px}}

.equipment-register-header{display:grid;grid-template-columns:130px minmax(0,1fr) 65px;gap:8px;color:var(--muted);font-size:11px;margin:4px 0}@media(max-width:520px){.equipment-register-header{grid-template-columns:100px minmax(0,1fr) 50px}}
/* Equipment kinds and family groups */
.field label.equipment-choice{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0;min-height:48px;padding:10px 14px;box-sizing:border-box;line-height:1.4}.field label.equipment-choice input[type=radio]{position:static;appearance:auto;flex:0 0 16px;width:16px;height:16px;margin:0;padding:0;transform:none}.field label.equipment-choice span{display:block;line-height:20px;min-width:0;font-size:12px}.equipment-register-row,.equipment-register-header{grid-template-columns:minmax(130px,1fr) minmax(0,1.4fr)}.equipment-register-row .api-point-check{display:flex;align-items:center;gap:8px;margin:0;min-height:30px}.equipment-register-row input[type=checkbox]{position:static;appearance:auto;flex:0 0 16px;width:16px;height:16px;margin:0;transform:none}.equipment-family-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:6px 8px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:left}.equipment-family-toggle .count{margin-left:auto}.equipment-family-items{padding-top:6px}.equipment-family-items[hidden],.equipment-family-group[hidden]{display:none}.equipment-family-group{margin-bottom:8px}@media(max-width:520px){.equipment-register-row,.equipment-register-header{grid-template-columns:minmax(110px,1fr) minmax(0,1.3fr)}}

.btn.equipment-reported{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}

/* Let the inspector scroll without shrinking and clipping its cards. */
.monitor-inspector > *{flex-shrink:0}

/* Map objects show icons; current values remain in the selected-device inspector. */
#monitorLayer .node-data-label{display:none}

.api-receive-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--font-l4)}.api-receive-row span{min-width:0;overflow-wrap:anywhere}.api-receive-row small{color:var(--muted);font-size:var(--font-l5)}

/* ROI mode device membership editor */
.mode-device-toolbar,.mode-device-picker-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.mode-device-toolbar>.count{margin-right:auto}
.mode-device-options{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.mode-device-option{display:flex;align-items:center;gap:8px;min-height:30px;cursor:pointer}
.mode-device-option input{width:16px;height:16px;flex:none}
.mode-device-picker-actions{margin:6px 0 0}

#modeDevicePicker[hidden]{display:none!important}
.mode-device-drag{display:flex;align-items:center;gap:6px;cursor:grab;min-width:0;flex:1;user-select:none}
.mode-device-drag:active{cursor:grabbing}
.mode-device-drag b{overflow-wrap:anywhere}
.mode-device-dragging{opacity:.45}
.mode-device-drop-before{box-shadow:0 -3px 0 var(--blue)}
.mode-device-drop-after{box-shadow:0 3px 0 var(--blue)}

.mode-device-toolbar .mode-device-picker-actions{margin:0}
.mode-device-picker-actions[hidden],#modeAddDevice[hidden]{display:none!important}

/* Keep blind position controls on one row in the narrow inspector. */
.blind-control .range-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 14px;align-items:center;gap:8px;width:100%;min-width:0}
.blind-control .range-row input[type=range]{width:100%;min-width:0;margin:0;accent-color:var(--blue)}
.blind-control .range-row input[type=number]{width:64px;min-width:0;height:var(--control-height,30px);text-align:right;padding:0 8px}
.blind-control .range-row>span{font-size:var(--font-l5,11px);color:var(--muted)}
.blind-control>label{font-size:var(--font-l4,12px);min-height:24px;flex-wrap:wrap}
.blind-control>label .muted{font-size:var(--font-l5,11px);font-weight:400;margin-left:auto}
.blind-control .control-grid .btn{height:var(--control-height,30px);min-width:0}

/* Make the selected blind action distinct from hover and keyboard focus. */
.bound-control .control-grid .btn[aria-pressed="true"]{background:#1267e8!important;color:#fff!important;border:2px solid #0848ad!important;font-weight:700;box-shadow:0 0 0 2px #dbeafe!important}
.bound-control .control-grid .btn[aria-pressed="false"]{background:#fff!important;color:#334155!important;border:1px solid var(--line,#dce4ee)!important;box-shadow:none!important}
.bound-control .control-grid .btn[aria-pressed="true"]:hover{background:#0b57c7!important}
.bound-control .control-grid .btn:focus-visible{outline:2px solid #64748b;outline-offset:3px}
.blind-action-status{min-height:16px;margin:7px 0 0;color:var(--muted,#64748b);font-size:var(--font-l5,11px);line-height:16px}
.blind-action-status.has-selection{color:#0848ad;font-weight:700}

/* Legacy device controls use the same selected state. */
.control-grid .control-power.active,.control-grid .control-occupancy.active{background:#1267e8!important;color:#fff!important;border:2px solid #0848ad!important;font-weight:700;box-shadow:0 0 0 2px #dbeafe!important}
.control-grid .control-power:not(.active),.control-grid .control-occupancy:not(.active){background:#fff!important;color:#334155!important;border:1px solid var(--line,#dce4ee)!important;box-shadow:none!important}

/* Device connections manage API mappings internally. */
[data-left-tab="sources"],#setupAdvancedNav,#sourceLibrary{display:none!important}

#deviceConnection .form-row{align-items:end}

#deviceConnection .device-connection-service{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;margin-bottom:10px}
#deviceConnection .device-connection-service .field{margin:0}
#dcDiscover{height:var(--control-height,30px);align-self:end;margin:0}
.device-connection-members{display:grid;gap:8px;max-height:220px;overflow:auto;padding:8px 0}
.device-connection-members label{display:flex;align-items:center;gap:8px}
.device-connection-members input[type=checkbox]{width:16px;height:16px;margin:0}

.device-connection-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0;padding:10px;border:1px solid var(--line,#dce4ee);border-radius:var(--radius-sm,5px)}
.device-connection-summary>span{display:block;white-space:nowrap;font-size:var(--font-l5,11px);color:var(--muted,#64748b);line-height:1.5}
.device-connection-summary>b{display:block;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:var(--font-l4,12px);line-height:1.5}

.device-connection-action{min-width:0;margin:10px 0;padding:10px;border:1px solid var(--line,#dce4ee);border-radius:var(--radius-sm,5px)}
.device-connection-action h4{margin:0 0 10px;font-size:var(--font-l4,12px)}
#deviceConnection .device-connection-repeat{display:flex;align-items:center;gap:8px;margin:8px 0 0;line-height:1.5;white-space:normal}
#deviceConnection .device-connection-repeat input{position:static;flex:0 0 16px;width:16px;height:16px;margin:0;appearance:auto}

#addGatewayBtn{display:none!important}
.api-connection-status{display:grid;gap:12px;margin-bottom:14px;min-width:0}
.api-connection-status>div{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2fr);gap:12px;align-items:start}
.api-connection-status span{color:var(--muted,#64748b)}
.api-connection-status b{overflow-wrap:anywhere;font-weight:600}

.modal.modal-tenant-equipment{width:min(860px,95vw);max-width:95vw}
#tenantInstallationBtn[hidden]{display:none!important}
.installation-counts{display:flex;flex-wrap:wrap;gap:12px;padding:10px 0}
.installation-table>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(80px,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.installation-table span{overflow-wrap:anywhere}
#manufacturerEquipmentError,#tenantEquipmentError{color:var(--red);font-size:12px}
#modalBody .device-connection-service{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}