/* JQUERY CUSTOM SELECT PLUGIN */

body {
   --select-background: white;
   --select-text-color: #333;
   --select-text-muted: #ccc;
   --select-item-hover: #f0f0f0;
   --select-item-hover-2: #e0e0e0;
   --select-label-background: white;
   --select-border-color: transparent;
   --select-arrow-color: #aaa;
}

@media (prefers-color-scheme: dark) {
   body.dark-mode {
       --select-background: #333;
       --select-text-color: #aaa;
       --select-text-muted: rgba(255, 255, 255, 0.3);
       --select-item-hover: #555;
       --select-item-hover-2: #777;
       --select-label-background: #333;
       --select-border-color: transparent;
       --select-arrow-color: #aaa;
   }
}

/*
.select-menu::-webkit-scrollbar {
   display: none;
}
*/



#select {
   min-width: max-content;
   color: var(--select-text-color);
   user-select: none;
   /*
   min-width: 300px;
   */
}

#select > * {
   box-sizing: border-box;
}

#select > li {
   list-style: none;
}

#select > li span.select-label {
   position: relative;
   display: inline-block;
   font-weight: 600;
   background: var(--select-label-background);
   /*
   height:32px;
   line-height:32px;
   */
   padding: 5px 32px 5px 15px;
   box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.05);
   border-radius: 6px;
   border: 1px solid #919191;
   transition: 0.2s;
   /*
   z-index: 1;
   */
}

/* 반응형 (최대 800px) */
@media (max-width: 800px) {
   #select > li span.select-label {
      line-height: 35px;
   }
}


#select > li.visible span.select-label,
#select > li:hover span.select-label {
   background: var(--select-item-hover);
   cursor: pointer;
}

#select > li span.select-label:after {
   content: "";
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 7px solid var(--select-arrow-color);
   position: absolute;
   right: 1.25em;
   top: 50%;
   transform: translateY(calc(-50% + 2px));
}

#select > li.hover:hover ul.select-menu,
#select > li.visible ul.select-menu {
   display: block;
}

/*
#select > li.visible .overlay {
   content: " ";
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: -1;
}
*/

#select > li ul.select-menu {
   display: none;
   position: absolute;
   background: var(--select-background);
   box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   border: 1px solid var(--select-border-color);
   /*
   width: 100%;
   */
   overflow: hidden;
   overflow-y: auto;
   max-height: 350px;
   z-index: 99999;
}

/* flex inline */
#select > li ul.select-menu .select-inline {
   display: flex;
   flex-wrap: nowrap;
}
#select > li ul.select-menu .select-title,
#select > li ul.select-menu.fix .select-title {
   display: block;
   font-weight: 600;
   padding: 0 0 0.5em 0;
   width: 50%;
}

#select > li ul.select-menu .select-title {
   display: none;
   width: 100%;
}

#select > li ul.select-menu .select-close {
   text-align: text-right;
}
/* search */
#select > li ul.select-menu .select-search {
   background: var(--select-background);
   top: 0;
   position: sticky;
   padding: 0.5em;
   z-index: 1;
   

   background-color: var(--select-background); /* 배경색 고정 */
   z-index: 3; /* 스크롤 영역 위로 설정 */
   padding: 10px; /* 필요에 따라 여백 조정 */
}


#select > li ul.select-menu .select-search input {
   background: var(--select-item-hover);
   color: var(--select-text-color);
   border: 0;
   outline: none;
   height:35px;
   border-radius: 6px;
   width:100%;
}


