/* ==========================================================================
   갤러리 (13단계) — 전용 페이지 템플릿 `page-templates/template-gallery.php` 에서만 로드(inc/assets.php)

   PC    [ 라벨 · 제목 · 세로 탭 ]  [ 사진 — 화면 오른쪽 끝까지 · 섹션 높이 전체 · 가장자리 타원 마스크 ]
   모바일 라벨 · 제목 · 가로 스크롤 탭 → 정사각 사진(마스크 없음)
   ★★ 선택자는 전부 `.c4-gallery` · `.c4-gallery__*` 로 한정한다 — 다른 화면에 닿지 않게(제1원칙).
   ★ 글자 · 색 · 컨테이너 폭은 기존 토큰 재사용. 새 토큰은 tokens.css '갤러리' 묶음뿐.
   ★ 탭 전환은 gallery.js — JS 가 없어도 첫 패널(첫 사진)은 서버가 보이게 그려 둔다.
   ========================================================================== */

/* ★ 스티키 푸터 — 화면이 콘텐츠보다 길면 .c4-main 이 늘어난다(base.css). 그때 grey100 띠가 main 을 끝까지 채워
     띠 아래 · 푸터 위에 흰 여백이 생기지 않게 한다. main 의 자식이 갤러리일 때만(:has — 다른 화면에 닿지 않는다). */
.c4-main:has(> .c4-gallery) {
	display: flex;
	flex-direction: column;
}

/* 섹션 — 화면 전체 폭 grey100 띠. 글 묶음은 위아래 120 안에서 세로 가운데(시안 title-group counter CENTER),
   사진은 그 여백을 무시하고 섹션 높이 전체를 채운다(아래 .c4-gallery__media 절대 위치). */
.c4-gallery {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 0 auto;                        /* main 이 늘어나면 따라 늘어난다(위 :has) — 글 묶음은 계속 세로 가운데 */
	min-height: var(--c4-gallery-min-h);   /* 시안 757 — 장소가 많아 글 묶음이 길어지면 섹션도 늘어난다 */
	padding-block: var(--c4-gallery-pad-y);
	background: var(--c4-color-surface-code);   /* grey100 */
	overflow: hidden;
}

/* 글 묶음 자리 — 헤더와 같은 컨테이너(1280 + 좌우 20). 그래서 1920 에서 왼쪽 320, 좁은 PC 에서는 헤더와 같은 20. */
.c4-gallery__inner {
	position: relative;
	z-index: 1;   /* 사진(절대 위치) 위 — 탭을 누를 수 있게 */
	width: 100%;
	max-width: calc(var(--c4-container-w) + var(--c4-container-pad) * 2);
	margin-inline: auto;
	padding-inline: var(--c4-container-pad);
}

.c4-gallery__text {
	width: var(--c4-gallery-text-w);   /* 345 */
	max-width: 100%;
	overflow-wrap: break-word;
}

.c4-gallery__heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--c4-gallery-label-gap);   /* 라벨 → 제목 PC 20 */
}

/* 라벨 — single_h3 22 / 1.9 · ★ 포인트 컬러(hex 금지 — 구매자가 색을 바꾸면 따라온다) */
.c4-gallery__label {
	margin: 0;
	font-size: var(--c4-fs-article-h3);
	line-height: var(--c4-lh-article);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-accent);
}

/* 제목 — Page Title 44 / 1.3 · grey900 · 줄바꿈은 옵션 칸 그대로(nl2br) */
.c4-gallery__title {
	max-width: 100%;
	margin: 0;
	font-size: var(--c4-fs-page-title);
	line-height: var(--c4-lh-page-title);
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
	word-break: keep-all;   /* 칸이 모자라도 낱말 가운데서 끊지 않는다(2026-10-14) */
}

/* 제목 → 탭 40(PC · 모바일 같다). 라벨 · 제목이 둘 다 비면 탭이 위에서 바로 시작한다. */
.c4-gallery__heading + .c4-gallery__tabs { margin-top: var(--c4-gallery-title-gap); }

