SPA 소프트 내비게이션 바이탈

<div class="atlas"><div class="head"><b>SOFT NAVIGATION · SPA</b><span class="pulse"></span></div><div class="stage"><div class="sn-browser box"><div class="sn-url mono" id="sn-url">/home</div><div class="sn-view" id="sn-view">Home content</div></div><div class="sn-lanes"><div id="sn-home">/home <i></i></div><div id="sn-next">/detail <i></i></div></div></div></div>

.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.sn-browser{height:61%;display:flex;flex-direction:column;overflow:hidden}.sn-url{border-bottom:1px solid var(--line);padding:5px 8px;font-size:12px;color:var(--muted)}.sn-view{flex:1;display:grid;place-items:center;font-weight:700;transition:background .4s}.sn-view.next{background:color-mix(in srgb,var(--accent) 18%,var(--bg));color:var(--accent)}.sn-lanes{height:30%;display:flex;flex-direction:column;justify-content:center;gap:4px}.sn-lanes div{font:12px ui-monospace,monospace;color:var(--muted);display:flex;align-items:center;gap:6px}.sn-lanes i{display:block;height:8px;width:0;background:var(--accent);border-radius:5px;transition:width .5s}.sn-lanes .on{color:var(--accent)}.sn-lanes .on i{width:65%}

let next=false;function tick(){next=!next;document.getElementById('sn-url').textContent=next?'/detail':'/home';document.getElementById('sn-view').textContent=next?'Detail content':'Home content';document.getElementById('sn-view').classList.toggle('next',next);document.getElementById('sn-home').classList.toggle('on',!next);document.getElementById('sn-next').classList.toggle('on',next)}tick();setInterval(tick,2200)