Hosting cost calculator

<div class="compare-demo"><div class="compare-title">DYNAMIC API · RUNTIME SUBTOTAL</div><div class="compare-input"><label>Requests <b id="first-value"></b><input id="first" type="range" min="0" max="20000000" step="1000000" value="5000000"></label><label>CPU ms / req <b id="second-value"></b><input id="second" type="range" min="0" max="200" step="10" value="50"></label></div><div class="cost-rows"><div class="cost-row"><span>Workers Paid</span><div class="cost-track"><i id="cost-bar-0"></i></div><strong id="cost-value-0">$0</strong></div><div class="cost-row"><span>Deno Pro</span><div class="cost-track"><i id="cost-bar-1"></i></div><strong id="cost-value-1">$0</strong></div><div class="cost-row"><span>Cloud Run*</span><div class="cost-track"><i id="cost-bar-2"></i></div><strong id="cost-value-2">$0</strong></div></div><div class="compare-foot" id="compare-foot">2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</div></div>

.compare-demo{width:min(95vw,900px);height:min(92vh,350px);padding:clamp(8px,2.2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(5px,1.4vmin,10px);overflow:hidden;font:600 clamp(11px,2.4vmin,16px)/1.2 ui-sans-serif,-apple-system,sans-serif}.compare-title{color:var(--accent);font-weight:800}.compare-input{display:flex;gap:clamp(5px,2vmin,14px)}.compare-input label{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;font-size:.72em;gap:2px}.compare-input b{color:var(--accent);font-variant-numeric:tabular-nums}.compare-input input{grid-column:1/3;width:100%;accent-color:var(--accent)}.cost-rows{flex:1;min-height:0;display:grid;align-content:center;gap:clamp(5px,1.6vmin,11px)}.cost-row{display:grid;grid-template-columns:minmax(80px,27%) 1fr minmax(45px,14%);align-items:center;gap:clamp(4px,1.4vmin,9px);font-size:.75em}.cost-track{height:clamp(13px,4vmin,26px);background:var(--line);border-radius:5px;overflow:hidden}.cost-track i{display:block;height:100%;background:var(--accent);width:0;transition:width .35s}.cost-row:nth-child(2) i{background:var(--accent-2)}.cost-row:nth-child(3) i{background:var(--accent-3)}.cost-row:nth-child(4) i{background:var(--muted)}.cost-row strong{text-align:right;font-variant-numeric:tabular-nums}.compare-foot{font-size:.66em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

const first=document.getElementById('first');const second=document.getElementById('second');let manual=false;function bar(index,cost,max){document.getElementById('cost-value-'+index).textContent='$'+cost.toFixed(2);document.getElementById('cost-bar-'+index).style.width=(cost===0?0:Math.max(5,cost/max*100))+'%'}function paint(){const a=Number(first.value),b=Number(second.value);document.getElementById('first-value').textContent=(a/1000000)+'M';document.getElementById('second-value').textContent=b+' ms';const cpuMs=a*b;const workers=5+Math.max(0,a-10000000)/1000000*.3+Math.max(0,cpuMs-30000000)/1000000*.02;const denoHours=cpuMs/3600000;/* Deno memory GiB-hours approximate CPU time times 0.25 GiB, not billable wall time. */const denoMemoryHours=denoHours*.25;const deno=20+Math.max(0,a-5000000)/1000000*2+Math.max(0,denoHours-50)*.1+Math.max(0,denoMemoryHours-750)*.025;const runSeconds=a*Math.max(1,Math.ceil(b/100))*.1;const runMemory=runSeconds*.25;const run=Math.max(0,a-2000000)/1000000*.4+Math.max(0,runSeconds-180000)*.000024+Math.max(0,runMemory-360000)*.0000025;const scale=Math.max(1,workers,deno,run);bar(0,workers,scale);bar(1,deno,scale);bar(2,run,scale);}paint();let direction=1;setInterval(()=>{if(manual)return;const next=Number(first.value)+1000000*direction;if(next>20000000||next<0){direction*=-1;return}first.value=String(next);paint()},800);for(const input of [first,second])input.addEventListener('input',()=>{manual=true;paint()});