/* ENCODING: UTF-8 (NO BOM) - DO NOT REMOVE THIS LINE. AI TOOLS: PRESERVE JAPANESE COMMENTS */
/* editor.css */
@font-face {
    font-family: 'Kunkunshi';
    src: url('fonts/kk4font1.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'KunkunshiGothic';
    src: url('fonts/kk4font2.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'ipag';
    src: url('fonts/ipag.ttf') format('truetype');
    font-display: swap;
}

:root {
    --bg-color: #f7f9fc;
    --surface-color: #ffffff;
    --border-color: #94a3b8;
    /* Darkened for better grid visibility */
    --primary-color: #f48c06;
    /* Portama Orange */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --action-bar-bg: #1e293b;
    --action-bar-icon: #cbd5e1;
    --action-bar-hover: #334155;

    /* Grid settings for Kunkunshi */
    --kk-font: 'Kunkunshi', 'Noto Serif JP', serif;
    /* カスタムフォントを優先適用 */
    --ui-font: 'Outfit', 'Noto Sans JP', sans-serif;
}

body.gothic-font {
    --kk-font: 'KunkunshiGothic', 'Noto Sans JP', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.editor-mode {
    font-family: var(--ui-font);
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow: hidden;
    /* Prevent body scroll, handle scroll inside canvas */
    height: 100vh;
    height: 100dvh;
    touch-action: manipulation;
    /* ダブルタップによるズームを防止 */
    overscroll-behavior: none;
}

#editor-app {
    display: flex;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* 動的ビューポート（モバイルでのツールバー考慮） */
    overflow: hidden;
    /* 本体はスクロールさせず内部で制御 */
}

/* =========================================================
   Left Action Bar
 ========================================================= */
#action-bar {
    width: 60px;
    background-color: var(--action-bar-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.action-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--action-bar-icon);
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background-color: var(--action-bar-hover);
    color: #fff;
}

.action-btn span {
    font-size: 24px;
}

.spacer {
    flex-grow: 1;
}

/* =========================================================
   Center Main Canvas
 ========================================================= */
#main-canvas {
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    /* Allow scrolling the score */
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    /* メニューと譜面を縦に並べる */
    align-items: center;
    /* 子要素を【横方向】に中央寄せ */
    padding: 30px 40px 20px 40px;
    /* 上部パディングはメニューのstickyで制御 */
    background-color: #e2e8f0;
    position: relative;
}

#score-container {
    background-color: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    /* OS標準メニューの抑制 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Grid Layout for Score */
    display: flex;
    flex-direction: row-reverse;
    /* align-items: flex-start;  削除：ここを削除することで、中の「段（score-row）」が等しい高さの枠で並ぶようになります */
    /* 縦に無駄に伸びるのを防ぐ（12段の高さでピタッと枠が止まる） */
    /* 横書きだが、右から左へ並べる（段） */
    padding: 50px 30px 20px 30px;
    gap: 20px;
    /* 段と段の隙間 */
    min-height: auto;
    /* コンテンツの高さ（12段分）に自動で合わせる */
    overflow-x: auto;
    max-width: 100%;

    /* 垂直方向の中央寄せ：余白がある時のみ上下に均等なマージンを置く */
    margin-top: auto;
    margin-bottom: auto;
    flex-shrink: 0;
    /* 16段時などに潰れないように固定 */
}

@media (max-width: 767px) {
    #score-container {
        padding: 40px 20px 400px 20px;
        /* 下部に大きな余白を確保 */
        gap: 30px;
    }
}


/* 一つの「段」（縦1列） */
.score-row {
    display: flex;
    flex-direction: row-reverse;
}

.score-row:first-child {
    /* border-right: 1px solid var(--border-color); */
    padding-right: 10px;
}

/* 曲名カラム */
.title-col {
    min-width: 81px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 12px;
    /* 音符マスの開始位置(padding-top)に合わせる */
    gap: 15px;
}

.title-choshi-select {
    width: 100% !important;
    font-size: 12px !important;
    padding: 6px 4px !important;
    margin-top: 30px;
    border-radius: 3px !important;
    border: 1px solid var(--border-color) !important;
    background-color: #fff !important;
    cursor: pointer !important;
    color: var(--text-primary) !important;
    font-family: var(--ui-font) !important;
    outline: none !important;
}

.title-textarea {
    /* 譜面のマス数（--cells-per-dan）に基づいて高さを計算 */
    height: calc(var(--cells-per-dan) * 24px * 0.8);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border: none;
    border-right: 1px solid var(--border-color);
    background: #fff;
    border-radius: 4px;
    font-family: var(--kk-font);
    font-size: 24px;
    font-weight: 800;
    padding: 5px;
    outline: none;
    overflow: hidden;
    /* スクロールバーを非表示にする */
    color: var(--text-primary);
    line-height: 1.1;
    white-space: pre-wrap;
    cursor: text;
    user-select: text;
}

.title-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 1px var(--primary-color), 0 2px 10px rgba(244, 140, 6, 0.1);
}

/* 曲名エリアの擬似プレースホルダー */
.title-textarea[contenteditable=true]:empty:before {
    content: attr(placeholder);
    color: var(--border-color);
    opacity: 0.7;
    pointer-events: none;
    font-weight: 400;
    font-family: var(--ui-font);
    font-size: 14px;
}

/* 曲名エリアのルビスタイル */
.title-textarea ruby {
    ruby-align: space-around;
}

.title-textarea rt {
    font-size: 0.5em;
    line-height: 1;
    color: var(--text-secondary);
    font-family: var(--ui-font);
}

/* ルビ枠（右側） */
.ruby-col {
    width: 30px;
    height: calc(100% - 12px);
    border: 1px solid var(--border-color);
    /* ルビと音符を分ける明確な縦線 */
    display: flex;
    position: relative;
    /* 音符側の12pxシフトと完全に同期させる */
    box-sizing: border-box;
}

.ruby-textarea {
    position: absolute;
    /* 追加：テキストエリアのデフォルト高さで枠が下に伸びてしまうバグを防止 */
    left: 0;
    height: calc(100% + 10px);
    /* 親の.ruby-col（工工四枠と同じ高さに自動伸縮する）に合わせる */
    width: 100%;
    /* 縦書きモード */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    /* 半角を横に寝かせる設定 */
    resize: none;
    border: none;
    background: transparent;
    /* Macでの正確な等幅(全角:半角 = 2:1)を実現するため Osaka-Mono を優先指定 */
    font-family: "ipag", "MS Mincho", "Osaka-Mono", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.0;
    font-feature-settings: normal;
    padding: 0 7px 0 0;
    /* 右側に余白を入れて左に寄せる */
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    cursor: text;
    color: #4a5568;
}

