/* --- サムネ --- */
.thumb { all: unset; cursor: zoom-in; display: block; }
.thumb img {
  width: 90%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: .5rem;
}

/* ギャラリー画像のサイズ調整 */
.thumb img {
  width: 90%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}


.columns.is-multiline {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 0; /* ← これが肝心。幅の自由度を高める */
  min-width: 0; /* ← 折り返しを阻害するmin-content制約を解除 */
  padding: 0.5rem;
}

.thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

/* カラム間の余白を小さめに */
.columns.is-multiline {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.column {
  padding: 0.5rem;
}

/* --- dialog レイヤ --- */
.viewer::backdrop { background: rgba(0,0,0,.65); }
.viewer .viewer-frame { padding: 0; }
.viewer-content {
  position: relative;
  margin: 0; padding: 0;
  display: grid; place-items: center;
  min-width: min(92vw, 1200px);
  min-height: 60vh;
}
#viewerImg {
  max-width: min(92vw, 1200px);
  max-height: 82vh;
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  user-select: none;
}


/* 前後ボタン */
.viewer-prev, .viewer-next {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  border: none; border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff; font-size: 1.75rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.viewer-prev { left: .75rem; }
.viewer-next { right: .75rem; }
.viewer-prev:hover, .viewer-next:hover { background: rgba(0,0,0,.6); }

/* 小画面最適化 */
@media (max-width: 480px) { #viewerImg { max-height: 76vh; } }

/* --- 既存のヘッダ調整（必要に応じて） --- */
.navbar-logo { display:flex; align-items:center; gap:.5rem; margin-inline:1rem; margin-block:.6rem; }
.navbar-logo img { width:100px; height:auto; }

/* Drawer（テンプレのまま） */
.drawer{position:fixed;top:0;left:0;height:100vh;width:280px;max-width:86vw;background:#fff;box-shadow:2px 0 16px rgba(0,0,0,.12);transform:translateX(-100%);transition:transform .25s ease;z-index:40;display:flex;flex-direction:column;outline:none}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s ease;z-index:30;pointer-events:none}
.is-drawer-open .drawer{transform:translateX(0)}
.is-drawer-open #drawerBackdrop{opacity:1;pointer-events:auto}
.is-scroll-locked{overflow:hidden}
.drawer-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1rem;border-bottom:1px solid #eee}
.drawer-body{display:grid;gap:.25rem;padding:.75rem}
.drawer-body a{display:block;padding:.75rem .75rem;border-radius:.5rem;color:#363636}
.drawer-body a:hover{background:#f5f5f5}
@media (min-width:1024px){.drawer{width:320px}}

/* dialog 本体 */
.viewer {
  padding: 0;
  border: none;
  max-width: 100vw;
  width: auto;
  overflow-x: hidden;
}

/* コンテンツ幅は画面に合わせてクランプ */
.viewer-content {
  width: clamp(280px, 96vw, 1200px);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto; /* 画像 / アクション / キャプション */
  row-gap: 1rem;
}

/* ① 画像＋矢印 */
.viewer-figure {
  position: relative;
  margin: 0;
  border-radius: .5rem;
  overflow: hidden; /* 角丸に合わせて矢印のはみ出しを隠す */
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
#viewerImg {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  height: auto;
  width: 100%;
  user-select: none;
}

/* 前後ボタン（重ねる） */
.viewer-prev, .viewer-next {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  border: none; border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff; font-size: 1.75rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
}
.viewer-prev  { left: .5rem; }
.viewer-next  { right: .5rem; }
.viewer-prev:hover, .viewer-next:hover { background: rgba(0,0,0,.6); }

/* ② 閉じる（中央） */
.viewer-actions {
  display: flex;
  justify-content: center;
}

/* ③ キャプション（グレー・中央・通常フロー） */
.viewer-caption {
  text-align: center;
  color: #9aa0a6;          /* 視認性の良いグレー */
  font-size: .85rem;
  line-height: 1.6;
  padding: 0 .75rem 0.25rem;
  text-shadow: none;       /* 背景画像がなくなるので影は不要 */
}

/* 小画面での高さ調整（必要に応じて） */
@media (max-width: 480px) {
  #viewerImg { max-height: 76vh; }
}