/* ============================================================
   株姫の米国株ラボ — 個別記事(投稿ページ)スタイル
   トップ(.khm-top)の世界観に寄せつつ、長文の可読性を最優先。

   名前空間: body.khm-article(functions.php で付与)
   方針:
     - 見出し/タイトル/装飾  → 明朝 + 濃紺 + シャンパンゴールド(トップ踏襲)
     - 本文                   → Zen Kaku Gothic New / 17px / 行間2.0 / 760px
     - Cocoon の目次・SNS・関連記事などの機能は壊さず、色味だけ寄せる
   ============================================================ */

body.khm-article{
  --navy-900:#0F1B2D;
  --navy-700:#1C3148;
  --ink:#14202E;
  --champagne:#C9A14A;
  --champagne-soft:#E5D2A0;
  --champagne-ink:#A8842B;   /* 白背景でのリンク等、可読コントラスト確保用の濃いめゴールド */
  --paper:#FBFAF7;
  --line:#E3E0D8;
  --muted:#6B7785;
  --read:760px;              /* 本文の読みやすい行長 */

  /* 目に優しい、わずかに温かみのある背景(サイト外周) */
  background:var(--paper);
}

/* ---------- 記事/固定ページの外枠(共有ヘッダー/フッターと併用) ---------- */
body.khm-article .khm-article-main{
  padding:52px 0 76px;
}
body.khm-article .khm-article-inner{
  max-width:820px;
  margin:0 auto;
  padding:0 24px;
}
/* 中央寄せ要素は本文と同じ読みやすい行長に揃える */
body.khm-article .khm-article-inner .date-tags{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  max-width:var(--read);margin-left:auto;margin-right:auto;margin-bottom:22px;
}
body.khm-article .khm-article-inner > .entry-title{
  max-width:var(--read);margin-left:auto;margin-right:auto;
}

/* ---------- 記事タイトル (h1) ---------- */
body.khm-article .entry-title,
body.khm-article h1.entry-title{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-900);
  font-weight:700;
  font-size:clamp(1.55rem,3vw,2.15rem);
  line-height:1.5;
  letter-spacing:.02em;
  margin-bottom:.6em;
}

/* ---------- メタ情報(日付・カテゴリ・タグ) ---------- */
body.khm-article .date-tags,
body.khm-article .entry-meta,
body.khm-article .post-meta,
body.khm-article .date-tags .post-date,
body.khm-article .date-tags .post-update,
body.khm-article .author-name{
  font-family:"Jost","Zen Kaku Gothic New",sans-serif;
  color:var(--muted);
  font-size:.82rem;
  letter-spacing:.06em;
}
body.khm-article .date-tags a{
  color:var(--muted);
  text-decoration:none;
}
body.khm-article .date-tags a:hover{ color:var(--navy-900); }

/* カテゴリラベルはトップの .art-thumb .cat に似た上品なゴールドタグへ */
body.khm-article .cat-link a,
body.khm-article .entry-category a,
body.khm-article .cat-link{
  display:inline-block;
  background:var(--champagne);
  color:var(--navy-900) !important;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  padding:3px 11px;
  border-radius:2px;
  text-decoration:none;
  line-height:1.6;
}
body.khm-article .cat-link a:hover{ background:var(--champagne-soft); }
/* タグはアウトライン主体で控えめに */
body.khm-article .tag-link a{
  color:var(--champagne-ink);
  font-size:.76rem;
  text-decoration:none;
  border:1px solid var(--line);
  padding:2px 9px;
  border-radius:2px;
}
body.khm-article .tag-link a:hover{ border-color:var(--champagne); }

/* ---------- アイキャッチ画像の額装 ---------- */
body.khm-article .eye-catch-wrap,
body.khm-article .entry-content > figure.eye-catch{
  max-width:var(--read);
  margin-left:auto;
  margin-right:auto;
}
body.khm-article .eye-catch{
  border:1px solid var(--line);
  border-radius:3px;
  padding:8px;
  background:#fff;
  box-shadow:0 24px 56px -34px rgba(15,27,45,.45);
  position:relative;
}
body.khm-article .eye-catch::after{
  content:"";
  position:absolute;inset:4px;
  border:1px solid rgba(201,161,74,.30);
  border-radius:2px;
  pointer-events:none;
}
body.khm-article .eye-catch .eye-catch-image,
body.khm-article .eye-catch img{
  border-radius:2px;
  display:block;
}

