/* ========================================
   아이노트 플로팅 버튼 (FAB) v1.0
   Created: 2026-03-14
   Style: 네이버메모 참조
   ======================================== */

/* ========================================
   FAB 컨테이너
   ======================================== */
.fab-container {
    position: fixed;
    bottom: calc(var(--space-8) + 30px);
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: var(--z-fixed);
}

/* ========================================
   FAB 기본 스타일
   ======================================== */
.fab {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    box-shadow: var(--shadow-fab);
    transition: all var(--transition-base);
    text-decoration: none;
    position: relative;
}

.fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.4);
}

.fab:active {
    transform: scale(0.98);
}

.fab .icon {
    width: 24px;
    height: 24px;
}

/* ========================================
   FAB 색상 변형
   ======================================== */

/* 음성 메모 - 보라색 */
.fab-voice {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
}

.fab-voice:hover {
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

/* 새 노트 - 딥블루 */
.fab-note {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
}

.fab-note:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, #2563EB 100%);
}

/* 목록 보기 - 흰색 + 테두리 */
.fab-list {
    background: var(--bg-primary);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow);
}

.fab-list:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-hover);
}

/* ========================================
   FAB 라벨 (툴팁)
   ======================================== */
.fab-label {
    position: absolute;
    right: calc(100% + var(--space-3));
    background: var(--color-gray-800);
    color: white;
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    box-shadow: var(--shadow);
}

.fab:hover .fab-label {
    opacity: 1;
}

/* 화살표 */
.fab-label::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--color-gray-800);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* ========================================
   FAB 크기 변형
   ======================================== */
.fab-sm {
    width: 48px;
    height: 48px;
}

.fab-sm .icon {
    width: 20px;
    height: 20px;
}

.fab-lg {
    width: 64px;
    height: 64px;
}

.fab-lg .icon {
    width: 28px;
    height: 28px;
}

/* ========================================
   FAB 애니메이션
   ======================================== */

/* 펄스 애니메이션 (중요한 액션) */
@keyframes fab-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--shadow-fab);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(30, 58, 138, 0.5);
    }
}

.fab-pulse {
    animation: fab-pulse 2s ease-in-out infinite;
}

/* 슬라이드 인 애니메이션 */
@keyframes fab-slide-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fab-container .fab:nth-child(1) {
    animation: fab-slide-in 0.3s ease-out 0.1s backwards;
}

.fab-container .fab:nth-child(2) {
    animation: fab-slide-in 0.3s ease-out 0.2s backwards;
}

.fab-container .fab:nth-child(3) {
    animation: fab-slide-in 0.3s ease-out 0.3s backwards;
}

/* ========================================
   모바일 반응형
   ======================================== */
@media (max-width: 768px) {
    .fab-container {
        bottom: var(--space-4);
        right: var(--space-4);
    }
    
    .fab {
        width: 48px;
        height: 48px;
    }
    
    .fab .icon {
        width: 20px;
        height: 20px;
    }
    
    /* 모바일에서는 라벨 숨김 */
    .fab-label {
        display: none;
    }
}

@media (max-width: 480px) {
    .fab-container {
        bottom: var(--space-3);
        right: var(--space-3);
        gap: var(--space-2);
    }
    
    .fab {
        width: 44px;
        height: 44px;
    }
    
    .fab .icon {
        width: 18px;
        height: 18px;
    }
}

/* ========================================
   FAB 배지 (알림 표시)
   ======================================== */
.fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error);
    color: white;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    border: 2px solid white;
}

/* ========================================
   FAB 확장 메뉴 (추후 확장용)
   ======================================== */
.fab-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: absolute;
    bottom: calc(100% + var(--space-2));
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-base);
}

.fab-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-menu-item {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow);
    transition: all var(--transition-fast);
}

.fab-menu-item:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
}