/* ========================================
   CSP 內聯樣式修復 CSS (Tailwind Style)
   檔案位置: public/csp-assets/css/csp-fixes.css
   用途：替代所有 inline style 屬性以符合 CSP 安全策略
   命名風格：Tailwind CSS 風格（保留 csp- 前綴避免衝突）
   建立日期: 2025-11-03
   ======================================== */

/* ==========================================
   1. 背景圖片 (Background Images)
   保持語義化命名（特定資源）
   ========================================== */

/* 首頁 - Hirata Logo */
.bg-hirata-logo {
  background-image: url('/img/Hirata_Logo_L@2x.png');
}

/* 首頁 - 客戶 Logo */
.bg-logo-tsmc {
  background-image: url(/img/LOGO-tsmc@2x.png);
}

.bg-logo-auo {
  background-image: url(/img/LOGO-AUO@2x.png);
}

.bg-logo-innolux {
  background-image: url(/img/LOGO-INNOLUX@2x.png);
}

.bg-logo-umc {
  background-image: url(/img/LOGO-UMC@2x.png);
}

/* 首頁 - 世界地圖 */
.bg-map-en {
  background-image: url('/img/world-map-EN@2x.png');
}

.bg-map-ja {
  background-image: url('/img/world-map-JP@2x.png');
}

.bg-map-tw {
  background-image: url('/img/world-map-TW@2x.png');
}

.bg-map-mobile {
  background-image: url('/img/map.png');
}

/* 新聞 Banner */
.bg-news-banner {
  background-image: url('/img/banner-news@2x.png');
}

.bg-news-banner-mobile {
  background-image: url('/img/banner-news-m@2x.png');
}

/* KV 背景圖 */
.bg-kv-story {
  background-image: url('/img/pic-story kv@2x.png');
}

.bg-kv-default {
  background-image: url('/img/kv2.png');
  background-position: 50% 0%;
}

/* ==========================================
   2. 動態背景 (Dynamic Backgrounds)
   ========================================== */

.dynamic-bg {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================
   3. 間距工具類別 (Spacing Utilities)
   Tailwind 風格：mt-{size}, mb-{size} 等
   ========================================== */

/* 上邊距 */
.mt-140 {
  margin-top: 140px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-0 {
  margin-top: 0 !important;
}

/* 下邊距 */
.mb-40 {
  margin-bottom: 40px;
}

.mb-0 {
  margin-bottom: 0 !important;
}

/* 垂直內距 */
.py-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* 水平內距 */
.px-5 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}

/* 垂直內距 */
.py-2\.5 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ==========================================
   4. 圓角 (Border Radius)
   Tailwind 風格：rounded-{size}
   ========================================== */

.rounded-lg {
  border-radius: 10px;
}

/* ==========================================
   5. 文字大小 (Text Sizing)
   Tailwind 風格：text-{size}
   ========================================== */

.text-base {
  font-size: 16px;
}

.text-sm {
  font-size: 14px;
}

.text-7xl {
  font-size: 72px;
}

/* ==========================================
   6. 寬度 (Width)
   Tailwind 風格：w-{size}
   ========================================== */

.w-full {
  width: 100%;
}

.w-1\/4 {
  width: 25%;
}

.max-w-md {
  max-width: 450px;
}

/* ==========================================
   7. 高度 (Height)
   Tailwind 風格：h-{size}
   ========================================== */

.h-full {
  height: 100%;
}

.h-20 {
  height: 20px;
}

.h-auto {
  height: auto;
}

.min-h-200 {
  min-height: 200px;
}

/* ==========================================
   8. 顯示控制 (Display)
   Tailwind 風格：hidden, flex 等
   ========================================== */

.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.text-center {
  text-align: center;
}

/* ==========================================
   9. 背景顏色 (Background Color)
   ========================================== */

.bg-blue-contact {
  background-color: #1575c5;
}

/* ==========================================
   9. 響應式設計注意事項
   ========================================== */

/*
   注意：某些背景圖片使用 hidden-xs-down / hidden-sm-up 控制顯示
   這些 Bootstrap 類別已經處理了響應式，CSS 只需要提供背景圖片即可
*/

/* ==========================================
   10. JavaScript 輔助（動態背景）
   ========================================== */

/*
   使用以下 JavaScript 處理動態背景：

   document.addEventListener('DOMContentLoaded', function() {
     // 處理動態背景
     document.querySelectorAll('.csp-dynamic-bg[data-bg-url]').forEach(function(el) {
       const bgUrl = el.dataset.bgUrl;
       if (bgUrl) {
         el.style.backgroundImage = 'url(' + bgUrl + ')';
       }
     });
   });
*/