/* マップページの、ひとつまち向けの上書き（css/map.css の後に読む）。body の白い地は css/base.css の body.is-fullscreen */

/* 出典（OSM の決まりで地図の隅に出す）。2026-10-31 に右上（現在地ボタンの下）から移した。
   PC は地図の右下。スマホはシートの上の縁の左端に乗せる複製（js/map.js の attachCreditToSheet）を出す */
.map-credit {
  position: fixed; right: 8px; bottom: 6px; z-index: 50;
  font-size: 10px; line-height: 1.6; color: var(--c-ink-soft); background: rgba(255,255,255,.75); padding: 0 4px; border-radius: 3px; pointer-events: auto;
}
.map-credit--sheet { position: absolute; left: 10px; right: auto; bottom: 100%; margin-bottom: 4px; z-index: 1; }
@media (max-width: 1023px) {
  .map-credit:not(.map-credit--sheet) { display: none; }
}
@media (min-width: 1024px) {
  .map-credit--sheet { display: none; }
}
.map-credit a { color: inherit; text-decoration: underline; }

/* --- シートの店の詳細（js/map/sheet-content.js の detailEl。中身は shop.php と同じ） --- */

/* 写真。店名・営業状態の後に、正方形を並べて横に送る（シートの右端まで出す）。
   ★ 店の画像は必ず 1:1（docs/design_requirements.md 5.）。4:3・16:9 の枠にしないこと */
.sheet-photos {
  display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: var(--sp-4) calc((var(--sp-3) + var(--sp-1)) * -1) 0 0;
}
.sheet-photos::-webkit-scrollbar { display: none; }
.sheet-photos img { flex: none; width: 11rem; aspect-ratio: 1; object-fit: cover; scroll-snap-align: start; border-radius: 0; background: var(--c-sakura); } /* 角は立てる（2026-11-08。店ページの写真と同じ） */

.sheet-detail__title { margin-top: var(--sp-1); }
.sheet-detail__kind { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; font-size: var(--map-fs-sm); color: var(--c-ink-soft); }

/* 営業状態・定休日・最寄駅（shop.php の .summary__facts と同じ並び） */
.sheet-facts { display: grid; gap: 6px; margin-top: var(--sp-3); font-size: var(--map-fs-base); }
.sheet-facts li { display: flex; align-items: center; gap: 8px; }   /* アイコンは行の上下中央に（css/components.css の .facts と同じ） */
.sheet-facts__icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--c-rose); }
.sheet-facts__hours { display: grid; gap: 2px; min-width: 0; }
.sheet-facts__hours .status { font-size: var(--map-fs-sm); }

.sheet-detail__actions { margin-top: var(--sp-3); }

/* クーポン・営業時間の小見出し（冊子のローズ） */
.sheet-detail__section { margin-top: var(--sp-5); }
.sheet-detail__h { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); font-size: var(--map-fs-base); font-weight: 500; color: var(--c-rose-deep); }
.sheet-detail__h .icon { width: 1.15rem; height: 1.15rem; color: var(--c-rose); }
.sheet-detail .shop-coupons + .note { margin-top: 6px; }
.sheet-detail .shop-coupon__benefit { font-size: var(--map-fs-base); }
.sheet-detail .shop-coupon { --coupon-ground: var(--c-paper); }   /* 切り欠きの地（シートは白い紙） */

/* 紹介文の破線の枠。シートの中は余白を詰める */
/* マップのシートは地が白なので、白い縁は付けず破線を枠の端に（以前の border と同じ位置。2026-11-08） */
.sheet-detail__message { --message-inset: 1px; margin-top: var(--sp-5); padding: calc(var(--sp-3) + var(--message-inset)) calc(var(--sp-4) + var(--message-inset)); font-size: var(--map-fs-sm); }

/* 表はシートが細い（PC の左パネルも 22rem）ので、いつも見出しを上に置く */
.sheet-detail .info-table th, .sheet-detail .info-table td { display: block; width: auto; padding-left: var(--sp-3); padding-right: var(--sp-3); }
.sheet-detail .info-table th { padding-bottom: 0; border-bottom: 0; }
.sheet-detail .info-table td { padding-top: var(--sp-1); }
.sheet-detail__note { margin-top: 6px; font-size: var(--fs-xs); }

