@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:not(.btn) {
  font-size: var(--t-body); text-decoration: none; color: var(--ink-2);
  padding: .4rem 0; position: relative; white-space: nowrap;
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .25s ease;
}
.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after, .nav a.is-active::after { right: 0; }
.nav a.is-active:not(.btn) { color: var(--ink); font-weight: 600; }
/* ログアウトは POST で送るのでボタンだが、見た目は他のリンクとそろえる */
.nav__form { display: contents; }
.nav__link {
  font: inherit; font-size: var(--t-body); color: var(--ink-2); background: none; border: 0;
  padding: .4rem 0; margin: 0; cursor: pointer; position: relative; white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .25s ease;
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { right: 0; }
.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; }

/* ── 折りたたみ区画（鑑定結果）
   計算したものはすべて出す。ただし初めて見る人には一度に多すぎるので、
   命式表・運勢・四つの型だけを開いたままにし、判定の詳細は畳んでおく。
   «計算していない» と «畳んである» は別物なので、見出しは常に見えている。 */
details.fold { margin-bottom: 1.4rem; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .2rem 1rem; padding: .5rem 0;
  border-bottom: 1px solid var(--line-2); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "＋"; margin-left: auto; padding-left: .6rem;
  color: var(--ink-3); font-size: .85em; line-height: 1.6; }
details.fold[open] > summary::after { content: "−"; }
details.fold > summary:hover .block__title { color: var(--deep); }
details.fold > summary .block__title,
details.fold > summary .block__sub { margin: 0; }
.fold__body { padding-top: 1.1rem; }

/* カードの中を畳む場合（格局・喜神忌神・調候用神・五行のバランス・通根透干）。
   カードの枠はそのまま、中身だけを開閉する。 */
details.fold--card { margin-bottom: 0; }
details.fold--card > summary { border-bottom: none; padding: 0; }
details.fold--card > summary::after { line-height: 1.4; }
details.fold--card .fold__body { padding-top: .8rem; }

/* 見出しの横に置く «確定／流派選択／参考» の札。
   五行の色は «その字がどの五行か» 専用なので使わず、墨一色の濃淡と線の種類で分ける。
     確定     … 塗り（一つに決まる）
     流派選択 … 実線の枠（説を一つ選んでいる）
     参考     … 点線の枠（判断を含む） */
.tags { display: inline-flex; gap: .3rem; align-items: center; }
.tag { display: inline-flex; align-items: center; font-size: var(--t-micro); line-height: 1;
  letter-spacing: .04em; padding: .22rem .45rem; border-radius: var(--r); border: 1px solid;
  white-space: nowrap; font-weight: var(--w-read); font-family: var(--gothic); }
.tag--fixed  { color: var(--surface); background: var(--ink-2); border-color: var(--ink-2); }
.tag--school { color: var(--ink-2); background: transparent; border-color: var(--ink-3); }
.tag--ref    { color: var(--ink-3); background: transparent; border-color: var(--ink-3);
  border-style: dashed; }
/* 畳んだ見出しのままでも «開いて確かめてほしい» ことだけは伝える印 */
.fold__flag { font-size: var(--t-micro); color: var(--accent); font-weight: var(--w-emph);
  letter-spacing: .04em; white-space: nowrap; }
.fold__flag::before { content: "● "; font-size: .8em; }

.tag-legend { display: grid; gap: .35rem; margin: .9rem 0 0; padding: .8rem 1rem;
  background: var(--surface); border-radius: var(--r); font-size: var(--t-caption);
  color: var(--ink-2); }
.tag-legend__row { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem;
  align-items: baseline; }
.tag-legend__row .tag { justify-self: start; }
@media (max-width: 480px) {
  .tag-legend__row { grid-template-columns: 1fr; gap: .25rem; }
}

/* 表の見方（命式表の下）。項目名と説明を二段に */
.howto { display: grid; gap: .9rem; }
.howto dt { font-weight: var(--w-emph); font-size: var(--t-caption); color: var(--ink);
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.howto dd { margin: .25rem 0 0; font-size: var(--t-caption); color: var(--ink-2); line-height: 1.8; }

/* 特殊星：吉凶のバッジは置かず、名前・位置・見方・出典を並べる */
.ss-item { min-width: 0; padding: .1rem 0; }
.ss-item__name { font-family: var(--mincho); font-size: var(--t-body); }
.ss-item__meta { font-size: var(--t-micro); color: var(--ink-3); margin-top: .2rem; line-height: 1.7; }

/* ═══════════════════════════════ 五行の色（この 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); }


/* ═══════════════════════════════ 大運・流年 */
.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, .ln-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: .55rem 1rem; flex-wrap: wrap; }
  .nav .btn { margin-left: auto; }
  .nav__sep { display: none; }
  /* 写真を置くまでの案内は、狭い画面ではボタンに重なるので出さない。 */
  .lead__media .slot__label,
  .lead__media .slot__size,
  .lead__media .slot__file { 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; }

/* 流月の先頭に置く «どの年ぶんか» の札。
   大運は十年ごと、天干も十年で一巡するので、各大運の初年は必ず同じ天干になる。
   年が変わっていないように見える誤解を避けるための札。 */
.lm-head {
  display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  padding: .35rem .7rem .35rem 0; margin-right: .6rem;
  border-right: 1px solid var(--line); white-space: nowrap;
}
.lm-head__year { font-size: var(--t-micro); color: var(--ink-3); letter-spacing: .04em; }
.lm-head__gz {
  font-family: var(--kanshi); font-weight: var(--w-decl);
  font-size: var(--t-title); line-height: 1;
}

.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, .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); }
/* 日元のすぐ下に置く版。命式表の中で埋もれないよう、枠を付けて一段大きく。 */
.sex--big {
  margin-top: .45rem; font-size: var(--t-caption); padding: .22em .85em;
  border: 1px solid currentColor; font-family: var(--gothic);
}
.mtable td .sex--big { display: inline-flex; }

/* ═══════════════════════════════ 写真とその枠
   写真が入るまでのあいだ «壊れている» ように見せない。
   寸法と置き場所を書いた、意図のある枠として見せる。 */
.slot-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot {
  display: grid; place-content: center; gap: var(--s2);
  width: 100%; text-align: center; padding: var(--s5);
  background:
    repeating-linear-gradient(135deg,
      var(--surface-2) 0 10px, transparent 10px 20px),
    var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--ink-3);
}
.slot__mark {
  width: 30px; height: 30px; margin: 0 auto var(--s1);
  border: 1.5px solid var(--line); border-radius: 50%;
  position: relative;
}
.slot__mark::before, .slot__mark::after {
  content: ""; position: absolute; left: 20%; right: 20%; height: 1.5px;
  background: var(--line);
}
.slot__mark::before { top: 34%; }
.slot__mark::after  { top: 62%; }
.slot__label { font-size: var(--t-caption); font-weight: var(--w-emph); color: var(--ink-2); }
.slot__size  { font-size: var(--t-micro); }
.slot__file  { font-size: var(--t-micro); font-family: ui-monospace, monospace; opacity: .75; }

/* ═══════════════════════════════ トップページ
   区画ごとに別のレイアウトを使う。同じ形を二度使わない。 */

/* ① 主役：全面写真 + 左寄せの見出し */
.lead {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r); margin-top: var(--s5);
  min-height: min(62vh, 520px); display: grid; align-items: end;
}
.lead__media { position: absolute; inset: 0; z-index: -2; }
.lead__media .slot, .lead__media .slot-img { height: 100%; border-radius: 0; border: 0; }
/* 写真を置くまでの案内は、見出しに重ならないよう右下へ寄せる。 */
.lead__media .slot { place-content: end; justify-items: end; text-align: right;
  padding: var(--s5) var(--s5) var(--s4); }
