/* ============================================================
   sanctuary-ext.css
   「天啓の防壁」加護の間 新設3ページ（kago/kantei/weekly）
   ＋ index.html改修部分（ヒーロー・誘いカード） 共通拡張スタイルシート

   [正本] 本ファイルは以下のクラス接頭辞の定義を独占する：
     .art- 画像スロット標準構造（監修A 2-4規定。額装/羽化/レシピN・P・M・D）
     .hx-  横断コンポーネント（.hx-band-caption/.hx-door/.hx-scrim/.hx-lock等）
     .kg-  kago.html 固有（グリッド配置・導入文・補助帯）
     .kt-  kantei.html 固有（.kt-book 書物UI）
     .wk-  weekly.html 固有（.wk-chart 預言グラフ）
   keyframesは kt* / wk* / kg* / hx* のみ新設可。既存 rite系・m系は
   index所有Wave（W1）のみ改変可（契約§2）。

   [依存・読込順序＝2026-08-04実測により確定（sanctuary.cssではない）]
     <link rel="stylesheet" href="auth-style.css">   ← 基礎トークン・header/nav/footer/フォーム部品
     <link rel="stylesheet" href="sanctuary-ext.css"> ← 本ファイル
     （free-campaign.cssという物理ファイルは実在する＝2026-08-06本Wave実測で
     WD0指示書§0-1の「実在しない」記載を訂正。ただし新設3ページ〔kago/kantei/
     weekly〕はキャンペーンバナーを持たないため読込対象外のまま。詳細は
     成果報告\WD0_報告.md参照）
   本ファイルはauth-style.cssの:rootトークンを前提とし、それらは再定義しない。
   ただし --gold/--gold-lt/--gold-deep はauth-style.cssに存在しないため
   （index.html専用の2次定義にしかない・実測確認済み）、本ファイルが唯一
   補完定義する（新色相の追加ではなく、既存の実測値をトークン化するのみ）。

   [禁則（監修A裁定）] 星「形」不使用（点描のみ可）／border-imageは直角
   コンテナ限定・角丸コンテナには使用禁止／粒子・光条・グロー・レンズフレア
   禁止（点描2-10のみ例外）／朱色不使用／外部JSライブラリ禁止／
   新規色相トークンの追加禁止（既存6色系統＋夜相8色のalpha/明度組合せのみ）

   [策定] portal-design-system-architect（監修C）を土台に、監修A第2版・
   02裁定書§4・01契約書§2の裁定、および実物3ファイル（auth-style.css・
   index.html・moon.html）の実測結果を反映して全面改稿
   [検収] tenkei-ui-architect / tenkei-qa-guardian / tenkei-lore-keeper / CDO
   [日付] 2026-08-04（v2）／2026-08-06 元PC実装（WD0 Wave）
   ============================================================ */

:root{
  /* ---- 0. 欠落トークンの補完（§0-2実測。auth-style.cssに存在しない3値） ---- */
  --gold:#6F5A16; --gold-lt:#83691E; --gold-deep:#6E5311;

  /* ---- 1. 夜相トークン8色（監修A 1-3。二相神殿構想の核） ---- */
  --night-bg:       #14161B;
  --night-bg-alt:   #1B1E25;
  --night-surface:  #232730;
  --night-paper:    #F4F2ED;
  --night-ink:      #E9E6DE;
  --night-ink-muted:#A5A29B;
  --night-gold:     #C9A84C;
  --night-gold-lt:  #D7C078;
  --night-gold-rim: rgba(215,192,120,.32);

  /* ---- 2. 書物パネル専用トークン（§0-4。body.nightの再割当てから独立させる
        ためリテラル値で固定。var(--surface)等を経由しない） ---- */
  --ext-paper:           #F7F6F4;
  --ext-paper-bg-alt:    #E6E5E2;
  --ext-paper-ink:       #191919;
  --ext-paper-ink-muted: #5F5F5F;
  --ext-paper-gold:      #6F5A16;
  --ext-paper-gold-lt:   #83691E;
  --ext-paper-rule:      rgba(111,90,22,.20);

  /* ---- 3. 額装・影・角丸（監修A実測値。§0-3：矩形カードは実測0px、
        12pxは書物パネル専用の意図的例外） ---- */
  --ext-radius-card: 0px;       /* 夜相の扉・ロックカード等は直角（監修A 1-6） */
  --ext-radius-paper: 12px;     /* 書物パネルのみ（監修A 3-3の意図的例外） */
  --ext-frame-ring: 0 0 0 1px var(--gold-rim);
  --ext-e-day1: 0 8px 24px rgba(25,25,25,.08);          /* ライト相相当（将来用） */
  --ext-e-night1: 0 12px 32px rgba(0,0,0,.45);          /* 扉カード（監修A 3-2規定） */
  --ext-e-night2: 0 16px 40px rgba(0,0,0,.55);          /* 扉hover／ロックカード */
  --ext-e-paper: 0 0 0 1px var(--night-gold-rim), 0 24px 64px rgba(0,0,0,.55), 0 0 96px rgba(215,192,120,.07); /* 書物パネル（監修A 3-3。最後の1枚が「灯りのこぼれ」上限） */

  /* ---- 4. 非会員ロック（.hx-lock共通。監修A 2-5・3-5規定） ---- */
  --ext-lock-veil: rgba(247,246,244,.86);
  --ext-lock-blur: blur(6px);   /* 許容帯5〜7px */

  /* ---- 5. 帯5色（tone）の意味キー。契約§5 WEEKLY_POOLS.bands[].toneと1:1対応。
        新色相を追加せず、金系2階調（b5/b4）・生成り白1（b3）・ink-muted系2階調
        （b2/b1）の3ファミリーで識別性を確保する（--silverには夜相版が無いため
        b3をvar(--ink)＝夜相ではnight-ink・生成り白で代替＝WD0裁定・§0-5） ---- */
  --ext-tone-gold-fg:   var(--gold-lt);              /* b5 追い風の日 80-100 */
  --ext-tone-gold-bg:   rgba(215,192,120,.16);
  --ext-tone-warm-fg:   var(--gold);                 /* b4 見晴らしの日 60-79 */
  --ext-tone-warm-bg:   rgba(215,192,120,.09);
  --ext-tone-plain-fg:  var(--ink);                  /* b3 平らかな日 40-59 */
  --ext-tone-plain-bg:  rgba(233,230,222,.10);
  --ext-tone-shade-fg:  var(--ink-muted);            /* b2 守りの日 20-39 */
  --ext-tone-shade-bg:  rgba(165,162,155,.10);
  --ext-tone-indigo-fg: var(--ink-muted);            /* b1 雨宿りの日 0-19（shadeより不透明度を下げ更に沈める） */
  --ext-tone-indigo-bg: rgba(165,162,155,.16);

  /* ---- 6. z-index帯 ---- */
  --ext-z-scrim: 1;
  --ext-z-caption: 2;
  --ext-z-badge: 3;
  --ext-z-lock: 4;
}

