/* ==========================================================================
   AI転職ラボ — article.css
   記事ページ専用スタイル。css/style.css の後に読み込むこと。
   ========================================================================== */

/* --------------------------------------------------------------------------
   読了進捗バー
   -------------------------------------------------------------------------- */
.reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-accent);
  z-index: 60;
  transition: width 80ms linear;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.breadcrumb {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-4) 0;
  font-size: 12px;
  color: var(--color-text-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before {
  content: "›";
  color: var(--color-text-muted);
  font-weight: 700;
}
.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] {
  color: var(--color-text-muted);
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   記事ヘッダー (E-E-A-T)
   -------------------------------------------------------------------------- */
.article-header {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}
.article-header .tag { margin-bottom: var(--sp-4); }

/* 記事上部サムネイル（本文領域と同じ幅で表示） */
.article-thumbnail {
  margin: 0 0 var(--sp-5);
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1200 / 630;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
}
.article-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-title {
  font-size: 26px;
  line-height: 1.35;
  color: var(--color-primary-dark);
  letter-spacing: 0.01em;
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 1024px) {
  .article-title { font-size: 32px; }
  .article-header { padding-block: var(--sp-6) var(--sp-7); }
}

/* メタ情報ブロック */
.article-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
}
@media (min-width: 640px) {
  .article-meta {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.article-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.article-author__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E3A8A, #F97316);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: var(--shadow-sm);
}
.article-author__text { min-width: 0; }
.article-author__name {
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 14px;
  line-height: 1.4;
}
.article-author__role {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.article-author__note {
  font-size: 12px;
  color: var(--color-text);
  margin-top: 2px;
  line-height: 1.5;
}

.article-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  font-size: 12px;
  color: var(--color-text-muted);
}
.article-dates dt {
  font-weight: 700;
  color: var(--color-primary);
  margin-right: 4px;
  display: inline;
}
.article-dates dd { display: inline; font-variant-numeric: tabular-nums; }
.article-dates > div { display: inline-flex; align-items: center; gap: var(--sp-1); }
.article-dates svg { width: 14px; height: 14px; color: var(--color-primary); }

/* AI要約ブロック */
.article-summary {
  margin-top: var(--sp-5);
  background: var(--color-block-info-bg);
  border-left: 4px solid var(--color-block-info-border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 64px;
  position: relative;
}
.article-summary::before {
  content: "💡";
  position: absolute;
  left: 20px;
  top: var(--sp-5);
  font-size: 22px;
  line-height: 1;
}
.article-summary h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.04em;
}
.article-summary ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.article-summary li {
  position: relative;
  padding-left: 24px;
  line-height: 1.7;
  font-size: 15px;
}
.article-summary li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 14px; height: 2px;
  background: var(--color-primary);
}

/* --------------------------------------------------------------------------
   2カラムレイアウト
   -------------------------------------------------------------------------- */
.article-layout {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: 0 var(--sp-4) var(--sp-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) var(--w-sidebar);
    padding-bottom: var(--sp-8);
  }
}

.article-main { min-width: 0; }
.article-main > * + * { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   目次 (TOC)
   -------------------------------------------------------------------------- */
.toc {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.toc__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 15px;
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
  margin-top: -4px;
}
details[open] > .toc__summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc__summary:hover { background: #F1F5F9; }

.toc__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.toc__label::before {
  content: "";
  width: 16px; height: 2px;
  background: var(--color-accent);
  display: inline-block;
}

.toc__list {
  padding: var(--sp-4) var(--sp-5);
  counter-reset: toc;
  list-style: none;
  margin: 0;
}
.toc__list > li { counter-increment: toc; margin: 0; padding: 0; }
.toc__list > li + li { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--color-border); }
.toc__list > li > a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-2);
  text-decoration: none;
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 14px;
  line-height: 1.55;
}
.toc__list > li > a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-accent);
  font-size: 13px;
}
.toc__list > li > a:visited { color: var(--color-primary-dark); }
.toc__list > li > a:hover { color: var(--color-accent); }

.toc__sub {
  list-style: none;
  margin: var(--sp-2) 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.toc__sub a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.6;
}
.toc__sub a:visited { color: var(--color-text); }
.toc__sub a:hover { color: var(--color-accent); }
.toc__sub li::before {
  content: "—";
  color: var(--color-text-muted);
  margin-right: var(--sp-2);
}

/* --------------------------------------------------------------------------
   本文 (prose)  ※style.css の .prose を拡張
   -------------------------------------------------------------------------- */
.article-body { max-width: var(--w-article); }
.article-body.prose > h2:first-child { margin-top: 0; }

/* 体験談ブロック (記事末尾近く用) */
.experience-card {
  position: relative;
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
  background: var(--color-block-experience-bg);
  border-left: 4px solid var(--color-block-experience-border);
  border-radius: var(--r-md);
}
.experience-card__header {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  background: rgba(234, 179, 8, 0.15);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  color: #713F12;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
}
.experience-card h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-primary-dark);
  margin: 0 0 var(--sp-3);
  padding: 0; border: 0;
}
.experience-card p { margin: 0; }
.experience-card p + p { margin-top: var(--sp-3); }

/* --------------------------------------------------------------------------
   記事末尾 CTA
   -------------------------------------------------------------------------- */
.article-cta {
  margin-top: var(--sp-7);
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.article-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(249, 115, 22, 0.12), transparent 60%),
    radial-gradient(400px 200px at 0% 100%, rgba(234, 88, 12, 0.08), transparent 60%);
  pointer-events: none;
}
.article-cta > * { position: relative; }
.article-cta h2 {
  font-size: 22px;
  color: var(--color-primary-dark);
  margin: 0 0 var(--sp-3);
  padding: 0; border: 0;
}
.article-cta p {
  max-width: 520px;
  margin: 0 auto var(--sp-5);
  color: var(--color-text);
}
@media (min-width: 1024px) {
  .article-cta { padding: var(--sp-7) var(--sp-6); }
  .article-cta h2 { font-size: 24px; }
}

/* --------------------------------------------------------------------------
   著者詳細ブロック
   -------------------------------------------------------------------------- */
.author-bio {
  margin-top: var(--sp-7);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .author-bio { grid-template-columns: auto 1fr; gap: var(--sp-5); }
}

.author-bio__avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E3A8A, #F97316);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 28px;
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: var(--shadow-md);
}
.author-bio__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-dark);
  line-height: 1.4;
  margin: 0;
}
.author-bio__role {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.author-bio__text {
  margin-top: var(--sp-3);
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
}
.author-bio__social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.author-bio__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.author-bio__social a:visited { color: var(--color-primary); }
.author-bio__social a:hover { background: var(--color-primary); color: #fff; }
.author-bio__social svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   関連記事
   -------------------------------------------------------------------------- */
.related {
  margin-top: var(--sp-7);
}
.related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--color-primary);
}
.related__head h2 {
  font-size: 20px;
  margin: 0;
  padding: 0;
  border: 0;
}
.related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .related__grid { grid-template-columns: repeat(3, 1fr); }
}

