/* =============================================================================
   fc-ranking 共通スタイル
   - 公開側 / 管理画面 / 詳細ページボタン / 作成 UI / 表示 UI / トースト
   - 全セレクタに fc-rank- プレフィックス (kdtk-fcsearch との衝突回避)
   - Simplicity2 親テーマと同じ視覚言語 (burgundy + grays + 4px radius) に整合
   ============================================================================= */

/* ----- デザイントークン ----- */
:root {
  --fc-burgundy:        #a9171d;
  --fc-burgundy-soft:   #a85253;
  --fc-link:            #2098A8;
  --fc-link-hover:      #C03;
  --fc-text:            #333;
  --fc-text-body:       #222;
  --fc-text-muted:      #666;
  --fc-border:          #ddd;
  --fc-border-soft:     #eee;
  --fc-bg:              #fff;
  --fc-bg-soft:         #F7F7F7;
  --fc-bg-row-alt:      #fafafa;
  --fc-danger:          #c62828;
  --fc-font: "Hiragino Kaku Gothic ProN", Meiryo, "ヒラギノ角ゴ ProN W3", sans-serif;
  --fc-radius:          4px;
  --fc-shadow-1:        0 1px 2px rgba(0,0,0,.06);
  --fc-shadow-hover:    0 2px 6px rgba(0,0,0,.10);
}

/* ----- リセット風 ----- */
.fc-rank-page,
.fc-rank-admin {
  font-family: var(--fc-font);
  line-height: 1.6;
  color: var(--fc-text-body);
  background: var(--fc-bg-soft);
  margin: 0;
}
.fc-rank-page a, .fc-rank-admin a { color: var(--fc-link); text-decoration: none; }
.fc-rank-page a:hover, .fc-rank-admin a:hover { color: var(--fc-link-hover); text-decoration: underline; }

/* =============================================================================
   印刷用: ヘッダー・ソーシャル・トースト等の操作 UI を非表示にして
   コンテンツ本体だけ印刷できるようにする
   ============================================================================= */
@media print {
  .fc-rank-header,
  .fc-rank-toast,
  .fc-rank-social,
  .fc-rank-cta-row,
  .fc-rank-actions,
  .fc-rank-fav-wrap,
  .fc-rank-pick-list,
  .fc-rank-tabs,
  .fc-rank-search-filters {
    display: none !important;
  }
  .fc-rank-page,
  .fc-rank-main {
    background: #fff !important;
    color: #000 !important;
  }
  .fc-rank-row {
    page-break-inside: avoid;
  }
}

/* ----- レトロドット字 (WP テーマと共通の /common/font/fcf.ttf) -----
   /fc-ranking/ 標準ページは Simplicity2 child の style.css を読まないので、
   このフォントをここでも宣言する必要がある (同名 @font-face は重複登録 OK)。 */
@font-face {
  font-family: 'fcf';
  src: url('/common/font/fcf.ttf');
  font-display: swap;
}

