Database billing units

<div class="compare"><header>BILLED ROWS · MONTH</header><div class="controls"><label><span>Read <b id="value-0"></b></span><input type="range" min="0" max="40" step="1" value="3" aria-label="Read"></label><label><span>Written <b id="value-1"></b></span><input type="range" min="0" max="100" step="5" value="10" aria-label="Written"></label><label><span>Stored <b id="value-2"></b></span><input type="range" min="0" max="20" step="1" value="4" aria-label="Stored"></label></div><div class="bills"><div class="bill-row"><span>D1 Paid</span><div class="rail"><i id="bar-0"></i></div><strong id="cost-0"></strong></div><div class="bill-row"><span>Turso Dev</span><div class="rail"><i id="bar-1"></i></div><strong id="cost-1"></strong></div></div><div class="caveat">Billed rows, not requests · Worker and sync costs excluded</div><footer>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</footer></div>

.compare{width:min(96vw,800px);height:min(92vh,340px);padding:clamp(7px,1.9vmin,15px);border:1px solid var(--line);border-radius:14px;background:var(--surface);font:600 clamp(10px,2.15vmin,14px)/1.18 system-ui,sans-serif;display:flex;flex-direction:column;gap:clamp(3px,.8vmin,7px);overflow:hidden}.compare header{font-size:clamp(12px,2.9vmin,19px);font-weight:800;color:var(--accent)}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,1.2vmin,12px)}.controls label{min-width:0;display:flex;flex-direction:column;gap:3px}.controls span{display:flex;justify-content:space-between;gap:3px;white-space:nowrap}.controls b{color:var(--accent)}.controls input{width:100%;margin:0;accent-color:var(--accent)}.bills{flex:1;min-height:43px;display:flex;flex-direction:column;justify-content:center;gap:clamp(5px,1.5vmin,12px)}.bill-row{display:grid;grid-template-columns:minmax(54px,24%) 1fr minmax(44px,14%);align-items:center;gap:clamp(4px,1vmin,10px)}.bill-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bill-row strong{text-align:right;white-space:nowrap}.rail{height:clamp(13px,3.8vmin,27px);background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden}.rail i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s}.bill-row:nth-child(2) .rail i{background:var(--accent-2)}.caveat,.compare footer{color:var(--muted);font-size:clamp(9px,1.9vmin,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare footer{border-top:1px solid var(--line);padding-top:clamp(2px,.8vmin,5px)}@media(max-width:500px){.controls{grid-template-columns:repeat(2,minmax(0,1fr))}}

const cfg={"title":"BILLED ROWS · MONTH","sliders":[{"label":"Read","unit":"B rows","min":0,"max":40,"step":1,"start":3},{"label":"Written","unit":"M rows","min":0,"max":100,"step":5,"start":10},{"label":"Stored","unit":"GB","min":0,"max":20,"step":1,"start":4}],"bars":[{"label":"D1 Paid","formula":"5+0.001*Math.max(0,v[0]-25)*1000+Math.max(0,v[1]-50)+0.75*Math.max(0,v[2]-5)"},{"label":"Turso Dev","formula":"5.99+Math.max(0,v[0]-2.5)+Math.max(0,v[1]-25)+0.75*Math.max(0,v[2]-9)"}],"caveat":"Billed rows, not requests · Worker and sync costs excluded"},inputs=[...document.querySelectorAll('.controls input')],formulas=[(v)=>5+0.001*Math.max(0,v[0]-25)*1000+Math.max(0,v[1]-50)+0.75*Math.max(0,v[2]-5),(v)=>5.99+Math.max(0,v[0]-2.5)+Math.max(0,v[1]-25)+0.75*Math.max(0,v[2]-9)];let timer;function format(n){return '$'+n.toFixed(2)}function draw(){const v=inputs.map(input=>Number(input.value));v.forEach((value,i)=>document.getElementById('value-'+i).textContent=value.toLocaleString()+' '+cfg.sliders[i].unit);const costs=formulas.map(fn=>fn(v)),scale=Math.max(1,...costs);costs.forEach((cost,i)=>{document.getElementById('cost-'+i).textContent=(cfg.bars[i].lowerBound?'≥':'')+format(cost);document.getElementById('bar-'+i).style.width=Math.max(3,cost/scale*100)+'%'})}draw();let phase=0;timer=setInterval(()=>{phase=(phase+1)%3;inputs.forEach((input,i)=>{const s=cfg.sliders[i];input.value=String(phase===0?s.start:phase===1?s.max:s.min)});draw()},1250);inputs.forEach(input=>input.addEventListener('input',()=>{clearInterval(timer);draw()}))