<div class="compute-card"><header><b>REPLICATE</b><span>active GPU seconds</span></header><div class="clock"><div class="clock-face"><div id="hand" class="hand"></div><span id="seconds-label">600s</span></div><div class="bill"><small>estimated GPU time</small><strong id="cost">$0.14</strong></div></div><div class="control"><label>GPU<select id="gpu" aria-label="GPU"><option value="0.000225">T4 · $0.000225/s</option><option value="0.000975">L40S · $0.000975/s</option><option value="0.001525">H100 · $0.001525/s</option></select></label><label>Seconds<input id="seconds" type="range" min="0" max="3600" step="60" value="600" aria-label="GPU seconds"></label></div><p class="fine">Public model GPU-time example; model-specific billing may differ.<br>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</p></div>
.compute-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(4px,1.2vmin,10px);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,.bill small,.fine{color:var(--muted)}.clock{display:flex;align-items:center;justify-content:center;gap:clamp(14px,5vmin,40px);flex:1;min-height:0}.clock-face{width:clamp(58px,16vmin,110px);height:clamp(58px,16vmin,110px);border:5px solid var(--accent-2);border-radius:50%;position:relative;display:grid;place-items:end center;padding-bottom:13%;color:var(--accent-2)}.hand{position:absolute;left:50%;top:12%;height:42%;border-left:3px solid var(--accent);transform-origin:bottom;transform:rotate(60deg);transition:transform .4s}.bill{display:flex;flex-direction:column}.bill strong{font-size:clamp(20px,6vmin,43px)}.control{display:grid;grid-template-columns:1fr 1fr;gap:8px}.control label{display:flex;flex-direction:column;gap:3px}.control select{max-width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:5px}.control 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 seconds=document.getElementById('seconds'),gpu=document.getElementById('gpu');let timer;let n=0;function draw(){const s=Number(seconds.value);document.getElementById('seconds-label').textContent=s+'s';document.getElementById('cost').textContent='$'+(s*Number(gpu.value)).toFixed(2);document.getElementById('hand').style.transform='rotate('+(s/3600*300)+'deg)'}draw();timer=setInterval(()=>{n=(n+1)%4;seconds.value=String([600,1200,2400,3600][n]);draw()},1100);[seconds,gpu].forEach(el=>el.addEventListener('input',()=>{clearInterval(timer);draw()}))
