/* ===== Design Tokens ===== */
/* Anthropic / Claude–inspired: warm paper ground, single clay accent,
   restrained borders & shadows, serif display type. No neon, no rainbow. */
:root {
  --bg-primary: #f5f4ee;        /* warm paper */
  --bg-secondary: #fbfaf6;      /* raised surface */
  --bg-card: #fbfaf6;
  --bg-hero: #efece3;
  --bg-modal: #fbfaf6;
  --text-primary: #1f1e1c;      /* warm near-black */
  --text-secondary: #535149;
  --text-muted: #8a877c;
  --accent: #e33f29;            /* brand red (펫크크 로고) */
  --accent-hover: #c4321e;
  --accent-light: rgba(227,63,41,0.10);
  --border: rgba(31,30,28,0.10);
  --shadow-sm: 0 1px 2px rgba(31,30,28,0.04);
  --shadow-md: 0 2px 8px rgba(31,30,28,0.05);
  --shadow-lg: 0 6px 20px rgba(31,30,28,0.07);
  --shadow-xl: 0 14px 40px rgba(31,30,28,0.10);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --glass-bg: rgba(245,244,238,0.82);
  --glass-border: rgba(31,30,28,0.08);
  --glass-blur: 12px;
  --chip-bg: rgba(31,30,28,0.05);
  --chip-active-bg: var(--accent);
  --chip-active-text: #fbfaf6;
  --modal-overlay: rgba(31,30,28,0.38);
  --bar-fill: var(--accent);
  --bar-bg: rgba(31,30,28,0.08);
  --tag-bg: rgba(227,63,41,0.10);
  --tag-text: #bf3420;
  --font-display: 'Newsreader', 'Noto Serif KR', Georgia, serif;
  /* Muted, harmonised earth tones for the breed groups (no neon) */
  --group-sporting: #5b7c8d;     /* slate blue */
  --group-hound: #8d6e93;        /* muted plum */
  --group-working: #b15a44;      /* brick */
  --group-terrier: #bb8a45;      /* ochre */
  --group-toy: #b67885;          /* dusty rose */
  --group-herding: #7a8f6b;      /* sage */
  --group-non-sporting: #5f8a86; /* muted teal */
  --shimmer-base: rgba(31,30,28,0.05);
  --shimmer-highlight: rgba(255,255,255,0.45);
}

