:root {
  --bg: rgba(255, 255, 255, 1);
  --text: rgba(34, 34, 34, 1);
  --muted: rgba(111, 111, 111, 1);
  --line: rgba(224, 224, 224, 1);
  --accent: rgba(100, 100, 100, 1);
  --accent-soft: rgb(241, 241, 241);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

html:lang(zh-Hant) body {
  font-family: "Libre Baskerville", "Cactus Classical Serif", "Noto Serif JP", "Noto Serif KR", "Noto Naskh Arabic", "Noto Serif Myanmar", "Noto Serif Lao", "Noto Serif Tibetan", "Noto Serif Devanagari", "Noto Serif Hebrew", "Noto Serif Armenian", "Noto Serif Tamil", "Noto Serif Sinhala", "Noto Serif Thai", "Noto Serif Khmer", "Noto Serif Old Uyghur", "Noto Serif", "PT Serif", serif, "Noto Sans Mongolian";
}

html:lang(en) body {
  font-family: "Libre Baskerville", "Noto Serif JP", "Noto Serif KR", "Noto Naskh Arabic", "Noto Serif Lao", "Noto Serif Myanmar", "Noto Serif Tibetan", "Noto Serif Devanagari", "Noto Serif Hebrew", "Noto Serif Armenian", "Noto Serif Tamil", "Noto Serif Sinhala", "Noto Serif Thai", "Noto Serif Khmer", "Noto Serif Old Uyghur", "Noto Serif", "PT Serif", serif, "Noto Sans Mongolian";
}

html:lang(ja) body {
  font-family: "Libre Baskerville", "Noto Serif JP", "Noto Serif KR", "Noto Naskh Arabic", "Noto Serif Lao", "Noto Serif Myanmar", "Noto Serif Tibetan", "Noto Serif Devanagari", "Noto Serif Hebrew", "Noto Serif Armenian", "Noto Serif Tamil", "Noto Serif Sinhala", "Noto Serif Thai", "Noto Serif Khmer", "Noto Serif Old Uyghur", "Noto Serif", "PT Serif", serif, "Noto Sans Mongolian";
}


header {
  padding: 44px 20px 24px;
  text-align: center;
}

header h1 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  letter-spacing: 0.04em;
  font-weight: 700;
}

header p {
  margin: 0 auto;
  max-width: 660px;
  color: var(--muted);
  font-size: 0.92rem;
}

.urdu {
  font-family: "Noto Nastaliq Urdu", serif;
  direction: rtl;
  unicode-bidi: plaintext;
  font-weight: 400;
  text-align: right;
  display: block;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: anywhere;
}

.nko,
.adlam,
.hebrew,
.divehi,
.arabic {
  direction: rtl;
  unicode-bidi: plaintext;
  font-weight: 400;
  text-align: right;
  display: block;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: anywhere;
}

.zh-Hans,
[lang="zh-Hans"] {
  font-weight: 400;
  font-family: "Noto Serif SC", serif;
}

.mongolian {
  font-family:
    "Mongolian Baiti",
    "Mongolian White",
    "Mongolian Title",
    "Noto Sans Mongolian",
    serif;
  writing-mode: vertical-lr;
  text-orientation: sideways;
  display: inline-block;
  line-height: 1.4;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  background: none;
  /* backdrop-filter: blur(16px); */
  /* border-top: 1px solid var(--line); */
  /* border-bottom: 1px solid var(--line); */
}

.button-group {
  display: flex;
  gap: 6px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}

button,
.buttons {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 13px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: 0.2s ease;
}

button:hover,
.buttons:hover {
  color: var(--text);
  background: var(--accent-soft);
}

button.active {
  background: var(--accent);
  color: #ffffff;
}

main {
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.continent-section {
  margin-bottom: 44px;
  overflow: visible;
}

.continent-title {
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.28rem, 2.6vw, 1.85rem);
  letter-spacing: 0.04em;
}

.editorial-note {
  width: 90%;
  margin: 0 auto 56px;
  padding: 18px 22px;
  color: var(--muted);
  background: rgba(255, 255, 255, 1);
  border: 1px solid var(--line);
  border-radius: 18px;
  font-size: 0.88rem;
  line-height: 1.7;
}

.editorial-note h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.editorial-note p {
  margin: 0 0 10px;
}

.editorial-note details {
  margin-top: 8px;
}

.editorial-note summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.editorial-note-list {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
}

.editorial-note-continent {
  margin-bottom: 0.9em;
}

.editorial-note-continent-title {
  margin: 0 0 0.35em;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.editorial-note-sublist {
  margin: 0;
  padding-left: 1.3em;
  list-style: disc;
}

.editorial-note-sublist li {
  margin-bottom: 0.45em;
}

.editorial-note-label {
  font-weight: 600;
  font-family: "Libre Baskerville", "Noto Serif JP", serif;
}


.entity-group {
  margin-bottom: 26px;
  overflow: visible;
}

.entity-group-title {
  margin: 15px 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, calc((100% - 16px) / 2)), 1fr));
  gap: 16px;
  overflow: visible;
}

.country-card {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: visible;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.country-card:hover,
.country-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.09);
}

.country-card:hover,
.country-card:focus-within {
  z-index: 30;
}

.country-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* 圖片區：第一列圖片，第二列徽章註記 */
.image-wrap {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  min-height: 145px;
  padding: 12px 14px 8px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
}

.country-image {
  display: block;
  grid-row: 1;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.12));
}

