/* CUDDLEH — 長文排版（資訊頁、商品完整描述、文章、分類簡介）
   【前台 .prose 與後台編輯器內容區共用的唯一一份】（#138）。
   後台 makeEditor() 會把 .prose 掛到 Toast UI 的內容區，所以編輯器裡看到的字級、段距、空行高度
   就是上線後的——所見即所得的「所見」跟「所得」讀同一支檔。
   前台 render.js 也刻意輸出跟編輯器一樣的 DOM（一行一個 <p>、空行是 <p><br></p>），
   兩邊 DOM 一樣＋CSS 一樣＝畫面一樣。

   ⚠️ 這支只管「內容」：字級、粗細、行距、間距、字型、文章內連結色。頁面外殼一律不碰——
   前台歸 site.css，後台歸 admin.css（訊號色），兩邊各自的規則不在這裡打架。
   數字都是 var(--t-xxx, 預設)：店主在後台「設計」頁籤改的值由 /theme.css 帶進來（#141），
   預設值跟 public/assets/theme.js 必須一樣（tests/theme.test.mjs 逐一比對）。
   後台頁也載 /theme.css，但它只定義 --t-*，所以編輯器裡的文章跟著店主的設定走、後台本身不受影響。

   標題 H2～H6（H1 是頁面標題，內文不產生）。之前 h2 16px、h3 15px，跟內文只差 1px，
   店主在編輯器裡選了層級、上線後看起來全一樣——那就是這支檔存在的原因。
   h1 只會出現在編輯器裡（走 API 寫進 `#` 的內容），併到 h2 的長相，跟前台 render.js 的對映一致。 */
.prose { font-family: var(--t-font, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif); }
.prose h1, .prose h2 {
  font-size: var(--t-fs-h2, 22px); font-weight: 400; letter-spacing: .02em; line-height: 1.5;
  margin: 40px 0 12px; padding: 0; border: 0;        /* padding/border 歸零：蓋掉 Toast UI 的底線 */
}
.prose h3 {
  font-size: var(--t-fs-h3, 18px); font-weight: 500; line-height: 1.5;
  margin: 30px 0 10px; padding: 0; border: 0;
}
.prose h4 {
  font-size: var(--t-fs-h4, 16px); font-weight: 500; line-height: 1.6;
  margin: 24px 0 8px; padding: 0;
}
.prose h5 {
  font-size: var(--t-fs-h5, 15px); font-weight: 600; line-height: 1.7;
  margin: 20px 0 6px; padding: 0;
}
.prose h6 {
  font-size: var(--t-fs-h6, 14px); font-weight: 600; line-height: 1.7; letter-spacing: .04em;
  margin: 18px 0 6px; padding: 0;
}
.prose > :first-child { margin-top: 0; }             /* 內容第一行不要先空 40px（編輯器裡尤其像壞掉） */
/* 段距 0，兩邊同一個數。Toast UI 的 WYSIWYG 本來就是 0（.toastui-editor-ww-container … p { margin: 0 }，
   比 .prose p 更具體，蓋不掉也不必蓋）；UA 給 1em，前台不寫死的話同一份內容兩邊高度就對不上。
   一行一段是 Toast UI 的模型（每按一次 Enter 就是一個 <p>），行與行之間本來就不該再多一個段距；
   要「空一行」店主會自己多按一次 Enter，那會變成 <p><br></p>，高度剛好是一行——排版是人的決定。 */
