@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
	/* lmb 넓이 값 */
	--gnb-width:250px; /** $GNB_Style = "leftside" 가 아닐경우 0으로 입력 해야함 **/
	--container-width:calc(100% - var(--gnb-width));

	--container-max-width:1260px;

	/* <section> 좌우상하 마진 값 */
	--container-lr:1vw;
	--container-tb:30px;

	--container-lr-inver:-1vw;
	--container-tb-inver:-30px;


	--box-pd:30px;

	--gap20:20px;
	--gap10:10px;
	--gap4:4px;


	/* 기본 r 값 */
	--border-radius:20px;


	/* 색상 부분 */
	--color-1: #03c75a;
	--color-2: #3c49f4;
	--color-3: #ff9500;


	--color-8:#ffc107;

	--main-gradient:linear-gradient(45deg, var(--color-1), var(--color-2));

	--white:#fff;
	--black:#000;
	--black80:#333;
	--black60:#666;
	--black40:#999;
	--black20:#CCC;
	--black15:#E2E2E2;
	--black10:#E6E6E6;
	--black5:#F2F2F2;

	--bg-color:#cfefef;

	--red-color:#fd3375;
	--green-color:#00d0aa;
	--orange-color:#ffb11e;



	/* 글꼴 관련 */
	--fs-big-title: 2.5rem;
	--fs-middle-title: 2.25rem;
	--fs-semi-title: 1.8rem;
	--fs-sub-title: 1.45rem;
	--fs-body-title: 1.15rem;
	--fs-body: 14px;
	--fs-discript: 0.75rem;
	--fs-minimum:0.55rem;

	--fw-800:800;
	--fw-600:600;
	--fw-500:500;
	--fw-normal:normal;
	--fw-200: 400;

	--fstyle-main:'Noto Sans KR', sans-serif;
	--fstyle-01: ;
	--fstyle-02: ;


	--type-headline-b:var(--fw-800) var(--fs-big-title)/1.25em var(--fstyle-main) ;
	--type-headline:var(--fw-normal) var(--fs-big-title)/1.25em var(--fstyle-main) ;
	--type-headline-l:var(--fw-200) var(--fs-big-title)/1.25em var(--fstyle-main) ;

	--type-title-b:var(--fw-800) var(--fs-middle-title)/1.25em var(--fstyle-main) ;
	--type-title:var(--fw-normal) var(--fs-middle-title)/1.25em var(--fstyle-main) ;
	--type-title-l:var(--fw-200) var(--fs-middle-title)/1.25em var(--fstyle-main) ;

	--type-subtitle-b:var(--fw-800) var(--fs-semi-title)/1.35em var(--fstyle-main) ;
	--type-subtitle:var(--fw-normal) var(--fs-semi-title)/1.35em var(--fstyle-main) ;
	--type-subtitle-l:var(--fw-200) var(--fs-semi-title)/1.35em var(--fstyle-main) ;

	--type-semititle-b:var(--fw-800) var(--fs-sub-title)/1.4em var(--fstyle-main) ;
	--type-semititle:var(--fw-normal) var(--fs-sub-title)/1.4em var(--fstyle-main) ;
	--type-semititle-l:var(--fw-200) var(--fs-sub-title)/1.4em var(--fstyle-main) ;

	--type-bodytitle-b:var(--fw-800) var(--fs-body-title)/1.5em var(--fstyle-main) ;
	--type-bodytitle:var(--fw-normal) var(--fs-body-title)/1.5em var(--fstyle-main) ;
	--type-bodytitle-l:var(--fw-200) var(--fs-body-title)/1.5em var(--fstyle-main) ;

	--type-body-b:var(--fw-800) var(--fs-body)/1.65em var(--fstyle-main) ;
	--type-body:var(--fw-normal) var(--fs-body)/1.65em var(--fstyle-main) ;
	--type-body-l:var(--fw-200) var(--fs-body)/1.65em var(--fstyle-main) ;

	--type-discript-b:var(--fw-800) var(--fs-discript)/1.65em var(--fstyle-main) ;
	--type-discript:var(--fw-500) var(--fs-discript)/1.65em var(--fstyle-main) ;
	--type-discript-l:var(--fw-200) var(--fs-discript)/1.65em var(--fstyle-main) ;

	--type-minimum:var(--fw-500) var(--fs-minimum)/1.65em var(--fstyle-main) ;


	--type-gnb-menu:var(--fw-500) var(--fs-body)/1.5em var(--fstyle-main) ;





	/**** gnb 부분 컨트롤 ****/
	--gnb-ft-height:200px;
	--gnb-mg:24px;



	--lmb-width:240px;



	--btn-r : 8px;
}


#point_wrap {
	display: flex;
	flex-direction: column;
	gap: var(--gap20);
}


html {
	overflow-x:auto;
	overflow-y:scroll;
	scroll-behavior: smooth;
	
}

body {
	margin: 0;
	display:block;
	font:var(--type-body);
	letter-spacing:-0.025rem;
}

span, strong {vertical-align:baseline;}
nav, ul {list-style:none; padding:0;}


input, textarea, select {
	font:var(--type-body);
	vertical-align:middle;
	padding: 0; 
	margin: 0; 
	border: 1px solid var(--black15);
	border-radius:8px;
	outline:none;
	width:-webkit-fill-available;
}



input, textarea, select {padding: 13px 15px;}

