/**
 * 東華經濟2026新版網站｜Graduate Family 共用正文 CSS
 * page-graduate.css v1.19-test
 *
 * 日期：2026-09-05（UTC+8）
 *
 * Authoritative baseline：
 * - A00_NDHU_Economics_Design_Guide_v4.2
 * - Graduate Family CSS Architecture / Design Blueprint v1.0
 * - 博士班修業流程 IA / Content Blueprint v1.1
 * - 博士班修業流程 Wireframe / Page Structure v1.0
 * - page-header.css v1.8
 * - style.css v3.47-test（2026-09-05 使用者最新提供版本；Global Typography Source of Truth）
 * - Graduate Course Family IA / Component Blueprint v1.3
 * - A10_NDHU_Economics_Web_QA_Standard_v1.1
 *
 * 定位：
 * 1. 本檔是 Graduate family 的共用正文設計系統，不是博士班修業流程單頁 CSS。
 * 2. Page Header 仍由 page-header.css 管理。
 * 3. 課程／獎助學金／海外學習等功能性 layout 仍由各 page-specific CSS 管理。
 * 4. Graduate family 共用元件統一使用 .mygrad-* namespace。
 *
 * v1.18-test | 2026-09-05
 * - Structural typography cascade correction across the Graduate family.
 * - Graduate root now owns the default Body semantic role; generic p/li/dd
 *   elements inherit instead of receiving a competing leaf-level font-size.
 * - Component containers can therefore correctly pass Card Text / Meta /
 *   other semantic roles to their descendant text without selector patches.
 * - Removes the v1.17 Study Abroad leaf-text patch because the root cause is
 *   fixed globally; Scholarship details and similar nested lists now inherit
 *   their component semantic role correctly as well.
 * - Layout, colors, content, breakpoints, and non-typographic behavior unchanged.
 *
 * v1.16-test | 2026-09-05
 * - Typography compliance pass against global style.css v3.47-test.
 * - Graduate family no longer owns a competing numeric font-size scale.
 * - All user-visible Graduate typography maps to global semantic tokens
 *   (--myfont-section-title / subsection-title / feature-title / card-title /
 *    body-important / body / card-text / action / meta / eyebrow).
 * - Mobile/compact layouts no longer shrink semantic typography roles; only
 *   layout changes at breakpoints.
 * - Study Abroad info-grid labels/values use the same global card-text role.
 * - Decorative Font Awesome/map icon sizes and print-only physical sizing remain
 *   component/layout values rather than semantic text roles.
 *
 * v1.15-test | 2026-09-05
 * - Graduate family typography consolidation: shared body / compact / meta tokens.
 * - Study Abroad info-grid labels and values normalized to one explicit compact size.
 * - Scholarships card body/facts/details normalized to the same compact text role.
 * - Heading selectors migrated away from raw h2/h3 dependence for Rpage stability.
 * - Existing layout, color system, component ownership, and responsive states preserved.
 *
 * v1.13 | 2026-08-20
 * - Graduate Scholarships card h3 typography aligned with Undergraduate Scholarship family.
 * - .myscholar-card h3: 2rem / 700; other Graduate family headings/layout unchanged.
 *
 * v1.11 | 2026-08-18
 * - Graduate Study Abroad family 正式由 page-graduate.css 管理。
 * - 研究所海外學習頁不再載入 page-abroad.css。
 * - 原 page-abroad v1.4 map canvas / marker / plane / RWD 系統 scoped 移入 Graduate family。
 * - 自製 Hero 改為 Graduate Page Header；section title 改為 Graduate 01 + title + line。
 *
 * v1.10 | 2026-08-18
 * - Graduate Scholarships family 正式由 page-graduate.css 管理。
 * - 研究所獎助學金頁與 Undergraduate page-scholarship.css 分離。
 * - 保留 scholarship 元件結構，改為 Graduate navy / gold 視覺。
 * - Section headings 改用 Graduate 01 / 02 / ... + title + line。
 * - Quick Nav、cards、tags、facts、details、source links、resources 全面移除彩鉛多色系。
 *
 * v1.9 | 2026-08-18
 * - Graduate Course 課程地圖恢復 Timeline 修課進程。
 * - 碩一上／下、碩二上／下改為左右交錯 navy/gold timeline；Mobile 為單欄。
 * - Graduate 課表顯示節次固定為第 4–11 節；第 12–15 節不顯示。
 *
 * v1.8 | 2026-08-18
 * - 新增 Graduate Course family：credit summary、rules、schedule、curriculum map。
 * - 課表 Desktop weekly / Mobile daily 共用 data-driven JS。
 * - 新增 mygradcourse-* scoped components，不改既有 Ph.D. Degree Requirements 結構。
 *
 * v1.0 | 2026-08-17
 * - 建立 Graduate family navy + gold 正文 design tokens。
 * - 建立 intro、quick navigation、section、card、note、resource、facts。
 * - 建立 split comparison、flow、candidacy gate、checklist、steps。
 * - 建立 Desktop / Tablet / Mobile / Print 基礎。
 * - 以博士班修業流程作第一個正式使用頁。
 */

/* =========================================================
   01. Graduate family tokens / root
   ========================================================= */

.mygrad-page {
  --mygrad-navy: #2E4B70;
  --mygrad-navy-dark: #17324D;
  --mygrad-navy-deep: #10263C;
  --mygrad-gold: #AA8B5A;
  --mygrad-gold-bright: #D4AF37;
  --mygrad-gold-soft: #F3E7CB;
  --mygrad-white: #FFFFFF;
  --mygrad-paper: #F7F7F5;
  --mygrad-soft: #F3F6F8;
  --mygrad-soft-blue: #EEF2F5;
  --mygrad-text: #414141;
  --mygrad-muted: #66707A;
  --mygrad-line: #D7DEE6;
  --mygrad-line-dark: #B9C5D0;
  --mygrad-radius: 0.7rem;
  --mygrad-shadow: 0 0.5rem 1.6rem rgba(30, 52, 74, 0.08);
  --mygrad-content-max: 118rem;
  /* Typography aliases consume the global source of truth in style.css.
     They are aliases only; Graduate family does not define independent sizes. */
  --mygrad-type-section-title: var(--myfont-section-title);
  --mygrad-type-subsection-title: var(--myfont-subsection-title);
  --mygrad-type-feature-title: var(--myfont-feature-title);
  --mygrad-type-card-title: var(--myfont-card-title);
  --mygrad-type-body-important: var(--myfont-body-important);
  --mygrad-type-body: var(--myfont-body);
  --mygrad-type-compact: var(--myfont-card-text);
  --mygrad-type-action: var(--myfont-action);
  --mygrad-type-meta: var(--myfont-meta);
  --mygrad-type-eyebrow: var(--myfont-eyebrow);

  width: min(100%, var(--mygrad-content-max));
  margin: 0 auto;
  color: var(--mygrad-text);
  font-family: "Noto Sans TC", "Noto Sans", sans-serif;
  font-size: var(--mygrad-type-body);
  line-height: 1.85;
}

.mygrad-page *,
.mygrad-page *::before,
.mygrad-page *::after {
  box-sizing: border-box;
}

.mygrad-page p,
.mygrad-page ul,
.mygrad-page ol,
.mygrad-page dl {
  margin-top: 0;
}

.mygrad-page a {
  overflow-wrap: anywhere;
}

.mygrad-page strong {
  color: var(--mygrad-navy-dark);
}


/* =========================================================
   02. Inner content / intro
   ========================================================= */

.mygrad-inner {
  width: 100%;
  padding: 0 clamp(1.2rem, 2.5vw, 3rem) 3.5rem;
}

.mygrad-intro {
  margin: 0 0 1.8rem;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(90deg, rgba(238,242,245,0.9), #FFFFFF 72%);
  border-left: 0.42rem solid var(--mygrad-gold);
}

.mygrad-intro p {
  margin: 0;
}

.mygrad-intro p + p {
  margin-top: 0.8rem;
}

/* =========================================================
   03. Quick navigation
   ========================================================= */

.mygrad-quicknav-wrap {
  margin: 0 0 3.2rem;
}

.mygrad-quicknav-hint {
  display: none;
  margin: 0 0 0.6rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  text-align: center;
}

.mygrad-quicknav-hint i {
  margin-right: 0.45rem;
  color: var(--mygrad-gold);
}

.mygrad-quicknav {
  width: 100%;
}

.mygrad-quicknav-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.mygrad-quicknav-link {
  display: inline-flex;
  align-items: center;
  min-height: 4.2rem;
  padding: 0.7rem 1.05rem;
  color: var(--mygrad-navy-dark);
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line-dark);
  border-radius: 999px;
  font-size: var(--myfont-action);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.mygrad-quicknav-link:hover,
.mygrad-quicknav-link:focus {
  color: #FFFFFF;
  background: var(--mygrad-navy);
  border-color: var(--mygrad-navy);
  text-decoration: none;
}

.mygrad-quicknav-link:focus-visible {
  outline: 0.3rem solid rgba(212, 175, 55, 0.38);
  outline-offset: 0.2rem;
}

.mygrad-quicknav-index {
  display: inline-grid;
  min-width: 2.2rem;
  min-height: 2.2rem;
  margin-right: 0.55rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--mygrad-navy);
  border-radius: 50%;
  font-size: var(--myfont-eyebrow);
  line-height: 1;
}

.mygrad-quicknav-link:hover .mygrad-quicknav-index,
.mygrad-quicknav-link:focus .mygrad-quicknav-index {
  color: var(--mygrad-navy-deep);
  background: var(--mygrad-gold-bright);
}

/* =========================================================
   04. Section structure
   ========================================================= */

.mygrad-section {
  scroll-margin-top: 2rem;
  margin-top: clamp(4.2rem, 6vw, 6.8rem);
}

.mygrad-section:first-of-type {
  margin-top: 0;
}

.mygrad-section-head {
  display: grid;
  grid-template-columns: auto auto minmax(3rem, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.8rem;
}

.mygrad-section-index {
  display: inline-grid;
  min-width: 3.4rem;
  min-height: 3.4rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--mygrad-navy);
  border-radius: 50%;
  font-size: var(--myfont-eyebrow);
  font-weight: 800;
  line-height: 1;
}

