.webtoon-item {
    flex: 1 0 calc(20% - 20px); /* 한 줄에 5개 배치 */
    max-width: calc(20% - 20px);
    max-height: 600px;
    box-sizing: border-box;
    background-color: rgba(231, 231, 231, 0.288); /* 컴포넌트 배경색 */
    color: black;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: transform 0.3s ease;
    overflow: hidden; /* 내부 내용이 컴포넌트를 벗어나지 않도록 설정 */
}

.webtoon-item:hover {
    transform: scale(1.05); /* 호버 시 확대 효과 */
}

.webtoon-image {
    width: 100%; /* 가로를 컴포넌트 너비에 맞춤 */
    height: 200px; /* 모든 이미지의 높이를 고정 (필요에 따라 조정 가능) */
    border-radius: 5px; /* 둥근 모서리 */
    display: block;
    object-fit: cover; /* 이미지 비율을 유지하며 공간에 맞게 자름 */
}

.webtoon-tags {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap; /* 태그 줄 바꿈 허용 */
    margin-top: 10px;
}

.webtoon-tag {
    background-color: #f0f0f0; /* 기본 태그 배경색 */
    color: #333333; /* 기본 텍스트 색 */
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
}

.webtoon-tag.highlighted-tag {
    background-color: #FF9800; /* 선택된 태그 배경색 */
    color: white; /* 선택된 태그 텍스트 색 */
    border: 1px solid #FF9800;
    font-weight: bold;
}

.more-tags{
    color: #333333; /* 기본 텍스트 색 */
    padding: 5px 10px;
    font-size: 12px;
}


/* 제목 */
.webtoon-title {
    font-family: 'Nanum Gothic Coding', sans-serif; /* 제목용 폰트 */
    font-size: 14px;
    font-weight: 700;
    color: #222;
    text-decoration: none;
    margin-bottom: 12px;
}

.popup-title-link {
    text-decoration: none; /* 밑줄 제거 */
    color: inherit; /* 텍스트 색상 상속 */
}

.popup-title-link:hover {
    text-decoration: none; /* 호버 시에도 밑줄 제거 */
    color: #FF9800; /* 호버 시 색상 변경 (선택 사항) */
}


