# FAQ

| 항목 | 경로 |
|------|------|
| 데모 | `faq.html` |
| CSS | `css/faq.css` (+ table형이면 `table.css`) |
| JS | `js/common.js` — FAQ 섹션 |
| 이미지 | `faq_up.png`, `icon_attach.png` |

---

## table형

```html
<div class="tbl-list faq">
  <table>
    <caption>FAQ 목록</caption>
    <tbody>
      <tr class="tsbj" id="faq1">
        <td>1</td>
        <td>카테고리</td>
        <td class="sbj">
          <a href="#none" title="펼치기" aria-expanded="false" aria-controls="faqDetail1">질문?</a>
        </td>
      </tr>
      <tr class="tconts">
        <td colspan="3">
          <div class="ct_wrap" id="faqDetail1">답변</div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
```

- 열림: `tr.tsbj.on` + `.ct_wrap` 표시
- 다른 항목 열면 이전 닫힘 + `title` / `aria-expanded` 동기화

카테고리 탭(선택): `.tbl-cate.faq`

---

## ul형

```html
<div class="faq-list">
  <ul>
    <li>
      <div class="question-wrap">
        <span class="head">Q</span>
        <a href="#none" title="펼치기" aria-expanded="false">질문?</a>
      </div>
      <div class="answer-wrap">
        <div class="inbox">
          <div class="head"><span>A</span></div>
          <div class="cont"><p>답변</p></div>
        </div>
      </div>
    </li>
  </ul>
</div>
```

- 열림: `li.on`
- 화살표 아이콘: `img/faq_up.png`