/* Hallmark · inner-page components · same locked system as site.css (design.md-inverted: pages share, not differ) */

/* sample banner */
.sample-note { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-neutral); text-align: center; padding: var(--space-2xs) var(--page-gutter); }

/* breadcrumb */
.crumb { font-size: var(--text-xs); color: var(--color-neutral); padding-block: var(--space-sm); }
.crumb a { color: var(--color-neutral); }
.crumb span { margin-inline: 0.4em; color: var(--color-rule-2); }

/* page head */
.phead { padding-block: var(--space-md) var(--space-lg); }
.phead h1 { font-size: var(--text-2xl); font-weight: var(--w-display); line-height: 1.4; letter-spacing: 0.01em; overflow-wrap: anywhere; min-width: 0; }
.phead .pmeta { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-neutral); }

/* conclusion box (§4.3 AI-overview line) */
.lead-box { border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-lg); margin-block: var(--space-md) var(--space-xl); max-width: 70ch; }
.lead-box p { max-width: 65ch; }
.lead-box b.kw { color: var(--color-accent); }

/* content sections */
.sec { padding-block: var(--space-lg); max-width: 70ch; }
.sec h2 { font-size: var(--text-lg); font-weight: var(--w-display); margin-bottom: var(--space-sm); letter-spacing: 0.02em; }
.sec h2::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; background: var(--color-shu); margin-inline-end: 0.5em; }
.sec h3 { font-size: var(--text-md); font-weight: 700; margin-block: var(--space-md) var(--space-2xs); }
.sec p { color: var(--color-ink); max-width: 65ch; margin-bottom: var(--space-sm); }
.sec .muted { color: var(--color-muted); }

/* profile table */
.ptable { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule); margin-block: var(--space-md) var(--space-lg); max-width: 46rem; }
.ptable > div { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.ptable dt { font-size: var(--text-sm); color: var(--color-neutral); }
.ptable dd { font-weight: 700; }
.ptable dd .num { font-weight: 600; }

/* score display */
.score { display: flex; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-block: var(--space-sm) var(--space-md); }
.score b { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: 600; line-height: 1; }
.score b small { font-size: 0.4em; font-weight: 400; color: var(--color-neutral); }
.score .rank { border: 2px solid var(--color-ink); padding: 0.1em 0.5em; font-weight: var(--w-display); font-size: var(--text-lg); }
.score .stars { color: var(--color-shu); letter-spacing: 0.1em; font-size: var(--text-md); }
.score .stars .off { color: var(--color-rule-2); }

/* mini score row (仕事/恋愛/金運) */
.mscore { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin-block: var(--space-sm); }
.mscore div { display: grid; gap: 0; }
.mscore b { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 600; line-height: 1.2; }
.mscore span { font-size: var(--text-xs); color: var(--color-neutral); }

/* star chips */
.chips { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-block: var(--space-xs); }
.chip { border: var(--rule-hair) solid var(--color-rule-2); padding: 0.45rem 0.9rem; min-height: 44px; display: inline-flex; align-items: center; gap: 0.4em; color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; transition: border-color var(--dur-micro) var(--ease-out); }
.chip:hover { border-color: var(--color-accent); text-decoration: none; }
.chip .dot { width: 0.5em; height: 0.5em; display: inline-block; }

/* relation switcher (typographic, not boxed tabs) */
.reltabs { display: flex; gap: var(--space-lg); flex-wrap: wrap; border-bottom: var(--rule-hair) solid var(--color-rule); margin-block: var(--space-md) var(--space-lg); }
.reltabs a { color: var(--color-neutral); font-size: var(--text-sm); font-weight: 700; padding: var(--space-xs) 0 var(--space-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.reltabs a:hover { text-decoration: none; color: var(--color-ink); }
.reltabs a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-shu); }

/* 9×9 matrix (scrolls inside its own container) */
.table-scroll { overflow-x: auto; margin-block: var(--space-md) var(--space-lg); }
.matrix { border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.matrix caption { text-align: left; font-size: var(--text-xs); color: var(--color-neutral); margin-bottom: var(--space-xs); }
.matrix th, .matrix td { border: var(--rule-hair) solid var(--color-rule); padding: 0.5rem 0.6rem; text-align: center; }
.matrix thead th { background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 700; }
.matrix tbody th { background: var(--color-paper-2); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; position: sticky; left: 0; }
.matrix td a { display: block; color: var(--color-ink); font-weight: 700; }
.matrix td a:hover { color: var(--color-accent); text-decoration: none; }
.matrix .g2 { color: var(--color-accent); }
.matrix .g1 { color: var(--color-ink); }
.matrix .g0 { color: var(--color-neutral); }

/* prev / next peripheral nav */
.pnav { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; border-block: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-md); margin-block: var(--space-xl); font-size: var(--text-sm); }
.pnav div { display: flex; gap: var(--space-lg); flex-wrap: wrap; }

/* year selector funnel (P14 → P2) */
.yfunnel { border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-lg); margin-block: var(--space-lg); }
.yfunnel .diag__label { margin-bottom: var(--space-xs); }
.yfunnel p.note { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); max-width: 60ch; }

