:root {
  --bg: #14101f;
  --bg-card: #1e1830;
  --bg-soft: #2a2342;
  --text: #efeaf7;
  --text-dim: #a99cc7;
  --accent: #b59cf0;
  --accent-strong: #8e6cf0;
  --gold: #e8c578;
  --danger: #f08080;
  --color-night-main: #1a1830;
  --color-night-soft: #2c2746;
  --color-lavender: #c9c1e7;
  --color-ivory: #fff9e8;
  --color-gold-muted: #c7a85f;
  --color-text-muted: #c9c4d4;
  --color-window-light: #e8a45f;
  --color-success-soft: #b9d5c1;
  --color-danger-soft: #e5b8b8;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: radial-gradient(circle at 50% -10%, #2b2046 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  min-height: 100vh;
}
/* 季節背景シーン: body の background として敷く。
   既存の星装飾（.today-page / .koyomi-page の ::before/::after）と同一擬似要素を奪い合わないよう
   擬似要素ではなく body の背景を使う。星装飾はこの背景の上に描画される。
   可読性確保のため暗いオーバーレイ（linear-gradient）を画像の上に重ねる。 */
body.scene-summer,
body.scene-moon,
body.scene-constellation,
body.scene-dawn,
body.scene-meteor {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.scene-summer {
  background-image:
    linear-gradient(rgba(20, 16, 31, 0.74), rgba(20, 16, 31, 0.88)),
    url("../img/bg-summer.webp");
}
body.scene-moon {
  background-image:
    linear-gradient(rgba(20, 16, 31, 0.74), rgba(20, 16, 31, 0.88)),
    url("../img/bg-moon.webp");
}
body.scene-constellation {
  background-image:
    linear-gradient(rgba(20, 16, 31, 0.74), rgba(20, 16, 31, 0.88)),
    url("../img/bg-constellation.webp");
}
body.scene-dawn {
  background-image:
    linear-gradient(rgba(20, 16, 31, 0.74), rgba(20, 16, 31, 0.88)),
    url("../img/bg-dawn.webp");
}
body.scene-meteor {
  background-image:
    linear-gradient(rgba(20, 16, 31, 0.74), rgba(20, 16, 31, 0.88)),
    url("../img/bg-meteor.webp");
}
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 76px;
}
.brand {
  text-align: center;
  letter-spacing: 4px;
  font-size: 13px;
  color: var(--accent);
  padding: 16px 0 0;
}
.brand a {
  /* ロゴ＋文字でもテキストのみでも 44px のタップ領域を確保する */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  color: inherit;
  text-decoration: none;
}
h1 {
  font-size: 26px;
  text-align: center;
  font-weight: 600;
  margin: 12px 0 4px;
}
.subtitle {
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 32px;
}
.card {
  background: var(--bg-card);
  border: 1px solid #322a4e;
  border-radius: 20px;
  padding: 26px 24px;
  margin-bottom: 22px;
}
.card h2 {
  font-size: 16px;
  color: var(--accent);
  margin: 0 0 10px;
}
label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin: 16px 0 6px;
}
input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #3b3160;
  background: var(--bg-soft);
  color: var(--text);
  /* 16px 未満だと iOS Safari が focus 時に自動ズームするため 16px を維持 */
  font-size: 16px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--accent-strong);
  border-color: transparent;
}
button,
.btn {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent-strong), #6c4fd8);
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.btn-ghost {
  background: transparent;
  border: 1px solid #3b3160;
  color: var(--text-dim);
}
.error {
  color: var(--color-danger-soft);
  font-size: 13px;
  min-height: 20px;
  margin-top: 10px;
}
.error:not(:empty)::before {
  content: "⚠ ";
}
.note {
  font-size: 12px;
  color: var(--text-dim);
}
.center {
  text-align: center;
}
.lucky-grid {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}
.lucky-grid > div {
  flex: 1;
  min-width: 0;
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
/* 375px 幅では3セルが窮屈になるため間隔・余白・文字を微調整 */
@media (max-width: 400px) {
  .lucky-grid {
    gap: 6px;
  }
  .lucky-grid > div {
    padding: 10px 5px;
  }
  .lucky-grid .value {
    font-size: 14px;
  }
}
.lucky-grid .label {
  font-size: 11px;
  color: var(--text-dim);
}
.lucky-grid .value {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}
.section-body {
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-wrap;
}
.locked-preview {
  max-height: 3.8em;
  overflow: hidden;
  opacity: 0.78;
  mask-image: linear-gradient(to bottom, #000 45%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  text-align: left;
  font-size: 15px;
  line-height: 1.9;
}
.feature-list li {
  position: relative;
  padding-left: 1.35em;
}
.feature-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 0.8em;
}
.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.plan-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 480px) {
  .plan-grid-3 {
    grid-template-columns: 1fr;
  }
}
.plan-card {
  background: var(--bg-soft);
  border: 1px solid #3b3160;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
}
.plan-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.plan-card .price {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
}
.plan-card .name {
  font-size: 13px;
  color: var(--text-dim);
}
.footer-links {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding-top: 32px;
}
.footer-links a {
  display: inline-block;
  /* 会場では歩きながら片手で押されるので、タップ領域を44px以上にする */
  min-height: 44px;
  padding: 13px 10px;
  color: var(--text-dim);
  margin: 0 4px;
}
.spinner {
  text-align: center;
  padding: 40px 0;
  color: var(--accent);
}
.disclaimer {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 24px;
}
.disclaimer a {
  display: inline-block;
  /* 11px の文中リンクは高さ12pxしかなく押しにくい。行間を崩さず領域だけ広げる */
  min-height: 44px;
  padding: 15px 6px;
  margin: -15px 0;
  color: var(--text-dim);
}
.today-hero p {
  font-size: 18px;
  line-height: 1.8;
  margin: 8px 0 0;
}
.label {
  font-size: 11px;
  color: var(--text-dim);
}
.rank-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.rank-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid #322a4e;
  border-radius: 18px;
  padding: 18px;
}
.rank-top {
  border-color: rgba(232, 197, 120, 0.7);
}
.rank-badge {
  min-width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #241a32;
  font-weight: 700;
  font-size: 14px;
}
.rank-card h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.rank-card p {
  margin: 0;
  font-size: 14px;
  color: var(--text);
}
.daily-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}
.daily-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.color-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.lucky-grid .color-chip {
  display: block;
  margin: 0 auto 6px;
}
.rank-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rank-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #322a4e;
}
.rank-row:first-child {
  border-top: none;
  padding-top: 0;
}
.rank-row-main {
  display: grid;
  gap: 2px;
}
.rank-row-main strong {
  color: var(--text);
  font-size: 14px;
}
.rank-row-main span {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 560px) {
  .rank-row {
    display: block;
  }
}

