/* ------------------------------------------------------ */
/* 12. 조직 및 임원 페이지 (탭 메뉴 스타일) */
/* ------------------------------------------------------ */

.tab-container {
    margin-top: 10px;
    text-align: center;
}

.tab-list {
    display: inline-flex;
}

.tab-button {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 5px 20px;
    cursor: pointer;
    font-size: 1.1em;
    color: #555;
    margin-right: 5px;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    width:150px;
}

/* 활성화된 탭 버튼 스타일 */
.tab-button.active {
    background-color: #0056b3;
    color: #fff; /* 메인 색상 적용 */
    border-color: #0056b3;
    z-index: 10;
}

/* 탭 콘텐츠 영역 */
.tab-content-area {
    padding: 20px;
    border-top: none; /* 탭 버튼과 연결되도록 상단선 제거 */
}

.tab-content {
    display: none; /* 기본적으로 모든 콘텐츠 숨김 */
}

.tab-content.active {
    display: block; /* 활성화된 콘텐츠만 보임 */
}

.executive-role{
    display: flex; /* 직책과 임원 목록을 수평 배치 */
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.top-executives {
    display: flex;
    gap: 30px; /* 항목 사이 간격 */
    margin-bottom: 20px;
}

.top-executives > .executive-role {
    flex-grow: 1; /* 컨테이너 내에서 공간을 균등하게 나눔 */
    flex-basis: 0; /* flex-grow가 작동하도록 기본 너비를 0으로 설정 */
    border-bottom: none; /* 하단 구분선 제거 (전체 컨테이너에만 적용) */
}

/* 💡 이사 이하 항목과의 구분을 위해 top-executives 전체에 하단 선 추가 */
.top-executives {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.role-area{
    display: flex;
}
.role-name, .role-name2{
    width:50%;
    text-align: left;
    font-size:1.3em;
    font-weight: bold;
    font-style: italic;
    margin-top:10px;
}
.role-name3{
    width:100%;
    text-align: left;
    font-size:1.3em;
    font-weight: bold;
    font-style: italic;
    margin-top:10px;
}
.role-name, .role-name3{color: #0056b3;}
.role-name2{color:#00B0BD}

/* 1. 직책 (왼쪽 열) 스타일 */
.role-title, .role-title2, .role-title3 {
    flex-basis: 120px; /* 💡 직책 너비 고정 (이전 테이블과 동일하게 120px) */
    flex-shrink: 0;
    margin: 0;
    padding-top: 5px;
    font-size: 1.1em;
    font-weight: bold;
}
.role-title{
    color: #0056b3;
}
.role-title2, .role-title3{
    color: #333;
}

/* 2. 임원 카드 목록 (오른쪽 열) 스타일 */
.members-flex-list {
    flex-grow: 1; /* 남은 공간 모두 사용 */
    display: flex;
    flex-wrap: wrap; /* 💡 카드들이 공간에 맞게 다음 줄로 줄바꿈 */
    gap: 5px; /* 카드 사이의 간격 */
    padding-left: 20px;
}

/* 3. 각 임원 카드 (직사각형 테두리) 스타일 */
.member-card, .member-card2 {
    /* 💡 직사각형 테두리 */
    border: 1px solid #ccc; 
    /*border-radius: 4px;*/
    padding: 5px 12px;
    font-size: 0.95em;
    color: #333;
    background-color: #fff;
    
    /* 텍스트 크기에 따라 너비가 유동적으로 변하도록 설정 */
    width:200px;
    flex-shrink: 0; 
    text-align: left;
}

.member-card:hover, .member-card2:hover {
    background-color: #eee;
}

.member-name {
    /*font-weight: bold;*/
    margin-right: 3px; /* 이름과 소속 사이 간격 */
    color: #111; /* 이름 색상 */
}

.member-affiliation {
    /* 💡 소속 부분 색상 변경 */
    color: #666; /* 조금 더 흐린 색상 */
    font-size: 0.95em; /* 이름보다 약간 작게 */
}

.boss{
    background-color: #dfeeff;
}

.spacing{letter-spacing: -1px;}
.spacing2{letter-spacing: -1px;font-size:0.9em;}
.spacing3{letter-spacing: -1px;font-size:0.8em;}
.spacing4{letter-spacing: -1px;font-size:0.7em;}

.commitees1, .commitees2{
    padding:5px;
}

#researchers h3{
    margin-top: 30px;
    text-align: left;
    color:#00B0BD;
}
.researcher{
    border: 1px #ccc solid;margin-top: 10px;
}

/* ------------------------------------------------------ */
/* 모바일 반응형 스타일: 768px 이하 화면 수정 */
/* ------------------------------------------------------ */
@media (max-width: 768px) {
    
    /* 💡 탭 목록을 수직으로 쌓음 */
    .tab-list {
        border-bottom: none; /* 수직 정렬 시 하단선 제거 */
    }

    /* 💡 탭 버튼 너비를 100%로 확장 */
    .tab-button {
        width: 100px;
        margin-bottom: 5px; /* 버튼 사이에 간격 추가 */
        border: 1px solid #ccc !important; /* 모든 테두리 다시 보이게 함 */
        border-radius: 6px;
        text-align: center; /* 텍스트를 왼쪽 정렬 */
        font-size: 1em;
    }
    
    /* 💡 활성화된 버튼 스타일 */
    .tab-button.active {
        background-color: #0056b3; /* 활성화 버튼 배경색 변경 */
        color: white; 
        border-color: #0056b3 !important; 
        border-bottom: 1px solid #0056b3 !important; 
    }

    /* 💡 콘텐츠 영역 스타일 */
    .tab-content-area {
        padding: 3px;
    }
    
    /* 💡 테이블 반응형 스크롤 */
    .tab-content table {
        display: block; /* 테이블을 블록 요소로 변경 */
        width: 100%;
        overflow-x: auto; /* 내용이 넘칠 경우 가로 스크롤 가능 */
        white-space: nowrap;
    }
    
    /* 💡 임원 목록 모바일 스타일 (2단 레이아웃) */
    .executive-role {
        flex-direction: column; /* 수직으로 쌓음 */
    }

    /* 💡 모바일: top-executives를 수직으로 쌓음 */
    .top-executives {
        /*flex-direction: column; */
        gap: 0; 
    }
    
    /* 💡 모바일에서 각 executive-role의 하단 구분선을 다시 추가 */
    .top-executives > .executive-role {
        border-bottom: 1px solid #eee;
    }
    .top-executives > .executive-role:last-child {
        border-bottom: none; /* 마지막 항목의 하단선 제거 */
    }
    
    /* 💡 top-executives 자체의 하단 선은 모바일에서는 필요 없습니다. */
    .top-executives {
        border-bottom: none;
        padding-bottom: 0;
    }

    .role-title, .role-title2 {
        flex-basis: auto;
        width: 100%;
        margin-bottom: 10px; /* 💡 제목 아래 여백 */
        padding-top: 0;
        border-bottom: 2px solid #ddd;
    }
    .role-title3 {
        flex-basis: auto;
        width: 98%;
        margin-bottom: 10px; /* 💡 제목 아래 여백 */
        padding-top: 0;
        border-bottom: 2px solid #ddd;
    }
    .members-flex-list {
        flex-wrap: wrap;
        overflow-x: hidden; 
        padding-left: 0;
        width: 100%;
        gap: 8px;
    }
   
    .member-card {
        padding: 4px 10px;
        font-size: 0.75em;
        white-space: nowrap;
        /* 💡 모바일 2열 배치 */
        width: calc(50% - 4px); 
        flex-shrink: 0;
    }
    .member-card2 {
        padding: 4px 10px;
        font-size: 0.75em;
        white-space: nowrap;
        /* 💡 모바일 2열 배치 */
        width: 99%; 
        flex-shrink: 0;
    }

    /*
    .member-name {
        font-weight: bold;
    }
        */

    .member-affiliation {
        color: #666; /* 조금 더 흐린 색상 */
        font-size: 0.95em; /* 이름보다 약간 작게 */
    }

    .spacing{letter-spacing: -1px;}
    .spacing2{letter-spacing: -1px;font-size:0.8em;}
    .spacing3{letter-spacing: -1px;font-size:0.7em;}

    .role-name2{width:45%;}
    .role-name2:nth-child(2n){margin-left:20px;}
    .role-name, .role-name2, .role-name3{font-size:17px;letter-spacing: -1px;}

    .commitees1, .commitees2{
    border:0;
    }

    .researcher{
    margin-top: 10px;
    border: 0;
    }
}