select::-ms-expand { 
	display: none;
}
select {
	-o-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

:root {--select-icon-size:20px;}

select {
	background: url(../images/CaretDown.svg) calc(100% - (var(--select-icon-size) / 2)) center no-repeat;
	background-size: var(--select-icon-size);

	&.white-selec {
		filter: contrast(0%) brightness(300%);
	}
}



label {

	&:has(> select) {
		display: inline-flex;
		align-items: center;
		background: transparent;
		position: relative;

		box {
			width: 14px;
			height: 14px;
			position: absolute;
			right: 10px;
			display: inline-flex;
			align-items: center;
			justify-content: center;


			&:after, &:before {
				content: "";
				width: 50%;
				height: 1px;
				top:1px;
				background-color: currentColor;
				transition: all 0.2s ease;
				position: relative;
			}

			&:before {
				transform: rotate(45deg);
				right: -7.5%;
			}

			&:after {
				transform: rotate(-45deg);
				left: -7.5%;
			}


		}
	}

	/*&:has(> select:focus) {
		box {
			transform: rotate(180deg);
		}
	}*/

	&.big-select {
		font: var(--type-bodytitle);

		box {
			width:18px;
			height:18px;
		}

		select {
			padding:8px 44px 8px 12px;

			option {
				font-size:var(--fs-body);;
			}
		}
	}
}


textarea {resize:vertical; overflow:auto;}
fieldset {border:0 none;}
legend {visibility:hidden; height:0; font:0/0 a;margin-left:-7px;}
caption {visibility:hidden; height:0; font:0/0 a;}
a {margin:0; padding:0; text-decoration:none;color: inherit;}
a:hover {}
a:focus, button:focus {outline:none;}
a:active {background-color:transparent;}
table {border-collapse:collapse; border-spacing:0;}
img {-ms-interpolation:bicubic; vertical-align: sub; display:block;}
strong {vertical-align:top;}



h1, h2, h3, h4, h5, p {margin:0;}

h1 {font:var(--type-haedline-b);}
h2 {font:var(--type-title-b);}
h3 {font:var(--type-subtitle-b);}
h4 {font:var(--type-semititle);}
h5 {font:var(--type-bodytitle);}
p {font:var(--type-body);}



button, input[type="reset"], input[type="submit"] {
	-webkit-appearance:button; cursor:pointer; vertical-align:baseline; font-family: inherit; line-height: inherit; letter-spacing:inherit;
}


input::placeholder {
	color:var(--black40);
	font-weight:400;
	transition: 1s ease-in;

}


/* label:before에 체크하기 전 상태 CSS */
input[type="checkbox"], input[type="radio"] {
	display:none;
	box-sizing:border-box; 
	padding:0;
	margin:0;

	+ label {
		cursor:pointer;
		display:flex;
		align-items: center;
		width: fit-content;
		gap:5px;

		box {
			display:inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width:16px;
			height:16px;
			border:1px solid var(--black20);
			border-radius: 4px;
			vertical-align:middle;
			background:var(--white);
			transition:all 0.3s ease;
			box-sizing: border-box;
			margin: 0.22em 0;

			&:hover {
				box-shadow: 0 0 10px #2ed7d460;
				border:1px solid var(--color-1);
				transition: all 0.3s ease;
			}
		}

		> span {
			vertical-align: middle;
			color:var(--black80);
			width:calc(100% - 16px) /** box width 값 **/
		}
	}

	&.big + label {
		 box {
			height:24px;
			width:24px;
		}
		> span {
			font:var(--type-bodytitle);
			width:calc(100% - 24px) /** box width 값 **/
		}
	}
}

input[type="checkbox"] {
	/** 기본 체크박스 스타일 **/
	+ label box {
		svg {
			margin:25%;
			width:100%;
			height:100%;
			fill: none;
			stroke: var(--white);
			stroke-width: 15%;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-dasharray: 16px;
			stroke-dashoffset: 16px;
			transition: all 0.2s ease;
			transition-delay: 0.05s;
		}
	}

	/** circle 체크박스 컨트롤 부분 **/
	&.circle_check + label box {
		border-radius: 50em;
	}

	/** 체크 상태 스타일 부분 **/
	&:checked + label box {
		background:var(--color-1);
		border:1px solid var(--color-1);
		
		svg {
			stroke-dashoffset: 0;
		}
	}


	&.checkbox-btn + label {
		padding:8px 15px;
		border:1px solid var(--black40);
		border-radius:50em;
		white-space: nowrap;

		span {color:var(--black40);}
	}

	&.checkbox-btn:checked + label {
		background:#1b84ff2f;
		border:1px solid var(--color-1);

		span {color:var(--color-1);}
	}
}

input[type="radio"] {
	/** 기본 체크박스 스타일 **/
	+ label box {
		border-radius:50em;

		&:before {
			content:"";
			width:0;
			height:0;
			border-radius:50em;
			display:block;
			background:var(--color-1);
			opacity:0.8;
			transition: all 0.2s ease;
		}
	}

	/** 체크 상태 스타일 부분 **/
	&:checked + label box {
		border:1px solid var(--color-1);
		
		&:before {
			width:60%;
			height:60%;
		}
	}
}


/* 라디오/체크박스 인라인 */
.radio-inline-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	min-height: 40px;
}
.radio-inline {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	white-space: nowrap;
}



