.course-page {
display: grid;
grid-template-columns: 180px 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
padding: 80px 48px 24px;
gap: 0 32px;
}

/* 當沒有圖片時，內容撐滿 */
.course-page.no-image .course-main {
  grid-template-columns: 1fr;
}

/* ── 左側導覽（上） ── */
.sidebar {
grid-column: 1;
grid-row: 1;
padding-top: 8px;
}

.sidebar-group {
margin-bottom: 36px;
}

.sidebar-category {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.04em;
margin-bottom: 12px;
}

.sidebar-nav {
display: flex;
flex-direction: column;
gap: 2px;
}

.sidebar-nav li {
position: relative;
}

.sidebar-nav a {
display: block;
font-family: var(--font-serif);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-lt);
letter-spacing: 0.04em;
padding: 5px 0 5px 12px;
transition: color 0.2s;
cursor: pointer;
}

.sidebar-nav a:hover {
color: var(--color-text);
}

.sidebar-nav a.active {
color: var(--color-text);
font-weight: 700;
}

/* 左側 active 指示線 */
.sidebar-nav a.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 16px;
background: var(--color-text);
border-radius: 1px;
}

/* ── 右側主內容（上） ── */
.course-main {
display: grid;
grid-template-columns: auto 1fr;
align-items: stretch;
height: 100%;
}

/* 中間大圖 */
.course-photo {
width: 380px;
height: 100%;
overflow: hidden;
flex-shrink: 0;
}

.course-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}

/* 右側課程詳情面板（會切換） */
.course-panel {
background: var(--color-beige-lt);
padding: 10px 32px 10px;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
gap: 20px;
}

/* 面板切換（JS 控制） */
.panel-content {
display: none;
flex-direction: column;
gap: 20px;
flex: 1;
}

.panel-content.active {
display: flex;
}

/* 面板標題列 */
.panel-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-line);
}

.panel-title {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.04em;
}

.panel-subtitle {
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
}

/* 課程內容 3×2 格 */
.topic-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.topic-card {
background: var(--color-white);
border-radius: 8px;
padding: 7px 14px 7px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}

.topic-icon {
width: 48px;
height: 48px;
object-fit: contain;
}

.topic-name {
font-family: var(--font-serif);
font-size: 0.94rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.04em;
}

.topic-desc {
font-family: var(--font-serif);
font-size: 0.9rem;
letter-spacing: 0.04em;
line-height: 1.5;
}

/* 以上6擇3 標籤 */
.choose-tag {
display: inline-flex;
align-items: center;
padding: 5px 20px;
background:white;
color:#8C3232;
font-family: var(--font-serif);
font-size: 0.75rem;
font-weight: 400;
border-radius: 999px;
align-self: flex-start;
}

/* 價格列 */
.pricing-list {
display: flex;
flex-direction: column;
gap: 10px;
}

.pricing-row {
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-serif);
font-size: 1rem;
letter-spacing: 0.04em;
}

.pricing-row .price {
font-weight: 700;
color: var(--color-text);
flex-shrink: 0;
}

.pricing-row .price-sep {
color: var(--color-line);
flex-shrink: 0;
}

.pricing-row .price-desc {
font-weight: 300;
}

/* LINE 按鈕 */
.line-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 18px;
background: var(--color-white);
color: var(--color-text);
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 400;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
cursor: pointer;
transition: box-shadow 0.25s, transform 0.2s;
align-self: flex-start;
}

.line-btn:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}

/* ── 底部說明（左右橫跨） ── */
.course-footer {
grid-column: 2;
grid-row: 2;
padding: 14px 0 14px;
}

.course-footer p {
font-family: var(--font-serif);
font-size: 0.85rem;
font-weight: 300;
color: var(--color-text-md);
letter-spacing: 0.04em;
line-height: 2;
}

/* ── 初階美妝：條列式 ── */
.bullet-list {
display: flex;
flex-direction: column;
gap: 4px;
padding-left: 4px;
}

.bullet-list li {
display: flex;
align-items: baseline;
gap: 8px;
font-family: var(--font-serif);
font-size: 1rem;
letter-spacing: 0.04em;
line-height: 1.85;
}

.bullet-list li::before {
content: '•';
color: var(--color-text-lt);
flex-shrink: 0;
}

.bullet-note {
font-family: var(--font-serif);
font-size: 0.72rem;
font-weight: 300;
color: var(--color-text-lt);
letter-spacing: 0.04em;
padding-left: 4px;
margin-top: 2px;
}

/* ── 加購課程：3欄卡片 ── */
.addon-header {
text-align: center;
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.06em;
border-bottom: 1px solid var(--color-line);
margin-bottom: 4px;
}

.addon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.addon-card {
background: var(--color-white);
border-radius: 10px;
padding: 20px 16px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}

.addon-icon {
width: 64px;
height: 64px;
object-fit: contain;
}

.addon-name {
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.04em;
}

.addon-list {
padding: 0;
width: 100%;
text-align: center;
}

.addon-list li {
font-family: var(--font-serif);
font-size: 0.9rem;
color: var(--color-text-md);
line-height: 2.5;
}


.addon-list .note {
color: var(--color-text-lt);
font-size: 0.8rem;
}

.addon-duration {
font-family: var(--font-serif);
font-size: 1rem;
margin-top: auto;
}

.addon-footer-note {
text-align: center;
font-family: var(--font-serif);
font-size: 1rem;
padding-top: 8px;
border-top: 1px solid var(--color-line);
}

/* ── 學員心得：before/after 卡片 + 評論 ── */
.review-ba-list {
display: flex;
flex-direction: column;
gap: 12px;
}

