/* 楽曲ガイドの共有 CSS — これが正本（issue #19 / 案 B）。
   各ガイドと music-analysis-guide/template.html は
     <link rel="stylesheet" href="/guides/_guide.css">
   でこれを読み、作品固有の追加・上書きだけを自分の <style>（overlay）に置く。
   ここの規則を1件直せば21本すべてに同時に届く。**複製を作らないこと** —— 2026-07-11 に
   template が止まって翌日の修正3件を受け取らず、そこから起こした4本が旧世代のまま
   出荷された事故（issue #19）は、源が22箇所にあったことが原因だった。

   規約: font-size は rem（root は下の html{} が単一ソース）。px を直書きしない。
   例外は vw-clamp のタイトルと --band-h のような寸法トークンだけ。
   これは polyhedra-validate §2-a が _guide.css と各 overlay の両方に対して機械検査する。 */

.managed-guide{
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Roboto Mono",monospace;
  --tonic:#3a5a8c; --tonic-soft:#edf1f6;
  --major:#b1542f; --major-soft:#f4ece5;
  --mediant:#8a5a14; --mediant-soft:#f2eee3;
  --dominant:#7a3f63; --dominant-soft:#efebf2;
  --subdom:#436e30; --subdom-soft:#eaf0e7;
  --graphite:#5d5c58; --graphite-soft:#eef0f2;
  --radius:7px;
  --band-h:46px; /* sticky 楽章ナビ（.spine-band）の高さ。ana-table th の sticky top が参照。band を作らない曲は JS が 0 にする */
  /* legacy aliases（旧クラス参照が解決するように残す） */
  --color-text-primary:var(--ink); --color-text-secondary:var(--muted);
  --color-background-primary:var(--paper); --color-background-secondary:var(--surface-soft);
  --color-border-secondary:var(--line); --color-border-tertiary:var(--line-soft);
  --border-radius-md:var(--radius);
}
.managed-guide * { box-sizing:border-box; }
.managed-guide{ background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:1rem; line-height:1.72; overflow-wrap:anywhere; }
.wrap{ max-width:1080px; margin:0 auto; padding:40px 26px 80px; }
.page{ padding:1rem 0 2rem; font-family:var(--font-sans); }
::selection{ background:var(--accent-soft); }
.managed-guide a{ color:var(--accent); text-underline-offset:3px; }
.nw{ white-space:nowrap; }

