/* =====================================================================
   HC.ONE GLOBAL — 香檳金精品風（覆蓋 app.css 的色彩變數與首頁元件）
   載入順序：app.css → lux.css
   ===================================================================== */

:root{
  /* 客戶指定色號：暖香檳金 × 象牙白 × 古銅金 */
  --ivory:#FCF8EF;      /* 主背景・象牙白 */
  --champagne:#F5E6CC;  /* 淺香檳底色 */
  --gold-bright:#E5C27A;/* 亮香檳金 */
  --gold-main:#C89542;  /* HC.ONE 主金 */
  --gold-deep:#A86717;  /* 深金色 */
  --bronze:#875116;     /* 古銅金 */
  --ink-dark:#2D1D10;   /* 標題深咖黑 */
  --grad-light:linear-gradient(135deg,#FFF9ED 0%,#F3DCB0 55%,#D7A34F 100%); /* 上方淺金 Banner */
  --grad-rich:linear-gradient(135deg,#F1D49C 0%,#C9944F 55%,#9B642D 100%);  /* 下方濃金 Banner */

  --sun-50:#FAF1E1; --sun-100:#F5E6CC; --sun-200:#EDD3A0;
  --sun-300:#E5C27A; --sun-400:#D7A95C; --sun-500:#C89542;
  --sun-600:#A86717; --sun-700:#875116;
  --gold:#C89542; --gold-l:#E5C27A; --gold-d:#A86717;

  --ink:#2D1D10; --ink-2:#5A4330; --muted:#9A8266; --faint:#C9B596;
  --bg:#FCF8EF; --line:#F0E3CC; --line-2:#E6D2B0;

  --sh-1:0 1px 3px rgba(135,81,22,.06), 0 1px 2px rgba(135,81,22,.04);
  --sh-2:0 4px 16px rgba(135,81,22,.10);
  --sh-3:0 10px 30px rgba(135,81,22,.16);
  --grad:var(--grad-rich);
  --grad-soft:linear-gradient(135deg,#FCF8EF 0%,#F5E6CC 100%);

  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --latin:"Cinzel","Trajan Pro","Times New Roman",serif;
}

/* 標題改襯線字 */
.sec-hd h3,.topbar .logo{font-family:var(--serif);font-weight:900}
.topbar .logo{color:var(--sun-700)}

/* ---------- 按鈕：金色漸層＋金色描邊 ---------- */
.btn-gold{background:linear-gradient(180deg,#F3DCB0 0%,#E5C27A 45%,#C89542 100%);color:var(--ink-dark);
  box-shadow:0 4px 12px rgba(150,105,45,.28),inset 0 1px 0 rgba(255,255,255,.6)}
.btn-ghost{background:rgba(255,255,255,.55);color:var(--sun-700);border:1.5px solid var(--sun-500);
  backdrop-filter:blur(4px)}
.btn-primary{background:var(--grad);color:#fff}
.btn-arrow::after{content:"›";font-size:1.25em;line-height:1;margin-left:6px;font-weight:400}

/* ---------- 輪播：底圖＋左側留白壓字 ---------- */
.banner{background:url(../img/lux/hero.jpg) right center / cover no-repeat,var(--grad-light);color:var(--ink-dark);
  min-height:190px;padding:18px 18px 20px;box-shadow:0 10px 30px rgba(130,95,45,.18)}
.banner::before{right:auto;left:0;top:0;width:78%;height:100%;border-radius:0;
  background:linear-gradient(90deg,rgba(252,248,239,.96) 0%,rgba(252,248,239,.85) 55%,rgba(252,248,239,0) 100%)}
.banner::after{display:none}
.banner .bn-brand{position:relative;font-family:var(--latin);font-size:15px;letter-spacing:1.5px;color:var(--ink-dark);line-height:1.1}
.banner .bn-brand b{font-weight:600}
.banner .bn-brand span{color:var(--sun-500)}
.banner .bn-tag{position:relative;font-family:var(--latin);font-size:8.5px;letter-spacing:2.6px;color:var(--gold-deep);margin:3px 0 10px}
.banner h2{font-family:var(--serif);font-weight:900;color:var(--ink-dark);text-shadow:none;font-size:23px;line-height:1.3;
  max-width:70%;letter-spacing:1px}
.banner p{color:var(--ink-dark);opacity:1;max-width:66%;font-size:12.5px}
.banner .bn-side{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--latin);
  font-size:8.5px;letter-spacing:2.4px;line-height:2;color:var(--bronze);text-align:left;z-index:1}
.banner .acts .btn{box-shadow:0 4px 12px rgba(150,105,45,.28)}
.dots i{background:var(--sun-200)}
.dots i.on{background:var(--sun-500)}

/* ---------- 功能捷徑：金色線條圖示 ---------- */
.quick{border-color:var(--line);box-shadow:0 6px 24px rgba(130,95,45,.08)}
.quick .ico{width:50px;height:50px;background:radial-gradient(circle at 50% 35%,#FFFDF8 0%,var(--champagne) 100%);
  color:var(--sun-600);box-shadow:0 3px 10px rgba(150,105,45,.12),inset 0 1px 0 #fff}
.quick .ico svg{width:26px;height:26px}
.quick span{color:var(--ink);font-weight:600;font-size:12px}

/* ---------- 購物金／入會套組卡：光影地球底圖 ---------- */
.cb-main,.coinbox.guest .cb-main{background:url(../img/lux/card.jpg) center / cover no-repeat,var(--grad-rich);color:var(--ink-dark);
  box-shadow:0 10px 30px rgba(130,95,45,.20)}
.cb-main::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(250,242,228,.78) 0%,rgba(250,242,228,.45) 60%,rgba(250,242,228,0) 100%)}
.cb-main::after{display:none}
.cb-label{color:var(--gold-deep);opacity:1;font-family:var(--serif);font-weight:700}
.cb-value{font-family:var(--serif);font-weight:900;letter-spacing:1px;text-shadow:0 1px 0 rgba(255,255,255,.4);
  background:linear-gradient(180deg,var(--gold-deep) 0%,var(--bronze) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cb-sub{color:var(--ink-dark);opacity:1}
.cb-sub span::before{background:var(--sun-500)}
.cb-deco{position:absolute;right:16px;bottom:14px;font-family:var(--latin);font-size:9px;letter-spacing:2.4px;
  line-height:1.9;color:#fff;text-shadow:0 1px 6px rgba(80,50,20,.5);z-index:1}
.cb-deco::after{content:"";display:block;width:18px;height:1px;background:currentColor;margin-top:4px}
.cb-mini .v{color:var(--sun-600)}

/* ---------- 底部導覽與其他 ---------- */
.tabbar a.on{color:var(--sun-600)}
.line-fab{box-shadow:0 6px 18px rgba(0,0,0,.18),0 0 0 3px rgba(255,255,255,.9),0 0 0 4.5px var(--gold)}

@media(min-width:768px){
  .banner{min-height:300px;padding:34px 40px}
  .banner .bn-brand{font-size:22px}
  .banner .bn-tag{font-size:11px;margin-bottom:16px}
  .banner h2{font-size:38px;max-width:55%}
  .banner p{max-width:50%;font-size:15px}
  .banner .bn-side{right:28px;font-size:11px}
  .quick .ico{width:58px;height:58px}
  .quick .ico svg{width:30px;height:30px}
  .cb-deco{font-size:11px;right:26px;bottom:20px}
}

/* 客戶上傳的圖片輪播：保留原圖，不套底圖與遮罩 */
.banner.has-img{background:none;min-height:0}
.banner.has-img::before{display:none}

/* 入會套組卡：襯線大字一行放得下、深金色實色提高對比 */
.cb-value{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--bronze);
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(255,240,215,.6)}
.coinbox.guest .cb-value{font-size:30px;letter-spacing:.5px;white-space:nowrap}
.cb-main .cb-acts,.cb-main .cb-label,.cb-main .cb-value,.cb-main .cb-sub{z-index:1}
@media(min-width:768px){.coinbox.guest .cb-value{font-size:44px}}