/* ================================
   Googleアドセンス インフィード広告 グリッド表示
   ================================ */
/* --- インフィード広告を各クリップと同じサイズに --- */
.ad-infeed-item {
    grid-column: span 1;   /* 通常のグリッド1列分に合わせる */
    background: #fff;
    padding: 8px;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    max-width: 500px;         /* clip-itemと同じ最大幅に合わせる */
    margin: 0 auto;           /* 横中央に配置 */
    /* min-height: 120px; */        /* 最低高さは必要に応じ調整 */
}

/* --- ダークモード対応（コンテナ側のみ） --- */
.dark-theme .ad-infeed-item {
    background: var(--surface-card);
    color: var(--text-color);
    border-color: var(--surface-border);
}

/* ダークモード時：広告コンテナの背景と枠線を暗色に */
html.dark-theme #gridBody li.ad-infeed-item {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 8px;
}

/* ライト時は背景を透過/白寄りなどにする場合 */
html:not(.dark-theme) #gridBody li.ad-infeed-item {
    background: transparent;
    border: 1px solid transparent;
}

/* ins.adsbygoogle内も同様に幅調整 */
.ad-infeed-item ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 500px;
    min-width: 180px;
    /* min-height: 120px; */
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

@media (max-width: 360px) {
    .ad-infeed-item ins.adsbygoogle { min-width: 0; }
}

.ad-sponsor-label {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
    background: rgba(148, 163, 184, 0.16);
}

.ad-inline-item,
.ad-bottom-inline {
    list-style: none;
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

.ad-inline-item ins.adsbygoogle,
.ad-bottom-inline ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-height: 110px;
}

#listBody .ad-inline-item,
#easyViewBody .ad-inline-item {
    margin: 12px 0;
}

#timelineContainer .ad-bottom-inline {
    margin: 16px 0 8px;
}

#relatedClipsBody .ad-bottom-inline--related {
    grid-column: 1 / -1;
    max-width: 720px;
    margin: 18px auto 6px;
}

.ad-slot {
    margin: 12px auto 16px;
    padding: 6px;
    max-width: 980px;
}

.ad-slot--article-top {
    margin-top: 2px;
}

.ad-slot--article-bottom {
    margin-top: 16px;
}

html.dark-theme .ad-inline-item,
html.dark-theme .ad-bottom-inline {
    border-color: rgba(148, 163, 184, 0.28);
    background: rgba(15, 23, 42, 0.58);
}

html.dark-theme .ad-sponsor-label {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.22);
}

@media (max-width: 850px) {
    .ad-inline-item,
    .ad-bottom-inline {
        margin: 12px 0;
        padding: 8px;
    }

    .ad-inline-item ins.adsbygoogle,
    .ad-bottom-inline ins.adsbygoogle {
        min-height: 90px;
    }
}




/* ================================
   基本設定・リセット
   ================================ */

:root {
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-top:   env(safe-area-inset-top,   0px);
}

p:empty, br:empty { display: none; }

.single .main {
    padding: 0em 0em;
}
@media (max-width: 850px) {
    .single .main {
        padding: 3px;
    }
}

/* スクロールバー有無でコンテンツ幅が揺れないように */
html {
  scrollbar-gutter: stable both-edges;
}

html, body {
  overflow-x: clip;  /* 互換性重視なら hidden でも可 */
}

.content {
    margin-top: 0;
}

main#main {
    background: #fefefe;
}

body {
    margin: 0;
    font-family: 'Noto Sans JP', '髮九ｑ・ｽ・ｸ驛｢・ｧ繝ｻ・ｴ驛｢・ｧ繝ｻ・ｷ驛｢譏ｴ繝ｻ邵ｺ鬘梧割郢晢ｽｻ, '驛｢譎上・・主ｸｷ・ｹ・ｧ繝ｻ・ｮ驛｢譎・・繝ｻ・ｧ陋幢ｽｵ邵ｺ繝ｻ, sans-serif;
    background: #f8f8fc;
    color: #222;
}
@media (max-width: 850px) {
    body {
        font-size: 13px;
    }
}
header, footer { text-align: center; padding: 1em 0; }

/* 上部メニューの上の隙間を削除 */
#header-container {
    display: none;
}
.article-header {
    display: none;
}
article .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ================================
   上部メニュー（スクロールで隠れる/表示）
   ================================ */
.top-menu {
    position: relative; /* 基本はページ上部（通常フロー） */
    left: 0;
    right: 0;
    z-index: 1097; /* #sidebarToggle(1098) より下、#sidebar(1099) より下 */
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

/* スクロール中に上から出す「フローティング状態」 */
.top-menu.is-floating {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(0);
    transition: transform 0.22s ease;
}

html.dark-theme .top-menu {
    background: rgba(17, 17, 17, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* フローティング中だけ隠す（通常フロー時にtransformしない） */
.top-menu.is-floating.is-hidden {
    transform: translateY(-110%);
}

/* フローティング化でレイアウトがジャンプしないようにするスペーサー */
#topMenuPlaceholder {
    height: 0;
}
.top-menu.is-floating + #topMenuPlaceholder {
    height: var(--topMenuHeight, 0px);
}

.top-menu-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 12px;
    box-sizing: border-box;
}

/* デスクトップは従来通り「1行レイアウト（折り返し）」に見せたいので
   .top-menu-row は実体を持たず、子要素だけを並べる */
.top-menu-row {
    display: contents;
}

.top-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.top-menu-label {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.top-menu .rowContainer {
    margin: 0;
}

.top-menu-item--search {
    flex: 1 1 380px;
}

.top-menu-item--search .custom-dropdown-wrap {
    max-width: none;
}

/* ===== TOPリンク（上部メニュー左端） ===== */
.top-menu .top-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    flex: 0 0 auto;
    user-select: none;
}
.top-menu .top-home-link:hover {
    filter: brightness(0.96);
}
html.dark-theme .top-menu .top-home-link {
    background: rgba(31, 41, 55, 0.95);
    color: #f9fafb;
    border-color: rgba(255, 255, 255, 0.20);
}

.top-menu .favorite-switch-container {
    margin: 0;
    padding-left: 0;
    gap: 10px;
}

.top-menu .favorite-options {
    margin: 0;
}

/* モバイル最適化
   1行目：プリセット＋DB（2列）
   2行目：検索
   3行目：フォロー/お気に入り系 */
@media (max-width: 800px) {
    .top-menu-inner {
        padding: 8px 10px;
        gap: 8px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .top-menu-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
    }

    .top-menu-row--1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
        align-items: start;
    }

    .top-menu-row--1 .top-menu-item {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .top-menu-row--1 select {
        width: 100%;
        min-width: 0;
    }

    .top-menu-row--2 .top-menu-item--search {
        width: 100%;
        flex: 1 1 auto;
    }

    .top-menu-row--3 {
        flex-direction: column;
        align-items: stretch;
    }

    .top-menu-row--3 .top-menu-item {
        width: 100%;
    }

    .top-menu .favorite-switch-container {
        flex-wrap: wrap;
    }

    .top-menu-item--follow .follow-only-wrap {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* かなり狭い端末では2列がキツいので縦積みに切り替え */
@media (max-width: 520px) {
    .top-menu-row--1 {
        grid-template-columns: 1fr;
    }

    .top-menu-item--search {
        flex-basis: 100%;
    }
}

/* ページ全体の左右余白を画面幅に応じて動的にする */
main {
    /* コンテンツの最大幅を決めて中央寄せ */
    margin-left: auto;
    margin-right: auto;

    /* 上下は一定。左右の余白だけ画面幅に応じて 0〜100px で増減させる
       - 〜600px: 0px（スマホは余白なし）
       - 800px: 20px
       - 1000px: 40px
       - 1400px以上: 100px で頭打ち */
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: clamp(0px, calc((100vw - 600px) * 0.1), 100px);
    padding-right: clamp(0px, calc((100vw - 600px) * 0.1), 100px);
}
.article h2 {
  font-size: 20px;
  padding: 10px;
  margin-top: 3em;
}
.article ul, .article ol {
    padding-left: 0px;
    margin-bottom: 0px;
}
.article ul li {
    margin: 0;
}
ol, ul {
    padding-left: 0px;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border-style: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* ================================
   注釈・内部リンク
   ================================ */
.note-container, .link-container {
    font-size: 15px;
    text-align: right;
}
@media (max-width: 600px) {
    .note-container, .link-container { font-size: 14px; }
}



/* ================================
   プリセット・データソース・フィルタフォーム
   ================================ */
.presetContainer {
    margin: 10px 0 10px;
}

.presetContainer select {
    max-width: 520px;
}

.rowContainer { display: flex; align-items: center; margin: 10px 0; }
.basicContainer, .filter-container { max-width: 1200px; box-sizing: border-box; gap: 10px; }
.basicContainer { margin-top: 20px; }
.columnContainer { display: flex; flex-direction: column; gap: 0; }
.itemGroupContainer { margin-bottom: 20px; }
.rowTitle { min-width: 80px; margin-right: 6px; font-weight: bold; }
input, select, textarea {
    font-family: inherit;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
input[type="text"], input[type="number"], input[type="date"], input[type="time"], select {
    padding: 5px; height: 40px; width: 100%;
}
textarea { font-size: 14px; resize: vertical; min-height: 20px; max-height: 100px; }
.searchButton, .filterButton, #clearButton {
    border: none; cursor: pointer; border-radius: 5px;
}
.searchButton { background-color: #4CAF50; color: #fff; }
.filterButton { background-color: #4CAF50; color: #fff; width: 140px; }
#clearButton { background-color: #778899; color: #fff; width: 120px; }
.one-clearButton, .one-clearButton-resp {
    width: 28px; height: 28px;
    background: #696969; color: #fff; border: 3px;;
    border-radius: 5px; cursor: pointer;
    font-size: 20px; margin-left: 4px;
    transition: background 0.3s;
}
.one-clearButton:hover, .one-clearButton-resp:hover { background: #ff4d4d; }
@media (max-width: 800px) {
    .rowTitle { display: none; }
    input, select, textarea { font-size: 14px; }
}
@media (min-width: 800px) {
    .rowTitle { width: 100px; }
    input, select, textarea { font-size: 15px; }
}
#searchBox {
    width: 100%;
    min-width: 250px;
    box-sizing: border-box;
    border-radius: 6px 0 0 6px;
    border-right: none;
}
@media (max-width: 800px) {
    #sidebar #searchBoxOnSidebar {
        width: 70vw;
        min-width: 35vw;
    }
}



/* ===== 配信者・カテゴリー一覧 お気に入り連携 ===== */
.directory-favorite-only-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 4px;
    margin-bottom: 6px;
}
.directory-favorite-only-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    user-select: none;
}
.directory-favorite-only-label input[type="checkbox"] {
    transform: translateY(1px);
}
.directory-link-inline {
    font-size: 13px;
    white-space: nowrap;
}
#sidebar .directory-favorite-only-wrap {
    margin-top: 0;
    margin-bottom: 0;
}

/* ===== フォローOnly チェックボックス ===== */
.follow-only-wrap {
    margin-top: 8px;
    margin-bottom: 8px;
}
.follow-only-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    user-select: none;
}
.follow-only-label input[type="checkbox"] {
    transform: translateY(1px);
}
.twitch-linked-user {
    margin-left: 8px;
    font-size: 13px;
    opacity: 0.9;
}
.twitch-disconnect-btn {
    margin-left: 8px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #aaa;
    background: #fff;
    cursor: pointer;
}
.twitch-disconnect-btn:hover {
    filter: brightness(0.96);
}
/* サイドバー内に移動した要素の余白調整 */
#sidebar .follow-only-wrap {
    margin-top: 0;
    margin-bottom: 0;
}
#sidebar .favorite-options {
    margin: 0;
}

/* ==== Twitch連携：連携を切断ボタン（ダークモード可読性改善） ==== */
.dark-theme #twitchDisconnectBtn,
.dark-theme #twitchDisconnectBtnOnSidebar,
.dark-theme .twitch-disconnect-btn {
    background: #374151;      /* 濃いグレー（slate-700相当） */
    color: #f9fafb;           /* 文字は白系で高コントラスト */
    border-color: #4b5563;    /* 枠線も暗色 */
}

/* ホバー時はわずかに明るく */
.dark-theme #twitchDisconnectBtn:hover,
.dark-theme #twitchDisconnectBtnOnSidebar:hover,
.dark-theme .twitch-disconnect-btn:hover {
    background: #4b5563;      /* slate-600 */
    border-color: #6b7280;    /* slate-500 */
    filter: none;             /* 既存のbrightnessを打ち消して安定化 */
}

/* 無効化時（もし使う場合）：読める範囲で弱めのトーンに */
.dark-theme #twitchDisconnectBtn:disabled,
.dark-theme #twitchDisconnectBtnOnSidebar:disabled,
.dark-theme .twitch-disconnect-btn:disabled {
    background: #1f2937;      /* slate-800 */
    color: #9ca3af;           /* slate-400 */
    border-color: #374151;
    opacity: 1;               /* 透明度でさらに薄くならないように */
    cursor: not-allowed;
}




/* =====================
   サイドバー本体
   ===================== */
#sidebarToggle {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1098; /* サイドバーより下に */
    background: rgba(0,0,0,.8);
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    letter-spacing: 2px;
    transition: background 0.16s, box-shadow 0.18s;
}
#sidebarToggle:hover {
    background: rgba(20,80,255,.35); transform: scale(1.03);
}
#sidebar {
    position: fixed;
    top: 0;
    left: -100vw;
    width: 800px;
    max-width: 800px;
    min-width: 800px;
    height: 100vh;
    background: linear-gradient(95deg, #fff 80%, #f3eaff 100%);
    box-shadow: 8px 0 32px 0 #af7cf920;
    overflow-y: auto;
    transition: left 0.3s cubic-bezier(.55,0,.21,1.1);
    z-index: 1099;
    padding: 15px;
    border-radius: 0px;
    border-right: 0.5px solid #9c58e1;
    box-sizing: border-box;
}
#sidebar.open { left: 0; }

/* ===== ② iOS の自動ズーム対策（入力は15px以上） ===== */
@supports (-webkit-touch-callout: none) {
    #sidebar input,
    #sidebar select,
    #sidebar textarea {
        font-size: 15px;
    }
}

