/* 템플릿 메인페이지 */
.template{
	display:flex;
	flex-direction:row;
	position:relative;
	user-select:none;
}

.template-section{
	height:2000px;
}

.searchbar-section{
	left:0;
	right: var(--scrollbar-width);
	top: 0;
	display:flex;
	flex-direction:column;
	padding:50px 116px 50px 116px;
	padding-top: calc(var(--template-header-total-height) + 50px);
	position:fixed;
	gap:15px;
	z-index:12;
	background:#fff;
	box-sizing:border-box;
	min-width:280px;
	will-change: transform;
	transition: transform 0.3s ease-in-out;
	transform: translateY(0);
	
	& .searchbar{
		position:relative;
		width:100%;
		
		& #mainSearchField{
			height:60px;
			
			& i:first-child::after{
				content:"";
				display:block;
				width:20px;
				height:20px;
				background:url("../../images/template/Search_Icon.png") no-repeat center / cover;
				background-position-y:0px;
			}
			
			& input:focus{
				border:none;
				outline:none;
				
				&::placeholder{
					visibility:hidden;
				}
			}
			
			& i:last-child::after{
				content:"";
				display:block;
				width:20px;
				height:20px;
				background:url("../../images/template/Search_Icon.png") no-repeat center / cover;
				background-position-y:-20px;
			}
		}
	}
}

/* 템플릿 헤더 상태별 검색 영역 위치 */
body.template-header-partial .searchbar-section{
	padding-top: calc(var(--template-header-height) + 30px);
	padding-bottom: 20px;
}
body.template-header-hidden .searchbar-section{
	padding-top: 30px;
	padding-bottom: 20px;
}

& .favorite-btn{
	height:20px;
	align-items:center;
	justify-content:flex-end;
	color:#3F4248;
	font-size:14px;
	font-weight:500;
	line-height:140%;
	letter-spacing:-0.14px;
	cursor:pointer;
	
	& > button{
		gap:2px;
		border:none;
		color:#3F4248;
		font-size:14px;
		font-weight:500;
		
		& > i{
			width:20px;
			height:20px;
			background:url("../../images/template/Link_Favorites.png") no-repeat center / contain;
		}
		
		&:hover{
			background-color:transparent;
		}
	}
	
	&::after{
		content:"";
		width:9px;
		height:13px;
		background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226%22%20height%3D%229%22%20viewBox%3D%220%200%206%209%22%20fill%3D%22none%22%3E%0A%3Cpath%20d%3D%22M0.665844%20-3.9139e-07C0.829409%20-3.77091e-07%201.02891%200.0227371%201.14539%200.140211L4.96191%204.03074C5.07715%204.15074%205.14282%204.31116%205.14282%204.47789C5.14282%204.64463%205.07715%204.80632%204.96191%204.92505L1.14539%208.81558C1.02891%208.93305%200.8703%209%200.706735%209C0.584061%208.95832%200.382082%208.93179%200.265604%208.81179L0.178865%208.7221C-0.0602874%208.47453%20-0.0590481%208.07789%200.181343%207.83158L3.47124%204.47789L0.181344%201.12295C-0.0602868%200.876631%20-0.0602867%200.478736%200.180105%200.231158C0.296583%200.112422%200.528301%200.0303159%200.665844%20-3.9139e-07Z%22%20fill%3D%22%233F4248%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat center;
		margin-left:10px;
	}
}

.actionbar-wrapper{
	display:flex;
	gap:8px;
	align-items:center;
	
	& .actionbar-info{
		color:#70777F;
		font-size:13px;
		font-weight:500;
		line-height:140%;
	}
	
	& .action-btn > button{
		gap:5px;
		width:108px;
		height:30px;
		border-radius:30px;
		border:1px solid #E0E1E5;
		background:#FFF;
		
		color:#70777F;
		font-size:14px;
		font-weight:400;
		line-height:140%;
		text-align:center;
		
		transition:background-color .2s ease, color .2s ease;
		
		&:hover{
			background:#F3F5F8;
			color:#3F4250;
			
			i{
				filter:brightness(0.5);
			}
		}
		
		i{
			width:16px;
			height:16px;
			transition:filter .2s ease;
		}
	}
	
	#keywordSearchBtn button{
		i{
			background:url("../../images/template/Keyword_Search.png") no-repeat center / contain;
		}
	}
	
	#templateRequestBtn button{
		i{
			background:url("../../images/template/Template_Request.png") no-repeat center / contain;
		}
	}
	
}

