<nav class="dc-dots" aria-label="가입 단계">
<ol class="dc-dots__list">
<li class="dc-dots__item">
<span class="dc-dots__dot dc-dots__dot--done"></span>
<span class="dc-sr">1단계 본인 확인, 끝</span>
</li>
<li class="dc-dots__item" aria-current="step">
<span class="dc-dots__dot dc-dots__dot--now"></span>
<span class="dc-sr">2단계 연락처 입력, 지금 단계</span>
</li>
<li class="dc-dots__item">
<span class="dc-dots__dot"></span>
<span class="dc-sr">3단계 계좌 등록</span>
</li>
<li class="dc-dots__item">
<span class="dc-dots__dot"></span>
<span class="dc-sr">4단계 마침</span>
</li>
</ol>
<p class="dc-dots__cap">4단계 중 2단계</p>
</nav>
.dc-dots {
display: flex; flex-direction: column; align-items: center; gap: var(--dc-2);
padding: var(--dc-4);
font-family: var(--dc-font);
}
.dc-dots__list { display: flex; align-items: center; gap: var(--dc-2); width: 100%; justify-content: center; }
.dc-dots__item { display: flex; }
.dc-dots__dot {
display: block;
width: 8px; height: 8px;
border-radius: var(--dc-r-full);
background: var(--dc-line-bold);
transition: width var(--dc-slow), background var(--dc-slow);
}
.dc-dots__dot--done { background: color-mix(in srgb, var(--dc-brand) 45%, transparent); }
.dc-dots__dot--now { width: 26px; background: var(--dc-brand); }
.dc-dots__cap { font-size: 12px; color: var(--dc-text-mute); }
.dc-dots__step { font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-dots--label { gap: var(--dc-1); }
.dc-dots--bar .dc-dots__list { gap: var(--dc-1); }
.dc-dots--bar .dc-dots__item { flex: 1 1 0; min-width: 0; }
.dc-dots--bar .dc-dots__dot { width: 100%; height: 5px; }
.dc-dots--bar .dc-dots__dot--now { width: 100%; }