/* ============================================================
 * blog-rich.css — ブログ用リッチ化レイヤー
 * ============================================================
 * 各ブログ HTML の <style> (ページ埋め込み) より前に <link> される。
 * 同じ詳細度では埋め込み側が勝つため、上書きが必要なルールは
 * `body` を前置して詳細度を 1 段上げる。
 * motion.css を import することで、フォント / sticky ヘッダー /
 * ナビホバー / フッターヘアライン / タップフィードバックを
 * メイン LP と共有する。
 * フォントの @import は motion.css 内にもあるが、ここに直接書く事で
 * blog→motion→fonts の 3 段直列チェーンを 2 段並列に短縮する
 * (同一 URL なのでブラウザ側で重複フェッチされない)。
 * ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&family=Quicksand:wght@500;700&family=Zen+Maru+Gothic:wght@500;700&display=swap");
@import url("motion.css");

/* ---------- ヘッダー固定 (ブログ) ----------
 * ブログは <body> 直下の #site-header ラッパーに React がヘッダーを
 * 描画する。内側の <header>.site-header の sticky は親 (高さ=ヘッダー分)
 * に拘束されて効かないため、ラッパー側を sticky にする (DESIGN_GUIDE §7)。
 * ---------------------------------------------------------- */
body > #site-header {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* ---------- 見出しにディスプレイフォント ----------
 * font-weight は埋め込み CSS で 900/800 が当たっているが、Zen Maru Gothic
 * / Quicksand / Nunito bold で潰れて読みにくいため 700 まで下げる
 * (DESIGN_GUIDE §3)。letter-spacing で空気感を補う。
 * ---------------------------------------------------------- */