.related-thumb {
  width: 100%; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
}
.related-thumb.a { background: repeating-linear-gradient(45deg, rgba(249,115,22,0.08) 0 8px, transparent 8px 16px), linear-gradient(135deg, #FEF3C7, #FED7AA); }
.related-thumb.b { background: repeating-linear-gradient(45deg, rgba(30,58,138,0.08) 0 8px, transparent 8px 16px), linear-gradient(135deg, #DBEAFE, #E0E7FF); }
.related-thumb.c { background: repeating-linear-gradient(45deg, rgba(234,179,8,0.08) 0 8px, transparent 8px 16px), linear-gradient(135deg, #FEFCE8, #FDE68A); }

/* --------------------------------------------------------------------------
   SNS共有ボタン
   -------------------------------------------------------------------------- */
.share {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  background: var(--color-bg-muted);
  border-radius: var(--r-md);
  text-align: center;
}
.share h3 {
  font-size: 14px;
  color: var(--color-primary-dark);
  margin: 0 0 var(--sp-3);
  padding: 0; border: 0;
}
.share__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.share__btn:visited { color: #fff; }
.share__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.share__btn svg { width: 14px; height: 14px; }
.share__btn--x { background: #000; }
.share__btn--fb { background: #1877F2; }
.share__btn--in { background: #0A66C2; }
.share__btn--copy { background: var(--color-primary); }
.share__btn--copy[data-copied="true"] { background: #16A34A; }

/* --------------------------------------------------------------------------
   フィードバック誘導
   -------------------------------------------------------------------------- */
.feedback {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: #fff;
  border: 1px dashed var(--color-border);
  border-radius: var(--r-md);
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
}
.feedback p { margin: 0; }
.feedback p + p { margin-top: var(--sp-2); }
.feedback a { font-weight: 700; }

/* --------------------------------------------------------------------------
   サイドバー (PC: 右カラム sticky / モバイル: 本文の下)
   -------------------------------------------------------------------------- */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 1024px) {
  .article-sidebar {
    position: sticky;
    top: var(--sp-5);
    align-self: start;
    max-height: calc(100vh - var(--sp-6));
    overflow-y: auto;
    margin-top: 0;
    padding-bottom: var(--sp-4);
  }
  /* スクロールバー軽量化 */
  .article-sidebar::-webkit-scrollbar { width: 6px; }
  .article-sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
}
/* モバイル: 2カラムで見やすく */
@media (max-width: 767px) {
  .article-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
}

.widget {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.widget h3 {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--color-accent);
  font-size: 14px;
  letter-spacing: 0.04em;
  display: inline-block;
}

/* Author mini card */
.widget-author {
  text-align: center;
}
.widget-author__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E3A8A, #F97316);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 24px;
  margin: 0 auto var(--sp-3);
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
}
.widget-author__name {
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: 15px;
}
.widget-author__role {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.widget-author__note {
  margin-top: var(--sp-3);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text);
  text-align: left;
}
.widget-author__links {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.widget-author__links a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.widget-author__links a:hover { background: var(--color-primary); color: #fff; }
.widget-author__links svg { width: 14px; height: 14px; }

/* Popular ranking */
.widget-rank ol { list-style: none; padding: 0; margin: 0; counter-reset: rank; }
.widget-rank li { counter-increment: rank; }
.widget-rank li + li { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--color-border); }
.widget-rank a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-2);
  align-items: start;
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.6;
}
.widget-rank a:visited { color: var(--color-text); }
.widget-rank a:hover { color: var(--color-accent); }
.widget-rank a::before {
  content: counter(rank, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-accent);
  font-size: 16px;
  line-height: 1.2;
}

/* Newsletter */
.widget-newsletter { background: linear-gradient(135deg, #1E3A8A, #0F172A); color: #fff; border-color: transparent; }
.widget-newsletter h3 { color: #fff; border-bottom-color: var(--color-accent); }
.widget-newsletter p {
  font-size: 13px;
  line-height: 1.7;
  color: #CBD5E1;
  margin: 0 0 var(--sp-3);
}
.widget-newsletter input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #334155;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 13px;
  margin-bottom: var(--sp-3);
}
.widget-newsletter input[type="email"]::placeholder { color: #94A3B8; }
.widget-newsletter input[type="email"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.widget-newsletter .btn-primary { width: 100%; }
.widget-newsletter small {
  display: block;
  margin-top: var(--sp-2);
  font-size: 11px;
  color: #94A3B8;
  line-height: 1.6;
}

/* Category list */
.widget-cat ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.widget-cat a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  text-decoration: none;
  color: var(--color-text);
  font-size: 13px;
  border-bottom: 1px dashed var(--color-border);
}
.widget-cat a:visited { color: var(--color-text); }
.widget-cat a:hover { color: var(--color-accent); }
.widget-cat a::after {
  content: "›";
  color: var(--color-text-muted);
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   印刷用 (最低限)
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .article-sidebar,
  .share, .feedback, .article-cta, .floating-cta,
  .reading-progress, .mobile-nav { display: none !important; }
  .article-layout { grid-template-columns: 1fr; padding: 0; }
  body { color: #000; background: #fff; }
}

/* ==========================================================================
   AI転職ラボ — 互換性レイヤー (2026-04-22追加)
   記事HTMLで使用している簡易クラス名を、既存のCSSスタイルに繋ぎ込む。
   ========================================================================== */

/* ---- 2カラムレイアウト: <article class="article article-main"> のケース ---- */
.article-layout > .article { min-width: 0; }
.article-layout > .article > * { max-width: none; }
.article-layout > .article .article-body {
  max-width: 100%;
}

/* サイドバー見出し: widget h3 の上余白調整 */
.article-sidebar .widget h3 {
  display: block;
  width: 100%;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
}
.article-sidebar .widget-newsletter h3 { color: #fff; }

/* 現在閲覧中の記事（人気記事ウィジェット内） */
.widget-rank a.is-current {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}
.widget-rank a.is-current::after {
  content: "（閲覧中）";
  font-size: 11px;
  color: var(--color-text-muted);
  display: inline;
  margin-left: 4px;
}

/* 目次のアンカー先にジャンプしたとき、固定ヘッダーに被らないよう余白 */
.article-body h2[id],
.article-body h3[id] {
  scroll-margin-top: 80px;
}

/* 自動生成された目次の上下余白 */
.toc--auto {
  margin: var(--sp-5) 0 var(--sp-6);
}


/* ---- 記事ヘッダー: <h1> 直接スタイル ---- */
.article-header h1 {
  font-size: 26px;
  line-height: 1.35;
  color: var(--color-primary-dark);
  letter-spacing: 0.01em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
  font-weight: 700;
}
.article-header h1 small {
  display: block;
  font-size: 0.65em;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: var(--sp-3);
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .article-header h1 { font-size: 32px; }
}

/* ---- 記事メタ情報 ---- */
.article-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: var(--sp-5);
  background: #fff;
}
@media (min-width: 768px) {
  .article-meta { flex-direction: row; justify-content: space-between; align-items: center; }
}
.article-meta__author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.article-meta__author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.article-meta__author .author-name {
  display: block;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 15px;
}
.article-meta__author .author-name:hover { color: var(--color-accent); }
.article-meta__author .author-tag {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-text-muted);
}
.article-meta__dates {
  display: flex;
  gap: var(--sp-4);
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}
.article-meta__dates dt {
  font-weight: 500;
  margin-right: 4px;
}
.article-meta__dates dt, .article-meta__dates dd { display: inline; margin: 0; }
.article-meta__dates dd { margin-right: var(--sp-3); }

/* ---- 記事の結論ブロック (AI要約) ---- */
.article-summary {
  background: var(--color-block-info-bg);
  border-left: 4px solid var(--color-block-info-border);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 8px 8px 0;
  margin-bottom: var(--sp-6);
}
.article-summary h2 {
  font-size: 18px;
  margin: 0 0 var(--sp-3);
  color: var(--color-primary-dark);
  border: none;
  padding: 0;
}
.article-summary ul {
  margin: 0;
  padding-left: var(--sp-5);
}
.article-summary li {
  margin-bottom: var(--sp-2);
  line-height: 1.7;
}

/* ---- タグ: カテゴリ別色 ---- */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: #fff;
  text-decoration: none;
}
.tag--career { border-color: #1E3A8A; color: #1E3A8A; }
.tag--chatgpt { border-color: #10B981; color: #10B981; }
.tag--ai-agent { border-color: #8B5CF6; color: #8B5CF6; }

/* ---- 記事本文: prose ---- */
.article-body, .article-body.prose {
  max-width: 720px;
  margin-inline: auto;
  padding: 0 var(--sp-4);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
}
@media (min-width: 1024px) {
  .article-body, .article-body.prose { font-size: 18px; }
}
.article-body h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: var(--sp-7) 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--color-border);
  line-height: 1.4;
  scroll-margin-top: 80px;
}
@media (min-width: 1024px) {
  .article-body h2 { font-size: 26px; }
}
.article-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  margin: var(--sp-6) 0 var(--sp-3);
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .article-body h3 { font-size: 20px; }
}
.article-body p { margin: 0 0 var(--sp-4); }
.article-body ul, .article-body ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.article-body li { margin-bottom: var(--sp-2); line-height: 1.8; }
.article-body strong { font-weight: 700; color: var(--color-primary-dark); }
.article-body a { color: var(--color-link); }
.article-body a:hover { color: var(--color-accent); }
.article-body a:visited { color: var(--color-link-visited); }
.article-body pre {
  background: var(--color-primary-dark);
  color: #E5E7EB;
  padding: var(--sp-4);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
  margin: var(--sp-4) 0;
}
.article-body pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.article-body code {
  background: var(--color-bg-muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--color-primary-dark);
}

/* ---- 特殊見出し (章見出しの明朝体) ---- */
.section-experience, .article-body h2.section-experience,
.heading-serif, .article-body h3.heading-serif {
  font-family: var(--font-serif), serif !important;
}

/* ---- テーブル ---- */
.table-wrapper {
  overflow-x: auto;
  margin: var(--sp-4) 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table-wrapper th {
  background: var(--color-bg-muted);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  font-weight: 700;
  color: var(--color-primary-dark);
  border-bottom: 2px solid var(--color-border);
}
.table-wrapper td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--color-border);
  line-height: 1.6;
}
.table-wrapper tr:last-child td { border-bottom: none; }
.table-wrapper tr:hover td { background: var(--color-bg-muted); }

/* ---- 体験談ブロック (本文内に使用) ---- */
.article-body .block-experience {
  background: var(--color-block-experience-bg);
  border-left: 4px solid var(--color-block-experience-border);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 8px 8px 0;
  margin: var(--sp-5) 0;
  position: relative;
}
.article-body .block-experience::before {
  content: "💭";
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  font-size: 24px;
  opacity: 0.6;
}
.article-body .block-experience h3 {
  margin-top: 0;
  color: var(--color-primary-dark);
}

/* ---- 関連記事 (related-grid は .related__grid の別名) ---- */
.related {
  max-width: 720px;
  margin: var(--sp-7) auto;
  padding: var(--sp-5) var(--sp-4);
}
.related h2 {
  font-size: 18px;
  margin: 0 0 var(--sp-4);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.related-grid,
.related ul.related-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}
.related-grid li {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg-muted);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  transition: all 0.2s;
}
.related-grid li:hover {
  border-color: var(--color-accent);
  transform: translateX(4px);
}
.related-grid a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.5;
}
.related-grid a:hover { color: var(--color-accent); }

/* ---- 著者ボックス (簡易版) ---- */
.author-bio {
  max-width: 720px;
  margin: var(--sp-6) auto;
  padding: var(--sp-5);
  background: var(--color-bg-muted);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary);
}
.author-bio h2 {
  font-size: 16px;
  margin: 0 0 var(--sp-3);
  color: var(--color-primary-dark);
}
.author-bio p { margin: 0 0 var(--sp-3); font-size: 14px; line-height: 1.7; }
.author-bio a { color: var(--color-link); font-weight: 500; }

/* ---- SNS共有 (シンプル版・プレーン<a>) ---- */
.share {
  max-width: 720px;
  margin: var(--sp-6) auto;
  padding: var(--sp-4);
  text-align: center;
}
.share h2 {
  font-size: 14px;
  margin: 0 0 var(--sp-3);
  color: var(--color-text-muted);
  font-weight: 500;
}
.share > a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  margin: 4px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s;
}
.share > a:hover { background: var(--color-accent); color: #fff; }

/* ---- 記事CTAブロック (noteメンバーシップ誘導) ---- */
.article-body + .article-cta,
.article-cta {
  max-width: 720px;
  margin: var(--sp-7) auto;
  padding: var(--sp-5);
  background: linear-gradient(135deg, #FFF7ED 0%, #FEE4CE 100%);
  border-radius: 12px;
  text-align: center;
  border: 1px solid #FED7AA;
}
.article-cta h2 {
  margin: 0 0 var(--sp-3);
  color: var(--color-primary-dark);
  font-size: 20px;
}
.article-cta p { margin: 0 0 var(--sp-4); line-height: 1.7; }
.article-cta .btn-primary {
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  background: var(--color-accent);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s;
}
.article-cta .btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

/* --------------------------------------------------------------------------
   目次へ戻るボタン（スマホ専用、右下に小さく表示）
   -------------------------------------------------------------------------- */
.back-to-toc {
  position: fixed;
  right: var(--sp-3);
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), background 160ms var(--ease);
  z-index: 40;
  padding: 0;
}
.back-to-toc svg { width: 20px; height: 20px; }
.back-to-toc:hover { background: var(--color-primary-dark); }
.back-to-toc:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 1023.98px) {
  .back-to-toc { display: flex; }
  .back-to-toc.is-visible { opacity: 1; transform: translateY(0); }
}