/* ===== ③ Flex 子の最小幅と横スクロールの抑止 ===== */
#sidebar .rowItem,
#sidebar .custom-dropdown-wrap,
#sidebar .keyword-row #searchBoxOnSidebar,
#sidebar .filter-container select,
#sidebar .filter-container .number-box {
    min-width: 0;                /* はみ出し計算を抑止 */
}

/* ===== ④ 安全域（ノッチ）考慮のパディング（あれば適用） ===== */
@supports (padding: max(0px)) {
    #sidebar {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
}

/* 共通：row を折り返さない */
#sidebar .rowContainer {
    flex-wrap: nowrap;
}

/* キーワード行：ラベルは固定幅、ドロップラップは残り全部 */
#sidebar .keyword-row .rowTitle {
    flex: 0 0 100px;            /* ラベル固定幅（PC） */
    margin-right: 8px;
}

/* 既存の max-width:420px を #sidebar 内では解除して全幅使えるように */
#sidebar .keyword-row .custom-dropdown-wrap {
    max-width: none !important;
    width: 100%;
    gap: 6px;                   /* ボタン間の視認性を少しだけ上げる */
}

/* 入力は残り全部を使用 */
#sidebar .keyword-row #searchBoxOnSidebar {
    flex: 1 1 auto;
    min-width: 0;               /* はみ出し防止 */
    height: 40px;
    border-right: none;         /* 隣の▼ボタンと境界線を1本化 */
    border-radius: 6px 0 0 6px;
}

/* ▼ボタンは固定幅・固定高（既存の20px幅を固定化） */
#sidebar .keyword-row #showFavoriteDropdownBtnOnSidebar {
    flex: 0 0 28px;             /* 少しだけ当たり判定を増やす場合は28px */
    width: 28px;
    height: 40px;
    margin-left: -2px;          /* 既存の境界重なり微調整を踏襲 */
    padding: 0;
}

/* ★保存ボタンは正方形で固定 */
#sidebar .keyword-row #addFavoriteKeywordBtnOnSidebar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 検索ボタンも固定：他所の .searchButton に影響しないよう keyword-row でスコープ限定 */
#sidebar .keyword-row .searchButton {
    flex: 0 0 44px;
    width: 44px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 「タグを含めない」は入力列の真下にインデントして置く */
#sidebar .remove-tag-row label {
    display: block;
    margin-left: 100px;         /* 上の rowTitle 分だけ下げる */
    line-height: 1.2;
}
@media (max-width: 800px) {
    /* ラベルを少し詰める（1行維持のため） */
    #sidebar .keyword-row .rowTitle {
        flex: 0 0 90px;
    }
    #sidebar .remove-tag-row label {
        margin-left: 90px;
    }

    /* 800px以下でも1行維持＆各ボタンは固定 */
    #sidebar .keyword-row #showFavoriteDropdownBtnOnSidebar {
        flex-basis: 26px;
        width: 26px;
    }
    #sidebar .keyword-row #addFavoriteKeywordBtnOnSidebar {
        flex-basis: 38px;
        width: 38px;
    }
    #sidebar .keyword-row .searchButton {
        flex-basis: 42px;
        width: 42px;
    }
}


#sidebar .sidebar-close-btn {
    position: absolute;
    top: 26px;
    right: 14px;
    background: #696969;
    color: #fff;
    border: none;
    border-radius: 7px;
    width: 38px;
    height: 38px;
    font-size: 25px;
    font-weight: 700;
    cursor: pointer;
    z-index: 1210;
    transition: background 0.18s;
}
#sidebar.open .sidebar-close-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    /* ↑600pxはsidebarの最大幅、75vwはsidebarのmax-width:75%と揃える */
    /* 必要に応じてtop/rightを微調整 */
    z-index: 1210;
}
#sidebar .sidebar-close-btn:hover {
    background: #e22332;
}
#sidebarCloseBtn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #7d41c9 0%, #9c58e1 100%);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(156, 88, 225, 0.35);
    cursor: pointer;
    z-index: 1210; /* #sidebar 内で最前面 */
    transition: background 0.16s, transform 0.12s;
}
#sidebarCloseBtn:hover,
#sidebarCloseBtn:focus {
    background: linear-gradient(135deg, #6731b5 0%, #7d41c9 100%);
    transform: scale(1.04);
    outline: none;
}

#sidebar fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-inline-size: unset;
}
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* 各セクションの余白調整 */
#sidebar .rowContainer,
#sidebar .itemGroupContainer,
#sidebar .columnContainer {
    padding-left: 3px;
    margin-top: 12px;
    margin-bottom: 12px;
}
#sidebar .rowContainer:first-child,
#sidebar .itemGroupContainer:first-child,
#sidebar .columnContainer:first-child {
    margin-top: 0;
}

/* サブタイトル */
#sidebar h5 {
    font-size: 1.05em;
    margin: 22px 0 9px 0;
    font-weight: 700;
    color: #7139d3;
    letter-spacing: 0.5px;
}

/* お気に入りボタンの並び */
.favorite-switch-container {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    padding-left: 7px;
    justify-content: flex-start;
}
/* 共通レイアウト（幅・高さなど） */
.favorite-switch-container #showFavoritesBtn,
.favorite-switch-container #showAllClipsBtn {
    width: 100%;
    max-width: 220px;      /* 履歴ボタンと共通の幅 */
    padding: 6px 12px;     /* 履歴ボタンと同じ高さ */
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
}

/* ★ お気に入りモードボタン（黄色系） */
.favorite-switch-container #showFavoritesBtn {
    border: 1px solid #f1b93a;
    background: #f7d566;
    color: #4b3200;
}

.favorite-switch-container #showFavoritesBtn:hover {
    background: #ffd54f;
    border-color: #ffc107;
}

.favorite-switch-container #showFavoritesBtn.active {
    background: #f9a825;
    color: #ffffff;
    border-color: #ffb300;
    box-shadow: 0 0 0 2px rgba(255, 215, 64, 0.45) inset;
}

/* ★ すべてのクリップボタン（緑系） */
.favorite-switch-container #showAllClipsBtn {
    border: 1px solid #4caf50;
    background: #8bc34a;      /* ベースを緑色に変更 */
    color: #1b3a13;
}

.favorite-switch-container #showAllClipsBtn:hover {
    background: #9ccc65;
    border-color: #66bb6a;
}

.favorite-switch-container #showAllClipsBtn.active {
    background: #689f38;
    color: #ffffff;
    border-color: #558b2f;
    box-shadow: 0 0 0 2px rgba(120, 180, 120, 0.45) inset;
}

.favorite-options {
    margin: 4px 0 4px 7px;
}
.favorite-ignore-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #000000;
}
.favorite-ignore-label input[type="checkbox"] {
    transform: scale(1.06);
}

/* ★ 履歴ボタン（青グレー系） */
.favorite-switch-container #showHistoryBtn.history-btn {
    width: 100%;
    max-width: 220px;                  /* 幅をお気に入りと共通に */
    padding: 6px 12px;                 /* お気に入りと同じ高さ */
    border-radius: 4px;
    border: 1px solid #4d5a6b;
    background: #607086;               /* 青グレー */
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.favorite-switch-container #showHistoryBtn.history-btn:hover {
    background: #6b7b92;
}

.favorite-switch-container #showHistoryBtn.history-btn.is-active {
    background: #4e5e74;
    box-shadow: 0 0 0 2px rgba(80, 100, 130, 0.45) inset;
}



/* セレクタ・インプット基本幅 */
#selectDatabase, #selectDatabaseOnSideBar {
    max-width: 200px;
}

/* サイドバー内のボタン共通 */
.searchButton,
.filterButton {
    border: none;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    transition: background 0.18s, color 0.18s, border 0.16s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 7px #d8cafd30;
    padding: 10px 10px;
}
.searchButton { 
    background: #4CAF50; 
    color: #fff; 
}
.searchButton:hover { 
    background: #193a9e; 
    color: #fff; 
}

/* サイドバー内のフィルタ・クリアボタン上書き */
#sidebar #buttonContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
    margin-bottom: 10px;
    padding-left: 0;
}
#sidebar #buttonContainer .rowItem {
    display: flex;
    gap: 18px;
}
@media (max-width: 500px) {
    #sidebar #buttonContainer .rowItem {
        flex-direction: column;
        gap: 11px;
    }
    #sidebar .filterButton, #sidebar #clearButton {
        width: 100%;
        justify-content: center;
    }
}
#sidebar .filterButton {
    background: linear-gradient(90deg, #33cc66 60%, #27a64c 100%);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 16px;
    font-weight: bold;
    width: 180px;
    padding: 7px 22px 7px 16px;
    box-shadow: 0 2px 8px #35c76325;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: background 0.16s, color 0.16s, box-shadow 0.15s;
}
#sidebar .filterButton:hover,
#sidebar .filterButton:focus {
    background: linear-gradient(90deg, #27a64c 50%, #21893d 100%);
    color: #e7ffe5;
    box-shadow: 0 4px 14px #24ff6e30;
}
#clearButton {
    background: linear-gradient(90deg, #ff3b30 60%, #e0261b 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    padding: 10px 14px;
    width: 180px; /* サイドバーの見た目と揃える */
    box-shadow: 0 2px 7px rgba(0,0,0,0.08);
    transition: background 0.14s, color 0.14s, transform 0.12s;
}
#clearButton:hover,
#clearButton:focus {
    background: linear-gradient(90deg, #ff1a1a 50%, #d01414 100%);
    color: #fff;
}

/* サイドバー本体・モバイル（max-width: 800px） */
@media (max-width: 800px) {
    #sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box; /* ← これがはみ出し防止の決め手 */
        padding-right: calc(15px + var(--safe-right));
        touch-action: pan-y; /* 縦スクロール優先（横パンの誤作動を軽減） */
        overflow-x: hidden;
    }
    #sidebarCloseBtn {
        top: 6px;
        right: 6px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
    #sidebarToggle {
        font-size: 15.5px;
        padding: 7px 12px;
        top: 0;
        left: 0;
        border-radius: 8px;
    }
    .basicContainer, .filter-container { max-width: 99vw; }
}

#addFavoriteKeywordBtn {
  background: #ffd600;
  color: #653e00;
  border: none;
  border-radius: 8px;
  padding: 2px 9px;
  margin-left: 5px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 1px 5px #ffd60055;
  transition: background 0.16s;
}
#addFavoriteKeywordBtn:hover {
  background: #ffec82;
}
#showFavoriteDropdownBtn.dropdown-toggle-btn {
    height: 40px;
    min-width: 20px;
    width: 20px;
    border-radius: 0 6px 6px 0;
    border-left: none;
    border: 1.5px solid #a6a6ca;
    border-left: 0;
    margin-left: -2px;  /* 枠線重なりを微調整 */
    background: #eee;
    color: #653e00;
    font-weight: bold;
    font-size: 16px;
    padding: 0;
    position: relative;
    z-index: 1;
    transition: background 0.13s;
    cursor: pointer;
    vertical-align: top;
}
#showFavoriteDropdownBtn:hover {
  background: #ffe082;
}
.custom-dropdown-wrap {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
    max-width: 420px;
}
.custom-dropdown-list {
  position: absolute;
  left: 0;
  top: 100%;
  width: calc(100%); /* wrapに合わせて幅100% */
  min-width: 170px;
  max-width: 100vw;
  background: #fff;
  border: 1.5px solid #a6a6ca;
  border-radius: 10px;
  box-shadow: 0 6px 18px #acaef422;
  margin: 2px 0 0 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  z-index: 55;
}
.custom-dropdown-list li {
  cursor: pointer;
  padding: 4px 13px;
  font-size: 14px;
  min-height: 28px;
  line-height: 1.2;
  border-bottom: 1px solid #e6e6f7;
  white-space: pre-line;
}
.custom-dropdown-list li:last-child {
  border-bottom: none;
}
.custom-dropdown-list li:hover,
.custom-dropdown-list li.active {
  background: #f5eafd;
  color: #7139d3;
}
.custom-dropdown-list li.no-result {
  color: #999;
  cursor: default;
  background: none;
}


#sidebar #start-date, #sidebar #end-date {
    width: 180px;
    min-width: 100px;
    max-width: 180px;
    margin-right: 5px;
    box-sizing: border-box;
}
#sidebar #start-time, #sidebar #end-time {
    width: 120px;
    min-width: 80px;
    max-width: 120px;
    margin-right: 5px;
    box-sizing: border-box;
}
#sidebar #start-time {
    margin-right: 62px; /* .searchButtonの幅(52px)＋余裕10px */
}
@media (max-width: 600px) {
    #sidebar .target-datetime { width: 30vw; min-width: 70px; }
    #sidebar #start-time { margin-right: 0; }
}
#sidebar .rowContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* 1行を死守 */
}

/* ラベル幅は固定（先ほどのキーワード行と同じ思想） */
#sidebar .date-start-row .rowTitle,
#sidebar .date-end-row .rowTitle,
#sidebar .date-type-row .rowTitle {
    flex: 0 0 100px; /* PC */
    margin-right: 8px;
}

/* 日付・時刻入力は同幅・同高さに統一 */
#sidebar .target-datetime {
    flex: 0 0 160px;
    width: 160px;          
    height: 40px;          
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 6px;
    min-width: 0;          /* はみ出し防止 */
}

/* 検索ボタンは固定サイズ（他の場所に影響しないようスコープ限定） */
#sidebar .date-end-row .searchButton {
    flex: 0 0 44px;
    width: 44px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#sidebar .date-end-row .searchButton img {
    width: 20px;
    height: 20px;
    display: block;
}

/* 「日時の種類」行の細かな整列（オプション） */
#sidebar .date-type-row .dateTypeLabel {
    display: inline-flex;
    align-items: center;
}
@media (max-width: 800px) {
    /* ラベル幅をやや詰める（1行維持のため） */
    #sidebar .date-start-row .rowTitle,
    #sidebar .date-end-row .rowTitle,
    #sidebar .date-type-row .rowTitle {
        flex-basis: 90px; /* モバイル */
    }

    /* 入力幅も少しだけ詰める（同幅キープ） */
    #sidebar .target-datetime {
        flex-basis: 140px;
        width: 140px;
        height: 40px;
    }

    /* 検索ボタンも僅かに詰める */
    #sidebar .date-end-row .searchButton {
        flex-basis: 42px;
        width: 42px;
        height: 40px;
    }
}


#sidebar #streamerNameFilter {
    width: calc(100% - 44px);
    min-width: 110px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}
