:root {
  --bg: #0a0c12;
  --card-bg: #1e2333;
  --card-border: #3a4058;
  --text-main: #f5f7fc;
  /* 元の#b7bdd4(彩度25%・色相228°)は青紫ゾーンに入っており、WCAGコントラスト比は
     8.37と数値上十分でも本文として読むと薄く霞んで見えていた。彩度をほぼニュートラルな
     グレーまで落とし明度も上げ、コントラスト比12.3を確保(2026-08-24調整) */
  --text-sub: #e3e4e8;
  --accent: #6cc2ff;
  /* --accentを背景色として使う要素(#x-link、.filter-btn.active)の文字色。
     ダークテーマの--accentは明るいのでほぼ黒、ライトテーマの--accentは暗いので白にする
     (どちらも固定の黒文字にすると、ライトテーマ側でコントラスト比3.9程度まで落ちて読みにくくなる) */
  --accent-contrast: #0a0c12;
  --header-h: 52px;
  --adbar-h: 56px;
  --grid-gap: 10px;
}

/* 手動トグルのみに対応(OSのprefers-color-schemeには連動させない方針。
   言語切替の自動リダイレクトを採用していないのと同じ理由) */
:root[data-theme="light"] {
  --bg: #f2f3f7;
  --card-bg: #ffffff;
  --card-border: #d7dae2;
  --text-main: #14161f;
  --text-sub: #52566a;
  --accent: #1670c7;
  --accent-contrast: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text-main);
  font-family: "Hiragino Sans", "Yu Gothic", "Segoe UI", sans-serif;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

#app-header {
  position: relative;
  min-height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--card-border);
}

#app-title {
  margin: 0;
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow:
    0 0 4px rgba(108, 194, 255, 0.85),
    0 0 12px rgba(108, 194, 255, 0.6),
    0 0 28px rgba(108, 194, 255, 0.4);
}

#header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 780px) {
  #app-header {
    flex-direction: column;
    align-items: stretch;
  }
  #header-right {
    justify-content: flex-start;
  }
}

.header-group {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--card-border);
  min-width: 0;
  max-width: 100%;
}
.header-group:first-child {
  padding-left: 0;
  border-left: none;
}

/* 2026-09-02指摘: 言語切替・テーマ切替は他サイトの慣習として右端に置くのが自然、との
   指摘を受け、HTML側のDOM順は変えずCSSのorderだけで表示順を並べ替える
   (#header-right内のグループ順は index.html 側で 1:リンク集 2:言語+テーマ
   3:表示設定 4:一覧・ジャンル の順。表示上は 1→3→4→2 の順に変える。
   ※2の内部順(言語→テーマ)・4の内部順(一覧→ジャンル)は元のまま変更していない
   ―一覧切替を表示設定パネル内へ統合する案、および言語⇔テーマの並び順を
   about.css側に揃える案はいずれも一度試したが、前者はデスクトップ幅で一覧切替が
   表示設定ボタン群に埋もれて位置がわかりにくいと指摘があり、後者も向きを誤って
   about.css側と合わせるべきところを逆にしてしまったため、2026-09-02中に両方とも
   元の構成に差し戻した) */
#header-right .header-group:nth-child(2) { order: 4; }
#header-right .header-group:nth-child(3) { order: 2; }
#header-right .header-group:nth-child(4) { order: 3; }

@media (max-width: 780px) {
  /* モバイル幅では、あふれた分がその都度どのグループ単位で折り返すか予測しにくく
     不格好に見えていたため、言語+テーマのグループだけflex-basis:100%で強制的に
     独立した行にする(表示設定・一覧/ジャンルの2グループは合計幅が収まるため
     自然に同じ行へ折り返る)。右端配置の指摘に合わせ、この行の中でも右寄せにする */
  #header-right .header-group:nth-child(2) {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

#speed-widget,
#size-widget {
  gap: 4px;
}
#speed-widget .filter-btn,
#size-widget .filter-btn {
  padding: 3px 9px;
}

#glossary-link,
#favorites-link,
#about-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
}
#glossary-link:hover,
#favorites-link:hover,
#about-link:hover { color: var(--text-main); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--text-sub);
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--text-main);
}

.lang-dropdown {
  position: relative;
}
.lang-dropdown-toggle {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sub);
  list-style: none;
  user-select: none;
  white-space: nowrap;
}
.lang-dropdown-toggle::-webkit-details-marker { display: none; }
.lang-dropdown-toggle::after { content: " \25BE"; }
.lang-dropdown-toggle:hover { color: var(--text-main); }
.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.lang-switch {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
}
.lang-switch:hover {
  color: var(--text-main);
  background: rgba(255,255,255,0.06);
}

#settings-toggle.settings-dropdown-toggle {
  position: relative;
  cursor: pointer;
  color: var(--text-main);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
