/* ===============================
   全站變數（顏色/尺寸/半徑/字級）
   =============================== */
   :root{
    /* 背景與文字（預設，可被各區塊覆寫） */
    --text:   #111; 
    --muted: #ffffff;

    /* 邊線與陰影 */
    --border: rgba(0,0,0,.12);
    --border-muted: rgba(255,255,255,.06);
    --shadow: 0 10px 30px rgba(0,0,0,.30);
  
    /* 連結 */
    --link: #dfe8ff;
    --link-hover: #ffffff;
  
    /* 半徑與尺度（較直） */
    --radius-lg: 12px;
    --radius-md: 10px;
    --radius-sm: 8px;

    --heading-tracking: -0.01em;
    --badge-text: var(--text);                 /* 預設跟著 --text 走 */

    /* 圖片 */
    --img-radius: 12px;
    --img-overlay: rgba(0,0,0,.14);
    --img-border: rgba(255,255,255,.08);
    --img-grayscale: 0;
    --logo-grayscale: .85;

    /* 主題色：台灣/日本/美國 */
    --tw-gold: #F4C43A;     /* Taiwan */
    --jp-red:  #E64545;     /* Japan vermilion */
    --us-blue: #3A6FF4;     /* USA royal/indigo */

    /* 中性色與光暈 */
    --ink-900:#0e0f13;
    --ink-700:#171922;
    --ink-500:#222532;
    --glass:  rgba(255,255,255,0.06);
    --glass-2:rgba(255,255,255,0.12);
    --shadow-45: rgba(0,0,0,0.45);
  }

/* ===============================
  基礎排版與版面
=============================== */
:root {
  --font-serif-cjk: "Poppins", sans-serif;
}
body {
  font-family: var(--font-serif-cjk);
}

  *{ box-sizing: border-box; }
  html, body{ height:100%; 
    margin: 0;
    padding: 0;
    /* 如果有任何元素撐出水平捲軸，先把多出來的部分裁掉 */
    overflow-x: hidden;}
  body{
    margin:0;
    font-size: var(--base-font);
    color: var(--text);
    line-height: 1.6;
    background:
      radial-gradient(1200px 600px at 80% -10%, #1a1f2a 0%, #101318 45%, var(--bg) 100%),
      var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a{ color: var(--link); text-decoration: none; }
  a:hover{ color: var(--link-hover); }
  img{ max-width:100%; display:block; border-radius: var(--img-radius); filter: grayscale(var(--img-grayscale)); }
  
  .container{ width:min(1200px, 100%); margin:0 auto; padding:0 24px; }
  section{ position: relative; padding: clamp(56px, 8vh, 70px) 0; }
  
  .eyebrow{
    display:inline-block; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
    color: var(--eyebrow); margin-bottom:10px;
  }
  
  p.lead{ color: var(--muted); font-size: clamp(17px, 2.2vw, 19px); margin: 14px 0 0; }
  .muted{ color: var(--muted); }
  .center{ text-align:center; }
  .mt-20{ margin-top:20px; }

  ::-webkit-scrollbar {
    width: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: #0f1113;  /* 深色背景 */
  }
  
  ::-webkit-scrollbar-thumb {
    background: #696969; 
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #e6e6e6;
  }
  
/* ========================================================================================================= section1 Hero：左上角品牌 + 左側大字（無卡片） =========================================================================================================  */
#hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;}
.hero-bg { position:absolute; inset:0; z-index: 0;}
.hero-photo{ width:100%; height:100%; object-fit:cover; object-position:50% center; display:block; }

/* === Hero：左上角品牌 + 左側大字（無卡片） === */
/* 背景層（先只保留定位，之後要亮暗再補背景值） */
.hero{
  position: relative;
  height: clamp(520px, 56vw, 720px);
  overflow: hidden; /* 以防超出 */
}
.hero-overlay, .hero-sideShade {
  position: absolute;
  inset: 0;
  z-index: 1;  /* <= 注意這裡保持比文字低 */
}
.hero-sideShade { pointer-events: none; }

/* 左上角品牌角標（可調位置） */
.hero-brand-top {
  position: absolute;
  top: clamp(20px, 2.5vw, 40px);
  left: clamp(20px, 2.5vw, 40px);
  display: flex;
  align-items: center;
  gap: 14px;  /* 與文字間距大一點 */
  z-index: 5;
}
/* Logo 放大 */
.hero-logo-top {
  width: clamp(200px, 10vw, 280px); 
  height: auto;
}
#hero .container{
  position: static !important;
  z-index: auto !important;
}
/* 主內容：固定寬度、垂直置中 */
#hero .hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 100%; 
  padding: 0 16px;
  z-index: 3;
  white-space: nowrap;
}
/* 標題三行層級 */
#hero .hero-title{
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  line-height: 1.5;
  text-shadow: 0 2px 6px rgba(0,0,0,.28);
  position: relative;
  bottom: clamp(20px, 10vw, 120px);
}
#hero .hero-title .line-1 {
  display:block;
  font-weight:700;
  font-size: clamp(60px, 4vw, 120px);
  color: #fbff01;
  font-family: "Poppins", sans-serif;
}
#hero .hero-title .line-2 {
  display:block;
  margin-top: .5em;
  font-weight:700;
  font-size: clamp(80px, 5vw, 160px);
  color: #fce21c;
  font-family: "Poppins", sans-serif;
}

@media (max-width: 2560px){
#hero .hero-title .line-2{white-space: nowrap;}
}
@media (max-width: 1920px){
#hero .hero-title .line-2{white-space: nowrap;}
}
@media (max-width: 1600px){
#hero .hero-title .line-2{white-space: nowrap;}
}

/* 背景做極輕微的呼吸縮放（不會暈） */
.hero-photo {
  transform: scale(1.04);
  transition: transform 0.6s ease;
  will-change: transform;
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.08); }
}

/* 兩行標題的細節：字距/陰影/底線點綴 */
#hero .hero-title {
  line-height: 1.2;
  text-shadow: 0 3px 12px rgba(0,0,0,.25);
}
#hero .hero-title .line-1 {
  letter-spacing: .01em;
}
#hero .hero-title .line-2 {
  letter-spacing: .005em;
  position: relative;
}

/* 建議加上：全站平滑捲動 */
html { scroll-behavior: smooth; }

/* Scroll 提示固定在底部中間 */
.scroll-cue{
  position: absolute;          /* 基準 = #hero */
  left: 50%;
  bottom: clamp(14px, 2.2vw, 24px);
  transform: translateX(-50%);
  font: 700 12px/1 var(--font-serif-cjk);
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity:.85;
  text-decoration: none;
  pointer-events:auto;         /* 允許點擊 */
}

/* 垂直小線 + 漂浮動畫 */
.scroll-cue::after{
  content:"";
  display:block;
  width: 1px; height: 22px;
  margin: 8px auto 0;
  background: currentColor;
  border-radius: 999px;
  animation: cue 1.6s ease-in-out infinite;
  opacity:.75;
}
@keyframes cue{
  0%   { transform: translateY(0);     opacity:.35; }
  50%  { transform: translateY(4px);   opacity:.85; }
  100% { transform: translateY(0);     opacity:.35; }
}

/* =============================================================================================     Section 3: 我們的特色（白色文藝風）   ============================================================================================= */
/* 區塊主題變數 + 白紙底，避免露出下方深色分段 */
#highlights{
  --paper:#c9c8c8; --ink:#2a2a2a; --ink-muted:#6b6b6b; --line:rgba(0,0,0,.08);
  --shadow-soft:0 10px 28px rgba(0,0,0,.06);
  --badge-bg:rgba(0,0,0,.04); --badge-border:rgba(0,0,0,.10);
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(0,0,0,.025), transparent 60%),
    radial-gradient(900px 500px at 85% 100%, rgba(0,0,0,.035), transparent 62%),
    var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-block: clamp(32px, 8vh, 96px);
}

/* 放寬本段容器寬度（不影響其它段落） */
#highlights .container{
  max-width: none !important;
  width: 100vw !important;
  /* 中央版心裡把容器拉到整個視窗寬，不會產生水平卷軸 */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0;   /* 視覺留白 */
  padding-right: 0;
}

