/* ────────────────────────────────
 📊 DataTables (FINAL)
──────────────────────────────── */

/* 가로 스크롤 */
.table-scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.table-scroll-x > table,
.table-scroll-x > table.dataTable {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed;
}

/* Wrapper */
.dataTables_wrapper {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 13px;
  background-color: #f2f3f4;
  padding: 10px 0;
  color: #212529;
}

/* Table */
table.dataTable {
  width: 100% !important;
  border-width: 1px 0 !important;
  border-style: solid !important;
  border-color: #b0b3b5 !important;
  border-radius: 6px;
  border-collapse: separate !important;
  border-spacing: 0;
  background-color: #fff;
}

/* Header */
table.dataTable thead th {
  background-color: #e7e9e9;
  color: #000;
  font-weight: 600;
  text-align: center;
  padding: 10px 8px;
  white-space: nowrap;
  border-bottom: 2px solid #3a3f44 !important;
  border-right: 1px solid #b0b3b5 !important;
  position: relative;
}

table.dataTable thead th:last-child {
  border-right: none !important;
}

/* Body */
table.dataTable tbody td {
  text-align: center;
  padding: 7px 10px;
  background-color: #fff;
  color: #2d2d2d;
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid #e5e7ea;
  border-right: 1px solid #e5e7ea;
}

table.dataTable tbody td:last-child {
  border-right: none !important;
}

/* 체크박스 */
.datatable input[type="checkbox"],
#checkAll {
  width: 16px !important;
  height: 16px !important;
  transform: scale(0.9);
  cursor: pointer;
}

.datatable th:first-child,
.datatable td:first-child {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  text-align: center;
  padding: 4px !important;
}

/* Row */
table.dataTable.stripe tbody tr:nth-child(odd) {
  background-color: #f6f7f8;
}

table.dataTable.stripe tbody tr:nth-child(even) {
  background-color: #ffffff;
}

table.dataTable tbody tr:hover {
  background-color: #e9ecef;
}

/* Column Drag */
th.reorder-handle {
  position: relative;
  padding-left: 22px !important;
  cursor: move !important;
}

th.reorder-handle::before {
  content: "≡";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #888;
  opacity: 0.6;
}

table.dataTable thead th:first-child::before {
  display: none !important;
}

/* Resize handle */
table.dataTable thead th::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
}

/* Pagination */
.dataTables_paginate .paginate_button.current {
  background-color: #4b5258 !important;
  color: #fff !important;
}

/* 기타 */
.dataTables_wrapper .dt-buttons {
  display: inline-flex;
  gap: 6px;
  margin: 6px 0;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background-image: none !important;
}

/* Empty row */
.empty-row td {
  background-color: #ffffff;
  height: 13px;
  border-top: 1px solid #f0f0f0;
}

/* 엑셀 버튼 자체 */
button.dt-excel-only {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* DataTables 버튼 영역 자체 제거 */
div.dt-buttons {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

/* ────────────────────────────────
 📏 DataTables Length Menu (개씩 보기)
──────────────────────────────── */

.dataTables_wrapper .dataTables_length {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 6px 0 8px;
  /* background-color: #e7e9e9; */
  /* border: 1px solid #b0b3b5; */
  border-radius: 6px;
  font-size: 12.5px;
  color: #212529;
}

/* select 박스 */
.dataTables_wrapper .dataTables_length select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 4px 28px 4px 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: #212529;

  border: 1px solid #9aa0a6;
  border-radius: 4px;
  background-color: #ffffff;

  cursor: pointer;
  line-height: 1.4;

  /* 드롭다운 화살표 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* hover */
.dataTables_wrapper .dataTables_length select:hover {
  border-color: #4b5258;
}

/* focus */
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: #4b5258;
  box-shadow: 0 0 0 2px rgba(75, 82, 88, 0.15);
}

/* "개씩 보기" 텍스트 */
.dataTables_wrapper .dataTables_length label {
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}