:root {
  /* ── 색상 (기존) ── */
  --bg: #f1ede5;
  --bg-ink: #d5dfd8;
  --panel: rgba(252, 250, 246, 0.86);   /* 순백 → 따뜻한 오프화이트(눈부심 완화) */
  --panel-strong: #faf8f3;              /* 순백 #fff → 따뜻한 오프화이트 */
  --line: #d8cebd;
  --line-strong: #c6b89e;
  --ink: #26322b;                       /* 순흑 가까운 #17271f → 부드러운 차콜그린(피로 완화) */
  --ink-soft: #56685e;                  /* 보조 텍스트도 살짝 부드럽게 */
  --accent: #2a6c50;                    /* 진한 녹색 약간 완화(흰글자 대비 유지) */
  --accent-strong: #1f5b41;
  --accent-warm: #8c6a2c;
  --danger: #8f2f2b;
  --shadow: 0 18px 45px rgba(22, 33, 27, 0.08);
  --shadow-soft: 0 8px 20px rgba(22, 33, 27, 0.06);

  /* ── 색상 별칭 (alias) ── */
  --border: var(--line);
  --border-strong: var(--line-strong);
  --surface: var(--panel-strong);
  --muted: var(--ink-soft);

  /* ── Spacing scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Typography ── */
  --text-xs:   0.78rem;
  --text-sm:   0.85rem;
  --text-base: 0.95rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "맑은 고딕", sans-serif;

  /* ── Radius ── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ── Breakpoints (sm/md/lg/xl) — 4 단계 표준 ── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ── Z-index ── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Transition / easing ── */
  --ease-fast: 0.15s ease;
  --ease-normal: 0.2s ease;
  --ease-slow: 0.3s ease;
}

/*
 * ── Phase E3 — 다크 모드 (prefers-color-scheme) ──
 *  사용자 OS 다크 모드 시 자동 적용. 토글 버튼은 향후.
 *  색상 토큰만 dark variant — spacing/radius/typography 동일.
 *  data-theme="light" 명시 시 dark 무시 (수동 강제).
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1f1c;
    --bg-ink: #232a26;
    --panel: rgba(35, 42, 38, 0.85);
    --panel-strong: #2a302c;
    --line: #3a4540;
    --line-strong: #4d5b54;
    --ink: #e8ecea;
    --ink-soft: #a8b3ad;
    --accent: #4caf82;            /* 다크 배경에서 더 잘 보이게 밝힘 */
    --accent-strong: #5db896;
    --accent-warm: #c89e5a;
    --danger: #d77573;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.3);

    --border: var(--line);
    --border-strong: var(--line-strong);
    --surface: var(--panel-strong);
    --muted: var(--ink-soft);
  }
}

/* 사용자가 명시적으로 dark 강제 */
:root[data-theme="dark"] {
  --bg: #1a1f1c;
  --bg-ink: #232a26;
  --panel: rgba(35, 42, 38, 0.85);
  --panel-strong: #2a302c;
  --line: #3a4540;
  --line-strong: #4d5b54;
  --ink: #e8ecea;
  --ink-soft: #a8b3ad;
  --accent: #4caf82;
  --accent-strong: #5db896;
  --accent-warm: #c89e5a;
  --danger: #d77573;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.3);

  --border: var(--line);
  --border-strong: var(--line-strong);
  --surface: var(--panel-strong);
  --muted: var(--ink-soft);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/*
 * ──────────────────────────────────────────────────────────
 *  Phase C — 표준 컴포넌트 (디자인 토큰 사용)
 * ──────────────────────────────────────────────────────────
 *  새 코드는 다음 클래스를 우선 사용. 기존 .panel/.table-wrap/.grid 는 호환 유지.
 */

/* Card — 카드 컨테이너 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.card-head h3,
.card-head h4 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--ink);
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Form grid — 폼 입력 그리드 (반응형 auto-fit) */
.form-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.form-grid > * { min-width: 0; }
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--ease-fast);
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 106, 74, 0.15);
}

/* Data table — 표준 데이터 표 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.data-table thead th {
  background: var(--bg-ink);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-sm);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
}
.data-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.data-table tbody tr:hover {
  background: rgba(213, 223, 216, 0.4);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Status badges — 상태 표시 (HACCP 외 일반화) */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
}
/* Phase N2 — PWA 설치 prompt 배너 */
.pwa-install-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  flex-wrap: wrap;
}
.pwa-install-icon { font-size: 1.4rem; }
.pwa-install-text { flex: 1; min-width: 200px; font-size: var(--text-sm); }
.pwa-install-banner .primary {
  background: #fff;
  color: var(--accent-strong);
  border: 0;
}
.pwa-install-banner .ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Phase N1 — 비용 분석 dashboard */
.cost-dashboard-widget {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.cost-dashboard-widget .card-head h4 {
  color: var(--accent-strong);
}
.cost-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: rgba(31, 106, 74, 0.05);
  border-radius: var(--radius-md);
}
.cost-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.cost-stat-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-strong);
}
.cost-by-type, .cost-monthly, .cost-vendors {
  margin: var(--space-3) 0;
}
.cost-by-type h5, .cost-monthly h5, .cost-vendors h5 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.cost-type-bars {
  display: grid;
  gap: var(--space-1);
}
.cost-type-bar {
  display: grid;
  grid-template-columns: 100px 1fr 90px;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
}
.cost-type-bar .cost-bar-track {
  height: 10px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.cost-type-bar .cost-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  border-radius: var(--radius-pill);
}
.cost-monthly-chart svg { display: block; max-width: 100%; }
.cost-vendor-list {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}
.cost-vendor-list li {
  margin-bottom: var(--space-1);
}

/* Phase O2 — 인쇄용 (PDF) 스타일 */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; color: #000 !important; }
  .tab-nav, .hero, .pwa-install-banner, .help-link,
  .tab-btn, .haccp-cert-tab,
  #lang-selector-box, #theme-toggle, #push-toggle,
  .actions, .inline-upload, #global-login-box, .cost-dashboard-widget,
  .home-daily-quick, .carcass-image-upload, .carcass-price-widget,
  .carcass-timeseries-widget, .data-section:not(.print-target),
  #dashboard-top-links {
    display: none !important;
  }
  .selection-card, .selection-card.print-target {
    display: block !important;
    page-break-inside: avoid;
    border: 1px solid #999 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .selection-table {
    width: 100%;
    border-collapse: collapse;
  }
  .selection-table th, .selection-table td {
    border: 1px solid #666;
    padding: 4px 6px;
    font-size: 9pt;
  }
  .selection-table thead th { background: #eee !important; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* Phase L3 — 종돈선발 KAPE summary 결과 */
.kape-summary-result {
  margin: var(--space-2) 0;
  padding: var(--space-3);
  background: rgba(31, 106, 74, 0.06);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.kape-summary-result strong { color: var(--accent-strong); }
.kape-summary-result .grade-bar {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.kape-summary-result .grade-pill {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}
.grade-pill-1plusplus { background: #d1fae5; color: #065f46; }
.grade-pill-1plus { background: #a7f3d0; color: #065f46; }
.grade-pill-1 { background: #fef3c7; color: #92400e; }
.grade-pill-2 { background: #fde68a; color: #78350f; }
.grade-pill-offgrade { background: #fee2e2; color: #991b1b; }

/* Phase L2 — KAPE 시계열 차트 */
.carcass-timeseries-widget {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.carcass-timeseries-widget .actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-2) 0;
}
.carcass-ts-chart {
  margin-top: var(--space-2);
  background: rgba(213, 223, 216, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  overflow-x: auto;
}
.carcass-ts-chart svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.carcass-ts-chart .ts-axis text { fill: var(--muted); font-size: 10px; }
.carcass-ts-chart .ts-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.carcass-ts-chart .ts-dot { fill: var(--accent); }
.carcass-ts-chart .ts-grid { stroke: var(--border); stroke-width: 0.5; }

/* Phase J3 — v3 학습 결과 dashboard */
.carcass-v3-result {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(31, 106, 74, 0.04);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
}
.carcass-v3-result h4 {
  margin: 0 0 var(--space-2);
  color: var(--accent-strong);
  font-size: var(--text-md);
}
.carcass-v3-result h5 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.carcass-v3-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.v3-feature-bars {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: 1fr;
}
.v3-feature-bar {
  display: grid;
  grid-template-columns: 110px 1fr 60px;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
}
.v3-feature-bar .v3-bar-track {
  height: 12px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.v3-feature-bar .v3-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  border-radius: var(--radius-pill);
  transition: width var(--ease-slow);
}
.v3-feature-bar .v3-bar-fill.negative {
  background: linear-gradient(90deg, var(--danger), #d77573);
}

/* Phase J1 — 도체 이미지 업로드 카드 */
.carcass-image-upload {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.carcass-image-upload .card-head {
  margin-bottom: var(--space-2);
}
.carcass-image-upload .actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.carcass-image-preview {
  margin-top: var(--space-3);
  padding: var(--space-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: rgba(213, 223, 216, 0.3);
}
.carcass-image-preview img {
  max-width: 100%;
  max-height: 240px;
  border-radius: var(--radius-md);
  display: block;
}

/* Phase J2 — 출하 가격 예측 위젯 */
.carcass-price-widget {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, rgba(31, 106, 74, 0.04));
}
.carcass-price-widget .card-head {
  margin-bottom: var(--space-2);
}
.carcass-price-widget .actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.carcass-price-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
}
.carcass-price-main,
.carcass-price-total {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.carcass-price-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-strong);
}
.carcass-price-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}
@media (max-width: 639px) {
  .carcass-price-meta {
    flex-direction: column;
    gap: var(--space-1);
  }
}

/* home-daily-quick — Phase H3b HOME 일상 빠른 입력 위젯 */
.home-daily-quick {
  margin-top: var(--space-3);
}
.home-daily-quick-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.home-daily-quick-head h3 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--accent-strong);
}
.home-daily-quick-head .small {
  font-size: var(--text-xs);
}
.home-daily-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.home-daily-quick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, #f8f5ec);
  cursor: pointer;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast);
  text-align: left;
  font-family: var(--font-sans);
  min-height: 120px;
}
.home-daily-quick-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(31, 106, 74, 0.12);
  transform: translateY(-2px);
}
.home-daily-quick-card:active {
  transform: translateY(0);
}
.home-daily-quick-icon {
  font-size: 2rem;
  line-height: 1;
}
.home-daily-quick-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}
.home-daily-quick-desc {
  font-size: var(--text-xs);
  color: var(--muted);
}
@media (max-width: 639px) {
  .home-daily-quick-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .home-daily-quick-card {
    padding: var(--space-3);
    min-height: 100px;
  }
  .home-daily-quick-icon {
    font-size: 1.5rem;
  }
}

/* info-banner — Phase H2 안내 카드 */
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  margin: var(--space-2) 0;
  background: rgba(31, 106, 74, 0.08);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink);
}
.info-banner-icon {
  font-size: 1.1rem;
  line-height: 1.3;
}
.info-banner-text {
  flex: 1;
  line-height: 1.5;
}
.info-banner-text strong {
  color: var(--accent-strong);
}

/* sub-tab nav grouped — Phase H1a 그룹 라벨 */
.sub-tab-nav-grouped {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}
.sub-tab-group-label {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--space-2);
  border-left: 3px solid var(--accent);
  margin-left: var(--space-2);
}
.sub-tab-group-label:first-child {
  margin-left: 0;
}
@media (max-width: 639px) {
  .sub-tab-group-label {
    font-size: 0.7rem;
    padding: 1px 4px;
    border-left-width: 2px;
  }
}

.badge-info { background: #eef2f7; color: #475569; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-muted { background: #e5e7eb; color: #6b7280; }

/* ──────────────────────────────────────────────────────────
 *  Phase C4 — a11y focus ring 표준
 *  키보드 네비 (Tab) 시 명확한 focus 표시. 마우스 클릭은 표시 X.
 *  --accent (forest green) 색 ring + 2px outline.
 * ────────────────────────────────────────────────────────── */
:where(button, a, input, select, textarea, [tabindex], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 작은 inline 버튼은 ring 만 (outline-offset 없이) */
.tab-btn:focus-visible,
.haccp-cert-tab:focus-visible,
button.ghost:focus-visible,
button.primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 106, 74, 0.25);
}

/* aria-current='page' / aria-selected='true' — 활성 상태 보강 시각 표시 */
[aria-current="page"],
[aria-selected="true"] {
  font-weight: 600;
}

/* sr-only — 시각적으로 숨기지만 스크린리더 노출 */
.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;
}

