:root{
  --bg:#faf6f4;--surface:#fffbfa;
  --border:#e5d5da;
  /* 文字色都調深過，確保跟淺色背景有足夠對比（--muted 之前 #8a7580 只有 ~3.9:1，低於 AA） */
  --text:#332329;--muted:#67525c;--dim:#8b7681;

  --rose:#b83a62;    /* 學習 */
  --tan:#9c6a3a;      /* 梳理 */
  --violet:#6d4c96;   /* 覺察 */
  --teal:#2f7c68;      /* 心輔個案模擬系統 */
  --slate:#3d5c7a;    /* 諮商個案分析系統 */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;}
body{font-family:'Noto Serif TC',serif;font-size:16px;background:var(--bg);color:var(--text);position:relative;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(200,72,112,0.06) 0%, transparent 42%),
    radial-gradient(circle at 88% 15%, rgba(176,125,74,0.06) 0%, transparent 42%),
    radial-gradient(circle at 50% 45%, rgba(124,91,166,0.05) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(63,143,122,0.05) 0%, transparent 42%),
    radial-gradient(circle at 85% 90%, rgba(74,107,138,0.05) 0%, transparent 42%);
}
a{color:inherit;}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 1.5rem;}

/* topbar / nav */
/* 頂部這一列跟下方的首頁大圖對齊同寬（1400px），不再被 .wrap 的 1080px 綁住，
   這樣字放大後才有空間排在同一行 */
.topbar-wrap{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 1.5rem;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 0;flex-wrap:wrap;gap:1rem;}
.brand{font-family:'Noto Serif TC',serif;font-weight:600;font-size:2.4rem;color:var(--text);
  letter-spacing:.03em;text-decoration:none;flex-shrink:0;line-height:1.3;}
.brand span{color:var(--rose);}
.nav{display:flex;gap:.2rem;flex-wrap:wrap;}
.nav a{font-size:1.7rem;letter-spacing:.01em;color:var(--muted);text-decoration:none;padding:.4rem .7rem;border-radius:22px;transition:all .15s;white-space:nowrap;}
.nav a:hover{color:var(--text);background:var(--surface);}
.nav a.active{color:var(--rose);background:var(--surface);border:1px solid var(--border);font-weight:600;}

/* 機構橫條（清大 + 人社AI中心）— 高度刻意壓低 */
.org-bar{position:relative;z-index:1;border-top:1px solid var(--border);background:var(--surface);margin-top:2rem;}
.org-inner{max-width:1360px;margin:0 auto;padding:.6rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
.org-contact{font-size:1.02rem;color:var(--muted);}
.org-contact a{color:var(--muted);text-decoration:none;}
.org-contact a:hover{color:var(--rose);text-decoration:underline;}
.org-brand{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.org-logo{display:block;object-fit:contain;background:transparent;}
/* 清大是白底 JPG，用 multiply 讓白底融進橫條；人社AI中心是去背 PNG，不能套 multiply（會把顏色壓暗） */
.org-logo.nthu{height:28px;mix-blend-mode:multiply;}
.org-logo.hssai{height:52px;}
.org-lines{font-size:.95rem;line-height:1.6;color:var(--muted);}

/* 品牌字與選單放大後，中等寬度需要逐級縮一點才排得下同一行 */
@media (max-width:1300px){
  .brand{font-size:2rem;}
  .nav a{font-size:1.35rem;padding:.35rem .6rem;}
}
@media (max-width:1040px){
  .brand{font-size:1.75rem;}
  .nav a{font-size:1.15rem;padding:.3rem .5rem;}
}

@media (max-width:700px){
  .topbar-wrap{padding:0 1.2rem;}
  .org-inner{flex-direction:column;align-items:flex-start;gap:.7rem;padding:.8rem 1.2rem;}
  .org-brand{gap:.7rem;}
  .org-logo.nthu{height:24px;}
  .org-logo.hssai{height:44px;}
  .org-lines{font-size:.88rem;}
  .brand{font-size:1.45rem;}
  .nav a{font-size:1rem;padding:.4rem .7rem;}
}

/* generic content page (about / tech / faq / team) */
/* 字放大後欄寬也跟著加寬，不然每行字數太少、閱讀會一直換行 */
.page{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:1rem 1.5rem 2.5rem;}
.page-badge{display:inline-block;font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:.25rem .85rem;border-radius:3px;margin-bottom:1.3rem;}
.page h1{font-family:'Noto Serif TC',serif;font-weight:600;font-size:2.4rem;color:var(--text);margin-bottom:.6rem;letter-spacing:.02em;}
.page .lede{font-size:1.22rem;line-height:1.9;color:var(--muted);margin-bottom:2.3rem;}
.page h2{font-size:1.5rem;font-weight:600;color:var(--text);margin-top:2.5rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);}
.page p{font-size:1.18rem;line-height:1.95;color:var(--muted);margin-bottom:1rem;}
.page ol,.page ul{padding-left:1.6rem;margin-bottom:1rem;}
.page li{margin-bottom:.7rem;font-size:1.18rem;line-height:1.9;color:var(--muted);}
.page strong{color:var(--text);font-weight:600;}
.hotline{margin-left:.3rem;font-size:1.12rem;color:var(--teal);font-weight:600;line-height:1.9;}

/* FAQ */
.qa{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.5rem 1.7rem;margin-bottom:1.1rem;}
.qa .q{font-size:1.3rem;font-weight:600;color:var(--text);margin-bottom:.7rem;display:flex;gap:.6rem;line-height:1.65;}
.qa .q::before{content:'Q';font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.45rem;color:var(--rose);flex-shrink:0;}
.qa .a{font-size:1.15rem;line-height:1.9;color:var(--muted);display:flex;gap:.6rem;}
.qa .a::before{content:'A';font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.45rem;color:var(--teal);flex-shrink:0;}

/* system table used on about page */
.sys-table{width:100%;border-collapse:collapse;margin-bottom:1rem;font-size:1.1rem;}
.sys-table th,.sys-table td{text-align:left;padding:.8rem .6rem;border-bottom:1px solid var(--border);vertical-align:top;}
.sys-table th{font-family:'DM Mono',monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:400;}
.sys-table td{color:var(--muted);line-height:1.8;}
.sys-table td.name{color:var(--text);font-weight:600;white-space:nowrap;}

/* team page */
.team-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg);border:1px solid var(--border);}
.team-photo.placeholder{display:flex;align-items:center;justify-content:center;font-family:'Noto Serif TC',serif;font-weight:600;font-size:1.5rem;color:var(--dim);}
.team-name{font-family:'Noto Serif TC',serif;font-weight:600;font-size:1.35rem;color:var(--text);margin-bottom:.35rem;}
.team-role{font-size:1.08rem;color:var(--muted);line-height:1.7;}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;}
.team-card{display:flex;gap:1.1rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.35rem;}
.team-card .team-photo{width:66px;height:66px;font-size:1.3rem;}
.team-card .team-name{font-size:1.28rem;margin-bottom:.25rem;}
.team-card .team-role{font-size:1.02rem;}

@media (max-width:860px){
  .team-grid{grid-template-columns:1fr;}
}