/* ── body.night：夜相ページ共通の変数再割当て（監修A 3-1推奨方式の完全形） ──
   kago.html/kantei.html/weekly.html/両ゲートの<body>に付与する。
   既存コンポーネント（.sc-card等の既存CSSクラスを万一併用する場合も含め）が
   var(--surface)等を参照するだけで自動的に夜相化される設計。
   ⚠ 書物パネル（.kt-book系）だけはこの再割当ての影響を受けない
     （§2-1トークンブロックの--ext-paper-*を使うため。§0-4参照） */
body.night{
  --bg:        var(--night-bg);
  --bg-alt:    var(--night-bg-alt);
  --surface:   var(--night-surface);
  --ink:       var(--night-ink);
  --ink-mid:   var(--night-ink);       /* 夜相にink-mid相当の中間階調トークンが無いためnight-inkで代替 */
  --ink-muted: var(--night-ink-muted);
  --gold:      var(--night-gold);
  --gold-lt:   var(--night-gold-lt);
  --gold-deep: var(--night-gold);      /* 夜相にgold-deep相当が無いためnight-goldで代替 */
  --gold-rim:  var(--night-gold-rim);
  --silver:    var(--night-ink-muted); /* 夜相にsilver相当が無いためink-muted系で代替（罫線等の弱色用途） */
  --silver-lt: var(--night-gold-rim);  /* 夜相の縁は金である（監修A1-6）ため、罫線色にも金の淡いリムを充てる */
  background: var(--bg);
  color: var(--ink);
}
/* 夜相の敷居（監修A 3-2）：ページ最上端の金線。ライト地に金線は1.68:1で不可視の
   ため夜相専用（実測根拠は監修A 1-3表）。header直下・ページコンテンツの最上端に置く */
.hx-threshold{
  height:1px;
  background:var(--night-gold-lt);
  transform-origin:center;
  animation:hxThresholdIn .9s ease-out both;
}
@keyframes hxThresholdIn{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@media(prefers-reduced-motion:reduce){ .hx-threshold{animation:none} }

/* ── 夜空の点描（監修A 2-10。夜相の地の質感・唯一の粒子的表現） ──
   body.nightのページ全面に1枚のみ設置する（JS不使用・画像不使用）。
   形状は円点のみ。点滅・移動・パララックスは禁止、層全体のopacityを
   16s周期でゆらす1本のみ許可（常時アニメ許可枠：全サイトでこの1本＋
   .hx-door__lit-dotのパルス＋.wk-chart__point--todayの脈動＝計3本が上限）。
   座標は実装時に画像スロット・書物パネル・ロックカードの背後を避けて
   ページごとに調整すること（重畳禁止＝監修A規定）。
   ⚠ §6-4で密度強化版へ置換（点数12点・gradient数のみ増加、アニメ本数は
   不変）。以下は初版で、§6-4のブロックが最終的にこれを上書きする。 */
body.night::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(233,230,222,.32) 0, rgba(233,230,222,.32) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.30) 0, rgba(215,192,120,.30) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.28) 0, rgba(233,230,222,.28) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.30) 0, rgba(233,230,222,.30) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.26) 0, rgba(215,192,120,.26) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.32) 0, rgba(233,230,222,.32) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.28) 0, rgba(233,230,222,.28) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.24) 0, rgba(215,192,120,.24) 1px, transparent 1.6px);
  background-size: 480px 480px, 620px 620px, 390px 390px, 710px 710px, 540px 540px, 330px 330px, 660px 660px, 470px 470px;
  background-position: 8% 12%, 22% 64%, 41% 30%, 58% 78%, 67% 18%, 79% 52%, 88% 8%, 93% 88%;
  background-repeat: repeat;
  opacity:.34;
  animation: hxStipple 16s ease-in-out infinite;
}
@keyframes hxStipple{ 0%,100%{opacity:.28} 50%{opacity:.40} }
@media(prefers-reduced-motion:reduce){ body.night::before{ animation:none; opacity:.34 } }
/* 画像スロット・書物パネル・ロックカードの背後で点が透けないよう、各コンポーネントは
   実体を持つ背景色（--night-surface等）を必ず持つ（監修A「重畳禁止」の実装保証）。
   個々のコンポーネント側は position:relative; z-index:1以上 を持つため、
   body.night::before（z-index:0）は自動的にその背後に回る。 */

/* ============================================================
   §2-2. 刻相4相トークン（10書第3章・kantei.html限定・CDO批准待ち）
   ============================================================ */
/* ── 刻相（実験実装・CDO批准待ち＝10書T2-11・W2申し送り事項） ──
   kantei.htmlのみが対象。批准前は使用しない（body.nightのみで運用）。
   承認後、kantei.js（W2所管）がbodyへ class="night" の代わりに
   data-koku="asa|hiru|yu|yoru" を付与すると、この4分岐が地色・墨・差し色を
   切り替える。yoru（夜）は夜相トークンと同値。批准が下りない場合のフォール
   バックは「kantei.htmlも通常どおりclass="night"のまま」＝本ブロックは
   未使用のまま無害に残る。 */
body[data-koku="asa"]{   /* 朝 5-11時：暁の紙 */
  --bg:#E9E7E1; --bg-alt:#E9E7E1; --surface:#F7F6F4;
  --ink:#191919; --ink-muted:#5F5F5F; --gold:#6F5A16; --gold-lt:#83691E;
  background:var(--bg); color:var(--ink);
}
body[data-koku="hiru"]{  /* 昼 11-16時：現行--bgと同値＝昼の神殿と同じ地 */
  --bg:#DDDDDB; --bg-alt:#E6E5E2; --surface:#F7F6F4;
  --ink:#191919; --ink-muted:#5F5F5F; --gold:#6F5A16; --gold-lt:#83691E;
  background:var(--bg); color:var(--ink);
}
body[data-koku="yu"]{    /* 夕 16-22時：茜の残る紙 */
  --bg:#E5DDD3; --bg-alt:#E5DDD3; --surface:#F3EFE9;
  --ink:#191919; --ink-muted:#5F5F5F; --gold:#6E5311; --gold-lt:#6E5311;
  background:var(--bg); color:var(--ink);
}
body[data-koku="yoru"]{  /* 夜 22-5時：夜相トークンそのまま（body.nightと同値） */
  --bg:var(--night-bg); --bg-alt:var(--night-bg-alt); --surface:var(--night-surface);
  --ink:var(--night-ink); --ink-muted:var(--night-ink-muted);
  --gold:var(--night-gold); --gold-lt:var(--night-gold-lt); --gold-rim:var(--night-gold-rim);
  background:var(--bg); color:var(--ink);
}
/* 朝・夕の新地色2種の対コントラスト実測（付録A式）：#191919 on #E9E7E1＝13.9:1／
   #191919 on #E5DDD3＝13.2:1（いずれも--bg系と同帯の明度のため本文可）。
   刻相採用時は書物パネル（--ext-paper-*固定値）の扱いは変わらない（常に紙のまま）。 */

/* ============================================================
   §2-3. 画像スロット基盤 .art-slot / .art-veil（監修A 2-4を実コード化・全レシピ収載）
   ============================================================ */
