/*
  整理師招募說明頁：沿用首頁（home.css）的頁首、按鈕、頁尾與色票，
  只放這一頁專用的區塊。先為手機設計，≥720px 與 ≥1000px 再加欄數。
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 頁首：窄螢幕讓品牌在上、按鈕在下，不橫向溢出 */
.rc-bar {
  flex-wrap: wrap;
  gap: 8px 16px;
}
.rc-nav {
  display: none;
}
.rc-bar-links {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.rc-bar-links .hm-login {
  padding: 7px 14px;
}
@media (min-width: 900px) {
  /* 頁首比下方內容（1120px）寬：品牌在最左，導覽連結和按鈕一起靠最右 */
  .rc-bar {
    max-width: 1360px;
  }
  .rc-nav {
    display: flex;
    margin-left: auto;
  }
  .rc-bar-links {
    margin-left: 0;
  }
}

/* 首屏 */
.rc-hero {
  /* 飛鳥的滑入動畫起點在畫面右緣之外，窄螢幕會撐出橫向捲軸；用 clip 裁掉 */
  overflow-x: clip;
  background: var(--indigo);
  color: var(--on-indigo);
  padding: clamp(48px, 8vw, 104px) var(--hm-gutter);
}
.rc-wrap {
  max-width: var(--hm-max);
  margin: 0 auto;
}
.rc-hero :focus-visible {
  outline-color: var(--lemon);
}
.rc-hero h1 {
  margin: 0;
  max-width: 16em;
  font-size: clamp(1.9rem, 5.4vw, 3.1rem);
  line-height: 1.42;
  color: var(--surface);
}
/* 標題下方的兩隻飛鳥：沿用首頁 .hm-birds 的標記與濾鏡；飛鳥佔自己的一列、靠右，標題換幾行都不會碰到字 */
.rc-title {
  display: grid;
}
.rc-title .hm-birds {
  position: relative;
  grid-area: auto;
  align-self: auto;
  justify-self: end;
  margin: 6px 0 0;
  width: 170px;
  height: 134px;
}
@media (max-width: 899px) {
  .rc-title .hm-birds {
    width: 104px;
    height: 64px;
    margin-top: 4px;
  }
}

/* 標題在左、承諾與主要行動在右；窄螢幕直排 */
.rc-hero .rc-wrap {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: end;
}
.rc-promise {
  display: grid;
  gap: 22px;
  justify-items: start;
}
.rc-sub {
  max-width: 30em;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.95;
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .rc-hero .rc-wrap {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 88px);
  }
}

/* 區塊節奏：一般區塊 → 流程與準備靠近成一組 → 常見問題拉開；收費是決策高點，做成滿版淺灰帶 */
.rc {
  --rc-section-gap: clamp(56px, 8vw, 104px);
  /* 整頁白底都是細方格紙；首屏、收費灰帶、頁尾有自己的底色，會蓋住它 */
  background-image: linear-gradient(rgba(107, 79, 44, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 79, 44, 0.07) 1px, transparent 1px);
  background-size: 16px 16px;
}
.rc .rc-section {
  padding-top: var(--rc-section-gap);
}
/* 首屏下方第一個區塊：與首屏的間距縮短 */
.rc #value {
  padding-top: 72px;
}
.rc #faq {
  padding-top: calc(var(--rc-section-gap) * 1.15);
}
.rc #fees {
  /* 與上方區塊連成同一片方格紙：拿掉灰帶底色，上方間距縮短 */
  max-width: none;
  margin-top: 0;
  padding: 48px max(var(--hm-gutter), calc((100% - var(--hm-max)) / 2 + var(--hm-gutter))) var(--rc-section-gap);
}

/* 區塊 */
.rc-section h2 {
  max-width: 100%;
}
.rc-section :is(h3, summary, strong) {
  overflow-wrap: anywhere;
}

