@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: 0.125em solid #333;
    padding: 2.5em 1.25em;
    box-shadow: 0.3125em 0.3125em 0.9375em 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: 0.0625em solid #ccc;
    padding: 0.625em 0.625em;
    font-size: 1.375em;
    line-height: 1.8;
    min-width: 2.8125em;
    text-align: center;
    margin-left: 0;
}
.shaku-line:last-child {
    border-left: none;
}
.shaku-bar {
    /* 模拟小节线 */
    height: 0.0625em;
    background: #888;
    margin: 0.625em 0;
    width: 80%;
    align-self: center;
}
.shaku-note {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5em;
    font-weight: bold;
    position: relative;
    padding: 0 0.25em; 
}
.kana {
    font-weight: bold;
    z-index: 1;
    font-size: 1.2em;
}

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

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

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

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

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

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

/* 节奏标记 - 左点 (里拍) */
.rhythm-left-dot {
    position: absolute;
    left: -0.5em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    color: #000;
    font-weight: bold;
}

/* 节奏标记 - 三角 (△) - 左侧 (里拍延长) */
.rhythm-triangle {
    position: absolute;
    left: -0.6em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.4em;
    color: #000;
    /* font-weight: bold; */
}

/* 节奏标记 - 划线容器 (音符上方、平行的垂直划线，像删除线效果) */
.shaku-note .rhythm-line-container {
    position: absolute;
    top: -0.2em;
    bottom: 0.1em;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    pointer-events: none;
    z-index: 0;
}

.shaku-note .rhythm-line-container .rhythm-line {
    width: 1px;
    background: #333;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

/* 节奏标记 - 时值点容器 (二分/全音符右侧的多个点) */
.shaku-note .rhythm-duration-dots {
    position: absolute;
    right: -0.3em;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.9;
    pointer-events: none;
    z-index: 0;
}

/* 容器内重置 .rhythm-dot 的绝对定位，让点竖直排列 */
.shaku-note .rhythm-duration-dots .rhythm-dot {
    position: static;
    display: block;
    transform: none;
    font-size: 0.5em;
    color: #000;
    font-weight: bold;
    line-height: 0.9;
}

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

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

#shaku {
    text-align: center;
}