/* 三等分卡片：左 1/3 圖、 中 1/3 圖、 右 1/3 文字（滿版） */
#highlights .card.media-row{
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;  /* 三等分 */
  align-items: stretch;
  gap: 0;
  padding: 0;                          /* 讓圖片能真的滿版 */
  background: #dbdbdb;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  min-height: clamp(560px, 70vh, 960px); /* ✅ 改成 min-height */
  height: auto;                          /* ✅ 讓高度隨內容撐開 */
}

/* 讓 figure 不佔欄位，兩張 img 直接進入前兩欄 */
#highlights .card.media-row figure.media{
  display: contents;
  margin: 0; padding: 0; border: 0; background: transparent;
}
#highlights .card.media-row .media::after{ content:none; }

/* 兩張圖個別塞滿各自欄位（1/3 + 1/3） */
#highlights .card.media-row .media img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* 充滿裁切 */
  object-position: center center;
  display: block;
  border-radius: 0;
  filter: none;
  box-shadow: none;
}
#highlights .card.media-row .media img:nth-child(1){
  grid-column: 1 / 2; grid-row: 1 / -1;
}
#highlights .card.media-row .media img:nth-child(2){
  grid-column: 2 / 3; grid-row: 1 / -1;
}

/* 右側文字（第 3 欄） */
#highlights .card.media-row .pad-lg{
  grid-column: 3 / 4; grid-row: 1 / -1;
  padding: clamp(22px, 2vw, 28px);
  background: #fff184;               /* 實心白底，避免「灰膜」感 */
  backdrop-filter: none;
  border-left: 1px solid rgba(0,0,0,.05); /* 淡淡的直向分隔線 */
  padding-left: clamp(36px, 3vw, 64px);
  padding-right: clamp(28px, 2.5vw, 56px);
  padding-bottom: clamp(24px, 2vw, 40px);
  display: grid;
  row-gap: 12px;
  align-content:center; 
}
#highlights h2{
  font-family: var(--font-serif-cjk);
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0;
  margin: 0 0 10px 0;
  color: var(--ink);
}
#highlights .lead{
  font-family: var(--font-serif-cjk);
  color: var(--ink-muted);
  line-height: 1.85;
}
/* 段落更友善換行：長英文、網址、數字串都能折 */
#highlights .card.media-row .pad-lg p,
#highlights .card.media-row .pad-lg .lead{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;         /* 英文字可自動斷字（瀏覽器支援時） */
  line-height: 1.85;
}

/* 標題的智慧分行（美觀） */
#highlights .card.media-row .pad-lg h2{
  text-wrap: balance;    /* 不支援也沒關係，會忽略 */
}

/* 徽章太多時自動換行 */
#highlights .chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;  /* 右對齊 */
  align-self: end; 
}
/* 徽章（膠囊、淡墨） */
#highlights .badge{
  font-family: var(--font-serif-cjk);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--ink);
  letter-spacing: .02em;
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-block;
}

/* 微互動：整卡片輕浮起（如不想要可刪） */
#highlights .card.media-row:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
  transition: transform .18s ease, box-shadow .18s ease;
}

.tagline {
  margin-top: 6px;
  margin-bottom: 18px;
  font-size: 1.25rem; /* 稍大於內文 */
  font-weight: 500;
  color: #000000;
  font-style: italic;
  font-family: var(--font-serif-cjk);
}

/* 動畫偏好：使用者若偏好減少動畫，關閉浮起效果 */
@media (prefers-reduced-motion: reduce){
  #highlights .card.media-row{ transition: none; }
  #highlights .card.media-row:hover{ transform:none; box-shadow: 0 10px 28px rgba(0,0,0,.06); }
}

/* 小保險：避免 100vw + padding 造成水平捲軸 */
#highlights .container { box-sizing: border-box; }

/* 小保險：避免兩張圖之間出現 1px 接縫 */
#highlights .card.media-row { contain: paint; }       /* 隔離繪製，防止次像素滲漏 */
#highlights .card.media-row .media img { transform: translateZ(0); } /* 促發合成層 */

/* =============================================================================================     Section 4: 關於優良（白色文藝風）   ============================================================================================= */
/* full-bleed：讓本段橫跨整個視窗寬 */
#about{
  --paper:#c9c8c8; --ink:#2a2a2a; --ink-muted:#6b6b6b; --line:rgba(0,0,0,.08);
  --shadow-soft:0 10px 28px rgba(0,0,0,.06);
  --badge-bg:rgba(0,0,0,.04); --badge-border:rgba(0,0,0,.10);
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(0,0,0,.025), transparent 60%),
    radial-gradient(900px 500px at 85% 100%, rgba(0,0,0,.035), transparent 62%),
    var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  padding-left:0; padding-right:0;
  padding-block: clamp(32px, 8vh, 96px);
}
#about .container{
  max-width:none; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:0; padding-right:0;
  box-sizing:border-box; /* 防止 100vw + padding 溢出 */
}

/* 三等分卡片（和 #highlights 同，但左右反向） */
#about .card.media-row{
  display:grid;
  grid-template-columns: 0.5fr 1fr 1fr;   /* 三等分 */
  align-items:stretch;
  gap:0; padding:0;
  background:#dbdbdb;
  border:1px solid var(--line);
  border-radius:0;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  min-height: clamp(560px, 70vh, 960px); /* ✅ 改成 min-height */
  height: auto;                          /* ✅ 讓高度隨內容撐開 */
  contain: paint; /* 防止次像素縫隙 */
}

/* 讓 figure 當「內容容器」，兩張圖直接各佔一欄（第 2、3 欄） */
#about .card.media-row figure.media{ display:contents; }
#about .card.media-row .media::after{ content:none; }
#about .card.media-row .media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  display:block; border-radius:0; filter:none; box-shadow:none; transform:translateZ(0);
}
#about .card.media-row .media img:nth-child(1){ grid-column: 2 / 3; grid-row:1 / -1; }
#about .card.media-row .media img:nth-child(2){ grid-column: 3 / 4; grid-row:1 / -1; }

/* 左側文字（第 1 欄） */
#about .card.media-row .pad-lg{
  grid-column: 1 / 2; grid-row:1 / -1;
  background:#85fdff;
  padding: clamp(22px, 2vw, 28px);
  backdrop-filter: none;
  border-left: 1px solid rgba(0,0,0,.05); /* 淡淡的直向分隔線 */
  padding-left: clamp(36px, 3vw, 64px);
  padding-right: clamp(28px, 2.5vw, 56px);
  padding-bottom: clamp(24px, 2vw, 40px);
  display: grid;
  row-gap: 12px;
  align-content: center; 
}
#about .card.media-row .pad-lg .chip-row{
  transform: translateY(calc(-1 * var(--chips-lift)));
}
#about h2{
  font-family: var(--font-serif-cjk);
  font-size: clamp(26px, 3vw, 36px);
  margin:0 0 10px 0; color:var(--ink);
}
#about .lead{
  font-family: var(--font-serif-cjk);
  color:var(--ink-muted); line-height:1.85;
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}
#about .chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-self: auto;   /* 移除 end 對齊 */
} 
#about .badge{
  font-family: var(--font-serif-cjk);
  background:var(--badge-bg); border:1px solid var(--badge-border);
  color:var(--ink); letter-spacing:.02em; border-radius:999px; padding:6px 12px;
}

/* hover 微浮起 */
#about .card.media-row:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.09);
  transition:transform .18s ease, box-shadow .18s ease;
}

/* 動畫偏好：減少動畫 */
@media (prefers-reduced-motion: reduce){
  #about .card.media-row{ transition:none; }
  #about .card.media-row:hover{ transform:none; box-shadow:0 10px 28px rgba(0,0,0,.06); }
}

