/*
 * マチベース マイページ「わたしのまち」最終改善版モックアップ
 * - v0.4.7 投稿ページ（.mbmc-create）の青系トークン・書体・ボタン寸法を写して使う。
 * - mycity.css は読み込まず、上書きしない。製品UIは .mbmp- 、モック操作は .mock- に限定。
 */

/* ---------- ページ土台（モック単体表示用） ---------- */
body.mbmp-page { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: #fff; -webkit-text-size-adjust: 100%; }
/* 内容が短い画面でもフッターとの間に白い帯を出さない */
body.mbmp-page > main { flex: 1 0 auto; background: #f5f7fa; }
html.mbmp-lock, html.mbmp-lock body { overflow: hidden; }

.mbmp, .mbmp-layer-root, .mbmp-site-header, .mbmp-site-footer, .mbmp-toast {
	--bg: #f5f7fa;
	--card: #fff;
	--text: #1c395d;
	--sub: #64768c;
	--muted: #8396ab;
	--line: #dce4ed;
	--line2: #bccbdc;
	--blue: #2a578e;
	--blue-dark: #20446e;
	--pale: #eaf0f7;
	--pale2: #f4f7fb;
	--hero: #eef3f8;
	--empty: #eef3f8;
	--empty-line: #cbd9e8;
	--danger: #a3412a;
	--danger-bg: #fdecea;
	--warn: #8a5a2e;
	--warn-bg: #faf1e8;
	--hanko: #c4532e;
	--radius: 10px;
	font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	color: var(--text);
	font-size: 15px;
	line-height: 1.7;
}
.mbmp *, .mbmp *::before, .mbmp *::after,
.mbmp-layer-root *, .mbmp-layer-root *::before, .mbmp-layer-root *::after { box-sizing: border-box; }
.mbmp img, .mbmp-layer-root img { display: block; max-width: 100%; }
.mbmp button, .mbmp-layer-root button, .mbmp input, .mbmp-layer-root input, .mbmp-layer-root textarea { font-family: inherit; }
.mbmp [hidden], .mbmp-layer-root [hidden] { display: none !important; }
.mbmp :focus-visible, .mbmp-layer-root :focus-visible, .mbmp-site-header :focus-visible, .mbmp-site-footer :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mbmp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mbmp-wrap { width: 100%; max-width: 1072px; margin: 0 auto; padding: 0 16px; }

/* ---------- 共通ヘッダー（仮：本番テーマのヘッダーに置き換える） ---------- */
.mbmp-site-header { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.mbmp-site-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 16px; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mbmp-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); text-decoration: none; }
.mbmp-logo-mark { display: grid; grid-template-columns: repeat(3, 5px); gap: 2px; }
.mbmp-logo-mark i { width: 5px; height: 5px; background: #2a578e; border-radius: 1px; }
.mbmp-logo-mark i:nth-child(2n) { background: #6f9ccc; }
.mbmp-logo-text { display: flex; flex-direction: column; line-height: 1; }
.mbmp-logo-text b { font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.mbmp-logo-text small { font-size: 8px; letter-spacing: .2em; color: var(--sub); margin-top: 3px; }
.mbmp-site-nav { display: flex; align-items: center; gap: 2px; }
.mbmp-site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 13px; color: var(--sub); text-decoration: none; }
.mbmp-site-nav a.is-current { color: var(--blue); font-weight: 700; box-shadow: inset 0 -2px 0 var(--blue); }
.mbmp-site-nav .mbmp-nav-post { margin-left: 6px; background: #3b6fd4; color: #fff; font-weight: 700; border-radius: 999px; padding: 0 16px; min-height: 40px; }
@media (max-width: 599px) { .mbmp-site-nav .mbmp-nav-hide { display: none; } }

/* ---------- 共通フッター（仮） ---------- */
.mbmp-site-footer { background: #111; color: #d7d7d7; flex-shrink: 0; }
.mbmp-site-footer-inner { max-width: 1200px; margin: 0 auto; padding: 26px 16px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: 13px; }
.mbmp-site-footer a { color: #d7d7d7; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.mbmp-site-footer-note { color: #9a9a9a; font-size: 12px; align-self: center; }

/* ---------- 見出し帯（投稿ページの淡い青の帯と同じ） ---------- */
.mbmp-hero { background: var(--hero); border-bottom: 1px solid #dce5ef; padding: 14px 0 14px; }
.mbmp-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mbmp-title { margin: 0; font-size: clamp(25px, 2.7vw, 34px); line-height: 1.35; font-weight: 750; letter-spacing: .03em; }
.mbmp-lead { margin: 2px 0 0; font-size: 13px; line-height: 1.9; color: #607287; }
.mbmp-identity { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: #42607f; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.mbmp-identity::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8ea4bb; }
.mbmp-identity.is-account::before { background: #3f8f5a; }

.mbmp-account { margin-top: 10px; font-size: 13px; line-height: 1.7; color: #42607f; }
.mbmp-account b { color: var(--text); font-weight: 700; }
.mbmp-account-more { position: relative; display: inline; border: none; background: none; padding: 0; margin: 0 0 0 4px; color: var(--blue); font-size: 13px; line-height: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mbmp-account-more::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.mbmp-account-panel { margin-top: 10px; max-width: 640px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; font-size: 13px; color: #42607f; }
.mbmp-account-panel ul { margin: 0; padding: 0 0 0 1.2em; }
.mbmp-account-panel li + li { margin-top: 4px; }
.mbmp-account-panel-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* コレクションの棚（2地域以上）：ミニ写真帖を並べ、押すとそのカードへ */
.mbmp-shelf { margin: 16px -16px 0; padding: 0 16px 4px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.mbmp-shelf-item { flex: 0 0 auto; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 14px 8px 8px; background: #fff; border: 1px solid #dbe4ee; border-radius: 12px; color: var(--text); text-decoration: none; cursor: pointer; font-size: 14px; text-align: left; box-shadow: 0 3px 12px rgba(28,57,93,.05); }
.mbmp-shelf-item:hover { border-color: #9fb8d3; }
.mbmp-shelf-mini { display: grid; grid-template-columns: repeat(3, 14px); gap: 1.5px; border-radius: 4px; overflow: hidden; }
.mbmp-shelf-mini span { width: 14px; height: 14px; background: var(--empty); }
.mbmp-shelf-mini img { width: 14px; height: 14px; object-fit: cover; }
.mbmp-shelf-name { display: block; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.mbmp-shelf-state { display: block; font-size: 11px; color: var(--sub); white-space: nowrap; }
.mbmp-shelf-item.is-complete .mbmp-shelf-state { color: var(--hanko); font-weight: 700; }

/* ---------- セクション（背景の切り替えで抑揚をつける） ---------- */
.mbmp-band { padding: 16px 0 30px; }
.mbmp-band.is-white { background: #fff; }
.mbmp-band.is-pale { background: var(--bg); border-top: 1px solid #e8edf3; }
.mbmp-band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mbmp-band-title { margin: 0; font-size: 20px; font-weight: 750; line-height: 1.45; }
.mbmp-band-eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #607a98; }
.mbmp-band-desc { margin: 4px 0 0; font-size: 13px; color: var(--sub); }

/* 並び替え・絞り込み（4地域以上） */
.mbmp-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.mbmp-filter button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #dae3ed; background: #fff; color: #385978; font-size: 13px; cursor: pointer; }
.mbmp-filter button[aria-pressed="true"] { background: #294e7c; border-color: #294e7c; color: #fff; font-weight: 700; }
.mbmp-filter b { font-weight: 700; margin-left: 4px; }

/* ---------- ボタン（v0.4.7：48px・角丸6px・塗り＝主操作） ---------- */
.mbmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px; border-radius: 6px; border: 1px solid var(--blue); background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; }
.mbmp-btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.mbmp-btn:disabled, .mbmp-btn[aria-disabled="true"] { background: var(--line); border-color: var(--line); color: var(--sub); cursor: not-allowed; }
.mbmp-btn-secondary { background: #fff; color: var(--blue); font-weight: 500; }
.mbmp-btn-secondary:hover { background: var(--pale2); color: var(--blue-dark); }
.mbmp-btn-secondary:disabled, .mbmp-btn-secondary[aria-disabled="true"] { background: #fff; border-color: var(--line); color: #9aaabb; }
.mbmp-btn-danger { background: var(--danger); border-color: var(--danger); }
.mbmp-btn-danger:hover { background: #873320; border-color: #873320; }
.mbmp-btn-small { min-height: 44px; padding: 0 14px; font-size: 14px; }
.mbmp-btn-block { display: flex; width: 100%; }
.mbmp-btn svg { flex: none; }
.mbmp-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.mbmp-btn.is-busy::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; border-right-color: transparent; animation: mbmp-spin .7s linear infinite; }
.mbmp-btn-secondary.is-busy::after { border-color: var(--blue); border-right-color: transparent; }
@keyframes mbmp-spin { to { transform: rotate(360deg); } }
.mbmp-link { border: none; background: none; padding: 0 4px; min-height: 44px; color: var(--sub); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mbmp-link-danger { color: var(--danger); }
.mbmp-icon-btn { width: 44px; height: 44px; flex: none; border: none; background: transparent; color: var(--sub); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mbmp-icon-btn:hover { background: var(--pale2); color: var(--text); }

/* ---------- 地域のコレクションカード ---------- */
.mbmp-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.mbmp-card { position: relative; min-width: 0; background: #fff; border: 1px solid #e1e7ed; border-radius: var(--radius); padding: 14px 14px 16px; box-shadow: 0 8px 30px #1d42610d; scroll-margin-top: 16px; }
.mbmp-card.is-complete { border-color: #c9d8ea; box-shadow: 0 10px 34px #1d426117; }
.mbmp-card.is-flash { animation: mbmp-flash 1.2s ease-out; }
@keyframes mbmp-flash { 0% { box-shadow: 0 0 0 4px #9fbde0; } 100% { box-shadow: 0 8px 30px #1d42610d; } }
.mbmp-card-head { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.mbmp-card-titles { flex: 1 1 auto; min-width: 0; }
.mbmp-card-pref { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #607a98; line-height: 1.4; }
.mbmp-card-title { margin: 0; font-size: 21px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.mbmp-card-title a, .mbmp-card-title button { color: inherit; text-decoration: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.mbmp-card-title button:hover { text-decoration: underline; text-underline-offset: 4px; }
.mbmp-card-title button { position: relative; }
/* 見た目は文字の高さのまま、タップ領域を44pxに */
.mbmp-card-title button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.mbmp-badge { flex: none; white-space: nowrap; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--blue); color: var(--blue); background: #fff; }
.mbmp-badge.is-complete { background: var(--blue); color: #fff; }
.mbmp-card-more { margin-right: -8px; }

/* 3×3 写真グリッド。写真の面を広く取り、未選択枠は淡い無地＋小さな番号 */
.mbmp-grid-btn { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; position: relative; margin-top: 10px; border-radius: 8px; text-align: left; }
.mbmp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-radius: 8px; overflow: hidden; }
.mbmp-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--empty); min-width: 0; }
.mbmp-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mbmp-grid-btn:hover .mbmp-tile img { transform: scale(1.03); }
.mbmp-tile-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 7px 5px; font-size: 11px; line-height: 1.35; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(12,26,44,.78), rgba(12,26,44,0)); overflow-wrap: anywhere; }
.mbmp-tile-no { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.92); color: var(--text); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.mbmp-tile.is-empty { display: flex; align-items: center; justify-content: center; color: #a9bbcd; font-size: 11px; font-weight: 700; background: #f3f6fa; }
.mbmp-tile.is-empty::before { content: ''; position: absolute; inset: 7px; border: 1px dashed #d9e3ee; border-radius: 4px; }
.mbmp-tile-noimg { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 8px 30px; color: var(--muted); font-size: 10px; text-align: center; background: repeating-linear-gradient(135deg, #f2f6fa 0 8px, #edf2f7 8px 16px); }
.mbmp-tile-noimg svg { width: 22px; height: 22px; }

/* 完成の印：投稿完了ページ（v0.4.7）のはんこと同じ赤丸 */
/* 写真の名前（下）に重ならないよう、グリッドの右上の角に半分はみ出して押す */
.mbmp-hanko { position: absolute; right: -10px; top: -12px; z-index: 2; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--hanko); color: var(--hanko); background: rgba(255,255,255,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-12deg); font-weight: 800; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; }
.mbmp-hanko b { font-size: 26px; }
.mbmp-hanko small { font-size: 9px; letter-spacing: .1em; margin-top: 2px; }

/* 進捗：投稿ページと同じ9つの点 */
.mbmp-progress { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.mbmp-dots { display: inline-flex; gap: 5px; }
.mbmp-dot { width: 9px; height: 9px; border-radius: 50%; background: #d7e0ea; }
.mbmp-dot.is-on { background: var(--blue); }
.mbmp-card.is-complete .mbmp-dot.is-on { background: var(--hanko); }
.mbmp-progress-text { font-size: 13px; color: var(--sub); }
.mbmp-progress-text b { font-size: 19px; font-weight: 750; color: var(--blue); margin-right: 1px; }
.mbmp-card.is-complete .mbmp-progress-text b { color: var(--hanko); }
.mbmp-progress-note { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 700; color: var(--blue-dark); }
.mbmp-card.is-complete .mbmp-progress-note { color: #8f3a1f; }
.mbmp-comment { margin: 10px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid #cfdbe8; font-size: 14px; line-height: 1.7; color: #2d4a6c; }
.mbmp-actions { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.mbmp-actions .mbmp-btn-secondary { padding: 0 14px; font-size: 14px; }
.mbmp-meta { margin: 10px 0 0; font-size: 12px; color: var(--muted); }

/* 主役カード（いちばん最近ふれたまち）：PCでは写真を大きく左に */
.mbmp-card.is-feature .mbmp-card-title { font-size: 24px; }
.mbmp-reasons { display: none; list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.mbmp-reasons-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #607a98; }
.mbmp-reasons li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.mbmp-reasons img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; }
.mbmp-reasons b { display: block; font-size: 12px; color: var(--sub); font-weight: 700; }
.mbmp-reasons span { font-size: 14px; line-height: 1.55; color: #2d4a6c; }

/* カード内のお知らせ（例外） */
.mbmp-notes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mbmp-note { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; padding: 8px 10px; border-radius: 6px; background: var(--pale2); color: #36557a; }
.mbmp-note.is-warn { background: var(--warn-bg); color: #6f4a26; }
.mbmp-note svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }

/* 「その他」メニュー */
.mbmp-menu { position: absolute; z-index: 30; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(28,57,93,.18); padding: 6px; }
.mbmp-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: none; background: none; border-radius: 6px; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.mbmp-menu button:hover, .mbmp-menu button:focus-visible { background: var(--pale2); }
.mbmp-menu button svg { width: 18px; height: 18px; color: var(--sub); flex: none; }
.mbmp-menu .is-danger, .mbmp-menu .is-danger svg { color: var(--danger); }
.mbmp-menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 6px; }

/* ---------- 引き継ぎ候補 ---------- */
.mbmp-candidate { background: #fff; border: 1px solid #c9d8e8; border-left: 4px solid var(--blue); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.mbmp-candidate .mbmp-grid { gap: 1px; border-radius: 4px; }
.mbmp-candidate .mbmp-tile.is-empty::before, .mbmp-mini .mbmp-tile.is-empty::before { display: none; }
.mbmp-candidate .mbmp-tile.is-empty, .mbmp-mini .mbmp-tile.is-empty { font-size: 0; }
.mbmp-candidate-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.mbmp-candidate-text { margin: 2px 0 0; font-size: 12px; color: var(--sub); }
.mbmp-candidate-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.mbmp-candidate.is-collapsed { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-left-color: var(--line2); }
.mbmp-candidate.is-collapsed p { margin: 0; font-size: 13px; color: var(--sub); }
.mbmp-band-candidate { padding: 16px 0 0; background: #fff; }

/* ---------- 保管中（同じまちの2つめ以降） ---------- */
.mbmp-stored-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mbmp-stored { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: start; background: #fff; border: 1px solid #e1e7ed; border-radius: 10px; padding: 12px; }
.mbmp-stored .mbmp-grid { gap: 2px; border-radius: 5px; }
.mbmp-stored .mbmp-tile.is-empty::before { display: none; }
.mbmp-stored .mbmp-tile.is-empty { font-size: 0; }
.mbmp-stored-head { display: flex; align-items: flex-start; gap: 6px; }
.mbmp-stored-title { margin: 0; flex: 1; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.mbmp-stored-sub { margin: 2px 0 0; font-size: 12px; color: var(--sub); }
.mbmp-stored-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.mbmp-stored .mbmp-card-more { margin: -6px -6px 0 0; }
.mbmp-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 3px; padding: 0 6px; background: var(--pale); color: var(--blue-dark); vertical-align: 2px; margin-left: 4px; }
.mbmp-tag.is-warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- 投稿0件 ---------- */
.mbmp-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
.mbmp-welcome-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #607a98; }
.mbmp-welcome-title { margin: 4px 0 0; font-size: 26px; font-weight: 750; line-height: 1.45; letter-spacing: .02em; }
.mbmp-welcome-lead { margin: 10px 0 0; font-size: 14px; color: #4f6680; line-height: 1.9; }
.mbmp-welcome-lead strong { color: #244c7d; }
.mbmp-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mbmp-steps li { background: var(--pale2); border-radius: 8px; padding: 10px 8px; text-align: center; font-size: 12px; color: #4f6680; line-height: 1.5; }
.mbmp-steps b { display: block; font-size: 18px; color: var(--blue); font-weight: 750; }
.mbmp-welcome-actions { margin-top: 18px; }
.mbmp-welcome-note { margin: 10px 0 0; font-size: 12px; color: var(--sub); }
/* 見本のスポット写真は3×3にせず、ずらした並びで「自分の写真帖」と区別 */
.mbmp-samples { position: relative; }
.mbmp-samples-label { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: 12px; color: var(--sub); }
.mbmp-samples-label span { flex: none; white-space: nowrap; font-size: 11px; font-weight: 700; color: #4f6680; background: var(--pale); border-radius: 3px; padding: 0 6px; }
.mbmp-samples-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
.mbmp-sample { margin: 0; min-width: 0; }
.mbmp-sample:nth-child(2n) { margin-top: 18px; }
.mbmp-sample img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.mbmp-sample figcaption { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--sub); overflow-wrap: anywhere; }

/* ---------- 別のまち・メインなし・読み込み失敗 ---------- */
.mbmp-areas { display: flex; gap: 10px; flex-wrap: wrap; }
.mbmp-area-new { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px 6px 8px; background: #fff; border: 1.5px dashed var(--blue); border-radius: 999px; color: var(--blue-dark); font-size: 14px; font-weight: 700; cursor: pointer; }
.mbmp-area-new:hover { background: var(--pale2); }
.mbmp-area-new span { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.mbmp-area-new small { font-weight: 500; color: var(--sub); font-size: 12px; }
.mbmp-nomain { background: #fff; border: 1px solid #e1e7ed; border-radius: 10px; padding: 16px; font-size: 14px; color: #36557a; }
.mbmp-nomain p { margin: 0; }
.mbmp-nomain b { display: block; font-size: 16px; color: var(--text); margin-bottom: 4px; }
.mbmp-alert { display: flex; gap: 10px; background: var(--danger-bg); border: 1px solid #f0c2b6; border-radius: 10px; padding: 14px 16px; color: #6d2c1c; }
.mbmp-alert svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.mbmp-alert p { margin: 0; font-size: 14px; }

/* ---------- ダイアログ（スマホ：下から出るシート／PC：中央） ---------- */
.mbmp-layer-root { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.mbmp-backdrop { position: absolute; inset: 0; background: rgba(20,36,58,.52); }
.mbmp-dialog { position: relative; width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); background: #fff; border-radius: 16px 16px 0 0; display: flex; flex-direction: column; box-shadow: 0 -8px 40px rgba(20,36,58,.2); animation: mbmp-up .18s ease-out; }
.mbmp-dialog.is-tall { height: calc(100vh - 32px); height: calc(100dvh - 32px); }
@keyframes mbmp-up { from { transform: translateY(24px); opacity: .4; } }
.mbmp-dialog-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 8px 6px 18px; }
.mbmp-dialog.is-tall .mbmp-dialog-head { border-bottom: 1px solid var(--line); }
.mbmp-dialog-title { margin: 0; flex: 1; min-width: 0; font-size: 17px; font-weight: 750; line-height: 1.45; }
.mbmp-dialog-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 18px 18px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mbmp-dialog-body > p { margin: 0 0 10px; font-size: 14px; color: #3f5c7d; }
.mbmp-dialog-foot { flex: none; border-top: 1px solid var(--line); padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: #fff; border-radius: 0 0 16px 16px; }
.mbmp-dialog-foot .mbmp-btn { padding: 0 10px; font-size: 14px; letter-spacing: 0; }
.mbmp-dialog-foot > .is-wide { grid-column: 1 / -1; }
.mbmp-dialog-foot > .mbmp-link { grid-column: 1 / -1; justify-self: center; }
.mbmp-dialog-error { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--danger); background: var(--danger-bg); border-radius: 6px; padding: 8px 10px; }
.mbmp-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-radius: 4px; overflow: hidden; }
.mbmp-target { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--pale2); border-radius: 10px; padding: 10px; margin: 0 0 12px; }
.mbmp-target-name { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.mbmp-target-sub { margin: 0; font-size: 12px; color: var(--sub); }
.mbmp-bullets { margin: 0; padding: 0 0 0 1.2em; font-size: 13px; color: #3f5c7d; }
.mbmp-bullets li + li { margin-top: 4px; }
.mbmp-keep { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #eef6ee; color: #2e5a35; font-size: 13px; font-weight: 700; }
.mbmp-keep svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* 地域カードを開いた画面 */
.mbmp-detail-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.mbmp-detail-title { margin: 4px 0 0; font-size: 26px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.mbmp-detail-grid { position: relative; margin-top: 14px; }
.mbmp-detail-grid .mbmp-grid { gap: 4px; border-radius: 10px; }
.mbmp-detail-grid .mbmp-tile-name { font-size: 12px; }
.mbmp-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mbmp-detail-actions > .mbmp-btn:first-child { grid-column: 1 / -1; }
.mbmp-picks { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.mbmp-picks li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mbmp-picks img, .mbmp-picks .mbmp-picks-noimg { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: none; background: var(--empty); }
.mbmp-picks b { display: block; font-size: 14px; line-height: 1.5; }
.mbmp-picks p { margin: 2px 0 0; font-size: 14px; color: #3f5c7d; }
.mbmp-picks small { display: block; font-size: 12px; color: var(--sub); }
.mbmp-detail-danger { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.mbmp-view-switch { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: 999px; padding: 3px; margin: 10px 0 0; background: #fff; }
.mbmp-view-switch button { min-height: 44px; padding: 0 14px; border: none; border-radius: 999px; background: none; font-size: 13px; color: var(--sub); cursor: pointer; white-space: nowrap; }
.mbmp-view-switch button[aria-pressed="true"] { background: var(--blue); color: #fff; font-weight: 700; }
.mbmp-public-note { margin: 10px 0 0; font-size: 13px; color: #36557a; background: var(--pale2); border-radius: 8px; padding: 8px 10px; }

/* 共有 */
.mbmp-share-preview { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg); }
.mbmp-share-preview-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--sub); }
.mbmp-share-card { background: #fff; border-radius: 8px; padding: 10px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; box-shadow: 0 2px 10px rgba(28,57,93,.06); }
.mbmp-share-card-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.mbmp-share-card-sub { margin: 2px 0 0; font-size: 12px; color: var(--sub); }
.mbmp-share-diff { margin: 10px 0 0; font-size: 13px; color: #36557a; display: flex; gap: 6px; }
.mbmp-share-diff svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.mbmp-share-url { margin-top: 14px; }
.mbmp-share-url label { display: block; font-size: 12px; font-weight: 700; color: var(--sub); margin-bottom: 4px; }
.mbmp-share-url input { width: 100%; min-height: 44px; border: 1px solid var(--line2); border-radius: 6px; padding: 8px 10px; font-size: 14px; color: var(--text); background: #fbfcfd; }
.mbmp-share-url small { display: block; margin-top: 4px; font-size: 12px; color: var(--sub); }
.mbmp-share-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mbmp-share-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 4px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mbmp-share-btn:hover { background: var(--pale2); }
.mbmp-share-btn .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* 引き継ぎ・重複の比較 */
.mbmp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.mbmp-choice { position: relative; display: block; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; background: #fff; min-width: 0; }
.mbmp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.mbmp-choice.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; background: var(--pale2); }
.mbmp-choice:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.mbmp-choice .mbmp-mini { gap: 2px; }
.mbmp-choice-label { display: block; margin-top: 8px; font-size: 12px; color: var(--sub); line-height: 1.5; }
.mbmp-choice-label b { display: block; font-size: 14px; color: var(--text); }
.mbmp-choice-mark { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--line2); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.mbmp-choice.is-on .mbmp-choice-mark { background: var(--blue); border-color: #fff; }
.mbmp-legend { margin: 0 0 6px; font-size: 14px; font-weight: 700; }

/* 続きを選ぶ（疑似）：v0.4.7 の写真カタログと同じ見た目 */
.mbmp-edit-board { background: #fff; display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
@media (min-height: 600px) { .mbmp-edit-board { position: sticky; top: -4px; z-index: 2; } }
.mbmp-edit-board .mbmp-grid { gap: 2px; border-radius: 6px; }
.mbmp-edit-board .mbmp-tile.is-empty { font-size: 10px; }
.mbmp-edit-board .mbmp-tile.is-empty::before { inset: 3px; }
.mbmp-edit-remove { position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 0; background: transparent; cursor: pointer; }
.mbmp-edit-remove span { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: rgba(16,31,51,.75); color: #fff; font-size: 13px; line-height: 20px; text-align: center; }
.mbmp-edit-remove:hover span, .mbmp-edit-remove:focus-visible span { background: var(--danger); }
.mbmp-edit-status { margin: 0; font-size: 14px; }
.mbmp-edit-status b { font-size: 20px; color: var(--blue); }
.mbmp-edit-status small { display: block; font-size: 12px; color: var(--sub); }
.mbmp-edit-h { margin: 16px 0 10px; font-size: 15px; font-weight: 700; }
.mbmp-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
.mbmp-catalog-card { display: block; width: 100%; padding: 0; border: none; background: transparent; text-align: left; color: var(--text); cursor: pointer; min-width: 0; }
.mbmp-catalog-photo { display: block; position: relative; aspect-ratio: 1.2; border-radius: 5px; overflow: hidden; background: #e4e9ef; }
.mbmp-catalog-photo img { width: 100%; height: 100%; object-fit: cover; }
.mbmp-catalog-mark { position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 8px #102c4430; }
.mbmp-catalog-card.is-selected .mbmp-catalog-photo { outline: 3px solid var(--blue); outline-offset: -3px; }
.mbmp-catalog-card.is-selected .mbmp-catalog-mark { background: var(--blue); color: #fff; }
.mbmp-catalog-card:disabled { opacity: .45; cursor: not-allowed; }
.mbmp-catalog-name { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; line-height: 1.45; }

/* ひとこと編集 */
.mbmp-field label { display: block; font-size: 14px; font-weight: 700; margin: 4px 0 6px; }
.mbmp-field label small { font-weight: 400; color: var(--sub); font-size: 12px; }
.mbmp-field textarea { display: block; width: 100%; border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; font-size: 16px; line-height: 1.6; color: var(--text); resize: vertical; min-height: 88px; }
.mbmp-field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.mbmp-field-count { margin: 4px 0 0; font-size: 12px; color: var(--sub); text-align: right; }

/* ---------- トースト ---------- */
.mbmp-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); z-index: 1100; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 32px); background: rgba(20,36,58,.94); color: #fff; font-size: 14px; line-height: 1.5; padding: 6px 6px 6px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.mbmp-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mbmp-toast.is-plain { padding: 10px 16px; pointer-events: none; }
html.mbmp-lock .mbmp-toast { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
.mbmp-toast-msg { flex: 1; min-width: 0; }
.mbmp-toast button { flex: none; min-height: 44px; padding: 0 12px; border: none; border-radius: 6px; background: transparent; color: #a9cdf5; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.mbmp-toast button:hover, .mbmp-toast button:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid #a9cdf5; }

/* ---------- 幅ごとの調整 ---------- */
@media (max-width: 399px) {
	.mbmp-share-btn { font-size: 12px; }
}
@media (max-width: 599px) {
	/* スマホ・2地域以上：「ほかのまち」は2列のコンパクトなカード。共有などは「…」とカードを開いた画面に */
	.mbmp-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mbmp-cards.is-two .mbmp-card { padding: 10px 10px 12px; }
	.mbmp-cards.is-two .mbmp-card-head { align-items: flex-start; min-height: 0; gap: 2px; }
	.mbmp-cards.is-two .mbmp-card-title { font-size: 15px; }
	.mbmp-cards.is-two .mbmp-card-pref { font-size: 10px; }
	.mbmp-cards.is-two .mbmp-badge { display: none; }
	.mbmp-cards.is-two .mbmp-card-more { margin: -8px -8px 0 0; }
	.mbmp-cards.is-two .mbmp-grid-btn { margin-top: 6px; }
	.mbmp-cards.is-two .mbmp-grid { gap: 2px; border-radius: 6px; }
	.mbmp-cards.is-two .mbmp-tile-name, .mbmp-cards.is-two .mbmp-comment, .mbmp-cards.is-two .mbmp-meta, .mbmp-cards.is-two .mbmp-progress-note { display: none; }
	/* 注意（休止・非表示など）はコンパクトでも残す。お知らせ系だけ省略 */
	.mbmp-cards.is-two .mbmp-notes { margin-top: 6px; }
	.mbmp-cards.is-two .mbmp-note { font-size: 11px; padding: 5px 6px; gap: 4px; line-height: 1.5; }
	.mbmp-cards.is-two .mbmp-note svg { width: 12px; height: 12px; margin-top: 2px; }
	.mbmp-cards.is-two .mbmp-note:not(.is-warn) { display: none; }
	.mbmp-cards.is-two .mbmp-tile.is-empty { font-size: 0; }
	.mbmp-cards.is-two .mbmp-tile.is-empty::before { inset: 3px; }
	.mbmp-cards.is-two .mbmp-hanko { width: 40px; height: 40px; right: -6px; top: -8px; border-width: 2px; }
	.mbmp-cards.is-two .mbmp-hanko b { font-size: 17px; }
	.mbmp-cards.is-two .mbmp-hanko small { display: none; }
	.mbmp-cards.is-two .mbmp-progress { margin-top: 8px; gap: 4px; }
	.mbmp-cards.is-two .mbmp-dots { gap: 3px; }
	.mbmp-cards.is-two .mbmp-dot { width: 7px; height: 7px; }
	.mbmp-cards.is-two .mbmp-progress-text b { font-size: 15px; }
	.mbmp-cards.is-two .mbmp-actions { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
	.mbmp-cards.is-two .mbmp-actions .mbmp-btn { min-height: 44px; font-size: 13px; padding: 0 6px; }
	.mbmp-cards.is-two .mbmp-actions [data-action="share"] { display: none; }
	.mbmp-tile-noimg { padding-bottom: 34px; }
	.mbmp-tile-noimg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.mbmp-hero-row .mbmp-identity { display: none; }
}
@media (min-width: 600px) {
	.mbmp-card { padding: 20px; }
	.mbmp-grid { gap: 4px; }
	.mbmp-tile-name { font-size: 12px; }
	.mbmp-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mbmp-layer-root { align-items: center; padding: 24px; }
	.mbmp-dialog { width: 560px; border-radius: 14px; max-height: min(780px, calc(100vh - 48px)); animation-name: mbmp-pop; }
	.mbmp-dialog.is-tall { height: min(840px, calc(100vh - 48px)); width: 720px; }
	.mbmp-dialog-foot { border-radius: 0 0 14px 14px; }
	@keyframes mbmp-pop { from { transform: scale(.97); opacity: .4; } }
	.mbmp-stored-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mbmp-hanko { width: 72px; height: 72px; right: -14px; top: -16px; }
	.mbmp-hanko b { font-size: 28px; }
}
@media (min-width: 768px) {
	.mbmp-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
	.mbmp-cards.is-lone { max-width: 520px; }
	.mbmp-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 960px) {
	.mbmp-hero { padding: 30px 0 24px; }
	.mbmp-band { padding: 32px 0 44px; }
	.mbmp-band-title { font-size: 22px; }
	/* 主役カード：写真を左に大きく、名前・進捗・操作を右に */
	.mbmp-card.is-feature { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px; padding: 28px; }
	.mbmp-card.is-feature > .mbmp-grid-btn { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
	.mbmp-card.is-feature > .mbmp-card-head { grid-column: 2; grid-row: 1; align-items: flex-start; }
	.mbmp-card.is-feature > .mbmp-card-body { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; }
	.mbmp-card.is-feature .mbmp-card-title { font-size: 30px; }
	.mbmp-card.is-feature .mbmp-progress { margin-top: 18px; }
	.mbmp-card.is-feature .mbmp-comment { font-size: 16px; margin-top: 16px; }
	.mbmp-card.is-feature .mbmp-actions { margin-top: 24px; }
	.mbmp-card.is-feature .mbmp-meta { margin-top: auto; padding-top: 16px; }
	.mbmp-card.is-feature .mbmp-reasons { display: block; }
	/* 5地域以上：ほかのまちはPCで3列にして縦の長さを抑える */
	.mbmp-cards.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
	.mbmp-cards.is-three .mbmp-card { padding: 16px; }
	.mbmp-cards.is-three .mbmp-card-title { font-size: 19px; }
	.mbmp-cards.is-three .mbmp-tile-name { font-size: 11px; }
	.mbmp-candidate { grid-template-columns: 72px minmax(0, 1fr) auto; }
	.mbmp-candidate-actions { grid-column: auto; }
	.mbmp-samples-row { gap: 12px; }
	.mbmp-shelf { flex-wrap: wrap; overflow: visible; margin: 18px 0 0; padding: 0; }
}

/* ---------- モック操作パネル（製品UIではない） ---------- */
.mock-bar { background: #2b2f36; color: #e9ecf1; font-family: system-ui, -apple-system, 'Segoe UI', 'Yu Gothic UI', Meiryo, sans-serif; font-size: 12px; line-height: 1.5; border-bottom: 3px solid #f0b429; flex-shrink: 0; }
.mock-bar-inner { max-width: 1200px; margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; gap: 8px; }
.mock-tag { background: #f0b429; color: #2b2f36; font-weight: 800; letter-spacing: .08em; border-radius: 3px; padding: 1px 6px; flex: none; }
.mock-states { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
.mock-states::-webkit-scrollbar { display: none; }
.mock-state { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid #4c535e; border-radius: 999px; background: #353a43; color: #dfe3ea; font-size: 12px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.mock-state b { color: #f0b429; margin-right: 4px; }
.mock-state[aria-pressed="true"] { background: #f0b429; border-color: #f0b429; color: #2b2f36; font-weight: 700; }
.mock-state[aria-pressed="true"] b { color: #2b2f36; }
.mock-toggle, .mock-btn { flex: none; min-height: 32px; border: 1px solid #555c67; border-radius: 6px; background: #3a3f48; color: #fff; padding: 0 10px; font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.mock-toggle[aria-expanded="true"] { background: #f0b429; color: #2b2f36; border-color: #f0b429; }
.mock-options { max-width: 1200px; margin: 0 auto; padding: 0 16px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.mock-options[hidden] { display: none; }
.mock-check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.mock-check input { width: 18px; height: 18px; accent-color: #f0b429; margin: 0; }
.mock-field { display: inline-flex; align-items: center; gap: 6px; }
.mock-field select { min-height: 32px; border: 1px solid #555c67; border-radius: 6px; background: #3a3f48; color: #fff; font-size: 12px; padding: 0 6px; font-family: inherit; }
.mock-fineprint { flex-basis: 100%; margin: 0; color: #b9c0cb; }
.mock-bar :focus-visible { outline: 2px solid #f0b429; outline-offset: 2px; }
.mock-note { margin: 0 0 12px; padding: 8px 10px; border: 1.5px dashed #d9a21b; border-radius: 6px; background: #fffaeb; color: #6b5310; font-size: 12px; line-height: 1.6; font-family: system-ui, -apple-system, 'Segoe UI', 'Yu Gothic UI', Meiryo, sans-serif; }
.mock-note::before { content: 'モック注記　'; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
	.mbmp-dialog, .mbmp-toast, .mbmp-card.is-flash, .mbmp-tile img { animation: none; transition: none; }
}

/* WordPress live integration; theme header and footer are authoritative */
body.mbmc-mypage { min-height:100vh; display:flex; flex-direction:column; }
body.mbmc-mypage > main.mbmp { flex:1 0 auto; }
.mbmp .mbmp-live-link { display:inline-flex;align-items:center;justify-content:center;text-decoration:none; }
.mbmp .mbmp-card-title a { color:inherit;text-decoration:none; }
.mbmp .mbmp-card-grid-link {display:block;position:relative;text-decoration:none;}
.mbmp .mbmp-grid-live {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;aspect-ratio:1;width:100%;overflow:hidden;border-radius:5px;}
.mbmp .mbmp-grid-live > div { min-width:0;min-height:0;position:relative;background:#eef3f8;border:1px dashed #d2deec;display:flex;align-items:center;justify-content:center;color:#91a5b9;font-size:13px; }
.mbmp .mbmp-grid-live img {position:absolute;width:100%;height:100%;inset:0;object-fit:cover;}
.mbmp .mbmp-grid-live .mbmp-tile-name {position:absolute;bottom:0;left:0;right:0;padding:13px 3px 4px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left;}
.mbmp .mbmp-card-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.mbmp .mbmp-live-card {display:grid;grid-template-columns:1fr;gap:12px;background:white;border:1px solid #dce4ed;border-radius:10px;padding:16px;min-width:0;}
.mbmp .mbmp-live-card.is-feature {grid-template-columns:minmax(0,1fr) minmax(0,.88fr);padding:24px;}
.mbmp .mbmp-live-head {display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.mbmp .mbmp-live-head h2 {margin:0;font-size:22px;color:#1c395d;}
.mbmp .mbmp-live-head small {display:block;color:#8192a5;font-size:12px;}
.mbmp .mbmp-live-status {font-size:12px;padding:4px 10px;border-radius:15px;border:1px solid #cbd9e8;white-space:nowrap;color:#2a578e;}
.mbmp .mbmp-live-status.is-done {border-color:#e7c6ad;color:#a84e2b;}
.mbmp .mbmp-live-progress {display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:#2a578e;font-weight:700;}
.mbmp .mbmp-live-comment {border-left:3px solid #cfdaea;padding-left:12px;margin:6px 0;color:#71839a;font-size:14px;}
.mbmp .mbmp-live-actions {display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.mbmp .mbmp-live-actions .mbmp-btn {flex:1;min-width:120px;}
.mbmp .mbmp-live-actions .mbmp-btn-secondary {flex:0 0 auto;}
.mbmp .mbmp-live-meta {color:#95a4b4;font-size:12px;}
.mbmp .mbmp-live-danger {background:transparent;border:0;text-decoration:underline;color:#8c6571;cursor:pointer;padding:10px 3px;font-size:12px;}
.mbmp .mbmp-live-main {padding:36px 0 50px;background:#f5f7fa;}
.mbmp .mbmp-live-other {padding:30px 0 48px;background:white;}
.mbmp .mbmp-live-notice {margin:12px 0;padding:14px 16px;border-left:3px solid #2a578e;background:#fff;font-size:13px;}
.mbmp .mbmp-live-feature-title {margin:0 0 14px;font-size:13px;color:#5e7795;}
.mbmp .mbmp-live-empty {background:white;border:1px solid #dce4ed;padding:32px;border-radius:10px;}
@media(max-width:750px){.mbmp .mbmp-live-card.is-feature{grid-template-columns:1fr;padding:16px}.mbmp .mbmp-card-list{grid-template-columns:1fr}.mbmp .mbmp-live-main{padding:22px 0 35px}}

/* v0.4.9 – まちノート導入・地域選択・完成演出（マイページ限定） */
body.mbmp-dialog-open{overflow:hidden}
.mbmp .mbmp-live-main{padding:48px 0 64px}
.mbmp .mbmp-live-card{gap:22px;border-color:#dbe5f0;box-shadow:0 12px 30px rgba(31,61,98,.035)}
.mbmp .mbmp-live-card.is-feature{gap:34px;padding:28px;box-shadow:0 16px 40px rgba(31,61,98,.07)}
.mbmp .mbmp-live-info{display:flex;flex-direction:column;gap:16px;min-width:0}
.mbmp .mbmp-live-head h2{font-size:25px;line-height:1.35}
.mbmp .is-feature .mbmp-live-head h2{font-size:29px}
.mbmp .mbmp-live-progress{padding:8px 0;border-top:1px solid #e4eaf1;border-bottom:1px solid #e4eaf1}
.mbmp .mbmp-live-progress span:last-child{font-size:18px}
.mbmp .mbmp-live-actions{margin-top:6px}
.mbmp .mbmp-live-meta{margin:0}
.mbmp .mbmp-live-secondary-actions{font-size:13px;color:#47668c;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mbmp .mbmp-live-secondary-actions a{color:inherit}
.mbmp .mbmp-completed-note{display:grid;grid-template-columns:66px minmax(0,1fr);gap:3px 12px;align-items:center;padding:12px 14px;background:linear-gradient(100deg,#fff6eb,#fffaf5);border:1px solid #efdbc5;border-radius:9px;color:#ad562f}
.mbmp .mbmp-completed-note strong{font-size:17px;line-height:1.5}
.mbmp .mbmp-completed-note>span:last-child{font-size:12px;color:#967255;grid-column:2}
.mbmp .mbmp-completed-seal{display:flex;grid-row:1/span 2;width:60px;height:60px;border:3px double #c75b2d;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;transform:rotate(-9deg);font-weight:800;font-size:26px;line-height:1}
.mbmp .mbmp-completed-seal small{font-size:10px;margin-top:2px}
.mbmp .mbmp-live-status.is-done{background:#fff4e9;font-weight:700}
.mbmp .mbmp-empty-experience{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:46px;align-items:center;background:white;padding:52px 58px;border-radius:16px;border:1px solid #dce5ef;box-shadow:0 14px 40px rgba(31,61,98,.045)}
.mbmp .mbmp-empty-copy h2{font-size:clamp(27px,3vw,40px);line-height:1.55;margin:10px 0 20px;color:#1c395d;letter-spacing:.04em}
.mbmp .mbmp-eyebrow{letter-spacing:.2em;font-size:11px;color:#6688b1;font-weight:700}
.mbmp .mbmp-empty-intro{font-size:15px;color:#78899d;margin:0 0 20px;line-height:1.9}
.mbmp .mbmp-empty-promise{color:#375879;line-height:2;font-size:17px;margin:0 0 28px}
.mbmp .mbmp-empty-promise b{color:#24528b}
.mbmp .mbmp-empty-help{color:#8b9aab;font-size:12px;margin:14px 0 0}
.mbmp .mbmp-choose-trigger{background:#2a578e;color:white!important;border:0;border-radius:8px;min-height:53px;padding:12px 24px;gap:22px;font-weight:700;cursor:pointer}
.mbmp .mbmp-choose-trigger:hover{background:#204a7a}
.mbmp .mbmp-empty-preview{background:linear-gradient(150deg,#eff5fa,#e1edf8);border-radius:18px;padding:22px;box-shadow:12px 12px 0 #e9eff6}
.mbmp .mbmp-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:355px;margin:auto;transform:rotate(-3deg)}
.mbmp .mbmp-preview-grid span{aspect-ratio:1;background:linear-gradient(140deg,#d9e5f2,#b9cfe3);border-radius:5px;display:flex;align-items:center;justify-content:center;color:#6586a7;font-size:clamp(16px,2.1vw,32px);font-weight:700}
.mbmp .mbmp-preview-grid span:nth-child(3n+2){background:linear-gradient(140deg,#c4d8ea,#97bad8)}
.mbmp .mbmp-preview-grid span:nth-child(5){background:#2a578e;color:white}
.mbmp .mbmp-preview-caption{text-align:center;margin-top:25px;color:#365777}
.mbmp .mbmp-preview-caption strong{display:block;font-size:20px;letter-spacing:.1em}
.mbmp .mbmp-preview-caption small{display:block;margin-top:5px;font-size:12px}
.mbmp .mbmp-new-city-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px}
.mbmp .mbmp-new-city-inner p{color:#8b9bae;font-size:13px;margin:9px 0 0}
.mbmp .mbmp-area-dialog[hidden],.mbmp .mbmp-area-option[hidden]{display:none!important}
.mbmp .mbmp-area-dialog{position:fixed;inset:0;z-index:99999;display:flex;justify-content:center;align-items:center;padding:18px}
.mbmp .mbmp-area-backdrop{position:absolute;inset:0;background:rgba(19,35,54,.62)}
.mbmp .mbmp-area-panel{position:relative;background:#fff;border-radius:16px;max-width:570px;width:100%;max-height:min(780px,90dvh);overflow:auto;padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.2)}
.mbmp .mbmp-area-panel-head{display:flex;justify-content:space-between;gap:20px}
.mbmp .mbmp-area-panel-head small{color:#7b93ae;font-size:11px;letter-spacing:.15em}
.mbmp .mbmp-area-panel-head h2{font-size:24px;margin:8px 0 10px;color:#1e3c60}
.mbmp .mbmp-area-panel-head p{font-size:13px;color:#758aa2;line-height:1.8;margin:0 0 23px}
.mbmp .mbmp-area-close{flex:none;width:40px;height:40px;border:1px solid #e1e9f1;border-radius:50%;font-size:24px;background:#fff;cursor:pointer;color:#486383}
.mbmp .mbmp-area-search-label{display:block;font-size:12px;color:#506c8e;font-weight:700;margin-bottom:7px}
.mbmp .mbmp-area-search{box-sizing:border-box;width:100%;border:1px solid #cbd9e8;border-radius:8px;height:50px;padding:12px 14px;font-size:15px;background:#fff;color:#203f65}
.mbmp .mbmp-area-results{display:grid;gap:9px;margin-top:18px;max-height:340px;overflow-y:auto}
.mbmp .mbmp-area-option{display:flex;gap:14px;align-items:center;border:1px solid #dae5f1;background:#f9fbfe;padding:12px 15px;border-radius:10px;text-decoration:none;color:#23466f}
.mbmp .mbmp-area-option:hover,.mbmp .mbmp-area-option:focus-visible{border-color:#2a578e;background:#edf5fc}
.mbmp .mbmp-area-icon{border-radius:50%;background:#2a578e;color:white;width:35px;height:35px;display:flex;align-items:center;justify-content:center;font-size:21px}
.mbmp .mbmp-area-option small{display:block;color:#8399b1;font-size:11px}
.mbmp .mbmp-area-option strong{display:block;font-size:16px;margin-top:2px}
.mbmp .mbmp-area-arrow{margin-left:auto;font-size:19px}
.mbmp .mbmp-area-none,.mbmp .mbmp-area-footnote{font-size:12px;color:#8497ad;margin-top:14px}
@media(max-width:800px){.mbmp .mbmp-empty-experience{grid-template-columns:1fr;padding:28px;gap:35px}.mbmp .mbmp-empty-preview{max-width:410px;width:100%;box-sizing:border-box;margin:auto}.mbmp .mbmp-live-card.is-feature{padding:18px;gap:22px}}
@media(max-width:500px){.mbmp .mbmp-live-main{padding:26px 0 38px}.mbmp .mbmp-empty-experience{padding:24px 19px}.mbmp .mbmp-live-info{gap:12px}.mbmp .mbmp-completed-note strong{font-size:14px}.mbmp .mbmp-area-panel{padding:20px 16px}.mbmp .mbmp-empty-promise{font-size:15px}}

/* v0.5.0 – codex c + claude c を統合したトップ再設計 */
.mbmp .mbmp-hero {
  background: linear-gradient(180deg,#f4f7fa 0%, #edf2f7 100%);
  padding: 34px 0 28px;
  border-bottom: 1px solid #dde6ee;
}
.mbmp .mbmp-hero-row { align-items: flex-start; gap: 30px; }
.mbmp .mbmp-hero-copy { max-width: 640px; }
.mbmp .mbmp-hero-kicker {
  margin: 0 0 12px;
  color: #9d7252;
  font-size: 13px;
  letter-spacing: .08em;
  font-weight: 700;
  position: relative;
  padding-left: 30px;
}
.mbmp .mbmp-hero-kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: .75em;
  width: 20px;
  height: 1px;
  background: currentColor;
}
.mbmp .mbmp-title { font-size: clamp(46px,5vw,66px); letter-spacing: .08em; font-weight: 700; line-height: 1.18; }
.mbmp .mbmp-lead { margin-top: 10px; font-size: 22px; color: #64768b; }
.mbmp .mbmp-account { margin-top: 22px; font-size: 15px; color: #49627d; }
.mbmp .mbmp-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; min-width: 240px; }
.mbmp .mbmp-hero-catch {
  margin: 0;
  padding-top: 14px;
  font-size: 20px;
  line-height: 1.9;
  color: #2f4766;
  position: relative;
  text-align: right;
}
.mbmp .mbmp-hero-catch::before {
  content: '';
  position: absolute;
  left: -54px;
  top: 30px;
  width: 34px;
  height: 2px;
  background: #c08d6a;
}
.mbmp .mbmp-hero-link { color: #6a7f98; text-underline-offset: 4px; }

.mbmp .mbmp-live-main { padding: 42px 0 54px; background: #f6f8fb; }
.mbmp .mbmp-live-main-empty { background: #f5f4f0; }
.mbmp .mbmp-live-feature-title {
  margin: 0 0 16px;
  font-size: 13px;
  letter-spacing: .08em;
  color: #7c8ea3;
  font-weight: 700;
}
.mbmp .mbmp-live-card {
  border-radius: 18px;
  padding: 24px;
  border-color: #d9e4ee;
  box-shadow: 0 14px 38px rgba(23,47,80,.06);
}
.mbmp .mbmp-live-card.is-feature {
  grid-template-columns: minmax(0,1.03fr) minmax(320px,.97fr);
  padding: 28px;
  gap: 38px;
}
.mbmp .mbmp-grid-live { border-radius: 12px; gap: 5px; background: #e8eef5; }
.mbmp .mbmp-grid-live > div { border-radius: 8px; overflow: hidden; border: 1px dashed #d7e1eb; }
.mbmp .mbmp-grid-live .mbmp-tile-name { padding: 18px 7px 6px; font-size: 11px; }
.mbmp .mbmp-live-head small { font-size: 11px; letter-spacing: .08em; color: #8c9bad; text-transform: uppercase; }
.mbmp .mbmp-live-head h2 { font-size: clamp(28px,3vw,44px); line-height: 1.2; margin-top: 6px; }
.mbmp .mbmp-live-head h2 a { color: inherit; text-decoration: none; }
.mbmp .mbmp-live-status {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  border-color: #d6dfeb;
  background: #f6f9fc;
  color: #40608a;
  font-weight: 700;
}
.mbmp .mbmp-live-status.is-done { background: #fff6ea; border-color: #ecd7b9; color: #9d6938; }
.mbmp .mbmp-live-progress {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #e4ebf2;
  border-bottom: 1px solid #e4ebf2;
}
.mbmp .mbmp-live-progress .mbmp-dots { gap: 6px; }
.mbmp .mbmp-live-progress .mbmp-dot { width: 9px; height: 9px; background: #d6e0ea; }
.mbmp .mbmp-live-progress .mbmp-dot.is-on { background: #2a578e; }
.mbmp .mbmp-live-card .mbmp-live-progress-meta { margin-left: auto; white-space: nowrap; font-size: 14px; color: #6b8099; }
.mbmp .mbmp-live-card .mbmp-live-progress-meta strong { color: #1d3d63; font-size: 24px; font-weight: 800; }
.mbmp .mbmp-live-subline { margin: -6px 0 0; color: #556f89; font-size: 14px; }
.mbmp .mbmp-live-comment {
  margin: 0;
  padding: 4px 0 4px 14px;
  border-left: 3px solid #dcc39d;
  color: #36506f;
  font-size: 15px;
  line-height: 1.85;
}
.mbmp .mbmp-live-reasons {
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e6edf4;
  border-radius: 12px;
}
.mbmp .mbmp-live-reasons-title {
  margin: 0 0 10px;
  font-size: 12px;
  color: #627b96;
  font-weight: 700;
}
.mbmp .mbmp-live-reasons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mbmp .mbmp-live-reasons li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 10px; align-items: center; }
.mbmp .mbmp-live-reasons img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.mbmp .mbmp-live-reasons strong { display: block; color: #1f426d; font-size: 13px; line-height: 1.5; }
.mbmp .mbmp-live-reasons span { display: block; color: #6e8196; font-size: 12px; line-height: 1.65; }
.mbmp .mbmp-live-actions { margin-top: 4px; }
.mbmp .mbmp-live-actions .mbmp-btn { border-radius: 8px; min-height: 52px; }
.mbmp .mbmp-live-actions .mbmp-btn-secondary { background: #fff; }
.mbmp .mbmp-live-meta { color: #8fa0b2; }
.mbmp .mbmp-live-secondary-actions { gap: 12px; color: #607a98; }

.mbmp .mbmp-band-shelf {
  padding: 26px 0 38px;
  background: linear-gradient(180deg,#faf8f1 0%, #f6f2e8 100%);
  border-top: 1px solid #efe9db;
  border-bottom: 1px solid #ece4d3;
}
.mbmp .mbmp-books {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 4px 0;
  margin: 0 -4px;
  scrollbar-width: thin;
}
.mbmp .mbmp-books > div { flex: none; }
.mbmp .mbmp-book {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: var(--thick,72px);
  height: 206px;
  padding: 7px 6px 10px;
  border-radius: 5px 5px 2px 2px;
  border: none;
  background: var(--spine,#425b76);
  color: #fff;
  text-decoration: none;
  box-shadow: inset 5px 0 0 rgba(255,255,255,.08), inset -6px 0 0 rgba(0,0,0,.15), 0 10px 18px rgba(76,56,34,.18);
  cursor: pointer;
  transition: transform .2s ease;
}
.mbmp .mbmp-book:hover,
.mbmp .mbmp-book:focus-visible { transform: translateY(-8px); }
.mbmp .mbmp-book img,
.mbmp .mbmp-book-noimg {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 3px;
  border: 2px solid rgba(255,255,255,.88);
  background: rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.mbmp .mbmp-book-name {
  flex: 1;
  margin-top: 10px;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 600;
}
.mbmp .mbmp-book-state { font-size: 11px; font-weight: 700; opacity: .88; }
.mbmp .mbmp-book-stamp {
  position: absolute;
  right: 5px;
  top: 56px;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 2px solid #ffc6b0;
  color: #ffd9cb;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
}
.mbmp .mbmp-book.is-blank {
  --thick: 66px;
  background: #fffdf7;
  color: #8a7556;
  border: 1.5px dashed #bda988;
  box-shadow: 0 8px 14px rgba(76,56,34,.08);
}
.mbmp .mbmp-book.is-blank .mbmp-book-noimg { border: 1.5px dashed #ccb895; background: #f7efdf; }
.mbmp .mbmp-shelf-board {
  height: 12px;
  margin: 0 -8px 4px;
  border-radius: 3px;
  background: linear-gradient(#e4d4b8, #d2bf9d);
  box-shadow: 0 6px 12px rgba(84,62,30,.14);
}

.mbmp .mbmp-live-other { padding: 34px 0 50px; background: #fff; }
.mbmp .mbmp-card-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.mbmp .mbmp-new-city { background: #fbfcfe; border-top: 1px solid #eef2f6; }
.mbmp .mbmp-new-city-inner { background: #fff; border: 1px solid #e5ebf2; border-radius: 16px; padding: 24px 28px; }

.mbmp .mbmp-empty-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .92fr);
  gap: 56px;
  align-items: center;
  background: #f8f6f0;
  border: 1px solid #e7e1d5;
  border-radius: 22px;
  padding: 56px 58px;
  box-shadow: 0 18px 40px rgba(58,47,28,.06);
}
.mbmp .mbmp-empty-kicker {
  margin: 0 0 18px;
  color: #b07a56;
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 700;
}
.mbmp .mbmp-empty-copy h2 {
  font-size: clamp(34px,4vw,64px);
  line-height: 1.38;
  margin: 0 0 22px;
  color: #20364f;
  letter-spacing: .04em;
}
.mbmp .mbmp-empty-intro { font-size: 18px; line-height: 2; color: #566b7d; margin: 0 0 28px; }
.mbmp .mbmp-empty-promise { margin: 20px 0 0; color: #3f5772; font-size: 16px; line-height: 1.9; }
.mbmp .mbmp-empty-help { margin: 8px 0 0; color: #8d9aaa; font-size: 12px; }
.mbmp .mbmp-empty-copy .mbmp-choose-trigger {
  min-height: 56px;
  padding: 0 24px;
  border-radius: 8px;
  background: #2a578e;
  gap: 18px;
}
.mbmp .mbmp-empty-visual { position: relative; min-height: 440px; }
.mbmp .mbmp-empty-photos { position: relative; width: 100%; height: 100%; }
.mbmp .mbmp-empty-photo {
  position: absolute;
  width: 46%;
  background: #fff;
  padding: 12px 12px 16px;
  border-radius: 4px;
  box-shadow: 0 16px 28px rgba(37,33,27,.12);
  transform-origin: center;
}
.mbmp .mbmp-empty-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
  background: #dfe8ef;
}
.mbmp .mbmp-empty-photo figcaption {
  margin-top: 10px;
  color: #3b526b;
  line-height: 1.5;
}
.mbmp .mbmp-empty-photo figcaption strong { display: block; font-size: 14px; }
.mbmp .mbmp-empty-photo figcaption span { display: block; font-size: 12px; color: #8da0b2; margin-top: 2px; }
.mbmp .mbmp-empty-photo.is-1 { left: 2%; top: 12%; width: 52%; transform: rotate(-6deg); z-index: 2; }
.mbmp .mbmp-empty-photo.is-2 { right: 4%; top: 2%; width: 40%; transform: rotate(5deg); z-index: 3; }
.mbmp .mbmp-empty-photo.is-3 { right: 7%; bottom: 8%; width: 40%; transform: rotate(4deg); z-index: 1; }
.mbmp .mbmp-empty-photos-fallback .mbmp-empty-photo {
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  background: linear-gradient(145deg,#eef3f7,#dde7ef);
}
.mbmp .mbmp-empty-note {
  position: absolute;
  left: 0;
  bottom: -10px;
  margin: 0;
  color: #8e978f;
  font-size: 12px;
}

@media (max-width: 959px) {
  .mbmp .mbmp-title { font-size: 42px; }
  .mbmp .mbmp-lead { font-size: 18px; }
  .mbmp .mbmp-hero-catch { font-size: 18px; }
  .mbmp .mbmp-live-card.is-feature { grid-template-columns: 1fr; gap: 22px; }
  .mbmp .mbmp-empty-stage { grid-template-columns: 1fr; gap: 34px; padding: 34px 32px; }
  .mbmp .mbmp-empty-visual { min-height: 360px; }
}
@media (max-width: 760px) {
  .mbmp .mbmp-hero { padding: 28px 0 22px; }
  .mbmp .mbmp-hero-row { flex-direction: column; gap: 18px; }
  .mbmp .mbmp-hero-side { align-items: flex-start; min-width: 0; }
  .mbmp .mbmp-hero-catch { text-align: left; padding-top: 0; }
  .mbmp .mbmp-hero-catch::before { left: 0; top: -14px; width: 28px; }
  .mbmp .mbmp-live-card { padding: 18px; }
  .mbmp .mbmp-card-list { grid-template-columns: 1fr; }
  .mbmp .mbmp-books { gap: 6px; }
  .mbmp .mbmp-book { height: 184px; }
  .mbmp .mbmp-book img, .mbmp .mbmp-book-noimg { width: 40px; height: 40px; }
  .mbmp .mbmp-book-name { font-size: 15px; }
}
@media (max-width: 520px) {
  .mbmp .mbmp-wrap { padding: 0 14px; }
  .mbmp .mbmp-title { font-size: 34px; }
  .mbmp .mbmp-lead { font-size: 16px; }
  .mbmp .mbmp-account { font-size: 13px; }
  .mbmp .mbmp-live-main { padding: 28px 0 36px; }
  .mbmp .mbmp-live-head { flex-direction: column; }
  .mbmp .mbmp-live-head h2 { font-size: 30px; }
  .mbmp .mbmp-live-progress { flex-direction: column; align-items: flex-start; }
  .mbmp .mbmp-live-card .mbmp-live-progress-meta { margin-left: 0; }
  .mbmp .mbmp-empty-stage { padding: 26px 20px; border-radius: 18px; }
  .mbmp .mbmp-empty-copy h2 { font-size: 28px; }
  .mbmp .mbmp-empty-intro { font-size: 15px; line-height: 1.8; }
  .mbmp .mbmp-empty-promise { font-size: 14px; }
  .mbmp .mbmp-empty-visual { min-height: 292px; }
  .mbmp .mbmp-empty-photo { padding: 8px 8px 12px; }
  .mbmp .mbmp-empty-note { position: static; margin-top: 12px; }
  .mbmp .mbmp-new-city-inner { padding: 18px; }
}

/* v0.5.1: 未投稿の表紙だけを再調整（見出し・画像の重なりを解消） */
.mbmp .mbmp-hero-side { min-width: auto; }
.mbmp .mbmp-hero-side .mbmp-identity { margin-top: 0; }
.mbmp .mbmp-empty-stage {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px,4vw,56px);
  align-items: center;
  padding: clamp(28px,4vw,52px);
  overflow: hidden;
}
.mbmp .mbmp-empty-copy,
.mbmp .mbmp-empty-visual { min-width: 0; }
.mbmp .mbmp-empty-copy h2 {
  font-size: clamp(27px,2.7vw,41px);
  line-height: 1.5;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  word-break: normal;
}
.mbmp .mbmp-empty-intro { font-size: clamp(14px,1.35vw,16px); }
.mbmp .mbmp-empty-visual { min-height: 0; display: flex; flex-direction: column; align-items: center; }
.mbmp .mbmp-example-note {
  width: min(100%,430px);
  padding: 14px 14px 12px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(35,38,45,.12);
  transform: rotate(-2deg);
}
.mbmp .mbmp-example-grid {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-rows: repeat(3,minmax(0,1fr));
  gap: 5px;
}
.mbmp .mbmp-example-grid img,
.mbmp .mbmp-example-placeholder {
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit: cover; border-radius: 5px; background: #e4ebf0;
}
.mbmp .mbmp-example-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 13px; }
.mbmp .mbmp-example-bottom strong { color:#26384d; font-size: clamp(17px,2vw,24px); }
.mbmp .mbmp-example-stamp {
  border: 2px solid #bd5a31; border-radius: 999px;
  font-weight: 800; color:#b4522c; padding: 6px 9px;
  line-height:1.15; transform: rotate(-7deg); font-size: 12px;
  flex-shrink:0;
}
.mbmp .mbmp-empty-note {
  position: static;
  margin: 18px 0 0;
  max-width: 430px;
  font-size: 12px;
  line-height: 1.65;
  color: #788794;
}
@media(max-width: 900px) {
  .mbmp .mbmp-empty-stage { grid-template-columns:1fr; gap:32px; }
  .mbmp .mbmp-empty-visual { width:100%; }
  .mbmp .mbmp-example-note { transform: rotate(-1deg); }
  .mbmp .mbmp-empty-copy h2 { font-size: clamp(27px,5vw,36px); }
}
@media(max-width: 520px) {
  .mbmp .mbmp-empty-stage { padding: 26px 18px; gap: 28px; }
  .mbmp .mbmp-empty-copy h2 { font-size: clamp(26px,7vw,32px); line-height:1.48; }
  .mbmp .mbmp-empty-intro { font-size:14px; }
  .mbmp .mbmp-example-note { width:min(100%,350px); padding:10px; transform:none; }
  .mbmp .mbmp-example-grid { gap:3px; }
  .mbmp .mbmp-example-grid img,.mbmp .mbmp-example-placeholder { border-radius:3px; }
  .mbmp .mbmp-example-bottom { margin-top:9px; }
  .mbmp .mbmp-example-bottom strong { font-size:18px; }
}

/* v0.5.2: 未投稿時の大きな角丸コンテナだけを除去。
 * 完成見本（9枚の写真カード）の白い縁・角丸・影は維持。 */
.mbmp .mbmp-live-main-empty .mbmp-empty-stage {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 32px 0;
  overflow: visible;
}
@media (max-width: 900px) {
  .mbmp .mbmp-live-main-empty .mbmp-empty-stage { padding: 12px 0 24px; }
}
@media (max-width: 520px) {
  .mbmp .mbmp-live-main-empty .mbmp-empty-stage { padding: 8px 0 22px; }
}

/* 統合マイページ stage 1: /mycity/mypage/ → /profile/ */
.mbmp .mbmp-activity-bridge { display:flex; justify-content:space-between; align-items:center; gap:20px; width:min(1040px,calc(100% - 32px)); margin:18px auto 24px; padding:20px 24px; background:#fff; border:1px solid #dce7f1; border-radius:12px; box-shadow:0 3px 15px rgba(30,59,89,.035); }
.mbmp .mbmp-activity-bridge-copy { min-width:0; }
.mbmp .mbmp-activity-eyebrow { display:block; margin-bottom:4px; font-size:12px; font-weight:700; color:#64819f; }
.mbmp .mbmp-activity-bridge-copy strong { display:block; font-size:16px; line-height:1.5; color:#203b59; }
.mbmp .mbmp-activity-bridge-copy p { margin:5px 0 0; color:#667d91; font-size:12px; line-height:1.7; }
.mbmp .mbmp-activity-bridge-link { flex-shrink:0; display:inline-flex; justify-content:center; align-items:center; gap:7px; padding:11px 18px; border-radius:8px; background:#2d5a8c; color:#fff!important; font-size:13px; font-weight:700; text-decoration:none!important; }
.mbmp .mbmp-activity-bridge-link:hover,.mbmp .mbmp-activity-bridge-link:focus-visible { background:#1e4168; }
@media(max-width:700px) { .mbmp .mbmp-activity-bridge { flex-direction:column; align-items:stretch; padding:17px; margin:12px auto 20px; gap:13px; } .mbmp .mbmp-activity-bridge-link { width:100%; } }

/* v0.5.6 — 統合マイページ第2段階。既存の本棚UIと保存処理には手を加えない。 */
.mbmp { font-family: 'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; }
.mbmp-v56-activity { padding: 24px 0 48px; background: #f3f6fa; }
.mbmp-v56-activity-box { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); align-items: center; gap: 22px; background: #fff; border: 1px solid #dbe4ef; border-radius: 13px; padding: 18px; }
.mbmp-v56-activity-photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; min-height: 146px; border-radius: 8px; overflow: hidden; background: #e8eff7; }
.mbmp-v56-activity-photos img { display:block; width: 100%; height: 100%; min-height: 71px; aspect-ratio: 1; object-fit: cover; }
.mbmp-v56-activity-placeholder { grid-column: 1/-1; display: flex; align-items:center; justify-content:center; padding:18px; font-size:13px; color:#637b92; line-height:1.7; text-align:center; }
.mbmp-v56-activity-kicker { margin:0 0 2px; font-size:11px; color:#6885a4; letter-spacing:.11em; font-weight:700; }
.mbmp-v56-activity-content h2 { margin:0 0 3px; color:#203b59; font-size:22px; line-height:1.4; }
.mbmp-v56-activity-desc { margin:0 0 12px; color:#637b92; line-height:1.7; font-size:13px; }
.mbmp-v56-activity-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; list-style:none; margin:0; padding:0; }
.mbmp-v56-activity-links li { margin:0; padding:0; min-width:0; }
.mbmp-v56-activity-links a { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:54px; padding:10px 12px; border-radius:8px; background:#f0f5fa; color:#23486f!important; text-decoration:none!important; font-size:13px; font-weight:700; line-height:1.4; }
.mbmp-v56-activity-links a:hover,.mbmp-v56-activity-links a:focus-visible { background:#e2edf9; outline-offset:2px; }
.mbmp-v56-activity-links a span:first-child { overflow-wrap:anywhere; }
.mbmp-v56-activity-foot { margin:9px 0 0; text-align:right; }
.mbmp-v56-activity-foot a { color:#2d5a8c!important; font-size:13px; font-weight:700; text-decoration:underline!important; text-underline-offset:3px; }
@media(max-width:800px) { .mbmp-v56-activity-box { grid-template-columns:1fr; gap:14px; } .mbmp-v56-activity-photos { grid-template-columns:repeat(6,minmax(0,1fr)); min-height:unset; } .mbmp-v56-activity-photos img { min-height:0; } }
@media(max-width:520px) { .mbmp-v56-activity { padding:18px 0 28px; } .mbmp-v56-activity-box { padding:13px; gap:13px; } .mbmp-v56-activity-links { grid-template-columns:repeat(2,minmax(0,1fr)); } .mbmp-v56-activity-content h2 { font-size:19px; } .mbmp-v56-activity-photos { grid-template-columns:repeat(3,minmax(0,1fr)); } }