/*
 * Editor.js 內容共用樣式（editor 預覽 + 前台渲染 共用一份）
 *
 * 套用方式：
 *  - 後台編輯器：holder div 加 class="editorjs-content"，這樣 Editor.js 產生的
 *    .ce-paragraph / .cdx-list / .image-tool 等內部 DOM 會被一併套到樣式
 *  - 前台渲染：EditorjsRenderer 會自動把輸出包在 <div class="editorjs-content">
 *    所以前台直接載入這份 CSS 就能自動生效
 *
 * 原則：所有規則都 scope 在 .editorjs-content 之下，避免污染其他版面
 */

.editorjs-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  word-wrap: break-word;
}

/* ===== 段落 ===== */
.editorjs-content p.ejs-paragraph,
.editorjs-content .ce-paragraph {
  margin: 0 0 1em 0;
  line-height: 1.8;
  font-size: 16px;
}
.editorjs-content > p.ejs-paragraph:last-child,
.editorjs-content > .ce-paragraph:last-child {
  margin-bottom: 0;
}

/* ===== 標題 ===== */
.editorjs-content h1.ejs-heading,
.editorjs-content h2.ejs-heading,
.editorjs-content h3.ejs-heading,
.editorjs-content h4.ejs-heading,
.editorjs-content h5.ejs-heading,
.editorjs-content h6.ejs-heading,
.editorjs-content .ce-header {
  margin: 1.4em 0 0.5em 0;
  font-weight: 700;
  line-height: 1.3;
  color: #222;
}
.editorjs-content h1.ejs-heading,
.editorjs-content .ce-header h1,
.editorjs-content h1.ce-header { font-size: 2em; }
.editorjs-content h2.ejs-heading,
.editorjs-content .ce-header h2,
.editorjs-content h2.ce-header { font-size: 1.6em; }
.editorjs-content h3.ejs-heading,
.editorjs-content .ce-header h3,
.editorjs-content h3.ce-header { font-size: 1.35em; }
.editorjs-content h4.ejs-heading,
.editorjs-content .ce-header h4,
.editorjs-content h4.ce-header { font-size: 1.15em; }
.editorjs-content h5.ejs-heading,
.editorjs-content .ce-header h5,
.editorjs-content h5.ce-header { font-size: 1em; }
.editorjs-content h6.ejs-heading,
.editorjs-content .ce-header h6,
.editorjs-content h6.ce-header { font-size: 0.9em; }

/* ===== 圖片 ===== */
.editorjs-content .ejs-figure,
.editorjs-content .image-tool__image {
  margin: 1.5em auto;
  text-align: center;
}
.editorjs-content .ejs-image,
.editorjs-content .image-tool__image-picture {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}
.editorjs-content .ejs-image--bordered,
.editorjs-content .image-tool--withBorder .image-tool__image-picture {
  border: 1px solid #e0e0e0;
  padding: 4px;
}
.editorjs-content .ejs-image--background,
.editorjs-content .image-tool--withBackground .image-tool__image-picture {
  padding: 10px;
  background: #f5f5f5;
}
.editorjs-content .ejs-image--stretched,
.editorjs-content .image-tool--stretched .image-tool__image-picture {
  width: 100%;
  max-width: none;
}
.editorjs-content .ejs-caption,
.editorjs-content .image-tool__caption {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #888;
  text-align: center;
  font-style: italic;
}

/* ===== 列表 ===== */
.editorjs-content ul.ejs-list,
.editorjs-content ol.ejs-list,
.editorjs-content .cdx-list {
  margin: 0 0 1em 0;
  padding-left: 2em;
}
.editorjs-content .ejs-list__item,
.editorjs-content .cdx-list__item {
  margin-bottom: 0.3em;
  line-height: 1.7;
  padding: 0;
}

/* ===== 引言 ===== */
.editorjs-content .ejs-quote,
.editorjs-content .cdx-quote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: 4px solid #2c6ecb;
  background: #f5f8fc;
  color: #444;
  font-style: italic;
  border-radius: 0 4px 4px 0;
}
.editorjs-content .ejs-quote__text {
  margin: 0 0 0.3em 0;
  font-size: 1.05em;
}
.editorjs-content .ejs-quote__cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.85em;
  font-style: normal;
  color: #888;
}
.editorjs-content .ejs-quote__cite::before { content: "— "; }

/* ===== 分隔線 ===== */
.editorjs-content hr.ejs-delimiter,
.editorjs-content .ce-delimiter {
  border: none;
  text-align: center;
  margin: 2em 0;
  overflow: visible;
  height: auto;
}
.editorjs-content hr.ejs-delimiter::before,
.editorjs-content .ce-delimiter::before {
  content: "* * *";
  color: #999;
  font-size: 1.5em;
  letter-spacing: 0.5em;
  display: inline-block;
}

/* ===== 程式碼區塊 ===== */
.editorjs-content pre.ejs-code,
.editorjs-content .ce-code__textarea {
  margin: 1em 0;
  padding: 1em;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 0.9em;
  line-height: 1.5;
  overflow-x: auto;
  color: #24292e;
}
.editorjs-content pre.ejs-code code {
  background: transparent;
  padding: 0;
  border: 0;
  font-size: inherit;
  color: inherit;
}

/* ===== 表格 ===== */
.editorjs-content table.ejs-table,
.editorjs-content .tc-table {
  width: 100%;
  margin: 1.2em 0;
  border-collapse: collapse;
  border: 1px solid #ddd;
}
.editorjs-content table.ejs-table th,
.editorjs-content table.ejs-table td {
  padding: 0.6em 0.8em;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
}
.editorjs-content table.ejs-table th {
  background: #f7f7f7;
  font-weight: 600;
}

/* ===== Embed（YouTube / Vimeo 等）16:9 響應式 ===== */
.editorjs-content .ejs-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1.5em 0;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}
.editorjs-content .ejs-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* 編輯器內的 embed 保留 Editor.js 的尺寸，不用絕對定位 */

/* ===== 行內元素 ===== */
.editorjs-content a {
  color: #2c6ecb;
  text-decoration: underline;
}
.editorjs-content a:hover {
  color: #1e4d8f;
}
.editorjs-content b,
.editorjs-content strong {
  font-weight: 700;
}
.editorjs-content i,
.editorjs-content em {
  font-style: italic;
}
.editorjs-content mark,
.editorjs-content .cdx-marker {
  background: #ffef90;
  padding: 0 0.2em;
  border-radius: 2px;
}
.editorjs-content code.inline-code {
  background: #f0f0f0;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 0.9em;
  color: #d73a49;
}