/* ═══════════════════════════════════════════════════════════════════════════
   ═══ ★ 제어 모드 — 같은 캔버스에서 DB 테이블 관계 + 비즈니스 룰 시각화 ★ ═══
   ═══════════════════════════════════════════════════════════════════════════ */

/* 제어 모드 배경 — 시안 톤 격자 (일반 모드와 시각적 구분) */
.canvas.control-mode{
  background-image:radial-gradient(circle at 0.5px 0.5px,rgba(0,206,201,.22) 0.5px,transparent 0);
  background-size:24px 24px;}
.dark .canvas.control-mode{
  background-image:radial-gradient(circle at 0.5px 0.5px,rgba(85,239,196,.18) 0.5px,transparent 0);}

/* 제어 모드: 카드 축소 + 클릭 가능 (흐름 보기용) */
.canvas.control-mode .tpl-card{transition:all .5s cubic-bezier(.16,1,.3,1);
  opacity:.5;z-index:25;cursor:pointer;}
.canvas.control-mode .tpl-card:hover{opacity:.8;box-shadow:0 0 20px var(--cyan-glow);}
/* 선택된 카드 강조 */
.canvas.control-mode .tpl-card.flow-active{opacity:1;
  border-color:var(--cyan);box-shadow:0 0 30px rgba(0,206,201,.3);}

/* ─── 제어 모드 토글 버튼 활성 ─── */
.cv-btn.control-on{background:linear-gradient(135deg,var(--cyan),#55efc4) !important;
  color:#06050e !important;border-color:transparent !important;
  box-shadow:0 0 20px rgba(0,206,201,.3) !important;font-weight:700;}
.cv-btn.control-on:hover{box-shadow:0 0 30px rgba(0,206,201,.45) !important;}

/* ═══ SVG 연결선 오버레이 ═══ */
.ctrl-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:10;overflow:visible;}

/* FK 연결선 — 시안, 점선, 펄스 애니메이션 */
.ctrl-line{fill:none;stroke:var(--cyan);stroke-width:1.5;opacity:.55;
  stroke-dasharray:6 3;animation:ctrlPulse 1.5s linear infinite;transition:opacity .2s;}
@keyframes ctrlPulse{to{stroke-dashoffset:-18;}}

/* 자동 실행 연결선 — 보라, 두꺼움 */
.ctrl-line-auto{fill:none;stroke:var(--primary);stroke-width:2.5;opacity:.6;
  stroke-dasharray:6 4;animation:ctrlPulse 1.2s linear infinite;transition:opacity .2s;}

/* 조건분기 연결선 — 앰버 */
.ctrl-line-cond{fill:none;stroke:var(--amber);stroke-width:2;opacity:.55;
  stroke-dasharray:4 4;animation:ctrlPulse 1.8s linear infinite;transition:opacity .2s;}

/* 카드 → 소스 테이블 연결선 — 핑크 */
.ctrl-line-tpl{fill:none;stroke:var(--pink);stroke-width:2.5;opacity:.65;
  stroke-dasharray:5 5;animation:ctrlPulse 1.4s linear infinite;transition:opacity .2s;}

