// FoxCheckboxGroup — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                           Figma checkbox-group
//
// 체크박스 여러 칸의 배치만 책임진다. 켜짐 여부는 각 `fox-checkbox`의 네이티브 input이
// 소유한다 — 그룹이 상태를 갖지 않는다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-checkbox-group fox-checkbox-group--vertical" role="group" aria-label="약관">
//     <label class="fox-checkbox fox-checkbox--lg">…</label>
//     <label class="fox-checkbox fox-checkbox--lg">…</label>
//   </div>
//
// 라디오 묶음과 달리 `role="radiogroup"`이 아니라 `role="group"`이다 — 체크박스는 서로를
// 끄지 않아 "하나만 고르는 묶음"이 아니기 때문이다.
//
// 배치 규칙은 `fox-radio-group`과 같은 값이다. 시안에서 두 묶음이 같은 간격을 쓴다.
//
// 토큰이 아닌 값(사용자 승인):
//   - display / flex-direction / flex-wrap / align-*: 배치 규칙.

@use "@fox/styles/abstracts" as fox;

.fox-checkbox-group {
  display: flex;

  // 세로 — 한 칸씩 아래로 쌓인다. 라벨 길이가 달라도 왼쪽 끝이 맞아야 하므로 flex-start다.
  &--vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: fox.gap(7);
  }

  // 가로 — 폭이 모자라면 다음 줄로 넘어간다. `align-content`가 있어야 여러 줄이 됐을 때
  // 줄 묶음 전체가 가운데 정렬된다.
  &--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: fox.gap(7) fox.gap(9);
  }
}