/* Bullet List
 * - ul.bullet-list : • → - → ◦
 * - ol.bullet-list : 1. → a. → ①
 * - 하위 레벨은 li 안에 .bullet-list 를 중첩 (최대 3레벨)
 */

/* 원문자 번호 (레벨3) */
@counter-style circled {
    system: fixed;
    symbols: '①' '②' '③' '④' '⑤' '⑥' '⑦' '⑧' '⑨' '⑩' '⑪' '⑫' '⑬' '⑭' '⑮' '⑯' '⑰' '⑱' '⑲' '⑳';
    suffix: '';
    fallback: decimal;
}

.bullet-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    color: var(--color-font-neutral-default);
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    line-height: 150%;
    letter-spacing: -0.0234rem;
}

.bullet-list > li {
    position: relative;
    padding-left: var(--number-7);
}

/* 중첩 리스트 */
.bullet-list .bullet-list {
    margin-top: var(--gap-3);
}

.bullet-list .bullet-list .bullet-list {
    gap: var(--gap-2);
    font-size: var(--font-size-body-sm);
    letter-spacing: -0.0203rem;
}

/* ─────────── ul : 기호 ─────────── */
.bullet-list > li::before {
    content: '';
    position: absolute;
    left: var(--number-2);
    top: calc(0.75em - 0.1875rem);
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-max);
    background: var(--color-element-neutral-default);
}

/* 레벨2 : - */
.bullet-list .bullet-list > li::before {
    top: calc(0.75em - 0.0625rem);
    width: 0.5rem;
    height: 0.125rem;
    border-radius: 0;
}

/* 레벨3 : ◦ */
.bullet-list .bullet-list .bullet-list > li::before {
    top: calc(0.75em - 0.15625rem);
    width: 0.3125rem;
    height: 0.3125rem;
    border: var(--border-1) solid var(--color-element-neutral-default);
    border-radius: var(--radius-max);
    background: transparent;
}

/* 작은 불릿 : ul.bullet-list.bullet-sm (1레벨 점 크기, 들여쓰기 변경) */
ul.bullet-list.bullet-sm > li {
    padding-left: var(--number-10);
}
ul.bullet-list.bullet-sm > li::before {
    top: calc(0.75em - 0.125rem);
    left: var(--number-6);
    width: 0.25rem;
    height: 0.25rem;
}

.color-default {
    color: var(--color-font-neutral-strong);
}
.bullet-list.color-default > li::before {
    background-color: var(--color-font-neutral-strong);
}

/* ─────────── ol : 번호 ─────────── */
ol.bullet-list {
    counter-reset: bullet-list;
}

ol.bullet-list > li {
    counter-increment: bullet-list;
    padding-left: var(--number-9);
}

ol.bullet-list > li::before {
    content: counter(bullet-list) '.';
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-font-neutral-default);
}

/* 레벨2 : a. */
.bullet-list ol.bullet-list > li::before {
    content: counter(bullet-list, lower-alpha) '.';
    top: 0;
    width: auto;
    height: auto;
    background: none;
}

/* 레벨3 : ① */
.bullet-list .bullet-list ol.bullet-list > li::before {
    content: counter(bullet-list, circled);
    top: 0;
    width: auto;
    height: auto;
    border: 0;
    background: none;
}

/* Info Box (회색 박스)
 * - .info-box > .info-box-group > .info-box-title + 내용(.bullet-list.bullet-sm, p 등)
 */

.info-box {
    display: flex;
    flex-direction: column;
    gap: var(--gap-7);
    padding: var(--padding-8);
    border-radius: var(--radius-5);
    background: var(--color-surface-neutral-gray);
}

.info-box-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
}

.info-box-title {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-xsm);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0266rem;
}

.info-box .bullet-list > li {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    word-break: keep-all;
}
/* 점 크기·위치는 .bullet-sm 사용, 색상만 지정 */
.info-box .bullet-list > li::before {
    background: var(--color-font-neutral-strong);
}

.info-box p {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    word-break: keep-all;
}

