:root {
  --color-bg: #efe6ce;
  --color-surface: #f8f2e3;
  --color-border: #dbcba0;
  --color-text: #2b2620;
  --color-text-muted: #6e6248;
  --color-primary: #a8631f;
  --color-primary-hover: #8b5119;
  --color-primary-contrast: #fbf3e2;
  --color-accent: #55704a;
  --color-badge-bg: #e4d6ae;
  --color-badge-text: #6e4a1e;
  --color-warn-bg: #efd3c0;
  --color-warn-text: #8a4322;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-card: 0 2px 8px rgba(43, 38, 32, 0.12);
  --max-width: 640px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #211f1a;
    --color-surface: #2c2a22;
    --color-border: #423e30;
    --color-text: #f1e9d8;
    --color-text-muted: #b3a585;
    --color-primary: #e3a23b;
    --color-primary-hover: #edb259;
    --color-primary-contrast: #241c0d;
    --color-accent: #8fae7d;
    --color-badge-bg: #3a3626;
    --color-badge-text: #e3a23b;
    --color-warn-bg: #3d2a1d;
    --color-warn-text: #e0a876;
    --shadow-card: 0 2px 14px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.app-header {
  text-align: center;
  margin-bottom: 24px;
}

.app-header__eyebrow {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}

.app-header__title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 12px;
}

.app-header__lead {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.main { display: block; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px 20px;
  margin-bottom: 16px;
}

.card--intro { text-align: center; }

.intro-points {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  display: inline-block;
}

.intro-points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--color-text);
}

.intro-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.intro-disclaimer {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 16px 0 0;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 12px 20px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { color: var(--color-text); border-color: var(--color-text-muted); }

.btn--large { width: 100%; padding: 14px 20px; font-size: 1.05rem; }
.btn--skip { margin-left: auto; }

.progress {
  height: 6px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  transition: width 0.25s ease;
}

.progress__label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0 0 16px;
  text-align: right;
}

.card--quiz { min-height: 220px; }

.quiz-question {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.quiz-question__note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}

.quiz-options {
  display: grid;
  gap: 10px;
}

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz-option:hover {
  border-color: var(--color-primary);
}

.quiz-option.is-selected {
  border-color: var(--color-primary);
  background: var(--color-badge-bg);
  font-weight: 700;
}

.quiz-select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.95rem;
}

.quiz-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-summary {
  text-align: center;
  margin-bottom: 20px;
}

.result-summary__count {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.result-summary__note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
}

.result-list {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px 18px 16px;
}

.result-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
}

.badge--accent {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.badge--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn-text);
}

