/* 営業カレンダー（連休などの営業・休業のお知らせ）。
   ・全ページ共通の帯 → 押すと全店まとめたカレンダーが開く
   ・店舗ページには、その店だけのカレンダーを直接置く */

/* --------------------------- 全ページ共通の帯 --------------------------- */

#cal-bar {
  position: fixed;
  /* ⚠️ ヘッダーの真下。高さの正本は css/style.css の --header-h */
  top: var(--header-h, 66px);
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 9px 16px;
  border: none;
  border-bottom: 1px solid rgba(245, 166, 35, 0.3);
  background: rgba(10, 14, 26, 0.96);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#cal-bar .cal-bar-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F5A623;
  flex: 0 0 auto;
}

#cal-bar .cal-bar-text {
  font-weight: 600;
}

#cal-bar .cal-bar-cta {
  border: 1px solid rgba(245, 166, 35, 0.6);
  border-radius: 4px;
  color: #F5A623;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  flex: 0 0 auto;
}

/* 帯のぶん、ページの中身を下げる */
body.has-cal-bar {
  padding-top: 37px;
}

/* --------------------------- 全画面のカレンダー --------------------------- */

.cal-overlay {
  position: fixed;
  inset: 0;
  z-index: 6500;
  background: #060910;
  overflow-y: auto;
  padding: 12px 16px 60px;
}

/* 1マスに全店ぶんが入るため、広い画面では横幅を大きくとる */
.cal-sheet {
  max-width: 1060px;
  margin: 0 auto;
}

.cal-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 10px;
  background: #060910;
}

.cal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

body.cal-open {
  overflow: hidden;
}

/* --------------------------- 見出し --------------------------- */

.cal-title {
  font-family: var(--font-serif);
  /* ⚠️ 大きさ・行間・余白は css/site.css の共通の式が持つ
        （元の値＝1.35rem／行間1.8／下10px。狭い画面 640px の 1.25rem もあちら）。
        ここに font-size を書き戻さないこと（式が二重になる）。 */
  color: #F5A623;
  text-align: center;
}

.cal-message {
  text-align: center;
  color: #dfe3e9;
  /* ⚠️ 大きさ・行間・余白は css/site.css（元の値＝0.9rem／行間1.9／下6px） */
}

.cal-range {
  text-align: center;
  color: #a8afba;
  /* ⚠️ 大きさ・前後の余白は css/site.css の共通の式が持つ
        （元の値＝0.82rem／下22px。狭い画面 640px の 0.95rem もあちら）。
        ここに font-size / margin を書き戻さないこと（式が二重になる）。 */
}

/* --------------------------- 月のマス目 --------------------------- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  text-align: center;
  /* ⚠️ 大きさは css/text-look.css（元の値＝0.82rem） */
  color: #b4bbc6;
  padding: 4px 0;
  /* 曜日にも枠を付ける（PM 要望 2026-08-02）。太さはマスと同じつまみで動く
     （太さは css/text-look.css の `--tf-border-w`）。 */
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: 6px;
}

.cal-dow.is-sun {
  color: #ff9d9d;
}

.cal-dow.is-sat {
  color: #9ecbff;
}

/* 変更のある日は全店ぶんが入るため、マスは高さに余裕を持たせて文字も大きくする
   （小さいと店名が読めず、かえって分かりにくい） */
.cal-cell {
  /* ⚠️ 高さと大きさは css/site.css（元の値＝132px／0.84rem。狭い画面は 62px／0.66rem）。
        ここに min-height / font-size を書き戻さないこと（式が二重になる）。 */
  /* ⚠️ 太さは css/text-look.css（`--tf-border-w`）。ここでは色と形だけ。
        以前は rgba(…,0.09) でほとんど見えなかった（PM 指摘 2026-08-02）。 */
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.02);
  line-height: 1.6;
}

/* 期間の外の日は薄く出す（月の形を保つため） */
.cal-cell.is-out {
  border-color: transparent;
  background: none;
  color: #5c6373;
}

.cal-cell.is-empty {
  border: none;
  background: none;
}

.cal-date {
  font-weight: 600;
  color: #eef1f5;
  margin-bottom: 5px;
  /* ⚠️ 大きさは css/site.css（元の値＝0.88rem） */
}

.cal-cell.is-sun .cal-date {
  color: #ff9d9d;
}

.cal-cell.is-sat .cal-date {
  color: #9ecbff;
}