/* Info Alert (컬러 박스)
 * - .info-alert.{danger|warning|success|info} > .info-alert-ico + .info-alert-cont
 * - .info-alert-cont > .info-alert-tit + .info-alert-desc (설명은 최대 2줄)
 * - 단문형: .info-alert-ico + .info-alert-txt
 */

.info-alert {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    padding: var(--padding-5) var(--padding-6);
    border: var(--border-1) solid var(--color-border-neutral-subtler);
    border-radius: var(--radius-4);
    background: var(--color-surface-neutral-gray);
    color: var(--color-icon-neutral-subtle);
}

.info-alert-ico {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    aspect-ratio: 1/1;
    border-radius: var(--radius-max);
    background: var(--color-surface-neutral-default);
    font-size: var(--font-size-body-md);
}
.info-alert-ico .ico {
    font-size: var(--icon-5);
}

.info-alert-cont {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gap-1);
    min-width: 0;
}

.info-alert-tit,
.info-alert-txt {
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-md);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0234rem;
}

.info-alert-desc {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    line-height: 150%;
    letter-spacing: -0.0234rem;
    color: var(--color-font-neutral-strong);
    word-break: keep-all;
}

.info-alert.danger,
.info-alert.danger .info-alert-tit {
    border-color: var(--color-border-system-danger-inverse);
    background: var(--color-surface-system-danger);
    color: var(--color-font-system-danger);
}
.info-alert.warning,
.info-alert.warning .info-alert-tit {
    border-color: var(--color-border-system-warning-inverse);
    background: var(--color-surface-system-warning);
    color: var(--color-font-system-warning);
}
.info-alert.success,
.info-alert.success .info-alert-tit {
    border-color: var(--color-border-system-success-inverse);
    background: var(--color-surface-system-success);
    color: var(--color-font-system-success);
}
.info-alert.info,
.info-alert.info .info-alert-tit {
    border-color: var(--color-border-system-information-inverse);
    background: var(--color-surface-system-information);
    color: var(--color-font-system-information);
}

/* Snackbar (토스트 메시지)
 * - .snackbar > [.snackbar-ico] + .snackbar-cont + [.snackbar-btn] + .snackbar-close
 * - .snackbar-cont > [.snackbar-tit] + .snackbar-msg
 * - 아이콘 타입: .snackbar-ico.{primary|danger}, 기본은 회색
 * - 여러 개 노출: .snackbar-list
 * - 실제 사용 시 .snackbar-wrap(화면 하단 고정)으로 감싸서 사용
 */

.snackbar-wrap {
    position: fixed;
    bottom: var(--padding-8);
    left: 50%;
    z-index: 1100;
    width: calc(100% - var(--main-gutter, 1rem) * 2);
    max-width: 46rem;
    transform: translateX(-50%);
}

.snackbar-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
}

.snackbar {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    width: 100%;
    max-width: 46rem;
    min-height: 3.75rem;
    padding: var(--padding-5) var(--padding-5) var(--padding-5) var(--padding-7);
    border: var(--border-1) solid var(--color-border-neutral-subtle);
    border-radius: var(--radius-5);
    background: var(--color-surface-neutral-default);
    box-shadow:
        var(--effect-shadow-location-2) var(--effect-shadow-location-2) var(--effect-shadow-blur-3) 0 var(--color-alpha-default-inverse10),
        var(--effect-shadow-location-4) var(--effect-shadow-location-4) var(--effect-shadow-blur-4) 0 var(--color-alpha-default-inverse10);
}

.snackbar-ico {
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--icon-5);
    color: var(--color-icon-neutral-subtle);
}
.snackbar-ico.primary {
    color: var(--color-icon-theme-primary);
}
.snackbar-ico.danger {
    color: var(--color-icon-system-danger);
}

.snackbar-cont {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gap-1);
    min-width: 0;
}

.snackbar-tit {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0234rem;
    color: var(--color-font-neutral-default);
}

.snackbar-msg {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    color: var(--color-font-neutral-strong);
    word-break: keep-all;
}

.snackbar-btn {
    flex-shrink: 0;
    padding: var(--padding-2) var(--padding-3);
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-md);
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0234rem;
    color: var(--color-font-theme-primary);
}

.snackbar-close {
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--icon-5);
    color: var(--color-icon-neutral-default);
}