/* =================================================================
 * cuzcuz-blog.css v3
 * cuzcuz 部落格 / SEO 文章專用樣式
 * 版本：v3.0 (2026/05/14)
 *
 * 變更：v2 → v3
 *   - 文章底色改為純白 #ffffff（移除暖米色背景）
 *   - 移除所有 emoji 裝飾（📐 ✅ 👉）
 *   - CTA 區塊重新設計：精緻邊框風格，棕色實心按鈕
 *   - 列表標記用 ─ 取代 ✓
 *
 * 載入方式：每篇文章內文最前面加：
 *   <link rel="stylesheet" href="https://www.cuzcuz.com.tw/css/cuzcuz-blog.css?ver=20260514">
 *
 * 包裝方式：文章內容用 <div class="cuz-article"> 包起來
 * ================================================================= */


/* =================================================================
 * 1. 設計變數
 * ================================================================= */
.cuz-article {
  /* 主色系（品牌 Brown #756450） */
  --cuz-brown: #756450;
  --cuz-brown-dark: #5d4f3f;
  --cuz-brown-darker: #3d3528;
  --cuz-brown-light: #a89880;
  --cuz-brown-bg: #ede4d3;
  --cuz-brown-bg-soft: #f7f2e8;

  /* 點綴色（品牌 Yellow #E2B32F） */
  --cuz-yellow: #E2B32F;
  --cuz-yellow-dark: #b88c1f;
  --cuz-yellow-light: #f3d678;
  --cuz-yellow-bg: #fbf5e3;

  /* 底色：純白 */
  --cuz-bg: #ffffff;

  /* 文字色階 */
  --cuz-text-primary: #2c2218;
  --cuz-text-body: #3d3528;
  --cuz-text-muted: #8c7d6a;
  --cuz-text-light: #b5a896;

  /* 中性色階 */
  --cuz-border: #e8dfd0;
  --cuz-border-light: #f0e9dc;
  --cuz-divider: #d4c9b3;

  /* 字型 */
  --cuz-font-body: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
  --cuz-font-number: 'Mukta', 'Noto Sans TC', sans-serif;

  /* 間距 */
  --cuz-space-xs: 8px;
  --cuz-space-sm: 14px;
  --cuz-space-md: 20px;
  --cuz-space-lg: 32px;
  --cuz-space-xl: 48px;
  --cuz-space-xxl: 64px;

  /* 圓角 */
  --cuz-radius-sm: 4px;
  --cuz-radius-md: 8px;
  --cuz-radius-lg: 12px;

  /* 陰影 */
  --cuz-shadow-sm: 0 2px 8px rgba(117, 100, 80, 0.06);
  --cuz-shadow-md: 0 4px 16px rgba(117, 100, 80, 0.10);
  --cuz-shadow-lg: 0 8px 32px rgba(117, 100, 80, 0.16);
}


/* =================================================================
 * 2. 全局基礎（純白底）
 * ================================================================= */
.cuz-article {
  font-family: var(--cuz-font-body);
  font-size: 17px;
  line-height: 1.85;
  color: var(--cuz-text-body);
  letter-spacing: 0.02em;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--cuz-space-md) var(--cuz-space-sm);
  background: var(--cuz-bg);  /* 純白 */
  word-wrap: break-word;
  word-break: break-word;
}

.cuz-article * { box-sizing: border-box; }


/* =================================================================
 * 3. Typography
 * ================================================================= */

.cuz-article h1 {
  font-size: 2.2em;
  font-weight: 800;
  line-height: 1.35;
  color: var(--cuz-text-primary);
  margin: var(--cuz-space-xxl) 0 var(--cuz-space-lg) 0;
  letter-spacing: -0.01em;
}

.cuz-article h2 {
  font-size: 1.6em;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cuz-text-primary);
  margin: var(--cuz-space-xxl) 0 var(--cuz-space-md) 0;
  padding: 14px 0 14px 22px;
  border-left: 6px solid var(--cuz-brown);
  background: linear-gradient(90deg, var(--cuz-brown-bg) 0%, var(--cuz-brown-bg-soft) 50%, transparent 80%);
  position: relative;
}

.cuz-article h2:first-child { margin-top: var(--cuz-space-md); }

.cuz-article h3 {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cuz-text-primary);
  margin: var(--cuz-space-lg) 0 var(--cuz-space-sm) 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cuz-border);
  position: relative;
}

.cuz-article h3::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--cuz-yellow);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-2px);
}

.cuz-article h4 {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--cuz-text-primary);
  margin: var(--cuz-space-md) 0 var(--cuz-space-sm) 0;
}

.cuz-article p {
  margin: 0 0 var(--cuz-space-md) 0;
  text-align: justify;
}

