잃어버린 미래에 대한 향수

<div class="lost"><div class="era"><span>PAST</span><span>TODAY</span><span>FUTURE</span></div><input id="time" aria-label="Message timeline" type="range" min="0" max="2" value="0"><div class="message" id="lostMessage">GO BACK TO THE OLD DAYS</div><div class="sub" id="lostSub">A MEMORY OF THE PAST</div></div>

@media(min-width:700px){body>div{transform:scale(1.45)}}.lost{width:min(86%,560px);font:800 clamp(10px,max(1.7vmin,1vw),14px)/1.2 sans-serif}.era{display:flex;justify-content:space-between;color:var(--muted);letter-spacing:.07em}.lost input{width:100%;accent-color:var(--accent);margin:clamp(10px,3vmin,22px) 0;cursor:pointer}.message{min-height:clamp(58px,16vmin,120px);display:grid;place-items:center;padding:clamp(8px,2vmin,18px);background:var(--surface);border:2px solid var(--fg);box-shadow:5px 5px 0 var(--accent);text-align:center;font-size:clamp(15px,4.8vmin,36px);letter-spacing:-.04em}.sub{margin-top:clamp(12px,3vmin,24px);color:var(--accent);letter-spacing:.08em;text-align:center}

const input=document.querySelector('#time');const message=document.querySelector('#lostMessage');const sub=document.querySelector('#lostSub');const messages=['GO BACK TO THE OLD DAYS','WHAT DID WE HOPE FOR?','BRING BACK A SENSE OF STABILITY'];const notes=['A MEMORY OF THE PAST','THE NEED BEHIND IT','A CREDIBLE PROMISE TODAY'];function show(){const n=Number(input.value);message.textContent=messages[n];sub.textContent=notes[n]}let manual=false;setTimeout(()=>{if(!manual){input.value='1';show()}},500);const timer=setInterval(()=>{input.value=String((Number(input.value)+1)%3);show()},1300);input.addEventListener('input',()=>{manual=true;clearInterval(timer);show()});