// FoxAccordion — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                      accordion (194:3563 box · 194:3680 line · 섹션 392:5034)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-accordion fox-accordion--box fox-accordion--lg fox-accordion--open">
//     <button class="fox-accordion__tit" type="button" aria-expanded="true" aria-controls="…">
//       <span class="fox-accordion__badge">…fox-badge-group…</span>   <!-- 선택 -->
//       <span class="fox-accordion__title">제목</span>
//       <span class="fox-accordion__icon">…svg…</span>
//     </button>
//     <div class="fox-accordion__contents" id="…">…</div>            <!-- 열렸을 때만 -->
//   </div>
//
// 계열 둘이 성격이 다르다.
//   - box:  색을 깐 상자. 여백·모서리를 상자가 갖고 제목이 강조 색이다.
//   - line: 위쪽 선 하나로 나뉘는 목록형. 바탕이 없고 제목 줄이 세로 여백을 갖는다.
//
// 크기는 여백·글자·모서리를 함께 바꾼다(시안 lg·md).
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - 버튼 초기화(appearance/cursor/색 상속): 구조 규칙.

@use "abstracts" as fox;

.fox-accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  inline-size: 100%;

  // 제목 줄은 통째로 누르는 자리다.
  &__tit {
    display: flex;
    align-items: center;
    gap: fox.gap(3);
    inline-size: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: fox.font-family(title);
    font-weight: fox.font-weight(bold);
    line-height: 1.4;
    letter-spacing: -0.025em;
    text-align: start;
    cursor: pointer;
  }

  &__badge {
    display: inline-flex;
    flex-shrink: 0;
  }

  // 제목이 남는 폭을 먹고 아이콘은 오른쪽 끝에 붙는다.
  &__title {
    flex: 1 0 0;
    min-inline-size: 0;
    word-break: break-word;
  }

  &__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: fox.color(icon-neutral-default);

    > * {
      inline-size: fox.icon(4);
      font-size: fox.icon(4);
      block-size: fox.icon(4);
    }
  }

  &__contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    inline-size: 100%;
    color: fox.color(font-neutral-default);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-md);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }

  // ── box 계열 ──────────────────────────────────────────────────────────────
  &--box {
    background: fox.color(surface-theme-secondary);
  }

  &--box &__title {
    color: fox.color(font-theme-secondary);
  }

  &--box#{&}--lg {
    gap: fox.gap(7);
    padding-inline: fox.padding(9);
    padding-block: fox.padding(8);
    border-radius: fox.radius(5);
  }

  &--box#{&}--md {
    gap: fox.gap(5);
    padding-inline: fox.padding(7);
    padding-block: fox.padding(6);
    border-radius: fox.radius(4);
  }

  &--box#{&}--lg &__contents {
    gap: fox.gap(7);
  }

  &--box#{&}--md &__contents {
    gap: fox.gap(5);
  }

  // ── line 계열 ─────────────────────────────────────────────────────────────
  // 여러 개를 이어 붙이면 위쪽 선이 칸막이가 된다.
  &--line {
    border-block-start: fox.border(1) solid fox.color(border-neutral-subtler);
    background: fox.color(action-secondary);
  }

  &--line &__title {
    color: fox.color(font-neutral-strong);
  }

  &--line#{&}--lg &__tit {
    padding-block: fox.padding(8);
  }

  &--line#{&}--md &__tit {
    padding-block: fox.padding(6);
  }

  &--line#{&}--lg &__contents {
    gap: fox.gap(7);
    padding-block-end: fox.padding(8);
  }

  &--line#{&}--md &__contents {
    gap: fox.gap(5);
    padding-block-end: fox.padding(6);
  }

  // ── 크기 (글자) ───────────────────────────────────────────────────────────
  &--lg &__title {
    font-size: fox.font-size(heading-sm);
  }

  &--md &__title {
    font-size: fox.font-size(heading-xsm);
  }
}