/* ============================================================
   LONG JIE ACADEMY  —  Main Stylesheet  v2.0
   Based on CIS Design System v1.0
   ============================================================ */

/* ──────────────── Design Tokens ──────────────── */
:root{
  /* Colors */
  --color-primary:#0A0A0A;
  --color-primary-soft:#1C1C1E;
  --color-primary-tint:#2A2A2C;
  --color-gold:#B8935A;
  --color-gold-light:#D4B584;
  --color-gold-dark:#8E6F40;
  --color-gold-bg:#F7F1E6;
  --color-burgundy:#6B1F2A;
  --color-burgundy-bg:#F8EBED;
  /* 品牌標誌紅（取自瀧捷 LOGO 水滴印記）— 作為識別簽名色，點綴使用 */
  --color-brand:#C8202E;
  --color-brand-dark:#A5161F;
  --color-brand-bg:#FBEBEC;

  --bg-base:#FAFAF7;
  --bg-elevated:#FFFFFF;
  --bg-subtle:#F5F2EC;
  --bg-section:#EFEBE2;
  --bg-inverse:#0A0A0A;

  --text-primary:#0A0A0A;
  --text-secondary:#3D3A35;
  --text-tertiary:#5F5A52;
  --text-muted:#8A8478;
  --text-inverse:#FAFAF7;

  --border-subtle:rgba(10,10,10,.06);
  --border-base:rgba(10,10,10,.10);
  --border-strong:rgba(10,10,10,.18);
  --border-inverse:rgba(250,250,247,.12);

  --color-success:#2D6A4F;
  --color-success-bg:#E6F1EC;
  --color-warning:#C68B2C;
  --color-warning-bg:#FBF1DE;
  --color-danger:#A4243B;
  --color-danger-bg:#F8E4E8;
  --color-info:#2C5F7C;
  --color-info-bg:#E1ECF3;
  --color-line:#06C755;

  /* Typography */
  --font-display:"Playfair Display","Noto Serif TC",serif;
  --font-sans:"Inter","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --font-h1:clamp(2.5rem,4vw + 1rem,4.5rem);
  --font-h2:clamp(2rem,2.5vw + 1rem,3.25rem);
  --font-h3:clamp(1.5rem,1.5vw + 1rem,2.25rem);
  --font-h4:1.5rem;
  --font-h5:1.25rem;
  --font-h6:1.125rem;
  --font-body-lg:1.125rem;
  --font-body:1rem;
  --font-small:.875rem;
  --font-caption:.75rem;
  --font-button:.9375rem;

  --lh-display:1.1;
  --lh-heading:1.25;
  --lh-body:1.65;
  --ls-display:-.02em;
  --ls-heading:-.01em;
  --ls-button:.02em;
  --ls-eyebrow:.18em;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;
  --space-9:80px;--space-10:96px;--space-11:128px;--space-12:160px;

  /* Radius */
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;
  --radius-xl:16px;--radius-2xl:24px;--radius-full:9999px;

  /* Shadow */
  --shadow-xs:0 1px 2px rgba(10,10,10,.04);
  --shadow-sm:0 2px 6px rgba(10,10,10,.05),0 1px 2px rgba(10,10,10,.04);
  --shadow-md:0 6px 16px rgba(10,10,10,.06),0 2px 4px rgba(10,10,10,.04);
  --shadow-lg:0 14px 32px rgba(10,10,10,.08),0 4px 8px rgba(10,10,10,.04);
  --shadow-xl:0 24px 56px rgba(10,10,10,.12),0 8px 16px rgba(10,10,10,.06);
  --shadow-2xl:0 40px 80px rgba(10,10,10,.18);
  --shadow-gold:0 8px 24px rgba(184,147,90,.32);

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:150ms var(--ease-out);
  --t-base:300ms var(--ease-out);
  --t-slow:500ms var(--ease-out);
  --t-slower:800ms var(--ease-out);

  /* Z-index */
  --z-sticky:100; --z-fixed:200; --z-overlay:300;
  --z-modal:400; --z-popover:500; --z-toast:600;

  /* Layout */
  --header-h:80px;
  --container-xl:1280px;
}

/* ──────────────── Reset ──────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--font-body);
  line-height:var(--lh-body);
  color:var(--text-primary);
  background:var(--bg-base);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--color-gold);color:var(--color-primary)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-subtle)}
::-webkit-scrollbar-thumb{background:rgba(10,10,10,.18);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:rgba(10,10,10,.32)}

/* ──────────────── Typography ──────────────── */
h1,.h1{font-family:var(--font-display);font-size:var(--font-h1);font-weight:500;line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h2,.h2{font-family:var(--font-display);font-size:var(--font-h2);font-weight:500;line-height:var(--lh-heading);letter-spacing:var(--ls-display)}
h3,.h3{font-family:var(--font-display);font-size:var(--font-h3);font-weight:500;line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
h4,.h4{font-size:var(--font-h4);font-weight:600;line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
h5,.h5{font-size:var(--font-h5);font-weight:600;line-height:1.3}
h6,.h6{font-size:var(--font-h6);font-weight:600;line-height:1.3}

i{font-style:italic}
.italic-serif{font-family:var(--font-display);font-style:italic;font-weight:400}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:11px;font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--color-gold-dark);
  margin-bottom:var(--space-4);
}
.eyebrow::before{content:"";width:32px;height:1px;background:currentColor}
.eyebrow--center{justify-content:center}
.eyebrow--light{color:var(--color-gold)}

.lead{font-size:var(--font-body-lg);color:var(--text-secondary);line-height:var(--lh-body);max-width:65ch}
.muted{color:var(--text-muted)}
.text-center{text-align:center}
.text-center .lead{margin-left:auto;margin-right:auto}

/* ──────────────── Layout ──────────────── */
.container{max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-7)}
.section{padding:var(--space-10) 0}
.section--sm{padding:var(--space-8) 0}
.section--dark{background:var(--bg-inverse);color:var(--text-inverse)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--text-inverse)}
.section--dark .lead{color:rgba(250,250,247,.7)}
.section--dark .eyebrow{color:var(--color-gold)}
.section--subtle{background:var(--bg-subtle)}
.section--gold{background:var(--color-gold-bg)}

.section-header{margin-bottom:var(--space-8);max-width:720px}
.section-header--center{margin:0 auto var(--space-8);text-align:center}
.section-header h2{margin-bottom:var(--space-4)}

/* ──────────────── Header / Nav ──────────────── */
.header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:rgba(10,10,10,.18);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  z-index:var(--z-fixed);
  transition:background var(--t-base),border-color var(--t-base);
}
.header.is-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--border-base);
}
.header.is-scrolled .brand__name,
.header.is-scrolled .nav__link{color:var(--text-primary)}
.header.is-scrolled .brand__sub{color:var(--text-muted)}

.header__inner{
  max-width:var(--container-xl);margin:0 auto;height:100%;
  padding:0 var(--space-7);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
}
/* 品牌 LOGO（圖片）— 去背無底框；頂部深色時反白、捲動白底時原彩色 */
.brand{display:inline-flex;align-items:center}
.brand__logo{
  height:48px;width:auto;display:block;flex:0 0 auto;max-width:none;
  transition:filter var(--t-base);
}
/* 頂部覆蓋於深色 Hero：保留原彩色 LOGO（紅色印記不變），以白色柔光襯托使深色字清晰 */
.header:not(.is-scrolled) .brand__logo{
  filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(255,255,255,.6));
}
/* 捲動後白底 → 乾淨無陰影 */
.header.is-scrolled .brand__logo{filter:none}
/* 舊版文字標誌樣式（保留向下相容） */
.brand__mark{
  width:38px;height:38px;border-radius:50%;
  background:var(--color-gold);
  display:grid;place-items:center;
  color:var(--color-primary);
  font-family:var(--font-display);
  font-size:18px;font-weight:700;letter-spacing:-.02em;
}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-family:var(--font-display);font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em;transition:color var(--t-base)}
.brand__sub{font-size:10px;color:rgba(255,255,255,.7);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-top:2px;transition:color var(--t-base)}

.nav{display:flex;align-items:center;gap:var(--space-7)}
.nav__link{
  font-size:14px;font-weight:500;
  color:rgba(255,255,255,.85);
  position:relative;padding:6px 0;
  transition:color var(--t-fast);
}
.nav__link:hover, .nav__link.is-active{color:#fff}
.header.is-scrolled .nav__link:hover, .header.is-scrolled .nav__link.is-active{color:var(--text-primary)}
.nav__link.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--color-gold);
}
.nav__cta{display:flex;align-items:center;gap:var(--space-3)}

