:root {
  --rail-green: #a3b18a;
  --rail-green-dark: #7a8960;
  --rail-bg: #f3f5ef;
  --rail-ink: #313131;
  --rail-muted: #64706a;
  --rail-line: rgba(49, 49, 49, 0.14);
  --rail-white: #ffffff;
  --rail-shadow: 0 14px 34px rgba(49, 49, 49, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.rail-project {
  background: var(--rail-white);
  color: var(--rail-ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  margin: 0;
}
body.rail-project a { color: inherit; }
body.rail-project img { display: block; max-width: 100%; }
.rail-wrap { margin: 0 auto; max-width: 1180px; padding: 0 24px; }
.rail-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--rail-line);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 20;
}
.rail-header__inner { align-items: center; display: flex; justify-content: space-between; min-height: 74px; }
.rail-header__brand { align-items: center; display: inline-flex; gap: 12px; text-decoration: none; }
.rail-header__brand img:first-child { width: 34px; }
.rail-header__brand img:last-child { height: 25px; object-fit: contain; width: auto; }
.rail-header__link {
  color: var(--rail-green-dark);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}
.rail-header__link:hover { color: var(--rail-ink); }
.rail-hero { background: var(--rail-bg); padding: 74px 0 68px; }
.rail-hero__grid { align-items: center; display: grid; gap: 48px; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); }
.rail-kicker { color: var(--rail-green-dark); font-size: 0.84rem; font-weight: 800; letter-spacing: 0.12em; margin: 0 0 14px; }
.rail-title { font-size: clamp(2.15rem, 4.2vw, 4.25rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1.18; margin: 0; }
.rail-title--branch { font-size: clamp(2rem, 3.8vw, 3.75rem); }
.rail-lede { color: #48534e; font-size: 1.12rem; line-height: 1.9; margin: 25px 0 0; max-width: 640px; }
.rail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.rail-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  font-size: 0.98rem;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.rail-button:hover { transform: translateY(-1px); }
.rail-button--primary { background: var(--rail-green); color: #fff; }
.rail-button--primary:hover { background: var(--rail-green-dark); color: #fff; }
.rail-button--outline { background: #fff; border-color: var(--rail-green); color: #5d6b46; }
.rail-button--outline:hover { background: #e9eee0; color: #43502f; }
.rail-button--dark { background: var(--rail-ink); color: #fff; }
.rail-button--dark:hover { background: #191919; color: #fff; }
.rail-ticket { background: var(--rail-white); border-radius: 10px; box-shadow: var(--rail-shadow); overflow: hidden; }
.rail-ticket__head { align-items: center; background: #313131; color: #fff; display: flex; font-size: 0.84rem; font-weight: 700; justify-content: space-between; letter-spacing: 0.04em; padding: 13px 18px; }
.rail-ticket__head span:last-child { color: #e0e5d5; font-size: 0.74rem; }
.rail-brand-logo { display: inline-block !important; filter: brightness(0) invert(1); height: 16px; margin: -4px 5px 0 0; vertical-align: middle; width: auto; }
.rail-ticket__image { height: 208px; overflow: hidden; }
.rail-ticket__image img { height: 100%; object-fit: cover; width: 100%; }
.rail-ticket__body { padding: 23px 24px 20px; }
.rail-ticket__label { color: var(--rail-muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 7px; }
.rail-ticket__title { font-size: 1.35rem; font-weight: 700; line-height: 1.4; margin: 0; }
.rail-ticket__grid { display: grid; gap: 11px; grid-template-columns: repeat(3, 1fr); margin-top: 19px; }
.rail-ticket__grid div { border-right: 1px solid var(--rail-line); padding-right: 8px; }
.rail-ticket__grid div:last-child { border-right: 0; }
.rail-ticket__grid strong { display: block; font-size: 1.15rem; }
.rail-ticket__grid span { color: var(--rail-muted); display: block; font-size: 0.76rem; line-height: 1.45; margin-top: 4px; }
.rail-ticket__stub { border-top: 1px dashed var(--rail-green); color: #56634a; font-size: 0.84rem; line-height: 1.65; padding: 13px 24px 15px; }
.rail-section { padding: 82px 0; }
.rail-section--soft { background: var(--rail-bg); }
.rail-section--dark { background: var(--rail-ink); color: #fff; }
.rail-section__eyebrow { color: var(--rail-green-dark); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; margin: 0 0 11px; }
.rail-section--dark .rail-section__eyebrow { color: #dbe4cd; }
.rail-section__title { font-size: clamp(1.75rem, 3vw, 2.65rem); letter-spacing: -0.035em; line-height: 1.32; margin: 0; }
.rail-section__intro { color: #56625c; font-size: 1.03rem; line-height: 1.85; margin: 17px 0 0; max-width: 790px; }
.rail-section--dark .rail-section__intro { color: #e7e7e7; }
.rail-metrics { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); margin-top: 34px; }
.rail-metric { background: #fff; border: 1px solid rgba(163, 177, 138, 0.35); border-radius: 8px; min-height: 144px; padding: 23px 20px; }
.rail-metric strong { color: #5c6b45; display: block; font-size: clamp(1.35rem, 2.3vw, 2rem); margin-bottom: 8px; }
.rail-metric span { color: #5f6864; font-size: 0.88rem; line-height: 1.55; }
.rail-branch-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
.rail-branch-card { background: #fff; border-radius: 10px; box-shadow: var(--rail-shadow); overflow: hidden; }
.rail-branch-card__image { height: 235px; overflow: hidden; }
.rail-branch-card__image img { height: 100%; object-fit: cover; width: 100%; }
.rail-branch-card__body { padding: 26px; }
.rail-branch-card__name { font-size: 1.45rem; line-height: 1.35; margin: 0; }
.rail-branch-card__route { color: #64706a; font-size: 0.96rem; line-height: 1.7; margin: 10px 0 0; }
.rail-branch-card .rail-button { margin-top: 21px; }
.rail-step-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 35px; }
.rail-step { border: 1px solid var(--rail-line); border-radius: 8px; padding: 25px 23px; }
.rail-step__number { color: var(--rail-green-dark); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; }
.rail-step h3 { font-size: 1.16rem; margin: 11px 0 9px; }
.rail-step p { color: #5f6864; font-size: 0.94rem; line-height: 1.7; margin: 0; }
.rail-section--dark .rail-step { border-color: rgba(255, 255, 255, 0.22); }
.rail-section--dark .rail-step p { color: #e7e7e7; }
.rail-section--dark .rail-step__number { color: #dbe4cd; }
.rail-content-grid { display: grid; gap: 44px; grid-template-columns: 0.85fr 1.15fr; margin-top: 35px; }
.rail-route { border-left: 3px solid var(--rail-green); padding: 4px 0 4px 21px; }
.rail-route p { color: #505a55; font-size: 1.05rem; line-height: 1.9; margin: 0; }
.rail-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.rail-list li { border-bottom: 1px solid var(--rail-line); color: #505a55; line-height: 1.75; padding: 0 0 12px 25px; position: relative; }
.rail-list li::before { color: var(--rail-green-dark); content: "•"; font-size: 1.4rem; left: 5px; position: absolute; top: -2px; }
.rail-note { color: var(--rail-muted); font-size: 0.85rem; line-height: 1.7; margin: 23px 0 0; }
.rail-faq { border-top: 1px solid var(--rail-line); margin-top: 34px; }
.rail-faq details { border-bottom: 1px solid var(--rail-line); padding: 20px 0; }
.rail-faq summary { cursor: pointer; font-size: 1.06rem; font-weight: 700; line-height: 1.55; list-style: none; padding-right: 28px; position: relative; }
.rail-faq summary::-webkit-details-marker { display: none; }
.rail-faq summary::after { color: var(--rail-green-dark); content: "+"; font-size: 1.35rem; font-weight: 400; position: absolute; right: 4px; top: -2px; }
.rail-faq details[open] summary::after { content: "−"; }
.rail-faq p { color: #56615c; line-height: 1.8; margin: 12px 0 0; max-width: 850px; }
.rail-cta { align-items: center; background: var(--rail-bg); display: flex; gap: 25px; justify-content: space-between; margin-top: 42px; padding: 32px; }
.rail-cta h2 { font-size: 1.45rem; line-height: 1.45; margin: 0; }
.rail-cta p { color: #59635d; line-height: 1.7; margin: 7px 0 0; }
.rail-cta__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
.rail-source { border-top: 1px solid var(--rail-line); color: var(--rail-muted); font-size: 0.8rem; line-height: 1.7; margin: 48px 0 0; padding-top: 18px; }
.rail-source a { color: #5d6b46; }
.rail-footer { background: #313131; color: #dce2d2; font-size: 0.82rem; padding: 24px 0; }

@media (max-width: 820px) {
  .rail-wrap { padding: 0 19px; }
  .rail-header__inner { min-height: 65px; }
  .rail-header__brand img:last-child { height: 21px; }
  .rail-header__link { font-size: 0.84rem; }
  .rail-hero { padding: 51px 0 48px; }
  .rail-hero__grid, .rail-content-grid { gap: 28px; grid-template-columns: 1fr; }
  .rail-section { padding: 58px 0; }
  .rail-metrics, .rail-step-grid { grid-template-columns: repeat(2, 1fr); }
  .rail-branch-card__image { height: 205px; }
  .rail-cta { align-items: flex-start; flex-direction: column; padding: 26px; }
}
@media (max-width: 560px) {
  .rail-header__brand img:first-child { width: 28px; }
  .rail-header__brand img:last-child { height: 18px; }
  .rail-header__link { font-size: 0.77rem; }
  .rail-title { font-size: 2.2rem; }
  .rail-lede { font-size: 1rem; }
  .rail-actions, .rail-actions .rail-button { width: 100%; }
  .rail-ticket__image { height: 180px; }
  .rail-ticket__body { padding: 20px; }
  .rail-ticket__stub { padding-left: 20px; padding-right: 20px; }
  .rail-ticket__grid strong { font-size: 1rem; }
  .rail-metrics, .rail-branch-grid, .rail-step-grid { grid-template-columns: 1fr; }
  .rail-metric { min-height: auto; }
  .rail-section__intro { font-size: 0.97rem; }
  .rail-cta__actions, .rail-cta__actions .rail-button { width: 100%; }
}
