/* 由 app/globals.css、app/redesign.css 與 app/暖白雙欄.css 自動合併，請勿直接修改。 */
:root {
  --墨綠: #173d32;
  --深墨綠: #0e2c25;
  --森林綠: #285c4e;
  --陶土: #d96f4f;
  --深陶土: #a9452f;
  --蜜黃: #f0c66c;
  --暖白: #f6f2e9;
  --紙白: #fffdf8;
  --淡米: #ebe4d7;
  --線條: #d5ccbe;
  --文字: #19211e;
  --次文字: #5f6863;
  --錯誤: #9d2f22;
  --成功: #1e6d50;
  --最大寬: 1240px;
  --大圓角: 32px;
  --中圓角: 20px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--暖白);
  color: var(--文字);
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--蜜黃);
  outline-offset: 4px;
}

.跳至內容 {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--紙白);
  color: var(--深墨綠);
  box-shadow: 0 8px 30px rgb(14 44 37 / 18%);
  transform: translateY(-140%);
  transition: transform 180ms ease;
}

.跳至內容:focus {
  transform: translateY(0);
}

.視覺隱藏 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.頂部導覽 {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 0 max(24px, calc((100vw - var(--最大寬)) / 2));
  border-bottom: 1px solid rgb(23 61 50 / 12%);
  background: rgb(246 242 233 / 88%);
  backdrop-filter: blur(16px);
}

.品牌標記 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 44px;
}

.品牌標記 span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--墨綠);
  color: var(--紙白);
  font-size: 11px;
  letter-spacing: .08em;
}

.品牌標記 strong {
  font-size: 15px;
  letter-spacing: .08em;
}

.頂部導覽 nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.頂部導覽 nav a {
  padding: 12px 0;
  color: var(--次文字);
  font-size: 14px;
  transition: color 160ms ease;
}

.頂部導覽 nav a:hover {
  color: var(--墨綠);
}

.導覽行動 {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--墨綠);
  border-radius: 999px;
  color: var(--墨綠);
  font-size: 14px;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease;
}

.導覽行動:hover {
  background: var(--墨綠);
  color: var(--紙白);
}

.首頁區 {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 72px);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgb(240 198 108 / 24%), transparent 23%),
    linear-gradient(140deg, #f9f6ef 0%, var(--暖白) 65%, #eee7d8 100%);
}

.首頁區::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(rgb(23 61 50 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(23 61 50 / 5%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  content: "";
}

.首頁背景字 {
  position: absolute;
  z-index: -1;
  right: -24px;
  bottom: -75px;
  color: rgb(23 61 50 / 4.5%);
  font-size: clamp(130px, 20vw, 320px);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .8;
  white-space: nowrap;
}

.首頁內容 {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(350px, .84fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
  width: min(calc(100% - 48px), var(--最大寬));
  min-height: calc(100svh - 72px);
  margin: 0 auto;
  padding: 80px 0 96px;
}

.眉標,
.段落編號 {
  margin: 0 0 22px;
  color: var(--深陶土);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.首頁文案 h1,
.區塊標題列 h2,
.定位主張 h2,
.成果敘述 h2,
.投入區 h2,
.下一階段 h2,
.適合度說明 h2,
.申請抬頭 h2,
.常見問題抬頭 h2,
.結尾行動 h2 {
  margin: 0;
  color: var(--深墨綠);
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.24;
}

.首頁文案 h1 {
  max-width: 820px;
  font-size: clamp(42px, 5.4vw, 76px);
}

.首頁文案 h1 span,
.定位主張 h2 span {
  color: var(--深陶土);
}

.首頁副標 {
  max-width: 680px;
  margin: 30px 0 0;
  color: #49534e;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.85;
}

.首頁按鈕列 {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
  margin-top: 36px;
}

.主要按鈕,
.亮色按鈕 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  border-radius: 6px;
  background: var(--陶土);
  color: #fff;
  box-shadow: 0 9px 24px rgb(169 69 47 / 18%);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.主要按鈕:hover,
.亮色按鈕:hover {
  background: var(--深陶土);
  box-shadow: 0 12px 28px rgb(169 69 47 / 26%);
  transform: translateY(-2px);
}

.主要按鈕:disabled {
  background: #b7aea2;
  color: #f5f1eb;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.文字按鈕 {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid currentColor;
  color: var(--墨綠);
  font-size: 15px;
  font-weight: 750;
}

.文字按鈕 span {
  transition: transform 160ms ease;
}

.文字按鈕:hover span {
  transform: translateY(3px);
}

.首頁提醒 {
  margin: 26px 0 0;
  color: var(--次文字);
  font-size: 13px;
}

.首頁提醒 strong {
  color: var(--墨綠);
}

.流程焦點卡 {
  position: relative;
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--大圓角);
  background: var(--墨綠);
  color: var(--紙白);
  box-shadow: 0 28px 70px rgb(14 44 37 / 22%);
  transform: rotate(1.2deg);
}

.流程焦點卡::after {
  position: absolute;
  right: -15px;
  bottom: -16px;
  width: 90px;
  height: 90px;
  border: 1px solid rgb(240 198 108 / 58%);
  border-radius: 50%;
  content: "";
}

.焦點卡抬頭 {
  display: flex;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  color: #c7d4ce;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.焦點節點 {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 18px;
  align-items: center;
  padding: 30px 0;
}

.節點編號 {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgb(240 198 108 / 68%);
  border-radius: 50%;
  color: var(--蜜黃);
  font-size: 18px;
  font-weight: 800;
}

.焦點節點 small {
  display: block;
  margin-bottom: 3px;
  color: #b8c7c1;
  font-size: 12px;
}

.焦點節點 strong {
  display: block;
  max-width: 250px;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.4;
}

.流程連線 {
  position: relative;
  height: 44px;
  margin-left: 31px;
  border-left: 1px dashed rgb(240 198 108 / 52%);
}

.流程連線 span {
  position: absolute;
  top: 9px;
  left: 18px;
  color: #aebdb7;
  font-size: 11px;
  letter-spacing: .08em;
}

.焦點節點.最終 .節點編號 {
  border: 0;
  background: var(--蜜黃);
  color: var(--深墨綠);
}

.流程焦點卡 > p {
  margin: 14px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 16%);
  color: #c7d4ce;
  font-size: 13px;
}

.狀態路徑,
.題目篩選,
.成果區,
.邊界區,
.下一階段,
.申請區,
.常見問題區 {
  width: min(calc(100% - 48px), var(--最大寬));
  margin: 0 auto;
  padding: 118px 0;
}

.區塊標題列 {
  max-width: 820px;
  margin-bottom: 52px;
}

.區塊標題列.窄版 {
  max-width: 720px;
}

.區塊標題列 h2,
.定位主張 h2,
.成果敘述 h2,
.投入區 h2,
.下一階段 h2,
.適合度說明 h2,
.申請抬頭 h2,
.常見問題抬頭 h2 {
  font-size: clamp(34px, 4.1vw, 56px);
}

.區塊標題列 > p:last-child {
  max-width: 660px;
  margin: 22px 0 0;
  color: var(--次文字);
  font-size: 17px;
}

.三段路徑 {
  display: grid;
  grid-template-columns: 1fr 46px 1fr 46px 1fr;
  align-items: stretch;
}

.三段路徑 article {
  padding: 26px;
  border-top: 3px solid var(--線條);
  background: rgb(255 253 248 / 58%);
}

.三段路徑 article span,
.週標記,
.清單標籤 {
  color: var(--深陶土);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.三段路徑 h3 {
  margin: 12px 0 8px;
  color: var(--深墨綠);
  font-size: 21px;
  line-height: 1.4;
}

.三段路徑 p {
  margin: 0;
  color: var(--次文字);
  font-size: 14px;
}

.三段路徑 .路徑強調 {
  border-top-color: var(--陶土);
  background: var(--紙白);
  box-shadow: 0 16px 38px rgb(14 44 37 / 10%);
  transform: translateY(-12px);
}

.路徑箭頭 {
  display: grid;
  place-items: center;
  color: var(--墨綠);
  font-size: 22px;
}

.共創定位 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 64px;
  align-items: end;
  padding: 110px max(24px, calc((100vw - var(--最大寬)) / 2));
  background: var(--紙白);
}

.定位主張 > p:last-child,
.成果敘述 > p:last-child,
.下一階段前言 > p,
.適合度說明 > p {
  max-width: 650px;
  margin: 24px 0 0;
  color: var(--次文字);
  font-size: 17px;
}

.題目範例 {
  padding: 30px;
  border-left: 1px solid var(--線條);
}

.題目範例 > p {
  margin: 0 0 20px;
  color: var(--墨綠);
  font-size: 13px;
  font-weight: 800;
}

.題目範例 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.題目範例 li {
  padding: 8px 13px;
  border: 1px solid var(--線條);
  border-radius: 999px;
  background: var(--暖白);
  color: var(--森林綠);
  font-size: 13px;
}

.雙欄清單 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.雙欄清單 article,
.邊界網格 article {
  padding: clamp(28px, 4vw, 50px);
  border-radius: var(--中圓角);
}

.適合卡 {
  background: var(--墨綠);
  color: var(--紙白);
}

.不適合卡 {
  border: 1px solid var(--線條);
  background: var(--紙白);
}

.雙欄清單 h3 {
  max-width: 480px;
  margin: 14px 0 32px;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(23px, 2.4vw, 34px);
  line-height: 1.45;
}

.適合卡 .清單標籤,
.四週區 .段落編號 {
  color: var(--蜜黃);
}

.雙欄清單 ul,
.邊界網格 ul,
.投入內容 ul,
.先確認清單 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.雙欄清單 li,
.邊界網格 li,
.投入內容 li,
.先確認清單 li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.雙欄清單 li::before,
.邊界網格 li::before,
.投入內容 li::before,
.先確認清單 li::before {
  position: absolute;
  top: 21px;
  left: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--蜜黃);
  border-radius: 50%;
  content: "";
}

.不適合卡 li {
  border-top-color: var(--淡米);
  color: var(--次文字);
}

.不適合卡 li::before,
.不包含 li::before {
  border-color: var(--陶土);
}

.四週區 {
  padding: 118px max(24px, calc((100vw - var(--最大寬)) / 2));
  background: var(--深墨綠);
  color: var(--紙白);
}

.深色版 h2 {
  color: var(--紙白);
}

.深色版 > p:last-child {
  color: #b7c6c0;
}

.時間線 {
  border-top: 1px solid rgb(255 255 255 / 17%);
}

.週卡 {
  display: grid;
  grid-template-columns: 82px minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 28px;
  padding: 42px 0;
  border-bottom: 1px solid rgb(255 255 255 / 17%);
}

.週卡軸 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.週卡軸 span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  color: #b8c6c1;
  font-size: 12px;
}