.autoWordPopOver{
	position:absolute;
	z-index:12;
	display:flex;
	width:100%;
	padding:20px;
	flex-direction:column;
	align-items:flex-start;
	border-radius:15px;
	border:1px solid #E0E1E5;
	background:#FFF;
	box-shadow:3px 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.searchPopOver{
	position:absolute;
	z-index:12;
	display:flex;
	width:100%;
	padding:20px;
	flex-direction:column;
	align-items:flex-start;
	gap:25px;
	border-radius:15px;
	border:1px solid #E0E1E5;
	background:#FFF;
	box-shadow:3px 4px 15px 0 rgba(0, 0, 0, 0.15);
	
	.searchPopOverWrapper,
	.currentSearchWrapper,
	.recommendTagsWrapper{
		display:flex;
		flex-direction:column;
		align-items:flex-start;
		width:100%;
		gap:12px;
		
		& .noKeywordsLabel{
			display:flex;
			padding:6px 15px;
			justify-content:center;
			align-items:center;
			color:#AAACB0;
			font-size:15px;
			font-weight:500;
			line-height:150%;
			letter-spacing:-0.15px;
		}
	}
	
	.searchPopOverWrapper{
		position:relative;
		
		.slide-controls button{
			width:30px;
			height:30px;
			bottom:63px;
		}
	}
	
	.searchPopOverHeader{
		display:flex;
		align-items:center;
		gap:10px;
		color:#20232A;
		font-size:16px;
		font-weight:500;
		line-height:150%;
		letter-spacing:-0.16px;
		
		#currentSearchDelete{
			display:flex;
			padding:2px 5px;
			justify-content:center;
			align-items:center;
			gap:2px;
			border-radius:20px;
			border-color:transparent;
			
			color:#70777F;
			font-size:13px;
			font-weight:500;
			line-height:140%;
			text-decoration-line:underline;
			text-underline-position:from-font;
			
			&:hover{
				color:#FE6767;
			}
		}
	}
	
	.recommendTemplatesList.swiper{
		height:157px;
		max-width:100%;
		width:fit-content;
		margin-left:unset !important;
		
		> .swiper-wrapper{
			& > .swiper-slide{
				width:fit-content;
				height:157px;
				border-radius:7px;
				border:1px solid rgba(21, 25, 32, 0.05);
				
				& > img{
					height:157px;
					width:auto;
				}
				
				&:not(:last-child){
					margin-right:15px;
				}
			}
		}
	}
	
	#currentSearchKeywords,
	#recommendTags{
		width:100%;
		flex-wrap:wrap;
		gap:10px;
		
		& > span{
			max-width:100%;
			
			& label{
				padding:6px 15px;
				white-space:nowrap;
				font-size:15px;
				line-height:150%;
				letter-spacing:-0.15px;
				text-overflow:ellipsis;
				overflow:hidden;
			}
		}
	}
}

.headingBreadcrumb{
	display:none;
	width:100% !important;
	padding:10px 0 10px 0;

	& > div{
		column-gap: 10px;
	}
}

