gallery.css
   - 사진첩 공통 스타일
   - 적용 대상 예:
     • gallery_family_group.php  (가족 단체사진)
     • gallery-parents.php       (부모님 사진첩)
     • gallery-sieun.php         (시은·원석 사진첩)
     • gallery-myeongeun.php     (명은·크리스티나 사진첩)
     • gallery-doeun.php         (도은 사진첩)
     • gallery-grandkids.php     (손주 사진첩)
   - 레이아웃과 카드, 연도 선택 pill, 사진 그리드 등을 공통화
--------------------------------------------------------- */

/* ▣ 페이지 전체 레이아웃
   - .site-main, .layout-inner 는 site.css 에서 기본 구조 잡혀 있다고 가정
   - 여기서는 사진첩 페이지에 필요한 여백만 추가
*/
.gallery-main {
    padding: 10px 12px 20px 12px;
    background: transparent;   /* 바탕은 전체 사이트 공통 배경 사용 */
}

.gallery-page {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;  /* 상단 카드와 사진 카드 사이 여백 */
}

/* ---------------------------------------------------------
   1) 상단 헤더 카드 (설명 + 연도 선택)
--------------------------------------------------------- */

/* ----- 카드 스타일 (상단 설명 박스 등) ----- */
.gallery-header-card {
    margin-top: 6px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    padding: 10px 16px;
    color: #111827;
}

/* 카드 내부 제목/설명 텍스트 간격 최적화 */
.gallery-title-main {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111827;
}

.gallery-title-sub {
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 6px;
    color: #374151;
}

/* 연도 선택 라인 */
.gallery-year-row {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.gallery-year-label {
    font-size: 13px;
    color: #4b5563;
}

/* 연도 pill 버튼 – PC 기본 */
.year-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;          /* ✅ 65px → 60px (조금만 줄임) */
    padding: 6px 12px;        /* ✅ 4px 12px → 3px 10px */
    border-radius: 999px;
    font-size: 12px;          /* 살짝 작게 */
    border: 1px solid #cbd5f5;
    background: #ffffff;
    color: #1f2937;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
    margin-top: 10px;
    margin-bottom: 4px;
}

.year-pill:hover {
    background: #2563eb;
    color: #f9fafb;
    border-color: #2563eb;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

.year-pill.active {
    background: #1d4ed8;
    color: #f9fafb;
    border-color: #1d4ed8;
}

/* ---------------------------------------------------------
   2) 사진 카드 (선택된 연도에 대한 사진 그리드)
--------------------------------------------------------- */

/* 사진 목록을 감싸는 카드 */

/* 연도 제목 */
/* ---------------------------------------------------------
   2) '2023년 가족 단체사진' 글씨 진하게
--------------------------------------------------------- */
.gallery-year-heading {
    font-size: 20px;
    font-weight: 700;
    color: #111827;      /* 기존 대비 훨씬 선명 */
    margin: 14px 16px;
}

/* 그리드: 모바일 1열 → 태블릿 2열 → 중간 3열 → PC 4열 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 각 사진 카드 */
.gallery-item {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* 공통 – PC 기준 기본값 */
.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 4 / 3;   /* ✅ 13/9 → 4/3 */
    object-fit: cover;
    object-position: center center;
}

/* 살짝 떠오르는 호버 효과 */
.gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.30);
}

/* 사진이 없을 때 표시하는 메시지 */
.no-photos-text {
    font-size: 13px;
    color: #4b5563;
    line-height: 1.6;
}

/* 사진 링크(썸네일) */
.gallery-item a {
    display: block;
}

/* 호버 시 살짝 확대 */
.gallery-item:hover img {
    transform: scale(1.03);
}

/* 사진 아래 캡션 (업로드 시간 등) */
.gallery-caption {
    font-size: 12px;
    color: #d1d5db;    /*  #e5e7eb;  */
    padding: 6px 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.9);
    text-align: center;
}

