@charset "utf-8";

/* ============================================================
	msub08 — 포토 에세이 (기사 흐름 + 라이트박스)
	============================================================ */

/* ============================================================
	서브 비주얼
	============================================================ */
.gl-hero {
	position: relative;
	height: 65vh;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.gl-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
	transform: scale(1.06);
	transition: transform 6s ease;
}

.gl-hero.is-init .gl-hero-bg {
	transform: scale(1);
}

.gl-hero-dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
	z-index: 1;
}

.gl-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 60px 52px;
	color: #fff;
}

.gl-hero-cat {
	font-size: 16px;
	text-transform: uppercase;
	opacity: 0;
	margin-bottom: 14px;
	transform: translateY(16px);
	transition:
		opacity 0.75s ease,
		transform 0.75s ease;
}

.gl-hero-tit {
	font-family: "GMarketSans", sans-serif;
	font-size: clamp(28px, 4.5vw, 56px);
	font-weight: 700;
	margin-bottom: 14px;
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.75s ease 0.16s,
		transform 0.75s ease 0.16s;
}

.gl-hero-sub {
	font-size: clamp(16px, 1.2vw, 18px);
	font-weight: 300;
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.75s ease 0.3s,
		transform 0.75s ease 0.3s;
}

.gl-hero.is-init .gl-hero-cat {
	opacity: 0.6;
	transform: none;
}
.gl-hero.is-init .gl-hero-tit {
	opacity: 1;
	transform: none;
}
.gl-hero.is-init .gl-hero-sub {
	opacity: 0.65;
	transform: none;
}

/* ============================================================
	아티클 본문
	============================================================ */
.gl-article {
	padding: 64px 0 80px;
	background: var(--color-bg-main, #fff);
	overflow-x: hidden; /* full-bleed 이미지 수평 스크롤 방지 */
}

.gl-article-inner {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ── 텍스트 단락 ── */
.gl-text {
	margin: 48px 0;
}

.gl-text:first-child {
	margin-top: 0;
}

.gl-text p {
	font-size: clamp(16px, 1.2vw, 18px);
	color: var(--color-text-sub, #555);
	margin-bottom: 20px;
	word-break: keep-all;
}

.gl-text p:last-child {
	margin-bottom: 0;
}

/* ── 기사 내 이미지 공통 ── */
.gl-figure {
	margin: 48px 0;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}

.gl-figure.is-visible {
	opacity: 1;
	/*transform: none;*/
}

/* 전체 폭 이미지 — 최대 1400px, 중앙 정렬 */
.gl-figure-full {
	width: min(100vw, 1400px);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

/* 2장 나란히 */
.gl-figure-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 48px 0;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}

.gl-figure-pair.is-visible {
	opacity: 1;
	transform: none;
}

/* 3장 나란히 */
.gl-figure-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 48px 0;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}

.gl-figure-3.is-visible {
	opacity: 1;
	transform: none;
}

/* ── 이미지 버튼 ── */
.gl-img-btn {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	position: relative;
	overflow: hidden;
}

.gl-figure-full .gl-img-btn {
	aspect-ratio: 16 / 9;
}

.gl-figure-pair .gl-img-btn {
	aspect-ratio: 4 / 3;
}

.gl-figure-3 .gl-img-btn {
	aspect-ratio: 1 / 1;
}

.gl-img-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.gl-img-btn:hover img {
	transform: scale(1.04);
}

/* 호버 오버레이 */
.gl-img-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.gl-img-overlay svg {
	width: 32px;
	height: 32px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	opacity: 0;
	transform: scale(0.8);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.gl-img-btn:hover .gl-img-overlay {
	background: rgba(0, 0, 0, 0.28);
}

.gl-img-btn:hover .gl-img-overlay svg {
	opacity: 1;
	transform: scale(1);
}

/* 캡션 */
figcaption,
.gl-caption {
	margin-top: 10px;
	font-size: 14px;
	color: var(--color-text-muted, #9ca3af);
	text-align: center;
}

/* ============================================================
	라이트박스
	============================================================ */
.gl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.28s ease,
		visibility 0.28s ease;
}

.gl-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.gl-lb-bg {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.94);
	cursor: zoom-out;
}

.gl-lb-close {
	position: absolute;
	top: 24px;
	right: 28px;
	z-index: 10;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s;
}

.gl-lb-close:hover {
	background: rgba(255, 255, 255, 0.22);
}

.gl-lb-close svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
}

.gl-lb-prev,
.gl-lb-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	cursor: pointer;
	transition:
		background 0.2s,
		border-color 0.2s,
		opacity 0.2s;
}

