/**
 * 방문자 통계 배지 스타일
 * Version: 1.0.0
 * Created: 2026-07-09
 * 
 * 기능: 실시간 접속자 수와 누적 방문자 수를 표시하는 우아한 배지
 */

/* 배지 컨테이너 */
.visitor-stats-badge {
    position: fixed;
    top: 90px;  /* navbar 아래 위치 */
    left: 20px;  /* PC는 좌측 */
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;  /* 높은 우선순위 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    opacity: 0;  /* 초기에는 숨김 */
    animation: fadeInBadge 0.5s ease 0.3s forwards;  /* 0.3초 후 페이드인 */
}

@keyframes fadeInBadge {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.visitor-stats-badge:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* 활성 접속자 섹션 */
.stats-active {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 녹색 라이브 점 */
.live-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* 라벨 스타일 */
.stats-label {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 400;
}

/* 숫자 값 스타일 */
.stats-value {
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    min-width: 30px;  /* 최소 너비 확보 (깜빡임 방지) */
    text-align: center;  /* 중앙 정렬 */
    transition: opacity 0.3s ease;  /* 부드러운 전환 */
}

/* 구분자 (중간 점) */
.stats-divider {
    color: #4b5563;
    font-size: 16px;
    font-weight: 700;
}

/* 누적 방문자 섹션 */
.stats-cumulative {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 태블릿 반응형 (768px 이하) */
@media (max-width: 768px) {
    .visitor-stats-badge {
        top: 145px;  /* Update 배너와 간격 벌림 (130px → 145px) */
        left: auto;
        right: 12px;  /* 우측 */
        padding: 7px 14px;
        font-size: 11px;
        gap: 8px;
    }
    
    .stats-label {
        font-size: 11px;
    }
    
    .stats-value {
        font-size: 13px;
    }
    
    .stats-divider {
        font-size: 14px;
    }
    
    .live-dot {
        width: 7px;
        height: 7px;
    }
}

/* 모바일 반응형 (480px 이하) */
@media (max-width: 480px) {
    .visitor-stats-badge {
        top: 145px;  /* Update 배너와 간격 벌림 (130px → 145px) */
        left: 50%;  /* 중앙 정렬 */
        right: auto;
        transform: translateX(-50%);  /* 정확한 중앙 */
        padding: 6px 12px;
        font-size: 10px;
        gap: 6px;
        border-radius: 30px;
    }
    
    .stats-active,
    .stats-cumulative {
        gap: 5px;
    }
    
    .stats-label {
        font-size: 9px;  /* 더 작게 */
    }
    
    .stats-value {
        font-size: 10px;  /* 더 작게 */
    }
    
    .stats-divider {
        font-size: 10px;
        margin: 0 1px;
    }
    
    .live-dot {
        width: 5px;  /* 더 작게 */
        height: 5px;
    }
}

/* 다크모드 호환성 */
@media (prefers-color-scheme: dark) {
    .visitor-stats-badge {
        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
        border: 1px solid rgba(255, 255, 255, 0.15);
    }
}

/* 접근성: 포커스 스타일 */
.visitor-stats-badge:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* 인쇄 시 숨김 */
@media print {
    .visitor-stats-badge {
        display: none !important;
    }
}