테스트 속도 보드

<div class="stage"><div class="title">TEST SPEEDBOARD</div><div class="canvas"><div class="board"><div class="row" id="speed0"><span>checkout</span><i></i><b>8.4s</b></div><div class="row" id="speed1"><span>search</span><i></i><b>5.2s</b></div><div class="row" id="speed2"><span>profile</span><i></i><b>2.1s</b></div></div><div class="callout" id="speedNote">inspect checkout wait</div></div></div>

.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(7px,2vmin,14px)}.board{width:min(94%,570px);display:flex;flex-direction:column;gap:5px}.row{display:flex;align-items:center;gap:6px;padding:clamp(4px,1.4vmin,8px);border:1px solid var(--line);border-radius:5px;transition:order .5s}.row span{width:clamp(64px,17vmin,100px)}.row i{height:clamp(9px,2.5vmin,15px);background:var(--accent);border-radius:3px;transition:width .5s}.row b{margin-left:auto;font-size:1em}.row:first-child{border-color:var(--accent-3)}.callout{color:var(--accent-3)}

let slow=false;function rank(){slow=!slow;const data=slow?[['checkout','8.4s',72],['search','5.2s',45],['profile','2.1s',19]]:[['search','5.2s',45],['checkout','3.0s',27],['profile','2.1s',19]];data.forEach(([name,time,width],i)=>{const row=document.getElementById('speed'+i);row.querySelector('span').textContent=name;row.querySelector('b').textContent=time;row.querySelector('i').style.width=width+'%'});document.getElementById('speedNote').textContent=slow?'inspect checkout wait':'checkout wait removed'}rank();setInterval(rank,1700)