:root {
  /* ──── 1. Bulma 1.0+ HSL 核心語意色覆寫 (鼠尾草綠 #8A9A86) ──── */
  --bulma-primary-h: 106deg;
  --bulma-primary-s: 11%;
  --bulma-primary-l: 56%;
  --bulma-primary: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  --bulma-primary-invert: #FFFFFF;
  /* 綠底上的文字為白色 */

  /* ──── 2. 全站背景與文字 ──── */
  --bulma-body-background-color: #F4F4F2;
  /* 珪藻土霧白 */
  --bulma-text: #2B2D2A;
  /* 深炭黑文字 */

  /* ──── 3. 裝潢公司自訂擴充變數 ──── */
  --secondary-color: #555B52;
  /* 次要色：沉穩岩灰 */
}

/* ──── 4. 強制套用與細節微調 ──── */
html,
body {
  background-color: var(--bulma-body-background-color) !important;
  color: var(--bulma-text) !important;
  font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* 確保所有標題和內文都套用新色 */
.title,
.subtitle,
p,
span,
h1,
h2,
h3 {
  color: var(--bulma-text) !important;
}

/* 次要按鈕（沉穩岩灰） */
.button-secondary {
  background-color: var(--secondary-color) !important;
  color: #FFFFFF !important;
  border: none !important;
  transition: background 0.3s ease;
}

.button-secondary:hover {
  background-color: #3D423B !important;
}

/* 橫幅 (Hero) 的新大圖（現代極簡客廳風） */
.hero {
  background: linear-gradient(rgba(43, 45, 42, 0.35), rgba(43, 45, 42, 0.35)),
    url('https://unsplash.com') !important;
  background-size: cover !important;
  background-position: center !important;
}

.hero .title,
.hero .subtitle {
  color: #FFFFFF !important;
  /* 橫幅文字保持白色 */
}
 /* 1. 補齊所有核心前綴，全域關閉所有 img 的反白與選取行為 */
        img {
            display: block;
            max-width: 100%;
            height: auto;
            
            /* 讓滑鼠點擊直接穿透圖片本身 */
            pointer-events: none; 
            
            /* 跨瀏覽器文字/圖片選取鎖定 */
            -webkit-user-select: none; /* Safari, Chrome, Opera, iOS/Android */
            -moz-user-select: none;    /* Firefox */
            -ms-user-select: none;     /* IE/Edge */
            user-select: none;         /* 標準規範 */
            
            /* 核心：徹底關閉 iOS Safari / 微信 / LINE 長按彈出「儲存影像」選單 */
            -webkit-touch-callout: none; 
        }

        /* 2. 利用 CSS 屬性選取器直接控制 JS 動態生成的容器（完全不寫 class） */
        div[data-secure-wrapper] {
            position: relative;
            display: inline-block;
        }

        /* 3. 利用 CSS 屬性選取器直接控制動態遮罩（完全不寫 class） */
        div[data-secure-overlay] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            /* 1x1 透明 GIF Base64，全瀏覽器皆無時差秒開，不產生額外圖片請求 */
            background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); 
            cursor: default;
            z-index: 2147483647; /* 設為最高層級，確保絕對蓋在圖片上方 */
            
            /* 遮罩本身同步鎖定手機端長按 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }