/* ==================== PREMIUM SIDEBAR DESIGN ==================== */

/* 전화걸기 프리미엄 박스 */
.sidebar-premium-box {
    background: #121826;
    border: 2px solid rgba(52, 152, 219, 0.2);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgb(0 75 131 / 51%);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-premium-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: rotate-slow 20s linear infinite;
    pointer-events: none;
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sidebar-premium-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4);
    border-color: #f4d784;
}

.sidebar-premium-box > * {
    position: relative;
    z-index: 1;
}

/* 전화번호 텍스트 */
.premium-phone-number {
    font-size: 1.8rem;
    color: #d4af37;
    font-weight: 800;
    letter-spacing: -1px;
    font-family: 'Pretendard', sans-serif;
    text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
    animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5)); }
    50% { filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.8)); }
}

/* 전화걸기 버튼 */
.premium-call-button {
    background: transparent;
    color: #bbb !important;
    border: 2px solid rgba(52, 152, 219, 0.15);
    border-radius: 8px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    padding: 14px 0 !important;
    box-shadow: 0 0px 10px rgb(241 248 255 / 30%);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.premium-call-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.premium-call-button:hover::before {
    width: 300px;
    height: 300px;
}

.premium-call-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.6);
}

.premium-call-button i {
    animation: phone-shake 2s ease-in-out infinite;
}

@keyframes phone-shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-15deg); }
    20%, 40% { transform: rotate(15deg); }
}

/* 메뉴 헤더 스타일 */
.na-menu .dropdown-header {
    color: #e0e6ed !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 15.2px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 12px 15px 12px 35px;
    background: linear-gradient(180deg, #1a2536 0%, #141b28 100%);
    border-left: 4px solid #d4af37;
    border-top: 2px solid rgba(52, 152, 219, 0.2);
    border-bottom: 2px solid rgba(52, 152, 219, 0.2);
    border-right: 2px solid rgba(52, 152, 219, 0.2);
    border-radius: 4px;
    position: relative;
}

.na-menu .dropdown-header::before {
    content: '';
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d4af37' viewBox='0 0 16 16'%3E%3Cpath d='M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z'/%3E%3Cpath d='M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: blink 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.6));
}

@keyframes blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(0.8); }
}

/* 메뉴 아이템 기본 */
.na-menu .nav-link {
    color: #ccc;
    padding: 12px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-weight: 700 !important;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
}

.na-menu .nav-link::before {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.5s;
}

.na-menu .nav-link:hover::before {
    left: 100%;
}

.na-menu .nav-link:hover,
.na-menu .nav-link.active {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    color: #d4af37 !important;
    font-weight: 800 !important;
    padding-left: 20px;
    box-shadow: inset 4px 0 0 #d4af37;
}

.na-menu .nav-link.active {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.08) 100%);
}

/* 메뉴 아이콘 */
.na-menu .nav-icon {
    color: #888;
    font-size: 1.1rem;
    margin-right: 10px;
    transition: all 0.3s;
}

.na-menu .nav-link:hover .nav-icon,
.na-menu .nav-link.active .nav-icon {
    color: #d4af37;
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

/* 뱃지 스타일 */
.na-menu .badge {
    background: linear-gradient(135deg, #d4af37 0%, #f4d784 100%) !important;
    color: #000 !important;
    font-weight: 800 !important;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

/* 드롭다운 토글 화살표 */
.na-menu .dropdown-toggle::after {
    transition: transform 0.3s ease;
    color: #666;
}

.na-menu .dropdown-toggle:not(.collapsed)::after {
    transform: rotate(180deg);
    color: #d4af37;
}

.na-menu .dropdown-toggle:hover::after {
    color: #d4af37;
}

/* 서브메뉴 들여쓰기 */
.na-menu .nav-collapse .nav-link {
    padding-left: 40px;
    font-size: 0.95rem;
    font-weight: 700 !important;
}

.na-menu .nav-collapse .nav-collapse .nav-link {
    padding-left: 60px;
    font-size: 0.9rem;
}

/* 통계 정보 스타일 */
.na-menu .nav-link .ms-auto {
    color: #d4af37;
    font-weight: 800 !important;
    font-size: 0.9rem;
}

/* 반응형 */
@media (max-width: 991px) {
    .sidebar-premium-box {
        margin-bottom: 20px;
    }
    
    .premium-phone-number {
        font-size: 1.5rem;
    }
    
    .premium-call-button {
        font-size: 1rem !important;
        padding: 12px 0 !important;
    }
}

@media (max-width: 576px) {
    .na-menu .dropdown-header {
        font-size: 0.7rem;
        padding: 10px 12px;
    }
    
    .na-menu .nav-link {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    .premium-phone-number {
        font-size: 1.3rem;
    }
}

/* 애니메이션 효과 */
.na-menu .nav-item {
    animation: fadeInLeft 0.5s ease-out;
    animation-fill-mode: both;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.na-menu .nav-item:nth-child(1) { animation-delay: 0.05s; }
.na-menu .nav-item:nth-child(2) { animation-delay: 0.1s; }
.na-menu .nav-item:nth-child(3) { animation-delay: 0.15s; }
.na-menu .nav-item:nth-child(4) { animation-delay: 0.2s; }
.na-menu .nav-item:nth-child(5) { animation-delay: 0.25s; }