/* ===============================================
   フォント読み込み
   =============================================== */
@font-face {
    font-family: 'Bravura';
    src: url("../fonts/Bravura.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

.music-font {
    font-family: 'Bravura', sans-serif;
    font-size: 36px;
}


body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; background: #d8d8d8; }

.app-container {
    display: flex; 
    height: 100vh; 
    width: 100%; 
    position: relative; 
    overflow-x: hidden;
}

/* ハンバーガーボタン */
.menu-toggle {
  position: fixed; top: 15px; left: 15px; z-index: 1002;
  font-size: 24px; padding: 5px 10px; cursor: pointer;
  background: #333; color: white; border: none; border-radius: 4px;
}

/* デフォルト：モバイルサイズ (330px) */
.sidebar {
    position: fixed; 
    top: 0; 
    left: -330px; /* 幅に合わせて左へ隠す */
    width: 330px; 
    height: 100%;
    background: white; 
    z-index: 1001; 
    transition: left 0.3s ease;
    padding: 60px 20px 20px; 
    box-sizing: border-box;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* PCサイズ (768px以上) で400pxに拡大 */
@media (min-width: 768px) {
    .sidebar {
        width: 400px;
        left: -400px;
    }
}
.sidebar.open { left: 0; }

/* 譜面エリアの挙動 */
.main-score-area {
    flex: 1; 
    padding: 20px;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    transition: margin-left 0.3s ease;
}
/* --- 押し出し判定 --- */
/* モバイルで開いたときは330px分押し出す */
@media (min-width: 1172px) { /* 330px + 842px = 1172px以上 */
    .app-container:has(.sidebar.open) .main-score-area { 
        margin-left: 330px; 
    }
}

/* PCサイズ(768px以上)でかつ、400px + 842px 以上あるときは400px押し出す */
@media (min-width: 1242px) { /* 400px + 842px = 1242px以上 */
    .app-container:has(.sidebar.open) .main-score-area { 
        margin-left: 400px; 
    }
}

/* タブレット縦向き等の対応：ハンバーガーボタンが邪魔にならないように */
@media screen and (max-width: 768px) {
    .menu-toggle {
        /* 必要に応じて位置やサイズを調整 */
        padding: 8px 12px;
        font-size: 18px;
    }
    .sidebar { width: 80%; left: -80%; } /* スマホなら画面幅いっぱい */
}

#canvas-container { width: 100%; max-width: 842px; }
#menfu-textarea { width: 100%; height: 40vh; overflow-y: auto; margin-bottom: 20px; box-sizing: border-box; }
h2 { margin-top: 0; text-align: center; font-size: 1.5rem; } 
.menfu-chord { font-family: "Bravura", 'Times New Roman', sans-serif; font-size: 26px; font-weight: bold; }

/* PDF出力（または印刷）用スタイル */
@media print {
    body * { visibility: hidden; }
    #canvas-container, #canvas-container * { visibility: visible; }
    #canvas-container { position: absolute; left: 0; top: 0; width: 100%; }
    .menfu-page { page-break-after: always; break-after: page; }
}

#transpose-container {
    margin: 20px 0;
    width: 100%;
}

.transpose-row {
    display: flex;
    justify-content: space-between; /* 均等配置 */
    margin-bottom: 5px;
    gap: 2px; /* ボタン同士の隙間 */
}

.transpose-row button {
    flex: 1; /* 全てのボタンが均等な幅になる */
    padding: 10px 2px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #e0e0e0;
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
}

/* スマホ等で少し小さくする場合 */
@media screen and (max-width: 600px) {
    .transpose-row button {
        padding: 8px 1px;
        font-size: 12px;
    }
}

/* キーチェンジボタンのベーススタイル */
.key-button {
    background-color: #f0f0f0; /* 通常の色 */
    border: 1px solid #ccc;
    padding: 5px 10px;
    cursor: pointer;
}

/* アクティブな時のスタイル（水色） */
.key-button.active {
    background-color: #add8e6; /* 水色（LightBlue） */
    border-color: #87ceeb;      /* 少し濃い水色で枠線を強調 */
    font-weight: bold;         /* 必要であれば強調 */
}

/* サーバーファイル選択エリア */
.score-loader {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.score-loader select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
}

.score-loader button {
    padding: 6px 12px;
    background: #555;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}

.score-loader button:hover {
    background: #333;
}