* {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 和您 ul 的一致 (如果您希望的話)
     * 但請注意 padding: 0 1em; 會同時增加左右內邊距，
     * 建議只用 padding-left 
     */
    margin: 0 1em;
}

ol li {
    /* * 【關鍵修改】
     * 將這裡設為 0。
     * 瀏覽器會自動處理數字(1.)和文字之間的間距。
     * 您之前設定的 1em 會導致額外的縮排。
     */
    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.js Music Notation Styles --- */

/* 1. 基礎容器 (匹配 <p> 的邊距) */
.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;
}