/* =============================================
   ほたるケアマネSaaS — 共通スタイル
   ============================================= */

:root {
  --navy:        #2c3040;
  --navy-light:  #3d4a5e;
  --navy-hover:  #4a5870;
  --gold:        #C0A062;
  --gold-light:  #e4ceA0;
  --gold-bg:     #fdf8ee;
  --ivory:       #f9f8f5;
  --white:       #ffffff;
  --gray-50:     #f8f9fa;
  --gray-100:    #f1f3f5;
  --gray-200:    #e9ecef;
  --gray-300:    #dee2e6;
  --gray-400:    #ced4da;
  --gray-500:    #adb5bd;
  --gray-600:    #6c757d;
  --gray-700:    #495057;
  --gray-800:    #343a40;
  --gray-900:    #212529;
  --red:         #e74c3c;
  --red-light:   #fdf0ee;
  --green:       #27ae60;
  --green-light: #edfaf3;
  --amber:       #f39c12;
  --amber-light: #fef9ec;
  --blue:        #3b82f6;
  --blue-light:  #eff6ff;
  --prevention:       #8b5cf6;
  --prevention-light: #c4b5fd;
  --prevention-bg:    #f5f3ff;

  /* -------------------------------------------------------------------
     文字に使う「濃い版」トークン（JIS X 8341-3 / WCAG 2.0 AA 対応・2026-08-16）

     ブランド色（--gold / --red / --green / --amber）は「面（背景・枠・アイコン）」用。
     そのまま白背景の文字に使うとコントラスト比が 4.5:1 に届かないため、
     **文字に使うときは必ず下の *-ink を使う**こと。
     数値は白背景（#fff）または各 *-light 背景に対する実測値。

       --gold-ink   #7a5c1e  6.2:1  … 本文中のリンク（--gold は 2.5:1 で不可）
       --red-ink    #c0392b  5.4:1  … 危険操作の面（白文字を載せる）／赤系の文字
       --green-ink  #15703a  5.7:1  … 成功・完了の文字（旧 #1e8449 は 4.4:1）
       --amber-ink  #8a5a00  5.6:1  … 警告バッジの文字（旧 #b7770d は 3.5:1）
       --orange-ink #8a3d00  7.0:1  … 要介護3バッジの文字（旧 #e65100 は 3.5:1）
     ------------------------------------------------------------------- */
  --gold-ink:    #7a5c1e;
  --red-ink:     #c0392b;
  --green-ink:   #15703a;
  --amber-ink:   #8a5a00;
  --orange-ink:  #8a3d00;

  /* キーボードフォーカスの枠線色（2.4.7 AA）。
     紺色のサイドバー・ヘッダーの上では青が沈むため、そこだけ黄色を使う。 */
  --focus:         #0b5fff;
  --focus-on-navy: #ffd000;

  --sidebar-w:   264px;
  --header-h:    64px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  /* 14px → 16px（JIS X 8341-3 / クライアントFB「全体的に文字を大きく」）。
     印刷は print.css の @media print が 10pt に戻すため、帳票の見た目は変わらない。 */
  font-size: 16px;
  background: var(--gray-100);
  color: var(--gray-900);
  line-height: 1.7;
  min-height: 100vh;
}

/* =============================================
   アクセシビリティの土台（2026-08-16）
   ・リンクは色だけで示さない（1.4.1 A）
   ・キーボードのフォーカス位置を必ず見せる（2.4.7 AA）
   ============================================= */

/* 本文中のリンク。--gold（2.5:1）ではなく --gold-ink（6.2:1）＋下線。
   .btn / .sidebar-nav / タブ等「見た目でリンクと分かる部品」は個別に打ち消す。 */
a {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--navy);
}

/* フォーカスリング。:focus ではなく :focus-visible を使い、
   マウスクリック時には出さない（見た目のノイズを増やさないため）。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 紺地（ヘッダー・サイドバー）の上では青が沈むので黄色に切り替える */
.app-header a:focus-visible,
.app-header button:focus-visible,
.app-sidebar a:focus-visible,
.app-sidebar button:focus-visible {
  outline-color: var(--focus-on-navy);
}

/* 古い Safari 等 :focus-visible 非対応ブラウザ向けの保険。
   非対応なら :focus で出す（対応ブラウザではこの行ごと無効になる）。 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* =============================================
   レイアウト
   ============================================= */

.app-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-body {
  display: flex;
  flex: 1;
  padding-top: var(--header-h);
}

/* =============================================
   ヘッダー
   ============================================= */

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.header-logo-icon {
  width: 32px;
  height: 32px;
  background: var(--gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-logo-icon svg {
  width: 18px;
  height: 18px;
  color: var(--navy);
}

.header-app-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

/* --gold-light は紺地に対して 8.5:1 で基準を満たしているため色はそのまま。
   小さすぎたサイズだけ引き上げる。 */
.header-office-name {
  font-size: 13px;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.header-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.2);
  margin: 0 16px;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.header-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}

.header-user-name {
  font-size: 15px;
  font-weight: 600;
}

.header-user-role {
  font-size: 13px;
  color: var(--gold-light);
  font-weight: 600;
}

/* ログアウトボタン。紺ヘッダー上なので枠と文字を白寄りにする。
   文字は PC でのみ表示し、狭い画面ではアイコンのみ（aria-label は常に有効）。 */
.header-logout {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}

.header-logout:hover {
  background: rgba(255,255,255,0.14);
}

.header-logout-text {
  font-size: 13.5px;
  font-weight: 600;
}

@media screen and (max-width: 900px) {
  .header-logout-text { display: none; }
}

/* 通知ベル。以前は <div> だったためキーボードで到達できず、読み上げ名も無かった。
   ビュー側を <button aria-label="通知"> に変更したので、button の既定装飾を打ち消す。 */
.header-bell {
  margin-left: 12px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  color: rgba(255,255,255,0.92);
  background: transparent;
  border: none;
  padding: 0;
  transition: background 0.15s;
}

.header-bell:hover {
  background: rgba(255,255,255,0.14);
}

.header-bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid var(--navy);
}

/* =============================================
   サイドバー
   ============================================= */

.app-sidebar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--navy);
  overflow-y: auto;
  z-index: 90;
  display: flex;
  flex-direction: column;
}

/* 旧 rgba(255,255,255,0.35) は紺地に対して約 2.2:1 しかなかった */
.sidebar-section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.72);
  padding: 18px 16px 6px;
}

.sidebar-nav {
  list-style: none;
  padding: 0 8px;
}

.sidebar-nav li {
  margin-bottom: 2px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  min-height: 44px;
  border-radius: 8px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.15s;
  cursor: pointer;
}

.sidebar-nav a:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.sidebar-nav a.active {
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
}

.sidebar-nav a .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar-nav a.active .nav-icon {
  opacity: 1;
}

