Lighthouse 인사이트 감사

<div class="atlas"><div class="head"><b>LIGHTHOUSE · insight to trace</b><span class="pulse"></span></div><div class="stage"><div class="lha-cards"><button id="lha-lcp">LCP discovery</button><button id="lha-render">Render blocking</button></div><div class="lha-track"><i></i><b id="lha-spot"></b><i></i></div><div class="lha-scale mono"><span>navigation</span><span>paint</span></div><div class="lha-note" id="lha-note">Finding points to trace interval</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)}.lha-cards{display:flex;gap:7px;height:36%}.lha-cards button{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);font:500 12px var(--font-sans);cursor:pointer}.lha-cards button.on{border-color:var(--accent);color:var(--accent)}.lha-track{position:relative;height:18%;display:flex;align-items:center;gap:2px;margin-top:12px}.lha-track i{height:14px;flex:1;background:var(--line);border-radius:4px}.lha-track b{position:absolute;top:0;width:23%;height:14px;left:16%;background:var(--accent);border-radius:4px;transition:left .5s}.lha-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.lha-note{text-align:center;margin-top:7px;color:var(--accent);font-size:12px}

let selected=0;function show(n){selected=n;document.getElementById('lha-lcp').classList.toggle('on',n===0);document.getElementById('lha-render').classList.toggle('on',n===1);document.getElementById('lha-spot').style.left=n===0?'58%':'16%';document.getElementById('lha-note').textContent=n===0?'LCP discovery → late request':'Render blocking → early CSS'}show(0);setInterval(()=>show(1-selected),1800);document.getElementById('lha-lcp').onclick=()=>show(0);document.getElementById('lha-render').onclick=()=>show(1)