아코디언 UI
(Accordion)

<div class="accordion" id="myAccordion">

  <div class="acc-item">
    <button class="acc-btn"
            onclick="toggleSingle(this,'myAccordion')">
      첫 번째 질문이에요
      <span class="acc-arrow">▼</span>
    </button>
    <div class="acc-body">
      <div class="acc-body-inner">
        첫 번째 답변 내용을 여기에 써요.
      </div>
    </div>
  </div>

  <div class="acc-item">
    <button class="acc-btn"
            onclick="toggleSingle(this,'myAccordion')">
      두 번째 질문이에요
      <span class="acc-arrow">▼</span>
    </button>
    <div class="acc-body">
      <div class="acc-body-inner">
        두 번째 답변 내용을 여기에 써요.
      </div>
    </div>
  </div>

</div>

/* 핵심: max-height 전환으로 슬라이드 효과 구현 */
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.acc-item.open .acc-body {
  max-height: 500px; /* 콘텐츠보다 크면 됨 */
}

/* 화살표 회전 애니메이션 */
.acc-arrow {
  display: inline-flex;
  transition: transform .3s ease;
}
.acc-item.open .acc-arrow {
  transform: rotate(180deg);
}

/* 아코디언 버튼 기본 스타일 */
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: .93rem;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  text-align: left;
  gap: 12px;
  transition: background .15s, color .2s;
}
.acc-btn:hover { background: #f9fafb; }
.acc-item.open .acc-btn { color: #4f46e5; }

// ① 단일 오픈 (하나 열면 다른 것 자동으로 닫힘)
function toggleSingle(btn, containerId) {
  const container = document.getElementById(containerId);
  const item      = btn.closest('.acc-item');
  const isOpen    = item.classList.contains('open');

  // 모든 항목 닫기
  container.querySelectorAll('.acc-item').forEach(function(el) {
    el.classList.remove('open');
  });

  // 클릭한 항목이 닫혀있었으면 열기
  if (!isOpen) {
    item.classList.add('open');
  }
}

// ② 다중 오픈 (각자 독립적으로 열고 닫힘)
function toggleMulti(btn) {
  btn.closest('.acc-item').classList.toggle('open');
}

// ③ 전체 닫기 버튼 (선택사항)
function closeAll(containerId) {
  document.getElementById(containerId)
    .querySelectorAll('.acc-item')
    .forEach(function(el) { el.classList.remove('open'); });
}

function toggleAccurate(btn) {
  const item = btn.closest('.acc-item');
  const body = item.querySelector('.acc-body');

  if (item.classList.contains('open')) {
    // 닫기: 현재 높이 → 0
    body.style.maxHeight = body.scrollHeight + 'px';
    // 다음 프레임에서 0으로 설정해야 transition이 동작
    requestAnimationFrame(() => {
      body.style.maxHeight = '0';
    });
    item.classList.remove('open');
  } else {
    // 열기: 0 → scrollHeight
    item.classList.add('open');
    body.style.maxHeight = body.scrollHeight + 'px';

    // transition 끝나면 auto로 (내용 늘어나도 대응)
    body.addEventListener('transitionend', () => {
      body.style.maxHeight = 'none';
    }, { once: true });
  }
}