.filterbar-section{
	display:flex;
	align-items:center;
	justify-content:space-between;
	
	.actionbar{
		position:relative;
	}
	
	& .filter-wrapper{
		display:flex;
		gap:12px;
		align-items:center;
	}
	
	& .filter-bar{
		display:flex;
		gap:12px;
		
		& #allFilter{
			display:flex;
			height:42px;
			padding:9px 15px;
			justify-content:center;
			align-items:center;
			gap:10px;

			border-radius:7px;
			border:1px solid #E0E1E5;
			background:#FFF;

			color:#70777F;
			font-size:14px;
			font-weight:500;
			line-height:140%;

			&:hover{
				background:#F3F5F8;
			}
			
			& > i{
				background-size:cover;
				width:16px;
				height:16px;
			}
		}
		
		& .comboBox{
			& > div{
				position:absolute;
			}
			
			&#purposeCombo > div{
				width:228px;

				& > div{
					gap: 10px;
				}

				& .groupWrapper > hr{
					margin-top: 10px;
				}

				& .groupHeader > label > span{
					display: flex;
					align-items:center;
					gap: 5px;

					&::before{
						display: flex;
						align-items: center;
						justify-content: center;
						font-style: normal;
						background-position: center;
						background-size: 100%;
						content:"";
						width: 24px;
						height: 24px;
						background-image: url(/common/responsive/images/template/Small_Template3DIcon.png);
					}
				}

				& .groupWrapper:nth-child(1) .groupHeader > label > span::before{
					background-position-y:-72px;
				}

				& .groupWrapper:nth-child(2) .groupHeader > label > span::before{
					background-position-y:-96px;
				}

				& .groupWrapper:nth-child(3) .groupHeader > label > span::before{
					background-position-y:-144px;
				}

				& .groupWrapper:nth-child(4) .groupHeader > label > span::before{
					background-position-y:-120px;
				}

				& .groupWrapper:nth-child(5) .groupHeader > label > span::before{
					background-position-y:-48px;
				}

				& .groupWrapper:nth-child(6) .groupHeader > label > span::before{
					background-position-y:0;
				}

				& .groupWrapper:nth-child(7) .groupHeader > label > span::before{
					background-position-y:-24px;
				}
			}

			&#purposeDetailCombo > div{
				width: fit-content;
			}
			
			&#usageCombo > div{
				width:158px;
				gap:0px;
			}
			
			&#styleCombo > div{
				width:224px;

				& > div{
					gap: 10px;
				}

				& .groupWrapper > hr{
					margin-top: 10px;
				}
			}
			
			&#colorCombo > div{
				width:234px;
				gap:0px;
			}
		}
	}
	
	& .reset-btn{
		display:none;
		
		& > button{
			width:65px;
			height:22px;
			justify-content:center;
			gap:2px;
			border-radius:20px;
			border:none;
			color:#70777F;
			font-size:13px;
			font-weight:500;
			line-height:140%;
			
			& > i{
				width:17px;
				height:17px;
			}
			
			&:hover{
				background-color:#F3F5F8;
				color:#3F4248;
			}
		}
	}
}

.sidebar{
	height:calc(100% - 114px);
	position:fixed;
	padding-top:114px;
	top:0;
	left:0;
	width:388px;
	height:-webkit-fill-available;
	background-color:#fff;
	z-index:13;

	& .dragClose{
		width: 100%;
		height: 28px;
		display: none;
		cursor: pointer;

		&::before{
			display:block;
			position:relative;
			top:8px;
			content:"";
			width: 32px;
			height: 4px;
			border-radius: 50px;
			background: #D9D9D9;
		}
	}
}

.filterContents{
	display:flex;
	height:calc(100% - 115px);
	flex-direction:column;
	gap:20px;
	padding-top:30px;
	margin-left:28px;
	
	& > div{
		width:100%;
	}
	
	#filterTabs{
		padding-right:28px;
	}
	
	#allFilterSearchField{
		height:45px;
		gap:10px;
		
		& input:focus, input:focus{
			border:none;
			outline:none;
		}
		
		& i:first-child::after{
			content:"";
			display:block;
			width:20px;
			height:20px;
			background:url("../../images/template/Search_Icon.png") no-repeat center / cover;
			background-position-y:0px;
		}
		
		& i:last-child::after{
			content:"";
			display:block;
			width:20px;
			height:20px;
			background:url("../../images/template/Search_Icon.png") no-repeat center / cover;
			background-position-y:-20px;
		}
	}

	#allFilterPurposeList{
		& > div > div > div > div > label > span{
			display: flex;
			align-items:center;
			gap: 5px;

			&::before{
			display: flex;
			align-items: center;
			justify-content: center;
			font-style: normal;
			background-position: center;
			background-size: 100%;
			content:"";
			width: 24px;
			height: 24px;
			background-image: url(/common/responsive/images/template/Small_Template3DIcon.png);
			}
		}

		& #purpose_0 > div > label > span::before{
			background-position-y:-72px;
		}

		& #purpose_1 > div > label > span::before{
			background-position-y:-96px;
		}

		& #purpose_2 > div > label > span::before{
			background-position-y:-144px;
		}

		& #purpose_3 > div > label > span::before{
			background-position-y:-120px;
		}

		& #purpose_4 > div > label > span::before{
			background-position-y:-48px;
		}

		& #purpose_5 > div > label > span::before{
			background-position-y:0;
		}

		& #purpose_6 > div > label > span::before{
			background-position-y:-24px;
		}
	}
}

