/* 暦守のサイトの色・書体・余白（実値はここだけに書く。.claude/rules/design-tokens.md）。
   色は手帳と卓上カレンダーの「夜空」と「生成」（products/planner/planner.css）から取る: 白・濃紺・金（計画書 §2.5 のブランドの顔）。
   字と地の明るさの比は tests/design-tokens.test.ts が測る（本文の字は4.5以上、焦点の輪は白の上で3以上） */
:root {
  --color-paper: #fdfcf8;
  --color-surface: #ffffff;
  --color-soft: #f4f0e6;
  --color-line: #e2dccd;
  --color-ink: #26304a;
  --color-heading: #1c2640;
  --color-muted: #5b6070;
  --color-brand: #1c2640;
  --color-brand-dark: #121a2e;
  --color-on-brand: #fdfcf8;
  --color-on-brand-accent: #e9d6ab;
  /* 金は線と飾りだけ。金の字は --color-accent-text（紙の上で4.5以上） */
  --color-accent: #b08d4f;
  --color-accent-text: #7f6231;
  --color-focus: #7f6231;
  /* 朱: 朱の印「暦守」と天赦日のしるし（手帳の夜空の組の --seal・--holiday と同じ。紙の色の字を載せて4.5以上） */
  --color-shu: #a4473d;
  /* 濃紺の地の上の線と飾り（手帳の夜空の表紙の線と同じ。字には使わない） */
  --color-brand-line: #c9a567;
  /* 相談窓口の囲み（目立たせるが、あおらない） */
  --color-support: #8f3e35;
  --color-support-soft: #fbf1ee;
  /* 本文は端末の書体（速さのため）。"Yu Gothic" は入れない（Windows の Chrome で一致に時間がかかる。雛形の実測 2026-09-08）。
     見出しだけ Zen Old Mincho を自前で配る（屋号と見出しの字だけの text サブセット。tools/fetch-fonts.mjs） */
  --font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Noto Sans JP", sans-serif;
  --font-heading: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  /* 透かした色（月を選ぶ帯と上へ戻るボタンの地・ボタンの中の丸・濃紺の地の上の薄い字と線。上のナビの帯は透かさない） */
  --color-veil: rgb(253 252 248 / 88%);
  --color-brand-veil: rgb(28 38 64 / 7%);
  --color-on-brand-veil: rgb(253 252 248 / 14%);
  --color-on-brand-muted: #c5cad8;
  --color-on-brand-hairline: rgb(233 214 171 / 28%);
  /* 指で押したときに、押した所にのる色（金を薄く） */
  --color-tap: rgb(176 141 79 / 18%);
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  /* まとまりの間の大きな余白（余白を広くとる。docs/design/暦守の手帳の見た目.md「余白は広く」） */
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;
  /* 角の丸みの決まり: ボタンと札の枠は丸い端（pill）、大きな枠は lg、その中の箱と小さな札は radius */
  --radius: 0.5rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  /* ボタン: 字が2行になっても丸い端のまま見える丸み（pill だと、2行のときに端が半円にならない） */
  --radius-button: 1.75rem;
  /* 影は濃紺を薄くした色で、やわらかく（黒い影は使わない） */
  --shadow-card: 0 1px 2px rgb(28 38 64 / 6%);
  --shadow-soft: 0 28px 60px -36px rgb(28 38 64 / 32%);
  --shadow-float: 0 12px 32px -20px rgb(28 38 64 / 38%);
  /* 動きの速さの変わり方（はじめ速く、終わりはゆっくり。linear と ease-in-out は使わない） */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  /* 重なりの順（上のナビ・開いたメニュー・紙の質感の順に上） */
  --z-header: 40;
  --z-menu: 50;
  --z-grain: 60;
  /* 字の大きさの段（本文は 1.0625rem）。ページと部品は、この段だけを使う（じかに rem を書かない。大きな数字の飾りだけは、部品の中で決める） */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-body: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.9rem;
  --text-4xl: 2.2rem;
  /* 字の大きさ（ホームの大きな題・ページの題・まとまりの題） */
  --text-display: clamp(1.9rem, 1.2rem + 3.9vw, 3.9rem);
  --text-h1: clamp(1.7rem, 1.2rem + 2.4vw, 2.9rem);
  --text-h2: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  /* 題と見出しの大きさの差を小さくする（2026-10-03。広い画面で、見出しが題の約半分しかなく、まとまりの始まりが弱かった。
     知識庫の承認済み「Webデザイン-安っぽさの正体はタイポグラフィのスケール落差」は、見出し÷題を 0.70 以上にする目安）。
     - --text-h2-lg: ホームのまとまりの見出し（広い画面で、ホームの題の約0.7倍）
     - --text-section と --section-col: 広い画面の2列の組み方（global.css の .container.prose）の、左の列の見出しの字と、列の幅。
       字と列を同じ割合で広げて、1行に入る字の数（約10字）を変えない（折り返しの位置を、確かめた形のまま保つ）。cqw は、列の入れ物（.container.prose）の幅 */
  --text-h2-lg: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  --text-section: clamp(1.5rem, 2.62cqw, 1.9rem);
  --section-col: clamp(16rem, 28.3vw - 0.7rem, 20.5rem);
  /* 画面の幅で変わる大きさ（札の題・結果の数字・今日の暦の日にち）。部品は、ここの段だけを使う */
  --text-fluid-sm: clamp(1.25rem, 0.9rem + 1.4vw, 1.7rem);
  --text-fluid-md: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-fluid-lg: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --text-fluid-xl: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  --text-day: clamp(5.5rem, 4rem + 6vw, 8rem);
  --text-day-compact: 4.75rem;
  /* 紙の質感（薄い粒。生成の紙に合わせた茶の色。粒の濃さは 0.16 × 重ねる濃さ 0.5。前の 0.09 では、見ても分からなかった。濃紺の粒では、紙が灰色に寄った） */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* 矢印の形（リンクの右に置く。色は使う所で決める） */
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M16 2.5 22 8l-6 5.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --header-height: 4rem;
  /* ページの左右の余白（列の外の余白。狭い画面でも、字が画面の端に付かない） */
  --gutter: 1.25rem;
  --content-width: 1160px;
  /* 本文の読みやすい幅（1行およそ36〜38字）。列ではなく中身にだけ付ける（知識庫「本文の幅は列ごと絞らず…」） */
  --prose-width: 38rem;
}

/* 狭い画面では、上に残るナビを少し低くする（月を選ぶ帯も上に残るページで、本文の見える高さを広くとる） */
@media (max-width: 640px) {
  :root { --header-height: 3.5rem; }
}
/* 見出しの書体（屋号と見出しで使う字だけ。tools/fetch-fonts.mjs が作る。字が増えたら作り直す） */
/* 見出しの書体。tools/fetch-fonts.mjs が作る（手で編集しない）。字は src/lib/heading-font.json */
@font-face { font-family: "Zen Old Mincho"; font-weight: 600; font-display: swap; src: url("/fonts/zen-old-mincho-600-13ef809aa5.woff2") format("woff2"); }

