@charset "UTF-8";
/* ==========================================================================
   입양 페이지 전용 (adoption.html) — style.css의 .pets/.pet 카드 + sub.css 컴포넌트 확장
   1) 배지 안내  2) 상세 동물 카드  3) 절차·상담 신청  4) 온센터
   ========================================================================== */

/* 본문 안 링크 */
.info-list a, .callout a { font-weight: 700; color: var(--c-orange-deep); text-decoration: underline; text-underline-offset: 3px; }
.info-list a:hover, .callout a:hover { color: var(--c-orange-hover); }

/* 1) 배지 안내 -------------------------------------------------------------- */
.badge-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1rem; font-size: .875rem; color: var(--c-text-2); }.badge-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.badge-legend .badge { position: static; flex: none; }
.sub-section .sec-head--split { max-width: none; }
.sec-head--split > div { max-width: 46rem; }

/* 2) 상세 동물 카드 (메인 .pet 카드 + 성격·돌봄 메모 + 버튼) --------------- */
.pets.pets--detail { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.pets--detail .pet__card {
  padding: .625rem .625rem 1.25rem;
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-white);
  transition: border-color .25s, box-shadow .25s;
}
.sub-section--cream .pets--detail .pet__card { border-color: transparent; }
.pets--detail .pet__thumb { aspect-ratio: 16 / 10; }
.pets--detail .pet__body { padding: 1rem .625rem 0; }
.pets--detail .pet__name { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.4375rem); font-weight: 800; }
/* 메인에서 '만나러 가기'로 들어왔을 때 해당 카드 강조 */
.pets--detail .pet:target .pet__card { border-color: var(--c-orange); box-shadow: 0 0 0 3px var(--c-orange), var(--shadow-soft); }

.pet-facts { display: grid; gap: .625rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--c-line); }
.pet-facts dt { font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--c-orange-deep); }
.pet-facts dd { margin: .125rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--c-text-2); }
.pet-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: 1.25rem; }
.pet-actions .btn { flex: 1 1 auto; }
.pets-note { margin-top: 1.5rem; }

/* 3) 절차 · 상담 신청 ------------------------------------------------------- */
.adopt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 3rem; }
.adopt-callout { margin-top: 1.5rem; }

/* 4) 온센터 ----------------------------------------------------------------- */
#oncenter .feature__body .sec-title { margin-bottom: 0; }
.oncenter-list { margin-top: 1.25rem; }
.oncenter-info { margin-top: 1.5rem; }
.oncenter-cards { margin-top: 3rem; }
.oncenter-cards__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* 반응형 -------------------------------------------------------------------- */
@media (min-width: 560px) {
  .pets.pets--detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pets--detail .pet__thumb { aspect-ratio: 4 / 3; }
  .pet-actions .btn { flex: 0 1 auto; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* 태블릿: 3열 카드 그리드의 마지막 홀수 카드는 한 줄 전체로 */
  .card-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
  .pets.pets--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .sec-head--split .badge-legend { flex-direction: column; align-items: flex-start; flex: none; gap: .5rem; margin-top: 0; padding-bottom: .25rem; }
}
@media (min-width: 1024px) {
  .pets.pets--detail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .adopt-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .adopt-grid__aside { position: sticky; top: calc(var(--header-h) + var(--lnb-h) + 2rem); }
}