@charset "UTF-8";
/* ebill components — publish table.css + tab.css + fixed-wrap.css 이식 */
/* 공통: 테이블 */
.custom-table {border-top: 3px solid var(--table-thead-br);border-bottom:1px solid var(--table-border-color);border-left:1px solid var(--table-border-color);border-right:1px solid var(--table-border-color);}
.custom-table.ver-border {border-left:1px solid var(--table-border-color);border-right:1px solid var(--table-border-color)}
.custom-table.no-br {border-left:0;border-right:0;}
.custom-table table {width:100%;}
.custom-table th {padding:16px;background-color:var(--table-cell-bg);vertical-align:middle;}
.custom-table th + th {border-left:1px solid var(--table-border-color);}
.custom-table td {padding:16px;vertical-align:middle;}
.custom-table th + td ,
.custom-table td + td {border-left:1px solid var(--table-border-color);}
.custom-table tr + tr {border-top:1px solid var(--table-border-color);}
.custom-table tr.no-br {border:0;}
.custom-table th.bl,
.custom-table td.bl {border-left:1px solid var(--table-border-color);}
.custom-table thead {border-bottom:1px solid var(--table-border-color);}
.th-wrap {display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--txt-size02);font-weight:var(--fw-bold);color:var(--table-text-color);}
.td-wrap {flex-wrap:wrap;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--txt-size02);font-weight:var(--fw-medium);color:var(--color-black);}
.td-wrap.text-left {text-align:left;}
.td-wrap.column {flex-direction:column;}
.td-wrap.start {justify-content:flex-start;}
.td-wrap.wrap {flex-wrap:wrap;}
.td-wrap.al-start {align-items:flex-start;}
.td-wrap.gap-sm {gap:12px;}
.td-wrap a {display:block;width:100%}
/* 데이터 없을 때 */
tr.no-data .td-wrap {padding:40px 20px 60px;font-size:var(--txt-size04)}

@media (max-width:767px) {
    /* 테이블 */
    .custom-table td {padding:16px 0;}
    .custom-table tbody > tr td.mo-no-pd {padding-bottom:0}
    .custom-table.notice td {padding:16px 48px 16px 0;}
    .custom-table.no-mo-bb {border-bottom:0;}
    /* 검색 */
    .search-wrap {flex-wrap:wrap;}
    .search-wrap .select-wrap {width:100%;}
    .search-box {gap:0;width:100%;}
    .search-box .input-wrap {width:calc(100% - 82px);}
    .search-box .input-wrap input {border-radius:4px 0 0 4px;border-right:0;}
    .search-box .btn {border-radius:0 4px 4px 0;}
    /* 테이블 pd 너비 */
    .custom-table.sm th {padding:12px;}
    .custom-table.sm td {padding:12px;}
    /* 데이터 없을 때 */
    tr.no-data .td-wrap {padding:40px;font-size:var(--txt-size02)}
    /* 테이블 작은 사이즈 */
    .custom-table.mo-turn-sm th {padding:12px 6px;}
    .custom-table.mo-turn-sm td {padding:12px 6px;}

}

.custom-table.card-ver {padding:16px;border-radius: 4px;border:1px solid var(--border-color);}
.custom-table.card-ver tbody > tr:first-child td {padding-top:0}
.custom-table.card-ver tbody > tr:last-child td {padding-bottom:0}
.custom-table.card-ver tr {position:relative;}

/* 페이지네이션 */
.pagination-wrap {width:100%;display:flex;justify-content:center;margin-top:40px;}
.pagination {display:flex;align-items:center;}
.pagination [class^="pg_"] {width:46px;height:46px;}
.pagination ul {display:flex;align-items:center;margin:0 40px;}
.pagination ul > li > button {min-width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:var(--txt-size02);font-weight:var(--fw-medium);color:var(--color-black);}
.pagination ul > li > button.active {background-color:var(--color-light-gray3);border-radius:4px;}
.pg_first {background:url('/culture/common/images/ico/pg_first.svg') center center no-repeat;background-size:36px;}
.pg_prev {background:url('/culture/common/images/ico/pg_prev.svg') center center no-repeat;background-size:36px;}
.pg_next {background:url('/culture/common/images/ico/pg_next.svg') center center no-repeat;background-size:36px;}
.pg_last {background:url('/culture/common/images/ico/pg_last.svg') center center no-repeat;background-size:36px;}

