/* =========================================================
	Featured Projects
	- index.php featured 연결 영역
	- project.php 프로젝트 목록 및 상세 레이어
========================================================= */

/* index.php: 기존 섹션 구조를 유지하면서 링크 기능만 확장 */
#featured-projects .featured-projects-title a{
	color:inherit;
	text-decoration:none;
}

#featured-projects .featured-project-item{
	position:relative;
	display:block;
	color:#fff;
	text-decoration:none;
	cursor:pointer;
}

#featured-projects .featured-project-item::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 58%);
	opacity:0;
	transition:opacity .35s ease;
	pointer-events:none;
}

#featured-projects .featured-project-meta{
	position:absolute;
	right:24px;
	bottom:22px;
	left:24px;
	z-index:2;
	text-align:left;
	opacity:0;
	transform:translateY(12px);
	transition:opacity .35s ease, transform .35s ease;
}

#featured-projects .featured-project-category{
	display:block;
	margin-bottom:7px;
	font-size:13px;
	font-weight:500;
}

#featured-projects .featured-project-name{
	display:block;
	font-size:22px;
	font-weight:700;
	line-height:1.3;
}

#featured-projects .featured-project-item:hover::after,
#featured-projects .featured-project-item:focus-visible::after,
#featured-projects .featured-project-item:hover .featured-project-meta,
#featured-projects .featured-project-item:focus-visible .featured-project-meta{
	opacity:1;
}

#featured-projects .featured-project-item:hover .featured-project-meta,
#featured-projects .featured-project-item:focus-visible .featured-project-meta{
	transform:translateY(0);
}

#featured-projects .featured-project-item:focus-visible{
	outline:3px solid #df3c20;
	outline-offset:3px;
}

/* project.php: 03 아트보드 */
.featured-projects-page{
	background:#fff;
	color:#171717;
}

.featured-projects-page .top{
	pointer-events:none;
}

.featured-projects-page .top .main-logo,
.featured-projects-page .top .menu_icon{
	pointer-events:auto;
}

.featured-projects-page .main-logo,
.featured-projects-page .menu_icon{
	filter:invert(1) brightness(.15);
}

.featured-projects-page .main-logo{
	left:80px;
}

.featured-projects-page .menu_icon{
	right:80px;
}

.featured-projects-page .fp-page{
	width:100%;
	min-height:100vh;
	padding:240px 0 80px;
	background:#fff;
}

.featured-projects-page .fp-page-inner{
	display:grid;
	grid-template-columns:minmax(280px, 32%) minmax(0, 1fr);
	gap:48px;
	width:calc(100% - 160px);
	margin:0 auto;
}

.featured-projects-page .fp-sidebar{
	align-self:start;
	position:sticky;
	top:160px;
}

.featured-projects-page .fp-title{
	margin:0;
	font-family:'BespokeSerif-ExtraBold', serif;
	font-size:48px;
	font-weight:800;
	line-height:1.05;
}

.featured-projects-page .fp-description{
	margin:40px 0 0;
	font-size:16px;
	font-weight:400;
	line-height:1.55;
	word-break:keep-all;
}

.featured-projects-page .fp-filters{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:8px;
	margin-top:40px;
}

.featured-projects-page .fp-filter{
	position:relative;
	margin:0;
	padding:1px 0;
	border:0;
	background:none;
	color:#111;
	font-family:inherit;
	font-size:17px;
	font-weight:500;
	line-height:1.35;
	text-align:left;
	cursor:pointer;
}

.featured-projects-page .fp-filter::after{
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	height:2px;
	background:#111;
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .22s ease;
}

.featured-projects-page .fp-filter:hover::after,
.featured-projects-page .fp-filter:focus-visible::after,
.featured-projects-page .fp-filter.is-active::after{
	transform:scaleX(1);
}

.featured-projects-page .fp-filter.is-active{
	font-weight:700;
}

.featured-projects-page .fp-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:16px;
	align-items:start;
}

.featured-projects-page .fp-card{
	position:relative;
	display:block;
	min-width:0;
	aspect-ratio:520 / 356;
	overflow:hidden;
	background:#f0f0f0;
	color:#fff;
	text-decoration:none;
}

