:root{
  --container: 1100px;
  --radius: 10px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);
  --shadow: 0 10px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);

  /* 品牌色（以 Healing 版本為主） */
  --brand: #66bb6a;
  --brand-2: #81c784;
  --brand-3: #4caf50;
  --mint-50: #E8F5F0;  /* 淺底綠，用於 secondary */
  --mint-100:#c8e6c9;  /* hover 淺底綠 */
  --accent-blue: #3bb3c3;
  --accent-purple: #a18cd1;

  /* 文字與輔助色 */
  --ink: #2d352d;
  --muted: #6b7280;
  --text-strong: #1b5e20;
  --text: #2c3a2c;
  --divider: #e6efe8;
  --mint-bg: #f6fbf8;

  /* 品牌綠（保留舊命名以相容） */
  --brand-green: #2e7d32;
  --brand-green-2: #36a66a;

  /* 導覽列緊湊參數 */
  --nav-gap: 8px;
  --nav-pad-y: 4px;
  --nav-pad-x: 6px;
  --bottom-nav-h: 56px;
  --radius-pill: 999px;
  --btn-h: 40px;
  --btn-px: 16px;
  --btn-gap: 8px;
}

/* ---- Reset / Base ---- */
html, body{ scroll-behavior: smooth; }
body{
  font-family: 'Noto Sans TC', serif;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
  background: linear-gradient(160deg, #fdfcf9, #f1f8f4);
}
.container,
.sticky-chips__inner
{max-width: var(--container);margin: 0 auto;padding: 0 22px;}
.hidden{ display: none !important; }
.muted {
  /* color: var(--muted); */
  font-weight: 400;
  line-height: 1.6;               /* 內文字更舒適 */
  font-size: 14px;
  letter-spacing: .2px;
}
.plain{ color: inherit; text-decoration: none; }

/* 間距工具 */
.flow-md > * + *{margin-top: 18px;}
.flow-lg > * + *{margin-top: 20px;}

/* ---- Header / Footer / Nav ---- */
.site-header, .site-footer{
  background: linear-gradient(180deg, #f8fffb, #ffffff);
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  padding: 1rem 0 2rem;
  border-bottom: 1px solid #e0e0e0;
}
.site-header{
  padding: 0px 0 0px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  border-bottom: 1px solid #e7efe7;
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 1100; /* 要比內容、底部選單更高 */
}
.site-footer{ margin-top: 32px; }
.site-header h1{ margin: 0; color: var(--brand); font-weight: 600; }

/* 讓 nav 內容在一行，並用 gap 控制一致間距（更緊湊） */
nav{
  display: inline-flex;
  align-items: center;
  gap: var(--nav-gap);
}

/* dropdown 容器 */
nav .dropdown{ position: relative; display: inline-block; }

/* 小工具按鈕：自動帶箭頭（▾） */
nav .dropbtn::after{ content: " ▾"; font-weight: 600; }

/* 下拉清單：白底卡片、陰影、圓角 */
nav .dropdown-content{
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 6px 0;
  z-index: 99;
}
nav .dropdown-content a{
  display: block;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  margin: 2px 6px;
}
nav .dropdown-content a:hover,
nav .dropdown-content a:focus-visible{
  background: #e8f5e9;
  color: var(--brand);
  outline: none;
}
nav .dropdown:hover .dropdown-content,
nav .dropdown:focus-within .dropdown-content{ display: block; }
nav .dropdown:hover .dropbtn,
nav .dropdown:focus-within .dropbtn{
  background: rgba(46,125,50,0.06);
  text-decoration: none;
}

/* ---- 卡片 ---- */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
.card:hover{ transform: translateY(-1px); }

/* ---- Hero ---- */
.hero{
  text-align: center;
  background: linear-gradient(135deg, #e9f9f4, #ffffff);
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  border-radius: var(--radius);
  display: grid;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.hero h2{margin: 0 0 8px;}
.chips{display: flex;gap: 8px;flex-wrap: wrap;margin-top: 10px;}

/* ---- Feature（服務領域） ---- */
.feature-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.feature{
  /* display: grid; */
  /* grid-template-columns: 56px 1fr; */
  gap: 6px;
}
.feature .icon{
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin: 0 8px 7px;
  filter: drop-shadow(0 4px 10px rgba(59, 179, 195, 0.4));
}

.teacher-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.teacher-card{
  display: grid;
  grid-template-columns: 73px 1fr;
  gap: 18px;
  align-items: start;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  padding: 16px;
}
.teacher-card .avatar{
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  background: #e8f5e9;
  border: 1px solid rgba(0,0,0,.05);
}
.teacher-card .info{display: grid;gap: 1px;}
.teacher-card .subtitle{ color: #1b5e20; margin: 0; font-weight: 600; }
.teacher-card .bio{/* color: #555; *//* margin: 0; */}
.teacher-card .badges{ display: flex; gap: 8px; flex-wrap: wrap; }
.teacher-card .cta{ margin-top: 12px; }

/* ---- 精選課程 / 課程格線 ---- */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.grid.cards{/* margin-top: 14px; */}
.course-card{
  display: grid;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.course-meta{
  font-size: .8rem;
  color: rgba(0,0,0,.65);
  display: flex;
  flex-wrap: wrap;
  padding: 0 1rem;
}
.course-card h4{ margin: 0 0 4px 0; }
.badge{
  display: inline-block;
  text-decoration: none;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: #eef6f6;
  border: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
  color: #46525a;
  line-height: 1.2;
  /* margin: 5px 0 0 0; */
  margin-top: auto;
}

/* ---- 推薦表單 ---- */
.card.recommend{
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(110%) blur(2px);
}
.form-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-block: 4px 2px;
}
.form-grid label{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, auto));
  gap: 8px;
  font-weight: 600;
  font-size: 0.8rem;
}
label{display: block;font-size: 14px;padding: 3px 5px;}
input, select, textarea{
  border-radius: 10px;
  width: 100%;
  border: none;
  padding: 10px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--mint-50);
  color: #757575;
  box-sizing: border-box;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;                  /* 拿掉預設黑框 */
}

.actions{display: flex;gap: 10px;align-items: center;margin-top: 8px;}

/* ---- 按鈕 ---- */
button, .btn{
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .3s ease, opacity .2s ease, transform .15s ease;
  border: none;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 14px;
  background: var(--mint-50);
}

button:hover, .btn:hover{ transform: translateY(-1px);  }
button.primary, .btn.primary{
  background: var(--brand);
  color: #fff;
  border: none;
}
button.primary:hover, .btn.primary:hover{
  background: var(--brand-2);
}
button.primary:active , .btn.primary:active {
  background: var(--brand-3);
}

.btn.danger{ background: #b00020; color: #fff; border: none; }
/* 一分鐘頁的小綠按鈕 */
.btn.ok{
  background: var(--mint-50);
  color: var(--ink);
  border: 1px solid var(--brand-2);
}

/* ---- Prose ---- */
.prose p{ margin: 0 0 12px 0; }

/* ---- Dialog ---- */
dialog::backdrop{ background: rgba(0,0,0,.2); }
#enroll-dialog::backdrop{ background: rgba(0,0,0,.25); }
#enroll-form .actions{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

/* ---- Admin 面板列表 ---- */
#admin-courses .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}
#admin-courses .item .meta{ display: flex; gap: 6px; flex-wrap: wrap; }
#admin-courses .item .title{ font-weight: 600; }

/* ---- 背景紋理 ---- */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('https://www.transparenttextures.com/patterns/green-dust-and-scratches.png');
  opacity: .05;
  pointer-events: none;
}

/* ---- Fancy 標題 ---- */
.fancy-title{
  font-family: 'Noto Serif TC', serif;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  background: linear-gradient(90deg, #4caf50, #81c784, #aed581);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 2px 6px rgba(0,0,0,.18);
  margin: 30px 0 40px;
}

/* ---- 表單控制元件細節 ---- */
input[type="radio"], input[type="checkbox"]{
  width: auto;
  margin: 0 6px 0 0;
  accent-color: var(--brand);
  box-shadow: none;
  cursor: pointer;
}

/* 讓 label 內的選項在一行，不要斷行 */
.actions label{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
  cursor: pointer;
}

/* ---- 導覽列：左右區塊 ---- */
.main-nav{
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

/* ===== Nav（膠囊化，移除底線；以後段規則為準） ===== */
.nav-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-left a:hover,
.nav-left .dropbtn:hover{
  background: rgba(46,125,50,.08);
  color: #1b5e20;
  text-decoration: none;
}
.nav-left a:focus-visible,
.nav-left .dropbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,125,50,.2);
}
.nav-left a[aria-current="page"],
.nav-left .dropbtn[aria-expanded="true"],
body.menu-open .nav-left .dropbtn{
  background: #e8f5e9;
  color: #1b5e20;
  box-shadow: 0 2px 8px rgba(46,125,50,.12);
}
/* 取消底線指示條 */
.nav-left a::after,
.nav-left .dropbtn::after{ content: none !important; }

/* 下拉（膠囊版） */
.nav-left .dropdown{ position: relative; }
.nav-left .dropbtn::before{ content: ""; }
.nav-left .dropbtn::after{
  content: "▾";
  margin-left: 2px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
}
.nav-left .dropdown:hover .dropbtn::after,
.nav-left .dropdown:focus-within .dropbtn::after{
  transform: rotate(180deg) translateY(-1px);
}
.nav-left .dropdown-content{
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 6px;
  z-index: 99;
}

/* 右側登入/登出 CTA（以後面藍綠版本為主） */
.nav-right{ margin-left: auto; display: flex; gap: 10px; align-items: center; }
.btn.nav-cta{
  border: none;
  background: linear-gradient(135deg, var(--accent-blue), #a7dcd7);
  color: #0c4030;
  border-radius: 10px;
  padding: 8px 6px;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  line-height: 1;
}
.btn.nav-cta:hover{
  background: linear-gradient(135deg, #a7dcd7, var(--accent-blue));
}
.btn.nav-cta.secondary{
  background: rgba(167,220,215,.18);
  color: #0c4030;
  border: 1px solid rgba(59,179,195,.28);
  box-shadow: 0 2px 10px rgba(59,179,195,.10);
  padding: 8px 10px;
}
.btn.nav-cta.secondary:hover{
  background: rgba(167,220,215,.28);
  border-color: rgba(59,179,195,.38);
}
.btn.nav-cta svg{ display: block; }

h2{
  font-size: 1.0rem;
  color: #333;
  margin: 1.2em 0 .6em;
  margin:0;
  font-weight:800;
  letter-spacing:.02em;
}

.flow-md h2 {
  position:relative;
  padding: 0px 8px;
}

.flow-md h2::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: -6px;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-blue, #3bb3c3);
}


/* 讓每個題目的選項用 grid 排版，自動換行 */
fieldset.card .actions{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 8px;
}
fieldset.card .actions label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  background: #fff;
  margin: 0;
  cursor: pointer;
}

/* Site title with logo */
.site-title{ margin: 0; }
.site-title .brand{
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: inherit;
}
.site-title .logo{
  width: 45px;
  height: 45px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.1));
}

