/* =============================================================================
   永誠國際投顧：分析師個人頁 (/analysts/<slug>/index.html) 的唯一樣式表。
   這 23 頁由 tools/build_pages.js 依 tools/analyst-page.html 產生。

   每一頁只 link 這一支我們自己的 CSS（客戶規則 7，docs/GOAL-BOOTSTRAP.md）。所以
   共用的樣式在六個頁面檔裡各有一份「複本」，夾在 SHARED BLOCK START / END 之間，
   而且逐位元組相同：改其中一個，就要在同一次修改裡改掉每一份。搜尋
   "SHARED BLOCK" 找得到全部。

   Bootstrap 5.3.3 先載入，這個檔案排在它後面。排版和元件一律先用 Bootstrap 的
   class，這裡只寫和它不同的地方：元件變數 (--bs-*) 優先，沒有變數才寫屬性。
   所有規則都掛在 .yc-* class 上，沒有單獨的元素 selector，也沒有單獨的 Bootstrap
   class selector（搜尋 "yc-" 就找得到每一處改動）。

   共用區塊的標題不編號：每個檔案的節次不同，而區塊內容必須完全相同。

   這一頁的版面和元件都先用 Bootstrap：卡片是 .card、標籤是 .badge、影片縮圖是
   .ratio、常見問題是 .accordion、按鈕是 .btn，格線是 .row / .col-*，間距和排列用
   工具 class。只有桌機的兩欄（側欄要跨過三個 section 又不撐高任何一列）留著
   CSS grid，理由寫在「頁面框架」那一節。

   目錄
     1. 設計變數 (design token)   SHARED
     2. 頁面主題 .yc-page          SHARED
     3. 內容欄 .yc-container       SHARED
     4. 頁首與選單                 SHARED
     5. 麵包屑 .yc-breadcrumb      SHARED
     6. 區塊標題 .yc-title         SHARED
     7. 膠囊按鈕 .yc-btn           SHARED
     8. 頁面框架與桌機兩欄 grid    .yc-ap .yc-ap__grid
     9. 「more」按鈕               .yc-ap__more      btn
    10. 橫幅                       .yc-ap__hero      184:8327
    11. 投資理念                   .yc-ap__card*     card / badge   184:7993
    12. 專業背景 & 經歷            .yc-ap__bg-*      card           184:8294
    13. LINE 卡片（只在桌機側欄）  .yc-ap__line-card 184:8314
    14. 影音解盤                   .yc-ap__video*    ratio          184:8029
    15. 股勢觀點                   .yc-ap__article*  card           184:8064
    16. 分析師三大優勢             .yc-ap__adv*      card           184:8090
    17. 適合哪些投資人             .yc-ap__fit*      card           184:8124
    18. 專屬系統區塊               .yc-ap__sys*      card           184:8147
    19. 常見問題                   .yc-faq*          accordion      184:8234
    20. 行動呼籲 (CTA)             .yc-ap__cta*      184:8268
    21. 頁尾                       SHARED

   斷點只有兩個，和 Bootstrap 的 md (768) / xl (1200) 一致。CSS 裡的 media query
   都寫成 max-width，所以每一段也會套用到所有更窄的寬度：
     @media (max-width: 1199.98px)   平板與手機
     @media (max-width:  767.98px)   只有手機
   每一段 media query 都放在它修改的元件旁邊，不集中在檔案最後。
   ============================================================================= */

/* ==== SHARED BLOCK START: 設計變數（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* 整站的設計變數 (design token)。這裡只定義 --yc-* 自訂屬性，不設定任何 --bs-*：
   Bootstrap 的全站變數由下一個區塊的 .yc-page 設定，這樣搜尋 "yc-" 就找得到
   每一處改動。

   斷點都寫成 max-width，所以每一段也會套用到所有更窄的寬度：
     @media (max-width: 1199.98px)   平板與手機   Figma 231:14
     @media (max-width:  767.98px)   只有手機     Figma 415:1841 */