.週卡軸 i {
  flex: 1;
  min-height: 42px;
  border-left: 1px dashed rgb(255 255 255 / 22%);
}

.週卡強調 .週卡軸 span {
  border-color: var(--蜜黃);
  background: var(--蜜黃);
  color: var(--深墨綠);
  font-weight: 800;
}

.週卡 h3 {
  margin: 8px 0 10px;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(26px, 3vw, 39px);
  line-height: 1.4;
}

.週目的 {
  margin: 0 0 18px;
  color: #c7d2ce;
  font-size: 16px;
}

.週卡內容 ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.週卡內容 li {
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 999px;
  color: #b7c6c0;
  font-size: 12px;
}

.週成果 {
  align-self: center;
  padding: 24px;
  border-left: 2px solid rgb(240 198 108 / 62%);
  background: rgb(255 255 255 / 4%);
}

.週成果 small {
  display: block;
  margin-bottom: 8px;
  color: var(--蜜黃);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.週成果 strong {
  display: block;
  font-size: 18px;
}

.週成果 p {
  margin: 8px 0 0;
  color: #aebdb7;
  font-size: 13px;
}

.檢視問題 {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 30px;
  align-items: center;
  margin: 60px 0 0;
  padding: 34px 40px;
  border: 0;
  border-radius: var(--中圓角);
  background: var(--蜜黃);
  color: var(--深墨綠);
}

.檢視問題 span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.檢視問題 p {
  margin: 0;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.45;
}

.成果區 {
  position: relative;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(48px, 8vw, 110px);
  overflow: hidden;
}

.成果大字 {
  position: absolute;
  z-index: -1;
  top: 72px;
  left: -10px;
  color: rgb(23 61 50 / 5%);
  font-size: clamp(150px, 20vw, 290px);
  font-weight: 900;
  line-height: 1;
}

.成果敘述 {
  position: sticky;
  top: 120px;
  align-self: start;
}

.成果清單 {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: 成果;
}

.成果清單 li {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--線條);
}

.成果清單 span {
  color: var(--深陶土);
  font-size: 12px;
  font-weight: 800;
}

.成果清單 p {
  margin: 0;
  color: var(--墨綠);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 750;
}

.邊界區 {
  padding-top: 30px;
}

.邊界網格 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.邊界網格 article {
  border: 1px solid var(--線條);
  background: var(--紙白);
}

.邊界網格 .不包含 {
  background: #eee7dc;
}

.邊界網格 .清單標籤 {
  display: block;
  margin-bottom: 24px;
}

.邊界網格 li {
  border-top-color: var(--淡米);
}

.邊界網格 li::before {
  border-color: var(--森林綠);
}

.界線提醒 {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 34px;
  align-items: start;
  margin-top: 18px;
  padding: 28px 34px;
  border-radius: var(--中圓角);
  background: var(--墨綠);
  color: var(--紙白);
}

.界線提醒 strong {
  color: var(--蜜黃);
}

.界線提醒 p {
  margin: 0;
  color: #d1dcd7;
}

.投入區 {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
  padding: 110px max(24px, calc((100vw - var(--最大寬)) / 2));
  background: var(--紙白);
}

.投入內容 > p:first-child {
  margin: 0 0 12px;
  color: var(--墨綠);
  font-weight: 800;
}

.投入內容 li {
  border-top-color: var(--淡米);
  color: var(--次文字);
}

.投入內容 li::before {
  border-color: var(--陶土);
}

.授權提醒 {
  margin: 28px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--陶土);
  background: var(--暖白);
  color: var(--深陶土);
  font-size: 14px;
  font-weight: 700;
}

.下一階段 {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px;
}

.下一階段前言 {
  position: sticky;
  top: 120px;
  align-self: start;
}

.下一階段前言 .文字按鈕 {
  margin-top: 28px;
}

.方向卡組 {
  display: grid;
  gap: 14px;
}

.方向卡組 article {
  display: grid;
  grid-template-columns: 62px 1fr;
  padding: 26px 30px;
  border: 1px solid var(--線條);
  border-radius: var(--中圓角);
  background: var(--紙白);
}

.方向卡組 span {
  grid-row: 1 / span 2;
  color: var(--深陶土);
  font-size: 12px;
  font-weight: 800;
}

.方向卡組 h3 {
  margin: 0;
  color: var(--墨綠);
  font-size: 21px;
}

.方向卡組 p {
  margin: 6px 0 0;
  color: var(--次文字);
  font-size: 14px;
}

.先確認清單 {
  grid-column: 2;
  padding: 30px;
  border-radius: var(--中圓角);
  background: var(--淡米);
}

.先確認清單 > p {
  margin: 0 0 10px;
  color: var(--墨綠);
  font-weight: 800;
}

.先確認清單 li {
  border-top-color: rgb(23 61 50 / 10%);
}

.先確認清單 li::before {
  border-color: var(--森林綠);
}

.適合度區 {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(50px, 8vw, 110px);
  padding: 118px max(24px, calc((100vw - var(--最大寬)) / 2));
  background: #e6ded1;
}

.完成進度 {
  margin-top: 36px;
}

.完成進度 > span {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--次文字);
  font-size: 13px;
}

.完成進度 strong {
  color: var(--深陶土);
  font-size: 30px;
}

.完成進度 > div {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #c9bfb2;
}

.完成進度 i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--陶土);
  transition: width 220ms ease;
}

.檢查卡 {
  padding: clamp(26px, 4vw, 46px);
  border-radius: var(--大圓角);
  background: var(--紙白);
  box-shadow: 0 24px 64px rgb(23 61 50 / 12%);
}

.檢查卡 fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.檢查選項 {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 58px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--淡米);
  cursor: pointer;
}

.檢查選項 input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.檢查選項 > span {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #9d9488;
  border-radius: 5px;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.檢查選項 input:focus-visible + span {
  outline: 3px solid var(--蜜黃);
  outline-offset: 3px;
}

.檢查選項 input:checked + span {
  border-color: var(--墨綠);
  background: var(--墨綠);
}

.檢查選項 input:checked + span::after {
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 11px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  content: "";
  transform: rotate(42deg);
}

.檢查選項 p {
  margin: 0;
  color: #3f4944;
  font-size: 15px;
}

.寬按鈕 {
  width: 100%;
  margin-top: 28px;
}

.檢查提示 {
  margin: 12px 0 0;
  color: var(--次文字);
  font-size: 13px;
  text-align: center;
}

.檢查提示.已完成 {
  color: var(--成功);
  font-weight: 700;
}

.申請區 {
  padding-bottom: 70px;
}

.申請抬頭 {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 60px;
  align-items: end;
  margin-bottom: 62px;
}

.申請抬頭 > .段落編號,
.申請抬頭 > h2 {
  grid-column: 1;
}

.原型標籤 {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 22px;
  border: 1px dashed var(--深陶土);
  border-radius: var(--中圓角);
  background: #f2e6dd;
}

.原型標籤 span {
  color: var(--深陶土);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.原型標籤 p {
  margin: 7px 0 0;
  color: #654f47;
  font-size: 13px;
}

.申請表單 {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 64px);
  border-radius: var(--大圓角);
  background: var(--紙白);
  box-shadow: 0 26px 70px rgb(23 61 50 / 9%);
}

.錯誤摘要 {
  margin-bottom: 28px;
  padding: 16px 18px;
  border-left: 4px solid var(--錯誤);
  background: #faeae6;
  color: var(--錯誤);
}

.錯誤摘要 p {
  margin: 4px 0 0;
  font-size: 13px;
}

.表單雙欄 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.欄位 {
  margin-bottom: 24px;
}

.欄位 label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
  color: var(--墨綠);
  font-size: 14px;
  font-weight: 750;
}

.欄位 label span {
  color: var(--深陶土);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.欄位 input,
.欄位 select,
.欄位 textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #a9a096;
  border-radius: 8px;
  background: #fff;
  color: var(--文字);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.欄位 textarea {
  min-height: 116px;
  resize: vertical;
}

.欄位 input:hover,
.欄位 select:hover,
.欄位 textarea:hover {
  border-color: var(--森林綠);
}

.欄位 input:focus,
.欄位 select:focus,
.欄位 textarea:focus {
  border-color: var(--森林綠);
  outline: 0;
  box-shadow: 0 0 0 3px rgb(40 92 78 / 18%);
}

.欄位 [aria-invalid="true"] {
  border-color: var(--錯誤);
  background: #fffaf8;
}

.欄位 small {
  display: block;
  margin-top: 6px;
  color: var(--次文字);
  font-size: 11px;
}

.欄位錯誤 {
  margin: 6px 0 0;
  color: var(--錯誤);
  font-size: 12px;
  font-weight: 700;
}

.機器人欄位 {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.資料同意 {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 13px;
  align-items: start;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid var(--線條);
  border-radius: 14px;
  background: var(--暖白);
  cursor: pointer;
}

.資料同意 input {
  width: 19px;
  height: 19px;
  margin: 3px 0 0;
  accent-color: var(--墨綠);
}

.資料同意 strong,
.資料同意 small {
  display: block;
}

.資料同意 strong {
  color: var(--墨綠);
  font-size: 14px;
  line-height: 1.55;
}

.資料同意 small {
  margin-top: 6px;
  color: var(--次文字);
  font-size: 12px;
  line-height: 1.65;
}

.資料同意:has(input[aria-invalid="true"]) {
  border-color: var(--錯誤);
  background: #fffaf8;
}

.同意錯誤 {
  margin: 7px 0 0 35px;
}

.送出狀態 {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
}

.送出狀態 strong,
.送出狀態 p {
  margin: 0;
}

.送出狀態 p {
  margin-top: 4px;
  font-size: 13px;
}

.送出失敗 {
  border-left: 4px solid var(--錯誤);
  background: #faeae6;
  color: var(--錯誤);
}

.表單送出列 {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--淡米);
}

.表單送出列 strong {
  display: block;
  color: var(--墨綠);
  font-size: 13px;
}

.表單送出列 p {
  margin: 2px 0 0;
  color: var(--次文字);
  font-size: 12px;
}

.表單送出列 button:disabled {
  cursor: wait;
  opacity: .68;
}

.申請預覽 {
  max-width: 920px;
  margin: 24px auto 0;
  padding: clamp(28px, 5vw, 52px);
  border: 2px solid var(--墨綠);
  border-radius: var(--大圓角);
  background: var(--紙白);
}

.預覽抬頭 {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--淡米);
}

.預覽抬頭 p {
  margin: 0;
  color: var(--深陶土);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.預覽抬頭 h3 {
  margin: 5px 0 0;
  color: var(--深墨綠);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 30px;
}

.預覽抬頭 > span {
  padding: 7px 12px;
  border-radius: 999px;
  background: #f2e6dd;
  color: var(--深陶土);
  font-size: 12px;
  font-weight: 800;
}

.申請預覽 dl {
  margin: 0;
}

.收件內容 > p {
  margin: 24px 0 10px;
  color: var(--次文字);
}

.申請預覽 dl div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  padding: 18px 0;
  border-bottom: 1px solid var(--淡米);
}

.申請預覽 dt {
  color: var(--次文字);
  font-size: 13px;
}

.申請預覽 dd {
  margin: 0;
  color: var(--文字);
  font-weight: 650;
  white-space: pre-wrap;
}

.原型訊息 {
  margin-top: 28px;
  padding: 18px;
  border-radius: 12px;
  background: var(--墨綠);
  color: var(--紙白);
}

.原型訊息 p {
  margin: 3px 0 0;
  color: #c9d6d1;
  font-size: 13px;
}

.常見問題區 {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 80px;
}

.常見問題抬頭 {
  position: sticky;
  top: 120px;
  align-self: start;
}

.問題項目 {
  border-top: 1px solid var(--線條);
}

.問題項目:last-child {
  border-bottom: 1px solid var(--線條);
}

.問題項目 h3 {
  margin: 0;
}

.問題項目 button {
  display: grid;
  grid-template-columns: 44px 1fr 30px;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 80px;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: var(--文字);
  text-align: left;
  cursor: pointer;
}

.問題項目 button > span {
  color: var(--深陶土);
  font-size: 11px;
}

.問題項目 button strong {
  font-size: 17px;
}

.問題項目 button i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--線條);
  border-radius: 50%;
  font-style: normal;
  transition: background-color 160ms ease, color 160ms ease;
}

.問題項目 button:hover i,
.問題項目.已展開 button i {
  border-color: var(--墨綠);
  background: var(--墨綠);
  color: white;
}

.問題回答 p {
  max-width: 680px;
  margin: 0;
  padding: 0 48px 28px 62px;
  color: var(--次文字);
}

.結尾行動 {
  padding: 105px max(24px, calc((100vw - 920px) / 2));
  background: var(--墨綠);
  color: var(--紙白);
  text-align: center;
}

.結尾行動 .眉標 {
  color: var(--蜜黃);
}

.結尾行動 h2 {
  color: var(--紙白);
  font-size: clamp(38px, 5vw, 64px);
}

.結尾行動 > p:not(.眉標) {
  margin: 22px 0 34px;
  color: #c8d4cf;
  font-size: 17px;
}

.亮色按鈕 {
  background: var(--蜜黃);
  color: var(--深墨綠);
  box-shadow: none;
}

.亮色按鈕:hover {
  background: #f6d384;
}

footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 40px;
  align-items: end;
  padding: 50px max(24px, calc((100vw - var(--最大寬)) / 2));
  background: var(--深墨綠);
  color: #aebdb7;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 12px;
}

footer strong {
  color: var(--紙白);
  font-size: 15px;
}

footer p {
  margin: 3px 0;
}

footer > div:nth-child(2) {
  display: flex;
  gap: 14px;
}

footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--蜜黃);
  font-weight: 700;
}

@media (max-width: 980px) {
  .頂部導覽 {
    grid-template-columns: 1fr auto;
  }

  .頂部導覽 nav {
    display: none;
  }

  .首頁內容 {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 70px;
  }

  .流程焦點卡 {
    width: min(100%, 620px);
    transform: none;
  }

  .共創定位,
  .成果區,
  .投入區,
  .下一階段,
  .適合度區,
  .常見問題區 {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .下一階段前言,
  .成果敘述,
  .常見問題抬頭 {
    position: static;
  }

  .先確認清單 {
    grid-column: 1;
  }

  .週卡 {
    grid-template-columns: 66px 1fr;
  }

  .週成果 {
    grid-column: 2;
  }

  .申請抬頭 {
    grid-template-columns: 1fr 260px;
  }
}

@media (max-width: 720px) {
  html {
    scroll-padding-top: 66px;
  }

  body {
    line-height: 1.65;
  }

  .頂部導覽 {
    min-height: 64px;
    padding-inline: 18px;
  }

  .品牌標記 strong {
    font-size: 14px;
  }

  .導覽行動 {
    padding: 9px 12px;
    font-size: 12px;
  }

  .首頁內容,
  .狀態路徑,
  .題目篩選,
  .成果區,
  .邊界區,
  .下一階段,
  .申請區,
  .常見問題區 {
    width: min(calc(100% - 36px), var(--最大寬));
  }

  .首頁內容 {
    padding: 58px 0 72px;
  }

  .首頁文案 h1 {
    font-size: clamp(38px, 11vw, 53px);
    line-height: 1.25;
  }

  .首頁副標 {
    margin-top: 22px;
    font-size: 16px;
  }

  .首頁按鈕列,
  .首頁按鈕列 .主要按鈕,
  .首頁按鈕列 .文字按鈕 {
    width: 100%;
  }

  .首頁按鈕列 .文字按鈕 {
    justify-content: space-between;
  }

  .流程焦點卡 {
    border-radius: 24px;
  }

  .焦點節點 {
    grid-template-columns: 52px 1fr;
  }

  .節點編號 {
    width: 48px;
    height: 48px;
    font-size: 14px;
  }

  .流程連線 {
    margin-left: 24px;
  }

  .狀態路徑,
  .題目篩選,
  .成果區,
  .邊界區,
  .下一階段,
  .申請區,
  .常見問題區 {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .區塊標題列 h2,
  .定位主張 h2,
  .成果敘述 h2,
  .投入區 h2,
  .下一階段 h2,
  .適合度說明 h2,
  .申請抬頭 h2,
  .常見問題抬頭 h2 {
    font-size: 36px;
  }

  .三段路徑 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .三段路徑 article {
    padding: 24px 20px;
  }

  .三段路徑 .路徑強調 {
    transform: none;
  }

  .路徑箭頭 {
    height: 44px;
    transform: rotate(90deg);
  }

  .共創定位,
  .四週區,
  .投入區,
  .適合度區 {
    padding: 84px 18px;
  }

  .共創定位 {
    gap: 34px;
  }

  .題目範例 {
    padding: 0;
    border-left: 0;
  }

  .雙欄清單,
  .邊界網格,
  .表單雙欄 {
    grid-template-columns: 1fr;
  }

  .雙欄清單 article,
  .邊界網格 article {
    padding: 28px 22px;
  }

  .週卡 {
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 34px 0;
  }

  .週卡軸 span {
    width: 38px;
    height: 38px;
  }

  .週卡 h3 {
    font-size: 28px;
  }

  .週成果 {
    padding: 18px;
  }

  .檢視問題 {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 28px 22px;
  }

  .成果區 {
    overflow: visible;
  }

  .成果大字 {
    top: 240px;
  }

  .成果清單 li {
    grid-template-columns: 45px 1fr;
    gap: 12px;
  }

  .界線提醒 {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 22px;
  }

  .方向卡組 article {
    grid-template-columns: 46px 1fr;
    padding: 22px 18px;
  }

  .檢查卡,
  .申請表單,
  .申請預覽 {
    border-radius: 22px;
  }

  .申請抬頭 {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .申請抬頭 > .段落編號,
  .申請抬頭 > h2,
  .原型標籤 {
    grid-column: 1;
    grid-row: auto;
  }

  .表單送出列 {
    align-items: stretch;
    flex-direction: column;
  }

  .表單送出列 .主要按鈕 {
    width: 100%;
  }

  .申請預覽 dl div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .問題項目 button {
    grid-template-columns: 34px 1fr 28px;
    gap: 10px;
  }

  .問題回答 p {
    padding: 0 0 26px 44px;
  }

  .結尾行動 {
    padding: 84px 18px;
  }

  .結尾行動 h2 {
    font-size: 39px;
  }

  .結尾行動 .亮色按鈕 {
    width: 100%;
  }

  footer {
    grid-template-columns: 1fr;
    gap: 26px;
    align-items: start;
    padding: 42px 18px;
  }

  footer > div:nth-child(2) {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

:root {
  --墨綠: #1a2e1e;
  --深墨綠: #122116;
  --森林綠: #59784a;
  --陶土: #59784a;
  --深陶土: #36523a;
  --蜜黃: #9ab78a;
  --暖白: #f7f8f3;
  --紙白: #fffefb;
  --淡米: #e9f1e4;
  --線條: #d7e2d1;
  --文字: #1a2e1e;
  --次文字: #526354;
  --最大寬: 1180px;
  --大圓角: 28px;
  --中圓角: 16px;
  --陰影: 0 18px 48px rgb(26 46 30 / 8%);
}

body {
  background: var(--暖白);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

.頂部導覽 {
  min-height: 68px;
  border-bottom-color: rgb(26 46 30 / 12%);
  background: rgb(233 241 228 / 92%);
}

.品牌標記 span {
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 30%);
  background: var(--深墨綠);
  font-weight: 800;
}

.品牌標記 strong {
  font-size: 14px;
  letter-spacing: .04em;
}

.頂部導覽 nav {
  gap: 8px;
  padding: 5px;
  border: 1px solid rgb(26 46 30 / 10%);
  border-radius: 999px;
  background: rgb(250 252 248 / 58%);
}

.頂部導覽 nav a {
  padding: 7px 14px;
  border-radius: 999px;
}

.頂部導覽 nav a:hover {
  background: var(--紙白);
}

.導覽行動 {
  border: 0;
  background: var(--深墨綠);
  color: var(--紙白);
  box-shadow: 0 8px 24px rgb(26 46 30 / 14%);
}

.導覽行動:hover {
  background: var(--陶土);
}

.首頁區 {
  min-height: auto;
  border-bottom: 1px solid rgb(250 252 248 / 10%);
  background:
    radial-gradient(circle at 82% 12%, rgb(154 183 138 / 22%), transparent 26rem),
    linear-gradient(145deg, #1a2e1e 0%, #122116 100%);
  background-size: 64px 64px, 64px 64px, auto, auto;
}

.首頁區::before {
  display: none;
}

.首頁背景字 {
  right: clamp(-84px, -3vw, -18px);
  bottom: -24px;
  color: rgb(250 252 248 / 4%);
  font-size: clamp(120px, 17vw, 250px);
  line-height: .82;
}

.首頁內容 {
  grid-template-columns: minmax(0, 1.12fr) minmax(350px, .88fr);
  gap: clamp(44px, 6vw, 84px);
  min-height: min(780px, calc(100svh - 68px));
  padding: clamp(64px, 8vw, 104px) 0 72px;
}

.眉標,
.段落編號 {
  color: var(--深陶土);
  letter-spacing: .11em;
}

.首頁文案 .眉標 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 8px 12px;
  border: 1px solid rgb(154 183 138 / 34%);
  border-radius: 999px;
  background: rgb(250 252 248 / 7%);
}

.首頁文案 .眉標 span {
  color: var(--陶土);
  font-size: 8px;
}

.首頁文案 h1 {
  max-width: 760px;
  font-size: clamp(46px, 4.7vw, 66px);
  line-height: 1.16;
}

.首頁文案 h1 span {
  position: relative;
  color: var(--蜜黃);
}

.首頁文案 h1 span::after {
  position: absolute;
  right: 0;
  bottom: -.06em;
  left: 0;
  height: .13em;
  border-radius: 99px;
  background: var(--蜜黃);
  content: "";
  opacity: .75;
  transform: rotate(-1.3deg);
}

.首頁副標 {
  max-width: 650px;
  margin-top: 26px;
  color: #d7e2d3;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.82;
}

.首頁按鈕列 {
  margin-top: 30px;
}

.主要按鈕,
.亮色按鈕 {
  min-height: 54px;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgb(18 33 22 / 24%);
}

.首頁提醒 {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 3px solid var(--蜜黃);
}

.首頁承諾列 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 610px;
  margin: 32px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgb(250 252 248 / 16%);
}

.首頁承諾列 div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: baseline;
  padding-right: 14px;
}

.首頁承諾列 div + div {
  padding-left: 14px;
  border-left: 1px solid rgb(250 252 248 / 16%);
}

.首頁承諾列 dt {
  color: var(--陶土);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.首頁承諾列 dd {
  margin: 0;
  color: var(--次文字);
  font-size: 12px;
  font-weight: 700;
}

.流程焦點卡 {
  width: 100%;
  padding: 26px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgb(154 183 138 / 18%), transparent 16rem),
    linear-gradient(150deg, #29422d, #1a2e1e);
  box-shadow: 0 32px 80px rgb(8 18 10 / 28%);
  transform: none;
}

.流程焦點卡::after {
  right: -18px;
  bottom: -18px;
  width: 96px;
  height: 96px;
  border-color: rgb(154 183 138 / 42%);
}

.焦點卡抬頭 {
  padding-bottom: 16px;
}

.焦點卡大字 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 22px;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  color: var(--紙白);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 6vw, 86px);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
}

.焦點卡大字 i {
  color: var(--蜜黃);
  font-family: inherit;
  font-size: 30px;
  font-style: normal;
  letter-spacing: 0;
}

.焦點節點 {
  grid-template-columns: 50px 1fr;
  gap: 16px;
  padding: 22px 4px 10px;
}

.節點編號 {
  width: 46px;
  height: 46px;
}

.焦點節點 strong {
  font-size: clamp(18px, 2vw, 24px);
}

.流程連線 {
  margin: 2px 0 2px 26px;
  padding: 12px 0 12px 32px;
}

.流程焦點卡 > p {
  margin-top: 20px;
  padding-top: 18px;
}

.首頁配圖 {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 28px;
  background: #f4eee4;
  box-shadow: 0 32px 80px rgb(8 18 10 / 28%);
  isolation: isolate;
}

.首頁配圖::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(69 49 31 / 7%);
  content: "";
  pointer-events: none;
}

.首頁配圖 picture,
.首頁配圖 img {
  display: block;
  width: 100%;
}

.首頁配圖 img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}

