광고 경매

<div class="auction"><div class="title">LIVE AUCTION <b>RANK</b></div><div id="list"></div><div class="note">ILLUSTRATIVE: BID + RELEVANCE</div></div>

.auction{width:min(86%,450px);font:800 clamp(10px,max(2vmin,1vw),16px)/1.2 sans-serif}.title{display:flex;justify-content:space-between;border-bottom:2px solid var(--fg);padding-bottom:8px;letter-spacing:.08em}.title b{color:var(--accent)}#list{padding-top:clamp(7px,2vmin,15px)}.row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:clamp(6px,2vmin,14px);margin:5px 0;padding:clamp(6px,1.5vmin,12px);background:var(--surface);border:1px solid var(--line);transition:.5s}.row:first-child{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent-3)}.row b{color:var(--accent)}.row span{color:var(--muted)}.note{margin-top:clamp(8px,2vmin,15px);color:var(--muted);font-size:max(10px,1vw,.7em);letter-spacing:.08em}

const list=document.querySelector('#list');let step=0;const ads=[{name:'NORTH',bid:4,quality:4},{name:'MOSS',bid:5,quality:2},{name:'KITE',bid:3,quality:5}];function draw(){const boost=[0,3,0,-2][step++%4];const ranked=ads.map((a,i)=>({...a,score:a.bid+a.quality+(i===1?boost:0)})).sort((a,b)=>b.score-a.score);list.innerHTML=ranked.map((a,i)=>'<div class="row"><b>'+String(i+1).padStart(2,'0')+'</b><div>'+a.name+'<br><span>BID '+a.bid+' · FIT '+a.quality+'</span></div><strong>'+a.score+'</strong></div>').join('')}draw();setInterval(draw,1450);