.page-btn.info-border {
    color: rgba(0, 0, 0, 0.575);
    border: 1px solid black;
    background: #fff;
    transition: all 0.3s ease-in-out;
}

.page-btn.info {
    color: #fff;
    background: rgba(0, 0, 0, 0.575);
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
}

.page-btn.radius {
    border-radius: 3px;
}

.page-btn {
    display: inline-block;
    outline: none;
    line-height: 40px;
    padding: 0;
    font-size: .8em;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Hover 효과 추가 */
.page-btn:hover {
    background: rgba(0, 0, 0, 0.575);/* 호버 시 배경색 변경 */
    color: white; /* 글자색 변경 */
    border-color: rgba(0, 0, 0, 0.575); /* 테두리 색상 변경 */
}

/* Hover 시 테두리 있는 버튼 변경 */
.page-btn.info-border:hover {
    background: rgba(0, 0, 0, 0.575);
    color: white;
    border-color: rgba(0, 0, 0, 0.575);
}

/* Hover 시 활성화된 버튼은 유지 */
.page-btn.info:hover {
    background: white;/* 더 진한 파란색 */
    color: rgba(0, 0, 0, 0.575); 
}

/* 아이콘 위에서는 hover 효과 제거 */
.page-btn i {
    pointer-events: none; /* 아이콘 자체는 마우스 이벤트 무시 */
}

/* 페이징 네비게이션 스타일 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 5px; /* 버튼 간 간격 조절 */
}

.page-btn {
    width: 40px; /* 버튼을 정사각형으로 */
    height: 40px; /* 높이도 동일하게 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    padding: 0; /* 내부 여백 제거 */
    border-radius: 5px; /* 모서리를 약간 둥글게 */
}