/* —— Wuxing page theme (スコープは .wux- で衝突回避) —— */
:root{ --wux-gold:#b9811d; --wux-green:#4a7c59; --wux-ink:#2b2b2b; }

.wux-hero{                       /* 和紙＋にじみ＋唐草のヒーロー */
  border:1px solid var(--line); border-radius:20px; overflow:hidden;
  padding:22px 0 18px; position:relative; background:var(--bg);
}
.wux-hero::before{               /* 金のにじみ */
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background:radial-gradient(60vw 40vh at 20% 0%, rgba(255,244,214,.9), rgba(255,244,214,.15) 70%, transparent 90%);
  pointer-events:none;
}
.wux-hero::after{                /* うすい唐草 */
  content:""; position:absolute; inset:0; opacity:.25; pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='240' viewBox='0 0 400 240'><path d='M0,200 C60,140 120,140 180,200 S300,260 360,200' fill='none' stroke='%23b9811d' stroke-width='1.2' stroke-opacity='.22'/><path d='M-40,120 C20,60 80,60 140,120 S260,180 320,120' fill='none' stroke='%23b9811d' stroke-width='1.2' stroke-opacity='.18'/></svg>") center/400px 240px repeat;
}

/* 見出し＆リード */
.wux-hero .article-title{ color:var(--ink); margin:6px 0 6px; }
.wux-hero .lead{ color:var(--ink2); max-width:46em; }

/* タグ（木・火・土・金・水） */
.wux-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.wux-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff;
  font-weight:600; color:#475569;
}
.wux-dot{ width:10px; height:10px; border-radius:999px; display:inline-block }
.wux-dot.wood{ background:#22c55e } .wux-dot.fire{ background:#ef4444 }
.wux-dot.earth{ background:#eab308 } .wux-dot.metal{ background:#94a3b8 }
.wux-dot.water{ background:#38bdf8 }

/* セクション内アンカー（上部固定ナビ） */
.wux-anchor{
  position:sticky; top:60px; z-index:20; margin-top:10px;
  display:flex; gap:10px; padding:8px; border:1px solid var(--line);
  border-radius:12px; background:rgba(255,255,255,.8); backdrop-filter:blur(6px);
}
.wux-anchor a{ text-decoration:none; color:#374151; font-weight:600; padding:6px 10px; border-radius:999px; }
.wux-anchor a:hover{ background:#fff4d6; color:#4a3b19 }

/* 区切り（金継ぎ） */
hr.kintsugi{ height:2px; border:0; margin:14px 0;
  background:linear-gradient(90deg,#d4af37,#f6e27a,#d4af37); opacity:.65; border-radius:999px;
}

/* セクション見出しに金ライン */
.wux-section > h2{ color:var(--ink); margin-top:22px }
.wux-section > h2::after{
  content:""; display:block; width:56px; height:4px; margin:6px 0 0;
  background:linear-gradient(90deg, var(--wux-gold), #eecf7d); border-radius:999px;
}

/* モバイル微調整 */
@media (max-width:480px){
  .wux-hero{ padding:16px 0 12px; }
  .wux-anchor{ gap:6px; padding:6px; }
  .wux-anchor a{ padding:6px 8px; font-size:.95rem; }
}
/* =========================
   Wuxing responsive tuning
   ========================= */

/* 共通：ヘッダー高さに合わせたアンカー補正 */
:root{ --header-h: 60px; }
@media (min-width:960px){ :root{ --header-h: 68px; } }

.wux-anchor{
  position: sticky; top: var(--header-h);
  display: flex; gap: 10px; padding: 8px 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.wux-anchor a{ scroll-snap-align: start; white-space: nowrap; }

/* 見出しにスクロール余白（固定ヘッダーで隠れないように） */
:where(h2[id], h3[id], h4[id]){ scroll-margin-top: calc(var(--header-h) + 16px); }

/* パンくずが溢れたら横スクロール */
.breadcrumb ol{
  display:flex; gap:8px; overflow-x:auto; white-space:nowrap;
  -webkit-overflow-scrolling: touch;
}

/* 図版・画像のサイズ最適化 */
.article .content figure img{
  max-width:100%; height:auto; display:block; margin-inline:auto;
}

/* 表：スマホで横スクロールに */
.qref{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
.qref table{ min-width: 560px; }

/* タイポスケール（fluid） */
.article-title{
  font-size: clamp(1.3rem, 3.5vw, 2rem);
}
.lead{
  font-size: clamp(.98rem, 2.4vw, 1.05rem);
}

/* 余白・パディング（ブレークポイント別） */
@media (max-width:480px){
  .wux-hero{ padding: 14px 0 10px; }
  .wux-tags{ gap:6px; }
  .wux-tag{ padding:5px 8px; font-size:.94rem; }
  .toc{ font-size:.95rem; }
  .article .content{ line-height:1.7; }
}

@media (min-width:481px) and (max-width:959px){
  .wux-hero{ padding: 18px 0 12px; }
}

@media (min-width:960px){
  .wux-hero{ padding: 24px 0 18px; }
  .wux-anchor{ gap:12px; }
}
/* ====== Wuxing モバイル簡潔モード ====== */
@media (max-width: 480px){
    /* 1) ヒーロー装飾を弱める（背景の存在感ダウン） */
    .wux-hero{ padding: 12px 0 10px; border-radius: 16px; }
    .wux-hero::before{ opacity: .55; }
    .wux-hero::after{ opacity: .12; }
  
    /* 2) タイトル＆リードを一段コンパクトに */
    .article-title{ font-size: 1.22rem; letter-spacing:.01em; }
    .lead{ font-size: .96rem; line-height: 1.65; }
  
    /* 3) “タグ（丸いピル）”はスマホでは非表示
          → Stickyアンカーだけ残して重複ナビ解消 */
    .wux-tags{ display: none; }
  
    /* 4) Stickyアンカーを小さめピルに & 横スクロールOK */
    .wux-anchor{
      margin-top: 8px; gap: 8px; padding: 6px 8px;
      border-radius: 10px; background: rgba(255,255,255,.92);
      box-shadow: 0 2px 10px rgba(0,0,0,.04);
    }
    .wux-anchor a{ font-size: .95rem; padding: 6px 10px; }
  
    /* 5) 目次や本文も少しだけ圧縮 */
    .toc{ font-size: .95rem; }
    .article .content{ line-height: 1.7; }
  }
  
  /* タップ時の視認性少しアップ（共通） */
  .wux-anchor a:active{ background:#fff4d6; color:#4a3b19; }
  /* ===== Wuxing mobile reading polish ===== */
@media (max-width: 480px){
    /* サイド余白：狭すぎず広すぎず */
    .container.page{ padding-left:14px; padding-right:14px; }
  
    /* ヒーローの“にじみ”弱めて本文を主役に */
    .wux-hero{ padding:12px 0 10px; border-radius:16px; }
    .wux-hero::before{ opacity:.45; }
    .wux-hero::after{  opacity:.10; }
  
    /* タイトル/本文のタイポを小さめ＆行間ゆったり */
    .article-title{ font-size:1.18rem; letter-spacing:.01em; margin:6px 0 8px; }
    .article .lead{ font-size:.98rem; line-height:1.7; margin:4px 0 10px; }
    .article .content{ padding:10px 12px 14px; line-height:1.75; }
    .article .content h2{ font-size:1.06rem; margin:18px 0 8px; }
    .article .content h3{ font-size:1rem;   margin:14px 0 6px;  }
    .article .content p, .article .content li{ font-size:.98rem; }
  
    /* ページ内ナビ：小ぶりなピル＋横スクロール */
    .wux-anchor{
      margin-top:8px; gap:6px; padding:6px 6px; border-radius:10px;
      background:rgba(255,255,255,.92); box-shadow:0 2px 10px rgba(0,0,0,.04);
      overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    .wux-anchor a{ padding:6px 9px; font-size:.92rem; white-space:nowrap; }
    .wux-anchor a:active{ background:#fff4d6; color:#4a3b19; }
  
    /* 目次カードの圧縮 */
    .toc{ font-size:.95rem; border-radius:12px; margin-top:12px; }
  
    /* 表ははみ出さない＆指で流せる */
    .qref{ margin:8px -6px; padding:0 6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .qref table{ min-width:560px; }
  
    /* 画像は幅いっぱいでシャープに */
    .article .content figure img{ max-width:100%; height:auto; display:block; margin-inline:auto; }
  }
  
  /* 見出しジャンプ時にヘッダーで隠れない */
  :where(h2[id],h3[id],h4[id]){ scroll-margin-top: calc(60px + 16px); }
  
  /* 読了インジケータ（CSSだけ先に） */
  #read-progress{
    position:fixed; left:0; top:0; height:3px; width:100%;
    background:linear-gradient(90deg,#d4af37 var(--p,0%), transparent 0);
    z-index:60; pointer-events:none;
  }
  .callout{
    margin:12px 0; padding:10px 12px; border:1px solid #efe9d9; border-radius:12px;
    background:linear-gradient(to bottom, rgba(255,250,242,.92), rgba(255,250,242,.86));
    box-shadow:0 1px 4px rgba(0,0,0,.03);
  }
  .callout .kicker{ font-weight:700; color:#7a5c1d; font-size:.92rem; margin-bottom:4px; }
  /* === Section Rhythm (Wuxing) === */
:root{
    /* セクション間 / ブロック間の基準余白（端末幅に応じて自動で増減） */
    --section-gap: clamp(28px, 6vw, 64px);
    --block-gap:   clamp(14px, 3.5vw, 28px);
    --hr-gap:      clamp(12px, 3vw, 24px);
  }
  
  /* ページの上下にも少し余白 */
  .container.page{ padding-block: clamp(8px, 2vw, 16px) clamp(36px, 5vw, 64px); }
  
  /* 記事ヘッダーまわり */
  .article-header{ margin-bottom: var(--section-gap); }
  .kintsugi{ margin: var(--hr-gap) 0 var(--section-gap); }
  
  /* 目次カードと本文の距離 */
  .toc{ margin-block: 0 var(--section-gap); }
  
  /* セクションの“リズム”：基本はブロック間、見出しの前は大きめ */
  .article .content > * + *{ margin-top: var(--block-gap); }                /* すべての隣接要素に基本間隔 */
  .article .content > * + h2{ margin-top: var(--section-gap); }            /* h2 の直前は広め */
  .article .content h2{ margin: var(--section-gap) 0 12px; }
  .article .content h2:first-of-type{ margin-top: var(--block-gap); }      /* 1個目だけ強すぎないよう調整 */
  .article .content h3{ margin: clamp(18px,3vw,28px) 0 8px; }
  
  /* 図・表・コールアウトなども詰まらないように */
  .article .content :is(figure,.qref,.qa,.callout,table,blockquote){
    margin-block: var(--block-gap);
  }
  
  /* 参考文献・免責の前も余白を置く */
  .references, .disclaimer{ margin-top: var(--section-gap); }
  
  /* スマホでの左右余白（読みやすさ優先） */
  @media (max-width:480px){
    .container.page{ padding-left: 16px; padding-right: 16px; }
  }
  /* ============ PCレイアウト最適化 ============ */
/* 2カラム：本文を広め、右にTOCを固定 */
@media (min-width: 1024px){
    /* 記事全体を2カラムに */
    .article{
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(300px, 1.4fr);
      /* 本文を広め(≒約68〜70%)、TOCは固定幅寄り */
      gap: clamp(24px, 2.8vw, 40px);
      align-items: start;
    }
  
    /* ヒーロー／区切りは全幅で */
    .article-header,
    .kintsugi,
    #references,
    .disclaimer{ grid-column: 1 / -1; }
  
    /* 本文は左カラム */
    .article .content{ grid-column: 1; min-width: 0; }
  
    /* 目次を右カラムにしてsticky化 */
    .article .toc{
      grid-column: 2;
      position: sticky; 
      top: 88px;                       /* ヘッダー分の余白 */
      max-height: calc(100vh - 110px); /* 画面外にあふれない */
      overflow: auto;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 12px 14px;
      box-shadow: 0 6px 18px rgba(0,0,0,.04);
    }
  
    /* ヒーロー直後にTOCが来る時の上マージン微調整 */
    .wux-hero + .toc{ margin-top: 8px; }
  }
  
  /* ============ 図・画像のリキッド対応 ============ */
  .article .content figure{ margin: 16px 0; }
  .article .content img{
    width: 100% !important;  /* HTMLのwidth/height属性を上書き */
    height: auto !important;
    max-width: 100%;
    display: block;
    border-radius: 10px;
    background: #f8fafc;
    object-fit: contain;
  }
  /* 16:9の見栄えを確保したい時（模式図など） */
  .article .content figure > img[alt*="模式図"]{
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  /* 2カラム：本文 + TOC（PC）／1カラム（タブレット以下） */
.article{
    display: grid;
    grid-template-columns: min(760px, 100%) minmax(280px, 1fr);
    gap: 24px;
  }
  @media (max-width: 1024px){
    .article{ display:block; }
    .toc{ margin-top: 12px; }
  }
  
  /* セクション間の上下余白 */
  .article section{ padding-block: 18px; }
  .content > h2{ margin-top: 2.2rem; }
  @media (max-width:640px){
    .article section{ padding-block: 16px; }
    .content > h2{ margin-top: 1.6rem; }
  }
  
  /* ヒーローと本文の間隔 */
  .wux-hero{ margin-bottom: 14px; }
  
  /* TOCの見やすさ */
  .toc{ position: sticky; top: 84px; align-self: start; }
  .toc .toc-list{ line-height: 1.9; }
  
  /* ============ 余白と行間の再調整（PC） ============ */
  @media (min-width: 1024px){
    .article .content h2{ 
      margin-top: clamp(28px, 4.2vw, 48px);
      margin-bottom: 12px;
    }
    .article .content h3{ 
      margin-top: clamp(18px, 2.2vw, 28px);
      margin-bottom: 8px;
    }
    .article .content p,
    .article .content li{ line-height: 1.9; }
  }
  /* スマホでは toc を通常フローにして被りを防ぐ */
@media (max-width: 720px){
    .toc{
      position: static !important;
      top: auto !important;
      margin: 12px 0 16px;
      z-index: 1;
    }
    /* ヒーロー直後の余白を増やす */
    .wux-hero{
      padding-bottom: 8px;
      margin-bottom: 14px;
    }
  }
  
  /* 見出しにスクロール余白（固定ヘッダー分） */
  :root{ --headerH: 60px; }
  [id]{ scroll-margin-top: calc(var(--headerH) + 12px); }
  
  /* セクション間をゆったり */
  .article .content > h2{
    margin-top: 28px;
    padding-top: 8px;
    border-top: 1px dashed #f1deaa;
  }