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

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

#cal-bar {
  position: fixed;
  top: 70px;
  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(212, 165, 116, 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: #d4a574;
  flex: 0 0 auto;
}

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

#cal-bar .cal-bar-cta {
  border: 1px solid rgba(212, 165, 116, 0.6);
  border-radius: 4px;
  color: #d4a574;
  font-size: 0.78rem;
  font-weight: 700;
  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: 'Noto Serif JP', serif;
  font-size: 1.35rem;
  color: #d4a574;
  text-align: center;
  margin: 0 0 10px;
}

.cal-message {
  text-align: center;
  color: #dfe3e9;
  font-size: 0.9rem;
  line-height: 1.9;
  margin: 0 0 6px;
}

.cal-range {
  text-align: center;
  color: #a8afba;
  font-size: 0.82rem;
  margin: 0 0 22px;
}

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

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

.cal-dow {
  text-align: center;
  font-size: 0.82rem;
  color: #b4bbc6;
  padding: 4px 0;
}

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

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

/* 変更のある日は全店ぶんが入るため、マスは高さに余裕を持たせて文字も大きくする
   （小さいと店名が読めず、かえって分かりにくい） */
.cal-cell {
  min-height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.84rem;
  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: 700;
  color: #eef1f5;
  margin-bottom: 5px;
  font-size: 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;
  overflow-wrap: anywhere;
}

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

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

.cal-item-state {
  white-space: nowrap;
  font-weight: 700;
  /* 同じ行に収まるときは右端に寄せる（店名と状態の位置が揃って読みやすい） */
  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(212, 165, 116, 0.7);
}

.cal-li-date {
  flex: 0 0 54px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #eef1f5;
}

.cal-li-date small {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.72rem;
  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;
  font-size: 0.85rem;
  line-height: 1.7;
}

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

/* 補足は、店名・状態とは別の行に落とす（行の中に混ざらないように） */
.cal-li-body .cal-item small {
  flex: 0 0 100%;
  color: #b4bbc6;
  font-size: 0.76rem;
}

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

.cal-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-size: 0.78rem;
  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(212, 165, 116, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.sd-calendar .cal-title {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.sd-calendar .cal-range {
  margin-bottom: 16px;
}

.sd-calendar .cal-cell {
  min-height: 120px;
}

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

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

  .cal-list {
    display: block;
  }

  .cal-title {
    font-size: 1.25rem;
  }

  .cal-message {
    font-size: 1.02rem;
  }

  .cal-range {
    font-size: 0.95rem;
  }

  .cal-li-date {
    flex-basis: 62px;
    font-size: 1rem;
  }

  .cal-li-date small {
    font-size: 0.85rem;
  }

  .cal-li-body {
    font-size: 1rem;
    line-height: 1.75;
  }

  .cal-li-body .cal-item small {
    font-size: 0.88rem;
  }

  .cal-legend {
    font-size: 0.9rem;
    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 {
    min-height: 62px;
    padding: 3px 4px;
    font-size: 0.66rem;
  }

  .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;
}