/* ---- ten-article-diagrams-v1.css ---- */
/* Rayne-Lab 典：本文理解を圧縮する再利用型図解 */
.article-diagram{margin:2.2rem 0 2.5rem;padding:1.15rem 1.2rem 1.25rem;border:1px solid rgba(214,178,92,.28);background:linear-gradient(180deg,rgba(214,178,92,.035),rgba(255,255,255,.012));border-radius:14px;overflow:hidden}
.article-diagram__title{margin:0 0 .85rem!important;font-size:1rem!important;line-height:1.55!important;font-weight:700;color:var(--fg,#f3f0e9);letter-spacing:.02em}
.article-diagram__lead{margin:0 0 1rem!important;color:var(--muted,#aaa39a);font-size:.78rem;line-height:1.75}
.article-diagram__caption{margin:.85rem 0 0!important;color:var(--muted,#aaa39a);font-size:.78rem;line-height:1.75}
.article-diagram__note{margin:.75rem 0 0!important;color:var(--muted,#aaa39a);font-size:.74rem;line-height:1.7}
.diagram-flow{display:grid;grid-template-columns:repeat(var(--steps,3),minmax(0,1fr));gap:1.55rem;align-items:stretch}
.diagram-flow__step{position:relative;min-width:0;min-height:8.1rem;padding:.9rem;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.025);border-radius:10px;display:flex;flex-direction:column;justify-content:center}
.diagram-flow__step:not(:last-child)::after{content:'→';position:absolute;right:-1.25rem;top:50%;transform:translateY(-50%);color:rgba(214,178,92,.8);font-size:1.05rem;font-weight:700}
.diagram-flow__label{display:block;color:#d6b25c;font-weight:700;font-size:.85rem;line-height:1.45;margin-bottom:.28rem}
.diagram-flow__text{display:block;color:var(--fg,#f3f0e9);font-size:.76rem;line-height:1.65}
.diagram-flow__sub{display:block;color:var(--muted,#aaa39a);font-size:.68rem;line-height:1.55;margin-top:.28rem}
.diagram-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;align-items:stretch}
.diagram-card{padding:1rem;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.022);border-radius:10px;display:flex;flex-direction:column;justify-content:center;min-height:8.4rem}
.diagram-card__head{display:flex;align-items:center;gap:.55rem;margin-bottom:.55rem;font-weight:700;color:var(--fg,#f3f0e9);font-size:.86rem}
.diagram-card__mark{display:inline-grid;place-items:center;min-width:1.75rem;height:1.75rem;border:1px solid rgba(214,178,92,.5);border-radius:999px;color:#d6b25c;font-size:.72rem}
.diagram-card__text{margin:0!important;color:var(--muted,#aaa39a);font-size:.75rem;line-height:1.7}
.diagram-card ul{margin:.4rem 0 0 1.1rem;padding:0}
.diagram-card li{margin:.2rem 0;color:var(--muted,#aaa39a);font-size:.75rem;line-height:1.65}
.diagram-layers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;align-items:stretch}
.diagram-layer{position:relative;padding:.85rem .7rem;border-top:2px solid rgba(214,178,92,.65);background:rgba(255,255,255,.022);min-height:8.4rem;display:flex;flex-direction:column;justify-content:center}
.diagram-layer__no{display:block;color:#d6b25c;font-size:.66rem;letter-spacing:.08em;margin-bottom:.35rem}
.diagram-layer strong{display:block;font-size:.78rem;line-height:1.5;margin-bottom:.3rem;color:var(--fg,#f3f0e9)}
.diagram-layer span{display:block;font-size:.68rem;line-height:1.55;color:var(--muted,#aaa39a)}
.diagram-stack{display:grid;gap:.62rem}
.diagram-stack__row{display:grid;grid-template-columns:minmax(9.5rem,.32fr) minmax(0,1fr);align-items:stretch;min-height:6.4rem;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.022);border-radius:10px;overflow:hidden}
.diagram-stack__key,.diagram-stack__body{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:.88rem 1rem}
.diagram-stack__key{border-right:1px solid rgba(255,255,255,.09);background:rgba(214,178,92,.035)}
.diagram-stack__no{display:block;margin-bottom:.24rem;color:#d6b25c;font-size:.66rem;line-height:1.35;letter-spacing:.08em}
.diagram-stack__key strong{color:var(--fg,#f3f0e9);font-size:.82rem;line-height:1.5}
.diagram-stack__body strong{display:block;margin-bottom:.25rem;color:var(--fg,#f3f0e9);font-size:.8rem;line-height:1.5}
.diagram-stack__body p{margin:0!important;color:var(--muted,#aaa39a);font-size:.72rem;line-height:1.68}
.diagram-spectrum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;align-items:stretch}
.diagram-chip{padding:.72rem .8rem;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;justify-content:center;min-height:6.4rem}
.diagram-chip strong{display:block;color:var(--fg,#f3f0e9);font-size:.8rem;margin-bottom:.2rem}
.diagram-chip span{display:block;color:var(--muted,#aaa39a);font-size:.68rem;line-height:1.55}
.diagram-map{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.55rem;align-items:stretch}
.diagram-map__node{padding:.9rem .8rem;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.022);text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:7rem}
.diagram-map__node strong{display:block;color:var(--fg,#f3f0e9);font-size:.82rem;margin-bottom:.25rem}
.diagram-map__node span{display:block;color:var(--muted,#aaa39a);font-size:.67rem;line-height:1.5}
.diagram-map__rel{color:#d6b25c;font-size:.7rem;line-height:1.4;text-align:center;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;align-items:center}
.diagram-map__rel::after{content:'→';display:block;font-size:1rem;line-height:1;margin-top:.18rem}
.diagram-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;align-items:stretch}
.diagram-grid4 .diagram-card{padding:.85rem;min-height:7rem}
.diagram-grid4 .diagram-card__head{font-size:.78rem;margin-bottom:.35rem}
.diagram-grid4 .diagram-card p{margin:0!important;color:var(--muted,#aaa39a);font-size:.68rem;line-height:1.55}
@media(max-width:900px){
 .article-diagram{margin:1.7rem 0 2rem;padding:1rem}
 .diagram-flow,.diagram-layers{grid-template-columns:1fr;gap:.7rem}
 .diagram-flow__step:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-1rem;transform:translateX(-50%);background:#111;padding:0 .25rem}
 .diagram-compare,.diagram-spectrum,.diagram-grid4{grid-template-columns:1fr}
 .diagram-map{grid-template-columns:1fr;gap:.45rem}
 .diagram-map__rel::after{content:'↓'}
 .diagram-stack__row{grid-template-columns:1fr;min-height:0}
 .diagram-stack__key{border-right:0;border-bottom:1px solid rgba(255,255,255,.09)}
 .diagram-stack__key,.diagram-stack__body{padding:.78rem .85rem}
 .diagram-flow__step,.diagram-card,.diagram-layer,.diagram-chip,.diagram-map__node{min-height:0}
}
/* ---- diagram-components-ten-v1.0.css ---- */
/* Rayne-Lab 典：図解コンポーネント正式版
 * 許可する図解タイプは以下7種のみ：
 * diagram-map / diagram-compare / diagram-card / diagram-layers /
 * diagram-flow / diagram-spectrum / diagram-chip
 * 新規図解では独自クラスを追加せず、内部要素は data-role で構造化する。
 */

/* 既存HTML互換：旧figure内の標準サブクラスも ten-article-diagrams-v1.css と同じ見え方を保証 */
.article-diagram{margin:2.2rem 0 2.5rem;padding:1.15rem 1.2rem 1.25rem;border:1px solid rgba(214,178,92,.28);background:linear-gradient(180deg,rgba(214,178,92,.035),rgba(255,255,255,.012));border-radius:14px;overflow:hidden}
.article-diagram__title{margin:0 0 .85rem!important;font-size:1rem!important;line-height:1.55!important;font-weight:700;color:var(--fg,#f3f0e9);letter-spacing:.02em}
.article-diagram__lead{margin:.35rem 0 1rem!important;color:var(--muted,#aaa39a);font-size:.78rem;line-height:1.75}
.article-diagram__caption{margin:.85rem 0 0!important;color:var(--muted,#aaa39a);font-size:.78rem;line-height:1.75}
.article-diagram__note{margin:.75rem 0 0!important;color:var(--muted,#aaa39a);font-size:.74rem;line-height:1.7}

/* 既存の標準マークアップを補強 */
.diagram-flow{display:grid;grid-template-columns:repeat(var(--steps,3),minmax(0,1fr));gap:1.55rem;align-items:stretch}
.diagram-flow__step{position:relative;min-width:0;min-height:8.1rem;padding:.9rem;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.025);border-radius:10px;display:flex;flex-direction:column;justify-content:center}
.diagram-flow__step:not(:last-child)::after{content:'→';position:absolute;right:-1.25rem;top:50%;transform:translateY(-50%);color:rgba(214,178,92,.8);font-size:1.05rem;font-weight:700}
.diagram-flow__label{display:block;color:#d6b25c;font-weight:700;font-size:.85rem;line-height:1.45;margin-bottom:.28rem}
.diagram-flow__text{display:block;color:var(--fg,#f3f0e9);font-size:.76rem;line-height:1.65}
.diagram-flow__sub{display:block;color:var(--muted,#aaa39a);font-size:.68rem;line-height:1.55;margin-top:.28rem}
.diagram-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;align-items:stretch}
.diagram-card{padding:1rem;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.022);border-radius:10px;display:flex;flex-direction:column;justify-content:center;min-height:8.4rem}
.diagram-card__head{display:flex;align-items:center;gap:.55rem;margin-bottom:.55rem;font-weight:700;color:var(--fg,#f3f0e9);font-size:.86rem}
.diagram-card__mark{display:inline-grid;place-items:center;min-width:1.75rem;height:1.75rem;border:1px solid rgba(214,178,92,.5);border-radius:999px;color:#d6b25c;font-size:.72rem}
.diagram-card__text{margin:0!important;color:var(--muted,#aaa39a);font-size:.75rem;line-height:1.7}
.diagram-layers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;align-items:stretch}
.diagram-layer{position:relative;padding:.85rem .7rem;border-top:2px solid rgba(214,178,92,.65);background:rgba(255,255,255,.022);min-height:8.4rem;display:flex;flex-direction:column;justify-content:center}
.diagram-layer__no{display:block;color:#d6b25c;font-size:.66rem;letter-spacing:.08em;margin-bottom:.35rem}
.diagram-layer strong{display:block;font-size:.78rem;line-height:1.5;margin-bottom:.3rem;color:var(--fg,#f3f0e9)}
.diagram-layer span{display:block;font-size:.68rem;line-height:1.55;color:var(--muted,#aaa39a)}
.diagram-spectrum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;align-items:stretch}
.diagram-chip{padding:.72rem .8rem;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;justify-content:center;min-height:6.4rem}
.diagram-chip strong{display:block;color:var(--fg,#f3f0e9);font-size:.8rem;margin-bottom:.2rem}
.diagram-chip span{display:block;color:var(--muted,#aaa39a);font-size:.68rem;line-height:1.55}
.diagram-map{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.55rem;align-items:stretch}
.diagram-map__node{padding:.9rem .8rem;border:1px solid rgba(255,255,255,.11);border-radius:10px;background:rgba(255,255,255,.022);text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:7rem}
.diagram-map__node strong{display:block;color:var(--fg,#f3f0e9);font-size:.82rem;margin-bottom:.25rem}
.diagram-map__node span{display:block;color:var(--muted,#aaa39a);font-size:.67rem;line-height:1.5}
.diagram-map__rel{color:#d6b25c;font-size:.7rem;line-height:1.4;text-align:center;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;align-items:center}
.diagram-map__rel::after{content:'→';display:block;font-size:1rem;line-height:1;margin-top:.18rem}

/* 新規図解：figure自身に7種のどれか1つだけを付け、内部はdata-roleで表現 */
figure.article-diagram[data-ten-diagram].diagram-map,
figure.article-diagram[data-ten-diagram].diagram-compare,
figure.article-diagram[data-ten-diagram].diagram-card,
figure.article-diagram[data-ten-diagram].diagram-layers,
figure.article-diagram[data-ten-diagram].diagram-flow,
figure.article-diagram[data-ten-diagram].diagram-spectrum,
figure.article-diagram[data-ten-diagram].diagram-chip{display:block}

figure.article-diagram[data-ten-diagram] > [data-role="visual"]{display:grid;gap:.65rem;align-items:stretch}
figure.article-diagram[data-ten-diagram] [data-role="item"]{min-width:0;padding:.85rem .8rem;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.022);border-radius:10px;display:flex;flex-direction:column;justify-content:center}
figure.article-diagram[data-ten-diagram] [data-role="eyebrow"]{display:block;color:#d6b25c;font-size:.66rem;line-height:1.4;letter-spacing:.04em;margin-bottom:.28rem}
figure.article-diagram[data-ten-diagram] [data-role="title"]{display:block;color:var(--fg,#f3f0e9);font-size:.82rem;line-height:1.5;margin-bottom:.25rem}
figure.article-diagram[data-ten-diagram] [data-role="text"]{margin:0!important;color:var(--muted,#aaa39a);font-size:.72rem;line-height:1.65}

figure.article-diagram[data-ten-diagram].diagram-layers > [data-role="visual"]{grid-template-columns:repeat(var(--ten-cols,4),minmax(0,1fr))}
figure.article-diagram[data-ten-diagram].diagram-layers [data-role="item"]{border-radius:0;border-top:2px solid rgba(214,178,92,.65)}
figure.article-diagram[data-ten-diagram].diagram-compare > [data-role="visual"]{grid-template-columns:repeat(var(--ten-cols,2),minmax(0,1fr))}
figure.article-diagram[data-ten-diagram].diagram-map > [data-role="visual"]{grid-template-columns:repeat(var(--ten-cols,3),minmax(0,1fr))}
figure.article-diagram[data-ten-diagram].diagram-map [data-role="item"]{text-align:center}
figure.article-diagram[data-ten-diagram].diagram-flow > [data-role="visual"]{grid-template-columns:repeat(var(--ten-cols,3),minmax(0,1fr));gap:1.45rem}
figure.article-diagram[data-ten-diagram].diagram-flow [data-role="item"]{position:relative}
figure.article-diagram[data-ten-diagram].diagram-flow [data-role="item"]:not(:last-child)::after{content:'→';position:absolute;right:-1.15rem;top:50%;transform:translateY(-50%);color:#d6b25c;font-weight:700}
figure.article-diagram[data-ten-diagram].diagram-spectrum > [data-role="visual"]{grid-template-columns:repeat(var(--ten-cols,3),minmax(0,1fr))}
figure.article-diagram[data-ten-diagram].diagram-spectrum [data-role="item"]{border-top:2px solid rgba(214,178,92,.65);text-align:center}
figure.article-diagram[data-ten-diagram].diagram-card > [data-role="visual"]{grid-template-columns:repeat(var(--ten-cols,4),minmax(0,1fr))}
figure.article-diagram[data-ten-diagram].diagram-chip > [data-role="visual"]{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
figure.article-diagram[data-ten-diagram].diagram-chip [data-role="item"]{padding:.65rem .7rem;min-height:0}

@media(max-width:900px){
 .article-diagram{margin:1.7rem 0 2rem;padding:1rem}
 .diagram-flow,.diagram-layers{grid-template-columns:1fr;gap:.7rem}
 .diagram-flow__step:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-1rem;transform:translateX(-50%);background:#111;padding:0 .25rem}
 .diagram-compare,.diagram-spectrum{grid-template-columns:1fr}
 .diagram-map{grid-template-columns:1fr;gap:.45rem}
 .diagram-map__rel::after{content:'↓'}
 .diagram-flow__step,.diagram-card,.diagram-layer,.diagram-chip,.diagram-map__node{min-height:0}
 figure.article-diagram[data-ten-diagram] > [data-role="visual"]{grid-template-columns:1fr!important;gap:.7rem}
 figure.article-diagram[data-ten-diagram].diagram-flow [data-role="item"]:not(:last-child)::after{content:'↓';right:auto;left:50%;top:auto;bottom:-1.05rem;transform:translateX(-50%);background:#111;padding:0 .2rem}
}
/* ---- ten-article-structure-v2.css ---- */
/* 「典」記事の再利用型構造図 v2。本文を削らず、整理図として視認性を上げる。 */
.ten-article-diagram{
  margin:1.6rem 0 2.1rem;
  padding:1rem;
  border:1px solid rgba(205,177,112,.24);
  background:rgba(255,255,255,.012);
  border-radius:12px;
  overflow:hidden;
}
.ten-auto-overview__title{
  margin:0 0 .85rem;
  color:var(--fg,#f0eee9);
  font-family:"Shippori Mincho",serif;
  font-size:.98rem;
  font-weight:600;
}
.ten-auto-overview__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.72rem;
}
.ten-auto-overview__card{
  position:relative;
  min-width:0;
  min-height:116px;
  padding:.9rem 1rem .9rem 2.55rem;
  border:1px solid rgba(255,255,255,.085);
  background:rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ten-auto-overview__card:last-child:nth-child(odd){grid-column:1/-1}
.ten-auto-overview__no{
  position:absolute;
  left:.85rem;
  top:.95rem;
  color:var(--gold-soft,#b89a59);
  font-size:.7rem;
  letter-spacing:.05em;
}
.ten-auto-overview__card strong{
  display:block;
  margin:0 0 .35rem;
  color:var(--fg,#f0eee9);
  font-size:.82rem;
  line-height:1.55;
}
.ten-auto-overview__card p{
  margin:0!important;
  color:var(--fg-soft,#ccc8bf);
  font-size:.75rem;
  line-height:1.72;
}
.ten-auto-structure__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.72rem;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.ten-auto-structure__list--stack{grid-template-columns:1fr}
.ten-auto-structure__list>li{
  position:relative;
  display:flex;
  align-items:center;
  min-height:76px;
  margin:0!important;
  padding:.85rem 1rem .85rem 2rem!important;
  border:1px solid rgba(255,255,255,.085);
  background:rgba(0,0,0,.12);
  line-height:1.72;
}
.ten-auto-structure__list>li::before{
  content:"";
  position:absolute;
  left:.85rem;
  top:50%;
  width:.34rem;
  height:.34rem;
  border-radius:50%;
  background:var(--gold-soft,#b89a59);
  transform:translateY(-50%);
}
.ten-auto-structure__list--ordered{counter-reset:ten-structure-step}
.ten-auto-structure__list--ordered>li{counter-increment:ten-structure-step;padding-left:3.15rem!important}
.ten-auto-structure__list--ordered>li::before{
  content:counter(ten-structure-step,decimal-leading-zero);
  left:.85rem;
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  color:var(--gold-soft,#b89a59);
  font-size:.72rem;
  letter-spacing:.04em;
}
.ten-auto-structure--table{overflow-x:auto;overscroll-behavior-inline:contain}
.ten-auto-structure--table table{width:100%;margin:0!important;border-collapse:collapse}
.ten-auto-structure--table th,.ten-auto-structure--table td{padding:.8rem .85rem;vertical-align:middle;line-height:1.65}
.ten-auto-structure--table th{white-space:nowrap}

@media(max-width:720px){
  .ten-article-diagram{margin:1.2rem 0 1.7rem;padding:.8rem;border-radius:10px}
  .ten-auto-overview__grid,.ten-auto-structure__list{grid-template-columns:1fr}
  .ten-auto-overview__card:last-child:nth-child(odd){grid-column:auto}
  .ten-auto-overview__card{min-height:0;padding:.8rem .85rem .8rem 2.35rem}
  .ten-auto-overview__no{left:.75rem;top:.82rem}
  .ten-auto-structure__list>li{min-height:68px;padding:.78rem .85rem .78rem 1.8rem!important}
  .ten-auto-structure__list--ordered>li{padding-left:2.8rem!important}
  .ten-auto-structure--table th,.ten-auto-structure--table td{min-width:7.8rem;padding:.7rem .75rem}
}
/* ---- article-page-v2.css ---- */
/* Rayne-Lab article page v2
 * WEB-009 v1.1: breadcrumb -> header -> TOC -> body -> references/related -> footer.
 */
.article-shell{
  width:min(1040px,100%);
  margin:0 auto;
}
.article-shell>.breadcrumb,
.article-shell>.article-header{
  width:min(760px,100%);
}
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,760px) minmax(200px,240px);
  gap:40px;
  align-items:start;
}
.article-layout>.article-body{
  grid-column:1;
  grid-row:1;
  min-width:0;
}
.article-toc{
  grid-column:2;
  grid-row:1;
  position:sticky;
  top:96px;
  max-height:calc(100vh - 120px);
  overflow:auto;
  padding:1rem 1.05rem;
  border:1px solid var(--border);
  background:rgba(255,255,255,.012);
}
.article-toc[hidden]{display:none!important}
.article-toc__title{
  margin:0 0 .7rem;
  color:var(--fg);
  font-family:"Shippori Mincho",serif;
  font-size:.95rem;
  font-weight:600;
}
.article-toc__list{
  margin:0;
  padding-left:1.25rem;
  color:var(--muted);
  font-size:.73rem;
  line-height:1.65;
}
.article-toc__list>li{margin:.38rem 0}
.article-toc__list ol{margin:.28rem 0 .45rem;padding-left:1.05rem}
.article-toc__list a{color:var(--fg-soft);text-decoration:none}
.article-toc__list a:hover{color:var(--gold-bright);text-decoration:underline;text-underline-offset:.18em}
.article-body{min-width:0;counter-reset:rayne-article-section}
.article-body>h2{
  counter-increment:rayne-article-section;
  display:flex;
  align-items:baseline;
  gap:.72em;
  min-width:0;
  padding-left:1rem;
}
.article-body>h2::before{
  content:counter(rayne-article-section,decimal-leading-zero);
  position:static;
  flex:0 0 auto;
  color:var(--gold-soft);
  font-family:inherit;
  font-size:1em;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:.03em;
}
@media(max-width:900px){
  .article-shell>.breadcrumb,.article-shell>.article-header{width:100%}
  .article-layout{display:flex;flex-direction:column;gap:0}
  .article-toc{
    order:0;
    position:static;
    width:100%;
    max-height:none;
    margin:1.2rem 0 1.8rem;
  }
  .article-layout>.article-body{order:1;width:100%}
}
@media(max-width:680px){
  .article-shell,.article-layout,.article-body,.article-toc{width:100%;max-width:100%;min-width:0}
  .article-toc{padding:.85rem .9rem}
  .article-body>h2{gap:.62em;padding-left:.9rem}
}


/* 戦略的視点のまとめ：本文説明から「使い方」へ切り替わる節 */
.article-body>h2.article-strategy-heading{
  margin-top:3.8rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(210,170,77,.26);
}
.article-strategy-note{
  margin:.25rem 0 0 1rem;
  padding:.2rem 0 .2rem 1rem;
  border-left:2px solid rgba(210,170,77,.58);
  color:var(--muted);
  font-size:.82rem;
  line-height:1.85;
}
.article-strategy-content{
  position:relative;
  margin:1.15rem 0 2.2rem;
  padding:1.2rem 1.25rem 1.3rem;
  border-radius:0 12px 12px 0;
  background:
    linear-gradient(90deg,rgba(210,170,77,.055),rgba(210,170,77,.014) 46%,transparent);
}
.article-strategy-content::before{
  content:"戦略視点";
  display:block;
  margin:0 0 .75rem;
  color:var(--gold-soft);
  font-size:.68rem;
  letter-spacing:.1em;
}
.article-strategy-content>p:first-of-type{
  color:var(--fg);
  font-size:1.02rem;
  line-height:1.95;
}
.article-strategy-content h3{
  margin-top:1.65rem;
}
@media(max-width:680px){
  .article-body>h2.article-strategy-heading{margin-top:3rem;padding-top:1rem}
  .article-strategy-note{margin-left:.9rem;padding-left:.8rem;font-size:.78rem}
  .article-strategy-content{margin-top:1rem;padding:1rem .9rem 1.15rem}
}

/* WEB-175: 記事下のリンク一覧（合わせて読みたい・出典）の当たり判定が高さ15〜16pxしかなかった。
   2026-09-24 に360px幅で実測。文字サイズは変えず、行の高さだけ確保する。
   WEB-206: 2026-09-26 に390px幅（isMobile）の本番実測でまだ30pxだったため44pxへ。
   直下の `.article-body p a{display:inline}` で本文中のインラインリンクは対象外のまま
   （display:inline の非置換要素には min-height が効かないので行間は変わらない）。 */
.article-body li > a,
.article-related li > a,
.article-source-link{display:inline-flex;align-items:center;min-height:44px}
/* 文章の途中に出てくるリンクは対象外（行間が崩れるため） */
.article-body p a{display:inline;min-height:0}
/* ---- article-sticky-ui-v2.css ---- */
/* Rayne-Lab 記事レイアウトの追従UI v3（2026-09-23 整理 / WEB-152）
 * 担当は「右側の目次」だけ。パンくずは site-breadcrumb-follow-v1.css/js が
 * 全ページ共通で固定するため、ここでは触らない。
 * PC：目次が右に追従（CSS stickyだけでは現行シェルで不安定なため
 *     article-follow-v3.js が閾値到達後に fixed で補強する）
 * SP：目次は本文内の折りたたみブロック
 * 旧：パンくずの sticky / .article-follow-fixed / spacer 定義はすべて死にルール
 *     だったため削除済み。戻さないこと。
 */
:root {
  --rayne-site-header-height: 74px;
  --rayne-breadcrumb-stack-height: 44px;
}

.site-main,
.article-shell,
.article-layout,
.hub-section {
  overflow-y: visible !important;
  contain: none !important;
}

@media (min-width: 901px) {
  .article-layout { align-items: start !important; }

  .article-toc--desktop {
    display: block !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--rayne-site-header-height) + var(--rayne-breadcrumb-stack-height) + 16px) !important;
    align-self: start !important;
    height: max-content !important;
    max-height: calc(100vh - var(--rayne-site-header-height) - var(--rayne-breadcrumb-stack-height) - 32px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .article-toc--desktop.article-follow-fixed {
    position: fixed !important;
    z-index: 58 !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .article-toc--mobile { display: none !important; }
}

@media (max-width: 900px) {
  .article-toc--desktop { display: none !important; }
  .article-toc--mobile {
    display: block !important;
    position: static !important;
  }
}

@media (max-width: 680px) {
  :root {
    --rayne-site-header-height: 64px;
    --rayne-breadcrumb-stack-height: 40px;
  }
}
/* ---- article-navigation-v1.css ---- */
/* Rayne-Lab shared article navigation v1
 * Unifies desktop/mobile TOC, reader-footer next-link, related reading and source links.
 */
.article-header{
  display:block;
}
.article-header__main{min-width:0}
.article-next-link{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"label arrow" "title arrow";
  gap:.25rem .8rem;
  align-items:center;
  width:min(760px,100%);
  min-width:0;
  margin:2.4rem 0 0;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  color:var(--fg);
  text-decoration:none;
  background:rgba(255,255,255,.015);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.article-next-link[hidden]{display:none!important}
.article-next-link:hover{
  border-color:var(--gold-soft);
  background:rgba(255,255,255,.03);
  transform:translateY(-1px);
}
.article-next-link__label{
  grid-area:label;
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.08em;
}
.article-next-link__title{
  grid-area:title;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:"Shippori Mincho",serif;
  font-size:.9rem;
  line-height:1.45;
}
.article-next-link__arrow{
  grid-area:arrow;
  color:var(--gold-bright);
  font-size:1.05rem;
}

.article-toc__item--h3{
  margin-left:.75rem!important;
  list-style-type:"– ";
  counter-increment:list-item 0;
}
.article-toc__list a[aria-current="true"]{
  color:var(--gold-bright);
  font-weight:600;
}
.article-toc--mobile{display:none}

.article-related{
  width:min(760px,100%);
  margin:1.4rem 0 0;
  padding-top:2rem;
  border-top:1px solid var(--border);
}
.article-related[hidden]{display:none!important}
.article-related h2{
  margin:0 0 1rem;
  font-family:"Shippori Mincho",serif;
  font-size:1.18rem;
  font-weight:600;
}
.article-related__links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
}
.article-related__link{
  display:flex;
  min-height:86px;
  align-items:center;
  justify-content:space-between;
  gap:.9rem;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  color:var(--fg-soft);
  text-decoration:none;
  background:rgba(255,255,255,.012);
  transition:border-color .18s ease,background .18s ease;
}
.article-related__link:hover{
  border-color:var(--gold-soft);
  background:rgba(255,255,255,.028);
  color:var(--fg);
}
.article-related__title{
  min-width:0;
  font-size:.82rem;
  line-height:1.6;
}
.article-related__arrow{
  flex:0 0 auto;
  color:var(--gold-bright);
}

.article-source-link{
  overflow-wrap:anywhere;
  text-underline-offset:.18em;
}
.article-body pre{position:relative}
.article-code-copy{
  position:absolute;
  top:.55rem;
  right:.55rem;
  padding:.3rem .55rem;
  border:1px solid var(--border);
  background:var(--ink,#09090b);
  color:var(--fg-soft);
  font:inherit;
  font-size:.7rem;
  cursor:pointer;
}

@media(max-width:900px){
  .article-next-link{width:100%}
  .article-toc--desktop{display:none!important}
  .article-toc--mobile{display:block}
  .article-related__links{grid-template-columns:1fr}
  .article-related__link{min-height:0}
}

@media(min-width:901px){
  .article-toc--desktop{display:block}
  .article-toc--mobile{display:none!important}
}

@media(max-width:680px){
  .article-next-link{margin-top:2rem;padding:.8rem .85rem}
  .article-next-link__title{white-space:normal}
  .article-related{margin-top:1.1rem}
}

/* WEB-009 (2026-09-17): SP/タブレットの目次は折りたたみ式。
   以前は全見出し（例: 23項目・約970px）が本文の前に常時展開され、本文到達まで1画面以上かかっていた。 */
.article-toc__details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:44px;margin:0}
.article-toc__details>summary::-webkit-details-marker{display:none}
.article-toc__details>summary::after{content:"";flex:0 0 auto;width:.55rem;height:.55rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-right:.25rem;transition:transform .2s ease}
.article-toc__details[open]>summary::after{transform:rotate(-135deg)}
.article-toc__summary-hint{margin-left:auto;font-size:.72rem;opacity:.7;font-weight:400}
.article-toc__details[open] .article-toc__summary-hint{display:none}
.article-toc__details>summary:focus-visible{outline:2px solid var(--gold-bright,#e3bf68);outline-offset:2px}
.article-toc__details>.article-toc__list{margin-top:.5rem}
@media (prefers-reduced-motion:reduce){.article-toc__details>summary::after{transition:none}}

/* WEB-175: 目次のリンクの当たり判定が高さ15pxしかなかった（2026-09-24, 360px幅で実測）。
   文字サイズは変えず、行の上下に余白を足して指で押せる高さにする。 */
.article-toc__list a{display:flex;align-items:center;min-height:44px;padding-block:.15rem}
/* ---- article-favorite-v1.css ---- */
/* WEB-099 | 記事お気に入り（⛥ボタン）v1
   パンくずの下・記事タイトルの上に置く utility 行。右寄せ。 */

.article-utility:empty {
  display: none;
}

.article-utility {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
}

.article-favorite {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.38em 0.9em;
  border: 1px solid var(--line, rgba(128, 128, 128, 0.35));
  border-radius: 999px;
  background: transparent;
  color: var(--fg-soft, inherit);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.article-favorite:hover,
.article-favorite:focus-visible {
  border-color: currentColor;
  color: var(--fg, inherit);
}

.article-favorite:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.article-favorite[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.article-favorite__glyph {
  font-size: 1.05em;
  line-height: 1;
}

.article-favorite.is-on {
  border-color: currentColor;
  color: var(--accent, #c8a24a);
}

.article-favorite--guest {
  opacity: 0.8;
}

.article-favorite__status {
  flex-basis: 100%;
  margin: 0;
  text-align: right;
  font-size: 0.8rem;
  color: var(--fg-soft, inherit);
}

.article-favorite__status:empty {
  display: none;
}

@media (max-width: 480px) {
  .article-utility {
    justify-content: flex-start;
  }
  .article-favorite__status {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-favorite {
    transition: none;
  }
}