// FoxRadioGroup — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                        Figma radio-group
//
// 라디오 여러 칸의 배치만 책임진다. 선택 상태는 각 `fox-radio`의 네이티브 input이 소유하고,
// 같은 `name`을 쓰면 브라우저가 하나만 선택되게 묶는다 — 그룹이 상태를 갖지 않는다.
//
// 자식들의 `name`을 맞추는 건 작성자 몫이다(React 래퍼는 `name` prop으로 자동화한다). 한 칸만
// 어긋나도 브라우저가 다른 묶음으로 보고 두 개가 동시에 선택된다.
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-radio-group fox-radio-group--vertical" role="radiogroup" aria-label="요금제">
//     <label class="fox-radio fox-radio--lg">…</label>
//     <label class="fox-radio fox-radio--lg">…</label>
//   </div>
//
// ⚠️ 시안의 변형 이름이 실제 동작과 반대다. `direction=row`가 세로로 쌓고
// (`flex-direction: column`), `direction=col`이 가로로 나열한다(사용자 확인). 이름을 그대로
// 옮기면 코드가 거짓말을 하므로, **동작 기준으로 다시 이름 붙였다.**
//
//   시안 direction=row  →  `--vertical`     (세로로 쌓임)
//   시안 direction=col  →  `--horizontal`   (가로 나열, 줄바꿈)
//
// 단어는 `fox-button-group`의 orientation 규약을 따른다 — 같은 개념을 형제 컴포넌트가 다르게
// 부르지 않게 한다. 시안과 대조할 때는 위 표를 보면 된다.
//
// 가로는 줄바꿈되며 행 간격(`gap-7`)보다 열 간격(`gap-9`)이 넓다. 세로는 한 축뿐이라
// `gap-7` 하나다.
//
// 시안 dev 출력의 `align-self: stretch`(세로)와 `flex: 1 0 0`(가로)은 옮기지 않았다 — 그룹이
// **부모 안에서** 어떻게 늘어나는지를 정하는 값이라, 규약 7("className은 배치용")에 따라
// 호출부가 정할 몫이다. 남는 폭을 채워야 하는 자리에서는 `className`으로 준다.
//
// 토큰이 아닌 값(사용자 승인):
//   - display / flex-direction / flex-wrap / align-*: 배치 규칙.

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

.fox-radio-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);
  }
}