* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    /* 두 개의 상단 바 높이만큼 padding-top 조정 (약 90px) */
    padding-top: 90px; 
    background-color: #fff;
}

/* 전체 상단 바 영역 (로고/사용자 메뉴 + 주 메뉴) */
.header-area {
    width: 100%;
    position: fixed; 
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

/* 1. 상단 행: 로고와 사용자 메뉴 */
.header-top {
    background-color: #fff; /* 로고 바 배경색 */
    padding: 10px 20px;
    display: flex;
    justify-content: center; /* 로고와 사용자 메뉴 중앙 정렬 기준 */
    align-items: center;
    
    /* 최대 너비 1200px 적용 */
    max-width: 1200px;
    margin: 0 auto;
    position: relative; /* 사용자 메뉴 절대 위치 기준점 */
}

/* 로고 중앙 정렬 */
.logo-top {
    /*color: white;*/
    text-decoration: none;
    font-size: 2em; /* 로고 크기 키움 */
    font-weight: bold;
}

/* 사용자 메뉴 (로고 라인에서 오른쪽 끝 정렬) */
.user-menu-top {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;

    /* 로고 라인의 오른쪽 끝에 고정 */
    position: absolute;
    right: 20px; /* padding 값과 동일하게 설정 */
    top: 50%;
    transform: translateY(-50%);
}

.user-menu-top li a {
    color: #777;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    white-space: nowrap;
}

.mobile-user-menu{
    display:none;
}

/* ------------------------------------------------------ */
/* 2. 하단 행: 주 메뉴 */
.navbar-container {
    background-color: #00B0BD; /* 메뉴 바 배경색#1F63AE */
    width: 100%;
}

/* 메뉴 컨테이너 (1200px 제한) */
.navbar {
    display: flex;
    /* 주 메뉴 중앙 정렬 */
    justify-content: center; 
    align-items: center;
    
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px;
    position: relative; 
}

/* 주 메뉴 (가운데 정렬) */
.nav-menu {
    list-style: none;
    display: flex; 
    margin: 0;
    padding: 0;
    
}

.nav-menu li {
    position: relative;
}

.nav-menu li a {
    color: white;
    text-decoration: none;
    padding: 10px 50px;
    display: block;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.nav-menu li a:hover {
    background-color: #03cad8;
    color: white !important;
}

/* 드롭다운 서브 메뉴 (PC 스타일) */
.submenu {
    /* (이전과 동일) */
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color:rgba(68, 68, 68, 0.8);
    min-width: 150px;
    display: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.has-submenu:hover > .submenu {
    display: block;
}

/* 토글 버튼 (모바일에서만 표시) */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #333;
    font-size: 1.8em;
    cursor: pointer;
    padding: 5px;
    /* 모바일에서 메뉴 위에 나타나도록 위치 조정 */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001; 
}

.detail-button {
    /* 버튼의 크기와 모양 */
    width: 100px;
    height: 40px;
    background-color: #3498db; /* 파란색 배경 */
    color: white; /* 텍스트 색상 */
    font-size: 16px;
    text-align: center;
    line-height: 40px; /* 텍스트를 수직 중앙에 정렬 */
    vertical-align: middle;
    cursor: pointer; /* 마우스를 올렸을 때 포인터 변경 */
    border-radius: 10px; /* 약간의 둥근 모서리 */
    padding-top: -5px;

    /* 흰색 테두리 */
    border: 3px solid white; 

    /* 약간의 그림자 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); 

    /* 버튼을 눌렀을 때의 효과 (선택 사항) */
    transition: background-color 0.3s, box-shadow 0.3s;
}

.detail-button:hover {
    background-color: #2980b9; /* 마우스를 올렸을 때 더 진한 파란색 */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}

.detail-button:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(2px); /* 누르는 느낌 */
}



/* ------------------------------------------------------ */
/* 7. Footer (하단 영역) 스타일 */
/* ------------------------------------------------------ */
.footer-area {
    width: 100%;
    background-color: #e1e1e1;
    color: #4d4d4d;
    padding: 30px 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; 
    align-items: flex-start;
}

.footer-info-wrapper {
    flex-grow: 1; 
    padding-right: 30px; 
}

.footer-logo {
    flex-shrink: 0;
    text-align: right;
    width: 200px; 
    padding-top: 10px;
}
.footer-logo img {
    max-width: 100%;
    height: auto;
    opacity: 0.8;
}

/* 7.1 상단 메뉴 (학회소개, 이용약관 등) */
.footer-menu {
    list-style: none;
    display: flex;
    padding: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #888; 
    padding-bottom: 15px;
    font-size: 0.9em;
}

.footer-menu li {
    margin-right: 20px;
    font-weight: bold;
}

.footer-menu a {
    color: #777; 
    text-decoration: none;
}

/* 7.2 하단 회사 정보 (주소, 연락처, 저작권) */
.footer-info-group {
    display: flex;
    flex-direction: column;
    gap: 5px; 
    font-size: 0.8em;
}

.footer-address {
    margin-bottom: 5px;
}

.footer-contact span {
    margin-right: 15px;
    white-space: nowrap;
}

.footer-email{display: inline;}

.footer-copyright {
    margin-top: 15px;
    font-size: 0.8em;
    color: #111;
}



/* ======================================================= */
/* 모바일 반응형 스타일: 768px 이하 화면 */
/* ======================================================= */
@media (max-width: 768px) {
    /* body padding 조정 */
    body {
        padding-top: 50px; /* 로고 바 높이에 맞춰 조정 */
        background: url('');
    }

    /* 상단 행: 로고와 사용자 메뉴를 세로로 정렬하지 않고 햄버거 메뉴로 통합 */
    .header-top {
        /* 로고는 왼쪽, 토글 버튼은 오른쪽 */
        justify-content: space-between;
        padding: 10px 20px;
    }
    
    .logo-top {
        /* 중앙 정렬 해제 */
        margin-right: auto;
    }

    /* 토글 버튼 표시 */
    .nav-toggle {
        display: block; /* 모바일에서 버튼을 보이게 합니다. */
        color:#444;
    }
    
    /* 사용자 메뉴를 숨기고 주 메뉴와 통합하여 토글로 제어 */
    .user-menu-top {
        display: none;
        position: static;
        transform: none;
    }

    .navbar-container {
        background-color: #1F63AE;
    }

    /* 하단 행 (메뉴) 숨김 처리 */
    .navbar {
        display: none; /* 기본 숨김 */
        flex-direction: column;
        width: 100%;
        /* 로고/토글 버튼 바 바로 아래에 위치 */
        position: absolute; 
        top: 80px; 
        left: 0;
        padding: 0;
        z-index: 999;
    }
    
    /* JS로 'active' 클래스가 추가되면 보이게 함 */
    .navbar.active {
        display: flex; 
    }
    
    /* 주 메뉴 항목 세로 정렬 */
    .nav-menu {
        flex-direction: column;
        width: 100%;
    }

    .nav-menu li a ,
    .nav-menu .mobile-user-menu {
        display: flex; /* 모바일에서만 보이도록 */
        flex-direction: column;
        background-color: #1F63AE;
        border-top: 1px solid #fff;
        color:#fff;
    }

    /* 드롭다운 스타일 (이전과 동일) */
    .submenu {
        position: static;
        background-color: #222;
        width: 100%;
        box-shadow: none;
    }
    
    .submenu li a {
        padding-left: 40px;
        border-bottom: 1px solid #074385;
        background-color: #538DCD;
    }

    .has-submenu.open > .submenu {
        display: block;
    }

   
    /* ?? 푸터 모바일 최종 조정 */
    .footer-content {
        flex-direction: column;
        align-items: center; /* 전체 콘텐츠 가운데 정렬 */
        text-align: center; /* 텍스트 가운데 정렬 */
    }

    /* ?? 로고 생략 */
    .footer-logo {
        display: none;
    }

    .footer-info-wrapper {
        padding-right: 0;
    }

    /* ?? 메뉴: 가로 한 줄로 배치 */
    .footer-menu {
        flex-direction: row; 
        justify-content: center; 
        gap: 10px; 
        padding: 0; 
        /* border-bottom 유지 */
    }
    .footer-menu li {
        margin-right: 0;
    }
    .footer-menu a {
        white-space: nowrap; /* 줄바꿈 방지 */
    }
    
    /* 주소 및 연락처 정보 조정 */
    .footer-info-group {
        align-items: center; /* 주소 그룹 가운데 정렬 */
    }
    .footer-address,
    .footer-contact {
        text-align: center; 
        width: 100%; /* 너비를 꽉 채워 가운데 정렬 용이 */
    }

    .footer-email{display: block;}
    
    /* ?? 연락처 정보(TEL, FAX, E-mail)를 한 줄로 보이도록 인라인으로 변경 */
    .footer-address span,
    .footer-contact span {
        display: inline; 
        margin-right: 8px; 
        white-space: nowrap; /* ?? 주소 텍스트를 강제로 한 줄에 표시 */
    }
    .footer-contact span:last-child {
        margin-right: 0;
    }
}