/* TOBE Studio 플로우 디자이너 스타일. studio.css 토큰 사용. 글자 12px 이상, 모양+글자. */
body.flowtab .wrap{max-width:1560px}
.fl{display:block}
.fl-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.fl-bar .sel{margin-bottom:0;min-width:200px}
.fl-name{width:220px;min-height:44px;padding:8px 12px;font-size:14px}
.fl-def{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:6px}
.fl-mini{min-height:44px;padding:6px 14px;font-size:12px}
.fl-small{font-size:12px;line-height:1.5;margin:0 0 6px}
.fl-cost{border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:8px;background:var(--panel)}
.fl-cost b{color:var(--gold);font-size:15px}
.fl-msg{font-size:13px;margin-bottom:8px}
.fl-msg:empty{display:none}
.fl-msg span{display:block;padding:8px 12px;border-radius:10px;border:1px solid var(--line)}
.fl-msg.ok span{border-color:rgba(60,240,255,.5);color:var(--cyan)}
.fl-msg.bad span{border-color:rgba(255,46,136,.6);color:var(--mag)}
.fl-msg ul{margin:6px 0 0;padding-left:20px;color:var(--white)}
.fl-grid{display:grid;grid-template-columns:200px minmax(0,1fr) 270px;gap:10px;align-items:stretch}
.fl-view .fl-grid{grid-template-columns:minmax(0,1fr)}
.fl-side{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel);max-height:640px;overflow:auto;font-size:13px}
.fl-side h4{margin:0 0 6px;font-size:14px}
.fl-side h5,.fl-ver h5,.fl-simbox h5{margin:12px 0 6px;font:700 13px var(--kr);color:var(--cyan)}
.fl-side h5:first-child{margin-top:0}
.fl-pal{display:block;width:100%;text-align:left;min-height:44px;padding:8px 10px;margin:0 0 5px;border:1px solid var(--line);border-radius:8px;background:rgba(244,246,255,.04);color:var(--white);font:500 13px var(--kr);cursor:grab}
.fl-pal:hover:not(:disabled){border-color:var(--cyan)}
.fl-pal:disabled{opacity:.45;cursor:not-allowed}
.fl-cv{position:relative;border:1px solid var(--line);border-radius:12px;background:rgba(3,3,6,.6) radial-gradient(rgba(244,246,255,.07) 1px,transparent 1px) 0 0/22px 22px;overflow:hidden;min-height:520px}
.fl-view .fl-cv{min-height:380px}
.fl-svg{display:block;width:100%;height:560px;touch-action:none;cursor:grab;user-select:none}
.fl-view .fl-svg{height:400px}
.fl-zoom{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;align-items:center;background:rgba(3,3,6,.85);border:1px solid var(--line);border-radius:999px;padding:3px 8px}
.fl-zoom .ghost{padding:4px 12px}
.nd{cursor:pointer}
.nd .bx{fill:rgba(244,246,255,.07);stroke:rgba(244,246,255,.35);stroke-width:1.5}
.nd .t1{font:700 15px "Noto Sans KR",system-ui,sans-serif;fill:#F4F6FF}
.nd .t2{font:500 14px "Noto Sans KR",system-ui,sans-serif;fill:#B8BDD1}
.nd.sel .bx{stroke:#3CF0FF;stroke-width:3;fill:rgba(60,240,255,.1)}
.nd.conn .bx{stroke:#FFC857;stroke-width:3}
.nd.off .bx{stroke-dasharray:6 5;fill:rgba(138,144,166,.08);stroke:#8A90A6}
.nd.off .t1,.nd.off .t2{fill:#8A90A6}
.nd.req .bx{fill:rgba(138,144,166,.2);stroke:#B8BDD1;stroke-width:3;stroke-dasharray:none}
.nd.req:not(.sel) .bx{stroke-width:4}
.nd.err .bx{stroke:#FF2E88;stroke-dasharray:3 3;stroke-width:2.5}
.nd.rs-done .bx{stroke:#3CF0FF}
.nd.rs-skip .bx{stroke-dasharray:6 5;stroke:#8A90A6}
.nd.rs-fail .bx{stroke:#FF2E88;stroke-width:3}
.nd:focus{outline:none}
.nd:focus-visible .bx{stroke:#FFC857;stroke-width:4}
.port .phit{fill:transparent;cursor:crosshair}
.port .pdot{fill:#030306;stroke:#3CF0FF;stroke-width:2.5}
.port.po .pdot{fill:#3CF0FF}
.port:hover .pdot{fill:#FFC857;stroke:#FFC857}
.fl-view .port{display:none}
.ed .ln{fill:none;stroke:#8A90A6;stroke-width:2}
.ed.off .ln{stroke-dasharray:5 5;opacity:.6}
.ed.sel .ln{stroke:#3CF0FF;stroke-width:3.5}
.ed.bad .ln{stroke:#FF2E88}
.ed .hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.tmp{fill:none;stroke:#FFC857;stroke-width:2.5;stroke-dasharray:6 4;pointer-events:none}
.fl-field{margin:0 0 10px}
.fl-lab{display:block;font:600 13px var(--kr);color:var(--dim);margin:0 0 4px}
.fl-chk{display:flex;gap:8px;align-items:center;min-height:44px}
.fl-chk input{width:20px;height:20px}
.fl-chk .fl-lab{margin:0;color:var(--white)}
.fl-side .in,.fl-side .sel{font-size:14px;padding:8px 10px;min-height:44px;margin-bottom:0}
.fl-err{color:var(--mag);font-size:12px;margin:4px 0 0;min-height:0}
.fl-err:empty{display:none}
.fl-lock{font:600 12px var(--kr);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--white);background:rgba(138,144,166,.18)}
.fl-actions{display:flex;gap:6px;margin:8px 0}
.fl-actions .ghost{padding:6px 16px}
.fl-actions .ghost:disabled{opacity:.4;cursor:not-allowed}
.fl-ed{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12px}
.fl-ed li{display:grid;gap:4px}
.fl-ed .ghost{padding:4px 12px;min-height:44px}
.fl-info{font-size:13px;margin:8px 0 4px;min-height:20px}
.fl-legend{margin-top:4px}
.fl-simbox:empty{display:none}
.fl-sim{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fl-sim li{display:grid;grid-template-columns:200px minmax(0,1fr) 70px;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px}
.fl-sim li.skip{opacity:.6;border-style:dashed}
.fl-vers{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fl-vers li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.fl-vers li.act{border-color:var(--cyan)}
.fl-vers small{display:block;color:var(--dim);font:400 12px var(--mono)}
.fl-vers .ghost{padding:6px 14px;font-size:12px}
.fl-vers .ghost:disabled{opacity:.5}
.fl-narrow{display:none;font-size:13px}
@media (max-width:1100px){.fl-grid{grid-template-columns:170px minmax(0,1fr) 230px}}
@media (max-width:760px){
  .fl-edit{display:none!important}
  .fl-narrow{display:block}
  .fl-grid{grid-template-columns:minmax(0,1fr)}
  .fl-svg{height:360px}
  .fl-cv{min-height:360px}
  .fl-bar .sel{min-width:0;width:100%}
  .fl-sim li{grid-template-columns:minmax(0,1fr)}
  .fl-vers li{grid-template-columns:minmax(0,1fr)}
}

.fl-tag,.pane2[data-pane=flow] .tag{font-size:12px}