.mobile-toggle{display:none;width:40px;height:40px;border-radius:var(--radius-md);align-items:center;justify-content:center}
.mobile-toggle span{display:block;width:18px;height:1.5px;background:#fff;position:relative;transition:var(--t-fast)}
.mobile-toggle span::before, .mobile-toggle span::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:#fff;transition:var(--t-fast)}
.header.is-scrolled .mobile-toggle span,
.header.is-scrolled .mobile-toggle span::before,
.header.is-scrolled .mobile-toggle span::after{background:var(--text-primary)}
.mobile-toggle span::before{top:-6px}
.mobile-toggle span::after{top:6px}
.mobile-toggle.is-open span{background:transparent}
.mobile-toggle.is-open span::before{transform:rotate(45deg);top:0}
.mobile-toggle.is-open span::after{transform:rotate(-45deg);top:0}

/* ──────────────── Buttons ──────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:48px;padding:0 var(--space-6);
  font-family:var(--font-sans);font-size:var(--font-button);font-weight:500;
  letter-spacing:var(--ls-button);
  border-radius:var(--radius-full);
  cursor:pointer;user-select:none;
  transition:var(--t-base);
  white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}
.btn--sm{height:38px;padding:0 var(--space-4);font-size:13px}
.btn--lg{height:56px;padding:0 var(--space-7);font-size:16px}
.btn--block{width:100%}

.btn--primary{background:var(--color-primary);color:var(--text-inverse)}
.btn--primary:hover{background:var(--color-primary-soft);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn--secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-strong)}
.btn--secondary:hover{background:var(--color-primary);color:var(--text-inverse);border-color:var(--color-primary)}
.btn--outline{background:transparent;color:var(--text-primary);border:1px solid var(--color-primary)}
.btn--outline:hover{background:var(--color-primary);color:var(--text-inverse)}
.btn--gold{background:var(--color-gold);color:var(--color-primary)}
.btn--gold:hover{background:var(--color-gold-dark);color:var(--text-inverse);box-shadow:var(--shadow-gold)}
.btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(255,255,255,.16);border-color:var(--color-gold)}
.btn--text{background:transparent;height:auto;padding:8px 0;border-radius:0;color:var(--text-primary)}
.btn--text::after{content:"";display:block;width:100%;height:1px;background:currentColor;transform:scaleX(.4);transform-origin:left;transition:var(--t-base);margin-top:4px}
.btn--text:hover::after{transform:scaleX(1)}
.btn--line{background:var(--color-line);color:#fff}
.btn--line:hover{background:#05a847;box-shadow:0 8px 24px rgba(6,199,85,.32)}

.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

.btn .ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.4);transform:scale(0);animation:ripple .6s var(--ease-out)}
.btn--secondary .ripple,.btn--outline .ripple,.btn--gold .ripple{background:rgba(10,10,10,.18)}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ════════════════════════════════════════════════════════════
   HERO  ·  with background image + dark overlay + parallax
   ════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding:calc(var(--header-h) + var(--space-9)) 0 var(--space-10);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0;
  z-index:-2;
  background-image:
    url("https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=2000&q=80");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  will-change:transform;
  transform:translateY(var(--parallax,0px)) scale(1.08);
  transition:transform .1s linear;
  filter:saturate(.85);
}
.hero__overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.72) 60%, rgba(10,10,10,.88) 100%),
    radial-gradient(60% 50% at 80% 30%, rgba(184,147,90,.18), transparent 70%);
}
.hero__overlay::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent 0, transparent 80px, rgba(255,255,255,.012) 80px, rgba(255,255,255,.012) 81px);
}
.hero__inner{position:relative;z-index:1;width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-7)}
.hero__eyebrow{
  font-size:12px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--color-gold);
  display:flex;align-items:center;gap:var(--space-3);
  margin-bottom:var(--space-6);
}
.hero__eyebrow::before{content:"";width:48px;height:1px;background:var(--color-gold)}
.hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(3rem, 7vw, 6.75rem);line-height:1.02;letter-spacing:-.03em;
  margin-bottom:var(--space-5);max-width:14ch;
  text-shadow:0 4px 24px rgba(0,0,0,.4);
}
.hero__title i{font-style:italic;color:var(--color-gold-light);font-weight:400}
.hero__sub{
  font-size:var(--font-body-lg);
  color:rgba(255,255,255,.82);
  max-width:50ch;margin-bottom:var(--space-7);
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-9)}
.hero__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--space-5);
  padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.18);
  max-width:760px;
}
.hero__stat-num{font-family:var(--font-display);font-size:36px;font-weight:500;color:#fff;line-height:1}
.hero__stat-num span{color:var(--color-gold);font-size:.6em}
.hero__stat-label{font-size:11px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-gold);margin-top:6px}

.hero__scroll{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:rgba(255,255,255,.6);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  z-index:1;
}
.hero__scroll::after{
  content:"";width:1px;height:32px;
  background:linear-gradient(to bottom, rgba(184,147,90,.9), transparent);
  animation:scrollLine 2s infinite;
}
@keyframes scrollLine{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ════════════════════════════════════════════════════════════
   BRAND INTRO  ·  品牌介紹（圖文交錯）
   ════════════════════════════════════════════════════════════ */
/* 關於瀧捷：圖片欄收窄，讓它不再比右側文字欄高出一截 */
#about{padding:var(--space-8) 0}
.brand-intro{display:grid;grid-template-columns:.72fr 1fr;gap:var(--space-7);align-items:center}
.brand-intro__visual{
  /* 6/7 比原本的 4/5 更接近原圖比例（約 0.87），
     所以高度變矮的同時，左右反而裁得更少，不會切到底部書法字 */
  position:relative;aspect-ratio:6/7;border-radius:var(--radius-xl);overflow:hidden;
  background:linear-gradient(135deg,#3D3A35,#0A0A0A);
}
.brand-intro__visual img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform 1.2s var(--ease-out);
}
.brand-intro__visual:hover img{transform:scale(1.04)}
.brand-intro__placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:30px;
  color:rgba(255,255,255,.55);letter-spacing:.04em;text-align:center;line-height:1.3;
}
.brand-intro__placeholder span{font-size:14px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-gold-light)}
.brand-intro__badge{
  position:absolute;bottom:24px;left:24px;
  background:rgba(10,10,10,.85);color:var(--color-gold);
  padding:14px 18px;border-radius:var(--radius-md);
  font-family:var(--font-display);font-weight:500;
  backdrop-filter:blur(8px);
  border:1px solid rgba(184,147,90,.3);
}
.brand-intro__badge-num{font-size:28px;line-height:1}
.brand-intro__badge-label{font-size:11px;color:#fff;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-top:4px;font-family:var(--font-sans)}

.brand-intro__content h2 i{font-style:italic;color:var(--color-gold-dark);font-weight:400}
.brand-intro__pillars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--space-4)}
.pillar{padding:var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:var(--t-base);text-align:center}
.pillar:hover{border-color:var(--color-gold);transform:translateY(-3px);box-shadow:var(--shadow-md)}
.pillar__icon{
  width:32px;height:32px;border-radius:var(--radius-md);
  background:var(--color-gold-bg);color:var(--color-gold-dark);
  display:grid;place-items:center;font-size:16px;
  /* 圖示是固定寬度的方塊，靠 text-align 置中無效，需自動左右邊界 */
  margin:0 auto 10px;
}
.pillar__title{font-weight:600;font-size:14px;margin-bottom:3px}
.pillar__desc{font-size:12px;color:var(--text-tertiary);line-height:1.5}

/* ════════════════════════════════════════════════════════════
   VALUE PROPS  ·  四大價值
   ════════════════════════════════════════════════════════════ */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-5)}
.value-card{
  padding:var(--space-6) var(--space-5);
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  transition:var(--t-base);
}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-gold)}
.value-card__num{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--color-gold);letter-spacing:.05em;display:block;margin-bottom:var(--space-4)}
.value-card__title{font-family:var(--font-display);font-size:22px;font-weight:600;margin-bottom:var(--space-3);line-height:1.3}
.value-card__desc{font-size:14px;color:var(--text-tertiary);line-height:1.7}

/* ════════════════════════════════════════════════════════════
   COURSES  ·  with status, date, location, badge
   ════════════════════════════════════════════════════════════ */
.courses-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:var(--space-5);
}
.course-card{
  background:var(--bg-elevated);
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border-subtle);
  transition:var(--t-base);
  display:flex;flex-direction:column;
}
.course-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.course-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0A0A0A}
.course-card__img{
  /* contain：完整顯示整張圖不裁切；深色底填滿留白處 */
  width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform var(--t-slow);
}
.course-card:hover .course-card__img{transform:scale(1.06)}
.course-card__cover{
  width:100%;height:100%;
  display:grid;place-items:center;
  color:var(--color-gold);
  font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:.04em;
  transition:transform var(--t-slow);
  position:relative;
}
.course-card__cover::after{content:"";position:absolute;inset:16px;border:1px solid rgba(184,147,90,.3)}
.course-card:hover .course-card__cover{transform:scale(1.06)}
.course-card__badge{
  position:absolute;top:14px;left:14px;z-index:1;
  padding:5px 12px;background:rgba(10,10,10,.85);color:var(--color-gold);
  font-size:10px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  border-radius:var(--radius-sm);
  backdrop-filter:blur(8px);
}
.course-card__status{
  position:absolute;top:14px;right:14px;z-index:1;
  padding:5px 12px;font-size:10px;font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  border-radius:var(--radius-sm);
  backdrop-filter:blur(8px);
}
.status--open{background:rgba(45,106,79,.92);color:#fff}
.status--soon{background:rgba(198,139,44,.92);color:#fff}
.status--full{background:rgba(164,36,59,.92);color:#fff}
.status--ended{background:rgba(95,90,82,.92);color:#fff}
.course-card__body{padding:var(--space-5);flex:1;display:flex;flex-direction:column}
.course-card__eyebrow{font-size:11px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-gold-dark);margin-bottom:var(--space-2)}
.course-card__title{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.3;margin-bottom:var(--space-3)}
.course-card__desc{font-size:13.5px;color:var(--text-tertiary);line-height:1.65;margin-bottom:var(--space-4);flex:1}
.course-card__info{display:flex;flex-direction:column;gap:6px;padding:var(--space-3) 0;border-top:1px dashed var(--border-base);border-bottom:1px dashed var(--border-base);margin-bottom:var(--space-4)}
.course-card__info-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-tertiary)}
.course-card__info-row svg, .course-card__info-row .ico{width:14px;height:14px;color:var(--color-gold-dark);flex-shrink:0}
.course-card__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.course-card__price{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--text-primary)}
.course-card__price-currency{font-size:12px;color:var(--text-muted);margin-right:2px;font-family:var(--font-sans)}
.course-card__duration{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:4px}
.course-card__cta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--color-primary);transition:var(--t-fast)}
.course-card__cta:hover{color:var(--color-gold-dark);gap:8px}

