/* Dragon Archive theme — visual overrides only */
:root {
  --archive-bg: #111714;
  --archive-bg-soft: #18211d;
  --archive-surface: #1d2923;
  --archive-surface-2: #24332b;
  --archive-line: #4d5e50;
  --archive-gold: #d3ad62;
  --archive-gold-bright: #f0d694;
  --archive-bronze: #98713d;
  --archive-ivory: #f2ead7;
  --archive-muted: #b7b09f;
  --archive-green: #6f9b86;
  --archive-ink: #201d17;
  --archive-paper: #f4efe3;
  --archive-paper-2: #ebe2cf;
  --archive-shadow: 0 18px 48px rgba(0,0,0,.30);
}

body {
  background:
    linear-gradient(rgba(17,23,20,.96), rgba(17,23,20,.98)),
    repeating-linear-gradient(135deg, rgba(211,173,98,.025) 0 1px, transparent 1px 12px);
  color: var(--archive-ivory);
  font-family: Georgia, "Noto Serif KR", "Malgun Gothic", serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(111,155,134,.15), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(211,173,98,.10), transparent 30%);
  z-index: -1;
}

.site-header {
  background: rgba(15,21,18,.96);
  border-bottom: 1px solid rgba(211,173,98,.38);
  box-shadow: 0 8px 26px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
}

.header-inner { min-height: 82px; height: auto; padding: 10px 0; }

