/* 建立時間：2026-10-16 (UTC+8)　功能：良陳 SEO Blog 自架樣式（零外部引用，禁 CDN）
   修正原因與過程：F 基礎架構路交付；行動優先（簡中移動端 81%），色票沿用正式站 index.css
   （朱紅 #C41E3A／皇金 #D4AF37／宣紙米白 #F5F1EB／墨黑 #1A1A1A），字型複用站內已自架
   Noto Sans TC / Noto Serif TC（SIL OFL，assets/vendor/google-fonts/），不重新下載。
   本檔可任意改，改完重跑 build.py 會複製進 dist/。 */

:root {
  --c-vermilion: #C41E3A;
  --c-vermilion-dark: #9B1B30;
  --c-gold: #D4AF37;
  --c-gold-dark: #B8960C;
  --c-paper: #F5F1EB;
  --c-paper-dark: #E8E0D5;
  --c-ink: #1A1A1A;
  --c-ink-light: #4A4A4A;
  --c-line: #D9CFC0;
  --c-white: #FFFFFF;
  --font-head: "Noto Serif TC", "Songti SC", serif;
  --font-body: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang TC", "Microsoft JhengHei", sans-serif;
  --max-w: 46rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.85;
}

/* ---- 標頭＋語言切換器（顯式連結，非 JS／非 cookie）---- */
.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .75rem 1rem;
  background: var(--c-ink);
  color: var(--c-white);
}
.brand {
  font-family: var(--font-head);
  font-size: 1.25rem;
  color: var(--c-gold);
  text-decoration: none;
  letter-spacing: .12em;
}
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
  font-size: .82rem;
}
.lang-switch__h { color: var(--c-paper-dark); }
.lang-switch ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lang-switch a {
  color: var(--c-white);
  text-decoration: none;
  padding: .12rem .4rem;
  border: 1px solid transparent;
  border-radius: 3px;
}
.lang-switch a:hover,
.lang-switch a:focus { border-color: var(--c-gold); }
.lang-switch a[aria-current="true"] {
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* ---- 麵包屑 ---- */
.crumbs {
  padding: .55rem 1rem;
  font-size: .82rem;
  color: var(--c-ink-light);
  background: var(--c-paper-dark);
}
.crumbs a { color: var(--c-vermilion-dark); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---- 文章主體 ---- */
.article {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.1rem 1rem 2.5rem;
}
.article h1 {
  font-family: var(--font-head);
  font-size: 1.72rem;
  line-height: 1.4;
  color: var(--c-vermilion-dark);
  margin: .6rem 0 1rem;
}
.article h2 {
  font-family: var(--font-head);
  font-size: 1.28rem;
  margin: 2rem 0 .7rem;
  padding-left: .55rem;
  border-left: 4px solid var(--c-gold);
  line-height: 1.45;
}
.article h3 {
  font-size: 1.06rem;
  margin: 1.4rem 0 .5rem;
  color: var(--c-ink);
}
.article p { margin: 0 0 1.05rem; }
.article ul, .article ol { margin: 0 0 1.05rem; padding-left: 1.4rem; }
.article li { margin-bottom: .35rem; }
.article a { color: var(--c-vermilion-dark); text-decoration: underline; text-underline-offset: 2px; }
.article strong { color: var(--c-ink); }
.article blockquote {
  margin: 1.1rem 0;
  padding: .6rem 1rem;
  border-left: 4px solid var(--c-gold);
  background: var(--c-white);
  color: var(--c-ink-light);
}
.article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.2rem auto;
  border-radius: 6px;
}
.article figure { margin: 1.2rem 0; }
.article figcaption {
  text-align: center;
  font-size: .82rem;
  color: var(--c-ink-light);
}
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0;
  font-size: .92rem;
  background: var(--c-white);
}
.article th, .article td {
  border: 1px solid var(--c-line);
  padding: .45rem .6rem;
  text-align: left;
}
.article th { background: var(--c-paper-dark); }

/* ---- CTA（內鏈到排盤頁）---- */
.cta { margin: 1.8rem 0 1.2rem; text-align: center; }
.cta-btn {
  display: inline-block;
  padding: .72rem 1.6rem;
  background: var(--c-vermilion);
  color: var(--c-white) !important;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 1.02rem;
  letter-spacing: .06em;
}
.cta-btn:hover, .cta-btn:focus { background: var(--c-vermilion-dark); }

/* ---- 署名／更新日期 ---- */
.byline {
  margin-top: 1.6rem;
  padding-top: .9rem;
  border-top: 1px solid var(--c-line);
  font-size: .88rem;
  color: var(--c-ink-light);
}
.byline__sign {
  margin: 0 0 .25rem;
  color: var(--c-vermilion-dark);
  letter-spacing: .18em;
}
.byline__date { margin: 0; }