#sidebar #streamerNameFilter-clearButton {
    width: 36px;
    min-width: 32px;
    max-width: 42px;
    display: inline-block;
    vertical-align: middle;
}
#sidebar #gameNameFilter {
    width: calc(100% - 44px);
    min-width: 110px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}
#sidebar #gameNameFilter-clearButton {
    width: 36px;
    min-width: 32px;
    max-width: 42px;
    display: inline-block;
    vertical-align: middle;
}
#sidebar #streamerNameFilter,
#sidebar #gameNameFilter {
    width: calc(100% - 44px);
    min-width: 110px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}
#sidebar #streamerNameFilter-clearButton,
#sidebar #gameNameFilter-clearButton {
    width: 36px;
    min-width: 32px;
    max-width: 42px;
    display: inline-block;
    vertical-align: middle;
}

/* 数値インプット横並び */
#sidebar .rowItem {
    display: flex;
    align-items: center;
    gap: 7px;
}
#min-view-count, #max-view-count {
    width: 100px;
    display: inline-block;
    text-align: right;
}

#sidebar .filter-container .rowContainer {
    /* 先ほどの設定で1行表示＋nowrap化済みを前提 */
    align-items: center;
}
#sidebar .filter-container .rowItem {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* ストリーマー／カテゴリーのselectは残り幅をすべて使用 */
#sidebar .filter-container #streamerNameFilter,
#sidebar .filter-container #gameNameFilter {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    /* 右側にクリアボタンを”くっつける”ため右角を落として境界線を消す */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

/* クリアボタンは固定幅＋selectに”くっつける”見た目に */
#sidebar .filter-container #streamerNameFilter-clearButton,
#sidebar .filter-container #gameNameFilter-clearButton {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: -2px;          /* selectの境界線に重ねて一体化 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: none;          /* 一体化のため左境界を消す */
    border-radius: 0 6px 6px 0; /* 右角だけ丸める */
    cursor: pointer;
    line-height: 1;
}

/* one-clearButton, one-clearButton-resp は固定幅（汎用） */
#sidebar .filter-container .one-clearButton {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#sidebar .filter-container .one-clearButton-resp {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#sidebar .filter-container .number-box {
    width: 140px;               /* 統一幅 */
    height: 40px;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 0;
}
#sidebar .filter-container .decorationText {
    margin: 0 6px;
}

#sidebar .filter-container #buttonContainer .rowItem {
    gap: 10px;
    justify-content: flex-start;
}
@media (max-width: 800px) {
    /* クリアボタンは少しだけ詰める（1行維持に寄与） */
    #sidebar .filter-container #streamerNameFilter-clearButton,
    #sidebar .filter-container #gameNameFilter-clearButton,
    #sidebar .filter-container .one-clearButton,
    #sidebar .filter-container .one-clearButton-resp {
        flex-basis: 38px;
        width: 38px;
        height: 40px;
    }

    /* number幅を少し詰める（同幅キープ） */
    #sidebar .filter-container .number-box {
        width: 120px;
    }
}

/* ラベル（行ごと） */
#sidebar .streamer-row .rowTitle,
#sidebar .game-row .rowTitle,
#sidebar .view-count-row .rowTitle {
    flex: 0 0 100px;
    margin-right: 8px;
}
@media (max-width: 800px) {
    #sidebar .streamer-row .rowTitle,
    #sidebar .game-row .rowTitle,
    #sidebar .view-count-row .rowTitle {
        flex-basis: 90px;
    }
}

/* セレクトは残り幅を使用（右のクリアボタンと一体化） */
#sidebar .streamer-row #streamerNameFilter,
#sidebar .game-row #gameNameFilter {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

/* 小フィルタボタン：サイズは .searchButton と同等（44x40） */
#sidebar .streamer-row .filterButton,
#sidebar .game-row .filterButton,
#sidebar .view-count-row .filterButton {
    flex: 0 0 44px;
    width: 44px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* === フィルタ専用の配色（紫系） === */
    background: linear-gradient(90deg, #7d41c9 40%, #9c58e1 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(156,88,225,0.22);
    border: none;
    cursor: pointer;
    transition: background 0.16s, color 0.16s, box-shadow 0.15s;
}
#sidebar .streamer-row .filterButton:hover,
#sidebar .game-row .filterButton:hover,
#sidebar .view-count-row .filterButton:hover {
    background: linear-gradient(90deg, #6731b5 40%, #7d41c9 100%);
    color: #fff;
}
#sidebar .streamer-row .filterButton img,
#sidebar .game-row .filterButton img,
#sidebar .view-count-row .filterButton img {
    width: 20px;
    height: 20px;
    display: block;
}
@media (max-width: 800px) {
    #sidebar .streamer-row .filterButton,
    #sidebar .game-row .filterButton,
    #sidebar .view-count-row .filterButton {
        flex-basis: 42px;
        width: 42px;
        height: 40px;
    }
}

/* クリアボタンの色統一（配信者・カテゴリー＝再生回数と同じ）
   - 平常：グレー
   - hover：赤
   - セレクトと一体化するため左枠線なし＆右角だけ丸め */
#sidebar #streamerNameFilter-clearButton,
#sidebar #gameNameFilter-clearButton,
#sidebar #view-count-clearButton,
#sidebar .one-clearButton,
#sidebar .one-clearButton-resp {
    background: #696969;
    color: #fff;
    border: 1px solid #808080;
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

/* セレクト横のクリアは“くっつける”見た目を維持 */
#sidebar #streamerNameFilter-clearButton,
#sidebar #gameNameFilter-clearButton {
    margin-left: -2px;
    border-left: none;
    border-radius: 0 6px 6px 0;
}

/* クリア hover は赤で統一 */
#sidebar #streamerNameFilter-clearButton:hover,
#sidebar #gameNameFilter-clearButton:hover,
#sidebar #view-count-clearButton:hover,
#sidebar .one-clearButton:hover,
#sidebar .one-clearButton-resp:hover {
    background: #ff4d4d;
    color: #fff;
    border-color: #ff4d4d;
}

/* 再生回数（number）の幅は既定の統一幅を継承（必要に応じて微調整） */
#sidebar .view-count-row .number-box {
    width: 140px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 6px;
    padding: 6px 10px;
    min-width: 0;
}
@media (max-width: 800px) {
    #sidebar .view-count-row .number-box {
        width: 120px;
    }
}


/* ================================
   ツールチップ
   ================================ */
.tooltip { position: relative; display: inline-block; cursor: pointer; }
.tooltip .tooltip-text {
    visibility: hidden;
    font-size: 14px; width: 300px; background: #555; color: #fff;
    text-align: center; border-radius: 6px; padding: 5px;
    position: absolute; z-index: 1; bottom: 100%; left: 50%;
    transform: translateX(-50%); opacity: 0; transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text, .tooltip:focus .tooltip-text {
    visibility: visible; opacity: 1;
}

/* ================================
   クリップ表示形式（グリッド／リスト／簡易再生）
   ================================ */

.sort-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin: 12px 0 18px 0;
}
.sort-controls > div {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.sort-controls label {
    margin: 0 !important;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .sort-controls {
        gap: 7px;
        flex-direction: column;
        align-items: stretch;
    }
    .sort-controls > div {
        gap: 4px;
    }
    /* ラベル全体に共通幅を設定 */
    .sort-controls label,
    .sort-control-label {
        display: inline-block;
        min-width: 65px;
        max-width: 85px;
        width: 70px;
        text-align: right;
        box-sizing: border-box;
        vertical-align: middle;
        margin-right: 0;
        font-size: 13px;
    }
    /* ラベルを必ず左寄せ・等幅に */
    .sort-control {
        display: flex !important;
        align-items: center;
        gap: 0;
        width: 100%;
    }
    /* ラベルとセレクトを横並びに */
    .sort-control > label,
    .sort-control-label {
        flex: 0 0 70px; /* 必ず同じ幅で固定 */
        margin-right: 6px;
        justify-content: flex-end; /* ←右詰め */
        display: flex;            /* ←flex必須 */
        align-items: center;
    }
    .sort-control > select,
    .sort-control select,
    .records-per-page > select,
    .clipDisplayFormatSelectContainer > select {
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 14px;
        box-sizing: border-box;
    }
    /* ラベル＋セレクトを上下詰めすぎない */
    .sort-control {
        margin-bottom: 3px;
    }
}


/* --- 共通：配信者名・ゲーム名の横並び省略対応 --- */
.clip-broadcaster,
.clip-game,
.list-clip-broadcaster-and-game {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}
.broadcaster-image,
.cat,
.broadcaster-button,
.game-button { flex: 0 0 auto; }
.broadcaster-name,
.game-name {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    color: #2751c4;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.14s, background 0.14s, text-shadow 0.14s;
    border-radius: 5px;
    padding: 2px 5px;
    outline: none;
}
.broadcaster-name:hover,
.game-name:hover,
.broadcaster-name:focus,
.game-name:focus {
    color: #1672ff;
    background: #eaf3ff;
    text-shadow: 0 1px 6px #b6d7ff80;
    text-decoration-thickness: 2px;
    outline: 2px solid #9cf1ff;
}
@media (max-width: 600px) {
    .broadcaster-name, .game-name { font-size: 12.5px; }
}

/* --- グリッド表示 --- */
#gridBody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;
    gap: 16px 10px;
    width: 100%;
    padding-left: 0;
    list-style: none;
    box-sizing: border-box;
    margin: 50px 0px;
}

/* グループ表示（配信者ごと / ゲームごと）は最大3カラム */
#gridBody.group-mode {
    grid-template-columns: repeat(3, minmax(300px, 1fr));
}

@media (max-width: 1200px) {
    #gridBody.group-mode {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
    }
}

@media (max-width: 800px) {
    #gridBody.group-mode {
        grid-template-columns: 1fr;
    }
}

.clip-item {
    background: #fff;
    padding: 8px;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-width: 500px;
    margin: 0 5px 20px 5px !important;
}
.clip-thumbnail {
    position: relative;
    width: 100%;
    overflow: visible !important;
    border-radius: 6px;
    background: #eee;
}
.thumbnail-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 110px;
    /* max-height: 180px; */
    object-fit: cover;
    border-radius: 6px;
    background: #eee;
    margin-bottom: 0;
}
/* オーバーレイ */
.clip-overlay {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 6px 8px 0 8px; z-index: 2; pointer-events: none;
}
.clip-overlay-bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 0 2px 2px 2px; z-index: 2; pointer-events: auto;
}
.clip-overlay .clip-info-top-left,
.clip-overlay .clip-info-top-right,
.clip-overlay-bottom .clip-info-bottom-left,
.clip-overlay-bottom .clip-info-bottom-right {
    pointer-events: auto;
}
.clip-rank, .clip-duration, .clip-view-count {
    background: rgba(0,0,0,0.55);
    color: #fff; padding: 3px 5px; border-radius: 15px;
    font-weight: bold; font-size: 12px; margin-right: 3px; margin-bottom: 2px;
    display: inline-block; box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    line-height: 1.3; text-shadow: 0 1px 2px #000, 0 0 2px #fff9;
}
.clip-info-top-right .clip-duration, .clip-info-top-right .clip-view-count { margin-left: 2px; margin-right: 0; }
@media (max-width: 600px) {
    .clip-rank, .clip-duration, .clip-view-count { font-size: 11.5px; padding: 2px 4px; border-radius: 12px; }
}

/* 勢い表示用の小バッジ */
/* ベース */
.velocity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e7f5ff;
    border: 1px solid #b3e0ff;
    white-space: nowrap;
    transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .12s ease-out;
}
.velocity-badge .v-label { opacity: .8; }
.velocity-badge .v-num   { font-variant-numeric: tabular-nums; font-weight: 600; }

.velocity-badge--inline {
    margin-left: 4px;
}

/* レベル別カラー（grid/list 共通） */
.velocity-badge--none {
    background: #f4f4f5;
    border-color: #d4d4d8;
    color: #71717a;
}
.velocity-badge--low {
    background: #e7f5ff;
    border-color: #b3e0ff;
    color: #1d4ed8;
}
.velocity-badge--mid {
    background: #e6ffed;
    border-color: #a8e6b0;
    color: #166534;
}
.velocity-badge--high {
    background: #fff4e0;
    border-color: #ffd08a;
    color: #92400e;
    box-shadow: 0 0 0 1px rgba(248, 180, 75, .55);
}
.velocity-badge--max {
    background: #ffe6e6;
    border-color: #ff9b9b;
    color: #b91c1c;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, .6);
    transform: scale(1.03);
}

@media (max-width: 600px) {
    .velocity-badge { font-size: 11px; padding: 2px 5px; }
}



/* オーバーレイ内ボタン（黒半透明＋白枠＋丸＋hover青） */
.clip-overlay-bottom .comment-button,
.clip-overlay-bottom .tag-button,
.clip-overlay-bottom .viewClip-button,
.clip-overlay-bottom .reaction-button,
.clip-overlay-bottom .copy-url-button,
.clip-overlay-bottom .share-x-button {
    background: rgba(0,0,0,0.55) !important;
    border-radius: 25%; border: 2px solid #fff !important;
    padding: 3px !important; margin: 0 4px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.08);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s, border-color 0.16s;
}
.clip-overlay-bottom .comment-button img,
.clip-overlay-bottom .tag-button img,
.clip-overlay-bottom .viewClip-button img,
.clip-overlay-bottom .reaction-button img,
.clip-overlay-bottom .copy-url-button img,
.clip-overlay-bottom .share-x-button img {
  -webkit-filter: none !important;
  filter: none !important;
  transition: none !important;
}
.clip-overlay-bottom .comment-button:hover,
.clip-overlay-bottom .tag-button:hover,
.clip-overlay-bottom .viewClip-button:hover,
.clip-overlay-bottom .reaction-button:hover,
.clip-overlay-bottom .copy-url-button:hover,
.clip-overlay-bottom .share-x-button:hover {
    background: rgba(30,80,255,0.29) !important; border-color: #bae0ff !important;
}
.clip-overlay-bottom .comment-button img,
.clip-overlay-bottom .tag-button img,
.clip-overlay-bottom .viewClip-button img,
.clip-overlay-bottom .reaction-button img,
.clip-overlay-bottom .copy-url-button img,
.clip-overlay-bottom .share-x-button img {
    padding: 2px; width: 22px; height: 22px; background: none; display: block;
}

