/* スマホの地図(画面の幅 768px 以下)。
   パソコンの画面(左に一覧・右に地図)はこのファイルでは触らない。

   骨組み:
     ・地図を画面いっぱいに置き、その上に部品を重ねる。ページはスクロールさせない
     ・上に検索欄とパンくず、右上にライト/ダークと現在地
     ・下から引き出す板(ボトムシート)に、地方・県・市区町村・ブルワリーの中身を出す
     ・いちばん下に画面の切り替え(地図・タイムライン・マイページ・統計)

   板の高さは JS が --vis(見えている高さ)に入れる。地図を寄せるときは
   この高さのぶんだけ下に余白を取るので、板に隠れた所には寄らない。 */

/* 現在地の点。方角が取れている時だけ、向いている向きに扇を出す。
   地図を回しても正しい向きを指すよう、角度は JS が --heading に入れる。 */
.here-dot.has-heading::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  transform: rotate(var(--heading, 0deg));
  background: conic-gradient(
    from -22deg,
    rgba(46, 111, 183, 0.45) 0deg,
    rgba(46, 111, 183, 0) 44deg,
    rgba(46, 111, 183, 0) 360deg
  );
  pointer-events: none;
  z-index: -1;
}

/* 選択中のピンは琥珀色の光る輪にする(仕様書3.6)。
   プロトタイプでは青 #2E6FB7 だが、現在地の点と同じ色で紛らわしいため。
   幅に関係なく効かせる。 */
.pin.selected {
  border-color: #e8a33d;
  animation: ippaiSelectPulse 1.1s ease-out infinite;
}
@keyframes ippaiSelectPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 163, 61, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(232, 163, 61, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 163, 61, 0);
  }
}

/* 画面の端に小さく出す知らせ(保存中… / 保存しました / 未保存)。
   Check in の画面の上にも出したいので、いちばん手前に置く。 */
