@charset "UTF-8";

/* =========================
   Root
========================= */


:root {
  --bg:#eef3f7;
  --paper:#fffffd;
  --text:#1f2937;
  --muted:#5f6b7a;
  --title:#A02139;
  --line:#d7dee7;
  --navy:#1f3c66;
  --gold:#b38b2d;

  --font-size: 19px;
  --line-height: 1.75;
}


/* =========================

耐讀背景色

#f3f7f2
#f6f8f2
#f4f8f4
#eff7ef
#eef6f1
#f1f7f1
#f2f6f1
#eef5ef
========================= */


* { box-sizing:border-box; }

html { 
  -webkit-text-size-adjust:100%;
/*  scroll-behavior: smooth; */
}


html, body { height:100%; }

body {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;


  margin:0;
  background:#f4f7f3;  /* f5f7f4  淡 f3f7f2, f1f7f1 */
  color:#1f2937;       /* 1f2937 var(--text); */

  font-family: 
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  "PingFang TC",
  "Microsoft JhengHei",
  sans-serif;

  font-size:var(--font-size);
  line-height:var(--line-height);

/*
  font-size:19px;
  line-height: 1.75;	*/

  -webkit-font-smoothing: antialiased; /* 字體更平滑 */
}

/* 
一般短文排版
line-height:2.2;
letter-spacing:.08em;
margin-bottom:2em;
*/


/* =========================
   Top Line 頁眉
========================= */

.header {
  font-size: .9rem; 
  color: #6b7280;     
  background: #edf4ee;
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding: 0; /* 讓內距交給 inner 處理 */
  padding-top: 8px;  /* ● */
}


/* 新增：頁眉內部的限制容器 */
.header-inner {
  position: relative;        /* 關鍵：讓它成為字體工具的絕對定位基準 */
  margin-inline: auto;       /* 左右自動置中，對齊下方內文 */
  width: min(100%, 890px);   /* 寬度完全比照您的 .container */
  text-align: center;
  
  /* 垂直配重與安全內距 */
  padding-top: 0px;  /* 10 ● */
  padding-bottom: 6px;
  min-height: 33px;  /* 38 ● */
  padding-inline: 60px;      /* 防止手機上文字過長與按鈕重疊 */
}

.header-inner p {margin:0;}

/* =========================
   字體工具右側定位 (新)
========================= */

.font-tools {
  position: absolute;   /* 絕對定位，不影響中央標題置中 */
  top: 13.2px;             /* 50% 垂直置中 ● */
  right: 15px;          /* 釘在 890px 隱形容器的右側內 15px */
  transform: translateY(-50%);  /* 垂直置中公式結束 (若選單打開時改由 JS 或額外類別處理，但這裡容器不動) */
  display: inline-block;
  z-index: 1010;           /* 確保層級高於網頁其他內容 */
}

/* 圓圈按鈕 */
.font-btn {
  position: relative;
  z-index: 1015;  /* 確保按鈕層級高於選單的隱形橋樑，滑鼠絕對能摸到 */
  width: 32px;          
  height: 32px;
  border: 1px solid #aaa;  /* 355070 */
  background: #ffffff;
  color: #355070;
  border-radius: 50%;
  font-size: 1.13rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  -webkit-tap-highlight-color: transparent;
}

.font-btn:hover, .font-tools.open .font-btn {
  background: #ffffee;
  color: #8b1e3f;
}

/* 下拉選單定位 */
.font-dropdown {
  position: absolute;
  top: 100%;          /* 原 36px 緊貼新尺寸按鈕的下方 */
  right: 0px;
  margin-top: 4px;
  padding: 6px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1010;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

/* 隱形橋樑 */
.font-dropdown::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
  z-index: 1005;  /* 層級低於按鈕，不干擾按鈕點擊 */
}

.font-tools.open .font-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 選單選項 */
.font-dropdown li {
  padding: 8px 16px;   /* 10 24, 稍微優化桌機與手機比例 */
  font-size: 1.1rem;
  color: #444444;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.font-dropdown li:hover {
  background-color: #f5f5f5;
  color: #355070;
}

.font-dropdown li.active {
  font-weight: bold;
  color: #8b1e3f;
  background-color: #f8f9fa;
}




