/* 卡片 (保留未來用) */
.card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015)); padding:20px;border-radius:12px;box-shadow:var(--card-shadow); transition:transform 420ms var(--ease), box-shadow 420ms var(--ease); border: 1px solid rgba(255,255,255,0.03); }
.card h3{margin-top:0}
.card:hover{transform:translateY(-8px); box-shadow:0 22px 48px rgba(2,6,23,0.7)}

/* 新增：neo-grid / neo-card 前衛樣式（放在 cards 區段後） */
.neo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
  align-items:stretch;
  margin-bottom:64px;
}

/* 卡片基底微調（保持原本 card 規則，添加變形效果） */
.neo-card{
  position:relative;
  overflow:hidden;
  padding:0;
  min-height:220px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 18px 48px rgba(6,8,20,0.48), 0 0 40px rgba(138,43,226,0.04) inset;
  border: 1px solid rgba(255,255,255,0.03);
  transform-origin:center;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
  display:flex;
  align-items:stretch;
}

/* 左側霓虹細條 */
.neo-card .accent{
  width:8px;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 6px 28px rgba(138,43,226,0.18);
  flex-shrink:0;
  transform: skewY(-6deg);
}

/* 內容區 */
.neo-card .card-inner{
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;      /* 置中對齊使小圖案在文字上方 */
  text-align:center;
  gap:12px;
}

/* icon-top：置於上方的圖示尺寸與樣式 */
.neo-card .icon.icon-top{
  width:64px;
  height:64px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 10px 34px rgba(138,43,226,0.06), 0 0 28px rgba(0,255,246,0.03);
  color: var(--accent-1);
  flex-shrink:0;
}

/* 標題與內文在中心對齊 */
.neo-card h3{
  margin:0 0 6px;
  font-size:20px;
  color:#e9f9ff;
}
.neo-card p{
  margin:0;
  color: rgba(220,235,255,0.9);
  line-height:1.7;
  font-size:15px;
  max-width:48ch; /* 限制寬度以維持閱讀性 */

  /* 新增：左右對齊（中文優化） */
  text-align: justify;
  text-justify: inter-ideograph;
  text-align-last: left;
}

/* hover / focus 互動（前衛浮動） */
.neo-card:hover,
.neo-card:focus{
  transform: translateY(-10px) scale(1.01) rotateZ(0.2deg);
  box-shadow: 0 36px 80px rgba(10,12,30,0.6), 0 0 120px rgba(138,43,226,0.12);
}
.neo-card:focus{ outline: none; }

/* 小裝飾：右上斜線片 */
.neo-card::after{
  content:"";
  position:absolute;
  right:-30%;
  top:-30%;
  width:140%;
  height:120%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  pointer-events:none;
  mix-blend-mode: overlay;
  opacity:0.06;
}

/* 讓 .neo-feat 清單項目（標號/符號）靠左對齊 */
.neo-feat{
  margin:12px 0 0;
  padding-left:20px;           /* marker 與文字靠左對齊的間距 */
  padding-inline-start:20px;   /* 支援雙向語系的屬性 */
  list-style-position:outside; /* marker 在外側 */
  text-align:left;             /* 內容左對齊 */
}

/* 清單項細節 */
.neo-feat li{
  margin:8px 0;
  line-height:1.6;
}

/* 自訂 marker 顏色/粗細（現代瀏覽器） */
.neo-feat li::marker{
  color: rgba(255,255,255,0.88);
  font-weight:600;
  font-size:0.98em;
}

/* 舊瀏覽器備援：若要顯式顯示數字，可改用 counter（非必要） */

/* Key results cards (index) */
#key-results{ margin:36px 0 56px; }
.kr-title{ color:var(--accent-2); margin:0 0 14px; font-size:18px; }
.kr-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:18px;
}
.kr-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  padding:18px;
  border-radius:12px;
  cursor:pointer;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  text-align:left;
}
.kr-card:focus{ outline: 3px solid rgba(70,170,255,0.15); }
.kr-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(6,10,25,0.5); }

.kr-count{
  font-size:28px;
  font-weight:800;
  color:#e9f9ff;
  line-height:1;
}
.kr-label{ font-size:15px; color:rgba(220,235,255,0.95); font-weight:700; }
.kr-sub{ font-size:13px; color:rgba(200,215,235,0.8); }

/* members layout: photo + info */
.members-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
  margin-bottom:64px;
}

.member-card{
  display:flex;
  gap:18px;
  align-items:center;
  padding:22px;
  min-height:110px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.012));
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,0.03);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}

/* photo wrapper to keep consistent size */
.member-photo-wrap{
  width:110px;
  height:110px;
  flex:0 0 110px;
  border-radius:10px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
}
.member-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* member info */
.member-info h3{
  margin:0 0 8px;
  font-size:22px; /* 放大姓名/職稱 */
  font-weight:700;
  color:#e9f9ff;
}
.member-info .dept{
  margin:0 0 8px;
  color:rgba(220,235,255,0.92);
  font-size:15px; /* 放大系所/職稱 */
  font-weight:600;
}
.member-info p{
  margin:0;
  color:rgba(210,225,240,0.94);
  font-size:15.5px; /* 放大敘述文字 */
  line-height:1.7;
}

/* 連結樣式 */
.member-info a,
.member-info a:visited {
  color: #ffffff; /* 連結白色 */
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.12);
  text-underline-offset: 3px;
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}

.member-info a:hover,
.member-info a:focus {
  color: var(--accent-1); /* hover 使用霓虹色強調 */
  text-decoration-color: rgba(255,255,255,0.24);
  outline: none;
}

/* hover effect */
.member-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(6,10,25,0.6) }

/* 增強 index.html（與整站小卡）外框可見度：更粗邊、深陰影與 hover/focus 狀態 */
.kr-card,
.rd-card,
.neo-card,
.card,
.member-card {
  border: 1.6px solid rgba(255,255,255,0.12); /* 更明顯的邊框 */
  border-radius: 12px;
  box-shadow: 0 22px 60px rgba(6,10,25,0.66), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}

/* hover / focus 強化效果 */
.kr-card:hover,
.rd-card:hover,
.neo-card:hover,
.card:hover,
.member-card:hover,
.kr-card:focus,
.rd-card:focus,
.neo-card:focus,
.card:focus,
.member-card:focus {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 36px 100px rgba(6,10,25,0.78), inset 0 2px 0 rgba(255,255,255,0.035);
  outline: none;
}

/* 可訪問 focus-visible（鍵盤導航） */
.kr-card:focus-visible,
.rd-card:focus-visible,
.neo-card:focus-visible,
.card:focus-visible,
.member-card:focus-visible {
  box-shadow: 0 36px 100px rgba(6,10,25,0.78), 0 0 0 6px rgba(70,150,255,0.06);
  border-color: rgba(70,150,255,0.18);
}