/* 07-parts.css — 追加先を選ぶ・リスト・検索欄・メンバー選び・動画一覧
 *
 * style.css を分けたもの。元は1本の7,600行だった。
 * ⚠️ 読み込む順番を変えないこと。番号の順に重ねることで、
 *    分ける前とまったく同じ見た目になる。あとの番号が勝つ。
 * ⚠️ 新しい指定をここの先頭に足さないこと。
 *    打ち消し合っている指定があるので、置き場所で結果が変わる。
 */
/* ── 再生の設定 ── */
.jb-settings-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.jb-settings-note {
    font-size: 0.72rem;
    opacity: 0.7;
    line-height: 1.6;
    margin: 8px 0;
}

.jb-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.82rem;
}

.jb-settings-row .jb-select { width: auto; min-width: 92px; }

.jb-settings-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jb-settings-range input[type="range"] { width: 120px; accent-color: var(--main-accent); }
.jb-settings-range output { font-size: 0.76rem; opacity: 0.8; min-width: 3.4em; text-align: right; }

/* ── 追加先を選ぶ ── */
.jb-add-sheet {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.jb-add-card {
    width: min(440px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: 14px 14px 0 0;
}

.jb-add-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.jb-add-head strong { font-size: 0.92rem; line-height: 1.5; }

.jb-add-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.6;
    padding: 4px;
}

.jb-add-primary {
    display: block;
    width: 100%;
    padding: 13px;
    margin-bottom: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bg-color);
    background: var(--main-accent);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}

.jb-add-secondary {
    display: block;
    width: 100%;
    padding: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-color);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
}

.jb-add-label {
    font-size: 0.72rem;
    opacity: 0.65;
    margin: 16px 0 6px;
}

.jb-add-pl {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    margin-bottom: 6px;
    font-family: inherit;
    font-size: 0.84rem;
    text-align: left;
    color: var(--text-color);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
}

.jb-add-pl:disabled { opacity: 0.5; cursor: default; }
.jb-add-pl span:last-child { font-size: 0.72rem; opacity: 0.65; flex: 0 0 auto; }

.jb-add-new {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.jb-add-new input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 12px;
    font-family: inherit;
    font-size: 0.84rem;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.jb-add-new button {
    flex: 0 0 auto;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--main-accent);
    background: none;
    border: 1px solid color-mix(in srgb, var(--main-accent) 45%, transparent);
    border-radius: 999px;
    cursor: pointer;
}

/* 検索欄と絞り込みだけを貼り付ける。
   メンバーの札まで貼り付けると画面の3割が埋まってしまうので、これは一緒に流す。 */
.jb-filters { position: static; padding: 0; background: none; border-bottom: 0; }

.jb-filters-stick {
    position: sticky;
    top: calc(var(--app-header-h, 0px) - 1px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0 9px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.jb-count { position: static; }

/* ⚠️ 貼り付ける要素は、親の箱の中でしか動けない。
   .jb-filters を普通の箱のままにすると、その高さぶんしか貼り付かず、
   すぐ一緒に流れてしまう。囲いを消して、一覧と同じ流れに置く。 */
.jb-filters { display: contents; }
.jb-filters > #jb-members { margin-bottom: 2px; }

/* ⚠️ 幅を測るために、流していないときも inline-block にしておくこと。
   ただの inline のままだと幅が 0 として返り、長さの判定ができない。 */
.jb-mini-title > .jb-marquee-inner { display: inline-block; }

/* ── リストの切り替え（お気に入り / プレイリスト） ── */
.sh-list-tabs {
    display: flex;
    gap: 4px;
    margin: 18px 0 4px;
    border-bottom: 1px solid var(--border-color);
}

.sh-list-tab {
    flex: 1 1 0;
    padding: 11px 6px 10px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-color);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    opacity: 0.55;
}

.sh-list-tab.is-on {
    color: var(--main-accent);
    border-bottom-color: var(--main-accent);
    opacity: 1;
}

.sh-list-tab-num {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 5px;
    margin-left: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.sh-list-tab-num:empty { display: none; }

/* ⚠️ .jb-filters-stick は縦並びなので、PC用の flex-basis がそのまま「高さ」になる。
   検索欄が260px以上の高さに伸びていたのはこれが原因。
   PCでは横並びに戻して、指定した幅として効かせる。 */
@media (min-width: 769px) {
    .jb-filters-stick {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
    }

    .jb-filters-stick > .jb-input { flex: 2 1 260px; }
    .jb-filters-stick > .jb-filter-row { flex: 1 1 260px; }
}

/* ------------------------------------------------------------------
   入力欄をタップしても画面が拡大しないようにする
   ⚠️ iPhoneのSafariは、文字が16px未満の入力欄にカーソルを入れると
      勝手に画面を拡大する（そして元の倍率には戻らない）。
      検索・バックアップの復元・リスト名など、文字を入れる場所は必ず16px以上にする。
      viewport で拡大そのものを禁じる手もあるが、
      文字を大きくして読みたい人の妨げになるので採らない。
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

    input[type="text"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------------
   テーマの切り替えは、PCでもアイコンだけにする
   DARK / LIGHT の文字を2つ並べると、ヘッダーの中でいちばん目立ってしまう。
   月＝ダーク、太陽＝ライトで、いまの状態だけを小さく出す。
   ⚠️ 押す相手は要素全体（#theme-toggle-btn）なので、
      出すラベルを1つに減らしても切り替えは効く。
   ------------------------------------------------------------------ */
.app-header .theme-toggle {
    padding: 0;
    background: transparent;
    border-color: var(--border-color);
    opacity: 0.75;
    transform: none;
}

.app-header .theme-toggle:hover { opacity: 1; }

.app-header .theme-toggle .theme-label { display: none; }

.app-header .theme-toggle .theme-label.active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 32px;
    padding: 0;
    color: var(--text-color);
    background: transparent;
    border-radius: 999px;
}

.app-header .theme-icon { display: block; }
.app-header .theme-text { display: none; }

/* ⚠️ 要素名だけの指定ではクラス付きの指定に負ける（.jb-select などは 0.95rem のまま）。
   拡大を防ぐには実際に16px以上になっている必要があるので、クラスも並べて指定する。 */
@media (max-width: 768px) {

    .jb-input,
    .jb-select,
    .search-box,
    .hero-search-box,
    .stats-select,
    .year-filter-select,
    .jb-add-new input,
    #modal-textarea {
        font-size: 16px;
    }
}

/* ⚠️ 取りこぼしを防ぐための念押し。
   個別に並べても、あとから足した入力欄で16px未満に戻ると拡大が再発する。
   拡大の原因は「16px未満であること」そのものなので、ここは強制でよい。
   （つまみ・チェックはカーソルが入らないので対象外） */