.copy-url-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.copy-url-tooltip-wrap .tooltip-text {
    /* 通常は非表示 */
    display: none !important;  /* JSでのみdisplay:blockに */
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    min-width: 88px;
    left: 50%;
    bottom: 120%;
    transform: translateX(-50%);
    background: #555;
    color: #fff;
    border-radius: 6px;
    padding: 5px 18px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}
.copy-url-tooltip-wrap .tooltip-text.is-active {
    display: block !important;
}

/* タイトル（1行省略） */
.clip-title {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    color: #2446a6;
    margin: 6px 0 3px 0;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
}
.clip-title a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clip-title:hover { color: #1672ff; }
.favorite-button {
    flex: 0 0 auto;
    padding: 0 7px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #ffca28;
    vertical-align: middle;
    outline: none;
    background: none !important;
    border: none !important;
    transition: color 0.2s, transform 0.15s;
}
@media (max-width: 600px) { 
    .clip-title { 
        font-size: 13px; 
    } 
}
.favorite-button:hover {
    color: #ffa000;
    transform: scale(1.17) rotate(-7deg);
    text-shadow: 0 1px 7px #ffe08299;
}



/* --- リスト表示 --- */
#listBody { 
    width: 100%; 
    padding-left: 0; 
    list-style: none; 
    display: block; 
    margin: 50px 0px;
}
.list-clip-item {
    display: flex; align-items: center; padding: 8px 5px; margin: 10px 0;
    background: #fff; border: 1px solid #dde0e5; border-radius: 8px;
    box-shadow: 0 2px 4px rgba(140,160,200,0.07); font-size: 15px; gap: 13px;
}
@media (max-width: 600px) {
    .list-clip-item { font-size: 12px; flex-direction: column; align-items: flex-start; }
}

/* --- コンパクトテキストリスト表示 共通 --- */
.list-clip-item--compact {
    /* ▼ ここで縦並びレイアウトにする（タイトル行の下にボタン行が来る） */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    padding: 6px 8px;
    margin: 4px 0;
    box-shadow: none;
    border-radius: 4px;
    background: transparent;
    border-color: transparent;
    border-bottom-color: #dde0e5;
}

/* コンパクト系：配信者の下にゲーム（カテゴリー）を表示（行を分ける） */
.list-clip-item--compact .list-clip-row2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.list-clip-main {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* タイトル・配信者・ゲームなどの行はそのままでOK */
.list-clip-row1,
.list-clip-row2,
.list-clip-row3 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.list-clip-row1 {
    font-weight: 600;
}

.list-clip-rank {
    flex: 0 0 auto;
    color: #777;
    font-size: 0.9em;
}

.list-clip-title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-clip-broadcaster {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
}

.list-clip-game {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9em;
    color: #555;
}

.list-clip-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.list-clip-meta {
    font-size: 0.85em;
}

/* ▼ ボタンはアイテム最下部に横並びで配置 */
.list-clip-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    margin-left: 0;
}

/* スマホ時は余白だけ微調整（レイアウトはPCと同じ） */
@media (max-width: 600px) {
    .list-clip-item--compact {
        padding: 6px 6px;
    }
}




/* --- 配信者別 / ゲーム別グループ表示 共通 --- */

/* ▼ 配信者ごと / ゲームごと表示：横にはみ出さないようにする */
#gridBody.group-mode {
    overflow-x: hidden;  /* 念のため横スクロールを抑止 */
}

/* グループ全体は列幅に収まるようにする */
#gridBody.group-mode .clip-group {
    max-width: 100%;
    overflow: hidden;
}

/* ヘッダー部分（配信者名・ゲーム名など）が長くてもはみ出さないようにする */
#gridBody.group-mode .clip-group-header {
    min-width: 0;   /* flex 子要素を縮められるようにする */
}

#gridBody.group-mode .clip-group-header-main {
    min-width: 0;   /* 中のテキストブロックが縮められるようにする */
}

/* タイトルとサブテキストは省略表示（…） */
#gridBody.group-mode .clip-group-title,
#gridBody.group-mode .clip-group-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* グループ内のリストも列幅からはみ出さないようにする */
#gridBody.group-mode .clip-group-list {
    max-width: 100%;
}

#gridBody.group-mode .clip-group-list .list-clip-item {
    max-width: 100%;
    box-sizing: border-box;
}

.clip-group {
    margin-bottom: 24px;
}

.clip-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    border-bottom: 1px solid #dde0e5;
    margin-bottom: 6px;
    font-size: 14px;
}

.clip-group-header-main {
    display: flex;
    flex-direction: column;
}

.clip-group-title {
    font-weight: 700;
}

.clip-group-sub {
    font-size: 12px;
}

.clip-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 各グループは初期状態で先頭5件のみ表示（閉じている状態） */
.clip-group.is-collapsed .clip-group-list > li:nth-child(n + 4) {
    display: none;
}

/* グループの「すべて表示 / 閉じる」ボタン共通スタイル */
.clip-group-toggle {
    margin-top: 6px;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #666;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.clip-group-toggle:hover {
    opacity: 0.85;
}

/* 上部の閉じるボタン用（少し下に余白） */
.clip-group-toggle--top {
    margin-top: 4px;
}



.list-clip-title {
    display: flex; align-items: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-size: 15px; gap: 6px;
    width: 100%; min-width: 0;
}
.list-clip-title .easyViewTitle {
    flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 15px; text-decoration: underline; display: inline-block;
    vertical-align: middle; transition: color 0.18s;
}
.list-clip-title .easyViewTitle:hover { color: #1672ff; }
@media (max-width: 600px) { .list-clip-title, .list-clip-title .easyViewTitle { font-size: 13px; } }

/* --- 簡易再生表示（easyViewDisplay）--- */
#easyViewContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 420px;
    background: #fafdff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(120,120,120,0.06);
}
#easyViewBody {
    min-height: 350px;
    scrollbar-width: thin;
    scrollbar-color: #b2c2e6 #e8f0fc;
    transition: width 0.18s, flex-basis 0.18s;
}
.easyViewContent {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 1px 1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #fff;
    box-sizing: border-box;
    z-index: 900; 
}
.easyViewIframeContainer {
    width: 100%;
    margin: 0 auto 6px auto;
    aspect-ratio: 16/9;
    background: #222;
    border-radius: 9px;
    box-shadow: 0 3px 14px #b2c7e530;
    position: relative;
}
.easyViewIframeContainer iframe,
#clipEmbedIframeForEasyView {
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    min-height: 215px;
    border: none;
    border-radius: 9px;
    display: block;
    background: #111;
    max-width: 100%;
}
#easyViewIframeClipTitle{
    margin-left: 15px;
}
.easyViewIframeClipInfo {
    display: flex;
    margin-left: 15px;
}
#easyViewBody .list-clip-item {
    display: flex; 
    align-items: flex-start; 
    gap: 8px; 
    padding: 3px 3px 3px 3px;
    border-bottom: 1px solid #e0e5ee; 
    background: none; 
    cursor: pointer;
    transition: background 0.15s; 
    margin: 0; 
    border-radius: 0; 
    box-shadow: none;
}
#easyViewBody .list-clip-item:last-child { 
    border-bottom: none; 
}
#easyViewBody .thumbnail-image {
    width: 90px; 
    height: 52px; 
    min-width: 74px; 
    max-width: 120px; 
    aspect-ratio: 16/9;
    border-radius: 5px; 
    margin: 0 8px 0 0; 
    object-fit: cover; 
    background: #e2e8f0;
}
#easyViewBody .easyViewTitle {
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
    text-decoration: underline;
    line-height: 1.3; 
    display: block; 
    word-break: break-all; 
    padding: 1px 0 0 0;
    transition: color 0.18s, text-shadow 0.16s;
}
#easyViewBody .easyViewTitle:hover, #easyViewBody .easyViewSelected .easyViewTitle {
    color: #1a78d7; 
    text-shadow: 0 1px 7px #cbe2ff;
}
#easyViewBody .list-clip-info {
    flex: 1 1 0; 
    min-width: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    font-size: 13px;
}
#easyViewBody .broadcaster-image img {
    width: 30px; 
    height: 30px; 
    min-width: 24px; 
    min-height: 24px;
    border-radius: 50%; 
    object-fit: cover; 
    margin-right: 4px;
}

/* 横並び時（max-width: 850px超） */
@media (min-width: 851px) {
    #easyViewContainer {
        flex-direction: row;
        align-items: stretch;
        max-height: 90vh;
        margin: 30px 0px;
    }
    #easyViewBody {
        flex: 0 0 320px;
        max-width: 27%;
        min-width: 23%;
        overflow-y: auto;
        overflow-x: hidden;
        background: #f0f4fa;
        border-right: 1.5px solid #dde2ea;
        padding: 0;
        margin: 0;
        height: 98vh; /* ←高さを明示すると確実 */
    }
    .easyViewContent {
        flex: 1 1 0;
        min-width: 0;
        height: 98vh;         /* ←これで #easyViewBody と高さ揃う */
        max-height: 98vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
        background: #fff;
    }
    .easyViewIframeContainer {
        width: 100%;
        max-height: 100%;    /* ←.easyViewContentの高さまでしか伸びない */
        aspect-ratio: 16/9;
        background: #222;
        border-radius: 9px;
        overflow: hidden;
        box-shadow: 0 3px 14px #b2c7e530;
        position: relative;
        flex-shrink: 1;
        flex-grow: 0;
        margin: 0 auto 6px auto;
        /* 高さ上限は親の高さに依存するのでmax-height:100%で十分 */
    }
    .easyViewIframeContainer iframe,
    #clipEmbedIframeForEasyView {
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9;
        min-height: 215px;
        max-height: 100%;
        border: none;
        border-radius: 9px;
        display: block;
        background: #111;
        max-width: 100%;
        object-fit: contain;
    }
}
@media (max-width: 850px) {
    #easyViewContainer { flex-direction: column; margin: 30px 0px;}
    .easyViewContent { order: 1; }
    #easyViewBody    { order: 2; }
    #easyViewBody {
        flex: none;
        max-width: 100vw;
        width: 100%;
        min-width: 0;
        max-height: 40vh;
        overflow-y: auto;
        overflow-x: hidden;
        border-right: none;
        border-bottom: 1.5px solid #dde2ea;
    }
    .easyViewContent {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 10px 4px;
    }
    #easyViewBody .list-clip-item,
    #easyViewBody .list-clip-info {
        min-width: 0;
        max-width: 100%;
        width: 100% !important;
        box-sizing: border-box;
    }
    #easyViewBody .easyViewTitle,
    #easyViewBody .broadcaster-name,
    #easyViewBody .game-name {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
    }
}

/* ================================
   画像・ボタン・共通装飾
   ================================ */
/* 配信者アイコンなど */
.broadcaster-image img,
#easyViewIframeBroadcasterImage,
#viewModalBroadcasterImage {
    width: 48px; height: 48px;
    min-width: 32px; min-height: 32px; max-width: 54px; max-height: 54px;
    object-fit: cover; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    border: 1.5px solid #f0f0f0; background: #f6f6fa;
    margin-right: 6px; margin-left: 0; display: inline-block;
}
.cat, .upload, .event {
    width: 16px; height: 16px; margin-right: 3px; vertical-align: middle; object-fit: contain;
}

.searchButton img, .comment-button img, .tag-button img, .viewClip-button img,
.reaction-button img, .searchWordButton img, .close-button img {
    width: 22px; height: 22px; min-width: 18px; min-height: 18px; max-width: 26px; max-height: 26px;
    object-fit: contain; margin: 0 auto; padding: 0; display: block; background: none;
    border-radius: 4px; box-shadow: none;
    /* iOS 初回描画バグ対策：トランジションは hover 可能環境のみに切り出す */
    transition: none;
}

/* === モバイル環境では filter を全面無効化し、表示の安定性を確保 === */
@media (hover: none) and (pointer: coarse) {
  .searchButton img, .comment-button img, .tag-button img, .viewClip-button img,
  .reaction-button img, .searchWordButton img, .close-button img,
  .clip-overlay-bottom .comment-button img,
  .clip-overlay-bottom .tag-button img,
  .clip-overlay-bottom .viewClip-button img,
  .clip-overlay-bottom .reaction-button img,
  .clip-overlay-bottom .copy-url-button img,
  .clip-overlay-bottom .share-x-button img,
  .cat, .upload, .event {
    -webkit-filter: none !important;
    filter: none !important;
    transition: none !important;
    backface-visibility: hidden;
    transform: translateZ(0); /* ペイント強制で描画抜けを回避 */
  }
}

/* === デスクトップ等：hover 可能環境だけ filter のトランジション/エフェクトを適用 === */
@media (hover: hover) and (pointer: fine) {
  .searchButton img, .comment-button img, .tag-button img, .viewClip-button img,
  .reaction-button img, .searchWordButton img, .close-button img {
    transition: filter 0.15s;
  }
  /* （任意）アイコンの hover 効果がある場合はここに限定して記述 */
  /* 例）.comment-button img:hover { filter: brightness(0.98) drop-shadow(0 2px 6px rgba(0,0,0,.2)) saturate(1.06); } */
}

.comment-button, .tag-button, .viewClip-button, .reaction-button, .searchWordButton {
    border: none !important; background: transparent !important; outline: none;
    box-shadow: none; padding: 0; margin: 0 3px; cursor: pointer; border-radius: 7px;
    transition: background 0.16s;
    /* 共通白枠追加 */
    border: 2px solid #fff !important;
}
.comment-button:hover, .tag-button:hover, .viewClip-button:hover, .reaction-button:hover,
.searchWordButton:hover, .comment-button:active, .tag-button:active,
.viewClip-button:active, .reaction-button:active, .searchWordButton:active,
.comment-button:focus, .tag-button:focus, .viewClip-button:focus,
.reaction-button:focus, .searchWordButton:focus {
    background: rgba(120,180,240,0.06); outline: none; box-shadow: none;
}
.comment-button img:hover, .tag-button img:hover, .viewClip-button img:hover,
.reaction-button img:hover, .searchWordButton img:hover {
    filter: brightness(1.18) drop-shadow(0 2px 6px #9c58e1) saturate(1.25);
    transform: scale(1.09) rotate(-2deg);
    transition: filter 0.18s, transform 0.15s; opacity: 0.92;
}
.comment-button img, .tag-button img, .viewClip-button img, .reaction-button img,
.searchWordButton img {
    transition: filter 0.16s, transform 0.13s, opacity 0.15s; border-radius: 5px;
}
.question-mark {
    width: 18px; height: 18px; vertical-align: middle; margin-right: 2px; margin-left: 2px;
    object-fit: contain; opacity: 0.85; cursor: pointer; border-radius: 4px;
}
.searchWordButton {
    background: rgba(76,175,80.55) !important; border-radius: 50%;
    border: 2px solid #fff !important; padding: 2px !important; margin: 0 4px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.08); display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s;
}
.searchWordButton:hover { background: rgba(30,80,255,0.29) !important; }
.searchWordButton img { border-radius: 30%; padding: 2px; width: 18px; height: 18px; background: none; box-shadow: none; display: block; }

@media (max-width: 600px) {
    .clip-title, .list-clip-title, .list-clip-title .easyViewTitle { font-size: 13px; }
    .broadcaster-image img, .cat { width: 22px; height: 22px; }
}

/* =====================
   ページネーション改良
   ===================== */
.index-navigator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 28px 0 18px 0;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}

