사용량 지출 가드레일

<div class="guard"><div class="head">METERED BILL <b id="bill">$56</b></div><div class="gauge"><i class="warn"></i><i class="cap"></i><em id="fill"></em></div><div class="markers"><span>ALERT $60</span><span>CAP $80</span></div><label>RAW USAGE <b id="raw">$56</b><input id="amount" type="range" min="0" max="110" value="56"></label><button id="toggle">CAP ON</button><strong id="message">BELOW ALERT</strong></div>

.guard{width:min(91%,540px);font:800 clamp(10px,2.5vmin,14px)/1.2 sans-serif}.head{display:flex;align-items:end;justify-content:space-between;gap:6px}.head b{font-size:clamp(25px,7vmin,48px);color:var(--accent)}.gauge{position:relative;height:clamp(42px,12vmin,75px);background:var(--surface);border:2px solid var(--line);margin-top:13px}.gauge em{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width .3s}.gauge i{position:absolute;top:-5px;bottom:-5px;z-index:1;border-left:2px dashed var(--fg)}.gauge .warn{left:54.5%}.gauge .cap{left:72.7%}.markers{display:flex;justify-content:space-between;color:var(--muted);margin-top:5px}label{display:block;margin-top:11px}label b{float:right}input{display:block;width:100%;accent-color:var(--accent)}button{border:0;background:var(--fg);color:var(--bg);padding:7px 10px;font:inherit;cursor:pointer}.guard>strong{float:right;color:var(--accent);margin-top:7px}@media(min-width:700px){.guard{font-size:13px}}@media(min-width:700px){body>:first-child{transform:scale(1.25);transform-origin:center}}

const r=document.querySelector('#amount');let cap=true;function draw(){const raw=+r.value,bill=cap?Math.min(raw,80):raw;document.querySelector('#raw').textContent='$'+raw;document.querySelector('#bill').textContent='$'+bill;document.querySelector('#fill').style.width=(bill/110*100)+'%';document.querySelector('#toggle').textContent=cap?'CAP ON':'CAP OFF';document.querySelector('#message').textContent=cap&&raw>80?'CAP REACHED · WORK PAUSED':raw>=60?'SPEND ALERT':'BELOW ALERT'}r.oninput=draw;document.querySelector('#toggle').onclick=()=>{cap=!cap;draw()};draw();setTimeout(()=>{r.value=98;draw()},650);setTimeout(()=>{r.value=56;draw()},2600);