/* 画面写真の拡大の窓（image-viewer.js が組み立てる）。トップとドキュメントの両方が読む
   ＝どちらの CSS にも頼らずにこのファイルだけで見た目が決まる（demo-notice.css と同じ流儀）。
   色の変数（--ink・--muted・--line・--paper）はトップとドキュメントの両方の :root に同じ値である。
   セレクタは class から始める＝トップの h2・p（要素の規則）より強く効く。 */
/* 余白は窓ではなく中の包みが持つ＝窓そのもの（背景）を押したときだけ event.target が窓になる */
.image-viewer {
  max-width:1100px;
  width:90vw;
  max-height:90vh;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0;
  background:#fff;
  color:var(--ink)
}
/* 背景は demo-notice.css の窓と同じ値＝変えたら両方直す */
.image-viewer::backdrop {
  background:#071526d9;
  backdrop-filter:blur(5px)
}
.image-viewer-body {
  padding:22px
}
.image-viewer img {
  display:block;
  width:100%;
  height:auto
}
.image-viewer-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px
}
/* 太さと字間もここで決める＝トップの h2 の規則が効くページと効かないページで見出しが変わらない */
.image-viewer-header h2 {
  font-size:16px;
  font-weight:650;
  letter-spacing:0;
  line-height:1.6;
  margin:0
}
.image-viewer-header button {
  flex:none;
  font:inherit;
  font-size:14px;
  background:var(--paper);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:4px;
  color:var(--ink);
  cursor:pointer
}
.image-viewer-note {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin:12px 0 0
}
/* 開いている間は背景をスクロールさせない */
body:has(.image-viewer[open]) {
  overflow:hidden
}
/* 狭い画面では窓を広げ、余白を詰める */
@media(max-width:760px) {
  .image-viewer {
    width:95vw
  }
  .image-viewer-body {
    padding:13px
  }
}