.tabPanel{
	display:flex;
	flex-direction:column;
	gap:20px;
	overflow-y:scroll;
	
	& > *{
		width:calc(100% - 14px);
	}
	
	& label{
		height:42px;
		font-size:16px;
	}
}

.filterFooter{
	display:flex;
	bottom:0;
	width:332px;
	height:50px;
	padding:15px 28px 20px 28px;
	
	& > div{
		width:100%;
	}
	
	& > div:first-child > button{
		width:85px;
		height:50px;
		
		border-radius:7px;
		border:1px solid #E0E1E5;
		background:#FFF;
		
		color:#3F4250;
		font-size:18px;
		font-weight:500;
		line-height:140%;
	}
	
	& div:last-child > button{
		width:235px;
		height:50px;
		border-radius:7px;
		background:#1C1D1F;
		
		color:#FFF;
		font-size:18px;
		font-weight:500;
		line-height:140%;
	}
}

.content-section{
	margin-top:217px;
}

.mainbanner-section{
	display:flex;
	justify-content:center;
	height:293px;
	
	.banner-wrapper{
		position:relative;
		
		.slide-controls{
			button{
				bottom:126px;
			}
		}
	}
	
	& .banner-wrapper,
	& .banner-list{
		max-width:100%;
		width:fit-content;
		height:100%;
	}
	
	.thumbnail-wrapper{
		border-radius: 15px;
		
		&:not(:last-child){
			margin-right:25px;
		}
	}
}

.subbanner-section{
	margin-bottom:50px;
	display:flex;
	height:293px;
	
	& .banner-wrapper{
		width:100%;
		height:100%;
		display:flex;
		flex-direction:column;
	}
	
	& .banner-header{
		color:#20232A;
		font-size:20px;
		font-weight:600;
		line-height:150%;
		letter-spacing:-0.2px;
	}
	
	& .banner-list{
		width:100%;
		height:100%;
		
		.sub-banner{
			border-radius:15px;
		}
	}
}

