/* =====================================================================
   IKI会員サイト テーマ（SPEC §8・いぶし銀UI試作 2026-08-24 staging限定）
   世界観は白地（紙）× ダークネイビーが主役 × 金は見出し・アクセントに少量
   × いぶし銀は小見出し・サブテキスト。キャラはかわいい。
   ビルド不要方針のため素のCSS1枚。JSに頼らずCSSだけでモバイル対応する。
   ===================================================================== */

:root {
  --bg: #efefef;
  --surface: #ffffff;
  --surface-2: #e6e2db;
  --navy: #0b0f1e;

  /* 金は「文字用」と「装飾用」で役割を分ける（第2ラウンド 束B・2026-09-07）。
     理由：1枚の金で両方をまかなうと、罫線として気持ちのよい明るさが
     そのまま文字色にも使われ、白地で 2.02〜3.68:1 の読めない文字になる。
     - --gold-ink  … 明地の「文字」と「機能的な線」（フォーカス・選択・入力枠）。
                     #7d5a30 は白 6.22 ／ #efefef 5.41 ／ #e6e2db 4.82 で、
                     全ての明地で 4.5:1 を満たす最も明るい側の値。
                     A-11 の候補 #8a6435 は #e6e2db で 4.11 と届かない
                     （そこにマイページの保有ポイント等の金文字が乗る）。
     - --gold-line … 罫・枠・バー・背景・記号だけに使う純装飾。文字には使わない。 */
  --gold-ink: #7d5a30;
  --gold-line: #d1b280;

  --silver: #594d46;
  --accent: #b3342e;
  --positive: #2f7a68;
  --text: #0b0f1e;
  --muted: #594d46;

  /* ヘッダー・診断の進捗バーは常にダークネイビー地なので、この3つだけ明るい色を使う */
  --gold-on-dark: #e8ce8c;
  --muted-on-dark: #8b90a6;
  /* 暗地の赤。--accent(#b3342e) を暗地でそのまま使うと 3.12:1 にしかならず、
     いちばん読ませたい「自動保存に失敗しました」が読めなかった（P0-6）。 */
  --accent-on-dark: #d9736b;

  --radius: 8px;
  --hairline: 1px solid rgba(11, 15, 30, 0.15);
  --hairline-strong: 1px solid var(--gold-line);

  --header-h: 56px;
  --pane-left: 220px;
  --pane-right: 300px;
  --gap: 32px;

  --font-serif: 'Noto Serif JP', 'Yu Mincho', serif;
  --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}
/* アンカーで飛んだ先が、固定ヘッダーの下に潜らないようにする（P1-17・束C）。
   `section[id]` にだけ scroll-margin-top を置いていたため、掲示板のコメント
   （投稿直後に自分のコメントへ飛ぶ）やカレンダーの日付リンクでは効かず、
   飛んだ先がヘッダーに隠れていた。ここで全てのアンカー先に効かせる。 */
html {
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.6em;
  letter-spacing: 0.02em;
}

h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.2rem;
}
h3 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 1em;
}

/* リンクは「濃紺の文字＋金の下線」にする（束B・金の使い方の原則3）。
   金文字のままだと隣接する本文とのコントラストが 2.22:1 しかなく、下線も hover の
   ときだけだったため、規約・プラポリへの導線がリンクだと気づかれなかった（P1-4）。
   既定を「下線あり」に倒し、下線が邪魔な場所で明示的に消す方針にする。
   逆（既定を none にして必要な場所だけ付ける）にすると、あとから本文へ足した
   リンクが下線なしのまま埋もれる。 */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}
a:hover {
  text-decoration-color: var(--gold-ink);
}
/* 下線を出さない要素。ボタン・カード全体がリンクのもの・構造ナビゲーションは、
   位置と枠でリンクだと分かるため下線は要らない。
   ⚠️ これらは元々 `:hover` 側にしか text-decoration:none が無く、通常状態は
   `a` の既定（none）に乗っていた。既定を underline に反転した2026-09-07、
   **ボタンとカードが全部下線つきになった**（staging の実ブラウザで検出）。
   コンポーネントを足すときは、ここに並べるか base 側に none を書くこと。 */
/* ---- 暗地コンテナの中の文字色 ----------------------------------------
   明地用の色（--text / --navy）を持つ部品が暗地の中に置かれると読めなくなる。
   束Bで**3回**起きた：ヘッダーのログインリンク(1.06:1)／ドロワーの枠だけボタン(1.02:1)／
   ヘッダーのログアウト(1.02:1・`.btn-link`)。いずれも部品側は明地前提で正しく、
   置かれた場所が暗地であることだけが理由。**1か所ずつ潰すと必ず取りこぼす**ので、
   「暗地コンテナの中のリンク・ボタンは暗地用の色」をここでまとめて宣言する。

   金の使い方の原則1「小さいUI文字は下地を問わず navy/ink 系」は**明地の話**。
   暗地では原則2の「黒・濃紺地はほぼ常に通る」に従い --gold-on-dark を使う。

   `.btn-primary` は金地（明るい）なので濃紺のまま。`:not()` で外してある。
   暗地コンテナを増やしたら、このリストにも足すこと。 */
.site-header a,
.site-header button,
.site-header .btn-link,
.marketing-drawer a:not(.btn-primary),
.marketing-drawer button,
.marketing-drawer .btn:not(.btn-primary),
.follow-cta a:not(.btn-primary),
.follow-cta button,
.progress a,
.progress button,
.progress .btn-link,
.fv a:not(.btn-primary),
.site-footer-marketing a {
  color: var(--gold-on-dark);
}

.site-header a,
.marketing-drawer > a,
.comment-avatar,
.btn,
.btn-ghost-gold,
.nav a,
.member-card,
a.participant-card,
.calendar-event,
.calendar-cell,
.row-link,
.todo-list li a {
  text-decoration: none;
}

hr {
  border: 0;
  border-top: var(--hairline);
  margin: 1.5em 0;
}

small,
.muted {
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- ヘッダー --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(8, 7, 6, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: var(--hairline);
}

.site-header .brand {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--gold-on-dark);
  letter-spacing: 0.14em;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.site-header .brand:hover {
  text-decoration: none;
}

.site-header .spacer {
  flex: 1;
}

/* ログアウトは全ページ常駐なのに実測 75×21px だった（P1-11・束C）。
   誤タップも押せないのも困るので、高さを44pxにする。 */
.site-header .btn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

/* 未ログイン時のログイン導線。**スマホでは ☰ を開かないとログインに到達できなかった**
   （公開LPは .site-header-cta を ≤900px で display:none にしていたため。束C追補・2026-09-08）。
   全ページ常駐の導線なので、44px の当たり判定で常に出す。
   文字色は「暗地コンテナの中のリンク」の宣言（`.site-header a`）で効いている。 */
.header-login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  white-space: nowrap;
}

