/* ==========================================================================
   ■ CSS 1파트: 레이아웃 기본 구조, 정렬 순서 및 동적 격자 스키마
   ========================================================================== */

/* 전체 베이스 레이아웃 */
.ap_extra_search.bd_wrt_main {
    margin: 12px auto 16px auto;
    max-width: 862px;
    width: 100%;
    padding: 0;
    background: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid #111111;
    box-sizing: border-box;
}

/* 테이블 기본 구조 초기화 및 Flex 정렬 */
.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: row !important; /* tr들이 가로 흐름을 타고 나열되도록 설정 */
    flex-wrap: wrap !important;     /* 라디오 칩 행과 셀렉터 행이 섞여도 줄바꿈이 정상 작동하도록 허용 */
    width: 100%; 
}

/* 각 검색 행(Row) - 선 제거 및 순백색 통일 */
.ap_extra_search.bd_wrt_main .et_vars tr {
    display: flex;
    align-items: center !important; 
    padding: 0;
    margin: 0;
    border: none !important; 
    background: #ffffff !important; 
    width: 100% !important; /* 기본값은 가로 100% 전체 한 줄 차지 */
}

/* 관리자 지정 1~6번째 줄 순서대로 order 강제 배치 */
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_1 { order: 1 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_2 { order: 2 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_3 { order: 3 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_4 { order: 4 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_5 { order: 5 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_6 { order: 6 !important; }

/* 항목 이름 영역 (th) - 원본 가중치 보존 (HTML에서 삭제되었으므로 대기 상태) */
.ap_extra_search.bd_wrt_main .et_vars th {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 70px;
    min-width: 70px;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;     
    font-size: 11px;
    font-weight: 700;
    color: #111111 !important;   
    letter-spacing: -0.5px;
    box-sizing: border-box;
    background: transparent !important;
}
.ap_extra_search.bd_wrt_main .et_vars th::before { display: none !important; }

/* 데이터 영역(td) 및 입력 폼 영역 간격 유지 */
.ap_extra_search.bd_wrt_main .et_vars td {
    display: block;
    flex-grow: 1;
    padding: 5px 0 5px 0px !important; 
    border: none !important;   
    box-sizing: border-box;
    background: transparent !important;
}

/* ★ [셀렉터 가로 나열 전용 예외 스키마] */
.ap_extra_search.bd_wrt_main .et_vars tr:has(select.select) {
    width: auto !important;
    margin-right: 8px !important; /* 트렌디한 압축 감성에 맞춰 간격 8px로 최적화 */
    display: inline-flex !important;
}
.ap_extra_search.bd_wrt_main .et_vars tr:has(select.select) td {
    padding: 5px 0 !important;
    display: flex !important;
    align-items: center;
}

/* 바둑판형 격자 배열 (관리자 설정 동적 격자 연동) */
.ap_extra_search.bd_wrt_main .et_vars tr ul,
.ap_extra_search.bd_wrt_main .et_vars ul {
    display: grid;
    grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)) !important; 
    gap: 4px !important;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* [판매지역] 행만 기존의 18열 초압축 배열 절대 유지 */
.ap_extra_search.bd_wrt_main .et_vars tr[style*="--cols: 18"] ul,
.ap_extra_search.bd_wrt_main .et_vars ul[style*="--cols: 18"] {
    grid-template-columns: repeat(18, minmax(41px, 1fr)) !important; 
    gap: 2px !important;
}
.ap_extra_search.bd_wrt_main .et_vars tr[style*="--cols: 18"] li label,
.ap_extra_search.bd_wrt_main .et_vars ul[style*="--cols: 18"] li label {
    font-size: 12px !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 input[type="radio"], 
.ap_extra_search.bd_wrt_main .et_vars input[type="checkbox"] {
    position: absolute; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; z-index: 5;
}/* ==========================================================================
   ■ CSS 2파트: 공통 칩 디자인, 지정 색상별 자동 오버 및 올 블랙 반전 마감
   ========================================================================== */

/* 공통 칩 버튼 기본 스타일 선언 */
.ap_extra_search.bd_wrt_main .et_vars label,
.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: 28px; margin: 0; padding: 0 6px; font-size: 11px; font-weight: 400; border-radius: 4px; border: none !important; transition: all 0.1s ease; text-align: center; white-space: nowrap; overflow: hidden; z-index: 1; 
}

/* ★ [화살표 부활 패치] 서버 파싱 오류를 완전 우회하기 위해 SVG를 Base64 바이너리로 100% 인코딩하여 주입 */
.ap_extra_search.bd_wrt_main .et_vars select.select {
    display: inline-flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    height: 28px !important;
    min-width: 120px !important;
    padding: 0 28px 0 12px !important; /* 우측 패딩 충분히 유지 */
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #4b5563 !important; 
    border: 1px solid #e2e8f0 !important; 
    border-radius: 6px !important; 
    background: #f8fafc !important; 
    
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    /* [Base64 변환] 어떠한 인코딩 환경에서도 무조건 화살표가 튀어나오도록 기계어로 박아넣음 */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM5Y2EzYWYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.15s ease !important;
}

/* 셀렉터 포커스 및 마우스 올렸을 때 효과 */
.ap_extra_search.bd_wrt_main .et_vars select.select:hover {
    border-color: #cbd5e1 !important;
    background-color: #f1f5f9 !important;
}
/* 포커스 시 화살표 색상 블랙으로 실시간 변경되는 Base64 이미지 바인딩 */
.ap_extra_search.bd_wrt_main .et_vars select.select:focus {
    border-color: #111111 !important;
    color: #111111 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.05) !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI2IDkgMTIgMTUgMTggOSI+PC9wb2x5bGluZT48L3N2Zz4=") !important;
}

/* 지정된 줄(Line) 순서별 미세 명도 기본값 설정 및 실시간 15% 자동 어두운 오버 효과 연산 */
/* 1번째 줄 */
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_1 label { background: var(--bg-color, #f8fafc) !important; color: #475569 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_1 li:hover label,
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_1 span:hover label { background: color-mix(in srgb, var(--bg-color, #f8fafc) 85%, #000000 15%) !important; }

/* 2번째 줄 */
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_2 label { background: var(--bg-color, #f3f4f6) !important; color: #4b5563 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_2 li:hover label,
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_2 span:hover label { background: color-mix(in srgb, var(--bg-color, #f3f4f6) 85%, #000000 15%) !important; }

/* 3번째 줄 */
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_3 label { background: var(--bg-color, #fafafa) !important; color: #52525b !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_3 li:hover label,
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_3 span:hover label { background: color-mix(in srgb, var(--bg-color, #fafafa) 85%, #000000 15%) !important; }

/* 4, 5, 6번째 줄 */
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_4 label,
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_5 label,
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_6 label { background: var(--bg-color, #eef2f6) !important; color: #475569 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_4 li:hover label,
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_5 li:hover label,
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_6 li:hover label { background: color-mix(in srgb, var(--bg-color, #eef2f6) 85%, #000000 15%) !important; }

/* 반전 개별 마감 - 어떤 줄에서든 체크된 칩 버튼은 무조건 1순위 올 블랙 고정 */
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_1 input:checked + label { background: #111111 !important; color: #ffffff !important; font-weight: 600 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_2 input:checked + label { background: #111111 !important; color: #ffffff !important; font-weight: 600 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_3 input:checked + label { background: #111111 !important; color: #ffffff !important; font-weight: 600 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_4 input:checked + label { background: #111111 !important; color: #ffffff !important; font-weight: 600 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_5 input:checked + label { background: #111111 !important; color: #ffffff !important; font-weight: 600 !important; }
.ap_extra_search.bd_wrt_main .et_vars tr.search_line_6 input:checked + label { background: #111111 !important; color: #ffffff !important; font-weight: 600 !important; }

/* 하단 통합 검색 바 영역 디자인 매칭 (30px 및 라운딩 동화) */
.ap_extra_search.bd_wrt_main .regist { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: flex-end !important; 
    padding: 6px 4px 10px 4px !important; 
    margin: 0 !important; 
    border: none !important; 
    width: 100% !important; 
    box-sizing: border-box !important; 
    gap: 5px !important; 
    background: #ffffff !important; 
}
.ap_extra_search.bd_wrt_main .regist .signature_search_box { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }

.ap_extra_search.bd_wrt_main input[type="text"].itx,
.ap_extra_search.bd_wrt_main .srch_itx.text { 
    height: 30px !important; line-height: 30px !important; box-sizing: border-box !important; border: 1px solid #e2e8f0 !important; padding: 0 12px !important; width: 260px !important; border-radius: 6px !important; font-size: 12px !important; background-color: #ffffff !important; color: #1f2937 !important; margin: 0 !important; outline: none !important; transition: border-color 0.15s ease;
}
.ap_extra_search.bd_wrt_main input[type="text"].itx:focus { border-color: #111111 !important; }

.ap_extra_search.bd_wrt_main .searchb_btn, .searchb_btn { 
    display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; height: 30px !important; padding: 0 20px !important; border-radius: 6px !important; border: none !important; background-color: #111111 !important; color: #fff !important; text-decoration: none !important; line-height: 1 !important; margin: 0 !important; box-sizing: border-box !important;
}
.ap_extra_search.bd_wrt_main .bd_btn { 
    display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 12px !important; font-weight: 500 !important; height: 30px !important; padding: 0 14px !important; border-radius: 6px !important; border: 1px solid #e2e8f0 !important; background-color: #fff !important; color: #475569 !important; line-height: 1 !important; margin: 0 !important; box-sizing: border-box !important; transition: all 0.15s ease;
}
.ap_extra_search.bd_wrt_main .bd_btn:hover { background-color: #f8fafc !important; color: #111111 !important; border-color: #cbd5e1 !important; }