/*
 * site.css — 사이트 커스텀 스타일(Bootstrap 5.3.8 위에 차분한 추모 시설 테마).
 * 진실의 원천: .claude/skills/responsive-ui/SKILL.md(CLS 방지·이미지 성능),
 *              UI 디자인 브리프(2026-06-12, seo-frontend-engineer).
 *
 * 무드: 차분·단정·위로·신뢰. 넉넉한 여백, 절제된 모션, 머티드 골드 포인트의 극소 사용.
 * 원칙
 *   - 색·반경·트랜지션은 :root 토큰으로 일원화. Bootstrap CSS 변수(--bs-*)를 덮어
 *     btn/badge/card/form 등 기본 컴포넌트를 테마에 맞춘다(클래스 중복 정의 최소화).
 *   - 시맨틱·이미지 속성(width/height·loading·fetchpriority)·폼 name 계약은 뷰가 소유.
 *     CSS 는 시각 표현만 담당하고 그 계약을 건드리지 않는다.
 *   - 성능 핵심(유지): 이미지 종횡비 고정(CLS), 로드 실패 플레이스홀더, reduced-motion 존중.
 */

/* ════════════════════════════════════════════════════════════════════
 * 1. 디자인 토큰 (팔레트 · 타이포 · 반경 · 모션)
 * ════════════════════════════════════════════════════════════════════ */
:root {
  /* 팔레트 — 밝은 뉴트럴 바탕에 세이지 그린, 블루그레이, 머티드 골드 포인트를 섞어 플랫폼 톤으로. */
  --nk-green: #2f6b57;          /* 주조색(브랜드·CTA·강조) */
  --nk-green-dark: #244c40;     /* 호버·푸터 등 더 깊은 톤 */
  --nk-green-soft: #6f9184;     /* 보조 그린(테두리·아이콘) */
  --nk-green-tint: #edf6f2;     /* 아주 옅은 그린(활성 pill·섹션 배경) */
  --nk-bluegray: #4f6f7d;       /* 보조 차분색(플랫폼/정보 톤) */
  --nk-bluegray-tint: #eef5f7;  /* 옅은 블루그레이 표면 */
  --nk-ivory: #f6f8f7;          /* 페이지 배경(밝은 뉴트럴) */
  --nk-surface: #ffffff;        /* 카드·입력 표면 */
  --nk-charcoal: #232a2a;       /* 본문 텍스트(딥 차콜) */
  --nk-muted: #66716f;          /* 보조 텍스트 */
  --nk-gold: #b98d3b;           /* 포인트(구분선·아이콘) */
  --nk-gold-soft: #d5bd82;      /* 옅은 골드(보더) */
  --nk-line: #dde4e1;           /* 미세 보더 */
  --nk-line-strong: #cad6d2;    /* 약간 진한 보더 */

  /* 타이포 — 헤딩=세리프(Noto Serif KR, swap), 본문=시스템 고딕 스택. */
  --nk-font-serif: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo",
    "Malgun Gothic", serif;
  --nk-font-sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic",
    "맑은 고딕", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* 반경 · 모션 — 6~10px 일관, 150~250ms 절제. */
  --nk-radius: 8px;
  --nk-radius-sm: 6px;
  --nk-radius-lg: 12px;
  --nk-transition: 180ms ease;
  --nk-shadow-sm: 0 1px 2px rgba(35, 42, 42, 0.04), 0 8px 22px rgba(47, 107, 87, 0.06);
  --nk-shadow-md: 0 8px 24px rgba(35, 42, 42, 0.10), 0 18px 42px rgba(79, 111, 125, 0.10);

  /* Bootstrap 테마 토큰 재정의 — btn-primary/링크/포커스/보더 라운드를 주조색으로. */
  --bs-primary: var(--nk-green);
  --bs-primary-rgb: 61, 90, 76;
  --bs-link-color: var(--nk-green);
  --bs-link-color-rgb: 61, 90, 76;
  --bs-link-hover-color: var(--nk-green-dark);
  --bs-link-hover-color-rgb: 47, 70, 59;
  --bs-border-color: var(--nk-line);
  --bs-border-radius: var(--nk-radius);
  --bs-border-radius-sm: var(--nk-radius-sm);
  --bs-border-radius-lg: var(--nk-radius-lg);
  --bs-body-color: var(--nk-charcoal);
  --bs-body-bg: var(--nk-ivory);
  --bs-emphasis-color: var(--nk-charcoal);
  --bs-secondary-color: var(--nk-muted);
}

/* ════════════════════════════════════════════════════════════════════
 * 2. 기본 골격 (배경 · 타이포 · 헤딩 세리프)
 * ════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--nk-font-sans);
  color: var(--nk-charcoal);
  background-color: var(--nk-ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 헤딩은 세리프(명조). font-display:swap 으로 폰트 미도착 시 폴백 세리프 즉시 렌더(LCP 안전). */
h1, h2, h3, .nk-serif,
.card-title, .navbar-brand {
  font-family: var(--nk-font-serif);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--nk-charcoal);
}

h1 { line-height: 1.3; }

/* 본문 가독성 — 줄간격·단락 여백을 넉넉히. */
main#main {
  min-height: 60vh;
}

p { line-height: 1.75; }

