:root {
	--container-lr:1vw;
	--container-tb:1vw;

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

}


/**** flex 관련 부분 ****/


/**** flex 관련 부분 end ****/


/**** 가로폭 관련 ****/

.w-1-5 {width:calc(25% - calc(var(--section-lr)/2));}
.w-3-5 {width:calc(50% - calc(var(--section-lr)/2));}
.w-4-5 {width:calc(75% - calc(var(--section-lr)/2));}

/**** 가로폭 관련 end****/



/**** 간격 조정 ****/


/**** 간격 조정 end ****/




.col-5 > li ,.col-4 > li {width:calc((100% - (var(--section-lr)*3)) / 4)}

.col-5 > li.box_white_notice ,.col-4 > li.box_white_notice {width:calc((100% - (var(--section-lr)*3)) / 4 - 32px)}

.col-6 > li {width:calc((100% - (var(--section-lr)*4)) / 5)}

.col-6 > li.box_white_notice {width:calc((100% - (var(--section-lr)*4)) / 5 - 32px)}

.list_wrap.m_swipe_list_wrap {width: -webkit-fill-available; overflow-x: auto;}

.list_wrap.m_swipe_list_wrap > ul {width: max-content;}

.list_wrap.m_swipe_list_wrap > ul.col-6 > li,
.list_wrap.m_swipe_list_wrap > ul.col-5 > li,
.list_wrap.m_swipe_list_wrap > ul.col-4 > li {
	width:calc((100vw - (var(--section-lr)*3)) / 4.5);
}

.col-5 > li:nth-child(5n) {margin-right:var(--section-lr);}

.col-6 > li:nth-child(6n) {margin-right:var(--section-lr);}

.col-5 > li:nth-child(4n),.col-4 > li:nth-child(4n) {margin-right:0;}

.col-6 > li:nth-child(5n) {margin-right:0;}


.list_wrap.m_swipe_list_wrap > ul.col-5 > li:nth-child(4n),
.list_wrap.m_swipe_list_wrap > ul.col-4 > li:nth-child(4n) {
	margin-right:var(--section-lr);
}

.list_wrap.swipe_list_wrap .col-6 > li:nth-child(5n) {
	margin-right:var(--section-lr);
}

/********** 공통요소 container 부분 end **********/




.pc-none {display:initial;}




:root {

	--box-pd : 20px 15px;
}



.body_wrap.w-420 .w-420_wrap .w-420-con-wrap {
	padding:40px var(--section-lr);
}







.m-mg-t-50 {margin-top:50px;}
.m-mg-t-60 {margin-top:60px;}








.col-2 > div, .col-2 > li {width:100%;}

.col-6 > li, .col-5 > li,.col-4 > li {
	width:calc((100% - (var(--section-lr)*2)) / 3);
}

.col-6 > li.box_white_notice,.col-5 > li.box_white_notice ,.col-4 > li.box_white_notice {
	width:calc((100% - (var(--section-lr)*1)) / 2 - 32px)
}

.col-6 > li.box_white_notice:nth-child(n+3), .col-5 > li.box_white_notice:nth-child(n+3),.col-4 > li.box_white_notice:nth-child(n+3) {
	margin-top:28px;
}




.col-6 > li:nth-child(5n) {
	margin-right:var(--section-lr);
}




.col-6 > li:nth-child(4n), .col-5 > li:nth-child(4n),.col-4 > li:nth-child(4n) {
	margin-right:var(--section-lr);
}

.col-6 > li:nth-child(3n), .col-5 > li:nth-child(3n),.col-4 > li:nth-child(3n) {
	margin-right:0;
}

.col-6 > li.box_white_notice:nth-child(3n), .col-5 > li.box_white_notice:nth-child(3n),.col-4 > li.box_white_notice:nth-child(3n) {
	margin-right:var(--section-lr);
}

.col-6 > li.box_white_notice:nth-child(2n), .col-5 > li.box_white_notice:nth-child(2n),.col-4 > li.box_white_notice:nth-child(2n) {
	margin-right:0;
}

.list_wrap.swipe_list_wrap > ul.col-5 > li:nth-child(3n),
.list_wrap.swipe_list_wrap > ul.col-6 > li:nth-child(3n),
.list_wrap.swipe_list_wrap > ul.col-4 > li:nth-child(3n) {
	margin-right:var(--section-lr);
}