.brand { gap: 14px; font-family: Georgia, "Noto Serif KR", serif; }
.archive-crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 56px;
  color: #1c1a15;
  background: linear-gradient(145deg, var(--archive-gold-bright), var(--archive-bronze));
  clip-path: polygon(50% 0, 92% 19%, 84% 77%, 50% 100%, 16% 77%, 8% 19%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.38));
}
.archive-crest::before {
  content: "";
  position: absolute;
  inset: 5px;
  clip-path: inherit;
  border: 1px solid rgba(32,29,23,.55);
}
.archive-crest span { font-weight: 900; font-size: 14px; letter-spacing: -.05em; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { color: var(--archive-gold-bright); font-size: 17px; letter-spacing: .12em; }
.brand-copy small { margin-top: 6px; color: var(--archive-muted); font: 600 11px/1.2 Pretendard, sans-serif; letter-spacing: .03em; }

.main-nav { gap: 7px; color: var(--archive-muted); font-family: Pretendard, sans-serif; }
.main-nav a {
  position: relative;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: .18s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 1px;
  background: var(--archive-gold);
  transform: scaleX(0);
  transition: .18s ease;
}
.main-nav a:hover { color: var(--archive-gold-bright); border-color: rgba(211,173,98,.25); background: rgba(211,173,98,.05); }
.main-nav a:hover::after { transform: scaleX(1); }

.hero { border-bottom: 1px solid rgba(211,173,98,.18); }
.eyebrow, .dragon-code { color: var(--archive-gold); }
.hero h1, .page-heading h1, .detail-summary h1 { color: var(--archive-ivory); font-weight: 700; letter-spacing: -.025em; text-shadow: 0 2px 18px rgba(0,0,0,.38); }
.hero p:last-child, .detail-intro, .breadcrumb, .result-head span { color: var(--archive-muted); }

.filter-panel, .panel, .detail-hero, .dragon-card, .ranking-table-wrap, .ranking-tabs a {
  border-color: rgba(211,173,98,.28);
  box-shadow: var(--archive-shadow);
}
.filter-panel, .panel {
  background: linear-gradient(180deg, rgba(31,43,37,.96), rgba(24,33,29,.96));
  border-radius: 8px;
}
.detail-hero {
  background: linear-gradient(145deg, rgba(35,49,41,.98), rgba(18,25,22,.98));
  border-radius: 10px;
}
.detail-image-wrap, .card-image {
  background:
    radial-gradient(circle at center, rgba(111,155,134,.24), transparent 56%),
    linear-gradient(145deg, #26362d, #151d19);
  border-radius: 4px;
}
.dragon-card {
  position: relative;
  background: linear-gradient(180deg, rgba(31,43,37,.98), rgba(21,29,25,.98));
  border-radius: 6px;
}
.dragon-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(211,173,98,.12);
  pointer-events: none;
  z-index: 2;
}
.dragon-card:hover { border-color: var(--archive-gold); transform: translateY(-4px); }

.tier-badge, .count-badge, .recipe-rank {
  border-radius: 2px;
  background: linear-gradient(135deg, var(--archive-gold-bright), var(--archive-bronze));
  color: var(--archive-ink);
  border: 0;
}
.rarity-badge, .element-badge { border-radius: 3px; }
.mini-stats div, .stat-row, .info-list div { background: rgba(10,15,12,.54); border: 1px solid rgba(211,173,98,.10); border-radius: 4px; }

.search-box input, select, .text-input, .select-input {
  border-radius: 4px;
}
.search-box input, select {
  background: #101713;
  border-color: rgba(211,173,98,.32);
  color: var(--archive-ivory);
}
.search-box input:focus, select:focus {
  border-color: var(--archive-gold);
  box-shadow: 0 0 0 3px rgba(211,173,98,.13);
}
.button {
  border-radius: 3px;
  border-color: rgba(211,173,98,.4);
  background: linear-gradient(180deg, #2a392f, #1c2821);
  color: var(--archive-ivory);
  font-family: Pretendard, sans-serif;
}
.button.primary {
  background: linear-gradient(135deg, var(--archive-gold-bright), var(--archive-bronze));
  color: var(--archive-ink);
  border: 1px solid rgba(255,255,255,.18);
}
.button:hover { filter: brightness(1.08); }
.text-link, .rank-value { color: var(--archive-gold-bright); }

.pagination a { border-radius: 3px; border-color: rgba(211,173,98,.28); background: var(--archive-surface); }
.pagination a.active, .ranking-tabs a.active { background: var(--archive-gold); border-color: var(--archive-gold); color: var(--archive-ink); }

.ranking-table { background: var(--archive-surface); }
.ranking-table th, .ranking-table td { border-color: rgba(211,173,98,.18); }
.ranking-table th { color: var(--archive-gold); }
.rank-dragon img { background: #111914; border-radius: 3px; }

.site-footer { border-top-color: rgba(211,173,98,.22); color: var(--archive-muted); }

/* Keep calculator cards readable, but re-skin their chrome */
.breeding-page .breeding-settings,
.breeding-time-page .breeding-settings {
  border-radius: 8px;
  border-color: rgba(211,173,98,.26);
}
.breeding-page .recipe-card,
.breeding-time-page .offspring-card-clean {
  border-radius: 6px !important;
  border-color: #d9ccb0 !important;
  background: linear-gradient(180deg, #fffdf7, var(--archive-paper)) !important;
  box-shadow: 0 7px 20px rgba(32,29,23,.10) !important;
}
.breeding-time-page .offspring-card-clean .offspring-rank {
  border-radius: 2px !important;
  background: linear-gradient(135deg, var(--archive-gold-bright), var(--archive-bronze)) !important;
  color: var(--archive-ink) !important;
}
.breeding-time-page .offspring-card-clean .offspring-probability-bar i {
  background: linear-gradient(90deg, var(--archive-bronze), var(--archive-gold-bright)) !important;
}
.breeding-time-page .offspring-card-clean .offspring-probability > strong { color: #8a5d18 !important; }

/* Autocomplete/dropdowns remain functional and readable */
.combo-results, .dragon-main-search-list, .dragon-search-autocomplete {
  border-radius: 5px !important;
  border-color: #cdbb95 !important;
  background: #fffdf7 !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22) !important;
}
.combo-item, .dragon-main-search-item { color: #242018 !important; }
.combo-item:hover, .dragon-main-search-item:hover { background: #eee4cf !important; }

/* Detail action cards and saved buttons */
.detail-breeding-actions a,
.detail-action-card,
.saved-dragon-actions button,
.detail-save-actions button {
  border-radius: 4px !important;
}

@media (max-width: 760px) {
  .header-inner { min-height: 68px; }
  .archive-crest { width: 42px; height: 47px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy small { display: none; }
  .main-nav { overflow-x: auto; max-width: 67vw; padding-bottom: 2px; }
  .main-nav a { white-space: nowrap; padding: 8px 9px; }
}