/* ====================================
   🎯 하프노마드 반응형 그리드 시스템
   📱 모바일 우선 설계 (320px ~)
   ⚡ 성능 최적화: Flexbox + CSS Grid 하이브리드
==================================== */

/* 🎨 그리드 시스템 CSS 변수 */
:root {
    /* 컨테이너 최대 너비 */
    --container-max-width: 1200px;
    --container-padding: 1rem;
    
    /* 그리드 간격 */
    --grid-gap: 1rem;
    --grid-gap-mobile: 0.75rem;
    --grid-gap-tablet: 1.25rem;
    --grid-gap-desktop: 1.5rem;
    
    /* 브레이크포인트 (참조용) */
    --bp-mobile: 320px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --bp-wide: 1200px;
    
    /* 섹션 간격 */
    --section-spacing: 3rem;
    --section-spacing-mobile: 2rem;
    --section-spacing-desktop: 4rem;
}

/* 📦 메인 컨테이너 시스템 */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    box-sizing: border-box;
}

/* 전체 너비 컨테이너 (Hero, Footer 등) */
.container-full {
    width: 100%;
    padding: 0;
}

/* 좁은 콘텐츠 컨테이너 */
.container-narrow {
    max-width: 800px;
}

/* 🎯 CSS Grid 기반 레이아웃 시스템 */
.grid {
    display: grid;
    gap: var(--grid-gap-mobile);
    width: 100%;
}

/* 기본 그리드 컬럼 설정 */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr; } /* 모바일에서는 1컬럼 */
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

/* 🎯 Flexbox 기반 유연한 레이아웃 */
.flex {
    display: flex;
    gap: var(--grid-gap-mobile);
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-between {
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-end {
    justify-content: flex-end;
    align-items: flex-end;
}

/* 🎯 섹션 레이아웃 시스템 */
.section {
    padding: var(--section-spacing-mobile) 0;
    position: relative;
}

.section-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
}

.section-content {
    padding: var(--section-spacing-mobile) 0;
}

.section-compact {
    padding: calc(var(--section-spacing-mobile) * 0.75) 0;
}

/* 🎯 카드 그리드 시스템 */
.card-grid {
    display: grid;
    gap: var(--grid-gap-mobile);
    grid-template-columns: 1fr;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(39, 64, 96, 0.3);
}

/* 🎯 특수 레이아웃 컴포넌트 */
.hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    min-height: 80vh;
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.text-image-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

/* 🎯 스페이싱 유틸리티 */
.gap-xs { gap: 0.5rem; }
.gap-sm { gap: 0.75rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.gap-xl { gap: 2rem; }
.gap-2xl { gap: 3rem; }

/* 마진 유틸리티 */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }

/* 패딩 유틸리티 */
.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

.px-2 { padding-left: 1rem; padding-right: 1rem; }
.px-3 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 1rem; padding-bottom: 1rem; }
.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* =======================================
   📱 태블릿 반응형 (768px 이상)