#settings-toggle.settings-dropdown-toggle::after { content: " \25BE"; }
#settings-toggle.settings-dropdown-toggle:hover { border-color: var(--accent); }
.settings-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.settings-dropdown-menu.hidden { display: none; }
.settings-dropdown-menu:not(.hidden) { display: flex; }
/* デスクトップ幅では常時展開の通常インライン行として表示し、ドロップダウン化はモバイル幅のみに限定する
   (#app-headerのブレークポイントと合わせる) */
@media (min-width: 781px) {
  #settings-toggle.settings-dropdown-toggle { display: none; }
  .settings-dropdown-menu,
  .settings-dropdown-menu.hidden {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
  }
}

#x-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-contrast);
  background: var(--accent);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 999px;
}
#x-link:hover { filter: brightness(1.1); }

/* 2026-09-02、お気に入りリンク追加でヘッダー左側グループの項目が4個に増え、モバイル幅で
   3個+孤立した1個(お気に入り)という不格好な折り返しになっていたため、いったん#x-linkの
   ピル装飾を簡素なテキストリンクに変えていたが、他のリンクと見分けがつかなくなるとの
   指摘で、一回り小さいピルとして復活させた(縮小後の合計幅でも1行に収まることを確認済み)。
   (このルールは#x-link本体の定義より後ろに置くこと。詳細度が同じ#x-link同士では
   ソース順で後ろが勝つため、@media (max-width: 780px)ブロックの中に書いても、
   本体の定義より前にあると上書きされない) */
@media (max-width: 780px) {
  .header-group { gap: 6px; }
  #glossary-link, #favorites-link, #about-link { font-size: 11px; }
  #x-link {
    font-size: 11px;
    padding: 3px 8px;
  }
}

#filter-toggle,
#pause-toggle,
#view-toggle {
  background: var(--card-bg);
  color: var(--text-main);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#filter-toggle:hover,
#pause-toggle:hover,
#view-toggle:hover { border-color: var(--accent); }
#pause-toggle.is-paused,
#view-toggle.is-active {
  color: var(--accent);
  border-color: var(--accent);
}

#filter-panel {
  position: absolute;
  top: 100%;
  right: 16px;
  z-index: 10;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 12px 16px;
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - var(--header-h) - 24px);
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#filter-panel::-webkit-scrollbar {
  width: 8px;
}
#filter-panel::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 4px;
}
#filter-panel::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
#filter-panel.hidden { display: none; }

.filter-group { margin-bottom: 10px; }
.filter-group:last-child { margin-bottom: 0; }

.filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-btn {
  background: transparent;
  color: var(--text-sub);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.filter-btn:hover { color: var(--text-main); border-color: var(--accent); }
.filter-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
  font-weight: 700;
}

#view-container {
  flex: 1;
  min-height: 0;
}

#grid {
  height: 100%;
  display: grid;
  gap: var(--grid-gap);
  padding: 12px;
  overflow: hidden;
}
#grid.hidden,
#list-view.hidden {
  display: none;
}

#list-view {
  height: 100%;
  margin: 0;
  padding: 12px;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#list-view::-webkit-scrollbar {
  width: 8px;
}
#list-view::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 4px;
}
#list-view::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.list-item {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--genre-color-vivid, var(--genre-color, var(--card-border)));
  border-radius: 8px;
  padding: 10px 30px 10px 14px;
  flex-shrink: 0;
}
.list-item:hover {
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}
.list-item::after {
  content: "›";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--text-sub);
}
.list-item:hover::after {
  color: var(--accent);
}

.list-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.list-item-tag {
  /* .card-tagと同じ理由・同じ方式(.list-item-top-row内のflexアイテム、2026-09-02)。
     省略記号だと文字が読めなくなるとの指摘で、1行固定はやめて複数行に折り返す方式に
     変更。flex-shrink:1 + min-width:0のおかげで、折り返しても隣の星の列には
     はみ出さない(flexboxの列そのものが分かれているため)。flex-growは0のままにして
     おかないと、テキストが短いタグでも横幅いっぱいに伸びて背景色だけ間延びして見える
     (2026-09-02指摘、一覧表示は横幅が広く特に目立った) */
  min-width: 0;
  flex: 0 1 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--genre-color-vivid, var(--genre-color, var(--accent)));
  background: color-mix(in srgb, var(--genre-color, var(--accent)) 18%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}

.list-item-term {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.list-item-explanation {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  line-height: 1.55;
}

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--genre-color-vivid, var(--genre-color, var(--card-border)));
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  /* 2026-09-02、centerだとカードごとに本文の長さが違うたびタグ・タイトルの開始位置が
     ズレて見える(隣接カード間で特に目立つ)との指摘で上揃えに変更 */
  justify-content: flex-start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.card::-webkit-scrollbar {
  width: 6px;
}
.card::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 3px;
}

