@charset "utf-8";
/* ============================================================
   四柱推命ラボ

   設計の芯：
     1. 灰は画布、色は句読点。彩色は «五行» にしか使わない。
        命式の色は装飾ではなく情報そのものなので、そこに色を集中させ、
        それ以外（ボタン・見出し・リンク）は墨と灰で組む。
     2. 主役は八つの干支。文字を思い切り大きく取り、他はすべて退く。
     3. 罫線で仕切らない。余白と地色の差で仕切る。
     4. 級は 6 つだけ。micro / caption / body / title / headline / display。
        この 6 つ以外の字送りは使わない。
   ============================================================ */

:root {
  color-scheme: light;

  /* ── 級（これ以外の font-size は使わない）───────────── */
  --t-micro:    0.6875rem;                      /* 11px 十神の肩付き・極小ラベル */
  --t-caption:  0.8125rem;                      /* 13px 補足・キャプション */
  --t-body:     1rem;                           /* 16px 本文 */
  --t-title:    1.1875rem;                      /* 19px カード見出し */
  --t-headline: clamp(1.5rem, 2.6vw, 2rem);     /* 区切りの見出し・判定 */
  --t-display:  clamp(2.5rem, 5.4vw, 3.5rem);   /* 干支。ここだけ大きく */

  /* ── 字の太さ（三段のみ）───────────────────── */
  --w-read: 500;   /* 本文。Windows の游ゴシックは 400 だと Light が選ばれて細くなる */
  --w-emph: 600;   /* 見出し・強調 */
  --w-decl: 700;   /* 干支など、盤面の主役 */

  /* ── 墨と灰（画布）───────────────────────── */
  --bg:        #f7f7f6;
  --surface:   #ffffff;
  --surface-2: #f2f2f1;
  --ink:       #1a1a19;
  --ink-2:     #43433d;
  --ink-3:     #6f6f68;
  --line:      #e6e6e3;
  --line-2:    #efefec;

  /* ── 唯一の差し色。日主と操作系にだけ使う ────────── */
  --accent:     #8c2b1e;
  --accent-ink: #6d2017;
  --accent-bg:  #f8eeec;
  --deep:       #34342f;                        /* リンク。色ではなく濃さで示す */
  --deep-2:     #1a1a19;

  /* ── 五行（画面で色が付くのは原則ここだけ）──────────
     木＝緑、火＝赤、土＝茶、金＝黄、水＝青。
     白と淡地の双方で本文コントラスト 4.5:1 以上を確保した濃さ。 */
  --moku: #1d6b46;  --moku-bg: #ecf4ef;  --moku-line: #c6dfd0;
  --ka:   #b3392a;  --ka-bg:   #faedeb;  --ka-line:   #efcac3;
  --do:   #6b4423;  --do-bg:   #f4ece4;  --do-line:   #ddc7b3;
  --gon:  #85661a;  --gon-bg:  #f8f1da;  --gon-line:  #e4d49b;
  --sui:  #23417d;  --sui-bg:  #eaeef7;  --sui-line:  #c6d2e9;

  /* ── 状態（五行と同系で足並みをそろえる）────────── */
  --good: var(--moku);  --good-bg: var(--moku-bg);
  --bad:  var(--ka);    --bad-bg:  var(--ka-bg);
  --mid:  var(--gon);   --mid-bg:  var(--gon-bg);

  /* 見出し用。明朝は字の細さが出やすいので、太さを指定して使うこと。 */
  --mincho: "Hiragino Mincho ProN", "Yu Mincho Demibold", "Yu Mincho",
            "YuMincho", "Noto Serif JP", "MS PMincho", serif;
  /* 本文・盤面用。Windows では «Yu Gothic» を直接指すと Light が選ばれて
     細く見えるため、中太の «Yu Gothic Medium» を先に置く。
     さらに太く出る BIZ UDPGothic / Meiryo を後ろに控えさせる。 */
  --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Yu Gothic Medium", "YuGothic", "Yu Gothic",
            "BIZ UDPGothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  /* 干支そのもの。細さが出ないよう、明朝ではなくゴシックの太字で組む。 */
  --kanshi: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Yu Gothic Medium", "YuGothic", "Yu Gothic",
            "BIZ UDPGothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;

  /* ── 間（4 の倍数だけ）───────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --wrap: 1160px;
  --r: 6px;                                     /* 角は一種類だけ */
  --r-sm: 6px;
  --sh-1: 0 1px 2px rgba(26,26,25,.04);
  --sh-2: 0 1px 2px rgba(26,26,25,.04), 0 10px 28px -18px rgba(26,26,25,.22);
  --sh-3: 0 2px 4px rgba(26,26,25,.05), 0 24px 56px -24px rgba(26,26,25,.26);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--gothic);
  font-size: 16px;
  font-weight: var(--w-read);
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "palt" 1;
}

h1, h2, h3, h4 { font-family: var(--mincho); font-weight: var(--w-decl); line-height: 1.38; margin: 0; }
p { margin: 0 0 1em; }
a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; border-radius: var(--r-sm); }

.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
.wrap-narrow { width: min(760px, calc(100% - 2.5rem)); margin-inline: auto; }

/* ═══════════════════════════════ ヘッダー */
.site-header {
  background: rgba(255,255,255,.88); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-2);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner { display: flex; align-items: center; gap: 2rem; min-height: 66px; }