/* Gradient covers (for cards without photo) */
.cover--cut{background:linear-gradient(135deg, #3D3A35 0%, #0A0A0A 100%)}
.cover--color{background:linear-gradient(135deg, #6B1F2A 0%, #16140F 100%)}
.cover--perm{background:linear-gradient(135deg, #3D3A35 0%, #B8935A 100%)}
.cover--scalp{background:linear-gradient(135deg, #5F5A52 0%, #16140F 100%)}
.cover--biz{background:linear-gradient(135deg, #B8935A 0%, #5F5A52 100%)}
.cover--design{background:linear-gradient(135deg, #5F5A52 0%, #0A0A0A 100%)}
.cover--style{background:linear-gradient(135deg, #2A2A2C 0%, #6B1F2A 50%, #0A0A0A 100%)}
.cover--biz-2{background:linear-gradient(135deg, #16140F 0%, #B8935A 100%)}
.cover--master{background:radial-gradient(circle at 30% 30%, #B8935A 0%, #0A0A0A 60%)}
.cover--men{background:linear-gradient(135deg, #0A0A0A 0%, #26241F 50%, #0A0A0A 100%)}

/* ════════════════════════════════════════════════════════════
   FEATURED  ·  Master Program Card
   ════════════════════════════════════════════════════════════ */
.featured{
  background:linear-gradient(135deg, #0A0A0A 0%, #1C1C1E 100%);
  color:var(--text-inverse);
  border-radius:var(--radius-2xl);
  padding:var(--space-9) var(--space-8);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-8);align-items:center;
}
.featured::before{
  content:"";position:absolute;top:-30%;right:-15%;
  width:60%;height:200%;
  background:radial-gradient(closest-side, rgba(184,147,90,.30), transparent 70%);
}
.featured__inner{position:relative;z-index:1}
.featured__eyebrow{color:var(--color-gold);font-size:11px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-bottom:var(--space-4)}
.featured__title{font-family:var(--font-display);font-size:clamp(28px,3.5vw,44px);font-weight:500;line-height:1.15;letter-spacing:-.02em;margin-bottom:var(--space-4)}
.featured__title i{color:var(--color-gold-light)}
.featured__desc{color:rgba(250,250,247,.7);font-size:15px;line-height:1.7;max-width:48ch;margin-bottom:var(--space-5)}
.featured__meta{display:flex;gap:var(--space-6);margin-bottom:var(--space-6);flex-wrap:wrap}
.featured__meta-item{display:flex;flex-direction:column;gap:2px}
.featured__meta-num{font-family:var(--font-display);font-size:22px;color:var(--color-gold)}
.featured__meta-label{font-size:11px;color:rgba(250,250,247,.5);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.featured__visual{
  position:relative;z-index:1;aspect-ratio:1;
  border-radius:var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(184,147,90,.15), rgba(184,147,90,.02)),
    radial-gradient(circle at 70% 30%, rgba(184,147,90,.3), transparent 60%);
  border:1px solid rgba(184,147,90,.3);
  display:grid;place-items:center;
}
.featured__visual-text{font-family:var(--font-display);font-size:80px;font-weight:400;color:var(--color-gold);letter-spacing:.04em;text-align:center;line-height:.9}
.featured__visual-text span{display:block;font-size:14px;color:rgba(250,250,247,.5);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-top:8px}

/* ════════════════════════════════════════════════════════════
   OLIVIA GARDEN BRAND FEATURE  ·  OG 專區
   ════════════════════════════════════════════════════════════ */
.og-feature{
  background:
    radial-gradient(80% 60% at 10% 10%, rgba(184,147,90,.15), transparent 60%),
    radial-gradient(60% 50% at 90% 90%, rgba(212,181,132,.10), transparent 60%),
    linear-gradient(135deg, #0A0A0A 0%, #1C1C1E 100%);
  color:var(--text-inverse);
  border-radius:var(--radius-2xl);
  padding:var(--space-6) var(--space-6);
  position:relative; overflow:hidden;
  border:1px solid rgba(184,147,90,.15);
}
.og-feature::before{
  content:""; position:absolute;
  top:0; right:0; width:280px; height:280px;
  background:radial-gradient(closest-side, rgba(184,147,90,.25), transparent 70%);
  pointer-events:none;
}
.og-feature::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:linear-gradient(to right, transparent, rgba(184,147,90,.4), transparent);
  pointer-events:none;
}

/* HERO : 2-col with image */
.og-feature__hero{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--space-6);
  align-items:center;
  padding-bottom:var(--space-5);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:var(--space-5);
}
.og-feature__hero-text{ display:flex; flex-direction:column; gap:var(--space-3) }
.og-feature__hero-text .og-feature__eyebrow{ margin-bottom:0 }
.og-feature__hero-text .og-feature__logotype{ margin-bottom:0; text-align:left }
.og-feature__hero-text .og-feature__subtitle{ margin-bottom:var(--space-3) }
.og-feature__tagline-inline{
  font-family:var(--font-display);
  font-size:clamp(15px, 1.4vw, 19px);
  line-height:1.45; color:rgba(255,255,255,.92);
  font-weight:400;
  padding-top:var(--space-3);
  border-top:1px solid rgba(255,255,255,.08);
  position:relative;
}
.og-feature__tagline-inline i{ color:var(--color-gold-light); font-style:italic; font-weight:500 }
.og-feature__tagline-inline .og-feature__quote{
  display:block; font-size:30px; line-height:.5;
  color:var(--color-gold); font-weight:600;
  margin-bottom:var(--space-2);
}

.og-feature__hero-img{
  position:relative;
  /* 限高後圖框比所在欄位窄，預設會貼齊欄位左緣、右側留下大片空白；
     靠右對齊讓它與區塊右緣切齊（單欄 RWD 時 margin:0 auto 會蓋掉此設定）*/
  justify-self:end;
  aspect-ratio:16/11;
  /* 不讓圖片自己撐高整個 Hero（文字欄只有約 200px）；
     圖片是 object-fit:contain，限高只會等比縮小，不會裁到 LOGO */
  max-height:236px;
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(184,147,90,.18), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(184,147,90,.04));
  border:1px solid rgba(184,147,90,.25);
  display:grid; place-items:center;
}
.og-feature__hero-img::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 70%, rgba(184,147,90,.12), transparent 60%);
  pointer-events:none;
}
.og-feature__hero-img::after{
  content:""; position:absolute; inset:16px;
  border:1px solid rgba(184,147,90,.18);
  border-radius:calc(var(--radius-xl) - 12px);
  pointer-events:none;
}
.og-feature__hero-img img{
  width:88%; height:88%; object-fit:contain;
  position:relative; z-index:1;
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.4));
  transition:transform 1s var(--ease-out);
}
.og-feature__hero-img:hover img{ transform:scale(1.04) }
.og-feature__hero-placeholder{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(22px, 3vw, 34px); letter-spacing:.04em;
  color:rgba(255,255,255,.55); text-align:center; line-height:1.3;
}
.og-feature__hero-placeholder i{ color:var(--color-gold-light); font-style:italic }

/* HEAD (legacy — kept for backward compatibility) */
.og-feature__head{
  text-align:center;
  padding-bottom:var(--space-7);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:var(--space-7);
  position:relative; z-index:1;
}
.og-feature__eyebrow{
  font-size:11px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--color-gold); margin-bottom:var(--space-4);
  display:inline-flex; align-items:center; gap:var(--space-3);
}
.og-feature__eyebrow::before,
.og-feature__eyebrow::after{
  content:""; width:28px; height:1px; background:var(--color-gold);
}
.og-feature__logotype{
  font-family:var(--font-display);
  font-size:clamp(28px, 4.2vw, 56px);
  font-weight:500; line-height:1; letter-spacing:-.04em;
  color:#fff; margin-bottom:var(--space-2);
}
.og-feature__logotype i{ color:var(--color-gold-light); font-style:italic }
.og-feature__subtitle{
  font-size:12px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--color-gold-light); font-family:var(--font-mono);
}

/* TAGLINE */
.og-feature__tagline{
  position:relative; z-index:1;
  text-align:center;
  font-family:var(--font-display);
  font-size:clamp(22px, 2.5vw, 32px);
  line-height:1.4; color:rgba(255,255,255,.92);
  margin-bottom:var(--space-7);
  font-weight:400;
}
.og-feature__tagline i{ color:var(--color-gold-light); font-style:italic; font-weight:500 }
.og-feature__quote{
  display:block; font-size:48px; line-height:.5;
  color:var(--color-gold); font-weight:600;
  margin-bottom:var(--space-3);
}

/* STATS */
.og-feature__stats{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:var(--space-4);
  padding:var(--space-4) 0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:var(--space-5);
}
.og-feature__stat{ text-align:center }
.og-feature__stat-num{
  font-family:var(--font-display);
  font-size:clamp(20px, 2.2vw, 29px);
  font-weight:500; color:var(--color-gold);
  line-height:1; letter-spacing:-.02em;
}
.og-feature__stat-num span{ font-size:.55em; color:var(--color-gold-light); margin-left:2px }
.og-feature__stat-label{
  font-size:11px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-top:8px;
}

/* BODY 2-col */
.og-feature__body{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:var(--space-6);
  margin-bottom:var(--space-5);
}
.og-feature__section-label{
  font-size:16px; font-weight:600; letter-spacing:.06em;
  color:var(--color-gold); margin-bottom:var(--space-3);
}

/* STORY */
.og-feature__story p{
  color:rgba(255,255,255,.72); font-size:12.5px; line-height:1.6;
  margin-bottom:10px;
}
.og-feature__story p strong{ color:var(--color-gold-light); font-weight:600 }

.og-feature__tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:var(--space-3);
}
.og-feature__tag{
  font-size:11px; padding:5px 12px;
  background:rgba(184,147,90,.12); color:var(--color-gold-light);
  border:1px solid rgba(184,147,90,.25);
  border-radius:var(--radius-full);
}

/* OG 品牌照片牆 2×2（左下角） */
/* 4 張並排一列（原本 2×2 佔掉 400px，是版面最大的一塊） */
.og-feature__photos{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
  margin-top:var(--space-4);
}
.og-photo{
  position:relative; margin:0;
  aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius-md);
  border:1px solid rgba(184,147,90,.22);
  background:#000;
}
.og-photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.og-photo:hover img{ transform:scale(1.06) }
.og-photo__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 7px 5px;
  font-size:10px; line-height:1.35; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(10,10,10,.85));
  /* 縮小後空間有限，說明文字最多兩行，超出以「…」收尾 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* PRODUCT LIST */
/* 產品改雙欄：6 項排 3 列而非 6 列，是縮短版面的關鍵。
   min-width:0 不可省：grid 項目預設 min-width:auto，內層文字（尤其 nowrap）
   會把這一欄的最小寬度撐大，反過來把左邊故事欄壓扁。 */
.og-feature__products{ display:grid; grid-template-columns:1fr 1fr; gap:6px; align-content:start; min-width:0 }
.og-feature__story{ min-width:0 }
.og-product-group{ grid-column:1 / -1 }
.og-product{
  display:flex; gap:9px; align-items:center; min-width:0;
  padding:7px 10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(184,147,90,.18);
  border-radius:var(--radius-md);
  transition:var(--t-fast);
}
.og-product:hover{
  background:rgba(184,147,90,.06);
  border-color:rgba(184,147,90,.4);
  transform:translateX(4px);
}
.og-product__code{
  width:28px; height:28px;
  background:linear-gradient(135deg, var(--color-gold), var(--color-gold-dark));
  color:var(--color-primary);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  border-radius:var(--radius-sm);
  flex-shrink:0;
}
.og-product__name{
  font-family:var(--font-display);
  font-size:13.5px; font-weight:600;
  color:var(--color-gold-light);
}
/* 雙欄後欄寬變窄：說明最多兩行（實測現有 6 條皆可完整顯示），
   不用 nowrap —— 那會把每一條都截掉。 */
.og-product__desc{
  font-size:10.5px; color:rgba(255,255,255,.55); margin-top:1px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.og-product__info{ min-width:0 }

/* 產品子分類標題 */
.og-product-group{
  font-family:var(--font-display);
  font-size:14px; font-weight:600;
  color:var(--color-gold-light);
  letter-spacing:.02em;
  margin-top:var(--space-2);
  padding:4px 0 3px;
  border-bottom:1px solid rgba(184,147,90,.2);
  display:flex; align-items:center; gap:8px;
}
.og-product-group::before{
  content:""; width:14px; height:1px; background:var(--color-gold);
}
.og-product-group:first-of-type{ margin-top:0 }

/* FOOT */
.og-feature__foot{
  position:relative; z-index:1;
  padding-top:var(--space-4);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--space-5); flex-wrap:wrap;
}
.og-feature__partnership{
  font-size:13px; color:rgba(255,255,255,.7);
  display:flex; align-items:center; gap:8px;
}
.og-feature__partnership strong{ color:#fff; font-weight:600 }
.og-feature__partnership-star{ color:var(--color-gold); font-size:16px }
.og-feature__cta{ display:flex; gap:var(--space-3); flex-wrap:wrap }

/* RWD */
@media (max-width:1024px){
  .og-feature{ padding:var(--space-5) var(--space-4) }
  .og-feature__hero{ grid-template-columns:1fr; gap:var(--space-5); text-align:center }
  .og-feature__hero-text .og-feature__logotype{ text-align:center }
  .og-feature__hero-img{ max-width:300px; margin:0 auto; aspect-ratio:1; max-height:210px }
  .og-feature__body{ grid-template-columns:1fr; gap:var(--space-5) }
  .og-feature__stats{ grid-template-columns:repeat(4, 1fr); gap:var(--space-3) }
  .og-feature__foot{ flex-direction:column; text-align:center }
}
@media (max-width:640px){
  /* 窄螢幕下雙欄會擠，產品與照片各退一階 */
  .og-feature__products{ grid-template-columns:1fr }
  .og-feature__photos{ grid-template-columns:1fr 1fr }
  .og-feature__stats{ grid-template-columns:repeat(2, 1fr); gap:var(--space-4) }
}
@media (max-width:480px){
  .og-feature__logotype{ font-size:34px }
  .og-feature__hero-img{ max-width:240px; max-height:180px }
}


/* ════════════════════════════════════════════════════════════
   CATEGORY FILTER  ·  分類篩選
   ════════════════════════════════════════════════════════════ */
.cat-filter{display:flex;justify-content:center;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-7) 0 var(--space-7)}
.cat-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;font-size:14px;font-weight:500;
  color:var(--text-secondary);background:var(--bg-elevated);
  border:1px solid var(--border-base);
  border-radius:var(--radius-full);
  transition:var(--t-fast);cursor:pointer;
}
.cat-tab:hover{border-color:var(--text-primary)}
.cat-tab.is-active{background:var(--color-primary);color:var(--text-inverse);border-color:var(--color-primary)}
.cat-tab__count{font-family:var(--font-mono);font-size:11px;opacity:.6}

/* ════════════════════════════════════════════════════════════
   INSTRUCTORS
   ════════════════════════════════════════════════════════════ */
.instructors-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* 不足一排時講師卡置中，不靠左 */
  gap:var(--space-5);
}
.instructors-grid .instructor-card{
  flex:0 1 270px;           /* 基準寬 270px，可在窄空間收縮 */
  max-width:300px;
}

/* 師資陣容分層 */
.instructor-layer{margin-top:var(--space-8)}
.instructor-layer:first-of-type{margin-top:0}
.instructor-layer__title{
  font-family:var(--font-display);
  font-size:22px;font-weight:600;letter-spacing:.04em;
  color:var(--color-gold-dark);
  text-align:center;
  width:100%;
  margin-bottom:var(--space-6);
  display:flex;align-items:center;justify-content:center;gap:var(--space-4);
}
.instructor-layer__title::before,
.instructor-layer__title::after{
  content:"";width:48px;height:1px;
  background:linear-gradient(to right, transparent, var(--color-gold));
}
.instructor-layer__title::after{background:linear-gradient(to left, transparent, var(--color-gold))}
.instructor-card{
  background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-7) var(--space-5);
  text-align:center;transition:var(--t-base);
}
.instructor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.instructor-card__avatar{
  width:108px;height:108px;border-radius:50%;
  background:var(--color-neutral-200);
  margin:0 auto var(--space-4);
  border:2px solid var(--color-gold);padding:4px;overflow:hidden;
}
.instructor-card__avatar-inner{
  width:100%;height:100%;border-radius:50%;
  display:grid;place-items:center;
  color:var(--color-gold);
  font-family:var(--font-display);font-size:32px;font-weight:500;
  overflow:hidden;
}
.instructor-card__avatar-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.instructor-card__name{font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-.01em}
.instructor-card__title{font-size:11px;color:var(--color-gold-dark);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;margin-top:6px}
.instructor-card__bio{font-size:13.5px;color:var(--text-tertiary);margin-top:var(--space-4);line-height:1.7;min-height:90px}
.instructor-card__tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:var(--space-4)}
.instructor-card__tag{font-size:11px;padding:3px 10px;background:var(--bg-subtle);color:var(--text-secondary);border-radius:var(--radius-full)}

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════════ */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-5)}
.testimonial{
  background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-4);
  transition:var(--t-base);
}
.testimonial:hover{box-shadow:var(--shadow-md)}
.testimonial__quote{font-family:var(--font-display);font-size:48px;color:var(--color-gold);line-height:1;font-weight:500;margin-bottom:-16px}
.testimonial__text{font-size:15px;line-height:1.7;color:var(--text-secondary);flex:1}
.testimonial__author{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}
.testimonial__avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg, var(--color-primary), var(--color-gold-dark));
  color:var(--color-gold-light);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:18px;font-weight:600;
}
.testimonial__author-info{display:flex;flex-direction:column;line-height:1.3}
.testimonial__author-name{font-weight:600;font-size:14px}
.testimonial__author-role{font-size:12px;color:var(--text-muted)}

