/* 運命図鑑 — 和モダン運命アーカイブ
   墨紺#112033 / 生成り#F7F2E8 / 朱#A63D2F / 鈍金#B18A4A(罫線・番号のみ) / 墨#292826 */
:root {
  --paper: #F7F2E8;
  --ink: #292826;
  --navy: #112033;
  --shu: #A63D2F;
  --gold: #B18A4A;
  --sub: #6f6c62;
  --card: #FCF9F2;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.9;
  font-size: 16px;
  min-height: 100vh;
}
h1, h2, h3, .type-name, .site h1 { font-family: "Zen Old Mincho", "Noto Serif JP", "Yu Mincho", serif; }
main { max-width: 640px; margin: 0 auto; padding: 2.5em 1.2em 4em; }
header.site { text-align: center; margin-bottom: 2.2em; }
.site h1 { font-size: 2em; letter-spacing: .35em; color: var(--navy); font-weight: 600; }
.site .tagline { color: var(--ink); font-size: .95em; letter-spacing: .12em; margin-top: .8em; font-family: "Zen Old Mincho", serif; }
.site .subcopy { color: var(--sub); font-size: .8em; margin-top: .6em; }
.divider { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 1.2em auto; }

.card {
  background: var(--card);
  border: 1px solid rgba(177,138,74,.4);
  border-radius: 6px;
  padding: 1.8em 1.5em;
  margin-bottom: 1.6em;
  box-shadow: 0 1px 4px rgba(17,32,51,.06);
}
.form-title { text-align: center; color: var(--navy); letter-spacing: .2em; margin-bottom: 1em; font-size: 1.05em; font-family: "Zen Old Mincho", serif; }
.dob-row { display: flex; gap: .6em; justify-content: center; }
.dob-row select, input.txt {
  background: #fff; color: var(--ink);
  border: 1px solid rgba(17,32,51,.35); border-radius: 6px;
  padding: .6em .6em; font-size: 1em; font-family: inherit;
  min-height: 44px;
}
button.primary {
  display: block; width: 100%; margin-top: 1.4em;
  background: var(--shu);
  color: #fff; border: 0; border-radius: 6px;
  padding: 1em; font-size: 1.05em; letter-spacing: .25em;
  font-family: "Zen Old Mincho", serif; font-weight: 700; cursor: pointer;
  min-height: 48px;
}
button.primary:hover { background: #8f3427; }
.micro { text-align: center; color: var(--sub); font-size: .75em; margin-top: .7em; letter-spacing: .05em; }

#result { display: none; }
#result.show { display: block; animation: fadein .5s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

.meishiki { text-align: center; color: var(--sub); font-size: .85em; letter-spacing: .1em; }
.type-no { text-align: center; color: var(--gold); letter-spacing: .35em; font-size: .8em; margin-top: 1em; font-family: Georgia, "Times New Roman", serif; }
.type-name {
  text-align: center; font-size: 2em; color: var(--navy);
  letter-spacing: .15em; margin: .2em 0 .1em; font-weight: 600;
}
.type-kanshi { text-align: center; color: var(--sub); font-size: .9em; margin-bottom: 1.4em; }
#result section, .sheet section { margin-top: 1.8em; }
#result h3, .sheet h3 {
  color: var(--navy); font-size: 1em; letter-spacing: .25em;
  border-bottom: 1px solid rgba(177,138,74,.5); padding-bottom: .4em; margin-bottom: .7em;
  font-weight: 600;
}
#result p, .sheet p { font-size: .95em; }
#result p + p, .sheet p + p { margin-top: .7em; }
.daily p { font-size: 1.02em; }
.daily-note { color: var(--sub); font-size: .75em !important; }

