/* よろずごよみ 追加CSS v1.1
   元のCSSの後に読み込む。元CSSの外部フォント @import は削除する。
   data-theme="light" | "dark"。省略時はOS設定に追従。
   body.page--fortune / body.page--search はスマホ下部ナビを使わない。
*/

/* ---------- 1. 追加・置換トークン ---------- */
:root {
  color-scheme: light;
  --color-gold: #D4AF37;
  --color-gold-dark: #A88420;
  --color-gold-light: #F1E4C4;
  --color-navy: #0F2742;
  --color-washi: #F8F5EC;
  --surface-page: #F8F5EC;
  --surface-card: #FFFFFF;
  --surface-soft: #F1EEE5;
  --surface-gold: #F1E4C4;
  --surface-ad: #EFEEE9;
  --text-primary: #1F2937;
  --text-heading: #0F2742;
  --text-muted: #56606D;
  --text-inverse: #FFFFFF;
  --text-link: #174F80;
  --text-link-hover: #B33B2E;
  --color-ink: var(--text-primary);
  --color-muted: var(--text-muted);
  --border-color: #D8D4CA;
  --border-control: #7B8490;
  --border-gold: #C6A64A;
  --category-koyomi: #805515;
  --action-primary: #B33B2E;
  --action-primary-hover: #962F25;
  --action-primary-active: #7C271F;
  --action-soft-hover: #EAE4D6;
  --action-soft-active: #DED6C5;
  --disabled-bg: #E5E7EB;
  --disabled-text: #59616D;
  --disabled-border: #A1A8B1;
  --success-text: #17633F;
  --success-bg: #EEF8F1;
  --success-border: #23764C;
  --warning-text: #795000;
  --warning-bg: #FFF5DD;
  --warning-border: #8F651B;
  --error-text: #A61B1B;
  --error-bg: #FFF1F0;
  --error-border: #B42318;
  --info-text: #185A90;
  --info-bg: #EFF6FF;
  --info-border: #256DA8;
  --focus-color: #175CD3;
  --focus-gap-color: #FFFFFF;
  --focus-width: 3px;
  --focus-offset: 3px;
  --focus-gap: 3px;
  --z-base: 0;
  --z-raised: 10;
  --z-header: 20;
  --z-dropdown: 30;
  --z-bottom-nav: 40;
  --z-skip-link: 100;
  /* showModal()のdialogはtop layer。z-index競争には参加させない。 */
  --icon-xs: 1rem;
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --tracking-body: .02em;
  --tracking-ui: .01em;
  --tracking-heading: .04em;
  --tracking-numeric: 0;
  --motion-instant: 0ms;
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 240ms;
  --motion-loading: 800ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --tap-min: 44px;
  --control-height: 48px;
  --bottom-nav-height: 5rem;
  --bottom-reserve: 0px;
  --scroll-top-gap: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-page: #121A22;
    --surface-card: #19232D;
    --surface-soft: #222E3A;
    --surface-gold: #393323;
    --surface-ad: #202B35;
    --text-primary: #F0F3F5;
    --text-heading: #F4F1E8;
    --text-muted: #B6C0CA;
    --text-link: #A9D3FF;
    --text-link-hover: #D2E8FF;
    --border-color: #46515C;
    --border-control: #94A3B8;
    --action-soft-hover: #2E3C4B;
    --action-soft-active: #3A4A5C;
    --disabled-bg: #303A45;
    --disabled-text: #B6C0CA;
    --disabled-border: #738091;
    --success-text: #A2E0B7;
    --success-bg: #132A20;
    --success-border: #6BBF90;
    --warning-text: #F6D289;
    --warning-bg: #302711;
    --warning-border: #C9A44C;
    --error-text: #FFB4AB;
    --error-bg: #351D1B;
    --error-border: #F08B80;
    --info-text: #ACD1FF;
    --info-bg: #152A40;
    --info-border: #7CABDC;
    --focus-color: #9CCAFF;
    --focus-gap-color: #121A22;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #121A22;
  --surface-card: #19232D;
  --surface-soft: #222E3A;
  --surface-gold: #393323;
  --surface-ad: #202B35;
  --text-primary: #F0F3F5;
  --text-heading: #F4F1E8;
  --text-muted: #B6C0CA;
  --text-link: #A9D3FF;
  --text-link-hover: #D2E8FF;
  --border-color: #46515C;
  --border-control: #94A3B8;
  --action-soft-hover: #2E3C4B;
  --action-soft-active: #3A4A5C;
  --disabled-bg: #303A45;
  --disabled-text: #B6C0CA;
  --disabled-border: #738091;
  --success-text: #A2E0B7;
  --success-bg: #132A20;
  --success-border: #6BBF90;
  --warning-text: #F6D289;
  --warning-bg: #302711;
  --warning-border: #C9A44C;
  --error-text: #FFB4AB;
  --error-bg: #351D1B;
  --error-border: #F08B80;
  --info-text: #ACD1FF;
  --info-bg: #152A40;
  --info-border: #7CABDC;
  --focus-color: #9CCAFF;
  --focus-gap-color: #121A22;
}