/* ════════════════════════════════════════════════════════════
   STATS BAND
   ════════════════════════════════════════════════════════════ */
.stats-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-7);
  padding:var(--space-8) 0;
  border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);
}
.stat-item{text-align:center}
.stat-item__num{font-family:var(--font-display);font-size:clamp(40px,4vw,64px);font-weight:500;color:var(--color-gold);line-height:1;letter-spacing:-.02em}
.stat-item__num span{font-size:.5em;color:rgba(250,250,247,.7)}
.stat-item__label{font-size:12px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(250,250,247,.6);margin-top:var(--space-3)}

/* ════════════════════════════════════════════════════════════
   GALLERY CAROUSEL  ·  作品輪播
   ════════════════════════════════════════════════════════════ */
.carousel{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:#0A0A0A}
.carousel__track{display:flex;transition:transform .7s var(--ease-out);will-change:transform}
.carousel__slide{
  flex:0 0 100%;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
}
.carousel__slide img{
  width:100%;height:100%;object-fit:contain;object-position:center center;
  background:#0A0A0A;
  transition:transform 1.2s var(--ease-out);
}
/* 影片同樣完整呈現、不裁切（直式影片也置中不切邊） */
.carousel__slide video,
.carousel__slide iframe{
  width:100%;height:100%;object-fit:contain;
  background:#0A0A0A;display:block;border:0;
}
/* 不裁切：直式照片完整呈現，故不再放大（放大會被裁掉邊緣） */
.carousel__slide.is-active img{transform:none}
.carousel__caption{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--space-7) var(--space-7) var(--space-7);
  background:linear-gradient(180deg, transparent 0%, rgba(10,10,10,.88) 100%);
  color:#fff;
}
/* 作品集說明字：原始 11px → 放大後 55px → 再減半為 28px（約原始的 2.5 倍）。
   字距維持收斂後的 .06em；小螢幕另有縮放（見 RWD） */