.prose p { margin: 0; font-size: var(--t-fs-body, 15px); line-height: var(--t-lh-prose, 1.9); }
.prose li { font-size: var(--t-fs-body, 15px); line-height: var(--t-lh-prose, 1.9); margin: 2px 0; }
.prose li > p { margin: 0; }                         /* 清單項目裡若包一層 p（舊資料），別讓它吃到段距 */
.prose ul, .prose ol { padding-left: 22px; margin: 10px 0; }
.prose img { max-width: 100%; display: block; margin: 20px 0; }
.prose a { color: var(--t-link, #1D1D1D); text-underline-offset: 3px; }

/* ── 區塊格式才有的東西（blocks.js 渲染）：引言、表格、圖說、分隔線、影片、勾選清單 ──
   線條與底色借 site.css 的 --line／--wash／--ink-mute（後台是 admin.css 的同名變數，色差可忽略）。 */
.prose blockquote { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--line, #E5E5E5); }
.prose blockquote p { margin: 0; }
.prose blockquote cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--ink-mute, #8A8A8A); }
.prose table.tbl { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; line-height: 1.6; }
.prose table.tbl th, .prose table.tbl td { border: 1px solid var(--line, #E5E5E5); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose table.tbl th { font-weight: 500; background: var(--wash, #F2F2F2); }
.prose figure { margin: 20px 0; }
.prose figure img { margin: 0; }
.prose figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-mute, #8A8A8A); }
/* 來源引用：長得像引言，但底下一定有「來源：」那一行——讀者一眼看得出這句是別人說的 */
.prose .cite { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--line, #E5E5E5); }
.prose .cite blockquote { margin: 0; padding: 0; border: 0; }
.prose .cite figcaption { margin-top: 6px; }
.prose .cite figcaption a { color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line, #E5E5E5); margin: 28px 0; }
.prose .embed { position: relative; aspect-ratio: 16 / 9; margin: 20px 0; background: var(--wash, #F2F2F2); }
.prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose ul.checklist { list-style: none; padding-left: 0; }
.prose ul.checklist li::before { content: "☐ "; color: var(--ink-mute, #8A8A8A); }
.prose ul.checklist li.done::before { content: "☑ "; }

/* ── 編輯器（Editor.js）的 DOM 對映 ──
   它的段落是 div.ce-paragraph、標題是 hN.ce-header、清單是 .cdx-list——讓上面同一份規則套上去，
   編輯器裡看到的字級／行距／段距／空行高度就是前台的。只在後台頁生效（前台沒有這些 class）。 */
.prose .ce-paragraph { font-size: var(--t-fs-body, 15px); line-height: var(--t-lh-prose, 1.9); padding: 0; margin: 0; min-height: 1.9em; }
.prose .ce-header { padding: 0; }
.prose .ce-block__content { max-width: none; margin: 0; }
.prose .cdx-list { margin: 10px 0; padding: 0 0 0 22px; gap: 2px; --line-height: var(--t-lh-prose, 1.9); --spacing-s: 4px; }   /* gap 2px ＝ 前台 li 的 margin 摺疊後的 2px */
.prose .cdx-list__item { font-size: var(--t-fs-body, 15px); margin: 0; }
.prose .cdx-list__item-content { padding-left: 4px; }

/* ── 元件庫（#140 第 4 期）：提示框、重點摘要、問答、步驟、商品卡、行動按鈕、目錄、空白 ──
   全部只用線條與淺灰底，跟「零強調色」的預設一致；注意框（warn）唯一的顏色是暖底，那是語意不是裝飾。 */
.prose .callout { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--ink, #1D1D1D); background: var(--wash, #F2F2F2); }
.prose .callout.callout-warn { border-left-color: #B26A00; background: #FBF3E4; }
.prose .callout strong { display: block; margin-bottom: 4px; }
.prose .callout p { margin: 0; font-size: 14px; }
.prose .takeaways { margin: 24px 0; padding: 16px 20px; border: 1px solid var(--line, #E5E5E5); }
.prose .takeaways strong { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .06em; color: var(--ink-mute, #8A8A8A); }
.prose .takeaways ul { margin: 0; padding-left: 20px; }
.prose .faq { margin: 24px 0; border-top: 1px solid var(--line, #E5E5E5); }
.prose .faq-item { border-bottom: 1px solid var(--line, #E5E5E5); }
.prose .faq-item summary { padding: 14px 0; cursor: pointer; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.prose .faq-item summary::-webkit-details-marker { display: none; }
.prose .faq-item summary::after { content: "＋"; color: var(--ink-mute, #8A8A8A); flex: none; }
.prose .faq-item[open] summary::after { content: "－"; }
.prose .faq-item > div { padding: 0 0 16px; font-size: 14px; line-height: 1.8; }
.prose .steps { margin: 24px 0; }
.prose .steps > strong { display: block; margin-bottom: 8px; }
.prose .steps ol { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.prose .steps li { counter-increment: step; position: relative; padding: 0 0 14px 40px; margin: 0; }
.prose .steps li::before { content: counter(step); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; line-height: 26px; text-align: center; border: 1px solid var(--ink, #1D1D1D); font-size: 13px; font-variant-numeric: tabular-nums; }
.prose .steps li strong { display: block; }
.prose .steps li p { margin: 0; font-size: 14px; }
.prose .pcard { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 24px 0; padding: 14px; border: 1px solid var(--line, #E5E5E5); }
.prose .pcard-link { display: contents; text-decoration: none; color: inherit; }
.prose .pcard img { width: 96px; height: 120px; object-fit: contain; margin: 0; background: var(--wash, #F2F2F2); }
.prose .pcard-body { display: grid; gap: 4px; }
.prose .pcard-name { font-weight: 500; }
.prose .pcard-desc { font-size: 13px; color: var(--ink-mute, #8A8A8A); }
.prose .pcard button { font-size: 13px; padding: 10px 16px; }
@media (max-width: 520px) { .prose .pcard { grid-template-columns: 72px minmax(0, 1fr); } .prose .pcard button { grid-column: 2; justify-self: start; } .prose .pcard img { width: 72px; height: 90px; } }
.prose .cta { margin: 28px 0; padding: 22px; text-align: center; border: 1px solid var(--line, #E5E5E5); }
.prose .cta p { margin: 0 0 12px; }
.prose .cta a.btn { display: inline-flex; color: var(--btn-ink, #FFFFFF); text-decoration: none; }   /* .prose a 的連結色會蓋掉按鈕字色，這裡拿回來 */
.prose .toc { margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--line, #E5E5E5); font-size: 14px; }
.prose .toc ol { margin: 0; padding-left: 18px; }
.prose .toc li { margin: 4px 0; }
.prose .toc a { text-decoration: none; }
.prose .toc a:hover { text-decoration: underline; }
.prose .spacer { margin: 0; }

/* ── 元件第二批（#154 第 4 期）── */
/* 多張商品卡：排成格。單張 .pcard 是橫的（圖左字右），塞進三欄會把字擠成一行一個字，
   所以格子裡改成直的：圖滿版在上、字在下、按鈕滿版——跟首頁商品卡同一個形狀。 */
.prose .pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
@media (min-width: 720px) { .prose .pgrid { grid-template-columns: repeat(3, 1fr); } }
.prose .pgrid .pcard { grid-template-columns: 1fr; gap: 10px; align-items: start; margin: 0; padding: 0 0 12px; }
.prose .pgrid .pcard img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
.prose .pgrid .pcard-body { padding: 0 12px; }
.prose .pgrid .pcard-name { font-size: 15px; line-height: 1.5; }
.prose .pgrid .pcard-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.prose .pgrid .pcard button { grid-column: 1; margin: 0 12px; justify-self: stretch; }
/* 相關文章卡：左圖右字的一條，跟文章列表的 .post-card 同一個形狀但小一號 */
.prose .rel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center;
  margin: 20px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.prose .rel img { width: 120px; height: 90px; object-fit: contain; border-radius: var(--img-radius); background: var(--wash); display: block; }
.prose .rel-body { display: grid; gap: 2px; min-width: 0; }
.prose .rel-kicker { font-size: 12px; letter-spacing: .06em; color: var(--ink-mute); }
.prose .rel-title { font-size: 16px; font-weight: 500; line-height: 1.5; }
.prose .rel:hover .rel-title { text-decoration: underline; text-underline-offset: 3px; }
.prose .rel-ex { font-size: 13px; color: var(--ink-mute); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }