/* ================================================================
   mottoku — スマホの「アプリの形」（app.css）2026-10-05
   May「移动端改造成 app 的模式」。base.html が全ページで最後に読む。

   🔴 アプリの形のルールは全部 max-width:1024px の中＝PC（1025px〜）には効かない。
      例外は先頭の「ヘッダ」だけ：全ページ・全幅で同じ見た目にするための正本（May「页眉要全站所有页面一致」）。
      2026-10-05 May 裁決で「スマホ（〜767）＋タブレット縦（768〜1024）」に適用。
      1024 は iPad Pro 12.9 の縦。横置きの iPad（1080〜）は PC の形のまま。
      home-top.css / home-banner-art.css / home.js の「アプリの形」の断点もこれと揃える。

   形の決め事:
   - 上は「アプリバー」：ロゴ＋操作アイコンだけの 52px。コラムとお気に入りは下のタブへ移すので
     ヘッダからは外す（同じ行き先が 2 か所にあると、どちらを押すか迷わせる）。
   - 下は 5 つのタブ（ホーム／お得情報／キャンペーン／コラム／お気に入り）。
     いまいる場所は「色＋太字＋アイコンの下地」の 3 つで示す（色だけに頼らない）。
   - 色は --app-* だけを使う。ページ側の :root が --brand-light 等を別の意味で
     上書きすることがある（イベント LP など）ので、共用部品は自前の名前を持つ。
   ================================================================ */

:root {
  --app-accent: #047857;                  /* #047857 on #fff = 5.5:1 */
  --app-accent-soft: rgba(4, 120, 87, 0.12);
  --app-ink: #5b6576;                     /* 非選択タブ。#5b6576 on #fff = 5.9:1 */
  --app-bar-bg: rgba(255, 255, 255, 0.92);
  --app-tab-h: 58px;
}
[data-theme="dark"] {
  --app-accent: #6ee7b7;                  /* on #0f172a = 11:1 */
  --app-accent-soft: rgba(110, 231, 183, 0.14);
  --app-ink: #94a3b8;                     /* on #0f172a = 6.9:1 */
  --app-bar-bg: rgba(15, 23, 42, 0.92);
}

/* ---------- ヘッダ（全ページ・全幅の正本）2026-10-05 ----------
   トップだけが「静かな形」（地・枠・影なし、文字とアイコンだけ）で、他のページは緑・赤の地に枠のボタンだった
   ＝ページを移るたびにヘッダが変わって見えた。静かな形（トップ改版の方向）を全ページにそろえる。
   言語切替も全ページに出す（base.html・i18n.menu）。 */
