/* ============================================================ listing_management_map.css — 掲載管理系ページ（個人／法人）で共有するスマートフォン地図UI（sticky表示・高さ・0件案内・読込失敗案内・カード一時強調）。個人向け /publisher_cards.html の実装（owner-map-* クラス）を正本とし、法人向け /business_listings.html（旧 lm-map-* クラス）をこれに合わせて統合した。ページ固有のカードデザイン・グリッド・フィルターUIはここに含めない（各ページの css/pages/*.css 側に残す）。 ============================================================ */ :root { /* 固定ヘッダーの高さ（.nav.open の top:58px と同じ基準）。両ページとも同じヘッダーマークアップのため共通の値でよい。ページ側で差し替えが必要な場合だけ、このページ内で上書きしてよい。 */ --listing-management-header-h: 58px; --listing-management-map-h: 320px; --listing-management-map-h-narrow: 200px; /* マーカー押下時にカードへスクロールする際、固定ヘッダー＋固定地図の下にカード上端が隠れないための scroll-margin-top 用の合計オフセット。地図の高さが600px以下で縮む分もあわせて追従させる。 */ --listing-management-scroll-offset: calc(var(--listing-management-header-h) + var(--listing-management-map-h) + 16px); } @media (max-width: 600px) { :root { --listing-management-scroll-offset: calc(var(--listing-management-header-h) + var(--listing-management-map-h-narrow) + 16px); } } /* ---------------------------------------------------------- 固定ヘッダー（スマートフォンのみ）ページ側のにこのクラスを付与したページだけに適用する（他ページ・PC表示には影響しない）。 ---------------------------------------------------------- */ @media (max-width: 767px) { .listing-management-sticky-page { padding-top: var(--listing-management-header-h); } .listing-management-sticky-page .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } } /* ---------------------------------------------------------- 地図ラッパー（sticky表示）固定ヘッダーの直下に固定し、カード一覧だけがその下を流れるようにする。 ---------------------------------------------------------- */ .listing-management-map-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: #f1f5f9; position: sticky; top: var(--listing-management-header-h); z-index: 5; } .listing-management-map-canvas { width: 100%; height: var(--listing-management-map-h); } @media (max-width: 600px) { /* スマホでは固定表示中も地図がカード一覧を占有しすぎないよう高さを抑える */ .listing-management-map-canvas { height: var(--listing-management-map-h-narrow); } } @media (max-width: 767px) { /* iOS Safari の position:sticky + backdrop-filter 組み合わせで起きる描画崩れ対策。独立した合成レイヤーに乗せ、固定ヘッダーの描画に影響しないようにする。 */ .listing-management-map-wrap { isolation: isolate; transform: translateZ(0); -webkit-transform: translateZ(0); } } /* 地図0件・APIキー未設定・読込失敗のいずれの案内文にも使う（地図インスタンス生成前のみ、地図canvas要素自身のinnerHTMLとして書き込む）。 */ .listing-management-map-note { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; } /* ---------------------------------------------------------- カードの一時強調（マーカー押下時）色だけに依存しないよう、枠線色に加えbox-shadowも変化させる。 ---------------------------------------------------------- */ .listing-management-card-highlight { border-color: rgba(20, 184, 166, 0.7); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); } /* ============================================================ A-8.7 第4回：地図・カード表示 / 一覧表示の役割分担、無限スクロール、地図範囲⇄カード連動、スマホ横向き2ペイン表示の共通部品。個人 /publisher_cards・法人 /business_listings で共有する。 ============================================================ */ /* ---------------------------------------------------------- 並び替え行（ソートセレクト＋件数表示） ---------------------------------------------------------- */ .lm-sort-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .lm-sort-row label { font-size: 12.5px; color: var(--muted); } .lm-range-count { font-size: 12.5px; color: var(--muted); margin-left: auto; } /* ---------------------------------------------------------- 「この範囲の掲載を表示」ボタン（地図パン・ズーム後にのみ表示） ---------------------------------------------------------- */ .listing-management-bounds-refresh-wrap { display: flex; justify-content: center; margin: 10px 0; } .listing-management-bounds-refresh-btn { background: var(--cta); border-color: var(--cta); color: #fff; font-weight: 700; box-shadow: 0 2px 10px rgba(2, 6, 23, 0.18); } .listing-management-bounds-refresh-btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); } /* ---------------------------------------------------------- 無限スクロール：センチネル・読込中表示・失敗時の再試行 ---------------------------------------------------------- */ .listing-feed-sentinel { min-height: 1px; padding: 14px 0; text-align: center; font-size: 12.5px; color: var(--muted); } .listing-feed-retry { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; text-align: center; font-size: 13px; color: var(--muted); } .listing-feed-retry-btn { min-height: 40px; } /* ---------------------------------------------------------- 地図・カードのレイアウト（既定：縦積み。移動・sticky挙動は既存のまま変更しない） ---------------------------------------------------------- */ .lm-mapcards-layout { display: block; } .lm-cards-pane { display: block; } .lm-cards-pane:focus { outline: none; /* マーカー押下後のprogrammatic focus用。可視のフォーカスリングは子カード側に出す */ } /* ---------------------------------------------------------- スマートフォン横向き：左に地図・右にカードの2ペイン表示。幅だけでは判定しない（iPhone横向きは768pxを超える機種がある）ため、 orientation:landscape と max-height（横向き時の実質的な低さ）を組み合わせて判定する。タッチ操作前提の端末に限定するため pointer:coarse も併用する。 ---------------------------------------------------------- */ @media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) { .listing-management-sticky-page { padding-top: 0; } .listing-management-sticky-page .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--listing-management-header-h); } /* 固定ヘッダー＋固定地図の下でbodyそのものは二重スクロールさせない。スクロールは右ペイン（.lm-cards-pane）だけが担当する。 */ body.listing-management-sticky-page { height: 100vh; height: 100dvh; overflow: hidden; } body.listing-management-sticky-page .lm-mapcards-layout.listing-management-landscape-split { display: flex; align-items: stretch; margin-top: var(--listing-management-header-h); height: calc(100vh - var(--listing-management-header-h)); height: calc(100dvh - var(--listing-management-header-h)); } body.listing-management-sticky-page .listing-management-landscape-split .listing-management-map-wrap { position: static; flex: 0 0 42%; max-width: 42%; margin-bottom: 0; height: 100%; } body.listing-management-sticky-page .listing-management-landscape-split .listing-management-map-canvas { height: 100%; } body.listing-management-sticky-page .listing-management-landscape-split .lm-cards-pane { flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-left: 10px; padding-bottom: env(safe-area-inset-bottom, 0); } }