.region-compare-fab,
.region-compare-panel {
  --compare-ink: #123f35;
  --compare-accent: #195a4a;
  --compare-orange: #ed8b27;
  --compare-paper: #fffdf5;
  --compare-soft: #eef6f2;
  --compare-line: #c9ddd5;
  --compare-muted: #5d746d;
  --compare-panel-gap: clamp(12px, 1vw, 22px);
  --compare-font: clamp(14px, calc(12px + 0.16vw), 19px);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.region-compare-fab {
  position: fixed;
  right: clamp(14px, 1.15vw, 34px);
  bottom: clamp(14px, 1.15vw, 34px);
  z-index: 5000;
  min-height: clamp(48px, 2.7vw, 62px);
  padding: 10px clamp(16px, 1vw, 24px);
  border: 1px solid #0f493c;
  border-radius: 999px;
  background: var(--compare-accent);
  color: #fff;
  box-shadow: 0 12px 30px rgb(18 63 53 / 24%);
  font-size: clamp(15px, calc(13px + 0.15vw), 19px);
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}

.region-compare-fab:hover {
  background: #0f493c;
}

.region-compare-fab span {
  display: inline-grid;
  min-width: clamp(24px, 1.45vw, 32px);
  min-height: clamp(24px, 1.45vw, 32px);
  margin-left: 7px;
  place-items: center;
  border-radius: 999px;
  background: var(--compare-orange);
  color: #fff;
  font-size: clamp(12px, calc(11px + 0.12vw), 15px);
}

.region-compare-panel {
  position: fixed;
  right: clamp(14px, 1.15vw, 34px);
  bottom: clamp(76px, 4.9vw, 108px);
  z-index: 5010;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(calc(100vw - 28px), clamp(760px, 74vw, 2240px));
  max-height: min(86vh, 1500px);
  overflow: hidden;
  border: 1px solid var(--compare-line);
  border-radius: clamp(16px, 1.15vw, 26px);
  background: var(--compare-paper);
  color: var(--compare-ink);
  box-shadow: 0 24px 70px rgb(18 63 53 / 24%);
}

.region-compare-panel[hidden] {
  display: none;
}

.region-compare-header {
  display: flex;
  align-items: center;
  gap: var(--compare-panel-gap);
  padding: clamp(14px, 1vw, 24px) clamp(16px, 1.25vw, 30px) clamp(12px, .8vw, 20px);
  border-bottom: 1px solid var(--compare-line);
}

.region-compare-heading {
  min-width: 0;
  flex: 1;
}

.region-compare-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.region-compare-heading h2 {
  margin: 0;
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: clamp(23px, calc(17px + .55vw), 38px);
  line-height: 1.2;
}

.region-compare-count {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--compare-soft);
  color: var(--compare-accent);
  font-size: calc(var(--compare-font) - 1px);
  font-weight: 750;
  white-space: nowrap;
}

.region-compare-heading p {
  margin: 5px 0 0;
  color: var(--compare-muted);
  font-size: var(--compare-font);
  line-height: 1.45;
}

.region-compare-close,
.region-compare-clear,
.region-compare-expand,
.region-compare-add-prefecture,
.region-compare-remove,
.region-compare-group,
.region-compare-inline-add {
  min-height: clamp(40px, 2.55vw, 52px);
  padding: 7px clamp(10px, .7vw, 16px);
  border: 1px solid var(--compare-line);
  border-radius: 9px;
  background: #fff;
  color: var(--compare-ink);
  font: inherit;
  font-size: var(--compare-font);
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  cursor: pointer;
}

.region-compare-close:hover,
.region-compare-clear:hover,
.region-compare-expand:hover,
.region-compare-add-prefecture:hover,
.region-compare-remove:hover,
.region-compare-group:hover,
.region-compare-inline-add:hover {
  border-color: var(--compare-accent);
  background: var(--compare-soft);
}

.region-compare-toolbar {
  display: flex;
  align-items: center;
  gap: clamp(8px, .65vw, 14px);
  min-height: clamp(50px, 3.4vw, 66px);
  padding: 8px clamp(16px, 1.25vw, 30px);
  border-bottom: 1px solid var(--compare-line);
  background: var(--compare-soft);
}

.region-compare-status {
  min-width: 0;
  flex: 1;
  color: var(--compare-muted);
  font-size: var(--compare-font);
  line-height: 1.4;
}

.region-compare-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: clamp(12px, 1vw, 24px);
  scrollbar-gutter: stable;
}

.region-compare-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(260px, 18vw, 360px)), 1fr));
  gap: var(--compare-panel-gap);
  align-items: start;
}

.region-compare-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--compare-line);
  border-radius: clamp(13px, .8vw, 18px);
  background: #fff;
  box-shadow: 0 8px 22px rgb(18 63 53 / 7%);
}

.region-compare-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: clamp(13px, .85vw, 19px);
  border-bottom: 1px solid var(--compare-line);
  background: linear-gradient(135deg, #f7fbf8, #fffdf5);
}

