@charset "UTF-8";

/* 尺八谱样式 - shakuhachi-abc-renderer.css */

.shaku-score {
    display: inline-flex;
    flex-direction: row-reverse; /* 从右向左 */
    /* justify-content: flex-end; 移除，使用 inline-flex 自然排列 */
    background-color: #f9f7f0;
    color: #2c2c2c;
    border: 2px solid #333;
    padding: 40px 20px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    overflow-x: auto;
    max-width: 100%;
    font-family: "Noto Serif JP", "SimSun", serif;
}
.shaku-line {
    display: flex;
    flex-direction: column; /* 竖排 */
    /* writing-mode: vertical-rl; 
       注意：如果内部元素已经是垂直排列的块级元素，不需要 writing-mode，
       除非想利用 text-orientation。这里保持 flex column 布局更可控。
    */
    border-left: 1px solid #ccc;
    padding: 10px 18px;
    font-size: 22px;
    line-height: 1.8;
    min-width: 45px;
    text-align: center;
    margin-left: 0;
}
.shaku-line:last-child {
    border-left: none;
}
.shaku-bar {
    /* 模拟小节线 */
    height: 1px;
    background: #888;
    margin: 10px 0;
    width: 80%; /* 稍微短一点 */
    align-self: center;
}
.shaku-note {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    font-weight: bold;
    position: relative;
    padding-left: 12px; /* 留出左侧修饰符空间 */
}
.kana {
    font-weight: bold;
    z-index: 1;
    font-size: 1.2em;
}

/* 左侧修饰符 (大/中/小/メ) - 移动到左下方紧靠音符 */
 .mod-left {
     position: absolute;
     left: 10px; 
     bottom: 4px;
     top: auto;
     transform: none;
     font-size: 0.4em;
     color: #000;
     line-height: 1;
 }
 
 /* 数字修饰符 (五/二) - 移动到左下方紧靠音符 */
 .mod-num {
     position: absolute;
     left: 25px;
     bottom: 12px;
     top: auto;
     transform: none;
     font-size: 0.4em;
     color: #000;
     line-height: 1;
     font-weight: bold;
 }

/* 右上修饰符 (圈) */
.mod-circle {
    position: absolute;
    right: -2px;
    top: 7px;
    font-size: 0.5em;
    color: #000;
}

/* 音区标记 (甲/乙) - 显示在音符右上角 */
.reg-mark-right {
    position: absolute;
    right: -0.8em; 
    top: -0.4em;
    font-size: 0.5em;
    color: #555;
    font-weight: normal;
    white-space: nowrap;
    line-height: 1;
}

/* 移除原有的每音符甲音/大甲标记 */
/*
.kan::after { ... }
.daikan::after { ... }
*/

/* 长音标记 (不再使用 ::before) */
/* .long-note { padding-bottom: 10px; } .long-note::before { ... } 移除或注释掉 */

/* 节奏标记 - 点 (、) - 右侧 */
.rhythm-dot {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    color: #000;
    font-weight: bold;
}

/* 节奏标记 - 线 (｜) - 下方 */
.rhythm-line {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
    color: #000;
    line-height: 1;
    font-weight: normal;
}

/* 节奏标记 - 连音 (）) - 右下方 */
.rhythm-tie {
    position: absolute;
    right: -8px;
    bottom: -4px;
    font-size: 0.6em;
    color: #000;
}

/* 休止符 (。) - 替换假名位置 */
.shaku-rest .kana {
    /* 保持原样，只是内容变成了 。 */
}

#shaku {
    text-align: center;
}