.brand { display: flex; align-items: baseline; gap: .7rem; text-decoration: none; color: inherit; }
.brand__mark {
  font-family: var(--mincho); font-size: var(--t-title); letter-spacing: .14em;
  white-space: nowrap; font-weight: 600;
}
.brand__mark::first-letter { color: var(--accent); }
.brand__tag { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
.nav a {
  font-size: var(--t-body); text-decoration: none; color: var(--ink-2);
  padding: .4rem 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .25s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a.is-active::after { right: 0; }
.nav a.is-active { color: var(--ink); font-weight: 600; }
.nav__sep { width: 1px; height: 20px; background: var(--line); }

/* ═══════════════════════════════ ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--gothic); font-size: var(--t-body); font-weight: 600; line-height: 1;
  padding: .85em 1.7em; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: #fff;
  text-decoration: none; transition: background .18s, box-shadow .22s, transform .12s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 18px -10px rgba(140,43,30,.5); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--deep { background: var(--deep); border-color: var(--deep); }
.btn--deep:hover { background: var(--deep-2); border-color: var(--deep-2);
  box-shadow: 0 6px 18px -8px rgba(27,58,92,.5); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-bg); color: var(--accent-ink); box-shadow: none; }
.btn--quiet { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink);
  box-shadow: none; }
.btn--sm { font-size: var(--t-caption); padding: .6em 1.15em; }
.btn--block { width: 100%; }
.btn--danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }

/* ═══════════════════════════════ ヒーロー */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__eyebrow {
  display: inline-block; font-size: var(--t-caption); letter-spacing: .18em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 99px; padding: .3em 1em;
  margin: 0 0 1.3rem;
}
.hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.3; margin: 0 0 1.3rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lead { font-size: var(--t-body); color: var(--ink-2); max-width: 32em; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }

.hero__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem 1.4rem 1.3rem; box-shadow: var(--sh-2);
}
.hero__card-cap {
  font-size: var(--t-micro); letter-spacing: .2em; color: var(--ink-3);
  text-align: center; margin-bottom: 1rem;
}
.hero__card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.hero__cell { text-align: center; border-radius: var(--r-sm); padding: .7rem .2rem; }
.hero__cell-label { font-size: var(--t-micro); color: var(--ink-3); margin-bottom: .45rem; }
.hero__cell-gz { font-family: var(--kanshi); font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2; font-weight: var(--w-decl); letter-spacing: .02em; }

/* ═══════════════════════════════ セクション */
.section { padding: clamp(2.2rem, 5vw, 4rem) 0; }
.section--rule { border-top: 1px solid var(--line-2); }
.section__head { margin-bottom: 1.8rem; }
.section__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: .04em; }
.section__note { color: var(--ink-2); font-size: var(--t-body); margin: .7rem 0 0; max-width: 46em; }

.block { margin-bottom: 1.4rem; }
.block__head {
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  margin-bottom: .9rem;
}
.block__title {
  font-size: var(--t-title); letter-spacing: .06em; position: relative; padding-left: .8rem;
}
.block__title::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em; width: 3px;
  background: var(--ink); border-radius: 1px;
}
.block__sub { font-size: var(--t-caption); color: var(--ink-3); }

/* ═══════════════════════════════ カード */
.card {
  background: var(--surface); border-radius: var(--r);
  padding: var(--s5); box-shadow: var(--sh-1);
}
.card--pad-lg { padding: clamp(1.4rem, 3vw, 2.2rem); }
.card--flush { padding: 0; overflow: hidden; }
.cards { display: grid; gap: 1.1rem; }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.feature { position: relative; padding-top: 2.4rem; }
.feature__num {
  position: absolute; top: 0; left: 0; font-family: var(--mincho);
  font-size: var(--t-headline); color: var(--accent); opacity: .55;
}
.feature h3 { font-size: var(--t-title); margin-bottom: .5rem; }
.feature p { color: var(--ink-2); font-size: var(--t-body); margin: 0; }

/* ═══════════════════════════════ フォーム */
.form-grid { display: grid; gap: 1.4rem; }
.field__label { display: block; font-size: var(--t-body); color: var(--ink); margin-bottom: .5rem; font-weight: 600; }
.field__label .req { color: var(--accent); font-size: var(--t-micro); margin-left: .5em; font-weight: 400; }
.field__help { font-size: var(--t-caption); color: var(--ink-3); margin-top: .45rem; line-height: 1.7; }
.field__error { font-size: var(--t-caption); color: var(--bad); margin-top: .4rem; font-weight: 600; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%; font-family: var(--gothic); font-size: var(--t-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .72em .85em; line-height: 1.5; transition: border-color .16s, box-shadow .16s;
  min-height: 44px;
}
select { appearance: none; padding-right: 2.1em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2386868f'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8em center; }
textarea { line-height: 1.8; resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--deep); box-shadow: 0 0 0 3px rgba(27,58,92,.12);
}
input::placeholder, textarea::placeholder { color: #b6b6bd; }

.radio-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.radio-row > div { display: flex; flex-wrap: wrap; gap: .55rem; }
.radio-row > div > div { display: contents; }
.radio-row label {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .5em 1.1em; font-size: var(--t-body); cursor: pointer; background: var(--surface);
  transition: border-color .16s, background .16s;
}
.radio-row label:hover { border-color: var(--deep); background: var(--surface-2); }
.radio-row input[type="radio"] { accent-color: var(--accent); margin: 0; }
.check { display: flex; align-items: flex-start; gap: .6em; font-size: var(--t-body); cursor: pointer;
  line-height: 1.6; padding: .35rem 0; }
.check input { accent-color: var(--accent); margin-top: .35em; flex: none; width: 17px; height: 17px; }
.inline-fields { display: flex; gap: .55rem; align-items: end; flex-wrap: wrap; }
.inline-fields > * { flex: 1 1 0; min-width: 86px; }

fieldset.box { border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem 1.4rem; margin: 0; }
fieldset.box legend { font-family: var(--mincho); font-size: var(--t-body); letter-spacing: .08em;
  padding: 0 .55em; color: var(--ink-2); }

details.advanced { border-top: 1px solid var(--line-2); padding-top: 1rem; }
details.advanced > summary { cursor: pointer; font-size: var(--t-body); color: var(--deep);
  list-style: none; display: flex; align-items: center; gap: .5em; min-height: 40px; }
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before { content: "＋"; font-size: .78em; }
details.advanced[open] > summary::before { content: "−"; }
details.advanced > div { padding-top: 1.1rem; }

/* ═══════════════════════════════ 五行の色（この 5 つが画面で唯一の彩色）
   十干・十二支・十神・納音・五行名——干支に関わる文字はすべてこの 5 色で塗る。
   色は装飾ではなく «その字がどの五行か» という情報そのもの。 */
.wx-moku { color: var(--moku); }
.wx-ka   { color: var(--ka); }
.wx-do   { color: var(--do); }
.wx-gon  { color: var(--gon); }
.wx-sui  { color: var(--sui); }

/* 地色つきで示したいとき（チップ・見出しの印など） */
.wxbg-moku { background: var(--moku-bg); color: var(--moku); }
.wxbg-ka   { background: var(--ka-bg);   color: var(--ka); }
.wxbg-do   { background: var(--do-bg);   color: var(--do); }
.wxbg-gon  { background: var(--gon-bg);  color: var(--gon); }
.wxbg-sui  { background: var(--sui-bg);  color: var(--sui); }

/* ═══════════════════════════════ 命式表
   八つの干支が主役。罫線では区切らず、日柱だけ地色を敷いて視線を集める。 */
.meishiki { background: var(--surface); border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-2); }
.meishiki__head {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5) var(--s3);
}
.meishiki__title { font-size: var(--t-title); letter-spacing: .22em; font-family: var(--mincho);
  font-weight: var(--w-emph); }
