/* =========================================================================
   갤러리 CSS (gallery.css)
   =========================================================================
   shmapi board_type=GALLERY 전용 — 카테고리 탭 + 이미지 그리드 + 라이트박스.

   ★ 톤앤매너: 컨펌된 패키지 목록/상세(board-card.css · board-detail.css)와 FAQ 에 맞춘다.
     - 라운드/그림자 없음 — 전부 사각 + 1px 헤어라인
     - 타이틀은 공통 컴포넌트 .board_tit 사용 (좌측 정렬 · 목록 페이지와 같은 스케일)
     - 카테고리 탭은 공통 컴포넌트 .rn-tabs / .rn-tab (board-renewal.css 4-1) 재사용 — FAQ 와 동일
     - 카드 구조는 패키지 목록 카드와 동일 — 사진 → 분류 칩 → 제목 (사진 위에 얹지 않는다)
     - 분류 칩은 공통 .rn-chip (board-renewal.css 4-2) = 패키지 카드 칩과 같은 값
     - 제목은 패키지(30px)보다 한 단계 작게(24px) + 한 줄 말줄임,
       없는 글도 있어서 캡션 min-height 로 카드 높이를 맞춘다
     - 썸네일 비율은 카드와 동일 (613:422) + object-fit: cover
     - 더보기는 공통 Paging.more(.pg-more) 를 그대로 재사용 — 패키지 목록과 완전히 동일

   [다른 템플릿에 붙이는 법]
     1) 이 파일은 css/homepage/board/ 폴더에 함께 들어 있다 — 폴더를 통째로 복사하면 따라온다.
        (JSP 템플릿이면 WEB-INF/homepage/inc/board-css.jsp 인클루드가 이 파일까지 함께 링크한다)
     2) comm/paging.js  →  board/api.js  →  board/gallery.js 순으로 넣는다.
     3) 마크업은 .board_tit / #galleryCats / #galleryGrid / #galMore / #galLightbox 만 준비.
        셀 HTML 은 JS 가 만든다.

   [커스터마이즈]
     색·활자 크기는 board-renewal.css / board-card.css 의 --rn-* 토큰을 그대로 따른다.
     아래 0번 블록은 --rn-* 를 참조하는 별칭(alias)일 뿐이라, 호텔별로 --rn-* 만 바꾸면
     갤러리 톤도 함께 바뀐다. (이 파일 단독으로 쓸 때는 fallback 값이 적용된다)
   ========================================================================= */

/* =========================================================
   0. 디자인 토큰 별칭 — --rn-* 를 참조만 한다 (재정의 아님)
      ⚠ --rn-* 를 여기서 다시 선언하면 호텔별 커스텀을 덮어쓰므로 금지.
   ========================================================= */
