/* =========================================================
 * /assets/css/gallery-family.css
 * - 가족사진 대표(허브) 페이지 전용
 * - 구성: 상단 hero(좌/우) + 4카드 + 팁
 *
 * ✅ 조절 포인트(주석)
 *  - 카드 설명 글씨: 13px
 *  - “열기(↗)” 버튼 크기/위치
 *  - 빠른이동 아이템 gap/패딩
 * ========================================================= */

.page-gallery-family .gf-wrap{
  padding-top: 14px;
  padding-bottom: 26px;
}

/* -----------------------
 * 1) HERO (상단 큰 카드)
 * ----------------------- */
.page-gallery-family .gf-hero{
  display: grid;
  grid-template-columns: 1.55fr 0.45fr;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
}

.page-gallery-family .gf-title{
  margin-bottom: 20px;
  font-size: 22px;
  letter-spacing: -0.2px;
}

.page-gallery-family .gf-sub{
  margin: 10px 12px 14px;
  color: rgba(15,23,42,.68);
  font-weight: 700;
  line-height: 1.55;
  /* ✅ 설명 글씨 크기 조절 포인트 */
  font-size: 13.3px; /* <-- 여기 13px */
}

/* 검색: input + 버튼 한 줄 고정 */
.page-gallery-family .gf-search{
  display: flex;
  gap: 10px; /* ✅ input-버튼 간격 조절 포인트 */
  align-items: center;
  max-width: 760px;
  margin: 10px 0 12px;
}
.page-gallery-family .gf-input{
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  outline: none;
  font-weight: 800;
}
.page-gallery-family .gf-input:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.page-gallery-family .gf-btn{
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.22);
  background: rgba(37,99,235,.10);
  color: rgba(15,23,42,.92);
  font-weight: 1000;
  cursor: pointer;
  white-space: nowrap;
}
@media (hover:hover){
  .page-gallery-family .gf-btn:hover{
    background: rgba(37,99,235,.14);
    border-color: rgba(37,99,235,.28);
  }
}

/* 칩 컨테이너 */
.page-gallery-family .gf-chips {
  display: flex;
  gap: 12px; /* 간격을 살짝 넓혀 여유를 줌 */
  flex-wrap: wrap;
  margin-top: 12px;
}

/* 칩 개별 요소 */
.page-gallery-family .gf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px; /* 높이를 조금 키워 안정감 확보 */
  padding: 0 16px;
  border-radius: 999px;
  
  /* 디자인 핵심: 그림자와 배경 */
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04); /* 미세한 그림자 추가 */
  
  text-decoration: none;
  color: #475569; /* 깊이감 있는 Slate Gray 계열 */
  font-weight: 600; /* 너무 두꺼운 900보다는 600~700이 전문적임 */
  font-size: 14px;
  transition: all 0.2s ease; /* 부드러운 전환 효과 */
}

/* 마우스 호버 시 효과 */
@media (hover: hover) {
  .page-gallery-family .gf-chip:hover {
    transform: translateY(-2px); /* 위로 살짝 떠오르는 효과 */
    background: #ffffff;
    border-color: #2563eb; /* 포인트 컬러(Blue) 강조 */
    color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12); /* 푸른빛 감도는 그림자 */
  }
}

/* 활성화된 상태 (선택된 칩일 경우 대비용) */
.page-gallery-family .gf-chip.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* -----------------------------------------------------------------------------
 * 2) 빠른 이동 카드
 * ----------------------------------------------------------------------------- */
.page-gallery-family .gf-hero-right{
  align-self: start;
}
.page-gallery-family .gf-quick{
  padding: 14px;
  border-radius: 16px;
}
.page-gallery-family .gf-quick-title{
  font-weight: 1000;
  margin-left: 10px;
  margin-bottom: 10px;
}

/* ✅ 아이템 자체를 “공지사항 스타일”처럼 통일 */
.page-gallery-family .gf-quick-list{
  display: grid;
  gap: 10px; /* ✅ 항목 간격 조절 포인트 */
}