.首頁配圖 figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  padding: 14px 16px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 14px 4px 14px 4px;
  background: rgb(48 40 32 / 84%);
  box-shadow: 0 12px 28px rgb(34 27 21 / 20%);
  color: #fbf7ef;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  backdrop-filter: blur(8px);
}

.狀態路徑,
.題目篩選,
.成果區,
.邊界區,
.下一階段,
.申請區,
.常見問題區 {
  padding-top: clamp(78px, 8vw, 112px);
  padding-bottom: clamp(78px, 8vw, 112px);
}

.狀態路徑 {
  display: grid;
  grid-template-columns: .76fr 1.24fr;
  gap: 64px;
  align-items: end;
}

.區塊標題列.窄版 {
  max-width: none;
  margin: 0;
}

.三段路徑 {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}

.三段路徑 article {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 4px 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--線條);
}

.三段路徑 article span {
  grid-row: 1 / 3;
  align-self: center;
}

.三段路徑 article h3,
.三段路徑 article p {
  margin: 0;
}

.三段路徑 .路徑強調 {
  border-radius: 16px;
  background: var(--紙白);
  box-shadow: var(--陰影);
  transform: none;
}

.路徑箭頭 {
  display: none;
}

.共創定位 {
  gap: 60px;
  background:
    radial-gradient(circle at 90% 15%, rgb(242 201 98 / 14%), transparent 24rem),
    var(--深墨綠);
}

.題目範例 {
  padding-left: 38px;
  border-color: rgb(242 201 98 / 52%);
}

.題目範例 li {
  border-color: rgb(255 255 255 / 14%);
  background: rgb(255 255 255 / 7%);
}

.雙欄清單 {
  gap: 18px;
}

.雙欄清單 article,
.邊界網格 article {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgb(16 45 38 / 11%);
  border-radius: 24px;
}

.適合卡 {
  background: var(--紙白);
  box-shadow: var(--陰影);
}

.不適合卡 {
  background: #eae2d5;
}

.四週區 {
  padding-top: clamp(84px, 9vw, 124px);
  padding-bottom: clamp(84px, 9vw, 124px);
  background:
    radial-gradient(circle at 14% 2%, rgb(242 201 98 / 15%), transparent 28rem),
    linear-gradient(150deg, #14382f, #0c2822);
}

.時間線 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 52px;
}

.週卡 {
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 26px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 20px;
  background: rgb(255 255 255 / 5%);
}

.週卡:first-child {
  grid-column: 1 / -1;
}

.週卡強調 {
  background: rgb(242 201 98 / 10%);
}

.週卡軸 i {
  display: none;
}

.週成果 {
  grid-column: 2;
  margin-top: 18px;
}

.檢視問題 {
  border-radius: 18px;
}

.成果區 {
  gap: 70px;
  background: var(--紙白);
}

.成果大字 {
  color: rgb(228 101 66 / 8%);
}

.成果清單 {
  border-top: 2px solid var(--深墨綠);
}

.成果清單 li {
  padding: 16px 0;
}

.邊界網格 {
  gap: 18px;
}

.邊界網格 article {
  background: var(--紙白);
}

.邊界網格 .不包含 {
  background: #ebe4d8;
}

.界線提醒 {
  border-radius: 16px;
}

.投入區 {
  gap: 64px;
  background:
    linear-gradient(120deg, rgb(242 201 98 / 20%), transparent 45%),
    var(--淡米);
}

.下一階段 {
  gap: 64px;
}

.方向卡組 {
  gap: 12px;
}

.方向卡組 article {
  border: 1px solid rgb(16 45 38 / 10%);
  border-radius: 16px;
  background: rgb(255 250 241 / 70%);
}

.先確認清單 {
  border-radius: 18px;
}

.適合度區 {
  gap: 64px;
  background:
    radial-gradient(circle at 82% 12%, rgb(242 201 98 / 20%), transparent 24rem),
    var(--深墨綠);
}

.檢查卡,
.申請表單,
.申請預覽 {
  border: 1px solid rgb(16 45 38 / 10%);
  box-shadow: var(--陰影);
}

.檢查卡 {
  background: var(--紙白);
}

.檢查選項 {
  min-height: 54px;
  padding: 13px 4px;
}

.檢查選項 > span {
  border-radius: 8px;
}

.申請區 {
  background:
    linear-gradient(rgb(16 45 38 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(16 45 38 / 3%) 1px, transparent 1px),
    var(--暖白);
  background-size: 56px 56px;
}

.原型標籤 {
  border-radius: 16px;
}

.申請表單 {
  border-radius: 24px;
  background: var(--紙白);
}

.欄位 input,
.欄位 select,
.欄位 textarea {
  border-radius: 11px;
  background: #fffdf8;
}

.問題列表 {
  border-top: 2px solid var(--深墨綠);
}

.問題項目 button i {
  border-radius: 10px;
}

.結尾行動 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgb(242 201 98 / 22%), transparent 24rem),
    var(--深墨綠);
}