.sidebar-nav a .nav-badge {
  margin-left: auto;
  background: var(--red-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.sidebar-nav a.active .nav-badge {
  background: var(--navy);
  color: #fff;
}

.sidebar-nav a .nav-tag {
  margin-left: auto;
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* メニュー項目名の下に添えるサブラベル（実務の補足説明） */
.sidebar-nav a .nav-sublabel {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav a.active .nav-sublabel {
  color: rgba(44,62,80,0.7); /* gold 背景上でも読めるネイビー寄り */
}

.sidebar-bottom {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-version {
  font-size: 13.5px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  padding: 8px 0;
}

/* =============================================
   メインコンテンツ
   ============================================= */

.app-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 24px;
  min-width: 0;
}

/* =============================================
   モバイルナビ（ハンバーガー + スライドインサイドバー・第2弾）

   第1弾は「サイドバーを通常フローに戻してヘッダー下に縦積み」する応急対応だった。
   ただし利用者を開いているとメニュー項目が15件前後になり、本文に辿り着くまでに
   長いスクロールが必要になる。第2弾ではサイドバーを画面外に退避させ、
   ハンバーガーボタンでスライドインさせる方式に置き換える。

   PC幅（901px以上）では従来どおり常時表示の固定サイドバーのまま。
   ============================================= */

/* ハンバーガーボタン: 900px 以下でのみ表示する */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 8px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* 開いている間はアイコンを「×」に差し替える（状態が一目で分かるように） */
.nav-toggle .nav-toggle-icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon-close { display: block; }

/* サイドバーを開いている間だけ本文を覆う暗幕。タップで閉じる。 */
.app-nav-overlay {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 89; /* サイドバー(90)の下・本文の上 */
  border: 0;
  padding: 0;
  margin: 0;
  width: auto;
  cursor: pointer;
}

/* =============================================
   フォーム: グリッドユーティリティ
   （インライン style での grid 指定を置き換えるための共通クラス。
     モバイル幅では上のメディアクエリで1カラムに畳まれる）
   ============================================= */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* 2つの可変列 + 幅を固定したい最終列（避難場所1/2 + 避難手段 など） */
.form-grid-2-fixed-last {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  gap: 12px;
}

.form-grid-span-2 {
  grid-column: span 2;
}

/* 参照表示（show画面）用。フォームより余白を広めに取る。 */
.info-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

/* 「ラベル / 選択 / 備考」の横1行（モニタリングの変化・所見など） */
.field-row {
  display: grid;
  grid-template-columns: 200px 130px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.field-row-wide {
  display: grid;
  grid-template-columns: 220px 150px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.field-row-label {
  font-size: 13px;
  font-weight: 600;
}

/* 出席者入力行（第4表） */
.attendee-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 40px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: end;
}

/* 入力欄と送信ボタンを横に並べる行 */
.inline-submit-row {
  display: flex;
  gap: 8px;
}

/* 支援経過記録（第5表）の新規追加行: 日時 / 種別 / 内容+追加 */
.sr-new-row {
  grid-template-columns: 200px 160px 1fr;
  align-items: end;
  gap: 12px;
}

/* 家族構成図（ジェノグラム）と家族一覧表の2カラム。
   ジェノグラムは横幅を要求するので、モバイルでは縦積みにする。 */
.genogram-split {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.3fr;
  gap: 16px;
  align-items: start;
}

/* =============================================
   音声入力ボックス（shared/_speech_recognition）
   訪問先でよく使う機能なので、モバイルでは指で押せる大きさに広げる。
   ============================================= */
.speech-box {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fffbeb;
}

.speech-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.speech-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
}

.speech-btn-rec      { background: #ef4444;     color: #fff; }
.speech-btn-stop     { background: var(--gray-700); color: #fff; }
.speech-btn-clear    { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-300); }
.speech-btn-transfer { background: var(--navy); color: #fff; }

.speech-output {
  width: 100%;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  resize: vertical;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 支援経過記録の一覧1件分（日時・種別 / 本文） */
.record-row {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
}

.record-row:last-child {
  border-bottom: none;
}

.record-row-meta {
  min-width: 80px;
}

/* 横に長い表を、はみ出させずに横スクロールさせるラッパー。
   .card は overflow: hidden なので、囲まないと列が見えなくなる。 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 入力欄を並べた帳票風の表（モニタリング様式など）。
   モバイルでは列を縮めるより横スクロールさせた方が入力できる
   （%指定のまま縮むと、選択欄が2〜3文字幅になって実用に耐えない）。 */
.wide-form-table {
  width: 100%;
  border-collapse: collapse;
}

/* =============================================
   ページヘッダー
   ============================================= */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.page-subtitle {
  font-size: 15px;
  color: var(--gray-700);
  margin-top: 3px;
}

.page-breadcrumb {
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* パンくずの「>」だけは装飾なので薄いままでよい（文字情報を持たない） */
.page-breadcrumb span {
  color: var(--gray-700);
}

/* =============================================
   ページ操作ボタン群（clients#show 等）
   主操作1つ＋「その他の操作」に畳む形（クライアントFB: どれが編集か分からない）
   ============================================= */

.page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 主操作。ゴールドの塗りで1つだけ目立たせる */
.page-actions-primary {
  font-weight: 700;
}

.page-actions-more {
  position: relative;
}

/* <summary> は既定で三角マーカーが付くので消す。
   role/aria は <details> がブラウザ側で面倒をみるため付けない。 */
.page-actions-more > summary {
  list-style: none;
  cursor: pointer;
}

.page-actions-more > summary::-webkit-details-marker {
  display: none;
}

.page-actions-more[open] > summary {
  background: var(--gray-100);
}

.page-actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 15rem;
  background: #fff;
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.page-actions-menu form {
  display: block;
}

/* メニュー項目。link_to と button_to（＝<button>）の見た目を揃える。 */
.page-actions-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-800);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.page-actions-item:hover {
  background: var(--gray-100);
  color: var(--navy);
}

.page-actions-item-danger {
  color: var(--red-ink);
}

.page-actions-item-danger:hover {
  background: var(--red-light);
  color: var(--red-ink);
}

/* 利用者詳細などの情報カード内の項目表（旧: インライン font-size:13px）。
   ラベル列は太字＋濃い色にして、値と見分けられるようにする。 */
.info-table {
  width: 100%;
  font-size: 16px;
  border-collapse: collapse;
}

.info-table td {
  padding: 8px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-100);
}

.info-table tr:last-child td {
  border-bottom: none;
}

.info-table .info-table-label {
  color: var(--gray-700);
  font-weight: 600;
  padding-right: 12px;
  white-space: nowrap;
}

/* 情報カードの見出し右に置く「編集」リンク（該当項目まで直接飛ぶ） */
.card-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  .page-actions {
    width: 100%;
  }

  .page-actions > .btn,
  .page-actions-more,
  .page-actions-more > summary {
    width: 100%;
  }

  /* 画面が狭いときは絶対配置をやめて、その場に開く（画面外に出ないように） */
  .page-actions-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    margin-top: 6px;
  }
}

/* =============================================
   カード
   ============================================= */

.card {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-body {
  padding: 16px 18px;
}

/* =============================================
   ボタン
   ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 高さ 44px 以上を確保（指での誤タップ対策・規格の必須要件ではないが高齢層向けに実施） */
  padding: 10px 18px;
  min-height: 44px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--navy-light);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
}

.btn-gold:hover {
  background: #b08d50;
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}

.btn-outline:hover {
  background: var(--navy);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--gray-700);
  border: 1.5px solid var(--gray-300);
}

.btn-ghost:hover {
  background: var(--gray-100);
}

/* 小さめボタン。行内に並べる用途だが、下限は 36px までとし 10px 台には落とさない。 */
.btn-sm {
  padding: 7px 12px;
  min-height: 36px;
  font-size: 13.5px;
}

.btn-sm svg {
  width: 15px;
  height: 15px;
}

/* 削除等の危険操作。--red(#e74c3c) だと白文字が 3.8:1 で AA 未達のため
   --red-ink(#c0392b・5.4:1) を面に使う。 */
.btn-danger {
  background: var(--red-ink);
  color: #fff;
}

.btn-danger:hover {
  background: #a5281c;
}

.btn-ai {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(79,70,229,0.35);
}

.btn-ai:hover {
  background: linear-gradient(135deg, #4338ca, #6d28d9);
}

/* =============================================
   フォーム
   ============================================= */

.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.form-label.required::after {
  content: ' *';
  color: var(--red-ink);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  border: 1.5px solid var(--gray-400);
  border-radius: 7px;
  /* 16px は「読みやすさ」と「iOS Safari がフォーカス時にページごと拡大するのを防ぐ」の両方を兼ねる */
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--gray-900);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

/* 入力欄は :focus（マウス操作でも）で強調する。
   どこを編集しているか分からなくなるのが一番困るため、ここは focus-visible に絞らない。 */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(11,95,255,0.22);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray-400);
}

/* =============================================
   ラジオ・チェックボックス
   ============================================= */

.radio-group,
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-item,
.check-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.radio-item input[type="radio"],
.check-item input[type="checkbox"] {
  accent-color: var(--gold-ink);
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ラベルにも当たり判定を持たせて、実質のタップ領域を 44px 相当まで広げる */
.radio-item label,
.check-item label {
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ラジオボタンをボタン式に */
.radio-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* display:none にするとキーボードでフォーカスできず、Tab でこの選択肢群を飛ばしてしまう。
   見た目は隠したままフォーカスは受け取れる形にする（2.1.1 A / 2.4.7 AA）。 */
.radio-btn-group input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.radio-btn-group label {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  min-height: 44px;
  border: 1.5px solid var(--gray-400);
  border-radius: 22px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--gray-800);
  user-select: none;
}

/* 選択中は「色」だけでなく「太字＋濃い枠」でも示す（色覚に依存させない・1.4.1 A） */
.radio-btn-group input[type="radio"]:checked + label {
  border-color: var(--gold-ink);
  border-width: 2px;
  background: var(--gold-bg);
  color: var(--gold-ink);
  font-weight: 700;
}

/* display:none のままだとキーボードでフォーカスできないため、
   視覚的に隠しつつフォーカス可能な形に変える（2.1.1 A）。 */
.radio-btn-group input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.radio-btn-group label:hover {
  border-color: var(--gold);
  background: #fefcf6;
}

/* =============================================
   テーブル
   ============================================= */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.data-table th {
  background: var(--gray-100);
  padding: 12px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: 0.02em;
  border-bottom: 2px solid var(--gray-300);
  white-space: nowrap;
}

.data-table td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-900);
  vertical-align: middle;
}

/* 一覧の中のリンク（利用者名など）は色だけでなく下線でも示す（1.4.1 A）。
   行全体がリンクに見えてしまわないよう、下線は控えめなオフセットにする。 */
