/* =========================================================
 * gallery-cover.css (PRO)
 * - 사진첩 표지(갤러리 홈) 전용
 * - 1440 layout-inner 기준
 * ========================================================= */

.page-gallery-cover .site-main{ padding: 0; }
.page-gallery-cover .layout-inner.layout-1440{ padding: 16px 16px 26px; }

/* 공통 카드 톤 */
.page-gallery-cover .card{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  background:#fff;
}

/* HERO */
.g-hero{
  padding: 18px;
  display:flex;
  justify-content:space-between;
  gap: 18px;
  align-items:flex-start;
}

.g-title{
  margin:0;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: -0.5px;
  color: rgba(15,23,42,.92);
}
.g-sub{
  margin: 8px 0 12px;
  color: rgba(15,23,42,.68);
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.55;
}

.g-search{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 4px;
}
.g-input{
  flex:1;
  height: 32px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.55);
  padding: 0 14px;
  font-size: 14px;
  outline:none;
}
.g-input:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.g-btn{
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background:#fff;

  /* ✅ 추가: 모바일에서 글씨 안 보이는 문제 해결 */
  color: #0f172a;                 /* 버튼 텍스트 색 고정 */
  -webkit-text-fill-color:#0f172a;/* iOS에서 텍스트 색 꼬임 방지 */

  font-weight: 900;
  cursor:pointer;
}
@media (hover:hover){
  .g-btn:hover{ background: rgba(15,23,42,.04); }
}

.g-tip{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }
.g-pill{
  display:inline-flex;
  align-items:center;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(37,99,235,.95);
  font-weight: 900;
  font-size: 12px;
}

/* HERO Actions */
.g-hero-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}
.g-cta{
  height: 33px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background:#fff;
  font-weight: 1000;
  text-decoration:none;
  color: rgba(15,23,42,.86);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.g-cta-primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}
@media (hover:hover){
  .g-cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15,23,42,.10);
  }
  .g-cta-primary:hover{
    filter: brightness(1.02);
    box-shadow: 0 12px 26px rgba(37,99,235,.24);
  }
  .g-cta:active{ transform: translateY(0); box-shadow:none; }
}

/* Sections */
.g-section{ margin-top: 16px; }
.g-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  margin: 0 2px 10px;
}
.g-h2{
  margin:0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.3px;
}
.g-muted{
  color: rgba(15,23,42,.60);
  font-weight: 800;
  font-size: 13px;
}

/* Category cards grid */
.g-cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.g-card{
  border-radius: 18px;
  padding: 14px;
  text-decoration:none;
  border: 1px solid rgba(148,163,184,.35);
  background: linear-gradient(135deg, rgba(241,245,249,.95), rgba(255,255,255,.9));
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
  min-height: 110px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition: transform .12s ease, box-shadow .12s ease;
}
.g-card-title{
  font-weight: 1000;
  font-size: 16px;
  color: rgba(15,23,42,.92);
}
.g-card-desc{
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(15,23,42,.62);
  font-weight: 800;
  line-height:1.45;
}
.g-card-go{
  margin-top: 10px;
  font-weight: 1000;
  color: rgba(37,99,235,.95);
  font-size: 13px;
}
@media (hover:hover){
  .g-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(15,23,42,.10);
  }
}

/* 카드별 톤(이미지 없어도 분위기) */
.g-card--group{ background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(255,255,255,.95)); }
.g-card--family{ background: linear-gradient(135deg, rgba(16,185,129,.10), rgba(255,255,255,.95)); }
.g-card--kids{  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(255,255,255,.95)); }
.g-card--events{background: linear-gradient(135deg, rgba(168,85,247,.10), rgba(255,255,255,.95)); }

/* Recent placeholder */
.g-recent{ padding: 14px; }
.g-empty{
  padding: 18px 12px;
  text-align:center;
  color: rgba(15,23,42,.62);
  font-weight: 900;
}
.g-empty a{ color: rgba(37,99,235,.95); text-decoration:none; }
@media (hover:hover){ .g-empty a:hover{ text-decoration:underline; } }

