/* seiza.css — 星座占い別館「夜明けの川」テーマ（SD-008）
   スコープ: .seiza-theme（body 直下）配下のみ。ルート style.css は汚染しない。
   継承: --radius / --maxw はルート値を踏襲。フォントはルート読込済みの
   Zen Maru Gothic（本文）/ Shippori Mincho（見出し）を使う（新規追加なし）。
   コントラストは WCAG AA を満たす（本文・リンク・muted・バッジで検証済み。S1 A11y 100 ゲート）。
*/

.seiza-theme {
  --seiza-bg: #FBF7EF;      /* 明るい生成り */
  --seiza-ink: #232946;     /* 藍（本文） */
  --seiza-accent: #D9A441;  /* 暁金（装飾・バッジ地。文字は暗インクを乗せる） */
  --seiza-gold-pale: #F6C990; /* 薄い金＝装飾のみ。文字には使わない */
  --seiza-water: #3A6B7E;   /* 鈍い青緑（リンク・強調。AA） */
  --seiza-muted: #545a70;   /* 補助テキスト（bg 上で AA） */
  --seiza-line: rgba(35, 41, 70, .14);
  --seiza-panel: #ffffff;

  background: var(--seiza-bg);
  color: var(--seiza-ink);
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

.seiza-theme h1,
.seiza-theme h2,
.seiza-theme h3,
.seiza-theme .h2 {
  font-family: "Shippori Mincho", serif;
  color: var(--seiza-ink);
  line-height: 1.4;
}

.seiza-theme a { color: var(--seiza-water); }
.seiza-theme .muted { color: var(--seiza-muted); }
.seiza-theme .small { font-size: .82rem; }
.seiza-theme :focus-visible { outline: 2px solid var(--seiza-water); outline-offset: 2px; }

/* header / footer / skip-link — 明るい生成りに合わせて再配色 */
.seiza-theme .site-header {
  background: rgba(251, 247, 239, .92);
  border-bottom: 1px solid var(--seiza-line);
}
.seiza-theme .logo { color: var(--seiza-ink); }
.seiza-theme .logo small { color: var(--seiza-water); }
.seiza-theme .nav a { color: var(--seiza-muted); }
.seiza-theme .nav a:hover { color: var(--seiza-water); }
.seiza-theme .site-footer {
  background: var(--seiza-bg);
  border-top: 1px solid var(--seiza-line);
  color: var(--seiza-muted);
}
.seiza-theme .site-footer a { color: var(--seiza-muted); }
.seiza-theme .site-footer a:hover { color: var(--seiza-water); }
.seiza-theme .skip-link { background: var(--seiza-ink); color: #fff; }

/* ボタン — テーマ配色（白文字は water 上で AA） */
.seiza-theme .btn {
  background: var(--seiza-water);
  color: #fff;
  box-shadow: 0 6px 16px rgba(58, 107, 126, .22);
}
.seiza-theme .btn:hover { transform: translateY(-1px); }
.seiza-theme .btn--ghost {
  background: #fff;
  color: var(--seiza-water);
  border: 1.5px solid var(--seiza-line);
  box-shadow: none;
}

/* ---------- hero（藍→暁金のグラデ帯は上部のみ） ---------- */
.seiza-theme .seiza-hero {
  position: relative;
  background: var(--seiza-panel);
  border: 1px solid var(--seiza-line);
  border-radius: var(--radius);
  padding: 26px 20px 20px;
  margin: 16px 0;
  text-align: center;
  overflow: hidden;
}
.seiza-theme .seiza-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--seiza-ink), var(--seiza-accent));
}
.seiza-theme .seiza-hero h1 { margin: 4px 0 6px; font-size: 1.5rem; }
.seiza-theme .seiza-hero__tagline { color: var(--seiza-water); font-weight: 500; margin: 0 0 10px; }
.seiza-theme .seiza-hero__date { font-weight: 700; margin: 0 0 8px; }
.seiza-theme .seiza-hero__note { max-width: 30em; margin: 0 auto; font-size: .85rem; }