.site-header .site-brand { flex-shrink: 0; white-space: nowrap; }
.site-header .site-brand-icon { box-shadow: none; }
.site-header .site-name { color: var(--app-accent); background: none; -webkit-text-fill-color: currentColor; }
.site-header .site-koramu-link,
.site-header .site-mm-link,
.site-header .site-fav-link,
.site-header .site-theme-toggle,
.site-header .site-lang-btn {
  min-height: 44px; border-color: transparent; border-radius: 6px;
  background: transparent; box-shadow: none; color: var(--text-secondary);
}
.site-header .site-koramu-link:hover,
.site-header .site-mm-link:hover,
.site-header .site-fav-link:hover,
.site-header .site-theme-toggle:hover,
.site-header .site-lang-btn:hover,
.site-header .site-lang[open] .site-lang-btn {
  border-color: transparent; background: var(--border-light); color: var(--app-accent); box-shadow: none; transform: none;
}
[data-theme="dark"] .site-header .site-fav-link,
[data-theme="dark"] .site-header .site-theme-toggle { border-color: transparent; background: transparent; }
[data-theme="dark"] .site-header .site-theme-toggle { color: #fcd34d; }
[data-theme="dark"] .site-header .site-fav-link:hover,
[data-theme="dark"] .site-header .site-theme-toggle:hover { background: var(--border-light); }
/* 言語切替：その言語の版が無いページで「紹介ページへ」になる項目の注記 */
.site-lang-fb { margin-left: auto; padding-left: 12px; font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

.app-tabbar { display: none; }

@media (max-width: 1024px) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, summary, label { touch-action: manipulation; }

  /* 固定タブの分だけ下を空ける（最後のフッタがタブの裏に隠れない） */
  body { padding-bottom: calc(var(--app-tab-h) + env(safe-area-inset-bottom, 0px)); }

  /* ---------- 上：アプリバー ---------- */
  .site-header .header-inner { min-height: 52px; padding: 4px 6px 4px 16px; gap: 0; }
  .site-header .site-brand { gap: 8px; padding: 4px; margin: -4px; }
  .site-header .site-brand:hover { transform: none; background: transparent; }
  .site-header .site-brand-icon { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
  .site-header .site-name { font-size: 21px; }
  .site-header .site-tagline,
  .site-header .site-koramu-link,
  .site-header .site-fav-link { display: none; }
  /* 残るアイコン（運営ブログ・言語・テーマ）は枠も影も無い 44px の的に揃える。
     トップだけ静かで他ページは色つきの枠、だった不揃いもここで消える。 */
  .site-header .site-mm-link,
  .site-header .site-theme-toggle,
  .site-header .site-lang-btn {
    width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0;
    border: 0; border-radius: 12px; background: transparent; box-shadow: none;
    color: var(--text-secondary);
  }
  .site-header .site-lang { margin: 0; }
  .site-header .site-mm-text,
  .site-header .site-lang-text { display: none; }   /* 641px 以上では文字が付く＝44px の的に入らない */
  .site-header .site-mm-link:hover,
  .site-header .site-theme-toggle:hover,
  .site-header .site-lang-btn:hover { transform: none; box-shadow: none; background: transparent; }
  .site-header .site-mm-link:active,
  .site-header .site-theme-toggle:active,
  .site-header .site-lang-btn:active { background: var(--border-light); }
  .site-header .site-user { margin-left: 4px; }
  [data-theme="dark"] .site-header .site-theme-toggle { background: transparent; color: #fcd34d; }

  /* ---------- 下：タブ ---------- */
  .app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 2px 2px env(safe-area-inset-bottom, 0px);
    background: var(--app-bar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border);
    transition: transform 0.22s ease;
  }
  .app-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; min-height: 54px; padding: 3px 0 2px;
    color: var(--app-ink); font-size: 11px; font-weight: 600; line-height: 1.25;
    text-align: center; text-decoration: none;
    -webkit-user-select: none; user-select: none;
  }
  .app-tab-ico {
    display: grid; place-items: center; width: 56px; height: 30px; border-radius: 15px;
    transition: background-color 0.2s ease, transform 0.12s ease;
  }
  .app-tab-label { max-width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-tab.is-active { color: var(--app-accent); font-weight: 800; }
  .app-tab.is-active .app-tab-ico { background: var(--app-accent-soft); }
  .app-tab.is-active svg { stroke-width: 2.4; }
  .app-tab:active .app-tab-ico { transform: scale(0.9); }
  .app-tab:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -3px; border-radius: 12px; }
  /* 入力中（キーボードが出ている間）はタブを下へ逃がす。base.html の小さな script が印を付ける */
  html.app-typing .app-tabbar { transform: translateY(100%); }

  /* 下から出るトーストはタブの上に出す */
  .copy-toast { bottom: calc(var(--app-tab-h) + 16px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- /deals：上の大きな看板を 1 段の帯に ----------
     ロゴはアプリバーにもう出ているので、看板の「mottoku.」と標語は見た目だけ隠す
     （h1 は読み上げ・検索エンジン向けに残る）。件数とモールの凡例を 1 段に並べる。 */
  .hero-v2 { padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; }
  .hero-v2-inner { display: block; }
  .hero-v2-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; min-width: 0; }
  .hero-v2-stats { align-items: flex-start; gap: 6px; text-align: left; }
  .hero-stat { gap: 6px; }
  .hero-stat-num { font-size: 22px; }
  .hero-stat-label { font-size: 12px; }
  .hero-stat-platforms { flex-wrap: nowrap; gap: 0 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; font-size: 11.5px; }
  .hero-stat-platforms::-webkit-scrollbar { display: none; }

  /* ---------- フッタ ---------- */
  .site-footer { padding: 24px 16px 20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* 🔴 横並びのまま縮むと、リンク 1 つずつが「ホ／ー／ム」と 1 字ずつ縦に割れていた
     （2026-10-05 実測・390px）。折り返しを許して、語の中では割らない。 */
  .footer-links { flex-wrap: wrap; gap: 0 18px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
  .footer-media { padding-bottom: 10px; }
  .footer-disclosure { margin-top: 8px; }
  .api-credits { padding-bottom: 4px; }
}

/* タブレット縦（768〜1024px）：本文の左右余白は 24px（home.css の --hm-gutter と同じ）に揃え、
   タブは 5 つを中央の 640px に集める（横いっぱいに散らすと親指から遠い）。 */
@media (min-width: 768px) and (max-width: 1024px) {
  .app-tabbar { padding-left: max(2px, calc((100% - 640px) / 2)); padding-right: max(2px, calc((100% - 640px) / 2)); }
}
/* 768px ちょうどは home.css がまだ 16px 余白（≤768）なので、24px にするのは 769px から */
@media (min-width: 769px) and (max-width: 1024px) {
  .site-header .header-inner { padding-left: 24px; padding-right: 14px; }
  .site-footer { padding-left: 24px; padding-right: 24px; }
}

/* 320px 級の端末：5 等分で 1 枠 64px。「キャンペーン」（6 字）が 11px だと末尾が切れる */
@media (max-width: 359px) {
  .site-header .site-brand-icon { display: none; }
  .app-tab { font-size: 10px; }
  .app-tab-label { padding: 0; letter-spacing: -0.02em; }
  .app-tab-ico { width: 48px; }
}

/* 画面の切り替えを、アプリと同じく「上下のバーは据え置き・中身だけ入れ替え」にする。
   対応ブラウザ（Safari 18.2+ / Chrome 126+）だけで効き、それ以外は従来どおり。 */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.18s; }
  .site-header { view-transition-name: app-header; }
  .app-tabbar { view-transition-name: app-tabbar; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .app-tabbar, .app-tab-ico { transition: none; }
}

/* ---------- 手机の字号（2026-10-06 May「整体字可以更小一号…这几个修正对mottoku全站有效」） ----------
   style.css（285 箇所）と koramu.css は rem で書いてある＝根を 16→15px にすると全部が 1 段小さくなる。
   rem を持たない地の文字（body 14px を継ぐもの）は 14→13px。
   🔴 手机（〜767）だけ。タブレット縦（768〜1024）と PC は今の字号のまま。
   home.css 等の px 直書きは変わらない（ホームは px で組んであり、そちらは個別に詰めてある）。 */
@media (max-width: 767px) {
  html { font-size: 15px; }
  body { font-size: 13px; }
}