.centerimg{
    display: flex;
    justify-content: center; /* 가로 가운데 정렬 */
}
.mousecursor{
	cursor:pointer;
}
.icon-small {
    width: 25px !important;
    height: 25px !important
}

/* PC 및 전체 공통 스타일 */

/* 1. 전체 메뉴바 컨테이너 */
.scroll-menu-container {
    width: 100%;
    background-color: #f8f9fa; /* 연한 회색 배경 */
    border-bottom: 1px solid #e9ecef;
    padding: 5px 0; /* 위아래 내부 여백을 줄임 */
    position: sticky; /* 스크롤 시 상단 고정 */
    top: 0;
    z-index: 1000;
}

/* 2. 가로 스크롤 메뉴 본체 */
.scroll-menu {
    display: flex;
    flex-wrap: nowrap; /* 한 줄로 나열 */
    overflow-x: auto; /* 넘치는 메뉴 가로 스크롤 */
    padding: 10px 20px;
    gap: 15px; /* 메뉴 간 간격 */
    -ms-overflow-style: none; /* IE 스크롤바 숨기기 */
    scrollbar-width: none; /* 파이어폭스 스크롤바 숨기기 */
}


.scroll-menu::-webkit-scrollbar {
    display: none; /* 크롬, 사파리 스크롤바 숨기기 */
}

/* 3. 개별 메뉴 버튼 스타일 */
.menu-item {
        width: 50px !important;  /* 기존 120px에서 절반으로 축소 */
        height: 40px !important; /* 정사각형 모양으로 변경 */
        margin-right: 8px;      /* 간격 좁힘 */
    }


/* 4. 아이콘 및 텍스트 색상 (기본: 연한 회색) */
.menu-item i {
        margin-bottom: 0 !important; /* 아래 여백 제거하여 정중앙 배치 */
        font-size: 1.5rem;           /* 아이콘 크기 살짝 조정 */
    }

.menu-item span {
        display: none !important; /* PC에서는 글자를 완전히 제거 */
    }

/* 5. 마우스 오버(Hover) 효과 */
.menu-item:hover {
        position: relative;
    }

.menu-item:hover i,
.menu-item:hover span {
    color: #495057 !important; /* 호버 시 진한 회색 */
}

/* 6. 액티브 상태 (강력 적용) */
.menu-item.active {
        background-color: transparent !important; 
        box-shadow: none !important;
    }
.menu-item.active i {
        color: #e83e8c !important; 
        transform: scale(1.1); /* 선택사항: 강조를 위해 살짝 키움 */
        transition: transform 0.3s ease;
    }
.menu-item.active span {
        color: #e83e8c !important;
        font-weight: 700;
    }


/* style.css */

/* --- 가로 스크롤 메뉴바 (모바일용) --- */
@media (max-width: 768px) {
    .textdesc {
        font-size: 0.75rem;          /* 모바일에 적당한 글자 크기 */
    }
    /* 메뉴바 컨테이너: navbar 아래에 배치 */
    .scroll-menu-container {
        width: 100%;
        background-color: #f8f9fa; /* 배경색 (연한 회색 바탕) */
        border-bottom: 1px solid #e0e0e0;
        overflow: hidden; /* 자식이 넘치는 것을 숨김 */
        position: relative;
        z-index: 999; /* 다른 콘텐츠보다 위에 배치 */
    }

    /* [핵심] 가로 스크롤 구현 */
    .scroll-menu {
        display: flex; /* 한 줄로 나열 */
        flex-wrap: nowrap; /* 줄바꿈 방지 */
        overflow-x: auto; /* 가로 스크롤 허용 */
        -webkit-overflow-scrolling: touch; /* 모바일에서 부드러운 스크롤 */
        padding: 5px 2%; /* 좌우 여백 */
        scroll-behavior: smooth; /* 스크롤 애니메이션 */
    }

    /* 스크롤바 숨기기 (디자인 깔끔하게) */
    .scroll-menu::-webkit-scrollbar {
        display: none;
    }

    /* 개별 메뉴 버튼 */

    .menu-item {
        flex: 0 0 auto; /* 크기 고정 (가로로 늘어나지 않게) */
        display: flex;
        flex-direction: column; /* 위에 아이콘, 아래 메뉴명 */
        align-items: center;
        justify-content: center;
        width: auto !important; 
        min-width: 60px;           /* 최소 폭은 유지 */
        max-width: 85px;          /* 너무 길어지는 것 방지 */
        height: auto !important;    /* 높이는 내용에 맞게 */
        min-height: 60px;           /* 최소 폭은 유지 */
        max-height: 85px;          /* 너무 길어지는 것 방지 */
        padding: 10px 15px;        /* 좌우 여백을 충분히 주어 글자 보호 */
        margin-right: 10px; /* 버튼 간 간격 */
        border: none;
        background: transparent; /* 기본 배경 투명 */
        cursor: pointer;
        border-radius: 8px; /* 둥근 모서리 */
        transition: all 0.2s ease;
    }


    /* [2. 색상] 기본 상태: 연한 회색 */
    .menu-item i {
        font-size: 1.6rem; /* 아이콘 크기 */
        color: #adb5bd; /* 연한 회색 아이콘 */
        margin-bottom: 8px;
    }

    .menu-item span {
        display: block !important;    /* 숨겨졌던 글자를 다시 표시 */
        font-size: 0.75rem;          /* 모바일에 적당한 글자 크기 */
        color: #adb5bd;              /* 기본 연한 회색 */
        margin-top: 5px;             /* 아이콘과의 간격 */
        line-height: 1.2;            /* 두 줄 처리 시 줄간격 */
        text-align: center;
    }

    /* [3. 액티브 상태] 색상 반전 */
    .menu-item.active {
        background-color: #e83e8c !important; /* 핑크색 배경 */
    }

    .menu-item.active i,
    .menu-item.active span {
        color: #ffffff !important;   /* */
    }

    /* [추가] 마우스 오버(Hover) 시 스타일 */
    .menu-item:hover {
        background-color: rgba(0, 0, 0, 0.05); /* 아주 연한 회색 배경색 추가 */
        text-decoration: none;
    }

    /* 마우스 오버 시 아이콘과 글자 색상을 조금 더 진하게 */
    .menu-item:hover i,
    .menu-item:hover span {
        color: #6c757d !important; /* 기본 연한 회색(#adb5bd)보다 진한 회색 */
    }

    /* [중요] 이미 액티브(Pink) 상태인 버튼은 호버 시에도 색상이 유지되도록 설정 */
    .menu-item.active:hover {
        background-color: #e83e8c !important; /* 액티브 배경색 유지 */
        opacity: 0.9; /* 살짝 투명해지는 효과로 클릭감 제공 */
    }
    
    .menu-item.active:hover i,
    .menu-item.active:hover span {
        color: #ffffff !important; /* 액티브 글자색(흰색) 유지 */
    }
}