.mygrad-section-title {
  margin: 0;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-section-title);
  font-weight: 800;
  line-height: 1.3;
}

.mygrad-section-line {
  height: 0.16rem;
  background:
    linear-gradient(
      90deg,
      var(--mygrad-gold) 0,
      var(--mygrad-gold) 12rem,
      var(--mygrad-line) 12rem,
      var(--mygrad-line) 100%
    );
}

.mygrad-section-desc {
  margin: 0 0 1.8rem 4.4rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-body);
  line-height: 1.7;
}

.mygrad-section-footer {
  margin-top: 2rem;
  text-align: right;
}

.mygrad-backnav {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--mygrad-navy);
  font-size: var(--myfont-action);
  font-weight: 700;
  text-decoration: none;
}

.mygrad-backnav:hover,
.mygrad-backnav:focus {
  color: var(--mygrad-gold);
  text-decoration: none;
}

/* =========================================================
   05. Cards / facts
   ========================================================= */

.mygrad-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.mygrad-card {
  min-width: 0;
  padding: 1.6rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-top: 0.35rem solid var(--mygrad-navy);
  border-radius: var(--mygrad-radius);
  box-shadow: var(--mygrad-shadow);
}

.mygrad-card-emphasis {
  border-top-color: var(--mygrad-gold);
}

.mygrad-card-title {
  margin: 0 0 0.8rem;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-card-title);
  font-weight: 800;
  line-height: 1.45;
}

.mygrad-card-title i {
  margin-right: 0.45rem;
  color: var(--mygrad-gold);
}

.mygrad-card p:last-child,
.mygrad-card ul:last-child,
.mygrad-card ol:last-child {
  margin-bottom: 0;
}

.mygrad-facts {
  margin: 0;
}

.mygrad-facts-row {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 2fr);
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 0.1rem dashed var(--mygrad-line);
}

.mygrad-facts-row:last-child {
  border-bottom: 0;
}

.mygrad-facts dt,
.mygrad-facts dd {
  margin: 0;
}

.mygrad-facts dt {
  color: var(--mygrad-navy);
  font-weight: 800;
}

.mygrad-list {
  margin: 0;
  padding-left: 1.4em;
}

.mygrad-list li {
  margin-bottom: 0.45em;
}

.mygrad-list li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   06. Notes / labels
   ========================================================= */

.mygrad-note {
  margin: 1.6rem 0 0;
  padding: 1.25rem 1.45rem;
  background: var(--mygrad-soft);
  border-left: 0.35rem solid var(--mygrad-line-dark);
}

.mygrad-note-rule {
  background: #F1F5F8;
  border-left-color: var(--mygrad-navy);
}

.mygrad-note-planning {
  background: #FBF8EF;
  border-left-color: var(--mygrad-gold);
}

.mygrad-note-admin {
  background: #F6F7F8;
  border-left-color: #8796A5;
}

.mygrad-note-title {
  margin: 0 0 0.45rem;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-body-important);
  font-weight: 800;
}

.mygrad-note p:last-child,
.mygrad-note ul:last-child {
  margin-bottom: 0;
}

.mygrad-label {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.18rem 0.55rem;
  color: var(--mygrad-navy-dark);
  background: var(--mygrad-gold-soft);
  border-radius: 999px;
  font-size: var(--myfont-eyebrow);
  font-weight: 800;
  line-height: 1.4;
}

/* =========================================================
   07. Resources
   ========================================================= */

.mygrad-resource-list {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.mygrad-resource-link {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  color: var(--mygrad-navy-dark);
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-radius: 0.55rem;
  font-weight: 700;
  line-height: 1.55;
  text-decoration: none;
}

.mygrad-resource-link:hover,
.mygrad-resource-link:focus {
  color: var(--mygrad-navy-deep);
  background: var(--mygrad-soft-blue);
  border-color: var(--mygrad-gold);
  text-decoration: none;
}

.mygrad-resource-icon {
  flex: 0 0 auto;
  width: 2.1rem;
  color: var(--mygrad-gold);
  text-align: center;
}

.mygrad-resource-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  font-weight: 500;
}

/* =========================================================
   08. Overview flow
   ========================================================= */

.mygrad-flow {
  display: grid;
  gap: 0;
  max-width: 88rem;
  margin: 0 auto;
}

.mygrad-flow-step {
  position: relative;
  padding: 1.1rem 1.3rem;
  color: var(--mygrad-navy-dark);
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-left: 0.42rem solid var(--mygrad-navy);
  border-radius: 0.55rem;
  box-shadow: 0 0.35rem 1rem rgba(30,52,74,0.055);
  font-weight: 800;
  text-align: center;
}

.mygrad-flow-step + .mygrad-flow-step,
.mygrad-flow-branch + .mygrad-flow-step,
.mygrad-flow-gate + .mygrad-flow-step {
  margin-top: 2.5rem;
}

.mygrad-flow-step + .mygrad-flow-step::before,
.mygrad-flow-branch + .mygrad-flow-step::before,
.mygrad-flow-gate + .mygrad-flow-step::before {
  content: "\f063";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  z-index: 3;
  width: 2.6rem;
  height: 2.2rem;
  transform: translateX(-50%);
  color: var(--mygrad-gold);
  background: transparent;
  font-family: FontAwesome;
  font-size: 2rem;
  font-weight: normal;
  line-height: 2.2rem;
  text-align: center;
}

.mygrad-flow-branch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.5rem;
}

.mygrad-flow-branch-item {
  position: relative;
  padding: 1.1rem;
  color: var(--mygrad-navy-dark);
  background: var(--mygrad-soft);
  border: 0.1rem solid var(--mygrad-line);
  border-left: 0.42rem solid var(--mygrad-navy);
  border-radius: 0.55rem;
  font-weight: 800;
  text-align: center;
}

.mygrad-flow-branch::before {
  content: "\f063";
  grid-column: 1 / -1;
  justify-self: center;
  z-index: 3;
  width: 2.6rem;
  height: 2.2rem;
  margin-top: -2.7rem;
  margin-bottom: 0.15rem;
  color: var(--mygrad-gold);
  background: transparent;
  font-family: FontAwesome;
  font-size: 2rem;
  font-weight: normal;
  line-height: 2.2rem;
  text-align: center;
}

.mygrad-flow-gate {
  position: relative;
  margin-top: 3rem;
  padding: 1.3rem;
  background: var(--mygrad-soft);
  border: 0.1rem solid var(--mygrad-line);
  border-left: 0.42rem solid var(--mygrad-navy);
  border-radius: 0.6rem;
  text-align: center;
}

.mygrad-flow-gate::before {
  content: "\f063";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  z-index: 3;
  width: 2.6rem;
  height: 2.2rem;
  transform: translateX(-50%);
  color: var(--mygrad-gold);
  background: transparent;
  font-family: FontAwesome;
  font-size: 2rem;
  font-weight: normal;
  line-height: 2.2rem;
  text-align: center;
}

/* =========================================================
   09. Deadline list
   ========================================================= */

.mygrad-deadlines {
  display: grid;
  gap: 0.8rem;
}

.mygrad-deadline {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 2fr);
  overflow: hidden;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-radius: 0.55rem;
}

.mygrad-deadline-time {
  display: flex;
  align-items: center;
  padding: 0.95rem 1.1rem;
  color: #FFFFFF;
  background: var(--mygrad-navy);
  font-weight: 800;
}

.mygrad-deadline-body {
  padding: 0.95rem 1.1rem;
}

.mygrad-deadline-body p {
  margin: 0;
}

.mygrad-deadline-body p + p {
  margin-top: 0.35rem;
}

.mygrad-deadline-critical {
  border-left: 0.52rem solid var(--mygrad-gold-bright);
  box-shadow: 0 0.45rem 1.2rem rgba(170,139,90,0.10);
}

.mygrad-deadline-critical .mygrad-deadline-time {
  background: linear-gradient(135deg, var(--mygrad-navy-deep), var(--mygrad-navy));
  color: #FFFFFF;
  font-size: var(--myfont-card-title);
  letter-spacing: 0.02em;
}

.mygrad-deadline-critical .mygrad-deadline-body {
  background: #FFFDF8;
}

/* =========================================================
   10. Split comparison
   ========================================================= */

.mygrad-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.mygrad-split-item {
  min-width: 0;
  padding: 1.7rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-top: 0.42rem solid var(--mygrad-navy);
  border-radius: var(--mygrad-radius);
  box-shadow: var(--mygrad-shadow);
}

.mygrad-split-item:nth-child(2) {
  border-top-color: var(--mygrad-gold);
}

.mygrad-split-title {
  margin: 0 0 1rem;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-feature-title);
  font-weight: 800;
  line-height: 1.4;
}

.mygrad-split-title span {
  color: var(--mygrad-gold);
}

/* =========================================================
   11. Candidacy gate
   ========================================================= */

.mygrad-candidacy {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 0.95fr);
  gap: 1.2rem;
  align-items: stretch;
}

.mygrad-candidacy-card {
  padding: 1.6rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-radius: var(--mygrad-radius);
  box-shadow: var(--mygrad-shadow);
}

.mygrad-candidacy-card [role="heading"][aria-level="3"] {
  margin: 0 0 1rem;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-card-title);
  font-weight: 800;
}

.mygrad-candidacy-options {
  display: grid;
  gap: 0.8rem;
}

.mygrad-candidacy-option {
  padding: 0.9rem 1rem;
  background: var(--mygrad-soft);
  border-left: 0.32rem solid var(--mygrad-navy);
}

.mygrad-candidacy-plus {
  display: grid;
  place-items: center;
  min-width: 4.8rem;
  color: var(--mygrad-gold);
  font-size: 3.2rem;
  font-weight: 800;
}

.mygrad-candidacy-result {
  margin-top: 1.3rem;
  padding: 1.05rem 1.2rem;
  color: #FFFFFF;
  background: var(--mygrad-navy-deep);
  border-bottom: 0.28rem solid var(--mygrad-gold-bright);
  border-radius: 0.55rem;
  font-size: var(--myfont-feature-title);
  font-weight: 800;
  text-align: center;
}