/* 價值卡片 */
.rc-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.rc-cards li {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.rc-cards h3 {
  font-size: 1.05rem;
  line-height: 1.5;
}
.rc-cards p {
  margin-top: 6px;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
@media (min-width: 720px) {
  .rc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 平台能提供的協助：三組——先是「不收費的事」暖杏色三欄大版面，其餘依用途分兩組列表 */
.rc-value .rc-group {
  margin-top: clamp(36px, 5vw, 60px);
}
.rc-value .rc-group-title {
  font-size: clamp(1.65rem, 2.64vw, 2.09rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--olive);
}
.rc-value .rc-cards {
  margin-top: 0;
}
.rc-value .rc-cards h3 {
  font-size: 1.265rem;
  color: var(--olive);
  letter-spacing: 0.04em;
  font-weight: 500;
}
/* 洽談、報價與付款的規則：手帖兩頁。左頁是目錄、右頁是手繪圖與說明，中間一條虛線裝訂線；直角、不用卡片（方格紙底畫在整頁背景上）。
   純 CSS 分頁，點選標題後右頁換圖並重播動畫，不需 JavaScript */
.rc-stage {
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--line-strong);
}
@media (min-width: 900px) {
  .rc-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: clamp(20px, 3vw, 40px);
    align-items: stretch;
  }
}
.rc-st-in {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rc-st-tabs {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
}
/* 滑動螢光筆：選到第幾個標題，就帶彈性滑到第幾個（標題高度固定 58px + 間距 6px） */
.rc-st-tabs::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58px;
  background: rgba(255, 245, 138, 0.6);
  border-bottom: 1px dashed var(--brick);
  z-index: 0;
  transition: transform 0.55s linear(0, 0.35 18%, 0.85 40%, 1.06 60%, 0.98 78%, 1);
}
.rc-stage:has(.rc-st-in:nth-of-type(2):checked) .rc-st-tabs::before {
  transform: translateY(64px);
}
.rc-stage:has(.rc-st-in:nth-of-type(3):checked) .rc-st-tabs::before {
  transform: translateY(128px);
}
.rc-st-tabs label {
  position: relative;
  z-index: 1;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px dashed var(--line-strong);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--olive);
}
.rc-st-n {
  flex: none;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--brick-deep);
}
.rc-st-panels {
  position: relative;
  min-height: 300px;
  padding-top: 6px;
}
@media (min-width: 900px) {
  .rc-st-panels {
    min-height: 560px;
    padding-left: clamp(20px, 3vw, 40px);
    border-left: 2px dashed var(--line-strong);
  }
}
.rc-st-panel {
  display: none;
}
.rc-st-in:nth-of-type(1):checked ~ .rc-st-panels .rc-st-panel:nth-child(1),
.rc-st-in:nth-of-type(2):checked ~ .rc-st-panels .rc-st-panel:nth-child(2),
.rc-st-in:nth-of-type(3):checked ~ .rc-st-panels .rc-st-panel:nth-child(3) {
  display: block;
}
.rc-st-in:nth-of-type(1):checked ~ .rc-st-tabs label:nth-child(1),
.rc-st-in:nth-of-type(2):checked ~ .rc-st-tabs label:nth-child(2),
.rc-st-in:nth-of-type(3):checked ~ .rc-st-tabs label:nth-child(3) {
  border-bottom-color: var(--brick);
}
.rc-st-in:checked ~ .rc-st-panels .rc-st-panel {
  animation: rcp-in 0.45s ease-out both;
}
/* 右頁的標題與說明置中，內容在右頁垂直置中（捲動模式的面板疊放規則在檔尾，會覆蓋成上對齊） */
.rc-st-panel {
  text-align: center;
}
.rc-st-panel p {
  margin-inline: auto;
}
.rc-st-in:checked ~ .rc-st-panels .rc-st-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
.rc-st-in:focus-visible ~ .rc-st-tabs label {
  outline: 2px solid var(--brick);
}
/* 圖貼在紙上：白底小紙片、微歪斜、角上一條檸檬黃膠帶 */
.rc-st-art {
  position: relative;
  max-width: 480px;
  margin: 0 auto 36px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 1px 2px 0 rgba(42, 55, 48, 0.18);
  transform: rotate(-0.8deg);
}
.rc-st-art::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 24px;
  width: 64px;
  height: 18px;
  background: rgba(255, 245, 138, 0.8);
  transform: rotate(-4deg);
}
.dg {
  display: block;
  width: 100%;
  height: auto;
}
.rc-st-panel:nth-child(1) .dg { color: var(--indigo); }
.rc-st-panel:nth-child(2) .dg { color: var(--brick-deep); }
.rc-st-panel:nth-child(3) .dg { color: var(--sage); }
.rc-st-panel h3 {
  font-size: 1.3rem;
  line-height: 1.5;
}
.dg .fee {
  fill: currentColor;
  fill-opacity: 0;
  transform-box: fill-box;
  transform-origin: left center;
  animation: rcv-grow 1.2s ease-out both;
}
.dg .seat {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: rcv-pop 0.5s ease-out both;
}
.dg .seat.s2 { animation-delay: 0.25s; }
.dg .seat.s3 { animation-delay: 0.5s; }
.dg .pool { animation: rcv-pulse 3s ease-in-out infinite; }
.dg .arrow {
  stroke-dasharray: 1;
  animation: rcv-draw 0.8s ease-out both;
}
.dg .shackle {
  transform-box: fill-box;
  transform-origin: right bottom;
  animation: rcv-unlock 2.4s ease-in-out 0.4s both;
}
@keyframes rcv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rcv-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rcv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rcv-unlock { 0%, 30% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-7px) rotate(-14deg); } }
@keyframes rcv-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .dg * { animation: none !important; }
}
/* 平台管理功能：插圖＋標題，左圖右字，用細線分隔（線稿色沿用首頁拱形卡的點色） */
.rc-value .rc-group-rest .rc-cards {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.rc-value .rc-group-rest .rc-cards li {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  /* 白底不貼橫線：上下各留 10px、左右各縮進 10px，像浮在紙上的一條 */
  background: linear-gradient(var(--surface), var(--surface)) center / calc(100% - 20px) calc(100% - 20px) no-repeat;
}
.rc-pic-art {
  width: 100%;
  height: auto;
  padding: 10px;
  background: var(--linen);
}
.rc-value .rc-group-rest .rc-cards h3 {
  font-size: 1.15rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--olive);
}
.rc-pic:nth-child(1) { color: var(--indigo); }
.rc-pic:nth-child(2) { color: var(--brick-deep); }
.rc-pic:nth-child(3) { color: var(--sage); }
.rc-pic:nth-child(4) { color: var(--oak-ink); }
@media (min-width: 720px) {
  .rc-value .rc-group-rest .rc-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 4vw, 56px);
  }
}