.結尾行動::after {
  position: absolute;
  right: -20px;
  bottom: -100px;
  color: rgb(255 255 255 / 4%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(140px, 22vw, 320px);
  font-weight: 800;
  letter-spacing: -.08em;
  content: "04";
}

.結尾行動 > * {
  position: relative;
  z-index: 1;
}

footer {
  background: #0c180f;
}

/* 淺色陪跑版本：綠色負責識別與行動，暖白負責主要閱讀面。 */
.首頁區 {
  border-bottom-color: var(--線條);
  background:
    radial-gradient(circle at 88% 18%, rgb(154 183 138 / 17%), transparent 25rem),
    var(--紙白);
  background-size: auto;
}

.首頁背景字 {
  color: rgb(26 46 30 / 3.5%);
}

.首頁文案 h1 {
  color: var(--墨綠);
  font-weight: 700;
}

.首頁文案 h1 span {
  color: var(--森林綠);
}

.首頁副標 {
  color: var(--次文字);
}

.首頁文案 .眉標,
.首頁文案 .眉標 span {
  color: var(--森林綠);
}

.首頁文案 .眉標 {
  border-color: rgb(89 120 74 / 22%);
  background: var(--暖白);
}

.首頁文案 .文字按鈕 {
  color: var(--墨綠);
}

.首頁提醒,
.首頁承諾列 dd {
  color: var(--次文字);
}

.首頁提醒 strong {
  color: var(--墨綠);
}

.首頁承諾列 dt {
  color: var(--森林綠);
}

.首頁承諾列,
.首頁承諾列 div + div {
  border-color: var(--線條);
}

.焦點卡抬頭,
.焦點節點 small,
.流程連線 span,
.流程焦點卡 > p {
  color: #c9d8c4;
}

.流程焦點卡 .節點編號 {
  border-color: rgb(154 183 138 / 68%);
}

.流程焦點卡 .焦點節點.最終 .節點編號 {
  border-color: transparent;
}

.流程焦點卡 {
  border-color: rgb(250 252 248 / 14%);
  background: var(--墨綠);
  box-shadow: 0 24px 64px rgb(26 46 30 / 18%);
}

.眉標,
.段落編號,
.三段路徑 article span,
.週標記,
.清單標籤,
.成果清單 span,
.方向卡組 span,
.問題項目 button > span {
  color: var(--森林綠);
}

.共創定位 {
  background: #eef3ea;
}

.定位主張 h2,
.共創定位 .段落編號,
.題目範例 > p {
  color: var(--墨綠);
}

.定位主張 > p:last-child {
  color: var(--次文字);
}

.題目範例 {
  border-color: var(--線條);
}

.題目範例 li {
  border-color: #cbd9c5;
  background: var(--紙白);
  color: var(--森林綠);
}

.適合卡,
.邊界網格 article,
.方向卡組 article,
.檢查卡,
.申請表單,
.申請預覽 {
  background: var(--紙白);
}

.適合卡 {
  color: var(--文字);
}

.適合卡 li {
  border-top-color: var(--淡米);
  color: var(--次文字);
}

.適合卡 li::before {
  border-color: var(--森林綠);
}

.不適合卡,
.邊界網格 .不包含 {
  background: #f1f4ed;
}

.四週區 {
  background: #eef3ea;
  color: var(--文字);
}

.四週區 .段落編號,
.週標記 {
  color: var(--森林綠);
}

.深色版 h2 {
  color: var(--墨綠);
}

.深色版 > p:last-child,
.週目的,
.週卡內容 li,
.週成果 p {
  color: var(--次文字);
}

.時間線 {
  border-top: 0;
}

.週卡 {
  border-color: var(--線條);
  background: var(--紙白);
  color: var(--文字);
}

.週卡軸 span {
  border-color: #b9cbb1;
  color: var(--森林綠);
}

.週卡強調 {
  border-color: #9ab78a;
  background: var(--紙白);
  box-shadow: 0 12px 30px rgb(26 46 30 / 7%);
}

.週卡內容 li {
  border-color: var(--線條);
}

.週成果 {
  border-left-color: var(--森林綠);
  background: #f2f6ef;
}

.週成果 small {
  color: var(--森林綠);
}

.週成果 strong {
  color: var(--墨綠);
}

.成果大字 {
  color: rgb(89 120 74 / 9%);
}

.投入區 {
  background: #f1f4ed;
}

.授權提醒,
.先確認清單,
.原型標籤,
.預覽抬頭 > span {
  background: #dce8d6;
}

.原型標籤 p {
  color: var(--次文字);
}

.適合度區 {
  background: var(--暖白);
}

.適合度說明 h2,
.適合度說明 .段落編號 {
  color: var(--墨綠);
}

.適合度說明 > p,
.完成進度 > span {
  color: var(--次文字);
}

.完成進度 strong {
  color: var(--森林綠);
}

.完成進度 > div {
  background: #dce7d7;
}

.申請區 {
  background: #fafbf7;
}

.欄位 input,
.欄位 select,
.欄位 textarea {
  border-color: #aebfa6;
  background: #ffffff;
}

.結尾行動 {
  background: var(--墨綠);
}

.亮色按鈕 {
  background: var(--蜜黃);
  color: var(--深墨綠);
}

.亮色按鈕:hover {
  background: #b6cda9;
}

@media (max-width: 980px) {
  .首頁內容 {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .首頁文案 {
    max-width: 760px;
  }

  .流程焦點卡 {
    width: min(100%, 660px);
    justify-self: center;
    transform: none;
  }

  .首頁配圖 {
    width: min(100%, 660px);
    justify-self: center;
  }

  .狀態路徑 {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .三段路徑 {
    max-width: 760px;
  }
}

@media (max-width: 720px) {
  .頂部導覽 {
    min-height: 64px;
  }

  .品牌標記 strong {
    max-width: 120px;
    line-height: 1.25;
  }

  .導覽行動 {
    padding-inline: 12px;
  }

  .首頁內容 {
    padding-top: 46px;
  }

  .首頁文案 h1 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .首頁承諾列 {
    gap: 0;
  }

  .首頁承諾列 div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .首頁承諾列 dt {
    font-size: 20px;
  }

  .首頁承諾列 dd {
    font-size: 11px;
    line-height: 1.35;
  }

  .流程焦點卡 {
    padding: 22px;
    border-radius: 26px 8px 26px 8px;
  }

  .首頁配圖 {
    border-radius: 26px 8px 26px 8px;
  }

  .首頁配圖 figcaption {
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 12px 14px;
    font-size: 13px;
  }

  .焦點卡大字 {
    font-size: 56px;
  }

  .狀態路徑,
  .題目篩選,
  .成果區,
  .邊界區,
  .下一階段,
  .申請區,
  .常見問題區 {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .三段路徑 article {
    grid-template-columns: 64px 1fr;
    padding: 18px;
  }

  .時間線 {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }

  .週卡:first-child {
    grid-column: auto;
  }

  .週卡 {
    padding: 22px 18px;
  }

  .週卡 h3 {
    font-size: 26px;
  }

  .結尾行動::after {
    bottom: -50px;
  }
}

@media (max-width: 390px) {
  .品牌標記 strong {
    max-width: 90px;
    font-size: 12px;
  }

  .導覽行動 {
    font-size: 11px;
  }

  .首頁文案 h1 {
    font-size: 38px;
  }
}

/* A 版｜暖白雙欄陪跑版
 * 此檔是可移除的最上層主題：不改頁面結構，只調整色彩、留白與圖片呈現。
 */

:root {
  --墨綠: #35483b;
  --深墨綠: #2b3730;
  --森林綠: #61715f;
  --陶土: #b86546;
  --深陶土: #8d472f;
  --蜜黃: #d6aa62;
  --暖白: #f5efe6;
  --紙白: #fffaf3;
  --淡米: #eadfd2;
  --線條: #d9cbbb;
  --文字: #2f2a25;
  --次文字: #6d665f;
  --陰影: 0 18px 48px rgb(81 59 40 / 9%);
}

body {
  background: var(--暖白);
  color: var(--文字);
}

.頂部導覽 {
  border-bottom-color: rgb(79 62 48 / 12%);
  background: rgb(248 242 233 / 92%);
  backdrop-filter: blur(16px);
}

.品牌標記 span {
  border-color: rgb(255 255 255 / 36%);
  background: var(--墨綠);
}

.頂部導覽 nav {
  border-color: rgb(79 62 48 / 10%);
  background: rgb(255 250 243 / 62%);
}

.頂部導覽 nav a:hover {
  background: var(--紙白);
}

.導覽行動,
.主要按鈕 {
  background: var(--陶土);
  color: #fffdf9;
  box-shadow: 0 12px 28px rgb(141 71 47 / 18%);
}

.導覽行動:hover,
.主要按鈕:hover {
  background: var(--深陶土);
}

.首頁區 {
  border-bottom-color: var(--線條);
  background:
    radial-gradient(circle at 88% 12%, rgb(184 101 70 / 9%), transparent 25rem),
    linear-gradient(180deg, #faf5ed 0%, #f2e8dc 100%);
}

.首頁背景字 {
  color: rgb(141 71 47 / 4%);
}

.首頁內容 {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .82fr);
  gap: clamp(52px, 7vw, 96px);
  min-height: min(790px, calc(100svh - 68px));
  align-items: center;
}

.首頁文案 {
  max-width: 720px;
}

.首頁文案 .眉標 {
  border-color: rgb(184 101 70 / 22%);
  background: rgb(255 250 243 / 72%);
  color: var(--深陶土);
  box-shadow: none;
}

.首頁文案 .眉標 span {
  color: var(--陶土);
}

.首頁文案 h1,
.區塊標題列 h2,
.定位主張 h2,
.成果敘述 h2,
.投入區 h2,
.下一階段前言 h2,
.適合度說明 h2,
.申請抬頭 h2,
.常見問題抬頭 h2 {
  color: var(--文字);
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
}

.首頁文案 h1 {
  font-weight: 700;
  letter-spacing: -.045em;
}

.首頁文案 h1 span {
  color: var(--森林綠);
}

.首頁文案 h1 span::after {
  height: .1em;
  background: var(--陶土);
  opacity: .62;
}

.首頁副標,
.首頁提醒,
.首頁承諾列 dd {
  color: var(--次文字);
}

.首頁文案 .文字按鈕,
.文字按鈕 {
  color: var(--文字);
}

.首頁提醒 {
  border-left-color: var(--陶土);
}

.首頁提醒 strong {
  color: var(--文字);
}

.首頁承諾列,
.首頁承諾列 div + div {
  border-color: var(--線條);
}

.首頁承諾列 dt {
  color: var(--深陶土);
}

.首頁配圖 {
  width: min(100%, 510px);
  justify-self: end;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: auto;
}

.首頁配圖::after {
  display: none;
}

.首頁配圖 picture {
  overflow: hidden;
  border-radius: 220px 220px 26px 26px;
  box-shadow: 0 28px 64px rgb(81 59 40 / 16%);
}

.首頁配圖 img {
  aspect-ratio: 4 / 5;
  object-position: center;
}

.首頁配圖 figcaption {
  position: static;
  padding: 13px 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--次文字);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.65;
  text-align: center;
  backdrop-filter: none;
}

.眉標,
.段落編號,
.三段路徑 article span,
.週標記,
.清單標籤,
.成果清單 span,
.方向卡組 span,
.問題項目 button > span {
  color: var(--森林綠);
}

.狀態路徑,
.題目篩選,
.邊界區,
.常見問題區 {
  background: var(--暖白);
}

.共創定位 {
  background:
    radial-gradient(circle at 88% 15%, rgb(184 101 70 / 9%), transparent 24rem),
    #eadfd1;
}

.定位主張 h2,
.共創定位 .段落編號,
.題目範例 > p,
.深色版 h2 {
  color: var(--文字);
}

.定位主張 > p:last-child,
.深色版 > p:last-child,
.週目的,
.週卡內容 li,
.週成果 p {
  color: var(--次文字);
}

.題目範例 {
  border-color: rgb(184 101 70 / 42%);
}

.題目範例 li,
.適合卡,
.週卡,
.邊界網格 article,
.方向卡組 article,
.檢查卡,
.申請表單,
.申請預覽,
.資料同意 {
  border-color: var(--線條);
  background: var(--紙白);
}

.題目範例 li {
  color: var(--森林綠);
}

.不適合卡,
.邊界網格 .不包含 {
  background: #eee5da;
}

.四週區 {
  background:
    radial-gradient(circle at 12% 0%, rgb(214 170 98 / 13%), transparent 26rem),
    #efe4d7;
  color: var(--文字);
}

.時間線 {
  border-top-color: var(--線條);
}

.週卡 {
  box-shadow: 0 10px 28px rgb(81 59 40 / 5%);
}

.週卡強調 {
  border-color: rgb(184 101 70 / 46%);
  box-shadow: 0 16px 36px rgb(141 71 47 / 9%);
}

.週卡軸 span {
  border-color: rgb(97 113 95 / 42%);
  color: var(--森林綠);
}

.週卡內容 li {
  border-color: var(--線條);
}

.週成果 {
  border-left-color: var(--陶土);
  background: #f7eee4;
}

.週成果 small {
  color: var(--深陶土);
}

.週成果 strong {
  color: var(--文字);
}

.成果區 {
  background: var(--紙白);
}

.成果大字 {
  color: rgb(184 101 70 / 8%);
}

.成果清單,
.問題列表 {
  border-top-color: var(--文字);
}

.投入區 {
  background:
    linear-gradient(120deg, rgb(214 170 98 / 16%), transparent 45%),
    #e8ddd0;
}

.授權提醒,
.先確認清單,
.原型標籤,
.預覽抬頭 > span {
  background: #dfd1c1;
}

.資料同意 {
  background: #f3eade;
}

.下一階段 {
  background: #fbf6ef;
}

.方向卡組 article {
  border-color: var(--線條);
  background: rgb(255 250 243 / 78%);
}

.適合度區 {
  background:
    radial-gradient(circle at 86% 10%, rgb(184 101 70 / 10%), transparent 24rem),
    #eee3d6;
}

.適合度說明 h2,
.適合度說明 .段落編號 {
  color: var(--文字);
}

.完成進度 strong,
.檢查提示.已完成 {
  color: var(--深陶土);
}

.完成進度 > div {
  background: #d9cabb;
}

.完成進度 i {
  background: var(--陶土);
}

.申請區 {
  background:
    linear-gradient(rgb(115 91 70 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(115 91 70 / 3%) 1px, transparent 1px),
    #f8f2e9;
  background-size: 56px 56px;
}

.欄位 input,
.欄位 select,
.欄位 textarea {
  border-color: #bfae9c;
  background: #fffdf9;
}

.欄位 input:focus,
.欄位 select:focus,
.欄位 textarea:focus {
  border-color: var(--陶土);
  box-shadow: 0 0 0 4px rgb(184 101 70 / 12%);
}

.共創定位 {
  grid-template-columns: 1fr;
  align-items: start;
}

.定位主張 {
  max-width: 820px;
}

.成果路線卡組 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.成果路線卡 {
  display: flex;
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--線條);
  border-radius: 24px;
  background: rgb(255 253 249 / 88%);
  box-shadow: 0 18px 42px rgb(81 59 40 / 7%);
  flex-direction: column;
}

.成果路線卡 > span {
  color: var(--陶土);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}

.成果路線卡 h3 {
  margin: 12px 0 8px;
  color: var(--深墨綠);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 28px;
}

.成果路線卡 > p {
  margin: 0;
  color: var(--次文字);
  font-size: 14px;
}

.成果路線卡 ul {
  margin: 24px 0;
  padding: 0;
  list-style: none;
}

.成果路線卡 li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-top: 1px solid #e6ddd1;
  color: #4e554f;
  font-size: 13px;
}

.成果路線卡 li::before {
  position: absolute;
  top: 17px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--陶土);
  content: "";
}

.成果路線卡 > div {
  margin-top: auto;
  padding-top: 18px;
  border-top: 2px solid var(--陶土);
}

.成果路線卡 small,
.成果路線卡 strong {
  display: block;
}

.成果路線卡 small {
  margin-bottom: 7px;
  color: var(--深陶土);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.成果路線卡 strong {
  color: var(--墨綠);
  font-size: 13px;
  line-height: 1.65;
}

.教練區 {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: center;
  padding: 110px max(24px, calc((100vw - var(--最大寬)) / 2));
  background: var(--暖白);
}

.教練照片 {
  position: relative;
  width: min(100%, 430px);
  margin: 0;
  justify-self: center;
}

.教練照片::before {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgb(184 101 70 / 42%);
  border-radius: 210px 210px 32px 32px;
  content: "";
}

.教練照片 picture {
  display: block;
}

.教練照片 img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 210px 210px 32px 32px;
  object-fit: cover;
  object-position: 50% 45%;
  box-shadow: 0 24px 54px rgb(81 59 40 / 16%);
}

.教練照片 figcaption {
  position: absolute;
  right: -10px;
  bottom: 28px;
  display: grid;
  min-width: 176px;
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--墨綠);
  color: var(--紙白);
  box-shadow: 0 14px 30px rgb(36 45 40 / 20%);
}

