body {
  /* font-family: "Microsoft JhengHei", sans-serif; */
  font-family: 'LXGW WenKai TC', sans-serif;
  background-color: #f4f7f6;
  margin: 0;
  padding: 7px;
  color: #333;
}

button, input, select, textarea {
  font-family: inherit;
}
::placeholder {
  font-family: inherit;
}
strong {
  -webkit-text-stroke: 0.2px currentColor;
}
.container {
  max-width: 800px;
  margin: 10px auto;
  /* 桌面版上下 20px，左右居中 */
  background: white;
  padding: 15px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  width: 95%;
  /* 確保兩邊有極小留白，不會死貼螢幕 */
  box-sizing: border-box;
  /* 重要：防止 padding 撐開寬度 */
}

@media (max-width: 600px) {
  .container {
    width: 98%;
    /* 稍微縮小一點點，例如 96%，左右各留 2% 比較美觀 */
    margin: 10px auto;
    /* 修改處：將 0 改回 auto，確保左右對稱居中 */
    padding: 10px;
    border-radius: 10px;
    /* 建議保留一點圓角，比完全直角（0）更有質感 */
  }
}

h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 10px;
}

h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 10px;
}

.info-box {
  border: 1px solid #f089a1;
  box-shadow: 0 4px 15px rgba(232, 122, 144, 0.15);
  padding: 15px;
  padding-bottom: 5px;
  margin-bottom: 25px;
  font-size: 0.95em;
  border-radius: 15px;
}

.field {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
  border-left: 4px solid #D05A6E;
  padding-left: 7px;
}

.pink-highlight {
  font-size: 1.2em;
  padding-left: 10px;
  display: inline-block;
  /* 確保高光背景剛好包覆文字寬度 */
  background: linear-gradient(transparent 60%, #F4A7B980 60%);
  color: #d14d72;
  /* 品牌深粉色字體 */
  font-weight: bold;
  /* 讓重點文字自動加粗 */
  padding: 0 4px;
  /* 讓螢光筆稍微超出文字左右一點點，視覺更自然 */
  border-radius: 2px;
  /* 高光邊緣加上微圓角，不那麼死板 */
  margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 16px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
    outline: none;
    border-color: #E87A90 !important;
    box-shadow: 0 0 8px rgba(232, 122, 144, 0.3) !important;
}

.checkbox-group {
  display: block;
  /* 移除 flex，改用最穩定的 block */
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  margin-top: 10px;
  color: white;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 30px 0;
}

.result-msg {
  margin-top: 15px;
  text-align: left;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
}

#queryResult:empty {
  display: none;
}

#itemQueryResult:empty {
  display: none;
}

#queryRoomResult:empty {
  display: none;
}

#teacherQueryResult:empty {
  display: none;
}

.no-wrap-text {
  font-weight: normal;
  /* 確保不是粗體 */
  font-size: 16px;
  /* 可視需求調整字體大小 */
  margin-left: 8px;
  /* 讓文字跟勾選框保持距離 */
}

select {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
}


/* 針對日期輸入框整體放大 */
#roomDate {
  font-size: 1.0rem;
  /* 增加文字大小 */
  padding: 4px;
  /* 增加內部間距，讓輸入框變高變寬 */
  height: 30px;
  /* 強制設定高度 */
  width: 100%;
  border: 2px solid #F4A7B9;
  /* 加粗邊框讓它更顯眼 */
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  /* 水平置中文字 */
  display: inline-flex;
  /* 確保在 Safari/Chrome 內部對齊更準確 */
  justify-content: center;
  /* 配合 flex 使用的水平置中 */
  align-items: center;
  /* 配合 flex 使用的垂直置中 */
}


/* 讓選日期區塊的 Label 也大一點，方便閱讀 */
#dateSection label {
  font-size: 1.0rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

/* 針對 Flatpickr (text 類型) 的樣式校準 */
#roomDate.flatpickr-input {
  height: 48px !important;
  /* 強制等高 */
  background-color: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 0 8px 8px 0 !important;
  /* 維持你設計的右圓角 */
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  /* 防止 padding 撐開寬度 */
  font-size: 16px !important;
  /* 16px 可防止 iOS 自動放大畫面 */
  appearance: none;
  -webkit-appearance: none;
}

/* 確保左側的教室選擇框也能完美銜接 */
#roomSelect {
  height: 48px !important;
  border-radius: 8px !important;
  /* 左圓角 */
}


/* 1. 容器：必須設定 relative 成為座標基準點 */
.tabs {
  display: flex;
  margin-bottom: 20px;
  position: relative;
  background: white;
  padding: 5px;
  border-radius: 30px;
  /* 防止移動時產生幽靈捲軸 */
  overflow: visible;
}

/* 2. 基礎按鈕樣式 */
.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  cursor: pointer;
  border: none;
  background: #f8f9fa;
  /* 平常透明，顯示 .tabs 的底色 */
  font-size: 17px;
  font-weight: normal;
  color: #7f8c8d;
  outline: none;
  border-radius: 25px;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* 懸停微動感 */
.tab-btn:not(.active):hover {
  background: #f1f1f1;
  color: #333;
  transform: translateY(-1px);
}

/* 3. 選中狀態 (Active) */
.tab-btn.active {
  font-weight: bold !important;
  font-size: 23px !important;
  color: white !important;
  background: linear-gradient(135deg, #F4A7B9 0%, #E87A90 100%) !important;
  box-shadow: 0 6px 15px rgba(232, 122, 144, 0.4);
  transform: translateY(-3px) scale(1.02);
  z-index: 2;
}

/* 4. 假按鈕 (Ghost Tab)：動畫表演者 */
#ghost-tab {
  display: none;
  /* 初始隱藏 */
  position: absolute;
  /* 讓 JS 完全控制座標，這裡不寫死 top/left */
  margin: 0 !important;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  /* 視覺完全同步 .active 樣式 */
  border-radius: 25px;
  font-weight: bold !important;
  font-size: 23px !important;
  color: white !important;
  background: linear-gradient(135deg, #F4A7B9 0%, #E87A90 100%) !important;
  box-shadow: 0 6px 15px rgba(232, 122, 144, 0.4);
  opacity: 1;
  /* 預設完全透明 */
  will-change: transform, opacity;
}

/* 5. 衝刺動畫 */
@keyframes ghost-dash {
  0% {
    /* 從起始座標出發，維持 active 浮起的狀態 (-3px) */
    transform: translate(var(--sx), calc(var(--sy) - 6px)) scale(0.90);
    opacity: 1;
  }

  20% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.5;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    /* 衝到終點座標 */
    transform: translate(var(--ex), calc(var(--ey) - 6px)) scale(1.02);
    opacity: 0.1;
  }
}

.ghost-moving {
  display: flex !important;
  animation: ghost-dash 0.35s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}


.tab-content {
  display: none;
  /* 預設隱藏 */
}

.tab-content.active {
  display: block;
  /* 顯示當前分頁 */
}

/* 星期分頁容器：增加內距營造「嵌入感」 */
.day-tabs {
  display: flex;
  background: #f0f0f0;
  /* 稍微深一點的灰色背景 */
  border-radius: 12px 12px 0 0;
  /* 加大圓角 */
  overflow: hidden;
  padding: 2px;
  /* 讓內部的 Tab 有呼吸空間 */
  gap: 1px;
  /* 按鈕之間細微的空隙 */
}

/* 基礎星期按鈕：繼承通用動態手感 */
.day-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  cursor: pointer;
  font-weight: bold;
  color: #888;
  border: none !important;
  /* 移除原本的實線邊框 */

  /* 注入動態回饋 */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 8px;
  /* 讓選中時的背景帶有圓角 */
}

/* 懸停效果 */
.day-tab:hover:not(.active-day) {
  background: rgba(255, 255, 255, 0.5);
  color: #d14d72;
}

/* 選中狀態：注入漸層、放大與陰影（Active 狀態） */
.day-tab.active-day {
  /* 使用與主按鈕一致的漸層色 */
  background: linear-gradient(135deg, #F4A7B9 0%, #E87A90 100%) !important;
  color: white !important;

  /* 選中時稍微浮起並放大 */
  transform: translateY(-0px) scale(1.05);
  box-shadow: 0 4px 10px rgba(232, 122, 144, 0.3);
  z-index: 2;
  /* 確保陰影不會被隔壁遮住 */
  font-size: 1.2em;
  /* 稍微放大文字 */
}

#day-ghost-tab {
  background: linear-gradient(135deg, #F4A7B9 0%, #E87A90 100%) !important;
  color: white !important;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.2em;
  box-shadow: 0 4px 10px rgba(232, 122, 144, 0.3);
  will-change: transform, opacity;
}

#child-ghost-tab {
  display: none;
  position: absolute;
  margin: 0 !important;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 25px;
  font-weight: bold !important;
  font-size: 20px !important;
  color: white !important;
  background: #D05A6E !important;
  /* 配合子分頁的深粉色 */
  box-shadow: 0 4px 12px rgba(208, 90, 110, 0.4);
  opacity: 1;
  will-change: transform, opacity;
}

/* 為了讓動畫更順暢，微調衝刺高度變數，對應 day-tab 的 -2px 浮起 */
.day-ghost-moving {
  display: flex !important;
  /* 複用你原本的 ghost-dash 動畫 */
  animation: ghost-dash 0.35s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}


.checkbox-item {
  display: flex !important;
  align-items: center;
  padding: 12px 15px;
  /* 加大內距，讓卡片更具呼吸感 */
  margin-bottom: 8px;
  border: 1px solid #eee;
  border-radius: 12px;
  /* 提高圓角弧度，與主體 tabs 呼應 */
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.checkbox-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  /* 防止勾選框在文字變多時被擠扁 */
}

.checkbox-item::before {
  content: "";
  width: 23px;
  height: 23px;
  border: 2px solid #cbd5e1;
  /* 平時是低調的淺灰色圓圈 */
  border-radius: 6px;
  /* 完美的圓形 */
  margin-right: 12px;
  /* 與右側課程文字保持舒適距離 */
  flex-shrink: 0;
  transition: all 0.25s ease;
  background-color: #ffffff;
  display: inline-block;
}