.list_wrap.m_swipe_list_wrap > ul.col-5 > li:nth-child(3n),
.list_wrap.m_swipe_list_wrap > ul.col-6 > li:nth-child(3n),
.list_wrap.m_swipe_list_wrap > ul.col-4 > li:nth-child(3n) {
	margin-right:var(--section-lr);
}


.list_wrap .list_item.box_list {
	margin-bottom:20px;
}


.list_wrap .list_item.underline:last-child {border-bottom:1px solid var(--black10);}

.list_wrap .list-box {
	padding:var(--box-pd);
	border-radius:var(--border-radius);
	margin-bottom:16px;

	&:last-child:margin-bottom:0;

	&.box-gray {background:#f9f9f9;}

	.box-inner {display: flex; flex-direction: column;  gap: var(--gap10);}
}

.list-box .list-box-top { display: flex; justify-content: space-between; align-items: center;}
.list-box .list-box-mid { }
.list-box .list-box-mid .list-box-mid-tit-wrap {
	display: flex;
    align-items: center;
    gap: 10px;

	.bagde { padding: 4px 8px; border: 1px solid; border-radius: 8px;}
	.place-title {font: var(--type-semititle-b);}
}

.list-box .list-box-mid .list-box-mid-date {
	color: var(--black40);
    padding: 10px 0 0;

	p {font:var(--type-discript);}
}

.list-box  .list-box-bottom {
	display: flex;
    justify-content: space-between;
    padding: 12px 8px;
    border-top: 1px solid var(--black15);
    border-bottom: 1px solid var(--black15);
    margin-bottom: 13px;
}

.list-box .list-box-btn-wrap {display:flex; gap:var(--gap4); justify-content: flex-end;}






.item-list-wrap {
	overflow: auto;

	.item-list {min-width:720px;}
}

.item-list {


	.list-img {
		padding:20px 10px;
		width:180px;

		img {border-radius:8px;}


		.con-wrap {
			text-align: center;


			h4, .discript p {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			h4 {font:var(--type-body-16-b);}

			.discript {
				padding-top:2px;			
			}

		}
	}


	.list-con {
		padding:0 10px;

		.title {font:var(--type-discript); color:var(--black40);padding-bottom:5px;}

		.rank {

			.now {
				font:var(--type-bodytitle-b);
				display:inline-flex;

				&.rank-up {
					color:var(--color-1);

					&::after {
						content:'';
						width: 12px;
						height: 12px; 
						margin: 3px;
						background:url("../images/common/CaretUp.svg")no-repeat,center; 
					}
				}

				&.rank-down {
					color:var(--red-color);

					&::after {
						content:'';
						width: 12px;
						height: 12px; 
						margin: 3px;
						background:url("../images/common/CaretDown.svg")no-repeat,center; 
					}
				}

				&.rank-equal {
					color:var(--black);

					&::after {
						content:'';
						width: 12px;
						height: 12px; 
						margin: 3px;
						background:url("../images/common/Minus.svg")no-repeat,center; 
					}
				}
			}
		}		
	}

	.btn-wrap {

		.btn {
			padding:6px 10px;
		}
	}


	.controll-btn {
		padding:0 10px;

		.btn {padding:15px 10px;}
	}

	.status {
	
		&.ing {color:var(--color-1) !important;}
		&.finish {color:var(--red-color) !important;}
	}


	&.ads-point-list {
		padding:20px 0;

		.list-con-wrap {
			align-items: center;
			
			.list-con {width:-webkit-fill-available;}

			.list-con .con p {font:var(--type-bodytitle); color:var(--black);}

			.list-con.AdsPoint-list {
				.con {
					align-items: flex-start;
					gap:0;

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

				.title {padding-bottom:2px; text-align:left;}
			}
		}

	}

}






.tab {
	padding-bottom:20px;

	.tab_menu {
        min-width: 60px;
        padding: 8px 0;
	}

	&.btn-tab {
		gap:6px;

		.tab_menu {
			padding: 8px 10px;
			border-radius:8px;
		}
	}
}


input, textarea, select {
    padding: 10px 12px;
}

.btn {padding:13px;}




.bank-info-box {
	padding:20px;

	.bank-info {
		flex-wrap: wrap;
		gap:20px;

		.bank-info-item {
			width:calc(50% - 10px);
		}
	}
}





.mobile-flex-d-col {flex-direction: column;}
	
.youtube_wrap iframe {
    margin-bottom: 32px;
}

.middle_title {
    margin-bottom: 20px;
}

.body_wrap.w-420 .w-420_wrap .w-420-con-wrap .title_wrap .title_wrap_title {
    font-size: 24px;
}



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



.top-bg-con-wrap .top-bg-title-wrap,
.top-bg-con-wrap .top-bg-link-wrap {width:100%;}

.top-bg-con-wrap .top-bg-title-wrap {margin-top:8px;}


.top-bg-con-wrap .top-bg-title-wrap .top-bg-title {
    font-size: 24px;
    margin-bottom: 16px;
}



.top-bg-con-wrap .top-bg-link-wrap {
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top:20px;
}

.top-bg-img-wrap {width:160px;} 
.top-bg-img-wrap img {border-radius:50em;}


.top-bg-con-wrap .top-bg-link-wrap .top-bg-link {
    margin-bottom: 0;
}

.top-bg-con-wrap .top-bg-link-wrap .top-bg-like-comment_wrap {display:flex;margin-bottom: 8px;}

.top-bg-con-wrap .top-bg-link-wrap .top-bg-like .discript_title {
	display:none;
}


.top-bg-con-wrap .top-bg-link-wrap .top-bg-like .heart_btn {
	background: transparent;
    border: 0;
    padding: 0;
	margin-right:16px;
}

.top-bg-con-wrap .top-bg-link-wrap .top-bg-like .heart_btn p {
	display:none;
}

.heart_btn span {
    margin-left: 0;
}

.top-bg-con-wrap .top-bg-link-wrap .top-bg-link .link-btn {
    width: calc(25% - 4px);
}

.top-bg-con-wrap .top-bg-link-wrap .top-bg-link {max-width: 50%;margin-right:20px;}

.top-bg-con-wrap .top-bg-link-wrap .like_under_wrap {margin-top:0;}

.top-bg-comment_more {display:none;}

.top-bg-con-wrap .top-bg-link-wrap .like_under_wrap .like_under_title {display:none;}

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

.top-bg-con-wrap .top-bg-link-wrap .like_under_wrap .like_under_num {display:flex; color:var(--white);}
.like_under_num:before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background: url(../images/Comment_Alt_Lines.svg) center no-repeat;
    background-size: cover;
    margin-right: 4px;
	filter: invert(1);
}


.list_wrap .list_item.music-small .item_info_wrap .item_info .item_info_title .note_icon {display:none;}
.list_wrap .list_item.music-small .item_info_wrap .item_info {flex-direction: column;}
.list_wrap .list_item.music-small .item_info_wrap .item_info .item_info_title { width: 100%;}
.list_wrap .list_item.music-small .item_info_wrap .item_info .item_info_desc span {
    font-size: 11px;
    max-width: 100px;
}

.music_list_Controls .music_list_Controls_btn .btn {
    margin-bottom: 0;
    min-width: 40px;
    font-size: 12px;
    padding: 4px 6px;
    margin-right: 4px;
}

.music_list_Controls .check_wrap, .list_wrap .list_item .check_wrap { margin-right: 12px;}
.music_list_Controls .music_list_Controls_btn .btn:before {margin-right:0;}

.music_list_Controls {
    display: flex;
    padding: 0 0 20px;
}


.list_wrap .list_item.music-small { padding: 12px 0;}
.list_wrap .list_item { padding: 8px 0;}
.article_list_wrap .article_list {padding:16px 0;}










.tbl_attatch_ft .attach_file_row input[type=file] {
    padding: 12px;
}







.partner_wrap {
    flex-direction: column;
	margin-bottom: 0;
}

.partner_wrap > div {
	width: 100%;
	margin: 20px 0;
}

.partner_wrap .partner_title {
    padding-bottom: 8px;
}

.partner_wrap .partner_list {
    padding: 12px 0;
    border-bottom: 1px solid var(--black10);
	flex-direction: column;
}

.partner_wrap .partner_list .partner_list_cate {
    width: -webkit-fill-available;
    margin-bottom: 8px;
    margin-right: 0;
}

.partner_wrap .partner_list ul {
    width: -webkit-fill-available;
}

.partner_wrap .partner_list ul > li {
	padding-bottom: 8px;
	line-height: 1.65em;
}





















/******* 문화일정 부분 *******/
.schedule-wrap {}


.schedule-list {
	li .sun, li .holiday {
		color:red;
	}

	li .sat {
		color:var(--main-color);
	}

	li .today span {
		color:var(--white);
		background:var(--main-color);
	}

}


.schedule-list > ul {
	flex-direction: column;
}

.schedule-list > ul > li {
	width: 100%;
	display: flex;
	border-width:1px 0 0 0;

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


	&.last-month span, &.next-month span {
		color:var(--black20);
	}

	&.last-month a, &.next-month a {
		background:var(--black20);
		color:var(--white);
	}
}

.schedule-list ul li:nth-child(7n) {
	border-width: 1px 0 0 0;
}

.schedule-list .schedule-head {display: none;}



.schedule-list .schedule-body {border-bottom: 1px solid var(--black10);}

.schedule-list .schedule-body > li {
	min-height:100px;
	padding: 16px 0;
}


.schedule-list .schedule-body .mobile-date-wrap {
	padding:0;
	width: 15%;
	margin-right:5%;
	display: flex;
	flex-direction: column;
	align-items: center;

	> span {
		display: block;
		text-align: center;
		color: var(--black20);
	}

	.mobile-date {
		margin-top: 4px;

		> span {
			font-size: var(--fsize-body-title);
		}
	}

}

ul.schedule-item-list {width:calc(100% - 20%); padding: 4px 0;}



.schedule-item-list > li {
	font-size: inherit;
	margin-bottom: 4px;
	
	&:last-child {margin-bottom:0;}

	a {
		padding: 2px 8px;
	}

}


.title-wrap {
    .mc-title {
        flex-wrap: wrap;
    }
}








	
	


:root {
	--lmb-width:100%;

	--section-lr:12px;
	--section-tb:50px;


	--section-tb-inver:-50px;
	--section-lr-inver:-12px;

	--gap20:10px;

	--mobile-size : 50%;

}





.page_lmb_wrap {
	display: flex;
	flex-direction: column;
}

.page_lmb_wrap .container {width:100%;margin-left:0;}



.mobile-816-flex-d-col {flex-direction: column;}


.col-2 > div {width:100%;}

.col-6 > li, .col-5 > li,.col-4 > li,.col-3 > li {
	width:calc((100% - (var(--section-lr)*1)) / 2);
}

.col-6 > li.box_white_notice, .col-5 > li.box_white_notice,.col-4 > li.box_white_notice {
	width:100%;
	margin-right:0;
}

.col-6 > li.box_white_notice, .col-5 > li.box_white_notice,.col-4 > li.box_white_notice {
	width:100%;
	margin-right:0;
}

.col-6 > li.box_white_notice:nth-child(n+2), .col-5 > li.box_white_notice:nth-child(n+2),.col-4 > li.box_white_notice:nth-child(n+2) {
	margin-top:12px
}

.col-6 > li.box_white_notice:nth-child(n+3), .col-5 > li.box_white_notice:nth-child(n+3),.col-4 > li.box_white_notice:nth-child(n+3) {
	margin-top:12px
}

.col-6 > li.box_white_notice:nth-child(3n), .col-5 > li.box_white_notice:nth-child(3n),.col-4 > li.box_white_notice:nth-child(3n) {
	margin-right:0;
}


.list_wrap.m_swipe_list_wrap > ul.col-6 > li,
.list_wrap.m_swipe_list_wrap > ul.col-5 > li,
.list_wrap.m_swipe_list_wrap > ul.col-4 > li {
	width:calc((100vw - (var(--section-lr)*1)) / 2.5);
}

.col-6 > li:nth-child(3n), .col-5 > li:nth-child(3n) ,.col-4 > li:nth-child(3n) {
	margin-right:var(--section-lr);
}

.col-6 > li:nth-child(2n), .col-5 > li:nth-child(2n),.col-4 > li:nth-child(2n) {
	margin-right:0;
}


.row-col-2, .row-col-3, .row-col-4, .row-col-5, .row-col-6, .row-col-7 {
	flex-direction: column !important;
}



.swipe_list_wrap .col-6 > li:nth-child(2n) {
	margin-right:var(--section-lr);
}

.list_wrap.swipe_list_wrap > ul.col-6 > li {
	width:calc((100vw - (var(--section-lr)*3)) / 3.5);
}

.list_wrap.m_swipe_list_wrap > ul.col-5 > li:nth-child(2n),
.list_wrap.m_swipe_list_wrap > ul.col-6 > li:nth-child(2n) {
	margin-right:var(--section-lr);
}


.mobile-flex-d-col {flex-direction: column;}
	
.txt_ellipsis.line_3 {
    -webkit-line-clamp: 2;
}



.middle_title .middle_title_left .middle_title_semi .middle_title_disc {font-size:var(--fsize-discript);}


.article_list_wrap .article_list.box_white_notice .article_title,
.article_list_wrap .article_list.box_white_notice .article_con {
    margin-bottom: 8px;
}

.btn {
	font-size:12px;
	padding:12px 10px;

	> img { transform: scale(0.75);}
}



.img-wrap {

	&.img-180 {
		width:-webkit-fill-available;
	}

	&.img-150 {
		width:-webkit-fill-available;
	}
}



.music_list_Controls {
    padding: 0 0 12px;
}

.music_list_Controls .music_list_Controls_btn {
    flex-wrap: wrap;
}

.music_list_Controls .music_list_Controls_btn .btn {
    margin-bottom: 4px;
}








.inputform fieldset .row input.pilsu_input {
    background: url(../images/Check_on.svg) 12px 50% no-repeat;
    padding: 12px 16px 12px 32px;
}








/********** 음악 상세 페이지 부분 ***********/
.score_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.score_wrap img {
	width: -webkit-fill-available;
    margin-bottom: 16px;
}

/********** 음악 상세 페이지 부분 end ***********/









.search-title {
	font-size: var(--fsize-middle-title);
    font-weight: 800;
    margin-bottom: 24px;
}






.schedule-date-select {
	padding: 28px 16px;
	justify-content: flex-start;
}



.paging_navigation {
	padding-top:40px;

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

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

}


.input_wrap {
    padding-bottom: 10px;

	&.input_wrap-row {
        flex-wrap: wrap;

		.TextFields {width:calc(50% - (8px / 2));}
    }
}

.TextFields.max-w-50p {max-width:-webkit-fill-available;}


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


	&.table-title {

		.title-right {
			flex-wrap: wrap;
			gap:8px;

			.btn {
				min-width: 30px;
				padding: 4px 8px;
				font:var(--type-discript);
			}
		}

		&:has(.title-right) {
            flex-wrap: wrap;
			gap:10px;
		}
	
	}
}




.tab.btn-tab.ads-status-tab {flex-direction:column;}


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

	.drop-area {
		padding: 15x;
		margin:0 0 8px;
		border: 1px dashed #ccc;
	}
	

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

	.upload-list {

		.upload-item {
			padding:5px 0;
			display: flex;
			justify-content: space-between;
			
			span {
				width:calc(100% - 70px);
				white-space: nowrap;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
}


.pc-only {display:none;}
.m-only {display:block;}



.reciept-status-pop {
	transform: translate(-40%, 60%);
	
	ul > li {width: -webkit-fill-available; white-space: nowrap;}
}
.grid {
    &.grid-col-2 {
        grid-template-columns: repeat(1, 1fr);
    }

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

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


}


#notice-popup-overlay .notice-popup-con {
	max-width:85vw;
}


#wrap {
    display: flex;
    max-width: 980px;
    margin: 0 auto;
	gap:20px;
	height:100dvh;
	overflow:hidden;
}

.m-left-side {
	width: calc(100% - var(--mobile-size));
	background: none;
    position: sticky;
    height: fit-content;
    top: 0;
}

.m-left-side + section {
	width:var(--mobile-size);
	border: 2px  solid var(--black10);
	/*border-radius:var(--border-radius);*/
	box-sizing: border-box;
    overflow: hidden;
	position: relative;
	height: 100dvh;
}

.m-left-side + section:has(>.nav.active) {
    overflow: hidden;
}


















/* ── 오퍼월 상단 레이아웃 스타일 ── */
.on-header-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.on-logo-section {
    flex: 1 1 300px;
    text-align: center;
}

.on-logo-img {
    max-width: 340px;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
}

.on-logo-sub {
    
    font: var(--type-subtitle-b);
    letter-spacing: -0.5px;
    background: rgb(238, 174, 202);
    background: linear-gradient(90deg, rgb(98 45 163) 0%, rgb(208 98 64) 50%, rgb(99 219 29) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
}

.on-apps-section {
    flex: 2 1 450px;
}

/* 앱 아이콘 그리드 구성 */
.app-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;

	&.grid-8 {grid-template-columns: repeat(8, 1fr);}
}

.on-header-row {gap:40px;}


.app-icon-item {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background-color: #f5f5f7;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.3s ease;
}

.app-icon-item:hover {
	transform: translateY(-4px);
    box-shadow: 1px 1px 10px #00000038;
    transition: all 0.3s ease;
}

.app-icon-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 미션 참여 방법 (동영상 스와이프 영역) ── */
.mission-video-section {
    margin-bottom: 35px;
}

.mission-title-wrap {
    margin-bottom: 15px;
}

.mission-title-wrap h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #222222;
}

