/* 変数・レイアウト */
:root {
  --bg-color: #f9fafe;
  --card-bg: #fff;
  --text-color: #242943;
  --muted: #7c8798;
  --radius: 11px;
  --shadow: 0 8px 24px -10px rgba(60,60,110,0.13);
  --transition: .18s cubic-bezier(.47,.17,.21,.92);
  --btn-main: #6654e8;
  --btn-hover: #5945d9;
  --btn-reset-bg: #f4f7fb;
  --btn-reset-border: #bfc8d6;
  --btn-reset-color: #3a4251;
  --filter-btn-active: #ebe9fd;
  --active-filter: #7c3aed;
  --active-filter-text: #fff;
  --sticky-z: 2050;
  --search-z: 2060;

  --header-offset: 186px; /* フォールバック値 */
}
html, body { overflow-x: hidden; margin:0; padding:0; }
body {
  background: var(--bg-color);
  color: var(--text-color);
  font-family: 'Segoe UI', system-ui,-apple-system,sans-serif;
  min-height: 100%;
}
.sticky-search-area {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100vw; z-index: var(--sticky-z);
  background: var(--bg-color);
  box-shadow: 0 2px 14px -8px #5744d814;
  padding: 0.38rem 0 0.21rem 0;
  border-radius: 0 0 14px 14px;
  border-bottom: 1.5px solid #ececec;
  display: flex; flex-direction: column; align-items: center;
  backdrop-filter: blur(7px);
  transition: box-shadow 0.14s;
}
.search-card {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.4em 0.9em 0.36em 0.9em;
  display: flex;
  flex-direction: column;
}
.search-row { display: flex; flex-direction: row; gap: 8px; align-items: center; width: 100%; }
.search-row-keyword { width: 100%; margin-bottom: 7px; }
.search-row-controls {
  display: flex; flex-direction: row; gap: 8px; width: 100%;
  position: relative;
}
.search-row-controls > * { min-width: 0; }
.searchbox-input {
  flex: 6 1 320px; min-width: 0;
  font-size: 1.05em; height: 2.3em;
  border-radius: 0.7em;
  padding: 0.32em 1em;
  border: 1.2px solid #e3e3ec;
  background: #fafdff;
  box-shadow: none;
  transition: border var(--transition), box-shadow var(--transition);
}
.searchbox-input:focus {
  border-color: var(--btn-main);
  box-shadow: 0 0 0 2px #7c3aed25;
  outline: none;
  background: #fff;
}
#filterToggleBtn {
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  height: 2.5em;
  font-size: 1.01em;
  border-radius: 0.63em;
  min-width: 98px;
  padding: 0 0.7em;
  font-weight: 500;
  background: #fff;
  border: 1.3px solid #dad4ff;
  color: var(--btn-main);
  transition: background var(--transition), border var(--transition), color var(--transition);
  cursor: pointer;
  outline: none;
  z-index: 1;
  flex: 1 0 0;
  white-space: nowrap;
}
#filterToggleBtn[aria-pressed="true"],
#filterToggleBtn[aria-expanded="true"],
#filterToggleBtn:hover,
#filterToggleBtn:focus {
  background: var(--filter-btn-active);
  border-color: var(--btn-main);
  color: var(--btn-hover);
}
.reset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
  font-size: 1.01em;
  font-weight: 500;
  border-radius: 0.63em;
  background: var(--btn-reset-bg);
  border: 1.2px solid var(--btn-reset-border);
  color: var(--btn-reset-color);
  transition: background var(--transition), border var(--transition), color var(--transition);
  padding: 0 1.1em;
  letter-spacing: 0.01em;
  box-shadow: none;
  text-align: center;
  cursor: pointer;
  outline: none;
  z-index: 1;
  min-width: 80px;
  max-width: 120px;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
.reset-btn:hover, .reset-btn:focus {
  background: #e6eaf1;
  color: #1e2633;
  border-color: #6654e8;
}
.sort-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  flex: 2 1 180px;
  min-width: 0;
}
.searchbox-select {
  width: 100%;
  font-size: 1.01em;
  border-radius: 0.65em; height: 2.5em;
  padding: 0.18em 1em;
  border: 1.1px solid #e3e3ec;
  background: #fafcff;
  transition: border var(--transition), box-shadow var(--transition);
  appearance: auto;
  z-index: 1;
}
.results-count-under-bar {
  width: 100%; text-align: left; max-width: 860px; margin: 0 auto;
  font-size: 1.09em; font-weight: 600; color: #5744d8;
  background: none; padding: 0.33em 1.2em 0.2em 1.2em;
  letter-spacing: 0.01em;
  user-select: text;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .search-card { max-width: 99vw; }
  .results-count-under-bar { max-width: 99vw; padding-left:0.5em; }
  .sort-wrapper { max-width: 99vw;}
}
@media (max-width: 600px) {
  .search-card { max-width: 100vw; border-radius: 9px; }
  .search-row-keyword { margin-bottom: 4px; }
  .search-row-controls { gap: 5px; }
  .results-count-under-bar { font-size:1em; padding-left:0.1em;}
  .sort-wrapper { flex: 2 1 90px;}
  #filterToggleBtn, .reset-btn { min-width: 78px; font-size: 0.97em; padding: 0 0.4em;}
}
.filters-bar {
  width: 100vw; max-width: 860px; margin: 0 auto;
  background: rgba(250,250,255,0.95);
  padding: 2.5px 0 3px 0;
  box-shadow: 0 2px 8px -6px #7c3aed13;
  min-height: 32px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px 10px;
  justify-content: flex-start;
  user-select: none;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}
.filter-tag {
  background: var(--active-filter); color: var(--active-filter-text);
  border-radius: 13px; padding: 2.5px 11px 2.5px 8px;
  font-size: 0.97em; font-weight: 500; display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; border: none; box-shadow: 0 2px 7px -6px #7c3aed20;
  transition: background 0.13s;
  outline: none;
  max-width: 210px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.filter-tag:focus, .filter-tag:hover {
  background: #9b6ee9;
  color: #fff;
}
.filter-tag .fa-xmark { font-size: 0.93em; margin-left: 2px; }
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2010;
  background: rgba(90,80,180,0.14);
  backdrop-filter: blur(4px);
  transition: opacity 0.22s;
}
.drawer-backdrop.show { display: block; opacity: 1; }
#filterDrawer {
  display: none;
  width: 100vw; max-width: 900px;
  background: #f9f8ff;
  border-radius: 0 0 14px 14px;
  border: 1px solid #e7e7ef;
  box-shadow: 0 10px 32px -8px rgba(80,80,160,0.13);
  padding: 0 0 8px 0; margin: 0 auto 0 auto;
  max-height: 340px; overflow-y: auto; overflow-x: hidden;
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  top: 110px;
  z-index: 2022; animation: fadein-drawer 0.17s; border-top: none;
  transition: opacity .17s;
}
@keyframes fadein-drawer { from { opacity: 0; transform: translate(-50%, -8px);} to { opacity: 1; transform: translate(-50%, 0);} }
.filter-section { margin-bottom: 13px; padding-left: 1.2rem; padding-right: 1.2rem; }
@media (max-width: 600px) {
  #filterDrawer { max-width: 100vw; }
  .filter-section { padding-left: 0.5rem; padding-right: 0.5rem; }
}
.filter-title {
  font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.01em; color: #463d94;
  display: flex; align-items: center; gap: 4px;
}
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 2px; }
.guest-button, .btn-corner, .btn-year {
  padding: 8px 0;
  border-radius: 22px;
  font-weight: 500;
  border: 1.3px solid rgba(80,80,160,0.10);
  background: #fff;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  outline: none;
  box-shadow: none;
  width: 100%;
  font-size: 1.01em;
  margin-bottom: 0 !important;
  letter-spacing: 0.01em;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 39px;
}
.btn-corner, .guest-button {
  font-size: 0.97em;
}
.btn-corner {
  font-size: clamp(0.90em, 3vw, 1em);
  line-height: 1.2;
  padding: 9px 2px 8px 2px;
}
.guest-button[aria-pressed="true"], .guest-button.active,
.btn-corner[aria-pressed="true"], .btn-corner.active,
.btn-year[aria-pressed="true"], .btn-year.active {
  outline: none;
  background: #ece8ff !important;
  color: #242943 !important;
  border-color: #6c60e8 !important;
  box-shadow: 0 0 0 2.5px rgba(79,70,229,0.19) !important;
}
.guest-button:hover, .btn-corner:hover, .btn-year:hover {
  transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 18px -6px #978df644; background: #f5f4ff;
  color: #242943;
}
.filter-section:last-child { margin-bottom: 0; }

