/*
 * CKEditor 內容前台顯示樣式（與後台 CKEditor 4 contents.css 對齊）
 *
 * 用途：
 *   後台使用 CKEditor 4 編輯內容後，前台直出 HTML 時前台 reset CSS 會把 h1~h6、ul/ol、blockquote
 *   等 tag 的樣式蓋掉，導致前後台呈現不一致。本檔案提供 .ckeditor-block-view 作為 wrapper class，
 *   還原 CKEditor 4 contents.css 內的常見 tag 預設樣式，僅在 .ckeditor-block-view 內生效。
 *
 * 字型策略：
 *   不覆寫 font-family，沿用前台 Inter（layout 全域字型）；font-size 使用相對單位 1rem
 *   讓使用者調整裝置字級時跟著縮放。
 *
 * 套用方式：
 *   在 Blade 內所有以 {!! ... !!} 直出 CKEditor 內容的 wrapper 上加 .ckeditor-block-view 即可，
 *   保留原有 class（追加而非取代）。
 */

.ckeditor-block-view {
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
    word-wrap: break-word;
}

/* 標題：CKEditor 4 contents.css 的預設 font-weight: normal、line-height: 1.2 */
.ckeditor-block-view h1,
.ckeditor-block-view h2,
.ckeditor-block-view h3,
.ckeditor-block-view h4,
.ckeditor-block-view h5,
.ckeditor-block-view h6 {
    font-weight: normal;
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: inherit;
}

.ckeditor-block-view h1 {
    font-size: 2em;
}

.ckeditor-block-view h2 {
    font-size: 1.5em;
}

.ckeditor-block-view h3 {
    font-size: 1.17em;
}

.ckeditor-block-view h4 {
    font-size: 1em;
}

.ckeditor-block-view h5 {
    font-size: 0.83em;
}

.ckeditor-block-view h6 {
    font-size: 0.67em;
}

/* 段落 */
.ckeditor-block-view p {
    margin: 0 0 1em;
}

/*
 * 只包單一圖片 / 連結包圖片 / figure 的 <p> 不需要 margin-bottom，
 * 避免 CKEditor 4 自動把 inline <img> 包進 <p> 後，預設 margin 把下方區塊推開。
 * :has() 已被 Safari 15.4+ / Chrome 105+ 支援，2026 年目標瀏覽器皆通過。
 */
.ckeditor-block-view p:has(> img:only-child),
.ckeditor-block-view p:has(> a:only-child > img:only-child),
.ckeditor-block-view p:has(> figure:only-child) {
    margin: 0;
}

/* 清單：CKEditor 4 contents.css padding 0 40px */
.ckeditor-block-view ul,
.ckeditor-block-view ol,
.ckeditor-block-view dl {
    padding: 0 40px;
    margin: 0 0 1em;
}

.ckeditor-block-view ul {
    list-style: disc;
}

.ckeditor-block-view ol {
    list-style: decimal;
}

.ckeditor-block-view ul ul {
    list-style: circle;
}

.ckeditor-block-view ul ul ul {
    list-style: square;
}

.ckeditor-block-view li {
    display: list-item;
    margin-bottom: 0.25em;
}

.ckeditor-block-view dt {
    font-weight: bold;
}

.ckeditor-block-view dd {
    margin-left: 1.5em;
    margin-bottom: 0.5em;
}

/* 引用 */
.ckeditor-block-view blockquote {
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 0 2px 20px;
    margin: 0 0 1em;
    border-left: 5px solid #ccc;
}

/* 連結 */
.ckeditor-block-view a {
    color: #0782C1;
    text-decoration: underline;
}

.ckeditor-block-view a:hover {
    text-decoration: none;
}

/* 水平線 */
.ckeditor-block-view hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
}

/* 行內樣式 */
.ckeditor-block-view strong,
.ckeditor-block-view b {
    font-weight: bold;
}

.ckeditor-block-view em,
.ckeditor-block-view i {
    font-style: italic;
}