.教練照片 figcaption span {
  color: var(--蜜黃);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.教練照片 figcaption strong {
  margin-top: 3px;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 20px;
}

.教練內容 {
  max-width: 760px;
}

.教練內容 h2 {
  margin: 0;
  color: var(--深墨綠);
  font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
}

.教練角色 {
  margin: 10px 0 0;
  color: var(--深陶土);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
}

.教練介紹 {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.教練介紹 p {
  margin: 0;
  color: var(--次文字);
  font-size: 16px;
  line-height: 1.9;
}

.教練能力 {
  display: flex;
  gap: 9px;
  margin: 28px 0 0;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;
}

.教練能力 li {
  padding: 8px 12px;
  border: 1px solid #d6c5b3;
  border-radius: 999px;
  background: var(--紙白);
  color: var(--森林綠);
  font-size: 12px;
  font-weight: 750;
}

.教練理念 {
  margin: 28px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--陶土);
  background: #eee3d6;
  color: var(--深墨綠);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 700;
  line-height: 1.6;
}

.申請前確認 {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 30px;
  max-width: 920px;
  margin: -24px auto 28px;
  padding: 20px 24px;
  border: 1px solid #d7c8b9;
  border-radius: 16px;
  background: #eee3d6;
}

.申請前確認 strong {
  align-self: center;
  color: var(--深墨綠);
}

.申請前確認 ul {
  display: flex;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  list-style: none;
}

.申請前確認 li {
  position: relative;
  padding-left: 18px;
  color: var(--次文字);
  font-size: 13px;
}

.申請前確認 li::before {
  position: absolute;
  top: .67em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--陶土);
  content: "";
}

