@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@import url("https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ═══════════════════════════════════════════════════════════
   piri · 클리니컬 차트
   진단서처럼 읽히고, 사진에서만 따뜻하다.

   구분은 1px 룰 라인 하나로만 한다. 카드·그림자·글래스로 계층을 만들지 않는다.
   초록은 브랜드 컬러가 아니라 정보 상태색이다. 확인된 항목에만 켜진다.
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* 그라운드 */
  --bg: #fafaf8;          /* 차트지. 순백 금지: #64D942 가 형광처럼 튄다 */
  --paper: #ffffff;       /* 확인서·표 헤더·용지에만 */
  --surface: #f2f2ee;     /* 접힌 블록·푸터 */
  --line: #e7e7e3;
  --line-soft: #efefea;

  /* 잉크 */
  --ink-900: #111111;     /* 18.07:1 */
  --ink-700: #3d3d3d;     /* 10.39:1 */
  --ink-500: #5c5c5c;     /*  6.40:1 */
  --ink-400: #6b6b6b;     /*  5.10:1, 캡션 하한 */

  /* 액센트. --green-500 은 배경·도형 전용이다. 텍스트에 쓰면 흰 배경 대비 1.82:1 위반. */
  --green-500: #64d942;
  --green-600: #57c837;
  --green-700: #4fbf31;
  --green-ink: #2f7a1a;   /* 흰 배경 위 텍스트·스탬프 잉크 5.36:1 */
  --green-tint: #e9f8e1;

  /* 임상 상태 3값 */
  --state-ok: #2f7a1a;
  --state-watch: #96560a; /* 흰 배경 5.7:1. #b4690e 는 4.2:1 이라 본문 크기에서 미달 */
  --state-na: #6b6b6b;
  --danger: #c2382b;

  /* 형태 */
  --r: 2px;
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t: var(--dur) var(--ease);

  --font-head: "SUIT Variable", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", sans-serif;
  /* IBM Plex Mono 에는 한글이 없다. 폴백을 D2Coding 류가 아니라 Pretendard 로 받아
     한글은 본문 서체로 떨어지게 한다. 모노 트래킹은 라틴 전용 클래스에만 건다. */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
    "Pretendard Variable", Pretendard, monospace;

  --gut: 1.5rem;
  --pad: 2.5rem;
  --maxw: 75rem;
  --header-h: 4.5rem;
}

@media (max-width: 64rem) { :root { --pad: 1.5rem; --gut: 1.25rem; } }
@media (max-width: 48rem) { :root { --pad: 1.25rem; --gut: 1rem; --header-h: 3.75rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  margin: 0;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

/* SUIT 는 완성형 한글만 지원한다. 유저 생성 텍스트는 Pretendard 로 강제. */
input, textarea, select, button, .user-text, .user-text * { font-family: var(--font-body); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink-900); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; border-radius: 1px; }
/* 앵커 이동 시 스티키 헤더가 제목을 덮지 않게. 터치 시 브라우저 기본 하늘색 하이라이트는 끈다. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-tap-highlight-color: transparent; }
.nowrap { white-space: nowrap; }
/* 한 어절만 다음 줄로 떨어지는 과부 줄을 줄인다. 제목은 줄 길이를 고르게. 미지원 브라우저는 그냥 무시한다. */
p, dd, li { text-wrap: pretty; }
h1, h2, h3, .dk-lead { text-wrap: balance; }

/* ── type ───────────────────────────────────────────────── */
.t-display { font-family: var(--font-head); font-weight: 700; font-size: 3.5rem; line-height: 1.14; letter-spacing: -0.03em; }
.t-h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.375rem, 2.55vw, 2.5rem); line-height: 1.2; letter-spacing: -0.025em; }
.t-h2 { font-family: var(--font-head); font-weight: 600; font-size: 1.75rem; line-height: 1.28; letter-spacing: -0.02em; }
.t-h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; }
.t-bodyL { font-size: 1.125rem; line-height: 1.78; }
.t-body { font-size: 1rem; line-height: 1.625; }
.t-s { font-size: 0.875rem; line-height: 1.57; }

@media (max-width: 48rem) {
  .t-display { font-size: 2.25rem; line-height: 1.17; }
  .t-h2 { font-size: 1.5rem; }
  .t-bodyL { font-size: 1.0625rem; line-height: 1.72; }
  /* .t-h1 은 legal·404 에선 h1, 홈에선 h2 다. 태그로 갈라 위계를 세운다. */
  h1.t-h1 { font-size: 1.625rem; }
}
@media (max-width: 30rem) {
  h2.t-h1 { font-size: 1.25rem; }
}

/* 모노는 라틴·숫자·기호 전용. 한글 라벨에 양수 자간을 주지 않는다. */
.mono { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0; }
.mono-l { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }
.mono-cap {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.klabel { font-family: var(--font-body); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0; }

.muted { color: var(--ink-500); }
.dim { color: var(--ink-400); }
.measure { max-width: 42em; }
.measure-s { max-width: 34em; }
.nowrap { white-space: nowrap; }

/* ── layout ─────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

.section { padding-block: 7.5rem; border-top: 1px solid var(--line); position: relative; }
.strip + .section { border-top: 0; }   /* 홈: 숫자 띠 아래 구분선 없음(대표 피드백) */
.section.tight { padding-block: 4.5rem; }
.section.paper { background: var(--surface); }
@media (max-width: 56rem) {
  .section { padding-block: 4.5rem; }
  .section.tight { padding-block: 3rem; }
}

/* 문서 장치 1: 섹션 머리표. 좌측 스티키 모노 라벨 + 우측 본문. */
.doc { display: grid; grid-template-columns: 2fr 10fr; gap: var(--gut); align-items: start; }
.doc.no-rail { grid-template-columns: 1fr; }
.doc > *, .split75 > *, .split84 > *, .grid-pets > * { min-width: 0; }
.doc > .head { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.doc > .head .no {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--ink-900);
  margin-bottom: 0.625rem;
}
.doc > .head .nm { font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.01em; }
.doc > .head .sub { display: block; font-size: 0.8125rem; color: var(--ink-400); margin-top: 0.375rem; }
@media (max-width: 56rem) {
  .doc { grid-template-columns: 1fr; gap: 2.5rem; }
  .doc > .head { position: static; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
  .doc > .head .no { border: 0; padding: 0; margin: 0; }
  .doc > .head .sub { width: 100%; margin-top: 0; }
}

.split75 { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; }
.split84 { display: grid; grid-template-columns: 8fr 4fr; gap: 3rem; align-items: start; }
@media (max-width: 56rem) { .split75, .split84 { grid-template-columns: 1fr; gap: 2rem; } }

.stack-4 > * + * { margin-top: 0.25rem; }
.stack-8 > * + * { margin-top: 0.5rem; }
.stack-12 > * + * { margin-top: 0.75rem; }
.stack-16 > * + * { margin-top: 1rem; }
.stack-24 > * + * { margin-top: 1.5rem; }
.stack-32 > * + * { margin-top: 2rem; }
.stack-48 > * + * { margin-top: 3rem; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule.ink { background: var(--ink-900); }
.row-flex { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ── header ─────────────────────────────────────────────── */
.util {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 0.75rem;
  color: var(--ink-400);
}
.util .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.4375rem; }
.util .lic { text-align: right; }
.util .lic .mono { font-size: inherit; }
/* 모바일에서도 실물 확인 고지 문장을 보인다(동물보호법 광고 고지). 히어로 문장이 빠져 여기가 유일한 첫 화면 고지다. */
@media (max-width: 48rem) {
  .util .wrap { flex-direction: column; align-items: flex-start; gap: 0.125rem; }
  .util .l { font-size: 0.75rem; line-height: 1.5; }
}

.hdr { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr-in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.75rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
  transition: height var(--t);
}
body.scrolled .hdr-in { height: 3.5rem; }
.logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex: none; }
.logo svg { width: 1.8125rem; height: 1.8125rem; display: block; flex: none; transform: translateY(0.2625rem); }
.logo .wm {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink-900);
  /* 소문자 piri 는 어센더(i 점)와 디센더(p)가 잎 마크의 위아래 끝과 맞아야 한다.
     원본 락업은 잎이 글자 높이의 절반이지만, 요청은 "잎과 글자의 위아래 끝을 맞추는 것"이다.
     그래서 잎 높이를 워드마크 잉크 높이(i 점~p 디센더)에 맞추고 세로 중심을 정렬한다. */
}
body.scrolled .logo svg { width: 1.63125rem; height: 1.63125rem; }
body.scrolled .logo .wm { font-size: 1.8rem; }
.nav { display: flex; gap: 1.375rem; margin-left: auto; align-items: center; }
.nav a:not(.btn) {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink-700);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.nav-toggle { display: none; }

@media (max-width: 68rem) {
  .nav-toggle {
    display: block;
    margin-left: auto;
    background: none;
    border: 1px solid var(--ink-900);
    padding: 0.625rem 1rem;
    min-height: 2.75rem;
    font-size: 0.9375rem;
    cursor: pointer;
    border-radius: var(--r);
    position: relative;
  }
  /* 열리면 같은 자리에서 X 로 바뀐다. 글자는 투명하게만 해 버튼 폭을 그대로 지킨다.
     버튼 이름은 "메뉴" 그대로 두고 열림 여부는 aria-expanded 가 알린다. */
  .nav-toggle[aria-expanded="true"] { color: transparent; }
  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 1.125rem; height: 1.5px;
    background: var(--ink-900);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }
  /* 헤더(sticky)를 기준으로 바로 아래에 건다.
     뷰포트 기준 고정값(inset: var(--header-h))으로 두면 위쪽 이용 안내바 높이만큼
     어긋나 로고와 메뉴 버튼을 덮었다. 스크롤로 헤더가 줄어들 때도 자동으로 따라온다.
     바닥은 검정선 대신 1px 헤어라인으로 닫는다. */
  .nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--pad) 1.25rem;
    margin: 0;
    max-height: calc(100dvh - 6rem);
    overflow: auto;
  }
  .nav[hidden] { display: none; }
  .nav a:not(.btn) { padding-block: 0.8125rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav a:not(.btn):hover { border-bottom-color: var(--line); }
  .nav a.btn { margin-top: 0.75rem; justify-content: center; }
}

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r);
  border: 1px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: var(--ink-700); border-color: var(--ink-700); color: var(--paper); }
/* 초록 버튼의 글자는 항상 검정. 흰 글자는 1.82:1 이라 금지. */
.btn.primary { background: var(--green-500); border-color: var(--green-500); color: var(--ink-900); }
.btn.primary:hover { background: var(--green-600); border-color: var(--green-600); color: var(--ink-900); }
.btn.ghost { background: transparent; color: var(--ink-900); }
.btn.ghost:hover { background: var(--ink-900); color: var(--paper); }
.btn.sm { padding: 0.5625rem 0.9375rem; font-size: 0.875rem; }
.btn.block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"]:not(.gate) { opacity: 0.42; pointer-events: none; }

.textlink { font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--ink-400); }
.textlink:hover { text-decoration-color: currentColor; }

/* ── 상태 3값: 색이 아니라 도형으로. 색맹과 흑백 인쇄에서도 구분된다. ── */
.st { display: inline-flex; align-items: center; gap: 0.4375rem; white-space: nowrap; }
.st::before { content: ""; flex: none; }
.st-ok::before { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--state-ok); }
.st-watch::before {
  width: 0; height: 0;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-bottom: 0.4375rem solid var(--state-watch);
}
.st-na::before {
  width: 0.5rem; height: 0.5rem;
  background: repeating-linear-gradient(45deg, var(--state-na) 0 1px, transparent 1px 4px);
  outline: 1px solid var(--state-na);
  outline-offset: -1px;
}
.st .v { font-family: var(--font-head); font-size: 0.8125rem; font-weight: 600; }
.st-ok .v { color: var(--state-ok); }
.st-watch .v { color: var(--state-watch); }
.st-na .v { color: var(--state-na); }

/* ── 스탬프. 발행 사실이 있는 블록에만, 페이지당 2개 이하. 애니메이션 금지. ── */
.stamp {
  display: inline-block;
  border: 1.5px solid var(--green-ink);
  border-radius: var(--r);
  padding: 0.4375rem 0.75rem;
  transform: rotate(-3deg);
  color: var(--green-ink);
  background: none;
  line-height: 1.25;
  text-align: center;
}
.stamp .t { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.06em; }
.stamp .d { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; margin-top: 1px; }

/* ── chips ──────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-700);
  background: var(--paper);
  white-space: nowrap;
}
.chip.ok { border-color: var(--green-500); background: var(--green-tint); color: var(--ink-900); }
.chip.watch { border-color: #e4cf9e; background: #fdf6e5; color: #6b4e0d; }
.chip.off { color: var(--ink-400); }

/* ── tables ─────────────────────────────────────────────── */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.data { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9375rem; }
table.data th, table.data td {
  text-align: left;
  padding: 0.875rem 1rem 0.875rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--paper);
  border-bottom: 1px solid var(--ink-900);
  padding: 0.625rem 1rem 0.5rem 0;
}
table.data td.n, table.data th.n { text-align: right; padding-right: 0; white-space: nowrap; }
table.data td.k { font-weight: 500; }
table.data tr.sum td { background: var(--green-tint); font-weight: 600; }
table.data tfoot td { border-bottom: 0; border-top: 1px solid var(--ink-900); }

