// FoxBulletListItem — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                           bullet-list-item (섹션 391:4081) · bullet (섹션 391:4049)
//
// 마크업 계약 (React 밖 소비자용):
//   <li class="fox-bullet-list-item fox-bullet-list-item--lv1 fox-bullet-list-item--unordered">
//     <span class="fox-bullet-list-item__row">
//       <span class="fox-bullet-list-item__marker" aria-hidden="true"></span>
//       <span class="fox-bullet-list-item__text">글</span>
//     </span>
//     <ul class="fox-bullet-list fox-bullet-list--nested">…</ul>   <!-- 선택 -->
//   </li>
//
// 시안의 bullet은 따로 두지 않았다 — 마커가 목록 밖에서 홀로 쓰이는 자리가 없고, 크기와
// 모양이 전부 단계·번호 여부로 갈리기 때문이다. 그 두 축이 여기 수식어로 들어와 있다.
//
// ⚠️ 단계별 규칙은 반드시 자식 결합자(`>`)로 자기 줄만 고른다. 항목이 항목을 품는 구조라
// 후손 선택자를 쓰면 1단계 규칙이 그 안의 2·3단계 마커까지 덮어쓴다.
//
// 마커는 폭이 고정이고 글만 남는 폭을 먹는다. 그래서 글이 길어져도 마커 오른쪽에서만
// 접히고 마커 아래로 흘러내리지 않는다.
//
// 1단계 채운 원과 3단계 빈 원은 시안에서 도형이라 가상 요소로 그린다. 2단계 `-`와 번호는
// 시안에서 글자라 React가 글자로 넣는다.
//
// 항목 안에서 글줄과 중첩 목록 사이는 12px이다(시안에서 뿌리 목록의 줄 간격과 같다).
//
// 토큰이 아닌 값:
//   - 마커 칸 2.2rem×2.6rem(1·2단계) · 1.6rem×2.3rem(기호 3단계) · 2.4rem×2.3rem(번호
//     3단계), 채운 원 0.6rem, 빈 원 0.4rem: 모두 시안 값이나 Figma가 변수로
//     export하지 않는다(사용자 승인).
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - list-style / flex 관련: 구조 규칙.

@use "abstracts" as fox;

.fox-bullet-list-item {
  display: flex;
  flex-direction: column;
  gap: fox.gap(4);
  inline-size: 100%;
  list-style: none;

  &__row {
    display: flex;
    align-items: flex-start;
    gap: fox.gap(1);
    inline-size: 100%;
  }

  // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
  &__marker {
    box-sizing: border-box;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    inline-size: 2.2rem;
    block-size: 2.6rem;
    color: fox.color(font-neutral-default);
    font-family: fox.font-family(body);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    white-space: nowrap;
  }

  // 글만 남는 폭을 먹는다.
  &__text {
    flex: 1 0 0;
    min-inline-size: 0;
    color: fox.color(font-neutral-default);
    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;
    word-break: break-word;
  }

  // ── 기호 마커 ─────────────────────────────────────────────────────────────
  // 1단계 채운 원과 3단계 빈 원은 시안에서 도형이라 가상 요소로 그린다.
  &--unordered#{&}--lv1 > #{&}__row > #{&}__marker::before,
  &--unordered#{&}--lv3 > #{&}__row > #{&}__marker::before {
    content: "";
    display: block;
    background: fox.color(element-neutral-default);
  }

  &--unordered#{&}--lv1 > #{&}__row > #{&}__marker::before {
    inline-size: 0.6rem;
    font-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: fox.radius(max);
  }

  &--unordered#{&}--lv3 > #{&}__row > #{&}__marker::before {
    box-sizing: border-box;
    inline-size: 0.4rem;
    font-size: 0.4rem;
    block-size: 0.4rem;
    border: fox.border(1) solid fox.color(element-neutral-default);
    border-radius: fox.radius(max);
    background: none;
  }

  // 2단계 `-`와 번호는 시안에서 글자라 크기만 정한다.
  &--unordered#{&}--lv2 > #{&}__row > #{&}__marker,
  &--ordered#{&}--lv1 > #{&}__row > #{&}__marker {
    font-size: fox.font-size(body-md);
    letter-spacing: -0.025em;
  }

  &--ordered#{&}--lv2 > #{&}__row > #{&}__marker {
    font-size: fox.font-size(body-sm);
    letter-spacing: -0.025em;
  }

  &--ordered#{&}--lv3 > #{&}__row > #{&}__marker {
    font-size: fox.font-size(body-xsm);
    letter-spacing: -0.025em;
  }

  // ── 3단계 ─────────────────────────────────────────────────────────────────
  // 마커 칸이 한 단계 좁아지고 왼쪽으로 조금 밀려 있다.
  &--lv3 > #{&}__row > #{&}__marker {
    block-size: 2.3rem;
    padding-inline-start: fox.padding(2);
  }

  &--unordered#{&}--lv3 > #{&}__row > #{&}__marker {
    inline-size: 1.6rem;
  }

  &--ordered#{&}--lv3 > #{&}__row > #{&}__marker {
    inline-size: 2.4rem;
  }

  &--lv3 > #{&}__row > #{&}__text {
    font-size: fox.font-size(body-sm);
  }
}