Accordion | HTML Components

기본

FAQ처럼 항목 사이 간격이 있는 accordion_card 스킨입니다. 한 번에 하나의 패널만 열리며(단일 모드), 화살표 키로 트리거 간 포커스를 이동할 수 있습니다.

배송은 얼마나 걸리나요?

교환·반품은 어떻게 하나요?

수령 후 7일 이내 마이페이지에서 신청할 수 있습니다. 단순 변심 반품 시 왕복 배송비가 부과됩니다.

해외 배송이 가능한가요?

<div class="accordion accordion_card accordion_demo-narrow" data-accordion>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-basic-1" aria-expanded="false" aria-controls="acc-basic-panel-1">
        <span class="accordion_label">배송은 얼마나 걸리나요?</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-basic-panel-1" role="region" aria-labelledby="acc-basic-1" hidden>
      <div class="accordion_content">
        <p>평일 기준 2~3일 이내 출고되며, 도서·산간 지역은 1~2일 추가 소요될 수 있습니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-basic-2" aria-expanded="true" aria-controls="acc-basic-panel-2">
        <span class="accordion_label">교환·반품은 어떻게 하나요?</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-basic-panel-2" role="region" aria-labelledby="acc-basic-2">
      <div class="accordion_content">
        <p>수령 후 7일 이내 마이페이지에서 신청할 수 있습니다. 단순 변심 반품 시 왕복 배송비가 부과됩니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-basic-3" aria-expanded="false" aria-controls="acc-basic-panel-3">
        <span class="accordion_label">해외 배송이 가능한가요?</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-basic-panel-3" role="region" aria-labelledby="acc-basic-3" hidden>
      <div class="accordion_content">
        <p>현재 국내 배송만 지원합니다. 해외 배송은 준비 중이며 오픈 시 공지사항으로 안내드립니다.</p>
      </div>
    </div>
  </div>
</div>

다중 열기

data-accordion-multiple을 지정하면 여러 패널을 동시에 펼칠 수 있습니다.

알림

이메일·푸시 알림 수신 여부를 설정합니다.

개인정보

프로필 공개 범위와 데이터 다운로드를 관리합니다.

보안

<div class="accordion accordion_bordered accordion_demo-narrow" data-accordion data-accordion-multiple>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-multi-1" aria-expanded="true" aria-controls="acc-multi-panel-1">
        <span class="accordion_label">알림</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-multi-panel-1" role="region" aria-labelledby="acc-multi-1">
      <div class="accordion_content">
        <p>이메일·푸시 알림 수신 여부를 설정합니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-multi-2" aria-expanded="true" aria-controls="acc-multi-panel-2">
        <span class="accordion_label">개인정보</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-multi-panel-2" role="region" aria-labelledby="acc-multi-2">
      <div class="accordion_content">
        <p>프로필 공개 범위와 데이터 다운로드를 관리합니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-multi-3" aria-expanded="false" aria-controls="acc-multi-panel-3">
        <span class="accordion_label">보안</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-multi-panel-3" role="region" aria-labelledby="acc-multi-3" hidden>
      <div class="accordion_content">
        <p>비밀번호 변경과 2단계 인증을 설정합니다.</p>
      </div>
    </div>
  </div>
</div>

플러시

accordion_flush로 외곽 테두리 없이 구분선만 표시합니다. 사이드바·설정 목록에 적합합니다.

일반

언어, 시간대, 테마 등 기본 환경 설정입니다.

접근성

고급

<div class="accordion accordion_flush accordion_demo-narrow" data-accordion>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-flush-1" aria-expanded="true" aria-controls="acc-flush-panel-1">
        <span class="accordion_label">일반</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-flush-panel-1" role="region" aria-labelledby="acc-flush-1">
      <div class="accordion_content">
        <p>언어, 시간대, 테마 등 기본 환경 설정입니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-flush-2" aria-expanded="false" aria-controls="acc-flush-panel-2">
        <span class="accordion_label">접근성</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-flush-panel-2" role="region" aria-labelledby="acc-flush-2" hidden>
      <div class="accordion_content">
        <p>고대비 모드, 모션 감소, 스크린 리더 안내를 조정합니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-flush-3" aria-expanded="false" aria-controls="acc-flush-panel-3">
        <span class="accordion_label">고급</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-flush-panel-3" role="region" aria-labelledby="acc-flush-3" hidden>
      <div class="accordion_content">
        <p>개발자 도구와 실험 기능을 켜거나 끕니다.</p>
      </div>
    </div>
  </div>
