/* Hallmark · genre: modern-minimal · macrostructure: Ecosystem Index · theme: custom
 * vibe: "藍と朱の計器盤・和のデータベース" · paper oklch(97.5% 0.006 250) · accent oklch(45% 0.14 258) cool-indigo
 * type: Hiragino Sans / Yu Gothic 800+400 (system-JP per user perf constraint) · outlier: Avenir Next/Segoe UI (stats+dates, 2 slots)
 * axes: light / gothic-heavy / cool · enrichment: Tier-C generated still (assets/hero.png, user-approved)
 * nav: N1b (links=5 · no-dropdown · always-solid) · footer: Ft5 (statement 14ch · wordmark-under · hairline)
 * motion: cut — micro state shifts only, no reveals · pre-emit critique: P4 H4 E4 S4 R5 V4
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
body {
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--text-base);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }

/* ---- nav · N1b always-solid ---- */
.nav { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); position: relative; z-index: var(--z-sticky); }
.nav__inner { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav__brand { justify-self: start; font-weight: var(--w-display); font-size: var(--text-md); color: var(--color-ink); letter-spacing: 0.02em; white-space: nowrap; }
.nav__brand:hover { text-decoration: none; }
.nav__brand .b-mark { display: inline-block; width: 0.55em; height: 0.55em; background: var(--color-shu); margin-inline-end: 0.4em; }
.nav__center { justify-self: center; display: flex; gap: var(--space-lg); }
.nav__link { color: var(--color-ink); font-size: var(--text-sm); white-space: nowrap; padding: var(--space-xs) 0; border-bottom: 2px solid transparent; transition: border-color var(--dur-micro) var(--ease-out); }
.nav__link:hover { text-decoration: none; border-bottom-color: var(--color-accent); }
.nav__right { justify-self: end; }

/* ---- buttons ---- */
.btn { display: inline-block; font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; padding: 0.7rem 1.6rem; min-height: 44px; border: var(--rule-hair) solid var(--color-ink); background: var(--color-ink); color: var(--color-onink); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-rule); border-color: var(--color-rule); color: var(--color-neutral); cursor: not-allowed; }
.btn--line { background: transparent; color: var(--color-ink); }
.btn--line:hover { background: var(--color-paper-2); color: var(--color-ink); }
.btn--sm { font-size: var(--text-sm); padding: 0.45rem 1.1rem; }

/* ---- opening · featured surface (7/5 split, right figure clipped past edge) ---- */
.open { padding-block: var(--space-2xl) var(--space-xl); }
.open__grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-xl); align-items: center; }
.open h1 { font-size: var(--text-3xl); font-weight: var(--w-display); line-height: 1.35; letter-spacing: 0.01em; }
.open__lede { margin-top: var(--space-md); color: var(--color-muted); max-width: 44em; }
.open__trust { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); letter-spacing: 0.04em; }
.open__figure { min-width: 0; margin-inline-end: calc(-1 * clamp(2rem, 8vw, 8rem)); }
.open__figure img { width: 100%; height: auto; }

/* ---- diagnosis form (GET, no-JS) ---- */
.diag { margin-top: var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); padding: var(--space-lg); max-width: 560px; }
.diag__label { font-size: var(--text-sm); font-weight: 700; display: block; margin-bottom: var(--space-sm); }
.diag__row { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: stretch; }
select { font-family: var(--font-body); font-size: var(--text-base); font-variant-numeric: tabular-nums; color: var(--color-ink); background: var(--color-paper); border: none; border-bottom: 2px solid var(--color-rule-2); padding: 0.6rem 0.5rem; min-height: 44px; cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out); }
select:hover { border-bottom-color: var(--color-neutral); }
select:focus-visible { border-bottom-color: var(--color-accent); }