.page-gallery-family .gf-quick-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px; /* ✅ 아이콘-텍스트 간격 조절 포인트 */

  padding: 12px 12px; /* ✅ 아이템 높이 조절 포인트 */
  border-radius: 14px;
  background: rgba(15,23,42,.03); /* ✅ “공지사항”처럼 배경 있음 */
  border: 1px solid rgba(15,23,42,.06);
  text-decoration:none;
  color: rgba(15,23,42,.92);
  font-weight: 900;
}
.page-gallery-family .qi-ico{
  width: 24px;
  text-align:center;
  flex: 0 0 22px;
}
.page-gallery-family .qi-txt{
  flex: 1;
  min-width: 0;
  margin-left:12px;
  /* ✅ 빠른이동 텍스트 크기 조절 포인트 */
  font-size: 14px; /* <-- 여기 13px */
}
.page-gallery-family .qi-arrow{
  opacity: .55;
  font-weight: 1000;
}
@media (hover:hover){
  .page-gallery-family .gf-quick-item:hover{
    background: rgba(37,99,235,.06);
    border-color: rgba(37,99,235,.16);
    color: rgba(37,99,235,.95);
  }
}

.page-gallery-family .gf-quick-foot{
  margin-top: 10px;
  margin-left: 12px;
  font-size: 12px;
}

/* --------------------------------------------------------------------------------
 * 3) 하단 4카드 그리드
 * -------------------------------------------------------------------------------- */
.page-gallery-family .gf-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.page-gallery-family .gf-card{
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
}

/* 카드 톤(상단 밴드 느낌) */
.page-gallery-family .gf-card.tone-a{ background: rgba(37,99,235,.06); }
.page-gallery-family .gf-card.tone-b{ background: rgba(16,185,129,.06); }
.page-gallery-family .gf-card.tone-c{ background: rgba(245,158,11,.07); }
.page-gallery-family .gf-card.tone-d{ background: rgba(168,85,247,.06); }

.page-gallery-family .gf-card-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 14px 10px;
}
.page-gallery-family .gf-card-icon{
  margin-left: 12px;
  font-size: 20px;
}

/* ✅ “열기→” 대신 우측상단 아이콘 버튼(↗) */
.page-gallery-family .gf-open{
  width: 34px;           /* ✅ 버튼 크기 조절 포인트 */
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  font-weight: 1000;
  color: rgba(15,23,42,.88);

  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
}
@media (hover:hover){
  .page-gallery-family .gf-open:hover{
    background: rgba(255,255,255,.92);
    border-color: rgba(37,99,235,.18);
    color: rgba(37,99,235,.95);
  }
}

.page-gallery-family .gf-card-body{
  padding: 14px;
  background: #fff; /* 본문은 흰색으로 “고급스럽게” 고정 */
  border-top: 1px solid rgba(15,23,42,.06);
}

.page-gallery-family .gf-card-title{
  margin-left: 12px;
  font-weight: 1000;
  margin-bottom: 6px;
}

.page-gallery-family .gf-card-desc{
  margin-left: 16px;
  color: rgba(15,23,42,.70);
  font-weight: 700;
  line-height: 1.55;

  /* ✅ 카드 설명 글씨 크기 조절 포인트 */
  font-size: 13px; /* <-- 여기 13px */
}

.page-gallery-family .gf-card-count{
  margin-top: 8px;
  margin-left: 16px;
  font-size: 12px;
}

/* -----------------------
 * 4) 사용 팁
 * ----------------------- */
.page-gallery-family .gf-tip{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
}
.page-gallery-family .gf-tip-title{
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 1000;
}
.page-gallery-family .gf-tip-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,.78);
  font-weight: 700;
  line-height: 1.6;
  /* ✅ 팁 글씨 크기 조절 포인트 */
  font-size: 13px; /* <-- 여기 13px */
}

/* -----------------------
 * 5) 반응형
 * ----------------------- */
@media (max-width: 980px){
  .page-gallery-family .gf-hero{
    grid-template-columns: 1fr;
  }
  .page-gallery-family .gf-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  .page-gallery-family .gf-grid{
    grid-template-columns: 1fr;
  }
  .page-gallery-family .gf-title{
    font-size: 22px;
  }
  .page-gallery-family .gf-search{
    flex-direction: column;
    align-items: stretch;
  }
  .page-gallery-family .gf-btn{
    width: 100%;
  }
}


