/* パステルカラーテーマ
   確立済みの配色（.claude/docs/DESIGN_NOTES.md「パステルカラーパレット」参照。
   WCAG AA検証済み、文字色は濃色 #212529 で統一）。

   Bootstrap 5.3の .btn-* はSCSSコンパイル時の固定hexが埋め込まれており、
   :root の --bs-primary 等の上書きだけでは反映されない（.text-primary/.bg-primary等
   rgba(var(--bs-*-rgb),..) 経由のユーティリティクラスのみ追従する）ため、
   ボタン本体は各クラスに直接 --bs-btn-* を上書きする。 */
:root {
  --bs-primary: #8ECAE6;
  --bs-primary-rgb: 142, 202, 230;
  --bs-danger: #F28B82;
  --bs-danger-rgb: 242, 139, 130;
  --bs-warning: #FFD97D;
  --bs-warning-rgb: 255, 217, 125;
  --bs-info: #A0E7E5;
  --bs-info-rgb: 160, 231, 229;
  --bs-success: #B5EAD7;
  --bs-success-rgb: 181, 234, 215;
}

.btn-primary {
  --bs-btn-color: #212529;
  --bs-btn-bg: #8ECAE6;
  --bs-btn-border-color: #8ECAE6;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #85BED8;
  --bs-btn-hover-border-color: #85BED8;
  --bs-btn-focus-shadow-rgb: 142, 202, 230;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #7DB2CA;
  --bs-btn-active-border-color: #7DB2CA;
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #8ECAE6;
  --bs-btn-disabled-border-color: #8ECAE6;
}
.btn-danger {
  --bs-btn-color: #212529;
  --bs-btn-bg: #F28B82;
  --bs-btn-border-color: #F28B82;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #E3837A;
  --bs-btn-hover-border-color: #E3837A;
  --bs-btn-focus-shadow-rgb: 242, 139, 130;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #D57A72;
  --bs-btn-active-border-color: #D57A72;
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #F28B82;
  --bs-btn-disabled-border-color: #F28B82;
}
.btn-warning {
  --bs-btn-color: #212529;
  --bs-btn-bg: #FFD97D;
  --bs-btn-border-color: #FFD97D;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #F0CC76;
  --bs-btn-hover-border-color: #F0CC76;
  --bs-btn-focus-shadow-rgb: 255, 217, 125;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #E0BF6E;
  --bs-btn-active-border-color: #E0BF6E;
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #FFD97D;
  --bs-btn-disabled-border-color: #FFD97D;
}
.btn-info {
  --bs-btn-color: #212529;
  --bs-btn-bg: #A0E7E5;
  --bs-btn-border-color: #A0E7E5;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #96D9D7;
  --bs-btn-hover-border-color: #96D9D7;
  --bs-btn-focus-shadow-rgb: 160, 231, 229;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #8DCBCA;
  --bs-btn-active-border-color: #8DCBCA;
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #A0E7E5;
  --bs-btn-disabled-border-color: #A0E7E5;
}
.btn-success {
  --bs-btn-color: #212529;
  --bs-btn-bg: #B5EAD7;
  --bs-btn-border-color: #B5EAD7;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #AADCCA;
  --bs-btn-hover-border-color: #AADCCA;
  --bs-btn-focus-shadow-rgb: 181, 234, 215;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #9FCEBD;
  --bs-btn-active-border-color: #9FCEBD;
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: #B5EAD7;
  --bs-btn-disabled-border-color: #B5EAD7;
}

/* 管理画面（フェーズ2で実装予定）の危険操作ボタンは、取り消しにくいバッチ処理を
   起動するため、パステル化せずBootstrap既定の彩度の高い赤のまま残す
   （.claude/docs/DESIGN_NOTES.md 参照。スコープ限定の上書き）。 */
.admin-tool-panel .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