/* =========================================================
   12. Checklist
   ========================================================= */

.mygrad-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.mygrad-checklist-group {
  padding: 1.5rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-radius: var(--mygrad-radius);
  box-shadow: var(--mygrad-shadow);
}

.mygrad-checklist-group [role="heading"][aria-level="3"] {
  margin: 0 0 1rem;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-card-title);
  font-weight: 800;
}

.mygrad-checklist-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mygrad-checklist-item {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 2.3rem;
}

.mygrad-checklist-item::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0.08em;
  color: var(--mygrad-gold);
  font-family: FontAwesome;
  font-weight: normal;
}

.mygrad-checklist-item:last-child {
  margin-bottom: 0;
}

/* =========================================================
   13. Four-step degree flow
   ========================================================= */

.mygrad-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}

.mygrad-step {
  position: relative;
  min-width: 0;
  padding: 1.4rem 1.15rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-radius: var(--mygrad-radius);
  box-shadow: var(--mygrad-shadow);
}

.mygrad-step::after {
  content: "\f105";
  position: absolute;
  top: 50%;
  left: calc(100% + 0.25rem);
  z-index: 2;
  transform: translateY(-50%);
  color: var(--mygrad-gold);
  font-family: FontAwesome;
  font-size: 2.2rem;
}

.mygrad-step:last-child::after {
  display: none;
}

.mygrad-step-number {
  display: inline-grid;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.75rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--mygrad-navy);
  border-radius: 50%;
  font-size: var(--myfont-eyebrow);
  font-weight: 800;
}

.mygrad-step [role="heading"][aria-level="3"] {
  margin: 0 0 0.7rem;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-card-title);
  font-weight: 800;
}

.mygrad-step p {
  margin-bottom: 0.7rem;
}

/* =========================================================
   14. Resource summary
   ========================================================= */

.mygrad-resource-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.mygrad-resource-panel {
  padding: 1.5rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-radius: var(--mygrad-radius);
}

.mygrad-resource-panel [role="heading"][aria-level="3"] {
  margin: 0 0 0.9rem;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-card-title);
  font-weight: 800;
}

.mygrad-resource-panel-full {
  grid-column: 1 / -1;
}

/* =========================================================
   14A. Regulation source / fixed schedule / study duration
   ========================================================= */

.mygrad-source {
  margin: 0.8rem 0 1.5rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  line-height: 1.7;
}

.mygrad-deadline-group {
  margin-bottom: 2.4rem;
}

.mygrad-deadline-subtitle {
  margin-top: 2.5rem;
}

.mygrad-schedule-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  background: var(--mygrad-soft);
  border: 0.1rem solid var(--mygrad-line);
  border-left: 0.35rem solid var(--mygrad-gold);
  border-radius: 0.55rem;
  white-space: nowrap;
}

.mygrad-schedule-part {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}

.mygrad-schedule-label {
  color: var(--mygrad-navy-dark);
  font-weight: 800;
}

.mygrad-schedule-divider {
  flex: 0 0 auto;
  color: var(--mygrad-gold);
  font-weight: 800;
}

.mygrad-duration {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin: 1.8rem 0 1.2rem;
  padding: 1.1rem 1.3rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-left: 0.35rem solid var(--mygrad-navy);
  border-radius: 0.55rem;
}

.mygrad-duration-label {
  color: var(--mygrad-navy-dark);
  font-weight: 800;
}

.mygrad-duration-value {
  color: var(--mygrad-gold);
  font-size: var(--myfont-feature-title);
  font-weight: 800;
}



/* =========================================================
   14B. Unified statutory time-information hierarchy
   ========================================================= */

.mygrad-timebox {
  font-size: var(--myfont-body);
  line-height: 1.75;
}

.mygrad-timebox .mygrad-schedule-label,
.mygrad-timebox .mygrad-duration-label,
.mygrad-timebox .mygrad-note-title {
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-body-important);
  font-weight: 800;
}

.mygrad-timebox .mygrad-duration-value {
  font-size: var(--myfont-feature-title);
  font-weight: 800;
}

.mygrad-timebox-extension {
  margin-top: 1.2rem;
  padding: 1.15rem 1.3rem;
  background: var(--mygrad-soft);
  border: 0.1rem solid var(--mygrad-line);
  border-left: 0.35rem solid var(--mygrad-navy);
  border-radius: 0.55rem;
}

.mygrad-timebox-extension p {
  margin: 0.25rem 0;
}

.mygrad-time-source {
  margin: 0.55rem 0 1.6rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  line-height: 1.65;
}

.mygrad-time-source .mylink {
  font-size: inherit;
}


/* =========================================================
   14C. Live Rpage cascade recovery
   來源：combine-zh-tw.css
   - .meditor h2 { font-size:1.5em; ... }
   - .meditor h3 { font-size:1.17em; ... }
   - ul[class*="-list"] { list-style:none; ... }
   只在 Graduate family root 內恢復本頁設計，不修改系統 CSS。
   ========================================================= */

/* Section titles: higher specificity than .meditor h2 */
.mygrad-page .mygrad-section-title {
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-section-title);
  font-weight: 800;
  line-height: 1.3;
}

/* Section divider: restore intended visual weight */
.mygrad-page .mygrad-section-line {
  height: 0.2rem;
}

/* Section 02 second-level headings */
.mygrad-page .mygrad-subsection-title {
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-subsection-title);
  font-weight: 800;
  line-height: 1.4;
}

/* Feature / card headings: higher specificity than .meditor h3 */
.mygrad-page .mygrad-card-title,
.mygrad-page .mygrad-split-title,
.mygrad-page .mygrad-candidacy-card [role="heading"][aria-level="3"],
.mygrad-page .mygrad-checklist-group [role="heading"][aria-level="3"],
.mygrad-page .mygrad-step [role="heading"][aria-level="3"],
.mygrad-page .mygrad-resource-panel [role="heading"][aria-level="3"] {
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-card-title);
  font-weight: 800;
  line-height: 1.45;
}

/* Restore semantic bullets removed by Rpage ul[class*="-list"] reset */
.mygrad-page ul.mygrad-list {
  list-style: disc outside;
  padding-left: 1.45em;
}

.mygrad-page ul.mygrad-list > li {
  display: list-item;
  list-style-type: disc;
}

/* Keep intentionally non-bulleted component lists unchanged */
.mygrad-page ul.mygrad-resource-list,
.mygrad-page ul.mygrad-checklist-list {
  list-style: none;
}

/* Overview flow typography */
.mygrad-page .mygrad-flow-step,
.mygrad-page .mygrad-flow-branch-item,
.mygrad-page .mygrad-flow-gate {
  font-size: var(--myfont-body-important);
  line-height: 1.55;
}

.mygrad-page .mygrad-flow-step small {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-card-text);
  font-weight: 600;
  line-height: 1.5;
}

/* Quick Navigation: one row; overflow instead of wrapping */
.mygrad-page .mygrad-quicknav {
  overflow: hidden;
}

.mygrad-page .mygrad-quicknav-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.55rem;
  -webkit-overflow-scrolling: touch;
}

.mygrad-page .mygrad-quicknav-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Unified statutory time-information hierarchy:
   source belongs to the same box, but remains secondary information. */
.mygrad-page .mygrad-timebox {
  font-size: var(--myfont-body-important);
  line-height: 1.75;
}

.mygrad-page .mygrad-time-source {
  display: block;
  width: 100%;
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  color: var(--mygrad-muted);
  border-top: 0.1rem solid rgba(46, 75, 112, 0.12);
  font-size: var(--myfont-meta);
  font-weight: 400;
  line-height: 1.65;
}

.mygrad-page .mygrad-time-source .mylink {
  font-size: inherit;
}

/* Schedule is one row on desktop. */
.mygrad-page .mygrad-schedule-row {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 1rem;
  white-space: nowrap;
}

.mygrad-page .mygrad-schedule-row .mygrad-time-source {
  flex: 1 0 100%;
  white-space: normal;
}


/* =========================================================
   14D. Live layout refinements v1.6
   ========================================================= */

/* Quick Navigation:
   scroll container owns overflow; outer wrapper must not clip last item. */
.mygrad-page .mygrad-quicknav {
  overflow: visible;
}

.mygrad-page .mygrad-quicknav-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  padding-right: 1.2rem;
  scroll-padding-right: 1.2rem;
}

/* Fixed application/exam schedule:
   use grid rather than flex so the legal source always occupies its own row. */
.mygrad-page .mygrad-schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.65rem 1rem;
  align-items: baseline;
  white-space: normal;
}

.mygrad-page .mygrad-schedule-part {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
  flex-wrap: wrap;
}

.mygrad-page .mygrad-schedule-divider {
  display: inline-block;
  align-self: center;
}

.mygrad-page .mygrad-schedule-row > .mygrad-time-source {
  grid-column: 1 / -1;
  width: 100%;
}

/* Legal source inside statutory box:
   secondary typography only; no extra separator line. */
.mygrad-page .mygrad-time-source {
  margin: 0.55rem 0 0;
  padding-top: 0;
  border-top: 0;
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  font-weight: 400;
  line-height: 1.65;
}

/* Section-level legal source aligns with section description. */
.mygrad-page .mygrad-section-source {
  margin-left: 4.4rem;
  margin-right: 0;
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  line-height: 1.7;
}

@media screen and (max-width: 900px) {
  .mygrad-page .mygrad-schedule-row {
    grid-template-columns: 1fr;
  }

  .mygrad-page .mygrad-schedule-divider {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .mygrad-page .mygrad-section-source {
    margin-left: 0;
  }
}


/* =========================================================
   14E. Quick Navigation scrollbar visibility v1.7
   ========================================================= */

.mygrad-page .mygrad-quicknav-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: auto;
  scrollbar-color: auto;
  padding-bottom: 0.8rem;
}

.mygrad-page .mygrad-quicknav-scroll::-webkit-scrollbar {
  display: block;
  height: 0.9rem;
}

.mygrad-page .mygrad-quicknav-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.mygrad-page .mygrad-quicknav-scroll::-webkit-scrollbar-thumb {
  background: rgba(46, 75, 112, 0.35);
  border-radius: 999px;
}