:root {
  --yc-red: #c8102e;
  --yc-black: #111;
  --yc-gold: #c8a96b;
  --yc-gold-light: #ffdb92;
  --yc-gray: #888;
  --yc-gray-dark: #333;
  --yc-line: #eaeaea;
  --yc-bg: #f4f4f4;
  --yc-white: #fff;
  /* Figma 的具名樣式「紅效果漸層」（狀態節點 446:3639）。每一顆紅色實心按鈕的
     滑鼠移入 (hover) 底色都是它：頁首的會員按鈕 (182:1657)、帶圖示的膠囊按鈕
     (449:20456)，以及 join 頁的送出按鈕。
     一律用 background-image 套用，不要用 background 簡寫：簡寫會把 background-color
     重設成透明，按鈕又有 transition 的話，滑鼠移開時漸層瞬間消失、紅色才從透明
     慢慢淡入，按鈕就會閃一下。 */
  --yc-red-hover: linear-gradient(180deg, #c8102e 6.25%, #a80f28 100%);
  --yc-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --yc-font-en: "Inter", var(--yc-font);
  /* Figma 的桌機版畫在 1440 的畫框裡：80px 的頁首，下面是 1200px 的內容欄，
     左右留白各 120px。 */
  --yc-header-h: 80px;
  --yc-content: 1200px;
  /* 120px 不是固定值，而是 1440 畫框放進 1200px 內容欄後兩側剩下的空間：如果寫成
     固定值，1280 或 1366 的筆電兩側仍各留 120，內容欄就被吃掉（1280 只剩 1040）。
     所以左右留白取剩下的空間，且不小於 24px，也就是整份設計裡最小的邊緣間距。
     百分比以 viewport 為基準計算，因為用到這個設計變數的都是滿版的區塊。
     1440 -> 120、1366 -> 83、1280 -> 40、1200 -> 24。 */
  --yc-gutter: max(24px, (100% - var(--yc-content)) / 2);
}

/* 231:14 是 768 的畫框：內容 688、左右留白 40、頁首 72px。 */
@media (max-width: 1199.98px) {
  :root {
    --yc-gutter: 40px;
    --yc-header-h: 72px;
  }
}

/* 415:1841 是 360 的畫框：內容 328、左右留白 16。頁首維持 72。 */
@media (max-width: 767.98px) {
  :root {
    --yc-gutter: 16px;
  }
}
/* ==== SHARED BLOCK END: 設計變數 ==== */

/* ==== SHARED BLOCK START: 頁面主題（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* .yc-page 是每一頁 <body> 上的 class，也是整站唯一設定 --bs-* 全站變數的地方。
   Bootstrap 的 Reboot 用這些變數畫 <body>，所以在同一個元素上設定就會生效，
   不必再寫 body 的元素 selector。

   連結和圖片沒有對應的 --bs-* 變數（Reboot 的 a 是寫死的 text-decoration: underline），
   所以用 :where(.yc-page) 包住：:where() 的權重是 0，整條 selector 的權重和它取代的
   元素 selector 完全一樣，膠囊按鈕那種「單一 class 設 color」的規則才不會被蓋掉。 */

.yc-page {
  --bs-body-font-family: var(--yc-font);
  --bs-body-color: var(--yc-black);
  --bs-body-bg: var(--yc-white);
  /* 設計稿以 1440 繪製。1200 以下不可以出現水平捲動。 */
  overflow-x: hidden;
  /* 內容比視窗短的頁面，頁尾要貼齊視窗底部、下面不露白：body 最少和視窗一樣高，HTML 上的
     .d-flex .flex-column 和 <main> 的 .flex-grow-1 把多出來的高度交給 <main>。
     Bootstrap 的 .min-vh-100 是 100vh，手機的網址列收合時會多出一段，所以用 dvh；
     不支援 dvh 的舊瀏覽器用前一行的 vh。 */
  min-height: 100vh;
  min-height: 100dvh;
}

/* 這裡刻意不寫 a:hover { color: inherit }：它的權重會比單一 class 的按鈕高，
   滑鼠移入時會蓋掉按鈕自己的文字顏色。Bootstrap 的 a:hover 只改一個 CSS 變數，
   下面的 color: inherit 已經讓它沒有作用。 */
:where(.yc-page) a {
  color: inherit;
  text-decoration: none;
}

:where(.yc-page) img {
  max-width: 100%;
}
/* ==== SHARED BLOCK END: 頁面主題 ==== */

/* ==== SHARED BLOCK START: 內容欄（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* 每個區塊的內容欄都是 class="container yc-container"。Bootstrap 的 .container 已經
   給了 width: 100%、左右 auto 的 margin，以及由 --bs-gutter-x 算出來的左右 padding，
   所以這裡只改兩件事：最大寬度，以及隨斷點改變的左右留白。 */

.yc-container {
  /* .container 的 padding 是 --bs-gutter-x 的一半，所以這裡要放兩倍。 */
  --bs-gutter-x: calc(var(--yc-gutter) * 2);
  max-width: calc(var(--yc-content) + var(--yc-gutter) * 2);
}
/* ==== SHARED BLOCK END: 內容欄 ==== */

/* ==== SHARED BLOCK START: 頁首與選單（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* layout.js 渲染到 #yc-header 的頁首列、主選單、兩個下拉選單，以及 1200 以下的
   滑入式選單面板。用到的 Bootstrap 元件：
     .navbar + .navbar-expand-xl   頁首列，以及 1200 這個「橫列變面板」的斷點
     .dropdown / .dropdown-menu    兩個下拉選單（data-bs-toggle="dropdown"）
     .offcanvas                    選單面板（data-bs-toggle="offcanvas"）
     .navbar-toggler               漢堡按鈕
   下面只寫和 Bootstrap 預設值不同的部分；能用元件變數 (--bs-*) 表達的就用變數。

   斷點都寫成 max-width，所以每一段也會套用到所有更窄的寬度：
     @media (max-width: 1199.98px)   平板與手機   Figma 367:3094
     @media (max-width:  767.98px)   只有手機     Figma 372:3598
   只有「桌機才成立」的規則（絕對定位的主選單、滑鼠移入開選單、桌機遮罩）寫成
   min-width: 1200px，因為它們在面板上會造成錯誤的版面。 */

/* 頁首列 --------------------------------------------------------------------- */

/* HTML 上的 .position-relative 加這裡的 z-index，讓頁首自成一個堆疊環境，下拉選單和
   遮罩才會蓋在頁面內容上面；1000 是改版前的值。
   頁首不是 fixed 也不是 sticky，會跟著頁面捲走，和上線中的版本一致。 */
.yc-header {
  z-index: 1000;
}

/* .navbar 已經是 flex、垂直置中、兩端對齊。1200 以上 .navbar-expand-xl 會把
   justify-content 改成 flex-start，但 Figma 的頁首列在每個寬度都是兩端對齊
   （左 logo、右會員按鈕或漢堡按鈕），所以這裡寫回 space-between。 */
.yc-header__bar {
  /* 桌機主選單的連結在 Figma 裡沒有左右 padding。 */
  --bs-navbar-nav-link-padding-x: 0;
  --bs-navbar-color: var(--yc-black);
  --bs-navbar-hover-color: var(--yc-red);
  justify-content: space-between;
  height: var(--yc-header-h);
  padding: 20px var(--yc-gutter);
  background: var(--yc-white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* .navbar-brand 自己帶了上下 padding 和右邊 margin；Figma 的 logo 直接貼齊內容邊緣。 */
.yc-header__logo {
  padding: 0;
  margin: 0;
}

.yc-header__logo img {
  display: block;
  width: 186px;
  height: 32px;
  /* 原始 PNG 帶有透明留邊；cover 把它裁成 Figma 的框。 */
  object-fit: cover;
}

/* 231:14 把頁首列縮成 72px，logo 也跟著縮小。 */
@media (max-width: 1199.98px) {
  .yc-header__bar {
    padding: 16px var(--yc-gutter);
  }

  .yc-header__logo img {
    width: 167px;
    height: 28px;
  }
}

/* 會員按鈕 ------------------------------------------------------------------- */
/* 頁首列裡唯一的按鈕（Figma 182:1655）。1200 以下它改放進選單面板，成為主選單的
   最後一列（.yc-nav__member），兩者由 d-none / d-xl-inline-flex 和 d-xl-none 切換，
   所以無障礙樹裡任何時候都只有其中一個。 */

.yc-header__member {
  /* 改版前這顆按鈕沒有框線，.btn 預設的 1px 框線會讓圓角邊緣多一層去鋸齒。 */
  --bs-btn-border-width: 0;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 24px;
  --bs-btn-color: var(--yc-white);
  --bs-btn-bg: var(--yc-red);
  --bs-btn-border-color: var(--yc-red);
  --bs-btn-border-radius: 30px;
  --bs-btn-hover-color: var(--yc-white);
  --bs-btn-hover-bg: var(--yc-red);
  --bs-btn-hover-border-color: var(--yc-red);
  /* 按下時 (.btn:active) 的權重比 :hover 高；不設的話，字會繼承成黑色。 */
  --bs-btn-active-color: var(--yc-white);
  --bs-btn-active-bg: var(--yc-red);
  --bs-btn-active-border-color: var(--yc-red);
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
}

/* Figma 182:1655 -> 182:1657「紅效果漸層」：滑鼠移入 (hover) 的狀態是漸層，不是
   平塗的單色，而漸層沒有對應的 --bs-btn-* 變數。hover 只在有真實指標裝置時生效，
   點一下之後按鈕才不會卡在漸層；鍵盤操作也有同樣的狀態。 */
@media (hover: hover) {
  .yc-header__member:hover {
    background-image: var(--yc-red-hover);
  }
}

.yc-header__member:focus-visible {
  background-image: var(--yc-red-hover);
}

/* .btn:focus-visible 和 .navbar-toggler:focus 都會關掉 outline，改用外發光的
   box-shadow；設計稿裡這兩顆按鈕都沒有外發光的焦點框，所以把瀏覽器預設的焦點
   外框還原，鍵盤操作才看得見。 */
.yc-header__member:focus-visible,
.yc-header__burger:focus-visible {
  outline: revert;
}

/* 主選單 --------------------------------------------------------------------- */
/* 1200 以上是頁首列上置中的一橫列，1200 以下是從右側滑入的選單面板（offcanvas）。
   同一份 HTML，差別只在這裡的 CSS。 */

/* Figma 把這一列對齊 1440 畫框的中線，不是 logo 和會員按鈕之間剩下空間的中線，
   所以用絕對定位，不用 flex 的 flex-grow。
   權重要兩個 class 才蓋得過 .navbar-expand-xl .offcanvas 的 position: static。
   位移用 translate 而不是 transform：.navbar-expand-xl .offcanvas 帶
   transform: none !important。 */
@media (min-width: 1200px) {
  .yc-header__bar .yc-nav {
    position: absolute;
    left: 50%;
    /* 24px 高的連結列在 80px 的頁首列裡垂直置中：(80 - 24) / 2 = 28。 */
    top: 28px;
    /* .offcanvas-end 帶 right: 0、.offcanvas 帶 bottom: 0；和 left / top 同時成立
       會把寬高撐成「從 left 到 right」，選單就不是置中而是靠右半邊。 */
    right: auto;
    bottom: auto;
    translate: -50% 0;
  }
}

.yc-nav__list {
  /* .navbar-nav 預設上下各 0.5rem；桌機的連結列高度就是文字的 24px。 */
  --bs-nav-link-padding-y: 0;
}

/* 標籤和下拉箭頭 (chevron) 併成一列。.dropdown 只給了 position: relative，
   所以這一行是必要的；下拉選單是絕對定位，不算在這一列裡。 */
.yc-nav__group {
  display: flex;
  align-items: center;
  column-gap: 2px;
}

.yc-nav__link {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
}

/* 446:3639 沒有畫主選單連結的狀態：紅色是這個版本自己加的。.nav-link 自己的
   :hover 已經吃掉 --bs-navbar-hover-color，這裡補的是「滑鼠停在群組任何一處、
   或鍵盤焦點在群組裡」時，連結也要跟著變紅。1200 以下面板裡不做這個回饋，
   所以兩條都限定在桌機。 */
@media (min-width: 1200px) {
  .yc-nav__group:focus-within > .yc-nav__link {
    color: var(--yc-red);
  }
}

@media (hover: hover) and (min-width: 1200px) {
  .yc-nav__group:hover > .yc-nav__link {
    color: var(--yc-red);
  }
}

/* 只有一個 12px 下拉箭頭 (chevron) 的開關按鈕。不掛 .btn：它會把按鈕的文字顏色
   從瀏覽器預設的 buttontext 換成 --bs-body-color，也會把原生焦點外框換成
   Bootstrap 的外發光，而 .btn 的外觀在這裡一條都用不到。 */
.yc-nav__toggle {
  display: flex;
  align-items: center;
  padding: 6px 0;
  border: 0;
  background: none;
  line-height: 0;
}

/* 改版前這顆按鈕是行內元素，坐在主選單那一行的文字基線上，比整列的中線低 1px。
   現在整列是 flex 並且垂直置中，所以用 1px 把它挪回原本的位置（視覺維持原狀）。
   1200 以下的面板裡，這顆按鈕本來就是自己撐滿 64px 的列，不需要補。 */
@media (min-width: 1200px) {
  .yc-nav__toggle {
    margin-top: 1px;
  }
}

/* 下拉箭頭在所有狀態都朝下。Figma 在選單打開時也是這樣畫（手機 372:3708），
   所以不做旋轉。 */
.yc-nav__chevron {
  display: block;
  width: 12px;
  height: 12px;
}

/* 下拉選單 ------------------------------------------------------------------- */
/* 兩種形狀：分析師選單是姓名卡片的網格，免費專區選單是單欄的文字。
   display 和定位由 Bootstrap 負責：.navbar-nav 裡的 .dropdown-menu 是 static
   （面板裡會把下面的列往下推），1200 以上 .navbar-expand-xl 改成 absolute。 */

.yc-menu {
  --bs-dropdown-min-width: 0;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-spacer: 0;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-bg: var(--yc-white);
  --bs-dropdown-link-color: var(--yc-black);
  --bs-dropdown-link-hover-color: var(--yc-black);
  --bs-dropdown-link-hover-bg: var(--yc-line);
  /* 按下時 (:active) 和滑鼠移入一樣是灰底，不用 Bootstrap 預設的藍底白字。 */
  --bs-dropdown-link-active-color: var(--yc-black);
  --bs-dropdown-link-active-bg: var(--yc-line);
  /* 選單畫在頁首列這個堆疊環境 (stacking context) 裡，照 DOM 順序就已經蓋在
     遮罩上面；給了 z-index 反而會蓋過漢堡按鈕。 */
  --bs-dropdown-zindex: auto;
  /* Figma 336:5 與 336:35：上下各 2px 金邊，沒有陰影。 */
  border-top: 2px solid var(--yc-gold);
  border-bottom: 2px solid var(--yc-gold);
}

/* Bootstrap 在 navbar 裡打開下拉選單時，會在選單上加 data-bs-popper="static"，
   那條規則（.dropdown-menu[data-bs-popper]）的權重是兩個 class，所以這裡也要
   兩個 class 才蓋得過它的 top: 100%。 */
.yc-nav .yc-menu {
  left: 0;
  /* 主選單在 80px 頁首列裡的 y=28，所以 52px 讓下拉選單落在 y=80。 */
  top: 52px;
}

/* 23 位分析師排成三欄的網格，每欄 160px，由左到右排滿一列再換下一列。 */
.yc-menu--analysts {
  width: 480px;
  grid-template-columns: repeat(3, 160px);
  grid-auto-rows: 56px;
}

/* .dropdown-menu.show 是 display: block，權重相同，所以這條要排在它後面。 */
.yc-menu--analysts.show {
  display: grid;
}

/* 1200 以上：滑鼠移入 (hover) 或鍵盤焦點停在群組裡就打開，這是 Bootstrap 的
   dropdown 沒有的機制（它只有 click）。觸控裝置沒有 hover，改用下拉箭頭按鈕
   打開同一個選單，那條路徑走 Bootstrap 的 .show。 */
@media (min-width: 1200px) {
  .yc-nav .dropdown:focus-within > .dropdown-menu {
    display: block;
  }

  .yc-nav .dropdown:focus-within > .yc-menu--analysts {
    display: grid;
  }
}

@media (hover: hover) and (min-width: 1200px) {
  .yc-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }

  .yc-nav .dropdown:hover > .yc-menu--analysts {
    display: grid;
  }
}

/* 點了選單項目之後由 layout.js 設定，即使滑鼠還停在上面，選單也會關閉。它必須
   排在上面那些打開選單的規則之後。 */
.yc-nav .dropdown.is-dismissed > .dropdown-menu {
  display: none;
}

/* 滑鼠移入 (hover) 的橋接區。群組只有 24px 高的連結列（y=28 到 52），下拉選單
   從 y=80 開始，滑鼠中間經過的 28px 不屬於任何一方，還沒碰到選單，選單就關了。
   這條看不見的區域算在選單裡，所以往下移動時群組維持 hover：
   28px 的空隙 + 2px 上邊框 = 30px。
   只用在桌機：平板與手機的選單面板裡，下拉選單在一般文件流中，這條區域會蓋住
   它上面那一列。 */
@media (hover: hover) and (min-width: 1200px) {
  .yc-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    height: 30px;
  }
}

.yc-menu__item {
  height: 56px;
  border-bottom: 1px solid var(--yc-line);
  transition: background 0.2s;
}

/* Figma 336:43 -> 336:47 與 336:52 -> 336:55：整列變成 #eaeaea（--bs-dropdown-link-hover-bg）。
   姓名維持原色；只有暱稱變紅。 */
.yc-menu--analysts .yc-menu__item {
  padding: 8px 8px 0 24px;
}

.yc-menu__name {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--yc-black);
}

.yc-menu__nick {
  display: block;
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  color: var(--yc-gray);
}

@media (hover: hover) {
  .yc-menu__item:hover .yc-menu__nick {
    color: var(--yc-red);
  }
}

.yc-menu__item:focus-visible .yc-menu__nick {
  color: var(--yc-red);
}

/* 免費專區選單：單欄 160px、每列 56px，文字垂直置中（d-flex align-items-center）。 */
.yc-menu:not(.yc-menu--analysts) {
  --bs-dropdown-item-padding-x: 24px;
  --bs-dropdown-item-padding-y: 0;
  width: 160px;
}