/* ---------- ランキング ---------- */
.seiza-theme .seiza-ranking { list-style: none; margin: 0; padding: 0; }
.seiza-theme .seiza-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--seiza-panel);
  border: 1px solid var(--seiza-line);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 8px 0;
}
.seiza-theme .seiza-rank__num {
  flex: 0 0 auto;
  min-width: 1.9em;
  height: 1.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--seiza-accent);
  color: var(--seiza-ink);   /* 暗インク on 暁金＝AA */
  font-weight: 700;
  border-radius: 50%;
}
.seiza-theme .seiza-rank__link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  color: var(--seiza-ink);
  font-weight: 500;
}
.seiza-theme .seiza-rank__link:hover .seiza-rank__name { text-decoration: underline; }
.seiza-theme .seiza-rank__sym { color: var(--seiza-water); }
.seiza-theme .seiza-rank__score { color: var(--seiza-muted); font-size: .85rem; }
.seiza-theme .seiza-rank__hito {
  flex: 1 1 100%;
  color: var(--seiza-muted);
  font-size: .85rem;
}

/* ---------- セクション共通 ---------- */
.seiza-theme .seiza-bd,
.seiza-theme .seiza-allsigns,
.seiza-theme .seiza-how,
.seiza-theme .seiza-daily,
.seiza-theme .seiza-weekly,
.seiza-theme .seiza-share,
.seiza-theme .seiza-corr {
  background: var(--seiza-panel);
  border: 1px solid var(--seiza-line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px 0;
}
.seiza-theme h2 { font-size: 1.2rem; margin: 0 0 12px; }

/* ---------- 誕生日フォーム ---------- */
.seiza-theme .seiza-bd__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}
.seiza-theme .seiza-bd__field { display: flex; flex-direction: column; gap: 4px; }
.seiza-theme .seiza-bd__field label { font-size: .82rem; color: var(--seiza-muted); }
.seiza-theme .seiza-bd__form select {
  min-height: 44px;
  padding: 6px 10px;
  border: 1.5px solid var(--seiza-line);
  border-radius: 12px;
  background: #fff;
  color: var(--seiza-ink);
  font-family: inherit;
  font-size: 1rem;
}
.seiza-theme .seiza-bd__cusp { margin: 12px 0 0; }
.seiza-theme .seiza-bd__result { margin: 12px 0 0; }
.seiza-theme .seiza-bd__result a { font-weight: 700; }

/* ---------- 12星座グリッド ---------- */
.seiza-theme .seiza-signgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.seiza-theme .seiza-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--seiza-ink);
  background: var(--seiza-bg);
  border: 1px solid var(--seiza-line);
  border-radius: 12px;
  padding: 10px 6px;
  min-height: 44px;
}
.seiza-theme .seiza-cell:hover { border-color: var(--seiza-water); }
.seiza-theme .seiza-cell__sym { font-size: 1.4rem; color: var(--seiza-water); }
.seiza-theme .seiza-cell__name { font-weight: 500; }
.seiza-theme .seiza-cell__range { font-size: .74rem; color: var(--seiza-muted); }

/* ---------- しくみ ---------- */
.seiza-theme .seiza-how__steps { padding-left: 1.3em; }
.seiza-theme .seiza-how__steps li { margin: 6px 0; }
.seiza-theme .seiza-free { color: var(--seiza-muted); font-size: .85rem; }

/* ---------- 星座ページ ---------- */
.seiza-theme .seiza-breadcrumb { font-size: .85rem; margin: 14px 0 4px; color: var(--seiza-muted); }
.seiza-theme .seiza-sign-head { text-align: center; padding: 8px 0 4px; }
.seiza-theme .seiza-sign-head__sym { font-size: 2.4rem; color: var(--seiza-water); margin: 0; line-height: 1.1; }
.seiza-theme .seiza-sign-head h1 { font-size: 1.5rem; margin: 4px 0; }
.seiza-theme .seiza-sign-head__range { font-weight: 500; margin: 0 0 4px; }
.seiza-theme .seiza-sign-head__attrs,
.seiza-theme .seiza-sign-head__cusp { margin: 4px auto; max-width: 32em; }

