/*
  이 파일은 메인 메뉴, 하위 메뉴, 우측 버튼 스타일을
  모두 포함하고 있는 최종 CSS 파일입니다.
  이 파일 하나만 적용하시면 됩니다.
*/
body {
    font-family: 'Noto Sans KR', sans-serif;
}

/* --------------------------------------------------
  [1] 메인 메뉴 시스템 스타일 (듀얼 라인 애니메이션)
-------------------------------------------------- */
#nt_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#nt_menu .me-ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 19px; /* 메뉴 아이템 사이의 간격 */
}

#nt_menu .me-li {
    position: relative; /* 하위 메뉴의 기준점 */
}

#nt_menu .me-li::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 15px;
    background-color: transparent;
}

#nt_menu .me-li > a {
    position: relative;
    display: block;
    padding: 5px 13px;
    border-radius: 5px;
    background-color: transparent;
    color: #555;
    font-weight: 700;
    font-size: 17px;
    transition: color 0.3s ease-in-out;
    white-space: nowrap;
    border: 2px solid transparent;
}

/* --- 듀얼 라인 애니메이션 --- */
#nt_menu .me-li > a::before,
#nt_menu .me-li > a::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #8666f8;
    transition: all 0.3s ease-in-out;
}
#nt_menu .me-li > a::before {
    top: 0;
}
#nt_menu .me-li > a::after {
    bottom: 0;
}

#nt_menu .me-li:not(.menu-highlight) > a:hover {
    color: #8666f8;
}

#nt_menu .me-li:not(.menu-highlight) > a:hover::before,
#nt_menu .me-li:not(.menu-highlight) > a:hover::after {
    width: 100%;
    left: 0;
}


/* --- 활성화된 메뉴 특별 강조 --- */
#nt_menu .menu-highlight > a {
    background-color: #8666f8;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(134, 102, 248, 0.3);
}
#nt_menu .menu-highlight > a:hover {
    background-color: #7152de;
}

/* --------------------------------------------------
  [2] 하위 메뉴 (드롭다운) 스타일 - NEW PREMIUM DESIGN
-------------------------------------------------- */
#nt_menu .sub-1div {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: 167px;
    padding: 0px;
    border-radius: 12px;
    border: 1px solid #EAECEF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1000;
}
#nt_menu .sub-1div::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-bottom-color: #ffffff;
    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.02));
}
#nt_menu .me-li:hover > .sub-1div {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
#nt_menu .sub-1dul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* 링크(a)는 전체 영역을 차지하게 둡니다. */
#nt_menu .sub-1dli a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* a 태그의 패딩과 마진을 0으로 초기화합니다. */
    padding: 0;
    margin: 8px 0;
    color: #555;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    border-bottom: none !important;
}
/* 마우스를 올려도 a 태그 자체는 아무 변화가 없도록 설정합니다. */
#nt_menu .sub-1dli:hover > a {
    background-color: transparent !important;
}
/* 실제 스타일은 내부의 span 태그에 적용합니다. */
#nt_menu .sub-1dli a span {
    display: inline-block; /* 너비를 텍스트에 맞게 설정 */
    padding: 7px 38px;    /* 텍스트 주변 여백 */
    border-radius: 8px;
    transition: all 0.2s ease;
}
/* 마우스를 올렸을 때의 스타일을 span에 적용합니다. */
#nt_menu .sub-1dli:hover > a span {
    background-color: #8666f8; /* 대표 색상으로 배경 채우기 */
    color: #ffffff;           /* 텍스트 색상 흰색으로 변경 */
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 6px 15px rgba(134, 102, 248, 0.2); /* 그림자 강조 */
}
#nt_menu .sub-1line {
    display: none;
}
/* 아이콘 스타일 */
#nt_menu .sub-1dli a .fa {
    margin-right: 15px;
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #aaa;
    transition: color 0.2s ease;
}


/* --------------------------------------------------
  [3] 우측 상단 빠른 메뉴 버튼 스타일
-------------------------------------------------- */
.custom_quicknav {
    display: flex;
    align-items: center;
    gap: 12px;
}
.custom_quicknav .custom_btn {
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    border: 2px solid #8666f8;
}
.custom_quicknav .custom_btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.custom_quicknav a.custom_btn:first-child {
    background-color: #8666f8;
    color: #ffffff;
}
.custom_quicknav a.custom_btn:first-child:hover {
    background-color: #7152de;
    border-color: #7152de;
}
.custom_quicknav a.custom_btn:not(:first-child) {
    background-color: transparent;
    color: #8666f8;
}
.custom_quicknav a.custom_btn:not(:first-child):hover {
    background-color: #8666f8;
    color: #ffffff;
}