.templateCategory-section{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top:70px;
	width:100%;
	
	.category-desktop{
		display:flex;
		gap:12px;
		justify-content:center;
		flex-wrap:wrap;
		
		& > div > button{
			display:flex;
			width:160px;
			height:60px;
			justify-content:center;
			align-items:center;
			gap:5px;
			flex-shrink:0;
			border-radius:100px;
			border:1px solid #E0E1E5;
			background:#FFF;
			
			color:#20232A;
			font-size:17px;
			font-weight:500;
			line-height:140%;
			
			& i{
				width:24px;
				height:24px;
			}
			
			&:hover{
				border-radius:50px;
				background:linear-gradient(180deg, #FFF 0%, #F3F5F8 100%);
			}
		}
		
		& > div:nth-child(1) > button > i{
			background-position-y:-72px;
		}
		
		& > div:nth-child(2) > button > i{
			background-position-y:-96px;
		}
		
		& > div:nth-child(3) > button > i{
			background-position-y:-144px;
		}
		
		& > div:nth-child(4) > button > i{
			background-position-y:-120px;
		}
		
		& > div:nth-child(5) > button > i{
			background-position-y:-48px;
		}
		
		& > div:nth-child(6) > button > i{
			background-position-y:0;
		}
		
		& > div:nth-child(7) > button > i{
			background-position-y:-24px;
		}
	}
	
	.category-mobile{
		display:none;
		align-items:center;
		width:100%;
		height:fit-content;
		position: relative;
		
		.swiper{
			width:100%;
			
			.swiper-wrapper{
				width:fit-content;
				max-width:100%;
				padding:20px 16px;
				
				.swiper-slide{
					width:70px;
					
					button{
						display:flex;
						width:100%;
						flex-direction:column;
						align-items:center;
						gap:5px;
						border:unset;
						color:#20232A;
						font-weight:500;
						
						i{
							display:flex;
							position:relative;
							width:50px;
							height:50px;
							justify-content:space-between;
							align-items:center;
							border-radius:50px;
							border:1px solid #E0E1E5;
							background:#FFF;
							
							&::after{
								content: "";
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								
								width: 20px;
								height: 20px;
								background:url("../../images/template/Small_Template3DIcon.png") no-repeat center / cover;
							}
						}
						
						&:hover{
							background:unset;
							
							i{
								background:linear-gradient(180deg, #FFF 0%, #F3F5F8 100%);
							}
						}
					}
				}
				
				& > div:nth-child(1) > button > i::after{
					background-position-y:-60px;
				}
				
				& > div:nth-child(2) > button > i::after{
					background-position-y:-80px;
				}
				
				& > div:nth-child(3) > button > i::after{
					background-position-y:-120px;
				}
				
				& > div:nth-child(4) > button > i::after{
					background-position-y:-100px;
				}
				
				& > div:nth-child(5) > button > i::after{
					background-position-y:-40px;
				}
				
				& > div:nth-child(6) > button > i::after{
					background-position-y:0;
				}
				
				& > div:nth-child(7) > button > i::after{
					background-position-y:-20px;
				}
			}
		}
		
		.slide-controls button{
			bottom:36px;
		}
	}
}

.recommendTemplate-section,
.customTemplate-section{
	display:flex;
	position:relative;
	flex-direction:column;

	.template-header{
		display:flex;
		color:#20232A;
		font-size:20px;
		font-weight:600;
		line-height:150%;
		letter-spacing:-0.2px;
		
		& > a{
			position:absolute;
			display:flex;
			align-items:center;
			gap:2px;
			right:0;
			color:#70777F;
			text-align:center;
			font-size:15px;
			font-weight:400;
			letter-spacing:-0.15px;
			cursor: default;
			
			&::after{
				content:"";
				width:9px;
				height:13px;
				background:url("../../images/template/More_Icon.png") no-repeat;
			}
			
			&:hover{
				color:#3F4250;
				
				&::after{
					background-position-x:-9px;
				}
			}
		}
	}
	
	.template-wrapper{
		position:relative;
		width:100%;
		display:flex;
		flex-direction:column;
		gap:15px;
	}
	
	.template-list{
		max-width:100%;
		width:fit-content;
		height:234px;
		overflow:clip;
		margin-left:unset !important;
	}
	
	.thumbnail-list{
		opacity:1;
		
		& > .swiper-slide{
			border-radius:7px;
			border:1px solid rgba(21, 25, 32, 0.05);
			
			&:not(:last-child){
				margin-right:20px;
			}
		}
	}
}

.recommendTemplate-section{
	margin-top:95px;
	gap:15px;
	
	.slide-controls button{
		bottom:97px;
	}
}

.customTemplate-section{
	margin-top:50px;
	margin-bottom:50px;
	gap:50px;
	
	.slide-controls button{
		bottom:97px;
	}
}

.result-section{
	display:flex;
	flex-direction:column;
	gap:15px;
	
	& .result-header{
		display:flex;
		color:#20232A;
		font-size:20px;
		font-weight:600;
		line-height:150%;
		letter-spacing:-0.2px;
	}
	
	& .result-list{
		width:100%;
		min-height:274px;
		
		& > .thumbnail-list{
			width:100%;
			opacity:1;
			
			& > .thumbnail-wrapper{
				border-radius:7px;
				border:1px solid rgba(21, 25, 32, 0.05);
				
				> .thumbnail-item > .swiper-wrapper > .swiper-slide{
					background-color:#EEF0F3;
				}
				
				&.resize > .thumbnail-item > div:not(.swiper-wrapper){
					background-color:#EEF0F3;
					display:flex;
					justify-content:center;
					
					img{
						object-fit: contain;
					}
				}
				
				&.resize > .thumbnail-item > .swiper-wrapper > .swiper-slide{
					background-color:#EEF0F3;
					display:flex;
					justify-content:center;
					
					img{
						object-fit: contain;
					}
				}
				
			}
			
		}
		
		& .empty{
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			gap:25px;
			border-radius:7px;
			background:#EEF0F3;
			border:none;
			
			& i{
				width:55px;
				height:55px;
				background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2257%22%20height%3D%2257%22%20viewBox%3D%220%200%2057%2057%22%20fill%3D%22none%22%3E%0A%20%20%3Cpath%20d%3D%22M28.5815%200.75V55.75%22%20stroke%3D%22%23B8BABE%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M0.75%2027.918L55.75%2027.918%22%20stroke%3D%22%23B8BABE%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat center;
			}
			
			& div{
				width:fit-content;
				height:33px;
				display:flex;
				padding:5px 10px;
				border-radius:5px;
				background:#B7BBC0;
				color:#EFEFEF;
				text-align:center;
				font-size:15px;
				font-weight:600;
				line-height:150%;
				letter-spacing:-0.15px;
			}
			
			&:hover{
				background:#E2E4E7;
				
				& div{
					background:linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), #B7BBC0;
				}
			}
		}
	}
}

.no-result-section{
	width:100%;
	display:none;
	align-items:center;
	flex-direction:column;
	gap:60px;
	padding-top:50px;
	padding-bottom:60px;
	
	& .request-area{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		gap:15px;
	}
	
	& .no-result-keyword{
		color:#AAACB0;
		text-align:center;
		font-size:20px;
		font-weight:700;
		line-height:150%;
		letter-spacing:-0.2px;
	}
	
	& .no-result-info{
		color:#3F4250;
		text-align:center;
		font-size:16px;
		font-weight:500;
		line-height:150%;
		letter-spacing:-0.16px;
	}
	
	& .no-result-request-btn{
		& button{
			width:200px;
			height:50px;
			border-radius:50px;
			border:1px solid #3F4248;
			background:#FFF;
			color:#20232A;
			text-align:center;
			font-size:16px;
			font-weight:600;
			line-height:140%;
		}
	}
	
	& .no-result-tag-wrapper{
		display:flex;
		gap:10px;
		flex-direction:row;
		justify-content:center;
	}
	
	& .no-result-tag-header{
		display:flex;
		gap:8px;
		align-items:center;
		color:#3F4250;
		font-size:16px;
		font-weight:500;
		line-height:150%;
		letter-spacing:-0.24px;
		
		&::before{
			display:block;
			content:"";
			width:20px;
			height:20px;
			border-radius:50px;
			background:url("../../images/template/icon_tag.png") no-repeat center #F6F7F9;
		}
	}
	
	& .no-result-hr{
		width:100%;
		height:1px;
		background-color:#E6E7EA;
	}
	
	& .no-result-tag{
		& > div{
			column-gap:10px;
		}
		
		& label{
			font-size:15px;
			line-height:150%;
			letter-spacing:-0.15px;
		}
	}
	
	& .no-result-recommend-template{
		width:100%;
		display:flex;
		flex-direction:column;
		gap:15px;
		position:relative;
		
		.swiper-wrapper .swiper-slide{
			border-radius: 7px;
			border: 1px solid rgba(21, 25, 32, 0.05);
			
			&:not(:last-child){
				margin-right:25px;
			}
		}
		
		.slide-controls button{
			bottom: 100px;
		}
	}
	
	& .no-result-header{
		color:#20232A;
		font-size:20px;
		font-weight:600;
		line-height:150%;
		letter-spacing:-0.2px;
	}
	
	& .no-result-list{
		width:100%;
		overflow:clip;
		
		& > .swiper-slide{
			width:fit-content;
			height:157px;
			border-radius:7px;
			border:1px solid rgba(21, 25, 32, 0.05);
			
			& > img{
				height:157px;
				width:auto;
			}
			
			&:not(:last-child){
				margin-right:25px;
			}
		}
	}
}

/* ===MAIN 모드 (메인 페이지)=== */
.mainWrapper.mode-main .subbanner-section,
.mainWrapper.mode-main .no-result-section{
	display:none;
}

/* ===SUB 모드 (대분류 카테고리 페이지)=== */
.mainWrapper.mode-sub .mainbanner-section,
.mainWrapper.mode-sub .templateCategory-section,
.mainWrapper.mode-sub .customTemplate-section,
.mainWrapper.mode-sub .no-result-section,
.mainWrapper.mode-sub .result-header{
	display:none;
}

/* ===SEARCH 모드 (검색 결과)=== */
.mainWrapper.mode-search .mainbanner-section,
.mainWrapper.mode-search .subbanner-section,
.mainWrapper.mode-search .templateCategory-section,
.mainWrapper.mode-search .customTemplate-section,
.mainWrapper.mode-search .no-result-section,
.mainWrapper.mode-search .result-header{
	display:none;
}

/* 브레드크럼 노출 여부 */
.mainWrapper.breadcrumb .headingBreadcrumb{
	display:flex;
}

body.template-header-partial .mainWrapper.breadcrumb .headingBreadcrumb,
body.template-header-hidden .mainWrapper.breadcrumb .headingBreadcrumb{
	display: none;
}

.mainWrapper.breadcrumb .content-section{
	margin-top:298px;
}

body.template-header-hidden .mainWrapper.breadcrumb .content-section{
	margin-top: 167px;
}

/* 검색 결과 없을 때 */
.mainWrapper.mode-search.no-result .result-section{
	display:none;
}

.mainWrapper.mode-search.no-result .no-result-section{
	display:flex;
}

.mainWrapper.mode-search.no-result .searchbar-section{
	position:relative;
	padding: 30px 0 20px 0;
}

.mainWrapper.mode-search.no-result .content-section{
	margin-top:0;
}

#overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.2);
	z-index:13;
}