/* =============================================================================================     Section 5: 我們的服務（白紙文藝風 + 無照片 + 分頁）   ============================================================================================= */
/* 白紙背景 + 上下留白 */
#services.section--paper{
  --paper:#ffffff; --ink:#1f2937; --muted:#181818; --line:rgba(0,0,0,.08);
  color:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block: clamp(48px, 7vh, 120px);
  background:
    /* 角落墨暈 */
    radial-gradient(900px 520px at 12% 0%, rgba(0,0,0,.028), transparent 62%),
    radial-gradient(860px 500px at 88% 100%, rgba(0,0,0,.035), transparent 64%),
    /* 細橫紋 */
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.012) 0 1px,
      transparent 1px 30px
    ),
    #dbdbdb;
}
#services.section--paper > .container > h2{
  color: #111827 !important;       /* 或用 var(--ink) 也行 */
  opacity: 1 !important;            /* 覆蓋任何全站的淡化 */
  -webkit-text-fill-color: currentColor; /* 防止有用到 text-fill 的情況 */
  filter: none !important;          /* 若有套 filter 淡化，也一併清掉 */
  letter-spacing: .02em;
  line-height: 1.25;
  font-size: 45px;
  text-shadow: 0 1px 0 rgba(0,0,0,.02);
}
/* 此區塊全部統一字體 */
#services.section--paper,
#services.section--paper *{
  font-family: var(--font-serif-cjk);
}
/* 標題底線（淡金漸層到透明） */
#services.section--paper > .container > h2::after{
  background: linear-gradient(90deg, #363634, transparent);
}
#services .svc-kicker{
  margin: 2px 0 6px 2px;
  font-size: 20px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .12em;
  text-indent: .2em;
}
.svc-kicker{ margin: 2px 0 6px 2px; font-weight:600; color:var(--muted); letter-spacing:.12em; }
.svc-kicker .k-chunk{ display:inline; }
.svc-kicker .k-chunk + .k-chunk::before{ content: " ・ "; }

#services .svc-kicker::before{ content: "— "; opacity: .55; }
/* ---------------- Tabs ---------------- */
.svc-tabs{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
#services .svc-tabs label:hover{
  background: #f6f7f9;
}
.svc-tabs input{
  position:absolute; inset:auto;
  opacity:0; pointer-events:none;
}
.svc-tabs label{
  display:grid; place-items:center;
  padding: 12px 10px;
  border-radius:10px;
  color:var(--ink);
  cursor:pointer; user-select:none;
  letter-spacing:.02em;
  font-weight:700;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.svc-tabs label:focus-visible{
  outline: 2px solid #8A7B5C33;
  outline-offset: 2px;
}

/* inkbar（底下灰色塊） */
.svc-inkbar{
  position:absolute; left:6px; top:6px; bottom:6px;
  width: calc((100% - 12px) / 3);
  border-radius:10px;
  background:#f3f4f6;
  border:1px solid var(--line);
  transition: transform .28s ease;
  z-index:0;
}
.svc-tabs label{ position:relative; z-index:1; }

/* 使用 :has() 控制 inkbar 位置與作用中 label 外觀 */
.svc-tabs:has(#tab-import:checked)    .svc-inkbar{ transform: translateX(0%); }
.svc-tabs:has(#tab-export:checked)    .svc-inkbar{ transform: translateX(100%); }
.svc-tabs:has(#tab-warehouse:checked) .svc-inkbar{ transform: translateX(200%); }

.svc-tabs:has(#tab-import:checked)    label[for="tab-import"],
.svc-tabs:has(#tab-export:checked)    label[for="tab-export"],
.svc-tabs:has(#tab-warehouse:checked) label[for="tab-warehouse"]{
  background:#f3f4f6;
  border:1px solid var(--line);
  font-weight:800;
}

/* ---------------- Panels ---------------- */
.svc-panels{ margin-top: 18px; }
.svc-panel{ display:none; }

/* 用 :has() 決定要顯示哪一個面板（.svc-panels 必須緊接在 .svc-tabs 後面） */
.svc-tabs:has(#tab-import:checked)    + .svc-panels #panel-import{ display:block; }
.svc-tabs:has(#tab-export:checked)    + .svc-panels #panel-export{ display:block; }
.svc-tabs:has(#tab-warehouse:checked) + .svc-panels #panel-warehouse{ display:block; }

/* ---------------- Cards（精簡：無表情符號、無外框、無狗耳） ---------------- */
.svc-cards{
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  /* 移除容器的外框/背景/陰影/內距 */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* 單張卡片仍保留白卡風格 */
.svc-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* hover 更穩重：僅位移、不要旋轉 */
.svc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
}

/* 移除表情符號/小方塊 */
.svc-card::before{
  content: none !important;
  display: none !important;
}

/* 移除右上角「狗耳摺」 */
.svc-card::after{
  content: none !important;
  display: none !important;
}

/* 標題與內文維持原排版 */
#services :where(.svc-card h3){
  position: relative;
  margin: 2px 0 6px;
  font-weight: 800;
  color: var(--ink);
}
#services .svc-card h3::after{
  content:"";
  display:block;
  width: 28px; height: 1px;
  margin: 6px 0 6px;
  background: linear-gradient(90deg,#8A7B5C,transparent);
  opacity:.55;
}
.svc-card h3{
  font-size: clamp(18px, 2.2vw, 20px);
  letter-spacing: .01em;
}
.svc-card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 15px;
}

/* ---------------- CTA 列 ---------------- */
.svc-cta{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px;
  padding:12px 14px;
  border-radius:12px; background:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  border: 1px solid var(--line);
}
.svc-cta .muted{ color:var(--muted); font-size:16px; font-weight: 500; }
#services .svc-seals{
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 10px 0 0;
}
#services .svc-seals li{
  padding:6px 10px;
  border-radius: 999px;
  background:#fff;
  border: 1px dashed rgba(0,0,0,.28);
  font-size: 12.5px;
  color: var(--muted);
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
/* 若全站沒有 .btn 樣式，給 CTA 一個簡潔按鈕 */
.svc-cta .btn{
  display:inline-grid; place-items:center;
  padding:10px 14px; border-radius:10px;
  background: #272726; color:#fff; text-decoration:none;
  font-weight:700; letter-spacing:.02em;
  box-shadow: 0 8px 22px rgba(138,123,92,.22);
  transition: transform .1s ease, box-shadow .1s ease, opacity .1s ease;
}
.svc-cta .btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(138,123,92,.28); }
.svc-cta .btn:active{ transform: translateY(0); box-shadow: 0 8px 22px rgba(138,123,92,.22); }
.svc-cta .btn:focus-visible{ outline:2px solid #8A7B5C55; outline-offset:2px; }
  
/* =============================================================================================     Section 7: 聯絡我們（白色文藝風）    ============================================================================================= */
   #contact.section--paper{
    --paper:#dbdbdb; --ink:#1f2937; --muted:#38393a; --line:rgba(0,0,0,.10);
    color:var(--ink);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    font-family:var(--font-serif-cjk);
    background:
      radial-gradient(1000px 520px at 12% 0%, rgba(0,0,0,.028), transparent 60%),
      radial-gradient(900px 480px at 88% 100%, rgba(0,0,0,.035), transparent 62%),
      var(--paper);
  }
  
  /* 標題 */
  #contact .container > h2{
    color:#111827;
    letter-spacing:.02em;
    line-height:1.25;
    text-shadow:0 1px 0 rgba(0,0,0,.02);
    font-size:45px;
    margin:0 0 6px 0;
  }
  #contact .container > h2::after{
    content:"";
    display:block; width:80px; height:1px; margin:.6rem 0 1rem;
    background:linear-gradient(90deg,#222,transparent);
    opacity:.7;
  }
  
  /* 兩欄網格：左表單 2fr / 右側 1fr */
  #contact .contact-grid{
    display:grid; grid-template-columns:2fr 1fr; gap:20px;
    align-items:start;
  }
  
  /* 卡片 */
  #contact .contact-card,
  #contact .line-card{
    background:#fff; border:1px solid var(--line);
    border-radius:14px; padding:20px;
    box-shadow:0 10px 28px rgba(0,0,0,.06);
  }
  
  /* 表單欄位 */
  #contact .field{ display:block; margin-bottom:14px; }
  #contact .label{
    display:block; font-weight:700; letter-spacing:.02em;
    margin-bottom:6px; font-family:var(--font-serif-cjk);
    color:#111827;
  }
  
  /* 統一 input / textarea 樣式（含字體） */
  #contactForm input,
  #contactForm textarea,
  #contact input[type="email"],
  #contact input[type="tel"],
  #contact input[type="text"],
  #contact textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px;
    background:#fff;
    font-family:var(--font-serif-cjk);
    font-size:16px;
    color:#333;
    line-height:1.55;
    box-shadow:0 6px 18px rgba(0,0,0,.04) inset;
  }
  #contact textarea{
    min-height:220px;
    resize:vertical;
  }
  
  /* placeholder 與焦點狀態 */
  #contact input::placeholder,
  #contact textarea::placeholder{
    color:#9aa3af;   /* slate-ish */
    font-family:var(--font-serif-cjk);
  }
  #contact input:focus,
  #contact textarea:focus{
    outline:none;
    border-color:#8A7B5C;
    box-shadow:0 0 0 3px #8A7B5C22;
  }
  
  /* 三欄上排 */
  #contact .row-3{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
  }
  
  /* CTA */
  #contact .form-cta{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:6px;
  }
  
  /* 狀態提示 */
  #contact .form-status{ margin-top:10px; font-weight:700; }
  #contact .form-status.ok{ color:#0d9488; }
  #contact .form-status.err{ color:#b91c1c; }
  
  /* 右側：LINE 卡 */
  #contact .line-card h3{
    font-family:var(--font-serif-cjk);
    margin:0 0 8px; color:#111827;
  }
  #contact .line-qr{
    width:100%; max-width:220px; height:auto; display:block;
    border-radius:12px; border:1px solid var(--line);
    box-shadow:0 10px 28px rgba(0,0,0,.06);
    margin:8px 0 10px;
  }
  #contact .line-id{ margin-bottom:10px; letter-spacing:.03em; }
  
  /* 按鈕（沿用既有風格） */
  .btn{
    display:inline-grid; place-items:center; text-decoration:none;
    border-radius:10px; font-weight:800; letter-spacing:.02em;
    padding:10px 14px; cursor:pointer; user-select:none;
  }
  .btn.primary{
    background:#272726; color:#fff;
    box-shadow:0 8px 22px rgba(138,123,92,.22);
    font-family:var(--font-serif-cjk);
  }
  .btn.primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(138,123,92,.28); }
  .btn.ghost{
    background:#272726; color:#fff;
    box-shadow:0 8px 22px rgba(138,123,92,.22);
    font-family:var(--font-serif-cjk);
  }
  .btn.ghost:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(138,123,92,.28); }