/* Responsive */
@media (max-width: 1100px){
  .g-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .g-hero{ flex-direction: column; }
  .g-hero-actions{ justify-content:flex-start; }
  .g-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
 * gallery_cover.php 전용: breadcrumb(=page-top) 위아래 간격 축소
 * ========================================================= */
.page-gallery-cover .page-top{
  padding: 4px 0 !important;   /* ✅ 브레드크럼 영역 자체를 얇게 */
  margin: 0 !important;
}
.page-gallery-cover .page-top-inner{
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-gallery-cover .breadcrumb{
  margin: 0 !important;
}

/* cover 메인 시작 간격도 함께 압축 (브레드크럼이 내려와 보이는 착시 제거) */
.page-gallery-cover .site-main{ padding-top: 0 !important; }
.page-gallery-cover .g-hero{ margin-top: 6px; }  /* 필요시 0~8px에서 취향 조절 */


/* =========================================================
 * Recent grid
 * ========================================================= */
.g-recent{ padding: 14px; }

.g-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.g-thumb{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(241,245,249,.7);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  aspect-ratio: 1 / 1;
}

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

@media (hover:hover){
  .g-thumb:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(15,23,42,.10);
  }
}

.g-empty-actions{
  margin-top: 8px;
  display:flex;
  gap: 10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.g-empty-actions a{ color: rgba(37,99,235,.95); text-decoration:none; font-weight: 1000; }
@media (hover:hover){ .g-empty-actions a:hover{ text-decoration: underline; } }
.g-empty-dot{ opacity:.35; font-weight: 900; }

@media (max-width: 1100px){
  .g-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px){
  .g-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
 * 빠른 이동 카드: "열기 →" 우측 상단 배치
 * ========================================================= */
.page-gallery-cover .g-card{
  position: relative;
  padding-right: 92px;   /* ✅ 우측 상단 버튼 자리 확보 (필요시 84~110px 조절) */
}

.page-gallery-cover .g-card-go{
  position: absolute;
  top: 12px;
  right: 12px;
  font-weight: 1000;
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  color: rgba(37,99,235,.95);
  border: 1px solid rgba(37,99,235,.18);
  text-decoration: none;
}

@media (hover:hover){
  .page-gallery-cover .g-card:hover .g-card-go{
    background: rgba(37,99,235,.16);
    border-color: rgba(37,99,235,.28);
  }
}

.page-gallery-cover .g-cards{
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .page-gallery-cover .g-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .page-gallery-cover .g-cards{ grid-template-columns: 1fr; }
}

.page-gallery-cover .g-card{
  position: relative;
  padding: 12px 14px;
  padding-right: 84px;
  min-height: 0; /* 혹시 고정 높이가 있으면 방지 */
}

.page-gallery-cover .g-card-title{
  font-size: 16px;
  margin: 0;
}

.page-gallery-cover .g-card-desc{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
 * Gallery Search Bar (FINAL)
 * - input + button 1줄 정렬
 * - 모바일에서도 안깨짐
 * ========================================================= */

.g-search{
  display:flex;
  align-items:center;
  gap: 10px;

  width: 100%;
  max-width: 520px;        /* ✅ 필요하면 640~900 조절 */
  margin: 0 auto;          /* 가운데 정렬 */
}

/* ✅ input은 남는 공간을 전부 차지 */
.g-input{
  flex: 1 1 auto;
  min-width: 0;            /* ✅ flex overflow 방지(매우 중요) */

  height: 36px;
  padding: 0 14px;

  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.55);
  background:#fff;

  color:#0f172a;
  -webkit-text-fill-color:#0f172a;

  font-weight: 800;
  outline: none;
}

/* placeholder */
.g-input::placeholder{
  color: rgba(15,23,42,.45);
  font-weight: 700;
}

/* ✅ 버튼은 고정 폭 느낌(짧게) */
.g-btn{
  flex: 0 0 auto;

  height: 36px;
  padding: 0 16px;
  border-radius: 999px;

  border: 1px solid rgba(148,163,184,.55);
  background:#fff;

  color:#0f172a;                  /* ✅ 모바일 글씨 안보임 해결 */
  -webkit-text-fill-color:#0f172a;

  font-weight: 900;
  cursor:pointer;
  white-space: nowrap;            /* ✅ "검색" 줄바꿈 방지 */
}

@media (hover:hover){
  .g-btn:hover{ background: rgba(15,23,42,.04); }
}

/* =========================================================
 * Mobile tweak
 * - 너무 좁은 화면에서도 1줄 유지
 * ========================================================= */
@media (max-width: 420px){
  .g-search{ gap: 8px; }

  .g-input{
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
  }

  .g-btn{
    height: 36px;
    padding: 0 12px;  /* ✅ 버튼 폭 줄이기 */
    font-size: 13px;
  }
}

/* ===== HERO 2컬럼 ===== */
.gc-hero{
  display:flex;
  gap:24px;
  align-items:stretch;
  padding:22px;
}

.gc-hero-left{ flex: 1 1 auto; min-width:0; }
.gc-hero-right{
  flex: 0 0 340px;              /* 우측 폭 (원하면 320~380 조절) */
  display:flex;
  flex-direction:column;
  align-items:flex-end;         /* 우측 정렬 */
  gap:12px;
}

/* 우측 상단 버튼 */
.gc-actions{
  display:flex;
  gap:10px;
}

/* 버튼 스타일은 기존 vm-cta 쓰고 있으면 클래스 공유해도 OK */
.gc-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}
.gc-cta-primary{
  background: rgba(59,130,246,1);
  border-color: rgba(59,130,246,1);
  color:#fff;
}

/* ✅ 카운터(동영상 느낌: 작은 박스/행 단위) */
.gc-stats{
  width:100%;
  max-width:340px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.02);
  border-radius:14px;
  padding:10px 12px;
}
.gc-stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.gc-stat-label{
  font-size:12px;
  color: rgba(15,23,42,.65);
  font-weight:700;
}
.gc-stat-value{
  font-size:13px;
  font-weight:900;
  color: rgba(15,23,42,.92);
}

/* ✅ 오른쪽으로 옮긴 칩(기존 왼쪽 하단 텍스트) */
.gc-tips{
  width:100%;
  max-width:340px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.gc-pill{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font-size:12px;
  font-weight:800;
  color: rgba(15,23,42,.85);
  text-decoration:none;
}

/* 반응형: 태블릿/모바일에서 세로 스택 */
@media (max-width: 1024px){
  .gc-hero{ flex-direction:column; }
  .gc-hero-right{
    flex: 1 1 auto;
    width:100%;
    align-items:flex-start;     /* 모바일에서는 좌측 정렬이 보기 좋음 */
  }
  .gc-tips{ justify-content:flex-start; }
}


/* ==========================================================================
   gallery_cover.php HERO (영상페이지 느낌으로 우측 공간 활용)
   ========================================================================== */

/* ✅ 히어로 전체: 좌(본문) + 우(버튼/카운터/안내) */
.gc-hero{
  display:flex;
  gap:24px;                 /* 좌우 간격 */
  align-items:stretch;
  justify-content:space-between;
  padding:22px;
}

/* ✅ 왼쪽 영역 */
.gc-left{
  flex:1 1 auto;
  min-width:0;              /* 긴 텍스트가 레이아웃 깨는 것 방지 */
}

.gc-title{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.15;
}

.gc-sub{
  margin:0 0 14px;
  color:rgba(15,23,42,.72);
}

/* 검색줄 */
.gc-search{
  display:flex;
  gap:10px;
  align-items:center;
}

.gc-input{
  flex:1 1 auto;
  min-width:0;
  height:36px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  padding:0 12px;
  outline:none;
}

.gc-btn{
  height:34px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}

/* ✅ 오른쪽 영역(우측 공간 활용) */
.gc-right{
  flex:0 0 360px;           /* 우측 폭(원하면 320~420 조절) */
  display:flex;
  flex-direction:column;
  align-items:flex-end;      /* ✅ 좌측 정렬 */
  justify-content:center;
  gap:12px;
}

/* 우측 상단 버튼 2개 */
.gc-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;  /* ✅ 버튼 우측 정렬 */
}

.gc-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;               /* ✅ 더 컴팩트(얇게) */
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:rgba(15,23,42,.92);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  white-space:nowrap;
}

