/* 地図から探す（/map/） */
.mapp { overflow: hidden; }
.mp { position: relative; display: flex; flex-direction: column; height: calc(100dvh - 56px - 58px - env(safe-area-inset-bottom, 0px)); }
.mp .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; background: #fff; border-bottom: 1px solid #eee; z-index: 500; }
.mp-bar .ln { flex: 1 1 100%; margin: 0; max-width: 460px; }
.mp-bar .ln button { padding: 6px 4px; font-size: 13px; }
.mp-bar .ln button small { font-size: 10px; }
.mp-sel { display: flex; gap: 6px; flex: 1 1 100%; }
.mp-sel label { flex: 1; }
.mp-sel select { width: 100%; max-width: none !important; }
.mp-sel select { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 10px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #15171c; max-width: 132px; }
.mp-body { position: relative; flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; }
.mp-map { position: relative; z-index: 0; min-height: 0; background: #e7eef0; }
.mp-side { display: none; }
.mp-note { display: none; }

/* ピン（料金） */
.pp { transform: translate(-50%, -50%); display: inline-block; background: #fff; border: 1.5px solid #c9c9c9; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #15171c; box-shadow: 0 1px 3px rgba(0,0,0,.22); cursor: pointer; }
.pp.on { background: #15171c; color: #fff; border-color: #15171c; }
.pp.hc { border-color: #c9a45a; }
/* まとまり（近くの宿） */
.bub { transform: translate(-50%, -50%); display: inline-block; background: #15171c; color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 11px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.bub b { font-size: 12px; }
.bub i { font-style: normal; color: #ffd84a; font-weight: 700; margin-left: 4px; }
.leaflet-div-icon { background: none; border: 0; }

/* 宿のカード（スマホは下から） */
.mp-card { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 800; background: #fff; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.2); padding: 12px; display: flex; gap: 12px; }
.mp-card[hidden] { display: none; }
.mp-card .mc-ph { width: 92px; height: 92px; border-radius: 10px; object-fit: cover; background: #eee; flex: none; }
.mp-card .mc-ci { min-width: 0; flex: 1; }
.mp-card .mc-n { display: block; font-weight: 700; font-size: 15px; line-height: 1.35; color: #15171c; text-decoration: none; }
.mp-card .mc-m { font-size: 12px; color: #6b6f6c; margin: 2px 0 6px; }
.mp-card .mc-k { font-size: 12px; }
.mp-card .mc-k i { font-style: normal; background: #ffd84a; font-weight: 700; padding: 1px 5px; margin-right: 6px; }
.mp-card .mc-p { font-size: 20px; font-weight: 800; color: #2fa84a; margin: 2px 0 6px; }
.mp-card .mc-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.mp-card .mc-acts a { font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 999px; text-decoration: none; }
.mp-card .mc-cal { border: 1.5px solid #15171c; color: #15171c; }
.mp-card .mc-bk { background: #f7865a; color: #fff; }
.mp-card .mc-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; color: #888; }

/* PC：左に一覧、右に地図 */
@media (min-width: 900px) {
  .mp-bar { flex-wrap: nowrap; }
  .mp-bar .ln { flex: 0 1 420px; }
  .mp-sel { flex: 0 0 auto; }
  .mp-sel select { width: auto; }
  .mp { height: calc(100dvh - 64px); }
  .mp-body { grid-template-columns: 380px 1fr; }
  .mp-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #eee; background: #fff; }
  .mp-h { font-size: 18px; margin: 14px 16px 2px; }
  .mp-lead { margin: 0 16px 8px; font-size: 13px; color: #3d413e; }
  .mp-lead small { display: block; color: #6b6f6c; font-size: 11px; }
  .mp-list { list-style: none; margin: 0; padding: 0 8px 16px; overflow-y: auto; flex: 1; }
  .mp-list li { display: flex; gap: 10px; padding: 10px 8px; border-bottom: 1px solid #f0f0f0; cursor: pointer; border-radius: 8px; }
  .mp-list li:hover, .mp-list li.on { background: #f6f1e6; }
  .mp-list img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; background: #eee; flex: none; }
  .mp-list .mc-n { font-weight: 700; font-size: 13px; line-height: 1.35; }
  .mp-list .mc-m { font-size: 11px; color: #6b6f6c; }
  .mp-list .mc-p { font-size: 15px; font-weight: 800; color: #2fa84a; }
  .mp-card { left: auto; right: 16px; bottom: 44px; width: 380px; }
  .mp-note { display: block; position: absolute; left: 392px; bottom: 2px; z-index: 600; font-size: 10px; color: #555; background: rgba(255,255,255,.75); padding: 0 6px; margin: 0; }
}