/* 自慢（/brag/）。★読み物の幅（.page）の中に置く。
 *
 * ★★写真が主役なので、器は徹底して黙らせる。縁も影も最小限。
 *   カード（css/card.css）と同じ装いにすると、予報のカードと見分けが付かなくなる。
 *
 * ★色の名前は css/tokens.css のものだけを使う。ここで生の #色 を足さない
 *   （明るい配色に切り替えたときに、ここだけ取り残される）。
 */

/* ---------------------------------------------------------------- 打ち消し */
/* ★★これは飾りではなく、法の上で要るもの（inc/brag.php の頭）。
 *   ★小さくしない・薄くしない・畳まない。読み飛ばせる見た目にした時点で
 *     「打ち消し表示」として働かなくなる。 */
.brag-warn {
  margin: 14px 0 18px;
  /* ★★中身（帯）が角からはみ出さないように、外側で切る。 */
  overflow: hidden;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  background: var(--warn-bg);
}

/* ★★見出しは**帯**にする（2026-08-26に変えた）。
 * ★以前は地の上に黄色い字を置いていた。#9A711A は暗い地との明暗差が
 *   3倍しか出ず、13pxでは読みにくかった。
 *   ★ここは景品表示法の打ち消し表示。**読めないと意味が無い**。
 *   帯の上に白を置けば5倍出る。
 * ★字を大きくして解決しない。大きくすると本文より目立って、
 *   読ませたい本文のほうが飾りに見える。 */
.brag-warn-t {
  display: block;
  padding: 7px 14px;
  background: var(--warn-line);
  color: var(--warn-on);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.brag-warn-b {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--t1);          /* ★副文の色にしない。読ませる文なので主文と同じ */
}
.brag-warn-b b { color: var(--t1); }
/* ★★中の色つきの地に合わせる。--accent（青）はこの地の上で沈むので、
 *   下線で「押せる」ことを伝え、色は本文と同じにする。 */
.brag-warn-b a {
  color: var(--t1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ★並びの下に置く2回目。見出しの帯が無いので、上の余白を広く取る。 */
.brag-warn-b2 { margin-top: 24px; }

/* ---------------------------------------------------------------- 出す口 */
.brag-post {
  margin: 0 0 20px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--ink2);
}
.brag-post-s {
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.brag-post-s::-webkit-details-marker { display: none; }
/* ★開いているかどうかが分かる印。無いと押せることに気づかれない。 */
.brag-post-s::before {
  content: "＋";
  margin-right: 6px;
  color: var(--accent);
}
.brag-post[open] .brag-post-s::before { content: "－"; }
.brag-post-b { padding: 0 14px 14px; }
.brag-post > .brag-post-b:first-child { padding-top: 14px; }

/* ★★入力の1組（2026-08-27）。ラベルを**上**に置いて縦に積む。
 *   ★以前は .dlg-row（横並び）を流用していた。あちらは
 *     「ラベル：入力欄」を1行に収めるための組み方で、
 *     ラベル・選ぶ口・下見の写真・枚数と4つ続くここでは、
 *     全部が1行に押し込まれて細く潰れていた。
 *   ★ラベルが上にあると、入力欄を画面いっぱいに使える。 */
.brag-field { margin-bottom: 16px; }
.brag-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--t2);
}
/* ★写真を選ぶ口。★横幅いっぱい。★行の高さを確保する——
 *   ブラウザの既定のボタンは小さく、指では狙いにくい。 */
.brag-field input[type="file"] {
  display: block;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
}
/* ★ひとこと。★縦に伸ばさせない——伸ばせると、
 *   30文字しか入らないのに10行の欄を作れてしまう。 */
.brag-in {
  display: block;
  width: 100%;
  padding: 9px 10px;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  /* ★flex の子ではないので、.inp の flex:1 を打ち消しておく。 */
  flex: none;
}

/* 下見の写真。★大きくしすぎない（確かめるためのもので、見せ場ではない）。
 * ★3枚を横に並べる。縦に積むとフォームが伸びて、送るボタンが画面外へ出る。 */
.brag-prevs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.brag-prev {
  display: block;
  max-width: calc(33.333% - 6px);
  max-height: 200px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.brag-count {
  margin-top: 4px;
  font-size: 12px;
  color: var(--t3);
  text-align: right;
}
/* ★選びすぎ。★色だけで伝えない——字そのものが「★…枚までです」と言っている。 */
.brag-count.over { color: var(--ng); }

/* ★写り込みの注意。★目立たせる——読まずに出されると取り返しがつかない。 */
.brag-note {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--ink3);
  font-size: 12px;
  line-height: 1.7;
  color: var(--t2);
}
.brag-note b { color: var(--t1); }