[data-theme="dark"] {
  --bg-primary: #262522;        /* warm charcoal */
  --bg-secondary: #302f2b;
  --bg-card: #302f2b;
  --bg-hero: #2b2a26;
  --bg-modal: #302f2b;
  --text-primary: #f3f1ea;
  --text-secondary: #b8b4a8;
  --text-muted: #87837a;
  --accent: #ef6a54;            /* lighter brand red for dark contrast */
  --accent-hover: #f4866f;
  --accent-light: rgba(239,106,84,0.15);
  --border: rgba(243,241,234,0.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.30);
  --shadow-lg: 0 6px 20px rgba(0,0,0,0.38);
  --shadow-xl: 0 14px 40px rgba(0,0,0,0.46);
  --glass-bg: rgba(38,37,34,0.82);
  --glass-border: rgba(243,241,234,0.08);
  --chip-bg: rgba(243,241,234,0.06);
  --chip-active-text: #262522;
  --modal-overlay: rgba(0,0,0,0.6);
  --bar-bg: rgba(243,241,234,0.10);
  --tag-bg: rgba(239,106,84,0.16);
  --tag-text: #ef6a54;
  --group-sporting: #7a98a8;
  --group-hound: #a98caf;
  --group-working: #cf7a63;
  --group-terrier: #d2a866;
  --group-toy: #cf96a2;
  --group-herding: #98ac88;
  --group-non-sporting: #7faaa5;
  --shimmer-base: rgba(243,241,234,0.06);
  --shimmer-highlight: rgba(243,241,234,0.16);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans KR', -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.4s, color 0.4s;
  overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img { max-width: 100%; display: block; }
input, select { font-family: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ===== Icons (inline SVG line-icon sprite) ===== */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  width: 18px; height: 18px;
  display: inline-block; flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ic-sm { width: 14px; height: 14px; }

/* ===== Header ===== */
.header {
  position: relative;
  background: var(--bg-primary);
  transition: background 0.4s;
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 11px; }
.logo-icon { display: inline-flex; align-items: center; color: var(--accent); }
.logo-icon .ic { width: 30px; height: 30px; }
.logo-mark { width: 34px; height: 34px; display: block; }
.logo-text {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.logo-badge {
  font-size: 11px; font-weight: 600;
  background: var(--accent-light); color: var(--accent);
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--border);
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-toggle {
  height: 48px;
  padding: 0 20px;
  border-radius: 24px;
  background: var(--chip-bg);
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  font-size: 14px; font-weight: 700;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all 0.3s;
  letter-spacing: 0.5px;
}
.lang-toggle:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); transform: scale(1.05); }
.lang-toggle.active-en { background: var(--accent); color: #fff; border-color: var(--accent); }
.theme-toggle {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--chip-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: background 0.3s, transform 0.3s, color 0.3s;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle .ic { width: 21px; height: 21px; }
.theme-toggle:hover { background: var(--accent-light); transform: scale(1.1); }
.theme-icon { display: none; }
[data-theme="light"] .light-icon { display: block; }
[data-theme="dark"] .dark-icon { display: block; }

/* Search toggle button (expands the search bar) */
.search-toggle {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--chip-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: background 0.3s, transform 0.3s, color 0.3s;
}
.search-toggle .ic { width: 20px; height: 20px; }
.search-toggle:hover { color: var(--accent); background: var(--accent-light); transform: scale(1.1); }
.header.search-open .search-toggle,
.search-toggle.has-query { background: var(--accent); color: #fff; }

/* Collapsible search bar below the top row */
.header-search {
  max-width: 1400px; margin: 0 auto;
  max-height: 0; overflow: hidden; opacity: 0;
  padding: 0 24px;
  transition: max-height 0.3s cubic-bezier(0.22,1,0.36,1), padding 0.3s ease, opacity 0.25s ease;
}
.header.search-open .header-search {
  max-height: 96px; padding: 2px 24px 14px; opacity: 1;
}
.header-search .search-container { max-width: 560px; margin: 0 auto; }

.hero {
  display: block;
  flex: 1;
  max-width: 480px;
  margin: 0 32px;
  background: transparent;
  padding: 0;
  text-align: center;
  position: relative;
}
.hero-inner { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; } /* Slimmer search container width */
.search-container { position: relative; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 10px 16px; /* Sleeker, less bulky padding */
  box-shadow: var(--shadow-lg);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-light);
}
.search-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--text-muted); }
.search-input {
  flex: 1; border: none; outline: none;
  font-size: 15px; background: transparent;
  color: var(--text-primary);
}
.search-input::placeholder { color: var(--text-muted); }
.search-clear {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--chip-bg);
  font-size: 14px; color: var(--text-muted);
  display: none; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.search-clear.visible { display: flex; }
.search-clear:hover { background: var(--accent-light); color: var(--accent); }
.search-count {
  display: none; /* Completely hidden per user request to delete the search count text */
}

/* ===== Trending Section ===== */
.trending-section {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
  overflow: hidden;
}
.trending-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 24px;
}
.trending-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.trending-title-wrap {
  display: flex; align-items: center; gap: 10px;
}
.trending-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--chip-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.trending-title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600;
  letter-spacing: -0.01em;
}
.trending-meta {
  font-size: 13px; color: var(--text-muted); font-weight: 600;
}
.trending-viewers {
  display: flex; align-items: center; gap: 6px;
}
.viewers-icon { display: inline-flex; align-items: center; }
.viewers-icon .ic { width: 15px; height: 15px; }
.trending-track {
  display: flex; gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.trending-track::-webkit-scrollbar { height: 4px; }
.trending-track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

.trending-card {
  flex-shrink: 0;
  width: 152px;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.3s, box-shadow 0.3s;
}
.trending-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.trending-card-image {
  height: 100px;
  overflow: hidden;
  position: relative;
  background: var(--bg-hero);
}
.trending-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s;
}
.trending-card:hover .trending-card-image img { transform: scale(1.12); }
.trending-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.trending-rank {
  position: absolute; top: 8px; left: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rank-1 { background: var(--accent); }
.rank-2 { background: #9b978c; }
.rank-3 { background: #b08968; }
.rank-4, .rank-5 { background: rgba(31,30,28,0.55); }

.trending-card-views {
  position: absolute; bottom: 8px; right: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 11px; font-weight: 700;
  backdrop-filter: blur(4px);
  display: flex; align-items: center; gap: 4px;
}
.trending-card-body { padding: 9px 10px; position: relative; z-index: 1; }
.trending-card-name {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trending-card-sub {
  font-size: 11px; color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trending-card-change {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 700;
  margin-top: 5px; padding: 2px 6px;
  border-radius: 6px;
}
.change-up { background: rgba(122,143,107,0.14); color: #5f7a52; }
.change-down { background: rgba(177,90,68,0.12); color: #a8442b; }
.change-same { background: var(--chip-bg); color: var(--text-muted); }


/* ===== Filter Section ===== */
.filter-section {
  position: relative; z-index: 90;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--border);
}
.filter-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 16px 24px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.filter-group {
  display: flex;
  align-items: center; /* vertically center label + combo box */
  gap: 8px;
}
.filter-group-header {
  display: flex;
  align-items: center;
  height: 42px; /* Fixed height matching the chip's line height + padding box */
  flex-shrink: 0;
}
.filter-label {
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0; /* Keep it rock-solid and prevent shrinking during chip expansion */
}
.total-count-badge {
  font-size: 11px; font-weight: 700;
  background: var(--accent-light);
  color: var(--accent);
  padding: 2px 8px; border-radius: 12px;
  margin-left: 8px;
  display: inline-flex; align-items: center;
  vertical-align: middle;
  letter-spacing: 0; text-transform: none; /* Normalize badge casing */
  flex-shrink: 0; /* Keep it rock-solid and prevent shrinking during chip expansion */
  white-space: nowrap; /* Prevent any wrapping inside the badge */
}
.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
  padding: 4px 4px 8px 4px; /* prevent clipping active shadow/translate */
  margin: -4px -4px -8px -4px; /* offset padding */
  flex-grow: 1;
  min-width: 0;
  cursor: grab;
  user-select: none;
}
.filter-chips:active {
  cursor: grabbing;
}
.filter-chips::-webkit-scrollbar {
  display: none; /* Safari, Chrome, Opera */
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px; /* Fixed height for rock-solid vertical alignment */
  padding: 0 13px;
  border-radius: 16px;
  font-size: 13px; font-weight: 600;
  background: var(--chip-bg);
  color: var(--text-secondary);
  transition: background-color 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.chip:hover { 
  background: var(--accent-light); 
  color: var(--accent); 
  transform: translateY(-1px);
}
.chip.active {
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
  box-shadow: var(--shadow-sm);
}

.chip-main { display: inline-flex; align-items: center; }
/* Description is no longer shown inside the chip (kept in DOM for JS to read) */
.chip-desc { display: none; }

/* Click-to-show group description below the filter row */
.group-desc-display {
  flex-basis: 100%; width: 100%;
  margin: 2px 0 0;
  font-size: 13px; line-height: 1.6;
  color: var(--text-secondary);
}
.group-desc-display:empty { display: none; }
.group-desc-display::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 8px;
  vertical-align: middle;
}
.sort-select {
  height: 32px; /* match the smaller chips */
  padding: 0 14px;
  border-radius: 16px;
  font-size: 13px; font-weight: 600;
  background: var(--chip-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  outline: none;
  cursor: pointer;
}
.sort-select:focus { border-color: var(--accent); }

/* ===== Main / Card Grid ===== */
.main-content {
  max-width: 1400px; margin: 0 auto;
  padding: 22px 24px 48px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.no-results {
  text-align: center; padding: 80px 20px;
}
.no-results-emoji { font-size: 64px; display: block; margin-bottom: 16px; }
.no-results-text { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.no-results-sub { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

/* ===== Pagination ===== */
.pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px; margin: 28px 0 8px;
}
.pagination:empty { display: none; }
.page-btn {
  min-width: 36px; height: 36px;
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--accent); color: var(--accent); transform: translateY(-1px);
}
.page-btn.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  cursor: default;
}
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-nav { font-size: 18px; line-height: 1; }
.page-ellipsis { color: var(--text-muted); padding: 0 4px; user-select: none; }

/* ===== Dog Card ===== */
.dog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0; transform: translateY(24px);
}
.dog-card.visible {
  opacity: 1; transform: translateY(0);
}
.dog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.card-image-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: var(--bg-hero);
}
.card-image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dog-card:hover .card-image { transform: scale(1.08); }

/* ===== Animal type switcher (segmented pill, 3-way) ===== */
.animal-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin: 0 auto;
  padding: 5px;
  border-radius: 999px;
  background: var(--bg-hero);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  user-select: none;
}
.animal-toggle-thumb {
  position: absolute;
  top: 5px; left: 5px; bottom: 5px;
  /* 노출 중인 동물 수에 맞춰 폭이 정해진다 (app.js가 --animal-count 를 설정) */
  width: calc((100% - 10px) / var(--animal-count, 3));
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(227,63,41,0.35);
  transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1);
  z-index: 1;
}
body[data-animal="dog"]     .animal-toggle-thumb { transform: translateX(0); }
body[data-animal="cat"]     .animal-toggle-thumb { transform: translateX(100%); }
body[data-animal="special"] .animal-toggle-thumb { transform: translateX(200%); }
.animal-toggle-option {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 104px;
  padding: 9px 16px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.animal-toggle-option .ic { width: 17px; height: 17px; }
.animal-toggle-option.active { color: #fff; }
.animal-toggle-option:not(.active):hover { color: var(--accent); }

@media (max-width: 480px) {
  .animal-toggle-option { min-width: 0; flex: 1; padding: 9px 10px; font-size: 13px; gap: 5px; }
  .animal-toggle { display: flex; width: 100%; }
}

/* ===== Coming soon (cat / special) ===== */
.animal-coming-soon { display: none; }
.coming-soon-emoji { font-size: 72px; line-height: 1; margin-bottom: 18px; }
.coming-soon-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0 0 10px; }
.coming-soon-sub { color: var(--text-secondary); font-size: 15px; margin: 0 0 24px; }
.coming-soon-btn {
  padding: 12px 24px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.coming-soon-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* All three animals (dog · cat · special) now have full encyclopedias,
   so #animalComingSoon stays hidden by default. */

/* Special animals: no fake "live trending" — use a taxonomic toggle instead. */
#specialGroupToggle { display: none; }
body[data-animal="special"] #trendingSection { display: none; }
body[data-animal="special"] #specialGroupToggle { display: block; }
body[data-animal="special"] #groupFilterGroup { display: none; }

/* Wrapping segmented toggle (same pattern as the care-guide / shop toggles) */
.special-group-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: fit-content; max-width: calc(100% - 48px);
  margin: 26px auto 4px;
  padding: 5px;
  background: var(--bg-hero);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.sgt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 17px; border-radius: 999px;
  border: none; background: transparent;
  color: var(--text-secondary); font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.sgt-btn:hover:not(.active) { color: var(--accent); }
.sgt-btn.active { color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
/* Active pill takes on its taxonomic group colour (matches the card badges) */
.sgt-all.active          { background: var(--accent); box-shadow: 0 2px 8px rgba(227,63,41,0.35); }
.sgt-mammal.active       { background: #b08968; }
.sgt-bird.active         { background: #5b9b8d; }
.sgt-reptile.active      { background: #6a994e; }
.sgt-amphibian.active    { background: #4d8b9e; }
.sgt-fish.active         { background: #4a7ab5; }
.sgt-invertebrate.active { background: #9a6c8c; }
@media (max-width: 480px) {
  .sgt-btn { padding: 8px 13px; font-size: 13px; }
}

.card-image-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px;
  background: var(--bg-hero);
}
.card-group-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px; font-weight: 700;
  color: #fff;
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card-size-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.5);
  color: #fff;
  z-index: 3;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card-body { padding: 16px; }
.card-name-ko {
  font-size: 17px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.card-name-en {
  font-size: 13px; color: var(--text-muted);
  font-weight: 500;
}
.card-meta {
  display: flex; gap: 12px; margin-top: 12px;
  font-size: 12px; color: var(--text-secondary);
}
.card-meta-item { display: flex; align-items: center; gap: 4px; }
.card-stars {
  display: flex; gap: 1px; margin-top: 10px;
}
.card-star {
  width: 24px; height: 6px;
  border-radius: 3px;
  background: var(--bar-bg);
}
.card-star.filled { background: var(--bar-fill); }

/* Group colors — muted earth tones via tokens */
.group-sporting { background: var(--group-sporting); }
.group-hound { background: var(--group-hound); }
.group-working { background: var(--group-working); }
.group-terrier { background: var(--group-terrier); }
.group-toy { background: var(--group-toy); }
.group-herding { background: var(--group-herding); }
.group-non-sporting { background: var(--group-non-sporting); }
/* Cat coat-length groups */
.group-shorthair { background: #5b7c8d; }
.group-longhair { background: #b08968; }
.group-hairless { background: #9a8c98; }
/* Special-animal taxonomic groups */
.group-mammal { background: #b08968; }
.group-bird { background: #5b9b8d; }
.group-reptile { background: #6a994e; }
.group-amphibian { background: #4d8b9e; }
.group-fish { background: #4a7ab5; }
.group-invertebrate { background: #9a6c8c; }

/* Legality badge (special animals) — sits where the size badge sits on cards */
.legal-badge { letter-spacing: 0.2px; }
.card-size-badge.legal-badge { background: rgba(0,0,0,0.55); }
.card-size-badge.legal-badge.legal-ok { background: rgba(45,122,90,0.85); }
.card-size-badge.legal-badge.legal-permit { background: rgba(196,138,40,0.9); }
.card-size-badge.legal-badge.legal-caution { background: rgba(192,80,60,0.9); }
.modal-badge.legal-badge.legal-ok { background: #2d7a5a; }
.modal-badge.legal-badge.legal-permit { background: #c48a28; }
.modal-badge.legal-badge.legal-caution { background: #c0503c; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--modal-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg-modal);
  border-radius: var(--radius-xl);
  max-width: 720px; width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--chip-bg);
  font-size: 18px; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.modal-close:hover { background: var(--accent-light); color: var(--accent); transform: scale(1.1); }
.modal-hero {
  height: 300px; overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  position: relative;
  background: var(--bg-hero);
}
.modal-hero img {
  width: 100%; height: 100%; object-fit: cover;
}
.modal-hero-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 100px;
}
.modal-hero-gradient {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(transparent, var(--bg-modal));
}
.modal-hero-credit {
  position: absolute; bottom: 48px; right: 12px; z-index: 2;
  max-width: 70%;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255,255,255,0.92);
  font-size: 11px; line-height: 1.4;
  text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-hero-credit a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.modal-body { padding: 0 32px 32px; }
.modal-title-section { margin-top: -40px; position: relative; z-index: 1; }
.modal-name-ko { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.modal-name-en { font-size: 16px; color: var(--text-muted); margin-top: 2px; }
.modal-badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.modal-badge {
  padding: 4px 12px; border-radius: 12px;
  font-size: 12px; font-weight: 700; color: #fff;
}
.modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-top: 24px;
}
.modal-info-card {
  background: var(--chip-bg);
  border-radius: var(--radius-md);
  padding: 16px; text-align: center;
}
.modal-info-icon { display: flex; justify-content: center; color: var(--accent); margin-bottom: 6px; }
.modal-info-icon .ic { width: 22px; height: 22px; }
.modal-info-value { font-size: 18px; font-weight: 700; margin-top: 4px; }
.modal-info-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.modal-section { margin-top: 28px; }
.modal-section-title {
  font-size: 16px; font-weight: 700;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.modal-section-title .ic { width: 18px; height: 18px; color: var(--accent); }
.modal-rating-list { display: flex; flex-direction: column; gap: 10px; }
.modal-rating-row { display: flex; align-items: center; gap: 12px; }
.modal-rating-label {
  font-size: 14px; font-weight: 600;
  min-width: 92px; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px;
}
.modal-rating-label .ic { color: var(--accent); flex-shrink: 0; }
.modal-rating-bar {
  flex: 1; height: 10px;
  background: var(--bar-bg);
  border-radius: 5px; overflow: hidden;
}
.modal-rating-fill {
  height: 100%; border-radius: 5px;
  background: var(--bar-fill);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-rating-value {
  font-size: 14px; font-weight: 700;
  color: var(--accent); min-width: 30px; text-align: right;
}
.modal-temperament { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-tag {
  padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  background: var(--tag-bg); color: var(--tag-text);
}
.modal-fun-facts { display: flex; flex-direction: column; gap: 8px; }
.modal-fact {
  padding: 12px 16px;
  background: var(--chip-bg);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-secondary);
  border-left: 3px solid var(--accent);
  display: flex; align-items: center; gap: 10px;
}
.modal-fact .ic { color: var(--accent); flex-shrink: 0; }

/* Coat-pattern gallery (e.g. Korean Shorthair) */
.modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}
.modal-gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--chip-bg);
}
.modal-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.modal-gallery-item:hover img { transform: scale(1.06); }
.modal-gallery-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 16px 8px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  display: flex; flex-direction: column; gap: 1px;
}
.modal-gallery-label { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; line-height: 1.2; }
.modal-gallery-credit {
  color: rgba(255,255,255,0.65); font-size: 9px; font-weight: 400;
  line-height: 1.2; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-description {
  font-size: 15px; line-height: 1.8;
  color: var(--text-secondary);
}

/* ===== Modal video (YouTube lite-embed) ===== */
.yt-lite, .yt-iframe {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-md); overflow: hidden; border: 0;
  display: block;
}
.yt-lite {
  position: relative; cursor: pointer;
  background: var(--bg-hero) center/cover no-repeat;
}
.yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-lite::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0.12); transition: background 0.2s ease;
}
.yt-lite:hover::after { background: rgba(0,0,0,0.04); }
.yt-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 1;
  background: var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.yt-play svg { width: 26px; height: 26px; margin-left: 3px; fill: #fff; }
.yt-lite:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-hover); }
.yt-search {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: var(--radius-md);
  background: var(--chip-bg); color: var(--text-primary);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.yt-search .ic { color: #f00; width: 22px; height: 22px; }
.yt-search:hover { background: var(--accent-light); transform: translateY(-1px); }

/* ===== Back to Top ===== */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff; font-size: 20px; font-weight: 700;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
  z-index: 50;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--accent-hover); transform: translateY(-2px); }

/* ===== Ad Slots ===== */
/* Reserved placeholders to prevent CLS. After AdSense approval, replace the
   .ad-slot-inner contents with the <ins class="adsbygoogle"> snippet. */
.ad-slot {
  max-width: 1400px;
  margin: 18px auto;
  padding: 0 24px;
  display: flex;
  justify-content: center;
}
.ad-slot-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius-md);
  opacity: 0.75;
  overflow: hidden;
}
.ad-slot-tag {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted); opacity: 0.7;
}
.ad-leaderboard .ad-slot-inner,
.ad-footer .ad-slot-inner { max-width: 728px; min-height: 90px; }
.ad-inline { padding: 0; margin: 8px auto 4px; }
.ad-inline .ad-slot-inner { max-width: 728px; min-height: 250px; }

@media (max-width: 768px) {
  .ad-slot { margin: 18px auto; padding: 0 16px; }
  .ad-inline { padding: 0; }
  .ad-leaderboard .ad-slot-inner,
  .ad-footer .ad-slot-inner { min-height: 100px; }
}

/* ===== Footer ===== */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 32px 24px;
}
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-logo { height: 34px; width: auto; display: block; margin: 0 auto 12px; }
.footer p { font-size: 14px; color: var(--text-muted); }
.footer-sub { margin-top: 6px; }
.footer a { color: var(--accent); font-weight: 600; }
.footer a:hover { text-decoration: underline; }

/* ===== Navigation ===== */
.main-nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  /* NOTE: no backdrop-filter here — it would trap position:fixed dropdowns inside the
     overflow:hidden scroll container and clip them. Solid bg keeps the sticky bar clean. */
  overflow-x: auto; overflow-y: hidden; /* horizontal scroll; dropdowns are position:fixed so they aren't clipped */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: background 0.4s;
}
.main-nav::-webkit-scrollbar { height: 0; width: 0; }

@media (max-width: 768px) {
  .main-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-inner {
    justify-content: flex-start !important;
  }
}
.nav-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 24px;
  display: flex; gap: 2px;
  justify-content: center; /* Center-align navigation items on desktop */
  min-width: max-content;
}
.nav-item {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: all 0.3s;
  white-space: nowrap;
}
.nav-item:hover { color: var(--accent); background: var(--accent-light); }
.nav-item.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-icon { display: inline-flex; align-items: center; }
.nav-icon .ic { width: 17px; height: 17px; }
.nav-text { font-size: 13px; }

/* ===== Promo nav items (제휴) ===== */
.nav-spacer {
  align-self: center;
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 10px;
  flex: none;
}
.nav-item-promo {
  color: var(--accent);
  border-radius: 999px 999px 0 0;
}
.nav-item-promo .nav-text {
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent), #e08a5f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-item-promo .nav-icon { color: var(--accent); }
.nav-item-promo:hover { background: var(--accent-light); }
.nav-item-promo.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== Nav Dropdown Group ===== */
.nav-group {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Chevron indicator */
.nav-chevron {
  font-size: 10px;
  margin-left: 2px;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  display: inline-block;
  opacity: 0.6;
}
.nav-group:hover .nav-chevron,
.nav-group-trigger[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}
.nav-group:hover .nav-group-trigger,
.nav-group-trigger[aria-expanded="true"],
.nav-group-trigger.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-light);
}

/* Dropdown panel */
.nav-dropdown {
  position: fixed; /* JS sets top/left from the trigger so the scroll container can't clip it */
  transform: translateX(-50%) translateY(-6px);
  width: 260px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
  /* small arrow indicator */
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: 6px solid var(--border);
}
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom: 5px solid var(--bg-secondary);
}
.nav-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown items */
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, transform 0.15s;
  position: relative;
}
.nav-dropdown-item:hover {
  background: var(--accent-light);
  transform: translateX(2px);
}
.nav-dropdown-item.active {
  background: var(--accent-light);
}
.nav-dropdown-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.nav-dropdown-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.nav-dropdown-icon .ic { width: 18px; height: 18px; }
.nav-dropdown-item:hover .nav-dropdown-icon { color: var(--accent); }
.nav-dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.nav-dropdown-desc {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.nav-dropdown-item.active .nav-dropdown-title { color: var(--accent); }
.nav-dropdown-item.active .nav-dropdown-icon { border-color: var(--accent); }

/* Divider between dropdown items */
.nav-dropdown-item + .nav-dropdown-item {
  border-top: 1px solid var(--border);
}

/* Keep dropdown open on hover (handled by JS but also CSS for non-JS fallback) */
@media (hover: hover) {
  .nav-group:hover .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile: make dropdown full width from bottom */
@media (max-width: 768px) {
  .nav-dropdown {
    position: fixed;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: translateY(8px);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: none;
    padding: 16px 12px 28px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .nav-dropdown.open {
    transform: translateY(0);
  }
  .nav-dropdown::before,
  .nav-dropdown::after { display: none; }
  .nav-dropdown-item { padding: 14px 16px; }
  .nav-dropdown-icon { width: 40px; height: 40px; font-size: 22px; }
  .nav-dropdown-title { font-size: 15px; }
  .nav-dropdown-desc { font-size: 12px; }
}



/* ===== Page Sections ===== */
.page-section { display: none; animation: pageFadeIn 0.4s ease; }
.page-section.active { display: block; }
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Content Pages ===== */
.content-page { max-width: 1000px; margin: 0 auto; padding: 0 24px 60px; }
.content-hero {
  text-align: center; padding: 16px 24px 16px;
  background: var(--bg-hero);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  margin-bottom: 18px;
}
.content-hero-emoji {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 15px;
  background: var(--accent-light);
  vertical-align: middle; margin: 0 12px 0 0;
}
.content-hero-title { display: inline-block; vertical-align: middle; }
.content-hero-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.content-hero-sub { font-size: 15px; color: var(--text-secondary); }
.care-hero, .vet-hero, .about-hero { background: var(--bg-hero); }
.content-body { padding: 0 0 32px; }

/* ===== Care guide toggle (segmented pill container) ===== */
.care-toggle {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: fit-content; max-width: 100%;
  margin: 0 auto 24px;
  padding: 5px;
  background: var(--bg-hero);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.care-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  border: none; background: transparent;
  color: var(--text-secondary); font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.care-toggle-btn .ic { width: 16px; height: 16px; }
.care-toggle-btn:hover:not(.active) { color: var(--accent); }
.care-toggle-btn.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(227,63,41,0.35);
}
@media (max-width: 480px) {
  .care-toggle-btn { padding: 8px 12px; font-size: 13px; gap: 5px; }
}

/* ===== 수의학 가이드 · 견종별 호발 질환 ===== */
.vet-disclaimer {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 22px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
.vet-disclaimer .ic { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

.disease-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.disease-tab {
  padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--bg-card);
  color: var(--text-secondary); font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease;
}
.disease-tab:hover { border-color: var(--accent); color: var(--accent); }
.disease-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.disease-tab-soon {
  border-style: dashed; color: var(--text-muted); cursor: default;
  font-weight: 600;
}
.disease-tab-soon:hover { border-color: var(--border); color: var(--text-muted); }

.disease-intro { font-size: 14.5px; line-height: 1.8; color: var(--text-secondary); margin: 0 0 16px; }

/* breed photo banner */
.disease-breed-hero {
  display: flex; gap: 20px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 16px; margin-bottom: 22px;
}
.disease-breed-photo-wrap { position: relative; flex-shrink: 0; width: 230px; }
.disease-breed-photo {
  width: 230px; height: 156px; object-fit: cover;
  border-radius: var(--radius-lg); display: block; background: var(--bg-hero);
}
.disease-breed-photo-wrap .modal-hero-credit { bottom: 8px; }
.disease-breed-info { flex: 1; min-width: 0; }
.disease-breed-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 8px; }
.disease-breed-name span { font-size: 14px; color: var(--text-muted); font-weight: 500; font-family: var(--font-sans, inherit); }
.disease-breed-info .disease-intro { margin: 0; }

@media (max-width: 600px) {
  .disease-breed-hero { flex-direction: column; align-items: stretch; }
  .disease-breed-photo-wrap, .disease-breed-photo { width: 100%; }
  .disease-breed-photo { height: 180px; }
}
.urgency-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 12.5px; color: var(--text-muted);
  padding: 12px 14px; background: var(--bg-hero); border-radius: var(--radius-md);
  margin-bottom: 22px;
}
.urgency-legend strong { color: var(--text-secondary); }

.disorder-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.disorder-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-lg); padding: 20px;
}
.disorder-card.urgency-routine   { border-left-color: #4a9d6a; }
.disorder-card.urgency-soon      { border-left-color: #d6a13a; }
.disorder-card.urgency-emergency { border-left-color: #cf5a52; }
.disorder-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.disorder-cat {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-light); padding: 2px 8px; border-radius: 6px; margin-bottom: 6px;
}
.disorder-name-ko { font-size: 17px; font-weight: 700; margin: 0; color: var(--text-primary); }
.disorder-name-en { font-size: 12px; color: var(--text-muted); margin: 2px 0 0; }
.urgency-badge {
  flex-shrink: 0; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; background: var(--bg-hero); color: var(--text-secondary);
}
.disorder-stat {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-hero); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-bottom: 14px;
  font-size: 13.5px; color: var(--text-primary);
}
.disorder-stat .ic { color: var(--accent); flex-shrink: 0; }
.disorder-stat em { color: var(--text-muted); font-style: normal; font-size: 12px; }
.disorder-block { margin-bottom: 12px; }
.disorder-block:last-child { margin-bottom: 0; }
.disorder-block-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px;
}
.disorder-block-label .ic { color: var(--accent); }
.disorder-block p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; }
.disorder-signs { margin: 0; padding-left: 18px; }
.disorder-signs li { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

.disease-source {
  background: var(--bg-hero); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.disease-source-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); display: block; margin-bottom: 6px; }
.disease-source p { font-size: 12.5px; line-height: 1.7; color: var(--text-muted); margin: 0 0 4px; }
.disease-source a { color: var(--accent); word-break: break-all; }
.disease-source-basis { font-style: italic; }

/* ===== Shop (제휴) page ===== */
.shop-hero { background: linear-gradient(135deg, var(--accent-light), var(--bg-hero)); }
.shop-tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  width: fit-content; max-width: 100%;
  margin: 0 auto 28px;
  padding: 5px;
  background: var(--bg-hero);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.shop-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.shop-tab .ic { width: 18px; height: 18px; }
.shop-tab:hover:not(.active) { color: var(--accent); }
.shop-tab.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px rgba(227,63,41,0.35);
}
@media (max-width: 480px) {
  .shop-tab { padding: 9px 14px; font-size: 14px; }
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.shop-card {
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease;
  opacity: 0;
  animation: shopFadeUp 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}
.shop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12);
  border-color: var(--accent);
}
@keyframes shopFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.shop-card-media {
  position: relative;
  height: 132px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-light), var(--bg-hero));
}
.shop-card-emoji { font-size: 58px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)); transition: transform 0.28s ease; }
.shop-card:hover .shop-card-emoji { transform: scale(1.12) rotate(-4deg); }
.shop-card-tag {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800;
}
.shop-card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.shop-card-name { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.shop-card-desc { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 16px; flex: 1; }
.shop-card-foot { display: flex; align-items: center; justify-content: space-between; }
.shop-card-price { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.shop-card-cta { font-size: 13px; font-weight: 700; color: var(--accent); transition: transform 0.2s ease; }
.shop-card:hover .shop-card-cta { transform: translateX(3px); }
.shop-disclosure {
  max-width: 720px; margin: 36px auto 0;
  font-size: 12px; line-height: 1.7; color: var(--text-muted);
  text-align: center;
}

/* Info Cards (Care page) */
.info-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.info-card-icon { font-size: 36px; margin-bottom: 12px; }
.info-card-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--text-primary); }
.info-card-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.info-card-list li {
  font-size: 14px; line-height: 1.7; color: var(--text-secondary);
  padding-left: 20px; position: relative;
}
.info-card-list li::before {
  content: '•'; position: absolute; left: 4px;
  color: var(--accent); font-weight: 700;
}
.info-card-list li strong { color: var(--text-primary); }

