/* 시스템 스타일 충돌을 피하기 위해 클래스명 변경: .ec-base-paginate -> .custom-pagination-ui */

.custom-pagination-ui {
    margin: 20px 0;
    text-align: center;
}

.custom-pagination-ui ol {
    display: inline-block;
    padding: 0;
    margin: 0 10px;
    vertical-align: middle;
}

.custom-pagination-ui li {
    display: inline-block;
    margin: 0 2px;
    vertical-align: middle;
}

.custom-pagination-ui a {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    color: #666;
    background: none !important;
    border: none !important;
}

/* 숫자 버튼 - 크기 키움 */
.custom-pagination-ui li a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px; /* 11px -> 14px로 확대 */
    text-align: center;
}

/* 순수 CSS 화살표 공통 - 크기 줄임 */
.custom-pagination-ui .arrow-prev,
.custom-pagination-ui .arrow-next {
    display: inline-block;
    width: 7px; /* 10px -> 7px로 축소 */
    height: 7px; /* 10px -> 7px로 축소 */
    border-top: 2px solid #666;
    border-left: 2px solid #666;
    margin: 0 10px;
    vertical-align: middle;
}

.custom-pagination-ui .arrow-prev {
    transform: rotate(-45deg);
}

.custom-pagination-ui .arrow-next {
    transform: rotate(135deg);
}

.custom-pagination-ui a:hover {
    text-decoration: underline;
}

.custom-pagination-ui a:hover .arrow-prev,
.custom-pagination-ui a:hover .arrow-next {
    border-color: #333;
}

/* 활성화 상태 */
.custom-pagination-ui li a.active,
.custom-pagination-ui li a.this {
    font-weight: bold;
    text-decoration: underline;
    color: #333;
}

/* 비활성화 상태 */
.custom-pagination-ui a.nolink {
    cursor: default;
    opacity: 0.5;
}

.custom-pagination-ui a.nolink .arrow-prev,
.custom-pagination-ui a.nolink .arrow-next {
    border-color: #bbb;
}