/*
Theme Name: Karada Good
Theme URI: https://karada-good.net/
Author: Fujishima Masaki
Description: karada-good.net のためのオリジナルテーマ。R・データ解析の記事とコードが読みやすいことを最優先に、プラグインなしでシンタックスハイライト・コードコピー・OGP・関連記事を備えたシンプルなテーマ。
Version: 1.8.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: karada-good
*/

/* ==========================================================
   1. デザイントークン
   ========================================================== */
:root {
  --kg-ink: #24312a;          /* 本文(深い常緑) */
  --kg-ink-soft: #3c4a42;
  --kg-muted: #66756c;        /* メタ情報 */
  --kg-paper: #ffffff;
  --kg-bg: #f6f8f3;           /* 生成りがかった画面背景 */
  --kg-line: #e1e8dd;
  --kg-accent: #3f9d63;       /* 若葉グリーン(からだにいいもの) */
  --kg-accent-dark: #2c7a49;
  --kg-accent-tint: #eaf5ec;
  --kg-code-bg: #1b2228;      /* コードブロック(ダーク固定) */
  --kg-code-ink: #e6edf3;
  --kg-code-head: #10161a;

  --kg-font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", "Yu Gothic Medium", YuGothic, Meiryo, system-ui, sans-serif;
  --kg-font-mono: ui-monospace, "SF Mono", Consolas, Menlo,
    "Noto Sans Mono", monospace;

  --kg-max: 1120px;
  --kg-side: 300px;
  --kg-radius: 10px;
}

/* ==========================================================
   2. リセット・ベース
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--kg-font-body);
  font-feature-settings: "palt" 1;
  color: var(--kg-ink);
  background: var(--kg-bg);
  line-height: 1.9;
  font-size: 17px; /* 「Karada Good」設定から変更可能 */
  word-break: break-word;
}
img { max-width: 100%; height: auto; }
a { color: var(--kg-accent-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kg-accent-dark); }
:focus-visible { outline: 2px solid var(--kg-accent); outline-offset: 2px; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden;
}

/* ==========================================================
   3. ヘッダー — R コンソール風プロンプトがシグネチャー
   ========================================================== */
.kg-header {
  background: var(--kg-paper);
  border-bottom: 1px solid var(--kg-line);
  position: sticky; top: 0; z-index: 50;
}
.kg-header__inner {
  max-width: var(--kg-max);
  margin: 0 auto;
  padding: 0 20px;
  display: flex; align-items: center; gap: 24px;
  min-height: 60px;
}
.kg-brand {
  font-family: var(--kg-font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--kg-ink);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.kg-brand__logo { height: 34px; width: auto; display: block; }
.kg-brand img { max-height: 36px; width: auto; }
.kg-tagline {
  font-size: 0.78rem; color: var(--kg-muted);
  margin: 0; display: none;
}
@media (min-width: 900px) { .kg-tagline { display: block; } }

/* ナビゲーション */
.kg-nav { margin-left: auto; }
.kg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.kg-nav a {
  display: block; padding: 8px 12px;
  font-size: 0.9rem; text-decoration: none; color: var(--kg-ink-soft);
  border-radius: 6px;
}
.kg-nav a:hover { background: var(--kg-accent-tint); color: var(--kg-accent-dark); }
.kg-nav-toggle {
  margin-left: auto;
  display: none;
  background: none; border: 1px solid var(--kg-line); border-radius: 6px;
  padding: 8px 10px; font-family: var(--kg-font-mono); font-size: 0.85rem;
  cursor: pointer; color: var(--kg-ink);
}
@media (max-width: 767px) {
  .kg-nav-toggle { display: block; }
  .kg-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kg-paper); border-bottom: 1px solid var(--kg-line);
    padding: 8px 16px 16px;
  }
  .kg-nav.is-open { display: block; }
  .kg-nav ul { flex-direction: column; }
}

/* 検索フォーム */
.kg-search { display: flex; gap: 6px; }
.kg-search input[type="search"] {
  border: 1px solid var(--kg-line); border-radius: 6px;
  padding: 7px 10px; font-size: 0.9rem; font-family: inherit;
  width: 100%; background: var(--kg-paper);
}
.kg-search button {
  border: none; border-radius: 6px;
  background: var(--kg-accent-dark); color: #fff;
  font-family: var(--kg-font-mono); font-size: 0.85rem;
  padding: 7px 14px; cursor: pointer;
}
.kg-search button:hover { filter: brightness(0.88); }

