/* =========================================================
   components.css
   - 再利用できる“部品”だけを書く
   - セクション / カード / ナビ / バッジ / ページャ / おしらせ etc
   - ページ固有（indexだけ等）は pages.css へ
   ========================================================= */

/* =========================
   Section (共通)
   - max-width 1100 / 左右padding 14px をここで統一
========================= */
.section-block {
  max-width: 1100px;
  margin: 22px auto;
  padding: 0 14px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: 18px;
  margin: 0;
}

/* section-card 内で使う小見出し（inline style 排除用） */
.section-title{
  margin: 0 0 10px;
  font-size: 16px;
}

.section-note {
  margin: 0 0 10px 0;
  color: #6b7280;
  font-size: 13px;
}

.section-more {
  font-size: 13px;
  color: #1565c0;
  text-decoration: none;
}

/* “カード枠”の箱（中身を囲いたい時） */
.section-card {
  max-width: 1100px;
  margin: 18px auto;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* 見出し横の小ラベル（任意） */
.section-badge{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  color: #1565c0;
  background: rgba(21,101,192,.10);
  border: 1px solid rgba(21,101,192,.18);
}

/* =========================
   List (カード一覧のUL)
========================= */
.list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* =========================
   Card（店舗カード）
========================= */
.card {
  width: calc((100% - 16px) / 3);
  min-width: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.card-link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  height:100%;
}

.card-thumb-area{
  position: relative;
  overflow: hidden;
  background: #f3f4f6;
}

.card-thumb,
.card-thumb--placeholder{
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-thumb--placeholder{
  background: #e5e7eb;
}

.card-title-overlay{
  position:absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 2;
  pointer-events:none;
}

.card-title-overlay-text{
  display:inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.58);
  color: #fff;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-body{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.card-tagline{
  margin:0;
  color: rgba(0,0,0,.78);
  line-height: 1.6;
  font-size: 13px;
}

.card-address{
  margin:0;
  color:#374151;
  line-height: 1.6;
  font-size: 13px;
}

.card-meta{
  font-size: 12px;
  color: #666;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.card-meta .chip{
  font-size: .7rem;
  background: #f1f3f5;
  padding: .2em .5em;
  border-radius: 999px;
}

.hot-list .chip {
  background: #ffecec;
  color: #c62828;
}

.latest-list .chip:not(:first-child) {
  display: none;
}

/* hover（PCだけ） */
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.12);
  }
}

/* focus（キーボード） */
.card-link:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:3px;
  border-radius:12px;
}

/* responsive columns */
@media (min-width: 980px) {
  .card { width: calc((100% - 16px) / 3); }
  .card-title-overlay-text{ font-size: 13px; }
}
@media (min-width: 720px) and (max-width: 979px) {
  .card { width: calc((100% - 8px) / 2); }
  .card-title-overlay-text{ font-size: 14px; }
}
@media (max-width: 719px) {
  .card { width: 100%; }
  .card-thumb,
  .card-thumb--placeholder { height: 200px; }
  .card-title-overlay-text{ font-size: 15px; }
}

/* =========================
   Breadcrumb
========================= */
.page-breadcrumb {
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 0 14px;
  font-size: 12px;
  color: #6b7280;
}

.page-breadcrumb a {
  color: #1565c0;
  text-decoration: none;
}

/* =========================
   Page Hero (共通見出し)
========================= */
.page-hero {
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 0 14px;
}

.page-hero h1 {
  margin: 0;
  font-size: 22px;
}

.page-hero p {
  margin: 8px 0 0 0;
  color: #6b7280;
  font-size: 13px;
}

/* =========================
   Category Nav（カテゴリチップ）
========================= */
.category-nav {
  max-width: 1100px;
  margin: 16px auto 0;
  padding: 0 14px;
}

.category-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  text-decoration: none;
}

.category-chip:hover {
  background: rgba(21,101,192,.06);
  border-color: rgba(21,101,192,.22);
}