/* share row */
.share { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-block: var(--space-lg); }

/* lucky items row */
.lucky { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-block: var(--space-sm); }
.lucky div { display: grid; }
.lucky span { font-size: var(--text-xs); color: var(--color-neutral); }
.lucky b { font-weight: 700; }

/* CTA band (article-end) */
.ctaband { border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-lg); margin-block: var(--space-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; max-width: 46rem; }
.ctaband p { font-weight: 700; }
.ctaband .sub { display: block; font-weight: var(--w-body); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 40rem) {
  .ptable { grid-template-columns: 1fr; }
  .phead h1 { font-size: var(--text-xl); }
  .reltabs { gap: var(--space-md); }
}

/* 九星盤 (3×3・南が上) */
.ban { margin-block: var(--space-lg); }
.ban figcaption { font-size: var(--text-xs); color: var(--color-neutral); margin-bottom: var(--space-xs); }
.ban__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 20rem; border: var(--rule-hair) solid var(--color-rule-2); }
.ban__cell { aspect-ratio: 1; display: grid; place-content: center; gap: 2px; text-align: center; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.ban__cell b { font-size: var(--text-md); font-weight: var(--w-display); }
.ban__cell .ban__dir { font-size: 10px; color: var(--color-neutral); letter-spacing: 0.1em; }
.ban__cell i { font-style: normal; font-size: 10px; color: var(--color-shu); font-weight: 700; }
.ban__cell.is-you { background: var(--color-paper-2); box-shadow: inset 0 0 0 2px var(--color-accent); }
.ban__cell.is-you b { color: var(--color-accent); }

/* 五行フロー図 */
.gflow { display: flex; align-items: center; gap: var(--space-md); margin-block: var(--space-md); flex-wrap: wrap; }
.gflow__el { display: grid; place-items: center; gap: 2px; text-align: center; }
.gflow__el b { width: 3.2rem; height: 3.2rem; border: 2px solid var(--color-accent); border-radius: 50%; display: grid; place-content: center; font-size: var(--text-lg); font-weight: var(--w-display); color: var(--color-accent); background: var(--color-paper); }
.gflow__el span { font-size: var(--text-xs); color: var(--color-neutral); line-height: 1.4; }
.gflow__arrow { display: grid; place-items: center; gap: 0; }
.gflow__arrow b { font-size: var(--text-xl); color: var(--color-shu); line-height: 1; }
.gflow__arrow span { font-size: var(--text-xs); color: var(--color-neutral); white-space: nowrap; }

/* 方位コンパスのカードグリッド */
.hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-block: var(--space-md); }
.hcard { border: var(--rule-hair) solid var(--color-rule); padding: var(--space-md); display: grid; justify-items: center; gap: var(--space-xs); background: var(--color-paper); }
.hcard h3 { font-size: var(--text-md); font-weight: var(--w-display); margin: 0; }
.hcard h3 a { color: var(--color-ink); }
.hcard h3 a:hover { color: var(--color-accent); text-decoration: none; }
.hcard__good { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); }
@media (max-width: 60rem) { .hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .hgrid { grid-template-columns: 1fr; } }