.yc-menu:not(.yc-menu--analysts) .yc-menu__item {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

/* 「投資早報」和「研究報告」在第一期 (phase 1) 沒有頁面，config/site.js 裡
   href: null，所以輸出的是 <span>。Figma 仍然用完整的顏色畫它們，只是不會亮起來。 */
@media (hover: hover) {
  .yc-menu__item.is-disabled:hover {
    background: none;
  }
}

/* 漢堡按鈕 ------------------------------------------------------------------- */
/* Figma 231:76：三條 36x4 的紅色橫條，在 40px 的框裡位於 y 8 / 18 / 28。
   打開的狀態 367:3440 是 X。1200 以上由 d-xl-none 隱藏。 */

.yc-header__burger {
  --bs-navbar-toggler-padding-x: 0;
  --bs-navbar-toggler-padding-y: 0;
  --bs-navbar-toggler-border-radius: 0;
  /* 設計稿沒有外發光的焦點框；上面已經把原生焦點外框還原。 */
  --bs-navbar-toggler-focus-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  border: 0;
}

.yc-header__burger span {
  display: block;
  width: 36px;
  height: 4px;
  background: var(--yc-red);
  transition: transform 0.2s, opacity 0.2s;
}

/* Figma 的 X 佔 36x24，所以兩條橫條以 29deg 相交。用旋轉可以讓橫條長度維持 36，
   而不是 Figma 斜切後的 41，這是唯一的差異。
   10px 是最上面那條和中間那條相距 20px 的一半。
   狀態直接讀 aria-expanded，不另外加 class：layout.js 本來就要在面板開關時
   維護這個屬性（offcanvas 不像 dropdown 會自己維護觸發元素的 aria-expanded）。 */
.yc-header__burger[aria-expanded="true"] span:first-child {
  transform: translateY(10px) rotate(-29deg);
}

.yc-header__burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.yc-header__burger[aria-expanded="true"] span:last-child {
  transform: translateY(-10px) rotate(29deg);
}

/* 遮罩 ----------------------------------------------------------------------- */
/* 一個元素兩種用途，和改版前一樣：1200 以下是選單面板後面變暗的頁面，1200 以上是
   下拉選單打開時頁首以下變暗的頁面。
   面板用的是自己的遮罩，不是 Bootstrap 的 .offcanvas-backdrop（面板設了
   data-bs-backdrop="false"）：這個元素帶 data-testid="menu-overlay"，而且桌機那個
   狀態 Bootstrap 根本沒有。點它會關閉面板，靠的是 data-bs-dismiss="offcanvas"，
   沒有自訂 script。 */

.yc-header__overlay {
  display: none;
}

/* 桌機 Figma 564:6592 與 564:6918：下拉選單打開時，頁首以下的整個頁面（包含頁尾）
   蓋上 25% 的黑，頁首列維持白色，所以從頁首列的下緣開始。條件和上面打開選單的
   規則一樣（hover、鍵盤焦點、Bootstrap 的 .show，被 .is-dismissed 關掉的不算）。
   pointer-events: none：遮罩只是視覺效果，滑鼠移到它上面就等於離開選單。
   display 不能做轉場，所以桌機的遮罩一直在畫面上，用 opacity 淡入淡出。 */
@media (min-width: 1200px) {
  .yc-header__overlay {
    position: fixed;
    inset: var(--yc-header-h) 0 0;
    background: rgba(0, 0, 0, 0.25);
    pointer-events: none;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .yc-header:has(.yc-nav__group:not(.is-dismissed):focus-within) .yc-header__overlay,
  .yc-header:has(.yc-nav__group:not(.is-dismissed) > .dropdown-menu.show) .yc-header__overlay {
    opacity: 1;
  }
}

@media (hover: hover) and (min-width: 1200px) {
  .yc-header:has(.yc-nav__group:not(.is-dismissed):hover) .yc-header__overlay {
    opacity: 1;
  }
}

/* 選單面板 ------------------------------------------------------------------- */
/* 1200 以下，同一份主選單 HTML 變成 offcanvas 面板，蓋在變暗的頁面上。頁首列的
   漢堡按鈕留在面板上方，同時當作關閉按鈕；打開的下拉選單會把底下的列往下推，
   不是浮在它們上面。
   Figma：選單面板 367:3094、分析師選單打開 367:3203、免費專區打開 367:3312。 */

@media (max-width: 1199.98px) {
  /* Figma 367:3422：選單面板後面的頁面（包含頁首）會變暗。 */
  .yc-header__bar:has(.yc-nav.show) .yc-header__overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.25);
  }

  .yc-header__burger {
    position: relative;
    z-index: 3;
  }

  .yc-nav {
    --bs-offcanvas-width: 480px;
    /* 遮罩 1 < 面板 2 < 漢堡按鈕 3，都在 .yc-header 這個堆疊環境裡。 */
    --bs-offcanvas-zindex: 2;
    --bs-offcanvas-border-width: 0;
    /* 設計稿裡面板是直接出現的，沒有滑入動畫。 */
    --bs-offcanvas-transition: none;
    /* iOS Safari：上下各為 0 的固定定位會算進底部網址列下方的區域，最後一列
       （會員專區）可能被它擋住。dvh 是實際看得到的高度。 */
    height: 100dvh;
    overflow-y: auto;
    /* 頁首列的漢堡按鈕留在選單面板上方，同時當作面板的關閉按鈕。 */
    padding-top: var(--yc-header-h);
  }

  /* 367:3094：面板裡的列不管滑鼠怎麼動都是黑色，而且 hover 和鍵盤焦點都不可以
     打開子選單：那個狀態只由開關按鈕負責。 */
  .yc-header__bar {
    --bs-navbar-hover-color: var(--yc-black);
  }

  /* 每個主選單項目一列 64px。一般項目的連結本身就是那一列。 */
  .yc-nav__link {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid var(--yc-line);
    font-size: 16px;
    line-height: 26px;
  }

  /* 有下拉選單的項目：標籤和下拉箭頭併排成第一列，選單用 width 換到下一行，
     把後面的列往下推。這一列的左右 padding 和分隔線改由 li 負責，所以連結
     要把這兩項讓出來。 */
  .yc-nav__group {
    flex-wrap: wrap;
    /* 標籤和下拉箭頭之間的距離，比桌機大。 */
    column-gap: 6px;
    padding: 0 24px;
  }

  .yc-nav__group > .yc-nav__link {
    padding: 0;
    border-bottom: 0;
  }

  .yc-nav__group > .yc-nav__toggle {
    height: 64px;
    /* 下方多留 1px：改版前這顆按鈕坐在文字基線上，12px 的箭頭落在 64px 列的
       25.5px 處（比正中央高 0.5px）。置中後靠這 1px 補回同樣的位置。 */
    padding: 0 0 1px;
  }

  /* 分隔線畫在第一列（64px，含 1px 邊框）的底部，不是整個 li 的底部：下拉選單
     打開時它會把後面的列往下推，分隔線必須留在標籤那一列下面。 */
  .yc-nav__group::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 63px;
    height: 1px;
    background: var(--yc-line);
  }

  /* 整列都能展開／收合，不是只有 12px 的箭頭：按鈕的 ::after 蓋滿第一列，點到
     哪裡都是點到這顆按鈕，鍵盤和 aria-expanded 照舊。「分析師團隊」的文字是真的
     連結，疊在這層上面，點文字一樣前往 /analysts/；「免費專區」的文字是 <span>，
     沒有疊上去，點了就是展開。 */
  .yc-nav__toggle::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 64px;
  }

  .yc-nav__group > a.yc-nav__link {
    position: relative;
    z-index: 1;
  }

  /* 子選單橫跨整個面板的寬度，抵銷上面那一列的左右 padding。 */
  .yc-nav__group > .yc-menu {
    width: calc(100% + 48px);
    margin-inline: -24px;
  }

  /* 367:3203：三欄、每列 64px，和選單面板一樣寬。 */
  .yc-menu--analysts {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 64px;
  }

  .yc-menu__item {
    height: 64px;
  }

  .yc-menu--analysts .yc-menu__item {
    /* 上方 11px 的 padding 讓 22+20 的姓名／暱稱兩行在 64px 的列裡垂直置中。 */
    padding: 11px 8px 0 24px;
  }

  .yc-menu__name {
    font-size: 16px;
    line-height: 22px;
  }

  .yc-menu__nick {
    font-size: 14px;
  }

  .yc-menu:not(.yc-menu--analysts) .yc-menu__item {
    font-size: 16px;
    line-height: 22px;
  }

  /* Figma 367:3433：會員那一列是紅色橫帶，配白色粗體字，整列 64px 都是紅的。
     改版前這裡有一條 1px 灰線：舊的 .yc-nav__member > .yc-nav__link 權重 (0,2,0)
     輸給列的共用規則 (0,3,1)，border-bottom: 0 從來沒有生效。現在照 Figma 畫。 */
  .yc-nav__link--member {
    border-bottom: 0;
    background: var(--yc-red);
    color: var(--yc-white);
    font-weight: 700;
  }

  .yc-nav__link--member:hover,
  .yc-nav__link--member:focus {
    color: var(--yc-white);
  }
}