/* ---- masthead：eyebrow（サイト名＋楽曲ガイド・ホーム導線）／主役（作品名・調）／sub（原語・年）の3層 ---- */
.guide-eyebrow{ font-size:0.7333rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.guide-eyebrow a{ color:var(--muted); text-decoration:none; }
.guide-eyebrow a:hover{ color:var(--accent); }
.guide-eyebrow .sep{ margin:0 7px; font-weight:400; }
.guide-title{ font-family:var(--font-serif); font-weight:700; font-size:clamp(30px,4.4vw,56px); line-height:1.08; letter-spacing:.01em; color:var(--ink); }
.guide-sub{ margin-top:12px; font-size:0.9333rem; color:var(--muted); letter-spacing:.02em; }

/* ---- 署名＝調性スパイン（冒頭の主調の地図）＝楽章ナビの正体 ----
   多楽章曲は ts-seg を楽章ぶん並べ、各 data-m を対応パネル id に合わせる（goMvt でパネル切替＋スクロール）。
   セグメント幅は楽章の長さに比例させる：.ts-row の style="--spine-cols:13fr 12fr 6fr 10fr"
   （fr＝参照録音の楽章分数。分数が取れなければ総小節数。均等割りにしない＝正直な地図）。
   ts-cap の末尾に色の凡例を一言添える（例「上枠ボルドー＝主調（額縁）」）。
   単一楽章・単一調の曲（序曲・交響詩など）は「調の地図」が当てはまらないので、
   ts-key を調ではなく枠（A／B／A' など）にし、ts-cap で「枠の地図／全曲◯調／対比は pp→ff」と正直にラベルする。 */
.tonal-spine{ margin:26px 0 36px; }
.ts-row{ display:grid; grid-template-columns:var(--spine-cols, repeat(4,1fr)); gap:5px; }
.ts-seg{ display:flex; flex-direction:column; gap:3px; padding:13px 14px; border-radius:var(--radius); border:1px solid var(--line-soft); text-decoration:none; color:var(--ink); transition:transform .12s ease; min-width:0; }
.ts-seg:hover{ transform:translateY(-2px); }
.ts-tonic{ background:var(--tonic-soft); border-top:4px solid var(--hue-tonic); }
.ts-major{ background:var(--major-soft); border-top:4px solid var(--major); }
.ts-mediant{ background:var(--mediant-soft); border-top:4px solid var(--mediant); }
.ts-dominant{ background:var(--dominant-soft); border-top:4px solid var(--dominant); }
.ts-subdom{ background:var(--subdom-soft); border-top:4px solid var(--subdom); }
.ts-graphite{ background:var(--graphite-soft); border-top:4px solid var(--graphite); }
.ts-rom{ font-family:var(--font-serif); font-size:1.4667rem; font-weight:700; line-height:1; color:var(--ink); }
.ts-key{ font-family:var(--font-mono); font-size:1rem; font-weight:600; letter-spacing:.02em; }
.ts-form{ font-size:0.7333rem; color:var(--muted); }
.ts-cap{ margin-top:11px; font-size:0.8333rem; color:var(--muted); line-height:1.7; border-left:3px solid var(--accent); padding-left:11px; }
.ts-seg.active{ box-shadow:0 0 0 1px var(--accent); }

/* ---- sticky 楽章ナビ（縮小版スパイン）。markup は JS が .ts-seg[data-m] から自動生成する ---- */
.spine-band{ position:fixed; top:0; left:0; right:0; z-index:30; height:var(--band-h); background:var(--paper); border-bottom:1.5px solid var(--line); transform:translateY(-100%); transition:transform .15s ease; }
.spine-band.show{ transform:translateY(0); }
.sb-in{ max-width:1080px; margin:0 auto; height:100%; padding:0 26px; display:flex; align-items:stretch; gap:4px; overflow-x:auto; }
.sb-seg{ flex:1; min-width:max-content; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 12px; text-decoration:none; color:var(--muted); border-top:3px solid transparent; }
.sb-seg .sb-rom{ font-family:var(--font-serif); font-size:1rem; font-weight:700; line-height:1; }
.sb-seg .sb-key{ font-family:var(--font-mono); font-size:0.7667rem; font-weight:600; letter-spacing:.02em; }
.sb-seg:hover{ color:var(--ink); }
.sb-seg.active{ color:var(--ink); background:var(--surface-soft); }
.sb-tonic{ border-top-color:var(--hue-tonic); } .sb-major{ border-top-color:var(--major); }
.sb-mediant{ border-top-color:var(--mediant); } .sb-dominant{ border-top-color:var(--dominant); }
.sb-subdom{ border-top-color:var(--subdom); } .sb-graphite{ border-top-color:var(--graphite); }

/* ---- eyebrows（小見出し） ---- */
.ov-h,.src-box .src-h,.biblio h3,.special-title,.leg-h,.lens-title{
  font-size:0.7333rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.ov-h,.leg-h{ margin:30px 0 12px; }
.src-box .src-h{ margin-bottom:6px; }

/* ---- 出典・底本：細い縦罫のみ（カードにしない） ---- */
.src-box{ background:transparent; border:0; border-left:3px solid var(--line); border-radius:0; padding:4px 0 4px 16px; margin:20px 0 8px; font-size:0.8333rem; color:var(--muted); line-height:1.8; }
.src-box a{ color:var(--accent); }

/* ---- 全曲俯瞰：罫線主体・楽章名は明朝 ----
   主調・拍子列（標準列構成の 3・4 列目）は nowrap。列構成が違うガイドは nth-child を列に合わせるか、td に .nw を付ける */
.ov-table{ width:100%; border-collapse:collapse; font-size:0.9rem; margin-bottom:0.6rem; }
.ov-table th{ background:transparent; border:0; border-bottom:1.5px solid var(--line); color:var(--muted); font-size:0.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:0 12px 8px; text-align:left; }
.ov-table td{ border:0; border-bottom:1px solid var(--line-soft); padding:12px; vertical-align:top; line-height:1.6; color:var(--ink); }
.ov-table td:first-child{ font-family:var(--font-serif); font-size:1.0667rem; font-weight:700; white-space:nowrap; }
.ov-table td:nth-child(3),.ov-table td:nth-child(4){ white-space:nowrap; }
.ov-1 td:first-child,.ov-2 td:first-child,.ov-3 td:first-child,.ov-4 td:first-child{ border-left:0; }
.ov-note{ background:var(--surface); border:0; border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:13px 16px; margin:14px 0 34px; font-size:0.8667rem; color:var(--ink); line-height:1.8; }

/* ---- 楽章パネル（切替は調性スパイン＝spine-band が担う。タブバーは置かない） ---- */
.mvt-panel{ display:block; scroll-margin-top:calc(var(--band-h) + 10px); }
.mvt-panel.active{ display:block; }

/* ---- work-header：見出しブロック（カードにしない） ---- */
.work-header{ margin:6px 0 20px; padding:0 0 16px; border-bottom:1px solid var(--line-soft); }
.work-title{ font-family:var(--font-serif); font-size:clamp(22px,3vw,30px); font-weight:700; line-height:1.2; color:var(--ink); }
.work-meta{ color:var(--muted); font-size:0.9333rem; margin-top:4px; }
.form-badge{ display:inline-block; margin:8px 0 0; padding:3px 11px; border-radius:999px; border:1px solid currentColor; background:transparent; color:var(--accent); font-size:0.7667rem; font-weight:600; }
.meta-pills{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.pill{ font-family:var(--font-mono); font-size:0.7333rem; padding:3px 9px; border-radius:5px; border:1px solid var(--line); background:var(--surface); color:var(--muted); }

/* ---- タイムライン（色はクラスで：.tl-tonic 等。幅は区分の長さに比例させる：各 .tl に style="flex:38"（小節数 or 分数）。既定は均等） ---- */
.tl-wrap,.timeline{ display:flex; gap:3px; margin:0 0 22px; border-radius:var(--radius); overflow:hidden; }
.tl{ flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:52px; padding:9px 6px; font-size:0.7333rem; font-weight:600; line-height:1.35; text-align:center; }
.tl-cap{ font-size:0.7333rem; color:var(--muted); margin:-14px 0 22px; }
.tl-tonic{ background:var(--tonic-soft); color:var(--tonic); }
.tl-major{ background:var(--major-soft); color:var(--major); }
.tl-mediant{ background:var(--mediant-soft); color:var(--mediant); }
.tl-dominant{ background:var(--dominant-soft); color:var(--dominant); }
.tl-subdom{ background:var(--subdom-soft); color:var(--subdom); }
.tl-graphite{ background:var(--graphite-soft); color:var(--graphite); }

/* ---- 区分バー（ラベルは枠に応じてプリセット or 汎用色を当てる。色は機能トークン写像＝明暗自動） ---- */
.sec-bar{ display:flex; align-items:center; gap:12px; margin:30px 0 12px; }
.sec-label{ font-size:0.7667rem; font-weight:700; letter-spacing:.02em; padding:5px 13px; border-radius:5px; white-space:normal; min-width:0; overflow-wrap:anywhere; }
.sec-line{ flex:1; height:1px; background:var(--line); }
/* ソナタ用プリセット＋汎用色（A〜D）。写像：exp/a=tonic, b=dominant, dev/c=mediant, tr/d=major, rec=subdom, cod=graphite */
.sec-exp,.sec-a{ background:var(--tonic-soft); color:var(--tonic); }
.sec-b{ background:var(--dominant-soft); color:var(--dominant); }
.sec-dev,.sec-c{ background:var(--mediant-soft); color:var(--mediant); }
.sec-tr,.sec-d{ background:var(--major-soft); color:var(--major); }
.sec-rec{ background:var(--subdom-soft); color:var(--subdom); }
.sec-cod{ background:var(--graphite-soft); color:var(--graphite); }

/* ---- 区分テーブル：精密な細罫グリッド・データ列は等幅 ---- */
.ana-table{ width:100%; border-collapse:collapse; font-size:0.8667rem; }
.ana-table th{ position:sticky; top:var(--band-h); z-index:5; background:var(--surface-soft); border:0; border-bottom:1.5px solid var(--line); color:var(--muted); font-size:0.7rem; font-weight:700; letter-spacing:.06em; padding:8px 9px; text-align:left; white-space:nowrap; }
.ana-table td{ border:0; border-bottom:1px solid var(--line-soft); padding:11px 9px; line-height:1.7; vertical-align:top; color:var(--ink); }
.ana-table tr:hover td{ background:var(--surface); }
.ana-table td:first-child{ font-weight:600; border-left:3px solid var(--tonic); }
.ra td:first-child{ border-left-color:var(--tonic); } .rb td:first-child{ border-left-color:var(--subdom); }
.rd td:first-child{ border-left-color:var(--mediant); } .rc td:first-child{ border-left-color:var(--dominant); }
.rz td:first-child{ border-left-color:var(--graphite); } .rcod td:first-child{ border-left-color:var(--subdom); }
.ana-table td:nth-child(2){ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.8rem; color:var(--muted); white-space:nowrap; }
/* 主題提示の行（P-a／S-a 等の初出）は <tr class="ra rthm"> のように rthm を重ねて「主題の行」を立てる */
.ana-table tr.rthm td{ background:var(--surface); }
.ana-table tr.rthm td:first-child{ border-left-width:7px; }
/* 位置セル：小節（太字）と参照録音の ≈mm:ss（faint 小さめ）の2行縦積み。
   <td class="tsec"><span class="ms">m.53–96</span><span class="tm">≈4:10</span></td> */
td.tsec{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
td.tsec .ms{ display:block; font-weight:700; color:var(--ink); }
td.tsec .tm{ display:block; margin-top:1px; font-size:0.7333rem; font-weight:400; color:var(--muted); }

/* ---- チップ：調／終止／主題ラベルは等幅 ---- */
.kt,.mot{ display:inline-block; font-family:var(--font-mono); font-variant-numeric:tabular-nums; border-radius:5px; padding:2px 7px; font-size:0.7333rem; font-weight:600; border:1px solid transparent; margin:1px 0; }
.cad{ font-family:var(--font-mono); font-style:normal; font-size:0.7333rem; color:var(--muted); }
.mot{ background:var(--surface-soft); border-color:var(--line-soft); color:var(--muted); }
.ke{ background:var(--tonic-soft); color:var(--tonic); } .kB{ background:var(--dominant-soft); color:var(--dominant); }
.kG{ background:var(--subdom-soft); color:var(--subdom); } .kx{ background:var(--mediant-soft); color:var(--mediant); }
.kC{ background:var(--graphite-soft); color:var(--graphite); } .kmod{ background:var(--major-soft); color:var(--major); }
.kmaj,.kmaj2{ background:var(--subdom-soft); color:var(--subdom); } .kpur{ background:var(--dominant-soft); color:var(--dominant); }
/* イベント行の小節番号：内容欄で「m.9：…」を列挙するときは
   <span class="mno">m.9</span>説明<br> のイベント行に分ける（等幅小節番号＋説明） */
.mno{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:0.7333rem; font-weight:600; color:var(--muted); padding-right:4px; }

/* ---- 聴取の手がかり／差異 ---- */
.hint{ display:block; margin-top:6px; padding-left:11px; border-left:2px solid var(--line); color:var(--muted); font-size:0.8rem; line-height:1.65; }
.hint b{ color:var(--ink); } /* 区分の最重要の1点（先頭 <b>）を ink で立てる */
.diff{ display:inline-block; margin-top:6px; padding:3px 9px; border-radius:5px; background:var(--accent-soft); color:var(--accent); font-size:0.8rem; font-weight:600; }

/* ---- 特異点（special-box）：各楽章に必ず立てる ---- */
.special-box{ margin-top:28px; padding:16px 20px; background:var(--surface); border:0; border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; }
.special-title{ color:var(--accent); margin-bottom:9px; }
.special-list{ font-size:0.8667rem; line-height:1.85; color:var(--ink); padding-left:1rem; }

/* ---- 別の見立て（補助の読み・簡略） ---- */
.lens-box{ margin-top:28px; padding:16px 20px; background:var(--surface); border:0; border-left:3px solid var(--tonic); border-radius:0 var(--radius) var(--radius) 0; color:var(--muted); }
.lens-title{ color:var(--tonic); margin-bottom:9px; }
.lens-.managed-guide{ font-size:0.8667rem; color:var(--ink); line-height:1.85; }
.lens-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px; }
.lens-card{ border:1px solid var(--line-soft); border-radius:var(--radius); padding:10px 12px; font-size:0.8rem; color:var(--ink); background:var(--surface); line-height:1.6; }
.lens-card .lh{ font-size:0.7rem; font-weight:700; letter-spacing:.04em; color:var(--tonic); margin-bottom:4px; }

/* ---- 対比グリッド（軸は枠に合わせる：ソナタ＝調性／楽劇＝ダイナミクス・音色・編成） ---- */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.compare-card{ padding:15px 17px; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); font-size:0.8667rem; line-height:1.7; color:var(--ink); }
.c-exp-h{ font-size:0.7rem; font-weight:700; letter-spacing:.08em; color:var(--tonic); margin-bottom:4px; text-transform:uppercase; }
.c-rec-h{ font-size:0.7rem; font-weight:700; letter-spacing:.08em; color:var(--subdom); margin-bottom:4px; text-transform:uppercase; }
.compare-note{ font-size:0.8rem; color:var(--muted); line-height:1.7; margin-top:10px; }

/* ---- 動機・主題凡例（楽劇・交響詩・循環形式など。ドット色は .dot-* で当てる） ---- */
.legend-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin:12px 0 18px; }
.legend-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:11px 13px; }
.legend-card .lc-h{ font-size:0.8rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
.legend-card .lc-b{ font-size:0.7667rem; color:var(--muted); line-height:1.65; }
.legend-dot{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:middle; }
.dot-tonic{ background:var(--tonic); } .dot-major{ background:var(--major); } .dot-mediant{ background:var(--mediant); }
.dot-dominant{ background:var(--dominant); } .dot-subdom{ background:var(--subdom); } .dot-graphite{ background:var(--graphite); }
.dot-accent{ background:var(--hue-tonic); }

/* ---- 変奏グリッド：8列＝パッサカリア／シャコンヌの8小節主題が既定。
        変奏周期が違う曲は grid-template-columns を周期に合わせて変える ---- */
.vgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:4px; padding:8px; margin:0.6rem 0; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); }
.vc{ min-height:60px; border-radius:5px; font-family:var(--font-mono); font-size:0.7rem; font-weight:600; line-height:1.35; padding:7px 5px; text-align:center; }
.vc span{ font-family:var(--font-sans); font-weight:400; }
.vc-a{ background:var(--tonic-soft); color:var(--tonic); } .vc-b{ background:var(--dominant-soft); color:var(--dominant); }
.vc-c{ background:var(--mediant-soft); color:var(--mediant); } .vc-d{ background:var(--major-soft); color:var(--major); } .vc-cod{ background:var(--subdom-soft); color:var(--subdom); }
/* 変奏セクション凡例（フラット） */
.legend{ display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 18px; }
.leg-item{ font-family:var(--font-mono); font-size:0.7rem; padding:3px 9px; border-radius:5px; }
.leg-tonic{ background:var(--tonic-soft); color:var(--tonic); } .leg-major{ background:var(--major-soft); color:var(--major); }
.leg-mediant{ background:var(--mediant-soft); color:var(--mediant); } .leg-dominant{ background:var(--dominant-soft); color:var(--dominant); }
.leg-subdom{ background:var(--subdom-soft); color:var(--subdom); } .leg-graphite{ background:var(--graphite-soft); color:var(--graphite); }