a {
  text-decoration: none;
  transition: color var(--nk-transition);
}
a:hover { text-decoration: underline; }

/* 선택 영역 색도 테마에 맞춤. */
::selection {
  background: var(--nk-green-tint);
  color: var(--nk-green-dark);
}

.nk-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  transform: translateY(-150%);
  padding: 0.55rem 0.8rem;
  border-radius: var(--nk-radius-sm);
  background: var(--nk-green-dark);
  color: #fff;
  box-shadow: var(--nk-shadow-md);
}
.nk-skip-link:focus {
  transform: translateY(0);
  color: #fff;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════
 * 3. 네비게이션 (헤더)
 * ════════════════════════════════════════════════════════════════════ */
.nk-header {
  background-color: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--nk-line);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(43, 43, 43, 0.02);
}

.navbar-brand {
  font-size: 1.4rem;
  color: var(--nk-green) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar-brand:hover { color: var(--nk-green-dark) !important; }

/* 로고 앞 머티드 골드 마크(장식 — 극소 포인트). 푸터 등에서 사용. */
.nk-brand-mark {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--nk-gold);
  flex: 0 0 auto;
}

/* 헤더 로고(원형 배지 이미지). navbar-brand 의 gap 으로 워드마크와 간격 유지. */
.nk-brand-logo {
  height: 2.2rem;
  width: auto;
  flex: 0 0 auto;
}

.nk-header .nav-link {
  color: var(--nk-charcoal);
  font-weight: 500;
  padding-inline: 0.9rem;
  border-radius: var(--nk-radius-sm);
  position: relative;
  transition: color var(--nk-transition), background-color var(--nk-transition);
}
.nk-header .nav-link:hover,
.nk-header .nav-link:focus-visible {
  color: var(--nk-green);
  background-color: var(--nk-green-tint);
}
.nk-header .nav-link.active {
  color: var(--nk-green);
  font-weight: 600;
}
.nk-header .nk-nav-cta {
  border: 1px solid var(--nk-line);
  background: var(--nk-surface);
}
.nk-header .nk-nav-cta.active,
.nk-header .nk-nav-cta:hover,
.nk-header .nk-nav-cta:focus-visible {
  border-color: var(--nk-green-soft);
}
/* 활성 링크 하단 골드 인디케이터(데스크톱 — 명확한 현재 위치). */
@media (min-width: 992px) {
  .nk-header .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--nk-gold);
  }
}

/* ════════════════════════════════════════════════════════════════════
 * 4. 버튼 (주조색 / 아웃라인 / 골드 보조)
 * ════════════════════════════════════════════════════════════════════ */
.btn {
  --bs-btn-border-radius: var(--nk-radius-sm);
  font-weight: 500;
  transition: background-color var(--nk-transition), border-color var(--nk-transition),
    color var(--nk-transition), box-shadow var(--nk-transition);
}

/* btn-primary = 주조 그린. */
.btn-primary {
  --bs-btn-bg: var(--nk-green);
  --bs-btn-border-color: var(--nk-green);
  --bs-btn-hover-bg: var(--nk-green-dark);
  --bs-btn-hover-border-color: var(--nk-green-dark);
  --bs-btn-active-bg: var(--nk-green-dark);
  --bs-btn-active-border-color: var(--nk-green-dark);
  --bs-btn-disabled-bg: var(--nk-green-soft);
  --bs-btn-disabled-border-color: var(--nk-green-soft);
}

/* 아웃라인 그린(보조 CTA). Bootstrap outline-secondary/dark 를 테마 그린으로 흡수. */
.btn-outline-primary {
  --bs-btn-color: var(--nk-green);
  --bs-btn-border-color: var(--nk-green-soft);
  --bs-btn-hover-bg: var(--nk-green);
  --bs-btn-hover-border-color: var(--nk-green);
  --bs-btn-active-bg: var(--nk-green-dark);
  --bs-btn-active-border-color: var(--nk-green-dark);
}

/* 라이트(반전) 버튼 — 히어로 등 진한 배경 위. */
.btn-light {
  --bs-btn-bg: var(--nk-surface);
  --bs-btn-color: var(--nk-green-dark);
  --bs-btn-border-color: var(--nk-surface);
  --bs-btn-hover-bg: var(--nk-ivory);
  --bs-btn-hover-border-color: var(--nk-ivory);
  --bs-btn-hover-color: var(--nk-green-dark);
}

/* 버튼 포커스 링도 주조색으로 통일(접근성·일관성). */
.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(61, 90, 76, 0.35);
}

/* ════════════════════════════════════════════════════════════════════
 * 5. 배지 (지역=그린톤 / 형태=골드톤) — 색만으로 정보전달 아님(텍스트 동반)
 * ════════════════════════════════════════════════════════════════════ */
.badge {
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.4em 0.7em;
  border-radius: 999px; /* pill */
}
/* 지역 배지: 옅은 그린 배경 + 그린 텍스트(차분). text-bg-secondary 오버라이드. */
.badge.text-bg-secondary {
  background-color: var(--nk-green-tint) !important;
  color: var(--nk-green-dark) !important;
  border: 1px solid #dde6e0;
}
/* 형태 배지: 옅은 골드 배경 + 진한 골드 텍스트(포인트). text-bg-dark 오버라이드. */
.badge.text-bg-dark {
  background-color: #f6f0e2 !important;
  color: #7c6629 !important;
  border: 1px solid #ece0c5;
}