.ckeditor-block-view u {
    text-decoration: underline;
}

.ckeditor-block-view s,
.ckeditor-block-view del {
    text-decoration: line-through;
}

.ckeditor-block-view sub {
    vertical-align: sub;
    font-size: smaller;
}

.ckeditor-block-view sup {
    vertical-align: super;
    font-size: smaller;
}

.ckeditor-block-view span[lang] {
    font-style: italic;
}

/* 圖片基礎樣式 */
.ckeditor-block-view img {
    max-width: 100%;
    height: auto;
}

/* CKEditor 4 預設 figure（image caption widget） */
.ckeditor-block-view figure {
    text-align: center;
    margin: 1em 0;
    padding: 0;
    display: block;
}

.ckeditor-block-view figure>figcaption {
    text-align: center;
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5em;
}

/* CKEditor 4 image2 plugin：左右浮動圖片 */
.ckeditor-block-view figure.image {
    display: inline-block;
}

.ckeditor-block-view figure.image-align-left,
.ckeditor-block-view img.left {
    float: left;
    margin: 0 1em 1em 0;
    padding: 5px;
}

.ckeditor-block-view figure.image-align-right,
.ckeditor-block-view img.right {
    float: right;
    margin: 0 0 1em 1em;
    padding: 5px;
}

.ckeditor-block-view figure.image-align-center {
    display: block;
    margin: 1em auto;
    text-align: center;
}

/* CKEditor 連結內圖片 */
.ckeditor-block-view a>img {
    border: none;
}

/* 標記 highlight */
.ckeditor-block-view .marker {
    background-color: Yellow;
}

/* 預先格式化文字 */
.ckeditor-block-view pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f7f7f9;
    padding: 8px;
    border: 1px solid #e1e1e8;
    border-radius: 3px;
    margin: 0 0 1em;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    -moz-tab-size: 4;
    tab-size: 4;
}

.ckeditor-block-view code {
    background: #f7f7f9;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    color: #c7254e;
}

.ckeditor-block-view pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* 表格 */
.ckeditor-block-view table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
    max-width: 100%;
}

.ckeditor-block-view table caption {
    caption-side: top;
    text-align: center;
    padding: 5px;
    font-style: italic;
    color: #666;
}

.ckeditor-block-view table th,
.ckeditor-block-view table td {
    padding: 5px 10px;
    border: 1px solid #bfbfbf;
    vertical-align: top;
    text-align: left;
}

.ckeditor-block-view table th {
    background: #f5f5f5;
    font-weight: bold;
}

/* CKEditor 4 image widget 進階樣式 */
.ckeditor-block-view .image-clean {
    border: 0;
    background: none;
    padding: 0;
}

.ckeditor-block-view .image-clean>figcaption {
    font-size: 0.9em;
    text-align: right;
}

.ckeditor-block-view .image-grayscale {
    background-color: white;
    color: #666;
}

.ckeditor-block-view .image-grayscale img,
.ckeditor-block-view img.image-grayscale {
    filter: grayscale(100%);
}

/* CKEditor 4 媒體嵌入尺寸 */
.ckeditor-block-view .embed-240p {
    max-width: 426px;
    max-height: 240px;
    margin: 0 auto;
}

.ckeditor-block-view .embed-360p {
    max-width: 640px;
    max-height: 360px;
    margin: 0 auto;
}

.ckeditor-block-view .embed-480p {
    max-width: 854px;
    max-height: 480px;
    margin: 0 auto;
}

.ckeditor-block-view .embed-720p {
    max-width: 1280px;
    max-height: 720px;
    margin: 0 auto;
}

.ckeditor-block-view .embed-1080p {
    max-width: 1920px;
    max-height: 1080px;
    margin: 0 auto;
}

/* clearfix：避免浮動圖片造成父層高度塌陷 */
.ckeditor-block-view::after {
    content: "";
    display: table;
    clear: both;
}

