/* 肆 專利費用／伍 商標費用（單 4a；award_build/p_fee.py，兩頁共用）：首屏縮短＋首屏圖版（不標圖號）、估算台版位、intro 兩段、帳冊（【】分組、
   第 1 組固定、其後分頁、下載格＝主張、說明列、問答 details）。
   規則同 base.css 檔頭：色只用 token、字重只用已載入樣式（Serif 600／其餘 400）、字級 --fs-*、間距 --s1～--s7；例外就地註明。
   換行規則（標題平衡、內文 pretty）由 base.css 共用層一處寫，本檔不重複。 */

/* ── 首屏：矮版（估算台緊接，總綱 §4 肆伍；構圖、比例、手機與矮視窗收法都在 base.css .aw-hero--low；圖 slice 裁切，只露中段）─────────────── */
.p-fee__plate svg * { vector-effect: non-scaling-stroke; }
.p-fee__plate svg { stroke: var(--fg-2); }
.p-fee__frule { opacity: .5; }
.p-fee__fgrid { opacity: .3; }
.p-fee__fhead, .p-fee__fcol, .p-fee__fgrat { stroke: var(--accent); }
.p-fee__fentry { stroke: var(--fg-2); }
.p-fee__fclaim { stroke: var(--accent); stroke-dasharray: 4 3; }
.p-fee__ffill { fill: var(--accent); stroke: none; }