.category-chip:focus-visible {
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 2px;
}

.category-chip.is-active {
  background: rgba(21,101,192,.06);
  border-color: rgba(21,101,192,.22);
}

.cat-icon { font-size: 16px; }
.cat-label { font-size: 13px; font-weight: 700; }

/* =========================
   Pager
========================= */
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 16px 0 0;
  flex-wrap: wrap;
}

.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
  background: #fff;
}

.pager .is-current {
  background: #1565c0;
  color: #fff;
  border-color: #1565c0;
}

/* =========================
   Badge / Links
========================= */
.badge-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid rgba(0,0,0,.10);
  color:#111827;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.badge:hover{
  border-color: rgba(0,0,0,.18);
}

/* v1.8.1: バッジ分類ラベル（公開側：分類→バッジ の順を見せる） */
.badge-group-label{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:800;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.06);
  border: 1px dashed rgba(0,0,0,.18);
  color:#374151;
}

.badge.badge-cat{
  background: rgba(21,101,192,.08);
  border-color: rgba(21,101,192,.22);
  color: #0b3a75;
}

.badge.badge-cat::before{
  content:"🏷";
  font-size: 12px;
  line-height:1;
  opacity:.9;
}

.links-box{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.links-box a{
  text-decoration:none;
  display:inline-flex;
}

/* =========================
   Notices（共通）
   - “カード一覧”と “行一覧” を分けて持つ
   - hover/focus を両方に統一
========================= */

/* 共通：リンク見た目 + アニメ */
.notice-item,
.notice-item--row {
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}

/* focus（キーボード） */
.notice-item:focus-visible,
.notice-item--row:focus-visible {
  outline: 2px solid rgba(59,130,246,.55);
  outline-offset: 3px;
  border-radius: 16px;
}

/* hover（PCだけ） */
@media (hover:hover) and (pointer:fine){
  .notice-item:hover,
  .notice-item--row:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    border-color: rgba(0,0,0,.12);
  }
}

/* 1) カード型（画像+本文） */
.notice-list {
  display: grid;
  gap: 14px;
}

.notice-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* 表示だけ（クリック不可） */
.notice-item--disabled{
  pointer-events: none;
  opacity: .92;
}

.notice-cover {
  width: 140px;
  height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.notice-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notice-content { min-width: 0; }

.notice-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #6b7280;
  font-size: 12px;
  flex-wrap: wrap;
}

.notice-title {
  font-weight: 800;
  line-height: 1.35;
  margin-top: 4px;
}

.notice-body {
  margin-top: 6px;
  color: #374151;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;

  /* 長いURL/連続文字で横溢れしない */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* カード型：モバイル */
@media (max-width: 640px) {
  .notice-item { grid-template-columns: 1fr; }
  .notice-cover { width: 100%; height: 160px; }
}

/* 2) 行型（1行：日付/店名/タイトル） */
.notice-list--rows {
  display: grid;
  gap: 2px;
}

.notice-item--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  /* 親自身も縮められる（ellipsis安定） */
  min-width: 0;
}

/* 行内レイアウト：省略のため “縮み許可” を強制 */
.notice-item--row .notice-row-line {
  flex: 1 1 auto;
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 10px;

  overflow: hidden;
}