/* ════════════════════════════════════════════════════════════════════
 * 6. 카드 (납골당 카드 · 정보 카드)
 * ════════════════════════════════════════════════════════════════════ */
.card {
  --bs-card-bg: var(--nk-surface);
  --bs-card-border-color: var(--nk-line);
  --bs-card-border-radius: var(--nk-radius-lg);
  --bs-card-inner-border-radius: var(--nk-radius-lg);
  border-color: var(--nk-line);
  box-shadow: var(--nk-shadow-sm);
}

/* 카드 대표 이미지: 종횡비 고정으로 레이아웃 이동(CLS) 방지(inline aspect-ratio 와 병행). */
.card-img-top {
  background-color: #eceae3; /* 로드 전/실패 시 웜 그레이 플레이스홀더(빈 깨진 아이콘 대신). */
  width: 100%;
  height: auto;
}

.card-title {
  font-size: 1.12rem;
  line-height: 1.45;
}
.card-title a { color: var(--nk-charcoal); }

/* 카드 호버: 미세 상승 + 그림자 강화 + 골드 상단 라인. prefers-reduced-motion 존중. */
.nk-card-link {
  position: relative;
  overflow: hidden;
  border: 0;
  box-shadow: 0 1px 0 rgba(35, 42, 42, 0.06), 0 12px 32px rgba(47, 107, 87, 0.08);
}
.nk-card-link::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nk-gold);
  opacity: 0;
  transition: opacity var(--nk-transition);
  z-index: 2;
}
.nk-card-link:hover::before { opacity: 1; }
.nk-card-media {
  display: block;
  overflow: hidden;
  background: var(--nk-bluegray-tint);
}

@media (prefers-reduced-motion: no-preference) {
  .card.shadow-sm,
  .nk-card-link {
    transition: transform var(--nk-transition), box-shadow var(--nk-transition);
  }
  .card.shadow-sm:hover,
  .nk-card-link:hover {
    transform: translateY(-5px);
    box-shadow: var(--nk-shadow-md);
  }
}

/* 갤러리·카드 이미지가 비율을 유지하며 영역을 채우도록(object-fit-cover 보조). */
.object-fit-cover {
  object-fit: cover;
}

/* ── 목록/홈 카드 현대화(2026-06-13): 이미지 비중↑ · 호버 줌 · 제목 컬러 전환 ── */
/* 대표 이미지를 균일한 와이드 비율(16:10)로 통일 → 이미지 우선의 정돈된 그리드.
   인라인 종횡비(실측 치수)를 디자인 비율로 덮어쓰되 비율 자체는 고정이라 CLS 0 유지.
   object-fit:cover 가 원본을 매끈하게 크롭(레터박스 없음). */
.nk-card-link .card-img-top {
  aspect-ratio: 16 / 10 !important;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .nk-card-link .card-img-top {
    transition: transform 340ms ease;
    will-change: transform;
  }
  /* 카드 호버 시 이미지가 은은하게 확대(overflow:hidden 카드에 클립 — 프리미엄 인터랙션). */
  .nk-card-link:hover .card-img-top { transform: scale(1.06); }
}
/* 카드 호버 시 제목을 브랜드 그린으로(클릭 가능 affordance). */
.nk-card-link .card-title a { transition: color var(--nk-transition); }
.nk-card-link:hover .card-title a { color: var(--nk-green); }
.nk-card-address {
  color: var(--nk-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nk-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  color: var(--nk-green);
  font-size: 0.86rem;
  font-weight: 700;
}
.nk-card-cta::after {
  content: "";
  width: 1.3rem;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: transform var(--nk-transition);
}
.nk-card-link:hover .nk-card-cta::after { transform: scaleX(1.35); }

/* ════════════════════════════════════════════════════════════════════
 * 7. 히어로 밴드 (리스트 상단)
 * ════════════════════════════════════════════════════════════════════ */
.nk-hero {
  position: relative;
  background-color: var(--nk-green);
  background-image: linear-gradient(135deg, #315d55 0%, var(--nk-bluegray) 54%, #65785d 100%);
  color: #f3f1ea;
  border-radius: var(--nk-radius-lg);
  overflow: hidden;
  min-height: clamp(360px, 42vw, 520px);
  display: flex;
  flex-direction: column;
}
/* 아주 미묘한 패턴(점) 오버레이 — 차분한 질감(사진 위에서도 은은). */
.nk-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.nk-hero > * { position: relative; z-index: 1; }

/* 본문(아이브로·제목·소개·CTA) — 중앙 정렬, 세로 가운데. */
.nk-hero-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 2.25rem;
}
.nk-hero h1 {
  color: #ffffff;
  margin-bottom: 0.75rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.38); /* 사진 위 흰 글자 가독성 */
}
.nk-hero .nk-hero-lead {
  color: rgba(255, 255, 255, 0.92);
  max-width: 40rem;
  line-height: 1.8;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}

