/* =========================================================
   BASE：全体の土台
   ========================================================= */

/* 全要素を border-box にして、padding/border込みで幅計算 */
* { box-sizing: border-box; }

/* ページ余白を消す（初期の謎余白対策） */
html, body { margin: 0; padding: 0; }

/* 既定の文字色・文字サイズ(ダークモード) */
body { color:#fff; background:#000; font-size:16px; }

/* ライトモード */
body.light{
  background:#ffffff;
  color:#222;
}

/* =========================================================
   ローディングスピナー
   ========================================================= */
#loadingOverlay{
  position: fixed;
  inset: 0;
  background: #198caa;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 99999;

  transition: opacity 0.4s ease;
}

/* フェードアウト用 */
#loadingOverlay.fade-out{
  opacity: 0;
  pointer-events: none;
}


/* =========================================================
   HEADER：上部ヘッダー（タイトル + スマホ用 ? ボタン）
   ========================================================= */

#header{
  display:flex;                /* 横並び */
  align-items:center;          /* 縦中央揃え */
  justify-content:space-between; /* 左右に分ける */
  height:42px;                 /* ヘッダー高さ固定 */
  padding:0 8px;               /* 左右余白 */
  background-color:#198caa;    /* 背景色 */
}

#header .header_title{
  padding:2px;
  color:#fff;
  font-weight:700;             /* 太字 */
  font-size:32px;
  display:inline-block;
  font-family:"CraftMincho", serif !important;

  text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
}

/* タイトルを左固定 */
.header_left{
  flex:0 0 auto;
}

/* スマホ用の「？」ボタン（PCでは隠す） */
.infoBtn{
  display:none;                /* PCで非表示 */
  width:34px;
  height:34px;
  border-radius:999px;        
  border:2px solid rgba(255,255,255,.95);
  background:transparent;
  color:#fff;
  font-size:18px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}


/* =========================================================
   LAYOUT：画面全体の2カラム構成（左：プレイヤー / 右：リスト）
   ========================================================= */

#main{
  display:flex;                /* 左右2カラム */
  gap:10px;                    /* カラム間の隙間 */
  align-items:flex-start;      /* 上詰め */
  padding:10px;
}

/* =========================================================
   LEFT COLUMN：プレイヤー領域
   ========================================================= */

#leftColumn{
  width:40%;                   /* PCは左50% */
  height:100%;
}

#player{
  width:100%;
  height:100%;
  margin-bottom: 4px;
  aspect-ratio:16/9;           /* 16:9 を保って伸縮 */
}


/* =========================================================
   SITE INFO：PC用 details（スマホはモーダルに置き換え）
   ========================================================= */

#siteInfo{
  margin-top:10px;
  border:1px solid #d7d7d7;
  border-radius:10px;
  padding:10px;
  background:#f7f7f7;
}

#siteInfo summary{
  cursor:pointer;              /* クリックできることを示す */
  font-weight:800;
}

.infoContent{
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
}


/* =========================================================
   SIDEBAR：右カラム（検索 + フィルタ + リスト）
   ========================================================= */

#sidebar{
  flex:1;                      /* 余った幅を取る */
  min-width:360px;             /* PCで潰れないよう最低幅 */
}


/* =========================================================
   NOW PLAYING（上部の再生中表示）
   ========================================================= */

#nowPlaying{
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px 5px;
  margin: 0 0 8px;
  border:1px solid #d7d7d7;
  border-radius:10px;
  background:#f7f7f7;
  overflow:hidden;             /* はみ出しを見せない */
}

.npLabel{
  display:inline-block;
  width:auto;
  font-size:12px;
  font-weight:700;
  color:#555;
  padding:3px 8px;
  border-radius:999px;         /* ピル型 */
  background:#ececec;
  white-space: nowrap;         /* ラベルは折り返さない */
  flex:0 0 auto;               /* サイズ固定 */
}