/* Header 視覺（淡玻璃） */
.site-header .header-bar{
  gap: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 55px;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  backdrop-filter: saturate(150%) blur(6px);
}

.site-header .brand .title-text{
  font-weight: 600;
  letter-spacing: .5px;
  background: #333;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 2px 20px rgba(0,0,0,.20);
  font-size: 1.2rem;
}

/* 漢堡鍵 */
.hamburger{
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(46,125,50,.18);
  /* border-radius: 12px; */
  background: rgba(46,125,50,.06);
  backdrop-filter: saturate(130%) blur(2px);
  box-shadow: 0 2px 10px rgba(46,125,50,.08);
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.hamburger:hover{ background: rgba(46,125,50,.09); }
.hamburger:active{ transform: scale(.96); }
.hamburger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,125,50,.18), 0 2px 10px rgba(0,0,0,.06);
}
.hamburger .bar{
  position: relative;
  width: 16px;
  height: 2px;
  background: #2e7d32;
  border-radius: 2px;
  transition: background .18s ease, transform .18s ease;
}
.hamburger .bar::before,
.hamburger .bar::after{
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: #2e7d32;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.hamburger .bar::before{ transform: translateY(-5px); }
.hamburger .bar::after{ transform: translateY(5px); }
body.menu-open .hamburger{ background: rgba(46,125,50,.10); }
body.menu-open .hamburger .bar{ background: transparent; }
body.menu-open .hamburger .bar::before{ transform: rotate(45deg); }
body.menu-open .hamburger .bar::after{ transform: rotate(-45deg); }

/* 桌機/手機切換 */
@media (max-width: 899px){
  .nav-desktop .nav-left{ display: none; }
  .site-header .nav-right{ margin-left: auto; }
  .hamburger{ display: grid; order: 2; }
  .site-header .header-bar{ gap: 10px; }
}
@media (min-width: 900px){
  .hamburger{ display: none; }
}

/* 手機選單（抽屜卡片） */
.nav-mobile{
  position: fixed;
  left: 8px;
  right: 8px;
  top: 72px;
  height: auto;
  max-height: calc(100dvh - 96px);
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: grid;
  gap: 4px;
  overflow: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  z-index: 999;
}
.nav-mobile a:hover{ background: var(--mint-bg); }
.nav-mobile .group{
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--divider);
}
.nav-mobile .group-title{
  display: block;
  padding: 8px 6px 6px;
  margin: 0 6px;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--muted);
}

/* 遮罩 */
.backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.28);
  display: none;
  z-index: 998;
}

