/* ============================================
   링크네비 (LinkNavi) - 반응형 디자인
   작성일: 2025-08-19
   브레이크포인트:
   - xs: <576px (모바일)
   - sm: ≥576px (큰 모바일)
   - md: ≥768px (태블릿)
   - lg: ≥992px (작은 데스크톱)
   - xl: ≥1200px (데스크톱)
   - xxl: ≥1400px (큰 데스크톱)
   ============================================ */

/* ============================================
   1. 모바일 퍼스트 기본 스타일 (xs: <576px)
   ============================================ */
@media (max-width: 575.98px) {
    /* 컨테이너 패딩 조정 */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* 섹션 패딩 축소 */
    section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* 컴팩트 헤더 */
    .compact-header {
        padding: 0.75rem 0 !important;
    }
    
    .compact-header h1 {
        font-size: 1.1rem !important;
        line-height: 1.2;
    }
    
    .compact-header .gradient-title {
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .compact-header .btn-group {
        width: 100%;
        justify-content: center;
    }
    
    .compact-header .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* 미니 통계 바 */
    .mini-stats-bar {
        font-size: 0.7rem;
        padding: 0.5rem 0 !important;
    }
    
    .stat-mini {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }
    
    .stat-mini .small {
        display: none;
    }
    
    .stat-mini i {
        font-size: 0.75rem;
    }
    
    .stat-mini strong {
        font-size: 0.85rem;
    }
    
    /* 배너 그리드 - 모바일에서 1열 */
    .premium-banner-grid,
    .standard-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    /* 배너 아이템 높이 조정 - 모바일에서 더 보기 좋게 */
    .premium-banner-item,
    .standard-banner-item {
        aspect-ratio: 2.5 / 1 !important;
        min-height: 100px;
    }
    
    /* 배너 콘텐츠 크기 조정 */
    .banner-content h3 {
        font-size: 1rem !important;
    }
    
    .banner-content p {
        font-size: 0.875rem !important;
    }
    
    .banner-title {
        font-size: 0.875rem !important;
    }
    
    .banner-description {
        font-size: 0.75rem !important;
    }
    
    /* 섹션 헤더 */
    .banner-section h2,
    .categories-section h2 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .banner-section small,
    .categories-section small {
        font-size: 0.7rem !important;
    }
    
    /* 카테고리 카드 */
    .category-card {
        margin-bottom: 1rem;
    }
    
    /* CTA 섹션 */
    .cta-compact {
        padding: 0.75rem !important;
    }
    
    .cta-compact h3 {
        font-size: 0.9rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .cta-compact .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .cta-compact .btn {
        flex: 1;
        min-width: 100px;
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    
    .cta-compact small {
        font-size: 0.65rem !important;
        margin-top: 0.5rem !important;
    }
    
    /* 버튼 크기 조정 */
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    
    /* 터치 친화적 크기 */
    .btn, .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* 네비게이션 모바일 최적화 */
    .navbar-brand {
        font-size: 1.1rem !important;
    }
    
    .navbar-brand .rotating-icon {
        font-size: 0.9rem;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
    }
    
    /* 푸터 모바일 최적화 */
    footer {
        padding: 1.5rem 0 !important;
    }
    
    footer .text-center {
        font-size: 0.75rem;
    }
}

/* ============================================
   2. 작은 태블릿 (sm: 576px - 767px)
   ============================================ */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* 컴팩트 헤더 */
    .compact-header h1 {
        font-size: 1.3rem !important;
    }
    
    .compact-header .text-muted {
        font-size: 0.85rem;
    }
    
    /* 배너 그리드 - 프리미엄은 2열, 일반은 1열 */
    .premium-banner-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .standard-banner-grid {
        grid-template-columns: 1fr !important;  /* 일반 배너는 1열로 */
        gap: 8px !important;
    }
    
    /* 배너 아이템 비율 */
    .premium-banner-item,
    .standard-banner-item {
        aspect-ratio: 3 / 1 !important;
    }
    
    /* 카테고리 - 여전히 1열 */
    .categories-section .row > div {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    /* 미니 통계 바 */
    .mini-stats-bar {
        font-size: 0.8rem;
    }
    
    .stat-mini .small {
        display: inline;
        font-size: 0.7rem;
    }
}

/* ============================================
   3. 태블릿 (md: 768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 컴팩트 헤더 */
    .compact-header h1 {
        font-size: 1.4rem !important;
    }
    
    .compact-header .text-muted {
        display: inline !important;
        font-size: 0.9rem;
    }
    
    /* 배너 그리드 */
    .premium-banner-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .standard-banner-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    
    /* 배너 아이템 비율 */
    .premium-banner-item,
    .standard-banner-item {
        aspect-ratio: 3.5 / 1 !important;
    }
    
    /* 카테고리 - 2열 */
    .categories-section .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* 통계 바 */
    .mini-stats-bar {
        font-size: 0.875rem;
    }
    
    /* 버튼 크기 */
    .btn-sm {
        padding: 0.4rem 0.8rem;
        font-size: 0.875rem;
    }
    
    /* CTA 섹션 */
    .cta-compact h3 {
        font-size: 1.1rem !important;
    }
}

/* ============================================
   4. 작은 데스크톱 (lg: 992px - 1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* 배너 그리드 */
    .premium-banner-grid[style*="repeat(3,"],
    .premium-banner-grid[style*="repeat(4,"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .standard-banner-grid[style*="repeat(5,"],
    .standard-banner-grid[style*="repeat(6,"] {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ============================================
   5. 데스크톱 (xl: 1200px - 1399px)
   ============================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* 기본 데스크톱 레이아웃 유지 */
}

/* ============================================
   6. 큰 데스크톱 (xxl: ≥1400px)
   ============================================ */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    /* 더 큰 여백 */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ============================================
   7. 터치 디바이스 최적화
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* 터치 디바이스에서 호버 효과 제거 */
    .btn:hover,
    .nav-link:hover,
    .card:hover {
        transform: none !important;
    }
    
    /* 터치 타겟 크기 확대 */
    .btn, .nav-link, .dropdown-item {
        min-height: 48px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    /* 배너 호버 효과 제거 */
    .premium-banner-placeholder:hover,
    .standard-banner-placeholder:hover {
        transform: none !important;
    }
}

/* ============================================
   8. 가로 모드 최적화
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    /* 가로 모드에서 높이 축소 */
    .compact-header {
        padding: 0.5rem 0 !important;
    }
    
    .mini-stats-bar {
        display: none;
    }
    
    section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ============================================
   9. 프린트 스타일
   ============================================ */
@media print {
    /* 불필요한 요소 숨기기 */
    .navbar,
    .footer,
    .btn,
    .cta-section {
        display: none !important;
    }
    
    /* 색상 단순화 */
    * {
        color: #000 !important;
        background: #fff !important;
    }
    
    /* 링크 URL 표시 */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

/* ============================================
   10. 유틸리티 클래스
   ============================================ */

/* 모바일에서만 표시 */
.mobile-only {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none !important;
    }
}

/* 태블릿 이상에서만 표시 */
@media (min-width: 768px) {
    .tablet-up {
        display: block;
    }
    
    .mobile-only {
        display: none !important;
    }
}

/* 데스크톱에서만 표시 */
@media (min-width: 992px) {
    .desktop-only {
        display: block;
    }
}

/* ============================================
   11. 추가 브레이크포인트 개선
   ============================================ */

/* 초소형 모바일 (< 375px) */
@media (max-width: 374.98px) {
    .compact-header h1 {
        font-size: 1rem !important;
    }
    
    .compact-header .btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }
    
    .banner-section h2 {
        font-size: 0.9rem !important;
    }
    
    /* 배너 그리드 - 무조건 1열 */
    .premium-banner-grid,
    .standard-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
}

/* 대형 모바일/소형 태블릿 (375px - 576px) */
@media (min-width: 375px) and (max-width: 575.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* 배너 그리드 - 375px에서도 1열 */
    .premium-banner-grid,
    .standard-banner-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
}

/* 크로스 브라우저 호환성 */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari 특별 처리 */
    .btn, .nav-link {
        -webkit-tap-highlight-color: transparent;
    }
}

@supports (-ms-ime-align: auto) {
    /* Edge 특별 처리 */
    .premium-banner-grid,
    .standard-banner-grid {
        display: -ms-grid;
    }
}