:root{color-scheme:dark;--gold:#d8b35d;--panel:#171a20;--line:#343944;--muted:#9ba3b2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#313846 0,#111319 45%,#090a0d 100%) fixed;color:#eee;font:15px/1.45 system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:18px 28px;background:#0c0e12eF;border-bottom:1px solid #3d3423;backdrop-filter:blur(12px)}h1{margin:0;font-family:Georgia,serif;color:#f1d78f}.eyebrow{margin:0;color:var(--gold);font-size:11px;letter-spacing:.2em}.controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.controls label{display:grid;gap:3px;color:var(--muted);font-size:12px}select,input,button{height:38px;border:1px solid #4a4f59;border-radius:6px;background:#20242c;color:#fff;padding:0 12px}button{cursor:pointer}button:hover{border-color:var(--gold)}.summary{display:flex;align-items:center;gap:28px;padding:14px 28px;border-bottom:1px solid #292d35;background:#12151a}.summary div{display:grid;text-align:center}.summary span,.summary p{color:var(--muted);font-size:12px}.summary strong{font-size:22px;color:var(--gold)}.summary p{margin-left:auto}main{display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));gap:16px;padding:20px;max-width:1500px;margin:auto}.tree{position:relative;overflow:hidden;min-height:760px;padding:16px;border:1px solid #393d45;border-radius:10px;background:linear-gradient(#191d24ec,#101217f5);box-shadow:0 15px 40px #0008}.tree h2{margin:0;color:#f2dca3}.tree-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3a3d43;padding-bottom:12px}.tree-points{color:var(--gold);font-weight:700}.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,88px);gap:13px 8px;margin-top:18px}.talent{position:relative;justify-self:center;width:58px;height:58px;border:3px solid #545963;border-radius:8px;background:#08090b;box-shadow:0 3px 10px #000;cursor:pointer;padding:0}.talent img{width:52px;height:52px;border-radius:4px;display:block}.talent.locked{filter:grayscale(1);opacity:.42}.talent.available{border-color:#8f8f8f}.talent.active{border-color:#49b554;box-shadow:0 0 13px #3ccb55aa}.talent.maxed{border-color:#e2bd50;box-shadow:0 0 13px #d9aa2d99}.rank{position:absolute;right:-7px;bottom:-8px;min-width:25px;padding:1px 4px;border:1px solid #777;border-radius:4px;background:#08090b;color:#fff;font:bold 13px monospace}.active .rank{color:#63dc71}.maxed .rank{color:#ffd75e}.req-line{position:absolute;z-index:-1;background:#585d66;transform-origin:0 50%;height:3px}.tree-note{color:#7f8794;font-size:11px;margin-top:15px}#tooltip{display:none;position:fixed;z-index:1000;max-width:360px;padding:12px 14px;border:1px solid #8d7541;border-radius:5px;background:#080a0df5;box-shadow:0 8px 30px #000;color:#eee;pointer-events:none}#tooltip h3{margin:0 0 4px;color:#fff;font-size:15px}#tooltip .yellow{color:#ffd45c}#tooltip .green{color:#54d86b}#tooltip .red{color:#ff6666}#tooltip p{margin:7px 0 0}footer{text-align:center;color:#727986;padding:15px}@media(max-width:1050px){main{grid-template-columns:1fr}.tree{min-height:720px}.summary p{display:none}}@media(max-width:600px){header{position:static;padding:16px;display:block}.controls{margin-top:12px}.summary{padding:10px 16px}main{padding:10px}.tree{padding:12px}}
.grid{position:relative;isolation:isolate}.talent{z-index:1}.prerequisite-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}.connection-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.connection-shadow{fill:none;stroke:#080a0d;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}#tooltip p{white-space:pre-line}#tooltip{max-width:min(360px,calc(100vw - 20px))}