/* === 공통 테이블 전체 래퍼 === */
.custom-table-container {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    box-sizing: border-box;
}

/* === 공통 타이틀 영역 === */
.table-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.product-list-title, .product-category-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 24px;
}
.product-list-title { color: #000; }
.product-category-title { color: #00558A; }

/* === 상단 컨트롤 스타일 === */
.header-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.dataTables_length {
    background-color: #02457C;
    border: 1px solid #02457C;
    padding: 10px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
}
.datatable-length-select-inner {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: #fff;
    cursor: pointer;
}
.dataTables_filter {
    background-color: #02457C;
    border: 1px solid #02457C;
    padding: 10px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.dataTables_filter label { margin: 0; }
#dc-block-table_filter > label { font-size: 0; }
#dc-block-table_filter > label > input { font-size: 14px; }

.custom-data-table thead .sorting:after,
.custom-data-table thead .sorting_asc:after,
.custom-data-table thead .sorting_desc:after {
    display: none !important;
}

.custom-select-wrapper select {
  padding: 5px 10px;
  max-width: 100%;
  white-space: normal;
}

/* === 검색창 스타일 수정 === */
.datatable-search-input {
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 9px 12px;
    min-width: 240px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background-color: #fff;
    /* 전환 효과 추가 */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* === 테이블 본체 공통 === */
.table-wrapper { overflow-x: auto; }
.custom-data-table {
    width: 100% !important;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #000;
    background-color: #fff;
}
.custom-data-table thead th {
    background: #003766;
    color: #fff;
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
	vertical-align: middle;
    font-weight: 600;
    background-image: url('/wp-content/uploads/2025/06/arrow_vector.svg') !important;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px;
    white-space: nowrap;
}
.custom-data-table thead th {
    background: #003766;
    color: #fff;
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
	vertical-align: middle;
    font-weight: 600;
    background-image: url('');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 35px;
    white-space: nowrap;
}
.custom-data-table tbody td {
    text-align: left;
    padding: 12px;
    border: 1px solid #ddd;
    border-top: none;
    white-space: nowrap;
    background-color: #fff !important;
}
.custom-data-table tbody tr:hover td {
    background-color: #f5f5f5 !important;
}


/* === 페이지네이션 공통 === */
.bottom-controls {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row !important; 
    padding-top: 20px;
}
.dataTables_paginate {
    display: inline-flex;
    align-items: center;
}

.paginate_button {
    display: inline-block !important;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 10px;
    margin: 0 4px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #999;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.paginate_button:hover:not(.disabled) {
    background-color: #f0f0f0;
    color: #333;
}
.paginate_button.current {
    background: #003766;
    color: #fff !important;
    font-weight: 700;
}
.paginate_button.disabled {
    color: #ccc !important;
    opacity: 0.6;
    cursor: default;
}

/* === Terminations 전용 필터 영역 위치 조정 === */
.controls-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    gap: 10px;
    margin-bottom: 15px;
}
.filters-area-left, .filters-area-right-dt {
    display: flex;
    gap: 8px;
    align-items: center;
}
.filters-area-right-dt {
    justify-content: flex-end;
    width: 100%;
}
.custom-select-wrapper {
    display: flex;
    align-items: center;
    padding: 0 10px 0 20px;
    height: 56px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 200px;
    /* 전환 효과 추가 */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.custom-select-wrapper select {
    width: 100%;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #000;
    appearance: none;
    background: none;
    padding-right: 30px;
    cursor: pointer;
    outline: none; /* 포커스 시 기본 검은색 테두리 제거 */
}

/* * === 포커스 스타일 통합 및 개선 ===
 * - 검색창과 드롭다운의 포커스 스타일을 통일
 * - 사이트 테마에 맞는 색상(#00558A)으로 변경
 * - 은은한 그림자 효과로 시각적 강조
*/
.datatable-search-input:focus,
.custom-select-wrapper:focus-within {
    border-color: #00558A; /* 테마의 포인트 색상으로 변경 */
    box-shadow: 0 0 0 3px rgba(0, 85, 138, 0.2); /* 은은하고 부드러운 그림자 효과 */
    outline: none; /* 기본 파란색 아웃라인 제거 */
}


@media (max-width: 768px) {
  /* 1. 상단 전체 컨트롤 래퍼 */
  .controls-top-row {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 12px;
  }

  .custom-table-container {
    padding: 0 !important;
  }

  /* 2. 왼쪽 필터 수직 정렬 */
  .filters-area-left {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* 3. 우측 엔트리+검색 한 줄로 정렬 (1:2 비율) */
  .filters-area-right-dt {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* ✅ 한 줄 고정 */
    width: 100%;
    gap: 4px;
  }

  .dataTables_length,
  .dataTables_filter {
    display: flex !important;
    align-items: center;
    flex-direction: row;
    box-sizing: border-box;
    padding: 8px 10px;
    gap: 8px;
  }

  .dataTables_length {
    flex: 0 0 39%;
    min-width: 0; /* ✅ overflow 방지 */
  }

  .dataTables_filter {
    flex: 0 0 60%;
    min-width: 0;
    justify-content: flex-start;
  }

  .dataTables_length label,
  .dataTables_filter label {
    display: flex !important;
    align-items: center;
	font-size: 12px;
    gap: 6px;
    margin: 0;
    width: 100%;
  }

  .dataTables_length select,
  .dataTables_filter input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  /* 4. 필터 셀렉트 박스 공통 */
  .custom-select-wrapper {
    width: 100%;
    padding: 10px 12px;
    min-width: unset;
  }

  .datatable-length-select-inner {
    width: 100%;
    min-width: unset;
  }

  /* 5. 테이블 가로 스크롤 유지 */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 6. 상단 타이틀 수직 정렬 */
  .table-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .product-list-title,
  .product-category-title {
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.02em;
    height: auto;
  }

  .product-list-title {
    color: #000;
    font-weight: 700;
  }

  .product-category-title {
    color: #00558A;
    font-weight: 700;
  }
}

.custom-data-table tbody tr[data-href] { cursor: pointer !important; }
.custom-data-table tbody tr[data-href]:hover td { background-color: #f5f5f5 !important; }