.npText{
  font-size:14px;
  font-weight:600;
  min-width: 0;                /* これがないと ellipsis が効かないことがある */
  overflow:hidden;
  text-overflow:ellipsis;      /* 省略記号 */
  white-space:nowrap;
  flex:1 1 auto;               /* 残りを使う */
}

.npSep{ opacity:.55; }         /* 区切り表示を薄く */


/* =========================================================
   INPUTS：検索 / フィルタ / 年
   ========================================================= */

#searchInput{
  width:100%;
  height: 36px;
  padding:8px;
  margin-bottom:8px;
  border-radius:6px;
  border:1px solid #bbb;
  font-size:16px;
}

.filterRow{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:4px;

  flex-wrap: wrap;
}

#filterSelect, #yearSelect, #sortDateSelect{
  padding:8px;
  border-radius:6px;
  border:1px solid #bbb;
}

#filterSelect{ width:170px; }
#yearSelect{ width:140px; }
#sortDateSelect{ width: 120px;}

#countArea{
  margin-bottom: 2px;
  font-size:14px;
}


/* =========================================================
   LIST WRAPPER：リスト全体のラッパー
   ========================================================= */

#listWrapper{
  display:flex;
  flex-direction:column;
  gap:6px;
}


/* =========================================================
   DESKTOP LIST：テーブル風（横スクロールあり）
   ========================================================= */

/* ヘッダーと本体は横スクロールできるようにする */
#listHeaderWrapper, #videoListContainer{
  overflow-x:auto;
  scrollbar-width:thin;        /* Firefox：スクロールバーを細く */
}

/* ヘッダー側はスクロールバー自体は見せない（見た目優先） */
#listHeaderWrapper{
  -ms-overflow-style:none;     /* IE/Edge旧：バー非表示 */
  scrollbar-width:none;        /* Firefox：バー非表示 */
  background:#2a2a2a;
  border-radius:6px;
}

/* WebKit系（Chrome/Safari）：スクロールバーを隠す */
#listHeaderWrapper::-webkit-scrollbar,
#videoListContainer::-webkit-scrollbar{ display:none; }

/* テーブルヘッダー行 */
#listHeader{
  display:flex;
  min-width:1200px;            /* 横スク前提の最小幅 */
  padding:8px;
  border-radius:6px;
  align-items:center;
  background:transparent;
}

/* サムネ列のヘッダー幅 */
.thumbHeader{ flex:0 0 94px; }

/* 共通列：複数行クランプ（PCで長文を抑える） */
.col{
  flex:0 0 220px;
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;        /* 4行で省略（WebKit系） */
  line-clamp:1;               /* 参考：標準化途上 */
}

/* ソートできるヘッダー列（矢印を擬似要素で描く） */
.headerCol{
  cursor:pointer;
  position:relative;
  font-weight:700;
}

/* 未ソート（デフォ）っぽい▼ */
.headerCol.sort-default::after{
  content:"";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid #fff;
  filter: drop-shadow(0 0 1px #333);
}

/* 昇順 ▲ */
.headerCol.sort-asc::after{
  content:"";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-60%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-bottom:8px solid #000;
}

/* 降順 ▼ */
.headerCol.sort-desc::after{
  content:"";
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-40%);
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid #000;
}


/* ---------------------------------------------------------
   DESKTOP LIST ROWS：リスト本体（縦スクロール）
   --------------------------------------------------------- */

#videoListContainer{
  max-height:680px;            /* PCでの表示高さ（縦スク） */
  overflow-y:auto;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール */
}

.videoItem{
  display:flex;
  min-width:1200px;            /* ヘッダーと揃える */
  padding:4px 0;
  border-bottom:1px solid #bbb;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* モバイルのタップハイライト抑制 */
}

