/* ============================================================================
   magazine-btrax.css — キャンジョマガジン（btrax freshtrax 参照デザイン）
   ----------------------------------------------------------------------------
   実測して移植した設計:
     ・紙色 #F2EFEA に方眼のグリッド線（#E5E2DB）を敷く
     ・文字は #111、副文字 #828282（ブランド色は使わない＝編集メディアの規律）
     ・カテゴリタグは #E5E2DB / border-radius 21px の温かいグレーのピル
     ・著者アバターは 36px の円
     ・カードは白面・線なし。写真とタイトルで見せる
   ========================================================================== */

:root {
  --mg-ink: #111111;
  --mg-sub: #4f4f4f;
  --mg-muted: #828282;
  --mg-paper: #f2efea;
  --mg-line: #e5e2db;
  --mg-white: #ffffff;
}

/* ── 紙面：方眼のグリッド ───────────────────────── */
body.magazine-page {
  background-color: var(--mg-paper);
  background-image:
    linear-gradient(var(--mg-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mg-line) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--mg-ink);
}
body.magazine-page .site-header { background: rgba(242,239,234,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mg-line); }

/* ── ページ見出し ────────────────────────────── */
body.magazine-page .page-header { background: transparent; padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
body.magazine-page .page-title {
  color: var(--mg-ink) !important;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem) !important;
  font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.3;
}
body.magazine-page .page-description { color: var(--mg-sub); font-size: 1rem; line-height: 1.9; }

/* ── 記事一覧グリッド ────────────────────────── */
body.magazine-page .magazine-article-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(2rem, 3.4vw, 3.2rem);
}

/* ── 記事カード：面を持たず、写真と文字で見せる ────── */
body.magazine-page .magazine-article-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--mg-ink);
  transition: opacity .25s ease;
}
body.magazine-page .magazine-article-card:hover { transform: none !important; box-shadow: none !important; opacity: 0.72; }

body.magazine-page .magazine-article-card__thumb,
body.magazine-page .magazine-article-card__image {
  border-radius: 12px; overflow: hidden; background: var(--mg-line);
  aspect-ratio: 16 / 10; margin-bottom: 18px;
}
body.magazine-page .magazine-article-card__image img,
body.magazine-page .magazine-article-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
body.magazine-page .magazine-article-card:hover img { transform: scale(1.04); }

/* カテゴリタグ（btrax実測値：#E5E2DB / radius 21px） */
body.magazine-page .magazine-article-card__cat {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mg-line); color: var(--mg-ink);
  border-radius: 21px; padding: 5px 12px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 10px; align-self: flex-start;
}

body.magazine-page .magazine-article-card__title {
  font-size: 1.12rem; font-weight: 700; line-height: 1.6;
  color: var(--mg-ink); letter-spacing: -0.005em; margin: 0 0 12px;
}

/* 著者・日付（btrax実測：アバター36px円 / 日付14px #828282） */
body.magazine-page .magazine-article-card__meta {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding-top: 4px;
}
body.magazine-page .magazine-article-card__date {
  font-size: 0.82rem; color: var(--mg-muted); letter-spacing: 0.02em; margin: 0;
}
body.magazine-page .mg-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
body.magazine-page .mg-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* NEWバッジ */
body.magazine-page .mg-new {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mg-ink); color: #fff; border-radius: 21px;
  padding: 5px 13px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  margin-right: 8px;
}

