비교형 질문

<div class="d2 compare"><div class="eyebrow">COMPARE · COST ↔ BRIGHTNESS</div><div class="question">Which lamp fits a small desk?</div><div class="cards"><div class="box"><b>ARC</b><small>Low cost · softer beam</small><div class="bar"><i id="arcBar"></i></div><strong id="arcScore">68</strong></div><div class="box"><b>BEAM</b><small>Higher cost · brighter</small><div class="bar"><i id="beamBar"></i></div><strong id="beamScore">52</strong></div></div><label>PRIORITY <input id="priority" type="range" min="0" max="100" value="20"> <span id="priorityText">COST</span></label></div>

:root{--font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif}.d2{width:min(94%,760px);max-height:94%;font:700 10px/1.35 var(--font-sans);color:var(--fg)}.d2 small{font-size:10px}.d2 .eyebrow{color:var(--accent);font-weight:900;letter-spacing:.08em}.d2 .box{background:var(--surface);border:1px solid var(--line);padding:clamp(6px,1.5vmin,14px)}.d2 .soft{color:var(--muted)}.d2 button{font:inherit;cursor:pointer;border:1px solid var(--line);color:var(--fg);background:var(--surface)}@media(min-width:700px){.d2{font-size:14px}.d2 small{font-size:12px}}.compare .question{font-size:1.25em;font-weight:900;margin:clamp(6px,1.8vmin,16px) 0}.compare .cards{display:flex;gap:clamp(5px,1vmin,12px)}.compare .cards .box{position:relative;flex:1;min-width:0}.compare .cards b,.compare .cards small{display:block}.compare .cards small{color:var(--muted);margin:3px 0 8px}.compare .bar{height:clamp(8px,1.4vmin,13px);background:var(--line);margin-right:2.5em}.compare .bar i{display:block;height:100%;width:50%;background:var(--accent);transition:width .4s}.compare strong{position:absolute;right:8px;bottom:7px;color:var(--accent)}.compare label{display:flex;align-items:center;gap:7px;margin-top:clamp(8px,2vmin,18px)}.compare input{min-width:0;flex:1;accent-color:var(--accent)}.compare label span{min-width:7ch;text-align:right}

const slider=document.querySelector('#priority'),a=document.querySelector('#arcScore'),b=document.querySelector('#beamScore'),ab=document.querySelector('#arcBar'),bb=document.querySelector('#beamBar'),label=document.querySelector('#priorityText');let timer;function update(){const p=Number(slider.value),as=Math.round(74-p*.3),bs=Math.round(42+p*.46);a.textContent=as;b.textContent=bs;ab.style.width=as+'%';bb.style.width=bs+'%';label.textContent=p<50?'COST':'BRIGHTNESS'}slider.addEventListener('input',()=>{clearInterval(timer);update()});let step=0;timer=setInterval(()=>{slider.value=step++%2?20:80;update()},2500);update();