#custom-lightbox {
		display: none;
	}
	#custom-lightbox.active {
		display: flex !important;
	}
	.lightbox-overlay {
		position: fixed;         /* 鎖定在螢幕畫面上，滾動網頁也不會移位 */
		top: 0;
		left: 0;
		width: 100vw;            /* 滿版寬度 */
		height: 100vh;           /* 滿版高度 */
		background-color: rgba(0, 0, 0, 0.6); /* 黑色背景，0.6 是透明度（可自己調深淺） */
		z-index: 9999;           /* 數字設極大，確保它絕對壓在網頁所有東西的最上層 */
		
		/* 讓裡面的貓咪對話框絕對置中 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.alert-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 350px;            /* 稍微加寬一點點，留出邊距給內部元件排版 */
		margin: 50px auto;       /* 讓整個對話框在網頁畫面正中間顯示 */
		font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif; /* 套用好看的黑體字 */
	}

	/* 貓咪去背圖：利用負的 margin-bottom 強行往下拉 16px，壓在白色框框上 */
	.alert-cat {
		width: 200px;            /* 照著 Figma 框框的寬度 */
		height: auto;
		z-index: 2;              /* 層級設為 2，確保貓咪的手絕對扣在最前面 */
		margin-bottom: -18px;    /* 【核心魔法】負邊距，把貓咪往下拉 */
	}
	.alert-cat.duplication {
		margin-bottom: -50px;    /* 【核心魔法】負邊距，把貓咪往下拉 */
	}
	.alert-cat.error {
		margin-bottom: -130px;    /* 【核心魔法】負邊距，把貓咪往下拉 */
		z-index: -1;
	}
	/* ==========================================
	   2. 白色圓角對話框本體
	   ========================================== */
	.alert-box {
		background: #ffffff;
		border: 1.5px solid #dcdcdc; /* 微弱的灰色邊框（照設計圖的質感） */
		border-radius: 16px;         /* 完美的圓角矩形 */
		padding: 36px 20px 24px 20px;/* 上方留多一點空間(36px)給貓咪手壓著，左右和下方正常留白 */
		width: 300px;                /* 嚴格對齊 Figma 寬度 */
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 淡淡的陰影，讓對話框立體浮起來 */
		z-index: 1;                  /* 層級設為 1，乖乖待在貓咪下方 */
		text-align: center;          /* 讓裡面所有文字、按鈕全部置中 */
	}
	.alert-icon img {
		width: 80px;
	}
	/* 標題字 */
	.alert-title {
		color: #f16321;          /* 橘紅色 */
		font-size: 19px;
		font-weight: 700;        /* 粗體 */
		margin: 0 0 12px 0;      /* 調整下方間距 */
	}
	.alert-title.error {
		color: #ea1f27;
	}
	/* 內文說明字 */
	.alert-desc {
		color: #979797;          /* 深灰色 */
		font-size: 15px;
		font-weight: 400;
		line-height: 1.6;        /* 設定行高，讓字體不會擠在一起 */
		margin: 0 0 20px 0;      /* 調整與下方按鈕的距離 */
	}
	/* ==========================================
	   4. 按鈕區公用樣式與個別樣式
	   ========================================== */
	.alert-btn-group {
		display: flex;
		flex-direction: column;  /* 讓兩顆按鈕上下排 */
		gap: 10px;               /* 按鈕跟按鈕之間的精準間距 */
	}
	/* 兩顆按鈕的共通骨架 */
	.action-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		border: none;
		border-radius: 6px;      /* 按鈕的小圓角 */
		cursor: pointer;
		width: 180px;
		margin: 0 auto 0;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		transition: background 0.2s ease; /* 滑鼠移上去時的平滑變色特效 */
	}
	/* 按鈕內的文字 */
	.btn-text {
		color: #ffffff;
		font-size: 13px;
		font-weight: 700;
		width: 90px;
	}
	/* 按鈕內的小圖標 */
	.btn-icon {
		width: 16px;
		height: 16px;
	}
	/* 按鈕內的中間分隔線 | */
	.divider {
		color: rgba(255, 255, 255, 0.4);
		margin: 0 8px;
		font-size: 12px;
	}
	.orange-btn {
		background: #f16321;
	}
	.orange-btn:hover {
		background: #d85727;
	}
	
/* ==========================================
   1. 外層容器：讓三個按鈕自動並排與置中
   ========================================== */
.menu-container {
  display: flex;
  justify-content: center; /* 讓按鈕在畫面上置中 */
  gap: 18px;               /* 按鈕與按鈕之間的間距，可依畫面微調 */
  padding: 20px 10px;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================
   2. 單個白色正方形按鈕本體
   ========================================== */
.menu-btn {
  display: flex;
  flex-direction: column;    /* 讓 Icon 和文字上下排列 */
  align-items: center;       /* 水平置中 */
  justify-content: center;   /* 垂直置中 */
  
  /* 照圖上的完美正方形比例 */
  width: 100px;               /* 寬度，可依據 Figma 實際大小修改 */
  height: 100px;              /* 高度保持跟寬度一樣 */
  
  transition: transform 0.15s ease, box-shadow 0.15s ease; /* 點擊特效的平滑度 */
}

/* ==========================================
   3. 按鈕內部元件（Icon 與文字）
   ========================================== */
/* 橘色小圖標 */
.menu-icon {
  width: 100%;
  height: 100%;
  margin-bottom: 8px;        /* Icon 和底下文字的間距 */
  object-fit: contain;
}

/* 底下橘色文字 */
.menu-text {
  color: #f16321;            /* 完美的碩騰橘色碼 */
  font-size: 13px;
  font-weight: 700;          /* 粗體 */
  letter-spacing: 0.5px;     /* 微調字距讓排版更好看 */
  font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;
}




/* ==========================================
   1. 主卡片外框（包含圓角、陰影與寬度限制）
   ========================================== */
.main-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;       /* 卡片整體的柔和圓角 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* 淡淡的卡片陰影 */
  margin: 0px auto 20px;         /* 讓卡片在畫面上置中 */
  overflow: hidden;          /* 【核心】確保上方圖片的邊角也會被卡片的圓角裁切，不露邊 */
  font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;
}

