/* ==========================================================================
   ARTICLE｜單文頁（免費／付費共用 layout）
   p9-13：基礎呈現／遮屏付費牆總則／遮屏判定標準／遮屏元件 UI 對照／權限矩陣
   p16-17：免費文章頁／付費文章頁 需求
   ========================================================================== */

/* ---- 版面 ----
   .article-breadcrumb／.article-title-row 橫跨文章欄＋側欄兩欄，獨立在最上面 */
.article-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 16px 0;
    display: grid;
    /* minmax(0, 1fr) 而非單純 1fr：手機版首圖用負 margin 做滿版寬度時，若軌道沒有
     明確的 0 下限，grid 會用 auto 的最小內容尺寸去撐開軌道，導致整個版面往右溢出 */
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

@media (min-width: 1024px) {
    .article-page {
        grid-template-columns: minmax(0, 1fr) 320px;
        padding: 32px 24px 80px;
        column-gap: 64px;
        row-gap: 32px;
    }
    .article-page > aside {
        grid-column: 2;
    }
}

.article-breadcrumb {
    grid-column: 1 / -1;
}

/* ---- 麵包屑：付費文章不顯示 ---- */
.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

    .article-breadcrumb[hidden] {
        display: none;
    }

    .article-breadcrumb a {
        color: var(--text-secondary);
        text-decoration: none;
    }

        .article-breadcrumb a:hover {
            text-decoration: underline;
        }

/* ---- 標題列：標籤＋標題 ----
   只有付費文章顯示標籤（免費文章不顯示任何 tag），金色底白字 */
.article-title-row {
    grid-column: 1;
    margin-bottom: 20px;
}

.article-page > article {
    grid-column: 1;
}

.article-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
}

    /* .article-tag 的 display:inline-block 跟瀏覽器內建的 [hidden]{display:none} 是同
   優先級，外部樣式表會贏過內建樣式，這裡要明確蓋回去，不然 hidden 屬性會被吃掉 */
    .article-tag[hidden] {
        display: none;
    }

/* 手機版：付費文章也顯示麵包屑、不顯示付費 tag（跟桌機版相反，手機版空間有限
   優先讓使用者知道自己在哪個頻道，付費標籤讓位）。這兩條都要放在對應的桌機版
   規則「之後」，CSS 特異度打平時靠檔案順序決勝負，寫太前面會被後面的桌機規則蓋掉 */
@media (max-width: 1024px) {
    .article-breadcrumb[hidden] {
        display: flex;
    }

    .article-tag {
        display: none;
    }
}

.article-tag--paid {
    background: var(--tag-paid);
    color: #fff;
}

.article-title {
    font-size: 24px;
    line-height: 1.4;
    margin: 0;
    color: var(--text-primary);
}

@media (min-width: 1024px) {
    .article-title {
        font-size: 35px;
    }
}

/* ---- 首圖：不使用 border-radius；PC 版左側有兩色塊裝飾，對齊圖片高度往左邊界外推；
   手機版滿版寬度，抵消 .article-page 左右 padding，貼齊瀏覽器兩側邊界 ---- */
.article-hero-wrap {
    position: relative;
}

@media (max-width: 1023.98px) {
    .article-hero-wrap {
        margin-left: -16px;
        margin-right: -16px;
    }
}

.article-hero {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #ddd;
}

.article-hero-deco {
    display: none;
}

@media (min-width: 1024px) {
    .article-hero-deco {
        display: block;
        position: absolute;
        top: 0;
        width: 36px;
        height: 100%;
    }

    .article-hero-deco--1 {
        left: -36px;
        background: var(--brand-red);
    }

    .article-hero-deco--2 {
        left: -72px;
        background: #8b1a13;
    }
}

/* ---- 圖說 / 撰文者 / 撰寫單位＋日期 ---- */
.article-caption {
    font-size: 12px;
    color: #999;
    margin: 8px 0 12px;
}

.article-byline {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.article-source-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.article-source-row__divider {
    color: var(--border-color);
}

/* ---- 文章摘要（js/vendor/summary-move-min.js 掛載處）----
   .Single-summary-content 文字含 {DS} 時，腳本會把內容改寫為錨點清單 <ol>
   邊框樣式仿 fieldset/legend：「摘要」文字疊在上緣邊框正中間 */
.article-summary {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 24px 20px 20px;
    margin-bottom: 24px;
    background: transparent;
}

.article-summary__label {
    position: absolute;
    top: -0.7em;
    left: 50%;
    transform: translateX(-50%);
    background: #f5f5f5;
    padding: 0 14px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.Single-summary-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary);
}

    .Single-summary-content ul {
        margin: 0;
        padding-left: 18px;
        list-style: disc;
        color: var(--brand-red);
    }

        .Single-summary-content ul li {
            color: var(--text-secondary);
        }

    .Single-summary-content ol {
        margin: 0;
        padding-left: 20px;
    }

    .Single-summary-content li {
        margin-bottom: 6px;
    }

        .Single-summary-content li a {
            color: var(--brand-red);
            text-decoration: none;
            cursor: pointer;
        }

            .Single-summary-content li a:hover {
                text-decoration: underline;
            }