.region-compare-index {
  display: grid;
  width: clamp(31px, 1.8vw, 40px);
  height: clamp(31px, 1.8vw, 40px);
  place-items: center;
  border-radius: 50%;
  background: var(--compare-accent);
  color: #fff;
  font-size: calc(var(--compare-font) - 2px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.region-compare-area {
  min-width: 0;
}

.region-compare-area h3 {
  margin: 0;
  color: var(--compare-ink);
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: clamp(19px, calc(15px + .3vw), 27px);
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.region-compare-area p {
  margin: 4px 0 0;
  color: var(--compare-muted);
  font-size: calc(var(--compare-font) - 1px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.region-compare-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: clamp(10px, .7vw, 15px);
  gap: 1px;
  background: var(--compare-line);
}

.region-compare-summary {
  border-bottom: 1px solid var(--compare-line);
}

.region-compare-detail-groups {
  display: grid;
  background: #fff;
}

.region-compare-details {
  border-bottom: 1px solid var(--compare-line);
}

.region-compare-details > summary {
  min-height: clamp(46px, 2.8vw, 58px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px clamp(13px, .85vw, 19px);
  color: var(--compare-ink);
  background: #fbfdfb;
  font-size: var(--compare-font);
  font-weight: 760;
  cursor: pointer;
  list-style: none;
}

.region-compare-details > summary::-webkit-details-marker {
  display: none;
}

.region-compare-details > summary::after {
  content: "展开";
  margin-left: auto;
  color: var(--compare-accent);
  font-size: calc(var(--compare-font) - 2px);
}

.region-compare-details[open] > summary::after {
  content: "收起";
}

.region-compare-details > summary small {
  color: var(--compare-muted);
  font-size: calc(var(--compare-font) - 2px);
  font-weight: 650;
}

.region-compare-details .region-compare-metrics {
  padding-top: 1px;
}

.region-compare-metric {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: clamp(58px, 3.5vw, 76px);
  padding: clamp(8px, .6vw, 13px);
  background: #fff;
}

.region-compare-metric dt {
  color: var(--compare-muted);
  font-size: calc(var(--compare-font) - 2px);
  line-height: 1.25;
}

.region-compare-metric dd {
  min-width: 0;
  margin: 0;
  color: var(--compare-ink);
  font-size: var(--compare-font);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.region-compare-metric-featured {
  background: #f4faf6;
}

.region-compare-metric-featured dd {
  color: var(--compare-accent);
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: clamp(21px, calc(17px + .35vw), 30px);
}

.region-compare-metric:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.region-compare-card-footer {
  padding: 10px clamp(13px, .85vw, 19px) clamp(13px, .85vw, 19px);
}

.region-compare-card-footer .region-compare-group {
  width: 100%;
}

.region-compare-remove {
  min-height: 34px;
  padding: 5px 8px;
  font-size: calc(var(--compare-font) - 2px);
}

.region-compare-add-prefecture {
  min-height: 38px;
  border-color: #e5aa69;
  background: #fff8ed;
  color: #8a470d;
}

.region-compare-group {
  border-color: #e5aa69;
  color: #8a470d;
  background: #fff8ed;
}

.region-compare-empty {
  display: grid;
  min-height: clamp(240px, 36vh, 520px);
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--compare-muted);
  text-align: center;
}

.region-compare-empty strong {
  color: var(--compare-ink);
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: clamp(22px, calc(18px + .4vw), 32px);
}

.region-compare-empty span {
  max-width: 34em;
  font-size: var(--compare-font);
  line-height: 1.55;
}

.region-compare-inline-add {
  min-height: 32px;
  padding: 5px 8px;
  border-color: #e5aa69;
  background: #fff8ed;
  color: #8a470d;
  font-size: 12px;
}

.region-compare-inline-add[aria-pressed="true"] {
  border-color: var(--compare-accent);
  background: var(--compare-accent);
  color: #fff;
}

.region-compare-fab:focus-visible,
.region-compare-panel button:focus-visible,
.region-compare-details > summary:focus-visible {
  outline: 3px solid var(--compare-orange);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .region-compare-fab {
    right: 14px;
    bottom: 74px;
  }

  .region-compare-panel {
    inset: auto 0 0;
    width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
  }

  .region-compare-header {
    padding: 12px;
  }

  .region-compare-toolbar {
    flex-wrap: wrap;
    padding: 7px 12px;
  }

  .region-compare-status {
    width: 100%;
    flex-basis: 100%;
  }

  .region-compare-content {
    padding: 10px;
  }

  .region-compare-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .region-compare-panel {
    width: calc(100vw - 28px);
  }
}

@media (min-width: 3200px) {
  .region-compare-fab,
  .region-compare-panel {
    --compare-font: 28px;
  }

  .region-compare-panel {
    width: min(76vw, 2920px);
    max-height: min(88vh, 1880px);
  }

  .region-compare-heading h2 {
    font-size: 50px;
  }

  .region-compare-area h3 {
    font-size: 36px;
  }

  .region-compare-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .region-compare-fab,
  .region-compare-panel {
    scroll-behavior: auto;
  }
}