.featured-projects-page .fp-card[hidden]{
	display:none;
}

.featured-projects-page .fp-card-image{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

.featured-projects-page .fp-card::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.08) 62%, rgba(0,0,0,0) 100%);
	opacity:0;
	transition:opacity .35s ease;
}

.featured-projects-page .fp-card-info{
	position:absolute;
	right:24px;
	bottom:22px;
	left:24px;
	z-index:2;
	opacity:0;
	transform:translateY(14px);
	transition:opacity .35s ease, transform .35s ease;
}

.featured-projects-page .fp-card-category{
	display:block;
	margin-bottom:7px;
	font-size:13px;
	font-weight:500;
}

.featured-projects-page .fp-card-title{
	display:block;
	font-size:22px;
	font-weight:700;
	line-height:1.3;
	word-break:keep-all;
}

.featured-projects-page .fp-card:hover .fp-card-image,
.featured-projects-page .fp-card:focus-visible .fp-card-image{
	transform:scale(1.035);
}

.featured-projects-page .fp-card:hover::after,
.featured-projects-page .fp-card:focus-visible::after,
.featured-projects-page .fp-card:hover .fp-card-info,
.featured-projects-page .fp-card:focus-visible .fp-card-info{
	opacity:1;
}

.featured-projects-page .fp-card:hover .fp-card-info,
.featured-projects-page .fp-card:focus-visible .fp-card-info{
	transform:translateY(0);
}

.featured-projects-page .fp-card:focus-visible{
	outline:3px solid #df3c20;
	outline-offset:3px;
}

.featured-projects-page .fp-empty{
	grid-column:1 / -1;
	padding:80px 20px;
	background:#f6f6f6;
	font-size:16px;
	text-align:center;
}

/* project.php: 04 아트보드 상세 레이어 */
.fp-modal{
	position:fixed;
	inset:0;
	z-index:2400;
	display:none;
	padding:80px;
	background:#242424;
}

.fp-modal.is-open{
	display:block;
}

.fp-modal-backdrop{
	position:absolute;
	inset:0;
}

.fp-modal-dialog{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:minmax(300px, 36%) minmax(0, 64%);
	width:100%;
	height:100%;
	overflow:hidden;
	border-radius:28px;
	background:#111;
	box-shadow:0 24px 80px rgba(0,0,0,.38);
	color:#fff;
}

.fp-modal-close{
	position:absolute;
	top:20px;
	right:20px;
	z-index:5;
	width:48px;
	height:48px;
	padding:0;
	border:0;
	border-radius:50%;
	background:#000;
	color:#fff;
	cursor:pointer;
}

.fp-modal-close::before,
.fp-modal-close::after{
	content:"";
	position:absolute;
	top:23px;
	left:14px;
	width:20px;
	height:2px;
	background:#fff;
}

.fp-modal-close::before{
	transform:rotate(45deg);
}

.fp-modal-close::after{
	transform:rotate(-45deg);
}

.fp-modal-close:hover,
.fp-modal-close:focus-visible{
	background:#df3c20;
}

.fp-modal-copy{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	padding:80px 40px 60px;
	overflow:auto;
}

.fp-modal-category{
	margin:0;
	font-size:16px;
	font-weight:500;
	line-height:1.4;
}

.fp-modal-title{
	margin:40px 0 0;
	font-size:34px;
	font-weight:700;
	line-height:1.35;
	word-break:keep-all;
}

.fp-modal-meta{
	display:grid;
	gap:28px;
	width:100%;
	margin:40px 0 0;
}

.fp-modal-meta-item{
	display:grid;
	gap:4px;
}

.fp-modal-meta dt{
	margin:0;
	font-size:13px;
	font-weight:500;
	letter-spacing:.03em;
}

.fp-modal-meta dd{
	margin:0;
	font-size:18px;
	font-weight:400;
	line-height:1.55;
	white-space:pre-line;
	word-break:keep-all;
}