/* =============================================================================================     Section 8: footer（白色文藝風）    ============================================================================================= */
#site-footer.section--ink {
  --paper: #ff43dc;              /* 背景 */
  --ink:   #2d2d2d;              /* 主要文字 */
  --muted: #000000;              /* 次要文字 */
  --line:  rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --accent:#8A7B5C;              /* 微金色點綴 */

  color: var(--ink);
  background:
    radial-gradient(1200px 520px at 15% 0%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(900px 480px at 85% 100%, rgba(255,255,255,.05), transparent 62%),
    var(--paper);
  border-top: 1px solid var(--line-2);
  padding: 32px 0 20px;
  font-family: var(--font-serif-cjk);
}

/* 容器安全寬度 */
#site-footer .container {
  max-width: min(1200px, 92vw);
  margin: 0 auto;
}

/* --- 主要網格（單欄：Logo/品牌 + 聯絡資訊在下） --- */
#site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-serif-cjk);
}

/* 左欄：品牌 Logo + 名稱 */
#site-footer .foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
  letter-spacing: .04em;
}
#site-footer .foot-logo {
  width: clamp(56px, 4vw, 64px);
  height: auto;
}

/* --- 聯絡資訊：橫向一列 --- */
#site-footer .meta-inline.meta-row {
  display: flex;
  flex-wrap: nowrap;      /* 桌機一行 */
  gap: 16px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  text-align: left;
  align-items: center;
}
#site-footer .meta-inline.meta-row li {
  display: inline-flex;
  gap: 16px;
  white-space: nowrap;    /* 地址也保持單行（桌機） */
  margin: 0;
  display: inline-flex;
  align-items: center;
}
#site-footer .meta-inline.meta-row li.address {
  line-height: 1.6;
}

/* 手機：不足寬度時允許換行 */
@media (max-width: 768px) {
  #site-footer .meta-inline.meta-row {
    flex-wrap: wrap;
    gap: 10px 18px;
  }
  #site-footer .meta-inline.meta-row li.address {
    white-space: normal;  /* 地址允許換行 */
    align-items: center;
  }
}

/* 標籤樣式 */
#site-footer .meta-inline .label {
  color: var(--muted);
  opacity: .85;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1;
}

/* 連結樣式 */
#site-footer .meta-inline a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  line-height: 1.25;
}
#site-footer .meta-inline a:hover {
  border-bottom-color: var(--line);
}

/* --- 法律列 --- */
#site-footer .legal-row {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#site-footer .copyright {
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .02em;
}
#site-footer .legal-links {
  display: flex;
  gap: 16px;
}
#site-footer .legal-links a {
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
#site-footer .legal-links a:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

/* (========================================================================================================= RWD手機版 ========================================================================================================= */

/* =========================
   ≤1024px（平板）
   ========================= */
   @media (max-width: 1024px){

    /* 全站縮些留白 */
    section{ padding: clamp(38px, 6vh, 56px) 0; }
    .container{ padding: 0 18px; }
  
    /* --- HERO --- */
    #hero{ min-height: 86vh; padding:0; }
    #hero .container{ padding:0; }
    #hero .hero-brand-top{ top:20px; left:20px; gap:10px; }
    .hero-logo-top{ width: clamp(130px, 15vw, 190px); }  /* 稍微放大 */

    /* 置中 + 疊在 overlay 之上 */
    #hero .hero-content{
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding-inline: max(16px, 4vw);
      padding-bottom:12vh;
      max-width: 96vw;            /* 放寬可用寬度 */
      margin: 0 auto;
      z-index: 3;                 /* 關鍵：蓋過 overlay */
      transform: none;            /* 清掉舊 transform */
      left: auto; top: auto;      /* 清掉舊定位 */
    }
    #hero .hero-title{
      margin: 0;
      line-height: 1.15;
      text-shadow: 0 2px 6px rgba(0,0,0,.22);
    }
    #hero .hero-title .line-1,
    #hero .hero-title .line-2{
      display: block;
      white-space: nowrap;        /* 不換行 */
      letter-spacing: .01em;
    }
    #hero .hero-title .line-1{
      font-size: clamp(26px, 4.8vw, 40px);
    }
    #hero .hero-title .line-2{
      font-size: clamp(30px, 5.6vw, 46px);
      margin-top: .3em;
    }

    /* ---------- What We Do (#highlights) ---------- */
    #highlights{ padding-block: clamp(28px, 6vh, 56px); }
    #highlights .container{ padding-left: 0; padding-right: 0; }
    /* 兩欄：左圖 + 右圖；文字放第二排吃兩欄 */
    #highlights .card.media-row{
      grid-template-columns: 1fr 1fr;
      min-height: auto;
    }
    #highlights .card.media-row .media img:nth-child(1){ grid-column: 1 / 2; grid-row: 1; }
    #highlights .card.media-row .media img:nth-child(2){ grid-column: 2 / 3; grid-row: 1; }
    #highlights .card.media-row .pad-lg{
      grid-column: 1 / -1; grid-row: 2;
      border-left: none; border-top: 1px solid rgba(0,0,0,.06);
      padding: clamp(18px, 3.2vw, 24px);
      align-content: start;
    }
  
    /* ---------- About Us (#about) ---------- */
    #about{ padding-block: clamp(28px, 6vh, 56px); }
    #about .container{ padding-left: 0; padding-right: 0; }
    /* 兩欄：左圖 + 右圖；文字在第二排 */
    #about .card.media-row{
      grid-template-columns: 1fr 1fr;
      min-height: auto;
    }
    #about .card.media-row .media img:nth-child(1){ grid-column: 1 / 2; grid-row: 1; }
    #about .card.media-row .media img:nth-child(2){ grid-column: 2 / 3; grid-row: 1; }
    #about .card.media-row .pad-lg{
      grid-column: 1 / -1; grid-row: 2;
      border-left: none; border-top: 1px solid rgba(0,0,0,.06);
      padding: clamp(18px, 3.2vw, 24px);
      align-content: start;
    }
  
    /* 兩區塊的圖片高度在平板上固定比率，避免過矮 */
    #highlights .card.media-row .media img,
    #about .card.media-row .media img{
      height: clamp(220px, 34vw, 320px);
      object-fit: cover;
    }
  
    /* ---------- Services ---------- */
    #services .svc-cta{ flex-direction: column; align-items: stretch; }
    /* --- Our Services --- */
    #services.section--paper{
      padding-block: 48px;
    }
    #services.section--paper > .container > h2{
      font-size: clamp(30px, 4.8vw, 40px);
    }
    #services .svc-kicker{
      display:flex; flex-direction:column; gap:6px; letter-spacing:.06em;
    }
    #services .svc-kicker::before{ content:none !important; }
    #services .svc-kicker .k-chunk:first-child::before{ content:"— "; opacity:.6; }
    #services .svc-kicker .k-chunk:not(:first-child)::before{ content:"・ "; opacity:.9; }
    /* Tabs：改直式按鈕、inkbar 隱藏 */
    .svc-tabs{
      grid-template-columns: 1fr;
      gap: 8px;
      padding: 8px;
    }
    .svc-cards{ grid-template-columns: 1fr 1fr; gap: 14px; }
    .svc-inkbar{ display:none; }
    .svc-tabs label{
      padding: 12px 14px;
      text-align: center;
      border: 1px solid var(--line);
      background: #f7f8fa;
    }
    /* ---------- Contact ---------- */
    #contact .contact-grid{ grid-template-columns: 1fr; gap: 16px; }
    #contact .row-3{ grid-template-columns: 1fr 1fr; }
  
    /* ---------- Footer ---------- */
    #site-footer.section--ink{ padding: 28px 0 18px; }
    #site-footer .footer-grid{
      grid-template-columns: 1fr;
      gap: 12px;
      justify-items: center;
      text-align: center;
    }
    #site-footer .foot-brand{
      justify-content: center;
      font-size: clamp(20px, 2.6vw, 26px);
    }
    #site-footer .meta-inline.meta-row{
      flex-wrap: wrap;
      gap: 10px 16px;
      justify-content: center;
      text-align: center;
    }
    #site-footer .meta-inline .label{
      font-size: 12px;
      letter-spacing: .08em;
    }
    #site-footer .meta-inline.meta-row li{
      white-space: normal;          /* 允許換行，避免擠壓 */
      line-height: 1.6;
    }
    #site-footer .meta-inline.meta-row li.address a{
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    #site-footer .legal-row{
      margin-top: 14px;
      padding-top: 10px;
      gap: 10px;
      text-align: center;
      flex-direction: column;
    }
  }
  @media (max-width: 900px){
    .svc-cards{ grid-template-columns: 1fr; }
  }
