/*
 * サイト共通の見た目（ビルドしない素の CSS）。
 * 色は App\Support\Palette が正。:root の値は Palette::COLORS と一字一句そろえる（PaletteTest）。
 * 守る数値（CLAUDE.md の DADS の節）: 文字 16px／文字 4.5:1／枠 3:1／押せる所 44px／フォーカスが見える。
 */
:root {
  --paper: #f8f5ef;
  --surface: #ffffff;
  --ink: #2b2925;
  --ink-muted: #5c574f;
  --line: #8a8378;
  --rule: #e2dbcf;
  --link: #2b5a6e;
  --accent: #2d6a4f;
  --accent-hover: #24553f;
  --on-accent: #ffffff;
  --focus: #2b2925;
  --error: #b3261e;
  --error-bg: #fdecea;
  --success: #2e6b32;
  --success-bg: #e9f3ea;
  --warning: #6b4e00;
  --warning-bg: #fff4d6;
  --info: #1a5a8c;
  --info-bg: #e8f1f8;
  --mark-red: #c62828;
  --mark-green: #2e7d32;

  --tap: 44px;
  --radius: 10px;
  --gap: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
/* hidden 属性は display を持つクラス（.field-input など）より勝たせる（付けても見えたままになるのを防ぐ） */
[hidden] { display: none !important; }

/* 文字の大きさは rem で書く＝根の大きさ1つで全部が一緒に大きくなる。
 * 根は 100%（ブラウザの「文字の大きさ」の設定に従う）。「文字を大きく」を押した人は 125%（16px → 20px）。
 * 余白・枠・押せる所の 44px は px のまま（文字だけ大きくする）。 */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.text-large { font-size: 125%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* フォーカスは必ず見せる（outline を消す所は無い） */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 8px; top: 12px; background: var(--surface); padding: 8px 12px; z-index: 10; min-height: var(--tap); display: inline-flex; align-items: center; }

.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* ---- ヘッダー・フッター ---- */
/* 題字。新聞の題字のように、白い地の上に太い緑の線・墨の大きな名前。しるしや色の帯は付けない */
.site-header { border-top: 6px solid var(--accent); border-bottom: 1px solid var(--rule); background: var(--surface); }
/* 題字の並び（2026-11-14 詰めた）。1行目＝左に題字・右に「文字を大きく」、2行目＝地域の行。
   ボタンを自分の1行に置いていた頃はヘッダーが高すぎた（375px で約 220px）。
   題字は flex-basis 0 で伸び縮みし、縮めるのは名前の幅まで（min-width は既定の auto）。足りない分は読みが名前の下へ回る
   ＝押して文字が大きくなっても、ボタンは同じ1行目の右に残る（押した所でもう一度押せる。行を決めるのが「名前＋読み」の幅だと、
   大きい字でボタンだけ次の行へ跳んだ＝独立レビューの指摘・375px で実測）。
   名前とボタンも並ばない狭さでは、ボタンは次の行の右へ落ちる＝名前の上に重ならない。
   実測（2026-11-14・「こよみち」・Chromium・320〜600px を 1px ずつ）: ブラウザの文字の設定が既定（16px）なら、
   370px 以上はふつうの字でも大きい字でもボタンは1行目・369px 以下はどちらでも2行目（下の 369px の区切り）＝押しても動かない。
   ブラウザの文字の設定が大きく、さらに「文字を大きく」を押したときだけ、広い所でも2行目へ落ちる（112.5% で 449px まで・125% で 490px まで。重なりも横スクロールも無い） */
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 12px; padding-top: 10px; padding-bottom: 8px; }
.masthead .wrap > .site-name, .site-title { flex: 1 1 0; }
/* 名前もリンクなので下線は残す（線の色は枠と同じ 3:1 の色・乗せたら濃く）。下線はリンクに付け、名前の行に出る */
.site-name { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-name:hover { text-decoration-color: currentColor; }
/* ロゴ（日めくりと曲がり道のはんこ）。飾り（alt は空）。高さを rem で決める＝「文字を大きく」で名前と一緒に大きくなる。
   max-width: none は外さない。img 全体の max-width: 100% が残ると、題字の「これ以上縮めない幅」からロゴの幅が抜け
   （割合の max-width を持つ画像は最小の幅に数えない、というブラウザの決まり）、大きい字でボタンがロゴと名前に重なった（実測） */
.site-logo { display: block; flex: none; height: 2.75rem; width: auto; max-width: none; }
.site-name-words { display: block; }
/* 名前と読みは同じ行に並べ、入らなければ読みだけ次の行へ回す（名前そのものは割らない。名前を長くしたら 320px で見る） */
.site-name-text { display: inline; white-space: nowrap; font-size: 1.75rem; line-height: 1.3; font-weight: 700; letter-spacing: 0.04em; }
/* 読み。名前の横に1度だけ（16px＝読ませる文字の下限）。inline-block にして、リンクの下線を読みには伝えない（下線は名前の1本だけ） */
.site-reading { display: inline-block; white-space: nowrap; font-size: 1rem; line-height: 1.4; font-weight: 400; letter-spacing: 0.2em; color: var(--ink-muted); margin-left: 8px; }
/* トップでは題字が h1（大きさは中の名前・読みが決める。h1 の既定の余白を消す） */
.site-title { margin: 0; font-size: 1rem; line-height: 1.3; }
/* 狭い画面では題字を少し小さく（右にボタンが並ぶため）。区切りを 399px にしていたら、大きい字の 400〜408px で
   ボタンだけ2行目へ落ちた（実測）ので 409px */
@media (max-width: 409px) { .site-name-text { font-size: 1.375rem; } .site-logo { height: 2.25rem; } }
/* 370px より狭い画面では、ふつうの字でも大きい字でもボタンを自分の行（右）に置く。
   大きい字では名前とボタンが並ばない（「文字をふつうに」のほうが1文字長い・360〜368px で実測）ので、
   片方だけ並べると押すたびにボタンが行を行き来する */
@media (max-width: 369px) { .masthead .wrap > .site-name, .site-title { flex-basis: 100%; } }
/* 地域の行は題字の下に自分の1行を取る（名前の読みと同じ行に並ぶと、読みが地域名の一部に見えた＝「時ノ路 ときのじ」のころ） */
.site-region { flex-basis: 100%; color: var(--ink-muted); margin: 2px 0 0; font-size: 1rem; }
.site-region-part { display: inline-block; }
/* 「文字を大きく」のボタン。題字の右（DOM でも題字のあと＝キーボード・読み上げの順が見た目の左→右と同じ）。
   いちばん要る人に見つけてもらうボタンなので字は太いまま（.btn の 700）。余白だけ詰める */
.text-size { margin: 0 0 0 auto; }
.btn.text-size-btn { padding: 4px 10px; }
/* 読む人のメニュー（題字との間の細い線はヘッダーの下の線・下に緑の線。いま見ている所は太字＋緑の下線） */
.public-nav { border-bottom: 3px solid var(--accent); }
.public-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.public-nav a { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: var(--tap); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 6px; }
.public-nav a span { white-space: nowrap; } /* 折るなら語の切れ目（「これからの｜イベント」）で。語の途中で割らない */
/* 狭い画面では3つを同じ幅で1行に並べる（flex のままだと 320px で「1つ＋2つ」の2段に割れ、1つだけ浮いた行ができた） */
@media (max-width: 599px) {
  .public-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
  .public-nav a { display: flex; text-align: center; padding: 4px 0; line-height: 1.4; }
}
/* 大きい文字で 374px 以下だと「これからの」（5文字×20px）が3等分の列からはみ出すので、メニューだけ少し戻す */
@media (max-width: 374px) {
  html.text-large .public-nav a { font-size: 0.875rem; }
  /* 共有・外へのボタンは「（新しいタブで開きます）」の前でしか折れず、320px で 12px はみ出した。大きいときの狭い幅だけ語の中でも折る */
  html.text-large .tap-text .nowrap { white-space: normal; }
}
.public-nav a:hover { text-decoration-color: currentColor; }
.public-nav a[aria-current="page"] { font-weight: 700; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }

main { padding: 32px 0 48px; }

.site-footer { border-top: 1px solid var(--rule); padding: 32px 0 40px; font-size: 0.875rem; color: var(--ink); background: var(--surface); }
.site-footer a { color: var(--link); display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 0 20px; }

h1, h2, h3 { font-weight: 700; }
h1 { font-size: 1.75rem; line-height: 1.4; margin: 0 0 16px; word-break: auto-phrase; }
h2 { font-size: 1.375rem; line-height: 1.5; margin: 32px 0 12px; }
h3 { font-size: 1.125rem; line-height: 1.5; margin: 24px 0 8px; }
p { margin: 0 0 16px; }

.muted { color: var(--ink-muted); }

/* ---- ボタン ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); min-width: var(--tap); padding: 8px 20px;
  font: inherit; font-weight: 700; line-height: 1.4;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--paper); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* ボタンの並び。折り返しても上下左右がくっつかない（押しまちがいを防ぐ） */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn-danger { border-color: var(--error); color: var(--error); }

/* ---- 入力欄（ラベル → サポート → 入力 → エラー） ---- */
.field { margin: 0 0 24px; }
.field-label { display: block; font-weight: 700; margin: 0 0 4px; }
.badge-required {
  display: inline-block; margin-left: 8px; padding: 0 6px;
  font-size: 0.875rem; font-weight: 700; line-height: 1.6;
  color: var(--error); border: 1px solid var(--error); border-radius: var(--radius); vertical-align: 1px;
}
.field-help { margin: 0 0 6px; color: var(--ink-muted); }
.field-notice { color: var(--warning); background: var(--warning-bg); padding: 6px 10px; border-left: 4px solid var(--warning); }
.sent-to { overflow-wrap: anywhere; }
.field-input {
  display: block; width: 100%; min-height: var(--tap);
  padding: 8px 12px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
textarea.field-input { min-height: 160px; resize: vertical; }
select.field-input { padding-right: 32px; }
.field-input[aria-invalid="true"] { border: 2px solid var(--error); }
.field-errors { list-style: none; margin: 6px 0 0; padding: 0; }
.field-error { color: var(--error); font-weight: 700; margin: 2px 0 0; }

/* ---- 知らせ（種類は色＋アイコン＋文字） ---- */
.flash {
  /* 狭い画面では「閉じる」を下の行へ回し、本文を細らせない */
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
  margin: 0 0 24px; padding: 12px 12px 12px 16px;
  border: 1px solid; border-left-width: 6px; border-radius: var(--radius);
}
.flash:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.flash-icon { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.flash-body { flex: 1 1 180px; min-width: 0; }
.flash-kind { font-weight: 700; margin: 0; }
.flash-text { margin: 0; color: var(--ink); }
.flash-text ul { margin: 4px 0 0; padding-left: 1.2em; }
.flash-list { margin: 4px 0 0; padding-left: 1.2em; }
/* まとめの「エラーのある欄」へのリンク。押せる所を 44px にする */
.flash-text .error-links { margin: 4px 0 0; }
.error-links a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
.flash-close {
  flex: none; margin-left: auto; min-width: var(--tap); min-height: var(--tap);
  font: inherit; font-weight: 700; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.flash-error { background: var(--error-bg); border-color: var(--error); }
.flash-error .flash-kind, .flash-error .flash-icon { color: var(--error); }
.flash-success { background: var(--success-bg); border-color: var(--success); }
.flash-success .flash-kind, .flash-success .flash-icon { color: var(--success); }
.flash-warning { background: var(--warning-bg); border-color: var(--warning); }
.flash-warning .flash-kind, .flash-warning .flash-icon { color: var(--warning); }
.flash-info { background: var(--info-bg); border-color: var(--info); }
.flash-info .flash-kind, .flash-info .flash-icon { color: var(--info); }

/* 本文の文字色（requirements §4.4。style 属性ではなくクラスで持つ） */
.mark-red { color: var(--mark-red); }
.mark-green { color: var(--mark-green); }

/* 文の外に1つだけ置くリンク（戻る・やること）。下線のまま、押せる高さを 44px にとる */
.link-tap { display: inline-flex; align-items: center; min-height: var(--tap); }

/* 画面には出さず、読み上げにだけ渡す */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- ログインしてから使う画面（運営・お店）のメニュー ---- */
.sub-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 4px 0 8px; }
.sub-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 16px; }
.sub-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 4px; }
/* いま開いている所は色だけでなく太字でも分ける */
.sub-nav a[aria-current="page"] { font-weight: 700; color: var(--ink); text-decoration-thickness: 3px; }
.logout { margin: 0 0 0 auto; }

/* ---- 一覧（320px でも崩れないように表ではなく並び） ---- */
.item-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.item-list > li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.item-main { min-width: 0; overflow-wrap: anywhere; }
.item-name { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.item-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tag { display: inline-block; font-size: 0.875rem; line-height: 1.4; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); }
.tag-off { color: var(--ink-muted); border-style: dashed; }

/* ---- チェックボックス（四角そのものは小さいので、ラベルまで押せる幅を 44px にとる） ---- */
.field-check { display: grid; grid-template-columns: var(--tap) 1fr; align-items: start; column-gap: 4px; }
.field-check input[type="checkbox"] { width: 24px; height: 24px; margin: 10px; accent-color: var(--accent); }
/* ラベルは block にする（flex だと、長いラベルが折り返したとき「必須」が右に別の列として離れる）。
   上下の余白で 44px をとり、1行のときに四角の高さの真ん中に文字が来るようにする */
.field-check label { font-weight: 700; display: block; min-height: var(--tap); padding: 10px 0; line-height: 24px; line-break: strict; cursor: pointer; }
.field-check .field-help, .field-check .field-errors { grid-column: 2; }
.field-static { margin: 0; padding: 10px 0; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }

/* ---- 表（プライバシーポリシーの「4. 外国の会社に渡す情報」など、規約の表）。
   狭い画面でも横に動かさず、枠の中で折り返す（横に動かすと、右の列＝「渡すもの」が隠れて読まれない）。
   日本語は1文字ごとに折り返せるので、320px でも全部の列が収まる（英単語は収まらないときだけ途中で折る） ---- */
table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
th, td { border: 1px solid var(--rule); padding: 8px; text-align: left; vertical-align: top; overflow-wrap: break-word; }
th { background: var(--paper); }

/* ---- 規約のページ ---- */
.legal { overflow-wrap: anywhere; }
.legal ul, .legal ol { padding-left: 1.5em; margin: 0 0 16px; }
.legal li { margin: 0 0 4px; }
.legal a { display: inline; }

/* ---- 項目と値の並び（運営の詳細） ---- */
.detail { margin: 0 0 24px; border-top: 1px solid var(--rule); }
.detail > div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.detail dt { font-weight: 700; margin: 0 0 4px; }
.detail dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---- ファイルを選ぶ欄 ---- */
.field-file { display: block; min-height: var(--tap); padding: 8px 0; max-width: 100%; font: inherit; }

/* ---- 人には見せない欄（機械だけが埋める・おとり） ---- */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- 写真の確認（運営） ---- */
.photo-check { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule); }