/********* logo 색상 컨트롤 부분 ***********/
.svg-logo {
	svg {
		display:block;
		width:100%;

		path {
			&:nth-child(-n+4) {
				fill:var(--color-2);
			}
			&:nth-child(n+5):nth-child(-n+8) {
				fill:var(--color-1);
			}

			&:nth-child(9n) {
				fill:var(--color-2);
			}

			&:nth-child(10n) {
				fill:var(--color-3);
			}

			&:nth-child(11n) {
				fill:var(--color-1);
			}
		}
	}

	&.svg-white {
		svg {
			display:block;
			fill:var(--white);

			path {
				&:nth-child(n) {
					fill:var(--white);
				}

				&:nth-child(10n) {
					fill:var(--white);
					opacity:0.5;
				}

				&:nth-child(11n) {
					fill:var(--white);
					opacity:0.8;
				}
			}
		}
	}

}

.svg-icon {
	svg {
		display:block;
		width:100%;

		path {
			
		}
	}

	&.svg-white {
		svg {
			display:block;
			fill:var(--white);

			path {
				fill:var(--white);
			}
		}

		&.svg-line {
			svg {
				
				path {
					fill:none;
					stroke:var(--white);
				}
			}
		}
	}

}
/********* logo 색상 컨트롤 부분 end ***********/










/********** R 값 부분 ************/
.r-4 {border-radius:4px;}
.r-8 {border-radius:8px;}
.r-16 {border-radius:16px;}
.r-20 {border-radius:20px;}
.r-24 {border-radius:24px;}
.r-40 {border-radius:40px;}
.r-a {border-radius:50em;}

/********** R 값 부분 end ************/




/******** 이미지 사이즈 부분 *********/
.img-wrap {
	/*margin:0 auto;*/

	img {width:100%;height:100%;object-fit:cover;}

	&.img-center {
		margin:0 auto;
	}

	&.bg_wrap_img {
		width: -webkit-fill-available;
		height: 100vh;
	}

	&.img-180 {
		width:180px;
	}

	&.img-150 {
		width:150px;
	}

	&.img-100 {
		width:100px;
	}

	&.img-80 {
		width:80px;
	}
	&.img-h-80 {
		height:80px;
		max-width: 60%;

		img {object-fit: contain;}
	}

	&.img-72 {
		width:72px;
	}

	&.img-68 {
		width:68px;
	}

	&.img-48 {
		width:48px;
	}

	&.img-16 {
		width:16px;
	}


	&.img-square img {
		width:100%;
		aspect-ratio: 1 / 1;
	}

	&.img-16-9 img {
		width:100%;
		aspect-ratio: 16 / 9;
	}

	&.img-16-4 img {
		width:100%;
		aspect-ratio: 16 / 5;
	}

	&.img-4-3 img {
		width:100%;
		aspect-ratio: 4 / 3;
	}

	&.img-border-r img {
		border-radius:var(--border-radius);
	}

	&.on-img-btn {
		position:relative;

		.video-play-btn {
			width:24px;
			height:24px;
			background:var(--color-3);
			border-radius:50em;
			display:flex;
			position:absolute;
			top:calc(50% - 12px - 16px);
			left:calc(50% - 12px - 16px);
			box-shadow: 4px 4px 16px #00000040;
			padding:16px;

		}

	}


	.img-w-60per {
		width:60%;
		border-radius:var(--border-radius);
		margin:0 auto;
	}

	.img-w-80per {
		width:80%;
		border-radius:var(--border-radius);
		margin:0 auto;
	}
}

/******** 이미지 사이즈 부분 end *********/












/********** 버튼 모음 부분 **********/
.btn-wrap {
	width:100%; 
	display:flex; 
	flex-direction: column;
	padding:40px 0 10px;
	gap:var(--gap10);

	&.none-pd {
		padding:0;
	}

	&.btn-wrap-pd-t-5 {
		padding-top:5px;
		justify-content: center;
	}

	
	&.btn-row {
		flex-direction: row;
		gap:4px;
	}

	&.btn-fixed {
		position:relative;
		bottom:0;
	}

	&.w-fit-con {
		width:fit-content;
	}

	&.btn-right {
		align-items: flex-end;
		flex-direction: row;
		justify-content: flex-end;
	}

	&.btn-row-nogap {
		flex-direction: row;
		gap:0;
		padding:0;

		.btn {width: -webkit-fill-available; border-radius: 0;}
	}
}