.data-table td a {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* .btn を当てたセル内リンク（「修正」等）は下線を出さない（ボタンに見えるため） */
.data-table td a.btn {
  text-decoration: none;
}

/* 診断名（病名）は1行1件で出す。以前は「／」で連結＋30字で切っていた。 */
.diagnosis-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.diagnosis-list li {
  padding: 1px 0;
  line-height: 1.6;
}

.diagnosis-list li + li {
  border-top: 1px dotted var(--gray-300);
}

.data-table tr:hover td {
  background: #fafbfc;
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* =============================================
   バッジ・ラベル
   ============================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* 文字色は必ず *-ink 側を使う。淡色背景に対して 4.5:1 以上を確保している。 */
.badge-red    { background: var(--red-light);    color: var(--red-ink); }
.badge-green  { background: var(--green-light);  color: var(--green-ink); }
.badge-amber  { background: var(--amber-light);  color: var(--amber-ink); }
.badge-blue   { background: var(--blue-light);   color: #1d4ed8; }
.badge-gold   { background: var(--gold-bg);      color: var(--gold-ink); border: 1px solid var(--gold-light); }
.badge-navy   { background: #eef0f5;             color: var(--navy); }
.badge-gray   { background: var(--gray-100);     color: var(--gray-700); }
.badge-prevention { background: var(--prevention-bg); color: #5b21b6; border: 1px solid var(--prevention-light); }

/* 要介護度バッジ */
.care-level {
  display: inline-block;
  min-width: 62px;
  padding: 4px 8px;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}

.care-level-1 { background: #e8f5e9; color: #1b5e20; }
.care-level-2 { background: #e3f2fd; color: #0d47a1; }
/* 旧 #e65100 は薄オレンジ背景に対して 3.5:1 で AA 未達だった */
.care-level-3 { background: #fff3e0; color: var(--orange-ink); }
.care-level-4 { background: #fce4ec; color: #880e4f; }
.care-level-5 { background: #f3e5f5; color: #6a1b9a; }

/* =============================================
   差分表示（アセスメント比較）
   ============================================= */

/* 増減表示。--green(2.9:1) / --red(3.8:1) を直接使うと AA 未達のため ink 版を使う。 */
.diff-improved {
  color: var(--green-ink);
  font-weight: 700;
}

.diff-declined {
  color: var(--red-ink);
  font-weight: 700;
}

.diff-unchanged {
  color: var(--gray-700);
}

.diff-tag-up {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--green-ink);
  background: var(--green-light);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
}

.diff-tag-down {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--red-ink);
  background: var(--red-light);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
}

/* =============================================
   タブ
   ============================================= */

.tabs-bar {
  display: flex;
  border-bottom: 2px solid var(--gray-200);
  gap: 0;
  margin-bottom: 0;
}

.tab-btn {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-700);
  border: none;
  background: transparent;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap;
}

.tab-btn:hover {
  color: var(--navy);
  background: var(--gray-50);
}

.tab-btn.active {
  color: var(--navy);
  font-weight: 700;
  border-bottom-color: var(--gold);
}

.tab-content {
  display: none;
  padding: 20px;
}

.tab-content.active {
  display: block;
}

/* =============================================
   ステータスインジケーター
   ============================================= */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot-green  { background: var(--green); }
.status-dot-amber  { background: var(--amber); }
.status-dot-red    { background: var(--red); }
.status-dot-gray   { background: var(--gray-400); }

/* =============================================
   検索バー
   ============================================= */

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.search-input-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gray-400);
}

.search-input-wrap input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1.5px solid var(--gray-300);
  border-radius: 7px;
  font-size: 13.5px;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.search-input-wrap input:focus {
  border-color: var(--gold);
}

.search-select {
  padding: 8px 12px;
  border: 1.5px solid var(--gray-300);
  border-radius: 7px;
  font-size: 13.5px;
  font-family: 'Noto Sans JP', sans-serif;
  background: #fff;
  color: var(--gray-700);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.search-select:focus {
  border-color: var(--gold);
}

/* =============================================
   サマリーカード
   ============================================= */

.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.summary-card {
  background: var(--white);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  border-left: 4px solid var(--gray-300);
}

.summary-card.card-red    { border-left-color: var(--red); }
.summary-card.card-green  { border-left-color: var(--green); }
.summary-card.card-amber  { border-left-color: var(--amber); }
.summary-card.card-gold   { border-left-color: var(--gold); }
.summary-card.card-navy   { border-left-color: var(--navy); }
.summary-card.card-blue   { border-left-color: var(--blue); }

.summary-card-label {
  font-size: 15px;
  color: var(--gray-800);
  font-weight: 700;
  margin-bottom: 6px;
}

.summary-card-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.1;
}

.summary-card-sub {
  font-size: 13.5px;
  color: var(--gray-700);
  margin-top: 5px;
}

/* =============================================
   ユーティリティ
   ============================================= */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-4 { margin-bottom: 16px; }
.text-sm { font-size: 14px; }
.text-xs { font-size: 13.5px; }
.text-gray { color: var(--gray-700); }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* =============================================
   スクロールバー
   ============================================= */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* =============================================
   Flash メッセージ
   ============================================= */

.flash-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin-bottom: 16px;
  background: var(--green-light);
  border: 1px solid var(--green);
  border-radius: 8px;
  font-size: 15px;
  color: var(--green-ink);
}

.flash-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin-bottom: 16px;
  background: var(--red-light);
  border: 1px solid var(--red);
  border-radius: 8px;
  font-size: 15px;
  color: var(--red-ink);
}

.flash-notice button,
.flash-alert button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: inherit;
  padding: 0 4px;
}

/* =============================================
   Kaminari ページネーション
   ============================================= */

nav.pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}

nav.pagination a,
nav.pagination span,
nav.pagination em {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  color: var(--gray-700);
}

nav.pagination a:hover {
  background: var(--gray-100);
}

nav.pagination em.current {
  background: var(--navy);
  color: #fff;
  font-style: normal;
  font-weight: 600;
}

nav.pagination span.gap {
  color: var(--gray-400);
}

/* =============================================
   介護予防（様式2/3/4）テーマ — 紫系
   ============================================= */

.btn-prevention {
  background: var(--prevention);
  color: #fff;
  font-weight: 600;
}

.btn-prevention:hover {
  background: #7c3aed;
}

.prevention-card {
  border-top: 3px solid var(--prevention-light);
}

/* =============================================
   ダッシュボード
   ============================================= */

.dashboard-welcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 12px;
  color: #fff;
}

.dashboard-greeting {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.dashboard-date {
  font-size: 13px;
  color: var(--gold-light);
  margin-top: 4px;
}

.dashboard-office-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.summary-card-icon {
  margin-bottom: 8px;
}

.summary-card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--gray-700);
}

.summary-card.card-gold .summary-card-icon svg  { color: var(--gold); }
.summary-card.card-green .summary-card-icon svg { color: var(--green); }
.summary-card.card-amber .summary-card-icon svg { color: var(--amber); }
.summary-card.card-red .summary-card-icon svg   { color: var(--red); }

.dashboard-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 16px;
}

.dashboard-left,
.dashboard-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* タイムライン */
.timeline {
  padding: 0;
}

.timeline-item {
  display: flex;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gray-100);
  align-items: flex-start;
  transition: background 0.1s;
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-item:hover {
  background: var(--gray-50);
}

.timeline-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.timeline-icon-care_plan {
  background: var(--green-light);
  color: var(--green);
}

.timeline-icon-monitoring {
  background: var(--amber-light);
  color: var(--amber);
}

.timeline-icon-ai_draft {
  background: #f3e8ff;
  color: #7c3aed;
}

.timeline-content {
  flex: 1;
  min-width: 0;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.timeline-action {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
}

.timeline-time {
  font-size: 13.5px;
  color: var(--gray-700);
  white-space: nowrap;
}

.timeline-client {
  font-size: 13px;
  margin-top: 2px;
}

/* クイックアクション */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--gray-800);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s;
}

.quick-action-btn:hover {
  background: var(--gray-50);
}

.quick-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* AI利用統計 */
.ai-stats-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}

.ai-stats-total-value {
  font-size: 28px;
  font-weight: 700;
  color: #7c3aed;
}

.ai-stats-total-label {
  font-size: 13px;
  color: var(--gray-700);
}

.ai-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.ai-stats-type {
  font-size: 14px;
  color: var(--gray-700);
}

.ai-stats-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

/* フッター情報 */
.dashboard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--gray-200);
  font-size: 13.5px;
  color: var(--gray-700);
}

/* =============================================
   終活情報ページ
   ============================================= */

.eol-notice-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: #faf8f5;
  border: 1px solid #e8e0d0;
  border-radius: 8px;
  font-size: 15px;
  color: var(--gold-ink);
}

.eol-notice-banner svg {
  color: #b8860b;
  flex-shrink: 0;
}

.eol-grid,
.eol-form-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 16px;
  margin-top: 16px;
}

.eol-left,
.eol-form-left,
.eol-right,
.eol-form-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eol-card {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.eol-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-800);
  background: #faf8f5;
}

.eol-card-header svg {
  color: #b8860b;
  flex-shrink: 0;
}

.eol-card-body {
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gray-800);
}

.eol-card-body p {
  margin: 0;
}

/* ほたる海洋散骨連携リンク */
.eol-hotaru-link {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--blue-light);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #1d4ed8;
}

/* 結い言サービスカード */
.eol-yuigon-card {
  background: linear-gradient(135deg, #2c3040 0%, #3d4a5e 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(44,48,64,0.25);
}

.eol-yuigon-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(192,160,98,0.25);
}

.eol-yuigon-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}

.eol-yuigon-body {
  padding: 16px;
}

.eol-yuigon-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  margin-bottom: 16px;
}

.eol-yuigon-status {
  margin-bottom: 8px;
}

.eol-yuigon-label {
  font-size: 13.5px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.eol-status-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.eol-status-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  color: rgba(255,255,255,0.35);
  position: relative;
  padding-left: 22px;
}

.eol-status-step::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 18px;
  width: 1px;
  height: calc(100% - 4px);
  background: rgba(255,255,255,0.15);
}

.eol-status-step:last-child::before {
  display: none;
}

.eol-status-dot {
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: transparent;
  flex-shrink: 0;
}

.eol-status-step.active {
  color: rgba(255,255,255,0.7);
}

.eol-status-step.active .eol-status-dot {
  border-color: var(--gold);
  background: var(--gold);
}

.eol-status-step.active::before {
  background: var(--gold);
}

.eol-status-step.current {
  color: #fff;
  font-weight: 600;
}

.eol-status-step.current .eol-status-dot {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(192,160,98,0.3);
}

/* 折りたたみ */
.eol-details {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.eol-details-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}

.eol-details-summary::-webkit-details-marker {
  display: none;
}

.eol-details-summary::after {
  content: '';
  margin-left: auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--gray-400);
  transition: transform 0.2s;
}

.eol-details[open] .eol-details-summary::after {
  transform: rotate(180deg);
}

.eol-details-summary:hover {
  background: var(--gray-50);
}

.eol-details-summary svg {
  color: #b8860b;
  flex-shrink: 0;
}

.eol-details-body {
  padding: 14px 16px;
  border-top: 1px solid var(--gray-200);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gray-800);
}

.eol-details-body p {
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .dashboard-grid,
  .eol-grid,
  .eol-form-grid {
    grid-template-columns: 1fr;
  }

  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-welcome {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================================
   かんたん作成ウィザード（easy_plans）
   モック mockups/easy_wizard/mock.css のトーンを移植
   ============================================================ */

/* ダッシュボード最上部の大ボタン */
.ez-top-action {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  min-height: 110px;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.3);
  transition: opacity 0.15s, transform 0.15s;
  margin-bottom: 20px;
}

.ez-top-action:hover { opacity: 0.92; transform: translateY(-2px); }

.ez-top-action .ez-ta-icon { font-size: 38px; flex-shrink: 0; line-height: 1; }

.ez-top-action .ez-ta-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.ez-top-action .ez-ta-sub {
  font-size: 13px;
  opacity: 0.88;
  margin-top: 6px;
  line-height: 1.55;
}

.ez-top-action .ez-ta-arrow {
  font-size: 28px;
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ステップインジケーター */
.ez-step-indicator {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 0 24px;
  margin-bottom: 24px;
}

.ez-step-list {
  display: flex;
  list-style: none;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
}

.ez-step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px 12px;
  position: relative;
}

.ez-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--gray-200);
  color: var(--gray-700);
  margin-bottom: 6px;
}

.ez-step-label {
  font-size: 14px;
  color: var(--gray-700);
  text-align: center;
  line-height: 1.3;
}