.index-navigator .paging-number ol {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 0;
    list-style: none;
    margin: 0;
}

.index-navigator li,
.index-navigator .paging-number ol li {
    margin: 0;
    padding: 0;
}

.index-navigator a,
.index-navigator .page-btn,
.index-navigator li.current > span {
    display: inline-block;
    background: #2d2a3d;
    color: #fff;
    border: 1.5px solid #9c58e1;
    border-radius: 8px;
    min-width: 44px;
    min-height: 38px;
    padding: 6px 16px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: 
      background 0.19s, 
      color 0.19s, 
      border-color 0.18s,
      transform 0.15s;
    box-shadow: 0 1px 7px rgba(156,88,225,0.06);
    text-decoration: none;
}

.index-navigator a:hover,
.index-navigator .page-btn:hover {
    background: #7d41c9;
    color: #fff;
    border-color: #c59dff;
    transform: scale(1.08);
    z-index: 2;
}

.index-navigator li.current > span,
.index-navigator .page-btn.active {
    background: #9c58e1;
    color: #fff;
    border-color: #2d2a3d;
    font-weight: 700;
    box-shadow: 0 2px 10px #c59dff48;
    cursor: default;
    transform: scale(1.12);
}

.index-navigator .ellipsis,
.index-navigator .page-ellipsis {
    color: #aab;
    background: none;
    border: none;
    font-size: 19px;
    font-weight: 700;
    padding: 0 7px;
    cursor: default;
    user-select: none;
    opacity: 0.85;
    min-width: 24px;
}

#allUpdateClipsButton {
    width: 40px;
    height: 40px;
    background: rgba(255,77,77,1) !important;
    border-radius: 20%; border: 2px solid #fff !important;
    padding: 0px !important; margin: 0 4px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.08);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.18s, border-color 0.16s;
    cursor: pointer;
}
#allUpdateClipsButton:hover {
    background: rgba(255,77,77,0.29) !important;
}
#allUpdateClipsButton img {
    padding: 2px; width: 34px; height: 30px; background: none; display: block;
}

@media (max-width: 600px) {
    .index-navigator, .index-navigator .paging-number ol { gap: 5px; }
    .index-navigator a, .index-navigator .page-btn, .index-navigator li.current > span {
        font-size: 14px;
        min-width: 30px;
        min-height: 28px;
        padding: 3px 7px;
    }
    .index-navigator .ellipsis, .index-navigator .page-ellipsis { font-size: 15px; padding: 0 3px;}
}


/* ================================
   モーダルウィンドウ・コメント・タグ・ローディング等
   ================================ */
.modal {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.7); 
    z-index: 1100;
}
/* 表示時のみ付与するクラス（またはJSで直接display:flex） */
.modal.active, .modal[style*="display: block"] {
    display: flex !important;
}
.modal-content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-start;
    padding: 0px;
    margin: auto;
    background: #fefefe;
    border: 1px solid #888;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
#viewClipModal {
    overflow-y: auto;
    padding: 12px 0;
}
#viewClipModal-content {
    max-width: 98vw;
    width: min(98vw, calc((98vh - 100px) * 16 / 9)); /* 既存の見た目に近い幅を維持 */
    margin: auto;
    overflow: visible;
}
.modal-detail-panels {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 0 10px 10px;
}
#commentArea, #tagArea {
    width: 100%;
    flex: 1 1 0;
    min-width: 0;
    min-height: 220px;
    overflow-y: auto;
    background: #fcfcfc;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
}
.clipEmbedContainer {
    position: relative;
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    background: #222;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}
.clipEmbedContainer iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 8px;
    border: none;
    background: #222;
}
.ModalClipTitle{
    margin-left: 15px;
}
.ModalClipInfo {
    display: flex;
    margin: 0 15px 8px;
}
@media (max-width: 600px) {
    #viewClipModal {
        padding: 6px 0;
    }
    #viewClipModal-content {
        max-width: 99vw;
        width: 99vw;
        padding: 0px;
    }
    .clipEmbedContainer {
        min-width: 100px;
        min-height: 80px;
        aspect-ratio: 16/17;
    }
    .modal-detail-panels {
        flex-direction: column;
        gap: 10px;
        padding: 0 8px 8px;
    }
    #commentArea, #tagArea {
        min-height: 160px;
        max-height: none;
        margin-bottom: 0;
    }
}
.clipEmbedContainer .close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(30, 30, 30, 0.2);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13);
    cursor: pointer;
    transition: background 0.18s, border 0.18s, color 0.18s, opacity 0.16s;
    opacity: 0.9;
}
.clipEmbedContainer .close-button span,
.clipEmbedContainer .close-button img {
    filter: drop-shadow(0 1px 6px #000d) drop-shadow(0 0px 2px #fff8);
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
}
.clipEmbedContainer .close-button:hover {
    background: #ff1a1a;
    opacity: 1;
}

#postCommentArea, #postTagArea { text-align: right; }
#commentContent, #tagContent { width: 100%; }
#submitComment, #submitTag {
    background: #4169e1; color: #fff; border: none; border-radius: 5px;
    font-size: 14px; height: 30px; padding: 3px 12px; margin-top: 5px; cursor: pointer;
}
.tag-container { display: flex; flex-wrap: wrap; gap: 5px; max-width: 800px; }
.tag-container div {
    background: #f0f0f0; border: 1px solid #ddd; border-radius: 5px;
    padding: 2px 5px; margin: 3px; font-size: 13px; display: inline-block;
}
.delete-button {
    background: #ff4d4d; color: #fff; border: none; border-radius: 5px; margin-left: 5px;
    font-size: 18px; cursor: pointer; padding: 2px 5px; transition: background 0.3s;
}
.delete-button:hover { background: #ff1a1a; }
#commentList { list-style: none; padding-left: 0; font-size: 15px; }
#commentList li { margin-bottom: 20px; }
.comment-meta { margin-right: 16px; }
.comment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.report-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #dc2626;
    border-radius: 999px;
    background: #fff5f5;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;
}
.report-button:hover,
.report-button:focus-visible {
    background: #fee2e2;
    border-color: #b91c1c;
    color: #991b1b;
    outline: none;
}
.report-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.dark-theme .report-button {
    background: rgba(220, 38, 38, 0.16);
    border-color: #f87171;
    color: #fecaca;
}
.dark-theme .report-button:hover,
.dark-theme .report-button:focus-visible {
    background: rgba(220, 38, 38, 0.28);
    border-color: #fca5a5;
    color: #fff1f2;
}
.pagination-link { margin-right: 12px; }
.pagination-link.current { font-weight: bold; }
.loading-screen {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.8); z-index: 10000;
    justify-content: center; align-items: center; flex-direction: column;
    color: #111827;
}
.dark-theme .loading-screen {
    background: rgba(2, 6, 23, 0.82);
    color: #f3f4f6;
}
.spinner {
    width: 40px; height: 40px;
    border: 4px solid #ccc; border-top: 4px solid #333;
    border-radius: 50%; animation: spin 1s linear infinite;
}
.dark-theme .spinner {
    border-color: rgba(255,255,255,0.22);
    border-top-color: #f9fafb;
}
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }




/* === 関連する人気クリップ === */
#relatedClipsSection {
  margin-top: 36px;
  padding-top: 4px;
}
#clip-list-title,
#related-clips-title {
  font-size: 1.5em;
  margin: 0.83em 0;
  font-weight: 700;
}
#relatedClipsBody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-content: center;
  gap: 16px 10px;
  width: 100%;
  padding-left: 0;
  list-style: none;
  box-sizing: border-box;
}
.related-clip {
  background: #fff;
  padding: 8px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 500px;
  margin: 0 5px 20px 5px !important;
}
/* === 共有モーダル 固有の見た目（共通 .modal/.modal-content は既存を使用） === */
.share-modal-content {
    width: min(720px, 96vw);
    max-height: 96vh;
    padding: 14px 14px 18px;
    border-radius: 10px;
    overflow-y: auto;
    box-sizing: border-box;
}

.share-modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    gap: 8px;
}

.share-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.share-close-btn {
    appearance: none;
    border: none;
    background: transparent;      /* 背景を透明に */
    color: #666;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    font-size: 22px;              /* “×” が見やすいサイズ */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, transform .05s;
}

.share-close-btn:hover {
    background: #e60023;          /* hover で赤 */
    color: #fff;
}

.share-close-btn:active {
    transform: translateY(1px);
}

.share-close-btn:focus-visible {
    outline: 2px solid #e60023;
    outline-offset: 2px;
}

.share-modal-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.share-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-label {
    font-weight: 600;
    font-size: 14px;
}

.share-textarea {
    width: 100%;
    min-height: 64px;
    max-height: 260px;
    padding: 10px;
    resize: vertical;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #cfd3db;
    background: #fafbff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
}

.share-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 800px) {
    .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .share-grid { grid-template-columns: 1fr; }
}


/* ========== 共有ボタン：共通 ========== */
/* ボタン自体は中立色（白地）で統一し、ブランドカラーは「アイコン画像側」に任せる */
.share-action-button {
    --share-icon-size: 24px;                 /* デスクトップの基準アイコンサイズ */
    --share-clearspace: calc(var(--share-icon-size) / 2); /* クリアスペース(=Facebook推奨 1/4X を満たす目安) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: var(--share-clearspace) 12px;   /* 上下左右に十分な余白を確保 */
    min-height: 44px;                        /* タップ領域の確保（アクセシビリティ） */
    border: none;
    border-radius: 9px;
    background: #ffffff;                     /* 白地＝Xの黒ロゴ要件も満たしやすい */
    font-weight: 600;
    color: #111;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, transform .12s;
}
.share-action-button .share-icon {
    width: var(--share-icon-size);
    height: var(--share-icon-size);
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;  /* テキストとの並びで潰れないよう固定 */
    -webkit-filter: none;  /* iOS 安定化 */
    filter: none;
}

.share-action-button:hover {
    background: #f3f6ff;
    border-color: #b9c7ff;
    transform: translateY(-1px);
}
.share-action-button.wide { width: 100%; }

@media (max-width: 600px) {
    .share-modal-content { padding: 10px; }
    .share-close-btn { width: 32px; height: 32px; font-size: 20px; }
}

/* アイコンは「無加工で見せる」。比率維持・切り抜き禁止・色変換禁止 */
.share-action-button .share-icon {
    width: var(--share-icon-size);
    height: var(--share-icon-size);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    image-rendering: auto;
    filter: none !important;                 /* 色変更禁止（ブランド規約順守） */
    transform: none !important;              /* 回転・傾き等の禁止 */
    border: 0;
    margin: 0;
    display: inline-block;
}

/* モバイル（≤600px）：LINEの最小サイズ(40px)に合わせて全ブランドを統一 */
@media (max-width: 600px) {
    .share-action-button {
        --share-icon-size: 40px;             /* LINE: Mobile最小40pxを満たす。PCは下のとおり */
        min-height: 48px;
        gap: 20px;
    }
}

/* PCでもLINEの最小20pxを満たす（既に24pxなのでOK）。他ブランドも24pxに統一 */

/* ========== 各ブランド別の最小限ルール ========== */
/* X：黒 or 白のロゴのみ／白地に黒ロゴ/黒地に白ロゴ。ここでは白地＋黒ロゴ前提。 */
.brand-x {
    /* 背景は白地を維持（黒ロゴが可読）— Xの「白に黒／黒に白」指針に適合 */
    /* もし白ロゴ版を使う場合は .brand-x.dark を用意して背景を#000にし、白ロゴを表示 */
}
.brand-x .share-icon {
    /* ロゴそのものは画像で担保。CSSでの着色や反転は行わない */
}

/* LINE：公式Brandアイコンを改変せず使用。モバイル40px/PC20px以上を満たす構成 */
.brand-line .share-icon {
    /* 画像の余白込みで isolation zone を確保できるよう、.share-action-button の余白は大きめに */
}

/* Facebook：「f」ロゴは公式配布色（Facebook Blue地の白f、または白地の黒/グレー/黒）を無加工で。 */
/* クリアスペースは 1/4X を満たすようにボタンパディングで確保 */
.brand-facebook .share-icon {
    /* 画像そのものの色・比率を保持（CSSでの色変換等は禁止） */
}

/* 文字（CTA）はどのブランドでも同じサイズで統一 */
.share-action-button span {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}





















/* === #clip-list-title にスクロールするボタン（右下固定） === */
.scroll-to-title-btn{
  position: fixed;
  right: 18px;       /* 余白あり */
  bottom: 18px;      /* 余白あり */
  z-index: 1000;     /* #playerWindow(=1050) より小さい */
  width: 44px; height: 44px;
  border: none; border-radius: 10px;
  background: rgba(0,0,0,.55);
  color: #fff; font-size: 20px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  transition: background .15s, transform .1s;
}
.scroll-to-title-btn:hover{ background: rgba(20,80,255,.35); transform: scale(1.03); }







/* === モーダル本体 === */
/* ※ #sidebar/#sidebarToggle より低くする指示に合わせる（例：sidebar=1099/1098想定） */
.player-modal{
    position: fixed; inset: 0;
    background: rgba(6,8,12,.85);
    z-index: 1100;    /* サイドバー < 前面 / プレイヤー < サイドバー */
    display: none;
}
.player-modal[aria-hidden="false"],
.player-modal.active{ display: block; }

.player-modal-content{
    box-sizing: border-box;
    width: 100vw; height: 100vh;
    margin: 0; padding: 0;
    background: #0b0f16; color: #fff;
    overflow: hidden;
    color-scheme: light dark;
}

