.row {
    width: 100% !important;
}
.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;
}

/* 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;
    }

/* 전체 컨테이너 */
.sub-menu-container {
    width: 100%;
    overflow-x: auto; /* 가로 스크롤 활성화 */
    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */
    background-color: #ffffff;
    padding: 12px 0;
    border-bottom: 1px solid #eee; /* 하단 구분선 (선택 사항) */
}

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

/* 배지 그룹 */
.badge-menu {
    display: flex; /* 가로 나열 */
    padding: 0 15px;
    gap: 8px; /* 배지 사이 간격 */
}

/* 개별 배지 (링크) */
.badge-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 50px; /* 완전 둥근 형태 */
    background-color: #f2f4f7;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none; /* 밑줄 제거 */
    white-space: nowrap; /* 줄바꿈 방지 필수 */
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

/* 호버 상태 */
.badge-item:hover {
    background-color: #e5e7eb;
    color: #111827;
}

/* 활성화 상태 (Active) */
.badge-item.active {
    background-color: #e83e8c; /* 강조색 */
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(232, 62, 140, 0.2);
}

/* 이미지 감싸는 영역 */
.item-image-wrapper {
    position: relative;
    overflow: hidden;
}

/* 좌측 상단 최다판매 아이콘(배지) */
.badge-best {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #e65100; /* 오렌지색 배경 */
    color: white;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 3px;
}

/* 우측 상단 할인율 (3%) */
.discount-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ff4d4d; /* 빨간색 글씨 */
    font-size: 18px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.8);
}

/* 상품 카드 컨테이너 */
.item-card {
    width: 100%;
    margin-bottom: 20px;
}

/* 이미지 박스 (기준점) */
.image-box {
    position: relative;
    width: 100%;
    background-color: #f9f9f9;
    overflow: hidden;
}

.image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* 좌측 상단 배지 */
.badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 2px 6px;
    font-size: 0.75rem; /* 반응형 폰트 크기 */
    font-weight: bold;
    border-radius: 2px;
    z-index: 10;
}

.badge-orange {
    background-color: #ff5722;
    color: #ffffff;
}

/* 우측 상단 할인율 */
.discount-percent {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #ff3b3b; /* 강조 빨간색 */
    font-size: 1.25rem; /* 화면 크기에 맞춰 조절 */
    font-weight: 800;
    z-index: 10;
}
.item-title {
        font-size: 0.8rem; /* 아이콘 크기 */
        color: #212121; /* 연한 회색 아이콘 */
        line-height: 0.98rem;
        margin-bottom: 8px;
    }
.item-small-title {
        font-size: 0.7rem; /* 아이콘 크기 */
        color: #5D5D5D; /* 연한 회색 아이콘 */
        line-height: 0.7rem;
        margin-bottom: 8px;
    }
.item-price-sale {
        font-size: 0.7rem; /* 아이콘 크기 */
        color: #575757; /* 연한 회색 아이콘 */
        line-height: 0.7rem;
        margin-bottom: 5px;
    }
.item-price {
        font-size: 0.9rem; /* 아이콘 크기 */
        color: #B90004; /* 연한 회색 아이콘 */
        line-height: 0.9rem;
        margin-bottom: 8px;
    }
.item {
    border: 1px solid #eeeeee; /* 연한 회색 테두리 */
    border-radius: 8px;        /* 모서리를 살짝 둥글게 (부드러운 느낌) */
    padding: 15px;             /* 내부 여백 (내용물이 테두리에 붙지 않게) */
    background-color: #ffffff; /* 배경은 흰색 */
    transition: all 0.3s ease; /* 마우스 호버 시 부드러운 전환 효과 */
    box-sizing: border-box;    /* 패딩이 너비에 영향을 주지 않도록 설정 */
    height: 100%;              /* 높이를 통일하고 싶을 때 사용 */
}

/* 마우스를 올렸을 때(Hover) 효과 */
.item:hover {
    border-color: #dddddd;     /* 테두리 색상을 살짝 더 진하게 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 은은한 그림자 추가 */
    transform: translateY(-3px); /* 위로 살짝 떠오르는 느낌 (생략 가능) */
}
/* --- 가로 스크롤 메뉴바 (모바일용) --- */
@media (max-width: 768px) {
    .item {
        width: 87%;
        border: 1px solid #eeeeee; /* 연한 회색 테두리 */
        border-radius: 5px;        /* 모서리를 살짝 둥글게 (부드러운 느낌) */
        padding: 10px;             /* 내부 여백 (내용물이 테두리에 붙지 않게) */
        background-color: #ffffff; /* 배경은 흰색 */
        transition: all 0.3s ease; /* 마우스 호버 시 부드러운 전환 효과 */
        box-sizing: border-box;    /* 패딩이 너비에 영향을 주지 않도록 설정 */
        height: 100%;              /* 높이를 통일하고 싶을 때 사용 */
    }
    /* 메뉴바 컨테이너: 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; /* 액티브 글자색(흰색) 유지 */
    }
    .badge {
        font-size: 0.65rem;
        top: 0.3rem;
        left: 0.3rem;
    }
    .discount-percent {
        font-size: 1rem;
        top: 0.3rem;
        right: 0.3rem;
    }
    .container-fluid{
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    .row{
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .col-lg-3{
        margin-right: 0px !important;
        margin-left: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .col-lg-9{
        margin-right: 0px !important;
        margin-left: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}