.表單段落 {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  margin: 54px 0 26px;
  padding-top: 30px;
  border-top: 1px solid #dfd4c7;
}

.錯誤摘要 + .表單段落,
.申請表單 > .表單段落:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.表單段落 > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--墨綠);
  color: var(--紙白);
  font-size: 11px;
  font-weight: 800;
}

.表單段落 h3,
.表單段落 p {
  margin: 0;
}

.表單段落 h3 {
  color: var(--深墨綠);
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 23px;
}

.表單段落 p {
  margin-top: 3px;
  color: var(--次文字);
  font-size: 13px;
}

.選項欄位 {
  min-width: 0;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
}

.選項欄位 legend {
  margin-bottom: 10px;
  color: var(--墨綠);
  font-size: 14px;
  font-weight: 750;
}

.選項欄位 legend span {
  margin-left: 10px;
  color: var(--深陶土);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.單選卡組 > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.單選卡組精簡 > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.單選卡,
.多選選項 {
  position: relative;
  display: grid;
  min-height: 52px;
  border: 1px solid #c7b8a8;
  border-radius: 13px;
  background: #fffdf9;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.單選卡 {
  grid-template-columns: 22px 1fr;
  gap: 2px 10px;
  align-content: center;
  padding: 16px;
}

.單選卡 input,
.多選選項 input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.單選卡 > span,
.多選選項 > span {
  display: grid;
  grid-row: 1 / span 2;
  align-self: center;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1.5px solid #938475;
  background: white;
}

.單選卡 > span {
  border-radius: 50%;
}

.多選選項 > span {
  border-radius: 5px;
}

.單選卡 strong,
.多選選項 strong {
  color: var(--文字);
  font-size: 14px;
}

.單選卡 small {
  color: var(--次文字);
  font-size: 11px;
  line-height: 1.55;
}

.單選卡:has(input:checked),
.多選選項:has(input:checked) {
  border-color: var(--陶土);
  background: #f7ece4;
  box-shadow: 0 0 0 2px rgb(184 101 70 / 10%);
}

.單選卡:has(input:focus-visible),
.多選選項:has(input:focus-visible) {
  outline: 3px solid var(--蜜黃);
  outline-offset: 3px;
}

.單選卡 input:checked + span::after {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--陶土);
  content: "";
}

.多選方塊組 > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.多選選項 {
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
}

.多選選項 > span {
  grid-row: auto;
}

.多選選項 input:checked + span {
  border-color: var(--陶土);
  background: var(--陶土);
}

.多選選項 input:checked + span::after {
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  content: "";
  transform: rotate(42deg);
}

.選項欄位[aria-invalid="true"] > div {
  padding: 5px;
  border: 1px solid var(--錯誤);
  border-radius: 15px;
  background: #fffaf8;
}

.完成標準 {
  margin: -10px 0 24px;
  padding: 16px 18px;
  border-left: 4px solid var(--陶土);
  background: #f3e7dd;
}

.完成標準 small,
.完成標準 strong {
  display: block;
}

.完成標準 small {
  color: var(--深陶土);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.完成標準 strong {
  margin-top: 4px;
  color: var(--墨綠);
  font-size: 13px;
  line-height: 1.65;
}

.工具方案區 {
  display: grid;
  gap: 10px;
  margin: -10px 0 28px;
  padding: 16px;
  border-radius: 14px;
  background: #eee3d6;
}

.工具方案列 {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.工具方案列:has(input) {
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr);
}

.工具方案列 strong {
  color: var(--墨綠);
  font-size: 13px;
}

.工具方案列 input,
.工具方案列 select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #bfae9c;
  border-radius: 9px;
  background: #fffdf9;
  color: var(--文字);
}

.工具方案列 [aria-invalid="true"] {
  border-color: var(--錯誤);
  background: #fffaf8;
}

.結尾行動 {
  background:
    radial-gradient(circle at 82% 18%, rgb(184 101 70 / 28%), transparent 25rem),
    #312c27;
}

.結尾行動 h2 {
  color: var(--紙白);
}

.亮色按鈕 {
  background: var(--蜜黃);
  color: #2e2924;
  box-shadow: 0 12px 28px rgb(20 16 13 / 20%);
}

.亮色按鈕:hover {
  background: #e1bc7b;
}

footer {
  background: #211e1a;
}

@media (max-width: 980px) {
  .首頁內容 {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .首頁配圖 {
    width: min(100%, 590px);
    justify-self: center;
  }

  .成果路線卡組 {
    grid-template-columns: 1fr;
  }

  .教練區 {
    grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
    gap: 48px;
  }
}

@media (max-width: 720px) {
  .首頁內容 {
    padding-top: 50px;
  }

  .首頁文案 h1 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .首頁配圖 {
    border-radius: 0;
  }

  .首頁配圖 picture {
    border-radius: 170px 170px 20px 20px;
  }

  .首頁配圖 figcaption {
    position: static;
    padding: 12px 8px 0;
    font-size: 12px;
  }

  .教練區 {
    grid-template-columns: 1fr;
    gap: 52px;
    padding: 84px 18px;
  }

  .教練照片 {
    width: min(calc(100% - 28px), 390px);
  }

  .教練照片 figcaption {
    right: -6px;
    bottom: 22px;
  }

  .教練內容 h2 {
    font-size: 42px;
  }

  .申請前確認,
  .單選卡組 > div,
  .單選卡組精簡 > div,
  .多選方塊組 > div,
  .工具方案列,
  .工具方案列:has(input) {
    grid-template-columns: 1fr;
  }

  .申請前確認 {
    gap: 8px;
    margin-top: 0;
  }

  .申請前確認 ul {
    display: grid;
    gap: 7px;
  }

  .單選卡,
  .多選選項 {
    min-height: 48px;
  }

  .工具方案列 {
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d3c3b2;
  }
}

@media (max-width: 390px) {
  .首頁文案 h1 {
    font-size: 37px;
  }
}