/* ---------- 土台 ---------- */
:root {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-paper);
  font-size: 100%;
  line-height: 1.9;
  font-synthesis: none;
  /* 明るい色の組だけで作っている（端末が暗い設定でも、選ぶ欄やスクロールの帯を明るい色で出す） */
  color-scheme: light;
  -webkit-tap-highlight-color: var(--color-tap);
  /* ページの中のリンクで飛んだ先が、浮いた上のナビに隠れないようにする */
  scroll-padding-top: calc(var(--header-height) + var(--space-lg));
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-paper); font-size: var(--text-body); letter-spacing: 0.03em; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-brand); text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: var(--color-accent); transition: text-decoration-color 0.4s var(--ease-out), color 0.4s var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
/* 押せる物は、二度押しの拡大を待たずに応える */
a, button, select, summary, label { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* 濃紺の地の上では、焦点の輪を金の薄い色に替える（紙の上の色のままだと、濃紺の上で見えにくい） */
.site-footer :focus-visible, .section--night :focus-visible, .result-night :focus-visible, .task--night :focus-visible, .today :focus-visible { outline-color: var(--color-on-brand-accent); }
/* script が焦点を移す先（結果の見出しなど。押せる物ではない）には、枠を出さない */
[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--color-on-brand-accent); color: var(--color-heading); }

/* 紙の質感: ごく薄い粒を、動かない1枚として全体に重ねる（字の読みやすさは変えない。押す・選ぶ動きは通す） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.5;
  background-image: var(--texture-grain);
}

/* 日本語は文節で折る。lang="ja" が無いと効かない（知識庫「word-break-auto-phraseはlang-jaが無いと効かない」）。
   ページの全体に当てる（札や行の中の短い文も、語の途中で折れていた。2026-10-02）。
   文節が枠より長いときだけ、途中で折る（break-word は、表の列の幅の下限を縮めない。anywhere は縮めるので、表では使わない）。
   見出しの balance は auto-phrase と組にし、支える所だけで使う（知識庫「日本語の見出しにbalanceだけが効くと…」） */
body { overflow-wrap: break-word; }
@supports (word-break: auto-phrase) {
  body { word-break: auto-phrase; }
  h1, h2, h3 { text-wrap: balance; }
  /* 題に（ ）の中の小さな字があるときは、行の長さをそろえない（そろえると、「神社のお参りの／作法（手水と…）」のように、題の本体が途中で折れる） */
  h1:has(.h1-sub) { text-wrap: wrap; }
  /* ページの頭の案内の文は、行の長さをそろえる（狭い画面で、行の右端のがたつきを小さくする） */
  .lead { text-wrap: balance; }
}
/* 狭い画面でも、本文は文節で折る（語の途中で割らない。知識庫の承認済み「HP制作-日本語は文節で折り一文一行で組む」）。
   2026-10-02 の見た目の点検で「行の右端ががたつくので、狭い画面では文節で折らずにつめる」と言われて試したが、
   「公／式サイト」「サイ／ト」「まとめまし／た」と語の途中で割れるので、採らなかった */
/* 行の途中で折らない語（「巳の日」「三の酉」など。データの文は src/lib/nowrap.ts が包む） */
.nw { white-space: nowrap; }

/* ---------- 字 ---------- */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; color: var(--color-heading); line-height: 1.5; letter-spacing: 0.06em; font-feature-settings: "palt"; overflow-wrap: anywhere; }
h1 { font-size: var(--text-h1); line-height: 1.4; margin: 0 0 var(--space-md); }
h2 { font-size: var(--text-h2); margin: var(--space-2xl) 0 var(--space-md); }
h3 { font-size: var(--text-xl); margin: var(--space-lg) 0 var(--space-sm); }
/* まとまりの最初の見出しは、上の余白を持たない（まとまりの上の余白と重なって、間があきすぎる） */
.section > .container > h2:first-child { margin-top: 0; }
@media (max-width: 640px) { h2 { margin-top: var(--space-xl); } }
p { margin: 0 0 var(--space-md); }
/* 題の（ ）の中（「（東京都台東区）」「（2026年・2027年）」）は、少し小さくし、ひとまとまりで次の行へ送る（「（暦で／いちばんの吉日）」と折れていた） */
/* 始めの「（」は、字の箱の左半分が空いている。左へ寄せて、行の頭に来たときに題の左端とそろえる（題の続きに置かれたときも、空きすぎない） */
.h1-sub { display: inline-block; margin-left: -0.45em; font-size: 0.66em; letter-spacing: 0.04em; }
/* ホームの大きな題 */
.display { font-size: var(--text-display); line-height: 1.32; letter-spacing: 0.05em; }
/* 明朝体で出す字（見出しのほか、日付の札の数字など。字は見出しの書体の切り出しに入る。tools/fetch-fonts.mjs） */
.font-heading { font-family: var(--font-heading); font-weight: 600; font-feature-settings: "palt"; }
/* 読み上げにだけ出す字（表の題など） */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }

.skip-link {
  position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: calc(var(--z-menu) + 1);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius); background: var(--color-brand); color: var(--color-on-brand);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- 並べ方 ---------- */
.container { width: min(calc(100% - var(--gutter) * 2), var(--content-width)); margin-inline: auto; }
/* 本文の外へはみ出す飾り（狭い画面で、ページの頭の線画を画面の右上の角で切る）は、横のスクロールを出さずに切る。
   clip は、上に残る帯（position: sticky）を止めない（hidden にすると止まる） */
main { overflow-x: clip; }
.section { padding: var(--space-2xl) 0; }
/* 最初のまとまりは、上の余白を小さくする（パソコンでも、題と最初の答えが最初の画面に入るように。高さ700pxほどの画面で、答えの札が切れていた） */
main > .section:first-child { padding-top: var(--space-xl); }
/* 狭い画面では、パンくずと題の間をつめて、最初の画面に題と答えが入るようにする */
@media (max-width: 640px) {
  .section { padding: var(--space-xl) 0; }
  main > .section:first-child { padding-top: var(--space-lg); }
}
.section--soft { background: var(--color-soft); }
/* 濃紺の帯（夜空）。中の字と線は、濃紺の地の上の色に替える */
.section--night { background: var(--color-brand); color: var(--color-on-brand); }
.section--night :is(h1, h2, h3) { color: var(--color-on-brand); }
.section--night a { color: var(--color-on-brand); text-decoration-color: var(--color-brand-line); }
.section--night .muted { color: var(--color-on-brand-muted); }
.section--night .more { color: var(--color-on-brand); }
.section--night .more::after { background: var(--color-brand-line); }
.lead { color: var(--color-muted); font-size: var(--text-lg); line-height: 2; }
@media (max-width: 640px) { .lead { font-size: var(--text-body); line-height: 1.9; } }
/* 本文の幅は列ではなく中身にだけ付け、列の左端をそろえる。図（暦のマス・札の並び・ページの頭の絵）は .wide で列いっぱいに置く */
.prose > * { max-width: var(--prose-width); }
.prose > .wide { max-width: none; }
/* 箇条の字下げは、決まりの強さを上げずに付ける（札の並びなど、形を持つ一覧の決まりが勝つように） */
.prose :where(ul, ol) { padding-left: 1.4em; }
.prose :where(li) { margin-bottom: var(--space-xs); }
.prose li::marker { color: var(--color-accent); }
.eyebrow { margin: 0 0 var(--space-sm); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.16em; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }

/* 列の中に置く、端から端までの帯（紙の色を一段深くして、まとまりを区切る）。
   影を大きく広げて上下で切る作りなので、横にはみ出さない */
.band { margin-block: var(--space-2xl); padding-block: var(--space-2xl); background: var(--color-soft); box-shadow: 0 0 0 100vmax var(--color-soft); clip-path: inset(0 -100vmax); }
.prose > .band { max-width: none; }
.band > * { max-width: var(--prose-width); }
.band > .wide { max-width: none; }
.band > :first-child { margin-top: 0; }
.band > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .band { margin-block: var(--space-xl); padding-block: var(--space-xl); } }

/* 左に見出し、右に中身の組（事実を並べるページ）。広い画面だけ2列にし、見出しは、その中身を読んでいる間は上に残る */
.split { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); align-items: start; padding-block: var(--space-xl); border-top: 1px solid var(--color-line); }
.split > h2 { position: sticky; top: calc(var(--header-height) + var(--space-lg)); margin: 0; font-size: var(--text-2xl); }
.split-body > * { max-width: var(--prose-width); }
.split-body > .wide { max-width: none; }
.split-body > :first-child, .split-body > :first-child > :first-child { margin-top: 0; }
.split-body > :last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-lg); }
  .split > h2 { position: static; }
}

/* 広い画面の本文のページ（.container.prose）: まとまりの見出し（h2）を左の列に、中身を右の列に置く（.split と同じ幅の割り）。
   本文の幅（38rem）のまま左に寄せると、右の半分近くが空いたままの区間が長く続く（2026-10-02 の見た目の点検）。
   ページの側は何も包まなくてよい: h2 と、その次の中身が、同じ段に並ぶ。端から端までの中身（.wide・.band）は、2列をまたぐ。
   見出しの上には、列の端から端までの細い線を引く（暦の罫線。線の幅は、列の幅 100cqw で決める） */
@media (min-width: 1041px) {
  /* --section-pad: 見出しの上の、番号を置く高さ（大きな番号と、見出しとの間の余白のぶん） */
  .container.prose { container-type: inline-size; --section-pad: calc(var(--space-xl) + var(--space-md)); }
  .container.prose, .container.prose > .band { display: grid; grid-template-columns: calc(var(--section-col) + var(--space-xl)) minmax(0, 1fr); align-items: start; }
  .container.prose > *, .container.prose > .band > * { grid-column: 2; min-width: 0; }
  .container.prose > :is(.wide, .band), .container.prose > .band > .wide { grid-column: 1 / -1; }
  .container.prose > h2, .container.prose > .band > h2 { position: relative; grid-column: 1; margin: var(--space-xl) 0 0; padding: var(--section-pad) var(--space-xl) 0 0; font-size: var(--text-section); }
  .container.prose > h2::before, .container.prose > .band > h2::before { content: ""; position: absolute; left: 0; top: 0; width: 100cqw; border-top: 1px solid var(--color-line); }
  /* 見出しの上に、まとまりの番号を大きな金の数字で添える（まとまりの始まりを、遠目にも分かるようにする。2026-10-03。
     前は小さな字で、見出しも題の半分ほどの大きさだったので、まとまりの始まりが弱かった。飾りなので、読み上げには出さない） */
  .container.prose { counter-reset: section; }
  .container.prose > h2, .container.prose > .band > h2 { counter-increment: section; }
  .container.prose > h2::after, .container.prose > .band > h2::after, .container.prose > .split::before { content: counter(section, decimal-leading-zero) / ""; position: absolute; left: 0; top: var(--space-md); color: var(--color-accent-text); font-family: var(--font-heading); font-size: var(--text-fluid-lg); font-weight: 600; letter-spacing: 0.04em; line-height: 1; }
  .container.prose > .band > h2:first-child::after { top: calc(var(--space-xl) * -1); }
  /* 左右2列の組（.split）にも、同じ番号を添える（番号は、ページの中で通しで数える） */
  .container.prose > .split { position: relative; grid-template-columns: minmax(0, var(--section-col)) minmax(0, 1fr); padding-top: var(--section-pad); counter-increment: section; }
  .container.prose > .split > h2 { font-size: var(--text-section); }
  /* 見出しの次の中身は、見出しと同じ高さから始める（グリッドの中では上下の余白が重ならないので、同じだけ下げる） */
  .container.prose > h2 + *, .container.prose > .band > h2 + * { margin-top: calc(var(--space-xl) + var(--section-pad)); }
  /* 見出しの次が文（p）のときは、見出しの1行目と、文の1行目の、字の足もとをそろえる
     （上の端でそろえると、大きな見出しの横で、小さな文が上に浮いて見えた。2026-10-03 の見た目の点検。札や表は、上の端でそろえたまま） */
  .container.prose > h2:has(+ p), .container.prose > .band > h2:has(+ p), .container.prose > h2 + p, .container.prose > .band > h2 + p { align-self: first baseline; }
  /* 見出しの次が、端から端までの中身のとき: 見出しは2列をまたぎ、中身は次の段に置く */
  .container.prose > h2:has(+ .wide), .container.prose > .band > h2:has(+ .wide) { grid-column: 1 / -1; padding-right: 0; }
  /* ページの頭のすぐ次の見出しは、上の余白を持たない（頭の下の余白と足されて、答えが下へ押されていた） */
  .container.prose > .page-hero + h2 { margin-top: 0; }
  .container.prose > .page-hero + h2 + :not(.wide) { margin-top: var(--section-pad); }
  /* 番号を出さないページ（解説の記事。右の目次の番号と食い違うため）。番号を置く高さも取らない */
  .container.prose.no-section-number { --section-pad: var(--space-xl); }
  .container.prose.no-section-number > h2::after { content: none; }
  .container.prose > h2 + .wide, .container.prose > .band > h2 + .wide { margin-top: var(--space-md); }
  /* 帯の最初の見出しは、帯の上の余白があるので、線と上の余白を持たない */
  .container.prose > .band > h2:first-child { margin-top: 0; padding-top: 0; }
  .container.prose > .band > h2:first-child::before { content: none; }
  .container.prose > .band > h2:first-child + * { margin-top: 0; }
}

/* 狭い画面（1列）でも、まとまりの始まりに、罫線と番号を出す（広い画面と同じ言葉。前は、広い画面にしか出していなかったので、
   スマホでは、まとまりの始まりが見出しの大きさだけで、長いページの中で見つけにくかった。2026-10-03 の見た目の点検）。
   番号は飾りなので、読み上げには出さない。解説の記事（.no-section-number）には、番号を出さない（線だけ） */
@media (max-width: 1040px) {
  .container.prose { counter-reset: section; }
  .container.prose > h2, .container.prose > .band > h2, .container.prose > .split { counter-increment: section; }
  .container.prose > h2, .container.prose > .band > h2 { padding-top: var(--space-md); border-top: 1px solid var(--color-line); }
  .container.prose > .band > h2:first-child { padding-top: 0; border-top: 0; }
  .container.prose:not(.no-section-number) > h2::before, .container.prose:not(.no-section-number) > .band > h2::before, .container.prose:not(.no-section-number) > .split > h2::before { content: counter(section, decimal-leading-zero) / ""; display: block; margin-bottom: var(--space-xs); color: var(--color-accent-text); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; letter-spacing: 0.04em; line-height: 1; }
}