.result-card__name {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.result-card__benefit {
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 4px;
}

.result-card__org {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

.result-card__summary {
  font-size: 0.88rem;
  margin: 0 0 10px;
}

.result-card__conditions {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

.result-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.result-card__link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  padding: 8px 14px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.result-card__link:hover { background: var(--color-badge-bg); }

.result-card__link--offer {
  color: var(--color-accent);
  border-color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.offer-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

/* 記事の中の広告枠(houyou-calendar と同じ形) */
.art-cta { text-align: center; margin: 16px 0 4px; padding: 14px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); }
.card--article .art-cta p { font-size: 0.85rem; margin: 0 0 10px; }
.art-cta__links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.badge--pr {
  background: var(--color-accent);
  color: var(--color-primary-contrast);
  font-size: 0.62rem;
  padding: 2px 6px;
}

.result-empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: 24px 12px;
}

.ad-slot {
  min-height: 90px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  margin-bottom: 20px;
}

.card--lead { text-align: center; }
.card__title { font-size: 1rem; margin: 0 0 8px; }

.lead-form {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.lead-form__input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
}

.app-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.sp-only { display: inline; }

@media (min-width: 640px) {
  .app-header__title { font-size: 2rem; }
  .sp-only { display: none; }
}

.result-card__platforms {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

.cross-link-banner {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--color-badge-bg);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--color-badge-text);
  text-decoration: none;
  font-weight: 700;
}

.cross-link-banner:hover { opacity: 0.85; }

.result-cross-links {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.result-cross-links .cross-link-banner {
  margin-top: 0;
}

.form-field {
  text-align: left;
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.form-field--checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 0.9rem;
}

.form-field--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.result-headline {
  text-align: center;
  padding: 8px 0 20px;
  border-bottom: 1px dashed var(--color-border);
  margin-bottom: 16px;
}

.result-headline__label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 4px;
}

.result-headline__value {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 4px;
}

.result-headline__sub {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.result-breakdown {
  display: grid;
  gap: 8px;
  text-align: left;
}

.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.result-row span:first-child {
  color: var(--color-text-muted);
}

.result-row span:last-child {
  font-weight: 700;
}

.letter-preview {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 20px;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 0.95rem;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 16px;
}

#btn-copy {
  width: 100%;
  margin-bottom: 16px;
}

/* --- 解説記事セクション --- */

.card--article h2 {
  font-size: 1.05rem;
  margin: 0 0 12px;
}
.card--article p {
  font-size: 0.9rem;
  margin: 0 0 12px;
}
.card--article p:last-child { margin-bottom: 0; }
.card--article ul {
  font-size: 0.9rem;
  margin: 0 0 12px;
  padding-left: 22px;
}

.faq-item {
  border-bottom: 1px dashed var(--color-border);
  padding: 12px 0;
}
.faq-item:first-of-type { padding-top: 0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  list-style: revert;
}
.faq-item summary::marker { color: var(--color-primary); }
.faq-item p {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* --- 生まれ日診断 固有 --- */

:root {
  --color-primary: #5a4a8f;
  --color-primary-hover: #483a75;
  --color-accent: #b2792a;
  --color-badge-bg: #e6dfd0;
  --color-badge-text: #4c3f7a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #a696e0;
    --color-primary-hover: #b9abea;
    --color-primary-contrast: #1d1830;
    --color-accent: #e0b25c;
    --color-badge-bg: #332c4a;
    --color-badge-text: #c9bdf2;
  }
}

.date-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
}

.form-error {
  color: var(--color-warn-text);
  background: var(--color-warn-bg);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.85rem;
  margin: 0 0 12px;
  text-align: left;
}

.card--profile { text-align: left; }
.card--profile .result-headline { text-align: center; }
.card--profile .result-headline__value { font-size: 1.7rem; }
.card--profile .result-headline__sub { font-size: 1.05rem; font-weight: 700; color: var(--color-text); }

.item { padding: 4px 0 12px; }
.item__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 4px;
}
.item__head small { font-size: 0.78rem; font-weight: 400; color: var(--color-text-muted); }
.item__key { color: var(--color-accent); font-weight: 700; font-size: 0.9rem; margin: 0 0 4px; }
.item__text { font-size: 0.92rem; margin: 0 0 6px; }
.item__line { font-size: 0.88rem; margin: 0 0 4px; }
.item__line span {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-right: 8px;
}
.item__note { font-size: 0.78rem; color: var(--color-text-muted); margin: 6px 0 0; }

.fgrid {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  border-top: 1px dashed var(--color-border);
  padding-top: 12px;
}
.fgrid .item { border-bottom: 1px solid var(--color-border); }
.fgrid .item:last-child { border-bottom: none; }

.card--daily { text-align: center; }
.daily__date { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 4px; }
.daily__overall { margin: 0 0 8px; }
.daily__stars { font-size: 1.8rem; color: var(--color-accent); letter-spacing: 0.06em; }
.daily__msg { font-size: 1rem; font-weight: 700; margin: 0 0 14px; }
.daily__rows { display: grid; gap: 4px; margin: 0 0 12px; text-align: left; }
.daily__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}
.daily__row span { color: var(--color-text-muted); }
.daily__row b { color: var(--color-accent); }
/* 今日のラッキー(九星の回座・数秘・日盤の吉方位から決まる) */
.lucky {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 12px 10px 10px;
  margin: 0 0 14px;
}
.lucky__title { font-size: 0.8rem; font-weight: 800; color: var(--color-primary); letter-spacing: 0.06em; margin: 0 0 2px; }
.lucky__key { font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 10px; }
.lucky__key b { font-size: 1.05rem; color: var(--color-text); margin-left: 4px; }
.lucky__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lucky__tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lucky__name { font-size: 0.68rem; color: var(--color-text-muted); }
.lucky__val { font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere; }
.lucky__why { font-size: 0.62rem; line-height: 1.4; color: var(--color-text-muted); overflow-wrap: anywhere; }
.lucky__basis { font-size: 0.74rem; color: var(--color-text-muted); text-align: left; margin: 10px 2px 0; }
@media (max-width: 360px) { .lucky__grid { grid-template-columns: repeat(2, 1fr); } }