.gc-cta-primary{
  background:rgba(59,130,246,1);
  border-color:rgba(59,130,246,1);
  color:#fff;
}

/* ✅ 카운터 바: "전체 사진" + "312장" */
.gc-counter{
  margin-top: 14px;
  width:100%;
  max-width: 200px;          /* 우측 폭과 맞춤 */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:10px 12px;        /* ✅ 높이 줄여 컴팩트 */
  background:rgba(15,23,42,.02);
}

.gc-counter-left{
  font-size:13px;
  color:rgba(15,23,42,.75);
  white-space:nowrap;
}

.gc-counter-right{
  text-align:right;
}

.gc-counter-num{
  font-size:16px;
  font-weight:900;
  line-height:1.1;
}

.gc-counter-date{
  margin-top:2px;
  font-size:12px;
  color:rgba(15,23,42,.55);
}

/* ✅ 우측 안내 pill(기존 왼쪽 아래 텍스트 이동) */
.gc-tips{
  display:flex;
  flex-direction:row;      /* ✅ 세로 → 가로 */
  gap:10px;
  align-items:center;
  justify-content:flex-start;  /* ✅ 오른쪽 → 왼쪽 */
  width:100%;
  margin-top:10px;
}

.gc-pill{
  display:inline-flex;
  align-items:center;
  height:24px;               /* ✅ 더 얇게 */
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-size:12px;            /* ✅ 글씨도 작게 */
  font-weight:800;
  color:rgba(15,23,42,.78);
}

