고려 단계

<div class="consider"><div class="consider-head"><b>CHOOSE A PRIORITY</b><div><button id="consider-price" type="button">PRICE</button><button id="consider-fit" type="button">FIT</button></div></div><div class="consider-options"><div id="consider-a"><strong>OPTION A</strong><span>LOWER PRICE</span><b id="consider-a-score">1ST</b></div><div id="consider-b"><strong>OPTION B</strong><span>BETTER FIT</span><b id="consider-b-score">2ND</b></div></div><small>RANKING CHANGES WITH THE CUSTOMER'S CRITERION</small></div>

.consider{width:min(90%,700px);display:grid;gap:clamp(8px,2.3vmin,18px);font:800 clamp(10px,max(1.8vmin,1vw),16px)/1.2 sans-serif}.consider-head{display:flex;justify-content:space-between;align-items:center;gap:6px}.consider-head div{display:flex;gap:4px}.consider button{border:1px solid var(--fg);background:var(--surface);color:var(--fg);padding:clamp(4px,1.2vmin,9px);font:inherit;cursor:pointer}.consider button.on{background:var(--accent-2);color:#211b19}.consider-options{display:grid;gap:clamp(5px,1.3vmin,10px)}.consider-options div{display:grid;grid-template-columns:1fr 1fr auto;gap:5px;align-items:center;padding:clamp(8px,2vmin,17px);border:2px solid var(--line);background:var(--surface);transition:.4s}.consider-options div.first{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent-2)}.consider-options span{color:var(--muted)}.consider-options b{color:var(--accent)}.consider small{color:var(--muted);font-size:clamp(10px,max(1.5vmin,1vw),12px)}

let price=true;const a=document.getElementById('consider-a'),b=document.getElementById('consider-b');function show(){a.classList.toggle('first',price);b.classList.toggle('first',!price);a.style.order=price?0:1;b.style.order=price?1:0;document.getElementById('consider-a-score').textContent=price?'1ST':'2ND';document.getElementById('consider-b-score').textContent=price?'2ND':'1ST';document.getElementById('consider-price').classList.toggle('on',price);document.getElementById('consider-fit').classList.toggle('on',!price)}document.getElementById('consider-price').onclick=()=>{clearInterval(auto);price=true;show()};document.getElementById('consider-fit').onclick=()=>{clearInterval(auto);price=false;show()};show();const auto=setInterval(()=>{price=!price;show()},2600);