.rc-example {
  max-width: 34rem;
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.rc-example h3 {
  font-size: 1.1rem;
}
.rc-example table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 1.25rem;
}
.rc-example th,
.rc-example td {
  padding: 14px 8px;
  border-top: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.rc-example thead th {
  border-top: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  font-weight: 700;
}
.rc-example th:nth-child(2),
.rc-example td:nth-child(2) {
  text-align: right;
}
.rc-example td:nth-child(2) {
  font-weight: 700;
  color: var(--brick);
  white-space: nowrap;
}
.rc-small {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.8;
  color: #6e7671;
}
.rc-cta-row {
  margin-top: 32px;
}

/* 收費區：標題下是一列——計費範例卡靠左、申請按鈕靠版心右緣，兩者垂直置中；窄螢幕改成卡片在上、按鈕在下置中 */
.rc-fees-row {
  display: grid;
  gap: 24px;
  justify-items: center;
  margin-top: 28px;
}
.rc-fees-row .rc-example {
  width: 100%;
  margin-top: 0;
}
.rc-fees-row .rc-cta-row {
  margin: 0;
}
@media (min-width: 760px) {
  .rc-fees-row {
    grid-template-columns: minmax(0, 42rem);
    justify-content: center;
  }
}
/* 申請按鈕在「申請前先確認」最下方，置中，上方一條細線與前面分開 */
#prepare .rc-cta-end {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
  text-align: center;
}
.rc-example h3 {
  font-size: 1.12rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-weight: 500;
}
/* 整張計費表（含表頭）用宋體；宋體只有 500 一個字重，所以不加粗 */
.rc-example td,
.rc-example thead th {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.rc-example td:first-child {
  font-size: 1.4rem;
  color: var(--ink);
}
.rc-example td:nth-child(2) {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
}
/* 準備與適合的人：兩欄並排 */
.rc-duo {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 28px;
}
.rc-duo .rc-list {
  margin-top: 12px;
  grid-template-columns: 1fr;
}
.rc-list-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--oak-ink);
}
@media (min-width: 720px) {
  .rc-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  /* 左欄的身分證說明沉到欄底，和右欄最後一項對齊 */
  .rc-duo > div:first-child {
    display: flex;
    flex-direction: column;
  }
  .rc-duo > div:first-child .rc-sensitive {
    margin-top: auto;
  }
}
.rc-duo > div:first-child .rc-list {
  margin-bottom: 32px;
}

