From 73d7d3689d83d33ca68ca3f0c251c3240453333d Mon Sep 17 00:00:00 2001
From: haotool <haotool.org@gmail.com>
Date: Sun, 17 May 2026 02:27:29 +0800
Subject: [PATCH 1/3] =?UTF-8?q?fix(ratewise):=20=E6=94=B6=E6=96=82?=
 =?UTF-8?q?=E6=94=AF=E6=8F=B4=E8=B3=87=E8=A8=8A=E5=B0=8E=E8=A6=BD=E9=AB=94?=
 =?UTF-8?q?=E9=A9=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重構支援與資訊入口為 SSOT 導覽與四語系描述卡片

- 補齊公開頁 safe-area header、行動版 footer 與高對比 active pill token

- 同步 SEO 技術頁、Settings skeleton、Guide 錨點與測試 guardrail

測試：pnpm --filter @app/ratewise test -- PageNavHeader Guide Skeleton tokens Settings

測試：pnpm --filter @app/ratewise typecheck

測試：pnpm --filter @app/ratewise build

測試：Playwright Chromium Firefox WebKit iPhone smoke
---
 .changeset/ratewise-support-info-ia.md        |   5 +
 apps/ratewise/src/components/Layout.tsx       |   6 +-
 .../ratewise/src/components/PageNavHeader.tsx | 106 ++++++++++---
 .../src/components/SkeletonLoader.tsx         |  20 ++-
 .../__tests__/PageNavHeader.test.tsx          |  67 +++++++++
 .../__tests__/SkeletonLoader.test.tsx         |   7 +-
 .../ratewise/src/config/design-tokens.test.ts |  77 ++++++++++
 apps/ratewise/src/config/design-tokens.ts     |   6 +
 apps/ratewise/src/config/support-info.ts      |  17 +++
 apps/ratewise/src/config/themes.ts            |   8 +
 apps/ratewise/src/i18n/locales/en.ts          |  10 ++
 apps/ratewise/src/i18n/locales/ja.ts          |   9 ++
 apps/ratewise/src/i18n/locales/ko.ts          |   9 ++
 apps/ratewise/src/i18n/locales/zh-TW.ts       |   9 ++
 apps/ratewise/src/index.css                   |   6 +
 apps/ratewise/src/pages/Guide.test.tsx        |   9 ++
 apps/ratewise/src/pages/Guide.tsx             |   3 +-
 apps/ratewise/src/pages/OpenData.test.tsx     |   2 +-
 apps/ratewise/src/pages/SeoTech.tsx           |  28 ++--
 .../src/pages/Settings.hydration.test.tsx     |  16 ++
 apps/ratewise/src/pages/Settings.tsx          | 139 +++++++++++-------
 apps/ratewise/tailwind.config.ts              |   1 +
 .../dev/002_development_reward_penalty_log.md |   7 +-
 23 files changed, 454 insertions(+), 113 deletions(-)
 create mode 100644 .changeset/ratewise-support-info-ia.md
 create mode 100644 apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
 create mode 100644 apps/ratewise/src/config/support-info.ts

diff --git a/.changeset/ratewise-support-info-ia.md b/.changeset/ratewise-support-info-ia.md
new file mode 100644
index 000000000..b9e1439e4
--- /dev/null
+++ b/.changeset/ratewise-support-info-ia.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+重構支援與資訊入口與公開內容頁導覽：公開頁 header 新增品牌、麵包屑與支援分群導覽，手機版公開頁恢復 footer，設定頁支援區改為可掃描卡片並補齊四語系描述。
diff --git a/apps/ratewise/src/components/Layout.tsx b/apps/ratewise/src/components/Layout.tsx
index 7eef9035b..793bb6a69 100644
--- a/apps/ratewise/src/components/Layout.tsx
+++ b/apps/ratewise/src/components/Layout.tsx
@@ -71,10 +71,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
             {/* 主要內容 */}
             <main className="min-h-full [overscroll-behavior-y:contain]">{children}</main>
 
-            {/* 頁尾 - Stage 6：內部連結結構（僅桌面版顯示） */}
-            <div className="hidden md:block">
-              <Footer />
-            </div>
+            {/* 頁尾 - Stage 6：內部連結結構（Footer 內含行動版與桌面版佈局） */}
+            <Footer />
           </div>
         </ErrorBoundary>
 
diff --git a/apps/ratewise/src/components/PageNavHeader.tsx b/apps/ratewise/src/components/PageNavHeader.tsx
index 39709e073..c97bc885a 100644
--- a/apps/ratewise/src/components/PageNavHeader.tsx
+++ b/apps/ratewise/src/components/PageNavHeader.tsx
@@ -2,24 +2,49 @@
  * SEO 內容頁共用的返回導覽與麵包屑區塊。
  */
 