/* Checklist (Vet page) */
.checklist-section { margin-bottom: 32px; }
.checklist-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.check-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.check-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.check-emoji { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.check-item strong { font-size: 14px; color: var(--text-primary); display: block; margin-bottom: 2px; }
.check-item p { font-size: 13px; color: var(--text-muted); margin: 0; }
.vet-tip-box {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-top: 24px;
}
.vet-tip-icon { font-size: 28px; flex-shrink: 0; }
.vet-tip-content h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.vet-tip-content p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

/* About Page */
.about-card {
  display: flex; align-items: center; gap: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  margin-bottom: 32px;
}
.about-avatar {
  font-size: 64px; flex-shrink: 0;
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hero);
  border-radius: 50%;
}
.about-name { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.about-role { font-size: 14px; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.about-bio { font-size: 14px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 16px; }
.about-stats { display: flex; gap: 24px; }
.about-stat-item { text-align: center; }
.about-stat-number { font-size: 24px; font-weight: 800; color: var(--accent); display: block; }
.about-stat-label { font-size: 12px; color: var(--text-muted); }
.about-section { margin-bottom: 28px; }
.about-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.about-section p { font-size: 14px; line-height: 1.8; color: var(--text-secondary); }
.about-section a { color: var(--accent); font-weight: 600; }

/* ===== About: team (도림천종종감) ===== */
.team-logo { color: var(--accent); display: flex; justify-content: center; margin-bottom: 14px; }
.team-logo svg { width: 92px; height: auto; }
.team-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-bottom: 24px;
}
.team-member {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px 24px; text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-member:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
.team-avatar {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 28px; font-weight: 700;
}
.team-member-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 4px; }
.team-member-role { font-size: 13px; font-weight: 700; color: var(--accent); margin: 0 0 16px; }
.team-member-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.team-member-meta li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); text-align: left;
}
.team-member-meta .ic { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.team-made {
  text-align: center; background: var(--bg-hero);
  border-radius: var(--radius-xl); padding: 24px; margin-bottom: 22px;
}
.team-made-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin: 0 0 14px; }
.team-made .about-stats { justify-content: center; }
.team-thanks {
  font-size: 13.5px; line-height: 1.8; color: var(--text-muted);
  text-align: center; max-width: 560px; margin: 0 auto;
}
.team-thanks a { color: var(--accent); font-weight: 600; }