.main-content {
  padding-top: var(--header-offset);
  max-width: 900px; margin: 0 auto;
  transition: margin-top 0.18s cubic-bezier(.4,1,.7,1.2);
}

@media (max-width: 600px) {
  .btn-corner, .guest-button, .btn-year {
    font-size: 0.95em;
    min-height: 37px;
  }
  .btn-corner[data-corner="ぼっち・ざ・おーでぃしょん！"] {
    font-size: clamp(0.6em, 2.7vw, 1em);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 2px;
    padding-right: 2px;
    line-height: 1.2;
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .main-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}
#results {
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 10px; margin: 0; padding: 0;
}
@media (max-width: 900px) {
  #results { grid-template-columns: 1fr; gap: 9px 0; }
}
.episode-item {
  display: flex; gap: 13px; padding: 12px; border-radius: 11px; background: var(--card-bg);
  margin-bottom: 0; align-items: center; text-decoration: none; color: inherit;
  border: 1px solid #e5e7ef; cursor: pointer; min-width: 0;
  transition: box-shadow .17s;
}
.episode-item:hover {
  transform: translateY(-2px); box-shadow: 0 13px 32px -8px #5843e825; background: #f5f7fa;
}
.thumbnail {
  width: 120px; flex-shrink: 0; border-radius: 9px; object-fit: cover; aspect-ratio: 16/9;
  background: #f6f6ff;
}

.no-results {
  color: #888; font-size: 1.1em;
  background: #fcfcff; padding: 14px; border-radius: 10px; box-shadow: 0 1px 8px -5px #aaa3;
  display: flex; align-items: center; justify-content: center; min-height: 100px;
  text-align: center; width: 100%;
}
.pagination-area {
  margin: 19px 0 10px 0; text-align: center;
}
.page-btn, .more-btn {
  background: #ebeafd; color: #463d94;
  border: none; border-radius: 16px; padding: 9px 23px; margin: 0 3px 6px 3px;
  font-weight: 500; font-size: 1.02em; cursor: pointer;
  transition: background .17s, color .15s;
  box-shadow: 0 1.5px 4px -2px #7669ff15;
}
.page-btn.active, .more-btn:active {
  background: #7c3aed; color: #fff;
}
.page-btn:disabled, .more-btn:disabled { opacity: 0.55; }
.visually-hidden, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
footer { text-align: center; margin: 60px 0 20px; font-size: 0.8rem; color: var(--muted); }

/* --- 以下、ダークモードや細部の追加CSS（index_2.html通り） --- */

/* === ベース背景・テキスト === */
body.dark-mode {
  background: #22272e;
  color: #e5ecec;
}

/* 固定ヘッダー */
body.dark-mode .sticky-search-area {
  background: #252c35 !important;
  box-shadow: 0 2px 16px -10px #15182088 !important;
  border-bottom: 1.5px solid #2e3640 !important;
}
body.dark-mode .search-card {
  background: #2d333b !important;
  color: #f1f3f7 !important;
  box-shadow: 0 8px 32px -12px #14151a36 !important;
}

/* 入力欄・セレクト */
body.dark-mode .searchbox-input,
body.dark-mode .form-select.searchbox-select {
  background: #2d333b !important;
  color: #e6f0f3 !important;
  border-color: #394150 !important;
}
body.dark-mode .searchbox-input:focus {
  background: #262e36 !important;
  border-color: #73b3e7 !important;
}

/* フィルター切替・リセットボタン */
body.dark-mode #filterToggleBtn {
  background: #2f3640 !important;
  color: #96e5c4 !important;
  border: 1.3px solid #49686a !important;
}
body.dark-mode #filterToggleBtn[aria-pressed="true"],
body.dark-mode #filterToggleBtn[aria-expanded="true"],
body.dark-mode #filterToggleBtn:hover,
body.dark-mode #filterToggleBtn:focus {
  background: #2b626b !important;
  color: #fff !important;
  border-color: #90c9ce !important;
}

body.dark-mode .reset-btn {
  background: #25323c !important;
  color: #c6e6ee !important;
  border: 1.2px solid #415766 !important;
}
body.dark-mode .reset-btn:hover,
body.dark-mode .reset-btn:focus {
  background: #365561 !important;
  color: #fff !important;
}

/* 並び替えセレクト */
body.dark-mode .searchbox-select {
  background: #2d333b !important;
  color: #b5e0e9 !important;
  border: 1.1px solid #3e4f56 !important;
}

/* 検索結果件数バー */
body.dark-mode .results-count-under-bar {
  color: #a6e1fa !important;
  background: #252c35 !important;
}

/* 選択中フィルターエリア */
body.dark-mode .filters-bar {
  background: #232a33ee !important;
  box-shadow: 0 2px 8px -6px #0006 !important;
}

/* フィルターDrawer（詳細フィルター） */
body.dark-mode #filterDrawer {
  background: #2b323b !important;
  border: 1px solid #425360 !important;
  box-shadow: 0 10px 32px -8px #000d !important;
}

body.dark-mode .filter-title {
  color: #8de0ee !important;
}
body.dark-mode .guest-button,
body.dark-mode .btn-corner,
body.dark-mode .btn-year {
  background: #232c35 !important;
  color: #e0f1f1 !important;
  border: 1.3px solid #40605a !important;
}
body.dark-mode .guest-button[aria-pressed="true"], 
body.dark-mode .guest-button.active,
body.dark-mode .btn-corner[aria-pressed="true"], 
body.dark-mode .btn-corner.active,
body.dark-mode .btn-year[aria-pressed="true"], 
body.dark-mode .btn-year.active {
  background: #364a55 !important;
  color: #adebca !important;
  border-color: #96e5c4 !important;
  box-shadow: 0 0 0 2px #86e4e466 !important;
}
body.dark-mode .guest-button:hover, 
body.dark-mode .btn-corner:hover, 
body.dark-mode .btn-year:hover {
  background: #384d5d !important;
  color: #96e5c4 !important;
}

/* 選択ボタンアイコン */
body.dark-mode .filter-title .fa,
body.dark-mode .filter-title .fa-solid {
  color: #96e5c4 !important;
}