/* "사진이 없습니다" 안내문에서 링크 스타일 */
.no-photos-text a {
    color: #60a5fa;
    text-decoration: none;
}

.no-photos-text a:hover {
    text-decoration: underline;
}

/* ===== 필터 줄(손주 선택 / 연도 선택) ===== */

/* 한 줄(라벨 + pill 버튼들) */
.gallery-filter-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.gallery-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-right: 4px;
}

/* pill 버튼 기본 스타일 */
.gallery-filter-row .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    min-width: 68px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #111827;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        background 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

/* hover 시 살짝 강조 */
.gallery-filter-row .pill:hover {
    background: #e5f2ff;
    border-color: #93c5fd;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

/* 현재 선택된 필터 (active) */
.gallery-filter-row .pill.active {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #f9fafb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.5);
}

/* ======================================
   ★ 전문적인 그라데이션 Pill 버튼 디자인
   ====================================== */

.gallery-filter-row .pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 14px;      /* ← 높이 감소: 기존 7px → 5px */
    min-width: 70px;

    font-size: 12px;
    font-weight: 500;

    /* 은은한 그라데이션 */
    background: linear-gradient(135deg, #fafafa 0%, #f1f3f7 100%);
    color: #4a5568;    /*  #1f2937; */

    border: 1px solid #cfd4dc;
    border-radius: 999px;

    text-decoration: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.1s ease;

    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.gallery-filter-row .pill:hover {
    background: linear-gradient(135deg, #eef4ff 0%, #dae7ff 100%);
    border-color: #93b6ff;
    color: #1e3a8a;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(147, 181, 255, 0.45);
}

.gallery-filter-row .pill.active {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    color: #ffffff;

    border-color: #1e40af;

    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.45),
                0 0 0 1px rgba(255,255,255,0.2) inset;

    transform: translateY(-1px);
}








/* =========================================================
   가족 단체사진 상단 우측 액션 (추천1: ghost 링크)
   - 배경 없음
   - 아이콘 + 텍스트
   - hover 시만 아주 약한 강조
========================================================= */
.gallery-family-group .gallery-header-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.gallery-family-group .gallery-header-actions{
  flex-shrink:0;              /* 우측 버튼 줄어들지 않게 */
}

.gallery-family-group .gallery-action-link{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 10px;
  border-radius:10px;

  text-decoration:none;
  font-weight:600;
  font-size:14px;
  line-height:1;              /* ✅ 아이콘/글씨 수직 중앙 */

  color:#0f172a;              /* 진한 네이비 텍스트 */
}

.gallery-family-group .gallery-action-link:hover{
  background:rgba(15,23,42,.06);   /* 아주 은은한 hover */
}

.gallery-family-group .gallery-action-link .icon{
  font-size:16px;
  line-height:1;
}

.gallery-family-group .gallery-action-link .text{
  white-space:nowrap;
}

/* =========================================================
   [공통] 갤러리 상단 우측 액션 링크(배경 없는 ghost)
   - 모든 갤러리 페이지에서 동일 UX
   - 아이콘 + 텍스트
========================================================= */

.gallery-header-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.gallery-header-text{
  min-width:0; /* 긴 문구 줄바꿈 안정화 */
}

.gallery-header-actions{
  display:flex;
  gap:10px;        /* 버튼 여러 개일 때 간격 */
  flex-shrink:0;   /* 우측 영역 안 줄어들게 */
}

.gallery-action-link{
  display:inline-flex;
  align-items:center;  /* ✅ 수직 가운데 */
  gap:8px;

  padding:8px 10px;
  border-radius:10px;

  text-decoration:none;
  font-weight:700;
  font-size:14px;
  line-height:1;        /* ✅ 아이콘/글씨 수직 중앙 */

  color:#0f172a;
}

.gallery-action-link:hover{
  background:rgba(15,23,42,.06);
}

.gallery-action-link .icon{
  font-size:16px;
  line-height:1;
}

.gallery-action-link .text{
  white-space:nowrap;
}
/* =========================================================
   [갤러리] 홈과 동일한 컨테이너 폭 유지(1200px)
   - 갤러리만 더 넓어 보이는 현상 방지
========================================================= */
.gallery-main .layout-inner,
.gallery-page{
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}






/* ---------------------------------------------------------
   3) 반응형 (모바일)
--------------------------------------------------------- */
/* ---------------------------------------------------------
   📱 0) 공통: PC 기본값은 그대로 유지
   - .gallery-item img 는 파일 상단 정의 그대로 사용:
   - width:100%, height:100%, aspect-ratio:13/9, object-fit:cover
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   📱 1) 900px 이하 (태블릿 가로/세로 공통)
   - 2열 그리드
   - 사진은 잘림 최소화를 위해 높이 자동 + contain
   --------------------------------------------------------- */
 @media (max-width: 900px) {

    .gallery-main {
        padding: 16px 0 32px 0;
    }
    .gallery-page {
        gap: 14px;
    }
    .gallery-header-card {
        padding: 12px 14px 14px 14px;
        margin-bottom: 12px;
    }
    .gallery-title-main {
        font-size: 18px;
        margin-bottom: 6px;
    }
    .gallery-title-sub {
        font-size: 12px;
        line-height: 1.45;
        margin-bottom: 10px;
    }

    /* 필터 줄 간격 조금 줄이기 */
    .gallery-filter-row {
        margin-top: 4px;
        gap: 6px;
        flex-wrap: wrap;
    }
    .gallery-filter-label {
        font-size: 12px;
    }
    .gallery-filter-row .pill {
        min-width: auto;
        padding: 4px 10px;
        font-size: 11.5px;
        white-space: nowrap;
    }

    /* 태블릿/작은 화면: 2열 그리드 */
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* ★ 사진 잘림 방지: 높이 자동 + 비율 강제 해제 */
    .gallery-item img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;      
        object-position: center center;
        display: block
    }
}

/* ---------------------------------------------------------
   📱 2) 760px 이하 (작은 태블릿 / 큰 폰)
   - 여전히 2열, 카드와 텍스트를 조금 더 컴팩트하게
   --------------------------------------------------------- */
 @media (max-width: 760px) {

    .gallery-header-card {
        padding: 10px 12px 12px 12px;
    }
    .gallery-title-main {
        font-size: 17px;
    }
    .gallery-title-sub {
        font-size: 11.5px;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .gallery-item {
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22);
        border-radius: 12px;
    }
}

/* ---------------------------------------------------------
   📱 3) 640px 이하 (일반 스마트폰 세로)
   - 1열(세로로 한 장씩 크게)
   --------------------------------------------------------- */
 @media (max-width: 640px) {

    .gallery-main {
        padding: 14px 0 24px 0;
    }
    .gallery-header-card {
        margin-top: 4px;
        margin-bottom: 10px;
    }

    /* 핸드폰에서는 카드 안 글자 조금 더 줄이기 */
    .gallery-title-main {
        font-size: 16px;
        margin-bottom: 4px;
    }
    .gallery-title-sub {
        font-size: 11px;
        line-height: 1.4;
        margin-bottom: 8px;
    }
    .gallery-filter-row {
        gap: 4px;
    }
    .gallery-filter-label {
        width: 100%;
        font-size: 11.5px;
        margin-bottom: 3px;
    }
    .gallery-filter-row .pill {
        padding: 3px 9px;
        font-size: 11px;
    }

    /* 스마트폰에서는 1열로 크게 */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .gallery-item {
        border-radius: 10px;
    }

    /* 이미지는 위 900px 이하 설정과 동일: height:auto + contain */
}

/* ---------------------------------------------------------
   📱 4) 480px 이하 (아주 작은 폰)
   - 여백 최소화
   --------------------------------------------------------- */
 @media (max-width: 480px) {

    .gallery-main {
        padding: 10px 0 18px 0;
    }
    .gallery-header-card {
        padding: 8px 10px 10px 10px;
    }
    .gallery-title-main {
        font-size: 15px;
    }
    .gallery-title-sub {
        font-size: 10.5px;
    }
    .gallery-filter-row .pill {
        padding: 3px 8px;
        font-size: 10.5px;
    }
}

/* =====================================================
   📱 모바일 · 태블릿 – 사진 잘림 방지 + 4:3 박스 유지
   ===================================================== */
 @media (max-width: 900px) {

    /* ① 카드 자체 비율을 4:3으로 고정 */
    .gallery-grid .gallery-item {
        aspect-ratio: 4 / 3;     /* 카드 박스 4:3 */
        height: auto;
        border-radius: 10px;
        overflow: hidden;
    }
    .gallery-grid .gallery-item img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center center;
        display: block
    }

    /* 모바일 그리드 – 기본 2열 */
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* ...위에 카드 이미지 코드 뒤나 앞 아무 데나... */

    .year-pill {
        min-width: auto;        /* ✅ 고정 폭 제거 */
        padding: 3px 8px;       /* 좌우 여백 더 줄이기 */
        font-size: 10px;
        white-space: nowrap;    /* 줄바꿈 방지 */
    }

}