/* About: contact / work-with-us */
.team-contact {
  text-align: center;
  background: linear-gradient(135deg, var(--accent-light), var(--bg-hero));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 24px; margin-bottom: 22px;
}
.team-contact-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.team-contact-sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 18px; }
.team-contact-mail {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(227,63,41,0.3);
  transition: background 0.2s ease, transform 0.2s ease;
}
.team-contact-mail .ic { width: 19px; height: 19px; }
.team-contact-mail:hover { background: var(--accent-hover); transform: translateY(-1px); }

@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
}
.tech-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-tag {
  padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600;
  background: var(--tag-bg); color: var(--tag-text);
}

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Celebrity Page ===== */
.celeb-hero { background: var(--bg-hero); }
.celeb-category { margin-bottom: 36px; }
.celeb-category-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.celeb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.celeb-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
.celeb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.celeb-card-top {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.celeb-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: var(--bg-hero);
  flex-shrink: 0;
}
.celeb-name { font-size: 16px; font-weight: 700; }
.celeb-title { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.celeb-dog-info {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  flex-wrap: wrap;
}
.celeb-dog-breed {
  padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 700;
  background: var(--accent); color: #fff;
}
.celeb-dog-name {
  font-size: 14px; font-weight: 700;
  color: var(--accent); font-style: italic;
}
.celeb-dog-story {
  font-size: 13px; line-height: 1.7;
  color: var(--text-secondary);
}
.celeb-fun-fact {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-top: 12px;
}

/* ===== Food Guide ===== */
.food-hero { background: var(--bg-hero); }
.food-section { margin-bottom: 32px; }
.food-section-title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px;
  padding: 12px 16px; border-radius: var(--radius-md);
}
.danger-title { background: rgba(176,73,52,0.10); color: #a8442b; }
.caution-title { background: rgba(187,138,69,0.12); color: #9a6c2f; }
.safe-title { background: rgba(122,143,107,0.14); color: #5f7a52; }
.food-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.food-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}
.food-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.food-item.danger { border-left: 3px solid #b15a44; }
.food-item.caution { border-left: 3px solid #bb8a45; }
.food-item.safe { border-left: 3px solid #7a8f6b; }
.food-emoji { font-size: 32px; flex-shrink: 0; }
.food-item strong { font-size: 15px; color: var(--text-primary); display: block; margin-bottom: 2px; }
.food-item p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.food-level { font-size: 20px; flex-shrink: 0; margin-left: auto; }

/* ===== Quiz ===== */
.quiz-hero { background: var(--bg-hero); }
.quiz-container { max-width: 640px; margin: 0 auto; }
.quiz-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  animation: pageFadeIn 0.4s ease;
}
.quiz-progress {
  display: flex; gap: 6px; margin-bottom: 24px;
}
.quiz-progress-dot {
  flex: 1; height: 6px;
  border-radius: 3px;
  background: var(--bar-bg);
  transition: background 0.3s;
}
.quiz-progress-dot.filled { background: var(--accent); }
.quiz-progress-dot.current { background: var(--accent); animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.quiz-step-number {
  font-size: 13px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
}
.quiz-question {
  font-family: var(--font-display);
  font-size: 23px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 24px; line-height: 1.4;
}
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  text-align: left;
  transition: all 0.25s;
  cursor: pointer;
}
.quiz-option:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  transform: translateX(4px);
}
.quiz-option .quiz-opt-emoji { font-size: 22px; }

/* Quiz Result */
.quiz-result {
  max-width: 640px; margin: 0 auto;
  animation: pageFadeIn 0.5s ease;
}
.quiz-result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px; text-align: center;
}
.quiz-result-header { margin-bottom: 20px; }
.quiz-result-emoji { font-size: 48px; display: block; margin-bottom: 8px; }
.quiz-result-label { font-size: 14px; color: var(--accent); font-weight: 700; }
.quiz-result-breeds { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.quiz-breed-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px;
  background: var(--chip-bg);
  border-radius: var(--radius-md);
  text-align: left;
}
.quiz-breed-rank {
  font-size: 24px; font-weight: 800;
  color: var(--accent); min-width: 36px; text-align: center;
}
.quiz-breed-name { font-size: 18px; font-weight: 700; }
.quiz-breed-sub { font-size: 13px; color: var(--text-muted); }
.quiz-breed-match {
  margin-left: auto; font-size: 14px; font-weight: 700;
  color: var(--accent); white-space: nowrap;
}
.quiz-restart {
  margin-top: 24px;
  padding: 12px 32px;
  border-radius: 24px;
  background: var(--accent);
  color: #fff;
  font-size: 15px; font-weight: 700;
  transition: background 0.3s, transform 0.2s;
}
.quiz-restart:hover { background: var(--accent-hover); transform: scale(1.05); }

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}


@media (max-width: 768px) {
  .header-inner { padding: 12px 16px; flex-wrap: wrap; }
  .logo { order: 1; }
  .header-actions { order: 2; }
  .logo-text { font-size: 20px; }
  .nav-inner { padding: 0 12px; }
  .nav-item { padding: 10px 12px; }
  .nav-text { font-size: 12px; }
  .trending-inner { padding: 0 16px; }
  .trending-title { font-size: 17px; }
  .trending-card { width: 140px; }
  .trending-card-image { height: 92px; }
  .hero {
    order: 3;
    flex: none;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 4px 0;
  }
  .search-box { padding: 12px 16px; }
  .filter-inner { padding: 12px 16px; }
  .main-content { padding: 20px 16px 40px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .modal { max-height: 95vh; }
  .modal-body { padding: 0 20px 24px; }
  .modal-hero { height: 220px; }
  .modal-name-ko { font-size: 22px; }
  .modal-info-grid { grid-template-columns: repeat(2, 1fr); }
  .content-page { padding: 0 16px 40px; }
  .content-hero { padding: 14px 16px 14px; margin-bottom: 16px; }
  .content-hero-title { font-size: 19px; }
  .content-hero-emoji { font-size: 21px; margin: 0 6px 0 0; }
  .info-card-grid { grid-template-columns: 1fr; }
  .checklist-grid { grid-template-columns: 1fr; }
  .about-card { flex-direction: column; text-align: center; }
  .about-stats { justify-content: center; }
  .food-grid { grid-template-columns: 1fr; }
  .quiz-step { padding: 24px 16px; }
  .celeb-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* .card-grid 1열 규칙은 아래 고정 열 수 규칙으로 대체됨 */
}

/* ===== Beautiful Image Loading Effects (Skeleton Shimmer & Fade-In) ===== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.card-image-placeholder,
.trending-card-placeholder,
.modal-hero-placeholder {
  background: linear-gradient(90deg, 
    var(--shimmer-base) 25%, 
    var(--shimmer-highlight) 50%, 
    var(--shimmer-base) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite linear !important;
}

/* Smooth fade-in transitions for loaded images */
.card-image,
.trending-image,
.modal-hero-image,
.modal-hero img {
  opacity: 0;
  transition: opacity 0.4s ease-in-out, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.card-image.loaded,
.trending-image.loaded,
.modal-hero-image.loaded,
.modal-hero img.loaded {
  opacity: 1;
}

/* Ensure hover scale still works smoothly alongside the fade-in */
.dog-card:hover .card-image.loaded {
  transform: scale(1.08) !important;
}
.trending-card:hover .trending-image.loaded {
  transform: scale(1.12) !important;
}


/* ==================== MY DOG (우리 강아지) PAGE STYLE ==================== */
#page-mydog {
  animation: pageFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mydog-hero {
  background: var(--bg-hero);
}

/* 1. Registration View */
.mydog-view {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  display: none;
}
.mydog-view.active {
  display: block;
  opacity: 1;
}

.mydog-reg-card {
  max-width: 600px;
  margin: 40px auto;
  padding: 40px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mydog-reg-icon {
  font-size: 52px;
  margin-bottom: 20px;
  display: inline-block;
  opacity: 0.9;
}

.mydog-reg-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  color: var(--text-primary);
}

/* Autocomplete search container */
.mydog-search-container {
  position: relative;
  max-width: 100%;
  margin: 0 auto 32px;
  z-index: 10;
}

.mydog-search-box {
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 30px;
  padding: 8px 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mydog-search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-light), inset 0 2px 4px rgba(0, 0, 0, 0.02);
  transform: translateY(-1px);
}

.mydog-search-icon {
  font-size: 18px;
  margin-right: 12px;
  color: var(--text-muted);
}

.mydog-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
  width: 100%;
}

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

.mydog-search-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  display: none;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.mydog-search-clear.show {
  display: block;
}

.mydog-search-clear:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

/* Dropdown suggestions list (Glassmorphism look) */
.mydog-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-top: 8px;
  box-shadow: var(--shadow-xl);
  max-height: 320px;
  overflow-y: auto;
  display: none;
  z-index: 100;
}