.cuz-article > p:first-of-type {
  font-size: 1.08em;
  color: var(--cuz-text-body);
  font-weight: 400;
  line-height: 1.9;
  padding: var(--cuz-space-md) 0;
  border-bottom: 1px solid var(--cuz-border-light);
  margin-bottom: var(--cuz-space-lg);
}

.cuz-article strong,
.cuz-article b {
  color: var(--cuz-brown-dark);
  font-weight: 700;
}

.cuz-article em,
.cuz-article i {
  color: var(--cuz-text-body);
  font-style: italic;
}

.cuz-article a {
  color: var(--cuz-brown);
  text-decoration: underline;
  text-decoration-color: var(--cuz-brown-light);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: all 0.2s ease;
  font-weight: 500;
}

.cuz-article a:hover {
  color: var(--cuz-brown-darker);
  text-decoration-color: var(--cuz-brown-dark);
  text-decoration-thickness: 2.5px;
}

.cuz-article p,
.cuz-article li,
.cuz-article td {
  font-feature-settings: "tnum" 1;
}


/* =================================================================
 * 4. 列表
 * ================================================================= */

.cuz-article ul,
.cuz-article ol {
  margin: var(--cuz-space-sm) 0 var(--cuz-space-md) 0;
  padding-left: 28px;
}

.cuz-article ul li,
.cuz-article ol li {
  margin-bottom: 10px;
  line-height: 1.85;
}

.cuz-article ul {
  list-style: none;
  padding-left: 0;
}

.cuz-article ul li {
  padding-left: 28px;
  position: relative;
}

.cuz-article ul li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.7em;
  width: 8px;
  height: 8px;
  background: var(--cuz-brown);
  border-radius: 50%;
}

.cuz-article ol {
  padding-left: 0;
  counter-reset: cuz-ol-counter;
  list-style: none;
}

.cuz-article ol li {
  padding-left: 40px;
  position: relative;
  counter-increment: cuz-ol-counter;
}

.cuz-article ol li::before {
  content: counter(cuz-ol-counter);
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 26px;
  height: 26px;
  background: var(--cuz-brown);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 700;
  font-family: var(--cuz-font-number);
}


/* =================================================================
 * 5. 目錄區塊（A 樣式：細邊框極簡 + 兩欄編號）
 * 設計理念：
 *   - 不用色塊滿版，僅左邊一條 3px 細線標示
 *   - 兩欄排列，視覺重量壓縮一半
 *   - 編號用淺棕色 01/02 兩位數字，呼應雜誌風
 *   - 章節文字小一級（14px），「下沉」於正文之下
 * ================================================================= */

.cuz-article h2 + ol {
  background: transparent;
  border-left: 3px solid var(--cuz-brown);
  border-radius: 0;
  padding: var(--cuz-space-sm) 0 var(--cuz-space-sm) var(--cuz-space-md);
  margin: var(--cuz-space-sm) 0 var(--cuz-space-xl) 0;

  /* 兩欄排版 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--cuz-space-lg);
  row-gap: 6px;

  /* 重置 counter 用我們自己的 */
  counter-reset: cuz-toc-counter;
  list-style: none;
}

/* 目錄上方加一個 "目錄" 小標 */
.cuz-article h2 + ol::before {
  content: "目錄";
  display: block;
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--cuz-brown);
  margin-bottom: 6px;
  font-family: var(--cuz-font-body);
}

.cuz-article h2 + ol li {
  margin: 0;
  padding: 0 0 0 28px;
  position: relative;
  counter-increment: cuz-toc-counter;
  font-size: 14px;
  line-height: 1.7;
  border-radius: 0;
}

/* 編號 01 / 02 兩位數樣式 */
.cuz-article h2 + ol li::before {
  content: counter(cuz-toc-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--cuz-brown-light);
  border-radius: 0;
  font-family: var(--cuz-font-number);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: inline;
  padding-top: 3px;
}

.cuz-article h2 + ol a {
  color: var(--cuz-text-body);
  text-decoration: none;
  font-weight: 400;
  display: block;
  transition: color 0.15s ease;
}

.cuz-article h2 + ol a:hover {
  color: var(--cuz-brown);
  text-decoration: none;
}

/* 目錄前的「目錄」H2 標題收小 — 因為 A 樣式內已自帶「目錄」標籤，
   為了避免重複，建議在文章 HTML 改用 <h2 class="cuz-toc-heading">目錄</h2>。
   不改 HTML 也沒關係，雙標籤閱讀無大礙。 */
.cuz-article .cuz-toc-heading {
  font-size: 0;
  background: transparent;
  border-left: none;
  padding: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
}