/* 스와이프 가로 스크롤 컨테이너 */
.swipe-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 15px;
}

/* 크롬/사파리 스크롤바 커스텀 */
.swipe-container::-webkit-scrollbar {
    height: 6px;
}
.swipe-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.swipe-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.swipe-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.swipe-wrapper {
    display: flex;
    gap: 16px;
}

/* 카드 크기 비율 조절 (종횡비 3:4 수준으로 디자인) */
.video-card {
    flex: 0 0 calc(20% - 11px);
    min-width: 260px;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    background-color: #4A77BE;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
    aspect-ratio: 9 / 16;
    display: flex;
    flex-direction: column;
	flex: 0 0 45%; /* 모바일에서 다음 슬라이드가 일부 보이도록 설정 */
}


/* 비디오 영역 스타일 */
.video-element-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
}

.video-element-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 동영상 내부 텍스트 라벨 오버레이 */
.video-label-overlay {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none; /* 클릭 이벤트 방해 방지 */
}

.video-label-text {
    display: inline-block;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}



.m-left-title {
	font:var(--type-semititle-b);
}

.left-top-banner img {height:39dvh; max-height: 360px; width:100%; border-radius:var(--border-radius); object-fit:cover;}

.m-left-apps {

}

.m-left-apps .m-left-apps-txt {
	text-align:center;
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:16px 0 12px;

	h3 {font:var(--type-bodytitle-b);}
	p {font:var(--type-body);}
}



