/* ============================================================
   우리집 비상식량 (ReadyDays) — styles.css
   웹 0차: 계산기 한 장 + 소개·앱 소개·개인정보처리방침
   - 아이콘의 남색·크림·하늘색 계열. 빨간 경보색은 쓰지 않는다.
   - 라이트·다크는 prefers-color-scheme만 따른다(수동 토글 없음).
   - 숫자는 tabular-nums. 최대 폭 약 720px, 모바일 우선.
   - 글꼴은 기기에 있는 글꼴만 쓴다(drive-log-website와 같은 방식). 웹 글꼴을 Google에서
     받으면 쿠키 동의 전에 Google로 요청이 나가므로(사양서 10절 'Google 요청 0') 링크를 두지 않는다.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

/* ─── 색 변수: 라이트(기본) ───
   아이콘(집 안의 물방울)의 세 색에서 왔다: 남색 #213c5c(바탕), 크림 #f7eedb(집), 하늘색 #6ec3ee(물방울).
   라이트는 남색이 주 색, 다크는 하늘색이 주 색. 글자 대비는 4.5:1 이상, 막대 같은 그림 요소는 3:1 이상. */
:root {
  color-scheme: light;

  --bg: #f8f6f1;
  --surface: #ffffff;
  --surface-2: #f3efe6;
  --text: #1a2a3b;
  --text-sub: #3d4f62;
  --text-muted: #56677a;
  --border: #e2dccf;
  --border-strong: #6f7b88;

  --primary: #213c5c;
  --primary-strong: #172c45;
  --on-primary: #ffffff;
  --primary-soft: #e5edf5;
  --navy: #213c5c;

  --notice-bg: #f7eedb;
  --notice-border: #213c5c;
  --info-bg: #f3efe6;
  --error: #8a3f0a;

  --badge-kr-bg: #e3ebf6;
  --badge-kr-fg: #1d3a5f;
  --badge-kr-line: #8aa1c2;
  --badge-foreign-bg: #dff1fb;
  --badge-foreign-fg: #12557d;
  --badge-estimate-bg: #ffffff;
  --badge-estimate-fg: #3d4f62;
  --badge-estimate-line: #8a96a3;
  --badge-approx-bg: #eeebe4;
  --badge-approx-fg: #46505a;
  --badge-own-bg: #f3ede1;
  --badge-own-fg: #5a4520;

  --meter-bg: #d9d0bf;
  --meter-fill: #2a7ab3;

  --footer-bg: #213c5c;
  --footer-text: #d8e2ec;
  --footer-link: #ffffff;

  --shadow: 0 1px 2px rgba(26, 42, 59, 0.05), 0 4px 14px rgba(26, 42, 59, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --max: 720px;
  --tap: 44px;
}

/* ─── 색 변수: 다크 ─── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #0e1824;
    --surface: #152232;
    --surface-2: #1b2b3e;
    --text: #e6edf4;
    --text-sub: #b7c5d3;
    --text-muted: #97a8b9;
    --border: #2a3b4f;
    --border-strong: #7890a6;

    --primary: #6ec3ee;
    --primary-strong: #96d4f3;
    --on-primary: #0b2236;
    --primary-soft: #16324a;
    --navy: #a9c3e2;

    --notice-bg: #1b2b3e;
    --notice-border: #6ec3ee;
    --info-bg: #1b2b3e;
    --error: #f0b37a;

    --badge-kr-bg: #1d3350;
    --badge-kr-fg: #cfe0f5;
    --badge-kr-line: #4f6d93;
    --badge-foreign-bg: #123a52;
    --badge-foreign-fg: #bfe6fa;
    --badge-estimate-bg: #152232;
    --badge-estimate-fg: #c9d4df;
    --badge-estimate-line: #6f849a;
    --badge-approx-bg: #263241;
    --badge-approx-fg: #d0d8e0;
    --badge-own-bg: #3a2f1c;
    --badge-own-fg: #f0dfbd;

    --meter-bg: #2f435a;
    --meter-fill: #6ec3ee;

    --footer-bg: #152232;
    --footer-text: #b7c5d3;
    --footer-link: #e6edf4;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  }
}

/* ─── 기본 ─── */
html {
  font-size: 100%; /* 브라우저 기본 글꼴 크기 설정을 따른다(11-04 QA) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* 본문이 짧은 페이지에서도 푸터가 화면 맨 아래에 붙게 한다(푸터 아래로 빈 바탕이 남지 않게).
   main은 .wrap(가운데 정렬 margin auto)이라 flex 안에서 줄어들지 않도록 width를 준다. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
  width: 100%;
}

h1, h2, h3, h4 {
  line-height: 1.35;
  margin: 0;
  color: var(--text);
}

h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 20px 0 8px;
}

h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 12px;
}

h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 0 0 8px;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 14px 0 4px;
}

p {
  margin: 0 0 12px;
}

a {
  color: var(--primary);
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

/* 마우스 올림 색은 마우스가 있는 기기에서만. 터치 화면에서는 누른 뒤에도 :hover가 남아
   눌린 버튼·배지가 선택된 것처럼 보였다(11-04 실기기). 누르는 순간의 반응은 :active로 준다. */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--primary-strong);
  }
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.num {
  font-variant-numeric: tabular-nums;
}

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