/* 빠른검색 반응형 스타일 */
/* 부모 컨테이너에 flex 적용 */
@media (max-width: 600px) {
	#select > li ul.select-menu .select-search {
		display: flex;
		align-items: center; /* 수직 정렬 */
		justify-content: space-between; /* 공간 배분 */
	}

	#select > li ul.select-menu .select-search input {
		flex: 1; /* 남은 공간을 차지 */
		border-radius: 6px;
		padding: 0 10px; /* 좌우 여백 */
	}

    #select > li ul.select-menu .select-search .select-inline {
		display: flex;
		align-items: center; /* 수직 중앙 정렬 */
		justify-content: center;
		width: auto; /* 적정 너비만 사용 */
		padding-left: 10px; /* 간격 조정 */
    }
   

	#select > li ul.select-menu .select-search .select-inline {
	   display: flex;
	   justify-content: flex-end;
	   width: 10%; /* X 버튼이 차지하는 공간 */
	   margin-left:20px;
	}

	#select > li ul.select-menu .select-search .select-close {
	   cursor: pointer;
	   font-size: 2.6em;
	   color: #1E1E22; /* X 버튼 색상 */
	}
}






/* menu */
#select > li ul.select-menu .select-list {
	position: relative;
	padding: 0.5em;
}



#select > li ul.select-menu .select-list li {
	position: relative;
	display: block;
	padding: 0.55em 0.8em;
	transition: 0.2s;
	font-size:14px;
	color:#1E1E22;
}

/* 600px 이하 화면 크기에서 적용 */
@media only screen and (max-width: 600px) {
	#select > li ul.select-menu .select-list li {
		font-size:17px;
	}
	
}



#select > li ul.select-menu .select-list li:not(.disabled):not(.selected):hover {
   background: var(--select-item-hover);
   border-radius: 6px;
   cursor: pointer;
}
#select > li ul.select-menu .select-list li.selected {
   background: var(--select-item-hover);
   border-radius: 6px;
}

#select > li ul.select-menu .select-list span p {
   display: inline-block;
   max-width: 90%;
}

/*라디오버튼표시, 글씨 길어질경우 잘리는경우 있어서 주석처리*/
/*
#select > li ul.select-menu .select-list li span:after {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   border: 2px solid var(--select-text-color);
   border-radius: 99px;
   top: calc(50% + 1px);
   right: 15px;
   transform: translateY(-50%);
   opacity: 0.5;
}


#select
   > li
   ul.select-menu:not(.responsive)
   .select-list
   li.selected
   span:before {
   content: "";
   position: absolute;
   width: 7px;
   height: 7px;
   background: var(--select-text-color);
   border: 3.5px solid var(--select-background);
   border-radius: 99px;
   top: calc(50% + 1px);
   right: 15px;
   transform: translateY(-50%);
}
*/


/* modes */
#select > li ul.select-menu .select-list li.selected {
   font-weight: 600;
}

#select > li ul.select-menu .select-list li.disabled {
   cursor: not-allowed;
   color: var(--select-text-muted);
}
#select > li ul.select-menu .select-list li.disabled span:after {
   opacity: 0;
}

/* position down directions */
#select > li.down.hover:hover span.select-label,
#select > li.down.visible span.select-label {
   border-bottom-right-radius: 10px;
   border-bottom-left-radius: 10px;
}

#select > li.down.hover:hover ul.select-menu,
#select > li.down.visible ul.select-menu {
   border-top-color: transparent;
   border-top-right-radius: 12px;
   border-top-left-radius: 12px;
}

/* UP */
/*
#select > li.up.hover:hover span.select-label,
#select > li.up.visible span.select-label {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
}

#select > li.up span.select-label:after {
   transform: rotate(180deg);
}

#select > li.up.hover:hover ul.select-menu,
#select > li.up.visible ul.select-menu {
   border-bottom-color: transparent;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   bottom: calc(100% - 4.5px);
}
*/



