// FoxHeadingGroup — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) heading-group (3002:7177)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-heading-group">
//     <div class="fox-heading-group__text">
//       <div class="fox-heading-group__heading"><h2 class="fox-heading-group__title">제목</h2></div>
//       <p class="fox-heading-group__description">설명</p>          <!-- 선택 -->
//     </div>
//     <div class="fox-heading-group__actions">…</div>               <!-- 선택 -->
//   </div>
//
// 제목 줄이 따로 있는 이유는 시안이 그 안에 아이콘·배지를 함께 세울 자리를 두기 때문이다
// (지금은 제목 하나뿐이지만 8px 간격이 이미 잡혀 있다).
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일 display/sm의 값이나 Figma가 변수로
//     export하지 않는다. -0.65px은 26px 기준이라 `-0.025em`으로 적는다(다른 컴포넌트와 같은 근거).
//   - margin 0: 제목 태그의 브라우저 기본값 지우기.

@use "abstracts" as fox;

.fox-heading-group {
  display: flex;
  inline-size: 100%;
  align-items: center;
  gap: fox.gap(5);
  // 뒤따르는 도구 줄·표가 간격을 따로 두지 않게 이 조각이 아래 여백을 갖는다.
  padding-block-end: fox.spacing(bottom-md);

  &__text {
    display: flex;
    flex: 1 0 0;
    min-inline-size: 0;
    flex-direction: column;
  }

  &__heading {
    display: flex;
    inline-size: 100%;
    align-items: center;
    gap: fox.gap(3);
  }

  &__title {
    margin: 0;
    color: fox.color(font-neutral-strong);
    font-family: fox.font-family(title);
    font-size: fox.font-size(display-sm);
    font-weight: fox.font-weight(bold);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }

  &__description {
    margin: 0;
    color: fox.color(font-neutral-subtle);
    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;
  }

  &__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: fox.gap(3);
  }
}