/**
 * NDHU Economics Website
 * Undergraduate Family CSS
 * page-undergraduate_v3.7-test.css
 * Updated: 2026-09-06 02:02:00 (Asia/Taipei, UTC+8)
 *
 * Current architecture
 * - One shared outer shell: .myunder-page > [Page Header] + .myunder-content.
 * - One semantic typography owner per text element.
 * - Global style.css owns typography token values.
 * - This family CSS owns layout, component skin, responsive states, and documented special-UI sizing.
 * - Legacy component font-size declarations that compete with .myunder-* roles are removed.
 */

/* =========================================================
   UNDERGRADUATE FAMILY CORE v2.0
   Semantic Component Architecture
   ---------------------------------------------------------
   HARD RULE:
   - Project title roles are class-driven, not h1-h6-driven.
   - HTML uses non-heading elements + project semantic classes.
   - If heading semantics are required, HTML adds
     role="heading" + aria-level="N".
   - Typography values and >1025 scaling are owned exclusively
     by global style.css.

   Structural roles
   --------------------------------------------------------- */
.myunder-page {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.myunder-content {
  position: relative;
  width: min(100%, 132rem);
  margin: 0 auto;
  padding: clamp(1.2rem, 2.4vw, 3rem);
}

.myunder-section {
  position: relative;
}

/* Typography roles */
.myunder-section-title {
  font-size: var(--myfont-section-title);
}

.myunder-subsection-title {
  font-size: var(--myfont-subsection-title);
}

.myunder-feature-title {
  font-size: var(--myfont-feature-title);
}

.myunder-card-title {
  font-size: var(--myfont-card-title);
}

.myunder-lead {
  font-size: var(--myfont-body-important);
}

.myunder-body {
  font-size: var(--myfont-body);
}

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

.myunder-action {
  font-size: var(--myfont-action);
}

.myunder-meta {
  font-size: var(--myfont-meta);
}

.myunder-eyebrow {
  font-size: var(--myfont-eyebrow);
}

.myunder-note {
  /* visual modifier hook; size comes from one explicit semantic role */
}

/* =========================================================
   v2.0｜2026-08-23｜Structural Refactor
   ---------------------------------------------------------
   - Established Undergraduate semantic component core.
   - Typography now consumes global style.css tokens only.
   - Removed page-local font-size ownership from migrated
     title/lead/body/meta/note roles.
   - New project title architecture does not depend on h1-h6.
   ========================================================= */

/* =========================================================
   UNDERGRADUATE FAMILY｜Course
   Migrated from former page-course.css
   ========================================================= */
.timeline {
  font-family: "Noto Sans TC", sans-serif;
  
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  background-color: #A1A6B0;    /* 淺灰 #A1A6B0 */
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.mycontainer {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.mycontainer::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #101566;    /* 橘色#FF9F55,深藍#101566 */
  top: 15px;
  border-radius: 0%;           /* 圓形:50% */
  z-index: 1;
}

/* Place the container to the left */
.conleft {
  left: 0;
}

/* Place the container to the right */
.conright {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.conleft::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #C0C2E1; /* 中灰#9496AA,淺灰#BEBEBE,淺灰藍#C0C2E1*/
}
/* Fix the circle for containers on the left side */
.conleft::after {
  right: -12px;
}
/* Add arrows to the right container (pointing left) */
.conright::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #D9C6DA transparent transparent; /* 中灰#9496AA,淺灰#BEBEBE,淺紫#D9C6DA */
}

/* Fix the circle for containers on the right side */
.conright::after {
  left: -12px;
}

/* The actual content */
.semesterright {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  background-color: #D9C6DA; /* 中淺灰#A1A6B0,淺灰#BEBEBE,淺紫#D9C6DA */
  position: relative;
  border-radius: 6px;
}
.semesterleft {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  background-color: #C0C2E1; /* 中淺灰#A1A6B0,淺灰#BEBEBE,淺灰藍#C0C2E1 */
  position: relative;
  border-radius: 6px;
}
.semestertitle {
  padding: 5px 5px;
}
.courses {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 5px 5px;
  position: relative;
}
.courses button{
  margin: 3px;
}
.courseruleli {
  font-family: "Noto Sans TC", sans-serif;
  color: #272727;
  
  line-height: 200%;
  list-style-type: cjk-ideographic;    /* 中文數字編號 cjk-ideographic*/
}
.courserulelii {
  font-family: "Noto Sans TC", sans-serif;
  color: #272727;
  
  line-height: 150%;
}
.courseruleft {
  display:flex;
  align-items: center;
  font-family: "Noto Sans TC", sans-serif;
  color: #272727;
  
  line-height: 200%;
  list-style-type: none;
}


/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .mycontainer {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .mycontainer::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .conleft::after, .conright::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .conright {
  left: 0%;
  }
}

/*-- 自訂固定圖例符號 --*/
.mycoursemap-layout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.mycoursemap-content {
  flex: 1 1 auto;
  min-width: 0;
}
.myiconontop {
  position: fixed; /* Set the navbar to fixed position */
  top: 10px; /* Position the navbar at the top of the page */
  right: 10px;
  width: clamp(120px, 12vw, 180px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
}
.myiconontop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/*-- 自訂固定圖例符號 end--*/

/* =========================================================
   課程頁專屬輔助樣式
   ========================================================= */

.mycourse-query-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
}

.mycourse-query-btn {
    margin: 0 0.5rem;
    vertical-align: middle;
}

.courses .mybtn {
  margin: 0.3rem;
}

.myiconontop > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.myiconontop .mybtn {
  margin: 0.1rem;
}

/* =========================================================
   碩、博士班課程頁補充樣式
   ========================================================= */

/* 專業選修課程置中區塊 */
.concenter {
  position: relative;
  left: 15%;
  width: 70%;
  padding: 1rem 4rem;
  background-color: inherit;
}

/* 置中選修課程卡片 */
.semestercenter {
  position: relative;
  z-index: 3;
  display: flex;
  padding: 1rem 1.5rem;
  flex-direction: column;
  background-color: #BEBEBE;
  border-radius: 0.6rem;
}

/* 中文課程頁第一層條列用中文數字 */
.mycourse-page .courseruleli {
    list-style-type: cjk-ideographic;
}

/* 英文課程頁第一層條列用大寫羅馬數字 */
.mycourse-page-en .courseruleli {
    list-style-type: upper-roman;
}


/* 空白學分徽章不顯示 */
.mybadge:empty {
  display: none;
}

@media screen and (max-width: 600px) {
  .concenter {
    left: 0;
    width: 100%;
    padding-right: 2.5rem;
    padding-left: 7rem;
  }
}


/* =========================================================
   學士班｜本學期課表
   Desktop: weekly table / Mobile: weekday cards
   Data are rendered from shared course_schedule.csv via course-schedule.js.
   ========================================================= */

.mycourse-schedule {
  margin: 3rem 0 3.6rem;
}

.mycourse-schedule-head {
  margin: 0 0 1.6rem;
  padding: 1.4rem 1.6rem;
  background: #F7F8FA;
  border-left: 0.35rem solid #2E4B70;
}

.mycourse-schedule-head h2 {
  margin: 0 0 0.45rem;
  color: #17324D;
  font-family: "Noto Sans TC", sans-serif;
  
  font-weight: 800;
}

.mycourse-schedule-head p {
  margin: 0;
  color: #5F6670;
  font-family: "Noto Sans TC", sans-serif;
  
  line-height: 1.7;
}

.mycourse-schedule-desktop {
  display: block;
}

.mycourse-schedule-mobile {
  display: none;
}

.mycourse-week-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: "Noto Sans TC", sans-serif;
  background: #FFFFFF;
}

.mycourse-week-table th,
.mycourse-week-table td {
  padding: 0.75rem;
  border: 1px solid #D8DEE6;
  vertical-align: top;
}

.mycourse-week-table thead th {
  color: #FFFFFF;
  background: #2E4B70;
  
  text-align: center;
}

.mycourse-week-table tbody th {
  width: 9.5rem;
  color: #17324D;
  background: #F2F5F8;
  text-align: center;
}

.mycourse-schedule-period,
.mycourse-schedule-time {
  display: block;
}

.mycourse-schedule-period {
  font-weight: 800;
}

.mycourse-schedule-time {
  margin-top: 0.2rem;
  color: #69717A;
  
  font-weight: 500;
}

.mycourse-schedule-course {
  padding: 0.55rem 0.6rem;
  border-radius: 0.35rem;
  background: #F8F9FB;
  box-shadow: inset 0 0 0 1px rgba(46, 75, 112, 0.10);
}

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

.mycourse-schedule-name,
.mycourse-schedule-meta {
  display: block;
}

.mycourse-schedule-name {
  margin-top: 0.2rem;
  color: #252A30;
  
  line-height: 1.45;
}

.mycourse-schedule-tag {
  display: inline-block;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  color: #2E4B70;
  background: #E9EEF4;
  
  font-weight: 700;
}

.mycourse-schedule-meta {
  margin-top: 0.2rem;
  color: #606872;
  
  line-height: 1.45;
}

@media screen and (max-width: 760px) {
  .mycourse-schedule-desktop {
    display: none;
  }

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

  .mycourse-day-card {
    overflow: hidden;
    margin: 0 0 1.2rem;
    border: 1px solid #D8DEE6;
    border-radius: 0.55rem;
    background: #FFFFFF;
    box-shadow: 0 0.25rem 0.8rem rgba(30, 52, 74, 0.06);
  }

  .mycourse-day-card h3 {
    margin: 0;
    padding: 0.85rem 1rem;
    color: #FFFFFF;
    background: #2E4B70;
    font-family: "Noto Sans TC", sans-serif;
    
    font-weight: 800;
  }

  .mycourse-day-slot {
    display: grid;
    grid-template-columns: 6.3rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.95rem 1rem;
  }

  .mycourse-day-slot + .mycourse-day-slot {
    border-top: 1px solid #E4E8ED;
  }

  .mycourse-day-time {
    color: #17324D;
    font-family: "Noto Sans TC", sans-serif;
  }

  .mycourse-day-time b,
  .mycourse-day-time span {
    display: block;
  }

  .mycourse-day-time b {
    
  }

  .mycourse-day-time span {
    margin-top: 0.2rem;
    color: #69717A;
    
  }

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

@media screen and (max-width: 420px) {
  .mycourse-day-slot {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .mycourse-day-time {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
  }

  .mycourse-day-time span {
    margin-top: 0;
  }
}


/* =========================================================
   2026-08-12｜Undergraduate Course visual calibration
   ---------------------------------------------------------
   Purpose:
   - Establish the Undergraduate family content language beneath
     the colorful statistical-graphic Page Header.
   - Use warm paper surfaces, low-saturation category colors,
     fine pencil-like borders, and navy structural typography.
   - Consume Typography Scale 1.0 semantic tokens with fallbacks.
   - Scope all overrides to .mycourse-page so graduate course pages
     retain their existing presentation.
   ========================================================= */

.mycourse-page {
  --mycourse-ink: #27333D;
  --mycourse-navy: #2E4B70;
  --mycourse-paper: #FFFDF9;
  --mycourse-paper-alt: #FAF8F3;
  --mycourse-line: #DED9D0;
  --mycourse-muted: #66717C;

  /* Four curriculum categories: shared by rules, schedule, timeline. */
  --mycourse-foundation: #D5525F;
  --mycourse-foundation-soft: #FCE8EA;
  --mycourse-core: #E0AF22;
  --mycourse-core-soft: #FFF3C4;
  --mycourse-elective: #4F83A8;
  --mycourse-elective-soft: #EAF2F7;
  --mycourse-general: #558A72;
  --mycourse-general-soft: #EAF3EE;

  color: var(--mycourse-ink);
  font-family: "Noto Sans TC", sans-serif;
}

/* ---------- Undergraduate family identity: colored pencil title backdrop ----------
   v2.4:
   - Pencil strokes sit BEHIND the text, not beside/below it.
   - Four broad pastel strokes overlap like hand-drawn colored-pencil marks.
   - Each stroke tilts about 20–25 degrees.
   - Low opacity keeps title typography dominant and readable.
   ------------------------------------------------------------------------------- */

.mycourse-page .mycourse-pencil-title {
  position: relative;
  display: inline-flex !important;
  width: auto !important;
  max-width: calc(100% - 1rem);
  min-height: 4.4rem;
  align-items: center;
  margin-top: 1.8rem;
  margin-bottom: 1.4rem;
  padding: 0.35rem 1.1rem 0.45rem 0.65rem;
  overflow: visible;
  isolation: isolate;
  border: 0 !important;
  background: transparent !important;
}

/* Disable the ordinary mysectitle line treatment on these three
   Undergraduate course-page section headings. */
.mycourse-page .mycourse-pencil-title::before,
.mycourse-page .mycourse-pencil-title::after,
.mycourse-page .mycourse-pencil-title > span:first-child::before,
.mycourse-page .mycourse-pencil-title > span:first-child::after {
  display: none !important;
  content: none !important;
}

.mycourse-page .mycourse-pencil-title > span:first-child {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: var(--mycourse-ink);
  
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.96),
    0 0 0.45rem rgba(255,255,255,0.66);
}

/* The existing four empty <i> elements become a background brush group. */
.mycourse-page .mycourse-pencil-strokes {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0.2rem;
  display: block;
  width: calc(100% - 0.2rem);
  min-width: 17rem;
  height: 3.8rem;
  margin: 0;
  transform: translateY(-47%);
  opacity: 0.32;
  pointer-events: none;
}

/* Broad diagonal pencil marks with faint internal paper gaps. */
.mycourse-page .mycourse-pencil-strokes i {
  position: absolute;
  top: 50%;
  display: block;
  width: 31%;
  min-width: 5.8rem;
  height: 1.65rem;
  border-radius: 45% 28% 48% 32% / 55% 40% 58% 44%;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.36) 0,
      rgba(255,255,255,0.36) 0.12rem,
      transparent 0.12rem,
      transparent 0.34rem
    );
  background-blend-mode: soft-light;
  box-shadow:
    0 0.13rem 0 rgba(255,255,255,0.22) inset,
    0 -0.1rem 0 rgba(60,60,60,0.04) inset;
  transform-origin: center;
}

/* Remove the former thin "double-line" marks. */
.mycourse-page .mycourse-pencil-strokes i::before,
.mycourse-page .mycourse-pencil-strokes i::after {
  content: none !important;
  display: none !important;
}

/* Overlapping color sequence: red → yellow → blue → green.
   The different top offsets imitate loosely stacked pencil strokes. */
.mycourse-page .mycourse-pencil-strokes i:nth-child(1) {
  left: 0;
  top: 54%;
  background-color: var(--mycourse-foundation);
  transform: translateY(-50%) rotate(-24deg) scaleX(1.08);
}

.mycourse-page .mycourse-pencil-strokes i:nth-child(2) {
  left: 24%;
  top: 46%;
  background-color: var(--mycourse-core);
  transform: translateY(-50%) rotate(-20deg) scaleX(1.12);
}

.mycourse-page .mycourse-pencil-strokes i:nth-child(3) {
  left: 49%;
  top: 55%;
  background-color: var(--mycourse-elective);
  transform: translateY(-50%) rotate(-25deg) scaleX(1.08);
}

.mycourse-page .mycourse-pencil-strokes i:nth-child(4) {
  left: 72%;
  top: 44%;
  width: 27%;
  background-color: var(--mycourse-general);
  transform: translateY(-50%) rotate(-21deg) scaleX(1.12);
}

@media screen and (max-width: 640px) {
  .mycourse-page .mycourse-pencil-title {
    min-height: 4rem;
    margin-top: 1.5rem;
    margin-bottom: 1.2rem;
    padding-right: 0.7rem;
  }

  .mycourse-page .mycourse-pencil-title > span:first-child {
    
  }

  .mycourse-page .mycourse-pencil-strokes {
    min-width: 14rem;
    height: 3.4rem;
    opacity: 0.29;
  }

  .mycourse-page .mycourse-pencil-strokes i {
    height: 1.45rem;
  }
}

/* ---------- Shared paper-card language ---------- */
.mycourse-page .rule-note,
.mycourse-page .mycourse-schedule-head,
.mycourse-page .semesterleft,
.mycourse-page .semesterright {
  border: 1px solid var(--mycourse-line);
  background: var(--mycourse-paper);
  box-shadow: 0 0.35rem 1.1rem rgba(46, 75, 112, 0.06);
}

.mycourse-page .rule-note {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.6rem;
  padding: 1.8rem 2.2rem 1.7rem;
  border-radius: 0.7rem;
}

.mycourse-page .rule-note::before,
.mycourse-page .mycourse-schedule-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.32rem;
  background: linear-gradient(
    90deg,
    var(--mycourse-foundation) 0 25%,
    var(--mycourse-core) 25% 50%,
    var(--mycourse-elective) 50% 75%,
    var(--mycourse-general) 75% 100%
  );
  opacity: 0.82;
}

.mycourse-page .courseruleli {
  color: var(--mycourse-ink);
  
  line-height: 1.9;
}

.mycourse-page .courserulelii {
  color: var(--mycourse-ink);
  
  line-height: 1.75;
}

.mycourse-page .courseruleft {
  color: var(--mycourse-ink);
  
  line-height: 1.8;
}

/* ---------- One category palette across rules + course map ---------- */
.mycourse-page .mybtn-red,
.mycourse-page .mybtn-orange,
.mycourse-page .mybtn-blue,
.mycourse-page .mybtn-green {
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  
  font-weight: 700;
}

.mycourse-page .mybtn-red {
  color: #97313D;
  border-color: rgba(213, 82, 95, 0.64);
  background: var(--mycourse-foundation-soft);
}

.mycourse-page .mybtn-orange {
  color: #795C00;
  border-color: rgba(224, 175, 34, 0.68);
  background: var(--mycourse-core-soft);
}

.mycourse-page .mybtn-blue {
  color: #315D7B;
  border-color: rgba(79, 131, 168, 0.58);
  background: var(--mycourse-elective-soft);
}

.mycourse-page .mybtn-green {
  color: #35624F;
  border-color: rgba(85, 138, 114, 0.58);
  background: var(--mycourse-general-soft);
}

.mycourse-page .mybtn-red:hover,
.mycourse-page .mybtn-red:focus {
  color: #FFFFFF !important;
  border-color: var(--mycourse-foundation);
  background: var(--mycourse-foundation);
}

.mycourse-page .mybtn-orange:hover,
.mycourse-page .mybtn-orange:focus {
  color: #FFFFFF !important;
  border-color: var(--mycourse-core);
  background: var(--mycourse-core);
}

.mycourse-page .mybtn-blue:hover,
.mycourse-page .mybtn-blue:focus {
  color: #FFFFFF !important;
  border-color: var(--mycourse-elective);
  background: var(--mycourse-elective);
}

.mycourse-page .mybtn-green:hover,
.mycourse-page .mybtn-green:focus {
  color: #FFFFFF !important;
  border-color: var(--mycourse-general);
  background: var(--mycourse-general);
}

.mycourse-page .mybtn:hover .mybadge,
.mycourse-page .mybtn:focus .mybadge {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.18);
}

.mycourse-page .mybadge {
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
}

/* ---------- Timeline: same paper + pencil language ---------- */
.mycourse-page .timeline {
  
}

.mycourse-page .timeline::after {
  width: 0.35rem;
  margin-left: -0.175rem;
  background: #B8B5AE;
}

.mycourse-page .mycontainer::after {
  width: 2rem;
  height: 2rem;
  border: 0.32rem solid var(--mycourse-navy);
  background: var(--mycourse-paper);
}

.mycourse-page .semesterleft,
.mycourse-page .semesterright {
  border-radius: 0.7rem;
}

.mycourse-page .semesterleft {
  border-top: 0.3rem solid rgba(79, 131, 168, 0.62);
}

.mycourse-page .semesterright {
  border-top: 0.3rem solid rgba(212, 163, 31, 0.68);
}

.mycourse-page .conleft::before {
  border-color: transparent transparent transparent var(--mycourse-line);
}

.mycourse-page .conright::before {
  border-color: transparent var(--mycourse-line) transparent transparent;
}

.mycourse-page .semestertitle h2 {
  color: var(--mycourse-navy);
  font-size: var(--myfont-feature-title, 2rem);
  font-weight: 800;
  line-height: 1.35;
}

/* ---------- Current schedule: integrated visual language ---------- */
.mycourse-page .mycourse-schedule {
  margin: 3.2rem 0 3.8rem;
}

.mycourse-page .mycourse-schedule-head {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.6rem;
  padding: 1.7rem 1.9rem 1.55rem;
  border-left: 1px solid var(--mycourse-line);
  border-radius: 0.7rem;
}

.mycourse-page .mycourse-schedule-head h2 {
  margin: 0 0 0.55rem;
  color: var(--mycourse-navy);
  
  font-weight: 800;
  line-height: 1.35;
}

.mycourse-page .mycourse-schedule-head p {
  color: var(--mycourse-muted);
  
  line-height: 1.75;
}

.mycourse-page .mycourse-week-table {
  border: 1px solid var(--mycourse-line);
  background: var(--mycourse-paper);
  box-shadow: 0 0.35rem 1.2rem rgba(46, 75, 112, 0.06);
}

.mycourse-page .mycourse-week-table th,
.mycourse-page .mycourse-week-table td {
  padding: 1rem 0.9rem;
  border-color: var(--mycourse-line);
}

.mycourse-page .mycourse-week-table thead th {
  color: #243E57;
  background: #F1EEE7;
  border-top: 0.3rem solid var(--mycourse-navy);
  font-size: var(--myfont-body, 1.7rem);
  font-weight: 800;
}

.mycourse-page .mycourse-week-table tbody th {
  color: var(--mycourse-navy);
  background: #F7F4EE;
}

.mycourse-page .mycourse-schedule-period {
  font-size: var(--myfont-body, 1.7rem);
  font-weight: 800;
}

.mycourse-page .mycourse-schedule-time {
  margin-top: 0.3rem;
  color: var(--mycourse-muted);
  font-size: var(--myfont-meta, 1.5rem);
  line-height: 1.45;
}

.mycourse-page .mycourse-schedule-course {
  position: relative;
  overflow: hidden;
  padding: 0.85rem 0.9rem 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: var(--mycourse-paper-alt);
  box-shadow: none;
}

.mycourse-page .mycourse-schedule-course::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.35rem;
  background: currentColor;
  opacity: 0.85;
}

.mycourse-page .mycourse-schedule-course + .mycourse-schedule-course {
  margin-top: 0.7rem;
}

.mycourse-page .mycourse-schedule-name {
  margin-top: 0.38rem;
  color: var(--mycourse-ink);
  font-size: var(--myfont-card-text, 1.6rem);
  font-weight: 800;
  line-height: 1.45;
}

