.quick-menu {
    --quick-main: var(--color-coding-main);
    --quick-soft: var(--color-coding-soft);
    --quick-surface: #f1f6fc;
    --quick-edge: #d7e1ee;
    --quick-shadow: rgba(32, 43, 104, .14);
    --quick-scroll-shadow: rgba(32, 43, 104, .22);
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.quick-menu.meta {
    --quick-main: var(--color-academy-main);
    --quick-soft: var(--color-academy-soft);
    --quick-surface: #f6f1fa;
    --quick-edge: #e2d8ed;
    --quick-shadow: rgba(75, 40, 109, .14);
    --quick-scroll-shadow: rgba(75, 40, 109, .22);
}

.quick-menu-links {
    display: flex;
    flex-direction: column;
    width: 81px;
    padding: 5.4px;
    background: linear-gradient(145deg, #fff 15%, var(--quick-surface) 100%);
    border: .9px solid var(--quick-edge);
    border-radius: 16.2px;
    box-shadow: 0 12px 30px var(--quick-shadow),
                0 3px 6px rgba(28, 43, 61, .08),
                inset 0 1px 0 #fff,
                inset 0 -1px 0 rgba(28, 43, 61, .04);
    transition: box-shadow .3s ease;
    animation: quick-menu-appear .4s ease-out;
}

.quick-menu.is-scrolled .quick-menu-links,
.quick-menu.is-scrolled .quick-menu-toggle {
    box-shadow: 0 14px 34px var(--quick-scroll-shadow),
                0 4px 8px rgba(28, 43, 61, .1),
                inset 0 1px 0 #fff;
}

@keyframes quick-menu-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quick-menu-link {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 45px 16.2px;
    place-items: center;
    align-content: center;
    gap: 7.2px;
    height: 93.6px;
    flex: 0 0 93.6px;
    padding: 10.8px 3.6px;
    border-top: .9px solid transparent;
    border-radius: 10.8px;
    color: var(--quick-main);
    text-decoration: none;
    font-size: 10.8px;
    font-weight: 700;
    text-align: center;
    transition: background .2s ease, box-shadow .2s ease;
}

.quick-menu-link > span {
    line-height: 16.2px;
    white-space: nowrap;
}

.quick-menu-link + .quick-menu-link {
    border-top: .9px solid #edf0f4;
}

.quick-menu-link:hover,
.quick-menu-link:focus-visible {
    background: var(--quick-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9),
                0 2px 5px rgba(28, 43, 61, .08);
}

.quick-menu-link:focus-visible,
.quick-menu-toggle:focus-visible {
    outline: 1.8px solid var(--quick-main);
    outline-offset: 2.7px;
}

.quick-menu-link[aria-disabled="true"] {
    opacity: .5;
    cursor: default;
    background: transparent;
    box-shadow: none;
}

.quick-menu svg {
    width: 23.4px;
    height: 23.4px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quick-menu-camera-dot {
    fill: currentColor;
    stroke: none;
}

.quick-menu-logo {
    width: 34.2px;
    height: 34.2px;
    object-fit: contain;
}

.quick-menu-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.quick-menu-toggle {
    display: none;
}

/* 본문 옆 여백이 좁아지면 하단 메뉴 위에서 펼치는 방식으로 전환 */
@media (max-width: 1440px) {
    .quick-menu {
        top: auto;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        transform: none;
    }

    .quick-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5.4px;
        min-height: 39.6px;
        padding: 9px 12.6px;
        margin-left: auto;
        border: .9px solid var(--quick-edge);
        border-radius: 999px;
        background: linear-gradient(145deg, #fff 15%, var(--quick-surface) 100%);
        color: var(--quick-main);
        box-shadow: 0 6px 18px var(--quick-shadow),
                    0 2px 4px rgba(28, 43, 61, .08),
                    inset 0 1px 0 #fff;
        font: 700 10.8px 'Pretendard', 'Noto Sans KR', sans-serif;
        cursor: pointer;
        transition: box-shadow .3s ease;
        animation: quick-menu-appear .4s ease-out;
    }

    .quick-menu-toggle svg {
        width: 16.2px;
        height: 16.2px;
    }

    .quick-menu-links {
        display: none;
        position: absolute;
        right: 0;
        bottom: calc(100% + 9px);
    }

    .quick-menu-toggle[aria-expanded="true"] + .quick-menu-links {
        display: flex;
    }

    body.mobile-menu-open .quick-menu {
        visibility: hidden;
    }
}

/* 모바일 바로가기는 하단 버튼 위에 기존 세로 메뉴로 펼침 */
@media (max-width: 768px) {
    .quick-menu {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        z-index: 1002;
    }

    .quick-menu-toggle {
        display: none;
    }

    .quick-menu-links {
        bottom: 0;
        max-height: calc(100dvh - 110px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
    }

    .quick-menu.is-open .quick-menu-links {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-menu-link,
    .quick-menu-links,
    .quick-menu-toggle {
        transition: none;
        animation: none;
    }
}