/* 知らせの囲み（公式からのお願いなど。金の線を左に引く） */
.notice-box { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-md) var(--space-sm) var(--space-lg); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-soft); }
.notice-box strong { color: var(--color-heading); }
/* 下書きの印（承認の前のページにだけ出る） */
.draft-label { display: inline-block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius); background: var(--color-support-soft); color: var(--color-support); font-weight: 600; }

/* 行で並べるリンク（あわせて読む解説など）。上に金の線、行の間に細い線、右に矢印 */
.link-rows { margin: var(--space-md) 0 var(--space-lg); padding: 0; list-style: none; border-top: 1px solid var(--color-accent); }
.link-rows li { margin: 0; border-bottom: 1px solid var(--color-line); }
.link-rows a { position: relative; display: block; padding: var(--space-sm) 3rem var(--space-sm) 0; color: var(--color-heading); font-weight: 600; text-decoration: none; }
.link-rows a::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 1.4rem; height: 0.9rem; margin-top: -0.45rem; background: var(--color-accent); -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; transition: transform 0.6s var(--ease-spring); }
.link-rows a:hover { color: var(--color-accent-text); }
.link-rows a:hover::after { transform: translateX(5px); }
.link-rows .small { display: block; color: var(--color-muted); font-weight: 400; }

/* 行で並べる入口（印・題・説明。札にしない。行の間の細い線だけ）。ホームの「暦と占いで調べる」と、解説の一覧 */
.entry-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-accent); }
.entry-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; margin: 0; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-line); }
.entry-row :is(h2, h3) { margin: 0; font-size: var(--text-lg); line-height: 1.6; }
.entry-row :is(h2, h3) a { color: var(--color-heading); text-decoration: none; }
/* 行の全体を押せるようにする */
.entry-row :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.entry-row-label { margin: 0; color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; }
.entry-row-summary { margin: calc(var(--space-xs) / 2) 0 0; color: var(--color-muted); font-size: var(--text-md); line-height: 1.7; }
.entry-row .icon-badge { background: var(--color-surface); transition: transform 0.7s var(--ease-spring), border-color 0.5s var(--ease-out); }
.entry-row:hover .icon-badge { transform: translateX(4px); border-color: var(--color-accent); }
@media (max-width: 900px) { .entry-rows { grid-template-columns: minmax(0, 1fr); } }

/* 折りたたみ（くわしい表など、読みたい人だけがひらく所） */
.disclosure { border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.disclosure summary { position: relative; padding: var(--space-md) 2.5rem var(--space-md) 0; cursor: pointer; list-style: none; color: var(--color-heading); font-weight: 600; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before, .disclosure summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 1rem; height: 1.5px; margin-top: -0.75px; background: var(--color-accent-text); transition: transform 0.6s var(--ease-spring); }
.disclosure summary::after { transform: rotate(90deg); }
.disclosure[open] summary::after { transform: rotate(0deg); }
.disclosure > :not(summary) { margin-bottom: var(--space-md); }

/* ---------- ボタン（丸い端。右に、矢印を入れた丸を持つ） ---------- */
.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: var(--space-xs) 3.75rem var(--space-xs) 1.6rem;
  border: 1px solid var(--color-brand); border-radius: var(--radius-button);
  background: var(--color-brand); color: var(--color-on-brand); font-weight: 600; line-height: 1.5; text-decoration: none;
  transition: background-color 0.5s var(--ease-out), transform 0.4s var(--ease-spring), box-shadow 0.5s var(--ease-out);
}
.button::before { content: ""; position: absolute; right: 0.45rem; top: 50%; width: 2.3rem; height: 2.3rem; margin-top: -1.15rem; border-radius: 50%; background: var(--color-on-brand-veil); transition: transform 0.6s var(--ease-spring); }
.button::after {
  content: ""; position: absolute; right: 1.15rem; top: 50%; width: 0.9rem; height: 0.9rem; margin-top: -0.45rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.6s var(--ease-spring);
}
/* 外のサイトへ出るボタンは、矢印を斜め上に向ける */
.button[href^="http"]::after { transform: rotate(-45deg); }
.button:hover { background: var(--color-brand-dark); box-shadow: var(--shadow-float); }
.button:hover::before { transform: scale(1.1); }
.button:hover::after { transform: translateX(3px); }
.button[href^="http"]:hover::after { transform: rotate(-45deg) translateX(3px); }
.button:active { transform: scale(0.98); }
.button--quiet { border-color: var(--color-line); background: var(--color-surface); color: var(--color-heading); }
.button--quiet::before { background: var(--color-brand-veil); }
.button--quiet:hover { border-color: var(--color-accent); background: var(--color-surface); }
/* 文の中の「くわしく見る」の形のリンク（矢印が少し進む） */
/* 字と矢印は、行の中に続けて置く（flex にすると、字の中の折らない語の包みが別の箱になり、「計算方法 と出典」と間があいた） */
.more { font-weight: 600; color: var(--color-heading); text-decoration: none; }
.more::after { content: ""; display: inline-block; width: 1.4rem; height: 0.9rem; margin-left: var(--space-xs); vertical-align: -0.08em; background: var(--color-accent); -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; transition: transform 0.6s var(--ease-spring); }
.more:hover::after { transform: translateX(5px); }

/* ---------- カード ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-md); padding: 0; list-style: none; }
.cards > li { margin: 0; }
.card { padding: var(--space-lg) var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
/* カード全体を押せるカード（見出しのリンクを枠いっぱいに広げる。ホームの入口と解説の一覧） */
.card--link { position: relative; transition: border-color 0.5s var(--ease-out), transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-out); }
.card--link:hover, .card--link:focus-within { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.card--link :is(h2, h3) a { color: var(--color-heading); text-decoration: none; }
.card--link :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
/* 二重の枠（紙の盆に、白い札を置いた形。外の枠と中の箱で、角の丸みをそろえる） */
.bezel { padding: var(--space-xs); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-soft); }
.bezel-core { height: 100%; padding: var(--space-lg); border-radius: calc(var(--radius-lg) - var(--space-xs)); background: var(--color-surface); box-shadow: var(--shadow-card); }

/* 丸い枠の中の線画（入口のカード・寺社のカード。絵は src/lib/art.ts の 24×24 の線画） */
.icon-badge { display: inline-flex; flex: none; width: 2.75rem; height: 2.75rem; padding: var(--space-xs); border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-paper); color: var(--color-accent-text); }
.icon-badge .icon { width: 100%; height: 100%; }

/* 干支の印（四角い枠の中の、明朝体の1〜2字。お参りの暦・守り本尊）。飾りなので、字は本文に置かず data-mark に置いて、ここで出す
   （本文に置くと、字を取り出したときに「子子（ね）年」のように重なる。書体に入れる字は tools/fetch-fonts.mjs が data-mark からも集める） */
.kanshi-mark { display: inline-grid; flex: none; place-items: center; width: 3.5rem; height: 3.5rem; border: 1px solid var(--color-accent); border-radius: var(--radius); background: var(--color-surface); color: var(--color-accent-text); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; line-height: 1; letter-spacing: 0; }
.kanshi-mark::before { content: attr(data-mark); }