/* Skip-to-content — 키보드 사용자가 메인으로 바로 점프 */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: var(--z-sticky);
  transition: top var(--ease-fast);
}
.skip-to-content:focus {
  top: 0;
}

/* ── Theme toggle 버튼 (헤더) ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--ease-fast), transform var(--ease-fast);
}
.theme-toggle:hover {
  background: var(--bg-ink);
}
.theme-toggle:active {
  transform: scale(0.95);
}
.theme-toggle-icon {
  font-size: 1.2rem;
  line-height: 1;
}
:root[data-theme="dark"] .theme-toggle-icon::before,
:root:not([data-theme="light"]) .theme-toggle-icon::before {
  content: "";
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-icon {
    /* 다크 모드일 때 ☀ 표시 (light 로 전환 의미) */
  }
}

/* prefers-reduced-motion 대응 — 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────
 *  Phase D2 — 모바일 폼·테이블 정밀화 (md 미만, 768px 미만)
 *  좁은 viewport 에서 일관된 single-column / 가로 스크롤 / tap-target 보장.
 * ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* 폼 그리드 — 단일 컬럼 강제 (라벨 잘림 방지) */
  .form-grid,
  .grid.compact {
    grid-template-columns: 1fr !important;
  }
  /* 폼 입력 — 풀 width */
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .grid input,
  .grid select,
  .grid textarea {
    width: 100%;
    min-height: 44px;        /* tap-target */
  }
  /* 테이블 — 가로 스크롤 보장 (잘림보다 스크롤이 안전) */
  .data-table,
  .table-wrap table {
    min-width: 600px;        /* 데이터 가독성 최소 */
  }
  .table-wrap,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 카드 grid — 단일 컬럼 */
  .card-grid,
  .haccp-daily-alerts {
    grid-template-columns: 1fr !important;
  }
  /* 버튼 그룹 — wrap + 간격 */
  .actions {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* 폼 라벨 — 위 정렬 */
  label {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* sm 미만 (모바일 portrait, < 640px) — 더 작은 viewport */
@media (max-width: 639px) {
  .shell {
    padding: 0 var(--space-2);
  }
  .hero {
    padding: var(--space-3) var(--space-4);
  }
  .hero h1 {
    font-size: var(--text-xl);
  }
  /* 탭은 가로 스크롤 — wrap 비활성화 */
  .tab-nav-main {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn {
    flex-shrink: 0;
    min-width: 100px;
  }
}

html,
body {
  min-height: 100%;
}

html {
  /* C1 (5/13): scrollbar 토글 시 콘텐츠 우측 점프 차단 */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* C2 (5/13): 가로 overflow 안전망 (table min-width:600px 등으로 넘칠 때) */
  overflow-x: clip;
  font-family: "SUIT Variable", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(31, 106, 74, 0.14), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, rgba(140, 106, 44, 0.16), transparent 58%),
    radial-gradient(1000px 640px at 50% 130%, rgba(24, 85, 59, 0.1), transparent 62%),
    linear-gradient(180deg, var(--bg), var(--bg-ink));
}

.shell {
  width: min(1480px, 95vw);
  margin: 20px auto 36px;
}

.hero {
  min-height: 96px;
  /* C3 (5/13): design token 적용 — .panel 우측선과 정렬 (이전: 20px 24px hardcoded) */
  padding: var(--space-5) var(--space-5);
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(248, 243, 233, 0.84)),
    linear-gradient(90deg, rgba(31, 106, 74, 0.08), rgba(140, 106, 44, 0.08));
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.hero h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: -0.02em;
  color: #10231a;
}

.hero p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  color: #274336;
  background: linear-gradient(180deg, #f6f2e8, #e9dfcc);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.84rem;
  white-space: nowrap;
}

.help-link:hover {
  background: linear-gradient(180deg, #f1ead9, #e3d6bc);
}

.tab-nav {
  margin-top: 14px;
  /* C4 (5/13): design token 적용 (이전: 10px hardcoded) */
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  position: sticky;
  top: 10px;
  z-index: 8;
}

.tab-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tab-nav-main {
  flex: 1 1 780px;
}

.tab-nav-utility {
  margin-left: auto;
  justify-content: flex-end;
}

.tab-btn {
  width: auto;
  min-width: 124px;
  min-height: 44px;          /* a11y — 모바일 tap-target 최소 44px */
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, #f8f5ec, #ece4d2);
  color: #2a4136;
  font-weight: 700;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  transition: background var(--ease-fast), box-shadow var(--ease-fast);
}

.tab-btn:hover {
  background: linear-gradient(180deg, #f2eddf, #e6dcc6);
}

.tab-btn.active {
  background: linear-gradient(180deg, #2a7a56, var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(31, 102, 72, 0.28);
}

.tab-btn:disabled,
.tab-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.tab-btn:disabled:hover,
.tab-btn.is-disabled:hover {
  background: linear-gradient(180deg, #f8f5ec, #ece4d2);
  color: #2a4136;
}

.tab-pane {
  display: none;
  margin-top: 14px;
}

.tab-pane.active {
  display: block;
}

#tab-home.tab-pane.active {
  display: flex;
  flex-direction: column;
}

#tab-home > .login-workflow-panel {
  order: 1;
}

#tab-home > #home-dashboard-overview {
  order: 2;
}

#tab-home > .home-today-schedule {
  order: 3;
}

#tab-home > #home-tenant-status-panel {
  order: 4;
}

.global-login-box {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.global-login-box-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.global-login-box-title {
  display: none;
}

#global-login-box #session-info {
  display: none;
}

#global-login-box #btn-global-logout {
  width: auto;
  min-width: 92px;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 0.82rem;
  line-height: 1.1;
  border-radius: 11px;
  border-color: #d1bda9;
  background: linear-gradient(180deg, #f6ecea, #efdcd8);
  color: #8d2f2a;
}

#global-login-box #btn-global-logout:hover {
  background: linear-gradient(180deg, #f2e5e2, #ead2cd);
}

.sub-tab-nav {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

article.panel > .sub-tab-nav:first-child {
  margin-top: 0;
}

.bookmark-action-links {
  margin-top: 0;
}

.raw-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  flex-wrap: wrap;
}

.raw-title-row h2 {
  margin: 0;
}

