/* ==========================================
   보호소(shelter) 페이지
   ========================================== */
.nav-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 8px 20px 0;
}
.protect-con {
  display: flex;
}
/* 탭 스트립: 하단 경계선 위에 탭들이 얹히는 형태 */
.protect-item {
  display: flex;
  gap: 4px;
  font-size: var(--font-body);
  margin-bottom: 24px;
  padding: 0;
  border-bottom: 1px solid var(--color-border-light);
}
.protect-tab {
  display: block;
  padding: 12px 16px;
  color: var(--color-text-sub);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* 컨테이너 경계선과 겹쳐 밑줄이 자연스럽게 붙도록 */
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.protect-tab:hover {
  color: var(--color-text);
}
.protect-tab.active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom-color: var(--color-primary);
}
/*필터 모달 css*/
.filter-event {
  display: none; /* 평소 숨김*/
  position: fixed; /* 스크롤해도 화면 덮음*/
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /*배경 어둡게*/
  z-index: var(--z-modal);
}
/*모달 내용 박스*/
.filter-modal-content {
  background-color: var(--color-bg);
  padding: 30px;
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 450px;
  max-height: 85vh; /*화면이 작아도 스크롤이 생기게*/
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
/*모달 내부 간격 및 정렬*/
.filter-modal-content form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.modal-header {
  border-bottom: 1px solid var(--color-border);
  margin-top: 20px;
}
.date-inputs {
  text-align: center;
}
/* 헤더(제목 + 닫기 버튼) 나란히 배치 */
.filter-modal-content .modal-header,
.filter-modal-content h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}
/* 입력 필드 및 셀렉트 박스*/
.filter-modal-content select,
.filter-modal-content input[type="date"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  margin-top: 5px;
}
/* 검색하기 버튼: 공통 .btn .btn--primary .btn--block, 여백만 조정 */
.filter-modal-content button[type="submit"] {
  margin-top: 10px;
}
/* 닫기 버튼: 공통 .btn .btn--text, 크기만 키움 */
.filter-modal-content .close-btn {
  font-size: var(--font-h3);
}
/*필터가 보여졌을 때 상태*/
.filter-event.show {
  display: flex;
  justify-content: center;
  align-items: center;
}
.filter-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  margin-bottom: 20px;
  padding: 0 20px;
}
.main-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto 40px;
  padding: 0 20px;
}
.btn-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* 필터 pill 버튼은 공통 .btn .btn--chip 사용 */
.list-design {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  padding: 0;
}
.list-design li a {
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform 0.2s ease;
}
.list-design li a:hover {
  transform: translateY(-4px);
}
.list-design img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  background-color: var(--color-border-light);
}
.rec-species {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-loc {
  margin-top: 2px;
  font-size: var(--font-xs);
  color: var(--color-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boho-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}
.protect-boho {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  padding: 0;
  margin-bottom: 30px;
}
.protect-boho li a {
  display: flex;
  gap: 20px;
  height: 100%; /* 그리드 셀 높이를 채워 카드 높이 정렬 */
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 15px;
  color: inherit;
  align-items: flex-start;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.protect-boho li a:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-soft);
}
.protect-boho img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background-color: var(--color-border-light);
}
/*스켈레톤 카드(1:1)기준으로 실제 가로형 정사각형 맞춤 -> loading 후 레이아웃XW */
.protect-boho .skeleton-card::before {
  aspect-ratio: auto;
  height: 152px;
}
.card-info {
  width: 100%;
}
.badge-group {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.badge {
  font-size: var(--font-xs);
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff; /* 상태 뱃지: (.badge-blue등) + 흰 텍스트*/
}
.badge.sex {
  background: var(--color-bg-soft);
  color: var(--color-text-sub);
}
.protect-boho li dl {
  display: grid;
  /* dl 텍스트 내용 크기만큼 dd값은 남는 공간 전부*/
  grid-template-columns: auto 1fr;
  gap: 4px 15px;
  font-size: var(--font-sm);
  width: 100%;
  margin: 0;
}
.protect-boho li dt {
  color: var(--color-text-muted);
}
.protect-boho li dd {
  color: var(--color-text);
  margin: 0;
}
.btn-cen {
  display: flex;
  justify-content: center; /* JS가 버튼 display를 block으로 바꿔도 가운데 유지 */
  padding: 0;
  margin-bottom: 20px;
}
/* 더보기 버튼은 공통 .btn .btn--ghost 사용 */
/*보호소 찾기 필터 영역*/
.map-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto 30px;
  padding: 0 20px;
}
/* 지도 실패 시 보호소 텍스트 목록*/
.shelter-fallback {
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
}
.shelter-fallback li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-sm);
}
.shelter-fallback li:last-child {
  border-bottom: 0;
}
.shelter-fallback span {
  color: var(--color-text-sub);
}
.shelter-fallback strong {
  color: var(--color-text-strong);
}
.map-fallback-msg {
  text-align: center;
  padding: 40px;
  color: var(--color-text-sub);
}
#shelter-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-light);
  height: 500px;
}
/* ==========================================
   보호소 페이지 반응형 (1024px or 769px)
   ========================================== */
/*테블릿 화면 (너비 1024 이하일때)*/
@media screen and (max-width: 1024px) {
  .list-design {
    grid-template-columns: repeat(3, 1fr); /*5열 -> 3열*/
  }
  .filter-modal-content {
    max-width: 90%; /* 모달이 화면 밖으로 빠져 나가지 않게함*/
  }
}
/*모바일화면 (너비 768 이하일때)*/
@media screen and (max-width: 768px) {
  .list-design {
    grid-template-columns: repeat(2, 1fr); /*3열 -> 2열*/
  }
  .protect-boho {
    grid-template-columns: 1fr; /*2열 -> 1열 (모바일에서만)*/
  }
  .protect-boho li a {
    flex-direction: column; /* li안에 a태그 이미지+정보 가로 배치 -> 세로 배치*/
  }
  .protect-boho img {
    width: 100%;
    /* height: 400px; */
    /*고정 비율로 주려다가 더 좁은기기나 특정화면에서 짤릴거같아서 고정비율 로 바꿈*/
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .btn-filter {
    flex-wrap: wrap; /*필터들이 한 줄에 안들어가면 줄바꿈*/
    gap: 8px;
  }
  #shelter-map {
    height: 350px;
  }
}