Modal

<div class="credit-card"><header><b>MODAL STARTER</b><span>H100 SXM5 GPU only</span></header><div class="balance"><div class="credit-block"><small>monthly credits</small><strong>$30</strong></div><div class="minus">−</div><div class="credit-block"><small>GPU estimate</small><strong id="raw">$19.75</strong></div><div class="equals">=</div><div class="credit-block pay"><small>after credits</small><strong id="pay">$0.00</strong></div></div><div class="rail"><i id="credit-fill"></i></div><label>GPU hours <output id="hour-label">5h</output><input id="hours" type="range" min="0" max="20" step="1" value="5" aria-label="GPU hours"></label><p class="fine">GPU only; CPU, memory, storage and egress may add cost.<br>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</p></div>

.credit-card{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,.credit-block small,.fine{color:var(--muted)}.balance{display:flex;align-items:center;justify-content:space-between;gap:3px;flex:1;min-height:0}.credit-block{display:flex;flex-direction:column;gap:5px;min-width:25%;padding:clamp(4px,1.5vmin,12px);border:1px solid var(--line);border-radius:8px;background:var(--bg)}.credit-block strong{font-size:clamp(15px,4.2vmin,30px);white-space:nowrap}.pay{border-color:var(--accent)}.pay strong{color:var(--accent)}.minus,.equals{color:var(--accent-2);font-size:clamp(15px,4vmin,25px)}.rail{height:clamp(10px,3vmin,20px);border-radius:10px;background:var(--bg);border:1px solid var(--line);overflow:hidden}.rail i{display:block;width:0;height:100%;background:var(--accent);transition:width .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 hours=document.getElementById('hours');let timer;let n=0;function draw(){const h=Number(hours.value),raw=h*3600*.001097,pay=Math.max(0,raw-30);document.getElementById('hour-label').textContent=h+'h';document.getElementById('raw').textContent='$'+raw.toFixed(2);document.getElementById('pay').textContent='$'+pay.toFixed(2);document.getElementById('credit-fill').style.width=Math.min(100,raw/30*100)+'%'}draw();timer=setInterval(()=>{n=(n+1)%4;hours.value=String([2,5,10,18][n]);draw()},1100);hours.addEventListener('input',()=>{clearInterval(timer);draw()})