/* 공통 썸네일 북마트 버튼*/
.bookmark-button{
	column-gap:1px;
	width:27px;
	height:27px;
	border:unset;
	background:unset;
	
	i{
		width:24px;
		height:24px;
		background-size:cover;
		background-repeat:no-repeat;
		background-position:0 0;
		
		&.selected{
			background-position:-48px 0;
		}
	}
	
	&:hover, &.selected{
		background:rgba(0, 0, 0, 0.20);
	}
}

/* 공통 swiper slider 버튼*/
.slide-controls{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	pointer-events:none;
	
	button{
		position:absolute;
		outline:0;
		pointer-events:auto;
		z-index:2;
		
		display:none;
		width:40px;
		height:40px;
		justify-content:center;
		align-items:center;
		gap:10px;
		aspect-ratio:1/1;
		
		border-radius:50%;
		border:1px solid #E0E1E5;
		background:rgba(255, 255, 255, 0.90);
		
		transition:transform 0.2s ease;
	}
	
	.prev-button{
		left:0;
		transform:translate(-50%);
		
		&:hover{
			transform:translate(-50%) scale(1.1);
		}
	}
	
	.next-button{
		right:0;
		transform:translate(50%);
		
		&:hover{
			transform:translate(50%) scale(1.1);
		}
	}
	
	/* Swiper 네비 버튼만 노출 */
	button[aria-label="Previous slide"],
	button[aria-label="Next slide"]{
		display:flex;
	}
	
	/* 비활성화된 네비 버튼은 숨김 */
	
	button[aria-label="Previous slide"].swiper-button-disabled,
	button[aria-label="Next slide"].swiper-button-disabled{
		display:none;
	}
}