/* ==========================================================
   4. レイアウト
   ========================================================== */
.kg-layout {
  max-width: var(--kg-max);
  margin: 32px auto 64px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--kg-side);
  gap: 44px;
  align-items: start;
}
@media (max-width: 991px) {
  .kg-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   5. 記事カード(一覧)
   ========================================================== */
.kg-archive-title {
  font-size: 1.15rem; margin: 0 0 20px;
  font-family: var(--kg-font-mono);
  color: var(--kg-ink-soft);
}
.kg-archive-title::before { content: "# "; color: var(--kg-accent); }

.kg-card {
  background: var(--kg-paper);
  border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius);
  margin-bottom: 20px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kg-card:hover { border-color: var(--kg-accent); box-shadow: 0 2px 10px rgba(63, 157, 99, .10); }
.kg-card a.kg-card__link {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  text-decoration: none; color: inherit;
  padding: 18px;
}
.kg-card__thumb { border-radius: 6px; overflow: hidden; background: var(--kg-bg); align-self: center; }
.kg-card__thumb img { display: block; width: 100%; height: 138px; object-fit: cover; }
.kg-card__title { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.6; color: var(--kg-ink); }
.kg-card:hover .kg-card__title { color: var(--kg-accent-dark); }
.kg-card__excerpt { margin: 0; font-size: 0.88rem; color: var(--kg-muted); line-height: 1.8; }
.kg-meta {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  font-family: var(--kg-font-mono);
  font-size: 0.75rem; color: var(--kg-muted);
  margin-bottom: 8px;
}
.kg-chip {
  display: inline-block;
  background: var(--kg-accent-tint); color: var(--kg-accent-dark);
  border-radius: 999px; padding: 1px 12px;
  text-decoration: none; font-size: 0.75rem;
  font-family: var(--kg-font-mono);
}
a.kg-chip:hover { background: var(--kg-accent-dark); color: #fff; }
@media (max-width: 599px) {
  .kg-card a.kg-card__link { grid-template-columns: 1fr; gap: 12px; }
  .kg-card__thumb img { height: auto; aspect-ratio: 16 / 9; }
}

/* ページネーション */
.kg-pagination { display: flex; justify-content: center; margin-top: 32px; }
.kg-pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.kg-pagination .page-numbers {
  font-family: var(--kg-font-mono);
  border: 1px solid var(--kg-line); border-radius: 6px;
  background: var(--kg-paper);
  padding: 6px 13px; text-decoration: none; font-size: 0.9rem; color: var(--kg-ink);
}
.kg-pagination .page-numbers.current { background: var(--kg-accent-dark); border-color: var(--kg-accent-dark); color: #fff; }
.kg-pagination a.page-numbers:hover { border-color: var(--kg-accent); color: var(--kg-accent-dark); }

/* ==========================================================
   6. 記事本文 — 読みやすさの中核
   ========================================================== */
.kg-article {
  background: var(--kg-paper);
  border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius);
  padding: clamp(20px, 4vw, 44px);
}
.kg-article__header { margin-bottom: 28px; }
.kg-article__title {
  font-size: clamp(1.45rem, 3vw, 1.8rem);
  line-height: 1.55;
  margin: 8px 0 12px;
}
.kg-breadcrumb {
  font-size: 0.78rem; color: var(--kg-muted);
  font-family: var(--kg-font-mono);
  margin-bottom: 4px;
}
.kg-breadcrumb a { color: var(--kg-muted); text-decoration: none; }
.kg-breadcrumb a:hover { color: var(--kg-accent-dark); }

.kg-content {
  font-size: 1rem;
  line-height: 1.9;
}
/* ブロック間の隙間は一行分(line-height 1.9 の半分ずつ上下に付く行送りと
   合わせて、視覚的にちょうど一行空きになる値)*/
.kg-content > * + * { margin-top: 1em; }
.kg-content p { margin: 0; }
.kg-content p:empty { display: none; }
/* スペーサーブロックは高さ指定(初期値100px)に関わらず一行分に統一 */
.kg-content .wp-block-spacer { height: 1.9em !important; margin: 0 !important; }
/* 連続<br>による縦空きも一行以内に */
.kg-content br + br { display: none; }
/* 広告プラグイン(The Moneytizer等)が段落ごとに挿入する
   空プレースホルダの縦空きを抑制(広告が実際に入れば表示される)*/
.kg-content > [class*="lazy-loading-container"] {
  margin-top: 0 !important;
  min-height: 0 !important;
}
.kg-content [class*="lazy-loading-container"] iframe[src=""],
.kg-content [class*="lazy-loading-container"] iframe[style*="height: 20px"] {
  display: none;
}

/* 見出し:R Markdown 記法の ## をシグネチャーとして表示 */
.kg-content h4 {
  line-height: 1.6;
  scroll-margin-top: 84px;
}
.kg-content h2 {
  font-size: 1.3rem;
  margin-top: 2.4em;
  background: var(--kg-h2-bg, var(--kg-accent-tint));
  color: var(--kg-h2-text, var(--kg-ink));
  border-left: 6px solid var(--kg-accent);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
}
.kg-content h3 {
  font-size: 1.15rem;
  margin-top: 2.1em;
  color: var(--kg-ink);
  border-left: 4px solid var(--kg-accent);
  border-bottom: 2px solid var(--kg-line);
  padding: 6px 2px 6px 13px;
}

.kg-content h4 {
  font-size: 1.02rem;
  margin-top: 2em;
  padding-left: 13px;
  border-left: 3px solid var(--kg-line);
  color: var(--kg-ink-soft);
}

.kg-content ul, .kg-content ol { padding-left: 1.6em; }
.kg-content li { margin: 0.35em 0; }
.kg-content blockquote {
  margin: 1.6em 0; padding: 14px 20px;
  border-left: 4px solid var(--kg-accent);
  background: var(--kg-bg); border-radius: 0 6px 6px 0;
  color: var(--kg-ink-soft);
}
.kg-content hr { border: none; border-top: 1px dashed var(--kg-line); margin: 2.5em 0; }
.kg-content figure { margin-left: 0; margin-right: 0; }
.kg-content figcaption { font-size: 0.8rem; color: var(--kg-muted); text-align: center; margin-top: 6px; }
.kg-content img { border-radius: 6px; }

/* 本文中の外部リンク(別タブ)には小さな矢印を付けて外部と分かるように
   (ブログカード・アフィリエイトボタンは除外) */
.kg-content a[target="_blank"]:not(.kg-blogcard):not(.kg-afbtn)::after {
  content: "\2197"; /* ↗ */
  font-size: 0.72em;
  margin-left: 2px;
  vertical-align: super;
  opacity: 0.65;
}

/* インラインコード */
.kg-content :not(pre) > code {
  font-family: var(--kg-font-mono);
  font-size: 0.88em;
  background: var(--kg-accent-tint);
  color: var(--kg-accent-dark);
  border-radius: 4px;
  padding: 0.12em 0.42em;
}

/* ==========================================================
   7. コードブロック(Prism + コピー機能)
   ========================================================== */
.kg-codeblock {
  margin: 1.6em 0;
  border-radius: var(--kg-radius);
  overflow: hidden;
  border: 1px solid #2c3640;
  font-size: 0.88rem;
}
.kg-codeblock__head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--kg-code-head);
  padding: 8px 12px 8px 16px;
}
.kg-codeblock__lang {
  font-family: var(--kg-font-mono);
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: #7fb3a8; text-transform: uppercase;
}
.kg-copy {
  font-family: var(--kg-font-mono); font-size: 0.78rem;
  background: transparent; color: #9fb0ba;
  border: 1px solid #3a4650; border-radius: 5px;
  padding: 6px 14px; min-height: 32px; min-width: 9.5em; /* タップしやすい大きさ+文言変化で幅が揺れないよう固定 */
  text-align: center;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.kg-copy:hover, .kg-copy:focus-visible { color: #fff; border-color: #7fb3a8; }
.kg-copy:active { background: rgba(255, 255, 255, 0.08); }
.kg-copy.is-done { color: #7ee2b8; border-color: #7ee2b8; background: rgba(126, 226, 184, 0.12); }

.kg-content pre,
pre[class*="language-"] {
  /* リガチャを無効化:<- が矢印(←)に合字されるのを防ぐ */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  margin: 0;
  background: var(--kg-code-bg);
  color: var(--kg-code-ink);
  padding: 18px;
  overflow-x: auto;
  line-height: 1.75;
  font-family: var(--kg-font-mono);
  tab-size: 2;
}
.kg-content pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* 横スクロール可能なことを示す右端のフェード
   (実際にスクロールできる時だけJSが .has-scroll を付与し、末端で消える) */
.kg-codeblock { position: relative; }
.kg-codeblock::after {
  content: "";
  position: absolute; top: 37px; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, transparent, var(--kg-code-bg));
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.kg-codeblock.has-scroll::after { opacity: 1; }

/* Prism トークン配色(テーマ内蔵・ダーク) */
.token.comment, .token.prolog, .token.cdata { color: #7d8b96; font-style: italic; }
.token.punctuation { color: #aebac4; }
.token.operator, .token.entity { color: #8fd8c7; }
.token.keyword, .token.atrule, .token.rule { color: #7cb7ff; }
.token.function { color: #ffd479; }
.token.string, .token.char, .token.attr-value { color: #9ce29c; }
.token.number, .token.boolean, .token.constant { color: #f2a3c0; }
.token.property, .token.tag, .token.symbol, .token.selector { color: #8fd8c7; }
.token.class-name, .token.builtin { color: #ffb38a; }
.token.important, .token.bold { font-weight: 700; }
.token.italic { font-style: italic; }

/* ==========================================================
   8. 表(オプション表:引数・意味・初期値)
   ========================================================== */
.kg-content .wp-block-table, .kg-table-scroll { overflow-x: auto; margin: 1.6em 0; }
.kg-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  line-height: 1.7;
}
.kg-content table th, .kg-content table td {
  border: 1px solid var(--kg-line);
  padding: 9px 13px;
  text-align: left;
  vertical-align: top;
}
.kg-content table thead th, .kg-content table tr:first-child th {
  background: var(--kg-accent-tint);
  color: var(--kg-accent-dark);
  font-family: var(--kg-font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
}
.kg-content table tbody tr:nth-child(even) { background: #fafcfc; }
.kg-content table td:first-child { font-family: var(--kg-font-mono); font-size: 0.85rem; white-space: nowrap; }

/* ==========================================================
   9. ブログカード([blogcard] / 内部リンク埋め込み)
   ========================================================== */
.kg-blogcard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  border: 1px solid var(--kg-bc-border, var(--kg-line));
  border-radius: var(--kg-bc-radius, var(--kg-radius));
  padding: 14px;
  text-decoration: none; color: inherit;
  background: var(--kg-bc-bg, var(--kg-paper));
  transition: border-color .15s ease;
}
.kg-blogcard:hover { border-color: var(--kg-bc-hover, var(--kg-accent)); }
.kg-blogcard__thumb img { display: block; width: 100%; height: 95px; object-fit: cover; border-radius: 5px; }
.kg-blogcard__label {
  font-family: var(--kg-font-mono); font-size: 0.7rem;
  color: var(--kg-bc-label-color, var(--kg-accent)); letter-spacing: 0.06em;
}
.kg-blogcard__title { font-size: 0.95rem; font-weight: 700; margin: 2px 0 4px; line-height: 1.6; }
.kg-blogcard__excerpt { font-size: 0.8rem; color: var(--kg-muted); margin: 0; line-height: 1.7; }
@media (max-width: 599px) {
  .kg-blogcard { grid-template-columns: 1fr; }
  .kg-blogcard__thumb img { height: auto; aspect-ratio: 16/9; }
}
.kg-content .wp-block-embed { border: 1px solid var(--kg-line); border-radius: var(--kg-radius); padding: 14px; }
.kg-blogcard--ext .kg-blogcard__thumb img { object-fit: contain; background: #fff; }
.kg-blogcard__url {
  display: block;
  font-family: var(--kg-font-mono);
  font-size: 0.72rem;
  color: var(--kg-muted);
  margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================
   11. 記事フッター・関連記事・前後ナビ
   ========================================================== */
.kg-article__foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--kg-line); }
.kg-related { margin-top: 36px; }
.kg-related h2 {
  font-size: 1.05rem;
  background: var(--kg-accent-tint);
  border-left: 5px solid var(--kg-accent);
  padding: 8px 14px;
  border-radius: 0 6px 6px 0;
  margin: 0;
}
.kg-related__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  margin-top: 14px;
}
@media (max-width: 599px) { .kg-related__grid { grid-template-columns: 1fr; } }
.kg-related__item {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--kg-line); border-radius: var(--kg-radius);
  overflow: hidden; background: var(--kg-paper);
}
.kg-related__item:hover { border-color: var(--kg-accent); }
.kg-related__item img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.kg-related__item span { display: block; padding: 10px 12px; font-size: 0.85rem; line-height: 1.6; }

.kg-postnav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px;
}
.kg-postnav a {
  display: block; text-decoration: none;
  border: 1px solid var(--kg-line); border-radius: var(--kg-radius);
  padding: 12px 14px; font-size: 0.85rem; color: var(--kg-ink);
  background: var(--kg-paper);
}
.kg-postnav a:hover { border-color: var(--kg-accent); }
.kg-postnav .kg-postnav__dir {
  display: block; font-family: var(--kg-font-mono);
  font-size: 0.72rem; color: var(--kg-muted); margin-bottom: 4px;
}
.kg-postnav__next { text-align: right; }
@media (max-width: 599px) { .kg-postnav { grid-template-columns: 1fr; } }

/* ==========================================================
   12. サイドバー
   ========================================================== */
.kg-sidebar__sticky { position: sticky; top: 84px; }
.kg-widget {
  background: var(--kg-paper);
  border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}
.kg-widget .widget-title, .kg-widget h2, .kg-widget h3 {
  font-size: 0.92rem; margin: 0 0 12px;
  font-family: var(--kg-font-mono); color: var(--kg-ink-soft);
}
.kg-widget .widget-title::before, .kg-widget h2::before { content: "# "; color: var(--kg-accent); }
.kg-widget ul { list-style: none; margin: 0; padding: 0; }
.kg-widget li { padding: 6px 0; border-bottom: 1px dashed var(--kg-line); }
.kg-widget li:last-child { border-bottom: none; }
.kg-widget a { text-decoration: none; color: var(--kg-ink-soft); }
.kg-widget a:hover { color: var(--kg-accent-dark); }
@media (max-width: 991px) { .kg-sidebar__sticky { position: static; } }

/* ==========================================================
   13. コメント・フッター・404
   ========================================================== */
.kg-comments { margin-top: 36px; }
.kg-comments .comment-list { list-style: none; padding: 0; }
.kg-comments .comment { border: 1px solid var(--kg-line); border-radius: var(--kg-radius); padding: 14px 16px; margin-bottom: 14px; }
.kg-comments textarea, .kg-comments input[type="text"], .kg-comments input[type="email"], .kg-comments input[type="url"] {
  width: 100%; border: 1px solid var(--kg-line); border-radius: 6px; padding: 9px 11px; font-family: inherit; font-size: 0.92rem;
}
.kg-comments .submit {
  background: var(--kg-accent); color: #fff; border: none; border-radius: 6px;
  padding: 10px 22px; font-size: 0.92rem; cursor: pointer; font-family: var(--kg-font-mono);
}
.kg-comments .submit:hover { background: var(--kg-accent-dark); }

.kg-footer {
  background: var(--kg-ink);
  color: #b8c4ca;
  margin-top: 40px;
}
.kg-footer__inner {
  max-width: var(--kg-max); margin: 0 auto; padding: 28px 20px;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  font-size: 0.82rem;
}
.kg-footer a { color: #dbe6ea; text-decoration: none; }
.kg-footer a:hover { color: #fff; text-decoration: underline; }
.kg-footer__copy { font-family: var(--kg-font-mono); }
.kg-footer nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }

.kg-404 { text-align: center; padding: 60px 20px; }
.kg-404 .kg-404__code { font-family: var(--kg-font-mono); font-size: 3rem; color: var(--kg-accent); margin: 0; }
.kg-404 p { color: var(--kg-muted); }


/* ==========================================================
   14. 収益化(広告枠・PR表記・アフィリエイトボタン)
   ========================================================== */
.kg-ad {
  margin: 24px 0;
  text-align: center;
}
.kg-ad__label {
  display: block;
  font-size: 0.68rem;
  color: var(--kg-muted);
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.kg-ad-widget { margin: 0 auto; max-width: 100%; overflow: hidden; }
.kg-ad img { border-radius: 6px; }

/* アフィリエイトボタン [afbtn] */
.kg-btnrow {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin: 1.6em 0;
}
.kg-afbtn {
  display: inline-block;
  min-width: 220px;
  text-align: center;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.kg-afbtn:hover {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  filter: brightness(1.06);
}
.kg-afbtn--green  { background: linear-gradient(180deg, #4aae70, var(--kg-accent-dark)); }
.kg-afbtn--amazon { background: linear-gradient(180deg, #ffae34, #f08804); }
.kg-afbtn--rakuten{ background: linear-gradient(180deg, #d43c3c, #bf0000); }
.kg-afbtn--yahoo  { background: linear-gradient(180deg, #ff5c74, #ff0033); }
@media (max-width: 599px) {
  .kg-afbtn { width: 100%; }
}


/* SNSシェアボタン */
.kg-share {
  margin: 32px 0 8px;
  text-align: center;
}
.kg-share__label {
  display: block;
  font-family: var(--kg-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--kg-muted);
  margin-bottom: 10px;
}
.kg-share__btns {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.kg-share__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px;
  border: none; border-radius: 999px;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  transition: transform .1s ease, filter .1s ease;
}
.kg-share__btn:hover { transform: translateY(1px); filter: brightness(1.08); color: #fff; }
.kg-share__btn b { font-size: 0.95rem; font-style: normal; }
.kg-share__btn--x      { background: #0f1419; }
.kg-share__btn--hatena { background: #0078a3; } /* 白文字とのコントラスト比 約5:1(視認性のため通常より濃いはてなブルー) */
.kg-share__btn--pocket { background: #ef4056; }
.kg-share__btn--copy   { background: var(--kg-accent); }
.kg-share__btn--copy.is-done { background: var(--kg-accent-dark); }
@media (max-width: 599px) {
  .kg-share__btn { flex: 1 1 40%; justify-content: center; }
}

/* 人気記事ランキング */
.kg-popular-list { list-style: none; margin: 0; padding: 0; }
.kg-popular-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--kg-line);
}
.kg-popular-list li:last-child { border-bottom: none; }
.kg-popular-rank {
  font-family: var(--kg-font-mono); font-weight: 700;
  color: var(--kg-accent); min-width: 1.4em; text-align: center;
  font-size: 0.9rem;
}
.kg-popular-list a { color: var(--kg-ink-soft); text-decoration: none; font-size: 0.9rem; line-height: 1.6; }
.kg-popular-list a:hover { color: var(--kg-accent-dark); }

/* サードパーティの多言語切り替えプラグイン等が挿入する要素を
   ヘッダー・フッターのメニュー領域では非表示にする(例:「English」表示) */
.kg-nav .universally-language-switcher,
.kg-nav [class*="lang-switcher"],
.kg-nav [class*="language-switcher"],
.kg-footer .universally-language-switcher,
.kg-footer [class*="lang-switcher"],
.kg-footer [class*="language-switcher"] {
  display: none !important;
}

/* サイドバー広告のはみ出し防止 */
.kg-sidebar .kg-ad { margin: 0 0 20px; }


/* ==========================================================
   15. ユーザー体験(画像拡大・トップへ戻る・読了バー)
   ========================================================== */
/* 本文画像:クリックで拡大できることを示す */
.kg-zoomable { cursor: zoom-in; }

/* ライトボックス(画像の拡大表示) */
.kg-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 26, 23, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  cursor: zoom-out;
  animation: kg-fadein .15s ease;
}
.kg-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
@keyframes kg-fadein { from { opacity: 0; } to { opacity: 1; } }

/* トップへ戻るボタン */
.kg-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: var(--kg-accent-dark); color: #fff;
  font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.kg-totop.is-visible { opacity: 0.9; visibility: visible; transform: translateY(0); }
.kg-totop:hover { opacity: 1; }

/* 記事の読了プログレスバー(ヘッダー下部に細く表示) */
.kg-progress {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 100%; height: 3px;
  background: var(--kg-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* トップへ戻るボタン */
/* 印刷時はコードを白背景に */
@media print {
  .kg-header, .kg-sidebar, .kg-footer, .kg-related, .kg-postnav, .kg-copy, .kg-ad, .kg-share, .kg-totop, .kg-progress { display: none !important; }
  .kg-content pre { background: #fff; color: #000; border: 1px solid #999; }
}