.site-header .who {
  font-size: 0.85rem;
  color: var(--muted-on-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

/* --- 3ペイン ---------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--pane-left) minmax(0, 1fr) var(--pane-right);
  gap: var(--gap);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--gap) 16px 64px;
}
/* 右ペインの有無で列数を変える（H4・2026-08-31）。
   `.shell` 単独では常に3列を確保していたため、右ペインを渡さない画面
   （マイページ・診断結果・プロフィール・一覧・管理画面）で 300px の空き列が
   残り、本文がその分だけ狭くなっていた。右ペインを出すのはホームだけ。 */
.shell-two {
  grid-template-columns: var(--pane-left) minmax(0, 1fr);
}
.shell-three {
  grid-template-columns: var(--pane-left) minmax(0, 1fr) var(--pane-right);
}

.pane-left,
.pane-right {
  position: sticky;
  top: calc(var(--header-h) + var(--gap));
}

.pane-main {
  min-width: 0; /* グリッド内で長い単語が溢れないように */
}
/* 読み幅の上限（P1-9）。1280px では中央カラムが981pxまで広がり、1行が約62字になる。
   公開LPは max-width:40em で効いているのに会員側だけ無かった。
   カード幅そのものを絞ると管理画面の表が窮屈になるため、本文の段落にだけ効かせる。 */
.pane-main p,
.pane-main .lead {
  max-width: 40em;
}

/* 共有用URL（/p/{token}）の1カラム。**会員レイアウトを流用しない**（束D・2026-09-08）。
   `.shell-two` は「左メニュー220px ＋ 本文1fr」の2列で、左メニューを持たない
   このページでは**本文が左の220px列に入って**しまい、PC幅で幅220px・左寄せになっていた
   （実測 1280px で `grid-template-columns: 220px 981px`・本文 left16/right236）。
   ログインしていない人が最初に見る画面なので、単独カラムで中央に置く。
   スマホ幅の余白は `.shell` と同じにして、見え方を変えない。 */
.public-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--gap) 16px 64px;
}
/* ヒーローもカードも同じ幅で中央に揃える（`.lp` の 640px 上限はここでは外す） */
.public-page .lp {
  max-width: 100%;
}

/* --- 左メニュー ------------------------------------------------------- */

.nav {
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px;
}

.nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.92rem;
}
.nav a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.nav a[aria-current='page'] {
  /* 現在地は「文字を金にする」のをやめ、背景と左の金の縦棒だけで示す（P0-4）。
     金文字だと 2.85:1 で、通常状態(17.8:1)の 1/6。全会員が全ページで見る場所なのに
     選択中だけ薄くなり、「押した項目が無効になった」と読めてしまっていた。 */
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--gold-line);
}

.nav .nav-section {
  margin-top: 10px;
  padding: 8px 12px 4px;
  border-top: var(--hairline);
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* --- カード ----------------------------------------------------------- */

.card {
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 32px;
  margin-bottom: var(--gap);
  transition: border-color 0.2s ease;
}
.card:hover {
  border-color: rgba(209, 178, 128, 0.6);
}

.card > :last-child {
  margin-bottom: 0;
}

.card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: var(--hairline);
}
.card-title h2,
.card-title h3 {
  margin: 0;
}

/* --- お知らせ（右ペイン） --------------------------------------------- */

.announce-item {
  padding: 14px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.35);
}
.announce-item:last-child {
  border-bottom: 0;
}
.announce-item .date {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}
.pin {
  color: var(--accent);
  font-size: 0.75rem;
  margin-right: 4px;
}

/* --- フォーム --------------------------------------------------------- */

.field {
  margin-bottom: 24px;
}
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}
.field .hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='search'],
textarea,
select {
  width: 100%;
  padding: 11px 12px;
  background: var(--surface-2);
  color: var(--text);
  /* 枠の不透明度 0.45 では地に対して 2.17:1 で、入力欄の輪郭が見えない（P1-5）。
     0.75 で 3.63:1（非テキストの基準3:1）を満たす。 */
  border: 1px solid rgba(89, 77, 70, 0.75);
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px; /* iOSで入力時にズームさせない */
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 2px rgba(209, 178, 128, 0.2);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ボタン（H1・2026-08-31：当たり判定と文字の位置を揃えた）
   - min-height 56px：指で押す前提の当たり判定を確保する
   - padding は 8 の倍数（16px / 24px）に揃える
   - 文字は必ず中央。矢印などの装飾を右に置いても中央がずれないよう、
     `.btn-icon` を使う場合は3列グリッド（24px | 1fr | 24px）にする */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 24px;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  background: transparent;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:hover {
  background: var(--gold-line);
  color: #0b0f1e;
  text-decoration: none;
}
/* キーボード操作でも「いまどこにいるか」が分かるようにする（H1） */
.btn:focus-visible {
  /* 装飾用の金(#d1b280)では白地で 2.02:1 にしかならず、H1で足したフォーカス表示が
     見えていなかった（P1-5）。機能的な線なので文字用の金を使う＝6.22:1。 */
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
}
/* 矢印つきボタン。ラベルを視覚的な中央に置いたまま右に装飾を出す */
.btn:has(.btn-icon) {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  gap: 8px;
}
.btn-label {
  grid-column: 2;
  min-width: 0;
}
.btn-icon {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: var(--gold-line);
  color: #0b0f1e;
  font-weight: 600;
}
/* ホバーは金地を濃くする。文字は白に切り替える
   （濃い金(#7d5a30)に濃紺のままだと 3.07:1 で読めない）。 */
.btn-primary:hover {
  background: var(--gold-ink);
  color: #fff;
}

.btn-accent {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-accent:hover {
  background: var(--accent);
  /* 赤地に濃紺だと 3.13:1。同じ赤地の .badge-self / .required は白文字で 6.09:1 で、
     赤地の文字色が画面ごとに食い違っていた（P1-3）。白に統一する。 */
  color: #fff;
}

/* 外部リンクが仮値のときの「近日公開」。押せないことが見て分かるようにする
   （リンクにすると example.com へ飛ぶ。views/cta.tsx を参照）。 */
/* 押せないことを示す（P1-33・2026-09-10 に `.btn.` を外した）。
   以前は `.btn.is-pending` だったため、`.btn` を含まないクラス
   （公開LPヘッダーの `.btn-ghost-gold` など）には**当たらなかった**。
   `UTAGE_JOIN_URL` が仮値のあいだ「近日公開」と出す仕組みが、
   その経路だけ押せるボタンのまま見えていた（＝Tier 2 の公開日に初めて分かる不具合）。 */
.is-pending {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-block {
  display: block;
  width: 100%;
}

/* アンカーで飛んだ先の見出しが、固定ヘッダーの下に潜らないようにする
   （H2・2026-08-31。見本ではJSで付けていたがCSSで足りる） */
section[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}
/* フォーカスを当てるために tabindex="-1" を付けた見出しに枠を出さない */
[tabindex='-1']:focus {
  outline: none;
}

/* 診断結果の末尾に並ぶ2つのボタン（H3・2026-08-31）。
   同じ幅で揃え、16px 空けて押し分けやすくする。スマホでは縦1列。 */
.result-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 900px) {
  .result-actions {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }
}

.btn-link {
  border: 0;
  background: none;
  color: var(--navy);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-decoration: underline;
}

/* 会員が入力した文章（掲示板の本文・コメント・イベントの説明）。
   改行を活かしつつ、**途中に空白の無い長いURL**でも折り返す（P1-15・束C）。
   overflow-wrap:normal のままだと、URL1本で掲示板全体に横スクロールが出る
   （実測：内容幅756px に対し表示幅321px）。anywhere にしないと日本語+URLでは折れない。 */
.user-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ボタンだけのフォームを並べる（共有の発行・停止など）。
   form が block なので、そのままだとボタンが縦に離れて見える。 */
.btn-row {
  display: inline-block;
  margin: 8px 8px 0 0;
}

/* 自己紹介ページの上部に出す本人用の操作（F-2・束D）。
   以前はページ末尾の「自分用の道具」に埋まっていて、本人がいちばん使う
   「編集する」に辿り着くのに全文をスクロールする必要があった。 */
.lp-self-actions {
  margin: 0 0 16px;
  text-align: right;
}

/* 一覧の切り替えタブ（会員管理の「在籍中／アーカイブ」など）。
   ボタンを並べ、いま見ているほうを金の枠で示す。 */
.tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tab-row .btn.is-current {
  border-color: var(--gold-ink);
  background: rgba(209, 178, 128, 0.18);
  font-weight: 700;
}

/* 診断結果の第2層「もっと詳しく」（2026-09-08）。
   開閉は <details>/<summary> で行いJSを使わない（ビルド不要・SSRの方針）。
   既定は閉じた状態。金は装飾（下線・三角）だけに使い、文字は濃紺のまま。 */
.type-more {
  margin-top: 18px;
  border-top: 1px solid rgba(89, 77, 70, 0.25);
}
.type-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px; /* 束Cの当たり判定の下限に合わせる */
  cursor: pointer;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  list-style: none; /* 既定の三角を消して、自前の印を出す */
}
.type-more > summary::-webkit-details-marker {
  display: none;
}
/* 開閉の向きが分かる印。色ではなく形で示す（色が見えなくても伝わる） */
.type-more > summary::before {
  content: '▶';
  color: var(--gold-ink);
  font-size: 0.8em;
  transition: transform 0.15s ease;
}
.type-more[open] > summary::before {
  transform: rotate(90deg);
}
.type-more > summary:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.22em;
}
.type-more > summary:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}
.type-more-body {
  padding: 4px 0 8px;
}
.type-more-block + .type-more-block {
  margin-top: 18px;
}
.type-more-block h3 {
  font-size: 0.9rem;
  margin: 0 0 6px;
  color: var(--gold-ink);
}

