<ol class="dc-tl">
<li class="dc-tl__item is-done">
<span class="dc-tl__dot" aria-hidden="true"></span>
<div class="dc-tl__body">
<time class="dc-tl__time" datetime="2026-03-04T09:12">3월 4일 09:12</time>
<h3 class="dc-tl__title">주문 접수</h3>
<p class="dc-tl__text">결제가 확인되었습니다. <span class="dc-sr">완료된 단계</span></p>
</div>
</li>
<li class="dc-tl__item is-done">
<span class="dc-tl__dot" aria-hidden="true"></span>
<div class="dc-tl__body">
<time class="dc-tl__time" datetime="2026-03-04T16:40">3월 4일 16:40</time>
<h3 class="dc-tl__title">상품 준비</h3>
<p class="dc-tl__text">판매자가 상품을 포장했습니다. <span class="dc-sr">완료된 단계</span></p>
</div>
</li>
<li class="dc-tl__item is-now">
<span class="dc-tl__dot" aria-hidden="true"></span>
<div class="dc-tl__body">
<time class="dc-tl__time" datetime="2026-03-05T08:05">3월 5일 08:05</time>
<h3 class="dc-tl__title">배송 중</h3>
<p class="dc-tl__text">서울 강서 물류센터를 떠났습니다. <span class="dc-sr">지금 진행 중인 단계</span></p>
</div>
</li>
<li class="dc-tl__item">
<span class="dc-tl__dot" aria-hidden="true"></span>
<div class="dc-tl__body">
<time class="dc-tl__time" datetime="2026-03-06">3월 6일 예정</time>
<h3 class="dc-tl__title">배송 완료</h3>
<p class="dc-tl__text">받는 분 부재 시 경비실에 맡깁니다. <span class="dc-sr">아직 오지 않은 단계</span></p>
</div>
</li>
</ol>
.dc-tl { margin:0; padding:0; list-style:none; font-family:var(--dc-font); }
.dc-tl__item { position:relative; padding:0 0 var(--dc-5) var(--dc-6); }
.dc-tl__item::before { content:""; position:absolute; top:18px; bottom:0; left:5px; width:2px; background:var(--dc-line); }
.dc-tl__item:last-child::before { content:none; }
.dc-tl__dot { position:absolute; top:5px; left:0; width:12px; height:12px; border:2px solid var(--dc-line-bold); border-radius:var(--dc-r-full); background:var(--dc-surface); }
.dc-tl__item.is-done::before { background:var(--dc-brand); }
.dc-tl__item.is-done .dc-tl__dot { border-color:var(--dc-brand); background:var(--dc-brand); }
.dc-tl__item.is-now .dc-tl__dot { border-color:var(--dc-brand); background:var(--dc-surface); box-shadow:0 0 0 4px var(--dc-brand-soft); }
.dc-tl__item.is-fail .dc-tl__dot { border-color:var(--dc-danger); background:var(--dc-danger); }
.dc-tl__item.is-fail .dc-tl__title { color:var(--dc-danger); }
.dc-tl__body { display:flex; flex-direction:column; gap:var(--dc-1); }
.dc-tl__time { font-size:12px; color:var(--dc-text-mute); font-variant-numeric:tabular-nums; }
.dc-tl__title { margin:0; font-size:15px; font-weight:600; color:var(--dc-text); }
.dc-tl__item.is-now .dc-tl__title { color:var(--dc-brand-text); }
.dc-tl__text { margin:0; font-size:13px; line-height:1.6; color:var(--dc-text-sub); }
.dc-tl--compact .dc-tl__item { padding-bottom:var(--dc-3); }
.dc-tl--compact .dc-tl__body { flex-direction:row; align-items:baseline; gap:var(--dc-3); }
.dc-tl--compact .dc-tl__time { flex:0 0 104px; }
.dc-tl--compact .dc-tl__title { font-size:14px; font-weight:600; }