/* ==========================================================================
   월별 후원 내역 스타일
   팔레트: p1 #F05B89 / p2 #F6A8BA / y1 #FFD166
           g1 #343232 / g3 #636466 / g4 #999999 / gbg #CCCCCC
   ========================================================================== */

/* ── 전체 래퍼 ─────────────────────────────────────────────────────────── */
.monthly-donate-wrap {
    margin-top: 8px;
}

/* ── 요약 노티스 박스 ──────────────────────────────────────────────────── */
.donate-notice {
    background: #FFF2D2;
    padding: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #2a54a1;
    margin-bottom: 24px;
    line-height: 1.7;
    border-radius: 4px;
    text-align: center;
}
.donate-notice strong {
    font-weight: 700;
    color: #2a54a1;
}

/* 구버전 DB HTML 호환: .monthly-donate-wrap 안의 h2 */
.monthly-donate-wrap > h2 {
    background: #FFF2D2;
    padding: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #2a54a1;
    margin-bottom: 24px;
    line-height: 1.7;
    border-radius: 4px;
    text-align: center;
}

/* 구버전 DB HTML 호환: page-content 안에 직접 h2 + donate_wrap 구조일 때 */
.page-content:has(#donate_wrap) > h2,
.page-content:has(#tabs) > h2 {
    background: #FFF2D2 !important;
    padding: 20px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2a54a1 !important;
    margin-bottom: 24px !important;
    line-height: 1.7 !important;
    border-radius: 12px !important;
    text-align: center !important;
}

/* ── 커스텀 탭 네비게이션 ──────────────────────────────────────────────── */
#tabs > ul {
    display: flex;
    border-bottom: 3px solid #ddd;
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
}
#tabs > ul li {
    margin: 0;
}
#tabs > ul li a {
    display: block;
    padding: 12px 18px;
    color: #636466;
    text-decoration: none;
    font-size: 18px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    line-height: 1.4;
}
#tabs > ul li.active > a {
    color: #F05B89;
    border-bottom-color: #F05B89;
    font-weight: 700;
}
#tabs > ul li:not(.active) > a:hover {
    color: #F05B89;
}
.tab-count {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    margin-left: 3px;
}
#tabs > ul li.active .tab-count {
    color: #F6A8BA;
    font-weight: 400;
}

/* ── 탭 패널 표시/숨김 ─────────────────────────────────────────────────── */
#tabs > div[id^='tabs-'] {
    display: none;
}
#tabs > div[id^='tabs-'].active {
    display: block;
}

/* ── 탭 내부 소제목 (신용카드(정기/일시) / 총 00원) ────────────────────── */
#tabs > div[id^='tabs-'] > h3 {
    font-size: 18px;
    font-weight: 600;
    color: #F05B89;
    margin-bottom: 16px;
    text-align: center;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end 
{margin: auto !important;}
/* ── 기부 테이블 (일시 #tabs / 정기 #donate_wrap 공통) ─────────────────── */
#tabs table.dataTable,
#donate_wrap table.dataTable {
    width: 100% !important;
    max-width: 588px;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
#tabs table.dataTable thead th,
#donate_wrap table.dataTable thead th {
    background: #FACDDB;
    color: #CB2D5A;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 16px;
    border: none;
    white-space: nowrap;
}
/* DataTables 정렬 아이콘 */
#tabs table.dataTable thead th.sorting::after,
#tabs table.dataTable thead th.sorting_asc::after,
#tabs table.dataTable thead th.sorting_desc::after,
#tabs table.dataTable thead th.dt-ordering-asc::after,
#tabs table.dataTable thead th.dt-ordering-desc::after,
#donate_wrap table.dataTable thead th.sorting::after,
#donate_wrap table.dataTable thead th.sorting_asc::after,
#donate_wrap table.dataTable thead th.sorting_desc::after,
#donate_wrap table.dataTable thead th.dt-ordering-asc::after,
#donate_wrap table.dataTable thead th.dt-ordering-desc::after {
    opacity: 0.7;
    color: #fff;
}
#tabs table.dataTable thead th.sorting::before,
#tabs table.dataTable thead th.sorting_asc::before,
#tabs table.dataTable thead th.sorting_desc::before,
#tabs table.dataTable thead th.dt-ordering-asc::before,
#tabs table.dataTable thead th.dt-ordering-desc::before,
#donate_wrap table.dataTable thead th.sorting::before,
#donate_wrap table.dataTable thead th.sorting_asc::before,
#donate_wrap table.dataTable thead th.sorting_desc::before,
#donate_wrap table.dataTable thead th.dt-ordering-asc::before,
#donate_wrap table.dataTable thead th.dt-ordering-desc::before {
    opacity: 0.4;
    color: #fff;
}
#tabs table.dataTable tbody tr td,
#donate_wrap table.dataTable tbody tr td {
    padding: 12px 16px !important;
    font-size: 16px !important;
    border-bottom: 1px solid #ccc !important;
    color: #636466 !important;
}
#tabs table.dataTable tbody tr:hover td,
#donate_wrap table.dataTable tbody tr:hover td {
    background: #FFF0F5 !important;
}

/* ── DataTables UI 요소 숨김 ──────────────────────────────────────────── */
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dt-length,
.dt-search,
.dt-info {
    display: none !important;
}

/* ── DataTables 2.x 페이지네이션 → 테마 스타일 ──────────────────────── */
/* DataTables 원본 CSS 선택자: div.dt-container .dt-paging .dt-paging-button (특이도 높음) */
.dt-paging {
    display: flex !important;
    justify-content: center !important;
    margin-top: 28px !important;
}
div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    color: #343232 !important;
    background: #eee !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s !important;
    padding: 0 8px !important;
    line-height: 1 !important;
    font-family: inherit !important;
    box-shadow: none !important;
    margin: 0 2px !important;
    text-decoration: none !important;
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: #F05B89 !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
}
div.dt-container .dt-paging .dt-paging-button:not(.current):not(.disabled):hover {
    background: #F6A8BA !important;
    color: #fff !important;
    border: none !important;
}
div.dt-container .dt-paging .dt-paging-button.first,
div.dt-container .dt-paging .dt-paging-button.last,
div.dt-container .dt-paging .dt-paging-button.previous,
div.dt-container .dt-paging .dt-paging-button.next {
    background: #FDEBF1 !important;
    color: #F05B89 !important;
}
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
    opacity: 0.4 !important;
    cursor: default !important;
    pointer-events: none !important;
    background: #eee !important;
    color: #343232 !important;
}

/* ── DataTables 1.x 페이지네이션 폴백 ────────────────────────────────── */
.dataTables_paginate {
    display: flex !important;
    justify-content: center !important;
    margin-top: 28px !important;
}
.dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    color: #343232 !important;
    background: #eee !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    margin: 0 2px !important;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: #F05B89 !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 700 !important;
}
.dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
    background: #F6A8BA !important;
    color: #fff !important;
    border-color: transparent !important;
}
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next,
.dataTables_paginate .paginate_button.first,
.dataTables_paginate .paginate_button.last {
    background: #FDEBF1 !important;
    color: #F05B89 !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.4 !important;
    cursor: default !important;
    pointer-events: none !important;
    background: #eee !important;
    color: #343232 !important;
}
.dataTables_paginate .ellipsis {
    background: transparent !important;
    pointer-events: none !important;
    color: #343232 !important;
}

/* ── 정기 후원 테이블 (donate_wrap) → 공통 스타일로 통합됨 (위 참조) ── */