/* ページ送り（2026-09-08）。前へ／次へは押せないときも枠を残す
   （消すと押す位置が毎回ずれて、連打しづらくなる）。 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.pager-now {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 診断結果の冒頭（目次＋行動ボタン・2026-09-08）。
   解説が12セクションになり、ページが約2倍の長さになったので、
   「どこに何があるか」と「次に何をするか」を先に見せる（P1-22）。 */
.type-lead .result-actions {
  margin-bottom: 24px;
}
.type-toc h2 {
  font-size: 0.95rem;
  margin: 0 0 10px;
}
.type-toc ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2;
  column-gap: 24px;
}
.type-toc li {
  margin-bottom: 6px;
  break-inside: avoid;
}
@media (max-width: 600px) {
  /* 2段だと1項目あたりが狭くなり、見出しが折り返して読みにくい */
  .type-toc ol {
    columns: 1;
  }
}

/* --- 表 --------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table th,
.table td {
  text-align: left;
  padding: 16px;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.35);
  vertical-align: top;
}
.table thead th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.8rem;
  border-bottom: var(--hairline);
  white-space: nowrap;
}
.table tbody th {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
  width: 9em;
}
.table tr:last-child th,
.table tr:last-child td {
  border-bottom: 0;
}

/* 発行したリンクの表示＋コピーボタン */
.copy-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}
.copy-row input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}
.copy-row .btn {
  white-space: nowrap;
  flex: none;
}

/* --- 通知・バナー ----------------------------------------------------- */

.alert {
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  border: 1px solid;
}
.alert-error {
  border-color: var(--accent);
  background: rgba(179, 52, 46, 0.15);
  color: var(--accent);
}
.alert-ok {
  border-color: var(--gold-line);
  background: rgba(209, 178, 128, 0.12);
  color: var(--text);
}
.alert-info {
  border-color: rgba(89, 77, 70, 0.6);
  background: rgba(89, 77, 70, 0.12);
  color: var(--text);
}

.billing-banner {
  background: rgba(179, 52, 46, 0.9);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 0.87rem;
}
.billing-banner a {
  color: #fff;
  text-decoration: underline;
}

/* --- 認証などの単票ページ --------------------------------------------- */

.single {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 16px 80px;
}
.single .card {
  padding: 40px 32px;
}
.single h1 {
  text-align: center;
  margin-bottom: 8px;
}
.single .lead {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 24px;
}
.single .after {
  margin-top: 18px;
  text-align: center;
  font-size: 0.85rem;
}
/* 「パスワードをお忘れの方」「初めての方」。実測20px高（P1-13・束C）。
   ログインできない人が最後に頼るリンクなので、確実に押せる高さにする。 */
.single .after a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
}

/* --- タイプのバッジ・台座 --------------------------------------------- */

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: var(--hairline);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
}

.type-plinth {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.type-plinth img {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 男女1セット（2026-08-15）。1体だけ出していた画面もこの形に揃えた。
   横並びを崩さない：縦に積むと「2体で1セット」が読み取れなくなる。 */
.type-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: end;
}
.type-pair img {
  max-width: none;
}

/* --- 顔写真・アバター ------------------------------------------------- */

.avatar {
  border-radius: 50%;
  object-fit: cover;
  border: var(--hairline);
  background: var(--surface-2);
  flex: none;
  aspect-ratio: 1;
}

.avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--gold-ink);
}

.photo-edit {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.photo-frame {
  width: 132px;
  flex: none;
}
.photo-frame img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 50%;
  border: var(--hairline);
  display: block;
}
.photo-empty {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px dashed rgba(89, 77, 70, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
}
.photo-edit form {
  flex: 1 1 240px;
  min-width: 0;
}

/* 顔写真の未登録バナー */
.photo-banner {
  background: rgba(209, 178, 128, 0.14);
  border-bottom: var(--hairline);
  text-align: center;
  padding: 9px 16px;
  font-size: 0.85rem;
  color: var(--text);
}
/* 文中のリンクなので、行送りを変えずに当たり判定だけ広げる（束C）。
   inline-block を素で使うと行が高くなり、バナーの厚みが変わってしまう。 */
.photo-banner a {
  display: inline-block;
  padding: 12px 4px;
  margin: -12px 0;
}

/* --- 項目ラベルの補助表示 --------------------------------------------- */

.required {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
}
.visibility-note {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.7rem;
}

/* --- 検索・絞り込み行 ------------------------------------------------- */

.filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-row input[type='search'] {
  flex: 1 1 200px;
}
.filter-row select {
  flex: 0 1 170px;
}
.filter-row .btn {
  flex: none;
}

/* --- メンバーリスト --------------------------------------------------- */

.member-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.member-card {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  min-width: 0;
}
.member-card:hover {
  border-color: var(--gold-ink);
  text-decoration: none;
}
.member-card-body {
  min-width: 0;
}
.member-card-body strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 自己紹介LP ------------------------------------------------------- */

.lp {
  max-width: 640px;
  margin: 0 auto;
}

/* 会員側のヒーロー。公開LPは2026-08-24のFV刷新で `.fv` 系に移ったため、
   ここを使うのは自己紹介ページと診断結果だけ（2026-09-06・束A）。 */
.lp-hero {
  text-align: center;
  padding: 28px 20px 32px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  margin-bottom: var(--gap);
}
.lp-hero .avatar {
  margin: 0 auto 16px;
  display: block;
  width: 140px;
  height: 140px;
}
.lp-hero h1 {
  margin-bottom: 6px;
}
.lp-catch {
  font-family: var(--font-serif);
  color: var(--gold-ink);
  font-size: 1.05rem;
  margin-bottom: 14px;
}
/* 「実りの根 × 夢咲き」の組み合わせ表記（2026-08-24） */
.axis-combo {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.lp-badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-tagline {
  margin: 12px 0 0;
  font-size: 0.8rem;
}
.type-chip {
  border-radius: 50%;
  object-fit: cover;
}

/* 会員側（自己紹介ページ・診断結果）の枠付きカード。
   公開LPの「章」は別名の `.lp-chapter` にしてある（2026-09-06・束A）。
   以前は両方が `.lp-section` を名乗り、後から書かれた公開LP側が後勝ちして
   **会員側の左右パディングが0・背景が交互に抜ける**状態になっていた
   （UI監査 P0-1）。同じ名前を2用途で使わないこと。 */
.lp-section {
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
  margin-bottom: var(--gap);
}
.lp-section h2 {
  font-size: 1rem;
  color: var(--gold-ink);
  padding-bottom: 8px;
  border-bottom: var(--hairline);
}

.lp-list {
  margin: 0;
}
.lp-list dt {
  color: var(--muted);
  font-size: 0.76rem;
  margin-top: 14px;
}
.lp-list dt:first-child {
  margin-top: 0;
}
/* 画面には出さないが、読み上げには残す（N-2・束D）。
   セクション見出しと同じ文字列のラベルは、目で見ると同じ言葉が2行続くだけだが、
   dt を丸ごと消すと dl の対応が崩れ、読み上げでどの値が何なのか分からなくなる。
   `display:none` ではなく画面外へ逃がすのはそのため。 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 直前の dt が隠れているときは、値が見出しの直下に来るので上の余白を戻す */
.lp-list dt.sr-only + dd {
  margin-top: 14px;
}
.lp-list dt.sr-only:first-child + dd {
  margin-top: 0;
}
.lp-list dd {
  margin: 4px 0 0;
  white-space: pre-wrap; /* 複数行の入力を改行のまま出す */
  overflow-wrap: anywhere; /* 長いURLでも横に溢れさせない */
}

.lp-staff {
  border-color: var(--gold-line);
  background: rgba(209, 178, 128, 0.08);
}

.lp-qr {
  text-align: center;
}
.qr {
  width: 180px;
  height: 180px;
  display: block;
  margin: 12px auto 8px;
  border-radius: 4px;
  /* 拡大時にモジュールの境界がぼやけないように */
  image-rendering: pixelated;
}
.lp-url {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
  margin: 0;
}

.lp-tools {
  border-style: dashed;
}

/*
 * スクロールに合わせたフェードイン（CSSのみ・SPEC §6.4）。
 *
 * 対応ブラウザでだけ効かせる。@supports の外では要素は最初から見えている状態なので、
 * 未対応のブラウザで「中身が消えたまま」になることがない。
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes lp-reveal {
      from {
        opacity: 0;
        transform: translateY(18px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    .reveal {
      animation: lp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

/* --- 診断 ------------------------------------------------------------- */

/* 進捗バーは画面上部に貼り付けて、どこまで進んだか常に見えるようにする */
.progress {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(8, 7, 6, 0.96);
  backdrop-filter: blur(6px);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: var(--gap);
}
.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(89, 77, 70, 0.25);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  /* 進捗バーは常に暗地の上にある装飾。文字用の濃い金(#7d5a30)を混ぜると
     地に沈んで進み具合が読めなくなるため、暗地用の明るい金→装飾用の金にする。 */
  background: linear-gradient(90deg, var(--gold-on-dark), var(--gold-line));
  transition: width 0.25s ease;
}
.progress-text {
  margin-top: 6px;
  text-align: right;
  font-size: 0.78rem;
  color: var(--muted-on-dark);
}
/* 出る文言は「自動保存に失敗しました。最後に『回答を確定する』を押せば内容は送信されます」＝
   回答消失を防ぐ唯一の案内。暗地に --accent をそのまま置くと 3.12:1・12.48px で、
   いちばん読ませたいときに読めなかった（P0-6）。 */
.progress-notice:not(:empty) {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--accent-on-dark);
}