.main-card2 {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;       /* 卡片整體的柔和圓角 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* 原本淡淡的卡片陰影，不需修改 */
  margin: 0px auto 20px;       /* 讓卡片在畫面上置中 */
  
  /* 💡 【核心】裁切邊界。確保上方圖片的邊角會被圓角裁切。 
     同時，它也為下面的 clip-path 創造了基礎條件。 */
  overflow: hidden;          

  font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;

  /* ========================================================= */
  /* 💡 2. 關鍵：利用 clip-path 把卡片上方的陰影切掉 */
  /* ========================================================= */
  
  /* inset(上 右 下 左)。數值可以是負數。
     這裡的意思是：從卡片上邊界向下切 0px（完全不保留上方的任何東西，包括陰影），
     但左右和下方都往外「擴張」一個足夠大的負值（這裡用 -100px），
     確保左右和下方的陰影能完全顯示出來不被切到。 */
  clip-path: inset(0px -100px -100px -100px); 

  /* 注意事項：使用了 clip-path 之後，原本卡片上方的「破格圖片」如果有部分超出卡片範圍，
     會因為這個 clip-path(0px ...) 而被硬生生切平在卡片上邊緣。
     
     💡 如果你希望「圖能超出卡片上邊緣，但卡片邊緣沒陰影」，你需要將卡片內容（包括圖）移出這個 .main-card，
        或者用另一個容器來包裹陰影。但這會變得很複雜。
        
     ✅ 最簡單且符合大多數此情境的解法是：
        確保你的「破格圖片」本身最上方就有足夠的留白（或是本身就是透明底圖），
        並且透過 CSS padding 把卡片內容往下推，讓圖片在 .main-card 的 overflow: hidden 範圍內看起來像是「超出」。
        或者，採用最乾淨的方法：將陰影做在「內容容器」上，而不是包裹整個卡片的容器上。
  */
}
/* ==========================================
   2. 上半部 Banner 圖片
   ========================================== */
.card-banner {
  width: 100%;               /* 強制圖片填滿卡片寬度 */
  height: auto;              /* 高度依比例縮放 */
  display: block;            /* 消除圖片下方預設的微小空白間隙 */
}

/* ==========================================
   3. 下半部內容白底區
   ========================================== */
.card-content {
  padding: 24px 20px;        /* 內部留白 */
  text-align: left;          /* 文字預設靠左對齊 */
}

/* 頂部灰色小字 */
.sub-title {
  color: #8c8c8c;
  font-size: 13px;
  margin: 0 0 16px 0;
}

/* ==========================================
   4. 點數顯示橫帶（左右排列）
   ========================================== */
.points-row {
  display: flex;
  justify-content: space-between; /* 標題靠左，點數靠右 */
  align-items: center;            /* 垂直置中 */
  margin-bottom: 20px;
  position: relative;
}

