:root {
    /* 컨테이너 크기 (뷰포트 기반) */
    --container-xs-width: 20vw;
    --container-sm-width: 40vw;
    --container-md-width: 60vw;
    --container-lg-width: 80vw;
    --container-xl-width: 95vw;
    --container-full-width: 100vw;
    
    /* 컨테이너 최소 크기 */
    --container-xs-min-width: 200px;
    --container-sm-min-width: 320px;
    --container-md-min-width: 480px;
    --container-lg-min-width: 640px;
    --container-xl-min-width: 800px;
    --container-full-min-width: 100vw;
    
    /* 컨테이너 패딩 */
    --container-padding-xs: 8px;
    --container-padding-sm: 12px;
    --container-padding-md: 16px;
    --container-padding-lg: 20px;
    --container-padding-xl: 24px;
    --container-padding-full: 28px;

    /* 컨테이너 마진 */
    --container-margin: 10px;

    /* 컨테이너 배경색 */
    --container-background-white: #ffffff;
    --container-background-light: #f8f9fa;
    --container-background-gray: #e9ecef;
    --container-background-dark: #343a40;
    --container-background-primary: #007bff;
    --container-background-secondary: #6c757d;
    --container-background-success: #28a745;
    --container-background-danger: #dc3545;
    --container-background-warning: #ffc107;
    --container-background-info: #17a2b8;
    
    /* 컨테이너 스타일 */
    --container-border-radius: 8px;
    --container-border-radius-sm: 4px;
    --container-border-radius-lg: 12px;
    --container-border-radius-xl: 16px;
    --container-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --container-box-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    --container-box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --container-transition: all 0.3s ease;
    
    /* 레이아웃 간격 */
    --container-gap-xs: 8px;
    --container-gap-sm: 12px;
    --container-gap-md: 16px;
    --container-gap-lg: 20px;
    --container-gap-xl: 24px;
    
    /* 반응형 브레이크포인트 */
    --container-breakpoint-sm: 480px;
    --container-breakpoint-md: 768px;
    --container-breakpoint-lg: 992px;
    --container-breakpoint-xl: 1200px;
    --container-breakpoint-xxl: 1400px;
}

.container {
    box-sizing: border-box;
    transition: var(--container-transition);
}

.grid-container {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    width: 100%;
    height: 100%;
}

.grid-left-main-right-sub {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    width: 100%;
    height: 100%;
}

.main-container {
    width: var(--container-xl-width);
    min-width: var(--container-xl-min-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.base-whole-container {
    width: 77.5vw;
    background: var(--container-background-white);
    border-radius: var(--container-border-radius-sm);
    padding: var(--container-padding-lg);
    box-shadow: var(--container-box-shadow-lg);
    margin: var(--container-margin) auto;
    min-height: calc(100vh - 80px);
}

.left-main-container {
    flex: 1;
    background: white;
    border-radius: 10px;
    padding: 30px;
    padding-top: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
}

.right-main-container {
    flex: 1;
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.left-sub-container {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.right-sub-container {
    background: white;
    border-radius: 10px;
    padding: 30px;
    padding-top: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    height: fit-content;
    position: sticky;
}

/* ================================
   컨테이너 크기 (화면 상대값)
   ================================ */
.container-xs {
    width:var(--container-xs-width);
    min-width: var(--container-xs-min-width);
    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

.container-sm {
    width: var(--container-sm-width);
    min-width: var(--container-sm-min-width);
    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

.container-md {
    width: var(--container-md-width);
    min-width: var(--container-md-min-width);
    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

.container-lg {
    width: var(--container-lg-width);
    min-width: var(--container-lg-min-width);
    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

.container-xl {
    width: var(--container-xl-width);
    min-width: var(--container-xl-min-width);
    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

.container-full {
    width: var(--container-full-width);
    min-width: var(--container-full-min-width);
    margin-top: var(--container-margin);
    margin-bottom: var(--container-margin);
}

/* ================================
   반응형 디자인 (뷰포트 기반)
   ================================ */

/* 태블릿 이하 (768px 이하) */
@media (width:768px) {
    .layout-grid-2,
    .layout-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .layout-flex-row {
        flex-direction: column;
    }
    
    /* 모바일에서는 더 넓게 사용 */
    .container-xs {
        width:90vw;
        min-width: unset;
        margin: var(--container-margin-xs);
    }
    
    .container-sm {
        width:95vw;
        min-width: unset;
        margin: var(--container-margin-sm);
    }
    
    .container-md,
    .container-lg,
    .container-xl {
        width:98vw;
        min-width: unset;
        margin: var(--container-margin-md);
    }
    
    .panels-container {
        grid-template-columns: 1fr !important;
        gap: var(--container-gap-md);
    }
}

/* 모바일 (480px 이하) */
@media (width:480px) {
    .container-xs,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        width:100vw;
        min-width: unset;
        padding: var(--container-padding-sm);
        margin: var(--container-margin-xs);
    }
    
    .layout-flex-row {
        gap: var(--container-gap-xs);
    }
    
    .layout-flex-column {
        gap: var(--container-gap-xs);
    }
    
    .layout-grid-2,
    .layout-grid-3 {
        gap: var(--container-gap-xs);
    }
    
    .main-container {
        padding: var(--container-padding-md) var(--container-padding-sm) !important;
    }
    
    .panel {
        min-height: 240px !important;
        padding: var(--container-padding-md) !important;
    }
}

/* 대형 화면 (1400px 이상) */
@media (min-width: 1400px) {
    .container-xs {
        width:20vw;
        min-width: 350px;
    }
    
    .container-sm {
        width:30vw;
        min-width: 420px;
    }
    
    .container-md {
        width:50vw;
        min-width: 700px;
    }
    
    .container-lg {
        width:70vw;
        min-width: 980px;
    }
    
    .container-xl {
        width:85vw;
        min-width: 1190px;
    }
}