/* ============================================================
   編輯器內容樣式（.editor）—— 前台與後台編輯器共用的唯一來源
   ============================================================

   ★ 為什麼要有這支檔案

   後台的 Froala 編輯區是同一頁的一個 div（沒有開 iframe 模式），
   它吃的是 .fr-element.fr-view；前台顯示的內容包在 .editor 裡。
   兩邊如果各自定義樣式，編輯器裡排好的版到了前台就變一個樣，
   編輯的人只能存檔、切到前台、再切回來反覆對——所以規則寫在這裡一份，
   選擇器同時涵蓋兩邊。

   ★ 動這支檔案前要知道的事

   1. 這裡只放「標籤層級」的通用排版（p／h1-h6／ul／ol／a／table／img…）。
      頁面專屬的調整（關於大雁的圖片圓角、聯絡我們的置中）留在 css_inner.css，
      那些選擇器是 .and-xxx .editor（特異性較高），會蓋過這裡，不受載入順序影響。

   2. 前台九支頁面都要載入這支：about／book_detail／contact／digests／
      digests_detail／events_detail／privacy／publisher／video。
      新增用到 .editor 的頁面時記得補上，漏掉的話那頁的編輯器內容會沒有樣式。

   3. 後台由 ManageAdmin/js/webeditor.js 動態載入（跟 froala 的 CSS 一起），
      不需要另外處理。

   ★ 2026-08-27 改寫紀錄

   這支檔案原本整支是別的專案（成大機械數位博物館）的公版遺留——
   .milestone-list／.photo-wall-grid／.exhibition-info-panel／.editor-aspects
   等 26 個 class 全掃過資料庫確認零使用，.editor 的定義也跟前台不一致
   （行距 1.75 vs 前台 1.875、連結是酒紅 #632318），已整支重寫。
   舊版留在 css_editor.css_bak2026-08-27-yc。
   ============================================================ */


/* ========================================================================
   基底
   ======================================================================== */

.editor,
.fr-element.fr-view {
    width: 100%;
    padding: 20px 0;
    font-size: 16px;
    /* 用無單位而不是 30px：內容裡大量使用 <span style="font-size:xx"> 指定字級，
       固定值會讓大字擠在一起。對 16px 而言 1.875 就是原本的 30px，現況不變。 */
    line-height: 1.875;
    letter-spacing: 1px;
    overflow-x: auto;
}

/* ★ 後台編輯區的基底要用更長的選擇器才蓋得過 Froala

   Froala 的主題檔有 `.gray-theme.fr-box.fr-basic .fr-element { font-size:14px; line-height:1.6 }`
   ——四個 class，特異性 (0,4,0)，比上面那條 `.fr-element.fr-view` (0,2,0) 高，
   所以字級行距會被它拉回 14px／1.6，編輯器裡的字比前台小一號。
   這裡用 `.fr-box.fr-basic .fr-element.fr-view` 同為 (0,4,0)，
   而 css_editor.css 是最後載入的（見 ManageAdmin/js/webeditor.js），同分後到者勝。

   ⚠ 上面那條共用規則改了字級／行距／字距時，這裡要一起改，否則後台會停在舊值。
   標題與條列不必重複——Froala 沒有定義那些標籤的字級，共用規則就吃得到。

   color 也在這裡指定：前台的 .editor 刻意不設 color（各頁自己指定 #333／#444／#4c4c4c，
   繼承 body 也在同一個色系），但後台繼承到的是管理介面的顏色，會偏灰。 */
.fr-box.fr-basic .fr-element.fr-view {
    font-size: 16px;
    line-height: 1.875;
    letter-spacing: 1px;
    color: #333333;
}

.editor p,
.fr-element.fr-view p {
    margin: 0 0 18px;
}

.editor p:last-child,
.fr-element.fr-view p:last-child {
    margin-bottom: 0;
}


/* ========================================================================
   標題
   ======================================================================== */
/* 站上的調性是低對比細線 + 米色輔色（#c8bfb0，與 .common-title .line 同色），
   所以標題不用粗黑大字，改成左側一條豎線。字級隨層級遞減。 */

.editor h1, .editor h2, .editor h3,
.editor h4, .editor h5, .editor h6,
.fr-element.fr-view h1, .fr-element.fr-view h2, .fr-element.fr-view h3,
.fr-element.fr-view h4, .fr-element.fr-view h5, .fr-element.fr-view h6 {
    margin: 32px 0 14px;
    padding-left: 12px;
    border-left: 3px solid #c8bfb0;
    font-weight: 500;
    line-height: 1.5;
    color: #2a2a2a;
    letter-spacing: 1px;
}

.editor h1, .fr-element.fr-view h1 { font-size: 23px; }
.editor h2, .fr-element.fr-view h2 { font-size: 21px; }
.editor h3, .fr-element.fr-view h3 { font-size: 19px; }
.editor h4, .fr-element.fr-view h4 { font-size: 17px; }
.editor h5, .editor h6,
.fr-element.fr-view h5, .fr-element.fr-view h6 { font-size: 16px; }