.slider {
  width: 100%;
  overflow: hidden; /* 넘치는 아이콘 숨기기 */
  position: relative;
  background: #fff;
}

.slide-track {
  display: flex;
  width: calc(70px * 20); /* (아이콘너비 + 마진) * 전체 아이콘 개수 */
  animation: scroll 20s linear infinite; /* 20초 동안 무한 반복 */
  gap:var(--gap10);
}

.slide-track +.slide-track {margin-top:10px;}

.slide-track.slide-right {
  animation: scroll-r 20s linear infinite; /* 20초 동안 무한 반복 */
}

.slide {
  width: fit-contents;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide img {
  width: 60px; /* 아이콘 크기 조절 */
  border-radius:8px;
  border: 1px solid var(--black5);
    box-sizing: border-box;
}

/* 핵심 애니메이션: 원래 세트 크기만큼 왼쪽으로 이동 */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-70px * 10)); } /* 원래 아이콘 개수만큼 이동 */
}

@keyframes scroll-r {
  0% { transform: translateX(calc(-70px * 10)); }
  100% { transform: translateX(0)); } /* 원래 아이콘 개수만큼 이동 */
}


.slide-left-hidden, .slide-right-hidden {
	height: 100%;
    width: 20px;
    position: absolute;
    z-index: 9999;
    top: 0;
}