.btn {
	border-radius:8px;
	background:var(--color-1);
	color:var(--white);
	min-width:60px;
	text-align:center;
	border: none;
	transition:all 0.3s ease;
	padding:15.5px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	word-break: auto-phrase;
	line-height: 1.5em;
	white-space: nowrap;
	box-sizing: border-box;
	cursor:pointer;

	&:hover {box-shadow: 0 0 10px #2ed7d460; transition:all 0.3s ease;}
	
	&.w-fit-con {
		width:fit-content;
	}

	&.w-btn-fill {
		width: -webkit-fill-available;

		&.w-btn-fill {margin-top:8px;}
	}

	&.btn-minimum {font:var(--type-minimum) !important; padding:2px 4px !important; min-width: fit-content; border-radius: 2px;}
	&.btn-tiny {font:var(--type-discript); padding:6.5px 8px; }
	&.btn-regular {font:var(--type-discript); padding:12px 8px; }
	&.btn-big {font-size:var(--fs-sub-title); padding:12px 16px;font-weight:var(--fw-800); }


	&.black {background:var(--black80);color:var(--white);  border:1px solid var(--black80);}
	&.color {background:var(--color-1);color:var(--white);  border:1px solid var(--color-1);}
	&.color-green {background:var(--green-color);color:var(--white);  border:1px solid var(--green-color);}
	&.color-yellow {background:var(--color-8);color:var(--black); border:1px solid var(--color-8);}
	&.color-red {background:var(--red-color);color:var(--white); border:1px solid var(--red-color);}
	&.gradient {background:var(--main-gradient);color:var(--white); border:1px solid var(--main-gradient);}
	&.disable {background:var(--black5);color:var(--black20); border:1px solid var(--black5); cursor:initial;}

	&.btn-caution {background:var(--color-8);color:white;}



	&.outline {background:var(--white); color:var(--black); border:1px solid var(--black);}
	&.outline-color {background:var(--white); color:var(--color-1); border:1px solid var(--color-1);}
	&.outline-green {background:var(--white);color:var(--green-color);border:1px solid var(--green-color);}
	&.outline-yellow {background:var(--white);color:var(--color-8);border:1px solid var(--color-8);}
	&.outline-red {background:none; color:var(--red-color); border:1px solid var(--red-color);}
	&.outline-white {background:none; color:var(--white); border:1px solid var(--white);}
	&.outline-disable {background:var(--white); color:var(--black20); border:1px solid var(--black20); cursor:initial;}



}


.btn-filter-wrap {
	display:flex; gap:var(--gap10);
	padding:10px 0;

	.btn-filter {font:var(--type-body); background:var(--black5); color:var(--black60); border-radius:50em; border:none; padding:6px 12px;}
	.btn-filter.active {background:var(--color-1); color:white;}
}

.sns-btn {border-radius: 50em;}
.sns-btn.naver {background: #0CB75B; color:var(--white);}
.sns-btn.kakao {background: #FED500;color:#483631;}

.btn.play-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/play.svg) center no-repeat;
	background-size:cover;
}

.btn.play-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/play.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.add-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/PlusCircle.svg) center no-repeat;
	background-size:cover;
}

.btn.add-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/PlusCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.del-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/MinusCircle.svg) center no-repeat;
	background-size:cover;
}

.btn.del-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/MinusCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.check-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CheckCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.check-icon-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CheckCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(200%) brightness(200%);
}

.btn.check-icon-white-reverse:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CheckCircle.svg) center no-repeat;
	background-size:cover;
	filter: invert(50%) brightness(400%) contrast(200%);
}

.btn.write-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/Pencil.svg) center no-repeat;
	background-size:cover;
}


.btn.heart-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/Heart.svg) center no-repeat;
	background-size:cover;
}

.btn.heart-icon.on:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/Heart_on.svg) center no-repeat;
	background-size:cover;
}

.btn.cancel-icon:before {
	content:"";
	width:16px;
	height:16px;
	margin-right: 4px;
	display:block;
	background:url(../images/CLOSE.svg) center no-repeat;
	background-size:cover;
}



/********** 버튼 모음 부분 end **********/



.input_wrap {
	display: flex;
    flex-direction: column;
    gap: var(--gap20);
	/*padding-bottom:40px;*/

	&.input_wrap-row {
		flex-direction: row;
		gap: 8px;
		align-items: flex-end;

		.TextFields {
			width: -webkit-fill-available;

			input, textarea, select, label {font:var(--type-discript);}
			/*input, textarea, select {padding:8px;}*/
			
		}

		

	}

	form {
		display: flex;
		flex-direction: column;
		gap: var(--gap20);
	}
}



