/* ── Design tokens (design-refresh-2026-09-09) ── */
:root {
  --bg:          #f4f4f4;
  --text:        #2b2b2b;
  --text-strong: #111111;
  --text-muted:  #6b6b6b;
  --rule:        #e0dfdb;
  --accent:      #1f5fbf;
  --wrap:        42rem;   /* 672px */
  --wrap-wide:   60rem;   /* 960px */
  --gutter:      20px;

  --font-serif: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-ui:    system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

/* ── Layout width tokens ── */
.wrap,
.wrap-wide {
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap {
  max-width: var(--wrap);
}
.wrap-wide {
  max-width: var(--wrap-wide);
}

body {
  background: var(--bg);
  color: var(--text);
}

/* ── Page title: 一覧・分類ページの h1 ── */
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.4;
  margin: 24px 0 12px;
}

/* ── Site header: single-line navigation (all pages) ── */
.site-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.site-nav-inner {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-ui);
}
.site-nav-title {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
}
.site-nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
}
.site-nav-link:hover,
.site-nav-link:focus {
  color: var(--text-strong);
}

@media (min-width: 640px) {
  .site-nav-inner {
    min-height: 56px;
  }
}

/* ── Site footer ── */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.site-footer-inner {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: 32px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.site-footer-copy {
  margin: 0;
}
.site-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer-links a:hover,
.site-footer-links a:focus {
  color: var(--text-strong);
}
.site-footer-social {
  display: flex;
  align-items: center;
}
.site-footer-social .ananke-social-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--text-muted);
}
.site-footer-social .ananke-social-link .icon {
  display: inline-flex;
}
/* テーマの .ananke-socials a .icon svg（0,2,2）に勝つため詳細度を上げる */
.site-footer-social .ananke-socials a .icon svg {
  width: 16px;
  height: 16px;
  fill: var(--text-muted);
}

/* ── Summary rows ── */
.summary-entry {
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}
.summary-entry-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.summary-image-link {
  display: block;
  flex: 0 0 120px;
  width: 120px;
  height: 68px;
  overflow: hidden;
}
.summary-img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.summary-entry-content {
  flex: 1 1 auto;
  min-width: 0;
}
.entry-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--text-strong);
}
.entry-title a {
  color: inherit;
  text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus {
  color: var(--accent);
}
.entry-meta {
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.entry-meta a {
  color: inherit;
  text-decoration: none;
}
.entry-meta a:hover,
.entry-meta a:focus {
  color: var(--accent);
}

/* ── Home / list / taxonomy blocks ── */
.home-intro {
  padding-top: 48px;
  padding-bottom: 48px;
}
.home-title {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.4;
}
.home-tagline {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: .9375rem;
  line-height: 1.5;
}
.section-label {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
}
.recent-posts {
  padding-top: 32px;
}
.more-posts {
  padding-top: 16px;
  padding-bottom: 48px;
  font-family: var(--font-ui);
  font-size: 13px;
}
.more-posts a,
.category-links a,
.category-nav a,
.taxonomy-list a {
  color: var(--text);
  text-decoration: none;
}
.more-posts a:hover,
.more-posts a:focus,
.category-links a:hover,
.category-links a:focus,
.category-nav a:hover,
.category-nav a:focus,
.taxonomy-list a:hover,
.taxonomy-list a:focus {
  color: var(--accent);
}
.category-nav {
  padding-top: 16px;
  padding-bottom: 32px;
}
.category-list,
.taxonomy-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--font-ui);
  font-size: 14px;
}
.category-count,
.taxonomy-count {
  color: var(--text-muted);
  font-size: 12px;
}
.category-links {
  margin: 24px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
}
.list-intro {
  padding-top: 8px;
  padding-bottom: 24px;
}
.post-list {
  padding-bottom: 32px;
}
.post-year + .post-year {
  margin-top: 48px;
}
.taxonomy-list {
  margin-top: 32px;
}
.taxonomy-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 15px;
}
.not-found {
  padding-top: 96px;
  padding-bottom: 96px;
}
.not-found h1 {
  margin: 0 0 24px;
  color: var(--text-strong);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
}
.not-found a {
  color: var(--accent);
}

/* Contact form honeypot: hidden visually and from assistive technology. */
.contact-form-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* YMYL disclosure */
.ymyl-disclosure {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #5d4037;
  border-radius: 0;
}
/* 記事本文の p ルール（.single .post-content p）に勝つため詳細度を上げる */
.single .post-content .ymyl-disclosure p {
  margin: 0;
}

/* Affiliate disclosure */
.affiliate-disclosure {
  font-size: 0.75rem;
  color: #999;
  margin: 2rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid #eee;
}

