/*
 * 投資者專區內容頁樣式。
 *
 * 內頁與首頁共用同一份編譯後的 style.{locale}.css（頁首、左側 logo 直條、頁尾都在裡面），
 * 所以這支檔案有兩個任務：
 *   1. 把首頁那些「單頁式」的全域規則覆蓋回一般可捲動網頁（body{overflow:hidden}、
 *      body{position:fixed}、.aside-section{transform:translateX(-100%)}、.fade-up{opacity:0} …）
 *   2. 定義內頁自己的區塊（左側分類選單、麵包屑、標題、內文、附件、外連按鈕）
 *
 * ⚠ public/styles/style.{locale}.css 是編譯產物、SCSS 沒有進入點無法重編，一律不改它，
 *    要覆蓋就在這裡寫，並用 html.investors-page / body.inv-body-page 拉高權重
 *    （首頁那些規則的選擇器是 body:not(.in-0,.in-999) …，權重不低）。
 *
 * 色票沿用首頁：主橘 #FC671A、深藍 #182F8F、文字 #222、淺灰 #F4F4F4。
 * 版面規則見 doc/2026-09-04-investors-refactor-spec.md 第 5.3 節，
 * 左側選單視覺參考 doc/reference/參考-左側子選單樣式-datavan.png。
 */

/* ==========================================================================
   0. 把首頁的全域規則覆蓋回「一般網頁」
   ========================================================================== */

html.investors-page {
    /* 固定頁首的高度，內容要空出這麼多（跟 _header.scss 的 header{height} 對齊） */
    --inv-header-h: 107px;

    --inv-text: #222;
    --inv-text-sub: #555;
    --inv-orange: #FC671A;
    --inv-blue: #182F8F;
    --inv-blue-dark: #0F1F63;
    --inv-gray-bg: #F4F4F4;
    --inv-line: #E3E3E3;
}

@media (max-width: 2000px) {
    html.investors-page {
        --inv-header-h: 85px;
    }
}

@media (max-width: 1199px) {
    html.investors-page {
        --inv-header-h: 72px;
    }
}

/*
 * ≥1200 的內頁把頁首加高到 120px，跟左上角 logo 直條（.aside-section，高 120px）切齊。
 * 首頁的 85px 是壓在深色主視覺上、沒有邊界所以看不出來；內頁的頁首有底色與底線，
 * 85px 會從 logo 圖片（29〜90px）中間橫切過去，看起來就是「logo 被切到」。
 * 這個值要跟下面 body.inv-body-page header 的 height 一起改。
 */
@media (min-width: 1200px) {
    html.investors-page {
        --inv-header-h: 120px;
    }
}

/* 首頁是滿版單頁式，body 被鎖住不能捲動；內頁必須放開 */
body.inv-body-page {
    overflow: visible;
    position: static;
    background: #fff;
}

/* .aside-section 預設被推到畫面外，靠 ui.js 加 .active 才滑進來；內頁沒有 ui.js */
html.investors-page .aside-section {
    transform: none;
}