.videoItem:hover{ background:#1a1a1a; }

.thumbWrapper{
  flex:0 0 105px;              /* サムネ列固定 */
  display:flex;
  flex-direction:column;
  align-items:center;
}

.thumb{
  width:100px;
  height:56px;
  object-fit:cover;            /* 画像をトリムして収める */
  border-radius:6px;
}

.date{
  position: relative;
  top: 1px;   
  font-size:12px;
  color:#fff;
}

/* 各カラム幅（PC用） */
.col-song{     flex:0 0 260px; white-space:pre-line; padding-left:6px; }
.col-singer{   flex:0 0 200px; padding-left:6px; }
.col-artist{   flex:0 0 180px; padding-left:6px; }
.col-composer{ flex:0 0 160px; padding-left:6px; }
.col-title{    flex:1 1 auto; min-width:320px; padding-left:6px; }

/* リンクの見た目 */
.col a{ color:#0066cc; text-decoration:underline; }

/* リンクじゃない列用（色と下線を戻す） */
.col.nolink{ text-decoration:none; color:#bbb; }

/* 再生中の行を薄くハイライト */
.videoItem.is-playing{ background:#2a2a2a; }
.videoItem.is-playing:hover{ background:#1a1a1a; }


/* =========================================================
   TOOLTIP：（タップ/ホバーで詳細表示）
   ========================================================= */

#tooltip{
  position:fixed;
  z-index:9999;
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:6px 10px;
  border-radius:6px;
  font-size:14px;
  max-width:10vw;              /* PCは小さめ */
  line-height:1.4;
  display:none;                /* JSで出し入れ */
  white-space:normal;
  pointer-events:none;         /* 触れない（クリックを邪魔しない） */
}


/* =========================================================
   MODAL：スマホの ? ボタンで出す情報モーダル
   ========================================================= */

.modal{
  display:none;                /* 開くときだけ表示 */
  position:fixed;
  inset:0;                     /* top/right/bottom/left:0 */
  z-index:9998;
}
.modal.is-open{ display:block; }

.modalOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);  /* 背景暗幕 */
}

.modalPanel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(92vw, 560px);
  max-height:80vh;
  background:#333;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid #eee;
}

.modalTitle{ font-weight:900; }

.modalClose{
  cursor:pointer;
  border:none;
  background:transparent;
  font-size:22px;
  line-height:1;
  color: #fff
}

.modalBody{
  padding:12px;
  overflow:auto;               /* 中身だけスクロール */
}

.modalText{
  font-size:14px;
  line-height:1.6;
}

/* lightモード */
body.light .modalPanel{
  background:#ffffff;
  color:#222;
}

body.light .modalHeader{
  border-bottom:1px solid #ddd;
}

body.light .modalClose{
  color:#222;
}

/* 背景の暗幕を少し弱める（好みで） */
body.light .modalOverlay{
  background:rgba(0,0,0,.3);
}

/* 本文テキスト */
body.light .modalText{
  color:#333;
}

/* リンクも見やすく */
body.light .modalText a{
  color:#0066cc;
}


/* =========================================================
   MOBILE NOW PLAYING BAR：スマホ下の再生バー
   ※ ここが重複してたのでまとめた（.spNowPlayingBar と #spNowPlayingBar）
   ========================================================= */

/* “要素が class でも id でも同じ見た目”にするため併記 */
#spNowPlayingBar, .spNowPlayingBar{
  position:fixed;
  z-index:9999;                /* 画面最前面 */
  display:none;                /* 通常は隠す（is-visibleで表示） */
  align-items:center;
  justify-content:space-between;
  gap:12px;

  background:#f7f7f7;
  border:1px solid #d7d7d7;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* 表示ON（JSで付け外しする想定） */
#spNowPlayingBar.is-visible,
.spNowPlayingBar.is-visible{ display:flex; }

/* 左：曲情報（省略のため min-width:0 必須） */
.spnp-left{ flex:1 1 auto; min-width:0; }

/* 右：ボタン */
.spnp-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  margin-left:auto;            /* 右寄せ */
  margin-right:12px;           /* 右端から少し内側へ */
}