/* ページネーション */
body.dark-mode .pagination-area {
  background: none !important;
}
body.dark-mode .page-btn,
body.dark-mode .more-btn {
  background: #283240 !important;
  color: #a6e1fa !important;
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 8px -6px #121a2160;
}
body.dark-mode .page-btn.active,
body.dark-mode .more-btn:active {
  background: #8de0ee !important;
  color: #27363f !important;
}
body.dark-mode .page-btn:disabled,
body.dark-mode .more-btn:disabled {
  background: #323a47 !important;
  color: #a9b8c0 !important;
}

/* 検索結果カード */
body.dark-mode .episode-item {
  border: 1.3px solid #33404c !important;
  box-shadow: 0 2px 16px -4px #16293a22 !important;
  background: #252c35 !important;
  transition: border .16s, box-shadow .18s, background .14s;
}
body.dark-mode .episode-item:hover, 
body.dark-mode .episode-item:focus-visible {
  border: 1px solid #8de0ee !important;
  box-shadow: 0 0 0 4px #b2f7ee70, 0 13px 32px -8px #172a3388;
  background: #27343b !important;
  z-index: 2;
}

body.dark-mode input::placeholder,
body.dark-mode .searchbox-input::placeholder {
  color: #8ca2b3 !important;   /* 見やすい淡いブルーグレー */
  opacity: 1 !important;
}

body.dark-mode #toTopBtn {
  background: #283240 !important;
  color: #8de0ee !important;
  border: 1.5px solid #33404c !important;
  box-shadow: 0 2px 8px -2px #172a3388 !important;
  transition: background .15s, color .13s, border .13s;
}
body.dark-mode #toTopBtn:hover, body.dark-mode #toTopBtn:focus {
  background: #384d5d !important;
  color: #fff !important;
  border-color: #8de0ee !important;
}

@media (min-width: 900px) {
  .main-content {
    max-width: 1040px;
  }
  .search-card,
  .filters-bar,
  .results-count-under-bar {
    max-width: 1040px;
  }
}

.episode-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.episode-item .thumbnail {
  width: 120px;
  flex-shrink: 0;
}

.episode-info {
  flex: 1 1 0%;
  min-width: 0;
}

.episode-meta {
  font-size: 0.98rem;
  color: var(--muted);
  margin: 3px 0 0 0;
  line-height: 1.4;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
}

#toTopBtn,
#darkModeBtn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 22px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
}

#loading-screen.fadeout {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.0s cubic-bezier(.52,0,.37,1.09);
  }
  #loading-logo.fadein {
    opacity: 1 !important;
  }

  #loading-screen {
  background: #fff;
  transition: background 0.3s;
}
body.dark-mode #loading-screen {
  background: #22272f;
}

body.dark-mode #aboutModalContent {
  background: #23242d !important;
  color: #e5ecec !important;
  box-shadow: 0 8px 30px -6px #23244080;
}
body.dark-mode #aboutModalContent a {
  color: #8de0ee !important;
}
body.dark-mode #aboutModal {
  background: rgba(20,18,32,0.34) !important;
}
body.dark-mode #aboutCloseBtn {
  color: #8de0ee !important;
}

#aboutModal {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  z-index: 2055;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: rgba(30,29,52,0.18);
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  /* 重要！ */
  }

/* 跳ねる4つの丸ローディング */
.loading-ball {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  animation: bounce 0.6s infinite ease-in-out;
}

.ball1 { background-color: #fa01fa; animation-delay: 0s;   }
.ball2 { background-color: #fdfe0f; animation-delay: 0.15s;}
.ball3 { background-color: #15f4f3; animation-delay: 0.3s; }
.ball4 { background-color: #f93e07; animation-delay: 0.45s;}

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
}

/* 画面全体のスクロールを止める用 */
body.scroll-lock {
  position: fixed;
  overflow: hidden;
  width: 100%;
  /* 現在のスクロール位置はJSで top に入れる */
}


/* 初期描画の一瞬だけ使うプレロード用フラグ */
html.dark-preload,
html.dark-preload body {
  background: #22272e !important;
  color: #e5ecec !important;
}

/* ローディング画面が透けて白く見えないように */
body.dark-mode #loading-screen {
  background: #22272e; /* 透明だと背面が白く見える端末がある */
}

/* ゲスト行は PC で必ず1行表示 */
@media (min-width: 901px) {
  .guest-one-line {
    display: block;
    white-space: nowrap;     /* 改行しない */
    overflow: hidden;        /* はみ出しを隠す（JSで縮める前提） */
    text-overflow: clip;     /* 念のための保険（省略記号にしたいなら ellipsis） */
    line-height: 1.2;
  }
}

@media (max-width: 900px) {
  /* タイトルは改行OKにする */
  #results h5.mb-1 { 
    white-space: normal !important; 
    overflow: visible !important; 
    text-overflow: clip !important;
    max-width: 100% !important;
  }
  /* ゲスト行だけを次の行に落とす＆1行で収める */
  #results h5.mb-1 .guest-one-line {
    display: block;
    white-space: nowrap;
  }
}

#results h5.mb-1 {
  display: block;   /* ← flexをやめる */
  max-width: 100%;
}


/* ゲスト名は常に1行（fitGuestLinesで縮小して収める） */
#results h5.mb-1 .guest-one-line {
  white-space: nowrap;
  overflow: hidden;      /* 再フィット前の一瞬のハミ出しも隠す */
  display: inline-block; /* scrollWidth 判定が安定 */
}


/* タイトル(#xx)とゲスト行を縦積みにする。<br> を効かせるため block にする */
#results h5.mb-1 {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.4;
  white-space: normal !important;
  word-break: break-all !important;
  overflow: visible !important;
  max-width: 280px;
}


/* ゲスト行（自動縮小対象）。一行キープして JS で縮める */
.guest-one-line {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  vertical-align: top;
}



/* ヘッダーの小さめ操作ボタン */
.icon-btn, #favOnlyToggleBtn, #randomBtn{
  height:2.5em;border-radius:.63em;padding:0 .9em;
  background:#fff;border:1.3px solid #dad4ff;color:var(--btn-main);
  font-weight:500;cursor:pointer;transition: background var(--transition), border var(--transition), color var(--transition);
}
#favOnlyToggleBtn.active,
#favOnlyToggleBtn[aria-pressed="true"]{
  background:#fff7d1;border-color:#f5b301;color:#b88400;
}
#randomBtn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px -6px #978df644; }