/* 回答パッセージ（H2直下の結論文） */
.ap { font-weight: 700; color: var(--color-ink); border-left: 3px solid var(--color-accent); padding-left: var(--space-sm); margin-bottom: var(--space-sm); max-width: 65ch; }
.ap b { color: var(--color-accent); }
.credit { font-size: var(--text-sm); color: var(--color-neutral); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.mlist { padding-left: 1.3em; max-width: 65ch; }
.mlist li { margin-bottom: var(--space-xs); }

/* 運気バイオリズム */
.bio { margin-block: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding: var(--space-sm); max-width: 44rem; }

/* 開運日カレンダー */
.kaiun-table td { text-align: left; }
.kd { display: inline-block; font-size: var(--text-xs); padding: 0.15rem 0.5rem; border: var(--rule-hair) solid var(--color-rule-2); margin-right: 0.3rem; white-space: nowrap; }
.kd--tensha { background: var(--color-shu); color: #fff; border-color: var(--color-shu); font-weight: 700; }
.kd--ichiryu { background: color-mix(in oklch, var(--color-accent) 14%, transparent); color: var(--color-accent); border-color: var(--color-accent); font-weight: 700; }
.kd--moon { background: var(--color-paper-2); color: var(--color-muted); }
.kd--taian { color: var(--color-neutral); }
.kaiun-table tr.is-today th { background: var(--color-ink); color: var(--color-onink); }

/* マイ誕生日 保存カード */
.savebd { border: 2px solid var(--color-accent); background: var(--color-paper-2); padding: var(--space-lg); margin-block: var(--space-lg); max-width: 46rem; display: grid; gap: var(--space-sm); justify-items: start; }
.savebd.is-saved { border-color: var(--color-rule-2); background: var(--color-paper); }
.savebd__lead { font-weight: 700; max-width: 60ch; }
.savebd__lead b { color: var(--color-accent); }
.savebd__note { font-size: var(--text-xs); color: var(--color-neutral); max-width: 60ch; }

/* レア度カード */
.rarity { border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-lg); margin-block: var(--space-lg); max-width: 46rem; text-align: center; }
.rarity__lead { font-size: var(--text-sm); color: var(--color-neutral); }
.rarity__combo { font-size: var(--text-lg); font-weight: var(--w-display); margin: var(--space-2xs) 0; }
.rarity__num { font-family: var(--font-numeric); font-size: var(--text-2xl); font-weight: 600; color: var(--color-accent); line-height: 1.2; }
.rarity__num b { font-size: 1.6em; font-weight: 700; }
.rarity__note { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }
.rarity .share { justify-content: center; }

/* シェアボタン */
.share--x { background: #111; border-color: #111; color: #fff; }
.share--x:hover { background: #333; border-color: #333; color: #fff; text-decoration: none; }
.share--line { background: #06c755; border-color: #06c755; color: #fff; }
.share--line:hover { background: #05b34c; border-color: #05b34c; color: #fff; text-decoration: none; }
.share-box .share { margin-top: var(--space-xs); }
.invite { border: 2px solid var(--color-shu); padding: var(--space-lg); max-width: 46rem; }
.invite h2::before { display: none; }

/* ペアの称号・上位%・分野別スコア */
.pairtitle { font-size: var(--text-md); color: var(--color-muted); }
.pairtitle b { font-size: 1.55em; color: var(--color-ink); font-weight: var(--w-display); }
.pairtitle__note { color: var(--color-muted); margin-bottom: var(--space-sm); }
.toppct { font-size: var(--text-sm); color: var(--color-accent); border: var(--rule-hair) solid var(--color-accent); padding: 0.2rem 0.7rem; border-radius: 999px; }
.toppct b { font-weight: 700; }
.subscore { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin-block: var(--space-sm); }
.subscore div { display: grid; }
.subscore span { font-size: var(--text-xs); color: var(--color-neutral); }
.subscore b { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-lg); font-weight: 600; }

/* 誕生日ページ内のペア診断 */
.pairhere { max-width: 46rem; }
.pairhere .pair { border-color: var(--color-accent); }
.pairhere__invite { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-md); padding-top: var(--space-md); }
.pairhere__invite p { margin-bottom: var(--space-2xs); }

/* 診断の記録・ランキング */
.rec { border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-lg); max-width: 46rem; }
.rec--best { border: 2px solid var(--color-shu); background: color-mix(in oklch, var(--color-shu) 6%, var(--color-paper)); }
.rec__msg { font-size: var(--text-md); }
.rec__nick { margin-top: var(--space-sm); font-size: var(--text-sm); }
.rec__nick input { font-family: var(--font-body); font-size: var(--text-base); padding: 0.5rem 0.7rem; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); min-height: 44px; }
.rec__more { margin-top: var(--space-sm); }
.kk__summary { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-block: var(--space-md); }
.kk__summary div { display: grid; }
.kk__summary span { font-size: var(--text-xs); color: var(--color-neutral); }
.kk__summary b { font-family: var(--font-numeric); font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; }
table.kk { min-width: 34rem; }
table.kk td { text-align: left; padding: 0.6rem 0.8rem; }
.kk__rank { width: 4rem; text-align: center !important; font-weight: 700; }
.kk__who a { font-weight: 700; color: var(--color-ink); }
.kk__rel { display: block; font-size: var(--text-xs); color: var(--color-neutral); }
.kk__t { color: var(--color-muted); font-size: var(--text-sm); }
.kk__s { text-align: right !important; white-space: nowrap; }
.kk__s b { font-family: var(--font-numeric); font-size: var(--text-lg); font-weight: 600; }

/* 記録ページ（カード型リスト） */
.kk__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; margin-block: var(--space-md) var(--space-lg); }
.kklist { list-style: none; display: grid; gap: var(--space-xs); max-width: 46rem; }
.kkc { display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; gap: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-sm) var(--space-md); }
.kkc--best { border-color: var(--color-shu); border-width: 2px; }
.kkc__rank { font-size: var(--text-md); text-align: center; font-weight: 700; color: var(--color-neutral); }
.kkc__main { display: grid; min-width: 0; }
.kkc__who { font-size: var(--text-md); font-weight: 700; overflow-wrap: anywhere; }
.kkc__meta { font-size: var(--text-xs); color: var(--color-neutral); }
.kkc__score { white-space: nowrap; font-family: var(--font-numeric); }
.kkc__score b { font-size: var(--text-xl); font-weight: 600; }
.kkc__score small { font-size: var(--text-xs); color: var(--color-neutral); }
.kkc__act { display: flex; gap: 0.3rem; }
.kkc__btn { font-size: var(--text-xs); font-family: var(--font-body); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); padding: 0.35rem 0.6rem; min-height: 32px; cursor: pointer; display: inline-flex; align-items: center; }
.kkc__btn:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.kkc__btn--del:hover { border-color: var(--color-shu); color: var(--color-shu); }
.kk__hint { font-size: var(--text-xs); margin-top: var(--space-xs); }
@media (max-width: 40rem) {
  .kkc { grid-template-columns: 2.4rem 1fr auto; }
  .kkc__act { grid-column: 2 / -1; }
}

