@charset "UTF-8";

/* =============================================
   CSS 변수 (전역 디자인 토큰)
   ============================================= */
:root {
    /* 폰트 크기 - clamp(최소, 기본, 최대) */
    --fs-base: clamp(13px, 1.3vw, 14px);
    --fs-md:   clamp(14px, 1.5vw, 15px);
    --fs-xl:   clamp(18px, 2vw,   22px);

    /* 폰트 굵기 */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold:   700;

    /* 텍스트 색상 */
    --color-text:        #000000;
    --color-text-sub:    #555555;
    --color-text-muted:  #999999;
    --color-accent:      #340EC1;

    /* 배경·보더 */
    --color-bg-page:     #ffffff;
    --color-bg-input:    #ffffff;
    --color-border:      #919191;
    --color-border-focus:#340EC1;

    /* 폼 */
    --input-h:           40px;
    --input-radius:      6px;
    --input-border:      1px solid var(--color-border);
    --label-w:           clamp(120px, 19vw, 130px);

    /* 섹션 */
    --section-gap:       clamp(24px, 3vw, 40px);
    --row-gap:           clamp(8px,  1vw, 14px);
    --col-gap:           clamp(20px, 4vw, 60px);
}

/* =============================================
   Reset & Base
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'NanumSquareAcr', 'Malgun Gothic', sans-serif;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
}

ul, ol  { list-style: none; }

a       { color: inherit; text-decoration: none; }
a:hover,
a:focus { text-decoration: none; outline: none; }

img, video { display: block; max-width: 100%; height: auto; }

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
    appearance: none;
    -webkit-appearance: none;
}

button { cursor: pointer; }

input::placeholder,
textarea::placeholder { color: var(--color-text-muted); }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: 1.3; }

hr {
    border: none;
    border-top: 1px solid var(--color-border);
}

fieldset { border: none; padding: 0; margin: 0; }

/* =============================================
   공통 페이지 레이아웃
   ============================================= */
.main-content {
    max-width: 1340px;
    margin: 50px auto 20px;
    padding: 0 20px;
}

@media (max-width: 1300px) {
 
}

/* 페이지 타이틀 */
.page-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    padding-left: 12px;
    border-left: 4px solid var(--color-accent);
    margin-bottom: clamp(70px, 3vw, 36px);
}

/* 섹션 제목 */
.section-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: clamp(12px, 2vw, 20px);
}

/* =============================================
   공통 폼 컴포넌트
   ============================================= */

/* 라벨 */
.form-label {
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    color: var(--color-text-sub);
    min-width: var(--label-w);
    flex-shrink: 0;
    white-space: nowrap;
}

/* 인풋 */
.form-input {
    height: var(--input-h);
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--color-bg-input);
    font-size: var(--fs-base);
    color: var(--color-text);
    padding: 0 10px;
    width: 100%;
    transition: border-color 0.15s;
}

.form-input:focus {
    border-color: var(--color-border-focus);
    outline: none;
}

/* 셀렉트 */
.form-select {
    height: var(--input-h);
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--color-bg-input)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
        no-repeat right 10px center;
    font-size: var(--fs-base); 
    padding: 0 32px 0 10px;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s;
}

/* 값이 선택된 경우 검은색 */
.form-select.has-value {
    color: var(--color-text);
}

/* 드롭다운 옵션은 항상 검은색 */
.form-select option {
    color: var(--color-text);
}

.form-select:focus {
    border-color: var(--color-border-focus);
    outline: none;
    box-shadow: none !important;
}


/* 제출 버튼 */
.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    padding: 0 clamp(32px, 5vw, 60px);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    background: var(--color-bg-input);
    border: var(--input-border);
    border-radius: var(--input-radius);
    transition: background 0.15s, color 0.15s;
}

.btn-submit:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* =============================================
   공통 필터 섹션
   ============================================= */
.filter-section {
    margin-bottom: var(--section-gap); 
    overflow: hidden;
    background: var(--color-bg-input);
}

/* 행 묶음 + 조회 버튼을 가로로 배치하는 래퍼 */
.filter-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* 행들만 묶는 컨테이너 */
.filter-rows {
    flex: 1;
    min-width: 0;
}

/* 각 필터 행 */
.filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(8px, 1.5vw, 16px); 
    width: 100%;
}

.filter-row:first-child {
    margin-bottom: 20px; 
}


.filter_fst_line {
    flex: 1;
    min-width: 0;
}

.filter_fst_line .filter-input {
    width: 100%;
    min-width: 0;
}
 
/* 2행: 각 그룹이 균등하게 가로를 채움 */
.flex_1 {
    flex: 1;
}
/* .filter-row--fill {
    flex-wrap: nowrap;
} */

.filter-row--fill .filter-group {
    flex: 1;
    min-width: 0;
}

.filter-select,
.filter-row--fill .filter-input {
    width: 100%;
    min-width: 0;
}