/* 開啟狀態 */
body.menu-open .nav-mobile{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
body.menu-open .backdrop{ display: block; }
body.menu-open{ overflow: hidden; }

/* RWD：區塊顯示切換 */
@media (min-width: 900px){
  .nav-mobile, .backdrop{ display: none !important; }
}

/* =========================================================
   一分鐘頁面風格（pill / scale / hero / progress / dock）
   ========================================================= */

/* 頁首 hero（輕綠漸層） */
.page-hero{
  background: linear-gradient(135deg, #e9f8ee 0%, #f6fff9 100%);
  border: 1px solid #e2f1e6;
  border-radius: 18px;
  padding: 18px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-hero .emoji{ font-size: 28px; }
.page-hero h1{ font-size: 20px; margin: 0; letter-spacing: .5px; }

/* segmented pills */
.pill-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.pill{
  border-radius: 999px;
  padding: 8px 14px;
  background: #d9f2f0;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .5px;
  transition: .2s background, .2s color, .2s border-color, .2s transform;
  user-select: none;
}
.pill:hover{ transform: translateY(-1px); }
.pill[aria-pressed="true"]{
  background: linear-gradient(135deg, var(--accent-blue), #a7dcd7);
  box-shadow: 0 6px 16px rgba(59,179,195,.22);
}

/* 控制台 grid / 輸入 */
.ctrl-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.field label{
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
}
.input, textarea, select{
  box-sizing: border-box;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 8px 8px;
  outline: 0;
  background: var(--mint-50);
  font-size: 12px;
  font-weight: 600;
}
.input:focus, textarea:focus, select:focus{

}

/* 四指標量表 */
.scale{ display: flex; gap: 8px; flex-wrap: wrap; }
.scale input{ position: absolute; opacity: 0; pointer-events: none; }
.scale .opt{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--brand-2);
  background: #fff;
  cursor: pointer;
  font-weight: 700;
  transition: .2s background, .2s border-color, .2s transform;
  user-select: none;
}
.scale .opt:hover{ transform: translateY(-1px); }
.scale input:checked + .opt{
  background: var(--mint-50);
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* 區塊標題與提示 */
.legend{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.legend strong{ font-size: 16px; }
.hint{font-size: 12px;color: var(--muted);}

/* NPS */
.nps-row{display: flex;flex-wrap: wrap;gap: 8px;margin-top: 10px;}
.nps-row .opt{ min-width: 40px; height: 40px; }

/* 工具列 */
.toolbar{display: flex;gap: 10px;flex-wrap: wrap;align-items: center;margin-top: 10px;}

/* 進度條 */
.progress{
  height: 10px;
  background: #eef4ef;
  border-radius: 999px;
  overflow: hidden;
}
.progress > span{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand) 0%, #a5d6a7 100%);
  transition: width .25s ease;
}

/* 表單訊息與狀態結果 */
.count{
  margin-bottom: 7px;
  /* text-align: right; */
  padding: 0px 12px;
  margin-top: 12px;
}
.key-bar{
  margin-top: 12px;
}
.alert{ border-radius: 12px; padding: 12px; border: 1px solid transparent; }
.alert.ok{ background: #ecfdf5; border-color: #b7ebc0; }
.alert.danger{ background: #fef2f2; border-color: #fecaca; }
.state-result{ display: flex; align-items: center; gap: 10px; font-size: 18px; }
.state-result .big{ font-size: 26px; }

/* ===== 浮動送出列（含行動版修正） ===== */
.dock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 20;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dock-inner{
  pointer-events: auto;
  background: #ffffffd9;
  backdrop-filter: blur(8px);
  border: 1px solid #e5efe7;
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  width: min(920px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dock small{ color: var(--muted); }

/* === Mobile Nav：藍綠療癒風強化 === */
.nav-mobile{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(59,179,195,.18);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(27,94,32,.18),
    0 6px 20px rgba(0,0,0,.06);
  padding: 10px;
  backdrop-filter: saturate(140%) blur(6px);
}

/* 頂部彩帶（不改 HTML，用偽元素做細節） */
.nav-mobile::before{
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 3px;
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue), #a7dcd7);
  opacity: .55;
}

/* 分組標題：小膠囊＋淡漸層底 */
.nav-mobile .group{
  padding-top: 10px; margin-top: 8px;
  border-top: 1px dashed rgba(59,179,195,.28);
}
.nav-mobile .group-title{
  margin: 8px 6px 8px;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--muted);
  background: linear-gradient(90deg, rgba(59,179,195,.14), rgba(167,220,215,.10));
}

/* 選單項目：強化可點性、前導圓點、滑過漸層 */
.nav-mobile a{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.2;
  transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
}

/* 前導圓點（取代傳統項目符號） */
.nav-mobile a::before{
  content: "";
}

/* Hover：柔和藍綠漸層 + 微浮起 */
.nav-mobile a:hover{
  background: linear-gradient(90deg, rgba(59,179,195,.10), rgba(167,220,215,.16));
  box-shadow: 0 2px 10px rgba(59,179,195,.10);
  transform: translateY(-1px);
}

/* Active/目前頁：更明顯的高亮（也支援 .active） */
.nav-mobile a[aria-current="page"],
.nav-mobile a.active{
  background: linear-gradient(90deg, rgba(167,220,215,.22), rgba(59,179,195,.18));
  color: #0c4030;
  box-shadow: inset 0 0 0 1px rgba(59,179,195,.35), 0 2px 10px rgba(59,179,195,.10);
}

/* 背景遮罩更柔和 */
.backdrop{
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}

/* 桌面左側選單：膠囊化、藍綠主色 */
.nav-left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-left a,
.nav-left .dropbtn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .2px;
  color: #333;          /* 文字主色改為藍綠 */
  font-size: 12px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

/* Hover：柔和藍綠漸層 + 微浮起 */
@media (hover:hover) and (pointer:fine){
  .nav-left a:hover,
  .nav-left .dropbtn:hover{
    background: linear-gradient(90deg, rgba(59,179,195,.10), rgba(167,220,215,.16));
    box-shadow: 0 2px 10px rgba(59,179,195,.10);
    color: #0c4030;
    transform: translateY(-1px);
    text-decoration: none;
  }
}

/* Active / 當前頁：更明顯但不刺眼 */
.nav-left a[aria-current="page"],
.nav-left .dropbtn[aria-expanded="true"],
body.menu-open .nav-left .dropbtn{
  background: linear-gradient(90deg, rgba(167,220,215,.28), rgba(59,179,195,.22));
  color: #0c4030;
  box-shadow: inset 0 0 0 1px rgba(59,179,195,.28), 0 2px 8px rgba(59,179,195,.10);
}

/* Focus 無障礙 */
.nav-left a:focus-visible,
.nav-left .dropbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,179,195,.28);
}

/* 移除舊的底線指示條 */
.nav-left a::after,
.nav-left .dropbtn::after{ content: none !important; }

/* Dropdown 面板：玻璃感 + 主題邊線 */
.nav-left .dropdown{ position: relative; }
.nav-left .dropdown-content{
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(59,179,195,.18);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  backdrop-filter: blur(6px) saturate(140%);
  padding: 8px;
  z-index: 99;
}
.nav-left .dropdown:hover .dropdown-content,
.nav-left .dropdown:focus-within .dropdown-content{ display: block; }
.nav-left .dropdown-content a{
  display:block;
  padding: 10px 12px;
  margin: 2px 2px;
  border-radius: 10px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  font-size: 12px;
}
.nav-left .dropdown-content a:hover,
.nav-left .dropdown-content a:focus-visible{
  background: linear-gradient(90deg, rgba(59,179,195,.10), rgba(167,220,215,.16));
  color: #0c4030;
  outline: none;
}

.hamburger .bar,
.hamburger .bar::before,
.hamburger .bar::after{
  background: var(--accent-blue);
}

/* === Hamburger 顏色同步藍綠主題 === */
.hamburger{
  /* 原本是 rgba(46,125,50,…) 的深綠，改成主題藍綠 */
  border: 1px solid rgba(59,179,195,.28); /* var(--accent-blue) ≈ rgb(59,179,195) */
  background: rgba(167,220,215,.18);      /* #a7dcd7 的淡底 */
  box-shadow: 0 2px 10px rgba(59,179,195,.10);
}

/* hover 更明顯一點，但仍柔和 */
@media (hover:hover) and (pointer:fine){
  .hamburger:hover{
    background: rgba(167,220,215,.28);
    border-color: rgba(59,179,195,.38);
  }
}

/* 開啟抽屜時維持對比（搭配你前面 menu-open 的 X 樣式） */
body.menu-open .hamburger{
  background: rgba(167,220,215,.25);
  border-color: rgba(59,179,195,.35);
}


/* === Typography: h3 / h4 / p（品牌藍綠風） === */
h3{
  font-size: 16px;            /* ≈18px，低於你的 h2: 1.25rem */
  font-weight: 600;
  color: #333;       /* 綠色主題做層級 */
  letter-spacing: .4px;
  line-height: 1.35;
  margin: 0;
}

h4{
  font-size: 1rem;                 /* ≈16px */
  font-weight: 600;
  color: var(--accent-blue);       /* 次要標題走藍綠，與 h3 做色彩區隔 */
  letter-spacing: .3px;
  line-height: 1.45;
  margin: 1em 0 .5em;
}

p{
  margin: 0px 0 0px 0;              /* 與你原本 .prose p 一致 */
  color: var(--ink);
  font-weight: 400;
  line-height: 1.6;               /* 內文字更舒適 */
  font-size: 0.75rem;
  letter-spacing: .2px;
}

/* 標題後接段落時，首段更貼近一些 */
h3 + p, h4 + p{margin-top: .2em;}
.service{margin: 0.5em 0;}

.bottom-nav{ display: none; }

/* 乾淨的 icon-only 按鈕 */
.btn.icon-only {
  background: none;            /* 移除漸層背景 */
  border: none;                /* 移除外框 */
  padding: 6px;                /* 縮小內距 */
  border-radius: 50%;          /* 圓形外觀 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);           /* 主文字顏色 */
  transition: background .2s ease;
}

/* hover/active 狀態 */
.btn.icon-only:hover {
  background: rgba(59,179,195,.1);
}
.btn.icon-only:active {
  background: rgba(59,179,195,.2);
}

/* 放大鏡圖示 */
.btn.icon-only svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent-blue);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#btn-more-courses{ white-space: nowrap; }
.hidden{ display: none !important; }

  #qrcode canvas, #qrcode img{
    width: 150px !important;
    height: 150px !important;
  }

@media (max-width: 720px){
  .container{padding: 0px 0px;}
  .site-footer{padding-left: 18px;}

  .form-grid{
    gap: 6px;
  }
  .nav-right{gap: 5px;}
  .header-bar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .site-title .brand{
    gap: 1px;
  }
  .btn.nav-cta svg{
    width: 14px;
    height: 14px;
  }
  /* 移除桌機左側選單（手機用抽屜） */
  .nav-left{ display: none !important; }

  /* Footer QRCode 縮小 */
  #qrcode canvas, #qrcode img{
    width: 120px !important;
    height: 120px !important;
  }
  fieldset.card{ padding: 12px; }
  fieldset.card .actions{
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  }
  .site-header .header-bar{
    gap: 5px;
    padding: 0px 12px;
  }
  .dock-inner{
    width: calc(100% - 12px);
    padding: 8px;
    border-radius: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #dock-status{
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  #dock-back, #dock-reset, #dock-submit{ flex: 0 0 auto; }
  .page-hero h1{ font-size: 18px; }
  .scale .opt{ flex: 1; }
  .nps-row .opt{ flex: 0 0 calc(10% - 8px); }
  
  .hero h2{
    font-size: 1.0rem;
    /* font-weight: 600; */
    line-height: 1.4;
  }
  h3{letter-spacing: .3px;margin: 0;}
  h4{ font-size: .95rem;  letter-spacing: .25px; }

  /* 內容下方留白，避免被導覽擋住 */
  body{
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }

  .bottom-nav{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    /* 無圓角、貼底、全寬 */
    border-radius: 0;

    /* 背景：藍綠療癒漸層 + 細紋，上緣髮絲線 */
    background:
      repeating-linear-gradient(135deg,
        rgba(59,179,195,.05) 0px,
        rgba(59,179,195,.05) 2px,
        rgba(167,220,215,.05) 2px,
        rgba(167,220,215,.05) 4px
      ),
      linear-gradient(180deg,
        rgba(255,255,255,.92) 0%,
        rgba(246,251,248,.96) 70%,
        rgba(240,248,244,.98) 100%
      );
    border-top: 1px solid rgba(59,179,195,.22);
    box-shadow: 0 -6px 18px rgba(0,0,0,.06), 0 -1px 0 rgba(255,255,255,.6) inset;

    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  }

  .bottom-nav .nav-item{
    --pad: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    min-height: 46px;                 /* 緊湊高度 */
    padding: var(--pad) 0;

    text-decoration: none;
    font-weight: 600;
    font-size: 10px;                  /* 小字 */
    letter-spacing: .2px;
    color: var(--ink);
    border-radius: 0;

    transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
  }

  /* —— 統一 icon 風格：線條（stroke） —— */
  .bottom-nav .icon{ display: inline-flex; }
  .bottom-nav .icon svg{
    width: 18px; height: 18px;        /* 小 icon */
    stroke: currentColor;              /* 用線條顏色 */
    fill: none;                        /* 不要填色，避免變成一坨 */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Hover / Active */
  .bottom-nav .nav-item:hover{
    background: linear-gradient(90deg, rgba(59,179,195,.10), rgba(167,220,215,.14));
    box-shadow: inset 0 0 0 1px rgba(59,179,195,.16);
    color: #0c4030;
    transform: translateY(-1px);
  }
  .bottom-nav .nav-item[aria-current="page"],
  .bottom-nav .nav-item.active{
    background: linear-gradient(90deg, rgba(167,220,215,.24), rgba(59,179,195,.20));
    color: #0c4030;
    box-shadow: inset 0 0 0 1px rgba(59,179,195,.26);
  }
}
/* 區塊標題 + 查看更多 */
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: 10px;
}

/* 右上角「查看更多課程」→ 文字連結風格 */
.link-more{
  display:inline-flex;
  align-items:center;
  gap: 4px;
  font-weight: 600;
  text-decoration:none;
  color: var(--ink); /* 或 #1f2937 視主題調整 */
  padding: 6px 14px;
  border-radius: 8px;
  background: #d9f2f0;
  font-size: 0.75rem;
  margin: 0 8px 0 0;
}
.link-more .chev{ transform: translateY(-1px); }
@media (hover:hover){
  .link-more:hover{ background: rgba(59,179,195,.10); }
}

/* 首頁卡片微調：接近參考圖排版 */
.course-card.card{padding: 0;overflow:hidden;}
.course-card .course-body{padding: 8px 16px 18px 18px;}
.course-card .cta .btn.primary{ background:#1d7f45; color:#fff; }
.hidden{ display:none !important; } /* 若你尚未定義 */

/* 讓 grid 子項可縮，不會把內容撐爆欄寬 */
#courses-list > * {/* min-width: 0; */}

/* 摘要：固定兩行，多的裁掉 */
.course-card p.muted{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 0px;
  /* margin: 0 0 0px 0; */
}

/* ===== sticky chips bar ===== */
.sticky-chips{
  position: sticky;
  top: var(--header-height, 55px); /* 視你的 header 高度調整 */
  z-index: 50;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin: 0px 0 5px;
  backdrop-filter: blur(10px);
  overflow-x: auto;                /* 手機可左右滑 */
  scrollbar-width: none;           /* 火狐隱藏捲軸 */
}
.sticky-chips::-webkit-scrollbar{ display:none; } /* WebKit 隱藏捲軸 */

/* 基本 chip */
.chip{
  flex: 0 0 auto;
  padding: 8px 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
  font-size: 14px;
  border-radius: 10px;
  background: #d9f2f0;
  color: var(--ink);
  border: none;
}
@media (hover:hover){
  .chip:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(59,179,195,.18);
    background: linear-gradient(135deg, rgba(59,179,195,.08), rgba(167,220,215,.12));
  }
}

/* 作用中（所在區段） */
.chip.active{
  background: linear-gradient(135deg, var(--accent-blue), #a7dcd7);
  box-shadow: 0 6px 16px rgba(59,179,195,.22);
}

/* 小螢幕留點空間 */
@media (max-width: 720px){
  .sticky-chips{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 15px;               /* ← chip 之間的間距 */
    padding: 5px 10px;
    top: var(--header-height, 55px);
  }
}
#courses li {
  list-style: none;
}

.course-card .carousel .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 10px;
  width: 30px;
  height: 25px;
  /* border-radius: 50%; */
  cursor: pointer;
}
.course-card .carousel .nav.prev { left: 8px; }
.course-card .carousel .nav.next {right: 8px;}

.course-card .carousel .indicator {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);
  color: #fff;
}
.divider {
  margin-top: 10px;
}