-import { useNavigate } from 'react-router-dom';
-import { ChevronLeft } from 'lucide-react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import {
+  BookOpen,
+  ChevronLeft,
+  Database,
+  HelpCircle,
+  Info,
+  SearchCheck,
+  ShieldCheck,
+  type LucideIcon,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Breadcrumb, type BreadcrumbItem } from './Breadcrumb';
+import { APP_INFO } from '../config/app-info';
+import { SUPPORT_INFO_LINKS, type SupportInfoHref } from '../config/support-info';
+
+const SUPPORT_INFO_ICON_BY_HREF = {
+  '/faq/': HelpCircle,
+  '/guide/': BookOpen,
+  '/about/': Info,
+  '/open-data/': Database,
+  '/seo-tech/': SearchCheck,
+  '/privacy/': ShieldCheck,
+} satisfies Record<SupportInfoHref, LucideIcon>;
 
 export interface PageNavHeaderProps {
   breadcrumbItems: BreadcrumbItem[];
   fallbackHref?: string;
+  showSupportNav?: boolean;
   className?: string;
 }
 
 export function PageNavHeader({
   breadcrumbItems,
   fallbackHref = '/',
+  showSupportNav,
   className = '',
 }: PageNavHeaderProps) {
   const navigate = useNavigate();
+  const location = useLocation();
   const { t } = useTranslation();
+  const shouldShowSupportNav =
+    showSupportNav ?? SUPPORT_INFO_LINKS.some((item) => item.href === location.pathname);
 
   const handleBack = () => {
     if (window.history.length > 1) {
@@ -30,29 +55,64 @@ export function PageNavHeader({
   };
 
   return (
-    <div
-      className={`sticky top-0 z-20 -mx-4 px-4 py-2.5 mb-6
-        bg-background/90 backdrop-blur-md
-        border-b border-border/50 ${className}`}
+    <header
+      className={`sticky top-0 z-20 -mx-4 mb-6 border-b border-border/60 bg-background/95 shadow-sm shadow-primary/5 backdrop-blur-xl ${className}`}
+      style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}
     >
-      <div className="flex min-h-[44px] items-center gap-3">
-        <button
-          type="button"
-          onClick={handleBack}
-          className="inline-flex shrink-0 items-center gap-1 cursor-pointer
-            text-sm font-medium text-primary
-            transition-colors hover:text-primary-hover"
-          aria-label={t('common.back')}
-        >
-          <ChevronLeft className="h-4 w-4" aria-hidden="true" />
-          <span>{t('common.back')}</span>
-        </button>
-
-        <span className="h-4 w-px bg-border/60 shrink-0" aria-hidden="true" />
-
-        <Breadcrumb items={breadcrumbItems} />
+      <div className="px-4 py-2.5">
+        <div className="flex min-h-[44px] items-center gap-3">
+          <button
+            type="button"
+            onClick={handleBack}
+            className="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center gap-1 rounded-full border border-border/70 bg-surface px-3 text-sm font-semibold text-primary shadow-sm transition-colors hover:border-primary/40 hover:bg-primary/5 hover:text-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            aria-label={t('common.back')}
+          >
+            <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+            <span>{t('common.back')}</span>
+          </button>
+
+          <Link
+            to="/"
+            className="min-w-0 flex-1 rounded-xl px-1 py-0.5 transition-colors hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            aria-label={t('nav.home')}
+          >
+            <span className="block text-[10px] font-black uppercase tracking-[0.18em] text-text-muted">
+              {t('settings.supportInfo')}
+            </span>
+            <span className="block truncate text-sm font-bold text-text">{APP_INFO.name}</span>
+          </Link>
+        </div>
+
+        <Breadcrumb items={breadcrumbItems} className="mt-2" />
+
+        {shouldShowSupportNav ? (
+          <nav aria-label={t('settings.supportInfo')} className="-mx-1 mt-3 overflow-x-auto">
+            <div className="flex min-w-max gap-2 px-1 pb-1">
+              {SUPPORT_INFO_LINKS.map((item) => {
+                const Icon = SUPPORT_INFO_ICON_BY_HREF[item.href];
+                const isActive = location.pathname === item.href;
+
+                return (
+                  <Link
+                    key={item.href}
+                    to={item.href}
+                    aria-current={isActive ? 'page' : undefined}
+                    className={`inline-flex h-9 items-center gap-1.5 rounded-full border px-3 text-xs font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background ${
+                      isActive
+                        ? 'border-primary bg-primary/10 text-active-pill-foreground shadow-sm ring-1 ring-primary/20'
+                        : 'border-border/70 bg-surface text-text-muted hover:border-primary/40 hover:bg-primary/5 hover:text-primary'
+                    }`}
+                  >
+                    <Icon className="h-3.5 w-3.5" aria-hidden="true" />
+                    <span>{t(item.labelKey)}</span>
+                  </Link>
+                );
+              })}
+            </div>
+          </nav>
+        ) : null}
       </div>
-    </div>
+    </header>
   );
 }
 
diff --git a/apps/ratewise/src/components/SkeletonLoader.tsx b/apps/ratewise/src/components/SkeletonLoader.tsx
index 9caf03054..d335959a1 100644
--- a/apps/ratewise/src/components/SkeletonLoader.tsx
+++ b/apps/ratewise/src/components/SkeletonLoader.tsx
@@ -289,18 +289,26 @@ export const SettingsSkeleton = () => {
         </div>
       </section>
 
-      {/* 支援與資訊區塊 — 對應 Settings.tsx HelpCircle section（4 個連結列）*/}
+      {/* 支援與資訊區塊 — 對應 Settings.tsx HelpCircle section（7 張資訊卡） */}
       <section className="space-y-3">
         <div className="skeleton-shimmer h-4 w-28 rounded" />
-        <div className="skeleton-card overflow-hidden divide-y divide-border">
-          {[1, 2, 3, 4].map((i) => (
+        <div
+          data-testid="skeleton-settings-support-desc"
+          className="skeleton-shimmer h-8 w-full rounded-xl"
+        />
+        <div className="grid gap-3 sm:grid-cols-2">
+          {[1, 2, 3, 4, 5, 6, 7].map((i) => (
             <div
               key={i}
               data-testid="skeleton-settings-link"
-              className="px-5 py-4 flex items-center justify-between"
+              className="skeleton-card flex min-h-[92px] items-center gap-3 p-4"
             >
-              <div className="skeleton-shimmer h-4 w-24 rounded" />
-              <div className="skeleton-shimmer h-4 w-4 rounded" />
+              <div className="skeleton-shimmer h-10 w-10 flex-shrink-0 rounded-2xl" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="skeleton-shimmer h-4 w-28 rounded" />
+                <div className="skeleton-shimmer h-3 w-full rounded" />
+                <div className="skeleton-shimmer h-3 w-3/4 rounded" />
+              </div>
             </div>
           ))}
         </div>
diff --git a/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx b/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
new file mode 100644
index 000000000..0812f4e84
--- /dev/null
+++ b/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import { MemoryRouter } from 'react-router-dom';
+import { PageNavHeader } from '../PageNavHeader';
+import { APP_INFO } from '../../config/app-info';
+import { SUPPORT_INFO_LINKS } from '../../config/support-info';
+
+const breadcrumbItems = [
+  { label: '首頁', href: '/' },
+  { label: '常見問題', href: '/faq/' },
+];
+
+function renderHeader(path = '/faq/', basename?: string) {
+  return render(
+    <MemoryRouter basename={basename} initialEntries={[path]}>
+      <PageNavHeader breadcrumbItems={breadcrumbItems} />
+    </MemoryRouter>,
+  );
+}
+
+describe('PageNavHeader', () => {
+  it('在公開內容頁顯示品牌、返回與麵包屑', () => {
+    renderHeader();
+
+    expect(screen.getByRole('button', { name: '返回' })).toBeInTheDocument();
+    expect(screen.getAllByRole('link', { name: '首頁' }).length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByText(APP_INFO.name)).toBeInTheDocument();
+    expect(screen.getByRole('navigation', { name: /麵包屑/ })).toBeInTheDocument();
+  });
+
+  it('顯示支援與資訊分群導覽並標示目前頁面', () => {
+    renderHeader('/open-data/');
+
+    const supportNav = screen.getByRole('navigation', { name: '支援與資訊' });
+    expect(supportNav).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /常見問題/ })).toHaveAttribute('href', '/faq/');
+    expect(screen.getByRole('link', { name: /使用指南/ })).toHaveAttribute('href', '/guide/');
+    expect(screen.getByRole('link', { name: /關於我們/ })).toHaveAttribute('href', '/about/');
+    expect(
+      Array.from(supportNav.querySelectorAll('a')).map((link) => link.getAttribute('href')),
+    ).toEqual(SUPPORT_INFO_LINKS.map((item) => item.href));
+    const activeLink = screen.getByRole('link', { name: /開放資料 API/ });
+    expect(activeLink).toHaveAttribute('aria-current', 'page');
+    expect(activeLink).toHaveClass('text-active-pill-foreground');
+    expect(activeLink).not.toHaveClass('text-white');
+  });
+
+  it('非支援資訊頁不顯示支援分群導覽', () => {
+    renderHeader('/usd-twd/');
+
+    expect(screen.queryByRole('navigation', { name: '支援與資訊' })).not.toBeInTheDocument();
+  });
+
+  it('在 basename 部署下產生正確連結', () => {
+    renderHeader('/ratewise/faq/', '/ratewise');
+
+    expect(screen.getByRole('link', { name: /常見問題/ })).toHaveAttribute(
+      'href',
+      '/ratewise/faq/',
+    );
+    expect(screen.getAllByRole('link', { name: '首頁' })[0]).toHaveAttribute(
+      'href',
+      expect.stringMatching(/^\/ratewise\/?$/),
+    );
+  });
+});
diff --git a/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx b/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx
index 6f2ae7dc1..e06690406 100644
--- a/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx
+++ b/apps/ratewise/src/components/__tests__/SkeletonLoader.test.tsx
@@ -175,11 +175,12 @@ describe('SettingsSkeleton', () => {
     expect(dangerBtn).toBeInTheDocument();
   });
 
-  it('包含支援資訊連結列（4 個 skeleton-settings-link）', () => {
-    // Settings.tsx 第 5 個 section：FAQ / 使用說明 / 關於我們 / 開源 (4 links px-5 py-4)
+  it('包含支援資訊卡片骨架（7 個 skeleton-settings-link）', () => {
+    // Settings.tsx 第 5 個 section：FAQ / Guide / About / Privacy / API / SEO / GitHub
     const { container } = render(<SettingsSkeleton />);
     const links = container.querySelectorAll('[data-testid="skeleton-settings-link"]');
-    expect(links).toHaveLength(4);
+    expect(links).toHaveLength(7);
+    expect(screen.getByTestId('skeleton-settings-support-desc')).toBeInTheDocument();
   });
 });
 
diff --git a/apps/ratewise/src/config/design-tokens.test.ts b/apps/ratewise/src/config/design-tokens.test.ts
index 27b9fb497..5aea6eae3 100644
--- a/apps/ratewise/src/config/design-tokens.test.ts
+++ b/apps/ratewise/src/config/design-tokens.test.ts
@@ -36,6 +36,65 @@ function rgbTripletToHex(triplet: string): string {
     .join('')}`;
 }
 
+function getThemeCssBlock(style: ThemeStyle): string {
+  const pattern =
+    style === 'zen'
+      ? /:root,\s*\n\s*\[data-style='zen'\]\s*\{[\s\S]*?\n\s*\}/
+      : new RegExp(`\\[data-style='${style}'\\]\\s*\\{[\\s\\S]*?\\n\\s*\\}`);
+
+  const block = indexCss.match(pattern)?.[0];
+  expect(block).toBeDefined();
+
+  return block ?? '';
+}
+
+function getThemeCssVar(style: ThemeStyle, name: string): string | undefined {
+  const block = getThemeCssBlock(style);
+  const match = new RegExp(`${name}: ([^;]+);`).exec(block);
+
+  return match?.[1]?.trim();
+}
+
+function relativeLuminance(triplet: string): number {
+  const [red, green, blue] = parseRgbTriplet(triplet);
+  const [redLinear = 0, greenLinear = 0, blueLinear = 0] = [red, green, blue].map((channel) => {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  });
+
+  return 0.2126 * redLinear + 0.7152 * greenLinear + 0.0722 * blueLinear;
+}
+
+function parseRgbTriplet(triplet: string): [number, number, number] {
+  const [red = 0, green = 0, blue = 0] = triplet.split(/\s+/).map(Number);
+  return [red, green, blue];
+}
+
+function compositeRgbTriplet(
+  foreground: string,
+  background: string,
+  foregroundAlpha: number,
+): string {
+  const foregroundChannels = parseRgbTriplet(foreground);
+  const backgroundChannels = parseRgbTriplet(background);
+
+  return foregroundChannels
+    .map((channel, index) => {
+      const backgroundChannel = backgroundChannels[index] ?? 0;
+      return channel * foregroundAlpha + backgroundChannel * (1 - foregroundAlpha);
+    })
+    .join(' ');
+}
+
+function contrastRatio(foreground: string, background: string): number {
+  const foregroundLuminance = relativeLuminance(foreground);
+  const backgroundLuminance = relativeLuminance(background);
+  const lighter = Math.max(foregroundLuminance, backgroundLuminance);
+  const darker = Math.min(foregroundLuminance, backgroundLuminance);
+
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
 function getCriticalBootstrapEntry(style: ThemeStyle) {
   const match = new RegExp(`${style}: \\['([^']+)', '([^']+)', '(light|dark)'\\]`).exec(indexHtml);
   expect(match).not.toBeNull();
@@ -409,6 +468,9 @@ describe('Design Token System - BDD', () => {
       expect(extendColors['accent']).toBe('rgb(var(--color-accent) / <alpha-value>)');
       expect(extendColors['info']).toBe('rgb(var(--color-info) / <alpha-value>)');
       expect(extendColors['error']).toBe('rgb(var(--color-error) / <alpha-value>)');
+      expect(extendColors['active-pill-foreground']).toBe(
+        'rgb(var(--color-active-pill-foreground) / <alpha-value>)',
+      );
       expect(surface['secondary']).toBe('rgb(var(--color-surface-secondary) / <alpha-value>)');
       expect(surface['card']).toBe('rgb(var(--color-surface-card) / <alpha-value>)');
       expect(surface['border']).toBe('rgb(var(--color-surface-border) / <alpha-value>)');
@@ -502,5 +564,20 @@ describe('Design Token System - BDD', () => {
         expect(getSkeletonVar(style, '--sk-text-muted')).toBe(expected.textMuted);
       }
     });
+
+    it('active pill 前景 token 應該對齊 theme SSOT 並符合 WCAG AA', () => {
+      for (const style of themeStyles) {
+        const definition = STYLE_DEFINITIONS[style];
+        const foreground = definition.colors.activePillForeground;
+        const activePillBackground = compositeRgbTriplet(
+          definition.colors.primary,
+          definition.colors.surface,
+          0.1,
+        );
+
+        expect(getThemeCssVar(style, '--color-active-pill-foreground')).toBe(foreground);
+        expect(contrastRatio(foreground, activePillBackground)).toBeGreaterThanOrEqual(4.5);
+      }
+    });
   });
 });
diff --git a/apps/ratewise/src/config/design-tokens.ts b/apps/ratewise/src/config/design-tokens.ts
index d12d5aeda..9e7600cf4 100644
--- a/apps/ratewise/src/config/design-tokens.ts
+++ b/apps/ratewise/src/config/design-tokens.ts
@@ -173,6 +173,12 @@ export const semanticColors = {
     via: 'rgb(var(--color-footer-via) / <alpha-value>)',
     to: 'rgb(var(--color-footer-to) / <alpha-value>)',
   },
+
+  /**
+   * Active pill 前景色
+   * 用途：小尺寸導覽 active 狀態，需跨所有主題符合 WCAG AA 4.5:1。
+   */
+  'active-pill-foreground': 'rgb(var(--color-active-pill-foreground) / <alpha-value>)',
 } as const;
 
 /**
diff --git a/apps/ratewise/src/config/support-info.ts b/apps/ratewise/src/config/support-info.ts
new file mode 100644
index 000000000..97effbc47
--- /dev/null
+++ b/apps/ratewise/src/config/support-info.ts
@@ -0,0 +1,17 @@
+/**
+ * 支援與資訊 IA SSOT。
+ *
+ * 這裡只存放跨入口共用的公開內容頁連結；Settings 可在此清單後追加
+ * GitHub 等設定頁專屬外部入口。
+ */
+export const SUPPORT_INFO_LINKS = [
+  { href: '/faq/', labelKey: 'settings.faq', descKey: 'settings.faqDesc' },
+  { href: '/guide/', labelKey: 'settings.usageGuide', descKey: 'settings.usageGuideDesc' },
+  { href: '/about/', labelKey: 'settings.aboutUs', descKey: 'settings.aboutUsDesc' },
+  { href: '/open-data/', labelKey: 'settings.openDataApi', descKey: 'settings.openDataApiDesc' },
+  { href: '/seo-tech/', labelKey: 'settings.seoTech', descKey: 'settings.seoTechDesc' },
+  { href: '/privacy/', labelKey: 'settings.privacyPolicy', descKey: 'settings.privacyPolicyDesc' },
+] as const;
+
+export type SupportInfoLink = (typeof SUPPORT_INFO_LINKS)[number];
+export type SupportInfoHref = SupportInfoLink['href'];
diff --git a/apps/ratewise/src/config/themes.ts b/apps/ratewise/src/config/themes.ts
index d97e1cc3b..53dc2b740 100644
--- a/apps/ratewise/src/config/themes.ts
+++ b/apps/ratewise/src/config/themes.ts
@@ -51,6 +51,7 @@ export interface ThemeConfig {
  * - secondary: 輔色（次要互動、支援元素）
  * - accent: 強調色（高亮、焦點）
  * - border: 邊框/分隔線
+ * - activePillForeground: 小尺寸 active pill 文字（需符合 WCAG AA）
  *
  * ## 狀態語義色彩（4 個）
  * - info: 資訊提示（藍色系）
@@ -73,6 +74,7 @@ interface SemanticColors {
   secondary: string;
   accent: string;
   border: string;
+  activePillForeground: string;
   // 狀態語義色彩
   info: string;
   success: string;
@@ -123,6 +125,7 @@ const zenStyle: StyleDefinition = {
     secondary: '71 85 105', // slate-600
     accent: '59 130 246', // blue-500
     border: '226 232 240', // slate-200
+    activePillForeground: '91 33 182', // violet-800
     // 狀態色彩
     info: '14 165 233', // sky-500
     success: '34 197 94', // green-500
@@ -157,6 +160,7 @@ const nitroStyle: StyleDefinition = {
     secondary: '129 140 248', // indigo-400
     accent: '0 255 136', // neon green
     border: '30 41 59', // slate-800
+    activePillForeground: '255 255 255',
     // 狀態色彩
     info: '56 189 248',
     success: '52 211 153',
@@ -191,6 +195,7 @@ const kawaiiStyle: StyleDefinition = {
     secondary: '236 72 153', // pink-500
     accent: '255 182 193', // light pink
     border: '255 228 225', // misty rose
+    activePillForeground: '157 23 77', // pink-800
     // 狀態色彩 - 柔和可愛風
     info: '147 197 253', // blue-300 - 天空藍
     success: '134 239 172', // green-300 - 薄荷綠
@@ -225,6 +230,7 @@ const classicStyle: StyleDefinition = {
     secondary: '161 98 7', // amber-700 - 琥珀
     accent: '180 120 80', // tan - 棕褐
     border: '245 230 220', // linen - 亞麻
+    activePillForeground: '67 20 7', // dark brown
     // 狀態色彩 - 復古調性
     info: '59 130 246', // blue-500 - 墨水藍
     success: '22 163 74', // green-600 - 橄欖綠
@@ -259,6 +265,7 @@ const oceanStyle: StyleDefinition = {
     secondary: '20 184 166', // teal-500 - 青綠
     accent: '2 132 199', // sky-600 - 天空藍
     border: '186 230 253', // sky-200
+    activePillForeground: '22 78 99', // cyan-900
     // 狀態色彩 - 海洋風格
     info: '14 165 233', // sky-500
     success: '20 184 166', // teal-500
@@ -293,6 +300,7 @@ const forestStyle: StyleDefinition = {
     secondary: '132 204 22', // lime-500 - 青檸
     accent: '22 163 74', // green-600 - 森林綠
     border: '187 247 208', // green-200
+    activePillForeground: '20 83 45', // green-800
     // 狀態色彩 - 自然風格
     info: '59 130 246', // blue-500
     success: '34 197 94', // green-500
diff --git a/apps/ratewise/src/i18n/locales/en.ts b/apps/ratewise/src/i18n/locales/en.ts
index 7729dc744..f0a864b3c 100644
--- a/apps/ratewise/src/i18n/locales/en.ts
+++ b/apps/ratewise/src/i18n/locales/en.ts
@@ -25,6 +25,7 @@ const en = {
     copy: 'Copy',
     copied: 'Copied',
     clickToCopy: 'Click to copy',
+    opensInNewWindow: ' (opens in a new window)',
   },
 
   // Navigation
@@ -161,13 +162,22 @@ const en = {
       'Buy/sell midpoint, less precise — useful as a forex market reference for traders',
     // Support & Info section
     supportInfo: 'Support & Info',
+    supportInfoDesc: 'Usage, data sources, privacy, and technical transparency are grouped here.',
     faq: 'FAQ',
+    faqDesc: 'Clarify buy/sell rates, cash vs spot, card rates, and data freshness.',
     usageGuide: 'Usage Guide',
+    usageGuideDesc:
+      'Learn the fastest path for conversion, modes, favorites, and multi-currency checks.',
     aboutUs: 'About Us',
+    aboutUsDesc: 'Understand the data method, use cases, author, and maintenance model.',
     openSource: 'Open Source',
+    openSourceDesc: 'Review the source code, changelog, and public collaboration status.',
     privacyPolicy: 'Privacy Policy',
+    privacyPolicyDesc: 'Understand data handling, analytics tools, and privacy boundaries.',
     openDataApi: 'Open Data API',
+    openDataApiDesc: 'Access latest.json, OpenAPI, and AI-friendly data entry points.',
     seoTech: 'SEO Technology',
+    seoTechDesc: 'Review indexable pages, structured data, and AI citation governance.',
   },
 
   // Styles
diff --git a/apps/ratewise/src/i18n/locales/ja.ts b/apps/ratewise/src/i18n/locales/ja.ts
index 4b97cd629..670ecd5ae 100644
--- a/apps/ratewise/src/i18n/locales/ja.ts
+++ b/apps/ratewise/src/i18n/locales/ja.ts
@@ -25,6 +25,7 @@ const ja = {
     copy: 'コピー',
     copied: 'コピーしました',
     clickToCopy: 'クリックでコピー',
+    opensInNewWindow: '（新しいウィンドウで開きます）',
   },
 
   // Navigation
@@ -158,13 +159,21 @@ const ja = {
     rateModeMidDesc: '売値と買値の中間レート。精度はやや低め。外為トレーダーの市場参考値として活用',
     // サポートと情報セクション
     supportInfo: 'サポートと情報',
+    supportInfoDesc: '使い方、データソース、プライバシー、技術的な透明性をここにまとめています。',
     faq: 'よくある質問',
+    faqDesc: '買値・売値、現金・即時、カードレート、データ更新をすばやく確認できます。',
     usageGuide: 'ご利用ガイド',
+    usageGuideDesc: '換算、モード切替、お気に入り、多通貨比較の最短手順を確認できます。',
     aboutUs: '私たちについて',
+    aboutUsDesc: 'データ方法、利用シーン、作者、メンテナンス方針を確認できます。',
     openSource: 'オープンソース',
+    openSourceDesc: 'ソースコード、変更履歴、公開コラボレーション状況を確認できます。',
     privacyPolicy: 'プライバシーポリシー',
+    privacyPolicyDesc: 'データ処理、分析ツール、プライバシーの境界を確認できます。',
     openDataApi: 'オープンデータ API',
+    openDataApiDesc: 'latest.json、OpenAPI、AI 向けデータ入口を確認できます。',
     seoTech: 'SEO 技術開示',
+    seoTechDesc: 'インデックス対象ページ、構造化データ、AI 引用ガバナンスを確認できます。',
   },
 
   // Styles
diff --git a/apps/ratewise/src/i18n/locales/ko.ts b/apps/ratewise/src/i18n/locales/ko.ts
index 3692073ba..dae1b5c8a 100644
--- a/apps/ratewise/src/i18n/locales/ko.ts
+++ b/apps/ratewise/src/i18n/locales/ko.ts
@@ -25,6 +25,7 @@ const ko = {
     copy: '복사',
     copied: '복사됨',
     clickToCopy: '클릭하여 복사',
+    opensInNewWindow: '(새 창에서 열림)',
   },
 
   // Navigation
@@ -158,13 +159,21 @@ const ko = {
     rateModeMidDesc: '매도·매입 중간값. 정밀도가 낮아 외환 트레이더의 시장 참고용으로 적합',
     // 지원 및 정보 섹션
     supportInfo: '지원 및 정보',
+    supportInfoDesc: '사용 방법, 데이터 출처, 개인정보, 기술 투명성 정보를 한곳에 모았습니다.',
     faq: '자주 묻는 질문',
+    faqDesc: '매입/매도율, 현금/전신환, 카드 환율, 데이터 갱신 기준을 빠르게 확인합니다.',
     usageGuide: '사용 가이드',
+    usageGuideDesc: '환산, 모드 전환, 즐겨찾기, 다중 통화 비교의 빠른 사용 흐름을 확인합니다.',
     aboutUs: '소개',
+    aboutUsDesc: '데이터 방식, 사용 상황, 작성자, 유지보수 기준을 확인합니다.',
     openSource: '오픈 소스',
+    openSourceDesc: '소스 코드, 변경 이력, 공개 협업 상태를 확인합니다.',
     privacyPolicy: '개인정보 처리방침',
+    privacyPolicyDesc: '데이터 처리, 분석 도구, 개인정보 보호 범위를 확인합니다.',
     openDataApi: '공개 데이터 API',
+    openDataApiDesc: 'latest.json, OpenAPI, AI 친화 데이터 진입점을 확인합니다.',
     seoTech: 'SEO 기술 공개',
+    seoTechDesc: '색인 대상 페이지, 구조화 데이터, AI 인용 거버넌스를 확인합니다.',
   },
 
   // Styles
diff --git a/apps/ratewise/src/i18n/locales/zh-TW.ts b/apps/ratewise/src/i18n/locales/zh-TW.ts
index 3542c2ca4..94a46de07 100644
--- a/apps/ratewise/src/i18n/locales/zh-TW.ts
+++ b/apps/ratewise/src/i18n/locales/zh-TW.ts
@@ -25,6 +25,7 @@ const zhTW = {
     copy: '複製',
     copied: '已複製',
     clickToCopy: '點擊複製',
+    opensInNewWindow: '（開新視窗）',
   },
 
   // Navigation
@@ -158,13 +159,21 @@ const zhTW = {
     rateModeMidDesc: '買賣中間價，精準度相對較低，適合外匯交易者做市場行情參考',
     // 支援與資訊區塊
     supportInfo: '支援與資訊',
+    supportInfoDesc: '使用方法、資料來源、隱私與技術透明資訊，都集中在這裡。',
     faq: '常見問題',
+    faqDesc: '快速釐清買入賣出、現金即期、刷卡匯率與資料更新。',
     usageGuide: '使用指南',
+    usageGuideDesc: '用最短路徑完成換算、切換模式、收藏與多幣別比較。',
     aboutUs: '關於我們',
+    aboutUsDesc: '了解資料方法、適用情境、作者與維護方式。',
     openSource: '開放原始碼',
+    openSourceDesc: '查看程式碼、變更紀錄與公開協作狀態。',
     privacyPolicy: '隱私權政策',
+    privacyPolicyDesc: '了解資料處理、分析工具與使用者隱私邊界。',
     openDataApi: '開放資料 API',
+    openDataApiDesc: '取得 latest.json、OpenAPI 與 AI-friendly 資料入口。',
     seoTech: 'SEO 技術揭露',
+    seoTechDesc: '查看可索引頁面、結構化資料與 AI 引用治理。',
   },
 
   // Styles
diff --git a/apps/ratewise/src/index.css b/apps/ratewise/src/index.css
index f646ba8f6..7218856f8 100644
--- a/apps/ratewise/src/index.css
+++ b/apps/ratewise/src/index.css
@@ -88,6 +88,7 @@
     --color-secondary: 99 102 241; /* indigo-500 - 靛藍輔色 */
     --color-accent: 139 92 246; /* violet-500 */
     --color-border: 226 232 240;
+    --color-active-pill-foreground: 91 33 182; /* violet-800 - 小字 active pill AA */
     --color-info: 14 165 233;
     --color-error: 239 68 68;
 
@@ -288,6 +289,7 @@
     --color-secondary: 129 140 248; /* indigo-400 */
     --color-accent: 0 255 136; /* 霓虹綠 */
     --color-border: 30 41 59; /* slate-800 */
+    --color-active-pill-foreground: 255 255 255; /* white - 小字 active pill AA */
 
     /* 狀態語義色彩 - 霓虹風格 */
     --color-info: 56 189 248; /* sky-400 */
@@ -433,6 +435,7 @@
     --color-secondary: 236 72 153; /* pink-500 */
     --color-accent: 255 182 193; /* light pink */
     --color-border: 255 228 225; /* misty rose */
+    --color-active-pill-foreground: 157 23 77; /* pink-800 - 小字 active pill AA */
 
     /* 狀態語義色彩 - 柔和可愛風 */
     --color-info: 147 197 253; /* blue-300 - 天空藍 */
@@ -567,6 +570,7 @@
     --color-secondary: 161 98 7; /* amber-700 - 琥珀 */
     --color-accent: 180 120 80; /* tan - 棕褐 */
     --color-border: 245 230 220; /* linen - 亞麻 */
+    --color-active-pill-foreground: 67 20 7; /* dark brown - 小字 active pill AA */
 
     /* 狀態語義色彩 - 復古調性 */
     --color-info: 59 130 246; /* blue-500 - 墨水藍 */
@@ -701,6 +705,7 @@
     --color-secondary: 14 165 233; /* sky-500 */
     --color-accent: 20 184 166; /* teal-500 */
     --color-border: 186 230 253; /* sky-200 */
+    --color-active-pill-foreground: 22 78 99; /* cyan-900 - 小字 active pill AA */
 
     /* 狀態語義色彩 - 海洋調性 */
     --color-info: 56 189 248; /* sky-400 */
@@ -835,6 +840,7 @@
     --color-secondary: 22 163 74; /* green-600 */
     --color-accent: 101 163 13; /* lime-600 */
     --color-border: 187 247 208; /* green-200 */
+    --color-active-pill-foreground: 20 83 45; /* green-800 - 小字 active pill AA */
 
     /* 狀態語義色彩 - 自然調性 */
     --color-info: 59 130 246; /* blue-500 */
diff --git a/apps/ratewise/src/pages/Guide.test.tsx b/apps/ratewise/src/pages/Guide.test.tsx
index d9a768dbd..3ed96266a 100644
--- a/apps/ratewise/src/pages/Guide.test.tsx
+++ b/apps/ratewise/src/pages/Guide.test.tsx
@@ -254,5 +254,14 @@ describe('Guide Page - HowTo Schema', () => {
         expect(stepElement).toBeTruthy();
       }
     });
+
+    it('keeps hash anchor targets below the sticky safe-area header', () => {
+      renderGuide();
+      const stepElement = document.getElementById('step-1');
+
+      expect(stepElement).toHaveStyle({
+        scrollMarginTop: 'calc(env(safe-area-inset-top, 0px) + 14rem)',
+      });
+    });
   });
 });
diff --git a/apps/ratewise/src/pages/Guide.tsx b/apps/ratewise/src/pages/Guide.tsx
index 696576528..aa0f5da1e 100644
--- a/apps/ratewise/src/pages/Guide.tsx
+++ b/apps/ratewise/src/pages/Guide.tsx
@@ -121,7 +121,8 @@ const Guide = () => {
                 <div
                   key={step.position}
                   id={`step-${step.position}`}
-                  className="card scroll-mt-4 p-6 transition-shadow hover:shadow-md"
+                  className="card p-6 transition-shadow hover:shadow-md"
+                  style={{ scrollMarginTop: 'calc(env(safe-area-inset-top, 0px) + 14rem)' }}
                 >
                   <div className="flex items-start">
                     <div className="mr-4 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-primary text-lg font-bold text-white">
diff --git a/apps/ratewise/src/pages/OpenData.test.tsx b/apps/ratewise/src/pages/OpenData.test.tsx
index d84a19ea6..e04a841cd 100644
--- a/apps/ratewise/src/pages/OpenData.test.tsx
+++ b/apps/ratewise/src/pages/OpenData.test.tsx
@@ -207,7 +207,7 @@ describe('OpenData Page', () => {
 
     it('renders internal guide card with basename-aware href', () => {
       renderOpenDataWithBasename();
-      expect(screen.getByRole('link', { name: /使用指南/i })).toHaveAttribute(
+      expect(screen.getByRole('link', { name: /網頁介面使用教學/i })).toHaveAttribute(
         'href',
         '/ratewise/guide/',
       );
diff --git a/apps/ratewise/src/pages/SeoTech.tsx b/apps/ratewise/src/pages/SeoTech.tsx
index dcd8b09c3..01c30d86c 100644
--- a/apps/ratewise/src/pages/SeoTech.tsx
+++ b/apps/ratewise/src/pages/SeoTech.tsx
@@ -9,9 +9,9 @@
  */
 
 import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { motion } from 'motion/react';
 import {
-  ArrowLeft,
   Globe,
   FileJson,
   Search,
@@ -28,6 +28,7 @@ import {
   ExternalLink,
   CheckCircle2,
 } from 'lucide-react';
+import { PageNavHeader } from '../components/PageNavHeader';
 import { SEOHelmet } from '../components/SEOHelmet';
 import { APP_ONLY_PAGE_SEO } from '../config/seo-metadata';
 import { SEO_SCHEMA_REGISTRY } from '../config/seo-schema-registry';
@@ -295,6 +296,7 @@ const sectionTransition = { ...transitions.smooth, delay: 0.05 };
 // ─── 元件 ──────────────────────────────────────────────────────────────────────
 
 export default function SeoTech() {
+  const { t } = useTranslation();
   const pageSeo = APP_ONLY_PAGE_SEO.seoTech;
 
   return (
@@ -315,22 +317,14 @@ export default function SeoTech() {
         <div className="absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 pointer-events-none" />
         <div className="absolute bottom-0 left-0 w-64 h-64 bg-secondary/5 rounded-full blur-2xl translate-y-1/2 -translate-x-1/4 pointer-events-none" />
 
-        <div className="relative px-4 pt-6 pb-10">
-          {/* 返回按鈕 */}
-          <motion.div
-            initial={{ opacity: 0, x: -8 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={transitions.default}
-          >
-            <Link
-              to="/settings/"
-              className="inline-flex items-center gap-1.5 text-sm text-[rgb(var(--color-text-muted))] hover:text-[rgb(var(--color-text))] transition-colors mb-6"
-              aria-label="回到設定"
-            >
-              <ArrowLeft className="w-4 h-4" />
-              <span>設定</span>
-            </Link>
-          </motion.div>
+        <div className="relative mx-auto max-w-5xl px-4 pt-6 pb-10">
+          <PageNavHeader
+            fallbackHref="/settings/"
+            breadcrumbItems={[
+              { label: t('nav.home'), href: '/' },
+              { label: t('settings.seoTech'), href: '/seo-tech/' },
+            ]}
+          />
 
           {/* 標題區 */}
           <motion.div
diff --git a/apps/ratewise/src/pages/Settings.hydration.test.tsx b/apps/ratewise/src/pages/Settings.hydration.test.tsx
index 8518c8bdc..88e48a9fb 100644
--- a/apps/ratewise/src/pages/Settings.hydration.test.tsx
+++ b/apps/ratewise/src/pages/Settings.hydration.test.tsx
@@ -3,7 +3,9 @@ import { MemoryRouter } from 'react-router-dom';
 import { renderToString } from 'react-dom/server';
 import { hydrateRoot } from 'react-dom/client';
 import { act, createElement, type ReactNode } from 'react';
+import { render } from '@testing-library/react';
 import Settings from './Settings';
+import { SUPPORT_INFO_LINKS } from '../config/support-info';
 
 vi.mock('../components/SEOHelmet', () => ({
   SEOHelmet: () => null,
@@ -136,4 +138,18 @@ describe('Settings hydration', () => {
     expect(themeButtons).toHaveLength(1);
     expect(themeButtons[0]).not.toBeDisabled();
   });
+
+  it('uses the support info SSOT order for internal settings links', () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={['/settings']}>
+        <Settings />
+      </MemoryRouter>,
+    );
+
+    const renderedSupportHrefs = SUPPORT_INFO_LINKS.map((item) =>
+      container.querySelector(`a[href="${item.href}"]`)?.getAttribute('href'),
+    );
+
+    expect(renderedSupportHrefs).toEqual(SUPPORT_INFO_LINKS.map((item) => item.href));
+  });
 });
diff --git a/apps/ratewise/src/pages/Settings.tsx b/apps/ratewise/src/pages/Settings.tsx
index dd6fdab3a..429ed88d7 100644
--- a/apps/ratewise/src/pages/Settings.tsx
+++ b/apps/ratewise/src/pages/Settings.tsx
@@ -20,10 +20,13 @@
  */
 
 import {
+  BookOpen,
   Palette,
   Globe,
   Database,
+  Github,
   ShieldAlert,
+  ShieldCheck,
   Check,
   HelpCircle,
   ChevronRight,
@@ -32,6 +35,8 @@ import {
   Shuffle,
   Landmark,
   Scale,
+  Info,
+  SearchCheck,
   type LucideIcon,
 } from 'lucide-react';
 import { Link } from 'react-router-dom';
@@ -45,9 +50,34 @@ import { getDisplayVersion } from '../config/version';
 import { transitions, segmentedSwitch } from '../config/animations';
 import { APP_INFO } from '../config/app-info';
 import { APP_ONLY_PAGE_SEO } from '../config/seo-metadata';
+import { SUPPORT_INFO_LINKS, type SupportInfoHref } from '../config/support-info';
 import type { RateMode } from '../features/ratewise/types';
 import { useConverterStore } from '../stores/converterStore';
 
+const SUPPORT_INFO_ICON_BY_HREF = {
+  '/faq/': HelpCircle,
+  '/guide/': BookOpen,
+  '/about/': Info,
+  '/open-data/': Database,
+  '/seo-tech/': SearchCheck,
+  '/privacy/': ShieldCheck,
+} satisfies Record<SupportInfoHref, LucideIcon>;
+
+const SUPPORT_LINKS = [
+  ...SUPPORT_INFO_LINKS.map((item) => ({
+    ...item,
+    icon: SUPPORT_INFO_ICON_BY_HREF[item.href],
+    external: false,
+  })),
+  {
+    href: APP_INFO.github,
+    labelKey: 'settings.openSource',
+    descKey: 'settings.openSourceDesc',
+    icon: Github,
+    external: true,
+  },
+];
+
 export default function Settings() {
   const { t, i18n } = useTranslation();
   const { style, setStyle, resetTheme, isLoaded } = useAppTheme();
@@ -328,65 +358,60 @@ export default function Settings() {
 
         {/* 支援與資訊區塊 */}
         <section className="mb-6">
-          <div className="flex items-center gap-2 px-2 opacity-40 mb-3">
-            <HelpCircle className="w-3.5 h-3.5" />
-            <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
-              {t('settings.supportInfo')}
-            </h2>
+          <div className="px-2 mb-3">
+            <div className="flex items-center gap-2 opacity-50">
+              <HelpCircle className="w-3.5 h-3.5" />
+              <h2 className="text-[10px] font-black uppercase tracking-[0.2em]">
+                {t('settings.supportInfo')}
+              </h2>
+            </div>
+            <p className="mt-2 text-xs leading-relaxed text-text-muted">
+              {t('settings.supportInfoDesc')}
+            </p>
           </div>
 
-          <div className="card overflow-hidden divide-y divide-border">
-            <Link
-              to="/faq/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
-              <span className="text-sm font-medium">{t('settings.faq')}</span>
-              <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
-            </Link>
-            <Link
-              to="/guide/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
-              <span className="text-sm font-medium">{t('settings.usageGuide')}</span>
-              <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
-            </Link>
-            <Link
-              to="/about/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
-              <span className="text-sm font-medium">{t('settings.aboutUs')}</span>
-              <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
-            </Link>
-            <Link
-              to="/privacy/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
-              <span className="text-sm font-medium">{t('settings.privacyPolicy')}</span>
-              <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
-            </Link>
-            <Link
-              to="/open-data/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
-              <span className="text-sm font-medium">{t('settings.openDataApi')}</span>
-              <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
-            </Link>
-            <Link
-              to="/seo-tech/"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
-              <span className="text-sm font-medium">{t('settings.seoTech')}</span>
-              <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
-            </Link>
-            <a
-              href={APP_INFO.github}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="w-full px-5 py-4 flex items-center justify-between group hover:bg-primary/5 transition-colors"
-            >
-              <span className="text-sm font-medium">{t('settings.openSource')}</span>
-              <ExternalLink className="w-4 h-4 opacity-40 group-hover:opacity-100 transition-opacity" />
-            </a>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {SUPPORT_LINKS.map((item) => {
+              const Icon = item.icon;
+              const content = (
+                <>
+                  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                    <Icon className="h-5 w-5" aria-hidden="true" />
+                  </span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block text-sm font-bold text-text">{t(item.labelKey)}</span>
+                    <span className="mt-1 block text-xs leading-relaxed text-text-muted">
+                      {t(item.descKey)}
+                    </span>
+                  </span>
+                  {item.external ? (
+                    <ExternalLink className="h-4 w-4 shrink-0 text-text-muted opacity-50 transition-opacity group-hover:opacity-100" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4 shrink-0 text-text-muted opacity-50 transition-opacity group-hover:opacity-100" />
+                  )}
+                </>
+              );
+
+              const className =
+                'group flex min-h-[92px] items-center gap-3 rounded-2xl border border-border/70 bg-surface p-4 text-left shadow-sm transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background';
+
+              return item.external ? (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`${t(item.labelKey)}${t('common.opensInNewWindow')}`}
+                  className={className}
+                >
+                  {content}
+                </a>
+              ) : (
+                <Link key={item.href} to={item.href} className={className}>
+                  {content}
+                </Link>
+              );
+            })}
           </div>
         </section>
 
diff --git a/apps/ratewise/tailwind.config.ts b/apps/ratewise/tailwind.config.ts
index 26201ad33..7e63a27f1 100644
--- a/apps/ratewise/tailwind.config.ts
+++ b/apps/ratewise/tailwind.config.ts
@@ -66,6 +66,7 @@ export default {
         accent: 'rgb(var(--color-accent) / <alpha-value>)',
         info: 'rgb(var(--color-info) / <alpha-value>)',
         error: 'rgb(var(--color-error) / <alpha-value>)',
+        'active-pill-foreground': 'rgb(var(--color-active-pill-foreground) / <alpha-value>)',
         primary: {
           DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
           hover: 'rgb(var(--color-primary-hover) / <alpha-value>)',
diff --git a/docs/dev/002_development_reward_penalty_log.md b/docs/dev/002_development_reward_penalty_log.md
index af7a6f12a..ff6c97613 100644
--- a/docs/dev/002_development_reward_penalty_log.md
+++ b/docs/dev/002_development_reward_penalty_log.md
@@ -2,7 +2,7 @@
 
 > 版本：outline-v2-ultra
 > 原則：每筆只保留日期、ID、原因、解法。
-> 本次分數變化：+1（reward 1）｜累計總分：+55
+> 本次分數變化：+1（reward 1）｜累計總分：+56
 
 ## 新增模板（4 行）
 
@@ -13,6 +13,11 @@
 
 ## 條目（新→舊）
 
+- 日期：2026-05-17
+- ID：reward-ratewise-support-info-ia-header
+- 原因：支援與資訊入口分散在設定列表，公開內容頁手機版缺少可見 footer，頁首只有返回與麵包屑，搜尋落地或 PWA 直開時導覽脈絡不足
+- 解法：公開頁 PageNavHeader 加入品牌、支援分群導覽、safe-area sticky header 與 AA active pill token，Layout 恢復行動版 Footer，設定頁支援區改為四語系描述卡片，SEO 技術頁與 skeleton 同步收斂並補測試
+
 - 日期：2026-05-17
 - ID：reward-ratewise-nitro-design-token-ssot
 - 原因：Nitro 深色主題缺少 legacy primary token、body 仍固定 `bg-slate-50`、Tailwind 語義 alias 漏定義，設定頁與 PWA overscroll 可能露出淺底或白色 focus ring

From 1c742fae68d4f5667be34bea415219470118b120 Mon Sep 17 00:00:00 2001
From: haotool <haotool.org@gmail.com>
Date: Sun, 17 May 2026 05:57:26 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix(ratewise):=20=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E6=94=AF=E6=8F=B4=E5=B0=8E=E8=A6=BD=E8=B7=AF=E5=BE=91=E6=AF=94?=
 =?UTF-8?q?=E5=B0=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 正規化 PageNavHeader 當前 pathname，讓無 trailing slash 的支援頁仍顯示導覽。

- 補一般與 basename 部署下無 trailing slash 的 active pill 回歸測試。

- 更新 changeset 與 002 稽核記錄，對應 PR404 Codex review thread。

測試：PageNavHeader focused vitest 6 tests、RateWise typecheck。
---
 .../ratewise-support-nav-path-normalization.md |  5 +++++
 apps/ratewise/src/components/PageNavHeader.tsx | 10 ++++++++--
 .../__tests__/PageNavHeader.test.tsx           | 18 ++++++++++++++++++
 docs/dev/002_development_reward_penalty_log.md |  7 ++++++-
 4 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/ratewise-support-nav-path-normalization.md

diff --git a/.changeset/ratewise-support-nav-path-normalization.md b/.changeset/ratewise-support-nav-path-normalization.md
new file mode 100644
index 000000000..0593b5e43
--- /dev/null
+++ b/.changeset/ratewise-support-nav-path-normalization.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+修正支援與資訊頁無 trailing slash 進入時的分群導覽顯示與目前頁標示。
diff --git a/apps/ratewise/src/components/PageNavHeader.tsx b/apps/ratewise/src/components/PageNavHeader.tsx
index c97bc885a..f1b80e2d8 100644
--- a/apps/ratewise/src/components/PageNavHeader.tsx
+++ b/apps/ratewise/src/components/PageNavHeader.tsx
@@ -27,6 +27,11 @@ const SUPPORT_INFO_ICON_BY_HREF = {
   '/privacy/': ShieldCheck,
 } satisfies Record<SupportInfoHref, LucideIcon>;
 
+function normalizeSupportPath(pathname: string): string {
+  if (pathname === '/') return '/';
+  return `${pathname.replace(/\/+$/, '')}/`;
+}
+
 export interface PageNavHeaderProps {
   breadcrumbItems: BreadcrumbItem[];
   fallbackHref?: string;
@@ -43,8 +48,9 @@ export function PageNavHeader({
   const navigate = useNavigate();
   const location = useLocation();
   const { t } = useTranslation();
+  const normalizedPathname = normalizeSupportPath(location.pathname);
   const shouldShowSupportNav =
-    showSupportNav ?? SUPPORT_INFO_LINKS.some((item) => item.href === location.pathname);
+    showSupportNav ?? SUPPORT_INFO_LINKS.some((item) => item.href === normalizedPathname);
 
   const handleBack = () => {
     if (window.history.length > 1) {
@@ -90,7 +96,7 @@ export function PageNavHeader({
             <div className="flex min-w-max gap-2 px-1 pb-1">
               {SUPPORT_INFO_LINKS.map((item) => {
                 const Icon = SUPPORT_INFO_ICON_BY_HREF[item.href];
-                const isActive = location.pathname === item.href;
+                const isActive = normalizedPathname === item.href;
 
                 return (
                   <Link
diff --git a/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx b/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
index 0812f4e84..b7d850d35 100644
--- a/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
+++ b/apps/ratewise/src/components/__tests__/PageNavHeader.test.tsx
@@ -52,6 +52,15 @@ describe('PageNavHeader', () => {
     expect(screen.queryByRole('navigation', { name: '支援與資訊' })).not.toBeInTheDocument();
   });
 
+  it('支援資訊頁無 trailing slash 時仍顯示導覽與目前頁標示', () => {
+    renderHeader('/faq');
+
+    expect(screen.getByRole('navigation', { name: '支援與資訊' })).toBeInTheDocument();
+    const activeLink = screen.getByRole('link', { name: /常見問題/ });
+    expect(activeLink).toHaveAttribute('aria-current', 'page');
+    expect(activeLink).toHaveClass('text-active-pill-foreground');
+  });
+
   it('在 basename 部署下產生正確連結', () => {
     renderHeader('/ratewise/faq/', '/ratewise');
 
@@ -64,4 +73,13 @@ describe('PageNavHeader', () => {
       expect.stringMatching(/^\/ratewise\/?$/),
     );
   });
+
+  it('basename 部署下無 trailing slash 時仍顯示導覽與目前頁標示', () => {
+    renderHeader('/ratewise/faq', '/ratewise');
+
+    expect(screen.getByRole('navigation', { name: '支援與資訊' })).toBeInTheDocument();
+    const activeLink = screen.getByRole('link', { name: /常見問題/ });
+    expect(activeLink).toHaveAttribute('aria-current', 'page');
+    expect(activeLink).toHaveAttribute('href', '/ratewise/faq/');
+  });
 });
diff --git a/docs/dev/002_development_reward_penalty_log.md b/docs/dev/002_development_reward_penalty_log.md
index ff6c97613..25b9d2d6e 100644
--- a/docs/dev/002_development_reward_penalty_log.md
+++ b/docs/dev/002_development_reward_penalty_log.md
@@ -2,7 +2,7 @@
 
 > 版本：outline-v2-ultra
 > 原則：每筆只保留日期、ID、原因、解法。
-> 本次分數變化：+1（reward 1）｜累計總分：+56
+> 本次分數變化：+1（reward 1）｜累計總分：+57
 
 ## 新增模板（4 行）
 
@@ -13,6 +13,11 @@
 
 ## 條目（新→舊）
 
+- 日期：2026-05-17
+- ID：reward-pr404-support-nav-path-normalization
+- 原因：PR404 review 指出支援資訊頁若以 `/faq`、`/seo-tech` 等無 trailing slash route 進入，PageNavHeader 會因 exact match 找不到支援導覽與 active pill
+- 解法：在 PageNavHeader 正規化當前 pathname 後再比對 SUPPORT_INFO_LINKS，並補無 trailing slash 回歸測試鎖定導覽顯示與目前頁標示
+
 - 日期：2026-05-17
 - ID：reward-ratewise-support-info-ia-header
 - 原因：支援與資訊入口分散在設定列表，公開內容頁手機版缺少可見 footer，頁首只有返回與麵包屑，搜尋落地或 PWA 直開時導覽脈絡不足

From 9f17c6f28cb8ff01402ad62e5c3b439f53b19d86 Mon Sep 17 00:00:00 2001
From: s123104 <88911350+s123104@users.noreply.github.com>
Date: Wed, 24 Jun 2026 22:03:51 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix(ratewise):=20=E6=94=B6=E6=96=82?=
 =?UTF-8?q?=E6=94=AF=E6=8F=B4=E9=A0=81=E8=AA=9E=E7=B3=BB=E6=B0=B4=E5=90=88?=
 =?UTF-8?q?=E6=96=87=E6=A1=88=20(#405)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(ratewise): 收斂支援頁語系水合文案

- 將支援與資訊頁首屏文案收斂到 supportPages 四語系命名空間。

- 固定 SSG 初始語系，mount 後再同步已儲存的語言偏好。

- 避免 Node navigator 或 localStorage 造成靜態 HTML 與水合文案漂移。

測試：focused vitest、RateWise typecheck、build:ratewise。

測試：pnpm test、pnpm typecheck、Chromium/WebKit mobile smoke。

* fix(ratewise): 收斂熱門幣別導覽 SSOT (#406)

- 新增 popular-currency-links，讓首頁、footer、攻略頁與 ItemList 共用熱門幣別清單。

- 修正首頁 SEO section 標籤與桌機 footer 重複內連，並同步 About markdown mirror。

- 更新 SeoTech schema registry 與 002 稽核記錄，加入 changeset。

測試：focused vitest、Footer/首頁 smoke、RateWise typecheck、build:ratewise。

測試：pnpm typecheck、pnpm test、Chromium/WebKit production smoke。

Co-authored-by: haotool <haotool.org@gmail.com>

---------

Co-authored-by: haotool <haotool.org@gmail.com>
---
 .changeset/ratewise-popular-currency-ssot.md  |  5 +
 .changeset/ratewise-support-copy-i18n.md      |  5 +
 apps/ratewise/public/about.md                 |  2 +-
 apps/ratewise/src/components/AppLayout.tsx    |  2 +
 apps/ratewise/src/components/Footer.tsx       | 38 +-------
 .../src/components/HomepageSEOSection.tsx     | 71 +++++----------
 .../src/components/LanguagePreferenceSync.tsx | 10 ++
 apps/ratewise/src/components/Layout.tsx       |  2 +
 .../src/components/__tests__/Footer.test.tsx  | 13 ++-
 .../__tests__/HomepageSEOSection.test.tsx     | 34 +++++++
 .../src/config/__tests__/footer-links.spec.ts |  6 +-
 .../__tests__/popular-currency-links.test.ts  | 71 +++++++++++++++
 apps/ratewise/src/config/footer-links.ts      | 15 +--
 .../src/config/popular-currency-links.ts      | 78 ++++++++++++++++
 apps/ratewise/src/config/seo-metadata.ts      | 31 +++++--
 .../src/config/seo-schema-registry.ts         |  7 ++
 apps/ratewise/src/i18n/index.test.ts          | 56 ++++++++++++
 apps/ratewise/src/i18n/index.ts               | 91 +++++++++++++++++--
 apps/ratewise/src/i18n/locales.test.ts        | 70 ++++++++++++++
 apps/ratewise/src/i18n/locales/en.ts          | 55 ++++++++++-
 apps/ratewise/src/i18n/locales/ja.ts          | 54 ++++++++++-
 apps/ratewise/src/i18n/locales/ko.ts          | 54 ++++++++++-
 apps/ratewise/src/i18n/locales/zh-TW.ts       | 50 +++++++++-
 apps/ratewise/src/pages/About.tsx             | 28 +++---
 apps/ratewise/src/pages/FAQ.tsx               | 25 +++--
 apps/ratewise/src/pages/Guide.tsx             | 26 +++---
 apps/ratewise/src/pages/OpenData.tsx          | 18 ++--
 apps/ratewise/src/pages/Privacy.tsx           | 22 +++--
 apps/ratewise/src/pages/SeoTech.tsx           |  7 +-
 apps/ratewise/src/pages/Settings.tsx          |  8 +-
 .../src/utils/__tests__/timeFormatter.test.ts | 27 +++++-
 apps/ratewise/src/utils/timeFormatter.ts      | 28 ++++++
 .../dev/002_development_reward_penalty_log.md | 12 ++-
 33 files changed, 837 insertions(+), 184 deletions(-)
 create mode 100644 .changeset/ratewise-popular-currency-ssot.md
 create mode 100644 .changeset/ratewise-support-copy-i18n.md
 create mode 100644 apps/ratewise/src/components/LanguagePreferenceSync.tsx
 create mode 100644 apps/ratewise/src/components/__tests__/HomepageSEOSection.test.tsx
 create mode 100644 apps/ratewise/src/config/__tests__/popular-currency-links.test.ts
 create mode 100644 apps/ratewise/src/config/popular-currency-links.ts
 create mode 100644 apps/ratewise/src/i18n/index.test.ts
 create mode 100644 apps/ratewise/src/i18n/locales.test.ts

diff --git a/.changeset/ratewise-popular-currency-ssot.md b/.changeset/ratewise-popular-currency-ssot.md
new file mode 100644
index 000000000..685e1aac1
--- /dev/null
+++ b/.changeset/ratewise-popular-currency-ssot.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+收斂首頁、footer、攻略頁熱門幣別導覽 SSOT，並讓首頁熱門幣別清單輸出可見內容對齊的 ItemList schema。
diff --git a/.changeset/ratewise-support-copy-i18n.md b/.changeset/ratewise-support-copy-i18n.md
new file mode 100644
index 000000000..1406452b6
--- /dev/null
+++ b/.changeset/ratewise-support-copy-i18n.md
@@ -0,0 +1,5 @@
+---
+'@app/ratewise': patch
+---
+
+將支援與資訊頁首屏文案收斂到四語系 i18n namespace，並讓 SSG 使用預設繁中語系輸出，降低公開內容頁直開與水合時的文案漂移。
diff --git a/apps/ratewise/public/about.md b/apps/ratewise/public/about.md
index fbff7310d..44cfc6f3e 100644
--- a/apps/ratewise/public/about.md
+++ b/apps/ratewise/public/about.md
@@ -54,7 +54,7 @@ HaoRate 是以臺灣銀行牌告匯率為基礎的換匯工具，重點是幫台
 
 ### 6. 這個網站使用哪些結構化資料幫助搜尋引擎與 AI 系統理解內容？
 
-目前站內實際部署的 schema.org JSON-LD 包含 WebSite（全站識別）、SoftwareApplication（產品資訊）、Organization（聯絡資訊）、CurrencyConversionService（首頁）、ExchangeRateSpecification（幣對頁與金額頁的匯率數值）、BreadcrumbList（麵包屑導覽）、Article（內容頁）、HowTo（Guide 教學頁）、FAQPage（僅 /faq/ 主 FAQ 頁）、Dataset（開放資料）與 ImageObject（分享圖片授權）。首頁與內容頁仍保留可讀 FAQ HTML，但不會在所有頁面重複輸出 FAQPage JSON-LD；幣別換算頁則以可稽核的匯率數值 schema 為主，避免把 FAQ rich result 訊號擴散到金融頁。sitemap.xml 只收錄公開可索引 URL，並同步 hreflang 資訊。
+目前站內實際部署的 schema.org JSON-LD 包含 WebSite（全站識別）、SoftwareApplication（產品資訊）、Organization（聯絡資訊）、CurrencyConversionService（首頁）、ItemList（首頁熱門幣別導覽）、ExchangeRateSpecification（幣對頁與金額頁的匯率數值）、BreadcrumbList（麵包屑導覽）、Article（內容頁）、HowTo（Guide 教學頁）、FAQPage（僅 /faq/ 主 FAQ 頁）、Dataset（開放資料）與 ImageObject（分享圖片授權）。首頁與內容頁仍保留可讀 FAQ HTML，但不會在所有頁面重複輸出 FAQPage JSON-LD；幣別換算頁則以可稽核的匯率數值 schema 為主，避免把 FAQ rich result 訊號擴散到金融頁。sitemap.xml 只收錄公開可索引 URL，並同步 hreflang 資訊。
 
 ### 7. HaoRate 是否支援 AI 搜尋引擎與 LLM 引用？
 
diff --git a/apps/ratewise/src/components/AppLayout.tsx b/apps/ratewise/src/components/AppLayout.tsx
index a04dd32f8..ef974a429 100644
--- a/apps/ratewise/src/components/AppLayout.tsx
+++ b/apps/ratewise/src/components/AppLayout.tsx
@@ -20,6 +20,7 @@ import { performFullRefresh } from '../utils/swUtils';
 import { useUrlNormalization } from '../hooks/useUrlNormalization';
 import { NonCriticalLazyBoundary } from './NonCriticalLazyBoundary';
 import { PwaAppReadyBeacon } from './PwaAppReadyBeacon';
+import { LanguagePreferenceSync } from './LanguagePreferenceSync';
 
 function AppLazyGlobalPrompts({
   attempt,
@@ -194,6 +195,7 @@ export function AppLayout() {
 
   return (
     <ToastProvider>
+      <LanguagePreferenceSync />
       <PwaAppReadyBeacon />
       {/* SPA 路由變更時送出 GA4 page_view */}
       <RouteAnalytics />
diff --git a/apps/ratewise/src/components/Footer.tsx b/apps/ratewise/src/components/Footer.tsx
index af6963781..421b79df0 100644
--- a/apps/ratewise/src/components/Footer.tsx
+++ b/apps/ratewise/src/components/Footer.tsx
@@ -100,7 +100,7 @@ export function Footer() {
   return (
     <footer className="bg-gradient-to-br from-footer-from via-footer-via to-footer-to text-surface mt-16">
       {/* 行動版簡潔 Footer */}
-      <div className="md:hidden max-w-6xl mx-auto px-4 py-8">
+      <div data-testid="footer-mobile" className="md:hidden max-w-6xl mx-auto px-4 py-8">
         {/* 匯率來源與更新時間 */}
         <div className="flex flex-col items-center justify-center gap-4 mb-6">
           <a
@@ -254,7 +254,10 @@ export function Footer() {
       </div>
 
       {/* 電腦版完整 Footer - 整合簡潔風格 + SEO 連結 */}
-      <div className="hidden md:block container mx-auto px-4 md:px-6 py-12 max-w-6xl">
+      <div
+        data-testid="footer-desktop"
+        className="hidden md:block container mx-auto px-4 md:px-6 py-12 max-w-6xl"
+      >
         {/* 匯率來源與更新時間 */}
         <div className="flex flex-row items-center justify-center gap-4 mb-6">
           <a
@@ -310,37 +313,6 @@ export function Footer() {
           <p className="text-xs text-white/70 leading-relaxed">{t('footer.disclaimer')}</p>
         </div>
 
-        {/* 快速連結 */}
-        <div className="flex flex-wrap items-center justify-center gap-5 text-xs text-white/80 mb-6">
-          <Link
-            to="/faq/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
-              ?
-            </span>
-            {t('footer.faq')}
-          </Link>
-          <Link
-            to="/about/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
-              i
-            </span>
-            {t('footer.about')}
-          </Link>
-          <Link
-            to="/privacy/"
-            className="inline-flex items-center gap-1.5 hover:text-white transition-colors duration-200"
-          >
-            <span aria-hidden="true" className="text-white/50">
-              🔒
-            </span>
-            {t('footer.privacyPolicy')}
-          </Link>
-        </div>
-
         {/* 分隔線 */}
         <div className="w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent mb-8" />
 
diff --git a/apps/ratewise/src/components/HomepageSEOSection.tsx b/apps/ratewise/src/components/HomepageSEOSection.tsx
index 0f0cf2bed..4ad33dc40 100644
--- a/apps/ratewise/src/components/HomepageSEOSection.tsx
+++ b/apps/ratewise/src/components/HomepageSEOSection.tsx
@@ -1,31 +1,14 @@
 import { Link } from 'react-router-dom';
-import { CURRENCY_DEFINITIONS } from '../features/ratewise/constants';
+import { POPULAR_FROM_TWD_LINKS, POPULAR_TO_TWD_LINKS } from '../config/popular-currency-links';
 import { HOMEPAGE_SEO } from '../config/seo-metadata';
 import { AnswerCapsule } from './AnswerCapsule';
 
-/** 熱門幣對：外幣換台幣（依台灣旅遊熱度排序）。 */
-const HOT_TO_TWD = ['JPY', 'KRW', 'USD', 'EUR', 'HKD', 'SGD', 'THB', 'VND', 'AUD', 'GBP'] as const;
-
-/** 熱門幣對：台幣換外幣（出國換匯常見方向）。 */
-const HOT_FROM_TWD = [
-  'JPY',
-  'KRW',
-  'USD',
-  'EUR',
-  'HKD',
-  'SGD',
-  'THB',
-  'VND',
-  'AUD',
-  'GBP',
-] as const;
-
 export function HomepageSEOSection() {
   const { content, howTo, faqContent, answerCapsule } = HOMEPAGE_SEO;
 
   return (
     <section
-      aria-labelledby="homepage-seo-heading"
+      aria-labelledby="homepage-seo-section-heading"
       className="px-5 pt-5 pb-3 max-w-md mx-auto w-full"
     >
       <div className="rounded-[28px] border border-black/5 bg-surface shadow-card p-5">
@@ -72,40 +55,36 @@ export function HomepageSEOSection() {
 
       {/* 熱門幣別換算：內部連結區塊，提升幣對落地頁 PageRank 傳遞。 */}
       <div className="mt-4 rounded-[28px] border border-black/5 bg-surface shadow-card p-5">
-        <h2 className="text-lg font-black text-text">熱門幣別換算</h2>
+        <h2 id="popular-currency-heading" className="text-lg font-black text-text">
+          熱門幣別換算
+        </h2>
 
         <p className="mt-1 text-xs text-text-muted">外幣換台幣</p>
         <div className="mt-2 grid grid-cols-2 gap-1.5">
-          {HOT_TO_TWD.map((code) => {
-            const def = CURRENCY_DEFINITIONS[code];
-            return (
-              <Link
-                key={`to-twd-${code}`}
-                to={`/${code.toLowerCase()}-twd/`}
-                className="flex items-center gap-2 rounded-2xl border border-primary/10 bg-primary/5 px-3 py-2 text-xs font-bold text-primary transition hover:bg-primary/10"
-              >
-                <span aria-hidden="true">{def.flag}</span>
-                <span>{def.name}換台幣</span>
-              </Link>
-            );
-          })}
+          {POPULAR_TO_TWD_LINKS.map((link) => (
+            <Link
+              key={`to-twd-${link.code}`}
+              to={link.href}
+              className="flex items-center gap-2 rounded-2xl border border-primary/10 bg-primary/5 px-3 py-2 text-xs font-bold text-primary transition hover:bg-primary/10"
+            >
+              <span aria-hidden="true">{link.flag}</span>
+              <span>{link.label}</span>
+            </Link>
+          ))}
         </div>
 
         <p className="mt-4 text-xs text-text-muted">台幣換外幣</p>
         <div className="mt-2 grid grid-cols-2 gap-1.5">
-          {HOT_FROM_TWD.map((code) => {
-            const def = CURRENCY_DEFINITIONS[code];
-            return (
-              <Link
-                key={`from-twd-${code}`}
-                to={`/twd-${code.toLowerCase()}/`}
-                className="flex items-center gap-2 rounded-2xl border border-primary/10 bg-primary/5 px-3 py-2 text-xs font-bold text-primary transition hover:bg-primary/10"
-              >
-                <span aria-hidden="true">{def.flag}</span>
-                <span>台幣換{def.name}</span>
-              </Link>
-            );
-          })}
+          {POPULAR_FROM_TWD_LINKS.map((link) => (
+            <Link
+              key={`from-twd-${link.code}`}
+              to={link.href}
+              className="flex items-center gap-2 rounded-2xl border border-primary/10 bg-primary/5 px-3 py-2 text-xs font-bold text-primary transition hover:bg-primary/10"
+            >
+              <span aria-hidden="true">{link.flag}</span>
+              <span>{link.label}</span>
+            </Link>
+          ))}
         </div>
       </div>
 
diff --git a/apps/ratewise/src/components/LanguagePreferenceSync.tsx b/apps/ratewise/src/components/LanguagePreferenceSync.tsx
new file mode 100644
index 000000000..c28a2d0e3
--- /dev/null
+++ b/apps/ratewise/src/components/LanguagePreferenceSync.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { syncClientLanguagePreference } from '../i18n';
+
+export function LanguagePreferenceSync() {
+  React.useEffect(() => {
+    syncClientLanguagePreference();
+  }, []);
+
+  return null;
+}
diff --git a/apps/ratewise/src/components/Layout.tsx b/apps/ratewise/src/components/Layout.tsx
index 793bb6a69..90bc6c7f3 100644
--- a/apps/ratewise/src/components/Layout.tsx
+++ b/apps/ratewise/src/components/Layout.tsx
@@ -12,6 +12,7 @@ import { Footer } from './Footer';
 import { useUrlNormalization } from '../hooks/useUrlNormalization';
 import { NonCriticalLazyBoundary } from './NonCriticalLazyBoundary';
 import { PwaAppReadyBeacon } from './PwaAppReadyBeacon';
+import { LanguagePreferenceSync } from './LanguagePreferenceSync';
 
 const DecemberTheme = React.lazy(() => import('../features/calculator/easter-eggs/DecemberTheme'));
 
@@ -63,6 +64,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
     <React.StrictMode>
       <HelmetProvider context={helmetContext}>
         <ErrorBoundary>
+          <LanguagePreferenceSync />
           <PwaAppReadyBeacon />
           <div
             data-scroll-container="layout"
diff --git a/apps/ratewise/src/components/__tests__/Footer.test.tsx b/apps/ratewise/src/components/__tests__/Footer.test.tsx
index fa863ede3..47ea585c2 100644
--- a/apps/ratewise/src/components/__tests__/Footer.test.tsx
+++ b/apps/ratewise/src/components/__tests__/Footer.test.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 import { Footer } from '../Footer';
@@ -59,4 +59,15 @@ describe('Footer', () => {
       expect(timeSlot).toHaveClass('tabular-nums');
     }
   });
+
+  it('keeps desktop footer rendered hrefs unique', () => {
+    renderFooter();
+    const desktopFooter = screen.getByTestId('footer-desktop');
+    const hrefs = within(desktopFooter)
+      .getAllByRole('link')
+      .map((link) => link.getAttribute('href'))
+      .filter((href): href is string => Boolean(href));
+
+    expect(new Set(hrefs).size).toBe(hrefs.length);
+  });
 });
diff --git a/apps/ratewise/src/components/__tests__/HomepageSEOSection.test.tsx b/apps/ratewise/src/components/__tests__/HomepageSEOSection.test.tsx
new file mode 100644
index 000000000..775b383a3
--- /dev/null
+++ b/apps/ratewise/src/components/__tests__/HomepageSEOSection.test.tsx
@@ -0,0 +1,34 @@
+import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+import { POPULAR_FROM_TWD_LINKS, POPULAR_TO_TWD_LINKS } from '../../config/popular-currency-links';
+import { HomepageSEOSection } from '../HomepageSEOSection';
+
+describe('HomepageSEOSection', () => {
+  it('labels the section with its own heading instead of the app shell heading', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <HomepageSEOSection />
+      </MemoryRouter>,
+    );
+
+    const section = container.querySelector('section');
+    const heading = container.querySelector('#homepage-seo-section-heading');
+
+    expect(section).toHaveAttribute('aria-labelledby', 'homepage-seo-section-heading');
+    expect(heading).toHaveTextContent('即時匯率換算');
+  });
+
+  it('renders popular currency links from the shared SSOT', () => {
+    render(
+      <MemoryRouter>
+        <HomepageSEOSection />
+      </MemoryRouter>,
+    );
+
+    for (const link of [...POPULAR_TO_TWD_LINKS, ...POPULAR_FROM_TWD_LINKS]) {
+      expect(screen.getByRole('link', { name: link.label })).toHaveAttribute('href', link.href);
+    }
+  });
+});
diff --git a/apps/ratewise/src/config/__tests__/footer-links.spec.ts b/apps/ratewise/src/config/__tests__/footer-links.spec.ts
index 1b5e00410..6e0150e1d 100644
--- a/apps/ratewise/src/config/__tests__/footer-links.spec.ts
+++ b/apps/ratewise/src/config/__tests__/footer-links.spec.ts
@@ -11,12 +11,12 @@ describe('footer links config', () => {
   it('keeps popular rate links ordered by priority', () => {
     const labels = POPULAR_RATE_LINKS.map((link) => link.label);
     expect(labels).toEqual([
-      'USD 美元',
       'JPY 日圓',
+      'KRW 韓元',
+      'USD 美元',
       'EUR 歐元',
       'HKD 港幣',
-      'CNY 人民幣',
-      'KRW 韓元',
+      'SGD 新加坡幣',
     ]);
   });
 });
diff --git a/apps/ratewise/src/config/__tests__/popular-currency-links.test.ts b/apps/ratewise/src/config/__tests__/popular-currency-links.test.ts
new file mode 100644
index 000000000..2c189ecf8
--- /dev/null
+++ b/apps/ratewise/src/config/__tests__/popular-currency-links.test.ts
@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildCanonicalUrl,
+  buildPopularCurrencyItemListJsonLd,
+  CARD_RATE_GUIDE_PAGE,
+  CASH_VS_SPOT_RATE_PAGE,
+  HOMEPAGE_SEO,
+  SELL_RATE_VS_MID_RATE_PAGE,
+} from '../seo-metadata';
+import {
+  POPULAR_CURRENCY_CODES,
+  POPULAR_FROM_TWD_LINKS,
+  POPULAR_ITEM_LIST_LINKS,
+  POPULAR_RATE_LINKS,
+  POPULAR_RELATED_CURRENCY_LINKS,
+  POPULAR_TO_TWD_LINKS,
+} from '../popular-currency-links';
+import { FOOTER_SECTIONS, POPULAR_RATE_LINKS as FOOTER_POPULAR_RATE_LINKS } from '../footer-links';
+
+describe('popular currency links SSOT', () => {
+  it('keeps homepage forward and reverse links aligned to the same popular currency order', () => {
+    expect(POPULAR_TO_TWD_LINKS.map((link) => link.code)).toEqual([...POPULAR_CURRENCY_CODES]);
+    expect(POPULAR_FROM_TWD_LINKS.map((link) => link.code)).toEqual([...POPULAR_CURRENCY_CODES]);
+
+    for (const link of POPULAR_TO_TWD_LINKS) {
+      expect(link.href).toBe(`/${link.code.toLowerCase()}-twd/`);
+      expect(link.label).toMatch(/換台幣$/);
+    }
+
+    for (const link of POPULAR_FROM_TWD_LINKS) {
+      expect(link.href).toBe(`/twd-${link.code.toLowerCase()}/`);
+      expect(link.label).toMatch(/^台幣換/);
+    }
+  });
+
+  it('derives footer popular rates and authority-guide related currencies from the same top links', () => {
+    const topCodes = POPULAR_CURRENCY_CODES.slice(0, POPULAR_RATE_LINKS.length);
+
+    expect(POPULAR_RATE_LINKS.map((link) => link.code)).toEqual(topCodes);
+    expect(POPULAR_RELATED_CURRENCY_LINKS.map((link) => link.code)).toEqual(topCodes);
+    expect(FOOTER_POPULAR_RATE_LINKS).toEqual(POPULAR_RATE_LINKS);
+    expect(FOOTER_SECTIONS.find((section) => section.title === '熱門匯率')?.links).toEqual(
+      POPULAR_RATE_LINKS,
+    );
+  });
+
+  it('keeps guide related currency links in parity with the popular currency SSOT', () => {
+    for (const page of [SELL_RATE_VS_MID_RATE_PAGE, CASH_VS_SPOT_RATE_PAGE, CARD_RATE_GUIDE_PAGE]) {
+      expect(page.relatedCurrencies).toEqual(POPULAR_RELATED_CURRENCY_LINKS);
+    }
+  });
+
+  it('exposes homepage ItemList JSON-LD for the visible popular currency links', () => {
+    const itemList = buildPopularCurrencyItemListJsonLd();
+    const homepageItemList = HOMEPAGE_SEO.jsonLd.find((schema) => schema['@type'] === 'ItemList');
+
+    expect(homepageItemList).toEqual(itemList);
+    expect(itemList['numberOfItems']).toBe(POPULAR_ITEM_LIST_LINKS.length);
+
+    const elements = itemList['itemListElement'] as Record<string, unknown>[];
+    expect(elements).toHaveLength(POPULAR_ITEM_LIST_LINKS.length);
+
+    elements.forEach((element, index) => {
+      const link = POPULAR_ITEM_LIST_LINKS[index]!;
+      expect(element['@type']).toBe('ListItem');
+      expect(element['position']).toBe(index + 1);
+      expect(element['name']).toBe(link.label);
+      expect(element['url']).toBe(buildCanonicalUrl(link.href));
+    });
+  });
+});
diff --git a/apps/ratewise/src/config/footer-links.ts b/apps/ratewise/src/config/footer-links.ts
index d6d6fab1b..9a6093162 100644
--- a/apps/ratewise/src/config/footer-links.ts
+++ b/apps/ratewise/src/config/footer-links.ts
@@ -1,3 +1,5 @@
+import { POPULAR_RATE_LINKS } from './popular-currency-links';
+
 export interface FooterLink {
   label: string;
   href: string;
@@ -8,14 +10,7 @@ export interface FooterSection {
   links: FooterLink[];
 }
 
-export const POPULAR_RATE_LINKS: FooterLink[] = [
-  { label: 'USD 美元', href: '/usd-twd/' },
-  { label: 'JPY 日圓', href: '/jpy-twd/' },
-  { label: 'EUR 歐元', href: '/eur-twd/' },
-  { label: 'HKD 港幣', href: '/hkd-twd/' },
-  { label: 'CNY 人民幣', href: '/cny-twd/' },
-  { label: 'KRW 韓元', href: '/krw-twd/' },
-];
+export { POPULAR_RATE_LINKS };
 
 export const FOOTER_SECTIONS: FooterSection[] = [
   {
@@ -34,10 +29,10 @@ export const FOOTER_SECTIONS: FooterSection[] = [
     links: POPULAR_RATE_LINKS,
   },
   {
-    // 移除與熱門匯率重複的 USD/JPY/HKD/CNY/KRW，改為非重複的亞洲幣別。
+    // 移除與熱門匯率重複的 JPY/KRW/HKD/SGD，改為非重複的亞洲幣別。
     title: '亞洲貨幣',
     links: [
-      { label: 'SGD 新加坡幣', href: '/sgd-twd/' },
+      { label: 'CNY 人民幣', href: '/cny-twd/' },
       { label: 'THB 泰銖', href: '/thb-twd/' },
       { label: 'PHP 菲律賓披索', href: '/php-twd/' },
       { label: 'MYR 馬來幣', href: '/myr-twd/' },
diff --git a/apps/ratewise/src/config/popular-currency-links.ts b/apps/ratewise/src/config/popular-currency-links.ts
new file mode 100644
index 000000000..37a326d4f
--- /dev/null
+++ b/apps/ratewise/src/config/popular-currency-links.ts
@@ -0,0 +1,78 @@
+import { CURRENCY_DEFINITIONS } from '../features/ratewise/constants';
+import type { CurrencyCode } from '../features/ratewise/types';
+
+export interface PopularCurrencyLink {
+  code: CurrencyCode;
+  href: string;
+  label: string;
+}
+
+interface PopularCurrencyNavLink extends PopularCurrencyLink {
+  flag: string;
+  rateLabel: string;
+  shortLabel: string;
+}
+
+/** 首頁與 SEO ItemList 的熱門外幣順序；同時服務外幣→台幣與台幣→外幣導覽。 */
+export const POPULAR_CURRENCY_CODES = [
+  'JPY',
+  'KRW',
+  'USD',
+  'EUR',
+  'HKD',
+  'SGD',
+  'THB',
+  'VND',
+  'AUD',
+  'GBP',
+] as const satisfies readonly CurrencyCode[];
+
+const buildToTwdLink = (code: (typeof POPULAR_CURRENCY_CODES)[number]): PopularCurrencyNavLink => {
+  const definition = CURRENCY_DEFINITIONS[code];
+
+  return {
+    code,
+    flag: definition.flag,
+    href: `/${code.toLowerCase()}-twd/`,
+    label: `${definition.name}換台幣`,
+    rateLabel: `${definition.name}匯率`,
+    shortLabel: `${code} ${definition.name}`,
+  };
+};
+
+const buildFromTwdLink = (
+  code: (typeof POPULAR_CURRENCY_CODES)[number],
+): PopularCurrencyNavLink => {
+  const definition = CURRENCY_DEFINITIONS[code];
+
+  return {
+    code,
+    flag: definition.flag,
+    href: `/twd-${code.toLowerCase()}/`,
+    label: `台幣換${definition.name}`,
+    rateLabel: `${definition.name}匯率`,
+    shortLabel: `${code} ${definition.name}`,
+  };
+};
+
+export const POPULAR_TO_TWD_LINKS = POPULAR_CURRENCY_CODES.map(buildToTwdLink);
+
+export const POPULAR_FROM_TWD_LINKS = POPULAR_CURRENCY_CODES.map(buildFromTwdLink);
+
+export const POPULAR_ITEM_LIST_LINKS = [...POPULAR_TO_TWD_LINKS, ...POPULAR_FROM_TWD_LINKS];
+
+export const POPULAR_RATE_LINKS: PopularCurrencyLink[] = POPULAR_TO_TWD_LINKS.slice(0, 6).map(
+  ({ code, href, shortLabel }) => ({
+    code,
+    href,
+    label: shortLabel,
+  }),
+);
+
+export const POPULAR_RELATED_CURRENCY_LINKS: PopularCurrencyLink[] = POPULAR_RATE_LINKS.map(
+  ({ code, href }) => ({
+    code,
+    href,
+    label: `${CURRENCY_DEFINITIONS[code].name}匯率`,
+  }),
+);
diff --git a/apps/ratewise/src/config/seo-metadata.ts b/apps/ratewise/src/config/seo-metadata.ts
index a50b9e5eb..4f0ce64e4 100644
--- a/apps/ratewise/src/config/seo-metadata.ts
+++ b/apps/ratewise/src/config/seo-metadata.ts
@@ -1,6 +1,7 @@
 import { CURRENCY_DEFINITIONS, SUPPORTED_CURRENCY_COUNT } from '../features/ratewise/constants';
 import { APP_INFO, AUTHOR_PERSON, SEO_SOCIAL_LINKS } from './app-info';
 import { DEFAULT_TITLE, GUIDE_PAGE_TITLE } from './seo-static';
+import { POPULAR_ITEM_LIST_LINKS, POPULAR_RELATED_CURRENCY_LINKS } from './popular-currency-links';
 import {
   SEO_RATE_EXAMPLES,
   SEO_RATE_EXAMPLES_DATE,
@@ -510,6 +511,23 @@ export function buildCurrencyConversionServiceJsonLd(): JsonLdBlock {
   };
 }
 
+export function buildPopularCurrencyItemListJsonLd(): JsonLdBlock {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'ItemList',
+    '@id': `${buildCanonicalUrl('/')}#popular-currency-links`,
+    name: `${APP_INFO.name} 熱門幣別換算`,
+    itemListOrder: 'https://schema.org/ItemListOrderDescending',
+    numberOfItems: POPULAR_ITEM_LIST_LINKS.length,
+    itemListElement: POPULAR_ITEM_LIST_LINKS.map((link, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: link.label,
+      url: buildCanonicalUrl(link.href),
+    })),
+  };
+}
+
 /**
  * 生成 WebPage JSON-LD。
  * 用於首頁等非 Article 類型頁面，支援 speakable 屬性標記語音搜尋可朗讀區塊。
@@ -922,6 +940,8 @@ export const HOMEPAGE_SEO = {
     }),
     // CurrencyConversionService：精確定義此工具的核心功能，AI 引擎優先引用。
     buildCurrencyConversionServiceJsonLd(),
+    // ItemList：對應首頁可見熱門幣別導覽，讓搜尋與 AI 系統理解內部連結優先序。
+    buildPopularCurrencyItemListJsonLd(),
   ],
   content: {
     eyebrow: '臺灣銀行牌告匯率 · 每 5 分鐘同步 · 顯示實際買賣價',
@@ -1334,7 +1354,7 @@ export const ABOUT_PAGE_FAQ = [
   },
   {
     question: '這個網站使用哪些結構化資料幫助搜尋引擎與 AI 系統理解內容？',
-    answer: `目前站內實際部署的 schema.org JSON-LD 包含 WebSite（全站識別）、SoftwareApplication（產品資訊）、Organization（聯絡資訊）、CurrencyConversionService（首頁）、ExchangeRateSpecification（幣對頁與金額頁的匯率數值）、BreadcrumbList（麵包屑導覽）、Article（內容頁）、HowTo（Guide 教學頁）、FAQPage（僅 /faq/ 主 FAQ 頁）、Dataset（開放資料）與 ImageObject（分享圖片授權）。首頁與內容頁仍保留可讀 FAQ HTML，但不會在所有頁面重複輸出 FAQPage JSON-LD；幣別換算頁則以可稽核的匯率數值 schema 為主，避免把 FAQ rich result 訊號擴散到金融頁。sitemap.xml 只收錄公開可索引 URL，並同步 hreflang 資訊。`,
+    answer: `目前站內實際部署的 schema.org JSON-LD 包含 WebSite（全站識別）、SoftwareApplication（產品資訊）、Organization（聯絡資訊）、CurrencyConversionService（首頁）、ItemList（首頁熱門幣別導覽）、ExchangeRateSpecification（幣對頁與金額頁的匯率數值）、BreadcrumbList（麵包屑導覽）、Article（內容頁）、HowTo（Guide 教學頁）、FAQPage（僅 /faq/ 主 FAQ 頁）、Dataset（開放資料）與 ImageObject（分享圖片授權）。首頁與內容頁仍保留可讀 FAQ HTML，但不會在所有頁面重複輸出 FAQPage JSON-LD；幣別換算頁則以可稽核的匯率數值 schema 為主，避免把 FAQ rich result 訊號擴散到金融頁。sitemap.xml 只收錄公開可索引 URL，並同步 hreflang 資訊。`,
   },
   {
     question: `${APP_INFO.shortName} 是否支援 AI 搜尋引擎與 LLM 引用？`,
@@ -1416,14 +1436,7 @@ export const ABOUT_PAGE_SEO = {
 // ─────────────────────────────────────────────────────────────────────────────
 
 /** 熱門幣別連結：攻略頁連結至最常用的幣別頁。 */