/* =========================
   Main
========================= */

.container {

/*  margin:auto;  原 */
  flex:1;
  margin-inline: auto;  /* 左 右 */

  width:min(100%, 890px);

  background:#fffffd; /* var(--paper); */
  border: 1px solid rgba(0,0,0,.035);

/* 陰影重些
  box-shadow: 0 1px 3px  rgba(0,0,0,.035);  
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
*/
  box-shadow: 0 1px 2px rgba(0,0,0,.025);
}



/* =========================
   Article 內文 類同 content1
============================== */

.post-body {
/*  padding: 0 3em 3em; 上 左右 下*/
  padding-block: auto;
  padding-inline: 3em;
  padding-bottom:1.5em;
}



/* =========================
   breadcrumbs 麵包屑導航路徑
=============================== */

.breadcrumbs {
  margin-top:0.5em;
  margin-bottom:0;
  color:#6b7280;    /* 深灰 5f6b7a */
  font-size:1rem;   /* 0.95 */
}

.breadcrumbs span {color:#d0d0d0;}

.breadcrumbs a {
  color:#355070;   /* 1f3c66 */
  text-decoration:none;
}

.breadcrumbs a:hover {
  text-decoration:underline;
}



/* =========================
   Paragraph  段落
========================= */

p {
  margin-top:0;
  margin-bottom:1em;
}

.font-mode-old p {
  margin-bottom: 0 !important;
}


/* MT,MS 信息目錄 */
.mtoc p {margin-bottom:0;}
.mtoc p:last-child { margin-bottom: 1em; }

/* MT,MS 註解壹綱要 */
.ctoc p {margin-bottom:0;}
.ctoc p:last-child { margin-bottom: 1em; }

.ctoc2 p {margin-bottom:0;}
.ctoc2 p:last-child { margin-bottom: 1em; }


.ctitle3   {font-size:22.5px; margin-top:1.5em;}
/* p.ctitle3:not(p.ctitle3 ~ p.ctitle3) {font-size:22.5px; margin-top:0;} */
.ctoc .ctitle3:first-of-type { margin-top: 0; }

.ctitle4 {color:blue; margin-top:1.5em;}
.ctitle4 b {font-weight:normal;}

.writer {margin-top:1.5em;}





/* =========================
   Heading 標題
========================= */

/* ------------------
h1,h2,h3 {
  line-height:1.45;
}


h3 {
  margin-top:2.2em;
  margin-bottom:0.9em;
  color:#24364d;
  font-size:1.22rem;
  line-height:1.5;  原 1.75
  font-weight:700;
}
-------------------------------- */


/*  文章名稱、篇名  */
.title2 {
  margin-top:0.5em;
  margin-bottom:1em;
  text-align:center;
  color:#a02139;   /* 深酒紅 var(--title); */
  font-size:1.6rem;
  /* line-height:1.5; */
  font-weight:700;
}



/* =========================
   上一章，下一章
========================= */


#chapter-nav{
  margin-top:4em;
  padding-top:1.5em;
  border-top:1px solid #d8dee4;
  text-align:center;
  font-size:1rem;
}

#chapter-nav a {
  color:#355070;
  text-decoration:none;
}

#chapter-nav a:hover {
  text-decoration:underline;
}

#chapter-nav span { color:#ccc; padding:0 3px; }


/* =========================
   Footer 頁腳, 頁尾
========================= */

.footer {
  text-align:center;
  color:#6b7280;
  font-size:.92rem;
  padding-top: 20px;
  padding-bottom:30px;
  background:#edf4ee;
  border-top:1px solid rgba(0,0,0,.05);
}



/* =========================
   Tablet  平板
890
800
768
600
480
========================= */

@media (max-width:900px) {
.post-body { 
  padding-inline: 2em;
 }
}


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

@media (max-width:640px) {

.container {
  border:none;
  box-shadow:none;
}

.post-body { 
  padding-inline: 0.84em;
}

.title2 {
  font-size:1.52rem;
  line-height:1.5;
  margin-bottom:1.5em;
}

h3 { font-size:1.16rem; }
}


/* =========================
   Small Mobile 手機
========================= */

@media (max-width:360px) {
.post-body { 
  padding-inline: 0.84em; }
}