.brag-who {
  margin-top: 10px;
  font-size: 12px;
  color: var(--t3);
}
.brag-who b { color: var(--t1); }
.brag-who a { color: var(--accent); }

/* ---------------------------------------------------------------- 並び */
/* ★★横に3件（2026-08-27）。★それまでは幅に応じて列数が変わっていた
 *   （auto-fill・240px ごと）。数を決め打ちにしたので、
 *   **どの画面でも同じ形**になり、写真の大きさもそろう。
 * ★狭い画面では減らす。3列のまま押し込むと1列100px弱になり、
 *   写真も字も読めない（880pxの読み物幅で3列＝1列およそ284px）。
 * ★minmax(0, 1fr)。★0 を入れないと、中身が長い1件が列を押し広げて
 *   3列の幅がそろわなくなる。 */
.brag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  /* ★★行の高さをそろえない。そろえると、1枚だけ縦に長い写真があったとき
   *   **その行のカードが全部そこまで伸びる**（下が空いたカードが並ぶ）。 */
  align-items: start;
}
/* ★★どの幅でも3列（2026-08-27）。★狭い画面でも減らさない。
 *   ★ただし390pxの画面では1列110px＝ひとことが**1行6文字**にしかならない。
 *     文章として読めないので、狭いときは**写真の格子**に切り替える（下の @media）。 */

/* ★★縦に積む（2026-08-27）。日付 → お名前 → ひとこと → 写真 → いいね。
 *
 * ■ ★★写真の高さは**必ず抑える**（ここが要）
 *   出てくる写真は、ほとんどがスマホの画面をそのまま撮ったもの＝**縦長**。
 *   カードの幅いっぱいに出すと、1枚で高さが幅の2倍を超える。
 *   ★以前これで**写真の柱**になり、ひとことが読まれなくなった（2026-08-26）。
 *     そのときは写真を左の 1/3 に寄せて逃げたが、縦積みではその手が使えない。
 *   ∴ **高さを決め打ちにして切り抜く**（下の .brag-img）。
 *   ★切り抜いても損はしない。一覧の写真は「ここに写真がある」を示す札で、
 *     中身を読むのは**押して開いたモーダル**のほう。 */
.brag-c {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--ink2);
  overflow: hidden;          /* ★角丸から写真がはみ出さないように */
}

/* ★写真を包むリンク（押したら大きく見る）。★寸法はこちらが持つ。
 *   ★縦積みになったので幅はカードいっぱい。高さは中の img が決める。 */
.brag-open {
  display: block;
  position: relative;        /* ★枚数の数字を乗せる土台 */
  flex: none;
  width: 100%;
  line-height: 0;            /* ★a の行送りぶんの隙間を消す */
}

/* ★★2枚以上あるときの枚数（白い数字）。
 *   ★写真の**上に乗せる**。横に置くと、カードの狭い幅をさらに削る。
 *   ★白い字だけでは、白い画面のキャプチャに乗ったとき消える。
 *     ∴ 黒の半透明を敷き、影も付ける。**どんな写真の上でも読めること**。 */
.brag-n {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
  font-variant-numeric: tabular-nums;
}
.brag-img {
  display: block;
  width: 100%;               /* ★包み（.brag-open）いっぱい＝カードの幅 */
  /* ★★高さを決め打ちにする（2026-08-27）。**縦長の写真を切り抜く**。
   *   ★HTML側で width/height を渡しているが、それは「落ちてくるまで
   *     場所を空けておく」ため。実際に出す大きさはこちらで決める。
   *   ★170px。3列（1列およそ284px）で 16:10 くらいに収まる寸法。
   *     ★これより高くすると、24件並んだときにまた写真の柱になる。
   *     ★これより低いと、何が写っているのか分からない札になる。
   * ★cover。★contain にすると縦長の写真が細く中央に立って、
   *   左右が地のまま**余白の帯**になる（切り抜くほうが札として素直）。
   * ★object-position は中央のまま。画面写真は上に日付、下に配当が
   *   来ることが多く、**どちらかに寄せると片方を必ず捨てる**ことになる。 */
  height: 170px;
  object-fit: cover;
  background: var(--ink3);   /* ★落ちてくるまでの地。真っ黒の穴を作らない */
}
/* ★押せることが分かるように、触れたら少しだけ明るくする。
 *   ★枠や虫めがねは足さない。飾りが写真を食う。 */