#templateRequestPopup{
	position: absolute;
	box-sizing: border-box;
	top: 41px;
	right: 0;
	width:357px;
	height:fit-content;
	z-index:99;
	display:flex;
	flex-direction:column;
	padding:30px 25px;
	gap:25px;
	align-items:center;
	border-radius:14px;
	border:1px solid #E0E1E5;
	background:#FFF;
	box-shadow:3px 4px 15px 0 rgba(0, 0, 0, 0.15);
	
	& .template-request-content{
		width:100%;
		display:flex;
		flex-direction:column;
		gap:15px;
		
		& .close{
			display:flex;
			align-items:center;
			justify-content:center;
			width:30px;
			height:30px;
			position:absolute;
			top:7px;
			right:7px;
			border-radius: 20px;
			
			& > button{
				border:none;
				width: 14px;
				height: 14px;
				
				&:hover{
					background-color:unset;
				}
				
				& > i{
					background-repeat:no-repeat;
					background-position:center;
				}
			}
		}
	}
	
	& .request-header{
		display:flex;
		gap:8px;
		color:#20232A;
		font-size:18px;
		font-weight:600;
		line-height:140%;
		
		& a{
			display:flex;
			padding:1px 7px;
			justify-content:center;
			align-items:center;
			border-radius:12px;
			background:#1C1D1F;
			color:#F6F7F9;
			font-size:12px;
			font-weight:600;
			line-height:150%;
			letter-spacing:-0.12px;
		}
	}
	
	& .request-textarea{
		width:100%;
		height:80px;
	}
	
	& .style-tags{
		width:100%;
		height:65px;
		
		& > div{
			flex-wrap:wrap;
			gap:5px;
		}
		
		& span{
			border-radius:30px;
			background:#F6F7F9;
			
			& label{
				color:#70777F;
				font-size:14px;
				font-weight:400;
				line-height:140%;
			}
			
			&:has(input:checked){
				border-radius:30px;
				background:rgba(254, 222, 41, 0.20);
				box-shadow: inset 0 0 0 1px #FEE869;
				
				& label{
					color:#A47E15;
					font-weight:600;
				}
			}
		}
	}
	
	& .request-btn{
		width:100%;
		height:50px;
		
		& > button{
			width:100%;
			height:50px;
			
			border-radius:50px;
			border:solid 1px #E0E1E5;
			background:#FFF;
			color:#20232A;
			font-size:14px;
			font-weight:600;
			line-height:140%;
		}
		
		&:hover > button{
			background:#FEDE29;
		}
		
		&.disabled > button{
			border:0;
			background:#DFE1E5;
			color:#AAACB0;
		}
	}
}