/* ==========================================================================
   意匠アップデート「やわらかな導き」（2026-08-14、人間の要望）
   3方向（静寂／数える／やわらかな導き）を比較検討した上で採用。既存の
   パステル配色（上記）はそのまま、角丸・余白・柔らかい影・丸ゴシックの
   見出しで意匠だけを底上げする。判断の詳細は .claude/docs/DESIGN_NOTES.md 参照。
   ========================================================================== */

/* ニュートラルは純白ではなく、アクセント色にわずかに寄せた地色にする */
body {
  background-color: #F5FAFD;
}

/* navbar: 単色のbg-primaryではなく柔らかいグラデーションに */
.navbar.bg-primary {
  background: linear-gradient(135deg, #8ECAE6, #A6D8EE) !important;
}

/* カード: 角丸を強め、影を柔らかくして浮き上がって見えるように（罫線は無し） */
.card {
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(142, 202, 230, 0.28), 0 2px 6px rgba(33, 37, 41, 0.06);
}

/* ボタンはピル型に統一（危険操作ボタンの赤維持はスコープ外＝色はそのまま）。
   **`.btn` すべてに掛ける**（2026-08-22、人間の指摘で修正）。もとは塗りの
   バリエーションだけを列挙していたため、枠線だけのボタン（`.btn-outline-*`）が
   Bootstrap既定の角丸のまま取り残されていた。絵柄の選択のように
   「選択＝塗り／未選択＝枠線」を横に並べる場所では、**選択したものだけ形が
   変わって見える**ことになり、色ではなく形の違いが目に付いてしまう。 */
.btn {
  border-radius: 999px;
}

/* 画面間を行き来するナビ（_page_nav.html）。文字リンクを「・」で繋いだ段落を
   ボタンの横並びに置き換えた（2026-08-22、人間の要望「リンク表示を格好良く
   ボタン表示にしてほしい」）。指で押せる大きさになり、どこへ行けるのかが
   ひと目で分かる。狭い画面では折り返す。

   色はパステルパレットからここで与える。**Bootstrapの .btn-outline-* は
   使わない** — ファイル冒頭に書いたとおり .btn-* にはコンパイル時の固定hexが
   埋まっていてテーマ色に追従しないため（.btn-outline-primary はBootstrap既定の
   青のまま出てしまう）。変種クラスに頼らず .btn だけを土台にする。 */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-nav .btn {
  --bs-btn-color: #212529;
  --bs-btn-bg: #F5FAFD;
  --bs-btn-border-color: #8ECAE6;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #E4F2F9;
  --bs-btn-hover-border-color: #4A93BC;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #B5DCEF;
  --bs-btn-active-border-color: #4A93BC;
  --bs-btn-focus-shadow-rgb: 142, 202, 230;
  font-weight: 600;
  padding-inline: 1rem;
}

/* 今いる画面。位置を固定するためにボタンとして残すが、押せないことが分かる
   よう塗りつぶす（2026-08-22、人間の指摘で追加）。
   **`.page-nav .btn` より後に書く** — セレクタの詳細度が同じなので、
   先に書くと上の淡い地色に上書きされてしまう。 */
.page-nav .is-current {
  --bs-btn-bg: #8ECAE6;
  --bs-btn-border-color: #8ECAE6;
  cursor: default;
}

/* 見出し・ブランド名は丸ゴシックで柔らかい印象に（Google Fonts CDN、base.htmlで読み込み） */
h1,
h2,
h3,
.navbar-brand {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
}

/* 入力欄は白ではなく淡い山吹色に（人間の要望。既存パレットのwarning色
   #FFD97D と同系統の色相なので、その濃淡で構成する）。文字色は本文と
   同じ濃色のままなのでコントラストは十分（WCAG AA余裕あり）。 */
.form-control,
.form-select {
  background-color: #FFF7E3;
  border-color: #EFD9A0;
}
.form-control:focus,
.form-select:focus {
  background-color: #FFF7E3;
  border-color: #FFD97D;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-warning-rgb), 0.35);
}

/* ==========================================================================
   スマホでの操作性（2026-08-20、人間の要望）
   「ボタンや入力欄がスマホで見ると小さい」という指摘への対応。
   目安はタップ目標48x48px（WCAG 2.5.5の最小44pxに余裕を持たせ、
   Material Designの推奨48pxに合わせる）。Bootstrap既定では .btn が高さ約38px、
   .btn-sm が約31px、.form-control が約38pxで、いずれも指で押すには小さい。
   ========================================================================== */

/* iOS Safariはフォントサイズ16px未満の入力欄にフォーカスすると画面を自動で
   拡大し、拡大されたまま戻らない。これを防ぐため画面幅によらず16px（1rem）を
   下回らせない（スマホ専用のメディアクエリの外に置くのはこのため）。 */
.form-control,
.form-select {
  font-size: 1rem;
}

@media (max-width: 767.98px) {
  /* 高さは padding と line-height で確保し、min-height は保険として併記する
     （.btn は inline-block なので min-height が効く）。
     1rem × line-height 1.5 = 24px + 上下padding 12px×2 = 48px。 */
  .btn {
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
  }

  /* 一覧内の編集/削除など .btn-sm も、小さいままにせず最低44pxは確保する。
     0.9375rem × 1.5 = 22.5px + 上下padding 10px×2 = 42.5px + border 2px。 */
  .btn-sm {
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
  }

  .form-control,
  .form-select {
    min-height: 48px;
    padding: 0.75rem 0.875rem;
  }

  /* 複数行入力は行数そのものを確保する（rows属性の指定より広く取る） */
  textarea.form-control {
    min-height: 6rem;
  }

  /* 隣り合うボタンの誤タップを防ぐ間隔。削除はPOSTのため form で囲まれており、
     ボタン同士が直接の兄弟にならない箇所があるので form 側にも指定する。 */
  .btn + .btn,
  .btn + form.d-inline {
    margin-left: 0.35rem;
  }

  /* チェックボックス・ラジオも指で押せる大きさに */
  .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
  }
  .form-check-label {
    padding-left: 0.25rem;
  }
}

