/* 顏色由試算表「主題」分頁覆寫，這裡是預設值 */
:root{
  --c-main:  #75856A;
  --c-ink:   #2E3330;
  --c-muted: #8B928C;
  --c-line:  #E8EAE5;
  --c-bg:    #FCFCFB;
  --c-soft:  #F4F5F2;
  --c-white: #FFFFFF;
  --font: "Noto Sans TC","PingFang TC","Hiragino Sans","Microsoft JhengHei",Arial,sans-serif;
  --col: 44rem;
  --fs-body: 15px;   /* 由主題「內文字級」覆寫 */
  --fs-h2: 16px;     /* 由主題「段落標題字級」覆寫 */
  --fs-hero: 44px;   /* 由主題「開場標題字級」覆寫 */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{ box-sizing: inherit }
html{ scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100% }
body{
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font); font-size: var(--fs-body);
  letter-spacing: .06em; line-height: 1.9;
  font-feature-settings: "palt" 0;
}
p{ margin: 0 0 1em } p:last-child{ margin-bottom: 0 }
strong{ font-weight: 600 }
ul{ margin: 0 0 1em; padding-left: 1.2em } li{ margin: .2em 0 }
ul:last-child{ margin-bottom: 0 }

/* ── 區段骨架 ──────────────────────────────── */
.sec{ padding: 64px 24px }
.sec .inner{ max-width: var(--col); margin: 0 auto }
.sec:not(.bg-soft):not(.bg-white) + .sec:not(.bg-soft):not(.bg-white){ padding-top: 8px }  /* 同為預設底色時不重複留白 */
.bg-soft{ background: var(--c-soft) }
.bg-white{ background: var(--c-white); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line) }

.sec-title{
  margin: 0 0 20px; padding-bottom: 10px;
  font-size: var(--fs-h2); font-weight: 600; letter-spacing: .14em; line-height: 1.6;
  color: var(--c-main); border-bottom: 1px solid var(--c-line);
}
.sec-body + *{ margin-top: 28px }
.sec-note{
  margin-top: 24px; font-size: .867em; line-height: 1.85; letter-spacing: .04em; color: var(--c-muted);
}

/* ── 開場 ─────────────────────────────────── */
.lay-開場{ padding-top: 104px; padding-bottom: 72px }
.hero-title{
  margin: 0 0 28px; font-size: min(var(--fs-hero), 9vw); font-weight: 600;
  letter-spacing: .16em; line-height: 1.35;
}
.hero-lead{ font-size: 1.1em; line-height: 2.05; max-width: 38em }

/* ── 流程：窄螢幕是直線串接，寬螢幕是橫向 ─────────── */
.flow{ list-style: none; margin: 0; padding: 0; position: relative }
.flow li{ position: relative; padding: 0 0 22px 28px }
.flow li:last-child{ padding-bottom: 0 }
.flow li::before{
  content: ""; position: absolute; left: 3px; top: .72em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--c-main); background: var(--c-bg);
}
.bg-soft .flow li::before{ background: var(--c-soft) }
.flow li::after{
  content: ""; position: absolute; left: 7.5px; top: calc(.72em + 12px); bottom: 2px;
  width: 1px; background: var(--c-main); opacity: .45;
}
.flow li:last-child::after{ display: none }
.flow-t{ display: block; font-weight: 600; letter-spacing: .1em }
.flow-d{ display: block; font-size: .9em; color: var(--c-muted) }
@media (min-width: 760px){
  .flow{ display: flex; gap: 0 }
  .flow li{ flex: 1; padding: 26px 14px 0 0 }
  .flow li::before{ left: 0; top: 0 }
  .flow li::after{ left: 14px; right: 6px; top: 5px; bottom: auto; width: auto; height: 1px }
  .flow-t{ font-size: .933em; line-height: 1.75 }
}

/* ── 欄位小標（對照、步驟共用）──────────────────── */
.colhead{
  display: grid; grid-template-columns: 11rem 1fr; gap: 24px;
  font-size: .8em; letter-spacing: .14em; color: var(--c-muted);
  padding-bottom: 8px; border-bottom: 1px solid var(--c-line);
}