.ruby-textarea:focus {
    background-color: #f1f5f9;
}

/* 音符枠（左側） */
.note-col {
    width: 48px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 12px;
    /* セル全体を1拍(48px)の1/4(12px)ずらし、セルの中心に線を合わせる */

    /* セル境界ではなく、背景として本来の工工四枠を48px間隔で引く */
    background-image: repeating-linear-gradient(transparent,
            transparent 47px,
            var(--border-color) 47px,
            var(--border-color) 48px);
    background-size: 100% 48px;
    border-top: 1px solid var(--border-color);
    /* 上下左右を囲って箱にする */
    border-right: none;
    /* 中心の縦線はruby-col側と重なるため調整 */
    box-sizing: border-box;
}

/* 1個のマス目（半拍分） */
.score-cell {
    width: 48px;
    height: 24px;
    display: flex;
    position: relative;
    cursor: pointer;
    background-color: transparent;
    transition: background-color 0.1s;
    box-sizing: border-box;
    border-bottom: none;
    user-select: none;
    /* 範囲選択の邪魔になるためブラウザ標準のドラッグを無効化 */
    -webkit-user-drag: none;
    /* 長押しメニュー抑制の徹底 */
    -webkit-touch-callout: none;
}

.score-cell:hover {
    background-color: #f1f5f9;
}

.score-cell.selected {
    z-index: 5;
    background-color: rgba(244, 140, 6, 0.2);
    /* 単純な背景色ハイライトへ回帰 */
    box-shadow: inset 0 0 0 1px rgba(244, 140, 6, 0.5);
}

.score-cell.selected .kk-char {
    color: var(--primary-color);
}

/* 矩形選択（マーキー選択）の枠 */
.selection-marquee {
    position: fixed;
    border: 1px solid rgba(244, 140, 6, 0.8);
    background-color: rgba(244, 140, 6, 0.1);
    z-index: 1000;
    pointer-events: none;
    display: none;
}

/* 複数選択範囲のハイライト */
.score-cell.selected-range {
    background-color: rgba(244, 140, 6, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(244, 140, 6, 0.25);
}

/* ドラッグ時の強調 */
.score-cell.drag-over {
    background-color: rgba(244, 140, 6, 0.15);
    box-shadow: inset 0 0 4px rgba(244, 140, 6, 0.5);
    /* 暈かしすぎず中心性がわかるように */
}

.kk-key:active {
    cursor: grabbing;
}

/* 左側線 */
.left-line {
    width: 0px;
    height: calc(100% - 12px);
    border-right: 1px solid var(--border-color);
}

/* メインの工工四記号 */
.kk-char {
    font-family: var(--kk-font);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    z-index: 10;

    /* セルの中心に配置する（セル自体が12pxズレているため、これで線や中心に完璧に合う） */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    /* ドラッグ可能にするため変更 */
}

/* ドラッグ中の記号 */
.kk-char.is-dragging {
    opacity: 0.5;
}

/* ドラッグ中のゴーストコンテナ（一括移動用） */
.drag-ghost-container {
    position: fixed;
    top: -2000px;
    left: -2000px;
    z-index: 9999;
    pointer-events: none;
    border: 1px dashed rgba(244, 140, 6, 0.4);
    background: rgba(244, 140, 6, 0.05);
}

.drag-ghost-cell {
    position: absolute;
    width: 48px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--kk-font);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 装飾記号（♯, ♭, ⌝, 、） */
.kk-decorator {
    position: absolute;
    font-family: var(--kk-font);
    font-size: 18px;
    /* 全体的に大きく */
    font-weight: 400;
    color: var(--primary-color);
    line-height: 1;
    z-index: 15;
    pointer-events: none;
    /* ★装飾記号へのクリックを貫通させて背後のセルに届ける */
}

.acc-tag {
    top: 2px;
    left: 4px;
    font-size: 20px;
    /* シャープとフラットは特に大きく */
}

.orn-tag {
    top: -1px;
    right: 4px;
    font-size: 18px;
    color: var(--text-primary);
    /* 掛音・打ち音は文字と同じ色に */
}

.deco-btn.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 4px rgba(244, 140, 6, 0.3);
}

/* =========================================================
   Right Tool Palette
 ========================================================= */
#tool-palette {
    width: 320px;
    background-color: var(--surface-color);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.03);
}

.palette-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 16px 0;
    font-family: inherit;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab-btn:hover {
    background-color: #f8fafc;
}

.tab-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: #fffaf0;
}

.palette-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

.panel {
    display: none;
}

.panel.active {
    display: block;
}

/* Toggle Switch Style */
.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 12px;
    background: rgba(241, 245, 249, 0.5);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.switch-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:checked+.slider:before {
    transform: translateX(22px);
}

.slider.round {
    border-radius: 22px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Input Grid (Kunkunshi pad) - 4 Columns (3 Strings + 1 Symbols) */
.input-grid-kk {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 44px;
    gap: 8px;
    margin-bottom: 20px;
}

.kk-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.symbol-string .kk-key {
    font-size: 20px;
}

/* Marker Section Stylings */
.marker-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px;
}

.marker-section-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
}

.marker-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.marker-row:last-child {
    margin-bottom: 0;
}

.marker-btn {
    flex: 1;
    max-width: 60px;
    height: 48px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s;
}

.marker-btn:hover {
    background: #f1f5f9;
    border-color: var(--primary-color);
}

.marker-icon {
    display: block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Action Buttons (Insert, Space, Delete) */
.input-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.kk-action-key {
    flex: 1;
    height: 54px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

.kk-action-key:hover {
    background: #f8fafc;
}

.kk-action-key .material-icons-round {
    font-size: 24px;
    color: #64748b;
}

.kk-key {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    height: 50px;
    font-family: var(--kk-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.1s ease;
}

.kk-key:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.kk-key:active {
    transform: scale(0.95);
    background-color: #e2e8f0;
}

/* Palette Toggle Styles (Show/Hide Extra Keys) */
.palette-collapsed .extra-key {
    display: none;
}

.palette-header .material-icons-round {
    transition: transform 0.3s ease;
}

.palette-collapsed #toggle-extra-keys .material-icons-round {
    transform: rotate(0deg);
}

#panel-input:not(.palette-collapsed) #toggle-extra-keys .material-icons-round {
    transform: rotate(180deg);
}

.palette-collapsed .kk-col {
    gap: 8px;
    /* Slightly tighter gap when collapsed */
}

/* 高音部表示中（expanded）の時の繰り返し記号の移動後スタイル */
#panel-input:not(.palette-collapsed) #label-repeat-markers {
    display: none;
}