.slide-left-hidden { background: linear-gradient(90deg, white, transparent);}
.slide-right-hidden { background: linear-gradient(-90deg, white, transparent);    right: 0;}



.youtube-bg {
	height: -webkit-fill-available !important;
    width: -webkit-fill-available !important;
    z-index: 0 !important;
    position: inherit !important;
    aspect-ratio: 2 / 1;
    border-radius: var(--border-radius);
	display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;

	iframe {
		top: initial !important;
		left: initial !important;
		transform: none !important;
		position: initial !important;
		opacity: 1 !important;		
	}

}


.pop-up {
    position: absolute;
}

.bg_logo_images {
	display: inline-block;
    position: absolute;
    bottom: 0;
    opacity: 0.1;
    right: 5%;
    z-index: -9;
}

.kakao-btn-flt {
	display: inline-block;
    position: absolute;
    top: 10px;
    right: 5%;
    z-index: -9;
    padding: 10px;
    background: #f6e853;
    border-radius: 50em;
	
	img {width:48px;}


}





/* 공지사항 전체 바 컨테이너 (타원형 알약 레이아웃) */
.notice-ticker-bar {
    margin: 0 auto 16px auto;
    background-color: white;
    border: 1px solid var(--black10);
    border-radius: var(--border-radius); /* 타원 형태로 고급스럽게 정렬 */
    padding: 6px 16px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.02);
}