@media (max-width:767px) {
    .pagination-wrap {margin-top:28px;}
    .pagination [class^="pg_"] {width:34px;height:34px;}
    .pagination ul {margin:0 7px;}
    .pagination ul > li > button {min-width:34px;height:34px;font-size:var(--txt-size02);}
    .pg_first {background-size:34px;}
    .pg_prev {background-size:34px;}
    .pg_next {background-size:34px;}
    .pg_last {background-size:34px;}
}

.table-btn-wrap {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;  }

@media (max-width:767px) {
    .table-btn-wrap {flex-direction:row-reverse;gap:12px;align-items:flex-end;}
}
/* 탭 */



/* 4. 탭 */
.tab-wrap {position:relative;}
.tab-wrap[data-tab="twin"] {z-index:0;}
.tab-wrap[data-tab="fraternal"] {z-index:1;}
.tab-wrap .first-depth {display:flex;align-items:stretch;justify-content:center;}
.tab-wrap .first-depth > li {flex:1;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);}
.tab-wrap .first-depth > li > .tab-box {display:none;}
.tab-wrap .first-depth > li.active > .tab-box {display:block;}
.tab-box {min-height:500px;padding-top:40px;position:absolute;left:0;width:100%;display: flow-root;}
.tab-box.pd-ver{}
.tab-wrap .first-depth > li > button {width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:16px;text-align:center;font-size:var(--txt-size04);font-weight:var(--fw-medium);color:var(--color-gray);}
/*.tab-wrap .first-depth > li + li {border-left:1px solid var(--border-color);}*/
.tab-wrap .first-depth > li:last-child {border-right:1px solid var(--border-color);border-radius:0 4px 4px 0;overflow:hidden;}
.tab-wrap .first-depth > li:first-child {border-left:1px solid var(--border-color);border-radius:4px 0 0 4px;overflow:hidden;}
.tab-wrap .first-depth > li:first-child:last-child {border-radius: 4px;}
.tab-wrap .first-depth > li.active {border-width:2px;border-color:var(--color-primary-dark);border-left:2px solid var(--color-primary-dark);}
.tab-wrap .first-depth > li:last-child.active {border-right-color:var(--color-primary-dark);}
.tab-wrap .first-depth > li:first-child.active {border-right-color:var(--color-primary-dark);border-left-color:var(--color-primary-dark);}
.tab-wrap .first-depth > li.active > button {font-weight:var(--fw-bold);color:var(--color-primary-dark);}
/* 링크형 탭(페이지 이동) — button 탭과 동일한 표시 (culture guide 이용안내/Q&A/담당자연락처) */
.tab-wrap .first-depth > li > a.tab {width:100%;height:100%;display:flex;justify-content:center;align-items:center;padding:16px;text-align:center;font-size:var(--txt-size04);font-weight:var(--fw-medium);color:var(--color-gray);}
.tab-wrap .first-depth > li.active > a.tab {font-weight:var(--fw-bold);color:var(--color-primary-dark);}

/* 탭 요소가 하나일 경우 */
.tab-wrap .first-depth.only > li > button {display:none;}
.tab-wrap .first-depth.only .tab-box {top:0;}
.tab-wrap .first-depth.only > li {height:0;border:0;}
.tab-wrap .first-depth.only > li.active> button {border:0;height:0;}
.tab-wrap .first-depth.only > li.active .tab-box{z-index: 1;}

