/* ═══════════════════════════════════════════════════════════════
   新式編輯器｜內容區塊庫（可跨案沿用樣板）
   ═══════════════════════════════════════════════════════════════
   ⚠ 本檔是【副本】。正本＝~/.claude/templates/editor-blocks.css（由 editor-blocks skill 管理）。
   要調樣板請改正本、再複製過來，勿直接改本檔——否則下個案子複製到的會是舊版。
   一致性檢查：diff <(sed -n '/^:root{/,$p' 本檔) <(sed -n '/^:root{/,$p' 正本) 應為空。
   對應：公司中央廚房 multi-editor 的「圖文樣板」（editor_type=maiblock）

   ── 五型與後台選項的對應 ──
     T1 文字段落    → .eb-text
     T2 左圖右文    → .eb-lr
     T3 右圖左文    → .eb-rl
     T4 左圖右圖    → .eb-duo
     T5 單張圖片    → .eb-full（本版另加下方圖說 .eb-cap，官方 T5 無此欄位）

   ── 沿用方式 ──
   1. 複製本檔與 editor-blocks-template.html 到新專案。
   2. 在頁面 <head> link 本檔（需在該案 tokens 之後）。
   3. 只調整下列表層，結構與文案不必重寫：
      間距（.eb + .eb 的 margin-top、各標題 margin-top）
      字級（.eb-h／.eb-p／標題階層五階）
      字型（--font-serif／--font-sans）
      顏色（皆走 token，不寫死 hex）
      圖片（aspect-ratio：660/420、4/3、16/7）

   ── 依賴的 token（該案 tokens.css 需提供）──
     色：--c-ink --c-text --c-sub --c-line --c-bg-soft --c-primary-dark --c-coral
     圓角：--r --r-full
     字型：--font-serif --font-sans

   ── 沿用時的注意 ──
   * .ph-box 是佔位框，若該案已有同名 class 需先檢查衝突。
   * 標題階層：真實文章由編輯器輸出 h2–h6；展示樣本用 .eb-h2–.eb-h6（div），
     兩者共用同一組宣告，樣本不佔文件大綱。h1 不開放（對齊公司後台 format_tags）。
   * 斜體 em：中文字型無義大利體，瀏覽器以合成斜體呈現，字面會機械傾斜。
     若該案不接受此質感，改用粗體或色彩強調，勿硬套 italic。
   ═══════════════════════════════════════════════════════════════ */

/* ⚠ 這是區塊庫，不是固定版面：一篇文章可自由組合、重複使用任一區塊，順序與筆數皆不固定。*/
/* ═══ 可調旋鈕｜別案沿用時只需在本檔之後覆寫這組變數，不必動下方規則本體 ═══
   覆寫方式：該案 CSS（或頁面 <style>）在 link 本檔之後宣告 :root{ --eb-xxx: 值; }
   顏色與字型不列在這裡——它們直接走該案 tokens（--c-ink／--font-serif 等），換 tokens 即自動貼合。*/
:root{
  /* 版面骨架 */
  --eb-block-gap:  64px;      /* 區塊與區塊之間的節奏 */
  --eb-col-gap:    48px;      /* 圖文並排的欄間距 */
  --eb-media-w:    660px;     /* 左圖右文／右圖左文的圖片欄寬 */
  --eb-text-maxw:  76ch;      /* 純文字區與圖說的行長上限 */
  --eb-flow-gap:   16px;      /* 文字段落型內，相鄰元素的預設垂直間距 */
  --eb-bp:         900px;     /* 單欄斷點（改這裡需同步下方 @media，CSS 無法在 media query 用變數）*/
  /* 圖片比例 */
  --eb-ratio-lr:   660/420;   /* 左右圖文型 */
  --eb-ratio-duo:  4/3;       /* 雙圖並排型 */
  --eb-ratio-full: 16/7;      /* 全寬大圖型 */
  /* 字級 */
  --eb-h-size:     24px;      /* 區塊標題（左圖右文／右圖左文）*/
  --eb-body-size:  15px;      /* 內文與列點 */
  --eb-cap-size:   14px;      /* 圖說 */
  --eb-h2-size:    30px;      /* 段落格式：標題 2–6 */
  --eb-h3-size:    24px;
  --eb-h4-size:    20px;
  --eb-h5-size:    17px;
  --eb-h6-size:    15px;
  /* 標題上方留白（階層節奏，隨字級遞減）*/
  --eb-h2-mt:      36px;
  --eb-h3-mt:      32px;
  --eb-h4-mt:      28px;
  --eb-h5-mt:      24px;
  --eb-h6-mt:      22px;
  /* 行高 */
  --eb-body-lh:    1.9;
  --eb-cap-lh:     1.85;
  --eb-li-lh:      1.85;
  /* 列點 */
  --eb-li-gap:     10px;      /* 條與條的間距 */
  --eb-li-indent:  20px;      /* 文字相對圓點的縮排 */
  --eb-marker:     7px;       /* 圓點直徑 */
  --eb-cap-mt:     18px;      /* 圖說與圖片的距離 */
}