/* 아주 작은 화면(폰 세로)에서는 1열 */
@media (max-width: 640px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }


}

/* =========================================================
   gallery.css
   - PC/모바일 공통 스타일 + 모바일(가독성 최우선) 카드형
   - B안 레이아웃: .site-main 내부 컨텐츠만 스타일링
========================================================= */

/* 카드 공통 */
.gallery-header-card,
.gallery-upload-card,
.gallery-list-card {
  border-radius: 18px;
  padding: 18px;
}

/* 상단 */
.gallery-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.gallery-title { margin: 10px; font-size: 22px; }
.gallery-subtitle { margin: 6px 0 0; color: #6b7280; }
.gallery-tip { margin-top: 12px; color:#4b5563; font-size: 13px; }

/* 버튼 공통(수직/수평 완전 중앙) */
.gallery-btn{
  display:inline-flex;              /* ✅ 중앙정렬 안정화 */
  align-items:center;               /* ✅ 수직 가운데 */
  justify-content:center;           /* ✅ 수평 가운데 */
  line-height:1;                    /* ✅ 글자 기준 고정 */
  white-space:nowrap;
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
}
.gallery-btn.primary{
  background: #2563eb;
  color: #fff;
  border-color: transparent;
}
.gallery-btn.ghost{
  background:#fff;
  color:#111827;
}

/* 업로드 폼 */
.gallery-form { margin-top: 10px; }
.gallery-form-row { margin-top: 12px; }
.gallery-label { display:block; font-weight: 800; margin-bottom: 6px; color:#111827; }
.gallery-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  outline: none;
}
.gallery-help { margin-top: 8px; color:#6b7280; font-size: 13px; }

/* 파일 UI */
.gallery-file-wrap{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.gallery-file-input{ display:none; } /* ✅ 기본 파일버튼 숨김 */
.gallery-file-btn{ min-height: 44px; } /* ✅ 터치영역 */
.gallery-file-name{
  display:inline-flex;
  align-items:center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background:#f3f4f6;
  border: 1px solid rgba(0,0,0,.06);
  color:#111827;
  font-weight: 700;
}

/* 액션 */
.gallery-actions { margin-top: 14px; }

/* 그리드 */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.gallery-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  overflow:hidden;
}
.gallery-thumb img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
}
.gallery-meta{
  padding: 12px;
}
.gallery-item-title{
  font-weight: 900;
  color:#111827;
  line-height: 1.25;
}
.gallery-item-date{
  margin-top: 6px;
  color:#6b7280;
  font-size: 12px;
}

/* =========================================================
   ✅ 반응형: 900 / 768 / 600 / 480 (모바일 가독성 최우선)
========================================================= */

/* 태블릿 */
 @media (max-width: 900px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-thumb img{ height: 200px; }
}

/* 큰 모바일 */
 @media (max-width: 768px){
  .gallery-page{ padding: 14px 0 24px; }
  .gallery-title{ font-size: 20px; }
  .gallery-subtitle{ font-size: 13px; }

  .gallery-header-top{
    flex-direction: column;
    align-items: stretch;
  }
  .gallery-header-actions a{ width: 100%; }

  .gallery-btn{ width: 100%; min-height: 26px; }
  .gallery-file-wrap{ flex-direction: column; align-items: stretch; }
  .gallery-file-name{ justify-content: center; }

  .gallery-grid{ grid-template-columns: 1fr; }
  .gallery-thumb img{ height: 260px; }
}

/* 작은 모바일 */
 @media (max-width: 480px){
  .gallery-header-card,
  .gallery-upload-card,
  .gallery-list-card{
    padding: 14px;
    border-radius: 10px;
  }
  .gallery-thumb img{ height: 240px; }
}

/* =========================================================
   ✅ 썸네일 이미지: 잘림 방지 (원본 전체 보이게)
   - 기존에 object-fit: cover; 이면 아래로 교체
   - 고정 높이는 유지하면서 "contain"으로 전체 표시
   ========================================================= */
.gallery-card-img,
.photo-card img,
.gallery-grid img {
  width: 100%;
  height: 260px;              /* PC 기본 썸네일 높이(원하면 조정) */
  object-fit: contain;        /* ✅ 핵심: 잘림 방지 */
  background: #0b1220;        /* 여백 배경(어두운 톤, 취향대로) */
  border-radius: 10px;
  display: block;
}

/* ✅ 모바일에서는 썸네일 높이를 조금 줄여 가독성 확보 */
 @media (max-width: 768px) {
  .gallery-card-img,
  .photo-card img,
  .gallery-grid img {
    height: 210px;
  }
}
 @media (max-width: 480px) {
  .gallery-card-img,
  .photo-card img,
  .gallery-grid img {
    height: 180px;
  }
}
/* =========================================================
   ✅ 라이트박스 큰 이미지: 전체 보이게 (잘림 없음)
   ========================================================= */
#gallery-lightbox-image {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;   /* ✅ */
  display: block;
  margin: 0 auto;
}

/* =============================================================================
   Lightbox center fix (좌측 쏠림 방지)
   - 사용중인 라이트박스 클래스명에 맞는 규칙이 하나라도 걸리면 해결됨
============================================================================= */

/* 1) 가장 흔한 오버레이 클래스들 */
.lightbox-overlay,
.lightbox,
.lb-overlay,
.modal-overlay,
.js-lightbox-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2) 이미지/컨텐츠 래퍼 중앙 */
.lightbox-content,
.lightbox-inner,
.lb-content,
.modal-content {
  margin: 0 auto !important;
  max-width: min(92vw, 1440px);
  max-height: 90vh;
}

/* 3) 실제 이미지가 좌측 기준으로 안 박히게 */
.lightbox-content img,
.lb-content img,
.modal-content img {
  display: block;
  margin: 0 auto !important;
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
}

/* ✅ 썸네일 이미지: 잘림 방지 (원본 전체 표시) */
.gallery-thumb img{
  width: 100%;
  height: 100%;        /* PC 썸네일 높이 */
  object-fit: cover;  /* ✅ 잘림 방지 */
  object-position: center center;        /* ✅ 항상 가운데 기준 */
  background: #0b1220;  /* 여백 배경 */
  border-radius: 10px;
  display: block;
}

@media (max-width: 768px){
  .gallery-thumb img{ height: 210px; }
}
@media (max-width: 480px){
  .gallery-thumb img{ height: 180px; }
}

/* =========================================================
   갤러리 썸네일: 잘림 없이 원본비율 전체 표시
   - 카드 크기는 유지, 이미지가 contain으로 들어가서 '안 잘림'
   - 남는 여백은 배경색으로 정돈
   ========================================================= */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ✅ cover → contain */
  background: #f3f4f6;       /* 여백이 생길 때 보기 좋게 */
  display: block;
}

/* ✅ 썸네일 래퍼가 높이를 갖도록(이미 4:3 쓰고 있어도 OK) */
.gallery-item a,
.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;       /* 원하시면 유지, 없으면 추가 */
  overflow: hidden;          /* contain이면 잘림은 없지만 깔끔하게 */
  border-radius: 10px;
}

