section.review-page {
	max-width:600px;
	margin:0 auto;
	padding: 12px 8px;
	box-sizing: border-box;

	*{
		box-sizing: border-box;
	}

	.fc-blue{
		color: #215e99;
	}

	.fc-red{
		color: #ff0000;
	}

	.fc-gray{
		color: #666;
	}

	/* 상품별 후기 페이지 상단 요약 (별 아이콘, 평균평점, 등록후기) */
	.review-product-summary{
		background-color: #efeef4;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 12px;
	}
	.review-product-summary .summary-item-contents{
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}
	.review-product-summary .img-box{
		width: 80px;
		height: 80px;
		flex-shrink: 0;
		border-radius: 6px;
		overflow: hidden;
		background: #fff;
	}
	.review-product-summary .img-box img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.review-product-summary .info-box{
		flex: 1;
		min-width: 0;
	}
	.review-product-summary .subject-box{
		margin-bottom: 6px;
	}
	.review-product-summary .subject-txt{
		font-size: 16px;
		font-weight: 500;
		line-height: 1.35;
		letter-spacing: -0.03em;
	}
	.review-product-summary .product-stats{
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 14px;
		font-weight: 600;
	}
	.review-product-summary .product-stats .avg-rate.fc-red{
		color: #ff0000;
	}
	.review-product-summary .product-stats .review-count.fc-blue{
		color: #6b86af;
	}
	.review-product-summary .icon-star-rate{
		width: 18px;
		height: 18px;
		vertical-align: middle;
	}

	article.review-banner{


		.img-box{
			margin:-12px -8px 0;
			display: flex;

			img{
				max-width:100%;
			}
		}

		.desc-box{
			padding: 12px 0;
			font-size: 17px;
			line-height: 20px;
			font-weight: 500;
			color: #666;
			letter-spacing: -0.02em;

		}
	}

	article.review-search{

		.search-wrap{
			padding: 8px;
		}


		.search-msg{
			font-size: 12px;
			letter-spacing: -0.04em;
			line-height: 16px;
			color: #ff0000;
		}

		.input-box{
			display: flex;
			gap: 8px;

			input[type=text]{
				width: 100%;
				outline: none;
				flex:1;
				min-width:0;
				margin:0;
				height: 30px;
				border-radius:4px;
				background-color: #fff;
				border: 1px solid #333;
				font-size: 14px;
				padding: 0 8px;
				font-family: 'Cafe24Ohsquare';
			}

			.search-btn{
				display: inline-flex;
				align-items: center;
				justify-content: center;
				height: 30px;
				outline: none;
				border:0;
				width: 80px;
				font-family: 'Cafe24Ohsquare';
				background-color: #a6a6a6;
				border-radius:4px;
				color: #fff;
				font-size: 16px;
				font-weight: 700;
			}

		}


		.filter-box{
			display: flex;
			padding-top: 8px;
			gap: 6px;
			justify-content: space-between;

			.filter-list{
				display: inline-flex;
				gap: 8px;

				label{
					display: inline-flex;
					align-items: center;
					cursor: pointer;

					input[type=radio]{
						position: absolute;
						left:-9999px;

						&:checked{

							& ~ i{
								background: url("/app/common/img/common/ic_radio_chk_active.png") no-repeat center / cover;

							}
						}
					}

					i{
						flex-shrink: 0;
						background: url("/app/common/img/common/ic_radio_chk.png") no-repeat center / cover;
						width: 16px;
						height: 16px;
					}

					.txt{
						padding-left: 4px;
						font-size: 13px;
						letter-spacing: -0.03em;
						color: #666;
					}

				}

			}

			.align-box{
				flex:1;
				min-width:0;
				max-width:140px;

				select {
					font-family: 'Cafe24Ohsquare';
					background: #fff url("/app/common/img/product/ic_select_arrow.svg") no-repeat right 6px center / 10px 6px;
					width: 100%;
					appearance: none;
					border-radius: 4px;
					height: 30px;
					border: 1px solid #a6a6a6;
					outline: none;
					padding: 0 20px 0 8px;
					font-size: 13px;;
				}
			}

		}
	}


	article.review-list-component{


		.list-wrap{
			background-color: #efeef4;
			padding: 8px 0;
			border-radius:8px;

			&.bg-none{
				background: white;
			}
		}


		.list-tit-box{
			color: #0b76a0;
			font-weight: 500;
			font-size: 17px;
			margin-left: 10px;
			letter-spacing: -0.03em;
			line-height: 24px;
			padding-bottom: 6px;
			border-bottom:1px solid #ddd;
		}


		ul.review-list{

			list-style: none;

			&.with-space{

				li.list-item {
					
					.item-wrap{
						background-color: #efeef4;
						padding: 8px;
						border:1px solid #ddd;
						border-radius:4px;

						.item-contents{
							padding-top: 0;
						}
					}

					& + li.list-item{
						margin-top: 10px;
						border:0;
					}

				}


			}
			li.list-item{

				& + li.list-item{

					border-top:1px solid #ddd;
				}

				.item-wrap{

					.item-contents{
						display: flex;

						.img-box{
							flex-shrink: 0;
							width: 90px;
							height: 90px;
							border:1px solid #a6a6a6;
							display: inline-flex;
							align-items: center;
							border-radius:4px;
							overflow: hidden;

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

						.info-box{
							line-height:150%;
							flex:1;
							min-width:0;
							display: inline-flex;
							flex-direction: column;
							padding-left: 5px;

							.sub-box{
								padding-bottom: 4px;
								font-size: 14px;
								line-height: 16px;
								letter-spacing: -0.03em;
							}

							.label-box{
								display: flex;
								align-items: center;
								gap: 4px;
								padding-bottom: 6px;
								

								.label-txt{
									/*font-weight: 500;*/
									font-size: 14px;
									color: #0b76a0;
									letter-spacing: -0.02em;
									line-height: 16px;

								}

								.date-txt{
									font-size: 14px;
									color: #0b76a0;
									letter-spacing: -0.02em;
									line-height: 16px;
								}

								&.label-box-with-btn{
									justify-content: space-between;

									.label-txt-col{
										display: flex;
										flex-direction: column;
										gap: 2px;
									}
									.btn-box{
										margin-top: 0;
										flex-shrink: 0;
									}
								}
							}

							.subject-box{

								.subject-txt{
									line-height:140%;
									font-size: 16px;
									font-weight: 500;
									letter-spacing: -0.03em;
								}

								.subject-txt.subject-txt-ellipsis{
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									text-overflow: ellipsis;
								}
								.subject-txt.subject-txt-line3{
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
							}

							.con-box{
								padding-top: 4px;

								.con-txt{
									font-size: 16px;
									font-weight: 500;
									line-height: 18px;
									letter-spacing: -0.02em;

								}
							}
						}

						.btn-box{
							flex-shrink: 0;
							display: inline-flex;
							align-items: center;

							.reg-btn{
								background: url("/app/common/img/review/ic_review_reg.jpg") no-repeat center / cover;
								width: 45px;
								height: 50px;
							}

							.edit-btn{
								background: url("/app/common/img/review/ic_review_edit.jpg") no-repeat center / cover;
								width: 45px;
								height: 50px;
							}
						}
					}

					.item-options{
						margin-top: 8px;

						.options-head-box{


							background-color: #fff;
							padding: 4px 8px;
							display: flex;
							align-items: flex-start;
							position: relative;
							justify-content: space-between;
							border-radius:4px;
							gap: 8px;

							.head-box{
								font-size: 14px;
								line-height: 22px;
								letter-spacing: -0.02em;
								flex:1;
								min-width:0;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
								word-wrap: normal;

							}

							.more-btn{
								flex-shrink: 0;
								background-color: #3b7d23;
								color: #fff;
								font-size: 12px;
								height: 22px;
								border-radius:4px;
								text-decoration: none;
								width: 50px;
								display: inline-flex;
								align-items: center;
								justify-content: center;


							}


						}

						.options-body-box{
							margin-top: 8px;
							display: flex;
							align-items: center;
							position: relative;
							padding-right: 28px;

							.remove-box{
								display: inline-flex;
								align-items: center;
								position: absolute;
								right:0;
								top:3px;

								.remove-btn{
									width: 22px;
									height: 22px;
									border:0;
									background: url("/app/common/img/review/ic_remove.png") no-repeat center / cover;
								}
							}

							.rate-box{
								margin-left: 12px;
							}

							.link-box{
								margin-left: 12px;
								display: inline-flex;
								align-items: center;

								.link-btn{
									width: 22px;
									height: 22px;
									border:0;
									background: url("/app/common/img/review/ic_link.png") no-repeat center / cover;

									&:disabled{
										background: url("/app/common/img/review/ic_link_disabled.png") no-repeat center / cover;

									}
								}
							}

							.thumbs-box{
								margin-left: 12px;
								display: inline-flex;
								align-items: center;
								gap: 4px;

								.thumbs-txt{
									padding-top: 2px;
									font-size: 16px;
									font-weight: 500;
									letter-spacing: -0.02em;
									color: #0b76a0;

								}

.thumbs-btn{
    width: 22px;
    height: 22px;
    border: 0;
    cursor: pointer;
    background: url("/app/common/img/review/ic_thumbs.png") no-repeat center / cover;
    
    &.inactive{
        background: url("/app/common/img/review/ic_thumbs_disabled.png") no-repeat center / cover;
    }
}
							}

							.state-box{

								.state-label{
									color: #fff;
									height: 26px;
									display: inline-flex;
									align-items: center;
									justify-content: center;
									width: 90px;
									border-radius:4px;
									font-size: 13px;

									&.state-ing{
										background-color: #4e95d9;
									}

									&.state-end{
										background-color: #7f7f7f
									}
								}

							}

						}

					}




				}

			}

		}

	}


	article.review-form-component{

		.form-wrap{
			display: flex;
			flex-direction: column;

			.review-tit-box{
				font-weight: 500;
				font-size: 18px;
				letter-spacing: -0.03em;
				line-height: 24px;
				padding-bottom: 8px;
			}

			.review-item-box{
				background-color: #efeef4;


				.item-wrap{
					display: flex;
					padding: 12px 8px;

					.img-box{
						flex-shrink: 0;
						width: 88px;
						height: 88px;
						border:1px solid #a6a6a6;
						display: inline-flex;
						align-items: center;
						border-radius:4px;
						overflow: hidden;

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

					.info-box{
						flex:1;
						min-width:0;
						display: inline-flex;
						flex-direction: column;
						
						padding-left: 6px;

						.label-box{
							display: flex;
							align-items: center;
							gap: 4px;
							padding-bottom: 8px;

							.label-txt{
								font-weight: 500;
								font-size: 14px;
								color: #0b76a0;
								letter-spacing: -0.02em;
								line-height: 16px;

							}

							.date-txt{
								font-size: 14px;
								color: #0b76a0;
								letter-spacing: -0.02em;
								line-height: 16px;
							}

						}

						.subject-box{

							.subject-txt{
								line-height:140%;
								font-size: 16px;
								font-weight: 500;
								letter-spacing: -0.03em;
							}
							.subject-txt.subject-txt-ellipsis{
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.subject-txt.option-txt{
								margin-top: 4px;
							}
						}

						.con-box{
							padding-top: 4px;

							.con-txt{
								font-size: 16px;
								font-weight: 500;
								line-height: 18px;
								letter-spacing: -0.02em;

							}
						}
					}

				}

			}

			.review-input-box{
				padding-top: 12px;

				.row{

					& + .row{
						margin-top: 12px;
					}
				}


				.input-box{
					display: flex;

					input[type=text]{
						width: 100%;
						outline: none;
						flex:1;
						min-width:0;
						margin:0;
						height: 30px;
						border-radius:4px;
						background-color: #fff;
						border: 1px solid #333;
						font-size: 16px;
						padding: 0 8px;
						font-family: 'Cafe24Ohsquare';
					}

				}

				.textarea-box{
					display: flex;
					textarea{
						font-family: 'Cafe24Ohsquare';
						outline: none;
						width: 100%;
						border: 1px solid #333;
						padding: 8px 8px 8px 8px;
						border-radius:4px;
						font-size: 16px;
						line-height: 20px;
						font-weight: 500;
						position: relative;
						height: 200px;
						box-sizing: border-box;
						&::placeholder{
							color: #878789;
						}
					}
				}

			}

			.review-upload-box{
				padding-top: 12px;

				.upload-head-box{
					display: flex;
					align-items: center;
					padding-bottom: 8px;
					gap: 8px;

					.head-box{
						font-size: 17px;
						line-height: 20px;
						letter-spacing: -0.03em;
						color: #0b76a0;
					}

					.sub-box{
						font-size: 17px;
						line-height: 20px;
						letter-spacing: -0.03em;

					}
				}
			}

			.review-rate-box{
				padding-top: 12px;
				display: flex;
				align-items: center;
				gap: 12px;

				.rate-label{
					line-height: 22px;
					font-weight: 400;
					font-size: 17px;
					letter-spacing: -0.03em;
					color: #0b76a0;
				}
				.rate-input{

				}
			}
		}

		.form-contents{
			padding-bottom: 72px;
			flex:1;
			min-height: 0;
		}

		.form-foot-box{
			background-color: #fff;
			position: fixed;
			left:0;
			right:0;
			bottom: 0;
			padding: 8px;
			max-width:600px;
			margin:0 auto;
			z-index: 100;

			.foot-btn-list{
				display: flex;
				gap: 8px;

				.foot-box{
					width: 100%;

					.foot-btn{
						font-family: 'Cafe24Ohsquare';
						width: 100%;
						outline: none;
						height: 36px;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						border-radius:4px;
						font-size: 16px;
						font-weight: 700;
						color: #fff;
						border:0;
						margin:0;

						&[data-btn=remove]{
							background-color: #8ed973;
						}
						&[data-btn=cancel]{
							background-color: #a6a6a6;
						}
						&[data-btn=success]{
							background-color: #ce002d;
						}

					}
				}
			}

		}





	}



	article.img-upload-form {

		ul {
			list-style: none;
			display: grid;
			grid-template-columns: repeat(5 , 1fr);
			gap: 8px;

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

			li {
				min-width:0;
				position: relative;
				aspect-ratio: 1 / 1;
				display: inline-flex;

				.img-view{
					width: 100%;
					height: 100%;
					position:absolute;
					top:0;
					right:0;
					bottom:0;
					left:0;
					display: inline-flex;

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

				.img-box{
					aspect-ratio: 1/1;

					label{
						cursor: pointer;
						width: 100%;
						height: 100%;
						display: inline-flex;
						align-items: center;
						justify-content: center;

						input[type=file]{
							position: absolute;
							left:-9999px;
						}

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


				}
			}
		}
	}

	article.rate-input-component{

		.rate-list {
			display: flex;
			align-items: center;
			justify-content: center;

			&.small{

				.rate-btn{
					width: 20px;
					height: 16px;
				}
			}

			.rate-btn {
				padding: 0 6px;
				display: inline-flex;
				align-items: center;
				background: url("/app/common/img/review/ic_rate_off.png") no-repeat center / cover;
				width: 24px;
				height: 22px;

				& + .rate-btn {
				}


				&.active {
					background: url("/app/common/img/review/ic_rate_on.png") no-repeat center / cover;

				}
			}


		}

	}





}



article.layer-detail{


	.detail-info-box{

		.item-wrap{

			.item-contents{
				display: flex;
				padding: 12px 0;

				.img-box{
					flex-shrink: 0;
					width: 100px;
					height: 100px;
					border:1px solid #a6a6a6;
					display: inline-flex;
					align-items: center;
					border-radius:4px;
					overflow: hidden;

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

				.info-box{
					flex:1;
					min-width:0;
					display: inline-flex;
					flex-direction: column;
					
					padding-left: 6px;

					.sub-box{
						padding-bottom: 4px;
						font-size: 12px;
						line-height: 16px;
						letter-spacing: -0.03em;
					}

					.label-box{
						display: flex;
						align-items: center;
						gap: 4px;
						padding-bottom: 6px;

						.label-txt{
							font-weight: 500;
							font-size: 14px;
							color: #0b76a0;
							letter-spacing: -0.02em;
							line-height: 16px;

						}

						.date-txt{
							font-size: 14px;
							color: #0b76a0;
							letter-spacing: -0.02em;
							line-height: 16px;
						}

					}

					.subject-box{

						.subject-txt{
							line-height: 140%;
							font-size: 16px;
							font-weight: 500;
							letter-spacing: -0.03em;
						}
					}

					.con-box{
						padding-top: 2px;

						.con-txt{
							font-size: 16px;
							font-weight: 500;
							line-height: 18px;
							letter-spacing: -0.02em;

						}
					}
				}

				.btn-box{
					flex-shrink: 0;
					display: inline-flex;
					align-items: center;
					padding: 0 6px 0 12px;

					.reg-btn{
						background: url("/app/common/img/review/ic_review_reg.jpg") no-repeat center / cover;
						width: 50px;
						height: 55px;
					}

					.edit-btn{
						background: url("/app/common/img/review/ic_review_edit.jpg") no-repeat center / cover;
						width: 50px;
						height: 55px;
					}
				}
			}

			.item-options{
				margin-top: 8px;

				.options-head-box{


					background-color: #fff;
					padding: 6px 8px;
					display: flex;
					align-items: flex-start;
					position: relative;
					justify-content: space-between;
					border-radius:4px;
					gap: 8px;

					.head-box{
						font-size: 14px;
						line-height: 24px;
						letter-spacing: -0.02em;
						flex:1;
						min-width:0;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						word-wrap: normal;

					}

					.more-btn{
						flex-shrink: 0;
						background-color: #3b7d23;
						color: #fff;
						font-size: 12px;
						height: 24px;
						border-radius:4px;
						text-decoration: none;
						width: 50px;
						display: inline-flex;
						align-items: center;
						justify-content: center;


					}


				}

				.options-body-box{
					margin-top: 8px;
					display: flex;
					align-items: center;
					position: relative;
					padding-right: 28px;

					.remove-box{
						display: inline-flex;
						align-items: center;
						position: absolute;
						right:0;
						top:3px;

						.remove-btn{
							width: 22px;
							height: 22px;
							border:0;
							background: url("/app/common/img/review/ic_remove.png") no-repeat center / cover;
						}
					}

					.rate-box{
						margin-left: 12px;
					}

					.link-box{
						margin-left: 12px;
						display: inline-flex;
						align-items: center;

						.link-btn{
							width: 22px;
							height: 22px;
							border:0;
							background: url("/app/common/img/review/ic_link.png") no-repeat center / cover;

							&:disabled{
								background: url("/app/common/img/review/ic_link_disabled.png") no-repeat center / cover;

							}
						}
					}

					.thumbs-box{
						margin-left: 12px;
						display: inline-flex;
						align-items: center;
						gap: 4px;

						.thumbs-txt{
							font-size: 14px;
							font-weight: 500;
							letter-spacing: -0.02em;
							color: #0b76a0;

						}

.thumbs-btn{
    width: 22px;
    height: 22px;
    border: 0;
    cursor: pointer;
    background: url("/app/common/img/review/ic_thumbs.png") no-repeat center / cover;
    
    &.inactive{
        background: url("/app/common/img/review/ic_thumbs_disabled.png") no-repeat center / cover;
    }
}
					}

					.state-box{

						.state-label{
							color: #fff;
							height: 26px;
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 92px;
							border-radius:4px;
							font-size: 13px;

							&.state-ing{
								background-color: #4e95d9;
							}

							&.state-end{
								background-color: #7f7f7f
							}
						}

					}

				}

			}




		}


	}

	.detail-input-box{

		.input-box{
			padding: 4px;
			border-radius:4px;
			background: #fff;

			.input-txt{
				font-size: 16px;
				line-height: 20px;
				letter-spacing: -0.03em;
			}
		}

		.textarea-box{
			margin-top: 8px;
			padding: 4px;
			border-radius:4px;
			background: #fff;
			min-height: 80px;

			.textarea-txt{
				font-size: 16px;
				line-height: 24px;
				letter-spacing: -0.03em;

			}
		}

	}

	.detail-img-box{
		margin-top: 12px;
		display: flex;
		flex-direction: column;
		gap: 8px;

		.img-item{
			display: flex;
			justify-content: center;
			width: 100%;
			border-radius:4px;
			overflow: hidden;

			img{
				width: 100%;
				max-width:100%;
			}

		}
	}

}

article.msg-layer{
	position: fixed;
	z-index: 501;
	display: none;

	&:before{
		z-index: 400;
		position: fixed;
		top:0;
		right:0;
		bottom:0;
		left:0;
		content:'';
		background-color: rgba(0, 0, 0, .4);
	}

	&.full{

		.layer-wrapper{
			max-width:600px;
			top:12px;
			bottom:12px;
			left:50%;
			transform: translateX(-50%);
			width: calc(100% - 24px);


			.layer-contents{
				box-sizing: border-box;
				height: 100%;
				display: flex;
				flex-direction: column;
				padding: 8px;

				.layer-body{
				}

				.layer-footer{
					padding-top: 16px;

				}

			}
		}
	}

	.layer-body{
		overflow: auto;

		box-sizing: border-box;
		flex:1;
		min-width:0;
		min-height: 0;
	}
	.layer-footer{
		box-sizing: border-box;
		display: flex;

		.layer-footer-btn{
			outline: none;
			width: 100%;
			border:0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #a9a9a9;
			height: 34px;
			font-family: 'Cafe24Ohsquare';
			font-size: 16px;
			color: #fff;
			font-weight: 500;
			text-decoration: none;



		}


	}
	.layer-wrapper{
		box-sizing: border-box;
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		max-width:500px;
		margin:0 auto;
		width: calc(100% - 30px);
		z-index: 401;

		.layer-contents{
			border-radius:8px;
			padding: 40px 16px 20px;
			animation: showSweetAlert .3s;
			will-change: transform;
			background-color: #fff;
		}

		.img-view-list{

			.swiper{
				height: auto;
				background: transparent;
				border:0;
			}
			.swiper-slide{
				height: auto;
				padding: 0;
				border-radius:0;
				margin:0;
				border:0;
			}

			.item-wrap{
				max-height: 50vh;
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

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




		}

		.textarea-box{
			display: flex;
			textarea{
				font-family: 'Cafe24Ohsquare';
				outline: none;
				width: 100%;
				border: 1px solid #999;
				padding: 8px 8px 8px 8px;
				border-radius: 8px;
				font-size: 14px;
				line-height: 20px;
				font-weight: 500;
				position: relative;
				height: 200px;
				box-sizing: border-box;
				&::placeholder{
					color: #878789;
				}
			}
		}

		.msg-form-box{

			.form-txt-box{
				color: #595959;
				font-size: 22px;
				font-weight: 500;
				line-height: 26px;
				padding-bottom: 20px;
				text-align: center;
			}

			.form-guide-box{
				padding-top: 10px;
				font-size: 14px;
				line-height: 20px;
				text-align: center;
				color: #595959;

			}
			.form-input-box{
				display: flex;
				justify-content: center;

				input{
					width: 100%;
					outline: none;
					flex:1;
					min-width:0;
					margin:0;
					height: 30px;
					border-radius:4px;
					background-color: #fff;
					border: 1px solid #333;
					font-size: 14px;
					padding: 0 8px;
				}

			}

		}

		.input-box{
			display: flex;


			textarea{
				font-family: 'Cafe24Ohsquare';

				outline: none;
				width: 100%;
				border: 1px solid #665d95;
				padding: 8px 32px 8px 8px;
				border-radius: 8px;
				color: #878789;
				font-size: 16px;
				line-height: 20px;
				font-weight: 500;
				position: relative;
				height: 100px;
			}
		}

		.preview-box{
			display: flex;
			justify-content: center;

			.img-box{
				display: flex;
				max-width:400px;
				/*aspect-ratio: 1/1;*/

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

		.msg-box{
			text-align: center;

			.view-box{
				display: inline-flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding-bottom: 8px;

				.ic{

					&.ic-success{
						background: url("/app/common/img/delivery/img_delivery_chk.png") no-repeat center / cover;
						aspect-ratio: 1/1;
						width: 52px;
					}
				}

				.view-txt{
					padding-top: 12px;
					font-size: 24px;
					font-weight: 500;
					color: #555;

				}
			}

			.msg-txt{
				font-size: 18px;
				line-height: 24px;
				color: #555;
				letter-spacing: -0.02em;

				&.fc-red{
					color: red;
				}

				.small-txt{
					font-size: 14px;
					line-height: 20px;

					&.fc-red{
						color: red;
					}
				}

			}
		}

		.msn-btn-list{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 10px;
			padding-top: 30px;

			.msg-btn{
				outline: none;
				border-radius:8px;
				height: 40px;
				width: 74px;
				font-size: 14px;
				font-weight: 500;
				border:0;


				&.type-cancel{
					background-color: #efefef;
					color: #555;
				}

				&.type-success{
					background-color: #7cd1f9;
					color: #fff;
				}

			}
		}
	}

}

@-webkit-keyframes showSweetAlert {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	1% {
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
	45% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}
	80% {
		-webkit-transform: scale(.95);
		transform: scale(.95)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes showSweetAlert {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	1% {
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}
	45% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}
	80% {
		-webkit-transform: scale(.95);
		transform: scale(.95)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}





.swal-icon--error {
	border-color: #f27474;
	-webkit-animation: animateErrorIcon .5s;
	animation: animateErrorIcon .5s
}

.swal-icon--error__x-mark {
	position: relative;
	display: block;
	-webkit-animation: animateXMark .5s;
	animation: animateXMark .5s
}

.swal-icon--error__line {
	position: absolute;
	height: 5px;
	width: 47px;
	background-color: #f27474;
	display: block;
	top: 37px;
	border-radius: 2px
}

.swal-icon--error__line--left {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 17px
}

.swal-icon--error__line--right {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	right: 16px
}

@-webkit-keyframes animateErrorIcon {
	0% {
		-webkit-transform: rotateX(100deg);
		transform: rotateX(100deg);
		opacity: 0
	}
	to {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		opacity: 1
	}
}

@keyframes animateErrorIcon {
	0% {
		-webkit-transform: rotateX(100deg);
		transform: rotateX(100deg);
		opacity: 0
	}
	to {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		opacity: 1
	}
}

@-webkit-keyframes animateXMark {
	0% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	50% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	80% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
		margin-top: -6px
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
		margin-top: 0;
		opacity: 1
	}
}

@keyframes animateXMark {
	0% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	50% {
		-webkit-transform: scale(.4);
		transform: scale(.4);
		margin-top: 26px;
		opacity: 0
	}
	80% {
		-webkit-transform: scale(1.15);
		transform: scale(1.15);
		margin-top: -6px
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1);
		margin-top: 0;
		opacity: 1
	}
}

.swal-icon--warning {
	border-color: #f8bb86;
	-webkit-animation: pulseWarning .75s infinite alternate;
	animation: pulseWarning .75s infinite alternate
}

.swal-icon--warning__body {
	width: 5px;
	height: 47px;
	top: 10px;
	border-radius: 2px;
	margin-left: -2px
}

.swal-icon--warning__body, .swal-icon--warning__dot {
	position: absolute;
	left: 50%;
	background-color: #f8bb86
}

.swal-icon--warning__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: -4px;
	bottom: -11px
}

@-webkit-keyframes pulseWarning {
	0% {
		border-color: #f8d486
	}
	to {
		border-color: #f8bb86
	}
}

@keyframes pulseWarning {
	0% {
		border-color: #f8d486
	}
	to {
		border-color: #f8bb86
	}
}

.swal-icon--success {
	border-color: #a5dc86
}

.swal-icon--success:after, .swal-icon--success:before {
	content: "";
	border-radius: 50%;
	position: absolute;
	width: 60px;
	height: 120px;
	background: #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg)
}

.swal-icon--success:before {
	border-radius: 120px 0 0 120px;
	top: -7px;
	left: -33px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 60px 60px;
	transform-origin: 60px 60px
}

.swal-icon--success:after {
	border-radius: 0 120px 120px 0;
	top: -11px;
	left: 30px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0 60px;
	transform-origin: 0 60px;
	-webkit-animation: rotatePlaceholder 4.25s ease-in;
	animation: rotatePlaceholder 4.25s ease-in
}

.swal-icon--success__ring {
	width: 80px;
	height: 80px;
	border: 4px solid hsla(98, 55%, 69%, .2);
	border-radius: 50%;
	box-sizing: content-box;
	position: absolute;
	left: -4px;
	top: -4px;
	z-index: 2
}

.swal-icon--success__hide-corners {
	width: 5px;
	height: 90px;
	background-color: #fff;
	padding: 1px;
	position: absolute;
	left: 28px;
	top: 8px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg)
}

.swal-icon--success__line {
	height: 5px;
	background-color: #a5dc86;
	display: block;
	border-radius: 2px;
	position: absolute;
	z-index: 2
}

.swal-icon--success__line--tip {
	width: 25px;
	left: 14px;
	top: 46px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-animation: animateSuccessTip .75s;
	animation: animateSuccessTip .75s
}

.swal-icon--success__line--long {
	width: 47px;
	right: 8px;
	top: 38px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: animateSuccessLong .75s;
	animation: animateSuccessLong .75s
}

@-webkit-keyframes rotatePlaceholder {
	0% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	5% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	12% {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
	to {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
}

@keyframes rotatePlaceholder {
	0% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	5% {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	12% {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
	to {
		-webkit-transform: rotate(-405deg);
		transform: rotate(-405deg)
	}
}

@-webkit-keyframes animateSuccessTip {
	0% {
		width: 0;
		left: 1px;
		top: 19px
	}
	54% {
		width: 0;
		left: 1px;
		top: 19px
	}
	70% {
		width: 50px;
		left: -8px;
		top: 37px
	}
	84% {
		width: 17px;
		left: 21px;
		top: 48px
	}
	to {
		width: 25px;
		left: 14px;
		top: 45px
	}
}

@keyframes animateSuccessTip {
	0% {
		width: 0;
		left: 1px;
		top: 19px
	}
	54% {
		width: 0;
		left: 1px;
		top: 19px
	}
	70% {
		width: 50px;
		left: -8px;
		top: 37px
	}
	84% {
		width: 17px;
		left: 21px;
		top: 48px
	}
	to {
		width: 25px;
		left: 14px;
		top: 45px
	}
}

@-webkit-keyframes animateSuccessLong {
	0% {
		width: 0;
		right: 46px;
		top: 54px
	}
	65% {
		width: 0;
		right: 46px;
		top: 54px
	}
	84% {
		width: 55px;
		right: 0;
		top: 35px
	}
	to {
		width: 47px;
		right: 8px;
		top: 38px
	}
}

@keyframes animateSuccessLong {
	0% {
		width: 0;
		right: 46px;
		top: 54px
	}
	65% {
		width: 0;
		right: 46px;
		top: 54px
	}
	84% {
		width: 55px;
		right: 0;
		top: 35px
	}
	to {
		width: 47px;
		right: 8px;
		top: 38px
	}
}

.swal-icon--info {
	border-color: #c9dae1
}

.swal-icon--info:before {
	width: 5px;
	height: 29px;
	bottom: 17px;
	border-radius: 2px;
	margin-left: -2px
}

.swal-icon--info:after, .swal-icon--info:before {
	content: "";
	position: absolute;
	left: 50%;
	background-color: #c9dae1
}

.swal-icon--info:after {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-left: -3px;
	top: 19px
}

.swal-icon {
	width: 80px;
	height: 80px;
	border-width: 4px;
	border-style: solid;
	border-radius: 50%;
	padding: 0;
	position: relative;
	box-sizing: content-box;
	margin: 20px auto
}

.swal-icon:first-child {
	margin-top: 32px
}

.swal-icon--custom {
	width: auto;
	height: auto;
	max-width: 100%;
	border: none;
	border-radius: 0
}

.swal-icon img {
	max-width: 100%;
	max-height: 100%
}

.swal-title {
	color: rgba(0, 0, 0, .65);
	font-weight: 600;
	text-transform: none;
	position: relative;
	display: block;
	padding: 13px 16px;
	font-size: 27px;
	line-height: normal;
	text-align: center;
	margin-bottom: 0
}

.swal-title:first-child {
	margin-top: 26px
}

.swal-title:not(:first-child) {
	padding-bottom: 0
}

.swal-title:not(:last-child) {
	margin-bottom: 13px
}

.swal-text {
	font-size: 16px;
	position: relative;
	float: none;
	line-height: normal;
	vertical-align: top;
	text-align: left;
	display: inline-block;
	margin: 0;
	padding: 0 10px;
	font-weight: 400;
	color: rgba(0, 0, 0, .64);
	max-width: calc(100% - 20px);
	overflow-wrap: break-word;
	box-sizing: border-box
}

.swal-text:first-child {
	margin-top: 45px
}

.swal-text:last-child {
	margin-bottom: 45px
}

.swal-footer {
	text-align: right;
	padding-top: 13px;
	margin-top: 13px;
	padding: 13px 16px;
	border-radius: inherit;
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.swal-button-container {
	margin: 5px;
	display: inline-block;
	position: relative
}

.swal-button {
	background-color: #7cd1f9;
	color: #fff;
	border: none;
	box-shadow: none;
	border-radius: 5px;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 24px;
	margin: 0;
	cursor: pointer
}

.swal-button:not([disabled]):hover {
	background-color: #78cbf2
}

.swal-button:active {
	background-color: #70bce0
}

.swal-button:focus {
	outline: none;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(43, 114, 165, .29)
}

.swal-button[disabled] {
	opacity: .5;
	cursor: default
}

.swal-button::-moz-focus-inner {
	border: 0
}

.swal-button--cancel {
	color: #555;
	background-color: #efefef
}

.swal-button--cancel:not([disabled]):hover {
	background-color: #e8e8e8
}

.swal-button--cancel:active {
	background-color: #d7d7d7
}

.swal-button--cancel:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(116, 136, 150, .29)
}

.swal-button--danger {
	background-color: #e64942
}

.swal-button--danger:not([disabled]):hover {
	background-color: #df4740
}

.swal-button--danger:active {
	background-color: #cf423b
}

.swal-button--danger:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(165, 43, 43, .29)
}

.swal-content {
	padding: 0 20px;
	margin-top: 20px;
	font-size: medium
}

.swal-content:last-child {
	margin-bottom: 20px
}

.swal-content__input, .swal-content__textarea {
	-webkit-appearance: none;
	background-color: #fff;
	border: none;
	font-size: 14px;
	display: block;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .14);
	padding: 10px 13px;
	border-radius: 2px;
	transition: border-color .2s
}

.swal-content__input:focus, .swal-content__textarea:focus {
	outline: none;
	border-color: #6db8ff
}

.swal-content__textarea {
	resize: vertical
}

.swal-button--loading {
	color: transparent
}

.swal-button--loading ~ .swal-button__loader {
	opacity: 1
}

.swal-button__loader {
	position: absolute;
	height: auto;
	width: 43px;
	z-index: 2;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	pointer-events: none;
	opacity: 0
}

.swal-button__loader div {
	display: inline-block;
	float: none;
	vertical-align: baseline;
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	margin: 2px;
	opacity: .4;
	border-radius: 7px;
	background-color: hsla(0, 0%, 100%, .9);
	transition: background .2s;
	-webkit-animation: swal-loading-anim 1s infinite;
	animation: swal-loading-anim 1s infinite
}

.swal-button__loader div:nth-child(3n+2) {
	-webkit-animation-delay: .15s;
	animation-delay: .15s
}

.swal-button__loader div:nth-child(3n+3) {
	-webkit-animation-delay: .3s;
	animation-delay: .3s
}

@-webkit-keyframes swal-loading-anim {
	0% {
		opacity: .4
	}
	20% {
		opacity: .4
	}
	50% {
		opacity: 1
	}
	to {
		opacity: .4
	}
}

@keyframes swal-loading-anim {
	0% {
		opacity: .4
	}
	20% {
		opacity: .4
	}
	50% {
		opacity: 1
	}
	to {
		opacity: .4
	}
}

.swal-overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 0;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, .4);
	z-index: 10000;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s
}

.swal-overlay:before {
	content: " ";
	display: inline-block;
	vertical-align: middle;
	height: 100%
}

.swal-overlay--show-modal {
	opacity: 1;
	pointer-events: auto
}

.swal-overlay--show-modal .swal-modal {
	opacity: 1;
	pointer-events: auto;
	box-sizing: border-box;
	-webkit-animation: showSweetAlert .3s;
	animation: showSweetAlert .3s;
	will-change: transform
}

.swal-modal {
	width: 478px;
	opacity: 0;
	pointer-events: none;
	background-color: #fff;
	text-align: center;
	border-radius: 5px;
	position: static;
	margin: 20px auto;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	z-index: 10001;
	transition: opacity .2s, -webkit-transform .3s;
	transition: transform .3s, opacity .2s;
	transition: transform .3s, opacity .2s, -webkit-transform .3s
}

@media (max-width: 500px) {
	.swal-modal {
		width: calc(100% - 20px)
	}
}
.thumbs-btn {
    width: 22px;
    height: 22px;
    border: 0;
    cursor: pointer;
}

article.review-no-more{

	.no-more-wrap{
		padding: 24px;
		background-color: #efeef4;
		border: 1px solid #ddd;
		border-radius: 4px;
		color: #32759c;
		font-size: 16px;
		line-height: 24px;
		font-weight: 500;
		text-align: center;
	}

}


aside.floating-btn-box{
	z-index: 100;
	position: fixed;
	right:20px;
	bottom:24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;


	.floating-btn{
		background: url("/app/common/img/review/ic_floating_btn.png") no-repeat center / cover;
		width: 44px;
		height: 44px;
	}

}

.item-contents {
    display: flex;
    gap: 5px;
}

/* 이미지 + 버튼 묶음 */
.img-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    flex-shrink: 0;
}

.img-box2 {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 6px;
    background-color: #f9f9f9;
}

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

/* 버튼 스타일 */
.btn-box {
    margin-top: 8px;
    text-align: center;
}

.review-btn {
    all: unset;
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
}

.review-btn.write {
    background-color: #e74a90;
}

.review-btn.edit {
    background-color: #888;
}

/* 후기 화면 머리 — 앱 아이콘 그림 대신 제목 띠(2026-11-03). 후기보기 · 후기쓰기가 같이 쓴다 */
article.review-banner .rv-title { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; padding: 16px; border-radius: 16px; background: linear-gradient(120deg, #fff4e5, #ffe9f1); }
article.review-banner .rv-title__ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 15px; background: #fff; box-shadow: 0 6px 16px -8px rgba(214, 90, 60, .45); color: #f08a24; }
article.review-banner .rv-title__ico svg { width: 25px; height: 25px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
article.review-banner .rv-title__txt { min-width: 0; }
article.review-banner .rv-title__txt b { display: block; font-size: 18px; font-weight: 800; color: #1f1a17; letter-spacing: -0.04em; }
article.review-banner .rv-title__txt small { display: block; margin-top: 3px; font-size: 13px; color: #7a6f68; letter-spacing: -0.03em; word-break: keep-all; }
/* 후기가 없을 때 — 윗딜 그림 대신 어느 마켓에서나 맞는 안내 */
.rv-empty { display: flex; flex-direction: column; align-items: center; margin: 18px 0; padding: 36px 20px 30px; border-radius: 16px; background: #f7f7f9; list-style: none; text-align: center; }
.rv-empty__ico { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 20px; background: #fff; color: #c9c4cf; box-shadow: 0 6px 18px -10px rgba(30, 30, 50, .35); }
.rv-empty__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rv-empty b { display: block; margin-top: 14px; font-size: 16px; font-weight: 800; color: #2b2830; letter-spacing: -0.04em; }
.rv-empty p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: #8a8592; letter-spacing: -0.03em; }
.rv-empty__btn { margin-top: 16px; height: 40px; padding: 0 20px; border: 0; border-radius: 12px; background: #2b2830; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }