/* 한림이들 「통계」 보기 차림새 — shelter-dogs.html 에서만 씁니다.

   ★ 캐시 — 이제 신경 쓰지 않아도 됩니다 ★
   전에는 shelter-dogs.html 이 이 파일을 판 번호와 함께 불러서,
   고칠 때마다 그 번호를 손으로 올려야 했습니다. 안 올리면 고친 것이 아무에게도 안 보였습니다.
   (2026-08-06 에 실제로 그 사고가 있었습니다.)
   지금은 assets/dogstats-css.php 를 거쳐 나갑니다. 그 파일이 늘 새것을 내주므로
   이 파일만 고치면 됩니다. shelter-dogs.html 은 건드릴 일이 없습니다.

   색은 새로 만들지 않고 이 페이지가 이미 쓰는 색만 씁니다.

   2026-08-30 「가장 어린 아이」 칸이 생겨서 .ds-heroes 를 더했습니다. */

#stats-view{display:none}

.ds{max-width:860px}

/* 맨 위 한 줄 안내 — 나이는 모두 추정이라는 이야기 */
.ds-warn{background:var(--hi); border:.5px solid var(--hi-line); border-radius:12px;
         padding:14px 17px; margin:0 0 16px; font-size:13.5px; line-height:1.8;
         color:var(--hi-ink); word-break:keep-all}
.ds-warn i{color:var(--hi-ink); margin-right:5px}
.ds-warn b{font-weight:700}

.ds-lead{font-size:15px; line-height:1.9; color:var(--ink); margin:0 0 22px; word-break:keep-all}
.ds-lead b{color:var(--accent-strong); font-weight:700}

.ds-card{border:.5px solid var(--line); border-radius:14px; background:var(--card);
         padding:18px 20px; margin-bottom:14px}
.ds-card h3{font-size:16px; font-weight:700; margin:0 0 6px; line-height:1.6; word-break:keep-all}
.ds-card h3 b{color:var(--accent-strong)}
.ds-sub{font-size:13px; color:var(--muted); margin:0 0 12px; line-height:1.7; word-break:keep-all}
.ds-sub:last-child{margin-bottom:0}
.ds-sub b{color:var(--ink); font-weight:700}

/* 최고령 · 가장 어린 아이 — 가장 눈에 띄게 */
.ds-hero{border:.5px solid var(--hi-line); background:var(--p-1); border-radius:14px;
         padding:20px; margin-bottom:14px}
.ds-cap{display:block; font-size:11.5px; font-weight:600; letter-spacing:.03em;
        color:var(--accent-strong); margin-bottom:10px}
.ds-tops{display:flex; flex-wrap:wrap; gap:10px}
.ds-top{display:inline-flex; align-items:center; gap:9px; background:var(--card);
        border:.5px solid var(--line); border-radius:999px; padding:9px 17px 9px 15px;
        color:var(--ink); text-decoration:none; transition:.12s}
.ds-top:hover{border-color:var(--accent-strong); transform:translateY(-1px)}
.ds-top .n{font-size:19px; font-weight:700}
.ds-top .a{font-size:13.5px; color:var(--accent-strong); font-weight:600}
.ds-hero .ds-sub{margin:12px 0 0}

/* 둘을 나란히 — 폰에서는 위아래로 놓습니다.
   ★ 1fr 이 아니라 minmax(0,1fr) 입니다 ★
   1fr 은 「칸 속 글자보다는 좁아지지 마라」는 뜻이라, 한글 이름이 길면 칸이 벌어져
   화면이 옆으로 잘립니다 (2026-08-20 봉사 달력에서 실제로 겪은 일). */
.ds-heroes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
           gap:14px; margin-bottom:14px; align-items:start}
.ds-heroes .ds-hero{margin-bottom:0; min-width:0}

/* 열 살 넘은 아이들 — 몸집(대형 · 중형 · 소형)으로 묶어 보여줍니다 */
.ds-sgrp{display:flex; align-items:baseline; gap:7px; margin:16px 0 8px;
         padding-top:12px; border-top:.5px solid var(--line-soft); font-size:13.5px}
.ds-sgrp:first-of-type{border-top:0; padding-top:0; margin-top:12px}
.ds-sgrp b{color:var(--accent-strong); font-weight:700}
.ds-sgrp span{font-size:12.5px; color:var(--muted)}

.ds-chips{display:flex; flex-wrap:wrap; gap:8px}
.ds-chip{display:inline-flex; align-items:baseline; gap:6px; padding:7px 14px;
         border-radius:999px; border:.5px solid var(--line); background:var(--card);
         color:var(--ink); font-size:13.5px; text-decoration:none; transition:.12s}
.ds-chip:hover{border-color:var(--accent-strong); background:var(--p-1)}
.ds-chip .a{font-size:12px; color:var(--muted)}

/* 나이대 가로 막대
   막대가 화면 끝까지 뻗으면 오른쪽 숫자가 눌려서 「46마리 ·」 / 「55%」 처럼 두 줄로 접혔습니다.
   그래서 막대를 짧게 잡고(최대 460px) 숫자 칸을 넉넉히(112px) 두었습니다.
   nowrap 을 걸어 어떤 경우에도 한 줄로 남게 합니다. */
.ds-bars{display:flex; flex-direction:column; gap:9px}
.ds-bar{display:grid; grid-template-columns:74px minmax(0,460px) 112px; gap:12px; align-items:center}
.ds-bl{font-size:12.5px; color:var(--muted); white-space:nowrap}
.ds-btrack{height:14px; border-radius:999px; background:var(--p-1); overflow:hidden}
.ds-bfill{display:block; height:100%; border-radius:999px; background:var(--accent); min-width:2px}
.ds-bar.old .ds-bfill{background:var(--accent-strong)}
.ds-bn{font-size:12.5px; color:var(--muted); text-align:left; white-space:nowrap}
.ds-bn small{font-size:12.5px; color:var(--muted)}

/* 이모저모 — 성별 · 크기 · 동물등록 · 치료중 */
.ds-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
/* 중성화는 셋뿐이라 넓게 */
.ds-grid3{grid-template-columns:repeat(3,1fr)}
.ds-cell{border:.5px solid var(--line); border-radius:11px; padding:12px 13px; background:var(--card)}
.ds-k{display:block; font-size:12px; color:var(--muted); margin-bottom:5px}
.ds-v{font-size:19px; font-weight:700; color:var(--ink)}
.ds-v small{font-size:12.5px; font-weight:500; color:var(--muted); margin-left:2px}

/* 떠난 아이들 — 맨 아래에 조용히 한 줄 */
.ds-left{font-size:13px; color:var(--muted); line-height:1.8; margin:20px 0 0;
         padding-top:16px; border-top:.5px solid var(--line-soft); word-break:keep-all}

.ds-msg{text-align:center; color:var(--muted); padding:50px 0; font-size:15px}

@media (max-width:760px){
  .ds-heroes{grid-template-columns:minmax(0,1fr)}
  .ds-bar{grid-template-columns:66px minmax(0,1fr) 96px; gap:9px}
}
@media (max-width:640px){
  .ds-grid{grid-template-columns:repeat(2,1fr)}
  .ds-grid3{grid-template-columns:repeat(3,1fr)}
  .ds-grid3 .ds-cell{padding:10px 9px}
  .ds-grid3 .ds-v{font-size:17px}
  .ds-bar{grid-template-columns:60px minmax(0,1fr) 90px; gap:8px}
  .ds-bl{font-size:12px}
  .ds-bn{font-size:12px}
  .ds-lead{font-size:14.5px}
}