/* ==========================================================================
   라이트박스(footer.php 공통 모달): 이미지가 화면에 다 나오도록
   ========================================================================== */
 #gallery-lightbox-inner img {
  disply: block;
  margin: 0 auto !important;
  max-width: 92vw;
  max-height: 90vh;
  object-fit: cover;       /* ✅ 라이트박스도 잘림 없이 */
  object-position: center center;
  background: #000;          /* 사진 주변 여백 */
}

 @media (min-width: 1024px) {
  #gallery-lightbox-inner img {
    max-width: 100vw;   /* 가로를 화면 전체로 */
    max-height: 100vh;  /* 세로를 화면 전체로 (상하 여백 제거) */
    width: auto;        /* 비율 유지 */
    height: auto;       /* 비율 유지 */
    object-fit: cover; /* 화면에 빈틈없이 꽉 채움 (일부 잘릴 수 있음), contain 사진 전체가 다 보이도록 */
    background: #000;
    margin: 0;          /* 마진 제거 */
    display: block;     /* 하단 미세 여백 방지 */
  }
}

/* 모바일: 버튼이 아래로 내려가도 깔끔하게  ------ 가족단체사진 우측 상단 업로드 아이콘 추가   */
 @media (max-width: 600px){
  .gallery-family-group .gallery-header-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .gallery-family-group .gallery-header-actions{
    margin-top:6px;
  }
  .gallery-header-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .gallery-header-actions{
    margin-top:6px;
    flex-wrap:wrap;
  }
}