.mygrad-page .mygrad-quicknav-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(46, 75, 112, 0.55);
}

/* =========================================================
   15. Tablet
   ========================================================= */

@media screen and (max-width: 900px) {
  .mygrad-schedule-row {
    flex-wrap: wrap;
    white-space: normal;
  }

  .mygrad-schedule-part {
    flex: 1 1 28rem;
  }

  .mygrad-schedule-divider {
    display: none;
  }

  .mygrad-split,
  .mygrad-checklist,
  .mygrad-resource-columns {
    grid-template-columns: 1fr;
  }

  .mygrad-candidacy {
    grid-template-columns: 1fr;
  }

  .mygrad-candidacy-plus {
    min-height: 3.8rem;
  }

  .mygrad-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mygrad-step:nth-child(2)::after,
  .mygrad-step:last-child::after {
    display: none;
  }

  .mygrad-resource-panel-full {
    grid-column: auto;
  }
}

/* =========================================================
   16. Mobile
   ========================================================= */

@media screen and (max-width: 640px) {





  .mygrad-schedule-row {
    display: grid;
    gap: 0.55rem;
  }

  .mygrad-schedule-divider {
    display: none;
  }

  .mygrad-inner {
    padding: 0 0.8rem 2.5rem;
  }

  .mygrad-intro {
    padding: 1.25rem 1.2rem;
  }

  .mygrad-quicknav-wrap {
    margin-bottom: 2.6rem;
  }

  .mygrad-quicknav-hint {
    display: block;
  }

  .mygrad-quicknav {
    overflow: hidden;
  }

  .mygrad-quicknav-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.65rem;
    padding: 0.2rem 0.1rem 0.55rem;
    -webkit-overflow-scrolling: touch;
}
.mygrad-quicknav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .mygrad-section {
    margin-top: 4.4rem;
  }

  .mygrad-section-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
  }

  .mygrad-section-desc {
    margin-left: 0;
  }

  .mygrad-section-line {
    grid-column: 1 / -1;
    height: 0.12rem;
  }



  .mygrad-grid,
  .mygrad-flow-branch,
  .mygrad-steps {
    grid-template-columns: 1fr;
  }

  .mygrad-deadline {
    grid-template-columns: 1fr;
  }

  .mygrad-deadline-time {
    min-height: 0;
  }

  .mygrad-facts-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .mygrad-step::after {
    content: "\f107";
    top: calc(100% + 0.1rem);
    left: 50%;
    transform: translateX(-50%);
  }

  .mygrad-step:nth-child(2)::after {
    display: block;
  }

  .mygrad-step:last-child::after {
    display: none;
  }

  .mygrad-section-footer {
    text-align: center;
  }
}

@media screen and (max-width: 420px) {
  .mygrad-inner {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .mygrad-card,
  .mygrad-split-item,
  .mygrad-candidacy-card,
  .mygrad-checklist-group,
  .mygrad-resource-panel {
    padding: 1.25rem 1.05rem;
  }

}

/* =========================================================
   17. Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .mygrad-page *,
  .mygrad-page *::before,
  .mygrad-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   18. Print
   ========================================================= */

@media print {
  .mygrad-page {
    width: 100%;
    color: #111111;
    font-size: 11pt;
  }

  .mygrad-quicknav-wrap,
  .mygrad-section-footer {
    display: none !important;
  }

  .mygrad-card,
  .mygrad-split-item,
  .mygrad-candidacy-card,
  .mygrad-checklist-group,
  .mygrad-step,
  .mygrad-resource-panel {
    box-shadow: none;
    break-inside: avoid;
  }

  .mygrad-section {
    break-inside: avoid-page;
  }

  .mygrad-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================================
   20. Graduate Course family
   ========================================================= */

.mygradcourse-page {
  --mygradcourse-required: #AA8B5A;
  --mygradcourse-required-soft: #F4EBDD;
  --mygradcourse-elective: #2E4B70;
  --mygradcourse-elective-soft: #EEF2F5;
}

.mygradcourse-page .mygrad-section {
  scroll-margin-top: 2rem;
}

.mygradcourse-credit-summary {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto minmax(14rem, 1fr) auto minmax(14rem, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin: 0 0 2.2rem 4.4rem;
}

.mygradcourse-credit-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.7rem;
  align-items: baseline;
  min-height: 8.6rem;
  padding: 1.5rem 1.7rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-left: 0.45rem solid var(--mygrad-navy);
  border-radius: var(--mygrad-radius);
  box-shadow: var(--mygrad-shadow);
}

.mygradcourse-credit-required {
  border-left-color: var(--mygrad-gold);
}

.mygradcourse-credit-elective {
  border-left-color: var(--mygrad-navy);
}

.mygradcourse-credit-label {
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-body-important);
  font-weight: 800;
}

.mygradcourse-credit-card strong {
  font-size: var(--myfont-subsection-title);
  line-height: 1;
}

.mygradcourse-credit-card > span:last-child {
  color: var(--mygrad-muted);
  font-size: var(--myfont-action);
}

.mygradcourse-credit-op {
  align-self: center;
  color: var(--mygrad-gold);
  font-size: var(--myfont-feature-title);
  font-weight: 800;
}

.mygradcourse-rulebox {
  margin-left: 4.4rem;
  padding: 1.7rem 2rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-top: 0.35rem solid var(--mygrad-navy);
  border-radius: var(--mygrad-radius);
}

.mygradcourse-rulebox [role="heading"][aria-level="3"],
.mygradcourse-schedule-head [role="heading"][aria-level="3"],
.mygradcourse-elective-pool [role="heading"][aria-level="3"],
.mygradcourse-day-card [role="heading"][aria-level="3"] {
  margin: 0;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-feature-title);
  font-weight: 800;
  line-height: 1.4;
}

.mygradcourse-rules {
  margin: 1rem 0 0;
  padding-left: 2.2rem;
}

.mygradcourse-rules > li {
  margin: 0.55rem 0;
  padding-left: 0.25rem;
}

.mygradcourse-query {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin: 1.5rem 0 0 4.4rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-body);
}

.mygradcourse-query-btn {
  text-decoration: none;
}

.mygradcourse-schedule-head {
  display: flex;
  justify-content: space-between;
  gap: 1.6rem;
  align-items: center;
  margin: 0 0 1.5rem 4.4rem;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(90deg, var(--mygrad-soft-blue), #FFFFFF 76%);
  border-left: 0.42rem solid var(--mygrad-gold);
}

.mygradcourse-schedule-head p {
  margin: 0.45rem 0 0;
  color: var(--mygrad-muted);
  font-size: var(--myfont-card-text);
}

.mygradcourse-schedule-download {
  flex: 0 0 auto;
  text-decoration: none;
}

.mygradcourse-schedule-desktop {
  margin-left: 4.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mygradcourse-week-table {
  width: 100%;
  min-width: 96rem;
  table-layout: fixed;
  border-collapse: collapse;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line-dark);
}

.mygradcourse-week-table th,
.mygradcourse-week-table td {
  border: 0.1rem solid var(--mygrad-line);
  vertical-align: top;
}

.mygradcourse-week-table thead th {
  padding: 1rem 0.8rem;
  color: #FFFFFF;
  background: var(--mygrad-navy);
  font-size: var(--myfont-card-text);
  font-weight: 800;
  text-align: center;
}

.mygradcourse-week-table thead th:first-child {
  width: 11rem;
}

.mygradcourse-week-table tbody th {
  width: 11rem;
  padding: 0.85rem 0.7rem;
  color: var(--mygrad-navy-dark);
  background: var(--mygrad-soft);
  text-align: center;
}

.mygradcourse-week-table td {
  height: 7.8rem;
  padding: 0.55rem;
  background: #FFFFFF;
}

.mygradcourse-period,
.mygradcourse-time {
  display: block;
}

.mygradcourse-period {
  font-size: var(--myfont-action);
  font-weight: 800;
}

.mygradcourse-time {
  margin-top: 0.25rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  font-weight: 500;
}

.mygradcourse-schedule-course {
  display: grid;
  gap: 0.12rem;
  padding: 0.65rem 0.7rem;
  color: var(--mygrad-text);
  background: var(--mygrad-soft-blue);
  border-left: 0.32rem solid var(--mygrad-gold);
  border-radius: 0.45rem;
}

.mygradcourse-schedule-course + .mygradcourse-schedule-course {
  margin-top: 0.45rem;
}

.mygradcourse-schedule-course strong {
  font-size: var(--myfont-action);
  line-height: 1.4;
}

.mygradcourse-schedule-course span {
  color: var(--mygrad-muted);
  font-size: var(--myfont-meta);
  line-height: 1.35;
}

.mygradcourse-schedule-mobile {
  display: none;
  margin-left: 4.4rem;
}

.mygradcourse-map {
  margin-left: 4.4rem;
}

.mygradcourse-timeline {
  position: relative;
  display: grid;
  gap: 1.8rem;
}

.mygradcourse-timeline::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 50%;
  width: 0.18rem;
  background: linear-gradient(
    to bottom,
    var(--mygrad-gold-bright),
    var(--mygrad-gold),
    var(--mygrad-line-dark)
  );
  transform: translateX(-50%);
}

.mygradcourse-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.4rem minmax(0, 1fr);
  align-items: start;
  min-height: 9rem;
}

.mygradcourse-timeline-marker {
  position: relative;
  z-index: 2;
  grid-column: 2;
  justify-self: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 2.2rem;
  background: var(--mygrad-gold-bright);
  border: 0.35rem solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 0.18rem var(--mygrad-gold);
}

.mygradcourse-timeline-card {
  width: 100%;
  max-width: 52rem;
  padding: 1.4rem 1.5rem 1.5rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-top: 0.34rem solid var(--mygrad-gold);
  border-radius: var(--mygrad-radius);
  box-shadow: var(--mygrad-shadow);
}

.mygradcourse-timeline-left .mygradcourse-timeline-card {
  grid-column: 1;
  justify-self: end;
}

.mygradcourse-timeline-right .mygradcourse-timeline-card {
  grid-column: 3;
  justify-self: start;
}

