/* ============================================================
   金享官網 — 淺色製造版候選（Light Manufacturing Candidate）
   疊在 site.css + motion.css + launch-2026-09.css 之後，只覆蓋顏色與少數版位。

   依據：金享精密_關於金享頁面改版需求_網頁設計用.docx（2026-09-15，曾老闆提供）
     「以白色、淺灰與科技藍為主，取消金色與大面積過暗底色。深藍最多保留一個短區塊。」
   建議色碼同樣出自該文件：
     主要文字 #111827／品牌深藍 #123B6D／互動藍 #1976D2／淺藍 #EEF5FC／淺灰 #F5F7F9

   這支檔案「不改版型、不改內容、不新增元件」——
   它把既有的深色 token 重新指向淺色，再補上 site.css 裡少數寫死深色的地方。
   9/15 深色版仍是基線，兩版共用同一份 HTML。
   ============================================================ */

/* ---------- 1. Token 重新指向 ---------- */
:root {
  /* 背景階：原本由深到更深，改成由白到淺灰藍 */
  --navy-950: #ffffff;   /* html 底 */
  --navy-900: #f7f9fb;   /* body 底 */
  --navy-850: #eef5fc;   /* 淺藍區塊（文件指定） */
  --navy-800: #f5f7f9;   /* 淺灰交替區塊（文件指定） */
  --navy-700: #e2e9f0;   /* 分隔用淺階 */

  /* 文字階：原本淺字配深底，整組反過來 */
  --steel-100: #111827;  /* 主要文字（文件指定） */
  --steel-300: #44515f;  /* 次要文字 */
  --steel-500: #5d6b7a;  /* 標籤／metadata */

  /* 品牌藍 */
  --accent: #1976d2;          /* 互動藍：按鈕、連結、色塊 */
  --accent-rgb: 25, 118, 210;
  --accent-text: #123b6d;     /* 淺底上的強調字，用品牌深藍才有對比 */
  --accent-text-rgb: 18, 59, 109;
  --accent-deep: #123b6d;
  --accent-deep-rgb: 18, 59, 109;
  --blue-300: #1976d2;

  --line: rgba(17, 24, 39, .12);
  --line-strong: rgba(25, 118, 210, .38);
  --shadow: 0 18px 44px rgba(17, 24, 39, .10);

  color-scheme: light;
}

html { background: var(--navy-950); }
body { background: var(--navy-900); color: var(--steel-100); }

/* ---------- 2. 頁首：淺底 + 老闆官方橫式 logo ---------- */
/* 官方 logo 的中文字是黑的，深底會吃掉它；淺底才能用原檔，不必另做反白版。 */
.site-header {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(17, 24, 39, .04);
}
.brand-logo { height: 46px; width: auto; }
/* 官方橫式原檔含中英文兩行字，46px 高的話英文那行會糊掉；拉到 56px 才讀得出來。
   這個選擇器也順帶讓 build 的素材清理程序知道這個檔有被用到。 */
