/* ============================================================
   ソリティア ― 見た目（T66・コーダ）
   ------------------------------------------------------------
   ・色・かたち・丸ゴシックは 既存6本と そろえてある（設計図 §9.5）。
   ・カードの ひりつ 419:635（2:3）は ぜったいに くずさない（設計図 §9）。
   ・ポーカー T57・スピードの 形に そろえる ―― 進み具合バー・常設の
     解説パネル・たしかめ用の 箱は 1つも 作らない（設計図 §5.5 の上限）。
   ・遊んでいる間の ボタンは **2つだけ**（もどす／新しく 配る・仕様 §4-5）。
     どちらも 上の帯の 中。場札の 邪魔を しない。

   ★★ 寸法の 決めごと（仕様 §1-3・ここを 間違えると 全部 こわれる）★★
     1000×900 で 札の 大きさを 決めているのは **横では なく たて**。
     横は 309px 余るが、そこを 見て 札を 大きく すると
     19枚の 列が はみ出して スクロールが 出る。
     → だから 札の 大きさは CSS では 決めない。
       game.js の layout() が **場札エリアの 実際の たて** から 計算する。
       CSS が 決めるのは「器の かたち」だけ。
     → この 作りなら、器の たてが 何px でも
       「19枚の 列が はみ出さない」ことが 計算で 保証される。

   ・1000×900・375px・320px の どれでも スクロールを 出さない（社長の 要望）。
   ・仕上げは 🎨アトが やります。部品ごとに 見出しを 入れてあります。
   ============================================================ */

