/* main.php 전용(및 메인 스타일 공유) */

/* Intro (top logo screen) */
.intro{
	max-width: 100%;
	/* 인트로는 과하게 길지 않게, 히어로는 아래에 바로 이어짐 */
	height: clamp(260px, 45vh, 340px);
	min-height: 260px;
	margin: 0;
	padding: 48px 20px 18px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1px solid var(--line);
	background: #f3f4f6;
	position: fixed;
	top: var(--topbar-h);
	left: 0;
	right: 0;
	z-index: 9;
	overflow: hidden;
	transform: translateY(0);
	transition: transform 650ms cubic-bezier(.22,1,.36,1);
	will-change: transform;
}
.intro.is-out{
	transform: translateY(-110%);
}
.intro-title{
	font-family: 'Poppins', sans-serif;
	font-size: clamp(64px, 9vw, 160px);
	font-weight: 600;
	letter-spacing: -0.08em;
	line-height: 0.95;
	color: #111;
	text-align: center;
}
.intro-title sup{
	font-size: 0.22em;
	vertical-align: top;
	position: relative;
	top: -0.35em;
	letter-spacing: -0.02em;
}
.intro-hint{
	position: absolute;
	left: 20px;
	bottom: 18px;
	font-size: 12px;
	color: #6b7280;
}

/* Hero + Video */
.hero-video{
	width: 100%;
	margin: 0;
	padding: 0;
}
.hero-video-inner{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #111;
}
.hero-video-inner iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* YouTube 상단 UI 영역: 오버레이로 덮음 */
.hero-video-top-overlay{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 55%, transparent 100%);
	pointer-events: auto;
	z-index: 1;
}
.hero{
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 48px 20px 0;
}

/* 인트로 노출 중에는 히어로가 비치지 않게 */
body.has-intro .hero{
	visibility: hidden;
}
.hero-grid{
	display:grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 34px;
	align-items:start;
	padding-bottom: 26px;
}
.hero-title{
	font-family: 'Poppins', sans-serif;
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 0.95;
}
.hero-right{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px 22px;
	padding-top: 18px;
}
.meta .label{
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 6px;
}
.meta .value{
	font-size: 14px;
	color: #222;
	font-weight: 500;
	line-height: 1.6;
	white-space: pre-line;
}

/* Description */
.desc{
	max-width: 100%;
	margin: 0;
	padding: 60px 20px;
}
.desc-grid{
	display:grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 34px;
}
.desc-right .label{
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 10px;
}
.desc-right p{
	font-size: 14px;
	color: #222;
	line-height: 1.75;
}
.desc-right p + p{
	margin-top: 14px;
}
.desc-left{
	color: var(--muted);
	font-size: 16px;
	line-height: 1.75;
}

/* Gallery */
.gallery{
	max-width: 100%;
	margin: 0;
	padding: 0 10px 150px;
}
.gallery-grid{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.g-item{
	display: block;
	overflow: hidden;
	min-width: 0;
	position: relative;
}
.g-thumb{
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #f1f5f9;
}
.g-thumb img{
	width:100%;
	height:100%;
	object-fit: cover;
	display:block;
	filter: saturate(0.98);
	transition: transform 0.3s ease-in-out;
	position: relative;
}
.g-thumb:hover img {
	animation: blur 1s forwards;
	image-rendering: pixelated;
}
.g-thumb img:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	transform: scale(0.5) rotate(15deg);
	filter: blur(2px) brightness(1.5);
	opacity: 0;
}
@keyframes blur {
	0% { filter: blur(2px) brightness(1.5); opacity: 0; }
	100% { filter: blur(0) brightness(1); opacity: 1; }
}
.g-thumb img:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 10px;
	height: 10px;
	background: white;
	box-shadow: 10px 10px 0 #333, 20px -10px 0 #555, -10px 20px 0 #999;
	animation: scatter 1s forwards;
}
@keyframes scatter {
	0% { transform: translate(0, 0); opacity: 1; }
	100% { transform: translate(100px, -100px); opacity: 0; }
}
.g-cap{
	display:flex;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	background: #fff;
}
.g-cap .left{
	min-width: 0;
	flex: 1;
}
.g-cap .code{
	font-size: 12px;
	color: #9ca3af;
	letter-spacing: 0.2px;
}
.g-cap .name{
	margin-top: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: block;
}

/* View all work */
.allwork{
	padding: 140px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 100px;
}
.allwork-link{
	width: 70%;
	margin: 0 auto;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(34px, 6vw, 70px);
	font-weight: 500;
	text-align: right;
}
.allwork-link span {
	text-decoration: underline 3px;
	text-underline-offset: 15px;
	letter-spacing: -0.02em;
	font-weight: 400;
}

/* Other mosaic */
.other{
	max-width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0 10px 90px;
}
.other-grid{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}
.other-item{
	display: block;
	width: 100%;
	height: auto;
	background: #f1f5f9;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	color: inherit;
	text-decoration: none;
}
.other-item.is-empty{
	background: #ffffff;
}
.other-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.other-title{
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.other-title span{
	font-family: 'Poppins', sans-serif;
	/* 기본 140px 유지, 4:3 비율(높이 쪽은 13vh로 PC에서도 충분히 크게) */
	font-size: min(clamp(40px, 10vw, 140px), clamp(40px, 13vh, 140px));
	font-weight: 600;
	letter-spacing: -0.06em;
	line-height: 0.95;
	color: #111;
}
.other-title sup{
	font-size: 0.22em;
	vertical-align: top;
	position: relative;
	top: -0.35em;
	letter-spacing: -0.02em;
}

/* Responsive */
@media (max-width: 980px){
	.intro{
		padding: 40px 20px 16px;
	}
	.hero-grid, .desc-grid{ grid-template-columns: 1fr; }
	.hero-right{ grid-template-columns: 1fr 1fr; padding-top: 0; }
	.gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.intro{
		flex-direction: column;
		gap: 18px;
	}
	.other-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.other-title{
		min-height: 200px;
	}
	.other-title span{
		font-size: min(clamp(56px, 12vw, 120px), clamp(56px, 16vh, 120px));
	}
}
@media (max-width: 640px){
	.intro{
		min-height: 220px;
		padding: 32px 10px 14px;
	}
	.intro-hint{
		left: 12px;
	}
	.hero{
		padding: 36px 12px 0;
		min-height: 0;
	}
	.hero-right{ grid-template-columns: 1fr; gap: 18px; }
	.desc{
		padding: 40px 10px;
	}
	.desc-left{
		font-size: 14px;
	}
	.gallery{
		padding: 0 10px 60px;
	}
	.gallery-grid{
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 12px;
	}
	.g-cap{
		padding: 10px 0;
	}
	.other{
		padding: 0 10px 70px;
	}
	.other-grid{
		grid-template-rows: repeat(4, minmax(0, 160px));
	}
	.allwork{
		padding: 100px 12px;
		gap: 60px;
	}
	.allwork-link{
		width: 100%;
	}
}

@media (max-width: 480px){
	.hero-title{
		font-size: clamp(34px, 9vw, 44px);
	}
	.hero-right{
		gap: 14px;
	}
	.meta .value{
		font-size: 13px;
	}
	.other-grid{
		gap: 14px;
		grid-template-rows: repeat(4, minmax(0, 140px));
	}
	.other-title{
		min-height: 160px;
	}
}