/* グリッド */
.bura-zukan{
  --bura-cols:auto; --bura-thumb-min:140px;
  --bura-modal-w:680px; --bura-modal-img-vh:52vh;
  --card-bg:#14181f; --card-br:#2a3342; --text:#e9f3ff; --muted:#9fb0c0; --overlay:rgba(8,12,16,.72);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--bura-thumb-min),1fr));
  gap:12px; max-width:1100px; margin-inline:auto;
}
.bura-zukan[style*="--bura-cols:"]:not([style*="auto"]){ grid-template-columns: repeat(var(--bura-cols), 1fr); }

/* カード */
.bura-card{ background:var(--card-bg); border:1.5px solid var(--card-br); border-radius:10px; overflow:hidden; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease; position: relative;
}
.bura-card:hover{ transform: translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.4); }
.bura-thumb{ aspect-ratio:1/1; background:#0b0f15; }
.bura-thumb img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none; }
.bura-cap{ padding:8px 10px 10px; text-align:left; }
.bura-title{ color:var(--text); display:block; font-weight:700; font-size:14px; line-height:1.4; }
.bura-meta{ color:var(--muted); display:block; font-size:12px; margin-top:2px; }

/* モーダル（上寄せ＆最前面） */
.bura-modal[hidden]{ display:none !important; }
.bura-modal{
  position:fixed; inset:0; background:var(--overlay);
  display:grid; justify-items:center; align-items:start;
  padding-top: clamp(20px, 6vh, 72px); padding-bottom:16px;
  z-index: 2147483647; /* 32bit上限級でヘッダーより前面に */
}
.bura-modal__inner{ width:min(86vw,var(--bura-modal-w)); max-height:92vh; background:#11161d; color:#f1f5ff;
  border:1px solid #2a3342; border-radius:14px; padding:12px 16px 16px;
  box-shadow:0 24px 80px rgba(0,0,0,.55); animation:bura-fade .18s ease-out;
}
@keyframes bura-fade{ from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)} }
.bura-modal__close{ appearance:none; border:0; background:#1a2230; color:#cfe3ff; padding:4px 10px; border-radius:8px; float:right; cursor:pointer; }
.bura-modal__img{ width:100%; height:auto; border-radius:10px; margin:6px 0 5px; max-height:var(--bura-modal-img-vh); object-fit:contain; }
.bura-modal__title{ margin:.2rem 0 .4rem; font-size:clamp(18px,2.4vw,24px); }
.bura-modal__desc{ color:#d3ddf0; line-height:1.8; white-space:pre-wrap; max-height:calc(var(--bura-modal-img-vh) - 1.5rem); overflow:auto; }

/* 説明内のリンク/動画 */
.bura-modal__desc a{ text-decoration: underline; color:#6cd3ff; }
.bura-modal__desc iframe{
  width:100%; height:auto; aspect-ratio:16/9; display:block; border:0;
  border-radius:8px; margin:8px 0 12px;
}

.bura-zukan { --bura-font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; } .bura-zukan .bura-title, .bura-zukan .bura-meta, .bura-zukan .bura-modal__title, .bura-zukan .bura-modal__desc { font-family: var(--bura-font); font-synthesis: none; /* 擬似ボールド/斜体の合成を禁止 */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 見出しは 600～700 で。Yu Gothic の太りすぎ回避に 600 推奨 */ .bura-zukan .bura-title { font-weight: 600; }
/* === モーダル側は .bura-zukan の外にあるため、直指定でフォントを固定する === */
.bura-modal__title,
.bura-modal__desc,
.bura-modal__desc * {
  font-family: var(--bura-font, "Noto Sans JP","Hiragino Sans","Yu Gothic","Meiryo",sans-serif) !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bura-modal__title { font-weight: 600; } /* Yu Gothic の太りすぎ回避で 600 推奨 */
/* === モーダル見出しをバー表示に、余白も詰める === */
.bura-modal__title{
  position: relative;
  display: block;
  background: linear-gradient(90deg,#9b2536 0%,#7b2130 55%,#5d1b28 100%);
  color: #fff;
  padding: 8px 14px;
  border: 1.5px solid #5a1a26;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(0,0,0,.35);
  letter-spacing: .02em;
  line-height: 1.25;
  margin: 4px 0 4px;     /* ← タイトル上下の余白を詰める */
  font-weight: 600;
}

/* タイトルバーの右側に斜めのハイライト（お好みで） */
.bura-modal__title::after{
  content:"";
  position:absolute;
  top:0; bottom:0; right:710px;
  width:120px;
  background: linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0));
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
  pointer-events:none;
}

/* 画像と本文の間隔もタイトに */
.bura-modal__img{ margin: 4px 0 6px; }
.bura-modal__desc{ margin-top: 4px; }