.brag-open:hover .brag-img { opacity: .85; }
.brag-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ★日付・お名前・ひとこと。★写真より**上**に来る（誰のいつの話か、が先）。
 * ★★余白を広げた（2026-08-27）。★3列にして1枚が小さくなったぶん、
 *   同じ余白では字が縁に張り付いて窮屈に見えていた。
 *   ★枠が小さいほど、中の余白は**相対的に効く**。詰めるより開けるほうがよい。 */
.brag-cap {
  display: flex;
  /* ★min-width:0。★これが無いと長い語や数字の並びでカードの外へ溢れる。 */
  min-width: 0;
  flex-direction: column;
  padding: 13px 14px 14px;
}
.brag-body {
  /* ★お名前の行から少し離す。★くっついていると、ひとことが
   *   名前の続きに読める（誰の言葉かは分かるが、別の行として立たない）。 */
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--t1);
  /* ★★改行を残さない（サーバ側で空白に潰してある）が、
   *   長い1語で横に溢れることはある。折る。 */
  overflow-wrap: anywhere;
  /* ★★3行で切る（2026-08-27）。★3列にしたので1列がおよそ284pxしかなく、
   *   100文字のひとことは7行を超える。カードごとに高さが大きく違うと、
   *   格子が**がたついて読み流せない**。
   *   ★消すのではなく畳むだけ。全文は押して開いたモーダルで読める。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* ★日付とお名前は**同じ行**。★日付が先（ご指定の並び）。
 *   ★お名前は長いと切る。日付のほうは幅が決まっているので切らない。
 * ★★大きさは 日付 < お名前。★お名前は**誰の話か**という中身なので、
 *   添え字（日付）や道具（消す・知らせる）より大きく置く。 */
/* ★★[ 日付・お名前 ] …… [ 印 ] の1行（2026-08-27）。
 *   ★印（消す／知らせる）は**お名前の右端**。置き場所そのものが
 *     「この人の投稿に対する操作」だと言う。 */
.brag-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--t3);
}
/* ★日付とお名前のまとまり。★包んであるので、狭い画面で縦に積んでも
 *   印だけは右端に残る（積まれない）。 */
