/* [교수님 CSS 변수 설정] */
:root {
    --main-color: #ff3c27;
    --sub-color: #333;
    --accent-color: #ff6b6f;
    --blue-gray-color: #d9e7f3;
    --font-family: 'Malgun Gothic', 'Arial', sans-serif;
    --font-Main-size: 1em;
}

/* 초기화 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-Main-size);
    background-color: #f9f9f9;
    color: var(--sub-color);
    line-height: 1.6;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header_h1 {
    text-align: center;
    padding: 20px 0;
}


section {
    margin-bottom: 30px;
}

.section_nav {
    margin-bottom: 20px;
}

.section_nav_ul {
    display: flex;
    list-style: none;
    justify-content: center;
    background: var(--sub-color);
    border-radius: 5px;
}

.section_nav_ul li a {
    display: block;
    color: white;
    padding: 15px 25px;
    text-decoration: none;
    font-weight: bold;
}

.section_nav_ul li a:hover {
    background-color: var(--accent-color);
}

.section_nav_ul li a.active {
    background-color: var(--main-color);
}

/* 🖼️ 메인 배너 박스 레이아웃 강제 교정 */
.content {
    width: 100%;
    height: auto;        /* 💡 높이 제한(300px, 450px 등)을 완전히 없앱니다 */
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 💡 핵심: 사진 전체가 홈페이지 너비에 맞춰 100% 다 보이게 하는 제어 */
.content_img {
    width: 100%;         /* 가로를 화면에 꽉 맞춥니다 */
    height: auto;        /* 💡 가로가 줄어들 때 세로도 원본 비율 그대로 '자동' 조절되어 사진 전체가 다 나옵니다 */
    display: block;
}

/* 카드 섹션 레이아웃 */
article {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

article .card {
    flex: 1;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

article .card .gallery {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

article .card .gallery img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

article .card .desc {
    padding: 20px;
}

article .card .desc h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--sub-color);
}

article .card .desc p {
    font-size: 0.95rem;
    color: #666;
}

/* aside 공지사항 */
aside {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

aside article {
    display: block;
    margin-bottom: 0;
}

aside article h2 {
    font-size: 1.4rem;
    color: var(--main-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--main-color);
    padding-bottom: 5px;
}

aside article ul {
    list-style: none;
}

aside article ul li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

aside article ul li a {
    text-decoration: none;
    color: var(--sub-color);
    display: block;
}

/* footer */
footer {
    background-color: var(--sub-color);
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 0.9rem;
}

/* 반응형 모바일 최적화 */
@media screen and (max-width: 768px) {
    /* 1. 메뉴 바를 세로로 깔끔하게 정렬 */
    .section_nav_ul {
        flex-direction: column;
        align-items: center;
    }
    .section_nav_ul li a {
        padding: 10px 0;
        width: 100%;
        text-align: center;
    }

    /* 2. 하단 3개 카드 섹션을 세로로 한 줄씩 정렬 */
    article {
        flex-direction: column;
    }

    /* 💡 [핵심 정답] 화면을 줄여도 사진의 '가운데'가 무조건 화면 중앙에 오도록 고정 */
    .content {
        height: 220px; /* 창이 작아졌을 때 배너가 너무 길쭉해지지 않도록 세로 높이 고정 */
    }

    .content_img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center; /* 💡 화면이 아무리 작아져도 사진의 정중앙을 기준으로 정렬해 인물이 안 잘립니다! */
    }

    /* 3. 작은 화면에서도 배너 글씨가 알맞은 크기로 보이게 조절 */
    .textBox_p {
        font-size: 1.8rem; 
        letter-spacing: 0px;
    }
}