/* 기본 라디오 버튼 레이블 스타일 */
/*
label {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	display: inline-block;
}
*/

.search_option_label {
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin: 4px 4px 6px 0; /* ← 여백 추가 (상, 우, 하, 좌) */
	display: inline-block;
}

.option_group {
  display: flex;
  flex-wrap: wrap;   /* 넘치면 줄바꿈 */
  gap: 6px 10px;     /* 세로/가로 간격 */
}

/*체크박스, 라디오벝느 숨김*/
input[type="checkbox"],
input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}


/*네모형태(div형태) 체크박스 스타일, 성별 등 기타 체크박스(c_ExOp2)*/
/*radio에도 체크박스타입처럼(c_ExOp2) 네모박스 적용 시 radio버튼 숨기기(class에다가 hidden_radio 부여해주면됨(아래참조)*/
 /* 라디오 버튼 숨김 */
 /*
.radio_custom_style input[type="radio"] {
    display: none;
}
*/

.radio_custom_style label {
    display: inline-block; /* 레이블을 인라인 블록으로 설정 */
    margin-right: 2.5px; /* 오른쪽 여백 */
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
}


/* 비활성화된 라디오 버튼의 배경색과 텍스트 색상 설정 */
input[type="radio"]:disabled + label {
	background-color: #f0f0f0; /* 비활성화된 버튼의 배경색 */
	color: #ccc; /* 비활성화된 버튼의 텍스트 색상 */
}

input[type="radio"]:checked + label {
	background-color: #5B88D5 ; /* 활성화된 버튼의 배경색 */  
	color: #fff; /* 활성화된 버튼의 텍스트 색상 */
}






/* 공통 라디오 버튼 스타일 */
.radio_style {
  position: relative;
  line-height: 18px; /* 라디오 버튼의 높이에 맞춰 조정 */
}

.radio_style input[type="radio"] {
  /* 실제 라디오 버튼 숨기기 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: hidden !important;
  opacity: 0;

}

.radio_style input[type="radio"] + label {
  display: inline-flex;
  align-items: center; /* 수직 가운데 정렬 */
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 30px; /* 레이블 왼쪽 여백 조정 (동그라미 크기와 일치시킴) */
  line-height: 18px; /* 라디오 버튼의 높이와 일치 */
}

.radio_style input[type="radio"] + label:before {
  content: '';
  display: inline-block;
  width: 16px; /* 라디오 버튼의 너비 */
  height: 16px; /* 라디오 버튼의 높이 */
  background: #fafafa;
  border: 2px solid #cacece;
  border-radius: 50%; /* 동그란 모양 */
  box-sizing: border-box;
  vertical-align: middle;
  position: absolute; /* 절대 위치 */
  left: 8px; /* 레이블 안에서의 왼쪽 위치 */
  top: 50%;
  transform: translateY(-50%); /* 정확한 수직 중앙 정렬 */
}

.radio_style input[type="radio"]:checked + label:before {
  background: #fff;
  border-color: #adb8c0;
}

.radio_style input[type="radio"]:checked + label:after {
  /* 체크 표시 대신 동그라미 */
  content: '●';
  font-size: 8px;
  position: absolute;
  left: 12px; /* 동그라미가 라디오 버튼 안에 들어가도록 위치 조정 */
  top: 50%;
  transform: translateY(-50%); /* 세로 가운데 정렬 */
  color: #5B88D5; /* 체크된 상태의 동그라미 색상 */
  line-height: 0; /* 텍스트 중앙 정렬을 위한 조정 */
}