.mygradcourse-timeline-card [role="heading"][aria-level="3"] {
  margin: 0;
  color: var(--mygrad-navy-dark);
  font-size: var(--myfont-feature-title);
  font-weight: 800;
  line-height: 1.4;
}

.mygradcourse-course-list,
.mygradcourse-elective-grid {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.mygradcourse-course {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  align-items: center;
  min-height: 4.2rem;
  padding: 0.72rem 0.9rem;
  border-radius: 0.5rem;
  font-size: var(--myfont-card-text);
  font-weight: 700;
  line-height: 1.4;
}

.mygradcourse-course-required {
  color: var(--mygrad-navy-deep);
  background: var(--mygradcourse-required-soft);
  border-left: 0.35rem solid var(--mygrad-gold);
}

.mygradcourse-course-elective {
  color: var(--mygrad-navy-dark);
  background: var(--mygradcourse-elective-soft);
  border-left: 0.35rem solid var(--mygrad-navy);
}

.mygradcourse-credit {
  flex: 0 0 auto;
  display: inline-grid;
  min-width: 2.5rem;
  min-height: 2.5rem;
  place-items: center;
  padding: 0 0.45rem;
  color: #FFFFFF;
  background: var(--mygrad-navy);
  border-radius: 999px;
  font-size: var(--myfont-eyebrow);
  font-weight: 800;
}

.mygradcourse-course-required .mygradcourse-credit {
  color: var(--mygrad-navy-deep);
  background: var(--mygrad-gold-bright);
}

.mygradcourse-elective-pool {
  margin-top: 2rem;
  padding: 1.6rem 1.7rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--mygrad-line);
  border-top: 0.34rem solid var(--mygrad-navy);
  border-radius: var(--mygrad-radius);
}

.mygradcourse-elective-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mygradcourse-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 1.4rem 0 0 4.4rem;
  color: var(--mygrad-muted);
  font-size: var(--myfont-card-text);
}

.mygradcourse-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.mygradcourse-legend-chip {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
}

.mygradcourse-legend-required {
  background: var(--mygradcourse-required-soft);
  border-left: 0.35rem solid var(--mygrad-gold);
}

.mygradcourse-legend-elective {
  background: var(--mygradcourse-elective-soft);
  border-left: 0.35rem solid var(--mygrad-navy);
}

@media (max-width: 900px) {
  .mygradcourse-credit-summary {
    grid-template-columns: 1fr;
  }

  .mygradcourse-credit-op {
    display: none;
  }

  .mygradcourse-credit-card {
    min-height: 0;
  }

  .mygradcourse-elective-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mygradcourse-credit-summary,
  .mygradcourse-rulebox,
  .mygradcourse-query,
  .mygradcourse-schedule-head,
  .mygradcourse-schedule-desktop,
  .mygradcourse-schedule-mobile,
  .mygradcourse-map,
  .mygradcourse-legend {
    margin-left: 0;
  }

  .mygradcourse-schedule-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mygradcourse-schedule-desktop {
    display: none;
  }

  .mygradcourse-schedule-mobile {
    display: block;
  }

  .mygradcourse-day-card {
    overflow: hidden;
    margin-bottom: 1.3rem;
    background: #FFFFFF;
    border: 0.1rem solid var(--mygrad-line);
    border-radius: var(--mygrad-radius);
  }

  .mygradcourse-day-card > h3 {
    padding: 0.95rem 1.1rem;
    color: #FFFFFF;
    background: var(--mygrad-navy);
  }

  .mygradcourse-day-slot {
    display: grid;
    grid-template-columns: 8.6rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border-top: 0.1rem solid var(--mygrad-line);
  }

  .mygradcourse-day-time {
    display: grid;
    align-content: start;
    gap: 0.2rem;
    color: var(--mygrad-navy-dark);
  }

  .mygradcourse-day-time b {
    font-size: var(--myfont-action);
  }

  .mygradcourse-day-time span {
    color: var(--mygrad-muted);
    font-size: var(--myfont-meta);
  }

  .mygradcourse-day-courses {
    min-width: 0;
  }

  .mygradcourse-timeline {
    gap: 1.2rem;
  }

  .mygradcourse-timeline::before {
    left: 0.75rem;
    transform: none;
  }

  .mygradcourse-timeline-item {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    min-height: 0;
  }

  .mygradcourse-timeline-marker {
    grid-column: 1;
    justify-self: start;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 2rem;
  }

  .mygradcourse-timeline-left .mygradcourse-timeline-card,
  .mygradcourse-timeline-right .mygradcourse-timeline-card {
    grid-column: 2;
    justify-self: stretch;
    max-width: none;
  }

  .mygradcourse-elective-grid {
    grid-template-columns: 1fr;
  }

  .mygradcourse-course {
    font-size: var(--myfont-card-text);
  }
}


/* =========================================================
   21. Graduate Scholarships family
   ========================================================= */

.mygrad-page.myscholar-page {
  --myscholar-navy:var(--mygrad-navy);
  --myscholar-navy-dark:var(--mygrad-navy-dark);
  --myscholar-gold:var(--mygrad-gold);
  --myscholar-gold-bright:var(--mygrad-gold-bright);
  --myscholar-soft:var(--mygrad-soft);
  --myscholar-soft-blue:var(--mygrad-soft-blue);
  --myscholar-line:var(--mygrad-line);
  --myscholar-line-dark:var(--mygrad-line-dark);
  --myscholar-text:var(--mygrad-text);
  --myscholar-muted:var(--mygrad-muted);

  width:min(100%,118rem);
  margin:0 auto;
  padding:0 clamp(1.2rem,2.4vw,3rem) clamp(1.2rem,2.4vw,3rem);
  color:var(--myscholar-text);
  font-family:"Noto Sans TC",sans-serif;
  font-size: var(--myfont-body);
  line-height:1.8;
}

.mygrad-page.myscholar-page *,
.mygrad-page.myscholar-page *::before,
.mygrad-page.myscholar-page *::after{
  box-sizing:border-box;
}

.mygrad-page.myscholar-page .myscholar-quicknav-wrap{
  margin:1.5rem 0 2.8rem;
}

.mygrad-page.myscholar-page .myscholar-quicknav{
  display:block;
  margin:0;
  padding:1rem;
  overflow-x:auto;
  overflow-y:hidden;
  background:#FFFFFF;
  border:0.1rem solid var(--myscholar-line);
  border-radius:var(--mygrad-radius);
  box-shadow:var(--mygrad-shadow);
  scrollbar-width:thin;
}

.mygrad-page.myscholar-page .myscholar-quicknav-scroll{
  display:flex;
  flex-wrap:nowrap;
  gap:.75rem;
  width:max-content;
  min-width:100%;
}

.mygrad-page.myscholar-page .myscholar-quicknav a {
  flex:0 0 auto;
  padding:.68rem 1.18rem;
  color:var(--myscholar-navy);
  background:var(--myscholar-soft-blue);
  border:0.1rem solid #D7E0E8;
  border-radius:999px;
  font-size: var(--myfont-action);
  font-weight:800;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}

.mygrad-page.myscholar-page .myscholar-quicknav a:hover,
.mygrad-page.myscholar-page .myscholar-quicknav a:focus{
  color:#FFFFFF;
  background:var(--myscholar-navy);
  border-color:var(--myscholar-navy);
  text-decoration:none;
}

.mygrad-page.myscholar-page .myscholar-quicknav a:nth-child(even){
  color:#6E552E;
  background:#F6F0E7;
  border-color:#E4D3B8;
}

.mygrad-page.myscholar-page .myscholar-quicknav a:nth-child(even):hover,
.mygrad-page.myscholar-page .myscholar-quicknav a:nth-child(even):focus{
  color:#FFFFFF;
  background:#7A6035;
  border-color:#7A6035;
}

.mygrad-page.myscholar-page .myscholar-quicknav-hint{
  display:none;
}

.mygrad-page.myscholar-page .myscholar-section{
  margin-bottom:3.4rem;
  scroll-margin-top:2rem;
}

.mygrad-page.myscholar-page .myscholar-section-head{
  margin-bottom:1.3rem;
}

.mygrad-page.myscholar-page .myscholar-intro,
.mygrad-page.myscholar-page .myscholar-status-note {
  margin:0 0 2rem 4.4rem;
  padding:1.35rem 1.6rem;
  border-radius:.6rem;
  font-size: var(--myfont-body);
  line-height:1.8;
}

.mygrad-page.myscholar-page .myscholar-intro{
  background:linear-gradient(90deg,var(--myscholar-soft-blue),#FFFFFF 80%);
  border:0.1rem solid var(--myscholar-line);
  border-left:.45rem solid var(--myscholar-gold);
}

.mygrad-page.myscholar-page .myscholar-status-note{
  color:#634F2B;
  background:#FFF8E9;
  border:0.1rem solid #E8D8B9;
}

.mygrad-page.myscholar-page .myscholar-status-note .fa{
  margin-right:.45rem;
  color:#9A7339;
}

.mygrad-page.myscholar-page .myscholar-section-lead {
  margin:.2rem 0 1.6rem 4.4rem;
  color:var(--myscholar-muted);
  font-size: var(--myfont-body);
  line-height:1.75;
}

.mygrad-page.myscholar-page .myscholar-degree-panel{
  margin:1.2rem 0 2.2rem 4.4rem;
  padding:1.5rem;
  background:#FFFFFF;
  border:0.1rem solid var(--myscholar-line);
  border-top:.35rem solid var(--myscholar-gold);
  border-radius:var(--mygrad-radius);
  box-shadow:var(--mygrad-shadow);
}

.mygrad-page.myscholar-page .myscholar-degree-heading {
  display:flex;
  gap:.8rem;
  align-items:center;
  margin:0 0 1.25rem;
  color:var(--myscholar-navy-dark);
  font-family:"Noto Serif TC",serif;
  font-size: var(--myfont-feature-title);
}

.mygrad-page.myscholar-page .myscholar-degree-heading .fa{
  color:var(--myscholar-gold);
}

.mygrad-page.myscholar-page .myscholar-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem;
  margin-left:4.4rem;
}

