.swiper {
  --swiper-theme-color: #26278e;
  --swiper-pagination-bottom: 1.5rem;
  --swiper-pagination-bullet-inactive-color: rgba(0,0,0,0.533);
  --swiper-pagination-bullet-inactive-opacity: 1;
  user-select: none;
}
.swiper-pagination {
  --swiper-pagination-bullet-horizontal-gap: 0.6rem;
  --swiper-pagination-bullet-width: 10px;
  --swiper-pagination-bullet-height: 10px;
}
.swiper-button-disabled {
  color: inherit;
  opacity: 0.4;
}
#banner {
  --swiper-theme-color: #fff;
  --swiper-pagination-bullet-inactive-color: rgba(255,255,255,0.533);
}
@media (min-width: 768px) {
  #banner {
    --swiper-pagination-bottom: 6rem;
  }
}
#topic {
  background: url("../images/circuit-right.jpg") no-repeat right clamp(-220px, calc(100vw - 1660px), 0px) center/220px, url("../images/circuit-left.jpg") no-repeat left clamp(-220px, calc(100vw - 1660px), 0px) bottom/220px;
}
#event .swiper {
  --swiper-theme-color: #fff;
  --swiper-pagination-bottom: 1rem;
  --swiper-pagination-bullet-inactive-color: rgba(255,255,255,0.533);
}
#news {
  background: url("../images/news.jpg") no-repeat left clamp(-220px, calc(100vw - 1660px), 0px) top -40px/334px;
}
#video {
  background: url("../images/video.jpg") no-repeat center/cover;
}

/* ===== banner 文字滑入特效（移植自日文系，改用 swiper 觸發） ===== */
#banner .animate_el {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, transform 1s;
}
#banner .tr_right { transform: translate(40px, 0); }
#banner .swiper-slide-active .animate_el {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
#banner .delay_1 { transition-delay: 0.5s; }
#banner .delay_2 { transition-delay: 0.8s; }
#banner .owl_text {
  position: absolute;
  left: 8%;
  top: 38%;
  z-index: 2;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  max-width: 50%;
}
#banner .owl_title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
#banner .owl_text p { font-size: 1.2rem; }