/* =========================
   ≤768px（手機）
   ========================= */
   @media (max-width: 768px){

    section{ padding: clamp(28px, 6vh, 44px) 0; }
    .container{ padding: 0 14px; }
  
    /* ---------- Hero ---------- */
    #hero{ min-height: 78vh; padding:0; }
    #hero .container{ padding:0; }
    .hero-logo-top{ width: clamp(120px, 28vw, 170px); }  /* 手機再放大一點 OK */

    /* 置中 + 疊在 overlay 之上 */
    #hero .hero-content{
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding-inline: max(16px, 6vw);
      padding-bottom:16vh;
      max-width: 96vw;            /* 給手機更多寬度空間 */
      margin: 0 auto;
      z-index: 3;                 /* 關鍵 */
      transform: none;
      left: auto; top: auto;
    }
    #hero .hero-title{ margin:0; line-height:1.15; }
    #hero .hero-title .line-1,
    #hero .hero-title .line-2{
      display:block;
      white-space:nowrap;         /* 不換行 */
      letter-spacing:.01em;
    }
    #hero .hero-title .line-1{
      font-size: clamp(22px, 6vw, 32px);
    }
    #hero .hero-title .line-2{
      font-size: clamp(24px, 6.8vw, 36px);
      margin-top: .28em;
    }
    #hero .hero-title{ transform: translateY(-4vh); }
    .scroll-cue{ bottom: 12px; }

    /* ---------- What We Do (#highlights) ---------- */
    #highlights{ padding-block: clamp(22px, 6vh, 38px); }
    #highlights .card.media-row{
      grid-template-columns: 1fr;       /* 單欄 */
      gap: 0;
    }
    /* 兩張圖各佔一行，確保「兩張都出現」 */
    #highlights .card.media-row .media img:nth-child(1){ grid-column: 1; grid-row: 1; }
    #highlights .card.media-row .media img:nth-child(2){ grid-column: 1; grid-row: 2; }
    #highlights .card.media-row .media img{
      width: 100%;
      height: min(58vw, 320px);         /* 手機上設定視窗比例高度 */
      object-fit: cover;
    }
    /* 文字放第三行 */
    #highlights .card.media-row .pad-lg{
      grid-column: 1; grid-row: 3;
      padding: 16px;
      border: 0; border-top: 1px solid rgba(0,0,0,.06);
    }
    #highlights h2{ font-size: clamp(22px, 6.2vw, 26px); }
  
    /* ---------- About Us (#about) ---------- */
    #about{ padding-block: clamp(22px, 6vh, 38px); }
    #about .card.media-row{
      grid-template-columns: 1fr;       /* 單欄 */
      gap: 0;
    }
    #about .card.media-row .media img:nth-child(1){ grid-column: 1; grid-row: 1; }
    #about .card.media-row .media img:nth-child(2){ grid-column: 1; grid-row: 2; }
    #about .card.media-row .media img{
      width: 100%;
      height: min(58vw, 320px);
      object-fit: cover;
    }
    #about .card.media-row .pad-lg{
      grid-column: 1; grid-row: 3;
      padding: 16px;
      border: 0; border-top: 1px solid rgba(0,0,0,.06);
    }
    #about h2{ font-size: clamp(22px, 6.2vw, 26px); }
  
    /* ---------- Services ---------- */
    #services.section--paper{
      padding-block: 40px;
    }
    #services.section--paper > .container > h2{
      font-size: clamp(26px, 7vw, 32px);
      margin-bottom: 6px;
    }
    #services .svc-kicker{
      display:flex; flex-direction:column; gap:6px; letter-spacing:.06em;
    }
    #services .svc-kicker::before{ content:none !important; }   /* 關掉舊的 */
    /* 你若有用 .k-chunk 包起三段文字，下面這兩條會幫你加前綴符號 */
    #services .svc-kicker .k-chunk:first-child::before{ content:"— "; opacity:.6; }
    #services .svc-kicker .k-chunk:not(:first-child)::before{ content:"・ "; opacity:.9; }
    .svc-tabs{
      gap: 8px;
      padding: 10px;
      border-radius: 10px;
      grid-template-columns: 1fr;
    }
    .svc-inkbar{ display: none; }
    .svc-tabs label{
      padding: 12px;
      font-weight: 700;
    }
    .svc-cards{
      gap: 10px;
      grid-template-columns: 1fr;
    }
    .svc-card{
      padding: 14px;
      border-radius: 12px;
    }
    .svc-card h3{ font-size: 17px; }
    .svc-card p { font-size: 14.5px; }
  
    .svc-cta{
      gap: 10px;
      padding: 12px;
      flex-direction: column;
    }
    .svc-cta .muted{ font-size: 14px; }
    .svc-cta .btn{ width: 100%; }
  
    /* ---------- Contact ---------- */
    #contact .container > h2{ font-size: 32px; }
    #contact .contact-grid{ grid-template-columns: 1fr; gap: 14px; }
    #contact .row-3{ grid-template-columns: 1fr; }
    #contact textarea{ min-height: 180px; }
  
    /* ---------- Footer ---------- */
    #site-footer .footer-grid{
      grid-template-columns: 1fr; gap: 10px; text-align: center; justify-items: center;
    }
    #site-footer .meta-inline.meta-row li.address{ width: 100%; white-space: normal; line-height: 1.6; justify-content: center; }
    #site-footer .meta-inline.meta-row li.address a{
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    #site-footer.section--ink{ padding: 24px 0 16px; }
    #site-footer .foot-brand{
      justify-content: center;
      font-size: clamp(18px, 5.8vw, 22px);
    }
    #site-footer .meta-inline.meta-row{
      gap: 8px 14px;
      justify-content: center;
      text-align: center;
      width: 100%;
      flex-wrap: wrap;
      display: flex;
    }
    #site-footer .meta-inline.meta-row li{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      line-height: 1.6;
      max-width: 100%;
      text-align: center;
      gap: 6px;
    }
    #site-footer .meta-inline .label{
      display: inline-block;
      margin-right: 6px;
      font-size: 11.5px;
      letter-spacing: .1em;
    }
    #site-footer .legal-row{
      flex-direction: column;
      text-align: center;
      gap: 8px;
    }
    #site-footer .legal-links{
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }
  }

