<div class="price-scene"><header><b>OPENROUTER</b><span>credits → model calls</span></header><div class="route"><div class="credit">CREDIT<br><strong id="credit">$10</strong></div><div class="arrow">→</div><div class="fee">PURCHASE FEE<br><strong id="fee">$0.80</strong></div><div class="arrow">→</div><div class="model">MODEL<br><strong>provider rate</strong></div></div><label>Credit purchase <output id="purchase-label">$10</output><input id="purchase" type="range" min="10" max="200" step="10" value="10" aria-label="Credit purchase in US dollars"></label><p class="fine">5.5% purchase fee, $0.80 minimum · free route: 50 requests/day<br>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</p></div>
.price-scene{width:min(96vw,760px);height:min(94vh,350px);padding:clamp(8px,2vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(5px,1.5vmin,12px);font:600 clamp(10px,2.2vmin,14px)/1.2 system-ui,sans-serif}header{display:flex;justify-content:space-between;gap:6px}header b{color:var(--accent)}header span,.fine{color:var(--muted)}.route{display:flex;align-items:center;justify-content:space-between;gap:3px;flex:1;min-height:0}.route>div:not(.arrow){width:29%;min-height:50%;padding:clamp(4px,1.5vmin,12px);border:1px solid var(--line);border-radius:9px;display:flex;flex-direction:column;justify-content:center;gap:4px}.route strong{font-size:clamp(13px,3.5vmin,25px);color:var(--fg)}.credit{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}.fee{background:color-mix(in srgb,var(--accent-3) 16%,var(--surface))}.model{background:color-mix(in srgb,var(--accent-2) 15%,var(--surface))}.model strong{font-size:clamp(10px,2vmin,14px)}.arrow{color:var(--accent);font-size:clamp(17px,4vmin,30px)}label{display:flex;flex-wrap:wrap;justify-content:space-between}input{width:100%;accent-color:var(--accent)}.fine{font-size:clamp(8px,1.6vmin,11px);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 slider=document.getElementById('purchase');let timer;let n=0;function draw(){const amount=Number(slider.value);const fee=Math.max(.8,amount*.055);document.getElementById('credit').textContent='$'+amount;document.getElementById('fee').textContent='$'+fee.toFixed(2);document.getElementById('purchase-label').textContent='$'+amount}draw();timer=setInterval(()=>{n=(n+1)%4;slider.value=String([10,30,80,160][n]);draw()},1100);slider.addEventListener('input',()=>{clearInterval(timer);draw()})
