# 스텝 (진행 단계)

| 항목 | 경로 |
|------|------|
| 데모 | `step.html` |
| CSS | `css/step.css` (+ 버튼 `button.css`) |
| JS | 없음 (단계 이동은 서버/앱 또는 간단 토글) |

---

## 마크업 (권장)

```html
<nav aria-label="신청 진행 단계">
  <ol class="step">
    <li class="step__item is-done">
      <a href="#step1" class="step__link">
        <span class="step__num" aria-hidden="true">1</span>
        <span class="step__label">약관동의 <span class="dn">완료</span></span>
      </a>
    </li>
    <li class="step__item is-current" aria-current="step">
      <span class="step__link">
        <span class="step__num" aria-hidden="true">2</span>
        <span class="step__label">정보입력 <span class="dn">현재 단계</span></span>
      </span>
    </li>
    <li class="step__item">
      <span class="step__link">
        <span class="step__num" aria-hidden="true">3</span>
        <span class="step__label">신청완료 <span class="dn">대기</span></span>
      </span>
    </li>
  </ol>
</nav>
```

| 상태 | 클래스 · 속성 | 링크 |
|------|----------------|------|
| 완료 | `.is-done` + `.dn`「완료」 | 이전 단계로 돌아갈 수 있으면 `<a>` |
| 현재 | `.is-current` + `aria-current="step"` + `.dn`「현재 단계」 | 보통 `<span>` (현재 위치) |
| 대기 | (없음) + `.dn`「대기」 | `<span>` |

- 목록은 **`ol`** (순서)
- 숫자 원은 장식이면 `aria-hidden="true"` (라벨에 단계 이름·상태 있음)
- 색만으로 상태 구분하지 말 것 → `.dn` 상태 문구 필수

---

## 변형

| 클래스 | 설명 |
|--------|------|
| `.step` | 가로형 (좁은 화면에서는 세로로 전환) |
| `.step.step--vertical` | 항상 세로 |

단계 내용: `.step-panel` · 이전/다음: `.step-actions` + 버튼

---

## 접근성 체크

- [ ] `nav` + `aria-label` (예: “신청 진행 단계”)
- [ ] 현재 단계 `aria-current="step"`
- [ ] 완료/현재/대기 텍스트(`.dn`) 제공
- [ ] 패널 제목이 현재 단계 이름과 일치
- [ ] 키보드로 완료 단계 링크·이전/다음 버튼 조작 가능

---

## 복사 패키지

```
css/step.css
css/button.css          ← 이전/다음 버튼
마크업: step.html
```