:root {
    --brand:#0d6efd;
    --bg:#F7FAFC;
    --footer-bg: #f6fafc;       /* 淺底色，接近截圖 */
    --footer-line: #d9e3ef;     /* 頂部分隔線 */
    --footer-text: #3b6ea5;   /* 文字顏色 */
    --card:#ffffff;
    --radius:16px;
    --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Hero */
.container { 
    width:min(1100px,92%); 
    margin-inline:auto; 
}

/* ===== Hero ===== */
.course-hero {
    display:grid; 
    grid-template-columns: 1.15fr .85fr;
    gap:24px;
    padding:130px 0 30px;
}
.hero-cover { 
    border-radius:20px; 
    overflow:hidden; 
}
.hero-cover img { 
    width:100%; 
    height:350px; 
    object-fit:cover; 
    display:block; 
}
.hero-actions { 
    display:flex; 
    gap:12px; 
    margin-top:12px; 
    justify-content: center;
}
.pill-btn {
  background:#eef2f7; 
  border:none; 
  border-radius:999px; 
  padding:10px 16px;
  font-weight:700; 
  color:#223; 
  cursor:pointer;
}
.pill-btn:hover { background:#e5eaf2; }
.ico-heart,.ico-share {
    width:16px; 
    height:16px; 
    display:inline-block; 
    margin-right:8px; 
    vertical-align:-3px; 
    background:#333;
    -webkit-mask-size:contain; 
    -webkit-mask-repeat:no-repeat; 
    -webkit-mask-position:center;
    mask-size:contain;
    mask-repeat:no-repeat;
    mask-position:center;
}
.ico-heart { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 21s-1-.6-1.6-1.1C6 16.2 2 13.2 2 8.9A4.9 4.9 0 0 1 6.9 4c1.7 0 3.1.8 4.1 2.1C12 4.8 13.4 4 15.1 4A4.9 4.9 0 0 1 20 8.9c0 4.3-4 7.3-8.5 11.1-.6.5-1.4 1-1.4 1z"/></svg>'); }
.ico-share { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M448 256C501 256 544 213 544 160C544 107 501 64 448 64C395 64 352 107 352 160C352 165.4 352.5 170.8 353.3 176L223.6 248.1C206.7 233.1 184.4 224 160 224C107 224 64 267 64 320C64 373 107 416 160 416C184.4 416 206.6 406.9 223.6 391.9L353.3 464C352.4 469.2 352 474.5 352 480C352 533 395 576 448 576C501 576 544 533 544 480C544 427 501 384 448 384C423.6 384 401.4 393.1 384.4 408.1L254.7 336C255.6 330.8 256 325.5 256 320C256 314.5 255.5 309.2 254.7 304L384.4 231.9C401.3 246.9 423.6 256 448 256z"/></svg>'); }

.hero-right { 
    position:relative; 
    display:flex; 
    flex-direction:column;
    justify-content:center;
}
.course-title { 
    margin: 0; 
    font-size:50px; 
    line-height:1.35; 
}
.tag-row { 
    display:flex; 
    gap:8px; 
    flex-wrap:wrap; 
    padding:24px 0; 
}
.chip { 
    background:#eef2f7; 
    color:#0D141C; 
    padding:8px 16px; 
    border-radius:8px; 
    font-weight:700; 
    font-size:14px; 
}

.price-card {
    padding:24px; 
    border-radius:8px; 
    border:1px solid #CFDBE8;
    width:min(380px,100%);
}
.pc-head { 
    font-weight:800; 
    color:#0D141C; 
    margin-bottom:6px; 
}
.pc-price { 
    font-size:28px; 
    font-weight:bolder; 
    color:#0D141C; 
    letter-spacing:.2px; 
    margin: 10px 0;
}
.pc-note { 
    font-size:12px; 
    margin:6px 0 14px; 
}
.btn { 
    padding:10px 14px; 
    border-radius:8px; 
    background:#E8EDF5; 
    cursor:pointer; 
    font-weight:700; 
}
.btn.buy { 
    width:100%; 
    background:#E8EDF5; 
    color:#0D141C; 
}
.btn.buy:hover { 
    width:100%; 
    background:#0D141C; 
    color:#E8EDF5;
}
.btn.buy a {
    color: inherit; 
    text-decoration: none;
}

/* ===== Tabs ===== */
.tabs { display:flex; gap:8px; border-bottom:1px solid #CFDBE8; margin:10px 0 6px; position: relative;}
.tab { padding:10px 12px; background:none; border:none; font-size: 16px; font-weight:800; color:#233041; cursor:pointer; position:relative; }
.tab.active::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:#213a63; }
.tab-ink {
  position: absolute;
  left: 0;
  bottom: -1px;             /* 蓋在邊框上更像設計稿 */
  height: 2px;
  width: 0;
  background: var(--brand, #213a63);
  border-radius: 999px;
  transform: translateX(0);
  transition: transform .35s ease, width .35s ease;
  will-change: transform, width;
}

/* ===== 上課資訊 ===== */
.section-wrapper { margin:30px 20px; }
.section-title h2 { margin:0; }
.section-desc { 
    color:#3b3b3b; 
    font-size:20px; 
    line-height:1.4;
}
.info-grid { 
    padding:12px; 
    margin:16px 0; 
    display:grid; 
    grid-template-columns:repeat(2,1fr); 
    gap:10px 14px; 
}
.info-item { padding:8px; }
.i-left { 
    display:flex; 
    gap:15px; 
    align-items:center; 
}
.ico { 
    width:60px; 
    height:60px; 
    border-radius:10px; 
    background:#ececec; 
    display:inline-grid; 
    place-items:center; 
}
.ico::before { 
    content:""; 
    width:30px; 
    height:30px; 
    background:#2b5aa0; 
    -webkit-mask-size:contain; 
    -webkit-mask-repeat:no-repeat; 
    -webkit-mask-position:center; 
    mask-size:contain; 
    mask-repeat:no-repeat; 
    mask-position:center; 
}
.calendar::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 240L496 240L496 192C496 183.2 488.8 176 480 176L216 176zM144 288L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 288L144 288z"/></svg>'); }
.clock::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112C434.9 112 528 205.1 528 320zM64 320C64 461.4 178.6 576 320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320zM296 184L296 320C296 328 300 335.5 306.7 340L402.7 404C413.7 411.4 428.6 408.4 436 397.3C443.4 386.2 440.4 371.4 429.3 364L344 307.2L344 184C344 170.7 333.3 160 320 160C306.7 160 296 170.7 296 184z"/></svg>'); }
.users::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z"/></svg>'); }
.map::before { -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M576 112C576 103.7 571.7 96 564.7 91.6C557.7 87.2 548.8 86.8 541.4 90.5L416.5 152.1L244 93.4C230.3 88.7 215.3 89.6 202.1 95.7L77.8 154.3C69.4 158.2 64 166.7 64 176L64 528C64 536.2 68.2 543.9 75.1 548.3C82 552.7 90.7 553.2 98.2 549.7L225.5 489.8L396.2 546.7C409.9 551.3 424.7 550.4 437.8 544.2L562.2 485.7C570.6 481.7 576 473.3 576 464L576 112zM208 146.1L208 445.1L112 490.3L112 191.3L208 146.1zM256 449.4L256 148.3L384 191.8L384 492.1L256 449.4zM432 198L528 150.6L528 448.8L432 494L432 198z"/></svg>'); }
.i-title { 
    font-weight:500; 
    margin-bottom:5px; 
    font-size:16px; 
    color:#888888;
}
.i-sub { 
    font-size:20px; 
    font-weight: bolder;
}

/* ===== 特色 / 對象 ===== */
.cols { 
    display:grid; 
    grid-template-columns:1fr; 
    gap:26px;
    margin:30px 20px; 
}
.col h3 { 
    margin:20px 0 10px; 
    font-size: 35px;
}
.col label { 
    font-size: 25px;
}
.checklist { 
    list-style:none; 
    padding-left:0; 
    display:grid; 
    gap:15px; 
}
.checklist input { 
    accent-color:var(--brand); 
}
.checklist i { 
    color:var(--brand); 
    margin-right:8px; 
}
.bullets { 
    padding-left:18px; 
    display:grid; 
    gap:6px;
}
.bullets li {
    font-size:25px;
}

/* ===== 課程內容表格 ===== */
.curriculum-section {margin:40px 0;}
.section-title {
    margin:0 0 10px; 
    font-size:35px; 
    font-weight:bolder; 
    color: #0D141C;
}
.section-h4 {
    margin:20px 0 6px; 
    font-size:24px; 
    font-weight:bolder; 
    color: #0D141C;
}
.section-sub {
    margin:0 0 20px; 
    font-size:20px; 
    color: #4A739C;
}

/* Grid Table shell */
.grid-table{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

/* Each row is a grid of 3 columns */
.grid-table .row{
  display:grid;
  grid-template-columns: .8fr 140px 320px;  /* 左/時數/職能 */
  gap:16px;
  padding:20px 10px;
  align-items:center;
  justify-content: space-between;
  border-bottom: solid 1px #D8D8D8;
}
.row.seven {border-bottom: none}
/* Header */
.row.head {border-bottom: solid 1px #D8D8D8;}
.row.grid2{
  grid-template-columns: .7fr 1.7fr;
}
.row.nogrid {
  display: flex;
}
.grid-table .row.head{
  background:var(--bghead);
  font-weight:800;
}
.title { font-size:20px; font-weight:900; color: #0D141C; }
.sub { color: #4A739C; font-size: 20px;}
/* Cells */
.cell {min-width:0;font-size:20px;}
.center {text-align:left;}
.item {
    font-weight:bolder; 
    margin:0 0 4px ;
    color: #0D141C;
    font-size:20px;
}
.desc {color:var(--muted);}
.codes {
    list-style:none; 
    padding:0; 
    margin:0; 
    display:grid; 
    gap:2px;
}
.code, .hours {
    color:#0D141C; 
    font-weight:800;
}
.comment {
    font-size:25px; 
    color:#0D141C;
}

/* Row hover / active（可搭配 JS） */
.grid-table .row:not(.head):hover {background:#f9fcff;}
.grid-table .row.active {
    background:#f8fbff; 
    box-shadow:inset 0 0 0 1px var(--line);
}

@media (max-width: 1200px){
  .course-hero{
    grid-template-columns: 1fr 1fr; /* 左右比例收斂 */
    gap: 20px;
  }
  .hero-cover img{ height: 300px; }
  .pc-price{ font-size: 26px; }
  .tabs{ gap: 6px; }
}

/* =========================
   Breakpoint ② ≤ 992px（平板）
   ========================= */
@media (max-width: 992px){
  /* Hero 改為直向堆疊 */
  .course-hero{
    grid-template-columns: 1fr;
    padding-top: 90px;
  }
  .hero-cover img{ height: 260px; }
  .hero-actions{ justify-content: flex-start; }
  .price-card{ width: 100%; }

  /* 分頁可水平捲動（配合 .tab-ink 指示線） */
  .tabs{
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 11 */
  }
  .tabs::-webkit-scrollbar{ display:none; } /* WebKit */
  .tab{ white-space: nowrap; }

  /* 上課資訊：2 欄 → 1 欄 */
  .info-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 特色 / 對象：2 欄 → 1 欄 */
  .cols{
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 20px;
  }

  .col li {
    padding: 5px 0;
  }

  /* 師資：縮小頭像，緊湊排版 */
  .teacher{ gap: 14px; }
  .avatar{ width: 72px; height: 72px; }
}

/* =========================
   Breakpoint ③ ≤ 820px（小平板 / 大手機）
   ========================= */
@media (max-width: 820px){
  .course-title{ font-size: 24px; }
  .chip{ padding: 6px 10px; font-size: 11px; }
  .pill-btn{ padding: 9px 14px; }
  .pc-price{ font-size: 24px; }
  .pc-note{ font-size: 12px; }
}

/* =========================
   Breakpoint ④ ≤ 760px（手機）
   ========================= */
@media (max-width: 760px){
  /* Hero 圖更扁平，按鈕置上方不擋畫面 */
  .hero-cover img{ height: 220px; }
  .hero-actions{ gap: 10px; }

  /* Tabs：縮小內距 */
  .tab{ padding: 9px 10px; }

  /* 課程內容表格（兩種寫法都支援） */
  /* —— 版本 A：你的 .table / .tr 寫法 —— */
  .table .tr{
    grid-template-columns: 1fr;       /* 改為直向堆疊 */
    gap: 8px;
    padding: 12px 14px;
  }
  .table .tr.th{
    display: none;                    /* 行動裝置隱藏表頭列（可選） */
  }
  /* 讓右兩欄堆疊時更好讀 */
  .table .w-120,
  .table .w-220{
    width: auto;                      /* 取消固定寬 */
  }
  .table .hours{ margin-top: 2px; }
  .table .desc{ margin-top: 2px; }

  /* —— 版本 B：先前提供的 .grid-table / .row 寫法 —— */
  .grid-table .row{
    grid-template-columns: 1fr;       /* 改為單欄 */
    padding: 30px 14px;
  }
  .grid-table .row.head{ display: none; }  /* 小螢幕隱藏表頭列 */
  /* 使用 data-label 當欄位標籤（若 HTML 有加 data-label） */
  .grid-table .cell::before{
    content: attr(data-label);
    display: block;
    font-weight: 800;
    color: #003fc7;
    margin-bottom: 4px;
  }
  .grid-table .hours{ margin-top: 2px; }
  .grid-table .nodate::before{ content: none; } /* 若無日期欄，隱藏標籤 */
}

/* =========================
   Breakpoint ⑤ ≤ 600px（小手機）
   ========================= */
@media (max-width: 600px){
  .hero-cover{ border-radius: 16px; }
  .hero-cover img{ height: 200px; }
  .pill-btn{ padding: 8px 12px; font-weight: 700; }
  .pc-price{ font-size: 22px; }
  .i-title{ font-size: 15px; }
  .i-sub{ font-size: 20px; }
  .col label{ font-size: 22px; }
  .col li{ font-size: 22px; }
  .col h3{ font-size: 30px;}
  .avatar{ width: 64px; height: 64px; }
  .teacher{ padding: 12px; }
}

/* =========================
   超小螢幕微調（≤ 480px）
   ========================= */
@media (max-width: 480px){
  .course-title{ font-size: 22px; }
  .chip{ padding: 5px 9px; font-size: 10px; }
  .btn{ padding: 9px 12px; }
  .card{ border-radius: 16px; }
  .price-card{ padding: 14px; }
  .tabs{ margin: 8px 0 4px; }
}

/* =========================
   無動畫偏好：關掉大部分轉場
   ========================= */
@media (prefers-reduced-motion: reduce){
  .tab-ink,
  .tab,
  .pill-btn,
  .btn{ transition: none !important; }
}