@media (max-width: 768px) {

    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════
   PCの画面づくり
   下端の細い帯ではなく、ヘッダーに並べたタブで行き来する。
   本文も画面幅を活かして広げる。
   （狭い画面はこれまでどおり。下のタブバーのまま）
   ══════════════════════════════════════════ */
@media (min-width: 1024px) {
    #app-shell {
        max-width: 1280px;
        padding: 0 28px;
        /* ヘッダーにタブを入れるので、下に空けるのはプレイヤーのぶんだけ */
        padding-bottom: var(--jb-player-h, 0px);
    }

    .app-header { padding: 10px 0; gap: 20px; }
    .app-brand { flex: 0 0 auto; }
    .app-brand-name { font-size: 1.12rem; }

    /* ── ヘッダーに並べたタブ ── */
    .app-tabs.is-in-header {
        position: static;
        z-index: auto;
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: 4px;
        padding: 0;
        margin-left: auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-top: 0;
    }

    .app-tabs.is-in-header::before { display: none; }

    .app-tabs.is-in-header .app-tab {
        flex: 0 0 auto;
        max-width: none;
        flex-direction: row;
        gap: 8px;
        padding: 9px 15px;
        border-radius: 999px;
        font-size: 0.84rem;
    }

    .app-tabs.is-in-header .app-tab svg { width: 18px; height: 18px; }

    .app-tabs.is-in-header .app-tab.is-on {
        color: var(--bg-color);
        background: var(--main-accent);
    }

    /* 下端の帯のために付けていた印は消す */
    .app-tabs.is-in-header .app-tab.is-on::before,
    .app-tabs.is-in-header .app-tab.is-on::after { display: none; }

    /* 再生画面を開いていてもヘッダーは見えているので、タブも残す */
    body.jb-covering .app-tabs.is-in-header { display: flex; }

    /* 最小化したプレイヤーは画面のいちばん下に置く */
    .jb-player.is-mini { bottom: 0; }

    /* ── 本文を広げる ── */
    .jb-panel { max-width: 1080px; }
    .app-intro { font-size: 0.92rem; }
}

/* ⚠️ ヘッダーの左右余白は #app-shell の幅に合わせること。
   980px を前提にした計算のままだと、本文を広げたときにサイト名が画面の端で切れる。 */
@media (min-width: 1024px) {
    .app-header {
        padding-left: max(28px, calc(50vw - 640px + 28px));
        padding-right: max(28px, calc(50vw - 640px + 28px));
    }
}

/* ------------------------------------------------------------------
   フッター
   案内の並び → 立場の説明 → 運営 → 著作表示、の順に上から置く。
   どれも中央に寄せ、文字は小さく落ち着かせる。
   ------------------------------------------------------------------ */
.app-footer {
    text-align: center;
    padding: 26px 0 34px;
    border-top: 1px solid var(--border-color);
}

.app-foot-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
    margin-bottom: 18px;
}

.app-foot-nav a {
    padding: 3px 2px;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.8;
    border-bottom: 1px solid transparent;
}

.app-foot-nav a:hover {
    opacity: 1;
    color: var(--main-accent);
    border-bottom-color: var(--main-accent);
}

.app-foot-note {
    font-size: 0.72rem;
    line-height: 2;
    letter-spacing: 0.06em;
    opacity: 0.65;
}

.app-foot-owner {
    margin-top: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

.app-foot-owner a {
    color: var(--main-accent);
    text-decoration: none;
}

.app-foot-owner a:hover { text-decoration: underline; }

.app-foot-copy {
    margin-top: 14px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    opacity: 0.5;
}

@media (max-width: 480px) {
    .app-foot-nav { gap: 8px 18px; }
    .app-foot-note { line-height: 1.9; }
}

/* ── 検索欄と、消すボタン ── */
.jb-search-wrap {
    position: relative;
    display: block;
}

.jb-search-wrap .jb-input { width: 100%; padding-right: 40px; }

/* 端末が出す×は二重になるので消す */
.jb-search-wrap .jb-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.jb-search-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--text-color);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.55;
}

.jb-search-clear:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.jb-search-clear[hidden] { display: none; }

/* 見つからなかったときの案内 */
.jb-count.is-empty {
    padding: 18px 0 6px;
    text-align: center;
    opacity: 0.7;
}

/* ── 0件のときの「もしかして」 ──
   ⚠️ 一覧の行と同じ見た目にしないこと。
      当たった曲と見分けがつかないと、違う曲を本物だと思って押す。
      枠で囲い、見出しを添えて「まだ探している途中」だと分かるようにする。 */
.jb-suggest {
    margin: 0 0 16px;
    padding: 12px 14px 14px;
    background: color-mix(in srgb, var(--main-accent) 5%, var(--card-bg));
    border: 1px dashed color-mix(in srgb, var(--main-accent) 38%, transparent);
    border-radius: 10px;
}

.jb-suggest[hidden] { display: none; }

.jb-suggest-label {
    margin: 0 0 9px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--main-accent) 75%, var(--text-color));
}

.jb-suggest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.jb-suggest-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 6px 13px 6px 8px;
    font-family: inherit;
    font-size: 0.79rem;
    text-align: left;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--main-accent) 40%, var(--border-color));
    border-radius: 999px;
    cursor: pointer;
}

.jb-suggest-chip:hover {
    color: var(--main-accent);
    border-color: var(--main-accent);
    background: color-mix(in srgb, var(--main-accent) 10%, var(--card-bg));
}

/* どの欄に当たったのか（曲名／原曲／歌唱／枠名）を札の中に添える */
.jb-suggest-field {
    flex: 0 0 auto;
    padding: 2px 7px;
    font-size: 0.66rem;
    color: var(--card-bg);
    background: color-mix(in srgb, var(--main-accent) 70%, var(--text-color));
    border-radius: 999px;
}

.jb-suggest-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ⚠️ PCの幅指定は、検索欄そのものではなく囲いに掛けること。
   直接の子が .jb-search-wrap に変わったので、元の指定では効かない。 */
@media (min-width: 769px) {
    .jb-filters-stick > .jb-search-wrap { flex: 2 1 260px; }
}

/* ⚠️ .cyber-button の display が UA の [hidden] を上書きしてしまう。
   0件のときに「もっと見る」が残って見えていた。 */
.cyber-button[hidden] { display: none !important; }

/* ── 再生画面を閉じる行 ──
   矢印だけだと的が小さいので、その行ぜんぶを押せるようにする。 */
.jb-sheet-head {
    cursor: pointer;
    align-items: center;
}

/* 帯そのものを押せる場所にしている（見た目の飾りは置かない） */
/* 位置の基準 */
.jb-player:not(.is-mini) .jb-sheet-head { position: absolute; }

@media (min-width: 769px) {
    .jb-player:not(.is-mini) .jb-sheet-head {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: 30px;
        padding: 0 8px;
    }
}

/* 狭い画面では、動画の上の帯ぜんぶを的にする */
@media (max-width: 768px) {
    .jb-player:not(.is-mini) .jb-sheet-head {
        top: 0;
        left: 0;
        right: 0;
        height: 30px;
        padding: 0 4px;
    }
}


/* 絞り込みの選択欄が3つになったので、狭い画面では2列で折り返す */
.jb-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jb-filter-row > .jb-select { flex: 1 1 46%; min-width: 0; }
.jb-filter-row > #jb-kind { flex: 1 1 100%; }

@media (min-width: 769px) {
    .jb-filter-row > .jb-select,
    .jb-filter-row > #jb-kind { flex: 1 1 0; }
}

/* 名前の並びは、名前と名前の間だけで折り返す */
.jb-name { white-space: nowrap; }
.jb-name-sep { opacity: 0.5; }

.jb-info-singer { overflow-wrap: normal; word-break: normal; }

/* ソロ・コラボ・3D の切り替え札 */
.jb-chips-sub { margin-bottom: 2px; }

