/* =========================================================
   Geometric Data Vision Laboratory — 樣式表
   配色：靛紫 + 青色，現代幾何科技感
   （一般情況你不需要動這個檔案，改內容請編輯 data.js）
   ========================================================= */

:root{
  --ink:#0f172a;
  --ink-soft:#334155;
  --muted:#64748b;
  --line:#e6e8ef;
  --bg:#ffffff;
  --bg-alt:#f6f7fb;
  --primary:#4f46e5;    /* 靛 indigo */
  --primary-2:#7c3aed;  /* 紫 violet（呼應中央大學紫） */
  --accent:#06b6d4;     /* 青 cyan */
  --accent-2:#22d3ee;
  --dark:#0a0e1f;
  --dark-2:#141a35;
  --radius:16px;
  --radius-sm:11px;
  --shadow:0 10px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -24px rgba(37,30,120,.45);
  --maxw:1120px;
  --grad:linear-gradient(120deg,var(--accent) 0%,var(--primary) 55%,var(--primary-2) 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:"Inter","Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Space Grotesk","Noto Sans TC","Inter",sans-serif;line-height:1.2;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.lang-en :lang(zh){}

/* ---------- 導覽列 ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(255,255,255,.82);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid transparent;transition:.3s}
.nav.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(15,23,42,.4)}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand__mark{display:grid;place-items:center;filter:drop-shadow(0 3px 8px rgba(79,70,229,.35))}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__zh{font-weight:700;font-size:.98rem;font-family:"Noto Sans TC",sans-serif}
.brand__en{font-size:.66rem;letter-spacing:.14em;color:var(--muted);font-weight:600}
.nav__links{display:flex;gap:4px;flex-wrap:wrap}
.nav__links a{padding:8px 12px;border-radius:9px;font-size:.9rem;font-weight:500;color:var(--ink-soft);transition:.2s;white-space:nowrap}
.nav__links a:hover{color:var(--primary);background:var(--bg-alt)}
.nav__actions{display:flex;align-items:center;gap:12px}
.lang-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;font-weight:600;font-size:.82rem;color:var(--muted);transition:.2s}
.lang-toggle:hover{border-color:var(--primary)}
.lang-toggle__opt.is-active{color:var(--primary)}
.lang-toggle__sep{opacity:.4}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 120% at 80% -10%,#1b2452 0%,var(--dark-2) 40%,var(--dark) 100%);color:#fff;text-align:center}
.hero__mesh{position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(34,211,238,.25),transparent 25%),
    radial-gradient(circle at 85% 75%,rgba(124,58,237,.28),transparent 30%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0L60 60M60 0L0 60M30 0V60M0 30H60' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='1.4' fill='%2322d3ee' fill-opacity='0.35'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='%23ffffff' fill-opacity='0.25'/%3E%3Ccircle cx='60' cy='60' r='1.2' fill='%23ffffff' fill-opacity='0.25'/%3E%3C/svg%3E");
  background-size:auto,auto,60px 60px}
.hero__inner{position:relative;max-width:860px;padding:120px 24px 90px}
.hero__eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;font-weight:600;color:var(--accent-2);margin:0 0 22px}
.hero__title{margin:0;font-size:clamp(2.1rem,6vw,4rem);font-weight:700}
.hero__title-zh{display:block;font-family:"Noto Sans TC",sans-serif}
.hero__title-en{display:block;font-size:.42em;font-weight:600;margin-top:.5em;
  background:linear-gradient(90deg,var(--accent-2),#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__tagline{margin:26px auto 0;max-width:560px;color:#c7cbe0;font-size:clamp(1rem,2.4vw,1.18rem)}
.hero__cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:600;font-size:.95rem;transition:.25s;cursor:pointer;border:1px solid transparent}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 12px 30px -10px rgba(79,70,229,.7)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(79,70,229,.85)}
.btn--ghost{border-color:rgba(255,255,255,.3);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero__scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:1.4rem;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- 通用區塊 ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:88px 22px}
.section--alt{max-width:none;background:var(--bg-alt);border-block:1px solid var(--line)}
.section--alt > *{max-width:var(--maxw);margin-inline:auto}
.section__head{display:flex;align-items:baseline;gap:16px;margin-bottom:38px}
.section__no{font-family:"Space Grotesk",sans-serif;font-weight:700;color:transparent;-webkit-text-stroke:1.2px var(--primary-2);font-size:1.5rem;opacity:.7}
.section__title{margin:0;font-size:clamp(1.6rem,3.6vw,2.2rem)}
.subhead{font-size:1.15rem;margin:44px 0 20px;padding-left:14px;border-left:4px solid;border-image:var(--grad) 1;font-family:"Noto Sans TC",sans-serif}
.subhead:first-of-type{margin-top:8px}
/* 成員分組的小標題（博士班/碩士班/大學部…） */
.subhead--sm{font-size:.98rem;margin:26px 0 14px;padding-left:12px;border-left-width:3px;color:var(--muted);font-weight:600}

/* 成員分組收合（已畢業成員） */
.mgroup.is-collapsed .is-extra{display:none}
.mgroup-toggle{margin-top:18px}

/* 論文收合 */
.pubs-group{display:grid;gap:14px;margin-bottom:8px}
.pubs-group .pub--extra{display:none}
.pubs-group.is-expanded .pub--extra{display:grid}
.pub-toggle{justify-self:start;margin-top:2px;font-family:inherit;font-weight:600;font-size:.9rem;
  color:var(--primary);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 20px;cursor:pointer;transition:.22s}
.pub-toggle:hover{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px -8px rgba(79,70,229,.6)}

/* reveal 動效 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 實驗室介紹 ---------- */
.about-layout{display:grid;grid-template-columns:1.35fr .9fr;gap:44px;align-items:center}
.about-layout.is-single{grid-template-columns:1fr}
.about-layout.is-single .about-figure{display:none}
.about{display:grid;gap:20px;font-size:1.06rem;color:var(--ink-soft)}
.about p{margin:0}
.about-figure{margin:0;display:flex;justify-content:center;align-items:center;padding:26px;
  background:linear-gradient(135deg,rgba(6,182,212,.07),rgba(124,58,237,.09));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.about-figure img{width:100%;max-width:380px;height:auto;object-fit:contain;display:block}
@media(max-width:820px){
  .about-layout{grid-template-columns:1fr;gap:28px}
  .about-figure{order:-1;max-width:420px;margin-inline:auto}
}
.about__highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:12px}
.about__hl{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;box-shadow:var(--shadow)}
.about__hl b{display:block;font-size:1.7rem;font-family:"Space Grotesk",sans-serif;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.about__hl span{color:var(--muted);font-size:.9rem}

/* ---------- 研究方向卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;overflow:hidden;transition:.28s;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:.35s}
.card:hover::before{transform:scaleX(1)}
.card__icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(124,58,237,.14));font-size:1.5rem}
.card__title{margin:0 0 8px;font-size:1.18rem}
.card__desc{margin:0;color:var(--muted);font-size:.96rem}

/* ---------- 成員 ---------- */
.members{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 30px}
.member{text-align:center;flex:0 0 210px;max-width:210px}
/* 主持人卡片加寬，讓職稱與研究興趣不換行 */
.member--pi{flex:0 0 460px;max-width:min(460px,100%)}
.member--pi .member__role{white-space:nowrap}
.member__photo{width:130px;height:130px;border-radius:50%;margin:0 auto 14px;object-fit:cover;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;
  color:#fff;font-size:2.4rem;font-weight:700;font-family:"Space Grotesk",sans-serif;border:3px solid #fff;box-shadow:var(--shadow)}
.member__name{font-weight:700;margin:0;font-size:1.05rem}
.member__name small{display:block;font-weight:500;color:var(--muted);font-size:.78rem;letter-spacing:.03em;margin-top:2px}
.member__role{color:var(--primary);font-size:.9rem;margin:4px 0 6px;font-weight:600}
.member__desc{color:var(--muted);font-size:.85rem;margin:0}
.member__links{display:flex;gap:10px;justify-content:center;margin-top:8px}
.member__links a{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;transition:.2s}
.member__links a:hover{color:var(--primary);border-color:var(--primary)}

.alumni{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.alum{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.alum__year{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--primary-2);font-size:1.05rem;min-width:48px}
.alum__name{font-weight:600;margin:0}
.alum__name small{color:var(--muted);font-weight:500}
.alum__info{margin:3px 0 0;color:var(--muted);font-size:.88rem}

/* ---------- 論文列表 ---------- */
.pubs{display:grid;gap:14px}
.pub{display:grid;grid-template-columns:auto 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px 22px;transition:.2s}
.pub:hover{box-shadow:var(--shadow);border-color:#d5d9ea}
.pub__year{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.15rem;color:transparent;-webkit-text-stroke:1px var(--primary);opacity:.85}
.pub__title{font-weight:600;margin:0 0 5px}
.pub__authors{color:var(--ink-soft);font-size:.9rem;margin:0 0 3px}
.pub__authors .me{color:var(--primary);font-weight:700}
.pub__venue{color:var(--muted);font-size:.88rem;font-style:italic;margin:0}
.pub__metrics{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.pub__metric{font-size:.76rem;font-weight:700;letter-spacing:.02em;padding:3px 10px;border-radius:6px;white-space:nowrap}
.pub__metric--if{background:rgba(124,58,237,.12);color:var(--primary-2)}
.pub__metric--cite{background:rgba(6,182,212,.14);color:#0e7490}
.pub__links{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.pub__links a{font-size:.76rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 11px;border-radius:999px;background:linear-gradient(135deg,rgba(6,182,212,.12),rgba(124,58,237,.12));color:var(--primary)}
.pub__links a:hover{background:var(--grad);color:#fff}

/* ---------- 課程 ---------- */
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.course{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.course__code{font-family:"Space Grotesk",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}
.course__name{margin:6px 0 4px;font-size:1.12rem}
.course__sem{color:var(--muted);font-size:.82rem;font-weight:600}
.course__desc{color:var(--muted);font-size:.92rem;margin:10px 0 0}
.course--clickable{transition:.28s}
.course--clickable:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.course__link{color:var(--ink);text-decoration:none;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.course__link:hover{color:var(--primary)}
.course__arrow{color:var(--accent);transition:transform .2s}
.course--clickable:hover .course__arrow{transform:translateX(4px)}
.course__more{display:inline-block;margin-top:14px;font-size:.85rem;font-weight:600;color:var(--primary)}
.course__more:hover{text-decoration:underline}

/* ---------- 課程詳細頁 (course.htm) ---------- */
.cp-main{max-width:900px;margin:0 auto;padding:110px 22px 70px}
.cp-head{margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.cp-tag{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--grad);padding:5px 14px;border-radius:999px}
.cp-title{margin:16px 0 6px;font-size:clamp(1.7rem,4vw,2.4rem)}
.cp-sem{margin:0;color:var(--muted);font-weight:600}
.cp-sec{margin:30px 0}
.cp-sec h2{font-size:1.2rem;margin:0 0 14px;padding-left:13px;border-left:4px solid;border-image:var(--grad) 1;font-family:"Noto Sans TC",sans-serif}
.cp-sec p{color:var(--ink-soft);font-size:1.04rem;margin:0}
.cp-materials{display:grid;gap:12px}
.cp-material{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 18px;color:var(--ink);font-weight:500;transition:.2s;box-shadow:var(--shadow)}
.cp-material:hover{border-color:var(--primary);color:var(--primary);transform:translateX(4px)}
.cp-material > span:first-child{font-size:1.2rem;line-height:1.4;flex:none}
.cp-material-label{line-height:1.55}
.cp-schedule{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.cp-week{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:center}
.cp-week:last-child{border-bottom:0}
.cp-week b{font-family:"Space Grotesk",sans-serif;color:var(--primary-2)}
.cp-week span{color:var(--ink-soft)}
.cp-empty{color:var(--muted);font-size:1.05rem;padding:20px 0}

/* 主持人簡介頁 (professor.htm) */
.pf-hero{display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:center;margin-bottom:10px;
  padding-bottom:30px;border-bottom:1px solid var(--line)}
.pf-photo{width:180px;height:180px;border-radius:24px;object-fit:cover;border:3px solid #fff;box-shadow:var(--shadow-lg)}
.pf-photo--ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;font-size:3.6rem;font-weight:700;font-family:"Space Grotesk",sans-serif}
.pf-info .cp-title{margin:12px 0 4px}
.pf-role{color:var(--primary);font-weight:600;margin:2px 0 8px}
.pf-desc{color:var(--ink-soft);margin:0 0 14px}
.pf-links{display:flex;gap:10px;flex-wrap:wrap}
.pf-links a{font-size:.85rem;font-weight:600;color:var(--primary);border:1px solid var(--line);border-radius:999px;padding:5px 15px;transition:.2s}
.pf-links a:hover{background:var(--grad);color:#fff;border-color:transparent}
.pf-tl{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.pf-tl-item{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);align-items:baseline}
.pf-tl-item:last-child{border-bottom:0}
.pf-tl-item b{font-family:"Space Grotesk",sans-serif;color:var(--primary-2);font-size:.95rem}
.pf-tl-item span{color:var(--ink-soft)}
@media(max-width:640px){
  .pf-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px}
  .pf-links{justify-content:center}
  .pf-tl-item{grid-template-columns:66px 1fr;gap:12px}
}

/* 成員卡：主持人姓名連結與「完整簡介」 */
.member__namelink{color:var(--ink);transition:.2s}
.member__namelink:hover{color:var(--primary)}
.member__profile{display:inline-block;margin-top:9px;font-size:.82rem;font-weight:600;color:var(--primary)}
.member__profile:hover{text-decoration:underline}
/* 課程頁的簡化導覽列：手機也保持橫向可見 */
@media(max-width:920px){
  .nav--simple .nav__links{position:static;transform:none;flex-direction:row;background:none;
    border:0;padding:0;box-shadow:none;max-height:none}
  .nav--simple .nav__links a{border-bottom:0;padding:8px 10px;font-size:.92rem}
}

/* ---------- 消息 ---------- */
.news{position:relative;display:grid;gap:0;max-width:820px}
.news__item{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0;border-bottom:1px dashed var(--line)}
.news__item:last-child{border-bottom:0}
.news__date{font-family:"Space Grotesk",sans-serif;font-weight:600;color:var(--primary-2);font-size:.9rem;position:relative;padding-left:20px}
.news__date::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--grad)}
.news__text{margin:0;color:var(--ink-soft)}

/* ---------- 招生 ---------- */
.join{position:relative}
.join__body{display:grid;gap:26px;max-width:860px}
.join__intro{font-size:1.08rem;color:var(--ink-soft);margin:0}
.join__positions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.join__pos{background:linear-gradient(135deg,rgba(79,70,229,.06),rgba(6,182,212,.06));
  border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.join__pos h4{margin:0 0 6px;font-size:1.05rem;color:var(--primary)}
.join__pos p{margin:0;color:var(--muted);font-size:.92rem}
.join__note{background:var(--dark);color:#e2e6f5;border-radius:var(--radius);padding:24px 26px}
.join__note a{color:var(--accent-2);font-weight:600}

/* ---------- 聯絡 ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.contact__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:22px}
.contact__item h4{margin:0 0 8px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contact__item p{margin:0;font-size:1rem;color:var(--ink)}
.contact__item a{color:var(--primary);font-weight:600;word-break:break-all}

/* ---------- 頁尾 ---------- */
.footer{background:var(--dark);color:#aeb4d0;padding:44px 22px;text-align:center}
.footer__name{margin:0 0 6px;display:flex;flex-direction:column;gap:2px}
.footer__name strong{color:#fff;font-size:1.1rem;font-family:"Noto Sans TC",sans-serif}
.footer__name span{font-size:.82rem;letter-spacing:.06em;color:var(--accent-2)}
.footer__meta{margin:6px 0;font-size:.86rem}
.footer__copy{margin:12px 0 0;font-size:.78rem;opacity:.6}

/* ---------- 語言顯示切換 ---------- */
[data-lang-zh],[data-lang-en]{display:none}
body.lang-zh [data-lang-zh]{display:revert}
body.lang-en [data-lang-en]{display:revert}

/* ---------- 響應式 ---------- */
@media(max-width:920px){
  .nav__links{position:fixed;inset:60px 0 auto 0;flex-direction:column;background:#fff;
    border-bottom:1px solid var(--line);padding:14px 22px 22px;gap:2px;
    transform:translateY(-140%);transition:.35s;box-shadow:var(--shadow);max-height:calc(100vh - 60px);overflow:auto}
  .nav__links.is-open{transform:translateY(0)}
  .nav__links a{padding:12px 10px;font-size:1rem;border-bottom:1px solid var(--bg-alt)}
  .hamburger{display:flex}
  .pub{grid-template-columns:1fr;gap:6px}
  .news__item{grid-template-columns:1fr;gap:4px}
  .news__date{padding-left:20px}
}
@media(max-width:520px){
  .section{padding:64px 18px}
  .hero__inner{padding-top:110px}
}