/* ---- 参考文献 ---- */
.biblio{ margin-top:44px; border-top:1.5px solid var(--line); padding-top:18px; }
.biblio h3{ margin-bottom:0.5rem; }
.biblio ul{ font-size:0.8667rem; line-height:1.9; color:var(--ink); padding-left:1.1rem; }
.biblio a{ color:var(--accent); }

/* ---- 版・改訂日の表示行（GuideLayout.astro が guides.ts から head の guide-version / guide-created /
     guide-revised と同じ値で生成し、check-managed-guides.mjs --dist が両者の一致を照合する。既存トークンだけを参照するので明暗・印刷で追加定義は要らない。
     罫線は引かない——直下の .site-foot が border-top を持つので、引くと誌面末尾に横罫が3本並ぶ） ---- */
.guide-rev{ margin-top:26px; font-family:var(--font-mono); font-size:0.7333rem; color:var(--muted); letter-spacing:.03em; }

/* ---- サイトへの導線（フッター。印刷でも URL が読めるようテキストで書く） ---- */
.site-foot{ margin-top:26px; padding-top:14px; border-top:1px solid var(--line-soft); font-size:0.7667rem; color:var(--muted); letter-spacing:.03em; }
.site-foot a{ color:var(--muted); }
.site-foot a:hover{ color:var(--accent); }