/* 手機版（<= 767px）：取消圖片浮動，避免在窄螢幕擠壓文字 */
@media (max-width: 767px) {

    .ckeditor-block-view figure.image-align-left,
    .ckeditor-block-view figure.image-align-right,
    .ckeditor-block-view img.left,
    .ckeditor-block-view img.right {
        float: none;
        display: block;
        margin: 0 auto 1em;
    }

    .ckeditor-block-view ul,
    .ckeditor-block-view ol,
    .ckeditor-block-view dl {
        padding: 0 20px;
    }

    .ckeditor-block-view table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * 表格屬性 → 手機版排版 → 往下排放（後台 CKEditor 對話框）：
     * 在 <table> 上加 .stack-mobile，tr / td 改為 block，內容垂直堆疊；
     * 同時取消預設的 overflow-x:auto，避免出現多餘的橫向捲軸。
     */
    .ckeditor-block-view table.stack-mobile {
        overflow-x: visible;
    }

    .ckeditor-block-view table.stack-mobile,
    .ckeditor-block-view table.stack-mobile thead,
    .ckeditor-block-view table.stack-mobile tbody,
    .ckeditor-block-view table.stack-mobile tfoot,
    .ckeditor-block-view table.stack-mobile tr,
    .ckeditor-block-view table.stack-mobile th,
    .ckeditor-block-view table.stack-mobile td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/*
 * 自訂 plugin「區塊設定」（customblock）建立的 <div class="custom-block">：
 * 寬度設定走 inline style（width / max-width 由對話框寫入），
 * 這裡只補 box-sizing 與圖片自動縮放，避免使用者放入大圖時超出區塊邊界。
 */
.ckeditor-block-view .custom-block {
    box-sizing: border-box;
}

.ckeditor-block-view .custom-block img {
    max-width: 100%;
    height: auto;
}

/*
 * 自訂 plugin「圖文樣式」（stylelayout1）：
 *   - 樣式 1（左圖右文，預設）：.style-block-1
 *   - 樣式 2（左文右圖）：.style-block-1.style-block-1--reverse
 * 結構：<div class="style-block style-block-1[ style-block-1--reverse]">
 *           <div class="style-block-1-image"><img></div>
 *           <div class="style-block-1-body">
 *               <h3 class="style-block-1-title">大標題</h3>
 *               <div class="style-block-1-text"><p>內文</p>...</div>
 *           </div>
 *       </div>
 * 子元素 DOM 順序維持 image 在前、body 在後；樣式 2 靠 flex-direction:row-reverse 切版。
 * 桌面版兩欄並排（左 45% 右 55%）；≤767px 改為單欄垂直堆疊（圖在上、文在下，樣式 1/2 一致）。
 */
.ckeditor-block-view .style-block-1 {
    display: flex;
    align-items: stretch;
    gap: 32px;
    margin: 32px 0;
    box-sizing: border-box;
}

.ckeditor-block-view .style-block-1.style-block-1--reverse {
    flex-direction: row-reverse;
}

.ckeditor-block-view .style-block-1 .style-block-1-image {
    flex: 0 0 45%;
    max-width: 45%;
    padding: 30px;
}

.ckeditor-block-view .style-block-1 .style-block-1-image img {
    display: block;
    width: 100%;
    height: auto;
}

.ckeditor-block-view .style-block-1 .style-block-1-body {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}

.ckeditor-block-view .style-block-1 .style-block-1-title {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
}

.ckeditor-block-view .style-block-1 .style-block-1-text p {
    margin: 0 0 12px;
    line-height: 1.7;
    font-size: 16px;
}

.ckeditor-block-view .style-block-1 .style-block-1-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {

    .ckeditor-block-view .style-block-1,
    .ckeditor-block-view .style-block-1.style-block-1--reverse {
        flex-direction: column;
        gap: 20px;
        margin: 24px 0;
    }

    .ckeditor-block-view .style-block-1 .style-block-1-image,
    .ckeditor-block-view .style-block-1 .style-block-1-body {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .ckeditor-block-view .style-block-1 .style-block-1-title {
        font-size: 22px;
    }

    .ckeditor-block-view .style-block-1 .style-block-1-text p {
        font-size: 15px;
    }
}

/*
 * 自訂 plugin「雙文案樣式」（stylelayout3）：兩欄並排純文案，無圖片、無中央分隔線。
 * 結構：<div class="style-block style-block-3">
 *           <div class="style-block-3-col">
 *               <h3 class="style-block-3-title">左標題</h3>
 *               <div class="style-block-3-text"><p>左內文</p>...</div>
 *           </div>
 *           <div class="style-block-3-col"> ... 右欄同結構 ... </div>
 *       </div>
 * 桌面版兩欄等寬並排（各 50%）+ gap 32px；≤767px 改為單欄垂直堆疊（左欄在上、右欄在下）。
 */
.ckeditor-block-view .style-block-3 {
    display: flex;
    align-items: stretch;
    gap: 32px;
    margin: 32px 0;
    box-sizing: border-box;
}

.ckeditor-block-view .style-block-3 .style-block-3-col {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.ckeditor-block-view .style-block-3 .style-block-3-title {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
}

.ckeditor-block-view .style-block-3 .style-block-3-text p {
    margin: 0 0 12px;
    line-height: 1.7;
    font-size: 16px;
}

.ckeditor-block-view .style-block-3 .style-block-3-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ckeditor-block-view .style-block-3 {
        flex-direction: column;
        gap: 24px;
        margin: 24px 0;
    }

    .ckeditor-block-view .style-block-3 .style-block-3-col {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .ckeditor-block-view .style-block-3 .style-block-3-title {
        font-size: 22px;
    }

    .ckeditor-block-view .style-block-3 .style-block-3-text p {
        font-size: 15px;
    }
}

/*
 * 自訂 plugin「雙圖樣式」（stylelayout4）：兩欄並排純圖片，無標題 / 內文 / 外連。
 * 結構：<div class="style-block style-block-4">
 *           <div class="style-block-4-col"><img></div>
 *           <div class="style-block-4-col"><img></div>
 *       </div>
 * 桌面版兩欄等寬並排（各 50%）+ gap 32px；≤767px 改為單欄垂直堆疊（左圖在上、右圖在下）。
 */
.ckeditor-block-view .style-block-4 {
    display: flex;
    align-items: stretch;
    gap: 32px;
    margin: 32px 0;
    box-sizing: border-box;
}

.ckeditor-block-view .style-block-4 .style-block-4-col {
    flex: 1 1 50%;
    min-width: 0;
}

.ckeditor-block-view .style-block-4 .style-block-4-col img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .ckeditor-block-view .style-block-4 {
        flex-direction: column;
        gap: 20px;
        margin: 24px 0;
    }

    .ckeditor-block-view .style-block-4 .style-block-4-col {
        flex: 1 1 auto;
        max-width: 100%;
    }
}

/*
 * 自訂 plugin「新增卡片樣式」（cardstyle）：<ul class="functionality"> 多卡片版型。
 * 規格與 public/template/html/assets/type.scss 內 `.functionality` 區段一致。
 * 結構：<ul class="functionality mb-5">
 *           <li><img><h4>標題</h4><p>內文</p></li> ...
 *       </ul>
 * 桌面版三欄並排（每欄 33.33% - 20px，column-gap 30px），≤578px 改為單欄堆疊。
 * 前台已載 Bootstrap，`.mb-5` 由 Bootstrap 提供，這裡不再定義。
 */
.ckeditor-block-view .functionality {
    padding: 0;
    list-style: none;
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    max-width: 1200px;
    box-sizing: border-box;
}

.ckeditor-block-view .functionality>li {
    flex: 0 0 calc(33.33% - 20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 30px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.ckeditor-block-view .functionality>li img {
    display: block;
    margin: 30px auto;
    max-width: 100%;
    height: auto;
}

.ckeditor-block-view .functionality>li h4 {
    margin: 15px 0;
    font-size: 24px;
}

.ckeditor-block-view .functionality>li p {
    text-align: justify;
    color: #555;
    margin: 0;
}

@media (max-width: 578px) {
    .ckeditor-block-view .functionality {
        column-gap: 0;
    }

    .ckeditor-block-view .functionality>li {
        flex: 0 0 100%;
        margin-bottom: 30px;
    }
}

/*
 * 自訂 plugin「主標題（紅線）」（sectiontitle）：<h3 class="section-title">。
 * 視覺與前台 .product-attachments .h3 / .related h3 一致：
 *   32px 粗體置中 + 底下 50px×3px 紅色短線（#e60012），手機版 24px。
 * 與後台 contents.css 對齊；前台 selector 多一層 .ckeditor-block-view 避免外溢。
 */
.ckeditor-block-view .section-title {
    position: relative;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    color: #231815;
    line-height: 1.3;
    margin: 0 0 50px;
    padding-bottom: 18px;
}

.ckeditor-block-view .section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: #e60012;
}

@media (max-width: 767px) {
    .ckeditor-block-view .section-title {
        font-size: 24px;
        margin-bottom: 35px;
    }
}

/**
 * 銷售通路表格（findstorestable plugin 插入）
 *
 * CKEditor 工具列「銷售通路表格」按鈕產生的 <table class="table table-bordered find_stores">，
 * 後台 contents.css 與前台 ckeditor_view.css 兩處規則對齊（前台 selector 多一層 .ckeditor-block-view）。
 */
.ckeditor-block-view .find_stores {
    width: 100%;
}

.ckeditor-block-view .find_stores tr th {
    font-weight: 500;
    color: #555;
    border: 1px solid #f0f0f0;
    background: #f7f7f7;
    padding: 12px 24px;
    text-align: center;
    width: 430px;
}

.ckeditor-block-view .find_stores tr td {
    color: #555;
    margin: 0;
    padding: 12px 24px;
    font-size: 15px;
    line-height: 1.6;
    border: 1px solid #f0f0f0;
    background-color: #fff;
}

@media (max-width: 767px) {
    .ckeditor-block-view .find_stores {
        width: 100%;
        display: table;
    }

    .ckeditor-block-view .find_stores tbody {
        display: table-row-group;
    }

    .ckeditor-block-view .find_stores tbody tr {
        display: table-row;
    }

    .ckeditor-block-view .find_stores tr th {
        width: auto;
        display: table-cell;
        padding: 10px 12px;
    }

    .ckeditor-block-view .find_stores tr td {
        display: table-cell;
        padding: 10px 12px;
    }
}

/**
 * 卡片網格樣式（cardgrid plugin 插入）
 *
 * CKEditor 工具列「卡片樣式 1/2/3」按鈕產生的 <div class="card-grid card-grid-N">，
 * 以 CSS Grid 排版：卡片由左至右排列、放不下時自動往下換行。
 * 與後台 contents.css 對齊；前台 selector 多一層 .ckeditor-block-view 避免外溢。
 */
.ckeditor-block-view .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 30px;
    padding: 0;
}

.ckeditor-block-view .card-grid .card-grid-item {
    padding: 30px;
    box-sizing: border-box;
}

.ckeditor-block-view .card-grid .card-grid-item h4 {
    margin: 0 0 15px;
    font-size: 22px;
    line-height: 1.3;
    color: #231815;
}

.ckeditor-block-view .card-grid .card-grid-item p {
    margin: 0 0 10px;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
}

.ckeditor-block-view .card-grid .card-grid-item img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 15px;
}

/* 樣式 1：基本卡片（白底 + 邊框 + 陰影 + 圓角） */
.ckeditor-block-view .card-grid-1 .card-grid-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 樣式 2：紅色頂線卡片（淺灰底 + 頂部 3px 品牌紅線） */
.ckeditor-block-view .card-grid-2 .card-grid-item {
    background: #f7f7f7;
    border-top: 3px solid #e60012;
    border-radius: 0 0 8px 8px;
}

/* 樣式 3：深色卡片（深底白字，2 欄） */
.ckeditor-block-view .card-grid-3 {
    grid-template-columns: repeat(2, 1fr);
}

.ckeditor-block-view .card-grid-3 .card-grid-item {
    background: #231815;
    border-radius: 8px;
}

.ckeditor-block-view .card-grid-3 .card-grid-item h4 {
    color: #fff;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ckeditor-block-view .card-grid-3 .card-grid-item p {
    color: #ccc;
}

@media (max-width: 767px) {
    .ckeditor-block-view .card-grid,
    .ckeditor-block-view .card-grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/**
 * 表格樣式（tablestyle plugin 插入）
 *
 * CKEditor 工具列「表格樣式 1/2」按鈕產生的 <table class="style-table style-table-N">，
 * 與後台 contents.css 對齊；前台 selector 多一層 .ckeditor-block-view 避免外溢。
 * 手機版沿用 .ckeditor-block-view table 既有的 display:block + overflow-x:auto 規則，
 * 亦可於後台表格屬性套 stack-mobile 改為往下排放。
 */
.ckeditor-block-view .style-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 30px;
}

.ckeditor-block-view .style-table th,
.ckeditor-block-view .style-table td {
    padding: 12px 20px;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
}

/* 樣式 1：深色表頭 + 斑馬紋 */
.ckeditor-block-view .style-table-1 th {
    background: #231815;
    color: #fff;
    font-weight: 500;
    border: 1px solid #231815;
}

.ckeditor-block-view .style-table-1 td {
    color: #555;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}

.ckeditor-block-view .style-table-1 tbody tr:nth-child(even) td {
    background-color: #fafafa;
}

/* 樣式 2：紅線簡約（無直線框線、表頭底部 2px 紅線 + 水平分隔線） */
.ckeditor-block-view .style-table-2 th {
    background: transparent;
    color: #231815;
    font-weight: bold;
    border-bottom: 2px solid #e60012;
}

.ckeditor-block-view .style-table-2 td {
    color: #555;
    border-bottom: 1px solid #e5e5e5;
}

/* 樣式 5（股利資訊）：灰底表頭 + 全框線 + 內容置中（class 為 style-table-3），
   對齊前台投資人「股利資訊」頁 .basic-table 內表格外觀 */
.ckeditor-block-view .style-table-3 th {
    background: #dddddd;
    color: #231815;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #bfbfbf;
}

.ckeditor-block-view .style-table-3 td {
    color: #333;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #bfbfbf;
}

/**
 * 表格樣式 4：檔案下載（filedownloadtable plugin 插入）
 *
 * CKEditor 工具列「表格樣式 4（檔案下載）」按鈕產生的
 * <table class="table table-bordered table-striped file-download-table">，對齊投資人
 * 「財務報告」頁的 Bootstrap 斑馬紋 + 框線外觀。前台雖已載入 Bootstrap（.table /
 * .table-bordered / .table-striped 本就生效），仍以 .file-download-table 自包一份相同
 * 規則，確保不依賴 Bootstrap 載入順序、且後台 contents.css 預覽完全一致。
 * 手機版沿用 .ckeditor-block-view table 既有的 display:block + overflow-x:auto。
 */
.ckeditor-block-view .file-download-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 30px;
    border: 1px solid #dee2e6;
}

.ckeditor-block-view .file-download-table th,
.ckeditor-block-view .file-download-table td {
    padding: 12px 15px;
    font-size: 15px;
    line-height: 1.6;
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

.ckeditor-block-view .file-download-table tbody tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.05);
}

.ckeditor-block-view .file-download-table img {
    max-width: 100%;
    height: auto;
}