/* .fade-up 預設 opacity:0，靠 .section.active 才浮現；內頁沒有區塊切換，直接顯示 */
html.investors-page .fade-up,
html.investors-page .fade-right {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   1. 共用頁首（templates/index/header.blade.php）在內頁的樣子
   ========================================================================== */

/*
 * ≥1200：內頁跟首頁一樣「預設只露出漢堡鈕，點了才展開選單」。
 * 收合時頁首完全透明（不畫底色、不畫分隔線），才不會在 logo 旁邊憑空多一條橫線、
 * 也不會讓人誤以為 logo 沒有垂直置中；展開時才補上近乎白色的底避免壓字。
 */
@media (min-width: 1200px) {
    /* 加高到跟 logo 直條一樣高，並改成垂直置中（首頁是 flex-end，貼著底線會太擠） */
    body.inv-body-page header {
        height: 120px;
        align-items: center;
    }

    body.inv-body-page header.open {
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid var(--inv-line);
    }

    /*
     * .menu-toggle 與 .lang 是絕對定位、靠 bottom 貼齊首頁 85px 頁首的底部，
     * 頁首加高後要自己重新置中。它們的 transform 被用在展開動畫上（translateX），
     * 不能拿來做垂直置中，所以用 bottom: calc(50% - 半個高度)。
     */
    body.inv-body-page header .menu-toggle {
        bottom: calc(50% - 13px);
    }

    body.inv-body-page header .lang {
        bottom: calc(50% - 15px);
    }

    /*
     * 「投資者專區」的下拉面板定位是 li 的 top:100%，頁首加高後 li 只有文字那麼高，
     * 面板會從頁首中間長出來、把底線切斷。把選單容器與 li 撐到頁首滿高，
     * li 的底就等於頁首的底，面板自然掛在底線下方（不必寫死像素）。
     */
    body.inv-body-page header .menu {
        display: flex;
        align-items: center;
        align-self: stretch;
    }

    body.inv-body-page header .menu > ul {
        align-items: stretch;
        height: 100%;
    }

    body.inv-body-page header .menu > ul > li {
        display: flex;
        align-items: center;
    }

    /* 漢堡鈕在首頁是白色（壓在深色主視覺上），內頁底是白的，要改成深色才看得見 */
    body.inv-body-page header .menu-toggle .text {
        color: var(--inv-text);
    }

    body.inv-body-page header .menu-toggle .bars .bar {
        background: var(--inv-text);
    }
}

/* ≤1199：頁首本身是橘底（首頁那套抽屜），字要白的才看得見 */
@media (max-width: 1199px) {
    /*
     * 內頁模式（header[data-nav-mode="inner"]）的主選單是 <a> 不是 <button>，
     * 兩種都要點名，否則抽屜裡會變成橘底配深色字，看不清楚。
     * 寫 .menu > ul > li > a 只認第一層：下拉面板裡的 <a> 由 site-nav.css 自己管，
     * 這裡若寫成 .menu ul li > a 會連面板一起吃到（跟 site-nav.css 踩過的同一個坑）。
     */
    body.inv-body-page header .menu-toggle .text,
    body.inv-body-page header .menu ul li button,
    body.inv-body-page header .menu > ul > li > a,
    body.inv-body-page header .lang .link {
        color: #fff;
    }

    body.inv-body-page header .menu-toggle .bars .bar {
        background: #fff;
    }

    body.inv-body-page header .lang .lang-block {
        border-color: rgba(255, 255, 255, 0.4);
    }

    body.inv-body-page header .lang .speration {
        color: rgba(255, 255, 255, 0.4);
    }

    /* 抽屜是橘底，選單文字與底線都要白 */
    body.inv-body-page header .menu ul li button:after,
    body.inv-body-page header .menu > ul > li > a::after {
        background: #fff;
    }
}

/* ==========================================================================
   2. 內頁外框：左側留 logo 直條的寬度，上方留固定頁首的高度
   ========================================================================== */

.inv-shell {
    padding-left: var(--aside-width);
    background: #fff;
    color: var(--inv-text);
}

.inv-container {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 0 clamp(32px, 3.6vw, 72px);
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: calc(var(--inv-header-h) + 48px) max(36px, 3vw) 96px;
}

/* ==========================================================================
   3. 左側分類選單
   ========================================================================== */

.inv-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--inv-header-h) + 24px);
    /* 原本上緣是深藍的 CATEGORY 標題列，所以 border-top 設 0。標題列拿掉之後
       上緣沒有東西收邊，要把框線補回來。 */
    border: 1px solid var(--inv-line);
    background: #fff;
}

.inv-menu,
.inv-menu__sublist,
.inv-menu__pages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inv-menu__cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--inv-line);
    color: var(--inv-text);
    font-size: 0.95rem;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

@media (hover: hover) {
    .inv-menu__cat-link:hover {
        background: var(--inv-gray-bg);
        color: var(--inv-blue);
    }
}

/* 「＋／−」記號：收合是加號，展開是減號（參考圖 datavan） */
.inv-menu__cat-mark {
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}

.inv-menu__cat-mark::before,
.inv-menu__cat-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.inv-menu__cat-mark::after {
    transform: rotate(90deg);
}

.inv-menu__item.is-expanded > .inv-menu__cat-link {
    background: var(--inv-blue);
    color: #fff;
    font-weight: 700;
    border-bottom-color: var(--inv-blue);
}

@media (hover: hover) {
    .inv-menu__item.is-expanded > .inv-menu__cat-link:hover {
        background: var(--inv-blue);
        color: #fff;
    }
}

/* 展開中的分類：記號變成減號 */
.inv-menu__item.is-expanded > .inv-menu__cat-link .inv-menu__cat-mark::after {
    display: none;
}

