/* ============================================================
   smile.css v3 ＝ 見た目の「作法」だけを変える 上書きシート（2026-08-16）
   ------------------------------------------------------------
   ★ 中身（HTML・JS）は 1行も 変えていません。ここは 服だけ。
   ★ もどし方＝ index.html の <link ... smile.css> の 1行を 消すだけ。

   ■ v3 で いちばん 変えたこと（むぎこFB「均等の黒枠は やめた方がいい？」）
     → **その通りです。ぜんぶ 同じ太さの 黒枠は やめました。**
       全部に 同じ枠を 付けると「どれが 大事か」の 差が 消えます
       ＝これまで「アイコンが 並んでいる」と 感じていたのと 同じ 現象が、
         こんどは 枠で 起きます。
       ポケモンスマイル も 実際は 3px と 2px を 使い分け、枠の色も
       黒(#3c3c3c)と ターコイズ(#3cc8dc)の 2種類 使っています。

   ■ 3つの 段（これだけ 覚えれば OK）
     【大】いま 押してほしい もの … 枠 3px ＋ 真下に 4px の 影
            ＝にげる／予習／緊急・こまった／きょうのプラン／プランをひらく
     【中】えらぶ もの ………………… 枠 2px ＋ 影は うすく
            ＝行き先のマス12／棚の行／チップ／さがす欄／地図の丸3つ
     【小】読む だけの もの ………… 枠なし。うすい線 か やわらかい影だけ
            ＝天気の帯／ふきだし／気象のしらせ／結果カード
   ■ 枠の色も 1色に しない
     白地のもの＝インク色 ／ 緑の帯＝濃い緑 ／ 赤のボタン＝濃い赤 ／ 青＝濃い青
     ＝「黒で 囲った」ではなく「その色の 濃いところで 縁どった」に なります。

   ⚠ ダークのときは 影を 薄く（下に 別指定）
   ⚠ 強さを 変えたいときは、すぐ下の --sm-* を いじるだけで 全体に 効きます
   ============================================================ */

:root{
  --sm-ink:#2A3238;             /* ⚠ **枠と影の色**。ダークでは ほぼ黒になる＝**文字色に使わないこと** */
  --sm-tx:#2A3238;              /* 文字の色。ダークでは 明るい色に なる（下） */
  --sm-ink-2:rgba(42,50,56,.30);/* 【小】用の うすい線 */
  --sm-r:22px;                  /* 角丸（面もの） */
  --sm-bw:3px;                  /* 【大】の枠 */
  --sm-bw2:2px;                 /* 【中】の枠 */
  --sm-sh:0 4px 0 var(--sm-ink);          /* 【大】の影 */
  --sm-sh2:0 2px 0 rgba(42,50,56,.30);    /* 【中】の影（うすい） */
  --sm-sh3:0 2px 8px rgba(10,60,90,.13);  /* 【小】＝ふつうの やわらかい影 */
  /* グレー文字をやめる（コントラストも 上がる） */
  --muted:#3B4750;
}
:root[data-theme="dark"]{
  --sm-ink:#0E1519;             /* ダークの 枠・影＝もっと濃い */
  --sm-tx:#EAF1F5;              /* ★ダークの 文字＝明るい。ここが v7 で 抜けていて 天気パネルが 読めなかった */
  --sm-ink-2:rgba(255,255,255,.22);
  --sm-sh:0 3px 0 rgba(0,0,0,.55);
  --sm-sh2:0 2px 0 rgba(0,0,0,.40);
  --muted:#C4D2DB;
}

/* ============================================================
   【小】読むだけの もの ＝ 枠を 付けない
   ============================================================ */
/* 天気＝**面を 持たない。空の上に 文字だけ**（2026-08-16 むぎこ指示）
   ⚠ 白い帯を やめたので、**空の色に 負けない 文字色**を 時間帯ごとに 決める。
     ひる・あさ＝濃い青／ゆうがた・よる＝白＋ふちどり／ダーク＝白。
   ⚠ 押せる ことが 分かりにくくならないよう ▾ は のこす。 */