.carousel__caption-eyebrow{font-size:28px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-gold);margin-bottom:10px;line-height:1.3}
.carousel__caption-title{font-family:var(--font-display);font-size:clamp(24px,3vw,36px);font-weight:500;line-height:1.2;letter-spacing:-.01em;max-width:32ch}
.carousel__caption-desc{color:rgba(255,255,255,.75);font-size:14px;margin-top:8px;max-width:48ch}

.carousel__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;
  background:rgba(10,10,10,.5);color:#fff;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;
  transition:var(--t-fast);z-index:2;
}
.carousel__btn:hover{background:var(--color-gold);color:var(--color-primary);border-color:var(--color-gold)}
.carousel__btn--prev{left:24px}
.carousel__btn--next{right:24px}

.carousel__dots{
  position:absolute;left:50%;bottom:24px;
  transform:translateX(-50%);
  display:flex;gap:8px;z-index:2;
}
.carousel__dot{
  width:24px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.4);
  transition:var(--t-fast);cursor:pointer;
}
.carousel__dot.is-active{background:var(--color-gold);width:36px}

/* ════════════════════════════════════════════════════════════
   FAQ  ·  Accordion
   ════════════════════════════════════════════════════════════ */
.faq-list{display:flex;flex-direction:column;gap:var(--space-3);max-width:840px;margin:0 auto}
.faq{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.faq.is-open{border-color:var(--border-base);box-shadow:var(--shadow-sm)}
.faq__btn{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  width:100%; padding:var(--space-5) var(--space-6);
  text-align:left;
  font-size:16px;font-weight:600;color:var(--text-primary);
  transition:color var(--t-fast);
}
.faq__btn:hover{color:var(--color-gold-dark)}
.faq__num{
  font-family:var(--font-display);font-size:12px;color:var(--color-gold);
  letter-spacing:var(--ls-eyebrow);
  margin-right:var(--space-2);
}
.faq__q{flex:1}
.faq__icon{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg-subtle);color:var(--color-primary);
  display:grid;place-items:center;
  font-size:18px;font-weight:300;
  transition:var(--t-base);flex-shrink:0;
}
.faq.is-open .faq__icon{background:var(--color-primary);color:var(--color-gold);transform:rotate(45deg)}
.faq__body{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease-out);
}
.faq.is-open .faq__body{max-height:400px}
.faq__inner{padding:0 var(--space-6) var(--space-5);color:var(--text-tertiary);line-height:1.8;font-size:14.5px}

/* ════════════════════════════════════════════════════════════
   CTA BAND
   ════════════════════════════════════════════════════════════ */
.cta-band{
  background:
    radial-gradient(60% 80% at 80% 50%, rgba(184,147,90,.15), transparent 70%),
    var(--color-primary);
  color:var(--text-inverse);
  border-radius:var(--radius-2xl);
  padding:var(--space-9) var(--space-8);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-7);align-items:center;
}
.cta-band__title{font-family:var(--font-display);font-size:clamp(28px,3.5vw,42px);font-weight:500;line-height:1.15;margin-bottom:var(--space-4);letter-spacing:-.02em}
.cta-band__title i{color:var(--color-gold-light)}
.cta-band__desc{color:rgba(250,250,247,.7);font-size:15px;line-height:1.7;margin-bottom:0}
.cta-band__form{display:flex;gap:var(--space-3);flex-direction:column}
.cta-band__input-row{display:flex;gap:var(--space-2)}
.cta-band__input{
  flex:1;padding:14px 18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-full);
  color:var(--text-inverse);
  font:inherit;font-size:14px;
  transition:var(--t-fast);
}
.cta-band__input::placeholder{color:rgba(250,250,247,.45)}
.cta-band__input:focus{outline:none;border-color:var(--color-gold);background:rgba(255,255,255,.1)}
.cta-band__hint{font-size:12px;color:rgba(250,250,247,.5)}

/* ════════════════════════════════════════════════════════════
   FOOTER  · with social icons + LINE
   ════════════════════════════════════════════════════════════ */
.footer{background:var(--color-primary);color:var(--text-inverse);padding:var(--space-9) 0 var(--space-5)}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr) 1.2fr;gap:var(--space-6);padding-bottom:var(--space-7);border-bottom:1px solid var(--border-inverse)}
.footer__brand-mark{font-family:var(--font-display);font-size:32px;font-weight:500;letter-spacing:-.02em;margin-bottom:var(--space-3)}
.footer__brand-mark i{color:var(--color-gold)}
.footer__brand-desc{color:rgba(250,250,247,.6);font-size:14px;line-height:1.7;max-width:36ch;margin-bottom:var(--space-5)}
.footer__col-title{font-size:11px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-gold);margin-bottom:var(--space-4)}
.footer__col ul li{margin-bottom:var(--space-2)}
.footer__col ul a{font-size:14px;color:rgba(250,250,247,.65);transition:var(--t-fast);display:inline-flex;align-items:center;gap:8px}
.footer__col ul a:hover{color:var(--color-gold-light)}
.footer__col ul a .ico{width:14px;height:14px;flex-shrink:0}
/* 非連結的資訊項（如統一編號）：外觀與連結一致，但不可點、無 hover */
.footer__col ul .footer__info{font-size:14px;color:rgba(250,250,247,.65);display:inline-flex;align-items:center;gap:8px}
.footer__col ul .footer__info .ico{width:14px;height:14px;flex-shrink:0}
/* 教育中心地址：中心名稱一行、地址一行；圖示靠上對齊 */
.footer__addr{align-items:flex-start !important}
.footer__addr svg{margin-top:3px;flex-shrink:0}
.footer__addr span{line-height:1.7}
.footer__addr strong{color:rgba(250,250,247,.92);font-weight:600}

.footer__social{display:flex;gap:var(--space-3);margin-top:var(--space-4)}
.footer__social a{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(250,250,247,.2);
  display:grid;place-items:center;
  transition:var(--t-fast);
  color:rgba(250,250,247,.8);
}
.footer__social a:hover{background:var(--color-gold);color:var(--color-primary);border-color:var(--color-gold);transform:translateY(-2px)}
.footer__social a.is-line:hover{background:var(--color-line);border-color:var(--color-line);color:#fff}

.footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-5);font-size:12px;color:rgba(250,250,247,.45);flex-wrap:wrap;gap:var(--space-3)}