.jb-chip-plain {
    --chip-color: var(--main-accent);
}

/* ── メンバーを選ぶボタン ── */
.jb-member-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
}

.jb-member-btn svg { flex: 0 0 auto; opacity: 0.7; }

.jb-member-btn.is-on {
    color: var(--main-accent);
    border-color: var(--main-accent);
    font-weight: 700;
}

.jb-member-btn.is-on svg { opacity: 1; }

/* ── メンバーを選ぶ画面 ── */
.jb-ms-unit { margin-bottom: 14px; }

.jb-ms-unit-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    opacity: 0.6;
    margin-bottom: 7px;
}

.jb-ms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.jb-ms-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* 指で押す的なので、高さは詰めすぎない */
    padding: 13px 14px;
    font-family: inherit;
    font-size: 0.84rem;
    text-align: left;
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--chip-color, var(--main-accent));
    border-radius: 8px;
    cursor: pointer;
}

.jb-ms-item .jb-ms-n { font-size: 0.7rem; opacity: 0.6; flex: 0 0 auto; }

.jb-ms-item.is-on {
    background: color-mix(in srgb, var(--chip-color, var(--main-accent)) 22%, var(--bg-color));
    border-color: var(--chip-color, var(--main-accent));
    font-weight: 700;
}

.jb-ms-foot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.jb-ms-foot .jb-add-primary { margin-bottom: 0; }

/* ── ランダム再生と、たたんだ「時間を決めて聴く」 ── */
.jb-hero-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.jb-hero-row .jb-hero-btn { flex: 1 1 auto; width: auto; }

.jb-hero-more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    font-family: inherit;
    color: var(--text-color);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.75;
}

.jb-hero-more:hover { opacity: 1; }

.jb-hero-more.is-on {
    color: var(--main-accent);
    border-color: var(--main-accent);
    opacity: 1;
}

.jb-timed[hidden] { display: none; }

/* ── 時計のボタンを見つけやすくする ──
   透明のままだと地の色に沈んで、押せる場所だと分からない。
   カードと同じ面を敷き、アイコンにアクセント色を乗せる。 */
.jb-hero-more {
    color: var(--main-accent);
    background: var(--card-bg);
    border-color: color-mix(in srgb, var(--main-accent) 38%, var(--border-color));
    opacity: 1;
}

.jb-hero-more:hover {
    background: color-mix(in srgb, var(--main-accent) 12%, var(--card-bg));
    border-color: var(--main-accent);
}

.jb-hero-more.is-on {
    color: var(--bg-color);
    background: var(--main-accent);
    border-color: var(--main-accent);
}

/* 狭い画面ではアイコンだけ。文字を出すと横幅を食う */
.jb-hero-more-text { display: none; }

@media (min-width: 769px) {
    /* ⚠️ 一覧と左端を揃えること。
       ここだけ 720px のままだと、一覧（1080px）より内側から始まって浮いて見える。 */
    .jb-hero {
        max-width: 1080px;
        margin-left: auto;
        margin-right: auto;
    }

    .jb-hero-row { justify-content: flex-start; }
    .jb-hero-row .jb-hero-btn { flex: 0 0 auto; }

    .jb-hero-more {
        width: auto;
        gap: 8px;
        padding: 0 18px;
        font-size: 0.9rem;
    }

    .jb-hero-more-text { display: inline; }

    .jb-timed { max-width: 420px; }
}

/* ══════════════════════════════════════════
   一覧まわりの組み直し
   絞り込みは1枚のカードにまとめ、その下に件数と一覧を置く。
   ══════════════════════════════════════════ */
.jb-panel-card {
    padding: 14px 16px 16px;
    margin-bottom: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.jb-panel-card .jb-tabs { margin-bottom: 12px; }

/* 件数と、マイリストへの入口 */
.jb-listhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 6px;
}

.jb-listhead .jb-count { margin: 0; text-align: left; }

.jb-listhead-link {
    flex: 0 0 auto;
    padding: 7px 15px;
    font-size: 0.76rem;
    color: var(--text-color);
    text-decoration: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.jb-listhead-link:hover { color: var(--main-accent); border-color: var(--main-accent); }

.jb-hint {
    font-size: 0.72rem;
    line-height: 1.7;
    opacity: 0.6;
    margin-bottom: 10px;
}

.jb-hint:empty { display: none; }

/* 再生時間 */
.jb-timed {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jb-timed-label {
    flex: 0 0 auto;
    font-size: 0.76rem;
    opacity: 0.7;
    white-space: nowrap;
}

.jb-timed .jb-select { width: auto; min-width: 108px; }

/* ── 動画一覧 ── */
.jb-stream {
    margin-bottom: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.jb-stream-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    text-align: left;
    color: var(--text-color);
    background: none;
    border: 0;
    cursor: pointer;
}

.jb-stream-head:hover { background: color-mix(in srgb, var(--main-accent) 7%, transparent); }

.jb-stream-main { min-width: 0; display: block; }

.jb-stream-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.45;
    /* 動画タイトルは長いので2行で止める */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.jb-stream-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
}

.jb-stream-n {
    flex: 0 0 auto;
    padding: 1px 8px;
    font-size: 0.66rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--main-accent) 16%, transparent);
    color: var(--main-accent);
}

.jb-stream-list {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
    border-top: 1px solid var(--border-color);
}

.jb-row-in-stream {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
}

.jb-stream-no {
    flex: 0 0 auto;
    width: 1.8em;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    opacity: 0.45;
}

.jb-row-in-stream .jb-row-main { flex: 1 1 auto; min-width: 0; display: block; }
.jb-row-in-stream .jb-row-title { display: block; }
.jb-row-in-stream .jb-row-sub { display: block; }

/* 狭い画面では、再生ボタン2つを1行、再生時間をその下に置く */
.jb-hero-row { flex-wrap: wrap; }

@media (max-width: 768px) {
    .jb-hero-row .jb-hero-btn { flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: 0.88rem; }
    .jb-hero-row .jb-timed { flex: 1 1 100%; }
    .jb-timed .jb-select { flex: 1 1 auto; width: auto; }
}

/* キューの下の「空にする」 */
.jb-queue-foot {
    padding: 10px 0 16px;
    text-align: center;
}

/* 楽曲情報の購入リンク */
.jb-info-buy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--main-accent);
    font-weight: 700;
}

/* ══════════════════════════════════════════
   絞り込みカードまわりの整え
   ══════════════════════════════════════════ */

/* ⚠️ カードの中に入れたことで、貼り付く範囲がカードの高さぶんしかなくなった。
   カードごと貼り付けて、スクロール中も検索欄が残るようにする。 */
.jb-panel-card {
    position: sticky;
    top: calc(var(--app-header-h, 0px) - 1px);
    z-index: 5;
}

/* カードの中は地の色を敷かない。白いカードの上に灰色の帯が乗って見えていた。 */
.jb-panel-card .jb-filters-stick {
    position: static;
    padding: 0;
    background: none;
    border-bottom: 0;
}

/* 「メンバーを選ぶ」と検索欄の間を空ける */
.jb-panel-card #jb-member-btn { margin-bottom: 12px; }

/* タブは中央に置く */
.jb-panel-card .jb-tabs { justify-content: center; }

