마케팅 이벤트

<div class="ev"><div class="top"><b>EVENT STREAM</b><strong id="n">01</strong></div><div class="rail" id="rail"></div><div class="totals"><span>VISIT <b id="v">1</b></span><span>VIEW <b id="w">0</b></span><span>BUY <b id="b">0</b></span></div></div>

.ev{width:min(86%,580px);font:800 clamp(10px,max(2vmin,1vw),15px)/1.2 sans-serif}.top,.totals{display:flex;align-items:center;justify-content:space-between}.top{border-bottom:2px solid var(--fg);padding-bottom:8px;letter-spacing:.1em}.top strong{color:var(--accent);font-size:clamp(22px,6vmin,45px)}.rail{display:flex;gap:clamp(4px,1.3vmin,10px);height:clamp(66px,20vmin,145px);align-items:center;overflow:hidden}.node{flex:1;min-width:0;text-align:center;animation:pop .4s both}.node i{display:block;width:clamp(12px,3vmin,24px);height:clamp(12px,3vmin,24px);margin:auto auto 6px;background:var(--accent);border-radius:50%}.node:nth-child(2n) i{background:var(--accent-2)}.node small{font-size:clamp(10px,max(1.6vmin,1vw),12px)}.totals{border-top:1px solid var(--line);padding-top:10px;color:var(--muted);gap:8px}.totals b{color:var(--fg)}@keyframes pop{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

const seq=['VISIT','VIEW','VIEW','BUY'];let n=1;const rail=document.querySelector('#rail');function draw(){rail.innerHTML=seq.slice(0,n).map((x,i)=>'<div class="node"><i></i><small>0'+(i+1)+' '+x+'</small></div>').join('');document.querySelector('#n').textContent=String(n).padStart(2,'0');document.querySelector('#v').textContent=seq.slice(0,n).filter(x=>x==='VISIT').length;document.querySelector('#w').textContent=seq.slice(0,n).filter(x=>x==='VIEW').length;document.querySelector('#b').textContent=seq.slice(0,n).filter(x=>x==='BUY').length}draw();setInterval(()=>{n=n%4+1;draw()},850);