.wx .wxs{
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:6px 4px 2px !important;
  margin-top:4px;
}
.wxs .p-temp{ color:#0A5A85 !important; text-shadow:none !important; }
.wxs .p-cond,.wxs .chev{ color:#1F4457 !important; text-shadow:none !important; }
/* 空が こい 時間帯＝白＋ふちどり（空の色が 変わっても 読める） */
body.tod-night .wxs .p-temp,body.tod-evening .wxs .p-temp,
body.tod-night .wxs .p-cond,body.tod-evening .wxs .p-cond,
body.tod-night .wxs .chev,body.tod-evening .wxs .chev{
  color:#fff !important;
  text-shadow:0 1px 4px rgba(6,20,36,.75), 0 0 12px rgba(6,20,36,.45) !important;
}
:root[data-theme="dark"] .wxs .p-temp,
:root[data-theme="dark"] .wxs .p-cond,
:root[data-theme="dark"] .wxs .chev{ color:#EAF1F5 !important; text-shadow:0 1px 4px rgba(0,0,0,.6) !important; }

/* ピコまるの ふきだし＝枠は ピコまるの ブルーのまま（黒で 囲わない）
   ★2026-08-16 形①（むぎこ決裁）＝「上下に白枠があってバランスが悪い」の直し。
     実測＝ピコまる138px／ふきだし69px／中央そろえ ＝ **上下に35pxずつ空いていた**。
     → 並びを stretch にして ふきだしを ピコまると同じ高さに伸ばし、中を2行にする。
     ⚠ 2行目(.say2)が 無い日でも 崩れないように、中身は 上下中央に置く。 */
.stage{ align-items:stretch !important; }
.bub{
  border-width:2.5px !important;
  border-radius:var(--sm-r) !important;
  box-shadow:var(--sm-sh3) !important;
  display:flex !important; flex-direction:column; justify-content:center; gap:7px;
}
.bub .say{ margin:0 !important; }
/* ⚠ ここは display:flex に しないこと。
   ふりがな(<ruby>)が **1つずつ 別の箱**として ばらけて 縦に 崩れる（実測で 踏んだ）。
   ふつうの行（block）にして、アイコンだけ 文字の となりに 置く。 */
.bub .say2{
  display:block;
  font-size:.82rem; font-weight:700; color:var(--muted);
  line-height:1.5;
}
.bub .say2[hidden]{ display:none !important; }
.bub .say2 .s2-ic{
  width:16px; height:16px; color:var(--pico-d,#0078A8);
  display:inline-block; vertical-align:-3px; margin-right:6px;
}
/* ふきだしが 文字の折り返しで 背より 高くなる日も あるので、ピコまるは いつも 上下中央に */
.bearbtn{ display:flex !important; align-items:center; }
:root[data-theme="dark"] .bub .say2 .s2-ic{ color:#5FBDEC; }
/* ⚠ ふきだしの しっぽは「中央」に固定されているので、伸ばしても ずれない（top:50%のまま） */
.bub .tail{ border-top-width:2.5px !important; border-right-width:2.5px !important; }
.wxpanel{ border:1.5px solid var(--sm-ink-2) !important; border-radius:var(--sm-r) !important; box-shadow:var(--sm-sh3) !important; }

/* 気象のしらせ＝読むだけ */
.kisho{
  border:1.5px solid var(--sm-ink-2) !important;
  border-radius:var(--sm-r) !important;
  box-shadow:none !important;
  background:rgba(255,255,255,.92) !important;
  color:var(--sm-tx) !important;
}
.kisho:empty{ border:none !important; background:none !important; }

/* 表紙の 下線 */
.hyoshi{ border-bottom:2px solid var(--sm-ink-2) !important; }
.hyoshi .hy-name{ color:#0A5A85 !important; }

/* ============================================================
   【中】えらぶ もの ＝ 枠 2px・影は うすく
   ============================================================ */
.appbar .hd-who,
.appbar .a11y-toggle{
  border:var(--sm-bw2) solid var(--sm-ink) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  background:#fff !important;
  color:var(--sm-tx) !important;
}
:root[data-theme="dark"] .appbar .hd-who,
:root[data-theme="dark"] .appbar .a11y-toggle{ background:#1A232A !important; color:#EAF1F5 !important; }

/* さがす欄（入力＝押す場所なので 中の中でも すこし 強め） */
.eb-search input{
  border:2.5px solid var(--sm-ink) !important;
  border-radius:999px !important;
  box-shadow:var(--sm-sh2) !important;
  color:var(--sm-tx) !important;
  min-width:0 !important;
}
/* ホーム側（こえボタンが 横ならび）＝まる */
.eb-in.eb-flat .eb-mic{
  border:2.5px solid var(--sm-ink) !important;
  border-radius:50% !important;
  box-shadow:var(--sm-sh2) !important;
  color:var(--sm-tx) !important;
}
/* シート側（こえボタンが 入力欄の中に 浮いている）＝はみ出し対策で 細め・影なし */
.eb-sheet .eb-search{ max-width:100% !important; }
.eb-sheet .eb-search input{ padding-right:54px !important; }
.eb-sheet .eb-mic{
  border:2px solid var(--sm-ink) !important;
  border-radius:50% !important;
  box-shadow:none !important;
  color:var(--sm-tx) !important;
  right:8px !important; width:36px !important; height:36px !important;
}

/* 行き先の マス（12個）＝数が 多いので いちばん 軽く */
.eb-tile{
  border:var(--sm-bw2) solid var(--sm-ink) !important;
  border-radius:18px !important;
  box-shadow:var(--sm-sh2) !important;
  padding:9px 3px 8px !important;
}
.eb-tile .disc{ border:2px solid var(--sm-ink) !important; box-shadow:none !important; }
.eb-tile .n{ color:var(--sm-tx) !important; }
.eb-tile .c{ color:var(--muted) !important; }
:root[data-theme="dark"] .eb-tile .n{ color:#EAF1F5 !important; }

/* 地図の 丸 3つ */
.tc .d{ border:2.5px solid var(--sm-ink) !important; box-shadow:var(--sm-sh2) !important; }
.tc .l{ color:var(--sm-tx) !important; text-shadow:none !important; font-size:14px !important; }
body.tod-night .tc .l,body.tod-evening .tc .l{ color:#fff !important; text-shadow:0 1px 4px rgba(10,40,60,.55) !important; }

/* スタート地点・ナッジ・見通しの1行＝押せるが 主役ではない */
.slot,.nudge,.start-row{
  border:var(--sm-bw2) solid var(--sm-ink) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  color:var(--sm-tx) !important;
  background:#fff !important;
}
.start-row .chev,.start-row .sl-lbl,.start-row .sr-name{ color:var(--sm-tx) !important; }
.sl-input{ border:var(--sm-bw2) solid var(--sm-ink) !important; border-radius:999px !important; }
.sl-gps{ border:var(--sm-bw2) solid var(--sm-ink) !important; border-radius:999px !important; box-shadow:none !important; }
:root[data-theme="dark"] .slot,:root[data-theme="dark"] .nudge,
:root[data-theme="dark"] .start-row,:root[data-theme="dark"] .kisho{ background:#1A232A !important; color:#EAF1F5 !important; }

/* ============================================================
   【大】いま 押してほしい もの ＝ 枠 3px ＋ 真下に 4px の 影
   ⚠ 1画面に 4つまで。増やすと また 平らに なります
   ============================================================ */
/* 緑の帯＝枠は「濃い緑」（黒で 囲わない） */
.nige-bar,.walkbar{
  border:var(--sm-bw) solid #00512A !important;
  border-radius:var(--sm-r) !important;
  box-shadow:0 4px 0 #00512A !important;
}
.walkbar small,.nige-bar small{ opacity:1 !important; }

/* 緊急＝濃い赤／こまった＝濃いオレンジ */
.b-emerg,.sos-embtn{
  border:var(--sm-bw) solid #7E1F17 !important;
  border-radius:999px !important;
  box-shadow:0 4px 0 #7E1F17 !important;
}
.b-sos{
  border:var(--sm-bw) solid #8A3B12 !important;
  border-radius:999px !important;
  box-shadow:0 4px 0 #8A3B12 !important;
}
.sos-dock button{ border-radius:999px !important; }
.help-hd{ color:var(--sm-tx) !important; }
body.tod-night .help-hd,body.tod-evening .help-hd{ color:#fff !important; }
.sos-dock{ padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important; }

/* きょうのプラン＝濃い青 */
.plan-open{
  border:var(--sm-bw) solid #005A80 !important;
  border-radius:999px !important;
  box-shadow:0 4px 0 #005A80 !important;
  background:var(--pico-btn,#0078A8) !important; color:#fff !important;
}

/* 入力シートの 送信ボタン */
.askbtn,.gobtn,.btn-primary{
  border:var(--sm-bw) solid #005A80 !important;
  border-radius:999px !important;
  box-shadow:0 4px 0 #005A80 !important;
}
.ask2{ border:2.5px solid var(--sm-ink) !important; border-radius:var(--sm-r) !important; }
.quick .q{ border:var(--sm-bw2) solid var(--sm-ink) !important; border-radius:999px !important; box-shadow:none !important; }
.alertline{ border-radius:999px !important; }

/* ============================================================
   えらぶシート（どこへ 行く？）の 中身
   ⚠ erabu.js が JSで CSSを 差し込む＝あとから 入るので !important で 上書き
   ============================================================ */
.eb-sheet{ border-top:2px solid var(--sm-ink-2) !important; border-radius:26px 26px 0 0 !important; }
.eb-grab{ background:var(--sm-ink) !important; opacity:.28; height:6px !important; }
.eb-head .t{ color:var(--sm-tx) !important; }
.eb-head .x{
  border:var(--sm-bw2) solid var(--sm-ink) !important;
  background:#fff !important; color:var(--sm-tx) !important;
  box-shadow:none !important; width:38px !important; height:38px !important;
}
/* 棚の1行＝【中】
   ⚠ 2026-08-16 実機FB「開いたときに 枠の角が すこし 消える」の修正。
      原因＝`.eb-row` は もともと `overflow:hidden`。中身（白い面）が 角のカーブのところで
      枠の 内側半分を 塗りつぶしてしまう（iOS Safari で 起きやすい 昔からの クセ）。
      → 枠を 中身の **上に** もう1本 重ねて 描く（::after の わっか）。
        これなら 中身が 何を 描いても 角が 欠けません。 */
.eb-row{
  position:relative !important;
  border:none !important;
  border-radius:var(--sm-r) !important;
  box-shadow:var(--sm-sh2) !important;
  margin-bottom:10px !important;
  background-clip:padding-box !important;
}
.eb-row::after{
  content:"";
  position:absolute; inset:0;
  border:var(--sm-bw2) solid var(--sm-ink);
  border-radius:inherit;
  pointer-events:none;   /* 押せなくならないように */
  z-index:9;             /* ⚠ ひらいた ときの 見出しは 白い面を 持っていて
                            そのままだと わっかの 上に かぶさる＝上に 出しておく */
}
/* ひらいた ときの 見出しの 白い面が 角に かぶらないように */
.eb-row > .eb-bar{ background:transparent !important; }
/* ★★2026-08-17 むぎこ実機「タイトルが透けて レイアウトが崩れる」＝**ここが原因**。
   上の1行が `!important` なので、**ひらいた ときの 見出し**（`position:sticky` で 上に のこる）まで
   透明になっていた。→ スクロールすると **下の行が 見出しに 透けて 重なる**。
   ⚠ もともと透明にした理由は「白い面が 角の わっかに かぶる」ことなので、
      **上の2つの角だけ 丸めて** 白い面を もどす＝どちらも 立つ。
   ⚠ わっか（.eb-row::after）は z-index:9、この見出しは z-index:6 ＝ わっかが 上に出る（かぶらない）。 */
.eb-row.open > .eb-bar{
  background:var(--card,#fff) !important;
  border-radius:var(--sm-r) var(--sm-r) 0 0 !important;
}
.eb-bar .disc{ border:2px solid var(--sm-ink) !important; }
.eb-bar .t,.eb-bar b{ color:var(--sm-tx) !important; }
/* しぼりこみチップ＝数が いちばん 多い＝枠だけ・影なし（横スクロールで 切れるため） */
.eb-chip{ border:2px solid var(--sm-ink) !important; border-radius:999px !important; color:var(--sm-tx) !important; }
.eb-chip.on,.eb-chip[aria-pressed="true"]{ background:var(--pico,#0097D3) !important; color:#fff !important; }
.eb-list .frow{ border-top:2px solid var(--sm-ink-2) !important; }
.eb-add{
  border:var(--sm-bw2) solid var(--sm-ink) !important;
  border-radius:999px !important; box-shadow:none !important;
  color:var(--sm-tx) !important; padding:9px 13px !important;
}
.eb-add-more,.eb-crest{ border:var(--sm-bw2) dashed var(--sm-ink) !important; border-radius:var(--sm-r) !important; color:var(--sm-tx) !important; }
.eb-retry,.eb-tomap{
  border:var(--sm-bw2) solid var(--sm-ink) !important;
  border-radius:999px !important; box-shadow:none !important; color:var(--sm-tx) !important;
}
.eb-bdg{ border-radius:999px !important; }
.eb-res-card,.eb-in-picked{
  border:1.5px solid var(--sm-ink-2) !important;
  border-radius:var(--sm-r) !important;
  box-shadow:var(--sm-sh3) !important;
}
/* 下の「プランを ひらく」＝【大】 */
.eb-foot{ border-top:2px solid var(--sm-ink-2) !important; }
.eb-foot .go{
  border:var(--sm-bw) solid #005A80 !important;
  border-radius:999px !important;
  box-shadow:0 4px 0 #005A80 !important;
}
.eb-foot .go:disabled{ border-color:rgba(42,50,56,.30) !important; box-shadow:0 3px 0 rgba(42,50,56,.22) !important; }
.eb-foot .cc,.eb-foot .cc small{ color:var(--sm-tx) !important; }
:root[data-theme="dark"] .eb-head .x,
:root[data-theme="dark"] .eb-add,
:root[data-theme="dark"] .eb-retry{ background:#1A232A !important; color:#EAF1F5 !important; }

/* ---------- 押したときの 手ごたえ（【大】だけ 影が 沈む） ---------- */
@media (hover:none){
  .nige-bar:active,.walkbar:active,.b-emerg:active,.b-sos:active,
  .plan-open:active,.eb-foot .go:active,.askbtn:active,.gobtn:active{
    transform:translateY(3px);
    box-shadow:0 1px 0 currentColor !important;
  }
  .eb-tile:active,.eb-row:active,.tc:active .d{ transform:translateY(2px); }
}
@media (prefers-reduced-motion:reduce){
  .nige-bar:active,.walkbar:active,.b-emerg:active,.b-sos:active,
  .plan-open:active,.eb-foot .go:active,.eb-tile:active,.eb-row:active,.tc:active .d{ transform:none; }
}

/* ---------- フォーカスは 見やすいまま（消さない） ---------- */
:focus-visible{ outline:3px solid #0078A8 !important; outline-offset:3px !important; }


/* ============================================================
   おためし用：行き先の マスの アイコンを 大きく する
   ------------------------------------------------------------
   下の B案 か C案 の ブロックを 囲っている
     ・上の行の  SW-OFF     （コメントの はじまり）
     ・下の行の  SW-OFF     （コメントの おわり）
   この 2行を まるごと 消すと、そのブロックが 効きます。
   ⚠ B案と C案を 同時に 有効にしないでください（あとの方が 勝ちます）
   ============================================================ */

/* --- B案：カードは そのまま、まるを 42px → 54px に --------- */
/* SW-OFF
.eb-tile{ padding:11px 3px 9px !important; border-radius:20px !important; }
.eb-tile .disc{ width:54px !important; height:54px !important; }
.eb-tile .disc svg{ width:29px !important; height:29px !important; }
.eb-tile .n{ font-size:12.5px !important; }
SW-OFF */

/* --- C案：カードの 枠と 面を やめて、まる 62px だけ ★いま これが 効いています ---
     ＝ピコ「まる」に そろう。白い面が 消えるので 空が すけて いちばん 軽い。
     もどしたい ときは この下の 12行を SW-OFF の コメントで 囲みなおすだけ
     （B案の ブロックと 同じ 書き方に すれば OK）。 */
.eb-tiles{ gap:12px 5px !important; }
.eb-tile{ background:none !important; border:none !important; box-shadow:none !important;
          padding:2px 0 0 !important; gap:5px !important;
          min-height:118px !important;     /* ⚠ 名前のところも 押せる幅を 残す */
          justify-content:flex-start !important; }
.eb-tile .disc{ width:min(96px,26.5vw) !important; height:min(96px,26.5vw) !important;
                border:2.5px solid var(--sm-ink) !important;
                box-shadow:var(--sm-sh2) !important; }
.eb-tile .disc svg{ width:min(50px,13.8vw) !important; height:min(50px,13.8vw) !important; }
.eb-tile .n{ font-size:12.5px !important; color:var(--sm-tx) !important; }
.eb-tile .c{ font-size:10.5px !important; }
:root[data-theme="dark"] .eb-tile .n{ color:#EAF1F5 !important; }


/* ============================================================
   ★ 夜・夕方の 空の うえの 文字（2026-08-16 実機FB）
   ------------------------------------------------------------
   ⚠ C案で 白いカードを やめたので、マスの 名前と 件数が
     **こい紺色の 空の うえに こい文字**で 乗って 読めなくなっていました。
     → 空が こい 時間帯（tod-night / tod-evening）は 白文字＋ふちどりに する。
   ⚠ 空の 色は 時間で 変わる＝色を 固定せず、この2つの クラスで 切りかえる。
   ============================================================ */
body.tod-night .eb-tile .n,
body.tod-evening .eb-tile .n{
  color:#fff !important;
  text-shadow:0 1px 3px rgba(6,20,36,.85), 0 0 10px rgba(6,20,36,.55) !important;
}
body.tod-night .eb-tile .c,
body.tod-evening .eb-tile .c{
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 1px 3px rgba(6,20,36,.85) !important;
}
/* 表紙の サービス名・キャッチ */
body.tod-night .hyoshi .hy-name,
body.tod-evening .hyoshi .hy-name{ color:#fff !important; text-shadow:0 1px 4px rgba(6,20,36,.7) !important; }
body.tod-night .hyoshi,
body.tod-evening .hyoshi{ border-bottom-color:rgba(255,255,255,.34) !important; }
body.tod-night .hyoshi .hy-copy,
body.tod-evening .hyoshi .hy-copy{ color:#fff !important; text-shadow:0 1px 4px rgba(6,20,36,.7) !important; }
/* 「たすけを よぶ」の 見出し・そのほか 空の うえに 直接 のる 文字 */
body.tod-night .help-hd,
body.tod-evening .help-hd{ color:#fff !important; text-shadow:0 1px 4px rgba(6,20,36,.7) !important; }
/* ダークモード（画面の設定）でも 同じ */
:root[data-theme="dark"] .eb-tile .c{ color:#C4D2DB !important; }


/* ============================================================
   ★ 天気タップの パネル「きょう 1日」（案A・2026-08-16）
   ------------------------------------------------------------
   ⚠ 中身は index.html の buildDayHTML() が作る。ここは 見た目だけ。
   ⚠ パネル本体(.wxpanel)は【小】＝読むだけ なので 枠を太くしない。
   ============================================================ */
.wxpanel .wd-hd{
  display:flex; align-items:center; gap:7px;
  font-weight:700; font-size:.98rem; color:var(--sm-tx);
  margin:12px 0 8px; padding-top:10px; border-top:2px solid var(--sm-ink-2);
}
.wxpanel .wd-hours{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.wxpanel .wd-h{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; border-radius:14px; }
.wxpanel .wd-h.now{ background:var(--pico-l,#E9F5FC); box-shadow:inset 0 0 0 2px var(--pico,#0097D3); }
.wxpanel .wd-t{ font-size:12.5px; font-weight:700; color:var(--muted); }
.wxpanel .wd-ic{ width:30px; height:30px; display:block; }
.wxpanel .wd-tm{ font-size:15.5px; font-weight:700; color:var(--sm-tx); }
.wxpanel .wd-pp{ font-size:11.5px; font-weight:700; color:#0A6F9E; }
.wxpanel .wd-pp.hi{ color:#A8481A; }
:root[data-theme="dark"] .wxpanel .wd-pp{ color:#7FC4EC; }
:root[data-theme="dark"] .wxpanel .wd-pp.hi{ color:#FFB27A; }
.wxpanel .wd-facts{ display:flex; gap:7px; margin-top:9px; }
.wxpanel .wd-f{ flex:1; background:#F5F9FB; border:1.5px solid var(--sm-ink-2); border-radius:14px; padding:7px 6px; text-align:center; }
.wxpanel .wd-f .l{ display:block; font-size:11px; font-weight:700; color:var(--muted); line-height:1.3; }
.wxpanel .wd-f .v{ display:block; font-size:1.2rem; font-weight:700; color:var(--sm-tx); }
.wxpanel .wd-tip{
  display:flex; gap:8px; align-items:flex-start; margin-top:9px;
  background:#FFF6D6; border:2px solid #E8C766; border-radius:14px; padding:9px 11px;
  font-size:.92rem; font-weight:700; color:#6B4E00; line-height:1.45;
}
.wxpanel .wd-tip svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.wxpanel .wd-tmr{
  display:flex; align-items:center; gap:9px; margin-top:8px;
  background:#F5F9FB; border:1.5px solid var(--sm-ink-2); border-radius:14px; padding:8px 11px;
  font-size:.94rem; font-weight:700; color:var(--sm-tx);
}
.wxpanel .wd-tmr .wd-ic{ width:24px; height:24px; }
.wxpanel .wd-tmr .r{ margin-left:auto; }
.wxpanel .wd-src{ font-size:.75rem; font-weight:700; color:var(--muted); margin-top:9px; line-height:1.5; }
.wxpanel .w-close{
  border:2px solid var(--sm-ink) !important; border-radius:999px !important;
  background:#fff !important; color:var(--sm-tx) !important; box-shadow:none !important;
  margin-top:11px; padding:9px 18px; font-weight:700; font-size:.9rem;
}
:root[data-theme="dark"] .wxpanel .wd-f,
:root[data-theme="dark"] .wxpanel .wd-tmr{ background:#12303D; }
:root[data-theme="dark"] .wxpanel .w-close{ background:#1A232A !important; color:#EAF1F5 !important; }

/* 表紙の 地名の1行（東京都 調布市 の） */
.hyoshi .hy-pre{
  font-size:.72rem; font-weight:700; color:#0A5A85; letter-spacing:.04em; line-height:1.35;
}
.hyoshi .hy-pre rt{ font-size:.55em; }
body.tod-night .hyoshi .hy-pre,
body.tod-evening .hyoshi .hy-pre{ color:#fff !important; text-shadow:0 1px 4px rgba(6,20,36,.7) !important; }
:root[data-theme="dark"] .hyoshi .hy-pre{ color:#9FD3EC; }

/* ダークのときの 天気パネル（2026-08-16 実機FB「ダークで読めない」） */
:root[data-theme="dark"] .wxpanel .wd-tip{ background:#3A3116; border-color:#8A7024; color:#F5E3B0; }
:root[data-theme="dark"] .wxpanel .wd-hd{ border-top-color:rgba(255,255,255,.20); }
:root[data-theme="dark"] .wxpanel .wd-h.now{ background:#12303D; box-shadow:inset 0 0 0 2px #3FB0E4; }
:root[data-theme="dark"] .wxpanel .wd-f,
:root[data-theme="dark"] .wxpanel .wd-tmr{ border-color:rgba(255,255,255,.20); }

/* ============================================================
   ★ ふきだしの セリフを 読みやすく（2026-08-16 実機FB）
   ------------------------------------------------------------
   もとは 1rem・行間1.35・色は --link（青）。ダークだと 青文字が 細く見えて 読みにくかった。
   → 大きく・行間を ひろく・色を 文字色に 寄せる（青は のこすが 濃さを 上げる）。
   ⚠ ふきだしの 幅は ピコまるの ぶん せまい（実測 210px）ので、
     大きくしすぎると 3行に なって ふきだしが 伸びる＝1.12rem までに とどめる。
   ============================================================ */
.bub .say{
  font-size:1.12rem !important;
  line-height:1.5 !important;
  color:#0A5A85 !important;            /* もとの --link(#0078A8) より 濃い＝白地で よりはっきり */
  letter-spacing:.01em;
}
:root[data-theme="dark"] .bub .say{
  color:#EAF3F8 !important;            /* ダークは 青をやめて ほぼ白＝いちばん 読みやすい */
}
.bub .say2{ font-size:.86rem !important; }

/* ============================================================
   ★ パソコンのとき（2026-08-16 むぎこ「PCはもっと大きくてもよさそう」）
   ------------------------------------------------------------
   実測（1440px）＝本文の幅は 760px、マスの1列は **237px** なのに 丸は 96px。
   ＝左右に **70pxずつ 空いていた**。むぎこの見立ては 正しい。
   → **3列→4列** にして 丸を **96→130px**。
     ・12マスが 4×3 に なる＝縦が むしろ 短くなる（実測 612px → 597px）
     ・1画面に 見える マスが 増える
     ・6列にする案も 試したが、横に 6つ 並ぶと **「整列している感じ」が 戻る**のでやめた
   ⚠ スマホ（900px未満）は 何も 変えない＝いままでどおり 3列・min(96px,26.5vw)。
   ============================================================ */
@media (min-width:900px){
  .eb-tiles{ grid-template-columns:repeat(4,1fr) !important; gap:16px 6px !important; }
  .eb-tile{ min-height:180px !important; }
  .eb-tile .disc{ width:130px !important; height:130px !important; }
  .eb-tile .disc svg{ width:68px !important; height:68px !important; }
  .eb-tile .n{ font-size:14.5px !important; }
  .eb-tile .c{ font-size:12px !important; }
  /* 地図の丸3つも 同じだけ 大きく（マスとの 差が 開きすぎないように 少し 控えめ） */
  .tc .d{ width:120px !important; height:120px !important; }
  .tc .d .mk{ width:58px !important; height:58px !important; }
  .tc.tell .d .mk{ width:64px !important; height:64px !important; }
  .tc .l{ font-size:15px !important; }
}


/* ============================================================
   ★ さがす欄の 上下の 余白（2026-08-16 むぎこFB
      「なまえ・しゅるいでさがす の 入力欄の 上下の 余白が 少ない気がします」）
   ------------------------------------------------------------
   実測（変更前）＝ふきだしの下から 入力欄まで **10px**、入力欄から 丸まで **8px**。
     ・10px/8px は erabu.js が 自分で 持っている値（.eb-in.eb-flat{margin-top:10px} /
       .eb-tiles{margin-top:8px}）。もとは 吹き出しの中に あった 名残り。
     ・入力欄は 「押すところ」なので、上下が つまっていると **どこからどこまでが
       入力欄か** が 分かりにくい（触るのが むずかしい人ほど 効く）。
   → スマホ 上18px / 下28px、パソコン 上24px / 下36px に ひろげる。
   ⚠ 上と下で 数字を そろえない。ピコまるの 絵の 下には **透明な よはく**が あるので、
     同じ数字だと **上が 広く 下が せまく 見える**（実機の 写真で 確認）。数字ではなく 見た目で そろえる。
   ⚠ ひろげた分 縦に のびるが、丸を 4列にした パソコンは もともと 15px 縮んでいるので
     見た目の 位置は ほぼ 変わらない。
   ⚠⚠ セレクタに **すきま(半角スペース)を 入れない**こと。
       erabu.js は 置き場 #homeFind **そのものに** eb-in / eb-flat を 付ける
       （host.classList.add('eb-in','eb-flat')）。
       「#homeFind␣.eb-in.eb-flat」＝**中にある** eb-flat の意味に なるので **1つも あたらない**。
       （最初 そう書いて 効かず、実測して 気づいた）
   ============================================================ */
#homeFind.eb-in.eb-flat{ margin-top:18px !important; }
#homeFind .eb-tiles{ margin-top:28px !important; }
@media (min-width:900px){
  #homeFind.eb-in.eb-flat{ margin-top:24px !important; }
  #homeFind .eb-tiles{ margin-top:36px !important; }
}

/* ============================================================
   ★ パソコンの ピコまると ふきだしの つりあい
      （2026-08-16 むぎこFB「PCの場合 ピコまるとふきだしの バランスが わるい」）
   ------------------------------------------------------------
   実測（1440px・変更前）
     ・本文の はば 720px のうち、ふきだし(239px)＋ピコまる(180px) は **右端に かたまり**、
       左が **300px まるあき**。下の 丸は 720px いっぱいなので、上だけ 右に ずれて 見える。
     ・さらに、ふきだしの 高さが **180px**（＝ピコまるの 高さに 引きのばされていた）。
       中身は 2行だけなので **箱の中が すかすか**＝これが「バランスが わるい」の 正体。
       引きのばし(align-items:stretch)は スマホで 2行にする ために 入れた もの。
       スマホは はばが せまいので 気にならないが、パソコンは 目立つ。
   → パソコンだけ
     ①ふきだしを **中身の高さ**に もどす（stretch → center）
     ②2つを **まんなか**に そろえる（右端寄せを やめる）＝左右の あきが 同じになる
     ③ピコまるを **180 → 210px**（主役を すこし 大きく。250pxも 試したが
       顔が 天気の 文字より 大きくなって うるさい）
   ⚠ スマホは いっさい 変えない（stretch のまま）＝2行の ふきだしが くずれるため。
   ============================================================ */
@media (min-width:900px){
  .stage{ align-items:center !important; justify-content:center !important; gap:14px !important; padding-top:18px !important; }
  .bub{ flex:0 1 auto !important; max-width:min(52%,400px) !important; }
  .bear{ width:210px !important; }
}
/* タブレット（700〜899px）＝ここも 1行で おさまるので ふきだしが すかすかに なる。
   はばは 変えず、**高さの 引きのばしだけ** やめる（ピコまるの 大きさは そのまま）。 */
@media (min-width:700px) and (max-width:899.98px){
  .stage{ align-items:center !important; }
}

/* ============================================================
   ★ 2026-08-19 むぎこ決裁＝**案B「外に白い輪」**
   暗いときに 丸の輪郭が 消えていた問題の対処。
   ------------------------------------------------------------
   ■ なにが起きていたか（実測・390px）
     昼の空は うすい水色で、丸の地色は 空に対して 1.1〜1.4:1 しかない
     ＝**輪郭は ぜんぶ 枠(--sm-ink)が 作っていた**（9.3〜11.7:1）。
     ところが 夜の空・ダークでは その枠が まわりに 溶ける（**1.15〜1.19:1**）。
     丸の地色も 15個中13個が 3:1 未満で、**輪郭を 作るものが 何もない**状態だった
     （見えていたのは 中の 白いマークだけ）。
   ■ なぜ「枠を白くする」ではなく「外に 輪を 足す」か
     ・「つたえる」は **白い丸**＝枠を白くすると 逆に 消える＝例外が 要る
     ・--sm-ink は **枠と影を 兼ねている**（--sm-sh / --sm-sh2）＝白にすると **影まで 白くなる**
     → いまの枠は そのままにして、その**外がわ**に 1本 足す。丸の地色に 関係なく 効く＝例外なし。
   ■ どこに 掛けるか（★これも 実測で 決めた）
     ・**よる**（body.tod-night）… ライトのままでも 空が 暗い＝要る
     ・**ダークモード 全般** … ダークは 夕方の空も 暗くなる（現状 2.74:1 → 輪で 4.47:1）＝要る
     ・⚠**ライトの 夕方・朝・昼には 掛けない**＝空が 明るく、いまの 黒い枠で 足りている
       （ライトの夕方＝黒枠 5.01:1 ✅ ／ 白い輪だと 1.79:1 で 意味がない）
   ■ 実測（いちばん 低いマス／輪郭↔まわり）
     よる 1.15 → **6.97:1** ／ ダーク 1.19 → **10.43:1**
   ============================================================ */
:root{ --sm-ring:rgba(255,255,255,.85); }   /* 暗いときの 外がわの輪。⚠ --sm-ink（枠と影）とは 別もの */

body.tod-night .eb-tile .disc,
:root[data-theme="dark"] .eb-tile .disc{
  box-shadow:0 0 0 2px var(--sm-ring) !important;
}
/* 〇3連は もともと 影を 持っているので、輪を **足す**（影を 消さない） */
body.tod-night .tc .d,
:root[data-theme="dark"] .tc .d{
  box-shadow:0 0 0 2px var(--sm-ring), var(--sm-sh2) !important;
}