:root {
	--g-ink:    var(--rn-ink, #222528);        /* 캡션/강조 */
	--g-ink-2:  var(--rn-ink-2, #555a61);      /* 본문 */
	--g-ink-3:  var(--rn-ink-3, #8b8f96);      /* 보조/설명 */
	--g-point:  var(--rn-point, #23272e);      /* 포인트 */
	--g-line-2: var(--rn-line-2, #d9dee4);     /* 칩/버튼 테두리 */
	--g-soft:   var(--rn-soft, #f2f3f5);       /* 이미지 로딩 전 배경 */
	--g-chip:   var(--rn-chip, var(--rn-ink, #222528)); /* 선택된 탭 배경 */
	--g-fs-h:   var(--rn-fs-h, 18px);          /* 캡션 */
	--g-fs-body: var(--rn-fs-body, 15px);      /* 본문 */
	--g-fs-xs:  var(--rn-fs-xs, 12.5px);       /* 라벨/캡션 */
	--g-ratio:  613 / 422;                     /* 썸네일 비율 — 패키지 카드와 동일 */
}

/* =========================================================
   1. 카테고리 탭 — 공통 컴포넌트 .rn-tabs / .rn-tab
      (board-renewal.css 의 4-1 블록) FAQ 와 같은 탭을 쓴다.
      크기/모양을 바꿀 일이 있으면 그쪽 한 곳만 고친다.
      마크업: <div class="rn-tabs" id="galleryCats">
                <button class="rn-tab gal-cat">고객 후기 <span class="cnt">1</span></button>
   ========================================================= */

/* =========================================================
   2. 이미지 그리드 — 한 줄에 3개.
      ★ 카드 구조를 패키지 목록(board-card.css .ctc-card)과 같게 쌓는다:
          사진 → (32px) → 분류 칩 → 제목
        사진 위에 얹지 않는다. 같은 사이트에서 목록 카드가 두 가지로 보이지 않게.
      ★ 사진 비율(613:422)·object-fit·호버 확대는 패키지 카드와 동일.
      ★ 제목은 선택 항목이라 없는 글이 있다 — 캡션 영역에 min-height 를 걸어
        '칩만 있는 카드'와 '칩+제목 카드'의 전체 높이를 같게 맞춘다(빈 요소 안 넣는다).
      ★ 열 폭은 minmax(0, 1fr) + 셀 min-width:0 이어야 한다. 그냥 1fr 은 minmax(auto, 1fr) 이라
        칸이 '내용의 최소 폭' 밑으로 못 줄어드는데, 캡션이 한 줄 말줄임(white-space:nowrap)이라
        그 최소 폭 = 제목 전체 길이다. 제목이 긴 글 하나가 섞이면 그 칸이 수천 px 로 부풀고
        나머지 칸이 글자 폭까지 찌그러져 그리드가 통째로 무너진다. (공통 .rn-pnav 와 같은 처방)
   ========================================================= */
.board-wrap .gal-grid {list-style: none; margin: 0; padding: 0; min-height: 38vh; text-align: left;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-content: start;}

.board-wrap .gal-grid .gal-cell {display: flex; flex-direction: column; background: transparent; cursor: pointer;
	min-width: 0;   /* 긴 제목이 칸을 밀어내지 않게 — 위 ★ 참고 */
	border-radius: 0; opacity: 0; transform: translateY(14px); animation: galIn .5s ease forwards;}
@keyframes galIn { to { opacity: 1; transform: none; } }

/* 썸네일 — 패키지 카드와 같은 비율/커버/호버 */
.board-wrap .gal-grid .gal-thumb {position: relative; aspect-ratio: var(--g-ratio); overflow: hidden;
	background: var(--g-soft); border-radius: 0;}
.board-wrap .gal-grid .gal-thumb img {position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; transition: transform .6s ease;}
.board-wrap .gal-grid .gal-cell:hover .gal-thumb img {transform: scale(1.04);}

/* 캡션 — 사진 아래. 리듬은 [이미지] -(24)- [카테고리 라벨] -(26)- [제목].
   min-height = 라벨 줄(28) + 라벨 아래 여백(26) + 제목 한 줄(30) = 84px (위 패딩 별도) */
.board-wrap .gal-grid .gal-body {display: flex; flex-direction: column; padding: 24px 0 0;
	min-height: calc(24px + 84px);}
.board-wrap .gal-grid .gal-chips {display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	margin-bottom: 26px;}
/* 분류 칩은 공통 .rn-chip (board-renewal.css 4-2) — 패키지 카드 칩과 같은 값 */

/* 제목 — 패키지 제목(30px)보다 한 단계 작게. 3열이라 카드 폭이 좁아서.
   길면 한 줄 말줄임 */
.board-wrap .gal-grid .gal-cap {font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: .01em;
	color: var(--g-ink); margin: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* 결과 없음 — 마크업은 공통 .nodata_g (board-renewal.css 4-3, 패키지 목록과 같은 것).
   한 줄 전체를 쓰는 것(grid-column)·활자·색은 그 공통 규칙이 가지므로 여기서 다시 쓰지 않는다.
   셀 등장 애니메이션(galIn)만 끈다 — 빈 상태까지 밀려 올라올 이유가 없다. */
.board-wrap .gal-grid .nodata_g {cursor: default; animation: none; opacity: 1; transform: none;}

/* =========================================================
   3. 더보기 — 공통 Paging.more 가 그리는 .pg-more (board-card.css) 를 그대로 쓴다.
      여기서는 위/아래 여백만 담당한다.
   ========================================================= */
.board-wrap .gal-more {margin: 56px 0 120px;}
.board-wrap .gal-more:empty {margin: 0 0 120px;}

/* =========================================================
   4. 라이트박스 — 사각(라운드 없음). 어두운 배경 위 이미지 + 좌우 이동.
   ========================================================= */
.gal-lb {position: fixed; inset: 0; z-index: 9999; display: none;}
.gal-lb.on {display: block;}
.gal-lb-bg {position: absolute; inset: 0; background: rgba(0, 0, 0, .9); z-index: 1; cursor: zoom-out;}
/* stage 는 클릭을 가로채지 않도록 통과시킨다(닫기/배경 클릭 정상 동작). 이미지 클릭 시엔 닫히지 않게 img 만 auto.
   사진과 캡션을 한 덩어리(세로 스택)로 두어 캡션이 사진 바로 아래에 붙는다 */
.gal-lb-stage {position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 16px;
	padding: 60px 70px; z-index: 2; pointer-events: none;}
/* 남는 높이를 사진이 쓰고(min-height:0 으로 축소 허용) 캡션은 자기 높이만 쓴다 */
.gal-lb-stage img {flex: 0 1 auto; min-height: 0; max-width: 100%; object-fit: contain;
	border-radius: 0; pointer-events: auto;}
.gal-lb-cap {flex: 0 0 auto; margin: 0; max-width: 100%; text-align: center; color: #fff;
	font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .01em;
	pointer-events: none;}
.gal-lb-cap:empty {display: none;}
.gal-lb-count {position: absolute; top: 22px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7);
	font-size: var(--g-fs-xs); letter-spacing: .24em; z-index: 3; pointer-events: none;}
.gal-lb-btn {position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 0;
	cursor: pointer; z-index: 4; border-radius: 0; background: rgba(255, 255, 255, .12); color: #fff;
	font-size: 22px; line-height: 52px; font-family: inherit; transition: background .2s;}
.gal-lb-btn:hover {background: rgba(255, 255, 255, .25);}
.gal-lb-prev {left: 22px;}
.gal-lb-next {right: 22px;}
.gal-lb-close {position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; cursor: pointer;
	z-index: 4; border-radius: 0; background: transparent; color: #fff; font-size: 30px; line-height: 44px;
	font-family: inherit; opacity: .8;}
.gal-lb-close:hover {opacity: 1;}

/* =========================================================
   5. 반응형 — 1200px 이하 2열, 640px 이하 1열. 활자는 한 단계씩 축소
   ========================================================= */
@media screen and (max-width: 1200px) {
	.board-wrap .gal-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;}
}
@media screen and (max-width: 900px) {
	.board-wrap .gal-grid {gap: 20px;}
	/* 좁은 화면에서도 같은 비율로 (24:26 → 18:20) */
	.board-wrap .gal-grid .gal-body {padding-top: 18px; min-height: calc(18px + 78px);}
	.board-wrap .gal-grid .gal-chips {margin-bottom: 20px;}
	.board-wrap .gal-grid .gal-cap {font-size: 21px;}
}
@media screen and (max-width: 640px) {
	.board-wrap .gal-grid {grid-template-columns: minmax(0, 1fr); gap: 14px;}
	.board-wrap .gal-grid .gal-body {min-height: calc(18px + 73px);}
	.board-wrap .gal-grid .gal-cap {font-size: 18px;}
	.board-wrap .gal-more {margin: 40px 0 70px;}
	.gal-lb-stage {padding: 44px 12px; gap: 12px;}
	.gal-lb-cap {font-size: 15px;}
	.gal-lb-btn {width: 42px; height: 42px; line-height: 42px; font-size: 18px;}
}