/* ★ 라이트 모드: 연결선 더 진하게 (배경 대비) */
html:not(.dark) .ctrl-line{stroke:#00a89e;stroke-width:2;opacity:.5;}
html:not(.dark) .ctrl-line-auto{stroke:#5b4acf;stroke-width:3;opacity:.6;}
html:not(.dark) .ctrl-line-cond{stroke:#d4a017;stroke-width:2.5;opacity:.55;}
html:not(.dark) .ctrl-line-tpl{stroke:#e0559e;stroke-width:3;opacity:.6;}
html:not(.dark) .ctrl-badge{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.15);
  box-shadow:0 2px 12px rgba(0,0,0,.1);}

/* ★ Hover 강조: 노드 hover 시 관련 선만 밝게, 나머지 fade */
.canvas.control-mode.hover-focus path{opacity:.08 !important;}
.canvas.control-mode.hover-focus .ctrl-badge{opacity:.15 !important;}
.canvas.control-mode.hover-focus .tbl-node{opacity:.3;transition:opacity .2s;}
.canvas.control-mode.hover-focus .tbl-node.hover-active{opacity:1;}
.canvas.control-mode.hover-focus path.hover-active{opacity:.9 !important;}
.canvas.control-mode.hover-focus .ctrl-badge.hover-active{opacity:1 !important;}
.ctrl-badge.tpl-link{border-color:rgba(253,121,168,.35);color:var(--pink);
  box-shadow:0 4px 16px rgba(253,121,168,.12);font-size:.5rem;}

/* ═══ 연결선 위 액션 뱃지 ═══ */
.ctrl-badge{position:absolute;padding:.2rem .6rem;border-radius:9px;
  background:var(--glass-strong);backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(0,206,201,.3);font-size:.55rem;font-weight:700;
  color:var(--cyan);white-space:nowrap;z-index:15;cursor:pointer;
  transition:all .25s;box-shadow:0 4px 16px rgba(0,206,201,.12);
  pointer-events:auto;}
.ctrl-badge:hover{border-color:var(--cyan);
  box-shadow:0 8px 24px rgba(0,206,201,.3);transform:translate(-50%,-50%) scale(1.05);}
.ctrl-badge.auto{border-color:rgba(108,92,231,.35);color:var(--primary);
  box-shadow:0 4px 16px rgba(108,92,231,.12);}
.ctrl-badge.auto:hover{box-shadow:0 8px 24px rgba(108,92,231,.3);}
/* 조건분기 뱃지 — 확장형 (인라인, 별도 노드 X) */
.ctrl-badge.cond{border-color:rgba(253,203,110,.4);color:var(--text);
  box-shadow:0 6px 20px rgba(253,203,110,.15);padding:.45rem .7rem;
  min-width:120px;text-align:left;white-space:normal;line-height:1.4;
  border-radius:10px;border-width:2px;}
.ctrl-badge.cond .cb-head{display:flex;align-items:center;gap:.3rem;
  font-size:.5rem;font-weight:700;color:var(--amber);margin-bottom:.25rem;}
.ctrl-badge.cond .cb-icon{width:16px;height:16px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:.6rem;
  background:rgba(253,203,110,.15);border:1px solid rgba(253,203,110,.3);}
.ctrl-badge.cond .cb-cond{font-size:.6rem;font-weight:600;color:var(--text);
  padding:.2rem .4rem;border-radius:6px;background:rgba(253,203,110,.08);
  border:1px dashed rgba(253,203,110,.25);margin-bottom:.25rem;}
.ctrl-badge.cond .cb-paths{display:flex;gap:.5rem;font-size:.48rem;font-weight:700;}
.ctrl-badge.cond .cb-yes{color:var(--green);}
.ctrl-badge.cond .cb-yes::before{content:'●';margin-right:.15rem;font-size:.4rem;}
.ctrl-badge.cond .cb-no{color:var(--text-muted);}
.ctrl-badge.cond .cb-no::before{content:'○';margin-right:.15rem;font-size:.4rem;}
.dark .ctrl-badge.cond{color:var(--text);}

/* ═══ 테이블 노드 ═══ */
.tbl-node{position:absolute;width:200px;
  background:var(--glass-strong);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(0,206,201,.25);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08),0 0 20px rgba(0,206,201,.08);
  z-index:20;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.dark .tbl-node{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 20px rgba(85,239,196,.06);}
.tbl-node:hover{border-color:var(--cyan);
  box-shadow:0 12px 32px rgba(0,0,0,.12),0 0 30px rgba(0,206,201,.18);}

.tbl-node-head{display:flex;align-items:center;gap:.4rem;padding:.55rem .7rem;
  background:linear-gradient(135deg,rgba(0,206,201,.12),rgba(0,206,201,.04));
  border-bottom:1px solid rgba(0,206,201,.15);cursor:grab;}
.tbl-node-head:active{cursor:grabbing;}
.tbl-icon{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:.7rem;background:rgba(0,206,201,.12);flex-shrink:0;}
.tbl-name{flex:1;font-size:.65rem;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.tbl-badge{font-size:.45rem;padding:.1rem .35rem;border-radius:999px;
  background:rgba(0,206,201,.1);color:var(--cyan);font-weight:700;}
.tbl-view-toggle{margin-left:auto;width:22px;height:18px;border-radius:5px;border:1px solid rgba(0,206,201,.25);
  background:transparent;color:var(--cyan);font-size:.5rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:monospace;transition:all .2s;flex-shrink:0;}
.tbl-view-toggle:hover{background:rgba(0,206,201,.12);border-color:var(--cyan);}
.tbl-node.phys-view .tbl-view-toggle{background:rgba(108,92,231,.12);border-color:var(--primary);color:var(--primary);}
.tbl-node.phys-view .tbl-col-name{font-family:monospace;font-size:.52rem;color:var(--text-muted);}
.tbl-node.phys-view .tbl-col-type{font-family:monospace;font-size:.45rem;}

.tbl-node-cols{padding:.35rem 0;max-height:160px;overflow-y:auto;}
.tbl-col{display:flex;align-items:center;gap:.35rem;padding:.22rem .65rem;
  font-size:.58rem;color:var(--text-sec);transition:background .1s;}
.tbl-col:hover{background:var(--surface-hover);color:var(--text);}

/* 포트 (컬럼 좌측 점 — 연결 시작/끝점) */
.tbl-port{width:8px;height:8px;border-radius:50%;background:var(--surface);
  border:2px solid rgba(0,206,201,.35);flex-shrink:0;cursor:crosshair;transition:all .2s;}
.tbl-port:hover{background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 8px rgba(0,206,201,.5);transform:scale(1.3);}
.tbl-port.pk{border-color:var(--primary);background:rgba(108,92,231,.15);}
.tbl-port.fk{border-color:var(--amber);background:rgba(253,203,110,.15);}

.tbl-col-name{flex:1;font-weight:500;}
.tbl-col-type{font-size:.45rem;color:var(--text-muted);font-weight:600;margin-left:auto;}
.tbl-col-mark{font-size:.42rem;font-weight:700;padding:.05rem .25rem;border-radius:4px;margin-left:.2rem;}
.tbl-col-mark.pk{color:var(--primary);background:rgba(108,92,231,.1);}
.tbl-col-mark.fk{color:var(--amber);background:rgba(253,203,110,.1);}

/* ═══ 조건분기 노드 (카드형 — 조건식 + Yes/No) ═══ */
.ctrl-diamond{position:absolute;z-index:25;cursor:pointer;
  background:var(--glass-strong);backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:2px solid rgba(253,203,110,.4);border-radius:12px;
  padding:.55rem .75rem;min-width:140px;
  box-shadow:0 8px 24px rgba(0,0,0,.08),0 0 16px rgba(253,203,110,.1);
  transition:all .25s;}
.dark .ctrl-diamond{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 16px rgba(253,203,110,.06);}
.ctrl-diamond:hover{border-color:var(--amber);
  box-shadow:0 12px 32px rgba(0,0,0,.12),0 0 24px rgba(253,203,110,.25);}

.ctrl-diamond-head{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;}
.ctrl-diamond-icon{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:.75rem;
  background:linear-gradient(135deg,rgba(253,203,110,.2),rgba(253,203,110,.05));
  border:1px solid rgba(253,203,110,.3);}
.ctrl-diamond-title{font-size:.6rem;font-weight:700;color:var(--amber);}

.ctrl-diamond-cond{font-size:.65rem;font-weight:600;color:var(--text);
  padding:.3rem .5rem;border-radius:8px;background:rgba(253,203,110,.08);
  border:1px dashed rgba(253,203,110,.25);margin-bottom:.35rem;line-height:1.3;}

.ctrl-diamond-paths{display:flex;gap:.5rem;font-size:.5rem;font-weight:700;}
.ctrl-diamond-yes{color:var(--green);display:flex;align-items:center;gap:.2rem;}
.ctrl-diamond-yes::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);}
.ctrl-diamond-no{color:var(--text-muted);display:flex;align-items:center;gap:.2rem;}
.ctrl-diamond-no::before{content:'';width:8px;height:8px;border-radius:50%;
  background:var(--text-muted);opacity:.4;}

/* ═══ 테이블 팔레트 (사이드바 교체) ═══ */
.ctrl-palette-section{font-size:.52rem;font-weight:700;color:var(--cyan);
  text-transform:uppercase;letter-spacing:.08em;padding:.7rem .65rem .3rem;}
.ctrl-palette-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .65rem;
  border-radius:8px;font-size:.68rem;font-weight:500;color:var(--text-sec);
  cursor:grab;transition:all .2s;}
.ctrl-palette-item:hover{background:rgba(0,206,201,.08);color:var(--text);
  transform:translateX(2px);}
.ctrl-palette-item .cp-icon{font-size:.8rem;width:20px;text-align:center;}

/* ★ CSS animation 전부 제거 — JS 에서만 타이밍 제어 (선→노드 순서 보장) */
/* 노드/뱃지/다이아몬드는 JS 가 opacity+transform 으로 직접 제어 */
/* 연결선은 JS 가 stroke-dashoffset transition 으로 직접 제어 */

/* 제어 모드 캔버스 — 스크롤 허용 (테이블 많으면 캔버스 넓어짐) */
.canvas.control-mode{overflow:auto;}