#panel-input:not(.palette-collapsed) .marker-section {
    padding-top: 4px;
}

#panel-input:not(.palette-collapsed) #label-vocal-pos {
    margin-top: 0 !important;
}


.symbol-string #repeat-marker-row {
    display: contents;
    /* コンテナとしてのレイアウトを無効化し、子要素を直接グリッドの列に参加させる */
}

.symbol-string #repeat-marker-row .marker-btn {
    width: 100%;
    max-width: none;
    height: 50px;
    /* kk-keyの高さ(50px)と揃える */
    flex: none;
    /* flex: 1 による意図しない伸縮を防止 */
    border-color: var(--border-color);
}



/* =========================================================
   Marker Controls (Palette)
 ========================================================= */
.marker-section {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(241, 245, 249, 0.5);
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.marker-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.marker-row {
    display: flex;
    gap: 10px;
}

.marker-group {
    display: flex;
    gap: 4px;
    flex: 1;
}

.marker-group-3col {
    display: flex;
    gap: 3px;
    flex: 1;
}

.marker-sep {
    width: 1px;
    background: #cbd5e1;
    margin: 2px 0;
}

.marker-btn {
    flex: 1;
    padding: 5px 2px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
    min-height: 36px;
}

.marker-btn-sm {
    font-size: 12px;
    min-height: 32px;
    padding: 3px 1px;
}

.marker-btn:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

.marker-btn:active {
    transform: scale(0.95);
    background-color: #e2e8f0;
}

.marker-btn.active,
.deco-btn.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 4px rgba(244, 140, 6, 0.3) !important;
}

/* =========================================================
   Grid Marker Display — Bracket ] 形状（右側）
 ========================================================= */

/* マーカーシンボル共通 */
.kk-marker {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    z-index: 100;
    /* 最前面へ */
    pointer-events: auto;
    /* マウスイベントを有効化 */
    cursor: grab;
    /* 掴めることを示す */
    line-height: 1;
    color: #1e293b;
    /* background: #fff; */
    border-radius: 2px;
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.kk-marker:active {
    cursor: grabbing;
}

/* フック（L字線）の共通スタイル */
.kk-marker::before {
    content: '';
    position: absolute;
    border-color: #1e293b;
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}

/* ▽ 再生繰り返し開始 (右上、フック付き) */
.marker-rp-start {
    right: -31px;
    top: 0px;
}

.marker-rp-start::before {
    width: 24px;
    height: 8px;
    right: 6px;
    top: -7px;
    border-top-width: 1px;
    border-right-width: 1px;
}

/* △ 再生繰り返し終了 (右下、フック付き) */
.marker-rp-end {
    right: -31px;
    bottom: 0px;
}

.marker-rp-end::before {
    width: 24px;
    height: 8px;
    right: 6px;
    bottom: -6px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* ○ 唄繰り返し開始 (右中央寄り、丸フック) */
.marker-vr-start {
    right: -31px;
    top: 0px;
}

.marker-vr-start::before {
    width: 24px;
    height: 8px;
    right: 6px;
    top: -7px;
    border-top-width: 1px;
    border-right-width: 1px;
}

/* ○ 唄繰り返し終了 (右中央寄り、下線フック) */
.marker-vr-end {
    right: -31px;
    bottom: 0px;
}

.marker-vr-end::before {
    width: 24px;
    height: 8px;
    right: 6px;
    bottom: -6px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* 唄の位置 (右側 3スロット) */
.marker-vocal-pos {
    right: -2px;
    /* 枠のすぐ右側 */
    font-size: 12px;
    color: #333;
    font-weight: 700;
}

.vocal-slot-top {
    top: -2px;
}

.vocal-slot-mid {
    top: 50%;
    transform: translateY(-50%);
}

.vocal-slot-bot {
    bottom: -2px;
}

/* =========================================================
   Palette Marker Icons — ブラケットプレビュー
 ========================================================= */
.marker-row-icons {
    display: flex;
    gap: 4px;
    align-items: stretch;
}

.marker-btn-icon {
    flex: 1;
    min-height: 48px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marker-btn-compact {
    min-height: 32px;
    flex: 0 1 60px;
    /* 横に広がりすぎないように制限 */
}

/* アイコンコンテナ (Flexboxで縦に並べる) */
.marker-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 28px;
    box-sizing: border-box;
    vertical-align: middle;
}

/* 共通の垂直線スタイル */
.marker-icon::before {
    content: '';
    display: block;
    width: 1px;
    height: 8px;
    background: #333;
    flex-shrink: 0;
}

/* 共通の記号スタイル */
.marker-icon::after {
    display: block;
    font-size: 16px;
    color: #333;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* 再生繰り返し開始 ▽ (線 -> 記号) */
.icon-rp-start::before {
    order: 1;
}

.icon-rp-start::after {
    content: '▽';
    order: 2;
    margin-top: -1px;
    /* 微調整で密着させる */
}

/* 再生繰り返し終了 △ (記号 -> 線) */
.icon-rp-end::after {
    content: '△';
    order: 1;
    margin-bottom: -1px;
}

.icon-rp-end::before {
    order: 2;
}

/* 唄繰り返し開始 ○ (線 -> 記号) */
.icon-vr-start::before {
    order: 1;
}

.icon-vr-start::after {
    content: '○';
    order: 2;
    margin-top: -1px;
}

/* 唄繰り返し終了 ○ (記号 -> 線) */
.icon-vr-end::after {
    content: '○';
    order: 1;
    margin-bottom: -1px;
}

.icon-vr-end::before {
    order: 2;
}

/* 唄いだし ○ (パレット用: 線なし) */
.icon-vocal-start::before {
    display: none;
}

.icon-vocal-start::after {
    content: '○';
    font-size: 14px;
}

/* 唄止め □ (パレット用: 線なし) */
.icon-vocal-end::before {
    display: none;
}

.icon-vocal-end::after {
    content: '□';
    font-size: 14px;
}

.input-actions {
    display: flex;
    gap: 8px;
}

.kk-action-key {
    flex: 1;
    height: 48px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: #f8fafc;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
}

.kk-action-key:hover {
    background-color: #e2e8f0;
    color: var(--text-primary);
}

.kk-action-key:active {
    transform: scale(0.95);
}

.kk-action-key.active {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 4px rgba(244, 140, 6, 0.3);
}

/* Forms */
.setting-group {
    margin-bottom: 20px;
}

.setting-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-select,
.modern-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-primary); /* 文字色をダークグレーに明示 */
    background-color: #ffffff;  /* 背景色を白に明示 */
    outline: none;
    transition: border-color 0.2s;
}

.modern-input::placeholder {
    color: #94a3b8; /* プレースホルダーを適切な薄いグレーにする */
}

.modern-select:focus,
.modern-input:focus {
    border-color: var(--primary-color);
}

.modern-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    outline: none;
    padding: 0 !important;
    /* 共通スタイルの padding を無効化 */
    margin: 15px 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* Buttons */
.modern-btn {
    border: none !important;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1;
    min-width: 100px;
    outline: none;
}

.modern-btn.primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(244, 140, 6, 0.2);
}

.modern-btn.primary:hover {
    background-color: #e88000;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(244, 140, 6, 0.3);
}

.modern-btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(244, 140, 6, 0.2);
}

