/* ==========================================================================
   EMZK 하위 페이지 디자인 시스템 — 메인 페이지의 색감·형태를 하위 페이지에 적용
   docs/plan/20260928-165500-subpage-redesign-home-look
   · 메인 `/`에는 이 파일을 싣지 않는다(Document.tsx). 메인 디자인은 home-search.css만 따른다.
   · style.css 뒤에 실려 같은 명시도의 규칙을 덮어쓴다. 기존 토큰 값은 바꾸지 않고 --ui-* 만 추가한다.
   ========================================================================== */

:root {
  --ui-surface: #FFFFFF;
  --ui-surface-soft: #F5FAF8;          /* 메인 바로가기 칸 */
  --ui-mint: #E4F5EC;                  /* 메인 산책 배너 */
  --ui-peach: #FCEBD8;                 /* 메인 간식 배너 */
  --ui-card-radius: var(--radius-lg);  /* 12px — 메인 카드 */
  --ui-panel-radius: var(--radius-xl); /* 20px — 메인 검색창 */
  --ui-pill: 999px;
  --ui-line: var(--line);
  --ui-hover-line: #D7E9E1;            /* 메인 바로가기 hover 테두리 */
  --ui-focus-ring: 0 0 0 3px rgba(8, 118, 107, 0.08);
  --ui-muted: #5F6B67;                 /* 흰·연한 면 위 작은 글자 4.5:1 이상 */
  --ui-error-ink: var(--coral-deep);
  --ui-error-soft: var(--coral-soft);
}
/* 하위 페이지는 색면 패널이 많아 style.css의 --muted(#65716D, 연한 색면 위 4.3:1)를 한 단계 진하게 쓴다.
   body[data-section]은 메인에 없으므로 메인 토큰 값은 그대로다. */
body[data-section] { --muted: var(--ui-muted); }