/* .art-slot＝全画像コンポーネントの基盤（監修A 2-4の実コードそのもの。契約§2で
   「.art-＝画像スロット標準構造は監修Aの条文が正」と裁定済み）。
   基本形はHTML側で以下のように使う：
   <figure class="art-slot art-slot--candle" style="--ratio: 3 / 2; --focus: 50% 50%;">
     <img src="images/kago/door_kantei_1200x800.webp" width="1200" height="800"
          alt="" loading="lazy" decoding="async">
     <span class="art-veil" aria-hidden="true"></span>
   </figure>
   ヒーロー画像のみ loading="eager" fetchpriority="high" ＋<head>にpreload必須
   （監修A 2-7）。装飾画像はalt=""、indexヒーローのみalt="天啓姫の像"。 */
.art-slot{
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--ratio, 3/2);
  background:var(--night-surface); /* 画像未着時のプレースホルダー（夜相既定） */
}
.art-slot img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--focus, 50% 50%);
}

/* ── レシピN「素の窓」：ほぼ無加工の額装型（ライト相・indexヒーロー専用。W1所管） ── */
.art-slot--bare img{ filter:saturate(.94); }
.art-slot--bare{
  border-radius:var(--ext-radius-paper); /* 実測12px仮置き。§0-3参照。W1実装時に既存に再確認 */
  box-shadow:var(--ext-frame-ring), 0 16px 48px rgba(25,25,25,.12);
}
.art-slot--bare .art-veil{
  position:absolute; inset:0;
  box-shadow:inset 0 0 40px rgba(25,25,25,.10);
  pointer-events:none;
}

/* ── レシピP「紙化」：デュオトーン馴染ませ型（ライト相の情景既定。本改修の新設
   ページでは未使用＝すべて夜相のためM使用。将来ライト相ページに情景を足す
   場合の規定として保持） ── */
.art-slot--paper img{ filter:grayscale(100%) sepia(14%) brightness(104%) contrast(88%) saturate(90%); }
.art-slot--paper .art-veil{
  position:absolute; inset:0;
  background:rgba(247,246,244,.20);
  pointer-events:none;
}

/* ── レシピM「燭火」：夜相の窓の既定（kago扉6枚／kantei・weekly題字帯に適用。
   §0-5で監修C原案のP指定をMへ訂正済み） ── */
.art-slot--candle img{ filter:brightness(.82) contrast(.94) saturate(.88) sepia(6%); }
.art-slot--candle.art-slot--sat92 img{ filter:brightness(.82) contrast(.94) saturate(.92) sepia(6%); } /* weekly.html帯の例外（監修A規定：暁の金色を殺さない） */
.art-slot--candle{
  border:1px solid var(--night-gold-rim); /* 直角＋金縁（監修A規定） */
  border-image:linear-gradient(135deg, rgba(215,192,120,.50), rgba(215,192,120,.14) 40%, rgba(215,192,120,.14) 60%, rgba(215,192,120,.50)) 1;
}
.art-slot--candle .art-veil{
  position:absolute; inset:0;
  box-shadow:inset 0 0 56px rgba(10,11,14,.42);
  pointer-events:none;
}

/* ── レシピD「夜帳」：暗部スクリム型（夜系素材を夜相の題字帯に使う場合。
   kago.html題字帯専用＝列柱の回廊(07_加護の間_内陣)に適用） ── */
.art-slot--curtain .art-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,22,27,.20) 0%, rgba(20,22,27,.44) 55%, rgba(20,22,27,.78) 100%);
  pointer-events:none;
}
.art-slot--curtain{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
} /* 帯下端の羽化（監修A規定：羽化と額装は排他のため縁取り無し） */

/* ── 帯（.art-slot--band）：kantei/weekly題字帯の羽化バリアント。レシピMと併用 ── */
.art-slot--band{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* ============================================================
   §2-4. 画像上テキストのスクリム .hx-scrim（監修A 2-5・原則使用回避）
   ============================================================ */
/* 原則「画像上に本文を置かない」。題字は帯の直下（紙面側）に逃がすのが第一候補
   （2-6の.hx-band-caption）。やむを得ず画像上に文字を置く場合（扉ラベル等・
   20字以内の惹句に限る）のみ、.art-veilに加えてこれを重ねる。 */
.hx-scrim{
  position:absolute; inset:0;
  z-index:var(--ext-z-scrim);
  pointer-events:none;
}
.hx-scrim--dark-body{    background:linear-gradient(to top, rgba(10,11,14,.68) 0%, transparent 70%); }
.hx-scrim--dark-heading{ background:linear-gradient(to top, rgba(10,11,14,.58) 0%, transparent 60%); }
.hx-figure__caption{
  position:absolute; left:0; right:0; bottom:0;
  z-index:var(--ext-z-caption);
  padding:16px 20px;
  color:var(--night-ink);
  font-family:var(--font);
  font-size:1.0625rem; font-weight:500;
}

/* ============================================================
   §2-5. 題字帯キャプション .hx-band-caption（帯直下・紙面側の題字）
   ============================================================ */
/* 帯本体は<figure class="art-slot art-slot--curtain(または--candle) art-slot--band">
   （§2-3）で組む。文字は帯に乗せず、この直下ブロックへ。 */
.hx-band-caption{ text-align:center; padding:24px 16px 0; }
.hx-band-caption__eyebrow{
  font-size:.75rem; letter-spacing:.32em; color:var(--gold);
  text-transform:uppercase;
}
.hx-band-caption__title{
  font-family:var(--font); font-weight:500; letter-spacing:.14em;
  font-size:clamp(1.75rem, 1.35rem + 1.9vw, 2.625rem); /* kago用。kantei/weeklyは.hx-band-caption--compactで縮小 */
  color:var(--ink); margin:8px 0;
}
.hx-band-caption--compact .hx-band-caption__title{ font-size:clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); }
.hx-band-caption__lead{ color:var(--ink-muted); font-size:1rem; max-width:38em; margin:0 auto; }

/* ============================================================
   §2-6. 扉カード .hx-door（画像部分は.art-slotを内包する）
   ============================================================ */
