/* ==========================================================
   自動生成（06_wordpress/_tools/build_wp.py）— 手で直さない
   元：05_coding/assets/css/pages/post.css
   変更点：各セレクタの頭に :is(.kk-wp, .editor-styles-wrapper) を足しただけ（値は同じ）。.kk-wp は SWELL の #body_wrap に付く
   SWELL の .post_content h2 などより詳細度を上げ、管理画面のエディタにも同じ見た目を出すため
   ========================================================== */
/* ==========================================================
   pages/post.css — 記事（投稿）テンプレート /<category>/<post>/（Figma: Design/post/PC 32:4765 ／ SP 32:4900）
   本文の列は 680（tokens container.text）。WordPress では SWELL の投稿ページ（.post_content・目次・著者情報）に当てる
   ========================================================== */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-column { width: 100%; max-width: var(--kk-container-text); margin-inline: auto; }

/* ---------- section/post-header（32:4786）：basehero・上下 64（SP 32） ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-header {
  padding-block: var(--kk-space-block);
  background: var(--kk-color-base-hero);
  border-top: 1px solid var(--kk-color-border);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-header__inner { display: flex; flex-direction: column; gap: 20px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-header__title {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h3);                   /* 34 / 51（SP 26 / 39） */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: var(--kk-lh-heading);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-header__date {
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-label);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-label);
  line-height: var(--kk-lh-label);
  color: var(--kk-color-text-faint);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-header__author {
  font-size: var(--kk-fs-caption);
  letter-spacing: var(--kk-ls-caption);
  line-height: var(--kk-lh-label);
  color: var(--kk-color-text-muted);
}

/* ---------- section/post-content（32:4800）：要素の間 24（SP 16）・下 120（SP 64） ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-body { padding-top: 0; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-body__inner { display: flex; flex-direction: column; gap: var(--kk-space-element); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-eyecatch { aspect-ratio: 16 / 9; }

/* 目次（32:4804） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 32px;
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc ol { display: flex; flex-direction: column; gap: 10px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc li {
  font-size: var(--kk-fs-small);                /* 14 / 26.6（SP 13） */
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc a {
  color: var(--kk-color-text-sub);
  transition: color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc a:hover { color: var(--kk-color-accent-light); }
/* 当たり判定 44px（tokens tapTarget・QA B-2）。見た目は変えない（目次の項目は a だけなので inline-block でも折り返しは同じ） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc a { position: relative; display: inline-block; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--kk-tap-target));
  height: max(100%, var(--kk-tap-target));
  transform: translate(-50%, -50%);
}

/* 本文（32:4810） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content { display: flex; flex-direction: column; gap: 24px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content p,
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content li {
  font-size: var(--kk-fs-body);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-body);
  color: var(--kk-color-text-sub);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content strong { font-weight: var(--kk-fw-bold); color: var(--kk-color-text); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content a { color: var(--kk-color-text-link); text-decoration: underline; text-decoration-color: var(--kk-color-text-link-line); text-underline-offset: 4px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content h2 {
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--kk-color-border-strong);
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h3-card);              /* 28 / 42（SP 26 / 39） */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: var(--kk-lh-card);
  color: var(--kk-color-text);
  scroll-margin-top: calc(var(--kk-header-h) + 24px);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h4);                   /* 20 / 32（SP 18） */
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
  color: var(--kk-color-text);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content h3::before { content: ""; flex: none; width: 16px; height: 1px; background: var(--kk-color-main); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content ul { display: flex; flex-direction: column; gap: 8px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content ul li { position: relative; padding-left: 18px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--kk-lh-body) * 0.5em);
  width: 6px;
  height: 1px;
  background: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content blockquote { margin: 0; padding: 16px 0 16px 24px; border-left: 1px solid var(--kk-color-gold); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-content blockquote p {
  font-size: var(--kk-fs-body-small);           /* 15 / 30（SP 14 / 28） */
  color: var(--kk-color-text-muted);
}

/* 著者情報（32:4830） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-author {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  background: var(--kk-color-base-sub);
  border: 1px solid var(--kk-color-border-strong);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-author__photo { flex: none; width: 96px; height: 120px; object-fit: cover; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-author__body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-author__name {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-h4);
  font-weight: var(--kk-fw-heading);
  letter-spacing: var(--kk-ls-card);
  line-height: 1.6;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-author__text {
  font-size: var(--kk-fs-small);
  letter-spacing: var(--kk-ls-body);
  line-height: var(--kk-lh-small);
  color: var(--kk-color-text-muted);
}

/* ---------- section/related（32:4839）：3列・gap 32 ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-post-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-post-header__meta { column-gap: 16px; } /* Figma は 20。実際の字幅だと 327 に入らず著者名が折り返すため */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-toc { padding: 20px; }             /* Figma SP 21（線1＋20） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-post-author { flex-direction: column; padding: 24px 20px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-post-related { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}