-const RELATED_CURRENCIES: RelatedCurrencyLink[] = [
-  { href: '/jpy-twd/', label: '日圓匯率', code: 'JPY' },
-  { href: '/usd-twd/', label: '美金匯率', code: 'USD' },
-  { href: '/krw-twd/', label: '韓元匯率', code: 'KRW' },
-  { href: '/eur-twd/', label: '歐元匯率', code: 'EUR' },
-  { href: '/cny-twd/', label: '人民幣匯率', code: 'CNY' },
-  { href: '/thb-twd/', label: '泰銖匯率', code: 'THB' },
-];
+const RELATED_CURRENCIES: RelatedCurrencyLink[] = POPULAR_RELATED_CURRENCY_LINKS;
 
 const GUIDE_LINK_SELL_RATE_VS_MID_RATE: RelatedGuideLink = {
   href: '/sell-rate-vs-mid-rate/',
diff --git a/apps/ratewise/src/config/seo-schema-registry.ts b/apps/ratewise/src/config/seo-schema-registry.ts
index f10a014c8..a6eaab1fb 100644
--- a/apps/ratewise/src/config/seo-schema-registry.ts
+++ b/apps/ratewise/src/config/seo-schema-registry.ts
@@ -38,6 +38,13 @@ export const SEO_SCHEMA_REGISTRY = [
     icon: Database,
     enabled: true,
   },
+  {
+    type: 'ItemList',
+    desc: '首頁可見熱門幣別導覽清單',
+    pages: '首頁',
+    icon: Link2,
+    enabled: true,
+  },
   {
     type: 'ExchangeRateSpecification',
     desc: '幣對頁 / 金額頁的匯率數值、來源與換算金額',
diff --git a/apps/ratewise/src/i18n/index.test.ts b/apps/ratewise/src/i18n/index.test.ts
new file mode 100644
index 000000000..fb847a12e
--- /dev/null
+++ b/apps/ratewise/src/i18n/index.test.ts
@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  getInitialLanguage,
+  getLanguageDetectionOrder,
+  getPreferredClientLanguage,
+  LANGUAGE_STORAGE_KEY,
+} from './index';
+
+describe('i18n environment bootstrap', () => {
+  afterEach(() => {
+    localStorage.clear();
+  });
+
+  it('locks SSR and the first client hydration render to the default zh-TW locale', () => {
+    expect(getInitialLanguage()).toBe('zh-TW');
+    expect(getLanguageDetectionOrder(false, false)).toEqual([]);
+  });
+
+  it('uses browser detectors only when a DOM is available', () => {
+    expect(getLanguageDetectionOrder(true, false)).toEqual(['htmlTag', 'navigator']);
+    expect(getLanguageDetectionOrder(true, true)).toEqual(['localStorage', 'htmlTag', 'navigator']);
+  });
+
+  it('applies stored language preference after hydration with html language as default', () => {
+    expect(
+      getPreferredClientLanguage({
+        storageLanguage: 'en',
+        htmlLanguage: 'zh-TW',
+        navigatorLanguage: 'ja-JP',
+      }),
+    ).toBe('en');
+    expect(
+      getPreferredClientLanguage({
+        storageLanguage: null,
+        htmlLanguage: 'zh-Hant',
+        navigatorLanguage: 'en-US',
+      }),
+    ).toBe('zh-TW');
+    expect(
+      getPreferredClientLanguage({
+        storageLanguage: null,
+        htmlLanguage: '',
+        navigatorLanguage: 'ko-KR',
+      }),
+    ).toBe('ko');
+  });
+
+  it('does not overwrite an existing stored language during the default zh-TW bootstrap', async () => {
+    vi.resetModules();
+    localStorage.setItem(LANGUAGE_STORAGE_KEY, 'en');
+
+    await import('./index');
+
+    expect(localStorage.getItem(LANGUAGE_STORAGE_KEY)).toBe('en');
+  });
+});
diff --git a/apps/ratewise/src/i18n/index.ts b/apps/ratewise/src/i18n/index.ts
index 090d3d271..96d7c79df 100644
--- a/apps/ratewise/src/i18n/index.ts
+++ b/apps/ratewise/src/i18n/index.ts
@@ -27,6 +27,8 @@ import ko from './locales/ko';
 
 export const SUPPORTED_LANGUAGES = ['zh-TW', 'en', 'ja', 'ko'] as const;
 export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+export const DEFAULT_LANGUAGE: SupportedLanguage = 'zh-TW';
+export const LANGUAGE_STORAGE_KEY = 'ratewise-language';
 
 export const LANGUAGE_OPTIONS: { value: SupportedLanguage; label: string; flag: string }[] = [
   { value: 'en', label: 'English', flag: '🇺🇸' },
@@ -52,8 +54,84 @@ const resources = {
   ko: { translation: ko },
 };
 
-const canUseBrowserLanguageStorage =
-  typeof window !== 'undefined' && import.meta.env.MODE !== 'test';
+const canUseDOMLanguageDetection = typeof window !== 'undefined';
+const canUseBrowserLanguageStorage = canUseDOMLanguageDetection && import.meta.env.MODE !== 'test';
+
+export function getLanguageDetectionOrder(
+  hasDOM = canUseDOMLanguageDetection,
+  canUseStorage = canUseBrowserLanguageStorage,
+): string[] {
+  if (!hasDOM) {
+    return [];
+  }
+
+  return canUseStorage ? ['localStorage', 'htmlTag', 'navigator'] : ['htmlTag', 'navigator'];
+}
+
+export function getInitialLanguage(): SupportedLanguage {
+  return DEFAULT_LANGUAGE;
+}
+
+const initialLanguage = getInitialLanguage();
+
+export function getPreferredClientLanguage({
+  storageLanguage,
+  htmlLanguage,
+  navigatorLanguage,
+}: {
+  storageLanguage?: string | null;
+  htmlLanguage?: string | null;
+  navigatorLanguage?: string | null;
+}): SupportedLanguage {
+  const candidate =
+    storageLanguage?.trim() ||
+    htmlLanguage?.trim() ||
+    navigatorLanguage?.trim() ||
+    DEFAULT_LANGUAGE;
+
+  return normalizeLanguage(candidate);
+}
+
+export function resolveClientPreferredLanguage(): SupportedLanguage {
+  if (!canUseDOMLanguageDetection) {
+    return DEFAULT_LANGUAGE;
+  }
+
+  let storageLanguage: string | null = null;
+  try {
+    storageLanguage = window.localStorage?.getItem(LANGUAGE_STORAGE_KEY) ?? null;
+  } catch {
+    storageLanguage = null;
+  }
+
+  const htmlLanguage = document.documentElement.lang;
+  const navigatorLanguage = navigator.languages?.[0] ?? navigator.language;
+
+  return getPreferredClientLanguage({ storageLanguage, htmlLanguage, navigatorLanguage });
+}
+
+export function persistLanguagePreference(language: SupportedLanguage): void {
+  if (!canUseDOMLanguageDetection || import.meta.env.MODE === 'test') {
+    return;
+  }
+
+  try {
+    window.localStorage?.setItem(LANGUAGE_STORAGE_KEY, language);
+  } catch {
+    // Storage may be blocked in private or embedded contexts; language still changes in memory.
+  }
+}
+
+export function syncClientLanguagePreference(): void {
+  if (!canUseDOMLanguageDetection || import.meta.env.MODE === 'test') {
+    return;
+  }
+
+  const preferredLanguage = resolveClientPreferredLanguage();
+  if (preferredLanguage !== getResolvedLanguage()) {
+    void i18n.changeLanguage(preferredLanguage);
+  }
+}
 
 /**
  * 正規化語系代碼
@@ -119,6 +197,7 @@ void i18n
   .use(initReactI18next)
   .init({
     resources,
+    lng: initialLanguage,
     // 明確列出所有支援的語系代碼（包含 zh-Hant 因為 index.html lang="zh-Hant"）
     supportedLngs: ['zh-TW', 'zh-Hant', 'en', 'ja', 'ko'],
     // 語系 fallback 配置：zh-Hant → zh-TW
@@ -132,10 +211,10 @@ void i18n
       escapeValue: false,
     },
     detection: {
-      order: canUseBrowserLanguageStorage
-        ? ['localStorage', 'htmlTag', 'navigator']
-        : ['htmlTag', 'navigator'],
-      caches: canUseBrowserLanguageStorage ? ['localStorage'] : [],
+      order: getLanguageDetectionOrder(),
+      // Avoid overwriting a stored user preference during the zh-TW hydration pass.
+      // Settings persists explicit language changes via persistLanguagePreference().
+      caches: [],
       lookupLocalStorage: 'ratewise-language',
     },
     react: {
diff --git a/apps/ratewise/src/i18n/locales.test.ts b/apps/ratewise/src/i18n/locales.test.ts
new file mode 100644
index 000000000..d00fc9de2
--- /dev/null
+++ b/apps/ratewise/src/i18n/locales.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import zhTW from './locales/zh-TW';
+import en from './locales/en';
+import ja from './locales/ja';
+import ko from './locales/ko';
+
+type TranslationTree = Record<string, unknown>;
+
+const localeBundles = {
+  'zh-TW': zhTW,
+  en,
+  ja,
+  ko,
+} satisfies Record<string, TranslationTree>;
+
+const supportEntryDescriptionKeys = [
+  'settings.supportInfoDesc',
+  'settings.faqDesc',
+  'settings.usageGuideDesc',
+  'settings.aboutUsDesc',
+  'settings.openDataApiDesc',
+  'settings.seoTechDesc',
+  'settings.privacyPolicyDesc',
+] as const;
+
+function collectLeafPaths(value: unknown, prefix = ''): string[] {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return [prefix];
+  }
+
+  return Object.entries(value as TranslationTree).flatMap(([key, child]) =>
+    collectLeafPaths(child, prefix ? `${prefix}.${key}` : key),
+  );
+}
+
+function getPath(bundle: TranslationTree, path: string): unknown {
+  return path.split('.').reduce<unknown>((current, key) => {
+    if (typeof current !== 'object' || current === null) {
+      return undefined;
+    }
+
+    return (current as TranslationTree)[key];
+  }, bundle);
+}
+
+describe('support page localization', () => {
+  it('keeps supportPages namespace structurally aligned across locales', () => {
+    const zhPaths = collectLeafPaths(zhTW.supportPages).sort();
+
+    Object.entries(localeBundles).forEach(([locale, bundle]) => {
+      expect(collectLeafPaths(bundle.supportPages).sort(), locale).toEqual(zhPaths);
+    });
+  });
+
+  it('provides task-oriented descriptions for every support entry card', () => {
+    Object.entries(localeBundles).forEach(([locale, bundle]) => {
+      supportEntryDescriptionKeys.forEach((key) => {
+        expect(getPath(bundle, key), `${locale}:${key}`).toEqual(expect.any(String));
+        expect((getPath(bundle, key) as string).trim(), `${locale}:${key}`).not.toHaveLength(0);
+      });
+    });
+  });
+
+  it('does not expose internal AI-governance jargon in settings support cards', () => {
+    expect(zhTW.settings.seoTechDesc).not.toContain('AI 引用治理');
+    expect(en.settings.seoTechDesc).not.toContain('AI citation governance');
+    expect(ja.settings.seoTechDesc).not.toContain('AI 引用ガバナンス');
+    expect(ko.settings.seoTechDesc).not.toContain('AI 인용 거버넌스');
+  });
+});
diff --git a/apps/ratewise/src/i18n/locales/en.ts b/apps/ratewise/src/i18n/locales/en.ts
index f0a864b3c..1599812c0 100644
--- a/apps/ratewise/src/i18n/locales/en.ts
+++ b/apps/ratewise/src/i18n/locales/en.ts
@@ -162,7 +162,7 @@ const en = {
       'Buy/sell midpoint, less precise — useful as a forex market reference for traders',
     // Support & Info section
     supportInfo: 'Support & Info',
-    supportInfoDesc: 'Usage, data sources, privacy, and technical transparency are grouped here.',
+    supportInfoDesc: 'Find usage help, data sources, API docs, privacy, and service details.',
     faq: 'FAQ',
     faqDesc: 'Clarify buy/sell rates, cash vs spot, card rates, and data freshness.',
     usageGuide: 'Usage Guide',
@@ -175,9 +175,58 @@ const en = {
     privacyPolicy: 'Privacy Policy',
     privacyPolicyDesc: 'Understand data handling, analytics tools, and privacy boundaries.',
     openDataApi: 'Open Data API',
-    openDataApiDesc: 'Access latest.json, OpenAPI, and AI-friendly data entry points.',
+    openDataApiDesc: 'View latest.json, OpenAPI, and data fields for integrations or audits.',
     seoTech: 'SEO Technology',
-    seoTechDesc: 'Review indexable pages, structured data, and AI citation governance.',
+    seoTechDesc: 'Review indexable pages, sitemap, structured data, and public files.',
+  },
+
+  // Support pages
+  supportPages: {
+    common: {
+      author: 'Author',
+      version: 'Version',
+      lastUpdated: 'Last updated',
+      estimatedTime: 'Estimated time',
+      twoMinutes: 'About 2 minutes',
+    },
+    faq: {
+      title: 'FAQ',
+      subtitle:
+        'Clear answers on buy/sell rates, cash vs spot rates, card exchange rates, DCC, and data refreshes.',
+    },
+    guide: {
+      title: 'How to use {{appName}} for exchange rates',
+      subtitle:
+        'A complete 8-step guide for one-off conversions, multi-currency checks, favorites, and trip planning.',
+    },
+    about: {
+      title: 'About {{appName}}',
+      subtitle:
+        '{{appName}} focuses on Taiwan exchange decisions: buy/sell quotes, cash/spot rates, and public data sources.',
+    },
+    privacy: {
+      title: 'Privacy Policy',
+      subtitle:
+        'Favorites, settings, and conversion history stay on your device; this page explains analytics, security services, and data boundaries.',
+    },
+    openData: {
+      title: 'Open Data API',
+      subtitle:
+        'Taiwan Bank exchange-rate JSON endpoints with latest.json, history files, OpenAPI, and field definitions.',
+      badges: {
+        currencyCount: '{{count}} currencies',
+        refresh: 'Updates every 5 minutes',
+        noApiKey: 'No API key',
+        etag: 'ETag support',
+        cdn: 'Global CDN',
+      },
+    },
+    seoTech: {
+      eyebrow: 'SEO Technology',
+      title: '{{appName}} SEO Architecture',
+      subtitle:
+        'This page lists the files, pages, structured data, and update flow that search engines and AI systems can read from {{appName}}. The numbers come directly from config so they can be checked against production.',
+    },
   },
 
   // Styles
diff --git a/apps/ratewise/src/i18n/locales/ja.ts b/apps/ratewise/src/i18n/locales/ja.ts
index 670ecd5ae..10669c8b1 100644
--- a/apps/ratewise/src/i18n/locales/ja.ts
+++ b/apps/ratewise/src/i18n/locales/ja.ts
@@ -159,7 +159,7 @@ const ja = {
     rateModeMidDesc: '売値と買値の中間レート。精度はやや低め。外為トレーダーの市場参考値として活用',
     // サポートと情報セクション
     supportInfo: 'サポートと情報',
-    supportInfoDesc: '使い方、データソース、プライバシー、技術的な透明性をここにまとめています。',
+    supportInfoDesc: '使い方、データソース、API、プライバシー、サービス情報を確認できます。',
     faq: 'よくある質問',
     faqDesc: '買値・売値、現金・即時、カードレート、データ更新をすばやく確認できます。',
     usageGuide: 'ご利用ガイド',
@@ -171,9 +171,57 @@ const ja = {
     privacyPolicy: 'プライバシーポリシー',
     privacyPolicyDesc: 'データ処理、分析ツール、プライバシーの境界を確認できます。',
     openDataApi: 'オープンデータ API',
-    openDataApiDesc: 'latest.json、OpenAPI、AI 向けデータ入口を確認できます。',
+    openDataApiDesc: 'latest.json、OpenAPI、データ項目を確認し、連携や監査に使えます。',
     seoTech: 'SEO 技術開示',
-    seoTechDesc: 'インデックス対象ページ、構造化データ、AI 引用ガバナンスを確認できます。',
+    seoTechDesc: 'インデックス対象ページ、sitemap、構造化データ、公開ファイルを確認できます。',
+  },
+
+  // サポートページ
+  supportPages: {
+    common: {
+      author: '作者',
+      version: 'バージョン',
+      lastUpdated: '最終更新',
+      estimatedTime: '所要時間',
+      twoMinutes: '約2分',
+    },
+    faq: {
+      title: 'よくある質問',
+      subtitle: '買値・売値、現金・即時、カードレート、DCC、データ更新をまとめて確認できます。',
+    },
+    guide: {
+      title: '{{appName}} で為替レートを調べる方法',
+      subtitle:
+        '単一換算、多通貨比較、お気に入り設定まで、旅行前によく使う確認手順を8ステップで案内します。',
+    },
+    about: {
+      title: '{{appName}} について',
+      subtitle:
+        '{{appName}} は台湾の両替シーンに合わせ、買値・売値、現金・即時、公開データソースを重視します。',
+    },
+    privacy: {
+      title: 'プライバシーポリシー',
+      subtitle:
+        'お気に入り、設定、換算履歴は端末内に保存されます。このページでは分析、安全サービス、データ処理の範囲を説明します。',
+    },
+    openData: {
+      title: 'オープンデータ API',
+      subtitle:
+        '台湾銀行の為替レート JSON エンドポイントとして、latest.json、履歴データ、OpenAPI、データ項目を提供します。',
+      badges: {
+        currencyCount: '{{count}} 通貨',
+        refresh: '5分ごとに更新',
+        noApiKey: 'API Key 不要',
+        etag: 'ETag 対応',
+        cdn: 'グローバル CDN',
+      },
+    },
+    seoTech: {
+      eyebrow: 'SEO 技術開示',
+      title: '{{appName}} SEO アーキテクチャ',
+      subtitle:
+        'このページでは、検索エンジンや AI が {{appName}} から読めるファイル、ページ、構造化データ、更新フローを確認できます。数値は設定ファイルから取得し、本番状態と照合しやすくしています。',
+    },
   },
 
   // Styles
diff --git a/apps/ratewise/src/i18n/locales/ko.ts b/apps/ratewise/src/i18n/locales/ko.ts
index dae1b5c8a..ca7f2a6ba 100644
--- a/apps/ratewise/src/i18n/locales/ko.ts
+++ b/apps/ratewise/src/i18n/locales/ko.ts
@@ -159,7 +159,7 @@ const ko = {
     rateModeMidDesc: '매도·매입 중간값. 정밀도가 낮아 외환 트레이더의 시장 참고용으로 적합',
     // 지원 및 정보 섹션
     supportInfo: '지원 및 정보',
-    supportInfoDesc: '사용 방법, 데이터 출처, 개인정보, 기술 투명성 정보를 한곳에 모았습니다.',
+    supportInfoDesc: '사용 방법, 데이터 출처, API, 개인정보, 서비스 정보를 확인합니다.',
     faq: '자주 묻는 질문',
     faqDesc: '매입/매도율, 현금/전신환, 카드 환율, 데이터 갱신 기준을 빠르게 확인합니다.',
     usageGuide: '사용 가이드',
@@ -171,9 +171,57 @@ const ko = {
     privacyPolicy: '개인정보 처리방침',
     privacyPolicyDesc: '데이터 처리, 분석 도구, 개인정보 보호 범위를 확인합니다.',
     openDataApi: '공개 데이터 API',
-    openDataApiDesc: 'latest.json, OpenAPI, AI 친화 데이터 진입점을 확인합니다.',
+    openDataApiDesc: 'latest.json, OpenAPI, 데이터 필드를 확인해 연동이나 감사에 활용합니다.',
     seoTech: 'SEO 기술 공개',
-    seoTechDesc: '색인 대상 페이지, 구조화 데이터, AI 인용 거버넌스를 확인합니다.',
+    seoTechDesc: '색인 대상 페이지, sitemap, 구조화 데이터, 공개 파일을 확인합니다.',
+  },
+
+  // 지원 페이지
+  supportPages: {
+    common: {
+      author: '작성자',
+      version: '버전',
+      lastUpdated: '마지막 업데이트',
+      estimatedTime: '예상 시간',
+      twoMinutes: '약 2분',
+    },
+    faq: {
+      title: '자주 묻는 질문',
+      subtitle: '매입/매도율, 현금/전신환, 카드 환율, DCC, 데이터 갱신을 한곳에서 확인합니다.',
+    },
+    guide: {
+      title: '{{appName}} 환율 조회 사용법',
+      subtitle:
+        '단일 환산, 다중 통화 비교, 즐겨찾기 설정까지 여행 전 자주 쓰는 확인 흐름을 8단계로 안내합니다.',
+    },
+    about: {
+      title: '{{appName}} 소개',
+      subtitle:
+        '{{appName}}는 대만 환전 상황에 맞춰 매입/매도, 현금/전신환, 공개 데이터 출처를 중심으로 보여줍니다.',
+    },
+    privacy: {
+      title: '개인정보 처리방침',
+      subtitle:
+        '즐겨찾기, 설정, 환산 기록은 기기에 보관됩니다. 이 페이지는 분석, 보안 서비스, 데이터 처리 범위를 설명합니다.',
+    },
+    openData: {
+      title: '공개 데이터 API',
+      subtitle:
+        '대만 은행 고시 환율 JSON 엔드포인트로 latest.json, 기록 데이터, OpenAPI, 데이터 필드를 제공합니다.',
+      badges: {
+        currencyCount: '{{count}}개 통화',
+        refresh: '5분마다 업데이트',
+        noApiKey: 'API Key 불필요',
+        etag: 'ETag 지원',
+        cdn: '글로벌 CDN',
+      },
+    },
+    seoTech: {
+      eyebrow: 'SEO 기술 공개',
+      title: '{{appName}} SEO 아키텍처',
+      subtitle:
+        '이 페이지는 검색 엔진과 AI가 {{appName}}에서 읽을 수 있는 파일, 페이지, 구조화 데이터, 업데이트 흐름을 정리합니다. 숫자는 설정 파일에서 가져와 운영 상태와 대조하기 쉽습니다.',
+    },
   },
 
   // Styles
diff --git a/apps/ratewise/src/i18n/locales/zh-TW.ts b/apps/ratewise/src/i18n/locales/zh-TW.ts
index 94a46de07..a9626a30a 100644
--- a/apps/ratewise/src/i18n/locales/zh-TW.ts
+++ b/apps/ratewise/src/i18n/locales/zh-TW.ts
@@ -159,7 +159,7 @@ const zhTW = {
     rateModeMidDesc: '買賣中間價，精準度相對較低，適合外匯交易者做市場行情參考',
     // 支援與資訊區塊
     supportInfo: '支援與資訊',
-    supportInfoDesc: '使用方法、資料來源、隱私與技術透明資訊，都集中在這裡。',
+    supportInfoDesc: '查使用教學、資料來源、API、隱私與服務說明。',
     faq: '常見問題',
     faqDesc: '快速釐清買入賣出、現金即期、刷卡匯率與資料更新。',
     usageGuide: '使用指南',
@@ -171,9 +171,53 @@ const zhTW = {
     privacyPolicy: '隱私權政策',
     privacyPolicyDesc: '了解資料處理、分析工具與使用者隱私邊界。',
     openDataApi: '開放資料 API',
-    openDataApiDesc: '取得 latest.json、OpenAPI 與 AI-friendly 資料入口。',
+    openDataApiDesc: '查看 latest.json、OpenAPI 與資料欄位，方便接入或稽核。',
     seoTech: 'SEO 技術揭露',
-    seoTechDesc: '查看可索引頁面、結構化資料與 AI 引用治理。',
+    seoTechDesc: '查看可索引頁面、sitemap、結構化資料與公開檔案。',
+  },
+
+  // Support pages
+  supportPages: {
+    common: {
+      author: '作者',
+      version: '版本',
+      lastUpdated: '最後更新',
+      estimatedTime: '預估完成時間',
+      twoMinutes: '約 2 分鐘',
+    },
+    faq: {
+      title: '常見問題',
+      subtitle: '把買入賣出、現金即期、刷卡匯率、DCC 與資料更新一次說清楚。',
+    },
+    guide: {
+      title: '如何使用 {{appName}} 進行匯率換算',
+      subtitle: '完整 8 步驟教學，從單筆換算、多幣別比較到收藏設定，完成出國前常見查價。',
+    },
+    about: {
+      title: '關於 {{appName}}',
+      subtitle: '{{appName}} 專注台灣換匯情境：看買入賣出、現金即期與公開資料來源。',
+    },
+    privacy: {
+      title: '隱私政策',
+      subtitle: '收藏、設定與換算歷史留在你的裝置；這頁列出分析、安全服務與資料處理邊界。',
+    },
+    openData: {
+      title: '開放資料 API',
+      subtitle: '台灣銀行牌告匯率 JSON 端點，提供 latest.json、歷史資料、OpenAPI 與資料欄位。',
+      badges: {
+        currencyCount: '{{count}} 種幣別',
+        refresh: '每 5 分鐘更新',
+        noApiKey: '無需 API Key',
+        etag: 'ETag 支援',
+        cdn: 'CDN 全球加速',
+      },
+    },
+    seoTech: {
+      eyebrow: 'SEO 技術揭露',
+      title: '{{appName}} SEO 架構',
+      subtitle:
+        '這頁列出 {{appName}} 目前公開給搜尋引擎和 AI 讀取的檔案、頁面與資料更新流程。數字直接來自設定檔，方便核對實際部署狀態。',
+    },
   },
 
   // Styles
diff --git a/apps/ratewise/src/pages/About.tsx b/apps/ratewise/src/pages/About.tsx
index 862345860..f39fc510c 100644
--- a/apps/ratewise/src/pages/About.tsx
+++ b/apps/ratewise/src/pages/About.tsx
@@ -8,16 +8,15 @@ import { APP_INFO, AUTHOR_PERSON, getCopyrightYears } from '../config/app-info';
 import { MailtoLink } from '../components/MailtoLink';
 import { ABOUT_PAGE_SEO, SITE_SEO } from '../config/seo-metadata';
 import { SUPPORTED_CURRENCY_COUNT } from '../features/ratewise/constants';
-
-const LAST_UPDATED = new Date(SITE_SEO.updatedTime).toLocaleDateString('zh-TW', {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  timeZone: 'Asia/Taipei',
-});
+import { formatLocalizedDate } from '../utils/timeFormatter';
 
 export default function About() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lastUpdated = formatLocalizedDate(
+    SITE_SEO.updatedTime,
+    i18n.resolvedLanguage ?? i18n.language,
+  );
+
   return (
     <>
       <SEOHelmet
@@ -39,12 +38,14 @@ export default function About() {
           />
 
           <div className="mb-8">
-            <h1 className="mb-2 text-3xl font-bold text-text">關於 {APP_INFO.name}</h1>
+            <h1 className="mb-2 text-3xl font-bold text-text">
+              {t('supportPages.about.title', { appName: APP_INFO.name })}
+            </h1>
             <p className="text-text-muted">
-              專注提供台灣用戶更接近實際換匯情境的匯率資訊，而不是只顯示中間價。
+              {t('supportPages.about.subtitle', { appName: APP_INFO.shortName })}
             </p>
             <p className="mt-2 text-sm text-text-muted">
-              作者：
+              {t('supportPages.common.author')}：
               <a
                 href={APP_INFO.threadsUrl}
                 target="_blank"
@@ -54,8 +55,9 @@ export default function About() {
               >
                 {AUTHOR_PERSON.name}
               </a>
-              （{APP_INFO.author}）・ 版本：{getDisplayVersion()} ・ 最後更新：
-              <time dateTime={new Date(SITE_SEO.updatedTime).toISOString()}>{LAST_UPDATED}</time>
+              （{APP_INFO.author}）・ {t('supportPages.common.version')}：{getDisplayVersion()} ・{' '}
+              {t('supportPages.common.lastUpdated')}：
+              <time dateTime={new Date(SITE_SEO.updatedTime).toISOString()}>{lastUpdated}</time>
             </p>
           </div>
 
diff --git a/apps/ratewise/src/pages/FAQ.tsx b/apps/ratewise/src/pages/FAQ.tsx
index 0beab68df..860b54b74 100644
--- a/apps/ratewise/src/pages/FAQ.tsx
+++ b/apps/ratewise/src/pages/FAQ.tsx
@@ -7,6 +7,7 @@ import { APP_INFO } from '../config/app-info';
 import { MailtoLink } from '../components/MailtoLink';
 import { AnswerCapsule } from '../components/AnswerCapsule';
 import { FAQ_PAGE_SEO, SITE_SEO } from '../config/seo-metadata';
+import { formatLocalizedDate } from '../utils/timeFormatter';
 
 // 將 FAQ 答案中的 email 位址替換為 MailtoLink，防止 CF Email Obfuscation 將其改寫為爬蟲不可讀的 /cdn-cgi/... 連結。
 const EMAIL_RE = /([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})/;
@@ -21,15 +22,14 @@ function renderFaqAnswer(answer: string): React.ReactNode {
 }
 
 const FAQ_ENTRIES = FAQ_PAGE_SEO.faqContent ?? [];
-const LAST_UPDATED = new Date(SITE_SEO.updatedTime).toLocaleDateString('zh-TW', {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  timeZone: 'Asia/Taipei',
-});
 
 export default function FAQ() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lastUpdated = formatLocalizedDate(
+    SITE_SEO.updatedTime,
+    i18n.resolvedLanguage ?? i18n.language,
+  );
+
   return (
     <>
       <SEOHelmet
@@ -51,14 +51,13 @@ export default function FAQ() {
           />
 
           <div className="mb-8">
-            <h1 className="mb-2 text-4xl font-bold text-text">常見問題</h1>
-            <p className="text-text-muted">
-              集中整理台銀牌告匯率、買入賣出、現金與即期、刷卡匯率與 DCC 等核心問題。
-            </p>
+            <h1 className="mb-2 text-4xl font-bold text-text">{t('supportPages.faq.title')}</h1>
+            <p className="text-text-muted">{t('supportPages.faq.subtitle')}</p>
             <p className="mt-2 text-sm text-text-muted">
-              作者：<span itemProp="author">{APP_INFO.author}</span> ・ 最後更新：
+              {t('supportPages.common.author')}：<span itemProp="author">{APP_INFO.author}</span> ・{' '}
+              {t('supportPages.common.lastUpdated')}：
               <time dateTime={new Date(SITE_SEO.updatedTime).toISOString()} itemProp="dateModified">
-                {LAST_UPDATED}
+                {lastUpdated}
               </time>
             </p>
           </div>
diff --git a/apps/ratewise/src/pages/Guide.tsx b/apps/ratewise/src/pages/Guide.tsx
index aa0f5da1e..0c884c082 100644
--- a/apps/ratewise/src/pages/Guide.tsx
+++ b/apps/ratewise/src/pages/Guide.tsx
@@ -5,17 +5,11 @@ import { PageNavHeader } from '../components/PageNavHeader';
 import { AnswerCapsule } from '../components/AnswerCapsule';
 import { GUIDE_PAGE_SEO, SITE_SEO } from '../config/seo-metadata';
 import { APP_INFO } from '../config/app-info';
+import { formatLocalizedDate } from '../utils/timeFormatter';
 
 const HOW_TO = GUIDE_PAGE_SEO.howTo;
 const HOW_TO_STEPS = HOW_TO?.steps ?? [];
 
-const LAST_UPDATED = new Date(SITE_SEO.updatedTime).toLocaleDateString('zh-TW', {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  timeZone: 'Asia/Taipei',
-});
-
 const RATE_READING_TIPS = [
   {
     title: '先判斷你是買外幣還是賣外幣',
@@ -48,7 +42,12 @@ const FAQ_ITEMS = [
 ];
 
 const Guide = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lastUpdated = formatLocalizedDate(
+    SITE_SEO.updatedTime,
+    i18n.resolvedLanguage ?? i18n.language,
+  );
+
   return (
     <>
       <SEOHelmet
@@ -72,10 +71,10 @@ const Guide = () => {
 
           <div className="mb-8">
             <h1 className="mb-2 text-4xl font-bold text-text">
-              如何使用 {APP_INFO.shortName} 進行匯率換算
+              {t('supportPages.guide.title', { appName: APP_INFO.shortName })}
             </h1>
             <p className="text-text-muted">
-              完整 8 步驟教學，快速學會使用 {APP_INFO.shortName} 進行單幣別和多幣別匯率換算。
+              {t('supportPages.guide.subtitle', { appName: APP_INFO.shortName })}
             </p>
             <div className="mt-2 flex items-center text-sm text-text-muted">
               <svg className="mr-1 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -86,12 +85,13 @@ const Guide = () => {
                   d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                 />
               </svg>
-              預估完成時間：約 2 分鐘
+              {t('supportPages.common.estimatedTime')}：{t('supportPages.common.twoMinutes')}
             </div>
             <p className="mt-2 text-sm text-text-muted">
-              作者：<span itemProp="author">{APP_INFO.author}</span> ・ 最後更新：
+              {t('supportPages.common.author')}：<span itemProp="author">{APP_INFO.author}</span> ・{' '}
+              {t('supportPages.common.lastUpdated')}：
               <time dateTime={new Date(SITE_SEO.updatedTime).toISOString()} itemProp="dateModified">
-                {LAST_UPDATED}
+                {lastUpdated}
               </time>
             </p>
           </div>
diff --git a/apps/ratewise/src/pages/OpenData.tsx b/apps/ratewise/src/pages/OpenData.tsx
index 704ef9c2d..fd2af86fd 100644
--- a/apps/ratewise/src/pages/OpenData.tsx
+++ b/apps/ratewise/src/pages/OpenData.tsx
@@ -496,17 +496,21 @@ const OpenData = () => {
 
           {/* ── Hero ── */}
           <div className="mb-10">
-            <h1 className="mb-3 text-4xl font-bold text-text">開放資料 API</h1>
+            <h1 className="mb-3 text-4xl font-bold text-text">
+              {t('supportPages.openData.title')}
+            </h1>
             <p className="mb-4 max-w-2xl text-lg text-text-muted">
-              台灣銀行牌告匯率 JSON 端點，免費、免 API Key、免帳號。
+              {t('supportPages.openData.subtitle')}
             </p>
             <div className="flex flex-wrap gap-2">
               {[
-                `${SUPPORTED_CURRENCIES.length} 種幣別`,
-                '每 5 分鐘更新',
-                '無需 API Key',
-                'ETag 支援',
-                'CDN 全球加速',
+                t('supportPages.openData.badges.currencyCount', {
+                  count: SUPPORTED_CURRENCIES.length,
+                }),
+                t('supportPages.openData.badges.refresh'),
+                t('supportPages.openData.badges.noApiKey'),
+                t('supportPages.openData.badges.etag'),
+                t('supportPages.openData.badges.cdn'),
               ].map((badge) => (
                 <span
                   key={badge}
diff --git a/apps/ratewise/src/pages/Privacy.tsx b/apps/ratewise/src/pages/Privacy.tsx
index 9f1a297e4..428a72a95 100644
--- a/apps/ratewise/src/pages/Privacy.tsx
+++ b/apps/ratewise/src/pages/Privacy.tsx
@@ -5,16 +5,15 @@ import { PageNavHeader } from '../components/PageNavHeader';
 import { APP_INFO, getCopyrightYears } from '../config/app-info';
 import { MailtoLink } from '../components/MailtoLink';
 import { PRIVACY_PAGE_SEO, SITE_SEO } from '../config/seo-metadata';
-
-const LAST_UPDATED = new Date(SITE_SEO.updatedTime).toLocaleDateString('zh-TW', {
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric',
-  timeZone: 'Asia/Taipei',
-});
+import { formatLocalizedDate } from '../utils/timeFormatter';
 
 export default function Privacy() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const lastUpdated = formatLocalizedDate(
+    SITE_SEO.updatedTime,
+    i18n.resolvedLanguage ?? i18n.language,
+  );
+
   return (
     <>
       <SEOHelmet
@@ -35,8 +34,11 @@ export default function Privacy() {
           />
 
           <div className="mb-8">
-            <h1 className="mb-2 text-3xl font-bold text-text">隱私政策</h1>
-            <p className="text-text-muted">最後更新：{LAST_UPDATED}</p>
+            <h1 className="mb-2 text-3xl font-bold text-text">{t('supportPages.privacy.title')}</h1>
+            <p className="max-w-2xl text-text-muted">{t('supportPages.privacy.subtitle')}</p>
+            <p className="mt-2 text-sm text-text-muted">
+              {t('supportPages.common.lastUpdated')}：{lastUpdated}
+            </p>
           </div>
 
           <section className="card mb-6 p-6">
diff --git a/apps/ratewise/src/pages/SeoTech.tsx b/apps/ratewise/src/pages/SeoTech.tsx
index 01c30d86c..10c24050a 100644
--- a/apps/ratewise/src/pages/SeoTech.tsx
+++ b/apps/ratewise/src/pages/SeoTech.tsx
@@ -336,15 +336,14 @@ export default function SeoTech() {
             <div className="flex items-center gap-2 mb-2">
               <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-semibold">
                 <Search className="w-3 h-3" />
-                SEO 技術揭露
+                {t('supportPages.seoTech.eyebrow')}
               </span>
             </div>
             <h1 className="text-2xl font-bold mb-2 tracking-tight">
-              {APP_INFO.shortName} SEO 架構
+              {t('supportPages.seoTech.title', { appName: APP_INFO.shortName })}
             </h1>
             <p className="text-sm text-[rgb(var(--color-text-muted))] leading-relaxed max-w-prose">
-              完整揭露 {APP_INFO.shortName} 所採用的所有搜尋引擎最佳化技術、資料架構與自動化流程。
-              所有數字均從設定檔即時計算，永遠與實際部署狀態同步。
+              {t('supportPages.seoTech.subtitle', { appName: APP_INFO.shortName })}
             </p>
           </motion.div>
 
diff --git a/apps/ratewise/src/pages/Settings.tsx b/apps/ratewise/src/pages/Settings.tsx
index 429ed88d7..ab746ae4d 100644
--- a/apps/ratewise/src/pages/Settings.tsx
+++ b/apps/ratewise/src/pages/Settings.tsx
@@ -45,7 +45,12 @@ import { SEOHelmet } from '../components/SEOHelmet';
 import { motion } from 'motion/react';
 import { useAppTheme } from '../hooks/useAppTheme';
 import { STYLE_OPTIONS } from '../config/themes';
-import { LANGUAGE_OPTIONS, getResolvedLanguage, type SupportedLanguage } from '../i18n';
+import {
+  LANGUAGE_OPTIONS,
+  getResolvedLanguage,
+  persistLanguagePreference,
+  type SupportedLanguage,
+} from '../i18n';
 import { getDisplayVersion } from '../config/version';
 import { transitions, segmentedSwitch } from '../config/animations';
 import { APP_INFO } from '../config/app-info';
@@ -115,6 +120,7 @@ export default function Settings() {
   const currentLanguage = getResolvedLanguage();
 
   const handleLanguageChange = (lang: SupportedLanguage) => {
+    persistLanguagePreference(lang);
     void i18n.changeLanguage(lang);
   };
 
diff --git a/apps/ratewise/src/utils/__tests__/timeFormatter.test.ts b/apps/ratewise/src/utils/__tests__/timeFormatter.test.ts
index 5fbe1f915..58e85cb6f 100644
--- a/apps/ratewise/src/utils/__tests__/timeFormatter.test.ts
+++ b/apps/ratewise/src/utils/__tests__/timeFormatter.test.ts
@@ -1,5 +1,10 @@
 import { describe, it, expect } from 'vitest';
-import { formatIsoTimestamp, formatGenericTimeString, formatDisplayTime } from '../timeFormatter';
+import {
+  formatIsoTimestamp,
+  formatGenericTimeString,
+  formatDisplayTime,
+  formatLocalizedDate,
+} from '../timeFormatter';
 
 describe('formatIsoTimestamp', () => {
   it('should format valid ISO timestamp correctly', () => {
@@ -65,6 +70,26 @@ describe('formatGenericTimeString', () => {
   });
 });
 
+describe('formatLocalizedDate', () => {
+  it('formats public support dates with the requested locale', () => {
+    const result = formatLocalizedDate('2026-05-17T00:00:00+08:00', 'en');
+    expect(result).toContain('2026');
+    expect(result).toMatch(/May|5/);
+    expect(result).toContain('17');
+  });
+
+  it('falls back safely when locale is invalid', () => {
+    const result = formatLocalizedDate('2026-05-17T00:00:00+08:00', 'not-a-locale');
+    expect(result).toContain('2026');
+    expect(result).toMatch(/May|5/);
+    expect(result).toContain('17');
+  });
+
+  it('returns empty string for invalid dates', () => {
+    expect(formatLocalizedDate('not-a-date', 'zh-TW')).toBe('');
+  });
+});
+
 describe('formatDisplayTime', () => {
   it('should format both source and refresh times', () => {
     const result = formatDisplayTime('2025-10-31 03:30:00', '2025-10-31T03:35:00+08:00');
diff --git a/apps/ratewise/src/utils/timeFormatter.ts b/apps/ratewise/src/utils/timeFormatter.ts
index f54eccfd9..a0b8f3c95 100644
--- a/apps/ratewise/src/utils/timeFormatter.ts
+++ b/apps/ratewise/src/utils/timeFormatter.ts
@@ -47,6 +47,34 @@ export function formatIsoTimestamp(iso: string): string {
   return `${month}/${day} ${hour}:${minute}`;
 }
 
+/**
+ * 依使用者語系格式化公開支援頁的更新日期。
+ *
+ * @param dateInput - 可被 Date 解析的日期輸入
+ * @param locale - i18next resolvedLanguage / language
+ * @returns 語系化日期；無效日期回傳空字串
+ */
+export function formatLocalizedDate(dateInput: string | number | Date, locale = 'zh-TW'): string {
+  const date = new Date(dateInput);
+
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  const options: Intl.DateTimeFormatOptions = {
+    timeZone: 'Asia/Taipei',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  };
+
+  try {
+    return new Intl.DateTimeFormat(locale, options).format(date);
+  } catch {
+    return new Intl.DateTimeFormat('zh-TW', options).format(date);
+  }
+}
+
 /**
  * 格式化通用時間字串（支援多種格式）
  *
diff --git a/docs/dev/002_development_reward_penalty_log.md b/docs/dev/002_development_reward_penalty_log.md
index 25b9d2d6e..c168fcad8 100644
--- a/docs/dev/002_development_reward_penalty_log.md
+++ b/docs/dev/002_development_reward_penalty_log.md
@@ -2,7 +2,7 @@
 
 > 版本：outline-v2-ultra
 > 原則：每筆只保留日期、ID、原因、解法。
-> 本次分數變化：+1（reward 1）｜累計總分：+57
+> 本次分數變化：+1（reward 1）｜累計總分：+59
 
 ## 新增模板（4 行）
 
@@ -13,6 +13,16 @@
 
 ## 條目（新→舊）
 
+- 日期：2026-05-17
+- ID：reward-ratewise-popular-currency-link-ssot
+- 原因：首頁熱門幣別、footer 熱門匯率與攻略頁相關幣別各自維護清單，首頁熱門區 aria-labelledby 也指向 app shell heading
+- 解法：新增 popular-currency-links SSOT 並由首頁、footer、攻略頁與 ItemList JSON-LD 共用，同步修正 aria-labelledby、SeoTech schema registry 與 footer 去重測試
+
+- 日期：2026-05-17
+- ID：reward-ratewise-support-copy-i18n-shell
+- 原因：支援與資訊頁首屏文案仍分散在 JSX，SSG 又會在 Node navigator 下輸出英文 i18n，設定入口描述也保留偏工程與 AI 治理口吻
+- 解法：新增 supportPages 四語系文案命名空間，將 FAQ、Guide、About、Privacy、OpenData、SeoTech 首屏與更新標籤改由 i18n 取得，並讓無 DOM 的 SSG 鎖定 zh-TW 初始語系
+
 - 日期：2026-05-17
 - ID：reward-pr404-support-nav-path-normalization
 - 原因：PR404 review 指出支援資訊頁若以 `/faq`、`/seo-tech` 等無 trailing slash route 進入，PageNavHeader 會因 exact match 找不到支援導覽與 active pill