:root { background: #f2f6f3; color: #183630; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1420px; margin: auto; padding: clamp(12px, 4vw, 44px); }
header { padding: clamp(18px, 3vw, 36px); background: #173f36; color: #fff; border-radius: 18px; }
h1 { margin: 0 0 8px; font-size: clamp(22px, 4vw, 36px); }
p { margin: 0; line-height: 1.8; }
header a { display: inline-block; background: #e1f2e7; color: #153e34; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: bold; }
header small { display: block; margin-top: 4px; }
a { color: #205f4d; }
button, input, select { font: inherit; color: inherit; background: #fff; border: 1px solid #aebfb5; border-radius: 8px; padding: 6px 10px; }
button, summary { cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
#count { margin: 10px 0; font-size: 13px; }
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(155px, 100%), 1fr)); gap: 10px; }
#grid article { display: flex; flex-direction: column; text-align: center; border: 1px solid #d7e1db; background: #fff; border-radius: 12px; }
#grid article h2 { margin: 0; font-size: 14px; }
#grid article .en { font-size: 11px; }
.map-preview { display: block; width: 100%; height: 86px; object-fit: contain; background: #f4f6f5; border-radius: 8px; }
.map-detail-image { display: block; width: 100%; max-height: max(80px, calc(var(--catalog-dialog-height, 85dvh) - 150px)); object-fit: contain; background: #f4f6f5; }
.map-detail-source { margin-top: 6px; font-size: 12px; }
#pagination:not([hidden]) { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }
footer { margin-top: 20px; font-size: 12px; line-height: 1.8; }
dialog { width: min(94%, 680px); max-height: 85dvh; border: 1px solid #c7d9d0; border-radius: 16px; }
dialog::backdrop { background: #142822a0; }
@media (max-width: 450px) {
  #grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}