/* ── 발행 정보 스트립 ───────────────────────────────────── */
.strip { padding-bottom: 4rem; }
@media (max-width: 68rem) { .strip { padding-block: 2.5rem; } }
.issue { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ink-900); border-bottom: 1px solid var(--line); }
.issue > div { flex: 1 1 10rem; padding: 1.125rem 1.25rem 1.125rem 0; }
.issue > div + div { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.issue .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.issue .u { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; margin-left: 0.125rem; }
.issue .l { font-size: 0.8125rem; color: var(--ink-500); margin-top: 0.3125rem; text-wrap: balance; }
@media (max-width: 48rem) {
  .issue > div { flex: 1 1 0; min-width: 0; padding-right: 0.75rem; }
  .issue > div + div { padding-left: 0.75rem; }
}
@media (max-width: 22.4375rem) {
  .issue > div { flex-basis: 100%; padding-right: 0; }
  .issue > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
}

/* ── 사진: 1px 프레임 + 모노 캡션 3필드(무엇 / 어디 / 촬영일) ── */
.fig { margin: 0; }
.fig .box {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
  position: relative;
}
.fig .box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-400);
  margin-top: 0.5rem;
}
.fig figcaption .ko { font-family: var(--font-body); letter-spacing: 0; }
.fig.r45 .box { aspect-ratio: 4 / 5; }
.fig.r32 .box { aspect-ratio: 3 / 2; }
.fig.r11 .box { aspect-ratio: 1 / 1; }
/* 문서는 골격, 사진은 체온. 기사층(수의사·병원·손)은 흑백, 개체 사진만 컬러. */
.fig.doc-layer .box img { filter: grayscale(1) contrast(1.06); }

/* ── pet grid ───────────────────────────────────────────── */
.grid-pets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem var(--gut); }
@media (max-width: 64rem) { .grid-pets { grid-template-columns: repeat(2, 1fr); gap: 2rem var(--gut); } }
@media (max-width: 34rem) { .grid-pets { grid-template-columns: 1fr; } }

.pet { display: block; text-decoration: none; color: inherit; }
.pet .ph {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.pet .ph img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .pet .ph img { transition: transform 400ms var(--ease); }
  .pet:hover .ph img { transform: scale(1.04); }
}
.pet .ph .cnt {
  position: absolute;
  right: 0.5rem; top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--ink-700);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.1875rem 0.4375rem;
  border-radius: 2px;
}
.pet .ph .state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(250, 250, 248, 0.8);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-700);
}
.pet-meta { padding-top: 0.75rem; }
.pet-meta .top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.625rem; }
.pet-meta .bd { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.015em; }
.pet-meta .pr { font-family: var(--font-head); font-weight: 600; font-size: 1.0625rem; }
.pet-meta .sub { color: var(--ink-500); font-size: 0.875rem; margin-top: 0.1875rem; }
.pet-meta .row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
/* 개체 카드도 광고다. 금액과 허가번호를 함께 표시하는 것은 의무다. */
.pet-meta .lic {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--ink-400);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.pet.is-matched .ph img { filter: grayscale(1); }
.pet.is-matched .pet-meta { color: var(--ink-500); }
.pet.is-matched .pet-meta .bd,
.pet.is-matched .pet-meta .pr { color: var(--ink-500); font-weight: 500; }
.pet.is-matched .chip { color: var(--ink-500); }

/* ── 검진 확인서 ────────────────────────────────────────── */
.cert { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.cert > .hd {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid var(--ink-900);
}
.cert > .bd { padding: 0.5rem 1.5rem 1.5rem; }
.cert .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
@media (max-width: 40rem) { .cert .fields { grid-template-columns: 1fr; } .cert > .hd, .cert > .bd { padding-inline: 1.125rem; } }
.cert .f .k { font-size: 0.75rem; color: var(--ink-500); }
.cert .f .v { font-family: var(--font-mono); font-size: 0.875rem; margin-top: 0.125rem; }
.cert .f .v.ko { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; }

.exam-g { border-top: 1px solid var(--line); }
.exam-g > .gh {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-500);
  padding: 1.125rem 0 0.5rem;
  margin: 0;
}
.exam-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.exam-row .lb { font-size: 0.9375rem; }
.exam-row .note {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--surface);
  padding: 0.75rem 0.875rem;
  margin-top: 0.25rem;
  border-left: 2px solid var(--state-watch);
}

/* 인용: 따옴표와 세로줄 없이 라벨 조판으로만 */
.quote { border-left: 2px solid var(--ink-900); padding-left: 1.25rem; }
.quote .q { font-family: var(--font-head); font-weight: 600; font-size: 1.375rem; line-height: 1.5; letter-spacing: -0.02em; }
.quote .by { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-500); margin-top: 0.75rem; }
@media (max-width: 48rem) { .quote .q { font-size: 1.125rem; } }

/* ── 유통 경로 다이어그램 ───────────────────────────────── */
.path { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.path + .path { margin-top: 2rem; }
.path .cap { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; color: var(--ink-500); margin-bottom: 0.875rem; }
.path .nodes { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.path .nd {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  background: var(--paper);
  display: flex;
  align-items: center;
}
.path .nd.hatch {
  background: repeating-linear-gradient(45deg, #dcdcd6 0 1px, transparent 1px 5px);
  color: var(--ink-500);
}
.path .nd.on { border-color: var(--ink-900); }
.path .nd .dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: var(--green-500); margin-right: 0.5rem; flex: none; }
.path .ar { align-self: center; color: var(--ink-400); padding-inline: 0.5rem; font-family: var(--font-mono); font-size: 0.8125rem; }
@media (max-width: 40rem) {
  .path .nodes { flex-direction: column; align-items: stretch; }
  .path .ar { padding: 0.25rem 0; text-align: center; }
}

/* ── 폼: 박스가 아니라 서류 기입란 ──────────────────────── */
.field { display: block; }
.field > .lb { display: block; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.4375rem; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea,
.field select {
  width: 100%;
  font-size: 1rem;
  padding: 0.6875rem 0.125rem;
  border: 0;
  border-bottom: 1px solid var(--ink-900);
  border-radius: 0;
  background: transparent;
  color: var(--ink-900);
  transition: border-color var(--t);
}
.field select { padding-block: 0.625rem; }
.field textarea { border: 1px solid var(--line); background: var(--paper); padding: 0.75rem; border-radius: var(--r); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field .help { font-size: 0.8125rem; color: var(--ink-500); margin-top: 0.4375rem; }
.field .err { font-size: 0.8125rem; color: var(--danger); margin-top: 0.4375rem; }
.field [aria-invalid="true"] { border-bottom-color: var(--danger); }

.chipset { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chipset input { position: absolute; opacity: 0; pointer-events: none; }
.chipset label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  background: var(--paper);
  transition: border-color var(--t), background var(--t), color var(--t);
}
.chipset input:checked + label { border-color: var(--ink-900); background: var(--ink-900); color: var(--paper); }
.chipset input:focus-visible + label { outline: 2px solid var(--green-500); outline-offset: 2px; }

.check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; }
.check input { margin-top: 0.25rem; width: 1.0625rem; height: 1.0625rem; accent-color: var(--green-600); flex: none; }

/* ── accordion ──────────────────────────────────────────── */
details.qa { border-bottom: 1px solid var(--line); }
details.qa:first-of-type { border-top: 1px solid var(--ink-900); }
details.qa > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 2.25rem 1.25rem 0;
  position: relative;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::before,
details.qa > summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  background: var(--ink-900);
  transition: transform var(--t), opacity var(--t);
}
details.qa > summary::before { width: 0.75rem; height: 1px; transform: translateY(-50%); }
details.qa > summary::after { width: 1px; height: 0.75rem; right: 0.59375rem; transform: translateY(-50%); }
details.qa[open] > summary::after { opacity: 0; }
details.qa .body { padding: 0 0 1.375rem; color: var(--ink-700); max-width: 44em; }

/* ── notes ──────────────────────────────────────────────── */
.note { border: 1px solid var(--line); background: var(--paper); padding: 1.25rem 1.375rem; border-radius: var(--r); }
.note.flat { background: var(--surface); border-color: transparent; }
.note.limit { border: 0; border-left: 2px solid var(--ink-900); background: none; border-radius: 0; padding: 0.25rem 0 0.25rem 1.25rem; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; font-size: 0.9375rem; margin: 0; }
.kv dt { color: var(--ink-500); }
.kv dd { margin: 0; }

.ol-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.ol-steps > li { counter-increment: s; border-top: 1px solid var(--line); padding: 1.75rem 0; display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; }
.ol-steps > li::before {
  content: "00" counter(s);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  padding-top: 0.375rem;
}
@media (max-width: 40rem) { .ol-steps > li { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ── footer ─────────────────────────────────────────────── */
/* 구분선 없이 배경 톤 차이만으로 푸터를 나눈다. 검정 라인은 너무 세게 잘랐다. */
.ftr { padding-block: 3.5rem 4.5rem; background: var(--surface); }
.ftr-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem var(--gut);
  flex-wrap: wrap;
}
.ftr-brand { flex: 1 1 22rem; min-width: 0; }
.ftr-docs { flex: 0 0 auto; display: flex; gap: 3rem; }
/* .ftr a 의 inline-block 이 .logo 의 flex 를 덮어 잎과 워드마크가 세로로 쪼개졌다. */
.ftr .logo { display: inline-flex; flex-wrap: nowrap; padding-block: 0; }
@media (max-width: 56rem) {
  .ftr-grid { gap: 2.5rem; }
  .ftr-docs { flex: 1 1 100%; }
}
.ftr .ftr-h { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; margin: 0 0 0.125rem; color: var(--ink-500); }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li + li { margin-top: 0; }
.ftr a { display: inline-block; padding-block: 0.6875rem; font-size: 0.9375rem; text-decoration: none; color: var(--ink-700); }
.ftr a:hover { color: var(--ink-900); text-decoration: underline; }
.ftr .legal a { font-size: inherit; text-decoration: underline; text-decoration-color: var(--ink-400); }
.legal { font-size: 0.8125rem; color: var(--ink-500); line-height: 1.85; }
.legal strong { color: var(--ink-700); font-weight: 600; }
.legal .nowrap { white-space: nowrap; }

/* ── mobile sticky bar ──────────────────────────────────── */
.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--bg);
  border-top: 1px solid var(--ink-900);
  padding: 0.625rem var(--pad) calc(0.625rem + env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  gap: 0.75rem;
}
.mbar .info { flex: 1; min-width: 0; }
.mbar .info .p { font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.mbar .info .s { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-500); }
.mbar button.icon {
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink-900);
}
.mbar button.icon svg { width: 1.0625rem; height: 1.0625rem; }
.mbar button.icon[aria-pressed="true"] { border-color: var(--ink-900); }
.mbar button.icon[aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 56rem) {
  .mbar.on { display: flex; }
  body.has-mbar { padding-bottom: 5rem; }
}
.slimbar { justify-content: space-between; }
.slimbar .t { font-size: 0.875rem; }

/* ── misc ───────────────────────────────────────────────── */
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink-900); color: var(--paper); padding: 0.625rem 1rem; z-index: 100; }
.skip:focus { left: 0.5rem; top: 0.5rem; }

.reveal { opacity: 0; transform: translateY(0.75rem); }
.reveal.in { opacity: 1; transform: none; transition: opacity 400ms var(--ease), transform 400ms var(--ease); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .hdr, .util, .mbar, .nav { display: none; }
  body { background: #fff; }
}

/* ── 목록 페이지 ────────────────────────────────────────────
   필터는 좁은 컬럼, 결과가 넓은 컬럼이다. 반대로 두면 카드가 한 줄에 하나만 들어간다.
   모바일에서는 필터 8그룹이 결과를 세 화면 아래로 밀어내므로 접어 둔다. */
.list-layout {
  display: grid;
  grid-template-columns: 3fr 9fr;
  gap: 2.5rem;
  align-items: start;
}
.list-layout > * { min-width: 0; }
.list-filters { order: -1; }
.list-results { order: 0; }
.list-filters > summary { display: none; }

@media (max-width: 56rem) {
  .list-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .list-filters { order: 0; }
  .list-results { order: 1; }
  .list-filters > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.875rem 0;
    border-top: 1px solid var(--ink-900);
    border-bottom: 1px solid var(--line);
  }
  .list-filters > summary::-webkit-details-marker { display: none; }
  .list-filters > summary::after {
    content: "";
    width: 0.625rem; height: 0.625rem;
    border-right: 1.5px solid var(--ink-900);
    border-bottom: 1.5px solid var(--ink-900);
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--t);
  }
  .list-filters[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .list-filters > form { padding-top: 1.25rem; }
}

/* 개체 컨텍스트 카드. [hidden] 을 인라인 display 로 덮지 않는다. */
.pet-ctx { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 2rem; }
.pet-ctx[hidden] { display: none; }

/* JS 가 채우는 영역은 첫 페인트 때 미리 자리를 잡아 둔다.
   비워 두면 푸터가 화면 안에 올라와 있다가 주입 직후 밀려나며 CLS 가 튄다.
   내용이 들어오면 min-height 를 넘기므로 실제 레이아웃에는 영향이 없다. */
#pets-grid { min-height: 150vh; }
#pet-detail { min-height: 170vh; }
#home-pets { min-height: 80vh; }
@media (max-width: 56rem) {
  #pets-grid { min-height: 220vh; }
  #pet-detail { min-height: 200vh; }
  #home-pets { min-height: 180vh; }
}

/* ── 스텝 그리드 ────────────────────────────────────────────
   레퍼런스(토스증권 4칸)의 정보 구조만 가져왔다. 카드·그림자·컬러 패널은
   클리니컬 차트가 금지한 것들이라 1px 룰과 여백으로만 만든다. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-900);
}
.steps > * { min-width: 0; }
.step {
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 15rem;
}
.step + .step { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.step .no {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}
.step h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  margin-top: 0.75rem;
}
.step p { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-700); margin-top: 0.625rem; }
.step .when {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-400);
  margin-top: auto;
  padding-top: 1rem;
}
.step .when .dot {
  display: inline-block;
  width: 0.375rem; height: 0.375rem;
  border-radius: 999px;
  background: var(--green-500);
  margin-right: 0.4375rem;
}
@media (max-width: 64rem) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(odd) { border-left: 0; padding-left: 0; }
  .step:nth-child(even) { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}
@media (max-width: 40rem) {
  .steps { grid-template-columns: 1fr; }
  .step, .step + .step { border-left: 0; padding-left: 0; min-height: 0; }
  .step .when { margin-top: 0.875rem; padding-top: 0; }
}

/* ── 약속 목록 ─────────────────────────────────────────────
   각 항목이 근거 페이지로 내려가는 링크를 갖는다. 근거 없는 약속은 적지 않는다. */
