/* Floating Quick Menu */
.quick-menu-container {
    position: fixed;
    right: 30px;
    bottom: 50px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Reset global gap, managed by wrapper */
    align-items: center;
}

.fab-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10000;
}

.quick-items-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    bottom: 60px;
    /* Start above trigger */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    /* Buncier */
    transition-delay: 3s;
    /* Wait 3s before hiding */
    padding-bottom: 20px;
    /* Increase bridge */
}

/* Active Class for Toggle (Desktop & Mobile) */
.fab-wrapper.active .quick-items-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
    pointer-events: auto;
}

.fab-wrapper.active .quick-btn.trigger .icon-circle {
    transform: scale(1.1);
}

.quick-btn.trigger .icon-circle {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    transition: transform 0.3s;
    box-shadow: 0 4px 15px rgba(0, 68, 148, 0.3);
}

.quick-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.quick-btn:hover {
    transform: scale(1.1) translateX(-5px);
}

.quick-btn .icon-circle {
    width: 45px;
    /* Smaller size */
    height: 45px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s;
    border: 2px solid #fff;
}

.quick-btn:hover .icon-circle {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.quick-text {
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s;
    pointer-events: none;
    position: absolute;
    right: 70px;
    /* 아이콘 왼쪽 */
    white-space: nowrap;
}

.quick-btn:hover .quick-text {
    opacity: 1;
    transform: translateX(0);
}

/* Colors - Cute & Vibrant */
/* Blog (Green for Naver) */
.quick-btn.blog .icon-circle {
    color: #03C75A;
    background: #e8fcf0;
}

/* Insta (Gradient) */
.quick-btn.insta .icon-circle {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}

/* Call (Blue/Mint) */
.quick-btn.call .icon-circle {
    background: #e3f2fd;
    color: #2196f3;
}

/* Reservation (Yellow/Orange) */
.quick-btn.res .icon-circle {
    background: #fff9c4;
    color: #fbc02d;
}

/* Top (White with Dark Arrow) */
/* Top (Blue Rounded Square) */
.quick-btn.top {
    margin-bottom: 5px;
    /* Tighter margin */
    margin-top: 0;
}

.quick-btn.top .icon-box {
    width: 50px;
    /* Smaller */
    height: 50px;
    background: #3b82f6;
    /* Bright Blue */
    color: #fff;
    border-radius: 14px;
    /* Adjust radius */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
    transition: all 0.3s;
    border: 2px solid #3b82f6;
}

.quick-btn.top:hover .icon-box {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.5);
}

.quick-btn.top i {
    font-size: 1.1rem;
    margin-bottom: 1px;
    font-weight: bold;
}

.quick-btn.top .top-text {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* Lion Banner Integrated Override */
.fixed-qr-banner.qr-integrated {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 15px;
    width: 90px !important;
    /* Adjust size */
    transform: none;
}

.fixed-qr-banner.qr-integrated .qr-mascot {
    margin-bottom: -15px !important;
}

.fixed-qr-banner.qr-integrated .qr-mascot img {
    width: 50px !important;
}

.fixed-qr-banner.qr-integrated .qr-content-box {
    padding: 15px 5px 5px !important;
    background: #FFEB00;
    border-radius: 10px;
}

.fixed-qr-banner.qr-integrated img {
    /* Ensure styles don't conflict */
}

/* Small QR Banner */
.quick-qr-small {
    width: 70px;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin: 5px 0;
    transition: transform 0.3s;
    border: 1px solid #eee;
}

.quick-qr-small:hover {
    transform: scale(1.05);
}

.quick-qr-small img {
    width: 100%;
    display: block;
    margin-bottom: 3px;
}

.quick-qr-small span {
    font-size: 10px;
    font-weight: bold;
    color: #333;
    display: block;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .quick-menu-container {
        /* Keep it floating on right bottom, NOT a bar */
        right: 20px;
        bottom: 20px;
        flex-direction: column;
        align-items: center;
        background: transparent;
        padding: 0;
        box-shadow: none;
        border-radius: 0;
        left: auto;
        justify-content: flex-end;
    }

    /* Lion Banner: Hide or Small? */
    .fixed-qr-banner.qr-integrated {
        display: none;
        /* Hide Lion on mobile to save space, or keep it? */
        /* If kept, it stacks under the MENU button */
        /* If user wants it, we can keep it. But FAB interaction might overlap */
        /* Let's hide it for cleaner experience as directed before */
    }

    .quick-btn .icon-circle {
        /* Keep default size or slightly smaller? Default is 45px, OK */
    }

    .quick-text {
        /* Show text on side? Mobile usually no hover. */
        display: block;
        /* Shown */
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        right: 60px;
        /* Adjust */
    }

    /* Ensure click toggles menu */
}