@charset "utf-8";
/* ===========================================
 * MAIN
 * ======================================== */
.container {
  background-color: #F6BEC8;
}
/* ===========================================
 * KV
 * ======================================== */
.kv__wrap {
  margin-inline: auto;
}
.kv__inner {
  margin-inline: auto;
}
.kv__img {
  width: 100%;
  display: block;
}
/* ===========================================
 * MODAL
 * ======================================== */
.modalArea {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	display: none;
}
.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30, 30, 30, 0.9);
}
.modalWrapper {
	width: min(calc(100% - 60px), 315px);
	height: min(calc(100% - 60px), 500px);
	padding: 20px;
	border-radius: 10px;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.closeModal {
	width: 40px;
	height: 40px;
	font-size: 20px;
	border-radius: 9999px;
	background-color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -20px;
	right: -20px;
	cursor: pointer;
	&::before,
	&::after {
		content: "";
		background: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2px;
		height: 50%;
	}
	&::before {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	&::after {
		transform: translate(-50%,-50%) rotate(-45deg);
	}
}
.modalThumbnail {
	width: 60%;
	margin: 0 auto 30px;
}

.modalList {
	width: fit-content;
	margin: auto;
	display: grid;
	grid-template-columns: 109px 135px;
	grid-template-rows: auto;
	gap: 10px;
}