/* 小さめ丸ボタンの共通スタイル（必要なら他ボタンにも） */
.spnp-btn{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid #cfcfcf;
  background:#fff;
  cursor:pointer;
  font-size:15px;
  font-weight:800;
}

/* 再生バーが出ているとき、ページ本体が隠れないよう下余白を足す */
body.has-spbar{ padding-bottom:50px; }

/* “再生/停止”のメインボタンだけ大きく */
#spPlayPauseBtn{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;          /* 中央に配置 */
  padding:0;
  line-height:0;
}

/* アイコン位置調整（矢印だけ動かす用） */
.spnp-icon{
  display:inline-block;
  line-height:1;
  transform: translate(1px, 0px); /* X,Y を好きに調整 */
}

/* 1行表示 + はみ出しだけマルキー（JSで is-marquee を付ける想定） */
.spnp-line{
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

#spNowPlayingBar.is-marquee .spnp-line{ text-overflow:clip; }

.spnpMarquee{
  display:inline-flex;
  align-items:center;
  gap:6px;
  will-change:transform;
}

#spNowPlayingBar.is-marquee .spnpMarquee{
  animation: spMarquee var(--sp-marquee-duration, 12s) ease-in-out infinite;
}

@keyframes spMarquee{
  0%, 15%   { transform: translateX(0); }
  45%, 55%  { transform: translateX(calc(-1 * var(--sp-marquee-shift, 0px))); }
  85%, 100% { transform: translateX(0); }
}


/* =========================================================
   RESPONSIVE：スマホ（<=1000px）上書きまとめ
   ========================================================= */