/* アイコンのみのボタン（一覧の削除＝ゴミ箱）。文字が無いぶん幅が潰れるので
   正方形のタップ目標を明示し、アイコンを中央に置く。ボタンの意味は
   呼び出し側の aria-label が与える（SVG自体は aria-hidden）。
   ピル形状の指定（.btn-danger 等）が効くため見た目は円形になる。 */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

@media (max-width: 767.98px) {
  /* 上の .btn-sm の padding 指定より後に置くことで、こちらを優先させる */
  .btn-icon {
    width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
  }
}

/* 唱題表の履歴テーブル。PCでは4列（日付・時間・メモ・操作）のままでよいが、
   スマホ幅に4列を収めるのは無理があり、列を潰す（メモが1文字ずつ折り返す）か
   横スクロールで操作ボタンが画面外に出るかの二択になってしまう。
   そこで狭い画面ではテーブルの体裁をやめ、1記録=1ブロックの縦積みに
   組み替える。theadを隠す代わりに、各セルの data-label を見出しとして出す。 */
.history-table .col-note {
  min-width: 6rem;
}

/* 行そのものが押せる（history-row.js）ので、押せることと「いま選んでいる行」が
   分かるように色を付ける（2026-08-22、人間の要望）。

   - hover: マウスを乗せている行（触れるだけなので最も淡く）
   - focus-within: キーボードで行内のリンク・ボタンへ移ったとき
   - .is-selected: 押した行（遷移するまでの間や削除モーダルを開いている間も残す）

   色はパステルprimary #8ECAE6 の濃淡。**選択中はしっかり濃くする**
   （2026-08-22、人間の指摘「編集行を選択時の色が薄すぎ」で #DCEEF6 から
   変更）。淡い地色（#F5FAFD）の上に淡い選択色を置いていたため、差が
   小さすぎて「どの行を選んだか」が分かりにくかった。

   文字色 #212529 との組み合わせは選択色でもコントラスト比10:1以上あり、
   AAA（7:1）を満たす。左端の縦線も濃くして、色覚特性によらず位置が
   分かるようにしている（色の違いだけに頼らない）。 */