.ez-step-item.done .ez-step-num { background: var(--green); color: #fff; }

.ez-step-item.active .ez-step-num {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
}

.ez-step-item.active .ez-step-label { color: #7c3aed; font-weight: 700; }

/* ウィザード本文ラッパー */
.ez-body {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.ez-heading {
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.ez-sub {
  color: var(--gray-700);
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* 利用者選択カード */
.ez-select-card {
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ez-select-card:hover { border-color: #7c3aed; box-shadow: 0 2px 12px rgba(124, 58, 237, 0.12); }

.ez-select-card.selected {
  border-color: #7c3aed;
  background: #faf7ff;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.15);
}

.ez-select-card + .ez-select-card { margin-top: 12px; }

.ez-sc-head { display: flex; align-items: center; gap: 18px; width: 100%; }

.ez-sc-icon { font-size: 28px; flex-shrink: 0; width: 40px; text-align: center; }

.ez-sc-title { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.35; }

.ez-sc-desc { font-size: 13px; color: var(--gray-700); margin-top: 3px; line-height: 1.5; }

.ez-sc-arrow { color: var(--gray-400); font-size: 20px; margin-left: auto; flex-shrink: 0; transition: transform 0.2s; }

.ez-select-card.selected .ez-sc-arrow { color: #7c3aed; }

/* 既存利用者の検索パネル */
.ez-existing-panel {
  margin-top: 14px;
  display: none;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  cursor: default;
}

.ez-existing-panel.open { display: block; }

.ez-search-box {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
  font-family: 'Noto Sans JP', sans-serif;
}

.ez-search-box:focus { border-color: #7c3aed; }

.ez-client-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.ez-client-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}

.ez-client-list li:hover { background: var(--white); }

.ez-client-list li.selected { background: #f0e9ff; }

.ez-cl-name { font-size: 15px; font-weight: 600; color: var(--navy); }

.ez-cl-meta { font-size: 14px; color: var(--gray-700); margin-top: 1px; }

.ez-cl-select-btn {
  font-size: 14px;
  padding: 4px 12px;
  border: 1.5px solid #7c3aed;
  color: #7c3aed;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
}

.ez-cl-select-btn:hover { background: rgba(124, 58, 237, 0.07); }

/* ドロップゾーン */
.ez-dropzone {
  border: 2.5px dashed #a78bfa;
  border-radius: 14px;
  background: #faf8ff;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  padding: 24px;
  transition: border-color 0.15s, background 0.15s;
}

.ez-dropzone:hover, .ez-dropzone.dragover { border-color: #7c3aed; background: #f5f0ff; }

.ez-dz-title { font-size: 16.5px; font-weight: 700; color: var(--navy); text-align: center; }

.ez-dz-sub { font-size: 13px; color: var(--gray-700); text-align: center; line-height: 1.55; }

.ez-dz-btn {
  padding: 9px 22px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}

.ez-dz-btn:hover { opacity: 0.85; }

/* 書類種別チップ */
.ez-doc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ez-doc-chip {
  padding: 5px 12px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  font-size: 14px;
  color: var(--gray-700);
}

/* ファイルリスト */
.ez-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ez-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}

.ez-fi-icon { font-size: 20px; flex-shrink: 0; }

.ez-fi-body { flex: 1; min-width: 0; }

.ez-fi-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ez-fi-status { font-size: 14px; margin-top: 2px; }

.ez-fi-status.pending { color: var(--amber); }
.ez-fi-status.ok { color: var(--green); }
.ez-fi-status.error { color: var(--red); }

.ez-fi-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 18px;
  padding: 4px 8px;
}

.ez-fi-remove:hover { color: var(--red); }

/* ウィザード下部ナビ */
.ez-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
}

.ez-btn-lg { padding: 13px 30px !important; font-size: 15.5px !important; }

/* 進捗ステップリスト（STEP3） */
.ez-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ez-progress-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  transition: background 0.2s;
}

.ez-progress-item.done { background: #f0faf4; }
.ez-progress-item.running { background: #f8f5ff; }
.ez-progress-item.error { background: var(--red-light); }

.ez-pi-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--gray-200);
  color: var(--gray-700);
}

.ez-pi-icon.done { background: var(--green); color: #fff; }
.ez-pi-icon.running { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; }
.ez-pi-icon.error { background: var(--red); color: #fff; }
.ez-pi-icon.skipped { background: var(--gray-300); color: var(--gray-700); }

.ez-pi-title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.35; }

.ez-progress-item.waiting .ez-pi-title { color: var(--gray-700); }

.ez-pi-desc { font-size: 14px; color: var(--gray-700); margin-top: 3px; line-height: 1.6; }

.ez-progress-item.running .ez-pi-desc { color: #7c3aed; }
.ez-progress-item.error .ez-pi-desc { color: var(--red-ink); }

/* スピナー */
.ez-spinner {
  width: 17px;
  height: 17px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ez-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes ez-spin { to { transform: rotate(360deg); } }

/* 進捗バー */
.ez-progress-bar {
  height: 10px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}

.ez-progress-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(to right, #7c3aed, #4f46e5);
  width: 0%;
  transition: width 0.6s ease;
}

/* 安心文言カード */
.ez-wait-note {
  padding: 14px 18px;
  background: var(--gold-bg);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--gray-700);
  line-height: 1.6;
}

.ez-wait-note strong { color: #9e8150; }

/* 完了・失敗パネル */
.ez-result-panel {
  margin-top: 24px;
  padding: 22px 24px;
  border-radius: 12px;
  text-align: center;
  display: none;
}

.ez-result-panel.completed { display: block; background: #f0faf4; border: 1.5px solid rgba(39, 174, 96, 0.35); }
.ez-result-panel.failed { display: block; background: var(--red-light); border: 1.5px solid rgba(231, 76, 60, 0.35); }

.ez-result-title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }

.ez-result-sub { font-size: 13.5px; color: var(--gray-700); line-height: 1.6; margin-bottom: 14px; }

@media (max-width: 640px) {
  .ez-nav { flex-direction: column; gap: 12px; }
  .ez-nav .btn { width: 100%; justify-content: center; }
  .ez-step-label { display: none; }
  .ez-top-action { flex-direction: column; text-align: center; gap: 10px; }
  .ez-top-action .ez-ta-arrow { display: none; }
}

/* ========================================================================
   ドラッグ&ドロップ並び替え（ニーズ・目標・サービス）
   ======================================================================== */

/* ドラッグ用ハンドル（⠿）。can_write? のときだけ描画する。 */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--gray-400);
  padding: 2px 4px;
  border-radius: 4px;
  user-select: none;
  touch-action: none; /* iPad 等でスクロールと競合させずドラッグを優先 */
  flex-shrink: 0;
  line-height: 1;
}
.drag-handle:hover { color: var(--gold); background: var(--gold-bg); }
.drag-handle:active { cursor: grabbing; }

/* ドラッグ中のプレースホルダ / つかんでいる要素 */
.sortable-ghost { opacity: 0.4; background: var(--gold-bg) !important; }
.sortable-chosen { box-shadow: 0 4px 14px rgba(192, 160, 98, 0.3); }

/* 帳票（第2表）側: 行頭のハンドルセル */
.t2 .drag-handle { color: var(--gray-400); font-size: 13px; }
.t2 tr.sortable-ghost td { background: var(--gold-bg); }

/* =============================================
   家族構成図（ジェノグラム）
   ============================================= */
.genogram-wrap {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.genogram-wrap svg { display: block; max-width: 100%; height: auto; }

/* 家族構成の表入力: セル内フォームをコンパクトに */
.family-table td { padding: 6px 6px; vertical-align: middle; }
.family-table th { padding: 8px 6px; font-size: 14px; }
.family-table .form-input,
/* 入力欄は 16px 未満だと iOS Safari がフォーカス時にページごと拡大する */
.family-table .form-select { padding: 7px 8px; font-size: 16px; }
.family-table tr:hover td { background: transparent; }

/* =====================================================================
   フェイスシート ガイドライン Ver.3 様式（帳票レイアウト編集）
   care_plans#sheet_edit の視覚言語（薄紫=編集可・凡例・上部固定バー）を踏襲。
   すべて .fs-scope 配下にスコープし、他画面へ table 定義が漏れないようにする。
   ===================================================================== */
.fs-scope { --fs-edit-bg: rgba(124, 58, 237, 0.05); --fs-purple: #7c3aed; }

/* A4縦ページ（画面プレビュー） */
.fs-page {
  background: #fff;
  border: 1px solid var(--gray-200);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  border-radius: 6px;
  padding: 20px 22px 26px;
  margin: 0 auto 22px;
  max-width: 900px;
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'MS Mincho', 'Noto Serif JP', serif;
  color: #111;
  font-size: 12px;
  line-height: 1.5;
}
.fs-page-head {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 2px solid #333; padding-bottom: 6px; margin-bottom: 12px;
}
.fs-page-badge {
  background: #333; color: #fff; font-weight: 700; font-size: 11px;
  padding: 3px 9px; border-radius: 3px; white-space: nowrap;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
}
.fs-page-title { font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.fs-page-num { margin-left: auto; font-size: 11px; color: var(--gray-700); font-weight: 700; }

.fs-scope table { border-collapse: collapse; width: 100%; margin-bottom: 8px; }
.fs-scope td, .fs-scope th { border: 1.2px solid #444; vertical-align: top; padding: 4px 6px; font-size: 12px; }
.fs-scope .fs-lbl {
  background: #f0f0f0; font-weight: 700; text-align: center; vertical-align: middle;
  white-space: nowrap; font-size: 11.5px; line-height: 1.35;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
}
.fs-scope .fs-ro { background: #fafafa; color: #444; }
.fs-scope .fs-ed { background: var(--fs-edit-bg); }
.fs-scope .fs-ed:focus-within { outline: 2px solid rgba(124,58,237,.4); outline-offset: -1px; }
/* セクション見出し帯（原本の「■◯◯」黒帯見出しに寄せる） */
.fs-section-h {
  font-weight: 700; font-size: 12.5px;
  background: #333; color: #fff;
  padding: 3px 9px; margin: 13px 0 5px; border-radius: 2px;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
}

/* 課題分析標準項目の番号バッジ（様式の各欄に振る No.1〜23） */
.fs-item-no {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px;
  text-align: center; font-size: 12px; font-weight: 700;
  color: var(--fs-purple); margin-right: 4px; vertical-align: -1px;
  cursor: help;
}
/* 見出し帯（黒背景）の中に置く番号は白抜きにする */
.fs-section-h .fs-item-no { color: #fff; }

/* インライン入力 */
.fs-inline {
  border: none; border-bottom: 1px solid #bbb; background: transparent;
  font-family: inherit; font-size: 12px; color: #111; padding: 1px 3px; outline: none;
  min-width: 40px; max-width: 100%;
}
.fs-inline:focus { border-bottom-color: var(--fs-purple); background: rgba(124,58,237,.05); }
.fs-inline.fs-w-sm { width: 52px; }
.fs-inline.fs-w-md { width: 96px; }
.fs-inline.fs-w-lg { width: 160px; }
.fs-inline.fs-w-full { width: 100%; }
.fs-scope .sheet-ta {
  width: 100%; border: none; background: transparent; resize: none; outline: none;
  font-family: inherit; font-size: 12px; line-height: 1.55; color: #111;
  padding: 2px 0; margin: 0; display: block; box-sizing: border-box; overflow: hidden;
}
.fs-scope input[type="date"].fs-inline { border: 1px solid #ccc; border-radius: 4px; padding: 2px 5px; }

/* □チェック（様式の □ を再現） */
.fs-cb { display: inline-flex; align-items: center; gap: 3px; margin-right: 12px; white-space: nowrap; }
.fs-cb-input { width: 15px; height: 15px; accent-color: var(--fs-purple); cursor: pointer; margin: 0; }
.fs-cb-label { font-size: 12px; cursor: pointer; user-select: none; }
.fs-cb-row { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }

/* 丸囲みラジオ（男・女 / 有・無 等） */
.fs-ring-group { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fs-ring { display: inline-flex; align-items: center; }
.fs-ring-input { position: absolute; opacity: 0; width: 0; height: 0; }
.fs-ring-label {
  border: 1.4px solid transparent; border-radius: 999px; padding: 1px 9px; cursor: pointer;
  font-size: 12px; user-select: none; transition: background .12s, border-color .12s; line-height: 1.5;
}
.fs-ring-input:checked + .fs-ring-label { border-color: #333; font-weight: 700; background: rgba(124,58,237,.06); }
.fs-ring-input:focus-visible + .fs-ring-label { outline: 2px solid rgba(124,58,237,.5); outline-offset: 1px; }
.fs-ring-label:hover { background: var(--gray-50); }
/* ラジオ選択解除ボタン（FB#7・一度選ぶと外せない問題への対応） */
.fs-ring-clear {
  border: 1px solid var(--gray-200); background: #fff; color: var(--gray-400);
  border-radius: 999px; width: 17px; height: 17px; padding: 0; margin-left: 2px;
  font-size: 10px; line-height: 1; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.fs-ring-clear:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
@media print { .fs-ring-clear { display: none !important; } }

/* 家族構成図・見取り図の埋め込み枠 */
.fs-embed {
  border: 1px dashed var(--gray-300); border-radius: 6px; padding: 10px;
  background: var(--gray-50); margin-bottom: 8px;
}
.fs-embed-note { font-size: 11px; color: var(--gray-700); margin-top: 6px;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }

/* サービス利用チェックリスト（2列） */
.fs-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.fs-service-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 11.5px; }
.fs-service-row .fs-cb { margin-right: 4px; flex: 1; }
.fs-service-row .fs-inline.fs-w-sm { width: 44px; }
@media (max-width: 720px) { .fs-service-grid { grid-template-columns: 1fr; } }

/* 1日スケジュール表 */
.fs-schedule th { background: #f0f0f0; font-size: 11px; text-align: center;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }
.fs-schedule td { padding: 2px 4px; }
.fs-schedule .fs-hour { text-align: center; font-weight: 700; background: #f7f7f7; width: 46px; white-space: nowrap; }
.fs-schedule .fs-band { text-align: center; font-weight: 700; background: #f0f0f0; width: 34px;
  white-space: nowrap; vertical-align: middle; font-size: 10.5px;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }
.fs-schedule .fs-plan { width: 44px; }
.fs-schedule .fs-plan input { width: 14px; height: 14px; accent-color: var(--fs-purple); }
.fs-schedule .fs-marks { width: 210px; }
.fs-mark-cb { display: inline-flex; align-items: center; gap: 2px; margin-right: 5px; }
.fs-mark-cb input { width: 13px; height: 13px; accent-color: var(--fs-purple); margin: 0; }
.fs-mark-cb label { font-size: 10.5px; cursor: pointer;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }
.fs-schedule .sheet-ta { font-size: 11.5px; }

/* =====================================================================
   間取りエディタ（floor_plan_controller.js）
   ===================================================================== */
.fp-editor { --fp-cell: 24px; }
.fp-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 10px; background: #f5f0ff; border: 1px solid #ddd6fe; border-radius: 8px;
  margin-bottom: 10px; font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
}
.fp-toolbar-group { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.fp-toolbar-sep { width: 1px; align-self: stretch; background: #cbb8f0; margin: 0 4px; }
.fp-mode-hint { font-size: 11.5px; color: var(--fs-purple); font-weight: 700; margin-right: 4px; }
.fp-chip {
  border: 1.5px solid var(--gray-300); background: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px; transition: all .12s; color: var(--gray-700);
}
.fp-chip:hover { border-color: var(--fs-purple); }
.fp-chip.is-active { background: var(--fs-purple); color: #fff; border-color: var(--fs-purple); font-weight: 700; }
.fp-chip-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.fp-btn {
  border: 1.5px solid var(--gray-300); background: #fff; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--gray-700);
}
.fp-btn:hover { background: var(--gray-50); }
.fp-btn.is-danger { color: #b91c1c; border-color: #fca5a5; }
.fp-btn.is-danger:hover { background: #fef2f2; }
.fp-honnin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-700); }
.fp-honnin input { accent-color: var(--fs-purple); }

/* 選択中の操作バー（部屋の名称変更・領域追加・削除など） */
.fp-selection-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 7px 10px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px;
  margin-bottom: 10px; font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
}
.fp-selection-bar[hidden] { display: none; }
.fp-selection-label { font-size: 11.5px; color: var(--fs-purple); font-weight: 700; }
.fp-label-editor { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fp-label-editor[hidden] { display: none; }
.fp-label-input {
  border: 1.5px solid var(--gray-300); border-radius: 6px; padding: 3px 8px; font-size: 12px;
  width: 8em; font-family: inherit; color: var(--gray-700);
}
.fp-label-input:focus { outline: none; border-color: var(--fs-purple); }

.fp-stage-wrap { overflow: auto; border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; padding: 8px; }
.fp-svg { display: block; touch-action: none; user-select: none; background: #fff; }
.fp-svg .fp-grid { stroke: #e5e7eb; stroke-width: 1; }
.fp-svg .fp-frame { fill: #fff; stroke: #d1d5db; stroke-width: 1.5; }
.fp-svg .fp-room-g { cursor: pointer; }
.fp-svg .fp-room-fill { stroke: none; }
.fp-svg .fp-room-outline { fill: none; stroke: #374151; stroke-width: 1.5; stroke-linejoin: round; }
.fp-svg .fp-room-outline.is-selected { stroke: var(--fs-purple); stroke-width: 3; }
.fp-svg .fp-room-label { font-family: 'Noto Sans JP', sans-serif; font-size: 12px; fill: #111827; font-weight: 600; pointer-events: none; }
.fp-svg .fp-handle { fill: #fff; stroke: var(--fs-purple); stroke-width: 1.5; cursor: nwse-resize; }
.fp-svg .fp-marker { cursor: pointer; }
.fp-svg .fp-marker.is-selected circle.fp-marker-hit { stroke: var(--fs-purple); stroke-width: 2.5; }
.fp-svg .fp-preview { fill: rgba(124,58,237,.15); stroke: var(--fs-purple); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
/* 移動ドラッグ中の対象を半透明にして「掴んでいる」状態を可視化（位置は transform で追従） */
.fp-svg .fp-room-g.is-dragging { opacity: .6; }
.fp-svg .fp-room-g.is-dragging .fp-room-outline { stroke-dasharray: 4 3; }
.fp-svg .fp-marker.is-dragging { opacity: .6; }
/* 移動先セルのハイライト（ドロップ位置の予告） */
.fp-svg .fp-move-ghost { fill: rgba(124,58,237,.12); stroke: var(--fs-purple); stroke-width: 1.5; stroke-dasharray: 3 3; pointer-events: none; }
.fp-hint { font-size: 11.5px; color: var(--gray-700); margin-top: 6px;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }
.fp-hint p { margin: 2px 0; }
.fp-hint strong { color: var(--gray-700); }
.fp-empty { color: var(--gray-400); font-size: 12px; }

/* ===== 障害部位の人体図エディタ（body_map・間取りと同思想） ===== */
.bm-editor { margin-top: 4px; }
.bm-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: #faf7ff; border: 1px solid #e3d7fb; border-radius: 8px; margin-bottom: 8px;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
}
.bm-hint-lead { font-size: 12px; color: var(--gray-700); font-weight: 600; }
.bm-toolbar-group { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.bm-toolbar-sep { width: 1px; align-self: stretch; background: #cbb8f0; margin: 0 4px; }
.bm-chip {
  border: 1.5px solid var(--gray-300); background: #fff; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.bm-chip:hover { border-color: var(--fs-purple); }
.bm-chip.is-active { background: var(--fs-purple); color: #fff; border-color: var(--fs-purple); font-weight: 700; }
.bm-btn {
  border: 1px solid var(--gray-300); background: #fff; border-radius: 6px;
  padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.bm-btn:hover { background: var(--gray-50); }
.bm-btn.is-danger { color: #b91c1c; border-color: #fca5a5; }
.bm-btn.is-danger:hover { background: #fef2f2; }
.bm-stage-wrap { display: flex; gap: 24px; justify-content: center;
  border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; padding: 12px; }
.bm-figure { text-align: center; }
.bm-figure-label { font-size: 12px; font-weight: 600; color: var(--gray-700);
  margin-bottom: 4px; font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }
.bm-svg { display: block; width: 120px; height: 260px; touch-action: none; user-select: none; cursor: crosshair; }
.bm-svg .bm-mark { cursor: pointer; }
.bm-hint { font-size: 11.5px; color: var(--gray-700); margin-top: 6px;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }

/* 上部固定保存バー（care_plans と統一） */
.fs-topbar {
  display: flex; align-items: center; gap: 16px; padding: 12px 0 14px; flex-wrap: wrap;
}
.fs-topbar-title h1 { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0; }
.fs-topbar-title p { font-size: 13px; color: var(--gray-700); margin: 2px 0 0; }
.fs-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.fs-legend {
  display: flex; align-items: center; gap: 18px; padding: 9px 16px;
  background: #f5f0ff; border: 1px solid #ddd6fe; border-radius: 8px; margin-bottom: 16px; flex-wrap: wrap;
  font-family: -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif;
}
.fs-legend .lg-title { font-size: 12.5px; font-weight: 700; color: var(--fs-purple); }
.fs-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-700); }
.fs-legend .sw { width: 18px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.1); }
.fs-legend .sw.ed { background: rgba(124,58,237,.07); }
.fs-legend .sw.ro { background: #f3f4f6; border-color: #e5e7eb; }
.fs-pages-scroll { }
.fs-actions {
  display: flex; gap: 14px; align-items: center; margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--gray-200); flex-wrap: wrap;
}

/* =============================================
   入院時連携シート：A4縦（portrait）様式の編集レイアウト
   原本（自治体様式 xls）は A4 縦のため、他帳票の fs-page と同様に縦1枚で表示する。
   （旧実装は原本を横と誤認して横スクロール方式にしていたため廃止）
   ============================================= */
.fs-scope .fs-land-wrap {
  padding-bottom: 6px;
}
/* 縦様式の1ページ枠（fs-page と同じ A4縦幅に揃える・横スクロールなし） */
.fs-scope .fs-page-land {
  max-width: 900px;
}
/* 2カラム（左＝情報 / 右＝家族構成）。print の his-2col と同じ比率。 */
.fs-scope .fs-2col { display: flex; gap: 10px; align-items: stretch; }
.fs-scope .fs-2col-l { flex: 0 0 62%; max-width: 62%; }
.fs-scope .fs-2col-r { flex: 1 1 38%; display: flex; flex-direction: column; }
.fs-scope .fs-2col-r table { flex: 1; }
.fs-scope .fs-2col-r table td.fs-ed { height: 100%; }

/* =============================================
   OCR 資料ビューア（原本プレビュー × 抽出データ）
   ============================================= */

.ocr-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* 原本プレビューは画面に追従して大きく見せたいので sticky + 高さ確保 */
.ocr-viewer-original {
  position: sticky;
  top: 16px;
}

.ocr-original-frame {
  padding: 0;
  background: var(--gray-100);
  min-height: 420px;
  max-height: calc(100vh - 180px);
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.ocr-original-pdf {
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 480px;
  border: none;
}

.ocr-original-img {
  width: 100%;
  height: auto;
  display: block;
}

.ocr-original-missing {
  padding: 48px 24px;
  text-align: center;
  color: var(--gray-700);
  margin: auto;
}

/* 右カラム: 読み取りデータ */
.ocr-linked-group { margin-bottom: 14px; }
.ocr-linked-group:last-child { margin-bottom: 0; }

.ocr-linked-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.ocr-linked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.ocr-linked-row:last-child { margin-bottom: 0; }

.ocr-extract-table th {
  background: var(--gray-50);
  color: var(--gray-700);
  vertical-align: top;
}

/* 固有名詞など、原本との突き合わせを促す行（AIが似た字に読み違えやすい項目） */
.ocr-extract-table tr.ocr-verify-row th {
  background: #fffbeb;
}
.ocr-extract-table tr.ocr-verify-row td {
  background: #fffdf5;
}
.ocr-verify-mark {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: #fff;
  color: #8a6d1f;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  cursor: help;
}

.ocr-survey-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--gray-800);
  line-height: 1.7;
}
.ocr-survey-list li { margin-bottom: 2px; }

/* 狭い画面（タブレット縦・スマホ）は縦積みにする */
@media (max-width: 900px) {
  .ocr-viewer { grid-template-columns: 1fr; }
  .ocr-viewer-original { position: static; }
  .ocr-original-pdf { height: 70vh; }
}

/* ============================================================
   ログイン画面（devise/sessions/new）
   「介護SaaSの玄関」= 信頼感 + 温かみ + 洗練。
   ネイビー背景に浮遊するゴールドの光暈 + ガラスモーフィズムのカード。
   ============================================================ */

.login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, #232735 0%, var(--navy) 45%, var(--navy-light) 100%);
  background-size: 220% 220%;
  animation: login-gradient-shift 20s ease infinite;
}

@keyframes login-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 背景装飾: ドットグリッド + 浮遊するゴールドの光暈（オーブ） */
.login-bg-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.login-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.login-orb-1 {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -90px;
  background: radial-gradient(circle, rgba(192,160,98,0.45) 0%, transparent 70%);
  animation: login-float-1 22s ease-in-out infinite;
}

.login-orb-2 {
  width: 320px;
  height: 320px;
  bottom: -110px;
  right: -70px;
  background: radial-gradient(circle, rgba(91,107,140,0.5) 0%, transparent 70%);
  animation: login-float-2 26s ease-in-out infinite;
}

.login-orb-3 {
  width: 220px;
  height: 220px;
  top: 42%;
  right: 10%;
  opacity: 0.55;
  background: radial-gradient(circle, rgba(228,206,160,0.4) 0%, transparent 70%);
  animation: login-float-3 30s ease-in-out infinite;
}

@keyframes login-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, 60px) scale(1.12); }
}

@keyframes login-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, -30px) scale(1.08); }
}

@keyframes login-float-3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-30px, 40px); }
}

/* コンテナ */
.login-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 408px;
}

@keyframes login-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ブランドエリア */
.login-brand {
  text-align: center;
  animation: login-fade-up 0.7s cubic-bezier(.16,1,.3,1) both;
}

.login-brand-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}

.login-brand-icon-glow {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,160,98,0.55) 0%, transparent 72%);
  filter: blur(8px);
  animation: login-pulse-glow 3.2s ease-in-out infinite;
}

.login-brand-icon-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--gold) 0%, #a9824c 100%);
  box-shadow: 0 8px 24px rgba(192,160,98,0.45), inset 0 1px 1px rgba(255,255,255,0.4);
}

.login-brand-icon-inner svg {
  width: 32px;
  height: 32px;
  color: var(--navy);
}

@keyframes login-pulse-glow {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50%      { opacity: 0.9; transform: scale(1.1); }
}

.login-brand-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.25);
}

.login-brand-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

/* ブランドとカードを繋ぐ装飾ディバイダー */
.login-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0;
  animation: login-fade-up 0.7s cubic-bezier(.16,1,.3,1) 0.08s both;
}

.login-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
}

.login-divider-dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(192,160,98,0.85);
}

/* ログインカード（ガラスモーフィズム） */
.login-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  padding: 34px 30px 30px;
  box-shadow:
    0 24px 60px rgba(15,17,26,0.35),
    0 2px 8px rgba(15,17,26,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
  animation: login-fade-up 0.7s cubic-bezier(.16,1,.3,1) 0.16s both;
}

.login-card-top-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-light));
  background-size: 200% 100%;
  animation: login-shimmer 4s linear infinite;
}

@keyframes login-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

.login-card-head {
  margin-bottom: 22px;
}

.login-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.login-card-title-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gold);
}

.login-card-desc {
  font-size: 14px;
  color: var(--gray-700);
}

/* エラーアラート */
.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--red-light);
  border: 1px solid rgba(231,76,60,0.35);
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--red-ink);
  animation: login-shake 0.4s ease;
}