.checkbox-item:has(input:checked) {
  border: 1px solid #E87A90;
  /* 邊框加粗，並換成深粉色 */
  background-color: #FFF0F2;
  /* 背景變成明顯但溫柔的亮粉紅 */
}

.checkbox-item:has(input:checked)::before {
  border-color: #E87A90;
  /* 變成品牌深粉色 */
  background-color: #E87A90;
  /* 填滿粉色 */
  /* 這裡利用內陰影（box-shadow）做出一顆白色勾勾或圓點的效果，非常優雅 */
  box-shadow: inset 0 0 0 4px #FFF0F2;
  transform: scale(1.1);
  /* 微幅放大，製造彈跳感 */
}

/* 1. 平時外觀：讓它低調一點，使用淡淡的灰色邊框（不搶課程卡片的風采） */

.agreement-item {
  display: flex !important;
  align-items: center;
  padding: 12px 15px;
  /* 加大內距，讓卡片更具呼吸感 */
  margin-bottom: 8px;
  border: none;
  border-radius: 12px;
  /* 提高圓角弧度，與主體 tabs 呼應 */
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.agreement-item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  /* 防止勾選框在文字變多時被擠扁 */
}

.agreement-item::before {
  content: "";
  width: 23px;
  height: 23px;
  border: 2px solid #cbd5e1;
  /* 平時是低調的淺灰色圓圈 */
  border-radius: 6px;
  /* 完美的圓形 */
  margin-right: 12px;
  /* 與右側課程文字保持舒適距離 */
  flex-shrink: 0;
  transition: all 0.25s ease;
  background-color: #ffffff;
  display: inline-block;
}

.agreement-item:has(input:checked) {
  border: none;
  /* 邊框加粗，並換成深粉色 */
  background-color: #FFF;
  /* 背景變成明顯但溫柔的亮粉紅 */
}

.agreement-item:has(input:checked)::before {
  border-color: #E87A90;
  /* 變成品牌深粉色 */
  background-color: #E87A90;
  /* 填滿粉色 */
  /* 這裡利用內陰影（box-shadow）做出一顆白色勾勾或圓點的效果，非常優雅 */
  box-shadow: inset 0 0 0 4px #FFF0F2;
  transform: scale(1.1);
  /* 微幅放大，製造彈跳感 */
}


/* 專屬動畫包裝層 */
.course-anim-wrapper {
  max-height: 0;
  /* 初始高度為 0 */
  opacity: 0;
  /* 初始透明度為 0 */
  overflow: hidden;
  /* 隱藏超出部分 */
  transform: translateY(-10px);
  /* 輕微向上位移，製造滑入感 */
  transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease,
    transform 0.8s ease;
  display: block !important;
}

/* 啟動動畫的類別 */
.course-anim-wrapper.active-show {
  max-height: 200px;
  /* 預設足夠容納單個項目的高度 */
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 8px;
  padding: 2px 0;
}

/* 讓輸入框容器具備定位能力 */
.input-status-container {
  position: relative;
  width: 100%;
}

/* 勾勾與警告圖示的定位 */
.status-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  pointer-events: none;
  /* 避免干擾點擊輸入框 */
  transition: all 0.3s ease;
}

/* 當檢查成功時顯示綠色勾勾 */
.status-icon.success::after {
  content: "✅";
}

/* 當格式錯誤（如不是09開頭）時顯示警告 */
.status-icon.error::after {
  content: "⚠️";
}

/* 讓輸入框變色更明顯 */
.field-success {
  border-color: #2ecc71 !important;
  background-color: #fafffa !important;
}

.field-error {
  border-color: #e67e22 !important;
}

/* 最新消息看板外殼：置中、隱藏溢出、並設定透視基準 */
.news-board-container {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(232, 122, 144, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================
   跑馬燈文字與動畫設定
   ========================================= */

/* 1. 核心容器：負責上下滑動與淡入淡出 */
.news-board-text {
  font-size: 1.35rem;
  font-weight: bold;
  text-align: center;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  white-space: nowrap;

  /* 預備滑動動畫過渡 */
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
  opacity: 1;
  transform: translateY(0);
}

/* 2. 文字退場類別：往上滑出並淡出 */
.news-board-text.exit {
  opacity: 0;
  transform: translateY(-30px);
}

/* 3. 文字進場準備類別：先隱藏在下方 */
.news-board-text.enter {
  opacity: 0;
  transform: translateY(30px);
  transition: none; /* 瞬間到位，不觸發動態 */
}

/* 4. 獨立出來的反光特效（與心跳標籤徹底分離） */
.shimmer-text {
  background: linear-gradient(to right, #6e2727 20%, #E87A90 40%, #F4A7B9 50%, #E87A90 60%, #6e2727 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shimmer 3s linear infinite;
  display: inline-block; /* 確保漸層遮罩的寬度能正常渲染 */
}

/* 5. 反光從左到右滑過去的動態軌跡 */
@keyframes text-shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: 0% center;
  }
}

#video-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: opacity 0.8s ease-in-out;
  opacity: 1;
}

/* 核心：影片柔邊遮蓋層 */
#video-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  /* 預設不給陰影 */
  box-shadow: none;
}

/* 進階立體課程卡片 */
/* 1. 最外層容器：設定 3D 深度感 */
.course-card {
  perspective: 1000px;
  margin-bottom: 15px;
  background: transparent !important;
  /* 移除背景，由內部層負責 */
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
}

/* 2. 旋轉核心：控制翻轉動作 */
.card-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* 點擊後觸發翻轉 */
.course-card.card-flipped .card-inner {
  transform: rotateY(180deg);
}

/* 3. 正面與背面的共同基礎樣式 */
.card-front,
.card-back {
  width: 100%;
  backface-visibility: hidden;
  /* 關鍵：翻過去後隱藏背面 */
  border-radius: 12px;
  padding: 15px;
  box-sizing: border-box;
  transition: all 0.3s;
}

/* 4. 正面樣式 (保留您原本的設計) */
.card-front {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-left: 6px solid #F4A7B9;
  position: relative;
  z-index: 2;
}

/* 懸停時的正向浮起感 (僅在未翻轉時生效) */
.course-card:not(.card-flipped):hover .card-front {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* 5. 背面樣式 (解決字體相反的關鍵) */
.card-back {
  background: linear-gradient(135deg, #FFF5F7 0%, #FFD1DC 100%);
  border: 2px solid #F4A7B9;
  color: #d14d72;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: rotateY(180deg);
  /* 預先翻轉 180 度抵消文字相反問題 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}

/* 文字樣式維持不變 */
.card-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #d14d72;
  margin-bottom: 8px;
}

.card-detail {
  font-size: 0.95em;
  color: #555;
  line-height: 1.6;
}

/* 通用設計感按鈕組件 */
.btn-universal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white !important;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: bold;
  font-size: 1.1em;
  /* 預設陰影：使用半透明黑，能適應任何背景色 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
  cursor: pointer;
}

/* 懸停效果：向上浮動 + 自動變亮 */
.btn-universal:hover {
  /* transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); */
  filter: brightness(1.1);
  /* 自動提升背景亮度 10% */
}

/* 點擊效果：縮小 + 下沉 */
.btn-universal:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.9);
  /* 自動降低背景亮度 */
}

/* 修改原本的通用樣式，增加禁用狀態處理 */
.btn-universal:disabled {
  filter: grayscale(0.5) brightness(0.9) !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.7;
}

.btn-icon {
  margin-right: 10px;
  font-size: 1.2em;
  display: flex;
  align-items: center;
}

.btn-icon img {
  width: 24px;
  height: 24px;
}


/* 定義一個消失的動畫 */
@keyframes customExit {
  0% {
    opacity: 1;
    filter: blur(0px);
  }

  /* 先稍微放大一點點 */
  100% {
    opacity: 0;
    filter: blur(10px);
  }

  /* 縮小、淡出、模糊 */
}

@keyframes expandFlipOut {
  from {
    /* 起點：完美的螢幕正中央狀態 */
    transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg) scale(1);
    opacity: 1;
  }

  to {
    /* 終點：順著原路往上翻回去、縮小並淡出，而且緊緊抓牢 -50%, -50% 置中點不跑位 */
    transform: translate(-50%, -55%) perspective(1000px) rotateX(-45deg) scale(0.85);
    opacity: 0;
  }
}

.exit-animation {
  animation: customExit 0.8s forwards;
}

/* 查詢結果卡片彈出動畫 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
    /* 從下方 20px 處開始 */
  }

  to {
    opacity: 1;
    transform: translateY(0);
    /* 回到原位 */
  }
}

.result-card-anim {
  animation: fadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 彈出視窗遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 3000;

  /* --- 修改重點：改用透明度控制顯示 --- */
  display: flex;
  /* 始終維持 Flex 佈局 */
  justify-content: center;
  align-items: center;

  opacity: 0;
  /* 初始透明 */
  visibility: hidden;
  /* 初始隱藏（防止點擊到背景按鈕） */
  transition: all 0.3s ease;
  /* 遮罩層的淡入淡出時間 */
}

/* 彈出視窗主體 */
.modal-content {
  background: white;
  width: 90%;
  max-width: 450px;
  border-radius: 20px;
  padding: 20px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  transform: perspective(1000px) rotateX(-70deg);
  transform-origin: top;
  opacity: 0;
  transition: all 0.4s ease;
}

/* 當啟用時的狀態 */
.modal-overlay.active {
  opacity: 1;
  /* 變回不透明 */
  visibility: visible;
  /* 變回可見 */
}

.modal-overlay.active .modal-content {
  transform: perspective(1000px) rotateX(0deg);
  opacity: 1;
}

/* 關閉按鈕 */
.modal-close-x {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 30px;
  width: 40px;
  /* 圓圈的寬度 */
  height: 40px;
  /* 圓圈的高度 */
  cursor: pointer;
  color: #999;
  line-height: 40px;
  /* 讓 X 在圓圈內垂直置中，需等於 height */
  text-align: center;
  border-radius: 50%;
  /* 讓背景變成圓形，點擊範圍更明確 */
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  /* 給它一個淡淡的背景色，比較好找 */
}

/* --- 統一修復所有彈出視窗的置中問題 --- */

/* 1. 針對教室預約的容器 (modalBody) */
#modalBody {
  text-align: center !important;
  width: 100%;
}

/* 2. 針對課程報名的容器 (modalInjectionPoint) */
#modalInjectionPoint {
  text-align: center !important;
  width: 100%;
}

/* 3. 確保這兩個容器內的所有層級元素都繼承置中 */
#modalBody div,
#modalBody p,
#modalBody h4,
#modalInjectionPoint div,
#modalInjectionPoint p,
#modalInjectionPoint h4 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}


/* 核心改良：圓角包裹容器 */
/* 1. 核心容器：強制圓角與裁切 */
.room-table-wrapper {
  max-width: 550px;
  margin: 0 auto 20px auto;
  border-radius: 10px;
  /* 設定 10px 圓角 */
  overflow: hidden;
  /* 強制裁切內部的直角表格 */
  border: 1px solid #ddd;
  /* 外邊框由容器控制 */
  background-color: #F4A7B9;
  /* 避免銜接處出現白線 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 2. 表格主體：取消外邊框，避免衝突 */
.room-status-table {
  width: 100%;
  border-collapse: separate;
  /* 關鍵：從 collapse 改為 separate 才能正常裁切 */
  border-spacing: 0;
  /* 消除間隙，維持原本的緊湊感 */
  font-size: 15px;
  text-align: center;
  background: white;
  border: none !important;
}

/* 3. 表頭樣式 */
.room-status-table th {
  background-color: #F4A7B9;
  /* 統一品牌粉色 */
  font-weight: bold;
  color: #2c3e50;
  padding: 10px 5px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

/* 4. 單元格與格線 */
.room-status-table td {
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  padding: 5px;
  vertical-align: middle;
  word-break: keep-all;
  width: 25%;
}

/* 5. 視覺收尾：移除最邊緣的格線，避免重疊 */
.room-status-table th:last-child,
.room-status-table td:last-child {
  border-right: none;
}

.room-status-table tr:last-child td {
  border-bottom: none;
}

/* 原本的課程單元格邏輯保持不變 */
.course-cell {
  line-height: 1.3;
  color: #333;
  padding: 2px 0;
  border-bottom: 1px dashed #333;
}

.lunch-break {
  background-color: #fff9c4;
  color: #8d6e63;
  font-style: italic;
}

.course-cell:last-child {
  border-bottom: none;
}



#schedule-body tr:first-child td {
  border-bottom: 4px dotted #eee;
}

.time-label {
  font-size: 1.1em;
  /* 放大字體，可依需求改為 1.4em 或 18px */
  font-weight: bold;
  /* 加粗 */
  color: #2c3e50;
  /* 換個較深的顏色增加辨識度 */
  background-color: #F4A7B9;
  /* 淺灰色背景 */
  white-space: nowrap;
  /* 確保不會斷行 */
  padding: 10px 5px !important;
  /* 增加上下間距讓格子大一點 */
  vertical-align: middle !important;
  /* 文字垂直置中 */
}



/* 修改原本的樣式 */
#teacherDisplayArea {
  margin-top: 20px;
  text-align: center;
  display: none;
  /* 保持預設隱藏 */
}

/* 當 display 變成 block 時，自動觸發此動畫 */
#teacherDisplayArea[style*="display: block"] {
  animation: teacherFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes teacherFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px); /* 稍微往上浮動消失，看你喜歡哪種效果 */
  }
}

/* 加上這個 class 時，執行淡出動畫 */
#teacherDisplayArea.fade-out, #introDisplayArea.fade-out{
  animation: teacherFadeOut 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

#introDisplayArea {
  margin-top: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  display: none;
}

#introDisplayArea[style*="display: block"] {
  animation: teacherFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 定義淡入並向上滑動的動畫 */
@keyframes teacherFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#teacherImg {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(208, 90, 110, 0.2);
  /* 加入帶有主題色的柔和陰影 */
  transition: transform 0.3s ease;
}

#teacherImg:hover {
  transform: scale(1.02);
  /* 滑鼠移上去時微幅放大 */
}

/* 卡片外框 */
/* 1. 最外層容器：設定最大寬度並居中 */
.teacher-card-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  perspective: 1000px;
  /* 3D 深度感 */
  cursor: pointer;
}

/* 2. 旋轉核心：高度由內容 (正面) 決定 */
.teacher-card-inner {
  position: relative;
  width: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* 翻轉狀態 */
.teacher-card-container.flipped .teacher-card-inner {
  transform: rotateY(180deg);
}

/* 3. 正面樣式：它是「撐開高度」的關鍵 */
.teacher-card-front {
  position: relative;
  /* 留在文件流中撐開高度 */
  width: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background: #fff;
  z-index: 2;
  /* 使用 Flex 確保圖片置中 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.teacher-card-front img {
  width: 100%;
  /* 填滿寬度 */
  height: auto;
  /* 高度自適應比例 */
  display: block;
  /* 消除底部間隙 */
  border-radius: 8px;
  object-fit: contain;
}

/* 4. 背面樣式：絕對定位，強制對齊正面 */
.teacher-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 強制填滿正面撐開的高度 */
  backface-visibility: hidden;
  transform: rotateY(180deg);
  /* 預設反轉 */
  border-radius: 12px;
  background: linear-gradient(135deg, #F4A7B9 0%, #E87A90 100%);
  color: white;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  
  /* 若文字太多可捲動 */
  z-index: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.teacher-card-container.flipped .teacher-card-front {
  pointer-events: none !important; /* 翻過去後，正面徹底失去觸控能力 */
}

.teacher-card-container.flipped .teacher-card-back {
  z-index: 3 !important; /* 翻過去後，強制讓背面來到最上層接收滑動事件 */
  pointer-events: auto !important;
}
/* 讓 B 表格（老師課表）與 A 表格視覺統一 */
.teacher-table {
  border-collapse: collapse;
  border: none !important;
  min-width: 600px;
  /* 修正：設定最小寬度，確保手機版一定能左右滑動 */
  width: 100%;
  display: table;
}

.teacher-table th:first-child,
.teacher-table td:first-child {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 5px 0;
  overflow: hidden;
  /* 防止內容撐開 */
}

.teacher-table thead th {
  height: 40px;
}

.teacher-table thead th:nth-child(n+2) {
  font-size: 1.1rem;
}

.table-responsive {
  width: 100%;
  /* 修正：將 overflow 改為 auto，並確保橫向捲動優先 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* 讓 iOS 滑動更順暢 */
  margin-bottom: 15px;

  /* 圓角設定 */
  border-radius: 10px;
  border: 1px solid #ddd;

  /* 關鍵：使用內距或特定佈局確保圓角裁切生效 */
  position: relative;
  background-color: #fff;
}

.teacher-table th {
  background-color: #F4A7B9;
  /* A表格粉色 */
  color: #333;
  border: 1px solid #ddd;
  padding: 8px;
  font-weight: bold;
  text-align: center;
  /* 左右置中 */
  vertical-align: middle;
  /* 上下置中 */
}

.teacher-table td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

/* 核心：模仿 A 表格的直向標籤風格 */
.teacher-table tbody td:first-child {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 4px;
  background-color: #fdf2f4;
  /* 淺粉底 */
  font-weight: bold;
  color: #d14d72;
  width: 20px !important;
  min-width: 20px;
  text-align: center;
  /* 左右置中 */
  vertical-align: middle;
  /* 上下置中 */
  padding: 10px 0;
}

.teacher-table tbody td:not(:first-child) {
  vertical-align: top;
  /* 向上對齊 */
  padding-top: 8px;
  /* 增加頂部間距，避免文字貼齊邊框 */
}


.teacher-table thead th:first-child {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 4px;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  text-align: center;
  vertical-align: middle;
  padding: px 0;
}

.course-name {
  color: #2c3e50;
  display: block;
  margin-bottom: 2px;
}

.course-time {
  color: #888;
  font-size: 0.85em;
}

.form-row {
  display: flex;
  gap: 15px;
  /* 設定兩個欄位之間的間距 */
  width: 100%;
  align-items: flex-start;
  /* 確保標籤對齊 */
}

/* 關鍵：強制讓內部的 field 與 input-group 平分剩餘空間 */
.form-row .field,
.form-row .input-group {
  flex: var(--flex-grow, 1);
  min-width: 0;
  /* 防止內容撐開導致破版 */
}

.sub-tab-content {
  display: none;
}

.sub-tab-content.active {
  display: block;
}

/* 子分頁按鈕稍小一點以示區別 */
.child-tabs .tab-btn {
  height: 45px;
  font-size: 16px;
}

.child-tabs .tab-btn.active {
  font-size: 20px !important;
  background: #D05A6E;
  /* 稍微深一點的粉色 */
}

.tab-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.5;
  background-color: #ccc !important;
  pointer-events: none;
  /* 徹底禁止點擊事件 */
}

/* 1. 卡片式標題佈局 */
.drawer-trigger-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin: 15px 0;
}

.rules-container {
  display: contents;
  /* 讓容器不影響佈局，讓子元素（按鈕）直接排進 Grid */
}

