/* 📂 경로: /public/assets/css/pages/home/about.css */

/* ============================ Portfolio Title ============================ */
section .title {
	margin-bottom: 3rem;
}

	section .title h4 {
		font-size: 1.75rem;
		color: #ed4848;
		position: relative;
	}

	section .title h2 {
		font-size: 3.5rem;
	}

/* ============================ Gallery Filter ============================ */
.gallery-filter {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px; /* ✅ 버튼 간격 좁게 */
	margin-bottom: 1rem;
}

.filter-button {
	font-size: 1.1rem;
	height: 46px; /* ✅ 높이 고정 */
	padding: 0 14px; /* ✅ 좌우 여백만 적용 → 텍스트 길이에 맞춰 너비 결정 */
	min-width: 48px; /* ✅ 최소 너비 설정 (너무 좁아지지 않게) */
	border: 1px solid #000;
	border-radius: 6px;
	background-color: #fff;
	color: #000;
	cursor: pointer;
	display: inline-flex; /* ✅ 텍스트 가운데 정렬을 위한 설정 */
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, color 0.3s ease;
	box-sizing: border-box;
	margin-top: 1rem; /* ✅ 상단 여백 추가 */
}

	.filter-button:hover {
		background-color: #ff6a6a;
		color: #fff;
	}

	.filter-button.active {
		background-color: #333;
		color: #fff;
	}


/* ============================ Gallery Grid ============================ */
.gallery_product {
	width: 100%;
	height: auto;
}

.js-masonry-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.js-masonry-elm {
	flex: 1 1 calc(25% - 20px); /* ✅ 한 줄에 4개 */
	max-width: 300px;
	min-width: 220px;
	height: 350px;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
	opacity: 1;
	transform: scale(0.5);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

	.js-masonry-elm.show {
		opacity: 1;
		transform: scale(1);
		transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	}

	.js-masonry-elm.hide {
		opacity: 0;
		transform: scale(0.5);
		transition: opacity 0.2s ease-out, transform 0.2s ease-out;
	}

	.js-masonry-elm .img {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		padding: 5%;
		border-radius: 5px;
		transition: transform 2s ease;
	}

		.js-masonry-elm .img:hover {
			transform: scale(3);
		}

	.js-masonry-elm p {
		color: white;
		background: black;
		border-radius: 10px;
		padding: 3px 20px;
		font-size: 1vw;
		font-family: "견고딕", sans-serif;
		box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.5);
		text-decoration: none;
	}

/* ============================ Responsive Grid ============================ */
@media (max-width: 1200px) {
	.js-masonry-elm {
		flex: 1 1 calc(33.333% - 20px); /* ✅ 3열 */
	}
}

@media (max-width: 992px) {
	.js-masonry-elm {
		flex: 1 1 calc(50% - 20px); /* ✅ 2열 */
	}

		.js-masonry-elm p {
			font-size: 1rem; /* ✅ 제목 텍스트 크기 조절 */
		}
}

@media (max-width: 576px) {
	.js-masonry-elm {
		flex: 1 1 100%; /* ✅ 1열 */
	}

		.js-masonry-elm p {
			font-size: 1.1rem; /* ✅ 모바일에서 더 크게 */
		}
}




/* Popup Styles */
.popup {
	display: none;
	position: fixed;
	z-index: 2000; /* 헤더(1030), 푸터(1020)보다 위로 */
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.8);
}

.popup-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

.popup-content-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.popup-text {
	position: absolute;
	bottom: 10px;
	color: white;
	font-size: 2vw;
	text-shadow: 2px 2px 4px #000;
	max-width: 80%;
}

.popup-close {
	position: absolute;
	z-index: 2100;
	top: 15px;
	right: 35px;
	color: #fff;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
}

	.popup-close:hover,
	.popup-close:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}