.login-alert-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}

@keyframes login-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* フォーム */
.login-field {
  margin-bottom: 20px;
}

.login-field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-icon {
  position: absolute;
  left: 1px;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gray-400);
  pointer-events: none;
  transition: color 0.25s ease;
}

.login-input {
  width: 100%;
  padding: 9px 4px 9px 26px;
  border: none;
  border-bottom: 1.5px solid var(--gray-300);
  background: transparent;
  font-size: 14.5px;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--gray-900);
  outline: none;
  transition: border-color 0.25s ease;
}

.login-input::placeholder {
  color: var(--gray-400);
}

/* フォーカス時にゴールドのアンダーラインが左から右へ伸びる */
.login-input-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1.5px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.3s cubic-bezier(.4,0,.2,1);
}

.login-input-wrap:focus-within::after {
  width: 100%;
}

.login-input-wrap:focus-within .login-input-icon {
  color: var(--gold);
}

.login-input-wrap:focus-within .login-input {
  border-bottom-color: transparent;
}

/* ログインを記憶する */
.login-options {
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--gray-700);
  cursor: pointer;
  user-select: none;
}

.login-remember-input {
  width: 15px;
  height: 15px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* 送信ボタン */
.login-submit {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-light) 50%, var(--navy) 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(44,48,64,0.3);
  transition: background-position 0.6s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.login-submit:hover {
  background-position: 100% 0%;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(44,48,64,0.4);
}

.login-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(44,48,64,0.3);
}

