/* 手帳の紙と書体を継承した、閲覧専用の天気画集。 */
#openWeatherGallery {
  position:absolute; top:8px; right:8px; z-index:6;
  display:flex; align-items:center; justify-content:center; gap:5px;
  min-width:44px; min-height:44px; padding:5px 9px;
  background:#fff9edeb; color:#3e493c; border:1px solid #cdbfa7;
  border-radius:4px; box-shadow:0 2px 5px #4e3f2520; font:inherit; font-size:13px;
}
#openWeatherGallery svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}
#weatherGalleryDialog {
  --gallery-paper:#fff8eb; --gallery-ink:#3c4135; --gallery-edge:#d9c6a7; --gallery-accent:#7c8a68;
  box-sizing:border-box; width:min(1020px,calc(100vw - 24px)); max-width:none;
  max-height:calc(100dvh - 24px); padding:18px; overflow:auto;
  background:var(--gallery-paper); color:var(--gallery-ink); border:1px solid var(--gallery-edge);
  border-radius:8px; box-shadow:0 14px 50px #29241e55; font-family:inherit;
}
#weatherGalleryDialog::backdrop {background:#29241e9c}
.weather-gallery-header {position:sticky;top:0;z-index:1;background:var(--gallery-paper);display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--gallery-edge);padding-bottom:10px}
.weather-gallery-header h2 {margin:0;flex:1;font:inherit;font-size:clamp(18px,2.5vw,25px)}
#weatherGalleryDialog button {font:inherit;color:inherit;cursor:pointer}
.weather-gallery-header button {min-height:44px;min-width:44px;padding:6px 10px;background:transparent;border:1px solid var(--gallery-edge);border-radius:4px;flex-shrink:0}
#closeWeatherGallery {font-size:25px!important}
#weatherGalleryHint {margin:12px 0;font-size:14px}
.weather-gallery-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:4px}
.weather-gallery-grid button {padding:7px 7px 10px;border:1px solid var(--gallery-edge);background:#fffdf6;box-shadow:0 3px 6px #65553d1f;border-radius:2px;transition:transform .15s}
.weather-gallery-grid button:hover {transform:translateY(-2px)}
.weather-gallery-grid img {display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#f1e9d8}
.weather-gallery-grid span {display:block;margin-top:7px;font-size:16px}
#weatherGalleryLarge {margin:12px 0 0}
#weatherGalleryImage {display:block;width:100%;height:min(70dvh,750px);object-fit:contain}
#weatherGalleryCaption {text-align:center;margin-top:8px;font-size:18px}
#weatherGalleryDialog [hidden] {display:none!important}
#weatherGalleryDialog button:focus-visible,#openWeatherGallery:focus-visible {outline:3px solid #7c8a68;outline-offset:3px}
@media(max-width:600px) {
  #weatherGalleryDialog {padding:12px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .weather-gallery-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .weather-gallery-header {gap:6px;flex-wrap:wrap}
  #weatherGalleryBack {font-size:13px!important}
  #weatherGalleryImage {height:auto;max-height:70dvh}
}
@media(prefers-reduced-motion:reduce) {.weather-gallery-grid button {transition:none}}