/* 結果直後の即時シェア */
.hotshare { border: 2px solid var(--color-shu); background: color-mix(in oklch, var(--color-shu) 5%, var(--color-paper)); padding: var(--space-lg); margin-block: var(--space-md) var(--space-lg); max-width: 46rem; }
.hotshare__lead { font-weight: 700; font-size: var(--text-md); margin-bottom: var(--space-sm); }
.hotshare .share--line { font-size: var(--text-md); padding: 0.85rem 1.6rem; }
.hotshare__note { font-size: var(--text-xs); color: var(--color-neutral); margin-top: var(--space-sm); }
.hotshare__more { margin-top: var(--space-xs); font-size: var(--text-sm); }
.phead--tight { padding-block: var(--space-xs) var(--space-sm); }
.phead--tight h1 { font-size: var(--text-xl); }
.pair__note { font-size: var(--text-xs); color: var(--color-neutral); margin-top: var(--space-2xs); }
.nextpair .share { gap: var(--space-sm); }

/* 記録ページのシェア */
.kk__share { border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-md) var(--space-lg); margin-top: var(--space-lg); max-width: 46rem; }
.kk__share-l { font-weight: 700; margin-bottom: var(--space-xs); }
.kk__share .share { align-items: center; }

/* 体の相性ページ */
.karada__form { border: 2px solid var(--color-accent); margin-block: var(--space-md) var(--space-xl); max-width: 46rem; }
.klist { margin: var(--space-sm) 0 var(--space-sm) 1.4em; }
.klist li { margin-bottom: var(--space-2xs); }
table.ktable { min-width: 34rem; }
table.ktable th { text-align: left; white-space: nowrap; background: var(--color-paper-2); }
table.ktable td { text-align: left; }
.pairhere__karada { margin-top: var(--space-sm); }