/* ---- stat strip · T4 (4-up, real numbers) ---- */
.stats { border-block: var(--rule-hair) solid var(--color-rule); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-inline-start: var(--rule-hair) solid var(--color-rule); padding-inline-start: var(--space-md); }
.stat:first-child { border-inline-start: none; padding-inline-start: 0; }
.stat b { display: block; font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 600; line-height: 1.15; }
.stat span { font-size: var(--text-xs); color: var(--color-neutral); letter-spacing: 0.05em; }

/* ---- rails · S2 hanging heads + C3 typographic more-link ---- */
.rail { padding-block: var(--space-2xl); }
.rail--tint { background: var(--color-paper-2); padding-block: var(--space-xl); }
.rail__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-lg); }
.rail__head h2 { font-size: var(--text-lg); font-weight: var(--w-display); letter-spacing: 0.02em; }
.rail__head h2::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; background: var(--color-shu); margin-inline-end: 0.5em; }
.more { font-size: var(--text-sm); white-space: nowrap; border-bottom: 1px solid var(--color-accent); padding-bottom: 1px; }
.more:hover { text-decoration: none; border-bottom-width: 2px; }

/* ---- star cards · F6 (uniform, 3-up, micro-action) ---- */
.stars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.star { border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-2xs); transition: border-color var(--dur-micro) var(--ease-out); }
.star:hover, .star:focus-within { border-color: var(--color-accent); }
.star__el { width: 0.6rem; height: 0.6rem; margin-bottom: var(--space-2xs); }
.el-sui  { background: var(--el-sui); }
.el-moku { background: var(--el-moku); }
.el-do   { background: var(--el-do); }
.el-kin  { background: var(--el-kin); border: var(--rule-hair) solid var(--color-rule-2); }
.el-ka   { background: var(--el-ka); }
.star b { font-size: var(--text-md); font-weight: var(--w-display); }
.star b a { color: var(--color-ink); }
.star b a:hover { color: var(--color-accent); text-decoration: none; }
.star i { font-style: normal; font-family: var(--font-numeric); font-size: var(--text-xs); color: var(--color-neutral); letter-spacing: 0.08em; }
.star .star__go { font-size: var(--text-sm); margin-top: var(--space-2xs); }

/* ---- pair form rail ---- */
.pair { border: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-lg); display: grid; gap: var(--space-md); }
.pair__who { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-sm); align-items: center; }
.pair__who .who { font-size: var(--text-sm); font-weight: 700; }
.pair__foot { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }

/* ---- today band ---- */
.today { display: flex; gap: var(--space-lg); align-items: baseline; flex-wrap: wrap; }
.today__date { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 600; }
.today__star { font-size: var(--text-md); font-weight: var(--w-display); }
.today__hint { color: var(--color-muted); font-size: var(--text-sm); max-width: 34em; }
.today__note { font-size: var(--text-xs); color: var(--color-neutral); }

/* ---- browse by year ---- */
.decades { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-md); }
.decade { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-sm); border: var(--rule-hair) solid var(--color-rule-2); padding: 0.5rem 0.9rem; min-height: 44px; display: inline-flex; align-items: center; color: var(--color-ink); transition: border-color var(--dur-micro) var(--ease-out); }
.decade:hover { border-color: var(--color-accent); text-decoration: none; }
.decade[aria-current="true"] { border-color: var(--color-ink); font-weight: 700; }
.years { display: flex; gap: var(--space-xs) var(--space-md); flex-wrap: wrap; font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.years a { padding: 0.35rem 0.2rem; display: inline-block; }

/* ---- articles (typographic list, no cards) ---- */
.articles { display: grid; gap: 0; }
.articles a { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-weight: 700; }
.articles a:first-child { border-top: var(--rule-hair) solid var(--color-rule); }
.articles a:hover { color: var(--color-accent); text-decoration: none; }
.articles .a-note { font-weight: var(--w-body); color: var(--color-neutral); font-size: var(--text-sm); white-space: nowrap; }

/* ---- FAQ (native details, no JS) ---- */
.faq { max-width: 65ch; }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { font-weight: 700; padding: var(--space-md) 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "＋"; color: var(--color-accent); margin-inline-end: var(--space-sm); }
.faq details[open] summary::before { content: "－"; }
.faq details p { color: var(--color-muted); padding: 0 0 var(--space-md) 1.6em; max-width: 60ch; }

/* ---- footer · Ft5 statement ---- */
.foot { margin-top: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl) var(--space-xl); }
.foot__line { font-size: clamp(1.6rem, 4vw, 2.9rem); font-weight: var(--w-display); line-height: 1.3; letter-spacing: 0.01em; max-width: 28ch; }
.foot__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-neutral); }
.foot__meta nav { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.foot__meta a { color: var(--color-neutral); }
.foot__disc { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); font-size: var(--text-sm); }
.foot__links a { color: var(--color-ink); padding-block: var(--space-2xs); }

