<div class="comparison caching"><header><b>REPEATED PREFIX · CACHE</b><span>200k tokens · one write</span></header><div class="controls"><label>Repeat reads <output id="repeat-label">4</output><input id="repeats" type="range" min="1" max="20" step="1" value="4" aria-label="Repeated cache reads"></label></div><div class="rows"><div class="row"><b>Claude Sonnet 5.5</b><div class="track"><i id="base-a"></i><i id="cache-a" class="overlay"></i></div><output id="saved-a"></output></div><div class="row"><b>gpt-6.1-sol</b><div class="track"><i id="base-b"></i><i id="cache-b" class="overlay"></i></div><output id="saved-b"></output></div><div class="row"><b>Groq gpt-oss-120b</b><div class="track"><i id="base-c"></i><i id="cache-c" class="overlay"></i></div><output id="saved-c"></output></div></div><p class="fine"><span class="key-base">■</span> no cache · <span class="key-cache">■</span> cached cost · labels show savings. Assumes every read hits in one cache window; output unchanged.<br>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</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}.caching .track i{position:absolute;left:0;top:0;background:color-mix(in srgb,var(--accent-3) 55%,var(--surface))}.caching .track i.overlay{background:var(--accent-2);height:58%;top:42%}.key-base{color:var(--accent-3)}.key-cache{color:var(--accent-2)}@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 slider=document.getElementById('repeats');let timer;let n=0;function draw(){const reads=Number(slider.value),prefix=.2;document.getElementById('repeat-label').textContent=String(reads);const rates=[[2,2.5,.2],[2,2.5,.1],[.15,.15,.075]];const base=rates.map(r=>(reads+1)*prefix*r[0]);const cached=rates.map(r=>prefix*r[1]+reads*prefix*r[2]);['a','b','c'].forEach((id,i)=>{document.getElementById('base-'+id).style.width=(base[i]/8.4*100)+'%';document.getElementById('cache-'+id).style.width=(cached[i]/8.4*100)+'%';document.getElementById('saved-'+id).textContent='−$'+(base[i]-cached[i]).toFixed(2)})}draw();timer=setInterval(()=>{n=(n+1)%4;slider.value=String([2,5,10,18][n]);draw()},1100);slider.addEventListener('input',()=>{clearInterval(timer);draw()})
