리버스 트라이얼

<div class="stage"><div class="label">FULL ACCESS → FREE CORE</div><div class="trial-day">DAY <b id="trial-day">6</b> / 7</div><input id="trial-range" type="range" min="1" max="9" value="6" aria-label="Trial day"><div class="trial-cards"><div class="trial-core">CORE FEATURE<small>STAYS OPEN</small></div><div class="trial-premium" id="trial-premium">PREMIUM FEATURE<small id="trial-status">TRIAL ACCESS</small></div></div><div class="hint">SCRUB THE TIMELINE</div></div>

.stage{position:relative;width:min(94vw,760px);height:min(88vh,310px);font:800 clamp(10px,max(3.4vmin,1vw),15px)/1.25 sans-serif}.stage *{box-sizing:border-box}.label{font-size:clamp(10px,max(3.4vmin,1vw),12px);letter-spacing:.1em;color:var(--muted)}.accent{color:var(--accent)}.pill{border:1.5px solid var(--fg);border-radius:999px;background:var(--surface);padding:.5em .8em}.hint{position:absolute;right:2%;bottom:0;font-size:clamp(10px,max(3.4vmin,1vw),12px);color:var(--muted)}.trial-day{position:absolute;top:17%;left:4%;font-size:clamp(15px,5vmin,27px);color:var(--accent)}.stage input{position:absolute;top:30%;left:4%;width:92%;accent-color:var(--accent)}.trial-cards{position:absolute;left:4%;right:4%;top:50%;height:36%;display:flex;gap:3%}.trial-cards>div{flex:1;min-width:0;border:2px solid var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--accent-2);color:#211b19;font-size:clamp(10px,3.4vmin,15px)}.trial-cards small{display:block;margin-top:.4em;font-size:clamp(10px,3.4vmin,12px)}.trial-premium.closed{background:var(--line);color:var(--fg);border-style:dashed}

const slider=document.querySelector('#trial-range'),day=document.querySelector('#trial-day'),premium=document.querySelector('#trial-premium'),status=document.querySelector('#trial-status');let touched=0;function render(){const n=Number(slider.value),closed=n>7;day.textContent=String(n);premium.classList.toggle('closed',closed);status.textContent=closed?'TRIAL ENDED':'TRIAL ACCESS'}slider.addEventListener('input',()=>{touched=Date.now();render()});render();setInterval(()=>{if(Date.now()-touched<6500)return;slider.value=String(Number(slider.value)%9+1);render()},900);