/* 卡片：外層同時負責圓角 + 裁切 */
.course-card.card{
  display: flex;              /* 用直向 flex 比 grid 更單純 */
  flex-direction: column;
  /* height: 100%; */
}

/* 圖片容器固定 4:3 */
.course-card .carousel{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f5f5;
  flex: 0 0 auto;             /* 不要被內容撐高 */
  margin: 0;                  /* 保險：避免有預設外距 */
}

/* 讓高度一路傳到底（關鍵） */
.course-card .carousel .track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .3s ease;
}
.course-card .carousel .slide{
  min-width: 100%;
  height: 100%;
  user-select: none;
}
.course-card .carousel .slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 填滿容器，不變形，超出裁掉 */
}

.course-card .cta {
  margin-top: auto;      /* 把按鈕推到底 */
}

.course-card .title-row {
  display: flex;
  align-items: center;   /* 垂直置中 */
  gap: 3px;              /* 標題與 badge 保持一點距離 */
}

.course-card .title-row h3 {
  /* margin: 0; */             /* 去掉預設 margin，避免把行高撐開 */
  /* font-size: 1rem; */       /* 依你設計調整 */
  flex: 1;               /* 讓標題自動撐開，badge 貼右 */
}

.course-card .title-row .badge {
  align-self: start;
}

.course-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.course-link:hover h4 {
  text-decoration: underline;
}

.sticky-chips__inner{
  width: min(100%, var(--container));  /* 直接給寬度，別只用 max-width */
  display: flex;
  gap: 8px 14px;
}

.sticky-chips__inner_k{
  width: min(100%, var(--container));
  display: flex;
  gap: 8px 12px;
  max-width: var(--container);
  margin: 0 auto;
}

