// FoxBulletList — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                       bullet-list (484:5650 · 484:5723 · 섹션 484:5722)
//
// 마크업 계약 (React 밖 소비자용):
//   <ul class="fox-bullet-list">
//     <li class="fox-bullet-list-item …">…</li>
//     <li class="fox-bullet-list-item …">…
//       <ul class="fox-bullet-list fox-bullet-list--nested">…</ul>
//     </li>
//   </ul>
//   번호 목록은 `<ul>` 자리에 `<ol>`을 쓴다.
//
// 시안은 2·3단계를 형제 프레임으로 두고 왼쪽 여백만 20·40px 줬지만, 여기서는 진짜 중첩
// (`<ul>` 안의 `<ul>`)으로 낸다 — 목록의 단계를 스크린리더에 알리려면 그래야 한다.
// 한 단계마다 20px씩 들어가므로 3단계는 40px이 되어 시안과 같은 자리에 선다.
//
// 항목 사이 간격은 뿌리에서 12px, 중첩 안에서 8px이다(시안 그대로).
//
// 토큰이 아닌 값:
//   - 목록의 margin/padding/list-style 0: `<ul>`·`<ol>`의 브라우저 기본값 지우기.

@use "abstracts" as fox;

.fox-bullet-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(4);
  inline-size: 100%;
  margin: 0;
  padding: 0;
  list-style: none;

  // 안쪽 목록은 한 단계 들여쓰고 줄 간격이 좁다.
  &--nested {
    gap: fox.gap(3);
    padding-inline-start: fox.padding(7);
  }

  // 첫 줄부터 2단계로 시작할 때 중첩 목록을 매다는 빈 칸. 보이는 것이 없다.
  &__hanger {
    inline-size: 100%;
  }
}