/* ---- 今日の九星ランキング（トップ） ---- */
.trank { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-md) var(--space-lg); }
.trank__lead { font-weight: 700; margin-bottom: var(--space-xs); }
.trank__list { list-style: none; display: grid; gap: 1px; background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); }
.trank__item { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: var(--space-sm); background: var(--color-paper); padding: 0.4rem var(--space-sm); }
.trank__item.is-top { background: color-mix(in oklch, var(--color-shu) 6%, var(--color-paper)); }
.trank__no { font-family: var(--font-numeric); font-weight: 600; color: var(--color-neutral); text-align: center; }
.trank__item.is-top .trank__no { color: var(--color-shu); }
.trank__st { color: var(--color-shu); font-size: var(--text-xs); letter-spacing: -0.05em; }
.trank__note { font-size: var(--text-xs); color: var(--color-neutral); margin-top: var(--space-xs); }

/* ---- 今日この人にどう接する？（ペア結果） ---- */
.ftoday { border-left: 3px solid var(--color-shu); padding-left: var(--space-md); }
.ftoday__head { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-sm); }
.ftoday__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ftoday__grid > div { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-sm); display: grid; gap: 0.2rem; }
.ftoday__grid span { font-size: var(--text-xs); color: var(--color-neutral); }
.ftoday__grid b { font-size: var(--text-base); }
.ftoday__grid .stars { color: var(--color-shu); font-size: var(--text-xs); font-style: normal; letter-spacing: -0.05em; }
.ftoday__word { background: color-mix(in oklch, var(--color-shu) 6%, var(--color-paper)); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm) var(--space-md); }
.ftoday__word b { font-size: var(--text-md); }
@media (max-width: 40rem) { .ftoday__grid { grid-template-columns: 1fr; } }

/* ---- 結婚生活の相性 ---- */
.seikatsu h3 { font-size: var(--text-base); margin-top: var(--space-md); }
.seikatsu .subscore { margin-bottom: var(--space-md); }

