사용량 제한 무료 플랜

<div class="stage"><div class="label">FREE ACTIONS · ILLUSTRATIVE</div><div class="cap-count"><b id="cap-used">9</b><span> / 10 USED</span></div><div class="cap-track"><i id="cap-fill"></i></div><input id="cap-range" type="range" min="0" max="10" value="9" aria-label="Free actions used"><div class="cap-choice" id="cap-choice">1 FREE ACTION LEFT</div><div class="hint">MOVE THE USAGE CONTROL</div></div>

.stage{position:relative;width:min(94vw,760px);height:min(88vh,310px);font:800 clamp(10px,max(3.4vmin,1vw),15px)/1.25 sans-serif}.stage *{box-sizing:border-box}.label{font-size:clamp(10px,max(3.4vmin,1vw),12px);letter-spacing:.1em;color:var(--muted)}.accent{color:var(--accent)}.pill{border:1.5px solid var(--fg);border-radius:999px;background:var(--surface);padding:.5em .8em}.hint{position:absolute;right:2%;bottom:0;font-size:clamp(10px,max(3.4vmin,1vw),12px);color:var(--muted)}.cap-count{position:absolute;left:3%;top:17%;font-size:clamp(20px,8vmin,48px);line-height:1}.cap-count b{color:var(--accent)}.cap-count span{font-size:clamp(10px,3.4vmin,15px)}.cap-track{position:absolute;left:3%;right:3%;top:44%;height:clamp(20px,6vmin,38px);border:2px solid var(--fg);background:var(--surface)}.cap-track i{display:block;height:100%;width:70%;background:var(--accent);transition:width .35s}.stage input{position:absolute;left:3%;top:62%;width:94%;accent-color:var(--accent)}.cap-choice{position:absolute;left:3%;right:3%;bottom:8%;padding:.45em;text-align:center;border:2px solid var(--fg);background:var(--accent-2);color:#211b19;font-size:clamp(10px,3.4vmin,14px)}

const range=document.querySelector('#cap-range'),used=document.querySelector('#cap-used'),fill=document.querySelector('#cap-fill'),choice=document.querySelector('#cap-choice');let touched=0;function render(){const n=Number(range.value);used.textContent=String(n);fill.style.width=n*10+'%';choice.textContent=n===10?'CAP REACHED · UPGRADE OR WAIT FOR RESET':String(10-n)+' FREE ACTIONS LEFT'}range.addEventListener('input',()=>{touched=Date.now();render()});render();setInterval(()=>{if(Date.now()-touched<6500)return;range.value=String(Number(range.value)>=10?4:Number(range.value)+1);render()},950);