/* 담당 pet — 보호자 화면 CSS. 클래스 접두어 .pet- 만, 색·크기는 var(--토큰)·rem 만(base.css). kit/병렬작업계약.md */

/* 공통 */
.pet-break { overflow-wrap: anywhere; word-break: break-all; }
.pet-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.pet-fs { display: flex; flex-direction: column; gap: var(--sp-4); }
.pet-fs > legend { margin-bottom: var(--sp-3); }
.pet-fs + .pet-fs { padding-top: var(--sp-5); border-top: .0625rem solid var(--line); }
.pet-bullets { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.1rem; list-style: disc; color: var(--ink-2); font-size: var(--fs-sm); }
.pet-hint-up { margin-top: calc(var(--sp-5) * -1 + var(--sp-2)); }
.pet-left { font-size: var(--fs-lg); font-weight: 800; white-space: nowrap; }
.pet-left small { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); margin-left: .125rem; }
.pet-file { padding: .5rem; }
.pet-file::file-selector-button { margin-right: .75rem; min-height: 2.25rem; padding: 0 .9rem; border: .0938rem solid var(--line-input); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; }

/* 요약 지표 */
.pet-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.pet-stats > li { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); min-width: 0; }
.pet-stats .k { display: flex; align-items: center; gap: .375rem; font-size: var(--fs-sm); font-weight: 650; color: var(--ink-3); }
.pet-stats .k .ic { color: var(--accent); }
.pet-stats .v { font-size: 1.75rem; font-weight: 850; line-height: 1.2; }
.pet-stats .v small { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); margin-left: .125rem; }
.pet-stats > li.is-alert { border-color: var(--accent-line); background: var(--accent-soft); }

/* 필터 줄 */
.pet-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.pet-bar > * { min-width: 0; max-width: 100%; }
.pet-bar .chip .num { color: inherit; opacity: .75; }
.pet-sort { display: flex; align-items: center; gap: .5rem; }
.pet-sort .select { width: auto; min-height: 2.75rem; }

/* 반려견 카드 */
.pet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
.pet-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.pet-card-top { display: flex; align-items: center; gap: var(--sp-3); }
.pet-card-top .grow { min-width: 0; }
.pet-card-name { font-size: var(--fs-lg); font-weight: 800; }
.pet-card-name a:hover { text-decoration: underline; text-underline-offset: .1875rem; }
.pet-card-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; padding: var(--sp-3) 0; border-top: .0625rem solid var(--line); border-bottom: .0625rem solid var(--line); }
.pet-card-facts > div { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: var(--fs-sm); }
.pet-card-facts dt { color: var(--ink-3); }
.pet-card-facts dd { font-weight: 700; text-align: right; }
.pet-card-msg { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-sm); padding: .625rem .75rem; }
.pet-card-msg .ic { flex: 0 0 auto; margin-top: .1875rem; width: 1rem; height: 1rem; color: var(--warn); }
.pet-card-msg.is-danger { background: var(--danger-soft); color: var(--ink); }
.pet-card-msg.is-danger .ic { color: var(--danger); }
.pet-card-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
.pet-card-acts .btn { flex: 1 1 auto; }

