/* 系友會網站（2026-10 改版）：版面跟系網新版一致，保留系友會原本的藍色導覽列與青綠色調。
   青綠原色 #009688 當文字對比不足（3.7:1），文字、連結用深一階的 #00796b（5.3:1），原色只當裝飾。
   載入順序：alumni.css（bootstrap＋原本的系友會主題）→ top-pic.css → 這個檔 */

.alu-site {
  --alu-blue: #005194;
  --alu-blue-deep: #0b2f57;
  --alu-teal: #009688;
  --alu-teal-ink: #00796b;
  --alu-teal-soft: #e3f2f0;
  --alu-ink: #23272b;
  --alu-muted: #5b656c;
  --alu-line: #dfe3e5;
  --alu-ground: #f3f1ee;
}

/* ---- 導覽列、頁首：系友會藍、標題深藍 ---- */
html .alu-site #top,
html .alu-site #top-nav,
html .alu-site #top-nav .dropdown-menu {
  background-color: var(--alu-blue) !important;
}

html .alu-site #top-nav .nav-link[aria-current="page"] {
  box-shadow: inset 0 -3px 0 #8fd3cb;
}

html .alu-site #top-nav .nav-link.alu-back {
  opacity: 0.85;
}

html .alu-site #top-pic h1 {
  color: var(--alu-blue-deep);
}

html .alu-site #top-pic .top-pic-en {
  color: var(--alu-teal-ink);
}

/* 鍵盤焦點框：淺底用深青綠（系網是酒紅） */
html .alu-site #main a:focus-visible,
html .alu-site #main button:focus-visible,
html .alu-site #main summary:focus-visible,
html .alu-site #main input:focus-visible,
html .alu-site #main textarea:focus-visible,
html .alu-site #main select:focus-visible {
  outline-color: var(--alu-teal-ink) !important;
}

html .alu-site .skip-link,
html .alu-site .skip-link:focus {
  color: var(--alu-blue);
  outline-color: var(--alu-blue);
}

/* ---- 共用 ---- */
.alu-page {
  padding: 24px 0 56px;
  display: grid;
  gap: 24px;
  color: var(--alu-ink);
}

.alu-page li {
  list-style: none;
}

.alu-page a {
  color: var(--alu-teal-ink);
}

.alu-lead {
  margin: 0;
  max-width: 44em;
  font-size: 16.5px;
  line-height: 1.8;
  color: #3b444a;
}

.alu-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.alu-page a.alu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.alu-page a.alu-btn.is-primary {
  background: var(--alu-blue);
  color: #ffffff;
}

.alu-page a.alu-btn.is-primary:hover {
  background: #003f74;
}

.alu-page a.alu-btn.is-ghost {
  border: 1px solid #c3d4e6;
  background: #ffffff;
  color: var(--alu-blue);
}

.alu-page a.alu-btn.is-ghost:hover {
  border-color: var(--alu-blue);
}

.alu-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
}

.alu-card {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--alu-line);
  border-radius: 14px;
  background: #ffffff;
  display: grid;
  gap: 12px;
  align-content: start;
  box-shadow: 0 1px 2px rgba(11, 47, 87, 0.04), 0 6px 18px rgba(11, 47, 87, 0.05);
}

.alu-card-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

.alu-card-h h2 {
  margin: 0;
  font-family: 'Noto Serif TC', 'Noto Serif CJK TC', serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--alu-blue-deep);
}

.alu-card-h a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.alu-card-h a:hover {
  text-decoration: underline;
}

.alu-card p {
  margin: 0;
  line-height: 1.75;
  color: #3b444a;
}

.alu-empty {
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed #c4ced3;
  border-radius: 12px;
  display: grid;
  gap: 4px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--alu-muted);
}

.alu-empty strong {
  color: var(--alu-ink);
}

.alu-section-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: 'Noto Serif TC', 'Noto Serif CJK TC', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--alu-blue-deep);
}

.alu-section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  align-self: center;
  background: var(--alu-line);
}

.alu-section-title small {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--alu-muted);
}

