// FoxFormLabel — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                       Figma form-label
//
// 입력 칸 위에 붙는 라벨. 필수·선택 표시를 뒤에 달 수 있다.
//
// 마크업 계약 (React 밖 소비자용):
//   <label class="fox-form-label" for="…">
//     이름
//     <span class="fox-form-label__required" aria-hidden="true">*</span>   <!-- 필수일 때 -->
//     <span class="fox-form-label__optional">(선택)</span>                 <!-- 선택일 때 -->
//   </label>
//
// 시안에서 이 컴포넌트와 입력 계열의 라벨이 같은 공용 조각이라, 라벨 모양은 여기 한 곳에만
// 둔다. 칸을 여러 개 묶은 필드(전화번호·주소 등)도 자기 라벨을 그리지 않고 이 클래스를 쓴다.
//
// 필수의 `*`는 `aria-hidden`이다. 필수 여부는 입력 요소의 `required`(또는 `aria-required`)가
// 알리는 것이고, 별표는 그 눈에 보이는 짝일 뿐이라 두 번 읽히면 안 된다. 반대로 "(선택)"은
// 대신 알려 줄 속성이 없어 그대로 읽히게 둔다.
//
// 표시는 서로 배타적이다 — 필수이면서 선택일 수는 없어 React 래퍼가 하나만 받는다.
//
// 토큰이 아닌 값(FoxButton과 동일한 근거로 승인된 항목):
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로 export하지
//     않는다. 자간은 px이 아니라 em이라 브레이크포인트가 바뀌어도 비율이 유지된다.
//   - display / align-items: 구조 규칙.

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

.fox-form-label {
  display: inline-flex;
  align-items: center;
  color: fox.color(font-neutral-default);
  font-family: fox.font-family(body);
  font-size: fox.font-size(label-md);
  font-weight: fox.font-weight(medium);
  line-height: 1;
  letter-spacing: -0.025em;

  // 시안 label/md-em — 기본 라벨보다 굵고 강조 색이다.
  &__required {
    color: fox.color(font-theme-accent);
    font-weight: fox.font-weight(bold);
  }

  // 시안 label/sm — 기본 라벨보다 한 단계 작고 흐리다.
  &__optional {
    color: fox.color(font-neutral-subtle);
    font-size: fox.font-size(label-sm);
    font-weight: fox.font-weight(regular);
    letter-spacing: -0.025em;
  }
}