/*
 * 何ページでも使う部品: 見出し、商店カード（一覧）と写真のカード（横並び）、ジャンルの印、小さな札、
 * 営業状態、ボタン、お知らせ、行のリンク、空のとき、ダイアログ、店の詳細の部品（紹介文・券・営業時間・表）、「マップで見る」の札。
 */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ===== セクション見出し（冊子の「国立駅北口」: 家の線＋下線） ===== */
.section-heading {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  max-width: 100%;
  margin: var(--sp-8) 0 var(--sp-4);
  padding: 0 var(--sp-4) var(--sp-1) 0;
  border-bottom: var(--rule);
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--c-rose-deep);
}
@media (max-width: 639px) {
  .section-heading { font-size: 1.25rem; }
}
.section-heading__icon { width: 1.6rem; height: 1.6rem; color: var(--c-rose); }


/* 店名に冊子の黄マーカーは引かない（2026-10-31）。WEB では店名が 1 行で独立していて帯がなくても見つかり、
   h1 の大きさだと意味のない黄色が一番目立った。黄（--c-marker）は「今日」の行とクーポンにだけ使う。
   トップの「169」の帯（home.sp.css）は 1 か所だけの名残として残す */

/* ===== ジャンルの印（ローズの丸に白い線のアイコン） ===== */
.genre-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; flex: none;
  border-radius: 50%;
  background: var(--c-rose);
  color: var(--c-paper);
}
.genre-mark .icon { width: 1.15rem; height: 1.15rem; }

/* ===== 小さな札 ===== */
.pill {
  display: inline-flex; align-items: center;
  padding: 0 0.6rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  white-space: nowrap;
}
.pill--coupon { background: var(--c-rose-deep); color: var(--c-paper); }

/* ===== 営業状態（色の点＋文字） ===== */
/* 幅の狭いカードでは折り返す（nowrap だと「営業時間外・本日の営業は終了」がはみ出して切れていた） */
.status { display: inline-flex; align-items: flex-start; gap: 0.35rem; min-width: 0; font-size: var(--fs-sm); }
.status::before { content: ""; width: 0.55rem; height: 0.55rem; margin-top: 0.55em; border-radius: 50%; background: currentColor; flex: none; }
.status__text span { white-space: nowrap; }
.status.is-open { color: var(--c-open); }
.status.is-closed { color: var(--c-closed); }
.status.is-irregular { color: var(--c-irregular); }

/* ===== 場所・営業時間・電話の行 ===== */
.facts { display: grid; gap: 0.15rem; font-size: var(--fs-sm); line-height: 1.6; min-width: 0; }
.facts li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
/* アイコンは行の上下中央に（2026-11-06。上端揃え＋margin-top の手合わせでは 2〜4px 下がっていた） */
.facts__icon { width: 1rem; height: 1rem; color: var(--c-rose-pale); }
/* 営業時間は長い店があるので 2 行まで（全部は詳細ページ） */
.facts__clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== 商店カード（一覧。冊子の 1 店ぶんの紙） =====
   1 件ずつ角の丸い白い紙にして、間を 12px（広い画面は 16px）空ける（2026-11-08。罫 1 本で区切って詰めて並べると、
   全部がくっついて 1 件ずつに見えなかった。mock/cards.php の E が元）。 */
.shop-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--sp-3);
}
@media (min-width: 40rem) {
  .shop-list { gap: var(--sp-4); }
}
.shop-list > li { display: flex; }   /* 検索ページは ul > li > .shop-card */
.shop-list > li > .shop-card { flex: 1; }

/* 左に正方形の写真、右に 店名（右肩にハート）→ 営業状態・クーポン → 何の店か・エリア。
   営業状態の行は営業時間の分からない店にも出す（「営業時間は店のページで」）ので、クーポンの札はどの店でも同じ段に出る。
   店名の右肩にお気に入りのハート。ハートを出さないカード（PHP で組むもの）はそこに「›」 */
.shop-card {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);
  background: var(--c-paper);
  border: 1px solid var(--c-rose-pale);   /* 角は四角（店のページの枠・冊子のコマと同じ。2026-11-08 に 0.5rem の角丸をやめた） */
  box-shadow: var(--shadow-paper);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
