성능 예산

<div class="atlas"><div class="head"><b>PERFORMANCE BUDGET · page weight</b><span class="pulse"></span></div><div class="stage"><div class="pb-top"><b id="pb-total">410 KB</b><span>budget 500 KB</span></div><div class="pb-track"><i class="pb-base"></i><i id="pb-image"></i><strong class="pb-limit"></strong></div><div class="pb-key"><span>base 250 KB</span><span id="pb-img-label">images 160 KB</span></div><button class="pb-state box" id="pb-state">within budget</button></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)}.pb-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}.pb-top b{color:var(--accent);font-size:18px}.pb-track{height:21%;display:flex;position:relative;margin-top:6px;background:var(--line);border-radius:6px;overflow:hidden}.pb-track i{height:100%;display:block}.pb-base{width:36%;background:var(--accent)}#pb-image{background:var(--accent-2);transition:width .5s}.pb-limit{position:absolute;left:72%;top:0;bottom:0;border-left:3px dashed var(--fg)}.pb-key{display:flex;justify-content:space-between;margin-top:5px;font-size:12px;color:var(--muted)}.pb-state{display:block;width:100%;margin-top:4px;padding:3px;text-align:center;color:var(--accent);font:500 12px var(--font-sans);cursor:pointer}.pb-state.over{color:var(--accent-2);border-color:var(--accent-2)}

let phase=0;const images=[160,310,120];function show(n){phase=n;const size=images[n],over=250+size>500;document.getElementById('pb-image').style.width=Math.round(size/700*100)+'%';document.getElementById('pb-total').textContent=250+size+' KB';document.getElementById('pb-img-label').textContent='images '+size+' KB';document.getElementById('pb-state').textContent=over?'over budget — tap to optimize':'within budget — tap to add image';document.getElementById('pb-state').classList.toggle('over',over)}show(0);setInterval(()=>show((phase+1)%3),1500);document.getElementById('pb-state').onclick=()=>show((phase+1)%3)