@charset "utf-8";

/* =========================================
   자동완성 (추천 검색어) 전용 스킨 CSS - 다크모드 대응 버전
   ========================================= */

.schTermBox {
    position: absolute;
    display: none;
    z-index: 106000;
    /* ✅ 배경색과 테두리색을 다크모드 변수로 변경 */
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #ced4da);
    border-radius: 12px;
    width: 100%; 
    min-width: 300px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* 리스트 영역 */
.suggest-list { 
    padding: 10px 0; 
    margin: 0; 
    list-style: none; 
    max-height: 400px; /* 너무 길어지지 않게 최대 높이 지정 */
    overflow-y: auto;  /* 스크롤 생성 */
}

/* 리스트 개별 아이템 디자인 */
.suggest-list li a {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 15px;
    /* ✅ 글자색 다크모드 대응 */
    color: var(--bs-body-color, #333);
    text-decoration: none;
}

/* 마우스 오버(Hover) 시 배경색 변경 (다크모드 대응) */
.suggest-list li a:hover { 
    background-color: var(--bs-tertiary-bg, #f8f9fa); 
}

/* 우측 꺾인 화살표 아이콘 */
.suggest-list li a .bi-arrow-up-left { 
    font-size: 13px; 
    transform: rotate(90deg); 
    /* ✅ 보조 글자색 다크모드 대응 */
    color: var(--bs-secondary-color, #ced4da); 
}

/* 하단 토글 및 닫기 버튼 영역 */
.suggest-footer { 
    font-size: 12px; 
    /* ✅ 하단 박스 배경색 및 상단 테두리 다크모드 대응 */
    background-color: var(--bs-tertiary-bg, #f8f9fa);
    border-top: 1px solid var(--bs-border-color, #dee2e6) !important;
}

/* 닫기 버튼 오버 효과 */
.cls-suggest:hover {
    color: var(--bs-body-color, #495057) !important;
}

/* 안내 문구 중앙 정렬을 위한 스타일 */
.suggest-list li.text-center {
    justify-content: center;
    padding: 20px 0;
}