/* ARKDIO Photo List — 프론트 스타일 (:: Grid 스타일 참고) */
.apl-wrap { max-width: var(--apl-mw, 100%); margin-left: auto; margin-right: auto; }
/* 세로 나열 + 모든 이미지 가운데 정렬 */
.apl-list { display: flex; flex-direction: column; align-items: center; gap: var(--apl-gap, 16px); }
.apl-cell {
	display: block;
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--apl-radius, 6px);
	cursor: pointer;          /* 돋보기 커서 제거 */
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
	/* 배경색 없음 — 이미지 본연의 비율만 보이게 */
}
.apl-cell:focus, .apl-cell:focus-visible { outline: none; box-shadow: none; }
/* 세로컷/가로컷 각각 지정한 폭으로 통일 (가운데 정렬). 작은 이미지는 그 폭까지 확대됨.
   !important = 테마(Salient .row .col img:not([srcset]){width:auto}) 덮어쓰기 방지 */
.apl-cell--portrait  { width: var(--apl-wp, 100%) !important; }
.apl-cell--landscape { width: var(--apl-wl, 100%) !important; }
.apl-cell img {
	display: block;
	width: 100% !important;   /* 셀 폭을 꽉 채움(작아도 확대) — 테마 width:auto 무력화 */
	height: auto !important;  /* 원본 비율 유지 */
	margin: 0 auto;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.apl-hover-zoom .apl-cell:hover img { transform: scale(1.03); }
/* 모바일은 무조건 100% */
@media (max-width: 768px) {
	.apl-cell--portrait, .apl-cell--landscape { width: 100% !important; }
}

/* ── 스크롤 등장 모션 (은은한 페이드업) — JS가 apl-anim-ready 부여 후 활성 ── */
.apl-reveal.apl-anim-ready .apl-cell {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
.apl-reveal.apl-anim-ready .apl-cell.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.apl-reveal.apl-anim-ready .apl-cell { opacity: 1 !important; transform: none !important; transition: none; }
}
.apl-desc {
	margin-top: 300px;
	font-size: var(--apl-desc-size, 15px);
	line-height: var(--apl-desc-lh, 1.8);
	letter-spacing: var(--apl-desc-ls, -0.01em);
	color: var(--apl-desc-color, #333);
	text-align: var(--apl-desc-align, left);
}
/* 본문이 상단일 때: 헤더와 떨어지도록 위 여백 + 이미지와의 아래 간격 */
.apl-desc--top { margin-top: 60px; margin-bottom: 26px; }
.apl-desc p { margin: 0 0 1em; }
.apl-desc p:last-child { margin-bottom: 0; }

/* ── 라이트박스 (:: Grid 갤러리와 동일 UX) ── */
.apl-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(12,12,14,0.82);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	opacity: 0;
	transition: opacity 0.3s ease;
	touch-action: none;
}
.apl-lb.open { display: flex; opacity: 1; }
.apl-lb-stage {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	padding: 64px 78px 12px;
	box-sizing: border-box;
}
.apl-lb-img {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	max-width: 88vw;
	max-height: 78vh;
	object-fit: contain;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.28s ease;
	filter: drop-shadow(0 16px 40px rgba(0,0,0,0.5));
	will-change: opacity;
}
.apl-lb-img.is-on { opacity: 1; z-index: 2; }
.apl-lb-counter {
	position: absolute; top: 22px; left: 26px; z-index: 2;
	color: rgba(255,255,255,0.85);
	font-size: 13px; letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	font-family: 'SF Mono', Menlo, monospace;
}
.apl-lb-close {
	position: absolute; top: 14px; right: 18px; z-index: 3;
	width: 46px; height: 46px;
	background: transparent; border: none; color: #fff;
	font-size: 32px; line-height: 1; cursor: pointer; opacity: 0.8;
	transition: opacity 0.2s ease;
}
.apl-lb-close:hover { opacity: 1; }
.apl-lb-arr {
	position: absolute; top: 44%; transform: translateY(-50%); z-index: 3;
	width: 52px; height: 52px; border: none; border-radius: 0;
	background: transparent; color: #fff;
	line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	opacity: 0.75; transition: opacity 0.2s ease;
}
.apl-lb-arr:hover { opacity: 1; background: transparent; }
.apl-lb-prev { left: 22px; }
.apl-lb-next { right: 22px; }
.apl-lb-film {
	flex: 0 0 auto;
	display: flex; gap: 8px;
	padding: 10px 16px 18px;
	max-width: 94vw;
	overflow-x: auto;
	scrollbar-width: none;
}
.apl-lb-film::-webkit-scrollbar { display: none; }
.apl-lb-thumb {
	flex: 0 0 auto;
	width: 62px; height: 46px;
	border: none; padding: 0; cursor: pointer;
	border-radius: 4px;
	background-size: cover; background-position: center;
	opacity: 0.45;
	outline: 2px solid transparent; outline-offset: -2px;
	transition: opacity 0.2s ease, outline-color 0.2s ease;
}
.apl-lb-thumb:hover { opacity: 0.8; }
.apl-lb-thumb.active { opacity: 1; outline-color: #fff; }
.apl-lb-single .apl-lb-arr,
.apl-lb-single .apl-lb-film,
.apl-lb-single .apl-lb-counter { display: none; }
@media (max-width: 768px) {
	.apl-lb-stage { padding: 54px 12px 8px; }
	.apl-lb-img { max-width: 96vw; max-height: 70vh; }
	.apl-lb-arr { display: none; }
	.apl-lb-film { gap: 6px; padding: 8px 10px 14px; }
	.apl-lb-thumb { width: 52px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.apl-lb, .apl-lb-img { transition: none; }
}