/* ----- ヘッダ (Simplicity2 site header と統一: 赤バー + 中央寄せ wrapper) ----- */
.fc-rank-header {
  background: var(--fc-burgundy);
  color: #fff;
  padding: 0;
  border-bottom: none;
}
/* WP top の #header-in と同じ width 戦略 (固定 1070px、ビューポート狭時は 100%) */
.fc-rank-header-in {
  width: 1070px;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .4em;
  box-sizing: border-box;
}
.fc-rank-site-title {
  margin: 0;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  /* fcf ドット字は廃止 — WP top と同じ Hiragino/Meiryo に揃える */
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, "ヒラギノ角ゴ ProN W3", sans-serif;
  letter-spacing: .05em;
  line-height: 1.2;
}
.fc-rank-site-title a { color: #fff !important; text-decoration: none; }
.fc-rank-site-title a:hover { text-decoration: underline; }
.fc-rank-nav { display: flex; gap: 1em; flex-wrap: wrap; align-items: center; }
.fc-rank-nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .9em;
}
.fc-rank-nav a:hover { color: #fff; text-decoration: underline; }

/* ----- main (WP top の #header-in / #body-in と同じ 1070px に揃える) ----- */
.fc-rank-main { width: 1070px; max-width: 100%; margin: 1em auto; padding: 0 20px; box-sizing: border-box; }

/* ----- breadcrumb (各サブページから「ランキングメーカートップへ戻る」) ----- */
.fc-rank-breadcrumb {
  margin: .8em 0;
  font-size: .9em;
}
.fc-rank-breadcrumb a {
  color: var(--fc-link);
  text-decoration: none;
}
.fc-rank-breadcrumb a:hover {
  color: var(--fc-link-hover);
  text-decoration: underline;
}

/* ----- footer ----- */
/* Footer は WP top と同じ #footer / #footer-in / #footer-navi / #copyright / .credit
   構造を使うため、Simplicity2 親 + simplicity2-child/style.css の CSS を流用する。
   旧 .fc-rank-footer-* / .fc-rank-disclaimer / .fc-rank-copyright スタイルは
   新 HTML では使われないため削除済み (2026-05-10)。 */

/* ----- メッセージ ----- */
.fc-rank-success { background: #e8f5e9; color: #1b5e20; padding: .6em 1em; border-radius: var(--fc-radius); }
.fc-rank-error   { background: #ffebee; color: var(--fc-danger); padding: .6em 1em; border-radius: var(--fc-radius); }
.fc-rank-note    { color: var(--fc-text-muted); font-size: .9em; }
.fc-rank-popular-note { color: var(--fc-text-muted); font-size: .9em; margin: 0 0 .6em; }

/* ----- CTA ボタン (2 種統合) ----- */
.fc-rank-cta-row { display: flex; gap: .8em; flex-wrap: wrap; align-items: center; margin: .8em 0; }
.fc-rank-cta-primary, .fc-rank-cta-secondary {
  display: inline-block; box-sizing: border-box;
  padding: .55em 1.1em; min-height: 40px;
  font-weight: 600;
  border-radius: var(--fc-radius);
  text-decoration: none !important;
  border: 1px solid var(--fc-burgundy);
  transition: background-color .15s, color .15s;
}
.fc-rank-cta-primary {
  background: var(--fc-burgundy); color: #fff !important;
}
.fc-rank-cta-primary:hover { background: var(--fc-burgundy-soft); border-color: var(--fc-burgundy-soft); }
.fc-rank-cta-secondary {
  background: #fff; color: var(--fc-burgundy) !important;
}
.fc-rank-cta-secondary:hover { background: var(--fc-burgundy); color: #fff !important; }

/* ----- 空状態 ----- */
.fc-rank-empty-state {
  background: var(--fc-bg-soft);
  border: 1px solid var(--fc-border);
  border-left: 3px solid var(--fc-burgundy);
  border-radius: var(--fc-radius);
  padding: 1.2em 1.4em;
  margin: 1em 0;
}
.fc-rank-empty-state p:first-child { margin-top: 0; }
.fc-rank-empty-state p:last-child  { margin-bottom: 0; }

/* ----- ヒーロー (トップ) ----- */
.fc-rank-hero {
  background: var(--fc-bg-soft);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 1.2em;
}
.fc-rank-hero h2 { margin-top: 0; }

/* =============================================================================
   トースト (画面右下、3〜4秒で自動消去)
   ============================================================================= */
.fc-rank-toast {
  position: fixed; right: 1em; bottom: 1em;
  min-width: 240px; max-width: 80vw;
  padding: .9em 1.2em;
  background: #333; color: #fff;
  border-radius: var(--fc-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  font-size: .95em; line-height: 1.5;
  opacity: 0; transform: translateY(.6em);
  transition: opacity .25s, transform .25s;
  pointer-events: none; z-index: 9999;
}
.fc-rank-toast.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.fc-rank-toast.is-success { background: #2e7d32; }
.fc-rank-toast.is-error   { background: var(--fc-danger); }

/* =============================================================================
   詳細ページお気に入りボタン (DOM 注入)
   ============================================================================= */
.fc-rank-fav-wrap {
  margin: 1em 0; padding: .7em .9em;
  background: var(--fc-bg-soft);
  border: 1px solid var(--fc-border);
  border-left: 3px solid var(--fc-burgundy);
  border-radius: var(--fc-radius);
  display: flex; align-items: center; gap: .8em; flex-wrap: wrap;
}
.fc-rank-fav-btn {
  font: 600 1em/1.2 var(--fc-font);
  padding: .55em 1.1em; min-height: 44px;
  background: #fff; color: var(--fc-burgundy);
  border: 1px solid var(--fc-burgundy);
  border-radius: var(--fc-radius); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.fc-rank-fav-btn:hover    { background: var(--fc-burgundy-soft); color: #fff; border-color: var(--fc-burgundy-soft); }
.fc-rank-fav-btn:disabled { opacity: .55; cursor: wait; }
.fc-rank-fav-btn.is-stocked         { background: var(--fc-burgundy); color: #fff; }
.fc-rank-fav-btn.is-stocked:hover   { background: var(--fc-burgundy-soft); border-color: var(--fc-burgundy-soft); }
.fc-rank-stock-link { font-size: .9em; color: var(--fc-text-muted); }
.fc-rank-stock-link:hover { color: var(--fc-burgundy); }

/* =============================================================================
   お題カード (index.php / theme.php / stock.php)
   ============================================================================= */
.fc-rank-theme-grid {
  display: grid;
  /* min(260px, 100%) で 320px 未満ビューポートでも横スクロール発生を防ぐ */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1em; margin: 1em 0;
}
/* embed_top.php 用の 3 列固定
   minmax(0, 1fr) にしておかないと、長いお題ラベルや 3 連サムネ等の min-content が
   1fr 配分を上回った時に grid 全体が親コンテナを突き抜ける (1fr の既定値 minmax(auto,1fr) の罠) */
.fc-rank-theme-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8em;
  min-width: 0;
}
@media (max-width: 720px) {
  .fc-rank-theme-grid--compact { grid-template-columns: minmax(0, 1fr); }
}
/* compact カード内の行数固定: タイトル/説明文の長さに依存せず TOP3 サムネ・作者欄を整列 */
.fc-rank-theme-grid--compact .fc-rank-card-theme-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.2em;
}
.fc-rank-theme-grid--compact .fc-rank-theme-card h3,
.fc-rank-theme-grid--compact .fc-rank-theme-card--mini h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 2.7em;
  margin: 0 0 .25em;
}
.fc-rank-theme-grid--compact .fc-rank-theme-card .fc-rank-theme-desc,
.fc-rank-theme-grid--compact .fc-rank-theme-card--mini .fc-rank-theme-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  min-height: 2.4em;
}

.fc-rank-theme-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: 1em;
  display: flex; flex-direction: column; gap: .4em;
  transition: border-color .15s, box-shadow .15s;
}
/* stretched-link パターン: カード全体クリック可能 + 内部リンクは個別動作 */
.fc-rank-theme-card.has-stretched-link:hover {
  border-color: var(--fc-burgundy);
  box-shadow: var(--fc-shadow-1);
  cursor: pointer;
}
.fc-rank-card-stretched-link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.fc-rank-theme-card .fc-rank-card-top3,
.fc-rank-theme-card .fc-rank-theme-actions,
.fc-rank-theme-card a:not(.fc-rank-card-stretched-link) {
  position: relative; z-index: 2;
}
.fc-rank-theme-card h3 { margin: 0 0 .4em; font-size: 1.05em; font-weight: 600; }
.fc-rank-theme-card h3 a { color: var(--fc-text); text-decoration: none; }
.fc-rank-theme-card h3 a:hover { color: var(--fc-burgundy); }
.fc-rank-theme-card .fc-rank-theme-desc { font-size: .9em; color: var(--fc-text-muted); }
.fc-rank-theme-card .fc-rank-theme-actions { margin-top: auto; padding-top: .8em; }

/* マイページ「✍️ あなたが作ったランキング」の反応サマリ (閲覧数 / いいね数) */
.fc-rank-mine-stats {
  list-style: none; margin: .35em 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .8em;
  font-size: .85em; color: var(--fc-text-muted);
  position: relative; z-index: 2;
}
.fc-rank-mine-stats li { display: inline-flex; align-items: center; gap: .25em; }
.fc-rank-mine-stats-icon { opacity: .8; }

/* =============================================================================
   お題カード mini 版 (embed_top.php 用、テキスト中心)
   ============================================================================= */
.fc-rank-theme-card--mini {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: .8em .9em;
  text-decoration: none;
  color: var(--fc-text);
  transition: border-color .15s, box-shadow .15s;
}
.fc-rank-theme-card--mini:hover {
  border-color: var(--fc-burgundy);
  box-shadow: var(--fc-shadow-1);
  text-decoration: none;
}
.fc-rank-theme-card--mini h3 {
  margin: 0 0 .25em;
  font-size: 1em; font-weight: 600;
  color: var(--fc-text);
  border: 0; padding: 0;
}
.fc-rank-theme-card--mini:hover h3 { color: var(--fc-burgundy); }
.fc-rank-theme-card--mini .fc-rank-theme-desc {
  display: block;
  color: var(--fc-text-muted);
  font-size: .82em; line-height: 1.5;
  margin-bottom: .4em;
}
.fc-rank-theme-card--mini .fc-rank-theme-stat {
  display: inline-block;
  font-size: .78em; color: var(--fc-burgundy);
  font-weight: 600;
}
.fc-rank-theme-card--mini .fc-rank-stat-empty {
  font-size: .78em; color: var(--fc-text-muted);
}

/* =============================================================================
   お題カード リッチ版 (人気作品 TOP3 サムネ + CTA)
   index.php / stock.php の「お題一覧」で使用
   ============================================================================= */
.fc-rank-theme-card-rich {
  padding: 0;             /* サムネを端まで広げる */
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.fc-rank-theme-card-rich.has-stretched-link:hover {
  border-color: var(--fc-burgundy);
  box-shadow: var(--fc-shadow-1);
}

.fc-rank-theme-card-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 4px;
  background: var(--fc-bg-soft);
}
.fc-rank-theme-card-thumb {
  position: relative;
  background: #fff;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--fc-radius);
}
.fc-rank-theme-card-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  /* タイトル画像をピクセル等倍でクリスプに */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.fc-rank-theme-card-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--fc-text-muted); font-size: 1.4em;
  background: #f4f4f4;
}

.fc-rank-theme-card-body {
  padding: .8em 1em 1em;
  display: flex; flex-direction: column; gap: .35em;
}
.fc-rank-theme-card-body h3 { margin: 0; font-size: 1.05em; font-weight: 600; line-height: 1.35; }
.fc-rank-theme-card-body h3 a { color: var(--fc-text); text-decoration: none; }
.fc-rank-theme-card-body h3 a:hover { color: var(--fc-burgundy); }
.fc-rank-theme-card-body small.fc-rank-theme-desc {
  color: var(--fc-text-muted); font-size: .88em; line-height: 1.5;
}

.fc-rank-theme-stats { margin: 0; font-size: .88em; line-height: 1.5; }
.fc-rank-stat-link {
  color: var(--fc-burgundy); font-weight: 600; text-decoration: none;
}
.fc-rank-stat-link:hover { text-decoration: underline; }
.fc-rank-stat-empty {
  color: var(--fc-text-muted); font-weight: 600;
}

.fc-rank-theme-card-body .fc-rank-theme-actions { margin: .3em 0 0; padding: 0; }
.fc-rank-theme-btn {
  display: inline-block; box-sizing: border-box;
  padding: .55em 1em; min-height: 36px;
  background: #fff; color: var(--fc-burgundy);
  border: 1px solid var(--fc-burgundy);
  border-radius: var(--fc-radius);
  font-weight: 600; font-size: .92em;
  line-height: 1.4;
  transition: background-color .15s, color .15s;
}
.fc-rank-theme-card-rich:hover .fc-rank-theme-btn { background: var(--fc-burgundy); color: #fff; }
.fc-rank-card-theme-label {
  display: block;
  font-size: .8em; color: var(--fc-text-muted);
  margin: 0 0 .15em;
  line-height: 1.3;
}

/* ランキングカード内の TOP3 サムネ (theme.php / index.php / stock.php / embed_*) */
.fc-rank-card-top3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .3em;
  margin: .3em 0 .5em;
}
.fc-rank-card-thumb {
  position: relative; display: block;
  width: 100%; height: 0; padding-bottom: 75%;     /* 4:3 (aspect-ratio フォールバック) */
  background: var(--fc-bg-soft);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  overflow: hidden;
}
.fc-rank-card-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  display: block;
  /* タイトル画像 (256x224 ピクセルアート) を拡大表示してもぼやけないよう
     ピクセル境界を保つ。ファミコン実機解像度がそのまま見えるので意図的にレトロ感が出る */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.fc-rank-card-medal {
  position: absolute; top: 4px; left: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 .25em;
  font-size: .85em; font-weight: 700; line-height: 1;
  color: #fff;
  background: var(--fc-burgundy);
  border-radius: 50%;
  box-shadow: var(--fc-shadow-1);
}
@media (max-width: 540px) {
  .fc-rank-card-medal { min-width: 24px; height: 24px; font-size: .9em; }
}

/* =============================================================================
   ストック一覧 / 検索結果カード (画像つき)
   ============================================================================= */
.fc-rank-game-list {
  display: grid;
  /* min を 180→140px に縮小 (アコーディオン wrap の 1em 余白でスマホ 2 列が維持できなくなった対策) */
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: .8em;
}
.fc-rank-game-card {
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius); padding: .6em;
  display: flex; flex-direction: column; gap: .3em;
  transition: opacity .3s;
}
.fc-rank-game-thumb {
  display: block; width: 100%; height: 0;
  padding-bottom: 75%;            /* 4:3 (aspect-ratio フォールバック) */
  position: relative;
  background: var(--fc-bg-soft); border-radius: var(--fc-radius); overflow: hidden;
}
.fc-rank-game-thumb img {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.fc-rank-game-card h4 { margin: 0; font-size: .95em; line-height: 1.4; }
.fc-rank-game-card .fc-rank-game-meta { font-size: .8em; color: var(--fc-text-muted); }
.fc-rank-game-card .fc-rank-cat-badge {
  display: inline-block; font-size: .7em; padding: .1em .4em;
  background: #e0e0e0; border-radius: var(--fc-radius);
}
.fc-rank-game-card .fc-rank-cat-badge[data-cat="FCDS"] { background: #f8bbd0; color: #880e4f; }

/* ストック解除ボタン (2 段階クリック、静的色のみ・アニメ廃止) */
.fc-rank-stock-remove {
  margin-top: auto; padding: .5em .8em; min-height: 36px;
  background: #fff; border: 1px solid var(--fc-danger); color: var(--fc-danger);
  border-radius: var(--fc-radius); cursor: pointer; font-size: .85em;
  transition: background-color .15s, color .15s;
}
.fc-rank-stock-remove:hover  { background: #ffebee; }
.fc-rank-stock-remove.is-confirm {
  background: var(--fc-danger); color: #fff;
}

/* =============================================================================
   ランキング作成 UI (create.php)
   ============================================================================= */
.fc-rank-editor {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1em; margin: 1em 0;
}
@media (max-width: 720px) {
  .fc-rank-editor { grid-template-columns: 1fr; }
}
.fc-rank-editor-left, .fc-rank-editor-right {
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius); padding: .8em;
}

/* タブ */
.fc-rank-tabs { display: flex; gap: .4em; margin-bottom: .6em; }
.fc-rank-tab {
  padding: .6em 1em; min-height: 40px;
  border: 1px solid var(--fc-border); background: #fff; color: var(--fc-text);
  cursor: pointer; border-radius: var(--fc-radius); font-size: .95em;
  transition: background-color .15s, color .15s;
}
.fc-rank-tab:hover { background: var(--fc-bg-soft); }
.fc-rank-tab.is-active { background: var(--fc-burgundy); color: #fff; border-color: var(--fc-burgundy); }

/* 検索フィルタ全体 */
.fc-rank-search-filters {
  display: flex; flex-direction: column; gap: .5em;
  padding: .5em; margin-bottom: .4em;
  background: var(--fc-bg-soft); border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
}
.fc-rank-search-filters[hidden] { display: none; }
.fc-rank-filter-row {
  display: flex; flex-wrap: wrap; gap: .4em; align-items: center;
}
.fc-rank-filter-row > input,
.fc-rank-filter-row > select,
.fc-rank-search-rdate > input,
.fc-rank-search-rdate > select {
  padding: .55em .6em; box-sizing: border-box;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
  font-size: 16px; line-height: 1.25;
  min-height: 44px;
}
.fc-rank-search-input { flex: 1 1 14em; min-width: 0; }
.fc-rank-search-sort  { flex: 0 0 auto; max-width: 100%; }
.fc-rank-search-genre,
.fc-rank-search-maker { flex: 1 1 10em; min-width: 0; }
.fc-rank-search-rdate {
  display: inline-flex; align-items: center; gap: .3em;
  flex: 0 0 auto;
}
.fc-rank-search-rdate > input,
.fc-rank-search-rdate > select { width: 6.5em; }
.fc-rank-search-rdate-sep { color: var(--fc-text-muted); }
.fc-rank-search-count { margin: 0; color: var(--fc-text-muted); font-size: .85em; }
.fc-rank-search-count.is-warn { color: var(--fc-danger); font-weight: 600; }
@media (max-width: 720px) {
  .fc-rank-filter-row > input,
  .fc-rank-filter-row > select { flex: 1 1 100%; }
  .fc-rank-search-rdate { flex: 1 1 100%; justify-content: flex-start; }
  .fc-rank-search-rdate > input,
  .fc-rank-search-rdate > select { flex: 1 1 0; min-width: 0; max-width: 9em; }
}

/* 編集モードバナー */
.fc-rank-edit-banner {
  margin: .8em 0; padding: .7em 1em;
  background: var(--fc-bg-soft);
  border: 1px solid var(--fc-border);
  border-left: 4px solid var(--fc-burgundy);
  color: var(--fc-text);
  border-radius: var(--fc-radius); font-weight: 600;
}

/* ピックリスト */
.fc-rank-pick-list { max-height: 60vh; overflow-y: auto; margin-top: .6em; }
@media (max-width: 720px) {
  .fc-rank-pick-list { max-height: 50vh; }
}
.fc-rank-pick-more {
  display: block; width: 100%; box-sizing: border-box;
  margin: .6em 0 .2em; padding: .8em 1em; min-height: 44px;
  background: #fff; color: var(--fc-burgundy);
  border: 1px dashed var(--fc-burgundy); border-radius: var(--fc-radius);
  font-size: .95em; cursor: pointer;
  transition: background-color .15s;
}
.fc-rank-pick-more:hover:not(:disabled) { background: var(--fc-bg-soft); }
.fc-rank-pick-more:disabled { opacity: .55; cursor: progress; }
.fc-rank-pick-item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 9em;
  align-items: center;
  gap: .6em; padding: .5em;
  border-bottom: 1px solid var(--fc-border-soft);
}
.fc-rank-pick-item:hover { background: var(--fc-bg-soft); }
.fc-rank-pick-item.is-placed { background: #f1f8e9; }
.fc-rank-pick-thumb {
  width: 60px; height: 45px; background: var(--fc-bg-soft); border-radius: var(--fc-radius); overflow: hidden;
  flex-shrink: 0;
}
.fc-rank-pick-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fc-rank-pick-info { min-width: 0; overflow: hidden; }
.fc-rank-pick-info b { display: block; font-size: .92em; line-height: 1.3; word-break: break-word; }
.fc-rank-pick-info small { display: block; color: var(--fc-text-muted); font-size: .78em; word-break: break-word; }
.fc-rank-placed-note { color: #2e7d32; }

.fc-rank-pick-actions {
  display: grid;
  grid-template-columns: auto auto;
  gap: .25em;
  align-items: center;
  justify-items: stretch;
}
.fc-rank-pick-place {
  grid-column: 1 / span 2;
  width: 100%; box-sizing: border-box;
  min-height: 40px; padding: .4em .6em;
  font-size: .95em; font-weight: 600;
  background: var(--fc-burgundy); color: #fff;
  border: 1px solid var(--fc-burgundy); border-radius: var(--fc-radius);
  cursor: pointer;
  transition: background-color .15s;
}
.fc-rank-pick-place:hover:not(:disabled) { background: var(--fc-burgundy-soft); border-color: var(--fc-burgundy-soft); }
.fc-rank-pick-place:disabled {
  background: #e0e0e0; color: var(--fc-text-muted);
  border-color: var(--fc-border); cursor: not-allowed;
  font-weight: 400;
}
.fc-rank-pick-actions select {
  grid-column: 1 / span 2;
  width: 100%; box-sizing: border-box;
  font-size: .85em; padding: .3em; min-height: 32px;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
  color: var(--fc-text-muted);
}
.fc-rank-pick-fav,
.fc-rank-pick-detail {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-width: 44px; min-height: 44px;
  padding: 0; box-sizing: border-box;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
  background: #fff; color: var(--fc-text-muted);
  font-size: 1.1em; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.fc-rank-pick-fav:hover,
.fc-rank-pick-detail:hover { background: var(--fc-bg-soft); color: var(--fc-burgundy); border-color: var(--fc-burgundy); }
.fc-rank-pick-fav.is-stocked {
  color: #fff; border-color: var(--fc-burgundy); background: var(--fc-burgundy);
}
.fc-rank-pick-fav:disabled { opacity: .5; cursor: progress; }

@media (max-width: 540px) {
  .fc-rank-pick-item { grid-template-columns: 50px minmax(0, 1fr) 8em; gap: .4em; }
  .fc-rank-pick-thumb { width: 50px; height: 38px; }
}

/* スロット */
.fc-rank-slots { display: flex; flex-direction: column; gap: .4em; }
.fc-rank-slot {
  display: grid;
  grid-template-columns: 3em 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: .5em; padding: .5em;
  background: var(--fc-bg-soft);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  transition: background-color .15s, border-color .15s;
}
.fc-rank-slot.is-empty .fc-rank-slot-content { color: var(--fc-text-muted); font-style: italic; }
/* 必須 1〜3 位 = burgundy 左 stripe */
.fc-rank-slot[data-position="1"],
.fc-rank-slot[data-position="2"],
.fc-rank-slot[data-position="3"],
.fc-rank-slot.is-required {
  border-left: 3px solid var(--fc-burgundy);
}
/* error は静的に red border + bg、シェイクなし */
.fc-rank-slot.is-error {
  border-color: var(--fc-danger); background: #ffcdd2;
}

.fc-rank-slot-pos { font-weight: bold; font-size: 1.2em; text-align: center; color: var(--fc-text); }
.fc-rank-slot[data-position="1"] .fc-rank-slot-pos,
.fc-rank-slot[data-position="2"] .fc-rank-slot-pos,
.fc-rank-slot[data-position="3"] .fc-rank-slot-pos { color: var(--fc-burgundy); }
.fc-rank-slot-thumb {
  width: 60px; height: 45px; background: #fff; border-radius: var(--fc-radius); overflow: hidden;
  flex-shrink: 0;
}
.fc-rank-slot-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.fc-rank-slot-content { min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.fc-rank-slot-content b { display: block; font-size: .95em; word-break: break-all; }
.fc-rank-slot-content small { color: var(--fc-text-muted); font-size: .78em; }
.fc-rank-slot-content input[type="text"] {
  width: 100%; box-sizing: border-box; padding: .35em .5em; font-size: .85em;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
}
.fc-rank-slot-actions { display: flex; flex-direction: column; gap: .25em; }
.fc-rank-slot-actions button {
  font-size: 1em; padding: .3em .6em; min-width: 36px; min-height: 32px;
  cursor: pointer; border: 1px solid var(--fc-border); background: #fff; border-radius: var(--fc-radius);
  transition: background-color .15s;
}
.fc-rank-slot-actions button:hover { background: var(--fc-bg-soft); }
.fc-rank-slot-actions button.is-danger {
  border-color: var(--fc-danger); color: var(--fc-danger);
}
.fc-rank-slot-actions button.is-danger:hover { background: #ffebee; }
@media (max-width: 720px) {
  .fc-rank-slot-actions {
    flex-direction: row; gap: .15em;
  }
  .fc-rank-slot-actions button { min-width: 40px; min-height: 40px; }
}

/* 全体メタ入力 */
.fc-rank-meta-form { margin-top: 1em; display: flex; flex-direction: column; gap: .5em; }
.fc-rank-meta-form input[type="text"], .fc-rank-meta-form textarea {
  width: 100%; padding: .5em; box-sizing: border-box;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius); font-family: inherit;
}
.fc-rank-actions { margin-top: 1em; display: flex; gap: .6em; flex-wrap: wrap; }
.fc-rank-actions button {
  padding: .55em 1.1em; min-height: 44px; font-size: 1em; cursor: pointer;
  border: 1px solid var(--fc-burgundy); background: var(--fc-burgundy); color: #fff;
  border-radius: var(--fc-radius); font-weight: 600;
  transition: background-color .15s, color .15s;
}
.fc-rank-actions button:hover  { background: var(--fc-burgundy-soft); border-color: var(--fc-burgundy-soft); }
.fc-rank-actions button:disabled {
  background: #aaa; border-color: #aaa; cursor: not-allowed;
}
.fc-rank-actions button.is-secondary {
  background: #fff; color: var(--fc-burgundy);
}
.fc-rank-actions button.is-secondary:hover { background: var(--fc-burgundy); color: #fff; }
.fc-rank-publish-hint { margin: .4em 0; font-size: .85em; color: var(--fc-text-muted); }

/* =============================================================================
   ランキング表示 UI (ranking.php)
   ============================================================================= */
.fc-rank-display { margin: 1em 0; }
.fc-rank-display-head {
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius); padding: 1em;
}
.fc-rank-display-head h2 { margin: 0 0 .4em; }
.fc-rank-display-subtitle { color: var(--fc-text-muted); font-size: .8em; }
.fc-rank-display-comment { margin-top: .6em; }
.fc-rank-author { color: var(--fc-text-muted); font-size: .9em; }
.fc-rank-status-draft { color: var(--fc-danger); font-weight: 600; }

.fc-rank-list { display: flex; flex-direction: column; gap: .6em; margin: 1em 0; }
.fc-rank-row {
  display: grid;
  grid-template-columns: 4em 96px minmax(0, 1fr);
  align-items: center;
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius); padding: .7em;
  gap: .8em;
}
@media (max-width: 540px) {
  .fc-rank-row { grid-template-columns: 3em 72px minmax(0, 1fr); gap: .5em; padding: .5em; }
}
.fc-rank-row .fc-rank-row-pos {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: bold; color: var(--fc-text);
  min-width: 0;
}
.fc-rank-pos-num { font-size: 1.6em; }
.fc-rank-pos-num::after { content: '位'; font-size: .55em; margin-left: .1em; vertical-align: super; }
.fc-rank-row-thumb {
  display: block; width: 96px; height: 72px;
  background: var(--fc-bg-soft); border-radius: var(--fc-radius); overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .fc-rank-row-thumb { width: 72px; height: 54px; }
}
.fc-rank-row-thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.fc-rank-row .fc-rank-row-info { min-width: 0; word-break: break-word; }
.fc-rank-row .fc-rank-row-info b { font-size: 1em; }
.fc-rank-row .fc-rank-row-info small { color: var(--fc-text-muted); }
.fc-rank-row .fc-rank-row-link { margin: .2em 0; font-size: .85em; }
.fc-rank-row .fc-rank-row-note {
  margin-top: .3em; padding: .4em .6em;
  background: var(--fc-bg-soft); border-left: 3px solid var(--fc-burgundy); font-size: .92em;
  border-radius: 0 var(--fc-radius) var(--fc-radius) 0;
}

/* 1 位のみ burgundy 左 stripe で強調 (グラデや色付き border はすべて廃止) */
.fc-rank-row[data-position="1"] {
  border-left: 4px solid var(--fc-burgundy);
}
.fc-rank-row[data-position="1"] .fc-rank-pos-num {
  font-size: 1.8em; color: var(--fc-burgundy);
}

/* =============================================================================
   いいね + シェアボタン (ranking.php)
   ============================================================================= */
.fc-rank-social {
  margin: 1.5em 0; padding: 1em;
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
  display: flex; align-items: center; flex-wrap: wrap; gap: .8em;
}
.fc-rank-like-btn,
.fc-rank-share-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  padding: 0 1.1em;
  min-height: 44px;
  font-size: 1em; line-height: 1.2;
  font-weight: 600;
  border: 1px solid transparent; border-radius: var(--fc-radius);
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .15s, color .15s, border-color .15s;
}
/* like = ghost burgundy。is-liked で塗り反転 */
.fc-rank-like-btn  { background: #fff; color: var(--fc-burgundy); border-color: var(--fc-burgundy); }
.fc-rank-like-btn:hover     { background: var(--fc-burgundy-soft); color: #fff; border-color: var(--fc-burgundy-soft); }
.fc-rank-like-btn:disabled  { opacity: .55; cursor: wait; }
.fc-rank-like-btn.is-liked  { background: var(--fc-burgundy); color: #fff; border-color: var(--fc-burgundy); }
.fc-rank-like-icon          { font-size: 1.3em; line-height: 1; }

.fc-rank-share { display: flex; gap: .4em; flex-wrap: wrap; align-items: center; }
/* X / LINE はブランド色を保持。filter brightness hover は廃止 */
.fc-rank-share-x            { background: #000; color: #fff !important; border-color: #000; }
.fc-rank-share-x:hover      { background: #222; border-color: #222; }
.fc-rank-share-line         { background: #06c755; color: #fff !important; border-color: #06c755; }
.fc-rank-share-line:hover   { background: #05ad48; border-color: #05ad48; }
/* copy = ghost burgundy */
.fc-rank-share-copy         { background: #fff; color: var(--fc-burgundy); border-color: var(--fc-burgundy); }
.fc-rank-share-copy:hover   { background: var(--fc-burgundy); color: #fff !important; border-color: var(--fc-burgundy); }

/* =============================================================================
   ヘッダーのログイン状態表示
   ============================================================================= */
.fc-rank-nav-user {
  color: rgba(255,255,255,.7);
  font-size: .85em;
  padding-left: .6em;
  border-left: 1px solid rgba(255,255,255,.3);
}
.fc-rank-nav-logout { color: rgba(255,255,255,.85) !important; }
.fc-rank-nav-admin {
  color: #fff !important; font-weight: 600;
  background: rgba(255,255,255,.18);
  padding: 2px 8px;
  border-radius: var(--fc-radius);
}
.fc-rank-nav-username {
  color: rgba(255,255,255,.7); font-size: .85em;
  padding-left: .6em;
  border-left: 1px solid rgba(255,255,255,.3);
}

/* WP-compatible HTML 構造での user-nav (赤バー右、.alignright 内) */
#h-top .fc-rank-user-nav {
  margin: 0 !important;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  align-items: center;
}
#h-top .fc-rank-user-nav a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .9em;
}
#h-top .fc-rank-user-nav a:hover {
  color: #fff;
  text-decoration: underline;
}
#h-top .fc-rank-user-nav .fc-rank-nav-admin {
  color: #fff !important;
  font-weight: 600;
  background: rgba(255,255,255,.18);
  padding: 2px 8px;
  border-radius: var(--fc-radius);
}
#h-top .fc-rank-user-nav .fc-rank-nav-username {
  color: rgba(255,255,255,.7);
  font-size: .85em;
  padding-left: .6em;
  border-left: 1px solid rgba(255,255,255,.3);
}

/* =============================================================================
   サブナビ (WP top の #navi-in と視覚的に揃えたサイトワイドリンク)
   ============================================================================= */
.fc-rank-subnav {
  background: #fff;
  padding: 0;
}
/* WP top の #navi-in と同じ width 戦略 (固定 1070px、ビューポート狭時は 100%) */
.fc-rank-subnav-in {
  width: 1070px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.fc-rank-subnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0;
}
.fc-rank-subnav li {
  margin: 0; padding: 0;
}
.fc-rank-subnav li a {
  display: block;
  padding: 12px 16px;
  color: var(--fc-text);
  text-decoration: none;
  font-size: .92em;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.fc-rank-subnav li a:hover {
  color: var(--fc-burgundy);
  border-bottom-color: var(--fc-burgundy);
}

/* =============================================================================
   ログイン / リセットページ (login.php, reset.php)
   ============================================================================= */
.fc-rank-auth-form {
  max-width: 480px; margin: 1em auto; padding: 1.5em;
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
}
.fc-rank-auth-form h2 { margin-top: 0; }
.fc-rank-auth-form .fc-rank-form input[type="email"],
.fc-rank-auth-form .fc-rank-form input[type="password"] {
  padding: .6em; font-size: 1em;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
}
.fc-rank-auth-form .fc-rank-form button {
  align-self: flex-start;
  padding: .55em 1.1em; min-height: 44px;
  background: var(--fc-burgundy); color: #fff;
  border: 1px solid var(--fc-burgundy); border-radius: var(--fc-radius);
  cursor: pointer; font-weight: 600;
  transition: background-color .15s;
}
.fc-rank-auth-form .fc-rank-form button:hover { background: var(--fc-burgundy-soft); border-color: var(--fc-burgundy-soft); }
.fc-rank-auth-form .fc-rank-form button:disabled { opacity: .55; cursor: wait; }

/* =============================================================================
   プロフィール編集セクション (stock.php)
   ============================================================================= */
.fc-rank-profile-section {
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius); padding: 1em;
  margin-bottom: 1em;
}
.fc-rank-profile-section h3 { margin-top: 0; }
.fc-rank-profile-section .fc-rank-form { max-width: 480px; }
.fc-rank-profile-section input[type="text"],
.fc-rank-profile-section input[type="url"] {
  padding: .5em; font-size: 1em;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
}
.fc-rank-profile-section button {
  align-self: flex-start;
  padding: .55em 1.1em; min-height: 40px;
  background: var(--fc-burgundy); color: #fff;
  border: 1px solid var(--fc-burgundy); border-radius: var(--fc-radius);
  cursor: pointer; font-weight: 600;
  transition: background-color .15s;
}
.fc-rank-profile-section button:hover  { background: var(--fc-burgundy-soft); border-color: var(--fc-burgundy-soft); }
.fc-rank-profile-section button:disabled { opacity: .55; cursor: wait; }

/* =============================================================================
   管理画面
   ============================================================================= */
.fc-rank-admin { background: var(--fc-bg-soft); }
.fc-rank-admin-header {
  background: #fff;
  color: var(--fc-text);
  padding: .7em 1em;
  border-bottom: 3px solid var(--fc-burgundy);
  display: flex; align-items: center; justify-content: space-between;
}
.fc-rank-admin-header h1 { margin: 0; font-size: 1.1em; color: var(--fc-burgundy); }
.fc-rank-admin-header nav a { color: var(--fc-link); margin-left: 1em; }
.fc-rank-admin-header nav a:hover { color: var(--fc-link-hover); }
.fc-rank-admin-login {
  max-width: 400px; margin: 4em auto; padding: 2em;
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
}
.fc-rank-admin section {
  max-width: 1000px; margin: 1em auto; padding: 1em;
  background: #fff; border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
}
.fc-rank-form {
  display: flex; flex-direction: column; gap: .5em;
}
.fc-rank-form label { display: flex; flex-direction: column; gap: .2em; font-size: .9em; }
.fc-rank-form input, .fc-rank-form textarea, .fc-rank-form select {
  padding: .4em; border: 1px solid var(--fc-border); border-radius: var(--fc-radius); font-family: inherit;
}
.fc-rank-form button {
  padding: .55em 1.1em; cursor: pointer; align-self: flex-start;
  background: var(--fc-burgundy); color: #fff; border: 1px solid var(--fc-burgundy); border-radius: var(--fc-radius);
  font-weight: 600;
  transition: background-color .15s;
}
.fc-rank-form button:hover { background: var(--fc-burgundy-soft); border-color: var(--fc-burgundy-soft); }
.fc-rank-theme-row { padding: .4em; border-bottom: 1px solid var(--fc-border-soft); }
.fc-rank-theme-row summary { cursor: pointer; }
.fc-rank-theme-row code { background: var(--fc-bg-soft); padding: .1em .3em; font-size: .85em; }

.fc-rank-admin-filter-form {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: .8em !important;
  align-items: flex-end;
}
.fc-rank-admin-filter-form label { min-width: 120px; }

.fc-rank-admin-table {
  width: 100%; border-collapse: collapse; font-size: .9em;
  background: #fff; margin-top: .8em;
}
.fc-rank-admin-table th, .fc-rank-admin-table td {
  border: 1px solid var(--fc-border); padding: .4em .6em; vertical-align: top;
  text-align: left;
}
.fc-rank-admin-table th { background: var(--fc-bg-soft); font-size: .85em; }
.fc-rank-admin-table tr.is-deleted { background: var(--fc-bg-soft); color: var(--fc-text-muted); }
.fc-rank-admin-table tr.is-deleted a { color: var(--fc-text-muted); }
.fc-rank-admin-actions { white-space: nowrap; }
.fc-rank-admin-actions form { display: inline-block; margin: 0 .2em 0 0; }
.fc-rank-admin-actions button {
  font-size: .82em; padding: .25em .55em; cursor: pointer;
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius); background: #fff;
  transition: background-color .15s;
}
.fc-rank-admin-actions button:hover { background: var(--fc-bg-soft); }
.fc-rank-admin-actions button.is-danger {
  border-color: var(--fc-danger); color: var(--fc-danger);
}
.fc-rank-admin-actions button.is-danger:hover { background: #ffebee; }

.fc-rank-filter-fieldset {
  border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
  padding: .8em 1em; margin: .4em 0;
  background: var(--fc-bg-soft);
}
.fc-rank-filter-fieldset legend { padding: 0 .4em; font-weight: 600; font-size: .9em; }
.fc-rank-filter-row { margin: .4em 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.fc-rank-filter-row > label { display: inline-flex; align-items: center; gap: .3em; }
.fc-rank-filter-row > small { color: var(--fc-text-muted); font-size: .8em; }

/* =============================================================================
   shortcode [stFcPopularGames] : よくアクセスされているソフト TOP N
   ============================================================================= */
.fc-rank-popular-list,
.article ol.fc-rank-popular-list,
.article ul.fc-rank-popular-list {
  /* 親テーマ simplicity2 narrow.css の `.article ol { padding-left: 1.7em ≒ 27px }` を
     10px に縮める (完全に詰めると密集しすぎなので、適度な左余白として 10px に) */
  list-style: none; margin: .6em 0;
  padding: 0 0 0 10px !important;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  overflow: hidden;
  background: #fff;
}
.fc-rank-popular-item {
  display: grid;
  /* rank 列を圧縮 (2.4em → 1.6em)、左 padding も縮めてデッドスペースを削減 */
  grid-template-columns: 1.6em 160px 1fr;
  align-items: center; gap: .8em;
  padding: .5em .8em .5em .4em;   /* 左 padding を最小限に (右はそのまま) */
  border-bottom: 1px solid var(--fc-border-soft);
  background: #fff;
  transition: background-color .15s;
}
.fc-rank-popular-item:last-child { border-bottom: 0; }
.fc-rank-popular-item:nth-child(even) { background: var(--fc-bg-row-alt); }
.fc-rank-popular-item:hover { background: var(--fc-bg-soft); }
.fc-rank-popular-rank {
  font-weight: 700; font-size: 1.4em; color: var(--fc-burgundy);
  text-align: center; line-height: 1;
}
.fc-rank-popular-thumb {
  display: block; width: 160px; aspect-ratio: 4 / 3;
  background: var(--fc-bg-soft); border: 1px solid var(--fc-border); border-radius: var(--fc-radius);
  overflow: hidden;
}
.fc-rank-popular-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.fc-rank-popular-body { min-width: 0; }
.fc-rank-popular-title {
  margin: 0 0 .2em; font-size: 1.1em; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-rank-popular-title a { color: var(--fc-text); text-decoration: none; }
.fc-rank-popular-title a:hover { color: var(--fc-burgundy); text-decoration: underline; }
.fc-rank-popular-meta { color: var(--fc-text-muted); font-size: .85em; line-height: 1.5; }
@media (max-width: 540px) {
  /* スマホ: 140px (元 52px の 2.7倍。バランス重視)、左 padding 詰め */
  .fc-rank-popular-item { grid-template-columns: 1.4em 140px 1fr; gap: .6em; padding: .4em .5em .4em .3em; }
  .fc-rank-popular-thumb { width: 140px; }
  .fc-rank-popular-rank { font-size: 1.2em; }
  .fc-rank-popular-title { font-size: 1.02em; }
}
@media (max-width: 380px) {
  /* 極小画面 (iPhone SE 等): 110px */
  .fc-rank-popular-item { grid-template-columns: 1.3em 110px 1fr; gap: .5em; padding: .35em .4em .35em .2em; }
  .fc-rank-popular-thumb { width: 110px; }
}

/* ============================================================
 * お題フィルタ chip (Issue #6)
 *   create.php / ranking.php のお題名直下に表示するチップ。
 *   fcrank_format_filter_label_html() の出力スタイル。
 * ============================================================ */
.fc-rank-filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: .4em 0 .8em;
}
.fc-rank-filter-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: .82em;
  line-height: 1.5;
  background: #ecf0f1;
  color: #34495e;
  border: 1px solid #d0d7dc;
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================
 * ランキング status バッジ (Issue #5)
 *   stock.php の自分のランキング一覧で [draft]/[published] 生表示の代替。
 * ============================================================ */
.fc-rank-status-badge {
  display: inline-block;
  padding: 2px 9px;
  font-size: .78em;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 12px;
  vertical-align: middle;
  margin-left: .4em;
}
.fc-rank-status-badge--draft {
  background: #fff3cd; color: #856404; border: 1px solid #ffeaa7;
}
.fc-rank-status-badge--published {
  background: #d4edda; color: #155724; border: 1px solid #b8dcc1;
}
.fc-rank-status-badge--withdrawn {
  background: #e9ecef; color: #495057; border: 1px solid #ced4da;
}

/* ============================================================
 * 検索 datalist 入力欄の clear ボタン (Issue #1)
 *   <input list> + clear ボタンの組合せで、再選択時も候補表示できるように。
 * ============================================================ */
.fc-rank-input-with-clear {
  position: relative;
  /* .fc-rank-filter-row 内では flex item として最低 10em〜伸縮、 */
  /* 直接の grid/flex 親で並ぶときも block-like に振る舞う */
  display: flex;                  /* 内部 input を 100% に */
  flex: 1 1 10em;                 /* .fc-rank-search-genre/maker 単体と同じ伸縮性 */
  min-width: 0;
  box-sizing: border-box;
}
.fc-rank-input-with-clear input {
  flex: 1 1 auto;                 /* wrapper 幅をすべて使う */
  min-width: 0;                   /* flex で text-overflow を有効化 */
  width: 100%;
  padding-right: 32px;            /* clear ボタン分の余白 (touch 確保のため少し広め) */
  /* .fc-rank-filter-row > input 直接子セレクタが届かないので、ここで同等の見た目を再現 */
  padding-left: .6em;
  padding-top: .55em;
  padding-bottom: .55em;
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  font-size: 16px;
  line-height: 1.25;
  min-height: 44px;
  box-sizing: border-box;
}
.fc-rank-input-clear {
  position: absolute;
  top: 50%; right: 4px; transform: translateY(-50%);
  /* タップターゲット 44×44px に拡大 (元 22px は WCAG / Apple HIG 不適合) */
  width: 36px; height: 36px;
  display: none;             /* JS で値があるとき表示 */
  align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #7f8c8d;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.fc-rank-input-with-clear.has-value .fc-rank-input-clear {
  display: inline-flex;
}
.fc-rank-input-clear:hover { color: #34495e; background: #ecf0f1; }
.fc-rank-input-clear:focus { outline: 2px solid #3498db; outline-offset: 1px; }

/* ============================================================
 * 検索 UI: テーマで固定された軸の "lock" 表示 (Issue #2)
 *   create.php で theme.filter_json により固定されている軸の input を
 *   disabled + "(お題で固定: ◯◯)" のヒント表示に切替。
 * ============================================================ */
.fc-rank-search-locked {
  display: block;
  padding: 6px 10px;
  background: #f4f6f7;
  border: 1px dashed #bdc3c7;
  border-radius: 4px;
  color: #5d6d7e;
  font-size: .85em;
  line-height: 1.4;
}
.fc-rank-search-locked .fc-rank-locked-label {
  font-weight: 600;
  color: #2c3e50;
  margin-right: .3em;
}
.fc-rank-search-locked .fc-rank-locked-hint {
  display: block;
  font-size: .85em;
  color: #7f8c8d;
  margin-top: 2px;
}

/* ============================================================
 * fc-rank-collapsible (<details>/<summary> ベースのアコーディオン)
 *   stock.php の「メール+パスワード登録」セクションで使用。
 *   通常利用には不要な機能を畳み込んで邪魔にならないようにする。
 * ============================================================ */
.fc-rank-collapsible {
  margin: 1em 0;
  background: #fafbfc;
  border: 1px solid #d0d7dc;
  border-radius: 6px;
  padding: 0;
}
.fc-rank-collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: .8em 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  font-size: .92em;
  color: #2c3e50;
  user-select: none;
  /* デフォルトの ▶ マーカーは消し、自前 ▶/▼ で表現 */
}
.fc-rank-collapsible > summary::-webkit-details-marker { display: none; }
.fc-rank-collapsible > summary::before {
  content: '▶';
  color: #7f8c8d;
  font-size: .8em;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.fc-rank-collapsible[open] > summary::before {
  transform: rotate(90deg);
}
.fc-rank-collapsible > summary:hover {
  background: #f0f3f5;
}
.fc-rank-collapsible-title {
  flex: 1 1 auto;
  font-weight: 600;
  min-width: 0;
}
.fc-rank-collapsible-hint {
  flex: 0 0 auto;
  font-size: .76em;
  color: #95a5a6;
  font-weight: normal;
}
.fc-rank-collapsible[open] > summary .fc-rank-collapsible-hint::before {
  content: '閉じる ';
}
.fc-rank-collapsible[open] > summary .fc-rank-collapsible-hint {
  /* open のときは「タップで開く」→「閉じる」に置換するため、原文を hide */
  font-size: 0;
}
.fc-rank-collapsible[open] > summary .fc-rank-collapsible-hint::before {
  font-size: .76em;
}
.fc-rank-collapsible > summary + * {
  /* summary 直後の要素 (= section content の最初) に padding を空ける */
  margin-top: 0;
}
.fc-rank-collapsible > *:not(summary) {
  padding-left: 1em;
  padding-right: 1em;
}
.fc-rank-collapsible > *:last-child {
  padding-bottom: 1em;
}
/* スマホでは余白を控えめに (お気に入り 2 列表示のための実効幅確保) */
@media (max-width: 540px) {
  .fc-rank-collapsible > *:not(summary) {
    padding-left: .5em;
    padding-right: .5em;
  }
}

/* ============================================================
 * .fc-rank-theme-btn: <a> 化したお題カードボタンの link 装飾を抑制
 *   (元 <span> のときは link 色等が無関係だったが、<a> にしたので
 *    親の color/text-decoration を継承するためのリセットを明示)
 * ============================================================ */
a.fc-rank-theme-btn {
  text-decoration: none;
  color: var(--fc-burgundy);
}
a.fc-rank-theme-btn:hover,
a.fc-rank-theme-btn:focus {
  text-decoration: none;
  color: #fff;
  background: var(--fc-burgundy);
}

/* ============================================================
 * stock.php お気に入りソフト 検索フォーム + ページネーション
 *   お気に入りが増えたときの閲覧性向上 (件数 >= 5 で出る)
 * ============================================================ */
.fc-rank-stock-search {
  margin: 1em 0 .8em;
  padding: .8em 1em;
  background: #fafbfc;
  border: 1px solid #d0d7dc;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.fc-rank-stock-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  align-items: center;
}
.fc-rank-stock-search input[type="text"],
.fc-rank-stock-search select {
  padding: .4em .6em;
  border: 1px solid #bdc3c7;
  border-radius: 4px;
  font-size: .92em;
  min-height: 36px;
  background: #fff;
  box-sizing: border-box;
}
.fc-rank-stock-search-q {
  flex: 1 1 200px;
  min-width: 160px;
}
.fc-rank-stock-search-sort {
  flex: 0 1 200px;
}
.fc-rank-stock-search-genre,
.fc-rank-stock-search-maker {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 200px;
}
.fc-rank-stock-search-yfrom,
.fc-rank-stock-search-yto {
  flex: 0 1 90px;
  min-width: 80px;
}
.fc-rank-stock-search-actions {
  justify-content: flex-end;
}
.fc-rank-stock-search-submit {
  padding: .5em 1.4em;
  background: var(--fc-burgundy);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: .92em;
  cursor: pointer;
  min-height: 38px;
}
.fc-rank-stock-search-submit:hover {
  background: #8b1014;
}
.fc-rank-stock-search-clear {
  padding: .5em 1em;
  font-size: .85em;
  color: #555;
  text-decoration: underline;
}
.fc-rank-stock-count-line {
  margin: .3em 0 .8em;
}

/* ページネーション */
.fc-rank-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  margin: 1.5em 0 0;
  padding: .8em 0;
  border-top: 1px solid #ecf0f1;
}
.fc-rank-pagination > a,
.fc-rank-pagination > span {
  flex: 0 0 auto;
  font-size: .92em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: .4em .9em;
  text-decoration: none;
  border-radius: 4px;
}
.fc-rank-pagination > a {
  color: var(--fc-burgundy);
  border: 1px solid var(--fc-burgundy);
}
.fc-rank-pagination > a:hover {
  background: var(--fc-burgundy);
  color: #fff;
}
.fc-rank-pagination > .is-disabled {
  color: #bdc3c7;
  border: 1px solid #ecf0f1;
  background: #fafbfc;
}
.fc-rank-pagination-current {
  color: #555;
  font-weight: 600;
  min-height: auto;
  padding: 0;
}

/* スマホ: 検索フォームを縦並びに */
@media (max-width: 540px) {
  .fc-rank-stock-search-q { flex: 1 1 100%; }
  .fc-rank-stock-search-sort { flex: 1 1 100%; }
  .fc-rank-stock-search-genre,
  .fc-rank-stock-search-maker { flex: 1 1 calc(50% - .25em); max-width: none; }
  .fc-rank-stock-search-yfrom,
  .fc-rank-stock-search-yto { flex: 0 1 calc(50% - 1em); }
  .fc-rank-pagination > a,
  .fc-rank-pagination > span {
    font-size: .85em;
    padding: .35em .6em;
  }
}

/* ============================================================
 * .fc-rank-collapsible--main : メインコンテンツ用の太字 H2 風アコーディオン
 *   stock.php の「★ お気に入りソフト」セクションで使用。
 *   通常の collapsible より見出しを目立たせる。
 *   閉じても件数が summary に常時表示される。
 * ============================================================ */
.fc-rank-collapsible--main {
  margin: 1.2em 0;
  background: #fff;
  border: 1px solid #d0d7dc;
  border-radius: 6px;
}
.fc-rank-collapsible--main > summary {
  padding: .9em 1em;
  font-size: 1.1em;
  background: #fafbfc;
  border-bottom: 1px solid #ecf0f1;
  border-radius: 6px 6px 0 0;
}
.fc-rank-collapsible--main:not([open]) > summary {
  border-bottom: none;
  border-radius: 6px;
}
.fc-rank-collapsible--main > summary:hover {
  background: #f0f3f5;
}
.fc-rank-collapsible--main .fc-rank-collapsible-title {
  font-weight: 700;
  font-size: 1.05em;
  color: #2c3e50;
}
.fc-rank-collapsible--main .fc-rank-collapsible-count {
  margin-left: .3em;
  color: var(--fc-burgundy);
  font-weight: 600;
  font-size: .95em;
}