/* ============================================================
 * story_grid_card.css
 * 「今すぐ読める作品」の作品カード（.story-grid / .story-card-* / .sc-btn-*）の共通スタイル。
 * components/story_grid_card.html と同じ構造のカードで使う。
 *
 * 読み込むページ：index.html / library.html / columns/columns_index.html
 * 2026-09-28: index.html と library.html に同じものが直書きされていたのを、このファイルに集約した。
 *
 * 注意：
 * - static/css/story_card.css（別部品の .story-card）とは別物。両方を同じページで読み込まないこと。
 * - 色・フォントは各ページの CSS 変数（--ink など）を使い、未定義のページ（/columns など）では
 *   index.html と同じ値にフォールバックする。
 * - ページ固有の上書き（トップの #schedule など）は各テンプレート側に置く。
 * ============================================================ */

/* ─── Story Grid ─── */
/* 数字だけ別書体（2026-09-28）
 * Georgia の数字はオールドスタイル数字（「5」「9」が下に沈む）で、font-variant-numeric: lining-nums も効かない。
 * そこで数字（U+0030-0039）だけを、Mac / Windows / iOS に標準で入っていて数字が並みの高さの
 * Times New Roman で表示する（書体の雰囲気が Georgia と近いセリフ体）。無い環境では日本語明朝
 * （Mac: ヒラギノ明朝 / Windows: 游明朝）の数字、それも無ければ次の書体（Georgia 以降）に落ちる。
 * 太字は疑似ボールドにならないよう、太字用の書体を別に指定する。 */
@font-face{
  font-family:"LitimDigits";
  src:local("Times New Roman"), local("TimesNewRomanPSMT"),
      local("Hiragino Mincho ProN W3"), local("HiraMinProN-W3"), local("Yu Mincho Regular"), local("YuMincho-Regular");
  font-weight:400;
  unicode-range:U+0030-0039;
}
@font-face{
  font-family:"LitimDigits";
  src:local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"),
      local("Hiragino Mincho ProN W6"), local("HiraMinProN-W6"), local("Yu Mincho Demibold"), local("YuMincho-Demibold");
  font-weight:700;
  unicode-range:U+0030-0039;
}

.story-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  border:1px solid var(--rule, #e8e0d4);
  border-radius:6px;
  overflow:hidden;
}
.story-card{
  padding:36px; border-right:1px solid var(--rule, #e8e0d4);
  border-bottom:1px solid var(--rule, #e8e0d4);
  display:flex; flex-direction:column; gap:16px;
  text-decoration:none; color:inherit;
  transition:background .15s;
}
.story-card:hover{ background:var(--cream-dark, #f0ebe2); }
.story-card.muted{ opacity:.45; pointer-events:none; }
.story-card-thumb{
  aspect-ratio:16/9; border-radius:4px; overflow:hidden;
  background:var(--cream-dark, #f0ebe2);
}
.story-card-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.story-card-meta{
  display:flex; gap:8px; align-items:center;
  font-family:var(--sans, -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}
.story-card-badge{
  font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 8px;
  background:var(--gold, #c8862a); color:#fff; border-radius:2px;
}
.story-card-badge.soon{
  background:transparent; color:var(--ink-muted, #8b7355);
  border:1px solid var(--rule, #e8e0d4);
}
.story-card-level{
  font-size:11px; color:var(--ink-muted, #8b7355);
}
.story-card-title{
  font-family:"LitimDigits", Georgia, "Times New Roman", serif; /* 数字だけ LitimDigits（上の @font-face） */
  font-size:22px; font-weight:700; letter-spacing:-.025em;
  color:var(--ink, #1a1108); line-height:1.15;
}
.story-card-author{
  font-size:12px; color:var(--ink-muted, #8b7355); font-family:var(--sans, -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}
.story-card-desc{
  font-size:13px; line-height:1.75; color:var(--ink-light, #5c4a30);
  font-family:var(--sans, -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif); flex:1;
}
.story-card-actions{
  display:flex; gap:10px; margin-top:auto;
  font-family:var(--sans, -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
}
.sc-btn-p{
  height:40px; padding:0 20px;
  background:var(--ink, #1a1108); color:var(--cream, #faf7f2);
  font-size:13px; font-weight:500; text-decoration:none;
  display:inline-flex; align-items:center;
  border-radius:3px; transition:background .15s;
}
.sc-btn-p:hover{ background:#2d1e0e; }
.sc-btn-s{
  height:40px; padding:0 18px;
  border:1px solid #c8c0b0; color:var(--ink-light, #5c4a30);
  font-size:13px; text-decoration:none;
  display:inline-flex; align-items:center;
  border-radius:3px; transition:all .15s;
}
.sc-btn-s:hover{ border-color:var(--ink, #1a1108); color:var(--ink, #1a1108); }

/* 作品カードの本文フォントは index / library の地の書体（Georgia）に合わせる。
   index / library では body から継承される値と同じなので、表示は変わらない。 */
.story-grid{ font-family:Georgia,"Times New Roman",serif; }