.daily__h { font-size: 0.85rem; font-weight: 800; color: var(--color-primary); margin: 18px 0 8px; }

/* これからの7日間 */
.flow7__table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.flow7__table th, .flow7__table td { padding: 6px 4px; border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: middle; white-space: nowrap; }
.flow7__table thead th { font-size: 0.68rem; color: var(--color-text-muted); font-weight: 700; }
.flow7__table tbody th { text-align: left; font-weight: 700; }
.flow7__table tbody th small { display: block; font-size: 0.62rem; font-weight: 400; color: var(--color-text-muted); }
.flow7__table tr.is-rest th { color: var(--color-warn-text); }
.flow7__table tr.is-best th, .flow7__table tr.is-best td {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  font-weight: 800;
}
.flow7__stars { color: var(--color-accent); letter-spacing: -0.02em; }
.daily__advice { font-size: 0.9rem; font-weight: 700; color: var(--color-primary); margin: 0 0 6px; }

.card--article h3 { font-size: 0.95rem; margin: 14px 0 6px; }

/* --- 出生図・命式 --- */

.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-optional {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-badge-text);
  background: var(--color-badge-bg);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
.form-help { font-size: 0.78rem; color: var(--color-text-muted); margin: 6px 0 0; }

.card--chart { text-align: left; }
.chart__lead { font-size: 0.88rem; color: var(--color-text-muted); margin: 0 0 14px; }
.chart__sub {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 18px 0 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}

/* 横に長い表は、この枠の中だけでスクロールさせる(本文は横に動かさない) */
.chart__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.chart__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.chart__table th {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
}
.chart__table td { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.chart__table tr:last-child th, .chart__table tr:last-child td { border-bottom: none; }
.chart__planet { display: block; font-size: 0.95rem; }
.chart__table th small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--color-text-muted); }
.chart__deg { font-size: 0.78rem; color: var(--color-text-muted); }
.chart__memo { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.chart__flag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-warn-text);
  background: var(--color-warn-bg);
  border-radius: 999px;
  padding: 1px 8px;
}
.chart__row--asc th, .chart__row--asc td { background: var(--color-bg); }
.chart__row--asc .chart__planet { color: var(--color-primary); }

/* 命式の4本柱 */
.pillars { width: 100%; border-collapse: separate; border-spacing: 6px 0; table-layout: fixed; min-width: 300px; }
.pil {
  text-align: center;
  vertical-align: top;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 4px 12px;
}
.pil__label { display: block; font-size: 0.7rem; color: var(--color-text-muted); font-weight: 700; }
.pil__kan { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.2; color: var(--color-primary); }
.pil__shi { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.2; }
.pil__memo { display: block; font-size: 0.7rem; color: var(--color-text-muted); margin-top: 4px; }
.pil__none { display: block; font-size: 1.9rem; color: var(--color-border); line-height: 2.4; }
.pil--empty { background: transparent; border-style: dashed; }

.item--daymaster {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 14px 14px 12px;
  margin-top: 16px;
}