.seiza-theme .seiza-daily__date { color: var(--seiza-muted); font-size: .9rem; margin: 0 0 6px; }
.seiza-theme .seiza-rank-badge {
  display: inline-block;
  background: var(--seiza-accent);
  color: var(--seiza-ink);
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 14px;
  margin: 0 0 8px;
}
.seiza-theme .seiza-rank-badge:empty { display: none; }
.seiza-theme .seiza-daily__keyword { font-weight: 500; margin: 0 0 6px; }
.seiza-theme .seiza-daily__hitokoto {
  font-family: "Shippori Mincho", serif;
  font-size: 1.1rem;
  color: var(--seiza-ink);
  margin: 0 0 14px;
}
.seiza-theme .seiza-fortune h3,
.seiza-theme .seiza-caution h3,
.seiza-theme .seiza-lucky h3 {
  font-size: .95rem;
  color: var(--seiza-water);
  margin: 14px 0 4px;
  border-left: 3px solid var(--seiza-accent);
  padding-left: 8px;
}
.seiza-theme .seiza-fortune p { margin: 0 0 4px; }
.seiza-theme .seiza-caution { margin-top: 8px; }
.seiza-theme .seiza-caution p { margin: 2px 0; }

.seiza-theme .seiza-lucky__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.seiza-theme .seiza-lucky__tile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--seiza-bg);
  border: 1px solid var(--seiza-line);
  border-radius: 12px;
  padding: 10px;
}
.seiza-theme .seiza-lucky__label { font-size: .78rem; color: var(--seiza-muted); flex: 1 1 100%; }
.seiza-theme .seiza-lucky__val { font-weight: 500; }
.seiza-theme .seiza-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--seiza-line);
  flex: 0 0 auto;
}