/* 하단 통계 바(풀폭) — 사진 위 어두운 반투명 띠, 3분할(시설 수·지역·형태). */
.nk-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  background: rgba(16, 24, 28, 0.5);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.nk-hero-meta div {
  padding: 0.9rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.nk-hero-meta div:last-child { border-right: 0; }
.nk-hero-meta dt {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 600;
}
.nk-hero-meta dd {
  color: #fff;
  margin: 0.14rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

/* 하단 연락 바(확장8e) — 전화 상담·카카오톡 문의. 풀폭 다크 띠, 클릭 가능한 셀(전화/카카오 링크). */
.nk-hero-contact {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: 100%;
  background: rgba(16, 24, 28, 0.5);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.nk-hero-contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.9rem 1rem;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color var(--nk-transition);
}
.nk-hero-contact-item:last-child { border-right: 0; }
.nk-hero-contact-item:hover,
.nk-hero-contact-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: #fff;
}
.nk-hc-label { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.72); }
.nk-hc-value { font-size: 1.1rem; font-weight: 700; }
.nk-hc-kakao .nk-hc-value { color: #fee500; } /* 카카오 옐로우 포인트 */
/* 슬롯2 '문자 문의' = 모달 트리거 버튼. 기본 버튼 스타일 리셋(링크 항목과 동일 외형, divider 는 앞 항목이 담당). */
button.nk-hero-contact-item { background: transparent; border: 0; font: inherit; cursor: pointer; }
/* 허니팟 — 화면·스크린리더에서 숨기되 DOM 엔 존재(봇만 채움). display:none 대신 오프스크린(우회 차단). */
.nk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* 상담 현황 밴드(확장8j) — 홈 사회적 증거. 값=관리자 입력(코드가 수치 생성 안 함). 카드와 푸터 사이. */
.nk-stats {
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-lg);
  background: var(--nk-green-tint);
  padding: 1.75rem 1.25rem 1.9rem;
}
.nk-stats-head { margin-bottom: 1.35rem; }
.nk-stats-eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--nk-green);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--nk-gold);
}
.nk-stats-sub { font-size: 0.92rem; color: var(--nk-muted); margin-top: 0.6rem; }
.nk-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem;
}
.nk-stat { text-align: center; padding: 0.6rem 0.4rem; }
.nk-stat-value {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--nk-green-dark);
}
.nk-stat-label { font-size: 0.85rem; color: var(--nk-muted); margin-top: 0.4rem; }

/* 히어로 상단 골드 이름표(eyebrow). */
.nk-eyebrow {
  display: inline-block;
  font-family: var(--nk-font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--nk-gold-soft);
  margin-bottom: 0.9rem;
}
.nk-hero .nk-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--nk-gold-soft);
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* 밝은 배경용 eyebrow(상담·에러 등) — 진한 골드, 중앙 정렬 시 양옆 라인. */
.nk-eyebrow-dark {
  color: var(--nk-gold);
}
.nk-eyebrow-dark::before {
  content: "";
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: var(--nk-gold-soft);
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* 가독 폭 제한(중앙 본문 단락). */
.nk-measure { max-width: 38rem; }

/* ════════════════════════════════════════════════════════════════════
 * 8. 필터 (pill 칩)
 * ════════════════════════════════════════════════════════════════════ */
.nk-filter {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--nk-shadow-sm);
}
.nk-filter-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}
.nk-filter-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--nk-muted);
  text-transform: uppercase;
  padding-top: 0.42rem;
  margin-bottom: 0;
}

/* pill 칩: 기본=웜 보더의 옅은 칩, 활성=주조 그린 채움. .btn 위에 얹어 마크업 최소 변경. */
.nk-pill {
  --bs-btn-border-radius: 999px;
  border-radius: 999px;
  padding: 0.34rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--nk-line-strong);
  background-color: #fbfcfb;
  color: var(--nk-charcoal);
  transition: background-color var(--nk-transition), border-color var(--nk-transition),
    color var(--nk-transition);
}
.nk-pill:hover,
.nk-pill:focus-visible {
  border-color: var(--nk-green-soft);
  background-color: var(--nk-bluegray-tint);
  color: var(--nk-green-dark);
}
.nk-pill-active {
  background-color: var(--nk-green);
  border-color: var(--nk-green);
  color: #ffffff;
}
.nk-pill-active:hover,
.nk-pill-active:focus-visible {
  background-color: var(--nk-green-dark);
  border-color: var(--nk-green-dark);
  color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════════
 * 9. 상세 페이지 (브레드크럼 · 사이드 정보 · 본문)
 * ════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--nk-line-strong);
  --bs-breadcrumb-item-active-color: var(--nk-muted);
  font-size: 0.85rem;
}
.breadcrumb a { color: var(--nk-muted); }
.breadcrumb a:hover { color: var(--nk-green); }

/* 상세 대표 이미지 hero. */
.nk-detail-hero {
  border-radius: var(--nk-radius-lg);
  box-shadow: var(--nk-shadow-sm);
}
.nk-detail-header {
  max-width: 48rem;
}
.nk-detail-figure {
  position: relative;
}
.nk-detail-figure::after {
  content: "";
  position: absolute;
  inset: auto 1.25rem -0.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(47, 70, 59, 0.12);
  filter: blur(12px);
  z-index: -1;
}