/* ---------- 2. 基本・既存部品の修正 ---------- */
html {
  scroll-behavior: auto;
  scroll-padding-block-start: var(--scroll-top-gap);
  scroll-padding-block-end: calc(var(--bottom-reserve) + 1rem);
}
body { letter-spacing: var(--tracking-body); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.container { width: min(calc(100% - 32px), var(--container)); }
.content-container { width: min(calc(100% - 32px), var(--content)); }
a { color: var(--text-link); }
.site-logo,
.section-heading h2,
.fortune-card-title,
.article-card-title,
.zodiac-kanji,
.toc-title,
.result-summary-main,
.article-content :is(h1, h2, h3, h4),
.page-title,
.section-title,
.subsection-title { color: var(--text-heading); }
.article-content a { color: var(--text-link); }
.section-heading-kicker { color: var(--text-muted); }
.form-note { font-size: .875rem; color: var(--text-muted); }
.page-title, .section-title, .subsection-title {
  font-family: var(--font-serif);
  line-height: 1.5;
  letter-spacing: var(--tracking-heading);
  overflow-wrap: anywhere;
}
.page-title { font-size: clamp(1.75rem, 4vw, 2.75rem); margin-block: 0 1rem; }
.section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-block: 2.5rem 1rem;
  padding-block-end: .75rem;
  border-block-end: 1px solid var(--border-gold);
}
.subsection-title {
  font-size: 1.25rem;
  margin-block: 2rem 1rem;
  padding-inline-start: .75rem;
  border-inline-start: 3px solid var(--color-gold);
}
.hero-content {
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--surface-page);
  border-radius: var(--radius-lg);
}
.hero-title, .hero-eyebrow { color: var(--text-heading); text-shadow: none; }
.hero-description { color: var(--text-primary); }
.birth-form { background: var(--surface-card); color: var(--text-primary); }
.today-strip { background: var(--color-navy); color: #FFFFFF; }
.today-strip a { color: #FFFFFF; text-underline-offset: .25em; }
.today-strip strong, .today-strip time { color: #F1E4C4; }
.breadcrumb a, .toc a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-block: .5rem;
}
.breadcrumb li { display: inline-flex; align-items: center; }
.toc a { display: flex; }
.toc-title { margin-block-start: 0; }
.site-footer { color: #E7EDF4; }
.site-footer a { color: #E7EDF4; }
.site-footer li a, .desktop-nav a {
  display: inline-flex; align-items: center;
  min-block-size: var(--tap-min); padding-block: .5rem;
}
.footer-bottom { color: #C6D0DC; }

/* PCではヘッダーだけ。サイドバー・広告・CTAは固定しない。 */
.site-header { position: static; height: auto; min-height: 56px; z-index: var(--z-header); }
.header-inner { min-height: 56px; height: auto; justify-content: space-between; }
.desktop-nav, .header-actions .btn-primary { display: none; }
.mobile-menu-button { display: grid; place-items: center; color: var(--text-heading); }
.article-sidebar { position: static; top: auto; }
.fixed-cta, .sticky-cta, .fixed-ad { display: none !important; }
.mobile-menu-panel {
  position: static;
  padding: 1rem;
  background: var(--surface-card);
  border-block-start: 1px solid var(--border-color);
}
.mobile-menu-panel a {
  display: flex;
  align-items: center;
  min-block-size: var(--control-height);
  padding: .5rem;
}
@media (min-width: 1024px) {
  :root { --scroll-top-gap: 6rem; }
  .site-header { position: sticky; top: 0; min-height: 72px; }
  .header-inner { min-height: 72px; }
}
@media (min-width: 1280px) {
  .desktop-nav { display: flex; }
  .header-actions .btn-primary { display: inline-grid; }
  .mobile-menu-button { display: none; }
  .mobile-menu-panel { display: none; }
}
@media (max-width: 767px) {
  :root { --bottom-reserve: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
  body { padding-block-end: var(--bottom-reserve); }
  body:is(.page--fortune, .page--search) { padding-block-end: 0; }
  html:has(body:is(.page--fortune, .page--search)) { --bottom-reserve: 0px; }
  .mobile-bottom-nav {
    z-index: var(--z-bottom-nav);
    min-block-size: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding: .25rem .5rem calc(.25rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: none;
    backdrop-filter: none;
  }
  .mobile-bottom-nav a {
    min-block-size: var(--control-height);
    gap: .25rem;
    padding: .375rem .125rem;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--text-muted);
    border-block-start: 2px solid transparent;
  }
  .mobile-bottom-nav a[aria-current="page"] {
    color: var(--text-heading);
    font-weight: 700;
    border-block-start-color: currentColor;
    text-decoration: underline;
    text-underline-offset: .2em;
  }
  .mobile-bottom-nav .nav-main { color: var(--text-heading); }
  .mobile-bottom-nav .nav-main .nav-icon {
    inline-size: 32px;
    block-size: 32px;
    margin: 0;
    border: 0;
    border-radius: .5rem;
    background: var(--action-primary);
    color: #FFFFFF;
    box-shadow: none;
  }
  body:is(.page--fortune, .page--search) .mobile-bottom-nav { display: none; }
}

/* ---------- 3. 操作アイコン・ボタン ---------- */
.icon {
  inline-size: var(--icon-md);
  block-size: var(--icon-md);
  flex: none;
  display: inline-block;
  vertical-align: middle;
}
.icon--sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.icon--lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
.btn {
  --btn-bg: var(--action-primary);
  --btn-fg: #FFFFFF;
  --btn-border: var(--action-primary);
  --btn-hover-bg: var(--action-primary-hover);
  --btn-active-bg: var(--action-primary-active);
  display: inline-grid;
  place-items: center;
  min-block-size: var(--control-height);
  min-inline-size: var(--control-height);
  max-inline-size: 100%;
  padding: .625rem 1.25rem;
  border-radius: var(--radius-md);
  font: 700 1rem/1.5 var(--font-sans);
  letter-spacing: var(--tracking-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.btn, .btn:hover, .btn:active {
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  box-shadow: none;
  transform: none;
}
.btn-secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text-heading);
  --btn-border: var(--border-control);
  --btn-hover-bg: var(--action-soft-hover);
  --btn-active-bg: var(--action-soft-active);
}
.btn-text {
  --btn-bg: transparent;
  --btn-fg: var(--text-link);
  --btn-border: transparent;
  --btn-hover-bg: var(--action-soft-hover);
  --btn-active-bg: var(--action-soft-active);
  padding-inline: .75rem;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.btn--block { inline-size: 100%; }
.btn__label, .btn__busy {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
/* 両方を同じグリッドに置いて最も長いラベルの幅を最初から予約。 */
.btn__busy { visibility: hidden; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn__label { opacity: 0; }
.btn[aria-busy="true"] .btn__busy { visibility: visible; }
.icon-button {
  display: inline-grid;
  place-items: center;
  inline-size: var(--control-height);
  min-inline-size: var(--control-height);
  block-size: var(--control-height);
  padding: 0;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-heading);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    background: var(--btn-hover-bg);
  }
  .icon-button:not(:disabled):not([aria-disabled="true"]):hover {
    background: var(--action-soft-hover);
  }
}
.btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  background: var(--btn-active-bg);
}
.icon-button:not(:disabled):not([aria-disabled="true"]):active {
  background: var(--action-soft-active);
}
:is(.btn, .icon-button):is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
  cursor: not-allowed;
  opacity: 1;
}

/* ---------- 4. 入力・検索 ---------- */
.field { min-inline-size: 0; }
.fieldset { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.field__label, .fieldset legend {
  display: block;
  margin-block-end: .5rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-primary);
}
.input, .select, .textarea, .birth-form select {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--control-height);
  padding: .625rem .75rem;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font: 400 1rem/1.5 var(--font-sans);
  letter-spacing: var(--tracking-ui);
}
.select, .birth-form select { appearance: auto; }
.textarea { min-block-size: 8rem; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 1; }
:is(.input, .select, .textarea, .birth-form select)[aria-invalid="true"] {
  border-color: var(--error-border);
  background: var(--error-bg);
}
:is(.input, .select, .textarea):disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}
.field__hint, .field__error {
  margin: .375rem 0 0;
  font-size: .875rem;
  line-height: 1.6;
}
.field__hint { color: var(--text-muted); }
.field__error { min-block-size: 1.6em; color: var(--error-text); }
.field__error .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.birth-form-fields { grid-template-columns: 1.35fr 1fr 1fr; gap: .5rem; }
.birth-form__time { margin-block-start: 1rem; }
.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .5rem;
}
.search-form__field { min-inline-size: 0; }
.search-control { position: relative; }
.search-control > .icon { position: absolute; inset-inline-start: .75rem; inset-block-start: .75rem; }
.search-control .input { padding-inline: 2.75rem 3.25rem; }
.search-clear {
  position: absolute;
  inset-inline-end: 2px;
  inset-block-start: 2px;
  inline-size: var(--tap-min);
  min-inline-size: var(--tap-min);
  block-size: var(--tap-min);
  min-block-size: var(--tap-min);
  border-color: transparent;
}

/* ---------- 5. タブ・アコーディオン ---------- */
.tabs__list {
  display: flex;
  gap: .5rem;
  min-inline-size: 0;
  padding: .5rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-block-end: 1px solid var(--border-color);
}
.tab, .category-tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-block-size: var(--control-height);
  padding: .625rem 1rem;
  border: 1px solid transparent;
  border-block-end-width: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--text-primary);
  font: 700 1rem/1.5 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.tab[aria-selected="true"], .category-tab[aria-current="page"] {
  border-block-end-color: var(--text-heading);
  background: var(--surface-gold);
  color: var(--text-heading);
}
.tab:disabled, .tab[aria-disabled="true"] { color: var(--disabled-text); cursor: not-allowed; }
.tabs__panel { padding-block: 1.5rem; }
.accordion {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.accordion + .accordion { margin-block-start: .75rem; }
.accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: var(--control-height);
  padding: .875rem 1rem;
  list-style: none;
  font-weight: 700;
  cursor: pointer;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion__chevron { transition: transform var(--motion-fast) var(--ease-standard); }
.accordion[open] .accordion__chevron { transform: rotate(180deg); }
.accordion__body { padding: 0 1rem 1rem; }

/* ---------- 6. 状態色・補足・引用 ---------- */
[data-tone="success"] { --tone-text: var(--success-text); --tone-bg: var(--success-bg); --tone-border: var(--success-border); }
[data-tone="warning"] { --tone-text: var(--warning-text); --tone-bg: var(--warning-bg); --tone-border: var(--warning-border); }
[data-tone="error"] { --tone-text: var(--error-text); --tone-bg: var(--error-bg); --tone-border: var(--error-border); }
[data-tone="info"] { --tone-text: var(--info-text); --tone-bg: var(--info-bg); --tone-border: var(--info-border); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .5rem;
  border: 1px solid var(--tone-border, var(--border-control));
  border-radius: var(--radius-round);
  background: var(--tone-bg, var(--surface-soft));
  color: var(--tone-text, var(--text-primary));
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.6;
}
.badge .icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); }
.callout {
  display: grid;
  grid-template-columns: var(--icon-md) minmax(0, 1fr);
  gap: .75rem;
  margin-block: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--tone-border, var(--border-control));
  border-inline-start-width: 4px;
  border-radius: var(--radius-md);
  background: var(--tone-bg, var(--surface-soft));
  color: var(--tone-text, var(--text-primary));
}
.callout__title { margin: 0 0 .375rem; font: 700 1rem/1.5 var(--font-sans); color: inherit; }
.callout p:last-child { margin-block-end: 0; }
.quote, .article-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-inline-start: 3px solid var(--color-gold);
  background: var(--surface-soft);
  color: var(--text-primary);
}
.quote__source, .annotation, .footnotes {
  font-size: .875rem;
  line-height: 1.8;
  color: var(--text-muted);
}
.footnotes { border-block-start: 1px solid var(--border-color); padding-block-start: 1rem; }
.footnote-back { display: inline-flex; align-items: center; min-block-size: var(--tap-min); padding-inline: .5rem; }

