FAQ 아코디언 | DevTemplates

HTML details와 summary 태그를 사용한 다크 테마 FAQ 아코디언입니다. 부드러운 전환 효과가 포함되어 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<style>
  body {
    background: #0a0a0a;
    color: #e5e5e5;
    font-family: system-ui, sans-serif;
    display: flex;
    justify-content: center;
    padding-top: 50px;
    margin: 0;
  }
  .faq-container {
    width: 100%;
    max-width: 600px;
    padding: 20px;
  }
  h2 { text-align: center; margin-bottom: 40px; color: #fff; }
  details {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: 0.3s;
  }
  details[open] { border-color: #3b82f6; }
  summary {
    padding: 16px 20px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: "+";
    font-size: 20px;
    color: #3b82f6;
    transition: 0.3s;
  }
  details[open] summary::after {
    transform: rotate(45deg);
  }
  .content {
    padding: 0 20px 20px;
    color: #a1a1aa;
    line-height: 1.6;
    animation: slideDown 0.3s ease-out;
  }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
</head>
<body>
  <div class="faq-container">
    <h2>자주 묻는 질문</h2>
    <details>
      <summary>서비스 이용 요금은 어떻게 되나요?</summary>
      <div class="content">
        기본적으로 무료이며, 고급 기능을 사용하려면 Pro 플랜으로 업그레이드할 수 있습니다. 자세한 내용은 가격표 페이지를 참조하세요.
      </div>
    </details>
    <details>
      <summary>환불 정책은 어떻게 되나요?</summary>
      <div class="content">
        결제 후 7일 이내에 미사용 시 전액 환불이 가능합니다. 고객 지원 센터를 통해 문의해 주세요.
      </div>
    </details>
    <details>
      <summary>계정을 삭제하려면 어떻게 해야 하나요?</summary>
      <div class="content">
        설정 메뉴의 '계정 관리' 섹션에서 계정 삭제 신청을 하실 수 있습니다. 삭제된 데이터는 복구가 불가능하니 주의해 주세요.
      </div>
    </details>
    <details>
      <summary>다국어 지원이 되나요?</summary>
      <div class="content">
        현재 한국어와 영어를 지원하고 있으며, 추후 일본어와 중국어 서비스도 추가될 예정입니다.
      </div>
    </details>
  </div>
</body>
</html>