@charset "UTF-8";
/* =====================================================================
   讀書會（BookClub）前台樣式
   - 對應 design/demo-讀書會-前台-v1.0.html
   - 色系沿用主網 cckm.css 變數（--success-color 綠 / --gold-color 金）
   - 綠色只用在「重點」（按鈕／進度／標題 icon／強調數字），大面積維持白底
   - 目標使用者 40~60 歲：內文 ≥ 16px、次要說明 ≥ 14px、觸控目標 ≥ 44px
   - class 前綴一律 .bc-
   2026-07-21 v1.0 P1 首頁
   ===================================================================== */

/* 頁面外殼：讀書會不顯示麵包屑區塊（banner.tag 08 開頭排除），
   與主選單的間距在這裡補。用 padding 不用 margin —— margin-top 會被邊距塌陷吃掉。*/
.bookclub { padding-top: 28px; }

.bc-wrap {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 4px 4px 12px -2px rgba(51, 51, 102, .14);
    margin: 0 0 30px;
    padding-bottom: 34px;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.bc-hero {
    background: linear-gradient(135deg, #6f9126 0%, #425E08 100%);
    color: #fff;
    padding: 38px 40px 34px;
    position: relative;
    overflow: hidden;
}
.bc-hero:after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    background: rgba(255, 215, 0, .08);
}
.bc-hero-eyebrow {
    font-size: 14px;
    color: rgb(var(--gold-color));
    letter-spacing: 3px;
    margin: 0 0 10px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}
.bc-hero-ttl {
    font-size: 29px;
    font-weight: bold;
    margin: 0;
    line-height: 1.35;
    color: #fff;
    position: relative;
    z-index: 1;
}
.bc-hero-line {
    width: 56px;
    height: 4px;
    background: rgb(var(--gold-color));
    border-radius: 2px;
    margin: 17px 0 15px;
    position: relative;
    z-index: 1;
}
.bc-hero-desc {
    font-size: 16px;
    color: #dfe9c9;
    margin: 0;
    max-width: 640px;
    position: relative;
    z-index: 1;
}
.bc-hero-stats {
    display: flex;
    gap: 34px;
    margin-top: 24px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.bc-hero-stat b {
    display: block;
    font-size: 25px;
    color: rgb(var(--gold-color));
    line-height: 1.2;
}
.bc-hero-stat span { font-size: 14px; color: #c6d6a5; }

/* ── 搜尋列（浮在 hero 下緣）────────────────────────────────────── */
.bc-search-zone {
    padding: 0 40px;
    margin-top: -26px;
    position: relative;
    z-index: 5;
}
.bc-search-wrap {
    position: relative;
    background: #fff;
    border-radius: 6px;
    box-shadow: 4px 4px 12px -2px rgba(51, 51, 102, .24);
}
/* icon 置中用 margin-top 不用 translateY —— fa-spin 的 transform 會蓋掉 translateY，
   一轉圈 icon 就會掉下去（全站踩過的坑）*/
.bc-search-wrap > .fa {
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -.5em;
    line-height: 1;
    color: #9aa38c;
    font-size: 18px;
}
.bc-search {
    width: 100%;
    min-height: 56px;
    padding: 14px 52px 14px 50px;
    font-size: 17px;
    border: 1px solid #e2e5dc;
    border-radius: 6px;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
}
.bc-search::placeholder { color: #a8b09b; }
.bc-search:focus {
    border-color: rgb(var(--success-color));
    box-shadow: 0 0 0 3px rgba(var(--success-color), .13);
}
.bc-search-clear {
    position: absolute;
    right: 9px;
    top: 50%;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa38c;
    cursor: pointer;
}
.bc-search-clear:hover { background: #f1f3ed; color: #555; }

/* 搜尋命中提示（命中自己的筆記／標籤時才出現）*/
.bc-hit {
    font-size: 14px;
    color: #6f7862;
    background: #f8faf4;
    border-left: 3px solid rgb(var(--success-color));
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
    margin: 10px 0 0;
}
.bc-hit b { color: #425E08; }

/* 載入更多（搜尋結果分頁）*/
.bc-more-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.bc-more-cnt { font-size: 14px; color: #8a927e; }
.bc-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    min-width: 160px;
    font-size: 16px;
    padding: 10px 22px;
}

/* 搜尋無結果（Tier 2 mini 空狀態）*/
.bc-empty-mini {
    text-align: center;
    padding: 36px 20px;
    border: 1px dashed #dfe3d8;
    border-radius: 6px;
    background: #fbfcf9;
}
/* 圓框 icon 與未訂閱鎖頭同一套語彙（橘圈 + 淡橘底 + 外圈光暈 + 深灰綠 icon）*/
.bc-empty-mini-ic {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(var(--warning-color), .14);
    border: 3px solid rgba(var(--warning-color), .45);
    box-shadow: 0 0 0 10px rgba(var(--warning-color), .07);
    color: #5a6b46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 22px;
}
.bc-empty-mini-ttl { font-size: 16px; font-weight: bold; margin: 0 0 6px; }
.bc-empty-mini-desc { font-size: 14px; color: #8a927e; margin: 0 0 14px; }
.bc-empty-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: 15px;
    padding: 10px 22px;
}

/* ── 未訂閱提示（訂閱入口卡由 bookclub_sub_rel 動態產生）────────────── */
.bc-lock-bar {
    margin: 24px 40px 0;
    border: 1px solid #dde3cd;
    background: linear-gradient(140deg, #eef1e8, #e3e8d8);
    border-radius: 6px;
    padding: 24px 26px;
    text-align: center;
}
/* 鎖頭 chip：橘圈提醒 + 深灰綠 icon
   —— 圓框橘色負責「這裡被鎖住」的視線提示，icon 本身弱一階（深灰綠）不搶戲，
      綠色留給下方可執行的訂閱按鈕；淡橘底 + 粗圓框 + 外圈光暈三層次 */
.bc-lock-bar > .fa-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(var(--warning-color), .14);
    border: 3px solid rgba(var(--warning-color), .45);
    box-shadow: 0 0 0 12px rgba(var(--warning-color), .07);
    font-size: 34px;
    color: #5a6b46;
    margin-top: 6px;
}
.bc-lock-ttl { font-size: 20px; font-weight: bold; margin: 14px 0 6px; }
.bc-lock-desc { font-size: 15px; color: #8a927e; margin: 0 0 18px; }
.bc-sub-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bc-sub-card {
    background: #fff;
    border: 1px solid #dde3cd;
    border-radius: 6px;
    padding: 18px 20px 20px;
    min-width: 228px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
/* 目標使用者 40~60 歲：字 16px、觸控高度 46px（符合 ≥44px 規範）；
   不用 btn-block —— 滿版在窄卡裡會顯得笨重，改為置中的固定寬度按鈕 */
.bc-sub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 160px;
    max-width: 100%;
    font-size: 16px;
    padding: 10px 22px;
}
.bc-sub-btn .fa { margin-right: 6px; }
.bc-sub-tp {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .5px;
    padding: 3px 10px;
    border-radius: 11px;
    margin-bottom: 10px;
}
.bc-sub-tp.func { background: rgba(var(--success-color), .14); color: #425E08; }
.bc-sub-tp.course { background: rgba(var(--primary-color), .15); color: #2b6a8f; }
.bc-sub-nm { font-size: 18px; font-weight: bold; margin: 0 0 14px; }

/* ── 區塊 ─────────────────────────────────────────────────────────── */
/* 每個區塊上方一律 32px、下方 0 —— 間距只由「上」決定，
   區塊之間才不會因為第一塊 / 後續塊規則不同而忽大忽小（最後一塊的底由 .bc-wrap 的 padding-bottom 收）*/
.bc-sec { padding: 32px 40px 0; }
.bc-sec-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.bc-sec-ttl {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    padding-left: 13px;
    border-left: 5px solid rgb(var(--gold-color));
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 9px;
}
.bc-sec-ttl .fa { color: rgb(var(--success-color)); font-size: 18px; }
.bc-sec-ttl small { font-size: 14px; color: #8a927e; font-weight: normal; }
.bc-more {
    font-size: 15px;
    color: rgb(var(--success-color));
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 2px;
    cursor: pointer;
}
.bc-more:hover { text-decoration: underline; color: #425E08; }

/* ── 卡片 ─────────────────────────────────────────────────────────── */
.bc-cards { display: flex; gap: 20px; flex-wrap: wrap; }
.bc-card {
    background: #fff;
    border: 1px solid #e8ebe3;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(33.333% - 14px);
}
.bc-card.is-link { cursor: pointer; transition: .18s; }
.bc-card.is-link:hover {
    box-shadow: 6px 8px 22px -4px rgba(51, 51, 102, .28);
    border-color: #87A841;
    transform: translateY(-2px);
}
.bc-thumb {
    height: 146px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #7d9648 0%, #546f1c 100%);
    color: rgba(255, 255, 255, .5);
    font-size: 40px;
    /* 浮水印 icon 是刻意畫到框外的，要靠這裡切齊卡片邊界 */
    overflow: hidden;
}
.bc-thumb.t-sage { background: linear-gradient(140deg, #8fa87e 0%, #5d7350 100%); }
.bc-thumb.t-gold { background: linear-gradient(140deg, #d9a842 0%, #a97c14 100%); }
.bc-thumb.t-slate { background: linear-gradient(140deg, #7c8791 0%, #4b545c 100%); }
.bc-thumb-img { width: 100%; height: 100%; object-fit: cover; }
/* ── 程式化封面（沒有封面圖時）──────────────────────────────────
   內容多是純文字文件：把第一頁縮成小圖只會灰灰一片、每篇還長得一樣，
   所以不做縮圖，改在色塊上直接印「這篇是哪一期／第幾章」。
   零圖檔、零維護，字大老花也看得清。 */
.bc-thumb-cap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 13px 16px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;        /* 整組（大字＋分類名）垂直置中 */
    text-align: left;
    z-index: 1;                     /* 壓在浮水印 icon 上面 */
}
/* 分類名排在**大字下方**：左上角要空出來給 NEW／鎖頭徽章（會蓋到字）*/
.bc-thumb-tp {
    margin-top: 5px;
    font-size: 13px;
    color: rgba(255, 255, 255, .82);
    letter-spacing: 1px;
    line-height: 1.4;
    /* 分類名可能很長（知識內容 - 財務報表與分析），一行放不下就切掉 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bc-thumb-main {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    line-height: 1.25;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 型態 icon 放大成**浮水印底紋**：從右下角往左上延伸、被卡片邊界切掉一角，
   像是圖案「壓」在色塊上。當背景用所以壓在文字底下（z-index 0）、不吃點擊。 */
.bc-thumb-wm {
    position: absolute;
    right: -14px;
    bottom: -12px;                  /* 只切掉一小角就好；沉太低會只剩上緣，看不出是什麼 */
    font-size: 112px;
    line-height: 1;
    color: rgba(255, 255, 255, .16);
    transform: rotate(-8deg);
    transform-origin: 100% 100%;
    pointer-events: none;
    z-index: 0;
}
.bc-thumb-wm .fa { display: block; }
/* 影片用**圓框播放鍵**（fa-play-circle-o）：外框讓它跟文件 icon 一樣有「一整塊圖形」的份量，
   裸三角形在浮水印尺寸下會顯得單薄。圓形本身佔滿字身，不用像三角形那樣補位移。 */
.bc-thumb-wm .fa-play-circle-o { font-size: 104px; margin-right: 2px; }
.bc-card-body { padding: 15px 17px 17px; flex: 1; display: flex; flex-direction: column; }
.bc-card-ttl { font-size: 16px; font-weight: bold; margin: 0 0 7px; line-height: 1.5; }
.bc-card-meta { font-size: 14px; color: #8a927e; margin: 0; }
/* 「繼續觀看」同一篇多段時，段名是唯一分得出兩張卡的線索 → 比分類名再深一階 */
.bc-card-part { color: #5a6b46; }
.bc-card-foot { margin-top: auto; padding-top: 11px; }
/* 繼續觀看 CTA：卡片內滿版（這裡滿版合理，卡片本身就窄），字 16px / 高 46px */
.bc-continue-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    font-size: 16px;
    padding: 10px 16px;
}
.bc-continue-btn .fa { margin-right: 6px; }
.bc-files { font-size: 14px; color: #8a927e; display: flex; gap: 14px; flex-wrap: wrap; }
.bc-files span { display: inline-flex; align-items: center; gap: 5px; }

/* 進度條 */
.bc-bar { height: 7px; background: #eceee7; border-radius: 4px; overflow: hidden; margin: 10px 0 7px; }
.bc-bar > i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #A3C75A, rgb(var(--success-color)));
    border-radius: 4px;
}

/* 標記 */
.bc-badge {
    display: inline-block;
    font-size: 14px;
    padding: 2px 9px;
    border-radius: 3px;
    font-weight: bold;
    letter-spacing: .6px;
}
.bc-badge-new { background: rgb(var(--danger-color)); color: #fff; box-shadow: 0 2px 6px rgba(245, 105, 84, .4); }
.bc-badge-abs { position: absolute; top: 11px; left: 11px; z-index: 3; }
.bc-lock-abs {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 3;
    background: rgba(39, 57, 0, .65);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ── 系列課程（PROGRESS）─────────────────────────────────────────── */
.bc-series {
    border: 1px solid #e8ebe3;
    border-radius: 6px;
    padding: 20px 22px;
    margin-bottom: 14px;
    background: #fff;
    border-left: 4px solid rgba(var(--success-color), .35);
}
.bc-series:last-child { margin-bottom: 0; }
.bc-series.is-link { cursor: pointer; transition: .18s; }
.bc-series.is-link:hover { box-shadow: 4px 4px 12px -2px rgba(51, 51, 102, .24); border-left-color: rgb(var(--success-color)); }
.bc-series-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bc-series-nm { font-size: 18px; font-weight: bold; }
.bc-series-cnt { font-size: 15px; font-weight: bold; color: rgb(var(--success-color)); white-space: nowrap; }
.bc-series-cnt em { font-size: 20px; font-style: normal; }
.bc-series-meta { display: flex; gap: 18px; font-size: 14px; color: #8a927e; flex-wrap: wrap; }
.bc-series-meta b { color: #425E08; }
.bc-chaps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.bc-chap {
    font-size: 14px;
    padding: 6px 13px;
    border-radius: 18px;
    background: #f3f5ef;
    color: #78806c;
    white-space: nowrap;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.bc-chap.is-link { cursor: pointer; transition: .14s; }
.bc-chap.is-link:hover { border-color: rgba(var(--success-color), .5); color: #425E08; }
.bc-chap.read {
    background: rgba(var(--success-color), .12);
    color: #425E08;
    border-color: rgba(var(--success-color), .25);
    font-weight: bold;
}
.bc-chap.now {
    background: rgb(var(--success-color));
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(var(--success-color), .32);
}

.bc-series-nm.is-link { cursor: pointer; }
.bc-series-nm.is-link:hover { color: rgb(var(--success-color)); text-decoration: underline; }
/* 收尾列：左＝更新預告、右＝查看全部；沒有更新預告時「查看全部」自己靠右
   （靠 margin-left:auto，不是 justify-content，空的 meta 才不會把它推到左邊）*/
.bc-series-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.bc-series-foot .bc-more { margin-left: auto; }

/* ── 分類頁（P2）────────────────────────────────────────────────── */
.bc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: rgb(var(--success-color));
    cursor: pointer;
    padding: 6px 2px;
    margin-bottom: 10px;
}
.bc-back:hover { text-decoration: underline; color: #425E08; }

/* 「返回」：業務員最常按的一顆，做成看得見的按鈕，
   不要只是一條 15px 小字連結（截圖上幾乎看不到）。
   內容頁與分類頁共用同一顆，樣式與 hover／focus 都必須跟「上一篇／下一篇」一致。

   ⚠️ 這一組**必須排在 .bc-back:hover 後面**：兩者權重相同（都是 class + pseudo-class），
      同權重時後寫的贏。之前排在前面，hover 就被 .bc-back:hover 的底線蓋回去了。*/
.bc-back-btn {
    font-size: 17px;
    font-weight: bold;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: rgba(var(--success-color), .1);
    margin-bottom: 16px;
}
.bc-back-btn:hover {
    background: rgba(var(--success-color), .18);   /* 與 .bc-nav-btn:hover 同一個值 */
    color: rgb(var(--success-color));
    text-decoration: none;
}
.bc-back-btn .fa { font-size: 16px; }
.bc-cgy-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.bc-cgy-ttl {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    line-height: 1.35;
}
.bc-cgy-cnt { font-size: 15px; color: #8a927e; white-space: nowrap; }
.bc-cgy-desc { font-size: 15px; color: #8a927e; margin: 8px 0 0; }
/* 分類頁單獨用 .bc-series-meta 時要自己補上間距
   （首頁那邊改由 .bc-series-foot 這個 flex 列統一給，所以基底不再帶 margin-top）*/
.bc-cgy-meta { margin-top: 9px; margin-bottom: 20px; }
.bc-read-mk {
    font-size: 14px;
    color: rgb(var(--success-color));
    margin: 10px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── 列表型（TIMELINE / PERIODICAL）──────────────────────────────── */
.bc-rows { border: 1px solid #e8ebe3; border-radius: 6px; overflow: hidden; background: #fff; }
.bc-row { display: flex; align-items: center; gap: 18px; padding: 17px 20px; border-bottom: 1px solid #f1f3ed; }
.bc-row:last-child { border-bottom: none; }
.bc-row.is-link { cursor: pointer; transition: .14s; }
.bc-row.is-link:hover { background: #f8faf4; padding-left: 24px; }
.bc-row-date {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    background: rgb(var(--success-color));
    padding: 5px 11px;
    border-radius: 3px;
    font-weight: bold;
    min-width: 106px;
    text-align: center;
}
.bc-row-date.muted { background: #a3ac93; }
.bc-row-ttl { font-size: 16px; flex: 1; line-height: 1.5; min-width: 0; }
.bc-row-read { font-size: 14px; color: rgb(var(--success-color)); white-space: nowrap; }
/* PDF icon 用紅 —— 全世界都認得的 PDF 顏色，在整頁綠色系裡也最跳得出來。
   （曾為了配色一致改成綠，實測辨識度差很多，改回紅）*/
.bc-row-ic { color: #c0392b; font-size: 18px; }
.bc-row-ic.lock { color: #b0bd94; }

/* ── 空狀態 ───────────────────────────────────────────────────────── */
.bc-empty { text-align: center; padding: 56px 20px; }
/* 同上：全站空狀態的圓框 icon 也統一 */
.bc-empty-ic {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgba(var(--warning-color), .14);
    border: 3px solid rgba(var(--warning-color), .45);
    box-shadow: 0 0 0 12px rgba(var(--warning-color), .07);
    color: #5a6b46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 26px;
}
.bc-empty h4 { font-size: 19px; font-weight: bold; margin: 0 0 7px; }
.bc-empty p { font-size: 15px; color: #8a927e; margin: 0; }

/* ── 骨架（讀取中；沿用全站「先出版面再背景載入」慣例）──────────── */
.bc-skeleton {
    background: linear-gradient(90deg, #eceee7 25%, #f5f6f2 37%, #eceee7 63%);
    background-size: 400% 100%;
    animation: bcShimmer 1.4s ease infinite;
    border-radius: 4px;
}
@keyframes bcShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.bc-sk-line { height: 15px; margin-bottom: 10px; }
.bc-sk-title { height: 26px; margin-bottom: 14px; }
.bc-sk-thumb { height: 146px; border-radius: 0; }
.bc-sk-w180 { width: 180px; }
.bc-sk-w40 { width: 40%; }
.bc-sk-w60 { width: 60%; }
.bc-sk-w80 { width: 80%; }
.bc-sk-w100 { width: 100%; }
.bc-hero .bc-skeleton { background: rgba(255, 255, 255, .18); animation: none; }


/* ═══════════════════════════════════════════════════════════════════
   P3 單元頁（階段 3.5）
   影片 + 簡報 + 附件同一頁；≥ 992 雙欄，< 900 併單欄（側欄移到主欄下方）
   ═══════════════════════════════════════════════════════════════════ */

.bc-item { padding: 32px 40px 0; }
/* 最後一道保險：讀書會這個外殼本來就有 overflow:hidden（圓角用），
   這裡明講一次，任何子元素都不該讓整頁出現橫向捲軸 */
.bc-item, .bc-item-side { max-width: 100%; min-width: 0; }

/* ── Page Header ──────────────────────────────────────────────────── */
.bc-item-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.bc-item-hd-l { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 返回鈕在這一列裡不要留下方外距 ——
   flex 的 align-items:center 對齊的是「整個 box（含 margin）」，
   多 16px 下外距會讓這顆看起來比上一篇／下一篇高 8px，一排就歪了。
   （分類頁的返回鈕是單獨一顆，仍需要那個外距，所以只在這裡歸零）*/
.bc-item-hd .bc-back-btn { margin-bottom: 0; }
.bc-item-cgy { font-size: 14px; color: #8a927e; }
.bc-item-nav { display: flex; align-items: center; gap: 8px; }
/* 上一篇／下一篇：與 PDF 翻頁列同一套 pill 樣式 ——
   透明底看起來像純文字，業務員不知道可以點 */
.bc-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    font-size: 16px;
    color: rgb(var(--success-color));
    background: rgba(var(--success-color), .08);
    border-radius: 22px;
    cursor: pointer;
    white-space: nowrap;
}
.bc-nav-btn:hover { background: rgba(var(--success-color), .18); text-decoration: none; }

/* ── focus 一致化（返回 / 上一篇下一篇 / PDF 翻頁 三組同一套）───────────
   全站踩過的坑：:focus 若沿用 hover 的加深效果，點完焦點留在按鈕上，
   看起來會一直像被按住。這裡讓 focus 長得跟靜止狀態完全一樣。*/
.bc-back-btn:focus,
.bc-nav-btn:focus,
.bc-pdf-nav:focus {
    background: rgba(var(--success-color), .08);
    color: rgb(var(--success-color));
    outline: none;
    text-decoration: none;
}
/* 到頭／到尾那顆維持灰，不要 focus 一下變綠 */
.bc-nav-btn.is-off:focus,
.bc-pdf-nav.is-off:focus { background: #f3f5ef; color: #c3c8bb; }
.bc-nav-btn .fa { font-size: 15px; }
/* 到頭／到尾：灰掉且不可點 */
.bc-nav-btn.is-off { color: #c3c8bb; background: #f3f5ef; cursor: not-allowed; }
.bc-nav-btn.is-off:hover { background: #f3f5ef; }

.bc-item-ttl {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #333;
}
.bc-item-meta {
    font-size: 14px;
    color: #8a927e;
    margin: 0 0 22px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
/* 這一篇看完了沒（meta 列最後一項）*/
.bc-item-done {
    color: rgb(var(--success-color));
    font-weight: bold;
}
.bc-item-done .fa { margin-right: 4px; }
.bc-item-prog { color: #8a927e; }

.bc-item-lock { margin: 0 0 24px; }

/* ── 雙欄 ─────────────────────────────────────────────────────────── */
.bc-item-main { display: flex; gap: 28px; align-items: flex-start; max-width: 100%; }
.bc-item-col  { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.bc-item-side {
    flex: 0 0 300px;
    width: 300px;
    background: #fafbf8;
    border: 1px solid #eceee7;
    border-radius: 6px;
    padding: 18px 16px;
}

/* 閱讀區標題列（只有「影片＋簡報」的篇會出現，可收起）*/
.bc-reader-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eceee7;
}
.bc-reader-hd-nm {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bc-reader-hd-nm .fa { color: #8a927e; margin-right: 6px; }
.bc-reader-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 10px;
    font-size: 15px;
    color: #8a927e;
    cursor: pointer;
}
.bc-reader-close:hover { color: rgb(var(--primary-color)); }

/* 筆記圖示：**與影片控制列那顆「筆記」鈕同一張 SVG**（ccVideoJs.css 的 .vjs-note），
   只把白色換成本頁的灰字色 —— 文案叫人「按某顆鈕」，圖示就該跟那顆鈕長得一樣。
   原本用 📝 emoji：各系統長相不同，也跟播放器上那顆對不起來 */
.bc-note-ic {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+PHBhdGggZD0iTTM1Mi40NTkgMjIwYzAtMTEuMDQ2LTguOTU0LTIwLTIwLTIwaC0yMDZjLTExLjA0NiAwLTIwIDguOTU0LTIwIDIwczguOTU0IDIwIDIwIDIwaDIwNmMxMS4wNDYgMCAyMC04Ljk1NCAyMC0yMHpNMTI2LjQ1OSAyODBjLTExLjA0NiAwLTIwIDguOTU0LTIwIDIwczguOTU0IDIwIDIwIDIwSDI1MS41N2MxMS4wNDYgMCAyMC04Ljk1NCAyMC0yMHMtOC45NTQtMjAtMjAtMjBIMTI2LjQ1OXoiIGZpbGw9IiM4YTkyN2UiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48cGF0aCBkPSJNMTczLjQ1OSA0NzJIMTA2LjU3Yy0yMi4wNTYgMC00MC0xNy45NDQtNDAtNDBWODBjMC0yMi4wNTYgMTcuOTQ0LTQwIDQwLTQwaDI0NS44ODljMjIuMDU2IDAgNDAgMTcuOTQ0IDQwIDQwdjEyM2MwIDExLjA0NiA4Ljk1NCAyMCAyMCAyMHMyMC04Ljk1NCAyMC0yMFY4MGMwLTQ0LjExMi0zNS44ODgtODAtODAtODBIMTA2LjU3Yy00NC4xMTIgMC04MCAzNS44ODgtODAgODB2MzUyYzAgNDQuMTEyIDM1Ljg4OCA4MCA4MCA4MGg2Ni44ODljMTEuMDQ2IDAgMjAtOC45NTQgMjAtMjBzLTguOTU0LTIwLTIwLTIweiIgZmlsbD0iIzhhOTI3ZSIgb3BhY2l0eT0iMSIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9IiI+PC9wYXRoPjxwYXRoIGQ9Ik00NjcuODg0IDI4OS41NzJjLTIzLjM5NC0yMy4zOTQtNjEuNDU4LTIzLjM5NS04NC44MzctLjAxNmwtMTA5LjgwMyAxMDkuNTZhMjAuMDA1IDIwLjAwNSAwIDAgMC01LjAxIDguMzQ1bC0yMy45MTMgNzguNzI1YTIwIDIwIDAgMCAwIDI0LjQ3NiAyNS4wODdsODAuNzI1LTIyLjM2MWExOS45OTMgMTkuOTkzIDAgMCAwIDguNzktNS4xMTlsMTA5LjU3My0xMDkuMzY3YzIzLjM5NC0yMy4zOTQgMjMuMzk0LTYxLjQ1OC0uMDAxLTg0Ljg1NHpNMzMzLjc3NiA0NTEuNzY4bC00MC42MTIgMTEuMjUgMTEuODg1LTM5LjEyOSA3NC4wODktNzMuOTI1IDI4LjI5IDI4LjI5LTczLjY1MiA3My41MTR6TTQzOS42MTUgMzQ2LjEzbC0zLjg3NSAzLjg2Ny0yOC4yODUtMjguMjg1IDMuODYyLTMuODU0YzcuNzk4LTcuNzk4IDIwLjQ4Ni03Ljc5OCAyOC4yODQgMCA3Ljc5OCA3Ljc5OCA3Ljc5OCAyMC40ODYuMDE0IDI4LjI3MnpNMzMyLjQ1OSAxMjBoLTIwNmMtMTEuMDQ2IDAtMjAgOC45NTQtMjAgMjBzOC45NTQgMjAgMjAgMjBoMjA2YzExLjA0NiAwIDIwLTguOTU0IDIwLTIwcy04Ljk1NC0yMC0yMC0yMHoiIGZpbGw9IiM4YTkyN2UiIG9wYWNpdHk9IjEiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+);
}

/* ── 影片 ─────────────────────────────────────────────────────────── */
.bc-video-wrap { background: #000; border-radius: 6px; overflow: hidden; }
.bc-video-tabs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    /* 下方緊接著 PDF 翻頁列（或檔案清單），沒有這個間距兩排會黏在一起 */
    margin-bottom: 18px;
    overflow-x: auto;          /* 手機橫向滑，不換行擠版 */
    padding-bottom: 4px;
}
.bc-video-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #e2e6dd;
    border-radius: 22px;
    font-size: 15px;
    color: #555;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.bc-video-tab:hover { border-color: rgb(var(--success-color)); color: rgb(var(--success-color)); }
.bc-video-tab.is-on {
    background: rgb(var(--success-color));
    border-color: rgb(var(--success-color));
    color: #fff;
}
.bc-video-tab.is-done .fa-check { color: rgb(var(--success-color)); }
.bc-video-tab.is-on.is-done .fa-check { color: #fff; }
.bc-video-tab em { font-style: normal; font-size: 14px; opacity: .75; }

/* ── 檔案清單 ─────────────────────────────────────────────────────── */
.bc-files-sec { margin-top: 30px; }
/* 首頁的區塊標題靠 .bc-sec-hd 給下間距，單元頁是直接放 h2 → 這裡自己補，
   不然標題會黏在第一列檔案上 */
.bc-files-sec .bc-sec-ttl { margin-bottom: 18px; }
.bc-file-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #eceee7;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #fff;
}
.bc-file-ic { font-size: 26px; color: rgb(var(--success-color)); flex: 0 0 auto; }
.bc-file-ic.fa-file-pdf-o { color: #c0392b; }
.bc-file-info { flex: 1 1 auto; min-width: 0; }
.bc-file-nm {
    font-size: 16px;
    margin: 0;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bc-file-size { font-size: 14px; color: #8a927e; margin: 2px 0 0; }
.bc-file-acts { display: flex; gap: 8px; flex: 0 0 auto; align-items: center; }
.bc-file-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    padding: 0 16px;
}
.bc-file-off { font-size: 14px; color: #b0b5a8; }
/* 正在上方閱讀區顯示的那一份 */
.bc-file-reading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(var(--success-color));
    white-space: nowrap;
}

/* 已讀 / 未讀切換：未讀灰空心圈、已讀綠實心勾（一眼分得出來，不用讀文字）*/
.bc-read-tog {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: #8a927e;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}
.bc-read-tog:hover { background: #f2f4ee; color: rgb(var(--success-color)); text-decoration: none; }
.bc-read-tog.is-done { color: rgb(var(--success-color)); font-weight: bold; }
.bc-read-tog .fa { font-size: 17px; }
/* 圖片卡內：縮成一列小字，不要撐高卡片 */
.bc-read-tog-img { min-height: 32px; padding: 0; justify-content: center; width: 100%; margin-top: 4px; }

/* ── 圖片縮圖牆 ───────────────────────────────────────────────────── */
.bc-img-wall { display: flex; flex-wrap: wrap; gap: 14px; }
.bc-img-card {
    width: 170px;
    border: 1px solid #eceee7;
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    background: #fff;
}
.bc-img-card.is-link { cursor: pointer; }
.bc-img-card.is-link:hover {
    border-color: rgb(var(--success-color));
    box-shadow: 0 2px 10px -2px rgba(51, 51, 102, .16);
}
.bc-img-thumb {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f6f2;
    border-radius: 4px;
    margin-bottom: 10px;
}
.bc-img-thumb .fa { font-size: 32px; color: #b0b5a8; }
.bc-img-nm {
    font-size: 14px;
    margin: 0;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bc-img-meta { font-size: 14px; color: #8a927e; margin: 2px 0 0; display: flex; gap: 8px; justify-content: center; }

.bc-item-summary { font-size: 16px; line-height: 1.85; color: #444; margin: 0; white-space: pre-wrap; }

/* ── 側欄：筆記 / 標籤 ────────────────────────────────────────────── */
.bc-side-sec { margin-bottom: 28px; }
.bc-side-sec:last-child { margin-bottom: 0; }
.bc-side-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.bc-side-ttl { font-size: 16px; font-weight: bold; margin: 0; color: #333; }
.bc-side-ttl .fa { color: rgb(var(--success-color)); margin-right: 6px; }

.bc-note {
    background: #fff;
    border: 1px solid #eceee7;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.bc-note-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(var(--success-color));
    background: rgba(var(--success-color), .1);
    border-radius: 12px;
    padding: 3px 10px;
    margin-bottom: 8px;
}
.bc-note-time.is-link { cursor: pointer; }
.bc-note-time.is-link:hover { background: rgba(var(--success-color), .2); }
.bc-note-cnt { font-size: 15px; line-height: 1.7; color: #444; margin: 0; white-space: pre-wrap; word-break: break-word; }
.bc-note-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.bc-note-acts a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a927e;
    border-radius: 4px;
    cursor: pointer;
}
.bc-note-acts a:hover { background: #eef0ea; color: rgb(var(--success-color)); }
/* 刪除是危險動作，hover 走 danger 紅（與標籤 pill 上的 ✕ 同一套語彙）*/
.bc-note-acts a.is-danger:hover { background: rgba(var(--danger-color), .12); color: rgb(var(--danger-color)); }

.bc-note-form {
    background: #fff;
    border: 1px solid rgb(var(--success-color));
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.bc-note-sec { font-size: 14px; color: rgb(var(--success-color)); margin: 0 0 8px; font-weight: bold; }
.bc-note-input { font-size: 16px; resize: vertical; }
/* 取消／儲存等寬（側欄窄，兩顆一樣大最好按，也不會讓人猶豫哪顆是主要動作 —— 靠顏色分）*/
.bc-note-form-acts { display: flex; gap: 8px; margin-top: 10px; }
.bc-note-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    font-size: 15px;
    padding: 0 12px;
}
.bc-empty-side { padding: 18px 10px; }
/* 側欄比主欄窄，共用的 68px 橘圈會佔掉三分之一高度 → 縮一階 */
.bc-empty-side .bc-empty-mini-ic {
    width: 52px;
    height: 52px;
    font-size: 21px;
    border-width: 2px;
    box-shadow: 0 0 0 8px rgba(var(--warning-color), .07);
    margin-bottom: 14px;
}

.bc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.bc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #555;
    background: #fff;
    border: 1px solid #e2e6dd;
    border-radius: 14px;
    padding: 5px 12px;
}
.bc-tag.is-link { cursor: pointer; }
.bc-tag.is-link:hover { border-color: rgb(var(--success-color)); color: rgb(var(--success-color)); }
.bc-tag .fa-times { cursor: pointer; color: #b0b5a8; }
.bc-tag .fa-times:hover { color: rgb(var(--danger-color)); }
.bc-tag-add { display: flex; gap: 8px; }
.bc-tag-input { font-size: 16px; height: 44px; }
/* 方形 icon 按鈕：寬高都 44（觸控目標），icon 置中放大到看得出是圖示不是打出來的加號 */
.bc-tag-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bc-tag-btn .fa { font-size: 18px; }
.bc-tag-picker {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e6dd;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bc-tag-picker-ttl { font-size: 14px; color: #8a927e; margin: 0; width: 100%; }

/* ── 圖片燈箱 ─────────────────────────────────────────────────────── */
.bc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    z-index: 100000;          /* 蓋過主網固定 header（z-index 10000）*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.bc-lightbox-body { max-width: 92%; max-height: 90vh; text-align: center; }
/* 禁止另存圖片：
   - user-select / -webkit-user-drag：擋拖曳與選取
   - -webkit-touch-callout：擋 iOS 長按跳「儲存影像」
   - .bc-lightbox-shield：疊一層透明層，右鍵／長按抓到的是它不是 <img>
   ⚠️ 只擋得住隨手另存，**擋不了截圖**；要追來源仍靠「下載」時蓋的使用者資訊。*/
.bc-lightbox-imgwrap { position: relative; display: inline-block; line-height: 0; }
.bc-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 4px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}
.bc-lightbox-shield { position: absolute; inset: 0; display: block; }
.bc-lightbox-nm { color: #fff; font-size: 15px; margin: 12px 0 0; }
.bc-lightbox-load { color: #fff; font-size: 16px; }
.bc-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}
.bc-lightbox-close:hover { color: rgb(var(--gold-color)); }
.bc-lightbox-nav {
    position: absolute;
    top: 50%;
    margin-top: -28px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 38px;
    cursor: pointer;
}
.bc-lightbox-nav:hover { color: rgb(var(--gold-color)); }
.bc-lightbox-nav.prev { left: 10px; }
.bc-lightbox-nav.next { right: 10px; }

.bc-sk-video { height: 320px; margin-bottom: 14px; }
.bc-sk-block { height: 160px; }

/* ── PDF 內嵌閱讀（沒有影片的內容）─────────────────────────────────
   桌機／平板嵌 iframe；手機與 iOS 改大按鈕開新分頁（見 controller 說明）*/
.bc-reader { margin-bottom: 4px; }
/* pdf.js：逐頁 canvas 垂直捲動。
   canvas 的 bitmap 尺寸由 JS 依「容器寬度 × devicePixelRatio」決定，
   這裡只負責讓它鋪滿寬度、等比縮放 —— RWD 的實際比例是 JS 算的。*/
/* 這一串 max-width / min-width:0 是「版面往右跑出去」的保險絲：
   flex item 預設 min-width:auto，子元素（canvas 點陣圖）比容器寬時會把整欄撐開，
   於是整頁出現橫向捲軸。這裡把每一層都夾住，任何情況都不會推到版面。*/
.bc-pdf { position: relative; max-width: 100%; min-width: 0; }
.bc-pdf-pages { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.bc-pdf-page {
    margin-bottom: 16px;
    border: 1px solid #eceee7;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 6px -2px rgba(51, 51, 102, .18);
    line-height: 0;               /* 去掉 canvas 下方的 inline 空隙 */
}
.bc-pdf-page canvas {
    display: block;
    width: 100%;
    max-width: 100%;      /* 與 width 併用：bitmap 再寬都不會撐開容器 */
    height: auto;
    /* 擋隨手另存（canvas 右鍵最多只能存到單頁圖；截圖仍擋不住）*/
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}
/* ── 翻頁列（上下各一組；長頁面才不用捲到底才按得到）───────────── */
.bc-pdf-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}
.bc-pdf-bar-btm { margin: 12px 0 4px; }
.bc-pdf-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 16px;
    font-size: 15px;
    color: rgb(var(--success-color));
    background: rgba(var(--success-color), .08);
    border-radius: 22px;
    cursor: pointer;
    white-space: nowrap;
}
.bc-pdf-nav:hover { background: rgba(var(--success-color), .18); text-decoration: none; }
.bc-pdf-nav .fa { font-size: 15px; }
/* 到頭／到尾 */
.bc-pdf-nav.is-off { color: #c3c8bb; background: #f3f5ef; cursor: not-allowed; }
.bc-pdf-nav.is-off:hover { background: #f3f5ef; }
.bc-pdf-pageno {
    font-size: 16px;
    color: #555;
    min-width: 92px;
    text-align: center;
    white-space: nowrap;
}
.bc-pdf-pageno b { font-size: 20px; color: rgb(var(--success-color)); margin-right: 2px; }

/* ── 載入中：訊息置中且在最上面，不用骨架（骨架會把訊息推到看不見的地方）──
   語彙沿用站上的圓框 icon chip，只是換成主色 + 轉圈 */
.bc-pdf-loading {
    text-align: center;
    padding: 52px 20px 56px;
    border: 1px solid #eceee7;
    border-radius: 6px;
    background: #fbfcf9;
}
.bc-pdf-loading-ic {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: rgb(var(--success-color));
    background: rgba(var(--success-color), .12);
    border: 3px solid rgba(var(--success-color), .35);
    box-shadow: 0 0 0 10px rgba(var(--success-color), .06);
}
.bc-pdf-loading-ttl { font-size: 18px; font-weight: bold; color: #333; margin: 0 0 6px; }
.bc-pdf-loading-desc { font-size: 14px; color: #8a927e; margin: 0; }
.bc-reader-load {
    padding: 60px 20px;
    text-align: center;
    font-size: 16px;
    color: #8a927e;
}
/* 手機／iOS 版：一張把「這是什麼、多大、怎麼讀」講完的卡片 */
.bc-reader-mobile {
    text-align: center;
    padding: 32px 20px;
    border: 1px dashed #dfe3d8;
    border-radius: 6px;
    background: #fbfcf9;
}
.bc-reader-mobile > .fa {
    font-size: 46px;
    color: #c0392b;
    margin-bottom: 14px;
}
.bc-reader-mobile-nm { font-size: 16px; font-weight: bold; margin: 0 0 4px; color: #333; }
.bc-reader-mobile-size { font-size: 14px; color: #8a927e; margin: 0 0 18px; }
.bc-reader-mobile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    min-width: 190px;
    font-size: 17px;
    padding: 12px 26px;
}
.bc-reader-mobile-hint { font-size: 14px; color: #8a927e; margin: 14px 0 0; }

/* ── RWD ──────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .bc-card { width: calc(50% - 10px); }
    .bc-hero, .bc-sec, .bc-search-zone { padding-left: 26px; padding-right: 26px; }
    .bc-lock-bar { margin-left: 26px; margin-right: 26px; }
}
@media (max-width: 599px) {
    .bookclub { padding-top: 16px; }
    /* 手機：容器被 .row 負邊距抵銷掉左右留白，這裡自己補回去（不要整塊貼齊螢幕邊）*/
    .bc-wrap { margin: 0 12px 24px; }
    .bc-card { width: 100%; }
    .bc-hero { padding: 30px 20px 28px; }
    .bc-hero-ttl { font-size: 23px; }
    .bc-hero-stats { gap: 22px; }
    .bc-sec, .bc-search-zone { padding-left: 18px; padding-right: 18px; }
    .bc-lock-bar { margin-left: 18px; margin-right: 18px; }
    .bc-sub-card { min-width: 100%; }
    .bc-lock-bar > .fa-lock {
        width: 68px;
        height: 68px;
        font-size: 28px;
        border-width: 2px;
        box-shadow: 0 0 0 9px rgba(var(--warning-color), .07);
    }
    .bc-row { flex-wrap: wrap; gap: 10px; }
    .bc-row-ttl { flex: 1 0 100%; order: 3; }
}

/* ── P3 單元頁 RWD（放最後，避免被前面的 base 規則蓋掉）────────────── */
@media (max-width: 991px) {
    .bc-item { padding-left: 26px; padding-right: 26px; }
    .bc-item-side { flex: 0 0 260px; width: 260px; }
}
/* < 900 併單欄：側欄（筆記／標籤）移到主欄下方 */
@media (max-width: 899px) {
    .bc-item-main { flex-direction: column; }
    .bc-item-side { flex: 1 1 auto; width: 100%; margin-top: 26px; }
}
@media (max-width: 599px) {
    .bc-item { padding-left: 18px; padding-right: 18px; }
    .bc-item-ttl { font-size: 20px; }
    .bc-file-row { flex-wrap: wrap; }
    .bc-file-info { flex: 1 0 calc(100% - 40px); }
    /* 手機：按鈕排到下一列並拉滿，維持 44px 觸控目標 */
    .bc-file-acts { flex: 1 0 100%; justify-content: flex-end; }
    .bc-img-card { width: calc(50% - 7px); }
    .bc-sk-video { height: 200px; }
}

/* ── PDF 內嵌閱讀 RWD（放最後，避免被前面 base 蓋掉）──────────────── */
@media (max-width: 991px) {
    /* 平板：頁與頁的間距收一點，一次看得到的內容多一些 */
    .bc-pdf-page { margin-bottom: 12px; }
    .bc-pdf-loading { padding: 44px 20px 46px; }
}
@media (max-width: 767px) {
    /* 手機：pdf.js 一樣在頁內讀（canvas 自己算寬度，不受瀏覽器 PDF 支援度影響）。
       頁面左右留白已由 .bc-item 收到 18px，這裡只把頁間距與陰影再收一階。*/
    .bc-pdf-page {
        margin-bottom: 10px;
        border-radius: 3px;
        box-shadow: 0 1px 4px -2px rgba(51, 51, 102, .18);
    }
    /* 手機：翻頁鍵撐開好按（44px 觸控目標不縮），頁碼夾在中間 */
    .bc-pdf-bar { gap: 8px; }
    .bc-pdf-nav { flex: 1 1 auto; padding: 0 10px; }
    .bc-pdf-pageno { flex: 0 0 auto; min-width: 78px; font-size: 15px; }
    .bc-pdf-pageno b { font-size: 18px; }
    .bc-pdf-loading { padding: 36px 16px 38px; }
    .bc-pdf-loading-ic { width: 64px; height: 64px; font-size: 26px; margin-bottom: 16px; }
    .bc-reader-mobile { padding: 26px 16px; }
    .bc-reader-mobile-btn { width: 100%; min-width: 0; }
}