:root {
    --accent: #007AFF; --bg: #F2F2F7; --card: #FFFFFF;
    --border: #D1D1D6; --text: #1C1C1E; --slot-w: 160px;
    --primary: #34C759; --magic: #AF52DE;
}

body {
    /* background: var(--bg); */
    background-image:
    repeating-linear-gradient(90deg, #ececec, #ececec 4px, transparent 1px, transparent 32px),
    repeating-linear-gradient(0deg, #ececec, #ececec 4px, #d8d8d8f8 1px, #d8d8d8f8 32px);
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ツールバー */
.toolbar {
    margin: 0px;
    z-index: 20;
    /* background: white; */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); */
    box-shadow:
            0px 3px 10px 0px #274a9066;
            /* -2px -2px 10px 0px #fdfeff, */
            /* inset 2px 2px 1px #feffdf, */
            /* inset -2px -2px 1px #adadad; */
}

/* ボタン内のアイコン設定 */
.btn-icon {
    width: 1.2em;   /* テキストの大きさに合わせる */
    height: 1.2em;
    object-fit: contain;
    vertical-align: middle; /* 上下中央揃え */
    margin-right: 6px;      /* 画像と文字の間の隙間 */
    image-rendering: pixelated;
}

/* ボタン自体のレイアウト調整（既存のbutton設定に追記または修正） */
button, .btn-export {
    display: flex;
    align-items: center;    /* 中の要素を上下中央に */
    justify-content: center;
    padding: 8px 16px;
    /* ...既存のスタイル... */
}

.group, .group-save, .bpm_group {
    display: flex;
    gap: 12px;
    align-items: center;
    height: auto;
    justify-content: flex-end;
    margin: 0 10px;
}

.bpm_group {
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 10px;
    width: 90%;
    margin-bottom: 5px;
    text-align: right;
}

/* 譜面データエリア全体の配置 */
.data-controls {
    display: flex;
    flex-direction: column; /* 縦に並べる（ラベルが上、ボタンが下） */
    align-items: center;    /* 中央揃え（左寄せなら flex-start） */
    gap: 5px;               /* ラベルとボタンの間の隙間 */
}

/* ボタン2つを横並びにする */
.button-group {
    display: flex;
    flex-direction: row;    /* 横に並べる */
    gap: 10px;              /* ボタン同士の隙間 */
}

/* ボタンの見た目を整える（任意） */
.button-group button {
    padding: 5px 15px;
    cursor: pointer;
}

.bpmtag {
    font-size: 0.8em;
}

.group p {
    font-size: 0.8em;
}

.auto-gen-container {
    border-radius: 40px;
    border: 3px solid var(--border);
    padding: 5px;
    flex-direction: row;
    display: flex;
    gap: 20px;
    justify-content: center;
    /* display: flex;Zz */
    /* align-items: center; */
    align-items: center; /* これで上下の中央を揃える */
}

.check-group {
    display: flex; flex-direction:
    column; gap: 2px;
    font-size: 0.7em;
    font-weight: bold;
    color: #666;
    padding: 0px 10px 0px 0px;
}

/* ボタンサイズ：大きく使いやすく */
button, .action-btn {
    padding: 8px 16px;
    font-size: 0.8em;
    /* height: 38px; */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    border-radius: 40px; border: 2px solid var(--border);
    background: white; cursor: pointer; transition: 0.2s;
}

button:hover, .action-btn:hover {
    transform: scale(1.1);
}

button:active { transform: scale(0.95); }
.btn-primary, .btn-export {
    background: var(--primary);
    color: white;
    border:none;
    font-weight:bold;
    /* width: 100px; */
    box-shadow:
    6px 6px 10px 0px #274a9066,
    -2px -2px 10px 0px #fdfeff,
    inset 2px 2px 1px #e3ffdf,
    inset -2px 2px 1px #9ebbad,
    inset 2px -2px 1px #9ebbb7,
    inset -2px -2px 1px #adadad;
}

.btn-magic {
    background: var(--magic);
    color: white; border: none;
    /* margin: 5px; */
    box-shadow:
    6px 6px 10px 0px #274a9066,
    -2px -2px 10px 0px #fdfeff,
    inset 2px 2px 1px #feffdf,
    inset -2px 2px 1px #babb9e,
    inset 2px -2px 1px #babb9e,
    inset -2px -2px 1px #adadad;
}

.bpmgroup {
    margin-bottom: 10px;
    border-radius: 40px;
    border: 3px solid var(--border);
    padding: 5px 15px; /* 上下を少し詰め、左右に余裕を持たせる */
    display: flex;     /* flexboxを有効化 */
    flex-direction: row;
    align-items: center; /* 垂直方向（上下）を中央揃えにする */
    justify-content: center;
    gap: 10px;         /* 要素間の隙間を調整 */
    height: 45px;      /* 高さを明示的に指定すると安定します */
}

/* 132行目付近：bpmtag の修正 */
.bpmtag {
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1;    /* 行の高さをリセットしてズレを防止 */
    margin: 0;         /* 余計なマージンを削除 */
    display: flex;
    align-items: center; /* テキスト自体の垂直位置を安定させる */
}

/* ついでにスライダーと数値も調整 */
#bpmSlider {
    margin: 0;         /* スライダー特有の外余白を消す */
}

#bpmValue {
    font-size: 0.9em;
    font-weight: bold;
    min-width: 30px;   /* 数値が変わってもガタつかないようにする */
}

