/* 메일 목록 기준 공통 페이징. 기존 테마 의미 변수를 사용합니다. */
.gw-list-pager.gw-list-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 1rem;
    width: 100%;
}
.gw-list-pager .gw-page-size {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
}
.gw-list-pager .gw-page-size select {
    width: auto;
    min-width: 76px;
    padding: .36rem 1.6rem .36rem .55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: .78rem;
}
.gw-list-pager .gw-page-navigation {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem;
}
.gw-list-pager .gw-page-navigation button {
    display: inline-grid;
    min-width: 32px;
    width: auto;
    height: 32px;
    padding: 0 .45rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: .78rem;
    place-items: center;
}
.gw-list-pager .gw-page-navigation button:hover:not(:disabled),
.gw-list-pager .gw-page-navigation button.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.gw-list-pager .gw-page-navigation button:disabled {
    cursor: not-allowed;
    opacity: .4;
}
.gw-list-pager :is(button, select):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Radzen 그리드의 조회·정렬 기능은 유지하고 하단 표시를 맞춥니다. */
.rz-data-grid .rz-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    padding: 1rem;
    background: transparent;
    color: var(--muted);
}
.rz-data-grid .rz-pager .rz-pager-summary { display: none; }
.rz-data-grid .rz-pager .rz-pagesize-text {
    order: -2;
    margin: 0 .45rem 0 0;
    color: var(--muted);
    font-size: .78rem;
}
.rz-data-grid .rz-pager :is(.rz-pager-element, .rz-pager-page) {
    min-width: 32px;
    height: 32px;
    margin: 0;
    padding: 0 .45rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: .78rem;
}
.rz-data-grid .rz-pager .rz-state-active,
.rz-data-grid .rz-pager .rz-pager-element:hover:not(.rz-state-disabled) {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.rz-data-grid .rz-pager .rz-state-disabled { opacity: .4; }
@media (max-width: 575.98px) {
    .gw-list-pager.gw-list-pager { gap: .6rem; padding: .75rem .5rem; }
    .gw-list-pager .gw-page-navigation { max-width: 100%; }
}

.rz-data-grid .rz-pager .rz-dropdown {
    order: -1;
    width: 84px;
    margin-inline-end: .55rem;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}
.rz-data-grid .rz-pager .rz-pager-pages {
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem;
}
.rz-data-grid .rz-pager .rz-pager-item { margin: 0; }
.rz-data-grid .rz-pager .rz-pager-first,
.rz-data-grid .rz-pager .rz-pager-prev,
.rz-data-grid .rz-pager .rz-pager-next,
.rz-data-grid .rz-pager .rz-pager-last { margin-inline: 0; }

/* 모바일은 번호 5개와 이동 버튼을 한 줄로 표시합니다. */
.gw-list-pager .gw-page-navigation .gw-page-number-mobile { display: none; }
@media (max-width: 767.98px) {
    .gw-list-pager .gw-page-navigation {
        flex-wrap: nowrap;
        max-width: 100%;
        gap: clamp(2px, .6vw, 4px);
    }
    .gw-list-pager .gw-page-navigation button {
        min-width: 0;
        width: clamp(24px, 7vw, 32px);
        flex: 0 1 auto;
        padding-inline: .15rem;
    }
    .gw-list-pager .gw-page-navigation .gw-page-number-desktop { display: none; }
    .gw-list-pager .gw-page-navigation .gw-page-number-mobile { display: inline-grid; }
}

/* Radzen 목록도 모바일에서 번호와 이동 버튼이 한 줄을 유지합니다. */
@media (max-width: 767.98px) {
    .rz-data-grid .rz-pager { padding: .75rem .5rem; }
    .rz-data-grid .rz-pager .rz-pager-pages {
        display: flex;
        flex: 0 0 100%;
        flex-wrap: nowrap;
        max-width: 100%;
        gap: clamp(2px, .6vw, 4px);
        justify-content: center;
    }
    .rz-data-grid .rz-pager .rz-pager-item {
        display: block !important;
        grid-column: auto;
        min-width: 0;
        flex: 0 1 auto;
    }
    .rz-data-grid .rz-pager :is(.rz-pager-element, .rz-pager-page) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        width: clamp(24px, 7vw, 32px);
        padding-inline: .15rem;
    }
}