/* Tables */
article table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}
article th,
article td {
  border-bottom: 1px solid var(--rule);
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: 0.5rem 0.75rem;
  text-align: left;
  overflow-wrap: anywhere; /* 長いトークンでテーブルの最小幅がカラムを超え横スクロールになるのを防ぐ */
}
article th {
  background: transparent;
  border-bottom: 2px solid var(--rule);
  font-weight: 600;
}
article tr:nth-child(even) {
  background: transparent;
}

/* ── 記事本文タイポグラフィ（design-refresh-2026-09-09 T4/T8）──
   ブレークポイントは 640px の1本のみ。768px メディアクエリは廃止。
   セレクタは Ananke に詳細度で勝つように .single .post-content xxx とする
   （旧 `.single article h1/h2/h3` は .single 配下に article が存在せず未適用だった）。 */
.single .post-content {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.85;
  color: var(--text);
  letter-spacing: .02em;
}

/* 本文とサイドバーを固定幅の2列にする。asideが無い記事も1列目を維持する */
.single {
  display: grid;
  grid-template-columns: minmax(0, 42rem) 15rem;
  gap: 48px;
  max-width: var(--wrap-wide);
  margin-inline: auto;
}
.single .post-content,
.single aside {
  min-width: 0;
}
.single aside {
  margin: 0;
}

/* 行間: Ananke の .nested-copy-line-height（p/ol/ul = 1.5）に直接指定で勝つ */
.single .post-content p,
.single .post-content li {
  line-height: 1.85;
}

.single .post-content p {
  margin: 0 0 1.6em;
}

/* 記事タイトル（h1）とセクション見出し。余白は上:下 = 4:1 */
.single .post-content h1 {
  font-size: 2.125rem; /* 34px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong);
  letter-spacing: 0;
  margin: 0 0 12px;
}

.single .post-content h2 {
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-strong);
  letter-spacing: 0;
  margin: 48px 0 12px;
}

.single .post-content h3 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-strong);
  letter-spacing: 0;
  margin: 32px 0 8px;
}

/* リスト */
.single .post-content ul,
.single .post-content ol {
  padding-left: 1.4em;
  margin: 1.6em 0;
}
.single .post-content li {
  margin-bottom: .5em;
}
.single .post-content li::marker {
  color: var(--text-muted);
}

/* 本文中リンク: 色は本文と同じ、薄い下線。hover でアクセント色 */
.single .post-content a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #b9b9b9;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.single .post-content a:hover,
.single .post-content a:focus {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* 引用: 本文と同サイズ（旧 .lh-copy blockquote の .875em を廃止） */
.single .post-content blockquote {
  font-size: 1em;
  color: #555;
  border-left: 2px solid #d5d5d5;
  padding-left: 20px;
  margin: 32px 0;
}
.single .post-content blockquote p:last-child {
  margin-bottom: 0;
}

/* インラインコード */
.single .post-content code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: rgba(0, 0, 0, .05);
  padding: .1em .35em;
  border-radius: 2px;
  /* anywhere は min-content も縮める（break-word は縮めない）。
     長いURL・環境変数が段落・テーブルセル・flexアイテムの最小幅を押し広げて
     横スクロールを出すのを防ぐ */
  overflow-wrap: anywhere;
}

/* コードブロック: Ananke の overflow: scroll（常時スクロールバー領域）を auto に */
.single .post-content pre {
  padding: 16px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  line-height: 1.6;
  background: #272822;
  border-radius: 0;
  margin: 32px 0;
  font-family: var(--font-mono);
}
.single .post-content pre code {
  display: block;
  padding: 0; /* Ananke の pre code { padding: 1.5em } をリセット（padding は pre 側で持つ） */
  font-size: 14.5px;
  line-height: 1.6;
  background: transparent;
  border-radius: 0;
  white-space: pre;
}

/* アイキャッチ: 角丸0・自然比率。寸法属性がある画像は CLS を抑える */
.single .post-content .featured-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
/* ローカル実寸画像: トリミングせず自然比率（実寸属性で CLS 0） */
.single .post-content .featured-natural {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* メタ（日付・読了時間）: tracked 解除、13px、UI フォント */
.single .post-content .post-meta {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: 0;
  margin: 0 0 24px;
}
.post-meta-item {
  margin-left: 12px;
}

/* ── パンくず（T9）: 現在ページ名は出さない。ホーム / 記事一覧 の2段 ── */
.breadcrumbs {
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: 0;
  padding-top: 8px;
  padding-bottom: 8px; /* ph3 の 16px を上書き。高さ ≈ 34px に抑える */
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.breadcrumbs ol {
  margin: 0; /* UA デフォルトの margin-block: 1em（12px×2）を消す */
}
.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus {
  color: var(--text-strong);
}
@media (width < 1024px) {
  .breadcrumbs {
    padding-inline: var(--gutter);
  }
}

/* ── モバイルTOC（T9）: <details> 初期閉。グレーボックス廃止 ── */
.toc-mobile {
  display: block;
  margin: 0 0 24px;
  font-family: var(--font-ui);
}
.toc-mobile summary {
  padding: 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .08em;
  cursor: pointer;
}
.toc-mobile #TableOfContents ul {
  margin: 0 0 16px;
  padding-left: 16px;
  list-style: none;
}
.toc-mobile #TableOfContents ul li {
  margin: 8px 0;
  line-height: 1.7;
}
.toc-mobile #TableOfContents a {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  text-decoration: none;
}
.toc-mobile #TableOfContents a:hover,
.toc-mobile #TableOfContents a:focus {
  color: var(--accent);
}