/* (========================================================================================================= section2 服務範圍 and 地球 ========================================================================================================= */
.globe3d-host{
  position: relative;
  overflow: hidden;
  isolation: isolate;             /* 建立新疊層，避免被其他區塊影響 */
}

/* three-globe 的畫布：鋪滿容器，置底 */
.globe3d-host > canvas,
.globe3d-host > div > canvas{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: inherit;
  transform: none !important;
  z-index: 1;
}

/* three-globe 產生的 HTML 外層容器（承載 htmlElementsData 的 <div>） */
.globe3d-host > div{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  z-index: 3;                     /* 高於 canvas，低於你的 hub 元件 */
}

/* 你的裝飾暗角層（如需） */
.globe3d-host::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 50%,
              rgba(0,0,0,0) 55%, rgba(0,0,0,.06) 100%);
  z-index: 2;                     /* 介於 canvas 與 HTML 容器之間 */
}

/* Hub 的 HTML 標籤（label/pill 都掛上這個 class） */
.label-hub{
  z-index: 5;                     /* 最高層，確保可見且可點 */
  pointer-events: auto;
  /* 不要設定 position/inset/transform，讓 three-globe 完整控制定位 */
}

/* 若頁面有純裝飾層，避免攔截滑鼠 */
.hero-bg, .muted{ pointer-events: none; }

/* 其他大區塊維持底層，避免壓過地球 */
.section, .container, .nav-inner{ position: relative; z-index: 0; }

/* 區塊內若有覆蓋在地球上的資訊面板，可拉高 */
.region-panel{ position: relative; z-index: 50; }

/* ===== 可調參數（白底＋文藝灰，顏色/位置/大小都能改） ===== */
.section--light{
  /* 色彩 */
  --svc-bg: #ffffff;                 /* 區塊背景 */
  --svc-text: #111827;               /* 主要文字 */
  --svc-muted: #4b5563;              /* 次要文字 */
  --svc-card-bg: #f8fafc;            /* 統計卡背景 */
  --svc-card-border: #eef2f7;        /* 統計卡邊線 */
  --svc-chip-bg: #ffffff;            /* 篩選 chip 背景 */
  --svc-chip-border: #e5e7eb;        /* 篩選 chip 邊線 */
  --svc-dot-tw: #F4C43A;             /* 圖例：台灣 */
  --svc-dot-jp: #E64545;             /* 圖例：日本 */
  --svc-dot-us: #3A6FF4;             /* 圖例：美國 */

  /* 字體大小控制 */
  --svc-title-size: clamp(32px, 2.6vw, 48px);          /* 主標題 */
  --svc-subtitle-size: 22px;                           /* 副標題 */
  --svc-stat-strong-size: clamp(20px, 2.6vw, 26px);    /* 統計數字 */
  --svc-stat-label-size: 14px;                         /* 統計說明 */
  --svc-chip-size: 15px;                               /* Chips */
  --svc-microcopy-size: 15px;                          /* 補充文字 */

  /* 外框寬度與整塊左右偏移（往左＝負值，往右＝正值） */
  --svc-max: 1480px;
  --svc-shift-x: 0px;

  /* 左文右球比例 */
  --svc-left-col: minmax(360px, 420px);                /* 左欄寬 */
  --svc-right-min: 760px;                              /* 右欄最小寬 */
  --svc-right-max: 1120px;                             /* 右欄最大寬 */
  --svc-grid-gap: clamp(32px, 4vw, 72px);              /* 欄間距 */

  /* 地球舞台大小/樣式（調這裡就能變大變小） */
  --globe-w: clamp(var(--svc-right-min), 60vw, var(--svc-right-max));
  --globe-h: clamp(520px, 60vh, 740px);
  --globe-radius: 16px;
  --globe-bg-1: #0f1722;
  --globe-bg-2: #0b1118;

  /* 只微調左欄的左右位移（往左＝負值） */
  --copy-shift-x: 0px;
  --copy-shift-y: 0px;
  background: var(--svc-bg);
  color: var(--svc-text);
  padding: clamp(56px, 6.5vw, 96px) 0;
  position: relative;   /* 建立自己的層疊上下文，避免與 hero 互相影響 */
  z-index: 0;
}

/* 容器：置中＋可整塊左右位移 */
.section--light .container{
  width: min(var(--svc-max), 94vw);
  margin-inline: auto;
  transform: translateX(var(--svc-shift-x));
  position: relative;
}

/* 兩欄布局：左文／右球 */
.section--light .grid-globe{
  display: grid;
  grid-template-columns: var(--svc-left-col) minmax(var(--svc-right-min), 1fr);
  gap: var(--svc-grid-gap);
  align-items: start;
  justify-content: center;
}

/* ----- 左欄：標題與說明 ----- */
.section--light .globe-copy {
  transform: translate(var(--copy-shift-x), var(--copy-shift-y));
  align-self: center;
}
.section--light .globe-copy .section-title{
  font-family: var(--font-serif-cjk);
  letter-spacing: .02em;
  margin: 0 0 6px;
  color: var(--svc-text);
  font-size: 36px;
}
.section--light .globe-copy .section-subtitle{
  margin: 0 0 16px;
  color: var(--svc-muted);
  font-size: var(--svc-subtitle-size);
  font-family: var(--font-serif-cjk);
  font-size: 18px;
}

/* 統計卡組 */
.section--light .stats{
  font-family: var(--font-serif-cjk);
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 18px;
  margin: 18px 0 12px;
  padding: 0;
  list-style: none;
}
.section--light .stats li{
  background: var(--svc-card-bg);
  border: 1px solid var(--svc-card-border);
  border-radius: 12px;
  padding: 14px 16px;
}
.section--light .stats strong{
  display: block;
  font-size: var(--svc-stat-strong-size);
  color: var(--svc-text);
}
.section--light .stats span{
  display: block;
  margin-top: 6px;
  color: var(--svc-muted);
  font-size: var(--svc-stat-label-size);
}

/* 篩選 chips */
.section--light .chips{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin: 10px 0 12px;
}
.section--light .chip{
  font-family: var(--font-serif-cjk);
  appearance: none;
  border: 1px solid var(--svc-chip-border);
  background: var(--svc-chip-bg);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: var(--svc-text);
  transition: box-shadow .2s ease, border-color .2s ease;
  font-size: var(--svc-chip-size);
}
.section--light .chip:hover{ border-color:#d1d5db; box-shadow: 0 2px 10px rgba(0,0,0,.05); }

/* 圖例 */
.section--light .legend{ margin-left: 6px; color: var(--svc-muted); font-size:13px; }
.section--light .legend .dot{
  display:inline-block; width:8px; height:8px; border-radius:999px; margin: 0 6px 0 10px; transform: translateY(-1px);
}
.section--light .legend .tw{ background: var(--svc-dot-tw); }
.section--light .legend .jp{ background: var(--svc-dot-jp); }
.section--light .legend .us{ background: var(--svc-dot-us); }

/* 補充說明 */
.section--light .microcopy{ 
  font-family: var(--font-serif-cjk);
  color: var(--svc-muted); margin: 12px 0 0; 
  font-size: var(--svc-microcopy-size);
}

/* ----- 右欄：地球舞台（容器本身） ----- */
.section--light .globe-stage{ position: relative;
  align-self: center; }

/* 只在 .section--light 裡設定尺寸/外觀，避免與全域打架 */
.section--light .globe3d-host{
  width: var(--globe-w);
  height: var(--globe-h);
  border-radius: var(--globe-radius);
  background: radial-gradient(120% 120% at 50% 0%, var(--globe-bg-1) 0%, var(--globe-bg-2) 100%);
  box-shadow: 0 24px 48px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.05);
  contain: paint;                  /* 只重繪自身，避免外溢影響 */
}

