/* お知らせページ（/news）と、トップページのお知らせ枠。

   営業状況の店舗カード（.qn-*）と、カレンダー（.cal-* / .sd-calendar）は
   それぞれ quake-notice.css・calendar.css の見た目をそのまま使う。
   ここに書くのは、その入れ物と、トップページの枠だけ。 */

/* ------------------------- お知らせページ ------------------------- */

/* 文章は読みやすい幅（780px）に、カレンダーは全店ぶんが入るよう広く使う */
.news-body {
  max-width: 1060px;
  margin: 0 auto;
}

.news-block {
  max-width: 780px;
  margin: 0 auto 46px;
}

.news-block.is-wide {
  max-width: none;
}

.news-block:last-child {
  margin-bottom: 0;
}

.news-block-title {
  font-family: var(--font-serif);
  /* ⚠️ 大きさ・行間・余白は css/site.css の共通の式が持つ（元の値もあちら＝1.4rem）。
        ここに font-size を書き戻さないこと（式が二重になる）。 */
  color: #F5A623;
  font-weight: 600;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(245, 166, 35, 0.25);
}

.news-block-lead {
  color: #ccc;
  /* ⚠️ 大きさ・行間・余白は css/site.css（元の値＝1rem／行間2／下22px） */
}

.news-updated {
  font-size: 0.75rem;
  color: #777;
  margin: 14px 0 0;
  text-align: right;
}

/* カレンダーは店舗ページと同じ枠（.sd-calendar）で見せる。
   ページ内に単独で置くので、上の余白だけ打ち消す */
.news-block .sd-calendar {
  margin-top: 0;
}

.news-loading,
.news-empty p {
  color: #aaa;
  line-height: 2;
  margin: 0;
}

/* ⛔⛔ **読み込み中は「画面1枚ぶん」の場所を先に確保する**（2026-08-09・ガタつきの直し）。
      💥 お知らせの中身は `/api/status` と `/api/calendar` が届いてから `js/news.js` が組み立てる。
         それまで「読み込んでいます…」の1行（32px）しか無いので、中身が来た瞬間に
         **区画が 1400px ほど伸びてフッターを押し下げる**＝ 実測 CLS **📱0.7639 / 🖥0.6873**（かなり悪い）。
      ⭐ 直し方＝ **先に場所を確保する**。1画面ぶん確保すれば、あとから伸びるぶんは
         **画面の外**で起きるので、お客様には動いて見えない（ずれの計算にも入らない）。
      ⭐ 実測（本番・2026-08-09）＝ 📱 0.7639 → **0.0567** ／ 🖥 0.6873 → **0.0104**
         （どちらも「良好」の目安 0.1 を下回る）。
      ⚠️ **中身が来たらこの1行ごと消える**＝ 確保は読み込み中だけ。
         ⛔ 区画（`.news-section`）に持たせると、お知らせが少ない日に**空白が残る**（試して却下）。
      ⛔ `.news-empty p`（お知らせが無いときの本文）には当てないこと＝あちらは最終形。 */
/* ⚠️ **拡大率で割り戻す**（2026-08-10）。パソコン幅では `body` に `zoom` が掛かっているので、
      素の `100svh` は「画面の高さ × 拡大率」になり、読み込み中だけページが**余分に長くなる**
      （＝場所の確保をやりすぎて、中身が来たときに逆に縮む＝ ガタつきの元）。
   ⛔ 拡大縮小の中で「本物の画面の高さ」が要るときは、必ずこの形で書く。
   🔗 正本＝`css/site.css` の「設計幅 1440px」の節。 */
.news-loading {
  min-height: 100vh;          /* 古いブラウザ用 */
  min-height: calc(100svh / var(--tf-zoom, 1));   /* 上下のバーを除いた実際の高さ（★48） */
}

.news-empty {
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 34px 26px;
  text-align: center;
}

.news-empty-sub {
  font-size: 0.9rem;
  margin-top: 12px !important;
}

.news-empty-sub a {
  color: #F5A623;
  font-weight: 600;
}

/* --------------------- トップページのお知らせ枠 --------------------- */

.home-news {
  max-width: 860px;
  margin: -10px auto 55px;
  border: 1px solid rgba(245, 166, 35, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 20px 24px 18px;
}

.home-news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(245, 166, 35, 0.18);
  padding-bottom: 12px;
}

.home-news-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: #F5A623;
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.1em;
}

.home-news-title .en {
  font-size: 0.65rem;
  color: #888;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-left: 10px;
  font-family: var(--font-sans);
  font-weight: 400;
}

.home-news-more {
  font-size: 0.85rem;
  color: #F5A623;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.home-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-news-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.home-news-item:last-child {
  border-bottom: none;
}

.home-news-item.is-empty {
  color: #999;
  font-size: 0.9rem;
  padding: 14px 2px;
}

.home-news-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  text-decoration: none;
  color: inherit;
}