.modern-btn.secondary {
    background-color: #f1f5f9;
    color: var(--text-secondary);
    border: 1px solid var(--border-color) !important;
}

.modern-btn.secondary:hover {
    background-color: #e2e8f0;
    color: var(--text-primary);
}

.w-100 {
    width: 100%;
}

/* Zoom Controls */
.zoom-control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.zoom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zoom-percentage {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(244, 140, 6, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 48px;
    text-align: center;
}

.radio-group {
    display: flex;
    gap: 15px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}

/* =========================================================
   Segment Control (Segmented Buttons)
   ========================================================= */
.segment-control {
    display: flex;
    background-color: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
    gap: 2px;
}

.segment-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.segment-btn:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
}

.segment-btn.active {
    background-color: #fff;
    color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.segment-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: transparent !important;
    box-shadow: none !important;
}

.play-controls {
    display: flex;
    gap: 10px;
}

.btn-play {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 4px 10px rgba(244, 140, 6, 0.4);
}

.btn-play span {
    font-size: 24px;
}

.btn-play:hover {
    transform: scale(1.05);
}

.btn-stop {
    width: 36px;
    height: 36px;
    background-color: #f1f5f9;
    color: #475569;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-stop span {
    font-size: 20px;
}

.btn-stop:hover {
    background-color: #e2e8f0;
}

.volume-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 6px;
    /* 左右対称のパディングにすることで、スライダーがアイコンの真下に合致します */
    margin-left: 6px;
    height: 48px;
    cursor: pointer;
}

.volume-container span.material-icons-round {
    font-size: 22px;
    color: #64748b;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.volume-container:hover span.material-icons-round,
.volume-container.show-slider span.material-icons-round {
    color: var(--primary-color);
    background: rgba(244, 140, 6, 0.1);
}

.slider-wrapper {
    position: absolute;
    top: 52px;
    /* 再生バーの下に浮かせます */
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 44px;
    height: 125px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 22px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1100;
}

/* 吹き出しのしっぽ（三角を上向きに変更） */
.slider-wrapper::after {
    content: '';
    position: absolute;
    top: -6px;
    /* 上側にしっぽを配置 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px;
    /* 上向きの三角 */
    border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, 0.95);
    display: block;
    width: 0;
}

/* ホバー時、フォーカス時、またはトグルクラス付与時にふわっとポップアップ表示 */
.volume-container:hover .slider-wrapper,
.volume-container:focus-within .slider-wrapper,
.volume-container.show-slider .slider-wrapper {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

#global-volume {
    -webkit-appearance: slider-vertical;
    /* Safari, Chrome, Edge用縦型 */
    writing-mode: vertical-lr;
    /* Firefox用縦型 */
    direction: rtl;
    /* つまみを上にする設定 */
    width: 20px;
    height: 95px;
    /* スライダーを長くして繊細な調整を可能に */
    margin: 0;
    padding: 0 !important;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* =========================================================
   Floating Toolbar Wrapper (Centered Together)
   ========================================================= */
#floating-toolbar-wrap {
    position: fixed;
    top: 0;
    left: 60px;
    width: calc(100% - 60px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 0;
    flex-shrink: 0;
    /* メニュー自体は縮まないように */
    background: transparent;
    pointer-events: none;
}

#floating-toolbar-wrap>* {
    pointer-events: auto;
}

/* =========================================================
   Floating Playback Toolbar
 ========================================================= */
.floating-playback {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px;
    border-radius: 40px;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   曲番タブバー
 ========================================================= */
#track-tab-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 6px 20px;
    border-radius: 35px;
    white-space: nowrap;
}

/* モード切替箇所の微調整 */
.edit-mode-toggle {
    min-width: 120px;
}

.tab-divider {
    width: 1px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0 4px;
}

.track-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px dashed #cbd5e1;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

/* 曲目情報の全体レイアウト (Red Box + Blue Box) */
.track-info-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    /* 数値バッジと矢印の間隔 */
}

/* ラベルと数値を縦に並べるスタック (Red Box) */
.track-main-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 70px;
}

.track-tab-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 歌詞編集用キャンバス */
.lyrics-editor-wrap {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /* 背景を少し暗くして用紙を際立たせる */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Centers when space is available */
    overscroll-behavior-y: none;
    touch-action: pan-x pan-y;
    /* Support vertical scroll */
    overflow: auto;
    direction: rtl;
    /* Start scroll from right */
    padding: 70px 40px 10px 40px;
}

#lyrics-container {
    margin: auto;
    /* Margin auto centers it perfectly, aligns to flex-start (right) on overflow */
    flex-shrink: 0;
    direction: ltr;
    /* Restore normal text direction */
}