/* ---- 三層的區分（使用者回饋：只靠縮排分不出誰是誰的下層）----
   不看縮排也要分得出來，所以三層各自拉開：
     第一層：0.95rem、字重 600、深色字、白底
     第二層：0.875rem、字重 400、次要灰字、整個展開群組鋪一層淡灰底 ＋ 左側藍色細條，
             把「這些都是上面那個分類的下層」框出來；＋號也縮小變淡
     第三層（頁面）：0.85rem、再縮排一階、「›」前導
   縮排一階一階加大（20 → 34 → 50px）。 */

.inv-menu > .inv-menu__item > .inv-menu__cat-link {
    font-weight: 600;
}

/* 展開群組（第二層分類 ＋ 直接掛在第一層底下的頁面）：只用淡灰底標示層級。
   原本左側還有一條藍色細條，與縮排、底色重複表達同一件事，拿掉。 */
.inv-menu__sublist,
.inv-menu > .inv-menu__item > .inv-menu__pages {
    background: #F7F8FB;
}

/* 第二層分類 */
.inv-menu__sublist .inv-menu__cat-link {
    padding: 12px 20px 12px 34px;
    color: var(--inv-text-sub);
    font-size: 0.875rem;
    font-weight: 400;
    border-bottom-color: #E9ECF3;
}

.inv-menu__sublist .inv-menu__cat-mark {
    width: 10px;
    height: 10px;
    opacity: 0.6;
}

.inv-menu__sublist .inv-menu__cat-mark::before,
.inv-menu__sublist .inv-menu__cat-mark::after {
    width: 10px;
}

@media (hover: hover) {
    .inv-menu__sublist .inv-menu__cat-link:hover {
        background: #EEF1F8;
        color: var(--inv-blue);
    }
}

/* 展開中的第二層：淡藍底、深藍字、粗體，比第一層的實心深藍輕一階 */
.inv-menu__sublist .inv-menu__item.is-expanded > .inv-menu__cat-link {
    background: #E8EDF9;
    color: var(--inv-blue);
    font-weight: 700;
    border-bottom-color: #DCE2F1;
}

.inv-menu__sublist .inv-menu__item.is-expanded > .inv-menu__cat-link .inv-menu__cat-mark {
    opacity: 1;
}

@media (hover: hover) {
    .inv-menu__sublist .inv-menu__item.is-expanded > .inv-menu__cat-link:hover {
        background: #E8EDF9;
        color: var(--inv-blue);
    }
}

/* 頁面項目（第三層） */
.inv-menu__page a {
    display: block;
    padding: 11px 20px 11px 34px;
    border-bottom: 1px solid #E9ECF3;
    color: var(--inv-text-sub);
    font-size: 0.85rem;
    line-height: 1.6;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

/* 掛在第二層底下的頁面再縮一階 */
.inv-menu__sublist .inv-menu__pages a {
    padding-left: 50px;
}

.inv-menu__page-arrow {
    display: inline-block;
    margin-right: 8px;
    color: var(--inv-blue);
    font-weight: 700;
    opacity: 0.7;
}

@media (hover: hover) {
    .inv-menu__page a:hover {
        background: #EEF1F8;
        color: var(--inv-orange);
    }

    .inv-menu__page a:hover .inv-menu__page-arrow {
        color: var(--inv-orange);
        opacity: 1;
    }
}

/* 當前頁：粗體 ＋ 白底 ＋ 深藍字。原本左側還有一條橘色條，粗體本身已經是
   非顏色的區分手段，WCAG 1.4.1 仍然滿足，色條屬於重複表達。 */
.inv-menu__page.is-current > a {
    background: #FFF;
    color: var(--inv-blue);
    font-weight: 700;
}

.inv-menu__page.is-current > a .inv-menu__page-arrow {
    color: var(--inv-orange);
    opacity: 1;
}

/* ==========================================================================
   4. 右欄：麵包屑 / 標題 / 內文
   ========================================================================== */

.inv-main {
    min-width: 0;
    max-width: 880px;
}

.inv-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    font-size: 0.78rem;
    color: var(--inv-text-sub);
}

.inv-breadcrumb li {
    display: flex;
    align-items: center;
}

.inv-breadcrumb li:not(:last-child)::after {
    content: "\203A";
    margin: 0 8px;
    color: #bbb;
}

