/***** LMB 공통요소 *****/
.nav {
	background:white;
	width:var(--lmb-width);
	min-width:var(--lmb-width);
	height: 100vh;
	position: sticky;
	top:0;
	border-right:1px solid var(--black5);
}


.nav-overflow-wrap {
	height: calc(100vh - 80px);
	overflow-y: auto;

	&::-webkit-scrollbar { width: 5px; }
	&::-webkit-scrollbar-thumb {background-color: var(--black20); border-radius:50em;}
	&::-webkit-scrollbar-track {background-color: transparent;}
}

.nav-wrap {
	/*padding:20px 10px;
	height: calc(100vh - 80px);
	height: calc(100vh - 500px);
	overflow-y: auto;*/
}



.nav-hd {
	padding:15px 10px;

	img {max-width: 50px;}

	> a {display:flex; gap:var(--gap4);align-items: center;}

	a h5 {font:var(--type-semititle-b); font-family: "Jua", sans-serif; line-height: 1em;}
	a h5 colored {color:var(--color-1); }
	a h5 span {display:block; font:var(--type-discript); color:var(--black40);}
}

.nav-hd-meminfo {
	padding:15px 10px;
}

.find-pw-regit {
	display:flex;
	padding: 10px 0;

	a { width: -webkit-fill-available; text-align: center; font:var(--type-discript-l);}
	a:first-child {border-right:1px solid var(--black10);}
}

.nav-money-container {
	padding:10px;
	border-radius: 16px;
    color: var(--black60);
    background-color: #2E263D0A;
    /*display: flex;
    justify-content: space-between;
    align-items: flex-end;*/
	margin-top: 10px;

	.money-icon img {width:24px;}

	.ms-1 {margin-top:0px;}

	.my-money {font:var(--type-bodytitle-b); color:var(--color-1);}

	.nav-money-con-wrap {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
}

.nav-memname h5 span {font:var(--type-body); color:var(--black40);}





.nav_menu_wrap {

	ul {
		margin:25px 0 ;
	
		&:first-child{margin-top:0;}

		.nav-section-title {font:var(--type-body2); color:var(--black80);margin-bottom:5px;}

		.nav-section-title .img-wrap img {width:24px;}


		.nav_menu {
			display: block;
			padding:10px 0;
			border-bottom:1px solid var(--black5);

			li {
				display: flex;
				align-items: center;
				gap: 5px;

				.img-wrap {width:20px;}
			}

			&:last-child {border-bottom:0;}

			
		}
	}

}

.new_nav_menu_wrap {

	li { }
	> li:has(.sub-menu) .menu-link[data-collapsed="0"]:after {
		content: "";
		background: url(../images/CaretDown.svg) center center;
        width: 32px;
        height: stretch;
        background-size: cover;
		transition-duration: 0.3s;
	}

	> li:has(.sub-menu) .menu-link[data-collapsed="1"]:after {
		content: "";
		background: url(../images/CaretDown.svg) center center;
        width: 32px;
        height: stretch;
        background-size: cover;
		transform:rotate(-90deg);
		transition-duration: 0.3s;
	}

	.menu-link {display:flex;align-items: center;padding:15px 10px; border-radius: 0 50em 50em 0;}
	.menu-link:hover {background:var(--black5);}
	.menu-link:has(.nav-section-title[data-collapsed="0"]) {background:var(--black5);}

	.menu-link .img-wrap img {width:18px; margin-right:4px;}

	.menu-link .nav-section-title {width:-webkit-fill-available;}


	.sub-menu {background: #2E263D0A;}
	.sub-menu .nav_menu {padding: 8px 32px;display: block;}
	.sub-menu .nav_menu:first-child {padding: 12px 32px 8px;display: block;}
	.sub-menu .nav_menu:last-child {padding: 8px 32px 12px;display: block;}
	.sub-menu .nav_menu p {font:var(--type-body-l); font-size:13px; color:var(--black60);}
	.sub-menu .nav_menu:hover p {color:var(--color-1);}


}






/***** 모바일 네비게이션 부분 *****/
.mobile-nav-wrap {
	padding:12px var(--section-lr);
	background:var(--white);
	border-bottom:1px solid var(--black5);
	display: none;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	position:fixed;
	width: -webkit-fill-available;
	z-index:9;
}

.mobile-nav-left ,.mobile-nav-right, .mobile-nav-icon-wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.mobile-nav-left {
	height:32px;
	padding-left:12px;
}


.mobile-nav-left .mobile-nav-sub-title {
	font-size:var(--fsize-body-title);
	padding-left:12px;
	line-height:2em;
	max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.mobile-nav-icon-wrap li {padding-right:8px;}
.mobile-nav-icon-wrap li:last-child {padding-right:0;}

.mobile-search-bar {
	display:none;
	background: #ffffffc9;
    backdrop-filter: blur(10px);
    width: -webkit-fill-available;
    border: 1px solid var(--black5);
    transition: all 0.3s ease;
    padding: 20px 8px 12px;
    position: absolute;
    top: 57px;
    box-shadow: 0 16px 6px 0px #00000010;
}


.nav + .pop-shade {display:none;}

.draweropen-btn {display:none;}






@media all and (max-width:816px) {
	.nav {
		right: -100vw;
		position: fixed;
		transition:all 0.3s ease;
		top: 71px;
		opacity:0;
		z-index:99;
	}

	.nav.active {
		right: 0vw;
		transition:all 0.3s ease;
		opacity:1;
	}

	.nav_wrap {
		padding:12px 8px 40px;
	}


	.mobile-search-bar.active {
		display:block;
	}

	.nav_menu_wrap {
		
	}

	.nav_menu {
		padding:10px 0;
	}

	.mobile-nav-wrap {
		display: flex !important;
	}

	.mobile-nav-wrap:has(> .draweropen.active) {
		background:var(--main-color-2);
		transition:all 0.1s ease;
	}

	.nav-hd {display:none;}

	.nav_logo_area {display:none;}

	.nav.active + .pop-shade {
		display: inline-block;
		width: 100%;
		height: -webkit-fill-available;
		position: fixed;
		background: #0000002c;
	}

	.draweropen-btn {display:block;}

	
}