/* ホームのランダム再生：メンバーの札を4つずつ2段に */
#sh-random-members {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

#sh-random-members .jb-chip {
    width: 100%;
    padding: 7px 4px;
    text-align: center;
    /* 名前が長い人でも枠から出ないように詰める */
    font-size: 0.72rem;
    letter-spacing: -0.02em;
}

@media (max-width: 380px) {
    #sh-random-members .jb-chip { font-size: 0.66rem; }
}

/* ── プレイリストの中身 ── */
.sh-pl { display: block; }

.sh-pl-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sh-pl-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sh-pl-caret { flex: 0 0 auto; opacity: 0.55; font-size: 0.8rem; }

/* ⚠️ 名前を折り返させないこと。札には共有・名前変更・削除の3つのボタンが並ぶので、
      折り返すと1文字ずつ縦に割れて読めなくなる。長い名前は…で切る。 */
.sh-pl-name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ボタンが増えたぶん、札1枚の最小幅を広げる */
.sh-pl-list { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.sh-pl-count { flex: 0 0 auto; }

.sh-pl-body {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.sh-pl-tools { margin-bottom: 6px; }
.sh-pl-tools .jb-hero-btn { width: auto; padding: 9px 16px; font-size: 0.82rem; }

/* ── メンバーを選ぶ画面：そろう曲だけ ── */
.jb-ms-all {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 2px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

.jb-ms-all input {
    width: 17px;
    height: 17px;
    accent-color: var(--main-accent);
    cursor: pointer;
}
/* ── 前回の続き ── */
.sh-resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--main-accent);
    border-radius: 6px;
}

.sh-resume-text { min-width: 0; }

.sh-resume-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.64rem;
    letter-spacing: 1px;
    opacity: 0.6;
}

/* ⚠️ 曲名は折り返さず…で切ること。歌枠の曲名は長く、
      3行になると札が新着より目立ってしまう。 */
.sh-resume-title {
    display: block;
    margin-top: 2px;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-resume-sub { display: block; margin-top: 2px; font-size: 0.72rem; opacity: 0.72; }
.sh-resume-btns { display: flex; align-items: center; gap: 8px; }
.sh-resume-btns .jb-hero-btn { width: auto; padding: 9px 16px; font-size: 0.82rem; }
/* ── ツール（管理人が作ったほかのサイト） ── */
.sh-tools-lead { margin-bottom: 16px; }

.sh-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 10px;
}

/* ⚠️ 行き先が外のサイトだと分かるようにすること（右上の矢印）。
      同じサイトの中の移動と同じ見た目だと、急に別のサイトへ飛んだように見える。 */
.sh-tool {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    color: var(--text-color);
    text-decoration: none;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--main-accent);
    border-radius: 6px;
}

.sh-tool:hover { background: rgba(127, 127, 127, 0.1); }
.sh-tool-main { flex: 1 1 auto; min-width: 0; }

.sh-tool-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.92rem;
}

.sh-tool-tag {
    padding: 1px 8px;
    font-size: 0.66rem;
    font-weight: 400;
    opacity: 0.8;
    border: 1px solid var(--border-color);
    border-radius: 999px;
}

.sh-tool-note {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    line-height: 1.65;
    opacity: 0.78;
}

.sh-tool-arrow { flex: 0 0 auto; margin-top: 3px; opacity: 0.5; }
.sh-tool:hover .sh-tool-arrow { opacity: 1; }
/* ── 今日と同じ日に投稿された楽曲 ── */
/* 新着の札と同じ形にそろえる。違うのは「n年前」の印だけ。 */
.sh-otd-card {
    scroll-snap-align: start;
    cursor: pointer;
    min-width: 0;
}

/* ⚠️ 日付ではなく「何年前」を出すこと。
      2024.09.23 と書かれても、何年前なのかは数えないと分からない。 */
.sh-otd-ago {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    background: rgba(0, 0, 0, 0.62);
    border-radius: 999px;
    backdrop-filter: blur(2px);
}

.sh-otd-card .sh-card-sub {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ── 共有されたプレイリスト ── */
.sh-share { margin-top: 4px; }

.sh-share-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.sh-share-count {
    font-size: 0.78rem;
    opacity: 0.7;
    margin: 4px 0 14px;
}

.sh-share-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* ── 最終更新日時 ── */
.last-updated-text {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    opacity: 0.55;
    margin-bottom: 6px;
}

/* ── PCでの説明文 ── */
@media (min-width: 769px) {
    /* ⚠️ 説明文を画面幅いっぱいに伸ばさないこと。1行が長すぎて目が戻れない。 */
    .sh-backup .sh-note,
    .sh-section .sh-note,
    .sh-empty {
        max-width: 62ch;
    }

    .sh-backup { text-align: left; }
}

/* ⚠️ 狭い画面ではカードを貼り付けないこと。
   タブ・メンバー・検索・絞り込みで296pxあり、貼り付けると画面の3分の1が
   ずっと埋まって一覧が見えなくなる。上に戻るボタンがあるので、そちらに任せる。 */
@media (max-width: 768px) {
    .jb-panel-card { position: static; }
}

/* ⚠️ 元の指定が縦並びなので、明示的に横並びへ戻すこと */
.sh-pl-main {
    flex-direction: row;
    align-items: center;
    padding: 12px 8px 12px 14px;
}

.sh-pl { padding: 0 8px 0 0; }
.sh-pl.is-open { padding-bottom: 10px; }
.sh-pl-body { padding-left: 14px; padding-right: 6px; }
.sh-pl-body .jb-row-thumb { width: 44px; }

/* ⚠️ 文字だけを詰めると、広いカードの中に短い段落が浮いて見える。
   囲いごと幅を決めて、まとまりとして収める。 */
@media (min-width: 769px) {
    .sh-backup {
        max-width: 720px;
        padding: 16px 18px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--card-bg);
    }

    .sh-backup .sh-note,
    .sh-section .sh-note,
    .sh-empty { max-width: none; }

    .sh-section > .sh-note { max-width: 720px; }
}

/* ── 楽曲情報の下部 ── */

/* 配信・購入ページは補足なので、本文より小さく控えめに置く */
.jb-info-buy {
    font-size: 0.74rem;
    font-weight: 400;
    margin-top: 10px;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--main-accent) 45%, transparent);
    padding-bottom: 1px;
}

.jb-info-buy:hover { border-bottom-color: var(--main-accent); }

/* ⚠️ ボタンを縦に積まないこと。枠線どうしが接して1つの箱に見える。
   横に並べ、間を空ける。 */
