/* =============================================================================
   UI刷新の層（2026-08-30）
   =============================================================================
   ⭐ **これは theme.css を置き換えるものではない。並べて足す層である。**

   なぜ別の層にするか:
     theme.css の配色・文字トークンは index.html / nippo.html / service-items.html
     の3画面が共有している。値を1つでも動かすと3画面が同時に動く。
     刷新は画面ごとに順次行うと決めた（利用者判断・2026-08-30）ので、
     **移す番が来ていない画面を動かさない仕掛け**が要る。

   ⚠ この層が効くのは `[data-ui="v2"]` を付けた要素の下だけである。
     属性を付けていない画面は1pxも変わらない。移行が終わった画面から
     属性を足していき、全画面が終わったら theme.css の旧値を捨てて
     `--u-` の接頭辞を外す。

   ⚠ **画面側（index.html）に生の px と生の色を書かない。**
     文字サイズは --u-fs-1〜8 の8段、余白は --u-sp-1〜7 の7段、
     角丸は --u-r-sm / --u-r-md の2つ、色はこの表の名前だけから選ぶ。
     tools/xss-harness/h_ui_tokens.html がこれを毎回検査する。

   ⚠ 読み込み順は theme.css の**後**、画面固有の <style> の**前**。
     入れ替えると、画面固有の上書きが効かなくなる。

   コントラスト比は計算した実測値である（白 #FFFFFF に対して）。
     本文 #16201D      16.69
     副次 #55625E       6.37
     主要操作 #0A7351   5.86（白文字を載せる）
     危険 #96302F       7.61
     入力欄の枠 #7E8A86 3.58   ← WCAG 1.4.11 が操作子の境界に求める 3.0 を満たす
   ⚠ 枠を薄くしない。theme.css の --line(#E4E8E6) は白に対して 1.53 しかなく、
     高齢の目には「欄がそこにある」こと自体が見えない。
   ============================================================================= */

[data-ui="v2"] {
  /* ---- 色。面は白と極薄いグレー。色は「状態」にだけ使う ---- */
  --u-ground:      #F6F8F7;
  --u-panel:       #FFFFFF;
  --u-ink:         #16201D;
  --u-sub:         #55625E;
  --u-line:        #DDE4E1;   /* カードの境界。装飾であり操作子ではない */
  --u-field:       #7E8A86;   /* 入力欄の枠。操作子の境界なので 3:1 を満たす */
  --u-accent:      #0A7351;
  --u-accent-soft: #E7F2EC;
  --u-accent-line: #BBDDCD;
  --u-accent-ink:  #0A5D42;   /* --u-accent-soft の上に載せる文字 */
  --u-danger:      #96302F;
  --u-danger-soft: #FBEDED;
  --u-danger-line: #E3B9B8;
  --u-warn:        #6B4A12;
  --u-warn-soft:   #FBF3E2;
  --u-warn-line:   #E4CF9F;
  --u-info:        #2A4468;
  --u-info-soft:   #EAF0F8;
  --u-info-line:   #C3D3E8;
  --u-row-mark:    #F1F8F5;   /* 一覧で「たった今更新」した行の地 */

  /* ---- 文字。本文16px。11・12px は本文から外した ---- */
  --u-fs-1: 13px;   /* 短い札・注記だけ。文章には使わない */
  --u-fs-2: 14px;   /* 補足・説明文 */
  --u-fs-3: 15px;   /* 項目名（太字にして値と区別する） */
  --u-fs-4: 16px;   /* 本文・入力値・ボタン */
  --u-fs-5: 18px;   /* 小見出し・要約の値 */
  --u-fs-6: 20px;   /* カードの表題 */
  --u-fs-7: 24px;   /* 画面の見出し */
  --u-fs-8: 32px;   /* 数値の大表示 */
  --u-lh: 1.7;
  --u-font: system-ui, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;

  /* ---- 余白。4の倍数だけ。5・7・9・14px は作らない ---- */
  --u-sp-1: 4px;
  --u-sp-2: 8px;
  --u-sp-3: 12px;
  --u-sp-4: 16px;
  --u-sp-5: 24px;
  --u-sp-6: 32px;
  --u-sp-7: 40px;

  /* ---- 角丸は2つだけ。影は使わない。面は線で分ける ---- */
  --u-r-sm: 6px;    /* 欄・ボタン */
  --u-r-md: 8px;    /* カード・ダイアログ */
  --u-r-full: 999px;

  /* ---- 操作子の高さ。指で押す物は 44px を下回らない ---- */
  --u-h: 48px;
  --u-h-sm: 44px;

}