/* ---- 吉日診断 ---- */
.kichi__form { border: 2px solid var(--color-accent); max-width: 46rem; }
.kichi__list { list-style: none; display: grid; gap: var(--space-xs); }
.kichi__item { display: grid; grid-template-columns: 2rem 1fr auto auto; align-items: center; gap: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-sm) var(--space-md); }
.kichi__item:first-child { border-color: var(--color-shu); border-width: 2px; }
.kichi__rank { font-family: var(--font-numeric); font-weight: 600; text-align: center; color: var(--color-neutral); }
.kichi__item:first-child .kichi__rank { color: var(--color-shu); }
.kichi__main { display: grid; min-width: 0; }
.kichi__main b { font-size: var(--text-md); }
.kichi__why { font-size: var(--text-xs); color: var(--color-neutral); }
.kichi__score { font-family: var(--font-numeric); }
.kichi__score b { font-size: var(--text-lg); font-weight: 600; }
@media (max-width: 40rem) {
  .kichi__item { grid-template-columns: 1.8rem 1fr auto; }
  .kichi__item .kkc__btn { grid-column: 2 / -1; justify-self: start; }
}

/* ---- 家族・チーム相性マップ ---- */
table.matrix { border-collapse: collapse; min-width: 30rem; }
table.matrix th, table.matrix td { border: var(--rule-hair) solid var(--color-rule); padding: var(--space-xs) var(--space-sm); text-align: center; }
table.matrix thead th { background: var(--color-paper-2); font-size: var(--text-sm); }
table.matrix tbody th { text-align: left; background: var(--color-paper-2); white-space: nowrap; }
.kk__rel { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-neutral); }
table.matrix td a { display: block; font-family: var(--font-numeric); font-weight: 600; padding: 0.35rem 0; text-decoration: none; }
table.matrix td a.g2 { background: color-mix(in oklch, var(--color-shu) 16%, var(--color-paper)); color: var(--color-ink); }
table.matrix td a.g1 { background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper)); color: var(--color-ink); }
table.matrix td a.g0 { color: var(--color-neutral); }
table.matrix td a:hover { outline: 2px solid var(--color-accent); }
table.matrix td.g0 { color: var(--color-rule-2); }

/* ---- 今週の一問 ---- */
.toi__q { font-size: var(--text-lg); font-weight: 700; line-height: 1.5; }
.toi__lead { font-size: var(--text-sm); color: var(--color-neutral); margin-bottom: var(--space-xs); }
.toi__opts { display: grid; gap: var(--space-xs); max-width: 32rem; margin-block: var(--space-md) var(--space-lg); }
.toi__opt { display: block; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); padding: var(--space-md); font-size: var(--text-md); text-decoration: none; color: var(--color-ink); min-height: 44px; }
.toi__opt:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-paper-2); text-decoration: none; }
.toi__result { font-size: var(--text-md); margin-top: var(--space-sm); }
.toi__ans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-block: var(--space-sm); }
.toi__ans > div { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-sm) var(--space-md); display: grid; gap: 0.2rem; }
.toi__ans span { font-size: var(--text-xs); color: var(--color-neutral); }
.toi__ans b { font-size: var(--text-md); }
@media (max-width: 40rem) { .toi__ans { grid-template-columns: 1fr; } }

/* ---- 称号コレクション ---- */
.col__count { font-family: var(--font-numeric); margin-bottom: var(--space-sm); }
.col__count b { font-size: var(--text-xl); font-weight: 600; color: var(--color-shu); }
.col__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-xs); max-width: 46rem; }
.col__c { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding: var(--space-sm); display: grid; gap: 0.2rem; color: var(--color-neutral); }
.col__c b { font-size: var(--text-sm); }
.col__c span { font-size: var(--text-xs); overflow-wrap: anywhere; }
.col__c--on { background: var(--color-paper); border-color: var(--color-shu); color: var(--color-ink); }
.col__c--on b { color: var(--color-shu); font-size: var(--text-base); }

/* ---- 縦長シェア画像（保存用） ---- */
.storyimg { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); padding: var(--space-md) var(--space-lg); margin-block: var(--space-md); max-width: 46rem; }
.storyimg__l { font-weight: 700; margin-bottom: var(--space-xs); }
.storyimg__row { display: flex; gap: var(--space-md); align-items: flex-start; }
.storyimg img { width: 7.5rem; height: auto; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); }
.storyimg__note { font-size: var(--text-xs); color: var(--color-neutral); margin-top: var(--space-xs); }