/* HTML雛形（通常＝会員・新着あり）：
<a class="hx-door is-lit" href="kantei.html" data-door="kantei">
  <figure class="art-slot art-slot--candle" style="--ratio:3/2; --focus:50% 50%;">
    <img src="images/kago/door_kantei_1200x800.webp" width="1200" height="800"
         alt="" loading="lazy" decoding="async">
    <span class="art-veil" aria-hidden="true"></span>
  </figure>
  <div class="hx-door__body">
    <h3 class="hx-door__name">詳細鑑定書</h3>
    <p class="hx-door__desc">一日を四つの節に読む、深き託宣</p>
    <p class="hx-door__state"><span class="hx-door__lit-dot" aria-hidden="true"></span>今日の書が、ひらかれるのを待っています</p>
  </div>
</a>
   非会員向け（ロック。カードはグレーアウトしない＝監修A規定）：
<a class="hx-door is-locked" href="kantei.html" data-door="kantei">
  <figure class="art-slot art-slot--candle" style="--ratio:3/2; --focus:50% 50%;">
    <img src="images/kago/door_kantei_1200x800.webp" width="1200" height="800" alt="" loading="lazy" decoding="async">
    <span class="art-veil" aria-hidden="true"></span>
  </figure>
  <div class="hx-door__body">
    <h3 class="hx-door__name">詳細鑑定書</h3>
    <p class="hx-door__desc">一日を四つの節に読む、深き託宣</p>
    <p class="hx-door__state hx-door__state--locked">ご契約で開きます</p>
  </div>
</a> */
.hx-door{
  display:block;
  min-height:88px; /* 監修A規定 */
  text-decoration:none; color:inherit;
  background:var(--surface);            /* body.night配下で自動的にnight-surfaceになる */
  border-radius:var(--ext-radius-card); /* 0px＝直角（監修A 1-6・§0-3実測） */
  box-shadow:var(--ext-frame-ring), var(--ext-e-night1);
  overflow:hidden;
  transition:transform var(--m-dur-fast,.24s) cubic-bezier(.4,0,.2,1),
             box-shadow var(--m-dur-fast,.24s) cubic-bezier(.4,0,.2,1);
}
.hx-door .art-slot{ border-radius:0; } /* 扉内画像も直角（書物パネルのみ角丸の例外） */
.hx-door:hover, .hx-door:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--ext-frame-ring), var(--ext-e-night2);
}
.hx-door:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.hx-door__body{ padding:20px; }
.hx-door__name{
  font-family:var(--font); font-weight:500; letter-spacing:.14em;
  font-size:clamp(1.25rem, 1.05rem + .9vw, 1.5rem);
  color:var(--ink); margin:0 0 8px;
}
.hx-door__desc{ color:var(--ink-muted); font-size:.9375rem; max-width:22em; margin:0 0 12px; }
.hx-door__state{ display:flex; align-items:center; gap:6px; font-size:.875rem; color:var(--ink-muted); }
.hx-door__lit-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold-lt); flex-shrink:0;
  animation:hxLitPulse 2.4s ease-in-out infinite; /* 常時アニメ許可枠2/3 */
}
.hx-door__state--locked{ color:var(--gold); }
@keyframes hxLitPulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
@media(prefers-reduced-motion:reduce){ .hx-door__lit-dot{ animation:none; opacity:1 } }

/* ============================================================
   §2-7. kago.html固有レイアウト .kg-*
   ============================================================ */
.kg-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
  max-width:960px; /* 既存.showcase-grid（index.htmlの6枚カード）実測値960pxに合わせた。
    監修Cの仮称--container-max(1040px想定)より実測に基づくこちらを正とする */
  margin:0 auto;
}
@media(min-width:768px){ .kg-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }
@media(min-width:1024px){ .kg-grid{ grid-template-columns:repeat(3,1fr); gap:28px; } }

.kg-greeting{ text-align:center; color:var(--ink); font-size:1rem; margin:24px 0; }
.kg-intro{ color:var(--ink-muted); font-size:1rem; max-width:38em; margin:8px auto 0; text-align:center; }
.kg-notice{ text-align:center; color:var(--ink-muted); font-size:.9375rem; margin:32px auto 0; padding:16px; max-width:38em; }
.kg-back-link{ text-align:center; margin:24px 0; }
.kg-back-link a{ color:var(--gold-lt); text-decoration:underline; text-underline-offset:.2em; }
.kg-guide-card{ /* 案内の栞（10書4-1・W4実装）。ここでは基礎スタイルのみ用意 */
  max-width:520px; margin:24px auto; padding:24px 28px;
  background:var(--surface); border:1px solid var(--night-gold-rim);
  box-shadow:var(--ext-e-night1);
}
.kg-guide-card__close{
  display:block; margin:16px auto 0; min-height:44px; padding:0 20px;
  background:transparent; border:1px solid var(--gold-rim); color:var(--ink-muted);
  font-family:var(--font); font-size:.75rem; letter-spacing:.2em; cursor:pointer;
}

/* ============================================================
   §2-8. 書物UI .kt-book（夜相の中の唯一の灯り。§0-4のパネル専用トークンを使用）
   ============================================================ */
/* 監修A 2-3節：四つの節は縦積み常時全展開。アコーディオン化しない
   （旧W2記述にあった「クリックで開閉」は不採用。読了検知はIntersectionObserver）。
   HTML雛形は監修C §4-2のものをそのまま使用可（クラス名の変更なし）。 */
.kt-book{
  max-width:38em;
  margin:0 auto;
  animation:ktBookOpen 1.1s cubic-bezier(.22,.61,.21,1) both;
  backface-visibility:hidden;
}
.kt-book__lead{ text-align:center; margin:0 0 48px; }
.kt-book__theme-label{ font-size:.8125rem; letter-spacing:.2em; color:var(--ext-paper-gold); }
.kt-book__theme{
  font-family:var(--font); font-weight:500;
  font-size:clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem);
  color:var(--ext-paper-ink); margin:8px 0 0;
}
.kt-book__section{
  background:var(--ext-paper-bg-alt);
  border-left:2px solid transparent;
  border-radius:var(--ext-radius-paper);
  padding:24px 20px; margin-bottom:24px;
  transition:background .48s cubic-bezier(.4,0,.2,1), border-color .48s cubic-bezier(.4,0,.2,1);
}
.kt-book__section.is-now{
  background:var(--ext-paper);
  border-left-color:var(--ext-paper-gold);
  box-shadow:var(--ext-e-paper);
  padding:32px;
}
.kt-book__section-title{ display:flex; align-items:baseline; gap:12px; font-size:clamp(1.125rem, 1rem + .6vw, 1.375rem); margin:0 0 16px; }
.kt-book__section.is-now .kt-book__section-title{ color:var(--ext-paper-gold); }
.kt-book__period-name{ font-family:var(--font); font-weight:500; flex-shrink:0; color:var(--ext-paper-ink); }
.kt-book__period-poem{ color:var(--ext-paper-ink-muted); font-size:.9em; }
.kt-book__read-mark{ width:8px; height:8px; border-radius:50%; background:transparent; margin-left:auto; flex-shrink:0; transition:background .24s, box-shadow .24s; }
.kt-book__section.is-read .kt-book__read-mark{ background:var(--ext-paper-gold-lt); box-shadow:0 0 6px rgba(215,192,120,.42); }
.kt-book__text{ font-size:1rem; line-height:2.0; color:var(--ext-paper-ink); font-weight:300; }
.kt-book__guard{ margin-top:12px; font-size:.9375rem; color:var(--ext-paper-ink); }
.kt-book__guard-label{ color:var(--ext-paper-gold); font-weight:500; margin-right:8px; }
.kt-book__closing{ text-align:center; margin:48px 0 32px; }
.kt-book__closing-label{ font-size:.8125rem; letter-spacing:.2em; color:var(--ext-paper-gold); }
.kt-book__closing-text{ font-size:1rem; line-height:2.0; color:var(--ext-paper-ink); margin-top:8px; }
.kt-book__read-list{ display:flex; justify-content:center; gap:12px; list-style:none; padding:0; margin:0 0 32px; }
.kt-book__read-list-dot{ width:8px; height:8px; border-radius:50%; background:var(--ext-paper-bg-alt); }
.kt-book__read-list-dot.is-read{ background:var(--ext-paper-gold-lt); }
@media(max-width:767px){
  .kt-book__section{ padding:16px; }
  .kt-book__section.is-now{ padding:20px; }
}

