/* tailwind css  */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--font-paperlogy: "Paperlogy", sans-serif;
	--color-text: #000000;
}

@font-face {
	font-family: "Paperlogy";
	src: url("../fonts/paperlogy/Paperlogy-4Regular.ttf") format("truetype");
	font-weight: 400; /* Or 400 */
	font-style: normal;
}

@font-face {
	font-family: "Paperlogy";
	src: url("../fonts/paperlogy/Paperlogy-7Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: "Paperlogy";
	src: url("../fonts/paperlogy/Paperlogy-5Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}

body {
	color: var(--color-text);
	font-family: var(--font-paperlogy);
	font-style: normal;
	line-height: normal;
}

/* When the hidden checkbox is checked, style the custom-checkbox span */
input[type="checkbox"]:checked + label .custom-checkbox {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ABEF7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.container {
	margin: 0 auto;
	padding-inline: 15px;
}
@media screen and (min-width: 1280px) {
	.container {
		max-width: 1470px;
		padding-inline: 40px;
	}
}
.container-full {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Hero section full width */
.hero-section {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.hero-section .swiper-slide > div {
	width: 100%;
}

/* Hero 내부 콘텐츠는 기본 container 사용 */
.swiper-hero-pagination {
	position: absolute;
	bottom: 44px !important;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 30px;
	z-index: 10;
}
.swiper-hero-pagination .swiper-pagination-bullet {
	width: 40px;
	height: 5px;
	opacity: 0.7;
	border-radius: 0;
	background-color: #fff;
}
.swiper-hero-pagination
	.swiper-pagination-bullet.swiper-pagination-bullet-active {
	opacity: 1;
}
.swiper-review-pagination {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	gap: 12px;
}

.swiper-review-pagination .swiper-pagination-bullet {
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-text);
	border-radius: 50%;
	background: transparent;
	margin-top: 24px !important;
	opacity: 1;
}

.swiper-review-pagination
	.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: var(--color-text);
}

@media screen and (min-width: 768px) {
	.swiper-hero-pagination {
		gap: 59px;
	}
	.swiper-hero-pagination .swiper-pagination-bullet {
		width: 80px;
		height: 6px;
	}
}