.mygrad-page.myscholar-page .myscholar-degree-panel .myscholar-grid{
  margin-left:0;
}

.mygrad-page.myscholar-page .myscholar-grid-three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.mygrad-page.myscholar-page .myscholar-card{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  background:#FFFFFF;
  border:0.1rem solid var(--myscholar-line);
  border-radius:var(--mygrad-radius);
  box-shadow:var(--mygrad-shadow);
}

.mygrad-page.myscholar-page .myscholar-card::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  right:0;
  left:0;
  height:.28rem;
  background:linear-gradient(90deg,var(--myscholar-navy) 0 72%,var(--myscholar-gold) 72% 100%);
}

.mygrad-page.myscholar-page .myscholar-card-head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1rem;
  align-items:start;
  padding:1.5rem 1.55rem 1.25rem;
  background:linear-gradient(135deg,var(--myscholar-soft-blue),#FFFFFF);
  border-bottom:0.1rem solid var(--myscholar-line);
}

.mygrad-page.myscholar-page .myscholar-card-icon,
.mygrad-page.myscholar-page .myscholar-card-icon-gold{
  display:grid;
  width:4rem;
  height:4rem;
  place-items:center;
  color:#FFFFFF;
  background:var(--myscholar-navy);
  border-radius:.65rem;
  font-size:1.8rem;
}

.mygrad-page.myscholar-page .myscholar-card-icon-gold{
  background:var(--myscholar-gold);
}

.mygrad-page.myscholar-page .myscholar-card [role="heading"][aria-level="3"] {
  margin:0;
  color:var(--myscholar-navy-dark);
  font-family:"Noto Serif TC",serif;
  font-size: var(--myfont-card-title);
  font-weight:700;
  line-height:1.45;
}

.mygrad-page.myscholar-page .myscholar-card-sub {
  margin:.3rem 0 0;
  color:var(--myscholar-muted);
  font-size: var(--myfont-meta);
  font-weight:700;
  line-height:1.55;
}

.mygrad-page.myscholar-page .myscholar-card-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  padding:1.45rem 1.55rem 1.6rem;
}

.mygrad-page.myscholar-page .myscholar-card-body>p:first-child{
  margin-top:0;
}

.mygrad-page.myscholar-page .myscholar-card-body p {
  margin:.45rem 0 1rem;
  font-size: var(--myfont-card-text);
  line-height:1.75;
}

.mygrad-page.myscholar-page .myscholar-tag-row{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  margin:.55rem 0 0;
}

.mygrad-page.myscholar-page .myscholar-tag,
.mygrad-page.myscholar-page .myscholar-tag-gold,
.mygrad-page.myscholar-page .myscholar-tag-alert {
  display:inline-block;
  padding:.28rem .68rem;
  color:var(--myscholar-navy-dark);
  background:#FFFFFF;
  border:0.14rem solid var(--myscholar-navy);
  border-radius:999px;
  font-size: var(--myfont-eyebrow);
  font-weight:800;
  line-height:1.4;
}

.mygrad-page.myscholar-page .myscholar-tag-gold{
  color:#6F552D;
  border-color:var(--myscholar-gold);
}

.mygrad-page.myscholar-page .myscholar-tag-alert{
  border-style:dashed;
}

.mygrad-page.myscholar-page .myscholar-facts{
  display:grid;
  gap:.65rem;
  margin:.2rem 0 1.1rem;
}

.mygrad-page.myscholar-page .myscholar-fact {
  display:grid;
  grid-template-columns:9.2rem minmax(0,1fr);
  gap:.9rem;
  padding:.72rem .85rem;
  color:var(--myscholar-text);
  background:var(--myscholar-soft);
  border-left:.28rem solid var(--myscholar-gold);
  border-radius:.45rem;
  font-size: var(--myfont-card-text);
  line-height:1.65;
}

.mygrad-page.myscholar-page .myscholar-fact b{
  color:var(--myscholar-navy-dark);
}

.mygrad-page.myscholar-page .myscholar-details{
  margin:.8rem 0 1rem;
  background:#FFFFFF;
  border:0.1rem solid var(--myscholar-line);
  border-radius:.55rem;
}

.mygrad-page.myscholar-page .myscholar-details summary {
  position:relative;
  padding:.8rem 3.2rem .8rem 1rem;
  color:var(--myscholar-navy-dark);
  background:var(--myscholar-soft-blue);
  border-radius:.55rem;
  cursor:pointer;
  font-size: var(--myfont-card-text);
  font-weight:800;
  list-style:none;
}

.mygrad-page.myscholar-page .myscholar-details summary::-webkit-details-marker{
  display:none;
}

.mygrad-page.myscholar-page .myscholar-details summary::after{
  content:"\f0d7";
  position:absolute;
  top:50%;
  right:1rem;
  color:var(--myscholar-gold);
  font-family:FontAwesome;
  transform:translateY(-50%);
}

.mygrad-page.myscholar-page .myscholar-details[open] summary::after{
  content:"\f0d8";
}

.mygrad-page.myscholar-page .myscholar-details ul {
  margin:1rem 1.2rem 1.2rem;
  padding-left:2rem;
  font-size: var(--myfont-card-text);
  line-height:1.7;
}

.mygrad-page.myscholar-page .myscholar-source-links{
  display:flex;
  gap:.55rem 1rem;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:.9rem;
  border-top:0.1rem dashed var(--myscholar-line-dark);
}

.mygrad-page.myscholar-page .myscholar-source-link {
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  padding:.15rem .25rem;
  color:var(--myscholar-navy);
  border-radius:.25rem;
  font-size: var(--myfont-meta);
  font-weight:800;
  line-height:1.55;
  text-decoration:none;
}

.mygrad-page.myscholar-page .myscholar-source-link .fa{
  color:var(--myscholar-gold);
}

.mygrad-page.myscholar-page .myscholar-source-link:hover,
.mygrad-page.myscholar-page .myscholar-source-link:focus{
  color:#FFFFFF;
  background:var(--myscholar-navy);
  text-decoration:none;
}

.mygrad-page.myscholar-page .myscholar-source-link:hover .fa,
.mygrad-page.myscholar-page .myscholar-source-link:focus .fa{
  color:#FFFFFF;
}

.mygrad-page.myscholar-page .myscholar-resource-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-left:4.4rem;
}

.mygrad-page.myscholar-page .myscholar-resource{
  position:relative;
  display:flex;
  gap:.8rem;
  align-items:flex-start;
  overflow:hidden;
  padding:1.2rem;
  color:var(--myscholar-text);
  background:#FFFFFF;
  border:0.1rem solid var(--myscholar-line);
  border-radius:.7rem;
  box-shadow:0 .3rem 1rem rgba(46,75,112,.045);
  text-decoration:none;
}

.mygrad-page.myscholar-page .myscholar-resource::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:.28rem;
  background:var(--myscholar-gold);
}

.mygrad-page.myscholar-page .myscholar-resource .fa{
  flex:0 0 auto;
  margin-top:.2rem;
  color:var(--myscholar-gold);
  font-size:1.8rem;
}

.mygrad-page.myscholar-page .myscholar-resource b {
  display:block;
  margin-bottom:.2rem;
  color:var(--myscholar-navy-dark);
  font-size: var(--myfont-action);
}

.mygrad-page.myscholar-page .myscholar-resource span {
  display:block;
  color:var(--myscholar-muted);
  font-size: var(--myfont-meta);
  line-height:1.55;
}

.mygrad-page.myscholar-page .myscholar-resource:hover,
.mygrad-page.myscholar-page .myscholar-resource:focus{
  color:#FFFFFF;
  background:var(--myscholar-navy);
  border-color:var(--myscholar-navy);
  text-decoration:none;
}

.mygrad-page.myscholar-page .myscholar-resource:hover .fa,
.mygrad-page.myscholar-page .myscholar-resource:focus .fa,
.mygrad-page.myscholar-page .myscholar-resource:hover b,
.mygrad-page.myscholar-page .myscholar-resource:focus b,
.mygrad-page.myscholar-page .myscholar-resource:hover span,
.mygrad-page.myscholar-page .myscholar-resource:focus span{
  color:#FFFFFF;
}

@media screen and (max-width:900px){
  .mygrad-page.myscholar-page .myscholar-grid,
  .mygrad-page.myscholar-page .myscholar-grid-three,
  .mygrad-page.myscholar-page .myscholar-resource-strip{
    grid-template-columns:1fr;
  }
}

@media screen and (max-width:640px){
  .mygrad-page.myscholar-page{
    padding-right:1.2rem;
    padding-left:1.2rem;
  }

  .mygrad-page.myscholar-page .myscholar-intro,
  .mygrad-page.myscholar-page .myscholar-section-lead,
  .mygrad-page.myscholar-page .myscholar-degree-panel,
  .mygrad-page.myscholar-page .myscholar-grid,
  .mygrad-page.myscholar-page .myscholar-resource-strip{
    margin-left:0;
  }

  .mygrad-page.myscholar-page .myscholar-card-head{
    grid-template-columns:auto minmax(0,1fr);
    gap:1rem;
  }

  .mygrad-page.myscholar-page .myscholar-card-icon,
  .mygrad-page.myscholar-page .myscholar-card-icon-gold{
    width:3.6rem;
    height:3.6rem;
  }

  .mygrad-page.myscholar-page .myscholar-fact{
    grid-template-columns:1fr;
    gap:.2rem;
  }

  .mygrad-page.myscholar-page .myscholar-quicknav{
    width:100%;
    padding:.8rem;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .mygrad-page.myscholar-page .myscholar-quicknav::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }

  .mygrad-page.myscholar-page .myscholar-quicknav-scroll{
    flex-wrap:nowrap;
    gap:.7rem;
    width:max-content;
    min-width:0;
  }

  .mygrad-page.myscholar-page .myscholar-quicknav-scroll a{
    flex:0 0 auto;
    width:auto;
    min-width:max-content;
    white-space:nowrap;
    padding:.7rem 1.25rem;
  }

  .mygrad-page.myscholar-page .myscholar-quicknav-hint{
    display:block;
    margin:0 0 .45rem;
    color:var(--myscholar-muted);
    font-size:var(--myfont-meta);
    line-height:1.4;
    text-align:right;
  }

  .mygrad-page.myscholar-page .myscholar-quicknav-hint .fa{
    margin-right:.25rem;
    color:var(--myscholar-gold);
  }

  .mygrad-page.myscholar-page .myscholar-source-links{
    display:grid;
    grid-template-columns:1fr;
    gap:.45rem;
  }

  .mygrad-page.myscholar-page .myscholar-source-link{
    width:100%;
    padding:.35rem .2rem;
  }
}