/* ==========================================================================
   탭 — PC 세로 목록 · ★ 사이 간격 0(줄 높이 190% 가 간격 역할 — 항목 높이 18 × 1.9 = 34.2)
   ========================================================================== */

.c4-gallery__tablist {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* 세 상태 — 기본 grey500 · **현재 = 밑줄(색은 기본과 같다)** · 마우스 = 포인트 컬러(밑줄은 현재일 때만 남는다). */
.c4-gallery__tab {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--c4-fs-article-h3-m);   /* single_h3_m 18 */
	line-height: var(--c4-lh-article);      /* 1.9 */
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text-muted);      /* grey500 */
	text-align: left;
	transition: color var(--c4-gallery-hover);   /* 마우스를 올리고 뗄 때 색이 부드럽게 바뀐다 */
	/* 키보드로 옮겨 화면 안으로 끌어올 때(gallery.js) 포커스 링까지 보이게 — 화면 끝 · 고정 헤더 끝에 딱 붙지 않는다. */
	scroll-margin-block: calc(var(--c4-focus-ring-w) + var(--c4-focus-ring-offset));
}

.c4-gallery__tab[aria-selected="true"] { text-decoration: underline; }

/* 마우스가 있는 기기에서만 — 터치에서 누른 뒤 색이 남지 않게. 현재 탭에 올려도 밑줄은 그대로(색만 바뀐다). */
@media (hover: hover) {
	.c4-gallery__tab:hover { color: var(--c4-color-accent); }
}

/* ==========================================================================
   사진 — PC: 글 묶음 오른쪽(좌 = 컨테이너 왼쪽 + 345 + 39)부터 화면 오른쪽 끝까지 · 섹션 높이 전체
   ========================================================================== */

