/* AutoComplete 드롭다운 z-index 문제 해결 */
/* autoComplete.js v10.2.7 기준 */

/* SCSS에서 컴파일된 기본 스타일도 포함 */
.autoComplete_wrapper {
width: 75%;
position: relative !important;
  z-index: 100 !important;
}

.autoComplete_wrapper > input {
width: unset;
height: unset;
border-radius: 0;
padding: 5px 5px 5px 13px;
border: solid 1px #dbdbdb;
background-color: #fff;
font-size: 14px;
letter-spacing: 0.35px;
text-align: left;
color: #787878;
background-image: unset;
background-size: unset;
background-position: unset;
background-repeat: unset;
}

.autoComplete_wrapper > input:focus {
  border: solid 1px #dbdbdb;
}

.autoComplete_wrapper > input::placeholder,
.autoComplete_wrapper > input:hover::placeholder,
.autoComplete_wrapper > input:focus::placeholder {
  color: #787878;
  transition: unset;
padding: 5px 5px 5px 13px;
  font-size: 14px;
  -webkit-transition: unset;
}

/* autoComplete 결과 리스트 스타일 */
.autoComplete_wrapper > ul {
  position: absolute !important;
  z-index: 9999 !important;
  top: 100% !important;
  left: 0 !important;
right: 0 !important;
background: #ffffff !important;
  border: 1px solid #dbdbdb !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
max-height: 300px !important;
overflow-y: auto !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 5px 0 0 0 !important;
  display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.autoComplete_wrapper > ul > li {
  padding: 10px !important;
cursor: pointer !important;
background-color: #fff !important;
}

.autoComplete_wrapper > ul > li:hover {
  background-color: #f5f5f5 !important;
}

.autoComplete_wrapper > ul > li.autoComplete_selected {
  background-color: #e6e6e6 !important;
}

/* 하이라이트된 텍스트 */
.autoComplete_wrapper ul[id^="autoComplete_list"] li mark,
[id^="autoComplete_list"] li mark {
    background-color: #ffd700 !important;
    font-weight: 700 !important;
}

/* 카테고리 선택 영역의 z-index 조정 */
.category-sel-group-wrap {
  position: relative;
  z-index: 1;
}

.filter-input-wrap {
  position: relative;
  z-index: 10;
  overflow: visible !important;
}

/* 필터 옵션 영역 */
.filter-options-wrap {
  position: relative;
  z-index: 1;
}

/* 드래그 앤 드롭 영역과의 충돌 방지 */
.drag-drop-or-upload-selected {
  position: relative;
  z-index: 1;
}

/* 카테고리 선택 영역이 활성화될 때 */
.category-sel-wrap:has(input:focus) {
  z-index: 1000 !important;
}

/* 모든 autoComplete 결과를 최상위로 */
#autoComplete_list_1,
#autoComplete_list_2,
[id^="autoComplete_list"] {
  z-index: 99999 !important;
  position: absolute !important;
  background: #ffffff !important;
  border: 1px solid #dbdbdb !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  display: block !important;
  visibility: visible !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 5px 0 0 0 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
}

/* autoComplete 리스트 아이템 스타일 강제 적용 */
#autoComplete_list_1 > li,
#autoComplete_list_2 > li,
[id^="autoComplete_list"] > li {
  position: relative !important;
  z-index: auto !important;
  display: block !important;
  visibility: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 15px !important;
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  transition: background-color 0.2s ease !important;
}

#autoComplete_list_1 > li:hover,
#autoComplete_list_2 > li:hover,
[id^="autoComplete_list"] > li:hover {
  background-color: #f5f5f5 !important;
}

#autoComplete_list_1 > li.autoComplete_selected,
#autoComplete_list_2 > li.autoComplete_selected,
[id^="autoComplete_list"] > li.autoComplete_selected {
  background-color: #e6e6e6 !important;
}

/* 모든 autoComplete 요소에 대한 강제 스타일 */
.autoComplete_wrapper ul[id^="autoComplete_list"] {
  z-index: 99999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 모바일에서도 잘 보이도록 */
@media (max-width: 768px) {
  .autoComplete_wrapper > ul,
  [id^="autoComplete_list"] {
    position: fixed !important;
    left: 5% !important;
    right: 5% !important;
    max-width: 90% !important;
  }
}