/* CSS Counter 在列表中的使用示例 */

/* ============================================
   基本用法：有序列表的自定義編號
   ============================================ */

/* 1. 在父元素上重置 counter */
.custom-list {
	counter-reset: list-counter; /* 重置 counter，初始值為 0 */
	list-style: none; /* 移除默認的列表樣式 */
	padding-left: 0;
}

/* 2. 在每個列表項上增加 counter */
.custom-list li {
	counter-increment: list-counter; /* 每次增加 1 */
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}

/* 3. 使用 ::before 偽元素顯示 counter */
.custom-list li::before {
	content: counter(list-counter) ". "; /* 顯示 counter 值 */
	position: absolute;
	left: 0;
	font-weight: bold;
	color: #333;
}

/* ============================================
   進階用法：嵌套列表的多層級編號
   ============================================ */

.nested-list {
	counter-reset: main-counter; /* 主計數器 */
	list-style: none;
	padding-left: 0;
}

.nested-list > li {
	counter-increment: main-counter;
	counter-reset: sub-counter; /* 每個主項目重置子計數器 */
	position: relative;
	padding-left: 2rem;
	margin-bottom: 1rem;
}

.nested-list > li::before {
	content: counter(main-counter) ". ";
	position: absolute;
	left: 0;
	font-weight: bold;
}

/* 子列表 */
.nested-list ul {
	counter-reset: sub-counter; /* 重置子計數器 */
	list-style: none;
	padding-left: 2rem;
	margin-top: 0.5rem;
}

.nested-list ul li {
	counter-increment: sub-counter;
	position: relative;
	padding-left: 2rem;
}

.nested-list ul li::before {
	content: counter(main-counter) "." counter(sub-counter) ". ";
	position: absolute;
	left: 0;
	font-weight: normal;
}

/* ============================================
   進階用法：不同樣式的編號（字母、羅馬數字等）
   ============================================ */

.alpha-list {
	counter-reset: alpha-counter;
	list-style: none;
	padding-left: 0;
}

.alpha-list li {
	counter-increment: alpha-counter;
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}

/* 使用小寫字母 */
.alpha-list li::before {
	content: counter(alpha-counter, lower-alpha) ". "; /* a, b, c... */
	position: absolute;
	left: 0;
	font-weight: bold;
}

/* 使用大寫字母 */
.upper-alpha-list li::before {
	content: counter(alpha-counter, upper-alpha) ". "; /* A, B, C... */
}

/* 使用小寫羅馬數字 */
.roman-list li::before {
	content: counter(alpha-counter, lower-roman) ". "; /* i, ii, iii... */
}

/* 使用大寫羅馬數字 */
.upper-roman-list li::before {
	content: counter(alpha-counter, upper-roman) ". "; /* I, II, III... */
}

/* ============================================
   進階用法：自定義起始值
   ============================================ */

.custom-start-list {
	counter-reset: start-counter 5; /* 從 5 開始 */
	list-style: none;
	padding-left: 0;
}

.custom-start-list li {
	counter-increment: start-counter;
	position: relative;
	padding-left: 2rem;
}

.custom-start-list li::before {
	content: counter(start-counter) ". ";
	position: absolute;
	left: 0;
}

/* ============================================
   進階用法：前綴和後綴
   ============================================ */

.prefix-list {
	counter-reset: prefix-counter;
	list-style: none;
	padding-left: 0;
}

.prefix-list li {
	counter-increment: prefix-counter;
	position: relative;
	padding-left: 3rem;
}

.prefix-list li::before {
	content: "第 " counter(prefix-counter) " 項："; /* 中文前綴 */
	position: absolute;
	left: 0;
	font-weight: bold;
	color: #0066cc;
}

/* ============================================
   進階用法：補零（leading zeros）
   ============================================ */

.zero-padded-list {
	counter-reset: zero-counter;
	list-style: none;
	padding-left: 0;
}

.zero-padded-list li {
	counter-increment: zero-counter;
	position: relative;
	padding-left: 3rem;
}

.zero-padded-list li::before {
	content: counter(zero-counter, decimal-leading-zero) ". "; /* 01, 02, 03... */
	position: absolute;
	left: 0;
	font-weight: bold;
	font-family: monospace;
}

/* ============================================
   實際應用：目錄列表（Table of Contents）
   ============================================ */

.toc-list {
	counter-reset: toc-main toc-sub;
	list-style: none;
	padding-left: 0;
}

.toc-list > li {
	counter-increment: toc-main;
	counter-reset: toc-sub; /* 每個主項目重置子計數器 */
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.5rem;
}

.toc-list > li::before {
	content: counter(toc-main) ". ";
	position: absolute;
	left: 0;
	font-weight: bold;
}

/* 子項目 */
.toc-list ul {
	counter-reset: toc-sub;
	list-style: none;
	padding-left: 2rem;
	margin-top: 0.25rem;
}

.toc-list ul li {
	counter-increment: toc-sub;
	position: relative;
	padding-left: 2rem;
	font-size: 0.9em;
}

.toc-list ul li::before {
	content: counter(toc-main) "." counter(toc-sub, lower-alpha) ". "; /* 1.a, 1.b... */
	position: absolute;
	left: 0;
	font-weight: normal;
}

/* ============================================
   CSS Counter 的關鍵概念總結
   ============================================

   1. counter-reset: 重置/初始化 counter
      - 語法: counter-reset: counter-name [initial-value];
      - 初始值默認為 0
      - 在父元素上設置

   2. counter-increment: 增加 counter
      - 語法: counter-increment: counter-name [increment-value];
      - 增量默認為 1
      - 在要計數的元素上設置

   3. counter(): 顯示 counter 值
      - 語法: counter(counter-name [, style]);
      - 在 content 屬性中使用
      - style 可以是: decimal, lower-alpha, upper-alpha, 
        lower-roman, upper-roman, decimal-leading-zero 等

   4. 嵌套 counter:
      - 每個層級使用不同的 counter 名稱
      - 在父項目上重置子 counter
      - 使用 counter(parent) "." counter(child) 顯示嵌套編號

   5. 注意事項:
      - counter 的作用域是從 counter-reset 的元素開始
      - counter 會繼承到子元素
      - 使用 counter-reset 可以創建新的作用域
   ============================================ */