/**
 * 東華經濟 2026 新版網站
 * 海外學習頁面專屬樣式 v1.4
 *
 * RWD 地圖原則：
 * 1. .myabroad-map-frame 只負責外框、裁切與手機橫向捲動尺寸。
 * 2. .myabroad-map-canvas 是唯一的地圖定位座標系。
 * 3. 地圖圖片、紅點、定位針、飛機與洲別標籤都必須放在 canvas 內。
 * 4. 所有百分比座標皆以實際地圖 canvas 為基準，不以 frame 為基準。
 * 5. v1.4 起，定位點採獨立錨點：中英文版可共用同一組座標，不受標籤長度影響。
 */

.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-size:1.35rem;
  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;
  font-size:1.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-size:1.35rem;
  font-weight:700;
  text-align:center;
}

.myabroad-program-type{
  margin:0 0 .3rem;
  color:#8A6B3E;
  font-size:1.25rem;
  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;
  font-size:1.45rem;
  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);
  font-size:1.25rem;
  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);
  font-size:1.35rem;
}

.myabroad-fact span,
.myabroad-info-grid span{
  display:block;
  font-size:1.35rem;
  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-size:1.45rem;
  font-weight:700;
  list-style:none;
}

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

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

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

.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;
  font-size:1.4rem;
  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;
  font-size:1.25rem;
}

.myabroad-notice{
  margin-top:1.2rem;
  padding:1rem 1.2rem;
  color:#695123;
  background:#FFF8E8;
  border-left:.4rem solid var(--myabroad-gold);
  border-radius:.4rem;
  font-size:1.3rem;
  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;
  font-size:1.4rem;
}

.myabroad-contact p{
  margin:.25rem 0;
  font-size:1.35rem;
  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%;
  }
}