/* ==========================================================================
   css/base.css
   Reset、排版、版面骨架（頂部列、導覽三態、view）、工具類
   斷點（media 無法使用變數，故寫死數值，須與 config.BREAKPOINTS 一致）：
     rail（md 以上，或手機橫式矮螢幕）：(min-width: 600px), (orientation: landscape) and (max-height: 500px)
     lg（≥1024 且非矮螢幕）：(min-width: 1024px) and (min-height: 501px), (min-width: 1024px) and (orientation: portrait)
     short：(orientation: landscape) and (max-height: 500px)
   ========================================================================== */

/* ---------- 安全區別名與預設導覽寬 ---------- */
:root {
  --sat: var(--safe-top, env(safe-area-inset-top, 0px));
  --sar: var(--safe-right, env(safe-area-inset-right, 0px));
  --sab: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--safe-left, env(safe-area-inset-left, 0px));
  --nav-w: 0px;
}

/* ---------- 1. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

@supports not (scrollbar-width: thin) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 999px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

input,
select,
textarea {
  font-size: max(16px, 1rem);
  line-height: 1.4;
}

textarea {
  resize: vertical;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a:not([class]) {
  color: var(--primary);
  text-underline-offset: 3px;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: var(--fs-title1); }
h2 { font-size: var(--fs-title2); font-weight: 650; }
h3 { font-size: var(--fs-title3); font-weight: 600; }
h4 { font-size: var(--fs-body); font-weight: 600; }
h5,
h6 { font-size: var(--fs-callout); font-weight: 600; }

/* ---------- 2. html 與 body ---------- */
html {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC',
    'Microsoft JhengHei', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 沒有顯示導覽（引導頁等）：導覽寬視為 0 */
body:not(.has-tabbar) {
  --nav-w: 0px;
}

/* ---------- 版面骨架 #app ---------- */
#app {
  --topbar-total: calc(var(--topbar-h, 52px) + var(--sat));
  --view-pt: 12px;
  --stack-gap: 12px;
  --demo-banner-h: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'top'
    'view';
  min-height: 100dvh;
}

/* ---------- 3. 頂部列 .l-topbar ---------- */
/* 頂部列跨越全部列（高度為 0 的第一列 + view 列），sticky 才能在整份文件中黏住 */
.l-topbar {
  grid-column: top-start / top-end;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-total);
  padding: var(--sat) 8px 0;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
  align-items: center;
}

.l-topbar.is-scrolled {
  border-bottom-color: var(--border);
}

.l-topbar__back {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
}

.l-topbar__title,
.l-topbar h1 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: var(--fs-title3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.l-topbar__actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------- 4. 內容區 .l-view ---------- */
.l-view {
  grid-area: view;
  container-type: inline-size;
  container-name: view;
  min-width: 0;
  min-height: 100dvh;
  padding-top: calc(var(--topbar-total) + var(--view-pt) + var(--demo-h, 0px));
  padding-right: calc(var(--page-x, 20px) + var(--sar));
  padding-bottom: calc(var(--tabbar-h, 56px) + 88px + var(--sab));
  padding-left: calc(var(--page-x, 20px) + var(--sal));
}

.l-view:focus,
.l-view:focus-visible {
  outline: none;
}

body:not(.has-tabbar) .l-view {
  padding-bottom: calc(24px + var(--sab));
}

/* 示範資料橫幅：#view 頂部留出 c-demo-banner 的高度 */
body.has-demo .l-view {
  --demo-h: var(--demo-banner-h);
}

/* 頁面最大寬 */
.s-page {
  width: 100%;
  margin-inline: auto;
  max-width: var(--content-max, 760px);
}

.s-page--default {
  max-width: var(--content-max, 760px);
}

.s-page--wide {
  max-width: var(--content-max, 760px);
}

.s-page--form {
  max-width: var(--content-max-form, 720px);
}

.s-page--split,
.s-page--full {
  max-width: none;
}

/* ---------- 6. 頁面轉場 ---------- */
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.l-view > .s-page {
  animation: page-in var(--dur-2, 240ms) var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) backwards;
}

/* ---------- 5. 導覽 .l-tabbar（sm：固定在底部的分頁列） ---------- */
.l-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  grid-area: nav;
  display: block;
  height: calc(var(--tabbar-h, 56px) + var(--sab));
  padding: 0 var(--sar) var(--sab) var(--sal);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