/* =============================================================================
   Gallery Card - 이미지 꽉 채우기(Crop) + 캡션 10px
   - 핵심: img { width height 100% + object-fit: cover }
   ============================================================================= */

/* 카드(썸네일) 비율: 세로사진도 카드 안을 "꽉" 채우되 잘라내기 */
.gallery-item {
  overflow: hidden;               /* crop을 깔끔하게 */
  border-radius: 10px;
}

/* 썸네일 링크/컨테이너가 높이를 갖도록 고정 */
.gallery-thumb,
.gallery-item > a {
  display: block;
  width: 100%;

  /* 카드 높이(필요시 조정)
     - 너무 크면 220~240 권장
  */
  aspect-ratio: 4 / 3;            /* ✅ PC에서 보기 좋은 기본 비율 */
  background: #f3f4f6;
  overflow: hidden;
  border-radius: 10px;
}

/* 실제 이미지: 컨테이너를 가득 채우고, 넘치는 부분은 crop */
.gallery-thumb img,
.gallery-item > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* ✅ 꽉 채우기 + 잘라내기 */
  object-position: center center;        /* ✅ 항상 가운데 기준 */
  display: block;
}

/* (선택) hover 시 살짝 확대 느낌 */
.gallery-thumb img:hover,
.gallery-item > a > img:hover {
  transform: scale(1.02);
  transition: transform .2s ease;
}

/* 파일명/시간 캡션이 있는 경우 10px로 */
.gallery-caption,
.gallery-item .caption,
.manage-caption {                 /* photo-manage와 같이 쓰면 유지 */
  font-size: 10px;
  line-height: 1.25;
}

/* =========================================
   [IMAGE WRAP] 사진 영역 (비율 고정)
========================================= */
.gallery-item a {
    display: block;
    text-decoration: none; /* 링크 밑줄 제거 */
    background: #ffffff;   /* 카드 배경색 */
    border-radius: 10px;   /* 모서리 라운딩 (콘크리트 모따기 공정) */
    overflow: hidden;      /* 자식 요소(이미지)가 튀어나가지 않게 함 */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* 부드러운 움직임 */
}