.q-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.q-item {
  padding: 24px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
}
.q-item:first-child {
  padding-top: 0;
}
.q-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.q-body {
  margin: 0 0 12px;
  line-height: 1.7;
}
/* 設問番号は「いま何問目か」を示す唯一の手がかり。装飾用の金(#d1b280)では
   白地 2.02:1／薄グレー地 1.76:1 で読めなかった（P0-3）。 */
.q-no {
  display: inline-block;
  min-width: 2em;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 0.85rem;
}

/* 5段階：横に並べる。指で押しやすい高さを確保する */
.q-choices {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.q-choice input,
.q-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.q-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 62px;
  padding: 6px 4px;
  border: 1px solid rgba(89, 77, 70, 0.75);
  border-radius: 6px;
  /* 0.68rem(10.88px)では読めない。ラベルを短縮して 0.8rem(12.8px) を確保する（P0-5）。
     375px ではセル幅が約56pxしかなく、この字送りだと1行4文字が上限。 */
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
  cursor: pointer;
  white-space: pre-line; /* 選択肢のラベルは改行込みで持っている */
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}
.q-choice:hover {
  border-color: var(--gold-ink);
  color: var(--text);
}
.q-choice:has(input:checked),
.q-choice.is-selected {
  /* 選択中は「濃紺の文字＋金の2px枠」で示す（P0-5）。
     ティントの地色(#f7f1e8)は白との差が 1.12 しかなく、地だけでは状態が伝わらない。 */
  border: 2px solid var(--gold-ink);
  background: rgba(209, 178, 128, 0.18);
  color: var(--text);
  font-weight: 700;
}
/* キーボード操作でも位置がわかるように */
.q-choice:has(input:focus-visible),
.q-option:has(input:focus-visible) {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}

/* 択一（タイブレーク・ゲスト診断）は縦積み */
.q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-option {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(89, 77, 70, 0.75);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.q-option:hover {
  border-color: var(--gold-ink);
}
.q-option:has(input:checked),
.q-option.is-selected {
  border: 2px solid var(--gold-ink);
  background: rgba(209, 178, 128, 0.18);
  color: var(--text);
}

/* 回答済みの設問はうっすら印を付ける（見落とし防止） */
.q-answered .q-no::after {
  content: '✓';
  margin-left: 4px;
  /* 回答済みの印は色に頼らず太字で示す（P0-3・金の使い方の原則3）。 */
  color: var(--text);
  font-weight: 700;
}

/* --- 相性・スコア ----------------------------------------------------- */

.compat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.compat-list li {
  padding: 14px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
}
.compat-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.compat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.compat-label {
  font-size: 0.78rem;
}
/* 相性のラベルは <strong> のテキスト自体が意味を持つ（色は補助）。
   12.48px の金文字は原則1・2のどちらにも当たらないため濃紺にする。 */
.compat-strong {
  color: var(--text);
}
.compat-talk {
  color: var(--positive);
}
.compat-learn {
  color: var(--muted);
}

.score-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.score-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 2.5em;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.8rem;
}
/* 指標の解釈文（2026-09-08）。3列グリッドの中に4つ目を足すと段が崩れるので、
   1行まるごとを使う位置に置く。 */
.score-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.7;
  margin: 2px 0 6px;
}

.score-label {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(89, 77, 70, 0.25);
  overflow: hidden;
}
.score-fill {
  display: block;
  height: 100%;
  background: var(--gold-line);
}
.score-value {
  text-align: right;
  color: var(--text);
}

@media (max-width: 420px) {
  /* 5段階は横幅が足りないので、文字だけ小さくして5列を保つ
     （縦積みにすると1問あたりが長くなり、49問が終わらなく感じるため） */
  /* 5列を保ったまま、短縮ラベル（最長「合わない」＝4文字）が2行に収まる幅を作る。
     staging の実測：この指定が無いと 360px（Androidの標準幅）で 3〜4行に割れた。
     セル幅は (画面幅 - 68px) / 5 で決まり、**344px 以上なら2行**に収まる。
     320px（iPhone SE 第1世代クラス）では3行に割れるが、はみ出しはせず読める。
     ここをさらに詰めるとカードの左右padding に手を入れることになるため、
     スマホ全般を扱う束Cで見直す。 */
  .q-choices {
    gap: 4px;
  }
  .q-choice {
    /* ここで 0.6rem(9.6px) まで縮めていたが、読めなくなるので下げない（P0-5）。 */
    min-height: 68px;
    padding: 4px 1px;
  }
  .score-list li {
    grid-template-columns: minmax(0, 1fr) 60px 2.5em;
  }
}

