/* ==========================================================================
   MIB 示範站共用 base：reset、中文排版基礎、共用 utility
   四站共用；顏色與字體來自 tokens.css 的語意槽（由 theme-l*.css 填）。
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h,4rem) + var(--sp-3));
}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-0);line-height:var(--lh-body);
  letter-spacing:var(--ls-0);
  line-break:strict;overflow-wrap:anywhere;
  text-spacing-trim:space-first;          /* 全形標點在行首的視覺縮排 */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,picture,svg,video{display:block;max-width:100%;height:auto;}
img{background:var(--img-bg);}
picture img{width:100%;object-fit:cover;}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit;}
a{color:inherit;text-decoration:none;}
ul,ol{padding:0;list-style:none;}
[hidden]{display:none!important;}
::selection{background:var(--accent);color:var(--on-accent);}

/* ---- 標題：中文字距 0，行高 1.2；display 級才用 tight（歐文/數字） ---- */
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:var(--lh-head);letter-spacing:var(--ls-0);text-wrap:balance;}
h1{font-size:var(--fs-5);}
h2{font-size:var(--fs-4);}
h3{font-size:var(--fs-2);}
h4{font-size:var(--fs-1);}
p{text-wrap:pretty;}
.measure{max-width:var(--measure);}
.lead{font-size:var(--fs-1);color:var(--ink-2);line-height:var(--lh-ui);}
.eyebrow{font-family:var(--sans);font-size:var(--fs--1);font-weight:600;letter-spacing:var(--ls-2);text-transform:uppercase;color:var(--mute);}
.num{font-variant-numeric:tabular-nums lining-nums;}

/* ---- 版面 ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:var(--sp-6);}
.section-tight{padding-block:var(--sp-5);}
.section-loose{padding-block:var(--sp-7);}
.stack>*+*{margin-top:var(--sp-3);}
.cluster{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;}

/* ---- 圖片容器：明確比例 + cover，CLS 趨近 0 ---- */
.media{position:relative;overflow:hidden;background:var(--img-bg);border-radius:var(--r-2);}
.media>img,.media>picture,.media>picture>img{width:100%;height:100%;object-fit:cover;}
.media.r-0{border-radius:var(--r-0);} .media.r-3{border-radius:var(--r-3);}
.ar-16-9{aspect-ratio:16/9;} .ar-4-3{aspect-ratio:4/3;} .ar-3-2{aspect-ratio:3/2;}
.ar-1-1{aspect-ratio:1/1;}   .ar-3-4{aspect-ratio:3/4;} .ar-2-3{aspect-ratio:2/3;} .ar-21-9{aspect-ratio:21/9;}
/* 照片疊字：一律加 scrim，不靠運氣 */
.scrim::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, var(--scrim) 0%, color-mix(in srgb, var(--scrim) 55%, transparent) 45%, transparent 80%);}
.scrim-top::after{background:linear-gradient(to bottom, var(--scrim) 0%, transparent 60%);}
.scrim-full::after{background:color-mix(in srgb, var(--scrim) 80%, transparent);}

/* ---- 按鈕與連結狀態：hover / focus-visible / active / disabled 都有設計 ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);
  min-height:2.75rem;padding:.7rem 1.35rem;border:var(--bd) solid transparent;border-radius:var(--r-2);
  font-weight:600;font-size:var(--fs-0);line-height:var(--lh-ui);cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn svg{width:1.1em;height:1.1em;flex:none;}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn:active{transform:translateY(1px);}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;}
.btn[aria-busy="true"]{position:relative;color:transparent;}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:1.1em;height:1.1em;border-radius:50%;
  border:2px solid currentColor;border-color:var(--on-accent) transparent var(--on-accent) transparent;
  animation:spin .8s linear infinite;color:var(--on-accent);}
@keyframes spin{to{transform:rotate(360deg);}}
@media (hover:hover){
  .btn-primary:hover{background:color-mix(in srgb, var(--accent) 86%, var(--ink));border-color:transparent;}
  .btn-ghost:hover{border-color:var(--ink);}
  .btn-ink:hover{background:color-mix(in srgb, var(--ink) 84%, var(--paper));}
  a.link:hover{text-decoration:underline;text-underline-offset:.2em;}
}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-1);}
.on-dark :focus-visible{outline-color:var(--paper);}

/* ---- 表單狀態 ---- */
.field{display:grid;gap:var(--sp-1);}
.field label{font-size:var(--fs--1);font-weight:600;color:var(--ink-2);}
.field input,.field textarea,.field select{
  width:100%;min-height:2.75rem;padding:.65rem .9rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-2);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);}
.field [aria-invalid="true"]{border-color:#b3261e;}
.field .hint{font-size:var(--fs--1);color:var(--mute);}
.field .error{font-size:var(--fs--1);color:#b3261e;}

/* ---- 手機固定行動列 ---- */
.actionbar{
  position:fixed;inset:auto 0 0;z-index:var(--z-nav);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:1px;background:var(--line);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar a{display:flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:3.25rem;
  background:var(--paper);color:var(--ink);font-weight:600;font-size:var(--fs--1);}
.actionbar a.primary{background:var(--accent);color:var(--on-accent);}
@media (min-width:48em){.actionbar{display:none;}}
body.has-actionbar{padding-bottom:calc(3.25rem + env(safe-area-inset-bottom));}
@media (min-width:48em){body.has-actionbar{padding-bottom:0;}}

/* ---- reveal-on-scroll：預設可見，JS 到場才隱藏 ---- */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);}
html.js .rv.in{opacity:1;transform:none;}
html.js .rv[style*="--d"]{transition-delay:var(--d);}

/* ---- 減少動態：全部關 ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html.js .rv{opacity:1;transform:none;}
}

/* ---- a11y utilities ---- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip{position:fixed;top:var(--sp-1);left:var(--sp-1);z-index:var(--z-top);padding:var(--sp-1) var(--sp-3);
  background:var(--accent);color:var(--on-accent);border-radius:var(--r-2);transform:translateY(-300%);}
.skip:focus-visible{transform:none;}

/* ---- 列印 ---- */
@media print{.actionbar,.skip,.mibbar,[data-noprint]{display:none!important;}body{background:#fff;color:#000;}}