/* ===========================
   Grid Init CSS
   공통 grid 레이아웃 초기 설정
   =========================== */

/* 공통 grid 컨테이너 */
.grid {
    display: grid;
    gap: 16px;           /* 기본 간격 */
}

/* === 기본 컬럼 수 === */
.grid-1  { grid-template-columns: repeat(1, 1fr); }
.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-7  { grid-template-columns: repeat(7, 1fr); }
.grid-8  { grid-template-columns: repeat(8, 1fr); }

/* === 갭 유틸리티 === */
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

.gap-6 {
    gap: 4.5rem !important;
}

/* === 아이템 정렬 === */
.items-start   { align-items: start; }
.items-center  { align-items: center; }
.items-end     { align-items: end; }

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

/* === 반응형 === */
@media (max-width: 1200px) {
    .lg-grid-1 { grid-template-columns: repeat(1, 1fr); }
    .lg-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .md-grid-1 { grid-template-columns: repeat(1, 1fr); }
    .md-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .md-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .md-grid-1 { grid-template-columns: repeat(1, 1fr); }
    .md-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .sm-grid-1 { grid-template-columns: repeat(1, 1fr); }
    .sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
}