/* 內容以標題開頭時不要多一段上方留白 */
.editor h1:first-child, .editor h2:first-child, .editor h3:first-child,
.editor h4:first-child, .editor h5:first-child, .editor h6:first-child,
.fr-element.fr-view h1:first-child, .fr-element.fr-view h2:first-child,
.fr-element.fr-view h3:first-child, .fr-element.fr-view h4:first-child,
.fr-element.fr-view h5:first-child, .fr-element.fr-view h6:first-child {
    margin-top: 0;
}


/* ========================================================================
   條列
   ======================================================================== */

.editor ul, .editor ol,
.fr-element.fr-view ul, .fr-element.fr-view ol {
    margin: 0 0 18px;
    padding: 0;
}

.editor li, .fr-element.fr-view li {
    margin: 0 0 10px;
}

.editor li:last-child, .fr-element.fr-view li:last-child {
    margin-bottom: 0;
}

/* 項目符號用米色短線取代預設圓點，跟站上的細線分隔同一個調性 */
.editor ul, .fr-element.fr-view ul {
    list-style: none;
}

.editor ul > li, .fr-element.fr-view ul > li {
    position: relative;
    padding-left: 20px;
}

.editor ul > li::before,
.fr-element.fr-view ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    /* 對齊第一行文字的視覺中線（16px × 1.875 ÷ 2 ≈ 15） */
    top: 14px;
    width: 10px;
    height: 1px;
    background: #c8bfb0;
}

/* 編號清單保留數字，只調縮排 */
.editor ol, .fr-element.fr-view ol {
    padding-left: 22px;
}

/* 巢狀清單不要再吃一次下方間距 */
.editor li > ul, .editor li > ol,
.fr-element.fr-view li > ul, .fr-element.fr-view li > ol {
    margin: 10px 0 0;
}


/* ========================================================================
   連結
   ======================================================================== */
/* 跟內文同色加底線，hover 換成站上的橘（#f58220，與書籍標題 hover 一致）。
   不指定自己的顏色是為了讓各頁的 color 決定——聯絡我們那區是 #333，
   文章詳細是 #4c4c4c，連結混在段落裡才不會突兀。 */

.editor a, .fr-element.fr-view a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.editor a:hover,
.editor a:focus-visible,
.fr-element.fr-view a:hover,
.fr-element.fr-view a:focus-visible {
    color: #f58220;
}


/* ========================================================================
   圖片
   ======================================================================== */
/* imgresize.js 會用 inline style 算出實際寬高（優先權比這裡高），
   這條只在 JS 還沒跑完或載入失敗時生效，避免後台上傳的大圖撐破版面。 */

.editor img, .fr-element.fr-view img {
    max-width: 100%;
    height: auto;
}


/* ========================================================================
   表格
   ======================================================================== */

.editor table, .fr-element.fr-view table {
    width: 100%;
    margin: 0 0 18px;
    border-collapse: collapse;
}

.editor table th, .editor table td,
.fr-element.fr-view table th, .fr-element.fr-view table td {
    padding: 8px 12px;
    border: 1px solid #dddddd;
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0;
}

.editor table th, .fr-element.fr-view table th {
    background: #f7f5f1;
    font-weight: 500;
}


/* ========================================================================
   其他
   ======================================================================== */

.editor blockquote, .fr-element.fr-view blockquote {
    margin: 0 0 18px;
    padding: 4px 0 4px 16px;
    border-left: 3px solid #e3ddd4;
    color: #666666;
}

.editor hr, .fr-element.fr-view hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid #d8d8d8;
}

.editor pre, .fr-element.fr-view pre {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #f7f5f1;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0;
    white-space: pre-wrap;
    word-break: break-all;
}


/* ========================================================================
   手機
   ======================================================================== */

@media screen and (max-width: 560px) {
    .editor,
    .fr-element.fr-view {
        padding: 14px 0;
        font-size: 15px;
        line-height: 1.8;
    }

    /* 同上：後台要用長選擇器才蓋得過 Froala 主題 */
    .fr-box.fr-basic .fr-element.fr-view {
        font-size: 15px;
        line-height: 1.8;
    }

    .editor h1, .fr-element.fr-view h1 { font-size: 21px; }
    .editor h2, .fr-element.fr-view h2 { font-size: 19px; }
    .editor h3, .fr-element.fr-view h3 { font-size: 17px; }
    .editor h4, .fr-element.fr-view h4 { font-size: 16px; }

    .editor h1, .editor h2, .editor h3,
    .editor h4, .editor h5, .editor h6,
    .fr-element.fr-view h1, .fr-element.fr-view h2, .fr-element.fr-view h3,
    .fr-element.fr-view h4, .fr-element.fr-view h5, .fr-element.fr-view h6 {
        margin: 26px 0 12px;
    }

    /* 字級變小，項目符號的垂直位置要跟著調（15px × 1.8 ÷ 2 ≈ 13） */
    .editor ul > li::before,
    .fr-element.fr-view ul > li::before {
        top: 13px;
    }

    .editor table th, .editor table td,
    .fr-element.fr-view table th, .fr-element.fr-view table td {
        padding: 6px 8px;
        font-size: 14px;
    }
}