@charset "utf-8";
/*
 * rumiPaging - jQuery 페이징 플러그인 CSS
 * 웹접근성을 고려한 Button 기반 페이징 스타일
 * 버전: 2.1.0 (2025.11.01)
 */

/* 스크린 리더 전용 텍스트 (웹접근성) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 페이징 컨테이너 */
#rumi-paging,
.rumiPaging {
    text-align: center;
    margin: 20px 0;
    font-size: 0;
    user-select: none; /* 텍스트 선택 비활성화 */
    -webkit-user-select: none; /* 크롬, 사파리 */
    -moz-user-select: none; /* 파이어폭스 */
    -ms-user-select: none; /* IE10+ */
}
/* 기본 버튼 스타일 */
#rumi-paging button,
.rumiPaging button {
    font-family: inherit;
    font-size: 13px;
    border: 1px solid #4C4F6F;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    position: relative;
}

/* 페이지 네비게이션 버튼 (.page-btn) */
#rumi-paging .page-btn,
.rumiPaging .page-btn {
    display: inline-block;
    font-size: 12px;
    width: 32px;
    height: 30px;
    line-height: 28px; /* border 1px 고려 */
    text-align: center;
    margin-right: 5px;
    border-radius: 3px;
    vertical-align: top;
}

/* 페이지 번호 버튼 (.page-num) */
#rumi-paging .page-num,
.rumiPaging .page-num {
    display: inline-block;
    font-size: 13px;
    vertical-align: top;
    padding: 0 8px;
    min-width: 30px;
    height: 30px;
    background: #eee;
    line-height: 28px; /* border 1px 고려 */
    text-align: center;
    border-radius: 3px;
    margin-right: 5px;
}
/* 버튼 상태별 스타일 */

/* 활성 버튼 */
#rumi-paging .page-btn.active,
.rumiPaging .page-btn.active {
    background: #555;
    color: #fff;
    border-color: #555;
}

/* 비활성 버튼 */
#rumi-paging .page-btn.inactive,
#rumi-paging .page-btn:disabled,
.rumiPaging .page-btn.inactive,
.rumiPaging .page-btn:disabled {
    background: #bbb !important;
    color: #fff !important;
    border-color: #bbb !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* 현재 페이지 */
#rumi-paging .page-current,
.rumiPaging .page-current {
    background: #4C4F6F !important;
    color: #fff !important;
    border-color: #4C4F6F !important;
    font-weight: bold;
    cursor: default !important;
}
/* 호버 및 포커스 효과 (웹접근성) */

/* 일반 버튼 호버 */
#rumi-paging .page-btn:not(.inactive):not(:disabled):hover,
#rumi-paging .page-num:not(.page-current):hover,
.rumiPaging .page-btn:not(.inactive):not(:disabled):hover,
.rumiPaging .page-num:not(.page-current):hover {
    background: #dd6666;
    color: #fff;
    border-color: #dd6666;
    font-weight: bold;
}

/* 포커스 스타일 (웹접근성 중요) */
#rumi-paging button:focus,
.rumiPaging button:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
    z-index: 1;
}

/* 현재 페이지는 포커스 시에도 스타일 유지 */
#rumi-paging .page-current:focus,
.rumiPaging .page-current:focus {
    background: #4C4F6F !important;
    color: #fff !important;
    border-color: #4C4F6F !important;
}

/* 비활성 버튼은 호버/포커스 효과 제거 */
#rumi-paging .page-btn.inactive:hover,
#rumi-paging .page-btn:disabled:hover,
.rumiPaging .page-btn.inactive:hover,
.rumiPaging .page-btn:disabled:hover {
    background: #bbb !important;
    color: #fff !important;
    border-color: #bbb !important;
}
/* 레이아웃 및 간격 조정 */

/* 첫 번째 페이지 번호 좌측 여백 */
#rumi-paging .page-num:first-of-type,
.rumiPaging .page-num:first-of-type {
    margin-left: 20px;
}

/* 마지막 페이지 번호 우측 여백 */
#rumi-paging .page-num:last-of-type,
.rumiPaging .page-num:last-of-type {
    margin-right: 20px;
}

/* 화살표 버튼 간격 */
#rumi-paging .arrow-left,
.rumiPaging .arrow-left {
    margin-right: 24px;
}

#rumi-paging .arrow-right,
.rumiPaging .arrow-right {
    margin-left: 20px;
}

/* 모바일 페이지 버튼 */
#rumi-paging .page-btn-mobile,
.rumiPaging .page-btn-mobile {
    display: none;
    width: 80px !important;
    font-size: 12px;
}

/* 새로고침 버튼 숨김 */
.rumi-btn-reload {
    display: none;
}

/* 반응형 디자인 */

/* 태블릿 크기 (768px 이하) */
@media all and (max-width: 767px) {
    /* 데스크탑 화살표 버튼 숨김 */
    #rumi-paging .page-btn-arrow,
    .rumiPaging .page-btn-arrow {
        display: none;
    }

    /* 모바일 이전/다음 버튼 표시 */
    #rumi-paging .page-btn-mobile,
    .rumiPaging .page-btn-mobile {
        display: inline-block;
    }

    /* 페이지 번호들 간격 조정 */
    #rumi-paging .page-num:first-of-type,
    .rumiPaging .page-num:first-of-type {
        margin-left: 10px;
    }

    #rumi-paging .page-num:last-of-type,
    .rumiPaging .page-num:last-of-type {
        margin-right: 10px;
    }
}

/* 모바일 크기 (479px 이하) */
@media all and (max-width: 479px) {
    /* 모든 화살표 버튼 숨김 */
    #rumi-paging .page-btn-arrow,
    .rumiPaging .page-btn-arrow {
        display: none !important;
    }

    /* 페이지 번호 크기 조정 */
    #rumi-paging .page-num,
    .rumiPaging .page-num {
        min-width: 28px;
        height: 28px;
        line-height: 26px;
        font-size: 12px;
        margin-right: 3px;
    }

    /* 모바일 버튼 크기 조정 */
    #rumi-paging .page-btn-mobile,
    .rumiPaging .page-btn-mobile {
        width: 70px !important;
        height: 28px;
        line-height: 26px;
        font-size: 11px;
    }

    /* 컨테이너 여백 조정 */
    #rumi-paging,
    .rumiPaging {
        margin: 15px 0;
    }
}

/* 고대비 모드 지원 (웹접근성) */
@media (prefers-contrast: high) {
    #rumi-paging button,
    .rumiPaging button {
        border-width: 2px;
    }

    #rumi-paging .page-current,
    .rumiPaging .page-current {
        background: #000 !important;
        color: #fff !important;
        border-color: #000 !important;
    }

    #rumi-paging button:focus,
    .rumiPaging button:focus {
        outline-width: 3px !important;
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    #rumi-paging,
    .rumiPaging {
        color: #fff;
    }

    #rumi-paging button,
    .rumiPaging button {
        background: #333;
        color: #fff;
        border-color: #666;
    }

    #rumi-paging .page-num,
    .rumiPaging .page-num {
        background: #444;
    }

    #rumi-paging .page-btn.active,
    .rumiPaging .page-btn.active {
        background: #666;
        border-color: #666;
    }

    #rumi-paging button:focus,
    .rumiPaging button:focus {
        outline-color: #4dabf7 !important;
    }
}

/* 애니메이션 감소 설정 고려 (웹접근성) */
@media (prefers-reduced-motion: reduce) {
    #rumi-paging button,
    .rumiPaging button {
        transition: none;
    }
}

/* 프린트 스타일 */
@media print {
    #rumi-paging,
    .rumiPaging {
        display: none;
    }
}