body {
    font-size: 0.9em;
    margin: 0;
    padding: 0;
    background-color: #222;
}

#navbar {
    height: 70px;
    position: relative;
    background-color: #1d263a;
    display: flex; /* Flexbox 설정 */
    align-items: center; /* 세로 가운데 정렬 */
    justify-content: center;
    padding-left: 20px;
    /* font-family: "IBM Plex Sans KR", serif; */
    /* font-family: "Sunflower", serif; */
    font-family: 나눔고딕, "Nanum Gothic", "Malgun Gothic", "Roboto", "Noto Sans KR", 맑은고딕, 굴림, 돋움, "Dotum", "sans-serif";
    font-weight: lighter;
    font-size: 14px;
}

#navbarBox {
    width: 1200px;
    display: flex; /* Flexbox 설정 */
    justify-content: space-between; /* 로고와 링크를 양쪽 끝으로 배치 */
    align-items: center; /* 수직 가운데 정렬 */
}

#logo img {
    height: 50px;
    background-color: transparent; /* 투명 배경 보장 */
}

#links {
    padding-left: 50px;
}


.navFont {
        font-family: "Roboto", serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        font-variation-settings:
          "wdth" 100;
      }

.navFontKR {
        font-family: "Noto Sans KR", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
      }      
  
.nav-list {
    display: inline-flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}


.nav-list a {
    text-decoration: none;
    color: #ebebeb;
    font-weight: bold;
    padding: 10px 20px;
    display: block;
}


/* 부모 요소에 위치 설정 추가 */
.nav-list li {
    position: relative; /* 자식 요소인 .submenu의 기준점 */
}

.submenu {
    display: none; /* 기본적으로 숨김 */
    position: absolute; /* 부모(li) 요소 기준으로 위치 설정 */
    top: 100%; /* 부모 아래로 배치 */
    left: 0; /* 부모와 정렬 */
    background-color: #1d263a;
    padding: 10px 0; /* 메뉴 간격 */
    list-style: none; /* 불릿 제거 */
    min-width: 200px; /* 서브메뉴 최소 너비 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    z-index: 1000; /* 다른 요소 위에 표시 */
}


/* 마우스를 올렸을 때 서브메뉴 표시 */
li:hover .submenu {
    display: block; /* 마우스를 올리면 보이도록 설정 */
}

.nav-list li:hover > a {
    color: transparent;
    background: linear-gradient(90deg, rgb(72, 28, 129), rgb(15, 176, 204), rgb(72, 28, 129), rgb(15, 176, 204), rgb(72, 28, 129));
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% auto;
    animation: rainbow-flow 3s linear infinite;
}

/* 카테고리 헤더 스타일 */
.category-header {
    color: #15b0cc !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 20px 4px 20px !important;
    margin-top: 8px;
    border-bottom: 1px solid #2a3441;
    cursor: default;
    text-decoration: none !important;
    display: block;
    background: none !important;
    animation: none !important;
}

.category-header:hover {
    background: none !important;
    color: #15b0cc !important;
    text-decoration: none !important;
}

/* 서브메뉴 내 카테고리 헤더가 링크가 아닌 경우 */
.submenu .category-header {
    color: #15b0cc !important;
    background: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 20px 4px 20px !important;
    margin-top: 8px !important;
    border-bottom: 1px solid #2a3441 !important;
    cursor: default !important;
    display: block !important;
}

.submenu .category-header:hover {
    color: #15b0cc !important;
    background: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 20px 4px 20px !important;
    margin-top: 8px !important;
    border-bottom: 1px solid #2a3441 !important;
    cursor: default !important;
    display: block !important;
}

/* 더 강력한 선택자로 서브메뉴 내 카테고리 헤더 스타일 강제 적용 */
#navbar .submenu li.category-header {
    color: #15b0cc !important;
    background: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 20px 4px 20px !important;
    margin-top: 8px !important;
    border-bottom: 1px solid #2a3441 !important;
    cursor: default !important;
    display: block !important;
}

#navbar .submenu li.category-header:hover {
    color: #15b0cc !important;
    background: none !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 20px 4px 20px !important;
    margin-top: 8px !important;
    border-bottom: 1px solid #2a3441 !important;
    cursor: default !important;
    display: block !important;
}

/* 구분선 스타일 */
.nav-separator {
    height: 1px;
    background-color: #2a3441;
    margin: 8px 15px;
    list-style: none;
}

@keyframes rainbow-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