/* ---- レスポンシブ ---- */
@media (max-width:860px){
  .wrap{ padding:28px 16px 60px; }
  .ts-row{ grid-template-columns:repeat(2,1fr); }
  .vgrid{ grid-template-columns:repeat(4,1fr); }
  .compare-grid,.lens-grid{ grid-template-columns:1fr; }
}
@media (max-width:1024px){
  /* 俯瞰表・区分テーブル：カード化（ヘッダ行は <tr><th> なので tr:first-child を隠す）。
     データセルのラベルは JS が撒く data-label を使う（下の汎用2ルール。個別 ::before を書かない） */
  .ov-table,.ov-table tbody,.ov-table tr,.ov-table td{ display:block; width:100%; }
  .ov-table tr:first-child{ display:none; }
  .ov-table tr{ margin:0 0 12px; border:1px solid var(--line-soft); border-left:4px solid var(--hue-tonic); border-radius:var(--radius); padding:6px 0; }
  .ov-table tr.ov-2{ border-left-color:var(--major); } .ov-table tr.ov-3{ border-left-color:var(--mediant); } .ov-table tr.ov-4{ border-left-color:var(--hue-tonic); }
  .ov-table td{ border:0; padding:5px 14px; }
  .ov-table td:first-child{ font-size:1.0667rem; padding-top:10px; }
  .ana-table tr:first-child{ display:none; }
  .ana-table,.ana-table tbody,.ana-table tr,.ana-table td{ display:block; width:100%; }
  .ana-table tr{ margin:0 0 12px; border:1px solid var(--line-soft); border-left:3px solid var(--tonic); border-radius:var(--radius); overflow:hidden; }
  .ana-table tr.rb{ border-left-color:var(--subdom); } .ana-table tr.rd{ border-left-color:var(--mediant); }
  .ana-table tr.rc{ border-left-color:var(--dominant); } .ana-table tr.rz{ border-left-color:var(--graphite); }
  .ana-table td{ border:0; border-bottom:1px solid var(--line-soft); padding:8px 13px; }
  .ana-table td:first-child{ border-left:0; background:var(--surface-soft); font-size:0.9333rem; padding-top:11px; }
  .ana-table td:last-child{ border-bottom:0; }
  .ov-table td[data-label]::before,.ana-table td[data-label]::before{ content:attr(data-label) " ／ "; color:var(--muted); font-weight:700; }
  .ov-table td[data-label]:last-child::before,.ana-table td[data-label]:last-child::before{ content:attr(data-label); display:block; font-size:0.6667rem; margin-bottom:2px; }
  td.tsec .ms,td.tsec .tm{ display:inline; } /* カード化ではラベルに続けて横並び */
  td.tsec .tm{ margin-left:8px; }
  .vgrid{ grid-template-columns:repeat(2,1fr); }
}
/* ---- 印刷：全パネル展開・背景色を落とし黒版で刷る（ダーク閲覧中でも紙は白）。
        トークンを紙用に上書きするので、soft 系背景は自動で消える ---- */