/* ---------- 本文(可読性最優先) ---------- */
body.khm-article .entry-content{
  max-width:var(--read);
  margin-left:auto;
  margin-right:auto;
  font-family:"Zen Kaku Gothic New",sans-serif;
  color:var(--ink);
  font-size:17px;
  line-height:2.0;
  letter-spacing:.012em;
}
body.khm-article .entry-content p{
  margin:0 0 1.7em;
}
body.khm-article .entry-content ul,
body.khm-article .entry-content ol{
  margin:0 0 1.7em;
  padding-left:1.5em;
  line-height:1.95;
}
body.khm-article .entry-content li{ margin-bottom:.5em; }
body.khm-article .entry-content ul li::marker{ color:var(--champagne-ink); }
body.khm-article .entry-content strong,
body.khm-article .entry-content b{
  color:var(--navy-900);
  font-weight:700;
}

/* ---------- 見出し h2(トップのセクション見出しに寄せる) ---------- */
body.khm-article .entry-content h2{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-900);
  font-weight:700;
  font-size:clamp(1.32rem,2.4vw,1.6rem);
  line-height:1.55;
  letter-spacing:.02em;
  margin:2.6em 0 1.1em;
  padding:.18em 0 .18em 18px;
  /* Cocoon 既定の背景バー/枠線を解除し、左ゴールド罫線に */
  background:none;
  border:none;
  border-left:4px solid var(--champagne);
}
body.khm-article .entry-content h2::before,
body.khm-article .entry-content h2::after{ content:none; }

/* ---------- 見出し h3(明朝 + 下線の細い罫線) ---------- */
body.khm-article .entry-content h3{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-700);
  font-weight:600;
  font-size:clamp(1.12rem,1.9vw,1.28rem);
  line-height:1.6;
  letter-spacing:.02em;
  margin:2.2em 0 .9em;
  padding:0 0 .35em;
  background:none;
  border:none;
  border-bottom:1px solid var(--line);
}
body.khm-article .entry-content h3::before,
body.khm-article .entry-content h3::after{ content:none; }

/* h4 は控えめにゴールドの小見出し */
body.khm-article .entry-content h4{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-900);
  font-weight:600;
  font-size:1.05rem;
  margin:1.9em 0 .7em;
  padding-left:12px;
  border-left:2px solid var(--champagne-soft);
  background:none;
}

/* ---------- リンク ---------- */
body.khm-article .entry-content a{
  color:var(--champagne-ink);
  text-decoration:underline;
  text-decoration-color:rgba(201,161,74,.45);
  text-underline-offset:3px;
  transition:color .2s, text-decoration-color .2s;
}
body.khm-article .entry-content a:hover{
  color:var(--navy-900);
  text-decoration-color:var(--navy-900);
}

/* ---------- 引用 blockquote ---------- */
body.khm-article .entry-content blockquote{
  margin:1.9em 0;
  padding:22px 26px 22px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--champagne);
  border-radius:2px;
  color:#41505E;
  font-size:.98em;
  line-height:1.95;
  position:relative;
}
body.khm-article .entry-content blockquote::before{
  content:"\201C";
  position:absolute;top:2px;left:10px;
  font-family:"Shippori Mincho",serif;
  font-size:2.6rem;color:rgba(201,161,74,.35);
  line-height:1;
}
body.khm-article .entry-content blockquote p:last-child{ margin-bottom:0; }
body.khm-article .entry-content blockquote cite{
  display:block;margin-top:.6em;
  font-family:"Jost",sans-serif;font-size:.8rem;color:var(--muted);font-style:normal;
}

/* ---------- 区切り線 ---------- */
body.khm-article .entry-content hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--champagne-soft), transparent);
  margin:2.6em 0;
}

/* ---------- 目次(Cocoon の .toc。機能は触らず色味のみ) ---------- */
body.khm-article .toc{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
}
body.khm-article .toc-title{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-900);
  font-weight:600;
  letter-spacing:.04em;
}
body.khm-article .toc-list a{
  color:var(--navy-700);
  text-decoration:none;
}
body.khm-article .toc-list a:hover{ color:var(--champagne-ink); }

/* ---------- 著者欄 ---------- */
body.khm-article .author-box{
  background:#fff;
  border:1px solid var(--line);
  border-radius:3px;
}
body.khm-article .author-box .author-name,
body.khm-article .author-box .fn{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-900);
}

