Anthropic API

<div class="price-card columns"><div class="title"><b>Sonnet 5.5</b><span>USD / 1M tokens</span></div><div class="visual"><div id="graphic" class="graphic"><i id="input-fill"></i><i id="output-fill"></i></div><div class="amount"><strong id="total">$0.00</strong><small>monthly total · short requests</small></div></div><div class="sliders"><label>INPUT <output id="input-label"></output><input id="input" type="range" min="0" max="1000000" step="50000" value="500000" aria-label="Monthly input tokens"></label><label>OUTPUT <output id="output-label"></output><input id="output" type="range" min="0" max="500000" step="25000" value="100000" aria-label="Monthly output tokens"></label></div><p class="note">2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</p></div>

.price-card{width:min(96vw,760px);height:min(94vh,350px);padding:clamp(7px,1.8vmin,17px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(3px,1vmin,9px);font:600 clamp(10px,2.2vmin,14px)/1.15 system-ui,sans-serif}.title{display:flex;justify-content:space-between;gap:6px;align-items:center}.title b{color:var(--accent);font-size:clamp(12px,2.6vmin,18px)}.title span,.amount small,.note{color:var(--muted)}.visual{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-around;gap:8px}.graphic{position:relative;width:42%;height:76%;min-height:32px}.columns .graphic{display:flex;align-items:flex-end;gap:12%;padding:4px 8%}.columns .graphic i{width:42%;height:20%;background:var(--accent);border-radius:5px 5px 0 0;transition:height .4s}.columns .graphic i+ i{background:var(--accent-2)}.ring .graphic{width:clamp(42px,14vmin,90px);height:clamp(42px,14vmin,90px);border-radius:50%;background:conic-gradient(var(--accent) 0 60%,var(--accent-2) 60% 80%,var(--line) 80%);transition:background .4s}.ring .graphic:after{content:'';position:absolute;inset:24%;border-radius:50%;background:var(--surface)}.ring .graphic i{display:none}.steps .graphic{display:flex;flex-direction:column;justify-content:flex-end;gap:5px}.steps .graphic i{display:block;height:38%;width:30%;background:var(--accent);clip-path:polygon(0 100%,0 45%,35% 45%,35% 20%,70% 20%,70% 0,100% 0,100% 100%);transition:width .4s}.steps .graphic i+ i{height:30%;background:var(--accent-2);transform:scaleX(-1)}.amount{min-width:42%;display:flex;flex-direction:column;gap:2px}.amount strong{font:800 clamp(19px,6vmin,38px)/1 system-ui,sans-serif;color:var(--fg);white-space:nowrap}.amount small{font-size:clamp(9px,1.9vmin,12px)}.sliders{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sliders label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px}.sliders output{color:var(--accent)}.sliders input{width:100%;margin:0;accent-color:var(--accent);height:14px}.note{font-size:clamp(8px,1.5vmin,11px);margin:0;line-height:1.15}@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 input=document.getElementById('input');const output=document.getElementById('output');const graphic=document.getElementById('graphic');const fills=[document.getElementById('input-fill'),document.getElementById('output-fill')];let tick=0;let timer;function draw(){const a=Number(input.value),b=Number(output.value);document.getElementById('input-label').textContent=(a/1000).toFixed(0)+'k';document.getElementById('output-label').textContent=(b/1000).toFixed(0)+'k';document.getElementById('total').textContent='$'+((a*2+b*10)/1000000).toFixed(2);fills[0].style.height=Math.max(8,a/1000000*100)+'%';fills[1].style.height=Math.max(8,b/500000*100)+'%';fills[0].style.width=Math.max(14,a/1000000*100)+'%';fills[1].style.width=Math.max(14,b/500000*100)+'%';graphic.style.background=graphic.classList.contains('graphic')&&graphic.parentElement.parentElement.classList.contains('ring')?'conic-gradient(var(--accent) 0 '+(a/1000000*65)+'%,var(--accent-2) '+(a/1000000*65)+'% '+(a/1000000*65+b/500000*30)+'%,var(--line) 0)':''}draw();timer=setInterval(()=>{tick=(tick+1)%4;input.value=String([250000,500000,750000,1000000][tick]);output.value=String([50000,100000,150000,250000][tick]);draw()},1100);[input,output].forEach(el=>el.addEventListener('input',()=>{clearInterval(timer);draw()}))