.lead__media .slot__mark { display: none; }
.lead::after {                       /* 文字を読めるようにする覆い */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(88deg,
    rgba(18,18,17,.86) 0%, rgba(18,18,17,.66) 42%, rgba(18,18,17,.22) 78%, transparent 100%);
}
.lead__inner { padding: clamp(var(--s5), 5vw, var(--s7)); max-width: 40rem; color: #fff; }
.lead__kicker {
  display: inline-block; font-size: var(--t-caption); letter-spacing: .2em;
  color: rgba(255,255,255,.82); margin-bottom: var(--s3);
  border-bottom: 1px solid rgba(255,255,255,.34); padding-bottom: var(--s1);
}
.lead h1 {
  font-family: var(--mincho); color: #fff; font-weight: var(--w-decl);
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.28; margin: 0 0 var(--s4);
  text-wrap: balance;
}
.lead__sub { color: rgba(255,255,255,.9); font-size: var(--t-body); margin: 0 0 var(--s5); max-width: 30em; }
.lead__cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
.lead .btn { background: #fff; border-color: #fff; color: var(--ink); }
.lead .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lead .btn--ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.lead .btn--ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }

/* ② できること：不等分タイル（三等分にしない） */
.tiles { display: grid; gap: var(--s4); grid-template-columns: 1.35fr 1fr; }
.tile {
  background: var(--surface); border-radius: var(--r);
  box-shadow: var(--sh-1); overflow: hidden; display: flex; flex-direction: column;
}
.tile--tall { grid-row: span 2; }
.tile__media { border-top: 1px solid var(--line-2); margin-top: auto; }
.tile__media .slot { border: 0; border-radius: 0; }
.tile--tall .tile__body { padding-bottom: var(--s4); }
/* 右の二つは «写真がない» のではなく «文字だけの区画» なので、
   引き伸ばされたときは中身を天地の中央に置いて、抜けに見えないようにする。 */
.tile:not(.tile--tall) .tile__body { align-content: center; }
/* 大タイルの写真は「残りを埋める」。写真の比率で列の高さが決まると、
   右側の二つに余白が溜まってしまう。
   写真を «流し» から外さないと、img の実寸が列の高さを決めてしまうので、
   枠を position の基準にして中身を絶対配置する。 */
.tile--tall .tile__media { flex: 1 1 auto; position: relative; min-height: 300px; }
.tile--tall .tile__media > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot--fill { height: 100%; min-height: 180px; object-fit: cover; }
.tile__body { padding: var(--s5); display: grid; gap: var(--s2); }
.tile__n {
  font-family: var(--mincho); font-size: var(--t-title); color: var(--accent);
  line-height: 1;
}
.tile h3 { font-size: var(--t-title); }
.tile p { color: var(--ink-2); font-size: var(--t-caption); margin: 0; }

/* ③ 時刻の話：例を図で見せる */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s5), 4vw, var(--s7)); align-items: center; }
.clockdemo { background: var(--surface); border-radius: var(--r); padding: var(--s5); box-shadow: var(--sh-1); }
.clockdemo__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s3); align-items: center; padding: var(--s3) 0; }
.clockdemo__row + .clockdemo__row { border-top: 1px solid var(--line-2); }
.clockdemo__t { font-family: var(--kanshi); font-weight: var(--w-decl); font-size: var(--t-body);
  font-variant-numeric: tabular-nums; color: var(--ink-2); }
.clockdemo__gz { font-family: var(--kanshi); font-weight: var(--w-decl); font-size: var(--t-title); letter-spacing: .06em; }
.clockdemo__note { font-size: var(--t-micro); color: var(--ink-3); margin-top: var(--s3); }
.clockdemo__hit { color: var(--accent); font-weight: var(--w-emph); }

/* ④ 講座：横に流す（三等分にしない） */
.rail { display: flex; gap: var(--s4); overflow-x: auto; padding-bottom: var(--s3);
  scroll-snap-type: x proximity; }
.rail > * { flex: 0 0 min(20rem, 78vw); scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* ⑤ 結び */
.closing { text-align: center; padding: clamp(var(--s6), 6vw, var(--s8)) 0; }
.closing h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: var(--s4); }

@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; }
  .tile--tall { grid-row: auto; }
  .proof { grid-template-columns: 1fr; }
  .lead { min-height: 0; }
  .lead::after { background: linear-gradient(180deg, rgba(18,18,17,.55) 0%, rgba(18,18,17,.88) 62%); }
}

/* ロゴ画像が入ったとき（static/img/logo.svg） */
.brand__logo { height: 30px; width: auto; display: block; }
@media (max-width: 720px) { .brand__logo { height: 26px; } }

/* ═══════════════════════════════ 命式表の仕上げ
   ここは «道具» の画面。飾らず、読みやすさだけを足す。 */
.meishiki {
  /* 紙のような、ごく薄い地の粒立ち。盤面を周囲から浮かせる */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
  box-shadow: var(--sh-2);
}
/* 日柱は命式の主体。列全体をわずかに立ち上げて視線を集める */
.mtable td.is-day { background: var(--surface-2); position: relative; }
.mtable thead th.colhead.is-day::after {
  content: ""; display: block; height: 2px; width: 2.2rem;
  background: var(--accent); margin: var(--s2) auto 0; border-radius: 2px;
}
/* 五行バランス：目盛りを添えて «多い少ない» を測れるようにする */
.gogyo__track { position: relative; }
.gogyo__track::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0 calc(12.5% - 1px), var(--line) calc(12.5% - 1px) 12.5%);
  opacity: .5;
}
/* 横スクロールする表の «まだ右がある» を示す */
.scroll-x { position: relative; }
.scroll-x::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--surface));
  opacity: 0; transition: opacity .2s;
}
@media (max-width: 720px) { .scroll-x::after { opacity: 1; } }

/* ══ 大運・流年・流月の切り替え（生成規則）══
   _设计/gen_unsei_css.py が作る。手で書き換えない。
   規則の数が多いのは、スクリプトなしで三段の切り替えを成り立たせるため。 ══ */

/* 流月と «関わり» の一覧は、全ての年ぶんを書き出したうえで既定は隠す */
.lm-wrap, .lm-group, .dy-detail, .ln-detail-wrap, .ln-detail { display: none; }