/* 日付（固定） */
.notice-item--row .notice-row-date {
  flex: 0 0 auto;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 店名（長い時は省略） */
.notice-item--row .notice-row-store {
  flex: 0 1 auto;
  font-weight: 700;
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* タイトル：省略の主役 */
.notice-item--row .notice-row-title {
  flex: 1 1 auto;
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* 右端（矢印など） */
.notice-item--row .notice-row-arrow {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* =========================
   Sort Links（並び替え）
========================= */
.sort-links{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sort-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  text-decoration:none;
  font-size: 13px;
  font-weight: 700;
}

.sort-links a:hover{
  background: rgba(21,101,192,.06);
  border-color: rgba(21,101,192,.22);
}

.sort-links a.is-active{
  background: rgba(21,101,192,.10);
  border-color: rgba(21,101,192,.35);
  box-shadow: 0 0 0 3px rgba(21,101,192,.10);
}

/* =========================
   Result Bar（並び替えバー）
========================= */
.page-result-wrap{
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 14px;
}

.page-result-bar{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;

  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.page-result-meta{
  color: #6b7280;
  font-size: 13px;
  white-space: nowrap;
}

.page-sort{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================
   Notice meta & Return links（共通）
   - 上部の「日付/カテゴリ」＝ .notice-meta-bar
   - 下部の「一覧へ/店舗へ」＝ .notice-actions + .back-link
   - “右寄せグレー” を基準に統一
========================= */

/* 上部：日付/カテゴリ（軽いメタ情報） */
.notice-meta-bar{
  max-width:1100px;
  margin:8px auto 0;
  padding:0 14px;

  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;

  color:#6b7280;
  font-size:12px;
}
.notice-meta-bar .notice-date{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.notice-meta-bar .notice-cat{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
  background: rgba(21,101,192,.10);
  border: 1px solid rgba(21,101,192,.18);
  color:#1565c0;
}

/* 下部：戻る系ボタン列（右寄せ） */
.notice-actions{
  max-width:1100px;
  margin:14px auto 0;
  padding:0 14px;

  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* 戻るチップ */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height:34px;
  padding:0 12px;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.72);

  text-decoration:none;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:#374151;

  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.back-link:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.16);
}
.back-link:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:3px;
}

/* dark系（data-public-theme運用）でも破綻しない */
html[data-public-theme]:not([data-public-theme="light"]) .back-link{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
}
html[data-public-theme]:not([data-public-theme="light"]) .back-link:hover{
  background: rgba(255,255,255,.10);
}

/* store_notices の右上戻る（同じ見た目・右寄せ） */
.page-store-notices .notice-actions{
  margin-top: 10px;
}

/* =========================
   Button row（右寄せ）
========================= */
.btn-row.btn-row-right{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-row.btn-row-right .btn{
  width: auto;
}

/* store_notices：右上アクションの btn が横幅100%で潰すのを防ぐ */
.store-notices-actions .btn{
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* =========================
   Card edit button (overlay)
========================= */
.card-shell{
  position:relative;
}

.card-edit{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.65);
  background:rgba(17,24,39,.65);
  color:#fff;
  backdrop-filter: blur(6px);
}

.card-edit:hover{
  background:rgba(17,24,39,.85);
}

/* =========================================
   V1.7.3: カード間隔の詰め＋右余白の解消（確定版）
   - 親: gap管理
   - 子: flex-basis で3列を安定させる
   - .card width方式を無効化（上書きされても勝つ）
========================================= */

/* 1) 余計な左右余白・中央寄せで “右が余る” のを防ぐ */
.list{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  justify-content: flex-start !important; /* space-between/center を潰す */
  align-content: flex-start;
  gap: 8px;
}

/* 2) gap前提なら子は flex-basis で列を作る（width方式は捨てる） */
.list > li.item.card{
  margin: 0 !important;       /* margin由来の隙間を排除 */
  padding: 0 !important;      /* 念のため */
  box-sizing: border-box;
  flex: 0 0 calc((100% - 16px) / 3) !important; /* gap*2 */
  max-width: calc((100% - 16px) / 3) !important;
}

/* 3) .card の width を無効化（別ルールで width が勝つのを防止） */
.list > li.item.card.card{
  width: auto !important;
  min-width: 0;
  box-sizing: border-box;
}

/* 4) 端末幅で列数を自然に落とす（右余白が出にくい） */
@media (max-width: 900px){
  .list > li.item.card{
    flex-basis: calc((100% - 8px) / 2) !important; /* gap*1 */
    max-width:  calc((100% - 8px) / 2) !important;
  }
}
@media (max-width: 520px){
  .list > li.item.card{
    flex-basis: 100% !important;
    max-width:  100% !important;
  }
}