Bandwidth and egress cost

<div class="compare-demo"><div class="compare-title">TRANSFER ONLY · MONTHLY EGRESS</div><div class="compare-input"><label>Views <b id="first-value"></b><input id="first" type="range" min="0" max="1000000" step="100000" value="200000"></label><label>Response MiB <b id="second-value"></b><input id="second" type="range" min="0" max="2" step="0.25" value="0.5"></label></div><div class="cost-rows"><div class="cost-row"><span>Pages static</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>Amplify eligible</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 NA</span><div class="cost-track"><i id="cost-bar-2"></i></div><strong id="cost-value-2">$0</strong></div><div class="cost-row"><span>Deno Pro extra</span><div class="cost-track"><i id="cost-bar-3"></i></div><strong id="cost-value-3">$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/1000)+'K';document.getElementById('second-value').textContent=b+' MiB';const gib=a*b/1024;const decimalGb=gib*1.073741824;const amplify=Math.max(0,decimalGb-15)*.15;/* The 1,024 GiB boundary includes the first free GiB. */const runFirstPaidGiB=Math.min(Math.max(0,gib-1),1023);const run=runFirstPaidGiB*.12+Math.max(0,gib-1024)*.11;const deno=Math.max(0,gib-200)*.20;const scale=Math.max(1,amplify,run,deno);bar(0,0,scale);bar(1,amplify,scale);bar(2,run,scale);bar(3,deno,scale);}paint();let direction=1;setInterval(()=>{if(manual)return;const next=Number(first.value)+100000*direction;if(next>1000000||next<0){direction*=-1;return}first.value=String(next);paint()},800);for(const input of [first,second])input.addEventListener('input',()=>{manual=true;paint()});