/********* input 모듈 부분 ************/
.TextFields {
	display:flex;
	flex-direction: column;
	gap:4px;

	&.max-w-344 {max-width:344px;}
	&.max-w-50p {max-width:50%;}

	.input_title {
		font:var(--type-body);

		&.pilsu::after {
			content: '*';
            padding: 0 5px 0;
            line-height: 1em;
            color: var(--color-1);
			font-weight:800;
		}
	}

	.error-descript {display:none;}

	&.error {
		input, textarea, select {
			border:1px solid var(--red-color);
		}

		.error-descript {
			display:block;
			color:var(--red-color);
			font:var(--type-discript);
		}

	}

	&.with-del-btn {
		flex-direction: row;
	}

	.sub-script {color: #94a3b8; font:var(--type-discript); margin-top: 4px;}
}

.TextFields .with-btn {
	display:flex;
	gap:var(--gap10);
}



.rank-result-box {
	border: 1px solid var(--border-color, var(--black5)); border-radius: 10px; padding: 20px; background-color: white; margin-bottom: 20px;


}

.rank-procces-box, .rank_result_buying_box {
	background-color: white; border: 1px solid var(--border-color, var(--black5)); border-radius: 12px; padding: 20px; box-shadow: var(--card-shadow);
}

.rank-procces-box > span {
	background-color: #edf5ff; color: var(--primary-blue, #0066ff); font:var(--type-discript-b); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 12px;
}

.rank_result_buying_box {
	display: flex; flex-direction: column; justify-content: space-between; min-height: 140px;

	.arrow-a-link {
		font:var(--type-discript-b); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 14px;
	}
}

.buying_box_title {
	font:var(--type-body-b); margin-bottom: 10px; border-bottom: 3px solid var(--primary-blue, #var(--black)); display: inline-block; padding-bottom: 4px;

	&.blue {border-bottom: 3px solid var(--primary-blue, #0066ff)}
}

.buying_box_desc {font:var(--type-discript); color: var(--black40); }



#bank_only_area, #tax_invoice_details {display:flex;flex-direction:column;gap:20px;}

#bank_only_area {
	display: none; border-left: 3px solid #24C766; padding-left: 15px; margin-bottom: 10px;

	.box {background-color: #fafbfc; border: 1px solid var(--black5); padding: 12px 15px; border-radius: 8px; font-size: 13px; line-height: 1.6; color: var(--black60);margin-bottom: 20px;}
}

#tax_invoice_details, #money_invoice_details {
	display: none; border-left: 3px solid #0066ff; padding-left: 15px; margin-bottom: 10px;

	.TextFields {margin-bottom:8px;}
}

.notice-list-wrapper {
	padding-left:20px; 

	> li {
		font:var(--type-discript);
		list-style: initial;
		color:var(--black40);
	}
}


.stat-item-label {
    font: var(--type-discript);
	opacity:0.75;
    margin-bottom: 6px;
}

.stat-item-value {
    font: var(--type-semititle-b);
}


/********* input 모듈 부분 end ************/


/********* tab 부분 *************/
.tab {
	display:flex;
	padding-bottom:30px;
	margin:0;

	.tab_menu {
		width: -webkit-fill-available;
        min-width: 80px;
        text-align: center;
        font: var(--type-body-16);
        border-bottom: 1px solid var(--black15);
        padding: 10px 0;
		/*cursor: pointer;*/

		&.active {border-bottom:1px solid var(--black);}

		
	}

	&.none-pd {padding:0;}

	&.btn-tab {
		gap:var(--gap10);

		.tab_menu {
			width: auto;
			min-width: auto;
			text-align: center;
			font: var(--type-body);
			color:var(--black40);
			background:var(--black5);
			padding: 10px 15px;
			/*cursor: pointer;*/
			border-radius:8px;

			strong {color:var(--black);}

			&.active {
				border-bottom:none; background:var(--color-1); color:var(--white);
				
				strong {color:var(--white);}
			}

			&.active-yellow {
				border-bottom:none; background:var(--color-8); color:var(--white);

				strong {color:var(--white);}
			}

			&.w-f-available {width:-webkit-fill-available;}
		}


		&.ads-status-tab {
			
		}

	}
}




/********* tab 부분 end *************/


.title-wrap {
	padding:0 0 24px;

	.mc-title {
		display:flex;
		align-items: center;

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


		.highlight {opacity:0.8; font-weight:300;}

	}

	.mc-desc-wrap {
		display: flex;
        padding-top: 8px;
        align-items: center;

		p {color:var(--black60);}

		.desc_left, .desc_right {width: -webkit-fill-available;}
	}

	&.center-title {
		
		.mc-title, .mc-desc-wrap {justify-content: center; text-align:center;}
	
	}

	&.pop-title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mc-title h3 {font:var(--type-bodytitle-b);}
		.mc-desc-wrap {gap:5px;}
	}

	&.medium-title {
		padding:0 0 16px;

		.mc-title h3 {font:var(--type-bodytitle-b);}	
	}

	&.title-numbering {
		padding:0 0 8px;

		.mc-title {
			display:flex;
			gap:5px;
		
			h3, h5 {font:var(--type-body-b);}

			.num-circle {background:var(--color-1); color:white; padding: 2px 10px; border-radius:8px;}
		}
	
	}

	&.table-title {
		padding:0 0 16px;
		

		.mc-title h3 {font:var(--type-bodytitle-b);}	

		.title-right {
			display:flex;
			gap:5px;
		
			.btn {
				min-width: 40px;
				padding: 10px 15px;
				font: var(--type-discript);
			}

			&.cash-title-right {gap:20px;}

			input, textarea, select {
				padding: 4px 32px 4px 8px;
				WIDTH: fit-content;
			}
		}
	
	}

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

	&.bottom-line {border-bottom: 2px solid var(--color-1);}
}

.reciept-status-pop {
	position: fixed;
	transform: translate(0, 60%);
	z-index: 99;
	background: white;
	padding: 15px;
	border-radius: var(--border-radius);
	box-shadow: 4px 4px 10px #0000002c;
	font: var(--type-discript);
	border: 1px solid var(--black10);
	display:none;
	
	ul {margin:0}
	ul > li {padding:8px 0; border-bottom:1px solid var(--black10);}
	ul > li:last-child {border-bottom:0; font: var(--type-discript);}
	ul > li span {font: var(--type-discript); font-weight:800; margin-right:20px; display: inline-block;}
}

.reciept-status-pop-btn:hover+.reciept-status-pop {display:inline-block;}


colored {color:var(--color-1); font-weight:800;}

.bg-gray {background:var(--black5);}

.back-to-top {
	transition:all 0.3s ease;
	position: fixed !important;
	right: -70px;
	bottom: 32px;
	padding:16px;
	background:var(--white);
	border-radius: 50em;
    box-shadow: 4px 4px 10px #00000008;
    border: 1px solid var(--black5);

	&:hover {
		bottom:40px;
	}


}



#body .pc-none {display:none;}

.txt-a-c {text-align:center;}

.txt-a-c > .MC_title {justify-content: center;}

.justify-content-c { justify-content: center;}




.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}


.pop-up {
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	background:#0000003c;
	top: 0;
    left: 0;
    z-index: 99;
	

	&.active {display:inline-flex; align-items: center; justify-content: center;}

	&#pop-place-help {z-index:999;}
	&#pop-shopping-help {z-index:999;}

	.pop-up-wrap {
		width:-webkit-fill-available;
		max-width:480px;
		background:var(--white);
		border-radius:var(--border-radius);
		padding:var(--box-pd);
		margin:0 15px;
	}

	.pop-up-wrap-full-w {
		max-width:80%;
	}

	.pop-up-con-wrap {
		max-height:60dvh;
		overflow:auto;

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

	#pop-close {cursor:pointer;}
}


.table-wrap {
	width:-webkit-fill-available;
	overflow-x:auto;
	border: 1px solid var(--black5);
    border-radius: var(--btn-r);
	min-height:20rem;
	background: #fbfbfb;

	table {
		width:-webkit-fill-available;

		thead tr {background:var(--black5);}
		tbody tr {
			border-bottom:1px solid var(--black5);
			background:white;
		}

		th, td {
			width:-webkit-fill-available; padding:8px;text-align: center; /*min-width:110px;*/ word-break: break-all;
			
			&.w-min-200 {min-width:200px;width: 200px;}
			&.w-min-150 {min-width:150px;width: 150px;}
			&.w-min-120 {min-width:120px;width: 120px;}
			&.w-min-100 {min-width:100px;width: 100px;}
			&.w-min-88 {min-width:72px;width: 72px;}
			&.w-min-60 {min-width:60px;width: 60px;}

			&.w-max-60 {max-width:60px;}
			&.w-max-88 {max-width:88px;}
			&.w-max-100 {max-width:100px;}
			&.w-max-120 {max-width:120px;}
			&.w-max-150 {max-width:150px;}
			&.w-fit-contents {width: fit-content;}

			small {font:var(--type-discript); color:var(--black40);}
		}

		.txt-a-s {text-align:start;}


		.btn {padding:6px 12px; font:var(--type-discript); margin: 0 auto; width:fit-content;}
		.btn + .btn {margin: 4px auto 0;}

		.btn-row .btn {margin:0;}


		.chktd, .chkth {
			min-width: 48px;
            width: 48px;
			padding:8px 8px 8px 12px;

			label {margin:0 auto;}
		}

		

	}

	&.small-txt {

		table {
			th, td {
				font:var(--type-discript);
				min-width: fit-content;
				padding:3px 2px;
				border: 1px solid var(--black10);
				width: fit-content;

				&.w-min-120 {min-width:fit-content;width: fit-content;}
				&.w-min-100 {min-width:fit-content;width: fit-content;}
				&.w-min-88 {min-width:fit-content;width: fit-content;}
				&.w-min-60 {min-width:fit-content;width: fit-content;}
			}

		}
	
	}

	&.fit-height {min-height:fit-content;}

	&.table-wrap.inner-table {
		border: 1px solid var(--black10); 
		/*padding: 15px; */
		border-radius: 8px;
	}

	&.table-wrap {
		
		.green {color:var(--color-1);}
		.red {color:var(--red-color);}
		.gray {color:var(--black40);}
		.orange {color:var(--color-3);}
	}

	&.table-wrap.inner-table .title-wrap.table-title {border-bottom: 1px solid var(--black10); padding: 8px 15px;}
	&.table-wrap.inner-table table.text-center {}
	&.table-wrap.inner-table .title-wrap h5 {font:var(--type-body-b);}

	&.table-fit-w table {

		th, td {min-width: -webkit-fill-available;}
	}
}



.body-con-wrap {
	padding:15px 0;
	border-top:1px solid var(--black5);
}



.TextFieldsInnerBox {
	display: flex;
	align-items: center;
	gap: var(--gap10); /* input과 button 사이 간격 */
}

.TextFieldsInnerBox input {
	flex: 0 0 70%; /* input의 고정 너비 (원하는 크기로 조정 가능) */
}

.TextFieldsInnerBox button {
	flex: 1; /* 남은 공간을 전부 차지 */
}

.TextFieldsInnerBox button {
	padding:13px 15px;
	background:#000;
	border-radius:8px;
	color:#fff;
}




#hide-search-opt.hidden {
	display:none;
}

.paging_navigation {
	padding-top:40px;

	a.print, a.page-next {
		display: inline-flex;
        border: 1px solid var(--black10);
        height: 28px;
        width: 28px;
        align-items: center;
        justify-content: center;

		&.page-active {
			background:var(--black60);
			color:white;
		}
	}


	
}





/* ── 공지사항 (ads-all-list.php 동일) ── */
.notice-summary-row { margin-bottom: 0; }
.notice-summary-list { list-style: none; padding: 0; margin: 0; }
.notice-summary-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--black10);
}
.notice-summary-item:last-child { border-bottom: none; }
.notice-summary-item.is-important .notice-summary-title { font-weight: 600; }
.notice-summary-tags { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.ntag {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 4px;
    font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.6;
}
.ntag-important { background: #fff0f0; color: var(--red-color); }
.ntag-partner   { background: #e8f1ff; color: var(--color-1); }
.ntag-agency    { background: #f0f0ff; color: var(--color-2); }
.notice-summary-title {
    flex: 1; font: var(--type-body); color: var(--black80);
    text-decoration: none; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.notice-summary-title:hover { color: var(--color-1); text-decoration: underline; }
.notice-summary-date {
    font: var(--type-discript); color: var(--black40);
    white-space: nowrap; flex-shrink: 0;
    margin-left: auto; padding-left: 12px;
}



.user-level-badge {
	font:var(--type-body);
	padding:8px 12px;
	border-radius:var(--btn-r);
	color:var(--color-1);
	background:#3bcc332b;

	&.agency {
		color:var(--color-2);
		background:#3388cc2b;
	}
}

table .user-level-badge {
	font:var(--type-discript);
	padding:4px 8px;
	color:var(--color-1);
	background:#3bcc332b;
	display:inline-block;
}


/* 포인트 정산 정보 요약 박스 */
.traffic-summary-box {
	background-color: #edf5ff;
	border: 1px solid #c3ddff;
	padding: 20px;
	border-radius: 10px;
	margin-top: 10px;
}
.summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}
#current_traffic_points {
	color: #0066ff;
	font-weight: 700;
}
.summary-row-bold {
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	font-weight: 800;
	color: #1e293b;
	border-top: 1px dashed #c3ddff;
	padding-top: 12px;
}
#required_traffic_points {
	color: #ef4444;
	font-weight: 800;
}

.comment-box {
	padding:15px;
	background:var(--black5);
	border-radius:var(--box-radius);
}




.info-pop-btn {
	font:var(--type-discript);
	color:var(--color-1);
	border-radius:50em;
	border:1px solid var(--color-1);
	padding:6px 12px;
	transition: all 0.3s ease;
	&:hover {background:var(--color-1); color:white; transition: all 0.3s ease; }

}

@media (max-width: 1279px) {
	.TextFieldsInnerBox button {
		padding:10px 12px;
	}
}





#extraInfo {
	/* 기본적으로 숨겨진 상태 */
	display: none;

	&.visible {
		display: block;
	}
}

/* 체크되었을 때 보이게 하는 클래스 */





.a_link_color {


	a {text-decoration:auto;color: blue;}
	a:hover {text-decoration: underline;}

}

.m-b-10 {margin-bottom:10px !important;}
.m-b-20 {margin-bottom:20px !important;}









.droptd {
	position:relative;

	.drop-contents {
		position: absolute;
        z-index: 9;
        background: white;
        border: 1px solid var(--black10);
        /*width: -webkit-fill-available;*/
        padding: 5px 15px;
        margin: 0;
        border-radius: 15px;
        box-shadow: 1px 1px 8px #0000001c;
		display: none;

		li {margin:5px;}

	}

	&:has(.active) {
		.drop-contents {
			display: inline-block;
            transform: translateX(-50%);
		
			li {white-space:nowrap;}
		}

	}

}


.error {color:var(--red-color);}
.confirm {color:var(--color-1);}
.caution {color:var(--color-8);}



.tag-wrap {
	display: flex;
    flex-wrap: wrap;
    gap: 15px 10px;
}



.upload_review_img_contents {
	padding: 15px;
	border:1px solid var(--black10);

	.drop-area {
		padding: 20px;
		margin:0 0 8px;
		border: 1px solid var(--color-1);
		text-align: center;
		cursor: pointer;
		background:#03c75a14;
	}

	.drop-area > p {color:var(--color-1); font-weight:800;}
	
	.cursor-pointer {cursor: pointer;}

	.upload-summary {
	
		p {font:var(--type-bodytitle-l);}
	}

	.upload-list {
		margin:8px 0;
		border:1px dash var(--black10);
		max-height: 170px;
		overflow: auto;
		padding: 0 10px;
        background: var(--black5);
		border-radius:8px;

		.upload-item {padding:10px 0;}
	}
}

.auto_crawl_contents {
	padding:10px 0; 
	color:red;
	font:var(--type-discript);

}

.reviewimg-wrap {
	
	.upload_review_img_contents {display:none;}
	

	&:has(input[id='upload_review_img']:checked) {
		
		.upload_review_img_contents {display:block;}
		.auto_crawl_contents {display:none;}
	}
}

.info-box {
	display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px;
    background: #ff000012;
    color: #ff0000;
	border-radius:var(--border-radius);
	margin-top:2px;

	.red-icon-img {
		filter:invert(25%) sepia(64%) saturate(7039%) hue-rotate(353deg) brightness(100%) contrast(129%);
	}

	p {
		font-size:0.85em;

		strong {font-size:1.05em;}
	}

	img {margin-top:10px;}
}

.txt-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;

	.line-2 {
		-webkit-line-clamp: 2;
	}
}