/* ---- FAQ（<details>）---- */
.faq { margin-top: 2.2rem; }
.faq h2 {
  font-family: var(--font-head);
  font-size: 1.28rem;
  margin: 0 0 .8rem;
  padding-left: .55rem;
  border-left: 4px solid var(--c-gold);
}
.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  margin-bottom: .6rem;
}
.faq-item summary {
  cursor: pointer;
  padding: .72rem 1rem;
  font-weight: 700;
  list-style-position: inside;
}
.faq-item[open] summary {
  color: var(--c-vermilion-dark);
  border-bottom: 1px solid var(--c-paper-dark);
}
.faq-a { padding: .25rem 1rem .85rem; }
.faq-a p { margin: .45rem 0 0; }

/* ---- 頁尾 ---- */
.site-foot {
  background: var(--c-ink);
  color: var(--c-paper-dark);
  text-align: center;
  font-size: .82rem;
  padding: 1.1rem 1rem;
}
.site-foot a { color: var(--c-gold); text-decoration: none; }

/* ---- 桌機（≥768px）---- */
@media (min-width: 768px) {
  body { font-size: 18px; }
  .site-head { padding: .9rem 2rem; }
  .article { padding: 1.5rem 1.5rem 3rem; }
  .article h1 { font-size: 2.1rem; }
  .article h2 { font-size: 1.45rem; }
  .crumbs { padding: .65rem 2rem; }
}

@media (min-width: 1200px) {
  .article h1 { font-size: 2.3rem; }
}

/* 無 JS 環境與列印友善 */
@media print {
  .site-head, .lang-switch, .cta, .site-foot { display: none; }
  body { background: #fff; }
}

/* ===== 索引頁規則（2026-10-16 F2 新增；既有規則未改）=====
   各語索引 dist/<lang>/index.html 與根索引 dist/index.html 的文章清單／語種清單排版。 */
.index-list,
.lang-index-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.index-item {
  margin: 0 0 1.5rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--c-line);
}
.index-item:last-child { border-bottom: 0; padding-bottom: 0; }
.index-item__title {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
  text-decoration: none;
}
.index-item__title:hover,
.index-item__title:focus { color: var(--c-vermilion-dark); text-decoration: underline; }
.index-item__desc { margin: .45rem 0 .35rem; color: var(--c-ink-light); }
.index-item__date { margin: 0; font-size: .88rem; color: var(--c-ink-light); }
.lang-index-list li { margin: 0 0 .95rem; }
.lang-index-list a {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-vermilion-dark);
  text-decoration: none;
}
.lang-index-list a:hover,
.lang-index-list a:focus { text-decoration: underline; }
.hero-img { margin: 1.2rem 0; }
.hero-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ===== LAY 響應式審查補強（2026-10-16 LAY 排版審查路新增；既有規則未刪改）=====
   目的：① 390px 防橫向溢出（表格／長字串／程式碼）② 觸控目標 ≥44px ③ 圖片容器防護。
   只新增規則與屬性，未變更上方任何既有宣告；回滾＝以 blog.css.bak_20261016_LAYresp-tap-overflow 覆蓋。 */

/* 1) 表格防溢出：Markdown <table> 無 wrapper，格內先可任意斷行（此舉同時把儲存格
   min-content 降到約一字寬，表格任何情況下都不會撐破 390px）；窄螢幕再改固定欄寬均分。 */
.article th,
.article td {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 767px) {
  .article table { table-layout: fixed; }
}

/* 2) 長英文／長 URL／長數字串斷行（CJK 本就可斷，此為防溢出保險，不影響現行版面） */
.article p,
.article li,
.article dd,
.article dt,
.article h1,
.article h2,
.article h3,
.faq-a,
.faq-item summary,
.index-item__desc,
.index-item__title,
.byline,
.crumbs,
.site-foot {
  overflow-wrap: break-word;
}

/* 3) 程式碼區防護（現行產物 0 個 <pre>/<code>，屬預先防護） */
.article pre {
  max-width: 100%;
  overflow-x: auto;
}
.article code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) 圖片／插圖容器防護（圖檔後補時必備；現行產物 0 圖） */
.article figure,
.hero-img {
  max-width: 100%;
}

/* 5) 觸控目標 ≥44px（只補 display／min-height，既有 padding 與視覺不動）
   原高度實測：lang-switch a ≈30px、brand ≈37px、crumbs a ≈24px → 補到 44px；
   summary ≈54px、cta-btn ≈53px 本已達標，一併寫死下限防字級變動。 */
.brand,
.lang-switch a,
.crumbs a,
.site-foot a,
.index-item__title,
.lang-index-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.faq-item summary,
.cta-btn {
  min-height: 44px;
}

/* [2026-10-19 wave3] zh-CN 頁腳 ICP 備案號：灰色小字、正常可見（老師裁 ICP 甲，禁隱形字） */
.site-foot .icp { margin: .35rem 0 0; font-size: .74rem; }
.site-foot .icp a { color: #a8a39a; }