<div class="comparison seats"><header><b>TEAM SEAT SUBSCRIPTIONS</b><span>monthly billing · USD</span></header><div class="controls"><label>Team seats <output id="seat-label">5</output><input id="seats" type="range" min="2" max="20" step="1" value="5" aria-label="Team seats"></label></div><div class="rows"><div class="row"><b>Cursor Standard</b><div class="track"><i id="bar-a"></i></div><output id="cost-a"></output></div><div class="row"><b>Copilot Business</b><div class="track"><i id="bar-b" class="alt"></i></div><output id="cost-b"></output></div><div class="row"><b>Claude Team Std</b><div class="track"><i id="bar-c" class="warm"></i></div><output id="cost-c"></output></div></div><p class="fine">Seat fee only; included usage and overage units differ across products.<br>2026-10-06 공식 가격 기준 · 단순화(세금·지역 할증 제외)</p></div>
.comparison{width:min(96vw,850px);height:min(94vh,350px);padding:clamp(7px,1.8vmin,16px);border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(3px,1vmin,8px);font:600 clamp(9px,2vmin,13px)/1.1 system-ui,sans-serif}.comparison header{display:flex;justify-content:space-between;gap:5px}.comparison header b{color:var(--accent);font-size:clamp(11px,2.6vmin,17px)}.comparison header span,.comparison .fine{color:var(--muted)}.comparison .controls{display:flex;gap:8px}.comparison label{flex:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:2px}.comparison input{width:100%;margin:0;accent-color:var(--accent);height:13px}.comparison .rows{display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1.2vmin,9px);flex:1;min-height:0}.comparison .row{display:grid;grid-template-columns:clamp(65px,21vw,155px) 1fr clamp(40px,12vw,75px);align-items:center;gap:5px}.comparison .row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comparison .track{height:clamp(12px,3.2vmin,23px);border:1px solid var(--line);border-radius:4px;background:var(--bg);overflow:hidden;position:relative}.comparison .track i{display:block;height:100%;width:0;background:var(--accent);transition:width .35s}.comparison .track i.alt{background:var(--accent-2)}.comparison .track i.warm{background:var(--accent-3)}.comparison .row output{text-align:right;white-space:nowrap}.comparison .fine{font-size:clamp(8px,1.5vmin,11px);line-height:1.1;margin:0}.seats .track{height:clamp(17px,5vmin,34px)}@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('seats');let timer;let n=0;function draw(){const seats=Number(slider.value),rates=[40,19,25];document.getElementById('seat-label').textContent=String(seats);['a','b','c'].forEach((id,i)=>{document.getElementById('bar-'+id).style.width=(rates[i]*seats/800*100)+'%';document.getElementById('cost-'+id).textContent='$'+(rates[i]*seats)})}draw();timer=setInterval(()=>{n=(n+1)%4;slider.value=String([2,5,10,20][n]);draw()},1100);slider.addEventListener('input',()=>{clearInterval(timer);draw()})
