html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans TC", sans-serif;
  background-color: #f8f9fa;
  color: #2b2d42;
  line-height: 1.8;
}

/* Header */
header {
  background-color: #2b2d42;
  color: #f8f9fa;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.header-container {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 2px;
}

/* Header 導覽列 */
.nav-right a {
  color: #f8f9fa;
  margin-left: 20px;
  font-weight: 500;
  transition: 0.3s;
  text-decoration: none;           
  border-bottom: 2px solid transparent; 
  padding-bottom: 3px;
}

.nav-right a:hover,
.nav-right a.active {
  color: #adb5bd;
  border-bottom: 2px solid #adb5bd;  
  text-decoration: none;             
}

/* Main */
main {
  flex: 1;
  width: 90%;
  max-width: 900px;
  margin: 2rem auto;
  animation: floatUp 0.6s ease-out;
}

@keyframes floatUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sections */
section {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

section:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Headings & Links */
h2 {
  color: #2b2d42;
  border-bottom: 1px solid #8d99ae;
  padding-bottom: 0.3rem;
  font-size: 1.3rem;
}

a {
  color: #2b2d42;
  text-decoration: none;
  word-break: break-all;
  display: inline-block;
  font-weight: 500;
  transition: color 0.3s ease;
}

a:hover {
  color: #8d99ae;
  text-decoration: underline;
}

/* Profile card */
.profile-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.profile-info h2 {
  margin-top: 0;
  color: #2b2d42;
}

/* 方形圖片（修正比例 + 防歪 + 陰影） */
.profile-img-square {
  width: 100%;
  max-width: 180px;       /* 保持電腦版大小上限 */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  display: block;
}

/* Footer */
footer {
  background-color: #e9ecef;
  color: #2b2d42;
  text-align: center;
  padding: 0.8rem 0;      
  font-size: 0.95rem;     
  letter-spacing: 0.5px;   
  border-top: 1px solid #dee2e6;
}

/* Responsive */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-title {
    margin-bottom: 0.5rem;
  }
  main {
    width: 95%;
    margin: 1.5rem auto;
  }
  section {
    padding: 1rem;
  }
  .profile-card {
    flex-direction: column;
    text-align: center;
  }
  /* 手機版圖片自動縮放與置中 */
  .profile-img-square {
    width: 90%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 1rem auto;
  }

  header > div {
    flex-direction: column;       /* 上下排列 */
    align-items: center;          /* 置中 */
    text-align: center;           /* 文字置中 */
  }

  .header-title {
    font-size: 1.3rem;            /* 標題縮小一點 */
    line-height: 1.4;             /* 兩行時不擠 */
    margin-bottom: 0.6rem;        /* 與導覽列距離 */
  }

  .nav-right a {
    margin: 0 10px;               /* 左右留白 */
    font-size: 1rem;              /* 手機字體稍小 */
  }
}