@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Jost:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600&display=swap");

:root {
  --teal: #52a5a9;
  --teal-soft: #6fb2b8;
  --ink: #303030;
  --rule: #e8e8e8;
  --serif: "Bodoni 72", "Bodoni 72 Smallcaps", "Bodoni Moda", "Bodoni MT", Didot, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, Jost, "Helvetica Neue", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --zh: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #fff;
  font-family: var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.page-shell { width: min(100%, 1080px); margin-inline: auto; padding-inline: clamp(20px, 6vw, 84px); }
.detail-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
}
.detail-nav { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.detail-nav img { width: 58px; height: 58px; object-fit: contain; }
.back-link { color: var(--teal); font-size: 14px; letter-spacing: .02em; }
.detail-hero { padding-block: clamp(78px, 10vw, 132px) clamp(66px, 8vw, 104px); }
.detail-hero h1 {
  max-width: 900px;
  margin: 0;
  color: var(--teal);
  font-family: var(--serif);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.detail-hero .zh-title {
  margin: 24px 0 0;
  color: var(--teal);
  font-family: var(--zh);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.35;
}
.lead {
  max-width: 800px;
  margin: 44px 0 0;
  color: var(--ink);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.75;
  text-wrap: pretty;
}
.detail-section { padding-block: 78px; border-top: 1px solid var(--rule); }
.detail-section h2 {
  margin: 0 0 12px;
  color: var(--teal);
  font-family: var(--serif);
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 400;
  line-height: 1;
}
.detail-section > .subhead,
.detail-card h3,
.country h3 {
  margin: 0 0 20px;
  color: var(--teal-soft);
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 600;
  line-height: 1.35;
}
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.detail-card { min-width: 0; overflow: hidden; padding: 30px 0; border-top: 1px solid var(--rule); }
.detail-card p, .detail-card li, .detail-section > p, .country li {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.95;
  overflow-wrap: anywhere;
}
.detail-card h3, .country h3, .profile-meta { overflow-wrap: anywhere; word-break: break-word; }
.detail-card .zh, .detail-section .zh { margin-top: 24px; color: #656565; font-family: var(--zh); }
.detail-card ul, .country ul { margin: 0; padding-left: 1.2em; }
.detail-card li + li, .country li + li { margin-top: 7px; }
.result-highlight {
  display: block;
  margin: 3px 0 10px;
  color: var(--teal-soft);
  font-size: .84em;
  font-weight: 500;
  line-height: 1.55;
}
.country { padding: 42px 0; border-top: 1px solid var(--rule); }
.country-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 56px; }
.profile-meta { margin-top: 44px; color: var(--teal-soft); font-size: 18px; line-height: 1.9; }
.profile-meta .degrees {
  display: block;
  margin-top: 30px;
  color: var(--ink);
}
.profile-image {
  width: 100%;
  max-height: 760px;
  margin-top: 58px;
  object-fit: cover;
  object-position: center 42%;
}
.note { max-width: 820px; }
.note p { margin: 0 0 34px; font-family: var(--zh); font-size: 17px; line-height: 2.05; }
.note p.en { font-family: var(--sans); line-height: 1.85; }
.team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.team-person { padding: 24px 0; border-top: 1px solid var(--rule); }
.team-person strong { display: block; color: var(--teal-soft); font-size: 20px; }
.team-person span { display: block; margin-top: 9px; font-size: 17px; line-height: 1.75; }
.program-pillars {
  display: grid;
  gap: 12px;
  margin: 44px 0 56px;
  color: var(--teal-soft);
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
}
.program-pillars p,
.program-body { margin: 0; }
.program-body {
  max-width: 820px;
  font-size: 17px;
  line-height: 2;
}
.program-body + .program-body { margin-top: 38px; }
.program-body.zh { color: #656565; font-family: var(--zh); line-height: 2; }
.cohort-grid { margin-bottom: 48px; }
.bottom-back { padding-block: 64px 96px; }
.bottom-back a {
  width: min(100%, 760px);
  min-height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid var(--teal-soft);
  color: var(--teal-soft);
  font-size: 16px;
  text-align: center;
}
.bottom-back a:hover, .bottom-back a:focus-visible { color: #fff; background: var(--teal); outline: none; }

@media (max-width: 700px) {
  .detail-nav { min-height: 74px; }
  .detail-nav img { width: 48px; height: 48px; }
  .detail-hero h1 { font-size: clamp(46px, 13vw, 64px); }
  .detail-grid, .country-grid, .team-list { grid-template-columns: 1fr; gap: 0; }
  .detail-section { padding-block: 68px; }
  .detail-card p, .detail-card li, .detail-section > p, .country li { font-size: 17px; line-height: 2; }
  .profile-meta { font-size: 17px; line-height: 1.95; }
  .note p { margin-bottom: 38px; font-size: 17px; line-height: 2.05; }
  .profile-image { width: calc(100% + 40px); max-width: none; height: auto; max-height: none; margin-left: -20px; }
}

/* ---- CTA 4 完整課程架構 ---- */
.stage-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin-top: 54px;
}
.stage { min-width: 0; padding-top: 26px; border-top: 2px solid var(--teal-soft); }
.stage b { display: block; color: var(--teal); font-size: 15px; font-weight: 600; letter-spacing: .14em; }
.stage span { display: block; margin-top: 13px; font-size: 19px; line-height: 1.4; }
.stage em {
  display: block;
  margin-top: 10px;
  color: #656565;
  font-family: var(--zh);
  font-size: 16px;
  font-style: normal;
  line-height: 1.65;
}
.core-label {
  margin: 54px 0 0;
  color: var(--teal-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
}
/* 第 85 行的 `.detail-section > p { margin: 0 }` 特異性(0,1,1)高過 `.core-label`(0,1,0)，
   把設計上的 54px 上緣留白整個蓋掉，CORE AREAS 會緊貼中文段落。這裡補回來。
   桌機與手機都一樣，不是手機獨有的問題。 */
.detail-section > .core-label { margin-top: 54px; }

/* 獎學金金額：設計師要求用 logo 的 teal 標出來 */
.scholarship { color: var(--teal); font-weight: 500; }

/* 升學成果頁：.detail-section 的上緣線與第一個 .country 的上緣線會疊成兩條，
   中間只隔一段 padding。保留 .country 那條（與頁面其他分隔線同一套節奏）。 */
.detail-section.no-top-rule { padding-top: 0; border-top: 0; }

.core-areas, .major-list { margin: 10px 0 0; padding: 0; list-style: none; }
.core-areas li { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.core-areas b { display: block; font-size: 18px; font-weight: 600; line-height: 1.45; }
.core-areas span, .major-list span {
  display: block;
  margin-top: 9px;
  color: #656565;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.major-list li { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.major-list b {
  display: block;
  color: var(--teal);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.major-list i {
  display: block;
  margin-top: 7px;
  color: var(--teal-soft);
  font-family: var(--zh);
  font-size: 16px;
  font-style: normal;
}
.major-list span { margin-top: 12px; }
.intensive-list { margin: 10px 0 0; padding: 0; list-style: none; }
.intensive-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.intensive-list b { font-size: 18px; font-weight: 600; line-height: 1.45; }
.intensive-list em {
  color: #656565;
  font-family: var(--zh);
  font-size: 16px;
  font-style: normal;
  line-height: 1.6;
}
.closing-lines {
  margin: 0;
  color: var(--teal-soft);
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.14;
}
.closing-section { padding-block: clamp(84px, 10vw, 132px); border-top: 1px solid var(--rule); }

@media (max-width: 700px) {
  .stage-strip { grid-template-columns: 1fr; gap: 26px; }
  .core-areas span, .major-list span { line-height: 1.95; }
}
.detail-hero .program-body.zh { max-width: 800px; margin-top: 30px; color: #656565; font-family: var(--zh); font-size: 17px; line-height: 2.05; }