/* 전역 스타일 */
body {
    background-color: #ffffff; /* 전체 배경색 */
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Pretendard: 본문용 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* Nanum Gothic Coding: 제목용 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap');

/* Spoqa Han Sans Neo: 작가 이름용 */
@import url('https://spoqa.github.io/assets/spoqa-han-sans/css/SpoqaHanSansNeo.css');

/* SUIT: 태그용 */
@import url('https://cdn.jsdelivr.net/gh/surrounda/suit/fonts/stylesheet.css');

/* 본문 */
body {
    font-family: 'Pretendard', sans-serif; /* 본문용 폰트 */
    font-size: 16px;
    line-height: 1.6;
    color: #ffffff;
}


/* 결과 영역 */
.results-container {
    display: flex;
    flex-wrap: wrap; /* 줄 바꿈 허용 */
    gap: 20px; /* 항목 간 간격 */
    justify-content: flex-start; /* 왼쪽 정렬 */
    padding: 20px;
    width: 100%;
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
}

.no-results {
    padding: 10px;
    text-align: center;
    color: #888;
    margin-top: 20px;
    font-size: 18px;
}

/* 자동완성 목록 스타일 */
.autocomplete-list {
    position: absolute;
    top: 100%; /* 검색창 바로 아래에 배치 */
    right: 0; /* 검색창 오른쪽에 맞춰 배치 */
    width: 100%; /* 검색창 너비에 맞춤 */
    background-color: #ffbb00; /* 배경 흰색 */
    color: #ffffff; /* 글자 검정 */
    border: 1px solid #ccc; /* 테두리 */
    z-index: 1000; /* 다른 요소 위에 표시 */
    max-height: 200px; /* 최대 높이 */
    overflow-y: auto; /* 스크롤 활성화 */
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

.autocomplete-list li {
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
}

.autocomplete-list li:hover {
    background-color: #f0f0f0; /* 마우스 오버 배경색 */
}



/* 버튼 호버 효과 */
.scroll-to-top-btn:hover {
    opacity: 0.8; /* 호버 시 약간 투명 */
}


/* 팝업 스타일 */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #440b02;
    color: white;
    padding: 20px 40px;
    border-radius: 10px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup.fade-in {
    opacity: 1;
    visibility: visible;
}

.popup.hidden {
    opacity: 0;
    visibility: hidden;
}

#autocompleteList {
    display: none; /* 기본적으로 숨김 */
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 카테고리 바로 아래에 소개글 */
#recommendation-text {
    display: block;
    text-align: center; /* 중앙 정렬 */
    margin: 20px auto;
    font-size: 18px;
    color: #440b02;
    position: relative; /* 위치를 동적으로 변경 가능 */
    transition: margin-top 0.3s ease; /* 부드러운 이동 효과 */
}