/* ---------- 札 ---------- */
/* 短いしるし。金は縁日や吉日、朱は行事（手帳のしるしと同じ: 金の枠に金色の字・朱の地に紙の色の字） */
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--space-xs) / 1.5); margin: 0; padding: 0; list-style: none; }
.chips li { margin: 0; }
.chip { display: inline-block; padding: 0 0.7em; border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); line-height: 1.8; }
.chip--gold { border-color: var(--color-accent); color: var(--color-accent-text); font-weight: 600; }
.chip--shu { border-color: var(--color-shu); background: var(--color-shu); color: var(--color-on-brand); font-weight: 600; }

/* 日付の札（日めくりの暦の1枚の形。上に金の線、数字は明朝体で大きく） */
.date-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; padding: 0; list-style: none; }
.date-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: var(--space-sm) var(--space-xs) var(--space-xs); border: 1px solid var(--color-line); border-top: 3px solid var(--color-accent); border-radius: var(--radius); background: var(--color-surface); text-align: center; line-height: 1.4; box-shadow: var(--shadow-card); }
.date-tile-label { color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; }
.date-tile-date { color: var(--color-heading); font-size: var(--text-md); white-space: nowrap; }
/* 日付の数字の大きさと、呼び名が1行のときの札の高さ（場所を先に取っておく決まりが、同じ値を使う）。
   狭い画面では、札が細いので一段ずつ小さくする（日付は折らない字なので、そのままだと札の枠に当たる。360・375px で、枠から出ていた） */
.date-tiles { --tile-num: var(--text-3xl); --tile-height: 6.375rem; }
@media (max-width: 400px) { .date-tiles { --tile-num: var(--text-2xl); --tile-height: 5.9rem; } }
@media (max-width: 374px) { .date-tiles { --tile-height: 5.8rem; } .date-tile-date { font-size: var(--text-sm); } }
@media (max-width: 359px) { .date-tiles { --tile-num: var(--text-xl); --tile-height: 5.4rem; } .date-tile-date { font-size: var(--text-xs); } .date-tile { padding-inline: calc(var(--space-xs) / 2); } }
.date-tile-num { margin: 0 0.05em; font-size: var(--tile-num); line-height: 1.2; }
.date-tile-note { color: var(--color-muted); font-size: var(--text-sm); }
.date-tile--shu { border-top-color: var(--color-shu); }
.date-tile.is-today { border-color: var(--color-shu); }
.date-tile-what { color: var(--color-ink); font-size: var(--text-sm); }
/* 押せる札（その月の一覧へ移る）。リンク（呼び名と日付）を札いっぱいに広げ、札が少し浮く。焦点の輪も、札の全体に出す */
.date-tile:has(.next-tile-link) { position: relative; transition: border-color 0.5s var(--ease-out), transform 0.6s var(--ease-spring), box-shadow 0.6s var(--ease-out); }
.date-tile:has(.next-tile-link):hover { transform: translateY(-3px); box-shadow: var(--shadow-float); }
a.next-tile-link { display: block; color: inherit; text-decoration: none; }
a.next-tile-link > span { display: block; }
a.next-tile-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
a.next-tile-link:focus-visible { outline: none; }
a.next-tile-link:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* 押せる札の印: 右下の角に、小さな金の矢印（下向き。同じページの下の、その月の一覧へ移る）。
   広い画面では、指を乗せると札が浮くが、スマホでは、押せることが分からなかった（2026-10-02 の4回目の見た目の点検） */
.date-tile:has(.next-tile-link)::after { content: ""; position: absolute; right: 0.3rem; bottom: 0.4rem; width: 0.75rem; height: 0.5rem; background: var(--color-accent); -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; transform: rotate(90deg); pointer-events: none; }
/* 「次の○○の日」の札の場所を、日付が入る前から取っておく（public/scripts/next-date.js が、見る人の画面の中で日付を入れる）。
   本番では、ページが描かれたあとに script が届くことがあり、そのとき札があとから入ると、下の中身が動く
   （script を 0.9 秒遅らせて測ると、スマホで 0.12 動いた。Google の目安は 0.1 以下。2026-10-02）。
   - JavaScript が使えないときは、場所を取らない（札ごと出さない）
   - 計算が終わると、script が枠に印（data-next-done）を付ける。入れる日が無かった枠は、そこで畳む
   - 札の高さは、呼び名が1行のときの高さ（6.375rem）。script が札を作る並びは、札の数（data-next-count）から段の数を決める */
@media (scripting: enabled) {
  /* script が届かなかったとき（読み込みの失敗）は、8秒で場所を畳む（空いたままにしない）。
     !important は、ほかの決まりに「8秒の待ち」を上書きさせないため（ページの頭の「現れる動きの待ち 0.2秒」に上書きされて、0.2秒で畳まれていた。2026-10-02） */
  [data-next-box][hidden]:not([data-next-done]) { display: block; visibility: hidden; animation: reserve-give-up 0s linear 8s forwards !important; }
  [data-next-box][hidden]:not([data-next-done]) .next-tile[hidden] { display: flex; }
  .next-tile [data-next-date]:empty::before { content: "\200b"; font-family: var(--font-heading); font-size: var(--tile-num); line-height: 1.2; }
  .next-tile [data-next-note]:empty::before { content: "\200b"; }
  [data-next-box][hidden]:not([data-next-done]) [data-next-list]:empty { min-height: var(--tile-height); }
  @media (max-width: 480px) {
    [data-next-box][hidden]:not([data-next-done]) [data-next-list][data-next-count="3"]:empty { min-height: calc(var(--tile-height) * 2 + var(--space-sm)); }
  }
}
/* 狭い画面の「上へ戻る」のボタンは、月ごとの一覧のある長いページにだけ出す
   （ほかのページでは、本文の行の終わりに重なっていた。上のナビは、いつも見えている。ボタンの決まりは src/layouts/BaseLayout.astro） */
@media (max-width: 640px) { body:not(:has(.months)) .to-top { display: none; } }
/* 大きな日付の札（そのページのいちばんの答えに使う。酉の市の日付） */
.date-tiles--lg .date-tile { padding: var(--space-md) var(--space-xs) var(--space-sm); }
.date-tiles--lg .date-tile-label { font-size: var(--text-md); }
.date-tiles--lg .date-tile-date { font-size: var(--text-body); }
.date-tiles--lg .date-tile-num { font-size: var(--text-fluid-lg); }
/* 狭い画面では、大きな札も、ふつうの札と同じ大きさの字にする（2列の細い札で、日付が枠に当たっていた） */
@media (max-width: 400px) { .date-tiles--lg .date-tile-date { font-size: var(--text-md); } .date-tiles--lg .date-tile-num { font-size: var(--tile-num); } }
@media (max-width: 374px) { .date-tiles--lg .date-tile-date { font-size: var(--text-sm); } }
@media (max-width: 359px) { .date-tiles--lg .date-tile-date { font-size: var(--text-xs); } }

.support-box { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-md) var(--space-sm); border-left: 4px solid var(--color-support); border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-support-soft); }
.support-box strong { color: var(--color-support); }