</div>

보더

accordion_bordered로 항목을 한 덩어리로 붙입니다. 설정·목록형 UI에 적합합니다.

알림

이메일·푸시 알림 수신 여부를 설정합니다.

개인정보

보안

<div class="accordion accordion_bordered accordion_demo-narrow" data-accordion>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-border-1" aria-expanded="true" aria-controls="acc-border-panel-1">
        <span class="accordion_label">알림</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-border-panel-1" role="region" aria-labelledby="acc-border-1">
      <div class="accordion_content">
        <p>이메일·푸시 알림 수신 여부를 설정합니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-border-2" aria-expanded="false" aria-controls="acc-border-panel-2">
        <span class="accordion_label">개인정보</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-border-panel-2" role="region" aria-labelledby="acc-border-2" hidden>
      <div class="accordion_content">
        <p>프로필 공개 범위와 데이터 다운로드를 관리합니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-border-3" aria-expanded="false" aria-controls="acc-border-panel-3">
        <span class="accordion_label">보안</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-border-panel-3" role="region" aria-labelledby="acc-border-3" hidden>
      <div class="accordion_content">
        <p>비밀번호 변경과 2단계 인증을 설정합니다.</p>
      </div>
    </div>
  </div>
</div>

카드

accordion_card로 각 항목을 독립 카드로 분리합니다. 대시보드·위젯 그룹에 사용합니다.

프로젝트 개요

목표, 일정, 이해관계자 정보를 요약합니다.

최근 활동

<div class="accordion accordion_card accordion_demo-narrow" data-accordion data-accordion-multiple>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-card-1" aria-expanded="true" aria-controls="acc-card-panel-1">
        <span class="accordion_label">프로젝트 개요</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-card-panel-1" role="region" aria-labelledby="acc-card-1">
      <div class="accordion_content">
        <p>목표, 일정, 이해관계자 정보를 요약합니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-card-2" aria-expanded="false" aria-controls="acc-card-panel-2">
        <span class="accordion_label">최근 활동</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-card-panel-2" role="region" aria-labelledby="acc-card-2" hidden>
      <div class="accordion_content">
        <p>커밋, 댓글, 파일 변경 이력을 표시합니다.</p>
      </div>
    </div>
  </div>
</div>

보조 정보

accordion_extra로 배지·메타 텍스트를 트리거 오른쪽에 배치합니다.

미해결 문의 3

답변이 필요한 고객 문의 3건이 있습니다.

처리 완료 지난 7일

<div class="accordion accordion_bordered accordion_demo-narrow" data-accordion>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-extra-1" aria-expanded="true" aria-controls="acc-extra-panel-1">
        <span class="accordion_label">미해결 문의</span>
        <span class="accordion_extra">
          <span class="badge badge_count color_danger badge_sm">3</span>
        </span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-extra-panel-1" role="region" aria-labelledby="acc-extra-1">
      <div class="accordion_content">
        <p>답변이 필요한 고객 문의 3건이 있습니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-extra-2" aria-expanded="false" aria-controls="acc-extra-panel-2">
        <span class="accordion_label">처리 완료</span>
        <span class="accordion_extra">지난 7일</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-extra-panel-2" role="region" aria-labelledby="acc-extra-2" hidden>
      <div class="accordion_content">
        <p>최근 일주일간 완료된 문의 12건입니다.</p>
      </div>
    </div>
  </div>
</div>

비활성

is-disabled 클래스와 함께 트리거가 비활성화됩니다.

공개 문서

누구나 열람할 수 있는 가이드 문서입니다.

팀 전용 (권한 없음)

<div class="accordion accordion_bordered accordion_demo-narrow" data-accordion>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-dis-1" aria-expanded="true" aria-controls="acc-dis-panel-1">
        <span class="accordion_label">공개 문서</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-dis-panel-1" role="region" aria-labelledby="acc-dis-1">
      <div class="accordion_content">
        <p>누구나 열람할 수 있는 가이드 문서입니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item is-disabled">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-dis-2" aria-expanded="false" aria-controls="acc-dis-panel-2" disabled>
        <span class="accordion_label">팀 전용 (권한 없음)</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-dis-panel-2" role="region" aria-labelledby="acc-dis-2" hidden>
      <div class="accordion_content">
        <p>팀 멤버만 접근할 수 있는 내부 문서입니다.</p>
      </div>
    </div>
  </div>