/* ── サイドバー（T9）: グレーボックス廃止、左1px罫線のみ ── */
.aside-block {
  border-left: 1px solid var(--rule);
  padding-left: 24px;
  font-family: var(--font-ui);
}
.aside-block + .aside-block {
  margin-top: 32px;
}
.aside-label {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .08em;
}
.aside-block a {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  text-decoration: none;
}
.aside-block a:hover,
.aside-block a:focus {
  color: var(--accent);
}
.aside-block ul {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}
.aside-block li {
  margin: 8px 0;
  line-height: 1.7;
}
/* Ananke の #TableOfContents ul li（margin-bottom 1em）に勝つため ID セレクタ込みで指定 */
.aside-block #TableOfContents ul li {
  margin: 8px 0;
}

/* ── 記事末尾 ── */
.single .post-content .post-tags {
  margin-top: 48px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}
.single .post-content .post-tags a {
  color: var(--text-muted);
  text-decoration: none;
}
.single .post-content .post-tags a:hover,
.single .post-content .post-tags a:focus {
  color: var(--accent);
}
.post-tags-label {
  margin-right: 4px;
}
.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.post-nav-item {
  min-width: 0;
  text-align: left;
}
.post-nav-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.post-nav-item a {
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
}

/* 本文リンクの下線ルールより優先する記事末尾のUIリンク */
.single .post-content .post-nav-item a,
.single .post-content .share-btn {
  color: var(--text);
  text-decoration: none;
}
.single .post-content .share-btn {
  color: var(--text-muted);
}
.post-nav-item a:hover,
.post-nav-item a:focus {
  color: var(--accent);
}

/* ── モバイル (<640px): タイポグラフィの縮小 ── */
@media (max-width: 639.98px) {
  .single .post-content {
    font-size: 17px;
  }
  .single .post-content h1 {
    font-size: 1.5rem;   /* 24px */
  }
  .single .post-content h2 {
    font-size: 1.25rem;  /* 20px */
  }
  .single .post-content h3 {
    font-size: 1.125rem; /* 18px */
  }
  .single .post-content pre code {
    font-size: 13.5px;
  }
  .single .post-content .post-meta {
    font-size: 12px;
  }
  .single .post-content .reference-links {
    font-size: 13px;
  }
  .summary-image-link {
    flex-basis: 96px;
    width: 96px;
    height: 54px;
  }
  .entry-title {
    font-size: 18px;
  }
  .entry-meta {
    font-size: 12px;
  }
  .post-nav {
    grid-template-columns: 1fr;
  }
  /* pre をカラム外へ広げる */
  .single .post-content pre {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

@media (width < 1024px) {
  .single {
    grid-template-columns: 1fr;
    padding-inline: var(--gutter);
  }
  .single aside.aside-toc-only {
    display: none;
  }
  /* asideは関連記事のために残し、TOCだけは本文前のモバイル版に限定する */
  .single aside .toc-aside-block {
    display: none;
  }
  /* 非表示TOCに隣接する関連記事の余分な32pxを除く */
  .single aside .toc-aside-block + .aside-block {
    margin-top: 0;
  }
}

@media (width >= 1024px) {
  .toc-mobile {
    display: none;
  }
}

/* Share links */
.share-buttons {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted);
}
.share-btn {
  display: inline-block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.share-btn:hover,
.share-btn:focus {
  color: var(--accent);
}

/* Reference links (smaller text for 参考 sections) */
.reference-links {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
}
/* 記事本文の h2 ルール（.single .post-content h2）に勝つため詳細度を上げる */
.single .post-content .reference-links h2 {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0 0 0.5em;
}