/* 各カードに★ボタン */
.episode-item{ position:relative; } /* 既存に追加でOK */
.fav-btn{
  position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;
  background:#fff;border:1px solid #e6e6f3;box-shadow:0 2px 10px -6px #0002;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s;
}
.fav-btn i{ font-size:16px; }
.fav-btn:hover{ transform:scale(1.06); }
.fav-btn.active{ background:#fff3c4; border-color:#f5b301; }
.fav-btn.active i{ color:#f5b301; }

/* ”0件”のときは .no-results が使われる（既存） */

/* 全体に少し動き：カードのフェードアップ */
@keyframes rise{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
#results .episode-item{ animation:rise .24s ease both; }


/* === Dark mode variable overrides for hover colors === */
body.dark-mode {
  --filter-btn-active: rgba(200, 200, 255, 0.15);
  --btn-main: #4d6272;
  --btn-hover: #a6e1fa;
}

/* ダークモード調整 */
body.dark-mode .icon-btn, body.dark-mode #favOnlyToggleBtn, body.dark-mode #randomBtn{
  background:#2f3640;border-color:#49686a;color:#96e5c4;
}
body.dark-mode 
body.dark-mode .fav-btn{ background:#2d333b;border-color:#394150; }


/* ===== Favorite button (dark mode) ===== */
body.dark-mode .fav-btn{
  background:#2a2f37 !important;
  border:1px solid #41505f !important;
  color:#e7eef6 !important;       /* 非アクティブ時の星色 */
}
body.dark-mode .fav-btn i{ color:#e7eef6 !important; }

/* アクティブ時は明るい背景＋濃い星（色反転で視認性アップ） */
body.dark-mode .fav-btn.active{
  background:#ffd24e !important;
  border-color:#ffd24e !important;
  color:#2b2b2b !important;
}
body.dark-mode .fav-btn.active i{ color:#2b2b2b !important; }



/* 0件カードをグリッド1行いっぱいにして中央へ */
#results .no-results{
  grid-column: 1 / -1;      /* 2カラム時も横いっぱい */
  max-width: 760px;          /* 広すぎ防止 */
  margin: 6px auto;          /* 中央寄せ */
}

/* ダークモード配色 */
body.dark-mode .no-results{
  background:#2d333b !important;
  color:#bcd6ea !important;
  border:1px solid #394150 !important;
  box-shadow: 0 1px 10px -6px #000a !important;
}

/* ★を右下に配置（既存の right/top 指定を上書き） */
#results .episode-item { position: relative; }           /* 念のため */
#results .episode-item .fav-btn{
  top: auto;                 /* 右上→解除 */
  bottom: 10px;              /* 右下に固定 */
  right: 10px;
}


/* ===== 端末でのダブルタップ拡大を抑止 ===== */
button, a, select, input, label { touch-action: manipulation; }


/* ===== Dark mode button accent unify (#a6e1fa) ===== */
body.dark-mode .icon-btn,
body.dark-mode #favOnlyToggleBtn,
body.dark-mode #randomBtn {
  background: #2f3640 !important;
  border: 1.3px solid #4d6272 !important;
  color: #a6e1fa !important;
}
body.dark-mode #favOnlyToggleBtn.active,
body.dark-mode #favOnlyToggleBtn[aria-pressed="true"] {
  background: #33414d !important;
  border-color: #7fbfe0 !important;
  color: #a6e1fa !important;
}

/* フィルター開閉ボタンも同じトーンへ */
body.dark-mode #filterToggleBtn {
  background: #2f3640 !important;
  border: 1.3px solid #4d6272 !important;
  color: #a6e1fa !important;
}
body.dark-mode #filterToggleBtn[aria-pressed="true"],
body.dark-mode #filterToggleBtn[aria-expanded="true"],
body.dark-mode #filterToggleBtn:hover,
body.dark-mode #filterToggleBtn:focus {
  background: #33414d !important;
  border-color: #7fbfe0 !important;
  color: #a6e1fa !important;
}

/* リセットの文字色も統一（ホバー時は白で可読性UP） */
body.dark-mode .reset-btn {
  background: #2f3640 !important;
  border: 1.2px solid #415766 !important;
  color: #a6e1fa !important;
}
body.dark-mode .reset-btn:hover,
body.dark-mode .reset-btn:focus {
  background: #365561 !important;
  color: #a6e1fa !important;
}





/* ===== Light mode button accent unify (#a6e1fa) ===== */
body:not(.dark-mode) .icon-btn,
body:not(.dark-mode) #favOnlyToggleBtn,
body:not(.dark-mode) #randomBtn,
body:not(.dark-mode) #filterToggleBtn {
  background: #fff !important;
  border: 1.3px solid #5744D8 !important;
  color: #5744D8 !important;
}


/* 「お気に入り」「ランダム」ホバー時（ライト） - 色変化のみ */
body:not(.dark-mode) #favOnlyToggleBtn:hover,
body:not(.dark-mode) #randomBtn:hover {
  background: #eaf6ff !important;
  border-color: #5744D8 !important;
  color: #5744D8 !important;
}
/* フィルター開閉（ホバー/展開時も同色トーン） */
body:not(.dark-mode) #filterToggleBtn:hover,
body:not(.dark-mode) #filterToggleBtn:focus,
body:not(.dark-mode) #filterToggleBtn[aria-expanded="true"] {
  background: #eaf6ff !important;
  border-color: #5744D8 !important;
  color: #5744D8 !important;
}

/* 「お気に入りだけ」ON 表示 */
body:not(.dark-mode) #favOnlyToggleBtn.active,
body:not(.dark-mode) #favOnlyToggleBtn[aria-pressed="true"] {
  background: #eaf6ff !important;
  border-color: #5744D8 !important;
  color: #5744D8 !important;
}

/* リセットボタンも統一 */
body:not(.dark-mode) .reset-btn {
  background: #fff !important;
  border: 1.2px solid #5744D8 !important;
  color: #5744D8 !important;
}
body:not(.dark-mode) .reset-btn:hover,
body:not(.dark-mode) .reset-btn:focus {
  background: #eaf6ff !important;
  color: #5744D8 !important; /* 可読性を少し上げる */
}