/* ── 大運を選ぶ → その大運の流年・流月・関わりの入れ物が開く ── */
#un-0:checked ~ .unsei-body .ln-group--0,
#un-0:checked ~ .unsei-body .lm-wrap--0 { display: flex; }
#un-0:checked ~ .unsei-body .dy-detail--0,
#un-0:checked ~ .unsei-body .ln-detail-wrap--0 { display: block; }
#un-0:checked ~ .unsei-body .un-cell[for="un-0"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-1:checked ~ .unsei-body .ln-group--1,
#un-1:checked ~ .unsei-body .lm-wrap--1 { display: flex; }
#un-1:checked ~ .unsei-body .dy-detail--1,
#un-1:checked ~ .unsei-body .ln-detail-wrap--1 { display: block; }
#un-1:checked ~ .unsei-body .un-cell[for="un-1"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-2:checked ~ .unsei-body .ln-group--2,
#un-2:checked ~ .unsei-body .lm-wrap--2 { display: flex; }
#un-2:checked ~ .unsei-body .dy-detail--2,
#un-2:checked ~ .unsei-body .ln-detail-wrap--2 { display: block; }
#un-2:checked ~ .unsei-body .un-cell[for="un-2"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-3:checked ~ .unsei-body .ln-group--3,
#un-3:checked ~ .unsei-body .lm-wrap--3 { display: flex; }
#un-3:checked ~ .unsei-body .dy-detail--3,
#un-3:checked ~ .unsei-body .ln-detail-wrap--3 { display: block; }
#un-3:checked ~ .unsei-body .un-cell[for="un-3"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-4:checked ~ .unsei-body .ln-group--4,
#un-4:checked ~ .unsei-body .lm-wrap--4 { display: flex; }
#un-4:checked ~ .unsei-body .dy-detail--4,
#un-4:checked ~ .unsei-body .ln-detail-wrap--4 { display: block; }
#un-4:checked ~ .unsei-body .un-cell[for="un-4"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-5:checked ~ .unsei-body .ln-group--5,
#un-5:checked ~ .unsei-body .lm-wrap--5 { display: flex; }
#un-5:checked ~ .unsei-body .dy-detail--5,
#un-5:checked ~ .unsei-body .ln-detail-wrap--5 { display: block; }
#un-5:checked ~ .unsei-body .un-cell[for="un-5"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-6:checked ~ .unsei-body .ln-group--6,
#un-6:checked ~ .unsei-body .lm-wrap--6 { display: flex; }
#un-6:checked ~ .unsei-body .dy-detail--6,
#un-6:checked ~ .unsei-body .ln-detail-wrap--6 { display: block; }
#un-6:checked ~ .unsei-body .un-cell[for="un-6"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-7:checked ~ .unsei-body .ln-group--7,
#un-7:checked ~ .unsei-body .lm-wrap--7 { display: flex; }
#un-7:checked ~ .unsei-body .dy-detail--7,
#un-7:checked ~ .unsei-body .ln-detail-wrap--7 { display: block; }
#un-7:checked ~ .unsei-body .un-cell[for="un-7"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-8:checked ~ .unsei-body .ln-group--8,
#un-8:checked ~ .unsei-body .lm-wrap--8 { display: flex; }
#un-8:checked ~ .unsei-body .dy-detail--8,
#un-8:checked ~ .unsei-body .ln-detail-wrap--8 { display: block; }
#un-8:checked ~ .unsei-body .un-cell[for="un-8"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-9:checked ~ .unsei-body .ln-group--9,
#un-9:checked ~ .unsei-body .lm-wrap--9 { display: flex; }
#un-9:checked ~ .unsei-body .dy-detail--9,
#un-9:checked ~ .unsei-body .ln-detail-wrap--9 { display: block; }
#un-9:checked ~ .unsei-body .un-cell[for="un-9"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-10:checked ~ .unsei-body .ln-group--10,
#un-10:checked ~ .unsei-body .lm-wrap--10 { display: flex; }
#un-10:checked ~ .unsei-body .dy-detail--10,
#un-10:checked ~ .unsei-body .ln-detail-wrap--10 { display: block; }
#un-10:checked ~ .unsei-body .un-cell[for="un-10"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }
#un-11:checked ~ .unsei-body .ln-group--11,
#un-11:checked ~ .unsei-body .lm-wrap--11 { display: flex; }
#un-11:checked ~ .unsei-body .dy-detail--11,
#un-11:checked ~ .unsei-body .ln-detail-wrap--11 { display: block; }
#un-11:checked ~ .unsei-body .un-cell[for="un-11"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--ink); }

