:root{
  font-family:system-ui,'Pretendard','Malgun Gothic',sans-serif;color:#e9ecff;
  --bg0:#04061a;--bg1:#080c24;--panel:rgba(20,26,66,.58);--panel2:rgba(34,42,94,.62);--line:rgba(150,165,255,.2);--line2:rgba(190,200,255,.35);
  --txt:#e9ecff;--mut:#9aa6d8;--acc:#7c8bff;--acc2:#c06bff;--acc3:#4fd8ff;--ok:#8ff0c0;--warn:#ffc78e;
  --grad:linear-gradient(135deg,#4a569e 0%,#6b5aa8 100%);
  --g-노말:#8a90a8;--g-매직:#2fb36f;--g-레어:#3d82ff;--g-유니크:#e3a817;--g-준전설:#9a63ff;--g-스페셜:#ff58a0;--g-전설:#ff7a35;--g-엘리트:#1fc3cc;--g-에픽:#e03a4a;--g-인피니티:#6a74c8;--g-정수:#8cbc3a}
*{box-sizing:border-box}
html{background:var(--bg0)}
body{margin:0;min-height:100vh;color:var(--txt);
  background:
    radial-gradient(1100px 650px at 10% -10%,rgba(80,70,170,.16),transparent 62%),
    radial-gradient(900px 600px at 96% 6%,rgba(40,110,170,.10),transparent 62%),
    radial-gradient(1000px 700px at 70% 108%,rgba(120,60,140,.10),transparent 64%),
    linear-gradient(180deg,var(--bg1),var(--bg0));
  background-attachment:fixed}
/* 은하수 띠: 대각선으로 흐르는 흐릿한 빛 */
body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 30%,rgba(140,150,230,.07) 42%,rgba(200,190,255,.13) 50%,rgba(140,170,230,.07) 58%,transparent 70%),
    radial-gradient(60% 14% at 50% 50%,rgba(210,200,255,.09),transparent 70%);
  filter:blur(14px)}