.login-submit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* フッター */
.login-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
  animation: login-fade-up 0.7s cubic-bezier(.16,1,.3,1) 0.24s both;
}

.login-footer-dot {
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.7;
}

/* レスポンシブ */
@media (max-width: 480px) {
  .login-page { padding: 24px 16px; }

  .login-card { padding: 28px 22px 24px; border-radius: 16px; }

  .login-brand-title { font-size: 22px; }

  .login-brand-icon,
  .login-brand-icon-inner { width: 56px; height: 56px; }

  .login-brand-icon-inner svg { width: 27px; height: 27px; }
}

/* アニメーションを抑えたいユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  .login-page,
  .login-orb-1,
  .login-orb-2,
  .login-orb-3,
  .login-brand-icon-glow,
  .login-card-top-line,
  .login-brand,
  .login-divider,
  .login-card,
  .login-footer,
  .login-alert {
    animation: none !important;
  }

  .login-submit,
  .login-input-wrap::after {
    transition: none !important;
  }
}

/* =============================================
   新規受入の進行状況カード（clients#show）

   基本情報 → アセスメント → 課題分析 → 第1表 → 第2表 の5段階を常設表示する。
   ウィザードではなく「案内役」なので、どのステップもリンクとして押せる見た目にし、
   未完了でも進めないような表現（グレーアウト・disabled）は使わない。
   ============================================= */

.cp-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 4px solid #7c3aed;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.cp-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
}