#hamburger {
    display: none; /* 기본적으로 데스크탑에서는 숨김 */
    cursor: pointer; /* 클릭 가능한 커서 */
    flex-direction: column; /* 세로 방향으로 줄을 배치 */
    gap: 4px; /* 줄 간격 */
}

#hamburger div {
    width: 25px; /* 각 줄의 너비 */
    height: 3px; /* 각 줄의 높이 */
    background-color: #fff; /* 흰색 줄 */
}

footer {
    background-color: #1d263a;
    color: #fff;
    padding: 20px 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    font-family: "Sunflower", serif;
}

footer p {
    margin-bottom: 7px;
}

footer span.infobox {
    display: inline-block;  /* 너비 설정을 위해 block 속성 부여 */
    width: 45px;  /* 원하는 고정 너비 */
    /* text-align: right;  /* 필요한 경우 텍스트 정렬 */
}

.footerhr {
    flex: 0 0 auto;
    width: 69.5%;
}
@media (max-width: 900px) {
    
    #navbar {
        height: 50px;
        position: fixed;
        width: 100%;
        top: 0;
        background-color: #1d263a;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        z-index: 1000; /* navbar가 항상 위에 있도록 설정 */
    }

    #logo img {
        height: 35px;
    }


    
    #hamburger {
        display: flex; /* 모바일 화면에서만 보이도록 설정 */
        cursor: pointer; /* 클릭 가능한 커서 */
        flex-direction: column; /* 세로 방향으로 줄을 배치 */
        gap: 4px; /* 줄 간격 */
        margin-right: 20px;
    }

    #links {
        display: none; /* 모바일 화면에서는 기본적으로 네비게이션 링크 숨김 */
    }


    #links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 50px; /* navbar 아래로 배치 */
        left: 0;
        right: 0;
        background-color: rgb(29, 38, 58);
        width: 100%;
        padding: 15px;
        z-index: 999; /* navbar 뒤에 배치 */
        opacity: 0; /* 기본적으로 보이지 않게 설정 */
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    }


    #links.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }



    /* 모바일에서 nav-list의 스타일 재정의 */
    .nav-list {
        font-size: 16px;
        display: flex; /* inline-flex 제거 */
        flex-direction: column; /* 세로 정렬 */
        gap: 10px; /* 링크 간격 */
        list-style: none; /* 기본 스타일 제거 */
        padding: 0; /* 패딩 제거 */
        margin: 0; /* 마진 제거 */
        
    }

    .nav-list a {
        padding: 5px 5px;
        text-align: left;
    }

    .footerhr {
        flex: 0 0 auto;
        width: 92%;
    }



    

    /* 기본 submenu 위치 */
    .submenu {
        display: block; /* 숨기지 않고 opacity로 제어 */
        opacity: 0; /* 투명하게 설정 */
        transform: translateY(-10px); /* 약간 위로 이동 */
        position: absolute; /* 부모(li) 기준으로 위치 설정 */
        top: 100%; /* 부모 아래로 배치 */
        left: 20px; /* 부모와 정렬 */
        background-color: rgb(16, 21, 32);
        padding: 10px 0; /* 메뉴 간격 */
        list-style: none; /* 불릿 제거 */
        min-width: 200px; /* 서브메뉴 최소 너비 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
        z-index: 1000; /* 다른 요소 위에 표시 */
        border-radius: 8px;
        transition: opacity 0.3s ease, transform 0.3s ease; /* 애니메이션 추가 */
    }

    .submenu a {
        color: rgb(184, 184, 184);
    }

    /* 마우스를 올렸을 때 애니메이션 적용 */
    li:hover .submenu {
        opacity: 1; /* 완전히 보이도록 설정 */
        transform: translateY(0); /* 제자리로 이동 */
    }
    .submenu.hide {
        display: block; /* 애니메이션 동안 유지 */
        animation: slideOutToRight 0.4s ease-out;
    }

    /* 모바일에서 카테고리 헤더 스타일 */
    .category-header {
        color: #15b0cc !important;
        font-weight: 600 !important;
        font-size: 11px !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 6px 15px 3px 15px !important;
        margin-top: 6px;
        border-bottom: 1px solid #2a3441;
        cursor: default;
    }

    /* 모바일에서 구분선 스타일 */
    .nav-separator {
        height: 1px;
        background-color: #2a3441;
        margin: 6px 10px;
        list-style: none;
    }

    .contents {
        margin-top: 77px; /* 위쪽에 100px 여백 추가 */
    }


} /* end of @media (max-width: 900px) */