@charset "utf-8";

/* =========================================
   Mobile Bottom Quick Menu Style
   ========================================= */

/* Hide on Desktop by default */
#mobile_bottom_quick {
    display: none;
}

@media screen and (max-width: 768px) {
    #mobile_bottom_quick {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 75px; /* Increased for circular buttons */
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.08);
        z-index: 9999;
    }

    .quick_items {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: space-around;
        padding: 0 5px;
    }

    .q_item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #111; /* Changed to Black from Gray */
        transition: all 0.2s;
    }

    /* Circular Background for Icons */
    .icon_circle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .q_item i {
        font-size: 20px;
        color: #fff; /* Icons inside circles are always white */
    }

    .q_item img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        filter: brightness(0) invert(1); /* Naver PNGs to White */
    }

    .q_item span {
        font-size: 11px;
        font-weight: 700; /* Bold as requested */
        letter-spacing: -0.5px;
        color: #111; /* Explicitly black */
    }

    /* Channel Point Colors (Circle Backgrounds) */
    .q_item.consult .icon_circle { background: var(--accent-color); }
    .q_item.insta .icon_circle { 
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    }
    .q_item.youtube .icon_circle { background: #FF0000; }
    .q_item.blog .icon_circle { background: #03c75a; }
    .q_item.cafe .icon_circle { background: #03c75a; }

    /* Interaction */
    .q_item:active .icon_circle {
        transform: scale(0.9);
        filter: brightness(0.9);
    }

    /* Ensure page content has enough padding at the bottom to not be covered */
    #wrapper {
        padding-bottom: 75px !important;
    }
}