/* ごみ収集日（/gomi/ と /gomi/◯◯/）
   ─────────────────────────────────────────────
   カレンダーは既存クラスで組めないので、ここにまとめている。
   ハブと町域ページの両方が読むため、ページ内 <style> から切り出した。
   区分の色は4つ。js/gomi-data.js の GROUPS の並びと対応している。 */

/* ── 月カレンダー ── */
.gc-head { display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 12px; }
.gc-head strong { font-size:1.05rem; }
/* 1fr のままだと、グリッド項目の min-width:auto で .gc-tag（nowrap）の
   文字幅までしか縮まず、7列が画面より広がって右がはみ出す
   （2026-11-06 実測: 画面390pxでグリッド395px）。minmax(0,1fr) で
   min-content を切って必ず7等分する。あふれた .gc-tag は
   すでに overflow:hidden + ellipsis で畳まれる */
.gc-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:0 0 20px; }
.gc-wd { text-align:center; font-size:.78rem; color:var(--gray); padding:4px 0; }
.gc-cell {
  min-height:62px; border:1px solid var(--line); border-radius:8px;
  background:#fff; padding:4px; display:flex; flex-direction:column; gap:2px;
  align-items:stretch; text-align:left; font-family:inherit;
  cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.gc-cell:hover { border-color:var(--green-light); }
.gc-cell:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
.gc-cell.is-empty { border:none; background:transparent; cursor:default; }
/* 今日はオレンジで囲む。選択中の緑と見分けがつくようにしている */
.gc-cell.is-today { border-color:var(--accent); box-shadow:0 0 0 2px rgba(244,162,97,.28); }
/* 選んだ日。今日と重なっても、選択が勝つ */
.gc-cell.is-picked { border-color:var(--green); background:var(--ok-bg); box-shadow:0 0 0 2px rgba(45,106,79,.22); }
.gc-day { font-size:.8rem; font-weight:700; color:var(--text-strong); line-height:1.2; }
.gc-cell.is-today .gc-day { color:#B45309; }
.gc-cell.is-picked .gc-day { color:var(--green); }
.gc-tag {
  display:inline-block; font-size:.62rem; line-height:1.5; font-weight:700;
  padding:0 4px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gc-0 { background:#FEE2E2; color:#991B1B; }
.gc-1 { background:#DBEAFE; color:#1E40AF; }
.gc-2 { background:#FEF3C7; color:#92400E; }
.gc-3 { background:#DCFCE7; color:#166534; }

/* ── 町域ページ ── */
/* 区分見出しの横に出す曜日。見出しより弱く見せる */
.gomi-h3-days { font-weight:400; font-size:.86rem; color:var(--gray); }
/* チップをリンクにしたときの下線だけ消す。見た目は .label-chip のまま */
.filter-chips a.label-chip { text-decoration:none; }

@media (max-width:640px) {
  .gc-cell { min-height:52px; padding:3px; }
  .gc-tag { font-size:.56rem; }
  /* 7列を画面に収めるとセルの内側が37pxになり、4文字のラベル（「通常収集」
     「年内最終」など）が ellipsis で「通常…」になって読めない。
     折り返して2行にする。.gc-day 15px + 2行26px + padding で 50px、
     min-height の 52px に収まるのでセルの高さは変わらない
     （2026-11-06、画面390pxで実測）。nowrap でないので ellipsis は効かなくなる */
  .gc-cell .gc-tag { white-space:normal; }
}

/* ── 品目から引く（こんなものどう捨てる？）── */
/* 区分バッジは収集曜日の4色に、大型と禁止を足した6色。
   gc-0〜3 はカレンダーと同じ色なので、見比べたときに意味がつながる */
.gc-4 { background:#EDE9FE; color:#5B21B6; }   /* 大型ごみ（有料） */
.gc-5 { background:#F3F4F6; color:#374151; }   /* 市で収集・受入できない */
.gc-6 { background:#CCFBF1; color:#115E59; }   /* 店や施設の回収へ（回収ボックス・回収缶・店頭） */

.gi-list { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.gi-item { border:1px solid var(--line); border-radius:10px; background:var(--white); padding:14px 16px; }
.gi-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.gi-head strong { font-size:1rem; color:var(--text-strong); }
.gi-head .gc-tag { font-size:.7rem; padding:2px 8px; }
.gi-next { font-size:.8rem; color:var(--green); font-weight:700; }
.article-page-body .gi-item .gi-note { margin:6px 0 0; font-size:.88rem; line-height:1.8; color:var(--text-mute); }

/* 検索結果に出す注意。別ページに送らずその場で読み切れるようにしている */
.article-page-body .gi-points { margin:8px 0 0; padding-left:1.2em; }
.article-page-body .gi-points li { font-size:.86rem; line-height:1.8; color:var(--text-mute); }

/* ── 年末年始（/gomi/nenmatsu/） ───────────────────────── */

/* カレンダーは上の月カレンダーと同じ .gc-* をそのまま使う。
   /gomi/ の町域カレンダーと見た目を揃えるため、ここでは
   新しいマス目を作らない。違うのは次の2点だけ:
     ・押せない（町域を選ぶ機能はこのページに無いので <div>）
     ・日の意味を .gc-tag で出す（収集なし／年内最終／収集再開／日曜）
   バッジの色は品目バッジと同じ gc-0〜5 を使い回している */
.nenmatsu-cal .gc-cell { cursor: default; transition: none; }
.nenmatsu-cal .gc-cell:hover { border-color: var(--line); }

/* 通常どおり収集がある日。
   既存のカレンダーは「バッジがある＝その日に何か出せる」で読ませているので、
   ここでも通常日にバッジを置く。日曜は空のマスのまま（市は日曜を収集しない）。
   区分の4色（gc-0〜3）とは別の色にして、区分バッジと取り違えないようにしている */
.nenmatsu-cal .gc-tag.is-normal { background: var(--green-pale); color: var(--green); }

/* 年末年始の休止。いちばん目立たせる */
.nenmatsu-cal .gc-cell.is-off,
.nenmatsu-cal .gc-cell.is-off:hover {
  background: #FEF2F2; border-color: var(--danger);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .18);
}
.nenmatsu-cal .gc-cell.is-off .gc-day { color: var(--danger); }

/* 年内最終。ここを逃すと次がない日。既存の is-today と同じ系統の色にしている */
.nenmatsu-cal .gc-cell.is-last,
.nenmatsu-cal .gc-cell.is-last:hover {
  background: var(--warn-bg); border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(244, 162, 97, .28);
}
.nenmatsu-cal .gc-cell.is-last .gc-day { color: var(--warn-text); }

/* 収集再開。既存の is-picked と同じ緑 */
.nenmatsu-cal .gc-cell.is-first,
.nenmatsu-cal .gc-cell.is-first:hover {
  background: var(--ok-bg); border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(45, 106, 79, .22);
}
.nenmatsu-cal .gc-cell.is-first .gc-day { color: var(--green); }

/* 表のセルに入れる「7日」「14日あく」。
   14日あく町域が読者の知りたいことなので、そこだけ色を変える */
.article-page-body .gc-gap { font-size: .76rem; line-height: 1.5; color: var(--text-mute); }
.article-page-body .gc-gap-long { color: var(--danger); font-weight: 700; }

/* 年末年始の結論ボックスは2段落ある。
   .warn-box は p { margin:0 } なので、重ねたときに行がくっつく */
.article-page-body .warn-box p + p { margin-top: 10px; }

/* ── ハブ（/gomi/）を記事ではなく「選ぶ画面」として組む ──────
   ハブは .article-page-body を借りているので、記事の組版がそのまま効く。
   記事は読ませる画面、ハブは選ばせる画面なので、文字を主役から降ろす。

   やること:
     ・リード文の拡大をやめる（記事は1段落目を大きく濃くしている）
     ・見出しを小さめ・詰めぎみにして、下の選択パネルを主役にする
     ・段落は本文サイズのまま、幅いっぱいに流さない
   やらないこと:
     ・見出しの縦棒は外さない。サイト全体の見出しの印なので、
       ここだけ変えると別サイトに見える */
.article-page-body.hub-body > p:first-of-type,
.article-page-body.hub-body > p.pr-notice + p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 20px;
}
.article-page-body.hub-body h2 {
  font-size: 1.18rem;
  margin-top: 40px;
  margin-bottom: 12px;
}
/* 本文の1つめの見出しだけ。子孫までかけると、JSが後から描く
   町域パネルの見出し（上妙典の収集曜日）まで余白ゼロになる（2026-10-22） */
.article-page-body.hub-body > h2:first-child { margin-top: 0; }
/* 選択パネル（町域チップ・品目検索）は見出しのすぐ下に置く */
.article-page-body.hub-body h2 + .filter-bar,
.article-page-body.hub-body h2 + #gomi-item-search { margin-top: 14px; }
.article-page-body.hub-body p { font-size: .95rem; }

/* 選んだ町域の答え。見出しは本文のh3と同じ扱いでよい */
#nenmatsu-town-panel { margin-top: 20px; }
#nenmatsu-town-panel h3:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
#nenmatsu-town-panel td.gc-gap-long { color: var(--danger); font-weight: 700; }

/* 「長い参照用の表を畳む」(.collapse-table) は css/article-page.css に移した。
   ごみ以外の記事（施設ハブなど）でも使うため。2026-10-22 */