.inv-breadcrumb a {
    color: var(--inv-text-sub);
    text-decoration: none;
    transition: color 0.25s;
}

@media (hover: hover) {
    .inv-breadcrumb a:hover {
        color: var(--inv-orange);
    }
}

.inv-breadcrumb [aria-current="page"] {
    color: var(--inv-text);
    font-weight: 700;
}

.inv-heading {
    position: relative;
    margin: 0 0 40px;
    padding-bottom: 22px;
}

.inv-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    background: var(--inv-orange);
}

.inv-heading__title {
    /* 與首頁 .section-title 同一組尺寸 */
    margin: 0;
    font-size: clamp(1.778rem, 1.2238rem + 1.2989vw, 2.667rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 2.4px;
    color: var(--inv-blue);
}

/* 英文小標：沿用首頁 .en-text 的藍色漸層字 */
.inv-heading__en {
    margin: 8px 0 0;
    /* 字級與首頁 #index .section .en-text 同一組 clamp（24px→18px） */
    font-size: clamp(1.125rem, 1.0185rem + 0.2948vw, 1.333rem);
    font-weight: 700;
    line-height: 110%;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* ⚠ width 一定要收成文字寬度。background-clip: text 是「先在整個元素的
       版面盒子上畫漸層，再用文字當遮罩剪下來」，<p> 是區塊元素會撐滿整行
       （實測 880px），而 INVESTORS 只佔最左邊約 150px，剪出來的就只有漸層
       最開頭那一小段＝看起來整片深藍、完全沒有漸層。首頁看得到漸層是因為
       它的英文副標很長、剛好吃掉大半個盒子，不是因為參數不同。 */
    width: fit-content;
    background: linear-gradient(90deg, #182F8F 0%, #72C9F1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 小尺寸專用的「本區其他頁面」下拉 */
.inv-mobile-nav {
    display: none;
    margin: 0 0 32px;
}

.inv-mobile-nav label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--inv-blue);
}

.inv-mobile-nav select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--inv-line);
    border-radius: 0;
    background: #fff;
    color: var(--inv-text);
    font-family: inherit;
    font-size: 0.95rem;
}

/* ---- 內文（後台富文本，結構不可控，樣式要撐得住） ----
   設計語彙一律取自首頁 style.{locale}.css，對照如下（2026-09-18 盤點）：
     字級階：fs-18 內文 clamp(0.9375rem,…,1.125rem)、fs-24 項目標題 clamp(1.2rem,…,1.333rem)、
             fs-30 小節標題 clamp(1.333rem,…,1.667rem)；≤767px 各自退成 15 / 18 / 20px
     行高：  標題 130%、卡片內文 1.5、聯絡資訊／下載清單 1.8
     字距：  中文 body 1px、小節標題 1.5px、項目標題 1.2px、大標 2.4px；英文版 body 是 0
     間距：  9 / 18 / 27 / 36 / 54 / 72px 一套（.mt-9px … .mt-72px），手機減半
     分隔線：只有 1px 細線（#eee / #ddd / #ccc），首頁沒有任何「粗色條」或「左側直線」
     灰底塊：#F4F4F4（下載區）、#eee（新聞標籤 padding 9px 18px）
     清單：  advantage-list 不用預設圓點，用 Montserrat 的「01」計數字 + 1px #eee 分隔
     連結：  color:inherit，hover 變主藍，transition 0.3s
   TipTap 會把 li / th / td 裡的文字再包一層 <p>，段落間距要在那裡歸零，
   否則清單與表格看起來會像多空一行。 */

.inv-body {
    /* 首頁 .fs-18：18px → 15px（w2560 → w1280），跟 body 同一組 */
    font-size: clamp(0.9375rem, 0.625rem + 0.3125vw, 1.125rem);
    line-height: 1.8;
    color: var(--inv-text);
    word-wrap: break-word;
}

.inv-body > *:first-child {
    margin-top: 0;
}

.inv-body > *:last-child {
    margin-bottom: 0;
}

/* h2 = 首頁小節標題（.sub-title.fs-30）：主藍、700、130%、字距 1.5px；
   底下用首頁下載區分類標題（.file-category）那條 1px 細線收邊，不用左側粗色條 */