/* =========================
   Scripture 經文
========================= */

.scripture {
  margin-top:1.5em;
  margin-bottom:1.5em;
  padding: 1em  1.2em;
  background:#fafbfc;
  border-left: 4px solid #c7d2df;
  line-height:1.85;
}



/* =========================
   gotop 置頂
========================= */

.go-top {
  position: fixed;
  right: 20px;
  bottom: 25px;
  z-index: 999;
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;

  visibility: hidden;
/* --- 取代 visibility，與 opacity 同步
  pointer-events: none;        
  transition: opacity 0.2s linear;
---- */

  background-color: #ffffdd;
  border: 1px solid #dfdfdf;
  border-radius: 50%;
  cursor: pointer;

/*
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
*/
  box-shadow: 0 1px 2px rgba(0,0,0,.01), 0 4px 12px rgba(0,0,0,.08);


/* 關鍵：只保留透明度變化，移除 transform (位移) 動畫 */
  transition: opacity 0.2s linear;

  -webkit-tap-highlight-color: transparent;  /* 移除點擊高亮 */
  touch-action: manipulation;  /* 禁用雙擊縮放，加速點擊 消除 300ms 延遲*/
}

/* 顯示狀態 */
.go-top.show {
  opacity: 1;
  /* pointer-events: auto; 取代 visibility */
  visibility: visible; 
}

/* 畫箭頭 */

/* 箭柄 */
.arrow-up {
  width: 2px;
  height: 17px;
  background: #444;
  position: relative;
  display: block;
  pointer-events: none;  /* 讓點擊直接穿透到底層按鈕 */
}

/* 左分岔 */
.arrow-up::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -8px;
  width: 11px;
  height: 2px;
  background: #333;
  transform: rotate(-45deg);
  border-radius: 2px;
}

/* 右分岔 */
.arrow-up::after {
  content: "";
  position: absolute;
  top: 2px;
  right: -8px;
  width: 11px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
  border-radius: 2px;
}



/* ■ 打印 */
@media print {
  /* 1. 隱藏所有不需要列印的網頁互動元件、頁首、頁尾 */
  .header,
  .font-tools,
  .top-tools,
  .breadcrumbs,
  #chapter-nav,
  .chapter-nav,
  #goTop,
  .go-top,
  .footer {
    display: none !important;
  }

  /* 2. 調整主體容器，確保寬度 100% 且沒有奇怪的邊距或陰影 */
  body {
    background-color: #fff !important;
    color: #000 !important; /* 確保文字是純黑，省墨且清晰 */
    font-size: 12pt;        /* 列印通常使用 pt 作為適合閱讀的單位 */
    line-height: 1.6;
  }

  .container, 
  .post-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  /* 3. 調整標題樣式，使其在紙張上更美觀，並防止標題孤零零留在頁尾 */
  .title2 {
    font-size: 20pt;
    margin-top: 0;
    margin-bottom: 20px;
    color: #000 !important;
    break-after: avoid; /* 防止標題與下方的內文斷開分頁 */
  }

  /* 4. 設定段落間距，並防止段落文字被攔腰截斷 */
  p {
    margin-bottom: 12pt;
    break-inside: avoid; /* 儘量防止單一段落被切斷到兩頁 */
  }

  /* 5. 定義紙張大小與頁邊距（留白給讀者做筆記） */
  @page {
    /* size: A4 portrait;  A4 紙張，縱向 */
    margin: 2cm 2cm;  /* 上下留 2.5 公分，左右留 2 公分 */
  }
}



/* -----------------------------

 9 pt	12 px		  0.75  rem
10 pt	13.33 px	  0.833 rem
11 pt	14.67 px  15 px   0.917 rem
12 pt		  16 px   1     rem
13 pt	17.33 px  17 px   1.083 rem
14 pt	18.67 px          1.167 rem
15 pt	20.00 px  20 px   1.250 rem
16 pt	21.33 px          1.333 rem
17 pt	22.67 px  23 px   1.417 rem
18 pt		  24 px	  1.5   rem
19 pt	25.33 px	  1.583 rem
20 pt	26.67 px	  1.667 rem
21 pt		  28 px	  1.75  rem


舊(原) 字16px, 12pt, 行高18pt, 24px

-------------------------------- */