/* ---------- 7. 読込・空・エラー・完了 ---------- */
.spinner {
  display: inline-block;
  flex: none;
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: etg-spin var(--motion-loading) linear infinite;
}
@keyframes etg-spin { to { transform: rotate(360deg); } }
.loading-state { display: flex; align-items: center; gap: .75rem; min-block-size: 4rem; }
.skeleton { min-block-size: 1rem; border-radius: .25rem; background: var(--surface-soft); }
.state-panel {
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid var(--tone-border, var(--border-color));
  border-radius: var(--radius-lg);
  background: var(--tone-bg, var(--surface-card));
  color: var(--tone-text, var(--text-primary));
}
.state-panel__title { margin: 0 0 .5rem; font: 700 1.25rem/1.5 var(--font-sans); color: inherit; }
.state-panel__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1rem; }
.notice-region { min-block-size: 4rem; margin-block: 1rem; }
.toast {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--tone-border, var(--success-border));
  border-radius: var(--radius-md);
  background: var(--tone-bg, var(--success-bg));
  color: var(--tone-text, var(--success-text));
}
.toast__message { flex: 1; min-inline-size: 0; margin: 0; }

/* ---------- 8. 確認ダイアログ・ページトップ ---------- */
.confirm-dialog {
  inline-size: min(calc(100% - 32px), 30rem);
  max-block-size: calc(100dvh - 32px);
  margin: auto;
  padding: 1.5rem;
  overflow: auto;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}