.pledges { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-900); }
.pledges > li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.pledges .n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  padding-top: 0.375rem;
}
.pledges h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
}
.pledges p { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-700); margin-top: 0.5rem; max-width: 44em; }
.pledges .src { margin-top: 0.625rem; }
@media (max-width: 40rem) {
  .pledges > li { grid-template-columns: 1fr; gap: 0.5rem; }
  .pledges .n { padding-top: 0; }
  .pledges h3 { font-size: 1.0625rem; }
}

/* ═══ 히어로 장면 ════════════════════════════════════════════
   흰 바탕 위 누끼 스프라이트. 강아지는 앞에서 뛰고 고양이는 뒤에서 걷는다.
   투명 WebP 가로 스트립을 steps() 로 넘긴다(GIF 는 알파가 1비트라 가장자리가 깨진다). */
.hero { padding-block: 3.5rem 2.5rem; }
.hero-in { display: grid; grid-template-columns: 7fr 5fr; gap: 2.5rem; align-items: start; }
.hero-in > * { min-width: 0; }
/* 세 줄이 각각 한 줄로 떨어져야 한다. 뷰포트에 맞춰 줄어들되 줄바꿈은 하지 않는다. */
.hero-title {
  margin-top: 0;
  font-size: clamp(1.6875rem, 3.35vw, 2.875rem);
  line-height: 1.22;
}
.hero-title .l { display: block; white-space: nowrap; }
/* 줄마다 가림 틀을 두고 안쪽 글자만 틀 아래에서 위로 올린다(토스 히어로 방식).
   한글 윗부분·받침이 틀에 잘리지 않게 위아래로 0.12em 여유를 주고, 같은 만큼 마진으로 되돌려 줄 간격은 그대로 둔다. */
.hero-title .l { overflow: hidden; padding-block: 0.12em; margin-block: -0.12em; }
.hero-title .l + .l { margin-top: calc(0.125rem - 0.12em); }
.hero-title .li { display: inline-block; }
@media (max-width: 30rem) {
  .hero-title { font-size: clamp(1.5rem, calc((100vw - 2.5rem) / 12), 1.75rem); }
  .hero-title .l { white-space: normal; }
}
@media (max-width: 68rem) {
  .hero-in { grid-template-columns: 1fr; }
  .hero { padding-block: 2.5rem 0; }
}
/* 1줄 → 2줄 → 3줄 순서로 올라온다. 페이지를 열 때 한 번. 천천히 떠서 부드럽게 멈추는 곡선
   (1.4초, 90% 까지 약 0.6초. 이전 0.9초 곡선은 0.3초 만에 90% 가 올라와 급했다).
   전역 reduce 규칙은 duration 만 0 으로 만들고 delay 는 남기므로 반드시 no-preference 안에 둔다. */
@media (prefers-reduced-motion: no-preference) {
  .hero-title .li { animation: lineRise 1400ms cubic-bezier(0.25, 1, 0.5, 1) both; }
  .hero-title .l:nth-child(2) .li { animation-delay: 300ms; }
  .hero-title .l:nth-child(3) .li { animation-delay: 600ms; }
  @keyframes lineRise { from { transform: translateY(110%); } }
  .js:not(.fonts-ready) .hero-title .li { animation-play-state: paused; }   /* fill both 라 멈춘 동안 가려져 있다 */
}

.scene { margin: 0; }
.scene-box { position: relative; aspect-ratio: 16 / 9; }
/* 수의사 검진 → 체크 → 보호자. 층·스프라이트 크기와 시간표는 tools/build_hero_scene.py 가 HERO3 블록에 쓴다.
   달리기·걷기 칸 넘김(run-dog/run-cat)은 GAIT 블록 그대로. 데스크톱은 발끝이 CTA 버튼 아랫선 근처에 온다. */
/* 한 단으로 쌓이는 폭: 같은 16:9 좌표를 쓰고 너무 커지지 않게 폭만 묶는다. */
@media (max-width: 68rem) {
  .hero-in { gap: 1.5rem; }
  .scene { max-width: 34rem; }
}

/* ═══ 카드 덱 ════════════════════════════════════════════════
   누르면 펼쳐지고 다른 카드는 접힌다. 가로 flex 비율로 움직여
   레이아웃 점프 없이 이어진다. */
.deck { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dk { flex: 1 1 0; min-width: 0; background: var(--bg); display: flex; flex-direction: column; transition: flex-grow 420ms var(--ease); }
.dk.is-open { flex-grow: 2.2; }

.dk-face {
  flex: 1 1 auto;
  appearance: none;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  padding: 1.5rem 1.25rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 15.5rem;
  width: 100%;
  position: relative;
  transition: background var(--t);
}
@media (hover: hover) { .dk-face:hover { background: var(--surface); } }
.dk.is-open { background: var(--surface); }
.dk.is-open .dk-face { background: transparent; }
.dk-no { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-400); }

/* 일러스트 자리. 스톡 3D 대신 브랜드 잎에서 파생한 도형을 쓴다. */
/* 카드 아이콘은 실제 로고(MARK_SVG) 그대로다. CSS 로 따로 그리던 잎은 사선이 도형 밖으로
   삐져나오고 모서리·점이 로고와 달라 "로고가 깨져" 보였다. 로고라서 기울이지 않는다. */
.dk-art { width: 3.25rem; height: 3.25rem; margin-top: 1.5rem; transition: transform 420ms var(--ease); }
.dk-art svg { display: block; width: 100%; height: 100%; }
.dk-art path:first-child { fill: var(--green-tint); transition: fill var(--t); }
.dk-art path + path { stroke-width: 2.5; }   /* 원본 1.3 은 52px 에서 0.68px 라 흐리다 */
.dk.is-open .dk-art { transform: scale(1.12); }
.dk-art { transform-origin: left bottom; }
.dk.is-open .dk-art path:first-child { fill: var(--green-500); }

.dk-lead {
  min-height: 4.26em;   /* 03 제목이 3줄이다 */
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.42;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
/* 펼침·닫힘을 같은 자리에서 보여준다. 닫히면 아래(열기), 열리면 위(닫기). */
.dk-go {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  transition: background var(--t), border-color var(--t), transform 300ms var(--ease);
}
.dk-go::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.4375rem; height: 0.4375rem;
  border-right: 1.5px solid var(--ink-700);
  border-bottom: 1.5px solid var(--ink-700);
  transform: translateY(-2px) rotate(45deg);
  transition: border-color var(--t);
}
@media (hover: hover) { .dk-face:hover .dk-go { border-color: var(--ink-900); } }
.dk.is-open .dk-go {
  background: var(--ink-900);
  border-color: var(--ink-900);
  transform: rotate(180deg);
}
.dk.is-open .dk-go::after { border-color: var(--paper); }

.dk-body { display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 420ms var(--ease), visibility 0s linear 420ms; }
.dk.is-open .dk-body { grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 420ms var(--ease), visibility 0s; }
.dk-body > .dk-inner { overflow: hidden; min-height: 0; }
.dk-inner > * { opacity: 0; transform: translateY(0.5rem); transition: opacity 260ms var(--ease) 120ms, transform 260ms var(--ease) 120ms; }
.dk.is-open .dk-inner > * { opacity: 1; transform: none; }
.dk-inner {
  padding: 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--ink-700);
  border-top: 1px solid transparent;
}
.dk.is-open .dk-inner { padding: 1.25rem 1.25rem 1.5rem; border-top-color: var(--line); }
.dk-inner p { margin: 0; }
.dk-inner p, .dk-inner dd { text-wrap: balance; }
.dk-inner p + p { margin-top: 0.75rem; }
/* 데스크톱은 04·05 처럼 문장 사이도 줄간격 그대로(대표 피드백: 01~03 줄간격을 04·05 에 맞춤). 모바일은 문장이 줄바꿈되므로 문단 간격을 둔다 */
@media (min-width: 48.0625rem) { .dk-inner p + p { margin-top: 0; } }
.dk-inner p, .dk-inner .kv { max-width: 38em; }
.dk-inner .kv { font-size: 0.875rem; gap: 0.375rem 1rem; }

/* 5장이 되면서 1025~1199px 에선 가로로 놓으면 제목이 3~4줄로 깨진다. 여기까진 세로로 쌓는다. */
@media (max-width: 75rem) {
  .deck { flex-direction: column; }
  .dk, .dk.is-open { flex: 0 0 auto; }
  .dk-face { min-height: 0; flex-direction: row; align-items: center; gap: 1rem; padding: 1.125rem 3.25rem 1.125rem 1.25rem; }
  .dk-art { width: 2.25rem; height: 2.25rem; margin: 0; flex: none; transform-origin: left center; }
  .dk-no { align-self: center; flex: none; }
  .dk-lead { font-size: 1.0625rem; min-height: 0; }
  .dk-go { top: 50%; margin-top: -0.875rem; }
  .dk-inner { font-size: 1rem; }
}
/* 320px 에서 "가족이 되는 과정을" 이 제목 칸을 1px 넘는다. */
@media (max-width: 22.5rem) { .dk-lead { font-size: 1rem; } }
/* 좁은 폭에선 라벨 열이 값 열을 눌러 "예약금 / 100,000원" 처럼 값이 쪼개진다. 위아래로 쌓는다. */
@media (max-width: 30rem) {
  .dk-inner .kv { grid-template-columns: 1fr; gap: 0; }
  .dk-inner .kv dd { margin-bottom: 0.625rem; }
  .dk-inner .kv dd:last-child { margin-bottom: 0; }
}

/* ── 타이틀 옆 툴팁 ─────────────────────────────────────
   본문 흐름을 끊지 않아야 하는 보충 설명을 제목 옆에 붙인다. */
.with-tip { position: relative; }
.tip {
  appearance: none;
  vertical-align: middle;
  margin-left: 0.5rem;
  width: 1.375rem; height: 1.375rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: border-color var(--t), background var(--t);
}
/* 1px 테두리 안쪽(20px) 기준으로 붙으므로 12px 씩 넓혀야 44px 가 된다. */
.tip::before { content: ""; position: absolute; inset: -0.75rem; }
.tip::after {
  content: "i" / "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--ink-500);
}
.tip[aria-expanded="true"] { border-color: var(--ink-900); background: var(--ink-900); }
@media (hover: hover) { .tip:hover { border-color: var(--ink-900); background: var(--ink-900); } .tip:hover::after { color: var(--paper); } }
.tip[aria-expanded="true"]::after { color: var(--paper); }

.tip-pop {
  position: absolute;
  left: 0; top: calc(100% + 0.625rem);
  z-index: 30;
  max-width: 26rem;
  padding: 0.875rem 1rem;
  background: var(--paper);
  border: 1px solid var(--ink-900);
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--ink-700);
}
.tip-pop[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .tip-pop { animation: tipIn 160ms var(--ease); }
  @keyframes tipIn { from { opacity: 0; transform: translateY(-0.25rem); } }
}
@media (max-width: 40rem) { .tip-pop { position: static; display: block; max-width: none; margin-top: 0.875rem; } }
/* 넓은 화면: 한 문장짜리 설명을 ⓘ 바로 오른쪽, 제목과 같은 줄에 띄운다(아래로 내리면 부제를 반만 가려 이어지는 말처럼 읽혔다).
   애니메이션이 transform 을 쓰므로 세로 가운데 맞춤은 translate 속성으로 따로 둔다. */
@media (min-width: 40.0625rem) {
  .with-tip { width: fit-content; }
  .tip-pop { left: calc(100% + 0.75rem); top: 60%; translate: 0 -50%; white-space: nowrap; max-width: none; }   /* 60%: ⓘ 는 글줄 가운데보다 약간 아래에 앉는다 */
}

/* ── 게이트 ─────────────────────────────────────────────
   상세 페이지가 아직 없는 메뉴. 링크인 척하지 않고 눌리지도 않는다. */
.gate { cursor: default; }
.nav .gate:not(.btn) {
  font-size: 0.9375rem;
  color: var(--ink-500);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
}
@media (hover: hover) { .nav .gate:not(.btn):hover { color: var(--ink-900); border-bottom-color: var(--ink-400); } }

/* ── 상담 채널 ──────────────────────────────────────────
   폼이 아니라 채널로 바로 보낸다. 카카오·네이버 두 개.
   URL 이 아직 없어 지금은 게이트 상태이고, 그 사실을 글자로 적는다. */