.badgeImg {
  width: 26px;          /* 你想要的大小 */
  height: 26px;
  display: inline-block;
  vertical-align: middle; /* 和文字徽章垂直置中 */
  background: none;       /* 移除背景 */
  padding: 0;             /* 移除文字徽章的 padding */
  border: none;           /* 不要邊框 */
  margin: 0px 0 0 3px;
  border-radius: 0;
  opacity: 0.8;
}

.plan-type {
  margin: 0px 0 0 10px;
  background: var(--brand-2);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 3px 8px;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.18), /* 底邊內陰影，更立體 */
    0 1px 2px rgba(0,0,0,.18);      /* 外陰影 */
}

.meta-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
  margin-top: 8px;
}
.meta-grid .label{ font-size: 12px; color: var(--muted, #666); }
.meta-grid .value{ font-weight: 600; }
.meta-grid .chips{display:flex;flex-wrap:wrap;gap:6px;display: flex;justify-content: center;}
.meta-grid .chip{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#eef6f6; border:1px solid rgba(0,0,0,.06); font-size:12px;
}

.course-card .meta-row{
  display:flex;
  flex-wrap:wrap;
  gap: 0px 2px;
  font-size: 12px;
  color: var(--muted, #666);
  padding: 0;
}
.course-card .meta-row .meta{display:inline-flex;align-items:center;gap: 3px;}

.meta-row .meta:not(:first-child)::before {
  content: "·";
  color: var(--muted, #999); /* 分隔符顏色，可以比文字淺 */
}

/* icon 微調：小一點、線條細一點、和文字更齊 */
.course-card .meta-row .i {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 1.7;
  vertical-align: middle;
  flex: 0 0 auto;
  opacity: .8;               /* 稍微淡一點 */
}

/* keywords chips */
.meta-kw .kw-list {
  display: inline-flex;
  gap: 6px;                  /* chip 與 chip 間距 */
  flex-wrap: wrap;
}

.meta-kw .kw {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef6f6;
  border: 1px solid rgba(0,0,0,.06);
  font-size: 10px;
  color: #46525a;
  line-height: 1.2;
}

input::placeholder,
textarea::placeholder {
  color: #aaa;         /* 比正常文字淡 */
  font-weight: 400;    /* 正常粗細，不要太厚重 */
  opacity: 0.8;        /* 再稍微透明一點 */
}

/* 讓卡片內容有可推擠的空間 */
.course-card {display: flex;flex-direction: column;}
.course-card .course-link { display: flex; flex-direction: column; flex: 1; }
.course-card .course-body {display: flex;flex-direction: column;flex: 1;min-height: 0;gap: 5px;}

.course-card .course-body .meta-row.keywords-row {
  margin-top: auto;
}

.field {
  display: flex;
  flex-direction: column;
  flex: 1;            /* ← 關鍵：取得可推擠的空間 */
  min-height: 0;      /* 防止子元素撐爆 */
  align-items: flex-start; /* 不要把子項拉滿寬 */
}

#teacher-filters.form-grid {
  display: grid;
  grid-template-columns: 1fr auto; /* 左邊撐滿，右邊自動寬度 */
  gap: 12px;
  align-items: end; /* 讓 input 跟按鈕底部對齊 */
}

#teacher-filters {
  max-width: 800px;  /* 限制整體寬度 */
  margin: 0 auto;    /* 置中 */
}

#course-filters {
  max-width: 800px;  /* 限制整體寬度 */
  margin: 0 auto;    /* 置中 */
}

#course-filters.form-grid {
  display: block;
}

.filters-grid {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  margin-top: 5px;
}

#q {
  padding-left: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 24 24' focusable='false'><circle cx='11' cy='11' r='7' stroke='black' stroke-width='2' fill='none'/><line x1='16.65' y1='16.65' x2='21' y2='21' stroke='black' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 16px 16px;
  border-radius: 10px;
  background-clip: padding-box;
}

/* 置頂主圖容器：固定比例 + 不超高 + 圓角 + 裁切 */
#course-hero {
  margin-inline: auto;           /* 置中 */
  justify-self: center;          /* 若父層是 CSS Grid，確保自己居中 */
}

#course-info #course-hero img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 10px 10px 0 0;
}

/* 讓下面標題往下讓出 avatar 的一半高度 */
#course-info header > #course-hero + *{
  margin-top: calc(72px / 2 + 18px);
}
@media (max-width: 720px){
    #course-info #course-hero{
    max-height: min(25vh);
  }
}

/* ---- 課程資訊（仿截圖） ---- */
.course-info {
  margin: 20px 0 8px 0;
}

.course-info__title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: .2px;
}
.course-info__title::before{
  content:""; width: 4px; height: 18px; border-radius: 2px;
  background: var(--accent-blue);
  display:inline-block;
}

.info-list{
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.info-item .icon{
  width: 25px;
  height: 25px;
  border-radius: 12px;
  background: var(--accent-blue);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(59,179,195,.25);
}
.info-item .icon svg{
  width: 20px; height: 20px;
  stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.info-item .label{
  color: #374151;
  font-weight: 600;
}
.info-item .value{
  color: #111827;
  font-weight: 600;
}



.tabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #e5e7eb; /* 灰色基準線 */
  margin-bottom: 18px;
}

.tabs .tab {
  background: none;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 100;
  color: #6b7280; /* 預設灰字 */
  cursor: pointer;
  transition: color .2s ease;
  border-bottom: 2px solid transparent; /* 用來顯示直線 */
  border-radius: 0; /* ✅ 避免翹起來 */
}

.tabs .tab.active {
  color: #111827;               /* 深色文字 */
  font-weight: 700;
  border-bottom: 2px solid #3bb3c3; /* 主題色直線 */
}

.tabs .tab:hover {
  color: #111827;
}

.tab-content .tab-pane { display: none; }
.tab-content .tab-pane.active { display: block; }

.tabs-section {
  margin-top: 28px;
}

.teacher-box{
  max-width: 600px;
  margin: 12px auto;
  padding: 20px 80px 40px 80px;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* label 靠左，value 靠右 */
  gap: 10px;
}

.info-item .icon {
  flex: 0 0 auto;   /* 固定大小 */
}

.info-item .label {
  flex: 1;          /* 佔滿中間 */
  white-space: nowrap; /* 不換行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 太長用 … */
  font-size: 14px;
}

.info-item .value {
  flex: 0 0 auto;   /* 固定在最右邊 */
  white-space: nowrap;
  font-size: 14px;
}

.tab-items {
  display: inline-flex;
  gap: 10px;                  /* chip 與 chip 間距 */
  flex-wrap: wrap;
  padding: 0 0.5rem;
  justify-content: center;
  font-size: .8rem;
}

.tab-content {
  display: flex;
  justify-content: center;
}

/* 小螢幕時讓 value 換行到下一列也好看 */
@media (max-width: 720px){
  .teacher-box{
    padding: 10px 20px 30px 20px;
  }
}

/* ===== Pagination（維持原造型，只換主題色） ===== */
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 24px 0;
  font-size: 15px;
}

/* 一般狀態：主題色文字，透明底 */
.page-btn, .page-number{
  border: none;
  background: none;
  color: var(--accent-blue);     /* 原本 #007bff → 主題藍綠 */
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;            /* 保留原本 6px */
  transition: background .2s, color .2s;
}

/* hover：淡藍綠底 */
.page-number:hover:not(.active),
.page-btn:hover:not([disabled]){
  background-color: rgba(59,179,195,.10); /* ≈ var(--accent-blue) 的 10% */
}

/* active：實心主題色（維持原本的填色效果） */
.page-number.active{
  background: var(--accent-blue);
  color: #fff;
  cursor: default;
}

/* disabled：維持灰色但更柔和 */
.page-btn[disabled],
.page-number[disabled]{
  color: #aaa;
  cursor: default;
}

/* 焦點可及性 */
.page-btn:focus-visible,
.page-number:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,179,195,.28);
}

/* 讓 \n 變成可視的換行 */
#course-desc { white-space: pre-line; }
/* 如果還要保留多個空白字元，用 pre-wrap */

#course-desc li {
  margin-bottom: 0.5em;
}

#course-desc {
  list-style-position: outside; /* 數字在外側 */
  padding: 0 2rem;
}
#course-feature {
  padding: 0 1rem;
}

