/*
 * 2026-10-02（issue 176，第二階段「採購與下載」頁群）：政府採購頁、共同供應契約詳情、資料下載總覽與下載文件頁。
 * 這四種頁面資料密度高，設計重點是易讀與掃讀：表頭固定、第一欄固定、篩選膠囊即時過濾、結果筆數用大字計數、
 * 採購步驟做成會隨捲動畫出來的時間軸、下載文件卡用六種文件類型各自的圖示語彙。
 * 排在 inner.css 之後；所有規則收在 #main.inner-main 之下並多帶一層類別，用優先權蓋過 inner.css，不改動共用檔案。
 * 不出現色碼，只引用 design-tokens.css 的變數。動態：靜態樣式永遠有效；循環與位移只在
 * prefers-reduced-motion: no-preference 且 html:not([data-motion="off"]) 之內。
 */
#main.inner-main {
  /* ---------- 結果筆數：大字計數 ---------- */
  .result-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .875rem; margin: 0 0 1.25rem; color: var(--muted); font-size: .9375rem; font-weight: 700; letter-spacing: .02em; }
  .result-count .rc-n { min-width: 2ch; color: var(--ink); font-family: "Inter Tight", var(--font-body); font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  .result-count .rc-n::after { content: ""; display: block; width: 100%; height: .25rem; margin-top: .5rem; border-radius: .125rem; background: linear-gradient(90deg, var(--cta), var(--soft)); }

  /* ---------- 篩選主控台：淺底圓角面板，膠囊欄位，即時篩選的類型膠囊 ---------- */
  .procurement-directory .directory-filter, .security-tier-recommendations .directory-filter { position: relative; gap: 1.25rem 1rem; margin: 0 0 2rem; padding: clamp(1.25rem, 2.6vw, 2rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-sunken); }
  .procurement-directory .directory-filter label, .security-tier-recommendations .directory-filter label { color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .08em; }
  .procurement-directory .directory-filter :is(input, select), .security-tier-recommendations .directory-filter :is(input, select) { min-height: 3rem; border-color: var(--field-border); font-weight: 600; }
  .procurement-directory .directory-filter button:not([type="button"]), .security-tier-recommendations .directory-filter button:not([type="button"]) { min-height: 3rem; font-weight: 700; transition: background-color .35s var(--ease); }
  .procurement-directory .directory-filter button:not([type="button"]):is(:hover, :focus-visible), .security-tier-recommendations .directory-filter button:not([type="button"]):is(:hover, :focus-visible) { background: var(--action); }
  /* JS 在表單最上方插入膠囊列之前先保留同樣的高度（html.js 在第一次繪製前就已設定），避免插入時把下面的欄位往下推（CLS）。 */
  html.js & .directory-filter:is([data-live-filter], [data-tier-filter]):not(:has(> .chip-row))::before { content: ""; flex: 1 1 100%; order: -1; min-height: 2.75rem; }
  @media (max-width: 40rem) { html.js & .directory-filter:is([data-live-filter], [data-tier-filter]):not(:has(> .chip-row))::before { min-height: 6.125rem; } }
  .directory-filter .chip-row { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .5rem; order: -1; margin: 0; padding: 0; list-style: none; }
  .directory-filter .chip-row button[type="button"] { min-height: 2.75rem; padding-inline: 1.25rem; border-color: var(--line); background: var(--paper); color: var(--ink); font-size: .9375rem; font-weight: 700; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease); }
  .directory-filter .chip-row button[type="button"]:is(:hover, :focus-visible) { border-color: var(--ink); }
  .directory-filter .chip-row button[type="button"][aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .tier-filter .chip-row button[type="button"]:not(:first-child) { width: 3rem; height: 3rem; min-height: 3rem; padding: 0; border-radius: 50%; font-family: "Inter Tight", var(--font-body); font-size: 1.125rem; font-weight: 900; }

  /* ---------- 帳冊表格：固定表頭、固定首欄、列首色條 ---------- */
  /* 固定表頭／首欄／捲動區只屬於桌機表格；手機（窄於 40rem）改卡片（inner.css） */
  @media (min-width: 40.0625rem) {
    .procurement-directory .table-scroll, .security-tier-recommendations .table-scroll, .contract-products-wrap .table-scroll, .vendor-plan .table-scroll { max-height: min(44rem, 82vh); overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--field-border) transparent; }
    .catalog-content :is(.procurement-directory, .security-tier-recommendations, .contract-products-wrap, .vendor-plan, .data-table-block) .data-table thead th { position: sticky; top: 0; z-index: 2; }
    .catalog-content :is(.procurement-directory, .security-tier-recommendations, .contract-products-wrap, .vendor-plan, .data-table-block) .data-table :is(thead th:first-child, tbody th) { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
    .catalog-content :is(.procurement-directory, .security-tier-recommendations, .contract-products-wrap, .vendor-plan, .data-table-block) .data-table thead th:first-child { z-index: 3; box-shadow: none; }
    .catalog-content :is(.procurement-directory, .security-tier-recommendations, .contract-products-wrap, .vendor-plan, .data-table-block) .data-table tbody th { background: var(--paper); }
    .catalog-content :is(.procurement-directory, .security-tier-recommendations, .contract-products-wrap, .vendor-plan, .data-table-block) .data-table tbody tr:nth-child(even) > th { background: var(--surface-sunken); }
    .catalog-content :is(.procurement-directory, .security-tier-recommendations, .contract-products-wrap, .vendor-plan, .data-table-block) .data-table tbody tr:hover > th { background: var(--feature-icon-bg); box-shadow: inset .25rem 0 0 var(--cta), 1px 0 0 var(--line); }
    .catalog-content :is(.procurement-directory, .security-tier-recommendations, .contract-products-wrap, .vendor-plan, .data-table-block) .data-table caption { position: sticky; left: 0; }
  }
  .catalog-content .data-table-block .data-table tbody th { font-size: 1.0625rem; font-weight: 900; }
  .catalog-content .data-table a:is(:hover, :focus-visible) { color: var(--ink); text-decoration-thickness: 2px; }
  .contracts-table tbody th a { white-space: nowrap; font-family: "Inter Tight", var(--font-body); font-size: .9375rem; font-weight: 800; letter-spacing: .02em; }
  @media (min-width: 40.0625rem) { .contracts-table td:nth-child(3) { min-width: 18rem; color: var(--ink); font-weight: 600; } }
  @media (min-width: 40.0625rem) { .contracts-table td:nth-child(5) { white-space: nowrap; } }
  .status-live { display: inline-flex; align-items: center; gap: .5rem; padding: .3125rem .875rem .3125rem .75rem; border-radius: var(--r-pill); background: var(--feature-icon-bg); color: var(--feature-icon-fg); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
  .status-live::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cta); box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta) 55%, transparent); }
  .type-chip { display: inline-flex; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--chip-bg); color: var(--tag-text); font-size: .8125rem; font-weight: 700; white-space: nowrap; }
  .contracts-table .item-count { display: inline-flex; min-width: 3.5rem; justify-content: center; padding: .25rem .75rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: .8125rem; font-weight: 800; text-decoration: none; transition: background-color .3s var(--ease); }
  .contracts-table .item-count:is(:hover, :focus-visible) { background: var(--action); color: var(--paper); }
  .source-link { font-weight: 700; white-space: nowrap; }
  .tier-set { display: inline-flex; flex-wrap: wrap; gap: .3125rem; }
  .tier-badge { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding-inline: .375rem; border-radius: .5rem; background: var(--ink); color: var(--paper); font-family: "Inter Tight", var(--font-body); font-size: .8125rem; font-weight: 800; line-height: 1; }
  .muted-cell { color: var(--muted); font-size: .875rem; }
  .mono { font-family: "Inter Tight", var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

  /* ---------- 參與品牌（issue 208）：Logo 格，連到原廠頁；Logo 以原色呈現，不加任何濾鏡 ---------- */
  .brand-logo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: clamp(.75rem, 1.4vw, 1rem); margin: 0; padding: 0; list-style: none; }
  .brand-logo-list :is(a, .brand-logo-static) { display: grid; place-items: center; min-height: 6.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .3s, box-shadow .5s var(--ease); }
  .brand-logo-list a:is(:hover, :focus-visible) { border-color: var(--action); box-shadow: var(--elevation-raised); }
  .brand-logo-img { display: block; width: auto; max-width: 100%; max-height: 3rem; object-fit: contain; }
  .brand-logo-name { font-size: 1.125rem; font-weight: 800; letter-spacing: -.01em; text-align: center; }

  /* ---------- 採購諮詢（issue 208）：桌機左標題、右聯絡資訊與按鈕；手機單欄 ---------- */
  .procurement-contact-inner { display: grid; gap: 1.25rem 3rem; align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-sunken); }
  .procurement-contact-inner .section-heading { margin: 0; }
  .procurement-contact-office { font-style: normal; color: var(--ink); line-height: 1.75; }
  .procurement-contact-office p { margin: 0; }
  .procurement-contact-office a { color: inherit; text-underline-offset: .2em; }
  .procurement-contact-inner .nav-cta { justify-self: start; }
  @media (min-width: 761px) {
    .procurement-contact-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
    .procurement-contact-inner .section-heading { grid-row: span 2; }
  }

  /* ---------- 採購資格：憑證卡 ---------- */
  .procurement-qualifications .credential-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); margin: 0; padding: 0; list-style: none; }
  .credential-list > li { position: relative; padding: clamp(1.5rem, 2.6vw, 2.25rem); padding-top: clamp(5.5rem, 7vw, 6.25rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); transition: transform .6s var(--ease), border-color .3s, box-shadow .6s var(--ease); }
  .credential-list > li::before { content: ""; position: absolute; top: clamp(1.5rem, 2.6vw, 2.25rem); left: clamp(1.5rem, 2.6vw, 2.25rem); width: 3rem; height: 3rem; border-radius: 50%; background: var(--feature-icon-bg); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--feature-icon-bg) 45%, transparent); transition: background-color .4s var(--ease); }
  .credential-list > li::after { content: ""; position: absolute; top: calc(clamp(1.5rem, 2.6vw, 2.25rem) + .9rem); left: calc(clamp(1.5rem, 2.6vw, 2.25rem) + .85rem); width: 1.25rem; height: .6875rem; border-bottom: 3px solid var(--feature-icon-fg); border-left: 3px solid var(--feature-icon-fg); transform: rotate(-45deg); transition: border-color .4s var(--ease); }
  .credential-list > li:is(:hover, :focus-within) { border-color: var(--action); box-shadow: var(--elevation-raised); }
  .credential-list > li:is(:hover, :focus-within)::before { background: var(--ink); }
  .credential-list > li:is(:hover, :focus-within)::after { border-color: var(--soft); }
  .credential-list h3 { margin: 0 0 .75rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 800; line-height: 1.3; }
  .credential-list p { margin: 0; color: var(--muted); }

  /* ---------- 採購步驟：深色時間軸，左側標題固定、右側脊線隨捲動畫出 ---------- */
  .purchase-steps { position: relative; isolation: isolate; display: grid; gap: clamp(2rem, 5vw, 4rem); margin-block: var(--sec); padding-block: clamp(3.5rem, 7vw, 6rem); color: var(--paper); }
  .purchase-steps::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); border-radius: var(--r-top); background: radial-gradient(60rem 28rem at 12% 0, color-mix(in srgb, var(--cta) 16%, transparent), transparent 70%), var(--deeper); }
  .purchase-steps :is(h2, h3) { color: var(--paper); }
  .purchase-steps .eyebrow { color: var(--soft); }
  .purchase-steps :is(.lead, p:not(.eyebrow)) { color: var(--muted-on-dark); }
  .purchase-steps :focus-visible { outline-color: var(--soft); }
  .purchase-steps .section-heading { margin: 0; }
  .step-line { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; counter-reset: st; --tp: 1; }
  .step-line::before, .step-line::after { content: ""; position: absolute; top: 1.625rem; bottom: 1.625rem; left: 1.5625rem; width: 2px; border-radius: 1px; }
  .step-line::before { background: var(--deep-line); }
  .step-line::after { background: linear-gradient(var(--soft), var(--cta)); transform-origin: top; transform: scaleY(var(--tp)); }
  .step-line > li { position: relative; min-height: 3.25rem; padding: .25rem 0 0 5rem; counter-increment: st; }
  .step-line > li::before { content: counter(st, decimal-leading-zero); position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--cta); color: var(--on-accent); font-family: "Inter Tight", var(--font-body); font-size: 1.0625rem; font-weight: 900; transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .6s var(--ease); box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--cta) 18%, transparent); }
  .step-line > li h3 { margin: 0 0 .75rem; font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.2; letter-spacing: -.01em; }
  .step-line > li p { max-width: 44ch; margin: 0; font-size: 1.0625rem; line-height: 1.8; }
  .step-line.is-tracking > li:not(.is-reached)::before { background: var(--deep); color: var(--soft); box-shadow: inset 0 0 0 2px var(--deep-line); }
  .step-line.is-tracking > li:not(.is-reached) :is(h3, p) { opacity: .55; }
  .step-line.is-tracking > li :is(h3, p) { transition: opacity .6s var(--ease); }
  @media (min-width: 64rem) {
    .purchase-steps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
    .purchase-steps .section-heading { position: sticky; top: 7rem; }
  }

  /* ---------- 官方採購平台：大膠囊外連結 ---------- */
  .procurement-links ul { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
  .procurement-links a { display: inline-flex; align-items: center; gap: 1rem; min-height: 4rem; padding: .75rem .75rem .75rem 1.75rem; border: 0; border-radius: var(--r-pill); background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 0 no-repeat; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); font-size: 1.0625rem; font-weight: 800; text-decoration: none; transition: background-size .6s var(--ease), color .4s var(--ease); }
  .procurement-links a:is(:hover, :focus-visible) { background-size: 100% 100%; color: var(--paper); }
  .procurement-links a::after { content: "↗"; content: "↗" / ""; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 1.125rem; transition: background-color .4s var(--ease), color .4s var(--ease), transform .5s var(--ease); }
  .procurement-links a:is(:hover, :focus-visible)::after { background: var(--cta); color: var(--on-accent); transform: rotate(45deg); }

  /* ---------- 資安責任等級：A–E 階梯膠囊 ---------- */
  .security-tier-notice { margin: 0 0 2rem; }
  .security-tier-table tbody td:nth-child(2) { color: var(--ink); font-weight: 600; }

  /* ---------- 共同供應契約詳情：深色「契約單」面板與品項表 ---------- */
  .contract-detail { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 var(--sec); padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--r-card); background: linear-gradient(135deg, var(--dark-gradient-start), var(--deeper)); color: var(--paper); }
  .contract-detail::before { content: ""; position: absolute; z-index: -1; top: 50%; right: -9rem; width: 30rem; height: 30rem; translate: 0 -50%; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft) 22%, transparent), 0 0 0 3rem color-mix(in srgb, var(--soft) 4%, transparent), 0 0 0 6rem color-mix(in srgb, var(--soft) 3%, transparent); pointer-events: none; }
  .contract-detail > h2 { max-width: 24em; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); color: var(--paper); font-size: clamp(1.625rem, 3.2vw, 2.75rem); font-weight: 900; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
  .contract-detail .contract-facts { gap: 0 clamp(1.5rem, 3vw, 3rem); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
  .contract-detail .contract-facts > div { display: block; padding: 1rem 0 1.125rem; border: 0; border-top: 1px solid var(--deep-line); border-radius: 0; background: none; }
  .contract-detail .contract-facts dt { color: var(--soft); font-size: .75rem; font-weight: 700; letter-spacing: .16em; }
  .contract-detail .contract-facts dd { margin: .4rem 0 0; color: var(--paper); font-size: 1.125rem; font-weight: 700; }
  .contract-detail .contract-facts dd.mono { color: var(--paper); font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 900; }
  .contract-detail .secondary-cta { color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 45%, transparent); }
  .contract-detail .secondary-cta::before { background: color-mix(in srgb, var(--paper) 16%, transparent); }
  .contract-detail .secondary-cta:is(:hover, :focus-visible) { color: var(--paper); }
  .contract-detail :focus-visible { outline-color: var(--soft); }
  .contract-products-wrap > h2 { max-width: 22em; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); font-size: clamp(1.875rem, 3.8vw, 3.375rem); font-weight: 900; line-height: 1.14; letter-spacing: -.02em; }
  .contract-products td:nth-child(-n+2) { color: var(--ink); font-weight: 800; white-space: nowrap; }
  @media (min-width: 40.0625rem) { .contract-products tbody th { min-width: 14rem; } }

  /* ---------- 資料下載總覽：文件卡（AVAILABLE NOW） ---------- */
  .download-documents .document-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
  .document-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .25rem; padding-top: clamp(2.25rem, 3.4vw, 2.75rem); transition: transform .6s var(--ease), border-color .3s, box-shadow .6s var(--ease); }
  .document-card .doc-tab { position: absolute; top: 0; left: 0; width: 4rem; height: .375rem; border-radius: 0 0 .375rem 0; background: var(--cta); transition: width .8s var(--ease); }
  .document-card:is(:hover, :focus-within) { border-color: var(--action); box-shadow: var(--elevation-raised); }
  .document-card:is(:hover, :focus-within) .doc-tab { width: 100%; }
  .document-card .text-link { margin-top: .75rem; }

  /* ---------- 原廠下載規劃表 ---------- */
  @media (min-width: 40.0625rem) { .vendor-plan .data-table { min-width: 36rem; } }
  .vendor-plan .data-table tbody td:last-child { color: var(--ink); font-weight: 700; }

  /* ---------- 下載目錄：類型篩選列＋六種文件圖示語彙的文件卡 ---------- */
  .downloads-directory { padding-block: 0; }
  .download-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
  .download-filter[hidden] { display: none; }
  .download-filter button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease); }
  .download-filter button:is(:hover, :focus-visible) { border-color: var(--ink); }
  .download-filter button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .download-filter button svg { width: 1.125rem; height: 1.125rem; }
  .download-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); margin: 0; }
  .download-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: stretch; justify-content: stretch; gap: 1.5rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--paper); transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .6s var(--ease); }
  .download-item[hidden] { display: none; }
  .download-summary { display: flex; flex-direction: column; align-items: flex-start; flex: none; }
  .download-summary .download-type { order: -1; margin: 0 0 .75rem; }
  .download-summary h2 { margin: 0 0 .75rem; max-width: none; font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
  .download-summary h2 a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease), color .4s; }
  .download-summary h2 a:is(:hover, :focus-visible) { background-size: 100% 2px; }
  .download-summary > p:not(.download-meta) { margin: 0 0 1rem; color: var(--muted); }
  .download-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem 1rem; width: 100%; margin: auto 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.5; }
  .download-meta > a { grid-column: 1 / -1; color: var(--action); font-weight: 700; }
  .download-meta > a + a { margin-top: -.25rem; }
  .download-action { align-self: end; flex: none; }
  .download-action .secondary-cta { width: 100%; }
  .download-action span.download-request { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: .875rem 1.625rem; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--muted); font-size: .9375rem; font-weight: 700; }

  /* 文件圖示：前面一張紙、後面兩張，hover 時像翻閱文件一樣散開，預覽內容的樣子（純裝飾）。 */
  .doc-sheet { position: relative; flex: none; width: 4.25rem; height: 5.25rem; margin: .25rem 0 0 .5rem; }
  .doc-sheet::before, .doc-sheet::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: .75rem; background: repeating-linear-gradient(0deg, transparent 0 .625rem, color-mix(in srgb, var(--field-border) 35%, transparent) .625rem calc(.625rem + 1px)), var(--surface-sunken); transition: transform .8s var(--ease); }
  .doc-sheet::before { transform: rotate(-4deg) translateX(-.125rem); }
  .doc-sheet::after { transform: rotate(5deg) translateX(.25rem); }
  .doc-icon { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; border: 1px solid var(--field-border); border-radius: .75rem; background: var(--feature-icon-bg); color: var(--feature-icon-fg); clip-path: polygon(0 0, calc(100% - 1.125rem) 0, 100% 1.125rem, 100% 100%, 0 100%); transition: transform .8s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
  .doc-icon svg { width: 2.125rem; height: 2.125rem; }
  .download-item:is(:hover, :focus-within) .doc-sheet::before { transform: rotate(-12deg) translateX(-.875rem); }
  .download-item:is(:hover, :focus-within) .doc-sheet::after { transform: rotate(13deg) translateX(1rem); }
  .download-item:is(:hover, :focus-within) .doc-icon { transform: translateY(-.375rem) scale(1.04); background: var(--cta); color: var(--on-accent); }
  .download-item:is(:hover, :focus-within) { border-color: var(--deeper); background: var(--deeper); color: var(--paper); }
  .download-item:is(:hover, :focus-within) .download-summary h2 a { color: var(--paper); }
  .download-item:is(:hover, :focus-within) .download-summary > p:not(.download-meta), .download-item:is(:hover, :focus-within) .download-meta { color: var(--muted-on-dark); }
  .download-item:is(:hover, :focus-within) .download-meta { border-top-color: var(--deep-line); }
  .download-item:is(:hover, :focus-within) .download-meta > a { color: var(--on-dark-card-link); }
  .download-item:is(:hover, :focus-within) .badge { border-color: var(--on-dark-line); background: none; color: var(--on-dark-eyebrow); }
  .download-item:is(:hover, :focus-within) .doc-sheet::before, .download-item:is(:hover, :focus-within) .doc-sheet::after { border-color: var(--deep-line); background-color: var(--deep); }
  .download-item:is(:hover, :focus-within) .secondary-cta { color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 45%, transparent); }
  .download-item:is(:hover, :focus-within) .secondary-cta::before { background: color-mix(in srgb, var(--paper) 16%, transparent); }
  .download-item:is(:hover, :focus-within) :focus-visible { outline-color: var(--soft); }
  .download-item:is(:hover, :focus-within) span.download-request { background: var(--deep); color: var(--muted-on-dark); }
  .download-item .badge { align-self: flex-start; }

  /* ---------- 下載文件頁 ---------- */
  .download-detail { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 3.5rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-sunken); }
  .download-detail > h2 { max-width: none; margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 900; letter-spacing: -.015em; }
  .download-detail .contract-facts { width: 100%; margin: 0; }
  .download-detail .contract-facts > div { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
  .download-detail .contract-facts dt { color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
  .download-detail .contract-facts dd { margin: .375rem 0 0; color: var(--ink); font-weight: 700; }
  .doc-sheet--lg { width: 6rem; height: 7.5rem; margin: .5rem 0 .5rem .5rem; }
  .doc-sheet--lg .doc-icon svg { width: 3rem; height: 3rem; }
  .download-detail:hover .doc-sheet::before { transform: rotate(-12deg) translateX(-.875rem); }
  .download-detail:hover .doc-sheet::after { transform: rotate(13deg) translateX(1rem); }
  .download-detail .download-link, .download-detail .download-request { min-height: 3.5rem; padding-inline: 2rem; background: var(--ink); color: var(--paper); box-shadow: none; }
  .download-detail .download-link::before, .download-detail .download-request::before { background: var(--cta); }
  .download-detail .download-link:is(:hover, :focus-visible), .download-detail .download-request:is(:hover, :focus-visible) { color: var(--on-accent); }
  .download-detail .download-gated, .download-detail > p { max-width: 62ch; margin: 0; color: var(--muted); }
  .download-detail .lead-form { width: 100%; max-width: 45rem; }

  /* ---------- 窄螢幕 ---------- */
  @media (max-width: 40rem) {
    .procurement-directory .directory-filter, .security-tier-recommendations .directory-filter { padding: 1rem; }
    .step-line > li { padding-left: 4.25rem; }
    .step-line::before, .step-line::after { left: 1.5625rem; }
    .download-meta { grid-template-columns: minmax(0, 1fr); }
    .contract-detail::before { display: none; }
    .procurement-links a { width: 100%; justify-content: space-between; }
  }

  /* ---------- 契約編號機械式滾動（inner-procurement.js 只在允許動態時建立；沒有這些元素時不會有任何效果） ---------- */
  .roll { display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; }
  .roll-c { display: inline-block; height: 1.3em; overflow: hidden; }
  .roll-s { display: block; transform: translateY(0); }
  .roll-s > span { display: block; height: 1.3em; line-height: 1.3; }
  .roll-lit { display: inline-block; height: 1.3em; line-height: 1.3; }
  .roll.is-rolling .roll-s { transform: translateY(calc(var(--roll-to) * -1.3em)); transition: transform .9s var(--ease-out-expo) calc(var(--roll-i) * 70ms); }

  /* ---------- 動態：只在允許動態且未暫停時 ---------- */
  @media (prefers-reduced-motion: no-preference) {
    html.js:not([data-motion="off"]) & .status-live::before { animation: cf-live 2.4s var(--ease-in-out) infinite; }
    html.js:not([data-motion="off"]) & .contract-detail::before { animation: cf-orbit 60s linear infinite; }
  }
  @keyframes cf-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--cta) 0%, transparent); } }
  @keyframes cf-orbit { from { rotate: 0deg; } to { rotate: 360deg; } }
}

