/* ═══════════════════════════════════════════════════════════════════════════
   ═══ ★ Rule Builder — 제어 노드 / 포트 / 연결선 / 팝오버 스타일 ★ ═══
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 제어 노드 (액션/조건/타이머 등) ═══ */
.ctrl-action-node{position:absolute;width:160px;
  background:var(--glass-strong);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(var(--na-rgb),.25);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08),0 0 16px rgba(var(--na-rgb),.08);
  z-index:20;overflow:visible;
  transition:border-color .2s,box-shadow .2s;}
.dark .ctrl-action-node{
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 16px rgba(var(--na-rgb),.06);}
.ctrl-action-node:hover{border-color:rgba(var(--na-rgb),.5);
  box-shadow:0 12px 32px rgba(0,0,0,.12),0 0 24px rgba(var(--na-rgb),.18);}

/* 헤더 */
.ctrl-an-head{display:flex;align-items:center;gap:.4rem;padding:.5rem .65rem;
  background:linear-gradient(135deg,rgba(var(--na-rgb),.1),rgba(var(--na-rgb),.03));
  border-bottom:1px solid rgba(var(--na-rgb),.12);
  border-radius:12px 12px 0 0;cursor:grab;}
.ctrl-an-head:active{cursor:grabbing;}

.ctrl-an-icon{width:22px;height:22px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
  background:linear-gradient(135deg,rgba(var(--na-rgb),.18),rgba(var(--na-rgb),.06));
  border:1px solid rgba(var(--na-rgb),.25);}

.ctrl-an-name{flex:1;font-size:.62rem;font-weight:700;color:var(--text);}

.ctrl-an-del{width:18px;height:18px;border-radius:5px;
  border:1px solid transparent;background:transparent;
  color:var(--text-muted);font-size:.55rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;}
.ctrl-an-del:hover{background:rgba(255,71,87,.1);
  border-color:rgba(255,71,87,.3);color:#ff4757;}

/* 본문 */
.ctrl-an-body{padding:.5rem .65rem;cursor:pointer;
  border-radius:0 0 12px 12px;transition:background .15s;}
.ctrl-an-body:hover{background:rgba(var(--na-rgb),.06);}

.ctrl-an-summary{font-size:.55rem;color:var(--text-sec);line-height:1.4;}

/* ═══ I/O 포트 (노드 양쪽 원형 핸들) ═══ */
.ctrl-io-port{position:absolute;width:10px;height:10px;border-radius:50%;
  border:2px solid;cursor:crosshair;transition:all .2s;z-index:25;}

/* Input 포트 (좌측) */
.ctrl-io-port.port-in{left:-6px;top:50%;transform:translateY(-50%);
  border-color:var(--cyan);background:var(--surface);}
.ctrl-io-port.port-in.tbl-io{top:18px;transform:none;}

/* Output 포트 (우측) */
.ctrl-io-port.port-out{border-color:var(--cyan);background:var(--cyan);}
.ctrl-io-port.port-out.tbl-io{position:absolute;right:-6px;top:18px;}
.ctrl-io-port.port-yes{border-color:var(--green);background:var(--green);}
.ctrl-io-port.port-no{border-color:var(--text-muted);background:var(--text-muted);opacity:.6;}

/* Output 포트 컨테이너 (조건분기: Y/N 세로 배치) */
.ctrl-an-ports-out{position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;}
.ctrl-an-ports-out .ctrl-io-port{position:relative;right:auto;top:auto;transform:none;}

/* 포트 라벨 (Y/N/→) */
.port-label{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:.42rem;font-weight:700;color:var(--text-muted);
  pointer-events:none;white-space:nowrap;}

/* ─── 포트 인터랙션 ─── */
.ctrl-io-port:hover{box-shadow:0 0 10px rgba(0,206,201,.5);transform:scale(1.3);}
.ctrl-io-port.port-in:hover{background:var(--cyan);
  transform:translateY(-50%) scale(1.3);}
.ctrl-io-port.port-in.tbl-io:hover{transform:scale(1.3);}

/* 드래그 중 target 포트 강조 */
.ctrl-io-port.port-hover{background:var(--cyan) !important;
  box-shadow:0 0 14px rgba(0,206,201,.6) !important;
  transform:translateY(-50%) scale(1.5) !important;}
.ctrl-io-port.port-hover.tbl-io{transform:scale(1.5) !important;}

/* 드래그 시작한 포트 */
.ctrl-io-port.port-active{box-shadow:0 0 12px rgba(0,206,201,.5);transform:scale(1.3);}

/* 드래그 중 모든 input 포트 pulse */
.canvas.port-dragging .ctrl-io-port.port-in{animation:portPulse 1.2s ease infinite;}
@keyframes portPulse{
  0%,100%{box-shadow:0 0 4px rgba(0,206,201,.3);}
  50%{box-shadow:0 0 14px rgba(0,206,201,.6);}}

/* 테이블 노드: 규칙 빌더용은 overflow visible (포트 노출) */
.tbl-node[data-rule]{overflow:visible;}

/* ═══ 연결선 ═══ */
.rule-temp-line{fill:none;stroke:var(--cyan);stroke-width:2;
  stroke-dasharray:6 3;opacity:.7;pointer-events:none;}

.rule-conn-path{fill:none;stroke:var(--cyan);stroke-width:2;opacity:.6;
  stroke-dasharray:6 3;animation:ctrlPulse 1.5s linear infinite;
  transition:opacity .2s;}
.rule-conn-path.conn-yes{stroke:var(--green);}
.rule-conn-path.conn-no{stroke:var(--text-muted);opacity:.35;}

/* 연결 삭제 버튼 (중간점, hover 시 커지면서 표시) */
.rule-conn-badge{position:absolute;transform:translate(-50%,-50%);
  z-index:15;pointer-events:auto;padding:6px;}
.conn-x{display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--glass-strong);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1.5px solid rgba(255,71,87,.15);
  color:var(--text-muted);font-size:.55rem;font-weight:700;cursor:pointer;
  opacity:0;transition:all .2s;transform:scale(.6);}