#course-desc li::marker {
  font-weight: bold;    /* 可加粗 */
  color: #555;
}

#progress-section {
  padding: 10px 20px 10px 20px;
  max-width: 720px;
  margin: 0 auto;
}

.lessons-content li::marker {
  font-size: 0.8em;     /* 改標號大小 */
  font-weight: bold;    /* 可加粗 */
  color: #555;          /* 改顏色 */
  font-family: 'Noto Sans TC', sans-serif; /* 可改字型 */
}

#course-summary {
  text-align: left;        /* 文字靠左 */
  margin: 1.5em 1.5em;
  white-space: pre-line;
  font-weight:600;
  color: var(--muted);
}

@media (max-width: 720px) {
  #course-summary {
    margin: 1em 1em;
  }
}

/* 讓容器成為定位參考 */
#course-info {position: relative;border-radius: var(--radius);}

/* 小巧的圓形 icon 按鈕（玻璃感、淡陰影） */
.icon-btn {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 8px;
  line-height: 0;
  cursor: pointer;
  color: var(--text-color, #333);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background .2s, transform .1s, box-shadow .2s;
}

/* 放在 hero 左上角，不會撞到圓角 */
.back-in-hero {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
}

.icon-btn:hover { background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.12); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { display:block; }

/* 手機微縮 */
@media (max-width: 720px) {
  .icon-btn { padding: 7px; }
  .back-in-hero { top: 8px; left: 8px; }
}


/* 父容器：用 grid 穩定 1~3 欄 */
#tab-equip .equip-groups {
  display: grid;
  gap: 16px 24px;                 /* row / col 間距 */
  grid-template-columns: 1fr;     /* 手機：單欄 */
  margin: 0 0 12px;
}

#tab-equip .equip-group { min-width: 0; }   /* 讓內容可縮，不會撐格子 */

#tab-equip .equip-title {
  font-weight: 500;
  color: #111827;
  margin: 4px 0 12px;
  white-space: nowrap;                       /* 標題不換行 */
  font-size: 14px;
  text-align: center;
}

#tab-equip .equip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;                             /* chip 間距 */
  min-width: 0;
  justify-content: center;
}

.badge.plan-type.series-course {
  background: var(--brand-3);
}

.badge.plan-type.one-day {
  background: var(--accent-blue); 
}

.lessons-section {
  /* padding: 5px 10px 5px 10px; */
  max-width: 760px;
  margin: 10px auto;
  border:1px solid #e6e6e6;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.lessons-section > h3{
  margin:0;
  padding: 13px 18px;
  font-size:16px;
  font-weight:600;
  color:#1f2937;
  border-bottom:1px solid #eee;
  background: #fafafa;
}

/* 列表重置 */
.lessons-content{
  list-style:none;
  margin:0;
  padding:0;
  display:block !important; /* 蓋掉 inline grid style */
  width: 100%;
}
.lessons-content > li{
  margin:0;
  padding:0;
  border-bottom:1px solid #f0f0f0;
}
.lessons-content > li:last-child{ border-bottom:none; }

.lessons-content .btn.lesson-btn {
  /* 不用 all:unset; 改成 reset 常見屬性即可 */
  background: none;
  border: none;
  outline: none;
  text-decoration: none;
  font: inherit;
  color: inherit;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  width: 100%;
  padding: 20px 50px;
  cursor: pointer;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* 左側章節編號 */
.lessons-content .btn.lesson-btn .chapter{
  font-weight:600;
  font-size: 12px;
  color: #6b7280;
  min-width: 36px;      /* 對齊整齊 */
  text-align:left;
  padding-left: 12px;
}

/* 中間標題 */
.lessons-content .btn.lesson-btn .title{
  white-space:normal;
  font-size: 14px;
  color:#111827;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight: 600;
  text-align: left;
}

/* 右側時間 */
.lessons-content .btn.lesson-btn .meta{
  display:flex;
  align-items:center;
}
.lessons-content .btn.lesson-btn .duration{
  font-size: 12px;
  color: var(--accent-blue);
}

/* hover / active */
.lessons-content .btn.lesson-btn:hover{ background:#f9fafb; }
.lessons-content .btn.lesson-btn:active{ background:#f3f4f6; }
.lessons-content .btn.lesson-btn:focus-visible{
  outline:2px solid #2563eb;
  outline-offset:-2px;
}

@media (min-width: 720px) {
  .lessons-section > h3{
    margin:0;
    padding: 16px 32px;
    font-size:16px;
    font-weight:600;
    color:#1f2937;
    border-bottom:1px solid #eee;
    background: #fafafa;
  }
}

.chip-items {
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 14px;
}

@media (hover:hover){
  .chip-items:hover{
   // background: var(--mint-100); /* hover 時亮一階 */
   // box-shadow: 0 4px 10px rgba(46,125,50,.15);
  }
}

/* 讓按鈕有空間放三角形 */
.lessons-content .lesson-toggle {
  position: relative;
  text-align: left;
  padding-left: 32px;            /* 給箭頭留空間 */
}

/* 左邊的收折三角形（預設向右 ▶） */
.lessons-content .lesson-toggle::before {
  content: '▸';                  /* 也可用 ▶ 或用 SVG 當背景 */
  position: absolute;
  left: 30px;                    /* 與 padding-left 對齊 */
  top: 50%;
  transform: translateY(-55%) rotate(0deg);
  transition: transform .2s ease, opacity .2s ease;
  font-size: 22px;
  line-height: 1;
  opacity: .8;
  pointer-events: none;
}

/* 展開時改成向下 ▼（其實是旋轉 90°） */
.lessons-content li.open > .lesson-toggle::before,
.lessons-content .lesson-toggle[aria-expanded="true"]::before {
  transform: translateY(-50%) rotate(90deg);
}

/* 沒內容（no-content）就把箭頭淡出，游標也改成預設 */
.lessons-content .lesson-toggle.no-content {
  cursor: default;
}
.lessons-content .lesson-toggle.no-content::before {
  opacity: 0.2;                  /* 或直接 display:none; 想完全隱藏就改這個 */
}

.lessons-content .lesson-content {
  padding: 20px 25px 20px 70px;     /* 左邊對齊箭頭/標題 */
  color: #374151;
  font-size: 14px;
  background: #f9fafb;
  border-left: 3px solid #93c5fd;
  border-radius: 4px;
}

@media (max-width: 720px){
  .lessons-content{
    grid-template-columns:1fr !important; /* ✅ 強制單欄 */
  }
  .lessons-content .btn.lesson-btn{
    padding: 14px 18px;
    gap: 12px;
  }
  .lessons-content .btn.lesson-btn .chapter{
    min-width:auto;
  }
  .lessons-content .btn.lesson-btn .meta{
    justify-content:flex-start;   /* ✅ 時長左對齊 */
  }
  .lessons-content .lesson-content {
    padding: 10px 12px 10px 32px;     /* 左邊對齊箭頭/標題 */
  }
}

#cost-calculator { margin-top: 16px; }
#cost-calculator .calc-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
  /* padding: 0 3rem 0 3rem; */
}
#cost-calculator .calc-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}
#cost-calculator .calc-field input{
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font: inherit;
}
#cost-calculator .calc-result{
  padding: 10px 22px 16px;
  border: 1px dashed #ddd;
  border-radius: 10px;
  background: rgba(0,0,0,0.02);
  margin: 14px 2px;
}
#cost-calculator .calc-result .lines{
  margin-top: 6px;
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
#cost-calculator .calc-result .lines > div{
  display: flex; align-items: center; justify-content: space-between;
}
#cost-calculator .calc-result .total strong{font-size: 0.8rem;}
#cost-calculator .formula{color: #666;font-size: .8rem;}

@media (min-width: 720px) {
  .info-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 60px;
    padding: 0.5rem 2rem 0.5rem 1.5rem;
  }
  .course-meta {
    padding: 0 2rem;
  }
  #course-desc {
    padding: 0 2.5rem;
  }
  #course-feature {
    padding: 0 2rem;
  }
  .lessons-content .btn {
    padding: 14px 24px;
    /* margin-left: 1em; */
  }

  #cost-calculator .calc-grid{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 32px;
    margin-top: 8px;
    padding: 0.2rem 3.5rem 0.2rem 3.5rem;
  }
  
  #cost-calculator .calc-result{
    padding: 10px 26px 18px;
    margin: 18px 130px;
  }
}

