<div class="comparison"><header><b>MONTHLY TOKEN BILL</b><span>paid Standard · USD</span></header><div class="controls"><label>Input <output id="in-label">1.0M</output><input id="input" type="range" min="0" max="5000000" step="250000" value="1000000" aria-label="Monthly input tokens"></label><label>Output <output id="out-label">0.25M</output><input id="output" type="range" min="0" max="2000000" step="100000" value="250000" aria-label="Monthly output tokens"></label></div><div class="rows"><div class="row"><b>Sonnet 5.5</b><div class="track"><i id="bar-a"></i></div><output id="cost-a"></output></div><div class="row"><b>gpt-6.1-sol</b><div class="track"><i id="bar-b" class="alt"></i></div><output id="cost-b"></output></div><div class="row"><b>Gemini 3.8 Flash</b><div class="track"><i id="bar-c" class="warm"></i></div><output id="cost-c"></output></div></div><p class="fine">Monthly sum of short requests; selected models differ in capabilities.<br>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외) · Gemini rate through 2026-12-31.</p></div>
.comparison{width:min(96vw,850px);height:min(94vh,350px);padding:clamp(7px,1.8vmin,16px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(3px,1vmin,8px);font:600 clamp(9px,2vmin,13px)/1.1 system-ui,sans-serif}.comparison header{display:flex;justify-content:space-between;gap:5px}.comparison header b{color:var(--accent);font-size:clamp(11px,2.6vmin,17px)}.comparison header span,.comparison .fine{color:var(--muted)}.comparison .controls{display:flex;gap:8px}.comparison label{flex:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px}.comparison input{width:100%;margin:0;accent-color:var(--accent);height:13px}.comparison .rows{display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.2vmin,9px);flex:1;min-height:0}.comparison .row{display:grid;grid-template-columns:clamp(65px,21vw,155px) 1fr clamp(40px,12vw,75px);align-items:center;gap:5px}.comparison .row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comparison .track{height:clamp(12px,3.2vmin,23px);border:1px solid var(--line);border-radius:4px;background:var(--bg);overflow:hidden;position:relative}.comparison .track i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s}.comparison .track i.alt{background:var(--accent-2)}.comparison .track i.warm{background:var(--accent-3)}.comparison .row output{text-align:right;white-space:nowrap}.comparison .fine{font-size:clamp(8px,1.5vmin,11px);line-height:1.1;margin:0}@media (min-width:600px){.price-card,.price-scene,.limit-card,.compute-card,.credit-card,.plan-card,.credit-ledger,.claude-card,.comparison{width:min(96vw,1080px);font-size:15px}.fine,.note,.comparison .fine{font-size:11px}.comparison header b{font-size:18px}}
const a=document.getElementById('input'),b=document.getElementById('output');let timer;let n=0;function draw(){const input=Number(a.value),output=Number(b.value),rates=[[2,10],[2,10],[.75,3.75]];document.getElementById('in-label').textContent=(input/1000000).toFixed(2)+'M';document.getElementById('out-label').textContent=(output/1000000).toFixed(2)+'M';const costs=rates.map(r=>(input*r[0]+output*r[1])/1000000);['a','b','c'].forEach((id,i)=>{document.getElementById('cost-'+id).textContent='$'+costs[i].toFixed(2);document.getElementById('bar-'+id).style.width=(costs[i]/30*100)+'%'})}draw();timer=setInterval(()=>{n=(n+1)%4;a.value=String([1000000,2000000,3000000,4000000][n]);b.value=String([250000,500000,1000000,1500000][n]);draw()},1100);[a,b].forEach(el=>el.addEventListener('input',()=>{clearInterval(timer);draw()}))