/* ── カテゴリのフィルタ列 ───────────────────────── */
body.magazine-page .mg-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(2rem, 4vw, 3rem); }
body.magazine-page .mg-cats a {
  border: 1px solid var(--mg-line); background: transparent; color: var(--mg-sub);
  border-radius: 21px; padding: 7px 16px; font-size: 0.84rem; font-weight: 600;
  text-decoration: none; transition: all .2s;
}
body.magazine-page .mg-cats a:hover,
body.magazine-page .mg-cats a[aria-current="true"] { background: var(--mg-ink); border-color: var(--mg-ink); color: #fff; }

/* ── 記事本文ページ ─────────────────────────── */
body.magazine-page .article-body { background: var(--mg-white); border-radius: 12px; padding: clamp(1.75rem, 4vw, 3.5rem); }
body.magazine-page .article-body p { color: var(--mg-sub); line-height: 2.05; }
body.magazine-page .article-body h2 {
  color: var(--mg-ink); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.5;
  margin: 2.5em 0 0.9em; padding-left: 14px; border-left: 4px solid var(--mg-ink);
}
body.magazine-page .article-body img { border-radius: 12px; }

@media (max-width: 767px) {
  body.magazine-page { background-size: 28px 28px; }
  body.magazine-page .magazine-article-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ── 既存セクションを紙面に馴染ませる ─────────────── */
body.magazine-page .content-section,
body.magazine-page .pickup-section,
body.magazine-page main > section,
body.magazine-page .magazine-hero { background: transparent !important; }

/* 英語の飾り見出しは出さない（編集メディアの規律） */
body.magazine-page .page-title-en { display: none !important; }

/* 白面が必要なブロックだけカードにする */
body.magazine-page .newsletter-bar {
  background: var(--mg-white) !important;
  border: 1px solid var(--mg-line); border-radius: 12px;
}

/* セクション見出し（NEW 新着記事 / RANKING 人気記事） */
body.magazine-page .section-heading__ja,
body.magazine-page h2 { color: var(--mg-ink) !important; }
body.magazine-page .section-heading__en { display: none !important; }

/* PICK UP バッジをbtrax流の黒ピルに */
body.magazine-page .pickup-badge,
body.magazine-page [class*="pickup"] [class*="badge"],
body.magazine-page [class*="pickup"] [class*="label"] {
  background: var(--mg-ink) !important; color: #fff !important;
  border-radius: 21px !important; font-weight: 700; letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════
   btraxのカード解剖を再現
   [画像] → [カテゴリピル ＋ 日付（同じ行）] → [太いタイトル] → [36px丸アバター＋著者名]
   ══════════════════════════════════════════════════ */
body.magazine-page .magazine-article-card__meta {
  display: flex !important; align-items: center; gap: 12px;
  margin: 0 0 12px !important; padding: 0 !important;
}
body.magazine-page .magazine-article-card__meta .magazine-article-card__date {
  font-size: 0.82rem; color: var(--mg-muted); letter-spacing: 0.02em;
  margin: 0 !important; order: 2;
}
body.magazine-page .magazine-article-card__meta .magazine-article-card__cat { order: 1; margin-bottom: 0 !important; }

body.magazine-page .magazine-article-card__title {
  font-size: 1.24rem !important; font-weight: 700 !important;
  line-height: 1.55 !important; letter-spacing: -0.01em;
  margin: 0 0 16px !important; color: var(--mg-ink) !important;
}

/* 著者行（btrax: アバター36px円 + 名前） */
body.magazine-page .magazine-article-card__author {
  display: flex; align-items: center; gap: 12px; margin-top: auto;
}
body.magazine-page .magazine-article-card__author .mg-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; background: var(--mg-white);
  border: 1px solid var(--mg-line); display: flex; align-items: center; justify-content: center;
}
body.magazine-page .magazine-article-card__author .mg-avatar img {
  width: 78%; height: auto; object-fit: contain;
}
body.magazine-page .mg-author-name {
  font-size: 0.84rem; color: var(--mg-sub); font-weight: 600; letter-spacing: 0.01em;
}

body.magazine-page .magazine-article-card__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 0 !important; background: transparent !important;
}

/* ══════════════════════════════════════════════════
   骨格：サイドバーをやめ、全幅のセクションを縦に積む
   （btrax: 新着記事 → 人気記事 → 特集）
   ══════════════════════════════════════════════════ */
body.magazine-page .magazine-content {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
body.magazine-page .magazine-main { width: 100% !important; max-width: none !important; }

body.magazine-page .mg-section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
body.magazine-page .mg-section-head {
  display: flex; align-items: baseline; gap: 16px;
  margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: 14px; border-bottom: 1px solid var(--mg-line);
}
body.magazine-page .mg-section-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem) !important;
  font-weight: 700 !important; letter-spacing: -0.01em;
  color: var(--mg-ink) !important; margin: 0 !important;
}

