/* Compact industrial configuration workspace, independent of monitoring styles. */
#configView.roi-workspace{grid-template-columns:252px minmax(400px,1fr) 350px;grid-template-rows:minmax(0,1fr) 34px;height:calc(100vh - var(--topbar-height,50px));gap:1px;background:#dbe3ed;overflow:hidden}
#configView.roi-workspace.scenario-expanded{grid-template-rows:minmax(120px,1fr) minmax(120px,var(--scenario-height,27.47%));overflow:hidden}
#configView .panel,#configView .editor{background:#fff;min-width:0;min-height:0}
#configView .setup-guide{display:none}
#configView .editor-toolbar{padding:0 10px;gap:6px;height:var(--header-height,40px);min-height:var(--header-height,40px);display:flex;align-items:center;box-sizing:border-box}
#configView .editor-toolbar .btn{height:26px;padding:0 8px;font-size:11px}
#configView .legend{font-size:11px;padding:4px 10px;gap:12px;height:30px;display:flex;align-items:center}
#configView .canvas-viewport{min-height:120px}
#configView .left-panel,
#configView.roi-workspace > .left-panel,
#configView.roi-workspace.scenario-expanded > .left-panel{grid-column:1;grid-row:1/-1;height:100%;min-height:0;overflow:auto;padding:10px 12px;background:#fff}
#configView .left-panel h2{font-size:var(--font-l2,13px);margin:0;font-weight:700}
#configView .left-panel .panel-title{height:var(--header-height,40px);min-height:var(--header-height,40px);margin:0 0 6px;padding:0;display:flex;align-items:center;box-sizing:border-box}
#configView .library-content{height:auto;overflow:visible;padding:4px 0}
#configView .library-card{margin-bottom:5px;padding:6px 10px;min-height:38px}
#configView .library-card.gateway-card{cursor:pointer}
#configView .library-card.gateway-card .gateway-actions{display:flex;flex-direction:row;align-items:center;gap:4px;margin-top:0;flex-shrink:0}
#configView .library-card.gateway-card .gateway-actions button{padding:3px 6px;height:24px;font-size:11px;font-weight:500;border:1px solid var(--line,#cbd5e1);background:#fff;border-radius:4px;cursor:pointer;color:#334155;white-space:nowrap;line-height:1;transition:all .15s ease}
#configView .library-card.gateway-card .gateway-actions button:hover{background:#f1f5f9;border-color:#94a3b8}
#configView .library-card.gateway-card .gateway-actions button.btn-edit-gw{background:#f8fafc;color:var(--blue,#1267e8);border-color:#cbd5e1}
#configView .library-card.gateway-card .gateway-actions button.btn-edit-gw:hover{background:#eff6ff;border-color:var(--blue,#1267e8)}
#configView .library-card .drag-handle{margin-left:auto;flex:none;width:18px;text-align:center}
.designer-area-title{display:none}
#configView .roi-workspace-context{height:var(--header-height,40px);min-height:var(--header-height,40px);padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:#f8fafc;box-sizing:border-box}
#configView .right-content{padding:8px 10px}
#configView .section-head{min-height:36px;padding:5px 10px;display:flex;align-items:center;box-sizing:border-box}
#configView .section-body{padding:8px 10px}
#configView .field{margin-bottom:8px}
#configView .field input,#configView .field select{height:var(--control-height,30px);min-height:var(--control-height,30px);padding:0 8px;font-size:12px;box-sizing:border-box}
#configView .mode-card{margin-bottom:6px;padding:8px 10px}
#configView .mode-zone-picker{display:none}
#configView .mode-actions{font-size:11px}
.designer-common{border-top:1px solid #dce5ee;margin-top:10px;padding-top:8px}
.designer-common h3{font-size:12px;font-weight:700;color:#475569;margin:0 0 6px}
.designer-roi-handle{position:absolute;width:13px;height:13px;transform:translate(-50%,-50%);border:2px solid #ffffff;border-radius:50%;background:#176ec8;box-shadow:0 0 0 1.5px #0f56a0, 0 2px 6px rgba(0,0,0,0.35);z-index:35;pointer-events:auto;cursor:grab;padding:0;touch-action:none;transition:transform .12s ease,background-color .12s ease,box-shadow .12s ease}
.designer-roi-handle:hover{transform:translate(-50%,-50%) scale(1.3);background:#00b4ff;box-shadow:0 0 0 2px #ffffff, 0 0 10px rgba(0,180,255,0.85)}
.designer-roi-handle.dragging{cursor:grabbing!important;transform:translate(-50%,-50%) scale(1.35)!important;background:#00e5ff!important;box-shadow:0 0 0 2.5px #ffffff, 0 0 14px rgba(0,229,255,0.95)!important}
.designer-roi-handle.rect-handle{border-radius:3px;cursor:nwse-resize}
.designer-roi-handle.circle-handle{border-radius:50%;cursor:ew-resize}

/* ROI 다각형 변(Edge) 클릭 삽입 및 실선 가이드 (점선 완전 제거, 십자선 커서) */
.roi-edge-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:31}
.roi-edge-group{pointer-events:stroke;cursor:crosshair!important}
.roi-edge-guide{stroke:transparent;stroke-width:3px;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none;transition:stroke .12s ease,stroke-width .12s ease}
.roi-edge-hit-line{stroke:transparent;stroke-width:16px;stroke-linecap:round;vector-effect:non-scaling-stroke;cursor:crosshair!important;pointer-events:stroke}
.roi-edge-group:hover .roi-edge-guide{stroke:#00f0ff;stroke-width:3.5px;filter:drop-shadow(0 0 6px rgba(0,240,255,0.85))}


#configView>#scenarioView{position:relative;grid-column:2/4;grid-row:2;grid-template-columns:165px minmax(280px,1fr) 300px;grid-template-rows:35px minmax(0,1fr);min-height:0;height:100%;overflow:hidden;border-top:0;background:#fff}
#configView>#scenarioView.scenario-collapsed{display:block;min-height:34px;height:34px;overflow:hidden;background:#f1f6fd}
.scenario-resizer{position:absolute;top:0;left:0;right:0;height:8px;cursor:row-resize;cursor:ns-resize;z-index:100;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;background:transparent;transition:background-color .15s}
.scenario-resizer::after{content:'';width:48px;height:3px;border-radius:2px;background:#94a3b8;transition:all .15s}
.scenario-resizer:hover{background:rgba(59,130,246,0.12)}
.scenario-resizer:hover::after,.scenario-resizer.is-dragging::after{background:#2563eb;width:72px;height:4px;box-shadow:0 0 6px rgba(37,99,235,0.4)}
#configView>#scenarioView.scenario-collapsed .scenario-resizer{display:none}
body.scenario-resizing{cursor:row-resize!important;user-select:none!important}
.scenario-toggle{display:flex;align-items:center;justify-content:flex-start;width:100%;height:34px;border:0;background:#f1f6fd;color:#285f91;font-size:12px;font-weight:700;text-align:left;padding:0 14px;cursor:pointer;user-select:none;box-sizing:border-box}
.scenario-toggle::before{content:'⌃';display:inline-block;margin-right:7px;transform:rotate(180deg)}
#configView>#scenarioView:not(.scenario-collapsed) .scenario-toggle{grid-column:1/-1;text-align:left;border-bottom:1px solid #dbe3ed}
#configView>#scenarioView:not(.scenario-collapsed) .scenario-toggle::before{transform:none}
.scenario-toggle-label{display:inline-block;white-space:nowrap}
.scenario-toggle-hint{font-size:11px;font-weight:normal;color:#64748b;margin-left:auto;pointer-events:none;opacity:0.85;white-space:nowrap}
.designer-roi-selector{display:flex;align-items:center;gap:8px;padding:6px 0 8px;font-size:11px;font-weight:700;color:#3a526e;border-bottom:1px solid #e5ecf4;margin-bottom:8px}
.designer-roi-selector span{white-space:nowrap;flex-shrink:0;color:#45607e}
.designer-roi-selector select{flex:1;min-width:0;border:1px solid #c8d7e6;border-radius:5px;padding:4px 6px;background:#fff;font-size:11px;color:#223c58}
#configView #scenarioView .scenario-side,#configView #scenarioInspector{grid-row:2;grid-column:auto;overflow:auto;padding:9px;min-height:0}
#configView #scenarioView .scenario-main{grid-row:2;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#configView #scenarioView .scenario-toolbar{height:auto;min-height:36px;padding:4px 10px;gap:6px;flex-shrink:0;box-sizing:border-box}
#configView #scenarioView .scenario-toolbar #scenarioHeader{display:flex;flex-direction:column;gap:1px;min-width:0}
#configView #scenarioView .scenario-toolbar h2{font-size:12px;font-weight:700;margin:0;line-height:1.2;color:#1e293b}
#configView #scenarioView .scenario-toolbar p{font-size:10px;margin:0;line-height:1.2;color:#64748b}
#configView #scenarioView .scenario-toolbar .btn{font-size:11px;padding:3px 8px;height:24px}
#configView #scenarioView .scenario-side h1{font-size:13px}
#configView #scenarioView .scenario-side .eyebrow{display:none}
#configView #scenarioView .scenario-side-head{gap:6px}
#configView #scenarioView .scenario-side .btn{font-size:11px;padding:4px}
.scenario-side-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
#configView #scenarioView .scenario-inspector-title h2{font-size:13px}
.scenario-flow{display:flex;flex-direction:column;flex:1;min-height:0;padding:0;overflow:hidden;background:#f8fafc;align-items:stretch;width:100%;box-sizing:border-box}
.designer-palette{display:flex;align-items:center;gap:6px;padding:4px 10px;border-bottom:1px solid #e2e8f0;background:#ffffff;flex-wrap:wrap;width:100%;box-sizing:border-box;box-shadow:0 1px 3px rgba(15,23,42,0.03);z-index:5}
.designer-palette button[data-flow-kind]{display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:3px 7px;font-size:10px;font-weight:700;cursor:grab;transition:all 0.15s ease}
.designer-palette button[data-flow-kind]:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(15,23,42,0.08)}
.designer-palette button[data-flow-kind="trigger"]{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.designer-palette button[data-flow-kind="judgment"]{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.designer-palette button[data-flow-kind="action"]{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.designer-palette span#designerConnectHint{font-size:10px;color:#64748b;display:inline-flex;align-items:center;gap:4px;flex:1;min-width:180px}
.designer-palette button#designerArrange{background:#ffffff;border:1px solid #cbd5e1;border-radius:6px;padding:3px 8px;font-size:10px;font-weight:600;color:#334155;cursor:pointer;transition:all 0.15s ease}
.designer-palette button#designerArrange:hover{background:#f8fafc;border-color:#94a3b8}

.designer-flow-scroll{overflow:auto;flex:1;min-height:0;width:100%;box-sizing:border-box}
.designer-flow-canvas{position:relative;background-color:#f8fafc;background-image:radial-gradient(#cbd5e1 1.2px,transparent 1.2px);background-size:20px 20px;min-width:100%;min-height:100%;box-sizing:border-box}

.designer-edges{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;min-width:100%;min-height:100%}
.designer-edges g{pointer-events:visiblePainted}
.designer-edges .edge-hit{fill:none;stroke:transparent;stroke-width:16px;pointer-events:stroke;cursor:pointer}
.designer-edges .edge-line{fill:none;stroke:#64748b;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke 0.15s ease,stroke-width 0.15s ease}
.designer-edges .edge-line.branch-true{stroke:#10b981}
.designer-edges .edge-line.branch-false{stroke:#f43f5e}
.designer-edges .edge-group:hover .edge-line{stroke:#ef4444!important;stroke-width:2.8px!important}

.designer-edge-badge{pointer-events:stroke;cursor:pointer}
.designer-edge-badge rect{fill:#ffffff;stroke:#cbd5e1;stroke-width:1px;filter:drop-shadow(0 1.5px 3px rgba(15,23,42,0.08));transition:all 0.15s ease}
.designer-edge-badge text{font-size:8px;font-weight:700;fill:#475569;font-family:inherit;user-select:none}
.designer-edge-badge.branch-true rect{fill:#ecfdf5;stroke:#6ee7b7}
.designer-edge-badge.branch-true text{fill:#047857}
.designer-edge-badge.branch-false rect{fill:#fff1f2;stroke:#fca5a5}
.designer-edge-badge.branch-false text{fill:#be123c}
.designer-edges .edge-group:hover .designer-edge-badge rect{fill:#fef2f2;stroke:#ef4444}
.designer-edges .edge-group:hover .designer-edge-badge text{fill:#dc2626}

.designer-node{position:absolute;width:176px;min-height:69px;border:1px solid #cbd5e1;background:#ffffff;border-radius:10px;box-shadow:0 3px 11px -2px rgba(15,23,42,0.07),0 2px 5px -1px rgba(15,23,42,0.04);touch-action:none;transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease;box-sizing:border-box;overflow:visible;display:flex;flex-direction:column}
.designer-node:hover{border-color:#94a3b8;box-shadow:0 6px 18px -3px rgba(15,23,42,0.11),0 3px 6px -2px rgba(15,23,42,0.05);transform:translateY(-1.5px)}
.designer-node.selected{border-color:#3b82f6!important;box-shadow:0 0 0 2px #3b82f6,0 6px 20px -3px rgba(59,130,246,0.28)!important;transform:translateY(-1.5px)}
.designer-node.trigger{border-top:2.5px solid #3b82f6}
.designer-node.judgment{border-top:2.5px solid #8b5cf6;min-height:75px}
.designer-node.action{border-top:2.5px solid #10b981}

.flow-node-body{display:flex;flex-direction:column;text-align:left;background:transparent;border:0;padding:6px 10px 8px;width:100%;height:100%;cursor:move;color:#0f172a;box-sizing:border-box;overflow:hidden;border-radius:8px}
.flow-node-header{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:4px;width:100%}
.flow-node-tag-wrap{display:flex;align-items:center;gap:4px}
.flow-node-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:3px;font-size:8px;font-weight:800;line-height:1}
.flow-node-icon.trigger-badge{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}
.flow-node-icon.judgment-badge{background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe}
.flow-node-icon.action-badge{background:#ecfdf5;color:#059669;border:1px solid #a7f3d0}
.flow-node-kind-label{font-size:8px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase}
.trigger .flow-node-kind-label{color:#1d4ed8}
.judgment .flow-node-kind-label{color:#6d28d9}
.action .flow-node-kind-label{color:#047857}
.flow-node-type-pill{font-size:7.5px;font-weight:600;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;padding:1px 4px;border-radius:3px;white-space:nowrap}

.flow-node-content{display:flex;flex-direction:column;gap:1.5px;width:100%;overflow:hidden}
.flow-node-title{font-size:10px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.flow-node-desc{font-size:8.5px;color:#64748b;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}

.flow-port{position:absolute;width:11px;height:11px;border:0;padding:0;background:transparent;cursor:crosshair;z-index:4;display:flex;align-items:center;justify-content:center}
.flow-port .port-socket{width:10px;height:10px;background:#ffffff;border:1.5px solid #94a3b8;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,0.1);transition:all 0.15s ease;box-sizing:border-box;display:block}
.flow-port:hover .port-socket{border-color:#3b82f6;background:#eff6ff;transform:scale(1.25);box-shadow:0 0 0 2px rgba(59,130,246,0.25)}
.flow-port.in{left:-5.5px;top:50%;transform:translateY(-50%)}
.flow-port.out{right:-5.5px;top:50%;transform:translateY(-50%)}
.flow-port.out .port-socket{border-color:#3b82f6}

.designer-empty{padding:40px 20px;color:#6f8299;text-align:center;font-size:13px}.designer-empty small{display:block;margin-top:10px}
@media(max-width:1100px){#configView.roi-workspace{grid-template-columns:220px minmax(330px,1fr) 290px}#configView>#scenarioView{grid-template-columns:145px minmax(250px,1fr) 240px}}
@media(max-width:850px){#configView.roi-workspace{display:block;height:auto;overflow:visible}#configView .left-panel{max-height:260px}#configView .editor{height:450px}#configView .right-panel{max-height:500px}#configView>#scenarioView{display:grid;grid-template-columns:150px minmax(280px,1fr);grid-template-rows:40px 370px auto;overflow:auto}#configView #scenarioInspector{grid-row:3;grid-column:1/-1;max-height:320px}}

/* Hide small explanatory texts and auto-run checkbox in scenario center area */
#scenarioHeader p { display: none !important; }
.runtime-note { display: none !important; }
.runtime-auto { display: none !important; }
.designer-palette span#designerConnectHint { display: none !important; }
.designer-palette button#designerArrange { margin-left: auto; }

/* ========================================================================== */
/* Action 카드 내 다중 장비 출력 설정 UI (개선된 프리미엄 스타일)             */
/* ========================================================================== */
.action-devices-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.action-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 2px;
}
.action-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.action-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}
.action-section-count {
  font-size: 10.5px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.2;
}
.action-section-subtitle {
  font-size: 10.5px;
  color: #64748b;
}

.action-devices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 개별 장비 제어 카드 */
.action-device-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.action-device-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

/* 카드 상단 헤더 */
.action-device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.action-device-title-box {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.action-device-icon {
  display: none !important;
}
.action-device-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}
.action-device-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.action-device-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 145px;
  line-height: 1.25;
}
.action-device-type-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.25;
}
.action-device-meta-row {
  display: none !important;
}

/* 삭제 버튼 (정돈된 아이콘 버튼) */
.btn-remove-action-dev {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #ef4444;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s ease;
  line-height: 1;
}
.btn-remove-action-dev:hover {
  background: #ef4444;
  color: #ffffff;
  border-color: #dc2626;
  transform: scale(1.05);
}

/* 카드 구분선 */
.action-device-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 0;
}

/* 카드 컨트롤 영역 */
.action-device-controls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 세그먼트 버튼 (동작 전원) */
.action-control-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.action-control-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.action-control-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
}
.action-power-segmented {
  display: flex;
  background: #f1f5f9;
  padding: 2px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  gap: 2px;
}
.action-power-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 3px 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.action-power-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}
.action-power-btn.active {
  background: #ffffff;
  color: #2563eb;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.action-power-btn.active.off {
  color: #dc2626;
}

/* 슬라이더 컨트롤 */
.action-slider-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.action-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.action-slider-value {
  font-size: 10.5px;
  font-weight: 700;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 1px 5px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.action-slider-input {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
  accent-color: #2563eb;
  margin: 2px 0;
}

/* 포인트 연결 상태 태그 */
.action-device-point-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 1px;
}
.action-device-point-status.connected {
  color: #059669;
  background: #ecfdf5;
  border-color: #d1fae5;
}
.action-device-point-status.disconnected {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fee2e2;
}
.action-device-point-status .status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

/* 제어 장비 추가 버튼 */
.btn-add-action-dev {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  background: #f0fdf4;
  border: 1.5px dashed #86efac;
  border-radius: 6px;
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 2px;
}
.btn-add-action-dev:hover {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.15);
}

/* 실행 지연 행 */
.action-delay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  margin-top: 5px;
}
.action-delay-label {
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
}
.action-delay-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.action-delay-input-wrap input {
  width: 55px;
  height: 24px !important;
  min-height: 24px !important;
  text-align: right;
  padding: 0 5px !important;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}
.action-delay-unit {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

/* ===== 순번 뱃지 (장비 카드 좌상단) ===== */
.action-device-order-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(37,99,235,0.35);
  line-height: 1;
}

/* ===== 장비 간 딜레이 구분선 ===== */
.action-device-delay-separator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.action-delay-sep-line {
  width: 2px;
  height: 10px;
  background: linear-gradient(to bottom, #bfdbfe, #93c5fd);
  border-radius: 2px;
  flex-shrink: 0;
}
.action-delay-sep-body {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(90deg, #eff6ff, #f0fdf4);
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 3px 10px;
  box-shadow: 0 1px 4px rgba(59,130,246,0.10);
}
.action-delay-sep-icon {
  font-size: 11px;
  color: #2563eb;
}
.action-delay-sep-label {
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.02em;
}
.action-delay-sep-input {
  width: 48px !important;
  height: 22px !important;
  min-height: 22px !important;
  text-align: center;
  font-size: 11px !important;
  font-weight: 700;
  border: 1px solid #93c5fd !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #1d4ed8 !important;
  padding: 0 4px !important;
}
.action-delay-sep-unit {
  font-size: 10px;
  color: #475569;
  font-weight: 500;
  white-space: nowrap;
}

/* ===== 장비 목록 헤더 (레이블 + 추가 버튼) ===== */
.action-devices-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.action-devices-header-row label {
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}