/* cards.css ── カード全般（書架カード・著者カード・sc系・写真リンク枠・関連記事カード） */

/* =========================================================
   14 Cards
========================================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.card,
.series-card,
.archive .inside-article,
.archive .page-header {
  position: relative;
  border: 1.5px solid rgba(210,185,100,.40);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(255,255,248,.98) 0%, rgba(255,252,228,.97) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.95) inset,
    var(--shadow-sm);
}

.card {
  padding: 24px;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.card: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__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)
========================================================= */
.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;
}

/* ── 上部：カテゴリーへのリンクブロック（<a class="sc__cat-link">） ── */
.sc__cat-link {
  display: block;
  padding: 20px 22px 14px;
  color: inherit;
  text-decoration: none;
  transition: background .18s ease;
  border-bottom: 1px solid rgba(210,185,100,.20);
}

.sc__cat-link:hover {
  background: rgba(255,255,255,.45);
}

#shelves .card__top {
  gap: 14px;
  margin-bottom: 0;
}

#shelves .card__icon {
  width: 114px;
  height: 114px;
  border-radius: 18px;
  padding: 5px;
}

#shelves .card__name {
  font-size: 18px;
  line-height: 1.45;
  margin-bottom: 4px;
}

#shelves .card__role {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

/* → 矢印 */
.sc__arrow-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.sc__arrow-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  opacity: 0;
  letter-spacing: .06em;
  transition: opacity .18s ease;
}

.sc__cat-link:hover .sc__arrow-hint {
  opacity: 1;
}

.sc__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  color: var(--muted);
  background: rgba(255,255,255,.68);
  font-size: 13px;
  transition: transform .18s ease, color .18s ease, border-color .18s ease;
}

.sc__cat-link:hover .sc__arrow {
  transform: translateX(2px);
  color: var(--ink);
  border-color: rgba(0,0,0,.18);
}

/* =========================================================
   らいぶらり Ver2 / 写真リンク枠（全文書き換え版）
   方針
   - 写真枠 / リンク枠の両対応
   - 枠は画像サイズに追従
   - 画像サイズはHTML側で指定
   - キャプションは1行で自然になじむ
   - 2枚並び / 小ぶり / 縦写真 / 画像なしリンクカードにも対応
========================================================= */

/* ---------------------------------
   基本
--------------------------------- */
.lb-photo {
  display: block;
  margin: 28px auto;
  max-width: 860px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.entry-content .lb-photo,
.lb-article .lb-photo {
  margin-top: 1.8em;
  margin-bottom: 1.8em;
}

/* 枠＋キャプションを同じ幅感で束ねる */
.lb-photo__inner {
  display: inline-block;
  max-width: 100%;
  text-align: left;
}

/* ---------------------------------
   写真枠
   枠は画像サイズに追従
--------------------------------- */
.lb-photo__frame {
  display: inline-block;
  width: auto;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  text-align: center;

  padding: 10px;
  border: 1.5px solid rgba(212, 170, 72, .26);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(250,246,232,.98) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    var(--shadow-sm);

  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease;
}

/* ---------------------------------
   画像サイズはHTML側で決める
--------------------------------- */
.lb-photo__frame img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--paper-3);
}

/* ---------------------------------
   キャプション
--------------------------------- */
.lb-photo__cap {
  display: block;
  margin-top: 10px;
  padding: 0 4px;

  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: left;
  text-decoration: none;

  transition: color .24s ease;
}

/* ---------------------------------
   画像なしリンクカード用
--------------------------------- */
.lb-photo__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 92px;
  padding: 6px 4px;
  text-align: left;
}

.lb-photo__title {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  transition: color .24s ease;
}

.lb-photo__text {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .03em;
}

/* ---------------------------------
   リンク時
--------------------------------- */
a.lb-photo.lb-photo--link {
  cursor: pointer;
}

a.lb-photo.lb-photo--link:hover .lb-photo__frame,
a.lb-photo.lb-photo--link:focus-visible .lb-photo__frame {
  transform: translateY(-2px);
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    var(--shadow);
  border-color: rgba(212, 170, 72, .38);
}