body:not(.has-tabbar) .l-tabbar {
  display: none;
}

.l-tabbar__brand,
.l-tabbar__extra,
.l-tabbar__pro {
  display: none;
}

.l-tabbar__main {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: var(--tabbar-h, 56px);
}

.l-tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 4px 2px 8px;
  color: var(--text-3);
  text-decoration: none;
  font-size: var(--fs-caption);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color var(--dur-1, 120ms) var(--ease, ease);
}

.l-tabbar__item svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.l-tabbar__item.is-active,
.l-tabbar__item[aria-current='page'] {
  color: var(--primary);
}

.l-tabbar__item.is-active::after,
.l-tabbar__item[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--primary);
}

/* ---------- 版面工具類 ---------- */
.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 12px);
}

.l-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack-gap, 12px);
}

.l-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Toast 容器（位置） ---------- */
.l-toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h, 56px) + var(--sab) + 12px);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 calc(var(--page-x, 20px) + var(--sar)) 0 calc(var(--page-x, 20px) + var(--sal));
  pointer-events: none;
}

.l-toast-root > * {
  pointer-events: auto;
}

body:not(.has-tabbar) .l-toast-root {
  bottom: calc(24px + var(--sab));
}

/* ---------- 版面 class：split / cols / side ---------- */
.l-split {
  display: block;
}

.l-split__master,
.l-split__detail {
  min-width: 0;
  container-type: inline-size;
  container-name: view;
}

.l-split__placeholder {
  display: none;
}

.l-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

@container view (min-width: 560px) {
  .l-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .l-span-2 {
    grid-column: span 2;
  }
}

@container view (min-width: 960px) {
  .l-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .l-cols--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.l-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.l-side > * {
  min-width: 0;
}

/* ---------- 7. 工具類 ---------- */
.u-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-num {
  font-variant-numeric: tabular-nums;
}

.u-muted {
  color: var(--text-2);
}

.u-small {
  font-size: var(--fs-footnote);
  line-height: 1.4;
}

.u-center {
  text-align: center;
}

.u-mt-2 { margin-top: var(--sp-2, 8px); }
.u-mt-3 { margin-top: var(--sp-3, 12px); }
.u-mt-4 { margin-top: var(--sp-4, 16px); }
.u-mt-6 { margin-top: var(--sp-6, 24px); }

.u-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: var(--r-btn, 16px);
  background: var(--primary);
  color: var(--text-on-primary);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-250%);
}

.u-skip:focus,
.u-skip:focus-visible {
  transform: none;
}

/* 隱藏數字：JS 已將文字換成 •••；.u-sensitive 則以覆蓋方式遮蔽原文字 */
body.is-masked .u-masked,
body.is-sensitive-hidden .u-sensitive {
  letter-spacing: 0.1em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-variant-numeric: tabular-nums;
}

body.is-sensitive-hidden .u-sensitive {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  -webkit-text-fill-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  text-shadow: none;
}

body.is-sensitive-hidden .u-sensitive::after {
  content: '•••';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  -webkit-text-fill-color: currentcolor;
}

/* ---------- 9. 焦點 ---------- */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- 10. 選取色 ---------- */
::selection {
  background: var(--primary-soft);
  color: var(--text);
}

/* ---------- 12. 上鎖 ---------- */
body.is-locked #app {
  visibility: hidden;
}

/* ---------- 原生 App：停用長按選單與文字選取 ---------- */
html[data-native] body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html[data-native] input,
html[data-native] textarea,
html[data-native] [contenteditable],
html[data-native] .u-selectable,
html[data-native] .u-selectable * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ---------- 點擊區 ---------- */
@media (pointer: coarse) {
  button,
  [role='button'],
  [role='tab'],
  [role='radio'],
  [role='switch'],
  select,
  summary,
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  a.c-btn,
  a[role='button'],
  .l-tabbar__item {
    min-height: 44px;
  }
  button,
  [role='button'] {
    min-width: 44px;
  }
}

@media (pointer: fine) {
  button,
  [role='button'],
  select,
  a.c-btn,
  a[role='button'],
  input:not([type='checkbox']):not([type='radio']):not([type='range']) {
    min-height: 40px;
  }
}

/* ==========================================================================
   rail：md（600–1023）與手機橫式矮螢幕 —— 左側 72px 精簡圖示列
   ========================================================================== */