/* 手機版改回一欄 */
@media (max-width: 640px) {
  .cuz-article h2 + ol {
    grid-template-columns: 1fr;
  }
}


/* =================================================================
 * 6. 表格
 * ================================================================= */

.cuz-article table {
  width: 100%;
  margin: var(--cuz-space-md) 0 var(--cuz-space-lg) 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95em;
  background: #ffffff;
  box-shadow: var(--cuz-shadow-sm);
  border: 1px solid var(--cuz-border);
  border-radius: var(--cuz-radius-md);
  overflow: hidden;
}

.cuz-article table thead {
  background: var(--cuz-brown);
}

.cuz-article table thead th {
  color: #ffffff;
  font-weight: 600;
  text-align: left;
  padding: 14px 16px;
  font-size: 0.92em;
  letter-spacing: 0.05em;
  border: none;
}

.cuz-article table tbody td {
  padding: 12px 16px;
  border-top: 1px solid var(--cuz-border-light);
  vertical-align: top;
  line-height: 1.7;
  color: var(--cuz-text-body);
}

.cuz-article table tbody tr:nth-child(even) { background: var(--cuz-brown-bg-soft); }

.cuz-article table tbody tr:hover {
  background: var(--cuz-brown-bg);
  transition: background 0.2s;
}

.cuz-article table tbody tr td:first-child {
  font-weight: 500;
  color: var(--cuz-text-primary);
}


/* =================================================================
 * 7. 分隔線
 * ================================================================= */

.cuz-article hr {
  border: none;
  border-top: 1px solid var(--cuz-divider);
  margin: var(--cuz-space-xl) 0;
  height: 1px;
  background: transparent;
}


/* =================================================================
 * 8. CTA 區塊（精緻邊框風格，重新設計）
 * 設計理念：
 *   - 不用滿版色塊（避免高聲量視覺）
 *   - 用品牌色棕邊框 + 米色底 + 棕字標題
 *   - 棕色實心按鈕（單一強調點）
 *   - 列表用 — 短線取代 emoji
 *   - 整體留白多、字距大、安靜有質感
 * ================================================================= */

.cuz-cta-box {
  background: var(--cuz-brown-bg-soft);
  border: 1px solid var(--cuz-brown-light);
  border-left: 4px solid var(--cuz-brown);
  border-radius: var(--cuz-radius-md);
  padding: var(--cuz-space-lg) var(--cuz-space-lg);
  margin: var(--cuz-space-xl) 0;
}

.cuz-cta-box h2 {
  color: var(--cuz-brown-darker);
  background: transparent;
  border-left: none;
  padding: 0 0 var(--cuz-space-sm) 0;
  margin: 0 0 var(--cuz-space-sm) 0;
  font-size: 1.45em;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--cuz-brown-light);
}

.cuz-cta-box h2::before {
  content: none;
}

.cuz-cta-box p {
  color: var(--cuz-text-body);
  margin-bottom: var(--cuz-space-md);
  line-height: 1.85;
}

.cuz-cta-box ul {
  list-style: none;
  padding-left: 0;
  margin: var(--cuz-space-md) 0;
}

.cuz-cta-box ul li {
  padding: 4px 0 4px 24px;
  color: var(--cuz-text-body);
  position: relative;
  line-height: 1.7;
}

/* 用 — 取代 ✓ emoji */
.cuz-cta-box ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--cuz-brown);
  font-weight: 600;
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  display: inline;
}

/* CTA 按鈕：實心棕色，單一強調點 */
.cuz-cta-box a {
  display: inline-block;
  background: var(--cuz-brown);
  color: #ffffff;
  padding: 13px 32px;
  border-radius: var(--cuz-radius-sm);
  font-weight: 600;
  text-decoration: none;
  margin-top: var(--cuz-space-sm);
  font-size: 1em;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  border: 1px solid var(--cuz-brown);
}

.cuz-cta-box a:hover {
  background: var(--cuz-brown-dark);
  border-color: var(--cuz-brown-dark);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--cuz-shadow-sm);
}


/* =================================================================
 * 9. FAQ 區塊（點綴黃色系）
 * ================================================================= */