body h1,
body h2,
body .post .title,
body .pin-badge,
body .section-label {
  font-family: var(--font-display, inherit);
}
body h1,
body h2 {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---------- strong マーカー末尾の欠け対策 ----------
 * 埋め込み CSS の `.body strong { padding: 0 2px }` で末尾の文字に
 * 右 2px の余白が空き、ハイライト (linear-gradient) が文字の右端に
 * かからず「最後の文字だけマーカーされてない」ように見える。
 * padding を半減し、box-decoration-break で折り返し時も両端パディングが
 * 各行にクローンされるようにする。
 * ---------------------------------------------------------- */
body .body strong {
  padding: 0 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- h1: アクセントの下線バー ---------- */
body .wrap > h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  border-radius: 3px;
  margin-top: 12px;
  background: linear-gradient(90deg, #E89A3D, #F5A8C0);
}

/* ---------- 記事カード: ホバーを深く・角丸強化 ---------- */
body .post {
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(61, 46, 31, 0.04);
}
@media (hover: hover) {
  body .post:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(61, 46, 31, 0.12);
  }
}
body .post.pinned {
  box-shadow: 0 4px 18px rgba(232, 154, 61, 0.22);
}
@media (hover: hover) {
  body .post.pinned:hover {
    box-shadow: 0 14px 32px rgba(232, 154, 61, 0.3);
  }
}

/* ---------- 記事本文: リンク / 引用 / 画像 ----------
 * .app-link (CTA ボタン: 白文字 on 色付きピル) はテキストリンクでは
 * ないので必ず除外する。色は背景 #FBF6EE に対して WCAG AA (4.5:1)
 * を満たす濃い暖色。
 * ---------------------------------------------------------- */
body .body a:not(.app-link) {
  color: #9C5A14;
  text-decoration-color: rgba(156, 90, 20, 0.4);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
@media (hover: hover) {
  body .body a:not(.app-link):hover { text-decoration-color: #9C5A14; }
}
body .body blockquote {
  box-shadow: 0 2px 10px rgba(61, 46, 31, 0.06);
}
body .body img {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(61, 46, 31, 0.1);
}

/* ---------- 読了プログレスバー (純CSS / 対応ブラウザのみ) ---------- */
@supports (animation-timeline: scroll(root)) {
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
    background: linear-gradient(90deg, #E89A3D, #F5A8C0);
    transform-origin: left;
    transform: scaleX(0);
    animation: blog-progress-grow linear;
    animation-timeline: scroll(root);
  }
  @keyframes blog-progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    body::before { display: none; }
  }
}

/* ============================================================
 * アプリ別テーマカラー (acc クラス) — DESIGN_GUIDE §1-2
 * ============================================================
 * アプリ紹介コラム: <body class="acc-<cat>">
 * エッセイの CTA のみ: <a class="app-link acc-<cat>">
 * ブログ index のカード: <a class="post slim app-post acc-<cat>">
 * acc クラスが無いページ/要素は一切影響を受けない。
 * 色の正本はメインサイトのカテゴリ accent (content/<lang>/*.js)。
 * ============================================================ */
.acc-todo   { --pa-c: #F5A8C0; --pa-deep: #B85575; --pa-soft: #FFF0F4; --pa-marker: #FFD9E6; }
.acc-record { --pa-c: #A8B0BC; --pa-deep: #5B6470; --pa-soft: #EEF0F2; --pa-marker: #DDE2E8; }
.acc-tool   { --pa-c: #7BAE74; --pa-deep: #3F7239; --pa-soft: #EAF3E5; --pa-marker: #D3E8CE; }
.acc-other  { --pa-c: #A480B8; --pa-deep: #5B3F70; --pa-soft: #F0E8F5; --pa-marker: #E8DDF0; }

/* 記事ページ (body に acc-*)
 * バッジはメイン LP の CategoryBadge と同型 (soft 面 × 濃色文字 × c 枠)。
 * deep ベタ塗り × 白文字はどぎつくなるので使わない (DESIGN_GUIDE §1.5)。
 * 文字色は AA 確保のため deep を 15% 黒に寄せる (color-mix 非対応なら deep)。 */
body[class*="acc-"] .app-badge {
  background: var(--pa-soft);
  color: var(--pa-deep);
  color: color-mix(in srgb, var(--pa-deep) 85%, #000);
  border: 1px solid var(--pa-c);
}
body[class*="acc-"] .body h2 {
  border-left-color: var(--pa-c);
}
body[class*="acc-"] .body strong {
  background: linear-gradient(transparent 60%, var(--pa-marker) 60%);
}
body[class*="acc-"] .body blockquote {
  border-left-color: var(--pa-c);
}

/* CTA ボタン (body 単位 or ボタン単体のどちらでも)
 * ヘッダーのアクティブピルと同型: c 面 × 墨文字 (やわらかいが AA は確保)。 */
body[class*="acc-"] .app-link,
body .app-link[class*="acc-"] {
  background: var(--pa-c);
  color: #2C2218;
}
@media (hover: hover) {
  body[class*="acc-"] .app-link:hover,
  body .app-link[class*="acc-"]:hover {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--pa-c) 50%, transparent);
  }
}

/* ブログ index のアプリ別カード (バッジは記事ページと同型のソフトトーン) */
body .post[class*="acc-"] .app-badge {
  background: var(--pa-soft);
  color: var(--pa-deep);
  color: color-mix(in srgb, var(--pa-deep) 85%, #000);
  border: 1px solid var(--pa-c);
}
body .post.app-post[class*="acc-"] {
  border-left-color: var(--pa-c);
}

/* ---------- BMC コーヒー吹き出しのフォント縮小 (DESIGN_GUIDE §7) ----------
 * BMC widget は外部スクリプトが描画するため CSS 上書きの的中は不確実。
 * 命中しなければ既定 (前と同じ見た目) のままで害は無いので、考えられる
 * セレクタを列挙して保険的に当てる。確認は実機 DevTools で行う。
 * ---------------------------------------------------------- */
#bmc-wbtn-message,
#bmc-wbtn-message-wrapper,
#bmc-wbtn-message-wrapper *,
.bmc-btn-text,
.bmc-message,
[id^="bmc-wbtn-"] [class*="message"],
[class*="bmc"] [class*="message"] {
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-family: var(--font-display, system-ui, sans-serif) !important;
}

/* ---------- 前後記事ナビ / 関連記事カードのホバー ---------- */
@media (hover: hover) {
  body .post-nav-prev:not(.empty),
  body .post-nav-next:not(.empty) {
    transition: transform .2s ease, box-shadow .2s ease;
  }
  body .post-nav-prev:not(.empty):hover,
  body .post-nav-next:not(.empty):hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(61, 46, 31, 0.12);
  }
}