/* ⚠ 文字と色を [data-ui="v2"] そのものに書かない。
   一覧の <tr> のように「トークンだけ借りたい要素」に属性を付けたとき、
   書体まで変わって既存の見た目が動いてしまう。
   面としての体裁は .u-page を持つ要素に当てる。 */
[data-ui="v2"].u-page,
[data-ui="v2"] .u-page {
  background: var(--u-ground);
  color: var(--u-ink);
  font-family: var(--u-font);
  font-size: var(--u-fs-4);
  line-height: var(--u-lh);
}
/* まだ刷新していない画面の中へ、新しい層の部品を1つだけ置くとき。
   地を塗らないので、置いた場所の背景が変わらない（保存完了の帯など）。 */
[data-ui="v2"].u-plain,
[data-ui="v2"] .u-plain {
  color: var(--u-ink);
  font-family: var(--u-font);
  font-size: var(--u-fs-4);
  line-height: var(--u-lh);
}
[data-ui="v2"].u-plain > .u-banner { margin-bottom: var(--u-sp-3); }

/* ⚠ **hidden を効かせる。**この層は .u-chip や .u-section-body に display を
   直接書く。ブラウザが hidden に当てている display:none は詳細度が最も低いので、
   クラス側が勝ってしまい「隠したのに見えている」ことになる。
   実測（2026-08-30）: 開いた直後の画面に「未保存の変更があります」が出続け、
   折りたたんだ項目の中身も閉じなかった。 */
[data-ui="v2"] [hidden] { display: none !important; }

/* ⚠ 焦点の枠は3px・2px離し。遠目でも「いまどこに居るか」が分かる太さにする。
   1か所で定義し、部品ごとに書かない。 */
[data-ui="v2"] :focus-visible {
  outline: 3px solid var(--u-accent);
  outline-offset: 2px;
  border-radius: var(--u-r-sm);
}

/* =============================================================================
   面と組み立て
   ============================================================================= */
[data-ui="v2"] .u-card {
  background: var(--u-panel);
  border: 1px solid var(--u-line);
  border-radius: var(--u-r-md);
  padding: var(--u-sp-5) var(--u-sp-5) var(--u-sp-5);
}
/* 削除のように取り消せない操作を置く入れ物。地は塗らず、枠だけで別扱いを示す。
   ⚠ 保存と同じ面に並べない（065・承認済みの方針）。 */
[data-ui="v2"] .u-card-danger { border-color: var(--u-danger-line); }
[data-ui="v2"] .u-card-title {
  display: flex; align-items: center; gap: var(--u-sp-3);
  margin: 0 0 var(--u-sp-4);
  font-size: var(--u-fs-5); font-weight: 700;
}
[data-ui="v2"] .u-card-title > svg { flex: none; color: var(--u-accent); }
/* 見出しを fieldset の legend にするときも同じ見た目にする */
[data-ui="v2"] legend.u-card-title { padding: 0; float: none; }

[data-ui="v2"] .u-stack { display: flex; flex-direction: column; gap: var(--u-sp-4); }
[data-ui="v2"] .u-grid-2,
[data-ui="v2"] .u-grid-3,
[data-ui="v2"] .u-grid-4 { display: grid; gap: var(--u-sp-4) var(--u-sp-5); }
[data-ui="v2"] .u-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-ui="v2"] .u-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-ui="v2"] .u-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ⭐ 幅の要る欄と、要らない欄を同じ幅にしない（2026-09-08・利用者の指摘「入力欄が狭い」）。
   等分の3列だと、氏名が 147px しか無いのに生年月日（日付欄）にも同じ 147px を配っていた。
   ⚠ .u-grid-3 は 基本情報・制度・緊急連絡先 の3か所が共有している。**等分のまま残す。**
     ここを直接いじると、電話番号がいちばん狭くなる緊急連絡先まで巻き込む。
     必要な行にだけ、その行の意味に合わせた比率のクラスを当てる。 */
[data-ui="v2"] .u-grid-name { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.35fr) minmax(0, 1fr); }
[data-ui="v2"] .u-grid-ec   { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1.2fr); }
[data-ui="v2"] .u-span-2 { grid-column: span 2; }

[data-ui="v2"] .u-crumb {
  display: flex; align-items: center; gap: var(--u-sp-2);
  font-size: var(--u-fs-2); color: var(--u-sub);
}
[data-ui="v2"] .u-crumb b { color: var(--u-ink); }