.jb-info-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.jb-info-actions .jb-info-btn {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 11px 8px;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* 名前が入りきらない幅では、文字だけ詰める */
@media (max-width: 360px) {
    .jb-info-actions .jb-info-btn { font-size: 0.72rem; padding: 11px 4px; }
}

/* ══════════════════════════════════════════
   キーボードで操作したときの現在地
   ⚠️ :focus だけを消してはいけない。
      マウスで押したときの枠が邪魔だからと outline:none にすると、
      キーボードだけで操作する人が「いまどこにいるか」を失う。
      :focus-visible を使えば、キーボードのときだけ出せる。
   ══════════════════════════════════════════ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--main-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 丸いボタンは枠も丸く */
.jb-row-btn:focus-visible,
.jb-q-btn:focus-visible,
.jb-hero-more:focus-visible,
.app-info-btn:focus-visible,
.theme-toggle:focus-visible,
.jb-chip:focus-visible,
.jb-member-btn:focus-visible,
.jb-listhead-link:focus-visible,
.jb-add-new button:focus-visible,
.jb-add-new input:focus-visible {
    border-radius: 999px;
}

/* 塗りつぶしのボタンは、内側にも線を引いて地の色と分ける */
.jb-hero-btn:focus-visible,
.jb-add-primary:focus-visible,
.app-tabs.is-in-header .app-tab.is-on:focus-visible {
    outline-offset: 3px;
}

/* 押している間 */
.jb-row-btn:active,
.jb-q-btn:active,
.jb-hero-btn:active,
.jb-chip:active,
.jb-member-btn:active,
.jb-info-btn:active {
    transform: translateY(1px);
}

/* ══════════════════════════════════════════
   ☆ と ＋ の押せる面積
   ⚠️ 見た目を大きくするのではなく、透明な余白で的を広げること。
      34px角のまま隣り合っていて、指では隣を押しやすい。
   ══════════════════════════════════════════ */
.jb-row-btn {
    position: relative;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jb-row-btn::after {
    content: '';
    position: absolute;
    /* 44px角になるように、上下左右へ広げる */
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* 隣どうしが近すぎないように離す */
.jb-row .jb-row-btn + .jb-row-btn { margin-left: 4px; }
.jb-q-item .jb-q-btn + .jb-q-btn { margin-left: 4px; }

.jb-q-btn {
    position: relative;
    min-width: 34px;
    min-height: 34px;
}

.jb-q-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ⚠️ 行そのものを押して再生する作りなので、
   広げた的が行の外へはみ出して隣の行を奪わないようにする */
.jb-row, .jb-q-item { position: relative; }

/* 何もないときの行き止まりを避ける */
.sh-empty-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.sh-empty-links .jb-listhead-link { padding: 9px 16px; }

/* ── 動画一覧：検索に当たらなかった曲 ── */
.jb-stream-more {
    padding: 4px 14px 10px;
    text-align: center;
}

.jb-stream-more button {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-color);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.74rem;
    opacity: 0.75;
    padding: 7px 16px;
}

.jb-stream-more button:hover {
    opacity: 1;
    border-color: var(--main-accent);
    color: var(--main-accent);
}

/* 検索に当たっていない曲は、当たった曲と見分けられるよう控えめに */
.jb-row-in-stream.is-dim .jb-row-title,
.jb-row-in-stream.is-dim .jb-row-sub { opacity: 0.6; }

.jb-row-in-stream[hidden] { display: none; }

/* ══════════════════════════════════════════
   統計のタブ
   ⚠️ 横に流して隠さないこと。
      5つ並べると375px幅で471px必要になり、最後の「組み合わせ」が
      画面の外に出て、あることに気づかれない。折り返して全部見せる。
   ══════════════════════════════════════════ */
.sh-stats-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 4px;
    overflow: visible;
}

.sh-stats-tabs .jb-tab {
    flex: 0 0 auto;
    padding: 9px 12px;
    font-size: 0.8rem;
}

@media (max-width: 400px) {
    .sh-stats-tabs .jb-tab { padding: 9px 9px; font-size: 0.76rem; }
}

/* 統計から曲へ飛べることが分かるように */
.overlap-title {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--main-accent) 45%, transparent);
    text-underline-offset: 3px;
}

.overlap-title:hover { color: var(--main-accent); }
.ranking-name { text-underline-offset: 3px; }

/* ── 曲被り：1曲あたりを詰める ── */
.overlap-card {
    padding: 12px 14px;
    margin-bottom: 8px;
}

.overlap-card-header { margin-bottom: 6px; }
.overlap-badges { gap: 4px; }

.overlap-badges .member-badge {
    padding: 2px 8px;
    font-size: 0.68rem;
}

/* 開くまでは詳細を出さない */
.overlap-card .overlap-versions { display: none; }
.overlap-card.expanded .overlap-versions { display: block; margin-top: 10px; }

/* ── 同じ曲の聴き比べ ── */
.jb-compare {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.jb-compare-head {
    font-size: 0.74rem;
    opacity: 0.7;
    margin-bottom: 8px;
}

.jb-compare-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.jb-compare-list button {
    display: flex;
    align-items: baseline;
    gap: 7px;
    /* ⚠️ 幅の上限を持たせること。歌唱者名は「他◯名」に削ってはいるが、
       上限がないと flex の並びのままボタンが伸び、隣の札や外枠をはみ出す。 */
    max-width: 200px;
    min-width: 0;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 0.76rem;
    color: var(--text-color);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
}

.jb-compare-list button:hover { border-color: var(--main-accent); color: var(--main-accent); }

.jb-compare-date { flex: 0 0 auto; font-size: 0.66rem; opacity: 0.6; }

.jb-compare-singer {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jb-compare-all {
    margin-top: 8px;
    padding: 6px 2px;
    font-family: inherit;
    font-size: 0.74rem;
    color: var(--main-accent);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ══════════════════════════════════════════
   統計のメンバーバッジ
   ⚠️ ベタ塗りにすると、色によって文字が黒になったり白になったりする。
      佐伯イッテツ（濃い臙脂）と小柳ロウ（濃い藍）は黒だと読めないため
      白にしていたが、8人並んだときに2人だけ浮いて見える。
   ⚠️ 文字にメンバー色を使うのも避けること。
      8人の明るさがばらばらで、伊波ライ（黄緑）は薄い地に載せると
      2.8:1 までしか出ず読めない。
      地をメンバー色で薄く敷き、文字は全員同じ濃さにすれば、
      色は残したまま読みやすさが揃う。
   ⚠️ 色はインラインで指定されているので、ここで上書きする必要がある。
   ══════════════════════════════════════════ */
.member-badge {
    background: color-mix(in srgb, var(--badge-color, var(--main-accent)) 22%, var(--bg-color)) !important;
    color: var(--text-color) !important;
    border: 1px solid color-mix(in srgb, var(--badge-color, var(--main-accent)) 55%, transparent);
}

/* ══════════════════════════════════════════
   いまの絞り込みを見せる札
   ══════════════════════════════════════════ */
.jb-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 10px;
}

.jb-af-label {
    font-size: 0.72rem;
    opacity: 0.55;
    margin-right: 2px;
}

.jb-af-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 6px 5px 12px;
    font-family: inherit;
    font-size: 0.76rem;
    color: var(--main-accent);
    background: color-mix(in srgb, var(--main-accent) 12%, var(--card-bg));
    border: 1px solid color-mix(in srgb, var(--main-accent) 40%, transparent);
    border-radius: 999px;
    cursor: pointer;
    max-width: 220px;
}

.jb-af-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jb-af-x {
    flex: 0 0 auto;
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1;
}

.jb-af-chip:hover { background: color-mix(in srgb, var(--main-accent) 20%, var(--card-bg)); }
.jb-af-chip:hover .jb-af-x { opacity: 1; }

.jb-af-clear {
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.74rem;
    color: var(--text-color);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.75;
}

.jb-af-clear:hover { opacity: 1; border-color: var(--main-accent); color: var(--main-accent); }

/* 絞り込みを保存するボタン。クリアの隣に並べるので同じ形にする */
.jb-af-save {
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.74rem;
    color: var(--main-accent);
    background: none;
    border: 1px dashed color-mix(in srgb, var(--main-accent) 50%, transparent);
    border-radius: 999px;
    cursor: pointer;
}

/* ══════════════════════════════════════════
   旧URLに出す、引き継ぎの案内
   ══════════════════════════════════════════ */
/* ⚠️ bottom: 0 にしないこと。画面の下端はタブバー（.app-tabs / z-index 9990）と
   ミニプレイヤーが占めていて、その裏に完全に隠れる（実際に隠れていた）。
   下に固定するものは --app-tabs-h と --jb-player-h を足した高さに乗せる作法。
   ⚠️ z-index を 9990 より下げないこと。同じ理由でタブバーの裏に回る。
   ⚠️ position: fixed を外さないこと。スクロールして見失うと、
   「URLが変わった」ことに気づかないまま旧URLを使い続けてしまう。 */
.sh-handoff {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--app-tabs-h, 62px) + var(--jb-player-h, 0px));
    z-index: 9992;
    padding: 12px 16px;
    background: var(--card-bg);
    border-top: 2px solid var(--main-accent);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}