.badge {
	padding:4px;
	border-radius:8px;
	font:var(--type-discript);
	background:black;
	color:white;

	&.success-badge {background:var(--color-1);}
	&.error-badge {background:var(--red-color);}
	&.caution-badge {background:var(--color-8);}
	&.disable-badge {background:var(--black10); color:black;}
	&.unable-badge {background:var(--orange-color);}
	&.ing-badge {background:var(--green-color);}
}

.status-badge {
	padding:4px 12px;
	border-radius:8px;
	font:var(--type-discript);
	background:black;
	color:white;
	display:inline-block;

	&.delay {background:var(--bg-color); color:var(--black60);}
	&.none {background:white; color:var(--black60);}
	&.complite {background:var(--red-color);}
	&.interruption {background:var(--color-2);}
	&.ing {background:var(--green-color);}
	&.interruption2 {color:black; background:var(--black20);}
	
}


.account-wrap {
	background:var(--bg-color);
	border-radius:var(--border-radius);
	padding:15px;
	margin-top:5px;

	h5 {        
		font-size: 15px;
        font-weight: 800;
	}
}


.m-only {display:none;}

#age-text-range.error .tag-wrap label, #review-style-text.error .tag-wrap label {
	border:1px solid #fd3375;
}

#age-text-range.error .tag-wrap label span, #review-style-text.error .tag-wrap label span {
	color:#fd3375;
}