/* ページ追加用フローティングボタン */
.lyrics-add-page-btn {
    position: absolute;
    right: 40px;
    bottom: 40px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
    direction: ltr;
    border-radius: 50px;
    border: none;
    color: var(--primary-color);
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(244, 140, 6, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lyrics-add-page-btn .btn-label {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.lyrics-add-page-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(244, 140, 6, 0.35);
    background: var(--primary-color);
    color: white;
}

.lyrics-add-page-btn:active {
    transform: translateY(0) scale(0.98);
}

.lyrics-paper {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    /* 子要素（枠）を絶対座標で配置するため */
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    /* 用紙からはみ出さないように */
    transition: background-color 0.3s;
}

/* 操作中のみ表示される補助グリッド（ドット） */
.lyrics-paper.is-snapping {
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 10px 10px;
    /* 10px間隔 of dots (5px単位の操作を補助) */
    background-position: 0 0;
}

/* 歌詞用紙内の曲名予約エリア（斜線） */
.lyrics-paper-title-reserved {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    /* 曲名が入る幅 */
    height: 100%;
    background: repeating-linear-gradient(-45deg,
            rgba(0, 0, 0, 0.03),
            rgba(0, 0, 0, 0.03) 10px,
            rgba(0, 0, 0, 0.08) 10px,
            rgba(0, 0, 0, 0.08) 20px);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.lyrics-paper-title-reserved::after {
    content: attr(data-label);
    writing-mode: vertical-rl;
    color: rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 4px;
}

/* 歌詞テキスト枠（コンテナ） */
.lyrics-frame {
    position: absolute;
    border: 1px dashed #cbd5e1;
    cursor: move;
    background: transparent;
    transition: border-color 0.2s, background 0.2s;
    min-width: 50px;
    min-height: 30px;
    outline: none;
    overflow: visible;
    /* ハンドルを見せるため */
}

/* 歌詞入力エリア（内部） */
.lyrics-text-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    cursor: text;
    line-height: 1.6;
    word-break: break-all;
    overflow: hidden;
    outline: none;
    white-space: pre-wrap;
    /* 改行を維持 */
}

/* ルビ（フリガナ）のスタイル */
.lyrics-text-content ruby {
    ruby-align: space-around;
}

.lyrics-text-content rt {
    font-size: 0.5em;
    line-height: 1;
    color: var(--text-secondary);
    /* 縦書きの時は自動的に右側、横書きの時は上に来る */
}

.lyrics-frame:hover {
    border-color: var(--primary-color);
    background: rgba(244, 140, 6, 0.02);
}

.lyrics-frame.selected {
    border: 2px solid var(--primary-color) !important;
    background: rgba(244, 140, 6, 0.04);
    box-shadow: 0 0 0 3px rgba(244, 140, 6, 0.1);
    z-index: 50;
}

/* 歌詞枠削除ボタン */
.lyrics-frame-delete {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    box-shadow: 0 2px 8px rgba(244, 140, 6, 0.3);
}

.lyrics-frame-delete:hover {
    background: #e67e00;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(244, 140, 6, 0.4);
}

.lyrics-frame-delete .material-icons-round {
    font-size: 12px;
    font-weight: bold;
}

/* パレット内の設定用2カラムレイアウト */
.setting-row-half {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.setting-row-half .setting-group {
    flex: 1;
    margin-bottom: 0;
}

/* 歌詞アクションボタンの追加スタイル（セグメントボタン風に統一） */
.lyrics-action-group {
    display: flex;
    padding: 3px;
    margin-top: 10px;
    gap: 10px;
}

.lyrics-action-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.lyrics-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
}

.lyrics-action-btn:active {
    transform: scale(0.95);
    background-color: #fff;
}

.lyrics-action-btn.btn-danger-alt {
    color: #ef4444;
}

.lyrics-action-btn.btn-danger-alt:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* リサイズハンドル */
.lyrics-frame .resizer {
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    position: absolute;
    z-index: 100;
    /* 常に最前面 */
    border: 2px solid white;
    border-radius: 50%;
    /* 丸型の方が掴みやすい */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* タッチデバイス向けの掴みやすさ向上（判定拡大用擬似要素） */
.lyrics-frame .resizer::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
}

.lyrics-frame .resizer-br {
    right: -7px;
    bottom: -7px;
    cursor: nwse-resize;
}

.lyrics-frame .resizer-bl {
    left: -7px;
    bottom: -7px;
    cursor: nesw-resize;
}

/* 用紙の向き */
.lyrics-paper.landscape {
    width: 841px;
    /* A4横倍率 */
    height: 595px;
}

.lyrics-paper.portrait {
    width: 595px;
    height: 841px;
}


/* 曲番削除ボタン (バッジ内) */
.track-del-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: 2px;
}

.track-del-btn:hover {
    color: white;
}

.track-del-btn span {
    font-size: 14px;
}

/* 矢印ナビグループ (Blue Box) */
.track-nav-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.track-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 16px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.track-nav-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

.track-nav-btn:disabled {
    opacity: 0.2;
    cursor: default;
}

.track-nav-btn span {
    font-size: 20px;
}

/* 曲番バッジのスタイル (Orange Badge) */
.track-current-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--primary-color);
    color: white;
    padding: 0 12px;
    border-radius: 10px;
    height: 25px;
    min-width: 60px;
    box-shadow: 0 3px 8px rgba(244, 140, 6, 0.3);
}

.track-num {
    font-size: 20px;
    font-weight: 800;
}

.track-total {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
}

/* 追加ボタン */
.track-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 0, 0, 0.2);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    flex-shrink: 0;
}

.track-add-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 6px rgba(244, 140, 6, 0.35);
}

.track-add-btn .material-icons-round {
    font-size: 18px;
}

/* =========================================================
   Selection & Context Menu
   ========================================================= */
.score-cell.selected-range {
    background-color: rgba(244, 140, 6, 0.15) !important;
    box-shadow: inset 0 0 0 1px rgba(244, 140, 6, 0.3);
}

.context-menu {
    position: fixed;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: menu-pop 0.15s cubic-bezier(0, 0, 0.2, 1);
}

@keyframes menu-pop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    font-weight: 500;
}

.menu-item:hover {
    background-color: rgba(244, 140, 6, 0.1);
    color: var(--primary-color);
}

.menu-item.danger {
    color: #ef4444;
}

.menu-item.danger:hover {
    background-color: #fef2f2;
}

.menu-item .material-icons-round {
    font-size: 20px;
}