/* 좌측 파란색 공지사항 뱃지 */
.notice-badge {
    background-color: var(--color-1); /* 브랜드 테마 블루 매칭 */
    color: white;
    font:var(--type-discript-b);
    padding: 4px 12px;
    border-radius: var(--border-radius);
    margin-right: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 세로 롤링 스와이프를 위한 높이 고정 래퍼 */
.notice-swiper-container {
    flex: 1;
	height: 24px; /* 단일 한 줄 노출을 위한 고정 높이값 */
    overflow: hidden;
    position: relative;
}

/* 개별 슬라이드 내 링크 정렬 */
.notice-slide-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.notice-link {
    font: var(--type-body-b);
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis; /* 글자가 넘치면 말줄임표 처리 */
    white-space: nowrap;
    transition: color 0.15s ease;
}

.notice-link:hover {
    color: #5496e4;
}










/* 뉴스 피드 리스트 정렬 */
.insight-news-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 뉴스 개별 아이템 구조 (클릭 가능 링크형태) */
.insight-news-item {
    display: flex;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}
.insight-news-item:hover {
    opacity: 0.85;
}

/* 좌측 썸네일 이미지 영역 */
.insight-thumbnail-box {
    width: 120px;
    height: 78px;
    border-radius: 10px; /* 라운드 마감 처리 */
    overflow: hidden;
    flex-shrink: 0;
    background-color: #f1f5f9;
}
.insight-thumbnail-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 우측 텍스트 정보 수직 정렬 영역 */
.insight-text-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding: 2px 0;
}