/* ---- 文の中のリンクを並べた箇条（申し込みの同意の前） ---- */
.legal-list { padding-left: 1.5em; margin: 0 0 16px; overflow-wrap: anywhere; }
.legal-list li { margin: 0 0 8px; }

/* ---- 申し込みの書き出しの「最後で規約への同意が要ります」 ---- */
.apply-consent-note { padding: 8px 12px; border-left: 4px solid var(--accent); background: var(--surface); }

/* ---- 記事（見え方の確認・審査・公開ページで同じ形） ---- */
.article-preview { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; margin: 0 0 24px; }
.article { overflow-wrap: anywhere; }
.article-thumb, .article-image { display: block; max-width: 100%; height: auto; margin: 0 0 16px; border-radius: 0; }
.article-tags { margin: 0 0 8px; padding: 0; list-style: none; }
.article-title { margin: 0 0 16px; line-height: 1.4; }
.article-facts { margin: 0 0 16px; border-top: 1px solid var(--rule); }
.article-facts > div { display: grid; grid-template-columns: 4em 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.article-facts dt { font-weight: 700; margin: 0; }
.article-facts dd { margin: 0; }
.article-body { margin: 0 0 16px; }
.article-body p { margin: 0 0 1em; }
.article-body ul { padding-left: 1.5em; margin: 0 0 1em; }
/* エディタで書いた箇条書きは <li><p>…</p></li> の形で入る。行の間を空けない */
.article-body li > p { margin: 0; }
.article-shop { margin: 24px 0 16px; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.article-shop-name { font-weight: 700; margin: 0 0 8px; }
.article-note { color: var(--ink-muted); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); } /* 送るボタンの続きに読まれないよう、線で区切る（利用者bot） */
.image-current { display: block; max-width: 240px; width: 100%; height: auto; margin: 0 0 8px; border: 1px solid var(--rule); border-radius: var(--radius); }
.break-all { overflow-wrap: anywhere; }
/* 文の区切りの外では折らない（「開き／ます」のように語の途中で折れると読みにくい）。
   ボタン（.btn）と .link-tap は inline-flex なので、中の文を .tap-text 1つにまとめ（まとめないと span が別々の列になり、はみ出す）、その中で .nowrap と .nowrap の間だけで折る */
.nowrap { white-space: nowrap; }
.tap-text { display: block; min-width: 0; }
.btn-primary .tap-text { text-align: center; } /* 2行に折れても、ボタンの真ん中に寄せる */
.shop-link { margin-bottom: 0; }
.shop-link-host { margin-top: 0; }
.pre-line { white-space: pre-line; } /* 改行して書いた文（止めた理由など）をそのまま見せる */
.article-ended { margin: 0 0 16px; font-weight: 700; }
.article-dates { margin: 16px 0; }
.article-share { margin: 24px 0 16px; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.share-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share-list .btn { white-space: normal; text-align: left; }
.share-icon { flex: none; width: 24px; height: 24px; } /* ロゴは縮めない・形を変えない（文字が2行になってもアイコンは潰れない） */
.share-copy-status { display: inline-block; margin-left: 8px; overflow-wrap: anywhere; } /* 失敗したときは長い URL が入る */
.share-other .share-copy-status { display: block; margin-left: 0; width: 0; min-width: 100%; } /* 知らせはボタンの下。空のときは高さ0（空の行を作らない）。幅はボタンに合わせる（知らせの長さで枠を広げない） */
.share-other .share-copy-status:not(:empty) { margin-top: 8px; }
.article-contact { overflow-wrap: anywhere; }

/* ---- 読む人の画面（トップ・一覧・お店のページ） ---- */
.filters { margin: 16px 0 8px; } /* 上の「今週末のイベントを見る」のボタンとくっつけない（押しまちがい・同じ種類のボタンに見える） */
/* 絞り込みは畳める。見出し（summary）に「いま選んでいる条件」を出す。押せる高さは 44px。
   summary は block のまま（古い Safari では flex にした summary が並ばず、開け閉めも読まれない）。中の .filters-row で並べる */
.filters-summary { display: block; list-style: none; min-height: var(--tap); padding: 4px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); cursor: pointer; }
.filters-summary::-webkit-details-marker { display: none; }
.filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: calc(var(--tap) - 10px); }
/* 開く・閉じるの印（見た目だけ。開いているかは details が読み上げに伝える） */
.filters-row::before { content: "＋"; content: "＋" / ""; font-weight: 700; color: var(--accent); }
.filters[open] > .filters-summary .filters-row::before { content: "－"; content: "－" / ""; }
.filters-label { font-weight: 700; }
.filters-now { color: var(--ink); overflow-wrap: anywhere; }
/* 開いた中身は左の線で箱の続きと分かるように（線が無いと、箱の中か外かが分からなかった＝利用者bot） */
.filters-body { margin: 8px 0 0 4px; padding: 0 0 4px 12px; border-left: 3px solid var(--line); }
.filters h2 { font-size: 1rem; margin: 16px 0 0; }
.filters-body > h2:first-child { margin-top: 0; }
.weekend-entry { margin: 8px 0 0; }
.filter-nav { padding: 0; }
.filter-nav ul { gap: 4px 8px; }
/* いま選んでいるエリア・ジャンルは緑で塗る（太字と下線だけでは「選んでいる」と気づけなかった）。角は少しだけ丸める */
.filter-nav a[aria-current="page"] { padding: 0 12px; border-radius: 4px; background: var(--accent); color: var(--on-accent); }
.section { margin: 40px 0 0; }
/* 区切りの見出し。新聞の欄のように、上に緑の太い線 */
.section > h2 { margin: 0 0 8px; padding-top: 10px; border-top: 3px solid var(--accent); }
/* 記事の並び。新聞の催し欄のように1件1行で、細い線で区切る（箱で囲まない）。
   左にイベントの日付（日めくり）、右に写真。写真の無い記事は文字だけ（色面で埋めない） */