/* Floating LINE button */
.line-fab{
  position:fixed;bottom:24px;right:24px;
  width:60px;height:60px;border-radius:50%;
  background:var(--color-line);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 10px 32px rgba(6,199,85,.4);
  z-index:var(--z-fixed);
  transition:var(--t-base);
}
.line-fab:hover{transform:translateY(-3px) rotate(8deg);box-shadow:0 14px 40px rgba(6,199,85,.55)}
.line-fab::before{
  content:""; position:absolute;inset:0;border-radius:50%;
  background:var(--color-line);
  animation:linePulse 2s infinite;
  z-index:-1;
}
@keyframes linePulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
.line-fab svg{width:28px;height:28px}

/* ────────── Page hero (sub-pages) ────────── */
.page-hero{
  padding:calc(var(--header-h) + var(--space-9)) 0 var(--space-9);
  background:
    radial-gradient(50% 50% at 70% 30%, rgba(184,147,90,.08), transparent 60%),
    var(--bg-subtle);
  text-align:center;
}
.page-hero h1{font-size:clamp(2.5rem, 5vw, 4.5rem);margin-bottom:var(--space-4)}
.page-hero h1 i{font-style:italic;color:var(--color-gold-dark);font-weight:400}
.page-hero .lead{margin:0 auto var(--space-6)}
.breadcrumbs{display:flex;justify-content:center;gap:var(--space-2);font-size:12px;color:var(--text-muted);letter-spacing:.04em;margin-bottom:var(--space-5)}
.breadcrumbs a:hover{color:var(--color-gold-dark)}
.breadcrumbs span{color:var(--color-gold)}

/* ────────── Filter bar (courses page) ────────── */
.filter-bar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:var(--space-4);padding:var(--space-5) 0;
  border-bottom:1px solid var(--border-base);margin-bottom:var(--space-7);
}
.filter-tabs{display:flex;gap:var(--space-1);flex-wrap:wrap}
.filter-tab{
  padding:8px 18px;font-size:13px;font-weight:500;
  color:var(--text-secondary);border-radius:var(--radius-full);
  transition:var(--t-fast);border:1px solid transparent;cursor:pointer;
}
.filter-tab:hover{background:var(--bg-subtle)}
.filter-tab.is-active{background:var(--color-primary);color:var(--text-inverse)}
.filter-tab span{font-size:11px;color:inherit;opacity:.6;margin-left:6px;font-family:var(--font-mono)}

.filter-search{position:relative;width:280px;max-width:100%}
.filter-search input{
  width:100%;height:42px;padding:0 18px 0 42px;
  background:var(--bg-elevated);
  border:1px solid var(--border-base);
  border-radius:var(--radius-full);
  font:inherit;font-size:14px;transition:var(--t-fast);
}
.filter-search input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(10,10,10,.06)}
.filter-search__icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:16px}

/* ────────── Course Detail Page ────────── */
.detail-hero{padding:calc(var(--header-h) + var(--space-7)) 0 var(--space-7);background:var(--bg-subtle)}
.detail-hero__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-8);align-items:center}
.detail-hero__visual{
  aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;
  position:relative;display:grid;place-items:center;
  color:var(--color-gold);
  font-family:var(--font-display);font-size:64px;font-weight:500;letter-spacing:.04em;
}
.detail-hero__visual img{width:100%;height:100%;object-fit:contain;object-position:center}
/* 改為 contain 後圖片四周會有留白，原本的內縮金框會浮在留白上，故移除 */
.detail-hero__badges{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;font-size:11px;font-weight:600;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  border-radius:var(--radius-full);
}
.badge--gold{background:var(--color-gold-bg);color:var(--color-gold-dark)}
.badge--dark{background:var(--color-primary);color:var(--color-gold)}
.badge--neutral{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-base)}

.detail-hero h1{font-size:clamp(2.2rem, 4vw, 3.5rem);margin-bottom:var(--space-4);line-height:1.1}
.detail-hero__meta-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);
  padding:var(--space-5) 0;border-top:1px solid var(--border-base);border-bottom:1px solid var(--border-base);margin:var(--space-5) 0;
}
.detail-meta{display:flex;flex-direction:column;gap:2px}
.detail-meta__label{font-size:11px;color:var(--text-muted);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.detail-meta__value{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text-primary)}
.detail-meta__value span{font-size:13px;color:var(--text-muted);font-family:var(--font-sans);font-weight:400;margin-left:4px}

/* Tabs */
.tabs{display:flex;gap:var(--space-7);border-bottom:1px solid var(--border-base);margin-bottom:var(--space-6);overflow-x:auto}
.tab{padding:var(--space-3) 0;font-size:15px;font-weight:500;color:var(--text-muted);white-space:nowrap;border-bottom:2px solid transparent;transition:var(--t-fast);cursor:pointer}
.tab:hover{color:var(--text-primary)}
.tab.is-active{color:var(--text-primary);border-bottom-color:var(--color-gold)}

.tab-panel{display:none;animation:fadeIn 400ms var(--ease-out)}
.tab-panel.is-active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.curriculum-list{display:flex;flex-direction:column;gap:var(--space-3)}
.curriculum-item{
  background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-5);
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-4);align-items:center;
}
.curriculum-num{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--color-gold);width:48px}
.curriculum-title{font-weight:600;font-size:15px;margin-bottom:4px}
.curriculum-desc{font-size:13px;color:var(--text-tertiary)}
.curriculum-time{font-size:12px;color:var(--text-muted);font-family:var(--font-mono)}

/* Detail sticky enroll card */
.detail-sticky{
  position:sticky;top:calc(var(--header-h) + var(--space-4));
  background:var(--bg-elevated);
  border:1px solid var(--border-base);
  border-radius:var(--radius-lg);
  padding:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.detail-sticky__price{font-family:var(--font-display);font-weight:600;font-size:40px;line-height:1;margin-bottom:var(--space-2)}
.detail-sticky__price-currency{font-size:14px;color:var(--text-muted);margin-right:4px;font-family:var(--font-sans)}
.detail-sticky__original{font-size:14px;color:var(--text-muted);text-decoration:line-through;margin-left:8px;font-family:var(--font-sans);font-weight:400}
.detail-sticky__discount{font-size:11px;color:var(--color-danger);background:var(--color-danger-bg);padding:3px 8px;border-radius:var(--radius-full);margin-left:6px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:600}
.detail-sticky__list{padding:var(--space-4) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);margin:var(--space-4) 0}
.detail-sticky__list li{display:flex;justify-content:space-between;font-size:13px;padding:6px 0}
.detail-sticky__list li span:first-child{color:var(--text-muted)}
.detail-sticky__list li span:last-child{color:var(--text-primary);font-weight:500}
.detail-sticky__cta{display:flex;flex-direction:column;gap:var(--space-2)}

.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:var(--space-8)}

/* Course gallery (carousel inside detail page) */
.gallery-carousel{margin-top:var(--space-5)}
.gallery-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:var(--space-2);margin-top:var(--space-3)}
.gallery-thumb{
  aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;
  opacity:.55;transition:var(--t-fast);border:2px solid transparent;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;object-position:center top}
.gallery-thumb:hover{opacity:.85}
.gallery-thumb.is-active{opacity:1;border-color:var(--color-gold)}

/* ────────── Forms (Register) ────────── */
.form-group{margin-bottom:var(--space-5)}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-2)}
.form-label .req{color:var(--color-danger);margin-left:2px}
.input,.textarea,.select{
  width:100%;padding:13px 16px;
  background:var(--bg-elevated);
  border:1px solid var(--border-base);
  border-radius:var(--radius-md);
  font:inherit;font-size:var(--font-body);color:var(--text-primary);
  transition:var(--t-fast);
}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(10,10,10,.06)}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.form-help{font-size:12px;color:var(--text-muted);margin-top:var(--space-2)}
.form-error{font-size:12px;color:var(--color-danger);margin-top:var(--space-2);display:flex;align-items:center;gap:4px}
.input.is-error{border-color:var(--color-danger);box-shadow:0 0 0 3px var(--color-danger-bg)}
.input.is-success{border-color:var(--color-success)}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

.check,.radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;user-select:none;font-size:14px}
.check input,.radio input{position:absolute;opacity:0;pointer-events:none}
.check__box,.radio__box{width:20px;height:20px;border:1.5px solid var(--border-strong);background:var(--bg-elevated);display:grid;place-items:center;transition:var(--t-fast)}
.check__box{border-radius:var(--radius-sm)}
.radio__box{border-radius:50%}
.check input:checked+.check__box{background:var(--color-primary);border-color:var(--color-primary)}
.check input:checked+.check__box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px}
.radio input:checked+.radio__box{border-color:var(--color-primary)}
.radio input:checked+.radio__box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--color-primary)}