/* 手機 372:3598：選單面板蓋滿螢幕，分析師選單重新排列。 */
@media (max-width: 767.98px) {
  .yc-nav {
    --bs-offcanvas-width: 100%;
  }

  /* 372:4148：兩欄，取代平板的三欄。 */
  .yc-menu--analysts {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==== SHARED BLOCK END: 頁首與選單 ==== */

/* ==== SHARED BLOCK START: 麵包屑（4 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* 規則的來源是客戶的 docs/永誠官網-第一階段頁面麵包屑總表_0921.xlsx：
     範圍      分析師團隊、23 個分析師個人頁、加入會員、感謝頁。首頁不顯示；
               其餘頁面（文章頁）客戶說後續版本再補。
     分隔符號  一律用「›」，前後各一個半形空格。
     可點規則  最後一層是目前頁面：粗體、沒有連結、aria-current="page"。
               其餘各層都是連結。
     連結網址  正式網域 https://www.yong-cheng.com.tw，沒有結尾斜線、沒有 .html。
     手機版    不截斷、不用「…」；一行放不下就自動折行。字級不小於 14px。
               （還沒做：見這個區塊的最後一段。）
     無障礙    外層是 <nav aria-label="麵包屑">。
   位置來自客戶的四張桌機示意圖（沒有 Figma 畫框）：導覽列下方，左緣對齊內容欄。
   字體用 Figma 的 Typography System（461:778）：Body，Noto Sans TC 16/24。
   上層是資訊灰 #888、字重 400；目前頁面是專業黑 #111、字重 700（總表規定粗體）。

   HTML 靜態寫在各頁，放在 #yc-header 和 <main> 之間，底是 Bootstrap 的麵包屑元件：
     nav.yc-breadcrumb > div.container.yc-container
       > ol.breadcrumb.yc-breadcrumb__list > li.breadcrumb-item
   目前頁面那一層再加 .active 和 aria-current="page"。.breadcrumb 已經給了 flex、
   自動換行和 list-style: none，分隔符號也由 .breadcrumb-item + .breadcrumb-item::before
   畫出來，所以下面只設定它的元件變數，不重寫這些。

   示意圖裡標題的位置沒有變：麵包屑是放在灰底區塊原本的上方 padding 裡。做法是
   nav 留在一般的文件流裡，再用負的 margin-bottom 把 <main> 往上拉：
     --yc-crumb-top   清單和頁首的距離
     --yc-crumb-pull  <main> 往上拉多少
   拉回的量等於 nav 的高度，所以版面完全不動。萬一折成兩行，nav 自己長高，
   下面的內容跟著往下，不會疊在一起。 */
.yc-breadcrumb {
  --yc-crumb-top: 24px;
  --yc-crumb-pull: 48px;
  position: relative;
  z-index: 1;
  padding-top: var(--yc-crumb-top);
  margin-bottom: calc(-1 * var(--yc-crumb-pull));
  /* 四個頁面的第一個區塊都是灰底；折行時 nav 會有一段沒有被 <main> 蓋到。 */
  background: var(--yc-bg);
}

/* 分析師個人頁的上方 padding 只有 40（其他頁是 80），24px 高的清單放正中間。 */
.yc-breadcrumb--tight {
  --yc-crumb-top: 8px;
  --yc-crumb-pull: 32px;
}

/* flex-wrap：一行放不下時，整層連同它前面的「›」一起掉到下一行。用 flex 也讓 HTML 裡
   <li> 之間的換行不會變成多出來的空格。 */
/* 分隔符號含前後的半形空格（總表規定），左右再各 8px 才是示意圖的間距：
   --bs-breadcrumb-item-padding-x 同時給項目的左內距和分隔符號的右內距。 */
.yc-breadcrumb__list {
  --bs-breadcrumb-divider: " › ";
  --bs-breadcrumb-divider-color: var(--yc-gray);
  --bs-breadcrumb-item-padding-x: 8px;
  --bs-breadcrumb-item-active-color: var(--yc-black);
  --bs-breadcrumb-font-size: 16px;
  --bs-breadcrumb-margin-bottom: 0;
  line-height: 24px;
  color: var(--yc-gray);
}

/* pre 讓分隔符號前後的半形空格不會被合併掉；字重寫回 400，因為目前頁面那一層是
   粗體，它的 ::before 會跟著繼承。 */
.yc-breadcrumb__list .breadcrumb-item + .breadcrumb-item::before {
  white-space: pre;
  font-weight: 400;
}

/* 總表規定目前頁面要粗體。顏色已經由 --bs-breadcrumb-item-active-color 給了，
   字重沒有對應的變數。 */
.yc-breadcrumb__list .active {
  font-weight: 700;
}

/* 由 script 填入的項目（分析師姓名）：設定檔裡找不到時留空，整個項目就不顯示。 */
.yc-breadcrumb__list .breadcrumb-item:empty {
  display: none;
}

.yc-breadcrumb__list a {
  transition: color 0.2s;
}

@media (hover: hover) {
  .yc-breadcrumb__list a:hover { color: var(--yc-red); }
}

/* 只有桌機顯示（使用者決定，2026-09-21）。平板和手機要等客戶確認版面；總表的
   「手機版」規則已經先顧到了：清單是 flex-wrap，不截斷、會自動折行。確認之後，
   把這一段換成兩個斷點的 --yc-crumb-top / --yc-crumb-pull，字級不小於 14px。 */
@media (max-width: 1199.98px) {
  .yc-breadcrumb {
    display: none;
  }
}
/* ==== SHARED BLOCK END: 麵包屑 ==== */

/* ==== SHARED BLOCK START: 區塊標題（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* 英文小標在上，中文標題在下，標題底下有一條金色底線。HTML 靜態寫在各頁裡：
   .yc-title > .yc-title__sub + .yc-title__main。 */

.yc-title {
  text-align: center;
}

.yc-title__sub {
  display: block;
  font-family: var(--yc-font-en);
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-gray);
  letter-spacing: 0.04em;
}

/* Figma 184:4971 整塊高 74px，不是 24+48+5=77：48px 的標題框從 y=17 開始，和
   24px 的英文小標框重疊 7px；底線在 y=69，在標題框下方 4px。上 -7px、下 9px
   的 margin 同時重現這兩件事。 */
.yc-title__main {
  position: relative;
  display: inline-block;
  margin: -7px 0 9px;
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;
  color: var(--yc-black);
}

/* 184:4974 寬 172，標題寬 160px：底線從標題左邊 4px 開始，比標題寬 12px。 */
.yc-title__main::after {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(100% + 4px);
  width: calc(100% + 12px);
  height: 5px;
  background: url("/assets/img/ui/title-underline.svg") 0 0 / 100% 5px no-repeat;
}

/* 內頁（Figma 184:7994）用同一個標題，但沒有英文小標，貼齊內容欄左緣，底線從
   第一個字開始，而不是往左多出 4px。其他都一樣（字級、顏色、標題框下方 4px 的
   間距），所以這是 modifier，不是第二個元件。 */
.yc-title--left {
  text-align: left;
}

/* 184:7994 與 231:9774：底線從內容欄邊緣開始，標題文字再往內 4px；底線比文字
   寬 8px（文字 96、底線 104）。 */
.yc-title--left .yc-title__main {
  margin-top: 0;
  padding-left: 4px;
}

.yc-title--left .yc-title__main::after {
  left: 0;
  width: calc(100% + 4px);
}

/* 平板與手機 231:80：同樣的重疊，隨較小的字級等比縮小。 */
@media (max-width: 1199.98px) {
  .yc-title__sub {
    font-size: 12px;
    line-height: 20px;
  }

  .yc-title__main {
    margin: -6px 0 6px;
    font-size: 26px;
    line-height: 38px;
  }

  .yc-title__main::after {
    top: calc(100% + 2px);
    left: -4px;
    width: calc(100% + 8px);
    height: 4px;
    background-size: 100% 4px;
  }
}

/* 手機 415:1910：字級 24/32，所以標題框和英文小標重疊 4px。 */
@media (max-width: 767.98px) {
  .yc-title__main {
    margin: -4px 0 6px;
    font-size: 24px;
    line-height: 32px;
  }
}
/* ==== SHARED BLOCK END: 區塊標題 ==== */

/* ==== SHARED BLOCK START: 膠囊按鈕（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* 圓角膠囊裡放一個圖示和一段文字。分析師頁結尾的行動呼籲 (184:8274) 和 join 頁的
   聯絡橫幅 (184:6554) 畫的是同一顆按鈕，數值也相同。三個 modifier 對應設計用到的
   三種顏色。平板與手機的尺寸在兩個畫框 (231:3237 與 231:2865) 裡相同。
   32px 的圖示在 assets/img/icons。 */

.yc-btn {
  /* 底是 Bootstrap 的 .btn，所以先把 .btn 自己的狀態關掉，外觀完全由下面這幾條
     規則決定：.btn:hover 和 .btn:active 的權重比單一 class 高，會用
     --bs-btn-hover-* / --bs-btn-active-* 蓋掉膠囊的底色和文字顏色，所以每個
     modifier 都把那些變數設回自己的原色，真正的 hover 效果留給
     @media (hover: hover) 那一段。 */
  --bs-btn-focus-box-shadow: none;
  /* 改版前這顆按鈕沒有轉場，.btn 預設 0.15s 的顏色淡入。 */
  --bs-btn-transition: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  /* 184:8274：圖示那一側 16，文字那一側 24。 */
  padding: 0 24px 0 16px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  /* 每個按鈕文字都是固定的短句；一換行膠囊形狀就壞了。 */
  white-space: nowrap;
}

.yc-btn img {
  flex: none;
  width: 32px;
  height: 32px;
}

.yc-btn--member {
  --bs-btn-hover-color: var(--yc-white);
  --bs-btn-hover-bg: var(--yc-red);
  --bs-btn-hover-border-color: var(--yc-red);
  --bs-btn-active-color: var(--yc-white);
  --bs-btn-active-bg: var(--yc-red);
  --bs-btn-active-border-color: var(--yc-red);
  background: var(--yc-red);
  border-color: var(--yc-red);
  color: var(--yc-white);
}

/* LINE 綠。這是品牌色，不是本站的設計變數，所以直接寫色碼。 */
.yc-btn--line {
  --bs-btn-hover-color: var(--yc-white);
  --bs-btn-hover-bg: #13d759;
  --bs-btn-active-color: var(--yc-white);
  --bs-btn-active-bg: #12c552;
  background: #13d759;
  color: var(--yc-white);
}

.yc-btn--phone {
  --bs-btn-hover-color: var(--yc-red);
  --bs-btn-hover-bg: var(--yc-white);
  --bs-btn-hover-border-color: var(--yc-red);
  /* 按下時 (.btn:active) 和 hover 一樣填滿紅色、字變白；圖示在下面的 :active 規則轉白。
     設成白底的話，hover 已經轉白的圖示會消失在白底上。 */
  --bs-btn-active-color: var(--yc-white);
  --bs-btn-active-bg: var(--yc-red);
  --bs-btn-active-border-color: var(--yc-red);
  background: var(--yc-white);
  border-color: var(--yc-red);
  color: var(--yc-red);
}

/* 各種狀態，取自狀態節點 446:3639。
   每個滑鼠移入 (hover) 都包在 @media (hover: hover) 裡，手機點一下之後膠囊才不會
   卡在 hover 的顏色；同樣的樣式再寫一次給 :focus-visible，鍵盤操作才看得到一樣的
   效果。media query 沒辦法只包住選擇器清單裡的其中一個，所以兩份清單各寫一次。
     --member  449:20454 -> 449:20456，紅色漸層
     --line    182:1679  -> 182:1681，#13d759 -> #12c552
     --phone   446:3639 沒有這顆（32px 圖示）的 hover variant，所以沿用同一張狀態表裡
               紅色外框按鈕 182:1663 的規則：填滿紅色，文字和圖示變白。圖示是放在
               <img> 裡的紅色單色圖，用 filter 轉成白色，和 .yc-ap__more 的箭頭一樣。 */
@media (hover: hover) {
  .yc-btn--member:hover { background-image: var(--yc-red-hover); }
  .yc-btn--line:hover { background: #12c552; }

  .yc-btn--phone:hover {
    background: var(--yc-red);
    color: var(--yc-white);
  }

  .yc-btn--phone:hover img { filter: brightness(0) invert(1); }
}

/* .btn:focus-visible 會關掉 outline 改用外發光；設計稿沒有外發光的焦點框，
   所以把瀏覽器預設的焦點外框還原，鍵盤操作才看得見。 */
.yc-btn:focus-visible { outline: revert; }

.yc-btn--member:focus-visible { background-image: var(--yc-red-hover); }
.yc-btn--line:focus-visible { background: #12c552; }

.yc-btn--phone:focus-visible {
  background: var(--yc-red);
  color: var(--yc-white);
}

.yc-btn--phone:focus-visible img,
.yc-btn--phone:active img { filter: brightness(0) invert(1); }

/* 231:3237 與 231:2865 把膠囊縮到比桌機的 48 小：27.5 的圖示周圍留 8px，圖示前
   16、文字後 20。手機維持這個尺寸。 */
@media (max-width: 1199.98px) {
  .yc-btn {
    height: 44px;
    gap: 7px;
    padding: 0 20px 0 16px;
  }

  .yc-btn img {
    width: 28px;
    height: 28px;
  }
}
/* ==== SHARED BLOCK END: 膠囊按鈕 ==== */

/* ----------------------------------------------------------- 頁面框架 */
/* 桌機 184:7941 在 1200px 的內容欄裡畫了 880px 的主欄，旁邊是 280px 的側欄，
   兩者相距 40px。只有第一個 section 旁邊有側欄，下面的全部維持 880 寬。
   這一層是這一頁唯一留下來的 CSS grid：側欄要跨過右邊三個 section 而且不把任何
   一列撐高（184:8294 畫的就是重疊），Bootstrap 的 .row/.col-* 是 flex 換行，
   側欄比投資理念高，會把影音解盤整段往下推，所以表達不了。DOM 順序也必須維持：
   1200 以下側欄就排在投資理念和影音解盤之間。 */

.yc-ap {
  /* 184:8327 從 y=120 開始，上面是 80px 的頁首；頁尾在行動呼籲 (CTA) 之後 74px，
     這裡取整為全站其他地方用的 72。 */
  padding: 40px 0 72px;
  background: var(--yc-bg);
}

.yc-ap__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  column-gap: 40px;
  row-gap: 40px;
  /* 184:7992 從橫幅下方 40px 開始。 */
  margin-top: 40px;
}

.yc-ap__grid > section {
  grid-column: 1;
}

/* align-self: start 讓側欄不會撐開它跨過的列；跨三列則讓它和下方的 section 重疊，
   跟 184:8294 畫的一樣。用三列而不是「1 / -1」：沒有 grid-template-rows 時，
   顯式 grid 沒有列線，-1 會解析成第 1 條線，側欄就會把第一列撐成它自己的高度。
   它跨過的三個 section 一定比它高。81px 是一個區塊標題的高度（57）加上標題的
   24px 間距：卡片對齊的是 section 的第一段文字，不是標題。
   直向排列和 16px 的間距由 HTML 的 d-flex flex-column gap-xl-3 負責。 */
.yc-ap__aside {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: start;
  margin-top: 81px;
}

/* 平板 231:2878：單欄，側欄依它在文件中的位置變成一個滿寬的 section，
   所有間距都縮小。 */
@media (max-width: 1199.98px) {
  .yc-ap {
    padding: 32px 0 56px;
  }

  .yc-ap__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    margin-top: 32px;
  }

  .yc-ap__aside {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }
}

/* 手機 231:9711：同樣的單欄，改用手機的間距節奏。 */
@media (max-width: 767.98px) {
  .yc-ap {
    padding: 32px 0 40px;
  }

  .yc-ap__grid {
    row-gap: 24px;
  }
}

/* ------------------------------------------------------------- 按鈕 */
/* 帶圖示的膠囊按鈕（184:8274、184:8317）是共用區塊「膠囊按鈕」的 .yc-btn：
   join 頁畫的是同一顆按鈕，所以共用，不定義兩次。這裡只剩紅色外框的「more」按鈕
   （184:8081），只有這一頁有。它掛在 Bootstrap 的 .btn 上，顏色和狀態都走
   --bs-btn-* 變數，只有「圖示 + 文字」的排列沒有變數可用。 */

.yc-ap__more {
  --bs-btn-padding-x: 24px;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 14px;
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 24px;
  --bs-btn-border-radius: 30px;
  --bs-btn-color: var(--yc-red);
  --bs-btn-bg: var(--yc-white);
  --bs-btn-border-color: var(--yc-red);
  /* 這顆按鈕是 Figma 的「Red line button」182:1663；hover 變體 182:1665 在狀態節點
     446:3639 裡，會把膠囊填成紅色、文字變白。 */
  --bs-btn-hover-color: var(--yc-white);
  --bs-btn-hover-bg: var(--yc-red);
  --bs-btn-hover-border-color: var(--yc-red);
  --bs-btn-active-color: var(--yc-white);
  --bs-btn-active-bg: var(--yc-red);
  --bs-btn-active-border-color: var(--yc-red);
  /* 設計稿沒有外發光的焦點框，改回瀏覽器預設的焦點外框（見下面的 outline）。 */
  --bs-btn-focus-box-shadow: none;
  /* .btn 是 inline-block：箭頭圖示要和文字並排並垂直置中，所以改成 inline-flex。 */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
}

/* 平板和手機的畫框把這顆按鈕縮小一級：231:9853（前往 Youtube 頻道）寬 180、
   231:9880（看更多文章）寬 132，左右內距 20、文字和箭頭相距 10。高度仍是 48。 */
@media (max-width: 1199.98px) {
  .yc-ap__more {
    --bs-btn-padding-x: 20px;
    gap: 10px;
  }
}

/* 沒有真正指標裝置時（手機、平板），把 hover 的顏色設回原色：Bootstrap 的
   .btn:hover 沒有包 @media (hover: hover)，不這樣做的話點一下就會卡在紅色。 */
@media (hover: none) {
  .yc-ap__more {
    --bs-btn-hover-color: var(--yc-red);
    --bs-btn-hover-bg: var(--yc-white);
    --bs-btn-hover-border-color: var(--yc-red);
  }
}

.yc-ap__more:focus-visible {
  outline: revert;
}

/* 箭頭是 <img> 裡單色 #c8102e 的圖，CSS 沒辦法改它的顏色，所以用
   brightness(0) invert(1) 把它壓成白色，配合上面的 hover / focus 狀態。 */
@media (hover: hover) {
  .yc-ap__more:hover img { filter: brightness(0) invert(1); }
}

.yc-ap__more:focus-visible img,
.yc-ap__more:active img { filter: brightness(0) invert(1); }

/* 影音解盤和股勢觀點下方那兩顆「more」按鈕的置中列（排列由 HTML 的
   d-flex justify-content-center 負責）。 */
.yc-ap__more-row {
  margin-top: 40px;
}

@media (max-width: 1199.98px) {
  .yc-ap__more-row {
    margin-top: 32px;
  }
}

@media (max-width: 767.98px) {
  .yc-ap__more-row {
    margin-top: 24px;
  }
}

/* -------------------------------------------------------------- 橫幅 */
/* 184:8327 是 1200x360 的區塊，有客戶的背景匯出圖，右邊是去背照片，左邊是姓名區塊。
   裡面的東西全部用百分比定位，因為內容欄從 1200 起往上是流動寬度。
   Bootstrap 沒有對應的元件，所以這一段全部是自訂規則。 */

.yc-ap__hero {
  position: relative;
  height: 360px;
  border-radius: 16px;
  overflow: hidden;
  background: url("/assets/img/ui/analyst-hero-pc.png") center / cover no-repeat;
}

/* hero.png 是 320x360 的去背圖。照片的大小跟著橫幅的「高度」走，不跟寬度走：橫幅在每個
   斷點的高度是固定的，寬度卻會變。如果用寬度的百分比，視窗一變寬照片就比橫幅高，
   頭會被上緣裁掉（767 寬時超出 248px）。高度 100% = Figma 的 360，寬度跟著長寬比走。 */
.yc-ap__hero-photo {
  position: absolute;
  left: 55%;
  bottom: 0;
  width: auto;
  height: 100%;
}

/* 184:8329 在 1200 的畫框裡位於 x=240 y=80，寬 440。 */
.yc-ap__hero-info {
  position: absolute;
  left: 20%;
  top: 80px;
  width: 36.667%;
}

/* 姓名和暱稱是兩個 flex item（HTML 的 d-flex flex-wrap align-items-end），所以暱稱
   太長、一行放不下時會整個掉到下一行，不會從詞的中間斷開。只有紀緯明（3 + 7 個字）
   需要第二行，而且只在手機上。 */
.yc-ap__hero-name {
  white-space: nowrap;
  font-size: 38px;
  line-height: 46px;
  font-weight: 700;
  color: var(--yc-black);
}

.yc-ap__hero-nick {
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  color: var(--yc-red);
}

.yc-ap__hero-tagline {
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
  color: var(--yc-gray-dark);
}

/* 圖示之間 10px，不在 Bootstrap 的間距級距 (4, 8, 16, 24, 48) 上，所以寫在這裡。 */
.yc-ap__hero-socials {
  gap: 10px;
}

/* 184:8336 是 40px 的格子，不是卡片用的 32px。圖的比例不變，所以 36x36 的圖和它的
   -2/-1 內縮都乘上 40/32。 */
.yc-ap__hero-socials .yc-social {
  width: 40px;
  height: 40px;
}

.yc-ap__hero-socials .yc-social img {
  left: -2.5px;
  top: -1.25px;
  width: 45px;
  height: 45px;
}

/* 平板 231:3257：688x310 的橫幅，照片更靠右，字級較小。 */
@media (max-width: 1199.98px) {
  .yc-ap__hero {
    height: 310px;
    border-radius: 12px;
    background-image: url("/assets/img/ui/analyst-hero-tb.png");
  }

  /* 高度沿用上面的 100%：310 高，寬度約 276，就是 231:3257 的照片框。靠右對齊，
     不用 left 的百分比：橫幅變寬時照片才不會往左漂、壓到標語。688 寬時右邊留 16px。 */
  .yc-ap__hero-photo {
    left: auto;
    right: 2.39%;
  }

  .yc-ap__hero-info {
    left: 10.17%;
    top: 69px;
    width: 52.33%;
  }

  .yc-ap__hero-name {
    font-size: 32px;
    line-height: 40px;
  }

  .yc-ap__hero-nick {
    font-size: 16px;
    line-height: 26px;
  }

  .yc-ap__hero-tagline {
    font-size: 16px;
    line-height: 28px;
  }

  .yc-ap__hero-socials {
    gap: 8px;
  }

  .yc-ap__hero-socials .yc-social {
    width: 32px;
    height: 32px;
  }

  .yc-ap__hero-socials .yc-social img {
    left: -2px;
    top: -1px;
    width: 36px;
    height: 36px;
  }
}

/* 手機 259:12580：328x206 的橫幅。照片佔一半寬度，所以姓名區塊限制在 160px
   （259:12585），只有圖示列是滿寬。 */
@media (max-width: 767.98px) {
  .yc-ap__hero {
    height: auto;
    min-height: 206px;
    background-image: url("/assets/img/ui/analyst-hero-mb.png");
  }

  /* 放在文件流裡，不用 absolute：328 夠窄，長的姓名或標語會比設計稿多一行，
     橫幅必須跟著長高，不能把圖示列裁掉。28 + 150 高的資訊框（259:12584）+ 28
     就是 Figma 橫幅的 206，所以一般的頁面不受影響。 */
  .yc-ap__hero-info {
    position: static;
    width: 85.4%;
    margin-left: 7.32%;
    padding: 28px 0;
  }

  /* 259:12580 的照片是 180x203。這裡寫固定高度，不用 100%：手機的橫幅會因為標語
     換行而長高，照片不該跟著放大。 */
  .yc-ap__hero-photo {
    /* 328 寬時右邊留 6px，和 259:12580 一樣。 */
    right: 1.7%;
    height: 203px;
  }

  /* 160 是相對於 280 寬的資訊框（259:12584 裡的 259:12585），不是相對於橫幅：
     框再窄，標語會折到第四行，把圖示列推出 206px 橫幅的下緣。 */
  .yc-ap__hero-text {
    max-width: 57.14%;
  }

  .yc-ap__hero-name {
    font-size: 24px;
    line-height: 28px;
  }

  .yc-ap__hero-nick {
    font-size: 14px;
    line-height: 21px;
  }

  .yc-ap__hero-tagline {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ------------------------------------------------------------ 投資理念 */
/* 184:7993：引言卡片在上，下面是兩張等寬卡片：投資風格和專長領域。兩張卡片是
   .row row-cols-1 row-cols-md-2，等寬和等高（h-100）都由 Bootstrap 負責。
   區塊標題和下方區塊的間距（桌機和平板 24、手機 16）寫成 mt-3 mt-md-4。 */

/* 184:8000：投資理念用紅底白字，左右各一個金色引號。排列、間距和內距是 HTML 上的
   d-flex align-items-start gap-* p-*。 */
.yc-ap__quote {
  border-radius: 12px;
  background: var(--yc-red);
}

.yc-ap__quote::before,
.yc-ap__quote::after {
  flex: none;
  width: 32px;
  font-size: 32px;
  line-height: 46px;
  font-weight: 700;
  color: var(--yc-gold);
}

.yc-ap__quote::before {
  content: "\201C";
}

.yc-ap__quote::after {
  content: "\201D";
  text-align: right;
}

.yc-ap__quote-text {
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
  color: var(--yc-white);
  text-align: justify;
}

/* 這一頁共用的白色卡片：184:8008、184:8064、184:8210 都是同一種。底是 Bootstrap 的
   .card，內距走 --bs-card-spacer-*，所以卡片裡是 .card-body。

   1px 外框用的是 inset shadow，不是 border（--bs-card-border-width: 0），這裡和本頁
   其他所有卡片都一樣。Figma 把畫框的筆畫畫在畫框內側，所以 184:8008 高 190，它的
   32 padding 是從外緣量的。CSS 的 border 在 padding box 外面，同一張卡片會變成 192，
   把下面每個區塊都往下推。 */
.yc-ap__card {
  --bs-card-spacer-x: 32px;
  --bs-card-spacer-y: 32px;
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  --bs-card-bg: var(--yc-white);
  /* 卡片標題和下面內容的間距（184:8011）。 */
  --bs-card-title-spacer-y: 16px;
  --bs-card-title-color: var(--yc-gray-dark);
  box-shadow: inset 0 0 0 1px var(--yc-line);
}

.yc-ap__card-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.yc-ap__card-text {
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  color: var(--yc-gray-dark);
  text-align: justify;
}

/* 184:8015 畫的是固定的 2x2 格子，每顆膠囊 167px。實際的標籤比示意稿有的短、
   有的長，所以改成膠囊貼著文字寬度並自動換行（HTML 的 d-flex flex-wrap）。
   12/8 不在 Bootstrap 的間距級距上，所以 gap 寫在這裡。 */
.yc-ap__tags {
  gap: 12px 8px;
}

/* 184:8016 是 32px 高的膠囊，列與列相距 44（在卡片裡是 80 和 124）。底是 Bootstrap
   的 .badge + .rounded-pill；.badge 是 inline-block，改成 inline-flex 才能把「#」和
   文字垂直置中。 */
.yc-ap__tag {
  --bs-badge-padding-x: 24px;
  --bs-badge-padding-y: 0;
  --bs-badge-font-size: 14px;
  --bs-badge-font-weight: 500;
  --bs-badge-color: var(--yc-gray-dark);
  display: inline-flex;
  align-items: center;
  height: 32px;
  line-height: 20px;
  box-shadow: inset 0 0 0 1px var(--yc-line);
}

/* flex 會吃掉「#」後面的空白。Figma 184:8016 那裡有一個 14px 字級的空白 = 4px。 */
.yc-ap__tag-hash {
  margin-right: 4px;
  color: var(--yc-gold);
}

@media (max-width: 1199.98px) {
  /* 231:2951 是 163.4 高的卡片，裡面放 104 或 110 高的內容區塊，所以內距不是
     桌機卡片的 32：左右 24.86，上下 26.7 到 29.7。
     231:2954 和 231:9790 在卡片標題下方留 12px，不是 16。 */
  .yc-ap__card {
    --bs-card-spacer-x: 25px;
    --bs-card-spacer-y: 27px;
    --bs-card-title-spacer-y: 12px;
  }

  .yc-ap__card-title {
    font-size: 20px;
    line-height: 26px;
  }

  /* 231:2954 和 231:9790 都是 14px，不是桌機卡片的 16。 */
  .yc-ap__card-text {
    font-size: 14px;
    line-height: 22px;
  }

  .yc-ap__quote::before,
  .yc-ap__quote::after {
    width: 28px;
    font-size: 28px;
    line-height: 40px;
  }

  .yc-ap__quote-text {
    font-size: 16px;
    line-height: 28px;
  }

  /* 231:2958 和 231:9794 是兩欄等寬的格子，每格寬 (列寬 - 6) / 2，文字置中：
     294.12 裡的 144.06，以及 278.28 裡的 136.14。左右間距 6px，上下間距 8px。
     每顆膠囊佔半列。文字太長、半列放不下時不會換行也不會溢出：min-width 讓那顆
     膠囊變寬，下一顆膠囊換到新的一列。 */
  .yc-ap__tags {
    gap: 8px 6px;
  }

  .yc-ap__tag {
    --bs-badge-padding-x: 8px;
    --bs-badge-font-size: 13px;
    flex: 0 0 calc(50% - 3px);
    min-width: max-content;
    justify-content: center;
    white-space: nowrap;
  }
}

/* 手機 231:9786：兩張卡片上下堆疊，相距 8px，在引言框下方 8px（HTML 的 g-2）。 */
@media (max-width: 767.98px) {
  .yc-ap__card {
    --bs-card-spacer-x: 25px;
    --bs-card-spacer-y: 25px;
  }

  .yc-ap__card-title {
    font-size: 18px;
    line-height: 24px;
  }

  .yc-ap__quote::before,
  .yc-ap__quote::after {
    width: 26px;
    font-size: 26px;
    line-height: 38px;
  }

  /* 231:9783 是 14px 字級、4 行、行高 24，放在 225px 寬的欄裡。 */
  .yc-ap__quote-text {
    font-size: 14px;
    line-height: 24px;
  }
}

/* ------------------------------------------------- 專業背景 & 經歷 */
/* 184:8295 在桌機是側欄卡片；231:2971 和 231:9807 是同一張卡片，改成滿寬的
   section。桌機時卡片自己帶一個小標題，另外兩個較小的寬度則用卡片上方的區塊標題，
   設計稿就是這樣：兩者永遠有一個是隱藏的，切換寫在 HTML 上
   （d-xl-none 和 d-none d-xl-inline-block）。 */

.yc-ap__bg-card {
  --bs-card-spacer-x: 32px;
  --bs-card-spacer-y: 32px;
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  --bs-card-bg: var(--yc-white);
  box-shadow: inset 0 0 0 1px var(--yc-line);
}

/* 184:8297：16px 的標題，同樣的金色底線，在文字下方 5px。 */
.yc-ap__bg-heading {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 9px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-black);
}

.yc-ap__bg-heading::after {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: calc(100% + 2px);
  height: 5px;
  background: url("/assets/img/ui/title-underline.svg") 0 0 / 100% 5px no-repeat;
}

.yc-ap__bg-group + .yc-ap__bg-group {
  margin-top: 16px;
}

.yc-ap__bg-label {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-gray-dark);
}

.yc-ap__bg-list {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--yc-gray);
}