.nav-cta { display: flex; gap: 0.5rem; margin-left: 0.875rem; }
.ch { white-space: nowrap; }
.ch .ci { width: 1.0625rem; height: 1.0625rem; flex: none; }
.ch-kakao { background: #fee500; border-color: #fee500; color: #191600; }
.ch-kakao:hover { background: #f2d900; border-color: #f2d900; color: #191600; }
.ch-naver { background: #03c75a; border-color: #03c75a; color: #fff; }
.ch-naver:hover { background: #02b351; border-color: #02b351; color: #fff; }

/* 게이트여도 브랜드 색은 남긴다. 회색으로 죽이면 어느 채널인지 알 수 없다.
   채워진 면 대신 1px 실선 테두리로 둔다.
   점선은 이 아트디렉션에서 쓰지 않는다. 선은 전부 1px 실선이다. */
.btn.gate.ch {
  background: transparent;
  border-style: solid;
  font-weight: 600;
}
.ch-kakao.gate { border-color: #e5cf00; color: #7a6a00; }
.ch-kakao.gate:hover { background: #fffbe0; border-color: #d9c400; color: #5c5000; }
.ch-naver.gate { border-color: #03c75a; color: #046b32; }
.ch-naver.gate:hover { background: #eefaf2; border-color: #02b351; color: #036c33; }

.btn.gate:not(.ch) {
  background: transparent;
  border-color: var(--line);
  border-style: solid;
  color: var(--ink-500);
}

@media (max-width: 68rem) {
  .nav-cta { flex-direction: column; margin: 0.75rem 0 0; }
  .ch { justify-content: center; }
  .nav .gate:not(.btn) {
    display: flex;
    align-items: center;
    padding-block: 0.8125rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
}

/* 모바일 메뉴가 열리면 본문을 잠그고 눌러도 반응하지 않게 한 겹 덮는다.
   시트 아래로 반쯤 잘린 본문 글줄이 보이던 것도 이걸로 가려진다. 헤더(z 40)는 위에 남는다. */
html.nav-open { overflow: hidden; }
/* 덮개는 가상 요소가 아니라 실제 요소다. iOS 사파리는 클릭 핸들러가 없는 곳(body)을 탭하면
   click 을 보내지 않아 메뉴가 안 닫혔다. 요소에 직접 핸들러를 걸면 click 이 오고,
   덮개가 맨 위에 있으니 그 아래 버튼이 눌리는 관통도 없다. */
.nav-scrim { position: fixed; inset: 0; z-index: 30; background: rgba(17, 17, 17, 0.28); }
.nav-scrim[hidden] { display: none; }

/* 눌렀다는 표시. 기본 하이라이트를 끈 대신 실제 요소가 반응한다. */
.btn:not(.gate):active { filter: brightness(0.92); }
.dk-face:active { background: var(--surface); }
.nav-toggle:active { background: var(--surface); }
.hdr .logo { min-height: 2.75rem; }

/* legal 문서 바로가기 */
.toc { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 1.25rem; }
.toc a { padding-block: 0.625rem; font-size: 0.9375rem; color: var(--ink-700); }

/* 대표 원문의 문단 나눔을 데스크톱에서만 살린다. 좁은 화면에선 자연 줄바꿈이 낫다. */
@media (max-width: 48rem) { .br-d { display: none; } }
/* 부제 두 문장이 문장 중간에서 섞여 끊기지 않게, 둘째 문장은 한 덩어리로. */
.unit { display: inline-block; }
/* 통계 첫 칸 "피리가 맺어준 인연" 이 390·414 에서 칸 폭과 딱 같아 두 줄로 넘어갔다. */
@media (max-width: 30rem) { .issue .l { letter-spacing: -0.02em; } }

/* GAIT:dog 자동 생성(tools/build_gait.py). 손으로 고치지 않는다. */
@keyframes run-dog { 0.0000% { background-position-x: 0.0000%; } 14.2857% { background-position-x: 16.6667%; } 28.5714% { background-position-x: 33.3333%; } 42.8571% { background-position-x: 50.0000%; } 57.1429% { background-position-x: 66.6667%; } 71.4286% { background-position-x: 83.3333%; } 85.7143% { background-position-x: 100.0000%; } 100% { background-position-x: 0%; } }
/* GAIT:dog:END */

/* GAIT:cat 자동 생성(tools/build_gait.py). 손으로 고치지 않는다. */
@keyframes run-cat { 0.0000% { background-position-x: 0.0000%; } 16.6667% { background-position-x: 20.0000%; } 33.3333% { background-position-x: 40.0000%; } 50.0000% { background-position-x: 60.0000%; } 66.6667% { background-position-x: 80.0000%; } 83.3333% { background-position-x: 100.0000%; } 100% { background-position-x: 0%; } }
/* GAIT:cat:END */

/* ═══ 스토리 무대(#how 머리) ══════════════════════════════════
   애플 iPhone 18 Pro 카메라 섹션의 "렌즈 초근접 → 제품 전체" 연출을 옮겼다.
   눈동자 초근접(두 사람이 비친다) → 강아지 전신 → 두 사람에게 달려가 품으로 뛰어오른다.
   무대(sticky)는 트랙 높이만큼 머물고, 그동안 app.js story() 가 진행도에 맞는 프레임을 캔버스에 그린다.
   제목은 무대 위 흐름에 얹혀 올라가며 사라지고(애플 copy-lockup), 부제·카드 덱이 무대 끝을 덮으며 올라온다(애플 -22vh 겹침).
   모션 감소·JS 없음: 트랙 없이 제목 → 마지막 장면 한 장 → 부제·카드. */
#how { padding-top: 0; scroll-margin-top: calc(3.5rem + 1px - var(--header-h) - 1rem); }   /* #how 로 오면 무대가 막 붙은 자리(진행도 0) */
.story { --stage-h: calc(100lvh - 3.5rem - 1px); position: relative; overflow-x: clip; }   /* 3.5rem+1px = 스크롤 뒤 헤더(body.scrolled)와 밑줄. lvh 라 주소창이 드나들어도 크기가 그대로다 */
.story-copy { padding-block: 7.5rem 2.5rem; }
@media (max-width: 56rem) { .story-copy { padding-block: 4.5rem 2rem; } }
.story-stage { position: relative; height: min(var(--stage-h), 177.78vw); overflow: hidden; background: #14110f; }   /* 사진이 오기 전 눈동자 톤. 흰 제목의 대비 기준이기도 하다 */
.story-still img, .story-cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-cv { display: none; }
.how-body { padding-top: 2.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .story { --story-run: 200lvh; height: calc(var(--stage-h) + var(--story-run)); }   /* 무대가 머무는 거리. 손맛 손잡이 */
  .js .story-stage { position: sticky; top: calc(3.5rem + 1px); height: var(--stage-h); }
  .js .story-cv { display: block; visibility: hidden; }            /* 첫 프레임을 그리기 전엔 포스터(img)가 보인다 */
  .js .story-stage.is-live .story-cv { visibility: visible; }
  .js .story-copy { position: absolute; inset: 0 0 auto; z-index: 2; height: var(--stage-h);
    padding: calc(var(--stage-h) * 0.44) var(--pad) 0; text-align: center; color: #fff; pointer-events: none; }
  .js .story-copy h2 { pointer-events: auto; font-size: clamp(1.75rem, 4.2vw, 3.5rem);
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 1.5rem rgb(0 0 0 / 0.3); }
  /* 사진 밝기와 무관하게 흰 제목이 읽히도록 제목 뒤에만 옅은 어둠(애플 text-over-media 의 scrim). 제목과 함께 움직이고 사라진다 */
  .js .story-copy h2::before { content: ""; position: absolute; inset: -3em 0; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgb(20 17 15 / 0.45), transparent); }
  /* 제목을 가운데 둔다. 설명은 ⓘ 옆이 아니라 제목 아래로 편다(옆으로 펴면 768 에서 화면 밖). 아래에 부제가 없어 덮을 것도 없다.
     위쪽 기준(44%)으로 놓아 설명이 펼쳐져도 제목이 움직이지 않는다. */
  .js .story-copy .with-tip { width: auto; }
  .js .story-copy .tip-pop { position: static; translate: none; display: block; white-space: normal; max-width: 26rem;
    margin: 0.875rem auto 0; text-align: left; text-shadow: none; }
  .js .story-copy .tip-pop[hidden] { display: none; }   /* 위 display:block 이 hidden 속성을 이기지 않게 */
  /* 사진(어두운 눈동자) 위라 기본 #111 링이 안 보인다: 안쪽 어둡고 바깥 흰 두 겹 링. 열린 상태도 흰 테두리로 윤곽을 살린다 */
  .js .story-copy .tip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px #111; }
  .js .story-copy .tip[aria-expanded="true"] { border-color: #fff; }
  @media (max-width: 23.4375rem) { .js .story-copy h2 { font-size: 1.5rem; } }   /* 374px 이하에서 제목이 두 줄로 접혀 동공 속 두 사람에 붙었다 */
  .js .how-body { position: relative; z-index: 1; margin-top: -35lvh; padding-top: 20lvh;
    background: linear-gradient(transparent, var(--bg) 20lvh); }
  /* 제목 사라짐·덱 나타남은 스크롤 타임라인(네이티브)으로. 미지원 브라우저는 그냥 보인 채 스크롤된다.
     .dk 가 아니라 .deck 에 건다: .deck 은 overflow:hidden 이라 스크롤 컨테이너가 되어, 안쪽 .dk 의 view() 는 뷰포트가 아니라 .deck 을 본다. */
  @supports (animation-timeline: view()) {
    .js .story-copy h2 { animation: storyOut linear both; animation-timeline: view(); animation-range: cover; }
    .js .story-copy h2:focus-within { animation: none; }
    .js .how-body .deck { animation: storyIn linear both; animation-timeline: view(); animation-range: entry 0% entry 5rem; }
    @keyframes storyOut { 0%, 60% { opacity: 1; } 80%, 100% { opacity: 0; } }
    @keyframes storyIn { from { opacity: 0; } }   /* 0.4 에서 시작하면 화면 밖 덱까지 반투명 글자로 잡혀 axe 대비가 17건 났다. 대신 범위를 짧게 */
  }
}

/* ═══ 비교: 과정이 다르기에 건강하게 입양합니다(10/3 대표 덱 1~4쪽) ═════════════
   피리와 펫샵을 같은 단계끼리 나란히 둔다. 데스크톱은 [줄 라벨] + 5열 2줄, 64rem 미만은 [피리|펫샵] 2열 x 단계 5줄.
   UI 면은 차트 문법(2px·1px 선·그림자 없음), 따뜻함은 3D 아이콘(래스터) 안에서만.
   기본값은 '다 펼친 정지'다. 펼침 장치는 app.js compare() 가 .is-armed 를 붙일 때만 켜진다(JS 없음·모션 감소 = 처음부터 다 보임). */
.cmp-title { margin: 0.75rem 0 2.5rem; }
.how-next { margin: 1.5rem 0 0; }
/* 입양 과정은 별도 페이지의 첫 섹션이다(헤더 바로 아래). */
.section.process-page { border-top: 0; padding-top: 3.5rem; }
@media (max-width: 56rem) { .section.process-page { padding-top: 2rem; } }
/* 두 문장짜리 고지는 ⓘ 오른쪽 한 줄 배치(넓은 화면 기본값)로는 화면 밖으로 넘친다. 제목 아래로 펼친다. */
@media (min-width: 40.0625rem) {
  /* 상자는 제목 폭이 아니라 문장 길이에 맞춘다(제목 폭에 묶이면 첫 문장이 중간에서 꺾인다). 줄바꿈은 '관리 범위' 앞 한 번. */
  .tip-pop.is-below { left: 0; top: calc(100% + 0.625rem); translate: none; white-space: normal; width: max-content; max-width: min(46rem, calc(100vw - 2.5rem)); }
}
.cmp {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem repeat(5, minmax(0, 1fr));
  grid-template-rows: auto 3rem auto;   /* 피리 줄 · 사이 간격 · 펫샵 줄(10/7 대표 3번 간격 띄우기. 가운데 ≠ 구분선은 10/8 20번으로 삭제) */
  gap: 0 0.875rem;
}
.cmp-lab { margin: 0; align-self: center; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.cmp-lab.is-piri { grid-column: 1; grid-row: 1; }
.cmp-lab.is-shop { grid-column: 1; grid-row: 3; color: var(--ink-500); }
.cmp-lab.is-piri { z-index: 2; color: var(--green-ink); }   /* 그리드 칸이라 z-index 만으로 테두리 면 위에 선다(position 을 주면 휴대폰 sticky 를 덮어쓴다) */
.cmp > .is-piri[data-c] { grid-row: 1; }
.cmp > .is-shop[data-c] { grid-row: 3; }
/* 피리 줄 강조(덱 3쪽 아이디어 2: 피리에 테두리): 줄 전체를 감싸는 초록 테두리 면. 카드는 그 위에 앉는다 */
.cmp-hl { grid-column: 1 / -1; grid-row: 1; margin: -0.75rem -0.875rem; border: 1.5px solid var(--green-500); border-radius: calc(var(--r) * 2.5); background: rgba(100, 217, 66, 0.07); pointer-events: none; transition: opacity 400ms var(--ease); }
/* 10/8: 가운데 구분선(1안)이 빠져 이중선 걱정이 없어졌다 → 덱 3쪽 2안대로 테두리. 펼치기 전엔 빈 면이 보이지 않게 숨긴다 */
.cmp.is-armed:not(.is-open) .cmp-hl { opacity: 0; }
.cmp > .cc, .cmp > .cc-arrow { z-index: 1; }
.cmp > [data-c="1"] { grid-column: 2; }
.cmp > [data-c="2"] { grid-column: 3; }
.cmp > [data-c="3"] { grid-column: 4; }
.cmp > [data-c="4"] { grid-column: 5; }
.cmp > [data-c="5"] { grid-column: 6; }

.cc { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.cc-art { border-radius: var(--r) var(--r) 0 0; }
/* 이웃 카드 사이 작은 '→' 는 10/7 대표 15번 코멘트로 뺐다(큰 화살표 하나만 남긴다). */
/* 토스 카드의 하늘색 그라데이션·빛 링은 평면 틴트 + 1px 동심원 두 개로 옮긴다. */
.cc-art { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: var(--green-tint); }
.cc.is-shop .cc-art { background: var(--surface); }
.cc-art::before, .cc-art::after {
  content: ""; position: absolute; left: 50%; top: 50%; aspect-ratio: 1;
  border: 1px solid rgba(47, 122, 26, 0.16); border-radius: 999px; transform: translate(-50%, -50%);
}
.cc-art::before { height: 74%; }
.cc-art::after { height: 112%; }
.cc.is-shop .cc-art::before, .cc.is-shop .cc-art::after { border-color: rgba(17, 17, 17, 0.1); }
/* 판 높이(가로세로비로 정해짐)를 기준으로 아이콘 크기를 잡는다. 그리드 안 % 높이는 브라우저마다 해석이 갈려 절대 배치로 둔다. */
.cc-art img { position: absolute; z-index: 1; inset: 0; margin: auto; display: block; height: 80%; width: auto; max-width: 80%; object-fit: contain; }
.cc.is-shop .cc-art img { filter: saturate(0.7); }
.cc-txt { flex: 1; display: flex; flex-direction: column; gap: 0.3125rem; padding: 1rem 1rem 1.25rem; }
.cc-no { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-400); }
.cc-t { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.02em; }
.cc-ul { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-700); }
.cc-ul li { position: relative; padding-left: 0.875rem; }
.cc-ul li + li { margin-top: 0.25rem; }
.cc-ul li::before { content: "-"; content: "-" / ""; position: absolute; left: 0; color: var(--ink-400); }   /* 대체 텍스트 빈 값: 낭독에서 '하이픈'을 뺀다 */

/* 피리 01 → 02 자리(같은 열 펫샵 칸이 '전시 및 보관'이라 피리는 그 단계가 없다는 뜻이 스스로 읽힌다).
   검은 원 꺾쇠 하나만 둔다(10/7 대표 2번 덱 1쪽 그림, 10/8 21번: 원과 겹치던 뒤쪽 긴 화살표 선 삭제). */
.cc-arrow { position: relative; min-height: 2.5rem; }
.cc-chev { position: absolute; left: 50%; top: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border-radius: 999px;
  background: var(--ink-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat; }   /* 꺾쇠 높이 = 원의 약 48%(대표 아이콘 비율) */

/* 펼침 버튼: 다음 빈 열 자리(두 줄 가운데)에 앉는다. 초록 버튼의 글자·화살표는 검정(사이트 규칙). */
.cmp-go {
  grid-column: var(--gc, 3); grid-row: 2; justify-self: center; align-self: center; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.5rem; margin: 0; border: 0; background: none; color: var(--ink-900); cursor: pointer; font: inherit;
}
.cmp-go[hidden] { display: none; }
@media (min-width: 64rem) { .cmp-go { background: var(--bg); border-radius: 999px; } }
.cmp-dot { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--green-500); transition: background var(--t); }
.cmp-dot::before { content: ""; width: 1.25rem; height: 2px; background: var(--ink-900); }
.cmp-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.6875rem; height: 0.6875rem; margin: -0.34375rem 0 0 -0.0625rem;
  border-top: 2px solid var(--ink-900); border-right: 2px solid var(--ink-900); transform: rotate(45deg);
}
@media (hover: hover) { .cmp-go:hover .cmp-dot { background: var(--green-600); } }
.cmp-go:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; border-radius: var(--r); }

.cmp-foot { display: flex; justify-content: flex-end; align-items: flex-start; gap: 1.5rem; margin-top: 1.25rem; }
.cmp-replay {
  flex: none; min-height: 2.75rem; padding: 0 1.125rem; border: 1px solid var(--ink-900); border-radius: var(--r);
  background: var(--paper); color: var(--ink-900); font-family: var(--font-head); font-weight: 600; font-size: 0.875rem; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.cmp-replay[hidden] { display: none; }
@media (hover: hover) { .cmp-replay:hover { background: var(--ink-900); color: var(--paper); } }

/* 무장 상태: 아직 안 펼친 열은 자리만 남기고 숨긴다(데스크톱은 자리를 미리 잡아 레이아웃 이동 0). */
@media screen { .cmp.is-armed > [data-c]:not(.on) { visibility: hidden; opacity: 0; } }

@media (max-width: 63.9375rem) {
  .cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 0.625rem 1.25rem; }   /* 넓은 화면의 '줄 사이 3rem' 행을 쓰지 않는다 */
  /* 좁은 화면은 [피리|펫샵] 두 열: 피리 열에 테두리 면, 두 라벨 사이에 ≠ 아이콘(가로 구분선은 세로 배치라 뺀다) */
  .cmp-hl { grid-column: 1; grid-row: 1 / 7; margin: -0.375rem -0.5rem; }   /* 라벨 줄 + 단계 5줄(암묵 행이라 -1 로는 끝까지 안 간다). 펼치기 전엔 데스크톱처럼 숨긴다 */
  .cmp-lab {
    grid-row: 1; position: sticky; top: calc(3.5rem + 1px); z-index: 2; padding: 0.625rem 0.3125rem; margin-inline: -0.3125rem;   /* 스크롤 중 헤더(body.scrolled) 실제 높이 */
    text-align: center; font-size: 0.9375rem; background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .cmp-lab.is-piri { grid-column: 1; }
  .cmp-lab.is-shop { grid-column: 2; grid-row: 1; }
  .cmp-lab.is-piri { background: color-mix(in srgb, var(--bg) 93%, #64d942); }   /* 스크롤 중 붙는 라벨: 테두리 면과 같은 색(카드가 비쳐 보이지 않게 불투명) */
  .cmp > .is-piri[data-c] { grid-column: 1; }
  .cmp > .is-shop[data-c] { grid-column: 2; }
  /* 데스크톱의 '.is-piri = 1행' 규칙보다 구체성이 같거나 높아야 이긴다(클래스 + 속성 2개). */
  .cmp > .is-piri[data-c="1"], .cmp > .is-shop[data-c="1"] { grid-row: 2; }
  .cmp > .is-piri[data-c="2"], .cmp > .is-shop[data-c="2"] { grid-row: 3; }
  .cmp > .is-piri[data-c="3"], .cmp > .is-shop[data-c="3"] { grid-row: 4; }
  .cmp > .is-piri[data-c="4"], .cmp > .is-shop[data-c="4"] { grid-row: 5; }
  .cmp > .is-piri[data-c="5"], .cmp > .is-shop[data-c="5"] { grid-row: 6; }
  /* 좁은 화면은 자리를 비워 두면 빈 화면이 길어진다. 안 펼친 줄은 빼고, 누른 직후에 넣는다(입력 직후 이동이라 CLS 제외). */
  @media screen { .cmp.is-armed > [data-c]:not(.on) { display: none; } }
  .cmp.is-armed:has(> .cmp-go[aria-expanded="false"]:not([hidden])) .cmp-lab { position: static; }   /* 펼치기 전엔 한 줄뿐이라 고정할 이유가 없다 */
  .cc-art { aspect-ratio: 16 / 11; max-height: 9.5rem; }
  .cc-txt { padding: 0.75rem 0.75rem 0.9375rem; gap: 0.25rem; }
  .cc-t { font-size: 0.9375rem; }
  .cc-ul { font-size: 0.8125rem; line-height: 1.55; }
  .cc-ul li { padding-left: 0.75rem; }
  .cc-chev { width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; transform: rotate(90deg); }
  .cmp-go { grid-column: 1 / -1; grid-row: var(--gr, 3); flex-direction: row; gap: 0.75rem; padding: 0.5rem 0.75rem; }
  .cmp-dot { width: 3rem; height: 3rem; transform: rotate(90deg); }
  .cmp-foot { justify-content: flex-start; }
}
@media (min-width: 64rem) and (max-width: 79.9375rem) {
  .cc-txt { padding-inline: 0.75rem; }
  .cc-ul { font-size: 0.8125rem; }
}
@media (min-width: 48.0625rem) and (max-width: 63.9375rem) {
  .cc-art { aspect-ratio: auto; height: 9.5rem; }
  .cmp { column-gap: 1rem; }
}
@media (max-width: 22.5rem) { .cc-ul li { padding-left: 0.625rem; } .cc-txt { padding-inline: 0.625rem; } }

@media (prefers-reduced-motion: no-preference) {
  .cmp.is-armed > [data-c="1"]:not(.play) { opacity: 0; }
  .cmp.is-armed.is-seen .cmp-go:not([hidden]) .cmp-dot { animation: cmp-pulse 1800ms ease-out 600ms 2; }
  .cmp.is-armed > .cc.is-piri.play { animation: cc-up 520ms var(--ease) both; }
  .cmp.is-armed > .cc.is-shop.play { animation: cc-drop 520ms var(--ease) both; }   /* 카드는 피리와 같은 곡선(동시에 펼쳐져야 한다), 툭 떨어지는 느낌은 아이콘에만 */
  .cmp.is-armed > .cc-arrow.play .cc-chev { animation: chev-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both; }
  /* 피리: 아래에서 떠올라 살짝 튕기고, 두 번 둥실 뒤 멈춘다(5초 안). 링은 바깥으로 두 번 퍼진다. */
  .cmp.is-armed > .cc.is-piri.play .cc-art img { animation: ic-rise 640ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both, ic-float 1600ms ease-in-out 800ms 2 alternate; }
  .cmp.is-armed > .cc.is-piri.play .cc-art::after { animation: ring-out 2200ms ease-out 260ms 2; }
  /* 펫샵: 위에서 툭 내려앉고 색이 빠진다. 아이콘마다 한 번씩만 불편한 미세 동작(겁주지 않는 선). */
  .cmp.is-armed > .cc.is-shop.play .cc-art img { animation: ic-drop 520ms cubic-bezier(0.5, 0, 0.75, 0) 80ms both, ic-fade 900ms ease 600ms both; }
  .cmp.is-armed > .cc.is-shop.play[data-c="1"] .cc-art img { animation: ic-drop 520ms cubic-bezier(0.5, 0, 0.75, 0) 80ms both, ic-fade 900ms ease 600ms both, ic-gavel 1100ms ease-in-out 700ms 1; transform-origin: 50% 92%; }
  .cmp.is-armed > .cc.is-shop.play[data-c="2"] .cc-art img { animation: ic-drop 520ms cubic-bezier(0.5, 0, 0.75, 0) 80ms both, ic-fade 900ms ease 600ms both, ic-flicker 700ms steps(1, end) 900ms 1; }
  .cmp.is-armed > .cc.is-shop.play[data-c="3"] .cc-art img { animation: ic-drop 520ms cubic-bezier(0.5, 0, 0.75, 0) 80ms both, ic-fade 900ms ease 600ms both, ic-squash 900ms ease-out 700ms 1; transform-origin: 50% 100%; }
  .cmp.is-armed > .cc.is-shop.play[data-c="4"] .cc-art img { animation: ic-drop 520ms cubic-bezier(0.5, 0, 0.75, 0) 80ms both, ic-fade 900ms ease 600ms both, ic-wobble 1400ms ease-in-out 700ms 1; transform-origin: 50% 90%; }
  .cmp.is-armed > .cc.is-shop.play[data-c="5"] .cc-art img { animation: ic-drop 520ms cubic-bezier(0.5, 0, 0.75, 0) 80ms both, ic-fade 900ms ease 600ms both, ic-sag 1200ms ease-in-out 700ms 1 forwards; transform-origin: 30% 90%; }   /* both 면 지연 동안 0% 가 앞선 ic-drop 을 덮는다 */
  .cmp.is-armed > .cc.is-shop.play .cc-art::after { animation: ring-in 1600ms ease-out 300ms 1; }
}
/* 그림자 대신 1px 외곽선이 퍼진다(차트 문법: 선만 쓴다). */
@keyframes cmp-pulse { 0% { outline: 1px solid rgba(47, 122, 26, 0.6); outline-offset: 0; } 100% { outline: 1px solid rgba(47, 122, 26, 0); outline-offset: 14px; } }
@keyframes cc-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cc-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes chev-pop { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
@keyframes ic-rise { from { opacity: 0; transform: translateY(18px) scale(0.82); } to { opacity: 1; transform: none; } }
@keyframes ic-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes ring-out {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  65% { transform: translate(-50%, -50%) scale(1.22); opacity: 0; }
  66% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes ring-in { from { transform: translate(-50%, -50%) scale(1.16); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes ic-drop { 0% { opacity: 0; transform: translateY(-14px); } 82% { opacity: 1; transform: translateY(0) scaleY(0.96); } 100% { opacity: 1; transform: none; } }
@keyframes ic-fade { from { filter: saturate(1); } to { filter: saturate(0.7); } }
@keyframes ic-gavel { 0%, 100% { transform: none; } 20% { transform: rotate(-6deg); } 30% { transform: translateY(2px); } 40% { transform: none; } 60% { transform: rotate(-4deg); } 70% { transform: translateY(2px); } 80% { transform: none; } }
@keyframes ic-flicker { 0% { opacity: 1; } 20% { opacity: 0.78; } 35% { opacity: 1; } 55% { opacity: 0.86; } 70%, 100% { opacity: 1; } }
@keyframes ic-squash { 0%, 100% { transform: none; } 30% { transform: translateY(-8px); } 55% { transform: scaleY(0.95) scaleX(1.03); } 75% { transform: translateY(-2px); } }
@keyframes ic-wobble { 0%, 100% { transform: none; } 25% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } }
@keyframes ic-sag { 0% { transform: none; } 45% { transform: translateY(5px) rotate(-6deg); } 100% { transform: translateY(2px) rotate(-3deg); } }

/* ═══ 품종 페이지(10/3 대표 덱 5~8쪽) ═══════════════════════════════════
   흰 누끼 사진 + 1px 진한 테두리 세로 카드(덱 그대로). 사진 위에 성장 스트립(.br-anim)을 겹쳐
   예시 릴스처럼 같은 개체 사진을 넘긴다. 스트립·키프레임은 tools/build_breeds.py 가 만든다(파일 끝 BREEDS 블록). */
.breeds { padding-block: 2.5rem 6rem; }
.br-stage { position: relative; padding-top: 7.25rem; }
.br-bubble { position: absolute; top: 0.25rem; left: 50%; width: 8.75rem; margin-left: -4.375rem; transform-origin: 20% 96%; }
.br-bubble svg { display: block; width: 100%; height: auto; overflow: visible; }
.br-bubble path { fill: var(--paper); stroke: var(--ink-900); stroke-width: 2.5; stroke-linejoin: round; }
.br-bubble-t {
  position: absolute; inset: 0 0 16% 0; display: grid; place-items: center;
  font-family: "Fredoka", var(--font-head); font-weight: 700; font-size: 2.125rem; letter-spacing: 0.02em; color: #7a4a1e;
}
.br-bubble.is-cat path { stroke: #7f9fb8; }
.br-bubble.is-cat .br-bubble-t { font-family: "Dancing Script", cursive; font-size: 2.375rem; letter-spacing: 0; color: #4b6d88; }

.br-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
.br-fig { display: block; margin: 0; color: inherit; text-decoration: none; }
.br-ph { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #fff; border: 1px solid var(--ink-900); border-radius: var(--r); }
.br-still { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-anim { position: absolute; inset: 0; display: none; background-repeat: no-repeat; }
/* 시선: 생성 원본은 모두 화면 왼쪽을 본다(약 15도). 줄 가운데(말풍선)를 보게 왼쪽 카드만 좌우 반전한다.
   데스크톱 5열은 1·2번, 3열은 각 줄 첫 칸, 2열은 왼쪽 열(가로형 다섯째 제외). */
@media (min-width: 64.0625rem) { .br:nth-child(-n+2) .br-still, .br:nth-child(-n+2) .br-anim { transform: scaleX(-1); } }
@media (min-width: 48rem) and (max-width: 64rem) { .br:nth-child(3n+1) .br-still, .br:nth-child(3n+1) .br-anim { transform: scaleX(-1); } }
@media (max-width: 47.9375rem) { .br:nth-child(odd):not(.br-more) .br-still, .br:nth-child(odd):not(.br-more) .br-anim { transform: scaleX(-1); } }
/* 말풍선은 재생 전엔 숨었다가 짖는 순간(고양이는 12개월 컷) 튀어나온다: BREEDS 자동 블록이 맡는다. */
.br-cap { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.875rem; }
/* 한마디 길이가 달라도 상담 줄은 한 줄에 맞춘다(카드 높이를 채우고 상담 줄을 바닥으로). */
.br { display: flex; }
.br-fig { flex: 1; display: flex; flex-direction: column; }
.br-cap { flex: 1; }
.br-name { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; }
.br-line { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-700); }
.br-sub { color: var(--ink-500); }
.br-link { cursor: pointer; }
@media (hover: hover) { .br-link:hover .br-name { text-decoration: underline; text-underline-offset: 4px; } }
.br-link:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 4px; border-radius: var(--r); }
/* 멈춤(10/5): 성장 장면이 끝없이 돌아 '다시 보기' 대신 멈춤/재생 버튼을 둔다(WCAG 2.2.2 멈춤 수단).
   모션 허용일 때만 app.js 가 사진 위에 투명 버튼을 깐다(이름이 '… 멈춤'/'… 재생'으로 바뀐다). 손을 올리면 '멈춤',
   멈춘 카드는 '재생'이 늘 보인다. 손을 올릴 수 없는 터치 기기는 첫 바퀴가 끝나면(is-done) '멈춤'이 늘 보인다. */
.br-pause { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.br-pause::after {
  content: "멈춤"; position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.25rem 0.5rem;
  font-family: var(--font-head); font-size: 0.75rem; font-weight: 600; color: var(--paper); background: var(--ink-900); border-radius: var(--r);
  opacity: 0; transition: opacity var(--t);
}
.br.is-paused .br-pause::after { content: "재생"; opacity: 0.9; }
/* 다섯째 카드 스트립이 늦으면(is-wait) 첫 칸을 띄운 채 나이 표시를 숨기고, 못 받으면(is-still) 정지 사진만(app.js breeds, 10/7) */
.br.is-wait .br-age, .br.is-still .br-age { visibility: hidden; }
.br.is-still .br-anim { display: none !important; }
.br.is-still .br-still { opacity: 1 !important; animation: none !important; }
@media (hover: none) { .br-stage.is-done .br-pause::after { opacity: 0.9; } }
@media (hover: hover) { .br-pause:hover::after { opacity: 1; } }
.br-pause:focus-visible { outline: 2px solid var(--ink-900); outline-offset: -4px; }
.br-pause:focus-visible::after { opacity: 1; }
/* 아기 때만 입양(10/4 사용자): 카드 위 한 줄 + 사진 위 나이 표시. 나이는 성장 칸과 함께 한 줄씩 올라간다(BREEDS:auto 의 age-dog/age-cat).
   정지 사진·모션 감소·JS 없음이면 마지막 줄 '생후 12개월'에 선다. 줄 높이 1.5em 은 build_breeds.py AGE_LH 와 같아야 한다. */
.br-only { max-width: 40rem; margin: 0 auto 1.75rem; text-align: center; text-wrap: balance; font-size: 0.9375rem; line-height: 1.65; color: var(--ink-700); }
.br-only strong { color: var(--ink-900); font-weight: 600; }
.br-age { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 1; box-sizing: content-box; height: 1.5em; overflow: hidden; padding: 0 0.4375rem;
  font-family: var(--font-head); font-size: 0.75rem; font-weight: 600; line-height: 1.5; color: var(--ink-900);
  background: var(--paper); border: 1px solid var(--ink-900); border-radius: var(--r); }
.br-age-r { display: block; }
.br-age { display: flex; }
.br-age-x { flex: none; white-space: pre; }
.br-age-r > span { display: block; height: 1.5em; white-space: nowrap; }
.br-note { margin: 2.25rem 0 0; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-500); }   /* 10/7 대표 11번: 아주 살짝 아래로 */
/* 카드마다 상담 한 줄(10/8 제안 A, 10/13 반영). 1px 룰 + '[품종] 입양 상담 →', 높이 48px 이상. 카드에서 누를 수 있는 곳은 이것 하나다.
   채널이 열리기 전(게이트)도 생김새는 같다: 밑줄이 있어야 눌러야 하는 곳임을 안다. 누르면 아래 안내(.br-gnote)가 펼쳐진다. */
.br-inq {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; width: 100%; min-height: 3rem; margin: auto 0 0; padding: 0;
  border: 0; border-top: 1px solid var(--ink-900); border-radius: 0; background: none; font: inherit; font-family: var(--font-head);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--ink-900); text-align: right; text-decoration: none; cursor: pointer;
}
.br-inq .lb { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ink-400); }
.br-inq .ar { flex: none; font-size: 1.0625rem; transition: transform var(--t); }
@media (hover: hover) { .br-inq:hover .lb { text-decoration-color: var(--ink-900); } .br-inq:hover .ar { transform: translateX(3px); } }
.br-inq:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }
.br-gnote { margin: 0.25rem 0 0; padding: 0.75rem 0.875rem; border: 1px solid var(--ink-900); border-radius: var(--r); background: var(--paper);
  font-size: 0.8125rem; line-height: 1.55; color: var(--ink-700); }
.br-gnote a { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.br-sub-l { margin: 1.75rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-700); }
.br-sub-l + .br-note { margin-top: 0.5rem; }

/* 배너: 메인 .wrap 콘텐츠 폭(카드 줄·메인 숫자 띠와 같은 좌우선). 파랑 면 + 민트 'THINKING OF ADOPTING?'(덱 참고) + 빼꼼 동물.
   바탕은 사진이 아니라 단색 면이고, 동물은 투명 누끼라 배경 색 차이로 경계가 생기지 않는다. */
.br-banner {
  position: relative; display: block; overflow: hidden; margin-top: 3.5rem; height: 10.5rem;   /* 10/7 대표 13번: 세로 60%(17.5 → 10.5rem) */
  background: #2b4c97; color: #fff; text-decoration: none; border-radius: var(--r);
}
.bb-copy { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 0.875rem; }
.bb-t {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.32em;
  font-family: "Fredoka", var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(1.75rem, 3.2vw, 2.625rem); line-height: 1.02; color: #8fe3bd;
}
.bb-sub { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; color: #fff; }
.bb-arr { position: relative; width: 1.125rem; height: 1px; background: currentColor; transition: transform var(--t); }
.bb-arr::after { content: ""; position: absolute; right: 0; top: 50%; width: 0.4375rem; height: 0.4375rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); }
@media (hover: hover) { .br-banner:hover .bb-arr { transform: translateX(4px); } }
.br-banner:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 4px; }
.bb-pet { position: absolute; z-index: 1; display: block; height: auto; pointer-events: none; }
/* 강아지: 원안 구도 그대로 60% 높이(문구 위 가운데, 강아지는 아래 가운데에서 눈까지 올라옴, '입양 과정 보기'는 왼쪽 아래). */
.br-banner.is-dog .bb-copy { inset: 1rem 2rem 1rem; align-items: center; }
.br-banner.is-dog .bb-sub { position: absolute; left: 0; bottom: 0; }
.br-banner.is-dog .bb-pet { left: 50%; bottom: 0; width: 11rem; transform: translateX(-50%); }   /* 머리털이 문구에 닿지 않게(문구 아래 18px 안팎) */
/* 고양이: 왼쪽 가장자리에서 얼굴을 내밀고(대표 원본 사진, 덱 4쪽), 문구는 오른쪽 넓은 쪽에. */
.br-banner.is-cat .bb-copy { left: 9.5rem; right: 2rem; top: 50%; transform: translateY(-50%); align-items: center; }   /* 고양이(높이 10.5rem 에서 폭 약 7.5rem) 오른쪽 남은 폭의 가운데 */
.br-banner.is-cat .bb-pet { left: 0; bottom: 0; height: 94%; width: auto; }   /* 귀 끝이 위 변에 닿지 않게 */
@media (prefers-reduced-motion: no-preference) {
  .js .br-banner .bb-pet { transition: transform 900ms cubic-bezier(0.25, 1, 0.5, 1); }
  .js .br-banner.is-dog:not(.in) .bb-pet { transform: translate(-50%, 46%); }
  .js .br-banner.is-cat:not(.in) .bb-pet { transform: translateX(-46%); }
}

/* 원형 플로트(덱 ③): 카카오톡 문의 / 네이버 톡톡 문의 / 전화 상담. 반투명·블러 없이 불투명 원 + 1px 테두리.
   채널이 열리기 전(허가 전)은 게이트: 헤더 채널 버튼과 같은 색 문법, 누르면 '준비 중' 안내만 뜬다. */
.fab {
  position: fixed; z-index: 20; right: max(1.25rem, env(safe-area-inset-right)); transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s;
  bottom: calc(1.25rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0.625rem;
}
.fab-b {
  position: relative; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--ink-900); color: var(--ink-900); text-decoration: none; cursor: pointer;
}
.fab-b .ci { width: 1.375rem; height: 1.375rem; }
.fab-b.ch-kakao { background: #fee500; border-color: #fee500; color: #191600; }
.fab-b.ch-naver { background: #03c75a; border-color: #03c75a; color: #fff; }
.fab-b.ch-tel { background: var(--ink-900); color: var(--paper); }
.fab-b.ch-insta { background: #d62976; border-color: #d62976; color: #fff; }
.fab-b.gate { background: var(--paper); }
.fab-b.ch-kakao.gate { border-color: #e5cf00; color: #7a6a00; }
.fab-b.ch-naver.gate { border-color: #03c75a; color: #046b32; }
.fab-b.ch-tel.gate { border-color: var(--ink-900); color: var(--ink-900); }
.fab-l {
  position: absolute; right: calc(100% + 0.625rem); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  padding: 0.375rem 0.625rem; font-family: var(--font-head); font-size: 0.8125rem; font-weight: 600; color: var(--paper); background: var(--ink-900);
  border-radius: var(--r); opacity: 0; transition: opacity var(--t);
}
.fab-l { pointer-events: auto; }
.fab-b:not(:hover):not(:focus-visible) .fab-l { pointer-events: none; }
.fab.is-quiet .fab-l { opacity: 0 !important; pointer-events: none !important; }
.fab-l::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 0.75rem; }   /* 버튼과 라벨 사이 틈을 이어 라벨로 옮겨 가도 호버가 유지되게 */
@media (hover: hover) { .fab-b:hover .fab-l { opacity: 1; } }
.fab-b:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 3px; }
.fab-b:focus-visible .fab-l { opacity: 1; }
/* 맨 아래까지 내렸을 때 플로트가 법정 고지를 덮지 않게. */
@media (max-width: 79.9375rem) { body.has-fab .ftr { padding-bottom: 16rem; } }   /* 넓은 화면은 플로트가 콘텐츠 밖 여백에 있다 */
@media (max-width: 79.9375rem) {
  .fab-b { width: 2.875rem; height: 2.875rem; }
  .fab { gap: 0.5rem; }
  /* 좁은 화면: 첫 화면 카드를 가리지 않게 재생이 끝나거나 스크롤하면 나타난다(app.js breeds). 넓은 화면은 콘텐츠 밖 여백이라 늘 보인다. */
  .js .fab:not(.is-in) { opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s 240ms; }
  /* 10/13: 카드 줄이 플로트 자리에 걸려 있는 동안은 숨긴다(오른쪽 열 사진·상담 줄을 가리던 문제, 10/8 제안 05). 카드마다 상담 줄이 있어 빠져도 길이 남는다. */
  .js .fab.is-over { opacity: 0; visibility: hidden; transform: translateY(0.5rem); transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 0s 240ms; }
}
/* 낮은 화면(400% 확대 등)에서는 고정하지 않고 본문 끝 흐름에 둔다. 상시 덮개가 읽을 높이를 먹지 않게. */
@media (max-height: 32rem) {
  .fab { position: static; flex-direction: row; justify-content: center; margin: 2rem auto 2.5rem; }
  .js .fab:not(.is-in), .js .fab.is-over { opacity: 1; visibility: visible; transform: none; }
  .fab-l { display: none; }
  body.has-fab .ftr { padding-bottom: 2.5rem; }
}

@media (min-width: 48rem) and (max-width: 64rem) {
  .br-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .br-grid > .br { grid-column: span 2; }
  .br-grid > .br:nth-child(4) { grid-column: 2 / span 2; }   /* 둘째 줄 두 장을 가운데로 */
}
@media (max-width: 48rem) {
  .breeds { padding-block: 1.5rem 4.5rem; }
  .br-stage { padding-top: 6rem; }
  .br-bubble { width: 7.25rem; margin-left: -3.625rem; }
  .br-bubble-t { font-size: 1.75rem; }
  .br-bubble.is-cat .br-bubble-t { font-size: 2rem; }
  .br-name { font-size: 0.9375rem; }
  .br-line { font-size: 0.8125rem; line-height: 1.55; }
  .br-inq { font-size: 0.8125rem; }
  .br-inq .ar { font-size: 0.9375rem; }
  .br-only { margin-bottom: 1.25rem; font-size: 0.875rem; }
  .br-age { left: 0.375rem; top: 0.375rem; padding: 0 0.3125rem; font-size: 0.6875rem; }
  .br-banner { height: auto; min-height: 11rem; margin-top: 2.5rem; }   /* 10/7: 16.5rem → 11rem(대표 13번 세로 줄이기, 폰은 두 줄 문구가 들어갈 만큼) */
  .br-banner .bb-t { flex-direction: column; align-items: flex-start; font-size: clamp(1.5rem, 7vw, 2.125rem); }
  .br-banner.is-dog .bb-copy { inset: auto 42% auto 1.25rem; top: 50%; transform: translateY(-50%); align-items: flex-start; }
  .br-banner.is-dog .bb-sub { position: static; }
  .br-banner.is-dog .bb-pet { left: auto; right: 0.75rem; width: 9.5rem; transform: none; }
  .js .br-banner.is-dog:not(.in) .bb-pet { transform: translateY(46%); }
  .br-banner.is-cat .bb-copy { left: 36%; right: 1rem; }
  .br-banner.is-cat .bb-t { align-items: flex-start; }
  .br-banner.is-cat .bb-sub { align-self: flex-start; }
  .fab-b { width: 2.875rem; height: 2.875rem; }
  .fab-b .ci { width: 1.25rem; height: 1.25rem; }
  body.has-fab .ftr { padding-bottom: 14.5rem; }
}
@media (max-width: 47.9375rem) {
  .br-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
  /* 다섯째 '타 품종 문의'는 두 칸을 차지하는 가로형(홀수 칸이 비지 않게). */
  .br-more { grid-column: 1 / -1; }
  .br-more .br-fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; align-items: center; }
  .br-more .br-cap { margin-top: 0; }
}
/* 좁은 폰: 고양이 배너 문구가 귀에 닿지 않게 고양이를 줄이고 'THINKING OF' 를 한 줄로 묶는다. 태블릿 세로는 문구를 왼쪽 정렬로. */
.bb-l { white-space: nowrap; }
.bb-sub { white-space: nowrap; }
@media (max-width: 48rem) {
  .br-banner.is-cat .bb-copy { align-items: flex-start; max-width: 24rem; }
}
@media (max-width: 22rem) { .br-banner.is-dog .bb-pet { width: 8rem; } }   /* 320~350px: '입양 과정 보기 →' 가 강아지 털에 닿지 않게 */
@media (max-width: 23.5rem) {
  .br-banner.is-cat .bb-pet { height: 80%; }
  .br-banner.is-cat .bb-copy { left: 38%; right: 0.75rem; }
  .bb-sub { gap: 0.375rem; font-size: 0.875rem; }
  .br-banner .bb-t { font-size: clamp(1.375rem, 7vw, 1.75rem); }
}
/* 터치 기기: 손을 올릴 수 없으니 재생이 끝나면 '다시 보기' 표시를 띄워 둔다. */
/* 인쇄: 다 펼친 비교, 정지 사진(배경 그림을 안 찍는 기본 인쇄에서 스트립 덮개가 사진을 가린다). */
@media print {
  .fab, .cmp-go, .cmp-replay, .br-pause, .br-anim { display: none !important; }
  .cmp.is-armed > [data-c] { visibility: visible !important; opacity: 1 !important; }
  .br-still { opacity: 1 !important; animation: none !important; }
}

/* 10/7 대표 9·10번: 플로트는 오른쪽 아래가 아니라 오른쪽 세로 가운데. 콘텐츠 밖 여백에 놓이는 넓은 화면(80rem 이상)만.
   그보다 좁으면 가운데가 카드 글을 덮어 오른쪽 아래(나중에 나타남)를 지킨다. */
@media (min-width: 82.5rem) and (min-height: 32.0625rem) { .fab { bottom: auto; top: 50%; transform: translateY(-50%); } }   /* 82.5rem: 일반 스크롤바(17px)를 빼도 다섯째 카드와 1rem 넘게 떨어진다 */

/* ═══ 메디컬(10/7 대표 초안 '메디컬'): Adopt+piri · 그라데이션 판 · 혜택 3칸 ═════════════
   움직임은 초안이 건 참고 화면처럼: 판 위로 3D 그림이 차례로 솟고(살짝 튕김), 숫자가 0에서 차오른다. 둥실은 한 번 오르내림만(멈춤 수단 대신 5초 안).
   보기 전엔 숨기지만 JS 가 못 떠도 3초 뒤 CSS 만으로 보인다. */
.section.med-page { border-top: 0; padding-top: 3.5rem; }
.med-brand { margin: 0 0 2.25rem; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.75rem); letter-spacing: -0.02em; line-height: 1.1; }
.med-panel { padding: 3rem 1.5rem 15.5rem;   /* 10/8 대표 22번 + 같은 날 '40px 더': 제목과 3D 그림 사이를 띄운다(그림이 판 아래쪽에 걸리는 겹침 폭은 그대로) */ text-align: center; border-radius: var(--r); background: linear-gradient(180deg, #e3f0ff 0%, #e8e8fd 55%, rgba(243, 243, 252, 0) 100%); }
.med-eyebrow { margin: 0 0 0.75rem; font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; color: var(--ink-700); }
.med-h { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.med-list { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 62rem; margin: -9.5rem auto 0; padding: 0 1rem; }
.med-it { display: flex; flex-direction: column; min-width: 0; }
.med-art { display: grid; place-items: center; height: 11rem; }
.med-art img { display: block; width: 11rem; height: 11rem; object-fit: contain; }
.med-txt { flex: 1; margin-top: 0.75rem; padding: 1.25rem 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.med-t { margin: 0 0 0.5rem; font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.med-d { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-700); }
.med-n { display: inline-block; min-width: 2ch; text-align: right; font-family: var(--font-head); font-weight: 700; font-size: 1.75em; line-height: 0;   /* 0: 큰 숫자가 줄 높이를 키워 옆 카드와 글 높이가 어긋나지 않게 */ color: var(--green-ink); font-variant-numeric: tabular-nums; }   /* 두 자리 폭을 미리 잡아 차오르는 동안 '% 지원'이 밀리지 않게 */
.med-sub { color: var(--ink-500); font-size: 0.875rem; }
.med-note { max-width: 62rem; margin: 1.5rem auto 0; padding: 0 1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-500); }
@media (max-width: 47.9375rem) {
  .section.med-page { padding-top: 2rem; }
  .med-brand { margin-bottom: 1.5rem; }
  .med-panel { padding: 2rem 1.25rem 2.25rem; }
  .med-list { grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.75rem; padding: 0; }
  .med-it { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
  .med-art, .med-art img { width: 5.5rem; height: 5.5rem; flex: none; }
  .med-txt { margin: 0; padding: 0; border: 0; background: none; }
  .med-t { font-size: 1rem; margin-bottom: 0.25rem; }
  .med-d { font-size: 0.875rem; }
  .med-note { padding: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .med-list:not(.in) .med-art img, .js .med-list:not(.in) .med-txt { opacity: 0; animation: med-safe 1ms linear 3s forwards; }
  .med-list.in .med-art img { animation: med-rise 760ms cubic-bezier(0.34, 1.56, 0.64, 1) both, med-float 1800ms ease-in-out 900ms 2 alternate; }   /* 2회: 제자리에서 끝나 점프가 없고 5초 안에 멈춘다 */
  .med-list.in.is-late .med-art img, .med-list.in.is-late .med-txt { animation: none; }   /* 안전망(3초)이 이미 띄웠으면 다시 숨겼다 솟지 않는다 */
  .med-list.in .med-txt { animation: cc-up 560ms var(--ease) 180ms both; }
  .med-list.in .med-it:nth-child(2) .med-art img { animation-delay: 160ms, 1060ms; }
  .med-list.in .med-it:nth-child(3) .med-art img { animation-delay: 320ms, 1220ms; }
  .med-list.in .med-it:nth-child(2) .med-txt { animation-delay: 340ms; }
  .med-list.in .med-it:nth-child(3) .med-txt { animation-delay: 500ms; }
}
@keyframes med-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes med-rise { from { opacity: 0; transform: translateY(48px) scale(0.78); } to { opacity: 1; transform: none; } }   /* 참고 화면처럼 판 아래에서 솟는다 */
@keyframes med-safe { to { opacity: 1; } }
@media print { .med-art img, .med-txt { opacity: 1 !important; animation: none !important; } }


/* ═══ 소개(10/7 대표 초안 '소개'): 제목 · 사진 · 영어 시 ═════════════
   초안 배치 그대로: 제목은 위 가운데, 아래에 사진(왼쪽)과 시(오른쪽)를 가운데로 모은다. 폰은 사진 위, 시 아래.
   시는 한 줄씩 떠오른다(첫 화면이라 JS 없이 CSS 로만, 모션 감소면 처음부터 다 보임). */
.section.ab-page { border-top: 0; padding-top: 3.5rem; padding-bottom: 5rem; }
.ab-h { margin: 0 0 3rem; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.625rem, 2.6vw, 2.125rem); letter-spacing: -0.02em; }
.ab-body { display: flex; justify-content: center; align-items: flex-start; gap: 2.5rem; }
.ab-ph { flex: none; width: 16rem; margin: 0; }
.ab-ph img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.ab-poem { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-900); }
.ab-poem p { margin: 0 0 1.35em; }
.ab-poem p.ab-last { margin: 2.7em 0 0; }   /* 초안의 빈 줄 두 개 */
@media (max-width: 47.9375rem) {
  .section.ab-page { padding-top: 2rem; }
  .ab-h { margin-bottom: 1.75rem; }
  .ab-body { flex-direction: column; align-items: center; gap: 1.75rem; }
  .ab-ph { width: min(70vw, 16rem); }
  .ab-poem { text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .ab-l { display: inline-block; animation: ab-in 520ms var(--ease) both; }
  .ab-poem p:nth-child(1) .ab-l:nth-of-type(1) { animation-delay: 200ms; } .ab-poem p:nth-child(1) .ab-l:nth-of-type(2) { animation-delay: 380ms; }
  .ab-poem p:nth-child(1) .ab-l:nth-of-type(3) { animation-delay: 560ms; } .ab-poem p:nth-child(1) .ab-l:nth-of-type(4) { animation-delay: 740ms; }
  .ab-poem p:nth-child(2) .ab-l:nth-of-type(1) { animation-delay: 1100ms; } .ab-poem p:nth-child(2) .ab-l:nth-of-type(2) { animation-delay: 1280ms; }
  .ab-poem p:nth-child(2) .ab-l:nth-of-type(3) { animation-delay: 1460ms; } .ab-poem p:nth-child(2) .ab-l:nth-of-type(4) { animation-delay: 1640ms; }
  .ab-poem p:nth-child(2) .ab-l:nth-of-type(5) { animation-delay: 1820ms; }
  .ab-poem p:nth-child(3) .ab-l { animation-delay: 2400ms; }
  .ab-ph img { animation: ab-in 700ms var(--ease) both; }
}
@keyframes ab-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media print { .ab-l, .ab-ph img { animation: none !important; opacity: 1 !important; } }

/* BREEDS:auto 자동 생성(tools/build_breeds.py). 손으로 고치지 않는다. */
/* 첫 바퀴 길이(끝 칸 머묾 전). app.js 가 읽어 첫 바퀴가 끝나면 플로트·'멈춤' 표시를 띄운다 */
.br-stage[data-species="dog"] { --br-first: 6267; }
.br-stage[data-species="cat"] { --br-first: 6400; }
.br-anim { background-size: 2200% 100%; background-position-x: 100.0000000%; }
.br-stage[data-species="cat"] .br-anim { background-position-x: 76.1904762%; }
.br-age-r { transform: translateY(-22.5em); }
.br[data-id="maltipoo"] .br-anim { background-image: url("/assets/breeds/v1/maltipoo.webp"); }
.br[data-id="yorkie"] .br-anim { background-image: url("/assets/breeds/v1/yorkie.webp"); }
.br[data-id="schnauzer"] .br-anim { background-image: url("/assets/breeds/v1/schnauzer.webp"); }
.br[data-id="pomeranian"] .br-anim { background-image: url("/assets/breeds/v1/pomeranian.webp"); }
.br[data-id="shihtzu"] .br-anim { background-image: url("/assets/breeds/v1/shihtzu.webp"); }
.br[data-id="koshot"] .br-anim { background-image: url("/assets/breeds/v1/koshot.webp"); }
.br[data-id="siamese"] .br-anim { background-image: url("/assets/breeds/v1/siamese.webp"); }
.br[data-id="russianblue"] .br-anim { background-image: url("/assets/breeds/v1/russianblue.webp"); }
.br[data-id="abyssinian"] .br-anim { background-image: url("/assets/breeds/v1/abyssinian.webp"); }
.br[data-id="amshort"] .br-anim { background-image: url("/assets/breeds/v1/amshort.webp"); }
@media (prefers-reduced-motion: no-preference) {
  /* 스트립이 오기 전: 갓난 첫 칸을 보여 주고 정지 사진(성견)과 말풍선은 숨긴다. 8초 안에 못 오면 CSS 만으로 정지 사진을 되살린다
     (app.js 가 못 떠도 성견 사진은 보인다). app.js 도 같은 8초에 is-static 을 붙이고 재생을 포기한다. */
  .js .br-stage:not(.is-static):not(.is-ready) .br-anim { display: block; background-size: cover; background-position: center; animation: br-fallback-hide 1ms linear 8s forwards; }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="maltipoo"] .br-anim { background-image: url("/assets/breeds/v1/maltipoo-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="yorkie"] .br-anim { background-image: url("/assets/breeds/v1/yorkie-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="schnauzer"] .br-anim { background-image: url("/assets/breeds/v1/schnauzer-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="pomeranian"] .br-anim { background-image: url("/assets/breeds/v1/pomeranian-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="shihtzu"] .br-anim { background-image: url("/assets/breeds/v1/shihtzu-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="koshot"] .br-anim { background-image: url("/assets/breeds/v1/koshot-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="siamese"] .br-anim { background-image: url("/assets/breeds/v1/siamese-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="russianblue"] .br-anim { background-image: url("/assets/breeds/v1/russianblue-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="abyssinian"] .br-anim { background-image: url("/assets/breeds/v1/abyssinian-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id="amshort"] .br-anim { background-image: url("/assets/breeds/v1/amshort-first.webp"); }
  .js .br-stage:not(.is-static):not(.is-ready) .br[data-id] .br-still { opacity: 0; animation: br-fallback 1ms linear 8s forwards; }
  .br-stage.is-ready .br-anim { display: block; background-position-x: 0%; }
  .br-stage.is-playing[data-species="dog"] .br-anim { animation: grow-dog 7766.6666ms step-end infinite both; }
  .br-stage.is-playing[data-species="cat"] .br-anim { animation: grow-cat 7900.0000ms step-end infinite both; }
  .br-stage.is-playing[data-species="dog"] .br-bubble { animation: arf 7766.6666ms linear infinite both; }
  .br-stage.is-playing[data-species="cat"] .br-bubble { animation: mew 7900.0000ms linear infinite both; }
  .js .br-stage:not(.is-static):not(.is-ready) .br-age-r { transform: none; animation: br-age-fallback 1ms linear 8s forwards; }
  .br-stage.is-ready .br-age-r { transform: none; }
  .br-stage.is-playing[data-species="dog"] .br-age-r { animation: age-dog 7766.6666ms step-end infinite both; }
  .br-stage.is-playing[data-species="cat"] .br-age-r { animation: age-cat 7900.0000ms step-end infinite both; }
  .br-stage.is-static .br-age-r { transform: translateY(-22.5em); animation: none; }
  /* 사진을 누르면 그 카드만 멈춘다(app.js 멈춤 버튼, aria-pressed). 재생 규칙(.br-stage.is-playing[data-species] …)보다 강해야 한다 */
  .br-stage.is-playing .br.is-paused .br-anim, .br-stage.is-playing .br.is-paused .br-age-r { animation-play-state: paused; }
  /* 네 장이 다 멈추면 말풍선도 멈춘다(무대 위 움직임 전부에 멈춤 수단) */
  .br-stage.is-playing:not(:has(.br[data-id]:not(.is-paused))) .br-bubble { animation-play-state: paused; }
}
@keyframes grow-dog {
  0% { background-position-x: 0.0000000%; }
  3.4334769% { background-position-x: 4.7619048%; }
  6.8669524% { background-position-x: 9.5238095%; }
  10.3004293% { background-position-x: 14.2857143%; }
  13.7339061% { background-position-x: 19.0476190%; }
  17.1673817% { background-position-x: 23.8095238%; }
  20.6008585% { background-position-x: 28.5714286%; }
  24.0343354% { background-position-x: 33.3333333%; }
  35.6223183% { background-position-x: 38.0952381%; }
  38.1974256% { background-position-x: 42.8571429%; }
  40.7725330% { background-position-x: 47.6190476%; }
  43.3476403% { background-position-x: 52.3809524%; }
  45.9227476% { background-position-x: 57.1428571%; }
  48.4978549% { background-position-x: 61.9047619%; }
  51.5021464% { background-position-x: 66.6666667%; }
  56.6523610% { background-position-x: 71.4285714%; }
  62.2317598% { background-position-x: 76.1904762%; }
  68.6695281% { background-position-x: 80.9523810%; }
  69.5278976% { background-position-x: 85.7142857%; }
  71.2446354% { background-position-x: 80.9523810%; }
  72.1030049% { background-position-x: 76.1904762%; }
  72.9613732% { background-position-x: 80.9523810%; }
  73.8197427% { background-position-x: 90.4761905%; }
  75.5364805% { background-position-x: 80.9523810%; }
  76.3948500% { background-position-x: 76.1904762%; }
  77.2532195% { background-position-x: 80.9523810%; }
  78.1115878% { background-position-x: 95.2380952%; }
  79.8283269% { background-position-x: 80.9523810%; }
  80.6866951% { background-position-x: 100.0000000%; }
  100% { background-position-x: 100.0000000%; }
}
@keyframes grow-cat {
  0% { background-position-x: 0.0000000%; }
  3.3755278% { background-position-x: 4.7619048%; }
  6.7510544% { background-position-x: 9.5238095%; }
  10.1265823% { background-position-x: 14.2857143%; }
  13.5021101% { background-position-x: 19.0476190%; }
  16.8776367% { background-position-x: 23.8095238%; }
  20.2531646% { background-position-x: 28.5714286%; }
  23.6286924% { background-position-x: 33.3333333%; }
  35.0210975% { background-position-x: 38.0952381%; }
  37.5527430% { background-position-x: 42.8571429%; }
  40.0843886% { background-position-x: 47.6190476%; }
  42.6160342% { background-position-x: 52.3809524%; }
  45.1476797% { background-position-x: 57.1428571%; }
  47.6793253% { background-position-x: 61.9047619%; }
  50.6329114% { background-position-x: 66.6666667%; }
  55.6962025% { background-position-x: 71.4285714%; }
  61.1814342% { background-position-x: 76.1904762%; }
  66.2447253% { background-position-x: 80.9523810%; }
  68.3544304% { background-position-x: 85.7142857%; }
  71.3080165% { background-position-x: 80.9523810%; }
  72.9957797% { background-position-x: 85.7142857%; }
  75.9493671% { background-position-x: 100.0000000%; }
  77.6371304% { background-position-x: 90.4761905%; }
  81.0126582% { background-position-x: 76.1904762%; }
  100% { background-position-x: 76.1904762%; }
}
@keyframes arf {
  0%, 69.5279% { transform: none; }
  70.3863% { transform: scale(1.14) rotate(-5deg); }
  72.1030%, 73.8197% { transform: none; }
  74.6781% { transform: scale(1.15) rotate(-4deg); }
  76.3949%, 78.1116% { transform: none; }
  78.9700% { transform: scale(1.2) rotate(5deg); }
  80.6867%, 100% { transform: none; }
}
@keyframes mew {
  0%, 77.6371% { transform: none; }
  79.3249% { transform: scale(1.06) rotate(-3deg); }
  81.0127%, 100% { transform: none; }
}
@keyframes age-dog {
  0% { transform: none; }
  3.4334769% { transform: translateY(-1.5em); }
  6.8669524% { transform: translateY(-3em); }
  10.3004293% { transform: translateY(-4.5em); }
  13.7339061% { transform: translateY(-6em); }
  17.1673817% { transform: translateY(-7.5em); }
  20.6008585% { transform: translateY(-9em); }
  24.0343354% { transform: translateY(-10.5em); }
  35.6223183% { transform: translateY(-12em); }
  38.1974256% { transform: translateY(-13.5em); }
  40.7725330% { transform: translateY(-15em); }
  43.3476403% { transform: translateY(-16.5em); }
  45.9227476% { transform: translateY(-18em); }
  48.4978549% { transform: translateY(-19.5em); }
  51.5021464% { transform: translateY(-21em); }
  56.6523610% { transform: translateY(-22.5em); }
  100% { transform: translateY(-22.5em); }
}
@keyframes age-cat {
  0% { transform: none; }
  3.3755278% { transform: translateY(-1.5em); }
  6.7510544% { transform: translateY(-3em); }
  10.1265823% { transform: translateY(-4.5em); }
  13.5021101% { transform: translateY(-6em); }
  16.8776367% { transform: translateY(-7.5em); }
  20.2531646% { transform: translateY(-9em); }
  23.6286924% { transform: translateY(-10.5em); }
  35.0210975% { transform: translateY(-12em); }
  37.5527430% { transform: translateY(-13.5em); }
  40.0843886% { transform: translateY(-15em); }
  42.6160342% { transform: translateY(-16.5em); }
  45.1476797% { transform: translateY(-18em); }
  47.6793253% { transform: translateY(-19.5em); }
  50.6329114% { transform: translateY(-21em); }
  55.6962025% { transform: translateY(-22.5em); }
  100% { transform: translateY(-22.5em); }
}
@keyframes br-age-fallback { to { transform: translateY(-22.5em); } }
/* 인쇄는 정지 사진(다 자란 모습)이 나오므로 나이도 마지막 줄, 말풍선은 제자리 */
@media print {
  .br-age-r { animation: none !important; transform: translateY(-22.5em) !important; }
  .br-bubble { animation: none !important; }
}
@keyframes br-fallback { to { opacity: 1; } }
@keyframes br-fallback-hide { to { opacity: 0; } }
/* BREEDS:auto:END */

/* HERO3 자동 생성(tools/build_hero_scene.py). 손으로 고치지 않는다. */
/* 기본값이 마지막 장면(정지판)이다: 왼쪽 비고, 보호자 무릎에 앞발 올린 말티푸와 손에 뺨을 비비는 고양이.
   모션 감소·JS 꺼짐·늦은 그림(app.js is-static)은 이 한 장만 본다. 움직일 때는 한 바퀴 6.82초를 끝없이 돈다
   (모든 층이 같은 길이·지연 0 이라 바퀴마다 맞물린다). */
.scene-box { overflow: clip; }
.hs { position: absolute; bottom: 0; width: 84.3750%; height: 100%; background-repeat: no-repeat; background-size: auto 100%; }
.hs-vet { left: 0; background-image: url("/assets/hero3/v1/vet.webp"); opacity: 0; }
.hs-world { position: absolute; inset: 0; transform-origin: 100% 100%; }
.hs-fam { right: 0; background-image: url("/assets/hero3/v1/family.webp"); background-position-x: 100%; }
.hs-go { position: absolute; bottom: 0; }
.hs-go-cat { left: 6.5891%; height: 68.9622%; aspect-ratio: 324 / 260; }
.hs-go-dog { left: 24.8372%; height: 60.1852%; aspect-ratio: 338 / 260; }
.hs-go .sprite { display: block; height: 100%; opacity: 0; background-repeat: no-repeat; background-size: auto 100%; }
.s-cat { background-image: url("/assets/hero2/cat-run.webp"); }
.s-dog { background-image: url("/assets/hero2/dog-run.webp"); }
@media (prefers-reduced-motion: no-preference) {
  .hs-vet { animation: hs-vet-f 6.815s infinite steps(1, end), hs-vet-o 6.815s infinite linear; }
  .hs-world { animation: hs-world 6.815s infinite linear; }
  .hs-fam { animation: hs-fam 6.815s infinite steps(1, end); }
  .hs-go-dog { animation: hs-dog 6.815s infinite linear; }
  .hs-go-cat { animation: hs-cat 6.815s infinite linear; }
  /* 달리기 칸 넘김은 지금 히어로 그대로(GAIT 블록) 늘 돌고, 보이는 구간만 바퀴에 맞춘다 */
  .s-dog { animation: run-dog 0.5833333s steps(1, end) -0.004s infinite, hs-on-dog 6.815s infinite steps(1, end); }
  .s-cat { animation: run-cat 0.8s steps(1, end) -0.004s infinite, hs-on-cat 6.815s infinite steps(1, end); }
  .js:not(.fonts-ready) .scene *, .js .scene:not(.is-ready) * { animation-play-state: paused; }
  .scene.is-static * { animation: none; }
}
@keyframes hs-vet-f { 0% { background-position-x: 0%; } 9.5378% { background-position-x: 100%; } 94.1306% { background-position-x: 0%; } 100% { background-position-x: 0%; } }
@keyframes hs-vet-o { 0%, 19.0756% { opacity: 1; } 22.7439%, 97.0653% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hs-world {
  0%, 19.0756% { opacity: 0; transform: scale(0.6); }
  22.7439% { opacity: 1; transform: scale(0.6); }
  56.7132% { opacity: 1; transform: scale(0.6); animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
  64.7836%, 94.1306% { opacity: 1; transform: none; }
  97.0653%, 100% { opacity: 0; transform: none; }
}
@keyframes hs-fam { 0% { background-position-x: 0%; } 32.2817% { background-position-x: 50%; } 55.9795%, 100% { background-position-x: 100%; } }
@keyframes hs-dog { 0%, 19.0756% { transform: translateX(-44.7337%); } 32.2817%, 100% { transform: none; } }
@keyframes hs-cat { 0%, 19.0756% { transform: translateX(-87.3266%); } 55.9795%, 100% { transform: none; } }
@keyframes hs-on-dog { 0% { opacity: 0; } 19.0756% { opacity: 1; } 32.2817%, 100% { opacity: 0; } }
@keyframes hs-on-cat { 0% { opacity: 0; } 19.0756% { opacity: 1; } 55.9795%, 100% { opacity: 0; } }
/* HERO3:END */