/* 워크플로우 지도. 전체화면 캔버스라 이 화면에서만 상단 바까지 어둡게 바꾼다. */
body.atlas-page{background:#050b09}
body.atlas-page header.global-nav{background:#070f0d;border-bottom-color:#152420}
body.atlas-page .brand{color:#8ef2cc}body.atlas-page .brand span{color:#5d746c}
body.atlas-page nav a,body.atlas-page .nav-user,body.atlas-page nav button.link{color:#8ba79d}
body.atlas-page nav a:hover,body.atlas-page nav button.link:hover{color:#eaf7f1}
.atlas-main{max-width:none;margin:0;padding:0;height:calc(100vh - 64px);overflow:hidden}
.glyph-sprite{position:absolute;width:0;height:0;overflow:hidden}

.atlas{--void:#050b09;--ink:#eaf7f1;--dim:#8ba79d;--faint:#5d746c;--edge:rgba(255,255,255,.1);
 --main:#2eb983;--glow:#8ef2cc;--retry:#f5b453;--fail:#f2716a;--cancel:#8fa39c;
 height:100%;display:grid;grid-template-columns:1fr 292px;grid-template-rows:auto 1fr;background:var(--void);color:var(--ink)}
.atlas:fullscreen{height:100vh}
.atlas.is-tight{grid-template-columns:1fr}
.atlas.is-tight .atlas-inspector{display:none}

/* 상단 바 */
.atlas-bar{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:13px 20px;z-index:5;
 border-bottom:1px solid var(--edge);background:linear-gradient(180deg,rgba(13,26,22,.96),rgba(8,18,15,.88));backdrop-filter:blur(14px)}
.atlas-back{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;border:1px solid var(--edge);
 color:var(--dim);text-decoration:none;font-size:15px;transition:.2s}
.atlas-back:hover{color:var(--ink);border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.05)}
.atlas-id{display:flex;align-items:center;gap:12px;min-width:0}
.atlas-mark{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;font-weight:900;font-size:12.5px;
 letter-spacing:.04em;color:#04120d;background:linear-gradient(140deg,#8ef2cc,#2eb983);box-shadow:0 10px 22px -10px rgba(46,185,131,.95)}
.atlas-kicker{display:block;font-size:9.5px;font-weight:800;letter-spacing:.2em;color:var(--main)}
.atlas-bar h1{margin:2px 0 0;font-size:17px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atlas-tabs{display:flex;gap:3px;padding:3px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.atlas-tab{border:0;background:none;color:var(--dim);font:inherit;font-size:12.5px;font-weight:650;padding:6px 13px;border-radius:8px;cursor:pointer;transition:.2s}
.atlas-tab:hover{color:var(--ink)}
.atlas-tab.is-on{background:rgba(142,242,204,.14);color:var(--glow);box-shadow:inset 0 0 0 1px rgba(142,242,204,.22)}
.atlas-tools{margin-left:auto;display:flex;gap:8px}
.atlas-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--ink);
 font:inherit;font-size:12.5px;font-weight:650;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.2s;white-space:nowrap}
.atlas-btn:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08)}
.atlas-btn.is-primary{background:linear-gradient(140deg,rgba(142,242,204,.22),rgba(46,185,131,.14));border-color:rgba(142,242,204,.34);color:#d9fff1}
.atlas-btn.is-primary:hover{background:linear-gradient(140deg,rgba(142,242,204,.32),rgba(46,185,131,.2))}
.btn-play{width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
/* 실제 작업을 따라갈 때의 표시 */
.atlas-live{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:10px;white-space:nowrap;
 font-size:12.5px;color:#d9fff1;background:rgba(142,242,204,.1);border:1px solid rgba(142,242,204,.28)}
.atlas-live i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--glow);
 box-shadow:0 0 0 4px rgba(142,242,204,.16);animation:dot 1.3s infinite}
.atlas-live b{font-weight:700}
.atlas-live em{font-style:normal;font-weight:800;color:var(--main)}
.is-running .btn-play{width:8px;height:9px;border:0;background:currentColor;border-radius:2px}

/* 캔버스 */
/* 캔버스를 끌면 글자가 선택돼 보기 불편하다. 여기서는 선택을 막고, 설명 패널은 복사할 수 있게 둔다. */
.atlas-viewport,.atlas-bar{user-select:none;-webkit-user-select:none}
.atlas-viewport{position:relative;overflow:hidden;cursor:grab;
 background-image:radial-gradient(circle,rgba(190,235,220,.1) 1px,transparent 1px);background-size:28px 28px}
.atlas-viewport.is-grabbing{cursor:grabbing}
.atlas-viewport:before{content:"";position:absolute;inset:-12%;pointer-events:none;
 background:radial-gradient(44% 44% at 18% 16%,rgba(46,185,131,.17),transparent 70%),
  radial-gradient(40% 40% at 84% 78%,rgba(74,150,255,.1),transparent 70%),
  radial-gradient(34% 34% at 64% 8%,rgba(142,242,204,.08),transparent 70%);
 animation:aurora 28s ease-in-out infinite alternate}
.atlas-viewport:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 190px rgba(0,0,0,.7)}
/* will-change를 항상 켜 두면 레이어가 1배로 구워진 뒤 축소돼 글씨가 흐려진다. 움직이는 동안만 켠다. */
.atlas-stage{position:absolute;top:0;left:0;transform-origin:0 0}
.atlas-stage.is-moving{will-change:transform}
.atlas-wires{position:absolute;top:0;left:0;z-index:1;overflow:visible}
.atlas-tags{position:absolute;top:0;left:0;z-index:2}
.wf-graph{position:relative;z-index:3}

/* 선: 대각선으로 가로지르지 않고 직각으로만 꺾는다 */
.wire{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s}
.wire-step{stroke:rgba(196,232,220,.46)}
.wire-pass{stroke:rgba(56,203,145,.72)}
.wire-retry{stroke:rgba(245,180,83,.62);stroke-dasharray:7 6}
.wire-cancel{stroke:rgba(154,177,169,.5);stroke-dasharray:5 6}
.wire-fail{stroke:rgba(242,113,106,.58);stroke-dasharray:5 6}
.wire-fallback{stroke:rgba(245,180,83,.62)}
.wire.is-dim,.wire-flow.is-dim{opacity:.12}
#ah-step path{fill:rgba(196,232,220,.62)}#ah-pass path{fill:rgba(56,203,145,.9)}
#ah-retry path{fill:rgba(245,180,83,.85)}#ah-cancel path{fill:rgba(154,177,169,.72)}#ah-fail path{fill:rgba(242,113,106,.82)}
#ah-fallback path{fill:rgba(245,180,83,.85)}
.wire-flow{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;stroke-dasharray:16 460;transition:opacity .25s}
.flow-step,.flow-pass{stroke:var(--glow);opacity:.24;animation:wire-run 4s linear infinite}
.flow-retry,.flow-fallback{stroke:var(--retry)}.flow-cancel{stroke:var(--cancel)}.flow-fail{stroke:var(--fail)}
.wire-flow.is-live{opacity:1;animation:wire-run 1.4s linear infinite}
.wire-tag{position:absolute;transform:translate(-50%,-50%);padding:3px 9px;border-radius:999px;white-space:nowrap;
 font-size:10.5px;font-weight:700;color:var(--dim);background:rgba(7,16,13,.88);border:1px solid var(--edge);backdrop-filter:blur(6px);transition:.25s}
.tag-retry,.tag-fallback{color:var(--retry);border-color:rgba(245,180,83,.3)}
.tag-fail{color:var(--fail);border-color:rgba(242,113,106,.28)}
.tag-pass{color:var(--main);border-color:rgba(46,185,131,.3)}
.wire-tag.is-v{transform:translate(9px,-50%)}
.wire-tag.is-dim{opacity:.15}
.tag-retry.is-live,.tag-fallback.is-live{background:var(--retry);color:#231502;border-color:transparent}
.tag-pass.is-live{background:var(--main);color:#04150f;border-color:transparent}
.tag-fail.is-live{background:var(--fail);color:#2a0908;border-color:transparent}
.tag-cancel.is-live{background:var(--cancel);color:#0e1614;border-color:transparent}

/* 노드 */
.wf-node{--tone:#4fd3a0;--halo:rgba(79,211,160,.5);position:absolute;box-sizing:border-box;width:182px;padding:13px 15px 14px;
 display:flex;flex-direction:column;gap:3px;border-radius:16px;cursor:pointer;
 background:linear-gradient(157deg,rgba(233,255,247,.13),rgba(210,240,232,.035));border:1px solid rgba(255,255,255,.15);
 box-shadow:0 24px 40px -22px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(150%);
 transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,opacity .3s}
.wf-node:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 4px 4px 0;background:var(--tone);box-shadow:0 0 14px var(--halo)}
.wf-node:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
.wf-node:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.wf-top{display:flex;align-items:center;gap:7px}
.wf-glyph{width:15px;height:15px;flex:none;color:var(--tone);fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.wf-index{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.wf-node b{font-size:14.5px;font-weight:750;letter-spacing:-.01em}
.wf-node small{font-size:11px;line-height:1.35;color:var(--dim)}
.role-prepare{--tone:#4fd3a0;--halo:rgba(79,211,160,.5)}
.role-generate{--tone:#8ef2cc;--halo:rgba(142,242,204,.55)}
.role-validate{--tone:#6fd8ff;--halo:rgba(111,216,255,.45)}
.role-persist{--tone:#2eb983;--halo:rgba(46,185,131,.5)}
.role-cancel{--tone:#9db1aa;--halo:rgba(157,177,170,.4)}
.role-fail{--tone:#f2716a;--halo:rgba(242,113,106,.45)}
.role-start,.role-end{--tone:#b8d8cd;--halo:rgba(184,216,205,.4)}
.wf-node.is-pill{width:auto;flex-direction:row;align-items:center;gap:8px;padding:10px 17px;border-radius:999px}
.wf-node.is-pill:before{display:none}
.wf-node.is-pill b{font-size:13px}
/* 카드에 늘 펼쳐 두는 내용. 노드는 포트가 없고 state 전체를 받아 바뀐 키만 돌려주므로 그 키를 적는다. */
.wf-detail{margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.11)}
.wf-io{margin:0 0 10px;display:grid;gap:4px}
.wf-io>div{display:flex;gap:7px;align-items:baseline}
.wf-io dt{flex:none;font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--faint)}
.wf-io dd{margin:0;font-size:9.5px;line-height:1.38;color:var(--tone);overflow-wrap:anywhere;
 font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wf-branch{margin:10px 0 0;padding:7px 9px 8px;border-radius:8px;
 background:rgba(111,216,255,.09);border:1px solid rgba(111,216,255,.2)}
.wf-branch-cap{display:block;margin-bottom:4px;font-size:8.5px;font-weight:800;letter-spacing:.1em;color:#7fb3c8}
.wf-branch dl{margin:0;display:grid;gap:3px}
.wf-branch dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wf-branch dt{font-size:9px;color:#9fc9dc;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.wf-branch dd{margin:0;font-size:9.5px;font-weight:700;color:#d9eff8;white-space:nowrap}
.wf-facts{margin:9px 0 0;padding:0;list-style:none;display:grid;gap:5px}
.wf-facts li{position:relative;padding-left:11px;font-size:10.5px;line-height:1.42;color:#a9c4bc}
.wf-facts li:before{content:"";position:absolute;left:1px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--tone);opacity:.85}
.wf-pct{display:block;margin-top:9px;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--faint)}
.wf-node.is-done{border-color:rgba(46,185,131,.4)}
.wf-node.is-picked{border-color:var(--tone);box-shadow:0 0 0 1px var(--tone),0 22px 38px -24px #000}
.wf-node.is-live{border-color:var(--tone);transform:translateY(-4px);animation:breathe 1.5s ease-in-out infinite}

/* 실행 로그와 범례 */
.atlas-console{position:absolute;left:50%;top:20px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:11px;max-width:min(560px,62%);
 padding:12px 16px;border-radius:13px;font-size:13px;color:#dcefe8;background:rgba(7,15,13,.88);border:1px solid var(--edge);
 backdrop-filter:blur(14px);box-shadow:0 22px 44px -26px #000;animation:rise .3s ease}
.atlas-console i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px rgba(142,242,204,.16);animation:dot 1.3s infinite}
.atlas-console.is-warn{border-color:rgba(245,180,83,.38);color:#ffe4bb}
.atlas-console.is-warn i{background:var(--retry);box-shadow:0 0 0 4px rgba(245,180,83,.18)}
.atlas-legend{position:absolute;right:20px;bottom:24px;z-index:4;display:flex;gap:15px;font-size:11px;color:var(--faint)}
.lg{display:flex;align-items:center;gap:6px}
.lg:before{content:"";width:15px;height:2px;border-radius:2px;background:currentColor}
.lg-step{color:#9dc3b6}.lg-retry{color:var(--retry)}.lg-cancel{color:var(--cancel)}.lg-fail{color:var(--fail)}
.atlas-zoom{position:absolute;right:20px;top:20px;z-index:4;display:flex;flex-direction:column;gap:6px}
.atlas-zoom button{width:32px;height:32px;padding:0;display:grid;place-items:center;border-radius:9px;
 border:1px solid var(--edge);background:rgba(8,18,15,.82);color:var(--dim);font:600 17px/1 system-ui,sans-serif;
 cursor:pointer;backdrop-filter:blur(8px);transition:.2s}
.atlas-zoom button:hover{color:var(--ink);border-color:rgba(255,255,255,.24)}

/* 오른쪽 설명 패널 */
.atlas-inspector{display:flex;flex-direction:column;overflow:auto;padding:22px 20px 20px;
 border-left:1px solid var(--edge);background:linear-gradient(180deg,rgba(11,22,18,.94),rgba(6,13,11,.94))}
.ins-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.ins-eyebrow.role-cancel{color:var(--cancel)}.ins-eyebrow.role-fail{color:var(--fail)}
.ins-eyebrow.role-validate{color:#6fd8ff}.ins-eyebrow.role-generate,.ins-eyebrow.role-persist,.ins-eyebrow.role-prepare{color:var(--main)}
.ins-pane h2{margin:9px 0 0;font-size:19px;letter-spacing:-.01em}
.ins-pane p{margin:11px 0 0;font-size:13.4px;line-height:1.68;color:#c3d8d1}
.ins-id{display:inline-block;margin-top:9px;padding:2px 8px;border-radius:6px;font-size:11px;color:var(--main);
 background:rgba(46,185,131,.1);border:1px solid rgba(46,185,131,.2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ins-facts{margin:18px 0 0;display:grid;gap:1px;border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--edge)}
.ins-facts>div{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;background:rgba(8,17,14,.92);font-size:12.5px}
.ins-facts dt{color:var(--faint)}.ins-facts dd{margin:0;font-weight:700}
.ins-note{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:12.2px;line-height:1.62;color:var(--dim);
 background:rgba(46,185,131,.06);border:1px solid rgba(46,185,131,.15)}
.ins-progress{margin-top:18px;position:relative;height:4px;border-radius:9px;background:rgba(255,255,255,.08)}
.ins-progress i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#23ae7a,#8ef2cc);box-shadow:0 0 12px rgba(117,229,186,.6)}
.ins-progress span{position:absolute;left:0;top:11px;font-size:11.5px;color:var(--faint);white-space:nowrap}
.ins-agents{margin-top:26px;padding-top:22px;border-top:1px solid var(--edge)}
.ins-links{margin-top:9px;display:grid;gap:2px}
.ins-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;color:var(--dim);text-decoration:none;font-size:13px;transition:.2s}
.ins-link b{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:10px;background:rgba(255,255,255,.06)}
.ins-link:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.ins-link.is-on{color:var(--glow);background:rgba(142,242,204,.09)}
.ins-link.is-on b{background:linear-gradient(140deg,#8ef2cc,#2eb983);color:#04120d}

@keyframes aurora{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.09)}}
@keyframes wire-run{from{stroke-dashoffset:476}to{stroke-dashoffset:0}}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px var(--tone),0 0 28px -8px var(--halo),0 22px 40px -24px #000}
 50%{box-shadow:0 0 0 1px var(--tone),0 0 54px 0 var(--halo),0 22px 40px -24px #000}}
@keyframes rise{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes dot{50%{box-shadow:0 0 0 8px rgba(142,242,204,0)}}

/* 좁은 화면에서는 설명 패널을 접고 캔버스만 남긴다. */
@media(max-width:1040px){.atlas{grid-template-columns:1fr}.atlas-inspector{display:none}}
@media(max-width:760px){.atlas-bar{flex-wrap:wrap;gap:10px;padding:12px 14px}.atlas-tools{width:100%;margin-left:0}
 .atlas-btn{flex:1;justify-content:center;padding:9px 10px}.atlas-bar h1{font-size:15px}.atlas-legend{display:none}}
@media(prefers-reduced-motion:reduce){.atlas-viewport:before,.wire-flow,.wf-node.is-live,.atlas-console i{animation:none}}