/* Safari の三角マーカーを消す（Chrome/Firefox は list-style: none で消える） */
.cp-summary::-webkit-details-marker { display: none; }

.cp-summary-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #7c3aed;
}

.cp-summary-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.cp-summary-count.done {
  color: var(--green);
  background: var(--green-light);
  border-color: rgba(39, 174, 96, 0.3);
}

.cp-body {
  padding: 0 18px 16px;
}

.cp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  counter-reset: none;
}

.cp-step-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  height: 100%;
  transition: border-color 0.15s, background 0.15s;
}

.cp-step-link:hover {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.03);
}

.cp-step-mark {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--gray-700);
}

.cp-step.done .cp-step-mark {
  background: var(--green);
  color: #fff;
}

.cp-step.current .cp-step-link {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.06);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25);
}

.cp-step.current .cp-step-mark {
  background: #7c3aed;
  color: #fff;
}

.cp-step-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.cp-step-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.cp-step-note {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--gray-700);
}

.cp-step-status {
  font-size: 13.5px;
  color: var(--gray-700);
}

.cp-step.done .cp-step-status { color: var(--green); }
.cp-step.current .cp-step-status { color: #7c3aed; font-weight: 600; }

.cp-next {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(79, 70, 229, 0.06));
  border-radius: 8px;
}

.cp-next-text { flex: 1 1 320px; min-width: 0; }

.cp-next-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #7c3aed;
  letter-spacing: 0.04em;
}

.cp-next-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 1px;
}

.cp-next-hint {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
  margin-top: 3px;
}

.cp-next-btn { flex: 0 0 auto; white-space: nowrap; }

/* 「次にやること」が複数の入り口を持つ場合（基本情報＝資料から読む / 手入力）の主＋サブ導線。
   1本のリンクに押し込むとラベルと行き先が食い違うので、必ず両方を出す。 */
.cp-next-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 0;
}

.cp-next-sub {
  font-size: 14px;
  color: #7c3aed;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cp-next-sub:hover { color: #5b21b6; }

.cp-next-note {
  font-size: 13.5px;
  color: var(--gray-700);
  text-align: right;
  line-height: 1.5;
}

.cp-note {
  font-size: 13.5px;
  color: var(--gray-700);
  margin: 10px 0 0;
}

.cp-note-done { margin-top: 0; }

/* =============================================
   かんたん作成（Stage1）の流れ表示・次の案内
   ============================================= */

.ez-flow-note {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
  font-size: 14px;
  color: var(--gray-700);
}

.ez-flow-step {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}

.ez-flow-step.done {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.3);
  color: #7c3aed;
  font-weight: 700;
}

.ez-flow-arrow { color: var(--gray-400); }

.ez-next-note {
  text-align: left;
  max-width: 420px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}

.ez-next-title {
  font-size: 14px;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 4px;
}

.ez-next-body {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.7;
}

/* =============================================
   適切なケアマネジメント手法：AIが見つけた候補（表示専用）

   ケアマネのチェックが主役なので、候補は「薄く・下に・チェックを入れない」。
   誤って主役に見えないよう、背景も枠線も控えめにする。
   ============================================= */

.tk-suggest {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: 8px;
}

.tk-suggest-head {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.tk-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tk-suggest-item {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
}

.tk-suggest-label {
  font-weight: 600;
  color: var(--navy);
}

.tk-suggest-reason { color: var(--gray-700); }

.tk-suggest-foot {
  font-size: 13.5px;
  color: var(--gray-700);
  margin: 7px 0 0;
}

/* =============================================
   新規受入フローのミニステッパー（各作成ページの上部・clients/_flow_stepper）

   利用者詳細の進行状況カード（.cp-*）のコンパクト版。
   「利用者詳細に戻ってから次のページへ」という往復をなくすための常設ナビ。
   全ステップ完了の利用者では描画しない（ビュー側で判定）。
   ============================================= */

.flow-stepper {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 3px solid #7c3aed;
  border-radius: 9px;
  padding: 9px 13px 10px;
  margin: 0 0 14px;
}

/* 帳票編集画面（A4幅のシートが中央にある）に合わせて幅を揃える */
.flow-stepper.fst-centered {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.fst-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

.fst-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #7c3aed;
}

.fst-count {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-700);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.fst-client-link {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}

.fst-client-link:hover { text-decoration: underline; }

.fst-steps {
  display: flex;
  align-items: stretch;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0 0 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fst-step { flex: 1 1 0; min-width: 124px; } /* 最長ラベル「ケアプラン作成」が省略されない幅 */

.fst-step-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 6px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 7px;
  background: var(--gray-50);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.fst-step-link:hover {
  border-color: #c4b5fd;
  background: #faf7ff;
}

.fst-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gray-300);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.fst-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fst-step.done .fst-mark { background: var(--green); }
.fst-step.done .fst-label { color: var(--gray-700); }

/* 現在地。塗りつぶして「いまここ」を一目で分かるようにする */
.fst-step.here .fst-step-link {
  background: #f5f0ff;
  border-color: #a78bfa;
  box-shadow: inset 0 0 0 1px #a78bfa;
}

.fst-step.here .fst-mark { background: #7c3aed; }
.fst-step.here .fst-label { color: #5b21b6; }

.fst-move {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
}

.fst-move-spacer { flex: 1 1 auto; }

.fst-move-link {
  font-size: 13.5px;
  font-weight: 600;
  color: #7c3aed;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.fst-move-link:hover { background: #f5f0ff; }

.fst-move-next { margin-left: auto; }

/* =============================================
   保存直後の「次のステップへ」案内（clients/_flow_next_prompt）

   flash[:saved_step] が立っている時だけ出る。flash なので画面に居座らない。
   ============================================= */

.flow-next {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--green-light);
  border: 1px solid rgba(39, 174, 96, 0.3);
  border-radius: 9px;
}

.flow-next.fnx-centered {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.fnx-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}

.fnx-text { flex: 1 1 300px; min-width: 0; }

.fnx-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

.fnx-hint {
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.6;
  margin-top: 2px;
}

.fnx-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.fnx-btn { white-space: nowrap; }

.fnx-sub-link {
  font-size: 13.5px;
  color: var(--gray-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================================
   ニーズの優先順位（課題整理総括表・priority_sort_controller.js）

   優先順位の数値を手で打つのをやめ、並べた順＝優先順位にする。
   JS が動く時だけパネルを見せる（hidden を controller が外す）ので、
   [hidden] の打ち消しは display 指定より強く効かせること。
   ============================================= */

.psort-card { margin-bottom: 16px; }
.psort-card[hidden] { display: none; }

.psort-help {
  font-size: 13.5px;
  color: var(--gray-700);
  line-height: 1.5;
}

.psort-empty {
  font-size: 14px;
  color: var(--gray-700);
  margin: 0;
}

.psort-empty[hidden] { display: none; }

.psort-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.psort-item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}

/* [hidden] は UA スタイルの display:none より上の .psort-item の display:grid に負けるので明示する */
.psort-item[hidden] { display: none; }

.psort-handle {
  cursor: grab;
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1;
  user-select: none;
  padding: 4px 2px;
  touch-action: none;
}

.psort-handle:active { cursor: grabbing; }

.psort-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.psort-body { min-width: 0; }

.psort-item-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}

.psort-need {
  display: block;
  font-size: 14px;
  color: var(--gray-700);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.psort-move {
  display: flex;
  gap: 4px;
}

.psort-move-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: #fff;
  color: var(--gray-700);
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
}

.psort-move-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.psort-move-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* 並び替え結果の読み上げ用。見た目には出さないが DOM からは消さない */
.psort-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   ケアプラン作成ウィザード（care_plan_wizards）
   2026-08-09 FB第5便

   「何を入力にして原案を作るのか」を入口で見せるためのブロック。
   確定済みの課題分析（課題整理総括表 / AI課題分析）があるときは、それを
   一覧で見せて「AIで作り直さない」ことを画面上でも約束する。

   ⚠ 基本定義はここ（末尾のレスポンシブ節より前）。モバイル用のメディアクエリは
     ファイル末尾のレスポンシブ節に置く（メディアクエリは詳細度を上げないため、
     基本定義より前に書くと後勝ちで打ち消される）。
   ============================================================================= */

.cpw-source {
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-300);
  border-radius: 10px;
  background: var(--white);
  padding: 16px 18px;
  margin-bottom: 20px;
}

.cpw-source-ready {
  border-left-color: var(--green);
  background: var(--green-light);
}

.cpw-source-empty {
  border-left-color: var(--amber);
  background: var(--amber-light);
}

.cpw-source-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cpw-source-badge {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  white-space: nowrap;
}

.cpw-source-ready .cpw-source-badge {
  color: #1c7a48;
  border-color: rgba(39, 174, 96, 0.45);
}

.cpw-source-empty .cpw-source-badge {
  color: #96650c;
  border-color: rgba(243, 156, 18, 0.45);
}

.cpw-source-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.cpw-source-body {
  font-size: 13px;
  color: var(--gray-700);
  line-height: 1.7;
  margin: 0;
}

.cpw-source-foot {
  font-size: 14px;
  color: var(--gray-700);
  margin: 10px 0 0;
}

/* 使うニーズの一覧。番号は「ケアマネが決めた優先順位」そのもの */
.cpw-need-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cpw-need-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 8px 10px;
}

.cpw-need-rank {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.cpw-need-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--gray-900);
  line-height: 1.5;
  min-width: 0;
}

.cpw-need-item {
  flex: 0 0 auto;
  font-size: 13.5px;
  color: var(--gray-700);
  background: var(--gray-100);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}

.cpw-need-list-plain li {
  padding: 6px 10px;
}

/* 左右2カラム（アセスメント選択 / 説明パネル）。
   ⚠ インラインstyleではなくここに置くこと。インラインだとメディアクエリで
   上書きするのに !important が要る＝カスケードの見通しが悪くなる。 */
.cpw-columns {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px;
}

/* 上部のステップ表示 */
.cpw-steps {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 8px;
}

.cpw-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cpw-step-num {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gray-300);
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.cpw-step.active .cpw-step-num {
  background: #7c3aed;
  color: #fff;
}

.cpw-step-label {
  font-size: 13px;
  color: var(--gray-700);
  white-space: nowrap;
}