/* 갤러리 썸네일 — 미세 보더 + reduced-motion 존중 호버. */
.nk-gallery-img {
  border: 1px solid var(--nk-line);
}
@media (prefers-reduced-motion: no-preference) {
  .nk-gallery-img {
    transition: transform var(--nk-transition), box-shadow var(--nk-transition);
  }
  .nk-gallery-img:hover {
    transform: scale(1.015);
    box-shadow: var(--nk-shadow-sm);
  }
}

/* 본문 단락(소개) 가독성. */
.nk-prose p {
  line-height: 1.85;
  color: #3a3a3a;
  margin-bottom: 1rem;
}
.nk-prose p:last-child { margin-bottom: 0; }

/* ────────────────────────────────────────────────────────────────────
 * 본문 리치 HTML(블로그 에디터 산출 — Sanitizer 화이트리스트 통과분).
 *   진실의 원천: data-contract §description 포맷(허용: p,br,strong,em,u,s,
 *     h2,h3,h4,ul,ol,li,a,img,blockquote,figure,figcaption,table류),
 *     Task #17(.prose typography + 본문 이미지 CLS 최소화).
 *   .nk-prose 한 블록이 plain(nl2br) 경로와 리치 HTML 경로를 공통으로 감싼다
 *   — 출력 분기는 detail.php(HTML 플래그), 시각 톤은 여기로 일원화.
 *   .nk-prose 와 호환 alias 로 .prose 를 함께 받친다(뷰가 어느 쪽을 써도 동일).
 * ──────────────────────────────────────────────────────────────────── */

/* 본문 헤딩 — 세리프 + 절제된 상단 여백(섹션 리듬). 첫 요소는 윗여백 제거. */
.nk-prose h2,
.nk-prose h3,
.nk-prose h4 {
  font-family: var(--nk-font-serif);
  color: var(--nk-charcoal);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.nk-prose h2 { font-size: 1.35rem; }
.nk-prose h3 { font-size: 1.18rem; }
.nk-prose h4 { font-size: 1.05rem; }
.nk-prose > :first-child { margin-top: 0; }

/* 목록 — 들여쓰기·항목 간 미세 간격. */
.nk-prose ul,
.nk-prose ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  line-height: 1.85;
  color: #3a3a3a;
}
.nk-prose li { margin-bottom: 0.35rem; }
.nk-prose li:last-child { margin-bottom: 0; }
.nk-prose ul ul,
.nk-prose ol ol,
.nk-prose ul ol,
.nk-prose ol ul { margin-bottom: 0; margin-top: 0.35rem; }

/* 강조·링크 — 링크는 주조 그린 + 밑줄(본문 가독). */
.nk-prose strong { font-weight: 700; color: var(--nk-charcoal); }
.nk-prose a {
  color: var(--nk-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nk-prose a:hover { color: var(--nk-green-dark); }

/* 인용 — 좌측 골드 바 + 옅은 그린 배경(차분한 강조). */
.nk-prose blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1.1rem;
  border-left: 3px solid var(--nk-gold);
  background: var(--nk-green-tint);
  border-radius: 0 var(--nk-radius-sm) var(--nk-radius-sm) 0;
  color: #3a3a3a;
}
.nk-prose blockquote p:last-child { margin-bottom: 0; }

/* 본문 이미지 — 핵심: CLS 최소화.
 *   너비 상한 100% + height:auto 로 종횡비 유지(에디터/Sanitizer 가 width/height 를
 *   남겨도 컨테이너 폭에서 비율 보존). 둥근 모서리·미세 보더로 톤 일관. */
.nk-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nk-radius);
  border: 1px solid var(--nk-line);
  margin: 1rem 0;
  display: block;
}

/* figure/figcaption — 이미지 + 캡션 묶음. */
.nk-prose figure { margin: 1.25rem 0; }
.nk-prose figure img { margin: 0; }
.nk-prose figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--nk-muted);
  text-align: center;
}