@media (max-width: 1000px){
  #main{ flex-direction:column;   gap:4px; padding-bottom: 70px;} /* 2カラム→縦積み */
  
  html, body{ overflow-x:hidden; }/* ページ横スクロール禁止 */
  #leftColumn{ width:100%; }      /* プレイヤー全幅 */
  #sidebar{
    min-width:0;
    width:100%;
    order: 2;
  }

  /* ---------- header ---------- */
  .infoBtn{
    display:inline-flex;       /* スマホだけ ? ボタン表示 */
    align-items:center;
    justify-content:center;
  }

  /* PC用 details はスマホでは隠す（モーダルに任せる） */
  #siteInfo{ display:none; }

  /* tooltip をスマホでは大きめに */
  #tooltip{ max-width:70vw; }

  /* ---------- list (mobile card) ---------- */
  #listHeaderWrapper{ display:none; } /* テーブルヘッダーは非表示 */

  #videoListContainer{
    overflow-x:hidden !important; /* 横スク禁止 */
    overflow-y:auto !important;   /* 縦スクのみ */
    max-height: none;             /* 画面を埋めすぎない */
    height: auto;
    /* border-radius:10px; */
    touch-action: pan-y;          /* “縦のみ”を明示（横ブレ抑制） */
    overscroll-behavior: contain; /* 親へのスクロール伝搬抑制 */
    -webkit-overflow-scrolling: touch;
  }

  #videoList{ width:100%; }       /* ul/div などの想定 */

  .videoItem{
    min-width:0 !important;       /* PC用 min-width を解除 */
    width:100%;
    display:grid;                 /* カード配置 */
    grid-template-columns: 90px 1fr; /* 左：サムネ / 右：情報 */
    column-gap:6px;
    row-gap:0px;
    padding:6px 8px;
    align-items:start;
  }

  .thumbWrapper{
    grid-column:1;
    grid-row:1 / span 4;          /* 左を縦に使う */
    width:90px;
    flex:unset;
  }

  /* サムネを小さめに（ここだけ数字変えればOK） */
  .thumb{ width:90px; height:50px; }
  .date{ font-size:11px; 
    top: 2px;  
  }
  /* 日付だけ微調整（例：少し上、少し右） */


  .col{
    grid-column:2;
    flex:unset;
    width:auto;
    display:block;
    min-width:0;
    overflow:hidden;
  }

  /* 表示順：曲名 → (アーティスト+作曲) → 歌唱 → 引用 */
  .col-song{ order:1; padding-left:4px; }
  .col-meta{ order:2; padding-left:4px; }
  .col-singer{ order:3; padding-left:4px; }
  .col-title{ order:4; padding-left:4px; }

  .col-song{ font-weight:800; font-size:14px; line-height:1.2; }
  .metaItem.metaArtist{ font-size:12px; color:#bbb; }
  .metaItem.metaComposer{ font-size:10px; color:#bbb; }
  .col-singer{ font-size:10px; color:#bbb; }
  .col-title{ font-size:10px; color:#bbb; }

  /* artist + composer を横並び（各要素は1行で…） */
  .metaRow{
    display:flex;
    gap:8px;
    align-items:baseline;
    flex-wrap:nowrap;
    min-width:0;
  }
  .metaItem{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 2行以上になりそうなテキストは1行に潰して「…」 */
  .tapTip{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }

  /* 引用（リンク）はタップで飛ぶ：リンク自体も1行省略 */
  .col-title a{
    display:block;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ---------- mobile bottom bar：角丸なし・横/下に張り付き ---------- */
  #spNowPlayingBar, .spNowPlayingBar{
    left:0;
    right:0;
    bottom:0;

    width:100%;
    margin:0;

    border-radius:0;            /* 角丸なし */
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-top:1px solid #d7d7d7;

    /* iPhoneホームバー分も含めて下 padding を確保 */
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* 省モーション設定ならマルキー停止 */
  @media (prefers-reduced-motion: reduce){
    #spNowPlayingBar.is-marquee .spnpMarquee{ animation:none; }
  }
  /* iOS Safariでも<select>をできるだけ統一する */
  #filterSelect, #yearSelect, #sortDateSelect{
  -webkit-appearance: none;
  appearance: none;

  background-color: #fff;
  color: #222;

  border: 1px solid #bbb;
  border-radius: 6px;

  padding: 8px;  
  line-height: 1.2;

  font-size: 12px; /* iOSの“タップで勝手に拡大”も防げる */

  /* ▼ 簡易の下矢印（背景で描く） */
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
#filterSelect:focus, #yearSelect:focus, #sortDateSelect:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(25,140,170,.25);
}
#filterSelect{ width:140px; }
#yearSelect{ width:120px; }
#sortDateSelect{ width: 100px;}



html, body,
  input, select, button, textarea{
    font-family:
      "Noto Sans JP",
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      "Yu Gothic",
      "Meiryo",
      system-ui,
      sans-serif;
  }

  /* ついでにiOSの勝手な文字拡大を抑えたいなら */
  body{ -webkit-text-size-adjust: 100%; }

  #randomPlayerBox{
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 6px;
    order: 1;
  }

  body.light .col-singer,
  body.light .date{
    color:#222; /* 曲名と同じ */
  }
  #videoListContainer{
    max-height: 70vh;  
    overflow-y: auto;
  }
}

/* リンク色も少し明るめに */
a{
  color:#4da3ff;
}

/* 検索ボックス */
#searchInput{
  background:#2a2a2a;  /* グレー */
  color:#fff;
  border:1px solid #555;
}

/* select も暗くするなら */
#filterSelect,
#yearSelect, #sortDateSelect{
  background:#2a2a2a;
  color:#fff;
  border:1px solid #555;
  flex: 0 0 auto; 
}

/* パネル系を暗くする（統一感） */
#siteInfo,
#nowPlaying,
#spNowPlayingBar{
  background:#1a1a1a;
  border:1px solid #333;
}

/* =========================================================
   Custom Font
   ========================================================= */

@font-face{
  font-family:"CraftMincho";
  src:url("/static/font/craftmincho.otf") format("opentype");
  font-weight:normal;
  font-style:normal;
}