/* 楽器パネル */
.part-unit {
    background: #eeeeee;
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 12px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    box-shadow:
    6px 6px 10px 0px #274a9066,
    -2px -2px 10px 0px #fffffd,
    inset 2px 2px 1px #e8dfff,
    inset -2px 2px 1px #a69ebb,
    inset 2px -2px 1px #ad9ebb,
    inset -2px -2px 1px #adadad;
}
.part-unit.active {
    transform: scale(1.1);
    /* border-color: var(--accent); */
    background: #F8FAFF;
    box-shadow:
    3px 3px 10px 0px #274a9066,
    -2px -2px 10px 0px #fffffd,
    inset 2px 2px 1px #fffddf,
    inset -1px 1px 1px #a69ebb,
    inset 1px -1px 1px #ad9ebb,
    inset -2px -2px 1px #adadad;
    border: none;

}

/* Mute/Soloボタンを大きく */
.ms-btns { display: flex; gap: 6px; }
.ms-btn {
    min-width: 50px; height: 30px; font-size: 10px; font-weight: 800;
    padding: 0; border-radius: 6px; border: 1px solid #DDD;
}
.ms-btn.on { background: #FF3B30; color: white; border-color: #FF3B30; }

/* ロード/リセットボタン */
.unit-actions { display: flex; gap: 8px; margin-top: 10px; }
.action-btn { flex: 1; height: 32px; font-size: 11px; background: #F2F2F7; }

.vol-control { margin: 8px 0; display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: bold; }
.vol-control input { flex: 1; height: 6px; cursor: pointer; }

/* コードバッジ */
.chord-badge {
    background: white;
    color: #222;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 900;
    font-size: 15px;
    /* box-shadow: 0 4px 6px rgba(0,0,0,0.1); */
    /* border: 1px solid rgba(0,0,0,0.1); */
}

/* その他レイアウト */
.main-container { display: flex; flex: 1; overflow: hidden; }
.synth-sidebar {
    width: 280px;
    padding: 15px;
    border-right: 1px solid var(--border);
    background: #FFF;
    overflow-y: auto; /* 項目が増えてもここでスクロールできる */
    height: 100%;
    display: flex;
    flex-direction: column;
}
.editor-wrapper {
    flex: 1;
    background: #fff;
display: flex;
    flex-direction: column; /* ピアノロールとスロットを縦に並べる */
    position: relative;
    overflow: hidden;
    height: 100%; /* 親要素の高さに合わせる */
}
.scroll-viewport { flex: 1; overflow: auto; }


/* 常に下部に表示されるスロットエリア */
.fixed-footer-editor {
    background: #ececec;
    border: 1px solid var(--border);
    overflow: hidden; /* 親はスクロールバーを出さない */
}

.sync-container {
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content; /* 内容（キャンバス）に合わせて広がるように */
}

.slot-row-wrapper {
    overflow-x: hidden; /* JSでピアノロールのスクロールと同期させる */
}
.slot-row {
    display: flex;
    margin-left: 60px; /* ピアノロールのラベル幅(LABEL_W)と合わせる */
    height: 60px;
    width: fit-content;
}
.slot {
    width: calc(var(--slot-w) - 1px);
    outline: 0px solid var(--border);
    /* outline-offset: -5px; */
    /* border: 5px solid var(--border); */
    /* border-radius: 10px; */
    /* padding: 10px; */
    border-radius: 0px 0px 20px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.drum-grid {
    display: grid;
    grid-template-columns:
    repeat(8, 1fr);
    gap: 6px;
    margin-top: 10px; }
.drum-cell { aspect-ratio: 1; background: #EEE; border-radius: 6px; cursor: pointer; }
.drum-cell.active {
    background: var(--magic);
    /* box-shadow: 0 0 8px var(--magic); */
}

.bottom-panel {
    height: 300px; /* 五度圏が収まる高さ */
    background: #fff;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center; /* 中央に配置 */
    padding: 0 10;
}
.chord-item { position: absolute; width: 48px; height: 48px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,0.2); }


/* コードエンジンのコンテナ修正 */
.chord-engine {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    flex-shrink: 0; /* サイズを固定 */
    justify-content: center;
    align-items: center;
}

/* 五度圏の基準点（ここが重要） */
.circle-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
    background: radial-gradient(circle, #ffffff 30%, #f9f9f9 100%);
    border-radius: 50%;
    border: 1px solid #eee;
}

/* 各コードボタン（五度圏のアイテム） */
.circle-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
    z-index: 10;
}
.circle-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 11;
}
.chord-item:active { transform: translate(-50%, -50%) scale(0.95); }

/* style.css の末尾などに追加 */
.diatonic-card:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

/* 音色設定パネルの調整 */
.part-unit {
    background: #FFFFFF;
    padding: 10px 14px; /* 余白を削減 */
    border-radius: 12px;
    margin-bottom: 8px; /* 間隔を詰め */
    border: 2px solid #F0F0F0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.part-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* パートユニット内の横並び調整 */
.part-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.type-sel { flex: 1; margin-right: 5px; height: 28px; font-size: 11px; }
.small-btn, .delMeasureBtn, .addMeasureBtn {
    padding: 2px 8px;
    min-width: 50px;
    height: 30px;
    margin: 10px 0;
    background-color: #ededed;

}

/* --- 300行目付近から最後までの修正案 --- */

/* --- 下部エリア：完全に独立した横並びレイアウト --- */
.bottom-panel {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important; /* 縦に伸ばさない */
    padding: 20px;
    background: white;
    border-top: 1px solid var(--border);
    gap: 40px; /* サークルとパネルの間の余白 */
    height: 340px !important; /* 高さを厳格に固定 */
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* 左側：サークルエリアの固定 */
.chord-engine {
    width: 300px !important;
    height: 300px !important;
    flex-shrink: 0 !important; /* 絶対に縮ませない */
    position: relative;
    display: block;
}

/* サークル背景：正円を死守 */
.circle-container {
    position: relative !important;
    width: 280px !important;
    height: 280px !important; /* ここを固定しないと楕円になる */
    margin: 0;
    background: radial-gradient(circle, #ffffff 30%, #f9f9f9 100%);
    border-radius: 50% !important;
    border: 1px solid #eee;
    overflow: visible;
}

/* 右側：詳細パネルの固定と重なり防止 */
.chord-info-panel {
    flex: 0 0 450px !important; /* 幅を450pxに固定（伸ばさない・縮ませない） */
    height: 300px !important;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    overflow-y: auto;
    position: relative;
    margin: 0 !important;
}

/* 各コードボタン（絶対配置） */
.circle-item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    position: absolute !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    z-index: 10;
}

/* ドラッグ可能な要素のホバー時 */
.circle-item:hover, .diatonic-card:hover {
    cursor: grab;
    filter: brightness(1.1);
}

.circle-item:active, .diatonic-card:active {
    cursor: grabbing;
}

/* style.css の 130行目付近 */
.slot {
    width: calc(var(--slot-w) - 1px);
    border-radius: 0px 0px 20px 20px;
    display: flex;
    /* flex-direction: column; を削除または row に変更 */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 数字とコード名の間の隙間 */
}

/* 追加：中の文字のスタイルを微調整（必要に応じて） */
.slotUI {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    color: #666;
    font-size: 14px;
}

.slotUI span {
    width: 20px;
    height: 20px;
    background-color: #2f2f2fb1;
    color: #eaeaea;
    margin: auto;
    border-radius: 20px;
    text-align: center;

  box-sizing: border-box;
}



.chord-info-panel {
    padding: 20px;
}


/* style.css に追加または修正 */

/* チェックボックス本体は隠す */
.toggle-button input {
    display: none;
}

/* style.css に追加 */

/* コンテナのレイアウト */
.toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px;
}

.toggle-text {
    font-size: 12px;
    font-weight: bold;
    color: var(--text);
}

/* スイッチ全体のサイズ */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

/* 本体のチェックボックスは隠す */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* スライダーの背景 */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 20px;
}

/* スライダーのつまみ部分 */
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ON状態の背景色 */
.switch input:checked + .slider {
    background-color: var(--accent); /* 青色 */
}

/* ON状態のつまみの位置（右に移動） */
.switch input:checked + .slider:before {
    transform: translateX(14px);
}