/* ---------- 照応 ---------- */
.seiza-theme .seiza-corr__lead { margin: 0 0 12px; }
.seiza-theme .seiza-corr__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.seiza-theme .seiza-corr__card {
  background: var(--seiza-bg);
  border: 1px solid var(--seiza-line);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.seiza-theme .seiza-corr__cardname { font-family: "Shippori Mincho", serif; font-weight: 700; margin: 0 0 4px; }
.seiza-theme .seiza-corr__persona { font-size: .82rem; margin: 0; }
.seiza-theme .seiza-corr__cta { margin: 6px 0; }
.seiza-theme .seiza-backnav { margin: 16px 0; text-align: center; }

.seiza-theme .seiza-noscript { color: var(--seiza-muted); }

/* ---------- アニメは最小限。reduced-motion で無効化 ---------- */
@media (prefers-reduced-motion: reduce) {
  .seiza-theme .btn,
  .seiza-theme .btn:hover { transition: none; transform: none; }
}

/* ---------- CLS対策（Task 7 実測: 星座ページ CLS 0.212 の是正） ----------
 * JS が当日文面を流し込むまで #seiza-daily は空で、充填時にレイアウトが動く。
 * 二段構え（いずれも JS 有効時のみ。no-JS 閲覧者には効かせない）:
 * 1) コンテナ下限予約 … 実測の充填後高さ = 1020〜1104px（375px幅・文字数キャップで分散84px）
 *    → コンテナより下（照応セクション等）が動かない
 * 2) 充填完了（.is-ready）までコンテナ内を h2 以外不可視
 *    → コンテナ内の h3/気をつけどころ/ラッキー枠の「可視要素の移動」も発生しない */
@media (scripting: enabled) and (max-width: 480px) {
  .seiza-theme .seiza-daily { min-height: 1000px; }
}
@media (scripting: enabled) {
  .seiza-theme .seiza-daily:not(.is-ready) > *:not(h2) { visibility: hidden; }
}

/* ================= S2（SD-012/014/015） ================= */

/* hidden 属性は必ず効かせる（.btn 等の author display:inline-block に負けないよう明示）。
   おかえりカード・シェアの canvas / native・download ボタン・登録バッジの初期 hidden はこれに依存する。 */
.seiza-theme [hidden] { display: none !important; }

/* ---------- おかえりカード（index 上部・登録済みのときだけ JS が hidden を外す） ---------- */
.seiza-theme .seiza-okaeri {
  background: var(--seiza-panel);
  border: 1px solid var(--seiza-line);
  border-left: 4px solid var(--seiza-accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 14px 0;
}
.seiza-theme .seiza-okaeri__heading { font-size: 1.05rem; margin: 0 0 6px; }
.seiza-theme .seiza-okaeri__today { font-weight: 700; margin: 0 0 2px; }
.seiza-theme .seiza-okaeri__hito {
  font-family: "Shippori Mincho", serif;
  color: var(--seiza-ink);
  margin: 0 0 6px;
}
.seiza-theme .seiza-okaeri__total { color: var(--seiza-muted); font-size: .85rem; margin: 0 0 10px; }
.seiza-theme .seiza-okaeri__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.seiza-theme .seiza-okaeri__unsave {
  background: none;
  border: none;
  padding: 0;
  color: var(--seiza-muted);
  font-family: inherit;
  font-size: .82rem;
  text-decoration: underline;
  cursor: pointer;
}
.seiza-theme .seiza-okaeri__unsave:hover { color: var(--seiza-water); }

/* ---------- 星座登録（ボタン＋バッジ＋端末内保存の注記） ---------- */
.seiza-theme .seiza-save { margin: 6px 0 2px; }
.seiza-theme .seiza-save__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.seiza-theme .seiza-save__badge {
  display: inline-block;
  background: var(--seiza-accent);
  color: var(--seiza-ink); /* 暗インク on 暁金＝AA */
  font-weight: 700;
  font-size: .82rem;
  border-radius: 999px;
  padding: 3px 12px;
}
.seiza-theme .seiza-save__note { color: var(--seiza-muted); font-size: .82rem; margin: 6px 0 0; min-height: 1.2em; }
.seiza-theme .seiza-save__hint { color: var(--seiza-muted); font-size: .8rem; margin: 6px 0 0; }

/* ---------- 週間運勢 ---------- */
.seiza-theme .seiza-weekly__range { font-weight: 700; margin: 0 0 4px; }
.seiza-theme .seiza-weekly__lead {
  font-family: "Shippori Mincho", serif;
  font-size: 1.05rem;
  margin: 0 0 10px;
}
.seiza-theme .seiza-weekly__flow { margin: 0 0 8px; }
.seiza-theme .seiza-weekly__point {
  border-left: 3px solid var(--seiza-accent);
  padding-left: 10px;
  margin: 0 0 10px;
}
.seiza-theme .seiza-weekly__lucky {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.seiza-theme .seiza-weekly__lucky-label { font-size: .8rem; color: var(--seiza-muted); }
.seiza-theme .seiza-weekly__lucky-day { font-weight: 700; color: var(--seiza-water); }
.seiza-theme .seiza-weekly__note { color: var(--seiza-muted); font-size: .82rem; margin: 10px 0 0; }

/* ---------- シェア画像 ---------- */
.seiza-theme .seiza-share__note { color: var(--seiza-muted); font-size: .85rem; margin: 0 0 10px; }
.seiza-theme .seiza-share__canvas {
  display: block;
  width: 100%;
  max-width: 360px;   /* 1080×1080 を CSS で縮小表示 */
  height: auto;
  margin: 10px auto;
  border: 1px solid var(--seiza-line);
  border-radius: 12px;
}
.seiza-theme .seiza-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
}
.seiza-theme .seiza-share__status { color: var(--seiza-muted); font-size: .85rem; margin: 8px 0 0; min-height: 1.2em; text-align: center; }

/* ---------- CLS対策（週間セクション。.seiza-daily と同じ二段構え・JS有効時のみ） ---------- */
@media (scripting: enabled) and (max-width: 480px) {
  /* 予約高さ = 最長プール文言での実測 worst-case（320px幅で 511px）を上回る値。
     week の充填で下方の照応/シェア等が動かない（daily と同じ二段構え） */
  .seiza-theme .seiza-weekly { min-height: 520px; }
}
@media (scripting: enabled) {
  .seiza-theme .seiza-weekly:not(.is-ready) > *:not(h2) { visibility: hidden; }
}

/* ================= S2 相性（SD-013。既存カード/フォームの見た目を再利用） ================= */
.seiza-theme .seiza-aisho-picker,
.seiza-theme .seiza-aisho-legend,
.seiza-theme .seiza-aisho-list,
.seiza-theme .seiza-aisho-summary,
.seiza-theme .seiza-aisho-core,
.seiza-theme .seiza-aisho-tip,
.seiza-theme .seiza-aisho-notes,
.seiza-theme .seiza-aisho-others {
  background: var(--seiza-panel);
  border: 1px solid var(--seiza-line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px 0;
}

/* 相性トップ: 2人選択フォーム（誕生日フォームと同じ作法） */
.seiza-theme .seiza-aisho-picker__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
}
.seiza-theme .seiza-aisho-picker__field { display: flex; flex-direction: column; gap: 4px; }
.seiza-theme .seiza-aisho-picker__field label { font-size: .82rem; color: var(--seiza-muted); }
.seiza-theme .seiza-aisho-picker__form select {
  min-height: 44px;
  padding: 6px 10px;
  border: 1.5px solid var(--seiza-line);
  border-radius: 12px;
  background: #fff;
  color: var(--seiza-ink);
  font-family: inherit;
  font-size: 1rem;
}

/* 凡例（4つのかたち） */
.seiza-theme .seiza-aisho-legend__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.seiza-theme .seiza-aisho-legend__item {
  background: var(--seiza-bg);
  border: 1px solid var(--seiza-line);
  border-left: 3px solid var(--seiza-accent);
  border-radius: 12px;
  padding: 10px 12px;
}
.seiza-theme .seiza-aisho-legend__name { display: block; font-weight: 700; }
.seiza-theme .seiza-aisho-legend__outline { display: block; }

/* 144リンク一覧（12グループ×12リンク） */
.seiza-theme .seiza-aisho-list__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.seiza-theme .seiza-aisho-list__head {
  font-size: .95rem;
  margin: 0 0 6px;
  color: var(--seiza-water);
  border-left: 3px solid var(--seiza-accent);
  padding-left: 8px;
}
.seiza-theme .seiza-aisho-list__links { list-style: none; margin: 0; padding: 0; }
.seiza-theme .seiza-aisho-list__links li { margin: 2px 0; }
.seiza-theme .seiza-aisho-list__links a { font-size: .86rem; }

/* 相性ペアページ */
.seiza-theme .seiza-aisho-head { text-align: center; padding: 8px 0 4px; }
.seiza-theme .seiza-aisho-head h1 { font-size: 1.5rem; margin: 4px 0; }
.seiza-theme .seiza-aisho-head__side { font-weight: 500; color: var(--seiza-water); margin: 0; }
.seiza-theme .seiza-aisho-summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 8px;
}
.seiza-theme .seiza-aisho-summary__row:last-child { margin-bottom: 0; }
.seiza-theme .seiza-aisho-summary__label { font-size: .8rem; color: var(--seiza-muted); flex: 0 0 auto; min-width: 5em; }
.seiza-theme .seiza-aisho-level__ja {
  display: inline-block;
  background: var(--seiza-accent);
  color: var(--seiza-ink); /* 暗インク on 暁金＝AA */
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 12px;
  margin-right: 8px;
}
.seiza-theme .seiza-aisho-element { font-weight: 700; }
.seiza-theme .seiza-aisho-core__body { margin: 0; }
.seiza-theme .seiza-aisho-tip__body {
  margin: 0;
  border-left: 3px solid var(--seiza-accent);
  padding-left: 10px;
}
.seiza-theme .seiza-aisho-notes p { margin: 0 0 6px; }
.seiza-theme .seiza-aisho-notes p:last-child { margin-bottom: 0; }
.seiza-theme .seiza-aisho-nav {
  margin: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.seiza-theme .seiza-aisho-nav__signs a { margin-right: 12px; font-weight: 500; }
.seiza-theme .seiza-aisho-others__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 4px 12px;
}
.seiza-theme .seiza-aisho-others__list a { font-size: .88rem; }