/* Main CSS - 모든 스타일을 통합하는 메인 파일 */

/* Import global styles first (highest priority) */
@import url('./globals.css');

/* Import all common styles */
@import url('./base.css');
@import url('./theme.css');
@import url('./layout.css');
@import url('./components.css');
@import url('./animated-fade-gallery.css');
@import url('./animated-masonry-slider.css');
@import url('./image-with-fallback.css');

/* Global Custom Styles - Override with higher specificity */
body {
    font-family: var(--font-family-sans) !important;
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Selection Colors */
::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-400);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-500);
}

/* Focus Ring */
.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .no-print {
        display: none !important;
    }

    .print-block {
        display: block !important;
    }

    @page {
        margin: 2cm;
    }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Add high DPI specific styles if needed */
}

/* Container Queries Support */
@supports (container-type: inline-size) {
    .container-query {
        container-type: inline-size;
    }

    @container (min-width: 400px) {
        .container-responsive {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
    }
}

/* CSS Grid Fallback for older browsers */
@supports not (display: grid) {
    .grid {
        display: flex;
        flex-wrap: wrap;
    }

    .grid > * {
        flex: 1 1 300px;
        margin: 0.5rem;
    }
}

/* Empty Image Placeholder - 모든 페이지 공통 */
.empty-image-placeholder {
    border: 2px dashed #9ca3af !important;
    border-radius: 0.75rem !important;
    background: #d1d5db !important;
}