# 팝업 / 모달 (popup)

| 항목 | 경로 |
|------|------|
| 데모 | `popup.html` |
| CSS | `css/popup.css` (+ 버튼 `button.css`) |
| JS | `js/common.js` — modal / drags |
| 이미지 | `img/ly_close.png` |

---

## API

| 방법 | 설명 |
|------|------|
| `data-modal-open="모달id"` | 버튼 클릭으로 열기 |
| `modalOpen('모달id')` | JS로 열기 |
| `modalClose('모달id')` | JS로 닫기 |
| `.md-close` / Esc / 배경 클릭 | 닫기 |
| `.md-content.no-move` | **위치 고정** (드래그 불가) |

---

## 기본 마크업

```html
<!-- 열기 -->
<button type="button" class="mbtn black" data-modal-open="samplePopup">열기</button>

<!-- 레이어: 보통 #wrap 밖, </body> 직전 -->
<div class="layer-popup" data-modal="samplePopup" aria-hidden="true">
  <div class="md-content no-move">
    <div class="md-header">
      <h2 class="tit" id="samplePopup-title">제목</h2>
    </div>
    <div class="md-body">내용</div>
    <div class="md-footer">
      <div class="btn-layer">
        <button type="button" class="lbtn black" onclick="modalClose('samplePopup')">확인</button>
      </div>
    </div>
    <button type="button" class="md-close close" aria-label="레이어 닫기">닫기</button>
  </div>
</div>
```

---

## 에러/알림 (alertdialog)

```html
<div class="layer-popup md-error" data-modal="errorPopup"
     data-modal-role="alertdialog" aria-hidden="true">
  <div class="md-content md-alert no-move">
    <div class="md-header"><h2 class="tit" id="errorPopup-title">오류</h2></div>
    <div class="md-body">
      <p class="md-msg" id="errorPopup-desc">메시지</p>
    </div>
    <div class="md-footer">
      <div class="btn-layer">
        <button type="button" class="mbtn black md-close">확인</button>
      </div>
    </div>
    <button type="button" class="md-close close" aria-label="레이어 닫기">닫기</button>
  </div>
</div>
```

---

## 동작 요약 (접근성)

1. 열림 → `.open` + `role=dialog|alertdialog` + 모달에 포커스
2. Tab은 모달 안에서만 순환
3. 닫힘 → 열었던 버튼으로 초점 회귀
4. `#wrap`에 `aria-hidden` 처리 (마크업에 `#wrap` 필요)