/* ---------- 入力の欄 ---------- */
/* 選ぶ欄（生まれ年など）。枠で包んで、右に下向きの印を置く。角の丸みは小さな箱と同じ */
.select-wrap { position: relative; display: block; }
.select-wrap select { width: 100%; min-height: 3.25rem; padding: 0 2.6rem 0 var(--space-md); border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink); -webkit-appearance: none; appearance: none; transition: border-color 0.4s var(--ease-out); }
.select-wrap select:hover { border-color: var(--color-accent); }
.select-wrap::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.4rem; border-right: 1.5px solid var(--color-accent-text); border-bottom: 1.5px solid var(--color-accent-text); transform: rotate(45deg); pointer-events: none; }

/* 計算の欄（生まれ年などを選んで、ボタンを押す。ページの頭の中に置く） */
.tool-form { margin-top: var(--space-lg); }
/* fieldset は、中身の幅より狭くならない決まりを持つ（狭い画面で3つの欄が横にはみ出した）。その決まりを外す */
.tool-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.tool-form legend { margin-bottom: var(--space-xs); padding: 0; color: var(--color-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; }
.tool-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-sm); max-width: 30rem; }
.tool-fields label { display: block; margin-bottom: calc(var(--space-xs) / 2); color: var(--color-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; }
.tool-form .tool-submit { margin: var(--space-md) 0 0; }
.tool-form [role="alert"] { margin: var(--space-sm) 0 0; color: var(--color-support); font-weight: 600; }

/* 結果の札（夜空）: 計算の結果を出す所。濃紺の地に、紙の色の字と淡い金のしるし */
.result-night { margin: 0 0 var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-lg); background: var(--color-brand); color: var(--color-on-brand); box-shadow: var(--shadow-soft); }
.result-night[hidden] { display: none; }
.result-night h2 { margin: 0 0 var(--space-md); color: var(--color-on-brand-accent); font-size: var(--text-lg); letter-spacing: 0.16em; }
.result-night > p, .result-night > div > p { max-width: var(--prose-width); }
.result-night strong { color: var(--color-on-brand-accent); }
.result-night :is(.small, .muted) { color: var(--color-on-brand-muted); }
.result-night :focus-visible { outline-color: var(--color-on-brand-accent); }
.result-night > :last-child { margin-bottom: 0; }
/* 結果の中の大きな字（数や名前） */
.result-figure { color: var(--color-on-brand-accent); font-family: var(--font-heading); font-size: var(--text-fluid-md); font-weight: 600; letter-spacing: 0.06em; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) { .result-night { animation: rise 0.9s var(--ease-out) both; } }
@media (max-width: 860px) { .result-night { padding: var(--space-lg) var(--space-md); } }

/* 月を選ぶ帯（月ごとの一覧の上。スクロールしても上に残る）と、月ごとのまとまり（左に暦のマス、右に一覧） */
.month-links { position: sticky; top: calc(var(--header-height) + var(--space-md)); z-index: 5; margin: var(--space-md) 0 var(--space-lg); padding: var(--space-xs); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-veil); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.month-links ul { display: flex; gap: calc(var(--space-xs) / 2); margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; list-style: none; scrollbar-width: none; }
.month-links li { margin: 0; }
.month-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: background-color 0.4s var(--ease-out); }
.month-links a:hover { background: var(--color-soft); }
/* 広い画面: 年は、その年の最初の月にだけ見せて、15か月を1行に入れる（右で切れた月は、マウスでは選べない。src/components/MonthLinks.astro）。
   見せない年も、リンクの字には入っている（読み上げには「2027年3月」と出る）。狭い画面は、年を付けたまま、指で横に送る */