/* 기사 제목 (최대 2줄 제한 및 말줄임표 처리) */
.insight-news-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2줄 초과 시 말줄임 적용 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}

/* 작성자 및 일시 메타 영역 */
.insight-news-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    gap: 6px;
}
.insight-meta-divider {
    color: #cbd5e1;
    font-size: 10px;
}





.cash-page-wrp {
	padding:20px 0;

	h3 {font:var(--type-title-b); margin-top:8px;}

}

.cash-page-wrp .input_title {
	font: var(--type-bodytitle-b);
}

.cash-page-wrp .charge-money .charge-btn {
	border-radius:var(--border-radius);
	background:white;
	color:var(--color-1);
	border:1px solid var(--color-1);
	padding:4px 16px;
}

.point-list-wrp {
	padding-top:40px;
}

.point-list-wrp ul {

}


.point-list-wrp ul .point-item {
	display:flex;
	justify-content: space-between;
    align-items: center;
	padding:16px 0;
	border-bottom: 1px solid var(--black10);

	&:first-child {padding:0 0 16px 0;}
	&:last-child {border-bottom:0;}

	.point-item-left {
		display:flex;
		align-items: center;
        gap: var(--gap10);
	}
}

.point-list-wrp ul .point-item .point-item-left-title  {
	display: flex;
    flex-direction: column;

	p {font:var(--type-body-b);}
	span {font:var(--type-discript); color:var(--black60);}
}