/* --- イベント：カレンダー --------------------------------------------- */

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.calendar-head h2 {
  margin: 0;
  font-size: 1.05rem;
  white-space: nowrap;
}
.calendar-head .btn {
  padding: 7px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  background: rgba(89, 77, 70, 0.2);
  border: var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.calendar-weekday {
  background: var(--surface-2);
  text-align: center;
  padding: 6px 2px;
  font-size: 0.75rem;
  color: var(--muted);
}
/* セル全体をリンクにする（P0-7・束C）。
   イベント名のリンクは実測 35.9×23px で、44px基準にまるで届いていなかった。
   リンクを44pxまで太らせるとセル高が58→100px超になり、5週で500pxを超えて
   カレンダーとして破綻する。**セル（実測 43.9×58px）そのものを当たり判定にする**のが
   面積を増やさずに解決できる唯一の形。
   1件の日はそのイベントへ、2件以上の日は「その日のイベント」一覧へ飛ばす。 */
.calendar-cell {
  background: var(--surface);
  min-height: 74px;
  padding: 4px;
  font-size: 0.75rem;
  color: var(--text);
}
a.calendar-cell:hover,
a.calendar-cell:focus-visible {
  background: rgba(209, 178, 128, 0.14);
}
a.calendar-cell:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: -2px;
}
.calendar-empty {
  background: var(--bg);
}
.calendar-day {
  display: block;
  color: var(--muted);
  margin-bottom: 2px;
}
.calendar-event {
  display: block;
  background: rgba(209, 178, 128, 0.2);
  border-left: 2px solid var(--gold-line);
  border-radius: 3px;
  padding: 2px 4px;
  margin-bottom: 2px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}
a.calendar-cell:hover .calendar-event {
  background: rgba(209, 178, 128, 0.35);
}

/* 狭い画面ではイベント名を出す余地が無い。**件数を点の数で示す**
   （色ではなく個数で示すので、色が見えなくても件数が伝わる）。
   イベント名と日付は aria-label でセルのリンクに持たせてある。 */
.calendar-dots {
  display: none; /* 481px以上ではイベント名を出すので点は要らない */
  justify-content: center;
  gap: 3px;
  margin-top: 4px;
}
.calendar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-line);
  border: 1px solid var(--gold-ink);
}
@media (max-width: 480px) {
  /* 7列＋罫の幅で決まるセル幅が、375pxで 43.9px と 44px にわずかに届かない。
     罫を1pxにすると 44.7px になり、当たり判定の下限を満たす（束C・実測）。 */
  .calendar {
    gap: 1px;
  }
  .calendar-event {
    display: none;
  }
  .calendar-dots {
    display: flex;
  }
}

/* 一覧の1行。行のどこを押しても開くようにする（P1-13・束C）。
   タイトル文字だけがリンクだと、実測で 21px 高しか押せない。
   区切り線の色は他の一覧に合わせた（ホームだけ --muted-on-dark 由来の
   青灰色をハードコードしていた。P1-39 が結果的に解消される）。 */
.row-item {
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
}
.row-item:last-child {
  border-bottom: 0;
}
.row-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 44px;
  justify-content: center;
  padding: 10px 4px;
  color: var(--text);
}
.row-link:hover {
  background: var(--surface-2);
}

/* --- イベント：一覧・バッジ ------------------------------------------- */

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.event-list li {
  padding: 12px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
}
.event-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.badge-joined,
.badge-closed,
.badge-guest,
.badge-self {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 0.75rem;
  vertical-align: middle;
}
/* バッジの文字は濃紺に統一し、意味は地色（金＝参加予定／灰＝締切／緑＝ゲスト／赤＝自分）で示す。
   金ティント地の金文字は 2.81:1、ゲストの緑は 4.19:1 でいずれも不足していた（P1-1・P1-6）。 */
.badge-joined {
  background: rgba(209, 178, 128, 0.25);
  color: var(--text);
}
.badge-closed {
  background: rgba(89, 77, 70, 0.25);
  color: var(--muted);
}
.badge-guest {
  background: rgba(47, 122, 104, 0.15);
  color: var(--text);
}
.badge-self {
  background: var(--accent);
  color: #fff;
}

/* --- イベント：参加者一覧 --------------------------------------------- */

.participant-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.participant-list li {
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
}
.participant-list li:last-child {
  border-bottom: 0;
}

.participant-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  color: var(--text);
  min-width: 0;
}
a.participant-card:hover {
  text-decoration: none;
}
a.participant-card:hover strong {
  color: var(--gold-ink);
}
.participant-body {
  min-width: 0;
  flex: 1;
}
.participant-compat {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(209, 178, 128, 0.1);
  border-left: 2px solid var(--gold-line);
  border-radius: 3px;
  font-size: 0.76rem;
  line-height: 1.6;
}
.participant-compat strong {
  display: block;
}

/* 受付QRは印刷して貼ることがあるので、白地で大きめに出す */
.qr-print {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  display: inline-block;
  margin-bottom: 14px;
}
.qr-print .qr {
  width: 220px;
  height: 220px;
  margin: 0;
}

@media (max-width: 480px) {
  .calendar-cell {
    min-height: 58px;
    font-size: 0.75rem;
  }
  .calendar-event {
    font-size: 0.75rem;
    padding: 1px 3px;
  }
  .calendar-head h2 {
    font-size: 0.95rem;
  }
  .calendar-head .btn {
    padding: 6px 8px;
    font-size: 0.75rem;
  }
}

/* --- フッター --------------------------------------------------------- */

.site-footer {
  border-top: var(--hairline);
  padding: 24px 16px 48px;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
}
.site-footer a {
  color: var(--muted);
  /* 規約・プラポリ・特商法は「押し間違えたくないリンク」なのに、
     実測 18px 高・間隔16pxで最も押しにくかった（P1-12・束C）。 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin: 0 4px;
}

/* 公開LP専用の拡充フッター（2026-08-24）。ロゴ＋キャッチコピー＋規約＋© */
.site-footer-marketing {
  background: #080706;
  border-top: none;
  padding: 56px 16px 40px;
  color: var(--muted-on-dark);
}
.site-footer-logo {
  display: block;
  margin: 0 auto 20px;
  height: 32px;
  width: auto;
}
.site-footer-catch {
  font-family: var(--font-serif);
  color: var(--gold-on-dark);
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin: 0 0 24px;
}
.site-footer-marketing a {
  color: var(--gold-on-dark);
}

/* --- モバイル：左ペインをCSSのみのドロワーにする ----------------------- */

.nav-toggle {
  display: none;
}

/* 44px はモバイルの当たり判定の下限（束C）。ここはモバイルの主要ナビの
   唯一の入口なので、いちばん外せない。 */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border: var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--gold-on-dark);
  font-size: 1.1rem;
  line-height: 1;
  flex: none;
}

.drawer-backdrop {
  display: none;
}