.history-table tbody tr.history-row {
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background-color 0.12s ease-in-out, border-left-color 0.12s ease-in-out;
}
.history-table tbody tr.history-row:hover {
  background-color: #E4F2F9;
}
.history-table tbody tr.history-row:focus-within,
.history-table tbody tr.history-row.is-selected {
  background-color: #B5DCEF;
  border-left-color: #4A93BC;
}
/* Bootstrapのテーブルはセル側に背景を敷くため、行のbackground-colorだけでは
   セルの下に隠れる。--bs-table-bg を透明にして行の色を通す。 */
.history-table tbody tr.history-row > * {
  background-color: transparent;
}
/* 動きを減らす設定の端末では色の変化を即時にする */
@media (prefers-reduced-motion: reduce) {
  .history-table tbody tr.history-row {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  .history-table thead {
    display: none;
  }
  .history-table,
  .history-table tbody,
  .history-table tr,
  .history-table td {
    display: block;
    width: 100%;
  }
  .history-table tr {
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 0;
  }
  .history-table td {
    border: none;
    padding: 0.25rem 0;
  }
  .history-table td[data-label]::before {
    content: attr(data-label) "：";
    font-weight: 600;
    margin-right: 0.35rem;
  }
  /* 操作ボタンは行の末尾に右寄せで置く */
  .history-table .col-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.35rem;
  }
  /* 縦積みでは列幅の取り合いが起きないので最低幅の指定は不要 */
  .history-table .col-note {
    min-width: 0;
  }
}

/* トップページの紹介（PR）ブロック。2026-08-21、人間の要望で「もう少し派手に」。
   パステルパレットの3色をグラデーションにする。文字色は既定の濃色 #212529 の
   まま（薄い背景なのでコントラストは十分。白抜き文字にするとAAを割る）。 */
.daimoku-hero {
  background: linear-gradient(135deg, #8ECAE6 0%, #A0E7E5 50%, #B5EAD7 100%);
  color: #212529;
}
.daimoku-hero-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  font-weight: 700;
}
.daimoku-feature-icon {
  font-size: 2rem;
  line-height: 1;
}
/* 機能カードは背景をごく薄い色にして、hero と地の白の間をつなぐ */
.daimoku-feature {
  background-color: #F5FBFD;
}

/* マス目の唱題表（FR-CORE-21）。紙の唱題表と同じく1マスずつ塗っていく。
   マス数は人によって数十〜数百と幅があるため、固定列数ではなく
   auto-fill で幅に合わせて折り返す。塗り具合は --fill（0〜1）で渡し、
   進行中のマスだけ途中まで塗る。 */
.daimoku-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 4px;
  /* 幅いっぱいに広げると1行が長くなりすぎて「表」に見えないので、
     紙の唱題表に近い塊になるところで止める */
  max-width: 34rem;
}
/* 文字の絵柄は行と列が意味を持つので、折り返さず列数を固定する。
   横に長い絵柄（「広宣流布」など）は狭い画面で入りきらないため、
   .daimoku-chart-scroll 側で横スクロールさせる。 */
.daimoku-chart-shaped {
  grid-template-columns: repeat(var(--cols), minmax(7px, 1fr));
  gap: 2px;
  max-width: 44rem;
}
.daimoku-chart-scroll {
  overflow-x: auto;
}
/* 文字ごとのグリッドを並べる外枠（2026-08-22、人間の指摘
   「スマホだと画面に収まらないので縦表示にしてほしい」）。

   **広い画面では横一列、狭い画面では縦積み。** 絵柄のデータは複数文字を
   横に並べた1枚のドット絵なので、サーバー側で文字ごとに切り分けておき、
   並べる向きだけをここで切り替える。1つのHTMLで両方をまかなえるため、
   レイアウトごとにマスを二重に出さずに済む（マスは最大2,000個ある）。

   隙間（gap）は、切り分けるときに落とした文字間の空白列の代わり。 */
