/* ========================================
   SECTION 03: 퀵메뉴 (카테고리 바로가기)
   ✦ 웜 크림 배경 + 골드 호버 효과
======================================== */

.quick-menu {
    padding: 60px 0;
    background: linear-gradient(180deg, #f8f8fd 0%, #ffffff 100%);
    border-bottom: none;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
}

.quick-card {
    display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 28px 8px 24px;
    border-radius: var(--radius);
    text-align: center;
    transition: var(--transition);
    position: relative;
    background: var(--section-alt);
    border: 1px solid transparent;
}
.quick-card:hover {
    background: #fff;
    border-color: transparent;
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.quick-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: var(--point);
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(85,58,231,.1);
}
.quick-card:hover .quick-icon {
    background: linear-gradient(135deg, var(--point), var(--accent));
    color: #fff;
    transform: scale(1.1) rotate(-3deg);
    box-shadow: var(--shadow-primary);
}

.quick-label { font-size: 17px; font-weight: 600; color: var(--text-2); line-height: 1.4; }
.quick-arrow {
    position: absolute; bottom: 8px; right: 8px;
    font-size: 16px; color: var(--text-3);
    opacity: 0; transition: var(--transition);
}
.quick-card:hover .quick-arrow { opacity: 1; color: var(--point); }