#teacher-box-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 整體靠左 */
  gap: 0.4em;
}

.teacher-line {
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: left;
}

/* 乘號改為跟前後老師文字水平對齊 */
.teacher-sep {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 與文字左對齊 */
  margin-left: 3.5em;          /* ← 微調，讓 × 對齊上面 "汎汎｜..." 的中間 */
  color: #999;
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1;              /* 緊湊一點 */
}

/* 你的既有尺寸設定保留，只加 overflow 與下緣空間 */
#course-info #course-hero{
  position: relative;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
  aspect-ratio: 16 / 9;
  max-height: min(40vh);
  overflow: visible;                   /* 讓探出的頭像不被裁掉 */
  --hero-av-size: 110px;                /* 頭像尺寸（可依需要調） */
  --hero-av-gap: 12px;                 /* 並排間距（不想重疊時用） */
  margin-bottom: calc(var(--hero-av-size) / 2 + 8px); /* 下方預留空間 */
}

/* 圖片鋪滿容器 */
#course-info #course-hero > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 多顆頭像容器（置中貼底，往下探出 50%） */
#course-info #course-hero .hero-avatar{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);     /* 以自身高的一半探出容器 */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;                 /* 避免擋到點擊；要可點就移除 */
}

/* 單顆頭像樣式 */
#course-info #course-hero .hero-avatar img{
  width: var(--hero-av-size);
  height: var(--hero-av-size);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  background: #fff;
  object-fit: cover;
  pointer-events: auto;
  transition: transform .2s;
}

#course-info #course-hero .hero-avatar img + img{
  margin-left: -20px; 
}
@media (max-width: 620px){
  .grid{
    gap: 0px;
  }
}
@media (max-width: 720px){
  #course-info #course-hero{
    max-height: min(25vh);
    --hero-av-size: 80px;
    margin-bottom: calc(var(--hero-av-size) / 2 + 6px);
  }
  #course-info #course-hero .hero-avatar img + img{
    margin-left: -15px;
  }
  .course-card{
    border: 0;
    background: none;
    box-shadow: none;
  }
  .card:not(.feature-grid .card):not(.hero) {
    border-radius: 0;
    border: 0;
    background: #fff;
    box-shadow: none;
  }
  .hero{
    border-radius: 0;
  }
  .feature-grid{
    gap: 12px;
    padding: 0px 10px;
  }
  .hero{
    background: linear-gradient(135deg, #e9f9f4, #ffffff);
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
  }
  .course-card .course-body{padding: 8px 16px 22px 18px;}
  .key-bar{
    padding: 18px;
  }
  .flow-md h2 {
    padding: 0px 12px;
  }
  .flow-md h2::after {
    left: 12px;
  }
  .link-more{
    margin: 0 12px 0 0;
  }
  .lessons-section{
    margin: 10px 10px;
  }
  #course-info #course-hero img{
    /* border-radius: 0; */
  }
  #teachers .course-card.card{
   box-shadow: var(--shadow-sm);
   background: #fff;
   border: 1px solid rgba(0,0,0,.08);
  }

  #teachers .grid{
   gap: 10px;
   padding: 0px 10px;
  }
  .teacher-card{
    margin: 0px 10px;
  }
  #enroll-btn{
   padding: 12px 90px;
   font-size: 16px;
  }
  #course-info {margin: 10px 10px;}
  .lessons-content .lesson-toggle::before {
    left: 12px;
  }
}

/* 整體外觀 */
#tab-equip {
  /*background-color: #f8f9fa;*/
  padding: 1em;
}

/* 每一組（卡片） */
.equip-group {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* 標題 */
.equip-title {
  border-bottom: 1px solid #111827;
  padding-bottom: 0.4em;
}

.lessons-content .btn.rest {
  border-radius: 0;
  /* font-weight: 600; */
  color: var(--ink);
  background: #fafafa;
  transition: none;
}

.lessons-content .btn.rest:hover,
.lessons-content .btn.rest:focus,
.lessons-content .btn.rest:focus-visible,
.lessons-content .btn.rest:active {
  background: #fafafa; !important; /* 保持原色 */
  color: var(--ink) !important;
  transform: none !important;             /* 不位移、不縮放 */
  box-shadow: none !important;            /* 無陰影跳動 */
  filter: none !important;                /* 無模糊/亮度特效 */
  outline: none !important;               /* 取消藍色外框 */
  border-width: inherit !important;       /* 避免邊框變粗變細 */
  transition: none !important;            /* 確保沒有過渡動畫 */
  cursor: default;                        /* 看起來是靜態元素 */
}

/* 系列課主題（柔和版） */
.is-series {
  --theme-color: #4caf50;           /* 主色：綠 */
  --theme-bg-light: #f3faf4;        /* 背景：更淡的綠白 */
  --theme-bg-medium: #dcefe0;       /* 邊框／hover 用 */
  --theme-text-strong: #1b5e20;     /* 深綠標題 */
}

#course-info.is-series,
#teacher-box.is-series {
  background: linear-gradient(135deg, #f8fcf9 0%, #edf8ef 100%);

  border: 1px solid var(--theme-bg-medium);
}

#course-info.is-series .course-info__title,
#teacher-box.is-series .teacher-line {
  color: var(--theme-text-strong);
}

#course-info.is-series .badge.plan-type {
  background-color: var(--theme-color);
  color: white;
}

/* Hover 狀態（略微提亮） */
#course-info.is-series:hover,
#teacher-box.is-series:hover {
  background: linear-gradient(135deg, #f8fcf9 0%, #edf8ef 100%);
}

/* 一日工作坊主題（柔和版） */
.is-one-day {
  --theme-color: #3bb3c3;           /* 主色：青藍 */
  --theme-bg-light: #f4fbfc;        /* 背景：更淡的青白 */
  --theme-bg-medium: #d8f1f4;       /* 邊框／hover 用 */
  --theme-text-strong: #00373d;     /* 深青標題 */
}

#course-info.is-one-day,
#teacher-box.is-one-day {
  background: linear-gradient(135deg, #f9fdfd 0%, #eef9fa 100%);

  border: 1px solid var(--theme-bg-medium);
}

#course-info.is-one-day .course-info__title,
#teacher-box.is-one-day .teacher-line {
  color: var(--theme-text-strong);
}

#course-info.is-one-day .badge.plan-type {
  background-color: var(--theme-color);
  color: white;
}

/* Hover 狀態（略微提亮） */
#course-info.is-one-day:hover,
#teacher-box.is-one-day:hover {
  background: linear-gradient(135deg, #f9fdfd 0%, #eef9fa 100%);
}
/* 系列課 chip 樣式 */
.is-series .chip.chip-items {
  background-color: #e9f7eb;     /* 淡綠底 */
  border: 2px solid #c8e6ca;     /* 柔綠邊框 */
  color: #2e7d32;                /* 深綠文字 */
}

/* hover 狀態：稍微強一點的綠 */
.is-series .chip.chip-items:hover {
  background-color: #dff3e3;
  border-color: #b7e0b8;
  color: #1b5e20;
}
/* 一日工作坊 chip 樣式 */
.is-one-day .chip.chip-items {
  background-color: #edfafa;     /* 淡青底 */
  border: 2px solid #cceef1;     /* 淡藍邊框 */
  color: #006f7d;                /* 深青文字 */
}

/* hover 狀態：微亮一點的青 */
.is-one-day .chip.chip-items:hover {
  background-color: #e1f4f6;
  border-color: #b7e7eb;
  color: #005861;
}