/* =============================================================================
   入力
   ============================================================================= */
[data-ui="v2"] .u-field { display: flex; flex-direction: column; gap: var(--u-sp-1); }

[data-ui="v2"] .u-label {
  display: flex; align-items: center; gap: var(--u-sp-2);
  font-size: var(--u-fs-3); font-weight: 700; color: var(--u-ink);
}
/* ⚠ 必須は記号の * だけに頼らない。色が見えなくても語で分かるようにする。 */
[data-ui="v2"] .u-req {
  font-size: var(--u-fs-1); font-weight: 700;
  color: var(--u-panel); background: var(--u-danger);
  border-radius: var(--u-r-sm); padding: 0 var(--u-sp-2);
}

[data-ui="v2"] .u-input,
[data-ui="v2"] .u-select,
[data-ui="v2"] .u-textarea {
  width: 100%; box-sizing: border-box;
  min-height: var(--u-h);
  border: 1px solid var(--u-field);
  border-radius: var(--u-r-sm);
  background: var(--u-panel);
  padding: var(--u-sp-2) var(--u-sp-3);
  font-family: inherit;
  font-size: var(--u-fs-4);
  color: var(--u-ink);
  line-height: var(--u-lh);
}
[data-ui="v2"] .u-textarea { min-height: 92px; resize: vertical; }
[data-ui="v2"] .u-input::placeholder,
[data-ui="v2"] .u-textarea::placeholder { color: var(--u-sub); }

/* ⚠ select の ▼ は内側を約24px食う（実測）。右に余白を確保しないと値と重なる。
   端末の標準の選択画面をそのまま出したいので、appearance だけ外して器は select のまま。 */
[data-ui="v2"] .u-selectwrap { position: relative; }
[data-ui="v2"] .u-selectwrap > svg {
  position: absolute; right: var(--u-sp-3); top: 50%; margin-top: -10px;
  color: var(--u-sub); pointer-events: none;
}
[data-ui="v2"] .u-select {
  -webkit-appearance: none; appearance: none;
  padding-right: var(--u-sp-7);
  cursor: pointer;
}
[data-ui="v2"] .u-select::-ms-expand { display: none; }

/* 直すところがある欄。⚠ 色だけで伝えない。枠を太くし、下に文で理由を書く。 */
[data-ui="v2"] .u-input.is-error,
[data-ui="v2"] .u-select.is-error,
[data-ui="v2"] .u-textarea.is-error {
  border-width: 2px;
  border-color: var(--u-danger);
  padding: calc(var(--u-sp-2) - 1px) calc(var(--u-sp-3) - 1px);
}
[data-ui="v2"] .u-select.is-error { padding-right: calc(var(--u-sp-7) - 1px); }
[data-ui="v2"] .u-error {
  display: flex; align-items: flex-start; gap: var(--u-sp-1);
  font-size: var(--u-fs-3); font-weight: 700; color: var(--u-danger);
}
[data-ui="v2"] .u-help { font-size: var(--u-fs-2); color: var(--u-sub); }

/* 2択の選択。⚠ 見た目を作り替えても中身は素のラジオのままにする。
   矢印キーで選び替えられること、読み上げが「2個中1個目」と言えることを壊さない。 */
[data-ui="v2"] .u-tiles { display: flex; flex-direction: column; gap: var(--u-sp-3); }
[data-ui="v2"] .u-tile {
  display: flex; align-items: center; gap: var(--u-sp-3);
  box-sizing: border-box;
  min-height: 56px; padding: 0 var(--u-sp-4);
  border: 1px solid var(--u-field);
  border-radius: var(--u-r-sm);
  background: var(--u-panel);
  font-size: var(--u-fs-4); font-weight: 700;
  cursor: pointer;
}
[data-ui="v2"] .u-tile > input[type="radio"] {
  width: 22px; height: 22px; margin: 0; flex: none;
  accent-color: var(--u-accent);
}
[data-ui="v2"] .u-tile > span { flex-grow: 1; }
/* ⚠ 選択中は「太い枠 ＋ 丸の塗り ＋『選択中』の文字」の3つで示す。
   色を見分けられなくても分かるようにするため。 */
[data-ui="v2"] .u-tile.is-on {
  border-width: 2px;
  border-color: var(--u-accent);
  padding: 0 calc(var(--u-sp-4) - 1px);
}
[data-ui="v2"] .u-tile-mark {
  flex: none;
  font-size: var(--u-fs-1); font-weight: 700;
  color: var(--u-panel); background: var(--u-accent);
  border-radius: var(--u-r-sm); padding: 0 var(--u-sp-2);
}