.cpw-step.active .cpw-step-label {
  color: #7c3aed;
  font-weight: 600;
}

.cpw-step-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--gray-300);
  margin: 0 12px;
  min-width: 12px;
}

/* アセスメント1件ぶんのカード */
.cpw-assessment {
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cpw-assessment:hover,
.cpw-assessment:focus-within {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.cpw-submit {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  min-height: 44px;
}

.cpw-submit:disabled {
  opacity: 0.7;
  cursor: progress;
}

.cpw-flow-num {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ede9fe;
  color: #7c3aed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.cpw-flow-num-active {
  background: #7c3aed;
  color: #fff;
}

/* =============================================================================
   レスポンシブ（モバイル最適化・第2弾）

   ⚠ この節はファイル末尾に置くこと。
   メディアクエリは詳細度を上げないため、同じセレクタの基本定義より前に書くと
   後勝ちで打ち消される（第1弾の .form-grid-2 / .summary-cards がこれで無効化
   されていた）。上書きを確実に効かせるため、全ての基本定義の後ろに集約する。

   ⚠ すべて `screen and` で限定すること。
   メディアタイプを省くと `all` 扱いになり、印刷にも適用される。
   A4縦は約794px相当なので max-width:900px の指定が印刷時にも効いてしまい、
   帳票レイアウトに意図しない影響が出る。このアプリは帳票出力が生命線なので、
   画面用の調整が印刷経路に漏れないよう明示的に切り分ける。
   ============================================================================= */

@media screen and (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* 画面外に退避させ、is-open が付いた時だけスライドインさせる */
  .app-sidebar {
    width: min(280px, 84vw);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.28);
    will-change: transform;
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .app-nav-overlay.is-open {
    display: block;
  }

  .app-main {
    margin-left: 0;
    padding: 16px;
  }

  /* メニューを開いている間は背面のスクロールを止める */
  body.nav-open {
    overflow: hidden;
  }
}

/* 901px以上に戻った時に閉じ忘れの暗幕が残らないようにする保険 */
@media screen and (min-width: 901px) {
  .app-nav-overlay {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar {
    transition: none;
  }
}

@media screen and (max-width: 640px) {
  .app-header {
    padding: 0 12px;
  }

  /* 事業所名・役職ラベル・区切り線・通知ベル（未実装の飾り）は
     優先度が低いので隠し、ロゴ・ユーザー名・ログアウトを確保する。 */
  .header-office-name,
  .header-user-role,
  .header-bell,
  .header-divider {
    display: none;
  }

  .header-logo,
  .header-logo-text,
  .header-user-text {
    min-width: 0;
  }

  .header-app-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-user-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 運営管理ヘッダーの長いテキストボタン2つ（通常画面へ戻る / ログアウト）を詰める */
  .admin-header-actions {
    margin-left: 8px !important;
    gap: 4px !important;
  }

  .admin-header-actions .btn {
    padding: 7px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* タイトル+操作ボタンが横並びのままだと幅を取り合うので縦積みに */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .page-header .flex {
    flex-wrap: wrap;
  }

  /* パンくず（利用者名が入ると1行に収まらない） */
  .page-breadcrumb {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  /* タブが多いページは横スクロールで全部に辿り着けるようにする */
  .tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ダッシュボード下部の2項目（バージョン / 最終ログイン）は縦積みに */
  .dashboard-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* 多カラムの入力フォーム・表示グリッドはモバイルでは1カラムに */
  .form-grid-2,
  .form-grid-3,
  .form-grid-2-fixed-last,
  .info-grid-2,
  .info-grid-3 {
    grid-template-columns: 1fr;
  }

  .form-grid-span-2 {
    grid-column: span 1;
  }

  /* 「ラベル / 選択 / 備考」の3カラム行を縦積みに。
     ラベルは行の見出しとして残す。 */
  .field-row,
  .field-row-wide {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--gray-200);
  }

  .field-row:last-child,
  .field-row-wide:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* ジェノグラム + 家族一覧は縦積み（横並びだと図が潰れて読めない） */
  .genogram-split {
    grid-template-columns: 1fr;
  }

  /* 出席者行（氏名/役職/所属/削除）は1カラム＋削除ボタン右寄せに */
  .attendee-row {
    grid-template-columns: 1fr;
    padding: 10px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
  }

  .attendee-row .attendee-remove {
    justify-self: end;
  }

  /* テキストエリア+送信ボタンの横並びは縦積みに（ボタンが潰れるのを防ぐ） */
  .inline-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* iOS Safari は font-size が16px未満の入力欄にフォーカスすると自動でズームインし、
     そのままページ全体が拡大された状態で戻らない。訪問先での入力が主戦場なので、
     モバイルでは入力コントロールを一律16pxに引き上げてズームを防ぐ。
     ビュー側にインラインの font-size 指定（12px 等）が多数残っているため、
     ここだけは !important が必要。 */
  .form-input,
  .form-select,
  .form-textarea,
  .search-input-wrap input,
  .search-select {
    font-size: 16px !important;
  }

  /* 音声入力は訪問先での主力操作。ボタンを指で押せる大きさにする。
     4つのボタンが1行に収まらないので2列に折り返す。 */
  .speech-btn {
    flex: 1 1 calc(50% - 3px);
    min-height: 40px;
    font-size: 13px;
  }

  .speech-output {
    font-size: 16px; /* iOS Safari が16px未満の入力欄で自動ズームするのを防ぐ */
  }

  /* 支援経過記録の一覧: 日時・種別を本文の上に載せる（横並びだと本文が細長くなる） */
  .record-row {
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
  }

  .record-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  /* 検索バーは各要素を全幅にして押しやすくする */
  .search-bar .search-input-wrap {
    max-width: none;
    flex: 1 1 100%;
    min-width: 0;
  }

  .search-bar .search-select,
  .search-bar input[type="submit"] {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }

  /* 印刷ボタン等が並ぶ操作列は、指で押せる高さを確保する */
  .page-header .btn,
  .page-header .print-btn {
    min-height: 38px;
  }

  /* 帳票風の入力表は縮めず横スクロールさせる（.table-scroll でラップ済み）。
     中身が form-input（幅100%）なので min-width を切らないと表ごと潰れてしまう。
     一方 .data-table は th が nowrap なので、列が多い表は自然に
     コンテナをはみ出して .table-scroll のスクロールに乗る。
     min-width を一律に指定すると2〜3列の狭い表まで不要にスクロールするので指定しない。 */
  .wide-form-table {
    min-width: 560px;
  }
}

@media screen and (max-width: 480px) {
  .summary-cards {
    grid-template-columns: 1fr;
  }

  /* 3カラムの「ラベル/選択/備考」行など、480px では余白も詰める */
  .app-main {
    padding: 12px;
  }

  .card-body {
    padding: 14px;
  }
}

/* ---- 新規受入の進行状況カード（4ステップ）のモバイル対応 ----
   4列グリッドは 900px 以下で潰れるので 2列（2行）に折り返し、
   480px で縦1列にして指で押せる高さ（44px 相当）を確保する。
   4は2で割り切れるので、3列を挟むと最後の1枚だけ余る不格好な形になる。 */

@media screen and (max-width: 900px) {
  .cp-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 640px) {
  .cp-next-btn {
    width: 100%;
    min-height: 44px;
  }
}

@media screen and (max-width: 480px) {
  .cp-steps {
    grid-template-columns: 1fr;
  }

  .cp-step-link {
    min-height: 44px;
  }

  .cp-summary {
    padding: 12px 14px;
  }

  .cp-body {
    padding: 0 14px 14px;
  }
}

/* ---- 新規受入フローのミニステッパー / 保存後の次ステップ案内 / ニーズの優先順位
   （2026-08-09 デモ試用FB の3件）のモバイル対応。

   ⚠ この節も「基本定義より後ろ」の原則に従い、必ずファイル末尾に置くこと。
   訪問先の iPhone（375px）で崩れない・指で押せることを最低条件にする。 */

@media screen and (max-width: 640px) {
  /* ステッパーの5枚は横スクロールに乗せる（縦に積むと画面を食いすぎる）。
     ふちで切れて「続きがある」と分かるよう、最後にわずかな余白を残す。 */
  .fst-steps {
    padding-bottom: 6px;
  }

  .fst-step {
    flex: 0 0 auto;
    min-width: 120px;
  }

  .fst-step-link {
    min-height: 38px;
  }

  .fst-move-link {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  /* 保存後の案内は、ボタンを全幅にして押し間違いを減らす */
  .flow-next {
    gap: 10px;
  }

  .fnx-actions {
    width: 100%;
    align-items: stretch;
  }

  .fnx-btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .fnx-sub-link {
    text-align: center;
  }

  /* 進行カードの「次にやること」も同様に全幅化 */
  .cp-next-actions {
    width: 100%;
    align-items: stretch;
  }

  .cp-next-sub,
  .cp-next-note {
    text-align: center;
  }

  /* 優先順位パネル: 上下ボタンを次の行に落として、幅の取り合いをやめる。
     タッチでの D&D は誤爆しやすいので、モバイルではこのボタンが主操作になる。 */
  .psort-item {
    grid-template-columns: auto auto minmax(0, 1fr);
    row-gap: 8px;
  }

  .psort-move {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .psort-move-btn {
    width: 44px;
    height: 44px;
    font-size: 13px;
  }
}

/* ---- ケアプラン作成ウィザード（.cpw-*）のモバイル対応。
   ⚠ 上の原則どおり、基本定義より後ろ（ファイル末尾）に置くこと。 */

@media screen and (max-width: 900px) {
  /* 2カラムは 900px 以下で縦積み（帳票ではないので素直に折り返してよい） */
  .cpw-columns {
    grid-template-columns: 1fr;
  }

  /* ステップ表示は横スクロール。縦に積むと画面の半分を食う */
  .cpw-steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .cpw-step {
    flex: 0 0 auto;
  }

  .cpw-step-line {
    flex: 0 0 24px;
    min-width: 24px;
  }
}

@media screen and (max-width: 640px) {
  .cpw-source {
    padding: 14px;
  }

  /* ニーズ行は「順位＋本文」を1行、生活行為タグを次の行に落とす */
  .cpw-need-list li {
    flex-wrap: wrap;
  }

  .cpw-need-item {
    margin-left: 30px;
  }
}