/* UNIVERSE MAP: 어랍쇼넷 공통 틀 밖에서 독립한 디자인(공지사항 6번). 한 화면에 궤도 지도, 어두운 바탕 + 가는 선 */
:root{--bg:#0b0c0f;--ink:#ebe8e1;--dim:#8d8a84;--faint:#55534f;--line:rgba(235,232,225,.14);
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;--serif:'Noto Serif KR','Nanum Myeongjo',serif;--node:44px}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);overflow:hidden}
body{display:flex;flex-direction:column;font-family:var(--serif);word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.stars{position:fixed;inset:0;pointer-events:none;background-image:
 radial-gradient(1px 1px at 12% 18%,rgba(235,232,225,.55),transparent),radial-gradient(1px 1px at 78% 9%,rgba(235,232,225,.4),transparent),
 radial-gradient(1px 1px at 41% 63%,rgba(235,232,225,.35),transparent),radial-gradient(1px 1px at 91% 72%,rgba(235,232,225,.5),transparent),
 radial-gradient(1px 1px at 6% 88%,rgba(235,232,225,.3),transparent),radial-gradient(1px 1px at 63% 36%,rgba(235,232,225,.3),transparent),
 radial-gradient(1px 1px at 27% 41%,rgba(235,232,225,.25),transparent),radial-gradient(1px 1px at 53% 92%,rgba(235,232,225,.4),transparent);background-size:700px 700px}
.top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 20px;font-family:var(--sans);font-size:16px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.top b{color:var(--ink);font-weight:700}.top a:hover{color:var(--ink)}
#stage{position:relative;flex:1;min-height:0;z-index:1}
#rings{position:absolute;inset:0;width:100%;height:100%}
#rings .orb{fill:none;stroke:rgba(235,232,225,.34);stroke-width:1}#rings .orb.out2{stroke:rgba(235,232,225,.16)}#rings .orb.eq{stroke:rgba(235,232,225,.26)}#rings .orb.in{stroke:rgba(235,232,225,.3)}#rings .orb.dash{stroke-dasharray:3 5;stroke:rgba(235,232,225,.3)}
#rings .su{stroke:rgba(235,232,225,.09);stroke-width:1}#rings text.sun{font-family:var(--serif);font-size:10px;fill:rgba(235,232,225,.34)}
#rings .pole{fill:var(--ink)}#rings .polering{fill:none;stroke:rgba(235,232,225,.5);stroke-dasharray:2 3}#rings text.here{font-family:var(--sans);font-size:8px;letter-spacing:.24em;fill:var(--dim)}
#nodes{position:absolute;inset:0}
.node{position:absolute;left:0;top:0;width:var(--node);height:var(--node);margin:calc(var(--node) / -2) 0 0 calc(var(--node) / -2);display:block;will-change:transform;cursor:pointer;outline:none}
.node .tail{position:absolute;left:50%;top:50%;width:56px;height:4px;margin-top:-2.5px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(235,232,225,.55),transparent);border-radius:3px;pointer-events:none}
.node .sh{display:none}.node.up .nm{top:auto;bottom:100%;margin:0 0 4px}
.node .nm{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:5px;font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;white-space:nowrap;color:var(--ink);text-shadow:0 0 6px var(--bg),0 0 6px var(--bg);pointer-events:none}
#card{font-family:var(--sans)}
.bottom{position:relative;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:6px 20px 18px;min-height:96px}
#intro h1{margin:0;font-weight:200;font-size:17px;letter-spacing:.14em;line-height:1.1}
#intro p{margin:6px 0 0;font-size:11.5px;font-weight:300;line-height:1.75;color:var(--ink)}
#intro small{display:block;margin-top:8px;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;color:var(--dim)}
#card{max-width:420px;text-align:left}
#card .k{font-size:10px;letter-spacing:.2em;color:var(--dim)}
#card .t{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
#card .t img,#card .t i{width:30px;height:30px;border-radius:24%;object-fit:cover;background:#17181c;font-style:normal;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--dim);border:1px solid var(--line)}
#card .t b{font-size:17px;font-weight:600;letter-spacing:.03em}
#card p{margin:0;font-family:var(--serif);font-size:13px;color:var(--dim);line-height:1.65}
#card .go{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.14em;border-bottom:1px solid var(--ink);padding-bottom:1px}
#card .lock{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.14em;color:var(--faint)}
@media (min-width:821px){
  .bottom{justify-content:space-between;padding-bottom:26px}
  #card{margin-left:auto;text-align:left;min-width:300px}
}
@media (max-width:820px){
  :root{--node:36px}
  .node .full{display:none}.node .sh{display:inline}.node.up .nm{top:auto;bottom:100%;margin:0 0 4px}
.node .nm{font-size:9.5px;margin-top:3px;letter-spacing:0}
  #rings text{font-size:7.5px;letter-spacing:.2em}
  .bottom{display:block;padding:4px 16px 14px;min-height:112px}
  #intro h1{font-size:15px}#intro p{font-size:11px;margin-top:4px}
  .bottom.sel #intro{display:none}
  #card{max-width:none}
}


