/**
 * 공통 페이지네이션 스타일
 */

/* 페이지네이션 컨테이너 */
.pagination-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: white;
    border-top: 1px solid #dee2e6;
    gap: 2rem; /* 페이지 정보와 페이지네이션 버튼 사이 간격 */
    flex-wrap: nowrap !important; /* 줄바꿈 방지 */
}

/* 페이지 정보 텍스트 */
.page-info {
    font-size: 0.875rem;
    color: #6c757d;
    white-space: nowrap;
    min-width: 120px;
    flex-shrink: 0; /* 축소 방지 */
}

/* nav 요소 스타일 */
.pagination-container nav {
    display: flex;
    align-items: center;
}

/* 페이지네이션 버튼 컨테이너 */
.pagination-container .pagination {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important; /* 모든 아이템 높이 통일 */
    margin: 0;
    gap: 0.25rem; /* 버튼 사이 간격 */
    flex-wrap: nowrap !important;
}

/* 페이지 아이템 */
.pagination .page-item {
    margin: 0 2px; /* 버튼 사이 추가 간격 */
    display: flex;
    align-items: center;
}

/* 모든 페이지 링크 기본 스타일 */
.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px; /* 고정 높이 */
    min-height: 32px;
    padding: 0 0.5rem;
    line-height: 1;
}

/* 첫 페이지, 마지막 페이지 버튼 강조 */
.pagination .page-link[data-type="first"],
.pagination .page-link[data-type="last"] {
    font-weight: 600;
    padding: 0 0.6rem;
}

/* 이전, 다음 버튼 */
.pagination .page-link[data-type="prev"],
.pagination .page-link[data-type="next"] {
    padding: 0 0.5rem;
}

/* 페이지 번호 버튼 */
.pagination .page-link[data-type="number"] {
    min-width: 32px;
    text-align: center;
    padding: 0 0.75rem;
}

/* 생략 부호 */
.pagination .page-link[data-type="ellipsis"] {
    cursor: default;
    pointer-events: none;
    padding: 0.375rem 0.3rem;
}

/* 활성 페이지 */
.pagination .page-item.active .page-link {
    font-weight: 600;
}

/* 비활성 페이지 */
.pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 호버 효과 */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
}

/* 작은 화면 대응 */
@media (max-width: 576px) {
    .pagination-container {
        flex-direction: row; /* 한 줄 유지 */
        gap: 1rem; /* 간격 줄이기 */
        padding: 0.5rem 0.75rem; /* 패딩 줄이기 */
    }
    
    .page-info {
        font-size: 0.75rem; /* 폰트 크기 줄이기 */
        min-width: auto;
    }
    
    .pagination {
        justify-content: flex-end;
    }
    
    /* 모바일에서 일부 버튼 숨기기 */
    .pagination .page-link[data-type="ellipsis"] {
        display: none;
    }
    
    /* 모바일에서 페이지 버튼 크기 줄이기 */
    .pagination .page-link {
        height: 28px;
        min-height: 28px;
        padding: 0 0.4rem;
        font-size: 0.75rem;
    }
}