/* ------------------------------------------------------ */
/* 13. 학회 정관 페이지 스타일 */
/* ------------------------------------------------------ */

/* 상단 목차 네비게이션 */
.articles-nav {
    display: flex;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 가능 */
    justify-content: center;
    gap: 7px;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.articles-nav a {
    text-decoration: none;
    color: #0056b3;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #cceeff;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.articles-nav a:hover {
    background-color: #e6f7ff;
}

/* 각 장 제목 스타일 */
#article1, #article2, #article3, #article4, #article5, #article6 {
    font-size: 1.5em;
    font-weight: bold;
    color: #0056b3;
    border-bottom: 3px solid #0056b3;
    padding-bottom: 5px;
    margin-top: 40px;
    margin-bottom: 25px;
    scroll-margin-top: 150px !important;
}

/* 각 조 제목 스타일 */
.article-title {
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    margin-top: 20px;
    margin-bottom: 5px;
}
.article-title2 { 
    font-weight: bold;
    font-size: 1.2em;
    color: #0056b3 !important;
    margin-top: 20px;
    margin-bottom: 5px;
}

.article-section {
    /* 💡 스크롤을 위한 최대 높이 설정 (예: 400px) */
    max-height: 250px; 
    
    /* 💡 내용이 max-height를 초과할 경우 수직 스크롤바 자동 표시 */
    overflow-y: auto; 
    
    /* 💡 스크롤 콘텐츠와 외부 영역을 구분하기 위한 패딩 및 테두리 */
    padding: 15px; 
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 30px; /* 다음 장과의 간격 */
    
    /* 스크롤 시 내용이 끊어지지 않도록 배경색을 흰색으로 설정 */
    background-color: #fff;
}

/* 스크롤 컨테이너 내부의 들여쓰기 조정 */
.article-content {
    line-height: 1.8;
    color: #555;
    padding-left: 15px;
    border-left: 3px solid #eee;
    margin-bottom: 15px;
}

/* 항(項) 스타일도 article-section 내부의 패딩을 고려하여 조정될 수 있습니다. */
.article-clause {
    line-height: 1.8;
    color: #333;
    padding-left: 35px; 
    position: relative;
    text-indent: -20px;
    text-align:left !important;
}
.article-clause2 {
    /*line-height: 1.8;*/
    margin-top:-10px;
    color: #333;
    padding-left: 50px; 
    position: relative;
}

/* ------------------------------------------------------ */
/* 모바일 반응형 스타일: 768px 이하 화면 수정 */
/* ------------------------------------------------------ */
@media (max-width: 768px) {

    .article-section {

        /* 💡 스크롤 콘텐츠와 외부 영역을 구분하기 위한 패딩 및 테두리 */
        border: 1px solid #ddd;
        margin-bottom: 30px; /* 다음 장과의 간격 */
        padding: 5px;
        /* 스크롤 시 내용이 끊어지지 않도록 배경색을 흰색으로 설정 */
        background-color: #fff;
    }

    /* 스크롤 컨테이너 내부의 들여쓰기 조정 */
    .article-content {
        line-height: 1.5;
        color: #555;
        padding-left: 0px;
        border-left: 0;
    }

    /* 항(項) 스타일도 article-section 내부의 패딩을 고려하여 조정될 수 있습니다. */
    .article-clause {
        padding-left: 20px; 
        text-indent: -20px;
    }
    .article-clause2 {
        padding-left: 40px; 
        text-indent: -25px;
    }



}