/* 메인헤더 border 없애기 */
.main-header {
    box-shadow: none;
}

.page-header {
    text-align: center;
    margin : 4em auto;
    max-width: 80%;
    padding: 1em;
    background: linear-gradient(90deg, var(--color-green), var(--color-blue));
    color: white;
    border-radius: 0.5em;
    box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.1);
}

.page-header h1 {
    font-size: 1.8em;
    margin:0;
    padding:0;
}

/* 상단 nav */
.section-nav {
    position: sticky;
    top: 4em;
    background-color: white;
    border-bottom: 0.1em solid #ddd;
    padding: 1em 0;
    z-index: 999;
    box-shadow: 0 0.125em 0.25em rgba(0,0,0,0.1);
    font-weight: 500;
    border-top: 0.1em solid #494747;
}

.section-nav ul {
    display: flex;
    justify-content: center;
    gap: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-nav ul li a {
    text-decoration: none;
    color: rgb(90, 87, 87);
    font-size: 1em;
    transition: color 0.3s ease;
}

.section-nav ul li a:hover {
    color: var(--color-blue);
}


/* main 영역 */
/* .main-content {
    padding:0 5em;
} */


/* 각 컨텐츠 영역 */
.content-section {
    max-width: 75%;
    margin: 4em auto;
    padding: 2em 3em;
    background-color: #f9f9f9;
    border-radius: 1em;
    box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.1);
}

.content-section h2 {
    font-size: 2em;
    margin-bottom: 1em;
    color: var(--color-blue);
}

.content-section p {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom:2em;
}

/* 심리검사 설명 */
.section-description {
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 2em;
    color: var(--color-text);
}


/* 유튜브 링크 */
.youtube-link {
    display: block;
    text-align: right;         /* 🔸오른쪽 정렬 */
    text-decoration: none;     /* 밑줄 제거 */
    color: var(--color-blue);  /* 🔸기본 색상 */
    font-weight: bold;
    font-size: 1.3em;
    transition: color 0.3s ease;
    margin-top:3em;
    margin-bottom:1em;
}

.youtube-link:hover {
    color: var(--color-purple); /* 🔸호버 시 색상 변경 */
    text-decoration: underline; /* 🔸호버 시 밑줄 효과 */
}


.method-hwadu {
    margin-top:2em;
}



/* 유튜브 영상 1개 중앙 배치 */
.youtube-container {
    display: flex;
    justify-content: center;
    margin-top: 2em;
}

.youtube-container iframe {
    width: 50%;
    max-width: 50em;           /* 1em = 16px 기준 → 약 960px */
    aspect-ratio: 16/9;
    border-radius: 0.5em;
    box-shadow: 0 0.3em 0.6em rgba(0,0,0,0.2);
}

/* 유튜브 영상 2개 가로 배치 */
.youtube-container-two {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-top: 2em;
    flex-wrap: wrap; /* 모바일에서 자동 줄바꿈 */
}

.youtube-container-two iframe {
    width: 45%;
    max-width: 40em;          /* 1em = 16px 기준 → 약 640px */
    aspect-ratio: 16/9;
    border-radius: 0.5em;
    box-shadow: 0 0.3em 0.6em rgba(0,0,0,0.2);
}


@media (max-width: 768px) {
    /* 네비게이션 세로 정렬 */
    .section-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }

    /* 구분선 | 숨기기 */
    .section-nav ul span {
        display: none;
    }

    /* 본문 폭 확대 */
    .content-section {
        max-width: 95%;
        margin: 2em auto;
        padding: 1.2em;
    }

    .content-section h2 {
        font-size: 1.4em;
    }

    .content-section p,
    .section-description {
        font-size: 1em;
        line-height: 1.6;
    }

    /* 유튜브 iframe 가로폭 100% */
    .youtube-container iframe,
    .youtube-container-two iframe {
        width: 100%;
        max-width: 100%;
    }

    /* 2개 영상도 세로로 배치 */
    .youtube-container-two {
        flex-direction: column;
        gap: 1.5em;
    }

    /* 연구자 이미지가 있을 경우 중앙 정렬 대응 */
    .researcher-photo {
        float: none;
        display: block;
        margin: 0 auto 1em auto;
        width: 10em;
    }
}