/* 작가 이름 */
.webtoon-author {
    font-family: 'Spoqa Han Sans Neo', sans-serif; /* 부가 텍스트용 폰트 */
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

/* 태그 버튼 기본 스타일 */
.webtoon-tag-button {
    font-family: 'SUIT', sans-serif; /* 태그용 폰트 */
    font-size: 14px;
    background-color: #ffffff; /* 태그 배경색 */
    color: rgb(0, 0, 0); /* 태그 텍스트 색상 */

    border: 1px solid #ffba25;
    border-radius: 25px;
    padding: 5px 10px;
    margin: 2px;
    color: #440b02;
    cursor: pointer;
    transition: all 0.3s ease; /* 부드러운 호버 효과 */
}

.webtoon-tag-button:hover {
    background-color: #ffba25; /* 호버 시 배경색 */
    color: white; /* 호버 시 텍스트 색상 */
    transform: scale(1.1); /* 호버 시 약간 확대 */
}

/* 선택된 태그 버튼 스타일 */
.webtoon-tag-button.highlighted-tag {
    background-color: #FF9800; /* 선택된 상태 배경색 */
    color: white; /* 선택된 상태 텍스트 색상 */
    border: 1px solid #FF9800; /* 선택된 상태 테두리 */
    font-weight: bold; /* 강조 */
}

.webtoon-item {
    position: relative;
    /* 추가 스타일 */
}

.component-logo-container {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    z-index: 10;
}

.component-logo {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 로고 비율 유지 */
}

/* 모바일 환경에서 로고 위치와 크기 조정 */
@media (max-width: 768px) {
    .component-logo-container {
        right: auto; /* 오른쪽 위치 초기화 */
        left: 10px; /* 왼쪽 상단에 위치 */
        width: 30px; /* 모바일에서 크기 조정 */
        height: 30px; /* 모바일에서 크기 조정 */
    }

    .component-logo {
        width: 100%; /* 로고 이미지 크기 조정 */
        height: 100%;
        object-fit: contain;
    }
}



/* 모바일 전용 레이아웃 */
@media (max-width: 768px) {
    .webtoon-item {
        display: flex; /* 가로 정렬 */
        flex-direction: row; /* 이미지와 텍스트를 한 줄로 */
        align-items: flex-start; /* 상단 정렬 */
        width: 100%; /* 전체 폭 사용 */
        margin: 10px 0; /* 상하 간격 추가 */
        padding: 10px; /* 내부 여백 추가 */
        box-sizing: border-box; /* 패딩 포함 크기 계산 */
        background-color: rgba(231, 231, 231, 0.288); /* 참조된 배경색 */
        color: black; /* 텍스트 기본 색상 */
        border-radius: 10px; /* 둥근 모서리 */
        transition: transform 0.3s ease; /* 호버 효과 */
        overflow: hidden; /* 내용 넘침 방지 */
    }

    .webtoon-item:hover {
        transform: scale(1.05); /* 호버 시 확대 효과 */
    }

    .webtoon-link {
        display: inline-block; /* 링크 영역을 이미지 크기로 제한 */
        width: 100px; /* 링크 가로 크기 */
        height: 120px; /* 링크 세로 크기 */
    }

    .webtoon-image {
        display: block; /* 이미지를 블록 요소로 */
        width: 100px; /* 이미지 가로 크기 */
        height: 120px; /* 이미지 세로 크기 */
        border-radius: 5px; /* 둥근 모서리 */
        object-fit: cover; /* 이미지 비율 유지하며 공간 채우기 */
    }

    .webtoon-content {
        flex: 1; /* 남은 공간을 모두 차지 */
        display: flex;
        flex-direction: column; /* 세로 정렬 */
        justify-content: space-between; /* 위아래로 적절히 공간 분배 */
        padding-left: 10px; /* 이미지와 텍스트 간격 */
        text-align: left; /* 텍스트 및 태그 왼쪽 정렬 */
    }

    .webtoon-title {
        font-family: 'Nanum Gothic Coding', sans-serif; /* 참조된 폰트 */
        font-size: 14px; /* 참조된 글자 크기 */
        font-weight: 700; /* 굵은 텍스트 */
        color: #222; /* 참조된 제목 색상 */
        margin-bottom: 12px; /* 아래 간격 */
        text-decoration: none; /* 밑줄 제거 */
        text-align: left; /* 제목 왼쪽 정렬 */
    }

    .webtoon-title:hover {
        color: #FF9800; /* 호버 시 강조 색상 */
    }

    .webtoon-author {
        font-family: 'Spoqa Han Sans Neo', sans-serif; /* 참조된 폰트 */
        font-size: 13px; /* 참조된 글자 크기 */
        color: #555; /* 참조된 작가 색상 */
        margin-bottom: 8px; /* 아래 간격 */
        text-align: left; /* 작가 왼쪽 정렬 */
    }

    .webtoon-tags {
        display: flex; /* 가로 정렬 */
        flex-wrap: wrap; /* 태그 줄바꿈 허용 */
        gap: 5px; /* 태그 간 간격 */
        margin-top: 10px; /* 태그 영역 상단 간격 */
        justify-content: flex-start; /* 태그 왼쪽 정렬 */
        max-height: 50px; /* 두 줄까지만 표시 */
        overflow-y: auto; /* 넘칠 경우 세로 스크롤 활성화 */
        scrollbar-width: thin; /* 스크롤바 얇게 (Firefox) */
        scrollbar-color: #ddd #f9f9f9; /* 스크롤바 색상 (Firefox) */
    }

    .webtoon-tags::-webkit-scrollbar {
        width: 8px; /* 스크롤바 너비 */
    }

    .webtoon-tags::-webkit-scrollbar-thumb {
        background-color: #ddd; /* 스크롤바 색상 */
        border-radius: 4px; /* 둥근 스크롤바 */
    }

    .webtoon-tags::-webkit-scrollbar-track {
        background-color: #f9f9f9; /* 스크롤바 트랙 색상 */
    }

    .webtoon-tag-button {
        font-family: 'SUIT', sans-serif; /* 참조된 태그 폰트 */
        font-size: 10px; /* 참조된 글자 크기 */
        background-color: #ffffff; /* 참조된 태그 배경색 */
        color: #440b02; /* 참조된 태그 텍스트 색상 */
        border: 1px solid #ffba25; /* 참조된 테두리 색상 */
        border-radius: 25px; /* 둥근 모서리 */
        padding: 5px 10px; /* 참조된 패딩 */
        margin: 2px; /* 간격 */
        cursor: pointer; /* 마우스 포인터 */
        transition: all 0.3s ease; /* 부드러운 호버 효과 */
    }

    .webtoon-tag-button:hover {
        background-color: #ffba25; /* 호버 시 배경색 */
        color: white; /* 호버 시 텍스트 색상 */
        transform: scale(1.1); /* 호버 시 확대 효과 */
    }

    .webtoon-tag-button.highlighted-tag {
        background-color: #FF9800; /* 참조된 강조 태그 배경색 */
        color: white; /* 참조된 강조 태그 텍스트 색상 */
        border: 1px solid #FF9800; /* 강조 테두리 */
        font-weight: bold; /* 굵게 */
    }
}