@charset "utf-8";

/* 페이지네이션 공용 컴포넌트 — 파셜(views/pagination.html)이 <link>로 물고 옴. MY_Pagination.php 출력 = flat <a> 나열 */
/* 사이트별 조정: 이 파일 말고 각 사이트 theme.css :root 에서 --pagination-* 손잡이만 덮어씀 (size/gap/padding/radius/font-size/border-width/border-color/bg/color/hover-color/active-bg/active-color/icon-size + -*-mobile) */

#pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 40px 0 30px;
    text-align: center;
}

#pagination p.btn_page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pagination-gap, 12px);
    margin: 0;
    padding: 0;
    text-align: center;
}

#pagination a,
#pagination strong,
#pagination span.on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--pagination-size, 48px);
    width: var(--pagination-size, 48px);
    height: var(--pagination-size, 48px);
    margin: 0;
    padding: var(--pagination-padding, 10px);
    box-sizing: border-box;
    border: var(--pagination-border-width, 1px) solid var(--pagination-border-color, var(--color-border-pagination, #E9E9E9));
    border-radius: var(--pagination-radius, 0);
    background: var(--pagination-bg, var(--color-bg-pagination, #FFFFFF));
    color: var(--pagination-color, var(--color-text-pagination, #000000));
    font-family: var(--font-number, sans-serif);
    font-size: var(--pagination-font-size, 18px);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

#pagination a:hover,
#pagination a:focus-visible {
    border-color: var(--pagination-hover-color, var(--color-primary, #1F594D));
    color: var(--pagination-hover-color, var(--color-primary, #1F594D));
    text-decoration: none;
}

#pagination a.on,
#pagination strong,
#pagination span.on {
    border-color: var(--pagination-active-bg, var(--color-bg-pagination-active, #1F594D));
    background: var(--pagination-active-bg, var(--color-bg-pagination-active, #1F594D)) !important;
    color: var(--pagination-active-color, var(--color-text-pagination-active, #FFFFFF)) !important;
}

#pagination a.prev_back,
#pagination a.next_back,
#pagination a.first_back,
#pagination a.last_back {
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

/* prev/next = 아이콘 하나뿐 — 부모(<a>)가 이미 inline-flex + align/justify-center라
 * 절대위치·transform 없이 일반 flex 자식으로 두는 것만으로 가로세로 가운데 정렬됨 */
#pagination a.prev_back:before,
#pagination a.next_back:before {
    content: "";
    display: block;
    width: var(--pagination-icon-size, 24px);
    height: var(--pagination-icon-size, 24px);
    background: currentColor;
    mask: no-repeat center / contain;
    -webkit-mask: no-repeat center / contain;
}

/* first/last = 이중 화살표(겹친 두 chevron)라 아이콘 2개를 flex로 나란히 두고,
 * 둘째 아이콘만 음수 margin으로 첫째 쪽으로 당겨서 겹치게 함 — 겹침 폭이
 * icon-size에 비례해서 계산되므로 모바일에서 아이콘이 작아져도 절로 비율 유지됨
 * (예전엔 left:10px/18px 처럼 아이콘 크기 하나(24px) 기준으로 못박혀 있어서
 * icon-size-mobile로 줄어들면 간격이 안 맞았음) */
#pagination a.first_back:before,
#pagination a.first_back:after,
#pagination a.last_back:before,
#pagination a.last_back:after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: var(--pagination-icon-size, 24px);
    height: var(--pagination-icon-size, 24px);
    background: currentColor;
    mask: no-repeat center / contain;
    -webkit-mask: no-repeat center / contain;
}

#pagination a.first_back:after,
#pagination a.last_back:after {
    margin-left: calc(-1 * (var(--pagination-icon-size, 24px) - 8px));
}

#pagination a.prev_back:before,
#pagination a.first_back:before,
#pagination a.first_back:after {
    mask-image: url("/assets/icons/left.svg");
    -webkit-mask-image: url("/assets/icons/left.svg");
}

#pagination a.next_back:before,
#pagination a.last_back:before,
#pagination a.last_back:after {
    mask-image: url("/assets/icons/right.svg");
    -webkit-mask-image: url("/assets/icons/right.svg");
}

#pagination a img {
    display: none;
}

@media screen and (max-width: 690px) {
    #pagination {
        height: auto;
        margin-bottom: 0;
    }

    #pagination p.btn_page {
        gap: var(--pagination-gap-mobile, 8px);
        width: auto;
    }

    #pagination a,
    #pagination strong,
    #pagination span.on {
        flex: 0 0 var(--pagination-size-mobile, 32px);
        width: var(--pagination-size-mobile, 32px);
        height: var(--pagination-size-mobile, 32px);
        /* 데스크톱 패딩(10px)을 그대로 쓰면 32px 박스에서 남는 공간이 12px뿐이라
         * "10"처럼 두 자리 페이지 번호가 한 줄에 안 들어가고 줄바꿈됨 */
        padding: var(--pagination-padding-mobile, 4px);
        font-size: var(--pagination-font-size-mobile, 14px);
    }

    #pagination a.prev_back:before,
    #pagination a.next_back:before,
    #pagination a.first_back:before,
    #pagination a.first_back:after,
    #pagination a.last_back:before,
    #pagination a.last_back:after {
        width: var(--pagination-icon-size-mobile, 20px);
        height: var(--pagination-icon-size-mobile, 20px);
    }

    #pagination a.first_back:after,
    #pagination a.last_back:after {
        margin-left: calc(-1 * (var(--pagination-icon-size-mobile, 20px) - 8px));
    }
}

@media screen and (min-width: 691px) and (max-width: 899px) {
    #pagination {
        height: auto;
    }
}

@media print {
    #pagination {
        display: none;
    }
}