.btn-cart {position: relative;overflow: visible;}
.btn-cart .cart-badge {position: absolute;top: -5px;right: -5px;background: red;color: white;border-radius: 50%;font-size: 11px;width: 18px;height: 18px;display: flex;align-items: center;justify-content: center;line-height: 1;z-index: 10;}

/* 퀵메뉴 컨테이너 */
.quick-menu-container {
    position: fixed;
    right: 20px;
    top: 80%; /* 세로 중앙 정렬 */
    transform: translateY(-50%); /* 정확한 세로 중앙 정렬 */
    z-index: 1000000;
    display: flex;
    flex-direction: column; /* 기본은 세로 정렬 */
    gap: 10px; /* 메뉴 항목 간 간격 */
}

/* 메뉴 항목 공통 스타일 */
.quick-menu-item {
    background: linear-gradient(to right, #b92630, #7d1a21) #7d1a21; /* 기본 배경색 */
    color: white;
    padding: 10px 15px;
    border-radius: 25px; /* PC에서는 타원형 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
    min-width: 120px; /* PC에서 메뉴 너비 고정 */
}

.quick-menu-item:hover {
    background: #efb5b9; /* 호버 시 배경색 */
    transform: translateY(-2px);
}
/* 호버 시 텍스트 색상 변경 (선택 사항) */
.quick-menu-item:hover .text,
.quick-menu-item:hover .icon {
    /*color: #b92630; !* 호버 시 텍스트/아이콘 색상을 원래 배경색으로 변경 *!*/
}

.quick-menu-item .icon {
    margin-right: 8px;
    font-size: 18px;
}

/* 모바일에서만 보이는 햄버거 메뉴 버튼 */
.quick-menu-toggle {
    display: none; /* PC에서는 숨김 */
    background-color: #b92630; /* 기본 배경색 */
    color: white;
    padding: 13px;
    border-radius: 50%; /* 원형 버튼 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-align: center;
    font-size: 17px;
    line-height: 1;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.quick-menu-toggle:hover {
    background-color: #efb5b9; /* 호버 시 배경색 */
    transform: scale(1.05);
    /*color: #b92630; !* 호버 시 아이콘 색상 *!*/
}

/* 메뉴 리스트 (초기에는 PC에서만 보임) */
.quick-menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
    transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0.3s ease;
    padding-top: 0;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .quick-menu-container {
        right: 15px;
        top: auto;
        bottom: 20px; /* 하단 고정 */
        transform: none;
        align-items: flex-end; /* 아이콘이 우측에 붙도록 */
        gap: 15px; /* 버튼 간 간격 */
        flex-direction: column; /* 순서대로 쌓음 */
    }

    /* TOP 버튼 링크 자체의 스타일 */
    .quick-menu-item.top-button {
        order: 3;
        display: flex; /* TOP 버튼 항상 표시 */
        color: white;
        padding: 0; /* 패딩 제거 */
        border-radius: 50%; /* 원형 */
        min-width: 40px; /* 고정 너비 50px */
        height: 40px; /* 고정 높이 50px */
        justify-content: center; /* 내용 중앙 정렬 */
        align-items: center;
        box-sizing: border-box; /* 패딩, 보더 포함하여 크기 계산 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 유지 */
    }

    .quick-menu-item.top-button:hover {
        background-color: #efb5b9; /* 호버 시 배경색 */
        /*color: #b92630; !* 호버 시 아이콘 색상 *!*/
        transform: scale(1.05); /* 호버 시 확대 효과 */
    }

    .quick-menu-item.top-button .text {
        display: none; /* 모바일에서는 TOP 텍스트 숨김 */
    }
    .quick-menu-item.top-button .icon {
        margin-right: 0; /* 아이콘 마진 제거 */
        font-size: 24px; /* 아이콘 크기 키움 */
    }

    .quick-menu-toggle {
        display: block; /* 모바일에서 햄버거 버튼 표시 */
        order: 2; /* TOP 버튼 위에 오도록 order 지정 */
        margin-bottom: 0px; /* 햄버거 버튼과 메뉴 리스트 사이 간격 */
    }

    /* 메뉴 리스트 (모바일 초기에는 숨김) */
    .quick-menu-list {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        order: 1; /* 가장 위에 오도록 order 지정 */
        transition: opacity 0.3s ease, max-height 0.3s ease, visibility 0.3s ease, padding-top 0.3s ease;
    }

    .quick-menu-container.active .quick-menu-list {
        opacity: 1; /* 클릭 시 표시 */
        visibility: visible;
        max-height: 300px; /* 충분한 높이 (메뉴 개수에 따라 조절) */
        padding-top: 10px; /* 펼쳐질 때 상단 여백 추가 */
        margin-bottom: 15px; /* 펼쳐진 메뉴 리스트와 햄버거 버튼 사이 간격 */
    }

    /* 모바일에서 펼쳐진 메뉴 항목 스타일 */
    .quick-menu-item:not(.top-button) { /* TOP 버튼 제외한 다른 메뉴들 */
        min-width: auto;
        justify-content: flex-end;
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 25px; /* 모바일에서 다른 메뉴는 여전히 타원형 */
    }
    .quick-menu-item:not(.top-button) .icon {
        order: 2;
        margin-right: 0;
        margin-left: 8px;
    }
}

.quick-menu-item:link,
.quick-menu-item:visited {
    color: white;
    text-decoration: none;
}

.quick-menu-item:hover,
.quick-menu-item:focus,
.quick-menu-item:active {
    background-color: #efb5b9;
}