/* 開帳アニメーション「書の儀」（監修A 3-2儀式1。総尺2.2s） */
@keyframes ktBookOpen{
  0%{ opacity:0; transform:perspective(1200px) rotateY(-84deg); transform-origin:left center; }
  30%{ opacity:1; }
  100%{ opacity:1; transform:perspective(1200px) rotateY(0deg); }
}
@keyframes ktThemeSettle{ from{letter-spacing:.30em; opacity:0} to{letter-spacing:normal; opacity:1} }
.kt-book__theme{ animation:ktThemeSettle .36s 1.44s cubic-bezier(.4,0,.2,1) both; }
.kt-book__section.is-now{ animation:ktNowBorderLight .4s 1.8s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes ktNowBorderLight{ to{ border-left-color:var(--ext-paper-gold); } }
/* 同日2回目以降は簡略版（kt-book.jsがbody等へclassを付与。W2実装） */
.kt-book--simple-fade{ animation:ktSimpleFade .6s cubic-bezier(.4,0,.2,1) forwards; opacity:0; }
@keyframes ktSimpleFade{ from{opacity:0} to{opacity:1} }
.kt-book--simple-fade .kt-book__theme, .kt-book--simple-fade .kt-book__section.is-now{ animation:none; }

@media(prefers-reduced-motion:reduce){
  .kt-book, .kt-book__theme, .kt-book__section.is-now{ animation:none !important; }
  .kt-book{ opacity:1; transform:none; }
  .kt-book__theme{ letter-spacing:normal; opacity:1; }
  .kt-book__section.is-now{ border-left-color:var(--ext-paper-gold); }
}

/* ============================================================
   §2-9. 預言グラフ .wk-chart（SVG座標は§0-5の検算済み値を使用）
   ============================================================ */
.wk-chart{ margin:0 auto; }
.wk-chart__svg{ width:100%; height:auto; display:block; }
.wk-chart__baseline{ stroke:var(--night-gold-rim); stroke-width:1; }
.wk-chart__line{ fill:none; stroke:var(--night-gold); stroke-width:1.75; }
.wk-chart__point{ opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.6); fill:var(--night-gold); }
.wk-chart__point--low{ fill:var(--night-ink-muted); }         /* 低い日（19以下）：藍の陰り新色は導入しない（監修A規定） */
.wk-chart__point--today{ fill:var(--night-gold-lt); }
.wk-chart__glow{ opacity:0; fill:var(--night-gold-lt); }
.wk-chart__value-label{ fill:var(--night-ink); font-feature-settings:"tnum"; font-size:15px; font-family:var(--font); }
.wk-chart__day-label{ fill:var(--night-ink-muted); font-size:12px; font-family:var(--font); }
.wk-chart__hit-area{ fill:transparent; cursor:pointer; }

