/* 기본 리셋 */
body,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

body {
    margin-top: -47px; /* 헤더 높이 */
}

/* 1. 최상단 메뉴 컨테이너 */
.top-menu-container {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0; /* 메뉴 전체 하단 경계선 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
}

/* 2. 가로 스크롤(스와이프) 설정 - 핵심 */
.menu-list {
    display: flex; /* 항목을 가로로 나열 */

    /* 🌟 스와이프/가로 스크롤을 위한 핵심 속성 🌟 */
    overflow-x: auto; /* 내용이 넘칠 때만 스크롤바 표시 */
    -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 제공 */
    white-space: nowrap; /* 메뉴 항목이 줄바꿈되지 않도록 강제 */

    padding: 0;

    /* 스크롤바 숨기기 (선택 사항) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */

    cursor: grab;
}

/* 드래그 중 커서를 잡아당기는 모양으로 변경 */
.menu-list.active-dragging {
    cursor: grabbing;
}

.menu-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* 3. 개별 메뉴 항목 스타일 */
.menu-list > li {
    flex-shrink: 0; /* 내용이 넘칠 때 항목이 축소되지 않도록 설정 */
    padding: 12px 16px;
    font-size: 15px;
    cursor: pointer;
    color: #333;
    text-align: center;
    user-select: none;
    -webkit-user-select: none; /* Chrome, Safari 지원 */
    -moz-user-select: none; /* Firefox 지원 */
    -ms-user-select: none; /* IE/Edge 지원 */
}

/* 4. border로 구분 */
.menu-list > li:not(:last-child) {
    /* 마지막 항목을 제외한 모든 항목의 오른쪽에 얇은 border 추가 */
    border-right: 1px solid #f0f0f0;
}

/* 호버 효과 */
.menu-list > li:hover {
    background-color: #f5f5f5;
}