/* 다크 모드 - 체크된 라디오 버튼 */
body.dark .radio_style input[type="radio"]:checked + label:after {
  color: var(--text-color-dark, #eee) !important;
}










/* 체크박스 스타일 */
/* 비활성화된 라디오 버튼의 배경색과 텍스트 색상 설정 */
input[type="checkbox"]:disabled + label {
	background-color: #f0f0f0; /* 비활성화된 버튼의 배경색 */
	color: #ccc; /* 비활성화된 버튼의 텍스트 색상 */
}




/* 체크박스 스타일 */
.checkbox_style {
  position: relative;
  line-height: 18px; /* 체크박스의 높이에 맞춰 조정 */
}

.checkbox_style label {
    display: inline-block; /* 레이블을 인라인 블록으로 설정 */
    margin-right: 2.5px; /* 오른쪽 여백 */
    cursor: pointer; /* 마우스 커서를 포인터로 변경 */
}


.checkbox_style input[type="checkbox"] {
  /* 실제 체크박스 숨기기 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: hidden !important;
  opacity: 0;
}

.checkbox_style input[type="checkbox"] + label {
  display: inline-flex;
  align-items: center; /* 수직 가운데 정렬 */
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-left: 30px; /* 레이블 왼쪽 여백 조정 (체크박스 크기와 일치시킴) */
  line-height: 18px; /* 체크박스의 높이와 일치 */
}

.checkbox_style input[type="checkbox"] + label:before {
  content: '';
  display: inline-block;
  width: 19px; /* 체크박스의 너비 */
  height: 19px; /* 체크박스의 높이 */
  background: #fafafa;
  border: 2px solid #cacece;
  border-radius: 3px; /* 체크박스는 네모 모양 */
  box-sizing: border-box;
  vertical-align: middle;
  position: absolute; /* 절대 위치 */
  left: 8px; /* 레이블 안에서의 왼쪽 위치 */
  top: 50%;
  transform: translateY(-50%); /* 정확한 수직 중앙 정렬 */
}

.checkbox_style input[type="checkbox"]:checked + label:before {
  background: #fff;
  border-color: #adb8c0;
}



/* 활성화된 버튼의 색 */
input[type="checkbox"]:checked + label {
	background-color: #5B88D5 ; 
	color: #fff;
}

body.dark input[type="checkbox"]:checked + label {
	background-color: #3A5AAA ; /* 활성화된 버튼의 배경색(다크모드) */  
}


/* 체크 표시 유니코드 */
.checkbox_style input[type="checkbox"]:checked + label:after {
  content: '✔'; 
  font-size: 17px;
  position: absolute;
  left: 11px; 
  top: 48%;
  transform: translateY(-50%);
  color: #5B88D5; 
  line-height: 0; 
}

/* 비활성화 상태 */
.checkbox_style input[type="checkbox"]:disabled + label {
  background-color: #f0f0f0; /* 비활성화된 버튼의 배경색 */
  color: #ccc; /* 비활성화된 버튼의 텍스트 색상 */
  cursor: not-allowed; /* 비활성화 상태의 커서 */
}

.checkbox_style input[type="checkbox"]:disabled + label:before {
  background: #e8e8e8; /* 비활성화된 체크박스 배경색 */
  border-color: #cacece;
}

/* 다크 모드 - 체크된 체크박스 */
body.dark .checkbox_style input[type="checkbox"]:checked + label:after {
  color: var(--text-color-dark, #eee) !important;
}

body.dark .checkbox_style input[type="checkbox"]:checked + label:before {
  background-color: var(--border-color-dark, #3A5AAA) !important;
  border-color: var(--border-color-dark, #eee) !important;
}

/* 다크 모드 - 비활성화된 체크박스 */
body.dark .checkbox_style input[type="checkbox"]:disabled + label:before {
  background-color: #444 !important;
  border-color: #666 !important;
}









/*체크박스 css(상담버튼 혹은 비활성화 상태)*/
.checkbox_grayStyle {position: relative;} 
.checkbox_grayStyle input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */ 
position: absolute; 
width: 1px; 
height: 1px; 
padding: 0; 
margin: -1px; 
overflow: hidden; 
clip:rect(0,0,0,0); 
border: 0 
} 

.checkbox_grayStyle input[type="checkbox"] + label { 
display: inline-block; 
position: relative; 
cursor: pointer; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
} 

.checkbox_grayStyle input[type="checkbox"] + label:before { /* 화면에 보일 가짜 체크박스 생성 */ 
content: ' '; 
display: inline-block; 
width: 15px; /* 체크박스의 너비를 지정 */ 
height: 15px; /* 체크박스의 높이를 지정 */ 
line-height: 15px; /* 세로정렬을 위해 높이값과 일치 */ 
margin: -2px 5px 0 0; 
text-align: center; 
vertical-align: middle; 
background: #e8e8e8; 
border: 1px solid #cacece; 
border-radius : 3px; 
/* box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); */ /*아이폰에서 에러, 주석처리 20200524*/
} 

.checkbox_grayStyle input[type="checkbox"] + label:active:before, 
.checkbox_grayStyle input[type="checkbox"]:checked + label:active:before { 
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
} 

.checkbox_grayStyle input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */ 
content: '\2714'; /* 체크표시 유니코드 사용 */ 
color: #b3b3b3; 
/*text-shadow: 1px 1px #fff;*/ 
/*background: #65a2f8;*/

background: #e8e8e8; 
border-color: #adb8c0; 
box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); 
}