.cuz-faq h2 {
  border-left-color: var(--cuz-yellow);
  background: linear-gradient(90deg, #f5e7b8 0%, var(--cuz-yellow-bg) 50%, transparent 80%);
}

.cuz-faq h3 {
  color: var(--cuz-brown-darker);
  font-weight: 700;
  margin-top: var(--cuz-space-lg);
  padding: 14px 20px;
  background: var(--cuz-yellow-bg);
  border-left: 4px solid var(--cuz-yellow);
  border-bottom: none;
  border-radius: 0 var(--cuz-radius-sm) var(--cuz-radius-sm) 0;
}

.cuz-faq h3::before { content: none; }

.cuz-faq h3 + p {
  padding: 0 20px;
  color: var(--cuz-text-body);
}


/* =================================================================
 * 10. Callout
 * ================================================================= */

.cuz-callout {
  padding: 20px 24px;
  margin: var(--cuz-space-md) 0;
  border-radius: var(--cuz-radius-md);
  border-left: 4px solid;
  background: #ffffff;
  box-shadow: var(--cuz-shadow-sm);
}

.cuz-callout p:last-child { margin-bottom: 0; }

.cuz-callout-tip {
  background: var(--cuz-brown-bg-soft);
  border-left-color: var(--cuz-brown);
}

.cuz-callout-warning {
  background: var(--cuz-yellow-bg);
  border-left-color: var(--cuz-yellow);
}

.cuz-callout-highlight {
  background: var(--cuz-yellow-bg);
  border-left-color: var(--cuz-yellow-dark);
}


/* =================================================================
 * 11. 圖片
 * ================================================================= */

.cuz-article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--cuz-space-md) auto;
  border-radius: var(--cuz-radius-md);
  box-shadow: var(--cuz-shadow-sm);
}

.cuz-article figure {
  margin: var(--cuz-space-lg) 0;
  text-align: center;
}

.cuz-article figcaption {
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--cuz-text-muted);
  font-style: italic;
}


/* =================================================================
 * 12. 引用
 * ================================================================= */

.cuz-article blockquote {
  margin: var(--cuz-space-md) 0;
  padding: 20px 24px;
  background: var(--cuz-brown-bg-soft);
  border-left: 5px solid var(--cuz-brown);
  border-radius: 0 var(--cuz-radius-md) var(--cuz-radius-md) 0;
  color: var(--cuz-text-body);
  font-style: italic;
  position: relative;
}

.cuz-article blockquote::before {
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 4em;
  color: var(--cuz-brown-light);
  position: absolute;
  top: -10px;
  left: 14px;
  line-height: 1;
  opacity: 0.4;
}

.cuz-article blockquote p {
  margin: 0;
  padding-left: 30px;
}


/* =================================================================
 * 13. 程式碼
 * ================================================================= */

.cuz-article code {
  background: var(--cuz-brown-bg);
  color: var(--cuz-brown-darker);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Mukta', monospace;
  font-size: 0.92em;
}


/* =================================================================
 * 14. RWD 手機版
 * ================================================================= */

@media (max-width: 768px) {
  .cuz-article {
    font-size: 16px;
    line-height: 1.8;
    padding: var(--cuz-space-sm) 4px;
  }

  .cuz-article h1 { font-size: 1.7em; }
  .cuz-article h2 {
    font-size: 1.3em;
    padding: 10px 0 10px 14px;
    margin: var(--cuz-space-lg) 0 var(--cuz-space-sm) 0;
  }
  .cuz-article h3 {
    font-size: 1.1em;
    margin: var(--cuz-space-md) 0 var(--cuz-space-sm) 0;
  }

  .cuz-article > p:first-of-type { font-size: 1em; }

  .cuz-article ul li,
  .cuz-article ol li { padding-left: 24px; }
  .cuz-article ol li { padding-left: 36px; }

  .cuz-article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.88em;
    white-space: nowrap;
  }
  .cuz-article table thead,
  .cuz-article table tbody,
  .cuz-article table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .cuz-article table td {
    white-space: normal;
    word-break: break-word;
  }

  .cuz-article h2 + ol {
    padding: var(--cuz-space-sm) var(--cuz-space-md) var(--cuz-space-sm) 20px;
  }

  /* CTA 手機版 */
  .cuz-cta-box {
    padding: var(--cuz-space-md);
    margin: var(--cuz-space-lg) 0;
  }
  .cuz-cta-box h2 { font-size: 1.2em; }
  .cuz-cta-box a {
    display: block;
    text-align: center;
    padding: 14px 20px;
  }

  .cuz-faq h3 {
    padding: 12px 16px;
    font-size: 1em;
  }
  .cuz-faq h3 + p { padding: 0 16px; }
}


/* =================================================================
 * 15. RWD 平板
 * ================================================================= */

@media (min-width: 769px) and (max-width: 1024px) {
  .cuz-article { padding: var(--cuz-space-md) var(--cuz-space-md); }
}


/* =================================================================
 * 16. 列印
 * ================================================================= */

@media print {
  .cuz-cta-box {
    background: #ffffff !important;
    border: 1px solid #000 !important;
  }
  .cuz-cta-box a {
    background: #000 !important;
    color: #fff !important;
  }
  .cuz-article a {
    color: #000;
    text-decoration: underline;
  }
}