/* === カバーをフルブリードで中央固定（ズレ防止） === */
body.single-post .yht-post-cover{
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;               /* ← 上の余白を消す */
  border-radius: 0 !important;        /* 角丸は本文カード側だけ */
  overflow: hidden;
}

/* === カバーの上に残る“空のヘッダー”を無効化（余白の元凶） === */
body.single-post .article-header{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.single-post .entry-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* === 本文カード（上だけ0、左右と下に余白） === */
body.single-post{
  --post-max: 820px;
  --post-pad: clamp(16px,3vw,28px);
  --post-bg: #F1F7F2;
  --post-radius: 14px;
}
body.single-post .article{
  background: var(--post-bg);
  width: min(92vw, var(--post-max));
  margin: 24px auto;
  padding: 0 var(--post-pad) var(--post-pad) !important; /* ← 上だけ0 */
  box-sizing: border-box;
  border-radius: var(--post-radius);
  overflow: visible !important; /* カバーを切らない */
}

/* カバー直後の最初の要素には少しだけ頭の余白を戻す（読みやすさ用） */
body.single-post .entry-content > .yht-post-cover + *{
  margin-top: var(--post-pad);
}
/* === 読み幅と左右のゆとりをパラメータ化（ここだけ触ればOK） === */
body.single-post{
  --post-max: 1000px;                        /* 最大横幅：広げたい→数値を上げる */
  --side-gutter: clamp(10px, 2.2vw, 24px);  /* 画面左右の外側マージン：広げたい→数値を下げる */
  --post-pad-x: clamp(16px, 2.6vw, 28px);   /* カード内側の左右余白（本文の端のゆとり） */
  --post-pad-y: clamp(16px, 2.4vw, 26px);   /* カード内側の上下余白 */
}

/* 既存の .article を上書き（上だけ0のまま＝カバーに密着） */
body.single-post .article{
  width: min(calc(100vw - var(--side-gutter) * 2), var(--post-max));
  margin: 24px auto;
  padding: 0 var(--post-pad-x) var(--post-pad-y) !important;
  background: var(--post-bg);
  border-radius: var(--post-radius);
  box-sizing: border-box;
  overflow: visible !important; /* カバーを切らない */
}

/* カバー直後の最初の要素の頭だけ少し戻す（--post-pad-yを採用） */
body.single-post .entry-content > .yht-post-cover + *{
  margin-top: var(--post-pad-y);
}