/* Multi-step Register */
.register-grid{display:grid;grid-template-columns:1fr 380px;gap:var(--space-8);margin-top:var(--space-5)}
.steps{display:flex;justify-content:space-between;margin-bottom:var(--space-8);position:relative}
.steps::before{content:"";position:absolute;left:24px;right:24px;top:18px;height:1px;background:var(--border-base);z-index:0}
.step{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);position:relative;z-index:1;text-align:center;flex:1;cursor:pointer}
.step__num{width:36px;height:36px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border-base);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--text-muted);transition:var(--t-base)}
.step__label{font-size:12px;font-weight:500;color:var(--text-muted);transition:var(--t-fast)}
.step.is-active .step__num{background:var(--color-primary);color:var(--color-gold);border-color:var(--color-primary)}
.step.is-active .step__label{color:var(--text-primary)}
.step.is-done .step__num{background:var(--color-gold);color:var(--color-primary);border-color:var(--color-gold)}
.step.is-done .step__num::after{content:"✓"}
.step.is-done .step__num > *{display:none}

.form-panel{display:none;animation:slideIn 500ms var(--ease-out)}
.form-panel.is-active{display:block}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

.form-panel h3{font-family:var(--font-display);font-size:28px;margin-bottom:var(--space-3)}
.form-panel__desc{color:var(--text-tertiary);font-size:14px;margin-bottom:var(--space-7)}

.payment-method{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--bg-elevated);border:1px solid var(--border-base);border-radius:var(--radius-md);cursor:pointer;transition:var(--t-fast);margin-bottom:var(--space-3);position:relative}
.payment-method:hover{border-color:var(--border-strong)}
.payment-method.is-selected{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(10,10,10,.04)}
.payment-method input{position:absolute;opacity:0;pointer-events:none}
.payment-method__icon{width:48px;height:32px;border-radius:var(--radius-sm);background:var(--bg-subtle);display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--font-mono);color:var(--text-secondary)}
.payment-method__name{font-weight:600;font-size:14px}
.payment-method__desc{font-size:12px;color:var(--text-muted);margin-top:2px}

.form-nav{display:flex;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-6);border-top:1px solid var(--border-subtle);margin-top:var(--space-6)}

.summary{background:var(--bg-elevated);border:1px solid var(--border-base);border-radius:var(--radius-lg);padding:var(--space-6);position:sticky;top:calc(var(--header-h) + var(--space-4))}
.summary__title{font-family:var(--font-display);font-size:20px;font-weight:600;margin-bottom:var(--space-4)}
.summary__course{display:flex;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-4)}
.summary__course-img{width:80px;height:60px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--color-gold);font-family:var(--font-display);font-size:14px;font-weight:600;flex-shrink:0}
.summary__course-info h5{font-size:14px;line-height:1.4;margin-bottom:4px}
.summary__course-info p{font-size:12px;color:var(--text-muted)}
.summary__row{display:flex;justify-content:space-between;font-size:14px;padding:var(--space-2) 0}
.summary__row--total{font-family:var(--font-display);font-size:22px;font-weight:600;padding-top:var(--space-3);border-top:1px solid var(--border-subtle);margin-top:var(--space-3)}
.summary__row--total span:last-child{color:var(--color-primary)}

/* ────────── Animation Utilities ────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}

/* ────────── Toast / Modal ────────── */
.toast-container{position:fixed;top:96px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-elevated);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);border-left:3px solid var(--color-success);font-size:14px;min-width:300px;pointer-events:auto;animation:toastIn 400ms var(--ease-out)}
.toast--info{border-left-color:var(--color-info)}
.toast--warning{border-left-color:var(--color-warning)}
.toast--danger{border-left-color:var(--color-danger)}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

.modal-overlay{position:fixed;inset:0;background:rgba(10,10,10,.6);backdrop-filter:blur(10px);display:none;place-items:center;z-index:var(--z-modal);padding:var(--space-5)}
.modal-overlay.is-open{display:grid;animation:fadeIn var(--t-base)}
.modal{background:var(--bg-elevated);border-radius:var(--radius-2xl);max-width:480px;width:100%;padding:var(--space-8);box-shadow:var(--shadow-2xl);animation:scaleIn 400ms var(--ease-out);text-align:center}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.modal__icon{width:72px;height:72px;border-radius:50%;background:var(--color-gold-bg);color:var(--color-gold-dark);display:grid;place-items:center;font-size:32px;margin:0 auto var(--space-5)}
.modal h3{font-family:var(--font-display);font-size:28px;margin-bottom:var(--space-3)}
.modal p{color:var(--text-tertiary);line-height:1.7;margin-bottom:var(--space-6)}
.modal__actions{display:flex;gap:var(--space-3);justify-content:center}

/* ────────── RWD ────────── */
@media (max-width:1024px){
  .featured{grid-template-columns:1fr;gap:var(--space-6)}
  .cta-band{grid-template-columns:1fr;gap:var(--space-5)}
  .detail-hero__grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .detail-sticky{position:static;margin-top:var(--space-6)}
  .register-grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--space-6)}
  .brand-intro{grid-template-columns:1fr;gap:var(--space-5)}
  /* 單欄時原本用 16/10 橫幅，會從底部裁掉近 371px（連書法字都不見）；
     改為維持直式比例並收窄置中，既不裁圖也不會過高 */
  .brand-intro__visual{aspect-ratio:6/7;max-height:none;max-width:400px;margin:0 auto}
}
@media (max-width:768px){
  .nav{
    position:fixed;top:var(--header-h);left:0;right:0;
    background:var(--bg-elevated);
    flex-direction:column;align-items:stretch;gap:0;padding:var(--space-5);
    border-top:1px solid var(--border-base);
    transform:translateY(-120%);transition:transform var(--t-base);
    height:calc(100vh - var(--header-h));
  }
  .nav.is-open{transform:translateY(0)}
  .nav__link{padding:var(--space-3) 0;font-size:18px;border-bottom:1px solid var(--border-subtle);color:var(--text-primary)!important}
  .nav__link.is-active::after{display:none}
  .nav__cta{margin-top:var(--space-5)}
  .mobile-toggle{display:flex}

  .container{padding:0 var(--space-5)}
  .section{padding:var(--space-8) 0}
  .hero{padding:calc(var(--header-h) + var(--space-7)) 0 var(--space-8)}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-search{width:100%}
  .footer__top{grid-template-columns:1fr;gap:var(--space-5)}
  .footer__bottom{flex-direction:column;text-align:center}
  .detail-hero{padding-top:calc(var(--header-h) + var(--space-5))}
  .featured{padding:var(--space-7) var(--space-5)}
  .featured__visual-text{font-size:48px}
  .cta-band{padding:var(--space-7) var(--space-5)}
  .steps{flex-wrap:wrap;gap:var(--space-3)}
  .steps::before{display:none}
  .step{flex:0 0 calc(50% - var(--space-3))}
  .carousel__btn{width:40px;height:40px}
  .carousel__btn--prev{left:12px}
  .carousel__btn--next{right:12px}
  .carousel__caption{padding:var(--space-5)}
  .carousel__caption-eyebrow{font-size:22px;margin-bottom:8px}
  .line-fab{width:52px;height:52px;bottom:16px;right:16px}
  .brand-intro__pillars{grid-template-columns:1fr}
}
@media (max-width:480px){
  .courses-grid{grid-template-columns:1fr}
  .instructors-grid .instructor-card{flex-basis:100%;max-width:360px}
  .detail-hero__meta-grid{grid-template-columns:1fr}
  .carousel__caption-eyebrow{font-size:18px;margin-bottom:6px}
}

/* ════════════════════════════════════════════════════════════
   專屬圖示 & 品牌調性（瀧捷 2026）
   ════════════════════════════════════════════════════════════ */

/* 分類頁籤圖示 */
.cat-tab__ico{width:17px;height:17px;flex-shrink:0;opacity:.85;transition:var(--t-fast)}
.cat-tab:hover .cat-tab__ico{opacity:1}
.cat-tab.is-active .cat-tab__ico{opacity:1}

/* 區塊標題的水滴印記（取自 LOGO，調性簽名） */
.eyebrow--mark{display:inline-flex;align-items:center;gap:8px}
.eyebrow--center.eyebrow--mark{justify-content:center}
.brand-drop{display:inline-block;width:14px;height:14px;color:var(--color-brand);flex-shrink:0;vertical-align:middle}
.brand-drop svg{display:block;width:100%;height:100%}

/* 區段分隔：金線 + 中央紅滴 */
.brand-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin:var(--space-6) auto;max-width:240px;color:var(--color-brand)}
.brand-divider::before,.brand-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--color-gold))}
.brand-divider::after{background:linear-gradient(90deg,var(--color-gold),transparent)}
.brand-divider svg{width:16px;height:16px}

/* OLIVIA GARDEN 產品：以線條圖示取代純文字代碼 */
.og-product__code{position:relative}
.og-product__code .og-product__ico{width:17px;height:17px;color:var(--color-primary)}
.og-product:hover .og-product__code{box-shadow:0 4px 14px rgba(184,147,90,.35)}

/* 品牌支柱圖示容器（若內含 svg） */
.pillar__icon svg{width:19px;height:19px}