.inv-body h2 {
    margin: 54px 0 18px;
    padding: 0 0 9px;
    border: 0;
    border-bottom: 1px solid #ddd;
    font-size: clamp(1.333rem, 1.1901rem + 0.3353vw, 1.667rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 1.5px;
    /* 深色字不是主藍：首頁的層級是「區塊大標（藍）＋英文副標（漸層）」之下，
       所有子項目標題都是深色（例如「與時俱進 精益求精」）。內頁的藍色已經用在
       頁面大標 .inv-heading__title，內文標題再用藍就會跟頁面大標搶同一階。 */
    color: var(--inv-text);
}

/* h3 = 首頁項目標題（.fs-24 .fw-500，如新聞標題、案例卡片標題、優勢清單 .list-title）：
   深色字、500、130%、字距 1.2px，跟 h2 差一階 */
.inv-body h3 {
    margin: 36px 0 9px;
    font-size: clamp(1.2rem, 1.1431rem + 0.1335vw, 1.333rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 1.2px;
    color: var(--inv-text);
}

.inv-body h4,
.inv-body h5,
.inv-body h6 {
    margin: 27px 0 9px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--inv-text);
}

/* 標題緊接標題時（h2 下面直接 h3），上方留白收成一個段距 */
.inv-body h2 + h3,
.inv-body h3 + h4 {
    margin-top: 18px;
}

/* 段距 = 首頁 .mt-18px */
.inv-body p {
    margin: 0 0 18px;
}

/* 清單：縮排 2em（≈ 首頁計數字 48px 欄寬的一半，內文清單不需要那麼寬），
   項目之間只留 0.5 個段距；ol 的數字沿用首頁 advantage-list 的 Montserrat 500 */
.inv-body ul,
.inv-body ol {
    margin: 0 0 18px;
    padding-left: 2em;
}

.inv-body li {
    margin: 0 0 6px;
    padding-left: 0.25em;
}

.inv-body li:last-child {
    margin-bottom: 0;
}

.inv-body ol > li::marker {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: var(--inv-blue);
}

.inv-body ul > li::marker {
    color: var(--inv-blue);
}

.inv-body li > ul,
.inv-body li > ol {
    margin: 6px 0 0;
}

/* TipTap：li / th / td 裡的段落不留段距 */
.inv-body li > p,
.inv-body th > p,
.inv-body td > p {
    margin: 0;
}

.inv-body li > p + p,
.inv-body td > p + p,
.inv-body th > p + p {
    margin-top: 9px;
}

/* 連結：主藍底線，hover 轉橘（內頁選單／麵包屑同一套）；transition 跟首頁一樣 0.3s */
.inv-body a {
    color: var(--inv-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.3s ease;
}

@media (hover: hover) {
    .inv-body a:hover {
        color: var(--inv-orange);
    }
}

.inv-body strong {
    font-weight: 700;
}

/* 上下標縮成 0.75em 並把行高歸零，不然那一行會被撐高（首頁沒有對應元素，取最保守做法） */
.inv-body sup,
.inv-body sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.inv-body sup {
    top: -0.5em;
}

.inv-body sub {
    bottom: -0.25em;
}

.inv-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 27px 0;
}

/* 段落只包一張圖（TipTap 的圖片一律包在 <p> 裡）時，圖的外距交給 p */
.inv-body p > img:only-child {
    margin: 0;
}

/* 分隔線 = 首頁的 1px #ddd 細線，上下各留一個 .mt-36px */
.inv-body hr {
    margin: 36px 0;
    border: 0;
    border-top: 1px solid #ddd;
}

/* 引言：首頁的灰底塊語彙（下載區 #F4F4F4、內距 9/18 節奏），不畫左側色條、不置中。
   字色用次要灰 + 斜體與內文區隔，字級不變 */
.inv-body blockquote {
    margin: 27px 0;
    padding: 18px 27px;
    border: 0;
    background: var(--inv-gray-bg);
    color: var(--inv-text-sub);
    font-style: italic;
}

.inv-body blockquote > p:last-child {
    margin-bottom: 0;
}

/* 行內程式碼／區塊程式碼：首頁沒有，只給最小可讀樣式（灰底、等寬、字級略縮） */
.inv-body code {
    padding: 2px 6px;
    background: var(--inv-gray-bg);
    font-family: Menlo, Consolas, "Courier New", monospace;
    font-size: 0.9em;
}

.inv-body pre {
    margin: 0 0 18px;
    padding: 18px 27px;
    overflow-x: auto;
    background: var(--inv-gray-bg);
    font-size: 0.9em;
    line-height: 1.6;
}

.inv-body pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

/* 表格：表頭深藍、斑馬紋、放不下時橫向捲動（所有尺寸，不只手機）
   ---------------------------------------------------------------------------
   原本只有 <992px 才給橫向捲動，桌機讓表格自己壓縮。但客戶的投資人專區表格
   動輒 8~10 欄（例如「董事會成員核心能力矩陣」），在 1440px 就會把欄位標題
   壓成直排斷行（「性別」變成「性/別」），比出現捲軸還難看。
   改成全尺寸都能橫向捲動，並讓表頭文字不斷行 —— 表頭是最短也最該保持完整的。
   display:block 會讓表格縮成內容寬，所以補 min-width:100% 讓欄少的表格照樣撐滿。

   線條語彙跟首頁一致：首頁所有分隔都是「橫向 1px 細線」（#eee / #ddd / #ccc），
   沒有直向格線，所以儲存格只畫上下框線、不畫左右；字級同內文、行高用首頁卡片的 1.5，
   內距用 12px / 18px（首頁 9 / 18 節奏的一格半）。 */
.inv-body table {
    display: block;
    width: 100%;
    min-width: 100%;
    overflow-x: auto;
    margin: 27px 0;
    border-collapse: collapse;
    font-size: inherit;
    line-height: 1.5;
}

/* 表頭不斷行：欄位標題是短詞，斷行只會變成沒人看得懂的直排字 */
.inv-body table th {
    white-space: nowrap;
}

/* 後台編輯器（TipTap）會把儲存格內容包成 <p>（設置中對齊時也是寫在 <p> 的 style 上），
   段落的下外距會讓那一格比同列其他格高出一截、文字對不齊 */
.inv-body table th > p:last-child,
.inv-body table td > p:last-child {
    margin-bottom: 0;
}

/* 資料格用 keep-all：中文預設可以在任意兩個字之間斷行，欄位一窄就會把
   「陳建志」拆成「陳建／志」、「51-60」拆成「51-／60」。keep-all 禁止在
   連續的 CJK 字元之間斷行，但仍允許在「、」「，」這類標點處斷 ——
   所以短詞（姓名、職稱、年齡區間）保持完整，長句（主要經歷）照樣會換行。
   純 nowrap 做不到這件事：長句會整串拉成一行，把表格撐到必須橫向捲動。 */
.inv-body table td {
    word-break: keep-all;
}

.inv-body table th,
.inv-body table td {
    padding: 12px 18px;
    border: 0;
    border-bottom: 1px solid #ddd;
    text-align: left;
    vertical-align: middle;
}

.inv-body table th {
    /* 淺灰底深色字，取自首頁新聞標籤 .tag（#eee 底）。深藍實心表頭在內文裡
       份量太重，會蓋過旁邊的標題；表頭的任務是分隔而不是強調。 */
    background: #EEEEEE;
    color: var(--inv-text);
    font-weight: 700;
    letter-spacing: 1.2px;
    border-bottom-color: #CCCCCC;
}

/* 表頭旁邊沒有直線，用一條極淡的分隔讓相鄰欄位讀得出邊界 */
.inv-body table th + th {
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06);
}