/* 표 — 가로 스크롤 없이 폭 100%, 미세 보더·헤더 톤. */
.nk-prose table {
  width: 100%;
  margin: 1.25rem 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.nk-prose th,
.nk-prose td {
  border: 1px solid var(--nk-line);
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.nk-prose thead th,
.nk-prose th {
  background: var(--nk-green-tint);
  color: var(--nk-green-dark);
  font-weight: 600;
}

/* 수평 구분(있을 경우)·마지막 블록 여백 정리. */
.nk-prose hr {
  border: 0;
  border-top: 1px solid var(--nk-line);
  margin: 1.75rem 0;
}
.nk-prose > :last-child { margin-bottom: 0; }

/* 섹션 제목 — 세리프 + 좌측 골드 악센트. */
.nk-section-title {
  position: relative;
  padding-left: 0.85rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.nk-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 2px;
  background: var(--nk-gold);
}

/* 시설 정보 사이드 카드 — sticky(데스크톱), 정돈된 정의 목록. */
.nk-info-card {
  background: var(--nk-surface);
  border: 1px solid var(--nk-line);
  border-top: 3px solid var(--nk-gold-soft); /* 브랜드 골드 액센트(푸터 상단선과 호응 — 절제된 현대 패턴) */
  border-radius: var(--nk-radius-lg);
  box-shadow: var(--nk-shadow-sm);
}
@media (min-width: 992px) {
  .nk-info-sticky { position: sticky; top: 1.5rem; }
}
/* 정의 목록 행: 라벨/값 정렬 + 미세 구분선. */
.nk-info-card dl { margin-bottom: 0; }
.nk-info-card dt {
  color: var(--nk-muted);
  font-weight: 600;
  font-size: 0.85rem;
}
.nk-info-card dd {
  color: var(--nk-charcoal);
  font-size: 0.92rem;
}
.nk-info-row {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--nk-line);
}
.nk-info-row:last-of-type { border-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
 * 10. 폼 (상담 신청)
 * ════════════════════════════════════════════════════════════════════ */
.nk-form-card {
  background: var(--nk-surface);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-lg);
  box-shadow: var(--nk-shadow-sm);
}
.nk-consult-intro {
  position: sticky;
  top: 6rem;
}
.nk-consult-panel {
  background: var(--nk-surface);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-lg);
  padding: 1.25rem;
  box-shadow: var(--nk-shadow-sm);
}
.nk-consult-panel-title {
  font-family: var(--nk-font-serif);
  font-weight: 600;
  color: var(--nk-charcoal);
}
.nk-consult-steps {
  display: grid;
  gap: 0.85rem;
  padding-left: 1.25rem;
  color: var(--nk-muted);
}
.nk-consult-steps li::marker {
  color: var(--nk-gold);
  font-weight: 700;
}

.form-label {
  font-weight: 600;
  color: var(--nk-charcoal);
  margin-bottom: 0.4rem;
}
.form-control,
.form-select {
  border-color: var(--nk-line-strong);
  border-radius: var(--nk-radius-sm);
  padding: 0.6rem 0.85rem;
  background-color: #fcfcfa;
  transition: border-color var(--nk-transition), box-shadow var(--nk-transition),
    background-color var(--nk-transition);
}
/* 포커스 = 주조색 링(브랜드 일관). */
.form-control:focus,
.form-select:focus {
  border-color: var(--nk-green-soft);
  background-color: var(--nk-surface);
  box-shadow: 0 0 0 0.2rem rgba(61, 90, 76, 0.16);
}
.form-control::placeholder { color: #9a9d99; }
.form-text { color: var(--nk-muted); }

/* 동의 체크 영역 — 옅은 톤 박스로 구분. */
.nk-consent {
  background: var(--nk-green-tint);
  border: 1px solid #dde6e0;
  border-radius: var(--nk-radius);
  padding: 1rem 1.1rem;
}
.form-check-input:checked {
  background-color: var(--nk-green);
  border-color: var(--nk-green);
}
.form-check-input:focus {
  border-color: var(--nk-green-soft);
  box-shadow: 0 0 0 0.2rem rgba(61, 90, 76, 0.16);
}

/* ════════════════════════════════════════════════════════════════════
 * 11. 페이지네이션 · 알림 · 에러
 * ════════════════════════════════════════════════════════════════════ */
.pagination {
  --bs-pagination-color: var(--nk-green);
  --bs-pagination-hover-color: var(--nk-green-dark);
  --bs-pagination-hover-bg: var(--nk-green-tint);
  --bs-pagination-focus-color: var(--nk-green-dark);
  --bs-pagination-focus-bg: var(--nk-green-tint);
  --bs-pagination-active-bg: var(--nk-green);
  --bs-pagination-active-border-color: var(--nk-green);
  --bs-pagination-border-color: var(--nk-line);
  --bs-pagination-border-radius: var(--nk-radius-sm);
}

.alert {
  border-radius: var(--nk-radius);
  border: 1px solid transparent;
}

/* 빈 상태 / 에러 박스 — 웜 톤. */
.nk-empty {
  background: var(--nk-surface);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-lg);
}

/* 에러 페이지 큰 상태 코드 — 절제된 골드. */
.nk-error-code {
  font-family: var(--nk-font-serif);
  font-weight: 700;
  color: var(--nk-gold);
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
 * 12. 푸터 (차분한 다크 그린)
 * ════════════════════════════════════════════════════════════════════ */
.nk-footer {
  background-color: var(--nk-green-dark);
  color: rgba(255, 255, 255, 0.72);
  border-top: 3px solid var(--nk-gold);
}

.nk-list-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--nk-line);
  border-radius: 999px;
  background: #fff;
  color: var(--nk-muted);
  font-size: 0.9rem;
  box-shadow: var(--nk-shadow-sm);
}
.nk-list-summary strong {
  color: var(--nk-green-dark);
  font-weight: 800;
}
.nk-footer h2,
.nk-footer .nk-footer-brand {
  color: #ffffff;
  font-family: var(--nk-font-serif);
  font-weight: 600;
}
.nk-footer a {
  color: rgba(255, 255, 255, 0.82);
}
.nk-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.nk-footer .nk-footer-divider {
  border-color: rgba(255, 255, 255, 0.14);
}
.nk-footer-heading {
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--nk-gold-soft);
  font-weight: 700;
}
.nk-footer-lead { max-width: 34rem; line-height: 1.8; }
.nk-footer-note { line-height: 1.8; }