#lead{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
#lead line{stroke:rgba(235,232,225,.55);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .2s}
#lead.on line{opacity:1}
/* 성도판 */
#rings .mw{fill:none;stroke-linecap:round}
#rings .tw{fill:#ebe8e1;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12}50%{opacity:.8}}
#rings .cl{fill:none;stroke:rgba(235,232,225,.3);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 2.4s .6s both}
@keyframes draw{from{stroke-dasharray:0 1}to{stroke-dasharray:1 0}}
@keyframes appear{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

/* 별: 이름 붙은 곳은 아이콘 대신 급에 맞는 크기의 별. 은하 > 행성 > 성단 > 성단 식구 */
.node .pl{position:absolute;left:50%;top:50%;width:var(--s,10px);height:var(--s,10px);margin:calc(var(--s,10px) / -2) 0 0 calc(var(--s,10px) / -2);border-radius:50%;background:var(--ink);box-shadow:0 0 calc(var(--s,10px) * .9) calc(var(--s,10px) * .15) rgba(235,232,225,.25);transition:transform .2s}
.node.g{--s:14px}.node.g .pl{box-shadow:0 0 0 4px var(--bg),0 0 0 5px rgba(235,232,225,.6),0 0 16px 6px rgba(235,232,225,.2)}.node.p{--s:11px}.node.cl{--s:13px}.node.m{--s:7px}.node.closed{--s:9px}
.node.closed .pl{background:var(--bg);border:1.2px solid rgba(235,232,225,.75);box-shadow:none}
.node .rg{position:absolute;left:50%;top:50%;width:30px;height:9px;margin:-4.5px 0 0 -15px;border:1.2px solid rgba(235,232,225,.7);border-radius:50%;transform:rotate(-22deg);pointer-events:none}
.node:hover .pl,.node:focus-visible .pl,.node.on .pl{transform:scale(1.5)}
.node .nm{top:calc(50% + 11px);margin-top:0}
#card .t b{margin-left:0}
#rings .zoom{fill:rgba(235,232,225,.035);stroke:rgba(235,232,225,.4)}#rings .cone{stroke:rgba(235,232,225,.22);stroke-width:1}
/* 확대: 아이콘 나타남, 끌기 */
#cam .orb,#cam .su,#cam .zoom,#cam .polering,#rings .sweepl{stroke-width:calc(1px / var(--k,1))}
#stage{touch-action:none;cursor:grab}#stage.drag{cursor:grabbing}
.node .ic{position:absolute;left:50%;top:50%;width:calc(30px * var(--zi,1));height:calc(30px * var(--zi,1));margin:calc(var(--zi,1) * -15px) 0 0 calc(var(--zi,1) * -15px);border-radius:24%;object-fit:contain;background:#17181c;border:1px solid rgba(235,232,225,.25);opacity:0;transform:scale(.4);transition:opacity .35s,transform .35s;pointer-events:none}
#nodes.zm .node.hasic .ic{opacity:1;transform:scale(1)}#nodes.zm .node.hasic .pl{opacity:0}
.node .pl{width:calc(var(--s,10px) * var(--z,1));height:calc(var(--s,10px) * var(--z,1));margin:calc(var(--s,10px) * var(--z,1) / -2) 0 0 calc(var(--s,10px) * var(--z,1) / -2)}
#zoomctl{position:absolute;left:16px;bottom:10px;z-index:4;display:flex;gap:6px}
#zoomctl button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(235,232,225,.3);background:rgba(11,12,15,.6);color:var(--ink);font:400 15px/1 var(--sans);cursor:pointer}
#zoomctl button:hover{border-color:var(--ink)}
#card .co{margin-top:6px;font-size:10.5px;letter-spacing:.14em;color:var(--dim);font-variant-numeric:tabular-nums}#coord{display:inline-block;min-width:21em;font-variant-numeric:tabular-nums}
@media (max-width:820px){#coord{min-width:0}}
/* SF 화면 느낌: 아주 옅게 */
#rings .sweep{fill:rgba(235,232,225,.045);stroke:none}#rings .sweepl{stroke:rgba(235,232,225,.22)}
#reticle{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(235,232,225,.5);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s;z-index:3}
#reticle::before,#reticle::after{content:"";position:absolute;background:rgba(235,232,225,.5)}
#reticle::before{left:50%;top:-6px;bottom:-6px;width:1px}#reticle::after{top:50%;left:-6px;right:-6px;height:1px}
#hud{position:absolute;left:20px;top:10px;z-index:3;font:400 9.5px/1.7 var(--sans);letter-spacing:.2em;color:var(--dim);pointer-events:none;font-variant-numeric:tabular-nums}
#hud div:first-child{color:var(--ink);opacity:.8;animation:blink 3.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.br{position:absolute;width:14px;height:14px;pointer-events:none;border:0 solid rgba(235,232,225,.28);z-index:3}
.br.tl{left:10px;top:6px;border-width:1px 0 0 1px}.br.tr{right:10px;top:6px;border-width:1px 1px 0 0}.br.bl{left:10px;bottom:4px;border-width:0 0 1px 1px}.br.brr{right:10px;bottom:4px;border-width:0 1px 1px 0}
@media (max-width:820px){#hud,#reticle{display:none}}
@media (prefers-reduced-motion:reduce){#hud div:first-child{animation:none}}
/* 지도 위 글자는 선택·번역되지 않게(탐색 중 파란 선택과 번역 아이콘 방지). 설명 카드·소개 글은 선택 가능 */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#card,#intro{-webkit-user-select:text;user-select:text}
#nodes img,#rings{-webkit-user-drag:none;user-drag:none}
#minimap{position:absolute;right:16px;bottom:10px;z-index:4;width:132px;height:84px;border:1px solid rgba(235,232,225,.3);background:rgba(11,12,15,.7);opacity:0;pointer-events:none;transition:opacity .25s;cursor:pointer}
#minimap.on{opacity:1;pointer-events:auto}
#mmdots i{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;background:rgba(235,232,225,.7);border-radius:50%}#mmdots i.g{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:var(--ink)}#mmdots i.c{background:none;border:1px solid rgba(235,232,225,.6)}
#mmview{position:absolute;border:1px solid var(--ink);background:rgba(235,232,225,.08);pointer-events:none}
@media (max-width:820px){#minimap{width:96px;height:96px;bottom:auto;top:8px;right:8px}}
.node .nm{top:calc(50% + 11px + var(--lab,0px))}
#stage{overflow:hidden}
/* INDEX 목록 */
#idx{position:absolute;left:122px;bottom:10px;z-index:5;font-family:var(--sans)}
#idxbtn{height:30px;padding:0 12px;border-radius:15px;border:1px solid rgba(235,232,225,.3);background:rgba(11,12,15,.6);color:var(--ink);font:400 10.5px/1 var(--sans);letter-spacing:.18em;cursor:pointer}
#idxbtn:hover,#idxbtn.on{border-color:var(--ink)}
#idxlist{position:absolute;left:-106px;bottom:40px;width:232px;max-height:min(60vh,430px);overflow:auto;padding:8px 6px 8px;background:rgba(11,12,15,.92);border:1px solid rgba(235,232,225,.28);-webkit-user-select:none;user-select:none}
.ig{padding:8px 8px 3px;font-size:9px;letter-spacing:.22em;color:var(--dim)}
.ir{display:flex;align-items:center;justify-content:space-between}
.ir a{flex:1;padding:6px 8px;font-size:12.5px;color:var(--ink)}.ir a:hover{background:rgba(235,232,225,.08)}
.ir .loc{width:28px;height:28px;border:0;background:none;color:var(--dim);font-size:13px;cursor:pointer}.ir .loc:hover{color:var(--ink)}
/* 구석 반복 애니 */
#fx{position:absolute;right:18px;bottom:16px;z-index:2;display:flex;align-items:flex-end;gap:16px;opacity:.5;pointer-events:none}
#fx .warp{overflow:hidden;border:1px solid rgba(235,232,225,.18)}
#fx .w{stroke:rgba(235,232,225,.75);stroke-width:.6;stroke-dasharray:4 70;animation:warp 1.6s linear infinite}
@keyframes warp{from{stroke-dashoffset:0}to{stroke-dashoffset:-74}}
#fx .fxc{display:grid;gap:6px}
#fx .scope{border-bottom:1px solid rgba(235,232,225,.18);overflow:hidden}
#fx .scope polyline{fill:none;stroke:rgba(235,232,225,.8);stroke-width:.9;animation:scope 4s linear infinite}
@keyframes scope{to{transform:translateX(-120px)}}
#fxhex{margin:0;font:400 9px/1.5 var(--sans);letter-spacing:.14em;color:var(--dim)}
#fx .ring circle{fill:none;stroke:rgba(235,232,225,.7);stroke-width:.8}
#fx .ring .r1{stroke-dasharray:3 5;animation:spin 22s linear infinite}#fx .ring .r2{stroke-dasharray:10 4;animation:spin 14s linear infinite reverse}
#fx .ring .d{fill:var(--ink)}#fx .ring line{stroke:rgba(235,232,225,.6);stroke-width:.8}
@keyframes spin{to{transform:rotate(360deg)}}
#minimap{top:10px;bottom:auto}
@media (max-width:820px){#fx{display:none}#idx{left:122px}#idxlist{left:-106px;width:min(232px,86vw)}}
@media (prefers-reduced-motion:reduce){#fx *{animation:none!important}}

/* 왼쪽 SF 프레임: 갈 곳 목록(늘 펼침) + 네비게이터 */
#idx{position:absolute;left:0;top:0;bottom:0;width:0}
#idxframe{position:absolute;left:16px;top:132px;bottom:56px;width:222px;z-index:5;padding:1px;background:rgba(235,232,225,.34);
 clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);animation:fpulse 6s ease-in-out infinite}
@keyframes fpulse{50%{background:rgba(235,232,225,.2)}}
#idxframe[hidden]{display:block}
#idxin{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:rgba(11,12,15,.94);font-family:var(--sans);
 clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px)}
#idxin::before,#idxin::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;border:0 solid rgba(235,232,225,.8)}
#idxin::before{left:0;top:0;border-width:2px 0 0 2px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
#idxin::after{right:0;bottom:0;border-width:0 2px 2px 0}
#idxin .ttl{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;font-size:10px;letter-spacing:.24em;color:var(--ink);border-bottom:1px solid rgba(235,232,225,.18)}
#idxin .ttl i{width:6px;height:6px;background:var(--ink);animation:blink 1.8s steps(2,jump-none) infinite}
#idxin .ttl span{margin-left:auto;color:var(--dim);letter-spacing:.1em}
#idxin .scan{position:absolute;left:0;right:0;top:0;height:46px;pointer-events:none;background:linear-gradient(transparent,rgba(235,232,225,.07),transparent);animation:scanY 7s linear infinite}
@keyframes scanY{from{transform:translateY(-50px)}to{transform:translateY(560px)}}
#idxframe #idxlist{position:static;width:auto;max-height:none;flex:1;min-height:0;overflow:auto;padding:4px 6px 6px;background:none;border:0;scrollbar-width:thin;scrollbar-color:rgba(235,232,225,.3) transparent}
#idxframe .ig{display:flex;align-items:center;gap:8px;padding:9px 8px 3px;font-size:9px;letter-spacing:.22em;color:var(--dim)}
#idxframe .ig i{flex:0 0 14px;height:1px;background:rgba(235,232,225,.5)}
#idxframe .ir{animation:ixin .5s both;animation-delay:calc(var(--i,0) * 45ms + .5s)}
@keyframes ixin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
#idxframe .ir a{position:relative;display:block;padding:5px 8px 5px 16px;font-size:12.5px;letter-spacing:.04em}
#idxframe .ir a u{position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border:1px solid rgba(235,232,225,.5);transform:rotate(45deg);transition:.2s}
#idxframe .ir:hover a,#idxframe .ir.on a{background:linear-gradient(90deg,rgba(235,232,225,.12),transparent)}
#idxframe .ir:hover a u,#idxframe .ir.on a u{background:var(--ink);border-color:var(--ink)}
#idxin #minimap{position:static;order:9;width:auto;height:96px;margin:0 8px 8px;opacity:1;pointer-events:auto;border:1px solid rgba(235,232,225,.34);background:rgba(235,232,225,.03)}
#idxin #minimap::before{content:"NAV";position:absolute;left:5px;top:3px;font:400 8px var(--sans);letter-spacing:.2em;color:var(--dim)}
@media (min-width:821px){#idxbtn{display:none}}
@media (max-width:820px){
  #idxframe{left:16px;top:auto;bottom:48px;width:min(250px,86vw);height:min(60vh,430px);animation:none}
  #minimap{width:112px;height:76px;top:auto;bottom:10px;right:10px;opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){#idxframe,#idxin .scan,#idxin .ttl i,#idxframe .ir{animation:none}}
#idxin #minimap{position:relative;right:auto;top:auto;bottom:auto;height:76px;flex:0 0 76px;margin:0 8px 8px;width:auto;align-self:stretch}
@media (min-width:821px){#idxframe{top:112px;bottom:46px;width:196px}}
#idxin .ttl{padding:9px 14px 6px}
#idxframe .ig{padding:5px 8px 1px}
#idxframe .ir a{padding:2px 8px 2px 16px;font-size:11.5px}
#idxframe .ir .loc{height:20px;font-size:12px}
@media (max-width:820px){#idxin #minimap{display:none}#minimap{position:absolute}}
@media (max-width:820px){#idxbtn{position:absolute;left:122px;bottom:10px;z-index:6}#idxframe{top:auto;bottom:48px}}