/* ============================================================
sanctuary-ext.css
「天啓の防壁」加護の間 新設3ページ（kago/kantei/weekly）
＋ index.html改修部分（ヒーロー・誘いカード） 共通拡張スタイルシート
[正本] 本ファイルは以下のクラス接頭辞の定義を独占する：
.art- 画像スロット標準構造（ 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ではない）]
← 基礎トークン・header/nav/footer/フォーム部品
← 本ファイル
（free-campaign.cssという物理ファイルは実在する＝2026-08-06本Wave実測で
。ただし新設3ページ〔kago/kantei
weekly〕はキャンペーンバナーを持たないため読込対象外のまま。詳細は
成果報告\報告.md参照）
本ファイルはauth-style.cssの:rootトークンを前提とし、それらは再定義しない。
ただし --gold/--gold-lt/--gold-deep はauth-style.cssに存在しないため
（index.html専用の2次定義にしかない・実測確認済み）、本ファイルが唯一
補完定義する（新色相の追加ではなく、既存の実測値をトークン化するのみ）。
[禁則（裁定）] 星「形」不使用（点描のみ可）／border-imageは直角
コンテナ限定・角丸コンテナには使用禁止／粒子・光条・グロー・レンズフレア
禁止（点描2-10のみ例外）／朱色不使用／外部JSライブラリ禁止／
新規色相トークンの追加禁止（既存6色系統＋夜相8色のalpha/明度組合せのみ）
[策定] を土台に
02§4・01契約書§2の裁定、および実物3ファイル（auth-style.css
index.html・moon.html）の実測結果を反映して全面改稿
[検収]
[日付] 2026-08-04（v2）／2026-08-06 元PC実装（ Wave）
============================================================ */
:root{
/* ---- 0. 欠落トークンの補完（§0-2実測。auth-style.cssに存在しない3値） ---- */
--gold:#6F5A16; --gold-lt:#83691E; --gold-deep:#6E5311;
/* ---- 1. 夜相トークン8色（ 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. 額装・影・角丸（実測値。§0-3：矩形カードは実測0px
12pxは書物パネル専用の意図的例外） ---- */
--ext-radius-card: 0px; /* 夜相の扉・ロックカード等は直角（ 1-6） */
--ext-radius-paper: 12px; /* 書物パネルのみ（ 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); /* 扉カード（ 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); /* 書物パネル（ 3-3。最後の1枚が「灯りのこぼれ」上限） */
/* ---- 4. 非会員ロック（.hx-lock共通。 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・生成り白で代替＝裁定・§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：夜相ページ共通の変数再割当て（ 3-1推奨方式の完全形） ──
kago.html/kantei.html/weekly.html/両ゲートのに付与する。
既存コンポーネント（.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); /* 夜相の縁は金である（1-6）ため、罫線色にも金の淡いリムを充てる */
background: var(--bg);
color: var(--ink);
}
/* 加護の間ドロップダウンの夜相対応（2026-08-26是正）。
各ページの `body.night nav a`（実測でkago/letters/michibiki/toi全4ページに同型で存在）は
ナビ内の直下リンクを夜色にする意図の宣言だが、
`.nav-drop-panel a`（詳細度0,1,1）よりも `body.night nav a`（0,1,3）の方が詳細度が高く、
`.nav-drop-panel`がnav要素の子孫であるため意図せず勝ってしまい、パネル自体は
auth-style.cssのライト相ハードコード（背景#F7F6F4→#EDECE8・実測）のまま
リンク文字だけが夜色（night-ink）になり約1.06:1で7扉の名が判読不能になっていた。
パネル自体を夜相トークンで塗る（index.htmlのhtml[data-koku="yoru"]版と同値）ことで、
詳細度も.nav-drop-panelを含む分（0,2,2）上の誤爆より高くなり同時に解消する。 */
body.night .nav-drop-panel{background:linear-gradient(180deg,var(--night-surface) 0%,var(--night-bg-alt) 100%);border-color:var(--night-gold-rim);box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);}
body.night .nav-drop-panel a{color:var(--night-ink-muted);border-bottom-color:rgba(215,192,120,.16);}
body.night .nav-drop-panel a:hover,body.night .nav-drop-panel a:focus-visible{color:var(--night-gold-lt);background:rgba(215,192,120,.10);}
body.night .nav-drop-note{color:var(--night-ink-muted);border-top-color:var(--night-gold-rim);background:rgba(215,192,120,.06);}
/* 夜相の敷居（ 3-2）：ページ最上端の金線。ライト地に金線は1.68:1で不可視の
ため夜相専用（実測根拠は 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} }
/* ── 夜空の点描（ 2-10。夜相の地の質感・唯一の粒子的表現） ──
body.nightのページ全面に1枚のみ設置する（JS不使用・画像不使用）。
形状は円点のみ。点滅・移動・パララックスは禁止、層全体のopacityを
16s周期でゆらす1本のみ許可（常時アニメ許可枠：全サイトでこの1本＋
.hx-door__lit-dotのパルス＋.wk-chart__point--todayの脈動＝計3本が上限）。
座標は実装時に画像スロット・書物パネル・ロックカードの背後を避けて
ページごとに調整すること（重畳禁止＝規定）。
⚠ §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等）を必ず持つ（「重畳禁止」の実装保証）。
個々のコンポーネント側は position:relative; z-index:1以上 を持つため、
body.night::before（z-index:0）は自動的にその背後に回る。 */
/* ============================================================
§2-2. 刻相4相トークン（10書第3章・kantei.html限定・待ち）
============================================================ */
/* ── 刻相（実験実装・待ち＝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（ 2-4を実コード化・全レシピ収載）
============================================================ */
/* .art-slot＝全画像コンポーネントの基盤（ 2-4の実コードそのもの。契約§2で
「.art-＝画像スロット標準構造はの条文が正」と裁定済み）。
基本形はHTML側で以下のように使う：
ヒーロー画像のみ loading="eager" fetchpriority="high" ＋にpreload必須
（ 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で原案の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帯の例外（規定：暁の金色を殺さない） */
.art-slot--candle{
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;
}
.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%);
} /* 帯下端の羽化（規定：羽化と額装は排他のため縁取り無し） */
/* ── 帯（.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（ 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（帯直下・紙面側の題字）
============================================================ */
/* 帯本体は
（§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雛形（通常＝会員・新着あり）：
詳細鑑定書
一日を四つの節に読む、深き託宣
今日の書が、ひらかれるのを待っています
非会員向け（ロック。カードはグレーアウトしない＝規定）：
詳細鑑定書
一日を四つの節に読む、深き託宣
ご契約で開きます
*/
.hx-door{
display:block;
min-height:88px; /* 規定 */
text-decoration:none; color:inherit;
background:var(--surface); /* body.night配下で自動的にnight-surfaceになる */
border-radius:var(--ext-radius-card); /* 0px＝直角（ 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); min-height:1.2em; }
/* W5-1是正：JS（js/kago.js applyDoorStates）が扉の状態文を確定するまでの
一瞬（Supabaseセッション往復の間）、静的HTMLは意図的に空にしてある。
従来「ご利用状況をたしかめています…」という業務的な文言を出していたが、
聖域の言葉づかいに合わず（ P5）、無音の細い罫のみに
変更した。renderDoorState()がtextContent/innerHTMLを書き込むと要素は
:emptyでなくなり、この罫は自動的に消える（JS側の変更は不要）。 */
.hx-door__state:empty::before{
content:""; display:block; width:26px; height:1px;
background:var(--gold-rim); opacity:.55;
}
.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に合わせた。
仮称--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のパネル専用トークンを使用）
============================================================ */
/* 2-3節：四つの節は縦積み常時全展開。アコーディオン化しない
（旧W2記述にあった「クリックで開閉」は不採用。読了検知はIntersectionObserver）。
HTML雛形は §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; }
}
/* 開帳アニメーション「書の儀」（ 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以下）：藍の陰り新色は導入しない（規定） */
.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。規定式） */
.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; } } /* 規定値=.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。帯名は確定値＝§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・ 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（実測） */
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,");
background-size:120px 120px;
}
/* 夜相での重なりは既定でやや強め（暗地の方がオーバーレイ合成が沈みやすいため） */
body.night .hx-grain{ opacity:.045; }
/* 使用側は装飾用の を
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;
}
/* 2026-08-26是正：index.html（TOP）はbody.nightではなくhtml[data-koku]で
刻を切り替えるため、上のbody.night分岐が一度も発火せず、hx-descend--gate/--courtが
夜相でも常にライト相のscrim（rgba(238,237,234,.94)等）を描き続け「白帯」になっていた。
同一の橋渡しをhtml[data-koku="yoru"]にも複製する（値は上のbody.night版と同一・
新規トークンなし）。 */
html[data-koku="yoru"] .hx-descend__band{ opacity:.14; }
html[data-koku="yoru"] .hx-descend::before{
background:linear-gradient(180deg, var(--night-bg-alt) 0%, var(--night-bg) 100%);
opacity:.7;
}
/* ── 刻相 Phase 2 補遺（2026-09-02）：帳（#oracleCard＝神託の紙）は夜相でも「紙」のまま ──
書物パネル（.kt-book系＝--ext-paper-*固定値）が夜相でも常に紙であるのと同じ扱い。
TOPのお試し神託の帳（.oracle-card）の位別の地色（S＝シャンパン／A＝薄紫／B＝生成り／C＝銀鼠）は
ランク序列の意匠そのものなので、夜相でも変えない。
夜相（html[data-koku="yoru"]）は --ink 系を夜色（明色）へ差し替えるが、帳の地は明地のまま残るため、
明地の位（SS/S/A/B/C）で本文・守護行動が「明地×明字」（1.02〜1.13:1）になり読めなかった。
是正＝紙自身にトークン一式と color 宣言を持たせる（子孫は計算済みの色を継承するため、
コンテナ側のトークン再割当てだけでは届かない）。値はすべて :root（昼＝現行値）と --ext-paper-* の
既存リテラルで、新規色相はゼロ。D／X（地が暗い位）は位別の固定色で完結しているため対象外。
⚠️--gold/--gold-lt も紙の値へ戻すため、帳内の .btn-primary（夜相共通ルールで文字を
var(--night-bg) にしている）は文字色も昼の #FFF8DC へ戻す（下の2ブロック目）。 */
html[data-koku="yoru"] .oracle-card.r-SS,
html[data-koku="yoru"] .oracle-card.r-S,
html[data-koku="yoru"] .oracle-card.r-A,
html[data-koku="yoru"] .oracle-card.r-B,
html[data-koku="yoru"] .oracle-card.r-C{
--bg:#DDDDDB; --bg-alt:var(--ext-paper-bg-alt); --surface:var(--ext-paper);
--ink:var(--ext-paper-ink); --ink-mid:#3B3B3B; --ink-muted:var(--ext-paper-ink-muted);
--silver:#A8A8A8; --silver-lt:#C8C7C3;
--gold:var(--ext-paper-gold); --gold-lt:var(--ext-paper-gold-lt); --gold-deep:#6E5311;
--gold-rim:rgba(215,192,120,.42);
color:var(--ink);
}
html[data-koku="yoru"] .oracle-card.r-SS .btn-primary,
html[data-koku="yoru"] .oracle-card.r-S .btn-primary,
html[data-koku="yoru"] .oracle-card.r-A .btn-primary,
html[data-koku="yoru"] .oracle-card.r-B .btn-primary,
html[data-koku="yoru"] .oracle-card.r-C .btn-primary{color:#FFF8DC;}
/* 帳の「聖域へ戻る」（#sazukariCloseBtn＝帳の外側の固定ボタン・地は rgba(247,246,244,.94) 固定）は
夜相で文字 var(--ink-mid)＝night-ink が明地に沈み全位で判読不能だったため、文字色を紙の値へ固定する。 */
html[data-koku="yoru"] .sazukari-close-btn{color:#3B3B3B;}
/* 登場は各ページの既存reveal機構に相乗りする設計（新規IOを増やさない）。
ライト相＝index.html独自の.reveal（W1所管・W1）。
夜相ページで採用する場合は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除外。夜相では金の発色が強い（実測
7.92:1）ため、淡光の色をnight-gold系へ分岐させ、ライト相と統一感を持たせつつ
夜相の方がわずかに強く発光して見えるようにする（4-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＝(index.html)／W2〜(新設ページ)）：
(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）を使う。 */
/* ============================================================
§T 最先端技術の適用（16書対応・2026-08-04第5次）
。は全ページ共通のVT/SDA基盤ブロックの
所有者である（sanctuary-ext.cssへの追記＝契約§1の所有権どおり）。
============================================================ */
/* ---- §T-1. 帳のページ遷移（16書§3-2を逐語収載。Phase 1） ---- */
/* 注意3点（16書§3-3・）：
1. 遷移名の台帳は16書§3-3が正。新しいview-transition-nameを発明しない
（同名2要素はレンダリング破棄を招く）。台帳＝hx-header（全ページ）／
hx-brand（nav先頭のブランドリンク）／hx-hall-band（発進側=kago.htmlで
クリックされた扉の![]()
にJSでクリック時のみ付与＝W4所管／着地側=kantei/
weekly等の帯画像に静的付与＝W2/W3所管）。は名前を予約するコメント行のみ置く
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（扉→帯モーフ）。着地側の静的付与先は(kantei.html)/(weekly.html)
の題字帯.art-slot--bandへ`view-transition-name:hx-hall-band`を付与、発進側は
(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: ""; 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契約クラス（-1でsky-engine.js実装済み・2026-08-07） ---- */
/* WebGL稼働時：DOMの光塵・薄靄はシェーダへ昇格し二重表示を防ぐ（16書§6-2）。
js/sky-engine.js（-1で新規実装。index.htmlの.heroにdata-sky="dawn"のみ実適用。
hall/study/lakeシーンはエンジンに実装済みだがkago/kantei/weekly.htmlへの配線はW5未着手）
がへsky-onを付ける（16書§2-7/§7-1）。 */
html.sky-on [data-sky] .m-dust,
html.sky-on [data-sky] .m-mist { display: none; }
/* ---- §T-4. sky-engine tier2 時のヒーロー退避（-1・16書§6-2実装）----
🔴スクリム薄化禁止：以下の2レイヤーはsanctuary.css:67-72の.hero background-imageの
グラデーション値を1桁も変えずに複製したもの（値の出典＝sanctuary.css実測、2026-08-07）。
tier2時は.heroの背景画像（グラデ2層+data URI）を丸ごと退避し、
canvas(z-index:0)の上にこの::before(z-index:1)でスクリム2層だけを維持する。
本文・タイトルのAAコントラストは、退避前とまったく同じ数式で守られる。 */
html.sky-on .hero{ background-image:none; }
html.sky-on .hero::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background-image:
linear-gradient(100deg,
rgba(238,236,231,.965) 0%,
rgba(240,238,233,.935) 34%,
rgba(243,241,236,.78) 58%,
rgba(243,241,236,.62) 100%),
linear-gradient(180deg, rgba(238,236,231,0) 62%, rgba(221,221,219,1) 100%);
}
/* 🔴D1-5監査で実描画発見・修正（2026-08-07/08）：.heroはdisplay:gridのため直下の
.hero-textはCSS Grid仕様上z-index:auto相当の重ね順に入り、上のスクリム(::before,
z-index:1)がcanvasだけでなく.hero-text自身の上にも被さって文字が実測1.22:1まで
消える事故が発生していた（実装時の「テキストはスクリム最強点にあるため実害は低い」
という推定は誤りで、最強点だからこそ最も強く覆われていた）。.hero-textを明示的に
スクリムより上のスタッキングへ固定して解決（実描画で1.22:1→14.23:1を確認済み）。 */
html.sky-on .hero-text{ position:relative; z-index:2; }
/* ===== 案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.「読む面」の行長規律（共通規定 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 実測）。
⚠️2026-08-07再実測（WP D1-4b着手時）：以後の-2/1-3パッチにより
letters.html・moon.html・compatibility.html・almanac.html・monsho.htmlにも
sanctuary-ext.cssが接続済み（を実grep確認）。上記「index.htmlと
kago.htmlのみ」は本節執筆時点の記述であり、以後の実態はズレている
（食い違いの記録として原文は残す。読込側の正が実ファイルであることは
本書冒頭の運用原則どおり）。column.html・tenkei-no-boheki.htmlは
引き続き未接続（後者は意図的な非接触＝上記行1374-1378のコメント参照）。 */
/* ===== 案C-END ===== */
/* ============================================================
§H. 天啓姫の気配 .hx-presence（WP D1-4b・共通コンテンツ部品）
------------------------------------------------------------
「その他のコンテンツ内にも透かしを入れた天啓姫を各コンテンツに
溶け込む形で入れてほしい」への応答。紙の外＝本文・神託本文・手紙の紙面の
「中」には使わない（紙面の中は§2-3〜§2-6の書物パネル/扉/帯の領分。本節は
ページ余白・背景側に置く装飾に限定する）。
[素材・2026-08-08 v2改訂＝ぼかし撤去＋opacity引き上げ（オーナー本人の明示指示。
詳細は _素材ライブラリ/天啓姫_表情切り出し_20260807/気配素材_v2_20260808/
（技術報告）・同フォルダのW_気配素材v2__
20260808.md（
（
（・v4最終案を推奨）参照）]
参照元は同フォルダ 最終案_20260808/img_final/ のWebP6種（v4最終パイプライン
＝produce_presence_v4_cdo.py）。V1_10（開眼・口を閉じた微笑）／V1_02（閉眼・
口を閉じた微笑）に加え、V1_01（伏し目がち・内省的な微笑）が2026-08-08の
監修で新規に正式合格し3種構成となった（判定根拠は
§1）。V7/SM_f16（条件付き合格＝太陽円盤
帯浮彫・別ロット）は不採用のまま——§2-6「面をまたぐロット統一」に
従い、V1系のregisterへ統一する方針は不変。
[画像側で既に処理済みのこと（本CSSが担うのは相ごとの微調整のみ）]
・crownより上に約180px（元1080×1920系）の「空のみ」領域を含めてクロップし、
さらに輝度サプレッション（明るい空を選択的に透明化）＋四辺フェザリングを
アルファチャンネルへ焼き込み済み＝・§3-1が禁じる
「頭部を包む楕円の光暈（後光）」が生じない設計（8セクタ半径別の輝度計測で
回転対称の輝きが無いことを自己検証済み。旧README.md §4／v4検証記録
最終案_20260808/検証_20260808/参照）。
【2026-08-08改訂】ガウスぼかしは撤去した。
代わりに「背景大気マット」（人物領域はアルファ1.0のまま維持し、暖色×連結性＋
固定構図の幾何事前知識で判定した背景〔空・雲海・柱〕のみをアルファ0.12へ
選択的に減衰する処理）で、輪郭をぼかさずに後光・額縁化を防いでいる
（v3〜v4の反復で、単純な「ぼかし＋高opacity」の組合せは輪郭不明の人影＝
文字どおりの「幽霊」を生むことが実測で確認され、この方式へ置き換えた）。
人物の顔立ち・表情は鮮明（等倍で表情が判別できる）。
・彩度32%低減を焼き込み済み（相を問わず馴染む下地）。最終トーンは
このCSS側のfilterで相ごとに仕上げる（画像を相の数だけ複製しないため）。
・左右反転・縁光追加・AI超解像／構造補完は一切行っていない（禁則遵守。
v4パイプラインもnumpy/Pillow/scipyのみでAIモデル不使用）。
[HTML雛形。装飾要素＝スクリーンリーダーには一切読み上げさせない]
（.hx-presence自体はposition:absoluteのため、親要素に最低1つの
positioned ancestor＝position:relative等が必要。自身はレイアウト幅を
持たない＝既存コンテンツの折返し・CLSに一切影響しない。）
[数量の上限] 気配の原則（motion.css §1-C-10）に倣い、1画面（1ビューポート）
内で同時に見える.hx-presenceは1箇所までを前提とする。複数個所に置く場合は
スクロールで同時に視界へ入らない距離を置くこと（本CSSはこの上限を機械的に
強制しない＝配置側＝各Waveの規律とする）。
[適用ページの実態（2026-08-07現在）] sanctuary-ext.cssを読み込む
index.html・kago.html・letters.html・moon.html・compatibility.html・
almanac.html・monsho.htmlで即座に使用可能。kantei.html・weekly.htmlは
本ファイルの接続待ち（NEED-EXTコメント参照）、column.html・
tenkei-no-boheki.htmlは未接続（後者は意図的な非接触）。
実際にどのページのどこへ配置するかは本WPのスコープ外＝以後のWaveが判断する。
============================================================ */
.hx-presence{
position:absolute;
z-index:0; /* 常に背後。本文・画像スロット(z-index:1〜)より下 */
pointer-events:none;
user-select:none;
opacity:.35 !important; /* 【2026-08-08改訂・オーナー本人の明示指示による
正式値】旧値0.14（気配の原則＝motion.css §1-C-10の
女神の気配と同一の上限）から引き上げた。女神の気配
（儀式内で一度だけ現れる演出）とは別個の数値規律と
して独立させ、天啓姫の常在の気配はこの0.35を
ライト相（multiply）側の上限とする——0.14という
過去の値へ安易に差し戻さないための固定であることに
変わりはない。 §7節へも同時登記済み。
画像自体は人物領域アルファ1.0で書き出してあるため
実効opacityはこの値そのもの */
background-repeat:no-repeat;
background-position:center;
background-size:contain;
width:min(34vw, 380px);
aspect-ratio:620/1108; /* full系（既定）。bust系は.hx-presence--bustが上書き */
/* ライト相の既定トーン：グレースケール寄りに馴染ませつつ完全な無彩色にはしない
（.art-slot--paperの値をそのまま流用せず、本要素は既に彩度32%を画像側で
落としているため上乗せは控えめに留める）。 */
filter:grayscale(38%) sepia(4%) saturate(88%);
mix-blend-mode:multiply; /* 明るい地の上で自然に沈む。暗い地を明るくする
方向には作用しない＝後光化の再発を構造的に防ぐ */
}
.hx-presence--bust{
aspect-ratio:480/688;
width:min(22vw, 260px);
}
.hx-presence--right{ right:clamp(0px, 2vw, 32px); bottom:0; }
.hx-presence--left{ left:clamp(0px, 2vw, 32px); bottom:0; }
.hx-presence--v1-10-full{ background-image:url("images/presence/presence_v1_10_full.webp"); }
.hx-presence--v1-02-full{ background-image:url("images/presence/presence_v1_02_full.webp"); }
.hx-presence--v1-10-bust{ background-image:url("images/presence/presence_v1_10_bust.webp"); }
.hx-presence--v1-02-bust{ background-image:url("images/presence/presence_v1_02_bust.webp"); }
.hx-presence--v1-01-full{ background-image:url("images/presence/presence_v1_01_full.webp"); } /* 2026-08-08新規・正式合格 */
.hx-presence--v1-01-bust{ background-image:url("images/presence/presence_v1_01_bust.webp"); } /* 2026-08-08新規・正式合格 */
/* 夜相：multiplyは暗地でほぼ視認できなくなる（乗算は暗い方へしか動けないため）ので
screenへ切替。screenも「暗地を明るくする」方向にしか作用しないため、こちらも
構造的に後光（頭部だけが周囲より明るい回転対称の輪）を作らない
——画像側の輝度サプレッションと二重の安全設計。
【2026-08-08改訂】opacityをmultiply/screen共通で0.35へ引き上げた際、
（ §4-2-4）が
実画像確認で「screen合成×op0.35は"気配"でなく"明瞭に佇む人影"に見える」と指摘
（multiplyは暗地で沈むがscreenは暗地で浮く、という非対称性による）。本セッションの
実描画確認（Playwright・moon.html夜相/ライト相）でも同様の傾向を確認したため、
夜相のみ低めのopacityへ個別に下げる（ライト相0.35は変更なし）。 */
body.night .hx-presence{
mix-blend-mode:screen;
filter:grayscale(24%) sepia(3%) brightness(1.04) saturate(92%);
opacity:.22 !important; /* 夜相専用の下限値。lore推奨帯0.20〜0.25の中央値。
ライト相0.35より低いのは意図的（screenブレンドの
非対称性への対処）。この値を上げる場合は必ず
moon.html夜相での実描画確認を経ること */
}
@media(max-width:640px){
.hx-presence{ width:min(46vw, 240px); }
.hx-presence--bust{ width:min(30vw, 170px); }
}
/* 静止画像であり明滅・移動を一切持たないため、prefers-reduced-motionによる
分岐は不要（sanctuary-ext.css §6-1 .hx-grainと同じ扱い）。 */