.menu-shortcut {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* =========================================================
   Save Modal
 ========================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.modal-content {
    width: 90%;
    max-width: 480px;
    padding: 24px;
    text-align: center;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-title {
    margin-bottom: 24px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.modal-header .material-icons-round {
    font-size: 48px;
    color: var(--primary-color);
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-desc {
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.save-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.save-option-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
}

.save-option-btn:hover {
    border-color: var(--primary-color);
    background: #fff9f0;
}

.save-option-btn.active {
    border-color: var(--primary-color);
    background: #fff9f0;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.save-option-btn span.material-icons-round {
    font-size: 32px;
    color: var(--primary-color);
}

.option-info {
    display: flex;
    flex-direction: column;
}

.option-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.option-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.login-prompt {
    padding: 16px;
    background: #fee2e2;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #991b1b;
}

.login-inline-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.login-inline-form input {
    padding: 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1e293b;
    background-color: #ffffff;
}

.login-inline-form input:focus {
    outline: none;
    border-color: #f87171;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2);
    background-color: #ffffff;
}

/* オートフィル時の文字色と背景色の固定 */
.login-inline-form input:-webkit-autofill,
.login-inline-form input:-webkit-autofill:hover,
.login-inline-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #1e293b;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s;
}

.login-submit-btn {
    padding: 12px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.login-submit-btn:hover {
    background: #b91c1c;
}

.login-error-msg {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 4px;
    font-weight: 600;
}

.modal-actions {
    display: flex;
    justify-content: center;
}

.modal-cancel-btn {
    padding: 10px 24px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
}

.modal-cancel-btn:hover {
    background: #e2e8f0;
}

/* =========================================================
   Open Modal & Music List
 ========================================================= */
.list-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f1f5f9;
    border-radius: 12px;
    margin-bottom: 16px;
}

.list-search-wrap input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-size: 1rem;
    color: var(--text-primary);
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.music-list-container {
    height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
}

.music-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.music-list-item:last-child {
    border-bottom: none;
}

.music-list-item:hover {
    background: #f8fafc;
}

.music-list-item.active {
    background-color: #fff9f0;
    border-color: var(--primary-color);
}

.list-item-info {
    display: flex;
    flex-direction: column;
}

.list-item-title {
    font-weight: 600;
    color: var(--text-primary);
}

.list-item-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.list-item-action {
    color: var(--primary-color);
}

.list-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}

.list-back-btn:hover {
    background: #f1f5f9;
}

.list-loading,
.list-empty {
    padding: 32px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.9rem;
}



/* 境界線 */
.menu-sep {
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 4px 6px;
}

/* ==========================================
   スマホ専用バーチャルキーボード
   ========================================== */
#mobile-kunkunshi-keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(200px);
    -webkit-backdrop-filter: blur(200px);
    z-index: 9999;
    padding-top: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid #e2e8f0;
    display: none;
    /* デフォルト非表示 */
}

/* PC/初期状態の設定 */
#btn-mobile-menu,
#mobile-drawer,
#mobile-drawer-overlay,
#mobile-action-center {
    display: none;
}

/* スマホ表示時のメディアクエリ */
@media (max-width: 767px) {
    .pc-only {
        display: none !important;
    }

    #btn-mobile-menu {
        display: flex !important;
    }

    /* スプリットマイクコントロール */
    .split-mic-control {
        display: flex;
        background: #f0f2f5;
        border-radius: 30px;
        padding: 3px;
        gap: 2px;
        border: 1px solid #ddd;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
        margin: 0 10px;
    }

    .split-mic-btn {
        border: none;
        background: transparent;
        color: #666;
        padding: 6px 10px;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: 9px;
        min-width: 44px;
    }

    .split-mic-btn i {
        font-size: 14px;
    }

    .split-mic-btn:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #333;
    }

    /* 採譜モード（赤・録音風） */
    .split-mic-btn.mode-pitch.active {
        background: #ffeded;
        color: #ff4444;
    }

    .split-mic-btn.mode-pitch.active i {
        animation: pulse-red 1.5s infinite;
    }

    /* 音声操作モード（青） */
    .split-mic-btn.mode-voice.active {
        background: #eef7ff;
        color: #0088ff;
    }

    @keyframes pulse-red {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.2);
            opacity: 0.7;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .split-mic-label {
        font-weight: bold;
        letter-spacing: -0.5px;
    }

    /* サイドドロワーのスタイル */
    #mobile-drawer {
        display: block;
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100%;
        background: #ffffff;
        z-index: 3100;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: env(safe-area-inset-top);
    }

    #mobile-drawer.open {
        left: 0;
    }

    #mobile-drawer-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 3000;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #mobile-drawer-overlay.active {
        display: block;
        opacity: 1;
    }

    .drawer-header {
        padding: 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .drawer-header h3 {
        margin: 0;
        font-size: 18px;
        color: var(--text-main);
    }

    #btn-close-drawer {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
    }

    .drawer-body {
        padding: 15px 0;
    }

    .drawer-item {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 16px;
        color: var(--text-main);
        cursor: pointer;
        transition: background 0.2s;
    }

    .drawer-item:active {
        background: #f8fafc;
    }

    .drawer-item span {
        color: var(--primary-color);
        font-size: 24px;
    }

    .drawer-sep {
        height: 1px;
        background: rgba(0, 0, 0, 0.05);
        margin: 10px 20px;
    }

    /* --- 縦向き（Portrait）時の設定 --- */
    @media (orientation: portrait) {
        #action-bar {
            width: 100% !important;
            height: 60px !important;
            flex-direction: row !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 2100 !important;
            padding: 0 8px !important;
            justify-content: space-between !important;
            align-items: center !important;
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* 統合された中央グループの表示 */
        #mobile-action-center {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(0, 0, 0, 0.03);
            padding: 4px 10px;
            border-radius: 30px;
        }

        #mobile-track-nav-wrap {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        #mobile-track-badge {
            background: var(--primary-color);
            color: #ffffff;
            font-family: 'Outfit', sans-serif;
            font-weight: 800;
            font-size: 14px;
            padding: 1px 8px;
            border-radius: 4px;
            min-width: 20px;
            text-align: center;
        }

        .nav-arrow {
            background: none;
            border: none;
            color: var(--text-secondary);
            padding: 0;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .nav-arrow span {
            font-size: 20px;
        }

        #mobile-playback-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            border-left: 1px solid rgba(0, 0, 0, 0.1);
            padding-left: 10px;
        }

        .btn-play.mobile-play,
        .btn-stop.mobile-stop {
            color: var(--primary-color);
            background: none;
            border: none;
            padding: 0;
            display: flex;
            align-items: center;
        }

        .btn-stop.mobile-stop {
            color: var(--text-secondary);
        }

        .mobile-play span,
        .mobile-stop span {
            font-size: 26px;
        }

        /* 既存ボタンのコンパクト化 */
        .action-group-left,
        .action-group-right {
            display: flex !important;
            align-items: center;
        }

        .action-btn {
            width: 36px !important;
            height: 36px !important;
            margin: 0 !important;
        }

        .action-btn span {
            font-size: 20px !important;
        }

        #action-bar .spacer {
            display: none !important;
        }

        #editor-app {
            padding-left: 0 !important;
            padding-top: 60px !important;
            display: block !important;
        }

        #main-canvas {
            margin: 0 !important;
            padding: 10px 5px !important;
            width: 100% !important;
            left: 0 !important;
            position: relative !important;
        }

        /* 浮いているツールバーを完全に消去 */
        #floating-toolbar-wrap {
            display: none !important;
        }
    }

    /* --- 横向き（Landscape）時の設定 --- */
    @media (orientation: landscape) {
        #action-bar {
            display: flex !important;
            width: 60px !important;
            height: 100% !important;
            flex-direction: column !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            z-index: 2100 !important;
            padding: 10px 0 !important;
            justify-content: flex-start !important;
            align-items: center !important;
            gap: 10px;
            /* 縦向きと同じ明るい色に変更 */
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            border-right: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* アイコン色の調整（白背景用） */
        #action-bar .action-btn span,
        .nav-arrow span,
        .mobile-stop span {
            color: var(--text-main) !important;
        }

        /* 横向きサイドバー内での機能表示 */
        #mobile-action-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            background: rgba(0, 0, 0, 0.03);
            padding: 8px 4px;
            border-radius: 30px;
        }

        #mobile-track-nav-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        #mobile-playback-wrap {
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-left: none;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            padding-left: 0;
            padding-top: 10px;
        }

        #editor-app {
            padding-left: 60px !important;
            padding-right: 0 !important;
            padding-top: 0 !important;
            display: block !important;
        }

        #main-canvas {
            padding: 10px !important;
            width: calc(100% - 60px) !important;
            left: 0 !important;
            position: relative !important;
        }

        /* 横向き時も浮いているメニューを消す */
        #floating-toolbar-wrap {
            display: none !important;
        }
    }

    #mobile-kunkunshi-keyboard {
        display: none;
    }

    #mobile-kunkunshi-keyboard.active {
        display: block;
    }

    #main-canvas {
        padding-bottom: 280px !important;
    }

    /* スマホでは不要なボタンを隠す */
    #btn-action-midi {
        display: none !important;
    }

    /* タブを隠して設定のみ表示にする */
    .palette-tabs {
        display: none !important;
    }

    /* 特定の設定項目を隠す */
    .switch-container {
        display: none !important;
    }
}