/* 點數左邊的咖啡色字體 */
.points-label {
  color: #7a3e19;                 /* 深咖啡色，對齊設計圖 */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* 點數數字與單位的組合 */
.points-value {
  display: flex;
  align-items: baseline;          /* 讓數字底線跟「點」的底線對齊 */
}

/* 大大的橘色 0 */
.points-value .num {
  color: #f16321;                 /* 碩騰橘 */
  font-size: 64px;                /* 大數字尺寸 */
  font-weight: 700;
  line-height: 1;                 /* 緊縮行高，避免撐開上下間距 */
  margin-right: 4px;
}

/* 點數右邊的「點」字 */
.points-value .unit {
  color: #7a3e19;                 /* 深咖啡色 */
  font-size: 16px;
  font-weight: 700;
}

/* ==========================================
   5. 分隔線與底部說明文字
   ========================================== */
/* 灰色細分隔線 */
.card-divider {
  border: none;
  border-top: 1px solid #dcdcdc;
  margin: 0 0 20px 0;
}

/* 底部說明文字 */
.card-footer-text {
  color: #666666;
  font-size: 13px;
  line-height: 1.6;
}

.card-footer-text p {
  margin: 0 0 4px 0;              /* 段落之間的微小間距 */
}

/* 橘色超連結 */
.orange-link {
  color: #f16321;
  text-decoration: underline;    /* 帶有底線 */
  font-weight: 700;
}

/* ==========================================
   點數統計面板外框
   ========================================== */
.summary-panel-container {
  display: flex;
  align-items: center;       /* 垂直居中 */
  justify-content: space-between; /* 三等分均勻分佈 */
  background-color: #ffffff;
  border: 1.5px solid #e8e8e8; /* 微弱的淺灰色外框 */
  border-radius: 16px;       /* 圖中的圓角矩形外觀 */
  padding: 16px 12px;        /* 上下與左右的留白 */
  width: 100%;
  max-width: 340px;          /* 限制最大寬度，對齊主卡片 */
  margin: 15px auto;         /* 畫面上置中 */
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* 淡淡的底襯陰影 */
  font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;
}

/* ==========================================
   單個統計項目元件
   ========================================== */
.summary-panel-item {
  display: flex;
  flex-direction: column;    /* 讓項目名稱與數字上下排列 */
  align-items: center;       /* 水平置中 */
  flex: 1;                   /* 【核心】三欄等寬分配 */
}

/* 項目上方的小字標題 */
.summary-panel-label {
  color: #8c8c8c;            /* 淺灰色字 */
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 6px;        /* 與下方點數數字的間距 */
}

/* 項目下方的點數文字共通樣式 */
.summary-panel-value {
  font-size: 16px;
  font-weight: 700;          /* 粗體數字 */
}

/* ==========================================
   三個欄位各自的顏色狀態
   ========================================== */
/* 狀態：本月累積（綠色） */
.summary-panel-value.status-add {
  color: #52c41a;            
}

/* 狀態：本月使用（紅色/深粉） */
.summary-panel-value.status-sub {
  color: #ff4d4f;            
}

/* 狀態：目前可用（全新指定橘色） */
.summary-panel-value.status-current {
  color: #f16321;            /* 完美套用新主色 */
}

/* ==========================================
   中間的垂直細分隔線
   ========================================== */
.summary-panel-divider {
  width: 1px;
  height: 28px;              /* 分隔線高度（不撐滿，維持圖中的精緻感） */
  background-color: #dcdcdc; /* 淺灰色線條 */
  flex-shrink: 0;            /* 防止分隔線被擠壓變形 */
}


/* ==========================================
   使用紀錄主面板
   ========================================== */
.history-panel {
  width: 100%;
  max-width: 340px;          /* 對齊主卡片寬度 */
  background-color: #ffffff;
  margin: 20px auto;
  box-sizing: border-box;
  font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;
}

/* ==========================================
   頂部標題列（左右並排）
   ========================================== */
.history-header {
  display: flex;
  justify-content: space-between; /* 標題靠左，排序提示靠右 */
  align-items: center;            /* 垂直置中 */
  padding: 0 5px 12px 5px;
}

/* 左側標題與圖標 */
.history-title {
  display: flex;
  align-items: center;
  color: #f16321;                 /* 完美套用指定新主色 */
  font-size: 16px;
  font-weight: 700;
}

.history-title-icon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

/* 右側排序字樣 */
.history-sort {
  color: #a0a0a0;
  font-size: 12px;
}

/* ==========================================
   列表清單本體
   ========================================== */
.history-list {
  list-style: none;               /* 移除預設的點點 */
  padding: 0;
  margin: 0;
}

/* 單條紀錄橫帶（Flex 左右並排） */
.history-item {
  display: flex;
  justify-content: space-between; /* 左邊文字與右邊點數推至兩端 */
  align-items: center;            /* 垂直置中 */
  padding: 12px 5px;
  border-bottom: 1px solid #e8e8e8; /* 每一項底部的灰色細分隔線 */
}

/* 移除最後一項的底線，避免畫面突兀 */
.history-item:last-child {
  border-bottom: none;
}

/* 左側文字包裝區（上下排列） */
.history-info {
  display: flex;
  flex-direction: column;
  gap: 4px;                       /* 名稱與日期的微小間距 */
  text-align: left;
}

/* 紀錄名稱 */
.history-name {
  color: #555555;                 /* 深灰偏黑 */
  font-size: 14px;
  font-weight: 500;
}

/* 紀錄日期 */
.history-date {
  color: #b0b0b0;                 /* 淺灰色 */
  font-size: 12px;
}

/* 右側點數共通樣式 */
.history-points {
  font-size: 16px;
  font-weight: 500;
}

/* 狀態：扣點（深灰色，對齊設計圖質感） */
.history-points.cost-negative {
  color: #4a4a4a;
}

/* 狀態：得點（套用亮橘新主色，讓加點變明顯） */
.history-points.cost-positive {
  color: #f16321;
}


/* ==========================================
   全域容器與頁籤設定
   ========================================== */
.lobby-wrapper {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
  font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", sans-serif;
}

/* ==========================================================
   5. 大類別 Tabs 樣式 (最上方直接換、立即抽、月月抽)
   ========================================================== */
/* ==========================================================
   5. 大類別 Tabs 樣式 (最上方直接換、立即抽、月月抽)
   ========================================================== */
.lobby-category-tabs {
    display: flex;
    background: #f5f5f5;
    overflow: visible; 
    margin-bottom: 25px;
	box-shadow: 0 20px 25px rgba(241,90,36,0.45);
}

.lobby-tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(180deg, #f47443 0%, #f15a24 100%);
	opacity: 0.5;
    cursor: pointer;
    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    
    position: relative;
	border-radius: 12px 12px 0 0;
	margin: 0 0.4px;
}

/* 作用中的 Tab */
.lobby-tab-item.active {
	opacity: 1;
}

/* 預設沒選中時的圖片樣式（可依需求調整寬高） */
.lobby-tab-coin {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* 💡 當父層被選中時，自動切換為選中圖 */
.lobby-point-btn.active .lobby-tab-coin {
    content: url('/images/point/icon_coin_active.png');
}

/* 📐 下方尖角：因為外層變更為 overflow: visible，現在它可以順利現形了！ */
.lobby-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -8px; /* 往下頂出邊框 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #f15a24 transparent transparent transparent;
    z-index: 5; /* 確保尖角蓋在下方內容物之上 */
}

.lobby-tab-item img {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}
/* ==========================================================
   6. 點數篩選列樣式 (圖2 選擇點數)
   ========================================================== */
.lobby-point-filter-bar {
    /*background: #f9f9f9;*/
    padding: 12px;
    margin-bottom: 15px;
}
.lobby-point-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}
.lobby-point-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}
.lobby-point-btn {
    flex: 1;
    min-width: 70px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 8px 0;
    text-align: center;
    cursor: pointer;
}
.lobby-point-btn.active {
    border-color: #f15a24;
    color: #f15a24;
    font-weight: bold;
}
.lobby-point-btn img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 2px;
}