/* ---- 消息列表（首頁卡片、最新消息頁） ---- */
.alu-news {
  margin: 0;
  padding: 0;
  display: grid;
}

.alu-news li {
  border-bottom: 1px solid #edf0f1;
}

.alu-news li:last-child {
  border-bottom: 0;
}

.alu-page .alu-news a {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: var(--alu-ink);
  text-decoration: none;
}

.alu-news-date {
  padding: 5px 0;
  border-radius: 10px;
  background: var(--alu-teal-soft);
  display: grid;
  text-align: center;
  line-height: 1.2;
  color: var(--alu-teal-ink);
}

.alu-news-date span {
  font-size: 11.5px;
}

.alu-news-date strong {
  font-size: 15.5px;
}

.alu-news-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.alu-page .alu-news a:hover .alu-news-title {
  color: var(--alu-teal-ink);
  text-decoration: underline;
}

.alu-news-excerpt {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--alu-muted);
  overflow-wrap: anywhere;
}

.alu-news-list .alu-news a {
  padding: 16px 0;
}

/* ---- 系友服務 ---- */
.alu-svc {
  margin: 0;
  padding: 0;
  display: grid;
}

.alu-svc li {
  padding: 11px 0;
  border-bottom: 1px solid #edf0f1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 15px;
}

.alu-svc li:last-child {
  border-bottom: 0;
}

.alu-svc em {
  font-style: normal;
  font-size: 13.5px;
  color: var(--alu-muted);
}

.alu-contact {
  font-size: 14px;
  line-height: 1.7;
  color: var(--alu-muted);
}

/* ---- 畢業紀念冊書架 ---- */
.alu-shelf {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 18px 16px;
}

.alu-shelf.is-row {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.alu-page .alu-book {
  display: grid;
  gap: 6px;
  text-align: center;
  color: var(--alu-ink);
  text-decoration: none;
}

.alu-book img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: 4px 8px 8px 4px;
  background: #dcdfe1;
  box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}

.alu-page .alu-book:hover img {
  transform: translateY(-3px);
}

.alu-book-name {
  font-size: 14px;
  font-weight: 700;
}

.alu-book-meta {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--alu-muted);
}

.alu-decade {
  display: grid;
  gap: 14px;
}

/* ---- 支持系友會 ---- */
.alu-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.alu-steps {
  margin: 0;
  padding-left: 1.3em !important;
  display: grid;
  gap: 6px;
  line-height: 1.7;
}

.alu-steps li {
  list-style: decimal !important;
}

/* ---- 組織章程 ---- */
.alu-law {
  padding: 24px 28px;
  border: 1px solid var(--alu-line);
  border-radius: 14px;
  background: #ffffff;
  display: grid;
  gap: 16px;
}

.alu-law-meta {
  margin: 0;
  font-size: 14px;
  color: var(--alu-muted);
}

.alu-law h2 {
  margin: 10px 0 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: 'Noto Serif TC', 'Noto Serif CJK TC', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--alu-blue-deep);
  scroll-margin-top: 64px;
}

.alu-law h2::after {
  content: "";
  flex: 1;
  height: 1px;
  align-self: center;
  background: var(--alu-line);
}

.alu-art {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 4px 14px;
  font-size: 15.5px;
  line-height: 1.8;
}

.alu-art-no {
  font-weight: 700;
  white-space: nowrap;
  color: var(--alu-teal-ink);
}

.alu-art p,
.alu-art ol {
  margin: 0;
}

.alu-art ol {
  padding-left: 1.4em !important;
}

.alu-art ol li {
  list-style: decimal !important;
}

/* 右側目錄（章程、紀念冊共用） */
.alu-toc {
  position: sticky;
  top: 80px;
  margin-top: 24px;
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.alu-toc p {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--alu-blue);
}

.alu-toc ul {
  margin: 0;
  padding: 0;
}

.alu-toc li {
  list-style: none;
}

.alu-toc a {
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--alu-line);
  display: block;
  color: var(--alu-ink);
  text-decoration: none;
}

.alu-toc a:hover,
.alu-toc a.is-current {
  border-left-color: var(--alu-teal);
  color: var(--alu-teal-ink);
}

