/* =========================================================
 * /assets/css/family-hub.css  (FINAL)
 * - 가족 사진 대표(허브) 페이지
 * - 페이지 클래스: body.page-family-hub
 * ========================================================= */

.page-family-hub .gh-wrap{
  padding-top: 14px;
  padding-bottom: 22px;
}

/* HERO */
.gh-hero{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
}

.gh-title{
  margin-bottom: 16px;
  font-size: 22px;
  letter-spacing: -0.6px;
}

.gh-desc{
  margin: 12px 10px 16px;
  color: rgba(15,23,42,.70);
  font-weight: 700;
  line-height: 1.5;
  font-size:13.5px;
}

/* 검색(선택) */
.gh-search{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 10px;
}
.gh-input{
  flex:1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  outline: none;
  background: #fff;
  font-weight: 800;
}
.gh-input:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.gh-btn{
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.95);
  font-weight: 900;
  cursor: pointer;
}

/* 개선된 칩 스타일 */
.gh-chip {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;       /* 좌우 여백을 늘려 안정감 부여 */
  border-radius: 12px;     /* 완전 원형보다는 약간 각진 부드러운 사각형이 전문적임 */
  font-size: 14px;
  font-weight: 600;        /* 너무 두꺼운 900보다는 600~700 추천 */
  color: #334155;          /* 깊이 있는 다크 그레이 */
  background-color: #f1f5f9; /* 밝고 깨끗한 배경색 */
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease; /* 부드러운 변화 효과 */
  cursor: pointer;
}

/* 마우스 호버(올렸을 때) 효과 */
.gh-chip:hover {
  background-color: #ffffff;
  border-color: #3b82f6;   /* 강조 포인트 컬러 (블루) */
  color: #3b82f6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* 미세한 그림자 */
  transform: translateY(-1px); /* 살짝 떠오르는 느낌 */
}

/* 선택된 상태 (Active) */
.gh-chip.active {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #2563eb;
}

@media (hover:hover){
  .gh-chip:hover{
    background: rgba(37,99,235,.08);
    border-color: rgba(37,99,235,.18);
    color: rgba(37,99,235,.95);
  }
}

/* 우측 패널 */
.gh-hero-panel{
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.65);
}
.gh-panel-title{
  font-weight: 1000;
  margin-bottom: 10px;
}
.gh-panel-links{
  display:grid;
  gap: 8px;
}
.gh-panel-link{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 900;
  color: rgba(15,23,42,.90);
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
}
@media (hover:hover){
  .gh-panel-link:hover{
    background: rgba(37,99,235,.07);
    border-color: rgba(37,99,235,.18);
  }
}
.gh-panel-note{
  margin-top: 10px;
  font-size: 12px;
}

/* GRID */
.gh-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.gh-card{
  display:flex;
  flex-direction: column;
  padding: 0;
  overflow:hidden;
  border-radius: 18px;
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(15,23,42,.08);
}

.gh-thumb{
  height: 84px;                 /* ✅ 높이 조절 포인트 */
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.gh-thumb-ico{
  font-size: 30px;
  line-height: 1;
}

/* ✅ 톤(카테고리별 색감) - 필요하면 바꿔도 됨 */
.gh-thumb[data-tone="parents"]{ background: rgba(37,99,235,.10); }
.gh-thumb[data-tone="sieun"]  { background: rgba(16,185,129,.10); }
.gh-thumb[data-tone="myeong"] { background: rgba(245,158,11,.10); }
.gh-thumb[data-tone="doeun"]  { background: rgba(168,85,247,.10); }

.gh-body{
  padding: 12px 12px 10px;
}
.gh-card-title{
  font-weight: 1000;
  letter-spacing: -0.2px;
}
.gh-card-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(15,23,42,.65);
  font-weight: 800;
}

.gh-go{
  margin-top: auto;
  padding: 10px 12px 12px;
  font-weight: 1000;
  color: rgba(37,99,235,.95);
}

/* 안내 카드 */
.gh-note{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
}
.gh-note-title{
  font-weight: 1000;
  margin-bottom: 8px;
}
.gh-note-list{
  margin: 0;
  padding-left: 24px;
  color: rgba(15,23,42,.78);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
}

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

/* =========================================================
 * [TUNING BLOCK] 가족사진 대표 페이지 카드 타이포/CTA 위치
 * - 사용자가 쉽게 수정하도록 주석을 자세히 달아둠
 * ========================================================= */

/* 카드: 우측상단 "열기 →" 배치하려면 relative 필요 */
.page-family-hub .gh-card{
  position: relative;
}

/* ✅ (요청) 카드 본문/설명 글씨 크기 통일 (기본 13px)
   - 아래 13px 값을 바꾸면 카드 전체 타이포 밸런스가 같이 바뀜 */
.page-family-hub .gh-body{
  font-size: 13px; /* ✅ 조절 포인트: 카드 내부 기본 글씨 */
}

/* 제목(부모님/시은·원석 등) */
.page-family-hub .gh-card-title{
  font-size: 15px;   /* ✅ 조절 포인트: 제목도 13px로 통일 */
  font-weight: 1000; /* 제목은 굵게 유지해서 계층감 살림 */
  letter-spacing: -0.2px;
}