/* ---- 導線チェックの指摘ぶん（家族マップ・吉日・一問・記録の追補） ---- */
.fam__form input[type="text"] { min-height: 44px; padding: 0.5rem; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-base); min-width: 0; }
.pair__who .who small { font-weight: 400; color: var(--color-neutral); font-size: var(--text-xs); }
.fam__more, .fam__redo, .kichi__redo { border-top: var(--rule-hair) solid var(--color-rule); }
.fam__more summary, .fam__redo summary, .kichi__redo summary { cursor: pointer; padding: var(--space-sm) 0; font-size: var(--text-sm); color: var(--color-accent); min-height: 44px; display: flex; align-items: center; }
.fam__redo, .kichi__redo { margin-block: var(--space-lg); max-width: 46rem; }
.fam__sample table.matrix td span { display: block; font-family: var(--font-numeric); font-weight: 600; padding: 0.35rem 0; }
.fam__sample table.matrix td span.g2 { background: color-mix(in oklch, var(--color-shu) 16%, var(--color-paper)); }
.fam__sample table.matrix td span.g1 { background: color-mix(in oklch, var(--color-accent) 10%, var(--color-paper)); }
.fam__sample { opacity: 0.85; }

.kichi__care { display: block; font-size: var(--text-xs); color: var(--color-shu); }
.toi__who { font-size: var(--text-xs); color: var(--color-neutral); margin-bottom: var(--space-xs); }

.kkc__nick { grid-column: 1 / -1; display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.kkc__nick input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0.4rem; border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper); font-family: var(--font-body); }
.nav__link--rec { color: var(--color-shu); font-weight: 700; }

/* ---- 導線チェック2回目の指摘ぶん ---- */
/* 3人程度なら375pxでも収まるように、matrix の最小幅を列数に任せる */
table.matrix { min-width: 0; }
table.matrix th, table.matrix td { padding: var(--space-xs) var(--space-2xs); }
@media (min-width: 30rem) { table.matrix th, table.matrix td { padding: var(--space-xs) var(--space-sm); } }
.pmeta--note { color: var(--color-shu); }

/* ---- 吉日診断: 重みの切り替えタブ ---- */
.wsw { display: flex; flex-wrap: wrap; gap: 1px; background: var(--color-rule); border: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-md); max-width: 46rem; }
.wsw a { flex: 1 1 auto; text-align: center; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); padding: 0.6rem 0.5rem; min-height: 44px; display: flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.wsw a:hover { background: var(--color-paper-2); color: var(--color-accent); text-decoration: none; }
.wsw a[aria-current="page"] { background: var(--color-ink); color: var(--color-onink); font-weight: 700; }

/* ---- 家族マップ: 見本の折りたたみ ---- */
.fam__sample-fold { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); margin-block: var(--space-md); max-width: 46rem; }
.fam__sample-fold summary { cursor: pointer; padding: var(--space-md); font-size: var(--text-base); font-weight: 700; color: var(--color-accent); min-height: 44px; display: flex; align-items: center; }
.fam__sample-fold .sec { padding-inline: var(--space-md); padding-bottom: var(--space-md); }
.fam__sample-fold .sec h2 { display: none; }

/* ---- 「今日のわたしを3行で」はマイ運勢バー（濃紺の面）の中に置くので、
        白地カードではなく“濃紺の上に浮かぶ半透明パネル”にする。
        ここを var(--color-paper) にすると白地に白文字で消える（2026-08-17 実際に消えた） ---- */
