#board-container { max-width:1440px; margin:0 auto; padding:120px 20px; }


/* 데이터테이블 전체 컨테이너 */
.dataTable-wrapper {
    background: #ffffff;
    border-radius:0;
}
.dataTable-wrapper.no-footer .dataTable-container { margin:20px 0 0; }

/* 상단 커스텀 레이아웃 (총 개수 & 선택박스) */
.dt-top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dt-total {
    font-size: 15px;
    font-weight: 600;
    color: #2d3748;
}

#total-count { color: #4c51bf; /* 세련된 인디고 블루 */ }
.dataTable-wrapper .dataTable-top {  }
.dt-select-box { display:flex; align-items:center; gap:0 8px; }
.dt-select-box select { width: 100px;
    border: 1px solid #e2e8f0;
    padding: 5px 15px;
    border-radius: 4px; }

    /* 테이블 본체 디자인 */
.dataTable-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    padding:0;
}
.dataTable-table thead tr { background-color:#fff; }

/* 헤더 디자인 */
.dataTable-table thead th {
    background: #f8fafc !important;
    color: #333 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    transition: background 0.2s;
}

.dataTable-table thead th:hover {
    background: #edf2f7 !important;
}

/* 셀 디자인 */
.dataTable-table tbody td {
    padding: 18px 16px !important;
    border-bottom: 1px solid #e7e9eb !important;
}
.dataTable-table tbody td a { display:inline-flex; align-items:center; gap:0 4px; font-size: 15px !important; color: #4a5568 !important; word-wrap: break-word; }
.dataTable-table tbody td a span { display:inline-block;  vertical-align: middle; }
.dataTable-table tbody td a .ico-fixed { display:inline-block; width:18px; height:18px; }
.dataTable-table tbody td a .ico-attachment { display:inline-block; width:18px; height:18px; margin-left:4px;  vertical-align: middle; }
.dataTable-table tbody td a:hover { color: #4c51bf !important; font-weight: 600 !important; }
.dataTable-table tbody td.dataTables-empty { padding:150px 16px !important; }

/* 행 마우스 오버 */
.dataTable-table tbody tr:hover {
    background-color: #f1f5f9 !important;
}

/* 정렬 아이콘 커스텀 (핵심) */
.dataTable-sorter::before, .dataTable-sorter::after {
    border-top-color: #cbd5e0 !important;
    border-bottom-color: #cbd5e0 !important;
}

.asc .dataTable-sorter::after, .desc .dataTable-sorter::before {
    border-top-color: #4c51bf !important;
    border-bottom-color: #4c51bf !important;
}

/* 하단 레이아웃 (검색 & 페이지네이션) */
.dt-bottom-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

/* 검색창 디자인 */
.dataTable-search { margin:20px 0 0; text-align: center; }
.dataTable-input {
    width: 100%;
    max-width: 300px;
    padding: 6px 20px !important;
    border-radius: 4px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    transition: all 0.3s ease;
    height:42px !important;
}

.dataTable-input:focus {
    background: #ffffff !important;
    border-color: #4c51bf !important;
    box-shadow: 0 0 0 4px rgba(76, 81, 191, 0.1) !important;
    outline: none;
}

/* 페이지네이션 버튼 */
.dataTable-bottom { margin:40px 0 0; }
.dataTable-pagination-list { display:flex; align-items:center; justify-content: center; gap:0 5px; }
.dataTable-pagination a {
    color: #4a5568 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s;
    display: block;
}
.dataTable-pagination .active a {
    background: #0057E7 !important;
    color: #ffffff !important;
    border-color: #0057E7 !important;
}

.dataTable-pagination li:not(.active) a:hover {
    background: #edf2f7 !important;
}

/* 고정글 */
#fixed-container tr { background-color: #f1f5f9 !important; }
#fixed-container tr .board-no { font-size:0; }
.dataTable-wrapper.search-results #fixed-container,
.dataTable-wrapper.dataTable-empty #fixed-container { display:none !important; }

/* 연구용역보고서 .research-project */
[data-page="research-project"] #board-container { padding:0 0 120px; }
[data-page="research-project"]:has(#board-container) { padding:0 20px; }
[data-page="research-project"] .gallery-cover { position:relative; max-width:1400px; width:100%; margin:120px auto; }
[data-page="research-project"] .gallery-cover #gallery-container { overflow:hidden; padding:20px 0; }
[data-page="research-project"] .gallery-cover .pagination { opacity:0; position: absolute; top: calc(50% - 20px); left: 0; width: 100%; transform: translate(0, -50%); transition:all .3s ease-in-out; z-index:1; }
[data-page="research-project"] .gallery-cover .pagination .prev { position: absolute; left: -17px; cursor:pointer; }
[data-page="research-project"] .gallery-cover .pagination .next { position: absolute; right: -17px; cursor:pointer; }
[data-page="research-project"] .gallery-cover:hover .pagination { opacity: 1; }
[data-page="research-project"] .gallery-wrapper .gallery-item { height: auto; display: flex; align-items: stretch; border:1px solid #d5d5d5; box-shadow:8px 8px 8px rgba(0,0,0,.1); }
[data-page="research-project"] .gallery-wrapper .gallery-item a { position:relative; }
[data-page="research-project"] .gallery-wrapper .gallery-item a img { transition:all .3s ease-in-out; min-height: 100%; object-fit: cover; }
/*[data-page="research-project"] .gallery-wrapper .gallery-item a:after { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.2); transition:all .3s ease-in-out; opacity:0; z-index:1; }*/
[data-page="research-project"] .gallery-wrapper .gallery-item a .gallery-title { font-weight:500; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; width: 100%; padding: 0 20px; word-break: keep-all; text-align: center; transition:all .3s ease-in-out; opacity:0; z-index:2; }
[data-page="research-project"] .gallery-wrapper .gallery-item a:hover img { filter:blur(4px); }
[data-page="research-project"] .gallery-wrapper .gallery-item a:hover:after { opacity:1; }
[data-page="research-project"] .gallery-wrapper .gallery-item a:hover .gallery-title { opacity:1; }

/* 연구총서 */
#gallery-list-container { margin:0 auto; padding:120px 0; }
#gallery-list-container .gallery-list { max-width:1400px; margin:0 auto; display:flex; gap:16px; flex-wrap:wrap; }
#gallery-list-container .gallery-list .list-item { position:relative; flex: 0 0 calc((100% - (16px * 2)) / 3); overflow:hidden; box-sizing:border-box; transition:all .3s ease-in-out; border: 1px solid #d5d5d5;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .1); }
#gallery-list-container .gallery-list .list-item:hover { transform:translateY(-10px); }
#gallery-list-container .gallery-list .list-item .img { height:100%; padding:40px; }
#gallery-list-container .gallery-list .list-item .img img { width:100%; height:100%; object-fit:cover; }
#gallery-list-container .gallery-list .list-item .desc { position:absolute; bottom:0; left:0; width:100%; background-color:rgba(0,0,0,.6); }
#gallery-list-container .gallery-list .list-item .desc .title { padding:20px; color:#fff; font-weight:700; }

/* =========================
   Tablet
========================= */
@media (max-width: 1024px) {
    #board-container {
        max-width: 100%;
        box-sizing: border-box;
        padding:70px 20px;
    }
    .dataTable-wrapper.no-footer .dataTable-container { border-top:1px solid #d9d9d9; }

    .dt-select-box {
        width: 100%;
        justify-content: flex-start;
    }

    .dt-select-box select {
        width: 120px;
    }

    .dataTable-table,
    .dataTable-table * { display:block; }
    .dataTable-table thead { display: none; }
    .dataTable-table tbody tr { display:flex; flex-wrap: wrap; border-bottom:1px solid #f1f5f9 !important; padding:12px 0 !important; }
    .dataTable-table tbody tr:last-child { border-bottom:0 !important; }
    .dataTable-table tbody td { display:flex; align-items:center; font-size:15px; border-bottom:0 !important; padding:0 6px !important; }
    .dataTable-table tbody td:nth-child(1) { max-width:50px; width:100%; align-items:flex-start; }
    .dataTable-table tbody td:nth-child(2) { max-width:calc(100% - 50px); width:calc(100% - 50px); }
    .dataTable-table tbody td:nth-child(3) { margin:10px 0 0 50px; color:#BEBEBE; font-size:12px; }
    .dataTable-table tbody td:nth-child(4) { position:relative; margin:10px 0 0; color:#BEBEBE; font-size:12px; }
    .dataTable-table tbody td:nth-child(4):before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1px; height:10px; background-color:#BEBEBE; }
    .dataTable-table tbody td:nth-child(4):after { content:''; display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); width:1px; height:10px; background-color:#BEBEBE; }
    .dataTable-table tbody td:nth-child(5) { display:flex; align-items:center; gap:0 4px; margin:10px 0 0; color:#BEBEBE; font-size:12px; }
    .dataTable-table tbody td:nth-child(5):before { content:'조회'; }

    [data-page="research-project"]:has(#board-container) { padding:0; }
    [data-page="research-project"] #board-container { padding:0 20px 70px; }
    [data-page="research-project"] .gallery-cover {
        max-width: 100%;
        margin: 70px auto;
        box-sizing: border-box;
    }

    [data-page="research-project"] .gallery-cover .pagination {
        opacity: 1;
    }

    [data-page="research-project"] .gallery-cover .pagination .prev {
        left: 0;
    }

    [data-page="research-project"] .gallery-cover .pagination .next {
        right: 0;
    }

    #gallery-list-container {margin: 0 auto;padding: 70px 20px;box-sizing: border-box;}
    #gallery-list-container .gallery-list {gap: 14px;}
    #gallery-list-container .gallery-list .list-item {flex: 0 0 calc((100% - 14px) / 2);}
    #gallery-list-container .gallery-list .list-item .desc .title {padding: 16px;font-size: 14px;}
    #gallery-list-container .gallery-list .list-item .img { padding:20px; }
}

/* =========================
   Mobile
========================= */
@media (max-width: 767px) {
    .dt-total {
        font-size: 14px;
    }

    .dt-select-box {
        flex-wrap: wrap;
        gap: 6px;
    }

    .dt-select-box select {
        width: 100px;
        padding: 4px 10px;
        font-size: 13px;
    }

    .dataTable-pagination-list {
        flex-wrap: wrap;
        gap: 4px;
    }
    .dataTable-pagination a { width:30px !important; height:30px !important; padding:0 !important; border-radius: 6px !important;
        display: flex;
        justify-content: center;
        align-items: center; }

    [data-page="research-project"] .gallery-cover {
        margin: 70px auto;
    }
    [data-page="research-project"] .gallery-cover #gallery-container { padding:20px }
    [data-page="research-project"] .gallery-wrapper .gallery-item a .gallery-title {
        font-size: 14px;
        padding: 0 12px;
    }

    #gallery-list-container {
        margin: 0 auto;
        padding: 70px 20px;
    }

    #gallery-list-container .gallery-list {
        gap: 12px;
    }

    #gallery-list-container .gallery-list .list-item {

    }

    #gallery-list-container .gallery-list .list-item .desc .title {
        padding: 14px;
        font-size: 13px;
        line-height: 1.5;
    }
}