/* =========================================================
   cards_shelf.css  ── カード造形の正本

   【このファイルの責務】
   ★ このファイルがカード全種の「箱の基本造形」の正本です。
      border / border-radius / background / box-shadow / hover は
      すべてここで一元管理します。

   - .cards（カードグリッドラッパー）
   - .card（汎用カード：著者カード・特集カードなど）
   - .series-card（シリーズ紹介カード）
   - .archive .inside-article / .archive .page-header（箱の基本造形）
   - .card--shimama / --stork / --fabee / --deeple（キャラクター別テーマ）
   - .shelves-2x2（書架・特設コーナー 2×2 グリッド）
   - .sc__picks（書架カードのオススメ記事エリア）

   【触るべきとき】
   ・カード全体のボーダー・背景・影を変えたい  → 共通ベース（14 Cards 共通ベース セクション）
   ・カードのホバー演出を変えたい              → 共通ベースの :hover 定義
   ・書架カードのデザインを変えたい            → .card, .shelves-2x2 > .card
   ・著者アイコンサイズを変えたい              → .card__icon
   ・キャラクター別ホバー色を変えたい          → .card--shimama:hover など
   ・オススメ記事の見た目を変えたい            → .sc__picks, .sc__picks-list

   【分担関係】
   - archive.css はアーカイブ専用の差分（padding・ラベル・縦線）のみ
   - cards_photo.css は写真枠・関連記事カード
========================================================= */

/* =========================================================
   14 Cards  ── 汎用カードグリッドとカード本体
========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────
   カード共通ベース
   ── .series-card / .archive .inside-article / .archive .page-header
      はここで箱の基本造形を受け取る。
      各ファイルは padding・ラベル・縦線などの「差分」だけを書く。
───────────────────────────────────────────────────────── */
.card,
.series-card,
.archive .inside-article,
.archive .page-header {
  position: relative;
  border: var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow:
    0 2px 0 rgba(255,255,255,.95) inset,
    var(--shadow-sm);
}

/* 共通トランジション（hover アニメーション対象） */
.card,
.series-card,
.archive .inside-article {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

/* 共通 hover 演出（浮き上がり＋ゴールドボーダー） */
.card:hover,
.series-card:hover,
.archive .inside-article:hover {
  transform: translateY(-2px);
  border-color: rgba(200,175,80,.55);
  box-shadow: var(--shadow), 0 0 0 4px rgba(200,175,80,.10);
}

/* .card 固有の padding */
.card { padding: 24px; }

/* カード全体をリンクにする場合の a タグ */
.card__tap {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* カード上部：アイコン＋テキスト */
.card__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.card__icon {
  width: 114px;
  height: 114px;
  padding: 6px;
  border-radius: 18px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #fff 0%, #f6f0e7 100%);
  box-shadow: var(--shadow-xs);
}

.card__meta {
  flex: 1;
  min-width: 0;
}

.card__name {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.card__role {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: .02em;
}

.card__copy {
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: .01em;
  margin-bottom: 16px;
}

.card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .06em;
}

/* カード本文エリア */
.card__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card__inner > p,
.card__inner > ul,
.card__inner > ol {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 2.0;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

.card__inner > ul,
.card__inner > ol {
  padding-left: 1.45em;
}

.card__inner li + li { margin-top: .35em; }

.card--wide { width: 100%; }

/* =========================================================
   キャラクター別カード背景・ホバー
========================================================= */
.card--shimama {
  background:
    radial-gradient(ellipse 140% 110% at 8% -8%, var(--shimama-light) 0%, rgba(255,255,255,.96) 56%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,251,247,.98) 100%);
}
.card--shimama:hover { box-shadow: var(--shadow), 0 0 0 5px var(--shimama-glow); }

.card--stork {
  background:
    radial-gradient(ellipse 140% 110% at 8% -8%, var(--stork-light) 0%, rgba(255,255,255,.96) 56%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,251,247,.98) 100%);
}
.card--stork:hover { box-shadow: var(--shadow), 0 0 0 5px var(--stork-glow); }

.card--fabee {
  background:
    radial-gradient(ellipse 140% 110% at 8% -8%, var(--fabee-light) 0%, rgba(255,255,255,.96) 56%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,251,247,.98) 100%);
}
.card--fabee:hover { box-shadow: var(--shadow), 0 0 0 5px var(--fabee-glow); }

.card--deeple {
  background:
    radial-gradient(ellipse 140% 110% at 8% -8%, var(--deeple-light) 0%, rgba(255,255,255,.96) 58%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,251,247,.98) 100%);
}
.card--deeple:hover { box-shadow: var(--shadow), 0 0 0 5px var(--deeple-glow); }

/* =========================================================
   15 Shelves (Top)  ── トップページの 2×2 書架グリッド
========================================================= */
.shelves-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* 書架カードは縦 flex：上部リンク + 下部 picks を積む */
.shelves-2x2 > .card {
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

/* 書架・特設コーナー共通：上部リンクブロック */
.shelves-2x2 .card__tap {
  flex: 0 0 auto;
  height: auto;
  padding: 20px 22px 8px;
  color: inherit;
  text-decoration: none;
  transition: background .18s ease;
}

.shelves-2x2 .card__tap:hover { background: rgba(255,255,255,.45); }

.shelves-2x2 .card__top  { gap: 14px; margin-bottom: 0; }
.shelves-2x2 .card__icon { width: 114px; height: 114px; border-radius: 18px; padding: 5px; }
.shelves-2x2 .card__name { font-size: 18px; line-height: 1.45; margin-bottom: 4px; }
.shelves-2x2 .card__role { font-size: 15px; line-height: 1.75; color: var(--muted); }

/* =========================================================
   書架カード オススメ記事エリア（.sc__picks）
========================================================= */
.sc__picks {
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(210,185,100,.20);
}

.sc__picks-label {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--muted-faint);
}

.sc__picks-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc__picks-list li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(210,185,100,.15);
}

.sc__picks-list li:last-child { border-bottom: none; }

.sc__picks-list a {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .16s ease, padding-left .16s ease;
}

.sc__picks-list a:hover { padding-left: 4px; }

/* キャラクター別ホバー色 */
.card--shimama .sc__picks-list a:hover { color: var(--shimama-main); }
.card--stork   .sc__picks-list a:hover { color: var(--stork-main);   }
.card--fabee   .sc__picks-list a:hover { color: var(--fabee-main);   }
.card--deeple  .sc__picks-list a:hover { color: var(--deeple-main);  }

/* =========================================================
   SP
========================================================= */
@media (max-width: 980px) {
  .shelves-2x2 .card__icon { width: 72px; height: 72px; }
  .shelves-2x2 .card__name { font-size: 24px; }
  .shelves-2x2 .card__role { font-size: 15px; }
}

@media (max-width: 820px) {
  .shelves-2x2 .card__tap  { padding: 18px; }
  .shelves-2x2 .card__icon { width: 72px; height: 72px; border-radius: 20px; }
  .shelves-2x2 .card__name { font-size: 22px; }
  .shelves-2x2 .card__role { font-size: 15px; }
}

@media (max-width: 680px) {
  .sc__picks       { padding: 10px 14px 14px; }
  .sc__picks-list a { font-size: 12px; }
}