.copy-btn { float:right;}
.notice_view-meta { min-height:initial !important;}

.badge-new {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 6px;
	border-radius: 10px;       /* pill 형태 */
	background: #ff4d4f;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	vertical-align: middle;
	line-height: 1.6;
	letter-spacing: 0.05em;
}


.popup-setting-wrap {
	padding: 14px 16px;
	background: var(--black5);
	border-radius: 8px;
	border: 1px solid var(--black15);
}
.popup-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.popup-toggle-label input[type="checkbox"] {
	width: 17px; height: 17px;
	accent-color: var(--color-1);
	cursor: pointer; margin: 0;
}
.popup-preview-wrap {
	margin-top: 10px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}
.popup-preview-wrap img {
	max-width: 300px;
	max-height: 200px;
	border-radius: 6px;
	border: 1px solid var(--black15);
	object-fit: contain;
	background: #fff;
}

/* 팝업 설정 */
.popup-setting-wrap {
	padding: 14px 16px;
	background: var(--black5);
	border-radius: 8px;
	border: 1px solid var(--black15);
}
.popup-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.popup-toggle-label input[type="checkbox"] {
	width: 17px;
	height: 17px;
	accent-color: var(--color-1);
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
}
.popup-preview-wrap {
	margin-top: 10px;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}