/* 命式図 */
.ms-chart { display: flex; gap: .6em; justify-content: center; margin: .8em 0 1.2em; }
.ms-col {
  flex: 1; max-width: 130px; text-align: center;
  border: 1px solid rgba(17,32,51,.25); border-radius: 6px;
  padding: .7em .4em; background: #fff;
}
.ms-col.ms-main { border: 2px solid var(--shu); background: #FDF6F0; }
.ms-head { color: var(--gold); font-size: .78em; letter-spacing: .2em; margin-bottom: .5em; font-family: "Zen Old Mincho", serif; }
.ms-kan, .ms-shi { font-size: 1.9em; color: var(--navy); line-height: 1.3; font-family: "Zen Old Mincho", serif; }
.ms-main .ms-kan, .ms-main .ms-shi { color: var(--shu); }
.ms-kan span, .ms-shi span { display: block; font-size: .38em; color: var(--sub); letter-spacing: .1em; font-family: "Noto Sans JP", sans-serif; }
.ms-sub { color: var(--sub); font-size: .68em; margin-top: .5em; letter-spacing: .05em; }
.gg-balance { max-width: 220px; margin: 0 auto; }
.gg-title { text-align: center; color: var(--navy); font-size: .8em; letter-spacing: .25em; margin-bottom: .3em; }
.gg-row { display: flex; align-items: center; gap: .8em; font-size: .85em; line-height: 1.7; }
.gg-label { color: var(--sub); }
.gg-dots { color: var(--gold); letter-spacing: .15em; }
.ms-note { color: var(--sub); font-size: .72em; text-align: center; margin-top: 1em; }

/* プラン2択 */
.plan-choice { display: flex; gap: .8em; margin-top: 1em; flex-wrap: wrap; }
.plan-lead { width: 100%; text-align: center; color: var(--navy); font-size: .9em; letter-spacing: .15em; margin-bottom: .2em; }
.plan-btn {
  flex: 1; min-width: 200px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--navy); border-radius: 8px;
  padding: 1em .8em; font-family: inherit; cursor: pointer;
  text-align: center; line-height: 1.6; min-height: 48px;
}
.plan-btn:hover { background: #FDF6F0; border-color: var(--shu); }
.plan-btn strong { display: block; color: var(--shu); font-size: 1.05em; letter-spacing: .1em; margin-bottom: .4em; font-family: "Zen Old Mincho", serif; }
.plan-btn span { font-size: .8em; color: var(--sub); }

/* 相性鑑定書（完全版） */
.pair-charts { display: flex; gap: 1em; flex-wrap: wrap; justify-content: center; }
.pair-person { flex: 1; min-width: 260px; }
.pair-label { text-align: center; color: var(--navy); letter-spacing: .2em; font-size: .9em; margin-bottom: .3em; font-family: "Zen Old Mincho", serif; }
.pair-type { text-align: center; color: var(--sub); font-size: .8em; margin-top: -0.4em; }
.pair-score { text-align: center; margin: 1.4em 0; }
.score-num { font-size: 3.2em; color: var(--shu); font-family: Georgia, serif; }
.score-unit { color: var(--sub); margin-left: .2em; }
.score-note { color: var(--sub); font-size: .75em; max-width: 420px; margin: .4em auto 0; }

.share { text-align: center; margin-top: 2.2em; }
.share a, .share button {
  display: inline-block; margin: .3em .3em;
  background: transparent; color: var(--navy);
  border: 1px solid var(--navy); border-radius: 999px;
  padding: .6em 1.5em; font-size: .9em; letter-spacing: .1em;
  font-family: inherit; cursor: pointer; text-decoration: none;
  min-height: 44px;
}
.share a:hover, .share button:hover { background: rgba(17,32,51,.06); }

.cta { text-align: center; margin-top: 1.2em; }
.cta a {
  display: block;
  background: var(--shu);
  color: #fff; border-radius: 6px;
  padding: 1em; font-weight: 700; letter-spacing: .15em; text-decoration: none;
}
.cta .cta-sub { color: var(--sub); font-size: .78em; margin-top: .6em; }

footer { text-align: center; color: var(--sub); font-size: .72em; margin-top: 3em; letter-spacing: .08em; }
footer p + p { margin-top: .4em; }
a.backlink { color: var(--shu); }