Timeline

<ol class="tl" id="tl">
  <li data-lit><time datetime="2026-09-20">9월 20일</time><b>주문 접수</b></li>
  <li><time datetime="2026-09-22">9월 22일</time><b>결제 완료</b></li>
  <li><time datetime="2026-09-24">9월 24일</time><b>배송 시작</b></li>
  <li><time datetime="2026-09-26">9월 26일</time><b>배송 완료</b></li>
</ol>

.tl{list-style:none;margin:0;padding:0 0 0 18px;width:min(220px,90%);position:relative}
.tl::before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:2px;background:var(--line)}
.tl li{position:relative;padding-bottom:16px;font-size:11px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-18px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--line);border:2px solid var(--bg);transition:background .3s}
.tl li[data-lit]::before{background:var(--accent)}
.tl time{display:block;color:var(--muted);font-size:10px}
.tl b{color:var(--fg);opacity:.35;transition:opacity .3s}
.tl li[data-lit] b{opacity:1}

const items = [...document.querySelectorAll('#tl li')];
let n = 1;
function paint() { items.forEach((li, i) => li.toggleAttribute('data-lit', i < n)); }
paint();
setInterval(() => { n = n >= items.length ? 1 : n + 1; paint(); }, 1100);