/* ===== 上方月份切換區（左右箭頭＋月份標題） ===== */
.scheduleHeader{
  display:flex; /* 橫向排列 */
  justify-content:center; /* 水平置中 */
  align-items:center; /* 垂直置中 */
  gap:20px; /* 元素間距 */
  margin-bottom:20px; /* 與下方月曆間距 */
}

/* 月份切換按鈕（左右箭頭） */
.scheduleHeader button{
  border:none; /* 無邊框 */
  background:#eee; /* 淺灰底 */
  padding:8px 12px; /* 內距 */
  border-radius:6px; /* 圓角 */
  cursor:pointer; /* 滑鼠變手指 */
}

/* 月份標題文字 */
.scheduleHeader h2{
  margin:0; /* 清除預設 margin */
  font-size:20px; /* 字體大小 */
}

/* ===== 月曆整體容器（7欄格狀） ===== */
#schedule.scheduleWrap{
  display:grid; /* 使用 grid 排版 */
  grid-template-columns:repeat(7, minmax(0, 1fr)); /* 7欄（星期一～日） */
  gap:12px; /* 每格間距 */
  width:100%; /* 滿版 */
}

/* 星期標題（週一～週日） */
#schedule .weekHead{
  text-align:center; /* 置中 */
  font-size:14px;
  font-weight:700; /* 粗體 */
  color:#fff;
  padding:8px 0;
  background: #3d3d3d; /* 淺灰底 */
  border-radius:8px;
}

/* 空白補位格（讓第一週對齊） */
#schedule .emptyCell{
  min-height:20px;
}

/* 每一天卡片 */
#schedule .dayCard{
  background:#fff; /* 白底 */
  border-radius:14px; /* 圓角 */
  box-shadow:0px 2px 5px rgba(0,0,0,.08); /* 卡片陰影 */
    /*box-shadow: X軸 Y軸 模糊 半徑 顏色;*/
  padding:10px;
  min-height:140px; /* 最小高度 */
  box-sizing:border-box;
  transition:.2s; /* hover 動畫用 */
}

/* 今天（特殊標記） */
#schedule .dayCard.today{
 /* border:2px solid #ff6b6b; *//* 紅色外框 */
  box-shadow:0 2px 5px rgba(255,107,107,.18); /* 強調陰影 */
}

/* 整天關閉（整張灰化） */
#schedule .dayCard.allClosed{
  background:#f1f1f1;
}

/* 關閉時日期與星期變淡 */
#schedule .dayCard.allClosed .date,
#schedule .dayCard.allClosed .week{
  color:#888;
}

/* 卡片上方（日期＋星期） */
#schedule .dayHd{
  display:flex;
  justify-content:space-between; /* 左右分開 */
  align-items:center;
  margin-bottom:8px;
  font-size:14px;
  line-height:1.4;
}

/* 日期數字（大） */
#schedule .date{
  font-size:28px;
  font-weight:700;
  color:#1f2d3d;
}

/* 星期文字（小） */
#schedule .week{
  font-size:14px;
  color:#777;
}

/* 每一條行程（早/午/晚） */
#schedule .session{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:7px 8px;
  border-radius:6px;
  font-size:14px;
  line-height:1.5;
  box-sizing:border-box;
}

/* 行程前面標籤（N / C / S 等） */
#schedule .session .label{
  flex:0 0 18px; /* 固定寬度 */
  font-weight:700;
}

/* 正常開放 */
#schedule .session.normal{
  background:#eef4ff; /* 藍底 */
  color:#1f3f75;
}

/* 關閉 */
#schedule .session.closed{
  background:#f2f2f2;
  color:#777;
}

/* 特殊時段（例如副場） */
#schedule .session.sub{
  background:#fff3e8; /* 橘底 */
  color:#b35b00;
}

/* 重複宣告（同上：整天關閉） */
#schedule .dayCard.allClosed{
  background:#f1f1f1;
}

/* 舊版整天關閉文字（已停用） */
/*
#schedule .dayClosedText{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  font-size:24px;
  font-weight:700;
  color:#888;
  letter-spacing:2px;
}
*/

/* 整天關閉顯示文字（新版樣式） */
#schedule .dayClosedText{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:90px;
  font-size:26px;
  font-weight:700;
  color:#999;
  background:#e9e9e9;
  border-radius:10px;
  letter-spacing:4px;
}
.scheduleHeader button.isDisabled,
.scheduleHeader button:disabled{
  opacity:.35;
  cursor:default;
  pointer-events:none;
}
/* ===== 平板（1024 以下） ===== */
@media screen and (max-width:1024px){
  #schedule.scheduleWrap{
    grid-template-columns:repeat(7, minmax(0, 1fr)); /* 仍維持7欄 */
    gap:10px; /* 間距縮小 */
  }

  #schedule .date{
    font-size:22px; /* 日期縮小 */
  }

  #schedule .session{
    font-size:13px;
    padding:6px 6px;
  }
}

/* ===== 手機（800 以下） ===== */
@media screen and (max-width:800px){
  #schedule.scheduleWrap{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important; /* 改成3欄 */
    gap:8px;
  }

  #schedule .weekHead{
    display:none; /* 隱藏星期標題 */
  }

  #schedule .emptyCell{
    display:none; /* 隱藏補位格 */
  }

  #schedule .dayCard{
    min-height:auto; /* 自動高度 */
    padding:10px;
  }

  #schedule .date{
    font-size:22px;
  }

  #schedule .week{
    font-size:12px;
  }

  #schedule .session{
    font-size:13px;
    padding:7px 8px;
  }

  #schedule .dayClosedText{
    min-height:70px;

    font-size:20px;
  }
}

/* ===== 較大手機（601~800） ===== */
@media screen and (min-width:601px) and (max-width:800px){
  #schedule.scheduleWrap{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important; /* 固定3欄 */
  }
}

#schedule .session.active{
  background:#fff3e8;
  border:1px solid #ffb36b;
  box-shadow:0 4px 12px rgba(255,150,60,.25);
}

#schedule .session.active .label{
  color:#ff7a00;
}