/* =========================================================
   archive-top-card.css
   - 사진/영상 공통 상단 카드
   - gallery_cover / gallery_family_hub / gallery-events / gallery-travel
   - gallery_family_group / gallery-parents 등 상세 공통
   ========================================================= */

/* 카드 */
.archive-top-card{
  margin-top:0 !important;
  background:#fff;
  border:1px solid rgba(148,163,184,.24);
  border-radius:22px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  padding:14px 16px 12px;
  margin-bottom:6px;
}

/* 헤더 */
.archive-top-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.archive-top-copy{
  min-width:0;
  flex:1 1 auto;
}

.archive-top-title{
  margin:0;
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  color:#0f172a;
}

.archive-top-sub{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.45;
  color:#64748b;
}

/* 우측 버튼 */
.archive-top-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  flex-shrink:0;
}

.archive-top-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #d8e1ee;
  background:#fff;
  color:#0f172a;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.archive-top-btn:hover{
  background:#f8fafc;
}

.archive-top-btn:active{
  transform:translateY(1px);
}

.archive-top-btn--ghost{
  background:#fff;
  color:#0f172a;
}

.archive-top-btn--primary{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

.archive-top-btn--primary:hover{
  background:#1d4ed8;
  border-color:#1d4ed8;
  color:#fff;
}

/* 필터 래퍼 */
.archive-top-filter-wrap{
  margin-top:10px;
  padding:10px;
  border-radius:18px;
  background:#f3f6fb;
  border:1px solid #e3eaf5;
}

/* =========================================================
   필터 공통
   ========================================================= */

.archive-filter-grid{
  display:grid;
  gap:10px;
}

.archive-filter-grid.cols-2{
  grid-template-columns:1fr 1fr;
}

.archive-filter-grid.cols-3{
  grid-template-columns:.95fr 1fr 1.35fr;
}

.archive-filter-grid.cols-4{
  grid-template-columns:1.15fr .75fr .9fr 1.2fr;
}

.archive-filter-box{
  background:#fff;
  border:1px solid #dde6f2;
  border-radius:15px;
  padding:10px 12px;
  min-width:0;
}

.archive-filter-label{
  margin-bottom:8px;
  font-size:12px;
  font-weight:800;
  color:#334155;
}

.archive-filter-body{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  min-width:0;
}

/* 칩 */
.archive-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid #d8e1ee;
  background:#fff;
  color:#334155;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}

.archive-chip:hover{
  background:#f8fafc;
}

.archive-chip.is-active,
.archive-chip[aria-current="page"]{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
}

/* select */
.archive-inline-form{
  display:block;
  width:100%;
}

.archive-select{
  width:100%;
  min-width:0;
  height:40px;
  border:1px solid #d7deea;
  border-radius:14px;
  padding:0 14px;
  background:#fff;
  color:#1f2937;
  font-size:14px;
  font-weight:700;
  outline:none;
}

.archive-select:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

/* search */
.archive-search{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
}

.archive-search-input{
  flex:1 1 auto;
  min-width:0;
  height:40px;
  border:1px solid #d7e1ee;
  border-radius:14px;
  padding:0 14px;
  background:#fff;
  color:#0f172a;
  font-size:14px;
  outline:none;
}

.archive-search-input:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

.archive-search-btn,
.archive-search-reset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  border-radius:14px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.archive-search-btn{
  border:0;
  background:#2563eb;
  color:#fff;
  cursor:pointer;
}

.archive-search-btn:hover{
  background:#1d4ed8;
}

.archive-search-reset{
  border:1px solid #d8e1ee;
  background:#fff;
  color:#334155;
}

.archive-search-reset:hover{
  background:#f8fafc;
}

/* =========================================================
   대표페이지 메타형
   ========================================================= */

.archive-top-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.archive-top-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.archive-pill{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid #dbe3f0;
  background:#fff;
  color:#475569;
  font-size:13px;
  font-weight:700;
}

.archive-top-counter{
  margin-left:auto;
  min-width:190px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
}

.archive-top-counter-label{
  color:#64748b;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.archive-top-counter-value{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

.archive-top-counter-value strong{
  font-size:18px;
  line-height:1.1;
  color:#0f172a;
}

.archive-top-counter-value span{
  font-size:12px;
  color:#94a3b8;
}

/* =========================================================
   반응형
   ========================================================= */

@media (max-width: 1100px){
  .archive-filter-grid.cols-3,
  .archive-filter-grid.cols-4{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 820px){
  .archive-top-card{
    padding:12px 12px 10px;
    border-radius:18px;
  }

  .archive-top-head{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .archive-top-actions{
    justify-content:flex-start;
  }

  .archive-top-meta{
    flex-direction:column;
    align-items:stretch;
  }

  .archive-top-counter{
    margin-left:0;
    width:100%;
  }

  .archive-filter-grid.cols-2,
  .archive-filter-grid.cols-3,
  .archive-filter-grid.cols-4{
    grid-template-columns:1fr;
  }

  .archive-top-title{
    font-size:18px;
  }

  .archive-top-sub{
    font-size:12px;
  }

  .archive-top-btn{
    min-height:40px;
    padding:0 13px;
  }

  .archive-select,
  .archive-search-input,
  .archive-search-btn,
  .archive-search-reset{
    height:44px;
  }
}

@media (max-width: 640px){
  .archive-filter-box{
    padding:10px;
    border-radius:14px;
  }

  .archive-chip{
    min-height:32px;
    padding:0 12px;
    font-size:13px;
  }

  .archive-search{
    flex-wrap:wrap;
  }
}