</div>

크기

accordion_sm · accordion_lg로 트리거와 본문 패딩을 조절합니다.

Small

작은 아코디언 — 좁은 패딩.

Large

큰 아코디언 — 넓은 패딩과 큰 글자.

<!-- 작은 아코디언 — 좁은 패딩. -->

<div class="accordion accordion_bordered accordion_sm accordion_demo-narrow" data-accordion>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-sm-1" aria-expanded="true" aria-controls="acc-sm-panel-1">
        <span class="accordion_label">Small</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-sm-panel-1" role="region" aria-labelledby="acc-sm-1">
      <div class="accordion_content">
        <p>작은 아코디언 — 좁은 패딩.</p>
      </div>
    </div>
  </div>
</div>

<!-- 큰 아코디언 — 넓은 패딩과 큰 글자. -->

<div class="accordion accordion_bordered accordion_lg accordion_demo-narrow" data-accordion>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-lg-1" aria-expanded="true" aria-controls="acc-lg-panel-1">
        <span class="accordion_label">Large</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-lg-panel-1" role="region" aria-labelledby="acc-lg-1">
      <div class="accordion_content">
        <p>큰 아코디언 — 넓은 패딩과 큰 글자.</p>
      </div>
    </div>
  </div>
</div>

슬라이드

data-effect="slide"로 펼침·접힘 시 높이 슬라이드 애니메이션을 적용합니다. 닫힌 패널은 hidden으로 숨기고, 토글 시에만 높이를 애니메이션합니다.

배송 안내

평일 기준 2~3일 이내 출고됩니다. 패널을 열고 닫을 때 높이가 부드럽게 전환됩니다.

교환·반품

고객센터

<div class="accordion accordion_card accordion_demo-narrow" data-accordion data-effect="slide">
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-slide-1" aria-expanded="true" aria-controls="acc-slide-panel-1">
        <span class="accordion_label">배송 안내</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-slide-panel-1" role="region" aria-labelledby="acc-slide-1">
      <div class="accordion_content">
        <p>평일 기준 2~3일 이내 출고됩니다. 패널을 열고 닫을 때 높이가 부드럽게 전환됩니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-slide-2" aria-expanded="false" aria-controls="acc-slide-panel-2">
        <span class="accordion_label">교환·반품</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-slide-panel-2" role="region" aria-labelledby="acc-slide-2" hidden>
      <div class="accordion_content">
        <p>수령 후 7일 이내 마이페이지에서 신청할 수 있습니다.</p>
      </div>
    </div>
  </div>
  <div class="accordion_item">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-slide-3" aria-expanded="false" aria-controls="acc-slide-panel-3">
        <span class="accordion_label">고객센터</span>
        <svg class="accordion_icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M6 9l6 6 6-6"/>
        </svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-slide-panel-3" role="region" aria-labelledby="acc-slide-3" hidden>
      <div class="accordion_content">
        <p>1588-0000 (평일 09:00–18:00). 채팅 상담도 지원합니다.</p>
      </div>
    </div>
  </div>
</div>

마크업

루트에 data-accordion을 지정하면 클릭·키보드 동작이 자동으로 연결됩니다. 헤딩은 role="heading" · aria-level을 사용합니다. 슬라이드 효과는 data-effect="slide"를 추가합니다.

<div class="accordion accordion_bordered" data-accordion>
  <div class="accordion_item is-open">
    <div class="accordion_heading" role="heading" aria-level="3">
      <button type="button" class="btn btn_text accordion_trigger" id="acc-1"
        aria-expanded="true" aria-controls="acc-panel-1">
        <span class="accordion_label">제목</span>
        <svg class="accordion_icon" …></svg>
      </button>
    </div>
    <div class="accordion_panel" id="acc-panel-1"
      role="region" aria-labelledby="acc-1">
      <div class="accordion_content"><p>본문</p></div>
    </div>
  </div>
</div>