.print-only {
  display: none;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 0;
  transform: translateY(-120%); /* 글자를 키워도 화면 위에 걸쳐 보이지 않게(top 음수 대신) */
  z-index: 100;
  padding: 10px 16px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  transform: none;
  color: var(--on-primary);
}

/* ─── 머리글 ─── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover {
    color: var(--primary);
  }
}

/* 헤더 로고: 아이콘(집 안의 물방울) 그대로. 다크 모드에서도 남색 타일이라 배경과 구분된다. */
.brand-mark {
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 7px;
  background: url("/icon.svg") center / cover no-repeat;
}

.header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-sub);
}

.header-nav a[aria-current="page"] {
  color: var(--primary);
}

@media (hover: hover) and (pointer: fine) {
  .header-nav a:hover {
    color: var(--primary);
  }
}

/* 현재 페이지는 색만이 아니라 굵기·밑줄로도 표시한다(라이트에서 색 차이가 작다) */
.header-nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* 단독 레이아웃(app.html, privacy)의 이름 표기 — 링크가 아니다 */
.brand-text {
  display: inline-flex;
  align-items: center;
  min-height: 60px;
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

/* ─── 고지·안내 상자 ─── */
.notice {
  margin: 20px 0 8px;
  padding: 14px 16px;
  background: var(--notice-bg);
  border-left: 4px solid var(--notice-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.97rem;
}

.notice strong {
  font-weight: 700;
}

.info {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--info-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.load-error {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1.5px solid var(--error);
  border-radius: var(--radius-sm);
  color: var(--text);
}

.load-error p {
  margin-bottom: 10px;
}

.lead {
  color: var(--text-sub);
  font-size: 1.02rem;
}

.hint {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.small {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.optional {
  font-weight: 400;
  color: var(--text-muted);
}

/* ─── 버튼 ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 9px 18px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--primary-soft);
    color: var(--primary-strong);
  }

  .btn-primary:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    color: var(--on-primary);
  }

  .btn:disabled:hover {
    background: var(--surface);
    color: var(--primary);
  }

  .btn-primary:disabled:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
  }
}

.btn:active {
  background: var(--primary-soft);
}

.btn-primary:active {
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

.btn-lg {
  min-height: 52px;
  padding: 12px 28px;
  font-size: 1.08rem;
}

.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-sub);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .btn-text:hover {
    color: var(--primary);
    background: var(--surface-2);
  }
}

.btn-text:active {
  background: var(--surface-2);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ─── 입력 ─── */
.calc-form {
  margin: 20px 0 8px;
}

.group {
  margin: 0 0 16px;
  padding: 16px 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  min-width: 0;
}

.group > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 6px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text);
}

.group > legend + * {
  clear: both;
}

.rows {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.row {
  margin: 0 0 10px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.row-title {
  font-weight: 700;
}

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

.field {
  min-width: 0;
}

/* 가구원 줄: 좁은 화면에서는 항목을 한 줄씩(연령대 이름이 잘리지 않게) */
.member-fields {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.member-fields .field {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.member-fields .field > label {
  margin: 0;
}

@media (min-width: 420px) {
  .member-fields {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 10px;
  }

  .member-fields .field {
    display: block;
  }

  .member-fields .field > label {
    margin-bottom: 4px;
  }
}

.field > label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-sub);
}

select,
input[type="text"] {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
}

select:focus-visible,
input[type="text"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

input[aria-invalid="true"] {
  border-color: var(--error);
}

.input-unit {
  position: relative;
}

.input-unit input {
  padding-right: 44px;
}

.input-unit .unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.92rem;
  pointer-events: none;
}

.field-msg {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.field-msg.is-error {
  color: var(--error);
  font-weight: 500;
}

.holdings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 12px;
}

/* 기간 */
.period-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.period-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.period-btn {
  min-height: 52px;
  padding: 8px 6px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
  .period-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
}

.period-btn[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.basis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 배지는 칸보다 넓어지지 않게 한다. 큰 글씨에서 세 칸의 배지가 서로 덮였다(11-04 실기기) */
.basis-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  min-width: 0;
  max-width: 100%;
}

.basis .badge {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* 좁은 화면: '근거'를 위에, 배지를 그 아래에 모아 세 칸의 모양을 같게 한다 */
@media (max-width: 599px) {
  .basis {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── 출처 배지 ─── */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--badge-approx-bg);
  color: var(--badge-approx-fg);
}

@media (hover: hover) and (pointer: fine) {
  a.badge:hover {
    text-decoration: underline;
  }
}

.badge--kr_official {
  background: var(--badge-kr-bg);
  color: var(--badge-kr-fg);
  box-shadow: inset 0 0 0 1px var(--badge-kr-line);
}

.badge--foreign_official {
  background: var(--badge-foreign-bg);
  color: var(--badge-foreign-fg);
}

/* 자체 추정: 점선 테두리로 '추정'을 모양으로도 구분한다(색만으로 뜻을 전하지 않게) */
.badge--estimate {
  background: var(--badge-estimate-bg);
  color: var(--badge-estimate-fg);
  border: 1px dashed var(--badge-estimate-line);
}

.badge--own {
  background: var(--badge-own-bg);
  color: var(--badge-own-fg);
}

.badge--approx {
  background: var(--badge-approx-bg);
  color: var(--badge-approx-fg);
}

/* 참고 자료: 정부·공공기관이 아닌 전문 참고서. 출처 목록과 범례에만 쓴다(숫자 옆 배지 아님). */
.badge--reference {
  background: var(--badge-approx-bg);
  color: var(--badge-approx-fg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

@media (hover: hover) and (pointer: fine) {
  a.badge--kr_official:hover { color: var(--badge-kr-fg); }
  a.badge--foreign_official:hover { color: var(--badge-foreign-fg); }
  a.badge--estimate:hover { color: var(--badge-estimate-fg); }
  a.badge--own:hover { color: var(--badge-own-fg); }
  a.badge--approx:hover { color: var(--badge-approx-fg); }
}

/* ─── 결과 ─── */
.result {
  margin: 24px 0;
}

.placeholder {
  color: var(--text-muted);
}

.conditions {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-sub);
  font-size: 0.95rem;
}

.result-warn {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--error);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
}

.result-note {
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-sub);
  font-size: 0.95rem;
}

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.card {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  min-width: 0;
}

.lines {
  margin: 0;
}

.line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.line:first-child {
  border-top: 0;
  padding-top: 2px;
}

.line dt {
  flex: 0 0 auto;
  min-width: 6.5em;
  color: var(--text-sub);
  font-size: 0.95rem;
}

.line dd {
  display: flex;
  flex: 1 1 12em;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
}

.value {
  font-size: 1.12rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.value-big {
  font-size: 1.45rem;
}

.value-text {
  font-weight: 500;
  color: var(--text);
}

.sub {
  flex-basis: 100%;
  color: var(--text-sub);
  font-size: 0.92rem;
}

.notes {
  margin: 10px 0 0;
  padding: 0 0 0 18px;
  color: var(--text-sub);
  font-size: 0.9rem;
}

.notes li {
  margin: 4px 0;
}

.pet-block + .pet-block {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

.checklist-title {
  margin: 12px 0 2px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-sub);
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 12px;
}

.checklist label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: var(--tap);
  padding-block: 8px;
  cursor: pointer;
}

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

.meter {
  flex-basis: 100%;
  height: 12px;
  margin: 4px 0 2px;
  border-radius: 999px;
  background: var(--meter-bg);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--meter-fill);
}

.next-step {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--text);
  font-weight: 500;
}

/* ─── 공유·인쇄·앱·안전 ─── */
.section {
  margin: 24px 0;
  padding: 18px 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.section ul {
  margin: 0;
  padding-left: 20px;
}

.section li {
  margin: 6px 0;
}

.share .btn-row {
  margin-bottom: 12px;
}

.status {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
}

.status.is-error {
  border-left-color: var(--error);
  background: var(--surface-2);
}

.status:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

.share-fallback {
  margin: 8px 0 12px;
}

.share-fallback label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.92rem;
  color: var(--text-sub);
}

.share-fallback input {
  font-size: 0.92rem;
}

.app-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 24px 0 12px;
}

.cta-note {
  color: var(--text-sub);
  font-size: 0.95rem;
}

.gov-links {
  margin: 12px 0 24px;
  color: var(--text-sub);
  font-size: 0.95rem;
}

.gov-links p {
  margin: 0;
}

.gov-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gov-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 6px 0;
}

/* ─── 출처 목록 ─── */
.sources {
  margin: 28px 0 40px;
}

.data-date {
  font-weight: 700;
}

.legend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  margin: 12px 0 16px;
  font-size: 0.9rem;
  color: var(--text-sub);
}