/* ---------- 関連記事 ---------- */
body.khm-article .related-entry-heading,
body.khm-article .related-entries .widget-entry-cards + .related-entry-heading,
body.khm-article .relation-title,
body.khm-article .related-entries h2{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-900);
  font-weight:700;
  border-left:4px solid var(--champagne);
  padding-left:14px;
  background:none;
  border-bottom:none;
}
body.khm-article .related-entry-card,
body.khm-article .widget-entry-card{
  border:1px solid var(--line);
  border-radius:3px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
body.khm-article .related-entry-card:hover,
body.khm-article .widget-entry-card:hover{
  border-color:var(--champagne);
  box-shadow:0 18px 40px -28px rgba(15,27,45,.4);
  transform:translateY(-2px);
}
body.khm-article .related-entry-card-title,
body.khm-article .widget-entry-card-title{
  font-family:"Shippori Mincho",serif;
  color:var(--navy-900);
}

/* ---------- ページ送り(前後の記事) ---------- */
body.khm-article .navi-prev,
body.khm-article .navi-next{
  font-family:"Zen Kaku Gothic New",sans-serif;
}
body.khm-article .navi-prev:hover,
body.khm-article .navi-next:hover{ color:var(--champagne-ink); }

/* ---------- 標準テンプレート(single.php / page.php)用の部品 ---------- */

/* SNS シェア */
body.khm-article .khm-share{
  max-width:var(--read);margin:38px auto 0;
  display:flex;gap:10px;flex-wrap:wrap;
}
body.khm-article .khm-share a{
  flex:1;min-width:84px;text-align:center;
  padding:11px 10px;border:1px solid var(--line);border-radius:2px;background:#fff;
  font-family:"Jost","Zen Kaku Gothic New",sans-serif;font-size:.82rem;letter-spacing:.04em;
  color:var(--navy-700);text-decoration:none;transition:border-color .2s,color .2s;
}
body.khm-article .khm-share a:hover{border-color:var(--champagne);color:var(--navy-900);}

/* タグ */
body.khm-article .khm-tags{
  max-width:var(--read);margin:28px auto 0;display:flex;gap:8px;flex-wrap:wrap;
}
body.khm-article .khm-tags a{
  font-size:.78rem;color:var(--champagne-ink);text-decoration:none;
  border:1px solid var(--line);padding:3px 10px;border-radius:2px;
}
body.khm-article .khm-tags a:hover{border-color:var(--champagne);}

/* 著者欄(標準テンプレート) */
body.khm-article .khm-article-main .author-box{
  max-width:var(--read);margin:42px auto 0;
  display:flex;gap:18px;align-items:center;padding:22px 24px;
}
body.khm-article .khm-author-avatar img{
  width:64px;height:64px;border-radius:50%;display:block;flex:none;
}
body.khm-article .khm-author-desc{
  display:block;font-size:.86rem;color:var(--muted);line-height:1.7;margin-top:5px;
}

/* 前後の記事 */
body.khm-article .khm-postnav{
  max-width:var(--read);margin:42px auto 0;
  display:flex;justify-content:space-between;gap:18px;
  font-family:"Zen Kaku Gothic New",sans-serif;font-size:.9rem;
}
body.khm-article .khm-postnav a{color:var(--navy-700);text-decoration:none;}
body.khm-article .khm-postnav a:hover{color:var(--champagne-ink);}
body.khm-article .khm-postnav-next{margin-left:auto;text-align:right;}

/* 複数ページ記事のページ内リンク */
body.khm-article .khm-page-links{
  max-width:var(--read);margin:30px auto 0;
  font-family:"Jost",sans-serif;font-size:.9rem;color:var(--muted);
}
body.khm-article .khm-page-links a{
  display:inline-block;margin:0 4px;padding:4px 11px;border:1px solid var(--line);
  border-radius:2px;color:var(--ink);text-decoration:none;
}
body.khm-article .khm-page-links a:hover{border-color:var(--champagne);}

/* ---------- レスポンシブ ---------- */
@media(max-width:768px){
  body.khm-article .khm-article-main{padding:36px 0 56px;}
  body.khm-article .entry-content{
    font-size:16px;
    line-height:1.95;
  }
  body.khm-article .khm-share a{flex-basis:calc(50% - 5px);}
  body.khm-article .entry-content h2{
    font-size:1.28rem;
    margin:2.2em 0 1em;
    padding-left:14px;
    border-left-width:3px;
  }
  body.khm-article .entry-content blockquote{
    padding:18px 18px 18px 22px;
  }
}

@media(prefers-reduced-motion:reduce){
  body.khm-article *{ transition:none !important; }
}