/* 條列 */
.rc-list {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.rc-list li {
  padding: 10px 16px 10px 40px;
  position: relative;
  border-radius: 0;
  background: var(--linen);
}
.rc-list li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 1.05em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sage);
}
@media (min-width: 720px) {
  .rc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.rc-sensitive {
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.8;
  border-left: 4px solid var(--oak);
  background: var(--apricot);
  border-radius: 0;
  color: var(--olive);
}
.rc-sensitive strong {
  display: block;
  margin-bottom: 2px;
}
.rc-sensitive a {
  color: var(--olive);
  font-weight: 700;
}

/* 常見問題：與首頁常見問題欄一致——直角、白底、宋體題目 1.08rem、磚紅箭頭、展開時左側磚紅粗線與淡入展開動畫 */
.rc-faq {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.rc-faq details {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.rc-faq details[open] {
  border-color: var(--line-strong);
  border-left: 4px solid var(--brick);
}
.rc-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.rc-faq summary::-webkit-details-marker {
  display: none;
}
.rc-faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin: -5px 2px 0 0;
  border-right: 1.5px solid var(--brick);
  border-bottom: 1.5px solid var(--brick);
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.rc-faq details[open] summary::after {
  margin-top: 5px;
  transform: rotate(225deg);
}
.rc-faq summary:hover {
  color: var(--brick-deep);
}
.rc-faq summary:active {
  background: var(--paper);
}
.rc-faq details[open] p {
  animation: hm-unfold 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.rc-faq details p {
  padding: 0 22px 20px;
  max-width: 40em;
  color: var(--ink-soft);
}

/* 頁尾：沒有山形，不需要首頁那麼大的上緣空間 */
.rc-foot {
  margin-top: clamp(56px, 8vw, 104px);
  padding-top: clamp(48px, 7vw, 72px);
}
@media (max-width: 640px) {
  .hm-foot-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .rc-foot .hm-cta {
    justify-self: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rc *,
  .rc *::before,
  .rc *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* 功能區動畫：紙張攤開。標題、每一列與手帖舞台進入畫面時由左向右擦開；用捲動時間軸，不支援時直接顯示，減少動態時不播 */
@keyframes rcm-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@supports (animation-timeline: view()) {
  .rc-value .rc-group-title { animation: rcm-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  .rc-value .rc-pic { animation: rcm-wipe linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
  .rc-value .rc-pic:nth-child(even) { animation-range: entry 14% entry 80%; }
  .rc-value .rc-stage { animation: rcm-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-value .rc-group-title, .rc-value .rc-pic, .rc-value .rc-stage { animation: none !important; }
}

/* 流程串連動畫：流程步驟依序升起、編號彈出，一條磚紅線隨捲動由上往下長出把它們串起來；計費範例與常見問題進入畫面時淡入或升起。
   捲動時間軸，不支援時直接顯示；減少動態時不播 */
@keyframes rcp-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes rcp-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: none; } }
@keyframes rcp-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rcp-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rc-faq details { animation: rcp-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .rc-fees-row .rc-example { animation: rcp-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}

/* 「申請前先確認」動畫：兩欄對向進場——「需要準備」從左滑入、「適合加入的人」從右滑入，在中間會合；標題升起。
   捲動時間軸，不支援時直接顯示；減少動態時不播 */
@keyframes rcq-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes rcq-in-left { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes rcq-in-right { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
/* 從右滑入的欄位在動畫起點會超出畫面右緣，窄螢幕會出現橫向捲軸；用 clip 裁掉超出的部分 */
#prepare {
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    #prepare .hm-head-block { animation: rcq-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 25%; }
    #prepare .rc-duo > div:first-child { animation: rcq-in-left linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    #prepare .rc-duo > div:last-child { animation: rcq-in-right linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}

/* 向下捲動，自動跳下一個選項（桌面版）：這一區釘在畫面上，捲動進度決定顯示第幾個分頁，標題欄螢光筆跟著滑動，
   舞台下緣一條磚紅進度線隨捲動填滿。窄螢幕、不支援捲動時間軸或減少動態時維持點選分頁（捲動模式下點標題不換頁） */
@keyframes rcs-p1 { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes rcs-p2 { 0%, 28% { opacity: 0; } 34%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes rcs-p3 { 0%, 62% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes rcs-hl { 0%, 31% { transform: translateY(0); } 37%, 64% { transform: translateY(64px); } 70%, 100% { transform: translateY(128px); } }
@keyframes rcs-b1 { 0%, 30% { border-bottom-color: var(--brick); } 34%, 100% { border-bottom-color: var(--line-strong); } }
@keyframes rcs-b2 { 0%, 30% { border-bottom-color: var(--line-strong); } 34%, 62% { border-bottom-color: var(--brick); } 66%, 100% { border-bottom-color: var(--line-strong); } }
@keyframes rcs-b3 { 0%, 62% { border-bottom-color: var(--line-strong); } 66%, 100% { border-bottom-color: var(--brick); } }
@keyframes rcs-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rc-group-lead { height: 270vh; view-timeline-name: --rcgrp; view-timeline-axis: block; }
    .rc-group-lead .rc-stage { position: sticky; top: 72px; }
    .rc-st-panels { height: 560px; min-height: 0; }
    .rc-st-in:checked ~ .rc-st-panels .rc-st-panel { display: block !important; position: absolute; inset: 0; opacity: 0; animation-timeline: --rcgrp; animation-range: cover 18% cover 82%; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; }
    .rc-st-in:checked ~ .rc-st-panels .rc-st-panel:nth-child(1) { animation-name: rcs-p1; }
    .rc-st-in:checked ~ .rc-st-panels .rc-st-panel:nth-child(2) { animation-name: rcs-p2; }
    .rc-st-in:checked ~ .rc-st-panels .rc-st-panel:nth-child(3) { animation-name: rcs-p3; }
    .rc-st-tabs::before { transition: none; animation: rcs-hl linear both; animation-timeline: --rcgrp; animation-range: cover 18% cover 82%; animation-duration: 1ms; }
    .rc-st-tabs label { animation-timeline: --rcgrp; animation-range: cover 18% cover 82%; animation-fill-mode: both; animation-timing-function: linear; animation-duration: 1ms; }
    .rc-st-tabs label:nth-child(1) { animation-name: rcs-b1; }
    .rc-st-tabs label:nth-child(2) { animation-name: rcs-b2; }
    .rc-st-tabs label:nth-child(3) { animation-name: rcs-b3; }
    .rc-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--brick); transform-origin: left; animation: rcs-bar linear both; animation-timeline: --rcgrp; animation-range: cover 18% cover 82%; animation-duration: 1ms; }
  }
}

/* 點頁首導覽連結時平滑捲動到對應區塊（速度由瀏覽器決定）；系統設定「減少動態」時直接跳轉 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}