/* ---- responsive ---- */
@media (max-width: 60rem) {
  /* 狭い画面ではメニューを2段目に落とし、横スクロールで全項目に触れるようにする（隠さない） */
  .nav__inner { height: auto; grid-template-columns: 1fr auto; padding-block: var(--space-xs); row-gap: var(--space-2xs); }
  .nav__brand { grid-row: 1; grid-column: 1; }
  .nav__right { grid-row: 1; grid-column: 2; }
  .nav__center {
    grid-row: 2; grid-column: 1 / -1; justify-self: stretch; gap: var(--space-md);
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter);
    border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-2xs);
    /* 右端をフェードさせて「まだ続きがある」ことを示す */
    mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
  }
  .nav__center::-webkit-scrollbar { display: none; }
  .nav__link { padding-block: var(--space-xs); }
  .open__grid { grid-template-columns: 1fr; }
  .open__figure { margin-inline-end: 0; order: -1; }
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-inline-start: none; padding-inline-start: 0; }
  .stars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair__who { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .open h1 { overflow-wrap: anywhere; min-width: 0; }
  /* 年・月・日は狭い画面でも横一列に並べる（縦積みにすると入力完了まで2画面スクロールになる） */
  .diag__row { flex-wrap: wrap; align-items: stretch; gap: var(--space-2xs); }
  .diag__row > select { flex: 1 1 0; min-width: 0; padding-inline: 0.25rem; font-size: var(--text-sm); }
  .diag__row > .btn,
  .diag__row > input[type="text"],
  .diag__row > .more { flex: 1 0 100%; width: 100%; }
  .diag__row > .btn { margin-top: var(--space-2xs); text-align: center; }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-inline-start: none; padding-inline-start: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .stat:first-child { border-top: none; }
  .rail { padding-block: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
}

/* ---- モード切替タブ (CSSのみ・JS不使用) ---- */
.modetabs { position: relative; }
.modetabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.modetabs__bar { display: flex; gap: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-lg); }
.modetabs__bar label { cursor: pointer; font-size: var(--text-base); font-weight: 700; color: var(--color-neutral); padding: var(--space-xs) 0 var(--space-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-micro) var(--ease-out); }
.modetabs__bar label:hover { color: var(--color-ink); }
.modetabs__panel { display: none; }
#pm-date:checked ~ .modetabs__bar label[for="pm-date"],
#pm-star:checked ~ .modetabs__bar label[for="pm-star"] { color: var(--color-ink); border-bottom-color: var(--color-shu); }
#pm-date:checked ~ .modetabs__panel--date { display: block; }
#pm-star:checked ~ .modetabs__panel--star { display: block; }
#pm-date:focus-visible ~ .modetabs__bar label[for="pm-date"],
#pm-star:focus-visible ~ .modetabs__bar label[for="pm-star"] { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- マイ運勢パネル ---- */
.mybar { background: var(--color-ink); color: var(--color-onink); }
.mybar__in { padding-block: var(--space-sm); display: grid; gap: var(--space-xs); }
.mybar__head { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.mybar__me { font-weight: 700; font-size: var(--text-sm); }
.mybar__streak { font-size: var(--text-xs); background: color-mix(in oklch, var(--color-shu) 30%, transparent); padding: 0.2rem 0.7rem; border-radius: 999px; display: inline-flex; align-items: baseline; gap: 0.35em; }
.mybar__streak b { font-weight: 700; }
.mybar__streak small { font-size: 0.9em; opacity: 0.75; border-left: 1px solid color-mix(in oklch, var(--color-onink) 35%, transparent); padding-left: 0.5em; }
.mybar__x { margin-left: auto; background: transparent; border: 1px solid color-mix(in oklch, var(--color-onink) 40%, transparent); color: var(--color-onink); font-size: var(--text-xs); padding: 0.3rem 0.7rem; cursor: pointer; min-height: 32px; }
.mybar__x:hover { border-color: var(--color-onink); }
.mybar__body { font-size: var(--text-sm); line-height: 1.7; max-width: 72ch; }
.mybar__body p { margin: 0.2rem 0; }
.mybar__stars .stars { color: var(--color-shu); letter-spacing: 0.1em; }
.mybar__stars .stars .off { color: color-mix(in oklch, var(--color-onink) 30%, transparent); }
.mybar__grid { display: flex; gap: var(--space-lg); flex-wrap: wrap; margin: var(--space-xs) 0; }
.mybar__grid div { display: grid; }
.mybar__grid span { font-size: var(--text-xs); color: color-mix(in oklch, var(--color-onink) 65%, transparent); }
.mybar__grid b { font-weight: 700; }
.mybar__wave { margin: var(--space-xs) 0; max-width: 40rem; }
.mybar__wave-l { display: block; font-size: var(--text-xs); color: color-mix(in oklch, var(--color-onink) 65%, transparent); margin-bottom: 2px; }
.mybar__wave svg { width: 100%; height: auto; color: var(--color-onink); }
.mybar__omikuji { margin-top: var(--space-xs); border-left: 3px solid var(--color-shu); padding-left: var(--space-sm); }
.mybar__omikuji-l { display: block; font-size: var(--text-xs); color: color-mix(in oklch, var(--color-onink) 65%, transparent); }
.mybar__omikuji b { font-size: var(--text-md); font-weight: 700; }
.mybar__more a { color: var(--color-onink); text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-xs); }
.mybar__loading { font-size: var(--text-xs); color: color-mix(in oklch, var(--color-onink) 60%, transparent); }
.savebd-wrap { margin-block: var(--space-md); }