/* 一日工作坊 input 樣式 */
.is-one-day input,
.is-one-day select,
.is-one-day textarea {
  border: 1px solid #cceef1;
  background-color: #f9fdfd;
  color: #005861;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.is-one-day input::placeholder,
.is-one-day textarea::placeholder {
  color: #7aaeb3;
}

.is-one-day input:focus,
.is-one-day select:focus,
.is-one-day textarea:focus {
  border-color: #3bb3c3;
  box-shadow: 0 0 0 3px rgba(59, 179, 195, 0.15);
  outline: none;
  background-color: #f4fbfc;
}

/* 系列課 input 樣式 */
.is-series input,
.is-series select,
.is-series textarea {
  border: 1px solid #c8e6ca;
  background-color: #f8fcf9;
  color: #1b5e20;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.is-series input::placeholder,
.is-series textarea::placeholder {
  color: #7fae83;
}

.is-series input:focus,
.is-series select:focus,
.is-series textarea:focus {
  border-color: #4caf50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
  outline: none;
  background-color: #f3faf4;
}
.is-series .equip-group {
  background: linear-gradient(135deg, #fbfdfc 0%, #f3faf5 100%);
  border: 1px solid #cfe9d4;
  box-shadow: 0 1px 4px rgba(46, 125, 50, 0.08); /* 綠色陰影調 */
}

.is-series #cost-calculator .calc-result {
  border-color: #c8e6ca;
  background: linear-gradient(135deg, #f9fcfa 0%, #f4faf6 100%);
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.05);
}

.is-one-day .equip-group {
  background: linear-gradient(135deg, #fcfefe 0%, #f3fbfc 100%);
  border: 1px solid #d2eef0;
  box-shadow: 0 1px 4px rgba(59, 179, 195, 0.08); /* 青色陰影調 */
}
.is-one-day #cost-calculator .calc-result {
  border-color: #cceef1;
  background: linear-gradient(135deg, #fafefe 0%, #f4fbfc 100%);
  box-shadow: 0 0 4px rgba(59, 179, 195, 0.05);
}

#course-type .card{
  position: relative;
  //
  padding-bottom: 40px; /* 為箭頭留空間 */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* padding: 12px 24px 40px 24px; */
}
#course-type .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

#course-type .plan-type {
  margin: 0px 0 18px;
}

#teachers .grid{
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.badges-one-day {
  display: inline-block;
  position: relative;
  margin: 0px 0 0 3px;
  align-self: start;
}

.course-card .title-row .badge.badgeImg-one-day {
  width: 26px;
  height: 26px;
  border-radius: 0;
  display: inline-block;
  position: relative;
  z-index: 1;
  background: none;       /* 移除背景 */
  padding: 0;             /* 移除文字徽章的 padding */
  border: none;           /* 不要邊框 */
  /* align-self: end; */
}

/* 讓第一張往右疊在第二張上 */
.course-card .title-row .badge.badgeImg-one-day:first-child {
  margin-right: -11px; /* 往右疊 */
  z-index: 2;          /* 第一張在上層 */
}

.course-card .title-row .badge.badgeImg-one-day:last-child {
  z-index: 1;          /* 第二張在下層 */
}

/* 手機：依內容寬度展開 + 右側留白 */
@media (max-width: 720px){
  .sticky-chips__inner_k{
    width: max-content;     /* 關鍵：用內容撐寬 */
    max-width: none;
    margin: 0;              /* 取消置中，不然會被壓回容器寬 */
    padding-right: 10px;    /* 這時候才會真的在最右邊留空 */
  }

  .feature-grid{
    grid-template-columns: none;            /* 取消固定欄數 */
    grid-auto-flow: column;                 /* 讓卡片往橫向排 */
    grid-auto-columns: min(90%, 320px);     /* 每張卡片寬度（可調） */
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;          /* 滑到卡片邊緣 */
    scrollbar-width: none;                  /* Firefox 隱藏捲軸 */
  }

}

.feature.card {
  position: relative;
  padding-bottom: 25px; /* 為箭頭留空間 */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.icon-arrow {
  position: absolute;
  bottom: 12px;
  right: 16px;

  width: 18px;         /* 可依卡片大小微調 */
  height: 18px;
  color: var(--accent-color, #666);

  transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
  opacity: 0.9;
  pointer-events: none; /* 不干擾卡片點擊 */
}
/* === 老師頁 Hero：等同課程頁設定 === */

/* 1) 基本容器（對應 #course-info） */
#teacher-hero {
  position: relative;
  border-radius: var(--radius);
}

/* 2) 置頂主圖容器（對應 #course-hero） */
#teacher-cover {
  margin-inline: auto;          /* 置中（與 #course-hero 一致） */
  justify-self: center;         /* 若父層是 Grid，確保自己居中 */
}

/* 3) 共同尺寸/探出空間/變數（課程＋老師一起套用） */
#course-info #course-hero,
#teacher-hero #teacher-cover {
  position: relative;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
  aspect-ratio: 16 / 9;
  max-height: min(40vh);
  overflow: visible;                     /* 讓探出的頭像不被裁掉 */
  --hero-av-size: 110px;                 /* 頭像尺寸（可依需要調） */
  --hero-av-gap: 12px;                   /* 並排間距（不想重疊時用） */
  margin-bottom: calc(var(--hero-av-size) / 2 + 8px); /* 下方預留空間 */
}

/* 4) 圖片鋪滿容器 */
#course-info #course-hero > img,
#teacher-hero #teacher-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px 10px 0 0;         /* 與課程頁一致的上圓角 */
}

/* 5) 若有多顆頭像（可選，用於探出效果） */
#course-info #course-hero .hero-avatar,
#teacher-hero #teacher-cover .hero-avatar {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#course-info #course-hero .hero-avatar img,
#teacher-hero #teacher-cover .hero-avatar img {
  width: var(--hero-av-size);
  height: var(--hero-av-size);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  background: #fff;
  object-fit: cover;
  pointer-events: auto;
  transition: transform .2s;
}
#course-info #course-hero .hero-avatar img + img,
#teacher-hero #teacher-cover .hero-avatar img + img {
  margin-left: -20px;
}

/* 6) 標題往下讓出頭像空間（與課程頁一致） */
#teacher-hero header > #teacher-cover + * {
  margin-top: calc(72px / 2 + 18px);
}

/* 7) 行動版高度與變數縮小 */
@media (max-width: 720px){
  #course-info #course-hero,
  #teacher-hero #teacher-cover {
    max-height: min(25vh);
    --hero-av-size: 80px;
    margin-bottom: calc(var(--hero-av-size) / 2 + 6px);
  }
  #course-info #course-hero .hero-avatar img + img,
  #teacher-hero #teacher-cover .hero-avatar img + img {
    margin-left: -15px;
  }
}
#teacher-desc.muted {
  white-space: pre-line;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
}
.link-chip:hover { background: #f9fafb; }
.link-chip svg { display:inline-block; vertical-align:middle; }

#teacher-meta .badgeImg {
  margin: 0;
}

  #teachers .course-card.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  }

.cat-type {
  margin: 0px 0 0 10px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.18), /* 底邊內陰影，更立體 */    0 1px 2px rgba(0,0,0,.18);      /* 外陰影 */
}


#teacher-grid .course-card p.muted{
  margin-bottom: 12px;
}

#teacher-summary {
  text-align: left;        /* 文字靠左 */
  margin: 1.5em 1.5em;
  white-space: pre-line;
  font-weight:600;
  color: var(--muted);
}

@media (max-width: 720px) {
  #teacher-summary {
    margin: 1em 1em;
  }
}

a.link {
  color: var(--muted);         /* 主題藍 */
  text-decoration: none;   /* 移除底線 */
  transition: color 0.2s, text-decoration 0.2s;
}

a.link:hover,
a.link:focus {
  text-decoration: underline;
  color: var(--muted);          /* 滑過變深藍 */
}

/* Social section */
.social-section {
  /* padding: 16px 0 4px; */
  max-width: 800px;
}
.social-title {
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.social-links {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: 10px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  font-size: 12px;
}
.social-btn:hover {
  transform: translateY(-1px);
}

/* Icon size */
.social-btn svg {
  width: 32px;
  height: 32px;
  display: block;
}

/* Facebook brand color（用填色路徑） */
.social-btn.fb svg path {
  fill: #1877F2; /* FB 藍 */
}
#teachers .course-card .course-body{padding: 16px 16px 18px 18px;}

.sticky-chips__inner_k .chip{
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sticky-chips__inner_k .chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.chip svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}