/* =============================================================================
   ボタン。重要な操作には必ず文字を付ける。アイコンだけのボタンは作らない。
   ============================================================================= */
[data-ui="v2"] .u-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--u-sp-2);
  box-sizing: border-box;
  min-height: var(--u-h); padding: 0 var(--u-sp-5);
  border: 1px solid var(--u-field);
  border-radius: var(--u-r-sm);
  background: var(--u-panel);
  color: var(--u-ink);
  font-family: inherit; font-size: var(--u-fs-4); font-weight: 700;
  cursor: pointer;
}
[data-ui="v2"] .u-btn > svg { flex: none; }
[data-ui="v2"] .u-btn.is-primary {
  background: var(--u-accent); border-color: var(--u-accent); color: var(--u-panel);
}
/* ⚠ 危険な操作は塗らない。枠と赤文字にして、保存と同じ見え方にしない。 */
[data-ui="v2"] .u-btn.is-danger { border-color: var(--u-danger); color: var(--u-danger); }
[data-ui="v2"] .u-btn.is-wide { width: 100%; }
[data-ui="v2"] .u-btn.is-sm { min-height: var(--u-h-sm); padding: 0 var(--u-sp-3); font-size: var(--u-fs-3); }
[data-ui="v2"] .u-btn[disabled] { opacity: .6; cursor: default; }

/* =============================================================================
   折りたたみ（スマートフォンのみ）
   ⚠ 見出しは本物の <button aria-expanded> にする。div にしない。
   ⚠ 閉じている中身は DOM から消さず hidden で隠すだけにする。
     消すと、ブラウザの検索と読み上げの通し読みから消える。
   ============================================================================= */
[data-ui="v2"] .u-section { background: var(--u-panel); border: 1px solid var(--u-line); border-radius: var(--u-r-md); }
[data-ui="v2"] .u-section-head {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: var(--u-sp-3);
  min-height: 60px; padding: var(--u-sp-2) var(--u-sp-4);
  border: 0; border-radius: var(--u-r-md);
  background: transparent; color: var(--u-ink);
  font-family: inherit; text-align: left;
  cursor: pointer;
}
/* 見出しは h2 のままにする（読み上げの見出し送りで拾えるように）。
   余白は入れ物側が持つので、ここでは潰すだけ。 */
[data-ui="v2"] .u-section-h { margin: 0; font-size: inherit; font-weight: inherit; }
[data-ui="v2"] .u-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[data-ui="v2"] .u-section-head > svg { flex: none; }
[data-ui="v2"] .u-section-icon { color: var(--u-accent); }
[data-ui="v2"] .u-section-title { flex-grow: 1; min-width: 0; font-size: var(--u-fs-4); font-weight: 700; }
[data-ui="v2"] .u-section-act { flex: none; font-size: var(--u-fs-1); font-weight: 700; color: var(--u-sub); white-space: nowrap; }
[data-ui="v2"] .u-section-body { padding: var(--u-sp-4) var(--u-sp-4) var(--u-sp-5); border-top: 1px solid var(--u-line); }
[data-ui="v2"] .u-section-head[aria-expanded="true"] .u-chevron { transform: rotate(180deg); }
/* 直すところがある項目。色・枠の太さ・三角の形・文字の4つで示す。 */
[data-ui="v2"] .u-section.is-error { border-width: 2px; border-color: var(--u-danger); background: var(--u-danger-soft); }
[data-ui="v2"] .u-section.is-error .u-section-icon,
[data-ui="v2"] .u-section.is-error .u-section-act { color: var(--u-danger); }

/* 入力済みの札。⚠「未入力」は赤にしない。空のままが正しい利用者がいる。 */
[data-ui="v2"] .u-badge {
  flex: none;
  font-size: var(--u-fs-1); font-weight: 700; white-space: nowrap;
  color: var(--u-sub); background: var(--u-ground);
  border: 1px solid var(--u-line); border-radius: var(--u-r-full);
  padding: 0 var(--u-sp-3);
}
[data-ui="v2"] .u-badge.is-empty { background: var(--u-panel); border-style: dashed; }
[data-ui="v2"] .u-badge.is-error {
  display: inline-flex; align-items: center; gap: var(--u-sp-1);
  color: var(--u-panel); background: var(--u-danger); border-color: var(--u-danger);
}