.pedigree-breeding-links {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pedigree-breeding-links .sub-tab-btn {
  min-width: 106px;
  white-space: nowrap;
}

.sub-tab-btn {
  width: auto;
  min-width: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  padding: 7px 14px;
  background: var(--panel-strong);
  color: var(--ink-soft);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.sub-tab-btn:hover {
  background: var(--bg-ink);
  border-color: var(--accent);
  color: var(--accent);
}

.sub-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(31, 106, 74, 0.24);
}

/* 5/18 IA 재편: 사양관리/환경관리 sub-tab 책갈피 — 메인 메뉴 책갈피 스타일 재사용.
   sub-tab 영역 안에서는 조금 작게 + 위쪽 여백 조정. */
/* 5/18: AI 패널 action 책갈피 (.ai-action-bookmark) — 메인 책갈피 형태이나 active 상태 미사용 */
.ai-action-bookmark {
  margin: 8px 0 10px 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ai-action-btn {
  min-height: 76px;
  padding: 8px 10px;
  cursor: pointer;
}
.ai-action-btn .chapter-bookmark-title {
  font-size: 0.96rem;
}
.ai-action-btn .chapter-bookmark-desc {
  font-size: 0.78rem;
}
.ai-action-btn:hover {
  border-color: #1f6648;
  box-shadow: 0 4px 10px rgba(31,102,72,0.10);
}

/* 5/18: 법정 기록부 상세 보기 (row 클릭 시 inline expand) */
.legal-detail-dl {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 0.92rem;
}
.legal-detail-dl dt { font-weight: 700; color: #2a4136; }
.legal-detail-dl dd { margin: 0; color: #3a4a40; word-break: break-all; }
[data-legal-row]:hover { background: rgba(31,102,72,0.06); }

.feeding-sub-bookmark, .env-sub-bookmark {
  margin: 0 0 16px 0;
  padding: 8px 10px;
  background: rgba(31, 102, 72, 0.04);
  border-left: 3px solid #2a7a56;
  border-radius: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
.feeding-sub-bookmark .chapter-bookmark-btn,
.env-sub-bookmark .chapter-bookmark-btn {
  min-height: 72px;
  padding: 8px 10px;
}
.feeding-sub-bookmark .chapter-bookmark-title,
.env-sub-bookmark .chapter-bookmark-title {
  font-size: 0.98rem;
}
.feeding-sub-bookmark .chapter-bookmark-desc,
.env-sub-bookmark .chapter-bookmark-desc {
  font-size: 0.78rem;
}

.link-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
}

.pedigree-lookup-link {
  color: #1f6648;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pedigree-lookup-link:hover {
  color: #2a7a56;
}

.chapter-guide-note {
  margin-top: 8px;
}

.chapter-bookmark-grid {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

/*
 * Phase H4 — 모바일 가로 스크롤 + 스냅 (책갈피 8개로 늘어남)
 * md 미만 (768px 미만) 에서 grid 대신 가로 flex + scroll-snap 으로 전환
 */
@media (max-width: 767px) {
  .chapter-bookmark-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-3);
    padding-bottom: var(--space-2);
    /* Firefox 스크롤바 얇게 */
    scrollbar-width: thin;
  }
  .chapter-bookmark-grid::-webkit-scrollbar {
    height: 6px;
  }
  .chapter-bookmark-grid::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--radius-pill);
  }
  .chapter-bookmark-btn {
    flex: 0 0 78%;          /* 한 번에 한 개씩 (살짝 다음 카드 노출) */
    max-width: 280px;
    scroll-snap-align: start;
  }
}

/* sm 미만 (640px 미만) 더 작은 화면 */
@media (max-width: 639px) {
  .chapter-bookmark-btn {
    flex: 0 0 86%;          /* 더 큰 비중 */
    min-height: 88px;
    padding: var(--space-2) var(--space-3);
  }
  .chapter-bookmark-title {
    font-size: var(--text-base);
  }
  .chapter-bookmark-desc {
    font-size: var(--text-xs);
  }
}

.chapter-bookmark-btn {
  width: 100%;
  min-height: 104px;
  border-radius: 14px;
  border: 1px solid #d4c8b3;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  text-align: left;
  background: linear-gradient(180deg, #f8f5ec, #ece4d2);
  color: #2f4639;
  box-shadow: none;
}

.chapter-bookmark-btn:hover {
  background: linear-gradient(180deg, #f2eddf, #e6dcc6);
}

.chapter-bookmark-btn.active {
  background: linear-gradient(180deg, #f2eddf, #e6dcc6);
  border-color: #c6b79d;
  color: #2f4639;
  box-shadow: 0 6px 14px rgba(98, 85, 66, 0.14);
}

.chapter-bookmark-btn.active .chapter-bookmark-step {
  background: #dceadf;
  color: #1f6a47;
}

.chapter-bookmark-btn.active .chapter-bookmark-title,
.chapter-bookmark-btn.active .chapter-bookmark-desc {
  color: #2f4639;
}

.chapter-bookmark-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #1f6648;
  background: #e3efea;
}

.chapter-bookmark-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #1c3026;
}

.chapter-bookmark-desc {
  font-size: 0.82rem;
  line-height: 1.35;
  color: #4f6459;
}

.chapter-bookmark-group {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chapter-bookmark-group-toggle {
  margin: 0;
}

.chapter-bookmark-group.open .chapter-bookmark-group-toggle {
  background: linear-gradient(180deg, #2a7a56, #1f6648);
  border-color: #1f6648;
  color: #f4fff9;
  box-shadow: 0 8px 18px rgba(31, 102, 72, 0.22);
}

.chapter-bookmark-group.open .chapter-bookmark-step {
  background: rgba(255, 255, 255, 0.2);
  color: #f4fff9;
}

.chapter-bookmark-group.open .chapter-bookmark-title,
.chapter-bookmark-group.open .chapter-bookmark-desc {
  color: #f4fff9;
}

.chapter-bookmark-group-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid #d4c8b3;
  border-radius: 11px;
  padding: 8px;
  background: linear-gradient(180deg, #f8f5ec, #ece4d2);
}

.chapter-bookmark-group-action {
  width: auto;
  min-width: 82px;
  border-radius: 999px;
  border: 1px solid #d4c8b3;
  padding: 6px 12px;
  background: linear-gradient(180deg, #faf7ef, #eee5d4);
  color: #2a4136;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.chapter-bookmark-group-action:hover {
  background: linear-gradient(180deg, #f2eddf, #e6dcc6);
}

.chapter-bookmark-group-action.active {
  background: linear-gradient(180deg, #2a7a56, #1f6648);
  border-color: #1f6648;
  color: #fff;
}

.workflow-bookmark-grid {
  margin: 0 0 8px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
}

.workflow-bookmark-grid .chapter-bookmark-btn {
  min-height: 66px;
  min-width: 168px;
  width: auto;
  padding: 8px 10px;
  gap: 2px;
  border-radius: 12px 12px 6px 6px;
  flex: 0 0 auto;
}

.workflow-bookmark-grid .chapter-bookmark-step {
  font-size: 0.7rem;
  min-width: 36px;
  padding: 1px 7px;
}

.workflow-bookmark-grid .chapter-bookmark-title {
  font-size: 0.86rem;
  line-height: 1.2;
}

.workflow-bookmark-grid .chapter-bookmark-desc {
  font-size: 0.73rem;
  line-height: 1.2;
  white-space: nowrap;
}

.chapter-subtitle {
  margin: 12px 0 6px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.data-section {
  display: none;
  margin-top: 10px;
}

.data-section.active {
  display: block;
}

.inline-upload {
  /* D2 (5/13): design token 적용 */
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}

.inline-upload .inline-upload-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-upload .input-source-select {
  width: min(240px, 100%);
  margin: 0;
}

.inline-upload .input-source-save {
  width: auto;
  min-width: 96px;
}

.inline-upload .input-source-hint {
  margin: 6px 0 0;
  font-size: 0.83rem;
}

.inline-submit-hidden {
  display: none !important;
}

.inline-upload-link {
  width: auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #1f6a4a;
  text-decoration: underline;
  font-weight: 700;
}

.inline-upload-link:hover {
  background: transparent;
  color: #18553b;
}

.inline-upload-panel {
  margin-top: 8px;
}

.record-list {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e3d8c6;
}

.record-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.record-list-head h4 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.record-list-head .actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

.record-list-head .actions button[data-record-toggle],
.record-list-head .actions button[data-record-export],
.record-list-head .actions button[data-record-refresh] {
  width: auto;
  white-space: nowrap;
  line-height: 1.2;
  padding: 7px 12px;
}

.record-list-head .actions button[data-record-toggle] {
  min-width: 112px;
}

.record-list-head .actions button[data-record-export] {
  min-width: 120px;
}

.record-list-head .actions button[data-record-refresh] {
  min-width: 68px;
}

.record-list-head .actions input[data-record-q] {
  width: auto;
  flex: 1 1 320px;
  min-width: 220px;
}

.record-list-head input {
  min-width: 240px;
}

.record-list[data-record-list="cost"] .record-list-head .actions {
  flex-wrap: nowrap;
  align-items: center;
}

.record-list[data-record-list="cost"] .record-list-head .actions input[data-record-q] {
  flex: 1 1 220px;
  min-width: 180px;
}

.record-list[data-record-list="health"] .record-list-head {
  align-items: center;
  flex-wrap: nowrap;
}

.record-list[data-record-list="health"] .record-list-head h4 {
  flex: 0 0 auto;
  white-space: nowrap;
}

.record-list[data-record-list="health"] .record-list-head .actions {
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.record-list[data-record-list="health"] .record-list-head .actions input[data-record-q] {
  flex: 1 1 360px;
  min-width: 240px;
}

.record-list .table-wrap {
  margin-top: 8px;
}

.record-list table {
  min-width: 760px;
}

.list-panel-toggle {
  margin: 8px 0;
  display: flex;
  justify-content: flex-end;
}

.list-panel-toggle .list-panel-toggle-btn {
  width: auto;
  min-width: 136px;
}

.env-section-toggle-row {
  margin: 8px 0 6px;
  display: flex;
  justify-content: flex-start;
}

.env-section-toggle-btn {
  width: auto;
  min-width: 168px;
  font-weight: 700;
  white-space: nowrap;
}

.environment-gateway-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3d8c6;
}

.biosecurity-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.haccp-scope-host {
  margin-top: 10px;
}

/* HACCP 인증 신청·관리 워크스페이스 (Phase 1-7) */
.haccp-cert-workspace {
  margin-bottom: 16px;
}
.haccp-cert-tabs {
  display: flex;
  gap: var(--space-1);
  flex-wrap: nowrap;                           /* 한 줄 강제 */
  margin: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;                             /* 좁은 화면 가로 스크롤 */
  -webkit-overflow-scrolling: touch;
}
.haccp-cert-tab {
  flex: 1 1 0;                                  /* 균등 분포 */
  min-width: max-content;                       /* 라벨 잘림 방지 */
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
  transition: color var(--ease-fast), border-bottom-color var(--ease-fast), background var(--ease-fast);
}
@media (max-width: 639px) {
  .haccp-cert-tab {
    flex: 0 0 auto;                             /* 모바일은 고정 폭 + 가로 스크롤 */
    padding: var(--space-2);
    font-size: var(--text-xs);
  }
}
.haccp-cert-tab:hover {
  color: var(--ink);
}
.haccp-cert-tab.active {
  border-bottom-color: var(--accent);
  color: var(--accent-strong);
  font-weight: 600;
}
.haccp-cert-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(31, 106, 74, 0.35);
  border-radius: var(--radius-sm);
}
.haccp-cert-tab[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/*
 * HACCP cert pane 레이아웃 재정리 (이용자 관점):
 *  - 모바일/좁은 viewport: 세로 stack (full width)
 *  - 1024px 이상: 좌측 카드/select 280-360px 사이드바 + 우측 메인 영역 1fr
 *  - 인증 신청 탭은 좌측 list 가 8 column 표라서 항상 세로 stack
 *    (충분히 넓을 때만 좌우 split, 폼이 더 큰 비율)
 */
.haccp-cert-pane {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .haccp-cert-pane {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  }
}
/* 인증 신청 탭은 폼이 우측이며, list 가로폭이 커야 함 → 작은 화면 stack */
[data-haccp-cert-pane="application"] {
  grid-template-columns: 1fr !important;
}
@media (min-width: 1024px) {
  [data-haccp-cert-pane="application"] {
    grid-template-columns: 1fr !important;
  }
  /* 세로 2단 — 상단 신규/수정, 하단 신청서 목록 (사용자 요청) */
  [data-haccp-cert-pane="application"] .haccp-cert-form-wrap { order: 1; }
  [data-haccp-cert-pane="application"] .haccp-cert-list-wrap { order: 2; }
}

.haccp-cert-list-wrap, .haccp-cert-form-wrap {
  background: var(--surface, #fff);
  padding: 12px;
  border: 1px solid var(--border, #d0d4d9);
  border-radius: 6px;
  min-width: 0;          /* grid item 압축 허용 */
  overflow-x: auto;      /* 표가 viewport 보다 클 때 가로 스크롤 (잘림 방지) */
}

/* Phase R1 UI — audit 사용 통계 */
.audit-summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: rgba(31, 106, 74, 0.05);
  border-radius: var(--radius-md);
}
.audit-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.audit-stat-value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent-strong);
}
.audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.audit-grid h5 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Phase O3 UI — AI 정확도 dashboard */
.ai-accuracy-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: rgba(31, 106, 74, 0.05);
  border-radius: var(--radius-md);
}
.ai-accuracy-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ai-accuracy-value {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--accent-strong);
}
.ai-accuracy-models, .ai-accuracy-timeline { margin: var(--space-3) 0; }
.ai-accuracy-models h5, .ai-accuracy-timeline h5 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.ai-accuracy-model-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.ai-accuracy-model-card {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.ai-accuracy-model-card h6 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink);
}
.ai-accuracy-model-bar {
  height: 12px;
  background: var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: var(--space-1) 0;
}
.ai-accuracy-model-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--danger), var(--accent-warm), var(--accent));
  border-radius: var(--radius-pill);
  transition: width var(--ease-slow);
}
.ai-accuracy-model-stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--muted);
}
.ai-accuracy-chart svg { display: block; max-width: 100%; }
.ai-accuracy-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}
.ai-accuracy-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-accuracy-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Phase O1 UI — 알림 설정 */
.notif-prefs-table th, .notif-prefs-table td {
  vertical-align: middle;
}
.notif-prefs-table .notif-trigger-name {
  font-weight: 500;
}
.notif-prefs-table .notif-trigger-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}
.notif-prefs-table input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--accent);
}
.notif-prefs-table td:not(:first-child) {
  text-align: center;
}
.notif-prefs-table tr.is-saving {
  background: rgba(31, 106, 74, 0.08);
}

/* Phase Q2 — collapsible (접기/펴기) */
.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--ease-fast);
  font-size: var(--text-md);
  color: var(--ink);
}
.collapsible-toggle:hover { background: var(--bg-ink); }
.collapsible-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.collapsible-arrow {
  display: inline-block;
  transition: transform var(--ease-normal);
  font-size: 0.8em;
  color: var(--accent);
}
.collapsible[data-collapsed="true"] .collapsible-arrow {
  transform: rotate(-90deg);
}
.collapsible[data-collapsed="true"] .collapsible-body {
  display: none;
}