.sh-handoff-in {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sh-handoff-text {
    flex: 1 1 260px;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-color);
}

.sh-handoff-btns {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ⚠️ 44px を下回らないこと。移行は一度きりの操作なので、押し損ねると
   「あとで」を押したのと同じになり、二度と案内が出ない。 */
.sh-handoff-go {
    min-height: 44px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bg-color, #fff);
    background: var(--main-accent);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.sh-handoff-go:hover { filter: brightness(1.08); }

.sh-handoff-x {
    min-height: 44px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 0.76rem;
    color: var(--text-color);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.75;
}

.sh-handoff-x:hover { opacity: 1; }

/* ⚠️ 帯が出ている間は「上へ戻る」を隠すこと。
   あれは同じ高さに浮いていて（z-index 9998）、帯の上に重なる。 */
body.has-handoff .app-totop { display: none !important; }

@media (max-width: 640px) {
    .sh-handoff-btns { flex: 1 1 100%; }
    .sh-handoff-go { flex: 1 1 auto; }
}

/* 非表示中であることの札。
   ⚠️ 絞り込みの札（.jb-af-chip）と同じ見た目にしないこと。
   あちらは押すと外れるが、これは押すと設定画面が開く。 */
.jb-af-muted {
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.74rem;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.85;
}

.jb-af-muted:hover { opacity: 1; border-color: var(--main-accent); color: var(--main-accent); }

/* ══════════════════════════════════════════
   表示しない人を選ぶ
   ══════════════════════════════════════════ */
.jb-ms-mute {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    font-family: inherit;
    font-size: 0.76rem;
    color: var(--text-color);
    background: none;
    border: none;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
    opacity: 0.7;
    text-align: center;
}

.jb-ms-mute:hover { opacity: 1; color: var(--main-accent); }

.jb-mute-note {
    margin: 0 0 10px;
    font-size: 0.72rem;
    line-height: 1.6;
    opacity: 0.75;
}

.jb-mute-q {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* ⚠️ 高さを決め打ちしないこと。170人入るので、
   画面に収まらないと「すべて表示に戻す」まで辿り着けない。 */
.jb-mute-list {
    max-height: min(46vh, 340px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jb-mute-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
}

.jb-mute-item:hover { border-color: var(--main-accent); }

/* 選ばれている＝非表示にしている。消す側なので、色で主張しすぎない */
.jb-mute-item.is-on {
    opacity: 0.5;
    border-style: dashed;
}

.jb-mute-item.is-on .jb-mute-name { text-decoration: line-through; }

.jb-mute-n { flex: 0 0 auto; font-size: 0.72rem; opacity: 0.6; }

.jb-mute-empty { padding: 16px; text-align: center; font-size: 0.76rem; opacity: 0.6; }

.jb-af-save:hover {
    border-style: solid;
    background: color-mix(in srgb, var(--main-accent) 10%, var(--card-bg));
}

/* ══════════════════════════════════════════
   保存した絞り込みの札
   ══════════════════════════════════════════ */
/* ⚠️ 絞り込み中の札（.jb-af-chip）と見た目を分けること。
   あちらは「押すと外れる」、こちらは「押すと流れる」。
   同じ形にすると、外すつもりで再生が始まる。 */
.jb-fs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0 4px;
}

.jb-fs-label {
    font-size: 0.72rem;
    opacity: 0.55;
    margin-right: 2px;
}

.jb-fs-chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--main-accent) 35%, transparent);
    border-radius: 999px;
    overflow: hidden;
    max-width: 100%;
}

.jb-fs-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    font-family: inherit;
    font-size: 0.76rem;
    color: var(--text-color);
    background: var(--card-bg);
    border: none;
    cursor: pointer;
    min-width: 0;
}

.jb-fs-go svg { flex: 0 0 auto; color: var(--main-accent); }

.jb-fs-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jb-fs-go:hover {
    background: color-mix(in srgb, var(--main-accent) 14%, var(--card-bg));
    color: var(--main-accent);
}

/* ⚠️ 小さくしすぎないこと。指で押す的が44px角を下回ると、
   再生のつもりで×に当たる。高さは札いっぱいに取る。 */
.jb-fs-x {
    flex: 0 0 auto;
    padding: 0 10px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-color);
    background: var(--card-bg);
    border: none;
    border-left: 1px solid color-mix(in srgb, var(--main-accent) 22%, transparent);
    opacity: 0.5;
    cursor: pointer;
}

/* ⚠️ 消す色を新しく作らないこと。このサイトに「削除＝赤」の決まりは無く、
   プレイリストの削除も通常の文字色のまま。ここだけ赤くすると浮く。 */
.jb-fs-x:hover { opacity: 1; background: color-mix(in srgb, var(--main-accent) 10%, var(--card-bg)); }

@media (max-width: 640px) {
    /* ⚠️ min-height を外さないこと。字の大きさだけだと札の高さが34pxにしかならず、
       再生のつもりで×に当たる。札を44pxにして、中の2つを stretch で伸ばす。 */
    .jb-fs-chip { min-height: 44px; }
    .jb-fs-go { padding: 8px 10px 8px 14px; }
    .jb-fs-x { padding: 0 14px; }
}

/* ══════════════════════════════════════════
   フッターの共有ボタン
   ══════════════════════════════════════════ */
.app-share {
    margin-bottom: 22px;
}

/* 見出しの両側に細い線を引く */
.app-share-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    opacity: 0.6;
}

.app-share-head::before,
.app-share-head::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-color);
}

.app-share-head span { flex: 0 0 auto; }

.app-share-btns {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.app-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.8;
}

.app-share-btn:hover {
    opacity: 1;
    color: var(--main-accent);
    border-color: var(--main-accent);
}

/* ⚠️ 一覧が空のときの案内は、列の割り当てから外すこと。
   プレイリスト一覧は複数列のグリッドなので、そのままだと案内が
   1列ぶん（240px前後）の幅に押し込まれ、左端に寄って見える。 */
.sh-pl-list > .sh-empty {
    grid-column: 1 / -1;
}

