@charset "utf-8";

article {
border-radius: 2rem;
	padding-top:2rem;
	padding-bottom:2rem;
	display:flex;
	flex-direction: column;
	height:100%;
}

.review-ul {
	padding: 2rem;
}


.review-li {
	display: flex;
	align-items: flex-start;
	/* 기본 정렬을 상단으로 설정 */
	gap: 2rem;
	padding: 1rem 0;
	min-height: 150px;
	/* 기본 높이를 300px로 설정 */
	flex-wrap: nowrap;
}

.review-li * {
	font-size: 1rem;
}

.review-li .head-n-img {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
	height:200px;
}
.review-li .li-head {
	width: 170px;

}

.review-li .li-head > * {
	white-space: nowrap;
}

.review-li .li-head .li-sort {
	font-weight: 900;
}

.review-li .sale-doc {
	height: 200px;
	width: 300px;
	align-content: center;
	flex: 0 0 300px;
	overflow: hidden;
	align-self: center;
	border: 1px solid var(--bs-gray-300);
	background-color: #fff;
}

.review-li .sale-doc img.doc-thumb {
	height: auto;
	width: 100%;
	object-fit: contain;
	align-self: center;
	cursor: pointer;
	max-height: 100%;
}

.review-li .review-text {
	flex: 1 0 300px;
	overflow-y: auto;
	max-height: 100%;
	align-self: center;
	white-space: pre-wrap;
}


button#load-more {
	flex: 0 0 auto;
	width:300px;
	align-self: center;
}
@media (max-width: 1200px) {
	.head-n-img {
	}
	.review-li {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	.review-li .head-n-img {
		height:75px;
	}
	.review-li .sale-doc {
		flex: 1 0 150px;
		width: 100%;
		height: 75px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}

	.review-li .sale-doc img.doc-thumb {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.review-li .review-text {
		flex: 1 0 100%;
		align-self: center;
		padding: 0 .5rem;
	}
}

@media (max-width:768px) {
		section, article {
		margin: 0 !important;
		padding: 0 !important ;
		border-radius: 0 !important;
			width:100%;
			max-width:none !important;
	}
	article {
		padding-bottom: 1rem !important ;
	}

}