/* label + input 한 쌍 */
.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.filter-label {
    min-width: 45px;
    font-size: var(--fs-base);
    color: var(--color-text);
    white-space: nowrap;
    font-weight: var(--fw-normal);
    flex-shrink: 0;
}

/* 필터 인풋 */
.filter-input {
    height: var(--input-h);
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--color-bg-input);
    font-size: var(--fs-base);
    color: var(--color-text);
    padding: 0 10px;
    transition: border-color 0.15s;
    text-align: center;
}

.filter-input:focus {
    border-color: #340ec170;
    outline: none;
    box-shadow: 1px 1px 5px #340ec13d; 
    outline: none;
}

.filter-input--date {
    width: clamp(140px, 23vw, 178px);
}

 

/* 필터 셀렉트 */
.filter-select {
    height: var(--input-h);
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--color-bg-input)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
        no-repeat right 8px center;
    font-size: var(--fs-base);
    color: var(--color-text-muted);
    padding: 0 28px 0 10px;
    cursor: pointer;
    min-width: clamp(72px, 9vw, 110px);
    transition: border-color 0.15s;
    text-align: center;
}

.filter-select.has-value { color: var(--color-text); }
.filter-select option    { color: var(--color-text); }
.filter-select:focus     {     
    border-color: #340ec170;
    outline: none;
    box-shadow: 1px 2px 5px #340ec13d; 
}

/* 기간 단축 버튼 묶음 */
.filter-btn-group {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-filter {
    min-width: 75px;
    height: var(--input-h);
    padding: 0 clamp(8px, 1.2vw, 14px);
    font-size: var(--fs-base);
    color: var(--color-text-sub);
    background: var(--color-bg-input);
    border: var(--input-border);
    border-radius: var(--input-radius);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-filter:hover,
.btn-filter.active {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* 조회 버튼: filter-inner 안에서 두 행을 세로로 채움 */
.btn-search {
    flex-shrink: 0;
    padding: 0 clamp(20px, 3vw, 36px);
    margin-left: 10px;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--color-text);
    background: var(--color-bg-input);
    border: none;
    border: 1px solid var(--color-border);
    border-radius: var(--input-radius);
    white-space: nowrap;
    align-self: stretch;
    transition: background 0.15s, color 0.15s;
}

.btn-search:hover {
    background: var(--color-accent);
    color: #fff;
}

/* =============================================
   요약 통계 테이블
   ============================================= */
.summary-wrap {
    margin-bottom: var(--section-gap);
    border: 1px solid var(--color-border);
    overflow: hidden;
    border-right: none;
    border-left: none;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.summary-table th,
.summary-table td {
    padding: 10px 12px;
    font-size: var(--fs-base);
    text-align: center;
    border-right: 1px solid var(--color-border);
}

.summary-table th:last-child,
.summary-table td:last-child {
    border-right: none;
}

.summary-table thead th { 
    font-weight: var(--fw-bold);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.summary-table tbody th {
    font-weight: var(--fw-bold); 
}
.summary-table tbody td {
    color: var(--color-text);
    background: var(--color-bg-input);
}

/* =============================================
   DataTable 컨트롤 영역
   ============================================= */
.table-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.page-size-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-select {
    height: var(--input-h);
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--color-bg-input)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
        no-repeat right 8px center;
    font-size: var(--fs-base);
    color: var(--color-text);
    padding: 0 28px 0 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    width: 64px;
}

.page-size-label {
    font-size: var(--fs-base);
    color: var(--color-text-sub);
    white-space: nowrap;
}

.table-btn-group {
    display: flex;
    gap: 6px;
}

.btn-table {
    height: var(--input-h);
    padding: 0 clamp(10px, 1.5vw, 16px);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: var(--input-radius);
    white-space: nowrap;
    transition: opacity 0.15s;
    border: none;
    cursor: pointer;
}

.btn-print {
    background: #1C75BC;
    color: #fff;
}

.btn-excel {
     background: #2BB673;
    color: #fff;
}

.btn-table:hover { opacity: 0.85; }

/* DataTable 자체 버튼(엑셀/인쇄) - bootstrap5 스킨 없이 직접 스타일링 */
.dt-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.dt-buttons .dt-button {
    height: var(--input-h);
    padding: 0 clamp(10px, 1.5vw, 16px);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: #fff;
    border: none;
    border-radius: var(--input-radius);
    white-space: nowrap;
    cursor: pointer;
    transition: opacity 0.15s;
}


.dataTables_wrapper .dataTables_length {
    float: left;
}

.dt-buttons .buttons-print { background: #1C75BC; margin-left: 20px; }
.dt-buttons .buttons-excel { background: #2BB673;}

.dt-buttons .buttons-print span,
.dt-buttons .buttons-excel span { color: #fff;}

.dt-buttons .dt-button:hover:not(.disabled) { opacity: 0.85; }

.dt-buttons .dt-button.disabled {
    opacity: 0.5;
    cursor: default;
}

/* DataTable 래퍼 */
.table-wrap {
    overflow-x: auto;
}

/* DataTable 페이지네이션 - 흰색/보라색 포인트 */
.dataTables_paginate {
    margin-top: 14px;
    text-align: center;
}


.dataTables_paginate .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin: 0 3px;
    padding: 0 8px;
    border: 1px solid var(--color-accent);
    border-radius: 100px;
    background: #fff;
    color: var(--color-accent);
    font-size: var(--fs-base);
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}


.dataTables_paginate .paginate_button:not(.disabled) .page-link:hover {
    background: var(--color-accent);
    color: #fff;
}

.dataTables_paginate .paginate_button.active .page-link {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.dataTables_paginate .paginate_button.disabled .page-link {
    border-color: #fff;
    color: var(--color-text-muted);
    background: #fff;
    cursor: default;
}

.dataTables_paginate .page-link:focus {
    outline: 2px solid rgba(52, 14, 193, 0.35);
    outline-offset: 1px;
    box-shadow: none;
}


.dataTables_paginate .next .page-link,
.dataTables_paginate .previous .page-link {
    border: none;
    outline: none;
    transition: 0.3s;
}

.dataTables_paginate .next:not(.disabled) .page-link:hover,
.dataTables_paginate .previous:not(.disabled) .page-link:hover {
    background: #fff;
    color: var(--color-accent);
    font-weight: 700; 
}

table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
    background-color: none !important;
}
 
 

/* DataTable 본문 - 양옆 보더 없이 가로줄만 */
.table-wrap table.dataTable {
    border-collapse: collapse; 
}
div.dataTables_scrollHead table.dataTable {
    border-top: 2px solid #000;
}


.table-wrap table.dataTable thead th {
    padding: 12px 16px;
    font-size: var(--fs-base);
    font-weight: var(--fw-normal); 
    text-align: left;
    background: var(--color-bg-input);
    border: none;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.table-wrap table.dataTable tbody td {
    padding: 12px 16px;
    font-size: var(--fs-base); 
    text-align: left;
    background: var(--color-bg-input);
    border: none;
    border-bottom: 1px solid var(--color-border);
}


/* Select2 Style - filter-select와 동일한 디자인 */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: var(--input-h);
    border: var(--input-border);
    border-radius: var(--input-radius);
    background: var(--color-bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: var(--fs-base);
    color: var(--color-text);
    padding: 0 28px 0 10px;
    line-height: normal;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-muted);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: var(--input-h);
    right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #666 transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #666 transparent;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #340ec170;
    box-shadow: 1px 2px 5px #340ec13d;
}

.select2-dropdown {
    border: var(--input-border);
    border-radius: var(--input-radius);
    overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
    height: var(--input-h);
    border: var(--input-border);
    border-radius: var(--input-radius);
    font-size: var(--fs-base);
    color: var(--color-text);
    padding: 0 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--color-accent);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--color-bg-input);
    color: var(--color-text);
}


/* reward page */
.query-check {
    padding: 10px 0;
    margin-bottom: 30px;
    background-color: #eef7ff;
    text-align: center;
    font-weight: 600;
}

.query-check > p > span {
    font-size: 18px;
}



/* =============================================
   반응형 - 필터
   ============================================= */

/* 1280px 이하: filter_fst_line 2열 배치 */
@media (max-width: 1280px) {
    .filter_fst_line {
        flex: 1 0 calc(50% - 8px);
    }
}

/* 1110px ~ 769px: 2행 필터 2열로 줄바꿈 */
@media (max-width: 1110px) and (min-width: 769px) {
    .filter-row--fill {
        flex-wrap: wrap;
    }
    .filter-row--fill .filter-group {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    
    .filter-row--fill .filter-select,
    .filter-row--fill .filter-input {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-row--fill {
        flex-wrap: wrap;
    }
    .filter-group {
        width: 100%;
    }
    .filter-row--fill .filter-group {
        flex: none;
        width: 100%;
    }
    .filter-input--date {
        flex: 1;
        min-width: 0;
        width: auto;
    }
    .filter-select,
    .filter-row--fill .filter-select {
        flex: 1;
        width: 100%;
    }
    .filter-btn-group {
        width: 100%;
    }
    .btn-filter {
        flex: 1;
    }

    .filter-label {
        min-width: 85px;
    }

}

@media (max-width: 480px) {
    /* 조회 버튼: 행 아래로 이동 */
    .filter-inner {
        flex-wrap: wrap;
    }
    .filter-rows {
        width: 100%;
    }
    .btn-search {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--color-border);
        padding: 10px 0;
        text-align: center;
        align-self: auto;
    }
    .filter-row--fill .filter-group {
        width: 100%;
    }
    .filter-input--date {
        flex: 1;
        min-width: 0;
        width: 100%;
    }
    .filter-btn-group {
        width: 100%;
    }
    .btn-filter {
        flex: 1;
    }
}