@charset "UTF-8";
/* =============================================================
   editor.scss  →  css/editor.css（Live Sass 轉換）
   後台 HTML 編輯器（FCKeditor）上稿內容的樣式
   -------------------------------------------------------------
   內容由使用者透過編輯器輸入、存進資料庫，不會帶專案 class
   （.default-table / .content-subtitle / .text-right …）。
   因此一律用「.editor 外層 + 元素／結構選擇器」重現外觀，
   讓上稿者不必加任何 class，樣式即自動生效，並符合無障礙 AA。

   對應關係（對齊 component.scss，維持外觀一致）：
     .content-title        → .editor h3
     .content-subtitle     → .editor h4
     .default-table        → .editor table / thead / tbody / tfoot
     .table-header         → .editor caption（標題靠左、單位靠右）
     .table-info           → 表格後的 .editor p（註記）
     .list-style-decimal   → .editor ol
     .list-style-disc      → .editor ul
     .scrollTable          → .editor-table-scroll（由 js/main.js 自動包裹）
   ============================================================= */
.editor {
  font-size: 1rem;
  line-height: normal;
  color: var(--color-text-default);
  word-wrap: break-word;
  /* ---- 段落 ---- */
}
.editor p {
  margin: 0;
}
.editor {
  /* ---- 內文主標題／章節標題（對齊 .content-title；藍色 #094168、500）----
     兼作單頁主標題與各章節標題；章節間以上緣間距分隔，
     第一個標題由下方 :first-child 規則歸零。
     子標題級距（1.125rem）由內容以 inline font-size 覆寫。 */
}
.editor h3 {
  margin: 1.5rem 0 0.625rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text-dark);
}
.editor {
  /* ---- 子標題 一、二、三（對齊 .content-subtitle）---- */
}
.editor h4 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text-default);
}
.editor {
  /* 標題若位於容器開頭則不加上緣間距
     （含包在群組 <div> 內、位於開頭的標題，交由 gap 或前一元素控距）*/
}
.editor h3:first-child,
.editor h4:first-child,
.editor h3 + h4 {
  margin-top: 0;
}
.editor {
  /* .editor 本身為 flex 版面時（併用 .flex-row.column.gap-* 等版面 class）：
     由 gap 統一控距，直接子元素不帶區塊外距，避免與 gap 疊加。
     群組 <div> 內部的標題/段落非直接子元素，仍保有自身間距。 */
}
.editor.flex-row > * {
  margin-top: 0;
  margin-bottom: 0;
}
.editor {
  /* ---- 清單（對齊 .list-style-decimal / .list-style-disc）---- */
}
.editor ul,
.editor ol {
  margin: 0 0 1rem;
  padding-left: 1.125rem;
  list-style-position: outside;
}
.editor ul {
  list-style-type: disc;
}
.editor ol {
  list-style-type: decimal;
}
.editor li {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.24px;
}
.editor li > ul,
.editor li > ol {
  margin-top: 0.25rem;
  padding-left: 2.25rem;
}
.editor {
  /* ---- 連結 ---- */
}
.editor a {
  color: var(--color-info);
  text-decoration: underline;
}
.editor {
  /* =========================================================
     表格（對齊 .default-table）
     ========================================================= */
}
.editor table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0.5rem;
  box-sizing: border-box;
}
.editor {
  /* 表格標題列：標題靠左、單位靠右（對齊 .table-header）
     以 <caption><span>標題</span><span>單位</span></caption> 表示。
     caption 必須維持 display:table-caption 才會顯示在表格上方，
     故不可用 flex；改以 float 讓「單位」靠右。

     為讓標題列「不進入表格的橫向捲動區」（過寬表格捲動時仍恆可見），
     js/main.js 會把 caption 內容複製成一個 .editor-table-caption 區塊，
     置於捲動容器 .editor-table-scroll 之上（容器外、恆為版面寬度），
     原 <caption> 則加 .sr-only 僅供讀屏軟體。兩者共用以下外觀。
     若未載入 JS，caption 仍會正常顯示於表格上方（fallback）。 */
}
.editor caption,
.editor .editor-table-caption {
  caption-side: top;
  margin: 1rem 0 0.5rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-default);
  /* 清除浮動，讓標題列完整包住標題與單位 */
}
.editor caption::after,
.editor .editor-table-caption::after {
  content: "";
  display: block;
  clear: both;
}
.editor caption,
.editor .editor-table-caption {
  /* 單位（第二個 span）靠右 */
}
.editor caption > span:last-child,
.editor .editor-table-caption > span:last-child {
  float: right;
  margin-left: 0.5rem;
}
.editor caption,
.editor .editor-table-caption {
  /* 手機：改為上下堆疊（對齊 .table-header 的 max-width:766px）*/
}
@media screen and (max-width: 766px) {
  .editor caption > span:last-child,
  .editor .editor-table-caption > span:last-child {
    float: none;
    display: block;
    margin-left: 0;
    margin-top: 9px;
  }
}
.editor {
  /* 欄表頭（thead th，含 colgroup/col scope）：置中、灰底 */
}
.editor thead th {
  padding: 0.59375rem 0.625rem;
  background-color: var(--color-bg-default);
  border: 1px solid var(--color-border-light);
  border-bottom: none;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  color: var(--color-text-default);
  box-sizing: border-box;
}
.editor {
  /* 內文／表尾儲存格 */
}
.editor tbody th,
.editor tbody td,
.editor tfoot th,
.editor tfoot td {
  padding: 0.625rem;
  padding-bottom: 0.5625rem;
  background-color: #fff;
  border: 1px solid var(--color-border-light);
  font-size: 1rem;
  line-height: 1.375;
  color: var(--color-text-default);
  word-break: break-word;
  box-sizing: border-box;
}
.editor {
  /* 列表頭（第一欄，th scope=row / rowgroup）：靠左、正常字重 */
}
.editor tbody th[scope=row],
.editor tbody th[scope=rowgroup],
.editor tfoot th[scope=row],
.editor tfoot th[scope=rowgroup] {
  font-weight: 400;
  text-align: left;
}
.editor {
  /* 資料儲存格預設靠右（數字對齊）；
     文字欄位或特例可由編輯器輸出的 inline style（text-align）覆蓋 */
}
.editor tbody td,
.editor tfoot td {
  text-align: right;
}
.editor {
  /* 圖片自適應 */
}
.editor img {
  max-width: 100%;
  height: auto;
}
.editor {
  /* =========================================================
     表格橫向捲動容器（對齊 .scrollTable）
     由 js/main.js 於載入時自動於每個 table 外層包裹，
     上稿者不需自行加容器；.main-content 為 overflow:hidden，
     故過寬表格改由此容器橫向捲動。
     ========================================================= */
}
.editor .editor-table-scroll {
  width: 100%;
  /* 上緣間距交給其上的 .editor-table-caption；此處只留下緣 */
  margin: 0 0 0.5rem;
  overflow-x: auto;
  /* thin scrollbar（對齊 base/_mixin scrollbar_thin）*/
}
.editor .editor-table-scroll::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}
.editor .editor-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #cbcbcb;
}
.editor .editor-table-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}
.editor .editor-table-scroll::-webkit-scrollbar-corner {
  background-color: transparent;
}
.editor .editor-table-scroll {
  /* 包裹後由容器負責外距，表格本身歸零避免雙重間距 */
}
.editor .editor-table-scroll > table {
  margin: 0;
}
.editor th,
.editor td {
  min-width: 5.5rem;
}/*# sourceMappingURL=editor.css.map */