/* 写真の枠は必ず正方形（店の画像は 1:1。縦長の写真でも枠の高さを変えないよう、写真は枠に重ねる） */
.shop-card__photo {
  position: relative; align-self: start;
  aspect-ratio: 1;
  border: 1px solid var(--c-rose-pale);
  overflow: hidden;
  background: var(--c-sakura);
  transition: border-color .12s;
}
.shop-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 縁が白い写真（ロゴの白地・上下の白い帯）は枠線を消す。枠があると白い所まで含めた白い箱に見える（2026-11-13。lib/helpers.php の shop_photo_white_edge） */
.shop-card__photo--white-edge { border-color: transparent; background: var(--c-paper); }
.shop-card__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

/* 店名はマーカーを引かず、少し大きく太くして区別する（2026-10-31。全件にマーカーだと強調にならなかった） */
.shop-card__head { display: flex; align-items: flex-start; }
.shop-card__name { flex: 1; min-width: 0; padding-top: 0.1rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
/* 長い店名は切れ目（空白・「・」「＆」・かっこ）で折る（ユーザー 2026-11-11。店ページの店名と同じ考え方）。keep-all で字の途中では折らず、
   切れ目の無い長い語（「国立駅前訪問看護ステーション」など）だけ overflow-wrap で端で折る（そこは前と同じ折れ方） */
.shop-card__name a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
/* カード全体を押せるようにする。リンクは店名の 1 つだけ（読み上げでは店名として読まれる） */
.shop-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.shop-card__name a:focus-visible { outline: none; }
.shop-card:has(.shop-card__name a:focus-visible) { outline: 2px solid var(--c-rose-deep); outline-offset: 2px; }
/* 押せることを示す「›」（ハートと同じ右肩。店名の 1 行目の中ほどに） */
.shop-card__go { width: 1.25rem; height: 1.25rem; margin: 0.3rem 0.5rem 0 var(--sp-1); color: var(--c-rose); }

/* お気に入りのハート（検索ページの店カードでは店名の右肩・マップの一覧の右端。js/ui/shop-card.js の heartButton）。
   写真の上には重ねない（2026-10-31）。コマ全体のリンク（店名の a::after）より上に置き、押せる範囲は 2.75rem 四方 */
.shop-card__heart {
  position: relative; z-index: 1;
  display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0;
  border-radius: 50%;
  color: var(--c-rose-deep);
}
/* カードの中では店名の右肩に。余白へはみ出させて、店名の幅を削らない */
.shop-card__head .shop-card__heart { margin: -0.5rem -0.25rem -0.4rem 0; transition: background-color .12s, box-shadow .12s; }
.shop-card__heart .icon { width: 1.4rem; height: 1.4rem; }
.shop-card__heart:focus-visible { outline: 2px solid var(--c-rose-deep); outline-offset: -2px; }

/* 営業状態の行（クーポンの札もこの行。札は営業状態の後ろに続き、入りきらなければ下へ折り返す） */
.shop-card__now { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-height: 1.6rem; font-size: var(--fs-sm); }
.shop-card__unknown { color: var(--c-ink-soft); }
/* クーポンの札にはタブバーの「クーポン」と同じ券のアイコン。券は横長で線の上下が狭いので、
   外形の上下が「ク」「ン」の字の上下にそろう大きさにし、札の高さは変えない（上下を負の余白で吸う） */
.shop-card__now .pill--coupon .icon { position: relative; top: 0.0625rem; width: 1.4375rem; height: 1.4375rem; margin: -0.5rem 0.15rem -0.5rem -0.2rem; }   /* ブラウザで測った（2026-11-08。線の太さ込みの外形と「内」の上下） */
.shop-card__kind { font-size: var(--fs-sm); color: var(--c-ink-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shop-card__genre { width: 1.1em; height: 1.1em; margin-right: 0.3em; vertical-align: -0.16em;  /* アイコンの外形の上下を漢字の上下に合わせた値（ブラウザで測った。2026-11-08。前の -0.34em は測り方を誤って 2.5px 下がっていた） */ color: var(--c-rose-deep); }
.shop-card__distance { font-size: var(--fs-sm); color: var(--c-rose-deep); }
.shop-card__note { font-size: var(--fs-sm); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ホバー: 紙は白いまま 3px 持ち上がり、縁の罫が濃く太く、下の影が厚くなる（css/tokens.css の「1 枚の紙」）。
   ::before は持ち上がった分だけ下に当たり判定を足す（下の端でカーソルが外れて上下に震えないように）。
   ハートは自分にカーソルが載ったときだけ丸く色が付く */
@media (hover: hover) and (pointer: fine) {
  .shop-card:hover { transform: translateY(-3px); border-color: var(--c-rose-deep); box-shadow: 0 0 0 1px var(--c-rose-deep), 0 5px 0 rgb(142 92 88 / 0.25); }
  .shop-card:hover::before { content: ""; position: absolute; inset: 0 0 -4px; }
  .shop-card__heart:hover { background: var(--c-sakura-deep); }
}
@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-card__photo, .shop-card__heart, .shop-tile { transition: none; }
  .shop-card.shop-card:hover, .shop-tile.shop-tile:hover { transform: none; }
}

/* ===== 写真のコマ（トップの「いま営業中のお店」。並べ方は css/pages/home.*.css） =====
   正方形の写真がコマそのもので、下端に白い字で 店名 → 何の店・エリア（2026-11-12、ユーザー。それまでは写真の下に白い紙で
   店名・業種・営業状態の 3 行）。営業状態は載せない: 見出しが「いま営業中のお店」なので「営業中」は二重、
   何時までかは店のページのいちばん上にある（ユーザー）。夜の「ほかのお店も」のときも同じコマ。
   ぼかしは字のかたまり（.shop-tile__text）の地に付ける: 字が 1 行でも 2 行でも、字のある所は濃さ 0.8 以上
   （真っ白な写真の上でも白い字が 6:1 以上）、字の上 2rem で写真に溶ける。隠れるのは写真の下 3 割ほど */
.shop-tile {
  position: relative; flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 1;
  background: var(--c-rose-deep);
  border: var(--rule);
  color: var(--c-paper);
}
/* 店の画像は必ず 1:1（docs/design_requirements.md 5.）。コマが正方形なので、写真はコマいっぱいに重ねる */
.shop-tile__photo { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--c-sakura-deep); }
.shop-tile__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shop-tile__photo .pill { position: absolute; left: var(--sp-2); top: var(--sp-2); }   /* 字と重ならないよう左上（前は左下） */
.shop-tile__text {
  position: relative; display: flex; flex-direction: column;
  padding: calc(2rem + var(--sp-1)) var(--sp-3) 0.5625rem;   /* 下は 9px: 下の行の字の下端からコマの下端までが、左の余白（12px）とほぼ同じになる（2026-11-12。前は字の下が 17px ほど空いていた） */
  background: linear-gradient(to top, rgb(74 48 46 / 0.94) 0%, rgb(74 48 46 / 0.8) calc(100% - 2rem), rgb(74 48 46 / 0) 100%);
}
/* 店名と「何の店・エリア」は 1 行に収める（ユーザー 2026-11-12）。コマの幅（100cqw）から左右の余白と枠を引いた幅を、
   字数 --n（lib/view.php の text_em_width。1.04 は見積もりのゆとり）で割った大きさにする。上限はふつうの大きさ、下限は 12px / 11px。
   下限でも入らない長い店名（.shop-tile__name--long）だけ 13px で 2 行（折り方は .shop-card__name と同じ）。
   cqw の無い古いブラウザは 1 行目の大きさのまま折り返す */
.shop-tile { container-type: inline-size; }
.shop-tile__name {
  font-size: var(--fs-sm);
  font-size: clamp(0.75rem, calc((100cqw - 1.5rem - 2px) / (var(--n, 12) * 1.04)), 1rem);
  font-weight: 500; line-height: 1.5; text-shadow: 0 1px 2px rgb(60 40 38 / 0.5);
  word-break: keep-all; overflow-wrap: anywhere;
}
.shop-tile__name--long { font-size: 0.8125rem; }
.shop-tile__meta {
  font-size: var(--fs-xs);
  font-size: clamp(0.6875rem, calc((100cqw - 1.5rem - 2px) / (var(--n, 12) * 1.04)), 0.875rem);
  line-height: 1.4; color: rgb(255 255 255 / 0.88);
}
@media (hover: hover) and (pointer: fine) {
  .shop-tile { position: relative; transition: transform .12s, border-color .12s, box-shadow .12s; }
  .shop-tile:hover { transform: translateY(-3px); border-color: var(--c-rose-deep); box-shadow: 0 0 0 1px var(--c-rose-deep), 0 5px 0 rgb(142 92 88 / 0.25); }
  .shop-tile:hover::before { content: ""; position: absolute; inset: 0 0 -4px; }
}

/* ===== おすすめ商店紹介のテーマ 1 つのコマ（トップの棚 css/pages/home.sp.css と、お知らせのページの一覧 css/pages/news.css） =====
   1 コマは正方形の「小さいロゴの面」: テーマの店の写真 4 枚を 2 × 2 に敷き詰め（目地 2px。1 画面目の面と同じ）、
   下から濃い茶のぼかしをかけて、その上に白い字で テーマ名 → 点線 → 店の数と「見る ›」（ユーザー 2026-11-12:
   白い紙に写真の帯＋字より、写真の上に字のほうが絶対よい）。写真は色のまま（面は白黒だが、ここは店を見せる）。
   字は下にそろえるので、題が 1 行でも 2 行でも空白ができない。題は言葉の切れ目（<wbr>）でだけ折る: keep-all。
   ぼかしの濃さ: 字のある下 45% は 0.8 以上（真っ白な写真の上でも白い字が 6:1 以上で読める）、75% より上は写真そのまま */
.theme-card {
  position: relative; flex: 1; min-width: 0; aspect-ratio: 1;
  background: var(--c-rose-deep); border: 1px solid var(--c-rose-pale); box-shadow: var(--shadow-paper);
  color: var(--c-paper);
}
.theme-card__photos { position: absolute; inset: 0; overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; }
.theme-card__photos img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* 枠は正方形の 4 等分（店の画像は 1:1） */
.theme-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(74 48 46 / 0.94) 0%, rgb(74 48 46 / 0.8) 45%, rgb(74 48 46 / 0) 75%);
}
.theme-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.theme-card__title {
  margin-bottom: var(--sp-2);
  font-size: 1.25rem; font-weight: 500; line-height: 1.45; text-shadow: 0 1px 2px rgb(60 40 38 / 0.5);
  word-break: keep-all; overflow-wrap: anywhere;
}
.theme-card__title a { color: inherit; }
.theme-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* コマ全体がリンク */
.theme-card__title a:focus-visible { outline: none; }
.theme-card:has(a:focus-visible) { outline: 3px solid var(--c-rose-deep); outline-offset: 2px; }
.theme-card__foot {
  padding-top: var(--sp-2);
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px dashed rgb(255 255 255 / 0.55); font-size: var(--fs-sm);
}
.theme-card__count b { margin-right: 0.1em; font-size: 1.375rem; font-weight: 500; line-height: 1; }
.theme-card__go { display: inline-flex; align-items: center; gap: var(--sp-1); }
.theme-card__go .icon { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) {
  /* テーマのコマ: 3px 持ち上がり、縁が濃く太く（商店カード・写真タイルと同じ。css/tokens.css） */
  .theme-card { transition: transform .12s, border-color .12s, box-shadow .12s; }
  .theme-card:hover { transform: translateY(-3px); border-color: var(--c-rose-deep); box-shadow: 0 0 0 1px var(--c-rose-deep), 0 5px 0 rgb(142 92 88 / 0.25); }
  .theme-card:hover::before { content: ""; position: absolute; inset: 0 0 -4px; }   /* 持ち上がった分だけ下に当たり判定を足す（下の端でカーソルが外れて震えないように） */
}
@media (prefers-reduced-motion: reduce) {
  .theme-card { transition: none; }
  .theme-card.theme-card:hover { transform: none; }
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 2.75rem; padding: var(--sp-1) var(--sp-5);
  border: 1px solid var(--c-rose-deep); border-radius: 999px;
  background: var(--c-paper); color: var(--c-rose-deep);
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.btn--solid { background: var(--c-rose-deep); color: var(--c-paper); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--c-sakura-deep); }
  .btn--solid:hover { background: var(--c-paper); color: var(--c-rose-deep); }
  /* 文字のリンク: 色を一段濃く、下線を太く。地は敷かない（2026-11-08 に薄いローズを敷いたが、色を濃くした 11-11 からは
     文字を選択したときのような四角に見えた。ユーザー: 変） */
  .text-link:hover { color: var(--c-ink); text-decoration-thickness: 2px; }
}
.btn--sm { min-height: 2.25rem; padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }
.btn[aria-pressed="true"] { background: var(--c-rose-deep); color: var(--c-paper); }

.text-link { color: var(--c-rose-deep); text-decoration: underline; text-underline-offset: 3px; }
/* 店の WEB へのボタン（lib/view.php の web_button・js/map/sheet-content.js）。.btn.btn--sm に、サイトのアイコンと外に出る印を足すだけ */
.web-btn .icon { width: 1.15rem; height: 1.15rem; flex: none; }
.web-btn__site--x { color: #000; }   /* X のロゴは黒か白だけ（ブランドガイドライン）。ボタンの地は白 */
.web-btn .web-btn__ext { width: 0.9rem; height: 0.9rem; opacity: 0.75; }
.more-link { display: flex; justify-content: flex-end; margin-top: var(--sp-3); }
.more-link a { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-rose-deep); }

/* ===== お知らせ・Blog の 1 件（トップと news.php） ===== */
.news-list { display: grid; border-top: var(--rule); }
.news-item {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: var(--rule);
}
.news-item__img { width: 6rem; aspect-ratio: 1; object-fit: cover; flex: none; }
.news-item__body { min-width: 0; }
.news-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.news-item__new { color: var(--c-rose-deep); }
.news-item__title { font-size: var(--fs-md); margin-top: var(--sp-1); }
.news-item__title a::after { content: ""; position: absolute; inset: 0; }
.news-item__text { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* ===== 行のリンク（おすすめ商店の一覧） ===== */
@media (hover: hover) and (pointer: fine) {
  .news-item:hover { background: var(--c-sakura-deep); }
  .shelf__row--news .news-item:hover { background: var(--c-sakura-deep); }
}

/* ===== お気に入り（mylist.php）: カードの下に「外す」の行 ===== */
.mylist-count { margin-bottom: var(--sp-2); }
.mylist_item { display: flex; flex-direction: column; }
/* 「外す」は同じ紙の下の端（点線で区切る）。紙の影は「外す」の方に（角はカードと同じ四角） */
.mylist_item > .shop-card { flex: 1; border-bottom: 0; box-shadow: none; }
.mylist-remove {
  min-height: 2.75rem;
  padding: var(--sp-2);
  border: 1px solid var(--c-rose-pale); border-top: var(--rule-dash);
  box-shadow: var(--shadow-paper);
  background: var(--c-paper);
  font-size: var(--fs-sm);
  color: var(--c-rose-deep);
}
/* ホバー: カードと「外す」は 1 枚の紙なので、カードに載ったら 2 つ一緒に持ち上げる（カードだけ持ち上げると「外す」と離れて見えた。2026-11-12）。
   縁の罫と影はまとまり全体に付ける。「外す」に載ったときは持ち上げず、色だけ（別の操作なので） */
@media (hover: hover) and (pointer: fine) {
  .mylist-remove:hover { background: var(--c-sakura-deep); }
  @supports selector(:has(*)) {
    .mylist_item { transition: transform .12s, box-shadow .12s; }
    .mylist_item:has(> .shop-card:hover) { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--c-rose-deep), 0 5px 0 rgb(142 92 88 / 0.25); }
    .mylist_item > .shop-card:hover { transform: none; box-shadow: none; }
    .mylist_item:has(> .shop-card:hover) > .mylist-remove { border-color: var(--c-rose-deep); border-top: var(--rule-dash); box-shadow: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mylist_item { transition: none; }
  .mylist_item.mylist_item:has(> .shop-card:hover) { transform: none; }
}
/* 外した直後: カードは消さずに薄くして残し、ボタンは「外しました　元に戻す」（js/mylist-page.js。押し間違えても 1 回で戻せる。2026-11-11） */
.mylist_item.is-removed > .shop-card { opacity: 0.45; }
.mylist-remove__done { margin-right: var(--sp-3); color: var(--c-ink-soft); }
.mylist-remove__done[hidden] { display: none; }
.mylist_item.is-removed .mylist-remove__label { text-decoration: underline; text-underline-offset: 3px; }

/* ===== 空のとき・注意 ===== */
.empty {
  border: 1px dashed var(--c-rose-pale);
  background: var(--c-paper);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.empty p + p { margin-top: var(--sp-4); }

.panel { background: var(--c-paper); border: var(--rule); padding: var(--sp-4); }
.panel + .panel { margin-top: var(--sp-4); }
.panel__title { font-size: var(--fs-lg); color: var(--c-rose-deep); margin-bottom: var(--sp-2); }

/* ===== ダイアログ（お気に入りの案内など） ===== */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: rgb(90 70 69 / 0.5);
}
.modal[hidden] { display: none; }
.modal__box { width: 100%; max-width: 22rem; background: var(--c-paper); border: var(--rule); padding: var(--sp-5); }
.modal__title { font-size: var(--fs-lg); color: var(--c-rose-deep); margin-bottom: var(--sp-2); }
.modal__text { font-size: var(--fs-sm); margin-bottom: var(--sp-4); text-align: justify; }   /* 両端をそろえる（ユーザー 2026-11-11。お気に入りの使い方の案内） */

/* ===== 店の詳細の部品（shop.php と、マップのシートの詳細 js/map/sheet-content.js で使う。2026-10-31 に shop.css から移した） ===== */

/* ===== 紹介文（冊子の破線の枠） ===== */
/* 白い紙の 6px 内側に破線。以前は破線を border、白い縁を外向きの outline 6px で描いていたので、
   紙の端がほかの枠より左右に 6px ずつはみ出していた（2026-11-08）。破線を内向きの outline にして、
   紙の外側の端をほかの枠とそろえる。文字と破線のあきは前と同じ（padding に 6px + 線 1px を足す） */
.message {
  --message-inset: 7px;
  margin-top: var(--sp-5);
  background: var(--c-paper);
  outline: 1px dashed var(--c-rose);
  outline-offset: calc(-1 * var(--message-inset));
  padding: calc(var(--sp-4) + var(--message-inset)) calc(var(--sp-5) + var(--message-inset));
  line-height: 1.9;
}

/* ===== クーポンの券 ===== */
/* 店ページとマップのシートの券。形はクーポンページの券（css/pages/coupon.css の .coupon_card）と同じ:
   色の付いた半券（1回限り = 黄、何度でも = 淡い桃）・切り取り線・上下の切り欠き・塗りの「使う」の札（2026-11-11。
   前は左に黄の細い帯がある角丸の箱で、押した先の券と別の物に見えた）。写真と店名は載せない（そのページの店なので）。
   切り欠きは下の地の色で塗る（--coupon-ground。マップのシートは白い紙の上なので css/map-legacy/map-page.css で白に） */
.shop-coupons { display: grid; gap: var(--sp-3); }
.shop-coupon {
  --stub: var(--c-ticket-yellow);
  position: relative;
  display: flex;
  background: var(--c-paper);
  border: var(--rule);
  border-radius: 0.375rem;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.shop-coupon.is-multi { --stub: var(--c-ticket-pink-pale); }
.shop-coupon__main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
}
.shop-coupon__benefit { font-size: var(--fs-lg); line-height: 1.45; color: var(--c-ink); white-space: pre-line; } /* 文面の改行（データの 
.shop-coupon__benefit--hint { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }   /* 店ページ: 改行は <wbr>。1 行に入るなら折らない（coupon_benefit_html）。マップのシートは JS が文をそのまま入れるので pre-line のまま */
）をそのまま改行に */
.shop-coupon__comment { font-size: var(--fs-xs); }
.shop-coupon__period { margin-top: auto; padding-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-ink-soft); }
.shop-coupon__stub {
  position: relative;
  flex: none;
  width: 3.625rem;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-2);
  background: var(--stub);
  border-left: 2px dashed var(--c-rose-pale);
  border-radius: 0 0.3rem 0.3rem 0;
  color: var(--c-ink);
}
.shop-coupon__stub::before, .shop-coupon__stub::after {
  content: "";
  position: absolute; left: -0.5rem;
  width: 0.875rem; height: 0.4375rem;
  background: var(--coupon-ground, var(--c-sakura));
  border: var(--rule);
}
.shop-coupon__stub::before { top: -1px; border-top: 0; border-radius: 0 0 0.5rem 0.5rem; }
.shop-coupon__stub::after { bottom: -1px; border-bottom: 0; border-radius: 0.5rem 0.5rem 0 0; }
.shop-coupon__kind { writing-mode: vertical-rl; text-orientation: upright; font-size: 0.8125rem; line-height: 1; letter-spacing: 0.08em; }
.shop-coupon__use {
  padding: 0.3rem 0.4rem;
  background: var(--c-rose-deep);
  color: var(--c-paper);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgb(90 70 69 / 0.25);
}
/* ホバーはクーポンページの券と同じ: 白いまま 3px 持ち上がり、縁（切り欠きの線も）が濃く、「使う」の札が反転 */
@media (hover: hover) and (pointer: fine) {
  .shop-coupon:hover,
  .shop-coupon:hover .shop-coupon__stub::before,
  .shop-coupon:hover .shop-coupon__stub::after { border-color: var(--c-rose-deep); }
  .shop-coupon:hover { transform: translateY(-3px); box-shadow: 0 5px 0 rgb(142 92 88 / 0.25); }
  /* ::before は 2 役: 持ち上がった分だけ下に足す当たり判定（下の端でカーソルが外れて震えないように）と、
     下の切り欠きの真下の影を地の色で消す小さな面（影が切り欠きの下を素通りして、切り欠きが影の上の出っ張りに見えた。ユーザー 2026-11-11）。
     面の位置は半券の幅 3.625rem・切り欠きの left -0.5rem・幅 0.875rem・切り取り線 2px から */
  .shop-coupon:hover::before { content: ""; position: absolute; inset: 0 0 -6px; background: linear-gradient(var(--coupon-ground, var(--c-sakura)), var(--coupon-ground, var(--c-sakura))) right calc(3.25rem - 2px) bottom 0 / 0.875rem 5px no-repeat; }
  .shop-coupon:hover .shop-coupon__use { background: var(--c-paper); color: var(--c-rose-deep); box-shadow: 0 0 0 1px var(--c-rose-deep), 0 2px 0 rgb(90 70 69 / 0.25); }
}
@media (prefers-reduced-motion: reduce) { .shop-coupon { transition: none; } .shop-coupon.shop-coupon:hover { transform: none; } }