/* ---- 單則消息 ---- */
.alu-crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14.5px;
  text-decoration: none;
}

.alu-article {
  padding: 24px 28px;
  border: 1px solid var(--alu-line);
  border-radius: 14px;
  background: #ffffff;
  display: grid;
  gap: 16px;
}

.alu-article h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--alu-blue-deep);
  overflow-wrap: anywhere;
}

.alu-article-meta {
  font-size: 14px;
  color: var(--alu-muted);
}

.alu-body {
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.alu-body > :first-child {
  margin-top: 0;
}

.alu-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.alu-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.alu-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alu-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.alu-page .alu-pager a {
  padding: 14px 18px;
  border: 1px solid var(--alu-line);
  border-radius: 12px;
  background: #ffffff;
  display: grid;
  gap: 4px;
  color: var(--alu-ink);
  text-decoration: none;
}

.alu-pager small {
  font-size: 12.5px;
  color: var(--alu-muted);
}

.alu-pager .is-older {
  grid-column: 2;
  text-align: right;
}

/* ---- 單本紀念冊 ---- */
.alu-yb {
  display: grid;
  gap: 14px;
}

.alu-yb-stage {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--alu-line);
  border-radius: 14px;
  background: #ffffff;
  display: flex;
  justify-content: center;
}

.alu-yb-stage img {
  max-width: 100%;
  max-height: 78vh;
  height: auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.alu-yb-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
}

.alu-yb-controls button {
  padding: 8px 16px;
  border: 1px solid #c3d4e6;
  border-radius: 10px;
  background: #ffffff;
  font-size: 15px;
  font-weight: 700;
  color: var(--alu-blue);
}

.alu-yb-controls button:hover:not(:disabled) {
  border-color: var(--alu-blue);
}

.alu-yb-controls button:disabled {
  opacity: 0.45;
}

.alu-yb-count {
  min-width: 5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--alu-muted);
}

.alu-yb-thumbs {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
}

.alu-yb-thumbs a {
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 6px;
  display: block;
}

.alu-yb-thumbs a[aria-current="true"] {
  border-color: var(--alu-teal);
}

.alu-yb-thumbs img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}

.alu-yb-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
}

/* ---- 窄螢幕 ---- */
@media (max-width: 991.98px) {
  .alu-grid2,
  .alu-support {
    grid-template-columns: minmax(0, 1fr);
  }

  .alu-shelf.is-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .alu-art {
    grid-template-columns: minmax(0, 1fr);
  }

  .alu-law,
  .alu-article {
    padding: 18px 16px;
  }

  .alu-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .alu-pager .is-older {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alu-book img {
    transition: none;
  }
}

/* alumni.css 把 #right-nav ul li a 做成灰色按鈕（.btn），目錄連結要蓋回一般連結樣式 */
html .alu-site #right-nav .alu-toc ul li a {
  margin: 0;
  padding: 4px 0 4px 12px;
  border: 0;
  border-left: 2px solid var(--alu-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  color: var(--alu-ink);
}

html .alu-site #right-nav .alu-toc ul li a:hover,
html .alu-site #right-nav .alu-toc ul li a.is-current {
  border-left-color: var(--alu-teal);
  color: var(--alu-teal-ink);
}

/* 內文裡的連結要有底線，不能只靠顏色區分（無障礙 1.4.1） */
.alu-card p a,
.alu-steps a,
.alu-lead a,
.alu-contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 原本 alumni.css 的連結青綠 #009688 對比不足，系友會各頁（含登入、註冊）一律用深一階 */
html .alu-site #main a:not(.alu-btn) {
  color: var(--alu-teal-ink);
}

/* 登入、註冊頁的標題改成 h2（原本 h3 跳級），維持原本的大小 */
.alu-site .login h2,
.alu-site .register h2 {
  margin-bottom: 0.6rem;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}

.alu-site .register .alu-consent {
  font-size: 1.1rem;
}

/* 註冊、登入頁內文連結加底線；單選選項文字可點 */
.alu-site .register p a,
.alu-site .login p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alu-site .alu-opt {
  margin: 0 10px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  cursor: pointer;
}