/* 상세 · 프로필 */
.pet-profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-5); align-items: start; }
.pet-profile-name { font-size: var(--fs-h3); font-weight: 850; }
.pet-profile-name small { font-size: var(--fs-md); font-weight: 600; }
.pet-profile-acts { display: flex; flex-direction: column; gap: var(--sp-2); }
.pet-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem 1.25rem; margin-top: var(--sp-4); }
.pet-kv > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pet-kv dt { font-size: var(--fs-sm); color: var(--ink-3); }
.pet-kv dd { font-weight: 700; }
.pet-vacc-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.pet-vacc-items li { display: flex; gap: .5rem; align-items: flex-start; padding: .75rem; border-radius: var(--r-sm); background: var(--surface); border: .0625rem solid var(--line); min-width: 0; }
.pet-vacc-items li > span { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); }
.pet-vacc-items small { color: var(--ink-3); }
.pet-vacc-items .ic { flex: 0 0 auto; margin-top: .125rem; }
.pet-vacc-items .is-ok .ic { color: var(--ok); }
.pet-vacc-items .is-expired .ic { color: var(--danger); }
.pet-vacc-items .is-missing .ic { color: var(--muted); }
.pet-specials { display: flex; flex-direction: column; }
.pet-specials > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--sp-3); padding: .625rem 0; border-bottom: .0625rem solid var(--line); }
.pet-specials > div:last-child { border-bottom: 0; }
.pet-specials dt { display: flex; align-items: center; gap: .375rem; color: var(--ink-3); font-weight: 650; }
.pet-specials dt .ic { width: 1rem; height: 1rem; color: var(--accent); }
.pet-filebox { display: flex; gap: var(--sp-3); align-items: center; }
.pet-filebox > .ic { color: var(--accent); }
.pet-timeline { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--sp-3); }
.pet-timeline li { display: flex; flex-direction: column; padding: .125rem 0 .125rem 1.1rem; position: relative; font-size: var(--fs-sm); }
.pet-timeline li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--line-strong); }
.pet-timeline li.is-approved::before { background: var(--ok); }
.pet-timeline li.is-rejected::before { background: var(--danger); }
.pet-timeline li.is-pending::before { background: var(--warn); }
.pet-timeline small { color: var(--ink-3); }
.pet-links { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-4); }
.pet-links a { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .5rem 0; border-bottom: .0625rem solid var(--line); font-weight: 700; }
.pet-links a:last-child { border-bottom: 0; }
.pet-links a > span { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.pet-links a small { font-weight: 500; color: var(--ink-3); font-size: var(--fs-xs); }
.pet-links a > .ic:first-child { color: var(--accent); }
.pet-links a:hover > span { text-decoration: underline; text-underline-offset: .1875rem; }

/* 표 → 좁은 화면 카드 */
@media (max-width: 760px) {
  .pet-table-cards { border: 0; background: transparent; overflow: visible; }
  .pet-table-cards .table { min-width: 0; }
  .pet-table-cards thead { position: absolute; width: .0625rem; height: .0625rem; overflow: hidden; clip: rect(0 0 0 0); }
  .pet-table-cards tr { display: block; padding: .75rem .9rem; margin-bottom: var(--sp-2); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r-sm); }
  .pet-table-cards th, .pet-table-cards td { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; border: 0; text-align: right; }
  .pet-table-cards tbody th { text-align: left; font-size: var(--fs-md); }
  .pet-table-cards td::before { content: attr(data-k); color: var(--ink-3); font-weight: 600; text-align: left; }
  .pet-table-cards .table tbody tr:hover { background: var(--surface); }
}

/* 예방접종 등록 */
.pet-target { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pet-target .grow { min-width: 10rem; }
.pet-vacc-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.pet-vacc-form > li { padding: var(--sp-3) var(--sp-4); border: .0625rem solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
.pet-vacc-form .check { padding-top: 0; }
.pet-file-chosen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-sm); padding: .5rem .75rem; border-radius: var(--r-sm); background: var(--surface-2); }
.pet-file-chosen > span { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.pet-states { display: flex; flex-direction: column; gap: .5rem; }
.pet-states li { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .625rem .75rem; border-radius: var(--r-sm); border: .0625rem solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.pet-states li.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* 제출 이력 */
.pet-rounds { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-3); }
.pet-round { display: flex; flex-direction: column; gap: var(--sp-3); }
.pet-round-t { font-size: var(--fs-h4); font-weight: 850; }
.pet-round-items { font-weight: 700; color: var(--ink-2); }
.pet-round-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-3) 0; border-top: .0625rem solid var(--line); }
.pet-round-grid > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pet-round-grid dt { font-size: var(--fs-sm); color: var(--ink-3); }
.pet-round-grid dd { font-weight: 650; display: flex; flex-direction: column; }