/* ===== 右上快速連結下拉 ===== */
.quick-link { position: relative; }
.quick-menu {
  position: absolute; right: 0; top: 100%; z-index: 110;
  display: none; min-width: 200px; padding: 0.5rem 0;
  background: #fff; color: #313751;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  list-style: none; margin: 0;
}
.quick-link:hover .quick-menu { display: block; }
.quick-menu li a { display: block; padding: 0.5rem 1rem; white-space: nowrap; color: #313751; }
.quick-menu li a:hover { background: #eee; }

/* ===== 右上頂條收邊 ===== */
.topbar { padding: 0.75rem var(--ds-edge); }

/* ===== 目光焦點 AD Banner 滑入特效（載入即播） ===== */
.focus-ad .animate_el {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, transform 1s;
}
.focus-ad .tr_right { transform: translate(40px, 0); }
.focus-ad .delay_1 { transition-delay: 0.5s; }
.focus-ad .delay_2 { transition-delay: 0.8s; }
.focus-ad.show .animate_el {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
.focus-ad-text {
  position: absolute;
  left: 8%;
  bottom: 12%;
  z-index: 2;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
  max-width: 80%;
}
.focus-ad-text h3 { font-family: Georgia, 'Times New Roman', 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif; font-size: 2.4rem; font-weight: 400; letter-spacing: 0.03em; margin-bottom: 0.6rem; line-height: 1.2; }
.focus-ad-text p { font-family: Georgia, 'Times New Roman', 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.1em; }

/* ===== datascience 內頁結構樣式（變數驅動，繞過 UnoCSS；未來抽共用庫的種子）===== */
:root{
  --ds-primary:#9c008a;      /* 主色：洋紅紫（當前頁、強調）*/
  --ds-secondary:#26278e;    /* 次色：深藍紫（標題、群組）*/
  --ds-hover-bg:#f5f0f7;     /* hover 淡紫底 */
  --ds-text:#333;
  --ds-line:#eee;
}
.ds-inner-wrap{width:100%;padding:40px var(--ds-edge);display:flex;gap:32px;align-items:flex-start}
.ds-inner-aside{width:260px;flex:none;background:#fff;border-top:3px solid var(--ds-secondary);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.ds-inner-main{flex:1;min-width:0}
.ds-aside-title{padding:14px 18px;background:var(--ds-secondary);color:#fff;font-weight:600;font-size:1rem}
.ds-sidemenu a{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--ds-line);color:var(--ds-text);font-size:.95rem;text-decoration:none;transition:all .2s}
.ds-sidemenu a::after{content:"\203A";color:#bbb;font-size:1.2rem;line-height:1}
.ds-sidemenu a:hover{background:var(--ds-hover-bg);color:var(--ds-primary)}
.ds-sidemenu a:hover::after{color:var(--ds-primary)}
.ds-sidemenu a.is-current{background:var(--ds-primary);color:#fff;font-weight:600}
.ds-sidemenu a.is-current::after{color:#fff}
.ds-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.875rem;color:#888;margin-bottom:24px}
.ds-breadcrumb a{color:#888;text-decoration:none}
.ds-breadcrumb a:hover{color:var(--ds-primary)}
.ds-breadcrumb .sep{color:#ccc}
.ds-breadcrumb .is-current{color:var(--ds-primary);font-weight:600}
.ds-detail-title{font-size:1.6rem;font-weight:600;color:var(--ds-secondary);line-height:1.5;border-bottom:2px solid var(--ds-primary);padding-bottom:16px;margin-bottom:12px}
.ds-detail-meta{font-size:.875rem;color:#888;margin-bottom:24px}
.ds-detail-body{font-size:1.1rem;line-height:1.9}
.ds-detail-body img{max-width:100%;height:auto}
.ds-detail-attach{margin-top:32px;padding-top:16px;border-top:1px solid var(--ds-line)}
.ds-detail-attach .at-title{font-weight:600;color:var(--ds-secondary);margin-bottom:8px}
.ds-detail-attach a{display:block;color:var(--ds-primary);text-decoration:underline;padding:2px 0}
@media (max-width:768px){
  .ds-inner-wrap{flex-direction:column;padding:24px 16px;gap:20px}
  .ds-inner-aside{width:100%}
}

/* ===== 全站統一內容邊界（滿版型，--ds-edge 控制左右留白）===== */
:root{ --ds-edge:clamp(16px, 5vw, 80px); }
/* header：topbar 與 logo/nav 列對齊邊界 */
header .header-menu{ padding:28px var(--ds-edge); }
header .topbar{ padding-left:var(--ds-edge); padding-right:var(--ds-edge); }
/* nav 靠右貼邊界（取代 mx-auto 置中）*/
.header-menu nav{ margin-left:auto; }
/* 內頁長文限寬護眼（容器仍滿版，僅內文不過寬）*/
.ds-detail-body{ max-width:900px; }
@media (max-width:768px){
  :root{ --ds-edge:16px; }
}

/* ===== datascience opinion 列表頁 ===== */
.ds-list-ul{list-style:none;margin:0;padding:0}
.ds-list-item{border-bottom:1px solid var(--ds-line)}
.ds-list-link{display:flex;align-items:baseline;gap:16px;padding:16px 8px;text-decoration:none;transition:background .2s}
.ds-list-link:hover{background:var(--ds-hover-bg)}
.ds-list-date{flex:none;font-size:.875rem;color:#999;font-variant-numeric:tabular-nums}
.ds-list-title{flex:1;color:var(--ds-text);font-size:1.05rem;line-height:1.5}
.ds-list-link:hover .ds-list-title{color:var(--ds-primary)}
.ds-pager{margin-top:24px;display:flex;justify-content:center}
.ds-pager ul{display:flex;gap:4px;list-style:none;padding:0;margin:0}
.ds-pager a,.ds-pager span{display:block;padding:6px 12px;border:1px solid var(--ds-line);border-radius:4px;color:var(--ds-text);text-decoration:none;font-size:.9rem}
.ds-pager a:hover{background:var(--ds-hover-bg);color:var(--ds-primary);border-color:var(--ds-primary)}
.ds-pager .active span{background:var(--ds-primary);color:#fff;border-color:var(--ds-primary)}
@media (max-width:768px){
  .ds-list-link{flex-direction:column;gap:4px}
}

/* ===== datascience web_page 一般圖文內頁 ===== */
.ds-page-body{font-size:1rem;line-height:1.9;color:var(--ds-text)}
.ds-page-body h1{font-size:1.6rem;font-weight:600;color:var(--ds-secondary);border-bottom:2px solid var(--ds-primary);padding-bottom:16px;margin:0 0 20px}
.ds-page-body h2{font-size:1.3rem;color:var(--ds-secondary);margin:24px 0 12px}
.ds-page-body h3{font-size:1.15rem;color:var(--ds-primary);margin:20px 0 10px}
.ds-page-body blockquote{border-left:4px solid var(--ds-primary);background:var(--ds-hover-bg);margin:16px 0;padding:12px 20px;border-radius:0 6px 6px 0}
.ds-page-body blockquote h2{margin:0;color:var(--ds-primary);font-size:1.2rem;line-height:1.6}
.ds-page-body p{margin:12px 0}
.ds-page-body img{max-width:100%;height:auto;border-radius:4px}
.ds-page-body a{color:var(--ds-primary);text-decoration:underline}
.ds-page-body table{max-width:100%;border-collapse:collapse}
.ds-page-body td,.ds-page-body th{border:1px solid var(--ds-line);padding:8px 12px}

/* nav 主選單項間距加大 */
.header-menu nav{ gap:1.5rem!important; }

/* ===== datascience 成員表格(teacher_resume/dept_member)修正 ===== */
.ds-inner-main table img{ max-width:140px; height:auto; display:block }
.ds-inner-main table th{ white-space:nowrap }
.ds-inner-main table{ width:100%; table-layout:auto }
.ds-inner-main table td{ vertical-align:top }

/* ===== datascience 複製分享連結按鈕與 toast ===== */
.ds-share-bar{ display:flex; justify-content:flex-end; margin:0 0 12px }
.ds-share-link{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; font-size:.9rem; color:var(--ds-primary); border:1px solid var(--ds-primary); border-radius:6px; text-decoration:none; transition:all .2s }
.ds-share-link:hover{ background:var(--ds-primary); color:#fff }
.ds-toast{ position:fixed; bottom:32px; left:50%; transform:translate(-50%,20px); background:rgba(0,0,0,.85); color:#fff; padding:10px 20px; border-radius:6px; font-size:.95rem; opacity:0; transition:all .3s; z-index:9999; pointer-events:none }
.ds-toast.show{ opacity:1; transform:translate(-50%,0) }

/* ===== datascience teacher 履歷頭部 #resume（左圖右文，float 排版）===== */
#resume{ padding:8px 0 24px; overflow:hidden }
#resume img{ float:left; width:160px; height:auto; margin:0 28px 12px 0; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.12) }
#resume .title{ font-size:1rem; color:#666; margin:0 0 4px }
#resume h2{ font-size:1.8rem; font-weight:700; color:var(--ds-secondary); margin:0 0 14px; line-height:1.2 }
#resume .schooling{ font-size:1rem; color:var(--ds-text); margin:6px 0; line-height:1.7 }
#resume .duty{ font-size:1rem; color:var(--ds-text); margin:6px 0; line-height:1.7 }
#resume .duty .schooling{ display:inline; margin:0; font-weight:600; color:var(--ds-primary) }
@media (max-width:640px){
  #resume img{ width:120px; margin-right:18px }
  #resume h2{ font-size:1.5rem }
}

/* 最高學歷 內層 p.schooling 跟專長一致（複用內建 class ） */
#resume .schooling > p.schooling{ display:inline; margin:0; padding:0; font-weight:600; color:var(--ds-primary) }

/* ===== 成員列表姓名連結：標準藍色可點:司 ===== */
.ds-inner-main table td a[data-request]{
  color:#1d4ed8; text-decoration:none; cursor:pointer;
}
.ds-inner-main table td a[data-request]:hover{
  color:#1539b3; text-decoration:underline;
}

/* ===== 職祢�.title + 重要孨經歷 table-header ：黑色加粒 ===== */
#resume .title{ color:#222; font-weight:700 }
.ds-inner-main .table-header{ color:#222; font-weight:700 }

/* ===== web_listcomponent 內建 .pagination 分頁樣式 ===== */
.ds-inner-main .pagination{ display:flex; gap:10px; list-style:none; padding:0; margin:20px 0; align-items:center }
.ds-inner-main .pagination li{ margin:0 }
.ds-inner-main .pagination a,
.ds-inner-main .pagination li > span{ display:block; padding:6px 14px; color:#1d4ed8; text-decoration:none; border:1px solid #d0d7e2; border-radius:6px; font-size:.95rem }
.ds-inner-main .pagination a:hover{ background:#1d4ed8; color:#fff; border-color:#1d4ed8 }
.ds-inner-main .pagination .active > span{ background:#1d4ed8; color:#fff; border-color:#1d4ed8 }
.ds-inner-main .pagination .disabled > span{ color:#bbb; border-color:#e5e5e5 }


/* ===== FAQ 手風琴（Bootstrap3 markup，自寫樣式） ===== */
#accordion{margin:0}
#accordion .panel{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:8px;background:#fff;overflow:hidden}
#accordion .panel-heading{padding:0;background:#f8fafc}
#accordion .panel-title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.6}
#accordion .panel-title a{display:block;padding:14px 52px 14px 20px;position:relative;color:var(--ds-primary);text-decoration:none;cursor:pointer}
#accordion .panel-title a:hover{color:var(--ds-primary);background:var(--ds-hover-bg)}
#accordion .panel-title a::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg);transition:transform .25s}
#accordion .panel-title a[aria-expanded="true"]{background:var(--ds-hover-bg);color:var(--ds-primary)}
#accordion .panel-title a[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:-3px;border-color:var(--ds-primary)}
#accordion .panel-collapse{display:none}
#accordion .panel-collapse.in{display:block}
#accordion .panel-body{padding:20px;border-top:1px solid #e5e7eb;line-height:1.9;color:var(--ds-secondary)}
#accordion .panel-body #news_header ul{list-style:none;margin:0 0 14px;padding:0;font-size:.875rem;color:#6b7280}
#accordion .panel-body #news_header li{display:inline-block;margin-right:18px}
#accordion .panel-body #article{font-size:1rem}
#accordion .panel-body #article img{max-width:100%;height:auto;margin-bottom:12px}
#accordion .panel-body ul{list-style:disc;padding-left:1.6em;margin:8px 0}
#accordion .panel-body a{color:var(--ds-primary);text-decoration:underline}
#accordion .panel-body a:hover{opacity:.8}


/* FAQ 卡片間距收緊（壓過 UnoCSS/reset） */
#accordion .panel{margin:0 0 4px!important}
#accordion .panel-heading{margin:0!important}
#accordion .panel-title{margin:0!important}
#accordion .panel-group{margin:0!important}


/* FAQ 標題配色：常態藍、hover/展開紫 */
#accordion .panel-title a{color:var(--ds-secondary)!important}
#accordion .panel-title a:hover,
#accordion .panel-title a[aria-expanded="true"]{color:var(--ds-primary)!important}
#accordion .panel-title a::after{border-color:var(--ds-secondary)}
#accordion .panel-title a:hover::after,
#accordion .panel-title a[aria-expanded="true"]::after{border-color:var(--ds-primary)}


/* FAQ 答案內文：深灰 */
#accordion .panel-body,
#accordion .panel-body #article,
#accordion .panel-body li,
#accordion .panel-body p{color:var(--ds-text)!important}
#accordion .panel-body a{color:var(--ds-primary)!important}


/* FAQ 答案區內縮 */
#accordion .panel-body{padding:20px 24px 24px 44px!important}
@media (max-width:640px){
  #accordion .panel-body{padding:16px 16px 20px 24px!important}
}