/* サムネ + タイムスタンプ表示 */
.thumb-col { width:120px; flex-shrink:0; display:flex; flex-direction:column; }
.ts-buttons { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.ts-btn {
  display:inline-block; padding:3px 8px; border-radius:999px; font-size:.85em;
  background:#ebeafd; color:#463d94; border:1px solid #dad4ff; line-height:1.2;
}
/* ダークモード */
body.dark-mode .ts-btn { background:#25323c; color:#a6e1fa; border-color:#415766; }


/* --- Autocomplete (検索候補) -------------------- */
.search-row-keyword { position: relative; }

.autocomplete[hidden] { display: none !important; }
.autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #e3e3ec;
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(60,60,110,0.18);
  max-height: 320px;
  overflow-y: auto;
  z-index: var(--search-z);
}

.autocomplete-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer; font-size: 0.98em;
}
.autocomplete-item:hover,
.autocomplete-item[aria-selected="true"] { background: #f4f6ff; }
.autocomplete-item .type {
  font-size: 12px; line-height: 1; padding: 2px 6px;
  border: 1px solid #e3e3ec; border-radius: 999px; color: #7c8798;
}
.autocomplete-item .match { font-weight: 700; }

/* Dark mode */
body.dark-mode .autocomplete {
  background: #2d333b; border-color: #394150; box-shadow: 0 14px 34px -12px #000a;
}
body.dark-mode .autocomplete-item:hover,
body.dark-mode .autocomplete-item[aria-selected="true"] { background: #2b3a46; }
body.dark-mode .autocomplete-item .type { border-color: #415766; color: #96e5c4; }



/* --- iOS PWA の安全域対応（ノッチ・ステータスバーを回避） --- */
:root{
  /* 念のため左右/下も変数化 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 既存の .sticky-search-area に追記 */
.sticky-search-area{
  /* 上パディングを安全域ぶんだけ増やす */
  padding-top: calc(0.38rem + var(--safe-top));
  /* 横も端末によっては必要になるので入れておくと安心 */
  padding-left:  max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* 旧iOS対策（古いSafariで constant() を見る端末向け・任意） */
@supports (padding: constant(safe-area-inset-top)) {
  .sticky-search-area{
    padding-top: calc(0.38rem + constant(safe-area-inset-top));
  }
}

/* === Radio History Timeline (refined) === */
:root{
  --history-line: #dfe5f5;
  --history-dot: #6c5ce7;
  --history-dot-ring: 36, 28, 170; /* rgb base for ring alpha */
  --history-card-bg: #ffffff;
  --history-card-bd: #e9edf7;
  --history-muted: #667085;
  --history-year: #3b3486;
}
@media (prefers-color-scheme: dark){
  :root{
    --history-line: #384154;
    --history-dot: #9ad9de;
    --history-dot-ring: 154, 217, 222;
    --history-card-bg: #22272e;
    --history-card-bd: #364152;
    --history-muted: #9aa4b2;
    --history-year: #9ad9de;
  }
}

.history-section{
  max-width: 960px; margin: 56px auto 28px; padding: 0 16px;
}
.history-toggle{
  -webkit-tap-highlight-color: transparent;
  width: 100%; display:flex; align-items:center; gap:12px;
  padding: 16px 18px; border-radius: 14px; border: 1px solid var(--history-card-bd);
  background: var(--history-card-bg); color: inherit; cursor: pointer;
  box-shadow: 0 10px 30px -18px rgba(20,20,70,.25);
  font-weight: 750; letter-spacing: .01em;
}
.history-toggle .icon{ font-size: 1.15em; }
.history-toggle .title{ font-size: 1.06em; }
.history-toggle .sub{ margin-left:auto; color: var(--history-muted); font-weight:650; }
.history-toggle .chevron{ margin-left:6px; transition: transform .2s ease; }
.history-toggle[aria-expanded="true"] .chevron{ transform: rotate(180deg); }
.history-toggle:focus-visible{ outline: 3px solid rgba(99,102,241,.45); outline-offset: 2px; }

.history-body{ position: relative; padding: 14px 2px 2px; }

/* Sticky year badge (left) */
.history-sticky-year{
  position: sticky; top: 12px; left: 0;
  width: fit-content; margin-left: 4px; z-index: 1;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(240,243,255,.8);
  border: 1px solid var(--history-card-bd);
  backdrop-filter: blur(6px);
  font-weight: 800; font-size: 14px; color: var(--history-year);
  box-shadow: 0 8px 24px -14px rgba(20,20,70,.25);
  display: none; /* 開いた時にJSで表示 */
}
@media (prefers-color-scheme: dark){
  .history-sticky-year{ background: rgba(33,38,46,.6); }
}

.history-timeline{
  position: relative; margin: 8px 0 0 28px; padding-left: 24px;
}
.history-timeline::before{
  content:""; position:absolute; left: 4px; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(var(--history-line), transparent 60%), var(--history-line);
  border-radius: 2px;
}

/* 年の見出し */
.history-year{
  position: relative; margin: 22px 0 10px;
  font-weight: 900; color: var(--history-year); letter-spacing: .02em;
}

/* アイテム */
.history-item{
  position: relative; padding: 12px 14px 14px 16px; margin: 12px 0 14px;
  background: var(--history-card-bg); border: 1px solid var(--history-card-bd); border-radius: 12px;
  box-shadow: 0 14px 36px -20px rgba(26, 26, 80, .28);
  transform: translateZ(0);
  animation: historyFade .35s ease both;
}
@keyframes historyFade {
  from { opacity: 0; translate: 0 6px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce){
  .history-item{ animation: none; }
}

.history-item::before{
  content:""; position:absolute; left: -27px; top: 18px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--history-dot);
  box-shadow:
    0 0 0 4px rgba(var(--history-dot-ring), .18),
    0 10px 24px -8px rgba(16,16,64,.35);
}
.history-item:hover{
  border-color: color-mix(in oklab, var(--history-card-bd), var(--history-dot) 20%);
}

.history-item .date{ font-weight:800; margin-bottom:4px; color: color-mix(in oklab, var(--history-year), #6b7cff 40%); font-size: 13.5px; }
.history-item .label{ font-weight:800; line-height: 1.5; }
.history-item .desc{ color: var(--history-muted); margin-top: 2px; line-height: 1.7; }
.history-item a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* 小さめ画面最適化 */
@media (max-width: 640px){
  .history-section{ margin-top: 40px; }
  .history-timeline{ margin-left: 22px; padding-left: 18px; }
  .history-item{ padding: 12px 12px 14px 14px; }
  .history-sticky-year{ font-size: 13px; padding: 5px 10px; }
}


/* === Radio History Timeline: tweaks === */
/* タイトル中央揃え（開閉ボタン） */
.history-toggle{
  position: relative;
  display:flex; align-items:center; gap:12px;
}
.history-toggle .title{
  position:absolute; left:50%; transform:translateX(-50%);
  text-align:center; pointer-events:none; /* クリックはボタン全体に委譲 */
  font-weight: 800;
}

/* ダークモード強化（ヒストリー一式） */
body.dark-mode .history-toggle{
  background:#2d333b !important; border-color:#3b4552 !important;
  color:#e9f2f6 !important; box-shadow: 0 10px 30px -18px #000c !important;
}
body.dark-mode .history-timeline::before{ background:#3a4452 !important; }
body.dark-mode .history-year{ color:#9ad9de !important; }
body.dark-mode .history-item{
  background:#2d333b !important; border-color:#3b4552 !important;
  box-shadow: 0 14px 36px -20px #000f !important;
}
body.dark-mode .history-item::before{
  background:#90c9ce !important; box-shadow:0 0 0 4px rgba(144,201,206,.18) !important;
}
body.dark-mode .history-item .date{ color:#9ad9de !important; }
body.dark-mode .history-sticky-year{
  background: rgba(33,38,46,.6) !important; border-color:#3b4552 !important;
  color:#9ad9de !important;
}

.history-item .date{
  font-weight: 800;
  font-size: 13px;       /* 13.5→13 に微下げ */
  opacity: .95;
}


/* Fix for circle misalignment on mobile */
@media (max-width: 600px) {
  .timeline-circle {
    position: relative;
    left: 0 !important;
    margin: 0 auto !important;
    transform: translateX(0) !important;
  }
}

/* Stylish design improvements */
.timeline-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,0.15);
  border: 2px solid #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-circle:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(0,0,0,0.25);
}

/* Connectors */
.timeline-connector {
  width: 3px;
  background: linear-gradient(to bottom, #7c3aed, #4f46e5);
  margin: 0 auto;
}

/* Mobile: タイムラインの丸位置を微修正（18px padding, 線は4px → 左端 -21px） */
@media (max-width: 640px){
  .history-timeline .history-item::before{
    left: -21px; /* ずれ解消 */
  }
}


.history-timeline::before { left: -7px; }   
.history-item::before      { left: -38px; } 
@media (max-width: 640px){
  .history-timeline .history-item::before { left: -32px; } 
}



/* ラジオの歴史：年バッジを使わない */
.history-sticky-year { display: none !important; }


/* ラジオの歴史：説明文の行間を調整 */
.history-item .desc { line-height: 1.55; }   /* 元は 1.7 */
@media (max-width: 640px){
  .history-item .desc { line-height: 1.4; }  /* スマホはさらに少しタイトに */
}

/* === Modal 基本 === */
.modal-overlay{
  display: none;
  position: fixed; inset: 0; z-index: 2055;
  background: rgba(30,29,52,0.18);
  backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
}
.modal-overlay.show{ display: flex; }

/* ダークモード時はオーバーレイ濃いめ */
body.dark-mode .modal-overlay{
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
}

.modal-content.history-modal{
  background: var(--history-card-bg);
  color: inherit;
  width: min(960px, 95vw);
  max-height: min(80vh, calc(100vh - 80px));
  border: 1px solid var(--history-card-bd);
  border-radius: 16px;
  box-shadow: 0 18px 48px -12px rgba(20,20,70,.33);
  overflow: auto;
  position: relative;
}

/* スマホでは少し低めにして、URLバーの有無で伸びすぎないようにsvhで制御 */
@media (max-width: 600px) {
  .modal-content.history-modal {
    /* ちょい低め：76svh くらいが体感バランス良い */
    max-height: min(76svh, calc(100svh - 96px));
  }
}

/* svh非対応ブラウザ用の軽いフォールバック（あれば上書きされる） */
@supports not (height: 1svh) {
  @media (max-width: 600px) {
    .modal-content.history-modal {
      max-height: min(76vh, calc(100vh - 96px));
    }
  }
}


/* モーダル固定ヘッダー（タイトル中央＋×固定） */
.history-modal .modal-header{
  position: sticky; top: 0; z-index: 3;
  background: var(--history-card-bg);
  border-bottom: 1px solid var(--history-card-bd);
  padding: 10px 16px;
}
.history-modal .modal-title{
  margin: 0; font-size: 1.15rem; font-weight: 800;
  text-align: center; line-height: 1.2;
  color: var(--history-year);
}

/* ダーク時のカード境界色・背景は変数で自動適用 */
body.dark-mode .modal-content.history-modal{
  background: var(--history-card-bg);
  border-color: var(--history-card-bd);
}

/* モーダル内の“現在の年”バッジがヘッダーの下に来るよう微調整 */
#historyStickyYear{
  top: 56px;            /* ヘッダー高の分だけ下げる */
  z-index: 2;
}

/* 背景スクロール禁止用（JSで .modal-open を付与） */
body.modal-open{
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

/* 追加：サイトのダーク切替でも色変数を上書き */
body.dark-mode{
  --history-line:#384154;
  --history-dot:#9ad9de;
  --history-dot-ring:154,217,222;
  --history-card-bg:#22272e;
  --history-card-bd:#364152;
  --history-muted:#9aa4b2;
  --history-year:#9ad9de;
}

/* 追加：フェードイン＆ポップ */
.modal-overlay[hidden]{display:none;}
.modal-overlay.show{display:flex; animation:modalFade .22s ease-out both;}
.history-modal{transform:translateY(8px) scale(.98); animation:modalPop .24s ease-out both;}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalPop{to{transform:translateY(0) scale(1)}}


.history-modal .modal-close i{ font-size:1.25rem; }

.history-modal .modal-close:hover{ transform: scale(1.06); background: rgba(255,255,255,0.92); }
.history-modal .modal-close:active{ transform: scale(0.98); }
.history-modal .modal-close:focus-visible{ outline: 3px solid #8de0ee; outline-offset: 2px; }

/* ダークモードの閉じるボタン */
body.dark-mode .history-modal .modal-close{
  background: rgba(255,255,255,0.10);
  color: #eaf4f6;
  border-color: #3b4552;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
}
body.dark-mode .history-modal .modal-close:hover{
  background: rgba(255,255,255,0.16);
}

/* 余白を少し広げる＆タイトル右に×のスペース確保 */
.history-modal .modal-header{ padding:14px 56px 12px; } /* 右=56pxで×が食い込まない */
.history-modal .history-body{  padding:16px 22px 22px 16px; } /* ←右側にゆとり */



/* 閉じる時：フェードアウト＋少し沈む */
.modal-overlay.closing{ animation: modalFadeOut .20s ease-in forwards; }
.modal-overlay.closing .history-modal{ animation: modalPopOut .18s ease-in forwards; }

@keyframes modalFadeOut { from{opacity:1} to{opacity:0} }
@keyframes modalPopOut  { from{transform: translateY(0) scale(1); opacity:1}
                          to  {transform: translateY(6px) scale(.98); opacity:.96} }

/* フェードアウト（closing） */
.modal-overlay.closing{ animation: modalHide .18s ease-in both; }
.modal-overlay.closing .history-modal{ animation: modalPopOut .18s ease-in both; }

@keyframes modalHide { from{opacity:1} to{opacity:0} }
@keyframes modalPopOut { from{transform:translateY(0) scale(1)} to{transform:translateY(8px) scale(.98)} }

body.fav-only #radio-history { display: none !important; }


.close {
    position: absolute !important;
    top: 10px !important;
    right: 30px !important; /* 数値を大きくして右寄せ */
    font-size: 30px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    z-index: 9999; /* モーダルの上にくるように */
}

/* === Radio History modal: CLOSE button (single source of truth) === */
#historyModal .modal-header {          /* ×と干渉しないだけ右側に余白を確保 */
  padding: 14px 48px 12px 16px;        /* ← 右側=48px（ボタン幅+余白ぶん） */
}

#historyModal .modal-close {
  position: absolute;
  top: 4px;
  right: 8px;                          /* ← もっと右寄せしたいなら 0～4px */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#historyModal .modal-close i { font-size: 1.15rem; }

/* ダークモードの見た目（既存と同じでOK。必要なら残す） */
body.dark-mode #historyModal .modal-close{
  background: rgba(255,255,255,0.10);
  color: #eaf4f6;
  border-color: #3b4552;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
}
body.dark-mode #historyModal .modal-close:hover{
  background: rgba(255,255,255,0.16);
}

/* ライトテーマ時の閉じるボタン（落ち着いた中間トーン） */
#historyModal .modal-close {
  background: #ffffff;
  color: #667085;                 /* × アイコン色：落ち着いたグレー */
  border: 1px solid #d3d8e0;      /* 薄い境界線で浮かないように */
  box-shadow: 0 8px 24px -12px rgba(20,30,55,.12);
}
#historyModal .modal-close:hover {
  background: #f6f8fc;            /* うっすらホバー */
}


/* === FIX: Force light theme colors for history when site is in light mode,
   even if the OS is set to dark (iOS Safari was applying @media(prefers-color-scheme: dark)
   and overriding these CSS variables only for the history section). === */
body:not(.dark-mode){
  --history-line: #dfe5f5;
  --history-dot: #6c5ce7;
  --history-dot-ring: 36, 28, 170;
  --history-card-bg: #ffffff;
  --history-card-bd: #e9edf7;
  --history-muted: #667085;
  --history-year: #3b3486;
}

/* === iPhoneでfooterが隠れる対策（FAB & セーフエリア対応） === */

/* 1) 下固定ボタンをセーフエリア分だけ持ち上げる */
#toTopBtn,
#darkModeBtn {
  bottom: calc(18px + var(--safe-bottom)) !important;
}

/* 古いiOS向け（optional） */
@supports (bottom: constant(safe-area-inset-bottom)) {
  #toTopBtn,
  #darkModeBtn {
    bottom: calc(18px + constant(safe-area-inset-bottom)) !important;
  }
}

/* 2) ページ末尾に余白を用意して、ボタンに被らないようにする */
.main-content {
  padding-bottom: calc(60px + var(--safe-bottom));
}

footer {
  padding-bottom: calc(8px + var(--safe-bottom));
}


/* 「ぼっち・ざ・らじお！の歴史」を1行固定に */
.history-toggle .title{
  white-space: nowrap;       /* 改行しない */
  overflow: hidden;          /* はみ出しを隠す */
  text-overflow: ellipsis;   /* 入り切らない時は … */
  flex: 1 1 auto;            /* 右側の要素の分だけ縮められるように */
  min-width: 0;              /* flex子の省略幅を許可（ellipsisに必須） */
}


@media (max-width: 380px){
  .history-toggle .title{ font-size: 1em; }
}


/* === History modal header: always visible while scrolling === */
#historyModal .modal-header{
  position: sticky;      /* ← スクロールしてもヘッダーを固定 */
  top: 0;                /* 画面上端に貼り付け */
  z-index: 10;           /* 本文より手前に */
  background: var(--history-card-bg);
  border-bottom: 1px solid var(--history-card-bd);
}

/* ついでに×ボタンのタップしやすさを安定化（任意） */
#historyModal .modal-close {
  position: absolute;    /* 既存 */
  top: 4px;
  right: 8px;
  width: 38px;           /* 少し広げるなら */
  height: 38px;
}


#historyModal .modal-title{
  display: block;
  margin: 0 auto;              /* 真ん中に配置 */
  font-weight: 800;
}