.card-content {
  transition: opacity 0.6s ease;
  opacity: 1;
}
.card-content.fading {
  opacity: 0;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.favorite-star {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: var(--text-sub);
  opacity: 0.55;
}
.favorite-star:hover {
  opacity: 1;
  color: var(--accent);
}
.favorite-star.is-active {
  opacity: 1;
  color: #f5c451;
}
/* 2026-09-02、以前はposition:absoluteでカード右上角に星を重ね、タグ側にmax-widthで
   星の分の空きを確保していたが、タグの長さ次第で星と重なる/重ならないカードが混在し
   見た目が不安定だった。タグと星を同じflex行(.card-top-row/.list-item-top-row)に並べる
   方式に変更し、絶対配置をやめて「重ならない」ことをレイアウトで保証する */
.card-top-row,
.list-item-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.card .favorite-star,
.list-item .favorite-star {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.card:hover {
  border-top-color: var(--accent);
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
}

.card-tag {
  /* .card-top-row内のflexアイテム。min-width:0で縮小を許可し、隣の星の列には
     はみ出さない幅までしか広がらない(2026-09-02)。省略記号だと文字が読めなくなる
     との指摘で1行固定はやめ、必要なら複数行に折り返す(flexboxの列が分かれている
     ため、折り返しても星とは重ならない)。flex-growは0のままにしないと、テキストが
     短いタグでも横幅いっぱいに伸びて背景色だけ間延びして見える(2026-09-02指摘) */
  min-width: 0;
  flex: 0 1 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--genre-color-vivid, var(--genre-color, var(--accent)));
  background: color-mix(in srgb, var(--genre-color, var(--accent)) 18%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}

.card-term {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.3;
  flex-shrink: 0;
}

.card-explanation {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-sub);
  line-height: 1.55;
  flex-shrink: 0;
}

.card-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  margin-top: 8px;
  flex-shrink: 0;
}
.card:hover .card-hint {
  color: var(--accent);
}

.card-progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.card-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--genre-color-vivid, var(--genre-color, var(--accent)));
  transform-origin: left;
}

/* ジャンル別配色(GENRE_COLOR_PALETTE)はダーク背景(--card-bg: #1e2333)向けに調整した
   高明度のパステルなので、白系のライトテーマで文字色にそのまま使うと発色が強すぎて目に痛い
   (2026-09-02指摘)。ライトテーマの時だけ黒寄りにcolor-mixして暗く・落ち着かせる。
   JS側のGENRE_COLOR_PALETTE自体は変更せず、使用側(このCSS)だけで見た目を調整する方式
   (テーマ切替時に再描画・再計算が不要で済むため)。
   ただしカード左ボーダー・進捗バーは面積が小さく、文字と同じ45%まで暗くするとジャンル間の
   見分けがつきにくくなるため、元の色を85%残す弱いcolor-mixだけ適用する(2026-09-02指摘。
   color-mix(in srgb, 色 P%, black)はP%が元の色側の割合なので、"少しだけ暗く"したい場合は
   Pを高めの値にする。20%を指定してほぼ黒になった誤りが過去にあったため注意) */
:root[data-theme="light"] .card-tag,
:root[data-theme="light"] .list-item-tag {
  color: color-mix(in srgb, var(--genre-color-vivid, var(--genre-color, var(--accent))) 45%, black);
}
:root[data-theme="light"] .list-item,
:root[data-theme="light"] .card {
  border-left-color: color-mix(in srgb, var(--genre-color-vivid, var(--genre-color, var(--card-border))) 85%, black);
}
:root[data-theme="light"] .card-progress-bar {
  background: color-mix(in srgb, var(--genre-color-vivid, var(--genre-color, var(--accent))) 85%, black);
}
/* .card-progress-trackの背景(rgba(255,255,255,0.1))はダーク背景前提の白半透明で、
   ライトテーマのカード(白背景)に対しては同化してほぼ見えなくなるため、黒半透明に上書きする
   (2026-09-02、全体見直しで発見) */
:root[data-theme="light"] .card-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

#page-footer {
  min-height: var(--adbar-h);
  flex-shrink: 0;
  border-top: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 16px;
}

#ad-bar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-placeholder {
  font-size: 12px;
  color: var(--text-sub);
  border: 1px dashed var(--card-border);
  padding: 8px 24px;
  border-radius: 6px;
}

.copyright {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
}

/* カード切替グロー: 新しいカード内容が表示された瞬間、そのジャンル色でふわっと光らせる */
@keyframes cardGlowPulse {
  0%   { box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 0 color-mix(in srgb, var(--genre-color, var(--accent)) 0%, transparent); }
  35%  { box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 26px 3px color-mix(in srgb, var(--genre-color, var(--accent)) 75%, transparent); }
  100% { box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 0 0 0 color-mix(in srgb, var(--genre-color, var(--accent)) 0%, transparent); }
}
.card.card-glow {
  animation: cardGlowPulse 900ms ease-out;
}