.brand-logo[src$="jx-logo-official.png"] { height: 56px; }
@media (max-width: 720px) { .brand-logo[src$="jx-logo-official.png"] { height: 42px; } }
.brand-copy { display: none; }   /* 官方 logo 已含中英文字，不再用 HTML 文字重複一次 */
.site-nav a { color: var(--steel-100); }
.site-nav a:hover { color: var(--accent); }
.nav-cta {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff !important;
  padding: 10px 18px;
}
.nav-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.lang-switch a { color: var(--steel-500); }
.lang-switch a[aria-current="true"] { background: var(--accent); color: #fff; }
.skip-link { background: var(--accent); color: #fff; }

/* ---------- 3. 第一屏 ---------- */
.media-hero::before,
.hero-photo::after,
.quality-photo-hero::before {
  background: none !important;   /* 移除壓在照片上的深藍漸層 */
}
.hero-grid { opacity: .32; }
.launch-hero,
.media-hero { background: linear-gradient(180deg, #ffffff 0 52%, var(--navy-800) 100%); }
.hero-copy h1 { color: var(--steel-100); }
.hero-copy h1 em { color: var(--accent); font-style: normal; }
.hero-lede { color: var(--steel-300); }
.eyebrow { color: var(--accent-text); }

/* 第一屏改用真實工廠照片（文件：第一屏以真實工廠照片為背景） */
.hero-photo img { filter: none; }
.hero-photo figcaption,
.feature-grid--visual .feature-visual figcaption {
  background: rgba(255, 255, 255, .90);
  border: 1px solid var(--line);
  color: var(--steel-300);
}
.hero-photo figcaption b { color: var(--accent-text); }

.button-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.button-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.text-link { color: var(--accent); }

/* ---------- 4. site.css 裡寫死深色的地方 ---------- */
.hero-visual { background: rgba(25, 118, 210, .05); }
.process-card { background: rgba(255, 255, 255, .95); border-top-color: var(--accent); box-shadow: var(--shadow); }
.page-index { background: var(--navy-800); }
.subpage-index { background: var(--navy-800); border-color: var(--line); }
.hero-spec { background: var(--navy-800); border-top-color: var(--line); }
.home-quality-section { background: var(--navy-850) !important; }
.control-value-band {
  background: linear-gradient(90deg, rgba(25, 118, 210, .10), rgba(18, 59, 109, .06));
  border-top-color: var(--line-strong);
}
.prototype-figure::before { background: rgba(255, 255, 255, .92); color: var(--accent-text); border-left-color: var(--accent); }
.prototype-figure::after,
.floor-photo::after { background: none !important; }
.contact-band--photo .contact-band-bg::after {
  background: linear-gradient(105deg, rgba(255, 255, 255, .94) 0 46%, rgba(255, 255, 255, .72) 72%, rgba(255, 255, 255, .95) 100%) !important;
}
.contact-band--photo .contact-action { background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); }

/* 品質頁圖說標籤（quality-evidence.css 寫死 rgba(6,17,29,.78)） */
.quality-atlas-visual-label span,
.quality-atlas-visual-label b,
.quality-atlas-visual figcaption {
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid var(--line);
}
.quality-atlas-visual-label span { color: var(--accent-text) !important; }
.quality-atlas-visual-label b { color: var(--steel-100) !important; }
.quality-atlas-visual figcaption { color: var(--steel-300) !important; }

/* ---------- 5. 深藍只留一個短區塊（文件：深藍最多保留一個短區塊） ---------- */
.contact-band:not(.contact-band--photo) {
  background: var(--accent-deep);
  color: #fff;
}
.contact-band:not(.contact-band--photo) h2,
.contact-band:not(.contact-band--photo) p,
.contact-band:not(.contact-band--photo) .section-kicker { color: #fff; }
.contact-band:not(.contact-band--photo) .button-primary { background: #fff; color: var(--accent-deep); border-color: #fff; }

/* ---------- 6. 卡片與表格：淺底要有邊界才分得出層次 ---------- */
.spec-snapshot-grid > div,
.capability-rail article,
.feature-card,
.evidence-card,
.press-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
table, .spec-table { color: var(--steel-100); }
.spec-table th { color: var(--accent-text); }
.spec-table td, .spec-table th { border-color: var(--line); }

/* ---------- 7. 預覽版標示 ---------- */
.prelaunch-ribbon {
  background: var(--accent-deep) !important;
  color: #fff !important;
  border: 0 !important;
}
/* launch-2026-09.css 把第二行寫死成深色 #1d2f3a，壓在深藍上看不見 */
.prelaunch-ribbon small { color: rgba(255, 255, 255, .88) !important; }
.prelaunch-ribbon b,
.prelaunch-ribbon span { color: #fff !important; }

/* ---------- 7b. 內頁第一屏 ---------- */
/* site.css 的 .subpage-hero::before 是深藍放射漸層，在淺底上會變成一團髒污。 */
.subpage-hero::before {
  background: linear-gradient(140deg, #ffffff 0 52%, var(--navy-850) 100%) !important;
}
.subpage-hero::after { color: rgba(17, 24, 39, .045) !important; }  /* 浮水印大字改深色低透明 */
.subpage-hero h1 em { color: var(--accent-text); }
.subpage-hero-copy > p:last-child { color: var(--steel-300); }
.breadcrumb { color: var(--accent-text); }

/* 關於金享：第一屏放真實工廠照片（文件：第一屏以真實工廠照片為背景，
   可局部提亮或加輕微淺色遮罩，文字需保持足夠對比）。
   data-word="GROUP" 只出現在關於頁，拿來當這一頁的選擇器。 */
/* 裁切位置 68% 72%：把 TSUGAMI B0205-V 銘牌與機台本體帶進畫面右側。
   預設 center right 會裁到一片空白鈑金，等於放了照片卻沒有任何證據價值。 */
.subpage-hero[data-word="GROUP"]::before {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .97) 0 40%, rgba(255, 255, 255, .70) 60%, rgba(255, 255, 255, .48) 100%),
    url("../media/floor_b0205_operator.jpg") 68% 72% / cover no-repeat !important;
}
.subpage-hero[data-word="GROUP"]::after { display: none; }

/* ---------- 8. 表單 ---------- */
input, select, textarea {
  background: #fff;
  color: var(--steel-100);
  border: 1px solid rgba(17, 24, 39, .22);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline-color: var(--accent); }
label, .field-hint { color: var(--steel-300); }
:focus-visible { outline-color: var(--accent); }

/* ---------- 9. 頁尾 ---------- */
.site-footer { background: var(--navy-800); border-top: 1px solid var(--line); color: var(--steel-300); }
.site-footer a { color: var(--accent); }