/* H FLOW 워크플로우 빌더 — 프로페셔널 다크(Linear/Vercel/Raycast 계열: near-black·단일 액센트·미니멀).
   전 선택자 .wf-root 스코프(앱 styles.css 영향 0). 로컬 전용(workflow-builder 브랜치). */
.wf-root {
  position:absolute; inset:0; display:flex; flex-direction:column;          /* studio-panel(absolute) 꽉 채움 → 잘림 방지 */
  /* ★앱 디자인 토큰에 정렬(톤앤매너 통일) — styles.css :root 값 그대로 사용 */
  --wf-bg:var(--bg); --wf-surface:var(--surface-1); --wf-surface2:var(--surface-2); --wf-elev:var(--surface-3);
  --wf-bd:var(--border); --wf-bd2:var(--border-h);
  --wf-tx:var(--text-1); --wf-tx2:var(--text-2); --wf-tx3:var(--text-3); --wf-acc:var(--acc); --wf-acc2:var(--acc2);
  background:var(--wf-bg); color:var(--wf-tx); font-family:var(--font-body); font-feature-settings:"tnum"; }

.wf-body { display:flex; flex:1 1 auto; min-height:0; }
/* 팔레트 상단 헤더 — 앱 표준(studio-title/sub + .dl guide-tip)으로 통일 */
.wf-pal-head { padding-bottom:13px; margin-bottom:12px; border-bottom:1px solid var(--wf-bd); }
.wf-pal-head .studio-title { margin:0; }

