GitHub Copilot

<div class="credit-ledger"><header><b>GITHUB COPILOT PRO</b><span>$10/month</span></header><div class="ledger"><div class="included"><strong>1,500</strong><small>AI credits included</small></div><div class="usage"><strong id="used-credits">900</strong><small>credits used</small></div><div class="extra"><strong id="extra-cost">$0.00</strong><small>extra with budget</small></div></div><div class="rail"><i id="credits-fill"></i></div><label>Monthly AI credits <output id="credit-label">900</output><input id="credits" type="range" min="0" max="3500" step="100" value="900" aria-label="AI credits used"></label><p class="fine">Above 1,500: $0.01/credit only with an extra budget; otherwise usage stops.<br>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</p></div>

.credit-ledger{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.15 system-ui,sans-serif}header{display:flex;justify-content:space-between}header b{color:var(--accent)}header span,.ledger small,.fine{color:var(--muted)}.ledger{display:flex;align-items:stretch;gap:5px;flex:1;min-height:0}.ledger>div{flex:1;border:1px solid var(--line);background:var(--bg);border-radius:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px}.ledger strong{font-size:clamp(15px,5vmin,34px);white-space:nowrap}.included strong{color:var(--accent)}.extra strong{color:var(--accent-3)}.rail{height:clamp(12px,3vmin,22px);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg)}.rail i{display:block;height:100%;width:60%;background:var(--accent);transition:width .4s,background .4s}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('credits');let timer;let n=0;function draw(){const used=Number(slider.value),extra=Math.max(0,used-1500);document.getElementById('used-credits').textContent=used.toLocaleString();document.getElementById('credit-label').textContent=used.toLocaleString();document.getElementById('extra-cost').textContent='$'+(extra*.01).toFixed(2);const fill=document.getElementById('credits-fill');fill.style.width=Math.min(100,used/1500*100)+'%';fill.style.background=extra?'var(--accent-3)':'var(--accent)'}draw();timer=setInterval(()=>{n=(n+1)%4;slider.value=String([900,1500,2300,3300][n]);draw()},1050);slider.addEventListener('input',()=>{clearInterval(timer);draw()})