.contents_wrap {
    margin-top: -100px;
}
.sub {
    margin-top: -50px;
}
.about-page-container {
    max-width: 1653px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
    box-sizing: border-box; 
}

/* 최상단 이미지 배너 (Full-width) - 레이아웃 및 높이 문제 최종 수정 */
.about-top-banner {
    /* 불안정한 Full-bleed 코드 제거하고 안정적인 너비로 변경 */
    width: 100%; 
    
    /* 모든 화면 크기에서 반응형 높이가 적용되도록 수정 */
    aspect-ratio: 16 / 6; /* 이미지 비율에 맞춰 조정 (가로가 더 긴 형태) */
    max-height: 870px;   /* 최대 높이 제한 */
    min-height: 350px;   /* 최소 높이 보장 */

    background-image: url('/images/about-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 120px;
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.about-top-banner .banner-text-wrapper {
    /* 중앙 정렬을 위해 별도 속성 불필요 */
}
.about-top-banner .banner-text {
    font-size: 40px;
    font-weight: 500;
    color: #333;
    line-height: 1.6;
    margin: 0;
}
.about-top-banner .banner-subtext {
    font-size: 15px;
    color: #333;
    margin-top: 15px;
}

/* "다음세대에듀는" 소개 섹션 */
.about-intro-section {
    max-width: 860px;
    margin: 0 auto 120px auto;
}
.about-intro-section .intro-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 35px;
}
.about-intro-section .intro-text {
    font-size: 16px;
    color: #555;
    line-height: 1.85;
    text-align: justify;
    margin-bottom: 1.85em;
}
.about-intro-section .intro-text:last-of-type {
    margin-bottom: 0;
}


/* ======================================== */
/* ===== Material 3 Style Redesign ===== */
/* ======================================== */

/* 공통 섹션 레이아웃 */
.about-content-section {
    display: flex;
    border-top: 1px solid #e0e0e0;
    padding-top: 100px;
    padding-bottom: 100px;
}
.about-content-section:last-of-type {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 100px;
}

/* 섹션 - 좌측 컬럼 (제목, 서브메뉴) */
.section-left {
    width: 280px;
    flex-shrink: 0;
    margin-right: 80px;
}
.section-left .section-title {
    font-size: 34px;
    font-weight: 700;
    color: #1c1b1f; /* M3 On-Surface color */
    line-height: 1.4;
    margin-bottom: 40px;
}

/* M3 스타일 좌측 서브메뉴(탭) - 남색 계열로 수정 */
.section-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.section-submenu li {
    font-size: 16px;
    font-weight: 600;
    color: #49454f; /* M3 On-Surface-Variant */
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 100px; /* Pill shape */
    margin-bottom: 12px;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    z-index: 1;
}
.section-submenu li:hover {
    background-color: rgba(28, 27, 31, 0.08); /* M3 State Layer Hover */
}
.section-submenu li.active {
    color: #001d36; /* M3 On-Secondary-Container - Dark Blue */
    background-color: #d0e4ff; /* M3 Secondary-Container - Light Blue */
    font-weight: 700;
}

/* 섹션 - 우측 컬럼 (콘텐츠) */
.section-right {
    flex-grow: 1;
    padding-top: 10px;
}

/* 탭 콘텐츠 스타일 */
.tab-pane {
    display: none;
    animation: fadeIn 0.5s;
}
.tab-pane.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 우측 콘텐츠 블록 (M3 Card Style) */
.content-block {
    background-color: #f8f9fa; /* M3 Surface-Container-Lowest */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
}

.content-block .content-year {
    font-size: 22px;
    font-weight: 700;
    color: #1c1b1f;
    margin-bottom: 20px;
}

.content-block .content-description {
    font-size: 16px;
    color: #49454f;
    line-height: 1.8;
    margin-bottom: 1.5em;
    padding: 0;
    border: none; /* 기존 border-left 제거 */
}
.content-block .content-description:last-child {
    margin-bottom: 0;
}

/* 사진 콘텐츠 블록 */
.photo-block.content-block {
    text-align: center;
    padding: 20px;
}
.content-photo {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}
.content-photo-description {
    font-size: 16px;
    color: #1c1b1f;
    font-weight: 600;
    margin: 0;
}

/* 반응형 스타일 */
@media (max-width: 1024px) {
    .about-top-banner {
        aspect-ratio: 2 / 1;
        margin-bottom: 80px;
    }
    .about-content-section {
        flex-direction: column;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .section-left {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
    }
    .section-left .section-title {
        margin-bottom: 20px;
    }
    .section-right {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .about-top-banner {
        aspect-ratio: 16 / 9;
        min-height: 200px;
    }
    .section-left .section-title {
        font-size: 28px;
    }
    .section-submenu {
        display: flex;
        overflow-x: auto; /* 모바일에서 탭 가로 스크롤 */
        padding-bottom: 10px;
        margin-bottom: -10px;
    }
    .section-submenu li {
        flex-shrink: 0; /* 탭 너비 유지 */
        margin-bottom: 0;
        margin-right: 8px;
    }
}