.sheet-detail__page { margin-top: var(--sp-4); text-align: right; font-size: var(--map-fs-sm); }
.sheet-detail__page a { display: inline-flex; align-items: center; gap: 2px; }
.sheet-detail__page .icon { width: 1em; height: 1em; }

/* お気に入りのボタン（枠の丸いボタン） */
.sheet-detail__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: var(--map-fs-sm); transition: background-color .15s;
}
/* お気に入り。押していないときは枠だけ。追加済みは淡いピンクの地＋ピンクの枠、ハートを --c-heart で塗る（shop.php の .mylist_btn と同じ） */
.sheet-detail__mylist { gap: 6px; background: var(--c-paper); color: var(--c-rose-deep); border: 1px solid var(--c-rose); font-family: inherit; cursor: pointer; }
.sheet-detail__mylist { min-width: 14.9em; }   /* 押しても大きさを変えない（「お気に入りに追加済み」の幅。店ページと同じ。2026-11-14） */
.sheet-detail__mylist .icon { width: 1.5em; height: 1.5em; }   /* 1.1em では枠の大きさに対してハートが小さすぎた（2026-11-06） */
.sheet-detail__mylist[aria-pressed="true"] { background: var(--c-heart-wash); border-color: var(--c-heart); }
.sheet-detail__mylist[aria-pressed="true"] .icon { color: var(--c-heart); }
@media (hover: hover) and (pointer: fine) {
  .sheet-detail__mylist[aria-pressed="false"]:hover { background: var(--c-sakura-deep); }
}
.sheet__foot-link { gap: 6px; text-decoration: none; text-align: center; }
.sheet__foot-link .icon { width: 1.1rem; height: 1.1rem; }

.filter-group__sub { font-size: var(--fs-xs); color: var(--c-ink-soft); margin: 6px 0 2px; width: 100%; }

/* 一覧のお気に入りのハート（検索ページの店カードと同じ .shop-card__heart。js/ui/shop-card.js の heartButton）。
   写真の上には重ねず、検索のカードと同じく店名の右肩に置く（2026-11-13。前はコマの右端の縦の真ん中）。
   コマ（button）の中には入れられないので隣に置いて重ねる。ハートの下に潜らないよう、店名の行だけ右を空ける
   （検索のカードと同じ。下の営業状態・業種の行はハートの下まで使う。PC の左のパネルでも 1 行に収まるように） */
.sheet-list__item { position: relative; }
.sheet-list__item .sheet-item__name { padding-right: 2.25rem; }
.sheet-list__item .shop-card__heart { position: absolute; top: calc(var(--sp-3) - 0.4rem); right: 0; margin: 0; }

/* --- 現在地ボタン（js/map/map-location.js。2026-11-09） ---
   押してから最初の位置が届くまで、ボタンの縁を回す（aria-busy）。動きを減らす設定の人には回さず、
   縁をローズで囲んだまま止めておく。知らせはボタンの左に、ボタンの上端に揃えて出す（.map-controls の列の中）。
   検索の帯より下・シート（--z-sheet）より下の列なので、帯は隠さない。シートを全開にすればボタンごと隠れる */
.control-button[aria-busy="true"] { position: relative; color: var(--c-rose-deep); }
.control-button[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 2px solid var(--c-rose-pale); border-top-color: var(--c-rose-deep);
  animation: locate-spin .9s linear infinite;
}
@keyframes locate-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .control-button[aria-busy="true"]::after { animation: none; border-color: var(--c-rose); border-style: dotted; }
}

.map-locate-notice { pointer-events: none; flex: 0 1 auto; min-width: 0; }
.map-locate-notice__text {
  pointer-events: auto; cursor: pointer;
  max-width: 17rem; margin: 0 var(--sp-2) 0 0; padding: 10px 14px;
  background: var(--c-paper, #fff); color: var(--c-ink);
  border: 1px solid var(--c-rose-pale); border-left: 4px solid var(--c-rose);
  border-radius: var(--map-radius-md); box-shadow: var(--map-shadow-card);
  font-family: var(--font-main); font-size: var(--map-fs-sm); line-height: 1.6;
  animation: locate-notice-in .2s ease-out;
}
@keyframes locate-notice-in { from { opacity: 0; transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .map-locate-notice__text { animation: none; }
}
@media (min-width: 1024px) {
  .map-locate-notice__text { max-width: 20rem; }
}