/* three.js / Canvas / HTML 注入層：在 .section--light 裡一樣鋪滿（層級已由全域基準處理） */
.section--light .globe3d-host > canvas,
.section--light .globe3d-host > div,
.section--light .globe3d-host > div > canvas{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  margin: 0 !important;
  display: block !important;
  border-radius: inherit;
}

/* 面板只有在 .show 時才吃滑鼠 */
.region-panel { pointer-events: none; }
.region-panel.show { pointer-events: auto; }

/* ===== SpriteText 的自訂樣式（若改用 html 標籤可移除） ===== */
.gl-label{
  font: 600 14px/1 var(--font-sans);
  color: #2b3240;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 0 0 2px rgba(255,255,255,.06) inset;
  white-space: nowrap;
}
.gl-label .dot{ width:8px; height:8px; border-radius:999px; margin-right:8px; display:inline-block; }
.gl-label.tw .dot{ background: var(--svc-dot-tw); box-shadow: 0 0 14px rgba(244,196,58,.6); }
.gl-label.jp .dot{ background: var(--svc-dot-jp); box-shadow: 0 0 14px rgba(230,69,69,.6); }
.gl-label.us .dot{ background: var(--svc-dot-us); box-shadow: 0 0 14px rgba(58,111,244,.6); }
.gl-label.is-hover{
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 16px 40px rgba(0,0,0,.26),
    0 0 0 2px rgba(255,255,255,.09) inset;
}

/* ===== 響應式（全部綁在 .section--light，避免全域高度互打） ===== */
@media (min-width: 3440px){
  .section--light{
    --copy-shift-x: -300px;
  }
}
@media (width: 2560px){
  .section--light{
    --copy-shift-x: -180px;
  }
}  
@media (max-width: 1920px){
  .section--light{
    --copy-shift-x: 0px;
    --svc-right-max: calc(var(--svc-max) - var(--svc-left-col) - var(--svc-grid-gap));
    --globe-w: clamp(var(--svc-right-min), 55vw, var(--svc-right-max));
  }
}  
/* 1440 以下：稍收比例 */
@media (max-width: 1440px){
  .section--light{
    --svc-left-col: minmax(330px, 380px);
    --svc-right-min: 680px;
    --svc-right-max: 1000px;
    --globe-h: clamp(480px, 56vh, 700px);
  }
}

/* 1200 以下：再收窄，球仍是主視覺 */
@media (max-width: 1200px){
  .section--light{
    --svc-left-col: minmax(300px, 340px);
    --svc-right-min: 600px;
    --svc-right-max: 900px;
    --globe-h: clamp(440px, 54vh, 640px);
  }
}

/* 1024 以下：改上下排，球滿版寬 */
@media (max-width: 1024px){
  .section--light .grid-globe{ grid-template-columns: 1fr; }
  .section--light{
    --globe-w: 100%;
    --globe-h: clamp(360px, 54vh, 560px);
    --svc-shift-x: 0px;    /* 手機移位歸零 */
    --copy-shift-x: 0px;
  }
}

/* 768 以下：字級、間距調整 */
@media (max-width: 768px){
  .section--light .globe-copy .section-title{ font-size: clamp(22px, 6vw, 26px); }
  .section--light .stats{ grid-template-columns: repeat(3, 1fr); gap:12px; }
}

/* =============================================================================================     Section 6: 合作流程（白色文藝風）    ============================================================================================= */
#workflow.section--paper{
  --paper:#ffffff; --ink:#1f2937; --muted:#6b7280; --line:rgba(0,0,0,.09);
  --brand:#111111;
  --card:#fff; --card-border:#e5e7eb;
  --card-shadow:0 4px 10px rgba(0,0,0,.06);
  --card-shadow-hover:0 14px 28px rgba(0,0,0,.12);
  --gap: 20px;
  background:
    radial-gradient(1100px 560px at 16% 0%, rgba(0,0,0,.028), transparent 62%),
    radial-gradient(900px 520px at 86% 100%, rgba(0,0,0,.035), transparent 64%),
    var(--paper);
  color:var(--ink);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

#workflow.section--paper > .container > h2{
  color:#111827!important; letter-spacing:.02em; line-height:1.25;
  text-shadow:0 1px 0 rgba(0,0,0,.02); font-family:var(--font-serif-cjk);
  font-size:45px;
}
#workflow.section--paper > .container > p{
  color:#374151!important; letter-spacing:.02em; line-height:1.55;
  text-shadow:0 1px 0 rgba(0,0,0,.02); font-family:var(--font-serif-cjk);
}

/* 視口：原生水平捲動；顯示橫向捲軸（桌機） */
.flow-viewport{
  position: relative;
  overflow-x: auto;               /* 用原生捲動 */
  overflow-y: visible;
  width: 100%;
  padding-inline: 20px;           /* ← 沒有按鈕了，縮小左右內距 */
  min-height: 420px;
  display: flex; align-items: center;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;  /* 每張卡會吸附對齊 */
  scroll-snap-stop: always;

  /* Firefox 捲軸樣式 */
  scrollbar-width: auto;
  scrollbar-color: rgba(0,0,0,.45) rgba(0,0,0,.16);
}

/* WebKit（Chrome/Safari/Edge）橫向捲軸樣式：對應你給的圖 */
.flow-viewport::-webkit-scrollbar{
  height: 16px;                   /* 橫向捲軸高度 */
}
.flow-viewport::-webkit-scrollbar-track{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
  margin-inline: 22px;            /* 讓左右兩端不會貼齊容器邊 */
}
.flow-viewport::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.45);
  border-radius: 999px;
}
.flow-viewport::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.60);
}

/* 左右漸層「簾子」：只做視覺，不擋點擊 */
.flow-viewport::before,
.flow-viewport::after{
  content:""; position:absolute; top:0; bottom:14px; /* 預留捲軸高度，避免遮到捲軸 */
  width:48px; z-index:3; pointer-events:none;
}
.flow-viewport::before{
  left:0;  background:linear-gradient(90deg, var(--paper) 0%, rgba(255,255,255,0) 100%);
}
.flow-viewport::after{
  right:0; background:linear-gradient(270deg, var(--paper) 0%, rgba(255,255,255,0) 100%);
}

/* 軌道：水平排列 */
.flow-rail{
  list-style:none; margin:0; padding:0;
  display:flex; gap: var(--gap,20px);
}

/* 卡片 */
.flow-step{
  flex: 0 0 300px;                /* 桌機卡片寬 */
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:18px;
  box-shadow:var(--card-shadow);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease, background .26s ease;
  position:relative; isolation:isolate; z-index:1;
  font-family:var(--font-serif-cjk);
  min-height:300px;
  scroll-snap-align: start;       /* 捲到卡片邊 */
}

#workflow.section--paper .flow-step h3{ margin:8px 0 8px; font-weight:800; color:var(--ink); }
#workflow.section--paper .flow-step p{ color:#374151; }
.step-tags{ margin:10px 0 0; padding-left:18px; color:#4b5563; }

/* 步驟圓點 + hover 效果（保留） */
.step-dot{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:800;
  box-shadow:0 6px 16px rgba(58,111,244,.28);
  transition: transform .26s ease, box-shadow .26s ease, filter .26s ease;
}
.flow-step:hover{ transform:translateY(-6px) scale(1.015); box-shadow:var(--card-shadow-hover); border-color:rgba(58,111,244,.35); }
.flow-step:hover .step-dot{ transform:translateY(-1px) scale(1.05); box-shadow:0 12px 26px rgba(58,111,244,.34); filter:saturate(1.05); }
.flow-step::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 20%, rgba(255,255,255,0) 35%) -120% 0/220% 100% no-repeat;
  transition:background-position .9s ease; z-index:0; pointer-events:none;
}
.flow-step:hover::after{ background-position:120% 0; }
.flow-step:focus-within{ outline:3px solid rgba(58,111,244,.25); outline-offset:2px; }