.inv-body table tbody tr:nth-child(even) {
    background: #FAFAFA;
}

@media (hover: hover) {
    .inv-body table tbody tr:hover {
        background: #F2F5FD;
    }
}

/* ==========================================================================
   5. 附件清單
   ========================================================================== */

.inv-attachments {
    margin-top: 56px;
}

.inv-attachments__group {
    margin-bottom: 20px;
    border: 1px solid var(--inv-line);
}

.inv-attachments__group > summary {
    padding: 14px 18px;
    border-left: 4px solid var(--inv-orange);
    background: var(--inv-gray-bg);
    color: var(--inv-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    list-style: none;
}

.inv-attachments__group > summary::-webkit-details-marker {
    display: none;
}

.inv-attachments__group > summary::after {
    content: "\002B";
    float: right;
    color: var(--inv-orange);
    font-weight: 700;
}

.inv-attachments__group[open] > summary::after {
    content: "\2212";
}

.inv-attachments__group ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inv-attachments__group li + li {
    border-top: 1px solid var(--inv-line);
}

.inv-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 14px 22px;
    color: var(--inv-text);
    font-size: 0.95rem;
    line-height: 1.6;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.inv-file__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* 文件下載 icon（外框文件 + 向下箭頭），內嵌 SVG 免掉多一支 icon font 相依 */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20' fill='none' stroke='%23FC671A' stroke-width='1.6'%3E%3Cpath d='M3 1h8l6 6v12H3z'/%3E%3Cpath d='M11 1v6h6'/%3E%3Cpath d='M10 10v5m0 0l-2.2-2.2M10 15l2.2-2.2'/%3E%3C/svg%3E");
}

