:root {
  color-scheme: light;
  /* green/red는 원래 표준 Tailwind 원색(#10b981/#ef4444)이었는데, 흰 글자와 겹쳤을 때 대비가
     각각 2.54:1/3.76:1로 WCAG AA(4.5:1) 미달이었음 — 응급도 판정을 새벽에 급하게 읽어야 하는
     이 서비스에서는 특히 치명적이라, 여전히 표준적으로 인식되는 선에서 한 단계 진한 톤(Tailwind
     600번대)으로 조정해서 흰 글자와 4.8~5:1을 확보함. yellow는 색 자체를 안 바꾸고 대신
     .risk-badge.yellow에서 글자색을 어둡게 바꿔서 해결(아래 참고).*/
  --green: #15803d;
  --yellow: #f59e0b;
  --red: #dc2626;
  --bg: #f8f7f4;
  --card: #ffffff;
  --text: #232520;
  --muted: #4a5568;
  --border: #e5e2da;
  --accent: #1b4d3e;
  --accent-contrast-text: #fff;
  /* --red(#dc2626)를 텍스트 색으로 직접 쓰는 곳(.red-flag-alert, .error-message, .verify-alert)은
     라이트모드에서도 실은 대비 미달이었음(옅게 tint된 배경 위 3.99:1, 기준 4.5:1) — 처음엔 "라이트는
     괜찮을 것"이라고 넘겨짚었다가 axe-core 재검사에서 다시 걸려서 발견함(2026-08-08). 배경으로 쓰는
     --red 자체는 흰 글자 대비 확보용으로 이미 충분히 밝아서 그대로 두고, 텍스트 전용으로 라이트/
     다크 각각 더 진하게/더 밝게 조정한 별도 변수를 둠. */
  --red-text: #b91c1c;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16201c;
  --card: #1f2b25;
  --text: #f2f1ed;
  --muted: #9aa5a1;
  --border: #2e3a34;
  --accent: #4fae8e;
  /* 다크모드 --accent(#4fae8e)는 어두운 배경에서도 보이도록 밝은 민트로 바뀌는데, 그 위에
     흰 글자를 그대로 쓰면 대비 2.7:1로 WCAG AA(4.5:1) 미달 — 버튼/칩 텍스트는 --bg(어두운 색)를
     써서 6.18:1로 통과시킴. */
  --accent-contrast-text: #16201c;
  --red-text: #f87171;
}
:root[data-contrast="high"] {
  --bg: #ffffff;
  --card: #ffffff;
  --text: #000000;
  --muted: #1a1a1a;
  --border: #000000;
  --accent: #003d2e;
  --accent-contrast-text: #fff;
  --red-text: #8f0000;
}
:root[data-theme="dark"][data-contrast="high"] {
  --bg: #000000;
  --card: #000000;
  --text: #ffffff;
  --muted: #f2f2f2;
  --border: #ffffff;
  --accent: #7bffcf;
  --accent-contrast-text: #000000;
  --red-text: #ff8a8a;
}
/* 고대비 모드에서는 은은한 배경 그라데이션도 대비를 흐리는 요소라 제거함. */
:root[data-contrast="high"] body { background-image: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html.large-text { font-size: 118%; }
body {
  margin: 0;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}
.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
@media (min-width: 640px) {
  .container { max-width: 640px; padding-top: 40px; }
}
@media (min-width: 900px) {
  .container { max-width: 760px; }
}
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header-inner {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
@media (min-width: 640px) {
  .site-header-inner { max-width: 640px; }
}
@media (min-width: 900px) {
  .site-header-inner { max-width: 760px; }
}
.site-header-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--accent); text-decoration: none; font-size: 1rem; white-space: nowrap; }
.site-header-brand svg { flex: none; display: block; }
.site-header-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-header-nav a { font-size: 0.82rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-header-nav a:hover { color: var(--accent); }
.settings-wrap { position: relative; }
.settings-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .settings-toggle is reused on an <a> (the ko/en language-switch button) — .site-header-nav a
   otherwise wins the font-size cascade (equal specificity, more selectors), so restate it here. */
.site-header-nav a.settings-toggle { font-size: 1rem; }
.settings-panel {
  position: absolute;
  top: 42px;
  right: 0;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 20;
}
.settings-panel-item {
  text-align: left;
  font-size: 0.85rem;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.settings-panel-item:hover { background: var(--bg); }
.settings-panel-item.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.settings-panel-select {
  font-size: 0.85rem;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.settings-panel-divider { height: 1px; background: var(--border); margin: 2px 4px; }
.lang-wrap { position: relative; }
.lang-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang-toggle:hover, .lang-toggle:focus-visible { background: color-mix(in srgb, var(--accent) 26%, var(--card)); }
.lang-panel {
  position: absolute;
  top: 46px;
  right: 0;
  min-width: 160px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 20;
}
.lang-panel a {
  text-align: left;
  font-size: 0.85rem;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.lang-panel a:hover { background: var(--bg); }
.lang-panel a.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.hero {
  text-align: center;
  margin-bottom: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
}
.hero-emoji-strip { font-size: 1.6rem; margin-bottom: 8px; letter-spacing: 6px; }
.hero h1 { font-size: 1.5rem; margin-bottom: 8px; }
.hero p { color: var(--muted); font-size: 0.95rem; text-align: left; }
.trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.trust-badge {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
}
.scan-card, .result-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
select, button, textarea, input[type="text"], input[type="search"] {
  font-size: 1rem;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
textarea { font-family: inherit; resize: vertical; }
input[type="text"] { font-family: inherit; width: 100%; }
.red-flag-alert {
  font-size: 0.78rem;
  color: var(--red-text);
  background: color-mix(in srgb, var(--red-text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-text) 30%, transparent);
  border-radius: 10px;
  padding: 10px 12px;
  margin: -4px 0 0;
  line-height: 1.5;
}
.symptom-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 2px; }
.symptom-chip {
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.symptom-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast-text);
}
.affiliate-disclosure { font-size: 0.75rem; color: var(--muted); margin: -4px 0 0; }
.save-hint { font-size: 0.75rem; color: var(--muted); text-align: center; margin: -4px 0 4px; }
.upload-drop {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-drop.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.upload-hint { font-size: 0.8rem; color: var(--muted); }
.preview-list { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.preview-list img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.preview-list img:only-child { width: min(220px, 100%); height: 220px; }
#scan-button {
  background: var(--accent);
  color: var(--accent-contrast-text);
  border: none;
  font-weight: 600;
  cursor: pointer;
}
#scan-button:disabled { opacity: 0.6; cursor: default; }
#scan-button.scanning { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }
.progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  width: 40%;
  background: var(--accent);
  border-radius: 2px;
  animation: progress-slide 1.1s ease-in-out infinite;
}
@keyframes progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  #scan-button.scanning { animation: none; }
  .progress-bar-fill { animation: none; width: 100%; }
}
.risk-badge {
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  color: #fff;
}
.risk-badge.green { background: var(--green); }
.risk-badge.yellow { background: var(--yellow); color: #232520; } /* 노랑 배경은 흰 글자 대비가 2.15:1이라 어두운 글자로 고정(7.2:1) */
.risk-badge.red { background: var(--red); }
#vet-link {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}
#vet-link.calm {
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
}
#vet-link.urgent {
  background: var(--red);
  color: #fff;
  border: none;
}
#result-steps { padding-left: 20px; }
#result-items { display: flex; flex-direction: column; gap: 8px; }
.item-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
}
.item-link-title { color: var(--accent); font-size: 0.9rem; font-weight: 700; }
.item-link-reason { color: var(--muted); font-size: 0.78rem; }
.transport-card {
  font-size: 0.85rem;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.5;
}
.transport-card-title { font-weight: 700; margin: 0 0 6px; }
.transport-card ul { margin: 0 0 8px; padding-left: 18px; }
.transport-card a { color: var(--red); font-weight: 600; text-decoration: underline; }
.matched-guide {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.matched-guide-label { font-size: 0.78rem; color: var(--muted); margin: 0 0 6px; }
.matched-guide-card { color: var(--accent); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.scan-history-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scan-history-header p { margin: 0; font-weight: 700; font-size: 0.9rem; }
#clear-history-button {
  font-size: 0.75rem;
  padding: 6px 10px;
  width: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}
#scan-history-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.scan-history-item { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.history-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.history-dot.green { background: var(--green); }
.history-dot.yellow { background: var(--yellow); }
.history-dot.red { background: var(--red); }
.disclaimer {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 24px;
  line-height: 1.5;
  text-align: left;
}
.error-message { color: var(--red-text); text-align: center; }
footer { text-align: center; margin-top: 16px; }
footer a { color: var(--muted); font-size: 0.8rem; }
.footer-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.policy h2 { font-size: 1.1rem; margin-top: 24px; }
.policy p { color: var(--muted); line-height: 1.6; }

.install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}
.install-banner p { margin: 0; }
.install-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }
#install-banner-accept {
  background: var(--accent);
  color: var(--accent-contrast-text);
  border: none;
  font-size: 0.82rem;
  padding: 8px 14px;
  width: auto;
}
#install-banner-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  padding: 8px 14px;
  width: auto;
}

/* 인쇄용(사육장 옆에 붙여두는 응급 대처법/가이드 종이 출력을 위한 스타일). 화면에서는 안 보이다가
   Ctrl+P/Cmd+P로 인쇄할 때만 나타남 — 별도 "인쇄" 버튼 없이 브라우저 기본 인쇄 기능 그대로 씀. */
.print-footer { display: none; }
@media print {
  .site-header, .settings-wrap, .scan-card, .trust-badges, .hero-emoji-strip,
  button, .item-link, #affiliate-disclosure, #vet-link, #transport-card,
  #scan-history, #install-banner, .verify-alert .actions { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .print-footer {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid #000;
  }
  .print-footer img { width: 70px; height: 70px; }
  .print-footer p { margin: 0; font-size: 0.8rem; }
}