/* 五行・エレメントの棒グラフ */
.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 2.2em 1fr 1.6em; align-items: center; gap: 8px; }
.bar__name { font-size: 0.85rem; font-weight: 700; }
.bar__track { height: 10px; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.bar__n { font-size: 0.85rem; color: var(--color-text-muted); text-align: right; }
.bar__memo { grid-column: 2 / 4; font-size: 0.72rem; color: var(--color-text-muted); margin-top: -2px; }

.item__note--warn {
  color: var(--color-warn-text);
  background: var(--color-warn-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

/* --- 吉日カレンダー --- */

.crumb { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 12px; }
.crumb a { color: var(--color-text-muted); }

.card--cal { padding: 14px 12px 16px; }

.calnav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.calnav__btn {
  appearance: none;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  width: 44px; height: 44px;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.calnav__btn:hover { border-color: var(--color-primary); }
.calnav__label { text-align: center; font-size: 1.15rem; font-weight: 800; }
.calnav__today {
  display: block; margin: 2px auto 0;
  appearance: none; border: 0; background: none;
  color: var(--color-primary); font: inherit; font-size: 0.72rem; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}

.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calhead { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); padding: 2px 0 4px; }
.calhead--sun { color: #c0392b; }
.calhead--sat { color: #2b6cb0; }

.calcell {
  appearance: none;
  border: 1.5px solid transparent;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 3px 1px 4px;
  min-height: 58px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; color: var(--color-text); cursor: pointer;
  overflow: hidden;
}
.calcell--empty { background: transparent; border-color: transparent; cursor: default; }
.calcell__d { font-size: 0.95rem; font-weight: 800; line-height: 1.1; }
.calcell__r { font-size: 0.6rem; color: var(--color-text-muted); line-height: 1.1; }
.calcell__b { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.calcell.is-sun .calcell__d { color: #c0392b; }
.calcell.is-sat .calcell__d { color: #2b6cb0; }
.calcell.is-good { background: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg)); }
.calcell.is-mixed { background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)); }
.calcell.is-bad { background: color-mix(in srgb, var(--color-warn-text) 8%, var(--color-bg)); }
.calcell.is-best { background: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg)); }
.calcell.is-today { border-color: var(--color-text-muted); }
.calcell.is-selected { border-color: var(--color-primary); border-width: 2px; }

.bdg {
  display: block;
  font-size: 0.55rem; font-weight: 700; line-height: 1.35;
  padding: 0 3px; border-radius: 3px; white-space: nowrap;
}
.b-tensha { background: var(--color-primary); color: var(--color-primary-contrast); }
.b-ichiryu { background: var(--color-accent); color: #fff; }
.b-tora, .b-mi { background: var(--color-badge-bg); color: var(--color-badge-text); }
.b-bad { background: var(--color-warn-bg); color: var(--color-warn-text); }

.callegend { font-size: 0.7rem; color: var(--color-text-muted); margin: 12px 0 0; text-align: center; line-height: 2; }
.chip {
  display: inline-block; font-size: 0.62rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; margin: 0 3px 0 8px;
}
.chip--best { background: var(--color-primary); color: var(--color-primary-contrast); }
.chip--good { background: var(--color-accent); color: #fff; }
.chip--bad { background: var(--color-warn-bg); color: var(--color-warn-text); }

/* 選んだ日の詳細 */
.card--detail { text-align: left; border-color: var(--color-primary); }
.detail__date { font-size: 1.25rem; font-weight: 800; margin: 0 0 10px; }
.detail__date span { font-size: 0.85rem; color: var(--color-text-muted); margin-left: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tag { font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.tag--good { background: var(--color-accent); color: #fff; }
.tag--bad { background: var(--color-warn-bg); color: var(--color-warn-text); }
.detail__rows { display: grid; gap: 2px; margin: 12px 0; }
.detail__row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.85rem; margin: 0; padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
.detail__row span { color: var(--color-text-muted); white-space: nowrap; }
.detail__row b { text-align: right; }
.detail__memo { font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 6px; }
.detail__notes { margin: 10px 0 0; padding-left: 1.2em; font-size: 0.85rem; }
.detail__notes li { margin-bottom: 6px; }

/* 月内の吉日一覧 */
.best-line {
  font-size: 0.85rem; font-weight: 700;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 14px;
}
.glist { border-top: 1px solid var(--color-border); padding: 12px 0 4px; }
.glist:first-child { border-top: 0; padding-top: 0; }
.glist__name { font-size: 0.88rem; font-weight: 700; margin: 0 0 6px; }
.glist__name small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--color-text-muted); }
.glist__days { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.daychip {
  appearance: none; border: 1.5px solid var(--color-border);
  background: var(--color-bg); border-radius: var(--radius-sm);
  padding: 5px 9px; font: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--color-text); cursor: pointer;
}
.daychip small { font-size: 0.68rem; font-weight: 400; color: var(--color-text-muted); margin-left: 2px; }
.daychip:hover { border-color: var(--color-primary); }
.daychip--bad { color: var(--color-warn-text); }

.card--note { background: color-mix(in srgb, var(--color-warn-bg) 45%, var(--color-surface)); }

@media (min-width: 500px) {
  .calcell { min-height: 66px; }
  .calcell__d { font-size: 1.05rem; }
  .calcell__r { font-size: 0.68rem; }
  .bdg { font-size: 0.62rem; }
}

/* --- 相性診断 --- */

.pair { display: grid; gap: 12px; }
.person {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px 12px;
  margin: 0;
}
.person legend { font-size: 0.85rem; font-weight: 800; color: var(--color-primary); padding: 0 6px; }
.time-row--opt { margin-top: 8px; }

.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcard {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 12px 12px 8px;
  text-align: left;
}
.pcard__label { font-size: 0.72rem; font-weight: 800; color: var(--color-primary); margin: 0; }
.pcard__date { font-size: 0.95rem; font-weight: 800; margin: 0 0 8px; }
.pcard__row {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 0.78rem; margin: 0; padding: 4px 0;
  border-top: 1px solid var(--color-border);
}
.pcard__row span { color: var(--color-text-muted); white-space: nowrap; }
.pcard__row b { text-align: right; }
.pcard__row small { color: var(--color-warn-text); }

.rel {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 0 10px;
}
.rel__kind { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); margin: 0 0 2px; }
.rel__key { font-size: 1.05rem; font-weight: 800; color: var(--color-primary); margin: 0 0 6px; }
.rel__text { font-size: 0.88rem; margin: 0; }
.rel2 { display: grid; gap: 10px; }

@media (min-width: 560px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .rel2 { grid-template-columns: 1fr 1fr; }
}

/* --- 解説記事のページ(記事・カレンダー・相性で共通) --- */

.art-header { margin-bottom: 18px; }
.art-title { font-size: 1.45rem; font-weight: 800; line-height: 1.5; margin: 0 0 8px; }
.art-sub { font-size: 0.88rem; color: var(--color-text-muted); margin: 0; }

/* 誤解されると困る内容を置くカード。枠と地の色で目立たせる */
.card--warn { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); }

.card--article h3 { font-size: 0.95rem; margin: 16px 0 8px; }
.card--article ol { font-size: 0.9rem; margin: 0 0 12px; padding-left: 1.4em; }
.card--article ol li { margin-bottom: 6px; }
/* 記事内のボタンは a タグなので、行として置く */
.card--article .btn { display: inline-block; text-decoration: none; margin-top: 4px; }

/* 表は本文を横に動かさず、枠の中だけでスクロールさせる */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; }
.spec { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 360px; }
.spec th, .spec td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec th { white-space: nowrap; font-weight: 700; color: var(--color-text); }
.spec td { color: var(--color-text-muted); }
.spec tr.is-now td { color: var(--color-primary); font-weight: 700; }
.spec th small { display: block; font-size: 0.7rem; font-weight: 400; color: var(--color-text-muted); }
/* 干支や六曜のような短い語は折り返さない */
.spec td:nth-child(2), .spec td:nth-child(3) { white-space: nowrap; }
/* 日付を何個も並べる列は折り返す。日付ひとつ(.nw)の途中では切らない */
.spec.spec--wrap { min-width: 0; }
.spec.spec--wrap td, .spec.spec--wrap thead th { white-space: normal; }
.spec .nw { white-space: nowrap; }

@media (min-width: 640px) {
  .art-title { font-size: 1.8rem; }
}

/* --- カレンダーの設定と二十八宿 --- */
.calsettings { margin-top: 12px; border-top: 1px dashed var(--color-border); padding-top: 10px; }
.calsettings summary { cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--color-primary); }
.calset { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; cursor: pointer; }
.calset input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.calset b { display: block; font-size: 0.85rem; }
.calset small { display: block; font-size: 0.72rem; color: var(--color-text-muted); line-height: 1.5; }
.calcell__s { font-size: 0.58rem; color: var(--color-text-muted); line-height: 1.1; }
.calcell__s.is-oni { color: var(--color-primary); font-weight: 800; }
/* 出生図: 星座ごとの読み */
.chart__read { display: block; font-size: 0.86rem; margin-top: 3px; }

/* --- 雑節の印と用語一覧 --- */
.calcell__z { font-size: 0.55rem; color: var(--color-accent); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.tag--season { background: var(--color-badge-bg); color: var(--color-badge-text); }
.glist__zs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 0.85rem; }
.callegend__link { display: block; margin-top: 4px; font-size: 0.75rem; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.toc a { font-size: 0.8rem; font-weight: 700; text-decoration: none; padding: 5px 10px; border: 1.5px solid var(--color-border); border-radius: 999px; color: var(--color-primary); }
.gl { padding: 10px 0; border-top: 1px solid var(--color-border); }
.gl:first-child { border-top: 0; }
.gl__name { font-size: 0.95rem; font-weight: 800; margin: 0 0 2px; }
.gl__name small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--color-text-muted); }
.gl__text { font-size: 0.86rem; margin: 0; }