.review-ba-card {
background: var(--color-white);
border-radius: 10px;
padding: 16px 20px;
display: flex;
gap: 16px;
align-items: center;
}

.review-ba-imgs {
display: flex;
gap: 4px;
flex-shrink: 0;
}

.review-ba-img {
width: 64px;
height: 80px;
border-radius: 6px;
overflow: hidden;
}

.review-ba-img img {
width: 100%; height: 100%; object-fit: cover;
}

.review-ba-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}

.review-ig-link {
  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 0.75rem;
  color: var(--color-text-md);
  text-decoration: none;
}

.review-ig-link:hover {
  opacity: 0.7;
}

.ig-icon {
  width: 14px;
  height: 14px;
}

.review-ba-text {
flex: 1;
}


.review-ba-title {
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text);
}

.review-ba-desc {
font-family: var(--font-serif);
font-size: 0.78rem;
font-weight: 300;
color: var(--color-text-md);
letter-spacing: 0.03em;
line-height: 1.7;
}

/* 評論卡片區 */
.review-comments {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;   
  -ms-overflow-style: none; 
}

.review-comments::-webkit-scrollbar {
  display: none;
}
.review-comment-card {
background: var(--color-white);
flex: 0 0 260px;   /* ⭐ 核心 */
width: 260px; 
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
}

.comment-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}

.comment-name {
font-family: var(--font-serif);
font-size: 0.78rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.04em;
}

.comment-stars {
font-size: 0.7rem;
letter-spacing: 0.02em;
}

.comment-text {
  flex-grow: 1;
font-family: var(--font-serif);
font-size: 0.75rem;
font-weight: 300;
color: var(--color-text-md);
letter-spacing: 0.03em;
line-height: 1.75;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}

.comment-text {
  font-size: 0.75rem;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ⭐ 展開狀態 */
.comment-text.expanded {
  -webkit-line-clamp: unset;
  display: block;
}

/* 按鈕 */
.comment-toggle {
  border: none;
  background: none;
  color: #a58e7c;
  font-size: 0.7rem;
  cursor: pointer;
  align-self: flex-start;
  padding: 0;
}

.page-end {
  text-align: center;
  font-size: 12px;
  color: #b5aca4;
}
/* ══════════════════════════════
   RWD — 平板 (≤ 1024px)
══════════════════════════════ */
@media (max-width: 1024px) {

  /* ── 整體 layout ── */
  .course-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 72px 32px 32px;
    gap: 24px 0;
  }

  /* sidebar 橫排 + 小字 */
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: unset;
  }

  .sidebar-group {
    flex-shrink: unset;
  }

  .sidebar-category {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 4px;
  }

  .sidebar-nav a {
    padding: 4px 8px;
  }

  .sidebar-nav a.active::before {
    display: none;
  }

  .sidebar-nav a.active {
    border-bottom: 2px solid var(--color-text);
    padding-bottom: 2px;
  }

  /* 主內容區 */
  .course-main {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  /* 圖片橫滿版 */
  .course-photo {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    background: var(--color-beige-lt);
  }

  .course-photo img {
    width: 80%;
    max-width: 420px;
    height: auto;
    object-fit: contain;
    display: block;
  }

  /* 面板 */
  .course-panel {
    padding: 24px 24px 20px;
  }

  /* topic 格 3欄維持但縮小 */
  .topic-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* addon 格 */
  .addon-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  /* footer */
  .course-footer {
    grid-column: 1;
    grid-row: 3;
    padding: 12px 0;
  }
}

/* ══════════════════════════════
   RWD — 手機 (≤ 640px)
══════════════════════════════ */
@media (max-width: 640px) {

  /* ── 整體 layout ── */
  .course-page {
    padding: 64px 16px 24px;
    gap: 16px 0;
  }

  /* sidebar 橫排 + 小字 */
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: unset;
  }

  .sidebar-group {
    flex-shrink: unset;
  }

  .sidebar-category {
    font-size: 0.95rem;
    margin-bottom: 6px;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 4px;
  }

  .sidebar-nav a {
    padding: 4px 8px;
  }

  .sidebar-nav a.active::before {
    display: none;
  }

  .sidebar-nav a.active {
    border-bottom: 2px solid var(--color-text);
    padding-bottom: 2px;
  }

  /* 圖片縮短 */
  .course-photo {
    height: auto;
  }

  .course-photo img {
    height: auto;
    width: 100%;
    object-fit: unset;
  }

  /* 面板 */
  .course-panel {
    padding: 20px 16px 16px;
    gap: 14px;
  }
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .panel-title {
    font-size: 1.05rem;
  }

  .panel-subtitle {
    font-size: 0.8rem;
  }

  /* topic 格 改 2欄 */
  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .topic-icon {
    width: 36px;
    height: 36px;
  }

  .topic-name {
    font-size: 0.82rem;
  }

  .topic-desc {
    font-size: 0.78rem;
  }

  /* 價格 */
  .pricing-row {
    font-size: 0.88rem;
    flex-wrap: wrap;
  }

  /* LINE 按鈕 */
  .line-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
  }

  /* addon 格 改 2欄 */
  .addon-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 6px;
  }

  .addon-icon {
    width: 48px;
    height: 48px;
  }

  .addon-name {
    font-size: 1rem;
  }

  .addon-list li {
    font-size: 0.78rem;
    line-height: 2;
  }

  .addon-header {
    font-size: 1.2rem;
  }

  /* review */
  .review-ba-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .review-ba-img {
    width: 56px;
    height: 70px;
  }

  .review-comment-card {
    flex: 0 0 220px;
    width: 220px;
  }

  /* footer */
  .course-footer {
    padding: 10px 0;
  }

  .course-footer p {
    font-size: 0.78rem;
  }
}