/* 公開デイリー：「夜空の暦」 */
.today-page {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(92, 67, 139, 0.42) 0%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 50% 110%,
      rgba(232, 197, 120, 0.08) 0%,
      transparent 45%
    ),
    var(--bg);
}
.today-page::before {
  content: "";
  position: fixed;
  top: 3vh;
  left: 4vw;
  z-index: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 247, 218, 0.8);
  box-shadow:
    10vw 12vh rgba(255, 247, 218, 0.46),
    28vw 5vh rgba(181, 156, 240, 0.5),
    48vw 18vh rgba(255, 247, 218, 0.38),
    73vw 8vh rgba(232, 197, 120, 0.48),
    89vw 26vh rgba(255, 247, 218, 0.4),
    18vw 38vh rgba(181, 156, 240, 0.42),
    60vw 43vh rgba(255, 247, 218, 0.36),
    82vw 57vh rgba(232, 197, 120, 0.4),
    34vw 70vh rgba(255, 247, 218, 0.34),
    68vw 82vh rgba(181, 156, 240, 0.4),
    6vw 91vh rgba(232, 197, 120, 0.38),
    93vw 96vh rgba(255, 247, 218, 0.34);
  pointer-events: none;
  animation: today-stars 7s ease-in-out infinite alternate;
}
.today-page::after {
  content: "★";
  position: fixed;
  top: 16vh;
  left: 12vw;
  z-index: 0;
  color: var(--gold);
  font-size: 6px;
  line-height: 1;
  text-shadow:
    70vw 10vh var(--accent),
    36vw 62vh var(--gold);
  pointer-events: none;
  animation: today-star-glints 9s ease-in-out infinite alternate;
}
.today-page .container {
  position: relative;
  z-index: 1;
  padding-top: 18px;
}
.today-brand {
  padding-top: 4px;
  letter-spacing: 0;
}
.today-brand a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.today-brand img {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(5, 3, 12, 0.36);
}
.today-brand span,
.today-page h1,
.today-page .card h2,
.today-page .rank-card h3 {
  font-family: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
}
.today-brand span {
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.today-page h1 {
  margin-top: 18px;
  color: var(--gold);
  font-size: clamp(23px, 6.4vw, 30px);
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
  background: linear-gradient(100deg, #cba85a 0%, #fff0bd 48%, #d5ad59 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 見出し・ボタンは意味のかたまり単位で折り返す（320px で「12／星座」
   「無料／で始める」のように語の途中で切れるのを防ぐ） */
.today-page h1 > span,
.today-page .btn > span {
  display: inline-block;
}
.today-page p {
  text-wrap: pretty;
}
.today-page .subtitle {
  margin-top: 8px;
  margin-bottom: 30px;
  color: #c6badb;
  font-variant-numeric: tabular-nums;
}
.today-page .card,
.today-page .rank-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(181, 156, 240, 0.22);
  box-shadow: 0 14px 34px rgba(5, 3, 12, 0.28);
}
.today-page .card::before,
.today-page .rank-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  opacity: 0.78;
}
.today-page .card h2 {
  display: grid;
  grid-template-columns: 18px auto minmax(24px, 1fr);
  gap: 9px;
  align-items: center;
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  text-align: left;
  text-wrap: balance;
  background: linear-gradient(100deg, #cba85a 0%, #fff0bd 52%, #d5ad59 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.today-page .card h2::before {
  content: "";
  width: 7px;
  height: 7px;
  justify-self: center;
  background: var(--gold);
  transform: rotate(45deg);
}
.today-page .card h2::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 197, 120, 0.65), transparent);
}
.today-page .btn {
  color: #241a32;
  font-weight: 700;
  background: linear-gradient(110deg, #cda957 0%, #f4dfa6 50%, #c9a14e 100%);
  box-shadow: 0 8px 20px rgba(8, 5, 16, 0.3);
  transition:
    transform 160ms ease-out,
    opacity 160ms ease-out;
}
.today-page .btn:hover {
  transform: translateY(-1px);
}
.today-page .btn:active {
  transform: translateY(0);
}
.today-page .btn:focus-visible,
.today-page .brand a:focus-visible,
.today-page .footer-links a:focus-visible,
.today-page .disclaimer a:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 3px;
}
.today-page .rank-card {
  gap: 16px;
  background: var(--bg-card);
}
.today-page .rank-top {
  border-color: rgba(232, 197, 120, 0.48);
}
.today-page .rank-badge {
  flex: 0 0 46px;
  background: linear-gradient(145deg, #f4dfa6, #c79b45);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
.today-page .rank-card h3,
.today-page .rank-row-main strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.today-page .rank-card h3 {
  color: var(--text);
  font-weight: 700;
}
.today-page .zodiac-symbol {
  min-width: 1.15em;
  color: var(--gold);
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 1.08em;
  line-height: 1;
}
.today-page .daily-meta {
  font-variant-numeric: tabular-nums;
}
.today-page .rank-row {
  border-color: rgba(181, 156, 240, 0.18);
}
.today-page .koyomi-chip,
.today-page .koyomi-note {
  border: 1px solid rgba(181, 156, 240, 0.2);
}
.today-page .koyomi-countdown {
  border-color: rgba(181, 156, 240, 0.18);
}
.today-page .koyomi-cd-count,
.today-page .koyomi-cd-date {
  font-variant-numeric: tabular-nums;
}

@keyframes today-stars {
  from {
    opacity: 0.32;
    transform: translateY(0) scale(0.96);
  }
  to {
    opacity: 0.68;
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes today-star-glints {
  from {
    opacity: 0.2;
    transform: scale(0.85);
  }
  to {
    opacity: 0.62;
    transform: scale(1.08);
  }
}

@media (max-width: 420px) {
  .today-page .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .today-page .card {
    padding: 21px 18px;
  }
  .today-page .rank-card {
    padding: 17px 16px;
  }
  .today-brand img {
    width: 42px;
    height: 42px;
  }
  .today-brand span {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-page::before,
  .today-page::after {
    animation: none;
  }
  .today-page .btn {
    transition: none;
  }
}

/* ============================================================
   夜空の暦 — 汎用スタイル（today.html以外の全ページ共通）
   today-page専用のスタイルは変更せず、.koyomi-pageスコープに
   同じ世界観を新規クラスとして展開する
   ============================================================ */
.koyomi-page {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(92, 67, 139, 0.42) 0%,
      transparent 42%
    ),
    radial-gradient(
      ellipse at 50% 110%,
      rgba(232, 197, 120, 0.08) 0%,
      transparent 45%
    ),
    var(--bg);
}
.koyomi-page::before {
  content: "";
  position: fixed;
  top: 3vh;
  left: 4vw;
  z-index: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 247, 218, 0.8);
  box-shadow:
    10vw 12vh rgba(255, 247, 218, 0.46),
    28vw 5vh rgba(181, 156, 240, 0.5),
    48vw 18vh rgba(255, 247, 218, 0.38),
    73vw 8vh rgba(232, 197, 120, 0.48),
    89vw 26vh rgba(255, 247, 218, 0.4),
    18vw 38vh rgba(181, 156, 240, 0.42),
    60vw 43vh rgba(255, 247, 218, 0.36),
    82vw 57vh rgba(232, 197, 120, 0.4),
    34vw 70vh rgba(255, 247, 218, 0.34),
    68vw 82vh rgba(181, 156, 240, 0.4),
    6vw 91vh rgba(232, 197, 120, 0.38),
    93vw 96vh rgba(255, 247, 218, 0.34);
  pointer-events: none;
  animation: today-stars 7s ease-in-out infinite alternate;
}
.koyomi-page::after {
  content: "★";
  position: fixed;
  top: 16vh;
  left: 12vw;
  z-index: 0;
  color: var(--gold);
  font-size: 6px;
  line-height: 1;
  text-shadow:
    70vw 10vh var(--accent),
    36vw 62vh var(--gold);
  pointer-events: none;
  animation: today-star-glints 9s ease-in-out infinite alternate;
}
.koyomi-page .container {
  position: relative;
  z-index: 1;
  padding-top: 18px;
}

/* ブランドヘッダー（金の星座盤ロゴ + 明朝ブランド名） */
.brand-header {
  padding-top: 4px;
  text-align: center;
  letter-spacing: 0;
}
.brand-header a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
}
.brand-header img {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(5, 3, 12, 0.36);
}
.brand-header span {
  font-family: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* 見出し：明朝 + 金の箔押しグラデ */
.koyomi-page h1,
.koyomi-page .card h2 {
  font-family: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
}
/* 見出しは意味のかたまり単位で折り返す（320px で「あ／なた」のように
   語の途中で切れるのを防ぐ）。span を置いた見出しにのみ効く */
.koyomi-page h1 > span,
.koyomi-page h2 > span,
.koyomi-page .btn > span {
  display: inline-block;
}
.koyomi-page h1 {
  margin-top: 18px;
  color: var(--gold);
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
  background: linear-gradient(100deg, #cba85a 0%, #fff0bd 48%, #d5ad59 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.koyomi-page .subtitle {
  color: #c6badb;
}
.koyomi-page .card h2 {
  color: var(--gold);
  font-weight: 700;
  line-height: 1.55;
  background: linear-gradient(100deg, #cba85a 0%, #fff0bd 52%, #d5ad59 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* カード：上端の金ライン・影・奥行き（既存.cardの見た目を保ったまま格上げ） */
.koyomi-page .card {
  position: relative;
  overflow: hidden;
  border-color: rgba(181, 156, 240, 0.22);
  box-shadow: 0 14px 34px rgba(5, 3, 12, 0.28);
}
.koyomi-page .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: translateX(-50%);
  opacity: 0.78;
}

/* CTA・主要ボタン：金アクセント */
.koyomi-page .btn,
.koyomi-page button:not(.btn-ghost) {
  color: #241a32;
  font-weight: 700;
  background: linear-gradient(110deg, #cda957 0%, #f4dfa6 50%, #c9a14e 100%);
  box-shadow: 0 8px 20px rgba(8, 5, 16, 0.3);
  transition:
    transform 160ms ease-out,
    opacity 160ms ease-out;
}
.koyomi-page .btn:hover,
.koyomi-page button:not(.btn-ghost):hover {
  transform: translateY(-1px);
}
.koyomi-page .btn:active,
.koyomi-page button:not(.btn-ghost):active {
  transform: translateY(0);
}
.koyomi-page .btn-ghost {
  background: transparent;
  border-color: rgba(232, 197, 120, 0.4);
  color: var(--gold);
}
.koyomi-page .btn:focus-visible,
.koyomi-page button:focus-visible,
.koyomi-page .brand-header a:focus-visible,
.koyomi-page .footer-links a:focus-visible,
.koyomi-page .disclaimer a:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 3px;
}

/* 要約ハイライト：daily/readingの先頭カードを金枠で強調（Phase D） */
.koyomi-page .card.daily-summary {
  border-color: rgba(232, 197, 120, 0.48);
}

/* 目次チップ：reading.htmlのセクションアンカー（Phase D） */
.toc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 22px;
}
.toc-chips a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(232, 197, 120, 0.4);
  color: var(--gold);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  background: transparent;
  transition: background-color 160ms ease-out;
}
.toc-chips a:hover {
  background: rgba(232, 197, 120, 0.12);
}
.koyomi-page .toc-chips a:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 2px;
}
.card[id^="sec-"] {
  scroll-margin-top: 20px;
}

/* キービジュアル（横長バナー） */
.kv-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 800;
  margin-bottom: 18px;
  border: 1px solid rgba(181, 156, 240, 0.25);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(5, 3, 12, 0.35);
}

/* 案内人コヨミ（ペルソナ画像） */
.koyomi-guide {
  position: relative;
  margin: 4px 0 26px;
  text-align: center;
}
.koyomi-guide::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 250px;
  height: 250px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle,
    rgba(232, 197, 120, 0.16) 0%,
    transparent 62%
  );
  pointer-events: none;
}
.koyomi-guide img {
  position: relative;
  width: min(50vw, 200px);
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(5, 3, 12, 0.5));
}
.koyomi-guide .character-display > video,
.koyomi-guide .character-display > img {
  position: relative;
  width: min(62vw, 250px);
  height: auto;
  aspect-ratio: 480 / 854;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(5, 3, 12, 0.5);
}
.koyomi-guide figcaption {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.8;
}
/* 案内人そのものを切替ボタンにする。共通の .koyomi-page button:not(.btn-ghost)
   (詳細度 0,2,1 / :hover は 0,3,1) に負けると transform や背景を奪われるため、
   セレクタを 0,4,1 まで上げて打ち消す。 */