a.lb-photo.lb-photo--link:hover .lb-photo__title,
a.lb-photo.lb-photo--link:focus-visible .lb-photo__title,
a.lb-photo.lb-photo--link:hover .lb-photo__cap,
a.lb-photo.lb-photo--link:focus-visible .lb-photo__cap {
  color: var(--accent-strong, #8c7020);
}

a.lb-photo.lb-photo--link:focus-visible {
  outline: none;
}

a.lb-photo.lb-photo--link:focus-visible .lb-photo__frame {
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    0 0 0 3px rgba(212,170,72,.18),
    var(--shadow);
}

/* ---------------------------------
   ラベル
--------------------------------- */
.lb-photo[data-label] .lb-photo__frame::before {
  content: attr(data-label);
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;

  border: 1px solid rgba(195,168,70,.24);
  border-radius: 999px;
  background: rgba(255,252,235,.90);
  box-shadow: 0 2px 8px rgba(120, 90, 20, .06);

  color: #8c7020;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* ---------------------------------
   2枚並び
--------------------------------- */
.lb-photo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lb-photo__item {
  min-width: 0;
}

.lb-photo--duo .lb-photo__inner {
  display: block;
}

.lb-photo--duo .lb-photo__frame {
  display: block;
  width: 100%;
  padding: 12px;
}

.lb-photo--duo .lb-photo__cap {
  max-width: none;
}

/* ---------------------------------
   小ぶり
--------------------------------- */
.lb-photo--aside {
  max-width: 620px;
}

.lb-photo--aside .lb-photo__frame {
  padding: 9px;
}

/* ---------------------------------
   縦写真向け
--------------------------------- */
.lb-photo--portrait {
  max-width: 620px;
}

/* ---------------------------------
   余白多め
--------------------------------- */
.lb-photo--airy .lb-photo__frame {
  padding: 14px;
  border-radius: 24px;
}

/* ---------------------------------
   メタ情報
--------------------------------- */
.lb-photo__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;

  color: var(--muted-faint);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .04em;
}

.lb-photo__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;

  border: 1px solid rgba(212,170,72,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
}

/* ---------------------------------
   会話や見出し直後
--------------------------------- */
.lb-talks + .lb-photo,
.talk + .lb-photo {
  margin-top: 18px;
}

h2 + .lb-photo,
h3 + .lb-photo,
.lb-h3 + .lb-photo {
  margin-top: 1.2em;
}

/* ---------------------------------
   Hover対応環境
--------------------------------- */
@media (hover: hover) {
  .lb-photo__frame {
    transition:
      transform .24s ease,
      box-shadow .24s ease,
      border-color .24s ease;
  }
}

/* ---------------------------------
   SP
--------------------------------- */
@media (max-width: 680px) {
  .lb-photo {
    margin: 22px auto;
  }

  .lb-photo__inner {
    max-width: 100%;
  }

  .lb-photo__frame {
    max-width: 100%;
    padding: 8px;
    border-radius: 16px;
  }

  .lb-photo__frame img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  .lb-photo__cap {
    font-size: 18px;
    line-height: 1.6;
  }

  .lb-photo__text {
    font-size: 12px;
    line-height: 1.8;
  }

  .lb-photo__title {
    font-size: 16px;
  }

  .lb-photo__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lb-photo[data-label] .lb-photo__frame::before {
    top: 10px;
    left: 12px;
    padding: 4px 8px;
    font-size: 9px;
  }
}

.card--with-photo .card__tap {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card--with-photo .card__media {
  padding: 16px 16px 0;
  text-align: center;
}

.card--with-photo .card__media img {
  display: block;
  width: 100%;
  max-width: 307px;
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  background: var(--paper-3);
  border: 1.5px solid rgba(212,170,72,.22);
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    var(--shadow-sm);
}

.card--with-photo .card__inner {
  padding-top: 14px;
}
/* =========================================================
   関連記事カード 改良版
   - 余白を引き締める
   - リンクっぽさを強める
   - 小さいアイコン＋記事タイトル向け
========================================================= */

.lb-related {
  margin-top: 48px;
}

.lb-related .cards {
  align-items: stretch;
  gap: 16px;
}

.lb-related .card {
  height: 100%;
  border-radius: 24px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* カード全体 */
.lb-related .card--with-photo .card__tap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  height: 100%;
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
}

/* アイコン */
.lb-related .card--with-photo .card__media {
  padding: 0;
  margin: 0;
  text-align: left;
  line-height: 0;
}

.lb-related .card--with-photo .card__media img {
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  border-radius: 16px;
  background: var(--paper-3);
  border: 1.5px solid rgba(212,170,72,.20);
  box-shadow:
    0 2px 0 rgba(255,255,255,.92) inset,
    0 4px 14px rgba(120, 90, 20, .05);
}

/* 本文領域 */
.lb-related .card--with-photo .card__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-top: 0;
  width: 100%;
}

/* タイトル */
.lb-related .card--with-photo .card__inner p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: #3b3428;
  transition: color .22s ease;
}

/* 導線 */
.lb-related .card--with-photo .lb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--muted);
  transition: color .22s ease, transform .22s ease;
}

.lb-related .card--with-photo .lb-link::after {
  content: "→";
  font-size: 12px;
  line-height: 1;
  transition: transform .22s ease;
}

/* ホバー */
.lb-related .card--with-photo:hover,
.lb-related .card--with-photo:focus-within {
  transform: translateY(-3px);
}

.lb-related .card--with-photo:hover .card__inner p,
.lb-related .card--with-photo:focus-within .card__inner p {
  color: var(--accent-strong, #8c7020);
}

.lb-related .card--with-photo:hover .lb-link,
.lb-related .card--with-photo:focus-within .lb-link {
  color: var(--accent-strong, #8c7020);
}

.lb-related .card--with-photo:hover .lb-link::after,
.lb-related .card--with-photo:focus-within .lb-link::after {
  transform: translateX(2px);
}

/* 小さめサムネ用 */
.lb-related .card--with-photo.card--thumb-sm .card__media img {
  border-radius: 14px;
}

/* SP */
@media (max-width: 680px) {
  .lb-related {
    margin-top: 40px;
  }

  .lb-related .cards {
    gap: 12px;
  }

  .lb-related .card--with-photo .card__tap {
    gap: 10px;
    padding: 16px 16px 14px;
  }

  .lb-related .card--with-photo .card__inner {
    gap: 8px;
  }

  .lb-related .card--with-photo .card__inner p {
    font-size: 15px;
    line-height: 1.5;
  }

  .lb-related .card--with-photo .lb-link {
    font-size: 11px;
  }
}

/* =========================================================
   書架カード オススメ記事エリア
   HTMLは元の card__tap 構造を維持したまま、
   picks エリアをカードの外（article直下）に追加する構成
========================================================= */

/* カード全体を縦並びにする */
#shelves .card {
  display: flex;
  flex-direction: column;
}

/* card__tap はカテゴリーリンク（上部）として機能 */
#shelves .card__tap {
  flex: 0 0 auto;
  height: auto;
}

/* ── オススメ記事エリア ── */
.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: 680px) {
  .sc__picks {
    padding: 10px 14px 14px;
  }
  .sc__picks-list a {
    font-size: 12px;
  }
}