/**
 * 모바일 플로팅 버튼 4개 (스크롤 시에만 표시)
 * 하단 고정 메뉴(40px) 위에 배치
 * 피드작성(맨 위) / 네비게이션 / 검색 / Hot Feeds(맨 아래)
 *
 * 1200px 이상: 숨김 (PC 3단 레이아웃)
 * 1199px 이하: 표시 (모바일 레이아웃)
 */

/* 플로팅 버튼 컨테이너 - 기본적으로 숨김 */
.mobile-floating-btns {
    position: fixed;
    right: 20px;
    z-index: 998;
    pointer-events: none;
    display: none; /* 기본 숨김 */
}

/* 1199px 이하에서만 표시 (모바일 버전) */
@media (max-width: 1199px) {
    .mobile-floating-btns {
        display: block !important;
    }
}

/* 개별 버튼 공통 스타일 */
.floating-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100px);
    backdrop-filter: blur(10px);
}

/* visible 클래스 - 스크롤 시 표시 */
.mobile-floating-btns.visible .floating-btn {
    opacity: 1;
    transform: translateX(0);
}

/* 각 버튼별 딜레이 (순차 애니메이션) */
.floating-btn-write {
    transition-delay: 0s;
}

.floating-btn-nav {
    transition-delay: 0.05s;
}

.floating-btn-search {
    transition-delay: 0.1s;
}

.floating-btn-hot {
    transition-delay: 0.15s;
}

/* 1. 피드 작성 버튼 (맨 위, 빨간색 그라데이션) */
.floating-btn-write {
    background: linear-gradient(135deg, #F64747 0%, #ff6b6b 100%);
    border: 2px solid rgba(246, 71, 71, 0.8);
    color: white;
}

.floating-btn-write:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, #F64747 100%);
    transform: scale(1.08) translateX(0);
    box-shadow: 0 6px 20px rgba(246, 71, 71, 0.6);
    border-color: #F64747;
}

.floating-btn-write:active {
    transform: scale(0.95) translateX(0);
}

/* 2. 네비게이션 버튼 (다크 네이비 + 빨간 테두리) */
.floating-btn-nav {
    background: rgba(34, 49, 63, 0.92);
    border: 2px solid rgba(246, 71, 71, 0.6);
    color: #fefad4;
}

.floating-btn-nav:hover {
    background: rgba(34, 49, 63, 0.98);
    transform: scale(1.08) translateX(0);
    box-shadow: 0 6px 20px rgba(246, 71, 71, 0.4);
    color: #F64747;
    border-color: #F64747;
}

.floating-btn-nav:active {
    transform: scale(0.95) translateX(0);
}

/* 3. 검색 버튼 (다크 네이비 + 빨간 테두리) */
.floating-btn-search {
    background: rgba(34, 49, 63, 0.92);
    border: 2px solid rgba(246, 71, 71, 0.6);
    color: #fefad4;
}

.floating-btn-search:hover {
    background: rgba(34, 49, 63, 0.98);
    transform: scale(1.08) translateX(0);
    box-shadow: 0 6px 20px rgba(246, 71, 71, 0.4);
    color: #F64747;
    border-color: #F64747;
}

.floating-btn-search:active {
    transform: scale(0.95) translateX(0);
}

/* 4. Hot Feeds 버튼 (맨 아래, 다크 네이비 + 빨간 테두리) */
.floating-btn-hot {
    background: rgba(34, 49, 63, 0.92);
    border: 2px solid rgba(246, 71, 71, 0.8);
    color: #F64747;
}

.floating-btn-hot:hover {
    background: linear-gradient(135deg, rgba(246, 71, 71, 0.2), rgba(246, 71, 71, 0.1));
    transform: scale(1.08) translateX(0);
    box-shadow: 0 6px 20px rgba(246, 71, 71, 0.5);
    color: #fefad4;
    border-color: #F64747;
}

.floating-btn-hot:active {
    transform: scale(0.95) translateX(0);
}

/* 버튼 아이콘 크기 */
.floating-btn i {
    font-size: 22px;
    pointer-events: none;
}

/* Hot Feeds 이모지 크기 */
.floating-btn-hot {
    font-size: 26px;
    line-height: 1;
}

/* 버튼 위치 조정 - 모바일 하단 메뉴(40px) 위에 30px 띄우기 */
.mobile-floating-btns {
    bottom: 70px; /* 40px(메뉴) + 30px(여백) = 70px */
}

/* 초소형 모바일 (360px 이하) */
@media (max-width: 360px) {
    .floating-btn {
        width: 45px;
        height: 45px;
        margin-bottom: 8px;
    }

    .floating-btn i {
        font-size: 18px;
    }

    .mobile-floating-btns {
        right: 15px;
        bottom: 65px;
    }
}

/* 가로 모드 */
@media (max-height: 500px) and (orientation: landscape) {
    .floating-btn {
        width: 44px;
        height: 44px;
        margin-bottom: 6px;
    }

    .floating-btn i {
        font-size: 18px;
    }

    .mobile-floating-btns {
        bottom: 60px;
    }
}