/* ===== 字體 ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root{
  --blue:#007BFF;
  --ink:#222;
  --bg:#f8faff;
  --muted:#555;
  --card-shadow:0 4px 12px rgba(0,0,0,.1);
  --card-shadow-hover:0 6px 16px rgba(0,0,0,.15);
}

/* ===== 全域 ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Microsoft JhengHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* 背景滾動鎖（配合 JS 的 --scroll-lock） */
body.no-scroll{
  position:fixed;
  width:100%;
  left:0; right:0;
  top:var(--scroll-lock, 0);
}

/* ===== Header / Nav ===== */
header{
  background:linear-gradient(120deg, var(--blue), #6f3381);
  color:#fff;
  padding:2rem 1.5rem;
  text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
header h1{
  margin:0;
  font-size:2.4rem;
  font-weight:700;
  letter-spacing:1px;
}
nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.2rem;
}
nav a{
  display:inline-block;
  padding:.5rem 1.2rem;
  background:rgba(255,255,255,.15);
  color:#fff;
  text-decoration:none;
  border-radius:6px;
  transition:all .3s ease;
  font-weight:500;
  backdrop-filter:blur(4px);
}
nav a:hover{
  background:#fff;
  color:var(--blue);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* ===== 主要內容區 ===== */
main{max-width:1100px;margin:0 auto;padding:2rem 1rem}
.banner{
  background:linear-gradient(135deg,#e7f0ff,#f0f5ff);
  padding:1rem 1.5rem;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* ===== 成員格子與卡片 ===== */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
  justify-items:center;
  align-items:start;
  padding:2rem 0;
}
.person-card{
  width:220px;
  text-align:center;
}
.person-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:12px;
  box-shadow:var(--card-shadow);
  transition:transform .3s ease, box-shadow .3s ease;
}
.person-card:hover img{
  transform:scale(1.04);
  box-shadow:var(--card-shadow-hover);
}
.lang-zh,.lang-en{ margin:.35rem 0; line-height:1.4; }

/* ===== 響應式（格子） ===== */
@media (max-width:900px){
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .photo-grid{ grid-template-columns:1fr; gap:1.2rem; padding:1rem 0; }
  .person-card{ width:min(92vw,420px); margin:0 auto; }
  .person-card img{ border-radius:14px; }
  .person-card p{ font-size:.95rem; line-height:1.35; margin:.25rem 0; }
  .lang-en{ display:none; } /* 中文頁：手機隱藏英文行，畫面更乾淨 */
}

/* ===== 頁尾 ===== */
footer{
  background:#f0f0f0;
  text-align:center;
  padding:1rem;
  font-size:.9rem;
  color:#555;
  border-top:1px solid #ddd;
}

/* ===== 彈窗（共用） ===== */
.modal{
  display:none;               /* 用 JS 切換 */
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.5);
  overscroll-behavior:contain; /* 阻止外層回彈 */
  touch-action:none;           /* 避免背景手勢誤觸 */
}
.modal__panel{
  position:relative;
  width:min(900px, 92vw);
  margin:6vh auto;
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:1.25rem;
  animation:modalFadeIn .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.modal__photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.modal__body h2{ margin:.2rem 0 .25rem 0; font-size:1.4rem; }
.modal__subtitle{ margin:0 0 .75rem 0; color:#555; font-weight:600; }
.modal__info p{ margin:.35rem 0; line-height:1.55; }
.modal__info strong{ color:#1f3d7a; }
.modal__actions{ margin-top:1rem; }

/* 右上角關閉（桌機用） */
.modal__close{
  position:absolute;
  top:10px; right:12px;
  font-size:1.8rem;
  line-height:1;
  border:none;
  background:transparent;
  color:#666;
  cursor:pointer;
}
.modal__close:hover{ color:#000; }

@keyframes modalFadeIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===== 手機彈窗：全螢幕工作表，上圖下文，可滑動 ===== */
@media (max-width:720px){
  .modal{ background:rgba(0,0,0,.65); }

  .modal__panel{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;       /* 避免 iOS 位址列高度變動 */
    margin:0;
    border-radius:0;
    padding:0;
    display:flex;        /* 直向排版：頂欄 / 圖片 / 內容 */
    flex-direction:column;
    overflow:hidden;     /* 由內層滾動 */
  }

  /* 手機置頂列（名稱＋關閉） */
  .modal__topbar{
    position:sticky;
    top:0;
    background:#fff;
    padding:.9rem 1rem;
    border-bottom:1px solid #eee;
    display:flex;
    align-items:center;
    gap:.75rem;
    z-index:1;
  }
  .modal__topbar .name{ font-weight:600; }
  /* 桌機用關閉鍵在手機隱藏，僅保留頂欄的關閉鍵 */
  .modal__panel > .modal__close{ display:none; }

  /* 照片：高度固定，整張縮入（不裁）＋白底 */
  .modal__photo img{
    width:100%;
    height:38dvh;        /* 可微調 36~42dvh */
    object-fit:contain;
    background:#fff;
    border-radius:0;
  }

  /* 內容區可滾動，並給 iPhone 安全區與緩衝 */
  .modal__body{
    flex:1;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:1rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px) + 4rem);
    scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4rem);
  }
  .modal__body::after{
    content:"";
    display:block;
    height: calc(env(safe-area-inset-bottom, 0px) + 4rem);
  }

  .modal__body h2{ font-size:1.25rem; }
}

/* ===== 關閉鍵顯示控制：避免同時出現兩顆 X ===== */
/* 桌機隱藏手機置頂列 */
@media (min-width:721px){
  .modal__topbar{ display:none !important; }
}

/* ===== 桌機彈窗：整個面板可捲動，不卡住 ===== */
@media (min-width:721px){
  .modal{ overflow:auto; }              /* 覆蓋層可滾（body 已鎖） */
  .modal__panel{
    max-height:90vh;                    /* 面板限制在視口內 */
    margin:5vh auto;                    /* 上下留白 */
    overflow:auto;                      /* 面板本身可滾 */
  }
  /* Grid 子項要能縮，才會出現捲軸 */
  .modal__photo,
  .modal__body{
    min-height:0;
    min-width:0;
  }
  /* 讓面板統一滾動（若要只有右側滾，把這行改為 overflow:auto） */
  .modal__body{ overflow:visible; }
}

/* === Desktop: scroll only the right content, not the whole panel === */
@media (min-width: 721px){
  /* 外層覆蓋層不滾，避免雙捲軸搶焦點 */
  .modal{ overflow: hidden; }

  /* 面板高度卡在視口 90vh，自己不滾 */
  .modal__panel{
    max-height: 90vh;
    margin: 5vh auto;
    overflow: hidden;
    /* 防止 grid 把右欄撐死，確保可出現捲軸 */
    align-items: start;
  }

  /* grid 子項要能縮，否則不會出現捲軸 */
  .modal__photo,
  .modal__body{
    min-height: 0;
    min-width: 0;
    align-self: start;
  }

  /* 只讓右側內容滾；高度 = 面板高 - 面板上下 padding(1.5rem*2) */
  .modal__body{
    max-height: calc(90vh - 3rem);
    overflow: auto;
  }
}