/* 用 inline-block，平板上兩個短項目可以排在同一行（231:2978），放不下時再各佔一行，
   窄的側欄和手機就是後者。 */
.yc-ap__bg-list li {
  display: inline-block;
  vertical-align: top;
  margin-right: 16px;
}

/* 跟首頁分析師卡片特色清單一樣的紅色方形項目符號，兩個清單才會一致。
   用 CSS 畫的方塊，不用 ▪ 字元，因為字元的大小會跟著字型變。Figma 把項目符號寫成
   同一段文字裡的行內 ▪（184:8302），字元兩側的留白 (side bearing) 讓方塊落在卡片
   padding 之後 6px，文字落在方塊之後 4px：卡片的 padding box 從 1072 開始，
   方塊在 1078，文字在 1086。 */
.yc-ap__bg-list li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 6px;
  margin-right: 4px;
  vertical-align: 3px;
  background: var(--yc-red);
}

@media (max-width: 1199.98px) {
  .yc-ap__bg-card {
    --bs-card-spacer-x: 25px;
    --bs-card-spacer-y: 25px;
    /* 231:2971 在區塊標題的底線下方 24。 */
    margin-top: 24px;
  }

  /* 231:2975 和 231:10011 的清單字級比桌機側欄大一級。 */
  .yc-ap__bg-list {
    font-size: 15px;
  }

  .yc-ap__bg-group + .yc-ap__bg-group {
    margin-top: 12px;
  }
}

