.mikan-main-card {
    width: 100%;
    max-width: 100%;
    /* ★最大横幅を100%に広げ、右側の余白を埋めます */
    background: #fffaf0;
    padding: 12px 16px;
    border-radius: 16px;
    border: 2px dashed #f39800;
    box-shadow: 0 4px 15px rgba(243, 152, 0, 0.15);
    box-sizing: border-box;
    overflow: hidden;
    /* はみ出し防止 */
}

/* 音源Aボタンの上の破線を消すため border-bottom を除去 */
.mikan-section {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: none;
}

.mikan-title {
    margin: 0 0 4px 0;
    color: #f39800;
    font-size: 1.05rem;
    font-weight: bold;
}

.mikan-subtext {
    font-size: 0.75rem;
    color: #777;
    margin: 0 0 6px 0;
}

/* --- トラック選択（中央寄せ配置） --- */
.mikan-track-list {
    display: flex;
    gap: 8px;
    justify-content: center;
    /* ★ボタン群を離れすぎず中央に寄せます */
    margin-top: 15px;
}

.mikan-track-row {
    flex: 0 1 auto;
    /* ★横に広がりすぎず、中身の文字幅に合わせます */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    /* ★中央に寄せた時に綺麗に見えるよう左右余白を広げました */
    border-radius: 20px;
    border: 2px solid #f39800;
    background: #ffffff;
    color: #f39800;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.mikan-track-row:hover {
    background: #fffaf0;
}

.mikan-track-row.active {
    background: #f39800;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(243, 152, 0, 0.25);
}

.mikan-radio {
    display: none;
}

.mikan-track-name {
    font-weight: bold;
    font-size: 0.85em;
    white-space: nowrap;
}

/* --- スライダー類 --- */
.mikan-slider-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
}

.mikan-range {
    flex: 1;
    min-width: 60px;
    height: 12px;
    cursor: pointer;
    accent-color: #f39800;
}

.mikan-value-text {
    font-size: 0.8em;
    font-weight: bold;
    color: #f39800;
    min-width: 50px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* --- コントロールボタン --- */
.mikan-player-controls {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    justify-content: flex-end;
    /* 右寄せ */
    flex-shrink: 0;
}

.mikan-control-btn {
    flex: none;
    padding: 4px 10px;
    font-size: 0.75em;
    font-weight: bold;
    border-radius: 20px;
    border: 2px solid #f39800;
    background: #ffffff;
    color: #f39800;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mikan-control-btn:hover:not(:disabled) {
    background: #f39800;
    color: #ffffff;
}

.mikan-control-btn:disabled {
    opacity: 0.4;
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
}

/* --- ステータス・設定項目 --- */
.mikan-status-box {
    margin-top: 6px;
    padding: 5px 8px;
    background: #fffaf0;
    border-radius: 8px;
    border: 1px solid #ffe0b2;
    font-size: 0.8em;
    color: #e67e22;
    font-weight: bold;
    text-align: center;
}

.mikan-control-group {
    margin-bottom: 6px;
}

.mikan-setting-label {
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
    font-size: 0.8em;
    color: #555;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ffe0b2;
}

.mikan-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.8em;
    color: #555;
}

.mikan-checkbox {
    accent-color: #f39800;
    width: 15px;
    height: 15px;
}

/* --- ダウンロードボタン --- */
.mikan-dl-button {
    width: 100%;
    padding: 8px;
    background: #f39800;
    color: #ffffff;
    border: none;
    border-radius: 25px;
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(243, 152, 0, 0.3);
    margin-top: 4px;
}

.mikan-dl-button:hover:not(:disabled) {
    background: #e67e22;
}

.mikan-dl-button:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}

.mikan-status-text {
    margin-top: 4px;
    font-size: 0.75em;
    color: #888;
    text-align: center;
}

.disabled-text {
    opacity: 0.4;
}

/* --- スマホ向け：横幅に合わせた最適化 --- */
@media (max-width: 480px) {
    .mikan-main-card {
        padding: 12px 10px;
        /* 画面が狭いので左右の余白を少し削る */
    }

    .mikan-track-list {
        flex-wrap: wrap;
        /* スマホ画面でボタンがギチギチの時は2行に折り返す */
        gap: 6px;
        justify-content: center;
        /* スマホで折り返した際も中央寄せにする */
    }

    .mikan-track-row {
        flex: 1 1 calc(50% - 4px);
        /* スマホでは、ボタンを綺麗に50%（2列）でフィットさせます */
        padding: 6px 4px;
    }

    .mikan-track-name {
        white-space: normal;
        /* 文字が長い場合は自動で改行 */
    }

    .mikan-control-btn {
        padding: 4px 8px;
        font-size: 0.7em;
    }
}

/* --- 超小画面（幅275px以下）のレイアウト調整 --- */
@media (max-width: 275px) {
    .mikan-value-text {
        display: none;
    }

    .mikan-control-btn {
        padding: 2px 6px;
        font-size: 0.65em;
        border-width: 1px;
    }
}