/* === SNS share buttons (under the history button) === */
.share-buttons{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:14px auto 0;
}

.share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px; height:56px;
  border-radius:999px;
  background:#ffffff;
  color:#374151;
  border:1px solid #e5e9f7;
  font-size:28px;
  box-shadow:0 6px 20px -10px rgba(0,0,0,.12);
  transition:transform .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent; /* モバイルの青ハイライト除去 */
}
.share-btn:hover{ transform:translateY(-1px); background:#f7f8ff; }

/* ダークモード調整 */
body.dark-mode .share-btn{
  background:#283240;
  color:#a6e1fa;
  border-color:#33404c;
}
body.dark-mode .share-btn:hover{
  background:#323a47;
}


/* シェアボタンの下線を完全に無効化（hover/focus含む） */
.share-btn,
.share-btn:link,
.share-btn:visited,
.share-btn:hover,
.share-btn:focus,
.share-btn:active {
  text-decoration: none !important;
}

/* アイコンの行高を詰めてセンタリングを安定 */
.share-btn i {
  line-height: 1;
  pointer-events: none; /* クリックを <a> に通す保険 */
}

/* キーボード操作用のフォーカスリング（下線消した代わり） */
.share-btn:focus-visible {
  outline: 2px solid #5744D8;
  outline-offset: 2px;
}
body.dark-mode .share-btn:focus-visible {
  outline-color: #8de0ee;
}


@media (max-width: 600px){
  .share-btn{
    width:64px;          /* 指標：タップターゲット 48–64px */
    height:64px;
    font-size:30px;
  }
}


/* Radio History modal — close button (single source of truth) */
#historyModal .modal-header { padding:12px 48px 10px 16px; } /* 右側に×の余白 */
#historyCloseBtn {
  position: absolute;
  top: 6px;          /* ← 好みで微調整 */
  right: 8px;        /* ← 好みで微調整 */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}