#rocoFilterBtn {
  padding: 6px 12px;
  cursor: pointer;

  border: none;
  border-radius: 999px; /* 丸み */
  
  background: #2a2a2a;
  color: #fff;

  font-size: 12px;
  font-weight: 700;

  /* 影（浮いてる感じ） */
  box-shadow: 0 3px 0 #111, 0 4px 8px rgba(0,0,0,0.4);

  transition: all 0.15s ease;
}

/* ホバー（PC） */
#rocoFilterBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #111, 0 6px 12px rgba(0,0,0,0.5);
}

/* ON状態（鏑木のみ） */
#rocoFilterBtn.active {
  background: linear-gradient(#198caa, #146d85);
  background-color: #198caa !important;
  color: #fff !important;
  border: 1px solid #198caa;
  /* 押されてる状態を維持（影なし気味） */
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0f5f73;
}

/* 鏑木ボタン */
body.light #rocoFilterBtn{
  background:#eee;
  color:#222;
  box-shadow: 0 3px 0 #ccc;
}

body.light #rocoFilterBtn.active{
  box-shadow: unset;
}

.categoryButtons{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:6px 0;
}

.categoryButtons button{
  padding:6px 10px;
  border-radius:999px;
  border:none;
  background:#2a2a2a;
  color:#fff;
  font-size:12px;
  cursor:pointer;
}

.categoryButtons button.active{
  background:#198caa;
}

#randomPlayerBox{
  padding:10px;
  border-radius:10px;
  background:#1a1a1a;
  border:1px solid #333;
}

#randomPlayerBox div{
  font-size:13px;
  margin-bottom:2px;
}

#randomBtn{
  font-size: 12px;
  padding:4px 8px;
  border:none;
  border-radius:6px;
  background:#198caa;
  color:#fff;
  cursor:pointer;
  flex:0 0 auto;
}

#randomBtn.active{
  transform: scale(0.95);
  background:#146d85;
}

.categoryButtons.square{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:6px 0;
}

.categoryButtons.square button{
  padding:6px 10px;
  border-radius:6px; /* ←丸じゃなく四角 */
  border:1px solid #555;
  background:#2a2a2a;
  color:#fff;
  font-size:12px;
  cursor:pointer;
}

.categoryButtons.square button.active{
  background:#198caa;
  border-color:#198caa;
}

#randomSingerLine{
  font-size:12px;
  color:#bbb;
}

.categoryButtons.square button{
  padding:6px 12px;
  border-radius:8px;
  border:none;

  background:#2a2a2a;
  color:#fff;

  font-size:12px;
  font-weight:700;

  cursor:pointer;

  /* 👇 立体感（鏑木ボタンと同系統） */
  box-shadow: 0 3px 0 #111, 0 4px 8px rgba(0,0,0,0.4);

  transition: all 0.15s ease;
}

/* ホバー（浮く） */
.categoryButtons.square button:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 0 #111, 0 6px 12px rgba(0,0,0,0.5);
}

/* 押した瞬間（沈む） */
.categoryButtons.square button:active{
  transform: translateY(2px);
  box-shadow: 0 1px 0 #111, 0 2px 4px rgba(0,0,0,0.3);
}

/* ON状態（選択中） */
.categoryButtons.square button.active{
  background: linear-gradient(#198caa, #146d85);
  color:#fff;

  transform: translateY(2px);
  box-shadow: 0 1px 0 #0f5f73;
}

#randomSongLine{
  font-weight:700;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block; 
}

#randomSongLine a,
#randomSongLine span{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* リンクも同じ挙動に */
#randomSongLine a{
  max-width:100%;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 曲テキスト部分 */
.randomText{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.randomTopRow{
  display:flex;
  align-items:center;
  gap:8px;
}

#randomPlayBtn{
  font-size:12px;
  padding:4px 10px;
  border:none;
  border-radius:6px;
  background:#198caa;
  color:#fff;
  cursor:pointer;
}

