/* 基本のマーカースタイル */
.text-highlight {
    border-radius: 3px;
    padding: 1px 3px; /* 左右に少し余白 */
    line-height: 1;
    display: inline;
    /* 縦方向の調整 */
    vertical-align: baseline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* 色別スタイル */
.text-highlight[data-color="yellow"] {
    background-color: #fff3cd; /* 淡い黄色 */
}

.text-highlight[data-color="red"] {
    background-color: #f8d7da; /* 淡い赤色 */
}

.text-highlight[data-color="blue"] {
    background-color: #d1ecf1; /* 淡い青色 */
}

/* デフォルト色（色が指定されていない場合） */
.text-highlight:not([data-color]) {
    background-color: #fff3cd; /* デフォルトは淡い黄色 */
}

/* エディタ内でのプレビュー */
.wp-block-editor .text-highlight {
    padding: 1px 3px;
}