/* ★ボタンの分だけ右側にスペース（スマホ） */
@media (max-width: 640px){
  #results .episode-item{ padding-right: 26px; } /* 34px(ボタン) + 10px*2(余白) */
}

@media (max-width: 640px){
  .episode-meta{
    font-size: clamp(0.8rem, 3.3vw, 0.98rem);
    line-height: 1.35;
  }
  /* タイトル行もわずかに可変にする場合（任意） */
  #results h5.mb-1{ font-size: clamp(0.95rem, 4vw, 1rem); }
}



/* ===== SP: 4ボタン等幅 + 並び替えは下段（gridで統一） ===== */
@media (max-width: 768px){
  .search-row-controls{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;                        /* 横・縦の間隔＝行間もこれで調整 */
    align-items: stretch;
  }

  /* 4ボタンを完全等幅に（既存の min-width を無効化） */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding-left: .4em;
    padding-right: .4em;
  }

  /* 並び替えは2段目で全幅、行間は gap にまかせる */
  .search-row-controls .sort-wrapper{
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .search-row-controls .sort-wrapper select{
    width: 100%;
    min-height: 40px;
  }

  /* レイアウト切替時の“にゅるっ”を防ぐ（保険） */
  .search-row-controls > * { transition: none !important; }
}




  /* 2) 「フィルタ」はアイコンのみなので擬似要素でテキストを追加 */
  #filterToggleBtn{
    display: flex; align-items: center; justify-content: center; gap: .35em;
  }
  #filterToggleBtn::after{
    content: " フィルタ";            /* ←お好みで「フィルター」に */
    font-size: .95em;
    font-weight: 500;
  }

  /* 3) 他のボタンも中央寄せ（見た目を揃える） */
  #favOnlyToggleBtn,
  #randomBtn,
  .reset-btn{
    display: flex; align-items: center; justify-content: center; gap: .35em;
  }


/* === Controls: 自動調整用の共通サイズ変数＋形崩れ防止 === */
@media (max-width: 768px){
  /* 文字サイズを JS から上書きするための CSS 変数（初期値 15px） */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    --ctl-fs: 15px;                 /* ← JS がここを書き換えます */
    font-size: var(--ctl-fs);
    white-space: nowrap;            /* ぜったい改行しない */
    overflow: hidden;
    text-overflow: ellipsis;
    gap: .45em;
    height: 37px;                   /* 高さは固定 → 形崩れしない */
    line-height: 1;                 /* アイコンと文字のベース */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
  }

  /* アイコンの大きさも文字と一緒に縮む */
  #filterToggleBtn i,
  #favOnlyToggleBtn i,
  #randomBtn i{
    font-size: calc(var(--ctl-fs) + 1px);
    line-height: 1;
  }

  /* フィルタのラベルは ::after で付与しているので、サイズ連動 */
  #filterToggleBtn::after{
    content: attr(data-label);      /* JSで data-label="フィルタ" を付けます */
    font-size: var(--ctl-fs);
    font-weight: 600;
    margin-left: .35em;
  }

  /* リセットにも記号を追加して左右バランスを統一（FontAwesome不要） */
  
}

/* === SPボタン: 見た目の統一（アイコン行高/記号サイズ） === */
@media (max-width: 768px){
  /* 自動調整フォント用 変数（JSで更新） */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    --ctl-fs: 15px;                 /* JSがここを上書き */
    font-size: var(--ctl-fs);
    line-height: 1;
    height: 37px;                   /* 高さ固定で形崩れ防止 */
  }

  /* FAアイコンの行高をきっちり揃える */
  #favOnlyToggleBtn i,
  #randomBtn i,
  #filterToggleBtn i{
    font-size: calc(var(--ctl-fs) + 1px);
    line-height: 1;
  }

  /* リセットにも記号（↺）— 他と同サイズに */
  
}


/* ===== SP: 4ボタンの太さと余白を完全統一 ===== */
:root { --ctl-gap: .38em; }  /* アイコンと文字の統一間隔 */

@media (max-width: 768px){
  /* 4ボタンの太さはすべて同じ（500）に統一。余白は margin で管理 */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    font-weight: 500 !important;
    gap: 0 !important;                /* gapに依存せず margin に統一 */
  }

  /* フィルタのラベル（::after）は太さ/間隔を統一 */
  #filterToggleBtn::after{
    margin-left: var(--ctl-gap) !important;
    font-weight: 500 !important;      /* ←600になっていたのを上書き */
  }

  /* 既存 <span> ラベルは左マージンで統一（先頭スペース除去はJS側で） */
  #favOnlyToggleBtn span,
  #randomBtn span{
    display: inline !important;
    margin-left: var(--ctl-gap);
    line-height: 1;
  }

  /* リセットの記号（↺）も同スケール・同間隔に */
  
}


/* === Desktop: 4ボタンの見た目を統一（並び替えは上段のまま） === */
:root{
  --ctl-gap-d: .45em;          /* アイコンと文字の間隔（PC） */
  --ctl-fs-d: 15.5px;          /* ボタンの基準フォントサイズ（PC） */
}

