Code - nbnloper/edupay-admin

// 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"> // // // 글 // // <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; block-size: 0.6rem; border-radius: fox.radius(max); } &--unordered#{&}--lv3 > #{&}__row > #{&}__marker::before { box-sizing: border-box; inline-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); } }