/* 통일된 페이지 레이아웃 CSS - 모든 페이지 일관성 보장 */

/* ===== 기본 페이지 컨테이너 ===== */
/* 모든 페이지에서 사용할 통일된 컨테이너 - 높은 우선순위 */
.page-container,
main.main-section,
.main-section,
body main.main-section,
body .main-section {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* ===== 헤더와 본문 사이 간격 ===== */
/* 헤더 고정 높이에 따른 상단 여백 */
.page-container,
main.main-section,
.main-section,
body main.main-section,
body .main-section,
.hero-section,
.level-system-section,
.features-section,
.stats-section {
    padding-top: 90px !important; /* 헤더 높이 + 여유 공간 */
}

/* ===== 푸터와 본문 사이 간격 ===== */
/* 푸터와 하단 탭바를 고려한 하단 여백 - 통일된 간격 */
.page-container,
main.main-section,
.main-section,
body main.main-section,
body .main-section {
    padding-bottom: 30px !important; /* 푸터와 적절한 간격 유지 */
}

/* ===== 타이틀 스타일 통일 ===== */
.page-title,
.section-title,
h1, h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
    text-align: left;
}

/* ===== 섹션 간격 통일 ===== */
.content-section,
.quiz-content-section,
.learning-content-section,
.community-content-section,
.hero-section,
.level-system-section,
.features-section {
    margin-bottom: 1rem;
    padding-top: 60px !important; /* 헤더와의 간격 축소 */
    padding-bottom: 1rem !important; /* 하단 패딩 축소 */
}

/* 통계 섹션 전용 스타일 */
.stats-section {
    margin-bottom: 1rem;
    padding-top: 0.1rem !important; /* 상단 패딩 최소화 */
    padding-bottom: 0.1rem !important; /* 하단 패딩 최소화 */
    display: flex !important;
    align-items: center !important; /* 세로 중앙 정렬 */
    min-height: 80px !important; /* 최소 높이 설정 */
}

.stats-section .container {
    width: 100% !important;
}

/* ===== PC 화면 (1025px 이상) ===== */
@media (min-width: 1025px) {
    .page-container,
    main.main-section,
    .main-section {
        max-width: 1200px;
        padding: 90px 40px 120px 40px;
    }

    .page-title,
    .section-title,
    h1, h2 {
        font-size: 2rem;
    }
}

/* ===== 태블릿 화면 (769px ~ 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-container,
    main.main-section,
    .main-section {
        max-width: 1024px;
        padding: 90px 30px 30px 30px; /* 통일된 하단 간격 */
    }

    .page-title,
    .section-title,
    h1, h2 {
        font-size: 1.8rem;
    }

    /* 태블릿에서 헤더 높이 고려 */
    .page-container,
    main.main-section,
    .main-section,
    .hero-section,
    .level-system-section,
    .features-section {
        padding-top: 60px !important; /* 태블릿 헤더 높이 + 축소된 여유 */
        padding-bottom: 1rem !important; /* 하단 패딩 축소 */
    }

    /* 태블릿 통계 섹션 */
    .stats-section {
        padding-top: 0.1rem !important; /* 상단 패딩 최소화 */
        padding-bottom: 0.1rem !important; /* 하단 패딩 최소화 */
        min-height: 70px !important; /* 태블릿 최소 높이 */
    }
}

/* ===== 모바일 화면 (768px 이하) ===== */
@media (max-width: 768px) {
    .page-container,
    main.main-section,
    .main-section {
        padding: 80px 16px 20px 16px; /* 통일된 하단 간격 */
    }

    .page-title,
    .section-title,
    h1, h2 {
        font-size: 1.5rem;
    }

    .content-section,
    .quiz-content-section,
    .learning-content-section,
    .community-content-section {
        margin-bottom: 1.5rem;
    }

    .stats-section {
        padding-top: 0.05rem !important; /* 모바일 상단 패딩 최소화 */
        padding-bottom: 0.05rem !important; /* 모바일 하단 패딩 최소화 */
        margin-bottom: 0.5rem !important; /* 모바일 마진 축소 */
        min-height: 60px !important; /* 모바일 최소 높이 축소 */
    }
}

/* ===== 작은 모바일 화면 (480px 이하) ===== */
@media (max-width: 480px) {
    .page-container,
    main.main-section,
    .main-section {
        padding: 70px 12px 15px 12px; /* 통일된 하단 간격 */
    }

    .page-title,
    .section-title,
    h1, h2 {
        font-size: 1.3rem;
    }
}

/* ===== 특별한 페이지 대응 ===== */
/* index.html은 main 태그가 없으므로 body에 직접 적용 */
body:has(.hero-section) {
    padding-top: 0; /* index.html은 hero-section이 상단 여백 처리 */
}

/* 스크롤 시 부드러운 효과 */
html {
    scroll-behavior: smooth;
}

/* 모든 컨테이너 box-sizing 통일 */
* {
    box-sizing: border-box;
}