.koyomi-page .koyomi-guide button.character-toggle {
  display: block;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.koyomi-page .koyomi-guide button.character-toggle:hover {
  transform: none;
}
.koyomi-page .koyomi-guide button.character-toggle:active {
  transform: scale(0.98);
}
.koyomi-page .koyomi-guide button.character-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}
.koyomi-guide .character-hint {
  margin: 10px 0 0;
  color: var(--text-dim);
  font-size: 12px;
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .koyomi-page .koyomi-guide button.character-toggle {
    transition: none;
  }
  .koyomi-page .koyomi-guide button.character-toggle:active {
    transform: none;
  }
}

/* コヨミ待機ループ（reading.html: 鑑定書生成待ち） */
.koyomi-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 0;
  text-align: center;
  color: var(--accent);
}
.koyomi-waiting .character-display > video,
.koyomi-waiting .character-display > img {
  width: 160px;
  height: auto;
  aspect-ratio: 480 / 854;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(5, 3, 12, 0.4);
}

/* コヨミ案内人（コンパクト版: compatibility.html等の公開ページ用） */
/* 七夕モード（期間限定）。対象日だけ表示され、普段はDOMごと hidden。 */
.season-banner {
  margin: 0 0 20px;
  text-align: center;
}
.season-banner img,
.season-banner video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 526;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(5, 3, 12, 0.5);
}
.season-banner figcaption {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.8;
}
.season-note {
  margin: 6px 0 14px;
  color: var(--gold);
  font-size: 13px;
  line-height: 1.8;
}