.gc-pill-link{
  text-decoration:none;
  color:rgba(59,130,246,1);
  border-color:rgba(59,130,246,.25);
  background:rgba(59,130,246,.06);
}

/* ✅ 반응형: 태블릿/모바일은 위아래로 쌓기 */
@media (max-width: 1024px){
  .gc-hero{ flex-direction:column; }
  .gc-right{
    width:100%;
    flex:1 1 auto;
    align-items:flex-start;  /* 좁으면 왼쪽 정렬이 더 자연스러움 */
  }
  .gc-actions{ justify-content:flex-start; }
  .gc-tips{ align-items:flex-start; }
  .gc-counter{ max-width:420px; }
}

/* =========================================================
   ✅ 칩 2개를 "카드 왼쪽"에 가로 1열로 배치하기 (시각 이동)
   - 전제: 칩 래퍼가 .gc-tips 라고 가정
   - 카드(히어로) 컨테이너에 position:relative 필요
   ========================================================= */

/* 1) 히어로 카드(전체)를 기준 좌표로 만든다 */
.gc-hero,
.gc-hero.card,
.gallery-hero,         /* 혹시 클래스명이 다르면 여기 중 맞는 걸 남겨 */
.gallery-hero.card{
  position: relative;
}

/* 2) 칩 2개를 카드 왼쪽(검색 아래쪽)에 "띄워서" 배치 */
.gc-tips{
  position: absolute;          /* ✅ 오른쪽 영역에서 빠져나와 카드 위에 배치 */
  left: 24px;                  /* ✅ 카드 왼쪽 여백 */
  bottom: 22px;                /* ✅ 카드 하단에서 위로 */
  display: flex;               /* ✅ 가로 1열 */
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  z-index: 2;
}

/* 3) 왼쪽 내용(검색/설명)과 칩이 겹치지 않게 아래 여백 확보 */
.gc-left,
.gc-hero-left{
  padding-bottom: 34px;        /* ✅ 칩 높이만큼 여백 (필요시 44~70 조절) */
}

/* 4) 칩 자체를 더 컴팩트하게(원하면) */
.gc-tips .chip,
.gc-tips a,
.gc-tips span{
  font-size: 12px;             /* ✅ 글씨 조금 줄임 */
  padding: 6px 10px;           /* ✅ 얇게 */
  border-radius: 999px;
}

/* 5) 모바일에서는 absolute 해제해서 자연스럽게 흐르게 */
@media (max-width: 640px){
  .gc-tips{
    position: static;          /* ✅ 모바일에서는 아래로 자연스럽게 */
    margin-top: 10px;
  }
  .gc-left,
  .gc-hero-left{
    padding-bottom: 0;
  }
}

.gc-search{
  display: flex;
  align-items: center;
  gap: 10px;
}

.gc-search input{
  width: 520px;      /* ← 여기 조절 */
  flex: 0 0 auto;    /* 자동 확장 방지 */
}