<div data-toggle-scope data-toggle-group="true">
  <button
    type="button"
    data-toggle-btn
    data-toggle-outside="true"
    data-toggle-group-except="true"
    data-toggle-target="panel"
    aria-expanded="false"
  >
    토글 버튼
  </button>

  <div data-toggle-box="panel">토글 패널</div>
</div>
          

<!--
  [Toggle UI 사용 예시]

  - 기본 구조:
    * data-toggle-scope : 토글 동작 범위
    * data-toggle-btn   : 토글 트리거
    * data-toggle-box   : 토글 대상 패널
    * data-toggle-target ↔ data-toggle-box 값 매칭

  - 옵션(선택):
    * data-toggle-group="true"
      : 같은 스코프가 여러 개 있을 때 1개만 열림(아코디언)
      : 특정 영역은 예외 처리하고 싶을 때, button[data-toggle-group-except="true"] 추가
    * data-toggle-outside="true"
      : 스코프 외부 클릭 시 닫힘(필요한 경우만 사용)

  - 상태:
    * 패널 열림 시 data-toggle-box에 'is-open' 클래스가 추가됨
    * aria-expanded 값은 JS에서 자동 관리됨
-->