.meishiki__sub { font-size: var(--t-caption); color: var(--ink-2); }
.meishiki__note { font-size: var(--t-micro); color: var(--ink-3); margin-left: auto; }

.mtable { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mtable th, .mtable td { padding: var(--s2) var(--s1); text-align: center; vertical-align: middle;
  border: 0; }
.mtable th.rowhead {
  width: 5rem; text-align: right; padding-right: var(--s4);
  font-weight: var(--w-read); font-size: var(--t-micro); color: var(--ink-3);
  letter-spacing: .08em; white-space: nowrap;
}
/* 日柱の列だけ、上から下まで一本の帯として浮かせる */
.mtable td.is-day { background: var(--surface-2); }
.mtable tbody tr:first-child td.is-day { border-radius: var(--r) var(--r) 0 0; }
.mtable tbody tr:last-child td.is-day { border-radius: 0 0 var(--r) var(--r); }
.mtable thead th.colhead {
  font-family: var(--mincho); font-size: var(--t-caption); letter-spacing: .16em;
  color: var(--ink-3); font-weight: var(--w-read); padding: var(--s2) var(--s1) var(--s3);
}
.mtable thead th.colhead.is-day { color: var(--accent); font-weight: var(--w-emph); }
.mtable tbody tr + tr td, .mtable tbody tr + tr th { padding-top: var(--s3); }

/* 干支そのもの。ここが画面でいちばん大きい */
.gzbox { display: block; }
.gzbox .ch {
  font-family: var(--kanshi); font-size: var(--t-display); line-height: 1;
  display: block; font-weight: var(--w-decl); letter-spacing: .02em;
}
.gzbox .meta { display: block; font-size: var(--t-micro); margin-top: var(--s1);
  color: var(--ink-3); letter-spacing: .04em; }
.gzbox.moku .ch { color: var(--moku); } .gzbox.ka .ch  { color: var(--ka); }
.gzbox.do .ch   { color: var(--do); }   .gzbox.gon .ch { color: var(--gon); }
.gzbox.sui .ch  { color: var(--sui); }

.star { font-family: var(--mincho); font-size: var(--t-body); color: var(--ink-2); }
.star--day {
  color: var(--accent); font-weight: var(--w-emph);
  font-size: var(--t-body); letter-spacing: .12em;
}
.hide-list { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-caption); }
.hide-list b { font-family: var(--kanshi); font-weight: var(--w-decl); font-size: var(--t-body);
  margin-right: .2em; }
.hide-list .role { font-size: var(--t-micro); color: var(--ink-3); }
.hide-list .hg { color: var(--ink-2); }
.small-cell { font-size: var(--t-caption); color: var(--ink-2);
  font-weight: var(--w-read); }
.stars { color: var(--gon); font-size: var(--t-micro); letter-spacing: .1em; display: block; }
.stars .off { color: var(--line); }

.sp-star { font-size: var(--t-micro); line-height: 1.6; display: block; color: var(--ink-2); }
.sp-star.good { color: var(--good); }
.sp-star.bad  { color: var(--bad); }