/* 各日点の出現（delay=600+257×i ms。監修A規定式） */
.wk-chart__point-group[data-day="0"] .wk-chart__point{ animation:wkPointReveal .24s 600ms  cubic-bezier(.4,0,.2,1) forwards; }
.wk-chart__point-group[data-day="1"] .wk-chart__point{ animation:wkPointReveal .24s 857ms  cubic-bezier(.4,0,.2,1) forwards; }
.wk-chart__point-group[data-day="2"] .wk-chart__point{ animation:wkPointReveal .24s 1114ms cubic-bezier(.4,0,.2,1) forwards; }
.wk-chart__point-group[data-day="3"] .wk-chart__point{ animation:wkPointReveal .24s 1371ms cubic-bezier(.4,0,.2,1) forwards; }
.wk-chart__point-group[data-day="4"] .wk-chart__point{ animation:wkPointReveal .24s 1628ms cubic-bezier(.4,0,.2,1) forwards; }
.wk-chart__point-group[data-day="5"] .wk-chart__point{ animation:wkPointReveal .24s 1885ms cubic-bezier(.4,0,.2,1) forwards; }
.wk-chart__point-group[data-day="6"] .wk-chart__point{ animation:wkPointReveal .24s 2142ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes wkPointReveal{ to{ opacity:1; transform:scale(1); } }
.wk-chart__point--today{ animation:wkTodayPulse 2.8s 2.4s ease-in-out infinite; } /* 常時アニメ許可枠3/3 */
@keyframes wkTodayPulse{ 0%,100%{r:6} 50%{r:7} }
.wk-chart__glow{ animation:wkGlowIn .6s 2.6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes wkGlowIn{ to{ opacity:.18; } } /* 監修A規定値=.18（座布団円） */
.wk-chart__notice{ opacity:0; animation:wkNoticeFade .6s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes wkNoticeFade{ to{ opacity:1; } }

@media(prefers-reduced-motion:reduce){
  .wk-chart__line{ transition:none !important; }
  .wk-chart__point, .wk-chart__glow, .wk-chart__notice{ animation:none !important; opacity:1 !important; transform:none !important; }
  .wk-chart__point--today{ animation:none !important; r:6; stroke:var(--night-gold); stroke-width:1.5; }
}

/* 帯背景（tone: gold/warm/plain/shade/indigo。帯名は監修E確定値＝§1-4） */
.wk-chart__band[data-tone="gold"]  { fill:var(--ext-tone-gold-bg); }
.wk-chart__band[data-tone="warm"]  { fill:var(--ext-tone-warm-bg); }
.wk-chart__band[data-tone="plain"] { fill:var(--ext-tone-plain-bg); }
.wk-chart__band[data-tone="shade"] { fill:var(--ext-tone-shade-bg); }
.wk-chart__band[data-tone="indigo"]{ fill:var(--ext-tone-indigo-bg); }

/* 日別詳細リスト */
.wk-days__item{ border-left:2px solid transparent; padding:12px 16px; border-radius:0; transition:background .48s, border-color .48s; }
.wk-days__item[data-band="b1"], .wk-days__item[data-band="b2"]{ border-left-color:var(--ink-muted); background:var(--ext-tone-shade-bg); }
.wk-days__item.is-today{ border-left-color:var(--gold); background:var(--surface); }
.wk-days__item.is-highlighted{ background:var(--bg-alt); }
.wk-days__date{ color:var(--ink); font-feature-settings:"tnum"; }
.wk-days__score{ color:var(--gold-lt); margin-left:8px; }
.wk-days__band-name{ color:var(--ink-muted); margin-left:8px; font-size:.85em; }
.wk-days__text{ color:var(--ink); line-height:1.9; margin-top:4px; }
.wk-days__guard{ color:var(--ink-muted); font-size:.9em; margin-top:4px; }

/* 帯凡例 */
.wk-legend{ display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; justify-content:center; }
.wk-legend__item{ display:flex; align-items:center; gap:6px; font-size:.875rem; color:var(--ink-muted); }
.wk-legend__swatch{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.wk-legend__item[data-tone="gold"]   .wk-legend__swatch{ background:var(--ext-tone-gold-fg); }
.wk-legend__item[data-tone="warm"]   .wk-legend__swatch{ background:var(--ext-tone-warm-fg); }
.wk-legend__item[data-tone="plain"]  .wk-legend__swatch{ background:var(--ext-tone-plain-fg); }
.wk-legend__item[data-tone="shade"]  .wk-legend__swatch{ background:var(--ext-tone-shade-fg); opacity:1; }
.wk-legend__item[data-tone="indigo"] .wk-legend__swatch{ background:var(--ext-tone-indigo-fg); opacity:.7; } /* shadeとindigoは同一色相のためopacityで最終差別化 */
.wk-legend__range{ font-feature-settings:"tnum"; color:var(--ink-muted); font-size:.8125rem; }
.wk-legend__note{ text-align:center; color:var(--ink-muted); font-size:.875rem; max-width:38em; margin:12px auto 0; }

/* ============================================================
   §2-10. 非会員ロック .hx-lock（DOM秘匿：本物の文章はDOMに置かない）
   ============================================================ */
/* ⚠️セキュリティ機構ではなく視覚効果。ぼかすのは必ずダミー見本文のみ
   （契約§6・監修A 3-5のDOM秘匿要件）。本物の鑑定文・預言文をDOMへ出力して
   ぼかすことを禁止する。 */
.hx-lock__content{ filter:var(--ext-lock-blur); user-select:none; pointer-events:none; }
.hx-lock__gate{ position:relative; display:flex; align-items:center; justify-content:center; padding:32px 0; }
.hx-lock__card{
  background:var(--surface);
  box-shadow:var(--ext-frame-ring), var(--ext-e-night2);
  border-radius:var(--ext-radius-card); /* 0px＝直角 */
  border:1px solid var(--night-gold-rim);
  border-image:linear-gradient(135deg, rgba(215,192,120,.50), rgba(215,192,120,.14) 40%, rgba(215,192,120,.14) 60%, rgba(215,192,120,.50)) 1;
  padding:32px; max-width:420px; text-align:center;
}
.hx-lock__card p{ color:var(--ink); }
.hx-lock__cta{
  display:inline-block; margin-top:16px; padding:13px 30px;
  background:var(--gold); color:var(--night-bg); /* 7.92:1（監修A実測） */
  font-family:var(--font); font-size:.7rem; letter-spacing:.15em; text-decoration:none;
}

/* ============================================================
   §2-11. フォーカス可視・共通a11y
   ============================================================ */
.hx-door:focus-visible,
.wk-chart__point-group:focus-visible,
.kt-book__section-title:focus-visible,
.kg-guide-card__close:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ============================================================
   §6 没入強化（14書§3・第3次オーナー指示「魅入るプラットフォーム」対応）
   本章は既存§0〜§2の定義を一切変更しない、追補のみのブロック群。
   ============================================================ */

/* ---- §6-1. .hx-grain（グレイン質感オーバーレイ） ---- */
/* 厚塗り絵画の質感を補うノイズオーバーレイ（14書§3-1）
   夜相・ライト相どちらでも使える汎用装飾（色を持たないため相を問わない）。
   静止画像でありアニメーションを持たないため、気配の原則の対象外
   （明滅なし＝光過敏規約の対象外）。 */
.hx-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-size:120px 120px;
}
/* 夜相での重なりは既定でやや強め（暗地の方がオーバーレイ合成が沈みやすいため） */
body.night .hx-grain{ opacity:.045; }
/* 使用側は装飾用の <span class="hx-grain" aria-hidden="true"></span> を
   position:relative を持つ親要素の内部に置くだけ（新規JSは不要）。 */

/* ---- §6-2. .hx-descend（層の通過・14書第2章の完成形。夜相ページへの拡張込み） ---- */
/* index.html（W1所管）がライト相4層境界に使用するほか、夜相ページ（kago→kantei等の
   ページ間遷移の代替として、同一ページ内の節境界）でも同一クラスを
   再利用できるよう、body.night配下の配色分岐をここで定義する。 */
.hx-descend{
  position:relative;
  height:56px;
  overflow:hidden;
  pointer-events:none;
}
.hx-descend__band{
  position:absolute; inset:0;
  background:url("images/sanctuary-band.webp") center center / 140% auto no-repeat;
  opacity:.22;
}
/* ライト相：sanctuary.css既存3トークン（--scrim/--scrim-alt/--scrim-deep）の橋渡し。
   これらはsanctuary.css側の:rootにのみ存在するためindex.html文脈でのみ実値を持つ。
   sanctuary-ext.css単体（夜相ページ）で使う場合は下のbody.night分岐が優先される。 */
.hx-descend::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--scrim-alt,rgba(238,237,234,.94)) 0%, var(--scrim,rgba(247,246,244,.93)) 100%);
  opacity:.6;
}
.hx-descend--court::before{
  background:linear-gradient(180deg, var(--scrim,rgba(247,246,244,.93)) 0%, var(--scrim-deep,rgba(233,232,229,.90)) 100%);
}
/* 夜相：--night-bg系のみで橋渡し（新規色相を発明しない。既存の§2-1トークンのみ使用） */
body.night .hx-descend__band{ opacity:.14; } /* 夜相は点描（§6-4）と重畳しないよう帯を弱める */
body.night .hx-descend::before{
  background:linear-gradient(180deg, var(--night-bg-alt) 0%, var(--night-bg) 100%);
  opacity:.7;
}

/* 登場は各ページの既存reveal機構に相乗りする設計（新規IOを増やさない）。
   ライト相＝index.html独自の.reveal（W1所管・W1指示書§8-2手順3）。
   夜相ページで採用する場合はkg.js/kt.js/wk.js側の.m-revealへ.hx-descendを
   加えるか、同等のIntersectionObserverへ登録することを各ページ実装Waveの
   判断に委ねる（sanctuary-ext.cssはCSSのみの責務のため、ここでは終端状態のみ定義）。 */
.hx-descend{opacity:0;transform:scaleY(.7);transform-origin:top;transition:opacity .9s var(--ease,cubic-bezier(.4,0,.2,1)),transform .9s var(--ease,cubic-bezier(.4,0,.2,1))}
.hx-descend.in{opacity:1;transform:scaleY(1)}