@media (max-width: 900px) {
  /* モバイルは1列。.shell-two / .shell-three より詳細度を上げて確実に上書きする */
  .shell,
  .shell-two,
  .shell-three {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 12px 64px;
    gap: 16px;
  }
  /* 共有ページの余白も会員側と揃える（スマホの見え方は変えない） */
  .public-page {
    padding: 16px 12px 64px;
  }

  /* カード内パディングは詰めすぎない程度にモバイル向けへ縮小（PC比） */
  .card {
    padding: 24px;
  }

  /* スマホでは本文（中央ペイン）を先に、お知らせをその下に置く（P1-20・2026-09-10）。
     以前はお知らせを最上部へ折り込んでいたが、そのぶん本文が下がり、
     未診断の会員に見せたい診断の案内が画面外から始まっていた（P1-19とセット）。
     お知らせは読み物で、開いた瞬間に押してほしいものではない。 */
  .pane-main {
    order: -1;
  }
  .pane-right {
    order: 0;
    position: static;
  }

  /* 左ペインはドロワー化。既定は画面外。 */
  .pane-left {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    z-index: 40;
    padding: 12px;
    background: var(--bg);
    border-right: var(--hairline);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }

  .hamburger {
    display: inline-flex;
  }

  /* 開いているあいだハンバーガーだけ明地になる。文字色が暗地用の金(--gold-on-dark)の
     ままだと 1.19:1 で、**メニューを開いた瞬間に ☰ が消える**（閉じるために探す
     ところで見えなくなる）。束B以前からの不具合で、暗地コンテナの総ざらいで見つけた。 */
  .nav-toggle:checked ~ .site-header .hamburger {
    background: var(--surface-2);
    color: var(--text);
  }
  .nav-toggle:checked ~ .shell .pane-left {
    transform: translateX(0);
  }
  .nav-toggle:checked ~ .drawer-backdrop {
    display: block;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 35;
    background: rgba(0, 0, 0, 0.55);
  }
}

@media (max-width: 380px) {
  .shell,
  .public-page {
    padding: 12px 10px 56px;
  }
  .card {
    padding: 16px;
  }
  .site-header {
    padding: 0 10px;
    gap: 8px;
  }
  .site-header .brand {
    font-size: 1rem;
    letter-spacing: 0.08em;
  }
}

/* 「動きを減らす」設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* =====================================================================
   M5：掲示板・お知らせ・ポイント台帳・管理画面
   ===================================================================== */

/* --- 追加のフォーム部品 ------------------------------------------------ */

input[type='number'],
input[type='month'],
input[type='date'],
input[type='datetime-local'],
input[type='file'] {
  width: 100%;
  padding: 11px 12px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid rgba(89, 77, 70, 0.75); /* P1-5。上の入力欄と同じ理由 */
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px;
}
input[type='file'] {
  padding: 8px 10px;
}

/* チェックボックスは「文字をクリックしても入る」ようにラベルで包む */
/* ラベルごと押せるので、ラベル全体を当たり判定にする（P1-13・束C）。
   退会のチェックのように「間違って押したくない／確実に押したい」ものが多い。 */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}
.check input[type='checkbox'] {
  width: 24px;
  height: 24px;
  accent-color: var(--gold-ink);
  flex: none;
}

.btn-small {
  padding: 7px 14px;
  font-size: 0.82rem;
  /* `.btn` の 56px を打ち消す（P1-32・2026-09-10）。指定が無いと「小さいボタン」が
     56px に膨らみ、運営の表15箇所とイベントの月送りが縦に間延びしていた。
     束Cで決めた当たり判定の下限 44px は割らない。 */
  min-height: 44px;
}

/* マスタ編集の1行。項目が増えても375pxで折り返して収まる */
.master-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
}
.master-row:last-child {
  border-bottom: 0;
}
.master-row input[type='text'] {
  flex: 1 1 160px;
  width: auto;
}
.master-row input[type='number'] {
  flex: 0 0 90px;
  width: auto;
}
.master-row select {
  flex: 0 0 auto;
  width: auto;
}

/* --- ポイント付与 ------------------------------------------------------ */

.award-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.award-list li {
  padding: 14px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.35);
}
.award-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.award-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-bottom: 10px;
}
.award-head .muted {
  font-size: 0.78rem;
}

/* 押す先が明確に分かれて見えるよう、行動ボタンは面で並べる */
.award-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-award {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--gold-line);
  background: rgba(209, 178, 128, 0.12);
}
.btn-minus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(179, 52, 46, 0.12);
}
.btn-minus:hover {
  background: var(--accent);
  color: #fff;
}
.award-pt {
  font-size: 0.78rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.pt-plus {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pt-minus {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- マイページの数字 --------------------------------------------------- */

.mypage-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.mypage-figure {
  flex: 1 1 140px;
  padding: 14px;
  background: var(--surface-2);
  border: var(--hairline);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mypage-figure-label {
  font-size: 0.75rem;
  color: var(--muted);
}
.mypage-figure-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--gold-ink);
  line-height: 1.2;
}
.mypage-figure-unit {
  font-size: 0.75rem;
  color: var(--muted);
}

/* --- 掲示板のコメント --------------------------------------------------- */

.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comment {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.35);
}
.comment:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.comment-deleted {
  display: block;
  font-size: 0.82rem;
}
.comment-avatar {
  flex: none;
}
.comment-avatar .avatar {
  width: 40px;
  height: 40px;
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  font-size: 0.8rem;
}
.comment-head .muted {
  font-size: 0.75rem;
}
.comment-image {
  max-width: min(100%, 320px);
  height: auto;
  border-radius: var(--radius);
  border: var(--hairline);
  display: block;
  margin: 6px 0;
}

.like-form {
  margin: 6px 0 0;
}
.like-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px; /* 実測30px。指で押す前提の下限に揃える（P1-13・束C） */
  padding: 5px 16px;
  border: 1px solid rgba(89, 77, 70, 0.75); /* P1-5。操作部品の輪郭なので3:1に揃える */
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.like-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.like-btn.is-liked {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(179, 52, 46, 0.15);
}
.like-count {
  font-variant-numeric: tabular-nums;
}

/* --- 管理側の一覧（コメント・お知らせ・退会申請・ログ） ------------------- */

.admin-comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.admin-comment-list li {
  padding: 12px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.35);
}
.admin-comment-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.admin-comment-list li.is-deleted {
  opacity: 0.55;
}
.admin-comment-list li.is-error {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
}

.log-payload {
  margin: 6px 0 0;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid rgba(89, 77, 70, 0.3);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 160px;
  overflow: auto;
}

/* --- ダッシュボードの「対応が要るもの」 ---------------------------------- */

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.todo-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid rgba(89, 77, 70, 0.25);
  border-radius: var(--radius);
  color: var(--muted);
}
.todo-list li a:hover {
  text-decoration: none;
  border-color: var(--gold-ink);
}
.todo-list li strong {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}
/* 0件は目を引かせない。対応が要るものだけ金と赤で浮かせる */
.todo-list li.is-open a {
  border-color: var(--gold-ink);
  color: var(--text);
}
.todo-list li.is-open strong {
  color: var(--accent);
}

/* =====================================================================
   M6：ログイン前LP（SPEC §6.8）
   世界観はクール（濃紺×金）。コピーは仮テキストのまま差し替えられるよう、
   文字量が増減してもレイアウトが崩れない組み方にしてある。
   ===================================================================== */

/* --- ファーストビュー（2026-08-24全面刷新／同日ハイブランド調整・staging限定） --- */