@media (max-width: 767.98px) {
  /* 231:9807 在標題底線下方 16。 */
  .yc-ap__bg-card {
    margin-top: 16px;
  }
}

/* ----------------------------------------------------------- LINE 卡片 */
/* 184:8314 是側欄下方 280x148 的紅色卡片。只有桌機有：平板和手機的畫框都沒有它
   （HTML 的 d-none d-xl-flex），那些寬度由結尾的行動呼籲 (CTA) 提供同一顆
   LINE 按鈕。12px 不在 Bootstrap 的間距級距上，所以 gap 寫在這裡。 */

.yc-ap__line-card {
  gap: 12px;
  height: 148px;
  padding: 0 52px;
  border-radius: 12px;
  /* 這張卡片是 1200x306 紅色背景的裁切：Figma 把背景縮成 690x176 再往左拉 410px，
     這兩個固定值就是這樣來的。卡片在桌機的所有寬度都是 280px 寬，
     所以這裡用 px 沒問題。 */
  background: url("/assets/img/ui/line-card-pc.png") -410px 0 / 690px 176px no-repeat;
}

.yc-ap__line-card-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-white);
  text-align: center;
}

/* 按鈕填滿 184:8317 那個 175px 的內容欄。它的文字是三顆按鈕裡最長的，所以這裡的
   左右 padding 比頁尾 CTA 裡的那幾顆小；照設計稿的 16/24，以我們實際算繪出來的
   字寬，175px 放不下。 */
.yc-ap__line-card .yc-btn {
  width: 100%;
  padding: 0 12px;
}

/* ----------------------------------------------------------- 影音解盤 */
/* 184:8029：桌機三欄、平板和手機兩欄的 .row，每欄是 16:9 的縮圖（Bootstrap 的
   .ratio），下面接說明文字面板。 */

/* INTEGRATION: assets/img/placeholder 裡的六張封面是同一個 Figma 畫框的假資料，
   列在 tools/build_pages.js 的 PLACEHOLDER_VIDEOS。灰色方塊留在圖片後面，
   所以圖檔缺少或載入慢時，看起來還是跟設計稿一樣。 */
.yc-ap__video-thumb {
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #d9d9d9;
}

/* .ratio > * 已經是絕對定位並填滿整格，這裡只補裁切方式。 */
.yc-ap__video-thumb img {
  object-fit: cover;
}

/* 縮圖蓋住上緣，所以外框只畫三邊。用 inset shadow，跟本頁其他所有卡片一樣。
   184:8033 在 Figma 設成 justify。這裡沒照做：這些說明文字會在一串中日韓文字
   (CJK) 中間換行，justify 會讓第一行的字與字之間出現明顯的空隙，
   而 Figma 的算繪結果沒有。 */
.yc-ap__video-caption {
  padding: 16px;
  box-shadow: inset 1px 0 0 var(--yc-line), inset -1px 0 0 var(--yc-line),
    inset 0 -1px 0 var(--yc-line);
  border-radius: 0 0 12px 12px;
  background: var(--yc-white);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--yc-gray-dark);
}

