main{
	.contents{
		width:100%;
		
		.content{
			display:flex;
			flex-direction:column;
			align-items:center;
			padding:30px;
			gap:7px;
		}
		
		footer{
			position:unset;
		}
	}
}

/* AlertPopup mobile 줄바꿈 */
.mobile-br{
	display:none;
}

/* 브레드 크럼 */
.heading-breadcrumb{
	display:flex;
	width:100%;
	max-width:1688px;
	align-items:center;
	
	div .breadcrumb-button{
		padding:2px 7px;
		font-size:24px;
	}
	
	h1{
		padding:2px 7px;
		font-size:24px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
}

/*템플릿 상세페이지*/
.template-detail-popup{
	position:fixed;
	display:none;
	z-index:10000;
	overflow:hidden;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.3s ease;
	cursor:none;
	
	&.pop-view{
		display:flex;
		justify-content:center;
		overflow-y:auto;
		
		.close-cursor{
			position:fixed;
			width:50px;
			height:50px;
			pointer-events:none;
			z-index:99999;
			display:none;
			background:url('../../images/default/close/btn_template-popup-close.png') no-repeat center;
			background-size:contain;
		}
		
		.template-detail-arrows{
			display:flex;
			flex-direction:column;
			justify-content:center;
			width:50px;
			height:100%;
			position:fixed;
			pointer-events:none;
			z-index:1100;
			
			&.prev{
				left:244px;
			}
			
			&.next{
				right:250px;
			}
			
			button{
				pointer-events:auto;
				width:50px;
				height:50px;
				border-radius:50px;
				background:#000;
				cursor:pointer;
				transition:transform 0.2s;
				
				display:flex;
				justify-content:center;
				align-items:center;
				gap:10px;
				
				&:hover{
					transform:scale(1.1);
				}
			}
		}
		
		.template-detail-wrapper{
			display:flex;
			margin-top:50px;
			margin-bottom:70px;
			width:auto;
			height:fit-content;
			align-items:center;
		}
		
		&.show{
			opacity:1;
			pointer-events:auto;
			background:rgba(0, 0, 0, 0.6);
		}
		
	}
}

.template-detail-container{
	width:fit-content;
	height:fit-content;
	min-height:1000px;
	display:flex;
	padding:50px;
	gap:50px;
	flex-direction:column;
	align-items:flex-start;
	cursor:auto;
	
	border-radius:10px;
	background:#FFF;
	
	.template-detail-contents{
		gap:42px;
		align-items:flex-start;
	}
	
	.template-similar-contents{
		display:flex;
		width:1200px;
		flex-direction:column;
		gap:20px;
		
		
		.template-similar-header{
			display:flex;
			align-items:center;
			gap:10px;
			
			h2{
				color:#20232A;
				font-size:20px;
				font-weight:600;
				line-height:150%;
				letter-spacing:-0.2px;
			}
			
			div{
				display:flex;
				width:auto;
				padding:5px 10px;
				justify-content:center;
				align-items:center;
				gap:5px;
				border-radius:30px;
				border:1px solid #E0E1E5;
				
				span{
					color:#9FA5AD;
					text-align:right;
					font-size:13px;
					font-weight:500;
					line-height:150%;
					letter-spacing:-0.13px;
					
					&.mobile-text{
						display:none;
					}
				}
				
				.auto-fit{
					padding:5px 11px 6px 10px;
					justify-content:center;
					align-items:center;
					gap:10px;
					
					border-radius:30px;
					background:#FEE869;
					color:#1C1D1F;
					
					font-size:12px;
					font-weight:500;
					font-style:italic;
					line-height:10px;
				}
			}
		}
		
		.template-similar-images{
			width:100%;
			
			> .thumbnail-list{
				align-items:center;
				align-content:center;
				gap:25px;
				align-self:stretch;
				flex-wrap:wrap;
				
				> .thumbnail-wrapper{
					border-radius:7px;
					outline:1px solid rgba(21, 25, 32, 0.05);
					background:#EEF0F3;
					overflow:hidden;
					cursor:pointer;
					transition:outline-color 0.2s ease;
					
					.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);
						}
					}
				}
			}
		}
	}
	
	.template-detail-notice{
		display:inline-flex;
		z-index:100;
		
		font-size:14px;
		font-weight:600;
		font-style:normal;
		letter-spacing:-0.14px;
	}
	
	.template-detail-notice::before{
		content:"";
		display:inline-block;
		width:15px;
		height:15px;
		background:url('../../images/default/icon/ico_warning.svg') no-repeat center / contain;
		margin-bottom:2px;
	}
	
	.template-detail-notice.mobile{
		display:none;
		
		color:#555;
		line-height:130%;
		
		padding:10px 15px;
		justify-content:center;
		align-items:center;
		gap:15px;
		align-self:stretch;
		
		border-radius:7px;
		border:1px solid #E0E1E5;
		background:rgba(255, 255, 255, 0.65);
		
		.mobile-break{
			display:none;
		}
	}
	
	.template-detail-notice.desktop{
		display:inline-flex;
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		
		margin-top:20px;
		padding:5px 15px;
		gap:8px;
		
		color:#333;
		line-height:150%;
		
		align-items:center;
		justify-content:center;
		
		border-radius:3px;
		background:#FFFFFFA6;
		box-shadow:0 0 6px 0 #0000001A;
		white-space:nowrap;
	}
	
	.template-detail-images{
		position:relative;
		width:650px;
		max-height:710px;
		display:flex;
		flex-direction:column;
		
		.mobile-popup-close{
			z-index:1;
			display:none;
			width:30px;
			height:30px;
			justify-content:center;
			align-items:center;
			gap:10px;
			
			position:absolute;
			top:5px;
			right:5px;
			
			border-radius:7px;
			background:#FFF;
		}
		
		.main-image{
			width:100%;
			height:650px;
			
			:has(.sub-images) &{
				height:550px;
			}
			
			.main-thumbnail{
				width:100%;
				height:100%;
				background-color:#EEF0F3;
				object-fit:contain;
				border-radius:7px;
				outline:1px solid rgba(21, 25, 32, 0.05);
				overflow:hidden;
				
				img{
					width:100%;
					height:100%;
					object-fit:contain;
				}
			}
			
			.video-box{
				width:100%;
				height:100%;
				background-color:#EEF0F3;
				border-radius:7px;
				overflow:hidden;
				outline:1px solid rgba(21, 25, 32, 0.05);
				justify-content:center;
				
				video{
					object-fit:contain;
					width:100%;
					height:100%;
				}
			}
		}
		
		.sub-images{ /*swiper*/
			height:130px;
			max-width:100%;
			margin-top:30px;
			padding:2px;
			
			.swiper-wrapper{
				height:100%;
				
				.swiper-slide{
					cursor:pointer;
					width:auto;
					height:100%;
					outline:2px solid #1519200D;
					border-radius:7px;
					overflow:hidden;
					transition:outline-color 0.2s ease;
					background-color:#EEF0F3;
					
					&:not(:last-child){
						margin-right: 20px;
					}
					
					img{
						object-fit:fill;
					}
					
					&::after{
						content:"";
						position:absolute;
						inset:0;
						background:rgba(0, 0, 0, 0);
					}
					
					&.selected{
						outline:2px solid #1C1D1F;
					}
					
				}
			}
		}
		
		.slide-controls{
			button{
				bottom:45px;
				display: none;
				
				&.prev-button {
					left: 0;
					transform: translate(-50%);
				}
				
				&.next-button {
					right: 0;
					transform: translate(60%);
				}
			}
			
			/* 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;
			}
		}
	}
	
	.template-detail-info{
		display:flex;
		width:508px;
		margin-top:25px;
		flex-direction:column;
		align-items:flex-start;
		align-self:stretch;
		
		h3{
			color:#20232A;
			font-size:30px;
			font-style:normal;
			font-weight:500;
			line-height:140%;
			letter-spacing:-0.3px;
		}
		
		.template-detail-stat{
			display:flex;
			width:100%;
			margin-top:15px;
			gap:42px;
			align-self:stretch;
			
			span{
				color:#70777F;
				font-size:20px;
				font-style:normal;
				font-weight:400;
				line-height: 130%;
				letter-spacing:-0.2px;
			}
		}
		
		.template-detail-buttons{
			display:flex;
			margin-top:25px;
			align-items:center;
			align-self:stretch;
			gap:12px;
			
			button{
				width:100%;
				height:100%;
				
				i{
					background-size:cover;
					background-repeat:no-repeat;
					background-position:center;
					width:22px;
					height:22px;
				}
			}
			
			.template-detail-edit{
				height:50px;
				flex:1;
				
				button{
					color:#FFF;
					text-align:center;
					font-size:20px;
					font-style:normal;
					font-weight:500;
					line-height:normal;
				}
			}
			
			.template-detail-bookmark,
			.template-detail-copy-link{
				width:50px;
				height:50px;
				flex:0 0 auto;
				
				button{
					flex:0 0 auto;
				}
			}
			
			.template-detail-bookmark{
				i{
					width:27px;
					height:27px;
				}
			}
		}
		
		.template-detail-keywords{
			padding:2px;
			margin-top:50px;
			height:260px;
			overflow-y:scroll;
			
			.keyword-tag{
				display:flex;
				align-items:flex-start;
				align-content:flex-start;
				gap:10px;
				align-self:stretch;
				flex-wrap:wrap;
				
				span{
					display:flex;
					padding:10px 16px;
					justify-content:center;
					align-items:center;
					border-radius:50px;
					background:#F6F7F9;
					
					&:hover{
						box-shadow:0 0 0 1px #E0E1E5;
						
						a{
							font-style:normal;
							line-height:150%;
							letter-spacing:-0.16px;
							color:#3F4250;
							font-weight:500;
						}
					}
					
					a{
						color:#70777F;
						font-size:15px;
						font-style:normal;
						font-weight:400;
						line-height:150%;
						letter-spacing:-0.16px;
					}
				}
			}
		}
	}
}


/* 1400px ↓ */
@media (max-width:1400px){
	.heading-breadcrumb{
		div{
			.breadcrumb-button, h1{
				font-size:20px;
				letter-spacing:-0.2px;
			}
		}
	}
	
	.template-detail-popup.pop-view .template-detail-arrows{
		display:none;
	}
	
	.template-detail-container{
		box-sizing:border-box;
		
		.template-similar-contents{
			width:1100px;
		}
		
		.template-detail-images{
			width:600px;
			
			.main-image{
				width:100%;
				height:600px;
				
				:has(.sub-images) &{
					height:507px;
				}
			}
			
			.sub-images .swiper-wrapper .swiper-slide{
				&:not(:last-child){
					margin-right:15px;
				}
			}
		}
		
		.template-detail-info{
			width:458px;
			
			.template-detail-keywords{
				height:260px;
			}
		}
	}
}

/* 1200px ↓ */
@media (max-width:1200px){
	.template-detail-container{
		gap:unset;
		padding-top:20px;
		
		.template-detail-contents{
			margin-top:20px;
		}
		
		.template-similar-contents{
			margin-top:50px;
			width:1000px;
		}
		
		.template-detail-images{
			width:500px;
			
			.main-image{
				width:100%;
				height:500px;
				
				:has(.sub-images) &{
					height:423px;
				}
			}
			
			.sub-images{
				height:120px;
			}
			
			.slide-controls{
				button{
					bottom:40px;
				}
			}
		}
		
		.template-detail-notice.mobile{
			display:flex;
		}
		
		.template-detail-notice.desktop{
			display:none;
		}
		
		.template-detail-info{
			margin-top:unset;
			
			.template-detail-keywords{
				height:260px;
			}
		}
	}
	
	.template-detail-popup .template-detail-container{
		padding:50px;
	}
}

/* 1000px ↓ */
@media (max-width:1000px){
	main{
		.contents.template-detail{
			padding-top:93px;
			
			.content{
				padding-top:10px;
				gap:7px;
			}
		}
	}
	
	.template-detail-container{
		.template-detail-contents{
				gap:30px;
			
			.template-detail-images{
				width:450px;
				
				.main-image{
					width:100%;
					height:450px;
					
					:has(.sub-images) &{
						height:380px;
					}
				}
				
				.sub-images{
					height:100px;
				}
				
				.slide-controls{
					button{
						bottom:30px;
					}
				}
			}
			
			.template-detail-info{
				width:360px;
				
				h3{
					font-size:20px;
				}
				
				.template-detail-stat{
					span{
						font-size:14px;
						letter-spacing:-0.14px;
					}
				}
				
				.template-detail-buttons{
					gap:10px;
					
					.template-detail-bookmark,
					.template-detail-copy-link{
						width:40px;
						height:40px;
					}
					
					.template-detail-edit{
						height:40px;
						
						button{
							font-size:16px;
						}
					}
				}
				
				.template-detail-keywords{
					height:245px;
					margin-top:30px;
					
					.keyword-tag span a{
						font-size:14px;
						line-height:130%;
					}
				}
			}
		}
		
		.template-similar-contents{
			width:840px;
		}
	}
	
	.heading-breadcrumb{
		padding:10px 0;
	}
	
	.template-detail-container{
		padding:unset;
		
		.template-detail-contents{
			width:100%;
		}
	}
	
	.template-detail-popup .template-detail-container{
		padding:30px;
	}
}

@media (max-width:900px){
	main{
		scrollbar-width:none;
		
		.contents{
			.content{
				padding:16px;
				padding-top:30px;
			}
		}
	}
	
	.template-detail-popup.pop-view{
		background:unset;
		scrollbar-width:none;
		
		.close-cursor{
			display:none;
		}
		
		.template-detail-wrapper{
			width:100%;
			margin-top:unset;
			margin-bottom:unset;
		}
	}
	
	.template-detail-container{
		width:100%;
		align-items:center;
		border-radius:unset;
		
		.template-detail-contents{
			width:100%;
			flex-direction:column;
			
			.mobile-popup-close{
				display:flex;
			}
			
			.template-detail-images{
				width:100%;
				
				.main-image{
					width:100%;
					height:380px;
				}
				
				.sub-images{
					margin-top:20px;
				}
				
				.slide-controls{
					display:none;
				}
			}
			
			.template-detail-info{
				width:100%;
				
				.template-detail-keywords{
					height:fit-content;
				}
			}
		}
		
		.template-similar-contents{
			width:100%;
			gap:20px;
			
			.template-similar-header{
				flex-direction:column;
				align-items:flex-start;
				
				.desktop-text{
					display:none;
				}
				
				div{
					span{
						&.mobile-text{
							display:inline;
						}
					}
				}
			}
		}
	}
	
	.template-detail-popup .template-detail-container{
		padding:16px;
	}
}

/* 700px ↓ */
@media (max-width:700px){
	.template-detail-container{
		width:100%;
		align-items:center;
		border-radius:unset;
		
		.template-detail-contents{
			width:100%;
			flex-direction:column;
			
			.mobile-popup-close{
				display:flex;
			}
			
			.template-detail-images{
				width:100%;
				
				.main-image{
					width:100%;
					height:380px;
				}
				
				.sub-images{
					margin-top:20px;
				}
				
				.slide-controls{
					display:none;
				}
			}
			
			.template-detail-info{
				width:100%;
				
				.template-detail-keywords{
					height:fit-content;
				}
			}
		}
		
		.template-similar-contents{
			width:100%;
			gap:20px;
			
			.template-similar-header{
				flex-direction:column;
				align-items:flex-start;
				
				.desktop-text{
					display:none;
				}
				
				div{
					span{
						&.mobile-text{
							display:inline;
						}
					}
				}
			}
		}
	}
}

/* 600px ↓ */
@media (max-width:600px){
	.template-detail-container .template-detail-notice.mobile{
		font-size:12px;
		padding:10px 10px;
	}
}

/* 500px ↓ */
@media (max-width:500px){
	.template-detail-container .template-detail-notice.mobile .mobile-break{
		display:inline;
	}
	
	.desktop-br{
		display:none;
	}
	
	.mobile-br{
		display:inline;
	}
}

/* 400px ↓ */
@media (max-width:400px){
	.template-detail-container{
		.template-detail-contents{
			.template-detail-images{
				.main-image{
					height:328px;
				}
				
				.sub-images{
					height:80px;
					margin-top:10px;
					> .thumbnail-list > .thumbnail-wrapper{
						margin-right:10px !important;
					}
				}
			}
		}
	}
}