@media(max-width:900px){
  .hx-descend{height:36px}
  .hx-descend__band{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hx-descend{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- §6-3. カーソル追従の淡光 .hx-glow-host（14書§3-4の完成形） ---- */
/* PC（pointer:fine）限定・reduced-motion除外。夜相では金の発色が強い（監修A実測
   7.92:1）ため、淡光の色をnight-gold系へ分岐させ、ライト相と統一感を持たせつつ
   夜相の方がわずかに強く発光して見えるようにする（監修A4-1「金は夜相でこそ輝く」
   の原則をこの淡光にも適用）。 */
.hx-glow-host{position:relative}
.hx-glow-host::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease,ease);
  background:radial-gradient(220px 220px at var(--hx-glow-x,50%) var(--hx-glow-y,50%), rgba(215,192,120,.10), transparent 70%);
}
.hx-glow-host.hx-glow-active::after{opacity:1}
body.night .hx-glow-host::after{
  background:radial-gradient(220px 220px at var(--hx-glow-x,50%) var(--hx-glow-y,50%), rgba(201,168,76,.14), transparent 70%);
}
@media(hover:none),(pointer:coarse){ .hx-glow-host::after{display:none} }
@media(prefers-reduced-motion:reduce){ .hx-glow-host::after{display:none} }
/* 呼び出しJSひな型（参考コード。sanctuary-ext.cssはCSSのみの責務のため未同梱。
   呼び出し元は各ページ所管Wave＝W1(index.html)／W2〜W4(新設ページ)）：
   (function(){
     if (window.TenkeiMotion && window.TenkeiMotion.reduced) return;
     if (!window.matchMedia || !matchMedia("(pointer:fine)").matches) return;
     var hosts = document.querySelectorAll(".hx-glow-host");
     var raf = null, lastX = 0, lastY = 0, activeHost = null;
     function apply(){
       if (activeHost) {
         var r = activeHost.getBoundingClientRect();
         activeHost.style.setProperty("--hx-glow-x", (lastX - r.left) + "px");
         activeHost.style.setProperty("--hx-glow-y", (lastY - r.top) + "px");
       }
       raf = null;
     }
     hosts.forEach(function(host){
       host.addEventListener("mousemove", function(e){
         lastX = e.clientX; lastY = e.clientY; activeHost = host;
         if (!raf) raf = requestAnimationFrame(apply);
       }, {passive:true});
       host.addEventListener("mouseenter", function(){ host.classList.add("hx-glow-active"); });
       host.addEventListener("mouseleave", function(){ host.classList.remove("hx-glow-active"); });
     });
   })(); */

/* ---- §6-4. 星空点描の強化（body.night::before拡張。常時アニメ枠を追加消費しない） ----
   制約の確認（14書§0表E13・必読）：常時（infinite）アニメーションは既に3/3で上限
   （点描のゆらぎ・.hx-door__lit-dotパルス・.wk-chart__point--today脈動）。本節は
   4本目を追加しない。密度強化は既存のhxStippleアニメーション（§2-1、1本のまま）
   が参照するbackground-imageのgradient数を増やすことで行い、奥行きはスクロール
   連動（animation-timeline、ユーザー操作に従属し自律ループしないためE13の
   カウント対象外）で足す。
   ⚠ §2-1のbody.night::beforeを以下で上書きする（アニメーション名hxStipple・
   周期16s・許可枠3/3は不変。gradient点を8点→12点に増やし密度のみ上げる） */
body.night::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(233,230,222,.32) 0, rgba(233,230,222,.32) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.30) 0, rgba(215,192,120,.30) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.28) 0, rgba(233,230,222,.28) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.30) 0, rgba(233,230,222,.30) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.26) 0, rgba(215,192,120,.26) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.32) 0, rgba(233,230,222,.32) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.28) 0, rgba(233,230,222,.28) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.24) 0, rgba(215,192,120,.24) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.22) 0, rgba(233,230,222,.22) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.20) 0, rgba(215,192,120,.20) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,230,222,.26) 0, rgba(233,230,222,.26) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(215,192,120,.18) 0, rgba(215,192,120,.18) 1px, transparent 1.6px);
  background-size: 480px 480px, 620px 620px, 390px 390px, 710px 710px, 540px 540px, 330px 330px, 660px 660px, 470px 470px, 560px 560px, 410px 410px, 690px 690px, 350px 350px;
  background-position: 8% 12%, 22% 64%, 41% 30%, 58% 78%, 67% 18%, 79% 52%, 88% 8%, 93% 88%, 14% 45%, 35% 92%, 72% 40%, 96% 62%;
  background-repeat: repeat;
  opacity:.34;
  animation: hxStipple 16s ease-in-out infinite; /* 既存の許可枠3/3のまま。本数は増えていない */
}
/* 新設・奥行きの視差（::after。スクロール連動のみで自律ループしないため常時アニメ枠の
   カウント対象外——sanctuary.css既存のbackground-attachment:fixed視差と同じ扱い）。
   点描密度の上限14点に合わせ、::afterは2点版を正式採用（§6-8未解決事項5番の
   裁定「安全側として2点版を正式採用」を反映。::before12点＋::after2点＝計14点）。 */
body.night::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(233,230,222,.16) 0, rgba(233,230,222,.16) 1px, transparent 1.4px),
    radial-gradient(circle, rgba(215,192,120,.14) 0, rgba(215,192,120,.14) 1px, transparent 1.4px);
  background-size: 900px 900px, 1100px 1100px;
  background-position: 30% 20%, 65% 70%;
  background-repeat: repeat;
  opacity:.5;
}
@supports (animation-timeline: scroll()) {
  @media (min-width:1025px) and (prefers-reduced-motion:no-preference){
    body.night::after{ animation:hxStippleDepth linear; animation-timeline:scroll(); animation-range:0% 100%; }
  }
}
@keyframes hxStippleDepth{ from{ transform:translateY(0); } to{ transform:translateY(-40px); } }
@media(max-width:1024px){ body.night::after{ animation:none!important; transform:none!important; } }
@media(prefers-reduced-motion:reduce){ body.night::after{ animation:none!important; transform:none!important; } }
/* 画像スロット・書物パネル・ロックカードは既存規定どおり実体背景色＋z-index:1以上を
   持つため、::afterが背後に回る保証は§2-1既存コメントの「重畳禁止の実装保証」が
   そのまま適用される（変更不要）。 */

/* ---- §6-5. 燭火の揺らめき（.art-slot--candle拡張。一度だけの「点火」・常時ループにしない） ----
   §0-5で確定した扉画像レシピM（.art-slot--candle）は静止フィルタ
   （brightness(.82) contrast(.94) saturate(.88) sepia(6%)）のみを持つ。常時アニメ枠は
   §6-4節で既に3/3を使い切っているため、揺らめきはreveal時に一度だけ再生し
   自動的に停止する設計にする（14書§3-7 Ken Burnsと同じ思想＝animation-iteration-count:1）。 */
/* .hx-candle-catch：扉カード（.hx-door内の.art-slot--candle）が画面内に入った
   瞬間、燭火が「点く」ような一度きりの明滅を加える。ループしないため
   常時アニメ許可枠（§6-4節で3/3使用中）を消費しない。
   1秒あたりの明滅回数：本アニメーションは1.1秒間に明→暗→明の1往復のみで、
   1秒3回超の明滅を伴わない（光過敏規約の閾値を大きく下回る）。 */