/* 하단 메타(사업자 정보 + 카피라이트) — 중앙 정렬·축소(요청). 차분한 저대비로 본문과 위계 분리. */
.nk-footer-biz {
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.7;
  opacity: 0.6;
  margin-top: 0.25rem;
}
.nk-footer-biz a { color: rgba(255, 255, 255, 0.7); }
.nk-footer-biz a:hover { color: #ffffff; }
.nk-footer-copy { text-align: center; font-size: 0.72rem; opacity: 0.55; }

/* ════════════════════════════════════════════════════════════════════
 * 13. 관리자 폼 — 이미지 업로드/관리 + 본문 에디터
 *   진실의 원천: Task #16(이미지 업로드 영역·미리보기·기존이미지 그리드·Toast UI Editor).
 *   admin/columbarium_form.php + admin-form.js 가 쓰는 클래스. 공개 페이지 무관.
 * ════════════════════════════════════════════════════════════════════ */

/* 드롭/선택 안내 영역 — 점선 보더의 옅은 그린 톤. */
.nk-upload-zone {
  border: 1.5px dashed var(--nk-line-strong);
  border-radius: var(--nk-radius);
  background: #fcfcfa;
  padding: 1.1rem 1.25rem;
  transition: border-color var(--nk-transition), background-color var(--nk-transition);
}
.nk-upload-zone:focus-within {
  border-color: var(--nk-green-soft);
  background-color: var(--nk-green-tint);
}

/* 썸네일(신규 미리보기 · 기존 이미지 공통) — 정사각 종횡비 + 커버. */
.nk-img-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--nk-radius-sm);
  overflow: hidden;
  border: 1px solid var(--nk-line);
  background: #eceae3; /* 로드 전 웜 그레이 플레이스홀더. */
}
.nk-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "대표" 배지 — 좌상단 골드 핀(색만으로 정보전달 아님 — 텍스트 동반). */
.nk-img-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  background: var(--nk-gold);
  color: #2b2310;
  box-shadow: 0 1px 3px rgba(43, 43, 43, 0.25);
}

/* 기존 이미지 관리 카드(수정 모드) — 썸네일 + 대표 라디오 + 삭제 체크. */
.nk-img-manage {
  position: relative;
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius);
  background: var(--nk-surface);
  padding: 0.5rem;
}
/* 삭제 표시된 항목 — 흐리게 + 취소선 느낌(시각 피드백). */
.nk-img-manage.is-marked-delete {
  opacity: 0.5;
  border-color: var(--bs-danger-border-subtle, #f1aeb5);
}
.nk-img-manage .form-check {
  margin: 0.4rem 0 0;
}
.nk-img-manage .form-check-label {
  font-size: 0.8rem;
}

/* Toast UI Editor 홀더 — 보더·라운드를 폼 컨트롤 톤과 맞춤(에디터 자체 CSS 위에 미세 보정). */
.nk-editor-holder {
  border-radius: var(--nk-radius-sm);
}
.nk-editor-holder .toastui-editor-defaultUI {
  border-color: var(--nk-line-strong);
  border-radius: var(--nk-radius-sm);
}

/* ════════════════════════════════════════════════════════════════════
 * 14. 관리자 대시보드 — 방문 통계(요약 카드 · 미니 추이 차트 · 통계 표)
 *   진실의 원천: Task #23(요약 4카드 + 납골당별 표 + 14일 CSS 막대 추이).
 *   차트는 CSS 막대(div 높이 비례)로 — Chart.js CDN 미도입(admin CSP 무변경 — 근거: 단순 추이엔 과함).
 * ════════════════════════════════════════════════════════════════════ */

/* 통계 요약 카드 — 작은 라벨 + 큰 수치, 내용 가운데 정렬. 그린 톤 강조 변형(.nk-stat-accent). */
.nk-stat-card {
  background: var(--nk-surface);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-lg);
  box-shadow: var(--nk-shadow-sm);
  height: 100%;
  text-align: center;
}
.nk-stat-card .nk-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--nk-muted);
  margin-bottom: 0.35rem;
}
.nk-stat-card .nk-stat-value {
  font-family: var(--nk-font-serif);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--nk-charcoal);
}
.nk-stat-card .nk-stat-sub {
  font-size: 0.78rem;
  color: var(--nk-muted);
}
/* 강조 카드(예: 오늘) — 옅은 그린 배경 + 좌측 골드 악센트. */
.nk-stat-accent {
  background: var(--nk-green-tint);
  border-color: #dde6e0;
  position: relative;
  overflow: hidden;
}
.nk-stat-accent::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--nk-gold);
}
.nk-stat-accent .nk-stat-value { color: var(--nk-green-dark); }

/* 14일 미니 추이 — CSS 막대(접근성: 각 막대에 title/aria-label 로 수치 전달). */
.nk-trend {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding-top: 0.5rem;
}
.nk-trend-bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}
/* 막대 본체: 높이는 인라인 style(데이터 비례)로 — CSP style-src 'unsafe-inline' 허용 범위. */
.nk-trend-fill {
  width: 100%;
  max-width: 22px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--nk-green-soft), var(--nk-green));
  min-height: 2px; /* 0건도 바닥 힌트(완전 사라지지 않게). */
  transition: opacity var(--nk-transition);
}
.nk-trend-bar:hover .nk-trend-fill { opacity: 0.82; }
/* 오늘 막대는 골드로 강조. */
.nk-trend-bar.is-today .nk-trend-fill {
  background: linear-gradient(180deg, var(--nk-gold-soft), var(--nk-gold));
}
.nk-trend-label {
  font-size: 0.62rem;
  color: var(--nk-muted);
  margin-top: 0.25rem;
  white-space: nowrap;
}
/* 0건 추이(데이터 없음) 안내. */
.nk-trend-empty {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nk-muted);
  font-size: 0.9rem;
}