@media (min-width: 1041px) {
  .month-links ul { justify-content: space-between; }
  .month-links a { padding: 0 var(--space-xs); }
  .month-links li:not(.year-start) .month-links-year { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
  .month-links .year-start .month-links-year { margin-right: 0.3em; color: var(--color-accent-text); font-size: var(--text-xs); letter-spacing: 0.06em; }
}
/* 横に送る幅（1040px まで）: 右の端に、送れることが分かる印（金の矢印）を置く。印の場所は帯の中に取ってあるので、月の字に重ならない
   （3つがちょうど収まって、続きがあると分からなかった。2026-10-02 の4回目の見た目の点検）。
   端まで送ると、印は消える（スクロールに合わせた動き。対応していないブラウザと、動きを減らす設定では、出たまま） */
@media (max-width: 1040px) {
  .month-links { padding-right: 2.25rem; timeline-scope: --month-links; }
  .month-links ul { scroll-timeline: --month-links x; }
  .month-links::after { content: ""; position: absolute; right: 0.6rem; top: 50%; width: 1.1rem; height: 0.75rem; margin-top: -0.375rem; background: var(--color-accent); -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; pointer-events: none; }
  @supports (animation-timeline: scroll()) {
    .month-links::after { animation: hint-out linear both; animation-timeline: --month-links; animation-range: 88% 100%; }
  }
}
@keyframes hint-out { to { opacity: 0; } }
@keyframes reserve-give-up { to { display: none; } }
@keyframes reserve-come-back { to { height: auto; overflow: visible; visibility: visible; } }
/* マウスの人が狭い窓で見るときは、細い送る棒を出す（指で送れる画面には出さない） */
@media (hover: hover) and (pointer: fine) and (max-width: 1040px) { .month-links ul { scrollbar-width: thin; } }
.month { padding: var(--space-lg) 0; border-top: 1px solid var(--color-line); }
.month-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.month-head h3 { margin: 0; font-size: var(--text-2xl); }
.month-art { flex: none; width: 7rem; color: var(--color-accent); }
.month-art .month-motif { display: block; width: 100%; height: auto; }
.month-body { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
/* 月ごとの表は、列の幅を決めておく（中身の長さで決めると、長い字のある月だけ列が広がり、続けて送ると列が左右に揺れて見えた） */
.month-body table:not(.cal) { table-layout: fixed; width: 100%; }
.month-body table:not(.cal) thead th:nth-child(1) { width: 34%; }
.month-body table:not(.cal) thead th:nth-child(2) { width: 30%; }
@media (max-width: 860px) { .month-body { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } }

/* ---------- 表と一覧 ---------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
th { font-weight: 600; }
/* 表の見出しの行は中身より控えめに（見出しは中身を支える側） */
thead th { color: var(--color-muted); font-size: var(--text-sm); letter-spacing: 0.08em; border-bottom-color: var(--color-accent); }

main h1::after { content: ""; display: block; width: 3rem; height: 2px; margin-top: var(--space-sm); background: var(--color-accent); }
.hero h1::after { content: none; }

/* 月の小さな形（src/lib/art.ts の moonSvg。明るい地の上: 暗い側は濃紺、光る側は淡い金、縁は金） */
.moon-icon { display: inline-block; width: 1em; height: 1em; margin-right: calc(var(--space-xs) / 2); vertical-align: -0.12em; }
.moon-icon .moon-dark { fill: var(--color-heading); }
.moon-icon .moon-lit { fill: var(--color-on-brand-accent); }
.moon-icon .moon-rim { fill: none; stroke: var(--color-accent); stroke-width: 6; }
/* 朱のしるし（天赦日。手帳と同じく朱の地に紙の色の字） */
.mark-shu { display: inline-block; padding: 0 calc(var(--space-xs) / 1.25); border-radius: calc(var(--radius) / 2); background: var(--color-shu); color: var(--color-on-brand); font-weight: 600; }

dl.facts { display: grid; grid-template-columns: 9rem 1fr; margin: var(--space-lg) 0; border-top: 1px solid var(--color-accent); }
dl.facts dt, dl.facts dd { margin: 0; padding: var(--space-sm); border-bottom: 1px solid var(--color-line); }
dl.facts dt { font-weight: 600; color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 640px) {
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  dl.facts dt { padding-bottom: 0; border-bottom: 0; }
}

/* ---------- 動き ---------- */
/* どの動きにも理由を持たせる: 読み込みのときに上から順に現れる（読む順を示す）・画面に入るときに現れる（区切りを示す）・
   線画が描かれる（手で描いた線だと伝える）・押せる物が応える。動きを減らす設定の人には、動かさずに出す */
/* 線画の月と宝珠は、淡い金で塗る（線だけの絵に、面を1つ足して、絵に重さを出す。2026-10-03。濃紺の札の上でも、今日の暦の月と同じ色） */
.hero-art .art-glow { fill: var(--color-on-brand-accent); }
@keyframes rise { from { opacity: 0; transform: translateY(1.25rem); } }
/* 画面に入るときの動きは、位置だけを動かす（透かして消しておくと、画面に入る前の字を、読み上げ対応の検査が「薄くて読めない」と見る） */
@keyframes reveal { from { transform: translateY(2.5rem); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* ページの中のリンク（月を選ぶ・上へ戻る）で、なめらかに移る */
  :root { scroll-behavior: smooth; }
  /* 読み込みのとき、上から順に現れる（--i は順番） */
  .rise { animation: rise 1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms); }
  /* 線画が、1本ずつ描かれる（線には pathLength="1" を付けてある。src/lib/art-scenes.ts） */
  .draw :is(path, circle, ellipse) { stroke-dasharray: 1; animation: draw 1.8s var(--ease-out) both; animation-delay: calc(0.25s + var(--d, 0) * 45ms); }
  .draw .art-solid { animation-name: fade; stroke-dasharray: none; }
  /* 塗った面は、線が描かれるのと一緒に現れる */
  .draw .art-glow { animation-name: draw, fade; }
  /* 画面に入るときに現れる（スクロールに合わせて進む。対応していないブラウザでは、はじめから出しておく） */
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
  }
  /* ページを移るとき、やわらかく入れ替わる（対応しているブラウザだけ） */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 0.28s var(--ease-out) both fade reverse; }
  ::view-transition-new(root) { animation: 0.5s var(--ease-out) both fade; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.breadcrumbs[data-astro-cid-vx4iavld] {
  padding-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

ol[data-astro-cid-vx4iavld] {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

li[data-astro-cid-vx4iavld]:not(:last-child):after {
  content: "›";
  margin-left: var(--space-xs);
  color: var(--color-muted);
}

a[data-astro-cid-vx4iavld] {
  color: var(--color-muted);
}
.site-header[data-astro-cid-z4jru4n3] {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding-top: var(--space-sm);
  pointer-events: none;
  view-transition-name: site-header;
}

@media (width <= 640px) {
  .site-header[data-astro-cid-z4jru4n3] {
    padding-top: calc(var(--space-xs) * .75);
  }
}

.header-bar[data-astro-cid-z4jru4n3] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-height);
  padding: 0 var(--space-md) 0 var(--space-sm);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--shadow-float);
  pointer-events: auto;
}

.brand[data-astro-cid-z4jru4n3] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-heading);
  text-decoration: none;
}

.brand[data-astro-cid-z4jru4n3] .brand-mark {
  display: inline-flex;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: .6rem;
  border-radius: 50%;
  background: var(--color-brand);
  transition: transform .8s var(--ease-spring);
}

.brand[data-astro-cid-z4jru4n3]:hover .brand-mark {
  transform: rotate(-24deg);
}

.brand[data-astro-cid-z4jru4n3] .brand-moon {
  width: 100%;
  height: 100%;
}

.brand[data-astro-cid-z4jru4n3] .brand-moon .moon-dark {
  fill: var(--color-brand);
}

.brand[data-astro-cid-z4jru4n3] .brand-moon .moon-lit {
  fill: var(--color-on-brand-accent);
}

.brand[data-astro-cid-z4jru4n3] .brand-moon .moon-rim {
  fill: none;
  stroke: none;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .brand[data-astro-cid-z4jru4n3] .brand-moon .moon-lit {
      animation: linear both moon-wax;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes moon-wax {
  from {
    d: var(--moon-from);
  }

  to {
    d: var(--moon-to);
  }
}

.brand-name[data-astro-cid-z4jru4n3] {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: .14em;
}

.brand-tagline[data-astro-cid-z4jru4n3] {
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: .08em;
  white-space: nowrap;
}

.main-nav[data-astro-cid-z4jru4n3] {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0 var(--space-xs);
}

.main-nav[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3] {
  position: relative;
  padding: var(--space-xs) var(--space-xs);
  color: var(--color-ink);
  font-size: var(--text-md);
  text-decoration: none;
  white-space: nowrap;
}

.main-nav[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3]:after {
  content: "";
  position: absolute;
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: .2rem;
  height: 1.5px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0;
  transition: transform .6s var(--ease-out);
}

.main-nav[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3]:hover:after, .main-nav[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3][aria-current="page"]:after {
  transform: scaleX(1);
}

.main-nav[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3][aria-current="page"] {
  color: var(--color-heading);
  font-weight: 600;
}

.menu[data-astro-cid-z4jru4n3] {
  display: none;
}

.menu[data-astro-cid-z4jru4n3] summary[data-astro-cid-z4jru4n3] {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0 var(--space-xs) 0 var(--space-sm);
  cursor: pointer;
  list-style: none;
  color: var(--color-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}

.menu[data-astro-cid-z4jru4n3] summary[data-astro-cid-z4jru4n3]::-webkit-details-marker {
  display: none;
}

.menu-icon[data-astro-cid-z4jru4n3] {
  position: relative;
  order: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-brand);
}

.menu-icon[data-astro-cid-z4jru4n3]:before, .menu-icon[data-astro-cid-z4jru4n3]:after {
  content: "";
  position: absolute;
  left: .78rem;
  right: .78rem;
  top: 50%;
  height: 1.5px;
  margin-top: -.75px;
  background: var(--color-on-brand);
  transition: transform .6s var(--ease-spring);
}

.menu-icon[data-astro-cid-z4jru4n3]:before {
  transform: translateY(-3.5px);
}

.menu-icon[data-astro-cid-z4jru4n3]:after {
  transform: translateY(3.5px);
}

.menu[data-astro-cid-z4jru4n3][open] .menu-icon[data-astro-cid-z4jru4n3]:before {
  transform: rotate(45deg);
}

.menu[data-astro-cid-z4jru4n3][open] .menu-icon[data-astro-cid-z4jru4n3]:after {
  transform: rotate(-45deg);
}

.menu-panel[data-astro-cid-z4jru4n3] {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  padding: calc(var(--header-height) + var(--space-xl)) max(var(--gutter), 6vw) var(--space-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-paper);
  animation: fade .5s var(--ease-out) both;
}

.header-bar[data-astro-cid-z4jru4n3]:has(.menu[open]) .brand[data-astro-cid-z4jru4n3] {
  position: relative;
  z-index: calc(var(--z-menu) + 1);
}

.menu-main[data-astro-cid-z4jru4n3] {
  display: grid;
}

.menu-main[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3] {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  animation: rise .8s var(--ease-out) both;
  animation-delay: calc(80ms + var(--i) * 55ms);
}

.menu-main[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3][aria-current="page"] {
  color: var(--color-accent-text);
}

.menu-sub[data-astro-cid-z4jru4n3] {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  animation: fade 1s var(--ease-out) .35s both;
}

.menu-sub[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3] {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-heading);
  font-size: var(--text-md);
  font-weight: 600;
}

.menu-sub[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3][aria-current="page"] {
  color: var(--color-accent-text);
}

.menu-moons[data-astro-cid-z4jru4n3] {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-xs);
  max-width: 20rem;
  animation: fade 1.2s var(--ease-out) .4s both;
}

