/* UCC2026 Color Override
裝載幸福的冒險：我的城市逃跑計畫 集點活動
Color Palette: UCC 紅 / 奶油白 / 金色緞帶 / 黑底徽章（取自活動 KV）
v2 — 2026/07 全站重新設計
----------------------------------------------------------------------- */
:root {
--ucc-red: #D9251C;
--ucc-red-deep: #A31810;
--ucc-maroon: #6E1208;
--ucc-cream: #FBF1DC;
--ucc-cream-2: #FFFDF6;
--ucc-gold: #E3B23C;
--ucc-gold-deep: #B8860B;
--ucc-black: #201a16;
--ucc-text: #3D1400;
--ind-1: 28px;
/* 2026/08/04：「指定商品」三個次標頭改成各自獨立漸層（不是三個共用同一組），
色相跟主標題正紅（--ucc-red）錯開，改用橘色系，三階從亮橘到深橘各自區分 */
--ucc-product-orange-1: #F0923D;
--ucc-product-orange-1-deep: #C15F12;
--ucc-product-orange-2: #E37A1E;
--ucc-product-orange-2-deep: #A84E0C;
--ucc-product-orange-3: #C15F12;
--ucc-product-orange-3-deep: #7A3505;
}
/* ===== Body Background（咖啡豆灑點紋理） =====
2026/07/31：原本 body 與 #main 是同一色（--ucc-cream-2），內容區塊完全融入背景看不出邊界。
body 改用較深的 --ucc-cream，#main 維持 --ucc-cream-2 並加卡片感（圓角＋陰影），
讓活動內容區與頁面背景明顯區隔開來。 */
body {
background-color: var(--ucc-cream);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23D9251C' fill-opacity='0.05'%3E%3Cellipse cx='20' cy='30' rx='9' ry='6' transform='rotate(30 20 30)'/%3E%3Cellipse cx='90' cy='80' rx='9' ry='6' transform='rotate(-20 90 80)'/%3E%3Cellipse cx='60' cy='10' rx='7' ry='5' transform='rotate(60 60 10)'/%3E%3Cellipse cx='100' cy='20' rx='7' ry='5' transform='rotate(10 100 20)'/%3E%3Cellipse cx='30' cy='95' rx='7' ry='5' transform='rotate(-40 30 95)'/%3E%3C/g%3E%3C/svg%3E");
}
/* 2026/08/07：receipt.jsp 發票示意圖在 iPhone Safari／Chrome（皆為 WKWebView）連續兩輪
針對特定 flex 容器（.row > .inv_type*_block、.spotlight > .content）補 min-width:0
的修法都回報「還是一樣」——這個沙盒環境用的是 Chromium，沒辦法真的重現 WebKit 的
算圖結果，等於是盲測，連續兩次盲猜都沒中。與其再猜第三個可能的 flex 容器，
改用不需要抓到確切元凶的做法：直接不讓整個頁面在 X 方向捲動。這個頁面除了兩個
刻意做成可左右滑動的表格（各自有自己 overflow-x:auto 的容器）以外，沒有任何地方
應該需要頁面層級的水平捲動，所以這條規則風險很低。 */
html, body { overflow-x: hidden; }
/* ===== Utility Colors ===== */
.t_pink { color: var(--ucc-red) !important; font-weight: normal; }
.t_o { color: #d4860a; font-weight: normal; }
.t_y { color: var(--ucc-gold-deep) !important; }
.t_r { color: var(--ucc-red-deep); font-weight: normal; }
.t_b { color: var(--ucc-text) !important; }
/* ===== 主標題（10 個主段落／各頁 header.major h2）=====
紅色漸層藥丸章，index.html 用 直接套用，
其他頁沿用既有 header.major.special > h2 結構，同一套外觀 */
h2.lv2,
header.major.special h2,
header.major h2 {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, var(--ucc-red) 0%, var(--ucc-red-deep) 100%);
color: #fff !important;
font-size: 1.6em;
/* main.css 有一條全站 h1~h6 重設 `line-height: 0.5em`，我們這裡從沒蓋過它。單行標題看
不出問題（反正只有一行），但字數多到要換行時（例如手機版「中獎公佈及兌獎說明」那條），
0.5em 的行高比字高還矮，第二三行會直接疊在第一行上面——這才是真正的「擠成重疊」成因，
不是膠囊不夠大。 */
line-height: 1.35;
font-weight: 500;
padding: 14px 28px;
border-radius: 40px;
margin: 40px 0 24px 0;
box-shadow: 0 3px 8px rgba(163,24,16,0.35);
}
header.major.special h2:after,
header.major h2:after { display: none !important; }
h2.lv2 .icon {
width: 34px; height: 34px;
background: var(--ucc-gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1em;
flex-shrink: 0;
}
/* 2026/08/04：主標題小圖示改成從自家 KV 主視覺裁切出來的咖啡豆形狀
（kv_1920x680.jpg 左下角「買UCC全系列商品…」文字旁的金色豆子圖案，
用色彩距離門檻去背＋柔化邊緣萃取成 images/icon-bean-kv.png，形狀比通用圖示庫更貼近品牌自己的美術風格）。
用 CSS mask 上色而非直接放圖，之後要換色只要改這裡的 background-color。 */
h2.lv2 .icon::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: var(--ucc-maroon);
/* 拆成完整寫法而非 mask 簡寫，部分瀏覽器對 mask 簡寫的 position/size 語法解析不穩定，
拆開來每個屬性各自宣告比較保險 */
-webkit-mask-image: url("../images/icon-bean-kv.png");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: url("../images/icon-bean-kv.png");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
/* ===== 次標題（原「■」小節標籤，改為金邊淺底色塊）=====
index.html 用 ；其他頁沿用既有 h3 > span.item 結構 */
h3.lv-sub,
h3 .item, h2 .item {
display: inline-flex;
align-items: center;
gap: 8px;
border-left: 6px solid var(--ucc-gold);
background: var(--ucc-cream);
color: var(--ucc-text) !important;
font-size: 1.2em;
font-weight: 700;
padding: 8px 18px 8px 14px;
border-radius: 0 8px 8px 0;
margin: 32px var(--ind-1) 14px var(--ind-1);
background-image: none !important;
}
h3.lv-sub { margin-left: var(--ind-1); margin-right: var(--ind-1); max-width: calc(100% - var(--ind-1) * 2); }
/* ===== 內文縮排（index.html 用）===== */
.c1, .c2 { margin-left: var(--ind-1); margin-right: var(--ind-1); }
p.body-text { line-height: 1.9; margin-top: 0; margin-bottom: 12px; color: var(--ucc-text); }
/* ===== ※ 提示文字（2026/07/31 依客戶要求取消框線對話框，改小字＋酒紅色） ===== */
.note-callout {
display: block;
padding: 0;
margin-top: 4px;
margin-bottom: 16px;
font-size: 0.8em;
line-height: 1.7;
color: var(--ucc-maroon);
}
.note-callout.c1, .note-callout.c2 { margin-left: calc(var(--ind-1) + 12px); margin-right: 24px; }
/* ===== 條列清單（法規條款，index.html 用） ===== */
/* padding-left 要留夠兩位數編號（10.、20.）的寬度——1.3em 只夠放個位數，兩位數的
「1」會被外層 .notice-scroll 的 overflow 裁掉，畫面上看起來像「10.」變成「0.」。
注意事項＋個資法相關說明合併成同一份清單後最多會到 20，所以必須抓夠。 */
.rule-list { padding-left: 1.8em; }
.rule-list li { margin-bottom: 10px; line-height: 1.8; }
.rule-list li::marker { color: var(--ucc-red); font-weight: normal; }
/* 註冊/登入帳號頁：客戶要求比一般 .rule-list 更寬鬆的行距與項目間距，加條分隔線提高易讀性 */
.login-rule-list li { margin-bottom: 20px; line-height: 2; padding-bottom: 16px; border-bottom: 1px dashed rgba(180, 128, 31, 0.35); }
.login-rule-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
/* main.css 有一條 `.main ul { margin: 0 0 2em 25px; }`，class+element 的優先度比單純
`.sub-list` 這個 class 選擇器高，會整條蓋掉下面這條規則（多出 2em 的底部間距，就是
「多一行空間」的真正原因）。加上 #main 前綴把優先度墊高，才能真的蓋過去。 */
#main .sub-list {
/* 只留 top margin，不留 bottom margin——父層
本身（.rule-list li）已有
margin-bottom，兩個 margin 疊加會讓巢狀清單結束後多出一整行空白。 */
list-style: none;
padding-left: 1.2em;
margin: 0.4em 0 0;
}
.sub-list li { margin-bottom: 6px; line-height: 1.7; }
.sub-list li::before { content: "● "; color: var(--ucc-red); }
/* ===== 注意事項：固定高度內嵌式捲動區 ===== */
.notice-scroll {
box-sizing: border-box;
height: 360px;
overflow-y: auto;
overscroll-behavior: contain;
margin: 10px 0 30px;
padding: 18px 0;
border: 1px solid rgba(180, 128, 31, 0.45);
border-radius: 6px;
background: #fffaf0;
box-shadow: inset 0 2px 8px rgba(61, 20, 0, 0.08);
scrollbar-color: var(--ucc-gold) #f4ead6;
-webkit-overflow-scrolling: touch;
}
.notice-scroll .c1 { margin-left: var(--ind-1); margin-right: var(--ind-1); }
.notice-scroll > :first-child { margin-top: 0; }
.notice-scroll > :last-child { margin-bottom: 0; }
.notice-scroll:focus-visible { outline: 3px solid rgba(180, 128, 31, 0.45); outline-offset: 3px; }
/* ===== 緞帶分隔線（index.html 章節之間） ===== */
.ribbon-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 50px 0 10px;
color: var(--ucc-gold-deep);
opacity: 0.7;
}
.ribbon-divider::before, .ribbon-divider::after {
content: "";
flex: 1;
height: 2px;
background: repeating-linear-gradient(90deg, var(--ucc-gold) 0 8px, transparent 8px 14px);
}
/* ===== 活動商品：系列/品名對照表（index.html 用） ===== */
table.product-table {
width: calc(100% - var(--ind-1) * 2);
border-collapse: collapse;
margin: 10px var(--ind-1) 20px;
font-size: 0.95em;
}
.product-table th {
background: var(--ucc-red);
color: #fff;
padding: 8px 14px;
text-align: left;
font-weight: 500;
font-size: 0.9em;
}
.product-table td {
padding: 7px 14px;
border-bottom: 1px solid #f0e4cf;
vertical-align: top;
color: var(--ucc-text);
text-align: left;
}
.product-table td.series {
background: var(--ucc-cream);
font-weight: 500;
vertical-align: middle;
width: 32%;
border-right: 1px solid #f0e4cf;
}
/* 正面列表雙欄（指定商品）：兩欄等寬，不用系列窄欄樣式；
欄內小標題（如「即溶咖啡系列商品」）改用跟表頭一致的紅底白字，配色統一
（這條要排在 .product-table td.series 後面，優先權相同時靠後者覆蓋前者） */
.product-table-2col td { width: 50%; }
.product-table-2col td.series {
width: auto;
color: #fff;
font-weight: 500;
border-right: none;
}
/* 2026/08/04：即飲／沖調／即溶三個次標頭改成各自獨立的橘色漸層（不再共用同一組），
每個都自己左淺右深，三個彼此顏色也不同，同色系但跟主標題正紅明顯區隔 */
.product-table th.cat-1 { background: linear-gradient(135deg, var(--ucc-product-orange-1) 0%, var(--ucc-product-orange-1-deep) 100%); }
.product-table th.cat-2 { background: linear-gradient(135deg, var(--ucc-product-orange-2) 0%, var(--ucc-product-orange-2-deep) 100%); }
.product-table td.cat-3 { background: linear-gradient(135deg, var(--ucc-product-orange-3) 0%, var(--ucc-product-orange-3-deep) 100%); }
/* ===== 獎項清單（圖左文右，index.html 用） ===== */
.prize-row { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; margin-bottom: 30px; }
.prize-card {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
background: var(--ucc-cream);
border: 2px solid var(--ucc-gold);
border-radius: 14px;
padding: 12px 18px;
}
.prize-card .circle-img {
flex-shrink: 0;
width: 150px; height: 150px;
border-radius: 50%;
overflow: hidden;
border: 4px solid #fff;
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.prize-card .circle-img img {
width: 100%; height: 100%; object-fit: cover;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
-webkit-mask-composite: intersect;
mask-composite: intersect;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* 2026/07/31：原本 flex:1 讓文字區塊撐滿卡片剩餘寬度，圖+字整體偏左、右側大片留白。
改成固定寬度，讓「圖片＋文字」整組在卡片內置中，左右平均 */
.prize-card .prize-info { flex: 0 1 460px; min-width: 0; line-height: 1.9; }
/* 2026/08/04：全站黑底膠囊統一為黑底白字（.ps-pill／.b_b 原本就是白字，
這個是唯一還沒跟上的，原本是黑底金字/棕字） */
.prize-card .badge {
display: inline-block;
background: var(--ucc-black);
color: #fff;
padding: 3px 14px;
border-radius: 20px;
font-size: 0.95em;
font-weight: 500;
margin-bottom: 4px;
}
.prize-card .prize-title {
display: block;
background: none;
margin: 0;
padding: 0;
color: var(--ucc-text) !important;
font-size: 1em !important;
font-weight: 500;
line-height: 1.9;
}
.prize-title-prefix,
.prize-title-suffix { display: inline-block; white-space: nowrap; }
/* h2.lv2 是 display:flex，.icon 之外只能再有一個文字節點當第二個 flex item，
不能像 .prize-title 那樣拆成兩個 span 各自當 flex item（會被排成並排欄位而非正常文字換行）。
改成單一 .lv2-title 當唯一的文字 flex item，裡面用 .lv2-title-nowrap 包住不能被拆開的片語
（例如「中獎公佈及兌獎說明」），這只是內層一般 inline span，不影響外層 flex-item 換行行為。 */
.lv2-title-nowrap { display: inline-block; white-space: nowrap; }
.prize-card .price { color: var(--ucc-red); font-weight: normal; font-size: 0.95em; margin: 0; line-height: 1.9; }
/* ===== Status Badge（q_receipt.html 發票審核狀態） ===== */
.b_b {
background: var(--ucc-black);
color: #fff;
font-weight: 500;
margin-right: 10px;
padding: 5px 12px;
border-radius: 20px;
}
/* ===== Navigation ===== */
#nav {
background: var(--ucc-black) !important;
background-size: cover;
color: #fff;
}
#nav ul li a:hover { color: var(--ucc-gold) !important; }
#nav ul li a.active {
background-color: #ffffff !important;
color: var(--ucc-black) !important;
font-weight: 500;
box-shadow: none;
border: 3px solid #fff !important;
}
#nav.alt { background-color: var(--ucc-black) !important; }
/* Mobile Menu：三條線漢堡圖示，疊在 KV 圖右上角（不是圖片上方獨立一條黑色 bar） */
.navbar { display: none; }
.dropbtn {
/* main.css 裡有殘留的舊版圖示按鈕設計（text-indent 把文字推到看不到的地方、
背景改指向一張路徑寫錯的 images/menu.png），這裡要全部重設回來。 */
background-image: none;
text-indent: 0;
overflow: visible;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,0.45);
border-radius: 8px;
}
/* 三條線本體：span 自己是中間那條，::before／::after 是上下兩條 */
.hamburger-icon,
.hamburger-icon::before,
.hamburger-icon::after {
display: block;
width: 24px;
height: 3px;
border-radius: 2px;
background-color: #fff;
}
.hamburger-icon { position: relative; }
.hamburger-icon::before,
.hamburger-icon::after { content: ""; position: absolute; left: 0; }
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }
.dropdown-content { background-color: var(--ucc-black); }
.dropdown-content a:hover {
background-color: var(--ucc-maroon);
color: var(--ucc-gold) !important;
}
/* ===== Main Content Area ===== */
#main, #nav + #main {
background-color: var(--ucc-cream-2);
color: var(--ucc-text);
border-radius: 18px;
box-shadow: 0 8px 30px rgba(110,18,8,0.12);
padding: 8px 32px;
}
/* main.css 有一條 `#nav + #main { padding-top: 0px; }`（相鄰兄弟選擇器，兩個 ID 疊加、優先度比
單純 #main 高）。這條規則只有在 #main 緊接在 #nav 後面（沒有其他標籤包住）時才會生效——
index.html 的 #main 直接接在 #nav 後面，會中招變成 padding-top:0；但 login.jsp／receipt.jsp／
q_receipt.jsp／winners.jsp 的 #main 是包在