/* 「すべての記事を読む」— btraxは控えめな線のボタン */
body.magazine-page .mg-more { text-align: center; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
body.magazine-page .mg-more-link {
  display: inline-block; padding: 14px 34px;
  border: 1px solid var(--mg-ink); border-radius: 30px;
  color: var(--mg-ink); text-decoration: none;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.02em;
  transition: background .2s, color .2s;
}
body.magazine-page .mg-more-link:hover { background: var(--mg-ink); color: #fff; }

/* ── 人気記事：番号つきカード ─────────────────── */
body.magazine-page .mg-rank-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
body.magazine-page .mg-rank-card {
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: var(--mg-ink); transition: opacity .25s;
}
body.magazine-page .mg-rank-card:hover { opacity: .72; }
body.magazine-page .mg-rank-num {
  position: absolute; top: -14px; left: -8px; z-index: 2;
  font-family: var(--font-display, inherit);
  font-size: 3.4rem; font-weight: 700; line-height: 1;
  color: var(--mg-ink); -webkit-text-stroke: 2px var(--mg-paper);
  paint-order: stroke fill;
}
body.magazine-page .mg-rank-thumb {
  border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--mg-line); margin-bottom: 14px;
}
body.magazine-page .mg-rank-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.magazine-page .mg-rank-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
body.magazine-page .mg-rank-title {
  font-size: 1.02rem; font-weight: 700; line-height: 1.6; margin: 0;
}

/* ── 特集：左に大きく、右に一覧（btrax globalTopic） ── */
body.magazine-page .mg-topic {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
body.magazine-page .mg-topic-lead { text-decoration: none; color: var(--mg-ink); display: block; transition: opacity .25s; }
body.magazine-page .mg-topic-lead:hover { opacity: .72; }
body.magazine-page .mg-topic-lead__thumb {
  border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--mg-line); margin-bottom: 18px;
}
body.magazine-page .mg-topic-lead__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.magazine-page .mg-topic-lead__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
body.magazine-page .mg-topic-lead__title {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700;
  line-height: 1.5; letter-spacing: -0.01em; margin: 0;
}
body.magazine-page .mg-topic-lead__excerpt {
  font-size: 0.94rem; color: var(--mg-sub); line-height: 1.9; margin: 0;
}

body.magazine-page .mg-topic-list { display: flex; flex-direction: column; gap: 22px; }
body.magazine-page .mg-topic-item {
  display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center;
  text-decoration: none; color: var(--mg-ink);
  padding-bottom: 22px; border-bottom: 1px solid var(--mg-line);
  transition: opacity .25s;
}
body.magazine-page .mg-topic-list a:last-child { border-bottom: none; padding-bottom: 0; }
body.magazine-page .mg-topic-item:hover { opacity: .72; }
body.magazine-page .mg-topic-item__thumb {
  border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mg-line);
}
body.magazine-page .mg-topic-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.magazine-page .mg-topic-item__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
body.magazine-page .mg-topic-item__title {
  font-size: 0.96rem; font-weight: 700; line-height: 1.6; margin: 0;
}

@media (max-width: 900px) {
  body.magazine-page .mg-topic { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  body.magazine-page .mg-rank-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  body.magazine-page .mg-rank-num { font-size: 2.6rem; }
  body.magazine-page .mg-rank-title { font-size: 0.92rem; }
  body.magazine-page .mg-topic-item { grid-template-columns: 96px 1fr; gap: 12px; }
}

/* 既存の align-items:flex-start がサムネを縮めるので打ち消す */
body.magazine-page .magazine-article-card { align-items: stretch !important; }
body.magazine-page .magazine-article-card__thumb,
body.magazine-page .magazine-article-card__image { width: 100% !important; display: block; }
body.magazine-page .magazine-article-card__cat { align-self: auto; }

/* カードがflex列のため、aspect-ratio指定のサムネがflex-shrinkで潰れる。縮小を止める */
body.magazine-page .magazine-article-card__thumb,
body.magazine-page .mg-rank-thumb,
body.magazine-page .mg-topic-lead__thumb { flex: 0 0 auto; }

/* pages.css は旧デザイン（横並びリスト）用に thumb の高さを 100px/70px で固定している。
   btrax型の縦カードでは aspect-ratio に高さを決めさせるため、固定値を解除する。 */
body.magazine-page .magazine-article-card__thumb {
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto;
}