/* 마이페이지 */
.pet-my-top { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-4); align-items: stretch; }
.pet-me-id { display: flex; align-items: center; gap: var(--sp-3); }
.pet-acc-nav { display: flex; flex-direction: column; padding: var(--sp-2); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r-lg); }
.pet-acc-nav a { display: flex; align-items: center; gap: .625rem; min-height: 2.875rem; padding: 0 .75rem; border-radius: var(--r-sm); font-weight: 650; color: var(--ink-2); }
.pet-acc-nav a .ic { color: var(--ink-3); }
.pet-acc-nav a:hover { background: var(--surface-2); color: var(--ink); }
.pet-acc-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 750; }
.pet-acc-nav a[aria-current="page"] .ic { color: var(--accent); }
.pet-my-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.pet-mini-list { display: flex; flex-direction: column; }
.pet-mini-list > li { display: flex; align-items: center; gap: var(--sp-3); padding: .75rem 0; border-bottom: .0625rem solid var(--line); flex-wrap: wrap; }
.pet-mini-list > li:last-child { border-bottom: 0; }
.pet-mini-list > li .grow { min-width: 9rem; flex: 1 1 9rem; }
.pet-mini-list > li.pet-sub { padding: .375rem 0 .375rem 3.35rem; justify-content: space-between; color: var(--ink-2); }
.pet-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }

/* 알림 설정 */
.pet-toggles { display: flex; flex-direction: column; }
.pet-toggles > li { display: flex; align-items: center; gap: var(--sp-3); padding: .75rem 0; border-bottom: .0625rem solid var(--line); }
.pet-toggles > li:last-child { border-bottom: 0; }
.pet-toggles .grow { min-width: 0; }
.pet-toggles .switch, .pet-me-id + .switch { flex: 0 0 auto; }
fieldset[data-pet-mk-ch]:disabled .check { opacity: .55; cursor: not-allowed; }

/* 탈퇴 */
.pet-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }

/* 알림 센터 */
.pet-nsum { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-radius: var(--r); background: var(--accent-soft); }
.pet-nsum p { display: flex; align-items: center; gap: .5rem; font-weight: 650; }
.pet-nsum p .ic { color: var(--accent); }
.pet-nlist { display: flex; flex-direction: column; margin-top: var(--sp-2); background: var(--surface); border: .0625rem solid var(--line); border-radius: var(--r); overflow: hidden; }
.pet-nitem { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: .0625rem solid var(--line); }
.pet-nitem:last-child { border-bottom: 0; }
.pet-nitem .grow { min-width: 0; }
.pet-nitem .ico-box { background: var(--surface-2); color: var(--ink-2); }
.pet-nitem.is-new { background: var(--surface-3); }
.pet-nitem.is-new .ico-box { background: var(--accent-soft); color: var(--accent-ink); }
.pet-ntitle { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--ink-2); }
.pet-ntitle a:hover { text-decoration: underline; text-underline-offset: .1875rem; }
.pet-nitem.is-new .pet-ntitle { font-weight: 800; color: var(--ink); }
.pet-dot { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); }
.pet-nmeta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; font-size: var(--fs-sm); color: var(--ink-3); }
.pet-ngo { flex: 0 0 auto; }

/* 반응형 */
@media (max-width: 1080px) {
  .pet-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pet-my-top, .pet-my-grid { grid-template-columns: minmax(0, 1fr); }
  .pet-vacc-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-stats .v { font-size: 1.5rem; }
  .pet-grid2, .pet-reasons { grid-template-columns: minmax(0, 1fr); }
  .pet-cards { grid-template-columns: minmax(0, 1fr); }
  .pet-card { padding: var(--sp-4); border-radius: var(--r); }
  .pet-bar { flex-direction: column; align-items: stretch; }
  .pet-bar .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
  .pet-sort { justify-content: space-between; }
  .pet-profile { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); }
  .pet-profile-acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .pet-profile-acts .btn { flex: 1 1 8rem; }
  .pet-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-specials > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .pet-round-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pet-acts { grid-template-columns: minmax(0, 1fr); }
  .pet-nitem { flex-wrap: wrap; align-items: flex-start; padding: var(--sp-3); }
  .pet-ngo { margin-left: auto; }
  .pet-mini-list > li.pet-sub { padding-left: 0; }
}