@media (max-width:767px) {
    .tab-box.pd-ver{padding:20px;}
    .tab-wrap[data-tab="fraternal"] .first-depth {position: relative;display: block;;}
    .tab-wrap[data-tab="fraternal"] .first-depth > li {
        display: none;
        height: 48px; /* 모바일에서 높이 조정 */
        margin-bottom: -1px; /* border 겹침 방지 */
        border: none;
        border-radius:0;
        border:0
    }
    .tab-wrap[data-tab="fraternal"]  .first-depth > li:first-child {border-radius:0;}

    .tab-wrap[data-tab="fraternal"]  .first-depth > li > button {
        height: 100%;
        padding: 0 16px; /* 좌우 여백 추가 */
        justify-content: space-between; /* 텍스트와 화살표 정렬 */
        z-index: 1000;
        background-color:var(--color-white);
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth > li.active {
        display: block;
        /*border: 1px solid var(--border-color);*/

    }
    .tab-wrap[data-tab="fraternal"] .first-depth > li.active > button {
        background-color:var(--color-primary);
        color:var(--color-white);
    }

    .tab-wrap[data-tab="fraternal"] .first-depth > li > button {
        color:var(--color-text);
    }
        /* 열린 상태 스타일 */
    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li {
        display: block;
        /*border: 1px solid var(--border-color);*/
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li.active {
        border-bottom: none;
        border-radius:  0;
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li:not(.active) {
        border-top: none;
    }

    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li:last-child {
        /*border-radius: 0 0 4px 4px;*/
        /*border-bottom: 1px solid var(--border-color);*/
        margin-bottom: 0;
    }
    .tab-wrap[data-tab="fraternal"]  .first-depth > li + li {border-left:0;}

    /* 화살표 아이콘 */
    .tab-wrap[data-tab="fraternal"]  .first-depth > li.active > button::after {
        content: '';
        width:20px;
        height:20px;
        background:url("/culture/common/images/ico/ico_arrow_down.svg") no-repeat center center;
        background-size: 20px;
    }

    /* 열린 상태의 화살표 회전 */
    .tab-wrap[data-tab="fraternal"]  .first-depth.opened > li.active > button::after {
        transform: rotate(180deg);
    }

    .tab-box {
        z-index: -1;
        top: 48px; /* 모바일에서 탭 박스 위치 조정 */
    }

    .tab-wrap[data-tab="twin"] .first-depth > li > button {height:36px;padding:8px;font-size:var(--txt-size02);}
    .tab-wrap[data-tab="twin"] .tab-box {top:56px;padding-top:0;}
}

/* 고정 결제 */
.mo-fixed-bottom-wrap {display:flex;align-items:center;justify-content:center;flex-direction:column;}
.mo-fixed-btn-wrap {display:flex;align-items:center;gap:12px;margin-top:40px;}
.mo-fixed-bottom-wrap > .total-wrap {display:flex;align-items:center;justify-content:center;width:100%;padding:14px;border:1px solid var(--border-color);}
.mo-fixed-bottom-wrap.no-bt > .total-wrap{border-top:0;width:100%;}
.total-preset {font-size:var(--txt-size04);font-weight:var(--fw-medium);color:var(--color-black);}
.total-preset.fw-medium {font-weight:var(--fw-medium);}
.total-text {font-size:var(--txt-size05);color:var(--color-red);font-weight:var(--fw-bold);}
.total-preset-sm {font-size:var(--txt-size02);font-weight:var(--fw-medium);color:var(--color-black);}

@media (max-width:767px) {
    .mo-fixed-bottom-wrap {position:fixed;bottom:0;left:0;width:100%;background-color:var(--color-white);z-index:100;}
    .mo-fixed-bottom-wrap > .total-wrap {justify-content:space-between;}
    .mo-fixed-bottom-wrap > .total-wrap > .sum-wrap {width: 100%;justify-content:space-between;}

    .mo-fixed-bottom-wrap > .total-wrap > .sum-wrap > .flex-wrap {gap:4px;flex-wrap:wrap;text-align:right;}
    .mo-fixed-bottom-wrap > .total-wrap > .sum-wrap > .flex-wrap > span {text-align:right;}
    .mo-fixed-bottom-wrap.no-bt > .total-wrap {border-top:1px solid var(--border-color);}
    .total-preset {font-weight:var(--fw-semi-bold);font-size:var(--txt-size03);}
    .total-text {font-size:var(--txt-size03);}
    .mo-fixed-btn-wrap {padding:20px 12px;width:100%;margin-top:0;gap:8px;}
    .mo-fixed-btn-wrap > .btn.size-nm {min-width:0;flex:1;}
}

/* bottom sheet dim */
.bottom-sheet {position: fixed;inset: 0;z-index: 1000;display: none;align-items: flex-end;justify-content: center;}
.bottom-sheet.active {display: none!important;}

/* 열렸을 때 */
.bottom-sheet.active {
    display: flex;
}

/* bottom sheet 본체 */
.bottom-sheet-wrap {position: relative;width: 100%;max-width: 430px;background: var(--color-white);border-radius: 20px 20px 0 0;overflow: hidden;box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);padding-top: 17px;padding-bottom: calc(12px + env(safe-area-inset-bottom));}

/* 상단 회색 핸들 */
.bottom-sheet-wrap::before {content: "";position: absolute;top: 12px;left: 50%;width: 52px;height: 5px;border-radius: 999px;background: #efefef;transform: translateX(-50%);}

/* 상단 영역 */
.bottom-top {height: 64px;display: flex;justify-content: space-between;gap:12px;align-items: center;padding: 0 20px;box-sizing: border-box;}
.bottom-top p {margin: 0;font-size: 16px;font-weight: var(--fw-medium);color: var(--color-black);text-align: center;}

/* 본문 */
.bottom-body {padding: 8px 20px 8px;}
/* 하단 버튼 영역 */
.bottom-btn {padding: 12px 20px 8px;}
.bottom-btn > .btn {flex:1;}
@media (max-width:767px) {
    .bottom-sheet.active {display: flex!important;}
}

/* ------------------------------------------------------------------ */
/* ebill 추가 컴포넌트 */
/* 빈 상태 (데이터 0건) — tr.no-data 와 동일 톤의 블록형 */
.empty {display:flex;align-items:center;justify-content:center;padding:60px 20px;font-size:var(--txt-size04);color:var(--color-gray);font-weight:var(--fw-medium);}

/* 금액 표기 */
.amount {font-weight:var(--fw-semi-bold);color:var(--color-black);white-space:nowrap;}
.amount--total {font-size:var(--txt-size05);font-weight:var(--fw-bold);color:var(--color-primary-dark);}
.amount--unpaid {color:var(--color-red);}

/* native date input — 아이콘은 입력창 배경(ico_calendar) 하나만 사용하고,
   브라우저 기본 인디케이터 글리프는 투명 처리(클릭 영역은 유지해 네이티브 캘린더 오픈) */
.date > input[type="date"] {padding:0 44px 0 12px;}
.date > input[type="date"]::-webkit-calendar-picker-indicator {width:26px;height:26px;margin-right:-8px;opacity:0;cursor:pointer;}

/* 로딩 오버레이 — 비동기 조회 중 표시. .active 로 노출 (header z-index:10000 위) */
.loading-overlay {display:none;position:fixed;inset:0;z-index:10010;flex-direction:column;align-items:center;justify-content:center;gap:12px;background-color:rgba(255,255,255,0.6);}
.loading-overlay.active {display:flex;}
.loading-overlay .spinner {width:48px;height:48px;border:4px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;animation:loading-spin 0.8s linear infinite;}
.loading-overlay .loading-text {font-size:var(--txt-size02);font-weight:var(--fw-medium);color:var(--color-gray4);}
@keyframes loading-spin {to {transform:rotate(360deg);}}