.menu-moons[data-astro-cid-z4jru4n3] .menu-moon {
  width: 100%;
  max-width: 1.75rem;
}

.menu-moons[data-astro-cid-z4jru4n3] .moon-dark {
  fill: var(--color-heading);
}

.menu-moons[data-astro-cid-z4jru4n3] .moon-lit {
  fill: var(--color-on-brand-accent);
}

.menu-moons[data-astro-cid-z4jru4n3] .moon-rim {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4px;
}

.to-top[data-astro-cid-z4jru4n3] {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .to-top[data-astro-cid-z4jru4n3] {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: calc(var(--z-header) - 1);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background: var(--color-veil);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-float);
    color: var(--color-heading);
    animation: linear both to-top-in;
    animation-timeline: scroll(root);
    animation-range: 60vh 110vh;
    transition: border-color .5s var(--ease-out), transform .5s var(--ease-spring);
  }

  .to-top[data-astro-cid-z4jru4n3]:hover {
    border-color: var(--color-accent);
    transform: translateY(-3px);
  }

  .to-top[data-astro-cid-z4jru4n3] span[data-astro-cid-z4jru4n3] {
    width: 1.4rem;
    height: .9rem;
    background: currentColor;
    -webkit-mask: var(--arrow-mask) center / contain no-repeat;
    mask: var(--arrow-mask) center / contain no-repeat;
    transform: rotate(-90deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .to-top[data-astro-cid-z4jru4n3] {
      animation: linear both to-top-fade !important;
      animation-timeline: scroll(root) !important;
      animation-range: 60vh 110vh !important;
    }
  }
}

@keyframes to-top-fade {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes to-top-in {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

.ad-note[data-astro-cid-z4jru4n3] {
  margin: var(--space-sm) auto 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.ad-note[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3], .ad-note-footer[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3] {
  margin-left: var(--space-xs);
}

.site-footer[data-astro-cid-z4jru4n3] {
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.site-footer[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3] {
  color: var(--color-on-brand);
  text-decoration-color: #0000;
}

.site-footer[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3]:hover {
  text-decoration-color: var(--color-brand-line);
}

.footer-top[data-astro-cid-z4jru4n3] {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-on-brand-hairline);
}

.footer-brand[data-astro-cid-z4jru4n3] {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}

.footer-brand[data-astro-cid-z4jru4n3] .brand-name[data-astro-cid-z4jru4n3] {
  font-size: var(--text-fluid-lg);
  letter-spacing: .12em;
}

.footer-brand[data-astro-cid-z4jru4n3] span[data-astro-cid-z4jru4n3]:last-child {
  color: var(--color-on-brand-accent);
  font-size: var(--text-md);
  letter-spacing: .14em;
}

.site-footer[data-astro-cid-z4jru4n3] .footer-moon {
  flex: none;
  width: clamp(5rem, 3.5rem + 5vw, 8rem);
  view-timeline-name: --footer-moon;
}

.site-footer[data-astro-cid-z4jru4n3] .footer-moon .moon-dark {
  fill: var(--color-brand-dark);
}

.site-footer[data-astro-cid-z4jru4n3] .footer-moon .moon-lit {
  fill: var(--color-on-brand-accent);
}

.site-footer[data-astro-cid-z4jru4n3] .footer-moon .moon-rim {
  fill: none;
  stroke: var(--color-brand-line);
  stroke-width: 1.5px;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-footer[data-astro-cid-z4jru4n3] .footer-moon .moon-lit {
      animation: linear both moon-wax;
      animation-timeline: --footer-moon;
      animation-range: entry cover 45%;
    }
  }
}

@media (width <= 520px) {
  .footer-top[data-astro-cid-z4jru4n3] {
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-md);
  }

  .footer-brand[data-astro-cid-z4jru4n3] {
    min-width: 0;
  }

  .site-footer[data-astro-cid-z4jru4n3] .footer-moon {
    width: 3.5rem;
  }
}

@media (width <= 359px) {
  .footer-brand[data-astro-cid-z4jru4n3] .brand-name[data-astro-cid-z4jru4n3] {
    font-size: var(--text-xl);
  }
}

@media (width >= 1041px) {
  .site-footer[data-astro-cid-z4jru4n3] .footer-moon {
    margin-right: var(--space-xl);
  }
}

.footer-support[data-astro-cid-z4jru4n3] {
  margin: var(--space-lg) 0;
  font-weight: 600;
}

.footer-support[data-astro-cid-z4jru4n3] a[data-astro-cid-z4jru4n3] {
  color: var(--color-on-brand-accent);
  text-decoration-color: var(--color-on-brand-hairline);
}

.footer-groups[data-astro-cid-z4jru4n3] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-lg);
}

.footer-title[data-astro-cid-z4jru4n3] {
  margin: 0 0 var(--space-sm);
  color: var(--color-on-brand-accent);
  font-size: var(--text-sm);
  letter-spacing: .14em;
}

.footer-groups[data-astro-cid-z4jru4n3] ul[data-astro-cid-z4jru4n3] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-groups[data-astro-cid-z4jru4n3] li[data-astro-cid-z4jru4n3] {
  margin-bottom: var(--space-xs);
}

.ad-note-footer[data-astro-cid-z4jru4n3] {
  margin-top: var(--space-lg);
}

.footer-note[data-astro-cid-z4jru4n3] {
  margin: var(--space-xl) 0 0;
  color: var(--color-on-brand-muted);
  font-size: var(--text-sm);
}

.footer-copy[data-astro-cid-z4jru4n3] {
  margin: var(--space-sm) 0 0;
  color: var(--color-on-brand-muted);
}

@media (width <= 1180px) {
  .brand-tagline[data-astro-cid-z4jru4n3] {
    display: none;
  }
}

@media (width <= 1040px) {
  .main-nav[data-astro-cid-z4jru4n3] {
    display: none;
  }

  .menu[data-astro-cid-z4jru4n3] {
    display: block;
  }

  html:has(.menu[open]) {
    overflow: hidden;
  }
}