.gl-lb-prev {
	left: 24px;
}
.gl-lb-next {
	right: 24px;
}

.gl-lb-prev:hover,
.gl-lb-next:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

.gl-lb-prev.is-hidden,
.gl-lb-next.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.gl-lb-prev svg,
.gl-lb-next svg {
	width: 22px;
	height: 22px;
	stroke: #fff;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gl-lb-img-wrap {
	position: relative;
	z-index: 5;
}

.gl-lb-img {
	max-width: 90vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: opacity 0.18s ease;
}

.gl-lb-img.is-switching {
	opacity: 0;
}

.gl-lb-info {
	position: absolute;
	bottom: 28px;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0 80px;
}

.gl-lb-caption {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.7);
}

.gl-lb-counter {
	font-family: "GMarketSans", sans-serif;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
}

.gl-lb-counter .gl-lb-cur {
	color: #fff;
	font-weight: 700;
}

body.lb-open {
	overflow: hidden;
}

/* ============================================================
	아웃트로
	============================================================ */
.gl-outro {
	border-top: 1px solid var(--color-border, #eee);
	background: var(--color-bg-main, #fff);
	padding: 80px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 44px;
}

.gl-outro-label {
	font-size: 16px;
	text-transform: uppercase;
	color: var(--color-text-muted, #bbb);
}

.gl-outro-tit {
	font-family: "GMarketSans", sans-serif;
	font-size: clamp(26px, 3.5vw, 46px);
	font-weight: 700;
}

.gl-outro-links {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}

.gl-outro-link {
	display: flex;
	flex-direction: column;
	width: 200px;
	gap: 10px;
	text-align: left;
	transition: opacity 0.2s;
}

.gl-outro-link:hover {
	opacity: 0.72;
}

.gl-outro-link .img-box {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.gl-outro-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.gl-outro-link:hover img {
	transform: scale(1.06);
}

.gl-outro-link .link-cate {
	font-size: 14px;
	text-transform: uppercase;
	color: var(--color-text-muted, #bbb);
}

.gl-outro-link .link-tit {
	font-size: 16px;
	font-weight: 500;
}

/* ============================================================
	반응형 — 999px 이하
	============================================================ */
@media all and (max-width: 999px) {
	.gl-hero-inner {
		padding: 0 24px 40px;
	}
	.gl-article {
		padding: 30px 0;
	}

	.gl-article-inner {
		padding: 0 20px;
		max-width: 100%;
	}

	/* 모바일: full-bleed 취소, 컨테이너 안에서 처리 */
	.gl-figure-full {
		width: auto;
		position: static;
		left: auto;
		transform: none;
	}

	/* 모바일: 본문 요소 간격 축소 (최대 30px 이하) */
	.gl-text,
	.gl-figure,
	.gl-figure-pair,
	.gl-figure-3 {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.gl-lb-prev {
		left: 10px;
	}
	.gl-lb-next {
		right: 10px;
	}

	.gl-lb-prev,
	.gl-lb-next {
		width: 44px;
		height: 44px;
	}

	.gl-outro {
		gap: 20px;
		padding: 30px 15px;
	}

	.gl-outro-link {
		width: 150px;
	}
}
@media all and (max-width: 768px) {
	.gl-article {
		padding: 20px 0;
	}

	.gl-article-inner {
		padding: 0 15px;
	}

	.gl-text,
	.gl-figure,
	.gl-figure-pair,
	.gl-figure-3 {
		margin-top: 15px;
		margin-bottom: 15px;
	}
}

@media all and (max-width: 480px) {
	.gl-figure-3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.gl-figure-pair {
		gap: 6px;
	}

	.gl-lb-info {
		flex-direction: column;
		gap: 4px;
		bottom: 16px;
		padding: 0 20px;
	}

	.gl-outro-link {
		width: calc(33.333% - 10px);
		min-width: 90px;
	}

	.gl-outro-links {
		width: 100%;
		gap: 10px;
	}
}