/* --- 年運・月運 --- */
.period { border-top: 1px solid var(--color-border); padding: 14px 0 4px; }
.period:first-child { border-top: 0; padding-top: 0; }
.period__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 4px; }
.period__label { font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); }
.period__stars { color: var(--color-accent); font-size: 1.05rem; letter-spacing: .05em; }
.period__stage { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; }
.period__stage small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--color-text-muted); }
.period__text { font-size: 0.88rem; margin: 0 0 8px; }
.period__theme {
  font-size: 0.85rem; font-weight: 700; margin: 0 0 10px;
  background: var(--color-bg); border-radius: var(--radius-sm); padding: 8px 10px;
}
/* --- 節気・選日・月相 --- */
.calcell__z.is-sekki { color: var(--color-primary); font-weight: 800; }
.calcell__moon { font-size: 0.6rem; line-height: 1.1; color: var(--color-text-muted); }
.tag--sen { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.tag--kyo { background: var(--color-bg); color: var(--color-warn-text); border: 1px dashed var(--color-warn-text); font-weight: 400; }

/* マヤ暦のKIN表示 */
.kin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 10px;
  margin: 0 0 14px;
  border: 1.5px solid var(--color-primary);
  border-radius: 12px;
  background: var(--color-bg);
}
.kin__no { font-size: 1.9rem; font-weight: 800; line-height: 1.15; color: var(--color-primary); }
.kin__sig { font-size: 1.05rem; font-weight: 700; text-align: center; }
.kin__label { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; }

