// FoxDisclosure — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                       disclosure (391:4082 닫힘 · 391:4083 열림 · 섹션 391:4102)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-disclosure fox-disclosure--open">
//     <button class="fox-disclosure__tit" type="button" aria-expanded="true" aria-controls="…">
//       <span class="fox-disclosure__icon">…svg…</span>
//       <span class="fox-disclosure__title">제목</span>
//     </button>
//     <div class="fox-disclosure__contents" id="…">…</div>          <!-- 열렸을 때만 -->
//   </div>
//
// 캐럿이 제목 앞에 오고 바탕·테두리가 없다. 시안에 크기 축도 계열 축도 없어 변형이 없다.
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - 버튼 초기화(appearance/cursor/색 상속): 구조 규칙.

@use "abstracts" as fox;

.fox-disclosure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(3);
  inline-size: 100%;

  // 제목 줄은 통째로 누르는 자리다. 글자 폭만 차지한다 — 시안이 hug다.
  &__tit {
    display: flex;
    align-items: center;
    gap: fox.gap(2);
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-align: start;
    cursor: pointer;
  }

  &__icon {
    display: inline-flex;
    flex-shrink: 0;
    inline-size: fox.icon(4);
    block-size: fox.icon(4);
    color: fox.color(element-neutral-strong);
  }

  &__title {
    color: fox.color(font-neutral-strong);
    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;
    word-break: break-word;
  }

  &__contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    inline-size: 100%;
  }
}