.home-news-tag {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.home-news-tag.is-quake {
  color: #f0c274;
  border-color: rgba(240, 194, 116, 0.5);
  background: rgba(240, 194, 116, 0.1);
}

.home-news-tag.is-cal {
  color: #9ac4ff;
  border-color: rgba(154, 196, 255, 0.45);
  background: rgba(154, 196, 255, 0.1);
}

.home-news-body {
  min-width: 0;
}

.home-news-name {
  display: block;
  font-size: 0.95rem;
  color: #fff;
  /* ⛔ 500 は使わない（2段しか無い端末では 400 に落ちる）。店名は少し強めたいので 600。 */
  font-weight: 600;
  line-height: 1.6;
}

.home-news-sub {
  display: block;
  font-size: 0.8rem;
  color: #999;
  margin-top: 3px;
  /* 長い本文は1行で切る（枠が伸びて入口カードを押し下げないように） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------- スマートフォン --------------------------- */

@media (max-width: 900px) {
  .home-news {
    margin: 0 15px 40px;
    padding: 16px 18px 14px;
  }

  .home-news-link {
    align-items: flex-start;
    gap: 10px;
    padding: 13px 0;
  }

  .home-news-tag {
    margin-top: 2px;
  }

  /* ⚠️ 狭い画面の見出し（1.2rem）は css/site.css の --tf-fs-base 側へ移した */
}

/* スマホ（640px 以下）は、トップのお知らせ枠を **8割** に縮める
   （2026-08-03・PM 指摘「スマホ画面のお知らせ枠の表示がでかすぎます」）。
   ⚠️ 枠ごと `transform: scale()` で縮めると、**場所だけ元の大きさで残る**（隙間ができる）。
      文字と余白をそれぞれ 0.8 倍にすること。
   ⚠️ この枠はトップの1枚目に入っている＝縦の余裕が少ない。ここを縮めると
      入口カードののぞく量も増える（css/site.css の 1枚目の指定と連動して効く）。 */
@media (max-width: 640px) {
  .home-news {
    padding: 13px 14px 11px;
  }

  .home-news-head {
    gap: 10px;
    padding-bottom: 10px;
  }

  .home-news-title {
    font-size: 0.84rem;
  }

  .home-news-title .en {
    font-size: 0.52rem;
    margin-left: 8px;
  }

  .home-news-more {
    font-size: 0.68rem;
  }

  .home-news-link {
    gap: 8px;
    padding: 10px 0;
  }

  .home-news-item.is-empty {
    font-size: 0.72rem;
    padding: 11px 2px;
  }

  .home-news-tag {
    font-size: 0.58rem;
    padding: 4px 9px;
  }

  .home-news-name {
    font-size: 0.76rem;
  }

  .home-news-sub {
    font-size: 0.64rem;
  }
}

/* ⭐ **お知らせの切り替えタブ**（PM 指示 2026-08-08）。
      💥 営業状況とカレンダーを縦に並べていたので、**カレンダーを見るのに下までスクロール**が要った。
         PM 談：「どちらが優先ということもないので」＝ 上下ではなく横に並べる。
      ⚠️ **両方あるときだけ出る**（片方しか無いときは js/news.js が出さない）。
      🔗 見え方は「地域の切り替え」と同じ書式にそろえてある（`css/store-slider.css`）。
         元の値はここ。足し引きは --tf-gap（ボタンどうし）／--tf-pad-t・--tf-pad-b（上下）／
         --tf-scale（文字の大きさ）。正本＝`_worker.js` の LAYOUT_PARTS（news-tabs）。 */
.news-tabs {
  display: flex;
  justify-content: center;
  gap: calc(var(--tf-gap, var(--tf-gap-base, 12px)));
  margin: calc(var(--tf-pad-t, var(--tf-pad-t-base, 0px))) 0 calc(var(--tf-pad-b, var(--tf-pad-b-base, 32px)));
}

/* ⛔ **親から降ってきていた分を、このタブ自身の元の値として持つ**（2026-08-08 修復・教訓201）
      💥 焼き込み前、ここは親（`.section.news-section`）の `--tf-pad-t-pc: -10px` /
         `--tf-pad-b-pc: -40px` を**継承して** −10px / −8px に見えていた。
         親の値を CSS へ焼いた瞬間に継承元が 0 になり、**タブだけが 10px 下がり 40px 空いた**
         （PM 指摘 2026-08-08・実測）。
      ⛔ **幅の帯を正確に切ること。**親のつまみは「パソコン用」＝ **641px 以上でしか効いていなかった**。
         全幅に当てると、スマホで **10px ずれる**（実際に一度そう書いて、実測63件で見つけた）。 */
@media (min-width: 641px) {
  .news-tabs {
    margin-top: calc(var(--tf-pad-t, var(--tf-pad-t-base, -10px)));
    margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, -8px)));
  }
}

/* ⚠️ 大きさのつまみは囲み（.news-tabs）に付き、ここが受け継いで拡がる（★26）。
      ⛔ `.news-tab` を「パソコン用／スマホ用の振り分け」に入れないこと。 */
.news-tab {
  min-width: 148px;
  padding: 12px 22px;
  background: transparent;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 4px;
  color: #b9946c;
  font-family: var(--font-serif);
  --tf-fs-base: 1.02rem;
  font-size: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1));
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.news-tab:hover {
  border-color: rgba(245, 166, 35, 0.7);
  color: #F5A623;
}

.news-tab.is-active {
  background: rgba(245, 166, 35, 0.14);
  border-color: #F5A623;
  color: #F5A623;
}

@media (max-width: 600px) {
  .news-tabs {
    /* ★25 上の式と同じ足し引きを、こちらにも（元の値だけが違う） */
    gap: calc(var(--tf-gap, var(--tf-gap-base, 10px)));
    margin-bottom: calc(var(--tf-pad-b, var(--tf-pad-b-base, 24px)));
  }

  .news-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 8px;
    --tf-fs-base: 0.95rem;
    font-size: calc(var(--tf-fs-base, 1rem) * var(--tf-scale, 1));
  }
}