/*
 * issue 254（v109）：政府採購「品牌 Logo → 契約案號 → 組別 → 品項」。品牌 Logo 牆、品牌×契約明細（契約資訊卡、案號切換、組別、
 * 產品線、品項卡）。選中狀態一律用 aria-current，不用額外類別；搜尋工具列只在 html.js 顯示（沒有 JS 時整列隱藏，品項照常全部列出）。
 * 只引用 design-tokens.css 的變數，沒有色碼；Logo 不加任何 CSS 濾鏡。
 */
#main.inner-main {
  .procurement-catalog { scroll-margin-top: 6rem; }
  /* issue 263：契約一覽緊接在「品牌與契約」之後，兩段之間只留一小段距離。 */
  .catalog-content > .procurement-catalog:has(+ .data-table-block) { padding-bottom: 0; }
  .catalog-content > .procurement-catalog + .data-table-block { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  .pc-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); margin: 0 0 2rem; padding: 0; list-style: none; }
  /* issue 263：寬螢幕固定一列四個品牌（8 個品牌排成整齊兩列）。 */
  @media (min-width: 62rem) { .pc-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* issue 363：後台可選桌機一排 3～6 個（預設自動平均）；只在桌機生效，平板與手機維持上面的自動排列。 */
  @media (min-width: 62rem) {
    .pc-brands--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pc-brands--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pc-brands--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pc-brands--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  }
  .pc-brand { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
  .pc-logo { display: grid; place-items: center; min-height: 6rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .3s, box-shadow .5s var(--ease); }
  .pc-logo:is(:hover, :focus-visible), .pc-logo[aria-current="true"] { border-color: var(--action); box-shadow: var(--elevation-raised); }
  .pc-logo-img { display: block; width: auto; max-width: 100%; max-height: 3.5rem; object-fit: contain; }
  .pc-logo-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; text-align: center; overflow-wrap: anywhere; }
  /* issue 282：Logo 就是品牌字樣，名稱標題只給螢幕閱讀器（保留標題階層）。 */
  .pc-brand-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .pc-n { margin: 0; color: var(--muted); font-size: .875rem; }
  .pc-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
  .pc-pill { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .375rem .875rem; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--card-wash); color: var(--ink); font-size: .875rem; line-height: 1.4; text-decoration: none; }
  .pc-pill b { margin-right: .375rem; color: var(--on-wash-link); font-weight: 800; }
  .pc-pill span { color: var(--muted); }
  .pc-pill:is(:hover, :focus-visible) { border-color: var(--action); }
  .pc-pill[aria-current="true"] { background: var(--ink); color: var(--paper); }
  .pc-pill[aria-current="true"] :is(b, span) { color: var(--paper); }

  .pc-detail { scroll-margin-top: 6rem; margin: 0; padding: clamp(1rem, 2.4vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); }
  .pc-back { margin: 0 0 .5rem; }
  .pc-back a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .pc-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0 0 1rem; }
  .pc-head-logo { display: grid; place-items: center; width: 7.5rem; min-height: 4rem; padding: .5rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); flex: none; }
  .pc-head h2 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.625rem); line-height: 1.35; overflow-wrap: anywhere; }
  .pc-head p { margin: .125rem 0 0; color: var(--muted); font-size: .9375rem; }
  .pc-ccard { margin: 0 0 1rem; padding: .875rem 1.125rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-sunken); }
  .pc-ccard dl { display: flex; flex-wrap: wrap; gap: .375rem 2rem; margin: 0; }
  .pc-ccard dl > div { display: flex; flex-wrap: wrap; gap: .375rem; min-width: 0; font-size: .9375rem; }
  .pc-ccard dt { color: var(--muted); }
  .pc-ccard dt::after { content: "："; }
  .pc-ccard dd { margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
  .pc-switch { margin: 0 0 1rem; }

  .pc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .375rem 1rem; border: 1px solid var(--action); border-radius: var(--radius-m); background: var(--paper); color: var(--action); font: inherit; font-size: .9375rem; font-weight: 600; text-decoration: none; cursor: pointer; }
  .pc-btn:is(:hover, :focus-visible) { background: var(--outline-hover); }
  .pc-btn--primary { background: var(--action); color: var(--on-accent); }
  .pc-btn--primary:is(:hover, :focus-visible) { background: var(--action-hover); }
  .pc-downloads { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; }
  .pc-tools { display: none; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0 0 .5rem; }
  html.js & .pc-tools { display: flex; }
  .pc-search { display: flex; flex: 1 1 16rem; flex-direction: column; gap: .25rem; color: var(--muted); font-size: .875rem; }
  .pc-search input { min-height: 2.75rem; padding: .375rem .75rem; border: 1px solid var(--field-border); border-radius: var(--radius-m); background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; }
  .pc-count { margin: .5rem 0; color: var(--muted); font-size: .9375rem; }
  .pc-none { padding: 1.25rem; color: var(--muted); text-align: center; }

  .pc-group { margin: 1.75rem 0 0; }
  .pc-group-head { display: flex; justify-content: space-between; gap: .75rem; margin: 0 0 .5rem; padding: .375rem .125rem; border-bottom: .125rem solid var(--action); color: var(--ink); font-size: 1.1875rem; line-height: 1.4; }
  .pc-group-n { flex: none; color: var(--muted); font-size: .875rem; font-weight: 400; }
  .pc-line { margin: 1.125rem 0 0; }
  .pc-line-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 .625rem; padding: .5rem .875rem; border-radius: var(--radius-m); background: var(--ink); color: var(--paper); font-size: 1rem; line-height: 1.4; }
  .pc-line-head .pc-group-n { color: var(--muted-on-dark); }
  .pc-item { margin: 0 0 .625rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); }
  .pc-item header { display: flex; align-items: flex-start; gap: .625rem; }
  .pc-no { flex: none; margin-top: .125rem; padding: 0 .625rem; border-radius: var(--radius-s); background: var(--card-wash); color: var(--ink); font-size: .8125rem; font-weight: 700; line-height: 1.9; }
  .pc-name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
  .pc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
  .pc-meta { display: flex; flex-wrap: wrap; gap: .375rem 1.5rem; margin: .5rem 0; }
  .pc-meta > div { display: flex; gap: .375rem; font-size: .875rem; }
  .pc-meta dt { color: var(--muted); }
  .pc-meta dt::after { content: "："; }
  .pc-meta dd { margin: 0; font-weight: 600; }
  .pc-act { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
  .pc-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .875rem; }
  .pc-ask { font-size: .875rem; }
  .pc-specbox summary { display: flex; align-items: center; min-height: 2.75rem; color: var(--on-wash-link); font-size: .9375rem; font-weight: 600; cursor: pointer; }
  .pc-spec { padding: .625rem .875rem; border-left: .1875rem solid var(--action); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--surface-sunken); font-size: .9375rem; white-space: pre-wrap; overflow-wrap: anywhere; }
  :is(.pc-item, .pc-line, .pc-group, .pc-none)[hidden] { display: none; }

  @media (max-width: 36rem) {
    .pc-item header { flex-direction: column; gap: .25rem; }
    .pc-downloads .pc-btn, .pc-tools .pc-btn { flex: 1 1 100%; }
    .pc-meta > div { width: 100%; }
    .pc-row { align-items: stretch; }
    .pc-ask { flex: 1 1 100%; }
  }
}