Cursor

<div class="plan-card"><header><b>CURSOR</b><span>individual · monthly</span></header><div class="tiers"><button data-price="0" class="chosen">Hobby<small>$0</small></button><button data-price="20">Pro<small>$20</small></button><button data-price="60">Pro+<small>$60</small></button><button data-price="200">Ultra<small>$200</small></button></div><div class="selection"><div class="plan-name" id="plan-name">Hobby</div><strong id="plan-price">$0/mo</strong></div><p class="fine">Paid tiers include separate model usage pools; exact pool amounts not confirmed.<br>Above pool: chosen model API rates · 2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</p></div>

.plan-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(6px,1.7vmin,13px);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,.fine{color:var(--muted)}.tiers{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;flex:1;min-height:0}.tiers button{width:24%;height:30%;border:1px solid var(--line);border-radius:8px 8px 0 0;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--fg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;cursor:pointer;font:inherit;transition:height .35s,background .35s}.tiers button:nth-child(2){height:48%}.tiers button:nth-child(3){height:68%}.tiers button:nth-child(4){height:95%}.tiers button.chosen{background:var(--accent);color:var(--bg)}.tiers small{font-size:clamp(10px,2vmin,14px)}.selection{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:5px}.selection strong{font-size:clamp(16px,4vmin,29px)}.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 buttons=[...document.querySelectorAll('.tiers button')];let index=0;let timer;function choose(i){index=i;buttons.forEach((b,k)=>b.classList.toggle('chosen',k===i));document.getElementById('plan-name').textContent=buttons[i].childNodes[0].textContent;document.getElementById('plan-price').textContent='$'+buttons[i].dataset.price+'/mo'}choose(0);timer=setInterval(()=>choose((index+1)%buttons.length),1050);buttons.forEach((button,i)=>button.addEventListener('click',()=>{clearInterval(timer);choose(i)}))