/* 카테고리 전체를 감싸는 래퍼 (스크롤바 시각적 처리 및 배경 등) */
.category-wrapper {
    width: 100%; /* 부모 요소의 너비를 꽉 채움 */
    background-color: #111b22; /* 카테고리 바의 배경색 */
    padding: 10px 0; /* 상하 여백 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 그림자 효과 */
    position: sticky; /* 스크롤 시 상단에 고정 (선택 사항) */
    top: 0; /* 상단에 고정될 위치 */
    z-index: 100; /* 다른 콘텐츠 위로 오도록 설정 */

    
}

/* 실제 가로 스크롤이 적용될 컨테이너 */
.category-container {
    display: flex; /* 자식 요소들을 한 줄에 정렬 */
    overflow-x: auto; /* 가로 내용이 넘칠 경우 스크롤바 표시 */
    -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤링 */
    padding: 10 15px; /* 좌우 패딩을 주어 스크롤 시작/끝이 잘 보이도록 */
    /* 스크롤바 숨기기 (선택 사항) */
/*    scrollbar-width: none;*/ /* Firefox */
/*    -ms-overflow-style: none;*/ /* IE and Edge */



}


/* 웹킷 기반 브라우저(Chrome, Safari 등)에서 스크롤바 숨기기 */
.category-container::-webkit-scrollbar {
  /*  display: none;*/
}

/* 각 카테고리 항목 스타일 */
.category-item {
    flex-shrink: 0; /* 항목이 줄어들지 않도록 설정 (중요!) */
    margin-right: 6px; /* 항목 간 간격 */
    padding: 6px 15px;
    background-color: #272b3a; /* 항목 배경색 */
    border-radius: 10px; /* 둥근 모서리 */
    /*transition: background-color 0.2s ease, color 0.2s ease;*/

/*
    color: #ffffea;
    font-size: 0.8em;
    white-space: nowrap;
    cursor: pointer;
*/
}


.category-item a {
    color: #ffffea; /* 항목 글자색 */
    font-size: 0.8em;
    white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 (중요!) */
    cursor: pointer;
}




.category-item:last-child {
    margin-right: 0; /* 마지막 항목의 오른쪽 마진 제거 */
}

/*
.category-item:hover {
    background-color: #47a9ea;
    color: #fff;
}
*/

/* 현재 활성화된 카테고리 항목 스타일 (선택 사항) */
.category-item.active {
    background-color: #47a9ea;
    color: #222;
    font-weight: bold;
}







/* 스크롤바 전체 스타일 */
.category-container::-webkit-scrollbar {
    width: 10px;  /* 세로 스크롤바의 너비 */
    height: 10px; /* 가로 스크롤바의 높이 */
    background-color: transparent; /* 스크롤바가 없을 때의 배경을 투명하게 */
}

/* 스크롤바 트랙 (움직이는 핸들의 배경) */
.category-container::-webkit-scrollbar-track {
    background: #2a3b4c; /* 트랙 색상: 박스 배경색과 유사하여 자연스럽게 어울림 */
    border-radius: 5px; /* 트랙 모서리 둥글게 */
}

/* 스크롤바 핸들 (실제로 드래그하는 부분) */
.category-container::-webkit-scrollbar-thumb {
    background: #6a9edb; /* 핸들 색상: 강조색인 차분한 파랑 */
    border-radius: 5px; /* 핸들 모서리 둥글게 */
    /* 핸들 주변에 트랙 색상과 동일한 테두리 (옵션: 핸들을 조금 더 작아 보이게 함) */
    border: 2px solid #2a3b4c;
}

/* 스크롤바 핸들 호버 시 */
.category-container::-webkit-scrollbar-thumb:hover {
    background: #8bc4ff; /* 호버 시 핸들 색상: 좀 더 밝은 파랑으로 반응성 강조 */
}