/* 強迫兩張圖在案頭端等高切齊無縫橫幅 */
@media (min-width: 768px) {
  .style-fixed-height-img {
      height: 320px !important; 
      object-fit: contain !important; /* 圓形藍圖文字完美顯示不被裁切 */
      background: #ffffff;
  }
}

/* ==========================================================================
   2026 嬰兒取名常見問題 FAQ 摺疊面版
   ========================================================================== */

/* 1. 摺疊卡片整體外觀微陰影 */
.style-master-accordion .style-faq-item {
    border: none !important;
    background: #ffffff !important;
    margin-bottom: 15px !important;
    box-shadow: 0 4px 12px rgba(139, 116, 102, 0.04) !important;
    border-radius: 6px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. 滑鼠懸停效果：向上微微浮動，產生高階動態回饋  */
.style-master-accordion .style-faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(139, 116, 102, 0.08) !important;
}

/* 3. 按鈕核心樣式：確保文字自動換行，移除原生瀏覽器點擊外框線 */
.style-master-accordion .style-faq-item .card-header button {
    background: none;
    border: none;
    box-shadow: none !important;
    white-space: normal;
    transition: background-color 0.3s ease;
}

/* 4. 硃砂紅皇家色彩對位 */
.style-master-accordion .style-faq-item .badge-ask {
    background: #cc0000;
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 4px;
}

/* 5. 核心動態交互 點擊展開狀態 */
.style-master-accordion .style-faq-item button[aria-expanded="true"] {
    background: #fff8f2 !important; /* 展開時標題區塊變為溫潤淡米色 */
    border-radius: 6px 6px 0 0 !important;
}

/* 展開時右側箭頭平滑翻轉 180 度，且顏色自動轉為尊榮深紫 */
.style-master-accordion .style-faq-item button[aria-expanded="true"] i.fa-chevron-down {
    transform: rotate(180deg);
    color: #520472 !important;
}

/* 6. 答題內文區塊：淡金絲線條與優雅間距  */
.style-master-accordion .style-faq-item .card-body {
    background: #ffffff;
    border: 1px solid #ebdccb;
    border-top: none;
    border-radius: 0 0 6px 6px;
    font-size: 18px;
    line-height: 1.8;
    color: #555555;
    text-align: justify;
}

/* 7. 行動端（手機版）響應式字體與間距微調  */
@media (max-width: 768px) {
    .style-master-accordion .style-faq-item button span {
        font-size: 15px !important;
    }
    .style-master-accordion .style-faq-item .card-body {
        padding: 20px !important; /* 手機端自動緊湊，完美貼邊移除死白邊 */
    }
}

/* ==========================================================================
   40組嬰兒取名實際範例
   ========================================================================== */