.rule-conn-badge:hover .conn-x{opacity:1;transform:scale(1);
  background:rgba(255,71,87,.15);border-color:rgba(255,71,87,.5);color:#ff4757;
  box-shadow:0 2px 12px rgba(255,71,87,.2);}
.rule-conn-badge:hover .conn-x:hover{background:rgba(255,71,87,.25);transform:scale(1.1);}

/* ═══ 설정 팝오버 ═══ */
.ctrl-cfg-pop{position:absolute;width:220px;
  background:var(--glass-strong);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(108,92,231,.3);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.15),0 0 24px rgba(108,92,231,.1);
  z-index:50;padding:.7rem;
  opacity:0;transform:translateX(-8px);
  transition:opacity .2s,transform .2s;}
.ctrl-cfg-pop.open{opacity:1;transform:translateX(0);}

.cfg-hd{font-size:.65rem;font-weight:700;color:var(--text);
  padding-bottom:.5rem;border-bottom:1px solid var(--border);margin-bottom:.5rem;}

.cfg-sec{margin-bottom:.5rem;}
.cfg-lb{display:block;font-size:.48rem;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.15rem;}

.cfg-sel,.cfg-inp,.cfg-ta{width:100%;padding:.3rem .45rem;border-radius:7px;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:.55rem;font-family:inherit;outline:none;
  transition:border-color .15s;box-sizing:border-box;}
.cfg-sel:focus,.cfg-inp:focus,.cfg-ta:focus{border-color:var(--primary);}

.cfg-add-btn{width:100%;padding:.25rem;border-radius:6px;
  border:1px dashed var(--border);background:transparent;
  color:var(--text-muted);font-size:.5rem;cursor:pointer;margin-top:.3rem;}
.cfg-add-btn:hover{border-color:var(--cyan);color:var(--cyan);}

.cfg-map{padding:.3rem;border:1px solid var(--border);
  border-radius:7px;margin-bottom:.2rem;}
.cfg-map-r{font-size:.5rem;color:var(--text-muted);text-align:center;}

.cfg-ft{display:flex;gap:.3rem;padding-top:.5rem;
  border-top:1px solid var(--border);margin-top:.5rem;}
.cfg-btn{flex:1;padding:.3rem;border-radius:7px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:.55rem;font-weight:600;
  cursor:pointer;transition:all .15s;}
.cfg-btn.save{background:var(--primary);border-color:var(--primary);color:#fff;}
.cfg-btn:hover{opacity:.85;}

/* ═══ 데모 버튼 ═══ */
.ctrl-demo-btn{padding:.15rem .45rem;border-radius:6px;
  border:1px solid rgba(0,206,201,.3);background:rgba(0,206,201,.08);
  color:var(--cyan);font-size:.45rem;font-weight:700;
  cursor:pointer;transition:all .15s;}
.ctrl-demo-btn:hover{background:rgba(0,206,201,.15);border-color:var(--cyan);}

/* ═══ 라이트 모드 보정 ═══ */
html:not(.dark) .ctrl-action-node{
  box-shadow:0 4px 16px rgba(0,0,0,.06),0 0 12px rgba(var(--na-rgb),.06);}
html:not(.dark) .rule-conn-path{stroke-width:2.5;opacity:.5;}
html:not(.dark) .rule-conn-path.conn-yes{stroke:#1abc54;}
html:not(.dark) .rule-conn-path.conn-no{stroke:#999;opacity:.3;}
html:not(.dark) .ctrl-cfg-pop{
  box-shadow:0 8px 32px rgba(0,0,0,.1);
  border-color:rgba(108,92,231,.2);}
html:not(.dark) .conn-x{background:rgba(255,255,255,.9);}

/* ═══ 팔레트 드래그 커서 ═══ */
.ctrl-palette-item[draggable="true"]{cursor:grab;}
.ctrl-palette-item[draggable="true"]:active{cursor:grabbing;}
