/* ============================================================
   コラム（一覧 / 詳細）
   ── tokens.css / style.css の読み込み後に適用される。
   ── 値は assets/tokens.css のトークンを参照する。
   ============================================================ */

/* --- カテゴリナビ --- */
.mj-column-catnav {
  background: var(--color-surface-base);
  border-bottom: 1px solid var(--color-border-default);
  position: sticky; top: var(--layout-header-height); z-index: 30;
}
.mj-column-catnav-inner {
  padding-block: var(--space-6);
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
}
.mj-cat-btn {
  display: inline-block; margin-right: var(--space-4);
  padding: var(--space-4) var(--space-9);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-body);
  font-size: var(--font-size-md); font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-fast) var(--motion-ease-standard),
              border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.mj-cat-btn:hover { background: var(--color-surface-tint); border-color: var(--color-border-accent); color: var(--color-text-accent); }
.mj-cat-btn-active {
  background: linear-gradient(135deg, var(--color-primitive-coral), var(--color-primitive-coral-700));
  border-color: transparent; color: #fff;
}

/* --- 一覧グリッド --- */
.mj-column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
@media (max-width: 900px) { .mj-column-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mj-column-grid { grid-template-columns: 1fr; } }

/* --- カード --- */
.mj-column-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform var(--motion-duration-fast) var(--motion-ease-emphasized),
              box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
              border-color var(--motion-duration-fast) var(--motion-ease-standard);
}
.mj-column-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-accent); }
.mj-column-card-bar { height: 5px; background: linear-gradient(90deg, var(--color-primitive-coral-300), var(--color-primitive-coral-700)); }
.mj-column-card-body { padding: var(--space-9); display: flex; flex-direction: column; flex: 1; }
.mj-column-card-meta { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.mj-column-cat-badge {
  background: var(--color-surface-tint); color: var(--color-text-accent);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill);
}
.mj-column-read-time { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.mj-column-card-title {
  font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight); margin-bottom: var(--space-5);
}
.mj-column-card-title a { color: var(--color-text-primary); text-decoration: none; }
.mj-column-card-title a:hover { color: var(--color-text-accent); }
.mj-column-card-excerpt {
  color: var(--color-text-body); font-size: var(--font-size-md);
  line-height: var(--line-height-loose); margin-bottom: var(--space-8); flex: 1;
}
.mj-column-card-keywords { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.mj-column-keyword {
  background: var(--color-surface-subtle); border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted); font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-sm);
}
.mj-column-read-more {
  color: var(--color-text-accent); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md); text-decoration: none; margin-top: auto;
}
.mj-column-read-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- 詳細：本文タイポグラフィ --- */
.mj-article-body h2 {
  font-size: var(--font-size-5xl); font-weight: var(--font-weight-black);
  color: var(--color-text-primary);
  border-left: 4px solid var(--color-surface-accent);
  padding-left: var(--space-8);
  margin: var(--space-11) 0 var(--space-9);
  line-height: var(--line-height-tight);
}
.mj-article-body h2:first-child { margin-top: 0; }
.mj-article-body h3 {
  font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold);
  color: var(--color-text-accent); margin: var(--space-10) 0 var(--space-6);
  line-height: var(--line-height-tight);
}
.mj-article-body p {
  color: var(--color-text-body); font-size: var(--font-size-xl);
  line-height: var(--line-height-loose); margin-bottom: var(--space-9);
}
.mj-article-body ul { padding-left: var(--space-9); margin-bottom: var(--space-9); }
.mj-article-body li {
  color: var(--color-text-body); font-size: var(--font-size-xl);
  line-height: var(--line-height-loose); margin-bottom: var(--space-4);
}
.mj-article-body strong { color: var(--color-text-accent); font-weight: var(--font-weight-bold); }

/* --- 詳細：2カラムレイアウト（レスポンシブ） --- */
.mj-article-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-11); align-items: start; }
@media (max-width: 880px) {
  .mj-article-layout { grid-template-columns: 1fr; gap: var(--space-10); }
  .mj-article-layout > aside { position: static !important; }
}

/* 記事本文中のリンク */
.mycred-jiko-page .mj-article-body a {
  color: var(--color-text-accent);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mycred-jiko-page .mj-article-body a:hover { color: var(--color-primitive-coral); }
.mj-article-body ul { list-style: disc; }
.mj-article-body li::marker { color: var(--color-surface-accent); }