/* プレイヤー左ペインのラッパー（リスト＋ページネーションを縦積み） */
.player-list-pane{
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 24vw;
    min-width: 260px;          /* 安全マージン（必要に応じて調整） */
}
#playerEasyViewBody .list-clip-item{
    width: 100%;
    box-sizing: border-box;
}
#playerEasyViewBody .list-clip-info{
    width: 100%;
}

@media (max-width: 800px) { /* 縦長 */
    #playerEasyViewBody, .player-list-pane {
        width: 100vw;
    }
}

.player-close-button{
  position: absolute;
  top: 10px; right: 12px;
  z-index: 3;
  background: rgba(30,30,30,.45);
  color: #fff; border: none; border-radius: 50%;
  width: 38px; height: 38px; font-size: 26px; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: background .15s, opacity .15s; opacity: .95;
}
.player-close-button:hover{ background:#ff1a1a; opacity: 1; }

/* 共通 */
.player-grid{
  display: grid;
  height: 100vh; 
  width: 100vw;
  gap: 0px; 
  padding: 0px; 
  box-sizing: border-box;
}

/* クリップリスト */
.player-list{
    list-style: none; margin: 0; padding: 0;
    overflow: auto; background: #0f1520; border-right: 1px solid #1e2740;
}
.player-modal.is-portrait .player-list{
    border-right: none; 
    border-top: 1px solid #1e2740; 
    max-height: none;
    height: 100%;
    overflow: auto;
    flex: 1 1 auto; 
}
/* リスト本体のUL/OLが #playerEasyViewBody なら、それも100%に */
.player-modal.is-portrait #playerEasyViewBody {
  height: 100%;
  overflow: auto;
}

/* ページネーションを左ペイン上部に固定 */
.player-index-navigator{
    position: sticky;
    top: 0;
    z-index: 2;
    background: #0f1520;
    padding: 6px 6px 4px;
    border-bottom: 1px solid #1e2740;
    width: 100%;
    padding-left: 76px; /* ← #sidebarToggle のぶん右へ逃がす */
}
.player-index-navigator .index-navigator {
    width: 100%;
    margin: 0px;
}
/* モバイルは#sidebarToggleが被らないので0 */
@media (max-width: 600px) {
  .player-index-navigator {
    padding-left: 0;
  }
}

/* 右側：動画＋情報 */
.player-main { 
    display: flex; 
    flex-direction: column; 
    min-width: 0; 
    min-height: 0; 
    margin: 3px 1.6vw 0 0;
}
@media (max-width: 800px) { /* 縦長 */
    .player-main { 
        margin: 0;
    }
}

/* 通常は16:9、縦長は正方形に（高さを増やす） */
.player-iframe-container{
  position: relative; 
  width: 100%;
  aspect-ratio: 16 / 9; 
  background: #111;
  border-radius: 10px; 
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  overflow: hidden;
}
.player-iframe-container iframe{
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%;
  border: none; 
  background: #000;
}
/* その1：状態クラス版 */
.player-modal.is-portrait .player-iframe-container{
  aspect-ratio: 16 / 12 !important; /* 正方形より高さを減らす */
}
/* その2：メディアクエリのフォールバック版 */
@media (max-width: 800px) { /* 縦長 */
  .player-modal .player-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  .player-modal .player-clip-info { display: none; }
  .player-modal .player-iframe-container { aspect-ratio: 16 / 12; }
}


/* タイトル & 情報 */
.player-clip-title{
  margin: 4px 10px 4px 10px;
  font-size: 16px; font-weight: 700; color: #eaf3ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-clip-info{
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin: 4px 10px 4px 10px;
}
.player-modal.is-portrait .player-clip-info{ display: none !important; } /* ← 縦長で非表示 */

.player-clip-info .p-col{ display: flex; align-items: center; gap: 6px; }
.player-clip-info .p-row{ display: flex; align-items: center; gap: 6px; }
#playerBroadcasterImage{
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid #334;
  object-fit: cover; background: #222;
}

/* 1件カード：可読性強化（背景画像なし運用） */
.player-list .list-clip-item{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  margin: 1px 0;
  padding: 10px 10px;
  border-radius: 10px;

  background: #121826;          /* 濃い面色（拡張ダークでも潰れにくい） */
  color: #eaf3ff;               /* 高コントラスト本文 */
  border: 1px solid #1e2740;    /* 既存トーンに合わせた境界 */
  box-shadow: 0 2px 8px rgba(0,0,0,.18);

  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.player-list .list-clip-item:hover,
.player-list .list-clip-item.is-active{
  background:
    linear-gradient(90deg, rgba(59,130,246,.14) 0%, rgba(59,130,246,.06) 100%),
    #162238;
  border-color: #3b82f6;
}

/* === #playerEasyViewBody：サムネを背景に使用し、文字を見やすく === */
.player-list .list-clip-item{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  padding: 8px;
  color: #fff;
}

/* active/hover時はオーバーレイを強めて強調 */
.player-list .list-clip-item:hover::before,
.player-list .list-clip-item.is-active::before{
  background:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.50) 60%, rgba(0,0,0,.30) 100%);
}

/* テキスト面は前面に */
.player-list .list-clip-info{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  border-radius: 6px;
  padding: 6px;
  backdrop-filter: blur(2px);
}

/* easyView の外観に寄せる */
.player-list .list-clip-title{ 
    font-weight: 700; 
    color: #eaf3ff; 
    text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.player-list .list-clip-broadcaster-and-game{ 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    color: #c4d2f3;
}
.player-list .list-clip-datetime{ 
    opacity: .92; 
    font-size: 13px; 
    color: #a8b6d2;
}
@media (max-width: 800px) {
    .player-list .list-clip-datetime{
        display: none;
    }

}

.player-list .list-clip-info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0; }
.player-list .easyViewTitle{
    font-size: 14px;
    color: #dbe8ff;
    text-decoration: underline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
}
.player-list .easyViewTitle:hover,
.player-list .easyViewTitle:focus{
  color: #b9d3ff;
  text-shadow: 0 1px 6px rgba(150,200,255,.45);
}

/* CSSフォールバック（任意） */
@media (min-width: 801px) { /* 横長 */
  .player-modal .player-grid {
    grid-template-columns: minmax(260px, 34%) 1fr;
    grid-template-rows: 1fr;
  }
}
@media (max-width: 800px) { /* 横長 */
  .player-modal .player-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  .player-modal .player-clip-info { display: none; }
  .player-modal .player-iframe-container { aspect-ratio: 1 / 1; }
}

/* 小さめ端末の微調整 */
@media (max-width: 600px){
  .player-close-button{ top: 8px; right: 8px; width: 32px; height: 32px; font-size: 22px; }
}

/* === 全画面プレイヤー：レイアウトの確定配置（順序制御）=== */
/* 横長：左=リスト／右=プレイヤー本体（列を明示＆配置確定） */
.player-modal.is-landscape .player-grid {
  grid-template-columns: auto 1fr !important;
  grid-template-rows: 1fr !important;
}
.player-modal.is-landscape .player-list-pane {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.player-modal.is-landscape .player-main {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* 縦長：上=プレイヤー（タイトル含む）／下=リスト（#playerEasyViewBody） */
.player-modal.is-portrait .player-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important; /* 上:プレイヤー, 下:リスト */
  row-gap: 8px;
}
.player-modal.is-portrait .player-main {
  grid-column: 1 !important;
  grid-row: 1 !important; /* ← 一番上にプレイヤー */
}
.player-modal.is-portrait .player-list-pane {
  grid-column: 1 !important;
  grid-row: 2 !important; /* ← 一番下にリスト */
  min-height: 0;
  display: flex;
  flex-direction: column;
}



/* 画面外のはみ出し防止 */
/* まずは既存の 100vw/100vh を 100% に寄せる（はみ出し抑止） */
.player-modal-content,
.player-grid {
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* 既に指定済みでもOK */
}

/* 対応ブラウザでは動的ビューポート単位で上書き（iPad対策に有効） */
@supports (height: 100dvh) {
  .player-modal-content,
  .player-grid {
    width: 100dvw;
    height: 100dvh;
  }
}




/* SEO補助テキストの控えめな表示 */
.seo-text {
    margin: 12px 8px 24px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text);
    opacity: .9;
}
.seo-text a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.seo-faq {
    margin: 10px 8px 24px;
    padding: 12px 14px;
    border: 1px solid var(--surface-border, #e5e7eb);
    border-radius: 10px;
    background: var(--surface-panel, #ffffff);
}
.seo-faq h2 {
    margin: 0 0 10px;
    font-size: 18px;
}
.seo-faq details {
    border-top: 1px solid var(--surface-border, #e5e7eb);
    padding: 9px 0;
}
.seo-faq details:first-of-type {
    border-top: none;
}
.seo-faq summary {
    cursor: pointer;
    font-weight: 700;
    line-height: 1.6;
}
.seo-faq p {
    margin: 8px 0 0;
    line-height: 1.8;
}
.seo-faq a {
    color: var(--link);
}
.dark-theme .seo-faq {
    border-color: var(--surface-border, #374151);
    background: var(--surface-panel, #0f172a);
}

/* ====== フッター（商標表記） ====== */
.site-footer {
    margin: 24px 8px 40px;
    border-top: 1px solid var(--border, #2a2a2a);
    padding-top: 12px;
    font-size: 12px;
    color: var(--text);
    opacity: 0.8;
}
.site-footer .legal-notice {
    margin: 0;
    line-height: 1.6;
}
@media (prefers-color-scheme: light) {
    .site-footer { border-top-color: rgba(0, 0, 0, 0.08); }
}





/* === ダークモード === */
.index-navigator {
    display: flex;
    align-items: center;
    margin-left: 6px;
}
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-toggle-border, #d1d5db);
    background: var(--theme-toggle-bg, #f9fafb);
    color: var(--theme-toggle-fg, #374151);
    border-radius: 8px;
    cursor: pointer;
}
.dark-theme .theme-toggle-btn {
    border-color: #374151;
    background: #111827;
    color: #e5e7eb;
}

/* === ダークモード時：ボタン“文字色のみ”変更（img入りは除外） === */
/* 1) <button> で img を含まない場合 */
.dark-theme button:not(:has(img)) {
    color: #f5f5f5;
}
/* 2) input系ボタン（imgを含むことは稀なのでそのまま文字色変更） */
.dark-theme input[type="button"],
.dark-theme input[type="submit"] {
    color: #f5f5f5;
}
/* 3) 念のため、imgを含むボタンは現状維持（ここでは何も変えない） */
/* .dark-theme button:has(img) { 何もしない } */


/* CSS変数：テキスト用 */
:root {
    --text-color: #111;         /* 通常 */
    --text-color-muted: #555;
    --text-color-strong: #000;
}
.dark-theme {
    --text-color: #e5e7eb;          /* 明るいグレー */
    --text-color-muted: #a1a1aa;    /* muted */
    --text-color-strong: #fafafa;   /* 見出しなど */
}

/* === ダークモード：フォーム/セレクト等の“中の文字色”を明確化 === */
body,
.note-container,
.note-container a,
h1, h2, h3, h4, h5, h6,
#clip-list-title,
#related-clips-title,
label,
.rowTitle,
#searchKeyword,
#searchConditions,
.clip-title,
.broadcaster-name,
.game-name,
.list-clip-title,
.list-clip-datetime,
.easyViewIframeClipTitle,
.easyViewIframeClipInfo,
.player-clip-title,
.player-clip-info,
.ModalClipTitle,
.ModalClipInfo,
.tag-container,
#commentList,
#commentPagination,
.dark-theme #selectDatabase,
.dark-theme #selectDatabaseOnSideBar,
.dark-theme #searchBox,
.dark-theme .target-datetime,
.dark-theme #streamerNameFilter,
.dark-theme #gameNameFilter,
.dark-theme .number-box,
.dark-theme .number-box input,
.dark-theme #sortOrder,
.dark-theme #sortDirection,
.dark-theme #recordsPerPageSelect,
.dark-theme #clipDisplayFormatSelect,
#easyViewBody .list-clip-title .easyViewTitle,
.favorite-ignore-label {
    color: var(--text-color);
}

/* === ダークモード時：日時・秒数・再生回数・勢いの行を少し明るく === */
/* コンパクトリスト／配信者グループ／ゲームグループ／簡易再生表示 共通 */
.dark-theme #listBody .list-clip-datetime,
.dark-theme #gridBody .list-clip-datetime,
.dark-theme #easyViewBody .list-clip-datetime {
    color: #e5e7eb;       /* 通常テキストとほぼ同じ明るさにして読みやすく */
    font-weight: 500;     /* ほんの少しだけ太字に */
}

/* 強調見出し */
h1, h2, h3, #clip-list-title, #related-clips-title, .ModalClipTitle, .player-clip-title, .easyViewIframeClipTitle {
    color: var(--text-color-strong);
}

/* 説明・注釈系をやや薄く */
.note-container,
.searchConditionsContainer,
.list-clip-datetime,
.ModalClipInfo .p-row,
.easyViewIframeClipInfo {
    color: var(--text-color-muted);
}

/* セレクトの候補テキスト（環境依存のため保険） */
.dark-theme select option {
    color: var(--text-color);
}

/* プレースホルダーもやや弱めの色に */
.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
    color: var(--text-color-muted);
}

/* === ダークモード：グリッドアイテム背景をダーク化 === */
.dark-theme .clip-item {
    background: #1f2937; /* Tailwindで言う slate-900 相当 */
}


/* ================================
   1) main#main の背景をダークで切り替え
   （保険として main も指定。main#main が存在する場合はそちらが優先）
=================================== */
.dark-theme main#main {
    background: #0b1220; /* ほんのり青みのあるダーク */
}
.dark-theme main {
    background: #0b1220;
}

/* ダークモード時：ブラウザ全体の余白もダークに揃える */
html.dark-theme,
html.dark-theme body {
    background: var(--surface-main);  /* main と同じ色に揃える */
}

/* ================================
   2) .velocity-badge のテキスト色は変えない
   （親の body や広域の color 指定の影響を受けないように固定）
=================================== */
.velocity-badge {
    color: #0f172a; /* ライト背景(#e7f5ff)で読みやすい濃色を固定 */
}
.dark-theme .velocity-badge {
    color: #0f172a !important; /* ダーク時に body 等の色継承を打ち消す */
}

/* ================================
   3) ダーク時の .clip-item 背景を見直し（やや明るめ）
   - 既存の #111827 より一段明るい #1f2937 に変更
   - .clip-title などのテキストがより読みやすく
=================================== */
.dark-theme .clip-item {
    background: #1f2937; /* slate-800 相当：文字(#e5e7eb)とのコントラスト良好 */
}

/* 参考: もし .clip-title 自体のコントラストをさらに上げたい場合（任意）
.dark-theme .clip-item .clip-title {
    color: #f3f4f6;          
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
*/


/* ================================
   ダークモード用 サーフェス変数
   （既存の text 用変数とは別に “背景/枠線” を定義）
=================================== */
:root {
    --surface-main: #ffffff;      /* ページ全体の背景（main） */
    --surface-panel: #ffffff;     /* サイドバー・モーダルの背景 */
    --surface-card: #ffffff;      /* .clip-item / #easyViewBody の背景 */
    --surface-input: #ffffff;     /* input / select 背景 */
    --surface-border: #e5e7eb;    /* 枠線系 */
}
.dark-theme {
    --surface-main: #0b1220;      /* ほんのり青みのあるダーク */
    --surface-panel: #0f172a;     /* panel用（やや暗め） */
    --surface-card: #1f2937;      /* card用（.clip-item / #easyViewBody と同色） */
    --surface-input: #111827;     /* 入力・選択系 */
    --surface-border: #374151;
}

/* ================================
   1) main#main の背景（補強）
=================================== */
.dark-theme main#main,
.dark-theme main {
    background: var(--surface-main);
}

/* ================================
   2) #sidebar の背景・文字色・境界線
=================================== */
.dark-theme #sidebar {
    background: var(--surface-panel);
    color: var(--text-color);
    border-right-color: var(--surface-border);
}

/* サイドバー内の説明テキストなど薄めの文言 */
.dark-theme #sidebar .note,
.dark-theme #sidebar .desc,
.dark-theme #sidebar .muted {
    color: var(--text-color-muted);
}

/* ================================
   3) モーダル（#viewClipModal, #shareModal）
   - それぞれの本体/中身に適用（構造差異に備えて代表的な階層もケア）
=================================== */
.dark-theme #viewClipModal,
.dark-theme #shareModal {
    color: var(--text-color);
    background: transparent; /* 背景は中身側で指定 */
}