/* ── 對照 ─────────────────────────────────── */
.pair{
  display: grid; grid-template-columns: 11rem 1fr; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--c-line);
}
.pair:last-child{ border-bottom: none; padding-bottom: 0 }
.pairs > .pair:first-child{ padding-top: 0 }
.pair-name{ display: block; font-weight: 600; letter-spacing: .1em }
.pair-sub{ display: block; font-size: .833em; color: var(--c-muted); letter-spacing: .1em; margin-top: 2px }

/* ── 步驟 ─────────────────────────────────── */
.steps{ counter-reset: none }
.step{
  display: grid; grid-template-columns: 11rem 1fr; gap: 24px;
  padding: 14px 0; border-bottom: 1px solid var(--c-line);
}
.step:last-child{ border-bottom: none }
.step-n{
  color: var(--c-main); font-weight: 600; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px){
  .colhead{ display: none }
  .colhead + .pair, .colhead + .step{ padding-top: 0 }
  .pair, .step{ grid-template-columns: 1fr; gap: 4px }
  .step{ grid-template-columns: 5.5em 1fr; gap: 12px }
}

/* ── 表格：窄螢幕改為堆疊 ─────────────────────── */
.tbl-wrap{ overflow-x: auto }
.tbl{ width: 100%; border-collapse: collapse; font-size: .933em }
.tbl th{
  text-align: left; font-weight: 400; font-size: .857em; letter-spacing: .14em;
  color: var(--c-muted); padding: 0 16px 8px 0; border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.tbl td{ padding: 14px 16px 14px 0; border-bottom: 1px solid var(--c-line); vertical-align: top; line-height: 1.8 }
.tbl tr:last-child td{ border-bottom: none }
.tbl td:first-child{ font-weight: 600; letter-spacing: .1em; white-space: nowrap }
.tbl.cols-3 td:first-child{ width: 8.5em }
@media (max-width: 640px){
  .tbl thead{ display: none }
  .tbl, .tbl tbody, .tbl tr, .tbl td{ display: block; width: auto !important }
  .tbl tr{ padding: 14px 0; border-bottom: 1px solid var(--c-line) }
  .tbl tr:last-child{ border-bottom: none }
  .tbl td{ padding: 2px 0; border: none; white-space: normal }
  .tbl td:first-child{ margin-bottom: 4px }
  .tbl td:not(:first-child)[data-label]:not([data-label=""])::before{
    content: attr(data-label); display: block;
    font-size: .82em; letter-spacing: .14em; color: var(--c-muted); margin-top: 6px;
  }
}

/* ── 引言 ─────────────────────────────────── */
.quote{
  margin: 0; padding: 4px 0 4px 24px; border-left: 1px solid var(--c-main);
  font-size: 1.133em; line-height: 2.05;
}

/* ── 連結、按鈕、圖片 ───────────────────────── */
.sec a{ color: var(--c-main); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px }
.sec a:hover{ text-decoration-thickness: 2px }
.sec a:focus-visible{ outline: 1px solid var(--c-main); outline-offset: 2px; border-radius: 2px }
.sec-act{ margin: 28px 0 0 }
.sec .btn{
  display: inline-block; padding: 10px 22px; border-radius: 6px;
  background: var(--c-main); color: var(--c-bg); text-decoration: none;
  font-size: .867em; letter-spacing: .14em; line-height: 1.6;
}
.sec .btn:hover{ filter: brightness(.92); text-decoration: none }
.sec-fig{ margin: 28px 0 0 }
.sec-body + .sec-fig{ margin-top: 28px }
.sec-fig + *{ margin-top: 28px }
.sec-fig img{ display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--c-line) }
.sec-fig figcaption{ margin-top: 8px; font-size: .8em; color: var(--c-muted); letter-spacing: .06em; line-height: 1.7 }
.hero-lead + .sec-fig{ margin-top: 40px }
.item-img{ display: block; max-width: 100%; height: auto; margin: 4px 0 10px; border-radius: 6px; border: 1px solid var(--c-line) }

/* ── 頁尾 ─────────────────────────────────── */
.site-foot{
  max-width: var(--col); margin: 48px auto 0; padding: 20px 24px 48px;
  border-top: 1px solid var(--c-line);
  font-size: 12px; color: var(--c-muted); letter-spacing: .1em;
}
@media (max-width: 640px){ .sec{ padding: 48px 20px } .lay-開場{ padding-top: 72px } }