/* 施工事例の「足し前」だけを書くCSS（2026-09-14）
 *
 * 🚨 なぜ st-works.css とは別の1枚なのか（本番実測 2026-09-14）
 *    公開 1,468本のうち 1,463本は、記事本文の中に自前の <style>（v2.2）を持っている。
 *    その記事には st-works.css（v3）が配られない（st-works-style.php が意図してそうしている。
 *    二重に当たると見た目が混ざるため）。
 *    だからこの1枚には **v2.2 にも v3 にも無い、新しい指定だけ** を書く。
 *    既存の見た目（余白・書体・色・並び）は1ミリも変えない。ここに既存の指定を
 *    上書きする行を足してはいけない。
 */

/* ── 1. 写真をクリックで拡大できるようにした分の見た目 ──────────────── */
.stw-zoom { display: block; cursor: zoom-in; }
/* リンクで包んだことでテーマの下線や色が付かないようにする */
.stw-zoom, .stw-zoom:hover, .stw-zoom:focus { border: 0; text-decoration: none; background: none; }
.stw-zoom img { display: block; }

/* ── 2. 拡大の窓 ───────────────────────────────────────────────── */
.stw-lb {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
}
.stw-lb.is-open { display: flex; }
.stw-lb[hidden] { display: none; }
.stw-lb__img {
  max-width: 96vw; max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  border: 0; border-radius: 0; background: none;
}
.stw-lb button {
  position: absolute; z-index: 1;
  background: rgba(255,255,255,.14); color: #fff;
  border: 0; border-radius: 8px; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 12px 17px;
  -webkit-appearance: none; appearance: none;
}
.stw-lb button:hover { background: rgba(255,255,255,.26); }
.stw-lb__close { top: 14px; right: 14px; }
.stw-lb__prev  { left: 12px;  top: 50%; transform: translateY(-50%); }
.stw-lb__next  { right: 12px; top: 50%; transform: translateY(-50%); }
.stw-lb__count {
  position: absolute; bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  margin: 0; color: #fff; font-size: 13px; letter-spacing: .04em;
}
@media (max-width: 600px) {
  .stw-lb__img { max-width: 100vw; max-height: 82vh; }
  .stw-lb button { font-size: 22px; padding: 10px 14px; }
  .stw-lb__prev, .stw-lb__next { top: auto; bottom: calc(48px + env(safe-area-inset-bottom)); transform: none; }
}


/* 拡大中は背面を動かさない。html の inline style を書き換えず、目印だけで止める
 * （他の機能が同じ場所を使っていると、閉じたときにそちらの状態まで消してしまうため）。*/
body.stw-lb-open { overflow: hidden; }

/* ── 3. 終わったサービスの共有ボタンを消す ───────────────────────────
 * Google+ は 2019 年、Pocket は 2025 年にサービスが終わっている。
 * 押しても行き先が無いボタンが並んでいると「何年も手が入っていない店」に見える。
 * テーマの雛形は触らず、表示だけ止める。
 */
li.googleplus, li.pocket { display: none !important; }

/* ── 4. スマホの追従バーの安全余白 ──────────────────────────────────
 * いまは body に padding-bottom:60px !important が入っているが、
 * iPhone の画面下のホームバーの分が入っていないので、その端末だけ
 * 本文の最後の行がバーの下に潜る。env() は対応していない端末では 0 になるので、
 * 従来の 60px はそのまま残る（＝他の端末の見た目は変わらない）。
 * 2026-09-14 実測: 本番の viewport に viewport-fit=cover が入っているので env() は効く。
 * body より1段強い html body で書き、読み込み順に関係なく効かせる。
 */
@media (max-width: 991px) {
  html body { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
  .st-works-sp-footer { padding-bottom: env(safe-area-inset-bottom); }
}