.info-card-btn {
  background: #FFFFFF;
  border: 1px solid #f089a1;
  border-radius: 15px;
  padding: 9px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  /* 1. 預設改為浮起狀態：加入位移與較明顯的陰影 */
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(240, 137, 161, 0.2);

  /* 讓回彈動作平滑 */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.info-card-btn:active {
  /* 2. 點擊時變成正常（下沉）狀態 */
  /* 抵消掉預設的 translateY，並加入你原本想要的縮放與右移 */
  transform: translateY(0px) translateX(8px) scale(0.95);

  /* 陰影變小，模擬貼近地面的感覺 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  background-color: #fff0f3;
  transition: transform 0.1s ease-out;
}

.info-card-btn span {
  font-weight: bold;
  color: #d14d72;
  font-size: 0.9rem;
}

.info-card-btn small {
  display: none; 
}

.info-card-bg-svg {
  position: absolute;
  width: 80px;
  height: 80px;
  bottom: -20px;
  right: -15px;
  transform: rotate(-25deg);
  opacity: 0.2;
  z-index: 0;
}

/* 飛出替身小卡的專屬外觀與動畫 */
.fly-card-ghost {
  position: absolute;
  z-index: 9999;
  /* 確保在最上層 */
  pointer-events: none;
  /* 防止動畫期間干擾使用者點擊 */
  background: #ffffff;
  border: 1px solid #f089a1;
  border-radius: 12px;
  padding: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 8px 16px rgba(240, 137, 161, 0.3);

  /* 綁定我們下方寫好的動畫：持續 0.6 秒，平滑流暢，結束時維持最終狀態 */
  animation: flyRightOut 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 定義：往右飛、放大、淡出的動畫軌跡 */
@keyframes flyRightOut {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  100% {
    /* translate(往右飛 150px, 輕微上浮 20px) scale(放大 1.4 倍) */
    transform: translate(150px, -20px) scale(1.8);
    opacity: 0;
    /* 淡出 */
    filter: blur(4px);
    /* 輕微模糊增加速度感 */
  }
}


/* 2. 側邊滑出抽屜主體 */
.side-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  /* 預設在右側畫面外 */
  width: 400px;
  height: 100%;
  background: #ffffff;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease-in-out;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .side-drawer {
    width: 500px;
    /* 電腦版固定寬度，你可以改為 600px 甚至更大 */
  }
}

/* 如果螢幕超大（如 1200px 以上），可以再寬一點 */
@media (min-width: 1200px) {
  .side-drawer {
    width: 800px;
  }
}

/* 當抽屜被啟動時 */
.side-drawer.open {
  right: 0;
}

/* 黑色遮罩層 */
.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  z-index: 1999;
  backdrop-filter: blur(2px);
}

/* 3. 抽屜內容區樣式 */
.drawer-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
}

.drawer-body {
  padding: 25px;
  overflow-y: auto;
  line-height: 1.8;
  color: #444;
  flex: 1;
}

.close-drawer {
  font-size: 28px;
  cursor: pointer;
  color: #999;
  line-height: 1;
}

/* 4. 手機版響應式微調 */
@media (max-width: 600px) {
  .side-drawer {
    width: 100%;
    /* 手機上滑出佔據大部分螢幕 */
  }
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateX(30px);
    /* 從右邊 30px 處開始 */
  }

  to {
    opacity: 1;
    transform: translateX(0);
    /* 回到原位 */
  }
}

/* 當側邊抽屜開啟時，內部的 body 執行內容動畫 */
.side-drawer.open .drawer-body {
  animation: contentFadeIn 1s ease-out forwards;
  animation-delay: 0.1s;
  /* 稍微延遲，等抽屜滑出一半再開始跑內容動畫更自然 */
}

/* 手風琴容器 */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px 0;
}

/* 每一天的卡片 */
.day-card {
  border: 1px solid #F4A7B9;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 卡片標題（星期） */
.card-header {
  background: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 1.4em;
  font-weight: bold;
  color: #d14d72;
  border-left: 5px solid #E87A90;
  transition: background 0.3s;
}

.card-header:hover {
  background: #fffafa;
}

/* 展開內容區塊 */
.card-body {
  max-height: 0;
  /* 預設高度為 0 */
  overflow: hidden;
  /* 超出部分隱藏 */
  font-size: 1.1em;
  transition: max-height 0.4s ease-out, padding 0.4s ease;
  /* 平滑過渡 */
  background: #fffafa;
  padding: 0 15px;
  /* 初始 padding 垂直方向為 0 */
}

/* 展開時的狀態 */
.day-card.active .card-body {
  max-height: 1000px;
  /* 給予一個足夠大的最大高度 */
  padding: 10px 15px;
  /* 展開後恢復內距 */
  border-top: 2px solid #F4A7B9;
}

/* 箭頭旋轉動畫 */
.day-card.active .arrow {
  transform: rotate(180deg);
}

.day-card {
  transition: box-shadow 0.3s;
}

.day-card.active {
  box-shadow: 0 4px 12px rgba(232, 122, 144, 0.2);
}

/* 課程項目樣式 */
.accordion-course-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.accordion-course-item:last-child {
  border-bottom: none;
}

.time-tag {
  background: #F4A7B9;
  color: white;
  padding: 8px 10px;
  /* 稍微增加上下間距 */
  border-radius: 12px;
  /* 改為較方圓的矩形 */
  font-size: 0.85em;
  margin-right: 15px;
  white-space: nowrap;

  /* 加入 Flex 佈局讓時間垂直置中排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  /* 固定寬度讓視覺更整齊 */
  line-height: 1.2;
}

/* 定義中間那一豎 */
.time-line {
  width: 1.5px;
  /* 線的寬度 */
  height: 8px;
  /* 線的高度 */
  background-color: rgba(255, 255, 255, 0.6);
  /* 半透明白色 */
  margin: 2px 0;
  /* 與上下時間的間距 */
}

.course-info b {
  color: #2c3e50;
  font-size: 1rem;
}

.course-info div {
  color: #888;
  font-size: 0.85rem;
}

#opening-notice {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;

  /* 漸層半透明背景 */
  background: linear-gradient(135deg, #F4A7B999 0%, #E87A9099 100%);

  /* 🌟 新增：毛玻璃特效 (背後的影片會被模糊，質感大升級) */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* 🌟 新增：Flexbox 讓 SVG 和文字完美置中對齊 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* 圖示與文字的間距 */

  color: white;
  padding: 10px 24px;
  border-radius: 50px;

  /* 調整邊框陰影，加上一點內發光讓立體感更好 */
  box-shadow: 0 4px 15px rgba(244, 167, 185, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.3);

  pointer-events: none;
  white-space: nowrap;
  width: auto;
  min-width: fit-content;

  animation: opening-notice-anim 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* 針對文字的微調 */
#opening-notice .notice-text {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: 2px;
  /* 微調垂直視覺置中 */
}

#opening-notice .notice-icon {
  width: auto;
  /* 寬度：你可以根據 PNG 實際狀況微調大小 */
  height: 35px;
  /* 高度：建議跟寬度一樣保持正方形比例 */
  object-fit: contain;
  /* 確保圖片完整顯示，不會被擠壓變形 */
}

@keyframes opening-notice-anim {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(1.8);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    /* 回歸正常比例與位置 */
  }

  15% {
    transform: translate(-50%, -5px) scale(1.02);
    /* 向上浮動 5px */
  }

  30% {
    transform: translate(-50%, 0) scale(1);
    /* 向上浮動 5px */
  }

  45% {
    transform: translate(-50%, -5px) scale(1.02);
    /* 向上浮動 5px */
  }

  60% {
    transform: translate(-50%, 0) scale(1);
    /* 向上浮動 5px */
  }

  75% {
    transform: translate(-50%, -5px) scale(1.02);
    /* 向上浮動 5px */
  }

  90% {
    transform: translate(-50%, 0) scale(1);
    /* 回到正常位置 */
  }

  95% {
    transform: translate(-50%, -5px) scale(1.02);
    /* 向上浮動 5px */
  }

  100% {
    transform: translate(-50%, 0) scale(1);
    /* 回到正常位置 */
  }
}


.notice-pulse-container {
  width: 100%;
  /* background: linear-gradient(135deg, #FFF0F2 0%, #FFE5E9 100%); */
  /* border: 1px solid #F4A7B9; */
  border-radius: 12px;
  /* margin: 15px 0; */
  /* padding: 7px 12px; */
  box-sizing: border-box;
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
  text-align: center;
}

/* 3. 核心警告內文 */
.notice-pulse-text {
  color: #e74c3c;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: 2px;
  margin-top: 4px;
}

/* 早鳥倒數計時器專屬樣式 */
#earlybird-countdown-container {
  width: fit-content;
  margin: 15px auto;
  padding: 12px;
  /* background: linear-gradient(135deg, #FFF0F2 0%, #FFE5E9 100%); */
  border: 1px solid #F4A7B9;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.countdown-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.countdown-title {
  color: #D05A6E;
  font-weight: bold;
  font-size: 1.15rem;
  letter-spacing: 1px;
}

.countdown-timer {
  font-family: 'Play', Courier, monospace;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-timer span {
  color: #E87A90;
  padding: 2px 2px;
  border-radius: 20px;
  display: inline-flex; 
  justify-content: center;
  align-items: center;
  overflow: hidden; 
}

.countdown-timer i.num-inner {
  font-style: normal; /* 讓 i 標籤維持正常字體不傾斜 */
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease;
  opacity: 1;
  transform: translateY(0);
}

.countdown-timer i.num-inner.exit {
  opacity: 0;
  transform: perspective(100px) rotateX(90deg);
}

.countdown-timer i.num-inner.enter {
  opacity: 0;
  transform: perspective(100px) rotateX(-90deg);
  transition: none;
}
.countdown-timer small {
  font-size: 0.85rem;
  color: #E87A90;
  margin: 0;
  font-weight: normal;
}

/* --- 單堂課程輸入框放大浮出專屬樣式 --- */
#singleCourseWrapper {
  position: relative;
}