.art-slot--candle.hx-candle-catch img{
  animation: hxCandleCatch 1.1s cubic-bezier(.22,.61,.36,1) 1 both;
}
@keyframes hxCandleCatch{
  0%   { filter:brightness(.82) contrast(.94) saturate(.88) sepia(6%); }
  38%  { filter:brightness(.94) contrast(.94) saturate(.92) sepia(6%); }
  60%  { filter:brightness(.79) contrast(.94) saturate(.88) sepia(6%); }
  100% { filter:brightness(.82) contrast(.94) saturate(.88) sepia(6%); }
}
@media(prefers-reduced-motion:reduce){
  .art-slot--candle.hx-candle-catch img{ animation:none!important; filter:brightness(.82) contrast(.94) saturate(.88) sepia(6%)!important; }
}
/* 呼び出し規約（sanctuary-ext.cssはCSSのみの責務のため、.hx-candle-catchクラスの
   付与自体は各ページ所管Wave＝kago.js（W4）等が担当。参考コード）：
   document.querySelectorAll(".art-slot--candle").forEach(function(el){
     var io = new IntersectionObserver(function(entries){
       entries.forEach(function(en){
         if (en.isIntersecting) { en.target.classList.add("hx-candle-catch"); io.unobserve(en.target); }
       });
     }, {threshold:.4});
     io.observe(el);
   }); */

/* ---- §6-6. フォーカス金環：ライト相との値統一（既存§2-11の値=outline-offset:2pxが正） ----
   14書§3-10がindex.html（ライト相）向けに定義するフォーカスリングと色は
   var(--gold)で同一。offset値は本ファイル既存§2-11の2pxへ統一済み（14書側の
   新規3px案は不採用）。W1指示書§8-1で参照するCSSもこの統一値（2px）を使う。 */

/* ============================================================
   §T 最先端技術の適用（16書対応・2026-08-04第5次）
   正本＝16_最先端技術設計書_20260804.md。WD0は全ページ共通のVT/SDA基盤ブロックの
   所有者である（sanctuary-ext.cssへの追記＝契約§1の所有権どおり）。
   ============================================================ */

/* ---- §T-1. 帳のページ遷移（16書§3-2を逐語収載。Phase 1） ---- */
/* 注意3点（16書§3-3・WD0指示書§T-1）：
   1. 遷移名の台帳は16書§3-3が正。新しいview-transition-nameを発明しない
      （同名2要素はレンダリング破棄を招く）。台帳＝hx-header（全ページ<header>）／
      hx-brand（nav先頭のブランドリンク）／hx-hall-band（発進側=kago.htmlで
      クリックされた扉の<img>にJSでクリック時のみ付与＝W4所管／着地側=kantei/
      weekly等の帯画像に静的付与＝W2/W3所管）。WD0は名前を予約するコメント行のみ置く
   2. hx-hall-band（扉→帯モーフ）の着地側静的付与はW2/W3所管・発進側JS付与はW4所管
   3. reduced-motion縮退は::view-transition-group(*)まで含めてanimation:none!important
      （既定クロスフェードごと止める＝16書§3-2の縮退句を欠かさない） */
@view-transition { navigation: auto; }

/* 土台となる共通要素：ヘッダーは帳の外＝遷移中も動かない。
   ロゴ(nav先頭のブランド)は同名スナップショットとして滑らかに継承される */
header { view-transition-name: hx-header; }
header nav > a:first-child { view-transition-name: hx-brand; }
/* 予約：hx-hall-band（扉→帯モーフ）。着地側の静的付与先はW2(kantei.html)/W3(weekly.html)
   の題字帯.art-slot--bandへ`view-transition-name:hx-hall-band`を付与、発進側は
   W4(kago.js)がクリック時にJSで一時付与する（常時付与すると1ページ内2要素同名エラー）。 */

/* 帳がひらく：旧ページは静かに沈み、新ページは上下の帳がほどけて現れる */
@keyframes hx-vt-sink { to { opacity: 0; transform: translateY(6px); } }
@keyframes hx-vt-open {
  from { opacity: .35; clip-path: inset(6% 0 6% 0); filter: brightness(.94); }
  to   { opacity: 1;   clip-path: inset(0 0 0 0);   filter: brightness(1); }
}
::view-transition-old(root) { animation: hx-vt-sink .38s ease both; }
::view-transition-new(root) { animation: hx-vt-open .62s cubic-bezier(.22,.61,.36,1) both; }

/* 縮退：reduced-motionでは既定クロスフェードごと止めて即時切替 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---- §T-2. SDAユーティリティと@propertyトークン（16書§4・Phase 1） ---- */
@supports (animation-timeline: scroll()) {
  @property --hx-sky-shift { syntax: "<number>"; inherits: true; initial-value: 0; }
  /* 汎用「層の通過」：新設ページの任意セクションに付けるだけで帳がほどける */
  @keyframes hx-veil-lift { from { opacity: .72; } to { opacity: 1; } }
  .hx-sda-lift {
    animation: hx-veil-lift linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* ---- §T-3. tier契約クラス（Phase 2受け入れ・実装はしない） ---- */
/* WebGL稼働時：DOMの光塵・薄靄はシェーダへ昇格し二重表示を防ぐ（16書§6-2）。
   sky-engine.js（Phase 2・未実装）が<html>へsky-onを付ける（16書§2-7/§7-1）。
   WD0はその受け側CSSを1ブロックだけ予約する。 */
html.sky-on [data-sky] .m-dust,
html.sky-on [data-sky] .m-mist { display: none; }

/* ===== 案C-BEGIN ===== */
/* ============================================================================
   §V  タイポグラフィ共通規格（案C・2026-08-06 追記／既存セレクタ非改変）
   21書§0-4 が定めながら実装が1件も無かった（全CSS grep 0件）ものを実装する。
   字間・文字数・文言には一切触れず、カーニングと折返しだけを底上げする。
   すべて Baseline 済み or 非対応ブラウザで自然縮退する宣言のみ。
   ============================================================================ */

/* §V-1. 見出しの詰め組みと行割れ防止（本文はベタ組みのまま＝長文の可読性優先） */
h1, h2, h3,
.sect-title, .panel-title,
.hx-band-caption__title, .hx-door__name,
.kt-book__theme, .kt-book__section-title,
.wk-book__title, .wk-days__date{
  font-kerning: normal;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

/* §V-2. 段末の一字残り（オーファン）の軽減。Chrome117+、非対応は無害 */
p, li, .sect-lead,
.hx-band-caption__lead, .hx-door__desc, .hx-door__state,
.kt-book__text, .kt-book__closing-text,
.wk-days__text, .wk-legend__note,
.disclaimer-body, .disclaimer-note{
  text-wrap: pretty;
}

/* §V-3. 禁則の厳格化（行頭の音引き・拗促音） */
body{ line-break: strict; }

/* §V-4. 数値の等幅（桁が揺れない） */
.hx-num,
.wk-legend__range, .wk-days__score, .wk-chart__value-label{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* §V-5.「読む面」の行長規律（監修A共通規定 38em の適用クラス） */
.hx-prose{
  max-width: 38em;
  margin-inline: auto;
  line-height: 2.0;
  hanging-punctuation: first allow-end;   /* Safariのみ効く累進強化 */
}
.hx-prose--letter{ line-height: 2.2; }

/* 注：§W（紙の島の墨・凡例・扉）は auth-style.css が正本。
   sanctuary-ext.css を読むのは index.html と kago.html のみで、
   weekly.html / kantei.html は読み込まないため（2026-08-06 実測）。 */
/* ===== 案C-END ===== */