.mycourse-page .mycourse-schedule-tag {
  padding: 0.16rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  font-size: var(--myfont-eyebrow, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
}

.mycourse-page .mycourse-schedule-meta {
  margin-top: 0.38rem;
  color: var(--mycourse-muted);
  font-size: var(--myfont-meta, 1.5rem);
  line-height: 1.55;
}

.mycourse-page .mycourse-meta-sep {
  color: #AAA49A;
}

.mycourse-page .mycourse-faculty-link {
  color: var(--mycourse-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

/* Schedule course categories mirror .mybtn red/orange/blue/green. */
.mycourse-page .mycourse-kind-foundation {
  color: var(--mycourse-foundation);
  border-color: rgba(201, 79, 93, 0.42);
  background: var(--mycourse-foundation-soft);
}

.mycourse-page .mycourse-kind-core {
  color: var(--mycourse-core);
  border-color: rgba(212, 163, 31, 0.45);
  background: var(--mycourse-core-soft);
}

.mycourse-page .mycourse-kind-elective {
  color: var(--mycourse-elective);
  border-color: rgba(79, 131, 168, 0.38);
  background: var(--mycourse-elective-soft);
}

.mycourse-page .mycourse-kind-general {
  color: var(--mycourse-general);
  border-color: rgba(85, 138, 114, 0.38);
  background: var(--mycourse-general-soft);
}

.mycourse-page .mycourse-kind-foundation .mycourse-schedule-tag,
.mycourse-page .mycourse-kind-core .mycourse-schedule-tag,
.mycourse-page .mycourse-kind-elective .mycourse-schedule-tag,
.mycourse-page .mycourse-kind-general .mycourse-schedule-tag {
  color: inherit;
}


/* All functional hover/focus text on this course page reverses to white. */
.mycourse-page a.mybtn:hover,
.mycourse-page a.mybtn:focus,
.mycourse-page button.mybtn:hover,
.mycourse-page button.mybtn:focus,
.mycourse-page .mycourse-query-btn:hover,
.mycourse-page .mycourse-query-btn:focus {
  color: #FFFFFF !important;
}

.mycourse-page .mycourse-faculty-link:hover,
.mycourse-page .mycourse-faculty-link:focus {
  color: #FFFFFF !important;
}

/* ---------- Mobile: same scale; no routine text shrinking ---------- */
@media screen and (max-width: 760px) {

  .mycourse-page .mycourse-pencil-title {
    align-items: flex-start;
    gap: 0.45rem;
  }

  .mycourse-page .mycourse-pencil-strokes {
    width: 11rem;
    height: 1.7rem;
    margin-top: 0.05rem;
  }
  .mycourse-page .rule-note {
    padding: 1.5rem 1.45rem 1.4rem;
  }

  .mycourse-page .mycourse-day-card {
    border-color: var(--mycourse-line);
    border-radius: 0.7rem;
    background: var(--mycourse-paper);
    box-shadow: 0 0.3rem 1rem rgba(46, 75, 112, 0.06);
  }

  .mycourse-page .mycourse-day-card h3 {
    padding: 1rem 1.15rem;
    color: var(--mycourse-navy);
    background: #F1EEE7;
    border-top: 0.3rem solid var(--mycourse-navy);
    font-size: var(--myfont-feature-title, 2rem);
  }

  .mycourse-page .mycourse-day-slot {
    grid-template-columns: 8.2rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem;
  }

  .mycourse-page .mycourse-day-slot + .mycourse-day-slot {
    border-top-color: var(--mycourse-line);
  }

  .mycourse-page .mycourse-day-time {
    color: var(--mycourse-navy);
  }

  .mycourse-page .mycourse-day-time b {
    font-size: var(--myfont-body, 1.7rem);
  }

  .mycourse-page .mycourse-day-time span {
    color: var(--mycourse-muted);
    font-size: var(--myfont-meta, 1.5rem);
    line-height: 1.45;
  }


  .mycourse-page .mycourse-schedule-meta {
    font-size: var(--myfont-meta, 1.5rem);
  }
}

@media screen and (max-width: 420px) {
  .mycourse-page .mycourse-day-slot {
    grid-template-columns: 1fr;
  }

  .mycourse-page .mycourse-day-time {
    gap: 0.75rem;
  }
}


/* =========================================================
   v2.5｜2026-08-13（UTC+8）
   課表密度、課程地圖標題、Legend 觸發區與 PDF 下載入口微調
   ========================================================= */

/* 課程地圖標題單獨置中；其餘鉛筆標題維持原對齊。 */
.mycourse-page .mycourse-pencil-title-center {
  display: flex !important;
  width: fit-content !important;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* 課表標題 + PDF 下載 */
.mycourse-page .mycourse-schedule-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.mycourse-page .mycourse-schedule-title-row h2 {
  margin: 0;
  min-width: 0;
}

.mycourse-page .mycourse-schedule-download {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mycourse-page .mycourse-schedule-download i {
  margin-right: 0.35rem;
}

.mycourse-page .mycourse-schedule-download:hover,
.mycourse-page .mycourse-schedule-download:focus {
  color: #FFFFFF !important;
}

/* 桌機週課表：第 1 欄只保留節次需要的寬度，其餘平均分給週一至週五。 */
.mycourse-page .mycourse-week-table {
  width: 100%;
  table-layout: fixed;
}

.mycourse-page .mycourse-week-table thead th:first-child,
.mycourse-page .mycourse-week-table tbody th {
  width: 6.2rem;
  min-width: 6.2rem;
  max-width: 6.2rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.mycourse-page .mycourse-week-table thead th:not(:first-child),
.mycourse-page .mycourse-week-table tbody td {
  width: calc((100% - 6.2rem) / 5);
}

/* 節次與時間：時間拆成 起始 / 垂直連接符 / 結束 三行。 */
.mycourse-page .mycourse-schedule-period {
  white-space: nowrap;
}

.mycourse-page .mycourse-schedule-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 0.25rem;
  white-space: nowrap;
  line-height: 1.18;
}

.mycourse-page .mycourse-time-connector {
  display: block;
  height: 1.15em;
  color: #9A958B;
  font-size: 0.9em;
  line-height: 1.05;
}

/* 每門課固定為「主資訊 + 教師/教室」兩個視覺層級。
   主資訊同一行：類別 + 課名。 */
.mycourse-page .mycourse-schedule-course {
  padding: 0.62rem 0.7rem 0.6rem 0.85rem;
}

.mycourse-page .mycourse-schedule-main {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}

.mycourse-page .mycourse-schedule-main .mycourse-schedule-tag {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--myfont-card-text, 1.6rem);
  line-height: 1.35;
}

.mycourse-page .mycourse-schedule-main .mycourse-schedule-name {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--mycourse-ink);
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mycourse-page .mycourse-schedule-meta {
  display: block;
  min-height: 1.55em;
  margin-top: 0.2rem;
  overflow: hidden;
  font-size: var(--myfont-meta, 1.5rem);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mycourse-page .mycourse-schedule-meta-empty {
  visibility: hidden;
}

/* 教師 hover 維持反白，但不增加垂直高度。 */
.mycourse-page .mycourse-schedule-meta .mycourse-faculty-link {
  display: inline;
  padding: 0 0.08em;
}

/* 手機仍維持星期卡片；不套用桌機窄欄限制。 */
@media screen and (max-width: 760px) {
  .mycourse-page .mycourse-schedule-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .mycourse-page .mycourse-schedule-download {
    align-self: flex-start;
  }

  .mycourse-page .mycourse-day-time .mycourse-schedule-time {
    align-items: flex-start;
  }

  .mycourse-page .mycourse-schedule-main {
    white-space: normal;
  }

  .mycourse-page .mycourse-schedule-main .mycourse-schedule-name,
  .mycourse-page .mycourse-schedule-meta {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* =========================================================
   v2.7｜2026-08-13（UTC+8）
   - Undergraduate Page Header family 規則移至共用 page-header.css v1.8。
   - 課程頁彩鉛 section 標題、課表、課程地圖、分類色與 ellipsis 維持。
   ========================================================= */


/* =========================================================
   v2.8｜2026-08-13（UTC+8）
   手機版課規查詢列修正
   - 不再強迫「更多資訊請點選＋按鈕＋查詢」塞在同一個 flex row。
   - 按鈕文字維持單行，外部文字允許自然換行。
   ========================================================= */

@media screen and (max-width: 760px) {
  .mycourse-page .courseruleft {
    display: block;
  }

  .mycourse-page .mycourse-query-btn {
    display: inline-block;
    margin: 0.35rem 0.4rem;
    white-space: nowrap;
  }
}


/* =========================================================
   v2.9｜2026-08-13（UTC+8）
   English undergraduate schedule refinement
   - Widen Period / Time column so "Period 4" stays inside the cell.
   - English course cards use four explicit lines:
     category / course / instructor / classroom.
   - Query-system period stays visually attached to the button.
   ========================================================= */

.mycourse-page-en .mycourse-week-table thead th:first-child,
.mycourse-page-en .mycourse-week-table tbody th {
  width: 8.4rem;
  min-width: 8.4rem;
  max-width: 8.4rem;
}

.mycourse-page-en .mycourse-week-table thead th:not(:first-child),
.mycourse-page-en .mycourse-week-table tbody td {
  width: calc((100% - 8.4rem) / 5);
}

.mycourse-page-en .mycourse-schedule-period {
  display: block;
  white-space: nowrap;
}

.mycourse-page-en .mycourse-schedule-course {
  display: block;
}

.mycourse-page-en .mycourse-schedule-tag,
.mycourse-page-en .mycourse-schedule-name,
.mycourse-page-en .mycourse-schedule-teacher,
.mycourse-page-en .mycourse-schedule-room {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.mycourse-page-en .mycourse-schedule-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--myfont-card-text, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
}

.mycourse-page-en .mycourse-schedule-name {
  margin-top: 0.12rem;
  color: var(--mycourse-ink);
  font-weight: 800;
  line-height: 1.35;
}

.mycourse-page-en .mycourse-schedule-teacher,
.mycourse-page-en .mycourse-schedule-room {
  margin-top: 0.12rem;
  
  line-height: 1.4;
}

.mycourse-page-en .mycourse-schedule-line-empty {
  visibility: hidden;
}

.mycourse-page-en .mycourse-schedule-teacher .mycourse-faculty-link {
  display: inline;
  padding: 0 0.08em;
}

/* The punctuation is a separate inline node immediately after the button,
   so it does not inherit button spacing or create a visible gap. */
.mycourse-page-en .mycourse-query-period {
  margin-left: 0;
  white-space: nowrap;
}

@media screen and (max-width: 760px) {
  .mycourse-page-en .mycourse-query-period {
    margin-left: -0.25rem;
  }
}

/* =========================================================
   UNDERGRADUATE FAMILY｜AI
   Migrated from former page-ai.css
   ========================================================= */
.myai-page{
  --myai-ink:#27333D;--myai-navy:#2E4B70;--myai-paper:#FFFDF9;--myai-line:#DED9D0;--myai-muted:#66717C;
  --myai-red:#D5525F;--myai-red-soft:#FCE8EA;--myai-yellow:#E0AF22;--myai-yellow-soft:#FFF3C4;
  --myai-blue:#4F83A8;--myai-blue-soft:#EAF2F7;--myai-green:#558A72;--myai-green-soft:#EAF3EE;
  --myai-purple:#8A6FA8;--myai-purple-soft:#F1EAF8;
  color:var(--myai-ink);
  font-family:"Noto Sans TC",sans-serif;line-height:1.8
;}
.myai-page.mycustom-title-page{padding-top:0;}
.myai-page *,.myai-page *::before,.myai-page *::after{box-sizing:border-box;}
.myai-section{margin:0 0 5rem;scroll-margin-top:2rem;}

.myai-quicknav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.7rem;margin:0 0 3rem;padding:1rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.8rem;}
.myai-quicknav a{display:flex;min-height:4.4rem;align-items:center;justify-content:center;padding:.65rem .8rem;color:var(--myai-ink);border:1px solid var(--myai-line);border-radius:999px;font-weight:700;text-align:center;text-decoration:none;}
.myai-quicknav a:nth-child(1){background:var(--myai-yellow-soft);} .myai-quicknav a:nth-child(2){background:var(--myai-blue-soft);}
.myai-quicknav a:nth-child(3){background:var(--myai-purple-soft);} .myai-quicknav a:nth-child(4){background:var(--myai-green-soft);}
.myai-quicknav a:nth-child(5){background:var(--myai-red-soft);} .myai-quicknav a:nth-child(6){background:#F0F1F5;}
.myai-quicknav a:hover,.myai-quicknav a:focus{color:#fff;background:var(--myai-navy);border-color:var(--myai-navy);}

.myai-section-title{position:relative;display:inline-flex;max-width:calc(100% - 1rem);min-height:4.4rem;align-items:center;margin:0 0 1.5rem;padding:.35rem 1.1rem .45rem .65rem;isolation:isolate;}
.myai-section-title>span:first-child{position:relative;z-index:2;font-weight:800;line-height:1.3;text-shadow:0 1px 0 #fff,0 0 .45rem rgba(255,255,255,.66);}
.myai-pencil-strokes{position:absolute;z-index:0;top:50%;left:.2rem;display:block;width:calc(100% - .2rem);min-width:17rem;height:3.8rem;transform:translateY(-47%);opacity:.28;pointer-events:none;}
.myai-pencil-strokes i{position:absolute;display:block;width:31%;height:1.55rem;border-radius:45% 55% 48% 52%;}
.myai-pencil-strokes i:nth-child(1){left:0;top:54%;background:var(--myai-red);transform:translateY(-50%) rotate(-24deg);}
.myai-pencil-strokes i:nth-child(2){left:24%;top:46%;background:var(--myai-yellow);transform:translateY(-50%) rotate(-20deg);}
.myai-pencil-strokes i:nth-child(3){left:49%;top:55%;background:var(--myai-blue);transform:translateY(-50%) rotate(-25deg);}
.myai-pencil-strokes i:nth-child(4){left:72%;top:44%;background:var(--myai-green);transform:translateY(-50%) rotate(-21deg);}

.myai-opening{max-width:92rem;margin:0 0 2rem;}.myai-opening p{margin:0 0 1rem;}
.myai-flow{display:grid;gap:1.2rem;margin:2rem 0;}.myai-flow-four{grid-template-columns:repeat(4,minmax(0,1fr));}
.myai-flow-node{position:relative;min-height:11rem;padding:1.4rem 1.5rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.75rem;}
.myai-flow-node::after{content:"→";position:absolute;top:50%;right:-1.1rem;z-index:2;color:#9A958B;font-size:2rem;transform:translateY(-50%);} .myai-flow-node:last-child::after{content:none;}
.myai-flow-node b,.myai-flow-node span{display:block;}.myai-flow-node b{margin-bottom:.45rem;color:var(--myai-navy);}.myai-flow-node span{color:var(--myai-muted);}
.myai-keyline{margin:2rem 0 0;padding:1rem 1.4rem;color:var(--myai-navy);background:#F5F7F9;border-left:.35rem solid var(--myai-blue);font-weight:700;}
.myai-section-lead{margin:0 0 1.8rem;color:var(--myai-muted);}

.myai-learning-path{display:grid;justify-items:center;gap:.8rem;margin:2rem 0 3rem;}
.myai-path-step,.myai-path-destination{width:min(100%,62rem);padding:1.6rem 1.8rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.8rem;text-align:center;}
.myai-path-step-base{background:#F3F5F7;}.myai-path-arrow{color:#918B80;font-size:3rem;line-height:1;}
.myai-step-kicker{display:inline-block;margin-bottom:.35rem;color:var(--myai-muted);font-weight:700;}
.myai-path-step h3,.myai-path-destination h3,.myai-program-card h3,.myai-coming-next h3{margin:0 0 .55rem;color:var(--myai-navy);font-family:"Noto Serif TC",serif;font-size:2rem;}
.myai-econ-course-path{display:grid;width:min(100%,72rem);grid-template-columns:repeat(5,auto);gap:.7rem;align-items:center;justify-content:center;}
.myai-course-step{min-width:16rem;padding:1.25rem 1.35rem;background:var(--myai-blue-soft);border:1px solid #BDD3E1;border-radius:.75rem;text-align:center;}
.myai-course-step:nth-of-type(2){background:var(--myai-green-soft);} .myai-course-step:nth-of-type(3){background:var(--myai-purple-soft);}
.myai-course-step span{display:block;color:var(--myai-muted);}.myai-course-step h3{margin:.2rem 0 0;font-size:1.6rem;}.myai-mini-arrow{color:#918B80;font-size:2rem;}
.myai-path-destination{background:var(--myai-yellow-soft);border-color:#E7CD70;}
.myai-deeper{margin:3rem 0 2rem;}.myai-subheading{margin:0 0 1.2rem;color:var(--myai-navy);text-align:center;}
.myai-deeper-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1.2rem;}.myai-program-card{padding:1.5rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.8rem;}
.myai-program-card-primary{background:var(--myai-purple-soft);}.myai-program-flow{display:flex;gap:.45rem;flex-wrap:wrap;margin:1rem 0;}.myai-program-flow span{padding:.3rem .7rem;background:#fff;border:1px solid var(--myai-line);border-radius:999px;}
.myai-coming-next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:center;margin-top:2rem;padding:1.4rem 1.6rem;background:#F2F0F5;border:1px dashed #BEB4C9;border-radius:.8rem;}
.myai-coming-next>span{padding:.35rem .8rem;background:#fff;border:1px solid #CDBFD8;border-radius:999px;font-weight:700;}

.myai-link{display:inline-block;margin-top:.6rem;color:var(--myai-navy);font-weight:700;text-decoration:underline;}.myai-link:hover,.myai-link:focus{color:#fff;background:var(--myai-navy);text-decoration:none;}
.myai-btn{display:inline-block;padding:.65rem 1.15rem;color:#fff;background:var(--myai-navy);border:1px solid var(--myai-navy);border-radius:.55rem;font-weight:700;text-decoration:none;}.myai-btn:hover,.myai-btn:focus{color:#fff;background:#1F3550;}
.myai-btn-secondary{color:var(--myai-navy);background:#fff;}.myai-btn-secondary:hover,.myai-btn-secondary:focus{color:#fff;background:var(--myai-navy);}

.myai-collab-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:1.3rem;align-items:center;margin:1.5rem 0;}.myai-collab-compare article{padding:1.5rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.8rem;}.myai-collab-compare article:last-child{background:var(--myai-purple-soft);}
.myai-collab-compare h3{margin:0 0 1rem;color:var(--myai-navy);text-align:center;}.myai-collab-arrow{color:var(--myai-purple);font-size:2.5rem;}
.myai-mini-flow{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;justify-content:center;}.myai-mini-flow span{padding:.35rem .65rem;background:#fff;border:1px solid var(--myai-line);border-radius:.45rem;}.myai-mini-flow i{font-style:normal;}
.myai-three-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2rem;}.myai-three-stage article{padding:1.5rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-top:.3rem solid var(--myai-blue);border-radius:.75rem;}.myai-three-stage article:nth-child(2){border-top-color:var(--myai-green);}.myai-three-stage article:nth-child(3){border-top-color:var(--myai-purple);}.myai-stage-number{color:#AAA39A;font-weight:800;}

.myai-workshop{overflow:hidden;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.9rem;}.myai-workshop-heading{padding:1.7rem 1.8rem;background:var(--myai-green-soft);border-bottom:1px solid var(--myai-line);}.myai-workshop-heading h3{margin:.2rem 0 .6rem;color:var(--myai-navy);font-family:"Noto Serif TC",serif;}.myai-workshop-session{padding:1.7rem 1.8rem 1.9rem;}.myai-workshop-session h4{margin:0 0 1.1rem;font-size:2rem;}
.myai-session-flow{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin:1rem 0 1.2rem;}.myai-session-flow span{padding:.4rem .75rem;background:#fff;border:1px solid var(--myai-line);border-radius:999px;}.myai-session-flow i{font-style:normal;}.myai-action-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem;}

.myai-apply-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;}.myai-apply-grid article{min-height:13rem;padding:1.4rem 1.5rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.75rem;}.myai-apply-grid article:nth-child(1),.myai-apply-grid article:nth-child(4){border-top:.3rem solid var(--myai-yellow);}.myai-apply-grid article:nth-child(2),.myai-apply-grid article:nth-child(5){border-top:.3rem solid var(--myai-blue);}.myai-apply-grid article:nth-child(3),.myai-apply-grid article:nth-child(6){border-top:.3rem solid var(--myai-green);}.myai-apply-grid h3{margin:.2rem 0 .5rem;color:var(--myai-navy);}
.myai-warning{margin-top:1.8rem;padding:1.5rem 1.7rem;background:var(--myai-yellow-soft);border-left:.4rem solid var(--myai-yellow);border-radius:.65rem;}.myai-warning strong{display:block;margin-bottom:.4rem;}

.myai-ethics-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;}.myai-ethics-grid article{padding:1.25rem;background:var(--myai-paper);border:1px solid var(--myai-line);border-radius:.75rem;text-align:center;}.myai-ethics-grid .fa{margin-bottom:.6rem;color:var(--myai-purple);font-size:2.2rem;}.myai-ethics-grid h3{margin:0 0 .45rem;color:var(--myai-navy);font-size:1.6rem;}.myai-ethics-grid p{margin:0;color:var(--myai-muted);}
.myai-academic-note{margin-top:1.5rem;padding:1.4rem 1.6rem;background:#F4F4F6;border:1px solid var(--myai-line);border-radius:.7rem;}.myai-center-action{margin-top:1.4rem;text-align:center;}

@media screen and (max-width:900px){
  .myai-quicknav{grid-template-columns:repeat(3,minmax(0,1fr));}
  .myai-flow-four,.myai-deeper-grid,.myai-three-stage,.myai-apply-grid{grid-template-columns:1fr;}
  .myai-flow-node::after{content:"↓";top:auto;right:50%;bottom:-1.4rem;transform:translateX(50%);}
  .myai-econ-course-path{width:min(100%,48rem);grid-template-columns:1fr;}.myai-mini-arrow{text-align:center;}
  .myai-collab-compare{grid-template-columns:1fr;}.myai-collab-arrow{transform:rotate(90deg);text-align:center;}
  .myai-ethics-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.myai-ethics-grid article:last-child{grid-column:1/-1;}
}
@media screen and (max-width:640px){
  .myai-page{}.myai-page.mycustom-title-page{padding-top:0;}
  .myai-quicknav{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;padding:.8rem;}
  .myai-section{margin-bottom:4rem;}.myai-section-title{max-width:100%;min-height:4rem;padding-right:.45rem;}
  .myai-section-title>span:first-child{}
  .myai-pencil-strokes{min-width:14rem;height:3.4rem;}
  .myai-coming-next{grid-template-columns:1fr;}
  .myai-action-row{display:grid;grid-template-columns:1fr;}.myai-action-row .myai-btn{width:100%;text-align:center;}
}


/* =========================================================
   prototype v1.1｜2026-08-13
   - WHY workflow arrows enlarged for stronger visual direction.
   - Section closing rule moved to the bottom of every section.
   - Department AI/Data courses use "+" because 3 courses combine
     to satisfy the 9-credit micro-program requirement.
   - Main learning-path arrows enlarged and strengthened.
   ========================================================= */

/* 1. WHY: make arrows between nodes clearly visible. */
.myai-flow-node::after{
  right:-1.65rem;
  color:var(--myai-blue);
  font-size:3.2rem;
  font-weight:900;
  line-height:1;
  text-shadow:0 .08rem 0 rgba(255,255,255,.9);
}

/* 3. The blue line is a section-ending signal, not a side accent. */
.myai-keyline{
  padding:1rem 1.4rem 1.15rem;
  border-left:0;
  background:#F5F7F9;
}

.myai-section::after{
  content:"";
  display:block;
  width:100%;
  height:.24rem;
  margin-top:2.5rem;
  border-radius:999px;
  background:var(--myai-blue);
  opacity:.58;
}

/* 4. The three ECON courses add together; they are not a required sequence. */
.myai-course-plus{
  color:var(--myai-blue);
  font-size:3rem;
  font-weight:900;
  line-height:1;
  text-align:center;
}

/* Main vertical transitions in the learning path should read immediately. */
.myai-path-arrow{
  display:flex;
  min-height:4.6rem;
  align-items:center;
  justify-content:center;
  color:var(--myai-blue);
  font-size:4.8rem;
  font-weight:900;
  line-height:1;
}

.myai-path-arrow .fa{
  font-weight:900;
}

/* Responsive: strong vertical arrows remain visible without overflowing. */
@media screen and (max-width:900px){
  .myai-flow-node::after{
    right:50%;
    bottom:-1.9rem;
    color:var(--myai-blue);
    font-size:3.2rem;
    font-weight:900;
  }

  .myai-course-plus{
    font-size:3rem;
  }

  .myai-path-arrow{
    min-height:4.2rem;
    font-size:4.4rem;
  }
}

@media screen and (max-width:640px){
  .myai-section::after{
    height:.22rem;
    margin-top:2.1rem;
  }

  .myai-flow-node::after{
    bottom:-1.8rem;
    font-size:3rem;
  }

  .myai-course-plus{
    font-size:2.8rem;
  }

  .myai-path-arrow{
    min-height:4rem;
    font-size:4.1rem;
  }
}


/* =========================================================
   prototype v1.2｜2026-08-13
   修正：取消所有 section 下方額外收尾線。
   「讓 AI 協助執行……」淡藍框本身保持乾淨，不另加裝飾線。
   ========================================================= */

.myai-section::after{
  content:none;
  display:none;
}

/* keyline 只保留淡藍背景框，不加左線或額外下線。 */
.myai-keyline{
  border-left:0;
  border-bottom:0;
}


/* =========================================================
   prototype v1.3｜2026-08-13
   區段分界改以留白呈現，不使用額外分隔線。
   第 1 區緊接 Quick Navigation；第 2～6 區標題前增加呼吸空間。
   ========================================================= */

.myai-section + .myai-section{
  margin-top:7.5rem;
}

@media screen and (max-width:900px){
  .myai-section + .myai-section{
    margin-top:6.5rem;
  }
}

@media screen and (max-width:640px){
  .myai-section + .myai-section{
    margin-top:5.5rem;
  }
}


/* =========================================================
   v2.0｜2026-08-13（UTC+8）
   Visual Design
   - 保留 structural prototype 的六區資訊架構與 RWD。
   - 強化 Undergraduate family 的彩鉛語言、節點、路徑與卡片層次。
   - 不新增圖片，不改內容。
   ========================================================= */

/* ---------- Global rhythm ---------- */

.myai-page{
  background:
    radial-gradient(circle at 10% 2%, rgba(224,175,34,.05), transparent 28rem),
    radial-gradient(circle at 90% 10%, rgba(79,131,168,.05), transparent 30rem);
}

.myai-section{
  position:relative;
}

.myai-section-title{
  margin-bottom:1.8rem;
}

.myai-section-title>span:first-child{
  color:#24323D;
}

.myai-section-lead,
.myai-opening{
  color:#485660;
}


/* ---------- Quick Navigation: soft color identity ---------- */

.myai-quicknav{
  margin-top:1.4rem;
  padding:1.1rem;
  background:rgba(255,253,249,.92);
  border-color:#E4DED5;
  box-shadow:0 .5rem 1.5rem rgba(46,75,112,.07);
}

.myai-quicknav a{
  position:relative;
  overflow:hidden;
  border-width:1px;
  box-shadow:0 .15rem .45rem rgba(46,75,112,.04);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.myai-quicknav a::after{
  content:"";
  position:absolute;
  right:1.1rem;
  bottom:.45rem;
  left:1.1rem;
  height:.16rem;
  border-radius:999px;
  opacity:.55;
}

.myai-quicknav a:nth-child(1)::after{background:#B88900;}
.myai-quicknav a:nth-child(2)::after{background:#3F7192;}
.myai-quicknav a:nth-child(3)::after{background:#755B92;}
.myai-quicknav a:nth-child(4)::after{background:#3E725C;}
.myai-quicknav a:nth-child(5)::after{background:#B0434F;}
.myai-quicknav a:nth-child(6)::after{background:#6C6F7C;}

.myai-quicknav a:nth-child(1):hover,
.myai-quicknav a:nth-child(1):focus{background:#A77B00;border-color:#A77B00;}
.myai-quicknav a:nth-child(2):hover,
.myai-quicknav a:nth-child(2):focus{background:#356886;border-color:#356886;}
.myai-quicknav a:nth-child(3):hover,
.myai-quicknav a:nth-child(3):focus{background:#6F568B;border-color:#6F568B;}
.myai-quicknav a:nth-child(4):hover,
.myai-quicknav a:nth-child(4):focus{background:#376B56;border-color:#376B56;}
.myai-quicknav a:nth-child(5):hover,
.myai-quicknav a:nth-child(5):focus{background:#A83B47;border-color:#A83B47;}
.myai-quicknav a:nth-child(6):hover,
.myai-quicknav a:nth-child(6):focus{background:#555A68;border-color:#555A68;}

.myai-quicknav a:hover,
.myai-quicknav a:focus{
  transform:translateY(-.12rem);
  box-shadow:0 .45rem 1rem rgba(46,75,112,.12);
}

.myai-quicknav a:hover::after,
.myai-quicknav a:focus::after{
  background:#fff;
  opacity:.65;
}


/* ---------- WHY: stronger node path ---------- */

.myai-flow-four{
  gap:1.6rem;
}

.myai-flow-node{
  min-height:12rem;
  padding:1.6rem 1.6rem 1.5rem;
  border:1px solid #DDD8D0;
  box-shadow:0 .35rem 1rem rgba(46,75,112,.055);
}

.myai-flow-node:nth-child(1){
  background:linear-gradient(180deg,#FFF8DF 0%,#FFFDF8 100%);
  border-top:.35rem solid var(--myai-yellow);
}

.myai-flow-node:nth-child(2){
  background:linear-gradient(180deg,#EAF2F7 0%,#FFFDF8 100%);
  border-top:.35rem solid var(--myai-blue);
}

.myai-flow-node:nth-child(3){
  background:linear-gradient(180deg,#F1EAF8 0%,#FFFDF8 100%);
  border-top:.35rem solid var(--myai-purple);
}

.myai-flow-node:nth-child(4){
  background:linear-gradient(180deg,#EAF3EE 0%,#FFFDF8 100%);
  border-top:.35rem solid var(--myai-green);
}

.myai-flow-node b{
  color:#24323D;
}

.myai-flow-node::after{
  right:-1.9rem;
  color:#4F83A8;
  font-size:3.8rem;
  filter:drop-shadow(0 .08rem .08rem rgba(255,255,255,.85));
}

.myai-keyline{
  margin-top:2.2rem;
  padding:1.2rem 1.5rem 1.25rem;
  color:#294865;
  background:linear-gradient(180deg,#EEF5F9 0%,#F7FAFC 100%);
  border:1px solid #D4E2EB;
  border-radius:.65rem;
  text-align:center;
  box-shadow:0 .2rem .55rem rgba(46,75,112,.035);
}


/* ---------- Learning Path ---------- */

.myai-path-step,
.myai-path-destination{
  box-shadow:0 .4rem 1.1rem rgba(46,75,112,.055);
}

.myai-path-step-base{
  background:linear-gradient(180deg,#F1F3F5 0%,#FCFCFC 100%);
  border-color:#D8DDE1;
}

.myai-path-arrow{
  color:#3F7192;
  text-shadow:0 .08rem 0 #fff;
}

.myai-econ-course-path{
  gap:1rem;
}

.myai-course-step{
  min-width:17rem;
  padding:1.35rem 1.5rem;
  box-shadow:0 .3rem .9rem rgba(46,75,112,.05);
}

.myai-course-step:nth-of-type(1){
  background:linear-gradient(180deg,#EAF2F7 0%,#FAFCFD 100%);
  border-top:.32rem solid var(--myai-blue);
}

.myai-course-step:nth-of-type(2){
  background:linear-gradient(180deg,#EAF3EE 0%,#FBFDFC 100%);
  border-top:.32rem solid var(--myai-green);
}

.myai-course-step:nth-of-type(3){
  background:linear-gradient(180deg,#F1EAF8 0%,#FDFBFE 100%);
  border-top:.32rem solid var(--myai-purple);
}

.myai-course-plus{
  color:#6F568B;
  font-size:3.3rem;
}

.myai-path-destination{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#FFF3C4 0%,#FFFDF3 100%);
  border-color:#E1C55D;
}

.myai-path-destination::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:.3rem;
  background:linear-gradient(
    90deg,
    var(--myai-yellow) 0 25%,
    var(--myai-blue) 25% 50%,
    var(--myai-green) 50% 75%,
    var(--myai-purple) 75% 100%
  );
  opacity:.78;
}

.myai-program-card{
  box-shadow:0 .3rem .9rem rgba(46,75,112,.045);
}

.myai-program-card-primary{
  background:linear-gradient(180deg,#F1EAF8 0%,#FCF9FE 100%);
  border-color:#D4C1E3;
}

.myai-program-card:not(.myai-program-card-primary){
  background:linear-gradient(180deg,#F9F7F2 0%,#FFFDF9 100%);
}

.myai-program-flow span{
  background:rgba(255,255,255,.88);
  border-color:#D8D2CB;
}

.myai-coming-next{
  background:
    repeating-linear-gradient(
      -15deg,
      rgba(138,111,168,.035) 0,
      rgba(138,111,168,.035) .45rem,
      transparent .45rem,
      transparent .9rem
    ),
    #F4F1F7;
  border-color:#BFAFCC;
}


/* ---------- THINK: contrast between chat and collaboration ---------- */

.myai-collab-compare article:first-child{
  background:linear-gradient(180deg,#F5F5F5 0%,#FFF 100%);
}

.myai-collab-compare article:last-child{
  background:linear-gradient(180deg,#F1EAF8 0%,#FBF8FD 100%);
  border-color:#D4C2E2;
}

.myai-collab-compare article{
  box-shadow:0 .35rem 1rem rgba(46,75,112,.05);
}

.myai-collab-arrow{
  color:#6F568B;
  font-size:3rem;
}

.myai-three-stage article{
  min-height:12rem;
  box-shadow:0 .3rem .9rem rgba(46,75,112,.045);
}

.myai-stage-number{
  display:inline-block;
  margin-bottom:.25rem;
  color:#fff;
  background:#74889A;
  border-radius:999px;
  padding:.12rem .6rem;
  
}

.myai-three-stage article:nth-child(1) .myai-stage-number{background:#4F83A8;}
.myai-three-stage article:nth-child(2) .myai-stage-number{background:#558A72;}
.myai-three-stage article:nth-child(3) .myai-stage-number{background:#8A6FA8;}


/* ---------- PRACTICE: make workshop a featured resource ---------- */

.myai-workshop{
  border-color:#D4DDD7;
  box-shadow:0 .55rem 1.5rem rgba(46,75,112,.07);
}

.myai-workshop-heading{
  position:relative;
  background:
    linear-gradient(135deg,rgba(85,138,114,.14),rgba(255,253,249,.96) 68%);
}

.myai-workshop-heading::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:.3rem;
  background:var(--myai-green);
}

.myai-session-flow{
  padding:1rem 1.1rem;
  background:#F8FAF9;
  border:1px solid #DDE5E0;
  border-radius:.65rem;
}

.myai-session-flow span{
  border-color:#D7E2DB;
  background:#fff;
}

.myai-session-flow i{
  color:#558A72;
  font-weight:800;
}


/* ---------- APPLY: turn six cards into a clearer process family ---------- */

.myai-apply-grid{
  gap:1.35rem;
}

.myai-apply-grid article{
  position:relative;
  overflow:hidden;
  min-height:14rem;
  box-shadow:0 .3rem .9rem rgba(46,75,112,.045);
}

.myai-apply-grid article>span{
  display:inline-flex;
  width:3rem;
  height:3rem;
  align-items:center;
  justify-content:center;
  margin-bottom:.45rem;
  color:#fff;
  background:#70849A;
  border-radius:50%;
  
  font-weight:800;
}

.myai-apply-grid article:nth-child(1)>span,
.myai-apply-grid article:nth-child(4)>span{background:#B88900;}

.myai-apply-grid article:nth-child(2)>span,
.myai-apply-grid article:nth-child(5)>span{background:#3F7192;}

.myai-apply-grid article:nth-child(3)>span,
.myai-apply-grid article:nth-child(6)>span{background:#3E725C;}

.myai-warning{
  background:linear-gradient(180deg,#FFF4CF 0%,#FFF9E6 100%);
  border-left:.4rem solid #C99400;
  box-shadow:0 .25rem .7rem rgba(46,75,112,.04);
}


/* ---------- Responsible AI ---------- */

.myai-ethics-grid article{
  min-height:15rem;
  box-shadow:0 .3rem .9rem rgba(46,75,112,.045);
}

.myai-ethics-grid article:nth-child(1){background:#FFF8DF;}
.myai-ethics-grid article:nth-child(2){background:#EAF2F7;}
.myai-ethics-grid article:nth-child(3){background:#EAF3EE;}
.myai-ethics-grid article:nth-child(4){background:#F1EAF8;}
.myai-ethics-grid article:nth-child(5){background:#FCE8EA;}

.myai-ethics-grid article:nth-child(1) .fa{color:#A77B00;}
.myai-ethics-grid article:nth-child(2) .fa{color:#356886;}
.myai-ethics-grid article:nth-child(3) .fa{color:#376B56;}
.myai-ethics-grid article:nth-child(4) .fa{color:#6F568B;}
.myai-ethics-grid article:nth-child(5) .fa{color:#A83B47;}

.myai-academic-note{
  background:linear-gradient(180deg,#F5F5F6 0%,#FAFAFB 100%);
  border-color:#D9D9DE;
}


/* ---------- Mobile refinements ---------- */

@media screen and (max-width:900px){
  .myai-flow-node::after{
    bottom:-2.2rem;
    font-size:3.8rem;
  }

  .myai-course-step{
    width:100%;
    min-width:0;
  }

  .myai-collab-arrow{
    font-size:2.8rem;
  }
}

@media screen and (max-width:640px){
  .myai-quicknav a{
    border-radius:.7rem;
  }

  .myai-quicknav a::after{
    right:.7rem;
    left:.7rem;
  }

  .myai-flow-node{
    min-height:auto;
  }

  .myai-flow-node::after{
    bottom:-2rem;
    font-size:3.5rem;
  }

  .myai-course-plus{
    font-size:3rem;
  }

  .myai-ethics-grid article{
    min-height:auto;
  }

  .myai-keyline{
    text-align:left;
  }
}


/* =========================================================
   v2.1｜2026-08-13（UTC+8）
   - Quick Nav 移除文字下方底線。
   - Learning Path 標籤／說明字級調整。
   - Desktop：系統學習 AI 置中，兩側為跨域學習；Mobile 維持原順序。
   - 「經濟學專業」用語統一。
   - Mobile：WHY 箭頭置於卡片下方正中；Session 01 箭頭改為向下。
   ========================================================= */

/* 1. Quick Navigation：底線不是文字裝飾的一部分，移除彩色 underline。 */
.myai-quicknav a{
  text-decoration:none !important;
}

.myai-quicknav a::after{
  content:none !important;
  display:none !important;
}

/* 2. Learning Path typography */
.myai-path-step-base .myai-step-kicker,
.myai-path-destination .myai-step-kicker{
  
  font-weight:800;
}

.myai-path-step-base > p:not(:first-of-type){
  color:var(--myai-muted);
  
  line-height:1.65;
}

/* 3. Desktop program-card order:
   left = cross-disciplinary / center = system AI / right = cross-disciplinary.
   DOM order stays system -> cross -> cross, so mobile remains unchanged. */
@media screen and (min-width:901px){
  .myai-deeper-grid{
    grid-template-columns:1fr 1.3fr 1fr;
    grid-template-areas:"cross-left system cross-right";
  }

  .myai-program-cross-left{grid-area:cross-left;}
  .myai-program-system{grid-area:system;}
  .myai-program-cross-right{grid-area:cross-right;}
}

/* 5-1. Mobile WHY arrows: force them below each card, centered. */
@media screen and (max-width:900px){
  .myai-flow-node::after{
    top:auto !important;
    right:50% !important;
    bottom:-2.25rem !important;
    transform:translateX(50%) !important;
    width:auto;
    height:auto;
    line-height:1;
  }
}

/* 5-2. Session 01 mobile flow:
   turn horizontal arrows into downward arrows between stacked steps. */
@media screen and (max-width:640px){
  .myai-session-flow{
    display:grid;
    grid-template-columns:1fr;
    gap:.55rem;
  }

  .myai-session-flow i{
    display:block;
    min-height:1.8rem;
    line-height:1.8rem;
    color:#558A72;
    font-size:0;
    text-align:center;
  }

  .myai-session-flow i::before{
    content:"↓";
    font-size:2rem;
    font-weight:900;
  }
}


/* =========================================================
   v2.2｜2026-08-13（UTC+8）
   English AI Zone refinements
   - Scoped to .myai-page-en; Chinese page remains unchanged.
   - Accommodates longer navigation labels, program titles, and card copy.
   ========================================================= */

.myai-page-en .myai-quicknav a{
  padding:.7rem .55rem;
  
  line-height:1.3;
}

.myai-page-en .myai-section-title>span:first-child{
  letter-spacing:0;
}

.myai-page-en .myai-flow-node b{
  
}

.myai-page-en .myai-flow-node span{
  line-height:1.55;
}

.myai-page-en .myai-course-step{
  min-width:18rem;
}

.myai-page-en .myai-course-step h3{
  line-height:1.4;
}

.myai-page-en .myai-program-card h3,
.myai-page-en .myai-path-destination h3{
  line-height:1.35;
}

.myai-page-en .myai-program-flow span{
  line-height:1.3;
}

.myai-page-en .myai-workshop-session h4{
  line-height:1.4;
}

.myai-page-en .myai-apply-grid h3,
.myai-page-en .myai-ethics-grid h3{
  line-height:1.35;
}

@media screen and (max-width:900px){
  .myai-page-en .myai-course-step{
    min-width:0;
  }
}

@media screen and (max-width:640px){
  .myai-page-en .myai-quicknav a{
    padding:.65rem .4rem;
    
  }

  .myai-page-en .myai-section-title>span:first-child{
    line-height:1.25;
  }
}

/* =========================================================
   UNDERGRADUATE FAMILY｜Self-directed Learning
   Migrated from former page-learning.css
   ========================================================= */
.mylearning-page {
  --mylearning-navy: #2E4B70;
  --mylearning-navy-dark: #203750;
  --mylearning-ink: #32373C;
  --mylearning-muted: #68727D;
  --mylearning-line: #D9E0E6;
  --mylearning-paper: #FBFAF7;
  --mylearning-soft: #F5F7F9;

  --mylearning-red: #C66B72;
  --mylearning-red-soft: #F7ECEE;

  --mylearning-gold: #B99543;
  --mylearning-gold-soft: #F8F2DF;

  --mylearning-blue: #5C7FA5;
  --mylearning-blue-soft: #EAF0F6;

  --mylearning-green: #638875;
  --mylearning-green-soft: #EAF2ED;

  --mylearning-purple: #7B6F92;
  --mylearning-purple-soft: #F0EDF5;

  --mylearning-support: #D4743F;
  --mylearning-support-soft: #FBEADF;

  
  
  color: var(--mylearning-ink);
  font-family: "Noto Sans TC", sans-serif;
  line-height: 1.8;
}

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

.mylearning-page img {
  max-width: 100%;
}

/* =========================================================
   02. Main content shell
   ========================================================= */

.mylearning-content {
  
  
  
  
}

/* =========================================================
   03. Intro
   ========================================================= */

.mylearning-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.8rem;
  align-items: start;
  margin-bottom: 2.6rem;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background:
    linear-gradient(135deg, rgba(234, 240, 246, 0.78), rgba(251, 250, 247, 0.96));
  border: 1px solid var(--mylearning-line);
  border-radius: 1rem;
}

.mylearning-intro-icon {
  display: grid;
  width: 5.4rem;
  height: 5.4rem;
  place-items: center;
  color: var(--mylearning-navy);
  background: #FFFFFF;
  border: 1px solid #D9E1E8;
  border-radius: 50%;
  font-size: 2.25rem;
}

.mylearning-intro h2 {
  margin: 0 0 0.6rem;
  color: var(--mylearning-navy);
  font-size: var(--myfont-subsection-title, 2.4rem);
  line-height: 1.35;
}

.mylearning-intro p {
  margin: 0.45rem 0 0;
}

.mylearning-intro-note {
  color: var(--mylearning-muted);
  
}

/* =========================================================
   04. Quick Navigation
   ========================================================= */

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

.mylearning-quicknav-hint {
  display: none;
  margin: 0 0 0.45rem;
  color: var(--mylearning-muted);
  
}

.mylearning-quicknav {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  background: #FFFFFF;
  border: 1px solid var(--mylearning-line);
  border-radius: 0.9rem;
  box-shadow: 0 0.4rem 1.2rem rgba(46, 75, 112, 0.06);
}

.mylearning-quicknav-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
}

.mylearning-quicknav a {
  flex: 1 0 auto;
  min-width: max-content;
  padding: 0.72rem 1.15rem;
  color: var(--mylearning-navy);
  background: #F6F8FA;
  border: 1px solid transparent;
  border-radius: 999px;
  
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.mylearning-quicknav a:hover,
.mylearning-quicknav a:focus {
  color: #FFFFFF;
  transform: translateY(-1px);
  text-decoration: none;
}

.mylearning-nav-explore {
  background: var(--mylearning-red-soft) !important;
  border-color: #E9C9CD !important;
}

.mylearning-nav-explore:hover,
.mylearning-nav-explore:focus {
  background: var(--mylearning-red) !important;
}

.mylearning-nav-econ {
  background: var(--mylearning-gold-soft) !important;
  border-color: #E7D6A8 !important;
}

.mylearning-nav-econ:hover,
.mylearning-nav-econ:focus {
  background: #9B7A2E !important;
}

.mylearning-nav-math {
  background: var(--mylearning-blue-soft) !important;
  border-color: #C9D9E8 !important;
}

.mylearning-nav-math:hover,
.mylearning-nav-math:focus {
  background: var(--mylearning-blue) !important;
}

.mylearning-nav-data {
  background: var(--mylearning-green-soft) !important;
  border-color: #CBDDD2 !important;
}

.mylearning-nav-data:hover,
.mylearning-nav-data:focus {
  background: var(--mylearning-green) !important;
}

.mylearning-nav-advanced {
  background: var(--mylearning-purple-soft) !important;
  border-color: #D8D0E3 !important;
}

.mylearning-nav-advanced:hover,
.mylearning-nav-advanced:focus {
  background: var(--mylearning-purple) !important;
}

.mylearning-nav-support {
  background: var(--mylearning-support-soft) !important;
  border-color: #E9C0A7 !important;
}

.mylearning-nav-support:hover,
.mylearning-nav-support:focus {
  background: var(--mylearning-support) !important;
}

/* =========================================================
   05. Sections
   ========================================================= */

.mylearning-section {
  --mylearning-accent: var(--mylearning-blue);
  --mylearning-accent-soft: var(--mylearning-blue-soft);

  scroll-margin-top: 2rem;
  margin: 0 0 4rem;
}

.mylearning-section-explore {
  --mylearning-accent: var(--mylearning-red);
  --mylearning-accent-soft: var(--mylearning-red-soft);
}

.mylearning-section-econ {
  --mylearning-accent: var(--mylearning-gold);
  --mylearning-accent-soft: var(--mylearning-gold-soft);
}

.mylearning-section-math {
  --mylearning-accent: var(--mylearning-blue);
  --mylearning-accent-soft: var(--mylearning-blue-soft);
}

.mylearning-section-data {
  --mylearning-accent: var(--mylearning-green);
  --mylearning-accent-soft: var(--mylearning-green-soft);
}

.mylearning-section-advanced {
  --mylearning-accent: var(--mylearning-purple);
  --mylearning-accent-soft: var(--mylearning-purple-soft);
}

.mylearning-section-heading {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  overflow: hidden;
  border-radius: 0.8rem;
}

.mylearning-section-heading::before {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 4.6rem;
  z-index: 0;
  height: 0.75rem;
  background: var(--mylearning-accent-soft);
  border-radius: 999px;
  content: "";
  transform: rotate(-0.25deg);
}

.mylearning-section-heading > * {
  position: relative;
  z-index: 1;
}

.mylearning-section-no {
  display: grid;
  width: 3.9rem;
  height: 3.9rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--mylearning-accent);
  border-radius: 50%;
  
  font-weight: 800;
  line-height: 1;
}

.mylearning-section-heading h2 {
  margin: 0;
  color: var(--mylearning-navy);
  font-family: "Noto Serif TC", serif;
  
  line-height: 1.35;
}

.mylearning-section-heading p {
  margin: 0.2rem 0 0;
  color: var(--mylearning-muted);
  
  line-height: 1.55;
}

/* =========================================================
   06. Course cards
   ========================================================= */

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

.mylearning-course {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.7rem 1.8rem 1.6rem;
  background:
    linear-gradient(180deg, var(--mylearning-accent-soft) 0, rgba(255, 255, 255, 0.98) 5.8rem);
  border: 1px solid var(--mylearning-line);
  border-top: 0.32rem solid var(--mylearning-accent);
  border-radius: 0.9rem;
  box-shadow: 0 0.45rem 1.4rem rgba(37, 62, 93, 0.055);
}

.mylearning-course-wide {
  grid-column: 1 / -1;
}

.mylearning-course-series {
  background:
    linear-gradient(180deg, var(--mylearning-accent-soft) 0, rgba(255, 255, 255, 0.98) 5.8rem);
}

.mylearning-course-recognition {
  border-right-color: #DCC787;
  border-bottom-color: #DCC787;
  border-left-color: #DCC787;
}

.mylearning-card-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}


.mylearning-card-badges {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.mylearning-card-top h3 {
  min-width: 0;
  margin: 0;
  color: var(--mylearning-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
  font-weight: 800;
  line-height: 1.45;
}

.mylearning-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--mylearning-accent);
  
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mylearning-platform,
.mylearning-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0.26rem 0.66rem;
  border-radius: 999px;
  
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.mylearning-platform {
  color: #4F5963;
  background: #F1F3F5;
  border: 1px solid #DDE2E7;
  cursor: help;
}

.mylearning-status {
  color: #6F561D;
  background: #FFF6D9;
  border: 1px solid #E7CE78;
}

.mylearning-status-inline {
  display: inline-flex;
  min-height: 0;
  margin: 0 0.15rem;
  padding: 0.08rem 0.48rem;
  vertical-align: baseline;
}

.mylearning-meta,
.mylearning-platform-line {
  margin: 0 0 0.75rem;
  color: var(--mylearning-muted);
  
  line-height: 1.55;
}

.mylearning-summary {
  flex: 1 1 auto;
  margin: 0 0 1.15rem;
  color: var(--mylearning-ink);
  
  line-height: 1.75;
}

.mylearning-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: -0.15rem 0 0.9rem;
}

.mylearning-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.55rem;
  align-items: center;
  margin-top: auto;
}

.mylearning-other-entrances {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.mylearning-other-label {
  color: var(--mylearning-muted);
  
  font-weight: 700;
  white-space: nowrap;
}

.mylearning-other-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mylearning-other-entrances-inline {
  margin-top: 0;
}

.mylearning-link,
.mylearning-series-list a,
.mylearning-inline-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #FFFFFF;
  background: var(--mylearning-navy);
  border: 1px solid var(--mylearning-navy);
  border-radius: 0.55rem;
  
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.mylearning-link {
  padding: 0.62rem 0.9rem;
}

.mylearning-link:hover,
.mylearning-link:focus,
.mylearning-series-list a:hover,
.mylearning-series-list a:focus,
.mylearning-inline-links a:hover,
.mylearning-inline-links a:focus {
  color: var(--mylearning-navy);
  background: #FFFFFF;
  text-decoration: none;
}

.mylearning-link-secondary {
  color: var(--mylearning-navy);
  background: #FFFFFF;
}

.mylearning-link-secondary:hover,
.mylearning-link-secondary:focus {
  color: #FFFFFF;
  background: var(--mylearning-navy);
}

/* Series cards */

.mylearning-series-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.2rem;
}

.mylearning-series-list > div {
  padding: 1.2rem 1.3rem;
  background: #F8FAFB;
  border: 1px solid var(--mylearning-line);
  border-radius: 0.7rem;
}

.mylearning-series-list strong {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--mylearning-navy-dark);
  
}

.mylearning-series-list p {
  margin: 0 0 0.8rem;
  
  line-height: 1.7;
}

.mylearning-series-list a,
.mylearning-inline-links a {
  padding: 0.48rem 0.72rem;
}

.mylearning-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* =========================================================
   07. Learning support
   ========================================================= */

.mylearning-support {
  --mylearning-accent: var(--mylearning-support);
  --mylearning-accent-soft: var(--mylearning-support-soft);

  scroll-margin-top: 2rem;
  margin: 0 0 3.2rem;
}

.mylearning-section-heading-support {
  margin-bottom: 1.5rem;
}

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

.mylearning-support-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  padding: 1.6rem;
  background: var(--mylearning-support-soft);
  border: 1px solid #E9C0A7;
  border-radius: 0.85rem;
}

.mylearning-support-icon {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--mylearning-support);
  border-radius: 50%;
  font-size: 1.9rem;
}

.mylearning-support-card h3 {
  margin: 0 0 0.45rem;
  color: var(--mylearning-navy-dark);
  font-size: var(--myfont-feature-title, 2rem);
}

.mylearning-support-card p {
  margin: 0;
  
  line-height: 1.75;
}

.mylearning-support-card p + p {
  margin-top: 0.7rem;
}

.mylearning-support-card-digital {
  background: #FFF7F1;
}

.mylearning-support-note {
  color: #5F5149;
}

/* =========================================================
   08. Notices & platform note
   ========================================================= */

.mylearning-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 0 0 1.6rem;
  padding: 1.5rem 1.7rem;
  color: #4C5660;
  background: #F7F8F9;
  border-left: 0.4rem solid #8B98A5;
  border-radius: 0.4rem 0.75rem 0.75rem 0.4rem;
}

.mylearning-notice > i {
  margin-top: 0.3rem;
  color: #6F7E8D;
  font-size: 1.9rem;
}

.mylearning-notice h2 {
  margin: 0 0 0.35rem;
  color: var(--mylearning-navy);
  font-size: var(--myfont-feature-title, 2rem);
}

.mylearning-notice p {
  margin: 0.3rem 0 0;
  
  line-height: 1.7;
}

.mylearning-platform-note {
  padding-top: 1.1rem;
  border-top: 1px solid var(--mylearning-line);
}

.mylearning-platform-note h2 {
  margin: 0 0 0.45rem;
  color: var(--mylearning-navy);
  font-size: var(--myfont-card-title, 1.8rem);
}

.mylearning-platform-note p {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.2rem;
  margin: 0;
  color: var(--mylearning-muted);
  
  line-height: 1.65;
}

/* =========================================================
   09. Responsive
   ========================================================= */

@media screen and (max-width: 840px) {
  .mylearning-course-grid,
  .mylearning-support-grid {
    grid-template-columns: 1fr;
  }

  .mylearning-course-wide {
    grid-column: auto;
  }

  .mylearning-series-list {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 640px) {
  .mylearning-content {
    
    padding-top: 1.6rem;
  }

  .mylearning-intro {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.45rem;
  }

  .mylearning-intro-icon {
    width: 4.6rem;
    height: 4.6rem;
    font-size: 1.9rem;
  }

  .mylearning-quicknav-wrap {
    width: 100%;
  }

  .mylearning-quicknav-hint {
    display: block;
    text-align: right;
  }

  .mylearning-quicknav {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .mylearning-quicknav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .mylearning-quicknav-scroll {
    min-width: 0;
  }

  .mylearning-quicknav a {
    flex: 0 0 auto;
  }

  .mylearning-section {
    margin-bottom: 3.1rem;
  }

  .mylearning-section-heading {
    gap: 0.8rem;
    padding: 0.65rem 0.35rem;
  }

  .mylearning-section-heading::before {
    left: 3.8rem;
    height: 0.62rem;
  }

  .mylearning-section-no {
    width: 3.35rem;
    height: 3.35rem;
  }

  .mylearning-section-heading h2 {
    
  }

  .mylearning-card-top {
    flex-direction: column;
    gap: 0.5rem;
  }

  .mylearning-card-badges {
    align-self: stretch;
    justify-content: flex-start;
  }

  .mylearning-platform,
  .mylearning-status {
    align-self: flex-start;
  }

  .mylearning-course {
    padding: 1.45rem;
  }

  .mylearning-actions,
  .mylearning-inline-links {
    align-items: stretch;
    flex-direction: column;
  }

  .mylearning-other-entrances,
  .mylearning-other-buttons {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .mylearning-link,
  .mylearning-series-list a,
  .mylearning-inline-links a {
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .mylearning-support-card {
    grid-template-columns: 1fr;
  }

  .mylearning-notice {
    grid-template-columns: 1fr;
  }

  .mylearning-platform-note p {
    display: block;
  }

  .mylearning-platform-note p > span {
    display: block;
    margin-bottom: 0.35rem;
  }
}

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


/* v1.2｜同行入口與雙課程入口 */
.mylearning-inline-links {
  align-items: center;
}

.mylearning-inline-links > .mylearning-other-label {
  margin-left: 0.35rem;
}

.mylearning-peer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  width: 100%;
}

.mylearning-peer-action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--mylearning-line);
  border-radius: 0.65rem;
}

.mylearning-peer-label {
  width: 100%;
  color: var(--mylearning-navy-dark);
  
  font-weight: 800;
}

.mylearning-plan-badge {
  display: inline-flex;
  margin: 0 0 0.65rem;
  padding: 0.16rem 0.55rem;
  color: #8A4C27;
  background: #FFF0E5;
  border: 1px solid #E4B18F;
  border-radius: 999px;
  
  font-weight: 800;
  line-height: 1.35;
}

.mylearning-support-card {
  background: #FFF7F1;
}

.mylearning-support-card-digital {
  background: #FFF3E8;
}

@media screen and (max-width: 640px) {
  .mylearning-peer-actions {
    grid-template-columns: 1fr;
  }

  .mylearning-inline-links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .mylearning-inline-links > a {
    width: auto;
  }

  .mylearning-inline-links > .mylearning-other-label {
    margin-left: 0.15rem;
  }
}


/* =========================================================
   10. English counterpart notice / Chinese mirror boundary
   ========================================================= */

.mylearning-page-en .mylearning-en-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  margin: 0 0 1.8rem;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--mylearning-ink);
  background:
    linear-gradient(135deg, rgba(234, 240, 246, 0.92), rgba(251, 250, 247, 0.98));
  border: 1px solid #D7E1EA;
  border-left: 0.45rem solid var(--mylearning-navy);
  border-radius: 0.9rem;
}

.mylearning-page-en .mylearning-en-notice-icon {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  color: #FFFFFF;
  background: var(--mylearning-navy);
  border-radius: 50%;
  font-size: 2rem;
}

.mylearning-page-en .mylearning-en-notice h2 {
  margin: 0 0 0.65rem;
  color: var(--mylearning-navy);
  font-family: "Noto Serif TC", serif;
  font-size: var(--myfont-subsection-title, 2.4rem);
  line-height: 1.35;
}

.mylearning-page-en .mylearning-en-notice p {
  margin: 0.45rem 0 0;
  
  line-height: 1.75;
}

.mylearning-page-en .mylearning-en-original-heading {
  margin: 0 0 2.2rem;
  padding: 1.25rem 1.5rem;
  background: #F8F9FA;
  border: 1px solid var(--mylearning-line);
  border-radius: 0.75rem;
}

.mylearning-page-en .mylearning-en-original-heading h2 {
  margin: 0;
  color: var(--mylearning-navy);
  font-size: var(--myfont-feature-title, 2rem);
  line-height: 1.4;
}

.mylearning-page-en .mylearning-en-original-heading p {
  margin: 0.25rem 0 0;
  color: var(--mylearning-muted);
  
}

.mylearning-page-en .mylearning-zh-mirror {
  display: contents;
}

@media screen and (max-width: 640px) {
  .mylearning-page-en .mylearning-en-notice {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.45rem;
  }

  .mylearning-page-en .mylearning-en-notice-icon {
    width: 4.4rem;
    height: 4.4rem;
    font-size: 1.8rem;
  }
}

/* =========================================================
   UNDERGRADUATE FAMILY｜Internship & Career
   Migrated from former page-internship.css
   ========================================================= */
.myinternship-page {
  --myinternship-navy: #2E4B70;
  --myinternship-navy-dark: #25295E;
  --myinternship-gold: #B08F5A;
  --myinternship-line: #D8E0E8;
  --myinternship-soft: #F5F7FA;
  --myinternship-text: #41464B;
  --myinternship-green: #5F8F7B;
  --myinternship-blue: #6287A8;
  --myinternship-orange: #C58A55;
  --myinternship-purple: #8174A3;
  --myinternship-red: #A96868;

  
  
  color: var(--myinternship-text);
  font-family: "Noto Sans TC", sans-serif;
  
  line-height: 1.8;
}

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

.myinternship-content {
  
  
  
}

.myinternship-intro {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  margin: 1.8rem 0 2rem;
  padding: clamp(1.6rem, 2.5vw, 2.4rem);
  background: linear-gradient(135deg, #F3F6F9 0%, #FFFFFF 72%);
  border-left: 0.5rem solid var(--myinternship-navy);
  box-shadow: 0 0.7rem 2rem rgba(37, 41, 94, 0.07);
}

.myinternship-intro-icon {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  color: #FFFFFF;
  background: var(--myinternship-navy);
  border-radius: 50%;
  font-size: 2.2rem;
}

.myinternship-intro h2 {
  margin: 0 0 0.3rem;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-feature-title, 2rem);
}

.myinternship-intro p {
  margin: 0;
}

.myinternship-quicknav {
  display: flex;
  gap: 0.8rem;
  margin: 0 0 3.2rem;
  padding: 0.35rem 0 0.8rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.myinternship-quicknav a {
  flex: 1 0 auto;
  min-width: 15rem;
  padding: 0.85rem 1.1rem;
  color: #33404E;
  background: #EDF2F6;
  border: 0.1rem solid #D8E0E8;
  border-radius: 0.5rem;
  
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.myinternship-quicknav a:nth-of-type(1) { background: #EEF4F1; border-color: #BCD0C7; }
.myinternship-quicknav a:nth-of-type(2) { background: #EEF3F8; border-color: #BDCDDB; }
.myinternship-quicknav a:nth-of-type(3) { background: #FAF2EA; border-color: #DFC7AE; }
.myinternship-quicknav a:nth-of-type(4) { background: #F1EEF7; border-color: #CEC5DE; }
.myinternship-quicknav a:nth-of-type(5) { background: #F8EEEE; border-color: #DDBFBF; }

.myinternship-quicknav a:hover,
.myinternship-quicknav a:focus {
  color: #FFFFFF;
  background: var(--myinternship-navy);
  border-color: var(--myinternship-navy);
}

.myinternship-quicknav-hint {
  display: none;
}

.myinternship-section {
  margin-top: clamp(3.8rem, 5vw, 6rem);
}

.myinternship-title-icon {
  margin-right: 0.45rem;
  color: var(--myinternship-gold);
}

.myinternship-section-lead {
  margin: 1.4rem 0 2rem;
  color: #555F68;
}

.myinternship-card-grid,
.myinternship-resource-grid,
.myinternship-step-grid {
  display: grid;
  gap: 1.4rem;
}

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

.myinternship-card,
.myinternship-resource-card,
.myinternship-step-grid article {
  padding: 1.6rem;
  background: #FFFFFF;
  border: 0.1rem solid var(--myinternship-line);
  border-radius: 0.7rem;
  box-shadow: 0 0.45rem 1.4rem rgba(37, 41, 94, 0.055);
}

.myinternship-card > i {
  color: var(--myinternship-navy);
  font-size: 2.2rem;
}

.myinternship-card h3,
.myinternship-resource-card h3,
.myinternship-step-grid h3,
.myinternship-resource-head h3,
.myinternship-announcement-intro h3,
.myinternship-story-card h3 {
  margin: 0.55rem 0 0.4rem;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-card p,
.myinternship-resource-card p,
.myinternship-step-grid p,
.myinternship-resource-head p,
.myinternship-announcement-intro p,
.myinternship-story-card p {
  margin: 0;
}

.myinternship-announcement-intro {
  display: flex;
  justify-content: space-between;
  gap: 1.8rem;
  align-items: center;
  margin-top: 1.6rem;
  padding: 1.5rem 1.7rem;
  background: #F0F5F9;
  border-left: 0.4rem solid var(--myinternship-blue);
}

.myinternship-announcement-intro > i {
  flex: 0 0 auto;
  color: var(--myinternship-blue);
  font-size: 3rem;
}

.myinternship-resource-head {
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid var(--myinternship-line);
}

.myinternship-resource-head h3 {
  margin-top: 0;
}

.myinternship-resource-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.myinternship-resource-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: #FFFFFF;
  background: var(--myinternship-navy);
  border-radius: 50%;
}

.myinternship-resource-card:nth-child(1) .myinternship-resource-icon { background: var(--myinternship-green); }
.myinternship-resource-card:nth-child(2) .myinternship-resource-icon { background: var(--myinternship-blue); }
.myinternship-resource-card:nth-child(3) .myinternship-resource-icon { background: var(--myinternship-orange); }
.myinternship-resource-card:nth-child(4) .myinternship-resource-icon { background: var(--myinternship-purple); }

.myinternship-disclaimer,
.myinternship-warning,
.myinternship-draft-note {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.1rem 1.3rem;
  background: #F7F7F5;
  border-left: 0.35rem solid var(--myinternship-gold);
}

.myinternship-disclaimer i,
.myinternship-warning i,
.myinternship-draft-note i {
  margin-top: 0.25em;
  color: var(--myinternship-gold);
}

.myinternship-disclaimer p,
.myinternship-warning p,
.myinternship-draft-note {
  margin-bottom: 0;
}

.myinternship-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.myinternship-fact-grid > div {
  padding: 1.3rem 1rem;
  text-align: center;
  background: #FFFFFF;
  border: 0.1rem solid #D8E0E8;
  border-top: 0.4rem solid var(--myinternship-orange);
}

.myinternship-fact-grid strong,
.myinternship-fact-grid span {
  display: block;
}

.myinternship-fact-grid strong {
  color: var(--myinternship-navy-dark);
  
}

.myinternship-fact-grid span {
  margin-top: 0.2rem;
  color: #68727C;
  
}

.myinternship-warning {
  background: #FFF8EE;
  border-left-color: #C9852F;
}

.myinternship-warning i {
  color: #C9852F;
}

.myinternship-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.7rem;
}

.myinternship-process > div {
  position: relative;
  min-height: 8.3rem;
  padding: 1.2rem 1rem 1rem;
  background: #F6F8FA;
  border: 0.1rem solid #DCE3EA;
}

.myinternship-process span {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--myinternship-gold);
  
  font-weight: 800;
}

.myinternship-process b {
  color: #3E4852;
  
}

.myinternship-draft-note {
  color: #666E75;
  font-size: var(--myfont-meta, 1.5rem);
}

.myinternship-step-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.6rem;
}

.myinternship-step-grid article {
  border-top: 0.4rem solid var(--myinternship-purple);
}

.myinternship-step-grid article > span {
  color: var(--myinternship-purple);
  font-weight: 800;
}

.myinternship-story-card {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.8rem;
  background: #F8F1F1;
  border: 0.1rem solid #E3CFCF;
  border-left: 0.45rem solid var(--myinternship-red);
}

.myinternship-story-card > i {
  flex: 0 0 auto;
  color: var(--myinternship-red);
  font-size: 3rem;
}

/* 下半部是獨立 Rpage HTML 模組，取消額外頂部留白 */
.myinternship-page-lower .myinternship-content {
  padding-top: 0.5rem;
}

@media screen and (max-width: 900px) {
  .myinternship-card-grid-3,
  .myinternship-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media screen and (max-width: 600px) {
  .myinternship-content {
    
  }

  .myinternship-intro {
    grid-template-columns: 4.7rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.3rem;
  }

  .myinternship-intro-icon {
    width: 4.2rem;
    height: 4.2rem;
    font-size: 1.9rem;
  }

  .myinternship-quicknav {
    position: relative;
    padding-top: 3rem;
  }

  .myinternship-quicknav-hint {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    margin: 0;
    color: #68727C;
    
  }

  .myinternship-quicknav a {
    min-width: 13.5rem;
  }

  .myinternship-card-grid-3,
  .myinternship-resource-grid,
  .myinternship-step-grid,
  .myinternship-fact-grid {
    grid-template-columns: 1fr;
  }

  .myinternship-announcement-intro {
    align-items: flex-start;
  }

  .myinternship-announcement-intro > i {
    font-size: 2.4rem;
  }
}

/* =========================================================
   2026-08-15｜Rpage 實習公告模組寬度對齊
   ---------------------------------------------------------
   實際 DOM：
   #Dyn_2_1 ＝ 實習就業上半部自訂模組
   #Dyn_2_2 ＝ 實習機會公告模組
   #Dyn_2_3 ＝ 實習就業下半部／頁面正文

   原則：
   1. 不修改全站 .module-special。
   2. 不綁定可能因 Rpage 編排而改變的 Dyn ID。
   3. 只選取「緊接在含有實習就業上半部的模組之後」的公告模組。
   4. 左右留白與 .myinternship-content 保持一致。
   ========================================================= */

.mcol > div:has(.myinternship-page.mycustom-title-page)
+ div > .module-special {
  margin-left: clamp(1.4rem, 2.6vw, 3rem);
  margin-right: clamp(1.4rem, 2.6vw, 3rem);
}

/* 手機版與實習就業內容區左右留白一致 */
@media screen and (max-width: 600px) {
  .mcol > div:has(.myinternship-page.mycustom-title-page)
  + div > .module-special {
    margin-left: 0.8rem;
    margin-right: 0.8rem;
  }
}

/* =========================================================
   2026-08-15｜v0.3 實習就業頁模組銜接微調
   ========================================================= */

/* 第一個公告模組後方的「沒看到適合的？」區塊略往上收 */
.myinternship-page-lower .myinternship-content > .myinternship-section:first-child {
  margin-top: 2.4rem;
}

/* 第二個公告模組：
   緊接在含 .myinternship-stories-intro 的自訂模組之後 */
.mcol > div:has(.myinternship-stories-intro)
+ div > .module-special {
  margin-left: clamp(1.4rem, 2.6vw, 3rem);
  margin-right: clamp(1.4rem, 2.6vw, 3rem);
}

/* 最下段緊接第二個公告模組，避免職涯分享卡片離公告過遠 */
.myinternship-page-final .myinternship-content {
  padding-top: 0.5rem;
}

.myinternship-page-final .myinternship-section:first-child {
  margin-top: 2.4rem;
}

@media screen and (max-width: 600px) {
  .myinternship-page-lower .myinternship-content > .myinternship-section:first-child,
  .myinternship-page-final .myinternship-section:first-child {
    margin-top: 1.8rem;
  }

  .mcol > div:has(.myinternship-stories-intro)
  + div > .module-special {
    margin-left: 0.8rem;
    margin-right: 0.8rem;
  }
}

/* =========================================================
   v0.4｜IA 1.0 內容完整化
   ========================================================= */

.myinternship-card-note {
  margin-top: 0.75rem !important;
  padding-top: 0.65rem;
  color: #6A737C;
  border-top: 0.1rem dashed #D9E0E6;
  font-size: var(--myfont-meta, 1.5rem);
}

.myinternship-subtitle {
  margin: 2.2rem 0 1rem;
  color: var(--myinternship-navy-dark);
  
}

.myinternship-subtitle i {
  margin-right: 0.4rem;
  color: var(--myinternship-orange);
}

.myinternship-course-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.myinternship-course-detail {
  padding: 1.5rem 1.6rem;
  background: #FBF8F4;
  border: 0.1rem solid #E3D7C9;
  border-top: 0.35rem solid var(--myinternship-orange);
}

.myinternship-course-detail h3 {
  margin: 0 0 0.8rem;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-course-detail ul {
  margin: 0;
  padding-left: 1.4em;
}

.myinternship-course-detail li + li {
  margin-top: 0.35rem;
}

.myinternship-form-intro {
  margin: 0 0 1rem;
  color: #5E6871;
}

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

.myinternship-form-item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: 0.7rem;
  align-items: start;
  padding: 1rem 1.1rem;
  background: #FFFFFF;
  border: 0.1rem solid #DCE3EA;
}

.myinternship-form-item > i {
  grid-row: 1 / span 2;
  margin-top: 0.25rem;
  color: var(--myinternship-orange);
}

.myinternship-form-item strong {
  color: var(--myinternship-navy-dark);
}

.myinternship-form-item span {
  color: #6A737C;
  font-size: var(--myfont-meta, 1.5rem);
}

.myinternship-rule-note,
.myinternship-career-tip {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: #F6F7F8;
  border-left: 0.35rem solid var(--myinternship-gold);
}

.myinternship-rule-note i,
.myinternship-career-tip i {
  margin-top: 0.25em;
  color: var(--myinternship-gold);
}

.myinternship-rule-note p,
.myinternship-career-tip p {
  margin: 0;
}

.myinternship-career-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.myinternship-career-grid article {
  padding: 1.4rem;
  background: #FFFFFF;
  border: 0.1rem solid #DCD8E5;
  border-top: 0.35rem solid var(--myinternship-purple);
}

.myinternship-career-grid article > i {
  color: var(--myinternship-purple);
  font-size: 2rem;
}

.myinternship-career-grid h3 {
  margin: 0.55rem 0 0.4rem;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-career-grid p {
  margin: 0;
}

.myinternship-closing {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin: 1.8rem 0 0.5rem;
  padding: 1.3rem 1.5rem;
  background: #F7F7F5;
  border-top: 0.1rem solid #E1DED6;
  border-bottom: 0.1rem solid #E1DED6;
}

.myinternship-closing > i {
  margin-top: 0.15em;
  color: var(--myinternship-gold);
  font-size: 2rem;
}

.myinternship-closing h3 {
  margin: 0 0 0.25rem;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-closing p {
  margin: 0;
}

@media screen and (max-width: 900px) {
  .myinternship-career-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .myinternship-course-detail-grid,
  .myinternship-form-grid,
  .myinternship-career-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v0.5｜IA 1.0 Interaction + 彩色鉛筆語言
   2026-08-15
   ========================================================= */

/* ---------- 卡片標題：圖示＋小標同列 ---------- */
.myinternship-card-head,
.myinternship-resource-headline,
.myinternship-career-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.myinternship-card-head h3,
.myinternship-resource-headline h3,
.myinternship-career-head h3 {
  margin: 0;
}

.myinternship-card-head > i {
  flex: 0 0 auto;
  font-size: 2rem;
}

/* ---------- 第一區整張卡可點 ---------- */
.myinternship-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.myinternship-card-link:hover,
.myinternship-card-link:focus {
  color: inherit;
  text-decoration: none;
  transform: translateY(-0.2rem);
}

/* ---------- 彩色鉛筆：卡片與 section title ---------- */
.myinternship-card,
.myinternship-resource-card,
.myinternship-career-grid article,
.myinternship-course-detail {
  position: relative;
  border-width: 0.16rem;
  border-style: solid;
  box-shadow:
    0.22rem 0.2rem 0 rgba(46, 75, 112, 0.08),
    -0.12rem -0.08rem 0 rgba(176, 143, 90, 0.05);
}

/* 用不完全平行的短線模擬彩色鉛筆筆觸 */
.myinternship-card::after,
.myinternship-resource-card::after,
.myinternship-career-grid article::after,
.myinternship-course-detail::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1.8rem;
  bottom: -0.35rem;
  height: 0.35rem;
  opacity: 0.7;
  transform: rotate(-0.18deg);
  background:
    linear-gradient(90deg,
      #D86B6B 0 18%,
      transparent 18% 21%,
      #E4B84E 21% 39%,
      transparent 39% 42%,
      #5F9B77 42% 61%,
      transparent 61% 64%,
      #5A86B8 64% 82%,
      transparent 82% 85%,
      #8B75B6 85% 100%);
}

.myinternship-card-career { border-color: #B8D0C4; background: #F6FAF7; }
.myinternship-card-explore { border-color: #C6D4E2; background: #F6F9FC; }
.myinternship-card-ai { border-color: #D9CBE4; background: #FAF7FC; }

.myinternship-card-career .myinternship-card-head > i { color: #4F8B70; }
.myinternship-card-explore .myinternship-card-head > i { color: #557FA6; }
.myinternship-card-ai .myinternship-card-head > i { color: #8066A3; }

/* Section title 下方加一段彩色鉛筆線，延續學士班 family */
.myinternship-section .mysectitle {
  position: relative;
  padding-bottom: 0.7rem;
}

.myinternship-section .mysectitle::after {
  content: "";
  flex: var(--right-line);
  min-width: 4rem;
  border-top: 0.1rem solid #CCC;
}

.myinternship-section .mysectitle > span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.05rem;
  width: min(36rem, 48%);
  height: 0.32rem;
  transform: translateX(-50%) rotate(-0.25deg);
  background:
    linear-gradient(90deg,
      #D86B6B 0 18%,
      #E4B84E 18% 37%,
      #5F9B77 37% 58%,
      #5A86B8 58% 79%,
      #8B75B6 79% 100%);
  opacity: 0.72;
}

/* ---------- 更多實習機會：實際入口 ---------- */
.myinternship-resource-headline {
  margin-bottom: 0.65rem;
}

.myinternship-resource-links {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.myinternship-resource-links a {
  display: block;
  padding: 0.45rem 0.7rem;
  color: var(--myinternship-navy);
  background: rgba(255,255,255,0.72);
  border-left: 0.28rem solid currentColor;
  text-decoration: none;
  font-weight: 650;
}

.myinternship-resource-links a:hover,
.myinternship-resource-links a:focus {
  color: #FFFFFF;
  background: var(--myinternship-navy);
  text-decoration: none;
}

/* ---------- 流程時間線 ---------- */
.myinternship-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2.8rem;
  margin: 2rem 0 2.2rem;
  counter-reset: internshipstep;
}

.myinternship-process-step {
  position: relative;
  min-height: 10rem;
  padding: 1.25rem 1.1rem 1.1rem;
  background: #FFFDF8;
  border: 0.16rem solid #D9C79B;
  border-radius: 0.7rem 0.55rem 0.75rem 0.5rem;
  box-shadow: 0.22rem 0.2rem 0 rgba(176, 143, 90, 0.10);
  text-align: center;
}

.myinternship-process-step::after {
  content: "➜";
  position: absolute;
  top: 50%;
  right: -2.25rem;
  color: #B08F5A;
  font-size: 2.3rem;
  line-height: 1;
  transform: translateY(-50%);
  text-shadow: 0.08rem 0.08rem 0 rgba(176,143,90,0.16);
}

.myinternship-process-step:nth-child(8)::after {
  display: none;
}

.myinternship-process-step > span {
  display: inline-block;
  margin-bottom: 0.45rem;
  padding: 0.05rem 0.55rem;
  color: #7B5E31;
  background: #F6E8BD;
  border-radius: 1rem;
  font-weight: 800;
}

.myinternship-process-step > i {
  display: block;
  margin: 0 auto 0.45rem;
  color: var(--myinternship-orange);
  font-size: 2rem;
}

.myinternship-process-step > b {
  display: block;
  color: #3F4850;
  
  line-height: 1.55;
}

/* 第二列做出折返時間線的感覺 */
.myinternship-process-step:nth-child(n/**/+5) {
  background: #F8FBF8;
  border-color: #BFD2C4;
}

.myinternship-process-step:nth-child(n/**/+5) > i {
  color: #5F8F7B;
}

/* ---------- 表單集中入口 ---------- */
.myinternship-forms-linkbox {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 1.5rem;
  background: #FFF8EC;
  border: 0.16rem solid #DFC999;
  border-left: 0.5rem solid var(--myinternship-orange);
  box-shadow: 0.18rem 0.18rem 0 rgba(197, 138, 85, 0.08);
}

.myinternship-forms-linkbox strong {
  color: var(--myinternship-navy-dark);
  
}

.myinternship-forms-linkbox p {
  margin: 0.3rem 0 0;
}

.myinternship-forms-linkbox .mybtn {
  flex: 0 0 auto;
}

/* ---------- 職涯資源標題同行 ---------- */
.myinternship-career-head {
  margin-bottom: 0.55rem;
}

.myinternship-career-head > i {
  flex: 0 0 auto;
  color: var(--myinternship-purple);
  font-size: 1.9rem;
}

/* ---------- 手機 ---------- */
@media screen and (max-width: 900px) {
  .myinternship-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .myinternship-process-step:nth-child(4)::after {
    display: block;
  }

  .myinternship-process-step:nth-child(2n)::after {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .myinternship-process {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .myinternship-process-step::after,
  .myinternship-process-step:nth-child(4)::after {
    display: block;
    top: auto;
    right: 50%;
    bottom: -2.15rem;
    transform: translateX(50%) rotate(90deg);
  }

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

  .myinternship-forms-linkbox {
    display: block;
  }

  .myinternship-forms-linkbox .mybtn {
    margin-top: 1rem;
    width: 100%;
  }

  .myinternship-section .mysectitle > span::after {
    width: 58%;
  }
}



/* =========================================================
   v0.6｜內容層級與彩色鉛筆標題修正
   ========================================================= */

/* 原本標題前後的灰線改成低飽和彩色鉛筆線；
   移除標題下方額外彩線，避免線條過多。 */
.myinternship-section .mysectitle::before,
.myinternship-section .mysectitle::after {
  border-top: 0;
  height: 0.32rem;
  background:
    linear-gradient(90deg,
      #D86B6B 0 18%,
      #E4B84E 18% 37%,
      #5F9B77 37% 58%,
      #5A86B8 58% 79%,
      #8B75B6 79% 100%);
  opacity: 0.55;
  transform: rotate(-0.12deg);
}

.myinternship-section .mysectitle > span::after {
  display: none;
}

/* 更多實習來源：依來源性質分組，不做五張同重量大卡 */
.myinternship-resource-groups {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.myinternship-resource-group {
  padding: 1.25rem 1.35rem;
  background: #FFFFFF;
  border: 0.14rem solid #D9E0E6;
  box-shadow: 0.16rem 0.16rem 0 rgba(46, 75, 112, 0.06);
}

.myinternship-resource-campus { grid-column: span 4; border-top: 0.35rem solid #5F8F7B; }
.myinternship-resource-schools { grid-column: span 5; border-top: 0.35rem solid #6287A8; }
.myinternship-resource-search { grid-column: span 3; border-top: 0.35rem solid #B08F5A; }
.myinternship-resource-company { grid-column: span 7; border-top: 0.35rem solid #C58A55; }
.myinternship-resource-research { grid-column: span 5; border-top: 0.35rem solid #8174A3; }

.myinternship-resource-group-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.8rem;
}

.myinternship-resource-group-head > i {
  color: var(--myinternship-navy);
  font-size: 1.9rem;
}

.myinternship-resource-group-head h3 {
  margin: 0;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-resource-linklist {
  display: grid;
  gap: 0.45rem;
}

.myinternship-resource-linklist a {
  display: block;
  padding: 0.45rem 0.7rem;
  color: var(--myinternship-navy);
  background: #F7F9FB;
  border-left: 0.26rem solid currentColor;
  text-decoration: none;
}

.myinternship-resource-linklist a:hover,
.myinternship-resource-linklist a:focus {
  color: #FFFFFF;
  background: var(--myinternship-navy);
  text-decoration: none;
}

.myinternship-resource-note {
  margin: 0.7rem 0 0;
  color: #6A737C;
  
}

/* 職涯四卡改成整張可點 */
.myinternship-career-grid > .myinternship-career-card-link {
  display: block;
  padding: 1.4rem;
  color: inherit;
  background: #FFFFFF;
  border: 0.1rem solid #DCD8E5;
  border-top: 0.35rem solid var(--myinternship-purple);
  text-decoration: none;
}

.myinternship-career-grid > .myinternship-career-card-link:hover,
.myinternship-career-grid > .myinternship-career-card-link:focus {
  color: inherit;
  text-decoration: none;
  transform: translateY(-0.15rem);
  box-shadow: 0.2rem 0.2rem 0 rgba(129, 116, 163, 0.12);
}

.myinternship-career-grid > .myinternship-career-card-link p {
  margin: 0;
}

/* 最下方更多職涯資源 */
.myinternship-closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.myinternship-closing-links a {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  color: var(--myinternship-navy);
  background: #FFFFFF;
  border: 0.1rem solid #D8E0E8;
  border-radius: 0.4rem;
  text-decoration: none;
}

.myinternship-closing-links a:hover,
.myinternship-closing-links a:focus {
  color: #FFFFFF;
  background: var(--myinternship-navy);
  text-decoration: none;
}

/* 7-step flow: desktop avoid last empty arrow */
.myinternship-process {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.myinternship-process-step:nth-child(4)::after,
.myinternship-process-step:last-child::after {
  display: none;
}

@media screen and (max-width: 900px) {
  .myinternship-resource-campus,
  .myinternship-resource-schools,
  .myinternship-resource-search,
  .myinternship-resource-company,
  .myinternship-resource-research {
    grid-column: span 6;
  }
}

@media screen and (max-width: 600px) {
  .myinternship-resource-campus,
  .myinternship-resource-schools,
  .myinternship-resource-search,
  .myinternship-resource-company,
  .myinternship-resource-research {
    grid-column: 1 / -1;
  }

  .myinternship-closing-links {
    display: grid;
  }
}


/* =========================================================
   v0.7｜IA 1.0 回復：來源層級、13 家企業、三階段求職
   ========================================================= */

/* 更多平台：三種來源，不做同重量大卡 */
.myinternship-source-layout {
  display: grid;
  grid-template-columns: 1.1fr 1.8fr 0.9fr;
  gap: 1rem;
  margin-top: 1.2rem;
}

.myinternship-source-block {
  padding: 1.25rem 1.35rem;
  background: #FFFFFF;
  border: 0.14rem solid #D9E0E6;
  box-shadow: 0.16rem 0.16rem 0 rgba(46, 75, 112, 0.06);
}

.myinternship-source-campus { border-top: 0.36rem solid #5F8F7B; }
.myinternship-source-schools { border-top: 0.36rem solid #6287A8; }
.myinternship-source-search { border-top: 0.36rem solid #B08F5A; }

.myinternship-source-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.myinternship-source-head > i {
  flex: 0 0 auto;
  font-size: 2rem;
  color: var(--myinternship-navy);
}

.myinternship-source-head span {
  display: block;
  color: #78828B;
  
  font-weight: 700;
}

.myinternship-source-head h3 {
  margin: 0.05rem 0 0;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-source-links {
  display: grid;
  gap: 0.45rem;
}

.myinternship-source-mainlink,
.myinternship-source-links a {
  display: block;
  padding: 0.5rem 0.7rem;
  color: var(--myinternship-navy);
  background: #F6F8FA;
  border-left: 0.26rem solid currentColor;
  text-decoration: none;
  font-weight: 650;
}

.myinternship-source-mainlink:hover,
.myinternship-source-mainlink:focus,
.myinternship-source-links a:hover,
.myinternship-source-links a:focus {
  color: #FFFFFF;
  background: var(--myinternship-navy);
  text-decoration: none;
}

/* 企業：分類 > 小型企業連結 */
.myinternship-company-section {
  margin-top: 2.2rem;
}

.myinternship-company-intro {
  margin-bottom: 1rem;
  padding: 1.15rem 1.35rem;
  background: #F7F8FA;
  border-left: 0.36rem solid var(--myinternship-orange);
}

.myinternship-company-intro h3 {
  margin: 0 0 0.25rem;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-company-intro p {
  margin: 0;
}

.myinternship-industry-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.myinternship-industry {
  padding: 1.15rem 1.25rem;
  background: #FFFFFF;
  border: 0.14rem solid #D9E0E6;
  box-shadow: 0.15rem 0.15rem 0 rgba(46, 75, 112, 0.05);
}

.myinternship-industry-bank { grid-column: span 7; border-top: 0.38rem solid #5A86B8; }
.myinternship-industry-invest { grid-column: span 5; border-top: 0.38rem solid #8174A3; }
.myinternship-industry-insurance { grid-column: span 4; border-top: 0.38rem solid #A96868; }
.myinternship-industry-leasing { grid-column: span 4; border-top: 0.38rem solid #C58A55; }
.myinternship-industry-realestate { grid-column: span 4; border-top: 0.38rem solid #5F8F7B; }

.myinternship-industry-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.myinternship-industry-head > i {
  width: 2.2rem;
  text-align: center;
  font-size: 1.9rem;
}

.myinternship-industry-bank .myinternship-industry-head > i { color: #5A86B8; }
.myinternship-industry-invest .myinternship-industry-head > i { color: #8174A3; }
.myinternship-industry-insurance .myinternship-industry-head > i { color: #A96868; }
.myinternship-industry-leasing .myinternship-industry-head > i { color: #C58A55; }
.myinternship-industry-realestate .myinternship-industry-head > i { color: #5F8F7B; }

.myinternship-industry-head h4 {
  margin: 0;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-company-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.myinternship-company-links a {
  display: inline-block;
  padding: 0.38rem 0.7rem;
  color: #3E4953;
  background: #F8F9FA;
  border: 0.1rem solid #D9E0E6;
  border-radius: 0.35rem;
  text-decoration: none;
  font-weight: 650;
}

.myinternship-company-links a:hover,
.myinternship-company-links a:focus {
  color: #FFFFFF;
  background: var(--myinternship-navy);
  border-color: var(--myinternship-navy);
  text-decoration: none;
}

/* 研究工作：輕量但獨立辨識 */
.myinternship-research-path {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.8fr);
  gap: 1.25rem;
  align-items: center;
  margin-top: 2.3rem;
  padding: 1.45rem 1.55rem;
  background: #F6F8F6;
  border-left: 0.42rem solid #5F8F7B;
}

.myinternship-research-eyebrow {
  margin: 0 0 0.2rem;
  color: #6F877C;
  
  font-weight: 800;
  letter-spacing: 0.06em;
}

.myinternship-research-copy h3 {
  margin: 0 0 0.45rem;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-research-copy p {
  margin: 0;
}

.myinternship-research-tip {
  margin-top: 0.55rem !important;
  color: #657068;
}

.myinternship-research-links {
  display: grid;
  gap: 0.5rem;
}

.myinternship-research-links a {
  display: block;
  padding: 0.55rem 0.75rem;
  color: #416957;
  background: #FFFFFF;
  border: 0.1rem solid #C9D7D0;
  text-decoration: none;
}

.myinternship-research-links a:hover,
.myinternship-research-links a:focus {
  color: #FFFFFF;
  background: #5F8F7B;
  text-decoration: none;
}

/* 準備進入職場：回復 IA 三階段 */
.myinternship-career-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.myinternship-career-stage {
  padding: 1.35rem;
  background: #FFFFFF;
  border: 0.14rem solid #DCD8E5;
  border-top: 0.38rem solid var(--myinternship-purple);
}

.myinternship-career-stage-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.myinternship-career-stage-head > span {
  color: var(--myinternship-purple);
  font-weight: 800;
}

.myinternship-career-stage-head > i {
  color: var(--myinternship-purple);
  font-size: 1.9rem;
}

.myinternship-career-stage-head h3 {
  margin: 0;
  color: var(--myinternship-navy-dark);
  font-size: var(--myfont-card-title, 1.8rem);
}

.myinternship-career-stage > p {
  margin: 0.55rem 0 0.8rem;
}

.myinternship-career-stage-links {
  display: grid;
  gap: 0.45rem;
}

.myinternship-career-stage-links a,
.myinternship-link-pending {
  display: block;
  padding: 0.45rem 0.65rem;
  border-left: 0.25rem solid var(--myinternship-purple);
}

.myinternship-career-stage-links a {
  color: var(--myinternship-navy);
  background: #F7F6FA;
  text-decoration: none;
}

.myinternship-career-stage-links a:hover,
.myinternship-career-stage-links a:focus {
  color: #FFFFFF;
  background: var(--myinternship-purple);
  text-decoration: none;
}

.myinternship-link-pending {
  color: #7A7F85;
  background: #F5F5F5;
}

/* 頁面收尾：只留彩色鉛筆結尾線 */
.myinternship-page-final .myinternship-content {
  padding-top: 0;
  padding-bottom: 1.4rem;
}

.myinternship-page-end {
  width: 100%;
  height: 0.38rem;
  margin-top: 1.7rem;
  opacity: 0.72;
  transform: rotate(-0.08deg);
  background:
    linear-gradient(90deg,
      #D86B6B 0 18%,
      #E4B84E 18% 37%,
      #5F9B77 37% 58%,
      #5A86B8 58% 79%,
      #8B75B6 79% 100%);
}

@media screen and (max-width: 900px) {
  .myinternship-source-layout,
  .myinternship-career-stages {
    grid-template-columns: 1fr 1fr;
  }

  .myinternship-source-schools {
    grid-column: span 2;
  }

  .myinternship-industry-bank,
  .myinternship-industry-invest,
  .myinternship-industry-insurance,
  .myinternship-industry-leasing,
  .myinternship-industry-realestate {
    grid-column: span 6;
  }

  .myinternship-research-path {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .myinternship-source-layout,
  .myinternship-career-stages {
    grid-template-columns: 1fr;
  }

  .myinternship-source-schools {
    grid-column: auto;
  }

  .myinternship-industry-bank,
  .myinternship-industry-invest,
  .myinternship-industry-insurance,
  .myinternship-industry-leasing,
  .myinternship-industry-realestate {
    grid-column: 1 / -1;
  }
}



/* =========================================================
   v0.8｜準備進入職場：校內優先＋外部延伸資源
   ========================================================= */

.myinternship-career-stages {
  grid-template-columns: 0.9fr 1.35fr 1.2fr;
  align-items: start;
}

.myinternship-career-stage-self {
  border-top-color: #5F8F7B;
}

.myinternship-career-stage-prepare {
  border-top-color: #8174A3;
}

.myinternship-career-stage-action {
  border-top-color: #C58A55;
}

.myinternship-career-stage-self .myinternship-career-stage-head > span,
.myinternship-career-stage-self .myinternship-career-stage-head > i {
  color: #5F8F7B;
}

.myinternship-career-stage-prepare .myinternship-career-stage-head > span,
.myinternship-career-stage-prepare .myinternship-career-stage-head > i {
  color: #8174A3;
}

.myinternship-career-stage-action .myinternship-career-stage-head > span,
.myinternship-career-stage-action .myinternship-career-stage-head > i {
  color: #C58A55;
}

.myinternship-career-linkgroup-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1rem 0 0.45rem;
  color: #5D6670;
  
  font-weight: 800;
}

.myinternship-career-linkgroup-title:first-of-type {
  margin-top: 0.8rem;
}

.myinternship-career-stage-links-secondary a {
  background: #FAFAFA;
  border-left-color: #AAB2BA;
  font-weight: 500;
}

.myinternship-career-stage-links-secondary a:hover,
.myinternship-career-stage-links-secondary a:focus {
  background: #65717C;
}

.myinternship-career-extensions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.myinternship-career-extensions > a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  color: #4D5963;
  background: #F8F6F1;
  border: 0.1rem solid #DDD4C5;
  text-decoration: none;
}

.myinternship-career-extensions > a > i {
  flex: 0 0 auto;
  color: #A57E48;
  font-size: 1.8rem;
}

.myinternship-career-extensions strong,
.myinternship-career-extensions small {
  display: block;
}

.myinternship-career-extensions small {
  margin-top: 0.08rem;
  color: #7A7F84;
  
}

.myinternship-career-extensions > a:hover,
.myinternship-career-extensions > a:focus {
  color: #FFFFFF;
  background: #A57E48;
  border-color: #A57E48;
  text-decoration: none;
}

.myinternship-career-extensions > a:hover i,
.myinternship-career-extensions > a:focus i,
.myinternship-career-extensions > a:hover small,
.myinternship-career-extensions > a:focus small {
  color: #FFFFFF;
}

@media screen and (max-width: 900px) {
  .myinternship-career-stages {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 480px) {
  .myinternship-career-extensions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   UNDERGRADUATE FAMILY｜Study Abroad
   Migrated from former page-abroad-undergrad.css
   ========================================================= */
.myabroad-page{
  --myabroad-navy:#2E4B70;
  --myabroad-gold:#B08F5A;
  --myabroad-light:#F5F7FA;
  --myabroad-line:#D9DEE5;
  --myabroad-text:#3E434A;
  --myabroad-muted:#6A7078;
  color:var(--myabroad-text);
  font-family:"Noto Sans TC",sans-serif;
}

/* =========================================================
   01. Hero
   ========================================================= */

.myabroad-hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1.8rem;
  align-items:center;
  margin-bottom:2rem;
  padding:2.4rem;
  color:#fff;
  background:linear-gradient(135deg,#243E60,#3D648D);
  border-radius:1rem;
}

.myabroad-hero-icon{
  display:grid;
  width:7rem;
  height:7rem;
  place-items:center;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  font-size:3.2rem;
}

.myabroad-eyebrow{
  margin:0 0 .4rem;
  opacity:.78;
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.12em;
}

.myabroad-hero h1{
  margin:0;
  color:#fff;
  font-family:"Noto Serif TC",serif;
  font-size:clamp(2.8rem,5vw,4.4rem);
  line-height:1.25;
}

.myabroad-hero p:last-child{
  max-width:80rem;
  margin:.7rem 0 0;
  font-size:1.55rem;
  line-height:1.8;
}

/* =========================================================
   02. Quick navigation
   ========================================================= */

.myabroad-quicknav{
  display:flex;
  gap:.8rem;
  margin-bottom:3rem;
  padding:1rem;
  overflow-x:auto;
  background:#fff;
  border:1px solid var(--myabroad-line);
  border-radius:.8rem;
  box-shadow:0 .4rem 1.2rem rgba(46,75,112,.08);
}

.myabroad-quicknav a{
  flex:0 0 auto;
  padding:.7rem 1.2rem;
  color:var(--myabroad-navy);
  background:#EEF2F6;
  border-radius:999px;
  
  font-weight:700;
  text-decoration:none;
}

.myabroad-quicknav a:hover,
.myabroad-quicknav a:focus{
  color:#fff;
  background:var(--myabroad-navy);
  text-decoration:none;
}

/* =========================================================
   03. Sections and cards
   ========================================================= */

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

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

.myabroad-program-card,
.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);
}

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

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

.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);
}

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

.myabroad-program-type{
  margin:0 0 .3rem;
  color:#8A6B3E;
  
  font-weight:700;
  letter-spacing:.04em;
}

.myabroad-university-header h2{
  margin:0;
  color:var(--myabroad-navy);
  font-family:"Noto Serif TC",serif;
  font-size:2.2rem;
  line-height:1.4;
}

.myabroad-university-header p:last-child{
  margin:.7rem 0 0;
  
  line-height:1.75;
}

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

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

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

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

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

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

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

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

#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 的真正地理錨點 */
.myabroad-map-marker,
.myabroad-continent-label{
  position:absolute;
  z-index:4;
  width:0;
  height:0;
  pointer-events:none;
  line-height:1.35;
}

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

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

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

/* 起點圓點：圓心精確對準 X/Y */
.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%);
}

/* 標籤本體 */
.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:1.15rem;
  line-height:1.35;
  box-shadow:0 .2rem .6rem rgba(0,0,0,.22);
}

/* 標籤標題 */
.myabroad-marker-label b{
  display:block;
  color:#F0C987;
  font-size:1rem;
}

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

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

/* 飛機：座標同樣以 canvas / 地圖為基準 */
.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 */
.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 水滴圖示 */
.myabroad-marker-pin .fa{
  display:block;
  line-height:1;
}

/* 水滴中央圓心 */
.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
   ========================================================= */

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

.myabroad-content-panel>h2{
  margin-top:0;
  color:var(--myabroad-navy);
  font-size:2rem;
}

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

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

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

.myabroad-fact b,
.myabroad-info-grid b{
  display:block;
  margin-bottom:.4rem;
  color:var(--myabroad-navy);
  
}

.myabroad-fact span,
.myabroad-info-grid span{
  display:block;
  
  line-height:1.65;
}

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

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

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

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

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

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

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

.myabroad-details[open] summary::after{
  content:"";
}

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

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

.myabroad-details ul,
.myabroad-details ol{
  padding-left:2.2rem;
  
  line-height:1.8;
}

.myabroad-details h3{
  color:#486482;
  font-size:1.45rem;
}

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

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

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

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

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

.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;
}

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

.myabroad-contact>b{
  display:block;
  margin-bottom:.6rem;
  color:#2E4B70;
  
}

.myabroad-contact p{
  margin:.25rem 0;
  
  line-height:1.55;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* =========================================================
   Undergraduate family skin v1.0｜2026-08-13
   此檔僅供學士班海外學習中英文頁使用。
   研究所海外學習繼續沿用原 page-abroad.css 藍金風格。
   ========================================================= */

.myabroad-undergrad-page{
  --myabroad-navy:#2E4B70;
  --myabroad-red:#D5525F;
  --myabroad-red-soft:#FCE8EA;
  --myabroad-yellow:#E0AF22;
  --myabroad-yellow-soft:#FFF3C4;
  --myabroad-blue:#4F83A8;
  --myabroad-blue-soft:#EAF2F7;
  --myabroad-green:#558A72;
  --myabroad-green-soft:#EAF3EE;
  --myabroad-purple:#8A6FA8;
  --myabroad-purple-soft:#F1EAF8;
  
  
  
}

.myabroad-undergrad-page .myabroad-hero{display:none;}

/* Quick Navigation */
.myabroad-undergrad-page .myabroad-quicknav{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.7rem;
  margin:1.4rem 0 4.2rem;
  padding:1rem;
  overflow:visible;
  background:rgba(255,253,249,.94);
  border:1px solid #E4DED5;
  box-shadow:0 .5rem 1.5rem rgba(46,75,112,.07);
}
.myabroad-undergrad-page .myabroad-quicknav a{
  display:flex;
  min-height:4.5rem;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.65rem .7rem;
  color:#27333D;
  border:1px solid #DDD8D0;
  border-radius:999px;
  
  line-height:1.3;
  text-align:center;
  white-space:normal;
  text-decoration:none !important;
  box-shadow:0 .15rem .45rem rgba(46,75,112,.04);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(1){background:var(--myabroad-blue-soft);}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(2){background:var(--myabroad-yellow-soft);}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(3){background:var(--myabroad-green-soft);}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(4){background:var(--myabroad-purple-soft);}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(5){background:var(--myabroad-red-soft);}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(1):hover,
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(1):focus{background:#356886;border-color:#356886;}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(2):hover,
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(2):focus{background:#A77B00;border-color:#A77B00;}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(3):hover,
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(3):focus{background:#376B56;border-color:#376B56;}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(4):hover,
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(4):focus{background:#6F568B;border-color:#6F568B;}
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(5):hover,
.myabroad-undergrad-page .myabroad-quicknav a:nth-child(5):focus{background:#A83B47;border-color:#A83B47;}
.myabroad-undergrad-page .myabroad-quicknav a:hover,
.myabroad-undergrad-page .myabroad-quicknav a:focus{
  color:#fff;
  transform:translateY(-.12rem);
  box-shadow:0 .45rem 1rem rgba(46,75,112,.12);
}

/* Pencil section titles */
.myabroad-undergrad-page .myabroad-major-section + .myabroad-major-section{margin-top:7rem;}
.myabroad-undergrad-page .myabroad-section-title{
  position:relative;
  display:inline-flex;
  max-width:calc(100% - 1rem);
  min-height:4.4rem;
  align-items:center;
  margin:0 0 1.6rem;
  padding:.35rem 1.1rem .45rem .65rem;
  isolation:isolate;
}
.myabroad-undergrad-page .myabroad-section-title>span:first-child{
  position:relative;
  z-index:2;
  color:#24323D;
  
  font-weight:800;
  line-height:1.3;
  text-shadow:0 1px 0 #fff,0 0 .45rem rgba(255,255,255,.66);
}
.myabroad-undergrad-page .myabroad-pencil-strokes{
  position:absolute;
  z-index:0;
  top:50%;
  left:.2rem;
  display:block;
  width:calc(100% - .2rem);
  min-width:18rem;
  height:3.8rem;
  transform:translateY(-47%);
  opacity:.28;
  pointer-events:none;
}
.myabroad-undergrad-page .myabroad-pencil-strokes i{
  position:absolute;
  display:block;
  width:31%;
  height:1.55rem;
  border-radius:45% 55% 48% 52%;
}
.myabroad-undergrad-page .myabroad-pencil-strokes i:nth-child(1){left:0;top:54%;background:var(--myabroad-red);transform:translateY(-50%) rotate(-24deg);}
.myabroad-undergrad-page .myabroad-pencil-strokes i:nth-child(2){left:24%;top:46%;background:var(--myabroad-yellow);transform:translateY(-50%) rotate(-20deg);}
.myabroad-undergrad-page .myabroad-pencil-strokes i:nth-child(3){left:49%;top:55%;background:var(--myabroad-blue);transform:translateY(-50%) rotate(-25deg);}
.myabroad-undergrad-page .myabroad-pencil-strokes i:nth-child(4){left:72%;top:44%;background:var(--myabroad-green);transform:translateY(-50%) rotate(-21deg);}

/* Intro */
.myabroad-undergrad-page .myabroad-intro{
  padding:1.4rem 1.6rem;
  background:linear-gradient(180deg,#EEF5F9 0%,#F8FBFD 100%);
  border:1px solid #D5E3EC;
  border-left:0;
  border-radius:.65rem;
  
}

/* Exchange */
.myabroad-undergrad-page #exchange .myabroad-program-card{
  border-color:#CCDDE7;
  box-shadow:0 .55rem 1.5rem rgba(46,75,112,.07);
}
.myabroad-undergrad-page #exchange .myabroad-map-panel{background:linear-gradient(180deg,#EEF5F9 0%,#F7FAFC 100%);}
.myabroad-undergrad-page #exchange .myabroad-content-panel>h2{color:#356886;}
.myabroad-undergrad-page #exchange .myabroad-fact{background:var(--myabroad-blue-soft);border-color:#D0E0EA;}
.myabroad-undergrad-page #exchange .myabroad-fact:nth-child(2){background:var(--myabroad-green-soft);border-color:#D0E0D8;}
.myabroad-undergrad-page #exchange .myabroad-fact:nth-child(3){background:var(--myabroad-yellow-soft);border-color:#E8D795;}
.myabroad-undergrad-page #exchange .myabroad-fact:nth-child(4){background:var(--myabroad-purple-soft);border-color:#DCCEE7;}

/* Dual-degree cards */
.myabroad-undergrad-page .myabroad-university-card{
  border-color:#DDD8D0;
  box-shadow:0 .55rem 1.5rem rgba(46,75,112,.07);
}
.myabroad-undergrad-page #swansea{--myabroad-card-accent:var(--myabroad-green);--myabroad-card-soft:var(--myabroad-green-soft);}
.myabroad-undergrad-page #essex{--myabroad-card-accent:var(--myabroad-purple);--myabroad-card-soft:var(--myabroad-purple-soft);}
.myabroad-undergrad-page #cudenver{--myabroad-card-accent:var(--myabroad-red);--myabroad-card-soft:var(--myabroad-red-soft);}
.myabroad-undergrad-page .myabroad-university-header{
  position:relative;
  background:linear-gradient(135deg,var(--myabroad-card-soft),#FFFDF9 72%);
}
.myabroad-undergrad-page .myabroad-university-header::before{
  content:"";
  position:absolute;
  top:0;right:0;left:0;
  height:.32rem;
  background:var(--myabroad-card-accent);
}
.myabroad-undergrad-page .myabroad-country-badge{background:var(--myabroad-card-accent);}
.myabroad-undergrad-page .myabroad-program-type{color:var(--myabroad-card-accent);}
.myabroad-undergrad-page .myabroad-info-grid>div{background:#F8F8F7;border-color:#E1DDD6;}
.myabroad-undergrad-page #swansea .myabroad-info-grid>div{background:var(--myabroad-green-soft);}
.myabroad-undergrad-page #essex .myabroad-info-grid>div{background:var(--myabroad-purple-soft);}
.myabroad-undergrad-page #cudenver .myabroad-info-grid>div{background:var(--myabroad-red-soft);}

/* Details / notices */
.myabroad-undergrad-page .myabroad-details summary{color:#314B64;background:#F3F6F8;}
.myabroad-undergrad-page .myabroad-details summary::after{color:#4F83A8;}
.myabroad-undergrad-page .myabroad-notice{color:#665424;background:#FFF8E5;border-left:.4rem solid var(--myabroad-yellow);}
.myabroad-undergrad-page .myabroad-contact{background:#F4F7F9;border-color:#D8E1E7;}

/* Link buttons */
.myabroad-undergrad-page .myabroad-link-group .mybtn{border:0;text-decoration:none !important;}
.myabroad-undergrad-page .myabroad-link-group .mybtn-blue{color:#fff;background:#4F83A8;}
.myabroad-undergrad-page .myabroad-link-group .mybtn-gold{color:#4A3A12;background:#F1D97D;}
.myabroad-undergrad-page .myabroad-link-group .mybtn-gray{color:#3D4851;background:#E8E4EE;}
.myabroad-undergrad-page .myabroad-link-group .mybtn-blue:hover,
.myabroad-undergrad-page .myabroad-link-group .mybtn-blue:focus{color:#fff;background:#356886;}
.myabroad-undergrad-page .myabroad-link-group .mybtn-gold:hover,
.myabroad-undergrad-page .myabroad-link-group .mybtn-gold:focus{color:#fff;background:#A77B00;}
.myabroad-undergrad-page .myabroad-link-group .mybtn-gray:hover,
.myabroad-undergrad-page .myabroad-link-group .mybtn-gray:focus{color:#fff;background:#6F568B;}

/* Typography */
.myabroad-undergrad-page .myabroad-university-header p:last-child,
.myabroad-undergrad-page .myabroad-details ul,
.myabroad-undergrad-page .myabroad-details ol{}
.myabroad-undergrad-page .myabroad-fact b,
.myabroad-undergrad-page .myabroad-info-grid b{}
.myabroad-undergrad-page .myabroad-fact span,
.myabroad-undergrad-page .myabroad-info-grid span{}

/* English */
html[lang="en"] .myabroad-undergrad-page .myabroad-quicknav a{padding:.65rem .55rem;}
html[lang="en"] .myabroad-undergrad-page .myabroad-section-title>span:first-child{letter-spacing:0;}
html[lang="en"] .myabroad-undergrad-page .myabroad-university-header h2{line-height:1.3;}

/* Responsive */
@media screen and (max-width:900px){
  .myabroad-undergrad-page .myabroad-quicknav{grid-template-columns:repeat(3,minmax(0,1fr));}
  .myabroad-undergrad-page .myabroad-major-section + .myabroad-major-section{margin-top:6rem;}
}
@media screen and (max-width:640px){
  .myabroad-undergrad-page{}
  .myabroad-undergrad-page .myabroad-quicknav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.6rem;
    padding:.8rem;
    margin-bottom:3.5rem;
  }
  .myabroad-undergrad-page .myabroad-quicknav a{min-height:4.8rem;border-radius:.7rem;}
  .myabroad-undergrad-page .myabroad-major-section + .myabroad-major-section{margin-top:5rem;}
  .myabroad-undergrad-page .myabroad-section-title{max-width:100%;min-height:4rem;}
  .myabroad-undergrad-page .myabroad-section-title>span:first-child{}
  .myabroad-undergrad-page .myabroad-pencil-strokes{min-width:15rem;height:3.4rem;}
}

/* =========================================================
   UNDERGRADUATE FAMILY｜Scholarships
   Migrated from former page-scholarship.css
   ========================================================= */
.myscholar-page{--myscholar-navy:#2E4B70;--myscholar-navy-dark:#253E5D;--myscholar-gold:#B08F5A;--myscholar-soft:#F4F7FA;--myscholar-line:#D8DEE6;--myscholar-text:#41464B;--myscholar-muted:#6A7078;color:var(--myscholar-text);font-family:"Noto Sans TC",sans-serif;line-height:1.8;}

/* 使用自訂 Page Header 時，取消獎助頁自身的上方留白。 */
.myscholar-page.mycustom-title-page{padding-top:0;}

.myscholar-page *,.myscholar-page *::before,.myscholar-page *::after{box-sizing:border-box;}
.myscholar-quicknav-wrap{margin:0 0 2.8rem;}.myscholar-quicknav{display:block;margin:0;padding:1rem;overflow-x:auto;overflow-y:hidden;background:#fff;border:1px solid var(--myscholar-line);border-radius:.8rem;box-shadow:0 .4rem 1.2rem rgba(46,75,112,.07);scrollbar-width:thin;}.myscholar-quicknav-scroll{display:flex;flex-wrap:nowrap;gap:.75rem;width:max-content;min-width:100%;}.myscholar-quicknav a{flex:0 0 auto;padding:.65rem 1.15rem;color:var(--myscholar-navy);background:#EEF2F6;border-radius:999px;font-weight:700;text-decoration:none;}.myscholar-quicknav a:hover,.myscholar-quicknav a:focus{color:#fff;background:var(--myscholar-navy);text-decoration:none;}
.myscholar-intro,.myscholar-status-note{margin:0 0 2rem;padding:1.35rem 1.6rem;border-radius:.6rem;line-height:1.8;}.myscholar-intro{background:#F3F6F9;border-left:.45rem solid var(--myscholar-gold);}.myscholar-status-note{color:#634F2B;background:#FFF8E9;border:1px solid #E8D8B9;}.myscholar-status-note .fa{margin-right:.45rem;color:#9A7339;}
.myscholar-section{margin-bottom:3.2rem;scroll-margin-top:2rem;}.myscholar-section-lead{margin:1rem 0 1.5rem;color:var(--myscholar-muted);}.myscholar-title-icon{margin-right:.55rem;color:var(--myscholar-navy);}
.myscholar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;}.myscholar-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));}.myscholar-card{display:flex;min-width:0;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--myscholar-line);border-radius:.85rem;box-shadow:0 .45rem 1.4rem rgba(46,75,112,.08);}.myscholar-card-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.45rem 1.55rem 1.2rem;background:linear-gradient(135deg,#F8FAFC,#F0F3F7);border-bottom:1px solid var(--myscholar-line);}.myscholar-card-icon{display:grid;width:4rem;height:4rem;place-items:center;color:#fff;background:var(--myscholar-navy);border-radius:.65rem;font-size:1.8rem;}.myscholar-card-icon-gold{background:var(--myscholar-gold);}.myscholar-card h3{margin:0;color:var(--myscholar-navy);font-family:"Noto Serif TC",serif;font-size:1.75rem;line-height:1.45;}.myscholar-card-sub{margin:.3rem 0 0;color:var(--myscholar-muted);font-weight:700;letter-spacing:.02em;}.myscholar-card-body{display:flex;flex:1 1 auto;flex-direction:column;padding:1.4rem 1.55rem 1.55rem;}.myscholar-card-body>p:first-child{margin-top:0;}.myscholar-card-body p{margin:.45rem 0 1rem;}
.myscholar-facts{display:grid;gap:.55rem;margin:.2rem 0 1.1rem;}.myscholar-fact{display:grid;grid-template-columns:8.6rem minmax(0,1fr);gap:.8rem;padding:.6rem .75rem;background:var(--myscholar-soft);border-radius:.45rem;line-height:1.65;}.myscholar-fact b{color:var(--myscholar-navy);}.myscholar-card-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:auto;padding-top:.5rem;}.myscholar-card-actions .mybtn{margin:.15rem 0;}.myscholar-source{margin-top:.8rem;color:var(--myscholar-muted);font-size:1.15rem;line-height:1.6;}.myscholar-source .fa{margin-right:.25rem;color:var(--myscholar-gold);}
.myscholar-tag-row{display:flex;gap:.45rem;flex-wrap:wrap;margin:.55rem 0 0;}.myscholar-tag{display:inline-block;padding:.25rem .65rem;color:var(--myscholar-navy);background:#EAF0F5;border:1px solid #D5E0E9;border-radius:999px;font-weight:700;line-height:1.4;}.myscholar-tag-gold{color:#72582F;background:#F6F0E7;border-color:#E4D3B8;}.myscholar-tag-alert{color:#7A4D1F;background:#FFF3DF;border-color:#E8D2AD;}
.myscholar-details{margin:.8rem 0 1rem;background:#fff;border:1px solid var(--myscholar-line);border-radius:.55rem;}.myscholar-details summary{position:relative;padding:.8rem 3.2rem .8rem 1rem;color:var(--myscholar-navy);background:#F4F6F8;border-radius:.55rem;cursor:pointer;font-weight:700;list-style:none;}.myscholar-details summary::-webkit-details-marker{display:none;}.myscholar-details summary::after{content:"";position:absolute;top:50%;right:1rem;color:var(--myscholar-navy);font-family:FontAwesome;transform:translateY(-50%);}.myscholar-details[open] summary::after{content:"";}.myscholar-details ul{margin:1rem 1.2rem 1.2rem;padding-left:2rem;}
.myscholar-degree-panel{margin:1.2rem 0 2.2rem;padding:1.5rem;background:#FAFBFC;border:1px solid var(--myscholar-line);border-radius:.85rem;}.myscholar-degree-heading{display:flex;gap:.8rem;align-items:center;margin:0 0 1.25rem;color:var(--myscholar-navy);font-family:"Noto Serif TC",serif;font-size:2rem;}.myscholar-degree-heading .fa{color:var(--myscholar-gold);}
.myscholar-resource-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}.myscholar-resource{display:flex;gap:.8rem;align-items:flex-start;padding:1.2rem;color:var(--myscholar-text);background:#fff;border:1px solid var(--myscholar-line);border-radius:.7rem;text-decoration:none;}.myscholar-resource:hover,.myscholar-resource:focus{color:var(--myscholar-navy);background:#F4F7FA;text-decoration:none;}.myscholar-resource .fa{flex:0 0 auto;margin-top:.2rem;color:var(--myscholar-gold);font-size:1.8rem;}.myscholar-resource b{display:block;margin-bottom:.2rem;color:var(--myscholar-navy);}.myscholar-resource span{display:block;color:var(--myscholar-muted);line-height:1.55;}

/* 手機版快速導覽滑動提示：桌機預設隱藏。 */
.myscholar-quicknav-hint{display:none;}

@media screen and (max-width:900px){.myscholar-grid,.myscholar-grid-three,.myscholar-resource-strip{grid-template-columns:1fr;}}
@media screen and (max-width:640px){
  .myscholar-page{}
  .myscholar-page.mycustom-title-page{padding-top:0;}
  .myscholar-card-head{grid-template-columns:1fr;}
  .myscholar-card-icon{width:3.6rem;height:3.6rem;}
  .myscholar-fact{grid-template-columns:1fr;gap:.15rem;}
  .myscholar-card-actions .mybtn{width:100%;}

  /* =========================================================
     Scholarship quick navigation - Mobile horizontal scroll
     ---------------------------------------------------------
     提示文字與按鈕滑動列分層處理：
     .myscholar-quicknav-hint 不參與按鈕列 flex 排版；
     .myscholar-quicknav-scroll 僅負責排列可左右滑動的按鈕。
     ========================================================= */
  .myscholar-quicknav-wrap{
    width:100%;
  }

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

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

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

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

  .myscholar-quicknav-hint{
    display:block;
    margin:0 0 .45rem;
    color:#777;
    
    line-height:1.4;
    text-align:right;
  }

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

/* =========================================================
   v1.2 - Source website / regulation links
   ========================================================= */

.myscholar-source-links{
  display:flex;
  gap:.55rem 1rem;
  flex-wrap:wrap;
  margin-top:1rem;
  padding-top:.85rem;
  border-top:1px dashed #D8DEE6;
}

.myscholar-source-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  color:#2E4B70;
  
  font-weight:700;
  line-height:1.55;
  text-decoration:none;
}

.myscholar-source-link:hover,
.myscholar-source-link:focus{
  color:#FFFFFF;
  background:#2E4B70;
  text-decoration:none;
}

.myscholar-source-link .fa{
  color:#AA8B5A;
}

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

/* Legacy scholarship hero is retained below for backward compatibility,
   but v1.2 scholarship pages now use the shared mypagehead component. */

@media screen and (max-width:640px){
  .myscholar-source-links{
    display:grid;
    grid-template-columns:1fr;
    gap:.45rem;
  }

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


/* =========================================================
   v1.4 | Undergraduate family visual system
   ========================================================= */
.myscholar-page{
  --myscholar-ink:#27333D;
  --myscholar-navy:#2E4B70;
  --myscholar-paper:#FFFDF9;
  --myscholar-paper-alt:#FAF8F3;
  --myscholar-line:#DED9D0;
  --myscholar-muted:#66717C;
  --myscholar-red:#D5525F;
  --myscholar-red-soft:#FCE8EA;
  --myscholar-yellow:#E0AF22;
  --myscholar-yellow-soft:#FFF8DE;
  --myscholar-blue:#4F83A8;
  --myscholar-blue-soft:#EAF2F7;
  --myscholar-green:#558A72;
  --myscholar-green-soft:#EAF3EE;
  --myscholar-purple:#8A6FA8;
  --myscholar-purple-soft:#F1EAF8;
  --myscholar-accent:var(--myscholar-blue);
  --myscholar-accent-soft:var(--myscholar-blue-soft);
  color:var(--myscholar-ink);
  
}

/* Colored-pencil section headings */
.myscholar-page .myscholar-pencil-title{
  position:relative;
  display:inline-flex!important;
  width:auto!important;
  max-width:calc(100% - 1rem);
  min-height:4.4rem;
  align-items:center;
  margin-top:1.8rem;
  margin-bottom:1.4rem;
  padding:.35rem 1.1rem .45rem .65rem;
  overflow:visible;
  isolation:isolate;
  border:0!important;
  background:transparent!important;
}
.myscholar-page .myscholar-pencil-title::before,
.myscholar-page .myscholar-pencil-title::after,
.myscholar-page .myscholar-pencil-title>span:first-child::before,
.myscholar-page .myscholar-pencil-title>span:first-child::after{
  display:none!important;
  content:none!important;
}
.myscholar-page .myscholar-pencil-title>span:first-child{
  position:relative;
  z-index:2;
  display:inline-block;
  color:var(--myscholar-ink);
  
  font-weight:800;
  line-height:1.3;
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.96),0 0 .45rem rgba(255,255,255,.66);
}
.myscholar-page .myscholar-title-icon{margin-right:.55rem;color:inherit;}
.myscholar-page .myscholar-pencil-strokes{
  position:absolute;
  z-index:0;
  top:50%;
  left:.2rem;
  display:block;
  width:calc(100% - .2rem);
  min-width:17rem;
  height:3.8rem;
  transform:translateY(-47%);
  opacity:.32;
  pointer-events:none;
}
.myscholar-page .myscholar-pencil-strokes i{
  position:absolute;
  display:block;
  width:31%;
  height:1.55rem;
  border-radius:45% 55% 48% 52%;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) .08rem,rgba(60,60,60,.035) .09rem,transparent .17rem);
  background-blend-mode:soft-light;
  box-shadow:0 .13rem 0 rgba(255,255,255,.22) inset,0 -.1rem 0 rgba(60,60,60,.04) inset;
  transform-origin:center;
}
.myscholar-page .myscholar-pencil-strokes i::before,
.myscholar-page .myscholar-pencil-strokes i::after{display:none!important;content:none!important;}
.myscholar-page .myscholar-pencil-strokes i:nth-child(1){left:0;top:54%;background-color:var(--myscholar-red);transform:translateY(-50%) rotate(-24deg) scaleX(1.08);}
.myscholar-page .myscholar-pencil-strokes i:nth-child(2){left:24%;top:46%;background-color:var(--myscholar-yellow);transform:translateY(-50%) rotate(-20deg) scaleX(1.12);}
.myscholar-page .myscholar-pencil-strokes i:nth-child(3){left:49%;top:55%;background-color:var(--myscholar-blue);transform:translateY(-50%) rotate(-25deg) scaleX(1.08);}
.myscholar-page .myscholar-pencil-strokes i:nth-child(4){left:72%;top:44%;background-color:var(--myscholar-green);transform:translateY(-50%) rotate(-21deg) scaleX(1.08);}

/* Each information family gets one restrained accent. */
.myscholar-page #academic{--myscholar-accent:var(--myscholar-yellow);--myscholar-accent-soft:var(--myscholar-yellow-soft);}
.myscholar-page #support{--myscholar-accent:var(--myscholar-red);--myscholar-accent-soft:var(--myscholar-red-soft);}
.myscholar-page #career{--myscholar-accent:var(--myscholar-blue);--myscholar-accent-soft:var(--myscholar-blue-soft);}
.myscholar-page #abroad{--myscholar-accent:var(--myscholar-green);--myscholar-accent-soft:var(--myscholar-green-soft);}
.myscholar-page #resources{--myscholar-accent:var(--myscholar-purple);--myscholar-accent-soft:var(--myscholar-purple-soft);}

/* Quick navigation */
.myscholar-page .myscholar-quicknav{
  background:var(--myscholar-paper);
  border-color:var(--myscholar-line);
  box-shadow:0 .35rem 1.1rem rgba(46,75,112,.06)
;}
.myscholar-page .myscholar-quicknav a{
  color:var(--myscholar-ink);
  border:1px solid transparent;
  }
.myscholar-page .myscholar-quicknav a:nth-child(1){background:var(--myscholar-yellow-soft);border-color:#EAD58B;}
.myscholar-page .myscholar-quicknav a:nth-child(2){background:var(--myscholar-red-soft);border-color:#EAB7BD;}
.myscholar-page .myscholar-quicknav a:nth-child(3){background:var(--myscholar-blue-soft);border-color:#BED4E3;}
.myscholar-page .myscholar-quicknav a:nth-child(4){background:var(--myscholar-green-soft);border-color:#C1D8CA;}
.myscholar-page .myscholar-quicknav a:nth-child(5){background:var(--myscholar-purple-soft);border-color:#D5C4E5;}
.myscholar-page .myscholar-quicknav a:hover,
.myscholar-page .myscholar-quicknav a:focus{color:#fff;background:var(--myscholar-navy);border-color:var(--myscholar-navy);}

/* Intro card with one four-color family line */
.myscholar-page .myscholar-intro{
  position:relative;
  overflow:hidden;
  margin-bottom:2.4rem;
  padding:1.55rem 1.8rem 1.45rem;
  color:var(--myscholar-ink);
  background:var(--myscholar-paper);
  border:1px solid var(--myscholar-line);
  border-radius:.7rem;
  
  box-shadow:0 .3rem 1rem rgba(46,75,112,.045)
;}
.myscholar-page .myscholar-intro::before{
  content:"";
  position:absolute;
  top:0;right:0;left:0;height:.32rem;
  background:linear-gradient(90deg,var(--myscholar-red) 0 25%,var(--myscholar-yellow) 25% 50%,var(--myscholar-blue) 50% 75%,var(--myscholar-green) 75% 100%);
  opacity:.82
;}
.myscholar-page .myscholar-intro .fa{margin-right:.35rem;color:var(--myscholar-blue);}
.myscholar-page .myscholar-section-lead{margin:.25rem 0 1.6rem;color:var(--myscholar-muted);line-height:1.75;}

/* Scholarship cards: same structure, softer Undergraduate palette */
.myscholar-page .myscholar-card{
  position:relative;
  background:var(--myscholar-paper);
  border-color:var(--myscholar-line);
  border-radius:.8rem;
  box-shadow:0 .35rem 1.1rem rgba(46,75,112,.06)
;}
.myscholar-page .myscholar-card::before{
  content:"";position:absolute;z-index:2;top:0;right:0;left:0;height:.28rem;
  background:var(--myscholar-accent);opacity:.72
;}
.myscholar-page .myscholar-card-head{
  padding:1.55rem 1.6rem 1.25rem;
  background:var(--myscholar-accent-soft);
  border-bottom-color:var(--myscholar-line)
;}
.myscholar-page .myscholar-card-icon,
.myscholar-page .myscholar-card-icon-gold{
  color:var(--myscholar-accent);
  background:rgba(255,255,255,.72);
  border:1px solid currentColor;
  border-radius:50%
;}
.myscholar-page .myscholar-card h3{color:var(--myscholar-ink);font-size:var(--myfont-card-title,2rem);}
.myscholar-page .myscholar-card-sub{color:#58636E;font-weight:700;line-height:1.5;letter-spacing:.015em;}
.myscholar-page .myscholar-card .myscholar-card-head h3{font-size:20px!important;font-weight:700!important;line-height:1.35;}
.myscholar-page .myscholar-card-body{padding:1.5rem 1.6rem 1.65rem;}
.myscholar-page .myscholar-card-body p{line-height:1.75;}

/* Tags */
.myscholar-page .myscholar-tag,
.myscholar-page .myscholar-tag-gold,
.myscholar-page .myscholar-tag-alert{
  padding:.3rem .72rem;
  color:var(--myscholar-ink);
  background:var(--myscholar-accent-soft);
  border-color:var(--myscholar-line);
  }
.myscholar-page .myscholar-tag-alert{border-style:dashed;}

/* Facts */
.myscholar-page .myscholar-facts{gap:.65rem;}
.myscholar-page .myscholar-fact{
  grid-template-columns:9.2rem minmax(0,1fr);
  gap:.9rem;
  padding:.72rem .85rem;
  color:var(--myscholar-ink);
  background:#FFF;
  border-left:.25rem solid var(--myscholar-accent);
  border-radius:.45rem;
  
  line-height:1.65
;}
.myscholar-page .myscholar-fact b{color:var(--myscholar-ink);}

/* Details */
.myscholar-page .myscholar-details{border-color:var(--myscholar-line);background:var(--myscholar-paper);}
.myscholar-page .myscholar-details summary{color:var(--myscholar-ink);background:var(--myscholar-accent-soft);}
.myscholar-page .myscholar-details summary::after{color:var(--myscholar-accent);}
.myscholar-page .myscholar-details ul{line-height:1.7;}

/* Source and regulation links */
.myscholar-page .myscholar-source-links{border-top-color:var(--myscholar-line);}
.myscholar-page .myscholar-source-link{color:var(--myscholar-navy);border-radius:.2rem;}
.myscholar-page .myscholar-source-link .fa{color:var(--myscholar-accent);}
.myscholar-page .myscholar-source-link:hover,
.myscholar-page .myscholar-source-link:focus{color:#fff;background:var(--myscholar-navy);}
.myscholar-page .myscholar-source-link:hover .fa,
.myscholar-page .myscholar-source-link:focus .fa{color:#fff;}

/* More-resources cards */
.myscholar-page .myscholar-resource{
  position:relative;
  overflow:hidden;
  color:var(--myscholar-ink);
  background:var(--myscholar-paper);
  border-color:var(--myscholar-line);
  box-shadow:0 .3rem 1rem rgba(46,75,112,.045)
;}
.myscholar-page #resources .myscholar-resource{--myresource-accent:var(--myscholar-purple);background:var(--myscholar-purple-soft);border-color:#DCCFE8;}
.myscholar-page .myscholar-resource::before{content:"";position:absolute;top:0;bottom:0;left:0;width:.28rem;background:var(--myresource-accent);opacity:.76;}
.myscholar-page .myscholar-resource .fa{color:var(--myresource-accent);}
.myscholar-page .myscholar-resource b{color:var(--myscholar-ink);}
.myscholar-page .myscholar-resource span{color:var(--myscholar-muted);}
.myscholar-page .myscholar-resource:hover,
.myscholar-page .myscholar-resource:focus{color:#fff;background:var(--myscholar-navy);border-color:var(--myscholar-navy);}
.myscholar-page .myscholar-resource:hover .fa,
.myscholar-page .myscholar-resource:focus .fa,
.myscholar-page .myscholar-resource:hover b,
.myscholar-page .myscholar-resource:focus b,
.myscholar-page .myscholar-resource:hover span,
.myscholar-page .myscholar-resource:focus span{color:#fff;}

.myscholar-page .myscholar-card-actions .mybtn:hover,
.myscholar-page .myscholar-card-actions .mybtn:focus{color:#fff;}

/* English-only fact-row width adjustment */
html[lang="en"] .myscholar-page .myscholar-fact{
  grid-template-columns:128px minmax(0,1fr);
}

@media screen and (max-width:640px){
  .myscholar-page .myscholar-pencil-title{
    max-width:100%;
    min-height:4rem;
    margin-top:1.35rem;
    margin-bottom:1.05rem;
    padding-right:.45rem
  ;}
  .myscholar-page .myscholar-pencil-title>span:first-child{}
  .myscholar-page .myscholar-pencil-strokes{min-width:14rem;height:3.4rem;}
  .myscholar-page .myscholar-card-head{grid-template-columns:auto minmax(0,1fr);gap:1rem;}
  .myscholar-page .myscholar-card-icon,
  .myscholar-page .myscholar-card-icon-gold{width:3.6rem;height:3.6rem;}
  .myscholar-page .myscholar-fact{grid-template-columns:1fr;gap:.2rem;}
  .myscholar-page .myscholar-quicknav-hint{color:var(--myscholar-muted);}
  .myscholar-page .myscholar-quicknav-hint .fa{color:var(--myscholar-blue);}
}


/* =========================================================
   v1.6 | More Scholarship Resources hover contrast
   ========================================================= */
.myscholar-page #resources .myscholar-resource:hover,
.myscholar-page #resources .myscholar-resource:focus{
  color:#fff;
  background:#6F568B;
  border-color:#6F568B;
}

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


/* =========================================================
   v1.7 | Quick-nav representative hover colors
   ========================================================= */
.myscholar-page .myscholar-quicknav a:nth-child(1):hover,
.myscholar-page .myscholar-quicknav a:nth-child(1):focus{
  color:#fff;
  background:#A77B00;
  border-color:#A77B00;
}

.myscholar-page .myscholar-quicknav a:nth-child(2):hover,
.myscholar-page .myscholar-quicknav a:nth-child(2):focus{
  color:#fff;
  background:#A83B47;
  border-color:#A83B47;
}

.myscholar-page .myscholar-quicknav a:nth-child(3):hover,
.myscholar-page .myscholar-quicknav a:nth-child(3):focus{
  color:#fff;
  background:#356886;
  border-color:#356886;
}

.myscholar-page .myscholar-quicknav a:nth-child(4):hover,
.myscholar-page .myscholar-quicknav a:nth-child(4):focus{
  color:#fff;
  background:#376B56;
  border-color:#376B56;
}

.myscholar-page .myscholar-quicknav a:nth-child(5):hover,
.myscholar-page .myscholar-quicknav a:nth-child(5):focus{
  color:#fff;
  background:#6F568B;
  border-color:#6F568B;
}

/* =========================================================
   v1.7 | Card-head tag visibility on colored backgrounds
   ========================================================= */
.myscholar-page .myscholar-card-head .myscholar-tag,
.myscholar-page .myscholar-card-head .myscholar-tag-gold,
.myscholar-page .myscholar-card-head .myscholar-tag-alert{
  color:var(--myscholar-ink);
  background:rgba(255,255,255,.82);
  border:1.5px solid var(--myscholar-accent);
  box-shadow:0 1px 0 rgba(255,255,255,.55);
  font-weight:700;
}

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


/* =========================================================
   v3.1｜2026-08-26｜Course schedule room visibility
   ---------------------------------------------------------
   Root cause:
   Desktop Chinese schedule used one-line ellipsis on the shared
   teacher / classroom metadata row.  When space was tight, the
   trailing classroom number disappeared first.
   Principle:
   Classroom information is operationally important; allow the
   metadata row to wrap rather than hiding it or shrinking type.
   ========================================================= */

.mycourse-page .mycourse-schedule-meta {
  min-height: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Keep the separator with normal text flow; no clipping owner. */
.mycourse-page .mycourse-meta-sep {
  display: inline;
}

/* English already has explicit teacher / room rows; reinforce
   room visibility without changing its four-line architecture. */
.mycourse-page-en .mycourse-schedule-room {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* =========================================================
   v3.1 end
   ========================================================= */


/* =========================================================
   v3.3｜2026-08-26｜Schedule metadata hierarchy + sticky weekdays
   ---------------------------------------------------------
   v3.2 is intentionally abandoned.
   This version starts from v3.1 and follows the global
   typography-token rule.

   1. Year / requirement marker uses the global META role.
   2. Teacher and classroom are explicit separate rows.
   3. Desktop weekday header is sticky only while the weekly
      table remains in view.
   ========================================================= */

.mycourse-page .mycourse-schedule-main .mycourse-schedule-tag,
.mycourse-page-en .mycourse-schedule-tag {
  font-size: var(--myfont-meta, 1.5rem);
  line-height: 1.35;
  white-space: nowrap;
}

.mycourse-page .mycourse-schedule-meta {
  display: grid;
  gap: 0.12rem;
  min-height: 0;
  margin-top: 0.28rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.mycourse-page .mycourse-schedule-teacher,
.mycourse-page .mycourse-schedule-room {
  display: block;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.mycourse-page .mycourse-schedule-room {
  color: var(--mycourse-muted);
}

.mycourse-page .mycourse-meta-sep {
  display: none;
}

@media screen and (min-width: 761px) {
  .mycourse-page .mycourse-schedule-desktop {
    overflow: visible;
  }

  .mycourse-page .mycourse-week-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .mycourse-page .mycourse-week-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #F1EEE7;
    box-shadow:
      inset 0 0.3rem 0 var(--mycourse-navy),
      0 0.22rem 0.45rem rgba(46, 75, 112, 0.12);
  }
}

/* =========================================================
   v3.3 end
   ========================================================= */


/* =========================================================
   v3.4｜2026-08-27｜Frozen weekday header (JS-synced)
   ---------------------------------------------------------
   - Native table sticky proved unreliable in live Rpage.
   - A viewport-fixed clone is shown only while the desktop
     weekly table crosses the viewport top.
   - It disappears before the weekly table ends.
   - Course category tag uses the global Eyebrow semantic role.
     The global scale has no text token below 14px; no local
     smaller size is invented.
   ========================================================= */

.mycourse-page .mycourse-schedule-main .mycourse-schedule-tag,
.mycourse-page-en .mycourse-schedule-tag {
  font-size: var(--myfont-eyebrow, 1.4rem);
  font-weight: 600;
}

@media screen and (min-width: 761px) {
  .mycourse-page .mycourse-week-table thead th {
    position: static;
    top: auto;
    z-index: auto;
    box-shadow: none;
  }
}

.mycourse-week-frozen {
  position: fixed;
  z-index: 1000;
  top: 0;
  display: none;
  margin: 0;
  pointer-events: none;
}

.mycourse-week-frozen.is-visible {
  display: grid;
}

.mycourse-week-frozen-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.9rem;
  color: #243E57;
  background: #F1EEE7;
  border-top: 0.3rem solid var(--mycourse-navy);
  border-right: 1px solid var(--mycourse-line);
  border-bottom: 1px solid var(--mycourse-line);
  font-size: var(--myfont-card-text, 1.5rem);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 0.22rem 0.45rem rgba(46, 75, 112, 0.12);
}

.mycourse-week-frozen-cell:first-child {
  border-left: 1px solid var(--mycourse-line);
}

@media screen and (max-width: 760px) {
  .mycourse-week-frozen {
    display: none !important;
  }
}

/* =========================================================
   v3.4 end
   ========================================================= */

/* v3.5-test｜2026-09-05｜Schedule data migration + EN typography owner fix */

/* =========================================================
   v3.7-test｜2026-09-06｜Schedule typography structural refactor
   ---------------------------------------------------------
   - Course-name typography is owned by .mycourse-schedule-name.
   - <strong> no longer determines schedule font size.
   - ZH/EN course names consume the same CARD TEXT semantic token.
   - Renderer must emit .mycourse-schedule-name for both languages.
   ========================================================= */