/* 相性ページのペア表示。1体ぶんの幅だと2人が小さくなりすぎるため広めに取る。 */
.koyomi-guide-pair {
  margin: 0 0 22px;
}
/* .koyomi-guide img（幅200px・drop-shadow）と同着にならないよう詳細度を上げる */
.koyomi-guide.koyomi-guide-pair img {
  position: relative;
  width: min(88vw, 340px);
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(5, 3, 12, 0.5);
  filter: none;
}

.koyomi-guide-compact {
  margin: 0 0 22px;
}
.koyomi-guide-compact .character-display > video,
.koyomi-guide-compact .character-display > img {
  width: min(48vw, 180px);
}

/* コヨミ登録完了ウェルカム（daily.html: ?checkout=success時のみ） */
.koyomi-welcome .character-display > video,
.koyomi-welcome .character-display > img {
  display: block;
  width: 140px;
  height: auto;
  aspect-ratio: 480 / 854;
  margin: 0 auto 14px;
  border: 1px solid rgba(232, 197, 120, 0.42);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(5, 3, 12, 0.4);
}

/* 案内人選択（account.html） */
.character-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.character-option.btn-ghost {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 0;
  padding: 10px;
  text-align: left;
}
.character-option img {
  width: 58px;
  height: 75px;
  object-fit: contain;
}
.character-option strong,
.character-option small {
  display: block;
}
.character-option strong {
  color: var(--text);
}
.character-option small {
  color: var(--text-dim);
  font-size: 11px;
}
.character-option .character-check {
  display: grid;
  width: 20px;
  height: 20px;
  margin-left: auto;
  place-items: center;
  border: 1px solid var(--text-dim);
  border-radius: 50%;
  color: transparent;
}
.character-option.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.character-option.is-selected .character-check {
  border-color: var(--gold);
  background: var(--gold);
  color: #241a32;
}
.character-option:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* 鑑定士チャット（chat.html） */
.chat-history {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.chat-message {
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-message-user {
  background: var(--bg-soft);
}
.chat-message-assistant {
  border: 1px solid #3b3160;
}
.chat-hexagram {
  color: var(--text-dim);
  font-size: 12px;
  padding: 0 4px;
}
.chat-form textarea {
  min-height: 120px;
  resize: vertical;
}
.chat-form button {
  margin-top: 12px;
}
@media (max-width: 420px) {
  .character-options {
    grid-template-columns: 1fr;
  }
}

/* 菱形◆セクション区切り（共通ユーティリティ） */
.divider-diamond {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0;
}
.divider-diamond::before,
.divider-diamond::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(232, 197, 120, 0.45),
    transparent
  );
}
.divider-diamond span {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--gold);
  transform: rotate(45deg);
}