.expand-input-container {
  width: 100%;
  background: #ffffff;
  border-radius: 6px;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  /* 徹底移除 transition 裡的所有 transform，改為只針對陰影和透明度 */
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

/* 頂部導覽列：預設隱藏 */
.expand-header {
  display: none;
  width: 100%;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.expand-title {
  font-weight: bold;
  color: #2c3e50;
  font-size: 1.15rem;
}

.expand-close {
  font-size: 30px;
  color: #999;
  cursor: pointer;
  line-height: 1;
}

/* 內部課表容器：預設隱藏 */
.expand-content {
  display: none;
  padding: 20px;
  overflow-y: auto;
  max-height: calc(100vh - 140px);
  box-sizing: border-box;
  background: #ffffff;
}

/* 核心：啟動放大後的滿版視窗樣式 */
/* 1. 啟動放大後的滿版視窗樣式 (修改陰影) */
.expand-input-container.expanded {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 90% !important;
  max-width: 500px !important;
  height: auto !important;
  max-height: 90vh !important;
  border-radius: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important; /* 在遮罩之上 */
  overflow: hidden !important;
  
  /* ✨ 核心修改：移除 100vw 超大陰影，只保留卡片本身的立體浮空陰影 */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important;
  
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;

  /* 3D 翻轉的原點與硬體加速設定保持不變 */
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 2. 新增：獨立的正規遮罩層 */
.expand-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* 支援 iOS 毛玻璃 */
  z-index: 99998; /* 確保在翻轉卡片之下 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 遮罩顯示狀態 */
.expand-overlay.show {
  opacity: 1;
  visibility: visible;
}

@keyframes expandFlipIn {
  from {
    transform: translate(-50%, -70%) perspective(1000px) rotateX(-50deg) scale(0.85);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) perspective(1000px) rotateX(0deg) scale(1);
    opacity: 1;
  }
}

/* 放大後內層元件的動態顯示切換 */
.expand-input-container.expanded .expand-header {
  display: flex;
}

.expand-input-container.expanded .expand-content {
  display: block;
}

.loader {
  border: 4px solid #f3f3f3;
  /* 淺灰色外圈 */
  border-top: 4px solid #E87A90;
  /* 品牌粉色內圈 */
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 自製選單的外層容器 */
.wd-dropdown-container {
  position: relative;
  width: 100%;
  margin-bottom: 0;
}

/* 模擬選單的「點擊觸發框」 */
.wd-dropdown-trigger {
  width: 100%;
  padding: 12px 15px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  background-color: white;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.wd-dropdown-trigger:hover {
  border-color: #E87A90;
  box-shadow: 0 4px 12px rgba(232, 122, 144, 0.1);
}

/* 右側的小箭頭 */
.wd-dropdown-trigger .arrow {
  color: #E87A90;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}

/* 當選單被打開時，箭頭反轉 */
.wd-dropdown-container.open .wd-dropdown-trigger .arrow {
  transform: rotate(180deg);
}

/* 真正彈出的「下拉選項卡片清單」 */
.wd-dropdown-menu {
  /* 1. 關鍵修改：將原本的 absolute 改為 relative (相對定位) */
  position: absolute;
  top: calc(100% + 5px);
  z-index: 1000;
  /* 改為與上方點擊框保持 10px 的安全距離 */
  left: 0;
  width: 100%;
  box-sizing: border-box;
  /* 確保寬度計算包含 padding */
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(232, 122, 144, 0.2);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(232, 122, 144, 0.08);
  /* 柔和陰影 */
  max-height: 250px;
  overflow-y: auto;
  padding: 5px 0;
  margin: 0;
  /* 下方補上 15px 外距，推開後續元件 */
  list-style: none;

  /* 初始狀態：高度為0、隱藏、淡出 */
  display: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 當激活（選單打開）時的樣式 */
.wd-dropdown-container.open .wd-dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.wd-dropdown-container.open {
  position: relative;
  z-index: 10002;
}
/* 每個下拉選項的單元格保持原樣 */
.wd-dropdown-item {
  padding: 12px 15px;
  color: #444;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}

.wd-dropdown-item:hover {
  background-color: #FFF0F2;
  color: #D05A6E;
  font-weight: bold;
}

.wd-dropdown-item.disabled {
  color: #bbb !important;
  cursor: not-allowed;
  background: #fafafa;
}

/* 自訂地址 H3 點擊樣式 */
.location-link {
  color: #E87A90;
  /* 延用您原本漂亮的粉色系 */
  cursor: pointer;
  display: block;
  /* 改為 block 才能完整支援文字置中 */
  text-align: center;
  /* 讓文字與圖示在容器內置中 */
  width: fit-content;
  /* 讓寬度剛好符合文字長度，使下底線長度正確 */
  margin: 0 auto 15px auto;
  /* 上下保留 15px 邊距，左右 auto 達成區塊置中 */
  transition: all 0.3s ease;
  border-bottom: 1px dashed #E87A90;
  font-weight: normal;
  /* 加一條虛線暗示可點擊 */
  padding-bottom: 4px;
}

.location-link:hover {
  color: #C88595;
  /* 懸停時顏色加深 */
  transform: translateY(-1px);
  /* 微幅浮起效果 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.location-link:active {
  transform: translateY(1px);
  /* 點擊時下沉回饋 */
}

/* 💡 升級：智慧對話框外殼（加入淡入淡出與硬體加速） */
#ai-chat-box {
  display: flex;
  /* 始終維持 flex 佈局以利內部元件排列 */
  width: 320px;
  height: 400px;
  background: white;
  border: 1px solid #F4A7B9;
  border-radius: 15px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 70px;
  right: 0;
  flex-direction: column;
  overflow: hidden;

  /* 核心：淡入淡出動態設定 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  /* 初始狀態：稍微向下偏移 15px */
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
  will-change: opacity, transform;
  /* 啟動瀏覽器顯卡優化 */
}

/* 當被啟動時，套用 active 類別進行滑入與淡入 */
#ai-chat-box.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* 回歸原本位置 */
}

#ai-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;

  /* 核心：預設隱藏並使其無法被點擊 */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  /* 初始縮小一點點，製造彈出感 */
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 當加上 .show 類別時，優雅地彈出並淡入 */
#ai-chat-widget.show {
  opacity: 1;
  pointer-events: auto;
  /* 恢復可點擊狀態 */
  transform: scale(1);
  /* 恢復正常大小 */
}

#ai-messages {
  background: linear-gradient(180deg, #fff5f7 0%, #ffffff 100%) !important;
  /* 溫柔的粉白漸層底 */
  padding: 15px !important;
}

/* 讓滾輪變細、變粉色，不破壞網頁美感 */
#ai-messages::-webkit-scrollbar {
  width: 4px;
}

#ai-messages::-webkit-scrollbar-thumb {
  background: #F4A7B9;
  border-radius: 10px;
}

.btn-send-paperplane {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 0 0 5px;
  padding: 0;
  background: #E87A90;
  border-radius: 50%;
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  /* 確保飛機飛出去時被按鈕邊緣遮罩 */
}

/* 保持按下去按鈕會縮小的回饋感 (這在手機上體驗很好) */
.btn-send-paperplane:active {
  transform: scale(0.92);
}

/* 定義紙飛機飛出去並重置的動畫 */
@keyframes fly-out-step {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }

  100% {
    transform: translate(25px, -25px);
    opacity: 0;
  }
}

/* 後半段：單純負責從左下角出現並飛回正中央 */
@keyframes fly-in-step {
  0% {
    transform: translate(-25px, 25px);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* 當按鈕加上 .is-flying 類別時，內部的 svg 執行飛行動畫 */
.btn-send-paperplane.is-flying svg {
  animation:
    fly-out-step 0.3s ease-in forwards,
    fly-in-step 0.3s 0.3s ease-out forwards;
}



.popular-booking-wall {
  width: 100%;
  margin: 0 auto 25px auto;
  background: white;
  border-radius: 15px;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 4px 15px rgba(232, 122, 144, 0.15);
  border: 1px solid #F4A7B9;
}

.popular-booking-title {
  text-align: center;
  color: #D05A6E;
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* --- 輪播容器設定 --- */
.popular-wall-container {
  position: relative;
  height: 185px; /* 容納 3 個卡片(55px) + 2 個間距(10px) = 185px */
  overflow: hidden; /* 隱藏超出範圍的卡片 */
  padding-right: 0px; 
}

.booking-wall-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 15px;
  border-radius: 10px;
  background: #fdfdfd;
  box-shadow: 0 2px 6px rgba(244, 167, 185, 0.1);
  border: 1px dashed #F4A7B9;
  /* 以下為新增的絕對定位與動畫設定 */
  position: absolute;
  width: calc(100% - 10px);
  left: 5px;
  height: 55px; /* 固定高度，讓動畫軌跡精準 */
  margin-bottom: 0;
  box-sizing: border-box;
  
  /* 預設狀態 (準備進場，藏在最下方) */
  transform: translateY(195px); 
  opacity: 0;
  pointer-events: none;
  
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

/* 動畫專用的狀態類別 */
.wall-pos-exit {
  transform: translateY(-70px); /* 往上滑出並淡出 */
  opacity: 0;
}
.wall-pos-0 {
  transform: translateY(0px); /* 第一個位置 */
  opacity: 1;
  pointer-events: auto;
}
.wall-pos-1 {
  transform: translateY(65px); /* 第二個位置 (55高度 + 10間距) */
  opacity: 1;
  pointer-events: auto;
}
.wall-pos-2 {
  transform: translateY(130px); /* 第三個位置 (65 + 65) */
  opacity: 1;
  pointer-events: auto;
}
.wall-pos-enter {
  transform: translateY(195px); /* 準備進場的位置 (130 + 65) */
  opacity: 0;
}

/* 核心防呆：未參與動畫的卡片瞬間歸位，不顯示滑動痕跡 */
.booking-wall-item:not(.wall-pos-0):not(.wall-pos-1):not(.wall-pos-2):not(.wall-pos-exit):not(.wall-pos-enter) {
  transition: none; 
}

.wall-date {
  font-size: 1.15rem;
  font-weight: bold;
  color: #2c3e50;
}

.wall-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  color: white;
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* QRCode 左下角懸浮按鈕的外殼 (與 AI 助手對稱) */
#qrcode-widget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  /* 放在左下角 */
  z-index: 99999;

  /* 初始隱藏與縮小 */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 顯示時的狀態 */
#qrcode-widget.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* QRCode 按鈕本體 */
#qrcode-toggle-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E87A90 0%, #D05A6E 100%);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
  /* 稍微縮小字體以塞入 QRCode */
  transition: transform 0.3s ease;
}

#qrcode-toggle-btn:active {
  transform: scale(0.92);
}

/* --- 2. 質感漸層遮罩 --- */
.overlay-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 使用深色漸層，讓白色的字體可以完美凸顯，也增加舞蹈教室的沉穩感 */
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.6) 0%, rgba(232, 122, 144, 0.3) 100%);
  z-index: 2;
}