.cal-cell.is-out .cal-date {
  color: #5c6373;
}

/* 全店が営業の日は「全店 通常営業」の1行だけにする（見た目は各店の行と揃える） */
.cal-allnormal {
  color: #7fd6a8;
  border-left-color: rgba(127, 214, 168, 0.75);
  background: rgba(127, 214, 168, 0.09);
}

/* 店舗ごとに1行。左端の色帯と下地で「営業・休業・時間変更」がひと目で分かるようにし、
   行のあいだに区切りを入れて、どこまでが1店舗ぶんかを見分けやすくしている */
.cal-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 4px 7px;
  margin-bottom: 4px;
  border-radius: 5px;
  border-left: 3px solid transparent;
  white-space: normal;
  /* ⭐ 日本語は語の途中で割らない／英語は語と語のあいだで折り返す（2026-08-04）。
     ⚠️ overflow-wrap: anywhere は**最後の逃げ道**。1語がどうしても入らないときだけ働く。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cal-item:last-child {
  margin-bottom: 0;
}

/* 全店まとめて言い切れる日（全店 通常営業／全店 休業／通常営業）。
   店名と状態の対が無い1つの文なので、**マスの中で縦にも横にも中央**に置く（PM 要望 2026-08-02）。
   ⚠️ 中の文字は `.cal-all-text` で包んである。包まないと、外側が flex なので
      `<br>` が「箱の並び」として扱われ、**改行にならない**。 */
.cal-item.is-all {
  justify-content: center;
  align-items: center;      /* .cal-item の baseline を上書き */
  text-align: center;
}

/* マス目のときだけ、残りの高さいっぱいを使って縦中央に置く。
   ⚠️ 日付ごとの一覧（狭い画面）では高さを取らない（行が無駄に伸びる）。 */
.cal-grid .cal-cell {
  display: flex;
  flex-direction: column;
}

.cal-grid .cal-cell > .cal-date {
  flex: 0 0 auto;
}

.cal-grid .cal-item.is-all {
  flex: 1 1 auto;
}

/* 店名の途中では折り返さない（「WHISKEY / CAT」のように割れないように）。
   1行に収まらないときは、店名と状態のあいだで折り返す */
.cal-item-name {
  color: #d3dae6;
  white-space: nowrap;
}

.cal-item-state {
  /* 💥 以前は white-space: nowrap だった。日本語は「通常営業」4文字で収まるが、
        英語は "Open as usual" 13文字・"All stores" 10文字になり、**マスからあふれる**
        （PM 指示 2026-08-04：改行して納める）。
     ⭐ word-break: keep-all ＝ **日本語は語の途中で割らず、英語は語と語のあいだで折り返す。**
        「通常営業」が「通常／営業」に割れるのを防ぎつつ、"Open as / usual" は折り返せる。
     ⚠️ どうしても1語が入らないときは、親の overflow-wrap: anywhere が最後の逃げ道になる。 */
  white-space: normal;
  word-break: keep-all;
  font-weight: 600;
  /* 同じ行に収まるときは右端に寄せる（店名と状態の位置が揃って読みやすい） */
  margin-left: auto;
}

.cal-item.is-normal {
  color: #7fd6a8;
  border-left-color: rgba(127, 214, 168, 0.75);
  background: rgba(127, 214, 168, 0.09);
}

.cal-item.is-closed {
  color: #ff9d9d;
  border-left-color: rgba(255, 157, 157, 0.85);
  background: rgba(255, 157, 157, 0.14);
}

.cal-item.is-opens {
  color: #ffc978;
  border-left-color: rgba(255, 201, 120, 0.85);
  background: rgba(255, 201, 120, 0.14);
}

/* --------------------------- 日付ごとの一覧（狭い画面用） --------------------------- */