/* 마우스를 올렸을 때(PC) 살짝 떠오르는 효과 */
.gallery-item a:hover {
    transform: translateY(-5px); /* 위로 5px 부드럽게 들림 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 그림자 강화 */
}

/* 모바일: 4:3 비율 카드 */
@media (max-width: 720px) {
  .gallery-item a {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;    /* 프레임 규격 결정 */
    overflow: hidden;
    display: block;         /* 박스 모델 안정화 */
    border-radius: 12px;    /* 선택사항: 카드를 부드럽게 */
  }

  .gallery-item a img {
    position: absolute;     /* 부모 프레임에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 4:3 틀에 꽉 채우기 */
    object-position: center center; /* 중앙 정렬 */
  }
}

/* =========================================
   Gallery Page Layout Refinement (FINAL)
   ========================================= */

/* 1️⃣ 중앙부 상단 흰 카드 더 위로 + 높이 증가 */
.gallery-page .card:first-of-type{
  margin-top: 2px;            /* 기존보다 위로 */
  padding-top: 12px;
  padding-bottom: 22px;       /* 카드 높이 증가 */
}

/* 카드 내부 설명줄 여백도 여유 있게 */
.gallery-page .card:first-of-type p{
  margin-top: 8px;
  line-height: 1.55;
}

/* 2️⃣ 카드 제목 크기 22px */
.gallery-page .card:first-of-type h1,
.gallery-page .card:first-of-type h2,
.gallery-page .card:first-of-type .card-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* 연도 선택 버튼 영역 위 여백 정리 */
.gallery-page .year-filter{
  margin-top: 12px;
}

/* =========================================
   3️⃣ 중앙부 큰 사진 카드(그리드 영역)
   ========================================= */

/* 전체 사진 카드 컨테이너 높이 여유 */
.gallery-grid-card{
  padding-top: 18px;
  padding-bottom: 26px;       /* 카드 높이 증가 */
}

/* 사진 그리드 좌우 여백 12px */
.gallery-grid{
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 18px;
}

/* 개별 사진 카드도 살짝 키움 */
.gallery-grid .photo-item{
  border-radius: 14px;
}

/* 사진 비율 여유 → 더 시원하게 */
.gallery-grid .photo-thumb{
  aspect-ratio: 4 / 3;        /* 기존보다 안정적 */
}