/* =============================================================================
   状態を伝える帯。4種だけ。⚠ 色だけに頼らず必ず文字で書く。
   ============================================================================= */
[data-ui="v2"] .u-banner {
  display: flex; align-items: flex-start; gap: var(--u-sp-3);
  border: 1px solid; border-radius: var(--u-r-sm);
  padding: var(--u-sp-3) var(--u-sp-4);
  font-size: var(--u-fs-3);
}
[data-ui="v2"] .u-banner > svg { flex: none; margin-top: var(--u-sp-1); }
[data-ui="v2"] .u-banner.is-ok   { background: var(--u-accent-soft); border-color: var(--u-accent-line); color: var(--u-accent-ink); }
[data-ui="v2"] .u-banner.is-warn { background: var(--u-warn-soft);   border-color: var(--u-warn-line);   color: var(--u-warn); }
[data-ui="v2"] .u-banner.is-err  { background: var(--u-danger-soft); border-color: var(--u-danger-line); color: var(--u-danger); }
[data-ui="v2"] .u-banner.is-info { background: var(--u-info-soft);   border-color: var(--u-info-line);   color: var(--u-info); }
[data-ui="v2"] .u-banner-title { font-weight: 700; }
[data-ui="v2"] .u-banner-close {
  flex: none; margin-left: auto;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  padding: 0 var(--u-sp-1);
}

/* 要確認の要約。閉じている項目の中のものも必ずここに出す。 */
[data-ui="v2"] .u-summary { display: flex; flex-direction: column; gap: var(--u-sp-2); }
[data-ui="v2"] .u-summary-jump {
  display: flex; align-items: center; gap: var(--u-sp-2);
  width: 100%; box-sizing: border-box;
  min-height: var(--u-h); padding: var(--u-sp-2) var(--u-sp-3);
  border: 1px solid var(--u-danger-line); border-radius: var(--u-r-sm);
  background: var(--u-panel); color: var(--u-danger);
  font-family: inherit; font-size: var(--u-fs-3); font-weight: 700;
  text-align: left; cursor: pointer;
}
[data-ui="v2"] .u-summary-jump > span { flex-grow: 1; }

/* =============================================================================
   確認ダイアログ。未保存の警告と削除の確認が同じ器を使う。
   ⚠ Esc と背景クリックは安全側（やめる）に倒す。JS 側で決める。
   ============================================================================= */
[data-ui="v2"].u-dialog,
[data-ui="v2"] .u-dialog { display: flex; flex-direction: column; gap: var(--u-sp-4); }
[data-ui="v2"] .u-dialog-head { display: flex; align-items: flex-start; gap: var(--u-sp-3); }
[data-ui="v2"] .u-dialog-head > svg { flex: none; margin-top: var(--u-sp-1); }
[data-ui="v2"] .u-dialog-title { margin: 0 0 var(--u-sp-2); font-size: var(--u-fs-6); font-weight: 700; }
[data-ui="v2"] .u-dialog-body { font-size: var(--u-fs-4); }
[data-ui="v2"] .u-dialog-body p { margin: 0 0 var(--u-sp-2); }
[data-ui="v2"] .u-dialog-body p:last-child { margin-bottom: 0; }
[data-ui="v2"] .u-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--u-sp-3); justify-content: flex-end; }
[data-ui="v2"] .u-dialog-actions .u-spacer { flex-grow: 1; }

/* =============================================================================
   画面の枠組み
   ============================================================================= */
[data-ui="v2"] .u-head {
  background: var(--u-panel);
  border-bottom: 1px solid var(--u-line);
  padding: var(--u-sp-3) var(--u-sp-5) var(--u-sp-4);
}
/* ⚠ 狭い画面で縮めない。縮めると「利用者の／編集」「やまだ は／なこ」のように
   語の途中で折り返して読めなくなる（実測 375px・2026-08-30）。
   足りなくなったら**行を増やす**。 */
[data-ui="v2"] .u-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--u-sp-2) var(--u-sp-5); }
[data-ui="v2"] .u-head-row > * { flex: none; }
[data-ui="v2"] .u-title { margin: 0; font-size: var(--u-fs-7); font-weight: 700; }
[data-ui="v2"] .u-name { font-size: var(--u-fs-5); font-weight: 700; }
[data-ui="v2"] .u-kana { font-size: var(--u-fs-3); color: var(--u-sub); }
[data-ui="v2"] .u-chip {
  display: inline-flex; align-items: center; gap: var(--u-sp-1);
  font-size: var(--u-fs-3); font-weight: 700;
  border: 1px solid; border-radius: var(--u-r-full);
  padding: 0 var(--u-sp-3);
}
[data-ui="v2"] .u-chip.is-ok   { color: var(--u-accent); background: var(--u-accent-soft); border-color: var(--u-accent-line); }
[data-ui="v2"] .u-chip.is-warn { color: var(--u-warn);   background: var(--u-warn-soft);   border-color: var(--u-warn-line); }