.style-example-grid-container {
  max-width: 1100px;
  margin: 0 auto;
}
.style-master-example-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 6px;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(139, 116, 102, 0.03);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 大器 18px 字體鋼印 */
.style-example-grid-container .card-text-side {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #444444;
  letter-spacing: 0.3px;
  transition: color 0.2s ease;
  text-align: left;
}
.style-example-grid-container i.arrow-side {
  font-size: 15px;
  color: #b5a497;
  transition: all 0.3s ease;
}
/* Icon 色系對位*/
.style-example-grid-container .icon-purple { color: #520472; }
.style-example-grid-container .icon-red    { color: #cc0000; }
.style-example-grid-container .icon-gold   { color: #b8860b; }

/* 滑鼠懸停動態反饋 */
.style-master-example-card:hover {
  background: #ffffff;
  border-color: #520472;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(82, 4, 114, 0.1);
}
.style-master-example-card:hover .card-text-side {
  color: #520472 !important;
}
.style-master-example-card:hover i.arrow-side {
  color: #520472;
  transform: translateX(4px);
}

/* 手機端 RWD 的流暢分流 */
@media (max-width: 768px) {
  .style-master-example-card {
      padding: 14px 18px;
  }
  .style-example-grid-container .card-text-side {
      font-size: 16px !important;
  }
}

/* ==========================
      姓名學文章 相關知識文章 
    ============================ */
.style-master-article-box {
    box-shadow: 0 4px 15px rgba(139, 116, 102, 0.03);
    border-radius: 6px;
    overflow: hidden;
}
.style-custom-list-group .style-article-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-color: #ebdccb; /* 換上典雅的淡金絲分割線 */
    background: #ffffff;
    transition: all 0.2s ease;
}
/* 18px 字體 */
.style-custom-list-group .style-article-item-row .title-content-side {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333333;
    text-align: left;
    display: flex;
    align-items: center;
}
.style-custom-list-group .num-prefix-badge {
    color: #520472;
    display: inline-block;
    min-width: 24px;
}
.style-custom-list-group .icon-purple-tint {
    color: #a38ca8;
    font-size: 15px;
}
.style-custom-list-group .article-anchor-link {
    color: #333333 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    margin-left: 4px;
}
.style-custom-list-group .author-text-side {
    font-size: 16px !important; /* 次要作者字體維持 16px 精確視覺 */
    color: #666666 !important;
    flex-shrink: 0;
    margin-left: 15px;
}

/* 滑鼠移入條列底色變溫潤微黃、文字轉紫 */
.style-custom-list-group .style-article-item-row:hover {
    background: #fffcf7 !important;
}
.style-custom-list-group .style-article-item-row:hover .article-anchor-link {
    color: #520472 !important;
}
.style-custom-list-group .style-article-item-row:hover .icon-purple-tint {
    color: #520472;
}


.style-ci3-modern-pagination {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important; /* 讓 1, 2, 3, 下一頁 之間保有 6px 完美工整間距 */
    background: transparent !important;
    padding: 10px 0 !important;
    width: 100% !important;
}

/*  點擊按鈕（如 2, 3 的超連結，以及下一頁） */
.style-ci3-modern-pagination a,
.style-ci3-modern-pagination b.num_tag a {
    display: inline-block !important;
    padding: 6px 14px !important; /* 完美收緊內襯比例 */
    font-size: 16px !important;
    font-weight: 700 !important; /* 鋼印大器粗字 */
    color: #520472 !important;   /* 預設為老師經典深紫字 */
    background: #ffffff !important;
    border: 1px solid #ebdccb !important; /* 單層優雅細框 */
    border-radius: 4px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(139, 116, 102, 0.02) !important;
    transition: all 0.2s ease !important;
}

/* 選定頁（數字 1）：直接轉為飽滿深紫底、亮白字 */
.style-ci3-modern-pagination b.current_page_item {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #520472 0%, #3a0351 100%) !important;
    border: 1px solid #520472 !important;
    border-radius: 4px !important;
    box-shadow: 0 3px 8px rgba(82, 4, 114, 0.12) !important;
}

/* 拿掉 b.num_tag 本身的生硬外框，但絕不干涉內層 a 的卡片外框 */
.style-ci3-modern-pagination b.num_tag {
    display: inline !important; 
    background: transparent !important; 
    border: none !important; /* 🌟 核心修正：只拿掉外部這層多餘的重複黑框線 */
    padding: 0 !important;   
    margin: 0 !important;    
    box-shadow: none !important;
}

/* 滑鼠懸停體感（Hover）：移入時平滑翻轉為尊榮深紫底白字 */
.style-ci3-modern-pagination a:hover,
.style-ci3-modern-pagination b.num_tag a:hover {
    background: linear-gradient(135deg, #520472 0%, #3a0351 100%) !important;
    color: #ffffff !important;
    border-color: #520472 !important;
    transform: translateY(-1px) !important;
}

/* 手機端 RWD 自適應縮小 */
@media (max-width: 768px) {
    .style-ci3-modern-pagination { gap: 4px !important; }
    .style-ci3-modern-pagination a,
    .style-ci3-modern-pagination b.num_tag a,
    .style-ci3-modern-pagination b.current_page_item {
        padding: 5px 10px !important;
        font-size: 14px !important;
    }
}