/* =============================================================================================     右側導覽     ============================================================================================= */
/* ========= 基礎：位置、縮起寬度、黑字 ========= */
#sideNav{
  position: fixed;
  top: 50%;
  right: 0; 
  transform: translateY(-50%);
  width: var(--nav-collapsed-w);
  height: 70vh;                /* 不用佔滿整個螢幕 */
  z-index: 50;
  border-radius: 18px;
  transition: width 260ms ease; /* 桌機只需要寬度動畫，背景保持透明 */
  overflow: hidden;
  display: flex; 
  flex-direction: column;

  /* 讓側欄自帶深色字，不受全站變數影響 */
  --nav-text: #1b1b1b;
  --nav-text-active: #000;
  --nav-bullet: #222;
  font-family: var(--font-serif-cjk);
  font-weight: 700;
}

/* 內層結構與一般樣式（與 JS 無關） */
#sideNav .nav-inner{ display:flex; flex-direction:column; height:100%; gap:12px; padding:10px 0; }
#sideNav .brand{ display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid var(--border); }
#sideNav .brand-text{ opacity:0; transition: opacity .16s; white-space:nowrap; }
#sideNav .nav-footer{ margin-top:auto; padding:12px; }
#sideNav .nav-footer .small{ font-size:12px; opacity:.85; }

/* 導覽列（icon + 文字），active 左側金條 */
#sideNav nav ul{ list-style:none; margin:0; padding:8px; display:grid; gap:6px; }
#sideNav nav a{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:12px;
  color: var(--nav-text); font-size:14px; border:1px solid transparent;
  transition: background .16s, color .16s, border-color .16s;
  white-space:nowrap;
}
#sideNav nav a .icon{ width:16px; height:16px; flex:0 0 16px; opacity:.9; }
#sideNav nav a:hover{ background: rgba(0,0,0,.06); color: var(--nav-text-active); }
#sideNav nav a.active{
  color: var(--nav-text-active);
  background: linear-gradient(180deg, var(--nav-active-bg-top), var(--nav-active-bg-bottom));
  border-left-color:#161616;    /* 只換顏色 */
  border-left-width:4px
}

/* 桌機：縮起時不顯示文字與 footer；hover 展開才顯示 */
#sideNav nav a span, 
#sideNav .nav-footer, 
#sideNav .brand-text{ 
  opacity:0; 
  transition: opacity .16s; 
}

/* 手機右下角展開按鈕基礎樣式（桌機會隱藏） */
#navToggle{
  position: fixed; right:16px; bottom:16px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  border:1px solid var(--border);
  background: rgba(20,22,28,.55);
  color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display:none; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
}
#navToggle:active{ transform: scale(.98); }

/* ========= 桌機（hover 展開；透明；隱藏兩顆按鈕） ========= */
@media (min-width:1025px){
  #navToggle, #sideNav .nav-close{ display: none !important; }
  :root{
    --nav-collapsed-w: 52px;
    --nav-expanded-w: 300px;
  }
  /* 縮小狀態：完全只留把手/自訂「主選單」標籤，其他全部藏起來 */
  #sideNav:not(:hover) .brand,                /* 含 logo 一起隱藏 */
  #sideNav:not(:hover) .brand-text,
  #sideNav:not(:hover) .nav-label,            /* nav 裡的「主選單」小標 */
  #sideNav:not(:hover) nav a span,            /* 連結文字 */
  #sideNav:not(:hover) .nav-footer,
  #sideNav:not(:hover) nav a .icon{           /* 小圖示也不露 */
    opacity: 0;
  }
  #sideNav:not(:hover) .nav-inner{ pointer-events: none; }
  #sideNav:not(:hover) .brand{ border-color: transparent; }
  #sideNav:not(:hover) nav a{ 
    background: transparent !important; 
    border-left: 0 !important; 
  }
  #sideNav:not(:hover) nav a.active{
    background: transparent !important; 
    border-left: 0 !important; 
  }
  /* 保證透明、靠右、展開才顯示內容 */
  #sideNav{
    right: 0;
    width: var(--nav-collapsed-w);
    overflow: visible;
    z-index: 1000;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    color: var(--nav-text, #111);
    border-radius: 18px 0 0 18px;
    position: fixed;
  }
  #sideNav .nav-inner{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  #sideNav::before{
    content: "主選單";
    position: absolute;
    top: 50%;
    left: -10px;                         /* 貼在窄條內側 */
    transform: translateY(-50%);
    writing-mode: vertical-rl;            /* 直排，中文字一個一個往下 */
    text-orientation: upright;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
    /* 讓它看起來像一顆膠囊按鈕，但其實不可點（pointer-events:none） */
    padding: 18px 8px;
    background: rgba(255,255,255,.96);
    color: #111;
    border: 1px solid rgba(0,0,0,.22);
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    pointer-events: none;
    /* 動畫 */
    opacity: 1;
    transition: opacity .2s ease, transform .25s ease;
  }
  /* 滑鼠移入側欄 → 展開，同時把標籤淡出 */
  #sideNav:hover::before{
    opacity: 0;
    transform: translateY(-50%) scale(.98);
  }
  /* 把手（縮起狀態可見） */
  #sideNav::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    transform: translateY(-50%);
    width: 10px;
    height: 64px;
    border-radius: 8px 0 0 8px;
    background: rgba(0,0,0,.28);
    pointer-events: none;
    transition: opacity .18s ease;
  }

  /* hover 展開：顯示內容，把手淡出 */
  #sideNav:hover{ 
    width: var(--nav-expanded-w);
    background: rgba(139, 139, 139, 0.72);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    overflow: hidden;
  }
  #sideNav:hover::after{ opacity: 0; }
  #sideNav:hover .brand,
  #sideNav:hover nav a{
    font-size: 16px;            /* 原本 14 → 16 */
    font-weight: 700;
  }
  #sideNav:hover nav a span,
  #sideNav:hover .nav-label{
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    letter-spacing: .02em;
  }
  #sideNav:hover nav a span,
  #sideNav:hover .nav-footer,
  #sideNav:hover nav a .icon{ opacity: 1; }
  /* 展開後：品牌區（logo + 優良商行）放大且顯示 */
  #sideNav:hover .brand{ opacity: 1; }
  #sideNav:hover .brand-logo{
    width: 44px;                /* 原 32 → 44，可再調 40~48 */
    height: 44px;
  }
  #sideNav:hover .brand-text{ opacity: 1; }

  /* 展開後：品牌主標/副標的字重與大小 */
  #sideNav:hover .brand-title{
    font-size: 18px;            /* 主標：優良商行 */
    font-weight: 800;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
  }
  #sideNav:hover .brand-sub{
    font-size: 12px;            /* 副標：Goodthing Co. */
    font-weight: 600;
    opacity: .85;
  }
}

/* ========= 手機（按鈕開關；展開時一律可見） ========= */
@media (max-width:1024px){
  /* 顯示兩顆按鈕 */
  #navToggle, #sideNav .nav-close{ display: inline-flex; }

  /* 從右側滑入；覆蓋桌機的 top/transformY 設定 */
  #sideNav{
    top: auto; 
    right: 16px; 
    bottom: 84px;
    transform: translateX(120%);        /* 預設縮起，不擋內容 */
    width: clamp(320px, 82vw, 420px);
    max-height: 72vh; height: auto;
    border-radius: 16px;

    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;

    transition: transform 260ms ease;
  }
  #sideNav .nav-inner{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  #sideNav.open{ transform: translateX(0); }

  /* 手機展開時，內容一律可見 */
  #sideNav nav a span, 
  #sideNav .nav-footer, 
  #sideNav .brand-text{ opacity:1; }

  /* 手機收合鍵樣式 */
  #sideNav .nav-close{
    position: absolute;
    top: 10px; right: 10px;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(255,255,255,.75);
    color: #111; font-size: 20px; line-height: 1;
  }
}

/* 讓地球上標籤可以互動 */
.label-hub {
  pointer-events: auto;
  z-index: 5;
}

/* 避免 three-globe 的透明 div 擋住滑鼠 */
.globe3d-host > div {
  pointer-events: none;
}