/* Layout CSS - 레이아웃 스타일 */

/**
 * 컨테이너 시스템
 * 
 * 구조:
 * - .container-custom: 기본 컨테이너 (좌우 패딩, max-width)
 * - .container-list: 목록 페이지 전용 (더 넓은 max-width)
 * - .page-container: 페이지 상하 패딩
 * - .page-container-lg: 큰 페이지 상하 패딩
 * 
 * 사용 예시:
 * - 일반 페이지: <div class="container-custom page-container">
 * - 목록 페이지: <div class="container-custom container-list page-container">
 * - 폼 페이지: <div class="container-custom page-container-lg"><div class="content-max-width">
 */

/* ==================== 컨테이너 시스템 ==================== */

.container-custom {
    max-width: var(--container-max-width);
    margin: 0 auto;
    /* Safe Area 대응 */
    /* 모바일 기본 패딩: 직접 값 사용 (1rem = 16px) */
    /* Safe Area 대응: env() 값이 더 크면 적용 */
    /* 영향 범위: 컨테이너 좌우 패딩 토큰화 (기존 2rem 유지) */
    /* 테스트 포인트: 헤더/푸터/메인 컨테이너 PC·모바일 */
    padding-left: max(var(--container-padding-inline), env(safe-area-inset-left));
    padding-right: max(var(--container-padding-inline), env(safe-area-inset-right));
    width: 100%;
    /* 명시적으로 box-sizing 설정 */
    box-sizing: border-box;
}

/* 목록 페이지 전용 컨테이너 (더 넓게) */
.container-list {
    max-width: var(--container-max-width-list);
}

/* ==================== 페이지 컨테이너 ==================== */

/**
 * 페이지 컨테이너는 상하 여백만 담당합니다.
 * 좌우 여백은 container-custom에서만 처리합니다.
 * 
 * 중요: padding 속성을 사용하면 좌우 padding이 0으로 덮어씌워지므로
 * padding-top과 padding-bottom만 사용합니다.
 */

/* 더 구체적인 선택자로 특이성 높임 */
.container-custom.page-container {
    /* 상하 여백만 설정 (좌우는 container-custom에서 상속) */
    padding-top: var(--page-padding-mobile);
    /* 16px - 모바일 */
    padding-bottom: var(--page-padding-mobile);
    /* 16px - 모바일 */
    /* 좌우 padding은 container-custom에서 상속되므로 명시하지 않음 */
    min-height: calc(100vh - 200px);
}

/* 단독 사용 시에도 대응 */
.page-container {
    padding-top: var(--page-padding-mobile);
    /* 16px - 모바일 */
    padding-bottom: var(--page-padding-mobile);
    /* 16px - 모바일 */
    min-height: calc(100vh - 200px);
}

.page-container-lg {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-xl);
    min-height: calc(100vh - 200px);
}

@media (min-width: 768px) {

    /* 단독 사용 시에도 대응 */
    .page-container {
        padding-top: var(--page-padding-desktop);
        /* 32px - 데스크톱 */
        padding-bottom: var(--page-padding-desktop);
        /* 32px - 데스크톱 */
    }
}

/* ==================== 페이지 헤더 ==================== */

.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.page-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-text-main);
    line-height: var(--line-height-tight);
    margin: 0;
}

@media (min-width: 768px) {
    .page-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-xl);
    }

    .page-title {
        font-size: var(--font-size-3xl);
    }
}

/* ==================== 그리드 시스템 (모바일 퍼스트) ==================== */

.grid {
    gap: var(--spacing-md);
}

/* 모바일/좁은 화면에서 콘텐츠 오버플로우 방지 */
.grid > * {
    min-width: 0;
}

/* 영향 범위: 그리드 전체 폭 유틸리티 */
/* 테스트 포인트: 목록 페이지 빈 상태 */
.grid-span-full {
    grid-column: 1 / -1;
}

/* 모바일: 단일 컬럼 */
.grid-2,
.grid-3 {
    grid-template-columns: 1fr;
}

/* 태블릿: 2컬럼 */
@media (min-width: 768px) {
    .grid {
        display: grid;
        gap: var(--spacing-lg);
    }

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

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

/* 데스크톱: 3컬럼 */
@media (min-width: 1024px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* 반응형 그리드 (최소 너비 기반) */
.grid-auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto-fit-md {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* 모바일에서 최소 너비 무시 */
@media (max-width: 767px) {

    .grid-auto-fit-sm,
    .grid-auto-fit-md,
    .grid-auto-fit-lg {
        grid-template-columns: 1fr;
    }
}

/* 섹션 구분선 */
.section-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-3xl) 0;
}

/* 배경 */
.bg-subtle {
    background-color: var(--color-bg-subtle);
    /* 섹션 경계 인식 강화 - 미세한 상·하 경계감 부여 */
    box-shadow: inset 0 1px 0 var(--color-border-light),
                inset 0 -1px 0 var(--color-border-light);
}

/* Flexbox 유틸리티 */
.d-flex {
    display: flex;
}

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

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

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

/* 영향 범위: 그리드/플렉스 수직 정렬 유틸리티 */
/* 테스트 포인트: 대시보드/프로필 2컬럼 레이아웃 */
.align-items-start {
    align-items: start;
}

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

.sticky-top {
    position: sticky;
    top: var(--spacing-lg);
}