/* =====================================================
   カレンダーUI CSS（最終確定）
   - todayボタンと当日セル：同じ黄色
   - ◀ ▶ ボタン：オリーブ
   - ボタンサイズは3つとも統一
   - today文字だけ大きく
   - 色覚多様性配慮
   ===================================================== */

/* ===== カラーパレット ===== */
:root{
  /* ベース */
  --ivory: #fbf7ef;
  --panel: #ffffff;
  --line:  #d8d1c4;

  /* 文字 */
  --text:  #2b2621;
  --muted: #4a4138;

  /* 休業日 */
  --closed-bg: #e57373;
  --closed-border: #7a1f1f;

  /* Today（セル & todayボタン 共通） */
  --ui-yellow: #e7c35a;
  --ui-yellow-hover: #d9b74e;
  --ui-yellow-active: #caa43f;
  --ui-yellow-border: #5b4a1f;

  /* 操作ボタン（◀ ▶） */
  --olive: #6b7a3a;
  --olive-hover: #5a6930;
  --olive-active: #495726;

  /* 日曜・祝日 */
  --sun-sat: #6b3f2a;
}

/* ===== ベース ===== */
body{
  margin:0;
  font-family:"Yu Gothic", sans-serif;
  background:var(--ivory);
}

.calendar-wrapper{
  background:var(--panel);
  width:90%;
  max-width:900px;
  margin:50px auto;
  padding:20px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

/* ===== 営業時間 ===== */
.business-hours{
  text-align:center;
  margin:5px 0 14px;
  font-size:18px;
  font-weight:800;
  color:var(--text);
}

/* =====================================================
   ナビボタン（サイズ統一）
   ===================================================== */
.calendar-header{
  text-align:center;
  margin-bottom:10px;
}

.calendar-header button{
  padding:10px 18px;          /* ★ 3ボタン共通サイズ */
  margin:0 6px;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
  border:2px solid transparent;
  line-height:1;
}

/* ◀ ▶ ：オリーブ */
.calendar-header button.prev,
.calendar-header button.next{
  background:var(--olive);
  color:#ffffff;
  border-color:var(--olive-active);
  font-size:16px;             /* 矢印は標準 */
}

.calendar-header button.prev:hover,
.calendar-header button.next:hover{
  background:var(--olive-hover);
}

.calendar-header button.prev:active,
.calendar-header button.next:active{
  background:var(--olive-active);
}

/* today：背景は黄色、文字だけ大きく */
.calendar-header button.today{
  background:var(--ui-yellow);
  border-color:var(--ui-yellow-border);
  color:#1b160f;
  font-size:22px;             /* ★ 文字のみ大きく */
  letter-spacing:0.5px;
}

.calendar-header button.today:hover{
  background:var(--ui-yellow-hover);
}

.calendar-header button.today:active{
  background:var(--ui-yellow-active);
}

.calendar-header button:disabled{
  background:#eee3b8;
  color:#6b6156;
  border-color:#cfc39a;
  cursor:default;
}

/* ===== レイアウト ===== */
.calendar-container{ width:100%; }
.single-calendar{ margin-bottom:28px; }

h3{
  text-align:center;
  margin:12px 0;
  color:var(--text);
}

/* ===== テーブル ===== */
table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:var(--panel);
}

th, td{
  border:1px solid var(--line);
  height:92px;
  text-align:center;
  vertical-align:top;
  position:relative;
  color:var(--text);
}

/* ===== 曜日ヘッダー ===== */
.calendar-table thead th{
  font-size:28px;
  font-weight:800;
  text-align:center;
  vertical-align:middle;
  height:52px;
  padding:0;
  background:#f6f0e6;
  color:#000;
}

/* 日曜・土曜 */
.calendar-table thead th:first-child,
.calendar-table thead th:last-child{
  color:var(--sun-sat);
}

/* ===== 日付（数字） ===== */
.today-wrapper{
  position:relative;
  z-index:1;
  font-size:26px;
  font-weight:900;
  line-height:1.1;
  margin-top:8px;
  color:var(--text);
}

/* セル内文字 */
.cell-sub{
  margin-top:10px;
  font-size:13px;
  font-weight:800;
  color:var(--text);
}

.cell-note{
  margin-top:2px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

/* スマホ：注記を小さく */
@media screen and (max-width:768px){
  .cell-note{
    font-size:10px;
    line-height:1.2;
  }
}

/* =====================================================
   休業日（赤＋×＋太枠）
   ===================================================== */
.holiday-red,
.holiday-sat{
  background:var(--closed-bg) !important;
  border:3px solid var(--closed-border);
  color:#fff;
}

.holiday-red .today-wrapper,
.holiday-red .cell-sub,
.holiday-red .cell-note,
.holiday-sat .today-wrapper,
.holiday-sat .cell-sub,
.holiday-sat .cell-note{
  color:#fff;
}

/* 休業日マーク「×」左上固定 */
.holiday-red::after,
.holiday-sat::after{
  content:"×";
  position:absolute;
  top:6px;
  left:6px;
  font-size:26px;
  font-weight:900;
  line-height:1;
  color:#fff;
  opacity:0.95;
  pointer-events:none;
}

/* =====================================================
   当日（Todayセル）
   ===================================================== */
.today-cell{
  background:var(--ui-yellow) !important;
  border:4px solid var(--ui-yellow-border) !important;
}

.today-cell .today-wrapper,
.today-cell .cell-sub,
.today-cell .cell-note{
  color:#1b160f !important;
}

/* Today補助丸 */
.today-circle{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  z-index:0;
}

.today-text{
  font-weight:900;
}
/* =====================================================
   スマホ用 表示最適化
   ===================================================== */
@media screen and (max-width: 600px){

  /* 日付（数字） */
  .today-wrapper{
    font-size: 16px;      /* PC:26 → SP:16 */
    margin-top: 6px;
  }

  /* 休業日「×」 */
  .holiday-red::after,
  .holiday-sat::after{
    font-size: 16px;      /* PC:26 → SP:16 */
    top: 4px;
    left: 4px;
  }

  /* 休業日テキスト */
  .cell-sub{
    font-size: 11px;      /* PC:13 → SP:11 */
    margin-top: 6px;
  }

  /* 注記（祝日名など） */
  .cell-note{
    font-size: 9px;       /* PC:12 → SP:9 */
    line-height: 1.2;
  }

  /* セル高さを少し詰める */
  th, td{
    height: 74px;         /* PC:92 → SP:74 */
  }

  /* todayセルの枠を少し細く */
  .today-cell{
    border-width: 3px !important;
  }

  /* todayボタン文字（少しだけ調整） */
  .calendar-header button.today{
    font-size: 18px;      /* PC:22 → SP:18 */
  }
}