.c4-gallery__media {
	position: absolute;
	top: 0;
	right: 0;    /* ★ 화면 오른쪽 끝에 '닿는다' — 넘치지 않는다 */
	bottom: 0;
	left: calc(max(var(--c4-container-pad), (100% - var(--c4-container-w)) / 2) + var(--c4-gallery-text-w) + var(--c4-gallery-photo-gap));
	background: var(--c4-color-img-placeholder);   /* 장소 0개 · 사진 없는 행 — grey300 빈 칸(같은 자리 · 같은 마스크) */
	/* ★★ 가장자리가 왼쪽 · 위 · 아래 모두 흐려지며 사라진다 — 시안 마스크는 '타원 + 레이어 블러 200'. radial-gradient 로 근사한다.
	   배경색 덮개(그라데이션 div)로 흉내 내지 말 것 — 섹션 배경 토큰을 바꾸면 어긋난다. 마스크는 배경색과 무관하다. */
	-webkit-mask-image: radial-gradient(ellipse var(--c4-gallery-mask-rx) var(--c4-gallery-mask-ry) at var(--c4-gallery-mask-cx) var(--c4-gallery-mask-cy), #000 var(--c4-gallery-mask-stop), transparent var(--c4-gallery-mask-end));
	mask-image: radial-gradient(ellipse var(--c4-gallery-mask-rx) var(--c4-gallery-mask-ry) at var(--c4-gallery-mask-cx) var(--c4-gallery-mask-cy), #000 var(--c4-gallery-mask-stop), transparent var(--c4-gallery-mask-end));
}

/* 패널은 칸을 꽉 채운다. 숨긴 패널은 hidden 속성(UA display:none) — 여기서 display 를 주지 않는다.
   ★ 사진을 바꿀 때 디졸브 — gallery.js 가 새 패널을 is-entering(투명)으로 띄운 뒤 클래스를 떼어 서서히 나타나게 한다.
     패널 바탕도 grey300 — 사진이 없는 장소로 바꿀 때도 회색 칸이 서서히 덮는다. JS 가 없으면 is-entering 이 붙지 않아 그대로 보인다. */
.c4-gallery__panel {
	position: absolute;
	inset: 0;
	background: var(--c4-color-img-placeholder);
	transition: opacity var(--c4-gallery-fade);
}

.c4-gallery__panel.is-entering { opacity: 0; }

/* ★★ PC 는 세로를 꽉 채우고 **오른쪽에 붙인다** — 왼쪽은 마스크로 사라지는 자리라 가운데로 두면 선명한 오른쪽이 잘린다. */
.c4-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 100% 50%;
}

/* ==========================================================================
   모바일 (768 미만) — 세로 · 탭 가로 스크롤 · 정사각 사진(마스크 없음 · 가운데 크롭)
   ========================================================================== */

@media (max-width: 767.98px) {

	.c4-gallery {
		flex-direction: column;
		align-items: stretch;
		gap: var(--c4-gallery-stack-gap-m);           /* 글 묶음 → 사진 20 */
		min-height: 0;
		padding: var(--c4-gallery-pt-m) 0 0;          /* 위 60 · 아래 0(사진이 섹션 바닥에 붙는다) */
	}

	.c4-gallery__inner {
		max-width: none;
		padding-inline: 0;
	}

	.c4-gallery__text { width: auto; }

	/* 라벨 · 제목 — 시안 Mobile 은 가운데(글 상자 327 · 가운데 정렬) */
	.c4-gallery__heading {
		align-items: center;
		gap: var(--c4-gallery-label-gap-m);           /* 12 */
		padding-inline: var(--c4-gutter-mobile);
		text-align: center;
	}

	.c4-gallery__label { font-size: var(--c4-fs-article-h3-m); }   /* single_h3_m 18 */
	.c4-gallery__title { font-size: var(--c4-fs-page-title-m); }   /* Page Title_m 26 */

	/* ★★ 탭 줄은 화면을 넘친다 — 이 줄 안에서만 가로 스와이프. 줄바꿈 · 글자 줄이기 금지. `overflow-x: hidden` 금지.
	   스크롤 컨테이너는 바깥 outline 을 자르므로 위아래에 포커스 링 자리만큼 안쪽 여백을 주고 같은 양을 바깥 여백에서 뺀다(FAQ 탭과 같은 방식). */
	.c4-gallery__tabs {
		overflow-x: auto;
		scrollbar-width: none;
		scroll-padding-inline: var(--c4-gutter-mobile);   /* JS 가 고른 탭을 줄 안으로 옮길 때도 화면 끝에서 24 를 남긴다 */
		padding-block: calc(var(--c4-focus-ring-w) + var(--c4-focus-ring-offset));
		margin-bottom: calc(-1 * (var(--c4-focus-ring-w) + var(--c4-focus-ring-offset)));
	}

	.c4-gallery__heading + .c4-gallery__tabs { margin-top: calc(var(--c4-gallery-title-gap) - var(--c4-focus-ring-w) - var(--c4-focus-ring-offset)); }

	.c4-gallery__tabs::-webkit-scrollbar { display: none; }

	/* 첫 탭 · 마지막 탭을 화면 끝에서 24 에 맞춘다 — 컨테이너는 화면 끝까지, 여백은 안쪽 패딩. */
	.c4-gallery__tablist {
		flex-direction: row;
		gap: var(--c4-gallery-tab-gap-m);             /* 12 */
		width: max-content;
		padding-inline: var(--c4-gutter-mobile);
	}

	.c4-gallery__tab { white-space: nowrap; }

	.c4-gallery__media {
		position: relative;
		inset: auto;
		margin-top: auto;   /* 띠가 화면 높이만큼 늘어나도(위 :has) 사진은 섹션 바닥에 붙는다 */
		aspect-ratio: var(--c4-gallery-photo-ratio-m);   /* 375 × 375 */
		-webkit-mask-image: none;                        /* ★★ 모바일은 페이드가 없다(시안 마스크 = 블러 없는 사각형) */
		mask-image: none;
	}

	.c4-gallery__img { object-position: 50% 50%; }   /* ★★ 모바일은 가운데 크롭 — PC 의 오른쪽 정렬을 가져오지 않는다 */
}