/* 기본 전자정부 페이징을 예쁘게 만드는 CSS - sysmngList.jsp와 통일감 있는 디자인 */

/* 페이징 컨테이너 기본 스타일 */
.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* 전자정부 기본 페이징 ul 스타일 덮어쓰기 */
.pagination-container ul {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 0 !important;
}

/* 페이징 li 요소 스타일 */
.pagination-container ul li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 페이징 링크 기본 스타일 - 작고 컴팩트하게 */
.pagination-container ul li a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    border-left: none !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    min-width: 2rem !important;
    height: 2rem !important;
}

/* 첫 번째 링크는 왼쪽 둥근 모서리 */
.pagination-container ul li:first-child a {
    border-left: 1px solid #d1d5db !important;
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

/* 마지막 링크는 오른쪽 둥근 모서리 */
.pagination-container ul li:last-child a {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* 링크 호버 효과 - 더 부드럽게 */
.pagination-container ul li a:hover {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* 현재 페이지 (strong 태그로 된 부분) - 더 작고 일관되게 */
.pagination-container ul li strong {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: white !important;
    background-color: #2563eb !important;
    border: 1px solid #2563eb !important;
    border-left: none !important;
    text-decoration: none !important;
    min-width: 2rem !important;
    height: 2rem !important;
}

/* 현재 페이지가 첫 번째인 경우 */
.pagination-container ul li:first-child strong {
    border-left: 1px solid #2563eb !important;
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;
}

/* 현재 페이지가 마지막인 경우 */
.pagination-container ul li:last-child strong {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* 페이지 정보 표시 스타일 - 더 간단하게 */
.pagination-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}

/* 포커스 효과 - 더 미묘하게 */
.pagination-container ul li a:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 1px !important;
    z-index: 10 !important;
}

.pagination-container ul li strong:focus {
    outline: 2px solid #1d4ed8 !important;
    outline-offset: 1px !important;
    z-index: 10 !important;
}

/* 반응형 디자인 */
@media (max-width: 640px) {
    .pagination-container ul {
        flex-wrap: wrap !important;
        gap: 0.125rem !important;
    }
    
    .pagination-container ul li a,
    .pagination-container ul li strong {
        padding: 0.25rem 0.375rem !important;
        font-size: 0.75rem !important;
        min-width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    /* 모바일에서는 모든 모서리 둥글게 */
    .pagination-container ul li a,
    .pagination-container ul li strong {
        border-radius: 0.25rem !important;
        border: 1px solid #d1d5db !important;
    }
    
    .pagination-container ul li strong {
        border: 1px solid #2563eb !important;
    }
}

/* 추가: 페이징과 전체 레이아웃의 통일감을 위한 스타일 */
.pagination-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.5rem;
}

@media (min-width: 640px) {
    .pagination-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}