.daimoku-chart-blocks {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
}
/* 絵柄の余白。マスと同じ場所を占めるが何も描かない */
.daimoku-chart-gap {
  aspect-ratio: 1 / 1;
}
.daimoku-chart-cell {
  aspect-ratio: 1 / 1;
  /* 色はテンプレートが --cell / --cell-border で渡す（本人が選んだ色）。
     既定値を書いておくのは、変数が無い場面でも崩れないようにするため。 */
  border: 1px solid var(--cell-border, #C9DEE8);
  border-radius: 3px;
  /* 下から上へ塗り上がる（紙に書き込んでいく感じに合わせる） */
  background:
    linear-gradient(to top, var(--cell, #8ECAE6) calc(var(--fill, 0) * 100%), #FFFFFF 0) no-repeat;
}
@media (max-width: 767.98px) {
  /* スマホでは1マスを少し小さくして、折り返しが増えすぎないようにする */
  .daimoku-chart {
    grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
    gap: 3px;
  }
  .daimoku-chart-shaped {
    grid-template-columns: repeat(var(--cols), minmax(6px, 1fr));
    gap: 1px;
  }
  /* スマホでは文字を縦に積む（横並びだと「広宣流布」のように4文字の絵柄が
     画面に収まらず、1マスが潰れるか横スクロールになる）。中央で揃えるのは、
     文字ごとに幅が違うため（「布」より「流」の方が広い等）。 */
  .daimoku-chart-blocks {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  /* 縦積みでは1文字ぶんの幅しか使わないのでマスを大きく取れるが、
     画面幅いっぱいに広げると1文字で画面が埋まり、4文字の絵柄では
     縦のスクロールが長くなりすぎる。読める大きさで頭打ちにする。 */
  .daimoku-chart-blocks .daimoku-chart-shaped {
    grid-template-columns: repeat(var(--cols), minmax(8px, 1fr));
    gap: 2px;
    width: min(100%, 16rem);
  }
}

/* 右から出るメニュー（2026-08-21、人間の要望）。上から伸びるcollapseは
   本文を押し下げて読みかけの位置を見失うのに対し、右からかぶせる形なら
   本文が動かない。文字を右詰にしているのは、スマホで親指が届く側に
   タップ先を寄せるため。 */
.daimoku-nav {
  /* 本文が右端に少し覗く幅にして「かぶさってきた」と分かるようにする */
  width: min(19rem, 78vw);
  background-color: #FFFFFF;
}
/* 見出しはヒーローと同じパステルのグラデーション。閉じるボタンを左、
   アプリ名を右に置いて、下のメニュー項目と同じ右詰の流れに揃える。 */
.daimoku-nav-header {
  background: linear-gradient(135deg, #8ECAE6 0%, #A0E7E5 60%, #B5EAD7 100%);
  color: #212529;
}
.daimoku-nav .offcanvas-title {
  letter-spacing: 0.08em;
  font-weight: 700;
}
/* Bootstrapの .btn-close は margin-left:auto で右へ寄る。ここでは閉じるボタンを
   左、アプリ名を右に置きたいので打ち消す（打ち消さないと2つが右端で重なる）。 */
.daimoku-nav-header .btn-close {
  margin-left: 0;
  margin-right: auto;
}
.daimoku-nav .nav-link {
  /* 1行1項目を大きめに。**区切り線は引かない**（2026-08-22、人間の指摘
     「下の線が表示されているのがかっこ悪い」）。薄い線でも項目ごとに引くと
     表組みのように見えて重い。項目の切れ目は行間と、指を置いたときに出る
     背景の丸みで示す。 */
  padding: 0.8rem 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #212529;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.daimoku-nav .nav-item + .nav-item {
  margin-top: 0.15rem;
}
.daimoku-nav .nav-link:hover,
.daimoku-nav .nav-link:focus {
  color: #1B6E8C;
  background-color: #F2FAFD;
}
/* 今いる画面を淡く示す（aria-current はテンプレート側で付ける） */
.daimoku-nav .nav-link[aria-current="page"] {
  color: #1B6E8C;
  background: linear-gradient(to left, #EAF7FC, transparent);
  border-radius: 0.5rem 0 0 0.5rem;
}
/* ログイン中の人とログアウトを1行に並べる。右詰の流れは崩さず、
   ログアウトのアイコンが右端、その左に名前が来るようにする。 */
.daimoku-nav-account {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  /* 上に少し間を空けて他の項目と区切る（線は引かない。メニュー全体で
     線を使わない方針に揃える） */
  margin-top: 0.75rem;
}
.daimoku-nav-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;  /* 長いニックネームで行が押し広がらないようにする */
}
.daimoku-nav-nickname {
  /* 長い名前は省略。メニューの幅を超えてログアウトを押し出さないため */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ログアウトは出口アイコンだけを出すので、文字が無いぶん行の高さを自前で確保する */
.daimoku-nav-logout {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 3rem;
  flex: 0 0 auto;
}

/* Googleアカウントのプロフィール画像。自前のアイコン（20px四方のSVG）と
   並びが揃うよう大きさを合わせ、丸く切り抜く。 */
.daimoku-nav-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

/* 一覧に並べる小さなユーザーアイコン（2026-08-22、人間の要望でランキングへ追加）。
   **枠は画像の有無によらず同じ大きさ**にする — 写真を持たない人（メール
   ログイン等）が混ざったときに名前の位置がずれないようにするため。
   写真が失効して img が消えた場合も枠だけ残る。 */
.daimoku-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  /* 名前の左に置く（2026-08-22、人間の指摘で右から変更） */
  margin-right: 0.4rem;
  vertical-align: middle;
  flex: 0 0 auto;
  color: #6C757D;
  /* **枠そのものを丸くする**（2026-08-22、人間の要望「アイコンは丸くして
     ほしい」）。写真だけを丸くしていたので、写真を持たない人の人型アイコンは
     四角い余白のままだった。枠を丸くして淡い地を敷けば、**写真の有無に
     よらず同じ丸いアイコン**として並ぶ。 */
  border-radius: 50%;
  overflow: hidden;
  background-color: #F5FAFD;
  border: 1px solid #DCE7ED;
}

.daimoku-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.daimoku-avatar svg {
  width: 20px;
  height: 20px;
}

/* ランキングの状態バッジ（2026-08-22、人間の要望でアイコン化）。
   「唱題中」と「詳細」で形を揃え、色だけで見分ける。 */
.daimoku-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* 2つが同じ列に交互で並ぶので幅を揃える（2026-08-22、人間の要望）。
     文字数が違っても端が揃い、視線の止まる位置が行ごとにぶれない。 */
  min-width: 6.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
/* アイコンの占める幅も揃える（数珠の輪と矢印で字面が違うため） */
.daimoku-pill svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
/* 唱題中は「いま起きていること」なので、一覧の中でいちばん目立たせる
   （2026-08-22、人間の要望で淡い緑から暖色へ変更）。文字色は濃い茶で
   コントラストを確保する。 */
.daimoku-chanting {
  background: linear-gradient(135deg, #FF9E80 0%, #FFD97D 100%);
  color: #6E2F0B;
  box-shadow: 0 1px 4px rgba(255, 122, 80, 0.45);
}
/* 詳細はprimary系（青寄り）。押せるものなので、触れると少し濃くなる。 */
.daimoku-pill-detail {
  background: linear-gradient(135deg, #8ECAE6 0%, #A9DCEF 100%);
  color: #10506B;
}
.daimoku-pill-detail:hover,
.daimoku-pill-detail:focus {
  background: linear-gradient(135deg, #7DB8D4 0%, #97CCE2 100%);
  color: #0B3D52;
}
.daimoku-chanting svg {
  animation: daimoku-chanting-pulse 1.8s ease-in-out infinite;
}
@keyframes daimoku-chanting-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}
/* 動きを減らす設定の端末では脈動を止める（乗り物酔いや注意の妨げを避ける） */
@media (prefers-reduced-motion: reduce) {
  .daimoku-chanting svg {
    animation: none;
  }
}

/* マスの色の選択（2026-08-22、人間の要望）。色そのものが選択肢なので、
   名前ではなく色見本を押させる（名前は title と読み上げ用に持たせる）。 */
.daimoku-color-swatch {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px #D7E3EA;
}
.daimoku-color-swatch.is-selected {
  /* 選択中は輪郭を濃くする。色だけで示すと、色覚によっては伝わらない */
  box-shadow: 0 0 0 3px #212529;
}
.daimoku-color-sora { background-color: #8ECAE6; }
.daimoku-color-wakaba { background-color: #A8D5BA; }
.daimoku-color-sakura { background-color: #F4A7BB; }
.daimoku-color-hidamari { background-color: #FFD97D; }
.daimoku-color-fuji { background-color: #C3B1E1; }


/* LINEではじめるボタン（2026-08-22、LINEログイン追加時）。
   アイコンと文字の間隔だけを整える。色は既存の .btn-light のまま —
   LINEブランドカラー（#06C755）で塗ると、このサイトのパステルの中で
   1つだけ彩度が突出して浮くうえ、公式ロゴでもないのにブランド色だけ
   借りるのは紛らわしいため。 */
.daimoku-line-cta {
  display: inline-flex;
  align-items: center;
  /* 中央寄せ（2026-08-22、人間の指摘）。inline-flex にした時点で Bootstrap の
     text-align による中央寄せが効かなくなり、幅いっぱいのボタン（d-grid）の
     中で左に寄っていた。隣の「Googleでログイン」は普通のボタンで中央に
     出るので、並ぶと揃っていないのがはっきり分かる。 */
  justify-content: center;
  gap: 0.4rem;
}
.daimoku-line-cta svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* プロフィール登録画面の「ログイン中のアカウント」（2026-08-22、人間の要望
   「ログインしたアカウントの名前と、メールアドレスをニックネームの上に
   表示して」）。**入力欄と見間違えないように**淡い水色の地にする — 入力欄は
   淡い山吹色（.form-control）なので、地の色だけで「これは読むもので
   書くものではない」と分かる。 */
.account-card {
  background-color: #F5FAFD;
  border-color: #8ECAE6;
}

/* プロフィールの登録・編集フォーム（2026-08-22、人間の指摘「白枠がないので
   入れてほしい。レイアウトをもう少しかっこよくできないか？」）。

   それまでは淡い地色の上に入力欄が10個ほど素で並んでいて、どこまでが一続きの
   設定なのか分からなかった。**章ごとに白いカードへ入れ、見出しを付ける。**
   カード自体の丸みと影は共通の `.card` から受け取るので、ここでは章の見出しと
   間隔だけを決める。 */
.profile-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1B6E8C;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #E4F2F9;
}

/* 送信ボタンは章の外に置き、幅いっぱいにして「ここで終わり」を示す。
   広い画面では内容に合わせた幅に戻す（横に伸びきったボタンは間延びする）。 */
.profile-actions .btn {
  width: 100%;
}

@media (min-width: 576px) {
  .profile-actions .btn {
    width: auto;
    min-width: 12rem;
  }
}

/* 退会の章。**設定の続きに見せない** — 淡い赤の縁で、性質が違うことを示す。 */
.profile-danger {
  border: 1px solid #F5C6C2;
  box-shadow: 0 4px 14px rgba(242, 139, 130, 0.18);
}

.profile-danger .profile-section-title {
  color: #B4443B;
  border-bottom-color: #F8DAD7;
}

/* カスタム絵柄の文字入力は短くてよい（最大8文字）。
   幅いっぱいに伸ばすと、何文字入れる欄なのか伝わらない。 */
.chart-custom-input {
  max-width: 18rem;
}

/* カスタム絵柄の下書き（CHART-1）。入力した文字がどんなマスの並びになるかを
   その場で見せる。唱題表本体（.daimoku-chart）より小さいマスで、形が
   分かれば十分な大きさにする。 */
.chart-custom-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 3px);
  gap: 1px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}

.chart-custom-grid span {
  width: 3px;
  height: 3px;
  background-color: #EDF2F5;
}

.chart-custom-grid span.is-filled {
  background-color: #8ECAE6;
}

/* 五指針と御文（2026-08-22、人間の指摘で旧トップから復活）。
   旧実装は <pre> の等幅テキストで、狭い画面でははみ出していた。
   読み物として組み直す — 中央寄せ、行間を広め、淡い地色で本文と区切る。 */
.daimoku-shishin {
  background-color: #F5FAFD;
  border: 1px solid #DCE7ED;
  text-align: center;
}

/* 「信心の五指針」「御文」の見出し。本文より一段ひかえめにして、
   指針そのものより目立たないようにする。 */
.daimoku-shishin-heading {
  color: #5A7A8C;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 五指針は5つのオーバル（丸みの強いピル）に分ける（2026-08-22、人間の要望
   「５つのオーバルにわけてほしい」）。中央揃えの素の行並びだと、ただの
   テキストの塊に見えて5つあることが伝わらなかった。

   `ol` の連番は見た目には出さない（オーバルの中に数字を入れると窮屈になる）。
   順序のある一覧であることは読み上げに残る。 */
.daimoku-shishin-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.daimoku-shishin-list li {
  background-color: #FFFFFF;
  border: 1px solid #C9DEE8;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  flex: 0 0 auto;
  box-shadow: 0 1px 2px rgba(33, 37, 41, 0.06);
}

/* 5つでひとつながり、と見えるように**横一列**に収める（2026-08-22、人間の
   要望「五指針はひとつにまとめて」）。折り返して2段になると、5つで一組の
   指針ではなく別々の項目が並んでいるように見えてしまう。
   幅が足りない画面では折り返す（切れるより折り返す方がまし）。 */
@media (min-width: 992px) {
  .daimoku-shishin-list {
    flex-wrap: nowrap;
  }
}

/* 御文は左揃えにし、1行の長さを制限する（2026-08-22）。
   中央揃えのまま画面幅いっぱいに流すと、長い御文が途中で折り返して
   行の頭が揃わず、見た目が乱れる。
   引用符は付けない（御書の表記に余計な記号を足さない）。 */
.daimoku-gosho-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 40rem;
  margin-inline: auto;
  text-align: left;
}

.daimoku-gosho {
  margin: 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid #8ECAE6;
}

.daimoku-gosho p {
  line-height: 1.9;
  margin-bottom: 0.35rem;
}

.daimoku-gosho .blockquote-footer {
  font-size: 0.85rem;
  text-align: right;
  margin-bottom: 0;
}

.daimoku-gosho .blockquote-footer::before {
  /* Bootstrap既定の「—」は出典の前に付くが、御書名には不要 */
  content: "";
}

/* メニューのリンク集（2026-08-22、人間の要望）。
   「リンク集」は見出しであってリンクではないので、押せそうに見せない。 */
.daimoku-nav-heading {
  font-size: 0.8rem;
  font-weight: 700;
  color: #6C757D;
  padding-bottom: 0;
}

/* 「リンク集」は押して開く見出し（`details`/`summary`）。
   既定の三角マーカーは消し、自前の「＋／−」で開閉を示す。 */
.daimoku-nav-links summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  /* メニューは右詰なので、開閉の見出しも右端へ揃える
     （既定のままだと1項目だけ左端に出て並びが崩れる） */
  justify-content: flex-end;
  gap: 0.35rem;
}

.daimoku-nav-links summary::-webkit-details-marker {
  display: none;
}

.daimoku-nav-links summary::after {
  content: "＋";
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.7;
}

.daimoku-nav-links[open] summary::after {
  content: "−";
}

/* 外部サイトへのリンクは1段下げて、見出しの下にぶら下がっていることを示す */
.daimoku-nav-external {
  padding-left: 1rem;
}

.daimoku-external-icon {
  margin-left: 0.3rem;
  vertical-align: -0.15em;
  opacity: 0.7;
}