/**
 * CSS Grid + Flexbox 레이아웃 시스템 (항목 46)
 * 
 * 목표: 현대적이고 유연한 레이아웃
 */

/* ===== Grid 시스템 ===== */

/* 기본 그리드 컨테이너 */
.grid {
    display: grid;
    gap: var(--grid-gap, 24px);
}

/* 자동 fit 그리드 (반응형) */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width, 300px), 1fr));
    gap: var(--grid-gap, 24px);
}

/* 자동 fill 그리드 */
.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min-col-width, 250px), 1fr));
    gap: var(--grid-gap, 24px);
}

/* 고정 컬럼 그리드 */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* 비율 그리드 */
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }
.grid-3-1 { grid-template-columns: 3fr 1fr; }
.grid-1-3 { grid-template-columns: 1fr 3fr; }

/* 대시보드 레이아웃 */
.grid-dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Row span */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }

/* ===== Flexbox 시스템 ===== */

/* 기본 Flex 컨테이너 */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* Flex 방향 */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Flex wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify content (수평 정렬) */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align items (수직 정렬) */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align content */
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }

/* Flex grow/shrink */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }

.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Gap 유틸리티 */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* ===== 실용 레이아웃 패턴 ===== */

/* 카드 그리드 (키워드 분석 결과용) */
.keyword-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

/* 메트릭 그리드 (3x2) */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

/* 사이드바 레이아웃 */
.layout-sidebar {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
}

/* 헤더-콘텐츠-푸터 레이아웃 */
.layout-full-height {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* 센터 정렬 (Flexbox) */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 카드 내부 레이아웃 (헤더 + 바디) */
.card-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.card-body {
    flex: 1;
}

/* 통계 카드 레이아웃 */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
}

.stat-label {
    font-size: 0.875rem;
    color: #718096;
}

/* ===== 반응형 그리드 ===== */

@media (max-width: 1280px) {
    .grid-6 { grid-template-columns: repeat(4, 1fr); }
    .grid-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .grid-dashboard { grid-template-columns: repeat(8, 1fr); }
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    
    .layout-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .grid-dashboard { grid-template-columns: repeat(4, 1fr); }
    .grid-4 { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    
    .grid-2-1,
    .grid-1-2,
    .grid-3-1,
    .grid-1-3 {
        grid-template-columns: 1fr;
    }
    
    .col-span-1,
    .col-span-2,
    .col-span-3,
    .col-span-4,
    .col-span-5,
    .col-span-6,
    .col-span-7,
    .col-span-8,
    .col-span-9,
    .col-span-10,
    .col-span-11,
    .col-span-12 {
        grid-column: span 4;
    }
}

@media (max-width: 480px) {
    .grid-dashboard { grid-template-columns: 1fr; }
    
    .col-span-1,
    .col-span-2,
    .col-span-3,
    .col-span-4,
    .col-span-5,
    .col-span-6,
    .col-span-7,
    .col-span-8,
    .col-span-9,
    .col-span-10,
    .col-span-11,
    .col-span-12 {
        grid-column: span 1;
    }
}

/* ===== CSS 변수 ===== */
:root {
    --grid-gap: 24px;
    --min-col-width: 300px;
}