.dark-theme #viewClipModal #commentArea,
.dark-theme #viewClipModal #tagArea {
    background: var(--surface-panel);
    color: var(--text-color);
    border-color: var(--surface-border);
}

/* よくある中身コンテナ名を網羅（存在しない場合は無視されます） */
.dark-theme #viewClipModal .modal-content,
.dark-theme #viewClipModal .modal-body,
.dark-theme #viewClipModal .modal-inner,
.dark-theme #viewClipModal-content,
.dark-theme #shareModal .modal-content,
.dark-theme #shareModal .modal-body,
.dark-theme #shareModal .modal-inner {
    background: var(--surface-panel);
    color: var(--text-color);
    border-color: var(--surface-border);
}

/* ヘッダー/フッター行がある場合 */
.dark-theme #viewClipModal .modal-header,
.dark-theme #viewClipModal .modal-footer,
.dark-theme #shareModal .modal-header,
.dark-theme #shareModal .modal-footer {
    background: var(--surface-panel);
    color: var(--text-color);
    border-color: var(--surface-border);
}

/* （任意）オーバーレイがあれば若干濃く */
.dark-theme .modal-overlay,
.dark-theme .modal-backdrop {
    background: rgba(0,0,0,0.55);
}

/* ================================
   4) #easyViewBody の背景（.clip-item と同じ）
=================================== */
.dark-theme #easyViewBody, .dark-theme .easyViewContent {
    background: var(--surface-card);
    color: var(--text-color);
}

/* 既定の .clip-item 背景（以前ご指定の明るめダークを維持） */
.dark-theme .clip-item, .dark-theme #easyViewBody .list-clip-item {
    background: var(--surface-card);
    color: var(--text-color);
    border-color: var(--surface-border);
}

/* ================================
   5) ドロップダウン/入力系の背景・枠線・文字色
   ご指定の対象をピンポイント + 一括フォールバック
=================================== */
/* ピンポイント（指定要素） */
.dark-theme #selectDatabase,
.dark-theme #selectDatabaseOnSideBar,
.dark-theme #searchBox,
.dark-theme .target-datetime,
.dark-theme .target-datetime input,
.dark-theme #streamerNameFilter,
.dark-theme #gameNameFilter,
.dark-theme .number-box,
.dark-theme .number-box input,
.dark-theme #sortOrder,
.dark-theme #sortDirection,
.dark-theme #recordsPerPageSelect,
.dark-theme #clipDisplayFormatSelect {
    background: var(--surface-input);
    color: var(--text-color);
    border-color: var(--surface-border);
}

/* 一括（フォールバック：未指定の入力も拾う） */
.dark-theme select,
.dark-theme input[type="text"],
.dark-theme input[type="search"],
.dark-theme input[type="number"],
.dark-theme input[type="date"],
.dark-theme input[type="time"],
.dark-theme textarea {
    background: var(--surface-input);
    color: var(--text-color);
    border-color: var(--surface-border);
}

/* セレクトの選択肢（ブラウザ依存のため保険） */
.dark-theme select option {
    background: var(--surface-input);
    color: var(--text-color);
}

/* プレースホルダーを薄めに */
.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
    color: var(--text-color-muted);
}

/* フォーカス時の見え方（枠線のみ軽く強調） */
.dark-theme select:focus,
.dark-theme input:focus,
.dark-theme textarea:focus {
    outline: 2px solid rgba(99,102,241,0.45); /* indigo系の薄い枠 */
    outline-offset: 1px;
    border-color: #6366f1;
}

/* 無効化状態の扱い */
.dark-theme select:disabled,
.dark-theme input:disabled,
.dark-theme textarea:disabled {
    background: color-mix(in srgb, var(--surface-input) 90%, #000 10%);
    color: color-mix(in srgb, var(--text-color) 70%, #000 30%);
    opacity: 1; /* 透明度で薄くなるのを防止（お好みで） */
}

/* ダークテーマでも白背景＋濃色テキストを維持（ロゴ視認性を最優先） */
.dark-theme .share-action-button {
    background: #ffffff;
    color: #111;
    /* ダーク背景の上でも浮きすぎないように、ごく薄い影・枠 */
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

/* ダーク時の hover も控えめに */
.dark-theme .share-action-button:hover {
    background: #f1f1f1;
    border-color: #d0d0d0;
}

/* 共有モーダルのラベル/テキストエリアは既存のダーク配色に追従（必要時） */
.dark-theme .share-label { color: var(--text-color-strong); }
.dark-theme .share-textarea {
    background: #0f172a;
    border-color: #374151;
    color: var(--text-color);
}






/* ==========================================
   .player-grid はダークモード適用外にする
   （ダーク時でも従来の配色を維持）
   ========================================== */

/* このサブツリーでは “ライト相当” の変数に戻す */
.dark-theme .player-grid {
    --text-color: #111;
    --text-color-muted: #555;
    --text-color-strong: #000;
    --surface-main: #ffffff;
    --surface-panel: #ffffff;
    --surface-card: #ffffff;
    --surface-input: #ffffff;
    --surface-border: #e5e7eb;
    color-scheme: light;
}

/* 汎用の「テキスト色を変える」ルールから保護（.player-grid 内は元の色に） */
.dark-theme .player-grid .player-clip-title {
    /* 既存のプレイヤータイトル色を維持 */
    color: #eaf3ff;
}
.dark-theme .player-grid .player-clip-info {
    /* 情報行は控えめトーンを維持 */
    color: #c4d2f3;
}
.dark-theme .player-grid .list-clip-title,
.dark-theme .player-grid .list-clip-title .easyViewTitle {
    color: #eaf3ff;
}
.dark-theme .player-grid .list-clip-broadcaster-and-game,
.dark-theme .player-grid .list-clip-broadcaster-and-game .broadcaster-name,
.dark-theme .player-grid .list-clip-broadcaster-and-game .game-name {
    color: #c4d2f3;
}
.dark-theme .player-grid .list-clip-datetime {
    color: #a8b6d2;
}

/* もし .player-grid 内にフォームが出てもライト基調で表示 */
.dark-theme .player-grid select,
.dark-theme .player-grid input[type="text"],
.dark-theme .player-grid input[type="search"],
.dark-theme .player-grid input[type="number"],
.dark-theme .player-grid input[type="date"],
.dark-theme .player-grid input[type="time"],
.dark-theme .player-grid textarea {
    background: #ffffff;
    color: #111111;
    border-color: #cfd3db;
}

/* 背景や枠線をダーク用の上書きから保護（既存固定色を優先） */
.dark-theme .player-grid .list-clip-item,
.dark-theme .player-grid .player-main,
.dark-theme .player-grid .player-list {
    background: revert;
    border-color: revert;
}

/* ==========================================
   .player-grid 内のテキストはテーマ切替の影響を受けない
   （ライト/ダークとも同一の見た目を維持）
   ========================================== */

/* リンク系：配信者名・ゲーム名（ライト時の基準色を固定） */
.player-grid .broadcaster-name,
.player-grid .game-name {
    color: #dbe8ff;               /* 既存ライト基準のブルー */
    text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
.player-grid .broadcaster-name:hover,
.player-grid .game-name:hover,
.player-grid .broadcaster-name:focus,
.player-grid .game-name:focus {
    color: #1672ff;               /* 既存ライト基準のホバー色 */
    background: #eaf3ff;
    text-shadow: 0 1px 6px #b6d7ff80;
    text-decoration-thickness: 2px;
    outline: 2px solid #9cf1ff;
}

/* タイトル：プレイヤー上部のタイトル色を固定 */
.player-grid .player-clip-title {
    color: #eaf3ff;               /* 既存プレイヤータイトルの薄い水色 */
    /* 背景は既存レイアウトに従う（透明／オーバーレイ上） */
}

/* 念押し：ダークテーマ時にも同値で固定（親の .dark-theme の色変数を無効化） */
.dark-theme .player-grid .broadcaster-name,
.dark-theme .player-grid .game-name {
    color: #2751c4;
}
.dark-theme .player-grid .player-clip-title {
    color: #eaf3ff;
}




/* ==========================================
   ダークモードでも .favorite-button の色を固定
   （一括ルール .dark-theme button:not(:has(img)) の影響を打ち消す）
   ========================================== */
.dark-theme .favorite-button,
.dark-theme .favorite-button:focus,
.dark-theme .favorite-button:active {
    color: #ffca28 !important;  /* ライト時と同じ黄色 */
}

/* hover 時もライト時と同じオレンジに */
.dark-theme .favorite-button:hover {
    color: #ffa000 !important;
}










/* ヘッダーの共有ボタン */
.share-url-li {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    position: relative;
}

.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    background-color: var(--darkreader-background-1e50ff4a, rgba(65, 105, 225, 0.8)) !important;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.18s ease;
}
.header-icon-btn:hover { background: rgba(127,127,127,.12); }
.header-icon-btn:active { transform: translateY(1px); }
.header-icon-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    /* src は後で埋める想定のため空でもレイアウトが崩れないように */
    background: transparent;
}

/* 小さなトースト風ツールチップ（コピー時に一瞬表示） */
.header-tooltip {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    background: rgba(20,20,20,.92);
    color: #fff;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 20;
}
.header-tooltip.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ダークモードでも読めるようコントラストを維持 */
:root.dark .header-tooltip {
    background: rgba(240,240,240,.96);
    color: #111;
}

/* 期限切れ通知用（任意） */
.expired-notice {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #c62828;
    color: #fff;
    border-radius: 6px;
    z-index: 9999;
}



/* 共有ボタンの注意事項ツールチップ（?アイコン） */

/* ボタンの右側に?を寄せる */
.share-url-li .share-help-tooltip {
    margin-left: 8px;
    vertical-align: middle;
}


/* 右上に出したいニーズへの補助（可能な場合） */
@media (min-width: 480px) {
    .share-url-li .share-help-tooltip .tooltip-text {
        left: auto;          /* 既存の配置を崩さず、右寄せ優先 */
        right: 0;
        transform: translateY(-6px); /* ほんの少し上に */
    }
}





/* === iOS のフォーカス時ズーム防止：全体適用 === */
@supports (-webkit-touch-callout: none) {
    input,
    select,
    textarea {
        font-size: 16px;  /* 16px以上だとiOSが自動ズームしない */
    }
}










/* ================================
   コンパクト表示用のボタンサイズ調整
   （コンパクトテキスト／配信者別／ゲーム別 共通）
   ================================ */

/* アイコン画像を小さくする */
.list-clip-item--compact .comment-button img,
.list-clip-item--compact .tag-button img,
.list-clip-item--compact .viewClip-button img,
.list-clip-item--compact .copy-url-button img,
.list-clip-item--compact .share-x-button img,
.list-clip-item--compact .searchWordButton img {
    width: 16px;
    height: 16px;
    min-width: 14px;
    min-height: 14px;
    max-width: 18px;
    max-height: 18px;
}

/* 検索ボタン（配信者／ゲーム）のアイコンも小さく */
.list-clip-item--compact .broadcaster-button img,
.list-clip-item--compact .game-button img {
    width: 14px;
    height: 14px;
}

/* コンパクト行の★ボタンだけ少し小さめに */
.list-clip-item--compact .favorite-button {
    padding: 0 4px;
    font-size: 16px;
}

/* アクション行の余白を少しだけ詰める */
.list-clip-item--compact .list-clip-actions {
    gap: 2px;
    margin-left: 4px;
}

/* アバターも少し小さくして全体のバランスを取る */
.list-clip-item--compact .list-clip-avatar {
    width: 20px;
    height: 20px;
}



/* === コンパクト系リストのアクションボタン（5行目）=== */
/* コンパクトリスト／配信者グループ／ゲームグループ共通 */
.list-clip-actions {
    display: flex;
    align-items: center;
    gap: 8px; /* ← ボタン間の左右の隙間を少し広めに */
}

/* 5行目の各ボタンの見た目を統一 */
.list-clip-actions .comment-button,
.list-clip-actions .tag-button,
.list-clip-actions .viewClip-button,
.list-clip-actions .copy-url-button,
.list-clip-actions .share-x-button {
    width: 38px;              /* 幅を統一 */
    height: 28px;             /* 高さもほぼ統一 */
    padding: 2px 0;
    border-radius: 6px;
    border-width: 1px;        /* 白い枠が太すぎたので少し細く */
    border-style: solid;
    border-color: rgba(148, 163, 184, 0.85);  /* slate-400 相当 */
    background: rgba(148, 163, 184, 0.08);    /* うっすらグレー背景でアイコンを浮かせる */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ダークモード時はさらにコントラストを上げる */
.dark-theme .list-clip-actions .comment-button,
.dark-theme .list-clip-actions .tag-button,
.dark-theme .list-clip-actions .viewClip-button,
.dark-theme .list-clip-actions .copy-url-button,
.dark-theme .list-clip-actions .share-x-button {
    border-color: #94a3b8;    /* slate-400 */
    background: #020617;      /* ほぼ背景色に近い濃紺グレーで見やすく */
}

/* アイコン画像のサイズを揃える（念のため） */
.list-clip-actions .comment-button img,
.list-clip-actions .tag-button img,
.list-clip-actions .viewClip-button img,
.list-clip-actions .copy-url-button img,
.list-clip-actions .share-x-button img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}



/* ================================
   コンパクト系 5行目ボタンの見やすさ調整（ライトテーマ）
   ================================ */

/* 通常モード（ライトテーマ）時：背景色を付けてアイコンを見やすく */
html:not(.dark-theme) .list-clip-actions .comment-button,
html:not(.dark-theme) .list-clip-actions .tag-button,
html:not(.dark-theme) .list-clip-actions .viewClip-button,
html:not(.dark-theme) .list-clip-actions .reaction-button,
html:not(.dark-theme) .list-clip-actions .copy-url-button,
html:not(.dark-theme) .list-clip-actions .share-x-button {
    background: #4b5563 !important;    /* 濃いグレー */
    border-color: #4b5563 !important;   /* 枠線も合わせる */
    border-radius: 8px;
    padding: 2px 8px !important;

    /* 幅を揃えて少し大きめに */
    min-width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* hover 時は少しだけ明るく */
html:not(.dark-theme) .list-clip-actions .comment-button:hover,
html:not(.dark-theme) .list-clip-actions .tag-button:hover,
html:not(.dark-theme) .list-clip-actions .viewClip-button:hover,
html:not(.dark-theme) .list-clip-actions .reaction-button:hover,
html:not(.dark-theme) .list-clip-actions .copy-url-button:hover,
html:not(.dark-theme) .list-clip-actions .share-x-button:hover {
    background: #374151 !important;
}










/* ================================
    タイムライン表示
   ================================ */

#timelineContainer {
    /* JS 側で display: grid に切り替える */
    display: none;
    margin-top: 16px;

    /* 配信者グループ / ゲームグループと同様のグリッドレイアウト */
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    justify-content: center;
    gap: 16px 10px;
    width: 100%;
    padding-left: 0;
    box-sizing: border-box;
    margin: 50px 0px;
}

/* 画面幅に応じて 3 → 2 → 1 カラムへ */
@media (max-width: 1200px) {
    #timelineContainer {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
    }
}

@media (max-width: 800px) {
    #timelineContainer {
        grid-template-columns: 1fr;
    }
}