/* ===== 営業時間の枠と、アクセス・連絡先の表（店ページとマップのシート） ===== */
/* 営業時間の枠（.info-table と同じ紙と罫。行の見出しが無いので表にしない。2026-11-07） */
.info-box { background: var(--c-paper); border: var(--rule); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
.info-table { width: 100%; border-collapse: collapse; background: var(--c-paper); border: var(--rule); font-size: var(--fs-sm); }
.info-table th, .info-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px dashed var(--c-rose-pale); text-align: left; vertical-align: top; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th { width: 6.5em; font-weight: 500; color: var(--c-rose-deep); white-space: nowrap; }
/* スマホは見出しを上に置いて、中身に幅を全部使う（横に並べると営業時間の欄が狭すぎる） */
@media (max-width: 1023px) {
  .info-table th, .info-table td { display: block; width: auto; }
  .info-table th { padding-bottom: 0; border-bottom: 0; }
  .info-table td { padding-top: var(--sp-1); }
}

/* 曜日ごとの営業時間（同じ時間の曜日はまとめてある）。曜日と時間の列をそろえ、今日の行に印 */
/* 表は枠の内側いっぱいに広げ、今日の帯を左右同じ余白で枠の右端まで引く（帯が短く見えたため。2026-11-08） */
.hours-list { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.hours-list li {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: start; column-gap: var(--sp-3);
  padding: 0.15rem var(--sp-2); margin: 0 calc(var(--sp-2) * -1);
}
/* 帯は --c-marker を白で薄めて使う（そのままだとローズの曜日が 4.16:1 で AA に届かなかった。60% で 4.66:1、本文色 7.4:1。2026-11-08） */
.hours-list li.is-today { background: color-mix(in srgb, var(--c-marker) 60%, var(--c-paper)); }
.hours-list__days { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); color: var(--c-rose-deep); }
/* 時間帯は 1 つずつ改行（「14:00-19:00」の途中では折らない） */
.hours-list__times { display: grid; }
.hours-list__times span { white-space: nowrap; }
.hours-list__today { font-size: var(--fs-xs); padding: 0 0.5rem; border-radius: 999px; background: var(--c-rose-deep); color: var(--c-paper); }


/* 「マップで見る」の札（一覧の店をマップの絵の上に点で。lib/map_preview.php・js/ui/map-preview.js。2026-11-10）。
   作りは店のページの .mini-map（css/pages/shop.css）と同じ 1 枚の札。箱は 16:9（--wide は PC で 21:9、--tall は 4:3）。
   絵の面（__map）は 21:9 で箱の高さいっぱい・真ん中に置く（店が必ず入る範囲は真ん中にあるので、どの比でも切れない） */
.map-preview {
  display: block;
  background: var(--c-paper); border: var(--rule);
  overflow: hidden; color: inherit; text-decoration: none;
}
.map-preview[hidden] { display: none; }
.map-preview__view {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-map-bg); /* 絵の外・絵が入るまで */
}
.map-preview--tall .map-preview__view { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
  .map-preview--wide .map-preview__view { aspect-ratio: 21 / 9; }
}
.map-preview__map {
  position: absolute; top: 0; left: 50%; height: 100%;
  aspect-ratio: 21 / 9;
  transform: translateX(-50%);
  overflow: hidden;
}
.map-preview__img { position: absolute; max-width: none; height: auto; }
.map-preview__label {
  position: absolute; transform: translate(-50%, -50%);
  font-size: var(--fs-xs); line-height: 1; white-space: nowrap; color: var(--c-ink);
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
  pointer-events: none;
}
/* 点の色はマップのピンと同じ大分類の色（css/tokens.css の --c-genre-*）。
   重なっても 1 つずつ見分けられるよう小さめにして白い縁を付ける（2026-11-10） */