/* --- 動畫設定：從模糊甦醒到緩慢推進 --- */
@keyframes cinematicPan {
  0% {
    transform: scale(1) translate(0, 0);
    filter: blur(10px) brightness(0.7);
    /* 初始模糊，像剛睜開眼睛 */
  }

  15% {
    filter: blur(0px) brightness(1);
    /* 約 1.5 秒後瞬間對焦，抓住注意力 */
  }

  100% {
    transform: scale(1.15) translate(-1%, -1%);
    /* 緩慢放大 1.15 倍 */
    filter: blur(0px) brightness(1);
  }
}

/* --- 3. 呼吸感載入文字 --- */
.loading-subtitle {
  position: absolute;
  top: calc(7% + 75px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  font-size: 1.2rem;
  letter-spacing: 3px;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 這裡控制 SVG 圖示與文字之間的距離 */
  white-space: nowrap;
  /* 確保圖示和文字不會斷成兩行 */

  animation: breathText 1.5s infinite ease-in-out;
}

@keyframes breathText {

  0%,
  100% {
    opacity: 0.4;
    text-shadow: none;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
}

/* 定義敲擊時的微光外擴動畫 */
@keyframes typePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 122, 144, 0.4);
    border-color: #E87A90;
    transform: scale(1.01);
    /* 瞬間微幅放大 */
  }

  50% {
    box-shadow: 0 0 10px 4px rgba(232, 122, 144, 0.1);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(232, 122, 144, 0);
    border-color: #F4A7B9;
    transform: scale(1);
    /* 回歸原狀 */
  }
}

/* 觸發動畫的 class */
.typing-pulse-effect {
  animation: typePulse 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 查詢系統專屬的分頁顯示邏輯，避免與報名系統衝突 */
.query-tab-content {
  display: none;
}

.query-tab-content.active {
  display: block;
}

.fade-in-section {
  animation: tabFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes tabFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
    /* 從下方 10px 處開始 */
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    /* 滑順回歸原位 */
  }
}

/* 查詢系統專屬的幽靈按鈕外觀：完美複製 Active 狀態 */
#query-ghost-tab {
  display: none;
  position: absolute;
  margin: 0 !important;
  z-index: 100;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  /* 視覺外觀完全同步子分頁 Active 樣式 */
  border-radius: 25px;
  font-weight: bold !important;
  font-size: 20px !important;
  color: white !important;
  background: #D05A6E !important;
  /* 漂亮的深粉色 */
  box-shadow: 0 4px 12px rgba(208, 90, 110, 0.4);
  opacity: 1;
  will-change: transform, opacity;
}

/* --- 社群按鈕群組容器 --- */
.social-btn-group {
  display: flex;
  /* 關鍵：這行讓原本的橫排變成由上到下直排 */
  align-items: center;
  /* 讓按鈕群組保持在畫面正中央 */
  gap: 15px;
  /* 按鈕之間的上下間距 */
  margin: 30px 0;
}

/* --- 單一社群按鈕基礎設計 (手機版最佳化 + 等寬設定) --- */
.social-btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 讓文字與圖示在按鈕內置中 */
  padding: 6px 6px;
  border-radius: 10px;
  background: #FFFFFF;
  color: #E87A90 !important;
  border: 1px solid #F4A7B9;
  text-decoration: none !important;
  font-weight: bold;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(208, 90, 110, 0.25);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* 🌟 新增：鎖定按鈕寬度，讓直排時邊緣對齊，看起來更整齊專業 */
  box-sizing: border-box;
}

/* --- SVG 圖示設定 (保持不變) --- */
.social-btn-custom svg {
  width: 1.3em;
  height: 1.3em;
  fill: #ffffff;
}

/* --- 點擊瞬間下沉回饋 (保持不變) --- */
.social-btn-custom:active {
  transform: translateY(2px) scale(0.95);
  box-shadow: 0 1px 4px rgba(208, 90, 110, 0.2);
}

/* 活動照片抽屜網格與正方形小卡樣式 */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  padding: 10px 0;
}

