/* 반응형 설정 */

/* 스크린 크기에 대한 브레이크 포인트 */
:root {
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

/* 기본 컨테이너 */
.container {
    width: 100%;
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
    margin-right: auto;
    margin-left: auto;
}

/* 유동 이미지 */
.img-fluid {
    max-width: 100%;
    height: auto;
}

/* 반응형 텍스트 */
.text-responsive {
    font-size: calc(var(--font-size-base) + 1vw);
}

/* 반응형 그리드 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-left: -1rem;
}

.col {
    flex: 1 0 0%;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* 반응형 컬럼 - 모바일 */
[class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
}

/* 미디어 쿼리 - 모바일 이상 */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
    
    /* 테블릿 컬럼 */
    .col-sm-1 { width: 8.333333%; }
    .col-sm-2 { width: 16.666667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.333333%; }
    .col-sm-5 { width: 41.666667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.333333%; }
    .col-sm-8 { width: 66.666667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.333333%; }
    .col-sm-11 { width: 91.666667%; }
    .col-sm-12 { width: 100%; }
}

/* 미디어 쿼리 - 태블릿 */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    /* 태블릿 컬럼 */
    .col-md-1 { width: 8.333333%; }
    .col-md-2 { width: 16.666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-40 { width: 40%; }
    .col-md-45 { width: 45%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-55 { width: 55%; }
    .col-md-60 { width: 60%; }
    .col-md-7 { width: 58.333333%; }
    .col-md-8 { width: 66.666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
}

/* 미디어 쿼리 - 데스크탑 */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
    
    /* 데스크탑 컬럼 */
    .col-lg-1 { width: 8.333333%; }
    .col-lg-2 { width: 16.666667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.333333%; }
    .col-lg-4-5 { width: 45%; }
    .col-lg-5 { width: 41.666667%; }
    .col-lg-5-5 { width: 55%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.333333%; }
    .col-lg-8 { width: 66.666667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }
}

/* 미디어 쿼리 - 대형 데스크탑 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    /* 대형 데스크탑 컬럼 */
    .col-xl-1 { width: 8.333333%; }
    .col-xl-2 { width: 16.666667%; }
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.333333%; }
    .col-xl-5 { width: 41.666667%; }
    .col-xl-6 { width: 50%; }
    .col-xl-7 { width: 58.333333%; }
    .col-xl-8 { width: 66.666667%; }
    .col-xl-9 { width: 75%; }
    .col-xl-10 { width: 83.333333%; }
    .col-xl-11 { width: 91.666667%; }
    .col-xl-12 { width: 100%; }
}

/* 미디어 쿼리 - 초대형 디스플레이 */
@media (min-width: 1400px) {
    .container {
        max-width: var(--container-width);
    }
}

/* 모바일 화면에서만 보이는 요소 */
.mobile-only {
    display: none;
}

/* 데스크탑 화면에서만 보이는 요소 */
.desktop-only {
    display: block;
}

/* 모바일 화면에서 숨길 요소 */
@media (max-width: 767px) {
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: block;
    }
}