/**
 * 필터 전용 스타일시트
 * user 게시판 스타일 기반으로 재작성
 * 최종 수정: 2024-12-28
 */

/* ========================================
   기본 인풋/셀렉트 스타일 (user 게시판 동일)
   ======================================== */
.inp, .form-control, select.form-control, input.form-control, input[type="text"], select {padding: 10px; background-color: #F5F6FA; border-radius: 4px; border: 1px solid #aaa !important; height: 40px; font-weight: 600; font-size: 16px; width: 100%; box-sizing: border-box; color: #000;}

/* placeholder 스타일 */
input::placeholder, select::placeholder {color: #999; font-weight: 400; font-size: 16px;}
input::-webkit-input-placeholder {color: #999; font-weight: 400;}

/* focus 스타일 */
.inp:focus, .form-control:focus, input[type="text"]:focus, select:focus {-webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; border: 1px solid #aaa !important; outline: none; background-color: #fff;}

/* textarea */
textarea.form-control {background-color: #f3f3f3 !important; border: 0px !important; padding: 15px !important; font-size: 16px; min-height: 100px; height: auto;}
textarea:focus {-webkit-box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; box-shadow: 0 0 0; border: 0 solid #ccc !important;}

/* ========================================
   셀렉트 박스 화살표
   ======================================== */
select, select.form-control, select.inp {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"%3E%3Cpath fill="%23333" d="M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z"/%3E%3C/svg%3E') no-repeat right 10px center; background-size: 12px; background-color: #F5F6FA; padding-right: 35px; cursor: pointer;}
select:focus {background-color: #fff;}

/* ========================================
   필터 폼 레이아웃
   ======================================== */
.job-filter-form .form-group {margin-bottom: 15px;}
.form-group.checkbox-group .filter-label {margin-bottom: 10px !important; font-weight: 700;}
.job-filter-form .form-group label {display: block; margin-bottom: 0; font-size: 16px; font-weight: 500; color: #000; letter-spacing: -0.5px;}

/* 지역 선택 그룹 */
.region-select-group {display: flex; gap: 10px;}
.region-select-group select {flex: 1;}

/* 검색 입력 그룹 */
.search-input-group {display: flex; gap: 5px; margin-top: 10px;}
.search-input-group select.search-field {flex: 0 0 120px; width: 120px; height: 40px !important;}
.search-input-group input[type="text"] {flex: 1; height: 40px !important;}

/* ========================================
   버튼 스타일
   ======================================== */
.filter-buttons {display: flex; gap: 10px; margin-top: 0;}

.btn-search, .btn-reset {flex: 1; height: 40px; padding: 10px 20px; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px;}
.btn-search {background-color: #333; color: #fff;}
.btn-search:hover {opacity: 0.8;}
.btn-reset {background-color: #aaa; color: #fff;}
.btn-reset:hover {opacity: 0.8;}
.btn-search:focus, .btn-reset:focus {outline: none;}

/* ========================================
   필터 애니메이션
   ======================================== */
.filter-collapse {transition: all 0.3s ease-in-out;}
.filter-toggle {padding: 15px;}

/* 체크박스 그룹 스타일 */
.checkbox-group {margin-bottom: 20px;}
.checkbox-group .filter-label {display: block; margin-bottom: 12px; font-size: 16px font-weight: 700; color: #000; letter-spacing: -0.5px;}
.checkbox-group .filter-label .required {color: #ff6b6b; margin-left: 4px; font-size: 16px;}

/* 체크박스 그리드 레이아웃 */
.checkbox-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px;}

/* 체크박스 아이템 */
.checkbox-item {position: relative; display: flex; align-items: center; padding: 3px 5px 5px; background: #fff; border: 1px solid #cde7eb; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; user-select: none;}
.checkbox-item:hover {border-color: #007bff; background: #f0f7ff;}
.checkbox-item input[type="checkbox"] {position: absolute; opacity: 0; width: 0; height: 0;}
.checkbox-item span {flex: 1; color: #333; font-size: 14px; letter-spacing: -0.3px; padding-left: 30px;}

/* 체크박스 시각 요소 (체크박스 박스) */
.checkbox-item::before {content: ''; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #cde7eb; border-radius: 3px; background: #fff; transition: all 0.2s ease;}
.checkbox-item:hover::before {border-color: #007bff;}

/* 체크 표시 (체크 아이콘) */
.checkbox-item::after {content: '✓'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px font-weight: 700; opacity: 0; transition: opacity 0.2s ease;}

/* 체크된 상태 */
.checkbox-item input[type="checkbox"]:checked ~ span {color: #007bff; font-weight: 700;}
.checkbox-item input[type="checkbox"]:checked ~ *::before, .checkbox-item:has(input[type="checkbox"]:checked)::before {background: #007bff; border-color: #007bff;}

.checkbox-item input[type="checkbox"]:checked ~ *::after, .checkbox-item:has(input[type="checkbox"]:checked)::after {opacity: 1;}

/* 기존 스타일 (호환성을 위해 유지) */
.filter-checkbox-group {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;}
.filter-checkbox-group label {display: inline-flex; align-items: center; padding: 6px 12px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 20px; font-size: 16px; cursor: pointer; transition: all 0.2s;}
.filter-checkbox-group input[type="checkbox"] {margin-right: 5px;}
.filter-checkbox-group label:hover {background: #e9ecef;}
.filter-checkbox-group input[type="checkbox"]:checked + label {background: #007bff; color: #fff; border-color: #007bff;}

/* ========================================
   모바일 반응형
   ======================================== */

@media all and (max-width: 1024px) {
	.checkbox-grid {grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;}
	.region-select-group {flex-direction: column; gap: 10px;}
	.region-select-group select {width: 100%;} 
	.search-input-group {flex-direction: column; gap: 10px;}
	.search-input-group select.search-field {flex: 1; width: 100%;}
	.filter-buttons {flex-direction: column;}
	.btn-search, .btn-reset {width: 100%; height: 40px;}
}

@media (max-width: 768px) {
	.checkbox-grid {grid-template-columns: repeat(2, 1fr); gap: 8px;}
	.checkbox-item {font-size: 12px;}
	.checkbox-item span {font-size: 14px; padding-left: 24px;}
	.checkbox-item::before {width: 16px; height: 16px; left: 10px;}
	.checkbox-item::after {width: 16px; height: 16px; left: 10px; font-size: 12px;}
	.inp, .form-control, input[type="text"], select {font-size: 16px; height: 40px;}
	.job-filter-form .form-group label {font-size: 16px;}
	.checkbox-group .filter-label {font-size: 16px; margin-bottom: 10px;}
}

@media (max-width: 480px) {
	.checkbox-grid {grid-template-columns: repeat(2, 1fr); gap: 6px;}
	.checkbox-item {font-size: 11px;}
	.checkbox-item span {font-size: 14px; padding-left: 22px;}
	.checkbox-item::before {width: 14px; height: 14px; left: 8px;}
	.checkbox-item::after {width: 14px; height: 14px; left: 8px; font-size: 11px;}
}