/* =========================================================
   22. Graduate Study Abroad family
   ========================================================= */

.mygrad-page.myabroad-page {
  --myabroad-navy:var(--mygrad-navy);
  --myabroad-gold:var(--mygrad-gold);
  --myabroad-light:var(--mygrad-soft);
  --myabroad-line:var(--mygrad-line);
  --myabroad-text:var(--mygrad-text);
  --myabroad-muted:var(--mygrad-muted);
  width:min(100%,118rem);
  margin:0 auto;
  padding:0 clamp(1.2rem,2.4vw,3rem) clamp(1.2rem,2.4vw,3rem);
  color:var(--myabroad-text);
  font-family:"Noto Sans TC",sans-serif;
  font-size: var(--myfont-body);
  line-height:1.8;
}

.mygrad-page.myabroad-page *,
.mygrad-page.myabroad-page *::before,
.mygrad-page.myabroad-page *::after{
  box-sizing:border-box;
}

.mygrad-page.myabroad-page .myabroad-major-section{
  margin-bottom:3.4rem;
}

.mygrad-page.myabroad-page .myabroad-section-head{
  margin-bottom:1.3rem;
}

.mygrad-page.myabroad-page .myabroad-intro{
  margin:0 0 1.8rem 4.4rem;
}

@media screen and (max-width:640px){
  .mygrad-page.myabroad-page{
    padding-right:1.2rem;
    padding-left:1.2rem;
  }

  .mygrad-page.myabroad-page .myabroad-intro{
    margin-left:0;
  }
}

/* =========================================================
   22. Graduate Study Abroad family
   ========================================================= */

.mygrad-page.myabroad-page .myabroad-major-section,
.mygrad-page.myabroad-page .myabroad-university-card{
  scroll-margin-top:2rem;
}

.mygrad-page.myabroad-page .myabroad-intro {
  margin:0 0 1.8rem;
  padding:1.4rem 1.6rem;
  background:#F3F6F9;
  border-left:.5rem solid var(--myabroad-gold);
  border-radius:.5rem;
  font-size: var(--myfont-body);
  line-height:1.8;
}

.mygrad-page.myabroad-page .myabroad-program-card,
.mygrad-page.myabroad-page .myabroad-university-card{
  margin:0 0 3rem;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--myabroad-line);
  border-radius:1rem;
  box-shadow:0 .6rem 1.8rem rgba(46,75,112,.10);
}

.mygrad-page.myabroad-page .myabroad-program-card-wide{
  display:grid;
  grid-template-columns:minmax(42rem,1.6fr) minmax(25rem,.8fr);
}

.mygrad-page.myabroad-page .myabroad-university-card-extension{
  border-top:.4rem solid #4F7D72;
}

.mygrad-page.myabroad-page .myabroad-university-header{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1.4rem;
  align-items:start;
  padding:2rem 2.2rem;
  background:linear-gradient(135deg,#F7F8FA,#EEF2F6);
  border-bottom:1px solid var(--myabroad-line);
}

.mygrad-page.myabroad-page .myabroad-country-badge {
  min-width:5.2rem;
  padding:.55rem .9rem;
  color:#fff;
  background:var(--myabroad-navy);
  border-radius:.5rem;
  font-size: var(--myfont-meta);
  font-weight:700;
  text-align:center;
}

.mygrad-page.myabroad-page .myabroad-program-type {
  margin:0 0 .3rem;
  color:#8A6B3E;
  font-size: var(--myfont-eyebrow);
  font-weight:700;
  letter-spacing:.04em;
}

.mygrad-page.myabroad-page .myabroad-university-header [role="heading"][aria-level="2"] {
  margin:0;
  color:var(--myabroad-navy);
  font-family:'Noto Serif TC',serif;
  font-size: var(--myfont-feature-title);
  line-height:1.4;
}

.mygrad-page.myabroad-page .myabroad-university-header p:last-child {
  margin:.7rem 0 0;
  font-size: var(--myfont-card-text);
  line-height:1.75;
}

.mygrad-page.myabroad-page .myabroad-university-body{
  display:grid;
  grid-template-columns:minmax(30rem,.9fr) minmax(0,1.4fr);
}

/* =========================================================
   04. Map system
   ========================================================= */

.mygrad-page.myabroad-page .myabroad-map-panel{
  min-width:0;
  padding:1.8rem;
  background:#F7F8FA;
}

/* 手機才顯示 */
.mygrad-page.myabroad-page .myabroad-map-scroll-note {
  display:none;
  margin-bottom:.8rem;
  color:var(--myabroad-muted);
  font-size: var(--myfont-meta);
  text-align:center;
}

/*
 * frame 只負責：
 * - 地圖外框
 * - 裁切
 * - 桌機寬度
 * - 手機版橫向捲動時的固定寬度
 *
 * 不可作為圖示百分比定位基準。
 */
.mygrad-page.myabroad-page .myabroad-map-frame{
  min-width:28rem;
  overflow:hidden;
  background:#E9EDF2;
  border:1px solid #D1D7DE;
  border-radius:.8rem;
}

/*
 * canvas 是唯一的地圖座標系。
 * 圖片與所有 overlay 必須放在此元素內。
 */
.mygrad-page.myabroad-page .myabroad-map-canvas{
  position:relative;
  width:100%;
  line-height:0;
}

.mygrad-page.myabroad-page .myabroad-map-img{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
}

/* 出國交換世界地圖完整填滿 canvas */
.mygrad-page.myabroad-page #exchange .myabroad-map-frame{
  width:100%;
}

.mygrad-page.myabroad-page #exchange .myabroad-map-img{
  width:100% !important;
  max-width:none !important;
  height:auto !important;
}

/* =========================================================
   地圖定位錨點系統 v1.4
   ---------------------------------------------------------
   核心原則：
   1. left/top 指定的是「真正地理座標」。
   2. marker 本身為 0 × 0，不再以「圖示 + 標籤整組中心」定位。
   3. 起點圓點以圓心對準 X/Y。
   4. 終點 pin 以水滴尖端對準 X/Y。
   5. 標籤左右位置不影響 X/Y。
   6. 中英文版可共用相同座標。
   ========================================================= */

/* 起點 / 終點 / 洲別：0 × 0 的真正地理錨點 */
.mygrad-page.myabroad-page .myabroad-map-marker,
.mygrad-page.myabroad-page .myabroad-continent-label{
  position:absolute;
  z-index:4;
  width:0;
  height:0;
  pointer-events:none;
  line-height:1.35;
}

/* 雙聯學位起點與終點座標 */
.mygrad-page.myabroad-page .myabroad-map-marker-start{
  top:var(--start-y);
  left:var(--start-x);
}

.mygrad-page.myabroad-page .myabroad-map-marker-end{
  top:var(--end-y);
  left:var(--end-x);
}

/* 出國交換四洲座標 */
.mygrad-page.myabroad-page .myabroad-continent-label{
  top:var(--label-y);
  left:var(--label-x);
}

/* 起點圓點：圓心精確對準 X/Y */
.mygrad-page.myabroad-page .myabroad-marker-dot{
  position:absolute;
  top:0;
  left:0;
  width:1.4rem;
  height:1.4rem;
  background:#C43E3E;
  border:.3rem solid #fff;
  border-radius:50%;
  box-shadow:0 0 0 .2rem #C43E3E;
  transform:translate(-50%,-50%);
}

/* 標籤本體 */
.mygrad-page.myabroad-page .myabroad-marker-label {
  position:absolute;
  top:0;
  min-width:max-content;
  padding:.45rem .7rem;
  color:#fff;
  background:rgba(31,48,67,.90);
  border-radius:.4rem;
  font-size: var(--myfont-meta);
  line-height:1.35;
  box-shadow:0 .2rem .6rem rgba(0,0,0,.22);
}

/* 標籤標題 */
.mygrad-page.myabroad-page .myabroad-marker-label b {
  display:block;
  color:#F0C987;
  font-size: var(--myfont-eyebrow);
}

/* 標籤在定位圖示右側：X/Y ● 文字 */
.mygrad-page.myabroad-page .myabroad-marker-label-right .myabroad-marker-label,
.mygrad-page.myabroad-page .myabroad-label-right .myabroad-marker-label{
  left:1.4rem;
  transform:translateY(-50%);
  text-align:left;
}

/* 標籤在定位圖示左側：文字 ● X/Y */
.mygrad-page.myabroad-page .myabroad-marker-label-left .myabroad-marker-label,
.mygrad-page.myabroad-page .myabroad-label-left .myabroad-marker-label{
  right:1.4rem;
  transform:translateY(-50%);
  text-align:right;
}

/* 飛機：座標同樣以 canvas / 地圖為基準 */
.mygrad-page.myabroad-page .myabroad-plane{
  position:absolute;
  top:var(--plane-y);
  left:var(--plane-x);
  z-index:3;
  color:#414141;
  font-size:2.2rem;
  line-height:1;
  transform:translate(-50%,-50%) rotate(var(--plane-rotate,0deg));
  transform-origin:center;
  pointer-events:none;
}

/* Google Maps 風格終點定位圖示
   水滴尖端精確對準 X/Y */
.mygrad-page.myabroad-page .myabroad-marker-pin{
  position:absolute;
  top:0;
  left:0;
  width:2.4rem;
  height:3rem;
  color:#FF0302;
  font-size:3rem;
  line-height:1;
  text-align:center;
  transform:translate(-50%,-100%);
}

/* Font Awesome 水滴圖示 */
.mygrad-page.myabroad-page .myabroad-marker-pin .fa{
  display:block;
  line-height:1;
}