.mydog-auto-item {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  text-align: left;
}

[data-theme="dark"] .mydog-auto-item {
  border-bottom-color: rgba(255, 255, 255, 0.03);
}

.mydog-auto-item:last-child {
  border-bottom: none;
}

.mydog-auto-item:hover {
  background: var(--accent-light);
  padding-left: 24px;
}

.mydog-auto-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin-right: 14px;
  border: 1px solid var(--border);
  background: var(--bg-primary);
}

.mydog-auto-thumb-placeholder {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-right: 14px;
}

.mydog-auto-info {
  flex: 1;
}

.mydog-auto-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.mydog-auto-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.mydog-auto-no-results {
  padding: 18px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Quick Select Chips */
.mydog-quick-chips {
  border-top: 1px dashed var(--border);
  padding-top: 24px;
  text-align: left;
}

.mydog-quick-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.mydog-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mydog-chip {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mydog-chip:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 2. My Dog Dashboard View */
.mydog-dashboard-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 24px;
}

/* Left Profile card (Premium display) */
.mydog-column-left {
  position: sticky;
  top: 90px;
}

.mydog-profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.mydog-profile-card:hover {
  box-shadow: var(--shadow-xl);
}

.mydog-profile-image-container {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--bg-primary);
  position: relative;
}

.mydog-profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mydog-profile-card:hover .mydog-profile-image {
  transform: scale(1.04);
}

.mydog-profile-body {
  padding: 24px;
}

.mydog-profile-name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.mydog-profile-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  font-weight: 500;
}

.mydog-profile-temps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.mydog-temp-chip {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--tag-bg);
  color: var(--tag-text);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.mydog-profile-details {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mydog-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mydog-detail-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  background: var(--accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mydog-detail-info {
  display: flex;
  flex-direction: column;
}

.mydog-detail-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.mydog-detail-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.mydog-change-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mydog-change-btn:hover {
  background: rgba(177,90,68,0.06);
  border-color: rgba(177,90,68,0.35);
  color: #b15a44;
}

/* Right medical / details column */
.mydog-column-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.mydog-dashboard-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}

/* Subtle premium lift animations */
.mydog-dashboard-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.mydog-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.mydog-card-icon {
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mydog-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.mydog-card-intro {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Vet card: muted teal accent strip */
.mydog-vet-card {
  border-top: 3px solid var(--group-non-sporting);
  position: relative;
}

.mydog-vet-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mydog-vet-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.mydog-vet-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.mydog-vet-item.completed {
  border-color: rgba(122,143,107,0.4);
  background: rgba(122,143,107,0.08);
}

.mydog-vet-item.completed .mydog-vet-item-title {
  color: var(--text-muted);
  text-decoration: line-through;
}

.mydog-vet-item.completed .mydog-vet-item-desc {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Custom Checkbox Design */
.mydog-checkbox-container {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  margin-top: 3px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
}

.mydog-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0; width: 0;
}

.mydog-checkmark {
  position: absolute;
  top: 0; left: 0;
  height: 20px; width: 20px;
  background-color: var(--bar-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.mydog-checkbox-container:hover input ~ .mydog-checkmark {
  border-color: var(--accent);
}

.mydog-checkbox-container input:checked ~ .mydog-checkmark {
  background-color: #7a8f6b;
  border-color: #7a8f6b;
}

.mydog-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.mydog-checkbox-container input:checked ~ .mydog-checkmark:after {
  display: block;
}

.mydog-checkbox-container .mydog-checkmark:after {
  left: 6.5px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mydog-vet-text {
  flex: 1;
}

.mydog-vet-item-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.mydog-vet-item-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Quirks/Safety Card: clay accent strip */
.mydog-safety-card {
  border-top: 3px solid var(--accent);
}

.mydog-quirks-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mydog-quirk-card {
  padding: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.3s;
}

.mydog-quirk-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.mydog-quirk-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mydog-quirk-icon {
  font-size: 18px;
  color: var(--accent);
}

.mydog-quirk-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.mydog-quirk-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Traits Card: muted plum accent strip */
.mydog-traits-card {
  border-top: 3px solid var(--group-hound);
}

.mydog-traits-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mydog-trait-row {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: border-color 0.3s;
}

.mydog-trait-row:hover {
  border-color: var(--accent);
}

.mydog-trait-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mydog-trait-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.mydog-trait-label .ic { color: var(--accent); flex-shrink: 0; }

.mydog-trait-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.mydog-trait-bar-bg {
  width: 100%;
  height: 8px;
  background: var(--bar-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.mydog-trait-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.mydog-trait-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Animate utilities */
.animate-fade-in {
  animation: pageFadeIn 0.5s ease-out forwards;
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) {
  .mydog-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .mydog-column-left {
    position: relative;
    top: 0;
  }
}

@media (max-width: 768px) {
  .mydog-quirk-card {
    grid-column: span 2;
  }
  .mydog-reg-card {
    padding: 30px 20px;
    margin: 20px auto;
  }
  .mydog-dashboard-card {
    padding: 24px 20px;
  }
}

/* ===== 멍BTI Page ===== */
.mbti-hero {
  background: var(--bg-hero);
}

/* Steps */
.mbti-step { display: none; }
.mbti-step.active { display: block; animation: mbtiStepIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes mbtiStepIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mode Card */
.mbti-mode-card {
  max-width: 640px;
  margin: 0 auto 48px;
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border);
}
.mbti-mode-header {
  text-align: center;
  padding: 40px 32px 24px;
  background: var(--bg-hero);
  border-bottom: 1px solid var(--border);
}
.mbti-mode-emoji { font-size: 46px; display: block; margin-bottom: 12px; opacity: 0.9; }
.mbti-mode-header h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 8px; }
.mbti-mode-header p { color: var(--text-secondary); font-size: 14px; }

/* Breed Selection */
.mbti-breed-section {
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
}
.mbti-breed-section h4 { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.mbti-breed-search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color 0.2s;
  position: relative;
}
.mbti-breed-search-box:focus-within { border-color: var(--accent); }
.mbti-search-icon { font-size: 16px; }
.mbti-breed-input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 14px; color: var(--text-primary);
}
.mbti-breed-input::placeholder { color: var(--text-muted); }
.mbti-breed-clear {
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-muted); color: #fff; font-size: 11px;
  cursor: pointer; border: none;
}
.mbti-autocomplete {
  position: relative; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); margin-top: 6px; overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height 0.2s, opacity 0.2s;
  z-index: 20;
}
.mbti-autocomplete.open { max-height: 320px; opacity: 1; overflow-y: auto; }
.mbti-autocomplete-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; cursor: pointer; transition: background 0.15s;
}
.mbti-autocomplete-item:hover { background: var(--accent-light); }
.mbti-ac-ko { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mbti-ac-en { font-size: 12px; color: var(--text-muted); }
.mbti-selected-breed {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent-light); border: 1.5px solid var(--accent);
  border-radius: var(--radius-md); padding: 8px 14px;
  margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent);
  animation: mbtiStepIn 0.3s ease;
}
.mbti-selected-breed.hidden { display: none; }
.mbti-breed-deselect {
  margin-left: auto; background: none; border: none; color: var(--accent);
  cursor: pointer; font-size: 14px; padding: 0 4px;
}
.mbti-unknown-btn {
  margin-top: 10px; width: 100%;
  background: var(--bg-primary); border: 1.5px dashed var(--border);
  border-radius: var(--radius-md); padding: 10px 16px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s;
}
.mbti-unknown-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.mbti-unknown-btn.selected {
  border-color: var(--accent); color: var(--accent); background: var(--accent-light);
  border-style: solid; font-weight: 600;
}

/* Mode buttons */
.mbti-mode-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 24px 32px 32px;
}
.mbti-mode-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 28px 16px; border-radius: var(--radius-lg);
  border: 2px solid var(--border); background: var(--bg-primary);
  cursor: pointer; transition: all 0.25s; text-align: center;
  position: relative; overflow: hidden;
}
.mbti-mode-btn::after {
  content: ''; position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.25s;
}
.mbti-mode-speed::after { background: var(--accent-light); }
.mbti-mode-deep::after  { background: var(--accent-light); }
.mbti-mode-btn:hover::after { opacity: 1; }
.mbti-mode-btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.mbti-mode-btn-icon { font-size: 34px; position: relative; z-index: 1; }
.mbti-mode-btn-title { font-size: 16px; font-weight: 700; color: var(--text-primary); position: relative; z-index: 1; }
.mbti-mode-btn-desc  { font-size: 12px; color: var(--text-muted); position: relative; z-index: 1; }

/* Question Phase */
.mbti-q-header {
  display: flex; align-items: center; gap: 16px;
  max-width: 640px; margin: 0 auto 24px; padding: 0 16px;
}
.mbti-back-btn {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 8px 16px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.mbti-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.mbti-progress-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.mbti-progress-bar {
  width: 100%; height: 6px; background: var(--bar-bg);
  border-radius: 3px; overflow: hidden;
}
.mbti-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 3px; transition: width 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.mbti-progress-text { font-size: 12px; color: var(--text-muted); }
.mbti-question-card {
  max-width: 640px; margin: 0 auto;
  background: var(--bg-secondary); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); padding: 40px 36px;
  transition: opacity 0.25s, transform 0.25s;
}
.mbti-q-dimension {
  display: inline-block; padding: 4px 12px;
  background: var(--accent-light);
  border-radius: 20px; font-size: 12px; font-weight: 700;
  color: var(--accent); margin-bottom: 20px; letter-spacing: 0.05em;
}
.mbti-q-text {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; color: var(--text-primary);
  line-height: 1.5; letter-spacing: -0.01em; margin-bottom: 32px;
}
.mbti-answers { display: flex; flex-direction: column; gap: 12px; }
.mbti-answer-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: var(--radius-md);
  border: 2px solid var(--border); background: var(--bg-primary);
  cursor: pointer; transition: all 0.2s; font-size: 15px;
  color: var(--text-primary); text-align: left; font-weight: 500;
}
.mbti-answer-btn:hover {
  border-color: var(--accent); background: var(--accent-light);
  transform: translateX(4px);
}
.mbti-answer-btn.selected {
  border-color: var(--accent); background: var(--accent-light);
  color: var(--accent); font-weight: 700;
}
.mbti-ans-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  transition: all 0.2s; background: var(--bg-secondary);
}
.mbti-answer-btn.selected .mbti-ans-dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ===== Result Card – Premium Redesign ===== */

