/* ASTRAN 시리즈 공통 '흐름형' 보기 — astran-flow.css · 원본: deploy/standards/common (RECY recy.css .nflow에서 뽑음)
   무대(가운데 원·카드)는 다크 기본, body.light(또는 opts.isLight()가 참이면 .aflow.lt)이면 밝은 무대. 오른쪽 목록은 제품 변수(--text,--sub,--mute,--line,--red)를 씁니다. */
.aflow{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;font-family:inherit}
.aflow.has-side{grid-template-columns:minmax(0,1fr) minmax(260px,300px)}
.af-stage{position:relative;width:100%;min-height:560px;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.03),transparent 60%),#06080d;--nft:#e9ecf2;--nfs:#9aa3b2;--nfm:#6b7586;--nfp:rgba(14,19,30,.86);--nfl:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.06)}
body.light .af-stage,.aflow.lt .af-stage{background:radial-gradient(ellipse at 50% 20%,rgba(20,40,90,.05),transparent 60%),#f6f8fc;--nft:#151a24;--nfs:#4c5566;--nfm:#6b7586;--nfp:rgba(255,255,255,.94);--nfl:rgba(15,23,42,.10);border-color:rgba(15,23,42,.08)}
.af-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--nfl) 1px,transparent 1px),linear-gradient(90deg,var(--nfl) 1px,transparent 1px);background-size:44px 44px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 25%,#000 25%,transparent 70%);pointer-events:none}
.af-fx{position:absolute;left:0;top:0;width:100%;pointer-events:none}.af-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.af-crumb{position:absolute;left:14px;top:12px;right:14px;z-index:4;display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--nfs)}.af-crumb a{color:var(--nfs);text-decoration:none}.af-crumb a:hover{color:var(--nft)}.af-crumb b{color:var(--nft)}
.af-core{position:absolute;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;z-index:3;cursor:pointer;word-break:keep-all;color:var(--nft);outline:none}
.af-core:focus-visible .af-ring{outline:2px solid var(--glow);outline-offset:4px}
.af-core .af-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:radial-gradient(circle,rgba(10,14,24,.96) 55%,rgba(10,14,24,.65));box-shadow:0 0 30px var(--glow),inset 0 0 30px rgba(255,255,255,.08);animation:afbr 3.2s ease-in-out infinite}
body.light .af-core .af-ring,.aflow.lt .af-core .af-ring{border-color:rgba(15,23,42,.25);background:radial-gradient(circle,#fff 58%,rgba(255,255,255,.8));box-shadow:0 0 30px var(--glow),inset 0 0 20px rgba(15,23,42,.05)}
@keyframes afbr{50%{box-shadow:0 0 54px var(--glow),inset 0 0 36px rgba(255,255,255,.12)}}
.af-core .af-orb{position:absolute;inset:-24px;border-radius:50%;border:1px dashed var(--nfl);animation:afsp 28s linear infinite}@keyframes afsp{to{transform:rotate(360deg)}}
.af-core>*:not(.af-ring):not(.af-orb){position:relative}.af-core .pg.big{width:32px;height:32px;color:var(--glow)}
.af-core .k{font-size:10.5px;color:var(--nfs);letter-spacing:.05em}.af-core .n{font-size:15px;font-weight:800;line-height:1.25;padding:0 18px;color:var(--nft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.af-card{position:absolute;transform:translateX(-50%);padding:12px 9px 9px;border-radius:14px;background:var(--nfp);border:1px solid var(--nfl);border-top:2px solid var(--c);text-align:center;z-index:3;box-shadow:0 10px 28px -14px rgba(0,0,0,.5);animation:affd .45s ease;box-sizing:border-box}
@keyframes affd{from{opacity:0;transform:translate(-50%,8px)}}
.af-card .ic{width:42px;height:42px;margin:0 auto 6px;border-radius:12px;display:grid;place-items:center;color:var(--c);border:1px solid var(--c);box-shadow:0 0 18px -5px var(--c)}.af-card .ic svg{width:23px;height:23px}
.af-card .t{font-size:13px;font-weight:700;color:var(--nft)}.af-card .c{font-size:11px;color:var(--nfm);margin-top:1px}
.af-note{margin-top:7px;font-size:10.5px;line-height:1.4;color:#d99a00;text-align:left;padding:5px 7px;border-radius:7px;background:rgba(255,176,32,.10);word-break:keep-all}
body.light .af-note,.aflow.lt .af-note{color:#9a6200}
.af-chips{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.af-chip{display:flex;gap:7px;align-items:center;font:inherit;font-size:11.5px;line-height:1.35;padding:5px 7px;border-radius:8px;background:rgba(127,127,127,.06);border:1px solid var(--nfl);color:var(--nft);cursor:pointer;text-align:left;word-break:keep-all;overflow-wrap:anywhere;transition:.15s;width:100%;box-sizing:border-box}
.af-chip:hover,.af-chip.sel{border-color:var(--c);background:rgba(127,127,127,.12)}.af-chip:focus-visible{outline:2px solid var(--c);outline-offset:1px}
.af-chip .pg{flex:none;width:17px;height:17px;color:var(--c)}.af-chip .cn{min-width:0;flex:1}.af-chip .sb{display:block;font-size:10px;color:var(--nfm);margin-top:1px}
.af-chip .tg{flex:none;font-size:10px;color:var(--nfs);font-variant-numeric:tabular-nums}.af-chip .tv{display:block;font-size:10.5px;color:var(--nfs);font-variant-numeric:tabular-nums;margin-top:1px}
.af-mk{flex:none;min-width:22px;height:16px;padding:0 4px;border-radius:4px;font-size:9.5px;font-weight:800;letter-spacing:.03em;display:inline-grid;place-items:center;color:#05070c;background:var(--c)}
.af-bd{flex:none;display:inline-block;vertical-align:1px;line-height:1.35;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:5px;background:rgba(127,127,127,.16);color:var(--nfs,var(--sub));white-space:nowrap}
.af-bd.ok{background:rgba(61,220,151,.16);color:#2fbf80}.af-bd.warn{background:rgba(255,176,32,.16);color:#e09a10}.af-bd.bad{background:rgba(255,45,61,.16);color:#ff5c69}.af-bd.info{background:rgba(79,157,255,.16);color:#4f9dff}
.af-core .af-bd{margin-top:3px}
.af-more{margin-top:6px;border:0;background:none;color:var(--nfs);font:inherit;font-size:11px;cursor:pointer}.af-more:hover{color:var(--nft)}
.af-empty{position:absolute;left:0;right:0;top:300px;text-align:center;color:var(--nfs);padding:0 20px}
/* 오른쪽 연결 목록 · 근거 */
.af-side{border:1px solid var(--line,rgba(127,127,127,.2));border-radius:12px;padding:12px 12px 8px;background:var(--panel,transparent);color:var(--text);min-width:0;max-height:calc(100vh - 140px);overflow:auto;position:sticky;top:12px;box-sizing:border-box}
.af-sh .k{font-size:11px;color:var(--mute)}.af-sh b{display:block;font-size:15px;margin:2px 0;word-break:keep-all}.af-sh .s{font-size:11.5px;color:var(--sub)}
.af-detail{margin:10px 0;padding:10px;border-radius:10px;background:rgba(127,127,127,.07);border:1px solid var(--line,rgba(127,127,127,.2))}
.af-dk{font-size:11px;color:var(--c,var(--mute));font-weight:700}.af-dn{font-size:14px;font-weight:800;margin:2px 0 4px;word-break:keep-all}
.af-ds{font-size:12px;color:var(--sub);line-height:1.5;margin-top:2px;word-break:keep-all}.af-ds.mute{color:var(--mute);margin-top:8px;font-size:11.5px}
.af-detail table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12px}.af-detail th{text-align:left;color:var(--mute);font-weight:500;padding:3px 6px 3px 0;vertical-align:top;white-space:nowrap;width:1%}.af-detail td{padding:3px 0;word-break:keep-all;overflow-wrap:anywhere}
.af-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.af-acts:empty{display:none}
.af-btn{font:inherit;font-size:12px;padding:5px 10px;border-radius:8px;border:1px solid var(--line,rgba(127,127,127,.3));background:none;color:var(--text);cursor:pointer}.af-btn:hover{border-color:var(--red)}.af-btn.pri{background:var(--red);border-color:var(--red);color:#fff}
.af-lg{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--c);margin:10px 0 3px;padding-bottom:3px;border-bottom:1px solid var(--line,rgba(127,127,127,.2))}
.af-li{display:flex;gap:7px;align-items:center;width:100%;font:inherit;font-size:12px;padding:5px 4px;border:0;border-radius:7px;background:none;color:var(--text);cursor:pointer;text-align:left}
.af-li i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}.af-li .ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.af-li .tg{flex:none;font-size:11px;color:var(--mute)}
.af-li:hover,.af-li.sel{background:rgba(127,127,127,.10)}.af-li.sel .ln{font-weight:700}
@media (prefers-reduced-motion: reduce){.af-core .af-ring,.af-core .af-orb,.af-card{animation:none}}
@media (max-width:900px){.aflow.has-side{grid-template-columns:minmax(0,1fr)}.af-side{position:static;max-height:none}}
.af-stage.mob .af-core{width:132px;height:132px}.af-stage.mob .af-core .n{font-size:13px;padding:0 14px}.af-stage.mob .af-core .af-orb{inset:-16px}.af-stage.mob .af-core .pg.big{width:24px;height:24px}