.t3 {
  background: color-mix(in oklch, var(--color-onink) 9%, transparent);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-onink) 22%, transparent);
  color: var(--color-onink);
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-sm);
  max-width: 40rem;
}
.t3__l { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; margin-bottom: var(--space-xs); color: color-mix(in oklch, var(--color-onink) 70%, transparent); }
.t3__list { list-style: none; display: grid; gap: 0.35rem; }
.t3__list li { display: grid; grid-template-columns: 4rem 1fr; align-items: baseline; gap: var(--space-sm); }
.t3__list span {
  font-size: var(--text-xs); font-weight: 700; text-align: center; padding: 0.2rem 0;
  color: var(--color-onink); background: color-mix(in oklch, var(--color-onink) 20%, transparent);
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-onink) 30%, transparent);
}
.t3__list b { font-size: var(--text-base); font-weight: 700; color: var(--color-onink); overflow-wrap: anywhere; }
.t3__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-sm); }
.t3__b { display: grid; gap: 0.2rem; }
.t3__b span { font-size: var(--text-xs); color: color-mix(in oklch, var(--color-onink) 70%, transparent); }
.t3__b i { display: block; height: 5px; background: color-mix(in oklch, var(--color-onink) 22%, transparent); position: relative; }
.t3__b i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--color-shu); }
.t3__b em { font-style: normal; font-size: var(--text-xs); color: var(--color-shu); letter-spacing: -0.05em; }
.t3__share { margin-top: var(--space-sm); }
/* 濃紺の面の上では、線ボタンの文字色を反転させないと読めない */
.mybar .t3__share .btn--line { color: var(--color-onink); border-color: color-mix(in oklch, var(--color-onink) 45%, transparent); background: transparent; }
.mybar .t3__share .btn--line:hover { background: color-mix(in oklch, var(--color-onink) 12%, transparent); color: var(--color-onink); }
@media (max-width: 30rem) {
  .t3__list li { grid-template-columns: 3.4rem 1fr; gap: var(--space-xs); }
  .t3__bars { gap: var(--space-sm); }
}

/* ---- 運気の波: グラフの下に言葉での説明を置く ---- */
.mybar__wave { max-width: 34rem; }
.mybar__wave-note { font-size: var(--text-sm); margin-top: 0.1rem; }
.mybar__wave-note b { font-weight: 700; color: var(--color-shu); }

/* ---- 年代ページ（/birthday/1970s/） ---- */
.dec__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--space-xs); }
.dec__y { display: grid; gap: 0.15rem; border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-sm) var(--space-md); color: var(--color-ink); text-decoration: none; }
.dec__y:hover { border-color: var(--color-accent); text-decoration: none; }
.dec__y b { font-size: var(--text-lg); font-weight: 600; }
.dec__star { font-size: var(--text-base); font-weight: 700; color: var(--color-accent); }
.dec__meta { font-size: var(--text-xs); color: var(--color-neutral); }
.decade { font-family: var(--font-body); }

/* ---- 記録: モード移行した（点数を出し直す）記録 ---- */
.kkc--stale { opacity: 0.72; border-style: dashed; }
.kkc__score--stale { font-size: var(--text-xs); color: var(--color-shu); white-space: nowrap; font-weight: 700; }
.kk__migrated { border-left: 3px solid var(--color-shu); background: color-mix(in oklch, var(--color-shu) 5%, var(--color-paper)); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); margin-bottom: var(--space-sm); max-width: 46rem; }

/* ---- ペア結果: 見出しを短くしてスコアを1画面目に入れる ---- */
.phead--tight .pmeta { font-size: var(--text-sm); }
.phead--tight .pmeta .num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.pairtitle { margin-bottom: var(--space-xs); }
.lead-box .score { margin-block: var(--space-xs) 0; }
.pairtitle__note { margin-block: 0 var(--space-md); max-width: 46rem; color: var(--color-muted); }
@media (max-width: 40rem) {
  /* 称号→点数→LINE を1画面に収めるため、結果ページ上部の余白を詰める */
  .phead--tight { padding-block: var(--space-2xs) var(--space-xs); }
  .phead--tight + .lead-box { padding: var(--space-md); margin-block: var(--space-xs) var(--space-sm); }
  .hotshare { padding: var(--space-md); margin-block: 0 var(--space-md); }
  .pairtitle__note { font-size: var(--text-sm); }
}