@charset "utf-8";

/* PC 메가 메뉴 전체 영역 */
#nav-wrapper {
    width: 100%;
    min-width: 1080px;
    height: 58px;
    position: relative;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background-color: #ffffff;
    z-index: 1000;
}

.pc-nav-inner {
    width: 1080px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

.pc-nav-inner > ul {
    display: flex;
    justify-content: space-between;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-nav-inner > ul > li {
    flex: 1;
    text-align: center;
    position: relative;
}

.pc-nav-inner > ul > li > a {
    /* 기존 line-height, block 속성 대신 Flexbox로 수직/수평 중앙 정렬 */
    display: flex;
    align-items: center; 
    justify-content: center; 
    
    height: 58px;
    font-size: 19px;
    font-weight: bold;
    color: #333;
    
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent; /* 상단과 동일한 두께를 하단에도 주어 완벽한 대칭 */
    box-sizing: border-box;
    font-family: "S-CoreDream-4Regular", "Noto Sans KR", sans-serif;
    text-decoration: none;
}

#nav-wrapper:hover .pc-nav-inner > ul > li > a:hover {
    border-top: 4px solid #3b7abe;
    color: #3b7abe;
}

/* 메가 메뉴 드롭다운 영역 */
.mega-menu-wrapper {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #dddddd;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    display: none;
    z-index: 999;
}

#nav-wrapper:hover .mega-menu-wrapper {
    display: block;
} 

.mega-menu-inner {
    width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 30px 0 45px 0;
}

.mega-menu-col {
    flex: 1;
    text-align: center;
}

/* ㅡㅡㅡㅡㅡ 2차 메뉴 (컬럼 영역) ㅡㅡㅡㅡㅡ */
.mega-menu-col {
    flex: 1;
    display: block; /* flex 대신 block으로 변경 */
}

.mega-menu-col > ul {
    list-style: none;
    padding: 0;
    /* 1차 메뉴 텍스트(약 4글자 폭)와 너비를 맞춰 좌측 시작선을 고정 */
    width: 76px; 
    margin: 0 auto; 
    text-align: left; 
}

.mega-menu-col > ul > li {
    margin-bottom: 18px; 
}

.mega-menu-col > ul > li:last-child {
    margin-bottom: 0;
}

.mega-menu-col > ul > li > a {
    font-size: 15px;
    color: #4c4c4c;
    text-decoration: none;
    font-family: "S-CoreDream-4Regular", sans-serif;
    display: block; 
    /* 핵심: 글자가 길어도 부모 폭(76px)을 넘어서 우측으로만 뻗어나가도록 함 */
    white-space: nowrap; 
    transition: color 0.2s;
}

.mega-menu-col > ul > li > a:hover {
    color: #3b7abe;
    font-weight: bold;
}

/* ㅡㅡㅡㅡㅡ 3차 메뉴 (하이픈 메뉴) 리스트 ㅡㅡㅡㅡㅡ */
.sub-depth-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0; 
    text-align: left; 
    display: block;
}

.sub-depth-list li {
    margin-bottom: 6px; 
}

.sub-depth-list li:last-child {
    margin-bottom: 0;
}

.sub-depth-list li a {
    font-size: 13px;
    color: #777;
    text-decoration: none;
    letter-spacing: -0.5px;
    transition: color 0.2s;
    /* 하위 메뉴도 우측으로 자연스럽게 뻗어나가도록 설정 */
    white-space: nowrap; 
}

.sub-depth-list li a:hover {
    color: #3b7abe;
}