/* form-wrap 안의 nested .grid.compact 는 부모 폭에 맞춰 더 큰 컬럼 사용 */
.haccp-cert-form-wrap .grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.haccp-cert-form-wrap fieldset .grid.compact {
  /* fieldset 안 중첩 grid 는 더 좁아질 수 있도록 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.haccp-cert-form-wrap .grid-span-2 { grid-column: span 2; }
.haccp-cert-form-wrap .hint {
  font-size: 0.82rem;
  color: var(--muted, #6b7280);
  margin-top: 8px;
}
.status { padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; }
.status-draft { background: #eef2f7; color: #475569; }
.status-submitted { background: #fef3c7; color: #92400e; }
.status-approved { background: #d1fae5; color: #065f46; }
.status-rejected { background: #fee2e2; color: #991b1b; }
.status-expired { background: #e5e7eb; color: #6b7280; }

/* HACCP 12절차 마법사 (Phase 1-8) */
.haccp-plan-wizard {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--accent, #4a7cff);
  border-radius: 8px;
  background: var(--surface, #fafbfd);
}
.haccp-plan-wizard-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.haccp-plan-wizard-head h5 {
  margin: 0;
  font-size: 1rem;
}
.haccp-plan-wizard-head .haccp-plan-wizard-app-info {
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
}
.haccp-plan-wizard-head button { margin-left: auto; }
.haccp-plan-step-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
  border-bottom: 1px solid var(--border, #d0d4d9);
}
.haccp-plan-step-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  color: inherit;
}
.haccp-plan-step-btn.active {
  border-bottom-color: var(--accent, #4a7cff);
  font-weight: 600;
}
.haccp-plan-step-pane {
  background: var(--surface, #fff);
  padding: 10px;
  border-radius: 6px;
}
.haccp-plan-step-pane h6 {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
}
.haccp-plan-step-pane h6.sub {
  margin-top: 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 12px;
}
.help-btn {
  font-size: 0.75rem;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
  background: transparent;
  border: 1px solid var(--accent, #4a7cff);
  color: var(--accent, #4a7cff);
  border-radius: 4px;
  cursor: pointer;
}
.help-btn:hover { background: var(--accent, #4a7cff); color: #fff; }

/* Phase 14-N1 — 모바일 AI 패널 가로스크롤 + N5 강조 */
/* breakpoint: md 미만 (< 768px) */
@media (max-width: 767px) {
  .ai-panel { overflow-x: auto; }
  .ai-panel table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 0.85rem;
  }
  .data-table { font-size: 0.85rem; }
  .data-table th, .data-table td {
    padding: 4px 6px;
  }
}
.ai-flash {
  animation: ai-flash-anim 1.6s ease-out 1;
}
@keyframes ai-flash-anim {
  0% { box-shadow: 0 0 0 0 rgba(31, 106, 74, 0.6); }
  30% { box-shadow: 0 0 0 8px rgba(31, 106, 74, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(31, 106, 74, 0); }
}

/* Phase 10-1 — 일반 영역 인쇄 (혈통·선발·교배 결과) */
@media print {
  body.has-print-region > * { visibility: hidden; }
  .print-region, .print-region * { visibility: visible !important; }
  .print-region {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    background: #fff;
    padding: 12mm;
  }
  .print-region button,
  .print-region .actions { display: none !important; }
  /* 5/25 — 법정 기록부 프린트: 입력 폼/첨부 추가 UI 숨기고 제목+목록 표만 인쇄 */
  .print-region .legal-form,
  .print-region .legal-list-head,
  .print-region .legal-attach-add { display: none !important; }
  .print-region.legal-card > summary { list-style: none; font-weight: 700; }
}
.print-region:not([hidden]) ~ body { /* placeholder for body class toggle */ }

/* Phase 9-C1 — AI 버튼 로딩 상태 시각 */
button.ai-busy {
  opacity: 0.65;
  cursor: progress;
  background-image: linear-gradient(110deg,
    transparent 0%, rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.25) 60%,
    transparent 100%);
  background-size: 200% 100%;
  animation: ai-busy-shimmer 1.4s linear infinite;
}
@keyframes ai-busy-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Phase 9-C4 — 필수 필드 시각 표시 (빨간 *) */
label:has(input[required])::before,
label:has(textarea[required])::before,
label:has(select[required])::before {
  content: "* ";
  color: #dc2626;
  font-weight: 700;
  margin-right: 2px;
}
/* :has() 미지원 환경 대비 — 명시적 .required 클래스도 지원 */
label.required::before,
.field-required::before {
  content: "* ";
  color: #dc2626;
  font-weight: 700;
  margin-right: 2px;
}
/* 입력 중 invalid 강조 (사용자가 빈 채로 떠나거나 잘못 입력 시) */
input[required]:user-invalid,
textarea[required]:user-invalid,
select[required]:user-invalid {
  border-color: #dc2626;
  outline-color: #dc2626;
}

/* HACCP 신청서 미리보기 모달 (Phase 1-10) */
.haccp-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 950;
  overflow: auto;
  padding: 20px;
}
.haccp-preview-modal[hidden] { display: none; }
.haccp-preview-actions {
  position: sticky;
  top: 0;
  z-index: 951;
  background: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.haccp-preview-actions .hint { margin: 0 0 0 auto; max-width: 60%; font-size: 0.78rem; color: #6b7280; }
.haccp-pdf-doc {
  background: #fff;
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 36px;
  border-radius: 4px;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #111827;
  line-height: 1.55;
}
.haccp-pdf-header h1 { margin: 0 0 6px 0; font-size: 1.4rem; }
.haccp-pdf-header .haccp-pdf-meta { margin: 0; color: #6b7280; font-size: 0.85rem; }
.haccp-pdf-section { margin-top: 20px; page-break-inside: avoid; }
.haccp-pdf-section h2 { font-size: 1.1rem; border-bottom: 2px solid #1f2937; padding-bottom: 4px; margin: 16px 0 10px; }
.haccp-pdf-section h3 { font-size: 0.98rem; margin: 12px 0 4px; }
.haccp-pdf-table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 0.88rem; }
.haccp-pdf-table th, .haccp-pdf-table td { border: 1px solid #1f2937; padding: 6px 8px; text-align: left; vertical-align: top; }
.haccp-pdf-table th { background: #f3f4f6; font-weight: 600; }
.haccp-pdf-kv { display: grid; grid-template-columns: 220px 1fr; gap: 4px 12px; font-size: 0.88rem; }
.haccp-pdf-kv dt { font-weight: 600; color: #374151; }
.haccp-pdf-kv dd { margin: 0; }
.haccp-pdf-pre { background: #f9fafb; padding: 8px 10px; border-radius: 4px; white-space: pre-wrap; margin: 4px 0; font-family: inherit; font-size: 0.88rem; }
.haccp-pdf-ccp-card { border: 1px solid #d1d5db; padding: 10px 12px; margin: 8px 0; border-radius: 4px; }
.haccp-pdf-ccp-card h3 { margin-top: 0; }
.haccp-pdf-footer { margin-top: 28px; padding-top: 12px; border-top: 1px solid #d1d5db; font-size: 0.8rem; color: #4b5563; }

/* 인쇄 시 모달 외 모든 요소 숨김 */
@media print {
  body * { visibility: hidden !important; }
  #haccp-preview-modal,
  #haccp-preview-modal * { visibility: visible !important; }
  #haccp-preview-modal {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: #fff;
    padding: 0;
    box-shadow: none;
  }
  #haccp-preview-modal .haccp-preview-actions,
  #haccp-certificate-modal .haccp-preview-actions { display: none !important; }
  .haccp-pdf-doc { box-shadow: none; max-width: 100%; padding: 12mm; }
}

/* HACCP 인증서 (별지 제1호의5) 양식 (Phase 6) */
.haccp-cert-doc {
  border: 3px double #1f2937;
  padding: 28px 36px;
  margin: 12px 0;
  background: #fffdf6;
  font-family: 'Noto Serif KR', 'Batang', serif;
}
.haccp-cert-doc-header { text-align: center; margin-bottom: 18px; }
.haccp-cert-doc-header .cert-form-meta {
  font-size: 0.78rem; color: #6b7280; margin: 0 0 8px;
  text-align: right;
}
.haccp-cert-doc-header .cert-form-no {
  font-size: 1rem; margin: 0 0 14px; text-align: left;
}
.haccp-cert-doc-header .cert-title {
  font-size: 1.7rem;
  letter-spacing: 8px;
  margin: 18px 0 24px;
  font-weight: 700;
}
.cert-table th { background: #fef9c3; width: 24%; }
.cert-clause {
  margin: 22px 0;
  padding: 14px 18px;
  background: #f3f4f6;
  border-left: 4px solid #1f2937;
  font-size: 0.95rem;
  line-height: 1.7;
}
.cert-date {
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 4px;
  margin: 24px 0 12px;
}
.cert-issuer {
  text-align: center;
  margin: 12px 0 24px;
}
.cert-issuer-name {
  font-size: 1.2rem;
  letter-spacing: 4px;
}
.cert-paper {
  text-align: right;
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 24px;
}

/* HACCP 일상 기록 (Phase 2-5) */
.haccp-daily-alerts {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 8px 0 16px;
}
@media (min-width: 768px) {
  .haccp-daily-alerts { grid-template-columns: repeat(3, 1fr); }
}
.haccp-alert {
  /* D2 (5/13): design token 적용 — .card 시각언어와 일관 */
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.haccp-alert header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.haccp-alert h6 { margin: 0; font-size: 0.92rem; }
.haccp-alert .alert-count {
  background: var(--accent, #4a7cff);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.haccp-alert ul { margin: 8px 0 0; padding-left: 18px; font-size: 0.85rem; }
.haccp-alert li.muted { color: #6b7280; list-style: none; padding-left: 0; }
.haccp-daily-nav {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.haccp-daily-nav select { min-width: 280px; }
.haccp-daily-nav .haccp-daily-add {
  background: var(--accent, #2f8a4f);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  margin-left: auto;
}
.haccp-daily-nav .haccp-daily-add:hover { filter: brightness(0.92); }

/* Phase R-layout — daily/verification/documents/agency 풀너비 1열
   (application 만 좌측 신청서 목록 + 우측 신규·수정 가로 2단 유지 — 사용자 요청) */
@media (min-width: 1024px) {
  .haccp-cert-pane[data-haccp-cert-pane="daily"],
  .haccp-cert-pane[data-haccp-cert-pane="verification"],
  .haccp-cert-pane[data-haccp-cert-pane="documents"],
  .haccp-cert-pane[data-haccp-cert-pane="agency"] {
    grid-template-columns: 1fr;
  }
}

/* 신규 입력 폼 기본 접힘 (옵션 C — 사용자가 + 버튼 클릭 시 펼침) */
.haccp-daily-card form[data-haccp-daily-form] { display: none; }
.haccp-daily-card[data-show-form="true"] form[data-haccp-daily-form] { display: grid; }

/* Phase R-layout v2 — verification 자체평가 메타 details (옵션 C drawer) */
.haccp-eval-meta {
  grid-column: 1 / -1;
  border: 1px solid var(--border, #d0d4d9);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--surface, #fff);
}
.haccp-eval-meta > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.haccp-eval-meta > summary::-webkit-details-marker { display: none; }
.haccp-eval-meta > summary::before {
  content: '▶';
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.haccp-eval-meta[open] > summary::before { transform: rotate(90deg); }
.haccp-eval-meta-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  margin-top: 12px;
}
.haccp-eval-meta-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.haccp-eval-meta-actions button { flex: 0 0 auto; }

/* Phase R-fold ext — external 6 그룹 collapsible (사용자 요청 6 → modal 외부 5 + modal 안 별도) */
.ext-group {
  border: 1px solid var(--border, #d0d4d9);
  border-radius: 8px;
  margin-bottom: 12px;
  background: var(--surface, #fff);
  overflow: hidden;
}
.ext-group > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 16px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2, #f5f7fa);
  user-select: none;
}
.ext-group > summary::-webkit-details-marker { display: none; }
.ext-group > summary::before {
  content: '▶';
  font-size: 0.85em;
  transition: transform 0.15s ease;
}
.ext-group[open] > summary::before { transform: rotate(90deg); }
.ext-group > summary:hover { background: var(--accent-soft, #e8f0fe); }
.ext-group[open] > *:not(summary) { padding: 0 16px 12px; }

/* Phase R-fold misc — record-list / inline-upload 폴딩 (평소 접힘, 클릭 펼침) */
.record-list[data-collapsed="true"] > *:not(.record-list-head) { display: none; }
.record-list .record-list-head {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.record-list .record-list-head::before {
  content: '▼';
  font-size: 0.85em;
  color: var(--muted, #6b7280);
  transition: transform 0.15s ease;
  display: inline-block;
}
.record-list[data-collapsed="true"] .record-list-head::before { transform: rotate(-90deg); }
.record-list .record-list-head h4,
.record-list .record-list-head h5 { margin: 0; flex: 1; }

.inline-upload[data-collapsed="true"] > .inline-upload-panel { display: none !important; }
.inline-upload .inline-upload-link {
  background: none;
  border: 1px dashed var(--border, #d0d4d9);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--accent, #2f8a4f);
}
.inline-upload .inline-upload-link::before {
  content: '📎 ';
}

.haccp-daily-card {
  border: 1px solid var(--border, #d0d4d9);
  border-radius: 6px;
  padding: 12px;
  background: var(--surface, #fff);
}
.haccp-daily-card[hidden] { display: none; }
.haccp-daily-card h5 { margin-top: 0; }
.haccp-daily-card .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.haccp-daily-card form { margin-top: 10px; }

.health-disease-block {
  margin-top: 16px;
}

.environment-gateway-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.environment-gateway-head h4 {
  margin: 0;
  font-size: 1rem;
}

.biosecurity-head-actions {
  margin-left: auto;
  justify-content: flex-end;
}

.biosecurity-scope-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #bfd5c8;
  border-radius: 999px;
  background: #eef7f1;
  color: #1f6a46;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.biosecurity-head-actions button {
  width: auto;
  min-width: 120px;
}

.biosecurity-checklist-panel {
  margin-top: 10px;
}

.biosecurity-inspector-toggle-row {
  margin: 8px 0 2px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.biosecurity-inspector-toggle-btn {
  width: auto;
  min-width: 92px;
  padding: 5px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.biosecurity-inspector-toggle-btn.active {
  background: #28784f;
  color: #fff;
  border-color: #28784f;
}

.biosecurity-section-toggle-btn {
  width: auto;
  min-width: 110px;
}

.biosecurity-section-toggle-btn.active {
  background: #28784f;
  color: #fff;
  border-color: #28784f;
}

.biosecurity-review-actions {
  margin-left: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.biosecurity-review-actions > input {
  min-width: 240px;
  flex: 1 1 320px;
}

.biosecurity-review-buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.biosecurity-review-btn {
  width: auto;
  min-width: 88px;
  padding: 5px 10px;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}

#btn-biosecurity-submit-entry,
#btn-biosecurity-export-entry,
#btn-biosecurity-toggle-corrective,
#btn-biosecurity-refresh-corrective,
#btn-biosecurity-toggle-entries,
#btn-biosecurity-refresh-entries {
  width: auto;
  min-width: 108px;
}

#environment-form .env-form-field,
#env-policy-form .env-form-field,
#env-control-form .env-form-field {
  gap: 4px;
}

#environment-form .env-form-field-title,
#env-policy-form .env-form-field-title,
#env-control-form .env-form-field-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #2e4a3c;
}

.env-status-chip,
.env-ack-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid #d4c8b3;
  background: #f1ebde;
  color: #3a4f43;
}

.env-status-chip.ok,
.env-ack-chip.ack {
  border-color: rgba(35, 120, 82, 0.35);
  background: rgba(31, 106, 74, 0.14);
  color: #195239;
}

.env-status-chip.warn,
.env-ack-chip.queued,
.env-ack-chip.sent {
  border-color: rgba(145, 109, 45, 0.35);
  background: rgba(140, 106, 44, 0.16);
  color: #5f4513;
}

.env-status-chip.critical,
.env-ack-chip.failed {
  border-color: rgba(143, 47, 43, 0.36);
  background: rgba(143, 47, 43, 0.12);
  color: #7e2a27;
}

.env-status-chip.unknown {
  border-color: #d4c8b3;
  background: #f1ebde;
  color: #3a4f43;
}

.layout {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.panel {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 18px;                /* 큰 컨테이너 — radius-xl(12)보다 큼 (의도) */
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
  min-width: 0;                       /* grid item 압축 허용 */
}

/* .panel.card — .card 클래스를 .panel 위에 추가하면 더 단순한 카드 룩으로 전환 가능 */
.panel.card {
  margin-top: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  backdrop-filter: none;
}

.full {
  grid-column: 1 / -1;
}

h2 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.section-head-with-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.section-head-with-switch h2 {
  margin: 0;
}

.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.view-switch-btn {
  width: auto;
  min-width: 106px;
  border-radius: 999px;
  border: 1px solid #d4c8b3;
  padding: 6px 12px;
  background: linear-gradient(180deg, #f8f5ec, #ece4d2);
  color: #2a4136;
  font-weight: 700;
  font-size: 0.82rem;
}

.view-switch-btn:hover {
  background: linear-gradient(180deg, #f2eddf, #e6dcc6);
}

.view-switch-btn.active {
  background: linear-gradient(180deg, #2a7a56, #1f6648);
  border-color: #1f6648;
  color: #fff;
  box-shadow: 0 6px 14px rgba(31, 102, 72, 0.24);
}

h3 {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  /* 자식이 부모 폭을 밀어내지 않도록 */
  min-width: 0;
}

/*
 * .grid 내부 모든 자식에 min-width:0 적용 — Firefox Grid Inspector 에서 보이듯이
 * input/label 의 min-content 가 그리드 트랙을 강제로 늘리는 현상 방지.
 * Chrome DevTools 의 "Show overflow" 표시도 함께 해소.
 */
.grid > * {
  min-width: 0;
}

.grid label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.grid input,
.grid select,
.grid textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Phase R-fix — checkbox/radio 는 stretch 제외 (자체 크기 유지) */
.grid input[type="checkbox"],
.grid input[type="radio"] {
  width: auto;
}
/* Phase R-fix — label 안 input 도 stretch (label > input 패턴) */
.grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.grid label.checkbox,
.grid label[class*="checkbox"] {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.compact {
  /*
   * minmax(min(100%, 140px), 1fr) — viewport 가 좁을 때 컬럼 폭이
   * 140px 보다 작은 viewport 폭까지 줄어듦. 영어/긴 번역 라벨에서
   * 오른쪽 overflow / 가로 스크롤바 발생 방지.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.form-stack {
  display: grid;
  gap: 10px;
}

.compact h3 {
  grid-column: 1 / -1;
}

#health-form .health-form-title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink-soft);
}

#pig-form .pig-form-head-inline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

#pig-form .pig-form-head-inline h3 {
  margin: 0;
  flex: 0 0 auto;
}

#pig-form .pig-form-head-inline .muted {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-submit {
  display: grid;
  align-items: end;
}

.inline-submit button {
  min-height: 42px;
}

#tab-login > .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 238, 225, 0.88)),
    linear-gradient(140deg, rgba(31, 106, 74, 0.04), rgba(140, 106, 44, 0.03));
  border-color: #d8cbb7;
  box-shadow: 0 12px 28px rgba(28, 44, 35, 0.09);
}

#tab-login #login-form {
  margin-top: 6px;
  gap: 12px;
}

#tab-login #login-form label {
  font-weight: 700;
  color: #29473a;
}

#tab-login #login-form input,
#tab-login #login-form select {
  background: rgba(255, 255, 255, 0.96);
  border-color: #ccbda3;
}

#tab-login #login-form .inline-submit {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 6px;
  align-self: end;
}

#tab-login #login-form .inline-submit > button {
  flex: 0 0 auto;
  width: auto;
  min-width: 92px;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 0.82rem;
  line-height: 1.1;
  border-radius: 11px;
}

.login-extra-actions {
  grid-column: 1 / -1;
}

#tab-login.is-authenticated #login-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#tab-login.tab-pane.active.is-authenticated {
  display: block;
}

#tab-login.is-authenticated .login-workflow-panel {
  margin-top: 14px;
}

#tab-login.is-authenticated #login-form .inline-submit {
  margin-top: 0;
}

#tab-login.is-authenticated .signup-shortcut {
  display: none;
}

.signup-shortcut a {
  color: #205d41;
  font-weight: 700;
}

#dashboard-top-links {
  margin-top: 0;
  padding: 14px;
  border: 1px solid #dfd4c2;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(247, 244, 235, 0.95), rgba(241, 235, 221, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  overflow: hidden;
  align-items: stretch;
}

#dashboard-top-links .chapter-bookmark-btn {
  width: 100%;
  min-width: 0;
  min-height: 76px;
  border-radius: 11px;
  padding: 8px 10px;
}

#dashboard-top-links .chapter-bookmark-group {
  width: 100%;
}

.login-workflow-panel {
  margin-top: 14px;
}

.login-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}

.login-overview-card {
  border: 1px solid #d9cdb9;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 240, 226, 0.9)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(31, 106, 74, 0.05));
  padding: 14px;
  box-shadow: 0 10px 24px rgba(34, 52, 42, 0.08);
}

.login-overview-card h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: #173629;
}

.workflow-tab-nav {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 10px;
  padding: 0;
}

#workflow-tab-nav {
  /* UI-fix-1 (5/13): 7 fixed cols → auto-fit. 영어 긴 텍스트 시 wrap 허용 + 카드 잘림 방지 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.workflow-nav-card h4,
.workflow-nav-card h5,
.workflow-nav-card .title {
  /* UI-fix-1 (5/13): 카드 제목 ellipsis 차단 + 줄바꿈 허용 (영어 긴 단어 대응) */
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.workflow-nav-card {
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 10px 12px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--panel-strong);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.workflow-nav-card.active {
  border-color: #1f6648;
  box-shadow: 0 9px 22px rgba(31, 102, 72, 0.2);
}

.workflow-nav-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(31, 102, 72, 0.14);
  border-color: #bfae91;
}

.workflow-tab-btn {
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-ink);
  color: var(--ink);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  box-shadow: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.workflow-tab-btn:hover {
  background: var(--bg-ink);
  border-color: var(--accent);
  color: var(--accent);
}

.workflow-tab-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.workflow-tab-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(31, 106, 74, 0.22);
}

.workflow-tab-title {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: normal;
}

.workflow-nav-desc {
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  line-height: 1.36;
  color: #3e5c4f;
  word-break: keep-all;
}

.workflow-nav-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
  color: #3e5c4f;
}

.workflow-nav-list li {
  font-size: 0.79rem;
  line-height: 1.36;
}

.pedigree-kpi-grid.kpi-grid {
  margin-top: 8px;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.pedigree-subtab-pane {
  margin-top: 10px;
}

.pedigree-subtab-pane.active {
  display: block;
}

.pedigree-lookup-form {
  margin-top: 8px;
}

.pedigree-lookup-top-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.pedigree-lookup-field {
  max-width: 360px;
}

.pedigree-lookup-actions {
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 164px;
}

.pedigree-action-btn {
  width: auto;
  min-width: 164px;
  padding: 6px 10px;
  line-height: 1.2;
  border-radius: 10px;
}

.pedigree-stock-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e3d8c6;
}

.raw-pedigree-panel {
  margin-top: 18px;
}

.pedigree-result-panel {
  margin-top: 10px;
}

.pedigree-result-head {
  align-items: center;
}

.pedigree-result-head .muted {
  margin: 0;
}

.management-profit-panel {
  margin-top: 14px;
}

.management-profit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.management-profit-card {
  padding: 12px;
  border: 1px solid #e3d8c6;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
}

.management-profit-card h5 {
  margin: 0 0 8px;
  font-size: 0.98rem;
  color: #1f3a2d;
}

.management-profit-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.management-profit-action-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #d8c9b2;
  background: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(246, 239, 225, 0.82));
}

.management-profit-action-card h5 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #1f3a2d;
}

.management-profit-action-card p {
  margin: 0;
  line-height: 1.5;
  color: #375144;
}

.management-profit-action-card.good {
  border-color: #99c0a6;
}

.management-profit-action-card.warn {
  border-color: #d3a97c;
}

.cost-view-pane {
  margin-top: 12px;
}

.cost-view-pane.active {
  display: block;
}

.management-analysis-view-pane {
  margin-top: 12px;
}

.management-analysis-view-pane.active {
  display: block;
}

.pedigree-stock-head h3 {
  margin: 0;
  font-size: 0.98rem;
  color: #1f3a2d;
}

.pedigree-stock-toolbar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pedigree-stock-toolbar select,
.pedigree-stock-toolbar input {
  width: auto;
  min-width: 180px;
}

.pedigree-stock-table {
  margin-top: 8px;
}

.pedigree-stock-link {
  color: #1f6648;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pedigree-stock-link:hover {
  color: #2a7a56;
}

.pedigree-stock-row.is-selected {
  background: rgba(42, 122, 86, 0.09);
}

.help-subtab-pane {
  margin-top: 10px;
}

.help-subtab-pane.active {
  display: block;
}

.pedigree-layout {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.pedigree-card .table-wrap {
  max-height: 320px;
}

.pedigree-card h3 {
  margin: 0 0 8px;
  color: #1f3a2d;
}

.pedigree-json-wrap {
  margin-top: 10px;
}

.pedigree-json-wrap > summary {
  cursor: pointer;
  font-weight: 700;
  color: #234739;
}

.legacy-pane {
  display: none !important;
}

.consent-inline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #dfd4c2;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
}

.consent-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
}

.consent-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

.consent-status {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.carcass-grade-hint {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px dashed #d8ccbb;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
}

.carcass-grade-hint .muted {
  margin: 3px 0;
}

.consent-proof-box {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #dfd4c2;
  border-radius: 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
  display: grid;
  gap: 8px;
}

label {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
}

label:has(> [required]) > span:first-child::after {
  content: " *";
  color: var(--danger);
  font-weight: bold;
}

input,
select,
button {
  width: 100%;
  min-width: 0;
  border: 1px solid #d0c6b3;
  border-radius: 11px;
  padding: 9px 10px;
  background: var(--panel-strong);
  color: var(--ink);
}

input:focus,
select:focus,
button:focus {
  outline: none;
  border-color: #2b7855;
  box-shadow: 0 0 0 3px rgba(43, 120, 85, 0.16);
}

button {
  cursor: pointer;
  font-weight: 700;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transition: background .14s ease, box-shadow .14s ease, transform .05s ease, border-color .14s ease;
}

button:hover {
  background: var(--accent-strong);
  box-shadow: var(--shadow-soft);
}

button:active {
  transform: translateY(1px);
}

button.ghost {
  background: var(--panel-strong);
  border-color: var(--border);
  color: var(--ink);
}

button.ghost:hover {
  background: var(--bg-ink);
  border-color: var(--accent);
  color: var(--accent);
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.grid .actions {
  grid-column: 1 / -1;
}

.wrap {
  margin-bottom: 8px;
}

.muted {
  margin: 8px 0 0;
  color: var(--ink-soft);
  line-height: 1.45;
}

.mini-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.mini-list li {
  margin: 4px 0;
}

.checklist-title {
  margin: 12px 0 6px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.checklist li label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.checklist input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

/* Phase R-fix — HOME 카드 그리드 우측 끝 정렬 (auto-fit 카드 폭 stretch) */
@media (min-width: 1024px) {
  .home-daily-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .chapter-bookmark-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  #dashboard-kpi-cards.kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.mating-plan-top-layout {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.mating-cycle-status-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mating-cycle-status-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #244437;
}

.mating-cycle-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #d3c6b1;
  background: #efe8d9;
  color: #3e5547;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.25;
}

.mating-cycle-status-badge.open {
  border-color: rgba(34, 125, 82, 0.4);
  background: rgba(31, 106, 74, 0.14);
  color: #174f37;
}

.mating-cycle-status-badge.closed {
  border-color: rgba(116, 64, 49, 0.4);
  background: rgba(141, 82, 62, 0.14);
  color: #5f2f20;
}

.mating-cycle-status-badge.unknown {
  border-color: rgba(108, 104, 95, 0.42);
  background: rgba(147, 137, 121, 0.13);
  color: #574f43;
}

.mating-cycle-status-meta {
  font-size: 0.78rem;
}

.mating-plan-summary-grid.kpi-grid {
  margin: 0;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}

.mating-plan-summary-grid .kpi-card {
  padding: 8px 9px;
}

.mating-plan-summary-grid .kpi-card .label {
  font-size: 0.76rem;
  line-height: 1.2;
}

.mating-plan-summary-grid .kpi-card .value {
  margin-top: 3px;
  font-size: 0.96rem;
}

.mating-plan-actions-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-self: stretch;
  min-width: 148px;
}

.mating-plan-mini-btn {
  width: auto;
  min-width: 148px;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: 10px;
}

.distribution-head {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.distribution-summary-grid.kpi-grid {
  margin: 0;
  gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  flex: 1 1 680px;
}

.distribution-summary-grid .kpi-card {
  padding: 8px 9px;
}

.distribution-head-actions {
  margin-left: auto;
}

.distribution-head-actions button {
  width: auto;
}

.distribution-product-actions {
  justify-content: flex-end;
}

.distribution-product-actions button {
  width: auto;
}

.dashboard-block {
  margin-top: 12px;
}

.dashboard-bottom-schedule {
  margin-top: 14px;
}

.dashboard-block h3,
.dashboard-bottom-schedule h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: #1f3a2d;
}

.today-schedule-list {
  margin: 0;
  padding: 12px 14px;
  list-style: disc;
  border: 1px solid #d3c4ab;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefb, #f6efdf);
  color: #244437;
}

.today-schedule-list li {
  margin-left: 18px;
  padding: 3px 0;
}

.dashboard-herd-table th,
.dashboard-herd-table td {
  text-align: center;
}

.dashboard-herd-table th:first-child,
.dashboard-herd-table td:first-child {
  text-align: left;
}

.dashboard-herd-row-label {
  font-weight: 800;
  background: rgba(246, 241, 229, 0.72);
}

.dashboard-herd-total-col {
  background: rgba(241, 234, 221, 0.72);
  color: #18382d;
}

.dashboard-herd-total-col strong {
  font-weight: 800;
}

tbody tr.total-row td {
  font-weight: 800;
  background: rgba(42, 122, 86, 0.08);
}

.quick-actions-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.quick-action-btn {
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid #d4c8b3;
  background: linear-gradient(180deg, #f7f3ea, #e9dfcc);
  color: #2f4639;
  font-weight: 700;
  box-shadow: none;
}

.quick-action-btn:hover {
  background: linear-gradient(180deg, #f1ebdd, #e2d5bc);
}

.chapter-home-floating {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: auto;
  min-width: 126px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #1f6648;
  box-shadow: 0 10px 22px rgba(20, 44, 33, 0.24);
  z-index: 60;
}

.kpi-card {
  border: 1px solid #ddd3c2;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f9f5eb);
  padding: 10px;
}

.kpi-card .label {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.kpi-card .value {
  margin-top: 4px;
  font-size: 1.02rem;
  font-weight: 700;
}

.badge {
  display: inline-block;
  margin-top: 6px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.74rem;
  font-weight: 700;
}

.badge.ok {
  background: #d5eedf;
  color: #1f5838;
}

.badge.warn {
  background: #ffecc2;
  color: #7b5717;
}

.badge.critical {
  background: #ffd9d8;
  color: #8b2a2a;
}

.badge.unknown {
  background: #ebe6dc;
  color: #61615d;
}

.json-block {
  border: 1px solid #ddd3c2;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
  padding: 10px;
  max-height: 260px;
  overflow: auto;
  font-size: 0.82rem;
}

.help-frame {
  width: 100%;
  min-height: 980px;
  border: 1px solid #ddd3c2;
  border-radius: 12px;
  background: #fbfaf4;
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

.kv-grid div {
  border: 1px solid #e1d7c5;
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
}

.kv-grid dt {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.kv-grid dd {
  margin: 4px 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #253f33;
}

.my-panel-tabs {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.my-panel-tab {
  min-height: 40px;
}

.my-panel-tab.active {
  border-color: rgba(27, 112, 76, 0.5);
  background: linear-gradient(180deg, rgba(41, 126, 88, 0.2), rgba(26, 93, 65, 0.16));
  color: #1f5f43;
}

.my-panel-body {
  margin-top: 10px;
}

.my-panel-body form {
  border: 1px solid #e1d7c5;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
}

.inline-field-btn {
  align-self: end;
  min-height: 42px;
}

.dashboard-inline-panels {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-inline-card {
  border: 1px solid #e1d7c5;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
}

.selection-layout {
  margin-top: 8px;
  display: grid;
  /* 5/25: 수퇘지 패널 숨김 → 암퇘지 패널 단일 컬럼 전폭 */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.selection-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.selection-topbar h2 {
  margin: 0;
}

.selection-top-actions {
  margin-left: auto;
  justify-content: flex-end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  min-width: 164px;
}

.selection-action-btn {
  width: auto;
  min-width: 164px;
  padding: 6px 10px;
  line-height: 1.2;
  border-radius: 10px;
}

.selection-card {
  border: 1px solid #e1d7c5;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
}

.selection-card h3 {
  margin: 0 0 8px;
}

.selection-ops-card {
  margin-top: 10px;
}

.selection-table {
  min-width: 980px;
}

.selection-ops-table {
  min-width: 720px;
}

.selection-link-btn {
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #1f6a4a;
  font-weight: 800;
  text-decoration: underline;
  box-shadow: none;
}

.selection-link-btn:hover {
  background: transparent;
  color: #18553b;
}

.mating-focus-row td {
  background: rgba(42, 122, 86, 0.12);
}

.mating-manual-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3d8c6;
}

.mating-sow-selector {
  margin-top: 0;
}

.mating-sow-row.active td {
  background: rgba(42, 122, 86, 0.1);
}

.mating-sow-link {
  width: auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #1f6a4a;
  font-weight: 800;
  text-decoration: underline;
  box-shadow: none;
}

.mating-sow-link:hover {
  background: transparent;
  color: #18553b;
}

.mating-open-btn {
  width: auto;
  min-width: 82px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
}

.mating-candidate-toolbar {
  margin: 8px 0 10px;
  display: flex;
  justify-content: flex-end;
}

.mating-external-toolbar {
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mating-external-toolbar input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}

.mating-external-toolbar select {
  width: auto;
  min-width: 132px;
}

#mating-external-filter-status {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 0.78rem;
}

.mating-candidate-external-btn {
  width: auto;
  min-width: 122px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.mating-candidate-action,
.mating-confirm-remove-btn {
  width: auto;
  min-width: 66px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

.mating-candidate-selected td {
  background: rgba(42, 122, 86, 0.1);
}

.mating-source-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  border: 1px solid #d4c8b3;
  background: #f1ebde;
  color: #3a4f43;
}

.mating-source-chip.internal {
  border-color: rgba(35, 120, 82, 0.35);
  background: rgba(31, 106, 74, 0.14);
  color: #195239;
}

.mating-source-chip.external {
  border-color: rgba(145, 109, 45, 0.35);
  background: rgba(140, 106, 44, 0.16);
  color: #5f4513;
}

.modal-card.modal-wide {
  width: min(1200px, 96vw);
}

.selection-rl-box {
  margin-top: 12px;
  border: 1px solid #e1d7c5;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
  padding: 8px 10px;
}

.ai-panel-toggle {
  cursor: pointer;
  user-select: none;
}

.selection-rl-toggle {
  cursor: pointer;
  font-weight: 700;
  color: #274a3b;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 0.92rem;
  text-align: left;
  width: 100%;
}

.guide-photo-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guide-photo-card {
  margin: 0;
  border: 1px solid #ddd3c2;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.guide-photo-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.guide-photo-card figcaption {
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.guide-details {
  margin-top: 10px;
  border: 1px solid #e1d7c5;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
  padding: 8px 10px;
}

.guide-details summary {
  cursor: pointer;
  font-weight: 700;
  color: #274a3b;
}

.guide-details ol {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}

.guide-details p {
  margin: 8px 0 0;
  color: var(--ink-soft);
}

.reference-viewer-wrap {
  margin-top: 10px;
}

.reference-pdf-frame {
  width: 100%;
  min-height: 760px;
  border: 1px solid #ddd3c2;
  border-radius: 12px;
  background: #fbfaf4;
}

.reference-title-link {
  border: 0;
  background: transparent;
  color: #1f6a4a;
  padding: 0;
  text-decoration: underline;
  font-weight: 700;
  width: auto;
}

.reference-title-link:hover {
  color: #18553b;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: auto;
  max-height: 480px;
  background: var(--panel-strong);
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  background: #f8f4ed;
  z-index: 2;
}

table {
  border-collapse: collapse;
  min-width: 900px;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid #eee5d3;
  padding: 8px 9px;
  text-align: left;
  font-size: 0.88rem;
  word-break: keep-all;
}

th {
  background: linear-gradient(180deg, #f6f1e5, #eee5d3);
  color: #324c3f;
  position: sticky;
  top: 0;
  z-index: 2;
}

tbody tr:nth-child(even) {
  background: rgba(245, 239, 227, 0.4);
}

.tenant-status-summary {
  margin: 8px 0 10px;
}

.tenant-status-table-wrap {
  margin-top: 4px;
}

.tenant-status-table {
  min-width: 980px;
}

.tenant-status-table th:nth-child(n + 2),
.tenant-status-table td:nth-child(n + 2) {
  text-align: right;
}

.tenant-status-table th:first-child,
.tenant-status-table td:first-child {
  text-align: left;
}

.tenant-status-table td {
  font-variant-numeric: tabular-nums;
}

.mini-select {
  min-width: 92px;
  padding: 6px 8px;
}

.actions-cell {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  white-space: nowrap;
}

.actions-cell button {
  width: auto;
  padding: 6px 8px;
  font-size: 0.8rem;
}

.batch-check-col {
  width: 32px;
  text-align: center;
  padding: 4px !important;
}

.batch-check-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

button.small {
  padding: 3px 8px;
  font-size: 0.78rem;
}

.ai-panel {
  border-left: 3px solid var(--accent);
  background: rgba(31, 106, 74, 0.04);
  padding: 16px;
  margin-top: 12px;
  /* Phase R-fix — 부모 .panel padding 안에서 우측 끝까지 정렬 (시각 폭 일치) */
  box-sizing: border-box;
  width: 100%;
}

button.ai-loading {
  opacity: 0.6;
  cursor: wait;
  position: relative;
}

button.ai-loading::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ai-spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

input[required]::placeholder,
select[required]::placeholder {
  position: relative;
}

.grid.compact input[required],
.grid.compact select[required] {
  border-left: 3px solid var(--danger);
}

.grid.compact input[required]:focus,
.grid.compact select[required]:focus {
  border-left-color: var(--accent);
}

.grid.compact input[required]:invalid:not(:focus):not(:placeholder-shown) {
  border-left-color: var(--danger);
  background: rgba(143, 47, 43, 0.04);
}

.audit-detail-cell {
  max-width: 460px;
  white-space: pre-wrap;
  word-break: break-word;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid #cfc2aa;
  background: #efe6d8;
  color: #415a4c;
}

.status-chip.pending {
  background: #f6ecd8;
  border-color: #dac8a6;
  color: #755922;
}

.status-chip.approved {
  background: #e5f2ea;
  border-color: #bfd8c7;
  color: #25553f;
}

.status-chip.rejected {
  background: #f8e5e2;
  border-color: #d6b6b1;
  color: #8f2f2b;
}

button.ghost.danger {
  background: linear-gradient(180deg, #f8e5e2, #efd0cc);
  border-color: #d6b6b1;
  color: var(--danger);
}

button.ghost.danger:hover {
  background: linear-gradient(180deg, #f2d7d2, #e9c6c2);
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: 220ms;
  background: rgba(21, 38, 30, 0.96);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 24px rgba(9, 18, 14, 0.25);
  z-index: 30;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.monitor-footer {
  margin-top: 14px;
}

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.monitor-card {
  border: 1px solid #e1d7c5;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
}

.work-plan-top-actions {
  justify-content: center;
}

.work-calendar-shell {
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.work-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  min-width: 860px;
  max-width: 1080px;
  margin: 0 auto;
}

.work-cal-head {
  border: 1px solid #d8ccb8;
  border-radius: 8px;
  background: #efe4d3;
  color: #345245;
  padding: 6px 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.work-cal-cell {
  min-height: 98px;
  border: 1px solid #e1d7c5;
  border-radius: 10px;
  padding: 6px 7px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  text-align: left;
  box-shadow: none;
}

button.work-cal-cell:hover {
  background: linear-gradient(180deg, #f9f4e8, #ece4d2);
}

button.work-cal-cell.active {
  border-color: rgba(28, 115, 77, 0.48);
  background: linear-gradient(180deg, rgba(41, 126, 88, 0.2), rgba(26, 93, 65, 0.16));
}

.work-cal-cell.empty {
  background: #f6f0e2;
  opacity: 0.45;
}

.work-cal-day {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2a4739;
}

.work-cal-summary {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.work-cal-summary li {
  font-size: 0.71rem;
  line-height: 1.25;
  color: #355243;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 자동 오버레이 일정 종류별 강조 */
.work-cal-li-vaccination { color: #b03a2e; font-weight: 600; }
.work-cal-li-farrowing { color: #b9770e; font-weight: 600; }

.work-cal-empty {
  margin-top: 2px;
  font-size: 0.7rem;
  color: #8d8578;
}

.work-cal-count {
  margin-top: auto;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1f5d40;
}

.work-plan-form {
  margin-top: 10px;
  border: 1px solid #dfd2bf;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
}

.work-plan-form h3 {
  margin: 0 0 8px;
}

.work-plan-entry-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.work-plan-detail-field textarea {
  min-height: 76px;
  resize: vertical;
}

.work-plan-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.work-plan-save-btn,
.work-plan-cancel-btn {
  width: auto;
  min-width: 90px;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.2;
  border-radius: 10px;
}

.work-plan-day-panel {
  margin-top: 12px;
  border: 1px solid #dfd2bf;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffefb, #f8f3e7);
  padding: 10px;
}

.work-plan-day-head h3 {
  margin: 0 0 6px;
}

.work-plan-day-body {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.work-plan-note-item {
  border: 1px solid #dfd1bc;
  border-radius: 10px;
  padding: 8px 9px;
  background: #fffdfa;
}

.work-plan-note-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
  color: #4f6659;
}

.work-plan-note-text {
  margin-top: 6px;
  white-space: pre-wrap;
  font-size: 0.84rem;
  color: #1f3128;
}

.work-plan-note-actions {
  margin-top: 7px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.work-plan-note-actions button {
  width: auto;
  min-width: 70px;
  padding: 5px 9px;
  font-size: 0.76rem;
}

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 30, 25, 0.46);
}

.modal-card {
  position: relative;
  width: min(760px, 92vw);
  max-height: 82vh;
  margin: 8vh auto 0;
  border: 1px solid #d9ccba;
  border-radius: 14px;
  background: #fffdf7;
  padding: 12px;
  overflow: auto;
  box-shadow: 0 20px 40px rgba(9, 18, 14, 0.25);
}

.modal-card .table-wrap {
  max-height: calc(82vh - 180px);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.modal-close {
  width: auto;
  min-width: 84px;
}

/* lg 미만 (< 1024px) — 표준화: 기존 1050 → 1023 */
@media (max-width: 1023px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .login-overview-grid {
    grid-template-columns: 1fr;
  }

  .help-frame {
    min-height: 760px;
  }

  .guide-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selection-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-inline-panels,
  .monitor-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .shell {
    width: min(96vw, 100%);
    margin-top: 12px;
  }

  .hero {
    padding: 16px;
    min-height: 0;
  }

  .hero-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .tab-nav {
    padding: 8px;
    top: 6px;
  }

  .global-login-box {
    margin-left: auto;
    width: auto;
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
  }

  #dashboard-top-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
  }

  #dashboard-top-links .chapter-bookmark-btn {
    min-height: 70px;
  }

  #dashboard-top-links .chapter-bookmark-group-panel {
    padding: 6px;
    gap: 5px;
  }

  #dashboard-top-links .chapter-bookmark-group-action {
    min-width: 76px;
    padding: 5px 10px;
    font-size: 0.76rem;
  }

  .tab-nav-group {
    width: 100%;
  }

  .tab-nav-utility {
    margin-left: 0;
    justify-content: flex-start;
  }

  .tab-btn {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
  }

  .raw-title-row {
    align-items: flex-start;
  }

  .raw-title-row .pedigree-breeding-links {
    width: 100%;
  }

  .sub-tab-btn {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
  }

  .workflow-nav-card {
    min-height: 0;
  }

  .workflow-tab-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  #workflow-tab-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapter-bookmark-grid {
    grid-template-columns: 1fr;
  }

  .workflow-bookmark-grid {
    display: flex;
    gap: 8px;
  }

  .login-overview-card {
    padding: 9px 10px;
  }

  .my-panel-tabs {
    grid-template-columns: 1fr;
  }

  .work-plan-entry-row {
    grid-template-columns: 1fr;
  }

  .work-plan-entry-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-calendar-grid {
    min-width: 100%;
  }

  .work-calendar-shell {
    overflow-x: auto;
  }

  table {
    min-width: 600px;
  }

  .record-list table {
    min-width: 560px;
  }

  .tenant-status-table {
    min-width: 700px;
  }

  .record-list-head .actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .record-list-head .actions input[data-record-q] {
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
  }

  .record-list[data-record-list="cost"] .record-list-head .actions {
    flex-wrap: wrap;
  }

  .record-list[data-record-list="cost"] .record-list-head .actions input[data-record-q] {
    min-width: 0;
    flex: 1 1 auto;
  }

  .record-list[data-record-list="health"] .record-list-head {
    flex-wrap: wrap;
  }

  .record-list[data-record-list="health"] .record-list-head .actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .record-list[data-record-list="health"] .record-list-head .actions input[data-record-q] {
    min-width: 0;
    flex: 1 1 100%;
  }

  .biosecurity-head-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .biosecurity-scope-badge {
    flex: 1 1 220px;
    justify-content: flex-start;
  }

  .biosecurity-review-actions > input {
    min-width: 0;
    flex: 1 1 100%;
  }

  .biosecurity-inspector-toggle-row {
    gap: 4px;
  }

  .chapter-home-floating {
    right: 10px;
    bottom: 10px;
    min-width: 118px;
    padding: 9px 12px;
  }

  .selection-topbar {
    align-items: stretch;
  }

  .section-head-with-switch {
    align-items: flex-start;
  }

  .view-switch {
    width: 100%;
  }

  .view-switch-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .selection-top-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    min-width: 0;
  }

  .selection-action-btn {
    width: 100%;
    min-width: 0;
  }

  .pedigree-lookup-top-layout {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .pedigree-lookup-field {
    max-width: none;
  }

  .pedigree-lookup-actions {
    width: 100%;
    margin-left: 0;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pedigree-action-btn {
    width: 100%;
    min-width: 0;
  }

  .mating-plan-top-layout {
    grid-template-columns: 1fr;
  }

  .mating-cycle-status-row {
    align-items: flex-start;
  }

  .mating-plan-summary-grid.kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mating-plan-actions-stack {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mating-plan-mini-btn {
    min-width: 0;
    width: 100%;
  }

  .mating-external-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mating-external-toolbar select {
    width: 100%;
    min-width: 0;
  }

  .grid,
  .compact {
    grid-template-columns: 1fr 1fr;
  }

  .grid .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .consent-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

/* sm 미만 (< 640px) — 표준화: 기존 520 → 639 */
@media (max-width: 639px) {
  .tab-btn {
    flex-basis: 100%;
  }

  .sub-tab-btn {
    flex-basis: 100%;
  }

  .mating-plan-summary-grid.kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pedigree-lookup-actions {
    grid-template-columns: 1fr;
  }

  .grid,
  .compact {
    grid-template-columns: 1fr;
  }

  .help-frame {
    min-height: 620px;
  }

  .guide-photo-grid {
    grid-template-columns: 1fr;
  }

  table {
    min-width: 0;
    font-size: 0.72rem;
  }

  th, td {
    padding: 5px 4px;
  }

  .actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .actions button {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
  }

  .hero h1 {
    font-size: 1.1rem;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-card .value {
    font-size: 0.85rem;
  }

  .ai-panel h3 {
    font-size: 0.95rem;
  }

  .modal-card {
    width: 96vw;
    max-height: 88vh;
    margin: 4vh auto 0;
    padding: 8px;
  }

  .modal-card .table-wrap {
    max-height: calc(88vh - 140px);
  }

  .table-wrap {
    max-height: 360px;
  }
}

/* ====================================================================== */
/* Phase C polish (2026-05-13) — 우측 끝선/정렬 종합 fix                  */
/* ====================================================================== */

/* R11 (5/13): date input native format text (연도-월-일) 모든 언어 마스킹 + YYYY-MM-DD 통일 hint */
/* WebKit/Blink: empty input의 datetime-edit 영역 transparent */
input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit,
input[type="datetime-local"]:not(:focus):not(:valid)::-webkit-datetime-edit,
input[type="month"]:not(:focus):not(:valid)::-webkit-datetime-edit {
  color: transparent;
}
input[type="date"]:focus::-webkit-datetime-edit,
input[type="date"]:valid::-webkit-datetime-edit,
input[type="datetime-local"]:focus::-webkit-datetime-edit,
input[type="datetime-local"]:valid::-webkit-datetime-edit,
input[type="month"]:focus::-webkit-datetime-edit,
input[type="month"]:valid::-webkit-datetime-edit {
  color: inherit;
}

/* YYYY-MM-DD hint sibling (JS로 주입) */
.date-format-hint {
  display: inline-block;
  margin-left: -100px;        /* date input 내부 overlay */
  padding-left: 4px;
  font-size: 0.85em;
  color: #9a8f7a;
  pointer-events: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: -0.02em;
  vertical-align: middle;
  white-space: nowrap;
}
input[type="date"]:focus + .date-format-hint,
input[type="date"]:valid + .date-format-hint,
input[type="datetime-local"]:focus + .date-format-hint,
input[type="datetime-local"]:valid + .date-format-hint,
input[type="month"]:focus + .date-format-hint,
input[type="month"]:valid + .date-format-hint {
  visibility: hidden;
}

/* C6: panel/card 내부 이미지·SVG 우측 넘침 차단 (안전망) */
.panel img, .panel svg, .panel video,
.card img, .card svg, .card video,
.tab-pane img, .tab-pane svg, .tab-pane video {
  max-width: 100%;
  height: auto;
}

/* C7: actions/footer 우측 정렬 일관성 보강 (기존 inline flex 패턴 통일) */
.panel > .actions:last-child,
.card > .actions:last-child {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* D2 (5/13): .data-table 표준 컴포넌트 — 기존 .table-wrap 호환 유지하면서 신규 표준 */
.data-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.data-table thead th {
  background: var(--bg-ink);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.data-table tbody tr:hover td {
  background: rgba(31, 106, 74, 0.04);
}
.data-table tbody tr:last-child td {
  border-bottom: none;
}
.data-table .num,
.data-table .data-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .center { text-align: center; }

/* ────────────────────────────────────────────────
   시설환경 sub-tab + 법정 기록부 카드
   ──────────────────────────────────────────────── */
.env-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
  padding: 6px;
  background: rgba(31, 106, 74, 0.06);
  border-radius: 8px;
}
.env-subtab-btn {
  padding: 8px 14px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}
.env-subtab-btn:hover { background: rgba(31, 106, 74, 0.10); }
.env-subtab-btn.active {
  background: #1f6a4a;
  color: #fff;
  border-color: #1f6a4a;
}
.legal-records-panel {
  padding: 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.legal-records-head h3 { margin: 0 0 4px; }
.legal-records-head .muted { margin: 0 0 16px; font-size: 13px; }
.legal-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: #fafafa;
}
.legal-card[open] { background: #fff; }
.legal-card > summary {
  cursor: pointer;
  font-size: 15px;
  padding: 6px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.legal-card > summary::before {
  content: "▶";
  font-size: 11px;
  color: #888;
  transition: transform 0.15s;
}
.legal-card[open] > summary::before { transform: rotate(90deg); }
.legal-card > summary::-webkit-details-marker { display: none; }
.legal-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #eef5f0;
  border: 1px solid #cfe3d6;
  border-radius: 12px;
  font-size: 11px;
  color: #1f6a4a;
  font-weight: normal;
}
.legal-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #ddd;
}
.legal-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.legal-form label > span { color: #555; font-size: 12px; }
.legal-form label.checkbox { flex-direction: row; align-items: center; gap: 6px; }
.legal-form .grid-span-2 { grid-column: span 2; }
.legal-form textarea { resize: vertical; min-height: 48px; }
.legal-form button[type="submit"] {
  grid-column: span 2;
  margin-top: 8px;
  padding: 8px 16px;
  background: #1f6a4a;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.legal-list { margin-top: 12px; }
.legal-list-head { margin-bottom: 6px; }
.legal-status { margin-left: 10px; color: #5a6b60; }

/* 5/25 — 번식 후보돈 번식상태 배지 */
.breeding-status-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.breeding-status-badge.estrus { background: #ffe2e2; color: #b42318; }            /* 발정(교배적기) */
.breeding-status-badge.estrus-expected { background: #fff3d6; color: #9a6700; }   /* 발정예상 */
.breeding-status-badge.ready { background: #d9f2e4; color: #1f6a4a; }             /* 교배적령 */
.breeding-status-badge.mated { background: #e0ebff; color: #1f4e8c; }            /* 교배완료 */
.breeding-status-badge.pregnant { background: #ede0ff; color: #5a2ea6; }         /* 임신/포유 */
.breeding-status-badge.immature { background: #eceff1; color: #6b7780; }         /* 미성숙 */

/* 5/25 — 헤더 제목 영문 병기 (한글 메인 + 영문 부제) */
.app-title-en {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b8377;
  vertical-align: middle;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .app-title-en { display: block; margin-left: 0; margin-top: 2px; font-size: 0.7em; }
}
.legal-list table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-list th, .legal-list td {
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}
.legal-list th { background: #f5f5f5; font-weight: 600; }
.legal-list .muted { color: #888; text-align: center; padding: 12px; }

/* 5/25 — 증빙 파일 첨부 (record 상세 보기 안) */
.legal-attach-box {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed #b8cdbf;
  border-radius: 8px;
  background: rgba(31, 102, 72, 0.03);
}
.legal-attach-box > strong { display: block; margin-bottom: 6px; color: #2a4136; }
.legal-attach-list { display: flex; flex-direction: column; gap: 4px; }
.legal-attach-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.legal-attach-item a { color: #1f6a4a; text-decoration: none; word-break: break-all; }
.legal-attach-item a:hover { text-decoration: underline; }
.legal-attach-item button { padding: 1px 8px; font-size: 12px; }
.legal-attach-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  color: #2a4136;
}
.legal-email-block { margin-top: 10px; border-top: 1px solid #d8e6dd; padding-top: 8px; }
.legal-email-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-width: 460px; }
.legal-email-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.legal-email-form label.checkbox { flex-direction: row; align-items: center; gap: 6px; }
.legal-email-form input[type="text"], .legal-email-form textarea {
  width: 100%; padding: 5px 8px; border: 1px solid #c4d6ca; border-radius: 6px; font-size: 13px;
}
.legal-email-status { display: block; margin-top: 4px; }

/* ───────────────────────────────────────────────────────────
   UI 단순화 파일럿(성장기록) — 입력/기록/고급 3-zone + 폼 기반 수정
   2026-06-07. 탭 구조 유지, progressive disclosure.
   ─────────────────────────────────────────────────────────── */

/* ① 입력 / ② 기록 구역 구분 */
.section-zone {
  margin-top: var(--space-3);
}
.section-zone-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: var(--space-2);
}
.section-zone-title {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}
.section-zone-hint {
  margin: 0;
  flex: 1 1 100%;
  font-size: 0.85rem;
}
.section-zone-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex: 0 0 auto;
}

/* ③ 고급/시스템 드로어 — 기본 접힘 */
.advanced-drawer {
  margin-top: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.advanced-drawer > .advanced-drawer-summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  user-select: none;
}
.advanced-drawer > .advanced-drawer-summary::-webkit-details-marker {
  display: none;
}
.advanced-drawer > .advanced-drawer-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.advanced-drawer[open] > .advanced-drawer-summary::before {
  transform: rotate(90deg);
}
.advanced-drawer > .advanced-drawer-summary:hover {
  color: var(--accent);
}
.advanced-drawer-body {
  padding: 0 14px 14px;
}
.advanced-drawer-body .ai-panel {
  margin-top: 0;
}

/* 폼 기반 수정 모드 — 수정 중 시각 강조 + 안내 배너 + 취소 버튼 */
form.record-editing {
  position: relative;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  border-radius: var(--radius-md);
  background: rgba(31, 106, 74, 0.05);
}
.record-edit-banner {
  flex: 1 1 100%;
  margin: 0 0 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(31, 106, 74, 0.12);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.record-edit-cancel {
  width: auto;
}

/* ============================================================
   Modern UI 2026 — 칩 세그먼트 네비 + 모던 표/입력
   (사용자 선택: 칩 세그먼트 / 네비·폼·표. 녹색 테마 유지, 토큰 기반)
   2026-06-07
   ============================================================ */

/* ---- 상단 메뉴: 큰 카드(104px) → 컴팩트 칩 세그먼트 ---- */
#dashboard-top-links.chapter-bookmark-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
#dashboard-top-links .chapter-bookmark-btn {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
#dashboard-top-links .chapter-bookmark-btn .chapter-bookmark-desc { display: none; }
#dashboard-top-links .chapter-bookmark-btn .chapter-bookmark-step {
  background: var(--bg-ink);
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.5;
}
#dashboard-top-links .chapter-bookmark-btn .chapter-bookmark-title {
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}
#dashboard-top-links .chapter-bookmark-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
#dashboard-top-links .chapter-bookmark-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(31, 106, 74, 0.28);
}
#dashboard-top-links .chapter-bookmark-btn.active .chapter-bookmark-step {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
#dashboard-top-links .chapter-bookmark-btn.active .chapter-bookmark-title { color: #fff; }
@media (max-width: 767px) {
  #dashboard-top-links.chapter-bookmark-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  #dashboard-top-links .chapter-bookmark-btn { scroll-snap-align: start; }
}

/* ---- 사양/환경 sub-tab 책갈피도 동일 칩화 ---- */
.feeding-sub-bookmark.chapter-bookmark-grid,
.env-sub-bookmark.chapter-bookmark-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.feeding-sub-bookmark .chapter-bookmark-btn,
.env-sub-bookmark .chapter-bookmark-btn {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--panel-strong);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.feeding-sub-bookmark .chapter-bookmark-btn .chapter-bookmark-desc,
.env-sub-bookmark .chapter-bookmark-btn .chapter-bookmark-desc { display: none; }
.feeding-sub-bookmark .chapter-bookmark-btn .chapter-bookmark-step,
.env-sub-bookmark .chapter-bookmark-btn .chapter-bookmark-step {
  background: var(--bg-ink);
  color: var(--accent);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.feeding-sub-bookmark .chapter-bookmark-btn .chapter-bookmark-title,
.env-sub-bookmark .chapter-bookmark-btn .chapter-bookmark-title {
  font-size: 0.88rem;
  white-space: nowrap;
}
.feeding-sub-bookmark .chapter-bookmark-btn:hover,
.env-sub-bookmark .chapter-bookmark-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.feeding-sub-bookmark .chapter-bookmark-btn.active,
.env-sub-bookmark .chapter-bookmark-btn.active {
  background: var(--accent);
  border-color: var(--accent);
}
.feeding-sub-bookmark .chapter-bookmark-btn.active .chapter-bookmark-step,
.env-sub-bookmark .chapter-bookmark-btn.active .chapter-bookmark-step {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.feeding-sub-bookmark .chapter-bookmark-btn.active .chapter-bookmark-title,
.env-sub-bookmark .chapter-bookmark-btn.active .chapter-bookmark-title { color: #fff; }

/* ---- 입력칸 모던 라운드 ---- */
input, select, textarea {
  border-radius: 10px;
  transition: border-color .14s ease, box-shadow .14s ease;
}

/* ---- 표(리스트) 모던화: 헤더 강조 + 행 호버/줄무늬 ---- */
.table-wrap table thead th,
.data-table thead th {
  background: var(--bg-ink);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-strong);
}
.table-wrap table tbody td,
.data-table tbody td {
  padding: 9px 12px;
}
.table-wrap table tbody tr:nth-child(even) > td {
  background: rgba(213, 223, 216, 0.16);
}
.table-wrap table tbody tr:hover > td,
.data-table tbody tr:hover > td {
  background: rgba(31, 106, 74, 0.06);
}

/* ── 백신접종 캘린더 (월 그리드) ── */
.vaccine-calendar {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
  margin-bottom: 8px;
}
.vaccine-cal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.vaccine-cal-head strong {
  min-width: 110px;
  text-align: center;
  font-size: 1.02rem;
  color: var(--ink);
}
.vaccine-cal-head button { padding: 4px 12px; line-height: 1.2; }
.vaccine-cal-head [data-vaccine-cal-nav="today"] { margin-left: auto; }
.vaccine-cal-legend {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.vaccine-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.vc-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.vc-dot.vc-overdue { background: #c0392b; }
.vc-dot.vc-soon { background: #d4880f; }
.vc-dot.vc-upcoming { background: #1f7a3d; }
.vaccine-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.vc-dow {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 0;
}
.vc-dow.vc-sun { color: #c0392b; }
.vc-dow.vc-sat { color: #2a6cc0; }
.vc-cell {
  position: relative;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  background: var(--panel-strong);
}
.vc-cell.vc-empty { border: none; background: transparent; }
.vc-cell .vc-date { font-size: 0.82rem; color: var(--ink-soft); }
.vc-cell.vc-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.vc-cell.vc-has {
  cursor: pointer;
  background: rgba(31, 106, 74, 0.07);
}
.vc-cell.vc-has:hover { background: rgba(31, 106, 74, 0.16); }
.vc-cell.vc-has .vc-date { color: var(--ink); font-weight: 700; }
.vc-cell .vc-dot { position: absolute; top: 6px; right: 6px; }
.vc-cell .vc-count {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-strong);
}
.vaccine-cal-detail { margin-top: 10px; }
.vc-detail-list { margin: 6px 0 0; padding-left: 18px; }
.vc-detail-list li { margin: 5px 0; color: var(--ink); }
@media (max-width: 640px) {
  .vc-cell { min-height: 44px; padding: 3px 4px; }
  .vc-cell .vc-date { font-size: 0.74rem; }
}

/* ── 접종 일정 표시 필터 (법정의무 / 전체) ── */
.vaccine-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.chip-toggle {
  border: 1px solid var(--border-strong);
  background: var(--panel-strong);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
.chip-toggle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* ── 🎯 이번 주 접종 집중 (백신 종류별 카드) ── */
.vaccine-week-focus { margin-bottom: 4px; }
.vac-focus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.vac-focus-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
}
.vac-focus-card.vac-focus-mand { border-left-color: #c0392b; }
.vac-focus-head { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.vac-focus-count { font-size: 1.5rem; font-weight: 800; color: var(--accent-strong); line-height: 1.1; }
.vac-focus-count span { font-size: 0.8rem; font-weight: 600; margin-left: 2px; }

/* ── 🧩 선택 백신 관리 ── */
.vac-sel-group-title { margin: 12px 0 6px; font-size: 0.92rem; color: var(--ink); }
.vac-sel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--panel-strong);
}
.vac-sel-item.on { border-color: var(--accent); background: rgba(31, 106, 74, 0.06); }
.vac-sel-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vac-sel-info strong { font-size: 0.88rem; color: var(--ink); }
.vac-sel-btn {
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: var(--panel-strong);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 0.82rem;
  cursor: pointer;
}
.vac-sel-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.vac-sel-btn:disabled { opacity: 0.5; cursor: progress; }

/* ── 📋 연간 백신접종 프로그램 리플릿 ── */
.leaflet-head { display: flex; align-items: center; gap: 12px; }
.leaflet-head button { padding: 4px 12px; }
.vaccine-leaflet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.leaflet-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface);
}
.leaflet-grow { border-top: 3px solid #2a6cc0; }
.leaflet-breed { border-top: 3px solid #8c6a2c; }
.leaflet-title { margin: 0 0 8px; font-size: 0.98rem; color: var(--ink); }
.leaflet-row {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.leaflet-row:last-child { border-bottom: none; }
.leaflet-when {
  min-width: 96px;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--ink);
}
.leaflet-when span { display: block; font-weight: 400; font-size: 0.74rem; }
.leaflet-vaccines { flex: 1; }
.leaflet-vac { padding: 2px 0; font-size: 0.86rem; color: var(--ink); }
.leaflet-vac-name { font-weight: 600; }
.leaflet-mand { color: #c0392b; font-weight: 700; font-size: 0.72rem; }
@media (max-width: 760px) {
  .vaccine-leaflet { grid-template-columns: 1fr; }
}