.card-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.card-list > li { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.card { display: grid; grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "body thumb"; gap: 0 12px; align-items: start; }
.card-noimg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body"; }
/* 狭い画面のイベントは、日付・題・写真を横に3つ並べると題が細くなりすぎるので、写真は題の下に回す */
.card-has-cal { grid-template-columns: 3.5rem minmax(0, 1fr); grid-template-areas: "cal body" "cal thumb"; }
.card-has-cal.card-noimg { grid-template-areas: "cal body"; }
.card-body { grid-area: body; min-width: 0; overflow-wrap: anywhere; }
.card-thumb { grid-area: thumb; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.card-has-cal .card-thumb { max-width: 240px; margin-top: 8px; }
/* 日めくりの日付（見た目だけ。同じ日付は card-date に文字で書いてある） */
.card-cal { grid-area: cal; margin: 4px 0 0; display: flex; flex-direction: column; align-items: center; padding: 4px 0 6px; line-height: 1.25; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--accent); }
.card-cal-month { font-size: 1rem; color: var(--ink); }
.card-cal-day { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--accent); }
.card-cal-week { font-size: 1rem; color: var(--ink-muted); }
/* 何日か続くイベントの終わりの日（「〜16日」「〜12/2」） */
.card-cal-end { font-size: 0.875rem; color: var(--ink); white-space: nowrap; }
@media (min-width: 600px) {
  .card { grid-template-columns: minmax(0, 1fr) 200px; gap: 0 20px; }
  .card-noimg { grid-template-columns: minmax(0, 1fr); }
  .card-has-cal { grid-template-columns: 4rem minmax(0, 1fr) 200px; grid-template-areas: "cal body thumb"; }
  .card-has-cal.card-noimg { grid-template-columns: 4rem minmax(0, 1fr); grid-template-areas: "cal body"; }
  .card-has-cal .card-thumb { max-width: none; margin-top: 0; }
}
.card-title { margin: 2px 0; font-size: 1.125rem; line-height: 1.5; }
/* お店のページのまとまりの見出し。カードの題（18px）と見分けられるよう、大きくして左に緑の線を引く */
.shop-group-title { font-size: 1.25rem; margin: 32px 0 8px; padding-left: 12px; border-left: 6px solid var(--accent); }
/* 題が1行でも押せる高さを 44px にとる（文字の高さだけだと 41px だった） */
.card-title a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); padding: 4px 0; }
/* 日付とお店は1行ずつ（区切りの「・」は読み上げだけに残す） */
.card-meta { margin: 0; color: var(--ink-muted); }
.card-date, .card-shop, .card-posted { display: block; }
.card-date { font-weight: 700; color: var(--ink); }
/* 種類・ジャンル・エリアは札にせず、文字を「・」でつなぐ（種類だけ緑の太字）。管理の画面の札（.tag）はそのまま */
.card .item-tags, .article-tags { gap: 0; }
.card .tag, .article-tags .tag { padding: 0; border: 0; border-radius: 0; background: none; font-size: 1rem; color: var(--ink-muted); }
/* 区切りの「・」は前の語の後ろに付ける（折り返しても行の頭に来ない）。読み上げでは読まない。「終了しました」の後ろには付けない（1行を使う札なので） */
.card .tag:not(:last-child):not(.tag-off)::after, .article-tags .tag:not(:last-child)::after { content: "・"; content: "・" / ""; }
.card .tag-kind, .article-tags .tag-kind { font-weight: 700; color: var(--accent); }
/* 「終了しました」は種類の並びに混ぜず、1行を使って枠で囲む（同じ行に続けると種類の説明に見えて読み飛ばされた） */
.card .tag-off { flex-basis: 100%; margin-bottom: 2px; }
.tag-off-badge { display: inline-block; padding: 0 8px; border: 1px dashed var(--line); border-radius: var(--radius); font-weight: 700; color: var(--ink); background: var(--paper); }
/* 終わったものの日めくりは灰色に（これからのものと同じ緑だと、日付だけ見て行ってしまう） */
.card-ended .card-cal { background: var(--paper); border-top-color: var(--line); }
.card-ended .card-cal-day { color: var(--ink-muted); }
.section-note { margin: 0 0 8px; color: var(--ink-muted); }
/* トップのいちばん近いイベント。題を大きく・写真を広く（日めくりと並びは同じ） */
.card-when { margin: 0 0 4px; font-weight: 700; color: var(--accent); }
.card-featured .card-title { font-size: 1.375rem; }
@media (min-width: 600px) {
  .card-featured { grid-template-columns: minmax(0, 1fr) 320px; }
  .card-featured.card-has-cal { grid-template-columns: 4rem minmax(0, 1fr) 320px; }
  .card-featured.card-noimg { grid-template-columns: minmax(0, 1fr); }
  .card-featured.card-has-cal.card-noimg { grid-template-columns: 4rem minmax(0, 1fr); }
}
.card-featured .card-thumb { max-width: none; }
/* 件数は「無料でお知らせを載せられます」の欄の1行目（線で囲んだ帯にしない） */
.stats { margin: 0 0 8px; }
.stats p { margin: 0; font-weight: 700; }
/* 狭い画面で「参加している／お店」のように言葉の途中で割れないよう、2つのまとまりごとに折り返す */
.stats-item { display: inline-block; }
.pager { margin: 16px 0 0; }
.empty { margin: 8px 0 0; color: var(--ink-muted); }