.brag-by {
  display: flex;
  align-items: baseline;
  /* ★日付とお名前の間も広げる。詰まっていると1つの語に見える。 */
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.brag-nick {
  min-width: 0;
  overflow: hidden;
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brag-time { flex: none; }

/* ★いいねと操作。★カードのいちばん下。★上に線を引いて、
 *   読むところ（ひとこと・写真）と押すところを分ける。
 *
 * ★★いいねを**左右の中央**に置く（2026-08-27）。
 *   ★横並び（flex）のままでは中央に来ない——右の「消す・知らせる」の
 *     幅ぶんだけ左へずれる。しかもその幅は文言で変わる（消す／知らせる）。
 *   ★∴ 3つの枠で組む: [空き] [いいね] [消す・知らせる]。
 *     両端の枠を同じ 1fr にすれば、**右に何が来ても真ん中は動かない**。 */
.brag-acts {
  /* ★★いいねだけの帯になったので、素直に中央へ（2026-08-27）。
   *   ★消す・知らせるはお名前の右へ移した。3つの枠で真ん中を守る必要はもう無い。 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;          /* ★中身の量が違っても、ここは必ず底に着く */
  /* ★★余白を広げた（2026-08-27）。★いいねは**押すもの**なので、
   *   縁との間が無いと押し間違えそうに見える（実際、指の腹は縁をまたぐ）。
   *   ★上下を等しくする。下だけ狭いと、ボタンが底に落ちて見える。 */
  padding: 10px 12px;
  border-top: 1px solid var(--edge);
}
.brag-like { margin: 0; }

/* ================================================ 狭い画面は「写真の格子」
 * ★★3列は保つが、1列110pxではひとことが1行6文字にしかならない。
 *   ∴ 文章を出すのをやめ、**写真を並べて見せる**形に切り替える。
 * ★★ひとことは消えるのではなく**モーダルへ移る**（js/brag.js の .bl-cap）。
 *   ★これが無いと、投稿の言葉をどこからも読めなくなる。切り替えの前提。
 * ★境目は560px。★css/page.css の .app が広がるのと同じ値を使う——
 *   新しい境目を増やすと、どこで何が変わるのか追えなくなる。 */
@media (max-width: 559px) {
  /* ★写真をいちばん上へ。★格子では写真が主役で、字は添え物。 */
  .brag-open { order: -1; }
  /* ★正方形に近い札にする。★高さを決め打ちにすると、
   *   列幅が変わったときに縦横比が崩れる。比で持たせる。 */
  .brag-img { height: auto; aspect-ratio: 1; }
  /* ★★ひとことは出さない（1行6文字では文章にならない）。
   *   ★HTMLには残す。読み上げと検索には届くし、押せばモーダルで読める。 */
  .brag-body { display: none; }
  /* ★狭くても縁から離す。★1列110pxしかないぶん、
   *   ここが詰まっていると札が「印刷ミス」のように見える。 */
  .brag-cap { padding: 8px 8px 2px; }
  /* ★日付とお名前は縦に積む。横に並べると、どちらも切り詰められて読めない。
   *   ★狭くても**お名前のほうを大きく**保つ（誰の話かが中身）。 */
  /* ★★日付とお名前は縦に積み、印は**右端に残す**。
   *   ★.brag-by で包んであるので、積まれるのは中の2つだけ。
   *   ★印まで一緒に積むと、110pxの札が縦に伸びて写真が押し出される。 */
  .brag-meta { gap: 4px; }
  .brag-by {
    display: block;
    font-size: 10px;
    line-height: 1.6;        /* ★縦に積むので行送りで離す */
  }
  .brag-nick { display: block; font-size: 12px; }
  /* ★狭いぶん的も少し小さく。★それでも24pxは残す（指で押せる下限に近い）。 */
  .brag-mini-b { width: 24px; height: 24px; }
  .brag-mini-b .ic { width: 14px; height: 14px; }
  /* ★いいねと通報は**残す**。★通報を消さないこと——
   *   写り込み（会員番号・氏名）に気づくのは、たまたま見た人。
   *   その人のほとんどが狭い画面で見ている。 */
  /* ★狭いときは3つの枠を作れない（1列110px）。★いいねを1行に、
   *   消す・知らせるをその下に置く。どちらも中央にそろえる。 */
  /* ★いいねだけの帯なので、狭くても1行のまま中央。 */
  .brag-acts { padding: 9px 6px 10px; }
  .brag-like-b { padding: 5px 10px; gap: 6px; }
  .brag-like-n { min-width: 1.8em; }
}

/* いいね。★押し放題なので、押した手応えを強く返す。
 * ★★窮屈だったので広げた（2026-08-27）。
 *   ★指で押すものは 44px 角が目安。錠剤型なので高さで確保する（min-height）。
 *   ★横の余白も増やす。心臓と数字が縁にくっついていると、
 *     数字が増えて桁が伸びたときに詰まって見える。
 *   ★数字の幅を先に取る（min-width）。0→1→10 と桁が変わるたびに
 *     ボタンの幅が動くと、連打している指の下で的が動く。 */
.brag-like-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* ★上下は詰める。★横は残す——心臓と数字が縁にくっつくと窮屈に見える。 */
  padding: 5px 14px;
  /* ★★押しっぱなしで数えるので（js/brag.js）、長押しの邪魔になるものを外す。
   *   ★user-select … 押し続けると字が選択されて青く反転する
   *   ★touch-callout … iOSで「コピー」の吹き出しが出る
   *   ★touch-action … 二度押しの拡大を待たない（押した反応が速くなる）
   *   ★どれも**押しっぱなしを始めて初めて出てくる**邪魔。 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  border: 1px solid var(--line);
  border-radius: 999px;      /* ★ここだけ錠剤型。押すためのものだと形で伝える */
  background: var(--ink3);
  color: var(--t2);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.brag-like-b svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: var(--yen3);         /* ★心臓は常に赤。押す前から「そういうもの」と分かる */
}
.brag-like-b:hover { border-color: var(--line2); }
/* ★桁が増えても幅が動かないように、先に場所を取る（3桁ぶん）。 */
.brag-like-n { min-width: 2.2em; text-align: left; font-variant-numeric: tabular-nums; }

/* ★跳ねる。js/brag.js が押すたびに付け直す。 */
@keyframes brag-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.brag-like-b.pop svg { animation: brag-pop .28s ease-out; }
/* ★動きを減らす設定の人には動かさない。 */
@media (prefers-reduced-motion: reduce) {
  .brag-like-b.pop svg { animation: none; }
}

/* 消す・知らせる。★添え字の大きさに落とす——主役ではない。
 * ★★お名前と大きさを入れ替えた（2026-08-27）。
 *   ★狭い画面では お名前10px ／ このリンク12px と**逆転**していた。
 *     お名前は**中身**（誰が出したか）、こちらは**道具**。
 *     道具のほうが大きいと、目がそちらへ行く。
 *   ★押せる範囲は字の大きさとは別に確保する（padding を足した）。
 *     小さくしたぶん押しにくくなる、を起こさない。 */
.brag-mini { margin: 0; flex: none; }
/* ★★字ではなく**印**にした（2026-08-27）。★理由は inc/brag.php の印の説明。
 *   ★押せる範囲は印より広く取る（28px角）。印は 1.05em＝およそ12pxなので、
 *     そのままでは指で狙えない。★見た目を大きくせずに的だけ広げる。 */
.brag-mini-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--t3);
  font: inherit;
  cursor: pointer;
}
/* ★触れたら地を敷く。★印だけだと押せるものだと気づかれにくい。 */
.brag-mini-b:hover { background: var(--ink3); color: var(--t2); }
.brag-mini-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brag-mini-b .ic { width: 15px; height: 15px; margin: 0; }