.fv {
  position: relative;
  min-height: calc(92svh - var(--header-h));
  min-height: calc(92vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #080706;
  padding: 32px 20px 72px;
  overflow: hidden;
  text-align: center;
}

.fv-mark {
  position: relative;
  width: min(70vw, 440px);
  aspect-ratio: 900 / 674;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fv-in-logo 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.fv-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  /* 矩形の縁を背景へ溶かす（縁の見え方はサンプル済みの黒#080706へ寄せた背景色とセットで機能する） */
  -webkit-mask-image: radial-gradient(
    ellipse 62% 66% at 53% 45%,
    black 52%,
    rgba(0, 0, 0, 0.5) 74%,
    transparent 96%
  );
  mask-image: radial-gradient(
    ellipse 62% 66% at 53% 45%,
    black 52%,
    rgba(0, 0, 0, 0.5) 74%,
    transparent 96%
  );
}
@keyframes fv-in-logo {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ロゴの円環を起点に、静かに広がって消える金の輪。JSなし・prefers-reduced-motion対応 */
.fv-ring {
  position: absolute;
  left: 53%;
  top: 45%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  animation: fv-ripple 4.8s ease-out 1.4s infinite;
  pointer-events: none;
}
.fv-ring-2 {
  animation-delay: 3s;
}
.fv-ring-3 {
  animation-delay: 4.6s;
}
@keyframes fv-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.5;
  }
  70% {
    opacity: 0.12;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

/* 375px でだけ2行に割れる（実測で確認・P1-14）。2行そのものは許容し、
   **意味の切れ目**（読点）で折り返るよう、その幅でだけ改行を出す。
   文字を縮める方向は、12px下限を引き上げた束Bと逆行するので採らない。 */
.fv-copy br {
  display: none;
}
@media (max-width: 420px) {
  .fv-copy br {
    display: inline;
  }
}

.fv-copy {
  margin: 22px 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 4.6vw, 2rem);
  letter-spacing: 0.14em;
  line-height: 1.7;
  max-width: 20em;
  opacity: 0;
  animation: fv-in-copy 1s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;

  /* 金のグラデーション文字。#D1B280を中心に明→暗 */
  background: linear-gradient(100deg, #a97d45 0%, #f1dcae 22%, #d1b280 45%, #8a6435 68%, #d1b280 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 18px rgba(209, 178, 128, 0.35),
    0 0 40px rgba(209, 178, 128, 0.14);
}
/* 一度だけ光が走るシマー。テキストの入場が終わってから開始 */
.fv-copy[data-shimmer] {
  animation:
    fv-in-copy 1s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both,
    fv-shimmer 2.4s ease-in-out 1.9s 1;
}
@keyframes fv-in-copy {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fv-shimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 220% 0%;
  }
}

.fv-scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  width: 1px;
  height: 40px;
  background: rgba(209, 178, 128, 0.4);
  opacity: 0;
  animation: fv-in-fade 0.8s ease 2.4s both;
}
.fv-scroll-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold-line);
  animation: fv-scroll-move 2.2s ease-in-out infinite;
}
@keyframes fv-in-fade {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}
@keyframes fv-scroll-move {
  0% {
    top: 0;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    top: 40px;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-mark,
  .fv-copy,
  .fv-scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .fv-copy[data-shimmer] {
    animation: none;
    background-position: 0% 0%;
  }
  .fv-ring {
    display: none;
  }
  .fv-scroll-dot {
    animation: none;
    top: 20px;
    opacity: 0.6;
  }
}

/* --- 公開LPヘッダー（マーケティングナビ）とスクロール追従CTA -------- */

/* 最上部ではFVと地続きの黒にする（2026-08-31）。
   `transparent` だと、FVが `92vh - header-h` でヘッダーの下から始まる（U-12）ため、
   ヘッダーの56pxに body の薄グレー(--bg #efefef)が出て、黒いFVの上に
   明るい帯が乗る。黒はFVとヘッダーだけ、という配色方針（Codex H5見本）に合わせる。
   ※A案（LP全編黒）の間は body 自体が黒で、この帯は見えていなかった。 */
body.public-lp .site-header {
  background: #080706;
  border-bottom: none;
  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}
body.public-lp.is-scrolled .site-header {
  background: rgba(8, 7, 6, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: var(--hairline);
}

.site-header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header-cta a {
  white-space: nowrap;
}

.btn-ghost-gold {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--gold-line);
  border-radius: 6px;
  color: var(--gold-on-dark);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.btn-ghost-gold:hover {
  background: var(--gold-line);
  color: #0b0f1e;
  text-decoration: none;
}

.marketing-drawer {
  display: none;
}
.marketing-drawer-cta {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 900px) {
  /* 狭い幅でもログインは残す。「入会のご案内」はドロワーと追従CTAに出るので、
     ヘッダーからは外す（☰・ロゴと並べると幅が足りない）。束C追補・2026-09-08 */
  .site-header-cta {
    gap: 4px;
  }
  .site-header-cta .btn-ghost-gold {
    display: none;
  }
  .marketing-drawer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    z-index: 40;
    padding: 88px 22px 24px;
    background: #0e0d0c;
    border-left: var(--hairline);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.22s ease;
  }
  /* 子結合子で「ドロワー直下のテキストリンク」だけに絞る（P0-2・束B）。
     CTA 2つは .marketing-drawer-cta の中にあるので、これで両ボタンから完全に外れ、
     ボタンの左右padding(24px→4px)の潰れと点線の混入がなくなる。
     ※入会CTAは UTAGE_JOIN_URL 未設定のあいだ <span> で描画されるため、
       いまは a セレクタに当たっていない。URLを入れた瞬間に当たる時限式だった。 */
  .marketing-drawer > a {
    padding: 11px 4px;
    color: var(--gold-on-dark);
    border-bottom: 1px dotted rgba(232, 206, 140, 0.18);
  }
  /* ドロワー内の主CTAだけは文字色を戻す（2026-09-05）。
     上の `.marketing-drawer a` は詳細度 0,1,1 で `.btn-primary`（0,1,0）に勝つため、
     金地(--gold #d1b280)に金文字(--gold-on-dark #e8ce8c)＝**1.31:1** になっていた。
     公開LPでいちばん押してほしいボタンが、スマホでほぼ読めない状態だった。
     ※同じ指定に由来する border-bottom と padding の潰れは第2ラウンドで扱う。 */
  .marketing-drawer .btn-primary {
    color: var(--navy);
  }
  .nav-toggle:checked ~ .marketing-drawer {
    transform: translateX(0);
  }
}

/* 追従CTAバー（FV通過後にJSで表示・閉じるまで再表示しない） */
.follow-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(8, 7, 6, 0.94);
  backdrop-filter: blur(6px);
  border-top: var(--hairline);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.follow-cta.is-visible {
  transform: translateY(0);
}
.follow-cta .btn-primary {
  padding: 8px 20px;
  font-size: 0.88rem;
}
/* バーが出ているあいだ、その高さぶん本文の下に余白を作る（P1-18・束C）。
   実測：バー77px・body の下padding 0 で、ページ末尾のフッターの規約3リンクと
   © がバーの下に入って読めなかった。 */
body:has(.follow-cta.is-visible) {
  padding-bottom: 88px;
}

.follow-cta-close {
  border: 0;
  background: none;
  color: var(--muted-on-dark);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  /* 実測 23×27px。閉じられないと本文が隠れたままになる（P1-18・束C） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
}
.follow-cta-close:hover {
  color: var(--gold-on-dark);
}

/* --- スクロールで順にフェードイン（IntersectionObserver・public/static/fv.js） --- */

.reveal-io {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal-io.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-io {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- エディトリアル構成（2026-08-24全面刷新） -------------------------
   セクションは白カードで囲わず、白 ⇔ #EFEFEF の交互背景で「章」を作る。
   黒FV → 白（粋の定義） → 薄グレー（IKIとは） → 白（IKI診断） →
   薄グレー（できること） → 白（入会の流れ） → 薄グレー（閉じ）。
   .lp-chapter は4つとも同じ<section>タグの兄弟なので nth-of-type で交互にできる。
   ------------------------------------------------------------------- */

.lp-chapter-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

.lp-chapter {
  padding: 96px 0;
}
.lp-chapter:nth-of-type(odd) {
  background: var(--bg);
}
.lp-chapter:nth-of-type(even) {
  background: var(--surface);
}
.lp-chapter-inner > h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  letter-spacing: 0.15em;
  margin: 0 0 24px;
  color: var(--gold-ink);
}
.lp-chapter-lead {
  max-width: 40em;
  margin: 0 auto 40px;
  color: var(--muted);
  line-height: 1.9;
}
.lp-note {
  font-size: 0.85rem;
  margin: 24px 0 0;
}

@media (max-width: 900px) {
  .lp-chapter {
    padding: 56px 0;
  }
}

/* --- 粋の定義（ヒーロー直下・新設 2026-08-24。白チャプター） ---------- */

.lp-teigi {
  background: var(--surface);
  padding: 96px 20px;
  text-align: center;
}
.lp-teigi-inner {
  max-width: 40em;
  margin: 0 auto;
}
.lp-teigi-inner p {
  color: var(--muted);
  line-height: 2;
  margin: 0 0 1.4em;
}
.lp-teigi .teigi-open {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text);
}
.lp-teigi .teigi-catch {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: var(--gold-ink);
  letter-spacing: 0.04em;
  margin: 1.6em 0;
}
@media (max-width: 900px) {
  .lp-teigi {
    padding: 56px 20px;
  }
}

/* --- IKIとは：3本柱 --------------------------------------------------- */

.lp-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
}
.lp-pillar {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
}
.lp-pillar h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  margin: 0 0 12px;
  color: var(--gold-ink);
}
.lp-pillar p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}

