/* 고정된 상단 컨테이너 */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 항상 최상위로 유지 */
    background-color: #ffba25;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    height: 74px; /* 높이 고정 */
}

/* 내부 요소 컨테이너 */
.fixed-header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; /* 양쪽 정렬 */
    padding: 10px 20px;
    gap: 10px;
}

/* 로고 */
.logo-container {
    text-align: center;
}

.logo-image {
    width: 170px; /* 이미지 크기 */
    height: 60px;
    height: auto;
}

/* Tags 박스 */
.tags-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tags-box {
    font-size: 30px;
    font-weight: bold;
    margin-right: 5px;
    color: #440b02;
}

/* 토글 버튼 스타일 */
.toggle-btn {
    width: 50px; /* 버튼 크기 */
    height: 50px;
    border-radius: 50%; /* 동그란 버튼 */
    background-image: url('../images/button1.png'); /* 배경 이미지 */
    background-size: contain; /* 이미지가 버튼에 맞게 */
    background-repeat: no-repeat;
    background-position: center; /* 이미지 중앙 정렬 */
    background-color: transparent; /* 배경색 투명 */
    border: none;
    cursor: pointer; /* 마우스 커서 변경 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    transition: opacity 0.3s ease;
}

/* 버튼 안의 문자 스타일 */
.toggle-text {
    position: absolute; /* 버튼 중앙 정렬 */
    top: 50%; /* 부모 기준 위에서 50% */
    left: 50%; /* 부모 기준 왼쪽에서 50% */
    transform: translate(-50%, -50%); /* 정확히 중앙 정렬 */
    color: #333; /* 문자 색상 */
    font-size: 16px; /* 문자 크기 */
    font-weight: bold; /* 글자 두께 */
    pointer-events: none; /* 버튼 클릭 방해 방지 */
}

/* 버튼 호버 효과 */
.toggle-btn:hover {
    opacity: 0.6; /* 호버 시 약간 투명해짐 */
}


/* 스크롤탑 버튼 */
.scroll-to-top-btn {
    width: 55px; /* 버튼 크기 */
    height: 55px;
    border-radius: 50%; /* 동그란 버튼 */
    background-image: url('../images/button2.png'); /* 배경 이미지 경로 */
    background-size: contain; /* 이미지 크기를 버튼 안에 맞춤 */
    background-repeat: no-repeat; /* 이미지 반복 방지 */
    background-position: center; /* 이미지 중앙 정렬 */
    background-color: #ffb820; /* 배경 투명 */
    border: none;
    cursor: pointer; /* 마우스 커서 변경 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    transition: opacity 0.3s ease; /* 부드러운 호버 효과 */
}


/* 버튼 호버 효과 */
.scroll-to-top-btn:hover {
    background-color: #ffffff;
}



/* 검색창 */
.search-bar-container {
    display: flex;
    gap: 10px;
}

#searchInput {
    width: 250px;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid #FFBA25;
}

#searchButton {
    padding: 4px 4px;
    border-radius: 5px;
    background-color: transparent;
    font-size: 40px;
    color: #000000;
    border: none;
    cursor: pointer;
}

/* 선택한 태그 목록 (상단 고정) */
.selected-tags-wrapper {
    display: none; /* 기본 숨김 */
    position: fixed;
    top: 74px; /* 네비게이션 바 아래 위치 */
    left: 0;
    width: 100%;
    background-color: #ffb820;
    z-index: 999;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    flex-wrap: wrap; /* 태그 줄 바꿈 허용 */
    gap: 10px;
    transition: height 0.3s ease; /* 부드러운 전환 효과 */
}

.selected-tags-wrapper.active {
    display: flex; /* 태그 활성화 시 표시 */
}

.selected-tags-title{
    color: #440b02;
}


.reset-button-wrapper {
    width: 100%; /* 버튼의 부모 컨테이너를 전체 너비로 설정 */
    display: flex; /* 플렉스 컨테이너 */
    justify-content: flex-start; /* 버튼을 왼쪽 정렬 */
}

.reset-tags-button {
    background-color: #440b02; /* 버튼 배경색 */
    color: white; /* 버튼 텍스트 색상 */
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 25px;
}

