/* ==========================================================================
   TUI Grid & Pagination Custom Styles
   CMS곳간 디자인 시스템 (Figma "CMS곳간_리뉴얼" & node 262:4199 기반)
   ========================================================================== */

/* 1. TUI Grid 컨테이너 기본 스타일 */
.tui-grid-container {
    /*border-top-left-radius: var(--radius-base, 8px) !important;*/
    /*border-top-right-radius: var(--radius-base, 8px) !important;*/
    border-radius: var(--radius-base, 8px) !important;
    overflow: hidden !important; /* 내부 요소가 모서리 밖으로 튀어나오는 것 방지 */
    border: 1px solid var(--gary-100) !important; /* 필요시 전체 테두리 감싸기 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* 2. TUI Grid 내장 페이징 컨테이너 (.tui-grid-pagination) */
.tui-grid-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 1.143rem 0 0.571rem 0 !important; /* 16px 0 8px */
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    text-align: center !important;
}

.tui-grid-container .tui-grid-pagination {
    margin: 1.143rem 0 0.571rem 0 !important;
}

.pg-grid-wrap .tui-grid-pagination,
.pg-grid-wrap .tui-pagination {
    margin: 1.143rem 0 0.571rem 0 !important;
}

/* ==========================================================================
   3. TUI Pagination — Figma "Pagination" 컴포넌트 디자인 (node 262:4199)
   - 높이: 28px
   - 번호 버튼: 28px × 28px, border-radius: 12px (var(--radius-md))
   - 이전/다음: 18px 삼각형 SVG (이전 ◀, 다음 ▶)
   - 간격: 이전/다음과 번호 사이 20px, 번호 간 12px
   - 색상 토큰:
     * 기본 텍스트: var(--gary-500)
     * 호버 상태: bg var(--gary-100), 글자 var(--gary-900)
     * 활성(선택) 상태: bg var(--gary-200), 글자 var(--gary-900), font-weight: 500
     * 화살표 아이콘: fill #A6A6A6 (var(--gary-400)), 호버시 fill #121212 (var(--gary-900))
   - first / last 버튼: Figma 디자인 규격에 따라 미노출 (display: none)
   - 스프라이트 아이콘: 숨김 처리
   ========================================================================== */
.tui-pagination {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important; /* 번호 간 12px 간격 */
    line-height: normal !important;
    text-align: center !important;
    font-size: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* 3-1. 페이지 번호 버튼 기본 */
.tui-pagination .tui-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--radius-md) !important; /* 12px / 0.857rem */
    background-color: transparent !important;
    color: var(--gary-500) !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: var(--fs-b4) !important; /* 14px / 1.000rem */
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -0.28px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* 페이지 번호 호버 */
.tui-pagination .tui-page-btn:hover:not(.tui-is-selected):not(.tui-is-disabled):not(.tui-prev):not(.tui-next):not(.tui-first):not(.tui-last) {
    background-color: var(--gary-100) !important;
    color: var(--gary-900) !important;
}

/* 3-2. 활성(선택된) 페이지 */
.tui-pagination .tui-is-selected,
.tui-pagination strong.tui-page-btn,
.tui-pagination strong {
    background-color: var(--gary-200) !important;
    color: var(--gary-900) !important;
    font-weight: 500 !important;
    cursor: default !important;
    border: none !important;
}

.tui-pagination .tui-is-selected:hover,
.tui-pagination strong.tui-page-btn:hover {
    background-color: var(--gary-200) !important;
    color: var(--gary-900) !important;
}

/* 3-3. 이전 페이지 버튼 (◀ 18px 삼각형 SVG) */
.tui-pagination .tui-prev {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 8px !important; /* gap 12px + 8px = 20px 간격 */
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='12,3 6,9 12,15' fill='%23A6A6A6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background-image 0.15s ease, opacity 0.15s ease !important;
}

.tui-pagination .tui-prev:hover:not(.tui-is-disabled) {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='12,3 6,9 12,15' fill='%23121212'/%3E%3C/svg%3E") !important;
}

/* 3-4. 다음 페이지 버튼 (▶ 18px 삼각형 SVG) */
.tui-pagination .tui-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 8px !important; /* gap 12px + 8px = 20px 간격 */
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,3 12,9 6,15' fill='%23A6A6A6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background-image 0.15s ease, opacity 0.15s ease !important;
}

