/* =================================================================
   Quick Menu Component (Mobile Bottom Bar & Desktop Right-Edge Rectangular Side Quick)
   ================================================================= */

/* -----------------------------------------
   1. Mobile Bottom Quick Menu (768px below)
   ----------------------------------------- */
.mobile-quick-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1500;
    padding: 10px 0;
}

.quick-menu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    max-width: 100%;
}

.quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px;
    text-decoration: none;
    color: #666666;
    transition: 0.2s;
}

.quick-menu-item:active {
    background: #f5f5f5;
}

.quick-menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    font-size: 22px;
}

.quick-menu-icon.phone {
    background: linear-gradient(135deg, #01419a, #0056b3);
    color: #ffffff;
}

.quick-menu-icon.sms {
    background: linear-gradient(135deg, #22ab3c, #2ecc71);
    color: #ffffff;
}

.quick-menu-icon.quote {
    background: linear-gradient(135deg, #01419a, #333);
    color: #ffffff;
}

.quick-menu-icon.kakao {
    background: #fee500;
    color: #3c1e1e;
}

.quick-menu-icon.naver {
    background: #03c75a;
    color: #ffffff;
}

.quick-menu-label {
    font-size: 11px;
    font-weight: 500;
    color: #666666;
}

@media (max-width: 768px) {
    .mobile-quick-menu {
        display: block;
    }
}

/* -----------------------------------------
   2. Desktop Square Side Quick Menu (769px above)
   ----------------------------------------- */
.side-quick-rect-wrap {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 우측 정밀 밀착 */
    gap: 4px; /* 사각 타일 촘촘한 간격 */
}

.rect-quick-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    text-decoration: none;
    border-radius: 8px 0 0 8px; /* 왼쪽 모서리만 프리미엄 라운드 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    overflow: hidden; /* 가로 확장 전 텍스트 숨김 */
}

/* 대표전화 가로 확장 특화 스타일 */
.rect-quick-tab.expandable {
    justify-content: flex-end; /* 확장 시 아이콘은 우측 벽에 밀착하고 텍스트는 좌측으로 펼쳐짐 */
    width: 54px; /* 기본 정방형 */
}

.rect-quick-tab.expandable:hover {
    width: 180px; /* 마우스 호버 시 가로 너비 확장 (기존 210px에서 여백 최적화를 위해 축소) */
}

/* 1. 대표전화 탭 자체는 흰색 슬라이더 배경 유지 */
.rect-quick-tab.call {
    background: #ffffff;
    color: #01419a;
    border: none; /* 얇은 회색 경계 테두리선 완전 제거 (무테 카드화) */
    box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.06);
}

.rect-quick-tab.call:hover {
    background: #ffffff; /* 펼쳐지는 플로팅 메뉴는 흰색 그대로 유지 */
}

/* 대표전화의 우측 아이콘 박스에 파란색 배경 부여 */
.rect-quick-tab.call .rect-tab-icon {
    background: #01419a; /* 기본 전화기 모양 아이콘 배경: 파란색 */
    color: #ffffff;      /* 아이콘 색상: 흰색 */
    width: 54px;         /* 탭 세로와 맞춘 정방형 구조 */
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.rect-quick-tab.call:hover .rect-tab-icon {
    background: #ffffff; /* 펼쳐졌을 때 아이콘 배경: 흰색 */
    color: #01419a;      /* 펼쳐졌을 때 아이콘 색상: 파란색 */
}

/* 2단 텍스트 정렬 */
.rect-tab-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    white-space: nowrap;
    margin-right: 15px;
    line-height: 1.35;
    transition: opacity 0.2s ease;
}

.rect-quick-tab.expandable:hover .rect-tab-text-wrap {
    opacity: 1;
    transition-delay: 0.1s; /* 슬라이드가 시작된 직후 텍스트 페이드인 */
}

/* 1단 라벨 */
.rect-tab-sub {
    font-size: 10px;
    font-weight: 600;
    color: #777777;
    letter-spacing: 0.5px;
}

/* 2단 메인 번호 */
.rect-tab-main {
    font-size: 14px;
    font-weight: 800;
    color: #01419a; /* 브랜드 블루 */
}

.rect-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px; /* 아이콘 박스 가로세로 고정 */
    height: 54px;
    flex-shrink: 0; /* 확장 시 찌그러짐 방지 */
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* 2. 온라인문의 (차콜 배경 및 흰색 아이콘 복원) */
.rect-quick-tab.consult {
    background: #14a8ba;
    color: #ffffff;
}

.rect-quick-tab.consult:hover {
    background: #07899a;
}

.rect-quick-tab.consult .rect-tab-icon {
    color: #ffffff;
}

/* 3. 카카오톡 상담 (카카오 옐로우 배경 및 갈색 아이콘 복원) */
.rect-quick-tab.kakao {
    background: #fee500;
    color: #1e1e1e;
}

.rect-quick-tab.kakao:hover {
    background: #e6cf00;
}

.rect-quick-tab.kakao .rect-tab-icon {
    color: #3c1e1e;
}

/* 4. 공식 블로그 (네이버 그린 배경 및 흰색 아이콘 복원) */
.rect-quick-tab.blog {
    background: #03c75a;
    color: #ffffff;
}

.rect-quick-tab.blog:hover {
    background: #02a34a;
}

.rect-quick-tab.blog .rect-tab-icon {
    color: #ffffff;
}

/* 마우스 호버 시 아이콘 미세 확대 액션 */
.rect-quick-tab:hover .rect-tab-icon {
    transform: scale(1.1);
}
/* 모바일 퀵메뉴 기본 숨김 (PC 뷰용) */
.mobile-floating-menu-wrap {
    display: none;
}

/* -----------------------------------------
   3. Desktop Responsive Hide
   ----------------------------------------- */
@media (max-width: 768px) {
    .side-quick-rect-wrap {
        display: none !important; /* 모바일은 3단 퀵 탭 숨김 */
    }
    .mobile-quick-menu {
        display: none !important; /* 기존 하단 바 제거 */
    }
    body {
        padding-bottom: 0 !important; /* 하단 여백 제거 */
    }

    /* 모바일 전용 접힘형 플로팅 메뉴 우측 밀착 */
    .mobile-floating-menu-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        position: fixed;
        right: 0;
        top: 60%;
        transform: translateY(-50%);
        z-index: 1500;
        gap: 4px; /* 데스크톱과 동일하게 촘촘한 세로 간격 */
    }

    /* 1. 메인 버튼 스타일 (데스크톱 탭 스타일 이식: 우측 밀착, 왼쪽 라운드 8px) */
    .mobile-fab-main-btn {
        width: 54px;
        height: 54px;
        border: none;
        border-radius: 8px 0 0 8px; /* 데스크톱처럼 우측 밀착 사각 탭 */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.08);
        transition: background-color 0.3s, transform 0.2s;
        text-decoration: none;
    }

    /* 각 버튼 컬러 테마 */
    .mobile-fab-main-btn.call-trigger {
        background: #01419a; /* 브랜드 블루 */
        color: #ffffff;
        position: relative;
        font-size: 20px;
    }

    .mobile-fab-main-btn.kakao {
        background: #fee500; /* 카카오 옐로우 */
        color: #3c1e1e;
        font-size: 24px;
    }

    .mobile-fab-main-btn.blog {
        background: #03c75a; /* 네이버 그린 */
        color: #ffffff;
        font-size: 22px;
    }

    /* 전화기 아이콘 토글 모션 */
    .mobile-fab-main-btn.call-trigger i {
        position: absolute;
        transition: transform 0.3s, opacity 0.3s;
    }
    .mobile-fab-main-btn.call-trigger .close-icon {
        opacity: 0;
        transform: rotate(-90deg);
        font-size: 18px;
    }

    /* active 토글 시 메인 버튼 모션 */
    .mobile-floating-menu-wrap.active .mobile-fab-main-btn.call-trigger {
        background: #ffffff;
        color: #01419a;
        box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(1, 65, 154, 0.1);
    }
    .mobile-floating-menu-wrap.active .mobile-fab-main-btn.call-trigger .main-icon {
        opacity: 0;
        transform: rotate(90deg);
    }
    .mobile-floating-menu-wrap.active .mobile-fab-main-btn.call-trigger .close-icon {
        opacity: 1;
        transform: rotate(0deg);
        color: #01419a;
    }

    /* 2. 서브 전화 접힘 메뉴 (아래쪽으로 슬라이딩 전개 및 하단 밀어내기) */
    .mobile-fab-call-group {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 54px;
    }

    .mobile-fab-sub-list {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 54px;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        transition: max-height 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease, margin-top 0.3s ease;
        pointer-events: none;
    }

    .mobile-floating-menu-wrap.active .mobile-fab-sub-list {
        max-height: 180px; /* 54px * 3 + 간격 여유분 */
        opacity: 1;
        margin-top: 4px;
        pointer-events: auto;
    }

    /* 서브 버튼 디자인 (54px * 54px 너비 통일, 연청색 바탕에 아이콘/텍스트 세로 배치) */
    .mobile-fab-sub-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        background: #f0f7ff;
        color: #01419a;
        border-radius: 8px 0 0 8px; /* 왼쪽 모서리 라운드 */
        text-decoration: none;
        margin-bottom: 4px;
        box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.05);
        transition: background-color 0.2s, transform 0.2s;
    }

    .mobile-fab-sub-btn:last-child {
        margin-bottom: 0;
    }

    .mobile-fab-sub-btn:active {
        background: #e1efff;
        transform: scale(0.97);
    }

    /* 서브 탭 내 아이콘 스타일 */
    .mobile-fab-sub-btn i {
        font-size: 18px;
        color: #01419a;
        margin-bottom: 2px;
        line-height: 1;
    }

    /* 서브 탭 내 텍스트 라벨 스타일 */
    .mobile-fab-sub-btn .sub-label {
        font-size: 9px;
        font-weight: 700;
        color: #01419a;
        line-height: 1.1;
        letter-spacing: -0.5px;
        white-space: nowrap;
        display: block;
    }
}