.point-list-wrp ul .point-item .text-point {
	font:var(--type-semititle-b);
	color:var(--color-1);
}








/* 게이트웨이 내부 전용 콘텐츠 스타일 */
.gateway-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100dvh - 250px); /* 모바일 게이트 카드의 높이값 확보 */
    box-sizing: border-box;
	padding:40px 0 20px 0;
}


/* 타이틀 및 서브 설명 텍스트 영역 */
.gateway-content {
    margin-bottom: auto; /* 하단 버튼 그룹을 자연스럽게 하단 배치 */
}
.gateway-title {
    font: var(--type-semititle-b);
    margin: 0 0 16px 0;
    word-break: keep-all;
}

/* 추천인 입력 3,000캐시 형광펜 노란색 하이라이트 효과 */
.gateway-title .highlight {
    background-color: #ffe600; /* 설계도의 노란색 형광펜 매칭 */
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
}

/* 서브 설명 (회색조 뮤티드 스타일) */
.gateway-desc {
    font: var(--type-body);
    color: var(--black40);
    word-break: keep-all;
}



.nav-tab-box {

}

.nav-tab-box .btn-tab {
	display: flex;
    background-color: #f1f9f2;
    border-radius: var(--border-radius);
    padding: 4px;
    margin-bottom: 16px;
    border: 1px solid #f1f9f2;
}

.nav-tab-box .btn-tab .tab_menu {
	flex: 1;
    border: none;
    outline: none;
    background: none;
    font: var(--type-body-b);
    color: var(--black60);
    padding: 12px 0;
    border-radius: calc(var(--border-radius) - 4px);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;

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














/* [요구사항 반용] 이전 tab-segment-control 탭 바 스타일 */
.tab-segment-control {
    display: flex;
    background-color: #f1f5f9;
    border-radius: 16px;
    padding: 4px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

/* 탭 전환 세그먼트 버튼 영역 */
.tab-segment-control {
    display: flex;
    background-color: #f1f9f2;
    border-radius: var(--border-radius);
    padding: 4px;
    margin-bottom: 16px;
    border: 1px solid #f1f9f2;
}

/* 개별 탭 버튼 기본 스타일 */
.tab-btn {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font: var(--type-body-b);
    color: var(--black60);
    padding: 12px 0;
    border-radius: calc(var(--border-radius) - 4px);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

/* 활성화된 탭 스타일 (설계도의 전문적인 스카이블루 계열 재현) */
.tab-btn.active {
    background-color: var(--color-1);
    color: white;
}

/* 탭 콘텐츠 패널 기본 제어 */
.tab-content-panel {
    display: none;
}
.tab-content-panel.active {
    display: block;
}

/* 동적 서브타이틀 본문 */
.subtitle-wrap {
    text-align: center;
    margin-bottom: 24px;
    min-height: 48px; /* 문구 줄바꿈 시 높이 틀어짐 방지용 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-subtitle {
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    word-break: keep-all;
}

/* 탭 패널 기본 숨김 제어 */
.tab-content-panel {
    display: none;
}
.tab-content-panel.active {
    display: block;
}

/* 3열 격자(Grid) 카드 구조 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;

}

/* ★ 핵심 설정: 이미지 카드 3:4 비율 아웃라인 및 입체감 표현 */
.image-card {
    aspect-ratio: 3 / 4; /* 가로 3 : 세로 4 고정 비율 적용 */
    background: #0000008c; /* 설계도 전용 파란색 그라데이션 */
    border-radius: var(--border-radius); /* 둥근 코너 값 정밀 반영 */
	overflow: hidden;
	position: relative;
	

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

	.image-card-con {
		position: absolute;
		bottom: 0;
		background: linear-gradient(45deg, black, transparent);
		padding: 10px;
		width: -webkit-fill-available;
	}

	.image-card-con p {
		color: white;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		
		width: -webkit-fill-available;
	}
}
.image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.22);
}
.image-card span {
    display: block;
    font-size: 11px;
    opacity: 0.8;
    margin-top: 4px;
    font-weight: 500;
}


.table-wrap {overflow:auto; max-height:65dvh;}