.brag-more { margin: 18px 0 0; }

/* ================================================================ 写真を見る
 * ★★モーダル（js/brag.js が組み立てる）。
 *
 * ★横スワイプは scroll-snap に任せている。指の速さ・慣性・端の抵抗を
 *   自分で書くと、必ずどこかで端末ごとの癖に負ける。
 *   ★ここでの決まりは3つだけ:
 *     ・帯は横スクロール（overflow-x: auto）
 *     ・1枚ぶんでぴたりと止まる（scroll-snap-type: x mandatory）
 *     ・1枚は必ず画面いっぱい（flex: 0 0 100%）
 */
.bl {
  position: fixed;
  inset: 0;
  /* ★★重なりの順（2026-08-26に直した）:
   *   ヘッダー 10 ／ 期間の選択 20 ／ **写真 30** ／ 通知（flash）40
   *   ★90 にしていた。**通知より前に出てしまう**——写真を開いている最中に
   *     通知が来ると、OKのボタンが写真の裏に隠れて**押せなくなる**。
   *   ★通知は「一度手を止めさせる」ためのもの。何よりも前に出ること。 */
  z-index: 30;
  display: flex;
  background: rgba(0, 0, 0, .92);
}
.bl[hidden] { display: none; }

/* ★★開いている間、後ろを動かさない。動くと、閉じたときに
 *   読んでいた場所を見失う（とくにiOS）。 */
body.bl-on { overflow: hidden; }

.bl-track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* ★iOSで指を離したあとの慣性を残す。 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* ★横棒は出さない（1枚ずつ止まるので要らない） */
}
.bl-track::-webkit-scrollbar { display: none; }