/* Confetti */
.mbti-confetti {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden; z-index: 10; border-radius: var(--radius-xl);
}
.mbti-confetti-piece {
  position: absolute; top: -20px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  0%   { top: -20px; opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Result Card Wrapper */
.mbti-result-card {
  max-width: 640px; margin: 0 auto;
  background: var(--bg-secondary); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
}

/* Hero */
.mbti-result-hero {
  padding: 32px 24px 28px; text-align: center;
  position: relative; overflow: hidden;
}
.mbti-result-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}

/* Type Ring Badge */
.mbti-result-type-ring {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--c, var(--accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, var(--accent)) 14%, transparent),
              var(--shadow-md);
  margin: 0 auto 20px;
  animation: ringPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes ringPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.mbti-result-type-text {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; color: #fff;
  letter-spacing: 0.06em;
}

/* Emoji */
.mbti-result-emoji-wrap {
  position: relative; z-index: 1; margin-bottom: 16px;
  animation: emojiFloat 3s ease-in-out infinite;
}
@keyframes emojiFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.mbti-result-emoji { font-size: 56px; line-height: 1; display: block; }

.mbti-result-name {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: 27px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 10px; letter-spacing: -0.01em;
}
.mbti-result-desc {
  position: relative; z-index: 1;
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.75; max-width: 420px; margin: 0 auto;
}

/* Rarity Pill */
.mbti-rarity-pill {
  display: flex; align-items: center; gap: 12px;
  margin: 0 28px; padding: 14px 20px;
  border-radius: var(--radius-lg); font-size: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mbti-rarity-pill.visible { opacity: 1; transform: none; }
.mbti-rarity-pill-icon { font-size: 22px; flex-shrink: 0; }
.mbti-rarity-pill-text { line-height: 1.5; }
.mbti-rarity-pill-text strong { font-weight: 800; }
.mbti-rarity-common { background: rgba(122,143,107,0.10); border: 1px solid rgba(122,143,107,0.45); color: #5f7a52; }
.mbti-rarity-rare   { background: rgba(187,138,69,0.12); border: 1px solid rgba(187,138,69,0.5); color: #9a6c2f; }
.mbti-rarity-unknown { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-muted); }
[data-theme="dark"] .mbti-rarity-common { background: rgba(152,172,136,0.14); color: #98ac88; border-color: rgba(152,172,136,0.5); }
[data-theme="dark"] .mbti-rarity-rare   { background: rgba(210,168,102,0.14); color: #d2a866; border-color: rgba(210,168,102,0.5); }

/* Sections */
.mbti-result-section {
  padding: 24px 28px;
  border-top: 1px solid var(--border);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.mbti-result-section.visible { opacity: 1; transform: none; }
.mbti-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted);
  margin-bottom: 18px;
}

/* Dimension Bars */
.mbti-dims-grid { display: flex; flex-direction: column; gap: 16px; }
.mbti-dim-row {
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.4s ease var(--dim-delay, 0ms), transform 0.4s ease var(--dim-delay, 0ms);
}
.mbti-dim-row.visible { opacity: 1; transform: none; }
.mbti-dim-labels {
  display: grid;
  grid-template-columns: 20px auto 36px 1fr 36px auto 20px;
  align-items: center; gap: 8px;
}
.mbti-dim-letter {
  font-size: 18px; font-weight: 900; color: var(--text-muted);
  text-align: center; transition: color 0.3s, transform 0.3s;
}
.mbti-dim-letter.dominant { transform: scale(1.2); }
.mbti-dim-name {
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; transition: color 0.3s, font-weight 0.3s;
}
.mbti-dim-name.dominant { color: var(--text-primary); font-weight: 700; }
.mbti-dim-pct {
  font-size: 13px; text-align: center;
  transition: color 0.3s;
}
.mbti-dim-bar-wrap {
  height: 8px; background: var(--bar-bg);
  border-radius: 4px; overflow: hidden;
}
.mbti-dim-bar-fill {
  height: 100%; border-radius: 4px; width: 50%;
}

/* Similar breeds grid with images — 6마리 = 3열 × 2행 */
.mbti-similar-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px;
}
.mbti-similar-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
}
.mbti-similar-img-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden; background: var(--bg-primary);
  border: 2px solid var(--border);
  transition: transform 0.2s, border-color 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.mbti-similar-item:hover .mbti-similar-img-wrap {
  transform: scale(1.08);
  border-color: var(--accent);
}
.mbti-similar-img { width: 100%; height: 100%; object-fit: cover; }
.mbti-similar-no-img { font-size: 28px; }
.mbti-similar-name {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.3;
}

/* Result Actions */
.mbti-result-actions {
  max-width: 640px; margin: 16px auto 52px;
  display: flex; gap: 12px; padding: 0 16px;
}
.mbti-retry-btn {
  flex: 1; padding: 15px 24px; border-radius: var(--radius-md);
  background: var(--bg-secondary); border: 1.5px solid var(--border);
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  cursor: pointer; transition: all 0.2s;
}
.mbti-retry-btn:hover {
  border-color: var(--accent); color: var(--accent);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.mbti-share-btn {
  flex: 1; padding: 15px 24px; border-radius: var(--radius-md);
  background: var(--accent);
  border: none; font-size: 15px; font-weight: 700; color: #fff;
  cursor: pointer; transition: all 0.25s;
  box-shadow: var(--shadow-sm);
}
.mbti-share-btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Responsive */
@media (max-width: 600px) {
  .mbti-mode-buttons { grid-template-columns: 1fr; }
  .mbti-mode-card { margin: 0 12px 48px; }
  .mbti-question-card { padding: 28px 20px; margin: 0 12px; }
  .mbti-q-text { font-size: 16px; }
  .mbti-result-hero { padding: 24px 16px 20px; }
  .mbti-result-section { padding: 20px 20px; }
  .mbti-result-actions { flex-direction: column; }
  .mbti-breed-section { padding: 20px 20px; }
  .mbti-mode-header { padding: 32px 20px 20px; }
  .mbti-rarity-pill { margin: 0 16px; }
  .mbti-similar-grid { grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
  .mbti-similar-img-wrap { width: 52px; height: 52px; }
  .mbti-dim-labels { grid-template-columns: 18px auto 30px 1fr 30px auto 18px; gap: 5px; }
  .mbti-dim-name { font-size: 10px; }
  .mbti-result-type-ring { width: 96px; height: 96px; }
  .mbti-result-type-text { font-size: 22px; }
}



/* 특수동물 합법성 면책 */
.special-disclaimer {
  max-width: 720px; margin: 10px auto 0; padding: 0 24px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted); text-align: center;
}

/* 품종 공유 버튼 (모달 배지 행) */
.modal-share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.22); color: #fff;
  border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-share-btn:hover { background: rgba(255,255,255,0.34); }
.modal-share-btn .ic { width: 13px; height: 13px; }

/* 즐겨찾기 */
.card-fav-btn {
  position: absolute; bottom: 10px; right: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.15s;
}
.card-fav-btn:hover { transform: scale(1.1); }
.card-fav-btn .ic { width: 17px; height: 17px; }
.card-fav-btn.active { background: var(--accent); }
.card-fav-btn.active .ic { fill: #fff; }
.fav-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 17px;
  background: var(--chip-bg); color: var(--text-secondary);
  font-size: 13px; font-weight: 700; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fav-filter-btn:hover { color: var(--accent); background: var(--accent-light); }
.fav-filter-btn.active { background: var(--accent); color: #fff; }
.fav-filter-btn.active .ic { fill: #fff; }

/* ===== 품종 비교 ===== */
.compare-bar {
  position: fixed; left: 50%; bottom: -80px; transform: translateX(-50%);
  z-index: 900; transition: bottom 0.3s ease;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-lg);
  padding: 8px 12px; max-width: calc(100% - 32px);
}
.compare-bar.visible { bottom: 18px; }
.compare-bar-inner { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
.compare-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--chip-bg); border-radius: 12px; padding: 4px 6px 4px 12px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}
.compare-chip-x {
  width: 18px; height: 18px; border-radius: 50%; line-height: 1;
  background: rgba(31,30,28,0.12); color: var(--text-secondary);
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.compare-chip-x:hover { background: var(--accent); color: #fff; }
.compare-go {
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13.5px;
  font-family: inherit; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
}
.compare-go:disabled { opacity: 0.45; cursor: not-allowed; }
.compare-clear { font-size: 12.5px; color: var(--text-muted); font-family: inherit; white-space: nowrap; }
.compare-clear:hover { color: var(--accent); }

.compare-overlay {
  position: fixed; inset: 0; z-index: 1100; display: none;
  background: var(--modal-overlay); padding: 24px;
  align-items: center; justify-content: center;
}
.compare-overlay.active { display: flex; }
.compare-panel {
  background: var(--bg-modal); border-radius: var(--radius-xl);
  max-width: 980px; width: 100%; max-height: 88vh; overflow-y: auto;
  padding: 22px 22px 28px; box-shadow: var(--shadow-xl);
}
.compare-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.compare-panel-head h2 { font-family: var(--font-display); font-size: 24px; }
.compare-close { font-size: 26px; color: var(--text-muted); width: 36px; height: 36px; border-radius: 50%; }
.compare-close:hover { background: var(--chip-bg); color: var(--text-primary); }
.compare-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 14px; }
.compare-col { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.compare-photo { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; margin-bottom: 10px; background: var(--chip-bg); }
.compare-photo img { width: 100%; height: 100%; object-fit: cover; }
.compare-name { font-weight: 700; font-size: 17px; }
.compare-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; }
.compare-badges { margin-bottom: 10px; }
.compare-stats { font-size: 13px; margin-bottom: 12px; }
.compare-stats > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.compare-stats dt { color: var(--text-muted); flex-shrink: 0; }
.compare-stats dd { text-align: right; color: var(--text-secondary); }
.compare-metric { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 12px; color: var(--text-secondary); }
.compare-metric > span:first-child { width: 62px; flex-shrink: 0; }
.compare-metric-bar { flex: 1; height: 7px; background: var(--bar-bg); border-radius: 4px; overflow: hidden; }
.compare-metric-bar i { display: block; height: 100%; background: var(--bar-fill); border-radius: 4px; }
.compare-metric b { width: 26px; text-align: right; font-size: 11px; }
.compare-temper { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.modal-compare-btn.in-compare { background: var(--accent); }
@media (max-width: 640px) {
  .compare-grid { grid-template-columns: 1fr; }
}

/* 질환 가이드 — 데이터 없는 동물 안내 */
.disease-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.disease-empty .ic { width: 34px; height: 34px; color: var(--accent); margin-bottom: 12px; }
.disease-empty p { font-size: 15px; line-height: 1.7; }

/* 유명인 페이지 — 동물별 세트 토글 */
.celeb-set { display: none; }
body[data-animal="dog"] #celebDog { display: block; }
body[data-animal="cat"] #celebCat { display: block; }
body[data-animal="special"] #celebSpecial { display: block; }
.celeb-card.clickable { cursor: pointer; }
.celeb-empty { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.celeb-empty .content-hero-emoji { font-size: 40px; display: block; margin-bottom: 14px; }
.celeb-empty p { font-size: 15px; line-height: 1.7; }

/* mydog — 특수동물 준비중 안내 */
.mydog-chip-note { font-size: 14px; color: var(--text-muted); line-height: 1.7; text-align: center; padding: 20px 8px; }

/* 견종 고도화 설명 */
.modal-detail-summary {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--accent); line-height: 1.5; margin-bottom: 12px;
  padding-left: 12px; border-left: 3px solid var(--accent);
}
.modal-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-fit-card { border-radius: var(--radius-md); padding: 14px 16px; border: 1px solid var(--border); }
.fit-good { background: rgba(122,143,107,0.08); }
.fit-watch { background: rgba(227,63,41,0.06); }
.modal-fit-title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.fit-good .modal-fit-title { color: #5f7a4f; }
.fit-good .modal-fit-title .ic { color: #5f7a4f; }
.fit-watch .modal-fit-title { color: var(--accent); }
.modal-fit-card ul { list-style: none; padding: 0; margin: 0; }
.modal-fit-card li { position: relative; padding-left: 14px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 4px 0; }
.modal-fit-card li::before { content: '·'; position: absolute; left: 3px; color: var(--text-muted); font-weight: 700; }
@media (max-width: 560px) { .modal-fit-grid { grid-template-columns: 1fr; } }

/* ==================== 아이콘 시스템 (이모지 → SVG 라인 아이콘) ==================== */
/* 컨테이너별 사이즈·컬러 — 큰 아이콘일수록 얇은 스트로크로 우아하게 */
.content-hero-emoji .ic { width: 24px; height: 24px; color: var(--accent); stroke-width: 1.8; }
.info-card-icon .ic { width: 32px; height: 32px; color: var(--accent); stroke-width: 1.6; }
.check-emoji .ic { width: 20px; height: 20px; color: var(--accent); }
.vet-tip-icon .ic { width: 26px; height: 26px; color: var(--accent); stroke-width: 1.7; }
.checklist-title .ic { width: 17px; height: 17px; vertical-align: -2px; color: var(--accent); }
.food-section-title .ic { width: 16px; height: 16px; vertical-align: -2px; }
.food-emoji .ic { width: 28px; height: 28px; stroke-width: 1.6; color: var(--text-secondary); }
.food-item.danger .food-emoji .ic { color: #b15a44; }
.food-item.caution .food-emoji .ic { color: #bb8a45; }
.food-item.safe .food-emoji .ic { color: #7a8f6b; }
.food-level .ic { width: 18px; height: 18px; }
.food-level.level-danger { color: #b15a44; }
.food-level.level-caution { color: #bb8a45; }
.food-level.level-safe { color: #7a8f6b; }
.celeb-avatar .ic { width: 22px; height: 22px; color: var(--accent); }
.mydog-reg-icon .ic { width: 46px; height: 46px; color: var(--accent); stroke-width: 1.4; }
.coming-soon-emoji .ic { width: 60px; height: 60px; color: var(--accent); stroke-width: 1.3; opacity: 0.85; }
.no-results-emoji .ic { width: 52px; height: 52px; color: var(--text-muted); stroke-width: 1.4; }
.mbti-mode-emoji .ic { width: 40px; height: 40px; color: var(--accent); stroke-width: 1.5; }
.mbti-result-emoji .ic { width: 44px; height: 44px; color: var(--profile-color, var(--accent)); stroke-width: 1.5; }
.mbti-mode-btn-icon .ic { width: 30px; height: 30px; color: var(--accent); stroke-width: 1.6; }
.mbti-rarity-pill-icon .ic { width: 15px; height: 15px; vertical-align: -2px; }
.shop-card-emoji .ic { width: 48px; height: 48px; color: var(--accent); stroke-width: 1.4; opacity: 0.9; }
.quiz-result-emoji .ic { width: 40px; height: 40px; color: var(--accent); stroke-width: 1.5; }
.mydog-quirk-icon .ic { width: 17px; height: 17px; }
.mydog-detail-icon .ic { width: 19px; height: 19px; color: var(--accent); }
.mydog-auto-thumb-placeholder .ic { width: 20px; height: 20px; color: var(--text-muted); }
.mydog-search-icon .ic, .mbti-search-icon .ic { width: 16px; height: 16px; color: var(--text-muted); }
.card-image-placeholder .ic { width: 44px; height: 44px; color: var(--text-muted); stroke-width: 1.3; opacity: 0.55; }
.modal-hero-placeholder .ic { width: 56px; height: 56px; color: var(--text-muted); stroke-width: 1.3; opacity: 0.6; }
.mbti-similar-no-img .ic { width: 26px; height: 26px; color: var(--text-muted); }
.coming-soon-btn .ic { vertical-align: -2px; }
.mbti-retry-btn .ic, .mbti-share-btn .ic { vertical-align: -2px; margin-right: 6px; }

/* 질환 가이드 응급도 도트 (🟢🟡🔴 대체) */
.urg-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: 1px; margin-right: 2px;
}
.urg-routine { background: #7a8f6b; }
.urg-soon { background: #bb8a45; }
.urg-emergency { background: #b15a44; }

/* ==================== 멍BTI 유형 도감 ==================== */
.mbti-view-toggle {
  position: relative;
  display: flex; justify-content: center; gap: 0;
  max-width: 320px; margin: 0 auto 28px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px;
}
.mbti-view-thumb {
  position: absolute;
  top: 4px; left: 4px; bottom: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(227,63,41,0.35);
  transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1);
  z-index: 1;
}
.mbti-view-toggle[data-active="test"]  .mbti-view-thumb { transform: translateX(0); }
.mbti-view-toggle[data-active="types"] .mbti-view-thumb { transform: translateX(100%); }
.mbti-view-btn {
  position: relative; z-index: 2;
  flex: 1; padding: 9px 18px; border: none; background: transparent;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer;
  transition: color 0.25s;
  font-family: inherit;
}
.mbti-view-btn.active { color: #fff; }
.mbti-view-btn:not(.active):hover { color: var(--text-primary); }
/* 뷰 전환 표시/숨김 */
.mbti-types.hidden, #mbti-view-test.hidden, .mbti-type-detail.hidden { display: none; }

.mbti-types { max-width: 880px; margin: 0 auto 60px; }
.mbti-group { margin-bottom: 36px; }
.mbti-group-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.mbti-group-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--group-color); flex-shrink: 0;
}
.mbti-group-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--text-primary); margin: 0;
}
.mbti-group-desc { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.mbti-type-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.mbti-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 12px 18px; text-align: center;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.mbti-type-card:hover {
  transform: translateY(-3px);
  border-color: var(--group-color);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.mbti-type-art {
  width: 72px; height: 72px; border-radius: 50%;
  background: color-mix(in srgb, var(--group-color) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 6px;
}
.mbti-type-art img { width: 100%; height: 100%; object-fit: cover; }
.mbti-type-art-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mbti-type-art-fallback .ic { width: 30px; height: 30px; color: var(--group-color); stroke-width: 1.6; }
.mbti-type-code {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--group-color);
}
.mbti-type-name { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.mbti-type-one { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* 유형 상세 */
.mbti-type-detail { max-width: 680px; margin: 0 auto; }
.mbti-type-back {
  background: none; border: none; color: var(--text-secondary);
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 0;
  margin-bottom: 14px; font-family: inherit;
}
.mbti-type-back:hover { color: var(--accent); }
.mbti-type-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 26px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--group-color) 8%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--group-color) 25%, var(--border));
  margin-bottom: 20px;
}
.mbti-type-art-lg { width: 96px; height: 96px; flex-shrink: 0; margin-bottom: 0; }
.mbti-type-art-lg .ic { width: 42px; height: 42px; }
.mbti-type-group-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--group-color) 18%, transparent);
  color: var(--group-color); margin-bottom: 8px;
}
.mbti-type-detail-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 6px;
}
.mbti-type-detail-one { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.6; }
.mbti-type-long {
  font-size: 15px; color: var(--text-secondary); line-height: 1.8;
  margin: 0 0 18px;
}
.mbti-type-traits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.mbti-type-trait {
  font-size: 13px; font-weight: 600; padding: 6px 14px;
  border-radius: 999px; background: var(--accent-light); color: var(--accent);
}
.mbti-type-detail .mbti-result-section-breeds { margin-bottom: 26px; }
.mbti-type-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border: none; border-radius: var(--radius-md);
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background 0.2s; font-family: inherit;
}
.mbti-type-cta:hover { background: var(--accent-hover); }
.mbti-type-cta .ic { color: #fff; }

@media (max-width: 720px) {
  .mbti-type-cards { grid-template-columns: repeat(2, 1fr); }
  .mbti-type-hero { flex-direction: column; text-align: center; gap: 14px; }
}

/* ==================== 미지원 동물 안내 ==================== */
.feature-hidden { display: none !important; }
.feature-pending {
  max-width: 520px; margin: 8px auto 60px; text-align: center;
  padding: 48px 32px;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  animation: fadeUp 0.4s ease both;
}
.feature-pending-icon {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent-light);
}
.feature-pending-icon .ic { width: 34px; height: 34px; color: var(--accent); stroke-width: 1.5; }
.feature-pending-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 10px;
}
.feature-pending-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 24px; }
.feature-pending-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.feature-pending-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 22px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-primary); color: var(--text-primary);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.feature-pending-btn:hover { border-color: var(--accent); color: var(--accent); }
.feature-pending-btn:active { transform: scale(0.96); }

.animal-notice {
  display: flex; align-items: center; gap: 9px;
  max-width: 860px; margin: 0 auto 22px;
  padding: 11px 18px; border-radius: var(--radius-md);
  background: var(--accent-light);
  color: var(--text-secondary); font-size: 14px; line-height: 1.6;
  animation: fadeUp 0.35s ease both;
}
.animal-notice .ic { color: var(--accent); flex-shrink: 0; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==================== PC 타이포 스케일업 (데스크톱 가독성) ==================== */
@media (min-width: 900px) {
  /* 카드 그리드 */
  .card-name { font-size: 18px; }
  .card-name-en { font-size: 13px; }
  .card-meta { font-size: 13.5px; }
  /* 히어로·페이지 타이틀 */
  .content-hero-title { font-size: 34px; }
  .content-hero-sub { font-size: 16.5px; }
  /* 네비 */
  .nav-text { font-size: 15px; }
  .nav-dropdown-title { font-size: 15px; }
  .nav-dropdown-desc { font-size: 13px; }
  /* 본문류 */
  .food-item strong { font-size: 16px; }
  .food-item p { font-size: 14px; }
  .check-item strong { font-size: 15px; }
  .check-item p { font-size: 14px; }
  .info-card-list li { font-size: 14.5px; }
  .info-card-title { font-size: 19px; }
  .vet-tip-content p { font-size: 15px; }
  /* 모달 */
  .modal-name { font-size: 30px; }
  .modal-desc, .modal-section p { font-size: 15.5px; }
  /* 멍BTI */
  .mbti-type-one { font-size: 13px; }
  .mbti-type-name { font-size: 16px; }
  .mbti-answer-btn { font-size: 16px; padding: 18px 22px; }
  .mbti-q-text, #mbtiQText { font-size: 21px; }
  /* 필터/셀렉트 */
  .filter-label { font-size: 14px; }
  .filter-select { font-size: 14.5px; }
  /* 유명인 */
  .celeb-story { font-size: 14.5px; }
  .celeb-name { font-size: 17px; }
  /* 질환 */
  .disorder-name { font-size: 17px; }
  .urgency-badge { font-size: 13px; }
  /* 상점 */
  .shop-card-name { font-size: 17px; }
  .shop-card-desc { font-size: 14px; }
  /* 퀴즈 */
  .quiz-question { font-size: 21px; }
  .quiz-option { font-size: 15.5px; }
}

/* ==================== 마이크로 인터랙션 확대 ==================== */
/* 버튼 프레스 */
.page-btn:active, .animal-toggle-option:active, .mbti-view-btn:active,
.care-toggle-btn:active, .quiz-option:active, .mbti-answer-btn:active,
.mbti-type-card:active, .shop-tab:active, .nav-item:active { transform: scale(0.96); }
.page-btn, .care-toggle-btn, .quiz-option, .shop-tab { transition: transform 0.15s ease, background 0.2s, color 0.2s, border-color 0.2s; }
/* 찜 하트 팝 */
.card-fav-btn .ic { transition: transform 0.25s cubic-bezier(0.34, 1.8, 0.5, 1); }
.card-fav-btn:active .ic { transform: scale(1.35); }
.card-fav-btn.active .ic { animation: heartPop 0.4s cubic-bezier(0.34, 1.8, 0.5, 1); }
@keyframes heartPop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
/* 카드 프레스 */
.dog-card:active { transform: translateY(0) scale(0.985); }
/* 히어로 아이콘 입장 */
.page-section.active .content-hero-emoji { animation: heroIconIn 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) both; }
@keyframes heroIconIn {
  from { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* ==================== 서브페이지 그룹 탭 (수의학 가이드/놀이터) ==================== */
.page-group-tabs { max-width: 460px; margin: 0 auto 26px; }
.page-group-tabs .mbti-view-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; }
.page-group-tabs .mbti-view-btn .ic { width: 15px; height: 15px; }
.group-tab-thumb { transition: transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1), width 0s; }
@media (max-width: 640px) {
  .page-group-tabs { max-width: 100%; }
  .page-group-tabs .mbti-view-btn { font-size: 13px; padding: 8px 6px; gap: 4px; }
}

/* ==================== 쇼핑: 제휴 고지 · 입점 준비 중 상품 ==================== */
.shop-disclosure {
  max-width: 860px; margin: -6px auto 22px; padding: 10px 16px;
  border-radius: var(--radius-md); background: var(--bg-secondary);
  color: var(--text-muted); font-size: 13px; line-height: 1.65; text-align: center;
}
/* 제휴 링크가 아직 없는 상품 — 클릭 불가임을 시각적으로 알린다 */
.shop-card.is-pending { cursor: default; opacity: 0.62; }
.shop-card.is-pending:hover { transform: none; box-shadow: none; }
.shop-card.is-pending:hover .shop-card-emoji { transform: none; }
.shop-card-cta.is-pending { color: var(--text-muted); font-weight: 600; }

/* ==================== 레이아웃·이미지 비율 보정 ==================== */
/* [1] 추천 캐러셀 hover 시 카드가 위로 뜨는데(translateY -4px) 트랙이 overflow-x:auto라
       위쪽이 잘려 보였다. 트랙에 여유 공간을 주고 그만큼 밖으로 상쇄한다. */
.trending-track {
  padding-top: 8px;
  margin-top: -8px;
  overflow-y: visible;   /* 세로는 자르지 않는다 */
}

/* [2] 모든 품종 사진을 정사각형으로 통일 (object-fit:cover라 양옆이 잘림) */
.card-image-wrap { height: auto; aspect-ratio: 1 / 1; }
.trending-card-image { height: auto; aspect-ratio: 1 / 1; }
.modal-hero { height: auto; aspect-ratio: 1 / 1; max-height: 460px; }
.compare-photo { aspect-ratio: 1 / 1; }

/* [3][4] 카드 그리드를 고정 열 수로 — 페이지당 24장이 나눠떨어져 마지막 행이 비지 않는다
       (auto-fill은 폭에 따라 5열이 되면서 24÷5로 1칸이 남았다) */
/* 페이지당 20장이 5·4·2 모두로 나눠떨어져 어느 폭에서도 마지막 행이 비지 않는다
   (3열은 20을 나누지 못해 의도적으로 제외) */
.card-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1240px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==================== 상세를 '페이지 안'으로 (팝업 → 인라인 전환) ==================== */
/* 카드를 누르면 오버레이가 위에 뜨는 대신, 목록이 상세로 바뀌는 화면 전환처럼 보이게 한다. */
body.detail-open .modal-overlay {
  position: static;                /* 화면 위에 띄우지 않고 문서 흐름에 배치 */
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  display: block;
  opacity: 1;
  visibility: visible;
}
body.detail-open .modal {
  max-width: 940px;
  margin: 0 auto 40px;
  max-height: none;                /* 자체 스크롤 대신 페이지 스크롤을 쓴다 */
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  animation: none;
}
/* 상세를 보는 동안 목록·필터·추천은 감춘다 */
body.detail-open #page-encyclopedia > *:not(.modal-overlay) { display: none; }
body.detail-open .ad-slot { display: none; }

/* 화면 위 팝업이 아니므로 닫기 X 대신 '목록으로'가 주 동선 */
.modal-back {
  display: none;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--accent); padding: 6px 2px; margin-bottom: 6px;
}
.modal-back:hover { opacity: 0.75; }
body.detail-open .modal-back { display: inline-block; }
body.detail-open .modal-close { display: none; }

@media (max-width: 860px) {
  body.detail-open .modal { margin-bottom: 24px; }
}

/* 페이지 뷰에서는 사진 위가 아니라 밝은 배경 위에 놓이므로 대비를 다시 잡는다 */
body.detail-open .modal-hero {
  margin: 0 auto;                    /* 940px 폭 안에서 가운데 */
  border-radius: var(--radius-xl);
}
body.detail-open .modal-share-btn {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.detail-open .modal-share-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
body.detail-open .modal-share-btn.in-compare {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* 모달일 땐 제목을 사진 위로 -40px 끌어올려 겹쳤지만,
   페이지 뷰에선 사진이 가운데 정렬이라 제목만 밖으로 떨어져 어색해진다 */
body.detail-open .modal-title-section { margin-top: 20px; }
body.detail-open .modal-body { padding: 0 0 32px; }

/* 카드 정보(키·몸무게·수명)를 가로로 늘어놓으니 문제가 겹쳤다.
   flex+nowrap일 땐 좁은 화면에서 카드 밖으로 삐져나갔고,
   wrap으로 바꾸니 수치가 긴 품종만 2줄이 되어 카드 높이가 제각각이 됐다.
   가로 3열은 실측상 어떤 폭에서도 불가능했다 — 가장 넓은 카드(가용 226px)에서도
   "3.5–6.5kg" 같은 항목이 77.6px씩이라 3열엔 253px가 필요하고,
   실제로 푸들의 "24–60cm"가 옆 칸을 7px 침범했다.
   세로로 쌓으면 넘칠 여지가 없고 폭과 무관하게 항상 3줄로 일정하다. */
.card-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.card-meta-item { min-width: 0; white-space: nowrap; }

/* 품종명 줄 수도 카드마다 달라져(예: "Golden Retriever" 2줄 vs "Shiba Inu" 1줄)
   같은 행의 다른 카드를 밀어냈다.
   모든 카드에 최대 줄 수만큼 자리를 미리 잡아두는 방법은 낭비가 컸다 —
   좁은 화면 영어 모드에선 4줄까지 필요한데 정작 절반 가까이가 1줄짜리다.
   대신 카드를 세로 flex로 만들어, 이름이 몇 줄이든
   정보(키·몸무게·수명)와 성격 막대가 항상 카드 바닥에 붙게 한다.
   같은 행의 카드는 그리드가 높이를 맞춰주므로 내부 요소까지 줄이 맞는다. */
.dog-card { display: flex; flex-direction: column; }
.dog-card .card-image-wrap { flex-shrink: 0; }
.card-body { display: flex; flex-direction: column; flex: 1; }
/* margin-top:auto가 원래의 12px를 덮으므로 최소 간격은 padding으로 남긴다 */
.card-meta { margin-top: auto; padding-top: 12px; }

/* 이름이 비정상적으로 길 때의 안전장치 — 3줄까지만 보이고 말줄임 */
.card-name-ko {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: keep-all;
}
.card-name-en {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* 사진 위 두 배지는 좌·우 절대배치라 서로를 모른다.
   영어 모드의 "Non-Sporting"처럼 그룹명이 길면 반대편 배지를 파고들었다
   (375px에서 "Medium"과 18px 겹침). 각자 절반까지만 쓰게 하고 넘치면 말줄임. */
.card-group-badge, .card-size-badge {
  max-width: calc(50% - 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .card-group-badge, .card-size-badge { font-size: 10.5px; padding: 3px 8px; }
}

/* ===== 필터 바 재정비 =====
   기존엔 라벨("그룹")이 알약 밖에 대문자로 떠 있고 셀렉트는 제각각 폭이라
   네 요소가 서로 다른 물건처럼 보였다. 라벨과 값을 한 알약 안에 묶어
   "그룹 · 전체 ˅"가 하나의 컨트롤로 읽히게 하고, 넷의 높이를 42px로 맞춘다. */
.filter-inner {
  display: block;
  padding: 14px 24px;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 6px 0 14px;
  border: 1px solid var(--border);
  border-radius: 21px;
  background: var(--chip-bg);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  min-width: 0;
}
.filter-group:hover { border-color: var(--text-muted); }
.filter-group:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.filter-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  text-transform: none;      /* 대문자 변형은 한글에선 의미가 없고 영문만 튀어 보였다 */
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
/* 셀렉트는 알약 안에 얹히므로 자체 테두리·배경을 지운다.
   네이티브 화살표를 끄고 직접 그려야 브라우저마다 다른 모양이 통일된다. */
.sort-select {
  height: 100%;
  padding: 0 30px 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px; font-weight: 700;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  min-width: 0;
}
.sort-select:focus { border-color: transparent; }
/* 기본값이 아닌 필터는 지금 걸려 있다는 걸 색으로 알린다 */
.filter-group.is-active {
  border-color: var(--accent);
  background: var(--accent-light);
}
.filter-group.is-active .filter-label { color: var(--accent); }
.filter-group.is-active .sort-select { color: var(--accent); }

.fav-filter-btn { height: 42px; border-radius: 21px; }

/* 결과 줄: 개수를 앞세우고 그룹 설명을 잇는다.
   기존의 빨간 점(●) 불릿은 목록 표시로 오해되기 쉬워 걷어냈다. */
.filter-result-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.filter-result-count {
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.filter-result-count:empty { display: none; }
.group-desc-display {
  flex-basis: auto; width: auto;
  margin: 0;
  color: var(--text-secondary);
}
.group-desc-display:empty { display: none; }
.group-desc-display::before { content: none; }

@media (max-width: 860px) {
  /* 모바일에선 알약 넷이 세로로 쌓이면 화면을 다 잡아먹는다.
     2열 격자로 두 줄에 담고, 터치 목표는 44px로 키운다. */
  .filter-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .filter-group, .fav-filter-btn {
    height: 44px;
    width: 100%;
    justify-content: space-between;
  }
  .fav-filter-btn { justify-content: center; }
  .sort-select { flex: 1; text-align: right; padding-right: 26px; }
  .sort-select { background-position: right 10px center, right 5px center; }
}
@media (max-width: 380px) {
  .filter-group { padding-left: 10px; gap: 4px; }
  .filter-label { font-size: 11.5px; }
  .sort-select { font-size: 13px; }
}