/* ---------- 섹션 포인트 색 (body[data-section]) ---------- */
body[data-section] { --ui-accent: var(--teal); --ui-accent-soft: var(--ui-mint); --ui-accent-ink: var(--teal-deep); --ui-accent-line: #CFE6DD; }
body[data-section="dogs"], body[data-section="walks"] { --ui-accent: var(--teal); --ui-accent-soft: var(--ui-mint); --ui-accent-ink: var(--teal-deep); --ui-accent-line: #C4E6D3; }
body[data-section="cats"], body[data-section="treats"] { --ui-accent: #D98A4E; --ui-accent-soft: var(--ui-peach); --ui-accent-ink: #8A4F1F; --ui-accent-line: #F2D2B0; }
body[data-section="health"] { --ui-accent: var(--teal); --ui-accent-soft: var(--teal-soft); --ui-accent-ink: var(--teal-deep); --ui-accent-line: #CBE3C8; }
body[data-section="nutrition"] { --ui-accent: #C9A23A; --ui-accent-soft: #FBF1D6; --ui-accent-ink: #6E5410; --ui-accent-line: #EEDDA8; }
body[data-section="small-pets"] { --ui-accent: #8FB35A; --ui-accent-soft: #EEF5DF; --ui-accent-ink: #45601C; --ui-accent-line: #D4E4B5; }
body[data-section="living"] { --ui-accent: #5E9CC2; --ui-accent-soft: #E3F0F7; --ui-accent-ink: #285673; --ui-accent-line: #BFDAEA; }
body[data-section="guides"], body[data-section="news"], body[data-section="stories"] { --ui-accent: #8C7BC4; --ui-accent-soft: #EEEAF7; --ui-accent-ink: #4A3F82; --ui-accent-line: #D5CDEE; }

/* ---------- 헤더: 현재 1단 밑줄을 섹션 색으로, 패널은 흰 면 + 둥근 아래 모서리 ---------- */
body[data-section] .site-header .brand { gap: 4px; }
body[data-section] .site-header .brand .paw-mark { width: 32px; }
body[data-section] .site-header .brand-wordmark { display: block; width: 54px; height: auto; flex: none; }
body[data-section] .menu-item.is-current > .menu-btn { color: var(--ui-accent-ink); box-shadow: inset 0 -2px 0 var(--ui-accent); }
body[data-section] .menu-panel { background: var(--ui-surface); border-radius: 0 0 var(--ui-panel-radius) var(--ui-panel-radius); }
body[data-section] .menu-sec-title { border-bottom-color: var(--ui-line); }

/* ---------- 히어로: 섹션 색면 패널 + 발바닥 장식 ---------- */
body[data-section] .hero { padding: var(--sp-6) var(--gutter) 0; }
body[data-section] .hero-inner {
  max-width: var(--content-w); padding: var(--sp-7) var(--sp-8) var(--sp-7);
  background: var(--ui-accent-soft); border-radius: var(--ui-panel-radius);
  overflow: hidden;
}
body[data-section] .hero .paw-trail {
  display: block; position: absolute; z-index: 1; pointer-events: none;
  top: calc(var(--sp-6) + 8px); right: max(calc(var(--gutter) + 8px), calc((100% - var(--content-w)) / 2 + 8px));
  width: 210px; height: auto; opacity: 0.55;
}
body[data-section] .hero-inner > * { position: relative; z-index: 2; }
body[data-section] .breadcrumb, body[data-section] .breadcrumb a { color: var(--ui-muted); }
body[data-section] .breadcrumb a:hover { color: var(--ui-accent-ink); }
body[data-section] .eyebrow { color: var(--ui-accent-ink); font-weight: 700; }
body[data-section] .eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); flex: none;
}
body[data-section] .hero h1 { font-weight: 780; letter-spacing: -0.05em; max-width: 34em; }
body[data-section] .hero h1 em { color: var(--ui-accent-ink); }
body[data-section] .hero .lede { color: var(--ink-2); max-width: 44em; }
body[data-section] .hero-meta > span.tag-chip + span.tag-chip::before { content: none; }
body[data-section] span.tag-chip {
  background: var(--ui-surface); border: 1px solid var(--ui-accent-line); border-radius: var(--ui-pill);
  padding: 3px var(--sp-2-5); color: var(--ink-2); font-weight: 600;
}
body[data-section] a.tag-chip { background: var(--ui-surface); border: 1px solid var(--ui-accent-line); color: var(--ui-accent-ink); }
body[data-section] a.tag-chip:hover { background: var(--ui-accent-soft); }

/* ---------- 본문 제목 ---------- */
body[data-section] .content h2 { font-weight: 760; letter-spacing: -0.04em; }
body[data-section] .content h3 { font-weight: 700; }

/* ---------- 목차 바: 알약 칩 ---------- */
body[data-section] .toc { background: rgba(250, 250, 247, 0.96); }
body[data-section] .toc a {
  border: 1px solid var(--ui-line); border-radius: var(--ui-pill); background: var(--ui-surface);
  padding: 5px var(--sp-3); color: var(--ink-2);
}
body[data-section] .toc a:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent-ink); }
body[data-section] .toc a.active { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent-ink); }
body[data-section] .toc a.active::before, body[data-section] .toc a::before { color: var(--ui-accent-ink); }

/* ---------- 요약·역할 안내 ---------- */
body[data-section] .summary {
  background: var(--ui-accent-soft); border-radius: var(--ui-panel-radius);
  padding: var(--sp-5) var(--sp-6);
}
body[data-section] .summary-label { color: var(--ui-accent-ink); display: flex; align-items: center; gap: var(--sp-2); }
body[data-section] .summary-label::before {
  content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ui-surface); color: var(--ui-accent-ink); font-size: 12px; font-weight: 800;
}
body[data-section] .content .summary li::marker { color: var(--ui-accent); }
body[data-section] .content .scope-note {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
  padding: var(--sp-3) var(--sp-4);
}

/* ---------- 정보 박스: 연한 색면 카드 ---------- */
body[data-section] .box {
  border-left: 0; border-radius: var(--ui-card-radius);
  padding: var(--sp-4) var(--sp-5); background: var(--ui-surface-soft);
}
body[data-section] .box .box-label svg { display: inline-block; width: 16px; height: 16px; flex: none; }
body[data-section] .box.tip { background: var(--ui-mint); }
body[data-section] .box.tip .box-label { color: var(--teal-deep); }
body[data-section] .box.note { background: var(--ui-surface-soft); border: 1px solid var(--ui-line); }
body[data-section] .box.note .box-label { color: var(--ink-2); }
body[data-section] .box.warn { background: var(--ui-peach); }
body[data-section] .box.warn .box-label { color: #8A4F1F; }
body[data-section] .box.danger { background: var(--coral-soft); box-shadow: inset 4px 0 0 var(--coral); padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 4px); }

/* ---------- 표·요약 수치 ---------- */
body[data-section] .table-wrap {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
  overflow-x: auto;
}
body[data-section] .content th { background: var(--ui-surface-soft); padding: var(--sp-2-5) var(--sp-3); border-bottom: 1px solid var(--ui-line); }
body[data-section] .content td { padding: var(--sp-2-5) var(--sp-3); }
body[data-section] .content tr:last-child td { border-bottom: 0; }
body[data-section] .facts { gap: var(--sp-2-5); }
body[data-section] .facts .fact {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
  padding: var(--sp-3) var(--sp-3-5);
}
body[data-section] .facts .fact dt { color: var(--ui-muted); }

/* ---------- 체크리스트·단계 ---------- */
body[data-section] .content .checklist li::before { border-color: var(--ui-accent); border-radius: 6px; }
body[data-section] .content .checklist li::after { border-color: var(--ui-accent-ink); }
body[data-section] .content .steps li::before { background: var(--ui-accent-soft); color: var(--ui-accent-ink); box-shadow: inset 0 0 0 1px var(--ui-accent-line); }

/* ---------- 다음 단계: 섹션 색면 + 알약 버튼 ---------- */
body[data-section] .next-step {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-5); align-items: center;
  background: var(--ui-accent-soft); border: 0; border-radius: var(--ui-panel-radius);
  padding: var(--sp-5) var(--sp-6);
}
body[data-section] .next-step > * { grid-column: 1; }
body[data-section] .next-step::after {
  content: "이어서 보기 →"; grid-column: 2; grid-row: 1 / span 3;
  padding: 8px 14px; border-radius: var(--ui-pill); background: var(--ui-surface);
  font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 750; color: var(--ui-accent-ink); white-space: nowrap;
}
body[data-section] .next-step:hover::after { background: var(--ui-accent-ink); color: #fff; }
body[data-section] .next-step-label { color: var(--ui-accent-ink); }
body[data-section] .next-step-title { font-weight: 760; letter-spacing: -0.03em; }
body[data-section] .next-step-title::after { content: none; }
body[data-section] .next-step-desc { color: var(--ink-2); }

/* ---------- 관련 글: 흰 패널 목록 ---------- */
body[data-section] .related {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-panel-radius);
  padding: var(--sp-5) var(--sp-6) var(--sp-3); margin-top: var(--sp-10);
}
body[data-section] .related h2 { color: var(--ink) !important; font-size: var(--fs-sm) !important; font-weight: 750 !important; }
body[data-section] .related ul { gap: 0; }
body[data-section] .related li + li { border-top: 1px solid var(--ui-line); }
body[data-section] .related a { padding: var(--sp-2-5) 0; color: var(--ink); font-weight: 600; justify-content: space-between; }
body[data-section] .related a::after { content: "›"; color: var(--ui-accent-ink); font-weight: 700; }
body[data-section] .related a:hover { color: var(--ui-accent-ink); text-decoration: none; }

/* ---------- 허브: 주제 칩·중분류·카드 ---------- */
body[data-section] .hub-subnav { border-bottom: 0; padding-bottom: 0; }
body[data-section] .hub-subnav a { border-color: var(--ui-line); background: var(--ui-surface); }
body[data-section] .hub-subnav a:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent-ink); }
body[data-section] .content .hub-group-title { border-left: 4px solid var(--ui-accent); border-radius: 2px; }
body[data-section] .content .hub-guides a {
  background: var(--ui-surface); border: 1px solid var(--ui-line); color: var(--ui-accent-ink);
  padding: 3px var(--sp-2-5);
}
body[data-section] .content .hub-guides a:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); }
body[data-section] .card-grid { gap: var(--sp-3); }
body[data-section] .card {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-0-5);
  align-content: start;
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
  padding: var(--sp-4) var(--sp-4-5); transition: border-color 0.15s, background 0.15s;
}
body[data-section] .card:hover { border-color: var(--ui-hover-line); background: var(--ui-surface-soft); }
body[data-section] .card .card-icon {
  display: block; grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; padding: 9px;
  border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent-ink);
}
body[data-section] .card :is(h3, h4), body[data-section] .card p { grid-column: 2; }
body[data-section] .card :is(h3, h4) { font-weight: 750; letter-spacing: -0.03em; }
body[data-section] .card:hover :is(h3, h4) { color: var(--ui-accent-ink); }
body[data-section] .card p { color: var(--ui-muted); }
body[data-section="dogs"] .breed-comparison-table th:first-child > a,
body[data-section="cats"] .breed-comparison-table th:first-child > a {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1);
}
body[data-section="dogs"] .breed-comparison-table .breed-image-table,
body[data-section="cats"] .breed-comparison-table .breed-image-table {
  display: block; flex: none; width: 80px; height: 60px; object-fit: contain; border-radius: var(--radius-sm);
}
/* 품종 상세 상단: 사진과 6개 균등 카드의 높이를 맞추고 설명은 아래로 모은다. */
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > h2.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .breed-image-detail {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ui-card-radius);
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .breed-image-detail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  min-width: 0;
  margin: 0;
  max-width: none;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  overflow: hidden;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts > .fact {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: var(--sp-2-5) var(--sp-3);
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts > .fact dt {
  font-size: var(--fs-sm);
  font-weight: 600;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts > .fact dd {
  font-size: var(--fs-sm);
  font-weight: 400;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .table-wrap {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > p,
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .box {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
}
:is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) + .summary {
  margin-top: var(--sp-4);
}
body[data-section="dogs"] .breed-image-detail figcaption,
body[data-section="cats"] .breed-image-detail figcaption { margin-top: var(--sp-2); color: var(--ui-muted); font-size: var(--fs-sm); }
@media (max-width: 720px) {
  :is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .breed-image-detail {
    grid-column: 1;
    grid-row: auto;
  }
  :is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts {
    grid-column: 1;
    grid-row: auto;
  }
  :is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts > .fact {
    padding: var(--sp-2) var(--sp-2-5);
  }
  :is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts > .fact dt {
    font-size: var(--fs-sm);
  }
  :is(body[data-section="dogs"], body[data-section="cats"]) .content section#sec-1:has(> .breed-image-detail) > .facts > .fact dd {
    font-size: var(--fs-xs);
  }
}
/* 가이드 허브 단계 번호: 동그란 배지 */
body[data-section] .content h2[data-step] { display: flex; align-items: center; gap: var(--sp-2-5); }
body[data-section] .content h2[data-step]::before {
  content: attr(data-step); display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%; background: var(--ui-accent-soft); color: var(--ui-accent-ink);
  font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0;
}

/* ---------- 업장 ---------- */
body[data-section] .place-tabs { border-bottom: 0; gap: var(--sp-2); }
body[data-section] .place-tab {
  border: 1px solid var(--ui-line); border-radius: var(--ui-pill); background: var(--ui-surface);
  padding: 6px var(--sp-3-5); margin-bottom: 0; color: var(--ink-2);
  min-height: 44px; display: inline-flex; align-items: center; max-width: 100%;
}
body[data-section] .place-tab:hover { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
body[data-section="places"] [data-place-search-live] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
body[data-section] .place-tab.active, body[data-section] .place-tab.active:hover { background: var(--ui-accent-ink); border-color: var(--ui-accent-ink); color: #fff; }
body[data-section] .region-grid { gap: var(--sp-2); }
body[data-section] .region-card {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
  padding: var(--sp-2-5) var(--sp-3-5);
}
body[data-section] .region-card:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); }
body[data-section] .biz-list { gap: var(--sp-2); }
body[data-section] .biz-list .biz-card, body[data-section] .biz-list .biz-card:first-child {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
  padding: var(--sp-3-5) var(--sp-4);
}
body[data-section] .biz-card.is-map-linked:hover { border-color: var(--ui-hover-line); background: var(--ui-surface-soft); }
body[data-section] .biz-map, body[data-section] .korea-map, body[data-section] .sigungu-map:not(.biz-map) { border-radius: var(--ui-card-radius); }
/* 본토에서 먼 섬 삽입도(src/places/map.tsx balancedLayout) — 실제 위치가 아님을 점선 상자로 구분한다 */
body[data-section] .sigungu-map .map-inset { fill: none; stroke: var(--ui-line, #D8DED9); stroke-width: 1; stroke-dasharray: 3 3; }
body[data-section] .sigungu-map .map-inset-land { fill: #DCE4DF; pointer-events: none; }
body[data-section] .biz-map.leaflet-container { border: 1px solid var(--ui-line); }
body[data-section] .biz-more { border-radius: var(--ui-pill); }
body[data-section] .search-box { border-radius: var(--ui-panel-radius); padding: 5px 5px 5px var(--sp-1); }
body[data-section] .search-btn { border-radius: var(--ui-pill); background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
body[data-section] .search-btn:hover { background: var(--ui-accent-line); }
body[data-section] :is(.search-btn, .search-reset) {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  font-family: var(--font-util); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--ui-pill); cursor: pointer;
}
body[data-section] .search-reset {
  color: var(--ui-muted); background: var(--ui-surface); border-color: var(--ui-line);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body[data-section] .search-reset:hover { color: var(--ui-accent-ink); background: var(--ui-surface-soft); border-color: var(--ui-accent-line); }
body[data-section] :is(.search-btn, .search-reset):focus-visible {
  outline: 2px solid var(--ui-accent); outline-offset: 2px;
}

/* ---------- 사이트맵 ---------- */
body[data-section] .sitemap-jump { border-bottom: 0; gap: var(--sp-2); padding-bottom: 0; }
body[data-section] .sitemap-jump a {
  border: 1px solid var(--ui-line); border-radius: var(--ui-pill); background: var(--ui-surface);
  padding: 5px var(--sp-3-5); color: var(--ui-accent-ink);
}
body[data-section] .sitemap-jump a:hover { background: var(--ui-accent-soft); text-decoration: none; }
body[data-section="sitemap"] .content section > h2 { display: flex; align-items: center; gap: var(--sp-2-5); }
body[data-section="sitemap"] .content section > h2::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--ui-accent); }

/* ---------- 푸터: 연한 면 + 둥근 위 모서리 ---------- */
body[data-section] .layout { padding-bottom: 50px; }
body[data-section] .site-footer {
  background: var(--ui-surface-soft); border-top: 1px solid var(--ui-line);
  border-radius: var(--ui-panel-radius) var(--ui-panel-radius) 0 0;
  margin-top: 0;
}
body[data-section] .footer-nav ul { gap: var(--sp-0-5) var(--sp-1); }
body[data-section] .footer-nav a { padding: 4px 8px; border-radius: var(--ui-pill); color: var(--ui-muted); }
body[data-section] .footer-nav a:hover { background: var(--ui-surface); color: var(--teal-deep); text-decoration: none; }
body[data-section] .footer-bottom { color: var(--ui-muted); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 720px) {
  body[data-section] .layout { padding-bottom: 25px; }
  body[data-section] .hero { padding: var(--sp-3) var(--gutter-sm) 0; }
  body[data-section] .hero-inner { padding: var(--sp-4) var(--sp-4) var(--sp-5); border-radius: var(--ui-card-radius); }
  body[data-section] .hero .paw-trail { display: none; }
  body[data-section] .summary, body[data-section] .next-step, body[data-section] .related { border-radius: var(--ui-card-radius); padding: var(--sp-4); }
  body[data-section] .next-step { grid-template-columns: 1fr; row-gap: var(--sp-1); }
  body[data-section] .next-step::after { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-2); }
  body[data-section] .site-footer { border-radius: var(--ui-card-radius) var(--ui-card-radius) 0 0; }
  /* 알약형 버튼·칩은 모바일에서 탭 영역 44px */
  body[data-section] .toc a, body[data-section] .hub-subnav a, body[data-section] .sitemap-jump a,
  body[data-section] .search-tabs > button { min-height: 44px; display: inline-flex; align-items: center; gap: 0.3em; }
  body[data-section] .search-box { padding: 3px 3px 3px var(--sp-1); }
  body[data-section] :is(.search-btn, .search-reset) { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  /* 하위 페이지 전체에서 전환·움직임 효과를 끈다(메인은 이 파일을 싣지 않음) */
  body[data-section] *, body[data-section] *::before, body[data-section] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* 바로 가기 1단 메뉴(소식 → /stories/)는 <a class="menu-btn"> — 버튼과 같게 밑줄 없이, 줄 높이도 버튼(normal)과 같게 */
body[data-section] a.menu-btn, body[data-section] a.menu-btn:hover { text-decoration: none; line-height: normal; }

/* ---------- /search 결과 화면 보조(종 좁히기·메타 칩·중복 의심·안내) ----------
   모양은 search-results.css를 건드리지 않고 body[data-section="search"] 범위에서만
   추가한다. 색·간격은 기존 --ui-*·--teal 계열 토큰만 사용한다. */
body[data-section="search"] .search-species { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0 var(--sp-1-5); }
body[data-section="search"] .search-species[hidden] { display: none; }
body[data-section="search"] .search-species-label { font-family: var(--font-util); font-size: var(--fs-sm); font-weight: 600; color: var(--ui-accent-ink); }
body[data-section="search"] .search-species-opts { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
body[data-section="search"] .search-species-opts > button {
  font-family: var(--font-util); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ink-2); background: var(--ui-surface);
  border: 1px solid var(--ui-line); border-radius: var(--ui-pill);
  padding: 4px var(--sp-2-5); min-height: 40px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body[data-section="search"] .search-species-opts > button:hover { border-color: var(--ui-accent); color: var(--ui-accent-ink); }
body[data-section="search"] .search-species-opts > button[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-ink); font-weight: 700; }
body[data-section="search"] .search-species-opts > button:focus-visible { outline: 2px solid var(--ui-accent-ink); outline-offset: 2px; }

/* 카드 메타 행 — 종·유형 칩과 수정일은 발췌문보다 작고 옅게 */
body[data-section="search"] .search-item-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: var(--sp-1) 0 0; }
body[data-section="search"] .search-item-chip {
  font-family: var(--font-util); font-size: var(--fs-xs); font-weight: 600;
  color: var(--ui-accent-ink); background: var(--ui-accent-soft);
  border-radius: var(--ui-pill); padding: 1px var(--sp-2); line-height: 1.7;
}
body[data-section="search"] .search-item-chip-unclass { color: var(--ui-muted); background: var(--ui-surface-soft); }
body[data-section="search"] .search-item-date { font-family: var(--font-util); font-size: var(--fs-xs); color: var(--ui-muted); }
body[data-section="search"] .search-item-snippet mark { background: var(--ui-accent-soft); color: var(--ui-accent-ink); border-radius: 3px; padding: 0 1px; }
body[data-section="search"] .search-item-sections { font-family: var(--font-util); font-size: var(--fs-xs); margin: var(--sp-1) 0 0; }
body[data-section="search"] .search-item-sections a { color: var(--ui-accent-ink); font-weight: 600; }
body[data-section="search"] .search-item-sections a::before { content: "§ "; color: var(--ui-muted); }

/* 업장 한계·현재 영업 안내 — 카드 위에 두되 한 줄 안내로 눌러 읽는다 */
body[data-section="search"] .search-hours-note { background: var(--ui-surface-soft); border-left: 3px solid var(--ui-accent-line); border-radius: 4px; padding: var(--sp-2) var(--sp-3); }
body[data-section="search"] .search-hours-note[hidden], body[data-section="search"] .search-opennow[hidden] { display: none; }
body[data-section="search"] .search-opennow { margin-top: var(--sp-2); }
body[data-section="search"] .search-opennow-link { font-weight: 700; color: var(--ui-accent-ink); }

/* 접는 검색 도움말 — 눌러서 펼치는 pill. 열려 있을 때만 본문 상자를 단다 */
body[data-section="search"] .search-hint { margin: var(--sp-1-5) 0 0; }
body[data-section="search"] .search-hint > summary {
  display: inline-flex; align-items: center; gap: var(--sp-1-5); cursor: pointer;
  font-family: var(--font-util); font-size: var(--fs-xs); font-weight: 600; color: var(--ui-muted);
  border: 1px solid var(--ui-line); border-radius: var(--ui-pill); padding: 3px var(--sp-2-5);
  list-style: none;
}
body[data-section="search"] .search-hint > summary::-webkit-details-marker { display: none; }
body[data-section="search"] .search-hint > summary::before { content: "?"; font-weight: 700; color: var(--ui-accent-ink); }
body[data-section="search"] .search-hint > summary:hover { color: var(--ui-accent-ink); border-color: var(--ui-accent-line); }
body[data-section="search"] .search-hint > summary:focus-visible { outline: 2px solid var(--ui-accent-ink); outline-offset: 2px; }
body[data-section="search"] .search-hint > p { font-size: var(--fs-xs); color: var(--ui-muted); margin: var(--sp-1-5) 0 0; }

/* 확장으로 찾은 카드 표시 — 점선 칩으로 exact 결과와 구분한다 */
body[data-section="search"] .search-item-chip-exp { color: var(--ui-muted); background: var(--ui-surface-soft); border: 1px dashed var(--ui-line); }

/* 첫 화면에 실제 결과가 먼저 오게 검색 화면의 세로 간격을 줄인다(모양만) */
@media (max-width: 720px) {
  body[data-section="search"] .search-form { margin-bottom: var(--sp-2); }
  body[data-section="search"] .search-tabs { margin-bottom: var(--sp-2); }
  body[data-section="search"] .search-type h2 { font-size: var(--fs-lg); }
  body[data-section="search"] .search-hours-note { padding: var(--sp-1-5) var(--sp-2-5); font-size: var(--fs-xs); }
  body[data-section="search"] .search-type-note { font-size: var(--fs-xs); }
}

/* 섹션 바로가기·스니펫 안 링크는 카드 전체 클릭 영역(.search-item-title::after 오버레이) 위에 둔다 */
body[data-section="search"] .search-item-sections a, body[data-section="search"] .search-item-snippet a { position: relative; z-index: 1; }

/* 중복 의심 배지 — 경고가 아니라 기록 수준의 회색 안내(같은 업체 확정이 아님) */
body[data-section="search"] .search-dup-badge {
  font-family: var(--font-util); font-size: var(--fs-xs); color: var(--ui-muted);
  background: var(--ui-surface-soft); border: 1px dashed var(--ui-line);
  border-radius: 4px; padding: var(--sp-1-5) var(--sp-2-5); margin: var(--sp-1-5) 0 0;
}
body[data-section="search"] .search-item[data-dup-suspect] { border-color: var(--ui-accent-line); }

@media (max-width: 720px) {
  body[data-section="search"] .search-species-opts > button { min-height: 44px; }
}

/* ---------- 실용 도구: 기존 종이·색면 위의 입력과 확인 기록 ---------- */
body[data-section] .practical-tool,
body[data-section] .feeding-formula {
  min-width: 0; margin: var(--sp-5) 0; padding: var(--sp-5);
  background: var(--ui-surface); border: 1px solid var(--ui-accent-line); border-radius: var(--ui-card-radius);
}
body[data-section] .feeding-formula > p + p { margin-top: var(--sp-3); }
body[data-section] .formula-example {
  padding: var(--sp-3) var(--sp-4); background: var(--ui-accent-soft);
  border-radius: var(--ui-card-radius); font-variant-numeric: tabular-nums;
}
body[data-section] .tool-fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4);
}
body[data-section] .tool-field { display: flex; flex-direction: column; min-width: 0; gap: var(--sp-1-5); }
body[data-section] .tool-field > label,
body[data-section] .practical-tool legend { font-weight: 700; color: var(--ui-accent-ink); }
body[data-section] .practical-tool fieldset {
  min-width: 0; padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0;
  border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
}
body[data-section] .practical-tool legend { padding: 0 var(--sp-1-5); }
body[data-section] .practical-tool input:not([type="checkbox"]):not([type="radio"]),
body[data-section] .practical-tool select,
body[data-section] .practical-tool textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: var(--sp-2-5) var(--sp-3);
  font: inherit; font-size: var(--fs-md); line-height: 1.5;
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-card-radius);
}
body[data-section] .practical-tool textarea { min-height: 144px; resize: vertical; }
body[data-section] .practical-tool textarea[readonly] { background: var(--ui-surface-soft); }
body[data-section] .practical-tool input:focus-visible,
body[data-section] .practical-tool select:focus-visible,
body[data-section] .practical-tool textarea:focus-visible {
  border-color: var(--ui-accent-ink); outline: 2px solid var(--ui-accent-ink);
  outline-offset: 2px; box-shadow: var(--ui-focus-ring);
}
body[data-section] .practical-tool [aria-invalid="true"] { border-color: var(--ui-error-ink); }
body[data-section] .practical-tool input[type="checkbox"],
body[data-section] .practical-tool input[type="radio"] {
  width: 20px; height: 20px; flex: none; accent-color: var(--ui-accent-ink);
}
body[data-section] .species-toggle label,
body[data-section] .practical-tool label:has(> input[type="radio"]) {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin-right: var(--sp-4);
}
body[data-section] .tool-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
body[data-section] .tool-actions button,
body[data-section] .lookup-option {
  min-height: 44px; padding: var(--sp-2) var(--sp-4); font: inherit; font-weight: 700;
  color: var(--ui-accent-ink); background: var(--ui-surface);
  border: 1px solid var(--ui-accent-line); border-radius: var(--ui-pill); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
body[data-section] .tool-actions button:hover,
body[data-section] .lookup-option:hover { background: var(--ui-accent-soft); border-color: var(--ui-accent-ink); }
body[data-section] .tool-actions button:focus-visible,
body[data-section] .lookup-option:focus-visible { outline: 2px solid var(--ui-accent-ink); outline-offset: 2px; }
body[data-section] .tool-actions button:disabled { color: var(--ui-muted); cursor: not-allowed; border-color: var(--ui-line); }
body[data-section] .tool-result,
body[data-section] .tool-error,
body[data-section] .tool-note {
  margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--ui-card-radius);
}
body[data-section] .tool-result { background: var(--ui-accent-soft); }
body[data-section] .tool-error { color: var(--ui-error-ink); background: var(--ui-error-soft); }
body[data-section] .tool-note { background: var(--ui-surface-soft); }
/* Keep empty live regions available to announce later content without an empty status bar. */
body[data-section] .practical-tool .tool-error:empty,
body[data-section] .practical-tool .tool-result:empty {
  margin: 0; padding: 0; border: 0; background: none;
}
body[data-section] .tool-hint,
body[data-section] .result-detail { color: var(--ui-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
body[data-section] .result-main { color: var(--ui-accent-ink); font-size: var(--fs-lg); font-weight: 750; font-variant-numeric: tabular-nums; }
body[data-section] .content .tool-checklist { list-style: none; padding: 0; margin: var(--sp-3) 0; }
body[data-section] .content .tool-checklist li { margin: 0; padding: 0; border-bottom: 1px solid var(--ui-line); }
body[data-section] .content .tool-checklist li:last-child { border-bottom: 0; }
body[data-section] .tool-checklist label { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 44px; padding: var(--sp-3) 0; cursor: pointer; }
body[data-section] .tool-checklist input { margin-top: var(--sp-0-5); }
body[data-section] .tool-checklist label:has(input:checked) { color: var(--ui-accent-ink); }
body[data-section] [data-checklist-progress] { font-size: var(--fs-sm); font-weight: 700; color: var(--ui-accent-ink); }
body[data-section] .lookup-card { padding: var(--sp-4) 0; border-bottom: 1px solid var(--ui-accent-line); }
body[data-section] .lookup-card:last-child { border-bottom: 0; }
body[data-section] .lookup-status { font-size: var(--fs-sm); font-weight: 750; color: var(--ui-accent-ink); }
body[data-section] .lookup-status.status-avoid { color: var(--ui-error-ink); }
body[data-section] .lookup-status.status-unknown,
body[data-section] .lookup-source,
body[data-section] .lookup-empty { color: var(--ui-muted); }
body[data-section] .lookup-source { font-size: var(--fs-sm); overflow-wrap: anywhere; }
body[data-section] .lookup-ambiguous { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
body[data-section] .practical-tool [hidden],
body[data-section] .tool-result[hidden],
body[data-section] .tool-error[hidden],
body[data-section] .lookup-card[hidden] { display: none; }

@media (max-width: 560px) {
  body[data-section] .tool-fields { grid-template-columns: minmax(0, 1fr); }
  body[data-section] .practical-tool,
  body[data-section] .feeding-formula { padding: var(--sp-4); }
}
@media print {
  body[data-section] .tool-actions { display: none; }
  body[data-section] .practical-tool { break-inside: avoid; }
}

/* 품종 찾기·독립 비교: 기존 전역 토큰을 건드리지 않는 컴팩트 UI */
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-browser,
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selected-comparison { margin: 12px 0 20px; }
:is(body[data-section="dogs"],body[data-section="cats"]) :is(.breed-browser,.breed-selected-comparison) [hidden],
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card[hidden] { display: none !important; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-tools {
  display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: end;
  background: var(--ui-surface); border: 1px solid var(--ui-line);
  border-radius: 6px; padding: 12px; margin: 0 0 10px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-tools label,
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-picker-fields label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.4;
  font-weight: 600; color: var(--ui-muted); margin: 0;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-tool-search { flex: 2 1 220px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-tool-search label { display:block; margin:0 0 4px; }
:is(body[data-section="dogs"],body[data-section="cats"]) :is(.breed-tools,.breed-picker-fields) input,
:is(body[data-section="dogs"],body[data-section="cats"]) :is(.breed-tools,.breed-picker-fields) select {
  display: block; width: 100%; height: 38px; min-width: 90px;
  border: 1px solid var(--ui-line); border-radius: 4px; background: var(--ui-surface);
  color: var(--ink); padding: 6px 9px; font: inherit; font-size: 13px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) :is(.breed-tools,.breed-picker-fields) input:focus-visible,
:is(body[data-section="dogs"],body[data-section="cats"]) :is(.breed-tools,.breed-picker-fields) select:focus-visible,
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-browser :is(a,button):focus-visible,
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selected-comparison :is(a,button):focus-visible {
  outline: 2px solid var(--ui-accent-ink); outline-offset: 2px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-reset {
  border: 0; border-radius: 4px; background: transparent;
  color: var(--ui-accent-ink); padding: 8px 7px; min-height: 38px;
  font-size: 12px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-reset:hover { text-decoration: underline; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-result-count {
  margin: 6px 0 10px; font-size: 12px; font-weight: 650; color: var(--ui-muted);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-grid {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card {
  display: flex; position: relative; align-items: center; min-width: 0; min-height: 0;
  gap: 7px; padding: 11px 12px; border: 1px solid var(--ui-line);
  border-radius: 6px; background: var(--ui-surface);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card:hover {
  border-color: var(--ui-accent-line); background: var(--ui-surface-soft);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-link {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1;
  text-decoration: none; color: var(--ink);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-link:hover { text-decoration: none; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-thumb {
  display: block; width: 64px; height: 64px; aspect-ratio: 1;
  flex: none; object-fit: contain; border-radius: 4px;
  background: var(--ui-surface-soft);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-content {
  min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-name {
  color: var(--ink); font-size: 14px; line-height: 1.4; font-weight: 720;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-link:hover .breed-card-name { color: var(--ui-accent-ink); text-decoration: underline; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-meta {
  font-size: 12px; line-height: 1.5; color: var(--ui-accent-ink); overflow-wrap: anywhere;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-description {
  font-size: 12px; line-height: 1.5; color: var(--ui-muted);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-add {
  border: 1px solid var(--ui-accent-line); background: #fff; color: var(--ui-accent-ink);
  border-radius: 4px; padding: 6px 8px; min-height: 34px; min-width: 66px;
  font-size: 12px; line-height: 1.3; white-space: nowrap; cursor: pointer;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-add[aria-pressed="true"] {
  background: var(--ui-accent-soft); border-color: var(--ui-accent);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-add:disabled { opacity: .4; cursor: not-allowed; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-empty { color: var(--ui-muted); font-size: 13px; padding: 16px 2px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selection {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  border-top: 1px solid var(--ui-line); padding: 10px 0; margin: 12px 0 0;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selection-info { flex: 1; min-width: 180px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selection-info strong { font-size: 13px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selection-chips { display:flex; gap:5px; flex-wrap:wrap; margin: 5px 0; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selected-chip {
  font-size: 12px; border: 1px solid var(--ui-line); border-radius: 4px;
  background: var(--ui-surface-soft); color: var(--ink);
  padding: 6px 8px; cursor:pointer;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selection-hint { display:block; color: var(--ui-muted); font-size: 12px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-compare-go {
  background: var(--ui-accent-ink); color:#fff; padding: 9px 12px;
  border-radius: 4px; font-size: 13px; font-weight: 650; text-decoration: none;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-compare-go[aria-disabled="true"] { opacity:.5; pointer-events:none; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-link-line { margin: 12px 0; font-size: 13px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-link-line a { color: var(--ui-accent-ink); font-weight: 650; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-picker { border:1px solid var(--ui-line); border-radius:6px; padding:12px; margin:8px 0 16px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-picker-lede { font-size:13px; color:var(--ui-muted); margin:0 0 10px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-picker-fields { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selected-results { margin: 10px 0 16px; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-selected-table-wrap { overflow-x:auto; }
:is(body[data-section="dogs"],body[data-section="cats"]) :is(.breed-selected-table,.breed-compact-table) { width:100%; border-collapse:collapse; table-layout:auto; font-size: 12px; }
:is(body[data-section="dogs"],body[data-section="cats"]) :is(.breed-selected-table,.breed-compact-table) caption {
  caption-side:top; text-align:left; padding:8px 0; font-size:12px; font-weight:650; color:var(--ui-muted);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .content :is(.breed-selected-table,.breed-compact-table) :is(th,td) {
  padding: 9px 10px; vertical-align: top; border-bottom: 1px solid var(--ui-line);
  background:transparent; text-align:left; overflow-wrap:anywhere; line-height:1.55;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .content .breed-selected-table thead th {
  background:var(--ui-surface-soft); font-weight:720; color:var(--ink); text-align:center;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .content .breed-selected-table tbody td {
  text-align:center;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .content .breed-selected-table tbody tr:last-child td {
  border-bottom:1px solid var(--ui-line);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-table-wrap {
  max-width:100%; overflow-x:auto; margin:10px 0 20px; outline-offset:2px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-compact-table {
  min-width:780px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-compact-table th:first-child {
  min-width:106px; width:16%; position:sticky; left:0; background:var(--ui-surface); z-index:1;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-compact-table thead th:first-child { background:var(--ui-surface-soft); z-index:2; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-compact-table a { color:var(--ui-accent-ink); font-weight:650; }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-general-note,
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-picker-instruction { font-size:13px; color:var(--ui-muted); }
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-mobile-compare { display:none; }
@media (max-width: 767px) {
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-grid { grid-template-columns:1fr; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-tools { padding:10px; gap:8px; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-tool-search { flex-basis:100%; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-add { min-height:44px; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-picker-fields { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-selected-table-wrap { display:none; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-mobile-compare { display:block; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-mobile-comparison-group { border-top:1px solid var(--ui-line); padding:9px 0; margin:0; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-mobile-comparison-group h3 { margin:0 0 8px; font-size:14px; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-mobile-comparison-group dl { margin:0; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-mobile-comparison-group dt { font-size:12px; color:var(--ui-accent-ink); margin:6px 0 2px; text-align:center; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-mobile-comparison-group dd { margin:0; font-size:13px; text-align:center; }
}
@media (max-width: 380px) {
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-card { padding:9px; flex-wrap:wrap; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-card-thumb { width:56px; height:56px; }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-add { margin-left:auto; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-card { transition:none; }
}


/* ── 2026-10-08: 하위 페이지 공통 슬림 컨트롤 ───────────────────────────
 * 메인(/)은 ui.css를 불러오지 않고 data-section도 없으므로 영향 없음.
 * 버튼/버튼형 링크/필터의 시각 면적을 줄이되 접근성 포커스와 터치 영역은 유지한다.
 * 카드·의학 안내·본문 패널의 radius/여백은 이 정책에 포함하지 않는다.
 */
body[data-section] {
  --ui-button-radius: 2px;
  --ui-button-min-height: 32px;
  --ui-button-padding-x: 9px;
  --ui-button-padding-y: 4px;
  --ui-pill: 2px;                  /* 기존 하위 페이지의 pill형 내비/필터 */
  --radius-pill: 2px;              /* style.css 상속 변수, 홈에는 영향 없음 */
  --radius-control: 2px;           /* 기본 메뉴·검색 컨트롤 */
}

/* 전체 버튼과 실제 버튼처럼 보이는 링크. 페이지별 CSS가 ui.css보다
   늦게 실려도 최대 2px를 지키도록 radius 속성만 강제한다. */
body[data-section] :is(
  button,
  input[type="button"], input[type="submit"], input[type="reset"],
  [role="button"],
  a.tag-chip, .tag-chip, .od-chip, .search-biz-cat, .biz-dist,
  .menu-btn, .header-search, .nav-nojs, .nav-toggle,
  .toc a, .hub-subnav a, .content .hub-guides a,
  .sitemap-jump a, .footer-nav a, .place-tab,
  .biz-more, .search-btn, .search-extra-summary,
  .lookup-option, .next-step, .od-banner-cta, a.od-extlink,
  .breed-compare-go, .breed-selected-chip,
  .leaflet-bar a, .leaflet-control-layers-toggle
) {
  border-radius: var(--ui-button-radius) !important;
}
body[data-section] .next-step::after {
  border-radius: var(--ui-button-radius);
  padding: 4px 7px;
}
/* 버튼과 한 줄에 배치되는 검색 입력·선택 박스도 같은 각도로 통일. */
body[data-section] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select, textarea, .search-box
) {
  border-radius: var(--ui-button-radius);
}

/* 1뎁스 메뉴·문서 목차·허브/사이트맵/업종 탭의 링크형 버튼 */
body[data-section] :is(
  .menu-btn, .header-search, .toc a, .hub-subnav a,
  .content .hub-guides a, .sitemap-jump a, .place-tab
) {
  min-height: 30px;
  padding: 4px 8px;
  line-height: 1.4;
}
body[data-section] .footer-nav a { min-height: 28px; padding: 3px 6px; }
body[data-section] a.tag-chip { padding: 2px 7px; line-height: 1.4; }

/* 라벨이 들어 있는 실제 버튼·필터·CTA:
   데스크톱은 32px 안팎, 9px 좌우 패딩으로 반복되는 시각 노이즈 축소. */
body[data-section] :is(
  .biz-more, .search-btn, .search-reset, .search-tabs > button,
  .search-radius-opts > button, .search-species-opts > button,
  .od-region-chips button, .od-filter-opts button, .od-filter-opts select,
  .content a.od-extlink, .tool-actions button, .lookup-option,
  .breed-add, .breed-reset, .breed-selected-chip, .breed-compare-go
) {
  box-sizing: border-box;
  min-height: var(--ui-button-min-height);
  padding: var(--ui-button-padding-y) var(--ui-button-padding-x);
  font-size: 13px;
  line-height: 1.35;
}
body[data-section] .od-filter-opts select {
  padding-right: 24px; /* 네이티브 select 화살표 공간 보존 */
}
body[data-section] .breed-reset { padding-inline: 6px; }
body[data-section] .search-extra-summary { padding-block: 5px; }
body[data-section] .next-step { padding: 12px 14px; }
/* 버튼끼리만 간격을 압축. 섹션 본문/일반 링크의 줄간격은 변경하지 않음. */
body[data-section] :is(
  .hub-subnav, .place-tabs, .search-tabs, .search-radius-opts,
  .search-radius, .search-radius-opts, .search-species-opts,
  .od-filter-opts, .od-region-chips, .tool-actions,
  .breed-selection-chips, .content .od-extlinks
) { gap: 6px; }

@media (max-width: 767px) {
  /* 텍스트 버튼은 시각적으로 슬림하게, 터치 대상은 38px 이상. */
  body[data-section] {
    --ui-button-min-height: 38px;
    --ui-button-padding-x: 8px;
  }
  body[data-section] :is(
    .toc a, .hub-subnav a, .content .hub-guides a,
    .sitemap-jump a, .place-tab
  ) {
    min-height: 38px;
    padding: 6px 8px;
  }
  /* 모바일 헤더의 메뉴·검색은 원래 44px 터치 타깃을 유지. */
  body[data-section] :is(.nav-toggle, .header-search, .nav-nojs, .menu-btn) {
    min-height: 44px;
  }
  body[data-section] .header-search { padding: 0; }
  body[data-section] .footer-nav a { min-height: 30px; }
  body[data-section] .breed-add { min-height: 38px; }
}

/* 실시간 품종 비교표: 필터 바로 아래, 품종 목록 바로 위 (강아지·고양이 공통) */
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison {
  display: block;
  margin: 9px 0 14px;
  padding: 11px 12px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-accent-line);
  border-radius: 2px;
  scroll-margin-top: calc(var(--header-h, 60px) + var(--toc-h, 46px) + 10px);
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selection-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selection-info {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .content .breed-inline-title {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 720;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selection-info strong {
  font-size: 12px;
  color: var(--ui-muted);
  font-weight: 600;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selection-chips {
  flex-basis: 100%;
  margin: 2px 0 0;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selection-hint {
  flex-basis: 100%;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selected-results {
  margin: 7px 0 0;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selected-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-general-note {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-reset {
  flex: none;
  align-self: flex-start;
  padding: 4px 7px;
  min-height: 30px;
}
:is(body[data-section="dogs"],body[data-section="cats"]) .breed-browser > .breed-link-line {
  margin: 4px 0 10px;
  font-size: 12px;
}
@media (max-width: 600px) {
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison {
    padding: 10px;
    scroll-margin-top: 95px;
  }
  :is(body[data-section="dogs"],body[data-section="cats"]) .breed-inline-comparison .breed-selection-bar {
    gap: 4px 8px;
  }
}

/* 문서 제목 체계: 중분류 h3의 하위 카드 제목은 h4로, 시각 크기는 유지. */
body[data-section] .hub-group .card h4 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
body[data-section] .breed-table-scroll-hint {
  display: none;
  margin: 4px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ui-muted);
}
@media (max-width: 767px) {
  body[data-section] .breed-table-scroll-hint { display: block; }
}