.article-body {
    font-size: 18px;
    line-height: 2;
    color: var(--text-primary);
}

    .article-body p {
        margin: 0 0 20px;
    }

    .article-body a {
        color: var(--brand-red);
    }

    /* 摘要錨點滑動的捲動目標；sticky navbar 之下留一點餘裕 */
    .article-body h2 {
        margin: 32px 0 16px;
        font-size: 28px;
        color: var(--text-primary);
        scroll-margin-top: 90px;
    }

    .article-body .ad-slot {
        margin-bottom: 20px;
    }
    /* ---- 文章內連結：左側淺灰色 border，主色文字＋底線 ---- */
    .article-link {
        display: block;
        padding: 8px 0 8px 14px;
        margin: 24px 0;
        border-left: 3px solid var(--border-color);
        color: var(--brand-red);
        font-weight: 700;
        text-decoration: none;
        width: fit-content;
        text-decoration: underline;
    }

    .article-link:hover {
        color: var(--brand-red-dark)
    }

/* ---- 文章內圖片：一律附圖說小字，點擊可放大檢視（見 #lightbox、js/article.js）---- */
.article-figure {
    margin: 24px 0;
}

    .article-figure img {
        display: block;
        width: 100%;
    }

    .article-figure figcaption {
        font-size: 12px;
        color: #999;
        margin-top: 8px;
    }

.zoomable-img {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

    .lightbox[hidden] {
        display: none;
    }

.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: auto;
    display: block;
}

/* ---- 文末：加入商周 LINE 好友 CTA 區塊 ---- */
.article-line-cta {
    text-align: center;
    background: #fff;
    border-radius: 4px;
    padding: 28px 20px;
    margin: 32px 0 0;
}

/* p16：加入 line 好友按鈕手機版不顯示，整塊 FOLLOW US 區塊一起收起來 */
@media (max-width: 1023.98px) {
    .article-line-cta {
        display: none;
    }
}

.article-line-cta__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--tag-paid);
}

    .article-line-cta__eyebrow span {
        display: inline-block;
        width: 24px;
        height: 1px;
        background: var(--tag-paid);
    }

.article-line-cta__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text-primary);
}

.article-line-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #06c755;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 4px;
}

    .article-line-cta__btn img {
        height: 18px;
    }

/* ---- 文章內元件：收合元件 article/collapsible ----
   來源：Figma「文章內元件 Article Components -web」2026/08/14
   （商周大調查 survey-poll 先不做）
   實作對照後端 CMS 實際輸出的 class 名稱（articlbox / articlbox-title / articlbox-body），
   不是本站自訂命名；圖示是後端塞的 <span class="fa fa-*">，icon 種類由 CMS 決定，
   這裡的 CSS 不綁定特定 fa-* 名稱，只認第一個/最後一個 icon 的位置。
   展開/收合沒有 aria-expanded，改用 Bootstrap collapse 慣例的 class 判斷：
     按鈕預設帶 .collapsed（收合狀態），內容預設只有 .collapse（收合，display:none）
     展開後：按鈕移除 .collapsed，內容加上 .show（見 js/article.js 的 click handler） */
.articlbox {
    border: 1px solid #B9B9B9;
    border-radius: 4px;
    margin: 24px 0;
    color: #424242;
    overflow: hidden;
    background: #fff;
}

/* 標題（icon+文字）置中，箭頭固定貼右：用 position:relative + 箭頭 absolute，
   讓置中計算不受箭頭寬度影響 */
.articlbox-title {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f6f6f6;
    border: none;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    text-align: center;
}

    .articlbox-title .fa:first-child {
        width: 16px;
        flex-shrink: 0;
    }

    .articlbox-title .fa:last-child {
        position: absolute;
        right: 16px;
        top: 50%;
        /* translateY(-50%) 負責垂直置中，rotate 疊在同一個 transform 裡才會繞著圖示中心
     轉，兩個各自獨立寫在不同規則會互相蓋掉，展開時位置跟著跳掉、感覺箭頭偏移 */
        transform: translateY(-50%) rotate(180deg);
        transform-origin: center;
        transition: transform 0.2s ease;
    }

    .articlbox-title:not(.collapsed) .fa:last-child {
        transform: translateY(-50%) rotate(0deg);
    }

