/* ============================================
   링크네비 (LinkNavi) - 성능 최적화
   작성일: 2025-08-19
   ============================================ */

/* ============================================
   1. CSS 변수 최적화
   ============================================ */
:root {
    /* 자주 사용되는 값을 변수로 캐싱 */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;
    --animation-duration: 1s;
    
    /* GPU 가속 레이어 */
    --transform-layer: translateZ(0);
}

/* ============================================
   2. will-change 최적화
   ============================================ */

/* 호버 시에만 will-change 적용 */
.btn,
.card,
.banner-item {
    will-change: auto;
}

.btn:hover,
.card:hover,
.banner-item:hover {
    will-change: transform, opacity;
}

/* 애니메이션 직전에만 will-change 설정 */
.animating {
    will-change: transform, opacity;
}

/* 애니메이션 완료 후 제거 */
.animation-done {
    will-change: auto;
}

/* ============================================
   3. GPU 가속 최적화
   ============================================ */

/* 3D 변환으로 GPU 레이어 생성 */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 배너 아이템 GPU 가속 */
.premium-banner-item,
.standard-banner-item {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* 스크롤 가능 영역 최적화 */
.scrollable {
    transform: translateZ(0);
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   4. 애니메이션 최적화
   ============================================ */

/* 60fps 애니메이션을 위한 transform 사용 */
@keyframes optimizedFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 부드러운 스케일 애니메이션 */
@keyframes optimizedScale {
    from {
        transform: scale3d(0.95, 0.95, 1);
    }
    to {
        transform: scale3d(1, 1, 1);
    }
}

/* CPU 대신 GPU 사용 */
.fade-in-optimized {
    animation: optimizedFadeIn 0.3s ease-out;
    animation-fill-mode: both;
}

/* ============================================
   5. 레이아웃 트리거 최소화
   ============================================ */

/* 레이아웃 리플로우 방지 */
.fixed-dimensions {
    width: 100%;
    height: auto;
    contain: layout style;
}

/* 컨테인먼트 적용 */
.banner-section,
.categories-section {
    contain: layout style paint;
}

/* 고정 크기 요소 */
.fixed-height {
    height: var(--element-height);
    overflow: hidden;
}

/* ============================================
   6. 폰트 로딩 최적화
   ============================================ */

/* 폰트 디스플레이 스왑 */
@font-face {
    font-family: 'Noto Sans KR';
    font-display: swap;
    font-weight: 300 700;
}

/* 시스템 폰트 폴백 */
.system-font {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 'Helvetica Neue', Arial, 'Noto Sans KR', sans-serif;
}

/* ============================================
   7. 이미지 최적화
   ============================================ */

/* 지연 로딩 */
img[loading="lazy"] {
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}

/* 이미지 컨테이너 aspect-ratio */
.image-container {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #1a1a1a;
}

/* 반응형 이미지 */
.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ============================================
   8. CSS 그리드 최적화
   ============================================ */

/* 그리드 컨테이너 최적화 */
.optimized-grid {
    display: grid;
    contain: layout;
    will-change: auto;
}

/* 서브그리드 사용 */
@supports (grid-template-rows: subgrid) {
    .subgrid-item {
        display: grid;
        grid-template-rows: subgrid;
    }
}

/* ============================================
   9. 트랜지션 최적화
   ============================================ */

/* 하드웨어 가속 트랜지션 */
.transition-optimized {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* transform만 사용 (레이아웃 리플로우 방지) */
.hover-effect {
    transition: transform 0.2s ease;
}

.hover-effect:hover {
    transform: translateY(-2px) scale(1.02);
}

/* ============================================
   10. 스크롤 성능 최적화
   ============================================ */

/* 패시브 이벤트 리스너 표시 */
.scroll-container {
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* 스크롤 스냅 최적화 */
.scroll-snap-container {
    scroll-snap-type: y mandatory;
    scroll-padding: 20px;
}

.scroll-snap-item {
    scroll-snap-align: start;
    scroll-margin: 10px;
}

/* ============================================
   11. 리페인트 최소화
   ============================================ */

/* opacity와 transform만 사용 */
.no-repaint {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s, transform 0.3s;
}

.no-repaint:hover {
    opacity: 0.9;
    transform: translateX(5px);
}

/* 색상 변경 대신 opacity 사용 */
.overlay-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffd700;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.overlay-effect:hover::before {
    opacity: 0.1;
}

/* ============================================
   12. 미디어 쿼리 최적화
   ============================================ */

/* 미디어 쿼리 그룹화 */
@media (max-width: 768px) {
    /* 모바일 최적화 규칙 그룹 */
    .mobile-optimize {
        contain: layout style;
        will-change: auto;
    }
}

@media (min-width: 769px) {
    /* 데스크톱 최적화 규칙 그룹 */
    .desktop-optimize {
        contain: layout;
    }
}

/* ============================================
   13. 중요 렌더링 경로 최적화
   ============================================ */

/* Above the fold 콘텐츠 우선순위 */
.above-fold {
    contain: layout;
    content-visibility: auto;
}

/* Below the fold 콘텐츠 지연 */
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ============================================
   14. CSS 컨테인먼트
   ============================================ */

/* 완전한 컨테인먼트 */
.full-containment {
    contain: strict;
}

/* 레이아웃 컨테인먼트 */
.layout-containment {
    contain: layout;
}

/* 페인트 컨테인먼트 */
.paint-containment {
    contain: paint;
}

/* ============================================
   15. 애니메이션 프레임 최적화
   ============================================ */

/* 60fps 유지 */
@media (min-width: 768px) {
    .smooth-animation {
        animation-duration: 16.67ms; /* 60fps */
        animation-timing-function: linear;
    }
}

/* 저사양 디바이스 대응 */
@media (max-width: 767px) {
    .smooth-animation {
        animation-duration: 33.33ms; /* 30fps */
    }
}

/* ============================================
   16. 프리로드 힌트
   ============================================ */

/* 중요 리소스 표시 */
.critical-resource {
    /* 브라우저에게 중요도 힌트 제공 */
    contain: layout style;
    content-visibility: visible;
}

/* ============================================
   17. 축소 모드 지원
   ============================================ */

/* prefers-reduced-data 지원 */
@media (prefers-reduced-data: reduce) {
    /* 데이터 절약 모드 */
    .data-heavy {
        display: none;
    }
    
    .gradient-title {
        background: #ffd700;
        -webkit-background-clip: unset;
        -webkit-text-fill-color: unset;
    }
    
    /* 애니메이션 제거 */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   18. 런타임 최적화 클래스
   ============================================ */

/* 동적으로 추가/제거할 수 있는 최적화 클래스 */
.perf-critical {
    will-change: transform, opacity;
    transform: translateZ(0);
}

.perf-idle {
    will-change: auto;
    transform: none;
}

.perf-loading {
    pointer-events: none;
    user-select: none;
}