/* 모바일 숨기기 */
@media screen and (max-width: 768px) {
    #recommendation-text {
        display: none; /* 모바일에서는 숨김 */
    }
}



@media (max-width: 768px) {
    #searchButton {
        display: none; /* 모바일에서 검색 버튼 숨기기 */
    }
}


@media (max-width: 768px) {
    .results-container {
        margin-top: 90px; /* 결과 영역을 아래로 내림 */
    }
}



/* 반응형 디자인 */
/* 태블릿 화면 (1024px 이하): 한 줄에 4개 */
@media (max-width: 1024px) {
    .webtoon-item {
        flex: 1 0 calc(25% - 20px);
        max-width: calc(25% - 20px);
    }
}

/* 모바일 화면 (768px 이하): 한 줄에 3개 */
@media (max-width: 768px) {
    .webtoon-item {
        flex: none; /* flex 속성 해제 */
        width: 100%; /* 한 줄 전체를 차지 */
        max-width: 100%; /* 화면 크기를 초과하지 않도록 */
        padding: 5px; /* 패딩 축소 */
        margin: 0; /* 간격 최소화 */
    }

    .webtoon-title {
        font-size: 15px; /* 글자 크기 축소 */
    }

    .webtoon-author {
        font-size: 12px; /* 작가 이름 크기 축소 */
    }

    .webtoon-tags {
        font-size: 14px; /* 태그 버튼의 텍스트 크기 축소 */
    }

    .webtoon-tag-button {
        font-size: 14px; /* 태그 버튼 텍스트 축소 */
        padding: 3px 6px; /* 버튼 크기 축소 */
    }
}

/* 작은 모바일 화면 (480px 이하): 한 줄에 2개 */
@media (max-width: 480px) {
    .webtoon-item {
        flex: none; /* flex 속성 해제 */
        width: 100%; /* 한 줄 전체를 차지 */
        max-width: 100%; /* 화면 크기를 초과하지 않도록 */
    }

    .webtoon-title {
        font-size: 15px; /* 글자 크기 더 축소 */
    }

    .webtoon-author {
        font-size: 12px; /* 작가 이름 크기 더 축소 */
    }

    .webtoon-tags {
        font-size: 14px; /* 태그 버튼의 텍스트 크기 더 축소 */
    }

    .webtoon-tag-button {
        font-size: 14px; /* 태그 버튼 텍스트 더 축소 */
        padding: 2px 4px; /* 버튼 크기 더 축소 */
    }
}



/* 모바일 화면용 스타일 */
@media screen and (max-width: 768px) {
   
    .selected-tags-wrapper {
        top: 130px; /* 선택된 태그 목록의 모바일 위치 */
        left: 50%;
        transform: translateX(-50%);
    }
}