@media (min-width: 600px), (orientation: landscape) and (max-height: 500px) {
  :root {
    --nav-w: 72px;
  }

  #app {
    grid-template-columns: var(--nav-w, 0px) minmax(0, 1fr);
    grid-template-areas:
      'nav top'
      'nav view';
  }

  .l-tabbar {
    position: sticky;
    inset: auto;
    top: 0;
    z-index: 25;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: auto;
    height: 100dvh;
    padding: calc(var(--sat) + 12px) 8px calc(var(--sab) + 12px) calc(var(--sal) + 8px);
    border-top: 0;
    border-right: 1px solid var(--border);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .l-tabbar__brand {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-on-primary);
    font-size: 0;
    text-decoration: none;
    overflow: hidden;
  }

  .l-tabbar__brand > :not(svg):not(img) {
    display: none;
  }

  .l-tabbar__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: auto;
    width: 100%;
  }

  .l-tabbar__item {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
    gap: 2px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    border-radius: var(--r-sm, 10px);
  }

  .l-tabbar__item svg {
    box-sizing: content-box;
    padding: 4px 14px;
    border-radius: var(--r-chip, 999px);
    transition: background-color var(--dur-1, 120ms) var(--ease, ease);
  }

  .l-tabbar__item:focus-visible {
    outline-offset: -3px;
  }

  .l-tabbar__item.is-active,
  .l-tabbar__item[aria-current='page'] {
    color: var(--primary);
    font-weight: 600;
  }

  .l-tabbar__item.is-active::after,
  .l-tabbar__item[aria-current='page']::after {
    display: none;
  }

  .l-tabbar__item.is-active svg,
  .l-tabbar__item[aria-current='page'] svg {
    background: var(--primary-soft);
  }

  /* 沒有導覽時，不留位置 */
  body:not(.has-tabbar) #app {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  /* 內容區：沒有底部分頁列 */
  .l-view {
    padding-left: calc(var(--page-x, 20px));
    padding-bottom: calc(32px + var(--sab));
  }

  body:not(.has-tabbar) .l-view {
    padding-left: calc(var(--page-x, 20px) + var(--sal));
    padding-bottom: calc(32px + var(--sab));
  }

  .l-toast-root {
    left: var(--nav-w, 0px);
    bottom: calc(24px + var(--sab));
  }

  .s-page--wide {
    max-width: var(--content-max, 760px);
  }

  .l-topbar {
    padding-right: 12px;
  }
}

/* 矮螢幕（手機橫式）的 rail 微調與間距縮減 */
@media (orientation: landscape) and (max-height: 500px) {
  #app {
    --topbar-h: 44px;
    --view-pt: 8px;
    --stack-gap: 8px;
  }

  .l-tabbar {
    gap: 8px;
    padding-top: calc(var(--sat) + 8px);
    padding-bottom: calc(var(--sab) + 8px);
  }

  .l-tabbar__brand {
    width: 32px;
    height: 32px;
  }

  .l-tabbar__main {
    gap: 2px;
  }

  .l-tabbar__item {
    height: 48px;
    min-height: 48px;
    gap: 0;
    line-height: 1.15;
  }

  .l-tabbar__item svg {
    padding: 2px 14px;
  }

  .l-tabbar__extra,
  .l-tabbar__pro {
    display: none;
  }

  .l-topbar__title,
  .l-topbar h1 {
    font-size: var(--fs-callout);
  }
}

body.is-short #app {
  --topbar-h: 44px;
  --view-pt: 8px;
  --stack-gap: 8px;
}

/* ==========================================================================
   lg：≥1024px 且非矮螢幕 —— 240px 完整側欄
   ========================================================================== */