@media (hover: hover) {
    .inv-file:hover {
        background: #F2F5FD;
        color: var(--inv-blue);
    }
}

.inv-file:focus-visible {
    outline: 2px solid var(--inv-orange);
    outline-offset: -2px;
}

/* ==========================================================================
   6. 外連按鈕
   ========================================================================== */

.inv-external {
    margin: 48px 0 0;
}

.inv-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    background: var(--inv-orange);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.inv-btn__arrow {
    font-size: 1.1em;
    line-height: 1;
}

@media (hover: hover) {
    .inv-btn:hover {
        background: var(--inv-blue);
        color: #fff;
    }
}

.inv-btn:focus-visible {
    outline: 2px solid var(--inv-blue);
    outline-offset: 3px;
}

/* ==========================================================================
   7. 共用頁尾（templates/index/footer.blade.php）在內頁的樣子
   ========================================================================== */

/*
 * .section-footer 原本靠 #index .section{display:flex;position:absolute} 才成立，
 * 內頁沒有 #index 這個父層，這裡用最小包裝把它補回來（不複製整段 footer 樣式）。
 * isolation:isolate 是必要的：footer 的背景圖 .bg-img 是 z-index:-1，
 * 沒有自己的堆疊脈絡就會被畫到 .section-footer 的黑底後面，整張圖看不見。
 */
html.investors-page .section-footer {
    display: flex;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/*
 * ≤767px 的分公司是手風琴。樣板寫死了 .active（＝展開），內頁維持這個預設：
 * 投資人多半是直接來找聯絡方式的，一進來就看得到比少捲兩下重要。
 * 點擊收合／展開由 body.blade.php 末端的小段 JS 負責（首頁是 ui.js 做的）。
 */

/* ==========================================================================
   8. RWD
   ========================================================================== */

/* 992〜1199：左欄縮窄，頁首換成首頁那套橘色抽屜（由 header 自己的 CSS 負責） */
@media (max-width: 1199px) {
    .inv-container {
        grid-template-columns: 240px minmax(0, 1fr);
        padding-top: calc(var(--inv-header-h) + 36px);
    }
}

/* <992：左側選單收成內容上方的下拉（規格 5.3） */
@media (max-width: 991px) {
    .inv-container {
        display: block;
        padding: calc(var(--inv-header-h) + 32px) 36px 72px;
    }

    .inv-sidebar {
        display: none;
    }

    .inv-mobile-nav {
        display: block;
    }

    .inv-main {
        max-width: none;
    }
}

@media (max-width: 767px) {
    .inv-container {
        padding: calc(var(--inv-header-h) + 24px) 20px 56px;
    }

    .inv-heading {
        margin-bottom: 28px;
    }

    /* 首頁 ≤767px：fs-18 → 15px、fs-24 → 18px、fs-30 → 20px、間距減半 */
    .inv-body {
        font-size: 15px;
        line-height: 1.7;
    }

    .inv-body h2 {
        margin-top: 36px;
        font-size: 20px;
        letter-spacing: 1px;
    }

    .inv-body h3 {
        margin-top: 27px;
        font-size: 18px;
    }

    .inv-body blockquote,
    .inv-body pre {
        padding: 18px;
    }

    /* 橫向捲動已改到全尺寸套用（見第 4 節），窄畫面只需要再縮一點內距，
       讓同樣的欄數在手機上少捲一點。white-space:nowrap 不再全表套用：
       那會讓「主要經歷」這種長文字欄整欄拉成一條，捲到天邊。 */
    .inv-body table th,
    .inv-body table td {
        padding: 10px 12px;
    }

    .inv-file {
        align-items: flex-start;
        padding: 14px;
    }

    .inv-btn {
        width: 100%;
        justify-content: center;
        padding: 15px 20px;
    }
}