/* ══════════════════════════════════════════
   薄すぎる文字を読める濃さに上げる
   ⚠️ 補助情報だからと opacity を下げすぎないこと。
      ライトモードで実測したところ、著作表示は 1.41、最終更新日時は 1.46 しか
      コントラストが出ておらず、ほぼ見えない状態だった（必要なのは4.5）。
      一覧の日付と枠名も3.71で、毎行に出る情報としては薄い。
   ══════════════════════════════════════════ */
.app-foot-copy { opacity: 0.75; }
.last-updated-text { opacity: 0.75; }
.jb-row-date { opacity: 0.72; }
.jb-hint { opacity: 0.78; }
.app-share-head { opacity: 0.75; }
.sh-note { opacity: 0.78; }

/* ══════════════════════════════════════════
   指で押す的を広げる
   ⚠️ 見た目を大きくするのではなく、押せる高さを確保すること。
      PROFILE は25px、バックアップ・復元は28pxしかなく、
      指では隣を押しやすい。
   ══════════════════════════════════════════ */
.sh-member-profile,
.sh-backup-btns .jb-queue-btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sh-member-profile { padding: 6px 12px; }
.sh-backup-btns .jb-queue-btn { padding: 7px 16px; }

/* ⚠️ 旧サイト（ダーク専用）向けの固定色 #a0aabf が残っていて、
   ライトモードの地色ではほとんど読めない（実測1.7）。
   テーマに追従する色へ戻す。 */
.app-footer .footer-inquiry,
.app-foot-copy,
.last-updated-text {
    color: var(--text-color);
}

/* ── 確認・入力の小窓（jbModal） ── */
.sh-modal-input {
    width: 100%;
    padding: 11px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.sh-modal-input:focus {
    outline: none;
    border-color: var(--main-accent);
}

/* 読むだけの欄（コピー用）は、入力できないことが分かるように */
.sh-modal-input[readonly] {
    opacity: 0.85;
    font-family: monospace;
    font-size: 0.78rem;
}

/* ⚠️ 片方しかボタンが無いときに、空の枠を出さないこと */
.sh-modal-btn:empty { display: none; }

/* 確認の文は折り返しを許す（長い名前が入るため） */
.sh-modal-note { overflow-wrap: anywhere; }

/* 目には見えないが、読み上げには伝わる見出し。
   ⚠️ display:none や visibility:hidden にしないこと。
      それだと読み上げからも消えてしまい、置く意味がなくなる。 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* h1 にしたぶんの既定の余白・文字サイズを打ち消す（見た目は元のまま） */
.app-brand-h1 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    flex: 1 1 auto;
    min-width: 0;
}

/* ══════════════════════════════════════════
   広い画面で右側が大きく空くのを避ける
   ⚠️ 読みやすさのために横幅を720pxで止めていたが、
      左に寄ったまま右が空くと「途中で切れている」ように見える。
      幅を使いつつ1行を長くしすぎない＝段に分ける、で両立させる。
   ══════════════════════════════════════════ */
@media (min-width: 1024px) {
    .sh-about {
        max-width: none;
        columns: 2;
        column-gap: 16px;
    }

    /* ⚠️ 段の途中でカードを割らないこと。枠線が上下で分断される。 */
    .sh-about-block {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin-bottom: 16px;
    }

    /* バックアップの案内は、説明を左・ボタンを右に置いて幅を使う */
    .sh-backup { max-width: none; }

    /* ⚠️ details 本体を flex にしないこと。
       summary まで横並びの一員になり、開閉の見出しが本文の隣に並ぶ。 */
    .sh-backup-body {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .sh-backup .sh-note {
        flex: 1 1 auto;
        max-width: 70ch;
        margin: 0;
    }

    /* ⚠️ 本文の直後に置かないこと。中途半端な位置で止まり、右半分がまた空く。 */
    .sh-backup-btns { flex: 0 0 auto; margin-left: auto; }
}

/* ══════════════════════════════════════════
   PC：メンバーカードを他コンテンツと同じ幅まで広げる
   ⚠️ auto-fill のままにしないこと。4人に対して7列分の
      空トラックが作られ、カードが最小幅のまま左に寄る。
      auto-fit なら空トラックが潰れて4枚が幅いっぱいに伸びる。
   ══════════════════════════════════════════ */
@media (min-width: 1024px) {
    .sh-members {
        grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
        gap: 14px;
    }

    /* 横に広がったぶん、PROFILE は下ではなく右端へ。
       名前とプロフィールの押し間違いも起きにくくなる。 */
    .sh-member {
        flex-direction: row;
        align-items: center;
    }

    .sh-member-main {
        flex: 1 1 auto;
        padding: 16px 8px 16px 20px;
    }

    .sh-member-profile {
        align-self: center;
        margin: 0 14px 0 0;
    }
}

/* ══════════════════════════════════════════
   PC：ランダム再生の操作列
   ⚠️ jb-hero-btn を flex:1 のままにしないこと。1180px の行では
      ボタンだけが1000px超に伸び、110px の時間指定と釣り合わない。
   ══════════════════════════════════════════ */
@media (min-width: 1024px) {
    .sh-random-row {
        justify-content: center;
        gap: 12px;
    }

    .sh-random-row .jb-select { flex: 0 0 130px; width: 130px; }
    .sh-random-row .jb-hero-btn { flex: 0 1 340px; }
}

/* ══════════════════════════════════════════
   再生時間まわりの釣り合い
   ⚠️ プルダウンを行いっぱいに伸ばさないこと。0.76rem の小さな
      ラベルの隣に幅300px超の大きなピルが並び、主従が逆に見える。
   ══════════════════════════════════════════ */
.jb-timed-label { font-size: 0.82rem; opacity: 0.75; }

@media (max-width: 768px) {
    .jb-timed .jb-select { flex: 0 1 210px; width: auto; min-width: 0; }
}

/* ══════════════════════════════════════════
   副ボタン（ランダム再生など）を背景から浮かせる
   ⚠️ transparent + border-color の枠線だけにしないこと。
      地の色とほぼ同化して、押せる要素に見えない。
      主ボタン（塗り）との主従は保ったまま、アクセント色を薄く敷く。
   ══════════════════════════════════════════ */
.jb-hero-btn.is-sub {
    /* アクセント色そのままだと薄い地の上で4.1しか出ないので、文字色を少し混ぜて沈める */
    color: color-mix(in srgb, var(--main-accent) 72%, var(--text-color));
    background: color-mix(in srgb, var(--main-accent) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--main-accent) 45%, transparent);
}

.jb-hero-btn.is-sub:hover {
    filter: none;
    background: color-mix(in srgb, var(--main-accent) 20%, var(--card-bg));
    border-color: var(--main-accent);
}

/* ══════════════════════════════════════════
   再生時間は「ランダム再生の長さ」なので、その真下にまとめる
   ⚠️ 再生時間を hero-row の直下に単独で置かないこと。
      すべて再生／ランダム再生の両方にかかるように見え、
      どちらに効く設定なのか分からなくなる。
   ══════════════════════════════════════════ */
.jb-hero-row { align-items: flex-start; }

.jb-shuffle-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.jb-shuffle-group .jb-hero-btn.is-sub { width: auto; flex: 0 0 auto; }

.jb-shuffle-group .jb-timed {
    justify-content: center;
    gap: 6px;
    padding: 0 6px;
}