/* ── 流年を選ぶ → その年の流月と関わりが出る ── */
#ln-0-0:checked ~ .unsei-body .lm-group--0-0 { display: flex; }
#ln-0-0:checked ~ .unsei-body .ln-detail--0-0 { display: block; }
#ln-0-0:checked ~ .unsei-body .ln-cell[for="ln-0-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-1:checked ~ .unsei-body .lm-group--0-1 { display: flex; }
#ln-0-1:checked ~ .unsei-body .ln-detail--0-1 { display: block; }
#ln-0-1:checked ~ .unsei-body .ln-cell[for="ln-0-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-2:checked ~ .unsei-body .lm-group--0-2 { display: flex; }
#ln-0-2:checked ~ .unsei-body .ln-detail--0-2 { display: block; }
#ln-0-2:checked ~ .unsei-body .ln-cell[for="ln-0-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-3:checked ~ .unsei-body .lm-group--0-3 { display: flex; }
#ln-0-3:checked ~ .unsei-body .ln-detail--0-3 { display: block; }
#ln-0-3:checked ~ .unsei-body .ln-cell[for="ln-0-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-4:checked ~ .unsei-body .lm-group--0-4 { display: flex; }
#ln-0-4:checked ~ .unsei-body .ln-detail--0-4 { display: block; }
#ln-0-4:checked ~ .unsei-body .ln-cell[for="ln-0-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-5:checked ~ .unsei-body .lm-group--0-5 { display: flex; }
#ln-0-5:checked ~ .unsei-body .ln-detail--0-5 { display: block; }
#ln-0-5:checked ~ .unsei-body .ln-cell[for="ln-0-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-6:checked ~ .unsei-body .lm-group--0-6 { display: flex; }
#ln-0-6:checked ~ .unsei-body .ln-detail--0-6 { display: block; }
#ln-0-6:checked ~ .unsei-body .ln-cell[for="ln-0-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-7:checked ~ .unsei-body .lm-group--0-7 { display: flex; }
#ln-0-7:checked ~ .unsei-body .ln-detail--0-7 { display: block; }
#ln-0-7:checked ~ .unsei-body .ln-cell[for="ln-0-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-8:checked ~ .unsei-body .lm-group--0-8 { display: flex; }
#ln-0-8:checked ~ .unsei-body .ln-detail--0-8 { display: block; }
#ln-0-8:checked ~ .unsei-body .ln-cell[for="ln-0-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-9:checked ~ .unsei-body .lm-group--0-9 { display: flex; }
#ln-0-9:checked ~ .unsei-body .ln-detail--0-9 { display: block; }
#ln-0-9:checked ~ .unsei-body .ln-cell[for="ln-0-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-10:checked ~ .unsei-body .lm-group--0-10 { display: flex; }
#ln-0-10:checked ~ .unsei-body .ln-detail--0-10 { display: block; }
#ln-0-10:checked ~ .unsei-body .ln-cell[for="ln-0-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-0-11:checked ~ .unsei-body .lm-group--0-11 { display: flex; }
#ln-0-11:checked ~ .unsei-body .ln-detail--0-11 { display: block; }
#ln-0-11:checked ~ .unsei-body .ln-cell[for="ln-0-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-0:checked ~ .unsei-body .lm-group--1-0 { display: flex; }
#ln-1-0:checked ~ .unsei-body .ln-detail--1-0 { display: block; }
#ln-1-0:checked ~ .unsei-body .ln-cell[for="ln-1-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-1:checked ~ .unsei-body .lm-group--1-1 { display: flex; }
#ln-1-1:checked ~ .unsei-body .ln-detail--1-1 { display: block; }
#ln-1-1:checked ~ .unsei-body .ln-cell[for="ln-1-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-2:checked ~ .unsei-body .lm-group--1-2 { display: flex; }
#ln-1-2:checked ~ .unsei-body .ln-detail--1-2 { display: block; }
#ln-1-2:checked ~ .unsei-body .ln-cell[for="ln-1-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-3:checked ~ .unsei-body .lm-group--1-3 { display: flex; }
#ln-1-3:checked ~ .unsei-body .ln-detail--1-3 { display: block; }
#ln-1-3:checked ~ .unsei-body .ln-cell[for="ln-1-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-4:checked ~ .unsei-body .lm-group--1-4 { display: flex; }
#ln-1-4:checked ~ .unsei-body .ln-detail--1-4 { display: block; }
#ln-1-4:checked ~ .unsei-body .ln-cell[for="ln-1-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-5:checked ~ .unsei-body .lm-group--1-5 { display: flex; }
#ln-1-5:checked ~ .unsei-body .ln-detail--1-5 { display: block; }
#ln-1-5:checked ~ .unsei-body .ln-cell[for="ln-1-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-6:checked ~ .unsei-body .lm-group--1-6 { display: flex; }
#ln-1-6:checked ~ .unsei-body .ln-detail--1-6 { display: block; }
#ln-1-6:checked ~ .unsei-body .ln-cell[for="ln-1-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-7:checked ~ .unsei-body .lm-group--1-7 { display: flex; }
#ln-1-7:checked ~ .unsei-body .ln-detail--1-7 { display: block; }
#ln-1-7:checked ~ .unsei-body .ln-cell[for="ln-1-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-8:checked ~ .unsei-body .lm-group--1-8 { display: flex; }
#ln-1-8:checked ~ .unsei-body .ln-detail--1-8 { display: block; }
#ln-1-8:checked ~ .unsei-body .ln-cell[for="ln-1-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-9:checked ~ .unsei-body .lm-group--1-9 { display: flex; }
#ln-1-9:checked ~ .unsei-body .ln-detail--1-9 { display: block; }
#ln-1-9:checked ~ .unsei-body .ln-cell[for="ln-1-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-10:checked ~ .unsei-body .lm-group--1-10 { display: flex; }
#ln-1-10:checked ~ .unsei-body .ln-detail--1-10 { display: block; }
#ln-1-10:checked ~ .unsei-body .ln-cell[for="ln-1-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-1-11:checked ~ .unsei-body .lm-group--1-11 { display: flex; }
#ln-1-11:checked ~ .unsei-body .ln-detail--1-11 { display: block; }
#ln-1-11:checked ~ .unsei-body .ln-cell[for="ln-1-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-0:checked ~ .unsei-body .lm-group--2-0 { display: flex; }
#ln-2-0:checked ~ .unsei-body .ln-detail--2-0 { display: block; }
#ln-2-0:checked ~ .unsei-body .ln-cell[for="ln-2-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-1:checked ~ .unsei-body .lm-group--2-1 { display: flex; }
#ln-2-1:checked ~ .unsei-body .ln-detail--2-1 { display: block; }
#ln-2-1:checked ~ .unsei-body .ln-cell[for="ln-2-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-2:checked ~ .unsei-body .lm-group--2-2 { display: flex; }
#ln-2-2:checked ~ .unsei-body .ln-detail--2-2 { display: block; }
#ln-2-2:checked ~ .unsei-body .ln-cell[for="ln-2-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-3:checked ~ .unsei-body .lm-group--2-3 { display: flex; }
#ln-2-3:checked ~ .unsei-body .ln-detail--2-3 { display: block; }
#ln-2-3:checked ~ .unsei-body .ln-cell[for="ln-2-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-4:checked ~ .unsei-body .lm-group--2-4 { display: flex; }
#ln-2-4:checked ~ .unsei-body .ln-detail--2-4 { display: block; }
#ln-2-4:checked ~ .unsei-body .ln-cell[for="ln-2-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-5:checked ~ .unsei-body .lm-group--2-5 { display: flex; }
#ln-2-5:checked ~ .unsei-body .ln-detail--2-5 { display: block; }
#ln-2-5:checked ~ .unsei-body .ln-cell[for="ln-2-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-6:checked ~ .unsei-body .lm-group--2-6 { display: flex; }
#ln-2-6:checked ~ .unsei-body .ln-detail--2-6 { display: block; }
#ln-2-6:checked ~ .unsei-body .ln-cell[for="ln-2-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-7:checked ~ .unsei-body .lm-group--2-7 { display: flex; }
#ln-2-7:checked ~ .unsei-body .ln-detail--2-7 { display: block; }
#ln-2-7:checked ~ .unsei-body .ln-cell[for="ln-2-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-8:checked ~ .unsei-body .lm-group--2-8 { display: flex; }
#ln-2-8:checked ~ .unsei-body .ln-detail--2-8 { display: block; }
#ln-2-8:checked ~ .unsei-body .ln-cell[for="ln-2-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-9:checked ~ .unsei-body .lm-group--2-9 { display: flex; }
#ln-2-9:checked ~ .unsei-body .ln-detail--2-9 { display: block; }
#ln-2-9:checked ~ .unsei-body .ln-cell[for="ln-2-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-10:checked ~ .unsei-body .lm-group--2-10 { display: flex; }
#ln-2-10:checked ~ .unsei-body .ln-detail--2-10 { display: block; }
#ln-2-10:checked ~ .unsei-body .ln-cell[for="ln-2-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-2-11:checked ~ .unsei-body .lm-group--2-11 { display: flex; }
#ln-2-11:checked ~ .unsei-body .ln-detail--2-11 { display: block; }
#ln-2-11:checked ~ .unsei-body .ln-cell[for="ln-2-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-0:checked ~ .unsei-body .lm-group--3-0 { display: flex; }
#ln-3-0:checked ~ .unsei-body .ln-detail--3-0 { display: block; }
#ln-3-0:checked ~ .unsei-body .ln-cell[for="ln-3-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-1:checked ~ .unsei-body .lm-group--3-1 { display: flex; }
#ln-3-1:checked ~ .unsei-body .ln-detail--3-1 { display: block; }
#ln-3-1:checked ~ .unsei-body .ln-cell[for="ln-3-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-2:checked ~ .unsei-body .lm-group--3-2 { display: flex; }
#ln-3-2:checked ~ .unsei-body .ln-detail--3-2 { display: block; }
#ln-3-2:checked ~ .unsei-body .ln-cell[for="ln-3-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-3:checked ~ .unsei-body .lm-group--3-3 { display: flex; }
#ln-3-3:checked ~ .unsei-body .ln-detail--3-3 { display: block; }
#ln-3-3:checked ~ .unsei-body .ln-cell[for="ln-3-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-4:checked ~ .unsei-body .lm-group--3-4 { display: flex; }
#ln-3-4:checked ~ .unsei-body .ln-detail--3-4 { display: block; }
#ln-3-4:checked ~ .unsei-body .ln-cell[for="ln-3-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-5:checked ~ .unsei-body .lm-group--3-5 { display: flex; }
#ln-3-5:checked ~ .unsei-body .ln-detail--3-5 { display: block; }
#ln-3-5:checked ~ .unsei-body .ln-cell[for="ln-3-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-6:checked ~ .unsei-body .lm-group--3-6 { display: flex; }
#ln-3-6:checked ~ .unsei-body .ln-detail--3-6 { display: block; }
#ln-3-6:checked ~ .unsei-body .ln-cell[for="ln-3-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-7:checked ~ .unsei-body .lm-group--3-7 { display: flex; }
#ln-3-7:checked ~ .unsei-body .ln-detail--3-7 { display: block; }
#ln-3-7:checked ~ .unsei-body .ln-cell[for="ln-3-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-8:checked ~ .unsei-body .lm-group--3-8 { display: flex; }
#ln-3-8:checked ~ .unsei-body .ln-detail--3-8 { display: block; }
#ln-3-8:checked ~ .unsei-body .ln-cell[for="ln-3-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-9:checked ~ .unsei-body .lm-group--3-9 { display: flex; }
#ln-3-9:checked ~ .unsei-body .ln-detail--3-9 { display: block; }
#ln-3-9:checked ~ .unsei-body .ln-cell[for="ln-3-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-10:checked ~ .unsei-body .lm-group--3-10 { display: flex; }
#ln-3-10:checked ~ .unsei-body .ln-detail--3-10 { display: block; }
#ln-3-10:checked ~ .unsei-body .ln-cell[for="ln-3-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-3-11:checked ~ .unsei-body .lm-group--3-11 { display: flex; }
#ln-3-11:checked ~ .unsei-body .ln-detail--3-11 { display: block; }
#ln-3-11:checked ~ .unsei-body .ln-cell[for="ln-3-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-0:checked ~ .unsei-body .lm-group--4-0 { display: flex; }
#ln-4-0:checked ~ .unsei-body .ln-detail--4-0 { display: block; }
#ln-4-0:checked ~ .unsei-body .ln-cell[for="ln-4-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-1:checked ~ .unsei-body .lm-group--4-1 { display: flex; }
#ln-4-1:checked ~ .unsei-body .ln-detail--4-1 { display: block; }
#ln-4-1:checked ~ .unsei-body .ln-cell[for="ln-4-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-2:checked ~ .unsei-body .lm-group--4-2 { display: flex; }
#ln-4-2:checked ~ .unsei-body .ln-detail--4-2 { display: block; }
#ln-4-2:checked ~ .unsei-body .ln-cell[for="ln-4-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-3:checked ~ .unsei-body .lm-group--4-3 { display: flex; }
#ln-4-3:checked ~ .unsei-body .ln-detail--4-3 { display: block; }
#ln-4-3:checked ~ .unsei-body .ln-cell[for="ln-4-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-4:checked ~ .unsei-body .lm-group--4-4 { display: flex; }
#ln-4-4:checked ~ .unsei-body .ln-detail--4-4 { display: block; }
#ln-4-4:checked ~ .unsei-body .ln-cell[for="ln-4-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-5:checked ~ .unsei-body .lm-group--4-5 { display: flex; }
#ln-4-5:checked ~ .unsei-body .ln-detail--4-5 { display: block; }
#ln-4-5:checked ~ .unsei-body .ln-cell[for="ln-4-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-6:checked ~ .unsei-body .lm-group--4-6 { display: flex; }
#ln-4-6:checked ~ .unsei-body .ln-detail--4-6 { display: block; }
#ln-4-6:checked ~ .unsei-body .ln-cell[for="ln-4-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-7:checked ~ .unsei-body .lm-group--4-7 { display: flex; }
#ln-4-7:checked ~ .unsei-body .ln-detail--4-7 { display: block; }
#ln-4-7:checked ~ .unsei-body .ln-cell[for="ln-4-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-8:checked ~ .unsei-body .lm-group--4-8 { display: flex; }
#ln-4-8:checked ~ .unsei-body .ln-detail--4-8 { display: block; }
#ln-4-8:checked ~ .unsei-body .ln-cell[for="ln-4-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-9:checked ~ .unsei-body .lm-group--4-9 { display: flex; }
#ln-4-9:checked ~ .unsei-body .ln-detail--4-9 { display: block; }
#ln-4-9:checked ~ .unsei-body .ln-cell[for="ln-4-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-10:checked ~ .unsei-body .lm-group--4-10 { display: flex; }
#ln-4-10:checked ~ .unsei-body .ln-detail--4-10 { display: block; }
#ln-4-10:checked ~ .unsei-body .ln-cell[for="ln-4-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-4-11:checked ~ .unsei-body .lm-group--4-11 { display: flex; }
#ln-4-11:checked ~ .unsei-body .ln-detail--4-11 { display: block; }
#ln-4-11:checked ~ .unsei-body .ln-cell[for="ln-4-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-0:checked ~ .unsei-body .lm-group--5-0 { display: flex; }
#ln-5-0:checked ~ .unsei-body .ln-detail--5-0 { display: block; }
#ln-5-0:checked ~ .unsei-body .ln-cell[for="ln-5-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-1:checked ~ .unsei-body .lm-group--5-1 { display: flex; }
#ln-5-1:checked ~ .unsei-body .ln-detail--5-1 { display: block; }
#ln-5-1:checked ~ .unsei-body .ln-cell[for="ln-5-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-2:checked ~ .unsei-body .lm-group--5-2 { display: flex; }
#ln-5-2:checked ~ .unsei-body .ln-detail--5-2 { display: block; }
#ln-5-2:checked ~ .unsei-body .ln-cell[for="ln-5-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-3:checked ~ .unsei-body .lm-group--5-3 { display: flex; }
#ln-5-3:checked ~ .unsei-body .ln-detail--5-3 { display: block; }
#ln-5-3:checked ~ .unsei-body .ln-cell[for="ln-5-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-4:checked ~ .unsei-body .lm-group--5-4 { display: flex; }
#ln-5-4:checked ~ .unsei-body .ln-detail--5-4 { display: block; }
#ln-5-4:checked ~ .unsei-body .ln-cell[for="ln-5-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-5:checked ~ .unsei-body .lm-group--5-5 { display: flex; }
#ln-5-5:checked ~ .unsei-body .ln-detail--5-5 { display: block; }
#ln-5-5:checked ~ .unsei-body .ln-cell[for="ln-5-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-6:checked ~ .unsei-body .lm-group--5-6 { display: flex; }
#ln-5-6:checked ~ .unsei-body .ln-detail--5-6 { display: block; }
#ln-5-6:checked ~ .unsei-body .ln-cell[for="ln-5-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-7:checked ~ .unsei-body .lm-group--5-7 { display: flex; }
#ln-5-7:checked ~ .unsei-body .ln-detail--5-7 { display: block; }
#ln-5-7:checked ~ .unsei-body .ln-cell[for="ln-5-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-8:checked ~ .unsei-body .lm-group--5-8 { display: flex; }
#ln-5-8:checked ~ .unsei-body .ln-detail--5-8 { display: block; }
#ln-5-8:checked ~ .unsei-body .ln-cell[for="ln-5-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-9:checked ~ .unsei-body .lm-group--5-9 { display: flex; }
#ln-5-9:checked ~ .unsei-body .ln-detail--5-9 { display: block; }
#ln-5-9:checked ~ .unsei-body .ln-cell[for="ln-5-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-10:checked ~ .unsei-body .lm-group--5-10 { display: flex; }
#ln-5-10:checked ~ .unsei-body .ln-detail--5-10 { display: block; }
#ln-5-10:checked ~ .unsei-body .ln-cell[for="ln-5-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-5-11:checked ~ .unsei-body .lm-group--5-11 { display: flex; }
#ln-5-11:checked ~ .unsei-body .ln-detail--5-11 { display: block; }
#ln-5-11:checked ~ .unsei-body .ln-cell[for="ln-5-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-0:checked ~ .unsei-body .lm-group--6-0 { display: flex; }
#ln-6-0:checked ~ .unsei-body .ln-detail--6-0 { display: block; }
#ln-6-0:checked ~ .unsei-body .ln-cell[for="ln-6-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-1:checked ~ .unsei-body .lm-group--6-1 { display: flex; }
#ln-6-1:checked ~ .unsei-body .ln-detail--6-1 { display: block; }
#ln-6-1:checked ~ .unsei-body .ln-cell[for="ln-6-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-2:checked ~ .unsei-body .lm-group--6-2 { display: flex; }
#ln-6-2:checked ~ .unsei-body .ln-detail--6-2 { display: block; }
#ln-6-2:checked ~ .unsei-body .ln-cell[for="ln-6-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-3:checked ~ .unsei-body .lm-group--6-3 { display: flex; }
#ln-6-3:checked ~ .unsei-body .ln-detail--6-3 { display: block; }
#ln-6-3:checked ~ .unsei-body .ln-cell[for="ln-6-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-4:checked ~ .unsei-body .lm-group--6-4 { display: flex; }
#ln-6-4:checked ~ .unsei-body .ln-detail--6-4 { display: block; }
#ln-6-4:checked ~ .unsei-body .ln-cell[for="ln-6-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-5:checked ~ .unsei-body .lm-group--6-5 { display: flex; }
#ln-6-5:checked ~ .unsei-body .ln-detail--6-5 { display: block; }
#ln-6-5:checked ~ .unsei-body .ln-cell[for="ln-6-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-6:checked ~ .unsei-body .lm-group--6-6 { display: flex; }
#ln-6-6:checked ~ .unsei-body .ln-detail--6-6 { display: block; }
#ln-6-6:checked ~ .unsei-body .ln-cell[for="ln-6-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-7:checked ~ .unsei-body .lm-group--6-7 { display: flex; }
#ln-6-7:checked ~ .unsei-body .ln-detail--6-7 { display: block; }
#ln-6-7:checked ~ .unsei-body .ln-cell[for="ln-6-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-8:checked ~ .unsei-body .lm-group--6-8 { display: flex; }
#ln-6-8:checked ~ .unsei-body .ln-detail--6-8 { display: block; }
#ln-6-8:checked ~ .unsei-body .ln-cell[for="ln-6-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-9:checked ~ .unsei-body .lm-group--6-9 { display: flex; }
#ln-6-9:checked ~ .unsei-body .ln-detail--6-9 { display: block; }
#ln-6-9:checked ~ .unsei-body .ln-cell[for="ln-6-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-10:checked ~ .unsei-body .lm-group--6-10 { display: flex; }
#ln-6-10:checked ~ .unsei-body .ln-detail--6-10 { display: block; }
#ln-6-10:checked ~ .unsei-body .ln-cell[for="ln-6-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-6-11:checked ~ .unsei-body .lm-group--6-11 { display: flex; }
#ln-6-11:checked ~ .unsei-body .ln-detail--6-11 { display: block; }
#ln-6-11:checked ~ .unsei-body .ln-cell[for="ln-6-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-0:checked ~ .unsei-body .lm-group--7-0 { display: flex; }
#ln-7-0:checked ~ .unsei-body .ln-detail--7-0 { display: block; }
#ln-7-0:checked ~ .unsei-body .ln-cell[for="ln-7-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-1:checked ~ .unsei-body .lm-group--7-1 { display: flex; }
#ln-7-1:checked ~ .unsei-body .ln-detail--7-1 { display: block; }
#ln-7-1:checked ~ .unsei-body .ln-cell[for="ln-7-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-2:checked ~ .unsei-body .lm-group--7-2 { display: flex; }
#ln-7-2:checked ~ .unsei-body .ln-detail--7-2 { display: block; }
#ln-7-2:checked ~ .unsei-body .ln-cell[for="ln-7-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-3:checked ~ .unsei-body .lm-group--7-3 { display: flex; }
#ln-7-3:checked ~ .unsei-body .ln-detail--7-3 { display: block; }
#ln-7-3:checked ~ .unsei-body .ln-cell[for="ln-7-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-4:checked ~ .unsei-body .lm-group--7-4 { display: flex; }
#ln-7-4:checked ~ .unsei-body .ln-detail--7-4 { display: block; }
#ln-7-4:checked ~ .unsei-body .ln-cell[for="ln-7-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-5:checked ~ .unsei-body .lm-group--7-5 { display: flex; }
#ln-7-5:checked ~ .unsei-body .ln-detail--7-5 { display: block; }
#ln-7-5:checked ~ .unsei-body .ln-cell[for="ln-7-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-6:checked ~ .unsei-body .lm-group--7-6 { display: flex; }
#ln-7-6:checked ~ .unsei-body .ln-detail--7-6 { display: block; }
#ln-7-6:checked ~ .unsei-body .ln-cell[for="ln-7-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-7:checked ~ .unsei-body .lm-group--7-7 { display: flex; }
#ln-7-7:checked ~ .unsei-body .ln-detail--7-7 { display: block; }
#ln-7-7:checked ~ .unsei-body .ln-cell[for="ln-7-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-8:checked ~ .unsei-body .lm-group--7-8 { display: flex; }
#ln-7-8:checked ~ .unsei-body .ln-detail--7-8 { display: block; }
#ln-7-8:checked ~ .unsei-body .ln-cell[for="ln-7-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-9:checked ~ .unsei-body .lm-group--7-9 { display: flex; }
#ln-7-9:checked ~ .unsei-body .ln-detail--7-9 { display: block; }
#ln-7-9:checked ~ .unsei-body .ln-cell[for="ln-7-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-10:checked ~ .unsei-body .lm-group--7-10 { display: flex; }
#ln-7-10:checked ~ .unsei-body .ln-detail--7-10 { display: block; }
#ln-7-10:checked ~ .unsei-body .ln-cell[for="ln-7-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-7-11:checked ~ .unsei-body .lm-group--7-11 { display: flex; }
#ln-7-11:checked ~ .unsei-body .ln-detail--7-11 { display: block; }
#ln-7-11:checked ~ .unsei-body .ln-cell[for="ln-7-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-0:checked ~ .unsei-body .lm-group--8-0 { display: flex; }
#ln-8-0:checked ~ .unsei-body .ln-detail--8-0 { display: block; }
#ln-8-0:checked ~ .unsei-body .ln-cell[for="ln-8-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-1:checked ~ .unsei-body .lm-group--8-1 { display: flex; }
#ln-8-1:checked ~ .unsei-body .ln-detail--8-1 { display: block; }
#ln-8-1:checked ~ .unsei-body .ln-cell[for="ln-8-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-2:checked ~ .unsei-body .lm-group--8-2 { display: flex; }
#ln-8-2:checked ~ .unsei-body .ln-detail--8-2 { display: block; }
#ln-8-2:checked ~ .unsei-body .ln-cell[for="ln-8-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-3:checked ~ .unsei-body .lm-group--8-3 { display: flex; }
#ln-8-3:checked ~ .unsei-body .ln-detail--8-3 { display: block; }
#ln-8-3:checked ~ .unsei-body .ln-cell[for="ln-8-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-4:checked ~ .unsei-body .lm-group--8-4 { display: flex; }
#ln-8-4:checked ~ .unsei-body .ln-detail--8-4 { display: block; }
#ln-8-4:checked ~ .unsei-body .ln-cell[for="ln-8-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-5:checked ~ .unsei-body .lm-group--8-5 { display: flex; }
#ln-8-5:checked ~ .unsei-body .ln-detail--8-5 { display: block; }
#ln-8-5:checked ~ .unsei-body .ln-cell[for="ln-8-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-6:checked ~ .unsei-body .lm-group--8-6 { display: flex; }
#ln-8-6:checked ~ .unsei-body .ln-detail--8-6 { display: block; }
#ln-8-6:checked ~ .unsei-body .ln-cell[for="ln-8-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-7:checked ~ .unsei-body .lm-group--8-7 { display: flex; }
#ln-8-7:checked ~ .unsei-body .ln-detail--8-7 { display: block; }
#ln-8-7:checked ~ .unsei-body .ln-cell[for="ln-8-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-8:checked ~ .unsei-body .lm-group--8-8 { display: flex; }
#ln-8-8:checked ~ .unsei-body .ln-detail--8-8 { display: block; }
#ln-8-8:checked ~ .unsei-body .ln-cell[for="ln-8-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-9:checked ~ .unsei-body .lm-group--8-9 { display: flex; }
#ln-8-9:checked ~ .unsei-body .ln-detail--8-9 { display: block; }
#ln-8-9:checked ~ .unsei-body .ln-cell[for="ln-8-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-10:checked ~ .unsei-body .lm-group--8-10 { display: flex; }
#ln-8-10:checked ~ .unsei-body .ln-detail--8-10 { display: block; }
#ln-8-10:checked ~ .unsei-body .ln-cell[for="ln-8-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-8-11:checked ~ .unsei-body .lm-group--8-11 { display: flex; }
#ln-8-11:checked ~ .unsei-body .ln-detail--8-11 { display: block; }
#ln-8-11:checked ~ .unsei-body .ln-cell[for="ln-8-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-0:checked ~ .unsei-body .lm-group--9-0 { display: flex; }
#ln-9-0:checked ~ .unsei-body .ln-detail--9-0 { display: block; }
#ln-9-0:checked ~ .unsei-body .ln-cell[for="ln-9-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-1:checked ~ .unsei-body .lm-group--9-1 { display: flex; }
#ln-9-1:checked ~ .unsei-body .ln-detail--9-1 { display: block; }
#ln-9-1:checked ~ .unsei-body .ln-cell[for="ln-9-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-2:checked ~ .unsei-body .lm-group--9-2 { display: flex; }
#ln-9-2:checked ~ .unsei-body .ln-detail--9-2 { display: block; }
#ln-9-2:checked ~ .unsei-body .ln-cell[for="ln-9-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-3:checked ~ .unsei-body .lm-group--9-3 { display: flex; }
#ln-9-3:checked ~ .unsei-body .ln-detail--9-3 { display: block; }
#ln-9-3:checked ~ .unsei-body .ln-cell[for="ln-9-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-4:checked ~ .unsei-body .lm-group--9-4 { display: flex; }
#ln-9-4:checked ~ .unsei-body .ln-detail--9-4 { display: block; }
#ln-9-4:checked ~ .unsei-body .ln-cell[for="ln-9-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-5:checked ~ .unsei-body .lm-group--9-5 { display: flex; }
#ln-9-5:checked ~ .unsei-body .ln-detail--9-5 { display: block; }
#ln-9-5:checked ~ .unsei-body .ln-cell[for="ln-9-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-6:checked ~ .unsei-body .lm-group--9-6 { display: flex; }
#ln-9-6:checked ~ .unsei-body .ln-detail--9-6 { display: block; }
#ln-9-6:checked ~ .unsei-body .ln-cell[for="ln-9-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-7:checked ~ .unsei-body .lm-group--9-7 { display: flex; }
#ln-9-7:checked ~ .unsei-body .ln-detail--9-7 { display: block; }
#ln-9-7:checked ~ .unsei-body .ln-cell[for="ln-9-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-8:checked ~ .unsei-body .lm-group--9-8 { display: flex; }
#ln-9-8:checked ~ .unsei-body .ln-detail--9-8 { display: block; }
#ln-9-8:checked ~ .unsei-body .ln-cell[for="ln-9-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-9:checked ~ .unsei-body .lm-group--9-9 { display: flex; }
#ln-9-9:checked ~ .unsei-body .ln-detail--9-9 { display: block; }
#ln-9-9:checked ~ .unsei-body .ln-cell[for="ln-9-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-10:checked ~ .unsei-body .lm-group--9-10 { display: flex; }
#ln-9-10:checked ~ .unsei-body .ln-detail--9-10 { display: block; }
#ln-9-10:checked ~ .unsei-body .ln-cell[for="ln-9-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-9-11:checked ~ .unsei-body .lm-group--9-11 { display: flex; }
#ln-9-11:checked ~ .unsei-body .ln-detail--9-11 { display: block; }
#ln-9-11:checked ~ .unsei-body .ln-cell[for="ln-9-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-0:checked ~ .unsei-body .lm-group--10-0 { display: flex; }
#ln-10-0:checked ~ .unsei-body .ln-detail--10-0 { display: block; }
#ln-10-0:checked ~ .unsei-body .ln-cell[for="ln-10-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-1:checked ~ .unsei-body .lm-group--10-1 { display: flex; }
#ln-10-1:checked ~ .unsei-body .ln-detail--10-1 { display: block; }
#ln-10-1:checked ~ .unsei-body .ln-cell[for="ln-10-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-2:checked ~ .unsei-body .lm-group--10-2 { display: flex; }
#ln-10-2:checked ~ .unsei-body .ln-detail--10-2 { display: block; }
#ln-10-2:checked ~ .unsei-body .ln-cell[for="ln-10-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-3:checked ~ .unsei-body .lm-group--10-3 { display: flex; }
#ln-10-3:checked ~ .unsei-body .ln-detail--10-3 { display: block; }
#ln-10-3:checked ~ .unsei-body .ln-cell[for="ln-10-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-4:checked ~ .unsei-body .lm-group--10-4 { display: flex; }
#ln-10-4:checked ~ .unsei-body .ln-detail--10-4 { display: block; }
#ln-10-4:checked ~ .unsei-body .ln-cell[for="ln-10-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-5:checked ~ .unsei-body .lm-group--10-5 { display: flex; }
#ln-10-5:checked ~ .unsei-body .ln-detail--10-5 { display: block; }
#ln-10-5:checked ~ .unsei-body .ln-cell[for="ln-10-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-6:checked ~ .unsei-body .lm-group--10-6 { display: flex; }
#ln-10-6:checked ~ .unsei-body .ln-detail--10-6 { display: block; }
#ln-10-6:checked ~ .unsei-body .ln-cell[for="ln-10-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-7:checked ~ .unsei-body .lm-group--10-7 { display: flex; }
#ln-10-7:checked ~ .unsei-body .ln-detail--10-7 { display: block; }
#ln-10-7:checked ~ .unsei-body .ln-cell[for="ln-10-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-8:checked ~ .unsei-body .lm-group--10-8 { display: flex; }
#ln-10-8:checked ~ .unsei-body .ln-detail--10-8 { display: block; }
#ln-10-8:checked ~ .unsei-body .ln-cell[for="ln-10-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-9:checked ~ .unsei-body .lm-group--10-9 { display: flex; }
#ln-10-9:checked ~ .unsei-body .ln-detail--10-9 { display: block; }
#ln-10-9:checked ~ .unsei-body .ln-cell[for="ln-10-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-10:checked ~ .unsei-body .lm-group--10-10 { display: flex; }
#ln-10-10:checked ~ .unsei-body .ln-detail--10-10 { display: block; }
#ln-10-10:checked ~ .unsei-body .ln-cell[for="ln-10-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-10-11:checked ~ .unsei-body .lm-group--10-11 { display: flex; }
#ln-10-11:checked ~ .unsei-body .ln-detail--10-11 { display: block; }
#ln-10-11:checked ~ .unsei-body .ln-cell[for="ln-10-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-0:checked ~ .unsei-body .lm-group--11-0 { display: flex; }
#ln-11-0:checked ~ .unsei-body .ln-detail--11-0 { display: block; }
#ln-11-0:checked ~ .unsei-body .ln-cell[for="ln-11-0"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-1:checked ~ .unsei-body .lm-group--11-1 { display: flex; }
#ln-11-1:checked ~ .unsei-body .ln-detail--11-1 { display: block; }
#ln-11-1:checked ~ .unsei-body .ln-cell[for="ln-11-1"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-2:checked ~ .unsei-body .lm-group--11-2 { display: flex; }
#ln-11-2:checked ~ .unsei-body .ln-detail--11-2 { display: block; }
#ln-11-2:checked ~ .unsei-body .ln-cell[for="ln-11-2"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-3:checked ~ .unsei-body .lm-group--11-3 { display: flex; }
#ln-11-3:checked ~ .unsei-body .ln-detail--11-3 { display: block; }
#ln-11-3:checked ~ .unsei-body .ln-cell[for="ln-11-3"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-4:checked ~ .unsei-body .lm-group--11-4 { display: flex; }
#ln-11-4:checked ~ .unsei-body .ln-detail--11-4 { display: block; }
#ln-11-4:checked ~ .unsei-body .ln-cell[for="ln-11-4"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-5:checked ~ .unsei-body .lm-group--11-5 { display: flex; }
#ln-11-5:checked ~ .unsei-body .ln-detail--11-5 { display: block; }
#ln-11-5:checked ~ .unsei-body .ln-cell[for="ln-11-5"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-6:checked ~ .unsei-body .lm-group--11-6 { display: flex; }
#ln-11-6:checked ~ .unsei-body .ln-detail--11-6 { display: block; }
#ln-11-6:checked ~ .unsei-body .ln-cell[for="ln-11-6"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-7:checked ~ .unsei-body .lm-group--11-7 { display: flex; }
#ln-11-7:checked ~ .unsei-body .ln-detail--11-7 { display: block; }
#ln-11-7:checked ~ .unsei-body .ln-cell[for="ln-11-7"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-8:checked ~ .unsei-body .lm-group--11-8 { display: flex; }
#ln-11-8:checked ~ .unsei-body .ln-detail--11-8 { display: block; }
#ln-11-8:checked ~ .unsei-body .ln-cell[for="ln-11-8"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-9:checked ~ .unsei-body .lm-group--11-9 { display: flex; }
#ln-11-9:checked ~ .unsei-body .ln-detail--11-9 { display: block; }
#ln-11-9:checked ~ .unsei-body .ln-cell[for="ln-11-9"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-10:checked ~ .unsei-body .lm-group--11-10 { display: flex; }
#ln-11-10:checked ~ .unsei-body .ln-detail--11-10 { display: block; }
#ln-11-10:checked ~ .unsei-body .ln-cell[for="ln-11-10"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
#ln-11-11:checked ~ .unsei-body .lm-group--11-11 { display: flex; }
#ln-11-11:checked ~ .unsei-body .ln-detail--11-11 { display: block; }
#ln-11-11:checked ~ .unsei-body .ln-cell[for="ln-11-11"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }

/* キーボードで辿れるようにする */
.un-radio:focus-visible ~ .unsei-body .unsei-band,
.ln-radio:focus-visible ~ .unsei-body .unsei-band { outline: 2px solid var(--ink); outline-offset: -2px; }


/* ── 講座のチャプター（YouTube 埋め込みの回）── */
.chapters { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.chapters li + li { border-top: 1px solid var(--line, #e2e2d9); }
.chapters a { display: flex; gap: 1rem; align-items: baseline; padding: .7rem .2rem; min-height: 44px;
  color: inherit; text-decoration: none; }
.chapters a:hover { background: rgba(31, 61, 99, .05); }
.chapters__t { flex: 0 0 4.2em; font-variant-numeric: tabular-nums; color: var(--accent, #1f3d63); font-weight: 600; }
.leap-row[hidden] { display: none; }

/* 無料レポートの欄の «当たるとは限らない» の一文（2026-10-09：大きく、はっきり） */
.report-caution { margin: 0 0 1.3rem; padding: .7rem .9rem; border-left: 4px solid #c99a2e; background: #fff7e0;
  color: #7a4a00; font-weight: 700; font-size: 1.05rem; line-height: 1.7; }

/* ── 内ページの頭（手機）：一行に畳み、メニューはボタンで開く。2026-10-09 ──
   命式の入力画面には ChatGPT などから直接来る方が多く（2026-10 の記録で半数近く）、
   二段のナビが一画面目の 148px を塞いでいた。 */
.site-mbtn, .site-mcta { display: none; }
@media (max-width: 720px) {
  .site-header.is-js .site-header__inner { flex-wrap: nowrap; gap: .5rem; min-height: 56px; padding: 0; }
  .site-header.is-js .site-mcta { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto;
    padding: 0 .9rem; border: 1px solid var(--accent, #1f3d63); color: var(--accent, #1f3d63);
    font-family: var(--mincho); font-size: var(--t-caption); letter-spacing: .08em; text-decoration: none; white-space: nowrap; }
  .site-header.is-js .site-mbtn { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin-left: auto;
    padding: 0 .2rem 0 .6rem; background: none; border: 0; color: var(--ink); font-family: var(--mincho);
    font-size: var(--t-caption); letter-spacing: .12em; cursor: pointer; }
  .site-header.is-js .site-mcta + .site-mbtn { margin-left: 0; }
  .site-mbtn i { position: relative; width: 20px; height: 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transition: border-color .2s; }
  .site-header.is-open .site-mbtn i { border-color: transparent; }
  .site-mbtn i::before, .site-mbtn i::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
    background: currentColor; opacity: 0; transition: transform .2s, opacity .2s; }
  .site-header.is-open .site-mbtn i::before { opacity: 1; transform: rotate(35deg); }
  .site-header.is-open .site-mbtn i::after { opacity: 1; transform: rotate(-35deg); }
  .site-header.is-js .nav { display: none; }
  .site-header.is-js.is-open .site-header__inner { flex-wrap: wrap; }
  .site-header.is-js.is-open .nav { display: flex; flex-direction: column; align-items: stretch; width: 100%;
    gap: 0; margin: 0; padding: .2rem 0 1rem; border-top: 1px solid var(--line); }
  .site-header.is-js.is-open .nav a:not(.btn), .site-header.is-js.is-open .nav__link {
    min-height: 48px; font-size: var(--t-body); letter-spacing: .1em; border-bottom: 1px solid var(--line-2, #e2e2d9); }
  .site-header.is-js.is-open .nav a:not(.btn)::after, .site-header.is-js.is-open .nav__link::after { display: none; }
  .site-header.is-js.is-open .nav__form { display: block; }
  .site-header.is-js.is-open .nav .btn { margin: 1rem 0 0; width: 100%; justify-content: center; min-height: 48px; }
}
@media print { .site-mbtn, .site-mcta { display: none !important; } }

/* ── 命式の計算中の画面（forms.js が出す。2026-10-09）──
   五つの字を輪に並べ、相生の順（木→火→土→金→水）に一つずつ灯す。 */
.calc-wait { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(242, 240, 232, .9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; animation: calc-in .3s .25s ease-out forwards; }
.calc-wait__box { text-align: center; padding: 2rem 1.5rem; }
.calc-wait__ring { position: relative; width: 132px; height: 132px; margin: 0 auto 1.6rem;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(31, 61, 99, .18); }
.calc-wait__wx { --r: 60px; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 15px; line-height: 1;
  transform: rotate(calc(var(--i) * 72deg - 90deg)) translateX(var(--r)) rotate(calc(var(--i) * -72deg + 90deg));
  opacity: .28; animation: calc-glow 2.5s calc(var(--i) * .5s) infinite; }
.calc-wait__wx--moku { background: #1d6b46; } .calc-wait__wx--ka { background: #b3392a; }
.calc-wait__wx--do { background: #6b4423; } .calc-wait__wx--gon { background: #85661a; }
.calc-wait__wx--sui { background: #23417d; }
.calc-wait__title { margin: 0; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 1.15rem; letter-spacing: .16em; color: var(--ink, #1a222c); }
.calc-wait__step { margin: .6rem 0 0; font-size: .875rem; color: var(--ink-3, #5f6972); letter-spacing: .04em; min-height: 1.6em; }
@keyframes calc-in { to { opacity: 1; } }
@keyframes calc-glow {
  0%, 100% { opacity: .28; scale: 1; }
  10% { opacity: 1; scale: 1.22; }
  22% { opacity: 1; scale: 1; }
  34% { opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-wait { animation: none; opacity: 1; }
  .calc-wait__wx { animation: none; opacity: .8; }
}
@media print { .calc-wait { display: none !important; } }