/* ==========================================================================
   基礎樣式、容器、頂列、Header、Footer
   對應 02_設計規格表.md 第 4.1~4.2 節
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 跳到錨點時要扣掉固定頁首的高度，否則區塊標題會被頁首蓋住。
   頁首 82u + 一點呼吸空間。 */
:target, .section[id], [id^="s-"] { scroll-margin-top: calc(94 * var(--u)); }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }

/* 跳至主要內容 —— 鍵盤使用者 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--c-teal); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 2px;
}
.on-dark :focus-visible { outline-color: var(--c-orange); }

/* --- 容器：1200u，占視窗寬 92.8%（第 1 節）--- */
.container {
  width: calc(1200 * var(--u));
  max-width: calc(1200 * var(--u));
  margin-inline: auto;
}

/* --- 頂部資訊列：高 42u --- */
.topbar {
  background: var(--c-teal);
  color: var(--c-white);
  height: calc(27 * var(--u));
  display: flex; align-items: center;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 400;
}
.topbar__right { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.topbar__phone { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.topbar a:hover { color: var(--c-orange); }
.lang-switch { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.lang-switch__current { color: var(--c-orange); font-weight: 500; }
.lang-switch__sep { opacity: .5; }

/* --- Header：高 96u --- */
.site-header {
  background: var(--c-white);
  height: calc(82 * var(--u));
  display: flex; align-items: center;
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(24 * var(--u));
}
.site-logo { display: flex; align-items: center; }
/* 稿面 Logo 約 284u 寬；素材 SVG 比例 3.57:1，以高度 68u 得寬約 243u */
.site-logo img, .site-logo svg { height: calc(68 * var(--u)); width: auto; }

.main-nav { display: flex; align-items: center; gap: calc(26 * var(--u)); }
.main-nav__link {
  color: var(--c-teal);
  font-size: max(var(--u-min-font), calc(17 * var(--u)));
  font-weight: 500;
  padding-block: calc(6 * var(--u));
  border-bottom: calc(2 * var(--u)) solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.main-nav__link:hover,
.main-nav__link[aria-current="page"] {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

/* 下拉（關於佳泰 → 訪客留言） */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; min-width: calc(180 * var(--u));
  background: var(--c-white); box-shadow: var(--shadow-card);
  border-radius: var(--radius-btn); padding: calc(8 * var(--u)) 0;
  opacity: 0; visibility: hidden; transform: translateY(calc(4 * var(--u)));
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  display: block; padding: calc(10 * var(--u)) calc(18 * var(--u));
  font-size: max(var(--u-min-font), calc(16 * var(--u)));
  color: var(--c-teal);
}
.nav-dropdown a:hover { color: var(--c-orange); background: var(--c-teal-soft); }

.nav-toggle { display: none; }

/* --- Footer：依使用者要求只保留版權列（稿面 18px → 27u 高的深底單列） --- */
.site-footer {
  background: var(--c-teal);
  color: var(--c-white);
  padding-top: 0;
  padding-bottom: calc(16 * var(--u));
}
/* 與上方的 CTA 同色相連，靠這條細線分隔 */
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: calc(12 * var(--u));
  align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: calc(16 * var(--u));
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  opacity: .92;
}
.site-footer__keywords { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.site-footer__keywords span::after { content: "｜"; opacity: .4; margin-left: calc(8 * var(--u)); }
.site-footer__keywords span:last-child::after { content: ""; }
.site-footer__version { opacity: .55; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* --- 區段底色 --- */
.section { padding-block: calc(33 * var(--u)); }
.section--white { background: var(--c-white); }
.section--gray { background: var(--c-bg-section); }
.section--hero { background: var(--c-bg-hero); }
.section--dark { background: var(--c-teal); color: var(--c-white); }

.section__head { margin-bottom: calc(16 * var(--u)); }
.section__eyebrow {
  color: var(--c-orange);
  font-size: max(var(--u-min-font), calc(12 * var(--u)));
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: calc(8 * var(--u));
}
.section__title {
  color: var(--c-navy);
  font-size: calc(24 * var(--u));
  font-weight: 700;
  line-height: 1.35;
}
.section__subtitle {
  color: var(--c-text);
  font-size: max(var(--u-min-font), calc(14 * var(--u)));
  margin-top: calc(6 * var(--u));
}
.section__head--with-sub + * { margin-top: calc(14 * var(--u)); }
/* 稿面：核心應用與服務區的標題置中，流程與特色靠左 */
.section__head--center { text-align: center; }

/* 純內文頁 */
.prose { max-width: calc(820 * var(--u)); }
.prose h2 {
  color: var(--c-navy); font-size: calc(26 * var(--u)); font-weight: 700;
  margin-top: calc(32 * var(--u)); margin-bottom: calc(12 * var(--u));
}
.prose h3 {
  color: var(--c-teal); font-size: calc(20 * var(--u)); font-weight: 700;
  margin-top: calc(24 * var(--u)); margin-bottom: calc(8 * var(--u));
}
.prose p, .prose li {
  font-size: max(var(--u-min-font), calc(17 * var(--u)));
  line-height: 1.8; margin-bottom: calc(12 * var(--u));
}
.prose ul { list-style: disc; padding-left: calc(22 * var(--u)); }
.prose a { color: var(--c-teal); text-decoration: underline; }
.prose a:hover { color: var(--c-orange); }
.prose table { width: 100%; border-collapse: collapse; margin-block: calc(16 * var(--u)); }
.prose th, .prose td {
  border: 1px solid var(--c-border); padding: calc(10 * var(--u)) calc(12 * var(--u));
  font-size: max(var(--u-min-font), calc(15 * var(--u))); text-align: left;
}
.prose th { background: var(--c-teal-soft); color: var(--c-teal); font-weight: 700; }


/* 內文超連結 */
.inline-link {
  color: var(--c-teal); text-decoration: underline;
  text-decoration-color: rgba(0, 73, 85, .35); text-underline-offset: 2px;
}
.inline-link:hover { color: var(--c-orange); text-decoration-color: currentColor; }
.on-dark .inline-link, .section--dark .inline-link { color: #fff; text-decoration-color: rgba(255,255,255,.5); }