.toggle-button-1 {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 36px;
  border-radius: 999px;
  background-color: #ccc;
  cursor: pointer;
  transition: background-color .3s;
  font-size: 12px;
  font-weight: bold;
}

/* ON時（青系） */
.toggle-button-1:has(:checked) {
  background-color: #198caa;
}

/* スライド部分（白丸→横長） */
.toggle-button-1::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 58px;   /* ←横長に */
  height: 30px;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

  display: flex;
  align-items: center;
  justify-content: center;

  content: "Light"; /* 初期 */
  color: #333;

  transition: all .3s;
}

/* ON時：右へ移動 + 表示変更 */
.toggle-button-1:has(:checked)::after {
  left: 59px;
  content: "Dark";
  color: #198caa;
}

.toggle-button-1 input {
  display: none;
}

.toggle-button-1::before { 
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: rgba(0,0,0,0.4);
}

.toggle-button-1:has(:checked) {
  background-color: #000; /* 少し暗め */
}

/* パネル系 */
body.light #siteInfo,
body.light #nowPlaying,
body.light #spNowPlayingBar,
body.light #randomPlayerBox{
  background:#f7f7f7;
  border:1px solid #d7d7d7;
  color:#222;
}

/* 検索・select */
body.light #searchInput,
body.light #filterSelect,
body.light #yearSelect,
body.light #sortDateSelect{
  background:#fff;
  color:#222;
  border:1px solid #bbb;
}

/* リスト行 */
body.light .videoItem{
  border-bottom:1px solid #ddd;
}

body.light .videoItem:hover{
  background:#f0f0f0;
}

body.light .videoItem.is-playing{
  background:#e6f4f8;
}

/* テキスト薄い系 */
body.light .metaItem.metaArtist,
body.light .metaItem.metaComposer,
body.light .col-singer,
body.light .col-title,
body.light #randomSingerLine{
  color:#555;
}

/* リンク */
body.light a{
  color:#0066cc;
}

/* ボタン（カテゴリとか） */
body.light .categoryButtons button{
  background:#eee;
  color:#222;
}

body.light .categoryButtons button.active{
  background:#198caa;
  color:#fff;
}

/* トグル背景（light時） */
body.light .toggle-button-1{
  background:#ccc;
}

body.light .date{
  color:#222;
}

body.light #listHeaderWrapper{
  background:#f7f7f7;
  /* border:1px solid #d7d7d7; */
}

/* 文字も調整 */
body.light #listHeader{
  color:#222;
}

body.light .categoryButtons.square button{
  background:#eee;
  color:#222;

  box-shadow: 0 3px 0 #ccc;

  transition: all 0.15s ease;
}

/* 押したとき */
body.light .categoryButtons.square button:active{
  background: linear-gradient(#198caa, #146d85);
  color:#fff;

  transform: translateY(2px);
  box-shadow: 0 1px 0 #0f5f73;
}
body.light .categoryButtons.square button.active{
  background: linear-gradient(#198caa, #146d85);
  color:#fff;

  transform: translateY(2px);
  box-shadow: 0 1px 0 #0f5f73;
}

/* トグルを右へ押し出す */
.toggle-button-1{
  margin-left:auto;
  margin-right:8px;
}

.toggle-button-1 {
  width: 105px;
  height: 34px;
}

.toggle-button-1::after {
  top: 2px;
  left: 2px;
  width: 50px;
  height: 30px;
  font-size: 11px;
}

/* ON時 */
.toggle-button-1:has(:checked)::after {
  left: 53px;
}


button {
  touch-action: manipulation;
}

/* 押下(active)時 - transform を削除してズレ防止 */
.categoryButtons button.active {
  background: linear-gradient(#198caa, #146d85);
  color: #fff;
  /* transform: translateY(2px); ←削除 */
  box-shadow: 0 2px 0 #0f5f73; /* light/dark 両方統一 */
}