/* 별: 두 겹, 천천히 반짝임 */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 140px,#cfe0ff,transparent),
    radial-gradient(1.5px 1.5px at 160px 70px,#fff,transparent),radial-gradient(1px 1px at 230px 190px,#ffe6ff,transparent),
    radial-gradient(1.2px 1.2px at 300px 40px,#bfe9ff,transparent),radial-gradient(1px 1px at 350px 150px,#fff,transparent),
    radial-gradient(1.7px 1.7px at 60px 220px,#fff,transparent),radial-gradient(1px 1px at 280px 260px,#d9d2ff,transparent),
    radial-gradient(1px 1px at 50px 90px,#fff,transparent),radial-gradient(1.3px 1.3px at 190px 20px,#cfe0ff,transparent),
    radial-gradient(1px 1px at 120px 240px,#fff,transparent),radial-gradient(1.2px 1.2px at 330px 210px,#ffd9f6,transparent);
  background-size:380px 300px;animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid var(--line);background:rgba(70,80,140,.28);color:var(--txt);border-radius:10px;padding:9px 12px;transition:background .15s,border-color .15s,transform .05s}
button:hover{background:rgba(90,100,170,.38);border-color:var(--line2)}
button:active{transform:translateY(1px)}
button.active{border-color:transparent;background:var(--grad);color:#fff;box-shadow:none}
button:disabled{opacity:.35;cursor:default}
header{display:flex;align-items:center;justify-content:space-between;padding:20px 28px;gap:18px;
  background:linear-gradient(100deg,rgba(60,50,170,.55),rgba(150,70,220,.32) 55%,rgba(30,120,200,.3));
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
h1{font-size:25px;margin:0;letter-spacing:.5px;background:linear-gradient(90deg,#fff,#c9b8ff 55%,#8fe3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 small{font-size:13px;color:var(--mut);-webkit-text-fill-color:var(--mut)}
header p,.sub{color:var(--mut);margin:5px 0;font-size:13px}
nav{display:flex;gap:7px;flex-wrap:wrap}
.buildMark,.guideMark{padding:2px 10px;border-radius:12px;font-size:12px;margin-left:6px}
.buildMark{background:rgba(60,200,150,.18);border-color:rgba(100,240,190,.45);color:#b9ffe0}
.guideMark{background:rgba(110,120,255,.2);border-color:rgba(150,160,255,.45)}
.livebar{padding:8px 28px;font-size:13px;color:#cfd8ff;background:linear-gradient(90deg,rgba(60,80,200,.35),rgba(40,40,110,.2));border-bottom:1px solid var(--line)}
.layout{display:grid;grid-template-columns:290px minmax(0,1fr)}
aside{border-right:1px solid var(--line);padding:18px;height:calc(100vh - 118px);overflow:auto;position:sticky;top:0;background:rgba(10,14,44,.42);backdrop-filter:blur(6px)}
h2{font-size:17px;margin:0 0 12px}aside h2{margin-top:12px}
.row{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.ownedGroup{margin:18px 0}.ownedGroup h3{font-size:13px;color:#b9c4ff;border-bottom:1px solid var(--line);padding-bottom:6px;margin:0 0 4px}
.unitrow{display:flex;align-items:center;gap:7px;padding:5px 3px;cursor:pointer;border-radius:8px}
.unitrow:hover{background:rgba(120,130,255,.16)}
.unitrow span.n{flex:1;font-size:12px;line-height:1.2;min-width:0}
.unitrow button{padding:3px 8px;border-radius:8px}
.unitrow.has{background:linear-gradient(90deg,rgba(120,100,255,.2),transparent)}
.qtyIn{width:46px;text-align:center;padding:5px 2px;border-radius:8px;font-weight:700;-moz-appearance:textfield}
.qtyIn::-webkit-outer-spin-button,.qtyIn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.unitrow.has .qtyIn{color:var(--ok);border-color:rgba(143,240,192,.55)}
.tile{width:36px;height:36px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--gc,#556) 85%,#fff),var(--gc,#556) 60%,color-mix(in srgb,var(--gc,#556) 60%,#000));
  text-shadow:0 1px 2px #0008;border:1px solid rgba(255,255,255,.35);box-shadow:0 2px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.tile.big{width:64px;height:64px;font-size:26px;border-radius:14px}
.tile.img{padding:2px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--gc,#556) 55%,#2a3070),color-mix(in srgb,var(--gc,#556) 28%,#0a0e2e) 78%);border:1.5px solid color-mix(in srgb,var(--gc,#556) 80%,#fff);box-shadow:0 2px 10px rgba(0,0,0,.4),0 0 10px color-mix(in srgb,var(--gc,#556) 35%,transparent)}
.tile.img img{width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 1px 2px #0009);pointer-events:none}
main{padding:20px;min-width:0}
.sectionTitle{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.sectionTitle span{color:var(--mut);font-size:12px}
.sheetTabs{display:flex;gap:6px;flex-wrap:wrap}
.sheetTabs button{padding:10px 16px;border-radius:12px}
.split{display:grid;grid-template-columns:minmax(330px,1.15fr) minmax(350px,1fr);gap:16px;margin-top:14px}
.split>section{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:15px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(5,5,40,.45)}
.controls{display:flex;gap:7px;margin:8px 0 12px;align-items:center}.controls input{flex:1;min-width:90px}
input,select{border-radius:10px;border:1px solid var(--line);background:rgba(8,12,40,.65);color:var(--txt);padding:9px}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(124,139,255,.25)}
#catalog{max-height:calc(100vh - 340px);overflow:auto}
.gradeTitle{margin:14px 0 7px;color:#a9b8ff;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:3px}
.card{display:flex;align-items:center;gap:9px;padding:7px;border-radius:11px;cursor:pointer;position:relative;overflow:hidden;min-height:50px}
.card:hover,.card.selected{background:rgba(120,130,255,.2)}
.card.selected{box-shadow:inset 0 0 0 1px var(--line2)}
.cardProgress{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(90,110,255,.38),rgba(190,100,255,.2));pointer-events:none}
.card.complete .cardProgress{background:linear-gradient(90deg,rgba(40,200,140,.42),rgba(60,220,200,.18))}
.card>*:not(.cardProgress){position:relative;z-index:1}
.card .text{flex:1;min-width:0;font-size:13px;line-height:1.25}
.card .text small{display:block;overflow-wrap:anywhere;margin-top:3px;color:var(--mut)}
.card .qty{color:var(--ok);font-size:12px}
.card .progressPct{width:35px;flex-shrink:0;text-align:right;font-weight:700;font-size:12px;color:#c9d4ff}
.card.complete .progressPct{color:var(--ok)}
.detail{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;align-self:start}
.empty{color:var(--mut);padding:40px;text-align:center}
.detailTop{display:flex;align-items:center;gap:14px}
.detailTop h2{margin:0 0 5px;font-size:20px}
.badge{display:inline-block;font-size:12px;padding:3px 8px;background:rgba(100,115,230,.35);border-radius:8px;margin:2px}
.g{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:8px;color:#fff;background:linear-gradient(135deg,var(--gc,#556),color-mix(in srgb,var(--gc,#556) 55%,#000))}
.detail h3{font-size:14px;margin:18px 0 8px;color:#c4cdff}
.recipe,.step{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:rgba(30,38,92,.55);padding:9px 10px;border-radius:11px;margin:5px 0;font-size:13px;border:1px solid rgba(150,165,255,.12)}
.step{align-items:flex-start;flex-wrap:nowrap}.step .txt{flex:1}.step p{margin:4px 0;color:var(--mut);font-size:12px}
.ok{color:var(--ok)}.missing{color:var(--warn)}
.next{border-color:rgba(130,170,255,.7);background:linear-gradient(135deg,rgba(70,100,230,.4),rgba(160,90,240,.3))}
.ulink{background:none;border:0;color:#d6e2ff;padding:0;text-decoration:underline dotted;font-size:inherit}
.ulink:hover{background:none;color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:7px;margin-top:12px}
.stats div{background:rgba(30,38,92,.55);border:1px solid rgba(150,165,255,.12);border-radius:10px;padding:7px 10px;font-size:12px;color:var(--mut)}
.stats b{display:block;color:#fff;font-size:15px}
.skill{background:rgba(30,38,92,.5);border-left:3px solid var(--acc2);border-radius:8px;padding:6px 10px;margin:5px 0}
.skill b{font-size:13px}.skill p{margin:3px 0 0;font-size:12px;color:#b3bde6;line-height:1.45}
.parents{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px}
.parents .parentCard{display:flex;align-items:center;text-align:left;gap:8px;padding:6px;min-width:0}
.parentCard .tile{width:32px;height:32px;font-size:13px}.parentCard span{min-width:0;overflow-wrap:anywhere}.parentCard small{display:block;color:var(--mut)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 10px;align-items:center}
.filter{font-size:12px;padding:5px 11px;border-radius:999px;background:rgba(40,50,120,.5)}
.filter.active{border-color:transparent}
.tagbar{margin-top:0}
.tagLabel{font-size:12px;color:var(--mut);margin-right:2px}
.tagBtn{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);background:color-mix(in srgb,var(--tc) 12%,transparent);color:color-mix(in srgb,var(--tc) 75%,#fff)}
.tagBtn:hover{background:color-mix(in srgb,var(--tc) 24%,transparent)}
.tagBtn.on{background:linear-gradient(135deg,color-mix(in srgb,var(--tc) 55%,#000),color-mix(in srgb,var(--tc) 35%,#000));color:#fff;border-color:var(--tc);box-shadow:none}
.tagClear{font-size:12px;padding:4px 10px;border-radius:999px;background:transparent}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tags.big{margin-top:12px}
.tag{font-size:11px;padding:1px 8px;border-radius:999px;color:color-mix(in srgb,var(--tc) 80%,#fff);background:color-mix(in srgb,var(--tc) 16%,transparent);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);white-space:nowrap}
.tagcell{text-align:left!important;min-width:180px}.tagcell .tags{margin:0}
.detailNav{display:flex;justify-content:flex-end;gap:6px;margin-bottom:10px}
.tableWrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);backdrop-filter:blur(8px)}
table{border-collapse:collapse;width:100%;min-width:760px}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid rgba(150,165,255,.12);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{cursor:pointer;position:sticky;top:0;background:rgba(18,24,62,.92);font-size:12px;color:#aebdff}
th.sort::after{content:" ▾";color:var(--acc3)}th.sort.asc::after{content:" ▴"}
tr:hover td{background:rgba(120,130,255,.15)}
.skillGrid{display:grid;gap:8px}
.node{background:rgba(30,38,92,.55);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.node.lv{border-color:rgba(150,170,255,.7);background:linear-gradient(135deg,rgba(70,100,230,.38),rgba(160,90,240,.28))}.node.lock{opacity:.5}
.node .t{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:14px}
.node .d{color:#b3bde6;font-size:12px;margin:3px 0 6px}
.node .c{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.node button{width:28px;height:28px;padding:0}
.sum{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid rgba(150,165,255,.15)}
.sum .cap{color:var(--warn)}
dialog{background:#10153a;color:var(--txt);border:1px solid var(--line2);border-radius:16px;width:min(880px,95vw);max-height:90vh;overflow:auto;box-shadow:0 20px 80px rgba(60,40,200,.4)}
dialog::backdrop{background:rgba(2,3,20,.75);backdrop-filter:blur(3px)}
.doc{white-space:pre-wrap;font:inherit;font-size:13px;line-height:1.55;margin:0}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(130,145,255,.35);border-radius:8px}::-webkit-scrollbar-track{background:transparent}
@media(max-width:1000px){.layout{grid-template-columns:1fr}aside{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);max-height:360px}.split{grid-template-columns:1fr}.detail{position:static;max-height:none}#catalog{max-height:440px}}