// FoxButtonPanel — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                        Figma btn-page (컴포넌트 세트 404:5121 · 섹션 405:5193)
//
// 페이지 하단 동작 영역. 자식은 버튼 그룹이고, 여럿이면 양끝으로 벌리고 하나면 가운데 둔다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-button-panel fox-button-panel--offset">
//     <div class="fox-button-group fox-button-group--horizontal fox-button-group--start">…</div>
//     <div class="fox-button-group fox-button-group--horizontal fox-button-group--end">…</div>
//   </div>
// 자식이 하나면 `:only-child`가 알아서 가운데로 보낸다 — 별도 클래스가 필요 없고, 프래그먼트나
// 조건부 렌더로 자식 수가 갈리는 React 쪽 계산 실수도 생기지 않는다(DOM이 기준이다).
//
// 시안이 요구하는 두 가지를 패널이 자식에게 강제한다(사용자 승인):
//   - 패널 안 그룹의 간격은 `gap/3`이다. 그룹 단독으로 쓸 때의 `gap/2`를 덮어쓴다.
//   - 모바일에서는 패널도 그룹도 세로로 쌓이고 버튼이 폭을 채운다.
//
// 토큰이 아닌 값(사용자 승인):
//   - 버튼 `min-inline-size: 16rem`(160px): 시안이 패널 안 버튼에만 주는 값인데 변수로
//     바인딩되어 있지 않고 토큰 스케일에도 160이 없다. `.fox-button`에만, 패널 안에서만 건다.
//   - box-sizing: 상단 여백을 패딩으로 주므로 필요하다.

@use "abstracts" as fox;

.fox-button-panel {
  box-sizing: border-box;
  display: flex;
  inline-size: 100%;
  gap: fox.gap(3);
  align-items: flex-start;
  justify-content: space-between;

  // 시안의 80px `margin` 프레임. 다른 맥락에 놓을 땐 끈다.
  &--offset {
    padding-block-start: fox.spacing(top-2xlg);
  }

  &:has(> :only-child) {
    justify-content: center;
  }

  .fox-button-group {
    gap: fox.gap(3);
  }

  .fox-button {
    min-inline-size: 16rem;
  }

  @include fox.mobile {
    flex-direction: column;
    align-items: stretch;

    .fox-button-group {
      flex-direction: column;
      align-items: stretch;
    }

    .fox-button {
      inline-size: 100%;
    }
  }
}