.cal-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cal-li {
  display: flex;
  gap: 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

/* 休業・時間変更のある日は、左端に色の帯を出して目立たせる */
.cal-li.has-change {
  border-left: 3px solid rgba(245, 166, 35, 0.7);
}

.cal-li-date {
  flex: 0 0 54px;
  font-weight: 600;
  /* ⚠️ 大きさは css/site.css（元の値＝0.85rem。狭い画面 640px の 1rem もあちら） */
  color: #eef1f5;
}

.cal-li-date small {
  display: inline-block;
  margin-left: 4px;
  /* ⚠️ 大きさは css/site.css（元の値＝0.72rem。狭い画面 0.85rem もあちら） */
  font-weight: 400;
  color: #b4bbc6;
}

.cal-li-date.is-sun,
.cal-li-date.is-sun small {
  color: #ff9d9d;
}

.cal-li-date.is-sat,
.cal-li-date.is-sat small {
  color: #9ecbff;
}

.cal-li-body {
  flex: 1 1 auto;
  min-width: 0;
  /* ⚠️ 大きさは css/site.css（元の値＝0.85rem。狭い画面 640px の 1rem もあちら） */
  line-height: 1.7;
}

.cal-li-body .cal-item {
  white-space: normal;
}

/* 補足は、店名・状態とは別の行に落とす（行の中に混ざらないように） */
.cal-li-body .cal-item small {
  flex: 0 0 100%;
  color: #b4bbc6;
  /* ⚠️ 大きさは css/site.css（元の値＝0.76rem。狭い画面 0.88rem もあちら） */
}

/* --------------------------- 凡例 --------------------------- */

.cal-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  /* ⚠️ 大きさは css/site.css（元の値＝0.78rem。狭い画面 0.9rem もあちら） */
  color: #b4bbc6;
}

.cal-legend span::before {
  content: '■';
  margin-right: 5px;
}

.cal-legend .is-normal::before {
  color: #7fd6a8;
}

.cal-legend .is-closed::before {
  color: #ff9d9d;
}

.cal-legend .is-opens::before {
  color: #ffc978;
}

.cal-updated {
  text-align: center;
  color: #9aa1ac;
  font-size: 0.75rem;
  margin-top: 18px;
}

/* --------------------------- 店舗ページに置く場合 --------------------------- */

.sd-calendar {
  margin-top: 40px;
  padding: 22px 20px 18px;
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* ⚠️ お知らせページの中のカレンダーは一回り小さい。
      元の値（1.1rem／下6px）は css/site.css の .sd-calendar .cal-title 側にある。 */

/* ⚠️ 元の下の余白 16px は css/site.css の `--tf-mb-base` へ移した。
      ここに margin を書き戻さないこと（詳細度でこちらが勝ち、
      **期間の表示の「下の余白」が黙って効かなくなる**）。 */

/* ⚠️ 元の高さ 120px は css/site.css の `--tf-cell-h-base` へ移した。
      ここに min-height を書き戻さないこと（詳細度でこちらが勝ち、
      **マスの高さのつまみが黙って効かなくなる**・2026-08-02 に踏みかけた）。 */

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

/* 狭い画面では、マス目だと店名が切れてしまうため日付ごとの一覧に切り替える。
   あわせて、スマホで読みやすいよう文字を 2pt ぶん大きくしている */
@media (max-width: 640px) {
  .cal-grid {
    display: none;
  }

  .cal-list {
    display: block;
  }

  /* ⚠️ 狭い画面の見出し 1.25rem・説明文 1.02rem は css/site.css の --tf-fs-base 側へ移した */

  .cal-li-date {
    flex-basis: 62px;
  }

  .cal-li-body {
    line-height: 1.75;
  }

  .cal-legend {
    gap: 16px;
  }

  .cal-updated {
    font-size: 0.85rem;
  }

  #cal-bar {
    font-size: 0.88rem;
  }

  #cal-bar .cal-bar-cta {
    font-size: 0.84rem;
  }
}

@media (max-width: 900px) {
  .cal-overlay {
    padding: 20px 12px 50px;
  }

  .cal-cell {
    /* ⚠️ 高さ 62px・大きさ 0.66rem は css/site.css の「元の値」へ移した */
    padding: 3px 4px;
  }

  .cal-grid {
    gap: 3px;
  }

  #cal-bar {
    font-size: 0.78rem;
    gap: 8px;
  }
}

/* ------------------- 管理画面のプレビュー用の出し分け -------------------

   お客様の画面では「画面の幅」で マス目／日付ごとの一覧 を切り替えている。
   管理画面のプレビューは、パソコンの広い画面のままスマホの見え方も
   確かめたいので、幅ではなくクラスで同じ切り替えができるようにしている。

   ※ 上の @media より詳細度が高いので、狭い画面でも「パソコン表示」を
      選べば マス目 が出る（打ち消し合いは詳細度で決まる）。 */

.cal-force-phone .cal-grid {
  display: none;
}

.cal-force-phone .cal-list {
  display: block;
}

.cal-force-pc .cal-grid {
  display: grid;
}

.cal-force-pc .cal-list {
  display: none;
}