/* ファーストビュー圧縮 */
.open__lede--short { font-size: var(--text-md); margin-top: var(--space-xs); }
.open__pairlink { margin-top: var(--space-sm); }
.open__pairlink a { font-weight: 700; border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; }
.open__pairlink a:hover { text-decoration: none; }
.open__pairlink span { display: block; font-weight: 400; font-size: var(--text-xs); color: var(--color-neutral); border: 0; margin-top: 2px; }

/* マイ運勢バーの1行版（トップ以外のページ用） */
.mybar--mini .mybar__in { padding-block: var(--space-xs); }
.mybar--mini .mybar__head { gap: var(--space-sm); }
.mybar--mini .mybar__me { font-size: var(--text-xs); }
.mybar__go { margin-left: auto; color: var(--color-onink); text-decoration: underline; text-underline-offset: 3px; font-size: var(--text-xs); white-space: nowrap; }

/* ---- トップのヒーローバンド（全幅・上に画像／下に見出しとフォーム） ---- */
.open { padding-block: 0 var(--space-xl); }
.open__band { width: 100%; line-height: 0; background: var(--color-paper-2); }
.open__band img { width: 100%; height: clamp(180px, 30vw, 420px); object-fit: cover; object-position: center 22%; }
.open__body { padding-top: var(--space-lg); }
.open__body h1 { font-size: var(--text-3xl); font-weight: var(--w-display); line-height: 1.35; letter-spacing: 0.01em; }
@media (max-width: 40rem) {
  .open__band img { height: 200px; object-position: center 30%; }
  .open__body { padding-top: var(--space-md); }
}