.ippai-note {
  position: fixed;
  z-index: 1300;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f5eddc;
  background: rgba(22, 18, 12, 0.92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.ippai-note.ok {
  background: rgba(58, 92, 42, 0.95);
}
.ippai-note.ng {
  background: rgba(150, 58, 46, 0.95);
}

/* 限定醸造の「すべて見る」と、同じ会社の醸造所 */
.showall {
  margin: 8px 0 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.siblings button {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.siblings button span {
  font-size: 11px;
  color: var(--malt);
  font-weight: 700;
}

/* ダークのとき、ラインナップの「すべて見る」と同じ会社の醸造所も読めるように */
[data-mode='dark'] .showall,
[data-mode='dark'] .siblings button {
  background: #222927;
  border-color: #34403c;
  color: #e3e9e6;
}

/* ── 統計の行を押せるようにした分 ──────────────
   もとは div だったので、ボタンの既定の見た目を打ち消す。 */
button.strow,
button.strow2 {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.strow2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 押せることが分かるように「›」を添える */
.gochev {
  flex: none;
  margin-left: 6px;
  color: var(--st-dim, #9AA7A1);
  font-size: 14px;
  line-height: 1;
}
.strow2.open .gochev {
  transform: rotate(90deg);
  display: inline-block;
}

/* スタイルを押した時に開く、そのスタイルのビールの一覧 */
.stbeers {
  display: flex;
  flex-direction: column;
  margin: 2px 0 10px;
  border-left: 2px solid rgba(232, 163, 61, 0.45);
  padding-left: 10px;
}
.stbeers button {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(245, 237, 220, 0.08);
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.stbeers .bn2 {
  flex: 1;
  min-width: 0;
}
.stbeers .bw2 {
  flex: none;
  max-width: 45%;
  font-size: 11px;
  opacity: 0.65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stbeers .bc2 {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: #e8a33d;
}
.stbeers .stmore {
  justify-content: center;
  border-bottom: 0;
  font-size: 12px;
  opacity: 0.8;
}

/* 記録一覧の「未保存 ・ 送り直す」 */
.hretry {
  margin: 6px 0 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #c8703f;
  background: rgba(200, 112, 63, 0.12);
  color: #c8703f;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

/* iOS の Safari は、色を決めていない <button> の文字をリンクのような青で出す。
   一覧の見出し・行がそれに当たるので、墨色にそろえる(幅に関係なく効かせる)。 */
.ahead,
.item,
.ahead .cname,
.item .iname {
  color: var(--ink);
}
.ahead .cnum,
.ahead .cprog {
  color: var(--ink-2);
}

@media (max-width: 768px) {
  :root {
    --mnav: 58px;                                  /* 切り替えの高さ(セーフエリアは別) */
    --msafe: env(safe-area-inset-bottom, 0px);
    --mnav-all: calc(var(--mnav) + var(--msafe));  /* 合わせて74px前後 */
    --mtop: 12px;
  }

  /* iOSのSafariは、文字が16pxより小さい入力欄に触れると画面ごと拡大する。
     拡大すると画面の右が切れて、Check inの入力欄がはみ出して見える。
     入力欄の文字を16px以上にすると拡大しなくなる(拡大の操作自体は残る)。
     app.css 側が id 付きで細かく指定しているので、ここは !important で上書きする。 */
  input, textarea, select { font-size: 16px !important; }

  /* ページはスクロールさせない。
     一覧の自動スクロール(scrollIntoView)はページごと動かしてしまい、
     地図が板の下に潜り込んでピンが押せなくなるため、入れ物ごと画面に固定する。 */
  html, body { overflow: hidden; overscroll-behavior: none; }
  .ippai-root { position: fixed; inset: 0; }
  .screen { height: 100vh; height: 100dvh; }
  .tabbar { display: none !important; }            /* 上のタブはスマホでは出さない */
  .fullbar { display: none !important; }           /* 下に貼り付く帯もやめる */

  /* 地図を画面いっぱいに。板とタブは重ねる
     (#mapview.on{display:grid} を上書きするので、同じ強さの id で書く) */
  #mapview.on { display: block; }
  .wrap { position: relative; }   /* 高さは .screen が決める(親に高さが無いので % は使えない) */
  /* 地図いがいの画面は、下の切り替えに隠れないように余白を取る */
  #meview, #statsview, #historyview { padding-bottom: var(--mnav-all); }
  .mapwrap { position: absolute; inset: 0; }
  #map { position: absolute; inset: 0; }

  /* ── 上の検索欄とパンくず ───────────────────── */
  .mtop {
    position: fixed; z-index: 720;
    top: calc(env(safe-area-inset-top, 0px) + var(--mtop)); left: 12px; right: 12px;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  }
  /* 検索欄は幅いっぱい(見本 2_mobile_map)。パンくずだけ右のボタンの分をあける */
  .mtop .crumb { margin-right: 56px; }
  /* 入れ物は地図のタッチを通す。受けるのは中の部品だけ */
  .msearch { pointer-events: auto; }
  .mtop .crumb { pointer-events: none; }
  .mtop .crumb button { pointer-events: auto; }

  .msearch {
    display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px;
    background: var(--paper); border-radius: 999px; border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  }
  .msearch svg { flex: none; color: var(--quiet); }
  .msearch input {
    flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px;
    color: var(--ink); outline: none; letter-spacing: .04em;
  }
  /* 文字を16pxにしたぶん、字間を詰めて「…で探す」まで入るようにする */
  .msearch input::placeholder { color: var(--quiet); letter-spacing: .04em; }

  /* パンくず。今いる所だけ薄い琥珀色 */
  .mtop .crumb {
    display: flex; align-items: center; gap: 4px; padding: 0; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  .mtop .crumb::-webkit-scrollbar { display: none; }
  .mtop .crumb button {
    flex: none; font-size: 12px; padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
  }
  .mtop .crumb button:last-child {
    background: var(--malt-soft); color: var(--ink); border-color: var(--malt-soft); font-weight: 700;
  }
  .mtop .crumb .sep { flex: none; color: var(--quiet); font-size: 11px; }

  /* ── 右上のボタン ───────────────────────── */
  .mctl {
    position: fixed; z-index: 720;
    top: calc(env(safe-area-inset-top, 0px) + var(--mtop) + 58px); right: 12px;
    display: flex; flex-direction: column; gap: 10px;
    pointer-events: none;
  }
  .mbtn { pointer-events: auto; }
  .mbtn {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 14px; border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); cursor: pointer;
  }
  .mbtn.on { background: var(--malt-soft); border-color: var(--malt); }
  /* 方位磁石。針は地図の向きに合わせて回る */
  .mcompass svg { transform: rotate(var(--north, 0deg)); transition: transform .12s linear; }
  .mcompass path { fill: var(--malt); stroke: none; }
  .mcompass[hidden] { display: none; }

  /* 地図の画面のときだけ出す(マイページ・統計では出さない) */
  body:not(.tab-map) .mtop, body:not(.tab-map) .mctl { display: none; }

  /* もともとの操作列は板の中に作り直すので隠す */
  .verify, .zoomhint, .hover, .card,
  .side .head, .side .meter, .side .legend, .side .search, .side .tools,
  .maplibregl-ctrl-top-left { display: none !important; }

  /* 地図の出典は、いつも板のすぐ上に置く(板や他の表示と重ならないように) */
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left {
    bottom: calc(var(--vis, 190px) + 4px); z-index: 600;
  }
  .maplibregl-ctrl-attrib { font-size: 10px; }

  /* ピンは14pxと小さいので、押せる範囲だけ44pxに広げる(見た目は変えない) */
  .pin::after {
    content: ''; position: absolute; inset: -15px; border-radius: 50%;
  }

  /* ── 下から引き出す板 ────────────────────── */
  .side {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 700;
    height: calc(100% - 128px - env(safe-area-inset-top, 0px));
    background: var(--paper); border: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .16);
    transform: translateY(calc(100% - var(--vis, 190px)));
    display: flex; flex-direction: column; overflow: hidden;
  }
  .side.anim { transition: transform .26s cubic-bezier(.22, .8, .3, 1); }

  /* つまみと見出しは、指で上下に引くと板が動く(一覧は普通にスクロールできる) */
  .mgrip, .mhead { touch-action: none; }
  .mgrip { flex: none; padding: 9px 0 4px; display: grid; place-items: center; cursor: grab; }
  .mhead[hidden], .msort[hidden], .mgrip[hidden] { display: none; }
  .mgrip i { display: block; width: 44px; height: 4px; border-radius: 999px; background: var(--line); }

  .mhead { flex: none; padding: 4px 18px 10px; }
  .mhead .mrow { display: flex; align-items: baseline; gap: 10px; }
  .mhead h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: .02em; flex: 1; }
  .mhead .mcount { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
  .mhead .mcount b { color: var(--malt); font-weight: 700; }
  .mhead .mnote { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
  .mhead .mnote em { font-style: normal; color: var(--malt); }

  .msort { display: flex; gap: 7px; overflow-x: auto; padding: 10px 18px 2px; scrollbar-width: none; }
  .msort::-webkit-scrollbar { display: none; }
  .msort button {
    flex: none; font: inherit; font-size: 12px; padding: 7px 13px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer;
  }
  .msort button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

  /* 地方・県を選ぶボタンは板の中で横に並べる */
  .side .picker { padding: 2px 18px 12px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .side .picker::-webkit-scrollbar { display: none; }
  .side .picker .picklabel { display: none; }
  .side .picker .pick {
    flex: none; font-size: 13px; padding: 9px 14px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--paper);
  }
  .side .picker .pick em { margin-left: 5px; color: var(--malt); font-style: normal; font-weight: 700; }
  .side .picker .pick.on { background: var(--malt-soft); border-color: var(--malt); }

  .side .list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--mnav-all) + 12px); }

  /* 小見出しの印は、チェックボックスに見えないよう小さな丸にする */
  .side .list .cchip { width: 10px; height: 10px; border-radius: 50%; border: 0; }
  /* 市区町村を選んでいる間は、その中のブルワリーだけを並べる(小見出しは出さない) */
  body.city-only .side .list .ahead { display: none; }
  body.city-only .side .list .item { padding-left: 20px; }
  body.pref-only .side .list .ahead.pref { display: none; }

  /* ── ブルワリーを選んだときの中身 ──────────────── */
  /* 左右の余白は18pxでそろえる。下は切り替えに隠れないぶんだけ空ける */
  /* 高さは中身なりに。板より高くなった時だけ、この中でスクロールする
     (flex:1 にすると板の高さに広がってしまい、中身の高さが測れない) */
  .mbrew { flex: 0 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
           padding: 2px 18px calc(var(--mnav-all) + 14px); }
  .mbrew[hidden] { display: none; }

  .mbrew .btop { display: flex; align-items: flex-start; gap: 12px; touch-action: none; }
  .mbrew .bname { flex: 1; min-width: 0; }
  .mbrew h2 { margin: 0 0 3px; font-size: 18px; font-weight: 700; line-height: 1.35; }
  .mbrew .balias { margin: 0 0 3px; font-size: 12px; color: var(--ink-2); }
  .mbrew .baddr { font-size: 12.5px; line-height: 1.6; }

  /* ★と× は直径40pxの丸いボタン */
  .mbrew .btools { flex: none; display: flex; gap: 8px; }
  .mbrew .btools button {
    width: 40px; height: 40px; flex: none; padding: 0;
    display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
    color: var(--ink-2); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  }
  .mbrew .btools .bstar2.on { color: var(--malt); border-color: var(--malt); background: var(--malt-soft); }
  .mbrew .btools .bclose { font-size: 20px; }

  .mbrew .btags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
  .mbrew .btags span { font-size: 11px; padding: 3px 9px; border-radius: 999px;
                       background: var(--malt-soft); color: var(--ink); }

  /* ビールのチップ。「ほか◯種」も同じ並びの最後に続ける */
  .mbrew .bbeers { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0 0; }
  .mbrew .bbeers span { flex: none; white-space: nowrap; }
  /* とても長い名前でも1行からあふれないように、途中で切る */
  .mbrew .bbeers span[data-b] { max-width: 64%; overflow: hidden; text-overflow: ellipsis; }
  .mbrew .bbeers span {
    font-size: 12px; padding: 6px 11px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--srm0); color: var(--ink); cursor: pointer;
  }
  .mbrew .bbeers span em { margin-left: 5px; font-style: normal; color: var(--malt); font-weight: 700; }
  .mbrew .bbeers .more { border: 0; background: none; padding: 0 2px; color: var(--ink-2); cursor: default; }
  .mbrew .bmore { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }

  /* 同じ会社の醸造所 */
  .mbrew .bsib { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-2);
                 display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .mbrew .bsib button {
    font: inherit; font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
  }
  .mbrew .bsib button em { margin-left: 5px; font-style: normal; color: var(--malt); font-weight: 700; }

  /* 「くわしく」と「＋ Check in」は同じ幅・高さ48px・文字は中央 */
  .mbrew .bacts { display: flex; gap: 10px; margin: 14px 0 0; }
  .mbrew .bacts button {
    flex: 1 1 0; min-width: 0; height: 48px; padding: 0;
    display: flex; align-items: center; justify-content: center; text-align: center;
    font: inherit; font-size: 14px; font-weight: 700; border-radius: 12px; cursor: pointer;
  }
  .mbrew .bacts .det { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
  .mbrew .bacts .rec { background: var(--hop); border: 1px solid var(--hop); color: #fff; }

  .mbrew .blinks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
                   margin: 14px 0 0; font-size: 12px; }
  .mbrew .bwarn { margin: 12px 0 0; font-size: 12px; color: var(--malt); }

  /* ── いちばん下の切り替え ───────────────────── */
  /* 下の切り替えは、地図の明るさに関係なく、いつもスタウトの暗い色(ほかの画面の切り替えと同じ。2026-09-26) */
  .mnav {
    position: fixed; z-index: 760; left: 0; right: 0; bottom: 0;
    height: var(--mnav-all); padding-bottom: var(--msafe);
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #1E1811; border-top: 1px solid #3B3228;
  }
  .mnav a, .mnav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font: inherit; font-size: 10.5px; color: #7E7263;
    background: none; border: 0; text-decoration: none; cursor: pointer;
  }
  .mnav [aria-current="true"] { color: #E8A33D; font-weight: 700; }
  .mnav [aria-current="true"] svg { color: #E8A33D; }

  /* ＋ボタンは板の上端の右に浮かせる。
     地図の出典(板のすぐ上に出している)と重ならない高さまで上げる */
  .fab {
    position: fixed; right: 16px; z-index: 740;
    bottom: calc(var(--vis, 190px) + 30px); width: 52px; height: 52px;
  }
  .fabmenu { position: fixed; right: 16px; z-index: 745; bottom: calc(var(--vis, 190px) + 92px); }
  /* 板を半分より高く上げている間と、ブルワリーの情報を出している間は引っ込める */
  .sheet-high .fab, .sheet-high .fabmenu { display: none !important; }
  /* ブルワリーの情報を出している間は、右上のボタンは残す(見本どおり)。
     ただし板の上端がボタンに届いたら、どちらの時でも引っ込める */
  body.sheet-high:not(.ippai-brew) .mctl { display: none; }
  body.ctl-clash .mctl { display: none; }
  body.ippai-brew .fab, body.ippai-brew .fabmenu { display: none !important; }

  /* ── 画面(シート)を開いている間は、地図の部品を隠す ──────
     検索欄・パンくず・右のボタン・切り替え・＋ボタンは画面そのものに置いているので、
     そのままだと Check in などの手前に出てしまう。 */
  body.ippai-sheet .mtop,
  body.ippai-sheet .mctl,
  body.ippai-sheet .mnav,
  body.ippai-sheet .fab,
  body.ippai-sheet .fabmenu { display: none !important; }

  /* ポップアップ・Check in・ビール登録は画面の幅いっぱい。左右の余白は18px */
  .detailsheet, .modalsheet, #regPhone { border-radius: 18px 18px 0 0; max-width: none; }
  .chkbody, .regbody { padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .dtbody { padding-left: 18px; padding-right: 18px; }
  #checkinModal .ckview, #regCam .view { margin-left: -18px; margin-right: -18px; }
  .modalsheet, #regPhone, .detailsheet { max-height: calc(100dvh - 24px); }
}

/* 触る端末では、マウスを乗せた時の表示を使わない */
@media (hover: none) {
  .hover { display: none !important; }
}

/* ── ダーク ───────────────────────────────── */
@media (max-width: 768px) {
  [data-mode="dark"] .msearch,
  [data-mode="dark"] .mbtn,
  [data-mode="dark"] .side,
  [data-mode="dark"] .mtop .crumb button { background: #17201D; border-color: #2B3833; color: #E7EFEA; }
  [data-mode="dark"] .msort button { background: #17201D; border-color: #2B3833; color: #B7C4BE; }
  /* ビールのチップは --srm0(淡い紙色)なので、ダークだと文字が読めない */
  [data-mode="dark"] .mbrew .bbeers span,
  [data-mode="dark"] .mbrew .bsib button,
  [data-mode="dark"] .mbrew .btools button,
  [data-mode="dark"] .mbrew .bacts .det { background: #222927; border-color: #34403C; color: #E3E9E6; }
  [data-mode="dark"] .mbrew .bbeers .more { background: none; border: 0; color: #9AA7A1; }
  [data-mode="dark"] .mbrew .btags span { background: #3A3122; color: #E3E9E6; }
  [data-mode="dark"] .msort button[aria-pressed="true"] { background: #E7EFEA; border-color: #E7EFEA; color: #101614; }
}

/* ブルワリーの板: リンクの丸と「同じ会社の醸造所 ◯ ›」を1行に(見本 2_mobile_map/BrewerySelected。C-9) */
.mbrew .blinks { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mbrew .bsibgo { margin-left: auto; padding: 6px 0; border: 0; background: none; color: #4C7A3C;
  font: inherit; font-size: 13px; cursor: pointer; }
[data-mode='dark'] .mbrew .bsibgo { color: #8FC46A; }


/* スマホの上の検索欄・右上のボタン・下の切り替えは、この mobile.css が効いてから見せる
   (隠すのは globals.css。見た目の決まりが間に合わない一瞬に、素の部品が見えないように) */
html [data-ippai-float] { visibility: visible; }

/* Safari の上下の枠は、画面の後ろの色から色を取ることがある。地図の後ろもスタウトの暗い色にしておく
   (地図そのものの見た目は変わらない。app/(app)/layout.tsx の theme-color と合わせる) */
html.on-map, html.on-map body { background: #1E1811; }