* {font-size: 16px;}
p {margin: 16px 0; line-height: 28px; font-family: PMingLiU; text-align: justify;}
.zhw {text-indent:2em;}
.notecolor { color: rgb(255, 76, 65); }

a{text-decoration:none;} 
a:link, a:visited {color: rgb(0, 82, 255);}

#image000 {width: 98%}
#image150 {width: 150px;}
#image120 {width: 120px;}
#image100 {width: 100px;}

@media screen and (min-width:550px){#image450 {width: 450px;}}
@media screen and (max-width:550px){#image450 {width: 98%;}}

@media screen and (min-width:500px){#image400 {width: 400px;}}
@media screen and (max-width:500px){#image400 {width: 98%;}}

@media screen and (min-width:450px){#image350 {width: 400px;}}
@media screen and (max-width:450px){#image350 {width: 98%;}}

@media screen and (min-width:400px){#image300 {width: 300px;}}
@media screen and (max-width:400px){#image300 {width: 98%;}}

@media screen and (min-width:350px){#image250 {width: 250px;}}
@media screen and (max-width:350px){#image250 {width: 98%;}}

#pic { text-align:center; margin: 24px 0; }

div#pic span {
	margin:12px;
	display: block; 
	color: #555; 
	text-align: center; 
	line-height: 1.5em;
	font-size: 1em;
	font-family:pmingliu;
}

/* 這是您需要修改的地方 */
ol {
    /* * 這是控制列表【整體】縮排的關鍵屬性。
     * 您可以調整 2em 這個值 (例如 1.5em 或 30px)，
     * 讓列表文字與您頁面上的 <p> 段落文字對齊。
     */
    padding-left: 2em;
    margin: 0 1em;
}

ol li {
    padding-left: 0;
    margin: 0 0 0.3em 0;
    line-height: 1.6em;
}

/* 您原有的 ul 規則 (不影響 ol) */
ul {
    margin:0 1em;
    padding:0 1em;
}
.ps-bcp { display: none; }
.ps-ucv { display: none; }



li::marker {
  color: #B50838; 
  font-weight: bold; 
}

.abc-music-container {
    width: 100%;
    margin: 16px 0; /* 匹配您 p {margin: 16px 0;} */
    overflow-x: auto; /* 處理寬樂譜 */
}

/* 2. (可選) 應用於 SVG 的 "盒裝" 樣式 */
.abc-music-boxed-svg {
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* 3. 歌詞樣式 (匹配您的 PMingLiU 和 16px 字體) */
.abcjs-lyric {
    font-size: 20px !important; /* 匹配 * {font-size: 16px;} */
    dominant-baseline: hanging !important; /* 修正中文字體的垂直對齊 */
}

/* 4. 音符與譜線 */
.abcjs-note,
.abcjs-rest,
.abcjs-staff {
    fill: #000 !important;
    stroke: #000 !important;
}

/* 5. 標題、拍號、標註 (啟/應) */
.abcjs-header,
.abcjs-meter,
.abcjs-key-signature,
.abcjs-annotation {
    font-size: 16px !important; /* 匹配 16px 基礎字體大小 */
}

/* --- addFrames() 函式的動態樣式 --- */

/* 6. 為 JS 動態創建的 <rect> (矩形框) 設定樣式 */
.versicle-box {
    fill: none !important;
    stroke: #B50838 !important; /* 匹配您 li::marker 的紅色 */
    stroke-width: 2 !important;
    rx: 3 !important; /* 圓角 */
}

/* 7. 為 "啟" / "應" 文字本身設定樣式 */
.versicle-text-active {
    fill: #B50838 !important; /* 匹配您 li::marker 的紅色 */
    font-weight: bold !important;
}



/* ==========================================
   🌙 黑暗模式 (Dark Mode) 適配
   當使用者的設備切換為深色模式時自動生效
   ========================================== */
@media (prefers-color-scheme: dark) {
    /* 1. 全局背景與文字顏色調整 */
    body {
        background-color: #121212 !important; /* 深黑背景 */
        color: #E0E0E0 !important;           /* 淺灰文字，保護眼睛 */
    }

    /* 2. 鏈接顏色優化：將原本的深藍改為更亮的淺藍 */
    a:link, a:visited {
        color: #66b3ff !important;
    }

    /* 3. 🔴 針對聖公會紅色標記 (#B50838 / .notecolor) 的優化 */
    /* 原本的深紅色在黑底上太暗，換成稍微亮一點的紅色提高對比度 */
    .notecolor, 
    li::marker,
    span[style*="#B50838"], 
    p[style*="#B50838"], 
    h3, h4 {
        color: #ff4d6d !important; 
    }

    /* 4. 列表符號樣式修正 */
    li::marker {
        color: #ff4d6d !important;
    }

    /* 5. 🎶 樂譜容器調整 */
    /* 原本樂譜背景是白色，黑暗模式下改為深灰色，並讓 SVG 反白（如果是黑色的話） */
    .abc-music-boxed-svg {
        background-color: #2c2c2e !important;
        border: 1px solid #444 !important;
    }
    
    /* 如果樂譜 SVG 的線條是黑色的，可以嘗試用這個濾鏡將其反白 */
    .abc-music-container svg {
        filter: invert(0.9) hue-rotate(180deg);
    }

    /* 6. 強制清除所有可能存在的白底 */
    div, p, table, td, th {
        background-color: transparent !important;
    }

    /* 7. 針對你的按鈕 (.order-button) 如果有的話 */
    .order-button {
        color: #66b3ff !important;
        border-color: #66b3ff !important;
        background-color: transparent !important;
    }
    .order-button.active {
        background-color: #66b3ff !important;
        color: #121212 !important;
    }
}