.photo-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 關鍵：強制比例 1:1 變成正方形 */
  object-fit: cover;
  /* 確保圖片不變形，填滿整個正方形 */
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* 📸 照片放大燈箱 (Lightbox) 樣式 - 升級淡入淡出+縮放特效版 */
.photo-modal {
  display: flex;
  /* 💡 始終維持 Flex 佈局以利圖片居中 */
  visibility: hidden;
  /* 🚨 關鍵修改：預設改用 visibility 隱藏，才能完美觸發淡出動畫！ */
  position: fixed;
  z-index: 9999;
  /* 確保疊在最上層，包含抽屜之上 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  /* 半透明黑底 */
  justify-content: center;
  align-items: center;
  opacity: 0;
  /* 💡 讓透明度與可見度同時跑 0.3 秒的流暢過渡 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 啟動時的類別 */
.photo-modal.show {
  visibility: visible;
  /* 顯示外層黑底 */
  opacity: 1;
}

/* 放大後的圖片樣式 */
.photo-modal-content {
  max-width: 90%;
  max-height: 85%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  transform: scale(0.85);
  /* 💡 預設縮小到 0.85 倍，營造從深處彈出來的電影感 */
  /* 運用高級的彈性貝茲曲線 (cubic-bezier)，讓縮放動作帶有一絲絲極其優雅的果凍回彈感 */
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 彈窗出現時圖片放大回 100% 的動畫效果 */
.photo-modal.show .photo-modal-content {
  transform: scale(1);
  /* 點擊時優雅放大回原本大小 */
}

/* 右上角關閉按鈕 */
.photo-modal-close {
  position: absolute;
  top: 20px;
  right: 25px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;
}

.photo-modal-close:hover {
  color: #F4A7B9;
  /* 懸停時變成教室的粉色系 */
}



/* --- 手機版專屬浮動列與下拉選單 --- */
@media (max-width: 600px) {
  .sticky-quick-nav {
    position: fixed;
    top: -80px;
    /* 預設藏在畫面最上方之外 */
    left: 0;
    width: 100%;
    height: 55px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* 支援 Safari 毛玻璃 */
    box-shadow: 0 2px 15px rgba(232, 122, 144, 0.15);
    z-index: 900;
    /* 🌟 設到極高，確保絕對顯示在最上層 */
    display: flex;
    justify-content: space-between;
    /* 標題靠左，按鈕靠右 */
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 當 JS 加上 show 類別時，往下滑入畫面 */
  .sticky-quick-nav.show {
    top: 0;
  }

  .hamburger-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* --- 漢堡三條線轉 X 的動畫 --- */
  .hamburger-svg line {
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .hamburger-svg .line-top {
    transform-origin: 12px 6px;
  }

  .hamburger-svg .line-mid {
    transform-origin: 12px 12px;
  }

  .hamburger-svg .line-bot {
    transform-origin: 12px 18px;
  }

  .hamburger-btn.active .line-top {
    transform: translateY(6px) rotate(45deg);
  }

  .hamburger-btn.active .line-mid {
    opacity: 0;
  }

  .hamburger-btn.active .line-bot {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* --- 快速選單下拉抽屜 --- */
  .quick-menu-drawer {
    position: fixed;
    top: -150%;
    /* 預設完全藏在上面 */
    left: 0;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0 10px 20px rgba(232, 122, 144, 0.12);
    z-index: 899;
    /* 確保在 Bar 之下 */
    transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 0 20px 20px;
  }

  .quick-menu-drawer.show {
    top: 55px;
    /* 降到 Bar 的正下方 */
  }

  .quick-menu-list {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    max-height: 65vh;
    overflow-y: auto;
  }

  .quick-menu-list li {
    padding: 16px 24px;
    border-bottom: 1px solid #FEEAEE;
    color: #d14d72;
    font-size: 1.25em;
    position: relative;
    cursor: pointer;
  }

  .quick-menu-list li:last-child {
    border-bottom: none;
  }

  .quick-menu-list li:active {
    background: #FEEAEE;
  }

  .quick-menu-list li::after {
    content: "›";
    position: absolute;
    right: 24px;
    font-size: 1.4em;
    color: #E87A90;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* 桌面版隱藏 */
@media (min-width: 601px) {

  .sticky-quick-nav,
  .quick-menu-drawer {
    display: none !important;
  }
}

@keyframes flyRightAndFade {
  0% {
    transform: translate(0, 0) scale(1.3) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: translate(80px, -15px) scale(1) rotate(15deg);
    opacity: 0;
  }
  41% {
    transform: translate(-80px, 15px) scale(1) rotate(-10deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) scale(1.3) rotate(0deg);
    opacity: 1;
  }
}

.fly-out-svg {
  animation: flyRightAndFade 1.5s infinite ease-in-out;
}

@keyframes realisticFlicker {
  0% { 
    transform: scale(1, 1) skewX(0deg); 
    filter: brightness(1) drop-shadow(0 0 2px rgba(232, 122, 144, 0.3));
  }
  20% { 
    transform: scale(0.95, 1.15) skewX(-3deg); 
    filter: brightness(1.3) drop-shadow(0 0 4px rgba(232, 122, 144, 0.8));
  }
  40% { 
    transform: scale(1.05, 0.95) skewX(2deg); 
    filter: brightness(0.9) drop-shadow(0 0 2px rgba(232, 122, 144, 0.2));
  }
  60% { 
    transform: scale(0.9, 1.2) skewX(-1deg); 
    filter: brightness(1.4) drop-shadow(0 0 6px rgba(232, 122, 144, 1));
  }
  80% { 
    transform: scale(1.02, 0.92) skewX(4deg); 
    filter: brightness(0.85) drop-shadow(0 0 1px rgba(232, 122, 144, 0.2));
  }
  100% { 
    transform: scale(1, 1) skewX(0deg); 
    filter: brightness(1) drop-shadow(0 0 2px rgba(232, 122, 144, 0.3));
  }
}

.flicker-svg {
  transform-origin: 50% 90%; 
  animation: realisticFlicker 0.6s infinite ease-in-out;
}

@keyframes swing-animation {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(20deg); }
  30% { transform: rotate(-15deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-5deg); }
  75% { transform: rotate(0deg); }
}

.swing-bell {
  transform-origin: 50% 10%; 
  animation: swing-animation 2s ease-in-out infinite;
}


@keyframes breathe-glow {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 2px rgba(231, 212, 179, 0.3));
    transform: scale(1); /* 保持原本大小 */
  }
  50% {
    filter: brightness(1.1) drop-shadow(0 0 6px rgb(231, 212, 179));
    transform: scale(1.08); /* 微微放大 8%，讓呼吸感更逼真 */
  }
}

/* 2. 只要加上這個 class，圖案就會呼吸發光 */
.glow-svg {
  animation: breathe-glow 2.5s ease-in-out infinite;
  vertical-align: middle; 
}

.walking-circle {
  width: 24px;   /* 圖案本身的大小 */
  height: 24px;  
  animation: circleRun 2s linear infinite;
}

@keyframes circleRun {
  from {
    transform: rotate(0deg) translate(8px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(8px) rotate(-360deg);
  }
}

.hourglass-spin {
  width: 20px;          /* 可以依據字體大小自行調整沙漏寬高 */
  height: 20px;
  transform-origin: center;
  animation: flipStep 2.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
}

@keyframes flipStep {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  65% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#roomstatusmsg {
  text-align: center; /* 讓內部的 SVG 和 <span> 文字像段落一樣水平置中 */
  width: 100%;
}

/* =========================================
   SVG 10組漸次淡入動畫 (純 CSS 控制，不改原代碼)
   ========================================= */

.svg-intro-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* 控制整張圖在螢幕中間的大小 */
#svg1 {
  flex-shrink: 0 !important;
  width: 60%;         /* 在大螢幕佔 60% 空間 */
  max-width: 750px;   /* 電腦上最大不要超過這個數值，以免太巨無霸 */
  height: auto;
}

/* =========================================
   2. 這是給「手機」看的專屬大小
   ========================================= */
@media (max-width: 600px) {
  #svg1 {
    width: 100%; 
    max-width: none !important;
    transform: scale(1.1) !important; 
    transform-origin: center center !important;
  }
}

/* =========================================
   3. 定義雙重動畫：進場 + 永續呼吸
   ========================================= */
.anim-wrapper {
  opacity: 0;
  
  /* 讓縮放完美鎖定在碎片的正中心 */
  transform-origin: center;
  transform-box: fill-box; 
  
  /* 綁定雙重動畫 */
  animation-name: partDropIn, partBreathe;
  animation-fill-mode: forwards, forwards;
  animation-iteration-count: 1, infinite;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1), ease-in-out;
}

/* 動畫 A：1.5倍降落拼合 */
@keyframes partDropIn {
  from { 
    opacity: 0; 
    transform: perspective(500px) scale(2) translateX(var(--random-x, 0px)) translateY(var(--random-y, 0px)) rotate(var(--random-rot, 0deg)) rotateX(var(--random-rx, 0deg)) rotateY(var(--random-ry, 0deg)); 
    filter: drop-shadow(0px 10px 20px rgba(226, 125, 152, 0.6));
  }
  to { 
    opacity: 1; 
    transform: perspective(500px) scale(1) translateX(0px) translateY(0px) rotate(0deg) rotateX(0deg) rotateY(0deg); 
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
  }
}

/* 動畫 B：微光呼吸 */
/* =========================================
   動畫 B：品牌能量光暈呼吸 (不再變透明)
   ========================================= */
@keyframes partBreathe {
  0%, 100% { 
    opacity: 1;
    filter: drop-shadow(0px 10px 20px rgba(226, 125, 152, 0));
  }
  50% { 
    opacity: 0.5; 
    filter: drop-shadow(0px 10px 20px rgba(226, 125, 152, 0.6));
  }
}

/* =========================================
   底部 Loading 進度條與閃爍文字
   ========================================= */
.bottom-loading-group {
  position: absolute;
  /* 與上方的 calc(7% + 75px) 形成完美的上下對稱 */
  bottom: calc(0% + 75px); 
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001; /* 確保在遮罩之上 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* 進度條與文字的間距 */
  width: 200px; /* 控制進度條的長度 */
}

/* 底部的 LOADING 文字 */
.bottom-loading-text {
  font-size: 1rem;
  letter-spacing: 5px;
  color: #ffffff;
  font-weight: bold;
  animation: breathText 0.5s infinite ease-in-out; 
}

#courseEnrollmentSystem, 
#querySystemContainer, 
#roomEnrollmentSystem, 
#queryRoomContainer {
  scroll-margin-top: 55px;
}

/* =========================================
   膠囊標籤文字專屬：心跳放大淡出特效
   ========================================= */
@keyframes badgeJellyPop {
  0%, 100% { 
    transform: scale(1, 1); 
    filter: brightness(1); /* 正常亮度 */
  }
  15% { 
    transform: scale(1.15, 0.85); 
    filter: brightness(0.9); /* 往下壓扁蓄力時，稍微變暗一點點，對比會更強烈 */
  }
  30% { 
    transform: scale(0.9, 1.15); 
    /* 🌟 往上拉長跳起時：亮度瞬間提升到 1.4 倍，並自帶一點點外發光 */
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(232, 122, 144, 0.6)); 
  }
  45% { 
    transform: scale(1.05, 0.95); 
    filter: brightness(1.1); /* 落地時稍微還有一點點餘光 */
  }
  60% { 
    transform: scale(1, 1); 
    filter: brightness(1); /* 迅速回歸正常亮度 */
  }
}

.badge-text-heartbeat {
  display: inline-block;
  transform-origin: center;
  animation: badgeJellyPop 1.5s infinite;
}

/* 老師小卡容器：使用 Flex 排列 */
.teacher-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

/* 老師小卡樣式 */
.teacher-small-card {
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #F4A7B9;
  border-radius: 8px;
  color: #d14d72;
  font-weight: bold;
  cursor: pointer;
  /* 關鍵：設定 0.5 秒透明度動畫 */
  opacity: 1;
  transition: opacity 0.5s ease, background 0.3s, color 0.3s, transform 0.2s;
}

/* 小卡 Hover 效果 */
.teacher-small-card:hover {
  background: #FFF5F7;
  transform: translateY(-2px);
}

/* 小卡被選中時的樣式 */
.teacher-small-card.selected-card {
  background: #E87A90;
  color: #ffffff;
}

.teacher-small-card.reselect-card-style {
  background: #FFF5F7;      /* 淡淡的粉底底色做出區隔 */
  border: 2px dashed #E87A90; /* 改用虛線邊框，更有功能按鈕的感覺 */
  color: #E87A90;
  /* 關鍵：利用 CSS Order 讓它強制排在所有小卡的「最左邊」 */
  order: -1; 
  display: inline-flex; 
  align-items: center; 
  gap: 6px;
}
.teacher-small-card.reselect-card-style:hover {
  background: #E87A90;
  color: #ffffff;
  border-style: solid;
}

/* 最新活動：主圖片 */
.news-carousel-layer {
  position: absolute; /* 絕對定位，讓兩張圖疊在一起 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  
  /* 🌟 核心魔法：透明度 0.5 秒滑順漸變 */
  transition: opacity 1s ease-in-out; 
  opacity: 0; /* 預設為全透明 */
  z-index: 1;
}

/* 當加上 .show 時，圖片就會浮現並移到上層 */
.news-carousel-layer.show {
  opacity: 1;
  z-index: 2;
}

/* 最新活動：縮圖容器 */
.news-thumbnails-container {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  overflow-x: auto; /* 若縮圖太多，允許橫向滑動 */
  padding-bottom: 8px; /* 留一點空間給捲軸跟陰影 */
  padding: 5px 4px 5px 4px;
  scrollbar-width: none; 
}
.news-thumbnails-container::-webkit-scrollbar {
  display: none; 
}

/* 最新活動：單一縮圖 */
.news-thumbnail {
  width: 65px;
  height: 65px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: all 0.3s ease;
  flex-shrink: 0; /* 防止縮圖被擠壓變形 */
}

/* 縮圖被選中時的狀態 */
.news-thumbnail.active {
  border-color: #E87A90; /* 你的主品牌色 */
  opacity: 1;
  transform: scale(1.05); /* 微微放大 */
}

/* 微動動畫：保持非常微小的旋轉和位移 */
@keyframes microJitter {
  0% { 
    transform: translate(0, -8px) rotate(0deg); 
  }
  25% { 
    /* 原本是往上彈 0.5px，所以 -8px + 0.5px = -7.5px */
    transform: translate(1px, -7.5px) rotate(2deg); 
  }
  50% { 
    transform: translate(0, -8px) rotate(0deg); 
  }
  75% { 
    /* 原本是往上彈 0.5px，所以 -8px + 0.5px = -7.5px */
    transform: translate(-1px, -7.5px) rotate(-2deg); 
  }
  100% { 
    transform: translate(0, -8px) rotate(0deg); 
  }
}

/* 加上這個 class 時才會抖動，且只播放一次 */
.info-card-btn.jitter {
  animation: microJitter 0.5s ease-in-out; 
  will-change: transform; 
}

/* 探頭彩蛋的本體 */
.peekaboo-cat {
  position: absolute;
  bottom: -7%;
  left: 50%;           
  transform: translateX(-50%);
  font-size: 24px;     /* Emoji 的大小，如果是用圖片可以改 width/height */
  z-index: 2;         /* 關鍵：把自己藏進按鈕背後 */
  opacity: 0;          /* 平時保持隱形 */
  pointer-events: none;/* 防呆：避免使用者點按鈕時誤觸到貓咪 */
  will-change: transform, opacity;
  transform-origin: bottom center;
}