======================================= */
@media (min-width: 768px) {
    :root {
        --container-padding: 2rem;
        --grid-gap: var(--grid-gap-tablet);
    }
    
    /* 그리드 시스템 업데이트 */
    .grid {
        gap: var(--grid-gap-tablet);
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(2, 1fr); /* 태블릿에서는 2컬럼 */
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* 카드 그리드 */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-tablet);
    }
    
    /* 섹션 스페이싱 */
    .section {
        padding: var(--section-spacing) 0;
    }
    
    .section-content {
        padding: var(--section-spacing) 0;
    }
    
    /* 특수 레이아웃 */
    .hero-layout {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .split-layout {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .text-image-layout {
        grid-template-columns: 1.2fr 1fr;
        gap: 3rem;
    }
    
    /* 이미지-텍스트 순서 변경 */
    .text-image-layout.reverse {
        grid-template-columns: 1fr 1.2fr;
    }
    
    .text-image-layout.reverse .image {
        order: -1;
    }
    
    /* Flexbox 업데이트 */
    .flex {
        gap: var(--grid-gap-tablet);
    }
}

/* =======================================
   💻 데스크톱 반응형 (1024px 이상)
======================================= */
@media (min-width: 1024px) {
    :root {
        --container-padding: 2rem;
        --grid-gap: var(--grid-gap-desktop);
    }
    
    /* 그리드 시스템 풀 활용 */
    .grid {
        gap: var(--grid-gap-desktop);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    /* 카드 그리드 */
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--grid-gap-desktop);
    }
    
    .card-grid.grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* 섹션 스페이싱 */
    .section {
        padding: var(--section-spacing-desktop) 0;
    }
    
    .section-content {
        padding: var(--section-spacing-desktop) 0;
    }
    
    /* 고급 레이아웃 */
    .hero-layout {
        grid-template-columns: 1.3fr 1fr;
        gap: 4rem;
    }
    
    .split-layout {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
    
    .text-image-layout {
        grid-template-columns: 1.4fr 1fr;
        gap: 4rem;
    }
    
    /* Flexbox 업데이트 */
    .flex {
        gap: var(--grid-gap-desktop);
    }
}

/* =======================================
   🖥 와이드 스크린 (1200px 이상)
======================================= */
@media (min-width: 1200px) {
    :root {
        --container-padding: 2rem;
    }
    
    /* 추가 여백 최적화 */
    .hero-layout {
        gap: 5rem;
    }
    
    .split-layout {
        gap: 5rem;
    }
    
    .text-image-layout {
        gap: 5rem;
    }
}

/* =======================================
   🎯 특수 용도 그리드 클래스
======================================= */

/* 자동 피트 그리드 (카드 개수에 따라 자동 조정) */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--grid-gap);
}

.grid-auto-fit.min-300 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fit.min-250 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* 마스터 그리드 (복잡한 레이아웃용) */
.grid-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--grid-gap);
    grid-auto-rows: masonry; /* 미래 지원 */
}

/* 가로 스크롤 그리드 (모바일 카루셀) */
.grid-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 280px;
    gap: var(--grid-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.grid-scroll::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.grid-scroll > * {
    scroll-snap-align: start;
}

/* =======================================
   🎯 그리드 정렬 유틸리티
======================================= */
.justify-start { justify-items: start; }
.justify-center { justify-items: center; }
.justify-end { justify-items: end; }
.justify-stretch { justify-items: stretch; }

.align-start { align-items: start; }
.align-center { align-items: center; }
.align-end { align-items: end; }
.align-stretch { align-items: stretch; }

.place-center { place-items: center; }
.place-start { place-items: start; }
.place-end { place-items: end; }

/* =======================================
   🎯 반응형 유틸리티 클래스
======================================= */

/* 모바일에서만 숨김 */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

/* 태블릿에서만 숨김 */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}

/* 데스크톱에서만 숨김 */
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* 데스크톱에서만 표시 */
@media (max-width: 1023px) {
    .show-desktop-only { display: none !important; }
}

/* 모바일에서만 표시 */
@media (min-width: 768px) {
    .show-mobile-only { display: none !important; }
}

/* =======================================
   🚀 성능 최적화 설정
======================================= */

/* GPU 가속 활성화 */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* 스크롤 성능 최적화 */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* 컨테이너 쿼리 준비 (미래 지원) */
@supports (container-type: inline-size) {
    .container-query {
        container-type: inline-size;
    }
}

/* =======================================
   🎯 디버깅 도구 (개발 중에만 사용)
======================================= */
/*
.debug-grid * {
    outline: 1px solid rgba(255, 0, 0, 0.3);
}

.debug-grid .container {
    outline: 2px solid rgba(0, 255, 0, 0.5);
}

.debug-grid .grid {
    outline: 2px solid rgba(0, 0, 255, 0.5);
}
*/

/* =======================================
   🎯 접근성 개선
======================================= */
@media (prefers-reduced-motion: reduce) {
    .grid,
    .flex,
    .card {
        transition: none;
    }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid var(--text-primary);
    }
}

/* =======================================
   끝: 하프노마드 그리드 시스템
======================================= */