/* 모바일에서는 자동 조정 */
@media (max-width: 768px){
  .gallery-grid{
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* =========================================================
 * 손주: 오늘의 큐레이션(4) 카드
 * ========================================================= */
.page-gallery .gk-cur-card { margin-top: 12px; }

.page-gallery .fhead.fhead-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.page-gallery .gk-cur-card .fsub{
  font-size: 12.5px;
  font-weight: 800;
  color: rgba(15,23,42,.62);
  line-height: 1.35;
}

.page-gallery .gk-cur-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.page-gallery .gk-cur-thumb{
  position: relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background:#eef2f7;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}

.page-gallery .gk-cur-thumb:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(15,23,42,.12);
}

.page-gallery .gk-cur-tag{
  position:absolute;
  left:10px;
  bottom:10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  color: #0f172a;
}

.page-gallery .gk-cur-foot{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.page-gallery .gk-cur-note{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

.page-gallery .gk-cur-link{
  font-size: 12px;
  font-weight: 900;
  color: #1d4ed8;
  text-decoration: none;
}
.page-gallery .gk-cur-link:hover{ text-decoration: underline; }

.page-gallery .gk-cur-empty{
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed rgba(15,23,42,.18);
  color: rgba(15,23,42,.70);
  font-weight: 800;
}

/* 오늘의 손주 큐레이션 - 10장용 그리드 */
.gk-cur-grid-10{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
}

/* 버튼 썸네일 공통 */
.gk-cur-thumb{
  border:0;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  aspect-ratio: 1 / 1;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}

/* 태그 */
.gk-cur-tag{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  background:rgba(0,0,0,.55);
  color:#fff;
  backdrop-filter: blur(6px);
}

/* 반응형: 화면 줄면 10장을 4열/3열/2열로 */
@media (max-width:980px){
  .gk-cur-grid-10{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width:768px){
  .gk-cur-grid-10{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:480px){
  .gk-cur-grid-10{ grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   Gallery (Mobile/Tablet First) - FINAL
   - 모바일/태블릿에서 답답함 최소화
   - 그리드 컬럼/간격 + 카드 라운드/그림자 + 이미지 비율 최적화
   ========================================================= */

/* 페이지 여백: 모바일은 좌우 여백을 너무 넓게 주지 않기 */
.gallery-main{
  padding: 10px 10px 20px;
  background: transparent;
}

/* 컨테이너 폭: 모바일/태블릿에서 꽉 차게 */
.gallery-page{
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------------------------------------------------------
   Grid: Mobile-first
   --------------------------------------------------------- */
.gallery-grid{
  display: grid;
  grid-template-columns: 1fr;   /* 기본 1열 */
  gap: 12px;
}

/* 카드 기본 */
.gallery-item{
  background: #fff;
  border-radius: 12px; /* 모바일에서 조금 더 둥글게 */
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14); /* 모바일에서 그림자 약하게 */
  transition: transform .15s ease, box-shadow .15s ease;
}

/* 터치 디바이스에선 hover 과함 방지(선택) */
@media (hover: hover){
  .gallery-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
  }
}

/* 이미지 */
.gallery-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;

  /* ✅ 모바일/태블릿에서는 4:3이 세로로 답답할 수 있어 살짝 와이드 */
  aspect-ratio: 16 / 11; /* (원하면 4/3로 되돌려도 됨) */
}

/* ---------------------------------------------------------
   Mobile small (<= 360px): 너무 빽빽하지 않게
   --------------------------------------------------------- */
@media (max-width: 360px){
  .gallery-main{ padding-left: 8px; padding-right: 8px; }
  .gallery-grid{ gap: 10px; }
  .gallery-item{ border-radius: 12px; }
  .gallery-item img{ aspect-ratio: 4 / 3; } /* 작은 폰은 안정적으로 4:3도 괜찮음 */
}

/* ---------------------------------------------------------
   Mobile (481px~767px): 2열 추천 (탐색 효율↑)
   --------------------------------------------------------- */
@media (min-width: 481px){
  .gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .gallery-item img{
    aspect-ratio: 5 / 4; /* 2열에서는 너무 세로 길지 않게 */
  }
}

/* ---------------------------------------------------------
   Tablet (768px~979px): 2열 유지 + 여백/품질 업
   --------------------------------------------------------- */
@media (min-width: 768px){
  .gallery-main{ padding: 12px 14px 24px; }
  .gallery-page{ gap: 16px; }

  .gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .gallery-item{
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
  }

  .gallery-item img{
    aspect-ratio: 16 / 11; /* 태블릿 감상에 더 시원함 */
  }
}

/* ---------------------------------------------------------
   Tablet landscape / Small laptop (980px~1023px): 3열 진입
   --------------------------------------------------------- */
@media (min-width: 980px){
  .gallery-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .gallery-item img{
    aspect-ratio: 4 / 3; /* 3열부터는 4:3도 안정적으로 보임 */
  }
}

/* ---------------------------------------------------------
   Desktop (>= 1200px): 4열은 '큰 화면'에서만 추천
   - 1200px에서 4열은 답답할 수 있어 3열 유지
   --------------------------------------------------------- */
@media (min-width: 1200px){
  .gallery-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ---------------------------------------------------------
   Large desktop (>= 1440px): 여기서부터 4열
   --------------------------------------------------------- */
@media (min-width: 1440px){
  .gallery-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }
}