사이드 시트

<div class="spw">
  <div class="splist">
    <div class="sprow" data-active>주문 #1042</div>
    <div class="sprow">주문 #1041</div>
    <div class="sprow">주문 #1040</div>
  </div>
  <aside class="sppanel" id="sppanel" role="dialog" aria-label="주문 상세" aria-modal="false">
    <h3>주문 #1042</h3>
    <p>정경훈 · 2026-09-26</p>
    <p class="spstatus">배송 중</p>
  </aside>
</div>

.spw{position:absolute;inset:0}
.splist{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;gap:6px}
.sprow{padding:8px 10px;border-radius:7px;background:var(--surface);border:1px solid var(--line);font-size:10px;color:var(--muted)}
.sprow[data-active]{border-color:var(--accent);color:var(--fg);font-weight:700}
.sppanel{position:absolute;top:0;right:0;bottom:0;width:min(150px,55%);background:var(--surface);border-left:1px solid var(--line);box-shadow:-10px 0 24px rgba(0,0,0,.14);padding:14px 12px;transform:translateX(100%);transition:transform .3s ease}
.sppanel[data-open]{transform:translateX(0)}
.sppanel h3{margin:0 0 4px;font-size:12px;color:var(--fg)}
.sppanel p{margin:0 0 4px;font-size:10px;color:var(--muted)}
.spstatus{color:var(--accent) !important;font-weight:700}

const rows = [...document.querySelectorAll('.sprow')];
const panel = document.getElementById('sppanel');
const DATA = [
  { id: '#1042', status: '배송 중' },
  { id: '#1041', status: '배송 완료' },
  { id: '#1040', status: '결제 확인' },
];
function paint(i) {
  rows.forEach((r, idx) => r.toggleAttribute('data-active', idx === i));
  panel.querySelector('h3').textContent = '주문 ' + DATA[i].id;
  panel.querySelector('.spstatus').textContent = DATA[i].status;
}
let auto = true, i = 0;
rows.forEach((r, idx) => r.addEventListener('click', () => { auto = false; paint(idx); }));
panel.setAttribute('data-open', '');
paint(0);
setInterval(() => { if (!auto) return; i = (i + 1) % rows.length; paint(i); }, 1300);