/* ============================================================
   モバイル版レイアウト(デザインカンプ mobile_degi-cycle_CC2025 準拠)
   - ボトムタブ(マップ/コース/立ち寄りスポット/お気に入り/お知らせ)
   - コース一覧・絞り込みの全画面表示、コース詳細の全画面表示
   - PC 表示に影響しないよう、既存要素へのルールはすべて
     @media (max-width: 900px) 内に限定する
   ============================================================ */

/* モバイル専用の新規要素は PC ではすべて非表示(既存要素には触れない) */
.bottom-tabs, .m-lang, .dp-back, .dp-nearby-all { display: none; }

@media (max-width: 900px) {
  :root { --tabbar-h: calc(58px + env(safe-area-inset-bottom)); }

  /* ============ ヘッダー: ロゴ + 言語ボタンのみ(デザイン準拠) ============ */
  .search-box, .fav-btn, .mobile-menu-btn { display: none; }
  /* ヘッダーは z-index:1200 のスタッキングコンテキストを作るため、子要素の言語メニューに
     いくら大きな z-index を付けてもヘッダーより前面には出られない。
     モバイルではコース詳細(1450)・サイドパネル(1400)・ボトムタブ(1600)・スポット詳細モーダル(2000)が
     ヘッダー下に重なるので、ヘッダーごとそれらより前面(2100)に置いてメニューを最前面にする。
     (モーダル・パネルはいずれも top: var(--header-h) 以下に配置され、ヘッダー本体とは重ならない) */
  .app-header { justify-content: space-between; z-index: 2100; }
  .brand { max-width: 62vw; }

  .m-lang { display: block; position: relative; margin-left: auto; }
  .m-lang-btn {
    display: flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    border: 1.5px solid #fff; border-radius: 999px;
    color: #fff; font-size: 14px; font-weight: 700;
  }
  .m-lang-btn .icon { width: 18px; height: 18px; vertical-align: middle; }
  .m-lang-menu {
    position: absolute; top: 42px; right: 0; z-index: 1700;
    min-width: 140px; background: #fff; border-radius: 10px;
    box-shadow: var(--shadow); padding: 6px 0; overflow: hidden;
  }
  .m-lang-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  }
  .m-lang-item.active { color: var(--navy); background: #eef2fa; }

  /* ============ ボトムタブ ============ */
  .bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1600;
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
    background: #fff; border-top: 1px solid #e2e6ec;
  }
  .btab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: #8a94a2; padding: 4px 1px 2px;
  }
  .btab .bt-icon { width: 26px; height: 26px; flex-shrink: 0; }
  .btab span { font-size: 9.5px; font-weight: 700; line-height: 1.15; text-align: center; white-space: pre-line; }
  .btab.active { color: var(--navy); }

  /* 本体の高さをボトムタブ分だけ縮める */
  .app-body { height: calc(100dvh - var(--header-h) - var(--tabbar-h)); }

  /* ============ サイドパネル → 全画面ページ(コース / 立ち寄りスポット) ============ */
  /* タブ切替・言語タブはボトムタブ / ヘッダーに置き換えるため非表示 */
  .panel-tabs { display: none; }
  .side-panel .lang-tabs-mobile { display: none; }

  .side-panel {
    bottom: var(--tabbar-h);
    z-index: 1400; /* ボトムタブより下 */
  }
  body[data-mview="courses"] .side-panel,
  body[data-mview="spots"] .side-panel {
    transform: none;
    width: 100%;
    box-shadow: none;
  }
  .panel-section { padding: 18px 16px 30px; }
  .panel-heading { font-size: 17px; }

  /* ============ 地図上のフローティング要素 ============ */
  /* お知らせはボトムタブから開くため、地図上のパネルは出さない */
  .notices-panel { display: none !important; }
  /* お知らせパネルが無くなったぶん、ズーム・現在地を右上に整列(style.css の指定を継承) */

  /* ============ コース詳細: 全画面ページ(mobile01 準拠) ============ */
  .detail-panel {
    /* .map-wrap 基準の absolute ではなく画面基準で全画面化する */
    position: fixed;
    top: var(--header-h); left: 0; right: 0; bottom: var(--tabbar-h);
    width: auto; max-height: none;
    border-radius: 0;
    padding: 0 16px 24px;
    z-index: 1450;
  }
  /* 「‹ コース一覧に戻る」の紺色バー(ヘッダー直下・全幅) */
  .dp-back {
    display: flex; align-items: center; gap: 10px;
    position: sticky; top: 0; z-index: 6;
    width: calc(100% + 32px);
    margin: 0 -16px 14px; padding: 13px 18px;
    background: var(--navy); color: #fff;
    font-size: 15px; font-weight: 700; text-align: left;
  }
  .dp-back .chev-l { font-size: 18px; font-weight: 900; line-height: 1; }
  #dp-close { display: none; } /* 戻るバーがあるため ✕ は不要 */
  .dp-name { font-size: 20px; }
  .dp-stats { gap: 10px; }
  .dp-stat .val { font-size: 17px; }
  .dp-photo { aspect-ratio: 4 / 3; }
  .dp-desc { font-size: 13.5px; }
  .dp-actions { gap: 10px; }
  .dp-action { min-height: 112px; }
  .dp-action .al { font-size: 11px; }

  /* コース沿いのおすすめスポット: 見出し + すべて見る › */
  .dp-nearby-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .dp-nearby-head .dp-nearby-title { margin-bottom: 0; font-size: 14.5px; }
  .dp-nearby-all {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--navy); font-size: 13px; font-weight: 900; flex-shrink: 0;
  }

  /* ============ モーダル: 全画面ページ化(スポット詳細 mobile03 ほか) ============ */
  .modal-backdrop {
    padding: 0;
    top: var(--header-h);    /* 紺色ヘッダーは見えたまま */
    bottom: var(--tabbar-h); /* ボトムタブは見えたまま */
    align-items: stretch;
  }
  .modal {
    max-width: none; max-height: none; height: 100%;
    border-radius: 0;
  }
  .modal.modal-wide { max-height: none; padding: 16px 16px 28px; }

  /* スポット詳細: 上部を「カテゴリ + アイコン列」に(mobile03 準拠) */
  .modal-wide .sp-head { position: relative; flex-direction: column; padding-right: 0; gap: 4px; }
  .modal-wide .sp-head-right {
    position: absolute; top: -2px; right: 0;
    flex-direction: column; align-items: flex-end; gap: 8px;
  }
  .modal-wide .sp-head-right::before { content: ''; } /* レイアウト保持用 */
  .modal-wide .sp-navcard {
    flex-direction: row; width: auto; padding: 2px; border: none; background: none;
  }
  .modal-wide .sp-navcard img { width: 30px; height: 30px; }
  .modal-wide .sp-navcard span { display: none; }
  /* Googleマップ・Appleマップを横並びに */
  .modal-wide .sp-head-right { flex-direction: row; align-items: center; gap: 10px; top: 0; right: 76px; }
  .modal-wide .sp-report-btn { position: absolute; top: 44px; right: -70px; font-size: 11px; padding: 6px 10px; }
  .modal-wide .sp-corner { top: 20px; right: 18px; }
  .modal-wide .sp-name { font-size: 19px; margin-bottom: 6px; }
  .modal-wide .sp-addr { font-size: 12.5px; }
  .modal-wide .sp-facgrid { max-width: none; }
  .modal-wide .sp-fac { min-height: 84px; padding: 12px 2px 8px; }
  .modal-wide .sp-fac img { width: 34px; height: 32px; }
  .modal-wide .sp-fac .fl { font-size: 11px; }
}