.legend dt {
  margin: 0;
}

.legend dd {
  margin: 0;
}

.source-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.src-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  scroll-margin-top: 16px;
}

.src-item:target,
.src-item.is-related {
  background: var(--primary-soft);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.src-item a {
  font-weight: 500;
}

.src-meta {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.license-note {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ─── 소개(index) ─── */
.hero {
  padding: 8px 0 4px;
}

.feature-list {
  margin: 16px 0 20px;
  padding-left: 20px;
}

.feature-list li {
  margin: 8px 0;
}

.cta-row {
  margin: 20px 0 12px;
}

/* ─── 단독 문서(app.html, privacy) ─── */
.doc {
  padding-bottom: 40px;
}

.doc h2 {
  margin-top: 28px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.doc h3 {
  margin-top: 18px;
}

.doc p,
.doc li {
  color: var(--text-sub);
}

.doc ul,
.doc ol {
  padding-left: 20px;
  margin: 0 0 12px;
}

.doc li {
  margin: 6px 0;
}

.doc strong {
  color: var(--text);
}

.doc code {
  font-size: 0.92em;
}

.doc-date {
  color: var(--text-muted);
}

.callout {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--notice-bg);
  border-left: 4px solid var(--notice-border);
  border-radius: var(--radius-sm);
  color: var(--text);
}

/* ─── 바닥글 ─── */
.site-footer {
  margin-top: 40px;
  padding: 28px 0 32px;
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0 0 8px;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--footer-link);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    color: var(--footer-link);
    text-decoration-thickness: 2px;
  }
}

.footer-brand {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--footer-link);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 16px;
  margin: 4px 0 8px;
}