/* 今日の運勢のうち「計算で決まる」部分 */
.daily__calc {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border);
  text-align: left;
}
.daily__calc-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 4px;
  text-align: center;
}
.daily__calc-lead {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  text-align: center;
}
.dk { padding: 11px 0; border-top: 1px solid var(--color-border); }
.dk:first-of-type { border-top: none; padding-top: 0; }
.dk__head {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.dk__head small { font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.dk__val { font-size: 0.92rem; margin: 0 0 4px; }
.dk__text { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 4px; }
.dk__sub { font-size: 0.76rem; color: var(--color-text-muted); margin: 4px 0 0; }
.dk__tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.dk__tag { font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; }
.dk__tag--good {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  color: var(--color-accent);
  font-weight: 700;
}
.dk__tag--bad {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* 記事内のコード引用 */
.code-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 10px 0 0;
  overflow-x: auto;
  font-size: 0.72rem;
  line-height: 1.65;
}
.code-block code { background: none; padding: 0; font-size: inherit; }

/* --- 吉日カレンダー: 祝日・マヤ暦・あなたの吉日 --- */
.calcell { position: relative; }
.calcell.is-holiday .calcell__d { color: #c0392b; }
.calcell__h {
  font-size: 0.55rem; font-weight: 700; color: #c0392b; line-height: 1.2;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px;
}
.calcell__k { font-size: 0.55rem; color: var(--color-text-muted); line-height: 1.1; font-variant-numeric: tabular-nums; }
.calcell__me {
  position: absolute; top: 1px; right: 1px;
  font-size: 0.46rem; font-weight: 800; line-height: 1;
  padding: 1px 2px; border-radius: 3px;
  background: var(--color-primary); color: var(--color-primary-contrast);
}
.tag--holiday { background: #fbe3df; color: #a8321f; }
.chip--me { background: var(--color-primary); color: var(--color-primary-contrast); }
.detail__me {
  margin: 4px 0 10px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.detail__me-title { font-size: 0.78rem; font-weight: 800; color: var(--color-primary); margin: 0 0 6px; }
.detail__me-line { display: flex; gap: 8px; font-size: 0.85rem; margin: 0 0 4px; }
.detail__me-line span { color: var(--color-text-muted); white-space: nowrap; }
.glist--me { border-top: 0; padding-top: 0; margin-bottom: 4px; }
.glist__sub { font-size: 0.75rem; color: var(--color-text-muted); margin: 8px 0 4px; }
.daychip--me { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); color: var(--color-primary); }

/* --- 条件で日を探す --- */
.search__lead { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 12px; }
.searchform__group { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.searchform__group legend { font-size: 0.75rem; font-weight: 700; color: var(--color-text-muted); margin-bottom: 6px; padding: 0; }
.searchform__group label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.82rem; padding: 5px 10px;
  border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-bg); cursor: pointer;
}
.searchform__group label:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
}
.searchform__group label.is-disabled { opacity: 0.45; cursor: not-allowed; }
.searchform__group input { margin: 0; }
.search__result { margin-top: 14px; }
.search__count { font-size: 0.85rem; margin: 0 0 8px; }
.search__list { list-style: none; margin: 0; padding: 0; }
.search__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.search__item:first-child { border-top: 0; }
.search__day {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; font-weight: 800; color: var(--color-primary); cursor: pointer; text-decoration: underline;
}
.search__day small { font-weight: 400; color: var(--color-text-muted); margin-left: 4px; text-decoration: none; }
.search__tags { font-size: 0.75rem; color: var(--color-text-muted); }
/* 印があるマスは日付を少し左に寄せて、2桁でも重ならないようにする */
.calcell.has-me .calcell__d { margin-right: 9px; }

/* --- 今日の暦注: 祝日タグ --- */
.dk__tag--holiday { background: #fbe3df; color: #a8321f; font-weight: 700; }

/* --- 吉方位 --- */
.houi { margin: 10px 0 14px; }
.houi__title { font-size: 0.82rem; font-weight: 700; margin: 0 0 6px; }
.houi__board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 320px; margin: 0 auto 8px; }
.houi__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 62px; padding: 4px 2px; border-radius: var(--radius-sm);
  background: var(--color-bg); border: 1px solid var(--color-border); text-align: center;
}
.houi__cell.is-good { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg)); border-color: var(--color-accent); }
.houi__cell.is-bad { background: color-mix(in srgb, var(--color-warn-text) 8%, var(--color-bg)); }
.houi__cell--center { background: var(--color-surface); border-style: dashed; }
.houi__dir { font-size: 0.68rem; color: var(--color-text-muted); }
.houi__star { font-size: 0.95rem; font-weight: 800; line-height: 1.2; }
.houi__label { font-size: 0.62rem; font-weight: 700; line-height: 1.2; }
.houi__cell.is-good .houi__label { color: var(--color-accent); }
.houi__cell.is-bad .houi__label { color: var(--color-warn-text); }
.houi__good { font-size: 0.9rem; margin: 0 0 4px; text-align: center; }

/* --- 厄年と年祝い --- */
.yaku__table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 300px; }
.yaku__table th, .yaku__table td { padding: 7px 4px; border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: middle; }
.yaku__table thead th { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 700; }
.yaku__table tbody th { text-align: left; white-space: nowrap; }
.yaku__table small { display: block; font-size: 0.66rem; font-weight: 400; color: var(--color-text-muted); }
.yaku__table td.is-now, .yaku__table tr.is-now td, .yaku__table tr.is-now th {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent); font-weight: 800;
}
.yaku__table td.is-past, .yaku__table tr.is-past td, .yaku__table tr.is-past th { color: var(--color-text-muted); opacity: 0.7; }
.yaku__table--choju { min-width: 420px; }
.yaku__memo { text-align: left !important; font-size: 0.72rem; color: var(--color-text-muted); }

/* --- 関連する本カード --- */
.card--books .books__lead {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.books__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.books__item a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  color: inherit;
  text-decoration: none;
}
.books__item a:hover,
.books__item a:focus-visible { border-color: var(--color-primary); }
.books__title { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.5; }
.books__note { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; }
.books__ku { font-size: 0.8rem; color: var(--color-text-muted); margin: 10px 0 0; }