@media (max-width: 1199.98px) {
  /* 231:2995 和 231:9831 都是 62px 高的說明框，裡面放兩行的文字框，12/16 的字，
     padding 是 15 / 13。在這些寬度下說明文字超過兩行，Figma 畫的是被裁掉的樣子，
     所以靠 line-clamp 讓卡片維持同一個高度，不會變成高低不齊的格子
     （231:9829 不管放哪一段說明都是 152 高）。clamp 寫在內層的 span 上，
     因為面板是 flex item，而 flex item 會被 blockify，脫離 -webkit-box。 */
  .yc-ap__video-caption {
    padding: 15px;
    font-size: 12px;
    line-height: 16px;
  }

  .yc-ap__video-caption-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* 手機 231:9828：還是兩欄，卡片寬 160px。 */
@media (max-width: 767.98px) {
  /* 231:9831 是 62px 高的說明框：12.86 的 padding 包著 36.28 高的兩行文字框，
     所以手機的行高是 18，不是平板畫框的 16。 */
  .yc-ap__video-caption {
    padding: 13px;
    line-height: 18px;
  }
}

/* ----------------------------------------------------------- 股勢觀點 */
/* 184:8064：一張白色卡片裝所有的列，列與列之間一條細線。11 列全部在 HTML 裡，
   第 6 列起帶 .d-none，「看更多文章」只是把 .d-none 拿掉
   （assets/js/pages/analyst.js）。 */

/* 184:8065 讓每一列相距 72：24px 的列、24 的空白、分隔線、24 的空白。Figma 的
   分隔線是沒有高度的向量線，所以這裡 1px 的 border 從它下方的 padding 扣掉 1px，
   列距維持 72。 */
.yc-ap__article + .yc-ap__article {
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid var(--yc-line);
}

.yc-ap__article-title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--yc-black);
}

.yc-ap__article-date {
  flex: none;
  font-family: var(--yc-font-en);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--yc-gray);
}

@media (max-width: 1199.98px) {
  /* 231:3028：20px 的列，分隔線上下各 20.64 的空白。 */
  .yc-ap__article + .yc-ap__article {
    margin-top: 20px;
    padding-top: 20px;
  }

  .yc-ap__article-title {
    font-size: 16px;
    line-height: 20px;
  }

  .yc-ap__article-date {
    font-size: 13px;
    line-height: 20px;
  }
}

/* 手機 231:9865：日期移到標題下方，相距 4px（HTML 的 flex-column gap-1）。 */
@media (max-width: 767.98px) {
  /* 231:9868：分隔線上下各 8 的空白，所以每一列相距 88。 */
  .yc-ap__article + .yc-ap__article {
    margin-top: 8px;
    padding-top: 7px;
  }

  .yc-ap__article-title {
    font-size: 16px;
    line-height: 24px;
  }
}

/* --------------------------------------------------- 分析師三大優勢 */
/* 184:8090：三張卡片，每張是圖片在上，下面依序是金色標籤、標題和內文。 */

.yc-ap__adv {
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  --bs-card-bg: var(--yc-white);
  /* 184:8092 的上下內距不同（上 16、下 24），--bs-card-spacer-y 只能給對稱值，
     而且這張卡片沒有 .card-body：圖片要貼齊內距的邊緣。 */
  padding: 16px 16px 24px;
  box-shadow: inset 0 0 0 1px var(--yc-line);
}

.yc-ap__adv-image {
  display: block;
  width: 100%;
  height: auto;
  /* 184:8093 是 246x154；匯出的圖是 296x185，同樣是 1.6 的比例。 */
  aspect-ratio: 246 / 154;
  object-fit: cover;
  border-radius: 8px;
  background: #d9d9d9;
}

/* 184:8094 的文字左右各比圖片內縮 8px。 */
.yc-ap__adv-label,
.yc-ap__adv-title,
.yc-ap__adv-body {
  margin-inline: 8px;
}

.yc-ap__adv-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 32px;
  margin-top: 10px;
  padding: 0 16px;
  border-radius: 100px;
  background: var(--yc-gold);
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  color: var(--yc-white);
}

.yc-ap__adv-num {
  font-family: var(--yc-font-en);
  margin-left: 4px;
}

.yc-ap__adv-title {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-black);
}

.yc-ap__adv-body {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--yc-gray-dark);
  text-align: justify;
}

/* 平板 231:3053：同樣三欄，卡片寬 224px，相距 8px。 */
@media (max-width: 1199.98px) {
  .yc-ap__adv {
    padding: 13px 13px 20px;
  }

  .yc-ap__adv-label,
  .yc-ap__adv-title,
  .yc-ap__adv-body {
    margin-inline: 4px;
  }

  .yc-ap__adv-label {
    min-width: 69px;
    height: 28px;
    padding: 0 14px;
  }

  .yc-ap__adv-body {
    line-height: 22px;
  }
}

/* 手機 231:9889：一列一張卡片，圖片滿寬。 */
@media (max-width: 767.98px) {
  .yc-ap__adv {
    padding: 16px 16px 24px;
  }

  /* 231:9895 是 27.5px 高的膠囊，包著 12/16 的文字。 */
  .yc-ap__adv-label {
    height: 28px;
    line-height: 16px;
  }

  .yc-ap__adv-label,
  .yc-ap__adv-title,
  .yc-ap__adv-body {
    margin-inline: 8px;
  }

  /* 231:9896 和 231:9898 把標籤下方和標題下方的兩個間距縮小。 */
  .yc-ap__adv-title {
    margin-top: 8px;
  }

  .yc-ap__adv-body {
    margin-top: 6px;
  }
}

/* --------------------------------------------- 適合哪些投資人 */
/* 184:8124：白色卡片，金色圖案從右邊出血延伸進來。 */

.yc-ap__fit {
  --bs-card-spacer-x: 32px;
  --bs-card-spacer-y: 32px;
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  background: var(--yc-white) url("/assets/img/ui/fit-bg-pc.png") right center / cover
    no-repeat;
}

.yc-ap__fit-intro {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-black);
}

.yc-ap__fit-list {
  margin-top: 24px;
}

/* 16 / 14 / 8 的圖示間距不在 Bootstrap 的間距級距上，所以 gap 寫在這裡。 */
.yc-ap__fit-list li {
  gap: 16px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--yc-gray-dark);
}

.yc-ap__fit-list li + li {
  margin-top: 12px;
}

.yc-ap__fit-list img {
  flex: none;
  width: 20px;
  height: 20px;
}

@media (max-width: 1199.98px) {
  /* 231:3092 的文案距卡片邊緣內縮 27.52。 */
  .yc-ap__fit {
    --bs-card-spacer-x: 28px;
    --bs-card-spacer-y: 28px;
    background-image: url("/assets/img/ui/fit-bg-tb.png");
  }

  .yc-ap__fit-intro {
    font-size: 18px;
    line-height: 20px;
  }

  .yc-ap__fit-list {
    margin-top: 21px;
  }

  .yc-ap__fit-list li {
    gap: 14px;
    line-height: 22px;
  }

  .yc-ap__fit-list li + li {
    margin-top: 10px;
  }

  .yc-ap__fit-list img {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 767.98px) {
  /* 231:9928 回到 24：只有平板的卡片用 27.52。 */
  .yc-ap__fit {
    --bs-card-spacer-x: 24px;
    --bs-card-spacer-y: 24px;
    background-image: url("/assets/img/ui/fit-bg-mb.png");
  }

  /* 231:9929 維持平板畫框的 18px；只有清單項目變小。 */
  .yc-ap__fit-intro {
    line-height: 20px;
  }

  /* 231:9930 在標籤下方 16，平板的卡片則是 20.64。 */
  .yc-ap__fit-list {
    margin-top: 16px;
  }

  .yc-ap__fit-list li {
    gap: 8px;
    font-size: 13px;
    line-height: 20px;
  }
}

/* ------------------------------------------------------ 專屬系統區塊 */
/* 184:8147。只有李忠興和韋國慶有這個 section；其他 21 頁的 HTML 裡沒有它。
   標題就是產品名稱，所以也是產生的。 */

.yc-ap__sys-heading {
  margin: 24px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  color: var(--yc-black);
}

.yc-ap__sys-feature {
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  --bs-card-bg: var(--yc-white);
  /* 184:8152 的左右內距不同（左 16、右 24）：--bs-card-spacer-x 只能給對稱值，
     而且圖示和文字是這張卡片的兩個 flex item，沒有 .card-body。 */
  padding: 16px 24px 16px 16px;
  box-shadow: inset 0 0 0 1px var(--yc-line);
}

/* INTEGRATION: 這兩張插圖是從 Figma 184:8153 和 184:8185 匯出的，依索引 (index)
   順序取用，因為資料檔沒有圖示欄位。第三個特色就沒有圖示可用；
   兩位分析師都剛好是兩個。 */
.yc-ap__sys-icon {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  background: var(--yc-bg);
}

.yc-ap__sys-func {
  --bs-card-border-width: 0;
  --bs-card-border-radius: 12px;
  --bs-card-bg: var(--yc-white);
  box-shadow: inset 0 0 0 1px var(--yc-line);
}

.yc-ap__sys-num {
  flex: none;
  font-family: var(--yc-font-en);
  font-size: 32px;
  line-height: 32px;
  font-weight: 700;
  color: var(--yc-red);
  /* Inter 的「1」比其他數字窄；等寬數字讓 01、02、03 三列的文字起點對齊（Figma 184:8147）。 */
  font-variant-numeric: tabular-nums;
}

.yc-ap__sys-text {
  display: block;
}

.yc-ap__sys-title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-black);
}

.yc-ap__sys-body {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--yc-gray-dark);
}

@media (max-width: 1199.98px) {
  .yc-ap__sys-heading {
    margin-top: 16px;
    font-size: 20px;
    line-height: 26px;
  }

  .yc-ap__sys-body {
    margin-top: 4px;
    line-height: 22px;
  }

  /* 231:3175 和 231:10011 的數字畫成 28，不是桌機卡片的 32。 */
  .yc-ap__sys-num {
    font-size: 28px;
    line-height: 28px;
  }
}

/* 手機 231:9949：兩張特色卡片上下堆疊。 */
@media (max-width: 767.98px) {
  /* 231:9948 是 18/24，平板畫框是 20/26。 */
  .yc-ap__sys-heading {
    font-size: 18px;
    line-height: 24px;
  }
}

/* ----------------------------------------------------------- 常見問題 */
/* 184:8234。底是 Bootstrap 的 accordion：data-bs-parent 讓一次只開一個，第一題
   預設展開，再點一次可以關掉，開合完全由 data-bs-* 驅動，沒有自訂 script。
   每一題都是一張獨立的白色卡片，所以四個角都要圓角，不是 Bootstrap 預設的
   「第一張上圓角、最後一張下圓角」。 */

