Authentication user pricing comparison

<div class="compare" data-motif="auth"><div class="head"><b>AUTH · USER VOLUME</b><strong id="amount">0</strong></div><div class="bars"><div class="row"><span>Clerk MRU</span><div class="track"><i id="bar-0"></i></div><b id="value-0">$0</b></div><div class="row"><span>Auth0 MAU</span><div class="track"><i id="bar-1"></i></div><b id="value-1">$0</b></div></div><input id="compare-slider" type="range" min="0" max="60000" step="5000" value="0" aria-label="Monthly usage"><div class="caveat">MRU ≠ MAU · Auth0 >25k price unpublished</div><small>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</small></div>

.compare{width:min(94vw,780px);height:min(88vh,325px);padding:clamp(8px,2.2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(4px,1.4vmin,10px);font:600 clamp(12px,2.5vmin,17px)/1.2 var(--font-sans,system-ui);overflow:hidden}.head,.row{display:flex;align-items:center;justify-content:space-between;gap:7px}.head b{font-size:1.1em;color:var(--accent)}.head strong{font:800 clamp(14px,3.8vmin,23px)/1 ui-monospace,monospace;color:var(--accent-2)}.bars{flex:1;min-height:40px;display:flex;flex-direction:column;justify-content:space-around;gap:5px}.row>span{width:25%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row>b{width:27%;text-align:right;white-space:nowrap;font:800 clamp(12px,3vmin,19px)/1 ui-monospace,monospace}.track{flex:1;height:clamp(19px,5vmin,34px);background:var(--bg);border:1px solid var(--line);border-radius:5px;overflow:hidden}.track i{display:block;width:0;height:100%;background:var(--accent);transition:width .3s}.row:nth-child(2) .track i{background:var(--accent-2)}.compare input{width:100%;height:18px;accent-color:var(--accent)}.caveat,.compare small{color:var(--muted);font-size:clamp(10px,2.1vmin,13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-motif=auth] .track{border-radius:30px}[data-motif=auth] .track i{border-radius:30px}[data-motif=email] .track{background:repeating-linear-gradient(90deg,var(--bg) 0 9%,var(--line) 9% 10%)}[data-motif=email] .track i{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

const slider=document.getElementById('compare-slider'),calc=[(n)=>(n<=50000?0:25+(n-50000)*0.02),(n)=>(n<=25000?0:null)],unit="users/mo",max=60000;let timer,index=0;const samples=[0,5000,15000,30000,60000];function draw(n){slider.value=String(n);document.getElementById('amount').textContent=n.toLocaleString()+' '+unit;const values=calc.map(fn=>fn(n)),largest=Math.max(1,...values.filter(v=>v!==null));values.forEach((value,i)=>{const label=document.getElementById('value-'+i),bar=document.getElementById('bar-'+i);label.textContent=value===null?'unpublished':'$'+value.toLocaleString('en-US',{maximumFractionDigits:2});bar.style.width=value===null?'100%':Math.max(2,value/largest*100)+'%';bar.style.opacity=value===null?'.25':'1'})}draw(0);timer=setInterval(()=>{index=(index+1)%samples.length;draw(samples[index])},1100);slider.addEventListener('input',()=>{clearInterval(timer);draw(Number(slider.value))})