@media (max-width: 420px) {
  .koyomi-page .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .koyomi-page .card {
    padding: 21px 18px;
  }
  .brand-header img {
    width: 38px;
    height: 38px;
  }
  .brand-header span {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .koyomi-page::before,
  .koyomi-page::after {
    animation: none;
  }
  .koyomi-page .btn,
  .koyomi-page button:not(.btn-ghost) {
    transition: none;
  }
}

/* ============================================================
   ホームLP：Hero / 6占術 / ステップ / サンプル / 安心 / FAQ
   ============================================================ */

/* Hero CTA行（Primary + Secondary） */
.cta-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.cta-row .btn {
  margin-top: 0;
  flex: 1;
}
@media (max-width: 480px) {
  .cta-row {
    flex-direction: column;
  }
}

/* 6つの占術グリッド */
.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  text-align: left;
}
@media (max-width: 480px) {
  .method-grid {
    grid-template-columns: 1fr;
  }
}
.method-card {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 14px 16px;
}
.method-name {
  color: var(--color-ivory);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.method-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* 3ステップ（金の丸数字バッジ + テキスト） */
.step-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.step-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.step-list p {
  margin: 0;
  padding-top: 8px;
  font-size: 15px;
  line-height: 1.8;
}

/* 鑑定サンプル（引用風） */
.sample-quote {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--color-gold-muted);
  font-size: 15px;
  font-style: normal;
  line-height: 1.9;
  color: var(--text);
}

