/* =========================================
   JEWELRY ATELIER 予約表
   yoyaku.css 完全上書き用

   背景：ホワイト
   平日：淡いベージュ
   土曜：淡いブルー
   日曜・祝日：淡いピンク

   日付：大きく太字・スマホ対応
   祝日・休日：2026年・2027年対応
   ========================================= */

/* 予約表全体：ホワイト */
#ytbl {
  width: 100% !important;
  background: #ffffff !important;
  color: #594c42;
  border-color: #ded4ca;
}

/* テーブルのセル：ホワイト */
#ytbl td {
  background: #ffffff !important;
  border-color: #ded4ca;
}

/* 日付の列：文字が収まる幅を確保 */
#ytbl td[rowspan="3"] {
  width: 112px !important;
  min-width: 112px !important;
  padding: 3px !important;
  box-sizing: border-box;
  vertical-align: middle;
}

/* 予約済みの枠：淡いベージュ */
#ytbl .ydiv {
  background: #f3eee8 !important;
  color: #594c42 !important;
  border: 1px solid #d8cbbd;
  border-radius: 4px;
}

/* 予約済みの文字 */
#ytbl .ydiv font {
  color: #594c42 !important;
}

/* 日付ボタン：平日・大きく太字 */
#ytbl button.reserve {
  appearance: none;
  -webkit-appearance: none;

  width: 100% !important;
  height: 100% !important;
  min-height: 48px;
  box-sizing: border-box;

  background: #eee5da !important;
  color: #594c42 !important;
  border: 1px solid #d8cbbd !important;
  border-radius: 6px;

  font-family: -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;

  padding: 12px 4px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* 曜日の文字：太字 */
#ytbl button.reserve p {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

/* 土曜：淡いブルー */
#ytbl button.reserve[value*="(土)"] {
  background: #e4eef4 !important;
  color: #405f73 !important;
  border-color: #c5d7e2 !important;
}

/* 日曜：淡いピンク */
#ytbl button.reserve[value*="(日)"] {
  background: #f6e7e5 !important;
  color: #8a4c50 !important;
  border-color: #e4c9c7 !important;
}

/* =========================================
   2026年の祝日・休日
   ========================================= */

#ytbl button.reserve[id="2026/01/01"], /* 元日 */
#ytbl button.reserve[id="2026/01/12"], /* 成人の日 */
#ytbl button.reserve[id="2026/02/11"], /* 建国記念の日 */
#ytbl button.reserve[id="2026/02/23"], /* 天皇誕生日 */
#ytbl button.reserve[id="2026/03/20"], /* 春分の日 */
#ytbl button.reserve[id="2026/04/29"], /* 昭和の日 */
#ytbl button.reserve[id="2026/05/03"], /* 憲法記念日 */
#ytbl button.reserve[id="2026/05/04"], /* みどりの日 */
#ytbl button.reserve[id="2026/05/05"], /* こどもの日 */
#ytbl button.reserve[id="2026/05/06"], /* 振替休日 */
#ytbl button.reserve[id="2026/07/20"], /* 海の日 */
#ytbl button.reserve[id="2026/08/11"], /* 山の日 */
#ytbl button.reserve[id="2026/09/21"], /* 敬老の日 */
#ytbl button.reserve[id="2026/09/22"], /* 祝日に挟まれた休日 */
#ytbl button.reserve[id="2026/09/23"], /* 秋分の日 */
#ytbl button.reserve[id="2026/10/12"], /* スポーツの日 */
#ytbl button.reserve[id="2026/11/03"], /* 文化の日 */
#ytbl button.reserve[id="2026/11/23"]  /* 勤労感謝の日 */
{
  background: #f6e7e5 !important;
  color: #8a4c50 !important;
  border-color: #e4c9c7 !important;
}

/* =========================================
   2027年の祝日・休日
   ========================================= */

#ytbl button.reserve[id="2027/01/01"], /* 元日 */
#ytbl button.reserve[id="2027/01/11"], /* 成人の日 */
#ytbl button.reserve[id="2027/02/11"], /* 建国記念の日 */
#ytbl button.reserve[id="2027/02/23"], /* 天皇誕生日 */
#ytbl button.reserve[id="2027/03/21"], /* 春分の日 */
#ytbl button.reserve[id="2027/03/22"], /* 振替休日 */
#ytbl button.reserve[id="2027/04/29"], /* 昭和の日 */
#ytbl button.reserve[id="2027/05/03"], /* 憲法記念日 */
#ytbl button.reserve[id="2027/05/04"], /* みどりの日 */
#ytbl button.reserve[id="2027/05/05"], /* こどもの日 */
#ytbl button.reserve[id="2027/07/19"], /* 海の日 */
#ytbl button.reserve[id="2027/08/11"], /* 山の日 */
#ytbl button.reserve[id="2027/09/20"], /* 敬老の日 */
#ytbl button.reserve[id="2027/09/23"], /* 秋分の日 */
#ytbl button.reserve[id="2027/10/11"], /* スポーツの日 */
#ytbl button.reserve[id="2027/11/03"], /* 文化の日 */
#ytbl button.reserve[id="2027/11/23"]  /* 勤労感謝の日 */
{
  background: #f6e7e5 !important;
  color: #8a4c50 !important;
  border-color: #e4c9c7 !important;
}

/* 予約可能な日：マウスを重ねたとき */
#ytbl button.reserve:not(:disabled):hover {
  filter: brightness(0.96);
  cursor: pointer;
}

/* キーボードで選択したとき */
#ytbl button.reserve:focus-visible {
  outline: 3px solid #947b60;
  outline-offset: -3px;
}

/* 予約できない日：文字の読みやすさを確保 */
#ytbl button.reserve:disabled {
  opacity: 0.8;
  -webkit-text-fill-color: currentColor;
  cursor: not-allowed;
}

/* =========================================
   スマホ画面：横幅480px以下
   ========================================= */

@media screen and (max-width: 480px) {

  /* 日付列を広げすぎず、文字の幅を確保 */
  #ytbl td[rowspan="3"] {
    width: 94px !important;
    min-width: 94px !important;
    padding: 2px !important;
  }

  /* 日付：30px・太字 */
  #ytbl button.reserve {
    font-size: 26px !important;
    font-weight: 800 !important;
    padding: 10px 3px !important;
    line-height: 1.35 !important;
  }

  /* 曜日：22px・太字 */
  #ytbl button.reserve p {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-top: 8px !important;
  }
}

/* =========================================
   小さなスマホ画面：横幅360px以下
   ========================================= */

@media screen and (max-width: 360px) {

  #ytbl td[rowspan="3"] {
    width: 86px !important;
    min-width: 86px !important;
  }

  #ytbl button.reserve {
    font-size: 24px !important;
  }

  #ytbl button.reserve p {
    font-size: 19px !important;
  }
}