.lobby-tabs-title {
  color: #a0a0a0;
  font-size: 13px;
  text-align: left;
  margin-bottom: 8px;
}

.lobby-tabs-container {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

/* 頁籤選中狀態：完美的指定橘色外框 #f16321 */
.lobby-tab-item.lobby-active {
  border-color: #f16321;
}

.lobby-tab-text {
  font-size: 13px;
  font-weight: 700;
  color: #555555;
  margin-top: 4px;
}

.lobby-tab-item.lobby-active .lobby-tab-text {
  color: #f16321; /* 選中時字體也變橘 */
}

/* ==========================================
   大卡片元件 (核心排版)
   ========================================== */
.lobby-card-list {
  display: flex;
  flex-direction: column;
  gap: 35px; /* 卡片與卡片之間的上下間距，留空間給標籤 */
  margin-bottom: 25px;
  box-shadow: 1px 4px 10px rgba(0,0,0,0.15);
  border-radius: 15px;
}

.lobby-prize-card {
  position: relative; /* 💡 讓左上角標籤可以定位 */
  width: 100%;
}

/* 左上角橘色大標籤 */
.lobby-card-badge {
  position: absolute;
  top: -14px;        /* 往上飄移出框線 */
  left: -4px;         /* 往左微調對齊外框陰影 */
  background-color: #f16321; /* 完美套用指定橘色 */
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 10px;
  z-index: 2;         /* 確保壓在最上方 */
  box-shadow: 0 2px 6px rgba(241, 99, 33, 0.3);
}

/* 卡片白色內襯與橘色內框 */
.lobby-card-body {
  background-color: #ffffff;
  border: 1.5px solid #f16321; /* 內層細橘框線 */
  border-radius: 16px;
  padding: 24px 14px 14px 14px; /* 上方留多一點空隙給標籤壓 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 外部大陰影 */
  box-sizing: border-box;
}

/* 卡片內部的主圖 */
.lobby-card-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin-bottom: 14px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

/* ==========================================
   卡片下方雙按鈕控制
   ========================================== */
.lobby-btn-row {
  display: flex;
  gap: 12px;
}

.lobby-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
}

/* 樣式 A：白底橘字框按鈕 */
.btn-outline {
  background-color: #ffffff;
  border: 1.5px solid #e8e8e8;
  color: #f16321;
}

/* 樣式 B：橘底白字實心按鈕 */
.btn-solid {
  background-color: #f16321;
  color: #ffffff;
}
.btn-solid2 {
  background-color: #ffffff;
  border: 1.5px solid #f16321;
  color: #f16321;
}

.lobby-btn:active {
  transform: scale(0.98);
}

/* ==========================================
   底部：月月抽面板
   ========================================== */
.lobby-monthly-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 讓「活動詳情」貼齊右下角 */
  background-color: #ffffff;
  border: 1.5px solid #e8e8e8;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-align: left;
}

.lobby-monthly-content {
  flex: 1;
}