.map-preview__dot {
  position: absolute; width: 0.55rem; height: 0.55rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--c-rose-deep);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 2px 1px rgb(0 0 0 / 0.2);
}
.map-preview__dot--food      { background: var(--c-genre-food); }
.map-preview__dot--shopping  { background: var(--c-genre-shopping); }
.map-preview__dot--medical   { background: var(--c-genre-medical); }
.map-preview__dot--life      { background: var(--c-genre-life); }
.map-preview__dot--education { background: var(--c-genre-education); }
.map-preview--many .map-preview__dot { width: 0.4rem; height: 0.4rem; box-shadow: 0 0 0 1px #fff; }
.map-preview__foot {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px dashed var(--c-rose-pale);
  font-size: var(--fs-sm); color: var(--c-rose-deep);
}
.map-preview__next { margin-left: auto; }
@media (hover: hover) and (pointer: fine) {
  .map-preview:hover { border-color: var(--c-rose-deep); box-shadow: 0 0 0 1px var(--c-rose-deep); }
  .map-preview:hover .map-preview__foot { background: var(--c-sakura-deep); }
}
/* ランチ・カフェ・ピックアップのページ: 一覧の下（2026-11-10、ユーザー: 紹介文の下に置くとスマホの最初の画面が地図だけになる）。
   PC は幅を抑える（全幅 1100px だと絵を 1.6 倍に引き伸ばしてぼやけ、画面を占めすぎる） */
.page-map-preview { margin-top: var(--sp-6); }
@media (min-width: 1024px) {
  .page-map-preview { max-width: 44rem; }
}

/* 「マップで見る」の小さなリンク（検索の件数の横・ランチ・カフェ・ピックアップの紹介文の下。2026-11-10）。
   スマホは --fs-xs: 検索では件数と「いま営業中のみ」と同じ 1 行に 169 店でも収める */
.map-link {
  display: inline-flex; align-items: center; gap: 0.125rem;
  height: 2.5rem;
  font-size: var(--fs-xs); color: var(--c-rose-deep); white-space: nowrap; text-decoration: none;
}
.map-link[hidden] { display: none; }
.map-link .icon { width: 1rem; height: 1rem; }
@media (min-width: 1024px) {
  .map-link { gap: var(--sp-1); font-size: var(--fs-sm); }
  .map-link .icon { width: 1.1rem; height: 1.1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .map-link:hover, .more-link a:hover { color: var(--c-ink); }
}
/* ランチ・カフェ・ピックアップ: 紹介文のすぐ下（紹介文・見出しの下の余白を詰める。リンクの箱は押しやすい 40px 高） */
.page-map-link { display: flex; width: fit-content; margin: calc(-1 * var(--sp-3)) 0 var(--sp-2); }
.lead + .page-map-link { margin-top: calc(-1 * var(--sp-4)); }