/* ── 估算台版位（總綱 §6.1）：第 3–12 欄；裡面＝嵌入式估算台（.fce，css/award/fc-embed.css）──────────────── */
/* 版位整段＝估算台的「桌面」色（--bg 改 --paper-2，與 .fce 內 sticky 分頁列等用 var(--bg) 的底一致；估算單是桌上的紙） */
.p-fee__est { --bg: var(--paper-2); padding: var(--s5) 0 0; }
.p-fee__est-slot { grid-column: 3 / 13; min-width: 0; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.p-fee__est-slot > .fce { padding: 0; }   /* 上下留白由版位給（.fce 自帶的 band 內距是整段版時用的） */
.p-fee__est + .p-fee { padding-top: var(--s5); }

/* ── intro：「下列」段之前（估算台下方）與「下列」段起（帳冊上方）兩串，段號軌接續；兩串之間不另加距，同一般段距 ── */
/* 段號左緣＝本頁大標左緣（估算台、帳冊都從第 3 欄起；業主 11/09 18:40:10：段號不超出左側邊界）：≥768 段號改放第 3 欄、正文從第 4 欄起
   ——段號到正文的間隔＝一欄寬＋欄距−段號寬，同 base.css 段號軌算法（與首頁相同）。正文右緣不動：原寬＝min(7 欄＋6 欄距, 40em)，
   現在少一欄＋欄距；欄寬＝(外層 12 欄格線實寬 100cqi − 11 個欄距 264px) / 12（欄距 24px＝.aw-grid；同服務頁平板段算法）。
   不用百分比：WebKit 對 subgrid 子項的百分比以整個段落寬計、不是所在欄寬（實測 1440 寬少 55px）。<768 段號照 base.css 接在段首 */
@media (min-width: 768px) {
  @supports (grid-template-columns: subgrid) {
    :is(.p-fee__intro, .p-fee__lead) { container-type: inline-size; }
    :is(.p-fee__intro, .p-fee__lead) > .aw-spec__body > .aw-para > .aw-para__no { grid-column: 3 / 4; }
    :is(.p-fee__intro, .p-fee__lead) > .aw-spec__body > .aw-para > .aw-para__text { grid-column: 4 / 10; max-width: calc(40em - (100cqi - 264px) / 12 - 24px); }
  }
}

/* ── 帳冊：第 3–12 欄；每組上緣一條雙線（帳冊表頭線；1px×2，裝飾） ─────────────────────────────── */
.p-fee__book { row-gap: var(--s6); }
.p-fee__book:not(:first-child) { margin-top: var(--s5); }
.p-fee__book > * { grid-column: 3 / 13; min-width: 0; }
.p-fee__gh, .p-fee__tabs { border-top: 3px double var(--line-claim); padding-top: var(--s3); }
.p-fee__gh, .p-fee__tabs > .aw-tabs__panel > .aw-tabs__heading {
  margin: 0 0 var(--s4); font: 600 var(--fs-h2)/1.3 var(--f-serif); letter-spacing: .06em; color: var(--fg);
}
html.aw-ok .p-fee__tabs[data-ready] > .aw-tabs__panel > .aw-tabs__heading { margin: 0; }   /* 分頁模式：小標僅報讀 */
.p-fee__tabs > .aw-tabs__list { margin-bottom: var(--s4); }
.p-fee__tabs .aw-tabs__tab { font-family: var(--f-serif); font-weight: 600; font-size: var(--fs-h3); letter-spacing: .06em; }
/* 未選分頁：字下一條虛線（不主張）；指到、鍵盤焦點＝由左描成實線（主張；純 CSS，選中態仍是共用的粗線） */
/* 兩條線分畫兩個偽元素、同一個位置：實線＝::after（寬 0→--aw-u）、虛線＝::before（遮罩只露 [u＋2px, 右端]）；同一轉場，
   實線描到哪、那段虛線就看不到，描完只剩實線（業主 11/09 14:59:49；做法同服務頁章節索引；--aw-u 註冊於 base.css 7.1）。文字元素本身不帶背景圖 */
.p-fee__tabs .aw-tabs__tab:not([aria-selected="true"])::after,
.p-fee__tabs .aw-tabs__tab:not([aria-selected="true"])::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--s1); height: 1px; pointer-events: none;
  --aw-u: 0%; transition: --aw-u var(--t-state) var(--ease-out);
}
.p-fee__tabs .aw-tabs__tab:not([aria-selected="true"])::after { background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--aw-u) 100% no-repeat; }
.p-fee__tabs .aw-tabs__tab:not([aria-selected="true"])::before {
  background: repeating-linear-gradient(90deg, var(--line-claim) 0 4px, transparent 4px 8px);
  -webkit-mask: linear-gradient(#000, #000) 100% 0 / calc(100% - var(--aw-u) - min(2px, var(--aw-u))) 100% no-repeat;
  mask: linear-gradient(#000, #000) 100% 0 / calc(100% - var(--aw-u) - min(2px, var(--aw-u))) 100% no-repeat;
}
.p-fee__tabs .aw-tabs__tab:not([aria-selected="true"]):is(:hover, :focus-visible)::after,
.p-fee__tabs .aw-tabs__tab:not([aria-selected="true"]):is(:hover, :focus-visible)::before { --aw-u: 100%; }
.p-fee__group > * + *, .p-fee__tabs > .aw-tabs__panel > * + * { margin-top: var(--s3); }
.p-fee__tabs > .aw-tabs__panel > .aw-tabs__heading + * { margin-top: 0; }

/* 說明列（後台原字）＋問答 */
.p-fee__note { max-width: 40em; }
.p-fee__qa .aw-details__title { font-family: var(--f-serif); font-weight: 600; }
.p-fee__a { max-width: 40em; }

/* 下載格：桌機 3 欄（≥1280 為 4 欄，見下）、整格可點（common.claim：虛線框 hover／focus 描成實線、類型格灌實）；類型與大小 Plex Mono。
   格內：第一列名稱、第二列類型（左）與大小（右）——檔案類型與大小不重要，放到名稱下方（業主 11/09 16:12:54 轉同事投影片第 3 頁；
   p_fee.py _cell 的輸出順序同此，讀屏先念名稱） */
.p-fee__cells { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.p-fee__li { display: flex; min-width: 0; }
.p-fee__cell { flex: 1 1 auto; min-width: 0; min-height: 128px; padding: var(--s2) var(--s2) var(--s3) var(--s2); }
.p-fee__cell > .aw-claim__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "type size";
  align-items: center; column-gap: var(--s2); row-gap: var(--s2);
}
/* 類型格與大小＝資訊性小字（單 3m2 A4）：目標 ≥7:1——類型格（字、框、停留時的灌實底同一色）＝強調色往本文色調 40%、大小＝次要色往本文色調 45%
   （淺底調暗、深底調亮；色票不改）；字級下限 14px（例外：Plex Mono 小字，原 13px） */
.p-fee__type { --p-fee-ty: color-mix(in srgb, var(--accent) 60%, var(--fg)); grid-area: type; margin: 0; justify-self: start; font-size: 14px; color: var(--p-fee-ty); border-color: var(--p-fee-ty); }
.p-fee__cell .p-fee__type::before { background: var(--p-fee-ty); }
.p-fee__size { grid-area: size; justify-self: end; font: 400 14px/1.4 var(--f-mono); letter-spacing: .06em; color: color-mix(in srgb, var(--fg-2) 55%, var(--fg)); white-space: nowrap; }
.p-fee__name { grid-area: name; font: 600 var(--fs-h3)/1.4 var(--f-serif); letter-spacing: .06em; color: var(--fg); }

@media (max-width: 1023.98px) {
  .p-fee__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 寬螢幕（≥1280）每列 4 張（業主 11/09 18:43:49：地區名稱都不長、一列放 4～5 張頁面才不會太長）；1024～1279 維持 3 張。
   卡變窄後過長的名稱會折成兩行（字、字型、字距不變）：同列卡片本來就等高（.p-fee__li 撐滿列高），
   格內改成名稱在上、類型與大小那一列貼齊卡底——同列各卡的類型框、大小對齊同一條線 */
@media (min-width: 1280px) {
  .p-fee__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-fee__cell { display: flex; flex-direction: column; }
  .p-fee__cell > .aw-claim__body { flex: 1 1 auto; align-content: space-between; }   /* 多出的高度放在兩列之間；第二列內類型框與大小仍垂直置中對齊 */
}
/* 甲7：單欄版（≤1099）摘要欄被 fc-embed.css 改成 position:static，它的兩個角標（::before／::after）就改以外層 .fce-mount 定位，
   左上角標壓到說明文字第一個字。這裡把定位還給摘要欄本身（角標回到摘要框的角）。選擇器多一層＝蓋過該條 */
@media (max-width: 1099.98px) {
  .p-fee__est-slot .fce-form > .fce-sum { position: relative; }
}

/* ── 窄螢幕：單欄；下載格維持雙欄（名稱在上，類型、大小一列在下；長檔名可斷行） ───────────────────────── */
@media (max-width: 767.98px) {
  /* 手機首屏（單 3m2 A5）：估算台上留白收兩級，第一組欄位早進第一屏（開場圖版比例已移到 base.css 矮版手機段，單 3ui） */
  .p-fee__est { padding-top: var(--s2); }
  .p-fee__est-slot { padding-bottom: var(--s4); }
  .p-fee__est + .p-fee { padding-top: var(--s4); }
  .p-fee__book { row-gap: var(--s5); }
  .p-fee__cells { gap: var(--s1); }
  .p-fee__cell { min-height: 64px; padding: var(--s1); }
  .p-fee__cell > .aw-claim__body { row-gap: var(--s1); }
  .p-fee__type { min-width: 36px; height: 28px; margin: 0; }   /* 共用編號格 40×40 在窄格太重（例外：同首頁手機編號的 36 寬） */
  .p-fee__name { font-size: var(--fs-body); line-height: 1.5; letter-spacing: .02em; overflow-wrap: anywhere; }
}

/* ── 矮視窗（寬 ≥1024、高 ≤800）：第一組控制項與標籤進第一屏。版位在這裡收，估算台標題區在 fc-embed.css 同條件；
   開場（內距、圖版限寬、章號上限）已移到 base.css 矮版開場的同條件段（單 3ui，全部矮版開場共用） ── */
@media (min-width: 1024px) and (max-height: 800px) {
  .p-fee__est { padding-top: var(--s3); }
}