.footer-copy {
  color: var(--footer-text);
  font-size: 0.85rem;
}

/* ─── 넓은 화면 ─── */
@media (min-width: 600px) {
  h1 {
    font-size: 2rem;
  }

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

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

/* ─── 움직임 줄이기 ─── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── 인쇄: 결과표·고지 한 줄·안전 안내·출처·기준일을 한 장에 ─── */
@media print {
  @page {
    size: A4;
    margin: 10mm 12mm;
  }

  /* 인쇄는 항상 흰 종이에 검은 글씨(다크 모드 변수를 덮어쓴다) */
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --text: #000000;
    --text-sub: #222222;
    --text-muted: #333333;
    --border: #999999;
    --border-strong: #666666;
    --primary: #000000;
    --primary-strong: #000000;
    --primary-soft: #ffffff;
    --error: #000000;
    --meter-bg: #dddddd;
    --meter-fill: #333333;
    --shadow: none;
  }

  /* rem 기준을 줄여 전체를 한 장 크기로 맞춘다 */
  html {
    font-size: 10.5px; /* 입력 상한(10명·6마리·14일)에서 A4 여유가 1%뿐이라 줄였다(11-03 QA) */
    scroll-behavior: auto;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 1rem;
    line-height: 1.35;
  }

  /* 입력·버튼·쿠키 배너·안내 구역은 숨긴다.
     위쪽 고지(.notice)와 안전 안내 목록(.safety)은 자리를 많이 차지해 숨기고, 같은 내용을
     .print-notice(고지 한 줄)와 .print-safety(안전 두 줄 요약)로 찍는다.
     기획 3절 원칙 3·10: 통신이 끊길 때 쓰는 인쇄본에도 고지와 안전 경고가 남아야 한다. */
  .ks-cc,
  .skip-link,
  .site-header,
  .site-footer,
  .notice,
  .info,
  .load-error,
  .lead,
  main > h1,
  .calc-form,
  .share,
  .safety,
  .app-cta,
  .gov-links,
  button,
  input[type="text"],
  select,
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  .print-title {
    margin: 0 0 2px;
    font-size: 1.35rem;
    font-weight: 700;
  }

  .print-notice {
    margin: 0 0 3px;
    font-size: 0.9rem;
  }

  .print-safety {
    margin: 4px 0 0;
    padding: 2px 6px;
    border: 1px solid #999999;
    font-size: 0.85rem;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .result {
    margin: 0;
  }

  .result h2,
  .sources h2 {
    font-size: 1.1rem;
    margin: 0 0 3px;
  }

  .conditions,
  .result-warn,
  .result-note {
    margin: 0 0 4px;
    padding: 3px 6px;
    border: 1px solid #999999;
    font-size: 0.95rem;
  }

  /* 결과 카드는 3단으로 흘려 담는다 */
  .cards {
    display: block;
    columns: 3;
    column-gap: 8px;
  }

  .card {
    display: inline-block;
    width: 100%;
    margin: 0 0 6px;
    padding: 4px 6px;
    border: 1px solid #999999;
    border-radius: 3px;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 반려동물 카드만 마리 단위로 다음 단에 이어 쓴다. 통째로 두면 입력 상한(10명·6마리)에서
     결과가 A4 한 장을 넘는다. 나뉜 조각마다 테두리를 다시 그린다. */
  .card[data-key="pets"] {
    display: block;
    break-inside: auto;
    page-break-inside: auto;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .pet-block,
  .card[data-key="pets"] .notes,
  .card[data-key="pets"] [data-key="pet-check"] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 제목만 단 끝에 홀로 남지 않게 제목과 첫 마리를 붙인다(11-03 QA) */
  .card[data-key="pets"] > h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .card[data-key="pets"] > h3 + * {
    break-before: avoid;
    page-break-before: avoid;
  }

  /* 인쇄 제목(이름 · 계산 결과) 바로 아래의 같은 뜻 제목은 숨긴다 */
  #result-title {
    display: none;
  }

  .card h3 {
    font-size: 1.05rem;
    margin: 0 0 1px;
  }

  .card h4 {
    font-size: 1rem;
    margin: 3px 0 0;
  }

  .line {
    gap: 0 4px;
    padding: 1px 0;
  }

  .line dt {
    min-width: 0;
    font-size: 0.95rem;
  }

  .line dd {
    flex: 1 1 auto;
    gap: 0 4px;
  }

  .value,
  .value-big {
    font-size: 1.05rem;
  }

  .value-text {
    font-size: 0.95rem;
  }

  .sub,
  .notes {
    font-size: 0.85rem;
  }

  .notes {
    margin: 2px 0 0;
    padding-left: 12px;
  }

  .notes li {
    margin: 0;
  }

  .pet-block + .pet-block {
    margin-top: 2px;
    padding-top: 1px;
  }

  .checklist-title {
    margin: 3px 0 0;
    font-size: 0.9rem;
  }

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

  .checklist label {
    min-height: 0;
    padding-block: 0;
    gap: 4px;
    font-size: 0.9rem;
  }

  .checklist input[type="checkbox"] {
    width: 9px;
    height: 9px;
  }

  .meter {
    height: 6px;
    margin: 1px 0;
  }

  .meter,
  .meter-fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .next-step {
    margin: 3px 0 0;
    padding: 2px 5px;
    border: 1px solid #999999;
    font-size: 0.95rem;
  }

  .badge {
    min-height: 0;
    padding: 0 3px;
    border: 1px solid #777777;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none;
    font-size: 0.75rem;
    font-weight: 500;
  }

  a {
    color: #000000;
    text-decoration: none;
  }

  /* 출처: 한 줄씩, 2단 */
  .sources {
    margin: 4px 0 0;
    font-size: 0.85rem;
  }

  .sources p {
    margin: 0 0 2px;
  }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    margin: 2px 0;
    font-size: 0.85rem;
  }

  .legend dd {
    margin-right: 6px;
  }

  .source-list {
    columns: 2;
    column-gap: 10px;
    margin: 0 0 2px;
  }

  .src-item {
    display: block;
    margin: 0;
    padding: 0;
    break-inside: avoid;
    outline: none !important;
    background: #ffffff !important;
  }

  .src-item .badge {
    margin-right: 4px;
  }

  .src-meta {
    display: inline;
    margin-left: 4px;
    font-size: 0.8rem;
  }

  .license-note {
    font-size: 0.8rem;
    margin: 0;
  }
}

/* ─── 11-03 QA 다듬기 ─── */

/* 다크 모드에서 푸터가 바탕과 붙어 보이지 않게 경계선 */
@media (prefers-color-scheme: dark) {
  .site-footer {
    border-top: 1px solid var(--border);
  }
}

/* 제목의 마지막 단어 하나만 다음 줄에 남지 않게 */
h1,
h2 {
  text-wrap: balance;
}

/* 날짜·'품목 개수'처럼 갈라지면 읽기 어려운 묶음 */
.nw {
  white-space: nowrap;
}

/* 배지를 눌렀을 때 강조되는 출처 항목: 배지(파란 계열)와 겹치지 않게 크림 바탕 */
.src-item:target,
.src-item.is-related {
  background: var(--notice-bg);
}

/* 공용 쿠키 배너(script.js, 16개 사이트 공통) 색을 이 사이트 팔레트에 맞춘다.
   모듈은 :root의 --ks-cc-* 변수를 읽으므로, 모듈 본문은 건드리지 않고 배너 요소에서 덮어쓴다. */
body .ks-cc {
  --ks-cc-bg: var(--surface);
  --ks-cc-fg: var(--text);
  --ks-cc-sub: var(--text-sub);
  --ks-cc-border: var(--border);
  --ks-cc-accept-bg: var(--primary);
  --ks-cc-accept-fg: var(--on-primary);
  --ks-cc-ghost-fg: var(--text-sub);
}

/* ─── 11-04 접근성 QA ─── */

/* 계산기가 뜨기 전에는 결과·공유·안전·출처를 숨겨, 폼이 펼쳐질 때 보이던 내용이 밀리지 않게 한다.
   자리 표시(calc-loading)가 화면 아래까지 높이를 잡아 바닥글도 화면 밖에 둔다. */
main.is-booting #result,
main.is-booting .share,
main.is-booting .safety,
main.is-booting #sources {
  display: none;
}

