/* ===================================================================
   utilities.css - 정음 웹사이트 유틸리티 클래스
   레이아웃, 스페이싱, 디스플레이 유틸리티
   =================================================================== */

/* 컨테이너 */
.container {
    max-width: none;
    margin: 0 auto;
    padding: 0 var(--spacing-10);
    width: 100%;
}

/* 태블릿 구간: 컨테이너 패딩 조정 */
@media (min-width: 769px) and (max-width: 1199px) {
    .container {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
}


/* 풀 이미지 컨테이너 */
.container--full {
    padding: 0;
}

/* 그리드 시스템 */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.grid--responsive {
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
}

.cards-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: var(--bp-lg)) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: var(--bp-sm)) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

/* 플렉스 유틸리티 */
.flex {
    display: flex;
}

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

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

.items-center {
    align-items: center;
}

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

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

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

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

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

/* 섹션 공통 스타일 */
.section {
    padding: var(--spacing-20) 0;
}

.section__header {
    text-align: center;
    margin-bottom: var(--spacing-10);
}

.content-section-group {
    padding: 11.25rem 0;
}

.section-group {
    padding: var(--spacing-20) 0;
}

.section__header--left {
    text-align: left;
}

.section__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.section__title {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.section__header-row .section__title {
    margin-bottom: 0;
}

.section__description {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-loose);
}

.section__content {
    margin-bottom: var(--spacing-2xl);
}

.section__actions {
    text-align: center;
    margin-top: var(--spacing-2xl);
}

/* 히어로 섹션 */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 50rem;
    padding: var(--spacing-2xl);
}

.hero-title {
    font-family: var(--font-family-bold);
    font-size: var(--font-size-6xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.hero-subtitle {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-2xl);
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: var(--spacing-2xl);
}

.hero-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-2xl);
}

/* 마진 유틸리티 */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-3xl { margin: var(--spacing-3xl); }
.m-4xl { margin: var(--spacing-4xl); }

/* 마진 방향별 */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }
.mt-4xl { margin-top: var(--spacing-4xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }
.mb-4xl { margin-bottom: var(--spacing-4xl); }

.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }
.ml-2xl { margin-left: var(--spacing-2xl); }
.ml-3xl { margin-left: var(--spacing-3xl); }
.ml-4xl { margin-left: var(--spacing-4xl); }

.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }
.mr-2xl { margin-right: var(--spacing-2xl); }
.mr-3xl { margin-right: var(--spacing-3xl); }
.mr-4xl { margin-right: var(--spacing-4xl); }

/* 패딩 유틸리티 */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }
.p-4xl { padding: var(--spacing-4xl); }

/* 패딩 방향별 */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pt-2xl { padding-top: var(--spacing-2xl); }
.pt-3xl { padding-top: var(--spacing-3xl); }
.pt-4xl { padding-top: var(--spacing-4xl); }

.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pb-2xl { padding-bottom: var(--spacing-2xl); }
.pb-3xl { padding-bottom: var(--spacing-3xl); }
.pb-4xl { padding-bottom: var(--spacing-4xl); }

.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }
.pl-2xl { padding-left: var(--spacing-2xl); }
.pl-3xl { padding-left: var(--spacing-3xl); }
.pl-4xl { padding-left: var(--spacing-4xl); }

.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }
.pr-2xl { padding-right: var(--spacing-2xl); }
.pr-3xl { padding-right: var(--spacing-3xl); }
.pr-4xl { padding-right: var(--spacing-4xl); }

/* 간격 유틸리티 */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }
.gap-4xl { gap: var(--spacing-4xl); }

/* 반응형 레이아웃 */
@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-5);
    }
    
    .container--full {
        padding: 0;
    }
    
    .hero-title {
        font-size: var(--font-size-5xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-xl);
    }
    
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    
    .content-section-group {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-8);
    }
    
    .section-group {
        padding: var(--spacing-8) 0;
    }
    
    .section__header {
        margin-bottom: var(--spacing-8);
    }
}

@media (max-width: var(--bp-sm)) {
    .hero-title {
        font-size: var(--font-size-4xl);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-lg);
    }
    
}