/* パレット表示・非表示切り替え（共通） */
#editor-app.hide-palette #tool-palette {
    display: none !important;
}

#editor-app.hide-palette #main-canvas {
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* スマホ表示時のパレット（表示された場合）の最適化 */
@media (max-width: 767px) {
    #tool-palette {
        position: fixed !important;
        right: 0 !important;
        top: 50px !important;
        /* 上部アクションバーの下から */
        width: 280px !important;
        height: calc(100% - 50px) !important;
        background: #ffffff !important;
        /* グレーに見えないよう白で固定 */
        z-index: 2200 !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
    }

    #tool-palette .palette-content {
        background: #ffffff !important;
        overflow-y: auto;
    }

    #tool-palette .panel {
        background: #ffffff !important;
        /* ここにあった強制表示のスタイルを削除しました */
    }
}

.kbd-handle {
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 2px;
    margin: 0 auto 12px auto;
}

.kbd-container {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
}

.kbd-row {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.kbd-key {
    flex: 1;
    height: 48px;
    border: none;
    background: #ffffff;
    border-radius: 8px;
    font-family: var(--kk-font);
    /* 工工四フォントを適用して下線等を表示 */
    font-size: 20px;
    font-weight: normal;
    color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s active;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.kbd-key:active {
    transform: scale(0.92);
    background: #f1f5f9;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 強調キー（♯, ♭） */
.kbd-key.accent {
    background: #fef3c7;
    color: #d97706;
}

/* 装飾音キー（掛, 打） */
.kbd-key.ornament {
    background: #ecfdf5;
    color: #059669;
    font-size: 16px;
}

/* コントロールキー（移動） */
.kbd-key.ctrl {
    background: #f8fafc;
    color: #64748b;
}

/* スペースキー（進む） */
.kbd-key.space-key {
    flex: 2.5;
    background: var(--primary-color);
    color: #ffffff;
    font-family: var(--ui-font);
    /* テキストなのでUIフォントに戻す */
    font-size: 14px;
}

/* 削除キー */
.kbd-key.delete-key {
    background: #fee2e2;
    color: #dc2626;
}

/* 楽曲保護設定 */
.is-protected {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    cursor: default !important;
}

/* 保護された入力エリアへのポインターイベント制限 */
textarea.is-protected,
input.is-protected,
.lyrics-text-content.is-protected {
    /* pointer-events: none にするとスクロールもできなくなるため auto のまま */
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* ============================
   ちんだみ（チューナー）モーダル
   ============================ */
.tuner-content {
    max-width: 480px;
    padding: 24px !important;
}

.tuner-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    text-align: left;
    /* text-align: center を上書き */
}

.tuner-content .modal-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--text-primary);
}

.tuner-content .modal-header h3 .material-icons-round {
    font-size: 32px;
    font-weight: bold;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tuner-content .close-btn {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0;
    cursor: pointer;
}

.tuner-content .close-btn:hover {
    background: #ff5252;
    color: #fff;
    border-color: #ff5252;
    box-shadow: 0 2px 8px rgba(255, 82, 82, 0.2);
}

.tuner-content .close-btn .material-icons-round {
    font-size: 20px;
    line-height: 1;
    margin: 0;
    display: block;
}

.tuner-settings-info {
    display: flex;
    gap: 30px;
    background: rgba(var(--primary-rgb), 0.1);
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 24px;
    justify-content: center;
    border: 1px solid rgba(var(--primary-rgb), 0.15);
}

.tuner-setting-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tuner-setting-item label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.tuner-setting-item span,
.tuner-select {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 16px;
    font-family: 'Outfit', sans-serif;
    transition: all 0.2s;
}

.tuner-select:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.tuner-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
}

.tuner-visualizer {
    position: relative;
    width: 100%;
    height: 100px;
    background: #000;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#tuner-canvas {
    width: 100%;
    height: 100%;
}

.tuner-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.tuner-meters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.string-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    transition: background 0.3s;
}

.string-card:hover {
    background: rgba(255, 255, 255, 0.07);
}