.image-note {
  display: block;
  grid-row: 2;
  justify-self: end;

  margin: 4px 0 0;

  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

.country-info {
  padding: 14px 15px 16px;
  border-radius: 0 0 18px 18px;
}

.country-name-main {
  margin: 0 0 4px;
  font-size: 1.08rem;
  font-weight: 700;
}

.official-name {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.country-page {
  display: block;
  width: fit-content;
  margin: 10px 0 0 auto;
  padding: 2px 8px;
  color: var(--accent);
  background: var(--bg);
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.country-page:hover {
  background: var(--line);
}



.name-list {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.name-list div {
  display: grid;
  grid-template-columns: 4.1em 1fr;
  gap: 12px;
}

.name-list dt,
.name-list dd {
  margin: 0;
}

.label {
  color: #999999;
}


.native-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  max-width: 100%;
}

.native-main {
  overflow-wrap: anywhere;
}

.native-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.2em;
  height: 1.2em;
  flex: 0 0 auto;

  opacity: 0.72;
  border-radius: 999px;
  background: rgba(36, 76, 122, 0.08);

  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.native-arrow::before {
  content: "";
  width: 0.42em;
  height: 0.42em;

  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;

  transform: translateY(-0.08em) rotate(45deg);
}

.native-box:hover .native-arrow,
.native-box:focus-within .native-arrow {
  opacity: 1;
  transform: rotate(180deg);
  background: rgba(36, 76, 122, 0.16);
}

.native-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 0.35rem);
  z-index: 100;

  display: flex;
  flex-direction: column;
  gap: 0.2rem;

  min-width: max-content;
  max-width: min(70vw, 28rem);
  padding: 0.45rem 0.58rem;

  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0.6rem;
  background: #ffffff;
  box-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.16);

  color: var(--text);
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.native-box:hover .native-arrow,
.native-box:focus-within .native-arrow {
  opacity: 1;
  transform: rotate(180deg);
}

.native-box:hover .native-dropdown,
.native-box:focus-within .native-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.continent-jump {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 20px 0;
}

.continent-jump-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.continent-jump-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.continent-jump-list a:hover,
.continent-jump-list a:focus-visible {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.a-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.a-button:hover,
.a-button:focus-visible {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

a.cancel,
a.cancel:hover,
a.cancel:focus-visible {
  display: inline;
  align-items: initial;
  justify-content: initial;
  padding: 0;
  color: revert;
  text-decoration: revert;
  font-size: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}

a.cancel:visited {
  color: revert;
}

.fixed-corner-button-2 {
  font-family: "Libre Baskerville", "Cactus Classical Serif", "Noto Serif JP", "Noto Serif KR", "Noto Naskh Arabic", "Noto Serif Devanagari", "Noto Serif Hebrew", "Noto Serif Tamil", "Noto Serif Sinhala", "Noto Serif Thai", "Noto Serif Khmer", "Noto Serif Old Uyghur", "Noto Serif", "PT Serif", "Noto Serif SC", serif, "Noto Sans Mongolian";
  position: fixed;
  right: 18px;
  bottom: 64px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0.62rem 0.9rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.fixed-corner-button-2:hover,
.fixed-corner-button-2:focus-visible {
  transform: translateY(-2px);
  background: var(--text);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.fixed-corner-button-2:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 4px;
}

.fixed-corner-button {
  font-family: "Libre Baskerville", "Cactus Classical Serif", "Noto Serif JP", "Noto Serif KR", "Noto Naskh Arabic", "Noto Serif Devanagari", "Noto Serif Hebrew", "Noto Serif Tamil", "Noto Serif Sinhala", "Noto Serif Thai", "Noto Serif Khmer", "Noto Serif Old Uyghur", "Noto Serif", "PT Serif", "Noto Serif SC", serif, "Noto Sans Mongolian";
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0.62rem 0.9rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.fixed-corner-button:hover,
.fixed-corner-button:focus-visible {
  transform: translateY(-2px);
  background: var(--text);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

.fixed-corner-button:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 4px;
}


footer {
  padding: 26px 20px 38px;
  text-align: center;
  color: var(--muted);
  /* border-top: 1px solid var(--line); */
  font-size: 0.82rem;
}

.logo-div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 44px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.logo-text {
  margin: 0;
  line-height: 1;
  text-align: left;
}

.logo-zh {
  font-family: "Cactus Classical Serif", serif;
  font-size: 0.54rem;
}

.logo-ja {
  font-family: "Noto Serif JP", serif;
  font-size: 0.54rem;
}

.logo-en {
  font-family: "Libre Baskerville", serif;
  font-size: 1.05rem;
}

.logo-link,
.logo-link:hover,
.logo-link:focus-visible {
  display: inline-block;
  padding: 0;
  color: inherit;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.logo-multiple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}


@media (max-width: 520px) {
  .editorial-note {
    margin-bottom: 40px;
    padding: 14px 16px;
    font-size: 0.82rem;
  }

  button {
    padding: 3px 5px;
    font-size: 0.9rem;
  }

  .button-group {
    display: flex;
    gap: 5px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
  }

  .name-list div {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .name-list dt {
    font-size: 0.76rem;
  }

  main {
    padding: 22px 14px 52px;
  }

  .toolbar {
    padding: 8px 12px;
  }

  .continent-section {
    margin-bottom: 32px;
  }

  .entity-group {
    margin-bottom: 16px;
  }

  .country-grid {
    gap: 10px;
  }

  .country-info {
    padding: 10px 10px 11px;
  }

  .native-dropdown {
    max-width: min(78vw, 18rem);
    padding: 0.42rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.45;
    gap: 0.12rem;
    white-space: normal;
  }

  .native-dropdown span {
    overflow-wrap: anywhere;
  }

  .continent-jump {
    padding: 14px 14px 0;
  }

  .continent-jump-list {
    gap: 6px;
  }

  .continent-jump-list a {
    padding: 3px 5px;
  }

  /* .fixed-corner-button {
    left: 12px;
    bottom: 12px;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.52rem 0.72rem;
    font-size: 0.8rem;
  } */
}