:root {
  --ink:#463c52;
  --pink:      #FF8CB8;
  --pink-deep: #E94F8A;
  --pink-dark: #C43A73;
  --pink-soft: #FFE3EF;
  --white:     #ffffff;
  --cream:     #fff9ea;
  --gold:      #F1A426;
  --gold-soft: #FFE690;
  --mint:      #6FC98C;
  --mint-soft: #DCF6E4;
  --blue-soft: #DDF3F7;

  --font-main:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN W4","M PLUS Rounded 1c","Rounded Mplus 1c","BIZ UDPGothic","Yu Gothic UI","Hiragino Sans","Noto Sans JP",Meiryo,system-ui,sans-serif;

  /* ★ 札の 大きさは game.js が 入れる（CSS からは 決めない・上の 説明を 読むこと）*/
  --cw: 48px;
  --ch: 73px;
  --radius: 6px;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; min-width:320px; color:var(--ink); font-family:var(--font-main);
  background:linear-gradient(180deg,#bcebf0 0 190px,#fff7e8 190px);
  overflow:hidden;                     /* ★ スクロールは ぜったいに 出さない */
  overscroll-behavior:none;            /* ★ 指で 運ぶ 間、引っぱって 読み込み直しに ならない（T67）*/
  -webkit-text-size-adjust:100%;
  -webkit-touch-callout:none;          /* ★ 長おしの メニューを 出さない（T67）*/
}
button { font-family:inherit; cursor:pointer; }
.hidden { display:none !important; }
.sprite-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ★ たて 1画面ぴったりに 積む。場札だけが のびちぢみ する。 */
.app-shell {
  height:100vh; height:100svh;
  max-width:1000px; margin:0 auto; padding:8px 10px;
  display:flex; flex-direction:column; gap:8px;
}

/* ── 上の帯（もどる ／ 名前 ／ 遊んでいる間の ボタン 2つ）──────── */
.topbar { flex:0 0 auto; display:flex; align-items:center; gap:6px; min-height:38px; }
.back {
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:36px; padding:0 12px;
  background:var(--white); border:3px solid var(--pink-soft); border-radius:999px;
  color:var(--pink-dark); font-weight:900; font-size:13px; text-decoration:none; white-space:nowrap;
}
/* ★★ T368 ―「◀」の 見えない 押し代（★フリーセル T118 の `.tool::after` の 型）★★
   ★ T367 で 34.5×36（たて）／114×36（よこ）・13画面とも 44 割れ。★見た目は 1pxも 変えない。★的だけ 44×44 以上。
   ★ 左は ふち（3px）の 外がわで 止める（★まん中ぞろえ だと はば320 で 画面の 左から 出て 42px）。★のびる 先は 帯の 地と 題の 字だけ。
   ⚠️★ `position:relative; z-index:1` が 無いと あとの 兄弟が 押し代を 上書きする（T273 §4-1）。 */
.back { position:relative; z-index:1; }
.back::after {
  content:''; position:absolute; left:-3px; top:50%;
  width:max(calc(100% + 6px), 44px); height:44px; transform:translateY(-50%);
}
.back:hover { border-color:var(--pink); }
.brand { flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; }
.brand-cat { width:30px; height:23px; flex:0 0 auto; }
.brand span { font-weight:900; font-size:16px; color:#3f5a70; white-space:nowrap; }

.tools { flex:0 0 auto; display:flex; gap:6px; }
.tool {
  min-height:36px; padding:0 13px; border-radius:999px; white-space:nowrap;
  background:var(--white); border:3px solid var(--gold-soft);
  color:#7a5205; font-size:13px; font-weight:900;
}
.tool:hover { border-color:var(--gold); }
.tool:active { transform:translateY(2px); }
.tool[disabled] { opacity:.4; cursor:default; transform:none; }

/* せまい 画面では もどる の 文字を たたんで ◀ だけに する
   （4つ ならぶ ので、320px でも 折り返さない ように）*/
@media (max-width:520px) {
  .back span { display:none; }
  .back { padding:0 11px; }
  .brand span { font-size:15px; }
  .tool { padding:0 10px; font-size:12.5px; border-width:2px; }
}
@media (max-width:360px) {
  .app-shell { gap:6px; }
  .brand-cat { display:none; }
  .brand span { font-size:13px; }
  .tool { padding:0 8px; font-size:12px; }
}

/* ── はじめの 画面 ──────────────────────────────
   ★ 社長裁定2：難しさは 選ばせない。プルダウンは 1つも 置かない。 */
.title-screen {
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  padding:24px 18px; background:var(--white); border:5px solid var(--pink-soft); border-radius:26px;
  text-align:center; box-shadow:0 7px 0 rgba(196,58,115,.10); min-height:0;
}
.title-lead { margin:0; font-size:clamp(17px,4.4vw,23px); font-weight:900; color:#5a4a63; line-height:1.6; }
.start-button {
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  min-width:250px; padding:15px 26px; border:none; border-radius:999px;
  background:var(--pink-deep); color:#fff; box-shadow:0 6px 0 var(--pink-dark);
  font-size:20px; font-weight:900;
}
.start-button small { font-size:12px; font-weight:700; opacity:.9; }
.start-button:active { transform:translateY(3px); box-shadow:0 3px 0 var(--pink-dark); }

/* ── 遊ぶ 画面（場札エリア）────────────────────────
   ★ .board が のこり ぜんぶを もらう。その 実寸を game.js が 測って
     札の 大きさを 決める（＝ 19枚の 列が 絶対に はみ出さない）。 */
.play-screen { flex:1 1 auto; min-height:0; display:flex; }
.board {
  flex:1 1 auto; min-height:0; min-width:0; display:flex;
  padding:6px; border-radius:20px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 8px), #82ce84;
  border:4px solid #3f863f; box-shadow:0 6px 0 rgba(86,53,38,.18);
}
.board-in { position:relative; flex:1 1 auto; min-width:0; min-height:0; }

/* ★★ 指で 運んでいる 間、ページを 1mmも 動かさない（T67・社長指示）★★
   touch-action:none を 置かないと、指を 動かした 瞬間に ブラウザが
   「これは 画面を すべらせる 指だ」と 決めて、pointermove を くれなく なる。
   ＝ スマホで 札が 運べなく なる。ここは 消さない こと。 */
.board, .board-in, .spot, .card { touch-action:none; }

/* ★ スマホでは 器の わくを 削る（仕様 §1-3 の 札の はばを 守る ため）
   ------------------------------------------------------------
   ルルの 寸法（375px→48px ／ 320px→42px）は **わくを 0 で 数えた 数字**。
   わくを ふつうに 付けると 375px で 45px まで 落ちた（実測）。
   札の はばは 指で おす 大きさ そのもの なので、わくの ほうを 削る。
     375px … 余白4＋わく3＋内3 ＝ 片側10px → 中身 355px → 札 48px ✅
     320px … 余白3＋わく2＋内2 ＝ 片側 7px → 中身 306px → 札 42px ✅ */
@media (max-width:520px) {
  .app-shell { padding:6px 4px; }
  .board { padding:3px; border-width:3px; border-radius:14px; }
}
@media (max-width:340px) {
  .app-shell { padding:6px 3px; }
  .board { padding:2px; border-width:2px; border-radius:11px; }
}

/* 置き場の 下じき（山札・めくった札・組札4つ・場札7列）*/
.spot {
  position:absolute; left:0; top:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
  background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);
  color:rgba(255,255,255,.6); font-weight:900; line-height:1;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.spot.is-stock { cursor:pointer; }
/* 山札が 空に なった ときの「まぜ直せるよ」の 目じるし（文字は 足さない）*/
.spot.is-stock::after {
  content:"↻"; font-size:calc(var(--cw) * .5); color:rgba(255,255,255,.55);
}
.spot.no-recycle::after { content:""; }

/* 札1枚。位置は transform だけで 動かす ので、動きが そのまま アニメに なる。
   ★ 2枚がさね に して ある：
     外（.card）… 置き場所（transform）。ここに 動く アニメが かかる
     内（.card-in）… 中身（絵）。外の 置き場所を 上書きしない ため
   分けて おくと、中身に 何を 足しても 札が 左上に 飛ぶ 事故が 起きない。 */
.card {
  position:absolute; left:0; top:0; width:var(--cw); height:var(--ch);
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  cursor:default;
  transition:transform .18s cubic-bezier(.3,.7,.4,1);
}
.card:not(.is-down) { cursor:grab; }        /* 表向きは つまめる */
.card.as-stock { cursor:pointer; }          /* 山札は おすと めくれる */
.card-in { position:absolute; inset:0; border-radius:var(--radius); }
.card img {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  border-radius:inherit; box-shadow:0 2px 0 rgba(86,53,38,.22);
  -webkit-user-drag:none;                   /* ★ パソコンの「画像の 引きずり」を 止める */
  pointer-events:none;                      /* 当たり判定は .card に まかせる */
}
.card .cf { opacity:1; }
.card .cb { opacity:0; }
.card.is-down .cf { opacity:0; }
.card.is-down .cb { opacity:1; }
.board.no-anim .card { transition:none; }

/* ★★ 運んでいる 札（T67・社長指示）★★
   ------------------------------------------------------------
   すべる 動きを 切って、指に **ぴったり** ついてくる ように する。
   ここが この ゲームの 主役の 手ざわり ―― 遅れた 瞬間に 別物に なる。
   ★ 見せ方は これ 1つだけ（設計図 §5.5）。
     「置ける ところを 光らせる」は **作らない** ―― 置ける場所を
     プログラムが 教えたら、社長が 消せと 言った「ひらめきを 奪う」に 逆もどり。
     置けなかった ときは、すべる 動きが 戻って **元の 場所へ すっと 帰る**。
   ⚠️ 色を 変えない・光らせない・大きく しない。持ち上がった かげ だけ。 */
.card.is-drag { transition:none; cursor:grabbing; }
.card.is-drag img { box-shadow:0 7px 13px rgba(86,53,38,.34); }

/* ★★ すべっている 途中の 札は おせない（T69・🔴1）★★
   ------------------------------------------------------------
   めくった 札が 山札 → めくり場 へ すべる 0.18秒の あいだ、その札は
   まだ 山札の 上に かぶさって いる。連打の 2発目が その「飛んでいる 札」に
   当たって、山札が めくれない ／ 3発目で 2回おしが 成立して 札が 勝手に
   組札へ 上がる、が 起きていた（トライ T68 🔴1）。
   通り道を ふさがない ように するだけ ―― 見た目は 1mmも 変えない。 */
.card.is-fly { pointer-events:none; }

/* 画像が 届かなかった ときだけ 出る 下じき（画面が 白く ならない ように）。
   ふだんは 一度も 出ない ―― 支給画像は 55枚 そろっている。 */
.fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:inherit; background:#fff; border:2px solid #d9cfe0;
  font-size:calc(var(--cw) * .3); font-weight:900; line-height:1;
}
.fallback.red { color:#d8395f; } .fallback.black { color:#3a3a46; }

/* ── ハッピー ＋ ふきだし ＋ 遊び方（画面の 一番下・1行）──── */
.log-row {
  position:relative; z-index:75;      /* ★ 札が 降っても ハッピーは 見えたまま */
  flex:0 0 auto; display:flex; align-items:center; gap:9px;
  padding:6px 10px; background:var(--white); border:3px solid var(--pink-soft); border-radius:18px;
}
.happy-wrap { flex:0 0 auto; text-align:center; }
.happy-cat { width:42px; height:32px; display:block; }
.happy-name { margin:0; font-size:10px; font-weight:900; color:#c9a24a; }
.happy-bubble {
  flex:1 1 auto; margin:0; min-width:0;
  font-size:14.5px; font-weight:900; color:#5a4a63; line-height:1.45;
  /* ★ T69・🟡10：375px で「52枚を きれ／いに そろえよう！」と
     ことばの まん中で 折れて いた。日本語は ふつう どこでも 折り返せる ので、
     keep-all で 文字と 文字の 間では 折らせず、**言葉の 間の スペースだけ**を
     折り返し どころに する（画面の 言葉は 1文字も 変えない）。
     ⚠️ ふきだしの 言葉は 全部 分かち書き なので、折り返し どころは 必ず ある。 */
  word-break:keep-all;
}
.howto {
  position:relative;                   /* ★T118：下の 押し代（::after）の 親 */
  flex:0 0 auto; padding:8px 12px; border-radius:999px;
  background:var(--white); border:3px solid var(--pink-soft);
  color:var(--pink-dark); font-size:12.5px; font-weight:900; white-space:nowrap;
}
/* ★★ T289 ― ★見えない 押し代（★T118 の 型・★フリーセルの `.howto::after` を そのまま 写した）★★
   ★ わけ … ★T288 で 数えたら、この ボタンは 12画面 ぜんぶで **30〜35px**でした（★44px 割れ）。
   ★ 直しかた … ★**見た目は 1pxも 太らせない。★的だけ 44px に する。**
                ★箱も 帯も 盤も 1pxも 伸びません（★`::after` は ならびに 入らない）。
   ⚠️★ よこには 広げない（`left:0;right:0`）―― ★広げると となりの ボタンの 的を 取ります。
   ⚠️★ 高さは **44px と 決め打ち**して まん中ぞろえ。★±4px と 書くと ふちの 太さぶん 足りません
        （★フリーセルの 書き置き・375px で 40px しか 出なかった【実測】）。 */
.howto::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}
.howto:hover { border-color:var(--pink); }
@media (max-width:360px) {
  .happy-cat { width:34px; height:26px; }
  .happy-bubble { font-size:12.5px; }
  .howto { padding:7px 9px; font-size:11.5px; border-width:2px; }
  .log-row { padding:5px 7px; gap:6px; }
}

/* ハッピーが とびはねる（勝った ときだけ・仕様 §6-1）*/
@keyframes happyJump {
  0%,100% { transform:translateY(0) rotate(0); }
  30% { transform:translateY(-9px) rotate(-7deg); }
  60% { transform:translateY(0) rotate(5deg); }
}
.happy-cat.is-jump { animation:happyJump .5s ease-in-out 6; }

/* ── 札が 降る 演出（仕様 §6-1・社長裁定3）──────────────
   canvas に 消さずに 描きつづける ので、あの おなじみの 帯が のこる。
   タップで 飛ばせる ／ 6秒で かってに 止まる（game.js）。 */
.fall-canvas { position:fixed; inset:0; z-index:70; touch-action:manipulation; }

/* ── 勝ち／止まった ときの 画面 ───────────────────── */
.result-wrap {
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(70,60,82,.42);
}
.result-box {
  width:min(360px,100%); padding:22px 20px 20px; text-align:center;
  background:var(--white); border:5px solid var(--pink-soft); border-radius:26px;
  box-shadow:0 10px 0 rgba(196,58,115,.16); max-height:100%; overflow-y:auto;
}
@keyframes resultIn { 0% { transform:scale(.8); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.result-wrap:not(.hidden) .result-box { animation:resultIn .22s ease-out; }
.result-title { margin:0 0 10px; font-size:30px; font-weight:900; color:var(--pink-dark); }
.result-title.is-stop { color:#7f8fa0; font-size:26px; }
.result-say { margin:0 0 16px; font-size:16px; font-weight:900; color:#5a4a63; line-height:1.6; }
.result-buttons { display:flex; flex-direction:column; gap:9px; }
.dialog-ok {
  display:block; width:100%; padding:13px 16px; border:none; border-radius:999px;
  background:var(--pink-deep); color:#fff; box-shadow:0 5px 0 var(--pink-dark);
  font-family:inherit; font-size:17px; font-weight:900; text-decoration:none; text-align:center;
}
.dialog-ok:active { transform:translateY(3px); box-shadow:0 2px 0 var(--pink-dark); }
.dialog-ok.alt {
  background:var(--white); color:var(--pink-dark);
  border:3px solid var(--pink-soft); box-shadow:0 4px 0 rgba(196,58,115,.10); font-size:15px;
}

/* ★★ T291 ―「指の的だけ たて44px」の 見えない 押し代（★T118／T289 の 型）★★
   ★ わけ … ★T288 は これを「ⓑ 箱の ならびを 変えないと 直らない」に 分けました。
            ★★ところが アトが T289 の 最後に
              ★**「`::after` は ならびに 入らないので 箱は 伸びない」**と
              ★★自分の 見立ての まちがいを 見つけました。★数え直したら その とおりでした。
   ★ 数えた もの【★実測・12画面・T291】
        ★ `#btnMain`（新しく 配る）… 見た目 **たて43px**・的 44px。★下の となりまで **9px**・箱の 下に **76px**。
        ★ `#helpDialog .dialog-ok`（分かった！）… 見た目 **たて43px**。★上下とも **120px** 以上 空き。
        ★★どちらも 44px に するのに 要るのは **上下 0.5px ずつ**。
   ★ 直しかた … ★**見た目は 1pxも 変えない。★的だけ たて 44px。**★よこは 1pxも 広げません。
   ★ 箱は 伸びません … ★`::after` は 絶対位置なので ならびに 入りません【★T118 で 実測ずみ】。
   ⚠️★ `z-index:0` を 足して います。★T289 §3-② で アトが 見つけた
      ★★「`position:relative` だけを 足すと 遠くの 丸かどが 色1つぶん ずれる」を 起こさない ため。 */
#btnMain, #helpDialog .dialog-ok { position:relative; z-index:0; }
#btnMain::after,
#helpDialog .dialog-ok::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}

/* ★ 箱が 出た 瞬間、指が まだ 動いている あいだは おせなく する（T62の 事故よけ）
   ------------------------------------------------------------
   ソリティアは 演出を タップで 飛ばせる ので、その 同じ 指が
   次の タップで「新しく 配る」を おす 危険が スピードより 高い。
   強調は 増やさない ―― 足すのでは なく 引く。おせない あいだだけ
   うすく・平たく して、おせるように なった 瞬間に 色と かげが もどる。
   待ち時間は game.js の TUNE.RESULT_LOCK / RESULT_QUIET の 2か所だけ。 */
.result-buttons { transition:opacity .16s ease-out; }
.result-box.is-locked .result-buttons { pointer-events:none; opacity:.4; }
.result-box.is-locked .dialog-ok { box-shadow:none; transform:translateY(3px); }

/* ── 遊び方の 中身 ────────────────────────────── */
dialog {
  width:min(420px,92vw); padding:22px 20px 20px; border:none; border-radius:26px;
  background:var(--white); color:var(--ink); font-family:var(--font-main);
  box-shadow:0 12px 0 rgba(196,58,115,.16);
}
dialog::backdrop { background:rgba(70,60,82,.42); }
dialog h2 { margin:0 0 6px; font-size:22px; font-weight:900; color:var(--pink-dark); text-align:center; }
.dialog-lead { margin:0 0 14px; font-size:15px; font-weight:900; text-align:center; color:#5a4a63; }
.close-dialog {
  position:absolute; top:10px; right:12px; width:34px; height:34px; border-radius:50%;
  border:3px solid var(--pink-soft); background:var(--white); color:var(--pink-dark);
  font-size:17px; font-weight:900; line-height:1;
}
/* ★★ T289 ― ★`×` の 見えない 押し代（★T118 の 型）★★
   ★ わけ … ★T288 で 数えたら **34×34**。★10本 そろって 同じ 数で、★会社で いちばん 小さい ボタン。
            ★★しかも「読み終わって 閉じる」は **遊ぶ 前の 最初の 1回**。
              ★ここで 指を 外した子は、まだ 1回も 遊んで いません。
   ★ 直しかた … ★**見た目 34×34 の まま。★的だけ 44×44。**★箱は 1pxも 伸びません。
   ★ はみ出す 先 … ★34→44 で 上下左右に **5px ずつ**。★行き先は 箱の すみの 空きだけで、
                  ★★押せる ものは 1つも いません【★12画面で 数えた・T289】。
   ⚠️★ 親は すでに `position:absolute` なので、★`position:relative` を 足す 必要は ありません。 */
.close-dialog::after {
  content:''; position:absolute; left:50%; top:50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
.help-list { margin:0 0 12px; padding-left:1.3em; }
.help-list li { margin-bottom:8px; font-size:14.5px; font-weight:700; line-height:1.65; }
.help-list b { color:var(--pink-dark); }
.help-note {
  margin:0 0 16px; padding:10px 12px; border-radius:16px;
  background:var(--cream); border:3px solid var(--gold-soft);
  font-size:13.5px; font-weight:700; line-height:1.7; color:#6b5522;
}
.help-note b { color:var(--pink-dark); }

/* ============================================================
   ★★★ T297 ② ―― ★「もどす」「新しく 配る」の 見えない 押し代（★🎨アト・2026-09-15）★★★
   ★ ★きっかけ：★🧪トライ T296 ―「★ピラミッド・ソリティア・スパイダーには `.tool::after` が
     ★ ★1行も なく、★灰色でない ときも **36px の まま**」。
   ★ ★★これは ★**私自身の T288 の 数えもれ**です（★67個 と 書きましたが、正しくは もっと ありました）。
   ------------------------------------------------------------
   ★ ★直す前【★アト実測・T297-10・★追記⑥の 12画面・★灰色を 起こして 測った】：
     ★ ★ ・★「もどす」　　… ★見た目 **70.2×36px**／★指の的 **71.2×36px**（★たてが **8px 足りない**）
     ★ ★ ・★「新しく 配る」… ★見た目 **97.7×36px**／★指の的 **97.7×36px**（★たてが **8px 足りない**）
     ★ ★★12画面 ぜんぶ ✕。★3本 × 2つ × 12画面 ＝ ★**72通り**。

   ★ ★直しかた：★**フリーセルの `.tool::after`（★T118）を そのまま 写す**。
     ★ ★★**見た目は 1pxも 太りません** ―― ★絶対位置の 箱は ならびに 入らないので、
     ★ ★★★帯も 盤も 札も ページの たけも 1pxも 動きません（★T289 で 私が 数え直した ところ）。
   ★ ⚠️★T118 の 書き置きの とおり、★`top/bottom` で ±4px とは 書きません。
     ★ ★★`top/bottom` は **ふち（border）の 内がわ**が 基準なので、ふちの 太さ（2〜3px）ぶん
     ★ ★★★足りなく なります（★T289 で 私は「読んだのに 踏みました」）。
     ★ ★→ ★たかさを **44px と 決め打ち**して まん中ぞろえ。★ふちの 太さに 左右されません。
   ★ ★よこには 広げません（★となりの ボタンを ふさがない ため。★`.tools{gap}` は 1文字も 触って いません）。
   ★ ★灰色（disabled）の ときは 押し代も 消します（★フリーセルと 同じ。★押せない ものを 押せそうに 見せない）。
   ------------------------------------------------------------ */
.tool { position:relative; }
.tool::after {
  content:''; position:absolute; left:0; right:0;
  top:50%; height:44px; transform:translateY(-50%);
}
.tool[disabled]::after { display:none; }