.ph-box{ background:var(--c-bg-soft); border:1px dashed var(--c-line); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; color:var(--c-sub); font-size:13px; text-align:center; }
.eb + .eb{ margin-top:var(--eb-block-gap); }      /* 區塊之間的節奏（可重複組合時一致）*/
.eb-h{ font-family:var(--font-serif); font-size:var(--eb-h-size); font-weight:700; color:var(--c-ink); margin:0 0 12px; }
.eb-p{ font-family:var(--font-sans); font-size:var(--eb-body-size); line-height:var(--eb-body-lh); color:var(--c-text); margin:0; }
.eb-media{ padding:0; overflow:hidden; }          /* 放真圖時取消 ph-box 的內距，讓圖滿框 */
.eb-media img{ width:100%; height:100%; object-fit:cover; max-width:none; display:block; }

/* ① 左圖右文（＝後台 T2）／② 右圖左文（＝後台 T3·鏡像）
   鏡像不用 order 反轉，改為 DOM 順序即閱讀順序＋欄寬對調，鍵盤與螢幕閱讀器順序才正確 */
.eb-lr{ display:grid; grid-template-columns:var(--eb-media-w) 1fr; gap:var(--eb-col-gap); align-items:center; }
.eb-rl{ display:grid; grid-template-columns:1fr var(--eb-media-w); gap:var(--eb-col-gap); align-items:center; }
.eb-lr .ph-box, .eb-rl .ph-box{ aspect-ratio:var(--eb-ratio-lr); }

/* ③ 左圖右圖（雙圖並排·對稱編排）*/
.eb-duo{ display:grid; grid-template-columns:1fr 1fr; gap:var(--eb-col-gap); align-items:start; }
.eb-duo .ph-box{ aspect-ratio:var(--eb-ratio-duo); }

/* ④ 全寬大圖＋下方文字說明 */
.eb-full .ph-box{ aspect-ratio:var(--eb-ratio-full); }
.eb-full .eb-cap{ margin-top:var(--eb-cap-mt); font-family:var(--font-sans); font-size:var(--eb-cap-size);
  line-height:var(--eb-cap-lh); color:var(--c-sub); max-width:var(--eb-text-maxw); }

/* ⑤ 純文字段落（文字格式）*/
.eb-text{ max-width:var(--eb-text-maxw); }
.eb-text > * + *{ margin-top:var(--eb-flow-gap); }
/* 標題階層｜真實文章由編輯器輸出 h2–h6；本頁展示用 .eb-h2–.eb-h6 走同一組宣告
   （樣本用 div 不用 h，才不會讓「展示」污染頁面的文件大綱；兩者視覺完全一致）*/
.eb-text h2, .eb-text .eb-h2{ font-family:var(--font-serif); font-size:var(--eb-h2-size); font-weight:700; color:var(--c-ink); margin-top:var(--eb-h2-mt); }
.eb-text h3, .eb-text .eb-h3{ font-family:var(--font-serif); font-size:var(--eb-h3-size); font-weight:700; color:var(--c-ink); margin-top:var(--eb-h3-mt); }
.eb-text h4, .eb-text .eb-h4{ font-family:var(--font-serif); font-size:var(--eb-h4-size); font-weight:700; color:var(--c-ink); margin-top:var(--eb-h4-mt); }
.eb-text h5, .eb-text .eb-h5{ font-family:var(--font-serif); font-size:var(--eb-h5-size); font-weight:700; color:var(--c-ink); margin-top:var(--eb-h5-mt); }
.eb-text h6, .eb-text .eb-h6{ font-family:var(--font-serif); font-size:var(--eb-h6-size); font-weight:700; letter-spacing:.03em;
  color:var(--c-ink); margin-top:var(--eb-h6-mt); }
/* ⚠ 2026-07-31 su 裁示：h6 原為 var(--c-primary-dark)（灰紫），改與前五階同色，
   階層純靠字級遞減表達；規則本體一起改，真實文章與展示樣本才不會不一致 */
.eb-text p{ font-family:var(--font-sans); font-size:var(--eb-body-size); line-height:var(--eb-body-lh); color:var(--c-text); }
/* 斜體｜⚠ 中文字型沒有義大利體，瀏覽器以合成斜體呈現（方塊字被機械傾斜、字面重心會歪）。
   沿用到別案時若不接受這個質感，改用粗體或色彩強調，勿硬套 italic。*/
.eb-text em{ font-style:italic; }
/* 超連結：底線由 currentColor 畫，hover 轉珊瑚（與 footer 連結同語言）*/
.eb-text a{ color:var(--c-primary-dark); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; transition:color .2s ease; }
.eb-text a:hover{ color:color-mix(in srgb, var(--c-coral) 75%, var(--c-ink) 25%); }
/* 列點清單（含項目標題）：珊瑚圓點取代預設 marker */
.eb-text ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--eb-li-gap); }
.eb-text ul li{ position:relative; padding-left:var(--eb-li-indent);
  font-family:var(--font-sans); font-size:var(--eb-body-size); line-height:var(--eb-li-lh); color:var(--c-text); }
.eb-text ul li::before{ content:""; position:absolute; left:0; top:calc(0.92em - var(--eb-marker) / 2);
  width:var(--eb-marker); height:var(--eb-marker); border-radius:var(--r-full); background:var(--c-coral); }
.eb-text ul li .li-t{ font-family:var(--font-serif); font-weight:700; color:var(--c-ink); margin-right:6px; }

@media(max-width:900px){
  .eb-lr, .eb-rl, .eb-duo{ grid-template-columns:1fr; }
  .eb-rl .eb-media{ order:-1; }                   /* 單欄時圖回到文字上方，四型視覺一致 */
}
