레거시 JavaScript 비용 진단

<div class="atlas"><div class="head"><b>LEGACY JS · transfer cost</b><span class="pulse"></span></div><div class="stage"><div class="lj-label">bundle sent to browser</div><div class="lj-bar"><i>app code</i><b id="lj-extra">polyfills</b></div><div class="lj-targets"><button id="lj-old">old targets</button><button id="lj-base">Baseline target</button></div><div class="lj-foot mono" id="lj-foot">+48 KB compatibility code</div></div></div>

.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.lj-label{font-size:12px;color:var(--muted);margin-bottom:8px}.lj-bar{height:31%;display:flex;border-radius:7px;overflow:hidden}.lj-bar i,.lj-bar b{display:grid;place-items:center;font:600 12px var(--font-sans);font-style:normal;white-space:nowrap}.lj-bar i{width:58%;background:var(--accent);color:white}.lj-bar b{width:42%;background:var(--accent-2);color:var(--bg);transition:width .5s,opacity .5s}.lj-bar b.off{width:0;opacity:0}.lj-targets{display:flex;gap:7px;margin-top:12px}.lj-targets button{flex:1;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--fg);font:500 12px var(--font-sans);padding:5px;cursor:pointer}.lj-targets button.on{border-color:var(--accent);color:var(--accent)}.lj-foot{text-align:right;color:var(--accent);font-size:12px;margin-top:9px}

let modern=false;function show(next){modern=next;document.getElementById('lj-extra').classList.toggle('off',modern);document.getElementById('lj-old').classList.toggle('on',!modern);document.getElementById('lj-base').classList.toggle('on',modern);document.getElementById('lj-foot').textContent=modern?'compatibility bytes removed':'+48 KB compatibility code'}show(false);setInterval(()=>show(!modern),2200);document.getElementById('lj-old').onclick=()=>show(false);document.getElementById('lj-base').onclick=()=>show(true)