/* ============================================================================= */
/* Mobile (< 767px) */
/* ============================================================================= */

/* --------------- Typography --------------- */
.content-list-total-text,
.content-list-total-count,
.noti-title {
    font-size: var(--font-title4-size);
    line-height: var(--font-title4-line-height);
    letter-spacing: var(--font-title4-letter-spacing);
    font-weight: var(--font-title4-weight);
}

.noti-title:not(.important),
.pagination-btn-wrapper a {
    font-size: var(--font-subtitle3-size);
    line-height: var(--font-subtitle3-line-height);
    letter-spacing: var(--font-subtitle3-letter-spacing);
    font-weight: var(--font-subtitle3-weight);
}

.noti-seq,
.noti-date,
.noti-alert-text {
    font-size: var(--font-subtitle4-size);
    line-height: var(--font-subtitle4-line-height);
    letter-spacing: var(--font-subtitle4-letter-spacing);
    font-weight: var(--font-subtitle4-weight);
}

/* --------------- Layout --------------- */

/* --------------- Total Count --------------- */
.content-list-total-wrapper {
    text-align: right;
    margin-bottom: 8px;
}

.content-list-total-count {
    color: var(--color-primary);
    margin-right: -3px;
}

/* --------------- List --------------- */
.content-list {
    margin-bottom: 24px;
}

.noti-item {
    display: flex;
    padding: 16px 12px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--color-light-gray);
}

.noti-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 0 0;
}

.noti-seq {
    width: 2.25rem; /* 36px */
    flex-shrink: 0;
}

.noti-seq.important {
    color: var(--color-primary, #8DC63F);
}

.noti-title {
    /* 2줄 말줄임 처리 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2; /* 2줄까지 표시 */
    -webkit-line-clamp: 2; /* 2줄까지 표시 */
    -webkit-box-orient: vertical;
    word-break: break-all; /* 글자 단위로 줄바꿈 */
}

.noti-title.important {
    color: var(--color-primary);
}

.noti-date {
    color: var(--color-text-gray);
}

.noti-alert-text {
    margin: 0 auto;
}

/* --------------- Pagination --------------- */
.content-pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.pagination-list {
    display: flex;
    gap: 4px;
}

.pagination-btn-rec {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid var(--color-light-gray, #F0F0F0);
    background: var(--color-white, #FFF);
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
}

.pagination-btn-rec.active {
    background: var(--color-primary, #8DC63F);
}

.pagination-btn-num.active {
    color: var(--color-white, #FFF);
}

.pagination-btn-double-left,
.pagination-btn-double-left.disabled,
.pagination-btn-double-right,
.pagination-btn-double-right.disabled,
.pagination-btn-left,
.pagination-btn-left.disabled,
.pagination-btn-right,
.pagination-btn-right.disabled {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem 1rem; /* 16px * 16px */
    background-image: var(--pagination-icon, none);
}

.pagination-btn-double-left {
    --pagination-icon: url('/images/components/ic_chevron_left_double-da90e8ace25f05fa340e6d6583fac837.svg');
}

.pagination-btn-double-right {
    --pagination-icon: url('/images/components/ic_chevron_right_double-01202a678e26f91c3f7ce0b739f6ab8e.svg');
}

.pagination-btn-double-left.disabled{
    --pagination-icon: url('/images/components/ic_chevron_left_double_disabled-200a0cad2705c682acd08e4ca6919425.svg');
}

.pagination-btn-double-right.disabled {
    --pagination-icon: url('/images/components/ic_chevron_right_double_disabled-523c6bd25ae260a5adce7b7baccdbfbd.svg');
}

.pagination-btn-left {
    --pagination-icon: url('/images/components/ic_chevron_left-8a62fcdb9f8684fcb29afa3b7a55d894.svg');
}

.pagination-btn-right {
    --pagination-icon: url('/images/components/ic_chevron_right-3d942710a5a22a5a3bf7e46a4ac9ab49.svg');
}

.pagination-btn-left.disabled{
    --pagination-icon: url('/images/components/ic_chevron_left_disabled-0931272c54ceeebdd92be8bc4e84b321.svg');
}

.pagination-btn-right.disabled {
    --pagination-icon: url('/images/components/ic_chevron_right_disabled-ad3694bf41a5cdf8fbee8df7692c92e6.svg');
}

.pagination-btn-double-left.disabled,
.pagination-btn-double-right.disabled,
.pagination-btn-left.disabled,
.pagination-btn-right.disabled {
    pointer-events: none;
    cursor: default;
}

/* ============================================================================= */
/* Tablet (>= 768px) */
/* ============================================================================= */
@media (min-width: 768px) {
    .noti-title {
        /* 1줄 말줄임 처리 */
        line-clamp: 1; /* 1줄까지 표시 */
        -webkit-line-clamp: 1; /* 1줄까지 표시 */
        flex: 1;
        min-width: 0; /* flex item의 너비 축소를 위해 필요 */
    }
}

/* ============================================================================= */
/* PC (>= 1280px) */
/* ============================================================================= */
@media (min-width: 1280px) {
    .content-list-total-text,
    .content-list-total-count,
    .noti-title {
        font-size: var(--font-title2-size);
        line-height: var(--font-title2-line-height);
        letter-spacing: var(--font-title2-letter-spacing);
        font-weight: var(--font-title2-weight);
    }

    .noti-title:not(.important) {
        font-size: var(--font-subtitle1-size);
        line-height: var(--font-subtitle1-line-height);
        letter-spacing: var(--font-subtitle1-letter-spacing);
        font-weight: var(--font-subtitle1-weight);
    }

    .noti-seq,
    .noti-date,
    .noti-alert-text {
        font-size: var(--font-subtitle3-size);
        line-height: var(--font-subtitle3-line-height);
        letter-spacing: var(--font-subtitle3-letter-spacing);
        font-weight: var(--font-subtitle3-weight);
    }

    .noti-item {
        padding: 32px 20px;
    }

    .noti-seq {
        width: 4.75rem;
        gap: 20px;
    }

    .noti-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }

    .noti-date {
        width: 5.75rem;
        text-align: right;
    }
}