/* ==========================================================================
   AP 확장변수 다중검색 애드온 - 서버 오차가 없는 CSS 정렬 방식 (판매지역 최상단)
   ========================================================================== */

/* 1. 전체 컨테이너 (862px 고정 및 하단 경계선 유지) */
.ap_extra_search.bd_wrt_main {
    margin: 8px auto 12px auto;
    max-width: 862px;
    width: 100%;
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #111111;
    box-sizing: border-box;
}

/* 2. 테이블 기본 구조 초기화 */
.ap_extra_search.bd_wrt_main .et_vars { display: block; width: 100%; border: none; padding: 0; margin: 0; }
.ap_extra_search.bd_wrt_main .et_vars tbody { 
    display: flex; 
    flex-direction: column; /* 자식 tr들의 출력 순서를 임의로 바꿀 수 있도록 flex 전환 */
    width: 100%; 
}

/* 각 검색 행(Row) */
.ap_extra_search.bd_wrt_main .et_vars tr {
    display: flex;
    align-items: stretch !important; 
    padding: 0;
    margin: 0;
    border: none !important;
    background: transparent !important;
}

/* ==========================================================================
   ★ [HTML 에러 방지 핵심] 라이믹스 코드를 안 건드리고 순서만 위로 올리는 CSS Order
   ========================================================================== */
.ap_extra_search.bd_wrt_main .et_vars tr { order: 3; } /* 기본적으로 모든 줄은 3순위 배정 */
.ap_extra_search.bd_wrt_main .et_vars tr.row_target_category { order: 2 !important; } /* 물품종류(카테고리)를 2번째 줄로 배정 */

/* 라이믹스 반복문 안에서 2번째로 생성되는 '판매지역' tr을 찾아 강제로 1순위(최상단) 배치 */
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(2) { order: 1 !important; } 

/* 3. 항목 이름 영역 (th) - 가로폭 65px 유지 및 모든 선 제거 */
.ap_extra_search.bd_wrt_main .et_vars th {
    display: inline-flex;
    align-items: center;
    justify-content: center;   
    width: 65px;               
    min-width: 65px;
    padding: 0 !important;     
    margin: 0 !important;
    border: none !important;   
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.5px;
    box-sizing: border-box;
}
.ap_extra_search.bd_wrt_main .et_vars th::before { display: none !important; }

/* 4. 입력 폼 영역 (td) - 상하 패딩 7px 균등화 */
.ap_extra_search.bd_wrt_main .et_vars td {
    display: block;
    flex-grow: 1;
    padding: 7px 12px !important; 
    border: none !important;   
    box-sizing: border-box;
}

/* 5. 바둑판형 격자 배열 */
.ap_extra_search.bd_wrt_main .et_vars ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); 
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* 최상단 1번 줄로 올라간 [판매지역] 행만 1줄 절대 고정 배율 타깃 적용 */
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(2) ul {
    grid-template-columns: repeat(18, minmax(41px, 1fr)) !important; 
    gap: 2px !important;
}
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(2) li label {
    font-size: 11px !important;
    letter-spacing: -1px !important;
    padding: 0 !important;
}

.ap_extra_search.bd_wrt_main .et_vars li, .extra_category {
    display: block !important; position: relative; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
.ap_extra_search.bd_wrt_main .et_vars li input[type="radio"], .ap_extra_search.bd_wrt_main .et_vars li input[type="checkbox"] {
    position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; z-index: 2;
}

/* 칩 버튼 기본 베이스 */
.ap_extra_search.bd_wrt_main .et_vars li label {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 25px; margin: 0; padding: 0 4px; font-size: 11px; font-weight: 500; border-radius: 3px; border: none !important; transition: all 0.1s ease; text-align: center; white-space: nowrap; overflow: hidden; z-index: 1; background: #ffffff; 
}

/* ==========================================================================
   ★ [제브라 재생성] 순서가 바뀐 위치에 완벽하게 대응한 무채색 명암 흐름 고정
   ========================================================================== */

/* 홀수 행 (최종 1번 위치: 판매지역 / 최종 3번 위치: 거래방식) ➔ 연회색 #f3f4f6 */
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(2) th, .ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(2) td,
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(3) th, .ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(3) td { background: #f3f4f6 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(2) th, .ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(3) th { color: #4b5563 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(2) li:hover label, .ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(3) li:hover label { background: #e5e7eb; }

/* 짝수 행 (최종 2번 위치: 물품종류) ➔ 한 단계 밝고 맑은 초연회색 #f9fafb */
.ap_extra_search.bd_wrt_main .et_vars tr.row_target_category th, .ap_extra_search.bd_wrt_main .et_vars tr.row_target_category td { background: #f9fafb !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.row_target_category th { color: #4b5563 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.row_target_category li:hover label { background: #f1f3f5; }

/* 최종 4번 위치 (상태 행) 및 ⑤ 하단 통합 검색 바 영역 ➔ [요청 반영] 단일 투명회색으로 하단 블록 완벽 결합 */
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(4) th, .ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(4) td,
.ap_extra_search.bd_wrt_main .regist { background: #f9fafb !important; }
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(4) th { color: #4b5563 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr:nth-of-type(4) li:hover label { background: #f1f3f5; }

/* 선택 완료 시 올 블랙 반전 */
.ap_extra_search.bd_wrt_main .et_vars li input[type="radio"]:checked + label,
.ap_extra_search.bd_wrt_main .et_vars li input[type="checkbox"]:checked + label {
    background: #111111 !important; color: #ffffff !important; font-weight: 600;
}

/* ⑤ 하단 통합 검색 바 영역 여백 및 우측 밀착 정렬 */
.ap_extra_search.bd_wrt_main .regist { 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
    padding: 2px 12px 9px 12px !important; 
    margin: 0; 
    border: none; 
    width: 100%; 
    box-sizing: border-box; 
    gap: 4px; 
}
.ap_extra_search.bd_wrt_main .regist .signature_search_box { display: flex; align-items: center; }
.ap_extra_search.bd_wrt_main input[type="text"].itx { height: 30px; box-sizing: border-box; border: 1px solid #cbd5e1; padding: 0 8px; width: 240px; border-radius: 4px; font-size: 12px; background-color: #ffffff; color: #334155; }
.ap_extra_search.bd_wrt_main input[type="text"].itx:focus { border-color: #111111; outline: none; }
.searchb_btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; font-weight: 600; height: 25px; padding: 0 16px; border-radius: 3px; border: none; background-color: #111111 !important; color: #fff !important; text-decoration: none !important; line-height: 1 !important; }
.ap_extra_search.bd_wrt_main .bd_btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; font-weight: 500; height: 25px; padding: 0 12px; border-radius: 3px; border: 1px solid #cbd5e1; background-color: #fff; color: #475569; line-height: 1 !important; }
.ap_extra_search.bd_wrt_main .bd_btn:hover { background-color: #f8fafc; color: #334155; }