/* 팔레트 */
.wf-pal { width:212px; flex:0 0 auto; background:var(--wf-bg); border-right:1px solid var(--wf-bd); overflow-y:auto; padding:14px 12px; }
.wf-pal-t { font-size:11px; font-weight:600; color:var(--wf-tx3); text-transform:uppercase; letter-spacing:.06em; margin:0 4px 10px; }
.wf-pal-item { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--wf-bd); border-radius:9px; background:var(--wf-surface); margin-bottom:7px; cursor:grab; transition:border-color .12s, background .12s; }
.wf-pal-item:hover { border-color:var(--wf-bd2); background:var(--wf-surface2); }
.wf-pal-item[data-admin-only]::after { content:none !important; }   /* 합본 항목 MASTER 뱃지 억제(라벨에 이미 마스터 표기) */
.wf-pal-thumb { width:46px; height:32px; flex:0 0 auto; border-radius:6px; overflow:hidden; position:relative; background:#0e0e10; border:1px solid var(--wf-bd); display:grid; place-items:center; color:var(--wf-tx3); }
.wf-pal-thumb svg { width:16px; height:16px; }
.wf-pal-lab b { display:block; font-size:12px; font-weight:600; color:var(--wf-tx); }
.wf-pal-lab span { display:block; font-size:10px; color:var(--wf-tx3); margin-top:1px; }

/* 캔버스 */
.wf-canvas { position:relative; flex:1 1 auto; min-width:0; }
.wf-df { width:100%; height:100%; background:
   radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 22px 22px, var(--wf-bg); }
.wf-tools { position:absolute; top:14px; right:14px; display:flex; gap:4px; z-index:5; background:var(--wf-surface); border:1px solid var(--wf-bd); border-radius:9px; padding:4px; }
.wf-tb { font-size:11.5px; font-weight:550; color:var(--wf-tx2); background:transparent; border:none; border-radius:6px; padding:6px 10px; cursor:pointer; transition:background .1s, color .1s; }
.wf-tb:hover { background:var(--wf-elev); color:var(--wf-tx); }
.wf-mini { position:absolute; right:14px; bottom:14px; width:180px; height:112px; z-index:5; background:rgba(10,10,11,.9); border:1px solid var(--wf-bd); border-radius:9px; overflow:hidden; }
.wf-mm-node { position:absolute; border-radius:2px; background:#3a3a44; }
.wf-mm-node.s-in{background:#5a6b8a;} .wf-mm-node.s-img{background:#3f7a63;} .wf-mm-node.s-vid{background:var(--wf-acc2);} .wf-mm-node.s-aud{background:#7b5fc0;} .wf-mm-node.s-out{background:#d8902f;}
.wf-mm-view { position:absolute; border:1px solid var(--wf-acc); background:rgba(255,138,31,.08); border-radius:2px; }

/* 빈 상태 */
.wf-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; pointer-events:none; z-index:2; }
.wf-empty.hidden { display:none; }
.wf-empty .ic { width:44px; height:44px; border-radius:11px; background:var(--wf-surface); border:1px solid var(--wf-bd); color:var(--wf-tx2); font-size:22px; font-weight:400; display:grid; place-items:center; }
.wf-empty .t { font-size:14.5px; font-weight:650; color:var(--wf-tx); } .wf-empty .s { font-size:12px; color:var(--wf-tx3); line-height:1.6; }
.wf-empty .s b { color:var(--wf-tx2); font-weight:600; }

/* ── 노드 카드 (미니멀·near-black·단일 액센트) ── */
.wf-root .drawflow .drawflow-node { background:var(--wf-surface); border:1px solid var(--wf-bd); border-radius:11px; padding:0; width:212px; overflow:visible; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:border-color .12s; }
.wf-root .drawflow .drawflow-node:hover { border-color:var(--wf-bd2); }
.wf-root .drawflow .drawflow-node.selected { border-color:var(--wf-acc); }
.wf-root .drawflow .drawflow-node .drawflow_content_node { padding:0; width:100%; }
.wfn { width:100%; position:relative; padding-bottom:0.02px; }   /* padding-bottom(>0)=마지막 버튼 margin-bottom collapse 차단 → margin이 .wfn 안 포함 → 하단 코너 rz-xy가 노드 실제 하단에 정렬(대각선 리사이즈 히트). flex 미사용=rz-y(썸네일 높이) 유지 */

/* 썸네일 / 미리보기 플레이스홀더 */
.wfn-thumb { position:relative; width:100%; height:118px; overflow:hidden; background:#0d0d0f; border-radius:11px 11px 0 0; border-bottom:1px solid var(--wf-bd); }
.wfn-thumb svg.scene, .wfn-real { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.wfn-thumb video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wfn-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--wf-tx3);
   background:linear-gradient(180deg,#101013,#0c0c0e); }
.wfn-ph-ic svg { width:26px; height:26px; }
.wfn-ph-t { font-size:10.5px; color:var(--wf-tx3); letter-spacing:.01em; }
.wfn-ov { position:absolute; inset:0; } .wfn-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; } .wfn-play svg{width:15px;height:15px;margin-left:2px;}
.wfn-busy { position:absolute; inset:0; background:rgba(8,8,10,.72); display:flex; align-items:center; justify-content:center; gap:8px; font-size:11.5px; color:var(--wf-tx); z-index:4; }
.wfn-spin { width:15px; height:15px; border:2px solid rgba(255,255,255,.22); border-top-color:var(--wf-acc); border-radius:50%; animation:wfspin .7s linear infinite; }
@keyframes wfspin { to { transform:rotate(360deg); } }

.wf-prompt { width:100%; height:118px; border:none; border-radius:11px 11px 0 0; border-bottom:1px solid var(--wf-bd); resize:none; background:#0f0f12; color:var(--wf-tx); padding:11px; font-size:12px; line-height:1.55; font-family:inherit; outline:none; }
.wf-prompt::placeholder { color:var(--wf-tx3); }

.wfn-meta { display:flex; align-items:center; gap:8px; padding:9px 11px; }
.wfn-ico { flex:0 0 auto; width:20px; height:20px; border-radius:5px; display:grid; place-items:center; background:var(--wf-surface2); border:1px solid var(--wf-bd); }
.wfn-ico svg { width:12px; height:12px; }
.s-in .wfn-ico{color:#8a93a8;} .s-img .wfn-ico{color:#6fae93;} .s-vid .wfn-ico{color:var(--wf-acc);} .s-aud .wfn-ico{color:#a78bdf;} .s-out .wfn-ico{color:#ffb347;}
.wfn-aud { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; background:linear-gradient(180deg,#101013,#0c0c0e); }
.wfn-aud audio { width:100%; height:34px; }
.wfn-dl { position:absolute; left:8px; bottom:8px; z-index:5; width:26px; height:26px; border:none; border-radius:7px; background:rgba(10,10,12,.72); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.wfn-dl svg { width:15px; height:15px; }
.wfn-dl:hover { background:var(--wf-acc); color:#1a1208; }
.wfn-pathclear { position:absolute; left:40px; bottom:8px; z-index:5; width:26px; height:26px; border:none; border-radius:7px; background:rgba(10,10,12,.72); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.wfn-pathclear svg { width:15px; height:15px; }
.wfn-pathclear:hover { background:#e0342b; color:#fff; }
/* 메모(포스트잇) 노드 — 그림판은 미도입 */
.wf-root .drawflow .drawflow-node.s-note { background:#f4e7a6; border:1px solid #d9c87a; border-radius:5px; box-shadow:0 6px 18px rgba(0,0,0,.45); overflow:visible; }
.wf-root .drawflow .drawflow-node.s-note:hover { border-color:#c9b85a; }
.wf-root .drawflow .drawflow-node.s-note.selected { border-color:var(--wf-acc); }
.wfn-note { position:relative; padding:0 0 9px; }
.wfn-note-tape { position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-2.5deg); width:64px; height:17px; background:rgba(255,255,255,.5); border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 3px rgba(0,0,0,.18); pointer-events:none; }
/* 메모 노드 이동 핸들 — 실측 결과(2026-07-21) 노드 전체 높이 대비 헤더 클릭 영역이 좁아 "이동이 잘 안 잡힘" 신고 원인으로 확인. 세로 패딩 확장(17px→27px)으로 클릭 판정 키우고, hover 배경 강조로 그랩 가능 영역을 시각적으로 명확히 표시(hidden affordance 최소화 원칙). */
.wfn-note-hd { font-size:9px; font-weight:800; color:#9a8226; padding:15px 11px 12px; cursor:grab; letter-spacing:.13em; user-select:none; transition:background .12s; border-radius:5px 5px 0 0; }
.wfn-note-hd:hover { background:rgba(0,0,0,.05); }
.wfn-note-hd:active { cursor:grabbing; }
.wfn-note-title { display:block; width:100%; box-sizing:border-box; border:none; background:transparent; color:#3a2f0a; font-family:inherit; font-size:13.5px; font-weight:700; padding:0 11px 6px; outline:none; border-bottom:1px solid rgba(0,0,0,.12); margin-bottom:6px; }
.wfn-note-title::placeholder { color:#b09a52; font-weight:600; }
.wfn-ck-list { padding:0 9px; max-height:300px; overflow-y:auto; }
.wfn-ck { display:flex; align-items:center; gap:7px; padding:2px 0; }
.wfn-ck-box { flex:0 0 auto; width:14px; height:14px; accent-color:#8a7320; cursor:pointer; }
.wfn-ck-tx { flex:1 1 auto; min-width:0; border:none; background:transparent; color:#3a2f0a; font-family:inherit; font-size:12.5px; line-height:1.4; padding:2px 0; outline:none; }
.wfn-ck-tx::placeholder { color:#b09a52; }
.wfn-ck-box:checked + .wfn-ck-tx { text-decoration:line-through; opacity:.5; }
.wfn-ck-del { flex:0 0 auto; width:17px; height:17px; line-height:15px; text-align:center; border:none; border-radius:4px; background:transparent; color:#9a8226; font-size:15px; cursor:pointer; opacity:0; transition:opacity .12s, background .12s, color .12s; }
.wfn-ck:hover .wfn-ck-del { opacity:.75; }
.wfn-ck-del:hover { background:#e5484d; color:#fff; opacity:1; }
.wfn-ck-add { display:block; margin:5px 11px 0; padding:3px 8px; border:1px dashed rgba(0,0,0,.22); border-radius:5px; background:transparent; color:#8a7320; font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s; }
.wfn-ck-add:hover { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.35); }
.s-note .wfn-del { background:rgba(0,0,0,.18); color:#3a2f0a; border-color:rgba(0,0,0,.12); }
.s-note .wfn-del:hover { background:#e5484d; color:#fff; border-color:#e5484d; }
.s-note .wfn-rz-xy { background:linear-gradient(135deg, transparent 0 55%, rgba(0,0,0,.28) 55% 63%, transparent 63% 72%, rgba(0,0,0,.28) 72% 80%, transparent 80%); }
.wf-mm-node.s-note { background:#e3cf6a; }
/* 우클릭 컨텍스트 메뉴 */
.wf-ctx { position:fixed; z-index:9999; min-width:182px; background:var(--wf-elev); border:1px solid var(--wf-bd2); border-radius:11px; padding:5px; box-shadow:0 14px 38px rgba(0,0,0,.55); }
.wf-ctx-hd { font-size:10px; font-weight:700; color:var(--wf-tx3); padding:6px 9px 5px; letter-spacing:.05em; }
.wf-ctx-sep { height:1px; background:var(--wf-bd); margin:4px 4px; }
.wf-ctx-it { display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; border:none; background:none; color:var(--wf-tx); font-family:inherit; font-size:12.5px; text-align:left; border-radius:7px; cursor:pointer; }
.wf-ctx-it:hover { background:var(--wf-surface2); }
.wf-ctx-ic { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; flex:0 0 auto; opacity:.85; }
.wf-ctx-ic svg { width:15px; height:15px; }
.wf-ctx-it.danger { color:#f0837f; }
.wf-ctx-it.danger:hover { background:rgba(229,72,77,.15); }
.wfn-t { font-size:12px; font-weight:600; color:var(--wf-tx); } .wfn-s { font-size:10.5px; color:var(--wf-tx3); }
/* 노드 설정 셀렉트(모델·비율·크기/해상도·길이) */
.wfn-np { width:calc(100% - 22px); margin:8px 11px 0; min-height:42px; max-height:140px; resize:vertical; background:#0f0f12; color:var(--wf-tx); border:1px solid var(--wf-bd); border-radius:7px; padding:7px 9px; font-size:11.5px; line-height:1.45; font-family:inherit; outline:none; }
.wfn-np::placeholder { color:var(--wf-tx3); }
.wfn-np:hover, .wfn-np:focus { border-color:var(--wf-bd2); }
.wfn-cfg { padding:8px 11px 0; display:flex; flex-direction:column; gap:6px; }
.wfn-cfg-row { display:flex; gap:6px; }
.wfn-sel { flex:1; min-width:0; background:var(--wf-surface2); color:var(--wf-tx); border:1px solid var(--wf-bd); border-radius:6px; padding:5px 22px 5px 8px; font-size:11px; font-family:inherit; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%239A9A95' stroke-width='1.4'%3E%3Cpath d='M2.5 4L5 6.5 7.5 4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; }
.wfn-sel:hover { border-color:var(--wf-bd2); }
/* 칩 변환된 셀렉트(길이·카메라 컨트롤 타입 — initDurChip/initCamChip이 makeChipSelect로 감쌈) 공용 컴팩트 스타일 —
   형제 select(.wfn-sel)와 동일한 패딩/폰트로 시각 통일(단독 행에선 flex:1이 행 전체를 채워 기존 width:100%와 동등). */
.wfn-cfg-row .chip-wrap { width:auto; flex:1; min-width:0; }
.wfn-cfg-row .chip-sel { width:100%; min-width:0; padding:5px 22px 5px 8px; font-size:11px; font-weight:400; gap:0; background:var(--wf-surface2); border:1px solid var(--wf-bd); border-radius:6px; }
.wfn-cfg-row .chip-sel:hover { border-color:var(--wf-bd2); background:var(--wf-surface2); }
.wfn-cfg-row .chip-val { text-align:center; }
/* 비율·해상도·길이 3열 행(wfn-cfg-row-3) — flex:1로는 3열 폭이 안 맞음(실측 2026-07-21 Playwright: <select>와
   길이 칩(span.chip-wrap > button.chip-sel)이 동일한 flex:1 1 0%·min-width:0·패딩이어도 Chrome이 <select>에
   자체 최소폭을 그대로 적용해 select 69.3px vs 칩 37.3px로 불균등하게 렌더 — CSS 속성상 원인 규명 불가한
   브라우저 자체 동작이므로 grid로 폭 강제 균등화(각 컬럼 1fr + min-width:0으로 콘텐츠발 확장 차단)). */
.wfn-cfg-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; }
.wfn-cfg-row-3 > * { min-width:0; }
/* 3등분 후 열 폭이 좁아져 "1080p" 옵션 텍스트가 잘림(실측 2026-07-21: 콘텐츠 영역 26.67px < 텍스트 30.97px, 11px 폰트 기준·canvas measureText) →
   이 행의 select만 좌우 패딩을 화살표 아이콘이 가려지지 않는 최소치로 축소(전역 .wfn-sel 패딩은 다른 행 영향 없게 무변경). */
.wfn-cfg-row-3 select.wfn-sel { padding:5px 17px 5px 6px; }
.wfn-sel.wfn-model { font-weight:600; }
.wfn-sel option { background:#16161a; color:var(--wf-tx); }
.wfn-cfg-body { display:flex; flex-direction:column; gap:6px; }
.wfn-chk { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--wf-tx2); cursor:pointer; padding:1px 0; }
.wfn-chk input { accent-color:var(--wf-acc); width:13px; height:13px; margin:0; }
.wfn-neg { flex:1; min-width:0; background:var(--wf-surface2); color:var(--wf-tx); border:1px solid var(--wf-bd); border-radius:6px; padding:5px 8px; font-size:11px; font-family:inherit; outline:none; }
.wfn-neg::placeholder { color:var(--wf-tx3); }
.wfn-neg:hover, .wfn-neg:focus { border-color:var(--wf-bd2); }
/* Kling 카메라 컨트롤 6축 슬라이더(2026-07-21) — 축 라벨 고정폭 + 슬라이더 나머지 채움. type=simple 선택 시에만 노출. */
.wfn-cam-axes.hidden { display:none; }
.wfn-cam-axlbl { flex:0 0 68px; font-size:10.5px; color:var(--wf-tx2); }
.wfn-cam-note { padding:0 11px 8px; font-size:10px; line-height:1.4; color:var(--wf-tx3); }
/* 레퍼런스 이미지(이미지 노드·캐릭터/스타일 일관성) */
.wfn-refs { padding:8px 11px 0; }
.wfn-refs-standalone { padding-top:12px; }   /* 참조 이미지 노드 — 썸네일 없이 meta 바로 아래라 여백 보강 */
.wfn-refs-strip { display:flex; flex-wrap:wrap; gap:5px; }
.wfn-ref-chip { position:relative; width:var(--wfn-chip-size, 44px); height:var(--wfn-chip-size, 44px); flex:0 0 auto; border-radius:5px; overflow:hidden; border:1px solid var(--wf-bd); }
.wfn-ref-chip img { width:100%; height:100%; object-fit:cover; display:block; }
.wfn-ref-del { position:absolute; top:1px; right:1px; width:14px; height:14px; line-height:12px; text-align:center; border:none; border-radius:3px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; cursor:pointer; padding:0; }
.wfn-ref-del:hover { background:#e5484d; }
.wfn-ref-add { display:inline-flex; align-items:center; gap:4px; margin-top:5px; padding:3px 9px; border:1px dashed var(--wf-bd2); border-radius:6px; background:var(--wf-surface); color:var(--wf-tx2); font-size:11px; cursor:pointer; transition:border-color .12s, color .12s; }
.wfn-ref-add:hover { border-color:var(--wf-acc); color:var(--wf-tx); }
/* 참조 이미지 노드 전용(2026-07-22 통합) — 리사이즈 가능한 박스(다른 노드 .wfn-thumb 과 동일 대각선/세로 드래그 대상)에 이미지·영상 칩을
   하나의 가로 스트립(.wfn-refimg-strip)으로 함께 담아 좌우로 채워짐(라이브러리 media-grid와 동일 — 이전엔 이미지·영상이 스트립 2개로
   분리돼 세로로 쌓여 보이던 문제 해결). 대각선 리사이즈 시 박스 높이 + 칩 크기(--wfn-chip-size)가 함께 커짐(bindResize 참조). */
.wfn-refimg-box { min-height:80px; height:80px; overflow-y:auto; padding:2px 9px; }
.wfn-refimg-strip { display:flex; flex-wrap:wrap; gap:5px; }   /* flex 필수 — 없으면 자식 span이 blockify 안 돼 width/height 무시됨(inline 기본값·2026-07-22 실측 확인) */
.wfn-refvid-chip { position:relative; width:var(--wfn-chip-size, 44px); height:var(--wfn-chip-size, 44px); flex:0 0 auto; border-radius:5px; overflow:hidden; border:1px solid var(--wf-bd); background:#000; }
.wfn-refvid-chip video { width:100%; height:100%; object-fit:cover; display:block; }
.wfn-refvid-del { position:absolute; top:1px; right:1px; width:14px; height:14px; line-height:12px; text-align:center; border:none; border-radius:3px; background:rgba(0,0,0,.6); color:#fff; font-size:11px; cursor:pointer; padding:0; }
.wfn-refvid-del:hover { background:#e5484d; }
/* 통합 드롭존(클릭+드래그) — 비디오탭 .dropzone과 동일 개념(대시 보더+아이콘+문구)을 CANVAS 기존 점선버튼 톤(.wf-pathbg-add)에 맞춰 구현. */
.wfn-refimg-dz { display:flex; align-items:center; justify-content:center; gap:6px; margin:9px 11px 0; padding:9px; border:1.5px dashed var(--wf-bd2); border-radius:8px; background:var(--wf-surface); color:var(--wf-tx2); font-size:11px; cursor:pointer; transition:background .14s, border-color .14s, color .14s; }
.wfn-refimg-dz:hover { border-color:var(--wf-acc); color:var(--wf-tx); }
.wfn-refimg-dz.dz-over { border-color:var(--wf-acc); background:rgba(255,106,0,.1); color:var(--wf-tx); }
.wfn-refvid-add { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border:1px dashed var(--wf-bd2); border-radius:6px; background:var(--wf-surface); color:var(--wf-tx2); font-size:11px; cursor:pointer; transition:border-color .12s, color .12s; }
.wfn-refvid-add:hover { border-color:var(--wf-acc); color:var(--wf-tx); }
.wf-gen { display:flex; align-items:center; justify-content:center; gap:5px; width:calc(100% - 22px); margin:9px 11px 11px; padding:8px; border:none; border-radius:8px; background:linear-gradient(135deg, var(--acc), var(--acc2)); color:#fff; font-size:11.5px; font-weight:700; font-family:var(--font-display); letter-spacing:.01em; cursor:pointer; box-shadow:0 2px 12px -3px rgba(255,106,0,.5); transition:filter .14s, transform .12s, box-shadow .14s; }
.wf-gen:hover { filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 6px 18px -4px rgba(255,106,0,.6); }
.wf-gen:active { transform:translateY(0); filter:brightness(.98); }
.wf-gen:disabled { opacity:.45; cursor:default; filter:none; transform:none; box-shadow:none; }
.wf-gen .cr { font-weight:500; color:rgba(255,255,255,.82); }
/* 경로 그리기 노드: 배경 첨부(점선) + 경로 그리기 버튼 + Omni 전용 안내 */
.wf-pathbg-add { display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; width:calc(100% - 22px); margin:9px 11px 0; padding:9px; border:1.5px dashed var(--wf-acc); border-radius:8px; background:rgba(255,106,0,.06); color:var(--wf-acc); font-size:11.5px; font-weight:600; cursor:pointer; transition:background .14s, border-color .14s; }
.wf-pathbg-add svg { position:static; flex:0 0 auto; }   /* Drawflow의 `.drawflow svg{position:absolute}`가 아이콘을 텍스트 위로 겹치게 함 → static 복원 */
.wf-pathbg-add:hover { background:rgba(255,106,0,.12); }
.wf-draw { display:flex; align-items:center; justify-content:center; gap:5px; width:calc(100% - 22px); margin:8px 11px 6px; padding:8px; border:none; border-radius:8px; background:linear-gradient(135deg, var(--acc), var(--acc2)); color:#fff; font-size:11.5px; font-weight:700; font-family:var(--font-display); letter-spacing:.01em; cursor:pointer; box-shadow:0 2px 12px -3px rgba(255,106,0,.5); transition:filter .14s, transform .12s; }
.wf-draw:hover { filter:brightness(1.08); transform:translateY(-1px); }
.wf-draw:disabled { opacity:.4; cursor:default; filter:none; transform:none; box-shadow:none; }
.wfn-omni-note { margin:0 11px 10px; font-size:10px; line-height:1.4; color:var(--wf-tx2); text-align:center; opacity:.9; }
.wfn-del { position:absolute; top:7px; right:7px; z-index:6; width:20px; height:20px; border:1px solid var(--wf-bd); border-radius:6px; background:rgba(10,10,12,.7); color:var(--wf-tx2); font-size:14px; line-height:1; cursor:pointer; display:none; align-items:center; justify-content:center; padding:0; }
.wf-root .drawflow-node:hover .wfn-del { display:flex; }
.wfn-del:hover { background:#e5484d; color:#fff; border-color:#e5484d; }
/* 리사이즈 핸들 — 기존엔 opacity:0(완전 숨김)이라 hover 전엔 존재 자체를 알 수 없었음(리사이즈=핵심 편집 기능·hover-only affordance는 발견성 리스크가 커 권장 안 됨, UX 리서치 확인 2026-07-21) → 평소에도 은은하게 보이도록 변경 + hover 시 진하게.
   히트 영역(::before, 투명 확장)을 시각 크기보다 넓게 잡아 실제 클릭 판정을 키움(react-resizable-panels의 hitAreaMargins 패턴 참고 — 시각 크기는 그대로 두고 클릭 판정만 확장). */
.wfn-rz { position:absolute; z-index:7; opacity:.32; transition:opacity .12s, background .12s; }
.wf-root .drawflow-node:hover .wfn-rz { opacity:1; }
.wfn-rz-x { top:58%; bottom:15px; right:-3px; width:8px; cursor:ew-resize; border-radius:3px; }   /* 너비만(우측 하단·연결점 회피) */
.wfn-rz-y { bottom:-3px; left:12px; right:15px; height:8px; cursor:ns-resize; border-radius:3px; }   /* 높이만(하단) */
.wfn-rz-x::before { content:''; position:absolute; top:0; bottom:0; left:-6px; right:-6px; }   /* 좌우 +6px 히트영역 확장(시각 크기 유지) */
.wfn-rz-y::before { content:''; position:absolute; left:0; right:0; top:-6px; bottom:-6px; }   /* 상하 +6px 히트영역 확장 */
.wf-root .drawflow-node:hover .wfn-rz-x, .wf-root .drawflow-node:hover .wfn-rz-y { background:rgba(255,255,255,.13); }
.wfn-rz-x:hover, .wfn-rz-y:hover { background:var(--wf-acc) !important; }
.wfn-rz-xy { right:1px; bottom:1px; width:14px; height:14px; cursor:nwse-resize;   /* 둘 다(코너) */
  background:linear-gradient(135deg, transparent 0 55%, var(--wf-bd2) 55% 63%, transparent 63% 72%, var(--wf-bd2) 72% 80%, transparent 80%); }
.wfn-rz-xy::before { content:''; position:absolute; inset:-6px; }   /* 상하좌우 +6px 히트영역 확장 */
.wfn-rz-xy:hover { background:linear-gradient(135deg, transparent 0 55%, var(--wf-acc) 55% 80%, transparent 80%); }

/* 연결점 — 절제된 + (작게·단색·hover 액센트) */
.wf-root .drawflow .drawflow-node .input, .wf-root .drawflow .drawflow-node .output { background:var(--wf-elev); border:1.5px solid var(--wf-bd2); width:15px; height:15px; position:relative; cursor:crosshair; transition:transform .1s, border-color .1s, background .1s; }
.wf-root .drawflow .drawflow-node .input::after, .wf-root .drawflow .drawflow-node .output::after { content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--wf-tx2); font-size:11px; font-weight:700; pointer-events:none; }
.wf-root .drawflow .drawflow-node:hover .input, .wf-root .drawflow .drawflow-node:hover .output { border-color:var(--wf-acc); }
.wf-root .drawflow .drawflow-node .input:hover, .wf-root .drawflow .drawflow-node .output:hover { transform:scale(1.25); background:var(--wf-acc); }
.wf-root .drawflow .drawflow-node .input:hover::after, .wf-root .drawflow .drawflow-node .output:hover::after { color:#1a1208; }
.wf-root .drawflow .connection .main-path { stroke:#3f3f48; stroke-width:2px; fill:none; }
.wf-root .drawflow .connection .main-path:hover { stroke:var(--wf-acc); }
/* 다중선택 하이라이트 + 상자선택(2026-07-16 강화) */
.wf-root .drawflow .drawflow-node.wfn-msel .wfn { outline:2px solid var(--wf-acc); outline-offset:2px; }
.wf-boxsel { position:fixed; z-index:60; border:1px solid var(--wf-acc); background:rgba(255,106,0,.12); pointer-events:none; border-radius:2px; }