.confirm-dialog::backdrop { background: rgb(8 18 30 / 68%); }
.dialog__title { margin: 0 0 1rem; font: 700 1.25rem/1.5 var(--font-sans); color: var(--text-heading); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-block-start: 1.5rem; }
.page-top { display: flex; justify-content: flex-end; margin-block: 2rem; }
.back-to-top { position: static; }

/* ---------- 9. カード ---------- */
.fortune-card, .article-card {
  border: 1px solid var(--border-color);
  box-shadow: none;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.article-card { overflow: visible; }
.article-card-image { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.fortune-card:hover, .article-card:hover,
.zodiac-link:hover .zodiac-image { transform: none; box-shadow: none; }
.article-card:hover img, .zodiac-link:hover .zodiac-image img { transform: none; }
.zodiac-link:hover .zodiac-image { border-color: transparent; }
.card-link { display: block; color: inherit; text-decoration: none; border-radius: inherit; }
.zodiac-card {
  display: block;
  min-inline-size: 0;
  padding: .5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
}
.zodiac-card__image {
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 50%;
}
.zodiac-card__name { display: block; margin-block-start: .5rem; font: 700 1.25rem/1.5 var(--font-serif); }
.zodiac-card__reading { display: block; color: var(--text-muted); font-size: .875rem; }
.zodiac-card__current { display: none; font-size: .75rem; font-weight: 700; }
.zodiac-card[aria-current="page"] { border-color: var(--border-control); background: var(--surface-gold); }
.zodiac-card[aria-current="page"] .zodiac-card__current { display: block; }
.calendar-summary {
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.calendar-summary__title { margin: 0 0 .5rem; font: 700 1rem/1.5 var(--font-sans); }
.calendar-summary__date { display: block; color: var(--text-heading); font: 700 1.5rem/1.5 var(--font-serif); }
.calendar-summary__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-block: 1rem; }
.calendar-summary__facts dt { font-size: .875rem; color: var(--text-muted); }
.calendar-summary__facts dd { margin: 0; font-weight: 700; }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.related-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  text-decoration: none;
}
.related-card__image { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.related-card__title { margin: 0; font: 700 1rem/1.6 var(--font-sans); color: var(--text-heading); }
.related-card__meta { display: block; margin-block-start: .5rem; font-size: .75rem; color: var(--text-muted); }
.search-results { display: grid; gap: 1rem; padding: 0; list-style: none; }
.search-result {
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.search-result__title { margin: .5rem 0; font: 700 1.25rem/1.5 var(--font-sans); }
.search-result__excerpt { margin: 0; line-height: 1.8; }
.search-result__meta { margin-block-start: .75rem; font-size: .875rem; color: var(--text-muted); }
.search-result mark { background: var(--surface-gold); color: var(--text-primary); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  :is(.fortune-card, .article-card, .related-card, .zodiac-card):hover { border-color: var(--border-control); }
  .related-card:hover .related-card__title { text-decoration: underline; text-underline-offset: .2em; }
}
@media (min-width: 768px) {
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 10. 表・広告・ページ送り ---------- */
.meishiki-table { table-layout: fixed; min-width: 0; font-size: .875rem; }
.meishiki-table th, .meishiki-table td { padding: .75rem .375rem; overflow-wrap: anywhere; }
.meishiki-table thead th,
.meishiki-table thead th:nth-child(2),
.data-table th { background: var(--surface-gold); color: var(--text-heading); }
.meishiki-table .is-day-pillar { background: var(--surface-gold); font-weight: 700; }
.meishiki-table caption, .data-table caption { padding: .75rem; text-align: left; font-weight: 700; }
.table-wrap { background: var(--surface-card); }
/* 一般の複雑な表だけ、必要に応じ .data-table--wide を使う。 */
.data-table--wide { min-inline-size: 36rem; }
.ad-slot {
  --ad-height: 250px;
  display: grid;
  grid-template-rows: 18px var(--ad-height);
  gap: 8px;
  padding: 12px 0;
  min-height: 0;
  margin-block: 2rem;
  border: 0;
  background: var(--surface-ad);
}
.ad-label { margin: 0; font-size: .75rem; line-height: 18px; color: var(--text-muted); }
.ad-slot__creative {
  display: grid;
  place-items: start center;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: var(--ad-height);
}
.ad-slot--banner { --ad-height: 100px; }
.ad-slot--rectangle, .ad-slot--large { --ad-height: 250px; }
.ad-placeholder { display: grid; place-items: center; inline-size: 100%; block-size: 100%; color: var(--text-muted); }
@media (min-width: 1024px) { .ad-slot--banner { --ad-height: 90px; } }
.pagination button {
  display: grid; place-items: center;
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--surface-card); font: inherit; cursor: pointer;
}
.pagination a, .pagination button, .pagination span, .zodiac-nav a {
  min-inline-size: var(--control-height);
  min-block-size: var(--control-height);
  height: auto;
  padding: .5rem;
  color: var(--text-link);
}
.pagination :is(.is-current, [aria-current="page"]),
.zodiac-nav a[aria-current="page"],
.zodiac-nav a:hover {
  background: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}
.pagination [aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; font-weight: 700; }

/* ---------- 11. フォーカス・動きを減らす設定 ---------- */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-gap) var(--focus-gap-color) !important;
}
.skip-link { z-index: var(--z-skip-link); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; box-shadow: none !important; }
  .btn, .icon-button, .badge, .input, .select, .tab { border-color: ButtonText; }
  .tab[aria-selected="true"] { border-block-end-color: Highlight; }
  .spinner { border-color: CanvasText; border-inline-end-color: transparent; }
}