@media (max-width:1400px){
	.template .mainWrapper{
		padding-left:50px !important;
		padding-right:50px !important;
		
		.searchbar-section{
			padding-left:50px;
			padding-right:50px;
		}
	}
	
	.headingBreadcrumb{
		h1{
			font-size:26px;
			
		}
		
		.breadcrumb-button{
			font-size:26px;
		}
	}
}

@media (max-width:1000px){
	.contents{
		padding-top:0;
	}
	
	.subbanner-section{
		height:250px;
	}
	
	.template{
		.mainWrapper{
			padding-top:0 !important;
			
			.content-section{
				margin-top: 217px;

				.mainbanner-section{
					height:250px;
					
					.slide-controls button{
						bottom:105px;
					}
				}
				
				.templateCategory-section{
					margin-top:50px;
				}
				
				.recommendTemplate-section{
					margin-top:75px;
				}
			}
			
			&.breadcrumb .content-section{
				margin-top:287px;
			}
		}
	}
	
	.searchbar-section {
		padding-top: calc(var(--template-header-total-height) + 40px);
	}
	
	body.template-header-partial .searchbar-section{
		padding-top: calc(var(--template-header-height) + 20px);
		padding-bottom: 20px;
	}

	body.template-header-hidden .searchbar-section{
		padding-top: 30px;
		padding-bottom: 20px;
	}
}

@media (max-width:900px){
	.searchbar-section{
		right:0;
	}
}


@media (max-width:800px){
	#filterBar > div:not(:has(#allFilter)) {
		display: none;
	}
	
	.headingBreadcrumb{
		h1{
			font-size:22px;
			
		}
		
		.breadcrumb-button{
			font-size:22px;
		}
	}
}

@media (max-width:700px){
	.template .mainWrapper{
		padding-left:30px !important;
		padding-right:30px !important;
		
		.searchbar-section{
			padding-left:30px;
			padding-right:30px;
		}
	}
	
	.template{
		.mainWrapper{
			padding-top:0 !important;
			
			.content-section{
				.mainbanner-section{
					height:270px;
					
					.slide-controls button{
						bottom:115px;
					}
					
					.swiper-wrapper .swiper-slide{
						&:not(:last-child){
							margin-right:15px !important;
						}
					}
				}
				
				.subbanner-section{
					height:220px;
				}
			}
		}
	}
}

@media (max-width:600px){
	.templateCategory-section .category-mobile{
		display:flex;
	}
	
	.templateCategory-section .category-desktop{
		display:none;
	}
	
	.template .mainWrapper .content-section{
		/*margin-top:179px;*/
		
		.templateCategory-section{
			margin-top:30px;
		}
		
		.recommendTemplate-section{
			margin-top:50px;
		}
	}
	
	.recommendTemplate-section, .customTemplate-section{
		.template-list{
			height:200px;
		}
		
		.slide-controls button{
			bottom:80px;
		}
	}
	
	.template .mainWrapper.breadcrumb .content-section{
		margin-top:267px;
	}
	
	.searchbar-section{
		padding-bottom:30px;
	}
}

@media (max-width:400px){
	.recommendTemplate-section,
	.customTemplate-section{
		.template-list{
			height:122px;
			
			.thumbnail-list .swiper-slide{
				&:not(:last-child){
					margin-right:15px;
				}
			}
		}
		
		.slide-controls button{
			bottom:105px;
		}
		
		.slide-controls button{
			bottom:40px;
		}
	}

	.sidebar{
		border-radius: 20px 20px 0 0;
		background: #FFF;
		padding-top: 0;
		height: 80%;
		width: 100%;
		top: unset;
		bottom: 0;
		z-index: 999;
		transform: translateY(0);
		transition: transform 0.3s ease-out;

		&.active{
			transform: translateY(0);
		}

		&.dragging{
			transition: none;
		}

		& .dragClose{
			display: flex;
			justify-content:center;
		}

	}

	.filterContents{
		padding-top: 4px;
	}
}