.popup-preview-wrap img {
	max-width: 300px;
	max-height: 200px;
	border-radius: 6px;
	border: 1px solid var(--black15);
	object-fit: contain;
	background: #fff;
}

#notice-popup-overlay {
	position:fixed; inset:0; z-index:9999;
	background:rgba(0,0,0,.25);
	display:flex; align-items:center; justify-content:center;
	padding:20px; box-sizing:border-box;
}

#notice-popup-overlay .notice-popup-con {
	position:relative;
	background:#fff;
	border-radius:12px;
	overflow:hidden;
	width:100%;
	max-width:50vw;
	max-height:80vh;
	display:flex; flex-direction:column;
	box-shadow:0 8px 40px rgba(0,0,0,.3);
}

#notice-popup-overlay .notice-popup-con .popup-x-btn {
	position:absolute; top:10px; right:10px; z-index:1;
	width:28px; height:28px; border-radius:50%; border:none;
	background:rgba(0,0,0,.4); color:#fff;
	font-size:14px; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
}

.user-point-row { margin-bottom:10px;}
.user-point-row span { display:inline-block;padding:5px 7px;background:#eee;}
.user-point-row strong { float:right;}

.img-popup-shade { position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.25);z-index:999;}




/* 중단 토글 스위치 */
.vc-toggle-container {
	display: inline-block;
	position: relative;
}
.vc-toggle-container[data-tooltip]:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 110%;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 8px;
	border-radius: 4px;
	background: #333;
	color: #fff;
	font-size: 11px;
	white-space: nowrap;
	z-index: 10;
}
.vc-small-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 22px;
	cursor: pointer;
}
.vc-small-switch .vc-switch-input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 2;
}
.vc-small-switch .vc-switch-label {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 22px;
	background: #ccc;
	transition: background 0.2s;
}
.vc-small-switch .vc-switch-input:checked ~ .vc-switch-label {
	background: #5fb039;
}
.vc-small-switch .vc-switch-handle {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.2s;
	z-index: 1;
}
.vc-small-switch .vc-switch-input:checked ~ .vc-switch-handle {
	left: 24px;
}

/* 라이브 상태 뱃지 */
.live-status-sp { display:inline-block;padding:5px 10px;border-radius:15px;}
.live-status-sp.on { background:#5fb039;color:#fff;}
.live-status-sp.sj { background:#e3eafb;color:#a3a0f6;}
.live-status-sp.off { background:#de3323;color:#fff;}



/* 다운로드 스피너 */
.lgn-spinner-box {
	display:none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
	z-index:9999999;
}
.loader {
	display:none;
	position:fixed;
	left:calc((100% - 48px) / 2);
	top:calc((100% - 48px) / 2);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	animation: rotate 1s linear infinite;
	z-index:9999999;
}
.loader::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border: 5px solid #115EFB;
	animation: prixClipFix 2s linear infinite ;
}

@keyframes rotate {
	100%   {transform: rotate(360deg)}
}

@keyframes prixClipFix {
	0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
	25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
	50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
	75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
	100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}





.refund-badge {
	font: var(--type-discript);
    color: var(--red-color);
    padding: 4px 8px;
    display: inline-block;
    background: #fd33750f;
    border-radius: 8px;
}