/* --- 診断の軸 --------------------------------------------------------- */

.lp-axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.lp-axes > div {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
}
.lp-axes h3 {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin: 0 0 18px;
}
.lp-axes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-axes li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
  font-size: 0.95rem;
}
.lp-axes li:last-child {
  border-bottom: 0;
}
.lp-axes li strong {
  font-family: var(--font-serif);
  color: var(--gold-ink);
  min-width: 1.6em;
  flex: none;
}

/* --- 12タイプお披露目 -------------------------------------------------- */

/* 12タイプのお披露目。1枠に男女2体入るので、1体だけのときより列を広く取る
   （150pxのままだと375px幅で1体65pxまで縮み、何の絵か分からなくなる）。 */
.lp-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.type-plinth-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  max-width: 160px;
  margin: 0 auto;
  border: 1px dashed rgba(89, 77, 70, 0.45);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.78rem;
}
.type-plinth-name {
  color: var(--gold-ink);
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 0.95rem;
}
.type-plinth-tagline {
  font-size: 0.78rem;
  line-height: 1.6;
  margin-top: 4px;
}

/* --- できること ------------------------------------------------------- */

.lp-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.lp-feature {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 28px;
}
.lp-feature h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  margin: 0 0 12px;
  color: var(--gold-ink);
}
.lp-feature p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}
/* 🔒絵文字の代わりの金の細字ラベル（2026-08-24）。.lp-feature h3のflex gapで間隔を取る */
.lp-members-only {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--muted);
  white-space: nowrap;
}

/* --- 入会の流れ ------------------------------------------------------- */

.lp-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-steps li {
  display: flex;
  gap: 16px;
  padding: 21px 0;
  border-bottom: 1px dotted rgba(89, 77, 70, 0.3);
}
.lp-steps li:last-child {
  border-bottom: 0;
}
.lp-step-no {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-ink);
  font-family: var(--font-serif);
  font-size: 0.9rem;
}
.lp-steps strong {
  display: block;
  margin-bottom: 4px;
}
.lp-steps p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}

/* --- 締め ------------------------------------------------------------- */

.lp-closing {
  background: var(--bg);
  text-align: center;
  padding: 96px 20px 80px;
}
.lp-closing h2 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  margin: 0 0 24px;
  color: var(--gold-ink);
}
.lp-closing > p.muted {
  max-width: 40em;
  margin: 0 auto 24px;
}
.btn-lg {
  padding: 15px 40px;
  font-size: 1rem;
}
.lp-legal {
  max-width: 40em;
  margin: 24px auto 0;
  font-size: 0.85rem;
  line-height: 2;
}
@media (max-width: 900px) {
  .lp-closing {
    padding: 56px 20px 56px;
  }
}

/* --- 規約類（/legal/*） ------------------------------------------------ */

.legal-doc section {
  margin-top: 26px;
}
.legal-doc h2 {
  font-size: 0.95rem;
  color: var(--gold-ink);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}
.legal-doc p {
  margin: 0 0 10px;
  font-size: 0.95rem;
  line-height: 1.95;
}
.legal-doc ul {
  margin: 0 0 10px;
  padding-left: 1.3em;
}
.legal-doc li {
  font-size: 0.95rem;
  line-height: 1.9;
  margin-bottom: 4px;
}
.legal-table th {
  white-space: nowrap;
  vertical-align: top;
}
/* 未記入の欄は「まだ埋まっていない」と一目で分かるようにする。
   埋め忘れたまま公開されるのが、この画面でいちばん困る事故なので目立たせる。 */
.legal-blank {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.85rem;
}

/* --- タイプのキャラ表示（診断結果・自己紹介LP・プロフィール編集） ---------- */

/* 診断結果の男女2体。375pxでも横に並べたまま収める（縦積みにすると
   「2体いる」ことが一目で分からなくなるため）。 */
.type-characters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 380px;
  margin: 0 auto 18px;
}

/* タイプ名＋短い紹介の並び。画像が無い間も枠が崩れない。 */
.lp-type-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.lp-type-body > div {
  flex: 1 1 200px;
  min-width: 0;
}
.lp-type-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--gold-ink);
  margin-bottom: 6px;
}
.lp-type-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
}

/* 診断結果の解説（原稿の6セクション。見出し＋段落＋箇条書き） */
.type-section h2 {
  font-size: 1rem;
}
.type-points {
  margin: 10px 0 0;
  padding-left: 1.2em;
}
.type-points li {
  margin-bottom: 6px;
  line-height: 1.9;
}
.type-points li::marker {
  color: var(--gold-line);
}

/* ------------------------------------------------------------------ */
/* 12タイプ図鑑（/types・2026-09-09）                                   */
/*                                                                     */
/* 公開LPの `.lp-types` / `.type-plinth` は使わない。あちらは公開LPの   */
/* 文脈で組んであり、会員側で流用すると束Aで踏んだ名前衝突を作る。      */
/* ------------------------------------------------------------------ */
.typebook-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.typebook-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  text-align: center;
  min-width: 0;
  /* 束Cの下限。カード全体が押せる（行やカードの一部だけを押させない） */
  min-height: 44px;
}
.typebook-card:hover {
  border-color: var(--gold-ink);
  text-decoration: none;
}
.typebook-card-name {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--gold-ink);
}
.typebook-card-tagline {
  font-size: 0.78rem;
  line-height: 1.7;
}
/* 自分のタイプ・同じタイプ同士の目印。色だけに頼らず文字で示す */
.typebook-self {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  /* 束Bで決めた下限 0.75rem（12px）を割らない。バッジでも読めなければ意味が無い */
  font-size: 0.75rem;
  color: var(--gold-ink);
}
.typebook-compat {
  background: var(--surface-2);
}
.typebook-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-top: 24px;
}
/* 透かし（U-68）。読める・選べる・印刷できる状態は保つ。
   薄くしすぎると「隠したい情報」に見えるので、本文と同じ読める濃さにする。 */
.typebook-watermark {
  margin: 24px 0 0;
  padding-top: 12px;
  border-top: var(--hairline);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}


/* ホームの主行動（P1-19・2026-09-10）。未診断の会員に最初に見せる案内。 */
.home-lead {
  margin: 12px 0 0;
  padding: 16px;
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* マイページから自分の自己紹介ページへ（P1-43・2026-09-10） */
.mypage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

/* 副次的な操作のボタン（P1-23・2026-09-10）。
   当たり判定と枠は `.btn` のまま。主行動より目立たないよう、文字と枠だけ弱める。
   「押せない」ようには見せない（`.is-pending` とは別物）。 */
.btn-quiet {
  color: var(--muted);
  border-color: rgba(89, 77, 70, 0.25);
  background: transparent;
}
.btn-quiet:hover {
  color: var(--text);
  border-color: var(--gold-line);
}