/* FAQ（details/summary） */
.faq-list {
  display: grid;
  gap: 14px;
  text-align: left;
}
.faq-item {
  border-bottom: 1px solid rgba(181, 156, 240, 0.18);
  padding-bottom: 14px;
}
.faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ivory);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "▸";
  color: var(--gold);
  font-size: 13px;
}
.faq-item[open] summary::after {
  content: "▾";
}
.faq-item summary:focus-visible {
  outline: 2px solid #fff0bd;
  outline-offset: 3px;
  border-radius: 4px;
}
.faq-answer {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.8;
}

/* ============================================================
   オンボーディング：3ステップウィザード
   ============================================================ */
.onboarding-steps {
  margin-bottom: 22px;
}
.step-indicator {
  display: flex;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.step-dot {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.step-dot:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  z-index: 0;
  width: 100%;
  height: 1px;
  background: rgba(232, 197, 120, 0.25);
}
.step-dot.is-done:not(:last-child)::after {
  background: rgba(232, 197, 120, 0.6);
}
.step-dot-circle {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(232, 197, 120, 0.35);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
}
.step-dot.is-current .step-dot-circle {
  border-color: var(--gold);
  background: var(--gold);
  color: #241a32;
}
.step-dot.is-done .step-dot-circle {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
}
.step-dot-text {
  font-size: 11px;
  color: var(--text-dim);
}
.step-dot.is-current .step-dot-text {
  color: var(--gold);
  font-weight: 700;
}
.step-progress-text {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
}
.step-desc {
  margin: 0 0 4px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.8;
}
.step-panel {
  animation: step-panel-in 160ms ease-out;
}
@keyframes step-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.step-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.step-nav .btn {
  margin-top: 0;
}
.step-nav .btn:not(.btn-ghost) {
  flex: 1;
}
.step-nav .btn-small {
  flex: 0 0 auto;
  width: auto;
  padding: 10px 18px;
  font-size: 13px;
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
}
.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  padding: 0;
  accent-color: var(--gold);
}
.checkbox-row label {
  display: inline;
  margin: 0;
  color: var(--text);
  font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
  .step-panel {
    animation: none;
  }
}