@media (min-width: 1024px) and (min-height: 501px), (min-width: 1024px) and (orientation: portrait) {
  :root {
    --nav-w: 240px;
  }

  .l-tabbar {
    align-items: stretch;
    gap: 4px;
    padding: calc(var(--sat) + 16px) 12px calc(var(--sab) + 16px) calc(var(--sal) + 12px);
  }

  .l-tabbar__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px 10px;
    width: auto;
    height: auto;
    padding: 8px 12px 16px;
    border-radius: 0;
    background: none;
    color: var(--text);
    font-size: var(--fs-title3);
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: visible;
  }

  .l-tabbar__brand > :not(svg):not(img) {
    display: block;
  }

  .l-tabbar__brand svg,
  .l-tabbar__brand img {
    color: var(--primary);
  }

  .l-tabbar__brand small,
  .l-tabbar__brand .l-tabbar__brand-en {
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-3);
  }

  .l-tabbar__main {
    align-items: stretch;
    gap: 4px;
  }

  .l-tabbar__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 0 12px;
    border-radius: var(--r-sm, 10px);
    font-size: var(--fs-callout);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-2);
  }

  .l-tabbar__item svg {
    box-sizing: border-box;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .l-tabbar__item.is-active,
  .l-tabbar__item[aria-current='page'] {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
  }

  .l-tabbar__item.is-active svg,
  .l-tabbar__item[aria-current='page'] svg {
    background: none;
  }

  .l-tabbar__extra {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--divider);
  }

  .l-tabbar__extra .l-tabbar__item {
    height: 40px;
    min-height: 40px;
    font-size: var(--fs-callout);
    font-weight: 450;
  }

  .l-tabbar__pro {
    display: block;
    margin-top: auto;
    padding-top: 12px;
  }

  .l-tabbar__pro > * {
    border-radius: var(--r-card, 20px);
    font-size: var(--fs-footnote);
  }

  /* 頂部列：標題靠左，沒有返回鍵時不保留空位 */
  .l-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-left: var(--page-x, 24px);
    padding-right: var(--page-x, 24px);
  }

  .l-topbar__back:empty {
    display: none;
  }

  .l-topbar__back {
    margin-right: 8px;
  }

  .l-topbar__title,
  .l-topbar h1 {
    font-size: var(--fs-title2);
    font-weight: 650;
    text-align: left;
  }

  .s-page--wide {
    max-width: var(--content-max-wide, 1200px);
  }

  /* master-detail */
  .l-split {
    display: grid;
    grid-template-columns: var(--split-master, clamp(320px, 32%, 400px)) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .l-split__master {
    position: sticky;
    top: var(--topbar-total);
    max-height: calc(100dvh - var(--topbar-total));
    overflow: auto;
    overscroll-behavior: contain;
    padding: 4px;
    margin: -4px;
  }

  .l-split__detail {
    min-width: 0;
  }

  .l-split__placeholder {
    display: grid;
    place-items: center;
    min-height: 320px;
    padding: 32px;
    border: 1px dashed var(--border);
    border-radius: var(--r-card, 20px);
    color: var(--text-3);
    text-align: center;
  }

  /* 左側欄 + 內容 */
  .l-side {
    display: grid;
    grid-template-columns: var(--side-w, 240px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .l-side--sticky > :first-child {
    position: sticky;
    top: calc(var(--topbar-total) + 16px);
    max-height: calc(100dvh - var(--topbar-total) - 32px);
    overflow: auto;
    overscroll-behavior: contain;
  }
}

/* ==========================================================================
   滑鼠 hover（只在可 hover 的精準指標裝置）
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .l-tabbar__item:not(.is-active):not([aria-current='page']):hover {
    color: var(--text);
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 600px), (hover: hover) and (pointer: fine) and (orientation: landscape) and (max-height: 500px) {
  .l-tabbar__item:not(.is-active):not([aria-current='page']):hover svg {
    background: var(--surface-2);
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (min-height: 501px), (hover: hover) and (pointer: fine) and (min-width: 1024px) and (orientation: portrait) {
  .l-tabbar__item:not(.is-active):not([aria-current='page']):hover {
    background: var(--surface-2);
  }
  .l-tabbar__item:not(.is-active):not([aria-current='page']):hover svg {
    background: none;
  }
}

/* ==========================================================================
   出示模式：隱藏導覽與頂部列，內容滿版並保留安全區
   （放在最後，以確保覆蓋前面的規則）
   ========================================================================== */
body.is-presenting {
  --nav-w: 0px;
}

body.is-presenting #tabbar,
body.is-presenting #topbar,
body.is-presenting .l-tabbar,
body.is-presenting .l-topbar {
  display: none !important;
}

body.is-presenting #app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'view';
  grid-template-rows: 1fr;
}

body.is-presenting .l-view {
  min-height: 100dvh;
  padding: var(--sat) var(--sar) var(--sab) var(--sal);
}

body.is-presenting .l-toast-root {
  left: 0;
  bottom: calc(24px + var(--sab));
}

/* ---------- 11. 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}