/* Footer LOGO — 去背無底框、原彩色清晰呈現（不加模糊光暈，避免字跡糊掉） */
.footer__logo{
  height:64px;width:auto;display:block;margin-bottom:var(--space-4);
}
/* 頁尾 LINE QR */
.footer__lineqr{display:flex;align-items:center;gap:12px;margin-top:var(--space-4)}
.footer__lineqr img{
  width:84px;height:84px;border-radius:10px;background:#fff;padding:5px;
  object-fit:contain;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.footer__lineqr span{font-size:12px;color:rgba(250,250,247,.6);line-height:1.6}
.footer__lineqr strong{color:var(--color-gold-light);font-weight:600}

/* 頁尾後台管理入口 */
.footer__bottom-right{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.footer__admin{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:var(--radius-full);
  border:1px solid rgba(184,147,90,.4);color:var(--color-gold-light);
  font-size:12px;font-weight:500;letter-spacing:.02em;
  transition:var(--t-fast);
}
.footer__admin:hover{background:var(--color-gold);color:var(--color-primary);border-color:var(--color-gold)}
.footer__admin svg{width:13px;height:13px}

/* 課程卡 / 詳情頁資訊列的線條圖示統一上色 */
.course-card__info-row svg{color:var(--color-brand)}

/* LINE / 洽詢的紅滴點綴（次要強調，不搶金色主調） */
.accent-brand{color:var(--color-brand)}
.tag--brand{background:var(--color-brand-bg);color:var(--color-brand-dark)}

@media (max-width:480px){
  .brand__logo{height:40px}
  .footer__logo{height:52px}
}

/* ── 課程詳情：介紹圖片 + 當日上課時段 ── */
/* DM／海報類圖片文字密集，一排只放一張才看得清內容 */
.course-intro-imgs{
  display:grid; grid-template-columns:1fr;
  gap:var(--space-5); margin:var(--space-6) 0;
}
.course-intro-img{ margin:0; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--border-subtle); background:var(--bg-subtle); }
.course-intro-img img{
  width:100%; height:auto; display:block;
  cursor:zoom-in; transition:opacity var(--t-fast);
}
.course-intro-img img:hover{ opacity:.92 }
/* 點圖可開原圖的提示 */
.course-intro-img{ position:relative }
.course-intro-img::after{
  content:'點圖看原圖 ↗'; position:absolute; top:10px; right:10px;
  padding:4px 10px; border-radius:var(--radius-full);
  background:rgba(10,10,10,.68); color:#fff; font-size:11.5px;
  opacity:0; transition:opacity var(--t-fast); pointer-events:none;
}
.course-intro-img:hover::after{ opacity:1 }
.course-intro-img figcaption{ padding:10px 14px; font-size:13px; color:var(--text-tertiary);
  background:var(--bg-elevated); line-height:1.6; }
.course-schedule{ margin-top:var(--space-6); background:var(--bg-elevated);
  border:1px solid var(--border-subtle); border-left:3px solid var(--color-gold);
  border-radius:var(--radius-md); padding:var(--space-5) var(--space-6); }
.course-schedule__title{ display:flex; align-items:center; gap:8px;
  font-size:18px; margin-bottom:var(--space-4); color:var(--text-primary); }
.course-schedule__title svg{ color:var(--color-gold-dark); }
.course-schedule__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.course-schedule__list li{ position:relative; padding-left:22px; font-size:15px;
  color:var(--text-secondary); line-height:1.6; }
.course-schedule__list li::before{ content:""; position:absolute; left:4px; top:9px;
  width:8px; height:8px; border-radius:50%; background:var(--color-gold); }

/* ════════════════════════════════════════════════════════════
   教育中心據點（centers.php）
   ════════════════════════════════════════════════════════════ */
.center-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--space-5);
}
.center-card{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  transition:var(--t-base);
}
.center-card:hover{ border-color:var(--color-gold); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.center-card__head{ padding-bottom:var(--space-3); margin-bottom:var(--space-3); border-bottom:1px solid var(--border-subtle) }
.center-card__name{
  font-family:var(--font-display); font-size:20px; font-weight:600;
  margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.center-card__note{
  font-family:var(--font-sans); font-size:11px; font-weight:500;
  padding:2px 9px; border-radius:var(--radius-full);
  background:var(--color-gold-bg); color:var(--color-gold-dark);
}
/* 地址 / 電話：整列可點 */
.center-card__row{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 10px; margin:0 -10px;
  border-radius:var(--radius-md);
  color:var(--text-secondary); font-size:14.5px; line-height:1.65;
  transition:var(--t-fast);
}
.center-card__row:hover{ background:var(--color-gold-bg); color:var(--color-gold-dark) }
.center-card__ico{ flex:none; color:var(--color-gold-dark); margin-top:2px }
.center-card__text{ flex:1; min-width:0 }
.center-card__text--tel{ font-family:var(--font-mono); letter-spacing:.02em }
/* 「開啟地圖 ↗」提示：滑過該列才浮現 */
.center-card__go{
  flex:none; font-size:11px; color:var(--color-gold-dark);
  opacity:0; transition:opacity var(--t-fast); white-space:nowrap; align-self:center;
}
.center-card__row:hover .center-card__go{ opacity:1 }

.center-cta{
  margin-top:var(--space-8); padding-top:var(--space-7);
  border-top:1px solid var(--border-subtle); text-align:center;
}
.center-cta p{ color:var(--text-tertiary); margin-bottom:var(--space-5) }
.center-cta__btns{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap }

@media (max-width:640px){
  .center-grid{ grid-template-columns:1fr; gap:var(--space-4) }
  .center-card{ padding:var(--space-4) }
  .center-card__name{ font-size:18px }
  /* 觸控裝置沒有 hover，提示直接常駐 */
  .center-card__go{ opacity:.7 }
}

/* 課程卡片：整張可點（延伸既有的「查看 →」連結覆蓋整張卡）
   用 ::after 覆蓋而非包一層 <a>，可保留原本的 HTML 結構與鍵盤操作 */
.course-card{ position:relative }
.course-card__cta::after{
  content:''; position:absolute; inset:0; z-index:1;
  border-radius:var(--radius-lg);
}
.course-card:hover{ cursor:pointer }
/* 滑過卡片任一處，「查看 →」也一起有回饋，讓人知道會連到哪 */
.course-card:hover .course-card__cta{ color:var(--color-gold-dark); gap:8px }
/* 鍵盤 Tab 到連結時，外框標示整張卡片 */
.course-card:focus-within{ box-shadow:0 0 0 3px var(--color-gold-bg), 0 0 0 5px var(--color-gold) }
.course-card__cta:focus-visible{ outline:none }

/* 頁尾：教育中心獨立欄 */
.footer__centers li{ margin-bottom:var(--space-4) }
.footer__centers li:last-child{ margin-bottom:var(--space-3) }
.footer__centers .footer__addr{ align-items:flex-start }
.footer__centers .footer__addr strong{ color:rgba(250,250,247,.92); font-weight:600 }
/* 地址與電話各自獨立一行（原本都是 inline 會擠在同一行），圖示自然對齊 */
.footer__centers .footer__addr{ display:flex }
.footer__centers-tel{
  display:flex; align-items:center; gap:8px;
  margin-top:6px;
  font-size:13.5px; color:rgba(250,250,247,.6);
  font-family:var(--font-mono); letter-spacing:.02em;
  transition:var(--t-fast);
}
.footer__centers-tel:hover{ color:var(--color-gold-light) }
.footer__centers-more{
  display:inline-block; margin-top:4px;
  font-size:13px; color:var(--color-gold);
  transition:var(--t-fast);
}
.footer__centers-more:hover{ color:var(--color-gold-light); letter-spacing:.02em }

/* ════════════════════════════════════════════════════════════
   專業髮品目錄（products.php）
   ════════════════════════════════════════════════════════════ */
.product-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--space-5); margin-top:var(--space-5);
}
.product-card{
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:var(--t-base);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--color-gold) }
.product-card__media{
  aspect-ratio:1; background:#fff; display:grid; place-items:center; overflow:hidden;
}
/* 商品圖完整顯示不裁切（白底填滿留白）*/
.product-card__media img{ width:100%; height:100%; object-fit:contain }
.product-card__noimg{
  color:var(--text-muted); font-family:var(--font-display); font-size:18px; letter-spacing:.05em;
}
.product-card__body{ padding:var(--space-4); display:flex; flex-direction:column; flex:1 }
.product-card__name{
  font-size:15px; font-weight:600; line-height:1.5; margin:0 0 8px;
  /* 名稱最多兩行 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card__desc{
  font-size:12.5px; color:var(--text-tertiary); line-height:1.65; margin:0 0 12px;
  /* 說明最多三行，避免長短不一 */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.product-card__foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:8px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border-subtle);
}
.product-card__spec{ font-size:12px; color:var(--text-muted) }
.product-card__price{ font-size:15px; font-weight:700; color:var(--color-gold-dark); font-family:var(--font-mono) }

@media (max-width:600px){
  .product-grid{ grid-template-columns:1fr 1fr; gap:var(--space-3) }
  .product-card__body{ padding:var(--space-3) }
  .product-card__name{ font-size:14px }
}