/* タイムラインの時間帯ブロック表示 */
.timeline-time-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 6px 8px;
    font-size: 11px;
}

.timeline-time-block {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(120, 120, 120, 0.15);
    border: 1px solid rgba(120, 120, 120, 0.35);
}

.timeline-time-block .time-block-count {
    margin-left: 4px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .timeline-time-blocks {
        font-size: 10px;
    }
}



/* 日付ごとのグループ */
.timeline-group {
    margin-bottom: 32px;
}

/* 日付ラベル */
.timeline-date {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 4px solid #6366f1;
    font-weight: 600;
    font-size: 0.95rem;
    color: #111827;
}

.timeline-date-label {
    font-size: 0.8rem;
    color: #6b7280;
}

.dark-theme .timeline-date {
    border-left-color: #a855f7;
    color: #e5e7eb;
}

.dark-theme .timeline-date-label {
    color: #9ca3af;
}

/* タイムライン縦線 */
.timeline-wrapper {
    position: relative;
    padding-left: 22px;
}

.timeline-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 2px;
    background: rgba(148, 163, 184, 0.6);
}

.dark-theme .timeline-wrapper::before {
    background: rgba(55, 65, 81, 0.9);
}

.timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* タイムライン内の各クリップ行に丸い点を付ける */
.timeline-wrapper .timeline-list .list-clip-item {
    position: relative;
    padding-left: 8px; /* 点と縦線ぶんの余白 */
}

.timeline-wrapper .timeline-list .list-clip-item::before {
    content: "";
    position: absolute;
    top: 18px;           /* 行の縦位置に合わせる（調整ポイント） */
    left: -12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #cbd5e1; /* デフォルト */
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.55);
}

/* レベル別に色＋サイズを変える */
.timeline-wrapper .timeline-list .list-clip-item.velocity-level-none::before {
    background: #e5e7eb;
    transform: scale(.7);
    opacity: .6;
}
.timeline-wrapper .timeline-list .list-clip-item.velocity-level-low::before {
    background: #bfdbfe;
}
.timeline-wrapper .timeline-list .list-clip-item.velocity-level-mid::before {
    background: #6ee7b7;
    transform: scale(1.1);
}
.timeline-wrapper .timeline-list .list-clip-item.velocity-level-high::before {
    background: #facc15;
    transform: scale(1.2);
}
.timeline-wrapper .timeline-list .list-clip-item.velocity-level-max::before {
    background: #f97373;
    transform: scale(1.3);
}



/* 各アイテムの丸ノード */
#timelineContainer .list-clip-item--compact {
    position: relative;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 10px;
}

#timelineContainer .list-clip-item--compact::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #6366f1;
    box-shadow: 0 0 0 2px #f9fafb;
}

.dark-theme #timelineContainer .list-clip-item--compact::before {
    background: #a855f7;
    box-shadow: 0 0 0 2px #020617;
}

/* 該当なしメッセージ */
.timeline-empty {
    padding: 16px;
    text-align: center;
    color: #6b7280;
}

.dark-theme .timeline-empty {
    color: #9ca3af;
}








/* ===== 上部メニュー左側アイコン列 ===== */
.top-menu-item--navicons {
    gap: 6px;
}

/* ===== #sidebarToggle, .top-home-link, #themeToggleBtn を正方形・同サイズに統一 ===== */
.top-menu #sidebarToggle,
.top-menu .top-home-link,
.top-menu .theme-toggle-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* #sidebarToggle 見た目（上部メニュー内） */
.top-menu #sidebarToggle {
    position: static;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    font-size: 20px;
    font-weight: 800;
    box-shadow: none;
    letter-spacing: 0;
    cursor: pointer;
    user-select: none;
    transition: filter 0.16s;
}
.top-menu #sidebarToggle:hover {
    filter: brightness(0.96);
    transform: none;
}
html.dark-theme .top-menu #sidebarToggle {
    background: rgba(31, 41, 55, 0.95);
    color: #f9fafb;
    border-color: rgba(255, 255, 255, 0.20);
}

/* .top-home-link（家アイコン専用でサイズ統一） */
.top-menu .top-home-link {
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    text-decoration: none;
    font-weight: 800;
    font-size: 18px;
    user-select: none;
}
.top-menu .top-home-link:hover {
    filter: brightness(0.96);
}
html.dark-theme .top-menu .top-home-link {
    background: rgba(31, 41, 55, 0.95);
    color: #f9fafb;
    border-color: rgba(255, 255, 255, 0.20);
}

/* #themeToggleBtn を正方形に（既存paddingを潰す） */
.top-menu .theme-toggle-btn {
    padding: 0;
}

/* ===== 上部メニュー内：お気に入り切替ボタンを小さく/同サイズに揃える ===== */
.top-menu .favorite-switch-container {
    gap: 6px;
}

.top-menu .favorite-switch-container #showFavoritesBtn,
.top-menu .favorite-switch-container #showAllClipsBtn,
.top-menu .favorite-switch-container #showHistoryBtn {
    width: 128px;
    min-width: 128px;
    max-width: none;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    letter-spacing: 0.2px;
    box-sizing: border-box;
}



/* ================================
   お気に入りキーワード（サイドバー）見た目統一＆ダークモード対応
   ================================ */

/* ★保存ボタン：#addFavoriteKeywordBtn と同じ配色/質感 */
#sidebar .keyword-row #addFavoriteKeywordBtnOnSidebar {
    background: #ffd600;
    color: #653e00;
    border: none;
    border-radius: 8px;
    margin-left: 5px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 1px 5px #ffd60055;
    transition: background 0.16s;
}
#sidebar .keyword-row #addFavoriteKeywordBtnOnSidebar:hover {
    background: #ffec82;
}

/* ▼ボタン：#showFavoriteDropdownBtn と同じ見た目（※サイズは既存の固定値を優先） */
#showFavoriteDropdownBtnOnSidebar.dropdown-toggle-btn {
    border-radius: 0 6px 6px 0;
    border-left: 0;
    border: 1.5px solid #a6a6ca;
    border-left: 0;
    background: #eee;
    color: #653e00;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    z-index: 1;
    transition: background 0.13s;
    cursor: pointer;
    vertical-align: top;
}
#showFavoriteDropdownBtnOnSidebar.dropdown-toggle-btn:hover {
    background: #ffe082;
}

/* ダークモード：▼ボタンが背景に溶けないように */
html.dark-theme #showFavoriteDropdownBtn.dropdown-toggle-btn,
html.dark-theme #showFavoriteDropdownBtnOnSidebar.dropdown-toggle-btn {
    background: rgba(31, 41, 55, 0.95);
    color: #f9fafb;
    border-color: rgba(255, 255, 255, 0.20);
}
html.dark-theme #showFavoriteDropdownBtn:hover,
html.dark-theme #showFavoriteDropdownBtnOnSidebar:hover {
    background: rgba(55, 65, 81, 0.95);
}

/* ダークモード：お気に入りドロップダウン背景を暗めに */
html.dark-theme #favoriteDropdown.custom-dropdown-list,
html.dark-theme #favoriteDropdownOnSidebar.custom-dropdown-list {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
html.dark-theme #favoriteDropdown.custom-dropdown-list li,
html.dark-theme #favoriteDropdownOnSidebar.custom-dropdown-list li {
    color: #e5e7eb;
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
html.dark-theme #favoriteDropdown.custom-dropdown-list li:hover,
html.dark-theme #favoriteDropdown.custom-dropdown-list li.active,
html.dark-theme #favoriteDropdownOnSidebar.custom-dropdown-list li:hover,
html.dark-theme #favoriteDropdownOnSidebar.custom-dropdown-list li.active {
    background: #1f2937;
    color: #e9d5ff;
}
html.dark-theme #favoriteDropdown.custom-dropdown-list li.no-result,
html.dark-theme #favoriteDropdownOnSidebar.custom-dropdown-list li.no-result {
    color: #9ca3af;
}


/* ================================
   タグ表示の視認性改善
   - #tagDiv 自体に少し面を付ける
   - タグチップの背景/文字色を明示してダーク時のコントラストを確保
=================================== */
#tagDiv.tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: none;
    min-height: 48px;
    padding: 8px;
    margin-top: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    box-sizing: border-box;
}

#tagDiv.tag-container > div {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 9px;
    margin: 0;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.35;
    box-sizing: border-box;
    word-break: break-word;
}

#tagDiv.tag-container .delete-button {
    flex: 0 0 auto;
    margin-left: 2px;
}

.dark-theme #viewClipModal #tagDiv.tag-container {
    background: #0b1220;
    border-color: #334155;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dark-theme #viewClipModal #tagDiv.tag-container > div {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

.dark-theme #viewClipModal #tagDiv.tag-container > div:hover {
    background: #334155;
}

.dark-theme #viewClipModal #tagDiv.tag-container .delete-button {
    background: #b91c1c;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dark-theme #viewClipModal #tagDiv.tag-container .delete-button:hover {
    background: #dc2626;
}

@media (max-width: 600px) {
    #tagDiv.tag-container {
        gap: 6px;
        padding: 7px;
    }

    #tagDiv.tag-container > div {
        max-width: 100%;
    }
}

/* =========================================
   playerWindow：縦スクロール型ショートプレイヤー
   追記用
========================================= */
.top-menu #openPlayerWindowBtn.player-open-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
html.player-window-open,
body.player-window-open {
    overflow: hidden !important;
}

#playerWindow.player-modal {
    background: rgba(0, 0, 0, 0.96) !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

#playerWindow .player-modal-content {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    background: #000 !important;
}

#playerWindow .player-grid {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#playerWindow .player-list-pane,
#playerWindow .player-index-navigator,
#playerWindow #playerEasyViewBody,
#playerWindow #playerPaginationList {
    display: none !important;
}

#playerWindow .player-main {
    position: relative;
    width: min(100%, 1200px);
    height: 100%;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#playerWindow .player-iframe-container {
    width: min(94vw, 1200px);
    max-height: 78vh;
    aspect-ratio: 9 / 16 !important;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

#playerWindow .player-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

#playerWindow .player-clip-title {
    width: min(94vw, 1200px);
    margin: 0 !important;
    font-size: 15px;
    font-weight: 700;
    color: #f8fbff;
}

#playerWindow .player-clip-info {
    width: min(94vw, 1200px);
    margin: 0 !important;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(7, 13, 25, 0.78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

#playerWindow .player-clip-info .p-col {
    min-width: 0;
}

#playerWindow #playerBroadcasterImage {
    width: 44px;
    height: 44px;
    border-radius: 999px;
}

#playerWindow .player-progress-badge {
    position: absolute;
    top: max(8px, env(safe-area-inset-top, 0px));
    left: 8px;
    z-index: 5;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(10, 18, 32, 0.82);
    color: #f7fbff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

#playerWindow .player-gesture-hint {
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

#playerWindow.is-page-loading::after {
    content: 'Loading next clips...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    z-index: 6;
}

@media (max-width: 700px) {
    #playerWindow .player-modal-content {
        padding: 0;
    }

    #playerWindow .player-main {
        width: 100%;
        gap: 8px;
    }

    #playerWindow .player-iframe-container {
        width: 100vw;
        max-height: 74vh;
        border-radius: 0;
    }

    #playerWindow .player-clip-title,
    #playerWindow .player-clip-info {
        width: min(100vw - 16px, 520px);
    }

    #playerWindow .player-clip-title {
        font-size: 14px;
        padding: 0 2px;
    }

    #playerWindow .player-clip-info {
        padding: 6px 8px;
        font-size: 12px;
    }
}