#wrap {}

html:has(.nav.active) {overflow:hidden;}

section {
	background:var(--black5);
	min-height: 100dvh;
	width:-webkit-fill-available;

	.container { 
		width:-webkit-fill-available;
		
		.con-wrap {
			margin:var(--container-tb) var(--container-lr);
			display:flex;
			flex-direction: column;
			gap:var(--gap20);
			min-height:calc(100dvh - (var(--container-tb) * 2));
		}
	}

	&.w480 {

		.container {

			.con-wrap {
				max-width:480px;
				margin:0 auto;
				justify-content: center;
			}
		}
	}

	&:has(>.nav) {
		display:flex;

		.container {width: calc(100% - var(--lmb-width) - 1px);}
	}


}



.box-wrap {
	padding:var(--box-pd);
	background:var(--white);
	border-radius:var(--border-radius);

	&.color-box {
		background:var(--color-2);
		color:white;
	}
}



.grid {
	display:grid;
	gap:var(--gap20);


	&.grid-col-2 {grid-template-columns: repeat(2, 1fr);}
	&.grid-col-3 {grid-template-columns: repeat(3, 1fr);}
	&.grid-col-4 {grid-template-columns: repeat(4, 1fr);}

}





/********** 그리드 시스템 ************/
.row {
	display:flex;

	& >* {width:-webkit-fill-available;}

	>.fit-width {width:fit-content;}
}


/********* 가로기준 1개의 요소가 균등 분할 **************/ 
.row-col-2 {
	flex-direction: row !important;
    /*flex-wrap: wrap;*/
	gap:var(--gap20);

	> div, > li {
		width:calc(calc(100% - var(--gap20))/2);
	}
}

.row-col-3 {
	flex-direction: row !important;
    /*flex-wrap: wrap;*/
	gap:var(--gap20);

	> div, > li {
		width:calc(calc(100% - var(--gap20))/3);
	}
}

.row-col-4 {
	display:flex;
	flex-direction: row !important;
    /*flex-wrap: wrap;*/
	gap:var(--gap20);

	> div, > li {
		width:calc(calc(100% - var(--gap20))/4);
	}
}

.row-col-5 {
	display:flex;
	flex-direction: row !important;
    /*flex-wrap: wrap;*/
	gap:var(--gap20);

	> div, > li {
		width:calc(calc(100% - var(--section-lr))/5);
	}
}

.row-col-6 {
	> div, > li {
		width:calc(calc(100% - var(--section-lr)/6));
	}
}

.row-col-7 {
	> div, > li {
		width:calc(calc(100% - var(--section-lr)/7));
	}
}

.row-col-8 {
	> div, > li {
		width:calc(calc(100% - var(--section-lr)/8));
	}
}

.row-col-10 {
	> div, > li {
		width:calc(calc(100% - var(--section-lr)/10));
	}
}

.row-col-12{
	> div, > li {
		width:calc(calc(100% - var(--section-lr)/12));
	}
}



.col-1 {width:8.33%;}
.col-2 {width:16.66%;}
.col-3 {width:25%;}
.col-4 {width:33.33%;}
.col-5 {width:41.66%;}
.col-6 {width:50%;}
.col-7 {width:58.33%;}
.col-8 {width:66.66%;}
.col-9 {width:75%;}
.col-10 {width:83.33%;}
.col-11 {width:91.66%;}
.col-12 {width:100%;}


/********** 그리드 시스템 ************/




.flex {
	display:flex;

	> div {width:auto;}

	&.align-items-c {
		align-items: center;
	}

	&.align-items-flex-s {
		align-items:flex-start;
	}

	&.justify-content-s-a {justify-content: space-around;}

	&:has(>.right) {justify-content: space-between;align-items: center;}

	&.flex-d-c {flex-direction:column;}
}



.gap4 {gap:4px;}
.gap10 {gap:10px;}
.gap20 {gap:var(--gap20);}




/********* 간격 부분 ************/
.mg-t-4 {margin-top:4px;}
.mg-t-8 {margin-top:8px;}
.mg-t-16 {margin-top:16px;}
.mg-t-24 {margin-top:24px;}
.mg-t-48 {margin-top:48px;}
.mg-t-60 {margin-top:60px;}


.mg-r-4 {margin-right:4px;}
.mg-r-8 {margin-right:8px;}
.mg-r-16 {margin-right:16px;}
.mg-r-24 {margin-right:24px;}
.mg-r-48 {margin-right:48px;}
.mg-r-60 {margin-right:60px;}


.mg-b-4 {margin-bottom:4px;}
.mg-b-8 {margin-bottom:8px;}
.mg-b-16 {margin-bottom:16px;}
.mg-b-24 {margin-bottom:24px;}
.mg-b-48 {margin-bottom:48px;}
.mg-b-60 {margin-bottom:60px;}


.mg-l-4 {margin-left:4px;}
.mg-l-8 {margin-left:8px;}
.mg-l-16 {margin-left:16px;}
.mg-l-24 {margin-left:24px;}
.mg-l-48 {margin-left:48px;}
.mg-l-60 {margin-left:60px;}




.pd-t-4 {padding-top:4px;}
.pd-t-8 {padding-top:8px;}
.pd-t-16 {padding-top:16px;}
.pd-t-24 {padding-top:24px;}
.pd-t-48 {padding-top:48px;}
.pd-t-60 {padding-top:60px;}


.pd-r-4 {padding-right:4px;}
.pd-r-8 {padding-right:8px;}
.pd-r-16 {padding-right:16px;}
.pd-r-24 {padding-right:24px;}
.pd-r-48 {padding-right:48px;}
.pd-r-60 {padding-right:60px;}


.pd-b-4 {padding-bottom:4px;}
.pd-b-8 {padding-bottom:8px;}
.pd-b-16 {padding-bottom:16px;}
.pd-b-24 {padding-bottom:24px;}
.pd-b-48 {padding-bottom:48px;}
.pd-b-60 {padding-bottom:60px;}


.pd-l-4 {padding-left:4px;}
.pd-l-8 {padding-left:8px;}
.pd-l-16 {padding-left:16px;}
.pd-l-24 {padding-left:24px;}
.pd-l-48 {padding-left:48px;}
.pd-l-60 {padding-left:60px;}


.pd-a-16 {padding:16px;}

/********* 간격 부분 end ************/





/* --- 반응형 레이아웃 스타일 지원 --- */
@media (max-width:816px) {
    .row-col-2 {
		> div, > li {
			width: -webkit-fill-available;
		}
	}

}