.reset-tags-button:hover {
    background-color: #E57373; /* 호버 상태 색상 */
}

.selected-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.selected-tag {
    background-color: #FF9800;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 20px;
}



.search-results-info {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333; /* 텍스트 색상 */
    text-align: center;
}




/* 카테고리바 */
/* 카테고리 컨테이너 (세로 스크롤 적용) */
/* 카테고리 컨테이너 스타일 */
#categoryContainer {
    position: fixed; /* 상단에 고정 */
    top: 74px; /* 네비게이션 바 높이 만큼 밀어줌 */
    left: 0;
    width: 100%;
    max-height: 300px; /* 카테고리 컨테이너 세로 총 크기 (카테고리 상위 이름 포함 높이)*/
    overflow-y: auto; /* 세로 스크롤 활성화 */
    background-color: #ffb820;
    box-sizing: border-box;
    z-index: 999; /* 네비게이션 바로 아래 */
    display: none;
}

/* 상위 카테고리 스타일 */
#categoryBar {
    position: sticky; /* 상단에 고정 */
    top: 0; /* 뷰포트 상단에 붙임 */
    gap: 10px;
    z-index: 1000; /* 다른 요소 위에 표시 */
    background-color: #ffba25; /* 배경색 */
    padding-bottom: 10px;
    margin-bottom: 10px; /* 하위 카테고리와의 간격 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: inline-block;
    flex-wrap: wrap;
    border-bottom: 2px solid #333;
    width: 100%;
    padding: 10px;
}

.category-button {
    background-color: #440b02;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.3s;
    border-radius: 25px;
}


.category-button.active {
    background-color: #ffba25;
    border: 1px solid #ccc;
}

.category-button:hover {
    background-color: #ffba25;
    border: 1px solid #ccc;
}

/* 하위 카테고리 스타일 */
#subCategoryBar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px;
}

#subCategoryBar .webtoon-tag-button{
    font-size: 10px; 
}

/* 태그 버튼 래퍼 */
.tags-wrapper {
    display: flex;          /* Flexbox 적용 */
    flex-wrap: wrap;        /* 화면 끝에 도달하면 줄 바꿈 */
    gap: 10px;              /* 버튼 사이 간격 */
    justify-content: flex-start; /* 왼쪽 정렬 */
    padding: 10px 0;        /* 상하 여백 추가 */
    box-sizing: border-box; /* 박스 모델 충돌 방지 */
    overflow-x: hidden;     /* 가로 스크롤바 숨김 */
}

/* 스크롤바 스타일링 */
.tags-wrapper::-webkit-scrollbar {
    height: 8px;
}

.tags-wrapper::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}

.tags-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
}

#pagination {
    display: flex; /* 플렉스 레이아웃으로 설정 */
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 */
    margin-top: 20px; /* 버튼 위쪽 여백 */
    padding: 10px; /* 내부 여백 추가 */
}

.pagination-button {
    background-color: #440b02; /* 버튼 배경색 */
    color: white; /* 텍스트 색상 */
    border: none; /* 테두리 제거 */
    border-radius: 25px; /* 동그란 모서리 */
    padding: 10px 20px; /* 버튼 크기 */
    font-size: 14px; /* 텍스트 크기 */
    font-weight: bold; /* 텍스트 굵기 */
    cursor: pointer; /* 포인터 표시 */
    transition: background-color 0.3s ease; /* 배경색 변경 효과 */
    margin: 0 10px; /* 버튼 간격 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
}

.pagination-button:disabled {
    background-color: #ccc; /* 비활성화 상태 색상 */
    cursor: not-allowed; /* 비활성화 상태 커서 */
}

.pagination-button:hover:not(:disabled) {
    background-color: #ffba25; /* 호버 시 색상 변경 */
}

.pagination-info {
    font-size: 16px; /* 페이지 정보 텍스트 크기 */
    font-weight: bold; /* 텍스트 굵기 */
    color: #333; /* 텍스트 색상 */
    margin: 0 10px; /* 페이지 정보와 버튼 간격 */
    text-align: center; /* 텍스트 중앙 정렬 */
}