/* 설명(부모님 중심 가족 사진 등) */
.page-family-hub .gh-card-sub{
  font-size: 13px;              /* ✅ 조절 포인트: 설명글 13px */
  margin-top: 6px;
  color: rgba(15,23,42,.62);    /* 흐리게: 설명은 덜 강조 */
  font-weight: 800;
}

/* ✅ "열기 →"를 우측상단으로 이동
   - 카드 우측 공간이 넓을 때 특히 보기 좋아짐 */
.page-family-hub .gh-go{
  position: absolute;
  top: 12px;     /* ✅ 조절 포인트: 위쪽 여백 */
  right: 12px;   /* ✅ 조절 포인트: 오른쪽 여백 */

  margin: 0;     /* 기존 margin-top: auto 같은 값 무력화 */
  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px; /* ✅ 조절 포인트: CTA 글씨 */
  font-weight: 1000;

  color: rgba(37,99,235,.95);
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
}

@media (hover:hover){
  .page-family-hub .gh-card:hover .gh-go{
    background: rgba(37,99,235,.14);
    border-color: rgba(37,99,235,.24);
  }
}

/* 본문이 "열기→"와 겹치지 않도록 상단 패딩을 조금 확보 */
.page-family-hub .gh-body{
  padding-top: 14px; /* ✅ 조절 포인트: 겹침 방지용 */
}

/* =========================================================
 * (옵션) 가정별 "사진 수" 배지 스타일 (PHP에서 숫자 출력할 때 사용)
 * - 카드 우측상단에 "128장" 같은 배지용
 * ========================================================= */

.page-family-hub .gh-count{
  position: absolute;
  top: 12px;     /* ✅ 조절 포인트 */
  left: 12px;    /* ✅ 조절 포인트: 좌측 상단 배지 */

  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;

  font-size: 12px;          /* ✅ 조절 포인트 */
  font-weight: 1000;
  color: rgba(15,23,42,.82);

  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.08);
}

/* 모바일에서 상단 배지/열기 버튼이 좁게 느껴지면 살짝 줄이기 */
@media (max-width: 560px){
  .page-family-hub .gh-go{
    top: 10px;
    right: 10px;
    padding: 6px 9px;
  }
  .page-family-hub .gh-count{
    top: 10px;
    left: 10px;
    padding: 0 9px;
  }
}

/* =========================================================
 * [UPGRADE] 카드 우측상단 "열기" 아이콘 버튼(↗)
 * - 기존 .gh-go를 "아이콘 전용"으로 교체
 * ========================================================= */

.page-family-hub .gh-card{ position: relative; } /* 이미 있으면 유지 */

.page-family-hub .gh-go{
  position: absolute;
  top: 12px;     /* ✅ 조절: 위 여백 */
  right: 12px;   /* ✅ 조절: 오른쪽 여백 */

  width: 36px;   /* ✅ 조절: 버튼 크기 */
  height: 36px;  /* ✅ 조절: 버튼 크기 */
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration: none;
  user-select: none;

  /* 고급 느낌(유리/블러 + 라인) */
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.page-family-hub .gh-go-ico{
  font-size: 16px; /* ✅ 조절: 아이콘 크기 */
  font-weight: 1000;
  line-height: 1;
  color: rgba(37,99,235,.95);
}

@media (hover:hover){
  .page-family-hub .gh-card:hover .gh-go{
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(2,6,23,.14);
    border-color: rgba(37,99,235,.18);
  }
}

.page-family-hub .gh-go:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
}

/* 모바일에서 너무 커 보이면 살짝 줄이기 */
@media (max-width: 560px){
  .page-family-hub .gh-go{
    top: 10px;
    right: 10px;
    width: 34px;   /* ✅ 조절 */
    height: 34px;  /* ✅ 조절 */
  }
  .page-family-hub .gh-go-ico{
    font-size: 15px; /* ✅ 조절 */
  }
}

/* ✅ 본문이 버튼과 겹치면 이 값을 올리세요 */
.page-family-hub .gh-body{
  padding-top: 14px; /* ✅ 조절: 겹침 방지 */
}

/* =========================================================
 * [UPGRADE] 빠른 이동 리스트: 아이콘 + 화살표 정렬
 * - 링크에 class="fh-link" 권장
 * ========================================================= */

.page-family-hub .fh-link{
  display:flex;
  align-items:center;
  gap: 10px;               /* ✅ 조절: 아이콘-텍스트 간격 */

  padding: 12px 14px;      /* ✅ 조절: 클릭 영역 */
  border-radius: 14px;
  text-decoration:none;

  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);

  color: rgba(15,23,42,.92);
  font-weight: 900;
  font-size: 14px;         /* ✅ 조절: 빠른이동 글씨 */
}

.page-family-hub .fh-ico{
  width: 28px;
  height: 28px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 16px;         /* ✅ 조절: 아이콘 크기 */
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(37,99,235,.95);
  flex: 0 0 auto;
}

.page-family-hub .fh-arrow{
  margin-left: auto;       /* ✅ 오른쪽 끝으로 밀기 */
  opacity: .65;
  font-weight: 1000;
}

@media (hover:hover){
  .page-family-hub .fh-link:hover{
    background: rgba(37,99,235,.06);
    border-color: rgba(37,99,235,.16);
  }
}