@media print{
  .managed-guide{
    --ink:#111; --muted:#3f3f3f; --faint:#5f5f5f;
    --paper:#fff; --surface:#fff; --surface-soft:#fff;
    --line:#999; --line-soft:#ccc;
    --accent:#7a2438; --accent-soft:#fff;
    --tonic:#33517e; --tonic-soft:#fff;
    --major:#9c4a28; --major-soft:#fff;
    --mediant:#7a5012; --mediant-soft:#fff;
    --dominant:#6d3858; --dominant-soft:#fff;
    --subdom:#3c622b; --subdom-soft:#fff;
    --graphite:#555; --graphite-soft:#fff;
  }
  .managed-guide{ background:#fff; }
  .spine-band{ display:none !important; }
  .mvt-panel{ display:block !important; break-before:page; }
  .mvt-panel:first-of-type{ break-before:auto; }
  .ana-table th{ position:static; }
  .ana-table tr:hover td{ background:transparent; }
  .kt,.mot{ border-color:var(--line-soft); }
  .tl,.vc,.leg-item{ border:1px solid var(--line-soft); }
  .ts-seg{ border:1px solid var(--line-soft); border-top-width:4px; }
  .ts-seg:hover{ transform:none; }
  a{ color:inherit; }
}

/* The page shell owns neutral colors and typography; music colors retain their semantics. */
.managed-guide { --ink:var(--color-text); --muted:var(--color-text-muted); --faint:var(--color-text-muted); --paper:var(--color-bg); --surface:var(--color-surface); --surface-soft:var(--color-bg-subtle); --line:var(--color-border); --line-soft:var(--color-border-soft); --accent:var(--color-link); --accent-soft:var(--color-accent-soft); --band-h:0px; }
.managed-guide .guide-header { padding-bottom:1.5rem; }
.managed-guide .guide-summary { max-width:48rem; font-size:1.08rem; line-height:1.9; margin:1.25rem 0 .5rem; }
.managed-guide .guide-scope,.managed-guide .guide-source-link { font-size:.85rem; color:var(--muted); }
.managed-guide .guide-analysis { margin-top:1.5rem; }
.managed-guide .guide-enhanced { scroll-margin-top:1rem; }
.managed-guide.guide-enhanced .mvt-panel[hidden] { display:none; }
.managed-guide .ts-seg:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.managed-guide .guide-section-nav { display:flex; gap:.35rem; position:sticky; top:0; z-index:12; overflow-x:auto; padding:.55rem 0; background:var(--paper); border-block:1px solid var(--line); margin:1rem 0; }
.managed-guide .guide-section-nav a { display:flex; gap:.4rem; align-items:baseline; white-space:nowrap; padding:.35rem .7rem; font-size:.8rem; text-decoration:none; border-radius:var(--radius); }
.managed-guide .guide-section-nav a[aria-current] { background:var(--accent-soft); font-weight:700; }
.managed-guide .guide-section-nav .ts-rom,.managed-guide .guide-section-nav .ts-key { font-size:.8rem; }
.managed-guide [id] { scroll-margin-top:4.5rem; }
@media print { .managed-guide .mvt-panel[hidden] { display:block!important; } .site-header,.site-footer,.guide-source-link { display:none!important; } }
@media print { .managed-guide .guide-section-nav { display:none; } }
@media (max-width:1024px) {
  .managed-guide .ov-table td,.managed-guide .ana-table td,.managed-guide .nw { white-space:normal; overflow-wrap:anywhere; }
}
:root[data-theme="light"] .managed-guide { --tonic:#3a5a8c; --tonic-soft:#edf1f6; --major:#b1542f; --major-soft:#f4ece5; --mediant:#8a5a14; --mediant-soft:#f2eee3; --dominant:#7a3f63; --dominant-soft:#efebf2; --subdom:#436e30; --subdom-soft:#eaf0e7; --graphite:#5d5c58; --graphite-soft:#eef0f2; }
:root[data-theme="dark"] .managed-guide { --tonic:#8fa9d6; --tonic-soft:#212939; --major:#d98a63; --major-soft:#372820; --mediant:#cf9b53; --mediant-soft:#342a1a; --dominant:#cf9bbd; --dominant-soft:#32232d; --subdom:#8fc070; --subdom-soft:#243324; --graphite:#9b9a94; --graphite-soft:#2a2a27; }
@media print { :root .managed-guide,:root[data-theme] .managed-guide { --ink:#111; --muted:#3f3f3f; --paper:#fff; --surface:#fff; --surface-soft:#fff; --line:#999; --line-soft:#ccc; --accent:#7a2438; --accent-soft:#fff; --tonic-soft:#fff; --major-soft:#fff; --mediant-soft:#fff; --dominant-soft:#fff; --subdom-soft:#fff; --graphite-soft:#fff; } }