/* 600px 이하 화면 크기에서 적용 */
@media only screen and (max-width: 600px) {
    /* .menu_wrap이 화면 전체를 차지하도록 설정 */
    .menu_wrap {
        min-height: 100%; /* 전체 화면 높이를 차지 */
        height: 100%; /* height를 100%로 설정하여 화면을 꽉 채움 */
        position: absolute; /* 화면에 고정되도록 설정 */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0; /* 화면 전체를 차지하도록 설정 */
        pointer-events: none; /* 메뉴 외부 클릭 비활성화 */
        z-index: 9998; /* .menu_wrap이 select-menu보다 아래에 위치하도록 설정 */
    }

    /* .menu_wrap.active 상태일 때만 pointer-events를 auto로 설정 */
    .menu_wrap.active {
        pointer-events: auto; /* 메뉴 클릭 활성화(none으로 설정하면 menu_wrap 클릭안되게) */
        position: absolute; /* 메뉴가 화면 상단에 고정되도록 설정 */
        z-index: 9998; /* select-menu보다 아래에 위치하도록 설정 */
        top: 0; /* 화면 상단에 위치 */
        left: 0; /* 화면 왼쪽에 위치 */
        width: 100%; /* 화면 너비 전체를 차지 */
        height: 100%; /* 화면 높이 전체를 차지 */
        background-color: rgba(0, 0, 0, 0.5); /* 반투명한 어두운 배경 */
    }

    /* select-menu.responsive의 높이를 65%로 설정하고, 화면 아래에 고정 */
    #select > li ul.select-menu.responsive {
        border-radius: 0;
        position: fixed;
        left: 0;
        width: 100%;
        bottom: 0; /* 화면 아래에 붙도록 설정 */
        overflow: hidden;
        overflow-y: auto; /* 세로로 스크롤 가능 */
        pointer-events: auto; /* 메뉴 내부는 클릭 가능 */
        z-index: 99999; /* select-menu가 다른 메뉴 위에 오도록 설정 */
    }
	
	
	/* active 클래스가 적용된 상태에서 min-height 100% */
	.menu_wrap.active #select > li ul.select-menu.responsive {
		min-height: 100% !important;
	}

	/* select-close 클릭 시 active 클래스 제거 후 min-height 60% */
	.menu_wrap:not(.active) #select > li ul.select-menu.responsive {
		min-height: 60% !important;
	}	
	

    .select-menu.responsive {
        position: relative; /* 요소가 다른 요소 위로 올 수 있도록 상대적 위치 지정 */
        z-index: 99999; /* 메뉴보다 우선순위 높게 설정 */
    }

    /* .menu_wrap.active::before 요소가 특정 클래스가 있을 때만 적용되도록 */
    .menu_wrap.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9998; /* .menu_wrap보다 아래에 배치 */
        pointer-events: none;
    }

    /* .menu_wrap.active와 .overlay 사이의 상호작용을 처리 */
    .menu_wrap.active + .overlay {
        display: block; /* overlay를 표시 */
        position: absolute; /* overlay가 화면 전체를 덮도록 설정 */
        top: 0; /* 화면 상단에 위치 */
        left: 0; /* 화면 왼쪽에 위치 */
        width: 100%; /* 화면 너비 전체를 차지 */
        height: 100%; /* 화면 높이 전체를 차지 */
        z-index: 9997; /* .menu_wrap보다 아래에 배치되도록 설정 */
        pointer-events: all; /* overlay가 모든 상호작용을 차단하도록 설정 */
    }

    /* 초기 상태에서 overlay는 숨김 처리 */
    .overlay {
        display: none; /* overlay가 기본적으로 보이지 않도록 설정 */
    }

    /* 메뉴가 열리면 overlay에서 스크롤을 비활성화 */
    .menu_wrap.active .overlay {
        overflow: hidden; /* 스크롤 비활성화 */
    }

    /* overlay 영역의 기본 스타일 (스크롤이 필요할 경우를 대비) */
    .overlay {
        overflow: auto; /* 기본적으로 스크롤 가능 */
    }  
}




/*반응형 펼쳐지는 버튼 중 selectbox 위,아래 아이콘*/
/*
@media only screen and (max-width: 600px) {
   #select > li span.select-label:after {
       content: "";
       width: 0;
       height: 0;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-top: 7px solid var(--select-arrow-color);
       position: absolute;
       right: 1.25em;
       top: calc(50% + 2px);
       transform: translateY(calc(-50% + 2px)) rotate(180deg);
   }


   #select > li span.select-label:before {
       content: "";
       width: 0;
       height: 0;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-top: 7px solid var(--select-arrow-color);
       position: absolute;
       top: 15px;
       right: 1.25em;
       transform: translateY(calc(-50% + 2px));
   }
}
*/


select {
   display: none;
}