.tui-pagination .tui-next:hover:not(.tui-is-disabled) {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,3 12,9 6,15' fill='%23121212'/%3E%3C/svg%3E") !important;
}

/* 3-5. first / last 버튼 숨김 (피그마 디자인 스펙) */
.tui-pagination .tui-first,
.tui-pagination .tui-last {
    display: none !important;
}

/* 3-6. TUI 기본 스프라이트 아이콘 숨김 */
.tui-pagination [class*="tui-ico-"],
.tui-pagination .tui-ico-prev,
.tui-pagination .tui-ico-next,
.tui-pagination .tui-ico-first,
.tui-pagination .tui-ico-last,
.tui-pagination .tui-ico-ellip {
    display: none !important;
}

/* 3-7. 비활성화 상태 */
.tui-pagination .tui-is-disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* 3-8. 생략(Ellipsis) 버튼 */
.tui-pagination .tui-prev-is-ellip,
.tui-pagination .tui-next-is-ellip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--gary-400) !important;
    font-size: var(--fs-b4) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.tui-pagination .tui-prev-is-ellip::before,
.tui-pagination .tui-next-is-ellip::before {
    content: "···";
    font-weight: 700;
    font-size: var(--fs-b4);
    line-height: 1;
    letter-spacing: 1px;
}

.tui-pagination .tui-prev-is-ellip:hover,
.tui-pagination .tui-next-is-ellip:hover {
    background-color: var(--gary-100) !important;
    color: var(--gary-900) !important;
}

/* 3-9. tui-pagination.css 레거시 테두리 초기화 */
.tui-pagination .tui-first-child,
.tui-pagination .tui-last-child,
.tui-pagination .tui-first-child.tui-is-selected,
.tui-pagination .tui-last-child.tui-is-selected {
    border-left: none !important;
    border-right: none !important;
}

.tui-grid-btn-sorting {
    width: 16px !important;
    height: 24px !important;
    background-position: -86px -5px !important;
    border-radius: var(--radius-md) !important;
}

.tui-grid-cell-required {
    background-color: var(--primary-WT) !important;
}

/* 4. 세로 스크롤 비활성화 및 관리자 그리드 우측 더미 여백(17px) 및 헤더 제거 */
.tui-grid-no-scroll-y .tui-grid-rside-area .tui-grid-header-area,
.tui-grid-no-scroll-y .tui-grid-rside-area .tui-grid-body-area,
.tui-grid-no-scroll-y .tui-grid-rside-area .tui-grid-summary-area,
.pg-grid-wrap .tui-grid-rside-area .tui-grid-header-area,
.pg-grid-wrap .tui-grid-rside-area .tui-grid-body-area,
.pg-grid-wrap .tui-grid-rside-area .tui-grid-summary-area {
    margin-right: 0 !important;
}

.tui-grid-no-scroll-y .tui-grid-scrollbar-right-top,
.tui-grid-no-scroll-y .tui-grid-scrollbar-y-inner-border,
.tui-grid-no-scroll-y .tui-grid-scrollbar-y-outer-border,
.pg-grid-wrap .tui-grid-scrollbar-right-top,
.pg-grid-wrap .tui-grid-scrollbar-y-inner-border,
.pg-grid-wrap .tui-grid-scrollbar-y-outer-border {
    display: none !important;
    width: 0 !important;
}

/* 5. TUI Grid 행과 열 사이 구분 보더(수직 & 수평) 및 가독성 보장 */
.tui-grid-table .tui-grid-cell {
    border-right: 1px solid var(--gary-100) !important;
    border-bottom: 1px solid var(--gary-100) !important;
}

.tui-grid-table .tui-grid-cell-header {
    border-right: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-color: var(--gary-100);
}

/* 가장 우측 열의 테두리는 컨테이너 외곽선과 겹치지 않도록 초기화 */
.tui-grid-table tr > td:last-child,
.tui-grid-table tr > th:last-child {
    border-right: none !important;
}

/* 행 호버 효과 */
.tui-grid-row-hover .tui-grid-cell {
    background-color: var(--gary-50) !important;
}

.tui-grid-border-line-top {
    display: none !important;
}

.tui-grid-header-area {
    border-color: var(--gary-100) !important;
}

.tui-grid-no-scroll-x .tui-grid-border-line-bottom {
    display: none !important;
}