맞춤 전환 기여 기간

<div class="look"><div class="head">CLICK <b id="label">7-DAY WINDOW</b> PURCHASE</div><div class="timeline"><i class="start"></i><i class="buy" id="buy"></i><div class="window" id="window"></div></div><div class="days"><span>DAY 0</span><span>DAY 18</span><span>DAY 30</span></div><div class="status" id="status">PURCHASE OUTSIDE WINDOW</div><div class="buttons"><button data-days="7" class="active">7 DAYS</button><button data-days="30">30 DAYS</button></div></div>

.look{width:min(86%,580px);font:850 clamp(10px,max(2vmin,1vw),14px)/1.2 sans-serif}.head,.days,.buttons{display:flex;justify-content:space-between;gap:8px}.head{border-bottom:2px solid var(--fg);padding-bottom:8px}.head b{color:var(--accent)}.timeline{position:relative;height:clamp(50px,13vmin,90px);border-bottom:2px solid var(--fg);margin-top:clamp(7px,2vmin,14px)}.timeline i{position:absolute;bottom:-6px;width:clamp(10px,3vmin,20px);height:clamp(10px,3vmin,20px);border-radius:50%;background:var(--fg);z-index:1}.timeline .start{left:0}.timeline .buy{left:60%;background:var(--accent)}.window{position:absolute;left:0;bottom:8px;width:23%;height:clamp(13px,4vmin,28px);background:color-mix(in srgb,var(--accent) 25%,transparent);border-right:3px solid var(--accent);transition:width .6s}.days{color:var(--muted);font-size:clamp(10px,max(1.5vmin,1vw),12px);padding-top:7px}.status{margin:clamp(9px,2vmin,17px) 0;color:var(--muted);text-align:center}.status.yes{color:var(--accent)}button{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:clamp(6px,1.5vmin,11px);font:inherit;cursor:pointer}.active{background:var(--fg);color:var(--bg)}

let days=7;const buttons=[...document.querySelectorAll('button')];function draw(){document.querySelector('#label').textContent=days+'-DAY WINDOW';document.querySelector('#window').style.width=days===7?'23%':'100%';document.querySelector('#status').textContent=days===7?'PURCHASE OUTSIDE WINDOW':'PURCHASE ATTRIBUTED';document.querySelector('#status').classList.toggle('yes',days===30);buttons.forEach(b=>b.classList.toggle('active',Number(b.dataset.days)===days))}buttons.forEach(b=>b.onclick=()=>{clearInterval(timer);days=Number(b.dataset.days);draw()});draw();const timer=setInterval(()=>{days=days===7?30:7;draw()},1650);