/* 방문 통계 표 — 숫자 컬럼 우측 정렬·탭형 숫자(자릿수 정렬). */
.nk-stat-table td.nk-num,
.nk-stat-table th.nk-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nk-stat-table .nk-num-strong { font-weight: 700; color: var(--nk-green-dark); }

/* ════════════════════════════════════════════════════════════════════
 * 15. 태그 칩 (상세 본문 아래 — 확장3 #27)
 *   기존 pill 필터(.nk-pill) 시각 언어 변형: 옅은 그린 칩 + # 접두. 호버 시 주조 그린.
 *   링크는 /tag/{slug}. 시맨틱은 detail.php 의 nav>ul>li 가 담당.
 * ════════════════════════════════════════════════════════════════════ */
.nk-tag-chip {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid var(--nk-line-strong);
  background-color: var(--nk-green-tint);
  color: var(--nk-green-dark);
  text-decoration: none;
  transition: background-color var(--nk-transition), border-color var(--nk-transition),
    color var(--nk-transition);
}
.nk-tag-chip:hover,
.nk-tag-chip:focus-visible {
  background-color: var(--nk-green);
  border-color: var(--nk-green);
  color: #ffffff;
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════
 * 배너 광고 존 (홈 — 히어로↔필터 사이, 사용자 확정 위치)
 *   현재: 등록 전 placeholder 슬롯(점선 = 빈 자리 시각 언어).
 *   Task #30 동적화 시: 실배너는 .nk-banner-slot--filled(이미지 채움)로,
 *   빈 슬롯은 본 점선 스타일을 "문의 카드"로 재사용한다.
 *   min-height 고정으로 배너 로드 전후 레이아웃 이동(CLS) 0.
 * ════════════════════════════════════════════════════════════════════ */
.nk-banner-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 106px;              /* 수익 영역: 충분히 보이되 카드보다 낮은 광고 레일 */
  padding: 0.9rem 0.75rem;
  border: 1.5px dashed var(--nk-line-strong);
  border-radius: var(--nk-radius-lg);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
  text-align: center;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease;
}
.nk-banner-slot:hover,
.nk-banner-slot:focus-visible {
  border-color: var(--nk-green-soft);
  background: var(--nk-green-tint);
}
.nk-banner-slot-badge {
  position: absolute;
  top: 0.45rem;
  left: 0.55rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--nk-muted);
  border: 1px solid var(--nk-line);
  border-radius: 3px;
  padding: 0 0.3rem;
  line-height: 1.5;
  background: var(--nk-ivory);
}
.nk-banner-slot-text {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--nk-green);
}
.nk-banner-slot-sub {
  font-size: 0.74rem;
  color: var(--nk-muted);
}

/* 실제 배너 광고(이미지 채움). placeholder 슬롯과 같은 높이(min-height 96px)로 CLS 0. */
.nk-banner-ad {
  position: relative;
  display: block;
  min-height: 106px;
  height: 100%;
  border-radius: var(--nk-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(47, 107, 87, 0.18);
  background: var(--nk-surface);
  box-shadow: 0 8px 24px rgba(35, 42, 42, 0.08);
}
.nk-banner-ad-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 106px;
  object-fit: cover; /* 3:1 권장 — 비율 다르면 중앙 크롭 */
}
/* "광고" 라벨(투명성 — 광고임을 명시). 좌상단 작은 칩. */
.nk-banner-ad-label {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 1;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: rgba(43, 43, 43, 0.55);
  border-radius: 3px;
  padding: 0.05rem 0.32rem;
  line-height: 1.5;
}
.nk-banner-zone {
  padding: 0.85rem;
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-lg);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--nk-shadow-sm);
}
.nk-banner-zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
  color: var(--nk-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.nk-banner-zone-head a {
  color: var(--nk-green);
  font-weight: 700;
}

@media (max-width: 991.98px) {
  .nk-header {
    position: sticky;
  }
  .nk-filter-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .nk-filter-label {
    padding-top: 0;
  }
  .nk-consult-intro {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .nk-hero {
    min-height: 380px;
  }
  .nk-hero-content { padding: 2.25rem 1.1rem 1.75rem; }
  .nk-hero-meta div { padding: 0.7rem 0.4rem; }
  .nk-hero-meta dt { font-size: 0.68rem; }
  .nk-hero-meta dd { font-size: 0.92rem; }
  .nk-hero-contact-item { padding: 0.7rem 0.4rem; }
  .nk-hc-value { font-size: 0.98rem; }
  .navbar-brand {
    font-size: 1.12rem;
  }
  .nk-banner-zone {
    padding: 0.65rem;
  }
  .nk-banner-slot,
  .nk-banner-ad,
  .nk-banner-ad-img {
    min-height: 96px;
  }
}