/* ============================================================
   40-native.css — Xwriteネイティブ部品の見た目寄せ
   目次はネイティブ(.toc_block)を採用したため、旧 .nai-toc 用の指定を
   ネイティブDOMへ読み替える。sticky目次(サイドバー)はXwriteに無いので自前のまま。
   パンくず(.breadcrumbs)・関連記事(.articleList)・前後記事(.articlePagerUnit)も
   ここで旧デザインへ寄せる。
   ============================================================ */

/* --- 8. 目次（本文内＋sticky） ----------------------------------------- */
.nai-toc{ margin:var(--nai-s5) 0; padding:20px 24px; background:var(--nai-paper);
  border:1px solid var(--nai-rule-mid); }
.nai-toc summary{ display:flex; align-items:baseline; gap:12px; list-style:none;
  cursor:pointer; padding-bottom:10px; border-bottom:1px solid #D8CFBA;
  font-size:14px; font-weight:600; letter-spacing:.1em; }
.nai-toc summary::-webkit-details-marker{ display:none; }
.nai-toc summary small{ font-family:var(--nai-font-mono); font-size:9px; font-weight:400;
  letter-spacing:.18em; color:var(--nai-meta-2); }
.nai-toc summary::after{ content:"＋"; margin-left:auto; color:var(--nai-accent); }
.nai-toc[open] summary::after{ content:"−"; }
.nai-toc ol{ margin:14px 0 0; padding-left:22px; font-size:13.5px; line-height:2.15; }
.nai-toc ol ol{ font-size:12.5px; color:var(--nai-ink-3); }
.nai-toc-sticky{ position:sticky; top:16px; padding:16px 18px;
  background:var(--nai-paper); border:1px solid var(--nai-rule-mid); }
.nai-toc-sticky a{ display:block; padding:5px 0 5px 12px; font-size:12px; line-height:1.8;
  color:var(--nai-ink-3); border-left:1px solid var(--nai-rule-hair); text-decoration:none; }
.nai-toc-sticky a[aria-current="true"]{ color:var(--nai-ink); font-weight:600;
  border-left:2px solid var(--nai-accent); }
@media (max-width:860px){
  .nai-toc-sticky{ position:fixed; inset:auto 0 0 0; z-index:20; max-height:60vh;
    overflow-y:auto; padding:0; border:none; border-top:1px solid var(--nai-ink); }
  .nai-toc-sticky summary{ display:flex; align-items:center; gap:10px; padding:13px 16px;
    font-family:var(--nai-font-mono); font-size:9.5px; letter-spacing:.2em; }
  .nai-toc-sticky a{ padding:9px 16px 9px 28px; }
}

/* --- 12. 目次(details型)の表示則 ----------------------------------------- */
.nai-toc .nai-toc-h3{ display:none; }
.nai-toc.nai-toc-show-h3 .nai-toc-h3{ display:block; }
.nai-toc-h3-toggle{ margin:12px 0 0; padding:0; background:none; border:none; cursor:pointer;
  font-family:var(--nai-font-mono); font-size:10px; letter-spacing:.14em; color:var(--nai-accent); }
.nai-toc ol a{ color:var(--nai-ink-2); text-decoration:none; border-bottom:none; }
.nai-toc ol a:hover{ color:var(--nai-accent); }

/* ---- ネイティブ目次(.toc_block) — 旧 .nai-toc の見た目へ ---- */
.toc_block {
	margin: var(--nai-s5) 0;
	padding: 20px 24px;
	background: var(--nai-paper);
	border: 1px solid var(--nai-rule-mid);
	border-radius: 0;
}
.toc_block .toc__caption {
	display: flex; align-items: baseline; gap: 12px;
	padding-bottom: 10px; border-bottom: 1px solid #D8CFBA;
	font-family: var(--nai-font-jp); font-size: 14px; font-weight: 600; letter-spacing: 0.1em;
}
.toc_block .toc_toggle_button { margin-left: auto; color: var(--nai-accent); font-family: var(--nai-font-mono); font-size: 10px; letter-spacing: 0.14em; cursor: pointer; }
.toc_block .toc ol { margin: 14px 0 0; padding-left: 22px; font-size: 13.5px; line-height: 2.15; }
.toc_block .toc ol ol { font-size: 12.5px; color: var(--nai-ink-3); }
.toc_block .toc a { color: var(--nai-ink-2); text-decoration: none; border-bottom: none; }
.toc_block .toc a:hover { color: var(--nai-accent); }

/* ---- ネイティブパンくず(ul.breadcrumbs) — 旧 .breadcrumb の見た目へ ---- */
.breadcrumbs {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
	margin: 0 0 var(--nai-s3); padding: 0; list-style: none;
	font-family: var(--nai-font-mono); font-size: var(--nai-fs-meta);
	letter-spacing: 0.14em; color: var(--nai-meta);
}
.breadcrumbs li { display: flex; gap: 8px; align-items: baseline; }
.breadcrumbs li + li::before { content: "›"; color: var(--nai-meta-2); }
.breadcrumbs a { color: var(--nai-meta); text-decoration: none; }
.breadcrumbs a:hover { color: var(--nai-accent); }

/* ---- ネイティブ関連記事(.articleFooter__relation) — nai-card の語彙へ ---- */
.articleFooter__relation .articleList { display: block; }
.articleFooter__relation .articleList__item { border-bottom: 1px solid var(--nai-rule-thin); }
.articleFooter__relation .articleList__item:last-child { border-bottom: 1px solid var(--nai-ink); }
.articleFooter__relation .xw-article-media {
	display: grid; grid-template-columns: 150px 1fr; gap: var(--nai-s4);
	align-items: start; padding: 22px 0; color: var(--nai-ink); text-decoration: none;
}
.articleFooter__relation .articleList__item--fig { margin: 0; min-width: 0; }
.articleFooter__relation .xw-article-media__body--title {
	font-family: var(--nai-font-jp); font-size: var(--nai-fs-card);
	font-weight: 600; line-height: 1.55; margin-bottom: 8px;
}
.articleFooter__relation .xw-article-media__body--text { font-size: 13px; line-height: 1.9; color: var(--nai-ink-3); }
.articleFooter__relation .article-meta,
.articleFooter__relation .article-date {
	font-family: var(--nai-font-mono); font-size: 9.5px;
	letter-spacing: 0.16em; color: var(--nai-meta);
}

/* ---- ネイティブ前後記事(.articlePagerUnit) — 旧 .nai-adjacent の見た目へ ---- */
.articlePagerUnit {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	margin: var(--nai-s5) 0 0; background: #D3CAB5; border: 1px solid #D3CAB5;
}
.articlePagerUnit > * { background: var(--nai-paper); padding: 18px 20px; }
.articlePagerUnit a { color: var(--nai-ink); text-decoration: none; }
.articlePagerUnit a:hover { color: var(--nai-accent-dk); }

/* ---- SP ---- */
@media (max-width: 700px) {
	.articleFooter__relation .xw-article-media { grid-template-columns: 96px 1fr; gap: 14px; padding: 16px 0; }
	.articleFooter__relation .xw-article-media__body--text { display: none; }
	.articlePagerUnit { grid-template-columns: 1fr; }
}