/* ====================================================== 가족 대표 사진 ======= */
/* =========================================================
 * [A안] 최근 업로드 6장 프리뷰 (가족사진 대표)
 * - 조절 포인트: gap / height / columns
 * ========================================================= */

.page-gallery-family .gf-recent{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(255,255,255,.55);
}

.page-gallery-family .gf-recent-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.page-gallery-family .gf-recent-title{
  font-weight: 1000;
  font-size: 14px; /* ✅ 제목 크기 */
}

.page-gallery-family .gf-recent-more{
  text-decoration:none;
  font-weight: 900;
  color: rgba(37,99,235,.95);
  font-size: 13px; /* ✅ 링크 크기 */
}
@media (hover:hover){
  .page-gallery-family .gf-recent-more:hover{ text-decoration: underline; }
}

/* ✅ PC: 6장 한 줄 */
.page-gallery-family .gf-recent-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;  /* ✅ gap 조절 포인트 */
}

.page-gallery-family .gf-recent-item{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.08);
  background:#fff;
}

.page-gallery-family .gf-recent-img{
  width:100%;
  height: 86px; /* ✅ 썸네일 높이 조절 포인트 */
  object-fit: cover;
  display:block;
}

.page-gallery-family .gf-recent-empty{
  padding: 14px 0;
  font-size: 13px;
}

/* ✅ 모바일/태블릿: 3x2 */
@media (max-width: 980px){
  .page-gallery-family .gf-recent-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* ✅ 모바일 gap */
  }
  .page-gallery-family .gf-recent-img{
    height: 96px; /* ✅ 모바일 높이 */
  }
}

/* =========================================================
 * A안: 가정별 대표 사진(1열 4장)
 * - 조절 포인트는 주석으로 표시
 * ========================================================= */

.gf-feature{
  margin-top: 14px; /* ✅ 섹션 위 여백 조절 */
}

.gf-feature-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.gf-feature-title{
  font-weight: 1000;
  letter-spacing: -.02em;
}

.gf-feature-sub{
  font-size: 13px; /* ✅ 설명 글씨 13px (원하면 여기 조절) */
  line-height: 1.35;
  white-space: nowrap;
}

/* 1열 리스트 */
.gf-feature-list{
  display:grid;
  gap: 10px; /* ✅ 카드 간격(gap) 조절 포인트 */
}

.gf-feature-item{
  display:grid;
  grid-template-columns: 120px 1fr; /* ✅ 썸네일 폭 조절 포인트 */
  gap: 12px;
  align-items: center;

  padding: 10px; /* ✅ 카드 내부 여백 조절 */
  border-radius: 16px;
  text-decoration:none;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
}

@media (hover:hover){
  .gf-feature-item:hover{
    border-color: rgba(37,99,235,.22);
    box-shadow: 0 14px 34px rgba(2,6,23,.10);
    transform: translateY(-1px);
  }
}

.gf-feature-thumb{
  width: 120px;           /* ✅ 썸네일 폭(그리드와 동일) */
  height: 86px;           /* ✅ 썸네일 높이 조절 포인트 */
  border-radius: 14px;
  overflow:hidden;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
}

.gf-feature-thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.gf-feature-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.55);
}

/* 오른쪽 텍스트 */
.gf-feature-body{
  min-width: 0;
}