/* 모바일 아코디언 메뉴 스타일 */
.mobile-accordion-menu {
    list-style: none;
    padding: 0;
    
    /* 기존 margin: 80px 15px 20px 15px; */
    margin: 120px 15px 20px 15px; 
    
    clear: both; 
    position: relative;
    z-index: 10;
    background-color: #4a7ebb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 1차 메뉴 (클릭 영역) */
.mobile-accordion-menu .m-depth1 {
	padding: 15px 20px;
	color: #ffffff;
	font-family: "S-CoreDream-4Regular", sans-serif;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 마지막 1차 메뉴의 밑줄 제거 */
.mobile-accordion-menu .m-depth1:last-of-type {
	border-bottom: none;
}

/* 2차 메뉴 영역 (초기 숨김) */
.mobile-accordion-menu .m-depth2 {
	list-style: none;
	padding: 0;
	margin: 0;
	background-color: #3b6ba5; /* 1차 메뉴보다 살짝 어두운 배경으로 입체감 부여 */
	display: none; 
}

/* 2차 메뉴 아이템 */
.mobile-accordion-menu .m-depth2 li a {
	display: block;
	padding: 12px 20px 12px 30px;
	color: #f1f1f1;
	text-decoration: none;
	font-size: 14px;
	font-family: "S-CoreDream-4Regular", sans-serif;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	transition: background-color 0.2s;
}

.mobile-accordion-menu .m-depth2 li:last-child a {
	border-bottom: none;
}

.mobile-accordion-menu .m-depth2 li a:hover {
	background-color: #2c5482;
	color: #ffffff;
	font-weight: bold;
}


/* 메인화면 */

#nav-wrapper-main {
    width: 100%;
    min-width: 1080px;
    height: 58px;
    position: relative;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background-color: transparent;
    z-index: 1000;
}

#nav-wrapper-main:hover .pc-nav-inner > ul > li > a:hover {
    border-top: 4px solid #3b7abe;
    color: #3b7abe;
}

/* 메가 메뉴 드롭다운 영역 */
.mega-menu-wrapper-main {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    background-color: #fcf8ed; /* 마우스 오버 시 배경 */
    border-bottom: 1px solid #dddddd;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    display: none;
    z-index: 999;
}

#nav-wrapper-main:hover .mega-menu-wrapper-main {
    display: block;
} 

.pc-nav-inner-main {
    width: 1080px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

.pc-nav-inner-main > ul {
    display: flex;
    justify-content: space-between;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pc-nav-inner-main > ul > li {
    flex: 1;
    text-align: center;
    position: relative;
}

.pc-nav-inner-main > ul > li > a {
    /* 기존 line-height, block 속성 대신 Flexbox로 수직/수평 중앙 정렬 */
    display: flex;
    align-items: center; 
    justify-content: center; 
    
    height: 58px;
    font-size: 19px;
    font-weight: bold;
    color: white;
    
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent; /* 상단과 동일한 두께를 하단에도 주어 완벽한 대칭 */
    box-sizing: border-box;
    font-family: "S-CoreDream-4Regular", "Noto Sans KR", sans-serif;
    text-decoration: none;
}

#nav-wrapper-main:hover .pc-nav-inner-main > ul > li > a:hover {
    border-top: 4px solid #3b7abe;
    color: #3b7abe;
}


.mega-menu-col-main {
    flex: 1;
    text-align: center;
}

/* ㅡㅡㅡㅡㅡ 2차 메뉴 (컬럼 영역) ㅡㅡㅡㅡㅡ */
.mega-menu-col-main {
    flex: 1;
    display: block; /* flex 대신 block으로 변경 */
}

.mega-menu-col-main > ul {
    list-style: none;
    padding: 0;
    /* 1차 메뉴 텍스트(약 4글자 폭)와 너비를 맞춰 좌측 시작선을 고정 */
    width: 76px; 
    margin: 0 auto; 
    text-align: left; 
}

.mega-menu-col-main > ul > li {
    margin-bottom: 18px; 
}

.mega-menu-col-main > ul > li:last-child {
    margin-bottom: 0;
}

.mega-menu-col-main > ul > li > a {
    font-size: 15px;
    color: #1c1c1c;
    text-decoration: none;
    font-family: "S-CoreDream-4Regular", sans-serif;
    display: block; 
    /* 핵심: 글자가 길어도 부모 폭(76px)을 넘어서 우측으로만 뻗어나가도록 함 */
    white-space: nowrap; 
    transition: color 0.2s;
}

.mega-menu-col-main > ul > li > a:hover {
    color: #3b7abe;
    font-weight: bold;
}