:root {
  --navy: #2A3E73;
  --navy-deep: #16213D;
  --blue: #1770B8;
  --teal: #00AEEF;
  --teal-light: #E6F6FC;
  --pink: #FE4C9B;
  --pink-deep: #C51E85;
  --bg: #FFFFFF;
  --ink: #333333;
  --pink-soft: #666666;
  --white: #FFFFFF;
}
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.7;
  }
  h1,h2,h3{ font-family:'Noto Sans TC', 'Microsoft JhengHei', sans-serif; margin:0; }
  a{ color:var(--teal); text-decoration:none; }
  img{ max-width:100%; }

  /* ---- hero ---- */
  .hero{
    background:linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--teal) 130%);
    color:#fff; padding:64px 24px 96px; position:relative; overflow:hidden;
  }
  .hero-inner{ max-width:880px; margin:0 auto; text-align:center; }
  .eyebrow{
    font-size:13px; letter-spacing:2.5px; font-weight:600; color:#9FE3F5;
    text-transform:uppercase; margin-bottom:18px;
  }
  .hero h1{ font-size:clamp(26px,4vw,38px); line-height:1.45; font-weight:700; }
  .hero .en{ margin-top:14px; font-size:16px; color:#D7EFF7; letter-spacing:.3px; }
  .meta-row{
    margin-top:34px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center;
    font-size:15px; color:#EAF7FB;
  }
  .meta-row span{ display:inline-flex; align-items:center; gap:8px; }
  .quicknav{
    margin-top:40px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  }
  .quicknav a{
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.35);
    color:#fff; padding:9px 20px; border-radius:999px; font-size:14px; font-weight:500;
    transition:background .2s;
  }
  .quicknav a:hover{ background:rgba(255,255,255,.22); }

  .wave{ display:block; width:100%; margin-top:-2px; }

  /* ---- sections ---- */
  main{ max-width:880px; margin:0 auto; padding:0 24px 40px; }
  .section{ padding:56px 0; border-bottom:1px solid var(--line); }
  .section:last-child{ border-bottom:none; }
  .section-tag{
    font-size:13px; font-weight:700; letter-spacing:2px; color:var(--teal);
    text-transform:uppercase; margin-bottom:10px;
  }
  .section h2{ font-size:24px; color:var(--blue); margin-bottom:6px; }
  .section .lead{ color:var(--ink-soft); margin-top:8px; font-size:15px; }

  .notice{
    margin-top:26px; background:#FDEEF5; border:1px solid #F6C9DF; border-left:4px solid var(--pink);
    border-radius:6px; padding:16px 20px; font-size:14.5px; color:#7A2E55;
  }
  .notice a{ color:var(--pink-deep); font-weight:600; }

  .card{
    margin-top:24px; background:var(--white); border:1px solid var(--line); border-radius:10px;
    padding:24px 26px;
  }
  .card h3{ font-size:17px; color:var(--blue); margin-bottom:14px; }
  .card ul{ margin:0 0 18px; padding-left:20px; font-size:14.5px; color:var(--ink); }
  .card ul li{ margin-bottom:6px; }
  .credit-badge{
    display:inline-block; background:var(--teal-light); color:var(--blue);
    font-weight:700; font-size:14px; padding:6px 14px; border-radius:6px; margin-bottom:14px;
  }

  .credit-pill{
    display:flex; flex-direction:row; align-items:center; justify-content:space-between;
    background:var(--teal-light); border:1.5px solid var(--teal);
    border-radius:10px; padding:12px 20px; width:100%;
  }
  .pill-name{ font-size:14px; color:var(--navy); font-weight:600; }
  .pill-score{ font-size:16px; font-weight:700; color:var(--blue); white-space:nowrap; margin-left:12px; }

  table{ width:100%; border-collapse:collapse; font-size:14px; }
  .timetable th, .timetable td{
    border:1px solid var(--line); padding:9px 12px; text-align:center;
  }
  .timetable th{ background:var(--teal-light); color:var(--blue); font-weight:600; }

  .table-scroll{ overflow-x:auto; margin-top:22px; border:1px solid var(--line); border-radius:10px; }
  .fee-table{ min-width:680px; font-size:14px; }
  .fee-table th, .fee-table td{
    border-bottom:1px solid var(--line); border-right:1px solid var(--line);
    padding:11px 14px; text-align:center; white-space:nowrap;
  }
  .fee-table th:first-child, .fee-table td:first-child{ text-align:left; white-space:normal; min-width:200px; }
  .fee-table thead th{ background:var(--navy); color:#fff; font-weight:600; line-height:1.4; }
  .fee-table thead th small{ display:block; font-weight:400; font-size:11.5px; color:#AEE3F2; margin-top:3px; }
  .fee-table tbody tr:nth-child(even){ background:#F5FBFD; }
  .fee-table .group-row td{
    background:var(--teal-light); color:var(--blue); font-weight:700; text-align:center;
    font-size:13.5px; letter-spacing:.5px;
  }
  .fee-table .flat{ color:var(--ink-soft); font-size:13px; }
  .fee-table .cat-en{ display:block; font-size:11.5px; color:var(--ink-soft); font-weight:400; margin-top:2px; }
  .fee-table .group-row .cat-en{ color:var(--ink-soft); }

  .foot-note{ margin-top:16px; font-size:13px; color:var(--ink-soft); }
  .foot-note ol{ padding-left:18px; margin:6px 0 0; }
  .foot-note li{ margin-bottom:4px; }

  .refund-block{
    margin-top:32px; background:var(--white); border:1px solid var(--line); border-radius:10px;
    padding:24px 26px;
  }
  .refund-block h3{ font-size:16px; color:var(--blue); margin-bottom:14px; }
  .refund-block .lang-label{
    display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:1px;
    color:var(--teal); text-transform:uppercase; margin:18px 0 8px;
  }
  .refund-block .lang-label:first-of-type{ margin-top:0; }
  .refund-block p{ font-size:14px; color:var(--ink); margin:0 0 10px; }
  .refund-block ol{ padding-left:20px; margin:0; font-size:14px; color:var(--ink); }
  .refund-block ol li{ margin-bottom:8px; }

  .cta-row{ margin-top:30px; text-align:center; }
  .btn{
    display:inline-block; background:var(--pink); color:#fff; font-weight:600; font-size:15px;
    padding:13px 34px; border-radius:8px; transition:transform .15s, box-shadow .15s, background .15s;
    box-shadow:0 6px 16px rgba(238,76,155,.30);
  }
  .btn:hover{ transform:translateY(-1px); background:var(--pink-deep); }
  .btn.secondary{
    background:transparent; color:var(--navy); border:1.5px solid var(--navy); box-shadow:none;
  }
  .btn.sm{
    font-size:13px; padding:8px 18px; margin:3px 6px 3px 0;
  }

  .program-box{
    margin-top:24px; background:var(--white); border:1px solid var(--line); border-radius:10px;
    padding:32px; text-align:center;
  }
  .program-box p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:18px; }

  footer{
    background:var(--white); color:var(--ink-soft); padding:36px 24px; font-size:13.5px; text-align:center;
    border-top:1px solid var(--line);
  }
  footer a{ color:var(--blue); }
  footer .org{ font-weight:700; color:var(--navy); margin-bottom:8px; font-size:14.5px; }
  footer .line{ margin:4px 0; }
  footer .copyright{ margin-top:16px; color:#9AA5AA; font-size:12.5px; }

  @media (max-width:600px){
    .hero{ padding:48px 18px 80px; }
    .section{ padding:40px 0; }
    .card{ padding:20px; }
    .credit-cols{ grid-template-columns:1fr !important; }
  }