.lobby-monthly-title {
  color: #f16321;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.lobby-monthly-desc {
  color: #8c8c8c;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

/* 右下角活動詳情超連結 */
.lobby-monthly-link {
  color: #f16321;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 10px;
}

/* 月月抽橘色大標題 */
.detail-header-bar {
    background: linear-gradient(180deg, #f37032, #f15a24);
    color: white;
    text-align: center;
    padding: 12px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px 12px 0 0;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
	text-shadow: 
        -1.5px -1.5px 0 #f15a24,  1.5px -1.5px 0 #f15a24, -1.5px  1.5px 0 #f15a24,  1.5px  1.5px 0 #f15a24,
        -1.5px  0px   0 #f15a24,  1.5px  0px   0 #f15a24,  0px -1.5px 0 #f15a24,  0px  1.5px 0 #f15a24,
        2px 3px 4px rgba(0, 0, 0, 0.3);
}
.monthly-intro-title {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #686868;
    margin: 0 auto;
    border-bottom: 4px solid #f15a24; 
	width: 85%;
}
/* 灰色說明的區塊 */
.monthly-rule-box {
    background: linear-gradient(180deg, #f5f5f5, #eaeaea);
    border: 1px solid #ddd;
    border-radius: 0px;
    padding: 15px;
    text-align: center;
    color: #686868;
    font-size: 14px;
    line-height: 1.5;
	width: 85%;
	margin: 0 auto;
}
.monthly-rule-box p {
	margin-bottom: auto;
}
.monthly-rule-box strong { color: #f15a24; }
.monthly-draw-container .dotted-line {
    border-top: 1px dotted #f15a24;
    margin: 0 auto;
	width: 85%;
}
.monthly-counter-label {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #686868;
    margin: 15px 0 10px 0;
}
.monthly-counter-label span {
    color: #f15a24;
    font-size: 20px;
}
.monthly-action-row {
	margin: 10px auto;
}
.monthly-footer-notes {
	font-size: 15px;
}

.monthly-stepper-container {
    width: 85%;              /* 💡 寬度 85% */
    margin: 20px auto 20px auto; /* 💡 上下留點距離，左右 auto 置中 */
    
    border: 1px solid #f15a24; /* 💡 正橘色框線 */
    border-radius: 16px;      /* 帶點圓角更像設計圖的卡片感 */
    padding: 20px 15px;       /* 內部留白，讓裡面的元素不會太擠 */
    background-color: #fff;   /* 背景白底 */
    
    /* 選擇性加入：讓這塊橘框卡片看起來有微立體的陰影感，不要的話可以刪掉 */
    box-shadow: 0 4px 12px rgba(241, 90, 36, 0.1); 
    
    /* 💡 防禦：確保裡面的元素垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 🔢 數量選擇器 (Stepper) */
.stepper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #e8e8e8;
    border-radius: 12px;
    padding: 4px;
    max-width: 260px;
    margin: 0 auto 20px auto;
    border: 1px solid #ccc;
}
.stepper-btn {
    width: 45px;
    height: 40px;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    color: #f15a24;
    cursor: pointer;
}
.stepper-btn:active { opacity: 0.6; }
.stepper-input {
    flex: 1;
    height: 40px;
	width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #f15a24;
    background: #e8e8e8;
    border: none;
    border-radius: 8px;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 適用於 Firefox */
.stepper-input {
    -moz-appearance: textfield;
}

/* 💡 確保文字百分之百死死鎖在正中間 */
.stepper-input {
    text-align: center;
    padding: 0; /* 預防有些瀏覽器預設內襯把字往左推 */
}

/* 底部警語 */
.monthly-footer-notes {
    font-size: 12px;
    color: #8c8c8c;
    line-height: 1.6;
    padding: 10px 15px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
}
.btn-detail-link { color: #f15a24; text-decoration: underline; }




/* ==========================================================
   1. 全螢幕背景遮罩 (Overlay)
   ========================================================== */
.lottery-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* 深色半透明背景 */
    backdrop-filter: blur(4px);            /* 現代感毛玻璃效果 */
    z-index: 9999;                         /* 確保壓在最上層 */
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

/* 右上角關閉按鈕 (✕) */
.lottery-popup-overlay .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    z-index: 10;
}
.lottery-popup-overlay .close-btn:hover {
    color: #fff;
}



/* ==========================================================
   2. 圖 1 & 圖 2：置底抽獎面板 (高度自動，不頂天)
   ========================================================== */
/* ==========================================================
   1. 遮罩與佈局底層 (防全螢幕拉伸)
   ========================================================== */
.lottery-popup-overlay.align-bottom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* ==========================================================
   2. 核心大魔王：九宮格 RWD 放射光芒面板外殼
   ========================================================== */
.lottery-panel-bottom-rwd {
    margin-top: auto; /* 強制置底 */
    width: 100%;
    max-width: 450px; 
    height: auto !important;
    min-height: 520px; /* 根據底圖比例給予保底高度 */
    
    /* 💡 改為背景圖滿寬，且高度顯示中間 */
    background-image: url('/images/point/lottery_bg.png?1');
    background-repeat: no-repeat;
    background-size: cover;       /* 確保背景圖縮放至完全覆蓋容器（滿寬滿高） */
    background-position: center;   /* 確保高度與寬度都從正中間顯示，裁切四周 */
    
    /* 移除原本的 border-image 相關設定 */
    border: none; 
    
    /* 調整內距：因為移除了 border-width，原本的內容可能會太貼邊，
       建議將原本的 padding 加上原本 border-width 的厚度，以維持內容安全區域 */
    padding: 50px 40px 45px 40px; 
    /* 計算方式（可依畫面調整）：
       上 padding = 原 10px + 原 border-top 40px = 50px
       左右 padding = 原 10px + 原 border-left/right 30px = 40px
       下 padding = 原 25px + 原 border-bottom 20px = 45px */
    
    text-align: center;
    box-sizing: border-box;
    position: relative;
    animation: slideUpFromBottom 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 8. 右上角關閉按鈕 */
.close-btn-circle {
    position: absolute;
    top: 0px; /* 往上推飄在面板外緣 */
    right: 0px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.25);
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    line-height: 29px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* ==========================================================
   3. 內層文字與標題組件 (純 CSS)
   ========================================================== */
/* 2. 寵愛集點四個圓圈 */
.css-title-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0px 0 12px 0;
    transform: rotate(-1deg); /* 微幅傾斜更有動感 */
}
.css-title-badges span {
    width: 42px;
    height: 42px;
    background: linear-gradient(180deg, #ff8000, #ff4000);
    border: 2px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    line-height: 38px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 3. 抽獎白色大圓角長條 */
.css-activity-bar {
    position: relative; /* 💡 確保內部絕對定位的「抽」能以此為基準 */
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border-radius: 50px;
    
    /* 💡 左側內距改為「抽」字圓標的總寬度(含外圈或微調間距)，右側保持原樣 */
    padding: 6px 34px 6px 52px; 
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 10px;
    height: 40px; /* 💡 建議固定高度，讓內部圓標更好置中 */
    box-sizing: border-box;
}
/* 「抽」字圓標 */
.css-activity-bar .action-tag {
    position: absolute; /* 💡 絕對定位，直接切齊最左邊 */
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 💡 垂直完美置中 */
    
    width: 40px;  /* 💡 讓高寬與白框的高度一致，就能完美塞滿上下邊界 */
    height: 40px; 
    background: #e1552a; /* 調整為接近圖中的橘紅色 */
    color: #ffffff;
    border-radius: 50%;
    font-weight: bold;
    font-size: 15px;
    
    /* 💡 文字置中修正 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0; /* 移除原本的 margin */

    /* ─── 核心修改：新增白圈效果 ─── */
    box-sizing: border-box; /* 確保 border 不會撐大 40px 的寬高 */
    border: 2px solid #ffffff; /* 最外層的白線 */
    box-shadow: inset 0 0 0 1px #e1552a, /* 內縮一層橘色間隔 (寬度 1px) */
                inset 0 0 0 2px #ffffff; /* 最內層的白線 (寬度 1px，累計投影半徑需設為 2px) */
}
.css-activity-bar .action-text {
    font-size: 18px;
    font-weight: bold;
    color: #f16321;
}

/* 小標標準色字 */
.lottery-mini-subtitle {
    font-size: 14px;
    color: #f16321;
    margin: 0 0 5px 0;
    font-weight: 500;
}
/* 小標咖啡色字 */
.lottery-mini-subtext {
    font-size: 13px;
    color: #5c3a21; /* 優雅的深咖啡色，比黑色更能融入橘色底 */
    margin: 0 0 5px 0;
    font-weight: 500;
}

/* ==========================================================
   4. 卡牌滑動與可視區設定
   ========================================================== */
.card-selector-relative-zone {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}
/* 卡片可視範圍視窗 */
.card-viewport-zone {
    width: 240px; /* 💡 這是單張卡片展現的寬度，必須與下方的 min-width 一致 */
    overflow: hidden;
    position: relative;
}

/* 卡牌軌道 */
.card-track-zone {
    display: flex;
    /* 💡 移除任何可能干擾計算的 gap */
    gap: 0px !important; 
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 每一個卡牌單元外殼 */
.lottery-card-item {
    /* 💡 關鍵防禦：強制前、中、後每一格的佔位寬度死死固定在 240px，絕不隨RWD伸縮 */
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    
    filter: brightness(0.85) scale(0.9);
    transition: transform 0.3s, filter 0.3s;
}
.lottery-card-item.active {
    filter: brightness(1) scale(1);
}
.lottery-card-item img {
    width: 200px; /* 卡片實際寬 */
    height: auto;
    object-fit: contain;
}

/* 5. 左右切換圓圈按鈕 */
.arrow-circle-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #ffffff;
    border: 1.5px solid #f15a24;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 10;
}
.arrow-circle-btn:active { transform: translateY(-50%) scale(0.9); }
.arrow-circle-btn.prev { left: 25px; }
.arrow-circle-btn.next { right: 25px; }
.arrow-circle-btn svg { width: 22px; height: 22px; fill: #f15a24; }

/* ==========================================================
   5. 重疊大魔王：按鈕與去背貓手疊加
   ========================================================== */
.submit-button-overlap-container {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

/* 貓爪圖片定位：利用 z-index 浮在按鈕上面 */
.overlap-cat-hand {
    position: absolute;
    bottom: 55px;          /* 💡 微調這個值，控制貓爪扣在按鈕上的高度 */
    left: 50%;
    transform: translateX(-50%);
    width: 140px;         /* 根據你的貓爪圖比例縮放 */
    height: auto;
    z-index: 5;          /* 數字大於按鈕的 1 */
    pointer-events: none; /* 💡 關鍵：穿透點擊，按貓手依然能觸發按鈕點擊！ */
}

/* 7. 確定送出按鈕本體 */
.lottery-submit-orange-btn {
    position: relative;
    z-index: 1;          /* 低於貓爪的 5 */
    width: 100%;
    background: #ffffff;
    color: #f15a24;
    border: none;
    border-radius: 50px;
    padding: 14px 0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: background 0.2s;
}
.lottery-submit-orange-btn:active {
    background: #fff5f2;
}

/* 滑上來動畫 */
@keyframes slideUpFromBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* ==========================================================
   4. 圖 3 & 圖 4：置中結果視窗 (上下左右垂直置中)
   ========================================================== */
.lottery-popup-overlay.align-center {
    align-items: center; /* 💡 關鍵：螢幕正中央對齊（上下垂直置中） */
}

.popup-content-center {
    width: 88%;
    max-width: 380px;
    height: auto;        /* 💡 高度自動 */
    background: #fffbf7; /* 米白溫和底色 */
    border-radius: 24px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    
    /* 登場動畫：縮放淡入 */
    animation: popupScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 結果圖案 */
.popup-status-img {
    width: 120px;
    height: auto;
    margin-bottom: 15px;
}

/* 標題文字 */
.popup-content-center h2 {
    font-size: 22px;
    color: #e64a19;
    margin: 10px 0;
    font-weight: bold;
}

/* 說明文字 */
.popup-content-center p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 中獎序號顯示外框 */
.serial-display-box {
    background: #f1f1f1;
    border: 2px dashed #ff5500;
    padding: 10px;
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    color: #ff5500;
    border-radius: 8px;
    margin: 15px 0;
    letter-spacing: 1px;
}

/* ==========================================================
   5. 通用按鈕樣式
   ========================================================== */
/* 下方確定送出按鈕 (圖 1、2) */
.lottery-submit-btn {
    width: 80%;
    max-width: 280px;
    background: #ffffff;
    color: #e64a19;
    border: none;
    border-radius: 50px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
    margin-top: 10px;
}
.lottery-submit-btn:active {
    transform: scale(0.96);
}
.lottery-submit-btn:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
}

/* 返回按鈕 (圖 3、4) */
.popup-btn {
    width: 100%;
    max-width: 240px;
    background: linear-gradient(180deg, #ff7700, #e64a19);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(230, 74, 25, 0.3);
    margin-top: 15px;
    transition: transform 0.1s;
}
.popup-btn:active {
    transform: scale(0.97);
}

/* ==========================================================
   6. 登場動畫效果
   ========================================================== */
/* 由下往上滑入 */
@keyframes slideUpFromBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* 縮放彈入 */
@keyframes popupScaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}





/* 全螢幕背景遮罩（垂直置中） */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 對話框白底主本體 */
.custom-modal-card {
    position: relative;
    width: 85%;
    max-width: 360px; /* 控制跟設計圖差不多精緻的寬度 */
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    box-sizing: border-box;
    animation: modalScaleIn 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 右上角關閉 */
.modal-close-x {
    position: absolute;
    top: 15px;
    right: 18px;
    font-size: 18px;
    color: #999;
    cursor: pointer;
}

/* 1. Icon 區 */
.modal-icon-wrapper {
    margin-bottom: 15px;
}
.modal-icon-wrapper img {
    max-width: 65px; /* 依設計圖比例 */
    height: auto;
}

/* 2. 標題與文字區 */
.modal-main-title {
    font-size: 20px;
    color: #e64a19; /* 寵愛橘紅 */
    font-weight: bold;
    margin: 5px 0 10px 0;
}
.modal-main-title2 {
    font-size: 15px;
    font-weight: bold;
    margin: 5px 0 10px 0;
}
.modal-main-title2 .highlight {
	font-size: 20px;
	font-weight: bold;
	color: #f15a24;
}
.modal-sub-title {
    font-size: 15px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* 3. 中間橘色客製化區塊（第2種圖） */
.modal-custom-block {
    margin: 15px 0;
}
.inner-orange-box {
    background-color: #f15a24;
    border-radius: 12px;
    padding: 12px;
    color: #ffffff;
}
.inner-orange-box .box-tag {
    display: inline-block;
    font-size: 12px;
    background: rgba(255,255,255,0.3);
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}
.inner-orange-box .box-text {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
}

/* 4. 小說明反灰字 */
.modal-mini-notice {
    font-size: 12px;
    color: #999999;
    margin: 10px 0;
}

/* 5. 按鈕群組與變化排版 */
.modal-btn-group {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    width: 100%;
}

/* 💡 橫排按鈕樣式 */
.modal-btn-group.row-layout {
    flex-direction: row;
}
.modal-btn-group.row-layout .modal-btn {
    flex: 1; /* 平分寬度 */
}

/* 💡 直排按鈕樣式 */
.modal-btn-group.column-layout {
    flex-direction: column;
}
.modal-btn-group.column-layout .modal-btn {
    width: 100%; /* 各自佔滿 100% */
}

/* 按鈕基底樣式 */
.modal-btn {
    border-radius: 8px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    transition: transform 0.1s;
}
.modal-btn:active {
    transform: scale(0.97);
}

/* 橘紅實心按鈕 */
.btn-primary {
    background: #f15a24;
    color: #ffffff;
}
/* 圓角白底線條按鈕 */
.btn-secondary {
    background: #ffffff;
    color: #f15a24;
    border: 1px solid #f15a24;
}

/* 登場動畫 */
@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}




/* ==========================================================
   1. 結果彈窗置底外殼
   ========================================================== */
.result-panel-bottom {
    margin-top: auto; /* 強制擠到最底 */
    width: 100%;
    max-width: 450px;
    height: 520px;   /* 💡 固定高度，與背景圖比例吻合 */
    
    /* 💡 核心：滿版放射光芒＋斜邊底圖，靠底置中自然裁切 */
    background-image: url('/images/point/bg_win_box.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    
    /* 內部白卡片垂直居中排版 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    
    /* 滑上來動畫 */
    animation: slideUpResult 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.result-panel-bottom.lose {
	background-image: url('/images/point/bg_lose_box.png');
    min-height: 560px; /* 根據底圖比例給予保底高度 */
}

/* ==========================================================
   2. 中間白色浮空卡片
   ========================================================== */
.result-white-card {
    width: 82%;
    max-width: 300px;
    background: #ffffff;
    border-radius: 24px;
    padding: 25px 20px;
    text-align: center;
    box-sizing: border-box;
    
    /* 精緻的大範圍立體陰影 */
    box-shadow: 0 10px 30px rgba(224, 86, 36, 0.3); 
}

/* ==========================================================
   3. 插圖與文字樣式控管
   ========================================================== */
.result-illustration {
    margin-bottom: 12px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.result-illustration img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* 4. 主標題 */
.result-main-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
}
.result-sub-title {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
	color: #e65100;
}
/* 主標題顏色分流 */
.result-main-title.win-color { color: #d32f2f; }  /* 中獎紅 */
.result-main-title.lose-color { color: #e65100; } /* 沒中橘 */

/* 內文 */
.result-body-text {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 0 0 10px 0;
    font-weight: 500;
}

/* 備註小字 */
.result-mini-note {
    font-size: 11px;
    color: #ff6d00;
    margin: 0 0 18px 0;
    font-weight: bold;
}

/* ==========================================================
   5. 橘色立體漸層按鈕
   ========================================================== */
.result-submit-gradient-btn {
    width: 100%;
    max-width: 240px;
    /* 💡 還原設計圖的精緻上下漸層 */
    background: linear-gradient(180deg, #f17135 0%, #e04a19 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 12px 0;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(224, 74, 25, 0.4);
    transition: transform 0.1s, opacity 0.2s;
}
.result-submit-gradient-btn:active {
    transform: scale(0.98);
    opacity: 0.95;
}

@keyframes slideUpResult {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.result-month-area {
    display: inline-block; /* 💡 改為行內區塊 */
    text-align: center;
    
    padding: 10px;         
    background-color: #ffffff;  
    border: 1.5px solid #ffca99; 
    border-radius: 24px;        
    box-shadow: 0 4px 10px rgba(255, 153, 51, 0.15);
	margin-bottom: 5px;
    
    color: #d96a2b;             
    font-size: 13px;
    font-weight: bold;
}

.result-month-area .number-badge {
    display: inline-block; /* 💡 改為行內區塊 */
    vertical-align: middle; /* 💡 修正微調文字垂直置中 */
    
    background-color: #fff1dc;  
    color: #d96a2b;             
    font-size: 13px;            
    font-weight: 900;           
    
    padding: 2px 12px;          
    border-radius: 12px;        
    margin: 0 4px;
}



/* 預設所有卡牌（包含中間正的那張） */
.card-swiper .swiper-slide {
    width: 300px; /* 依設計調整 */
    height: 260px;
    transition: transform 0.3s ease, z-index 0.3s ease; /* 💡 讓換牌時的旋轉帶有滑順動畫 */
    transform-origin: center bottom; /* 💡 設定旋轉支點在卡牌「底部中心」，倒起來最像扇形 */
    z-index: 1;
	opacity: 0;
}
.card-swiper .swiper-slide img {
	width: 145px;
}

/* 🟢 中間正的那張 (Active) */
.card-swiper .swiper-slide-active {
    transform: rotate(0deg) scale(1); /* 完全端正，不放大也不旋轉 */
    z-index: 10; /* 確保主牌壓在最上面 */
	opacity: 1;
}
.card-swiper .swiper-slide-prev {
    z-index: 5;
	opacity: 1;
}
.card-swiper .swiper-slide-prev img {
    transform: rotate(-20deg); /* 💡 負數 = 向左傾斜 30 度 */
}
.card-swiper .swiper-slide-next {
    z-index: 5;
	opacity: 1;
}
.card-swiper .swiper-slide-next img {
    transform: rotate(20deg);  /* 💡 正數 = 向右傾斜 30 度 */
}







/* ==========================================================
   1. 背景灰底遮罩 (Overlay)
   ========================================================== */
.detail-page-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 灰底遮罩 */
    z-index: 99998; /* 確保在最上層，但低於內頁主體 */
    display: none; /* 預設隱藏，由 JS 控制 fadeIn */
}

/* ==========================================================
   2. 置底抽屜主體 (Bottom Sheet)
   ========================================================== */
.detail-page-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80vh; /* 💡 核心：精準限制高度為瀏覽器高度的 75% */
    background: #fff;
    border-radius: 20px 20px 0 0; /* 上方左右兩角做圓弧，比較美觀 */
    box-shadow: 0 -5px 25px rgba(0,0,0,0.15);
    z-index: 99999; /* 確保在遮罩之上 */
    box-sizing: border-box;
    text-align: left;
    display: none; /* 預設隱藏，由 JS 控制 slideIn / fadeIn */
    
    /* 💡 重點：利用 flex 佈局把「內容區」和「底部按鈕」分開 */
    display: flex;
    flex-direction: column; 
}

/* ==========================================================
   3. 內捲軸內容區 (可滾動範圍)
   ========================================================== */
.detail-page-scroll-content {
    flex: 1; /* 自動吃滿除按鈕外的剩餘高度 */
    overflow-y: auto; /* 💡 核心：字數太多時自動產生內部獨立捲軸 */
    padding: 20px 15px 40px 15px; /* 下方留空，防止內容被底部按鈕貼死 */
    -webkit-overflow-scrolling: touch; /* 讓手機版滾動更滑順 */
}

/* 關閉按鈕（取代原本的返回鍵） */
.btn-close-sheet {
    z-index: 10;
    cursor: pointer;
	margin: 15px 0 0 15px;
}

/* ==========================================================
   4. 原本的內頁元素微調
   ========================================================== */
.gift-main-img-box {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.gift-main-img-box .gift-img {
    width: 100%;
    height: auto;
    display: block;
}
.point-badge {
    position: absolute;
    top: 5px;
    right: 6px;
    background: #ff5500;
    color: #fff;
    padding: 5px 12px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 14px;
}
.highlight-orange {
    color: #ff5500;
}
.gift-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #f15a24;
}
.gift-detail-content {
	width: 100%; /* 💡 既然在原網頁呈現，寬度改為 100% 貼齊容器內距 */
	margin: 0 auto;
}

/* 💡 下方固定按鈕列：改為相對於 wrapper 的絕對定位 */
.fixed-bottom-action-bar {
    position: relative; /* 💡 改為 relative 配合 flex 頂在底部，不會在滾動時飄移 */
    width: 100%;
    background: #fff;
    padding: 15px;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
}
.action-submit-btn {
    width: 100%;
    max-width: 500px;
    background: #f15a24;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

.action-submit-btn.btn-outline {
  background-color: #ffffff;
  color: #f16321;
  border: 1.5px solid #e8e8e8;
}

.description-text {
    word-break: break-all;
    overflow-wrap: break-word;
    max-width: 100%; 
    overflow: hidden; 
}
.description-text img, 
.description-text table {
    max-width: 100% !important;
    height: auto !important;
}

/* 💡 1. 先定義一個呼吸發光的動畫 */
@@keyframes cardGlow {
    0% {
        filter: drop-shadow(0 0 3px rgba(241, 90, 36, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 6px rgba(241, 90, 36, 0.9)); /* 光暈變大、變亮 */
    }
    100% {
        filter: drop-shadow(0 0 3px rgba(241, 90, 36, 0.6));
    }
}

/* 🟢 2. 套用到中間正的那張 (Active) 的圖片上 */
.card-swiper .swiper-slide-active img {
    transform: rotate(0deg) scale(1.05); /* 💡 順便微放大 1.05 倍，讓主體感更強！ */
    
    /* 💡 加上核心發光：drop-shadow 會完美貼齊你的卡牌邊緣發光（去背圖也適用） */
    animation: cardGlow 2s infinite ease-in-out; 
    
    /* 確保切換時動畫不會卡頓 */
    will-change: filter, transform; 
}