html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* 畫面文件 §9.2 UX-17：可點按的操作至少 44 像素高（後台查詢頁的查詢與清除按鈕用這個，不縮成 btn-sm） */
.btn-touch {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 後台的可點目標一律至少 44 像素高（畫面文件 §9.8 VA-AC-07、§9.6 設計系統；審查 T-47／T-48／T-49-r1 R1）。
   先前只有主要按鈕與分頁做到，表單、文字連結與導覽都還留在預設高度——量到的是 27.375px（表單）、
   18px（清單與麵包屑連結）、35px（導覽與登出）。規則收斂在 .admin-shell（後台版型的 body）底下：
   這三件都是後台畫面；前台與會員區有自己已驗收的任務，不在這次範圍內動它。 */
.admin-shell .form-control,
.admin-shell .form-select {
  min-height: 44px;
}

.admin-shell .form-check {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 核取方塊本體放大到 24 像素（WCAG 2.5.8 的最小目標）；44 像素的有效觸控範圍由整列標籤提供，
   審查用語是「核取方塊含標籤的有效觸控範圍」，不是把方塊本身畫成 44 像素的大方格。 */
.admin-shell .form-check-input {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
}

/* 有效觸控範圍是整列標籤，不是只有那顆方塊 */
.admin-shell .form-check-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 內容區的文字連結（清單列、麵包屑）：撐到 44px，但保持行內排版 */
.admin-shell main a:not(.btn):not(.page-link) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 導覽列、下拉項目與登出。登入信箱那一格不是連結，排除在外——
   它要維持可換行才不會在放大文字時撐寬整頁（審查 T-46-r1 R3）。 */
.admin-shell .navbar .navbar-brand,
.admin-shell .navbar .nav-link:not(.admin-identity),
.admin-shell .navbar .btn,
.admin-shell .dropdown-item {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 分頁的上一頁／下一頁是可點的操作，要達到最小點按高度（畫面文件 UX-17；審查 T-46-r1 R2）。
   規則放在共用樣式，三個有分頁的畫面（UI-B24、UI-B09、UI-P02）一起適用，不各寫一份。 */
.pagination .page-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 後台頁首的登入信箱：窄版或文字放大時要換行，不能把整頁撐寬（審查 T-46-r1 R3）。
   信箱是連續字元，沒有斷點可換，所以要允許在任意處斷行並讓彈性項目可以縮。 */
.admin-identity {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ────────────────────────────────────────────────────────────────────────────
   窄版資料表改成「有欄位名稱的垂直資料列」

   依據：畫面文件 §9.2 UX-17（資料比較表格可局部捲動，但主要動作、必要識別及送出
   不能靠橫移尋找）、§9.7「List／Grid」（手機改有明確欄位名稱的垂直資料列，保留身份、
   狀態及下一步，不需橫向拖表找操作）、§9.7.3 IA-AC-06、§9.8 VA-AC-07。
   起因是審查 T-52-r1 的 R1：390 像素下 UI-B12 的「確認收款並啟動授權／拒絕／退回」
   與 UI-B14 的「補寄入口／輪替入口」整個落在視窗外，因為它們是寬表格的最後一欄。

   規則只有這一份，全站資料表共用：表格掛 .table-stack，每一格帶 data-label。
   桌機寬度完全不變，仍是可橫向捲動的表格（.table-responsive），資料比較不被犧牲。
   不用 overflow-x: hidden——那是把控制項裁掉，不是讓人操作得到。

   斷點取 992 像素（Bootstrap 的 lg）而不是 768：畫面文件 §9.7.3 IA-AC-06 把 320、390、768
   三個寬度歸在「手機每列保留標籤與操作」這一句底下，桌機才是另一組。768 像素下寬表格雖然
   有 .table-responsive 可以局部捲動、整頁不溢出，最後一欄的客服動作與覆核按鈕仍然在視窗外，
   一樣是 UX-17 講的「主要動作靠橫移尋找」。
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .table-stack,
  .table-stack > tbody,
  .table-stack > tbody > tr,
  .table-stack > tbody > tr > td,
  .table-stack > tbody > tr > th {
    display: block;
    width: auto;
  }

  /* 欄名改由每一格自己的 data-label 呈現，表頭不再占一列。
     不是「隱藏後就沒有替代」：下面的 ::before 會把同一個欄名放回每一格前面。 */
  .table-stack > thead {
    display: none;
  }

  .table-stack > tbody > tr {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 2px; /* §9.6 UX-ARCHIVE-03：主要容器圓角 2～4 像素 */
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
  }

  .table-stack > tbody > tr > td,
  .table-stack > tbody > tr > th {
    border: 0;
    padding: 0.25rem 0;
    /* 長字串（信箱、參考號、識別碼）在窄版要斷得下來，否則整頁還是被撐寬 */
    overflow-wrap: anywhere;
  }

  /* 金額欄在桌機靠右（.text-end）；垂直資料列裡靠右會跟欄名分家，改回靠左。
     Bootstrap 的 .text-end 帶 !important，這裡只能同樣用 !important 蓋回來。 */
  .table-stack > tbody > tr > td.text-end {
    text-align: start !important;
  }

  .table-stack > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--bs-secondary-color, #6c757d);
  }

  /* 空清單那一列用 colspan 橫跨整張表，沒有欄名可標，維持置中的原樣 */
  .table-stack > tbody > tr > td[colspan] {
    padding: 0.5rem 0;
  }

  /* 窄版一律允許橫排的東西換行往下排：一格裡的多個操作（補寄／輪替、核准／拒絕／退回）、
     案件金額摘要、通知列右側的「標記已讀」。UX-17 要求長文字與表單在窄版可重排；
     擠成一列再溢出去等於把操作推到視窗外。桌機寬度不套這條，版面維持原樣。 */
  main .d-flex {
    flex-wrap: wrap;
  }
}

/* 表格以外的溢出來源：通知內文、信箱、參考號、識別碼這類沒有斷點的長字串。
   會員通知的內文帶授權頁入口網址，390 像素下把整頁撐到 429 像素（審查 T-52-r1）。 */
main {
  overflow-wrap: break-word;
}

/* 彈性排版的子項預設不能縮到內容寬度以下，長字串就會頂出容器；
   同時讓摘要列在窄版換行（查帳案件的應付／已確認／尚欠摘要）。 */
main .d-flex > * {
  min-width: 0;
}

/* 頁首導覽：窄版與中等寬度要能換行。Bootstrap 的 navbar-expand-sm 在 576 像素以上把導覽排成
   不換行的一列，前台與會員區有六個入口加登入信箱，768 像素下整列 928 像素、把整頁撐寬。
   §9.7「選單可操作性」要求 320 像素無橫向溢出；這裡讓導覽自己換行，不動入口的數量與順序。 */
.navbar > .container {
  flex-wrap: wrap;
}

.navbar-nav {
  flex-wrap: wrap;
  min-width: 0;
}

.navbar-brand {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 導覽列的可點目標一律至少 44 像素高（畫面文件 §9.8 VA-AC-07）。
   後台早先由 .admin-shell 那一組規則處理過（審查 T-46／T-47／T-48-r1），前台與會員區在這裡補齊：
   量到的是 35～40 像素，差的就是這幾像素。只加高度，不動入口的數量、順序與換行行為。
   選擇器寫 a.nav-link 而不是 .nav-link，是為了避開登入信箱那一格——它是 span、不是可點目標，
   而且要維持可換行才不會在文字放大時撐寬整頁（審查 T-46-r1 R3）。 */
.navbar a.nav-link,
.navbar .navbar-brand,
.navbar .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 導覽列上的登入者識別（前台與會員區的信箱）：連續字元沒有天然斷點，窄版或文字放大時會把整頁撐寬。
   後台版型早先已用 .admin-identity 處理過同一件事（審查 T-46-r1 R3），這裡把同一條規則放到所有導覽列連結上。 */
.navbar .nav-link {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* 狀態代碼（PENDING_SECOND_APPROVAL 這類）用小標籤呈現，是一整串沒有斷點的字元，
   而 Bootstrap 的 .badge 本身寫死 white-space: nowrap——文字放大 200% 時它就把整頁撐寬。
   這裡准它換行並可在任意處斷字；狀態代碼是給人看的資訊，斷成兩行仍讀得出來。 */
.badge {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ────────────────────────────────────────────────────────────────────────────
   史料縮圖組（畫面文件 §9.11.3）。訂單、下載、編目共用這一份，不按頁重建。

   桌機：一項一圖、兩項兩圖、三項三圖，超過三項最多三圖再加「+N」。
   手機（與 .table-stack 同斷點 992 像素）：只留首張與「共 N 項史料」——
   不是把資料藏起來，而是把「有幾項」換成一句話講完，省下的寬度留給狀態與下一步。

   48 像素取自 §9.11.3 建議的 44～56 區間。縮圖固定比例、低圓角、無大陰影，
   且不因原圖尺寸拉高資料列；標題長或字級放大時由文字那一側自然增高，不硬裁。
   這些是呈現規格，不是商業政策，所以不進 DemoPolicy（§9.11.3 末段）。
   ──────────────────────────────────────────────────────────────────────────── */
.thumb-cluster {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.thumb-cluster .thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: cover; /* 固定比例，長圖短圖都不會把資料列撐高 */
  border-radius: 2px; /* §9.6 UX-ARCHIVE-03：主要容器圓角 2～4 像素 */
  background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* 缺圖：明示「暫無縮圖」，不改拿別筆史料的圖頂替（§9.11.3） */
.thumb-cluster .thumb-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--bs-border-color, #dee2e6);
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.6875rem;
  line-height: 1.1;
  text-align: center;
  padding: 0.125rem;
}

.thumb-cluster .thumb-more {
  flex: 0 0 auto;
  color: var(--bs-secondary-color, #6c757d);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* 「共 N 項史料」預設不出現；桌機看得到縮圖本身就知道有幾項 */
.thumb-cluster .thumb-count {
  display: none;
}

@media (max-width: 991.98px) {
  /* 手機只留首張。第二張之後與「+N」都收起來，改用一句「共 N 項史料」交代總數 */
  .thumb-cluster .thumb:not(:first-of-type),
  .thumb-cluster .thumb-more {
    display: none;
  }

  .thumb-cluster .thumb-count {
    display: inline;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8125rem;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   我的訂單的二級導航（畫面文件 §9.11.1）。
   看起來像頁籤，骨子裡是兩個真實連結：所以鍵盤用 Tab／Enter 就能切換，
   直接輸入網址、重新整理與瀏覽器前後頁都正常，不需要方向鍵那套 tablist 互動。
   目前位置只用 aria-current="page" 標示，樣式跟著它走，不另外掛 class。
   ──────────────────────────────────────────────────────────────────────────── */
.orders-nav {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.orders-nav a {
  padding: 0.5rem 0.25rem;
  text-decoration: none;
  color: var(--bs-secondary-color, #6c757d);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-height: 44px; /* §9.8 VA-AC-07：觸控目標至少 44 像素 */
  display: inline-flex;
  align-items: center;
}

.orders-nav a[aria-current="page"] {
  color: inherit;
  font-weight: 600;
  border-bottom-color: currentColor;
}

/* ════════════════════════════════════════════════════════════════════════════
   公開典藏(Archive Discovery) Mode：UI-P01～P06 與結帳(UI-M02)的視覺語氣

   依據：畫面文件 §9.8.1 三種 Mode 的第一列（公開典藏）、§9.8.2 設計系統與 Header、
   §9.6 UX-ARCHIVE-01～03（深藍／米白、標題階級、分隔線、留白、圓角 2～4 像素、
   內容區無陰影、減少卡片與彩色狀態盒、館名與史料名稱可用 Serif）、§9.9 首頁四區、
   §9.10 結果卡與圖片密度。

   範圍限制：語氣規則一律掛在 .public-shell（前台版型的 body）或本節新增的專用 class 底下。
   會員區與後台各有已驗收的畫面與證據，套版分別屬 UIUX-09（已合併）與 UIUX-11，
   本輪不動它們的既有樣式；唯一的例外是結帳，它是 UI-M02 的後半、屬本輪範圍，
   用 .checkout-flow 這個專用 class 圈住，不影響會員區其他頁。
   ════════════════════════════════════════════════════════════════════════════ */

/* 設計代幣。三區共用同一組色與字體尺度（§9.8.2「不用每頁臨時覆蓋」），
   目前只有公開區與結帳頁引用；UIUX-11 套後台時沿用同一份，不另立第二套色票。 */
:root {
  --ec-navy: #16365c;          /* 深藍：品牌、主要按鈕、服務帶 */
  --ec-navy-dark: #0f2742;     /* 深藍加深：hover 與服務帶底 */
  --ec-paper: #f7f4ed;         /* 米白／紙白：頁面底 */
  --ec-surface: #ffffff;       /* 內容區底 */
  --ec-gold: #8a6b3d;          /* 少量暗金：次要強調、分隔飾線 */
  --ec-ink: #1f2933;           /* 主文字 */
  --ec-ink-soft: #57616e;      /* 次要文字（與 --ec-surface 對比 5.6:1） */
  --ec-rule: #d9d2c4;          /* 分隔線 */
  --ec-radius: 2px;            /* §9.6 UX-ARCHIVE-03：主要容器與按鈕圓角 2～4 像素 */
  --ec-serif: "Noto Serif TC", "Source Han Serif TC", "MingLiU", "PMingLiU", Georgia, serif;
}

.public-shell {
  background-color: var(--ec-paper);
  color: var(--ec-ink);
}

/* 館名與史料名稱用 Serif，一般 UI（表單、按鈕、狀態、表格）維持 Sans（§9.6 UX-ARCHIVE-03、§9.8.2）。
   套用方式是明示的 class，不是「公開區所有標題都變 Serif」——搜尋、授權清單這類工作用標題仍是 Sans。 */
.archive-name {
  font-family: var(--ec-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* 頁首：白底、深藍字、底部一條深藍線。強調機構識別與服務，不用大色塊（§9.8.2 Header／選單）。 */
.public-shell > header {
  background-color: var(--ec-surface);
  border-bottom: 2px solid var(--ec-navy) !important;
  margin-bottom: 0 !important;
}

.public-shell > header .navbar {
  background-color: transparent !important;
}

.public-shell .navbar-brand {
  font-family: var(--ec-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ec-navy);
}

/* 導覽連結：44 像素觸控高度（§9.8 VA-AC-07），目前位置用底線標示，不只靠顏色（§9.2 UX-17）。 */
.public-shell .navbar .nav-link {
  color: var(--ec-ink);
  border-bottom: 2px solid transparent;
}

.public-shell .navbar .nav-link:hover,
.public-shell .navbar .nav-link:focus {
  color: var(--ec-navy);
}

.public-shell .navbar .nav-link[aria-current="page"] {
  color: var(--ec-navy);
  font-weight: 600;
  border-bottom-color: var(--ec-gold);
}

/* 主要按鈕：深藍實心；次要一律描邊。查看、返回、移除、清空都用次要樣式（§9.5 UX-RULE-02）。
   Bootstrap 5.3 的按鈕吃 --bs-btn-* 變數，所以這裡只換變數，不重寫按鈕結構。 */
.public-shell .btn-primary,
.checkout-flow .btn-primary {
  --bs-btn-bg: var(--ec-navy);
  --bs-btn-border-color: var(--ec-navy);
  --bs-btn-hover-bg: var(--ec-navy-dark);
  --bs-btn-hover-border-color: var(--ec-navy-dark);
  --bs-btn-active-bg: var(--ec-navy-dark);
  --bs-btn-active-border-color: var(--ec-navy-dark);
  --bs-btn-disabled-bg: var(--ec-navy);
  --bs-btn-disabled-border-color: var(--ec-navy);
}

.public-shell .btn-outline-secondary,
.checkout-flow .btn-outline-secondary {
  --bs-btn-color: var(--ec-navy);
  --bs-btn-border-color: var(--ec-rule);
  --bs-btn-hover-bg: var(--ec-navy);
  --bs-btn-hover-border-color: var(--ec-navy);
  --bs-btn-active-bg: var(--ec-navy);
  --bs-btn-active-border-color: var(--ec-navy);
}

/* 前台與結帳的可點目標一律至少 44 像素高（§9.8 VA-AC-07）。
   後台已由 .admin-shell 那一組規則處理過同一件事，這裡是前台這一側。 */
.public-shell .btn,
.checkout-flow .btn,
.public-shell .form-control,
.public-shell .form-select {
  min-height: 44px;
  border-radius: var(--ec-radius);
}

.public-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 連結色只給真正的文字連結。按鈕也是 <a>，但它的文字色由 Bootstrap 的 --bs-btn-color 決定；
   這條規則若把 .btn 一起吃掉，深藍實心按鈕就會變成深藍底配深藍字，整顆按鈕看不到字。 */
.public-shell a:not(.btn) {
  color: var(--ec-navy);
}

.public-shell main {
  background-color: transparent;
}

/* 內容區塊之間用留白與細線分段，不用卡片與陰影（§9.6 UX-ARCHIVE-03）。 */
.archive-section {
  padding: 2rem 0;
  border-top: 1px solid var(--ec-rule);
}

.archive-section:first-of-type {
  border-top: 0;
}

.archive-section > h2 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.archive-section-note {
  color: var(--ec-ink-soft);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

/* ────────────────────────────────────────────────────────────────────────────
   結果格（§9.10「圖片密度」）：桌機四欄、平板三欄、手機兩欄、極窄手機一欄。
   同一份 DOM、只換欄數，沒有水平溢出；1366 的第一屏要看得到完整第一排四張圖。
   ──────────────────────────────────────────────────────────────────────────── */
.archive-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr); /* 320 像素：一欄，長標題留得住 */
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

@media (min-width: 360px) {
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .archive-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 結果卡：影像 → 名稱 → 年代與類型 → 最相關的一個欄位 → 典藏號 → 低權重起價（§9.10「結果卡」）。
   整張卡是連結（.stretched-link 掛在標題上），所以不再重複一顆「查看史料」。 */
/* 圓角靠影像自己的 border-radius 做，不用 overflow: hidden 裁切：
   T-53 定下的規則是「不准用裁切代替換行」，共用樣式裡不留這個宣告（tests/…/NarrowLayoutConventionTests）。 */
.archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--ec-surface);
  border: 1px solid var(--ec-rule);
  border-radius: var(--ec-radius);
}

.archive-card:hover,
.archive-card:focus-within {
  border-color: var(--ec-navy);
}

.archive-card .archive-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: #ece7dc;
  border-radius: var(--ec-radius) var(--ec-radius) 0 0;
}

/* 缺圖：明示「尚無公開縮圖」，不改拿別筆史料的圖頂替（§9.11.3） */
.archive-card .archive-thumb-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background-color: #ece7dc;
  color: var(--ec-ink-soft);
  font-size: 0.8125rem;
  border-radius: var(--ec-radius) var(--ec-radius) 0 0;
}

.archive-card-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.archive-card-title {
  font-family: var(--ec-serif);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.archive-card-title a {
  text-decoration: none;
  color: var(--ec-ink);
}

.archive-card-title a:hover,
.archive-card-title a:focus {
  text-decoration: underline;
  color: var(--ec-navy);
}

.archive-card-meta {
  font-size: 0.8125rem;
  color: var(--ec-ink-soft);
  margin: 0;
}

/* 起價權重最低：比詮釋資料小、顏色更淡（§9.8.2「價格降為次要文字」、VA-AC-03） */
.archive-card-price {
  font-size: 0.75rem;
  color: var(--ec-ink-soft);
  margin: 0;
}

/* 卡片上的次要連結（看整份文件）要壓在整卡連結之上才點得到 */
.archive-card-link {
  position: relative;
  z-index: 2;
  font-size: 0.8125rem;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ────────────────────────────────────────────────────────────────────────────
   首頁四區（UI-P01，§9.9.1）：01 搜尋館藏、02 探索館藏、03 精選館藏、04 授權使用。
   §9.9.2：Hero 層級最高，探索其次，精選再次，服務帶最精簡；四區保留間距，
   不把每區做成同樣大的卡片或標題；同一 Viewport 盡量只有一種主要決策。
   ──────────────────────────────────────────────────────────────────────────── */

/* 01 搜尋館藏。桌機約 55／45 的文字搜尋與代表史料構圖（§9.8.2 首頁 P0）；
   手機依 §9.9.2 第 1 列順序垂直排列，代表史料仍看得見。 */
.home-hero {
  padding: 2rem 0 2.5rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  .home-hero {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    gap: 2.5rem;
  }
}

.home-institution {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ec-gold);
  margin-bottom: 0.5rem;
}

.home-hero h1 {
  font-family: var(--ec-serif);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--ec-navy);
  margin-bottom: 0.5rem;
}

.home-hero-lead {
  color: var(--ec-ink-soft);
  margin-bottom: 1.25rem;
}

/* 首頁主體唯一的實心主要按鈕就是「搜尋」（§9.9.1 第 01 列、HOME-AC-02） */
.home-search {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.home-search input[type="search"] {
  flex: 1 1 12rem;
  min-width: 0;
}

/* 搜尋線索：合併到搜尋框下方的一行，可自然換行，低權重文字連結（§9.9.1 第 01 列） */
.home-hints {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ec-ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.home-hints a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 次要導引只有這一條，按 Enter 捲到探索標題並交付焦點（§9.9.1、HOME-AC-03～04） */
.home-jump {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

/* 代表史料：只輔助定位，不是第二個分流連結（§9.9.1 第 01 列） */
.home-representative figure {
  margin: 0;
}

.home-representative img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ec-rule);
  border-radius: var(--ec-radius);
}

.home-representative figcaption {
  font-size: 0.8125rem;
  color: var(--ec-ink-soft);
  margin-top: 0.5rem;
}

/* 02 探索館藏：文字導覽的高階方向，不展開完整清單（§9.9.1 第 02 列、§9.10「首頁方向」） */
.home-directions {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .home-directions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.home-direction h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.home-direction p {
  font-size: 0.875rem;
  color: var(--ec-ink-soft);
  margin-bottom: 0.5rem;
}

.home-direction ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.home-direction ul a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
}

/* 03 精選館藏：一大兩小的選輯版位，與探索區明顯不同，不做等大商品卡（§9.9.1 第 03 列、§9.10「首頁精選」） */
.home-featured {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .home-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-featured > :first-child {
    grid-row: span 2;
  }
}

.home-featured-item {
  position: relative;
  background-color: var(--ec-surface);
  border: 1px solid var(--ec-rule);
  border-radius: var(--ec-radius);
  display: flex;
  flex-direction: column;
}

.home-featured-item img,
.home-featured-item .archive-thumb-missing {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ec-radius) var(--ec-radius) 0 0;
}

/* 一大兩小：左邊那件跨兩列，影像跟著撐滿整欄高度。
   如果讓它維持固定比例，右邊兩件疊起來會比它高，左欄下方就空一大塊。 */
@media (min-width: 768px) {
  .home-featured > :first-child img,
  .home-featured > :first-child .archive-thumb-missing {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 12rem;
  }
}

.home-featured-body {
  padding: 0.75rem;
}

.home-featured-body h3 {
  font-family: var(--ec-serif);
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.home-featured-body h3 a {
  text-decoration: none;
  color: var(--ec-ink);
}

.home-featured-body h3 a:hover,
.home-featured-body h3 a:focus {
  text-decoration: underline;
  color: var(--ec-navy);
}

.home-featured-body p {
  font-size: 0.8125rem;
  color: var(--ec-ink-soft);
  margin-bottom: 0;
}

/* 04 授權使用：底部精簡服務帶，桌機深藍；層級低於典藏內容（§9.9.1 第 04 列） */
.home-service {
  background-color: var(--ec-navy);
  color: #f2efe8;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

.home-service h2 {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 0.75rem;
}

.home-service ol {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0.75rem;
  padding-left: 1.25rem;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .home-service ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.home-service a {
  color: #ffffff;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 版位與內容為示意的明示標記（§9.9.1 第 03 列、§9.10「首頁精選」）：
   文字標示，不用彩色狀態盒。 */
.demo-note {
  font-size: 0.8125rem;
  color: var(--ec-ink-soft);
  border-left: 3px solid var(--ec-gold);
  padding-left: 0.75rem;
  margin: 0.75rem 0 0;
}

/* ────────────────────────────────────────────────────────────────────────────
   史料閱讀（UI-P04／P05／P06）與查詢條件列（UI-P03）

   §9.6 UI-P04 那一列的順序：史料身份 → 大型影像 → 摘要及脈絡 → 授權使用方式 →
   檔案規格 → 價格 → 加入授權清單 → 詳細資料／條款。所有尺寸都垂直，
   不用 CSS order 置換 DOM，價格不與影像並列搶第一視覺（§9.8.2 VA-AC-03）。
   ──────────────────────────────────────────────────────────────────────────── */
.archive-detail {
  max-width: 52rem; /* 長行不利閱讀；桌機留白由這個上限產生，不靠側欄填版面 */
}

.archive-detail h1 {
  font-family: var(--ec-serif);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.archive-identity {
  color: var(--ec-ink-soft);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.archive-figure {
  margin: 0 0 1.5rem;
}

.archive-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ec-rule);
  border-radius: var(--ec-radius);
  background-color: var(--ec-surface);
}

.archive-figure figcaption {
  font-size: 0.8125rem;
  color: var(--ec-ink-soft);
  margin-top: 0.5rem;
}

/* 摘要與脈絡：欄位名稱／值可緊湊並列，但區段與 Tab 順序仍垂直（§9.8.2 搜尋／詳情 P0） */
.archive-facts {
  margin: 0 0 1.5rem;
}

.archive-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--ec-rule);
}

@media (min-width: 576px) {
  .archive-facts > div { grid-template-columns: 7rem minmax(0, 1fr); }
}

.archive-facts dt {
  color: var(--ec-ink-soft);
  font-weight: 400;
  font-size: 0.875rem;
}

.archive-facts dd {
  margin-bottom: 0;
}

/* 授權使用方式一段一個平台：授權使用方式 → 檔案規格 → 價格 → 加入授權清單，一律垂直（§9.6 UI-P04） */
.offer-platform {
  border: 1px solid var(--ec-rule);
  border-radius: var(--ec-radius);
  background-color: var(--ec-surface);
  padding: 1rem;
  margin-bottom: 1rem;
}

.offer-platform > h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.75rem;
}

.offer-option {
  border-top: 1px solid var(--ec-rule);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.offer-platform .offer-option:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.offer-option h4 {
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}

.offer-spec {
  font-size: 0.875rem;
  color: var(--ec-ink-soft);
  margin-bottom: 0.5rem;
}

.offer-price {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* 詳細資料與條款預設收合，放在主要操作之後（§9.6 UI-P04 那一列末段） */
.archive-details {
  border-top: 1px solid var(--ec-rule);
  padding-top: 0.75rem;
  margin-top: 1.5rem;
}

.archive-details summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

/* 查詢條件列（UI-P03，§9.10「查詢條件」）：第一層條件橫排、可換行；
   已選條件可見且可個別移除；沒有 Blog 式側欄（§9.6 UX-AC-I01）。 */
.filter-bar {
  background-color: var(--ec-surface);
  border: 1px solid var(--ec-rule);
  border-radius: var(--ec-radius);
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.filter-row label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ec-ink-soft);
}

.filter-field {
  flex: 1 1 12rem;
  min-width: 0;
}

.selected-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.selected-filters .selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--ec-rule);
  border-radius: var(--ec-radius);
  padding: 0 0.5rem;
  min-height: 44px;
  background-color: var(--ec-paper);
  text-decoration: none;
}

.selected-filters .selected-chip:hover,
.selected-filters .selected-chip:focus {
  border-color: var(--ec-navy);
}

/* 文章內文（UI-P06）：Serif 標題、限制行長，正文整段呈現、不做段落錨點（計畫 §1.4） */
.article-body {
  max-width: 40rem;
  line-height: 1.9;
}

/* ────────────────────────────────────────────────────────────────────────────
   授權清單與結帳（UI-M02，§9.6「UI-M02、M06、B04」那一列：內容 → 付款安排 → 條款及確認）
   §9.8.2 會員／上傳 P1：結帳精簡區段密度，保留快照、價格、條款與單一主要提交。
   ──────────────────────────────────────────────────────────────────────────── */
.checkout-flow {
  max-width: 52rem;
}

.checkout-step {
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.checkout-step:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0.5rem;
}

.checkout-step > h2 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.checkout-step-note {
  font-size: 0.875rem;
  color: var(--ec-ink-soft);
  margin-bottom: 1rem;
}

/* 一筆匯款＝一個付款群組（§9.5 UX-RULE-06 用白話「第幾筆匯款」，識別碼留明細）。
   用細線分段，不用彩色卡片與陰影（§9.6 UX-ARCHIVE-03）。 */
.payment-group {
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--ec-radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
}

.payment-group > h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.payment-group-facts {
  font-size: 0.875rem;
  color: var(--ec-ink-soft);
  margin-bottom: 0.75rem;
}

.payment-group-amount {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ec-ink);
}

/* 清單、資料列、篩選面板與麵包屑裡的文字連結撐到 44 像素（畫面文件 §9.8 VA-AC-07）。
   後台早先用 .admin-shell main a 一次涵蓋（審查 T-47～T-49-r1），前台這裡逐類指定：
   段落中與其他文字混排的行內連結不套用——WCAG 2.5.8 對行內連結有例外，硬把它撐成 44 像素
   會把「本件屬於文件群組 ○○○」這種句子拆得七零八落。結果卡的標題也不在這裡：
   它掛 .stretched-link，實際可點範圍是整張卡（高度遠超過 44 像素），撐高文字反而讓標題與資料分家。 */
.public-shell main .table-stack td a:not(.btn),
.public-shell .filter-field ul a,
.public-shell .archive-detail > nav a,
.public-shell .home-jump a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}