/* Shintime Media Optimizer — 라이트박스(확대·이동 팝업) */

/* 클릭 가능한 대상 커서 */
img.st-lb-img { cursor: zoom-in; }
.st-lb-src { cursor: zoom-in; }

#st-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .93);
	-webkit-tap-highlight-color: transparent;
	touch-action: none;               /* 핀치/드래그를 JS가 처리 */
	overflow: hidden;
}
#st-lb.open { display: flex; }

#st-lb .st-lb-stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* 기본은 화면(96vw x 96vh)에 '맞춰' 표시 → 사용자가 축소할 필요 없음.
   확대는 transform: scale() 로 그 위에 곱해진다. */
#st-lb img {
	display: block;
	max-width: 96vw;
	max-height: 96vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 6px 50px rgba(0, 0, 0, .55);
	background: #111;
	transform-origin: center center;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
	touch-action: none;
	cursor: zoom-in;
}
#st-lb.zoomed img { cursor: grab; }
#st-lb.zoomed img:active { cursor: grabbing; }

/* 상단 툴바 */
#st-lb .st-lb-bar {
	position: fixed;
	top: 12px;
	right: 14px;
	z-index: 2;
	display: flex;
	gap: 8px;
}
#st-lb .st-lb-btn {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 26px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease;
}
#st-lb .st-lb-btn:hover { background: rgba(255, 255, 255, .34); }
#st-lb .st-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

#st-lb .st-lb-spin {
	position: fixed;
	bottom: 52px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: #fff;
	font-size: 13px;
	background: rgba(0, 0, 0, .55);
	padding: 6px 14px;
	border-radius: 20px;
	white-space: nowrap;
}
#st-lb .st-lb-spin[hidden] { display: none; }

/* 오른쪽 아래 순번 — 연.월 페이지의 진행률과 같은 자리·같은 모양 */
#st-lb .st-lb-count {
	position: fixed;
	right: 28px;
	bottom: 24px;
	z-index: 3;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
	pointer-events: none;
}
#st-lb .st-lb-count[hidden] { display: none; }
@media (max-width: 782px) {
	#st-lb .st-lb-count { right: 16px; bottom: 16px; }
}

#st-lb .st-lb-hint {
	position: fixed;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: rgba(255, 255, 255, .8);
	font-size: 12px;
	background: rgba(0, 0, 0, .4);
	padding: 5px 14px;
	border-radius: 20px;
	white-space: nowrap;
	pointer-events: none;
}

/* ===== (req1) 동영상 팝업 ===== */
/* 콘텐츠의 동영상 위 '크게 보기' 버튼 */
figure.wp-block-video { position: relative; }
.st-lb-vbtn {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	transition: background .15s ease;
}
.st-lb-vbtn:hover { background: rgba(0, 0, 0, .8); }

/* 팝업 안 동영상 */
#st-lb .st-lb-video {
	display: block;
	max-width: 96vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	background: #000;
	box-shadow: 0 6px 50px rgba(0, 0, 0, .55);
}
#st-lb .st-lb-video[hidden] { display: none; }
#st-lb img[hidden] { display: none; }

/* 동영상 모드에서는 확대/축소/회전/힌트를 숨긴다(닫기만 유지) */
#st-lb.video .st-lb-imgonly { display: none !important; }

/* ===== (req2) 촬영정보 캡션 — 좌측 하단 고정, 2행, 고딕 20pt, 좌측정렬 ===== */
#st-lb .st-lb-caption {
	position: fixed;
	left: 24px;
	bottom: 20px;
	z-index: 3;                       /* 이미지(변형 대상)보다 위, 항상 같은 위치 고정 */
	display: flex;
	flex-direction: column;
	align-items: flex-start;          /* 좌측 정렬 */
	gap: 4px;
	max-width: 62vw;
	pointer-events: none;             /* 캡션이 조작(드래그/휠)을 가로막지 않도록 */
}
#st-lb .st-lb-caption[hidden] { display: none; }
#st-lb .st-lb-cap-line {
	font-family: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Nanum Gothic", "나눔고딕", "Noto Sans KR", sans-serif;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	text-align: left;                 /* 좌측 정렬 */
	text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .8);  /* 어떤 사진 위에서도 가독 */
	white-space: normal;
	word-break: keep-all;
}
#st-lb .st-lb-cap-1 { font-size: 20pt; }   /* 1행 카메라/화각 */
#st-lb .st-lb-cap-2,
#st-lb .st-lb-cap-3 { font-size: 10pt; }   /* 2·3행 설정/날짜 */
#st-lb .st-lb-cap-4 { font-size: 10pt; }   /* 4행 하단 공백용 빈 줄 */
/* 내용이 빈 행은 접는다(단, 4행은 공백문자를 담고 있어 접히지 않음 → 하단 여백 확보) */
#st-lb .st-lb-cap-1:empty,
#st-lb .st-lb-cap-2:empty,
#st-lb .st-lb-cap-3:empty { display: none; }

/* 모바일: 여백 최소화 + 힌트 축약 */
@media (max-width: 600px) {
	#st-lb img { max-width: 100vw; max-height: 100vh; }
	#st-lb .st-lb-btn { width: 42px; height: 42px; font-size: 24px; line-height: 42px; }
	#st-lb .st-lb-hint { font-size: 11px; padding: 4px 10px; }
	#st-lb .st-lb-caption { left: 12px; bottom: 12px; max-width: 92vw; }
	#st-lb .st-lb-cap-1 { font-size: 15pt; }                          /* 모바일 축소 */
	#st-lb .st-lb-cap-2, #st-lb .st-lb-cap-3, #st-lb .st-lb-cap-4 { font-size: 9pt; }
}