/* 探頭的關鍵影格動畫 */
@keyframes peekabooAnimation {
  0% { 
    /* 保持水平置中，加上透視感(perspective)讓翻轉更自然，並向後躺平(90度) */
    transform: perspective(400px) translate(var(--random-x, -50%)) rotateX(90deg); 
    opacity: 0; 
  }
  15% { 
    /* 向上翻起，站直(0度) */
    transform: perspective(400px) translate(var(--random-x, -50%)) rotateX(0deg); 
    opacity: 1; 
  }
  85% { 
    /* 停在半空中盯著你看 */
    transform: perspective(400px) translate(var(--random-x, -50%)) rotateX(0deg); 
    opacity: 1; 
  }
  100% { 
    /* 向下翻回，再次躺平隱形 */
    transform: perspective(400px) translate(var(--random-x, -50%)) rotateX(90deg); 
    opacity: 0; 
  }
}

/* 當 JS 賦予 active 時，執行 3 秒的探頭動畫 */
.peekaboo-cat.active {
  animation: peekabooAnimation 3s ease-in-out forwards;
}

.peekaboo-cat svg {
  width: 18px;
  height: 18px;
  display: block; /* 避免底部出現神祕的留白間隙 */
}

/* =========================================
   聯絡資訊與地圖專屬佈局 (雙欄式)
   ========================================= */

/* 外層卡片容器 */
.contact-section {
  display: flex;
  flex-wrap: wrap; /* 允許在手機等窄螢幕自動往下折行 */
  gap: 25px;
  margin: 35px 0;
  background: #ffffff;
  padding: 10px;
  border-radius: 15px;
}

/* 左側：地圖區塊 */
.contact-map {
  flex: 1 1 300px; /* 基礎寬度 300px，剩餘空間自動平分 */
  min-height: 250px;
  border-radius: 12px;
  overflow: hidden; /* 防止 iframe 的直角蓋住圓角 */
  border: 1px solid #eee;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.05); /* 增加地圖框內的微立體感 */
}

/* 右側：文字與按鈕區塊 */
.contact-info {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 讓文字在右半邊垂直置中 */
}

/* 聯絡資訊標題 */
.contact-title {
  color: #d14d72;
  font-size: 1.35rem;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #F4A7B9; /* 底線延伸效果 */
  text-align: left;
}

/* 店名 */
.contact-name {
  font-weight: bold;
  color: #2c3e50;
  font-size: 1.15rem;
  margin: 0 0 8px 0;
}

/* 地址 */
.contact-address {
  color: #666;
  font-size: 1.05rem;
  margin: 0 0 20px 0;
}

/* 覆寫原本的社群按鈕群組：靠左、間距微調 */
.social-btn-group.new-layout {
  margin: 0; /* 清除原本上下超大的 margin */
  display: flex;
  flex-direction: row; /* 強制橫排 */
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* 確保四個按鈕靠左對齊 */
  gap: 12px;
}

/* --- 品牌故事專屬段落排版 --- */
.brand-story-p {
  padding-left: 10px;
  margin-top: 15px;
  line-height: 1.6;
  color: #555;
}

/* 1. 首字放大加粗 */
.brand-story-p::first-letter {
  font-size: 1.6em;         /* 維持放大 1.8 倍 */
  font-weight: 900;         /* 極粗體 */
  color: #D05A6E;           /* 品牌深粉色 */
  margin-right: 2px;        /* 與後方文字保留呼吸空間 */
  vertical-align: baseline; /* 讓字體底部完美貼齊基準線 */
  line-height: 0.8;         /* 壓低首字行高，絕對不撐開第一行間距 */
}

/* 2. 向右淡出底線 (半透明螢光筆效果) */
.fade-underline {
  position: relative;
  z-index: 1;
  white-space: nowrap;    /* 確保這幾個字不會被切斷換行 */
}

.fade-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;            /* 決定底線要貼多低，可自行微調 */
  width: 100%;            /* 寬度自動貼合你包住的文字長度 */
  height: 5px;            /* 底線粗細，8px 會有點像螢光筆畫過去 */
  /* 漸層色：從主色 (不透明度 0.5) 漸變到完全透明 (0) */
  background: linear-gradient(to right, rgba(232, 122, 144, 0.5) 0%, rgba(232, 122, 144, 0) 100%);
  z-index: -1;            /* 把底線墊在文字正後方 */
  border-radius: 4px;     /* 讓線條邊緣圓潤一點 */
}

/* 外層容器置中 */
.custom-loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-spinner {
  width: 50px;
  height: 50px;
}

/* --- main-title 漣漪展開動畫 --- */
.anim-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  max-width: 0; /* 初始寬度為0，隱藏文字 */
  opacity: 0;   /* 初始透明度為0 */
  transition: max-width 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
              opacity 1.2s ease-out,
              transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 左邊文字初始往右微調，準備向左推開 */
.anim-text-left {
  transform: translateX(20px);
}

/* 右邊文字初始往左微調，準備向右推開 */
.anim-text-right {
  transform: translateX(-20px);
}

/* 觸發動畫後的最終狀態 */
.title-expanded .anim-text {
  max-width: 150px; /* 給予足夠的寬度容納文字 */
  opacity: 1;
  transform: translateX(0);
}

/* --- 方案一：全正數化完美動畫 --- */

/* 外圈動畫 */
.ring-anim {
  animation: dash-ring 2s linear infinite;
}
@keyframes dash-ring {
  /* 原本是 88 -> 0 -> -88，全部加上 176 */
  0% { stroke-dashoffset: 264; }
  50% { stroke-dashoffset: 176; }
  100% { stroke-dashoffset: 88; }
}

/* 小圓點透明度動畫 (沒有負數 Bug，維持原樣) */
.dot-anim {
  animation: fade-dot 2s linear infinite;
}
@keyframes fade-dot {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 波浪線動畫 */
.wave-anim {
  animation: dash-wave 2s linear infinite;
}
@keyframes dash-wave {
  /* 原本是 -19 -> 0 -> 19，全部加上 38 */
  0% { stroke-dashoffset: 19; }
  50% { stroke-dashoffset: 38; }
  100% { stroke-dashoffset: 57; }
}

.announcement-card {
  perspective: 1000px;
  margin-bottom: 15px;
  background: transparent !important;
  cursor: pointer;
}

/* --- AI 小助手浮動泡泡 --- */
.ai-chat-bubble {
  position: fixed;
  /* 請根據您右下角 AI CHAT 按鈕的實際位置微調 bottom 與 right */
  bottom: 35px; 
  right: 90px; 
  
  /* 品牌漸層與視覺設計 */
  background: linear-gradient(135deg, #F4A7B9 0%, #E87A90 100%);
  color: white;
  padding: 5px 10px;
  /* 創造對話泡泡形狀：左上、右上、左下圓角，右下直角 */
  border-radius: 20px; 
  box-shadow: 0 4px 12px rgba(232, 122, 144, 0.4);
  font-weight: bold;
  font-size: 0.95em;
  letter-spacing: 1px;
  z-index: 9999;
  cursor: pointer;
  position: fixed;
  /* 預設隱藏狀態與平滑動畫 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none; /* 隱藏時不可被點擊 */
}


/* 顯示時的狀態 */
.ai-chat-bubble.show-bubble {
  opacity: 0.9;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 泡泡懸停時的微動回饋 */
.ai-chat-bubble:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 15px rgba(232, 122, 144, 0.5);
}

.location-link {
  /* 初始狀態：隱形但保留原本排版空間 */
  opacity: 0;
  transform: translateY(-20px); /* 初始位置偏上，準備由上往下淡入 */
  
  /* 設定平滑動畫時間與動態曲線 */
  transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  
  /* 隱形時，防止使用者誤點擊到綁定的 openDeviceMap 事件 */
  pointer-events: none; 
}

/* 當被觸發加上 .show-location 類別時的最終狀態 */
.location-link.show-location {
  opacity: 1;
  transform: translateY(0); /* 回到原本的位置 */
  pointer-events: auto;     /* 恢復可以點擊點開地圖 */
}

#menu-icon .menu-line {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* 固定每條線的旋轉中心點在自己身上的正中央 (X=12, Y=線的高度) */
#menu-icon .top    { transform-origin: 12px 6px; }
#menu-icon .middle { transform-origin: 12px 12px; }
#menu-icon .bottom { transform-origin: 12px 18px; }

/* 當 SVG 獲得 .active class 時，觸發變形變成 X */
#menu-icon.active .top {
  /* 往下位移到中間，並順時針轉 45 度 */
  transform: translate(0, 6px) rotate(45deg);
}

#menu-icon.active .middle {
  /* 中間的線淡出消失 */
  opacity: 0;
}

#menu-icon.active .bottom {
  /* 往上位移到中間，並逆時針轉 45 度 */
  transform: translate(0, -6px) rotate(-45deg);
}

/* 圓圈計時器主容器 */
.countdown-timer.circle-theme {
  display: flex;
  justify-content: center;
  gap: 10px;
  background: transparent;
}

/* 單個圈圈的容器 */
.cd-item {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG 畫布：轉向讓起點在正上方(12點鐘)，並水平翻轉達成逆時針縮退 */
.cd-svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg) scaleX(1);
}

/* 底部灰色底圈 */
.cd-bg {
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 5;
}

/* 動態進度圈 */
.cd-ring {
  fill: none;
  stroke: #E87A90; /* 您的品牌粉色 */
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 163.36; /* 2 * Math.PI * 26 (半徑) */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}

/* 內部文字區塊 */
.cd-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 數字樣式 */
.cd-text span {
  font-family: 'Play', Courier, monospace;
  font-size: 1.3rem;
  color: #E87A90;
  line-height: 1;
}

/* 底部 DAY/HOUR/MIN 樣式 */
.cd-text small {
  font-size: 0.65rem;
  color: #d14d72;
  font-weight: bold;
}