.articlbox-body {
    padding: 4px 16px 16px 42px;
    font-size: 14px;
    color: var(--text-secondary);
    border-top: 1px solid #B9B9B9;
}

    .articlbox-body.collapse:not(.show) {
        display: none;
    }

    .articlbox-body ul {
        margin: 0;
        padding-left: 18px;
        line-height: 1.9;
    }

    .articlbox-body p {
        margin: 0;
        line-height: 1.9;
    }

    .articlbox-body img {
        max-width: 100%;
        height: auto;
        margin-top: 8px;
        border-radius: 4px;
    }

/* ---- 文章內元件：表格 article/table ----
   來源：Figma「文章內元件 Article Components -web」2026/08/14 */
.article-table-wrap {
    overflow-x: auto;
    margin: 24px 0;
}

.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    white-space: nowrap;
}

    .article-table th {
        background: var(--brand-red);
        color: #fff;
        font-weight: 700;
        text-align: left;
        padding: 10px 14px;
    }

    .article-table td {
        padding: 10px 14px;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-primary);
    }

    .article-table tbody tr:hover td {
        background: #fafafa;
    }

/* ---- 付費牆掛載點（p11-p12：截斷點後接元件，後續內容不渲染）----
   .paywall / .paywall--plain 只是給 #paywallMount 走查用的示意樣式，
   正式畫面由後端既有的付費牆元件掛入，不需要照抄這裡的樣式 */
.paywall {
    border-top: 1px solid var(--border-color);
    padding: 28px 20px;
    border-radius: 4px;
    text-align: center;
    background: #fafafa;
}

.paywall__media {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 16px;
    border-radius: 4px;
}

.paywall__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary);
}

.paywall__bullets {
    list-style: none;
    display: block;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
}

    .paywall__bullets li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 8px;
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.6;
    }

        .paywall__bullets li::before {
            content: "✔";
            position: absolute;
            left: 0;
            color: var(--text-secondary);
        }

.paywall__btn {
    display: inline-block;
    background: var(--brand-red);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 28px;
    border-radius: 50rem;
}

/* B-1／B-2：無 store 版本，純提示、不放任何導購按鈕或連結 */
.paywall--plain {
    background: #fff;
    border: 1px dashed var(--border-color);
}

/* ---- 右側欄：推薦區塊 ---- */
.sidebar-recommend {
    margin-bottom: 16px;
}

.sidebar-recommend__tag {
    display: inline-block;
    border: 1px solid var(--brand-red);
    color: var(--brand-red);
    font-size: 12px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.sidebar-recommend__link {
    display: block;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
}

    .sidebar-recommend__link:hover {
        text-decoration: underline;
    }

.sidebar-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 20px;
}

/* 手機版：推薦文章連同分隔線一起收起來 */
@media (max-width: 1023.98px) {

    .sidebar-recommend,
    .sidebar-divider {
        display: none;
    }
}

/* ---- 右側欄：同頻道最新文章（p16：不分免費付費、依出刊時間排序）----
   標題不加頻道名稱；整列底部有一條細灰色底線，「最新」兩字正上方疊加一條更粗的黑色
   底線（用絕對定位的色塊疊加，不用 border 疊 border，避免行高被撐開跑版）；
   圖片用淺灰色 border（不用紅色） */
.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 8px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-title__highlight {
    position: relative;
    display: inline-block;
}

    .sidebar-title__highlight::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -9px;
        height: 3px;
        background: var(--text-primary);
    }

.latest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .latest-list li {
        display: flex;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .latest-list img {
        width: 88px;
        height: 88px;
        object-fit: cover;
        border: 1px solid var(--border-color);
        border-radius: 3px;
        background: #ddd;
        flex-shrink: 0;
    }

    .latest-list a {
        font-size: 16px;
        line-height: 1.6;
        color: var(--text-primary);
        text-decoration: none;
    }

/* p16/17：footer 網站連結隱藏、logo 改無指向狀態，是首頁/列表頁/免費文章頁/付費文章頁
   共通的 Phase 1 固定狀態（跟是否為付費牆無關）。現有 footer 標記（見 home.html／
   article.html）本來就只有 <img>、沒有包 <a>，所以已經符合規格，這裡不用額外的
   class 去切換。 */