.yc-faq {
  /* + / - 記號的兩條白色橫條。accordion 的記號是用 background-image 畫的，所以
     直接把 Bootstrap 的 chevron 變數換成兩個 gradient，不必另外加元素。 */
  --yc-faq-bar: linear-gradient(var(--yc-white), var(--yc-white));
  --bs-accordion-btn-icon: var(--yc-faq-bar), var(--yc-faq-bar);
  --bs-accordion-btn-active-icon: var(--yc-faq-bar), var(--yc-faq-bar);
  --bs-accordion-btn-icon-width: 24px;
  /* 記號不是箭頭，展開時不旋轉。 */
  --bs-accordion-btn-icon-transform: none;
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 12px;
  --bs-accordion-bg: var(--yc-white);
  /* 按鈕和展開狀態都不要自己的底色，卡片的 1px inset 外框才不會被蓋掉。 */
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-color: var(--yc-black);
  --bs-accordion-active-color: var(--yc-black);
  --bs-accordion-btn-padding-x: 32px;
  --bs-accordion-btn-padding-y: 32px;
  --bs-accordion-body-padding-x: 32px;
  --bs-accordion-body-padding-y: 0;
  /* 按鈕的下內距在展開時是 8、收合時是 32（見下面的 :not(.collapsed)）。Bootstrap 在
     收合「開始」時就把 .collapsed 加回按鈕，所以沒有轉場的話文字會先跳 24px 再收合。
     時間和曲線跟 Bootstrap 的 .collapsing (0.35s ease) 一樣，兩邊一起動。用這個變數
     而不是直接寫 transition，prefers-reduced-motion 時 Bootstrap 會自己關掉。 */
  --bs-accordion-transition: padding-bottom 0.35s ease;
  /* 設計稿沒有外發光的焦點框；改回瀏覽器預設的焦點外框（見下面的 outline）。 */
  --bs-accordion-btn-focus-box-shadow: none;
}

/* 權重要兩個 class 才蓋得過 .accordion-item:first-of-type 的單邊圓角。 */
.yc-faq .yc-faq__item {
  border-radius: var(--bs-accordion-border-radius);
  box-shadow: inset 0 0 0 1px var(--yc-line);
}

.yc-faq__item + .yc-faq__item {
  margin-top: 16px;
}

.yc-faq__button {
  gap: 24px;
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
}

/* 184:8244：展開時問題和答案相距 8px。收合時按鈕的下內距就是卡片的下內距。 */
.yc-faq__button:not(.collapsed) {
  padding-bottom: 8px;
}

.yc-faq__button:focus-visible {
  outline: revert;
}

/* 184:8239：24px 的紅色圓形，裡面一條 12x2 的白色橫條，收合時再交叉疊上第二條。 */
.yc-faq__button::after {
  border-radius: 50%;
  background-color: var(--yc-red);
  background-position: center, center;
  background-size: 12px 2px, 2px 12px;
}

.yc-faq__button:not(.collapsed)::after {
  background-size: 12px 2px, 0 0;
}

.yc-faq__body {
  padding-bottom: 32px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--yc-gray);
}

@media (max-width: 1199.98px) {
  .yc-faq {
    --bs-accordion-btn-icon-width: 20px;
    --bs-accordion-btn-padding-x: 25px;
    --bs-accordion-btn-padding-y: 25px;
    --bs-accordion-body-padding-x: 25px;
  }

  .yc-faq__item + .yc-faq__item {
    margin-top: 14px;
  }

  /* 231:3201 是 18/26；只有手機畫框把問題降到 16/24。 */
  .yc-faq__button {
    gap: 16px;
    line-height: 26px;
  }

  .yc-faq__button::after {
    background-size: 10px 2px, 2px 10px;
  }

  .yc-faq__button:not(.collapsed)::after {
    background-size: 10px 2px, 0 0;
  }

  .yc-faq__body {
    padding-bottom: 25px;
    line-height: 22px;
  }
}

@media (max-width: 767.98px) {
  /* 231:10043 在上一個項目下方 8，不是平板畫框的 13.76。 */
  .yc-faq__item + .yc-faq__item {
    margin-top: 8px;
  }

  .yc-faq__button {
    font-size: 16px;
    line-height: 24px;
  }
}

/* ------------------------------------------------------ 行動呼籲 (CTA) */
/* 184:8268：銀色圖案，上面兩行文案和三顆按鈕。 */

.yc-ap__cta {
  padding: 80px 24px 78px;
  border-radius: 20px;
  background: url("/assets/img/ui/analyst-cta-pc.png") center / cover no-repeat;
}

/* 兩行文案之間的 4px 在 .yc-ap__cta-line--lead 上，所以這裡不能用 m-0 工具
   class：它帶 !important，會把那 4px 一起關掉。 */
.yc-ap__cta-line {
  margin: 0;
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
  color: var(--yc-gray-dark);
}

.yc-ap__cta-line--lead {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--yc-red);
}

/* 排列由 HTML 的 d-flex flex-wrap justify-content-center 負責；16 / 32 這兩個值
   不在 Bootstrap 的間距級距 (4, 8, 16, 24, 48) 上的那一個是 32。 */
.yc-ap__cta-buttons {
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 1199.98px) {
  /* 231:3231 高 264，包著 126 高的內容區塊：58 的文案、24、一列 44px 的按鈕，
     所以上下空白是 69，不是桌機卡片的 80。 */
  .yc-ap__cta {
    padding: 69px 24px;
    border-radius: 12px;
    background-image: url("/assets/img/ui/cta-tb.png");
  }

  .yc-ap__cta-line {
    font-size: 16px;
    line-height: 28px;
  }

  /* 231:3233 和 231:10069 的兩行文字都相距 2px，不是 4。 */
  .yc-ap__cta-line--lead {
    margin-top: 2px;
    font-size: 18px;
  }

  .yc-ap__cta-buttons {
    margin-top: 24px;
  }

  /* 231:3237 把膠囊按鈕縮到比桌機的 48 小。尺寸不寫在這裡：join 橫幅也用同樣的方式
     縮小，所以寫在共用區塊「膠囊按鈕」裡。 */
}

/* 手機 231:10067：電話按鈕掉到自己的一列。 */
@media (max-width: 767.98px) {
  /* 231:10067 高 264：37 的空白、74 的文案、16、兩列 44px 的按鈕。左右 24：
     231:10072 的按鈕是 134 + 12 + 134 = 280，在 328 寬的卡片裡兩邊各留 24。 */
  .yc-ap__cta {
    padding: 37px 24px;
    background-image: url("/assets/img/ui/cta-mb.png");
  }

  .yc-ap__cta-line {
    font-size: 14px;
    line-height: 24px;
  }

  .yc-ap__cta-line--lead {
    font-size: 16px;
    line-height: 24px;
  }

  /* 231:10068 把文案下方的間距縮成 16。 */
  .yc-ap__cta-buttons {
    gap: 12px;
    margin-top: 16px;
  }

  /* 231:10068：上面一列的兩顆按鈕等寬、平分整列。Bootstrap 的 flex-fill 是
     flex: 1 1 auto，寬度會跟著文字長度走，兩顆不會等寬，所以寫在這裡。 */
  .yc-ap__cta-buttons .yc-btn {
    flex: 1 1 0;
    /* 沒有這行，「LINE 諮詢」的內容寬 (136) 會擋住縮小，兩顆變成 132 和 136。 */
    min-width: 0;
  }

  .yc-ap__cta-buttons .yc-btn--phone {
    flex-basis: 100%;
  }
}

/* ==== SHARED BLOCK START: 頁尾（6 個頁面的 CSS 檔各有一份，內容必須完全相同） ==== */
/* layout.js 依 config/site.js 的 footer 渲染到 #yc-footer。
   桌機 Figma 184:4951、平板 231:16、手機 415:1847。
   版面（直向堆疊、置中、換行、間距）全部由 Bootstrap 的 flex 與 gap 工具 class
   寫在 HTML 裡，這裡只留下顏色、字級和底圖這種沒有工具 class 的東西。

   社群圖示 .yc-social 也放在這個區塊：頁尾每一頁都有，而卡片和分析師頁用的是
   同一個元件，這樣六個檔案都拿得到，不必再多一個共用區塊。

   斷點都寫成 max-width，所以每一段也會套用到所有更窄的寬度：
     @media (max-width: 1199.98px)   平板與手機   Figma 231:16
     @media (max-width:  767.98px)   只有手機     Figma 415:1847 */

/* 每個圖示佔一格 32px。HTML 由 layout.js 的 socialIcons() 產生。 */
.yc-social {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
}

/* Figma 184:4990 把 36x36 的圖稿放在 32px 的圖示格裡，左 -2px、上 -1px。 */
.yc-social img {
  position: absolute;
  left: -2px;
  top: -1px;
  width: 36px;
  height: 36px;
  max-width: none;
}

/* Figma 沒有定義社群圖示的滑鼠移入 (hover) 狀態，所以圖示不做任何變化。 */

.yc-footer {
  padding: 40px 0;
  background: var(--yc-red);
  color: var(--yc-white);
}

.yc-footer__logo {
  display: block;
  width: 239px;
  height: 40px;
  object-fit: contain;
}

/* 頁尾的圖稿以 32px 繪製，所以剛好填滿圖示格，不需要位移。 */
.yc-footer__socials .yc-social img {
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
}

.yc-footer__notices {
  /* 寬度夠窄，才能重現 Figma 的換行：先 3 則聲明，再 4 則。 */
  max-width: 800px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  color: var(--yc-gold-light);
}

/* 有幾個聲明的文字裡有空格。Figma 從不在單一聲明中間換行，所以換行只能落在
   連結之間。 */
.yc-footer__notices a {
  white-space: nowrap;
}

/* 446:3639 沒有畫頁尾連結的狀態。底線是這個版本自己加的，因為完全沒有回饋的
   連結比單純的底線更糟。 */
@media (hover: hover) {
  .yc-footer__notices a:hover {
    color: var(--yc-white);
    text-decoration: underline;
  }
}

.yc-footer__notices a:focus-visible {
  color: var(--yc-white);
  text-decoration: underline;
}

/* ｜ 前後的空格寫在 HTML 裡，和 Figma 一樣。這裡不再另外加 margin。 */
.yc-footer__sep {
  margin: 0;
}

.yc-footer__info {
  font-size: 14px;
  line-height: 24px;
}

.yc-footer__bottom {
  /* 從桌機的實際渲染量出來的：分隔線上方 38px、下方 20px。 */
  margin-top: 38px;
  padding-top: 20px;
  font-size: 14px;
  line-height: 24px;
  background: url("/assets/img/ui/footer-line.svg") 0 0 / 100% 1px no-repeat;
}

@media (hover: hover) {
  .yc-footer__legal a:hover,
  .yc-footer__bottom a:hover {
    text-decoration: underline;
  }
}

.yc-footer__legal a:focus-visible,
.yc-footer__bottom a:focus-visible {
  text-decoration: underline;
}

/* 平板 231:16：各列更緊、字級 13px；logo 縮成 215x36。 */
@media (max-width: 1199.98px) {
  .yc-footer__logo {
    width: 215px;
    height: 36px;
  }

  .yc-footer__notices {
    max-width: 100%;
    font-size: 13px;
    line-height: 26px;
  }

  .yc-footer__info {
    font-size: 13px;
    line-height: 22px;
  }

  .yc-footer__bottom {
    margin-top: 24px;
    padding-top: 16px;
    font-size: 13px;
    line-height: 22px;
  }
}

/* 手機 415:1847：資訊列和最底下那一列改成上下堆疊（HTML 裡的 flex-column）。 */
@media (max-width: 767.98px) {
  .yc-footer {
    padding: 32px 0;
  }
}
/* ==== SHARED BLOCK END: 頁尾 ==== */