.boot-placeholder {
  min-height: 75vh;
}

/* 쿠키 배너(공용 모듈, 화면 아래 고정)가 열려 있는 동안 키보드 포커스가 배너 뒤로 숨지 않게 한다 */
html:has(.ks-cc) {
  scroll-padding-bottom: 220px;
}

/* 라이트 모드 바닥글은 남색 바탕이라 기본 포커스 링(남색)이 보이지 않는다 */
.site-footer a:focus-visible {
  outline-color: var(--footer-link);
}

/* 쿠키 배너 '동의' 버튼의 포커스 링이 currentColor(버튼 글자색)라 배너 바탕과 같아진다 */
body .ks-cc button:focus-visible {
  outline: 2px solid var(--ks-cc-fg);
  outline-offset: 2px;
}

/* 출처 배지는 28px 높이지만 누르는 영역은 위아래 8px씩 넓혀 44px로 */
a.badge {
  position: relative;
}

a.badge::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}

/* ─── 11-04 실기기(카카오톡) QA ─── */

/* 큰 글씨 감지용 숨은 글자(app.js watchTextScale). 16px 고정이라 글자 확대만 폭에 드러난다 */
.text-probe {
  position: absolute;
  top: 0;
  left: -9999px;
  visibility: hidden;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 큰 글씨(카카오톡 '가가', 브라우저 글자 크기)일 때만 라벨을 위로 쌓는다.
   em 폭은 글자 확대를 따라가지 않아, 라벨 칸과 값 칸 두 칸 배치가 좁은 칸에 글자를 몰아넣었다.
   인쇄에는 걸지 않는다(인쇄 한 장 맞춤은 그대로). */
@media screen {
  .is-large-text .member-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .is-large-text .member-fields .field {
    display: block;
  }

  .is-large-text .member-fields .field > label {
    margin: 0 0 4px;
  }

  /* 반려동물 체중·사료 두 칸: 큰 글씨에서는 칸이 좁아 안내 글이 숫자 중간('80k' / 'g')에서 끊겼다.
     위아래로 쌓아 줄 전체 폭을 쓴다(11-04 실기기 200%) */
  .is-large-text .row-fields:not(.member-fields) {
    grid-template-columns: minmax(0, 1fr);
  }

  .is-large-text .line dt {
    flex-basis: 100%;
    min-width: 0;
  }

  .is-large-text .legend {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .is-large-text .legend dd {
    margin-bottom: 10px;
  }
}

/* 두 칸 입력(반려동물 체중·사료, 가진 것)에서 한쪽 라벨만 두 줄이 되면 입력칸 높이가 어긋났다.
   같은 줄 두 칸이 라벨·입력·안내 행을 함께 쓰게 한다 */
@supports (grid-template-rows: subgrid) {
  .row-fields:not(.member-fields) > .field,
  .holdings-grid > .field {
    display: grid;
    /* 칸 폭은 부모 칸에 맞춘다. 지정하지 않으면 긴 글자 묶음의 폭만큼 칸이 넓어져
       큰 글씨에서 오른쪽 칸이 카드 밖으로 밀렸다(11-04 실기기 200%) */
    grid-template-columns: minmax(0, 1fr);
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 4px;
  }

  .row-fields:not(.member-fields) > .field > label,
  .holdings-grid > .field > label {
    align-self: end;
    margin-bottom: 0;
  }

  .row-fields:not(.member-fields) > .field > .field-msg,
  .holdings-grid > .field > .field-msg {
    margin-top: 0;
  }
}

/* 숫자와 단위를 묶은 글자('500mL 병 828개')가 칸보다 길어지는 극단(320px 폭 + 큰 글씨)에서는
   묶음 안에서라도 줄을 바꿔 가로로 넘치지 않게 한다. 보통 크기에서는 묶음이 그대로 지켜진다 */
.line dd {
  min-width: 0;
}

.sub,
.value,
.value-text,
.notes li,
.next-step,
.conditions,
.src-item > span {
  overflow-wrap: anywhere;
}

/* 출처 목록: 좁은 화면에서는 제목을 늘 배지 아래에 둬 항목마다 모양을 같게 한다 */
@media screen and (max-width: 599px) {
  .src-item > :not(.badge):not(.src-meta):not(.sr-only) {
    flex-basis: 100%;
  }
}

/* 공용 쿠키 배너의 '거부' 테두리: 모듈의 '.ks-cc button' 규칙이 테두리를 투명하게 덮는다(KS-237).
   모듈 본문은 16개 사이트 공통이라 고치지 않고 여기서 덮어쓴다 */
body .ks-cc .ks-cc-decline {
  border-color: var(--border-strong);
}

/* 다크 모드 체크 상자: 기본 모양(회색 채움)이 사이트 색과 어긋나 직접 그린다. 라이트는 기본 모양이 맞는다.
   인쇄는 screen이 아니라 기본 모양 그대로다 */
@media screen and (prefers-color-scheme: dark) {
  .checklist input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-grid;
    place-content: center;
    border: 2px solid var(--border-strong);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
  }

  .checklist input[type="checkbox"]::before {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--on-primary);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
    transform: scale(0);
  }

  .checklist input[type="checkbox"]:checked {
    border-color: var(--primary);
    background: var(--primary);
  }

  .checklist input[type="checkbox"]:checked::before {
    transform: scale(1);
  }
}

@media (forced-colors: active) {
  .checklist input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
  }
}