.gf-feature-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.gf-feature-name{
  font-weight: 1000;
  color: rgba(15,23,42,.92);
  letter-spacing:-.02em;
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.gf-feature-ico{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  flex: 0 0 auto;
}

.gf-feature-open{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(37,99,235,.95);
  font-weight: 1000;
  flex: 0 0 auto;
}

/* ✅ 설명글: 13px (원하면 여기에서 조절) */
.gf-feature-desc{
  margin-top: 6px;
  font-size: 13px; /* ✅ 조절 포인트 */
  line-height: 1.35;
  color: rgba(15,23,42,.62);
}

/* 모바일 최적화 */
@media (max-width: 640px){
  .gf-feature-sub{ display:none; } /* ✅ 모바일에서 부제 숨김(원하면 해제) */

  .gf-feature-item{
    grid-template-columns: 108px 1fr; /* ✅ 모바일 썸네일 폭 */
    gap: 10px;
  }

  .gf-feature-thumb{
    width: 108px;
    height: 78px; /* ✅ 모바일 썸네일 높이 */
  }
}

/* =========================================================
 * [A안-대표사진] 1x4 가로 그리드 + 제목 오버레이 (최종)
 * - 설명글 삭제: HTML에서 제거
 * - 제목은 사진 상단에 표시
 * ========================================================= */

/* 1x4 그리드 */
.gf-feature-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 10px;
}

/* 카드 */
.gf-cover{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

/* 미디어 영역(이미지) */
.gf-cover-media{
  position: relative;
  aspect-ratio: 4 / 3;   /* ✅ 필요하면 4/3, 1/1로 변경 가능 */
  background: #f1f5f9;
}

.gf-cover-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 빈 상태 */
.gf-cover-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  color:#64748b;
}

/* ✅ 제목 오버레이(사진 상단) */
.gf-cover-title{
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(6px);
  font-weight: 900;
  font-size: 14px; /* ✅ 제목 크기 조절 포인트 */
}

.gf-cover-ico{ font-size: 16px; line-height: 1; }
.gf-cover-txt{ letter-spacing: -0.2px; }

/* ✅ 우측상단 ↗ 버튼 */
.gf-cover-open{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(226,232,240,.85);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 900;
}

/* hover */
.gf-cover:hover{
  box-shadow: 0 10px 24px rgba(2,6,23,.08);
  transform: translateY(-1px);
  transition: box-shadow .18s ease, transform .18s ease;
}

/* 모바일: 2열 */
@media (max-width: 900px){
  .gf-feature-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* 모바일 작은 폭: 1열 */
@media (max-width: 520px){
  .gf-feature-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
 * [A안-대표사진] 하단 그라데이션(포스터 느낌) + 버튼 제거
 * ========================================================= */

/* 카드 */
.gf-cover{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}

.gf-cover-media{
  position:relative;
  aspect-ratio:4/3;
  background:#f1f5f9;
}

.gf-cover-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ✅ 버튼(↗) 제거: HTML에서도 삭제 권장 */
.gf-cover-open{ display:none !important; }

/* ✅ 하단 그라데이션 오버레이 */
.gf-cover-media::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:55%;                 /* ✅ 그라데이션 높이(조절 포인트) */
  background:linear-gradient(
    to top,
    rgba(2,6,23,.70),
    rgba(2,6,23,.00)
  );
  pointer-events:none;
}

/* ✅ 제목: 하단에 포스터처럼 */
.gf-cover-title{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;                  /* 포스터 느낌: pill 제거 */
  background:transparent;
  border:0;
  backdrop-filter:none;

  font-weight:800;
  font-size:13px;             /* ✅ 요청: 13px */
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.gf-cover-ico{ font-size:14px; line-height:1; opacity:.95; }
.gf-cover-txt{ letter-spacing:-0.2px; }

/* 빈 상태 */
.gf-cover-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#64748b;
}

/* hover */
.gf-cover:hover{
  box-shadow:0 10px 24px rgba(2,6,23,.08);
  transform:translateY(-1px);
  transition:box-shadow .18s ease, transform .18s ease;
}

/* 1x4 그리드 */
.gf-feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:10px;
}

@media (max-width: 900px){
  .gf-feature-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 520px){
  .gf-feature-grid{ grid-template-columns:1fr; }
}

.gf-cover-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ✅ 제목을 "사진 하단" 고정 */
.gf-cover-media{
  position: relative;  /* ★ 이게 없으면 absolute가 화면 기준으로 잡힙니다 */
}

.gf-cover-title{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;        /* ★ 하단으로 내려가는 핵심 */
  top: auto !important;
  transform: none !important;

  font-size: 13px;
  font-weight: 800;
  color: #fff;
  z-index: 2;
}