@media (min-width: 769px){
  /* 1) 1行配置をキープ。ソートは右端へ寄せる */
  .search-row-controls{ flex-wrap: nowrap; align-items: center; }
  .sort-wrapper{ margin-left: auto; flex: 0 0 260px; min-width: 220px; }

  /* 2) 4ボタンの高さ／丸み／文字太さ／行高を統一 */
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; line-height: 1; font-size: var(--ctl-fs-d);
    font-weight: 500; border-radius: 10px; white-space: nowrap;
    padding: 0 .85em; gap: 0; /* 余白は margin で統一 */
  }

  /* 3) ラベル間隔を統一（お気に入り／ランダムは既存 <span> を使用） */
  #favOnlyToggleBtn span,
  #randomBtn span{ margin-left: var(--ctl-gap-d); }

  /* 4) フィルタにもラベルを付けて統一（HTML変更なし） */
  #filterToggleBtn::after{
    content: " フィルタ";
    margin-left: var(--ctl-gap-d); font-weight: 500;
  }

  /* 5) アイコンと記号のサイズ／行高を揃える */
  #filterToggleBtn i,
  #favOnlyToggleBtn i,
  #randomBtn i{ line-height: 1; font-size: 1em; }
  
}


/* ===== PC: 4ボタンは等幅／余りは並び替えが吸収 ===== */
:root{
  /* 4ボタンの共通幅（画面に応じて少しだけ伸縮） */
  --pc-btn-w: clamp(124px, 12vw, 144px);
}

@media (min-width: 769px){
  /* 1行キープ。ソートは右端で“余りを全部”受ける */
  .search-row-controls{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .search-row-controls .sort-wrapper{
    margin-left: auto;
    flex: 1 1 280px;   /* ← 余白を最優先で広げる */
    min-width: 240px;
  }
  .search-row-controls .sort-wrapper select{
    width: 100%;
  }

  /* 4ボタンの横幅を完全統一（既存の min-width などを打ち消し） */
  #filterToggleBtn,
  #favOnlyToggleBtn,
  #randomBtn,
  .reset-btn{
    flex: 0 0 var(--pc-btn-w) !important;
    width: var(--pc-btn-w) !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* 予防 */
  }
}

/* ===== Controls (Unified) — SP/PC 共通の見た目・間隔・幅 ===== */
:root{
  --pc-btn-w: clamp(124px, 12vw, 144px);
  --ctl-gap: .38em;
}

/* --- SP（768px以下） --- */
@media (max-width: 768px){
  .search-row-controls{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-items: stretch;
  }
  .search-row-controls .sort-wrapper{
    grid-column: 1 / -1;
    margin-top: 0;
  }
  .search-row-controls .sort-wrapper select{
    width: 100%;
    min-height: 40px;
  }
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    --ctl-fs: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    line-height: 1;
    font-size: var(--ctl-fs);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 10px;
    border-radius: 10px;
    gap: 0 !important;
  }
  #filterToggleBtn i,
  #favOnlyToggleBtn i,
  #randomBtn i{ font-size: calc(var(--ctl-fs) + 1px); line-height:1; }
  #filterToggleBtn{ display:flex; align-items:center; justify-content:center; }
  #filterToggleBtn::after{
    content: attr(data-label);
    margin-left: var(--ctl-gap) !important;
    font-size: var(--ctl-fs); font-weight: 500; line-height: 1;
  }
  #favOnlyToggleBtn span,
  #randomBtn span{
    display: inline !important;
    margin-left: var(--ctl-gap); line-height: 1;
  }
  .reset-btn::before{
    content: "↺";
    margin-right: var(--ctl-gap);
    font-size: calc(var(--ctl-fs) + 1px);
    line-height: 1; transform: translateY(-.02em);
  }
  .search-row-controls > * { transition: none !important; }
}

/* --- PC（769px以上） --- */
@media (min-width: 769px){
  .search-row-controls{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
  .search-row-controls .sort-wrapper{
    margin-left:auto; flex:1 1 280px; min-width:240px;
  }
  .search-row-controls .sort-wrapper select{ width:100%; }
  .search-row-controls #filterToggleBtn,
  .search-row-controls #favOnlyToggleBtn,
  .search-row-controls #randomBtn,
  .search-row-controls .reset-btn{
    display:inline-flex; align-items:center; justify-content:center;
    height:40px; line-height:1; font-weight:500; font-size:15.5px;
    border-radius:10px; white-space:nowrap; gap:0;
    padding:0 .85em;
    flex:0 0 var(--pc-btn-w) !important; width:var(--pc-btn-w) !important;
    min-width:0 !important; max-width:none !important;
  }
  #favOnlyToggleBtn span, #randomBtn span{ margin-left: var(--ctl-gap); }
  #filterToggleBtn::after{ content:" フィルタ"; margin-left: var(--ctl-gap); font-weight:500; }
  .reset-btn::before{ content:"↺"; margin-right: var(--ctl-gap); font-size:1em; line-height:1; transform: translateY(-.02em); }
}

/* ページトップへボタンのフォーカス可視化 */
#toTopBtn:focus-visible {
  outline: 3px solid #8de0ee;
  outline-offset: 2px;
}

/* 「お気に入りだけ」ON時の保険（JSがクラス付与する前提） */
body.fav-only .episode-item:not(.is-fav) {
  display: none !important;
}


/* === Hover: 色変化のみ（通常/ダーク共通） === */
#filterToggleBtn:hover,
#favOnlyToggleBtn:hover,
#randomBtn:hover,
.reset-btn:hover,
#historyToggle:hover {
  background: var(--filter-btn-active) !important;
  border-color: var(--btn-main) !important;
  color: var(--btn-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}


/* >=641pxでも検索結果枠の外側に同じ余白を付与 */
@media (min-width: 641px) {
  .main-content { padding-left: 15px; padding-right: 15px; }
}


/* === Hover: 色変化のみ（ダークモード） === */
body.dark-mode #filterToggleBtn:hover,
body.dark-mode #favOnlyToggleBtn:hover,
body.dark-mode #randomBtn:hover,
body.dark-mode .reset-btn:hover,
body.dark-mode #historyToggle:hover {
  background: var(--filter-btn-active) !important;
  border-color: var(--btn-main) !important;
  color: var(--btn-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}



/* === Hover: 色変化のみ（ダークモード） — 変形/影は禁止 === */
body.dark-mode #filterToggleBtn:hover,
body.dark-mode #favOnlyToggleBtn:hover,
body.dark-mode #randomBtn:hover,
body.dark-mode .reset-btn:hover,
body.dark-mode #historyToggle:hover {
  background: var(--filter-btn-active) !important;
  border-color: var(--btn-main) !important;
  color: var(--btn-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}


/* Prevent persistent active color on click for main control buttons */
#filterToggleBtn:active,
#favOnlyToggleBtn:active,
#randomBtn:active,
.reset-btn:active {
  background: var(--filter-btn-bg) !important;
  border-color: var(--filter-btn-border) !important;
  color: var(--filter-btn-text) !important;
}
body.dark-mode #filterToggleBtn:active,
body.dark-mode #favOnlyToggleBtn:active,
body.dark-mode #randomBtn:active,
body.dark-mode .reset-btn:active {
  background: var(--filter-btn-bg) !important;
  border-color: var(--filter-btn-border) !important;
  color: var(--filter-btn-text) !important;
}


/* === Buttons: focus-visible はアウトラインのみ（色は変えない） === */
#filterToggleBtn:focus-visible,
#favOnlyToggleBtn:focus-visible,
#randomBtn:focus-visible,
.reset-btn:focus-visible,
#historyToggle:focus-visible {
  outline: 2px solid var(--btn-hover);
  outline-offset: 2px;
}