.jb-shuffle-group .jb-timed .jb-select {
    flex: 0 1 130px;
    width: auto;
    min-width: 0;
    padding: 6px 26px 6px 10px;
    font-size: 0.78rem;
}

.jb-shuffle-group .jb-timed-label { font-size: 0.72rem; opacity: 0.7; }

@media (min-width: 769px) {
    .jb-shuffle-group { flex: 0 0 auto; }
}

/* 1段目に「すべて再生」、2段目に「ランダム再生」と再生時間を横並びにする。
   ⚠️ 狭い画面で2つのボタンを1行に押し込まないこと。
      文字が詰まるうえ、再生時間がどちらにかかるか読めなくなる。 */
@media (max-width: 768px) {
    .jb-hero-row { flex-wrap: wrap; row-gap: 10px; }
    .jb-hero-row #jb-play-all { flex: 1 1 100%; }
    .jb-shuffle-group { flex: 1 1 100%; justify-content: space-between; }
    .jb-shuffle-group .jb-timed { padding: 0; }
}

/* すべて再生とランダム再生は対の操作なので、大きさを揃える。
   ⚠️ is-sub の padding/font-size を小さいままにしないこと。
      同じ行に並ぶと片方だけ縮んで見え、不揃いが目立つ。 */
@media (min-width: 769px) {
    .jb-hero-row .jb-hero-btn.is-sub {
        padding: 14px 18px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    /* 余白を空けるより、押せる幅を稼ぐほうが親切 */
    .jb-shuffle-group { justify-content: flex-start; gap: 12px; }
    .jb-shuffle-group .jb-hero-btn.is-sub { flex: 1 1 auto; }
    .jb-shuffle-group .jb-timed { flex: 0 0 auto; }
}

/* 新着サムネの再生マーク
   ⚠️ padding で丸を作るとき box-sizing を content-box にすること。
      border-box のままだと width/height 属性18px に padding 9px が
      食い込み、三角形が0pxに潰れて「青丸」だけが見える。 */
.sh-card-play svg {
    box-sizing: content-box;
    padding: 11px;
}

/* ══════════════════════════════════════════
   全画面再生中は下まで使う
   ⚠️ タブバーぶんの余白を空けたままにしないこと。
      覆っている間はタブバーを隠している
      （body.jb-covering .app-tabs { display: none }）のに
      bottom で 62〜67px を空けており、下に何も無い帯ができる。
      iOS Safari ではそこにブラウザのツールバーぶんも足されるため、
      プレイヤーだけが浮き上がって見える。
   ══════════════════════════════════════════ */
body.jb-covering .jb-player:not(.is-mini) {
    bottom: 0;
    /* ホームボタンの無い端末では、下端の操作バーに重ならないようにする */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ══════════════════════════════════════════
   「この曲は他に◯件あります」の札を2列にそろえる
   ⚠️ flex-wrap のままにしないこと。札の幅が中身の長さで変わるため、
      1行に2枚だったり1枚だったりと段が不揃いになる。
   ══════════════════════════════════════════ */
.jb-compare-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

/* グリッドが幅を決めるので、札ごとの上限は不要 */
.jb-compare-list button {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
}

/* 狭い画面では札の中身を縦に積む。
   ⚠️ 日付と歌唱者を1行に並べたままにしないこと。
      2列にすると1枚あたり160pxしかなく、日付に取られて
      「緋八マナ …」のように歌唱者が切れてしまう。 */
@media (max-width: 480px) {
    .jb-compare-list button {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 7px 10px;
    }

    .jb-compare-list .jb-compare-singer { width: 100%; }
}

/* ── 再生履歴 ── */
.sh-hist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.sh-hist-head .jb-count { margin: 0; }
.sh-hist-head .jb-queue-btn { flex: 0 0 auto; padding: 6px 14px; font-size: 0.76rem; }

/* ── 保存とバックアップ（折りたたみ） ── */
.sh-backup-summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    opacity: 0.8;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* つまみの三角は自前で描く（ブラウザごとの見た目差をなくす） */
.sh-backup-summary::-webkit-details-marker { display: none; }

.sh-backup-summary::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.15s ease;
}

.sh-backup[open] .sh-backup-summary::before { transform: rotate(90deg); }
.sh-backup[open] .sh-backup-summary { margin-bottom: 10px; }
.sh-backup-summary:hover { opacity: 1; }

/* ══════════════════════════════════════════
   リストタブ（お気に入り／プレイリスト／履歴）
   ⚠️ flex: 1 1 0 で3等分しないこと。
      「プレイリスト」＋件数バッジが1枠に収まらず、
      バッジだけが2行目に落ちて文字の高さが揃わなくなる。
   ══════════════════════════════════════════ */
.sh-list-tab {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    padding-left: 4px;
    padding-right: 4px;
}

.sh-list-tab-num { min-width: 1.4em; padding: 1px 4px; margin-left: 2px; }

@media (max-width: 400px) {
    .sh-list-tab { font-size: 0.8rem; }
}

/* フッターの免責文は、意味の切れ目だけで折り返す。
   ⚠️ span を外して1つの文に戻さないこと。
      狭い画面で「…ございま / せん。」と文末が割れる。 */
.app-foot-note span { display: inline-block; }

/* ══════════════════════════════════════════
   スマホ・タブレットでは背景のぼかしを使わない
   ⚠️ 触って操作する端末でぼかしを戻さないこと。
      画面下に固定したタブバーや一覧のカードにぼかしがあると、
      スクロールのたびに背景を描き直すことになる。
      iPhoneでは再生中にスクロールすると音がぷつっと途切れる原因になっていた。
      どれも地の色がほぼ不透明なので、外しても見た目はほとんど変わらない。
   ══════════════════════════════════════════ */
@media (hover: none) {
    .app-tabs,
    .app-tabs.is-in-header,
    .sh-member,
    .sh-pl,
    .sh-backup,
    .sh-about-block,
    .jb-add-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}


/* ══════════════════════════════════════════
   曲を押したときの動き（このサイトで再生／YouTubeで再生）
   ⚠️ 選んでいるほうの文字色をアクセント色そのままにしないこと。薄い地の上で 4.5:1 に届かない。
   ══════════════════════════════════════════ */
.jb-open-mode {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 2px 0 8px;
}

.jb-open-mode-label { font-size: 0.74rem; opacity: 0.8; margin-right: 2px; }

.jb-open-mode-btn {
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-color);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
}

.jb-open-mode-btn.is-on {
    color: color-mix(in srgb, var(--main-accent) 72%, var(--text-color));
    background: color-mix(in srgb, var(--main-accent) 12%, var(--card-bg));
    border-color: color-mix(in srgb, var(--main-accent) 55%, transparent);
}

/* ── トップの「再生方法」 ── */
.sh-open-mode {
    margin: 0 0 24px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.sh-open-mode .jb-open-mode { margin: 0; }

/* スマホでは「再生方法」を1行目、ボタンを2行目に半分ずつ並べる。
   ⚠️ 1行に詰めたままにしないこと。枠の内側の余白ぶん幅が足りず、
      「YouTubeで再生」だけが2行目に落ちて片寄って見える。 */
@media (max-width: 768px) {
    .sh-open-mode .jb-open-mode {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
    }

    .sh-open-mode .jb-open-mode-label { grid-column: 1 / -1; }
    .sh-open-mode .jb-open-mode-btn { width: 100%; }
}