.string-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.string-names {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.string-main {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Noto Serif JP', serif;
}

.string-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.string-body {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-tuner-ref {
    background: rgba(var(--primary-rgb), 0.1);
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--primary-color);
    transition: all 0.2s ease;
}

.btn-tuner-ref:hover {
    background: var(--primary-color);
    color: white;
}

.btn-tuner-ref .material-icons-round {
    font-size: 15px;
}

.meter-track {
    flex: 1;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 40px;
}

.meter-center {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 2;
}

.meter-pointer {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
    transition: left 0.1s ease-out, background 0.2s;
    z-index: 3;
    border-radius: 1.5px;
}

.string-target-note {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 900;
    font-size: 1rem;
    font-family: 'Noto Serif JP', serif;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
}

.tuner-instructions {
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    padding: 10px 20px;
    text-align: center;
    height: 80px;
    /* 高さを固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.instruction-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.instruction-text.tighten {
    color: #ff5252;
}

.instruction-text.loosen {
    color: #448aff;
}

.instruction-text.perfect {
    color: #4caf50;
}

#btn-voice-cmd.active {
    background: #ff5252 !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.6);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

/* 録音・音声操作ボタンの最終デザイン（停止ボタンとサイズを統一） */
#floating-playback-id .btn-audio-control,
.btn-audio-control {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: #edf2f7 !important;
    border: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    color: #4a5568 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
}

.btn-audio-control .material-icons-round {
    font-size: 18px !important;
}

.btn-audio-control:hover {
    background: #e2e8f0 !important;
    transform: translateY(-1px) !important;
}

/* 三線録音中（赤色） */
#floating-playback-id #btn-record-sanshin.active,
#btn-record-sanshin.active,
.btn-record-sanshin.active {
    background: #ff4444 !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.6) !important;
}

/* 音声操作中（青色） */
#floating-playback-id #btn-voice-command.active,
#btn-voice-command.active,
.btn-voice-cmd-mobile.active {
    background: #0088ff !important;
    color: white !important;
    box-shadow: 0 0 15px rgba(0, 136, 255, 0.5) !important;
}

/* 録音中のパルスアニメーション */
#btn-record-sanshin.active .material-icons-round {
    color: white !important;
    animation: pulse-red 1.5s infinite !important;
}

/* =========================================================
   Countdown Overlay
 ========================================================= */
#countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}

#countdown-number {
    font-family: 'Outfit', sans-serif;
    font-size: 220px;
    font-weight: 900;
    color: #ff8c00;
    text-shadow:
        4px 4px 0 #000,
        -4px -4px 0 #000,
        4px -4px 0 #000,
        -4px 4px 0 #000,
        0 10px 30px rgba(0, 0, 0, 0.5);
    animation: countdown-zoom 1s ease-out infinite;
}

@keyframes countdown-zoom {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    20% {
        transform: scale(1.2);
        opacity: 1;
    }

    80% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ���[�f�B���O�p��]�A�j���[�V���� */
.rotating {
    animation: rotate 1s linear infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Mobile tuner adjustment */
@media (max-width: 600px) {
    .tuner-content {
        padding: 12px !important;
        width: 95vw !important;
        max-width: 400px;
    }

    .tuner-content .modal-header {
        margin-bottom: 10px;
    }

    .tuner-content .modal-header h3 {
        font-size: 1.1rem;
    }

    .tuner-content .modal-header h3 .material-icons-round {
        font-size: 24px;
    }

    .tuner-settings-info {
        padding: 8px;
        margin-bottom: 10px;
        gap: 12px;
        border-radius: 12px;
    }

    .tuner-setting-item label {
        font-size: 0.65rem;
    }

    .tuner-select {
        font-size: 1rem;
        padding: 4px 10px;
        border-radius: 8px;
    }

    .tuner-visualizer {
        height: 60px;
        margin-bottom: 10px;
    }

    .tuner-status {
        font-size: 1.4rem;
    }

    .tuner-meters {
        gap: 6px;
        margin-bottom: 10px;
    }

    .string-card {
        padding: 6px 10px;
        border-radius: 10px;
    }

    .string-header {
        margin-bottom: 4px;
    }

    .string-main {
        font-size: 0.85rem;
    }

    .string-sub {
        font-size: 0.65rem;
    }

    .string-target-note {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }

    .meter-track {
        height: 16px;
    }

    .btn-tuner-ref {
        width: 24px;
        height: 24px;
    }

    .btn-tuner-ref .material-icons-round {
        font-size: 14px;
    }

    .tuner-instructions {
        height: 50px;
        margin-bottom: 0;
        padding: 6px;
        border-radius: 10px;
    }

    .instruction-text {
        font-size: 0.85rem;
    }
}

/* Adjust floating toolbar when palette is visible */
#editor-app:not(.hide-palette) #floating-toolbar-wrap {
    width: calc(100% - 60px - 320px);
}

/* =========================================================
   HUD Notification
   ========================================================= */
.hud-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hud-toast.show {
    opacity: 1;
}

/* --- Chiribichi (列弾) Stylings --- */
.kk-char.chiribichi {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 100% !important;
    width: 100% !important;
    font-size: 20px !important;
    /* 通常24pxなので小さく調整 */
    line-height: 0.9 !important;
    position: relative !important;
    transform: none !important;
    /* セルの真ん中に absolute 配置されるのを打ち消す */
    top: -7px !important;
    left: 0 !important;
}

.kk-char.chiribichi .kk-char-inner {
    font-family: var(--kk-font);
    font-weight: 600;
    display: block;
    pointer-events: none;
    /* ★文字部分へのクリックをすり抜けさせ、親要素に直接イベントを届ける */
}

.chiribichi-line {
    position: absolute;
    right: 3px;
    /* マス内の右側に配置 */
    top: 0;
    width: 1px;
    height: 36px;
    background-color: #e53e3e;
    /* 赤い線 */
    pointer-events: none;
}

/* --- Osaikudashi (抑下し) Stylings --- */
.osaikudashi-line {
    position: absolute;
    left: 3px;
    /* マスの左側に配置（ユーザー要望通り左端内側） */
    top: 10%;
    /* マスの中心から開始 */
    width: 1px;
    height: 45px;
    /* 下のマスに少しはみ出して届く高さ */
    background-color: #e53e3e;
    /* 赤い縦線 */
    pointer-events: none;
    z-index: 5;
}

/* =========================================================
   リワード広告視聴モーダルの閉じるボタンの修正と美化
   ========================================================= */
#modal-reward-ad .modal-content {
    position: relative;
    /* ✕ボタンを絶対配置するための基準点 */
}

#modal-reward-ad .modal-header {
    text-align: center;
    margin-bottom: 20px;
    padding-right: 40px;
    /* ✕ボタンとタイトルが重なるのを防ぐ */
    padding-left: 40px;
}

#btn-close-reward-ad {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    color: var(--text-secondary) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

#btn-close-reward-ad:hover {
    background: #ff5252 !important;
    color: #fff !important;
    border-color: #ff5252 !important;
    box-shadow: 0 2px 8px rgba(255, 82, 82, 0.2) !important;
}