@charset "UTF-8";

/* ===================================================
   [Hjcare V4 - Luxury Floating Quick Menu]
   - Deep Blue & Kakao Yellow (High Visibility)
   - Gentle Floating Animation
   - Premium Squircle Design
=================================================== */

:root {
    --hj-blue: #004799;
    --hj-blue-hover: #003366;
    --kakao-yellow: #FEE500;
    --kakao-brown: #3C1E1E;
}

.premium-quick-menu {
    position: fixed;
    right: 35px;
    bottom: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 10005;
    pointer-events: none;
}

/* 둥둥 뜨는 애니메이션 */
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

.quick-item {
    pointer-events: auto;
    width: 66px;
    height: 66px;
    border-radius: 20px; /* 스쿼클 디자인 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: floating 3s ease-in-out infinite;
}

/* 두 번째 아이템은 애니메이션 엇갈리게 설정 */
.quick-item:nth-child(2) {
    animation-delay: 0.5s;
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.quick-item i {
    font-size: 28px;
    transition: all 0.3s ease;
}

/* 카카오톡 - 시인성 극대화 (기본 노란색) */
.quick-item.kakao {
    background: var(--kakao-yellow);
}
.quick-item.kakao i {
    color: var(--kakao-brown);
}

/* 전문가 전화상담 - 프리미엄 블루 그라데이션 */
.quick-item.phone {
    background: linear-gradient(135deg, #00E5FF, #004799);
}
.quick-item.phone i {
    color: #FFFFFF;
}

/* 상담신청 - 브랜드 블루 (기본 블루) */
.quick-item.contact {
    background: var(--hj-blue);
}
.quick-item.contact i {
    color: #FFFFFF;
}

/* 아이템 순차 애니메이션 (3개로 확장) */
.quick-item:nth-child(1) { animation-delay: 0s; }
.quick-item:nth-child(2) { animation-delay: 0.3s; }
.quick-item:nth-child(3) { animation-delay: 0.6s; }

/* 호버 시 인터랙션 (색상 변화 및 강조) */
.quick-item:hover {
    transform: scale(1.1) rotate(5deg);
    animation-play-state: paused; /* 호버 시엔 둥둥 뜨는 거 멈춤 */
    box-shadow: 0 15px 45px rgba(0, 71, 153, 0.3);
}

.quick-item.kakao:hover {
    background: #FFEB00;
}
.quick-item.phone:hover {
    background: #00E5FF;
    box-shadow: 0 15px 45px rgba(0, 229, 255, 0.4);
}
.quick-item.contact:hover {
    background: var(--hj-blue-hover);
}

/* 툴팁 */
.quick-item .tooltip {
    position: absolute;
    right: 85px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.quick-item:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 모바일 전용 디자인 */
@media (max-width: 768px) {
    .premium-quick-menu {
        right: 20px;
        bottom: 100px;
        gap: 15px;
    }
    .quick-item {
        width: 58px;
        height: 58px;
        border-radius: 16px;
    }
    .quick-item i {
        font-size: 24px;
    }
}