.fp-modal-gallery{
	display:flex;
	flex-direction:column;
	gap:40px;
	height:100%;
	padding:80px 40px 80px 0;
	box-sizing:border-box;
	overflow-y:auto;
	overscroll-behavior:contain;
}

.fp-modal-gallery img{
	display:block;
	width:100%;
	height:auto;
	background:#191919;
}

body.fp-modal-open{
	overflow:hidden !important;
}

@media (max-width:1200px){
	.featured-projects-page .fp-page-inner{
		grid-template-columns:280px minmax(0, 1fr);
		gap:32px;
		width:calc(100% - 80px);
	}

	.featured-projects-page .main-logo{
		left:40px;
	}

	.featured-projects-page .menu_icon{
		right:40px;
	}

	.featured-projects-page .fp-title{
		font-size:40px;
	}

	.fp-modal{
		padding:40px;
	}

	.fp-modal-copy{
		padding:70px 36px 48px;
	}

	.fp-modal-gallery{
		gap:28px;
		padding:70px 32px 70px 0;
	}
}

@media (max-width:900px){
	.featured-projects-page .fp-page{
		padding-top:180px;
	}

	.featured-projects-page .fp-page-inner{
		grid-template-columns:1fr;
	}

	.featured-projects-page .fp-sidebar{
		position:static;
	}

	.featured-projects-page .fp-filters{
		flex-direction:row;
		flex-wrap:wrap;
		gap:10px 20px;
	}

	.fp-modal-dialog{
		grid-template-columns:1fr;
		overflow-y:auto;
	}

	.fp-modal-copy{
		overflow:visible;
	}

	.fp-modal-gallery{
		height:auto;
		padding:0 24px 24px;
		overflow:visible;
	}
}

@media (max-width:767px){
	#featured-projects .featured-project-meta{
		right:16px;
		bottom:15px;
		left:16px;
	}

	#featured-projects .featured-project-category{
		font-size:11px;
	}

	#featured-projects .featured-project-name{
		font-size:17px;
	}

	.featured-projects-page .fp-page{
		padding:120px 0 60px;
	}

	.featured-projects-page .fp-page-inner{
		width:calc(100% - 40px);
		gap:48px;
	}

	.featured-projects-page .main-logo{
		left:20px;
	}

	.featured-projects-page .menu_icon{
		right:20px;
	}

	.featured-projects-page .fp-title{
		font-size:30px;
	}

	.featured-projects-page .fp-description{
		margin-top:24px;
		font-size:14px;
	}

	.featured-projects-page .fp-filters{
		margin-top:28px;
		gap:8px 16px;
	}

	.featured-projects-page .fp-filter{
		font-size:14px;
	}

	.featured-projects-page .fp-grid{
		grid-template-columns:1fr;
		gap:12px;
	}

	.featured-projects-page .fp-card-info{
		right:18px;
		bottom:16px;
		left:18px;
	}

	.featured-projects-page .fp-card-category{
		font-size:12px;
	}

	.featured-projects-page .fp-card-title{
		font-size:18px;
	}

	.fp-modal{
		padding:16px;
	}

	.fp-modal-dialog{
		border-radius:18px;
	}

	.fp-modal-close{
		position:fixed;
		top:26px;
		right:26px;
		width:42px;
		height:42px;
	}

	.fp-modal-close::before,
	.fp-modal-close::after{
		top:20px;
		left:12px;
		width:18px;
	}

	.fp-modal-copy{
		padding:72px 24px 48px;
	}

	.fp-modal-title{
		margin-top:28px;
		font-size:26px;
	}

	.fp-modal-meta{
		gap:22px;
		margin-top:32px;
	}

	.fp-modal-meta dd{
		font-size:16px;
	}

	.fp-modal-gallery{
		gap:10px;
		padding:0 16px 16px;
	}

}

@media (hover:none){
	#featured-projects .featured-project-item::after,
	#featured-projects .featured-project-meta,
	.featured-projects-page .fp-card::after,
	.featured-projects-page .fp-card-info{
		opacity:1;
	}

	#featured-projects .featured-project-meta,
	.featured-projects-page .fp-card-info{
		transform:none;
	}
}