.bl-s {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  /* ★★上下に逃げを作る。★上は**×のぶん**（10px + 44px）より広く取る——
   *   写真の上に×が乗ると、白い画面写真では×が見えなくなる。
   *   ★下は点（bl-dots）のぶん。 */
  padding: 62px 16px 46px;
}
.bl-s img {
  /* ★★横は最大90%（2026-08-27）。
   *   ★残りの5%ずつが「写真の外」＝**押して閉じられる場所**になる。
   *     100% だと逃げが左右8pxしか無く、閉じるのに何度も狙う羽目になる。
   *   ★実測: 390pxの画面で写真は最大337px、外側が左右それぞれ26px。 */
  max-width: 90%;
  /* ★★高さは親（.bl-s）の内側にぴたりと収める。
   *
   * ■ ★以前は calc(100dvh - 96px) と書いていた。**これが壊れていた**。
   *   ★dvh が分かるのは Safari 15.4 以降。それより古い端末では
   *     **calc() ごと無効**になり、max-height の指定が丸ごと消える
   *     （CSSは1つでも読めない値があると、その行を黙って捨てる）。
   *   ★max-height が消えると、縦長の画面写真が**そのままの大きさ**で出る。
   *     ＝画面いっぱいになり、外を押す余地も×を押す余地も無くなる。
   *     ★エラーは出ない。新しい端末では正しく出るので、気づけない。
   * ■ ★∴ 単位に頼らず**親の内側の100%**にする。
   *   .bl は position:fixed / inset:0 なので、その高さは**見えている画面そのもの**。
   *   .bl-track も .bl-s も伸びて同じ高さになるから、100% は常に正しい。
   *   ★上下の余白（padding）を変えても、ここを直さなくて済む。 */
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* 閉じる・矢印。★どれも指で押せる大きさ（44px）にする。 */
.bl-x,
.bl-prev,
.bl-next {
  position: absolute;
  /* ★★写真より必ず前に出す（2026-08-27）。
   *   ★重なりの決まりでは、位置を持つ要素（absolute）は
   *     位置を持たない写真より後に描かれる——**はずだった**。
   *     ところが写真が画面いっぱいまで伸びると（上の max-height の話）、
   *     ×は写真の上に重なり、白い画面写真では**白い×が消える**。
   *   ★∴ 順番は数で決めておく。1行で済み、読めば意図が分かる。
   *   ★.bl 自体が z-index:30 の中なので、この 1 は**モーダルの中だけ**の順番。
   *     通知（flash, 40）との上下関係は変わらない。 */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  /* ★★地は**黒**、縁は白。★白い半透明にしていたが、
   *   下に白い画面写真が来ると**丸ごと見えなくなる**。
   *   ★黒の地なら白い写真の上でくっきり出る。92%黒の背景の上では
   *     地が沈むので、白い縁が輪郭を作る。**どちらの下でも見える**。 */
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.bl-x:hover,
.bl-prev:hover,
.bl-next:hover {
  background: rgba(0, 0, 0, .8);
  border-color: rgba(255, 255, 255, .8);
}
.bl-x[hidden],
.bl-prev[hidden],
.bl-next[hidden] { display: none; }

.bl-x {
  top: max(10px, env(safe-area-inset-top));   /* ★ノッチに潜らせない */
  right: 10px;
  font-size: 26px;
}
.bl-prev,
.bl-next {
  top: 50%;
  margin-top: -22px;
  font-size: 30px;
}
.bl-prev { left: 8px; }
.bl-next { right: 8px; }

/* ★★ひとこと（2026-08-27に足した）。
 *   ★狭い画面の一覧は写真の格子で、ひとことを出していない。**ここが唯一の
 *     読める場所**なので、必ず出す（js/brag.js が textContent で入れる）。
 *   ★点（bl-dots）の上に置く。点は写真の位置を示すもので、こちらは中身。
 *   ★写真の外なので、押せば閉じる（track の外＝背景の扱い）。
 *   ★地を敷く。白い写真の上に白い字を直に置くと読めない。 */
.bl-cap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 24px));
  z-index: 1;                /* ★写真より前（×や矢印と同じ理由） */
  max-width: min(90%, 560px);
  padding: 8px 14px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}
.bl-cap[hidden] { display: none; }

/* いま何枚目か。★矢印だけだと、あと何枚あるのかが分からない。 */
.bl-dots {
  position: absolute;
  z-index: 1;                /* ★×や矢印と同じ。写真より前（理由は上） */
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 0;
  display: flex;
  justify-content: center;
  gap: 7px;
  width: 100%;
}
.bl-dots[hidden] { display: none; }
.bl-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transition: background .18s, transform .18s;
}
/* ★★いま見ている1枚。
 * ★色は --accent（明るいほうのブランドの青）。**--brand は使わない**——
 *   #1B4A96 は暗すぎて、92%黒の地の上ではほとんど見えない
 *   （地との明暗差がおよそ1.3倍。8pxの点には足りない）。
 * ★色だけで区別しない。**大きさも変える**——
 *   色の見分けがつきにくい人にも、いま何枚目かが伝わるように。 */
.bl-dots i.on {
  background: var(--accent);
  transform: scale(1.35);
}
@media (prefers-reduced-motion: reduce) {
  .bl-dots i { transition: none; }
}

/* ★狭い画面では矢印を端に寄せる。写真の上に大きく被らせない。
 *   ★左右の余白（padding）は詰めるが、**上下は詰めない**——
 *     上は×のぶん、下は点のぶんで、どちらも狭い画面ほど要る。
 *   ★横は max-width:90% が別に効くので、padding を詰めても
 *     写真の外（押して閉じられる場所）は残る。 */
@media (max-width: 480px) {
  .bl-s { padding: 62px 8px 46px; }
  .bl-prev { left: 4px; }
  .bl-next { right: 4px; }
}