[data-ui="v2"] .u-body { display: flex; gap: var(--u-sp-6); align-items: flex-start; padding: var(--u-sp-6) var(--u-sp-5) var(--u-sp-6); }
[data-ui="v2"] .u-main { display: flex; flex-direction: column; gap: var(--u-sp-5); flex-grow: 1; min-width: 0; }
/* ⭐ 右の列は 348px → 264px（2026-09-08・利用者の指摘「入力欄が狭い」）。
   実測（1280px の画面）: フォーム側 537px に対し、右の列は中身が 753px しか無いのに
   **1,373px ぶんが空**だった。空白のために入力欄が削られていた。
   264px まで詰めても右の列の中身は溢れない（240px まで溢れないことを実測し、余裕を見た）。
   ⚠ 「溢れていない」は「読める」の証拠にならないので、絵でも確かめること。 */
[data-ui="v2"] .u-side { display: flex; flex-direction: column; gap: var(--u-sp-5); width: 264px; flex: none; }

[data-ui="v2"] .u-footbar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--u-sp-4);
  background: var(--u-panel);
  border-top: 1px solid var(--u-line);
  padding: var(--u-sp-4) var(--u-sp-5);
}
[data-ui="v2"] .u-footbar .u-spacer { flex-grow: 1; }

[data-ui="v2"] .u-toolrow { display: flex; align-items: center; gap: var(--u-sp-2); }
[data-ui="v2"] .u-toolrow .u-spacer { flex-grow: 1; }

/* 一覧で「たった今更新」した行。⚠ 地の色だけで伝えず、行に文字の札も出す。
   ⚠ 一覧はまだ刷新していない画面なので、行そのものに属性を付けて
     **トークンだけ**借りる（書体は .u-page 側なので動かない）。 */
[data-ui="v2"].u-row-marked,
[data-ui="v2"] .u-row-marked { background: var(--u-row-mark); }

/* =============================================================================
   狭い画面
   ⚠ 3列のまま 375px に入れると1列 ~118px になり、▼ が内側を食って値が読めない。
     畳むこと自体を検査で固定してある（h_layout の L28）。
   ============================================================================= */
@media (max-width: 900px) {
  [data-ui="v2"] .u-grid-2,
  [data-ui="v2"] .u-grid-3,
  [data-ui="v2"] .u-grid-4 { grid-template-columns: minmax(0, 1fr); }
  [data-ui="v2"] .u-span-2 { grid-column: auto; }
  [data-ui="v2"] .u-body { flex-direction: column; padding: var(--u-sp-4); gap: var(--u-sp-4); }
  [data-ui="v2"] .u-side { width: 100%; }
  [data-ui="v2"] .u-head { padding: var(--u-sp-3) var(--u-sp-4); }
  [data-ui="v2"] .u-head-row { gap: var(--u-sp-3); }
  [data-ui="v2"] .u-title { font-size: var(--u-fs-5); }
  [data-ui="v2"] .u-card { padding: var(--u-sp-4); }
  /* ⚠ 下部のバーは狭い画面で3段に潰れる（実測 2026-08-30: 保存ボタンが87px）。
     ボタンを1行に、説明はその下の行に回す。押す物の高さを守る。 */
  [data-ui="v2"] .u-footbar { padding: var(--u-sp-3) var(--u-sp-4); gap: var(--u-sp-3); flex-wrap: wrap; }
  [data-ui="v2"] .u-footbar .u-spacer { display: none; }
  [data-ui="v2"] .u-footbar .u-help { order: 3; width: 100%; text-align: center; }
  [data-ui="v2"] .u-footbar .u-btn.is-primary { flex-grow: 1; }
  /* 指で押す物を一段大きくする */
  [data-ui="v2"] .u-input,
  [data-ui="v2"] .u-select,
  [data-ui="v2"] .u-btn { min-height: 52px; }
}

/* ⚠ 動きを減らす設定に従う（063 と同じ方針）。 */
@media (prefers-reduced-motion: reduce) {
  [data-ui="v2"] * { transition: none !important; animation: none !important; }
}