<!-- 여러 패널 동시 열기 -->
<div class="accordion accordion_bordered" data-accordion data-accordion-multiple>…</div>

<!-- 슬라이드 효과 -->
<div class="accordion accordion_card" data-accordion data-effect="slide">…</div>

클래스 · 속성

Nuxt와 Next 컴포넌트가 렌더하는 OOCSS 클래스·상태·접근성 속성입니다. HTML에서는 아래 항목을 직접 조합하고 data-accordion으로 동작을 연결합니다.

이름	설명
`accordion`	루트 구조 클래스
`accordion_bordered`	외곽 테두리로 항목을 한 덩어리로 붙인 스킨
`accordion_flush`	구분선만 있는 플러시 스킨
`accordion_card`	항목 사이 간격·독립 카드 스킨 (FAQ 기본 예시)
`accordion_sm · accordion_lg`	크기 변형
`accordion_item · accordion_trigger · accordion_panel`	내부 파트
`accordion_heading`	role="heading" aria-level="3" 헤딩 래퍼
`accordion_label · accordion_extra · accordion_icon`	트리거 파트
`accordion_content`	패널 본문 래퍼
`data-accordion`	HTML 마크업 JS 초기화 대상
`data-accordion-multiple`	HTML 마크업 다중 열기 허용
`data-effect="slide"`	펼침·접힘 높이 슬라이드 애니메이션
`is-open · is-disabled`	상태 클래스
`aria-expanded · aria-controls`	트리거의 열림 상태와 연결된 패널 ID
`disabled · aria-disabled`	비활성 트리거 상태. 포커스 이동과 토글 대상에서 제외
`role="heading" · aria-level`	트리거를 감싸는 논리적 헤딩과 문서 계층
`role="region" · aria-labelledby`	패널 영역과 해당 트리거의 접근 가능한 이름 연결
`hidden · inert · aria-hidden`	닫힌 패널과 슬라이드 전환 중 콘텐츠 노출·포커스 차단
`Enter · Space`	네이티브 button 동작으로 현재 항목 열기·닫기
`ArrowDown · ArrowUp · Home · End`	비활성 항목을 제외한 트리거 간 순환·처음·끝 포커스 이동
`data-ripple`	AccordionItem 트리거의 클릭 파장 활성
`data-ripple="false" · data-no-ripple`	해당 트리거 또는 Accordion 하위 전체 클릭 파장 비활성

디자인 토큰

토큰	기본값	설명
`--accordion-font-size`	var(--text-size-sm)	기본(md) 본문 크기
`--accordion-trigger-font-weight` · `--accordion-trigger-gap`	600 · var(--space-sm)	트리거 타이포·간격
`--accordion-trigger-padding-y` · `--accordion-trigger-padding-x`	0.875rem · var(--space-lg)	트리거 패딩(md)
`--accordion-content-font-size`	var(--text-size-sm)	콘텐츠 글자 크기
`--accordion-content-padding-y` · `--accordion-content-padding-x`	var(--space-lg) · var(--space-lg)	콘텐츠 상하·좌우 패딩
`--accordion-icon-size`	1rem	펼침 아이콘(md)
`--accordion-slide-duration` · `--accordion-slide-easing`	0.28s · ease	슬라이드 전환
`--accordion-card-gap`	0	카드형 아코디언 항목 간격
`--accordion-card-trigger-bg`	var(--color-surface-raised)	카드형 트리거 배경
`--accordion-font-size-sm` · `--accordion-trigger-padding-y-sm` · `--accordion-trigger-padding-x-sm`	var(--text-size-xs) · 0.625rem · var(--space-md)	sm 크기
`--accordion-content-padding-y-sm` · `--accordion-content-padding-x-sm` · `--accordion-icon-size-sm`	var(--space-md) · var(--space-md) · 0.875rem	sm 본문 패딩·아이콘
`--accordion-font-size-lg` · `--accordion-trigger-padding-y-lg` · `--accordion-trigger-padding-x-lg`	var(--text-size-base) · 1rem · var(--space-xl)	lg 크기
`--accordion-content-padding-y-lg` · `--accordion-content-padding-x-lg` · `--accordion-icon-size-lg`	var(--space-xl) · var(--space-xl) · 1.125rem	lg 본문 패딩·아이콘