@media (prefers-reduced-motion: no-preference) {
  .mtable tbody td > * { animation: rise .5s cubic-bezier(.2,.7,.3,1) backwards; }
  .mtable tbody td:nth-child(2) > * { animation-delay: .03s; }
  .mtable tbody td:nth-child(3) > * { animation-delay: .08s; }
  .mtable tbody td:nth-child(4) > * { animation-delay: .13s; }
  .mtable tbody td:nth-child(5) > * { animation-delay: .18s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════ 判定パネル */
.verdict {
  display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.5rem;
  align-items: center; padding: 1.2rem 1.4rem;
  border-radius: var(--r); border: 1px solid var(--line); background: var(--surface);
}
.verdict__badge {
  font-family: var(--mincho); font-size: var(--t-headline); letter-spacing: .08em;
  padding: .55rem 1.3rem; border-radius: var(--r-sm); white-space: nowrap; text-align: center;
}
.verdict__badge small { display: block; font-family: var(--gothic); font-size: var(--t-micro);
  letter-spacing: .12em; opacity: .8; margin-top: .1rem; }
.verdict__badge.strong { background: var(--ka-bg); color: var(--ka); border: 1px solid var(--ka-line); }
.verdict__badge.weak   { background: var(--sui-bg); color: var(--sui); border: 1px solid var(--sui-line); }
.verdict__badge.mid    { background: var(--do-bg);  color: var(--do);  border: 1px solid var(--do-line); }
.verdict__why { font-size: var(--t-body); color: var(--ink-2); }
.verdict__why strong { color: var(--ink); }

.factors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.factor {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .85rem;
  background: var(--surface);
}
.factor.is-ok { border-color: var(--moku-line); background: var(--moku-bg); }
.factor__head { display: flex; align-items: center; gap: .45rem; font-size: var(--t-body); font-weight: 600; }
.factor__mark { font-size: var(--t-body); line-height: 1; }
.factor.is-ok .factor__mark { color: var(--moku); }
.factor:not(.is-ok) .factor__mark { color: var(--ink-3); }
.factor__desc { font-size: var(--t-micro); color: var(--ink-3); margin: .25rem 0 .4rem; }
.factor__note { font-size: var(--t-caption); color: var(--ink-2); line-height: 1.6; }

/* 五行チップ */
.wxchips { display: flex; flex-wrap: wrap; gap: .4rem; }
.wxchip {
  display: inline-flex; align-items: baseline; gap: .35em; font-size: var(--t-caption);
  border-radius: var(--r-sm); padding: .3em .75em; border: 1px solid transparent;
  font-family: var(--mincho);
}
.wxchip .n { font-family: var(--gothic); font-size: var(--t-caption); opacity: .8; }
.wxchip.moku { background: var(--moku-bg); color: var(--moku); border-color: var(--moku-line); }
.wxchip.ka   { background: var(--ka-bg);   color: var(--ka);   border-color: var(--ka-line); }
.wxchip.do   { background: var(--do-bg);   color: var(--do);   border-color: var(--do-line); }
.wxchip.gon  { background: var(--gon-bg);  color: var(--gon);  border-color: var(--gon-line); }
.wxchip.sui  { background: var(--sui-bg);  color: var(--sui);  border-color: var(--sui-line); }

/* ═══════════════════════════════ 五行バランス */
.gogyo { display: grid; gap: .55rem; }
.gogyo__row { display: grid; grid-template-columns: 3.6rem 1fr 2rem; align-items: center; gap: .7rem; }
.gogyo__name { font-family: var(--mincho); font-size: var(--t-body); }
.gogyo__name small { font-family: var(--gothic); font-size: var(--t-micro); color: var(--ink-3); margin-left: .3em; }
.gogyo__track { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden;
  border: 1px solid var(--line-2); }
.gogyo__fill { height: 100%; border-radius: 99px; transform-origin: left; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .gogyo__fill { animation: grow .65s cubic-bezier(.2,.7,.3,1) backwards; }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gogyo__fill.moku { background: var(--moku); } .gogyo__fill.ka { background: var(--ka); }
.gogyo__fill.do { background: var(--do); }     .gogyo__fill.gon { background: var(--gon); }
.gogyo__fill.sui { background: var(--sui); }
.gogyo__num { font-family: var(--mincho); font-size: var(--t-body); text-align: right; color: var(--ink-2); }

/* ═══════════════════════════════ 一覧・関係 */
.rel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.rel-list li {
  display: flex; align-items: baseline; gap: .7rem; font-size: var(--t-body);
  padding: .5rem .8rem; border-radius: var(--r-sm);
  background: var(--surface-2); border-left: 3px solid var(--line);
}
.rel-list li.he    { border-left-color: var(--moku); }
.rel-list li.chong { border-left-color: var(--ka); }
.rel-list li.xing  { border-left-color: var(--accent); }
.rel-list li.hai   { border-left-color: var(--do); }
.rel-list li.ke    { border-left-color: var(--gon); }
.rel-list .rel-tag { font-family: var(--mincho); font-size: var(--t-caption); flex: none; min-width: 4.4em; }
.rel-list .rel-obj { font-family: var(--mincho); font-size: var(--t-body); }
.rel-list .rel-detail { color: var(--ink-3); font-size: var(--t-caption); margin-left: auto; text-align: right; }

.note {
  border-left: 3px solid var(--ink-3); background: var(--surface-2);
  background: var(--surface); padding: .85rem 1.05rem; border-radius: var(--r-sm);
  font-size: var(--t-body); color: var(--ink-2); line-height: 1.75;
}
.note--warn { border-left-color: var(--accent); background: var(--accent-bg); }
.note--info { border-left-color: var(--do); background: var(--do-bg); }
.note__title { font-family: var(--mincho); color: var(--ink); font-size: var(--t-body);
  display: block; margin-bottom: .25rem; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: var(--t-body); }
.kv dt { color: var(--ink-3); white-space: nowrap; }
.kv dd { margin: 0; font-family: var(--mincho); }
.kv dd.plain { font-family: var(--gothic); font-size: var(--t-caption); }

.srcline { font-size: var(--t-micro); color: var(--ink-3); margin-top: .7rem; }
.srcline::before { content: "典拠："; }

/* ═══════════════════════════════ 大運・流年 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--t-body); min-width: 660px; }
.dtable th, .dtable td { padding: .55rem .7rem; border-bottom: 1px solid var(--line-2); text-align: left; }
.dtable thead th { font-size: var(--t-caption); color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.dtable tbody tr:hover { background: var(--surface-2); }
.dtable .gz-cell { font-family: var(--kanshi); font-size: var(--t-title);
  white-space: nowrap; font-weight: var(--w-decl); }
.dtable .age { font-family: var(--mincho); color: var(--ink-2); white-space: nowrap; }
.dtable .rel-inline { display: flex; flex-wrap: wrap; gap: .28rem; }
.chip { font-size: var(--t-micro); padding: .16em .6em; border-radius: var(--r-sm); white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.chip.he    { background: var(--moku-bg); color: var(--moku); border-color: var(--moku-line); }
.chip.chong { background: var(--ka-bg);   color: var(--ka);   border-color: var(--ka-line); }
.chip.xing  { background: var(--accent-bg); color: var(--accent); border-color: #f0ccd3; }
.chip.hai   { background: var(--do-bg);   color: var(--do);   border-color: var(--do-line); }
.chip.ke    { background: var(--gon-bg);  color: var(--gon);  border-color: var(--gon-line); }


/* ═══════════════════════════════ 大運・流年・流月
   大運を選ぶと下の流年が入れ替わる。切り替えは JavaScript ではなく
   ラジオボタンと兄弟セレクタで行う（スクリプトが動かない環境でも操作できる）。 */
.unsei-tabs { display: block; }
.un-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

.unsei-band { display: flex; align-items: stretch; }
.unsei-band + .unsei-band { border-top: 1px solid var(--line-2); }
.unsei-band--sub { background: var(--surface-2); }
.unsei-band__label {
  flex: none; width: 4.2rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-family: var(--mincho); font-size: var(--t-caption); letter-spacing: .12em;
  color: var(--ink-3); font-weight: var(--w-read);
}
.unsei-band__label small { font-family: var(--gothic); font-size: var(--t-micro);
  color: var(--ink-3); letter-spacing: 0; }
.unsei-scroll { flex: 1; min-width: 0; display: flex; overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.unsei-scroll::-webkit-scrollbar { height: 5px; }
.unsei-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* 大運のマス（label） */
.un-cell {
  flex: none; width: 5.2rem; display: grid; justify-items: center; gap: 1px;
  padding: var(--s3) var(--s1) var(--s3); cursor: pointer;
  scroll-snap-align: start; border-radius: var(--r);
  transition: background .16s;
}
.un-cell:hover { background: var(--surface-2); }
.unsei-band--sub .un-cell:hover { background: var(--surface); }
.un-cell__year { font-size: var(--t-micro); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.un-cell__age  { font-size: var(--t-micro); color: var(--ink-3); }
.un-cell__gz { display: grid; gap: 1px; margin-top: var(--s1); }
.un-cell__ch { font-family: var(--kanshi); font-size: var(--t-title); line-height: 1.12; white-space: nowrap; font-weight: var(--w-decl); }
.un-cell__god, .ln-cell__ch i, .lm-cell__ch i {
  font-family: var(--gothic); font-style: normal; font-size: var(--t-micro);
  color: var(--ink-3); margin-left: .12em; vertical-align: super;
}
.un-cell__pre { font-family: var(--mincho); font-size: var(--t-body); color: var(--ink-3); }

/* 流年のマス */
.ln-group { display: none; }
.ln-cell {
  flex: none; width: 4.4rem; display: grid; justify-items: center; gap: 1px;
  padding: var(--s3) var(--s1); text-decoration: none; color: inherit;
  scroll-snap-align: start; border-radius: var(--r); transition: background .16s;
}
.ln-cell:hover { background: var(--surface); color: inherit; }
.ln-cell.is-focus { background: var(--surface); box-shadow: inset 0 -2px 0 var(--ink); }
.ln-cell__year { font-size: var(--t-micro); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ln-cell__age  { font-size: var(--t-micro); color: var(--ink-3); }
.ln-cell__gz { display: grid; gap: 1px; margin-top: var(--s1); }
.ln-cell__ch { font-family: var(--kanshi); font-size: var(--t-body); line-height: 1.12; white-space: nowrap; font-weight: var(--w-decl); }
.ln-cell__xiao { font-family: var(--mincho); font-size: var(--t-micro); color: var(--ink-3); }

/* 流月のマス */
.lm-cell { flex: none; width: 4.2rem; display: grid; justify-items: center; gap: 1px;
  padding: var(--s3) var(--s1); }
.lm-cell__jie { font-size: var(--t-micro); color: var(--ink-2); white-space: nowrap; }
.lm-cell__at  { font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lm-cell__gz { display: grid; gap: 1px; margin-top: var(--s1); }
.lm-cell__ch { font-family: var(--kanshi); font-size: var(--t-body); line-height: 1.12; white-space: nowrap; font-weight: var(--w-decl); }

.unsei-hint { font-size: var(--t-micro); color: var(--ink-3); margin: 0;
  padding: var(--s3) var(--s5); border-top: 1px solid var(--line-2); }

/* 選択中の大運を立て、その流年だけを見せる（ラジオの兄弟セレクタ） */
#un-0:checked ~ .unsei-body .un-cell[for="un-0"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-0:checked ~ .unsei-body .ln-group--0 { display: flex; }
#un-1:checked ~ .unsei-body .un-cell[for="un-1"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-1:checked ~ .unsei-body .ln-group--1 { display: flex; }
#un-2:checked ~ .unsei-body .un-cell[for="un-2"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-2:checked ~ .unsei-body .ln-group--2 { display: flex; }
#un-3:checked ~ .unsei-body .un-cell[for="un-3"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-3:checked ~ .unsei-body .ln-group--3 { display: flex; }
#un-4:checked ~ .unsei-body .un-cell[for="un-4"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-4:checked ~ .unsei-body .ln-group--4 { display: flex; }
#un-5:checked ~ .unsei-body .un-cell[for="un-5"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-5:checked ~ .unsei-body .ln-group--5 { display: flex; }
#un-6:checked ~ .unsei-body .un-cell[for="un-6"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-6:checked ~ .unsei-body .ln-group--6 { display: flex; }
#un-7:checked ~ .unsei-body .un-cell[for="un-7"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-7:checked ~ .unsei-body .ln-group--7 { display: flex; }
#un-8:checked ~ .unsei-body .un-cell[for="un-8"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-8:checked ~ .unsei-body .ln-group--8 { display: flex; }
#un-9:checked ~ .unsei-body .un-cell[for="un-9"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-9:checked ~ .unsei-body .ln-group--9 { display: flex; }
#un-10:checked ~ .unsei-body .un-cell[for="un-10"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-10:checked ~ .unsei-body .ln-group--10 { display: flex; }
#un-11:checked ~ .unsei-body .un-cell[for="un-11"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-11:checked ~ .unsei-body .ln-group--11 { display: flex; }

.un-radio:focus-visible ~ .unsei-body .un-cell[for="un-0"] { outline: 2px solid var(--ink); outline-offset: -2px; }

@media (max-width: 720px) {
  .unsei-band__label { width: 3rem; font-size: var(--t-micro); }
  .un-cell { width: 4.4rem; }
  .ln-cell { width: 4rem; }
  .lm-cell { width: 3.9rem; }
}

/* ═══════════════════════════════ バッジ */
.badge { display: inline-flex; align-items: center; font-size: var(--t-micro); letter-spacing: .06em;
  padding: .3em .8em; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.badge--public { color: var(--moku); background: var(--moku-bg); border-color: var(--moku-line); }
.badge--member { color: var(--deep); background: var(--sui-bg); border-color: var(--sui-line); }
.badge--paid   { color: var(--accent); background: var(--accent-bg); border-color: #f0ccd3; }
.badge--owned  { color: #fff; background: var(--moku); border-color: var(--moku); }
.badge--good { color: var(--good); background: var(--good-bg); border-color: var(--moku-line); }
.badge--bad  { color: var(--bad);  background: var(--bad-bg);  border-color: var(--ka-line); }
.badge--mid  { color: var(--mid);  background: var(--mid-bg);  border-color: var(--do-line); }

/* ═══════════════════════════════ 講座 */
.course-card { display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: transform .2s, box-shadow .22s; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.course-card__cover { aspect-ratio: 16/9; background: var(--surface-2); display: grid;
  place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.course-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.course-card__cover .glyph { font-family: var(--mincho); font-size: var(--t-display); color: var(--line); letter-spacing: .25em; }
.course-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.course-card__title { font-size: var(--t-title); line-height: 1.5; }
.course-card__title a { text-decoration: none; color: inherit; }
.course-card__title a:hover { color: var(--accent); }
.course-card__meta { font-size: var(--t-caption); color: var(--ink-3); display: flex; gap: .85rem; flex-wrap: wrap; }
.course-card__desc { font-size: var(--t-body); color: var(--ink-2); margin: 0; }
.course-card__foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: center; gap: .8rem; }
.price { font-family: var(--mincho); font-size: var(--t-title); }
.price small { font-size: var(--t-micro); color: var(--ink-3); margin-left: .25em; }

.lesson-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.lesson-item { display: flex; align-items: center; gap: .9rem; padding: .9rem .3rem;
  border-bottom: 1px solid var(--line-2); }
.lesson-item__no { font-family: var(--mincho); font-size: var(--t-body); color: var(--ink-3);
  width: 2rem; flex: none; text-align: right; }
.lesson-item__body { flex: 1; min-width: 0; }
.lesson-item__title { font-size: var(--t-body); }
.lesson-item__title a { text-decoration: none; color: inherit; }
.lesson-item__title a:hover { color: var(--accent); }
.lesson-item__desc { font-size: var(--t-caption); color: var(--ink-3); margin: .15rem 0 0; }
.lesson-item__right { display: flex; align-items: center; gap: .7rem; flex: none; }
.lesson-item.is-locked .lesson-item__title { color: var(--ink-3); }
.dur { font-family: var(--mincho); font-size: var(--t-caption); color: var(--ink-3); }

.player-wrap { background: #101018; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 16/9; display: grid; place-items: center; }
.player-wrap video, .player-wrap iframe { width: 100%; height: 100%; display: block; border: 0; }
.locked-panel { text-align: center; color: #c9c9d2; padding: 2rem; max-width: 30rem; }
.locked-panel h3 { color: #fff; font-size: var(--t-title); margin-bottom: .6rem; }
.locked-panel p { font-size: var(--t-body); color: #9a9aa6; }

.side-lessons { list-style: none; margin: 0; padding: 0; }
.side-lessons li { border-bottom: 1px solid var(--line-2); }
.side-lessons a { display: flex; gap: .65rem; padding: .7rem .2rem; text-decoration: none;
  color: var(--ink-2); font-size: var(--t-body); align-items: baseline; }
.side-lessons a:hover { color: var(--ink); }
.side-lessons li.is-current a { color: var(--accent); font-weight: 600; }
.side-lessons .n { font-family: var(--mincho); color: var(--ink-3); flex: none; }

/* ═══════════════════════════════ レイアウト補助 */
.split { display: grid; grid-template-columns: 1fr 330px; gap: 2rem; align-items: start; }
.split--wide-left { grid-template-columns: 1fr 290px; }
.stack { display: grid; gap: 1.2rem; }
.stack--lg { gap: 2.2rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.muted { color: var(--ink-3); }
.tiny { font-size: var(--t-caption); }
.center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }

.messages { list-style: none; margin: 0; padding: 1rem 0 0; display: grid; gap: .55rem; }
.messages li { padding: .75rem 1.1rem; border-radius: var(--r-sm); font-size: var(--t-body);
  background: var(--surface); border-left: 3px solid var(--ink-3); background: var(--surface-2); }
.messages li.success { border-left-color: var(--good); }
.messages li.error   { border-left-color: var(--bad); }
.messages li.warning { border-left-color: var(--mid); }

.empty { text-align: center; padding: 3rem 1rem; color: var(--ink-3);
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface); }
.empty__glyph { font-family: var(--mincho); font-size: var(--t-display); color: var(--line); display: block; margin-bottom: .7rem; }

.chart-row { display: flex; align-items: center; gap: 1.1rem; padding: .95rem .2rem;
  border-bottom: 1px solid var(--line-2); }
.chart-row__name { font-size: var(--t-body); }
.chart-row__name a { text-decoration: none; color: inherit; }
.chart-row__name a:hover { color: var(--accent); }
.chart-row__meta { font-size: var(--t-caption); color: var(--ink-3); }
.chart-row__actions { margin-left: auto; display: flex; gap: .45rem; flex: none; }
.rel-pill { font-size: var(--t-micro); border: 1px solid var(--line); border-radius: 99px;
  padding: .16em .7em; color: var(--ink-3); }

.prose { max-width: 44em; }
.prose h2 { font-size: var(--t-title); margin: 2.2rem 0 .8rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line-2); }
.prose h3 { font-size: var(--t-body); margin: 1.5rem 0 .5rem; }
.prose p, .prose li { font-size: var(--t-body); color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: .35em; }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.legal-table th, .legal-table td { border: 1px solid var(--line); padding: .75rem .95rem;
  text-align: left; vertical-align: top; }
.legal-table th { background: var(--surface-2); width: 12rem; font-weight: 600; font-size: var(--t-body); }

.site-footer { border-top: 1px solid var(--line-2); margin-top: 3.5rem;
  padding: 2.4rem 0 2.8rem; background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.footer-grid h4 { font-size: var(--t-caption); letter-spacing: .1em; color: var(--ink-3); margin-bottom: .8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.footer-grid a { font-size: var(--t-caption); color: var(--ink-2); text-decoration: none; }
.footer-grid a:hover { color: var(--accent); }
.footer-note { font-size: var(--t-caption); color: var(--ink-3); line-height: 1.85; margin-top: 1.8rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line-2); }

.dev-flag { background: var(--do-bg); border-bottom: 1px solid var(--do-line); color: var(--mid);
  font-size: var(--t-caption); padding: .45rem 0; text-align: center; }

/* ═══════════════════════════════ レスポンシブ */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .split, .split--wide-left { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .verdict { grid-template-columns: 1fr; text-align: center; }
  .verdict__badge { justify-self: center; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .wrap, .wrap-narrow { width: calc(100% - 1.8rem); }
  .site-header__inner { flex-wrap: wrap; gap: .6rem 1rem; padding: .6rem 0; }
  .brand__tag { display: none; }
  .nav { margin-left: 0; width: 100%; gap: 1rem; overflow-x: auto; padding-bottom: .2rem; }
  .nav__sep { display: none; }
  .mtable th.rowhead { width: 3.6rem; font-size: var(--t-micro); padding-right: .4rem; }
  .mtable th, .mtable td { padding: .38rem .15rem; }
  .gzbox .ch { font-size: var(--t-headline); }
  .footer-grid { grid-template-columns: 1fr; }
  .rel-list li { flex-wrap: wrap; }
  .rel-list .rel-detail { margin-left: 0; width: 100%; text-align: left; }
  .chart-row { flex-wrap: wrap; }
  .chart-row__actions { margin-left: 0; width: 100%; }
}

@media print {
  .site-header, .site-footer, .btn, .no-print, .dev-flag { display: none !important; }
  body { background: #fff; }
  .card, .meishiki { box-shadow: none; }
}

/* ═══════════════════════════════ 復旧分
   命式表を作り直した際に巻き添えで消してしまった規則を戻したもの。
   字送りは新しい 6 段階に揃えている。 */
/* 五行の凡例 */
.wxlegend { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

.wxlegend .lg {
  display: inline-flex; align-items: center; gap: .35em; font-size: var(--t-caption);
  padding: .22em .7em; border-radius: 99px; border: 1px solid transparent;
  font-family: var(--mincho);
}

.wxlegend .lg small { font-family: var(--gothic); font-size: var(--t-micro); opacity: .85; }

.wxlegend .lg.moku { background: var(--moku-bg); color: var(--moku); border-color: var(--moku-line); }

.wxlegend .lg.ka   { background: var(--ka-bg);   color: var(--ka);   border-color: var(--ka-line); }

.wxlegend .lg.do   { background: var(--do-bg);   color: var(--do);   border-color: var(--do-line); }

.wxlegend .lg.gon  { background: var(--gon-bg);  color: var(--gon);  border-color: var(--gon-line); }

.wxlegend .lg.sui  { background: var(--sui-bg);  color: var(--sui);  border-color: var(--sui-line); }

.un-cell.is-pre { opacity: .7; }

.ln-group.is-shown { display: flex; }

/* ── 講座式の数え方 ───────────────────── */
.counters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }

.counter {
  display: grid; grid-template-rows: auto auto auto auto; justify-items: center;
  gap: .1rem; padding: .55rem .7rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); min-width: 4.1rem;
}

.counter.is-mikata   { border-color: var(--moku-line); background: var(--moku-bg); }

.counter.is-kousetsu { border-color: var(--do-line);   background: var(--do-bg); }

.counter__ch { font-family: var(--mincho); font-size: var(--t-headline); line-height: 1.1; }

.counter__wx { font-size: var(--t-micro); color: var(--ink-3); }

.counter__god { font-size: var(--t-micro); font-weight: 600; color: var(--ink-2); }

.counter__where { font-size: var(--t-micro); color: var(--ink-3); }

.tally-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }

.tally {
  display: flex; align-items: baseline; gap: .55rem; padding: .55rem 1.1rem;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
}

.tally__n { font-family: var(--mincho); font-size: var(--t-headline); line-height: 1; }

.tally__label { font-size: var(--t-caption); color: var(--ink-2); }

.tally__label small { display: block; font-size: var(--t-micro); color: var(--ink-3); }

.tally.is-mikata { border-color: var(--moku-line); background: var(--moku-bg); }

.tally.is-mikata .tally__n { color: var(--moku); }

.tally.is-kousetsu { border-color: var(--do-line); background: var(--do-bg); }

.tally.is-kousetsu .tally__n { color: var(--do); }

.tally.is-zai { border-color: var(--ka-line); background: var(--ka-bg); }

.tally.is-zai .tally__n { color: var(--ka); }

.rule-lines { display: grid; gap: .4rem; margin-bottom: 1.1rem; }

.rule {
  font-size: var(--t-body); color: var(--ink-3); padding: .45rem .8rem;
  border-radius: var(--r-sm); background: var(--surface-2); border-left: 3px solid var(--line);
}

.rule.is-on { color: var(--ink); background: var(--surface); border-left-color: var(--accent); }

.rule b { font-family: var(--mincho); }

.type-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem;
  max-width: 15rem; margin-bottom: .9rem;
}

.type-cell {
  text-align: center; padding: .6rem .3rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); opacity: .45;
}

.type-cell.is-on {
  opacity: 1; background: var(--accent-bg); border-color: var(--accent); color: var(--accent);
}

.type-cell__k { font-family: var(--mincho); font-size: var(--t-title); }

.type-result { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }

.type-badge {
  font-family: var(--mincho); font-size: var(--t-headline); padding: .4rem 1.1rem;
  border-radius: var(--r-sm); background: var(--accent); color: #fff; white-space: nowrap;
}

.type-result__label { font-family: var(--mincho); font-size: var(--t-title); }

.sign-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.sign-list li {
  font-size: var(--t-body); color: var(--ink-2); padding-left: 1.2em; position: relative;
}

.sign-list li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent);
}

/* 外格の判定 */
.gk-verdict {
  display: inline-flex; align-items: baseline; gap: .6rem; font-family: var(--mincho);
  font-size: var(--t-title); padding: .5rem 1.2rem; border-radius: var(--r-sm);
  border: 1px solid; letter-spacing: .04em;
}

.gk-verdict small { font-family: var(--gothic); font-size: var(--t-micro); letter-spacing: .06em; }

.gk-verdict.true   { background: var(--ka-bg);   color: var(--ka);   border-color: var(--ka-line); }

.gk-verdict.pseudo { background: var(--do-bg);   color: var(--do);   border-color: var(--do-line); }

.gk-verdict.false  { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }

.gk-verdict.ok     { background: var(--moku-bg); color: var(--moku); border-color: var(--moku-line); }

.three-way { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .9rem; }

.three-way .tw {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .6rem .75rem;
  background: var(--surface-2); opacity: .55;
}

.three-way .tw.is-on { opacity: 1; background: var(--surface); border-color: var(--ink-3); }

.three-way .tw h5 { font-family: var(--mincho); font-size: var(--t-body); margin: 0 0 .25rem; }

.three-way .tw p { font-size: var(--t-micro); color: var(--ink-2); margin: 0; line-height: 1.6; }

/* ═══════════════════════════════ 五行の色（最終決定）
   «干支と通変星は必ず五行の色で出す» はサイトの約束なので、
   部品側の色指定（.hide-list .hg など）に負けないよう詳細度を上げ、
   スタイルシートのいちばん最後に置く。ここを動かすと全体の色が変わる。 */
.wx-moku.wx-moku { color: var(--moku); }
.wx-ka.wx-ka     { color: var(--ka); }
.wx-do.wx-do     { color: var(--do); }
.wx-gon.wx-gon   { color: var(--gon); }
.wx-sui.wx-sui   { color: var(--sui); }

/* ═══════════════════════════════ 細く見えないための調整
   小さい字と淡い字は、同じ太さでも細く見える。級が下がるほど太さを足す。 */
.tiny, .field__help, .srcline, .unsei-hint, .block__sub,
.un-cell__year, .un-cell__age, .ln-cell__year, .ln-cell__age,
.lm-cell__jie, .lm-cell__at, .hide-list .role, .gzbox .meta,
.course-card__meta, .chart-row__meta, .footer-grid a {
  font-weight: var(--w-read);
}
.muted { color: var(--ink-3); font-weight: var(--w-read); }
.star { font-weight: var(--w-emph); }
.hide-list .hg { font-weight: var(--w-read); }
.un-cell__god, .ln-cell__ch i, .lm-cell__ch i { font-weight: var(--w-emph); }
.rowhead, .colhead { font-weight: var(--w-emph); }
.kv dd { font-weight: var(--w-emph); }
.dtable thead th { font-weight: var(--w-emph); }
.legal-table th { font-weight: var(--w-emph); }
.verdict__badge { font-weight: var(--w-decl); }
.wxchip { font-weight: var(--w-emph); }
.badge { font-weight: var(--w-emph); }
.chip { font-weight: var(--w-read); }

/* ═══════════════════════════════ 性別
   大運が順に進むか逆に進むかは性別で決まる。命式を読むうえで欠かせない情報なので、
   日付の中に紛れないよう、独立した印として見せる。 */
.sex {
  display: inline-flex; align-items: center;
  font-size: var(--t-caption); font-weight: var(--w-emph);
  padding: .15em .7em; border-radius: 99px; letter-spacing: .08em;
  white-space: nowrap;
}
.sex--male   { background: var(--sui-bg); color: var(--sui); }
.sex--female { background: var(--ka-bg);  color: var(--ka); }
.kv dd .sex { font-family: var(--gothic); }