/* 水滴中央圓心 */
.mygrad-page.myabroad-page .myabroad-marker-pin::after{
  content:"";
  position:absolute;
  top:.48rem;
  left:50%;
  width:1.1rem;
  height:1.1rem;
  background:#833007;
  border-radius:50%;
  transform:translateX(-50%);
}

/* =========================================================
   05. Content
   ========================================================= */

.mygrad-page.myabroad-page .myabroad-content-panel{
  min-width:0;
  padding:2rem 2.2rem;
}

.mygrad-page.myabroad-page .myabroad-content-panel>[role="heading"][aria-level="2"] {
  margin-top:0;
  color:var(--myabroad-navy);
  font-size: var(--myfont-feature-title);
}

.mygrad-page.myabroad-page .myabroad-facts,
.mygrad-page.myabroad-page .myabroad-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}

.mygrad-page.myabroad-page #exchange .myabroad-facts{
  grid-template-columns:1fr;
}

.mygrad-page.myabroad-page .myabroad-fact,
.mygrad-page.myabroad-page .myabroad-info-grid>div{
  padding:1.2rem 1.3rem;
  background:var(--myabroad-light);
  border:1px solid #E3E7EC;
  border-radius:.6rem;
}

.mygrad-page.myabroad-page .myabroad-fact b,
.mygrad-page.myabroad-page .myabroad-info-grid b {
  display:block;
  margin-bottom:.4rem;
  color:var(--myabroad-navy);
  font-size: var(--myfont-card-text);
}

.mygrad-page.myabroad-page .myabroad-fact span,
.mygrad-page.myabroad-page .myabroad-info-grid span {
  display:block;
  font-size: var(--myfont-card-text);
  line-height:1.65;
}

/* 出國交換：聯絡窗口以下區塊橫跨整張卡片 */
.mygrad-page.myabroad-page .myabroad-exchange-full{
  grid-column:1 / -1;
  width:100%;
  padding:0 2.2rem 2.2rem;
  background:#fff;
}

.mygrad-page.myabroad-page .myabroad-exchange-full .myabroad-details,
.mygrad-page.myabroad-page .myabroad-exchange-full .myabroad-link-group{
  width:100%;
}

/* =========================================================
   06. Expandable details
   ========================================================= */

.mygrad-page.myabroad-page .myabroad-details{
  margin:1rem 0;
  background:#fff;
  border:1px solid var(--myabroad-line);
  border-radius:.6rem;
}

.mygrad-page.myabroad-page .myabroad-details summary {
  position:relative;
  padding:1rem 3.8rem 1rem 1.2rem;
  color:var(--myabroad-navy);
  background:#F3F5F8;
  border-radius:.6rem;
  cursor:pointer;
  font-size: var(--myfont-card-text);
  font-weight:700;
  list-style:none;
}

.mygrad-page.myabroad-page .myabroad-details summary::-webkit-details-marker{
  display:none;
}

.mygrad-page.myabroad-page .myabroad-details summary::after{
  content:"\f0d7";
  position:absolute;
  top:50%;
  right:1.3rem;
  color:var(--myabroad-navy);
  font-family:FontAwesome;
  font-size:1.5rem;
  transform:translateY(-50%);
}

.mygrad-page.myabroad-page .myabroad-details[open] summary::after{
  content:"\f0d8";
}

.mygrad-page.myabroad-page .myabroad-details[open] summary{
  border-bottom:1px solid var(--myabroad-line);
  border-radius:.6rem .6rem 0 0;
}

.mygrad-page.myabroad-page .myabroad-details>:not(summary){
  margin-right:1.4rem;
  margin-left:1.4rem;
}

.mygrad-page.myabroad-page .myabroad-details ul,
.mygrad-page.myabroad-page .myabroad-details ol {
  padding-left:2.2rem;
  font-size: var(--myfont-card-text);
  line-height:1.8;
}

.mygrad-page.myabroad-page .myabroad-details [role="heading"][aria-level="3"] {
  color:#486482;
  font-size: var(--myfont-card-text);
}

/* =========================================================
   07. Process, notices, links, contact
   ========================================================= */

.mygrad-page.myabroad-page .myabroad-process{
  display:flex;
  gap:.7rem;
  align-items:center;
  flex-wrap:wrap;
  padding:1.2rem 0;
}

.mygrad-page.myabroad-page .myabroad-process span {
  padding:.55rem .9rem;
  color:#fff;
  background:var(--myabroad-navy);
  border-radius:.4rem;
  font-size: var(--myfont-action);
}

.mygrad-page.myabroad-page .myabroad-notice {
  margin-top:1.2rem;
  padding:1rem 1.2rem;
  color:#695123;
  background:#FFF8E8;
  border-left:.4rem solid var(--myabroad-gold);
  border-radius:.4rem;
  font-size: var(--myfont-card-text);
  line-height:1.7;
}

.mygrad-page.myabroad-page .myabroad-link-group{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:1.5rem;
}

.mygrad-page.myabroad-page .myabroad-link-info-icon{
  display:inline-grid;
  width:1.7rem;
  height:1.7rem;
  place-items:center;
  color:#fff;
  background:var(--myabroad-gold);
  border-radius:50%;
  font-size:1.15rem;
  vertical-align:-.1rem;
}

.mygrad-page.myabroad-page .myabroad-contact{
  margin-top:1.5rem;
  padding:1.2rem 1.4rem;
  background:#F5F7FA;
  border:1px solid #D9DEE5;
  border-radius:.6rem;
}

.mygrad-page.myabroad-page .myabroad-contact>b {
  display:block;
  margin-bottom:.6rem;
  color:#2E4B70;
  font-size: var(--myfont-action);
}

.mygrad-page.myabroad-page .myabroad-contact p {
  margin:.25rem 0;
  font-size: var(--myfont-meta);
  line-height:1.55;
}

.mygrad-page.myabroad-page .myabroad-contact .fa,
.mygrad-page.myabroad-page .myabroad-contact-line .fa{
  width:1.7rem;
  color:#2E4B70;
  text-align:center;
}

.mygrad-page.myabroad-page .myabroad-contact-unit{
  margin-bottom:.3rem;
  font-weight:700;
}

.mygrad-page.myabroad-page .myabroad-contact-line{
  display:block;
}

/* =========================================================
   08. Responsive
   ========================================================= */

@media screen and (max-width:900px){
  .mygrad-page.myabroad-page .myabroad-program-card-wide,
  .mygrad-page.myabroad-page .myabroad-university-body{
    grid-template-columns:1fr;
  }

  .mygrad-page.myabroad-page #exchange .myabroad-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mygrad-page.myabroad-page .myabroad-map-panel{
    border-bottom:1px solid var(--myabroad-line);
  }
}

@media screen and (max-width:640px){
  .mygrad-page.myabroad-page .myabroad-hero{
    grid-template-columns:1fr;
    padding:1.8rem;
  }

  .mygrad-page.myabroad-page .myabroad-hero-icon{
    width:5.6rem;
    height:5.6rem;
    font-size:2.6rem;
  }

  .mygrad-page.myabroad-page .myabroad-university-header{
    grid-template-columns:1fr;
    padding:1.6rem;
  }

  .mygrad-page.myabroad-page .myabroad-country-badge{
    width:max-content;
  }

  /*
   * panel 是真正的橫向捲動容器。
   * frame 固定 72rem 產生 overflow；
   * canvas 仍維持 100%，與 frame / 地圖同步縮放。
   */
  .mygrad-page.myabroad-page .myabroad-map-panel{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:1.2rem;
  }

  .mygrad-page.myabroad-page .myabroad-map-scroll-note{
    display:block;
  }

  .mygrad-page.myabroad-page .myabroad-map-frame,
  .mygrad-page.myabroad-page #exchange .myabroad-map-frame{
    width:72rem;
    max-width:none;
  }

  .mygrad-page.myabroad-page .myabroad-map-canvas{
    width:100%;
    max-width:none;
  }

  .mygrad-page.myabroad-page .myabroad-content-panel{
    padding:1.6rem;
  }

  .mygrad-page.myabroad-page .myabroad-exchange-full{
    padding:0 1.6rem 1.6rem;
  }

  .mygrad-page.myabroad-page .myabroad-facts,
  .mygrad-page.myabroad-page .myabroad-info-grid,
  .mygrad-page.myabroad-page #exchange .myabroad-facts{
    grid-template-columns:1fr;
  }

  .mygrad-page.myabroad-page .myabroad-continent-label .myabroad-marker-label{
    width:max-content;
    max-width:19rem;
    min-width:0;
    white-space:normal;
  }

  .mygrad-page.myabroad-page .myabroad-link-group .mybtn{
    width:100%;
  }
}


/* v1.12 | Scholarship application-document reminder */
.mygrad-page.myscholar-page .myscholar-application-note {
  display:grid;
  grid-template-columns:9.2rem minmax(0,1fr);
  gap:.9rem;
  margin:.2rem 0 1.1rem;
  padding:.82rem .95rem;
  color:var(--myscholar-text);
  background:#FBF8EF;
  border:0.1rem solid #E5D7B6;
  border-left:.32rem solid var(--myscholar-gold);
  border-radius:.45rem;
  font-size: var(--myfont-meta);
  line-height:1.65;
}

.mygrad-page.myscholar-page .myscholar-application-note b{
  color:var(--myscholar-navy-dark);
}

.mygrad-page.myscholar-page .myscholar-application-note strong{
  color:#6F552D;
  font-weight:800;
}

@media (max-width: 767px){
  .mygrad-page.myscholar-page .myscholar-application-note{
    grid-template-columns:1fr;
    gap:.25rem;
  }
}


/* =========================================================
   v1.19-test｜2026-09-05｜Graduate Schedule faculty links
   - Course data moved to shared course_schedule.csv + course-schedule.js.
   - Graduate schedule typography/layout remain unchanged.
   ========================================================= */
.mygradcourse-page .mygradcourse-faculty-link {
  color: #2E4B70;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.mygradcourse-page .mygradcourse-faculty-link:hover,
.mygradcourse-page .mygradcourse-faculty-link:focus {
  color: #FFFFFF;
  background: #2E4B70;
  text-decoration: none;
}