:root {
    color-scheme: light;
    --navy: #17324d;
    --navy-deep: #111827;
    --paper: #f5f7fa;
    --surface: #ffffff;
    --line: #b8c4cc;
    --line-soft: #e5e7eb;
    --line-strong: #9eacb5;
    --atena-label-border: #9eacb5;
    --atena-label-text: #bd3434;
    --teal: #15803d;
    --teal-soft: #f0fdf4;
    --disabled: #fff4bf;
    /* EditNKS.Designer.vb:1583 の Label8.ForeColor（Fuchsia）の注記を、白地で読める濃さにした画面用トークン。 */
    --hint-accent: #a0179b;
    --danger: #a13d45;
    /* 必須の印の色。旧ラベルの赤（.legacy-required-label）と同値にして、
       旧アプリ由来の画面と新規機能の画面で必須の印が別の赤にならないようにする。 */
    --required-mark: #d60000;
    --danger-soft: #f8e4e5;
    /* くらしーど加入の帯。旧 EditKeiyakuInfo.Designer.vb:3879 の lblAnshinSupport.BackColor（255,121,136）の
       白抜きはコントラスト比 2.52:1 で WCAG AA に届かず、白抜きのまま濃くすると --danger と見分けがつかず
       「加入」が警告に見えた。淡い地に赤い字（地との比 5.47:1）へ組み替え、枠で形を保つ（2026-09-14 主決定）。 */
    --anshin-band: #fde8eb;
    --anshin-ink: #b3273f;
    --anshin-line: #eea5b2;
    --ink: #1f2937;
    --muted: #4b5563;
    --focus: #c47000;
    /* 装飾トークン統一（audit-decorative-color）。値は既存生値の吸収で新色は導入しない。
       --row-related は旧 入金履歴画面の関連行 紫（NyukinRirekiMain.vb の画面固有 Select）の
       名前付けのみで、意味色のため値を変えてはならない */
    --teal-muted: #9dc3bb;
    --hover: #f9fafb;
    --row-selected: #dcefed;
    --row-related: #ddd7ff;
    --row-rent-due: #f9dfe5;
    --edit-demand-rent-flag: greenyellow;
    --danger-text: #7d2930;
    --surface-header: #fafafa;
    --surface-dim: #f9fafb;
    --line-warm: #c8c4b8;
    --label: #374151;
    --shadow-rgb: 31 41 55;
    /* S6 形状・寸法トークン（audit-shape-typography）。角丸は指定なし(=0) 8 規則が
       1px 1 規則に対する多数派で 0 を採用。グリッド本文は旧 FlexGrid がフォーム既定の
       MS UI Gothic 9pt（96dpi で 12px）を継承していたため 12px。13px 案は embedded-grid を
       12→13px へ拡大させ「今より大きくしない」に反するため不採用（census は docs/ui-tone-refinement.md） */
    --control-radius: 0;
    --grid-font: 12px;
    /* 家主送金一覧（SoukinMain）の合計行の地。旧 TsFlexGrid.vb:119-121 の Total スタイル（Color.LightYellow）と同値 */
    --grid-total-row: #ffffe0;
    /* 家主送金一覧の下に止めた月次の処理のバーの影（モックの .bar.dock と同値） */
    --soukin-main-command-bar-shadow: rgb(var(--shadow-rgb) / .10);
    /* 家主送金一覧の現在行の地と左の縦線。チェックした行の地（--row-selected の緑）と分けるため、
       旧 TsFlexGrid.vb:69-71 の選択行（SelectRow・DodgerBlue）の青にする。地は本文の字（--ink）が読める淡さ、
       縦線は白と淡い青の地のどちらにも 3:1 を超える濃さ（DodgerBlue そのものは白との比が 3:1 に届かない） */
    --soukin-main-row-chosen: #cfe2ff;
    --soukin-main-row-chosen-mark: #1565c0;
    /* 左サイドバー（.master-rail 一式）専用トークン。SNG-543 で cozci の
       緑と中立色へ寄せる。--rail-bg / --rail-text-muted は CSS 検査が比較対象に
       しているため互換値を保ち、表示には --rail-bg-account / --rail-text を使う。 */
    --rail-bg: #152b4a;
    --rail-bg-active: #f0fdf4;
    --rail-bg-account: #fafafa;
    --rail-text: #4b5563;
    --rail-text-muted: #8fa3b0;
    --app-rail-width: 256px;
    /* 一覧（管理建物一覧・物件一覧、2026-09-13 から回議書一覧も）の見た目トークン。2026-09-06。参照は .ichiran の内側だけ */
    --ic-ink: #14212b;
    --ic-muted: #5b6b78;
    --ic-line: #cfd8de;
    --ic-accent-strong: #126c34;
    --ic-accent-soft: #e7f3ec;
    --ic-hint: #92a2ad;
    --ic-rule: #eef1f3;
    --ic-band-caution: #b3261e;
    --ic-band-fixed-term: #b07d1a;
    --ic-band-move-out: #3a6ea5;
    --ic-band-managed-out: #98a5ae;
    --ic-band-canceled: #8a6d3b;
    --claim-urgent-attribute: #fa5882;
    --ic-band-contracted: #ffff00;
    --ic-panel-shadow: rgb(31 41 55 / .08);
    /* 回議書の「状態」欄の地。旧 EditKaigisyo.SetData:1139,1144 の Color.Pink・Color.LightGreen と同値。
       一覧の決裁行（.legacy-kessai の #ffffc0）とは別の色 */
    --kaigisyo-status-kyakka: #ffc0cb;
    --kaigisyo-status-kessai: #90ee90;
    /* コードは縦に並べて差分を読む値なので等幅にする。値そのものが台帳の見出しになる */
    --ic-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* 2026-09-11 以降に規則へ直書きされた生の色（CSS 生値の検査で高水位 180 を超えた分）を、値を変えずに
       ここへ寄せたもの。置き換え前の生値と同じ値なので見た目は変わらない。色を変えるときはここで変える */
    --surface-muted: #f2f4f6;
    --panel-shadow: rgb(var(--shadow-rgb) / .05);
    --passport-delete-line: #d8a6a6;
    --passport-delete-ink: #a13232;
    --passport-delete-line-hover: #bd6e6e;
    --passport-delete-bg-hover: #fff5f5;
    --passport-delete-ink-hover: #882727;
    --claim-tooltip-bg: #26343e;
    --claim-candidates-shadow: rgb(var(--shadow-rgb) / .18);
    --claim-unmanaged-ink: #8a2b37;
    --claim-menu-shadow: #17324d20;
    --claim-overdue-bg: #fee2e2;
    --claim-unarranged-bg: #fef3c7;
    --claim-row-hover: #15803d08;
    --user-state-assigned-line: #84b5aa;
    --user-state-assigned-ink: #174e4a;
    --user-state-pending-line: #d6b16e;
    --user-state-pending-bg: #fff7e6;
    --user-state-pending-ink: #77520c;
    --user-state-admin-line: #7f9fb3;
    --user-state-admin-bg: #e8f1f6;
    --user-state-admin-ink: #214d68;
    --user-state-tenant-admin-line: #a28ab8;
    --user-state-tenant-admin-bg: #f3edf8;
    --user-state-tenant-admin-ink: #563a70;
    /* 退居予告の旧の字の色。Label1「※左記と一致するシート…」は TaikyoYokoku.Designer.vb:357 の (0,0,192)、
       lblSendTime は同:305 の (192,0,192)。白地との比は 11.9:1・5.2:1 で、そのまま読めるので旧の値を使う */
    --taikyo-yokoku-sheet-note-ink: #0000c0;
    --taikyo-yokoku-sent-ink: #c000c0;
    --missing-value-ink: #7a5d00;
    --kaigisyo-note-line: #d2a548;
    --kaigisyo-note-bg: #fffdf5;
    --kaigisyo-command-bar-shadow: rgb(31 41 55 / .10);
    --koushin-card-shadow: rgb(31 41 55 / .10);
    --koushin-dialog-shadow: rgb(17 24 39 / .25);
    /* EditNKS の下のバーの影（承認モックの 0 -3px 14px の色）。回議書のバーの影を変えても一緒に変わらないよう別に持つ */
    --edit-nks-command-bar-shadow: rgb(var(--shadow-rgb) / .10);
    /* modern-form の入力画面の列数。MasterModernFormLayout が field-grid ごとに style 属性で与える。
       与えない面では参照側の fallback と同じ 1 になるよう、同じ値をここに置く（定義の無い var() を増やさない） */
    --modern-clusters: 1;
    --modern-matrix-columns: 1;
    --modern-table-columns: 1;
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    font-size: 14px;
    font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--ink); }

body { line-height: 1.5; }

a { color: var(--teal); text-decoration: none; cursor: default; }
a:hover { text-decoration: underline; }

button, input, textarea, select { font: inherit; }
.year-month-select { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.year-month-select > select { min-height: 32px; border: 1px solid var(--line-strong); border-radius: var(--control-radius); background: var(--surface); color: var(--ink); padding: 4px 8px; }
.year-month-select > select:first-child { flex: 2 1 7.5rem; min-width: 7.5rem; }
.year-month-select > select:last-child { flex: 1 1 6.5rem; min-width: 6.5rem; }
.field-control-line > .year-month-select { flex: 1 1 auto; }
button, summary, label { cursor: default; }
button:disabled, button.command:disabled, button.button:disabled, button.btn:disabled { cursor: not-allowed; opacity: 1; background: #f1f3f4; border-color: #ced6da; color: #8e9499; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1:focus { outline: none; }

code, kbd, .panel-kicker, .eyebrow, .record-mode, .rail-heading {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

kbd {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 5px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 2px;
    background: #fff;
    color: var(--label);
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.app-shell { display: grid; grid-template-columns: var(--app-rail-width) minmax(0, 1fr); min-height: 100vh; height: 100vh; overflow: hidden; transition: grid-template-columns .2s ease; }
.app-shell[data-sidebar-state="collapsed"] { grid-template-columns: 0 minmax(0, 1fr); }
.app-main { display: flex; min-width: 0; min-height: 100vh; height: 100vh; flex-direction: column; }
.app-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; min-height: 64px; height: 64px; flex: 0 0 64px; border-bottom: 1px solid var(--line-soft); background: var(--rail-bg-account); }
.app-header-leading { display: flex; align-items: center; gap: 12px; min-width: 0; height: 100%; padding: 0 24px; }
.sidebar-trigger { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-soft); border-radius: 8px; background: transparent; color: var(--muted); }
.sidebar-trigger:hover { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.sidebar-trigger .cozci-sidebar-icon { width: 18px; height: 18px; }

.master-rail {
    --rail-bg: var(--rail-bg-account);
    --rail-text-muted: var(--rail-text);
    position: sticky;
    top: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: var(--app-rail-width);
    height: 100vh;
    overflow: hidden;
    color: var(--rail-text);
    background: var(--rail-bg-account);
    border-right: 1px solid #e5e7eb;
    transition: transform .2s ease, visibility .2s ease;
}
.app-shell[data-sidebar-state="collapsed"] .master-rail { visibility: hidden; transform: translateX(-100%); }

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    color: #1f2937;
    border-bottom: 1px solid rgba(17,24,39,.08);
}
.brand:hover { text-decoration: none; background: rgba(21,128,61,.06); }
.brand-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #86efac;
    color: #15803d;
    font-family: serif;
    font-size: 18px;
}
.brand strong { display: block; font: 700 15px/1 ui-monospace, monospace; letter-spacing: .16em; }
.brand small { display: block; margin-top: 5px; color: #6b7280; font-size: 11px; letter-spacing: .12em; }
.app-header .brand { height: 100%; padding: 0; border-bottom: 0; }
.app-header .brand:hover { background: transparent; }

.rail-heading { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px 9px; color: var(--rail-text); font-size: 10px; letter-spacing: .12em; }
.rail-heading b { display: grid; place-items: center; min-width: 25px; height: 20px; padding: 0 5px; color: #15803d; background: #dcfce7; }

.master-nav { overflow-y: auto; padding: 0 8px 14px; scrollbar-width: thin; }
.master-nav details { margin: 2px 0 8px; }
.master-nav summary { padding: 7px 8px; color: var(--rail-text-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.master-nav > .sidebar-section { margin-top: 16px; }
.master-nav > .sidebar-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--rail-text); list-style: none; }
.master-nav > .sidebar-section > summary::-webkit-details-marker { display: none; }
.master-nav > .sidebar-section > summary .cozci-sidebar-icon { width: 14px; height: 14px; transition: transform .2s ease; }
.master-nav > .sidebar-section[data-state="expanded"] > summary .cozci-sidebar-icon { transform: rotate(180deg); }
.sidebar-section-content { overflow: hidden; }
.master-nav a { display: flex; align-items: center; gap: 10px; margin: 0 2px; padding: 8px 12px; border-radius: 8px; color: var(--rail-text); font-weight: 500; }
.master-nav a:hover { background: rgba(21,128,61,.06); color: var(--ink); text-decoration: none; }
/* 選択中の印は淡い緑の面と文字色だけにする。行は margin と border-radius で内側に寄せた
   ピルなので、左端の縦線（角丸の無い全幅の行で「タブの舌」として成立する作法）を重ねると
   8px の角丸に切られて欠片になる。文字を 600 にするのは、面と文字色だけでは手掛かりが
   色に偏るため（WCAG 1.4.1 F81）。全角は太らせても字幅が変わらないので行は伸びない。 */
.master-nav a.active { background: var(--rail-bg-active); color: var(--teal); font-weight: 600; }
.master-nav a span { display: block; font-size: 12px; }
.master-nav a code { display: block; overflow: hidden; margin-top: 1px; color: #6b7280; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

/* ワークフロー：アイコン付きの行だけ横並びにする（他セクションは今までどおりテキストのみ）。 */
.process-nav a { display: flex; align-items: center; gap: 10px; }
.workflow-icon { width: 32px; height: 32px; flex: 0 0 auto; object-fit: cover; border-radius: 50%; }

.rail-account { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 51px; padding: 10px 14px; border-top: 1px solid rgba(17,24,39,.08); background: var(--rail-bg-account); font-size: 11px; }
.rail-account a { color: #15803d; }
.rail-account form { margin: 0; }
.rail-account button { padding: 0; border: 0; background: transparent; color: #15803d; font-size: 11px; }
.rail-account button:hover { text-decoration: underline; }
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }

.workbench { --workbench-inline-padding: clamp(18px, 3vw, 42px); --workbench-top-padding: 26px; --workbench-bottom-padding: 46px; min-width: 0; min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: var(--workbench-top-padding) var(--workbench-inline-padding) var(--workbench-bottom-padding); }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 auto 22px; max-width: 1440px; }
.page-header h1 { margin: 3px 0 2px; color: var(--navy); font-size: clamp(26px, 3vw, 40px); line-height: 1.15; letter-spacing: -.01em; }
/* 募集案件一覧はタイトルが和字単位で折り返すと、画面の役割が一目で読めない。 */
.workflow-list-header h1 { flex: 0 0 auto; white-space: nowrap; }
.workflow-list-header p { max-width: 72ch; margin: 0; color: var(--muted); }
.workflow-search-edit-link { color: var(--navy); }
.eyebrow { margin: 0; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.page-lead { margin: 8px 0 0; color: var(--muted); }
.header-count { display: flex; align-items: baseline; gap: 8px; padding: 7px 0 2px 18px; border-left: 1px solid var(--line); }
.header-count strong { color: var(--navy); font: 300 46px/1 ui-monospace, monospace; }
.header-count span { color: var(--muted); font: 10px/1 ui-monospace, monospace; letter-spacing: .12em; }

.category-board { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; max-width: 1440px; margin: 0 auto; align-items: start; }
.category-column { background: var(--surface); border: 1px solid var(--line-soft); box-shadow: 0 2px 8px rgb(var(--shadow-rgb) / .05); }
.category-column > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; color: #fff; background: var(--navy); }
.category-column > header h2 { margin: 0; font-size: 15px; letter-spacing: .06em; }
.category-column > header span { font: 12px ui-monospace, monospace; color: #aac3d1; }
.category-links a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; padding: 10px 14px; color: var(--ink); border-top: 1px solid var(--line-soft); }
.category-links a:first-child { border-top: 0; }
.category-links a:hover { background: var(--hover); text-decoration: none; }
.category-links a span { font-weight: 600; }
.category-links a code { color: var(--muted); font-size: 9px; }
.category-links a b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--teal); }
.home-note { display: flex; gap: 8px; align-items: center; max-width: 1440px; margin: 16px auto 0; padding: 11px 14px; color: #596a76; background: var(--surface-header); border: 1px solid var(--line-soft); font-size: 11px; }
.domain-entry { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1440px; margin: 0 auto 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--teal); background: #fff; }
.domain-entry h2 { margin: 2px 0; color: var(--navy); font-size: 18px; }
.domain-entry p { margin: 0; color: var(--muted); }
.legend-swatch { width: 15px; height: 15px; border: 1px solid #d3c169; }
/* ダッシュボード（SNG-778）。件数のカードを固定の順で並べる。色は既存のトークンだけで書く */
.dashboard-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; max-width: 1440px; margin: 0 auto; align-items: stretch; }
.dashboard-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 10px var(--panel-shadow); }
.dashboard-card h2 { margin: 0; color: var(--navy); font-size: 15px; }
.dashboard-count { margin: 0; color: var(--muted); }
.dashboard-count strong { margin-right: 4px; color: var(--navy); font-size: 32px; line-height: 1; }
.dashboard-note { margin: 0; color: var(--muted); font-size: 12px; }
.dashboard-error { margin: 0; color: var(--danger-text); font-size: 12px; }
.dashboard-link { margin-top: auto; color: var(--teal); font-weight: 600; }
.disabled-swatch { background: var(--disabled); }

.screen-header { align-items: center; margin-bottom: 14px; }
.record-mode { display: grid; justify-items: end; padding: 9px 12px; border-right: 3px solid var(--teal); background: #e7efef; }
.record-mode span { color: var(--teal); font-size: 10px; letter-spacing: .08em; }
.record-mode b { color: var(--navy); font-size: 12px; }

.command-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 6px; max-width: 1440px; margin: 0 auto 10px; padding: 8px; background: rgba(244,247,248,.96); border: 1px solid var(--line); box-shadow: 0 3px 12px rgb(var(--shadow-rgb) / .09); backdrop-filter: blur(8px); }
/* 2 本目以降の絞り込みバー。command-bar は position:sticky top:0 なので、そのまま重ねると
   スクロール中に 1 本目（検索）を完全に覆う。入力が増えて横に伸びるため折り返しも許す。 */
.command-bar-sub { position: static; flex-wrap: wrap; row-gap: 6px; }
.command, .button, .btn { min-height: 32px; padding: 4px 13px; border: 1px solid var(--line-strong); border-radius: 2px; background: #fff; color: var(--ink); font-weight: 600; }
.command:hover, .button:hover, .btn:hover { border-color: var(--teal); background: var(--hover); text-decoration: none; }
.command.primary, .button.primary, .btn-primary { border-color: var(--teal); background: var(--teal); color: #fff; }
.command.danger, .button.danger { border-color: var(--danger); color: var(--danger); }
.command.compact { min-width: 36px; padding-inline: 7px; font-family: ui-monospace, monospace; }
.command kbd { margin-left: 6px; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; }
.command-separator { width: 1px; height: 25px; margin: 0 4px; background: var(--line); }
.command-spacer { flex: 1; }

.notice, .confirmation { max-width: 1440px; margin: 0 auto 10px; padding: 10px 13px; border-left: 4px solid var(--teal); background: var(--teal-soft); }
.notice-error { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger-text); }
.pdf-tab-fallback-notices { position: fixed; inset: 12px 12px auto auto; z-index: 1000; display: grid; gap: 8px; width: min(520px, calc(100vw - 24px)); }
.pdf-tab-fallback-notices .notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; box-shadow: 0 5px 20px var(--ic-panel-shadow); }
.confirmation { display: flex; align-items: center; gap: 8px; border: 1px solid #94b8b5; border-left-width: 4px; }
.confirmation > div { display: grid; flex: 1; }
.confirmation span { color: var(--muted); font-size: 11px; }
.confirmation-danger { border-color: #d5a4a8; border-left-color: var(--danger); background: var(--danger-soft); }
.postal-confirmation { align-items: end; flex-wrap: wrap; }
.postal-confirmation > div { min-width: min(100%, 320px); }
.postal-candidates { display: flex !important; flex-flow: row wrap; gap: 6px; }
.postal-selectors { display: grid !important; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px; }
.postal-selectors label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; }
.postal-selectors select { min-height: 32px; border: 1px solid var(--line-strong); border-radius: var(--control-radius); background: #fff; color: var(--ink); padding: 4px 8px; }
.postal-selectors output { grid-column: 1 / -1; color: var(--ink); font-weight: 700; }
.legacy-postal-dialog { align-items: end; }
.legacy-postal-dialog > div:first-child { align-self: stretch; min-width: 130px; }
.legacy-postal-zip { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.legacy-postal-zip input { width: 92px; min-height: 32px; border: 1px solid var(--line-strong); background: #eef1f2; padding: 4px 7px; }
.legacy-postal-candidate-list { width: min(100%, 428px); min-width: 280px; height: 148px; border: 1px solid var(--line-strong); background: #fff; padding: 2px; }
.legacy-address-selectors { grid-template-columns: minmax(220px, 287px); max-width: 310px; }
.legacy-address-selectors input { min-height: 32px; border: 1px solid var(--line-strong); border-radius: var(--control-radius); background: #fff; color: var(--ink); padding: 4px 8px; }
.choice-dialog, .account-dialog { align-items: end; flex-wrap: wrap; }
.choice-dialog > div:first-child, .account-dialog > div:first-child { min-width: 220px; }
.choice-list { display: flex !important; flex: 1 1 620px !important; flex-flow: row wrap; gap: 5px; max-height: 260px; overflow: auto; }
.account-fields { display: grid !important; flex: 1 1 720px !important; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 7px; }
.account-fields label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.account-fields input, .account-fields select { min-height: 32px; border: 1px solid var(--line-strong); background: #fff; padding: 4px 7px; }

.edit-surface, .record-panel, .not-found-card { position: relative; max-width: 1440px; margin: 0 auto 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 2px 10px rgb(var(--shadow-rgb) / .05); }
.surface-header, .record-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--surface-header); }
/* 見出しは縮めない。右の説明文が伸びると flex が h2 を潰して「書類チェ／ック」と
   折り返していた（2026-08-26 実測）。折り返すのは説明文のほう */
.surface-header h2, .record-panel h2 { margin: 1px 0 0; color: var(--navy); font-size: 15px; flex: 0 0 auto; }
.panel-kicker { color: var(--teal); font-size: 9px; font-weight: 700; letter-spacing: .12em; }

/* 畳める surface（SNG-591 の滞納集計など）。左ナビの details と同じ操作感で、
   summary が surface-header の見た目を兼ねる。既定は閉じて主役（一覧）を先頭に出す */
.fold-surface > summary { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: var(--surface-header); list-style: none; }
.fold-surface > summary::-webkit-details-marker { display: none; }
.fold-surface > summary::before { content: "▶"; font-size: 9px; color: var(--label); }
.fold-surface[open] > summary::before { content: "▼"; }
.fold-surface > summary h2 { margin: 1px 0 0; color: var(--navy); font-size: 15px; flex: 0 0 auto; }
.fold-surface[open] > summary { border-bottom: 1px solid var(--line); }
.fold-surface .fold-hint { color: var(--label); font-size: 12px; }
.fold-surface .fold-body > p { padding: 10px 15px 0; margin: 0 0 8px; }

.field-section { border-bottom: 1px solid var(--line); }
.field-section:last-of-type { border-bottom: 0; }
.field-section > h3 { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); background: var(--surface-dim); color: var(--navy); font-size: 12px; letter-spacing: .04em; }
/* 旧 TabControl の名前と構造は対応監査に使うため、見た目の階層を追加クラスへ持ち込めない。
   同じ field-tabset の入れ子だけで段を決め、画面ごとの上書きが再発するのを防ぐ。 */
.detail-tabs { display: flex; gap: 0; max-width: 1440px; margin: 0 auto 10px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.field-tabset:not(:where(.field-tabset .field-tabset)) > .tab-groups,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist { display: flex; flex-wrap: wrap; gap: 0; overflow-x: auto; border-bottom: 0; background: transparent; }
.field-tabset:not(:where(.field-tabset .field-tabset)) > .tab-groups { padding: 0; border-bottom: 1px solid var(--line); }
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist { padding: 8px 10px 0; }
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist::after { content: ""; flex: 0 0 100%; order: 1; border-top: 1px solid var(--line); }
.detail-tabs a,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .tab-groups > .tab-group,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab { display: block; flex: 0 0 auto; min-height: 32px; margin-bottom: -1px; padding: 6px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; }
.detail-tabs a.active,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .tab-groups[aria-label] > .tab-group.selected,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist[role="tablist"] > .field-tab[role="tab"].selected { border-bottom-color: var(--teal); color: var(--teal); }
.detail-tabs a[aria-disabled="true"],
.field-tabset:not(:where(.field-tabset .field-tabset)) > .tab-groups > .tab-group:disabled,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .tab-groups > .tab-group[aria-disabled="true"],
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab:disabled,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.detail-tabs a:focus-visible,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .tab-groups > .tab-group:focus-visible,
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab:focus-visible { position: relative; outline: 2px solid var(--teal); outline-offset: -2px; }
.field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tabpanel { flex: 0 0 100%; order: 2; }

.field-tabset .field-tabset { margin: 8px 10px; }
.field-tabset .field-tabset > .tab-groups,
.field-tabset .field-tabset > .field-tablist { display: flex; flex-wrap: wrap; gap: 6px; overflow-x: auto; padding: 0; border: 0; background: transparent; }
.field-tabset .field-tabset > .field-tablist::after { display: none; }
.field-tabset .field-tabset > .tab-groups > .tab-group,
.field-tabset .field-tabset > .field-tablist > .field-tab { flex: 0 0 auto; min-height: 30px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; }
.field-tabset .field-tabset > .tab-groups > .tab-group.selected,
.field-tabset .field-tabset > .field-tablist > .field-tab.selected,
.field-tabset .field-tabset > .field-tablist > .field-tab[aria-selected="true"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.field-tabset .field-tabset > .tab-groups > .tab-group:disabled,
.field-tabset .field-tabset > .tab-groups > .tab-group[aria-disabled="true"],
.field-tabset .field-tabset > .field-tablist > .field-tab:disabled,
.field-tabset .field-tabset > .field-tablist > .field-tab[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.field-tabset .field-tabset > .tab-groups > .tab-group:focus-visible,
.field-tabset .field-tabset > .field-tablist > .field-tab:focus-visible { position: relative; outline: 2px solid var(--teal); outline-offset: 2px; }
.field-tabset .field-tabset > .field-tablist > .field-tabpanel { flex: 0 0 100%; order: 1; }
.field-tabpanel { background: var(--surface); }
.field-tabpanel > .field-section { border-bottom: 0; }
.field-tab-retained { margin: 8px 10px; border: 1px solid var(--line); background: var(--surface-dim); }
.field-tab-retained > summary { padding: 7px 10px; color: var(--navy); font-size: 12px; font-weight: 700; }
.field-tab-retained[open] > summary { border-bottom: 1px solid var(--line-soft); }
.watch-step-pending { opacity: .68; }
.field-group { margin: 8px 10px; border: 1px solid var(--line); background: var(--surface); }
.field-group > .field-group-heading { margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); background: var(--surface-dim); color: var(--navy); font-size: 12px; letter-spacing: .02em; }
.field-group .field-group { margin: 8px; }
.field-group-untitled { border-color: var(--line-soft); }
.field-grid { display: grid; grid-template-columns: repeat(24, minmax(var(--field-grid-column-min, 28px), 1fr)); gap: 1px; padding: 1px; overflow-x: auto; background: var(--surface-header); }
.legacy-atena-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; background: transparent; }
.legacy-atena-search > .embedded-grid { flex: 1 0 100%; min-width: 0; margin-inline: 0; overflow-x: auto; }
.atena-label-grid { display: grid; grid-template-columns: repeat(2, 30px); gap: 2px; padding: 5px; border: 1px solid var(--atena-label-border); background: var(--surface); }
.atena-label-slot { width: 30px; height: 30px; border: 1px solid var(--atena-label-border); background: var(--surface); color: var(--atena-label-text); font-weight: 700; cursor: pointer; }
.atena-label-slot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── 物件詳細の流し込みレイアウト ──────────────────────────────────
   旧 Designer の px 座標は inline style で来るので、!important でしか外せない。
   DOM の並びは Tab キーと読み上げの順として旧のまま固定し、見える位置だけ組み直す。
   項目は 1 つも消さない。 */

/* 上段は「この記録が何か」を1行で名乗る帯。コード・名称・番号とレコード移動が
   横に並ぶよう、根元を自動折り返しの列にする。操作ボタンは読み終わった先にほしいので
   order で最後へ送る（DOM 順は動かさない）。 */
.field-groups[data-field-layout="flow"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 20px; align-items: end; padding: 14px 18px 0; }
.field-groups[data-field-layout="flow"] > .field-section { order: 0; border-bottom: 0; }
.field-groups[data-field-layout="flow"] > .command-bar { order: 0; justify-self: end; }
.field-groups[data-field-layout="flow"] > .field-tabset { grid-column: 1 / -1; order: 1; margin-top: 14px; }
.field-groups[data-field-layout="flow"] > .field-action { order: 2; align-self: center; margin-top: 14px; }
.field-groups[data-field-layout="flow"] > .field-action > .command { width: auto; }

/* 欄そのもの。旧の 24 列固定をやめ、内容が読める幅で折り返す。
   1fr のままだと画面幅いっぱいに 1 本の欄が伸びるので、上限を付けて左へ詰める。 */
.field-grid[data-field-layout="flow"] { grid-template-columns: repeat(auto-fill, minmax(190px, 232px)); justify-content: start; gap: 10px 18px; padding: 14px 18px 18px; overflow-x: visible; background: none; align-items: start; }
.field-grid[data-field-layout="flow"] > * { grid-column: auto / span 1 !important; grid-row: auto !important; }
.field-grid[data-field-layout="flow"] > [data-field-span="2"] { grid-column: auto / span 2 !important; }
.field-grid[data-field-layout="flow"] > [data-field-span="3"] { grid-column: 1 / -1 !important; }
.field-grid[data-field-layout="flow"] > .field-action, .field-grid[data-field-layout="flow"] > .field-child-group { grid-column: 1 / -1 !important; }

/* 画面が差し込む操作列・小見出しの塊は欄1つ分の幅に収まらない。1列に潰すと中の
   ボタンが1行ずつ折り返して縦積みになるので、行を丸ごと使わせる。 */
.field-grid[data-field-layout="flow"] > nav, .field-grid[data-field-layout="flow"] > section, .field-grid[data-field-layout="flow"] > menu { grid-column: 1 / -1 !important; }
/* 欄の並びの中に置いた操作列は、画面上端へ貼り付く道具箱ではない。 */
.field-groups[data-field-layout="flow"] .command-bar { position: static; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; flex-wrap: wrap; }
.field-groups[data-field-layout="flow"] .command-bar > .command { min-width: 34px; }
.field-grid[data-field-layout="flow"] .field-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; background: none; }
.field-grid[data-field-layout="flow"] menu { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

/* 欄の見た目。枠の中に沈める形にして、ラベルは小さく静かに上へ置く。 */
.field-groups[data-field-layout="flow"] .field { padding: 0; background: none; }
.field-groups[data-field-layout="flow"] .field > label:not(.check-field) { margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.field-groups[data-field-layout="flow"] .field-meta:empty { display: none; }
.field-groups[data-field-layout="flow"] .field-meta { min-height: 0; margin-top: 2px; }
/* 入力できる欄とできない欄の差は、旧アプリでは「黄色かどうか」で伝えていた。
   この画面は全欄が参照状態で開くので黄色一面では何も伝わらないが、差そのものは
   落とせない。打てる欄＝白地に濃い実線、打てない欄＝面を落として破線、で置き換える。 */
.field-groups[data-field-layout="flow"] .field.field-disabled { background: none; }
.field-groups[data-field-layout="flow"] .field input[type="text"],
.field-groups[data-field-layout="flow"] .field input[type="date"],
.field-groups[data-field-layout="flow"] .field textarea,
.field-groups[data-field-layout="flow"] .field select,
.field-groups[data-field-layout="flow"] .field .legacy-autocomplete-input { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.field-groups[data-field-layout="flow"] .field.field-disabled input[type="text"],
.field-groups[data-field-layout="flow"] .field.field-disabled input[type="date"],
.field-groups[data-field-layout="flow"] .field.field-disabled textarea,
.field-groups[data-field-layout="flow"] .field.field-disabled select,
.field-groups[data-field-layout="flow"] .field.field-disabled .legacy-autocomplete-input { background: var(--surface-dim); border: 1px dashed var(--line-soft); color: var(--muted); }
.field-groups[data-field-layout="flow"] .field.field-disabled > label:not(.check-field) { color: var(--line-strong); }

/* くらしーど加入。旧 EditKeiyakuInfo.Designer.vb:3879-3886 は 16pt・白抜き・ピンク地の
   帯で出していた。目立つこと自体が働きなので、文言だけ移して普通の文にはしない。 */
/* 旧 EditKeiyakuInfo.Designer.vb:3879-3886 は 16pt・白抜き・ピンク地の帯をフォーム最上部
   (482, 9) に置く。目立つ位置そのものが働きなので、DOM の並びは旧 control のまま動かさず、
   見える位置だけ枠の右上へ寄せる。字は 16pt を 96dpi 換算した 21px。書体 HGP創英角ポップ体 は
   Windows 同梱で web では出せないため太字で代える。
   画面の <p class="anshin-support"> は差し込み先が出ない条件では描かれず、実際に見えるのは
   Designer label 由来の span なので、両方を同じ帯として指定する。 */
.anshin-support, [data-legacy-static-control="lblAnshinSupport"], [data-legacy-control="lblAnshinSupport"] { position: absolute; top: 10px; right: 16px; z-index: 10; margin: 0; padding: 4px 14px; border: 1px solid var(--anshin-line); background: var(--anshin-band); color: var(--anshin-ink); font-size: 21px; font-weight: 700; letter-spacing: .06em; }

/* 帯の中の 3 つ（コード・名称・番号）は記録の名前なので、値を少し大きく出す。 */
.field-groups[data-field-layout="flow"] > .field-section[data-field-key="$base"] .field input { height: 30px; font-size: 14px; font-weight: 600; }

.field-groups[data-field-layout="flow"] .legacy-static-label { align-self: end; padding-bottom: 6px; color: var(--muted); font-size: 11px; white-space: normal; }
.field-groups[data-field-layout="flow"] .legacy-static-label.has-newline { white-space: pre-line; }
.field-grid[data-field-layout="flow"] > .field { background: none; padding: 0; }
.field-grid[data-field-layout="flow"] > .field > label { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; letter-spacing: .02em; }
.field-grid[data-field-layout="flow"] > .legacy-static-label { align-self: end; padding-bottom: 6px; color: var(--muted); font-size: 11px; white-space: normal; }
.field-grid[data-field-layout="flow"] > .legacy-static-label.has-newline { white-space: pre-line; }

/* 成約は「入力欄の束」ではなく、契約を確定する前の確認面。条件 → 請求明細 → 関係者・帳票 →
   履歴を確認してから確定するため、視覚順・DOM順・Tab順を同じ仕事順にする。 */
.seiyaku-surface .field-groups[data-field-layout="flow"] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 0; border: 1px solid var(--line); background: var(--surface); }
.seiyaku-surface .field-groups[data-field-layout="flow"] > .field-section { flex: 0 0 100%; border-bottom: 0; }
.seiyaku-surface .field-groups[data-field-layout="flow"] > .field-action { align-self: center; margin: 0; }
.seiyaku-surface .field-groups[data-field-layout="flow"] > .field-action:has([data-legacy-control="btnClose"]) { margin-left: auto; }
.seiyaku-surface [data-field-key="grp"] > .field-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 232px)); padding: 12px; border-top: 1px solid var(--line-soft); }
.seiyaku-surface [data-field-key="grp"] > .field-grid > .field:has([data-legacy-control="txtCode"]) { grid-column: auto / span 1 !important; }
.seiyaku-surface [data-field-key="grp"] > .field-grid > .field:has([data-legacy-control="txtKeiyakusya"]) { grid-column: auto / span 2 !important; }
.seiyaku-surface [data-field-key="grp"] > .field-grid > [data-legacy-static-control="lblMsg"] { grid-column: 1 / -1 !important; margin: 2px 0 0; padding: 9px 11px; border-left: 3px solid var(--teal); background: var(--teal-soft); color: var(--ink); font-size: 12px; font-weight: 700; }

/* GroupBox2 は契約条件・集計を先に確認し、その後で明細を編集する。 */
.seiyaku-surface [data-field-key="GroupBox2"] { margin: 0; border-color: var(--line-strong); }
.seiyaku-surface [data-field-key="GroupBox2"] > .field-group-heading { padding: 9px 12px; background: var(--surface-dim); }
.seiyaku-surface [data-field-key="GroupBox2"] > .seiyaku-fee-workbench { display: grid; gap: 8px; padding: 12px; }
.seiyaku-surface .seiyaku-fee-workbench .contract-fee-grid { margin: 0; }
/* 旧の明細は 15 行が表の中でスクロールせずに全部見えた（Seiyaku.Designer.vb:3058-3063）。退居と同じく高さの上限を外す（SNG-955）。 */
.seiyaku-surface .seiyaku-fee-workbench .contract-fee-grid > .sengu-record-grid { max-height: none; }
.seiyaku-surface [data-field-key="GroupBox2"] > .field-grid { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-soft); }
.seiyaku-surface [data-field-key="GroupBox2"] > .field-grid > .field-action { align-self: end; }
.seiyaku-surface [data-field-key="GroupBox2"] > .field-grid > .field:has([data-legacy-control="txtSmall"], [data-legacy-control="txtTax"], [data-legacy-control="txtTotal"], [data-legacy-control="txtTotal0"], [data-legacy-control="txtTotal10"], [data-legacy-control="txtTax10"]) { min-width: 130px; }

/* 履歴は旧 TabIndex と同じくロック解除の後に置く。 */
.seiyaku-surface [data-field-key="GroupBox3"] { margin: 0; }
.seiyaku-surface [data-field-key="GroupBox3"] > .field-grid { padding: 8px 12px; }
.seiyaku-surface [data-field-key="GroupBox3"] > .field-grid > .seiyaku-fee-history { min-height: 66px; margin: 0; padding: 10px 11px; border-top: 1px solid var(--line-soft); background: var(--surface-dim); }
.seiyaku-surface .seiyaku-fee-history-heading { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; }
.seiyaku-surface .seiyaku-fee-history small { color: var(--muted); }
.seiyaku-surface .seiyaku-fee-history-empty { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.seiyaku-surface .seiyaku-fee-history table { width: 100%; margin-top: 7px; border-collapse: collapse; font-size: 12px; }
.seiyaku-surface .seiyaku-fee-history th, .seiyaku-surface .seiyaku-fee-history td { padding: 5px 8px; border-top: 1px solid var(--line-soft); text-align: left; }
.seiyaku-surface .seiyaku-fee-history th { color: var(--muted); font-weight: 600; }

@media (max-width: 680px) {
    .seiyaku-surface .field-groups[data-field-layout="flow"] > .field-action:has([data-legacy-control="btnClose"]) { margin-left: 0; }
    .seiyaku-surface [data-field-key="grp"] > .field-grid { grid-template-columns: 1fr; }
    .seiyaku-surface [data-field-key="grp"] > .field-grid > .field:has([data-legacy-control="txtKeiyakusya"]) { grid-column: 1 !important; }
}

/* RefRoom は編集フォームではなく、物件を読み取って次の画面へ進む入口。
   旧の disabled 属性・DOM 順は保持し、物件名を要約帯に移して「入力欄の束」に見えない
   読み取り面へ寄せる。 */
.property-detail-surface .property-passport { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; padding: 20px 22px 18px; border-bottom: 1px solid var(--line); background: var(--surface-header); }
.property-passport-identity { min-width: 0; padding-left: 14px; border-left: 4px solid var(--teal); }
.property-passport-kicker { margin: 0 0 5px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.property-passport-title { margin: 0; overflow: hidden; color: var(--navy); font-size: 24px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.property-passport-room { display: inline-block; margin-left: 10px; color: var(--teal); font-size: 16px; font-weight: 700; }
/* 加入情報は物件の説明ではなく、今この契約へ取るべき対応を知らせる印。
   名称の直下に小さな「業務印」として置き、他の所在地・設備情報と混ぜない。 */
.property-passport-facts { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(76px, .4fr) minmax(180px, 1fr) minmax(150px, .8fr) minmax(64px, .3fr); gap: 10px 18px; margin: 0; }
.property-passport-facts > div { min-width: 0; }
.property-passport-facts dt { margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.property-passport-facts dd { margin: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
/* 契約情報の「くらしーど加入」帯（旧 lblAnshinSupport）と同じ赤で、加入だけを目立たせる。 */
.property-passport-facts dd.is-enrolled { width: fit-content; padding: 0 8px; border: 1px solid var(--anshin-line); border-radius: 3px; background: var(--anshin-band); color: var(--anshin-ink); }
.property-passport-actions { grid-column: 2; grid-row: 1; align-self: start; display: flex; gap: 7px; justify-content: flex-end; }
.property-passport-actions > .command { min-width: 66px; min-height: 32px; padding: 6px 10px; font-size: 12px; }
.property-passport-delete { border-color: var(--passport-delete-line); color: var(--passport-delete-ink); }
.property-passport-delete:hover { border-color: var(--passport-delete-line-hover); background: var(--passport-delete-bg-hover); color: var(--passport-delete-ink-hover); }

/* 帯で名乗ったコード・名称・部屋番号は、旧の入力欄を二重に見せない。
   要素は DOM に残るので、旧画面の操作・監査用識別子と順序は変わらない。 */
.property-detail-surface .field-groups[data-field-layout="flow"] > .field-section[data-field-key="$base"] { display: none; }
.property-detail-surface .field-groups[data-field-layout="flow"] { padding-top: 12px; }
/* 親帯が唯一の切替。旧タブ名は、選んだまとまりの中で順に読める見出しへ変える。 */
.property-detail-surface .field-tabgroup-panel { display: grid; gap: 0; padding: 2px 0 0; background: var(--surface); }
.property-detail-surface .property-tab-section { padding: 17px 0 20px; border-bottom: 1px solid var(--line); }
.property-detail-surface .property-tab-section:last-child { border-bottom: 0; }
.property-detail-surface .property-tab-section > h2 { margin: 0 0 12px; padding: 0 12px 8px; border-bottom: 2px solid var(--teal); color: var(--navy); font-size: 13px; letter-spacing: .02em; }
.property-detail-surface .property-tab-section .field-section { border-bottom: 0; }

/* 参照値を、disabled input の黄・破線ではなく帳票の値として読ませる。
   disabled は CSS ではなく Razor の既存判断に任せるため、更新可否は変えない。 */
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled > label:not(.check-field) { color: var(--muted); }
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled input[type="text"],
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled input[type="date"],
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled textarea,
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled select,
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled .legacy-autocomplete-input { min-height: 28px; padding: 2px 0 5px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; opacity: 1; }
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled textarea { min-height: 48px; resize: none; }
.property-detail-surface .field-groups[data-field-layout="flow"] .field-disabled select { appearance: none; }

/* 公共（GroupBox2）とメーカー（GroupBox1）は、旧 Designer では「行＝業種、列＝名称・TEL…」の表。
   折り返しの並べ方に任せると業種名と電話番号が別の行へ流れ、どの番号がどの業種か読めない
   （2026-09-13 レビュー）。DOM は旧 TabIndex 順（列見出し → 行見出し・値…）なので、列数を固定して
   その順のまま流し込めば表に戻る。欄ごとの「名称」「TEL」は列見出しと重なるので目には出さない。
   GroupBox1/2 は画面ごとの Designer 名なので物件詳細（refroom-surface）に限る。管理建物マスタ
   （/buildings/create を含む）の GroupBox1/2 は家主・部屋駐車場で別物。 */
.refroom-surface [data-field-key="GroupBox2"] > .field-grid,
.refroom-surface [data-field-key="GroupBox1"] > .field-grid { display: grid; gap: 4px 14px; align-items: center; padding: 8px 12px 14px; }
.refroom-surface [data-field-key="GroupBox2"] > .field-grid { grid-template-columns: 6.5em minmax(0, 1fr) minmax(8em, 12em); }
.refroom-surface [data-field-key="GroupBox1"] > .field-grid { grid-template-columns: 6.5em minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
/* 折り返しの並べ方は幅の広い欄（名称）に行を丸ごと使わせる。表では 1 セルに戻す。 */
.refroom-surface [data-field-key="GroupBox2"] > .field-grid > *,
.refroom-surface [data-field-key="GroupBox1"] > .field-grid > * { grid-column: auto / span 1 !important; }
.refroom-surface [data-field-key="GroupBox2"] > .field-grid > [data-legacy-static-control="TsLabel21"],
.refroom-surface [data-field-key="GroupBox1"] > .field-grid > [data-legacy-static-control="TsLabel18"] { grid-column: 2 !important; }
.refroom-surface [data-field-key="GroupBox2"] > .field-grid > .field > label:not(.check-field),
.refroom-surface [data-field-key="GroupBox1"] > .field-grid > .field > label:not(.check-field) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ごみの曜日 3 欄は旧でも表の外（見出しの下に横並び）。行見出し＋値の 1 行ずつにして表の列に揃える。 */
.refroom-surface [data-field-key="GroupBox2"] > .field-grid > .legacy-static-label:is([for="txtKanen"], [for="txtFunen"], [for="txtShigen"]) { grid-column: 1 !important; }
.refroom-surface [data-field-key="GroupBox2"] > .field-grid > .field:has([data-legacy-control="txtKanen"], [data-legacy-control="txtFunen"], [data-legacy-control="txtShigen"]) { grid-column: 2 / -1 !important; }

/* 写真等（旧）・写真・資料などの操作は、行いっぱいに伸ばすと見出しの帯に見えて押せると分からない。 */
.refroom-surface .field-grid[data-field-layout="flow"] .field-action > .command { width: auto; }

/* 管理建物の新規登録は、既存の詳細画面と同じ識別帯・親帯・連続見出しで入力を進める。
   色とタブの形は RefRoom / ichiran の既存トークン・共通部品だけを使う。 */
.building-create { max-width: 1440px; margin: 0 auto; }
.building-create .screen-header.property-passport { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; max-width: none; margin: 0 0 10px; padding: 20px 22px 18px; border: 1px solid var(--line); background: var(--surface-header); box-shadow: 0 2px 10px var(--panel-shadow); }
.building-create .property-passport-identity { min-width: 0; padding-left: 14px; border-left: 4px solid var(--teal); }
.building-create .property-passport-kicker { margin: 0 0 5px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.building-create .property-passport-title { margin: 0; overflow: hidden; color: var(--navy); font-size: 24px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.building-create .property-passport .record-mode { align-self: start; margin: 0; padding: 6px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 11px; }
.building-create .property-passport .record-mode b { color: var(--teal); }
.building-create .command-bar { max-width: none; }
.building-create .building-create-surface { max-width: none; }
.building-create .building-create-surface > .surface-header { display: none; }
/* 以前は物件詳細の property-detail-surface を借りて帯と見出しの並びを揃えていた。物件詳細は参照専用の
   台帳表示へ変わり（3235f84b0）、その規則が入力欄を横いっぱいの 2 列の台帳に組み替えるようになったため、
   新規登録は借りずに、帯の中の見出しの並べ方だけをここで持つ。 */
.building-create .building-create-surface .field-groups[data-field-layout="flow"] { padding-top: 12px; }
.building-create .building-create-surface .field-tabgroup-panel { display: grid; gap: 0; padding: 2px 0 0; border-top: 1px solid var(--line); background: var(--surface); }
.building-create .building-create-surface .property-tab-section { padding: 17px 0 20px; border-bottom: 1px solid var(--line); }
.building-create .building-create-surface .property-tab-section:last-child { border-bottom: 0; }
.building-create .building-create-surface .property-tab-section > h2 { margin: 0 0 12px; padding: 0 18px 8px; border-bottom: 2px solid var(--teal); color: var(--navy); font-size: 13px; letter-spacing: .02em; }
.building-create .building-create-surface .property-tab-section .field-section { border-bottom: 0; }
.building-create .building-create-surface .property-tab-section .field-group { margin-right: 18px; margin-left: 18px; }

/* 最上段（コード・名称・フリガナ）は欄ごとに別の枠として外側の折り返しグリッドに並ぶ。枠の中も折り返しの
   列幅（1 列 190px 以上）で組むと、2 列ぶんの名称・フリガナが 1 枠からはみ出す（2026-09-15 UI レビュー、
   幅 1419px で txtFurigana が右端を越えた）。枠の中は 1 列にし、広い欄は外側で 2 枠ぶん取る。
   旧 Designer の空ラベル（wb）だけの枠は、何も無い 1 枠ぶんの隙間になるので詰める。 */
.building-create .building-create-surface .field-groups[data-field-layout="flow"] > .field-section[data-field-key="$base"] > .field-grid { grid-template-columns: minmax(0, 1fr); }
.building-create .building-create-surface .field-groups[data-field-layout="flow"] > .field-section[data-field-key="$base"] > .field-grid > * { grid-column: 1 / -1 !important; }
.building-create .building-create-surface .field-groups[data-field-layout="flow"] > .field-section[data-field-key="$base"]:has([data-field-span="2"], [data-field-span="3"]) { grid-column: span 2; }
.building-create .building-create-surface .field-groups[data-field-layout="flow"] > .field-section[data-field-key="$base"]:not(:has(.field)) { display: none; }

/* 部屋・駐車場（GroupBox2）は保存済み建物に物件を足す枠で、中身は新規登録では出していない。
   ガイドライン（GroupBox17）は旧で手数料の計算式を並べた説明文の枠だが、この画面では説明文を描いておらず
   見出しだけが残る。どちらも見出しだけの枠は入力が要るように見えるので出さない（旧と違う: 枠を表示しない）。 */
.building-create .building-create-surface [data-field-key="GroupBox2"],
.building-create .building-create-surface [data-field-key="GroupBox17"] { display: none; }

/* メーカー（GroupBox7）と公共（GroupBox10）は旧 Designer では「行＝業種、列＝名称・担当…」の表。
   折り返しに任せると業種名が前の行の末尾に付いて、どの欄がどの業種か読めない（物件詳細と同じ問題）。
   DOM は旧 TabIndex 順（行見出し → その行の欄…）なので、行見出しを 1 列目、各行の最初の欄を 2 列目に
   固定すれば表に戻る。欄ごとの名前（名称・担当・TEL…）は読み上げのためにそのまま見せる。
   この枠はタブの中の入れ子の field-grid で、折り返しの規則が flex にするので display: grid を明示する。 */
.building-create .building-create-surface [data-field-key="GroupBox7"] > .field-grid,
.building-create .building-create-surface [data-field-key="GroupBox10"] > .field-grid { display: grid; gap: 6px 14px; align-items: end; padding: 8px 12px 14px; }
.building-create .building-create-surface [data-field-key="GroupBox7"] > .field-grid { grid-template-columns: 7.5em minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.building-create .building-create-surface [data-field-key="GroupBox10"] > .field-grid { grid-template-columns: 7.5em minmax(0, 1fr) minmax(8em, 12em); }
.building-create .building-create-surface [data-field-key="GroupBox7"] > .field-grid > *,
.building-create .building-create-surface [data-field-key="GroupBox10"] > .field-grid > * { grid-column: auto / span 1 !important; }
.building-create .building-create-surface [data-field-key="GroupBox7"] > .field-grid > .legacy-static-label,
.building-create .building-create-surface [data-field-key="GroupBox10"] > .field-grid > .legacy-static-label { grid-column: 1 !important; padding-bottom: 8px; }
.building-create .building-create-surface [data-field-key="GroupBox7"] > .field-grid > .field:has([id^="txtName"], #cmbHokenKanyu),
.building-create .building-create-surface [data-field-key="GroupBox10"] > .field-grid > .field:has(#txtDenki, #txtSuido, #txtGas, #txtYakusyo, #txtNTT, #txtSeisou) { grid-column: 2 !important; }
.building-create .building-create-surface [data-field-key="GroupBox10"] > .field-grid > .field:has(#txtKanen, #txtFunen, #txtShigen) { grid-column: 2 / -1 !important; }
/* 更新情報・保険加入状況は、枠の題や行見出しが欄の名前と同じなので、欄の名前は読み上げにだけ渡す。 */
.building-create .building-create-surface label[for="txtKoushinInfo"],
.building-create .building-create-surface label[for="cmbHokenKanyu"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 720px) {
    .building-create .screen-header.property-passport { grid-template-columns: 1fr; padding: 16px; }
    .building-create .property-passport-title { font-size: 20px; white-space: normal; }
    .building-create .property-passport .record-mode { justify-self: start; }
    .building-create .building-create-surface .property-tab-section .field-group { margin-right: 10px; margin-left: 10px; }
}

.field { position: relative; min-width: 0; padding: 9px 11px 8px; background: #fff; }
.field > label:not(.check-field) { display: block; overflow: hidden; margin-bottom: 4px; color: var(--label); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.field > label:not(.check-field).has-newline { white-space: pre-line; }
.legacy-required-label { color: #d60000 !important; font-weight: bold !important; }
.field input[type="text"], .field input[type="date"], .field textarea, .field select, .field .legacy-autocomplete-input {
    width: 100%;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--line-strong);
    border-radius: var(--control-radius);
    background: #fff;
    color: var(--ink);
}
.field-control-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.field-control-line > input, .field-control-line > select, .field-control-line > textarea, .field-control-line > .legacy-autocomplete { flex: 1 1 auto; min-width: 0; }
.legacy-autocomplete { position: relative; }
.legacy-autocomplete-input { width: 100%; }
.legacy-autocomplete-candidates { position: absolute; z-index: 3; top: calc(100% + 1px); right: 0; left: 0; max-height: 220px; margin: 0; padding: 2px 0; overflow-y: auto; border: 1px solid var(--line-strong); background: #fff; box-shadow: 0 3px 8px rgb(var(--shadow-rgb) / .18); list-style: none; }
.legacy-autocomplete-candidates button { display: block; width: 100%; padding: 5px 8px; border: 0; background: transparent; color: var(--ink); text-align: left; }
.legacy-autocomplete-candidates button:hover, .legacy-autocomplete-candidates button:focus-visible, .legacy-autocomplete-candidates button.is-active { background: var(--teal-soft); outline: 0; }
.legacy-autocomplete-match { padding: 0; background: yellow; color: inherit; }
.field-control-line > input.number-input { text-align: right; }
.legacy-number-spin { display: inline-grid; grid-template-rows: 1fr 1fr; width: 18px; align-self: stretch; }
.legacy-number-spin button { min-height: 10px; padding: 0; border: 1px solid var(--line); background: var(--surface); }
.legacy-number-spin-up::before { content: "▲"; font-size: 8px; }
.legacy-number-spin-down::before { content: "▼"; font-size: 8px; }
.legacy-tab-parity-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.field-unit { flex: 0 0 auto; color: var(--label); font-size: 10px; font-weight: 700; white-space: nowrap; }
.field textarea { min-height: 70px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .field .legacy-autocomplete-input:focus { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); outline: 2px solid var(--teal); outline-offset: 1px; }
.field-disabled { background: var(--disabled); }
.field-disabled input[type="text"], .field-disabled input[type="date"], .field-disabled textarea, .field-disabled select, .field-disabled .legacy-autocomplete-input { background: #fff9d9; border-color: #d3c169; color: #596166; }
[data-rendered-visible="false"] { display: none !important; }
.field-invalid { background: var(--danger-soft); }
.field-invalid input, .field-invalid textarea, .field-invalid select, .field-invalid .legacy-autocomplete-input { border-color: var(--danger); }
.check-field { display: flex; align-items: center; gap: 8px; min-height: 50px; color: var(--label); font-size: 11px; font-weight: 700; white-space: nowrap; }
.check-field.has-newline { white-space: pre-line; }
.check-field input { width: 18px; height: 18px; accent-color: var(--teal); }
.field-meta { display: flex; align-items: center; gap: 4px; min-height: 19px; margin-top: 4px; color: var(--muted); font-size: 9px; }
.field-meta span { margin-right: auto; }

/* ClaimEx の物件選択は候補を確定するまで管理物件として扱わない。候補外の文字を入れた直後に
   地区や受付番号が残ると、管理外のリクエストへ別物件の担当者を保存してしまうため。 */
.claim-building-selector { position: relative; min-width: min(100%, 28rem); }
/* SNG-774: リクエスト入力は操作説明・警告を含め 12px 未満にしない。 */
.claim-request .edit-surface .field > label:not(.check-field),
.claim-request .edit-surface .check-field,
.claim-request .edit-surface .field-meta,
.claim-request .edit-surface .field-unit,
.claim-request .edit-surface .legacy-static-label,
.claim-request .edit-surface .field-tabset .field-tab { font-size: 12px; }
.claim-building-selector > label { font-size: 13px !important; }
.claim-building-selector-control { position: relative; display: flex; gap: 5px; align-items: center; }
.claim-building-selector-control > input { flex: 1 1 auto; min-width: 0; min-height: 36px; font-size: 14px; }
.claim-building-selector-control.is-unavailable > input { background: var(--disabled); color: var(--muted); cursor: not-allowed; }
.claim-building-unavailable-tip { position: relative; display: inline-flex; }
.claim-building-unavailable-tip button[aria-disabled="true"] { cursor: not-allowed; opacity: .65; }
.claim-building-tooltip { position: absolute; z-index: 8; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: 260px; padding: 6px 8px; background: var(--claim-tooltip-bg); color: var(--surface); font-size: 12px; line-height: 1.4; opacity: 0; pointer-events: none; }
.claim-building-unavailable-tip:hover .claim-building-tooltip, .claim-building-unavailable-tip:focus-within .claim-building-tooltip, .claim-building-selector-control.is-unavailable:hover .claim-building-tooltip, .claim-building-selector-control.is-unavailable:focus-within .claim-building-tooltip { opacity: 1; }
.claim-building-candidates { position: absolute; z-index: 7; top: calc(100% + 2px); right: 0; left: 0; max-height: 220px; margin: 0; padding: 2px 0; overflow-y: auto; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 3px 8px var(--claim-candidates-shadow); list-style: none; }
.claim-building-candidates button { display: grid; grid-template-columns: 6.5em 1fr; width: 100%; gap: 8px; padding: 7px 9px; border: 0; background: var(--surface); color: var(--ink); text-align: left; font-size: 14px; }
.claim-building-candidates button:hover, .claim-building-candidates button.is-active { background: var(--teal-soft); }
.claim-building-candidates code { color: var(--muted); font-size: 12px; }
.claim-building-candidates small { display: block; color: var(--muted); font-size: 12px; }
.claim-building-no-candidate, .claim-building-unmanaged-notice { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.claim-building-no-candidate { padding: 7px 9px; color: var(--muted); }
.claim-building-unmanaged-notice { color: var(--claim-unmanaged-ink); font-weight: 700; }

/* 物件詳細は「編集できない入力欄の集合」ではなく、物件票として読む。
   旧 control の順・対応点は Razor に残したまま、表示の単位をラベルと値の一行へ切り替える。
   罫線はセクション単位にだけ使い、項目をカードの群れにしない。 */
.property-detail-surface .field-groups[data-field-layout="flow"] { display: block; padding: 0; }
.property-detail-surface .field-groups[data-field-layout="flow"] > .field-tabset { display: block; margin: 0; }
.property-detail-surface .field-groups[data-field-layout="flow"] > .field-section[data-field-key="$base"] { display: none; }
.property-detail-surface .field-grid[data-field-layout="flow"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    overflow: visible;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-bottom: 0;
}
.property-detail-surface .field-grid[data-field-layout="flow"] > .field.property-field { min-width: 0; padding: 0; background: transparent; border: 0; }
.property-detail-surface .field-grid[data-field-layout="flow"] > .field.property-field[data-field-span="2"],
.property-detail-surface .field-grid[data-field-layout="flow"] > .field.property-field[data-field-span="3"],
.property-detail-surface .field-grid[data-field-layout="flow"] > .field-child-group,
.property-detail-surface .field-grid[data-field-layout="flow"] > .field-action,
.property-detail-surface .field-grid[data-field-layout="flow"] > .legacy-static-label { grid-column: 1 / -1 !important; }
.property-field-row {
    display: grid;
    grid-template-columns: minmax(7.25rem, .72fr) minmax(0, 1.28fr);
    align-items: stretch;
    min-height: 43px;
    border-bottom: 1px solid var(--line-soft);
}
.property-field-label {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--label);
    background: var(--surface-dim);
    border-right: 1px solid var(--line-soft);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.property-field-value {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5em;
    align-items: center;
    min-width: 0;
    padding: 8px 12px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}
.property-field-value > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.property-field-value.is-numeric > span:first-child { text-align: right; font-variant-numeric: tabular-nums; }
.property-field-unit { padding-left: 7px; color: var(--label); font-size: 12px; font-weight: 600; white-space: nowrap; }
.property-detail-surface .field-group { margin: 16px 0; border: 1px solid var(--line); background: var(--surface); }
.property-detail-surface .field-group > .field-group-heading { padding: 9px 12px; border-bottom: 2px solid var(--teal); background: var(--surface-header); color: var(--navy); font-size: 13px; }
.property-detail-surface .field-group .field-group { margin: 0; border-width: 1px 0 0; }
.property-detail-surface .legacy-static-label {
    display: block;
    min-height: 35px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-header);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.property-detail-surface .field-grid[data-field-layout="flow"] .field-action { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.property-detail-surface .field-grid[data-field-layout="flow"] .field-action > .command { width: auto; }

/* ヘッダーも物件票の一部。住所や長い物件名を1行で切らず、操作は値より先に幅を奪わない。 */
.property-detail-surface .property-passport { grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; padding: 22px 24px 20px; }
.property-passport-title { display: -webkit-box; overflow: visible; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: clip; }
.property-passport-facts { grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: 12px 20px; }
.property-passport-actions { flex-wrap: wrap; }
.property-passport-delete { margin-left: 8px; }
/* 物件名・部屋番号・閉じるは下まで読んでも上に残す（SNG-820）。隣の部屋と賃料を比べるとき、
   閉じるを押すために毎回上まで戻っていた。上に付いている間は所在地などの行を畳み、本文の高さを空ける。
   top は .workbench の上余白ぶん負にする。0 だと余白の帯に本文が流れて透ける。 */
.property-detail-surface .property-passport { position: sticky; top: calc(-1 * var(--workbench-top-padding, 0px)); z-index: 30; container-type: scroll-state; }
@container scroll-state(stuck: top) {
    .property-passport-facts { display: none; }
}
.legacy-static-label { align-self: center; min-width: 0; color: var(--ink); font-size: 12px; line-height: 1.35; white-space: nowrap; }
.legacy-static-label.has-newline,
.field-unit.has-newline,
.property-field-label.has-newline,
.property-field-unit.has-newline { white-space: pre-line; }
.legacy-static-label[aria-disabled="true"] { color: var(--muted); }
.field-action { min-width: 0; }
.field-action > .command { width: 100%; white-space: nowrap; }

/* 社員・銀行だけが明示する modern-form。旧座標の px ではなく「caption の列・値の列」を持つまとまりを
   左から並べる。data-field-layout が無い既存画面は共通 field-grid のままなので、見た目をここから変えない。
   列・行・order は MasterModernFormLayout が要素ごとの CSS 変数で渡し、面の幅だけを container query が決める。
   共通の 760px 規則（.field-grid > .field { grid-column: 1 !important }）より強い詳細度で指定する。 */
.field-groups[data-field-layout="modern-form"] { display: grid; gap: 14px; padding: 14px 18px 20px; container-type: inline-size; }
.field-groups[data-field-layout="modern-form"] > .field-section { border-bottom: 0; }
.field-groups[data-field-layout="modern-form"] .field-group { margin: 0; border-color: var(--line); border-radius: var(--control-radius); overflow: clip; }
.field-groups[data-field-layout="modern-form"] .field-group-untitled { border-color: var(--line-soft); }
.field-groups[data-field-layout="modern-form"] .field-group > .field-group-heading { padding: 9px 14px; border-bottom-color: var(--line); background: var(--surface-dim); font-size: 13px; }
/* まとまりごとに [caption の列][値の列][余白の列]。値の列は中身の幅まで広がり、余った幅は余白の列が分け合う。 */
/* --modern-column・--modern-row は子要素へ継承される。配置を持たない直下の要素が、外側の子グループの枠の行番号を
   受け継いで他の部品と重ならないよう、field-grid ごとに既定値へ戻す。 */
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"] { --modern-column: 1 / -1; --modern-row: auto; width: 100%; grid-template-columns: repeat(var(--modern-clusters, 1), max-content fit-content(100%) minmax(2rem, 1fr)); grid-auto-rows: auto; align-items: center; gap: 8px 12px; padding: 16px 18px 18px; overflow-x: visible; background: transparent; }
.field-groups[data-field-layout="modern-form"] .field-section > .field-grid[data-field-layout="modern-form"] { padding: 0; }
/* 担当グループのような選択肢の表は、旧の x が同じものを同じ列に置く。 */
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"][data-modern-grid="matrix"] { grid-template-columns: repeat(var(--modern-matrix-columns, 1), max-content); justify-content: start; gap: 6px 22px; }
/* 各列を上から下へ Tab する項目表は、caption と値を別々の cell に置く。行で包まないため、見た目の横並びと
   元の縦Tab順を両立できる。 */
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"][data-modern-grid="vertical-table"] { grid-template-columns: repeat(var(--modern-table-columns, 1), max-content fit-content(100%)); justify-content: start; gap: 8px 12px; }
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"] > * { grid-column: var(--modern-column, 1 / -1) !important; grid-row: var(--modern-row, auto) !important; min-width: 0; }
.field-groups[data-field-layout="modern-form"] .modern-run { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.field-groups[data-field-layout="modern-form"] .modern-run[data-modern-run="choice"] { column-gap: 22px; }
.field-groups[data-field-layout="modern-form"] .modern-run > * { flex: 0 0 auto; max-width: 100%; }
.field-groups[data-field-layout="modern-form"] .field { min-width: 0; padding: 0; background: transparent; }
.field-groups[data-field-layout="modern-form"] .field > label:not(.check-field) { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.25; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.field-groups[data-field-layout="modern-form"] .field > label[hidden] { display: none; }
/* 幅は固定長で渡し、上限だけを % にする。% の幅だと列の大きさを決めるときに中身の幅として数えられない。 */
.field-groups[data-field-layout="modern-form"] .field-control-line { width: var(--modern-input-width, 18rem); max-width: 100%; min-width: 0; }
.field-groups[data-field-layout="modern-form"] .field-control-line > input,
.field-groups[data-field-layout="modern-form"] .field-control-line > select,
.field-groups[data-field-layout="modern-form"] .field-control-line > textarea,
.field-groups[data-field-layout="modern-form"] .field-control-line > .legacy-autocomplete { min-width: 0; }
.field-groups[data-field-layout="modern-form"] .field input[type="text"],
.field-groups[data-field-layout="modern-form"] .field input[type="date"],
.field-groups[data-field-layout="modern-form"] .field select,
.field-groups[data-field-layout="modern-form"] .field .legacy-autocomplete-input { min-height: 28px; padding: 2px 6px; }
.field-groups[data-field-layout="modern-form"] .check-field { min-height: 30px; gap: 6px; }
/* checkbox の既定の左 margin（4px）だけ、選択肢が caption・入力の左端より右へずれる。 */
.field-groups[data-field-layout="modern-form"] .check-field > input { margin-inline-start: 0; }
.field-groups[data-field-layout="modern-form"] .field-meta { display: none; }
.field-groups[data-field-layout="modern-form"] .legacy-static-label { min-width: 0; color: var(--label); font-size: 11px; font-weight: 700; line-height: 1.25; overflow: visible; text-overflow: clip; white-space: nowrap; }
/* 入力不可の入力の項目名は、変更前（入力の中に項目名を描いていた）の .field-disabled > label と同じ色にする。 */
.field-groups[data-field-layout="modern-form"] .legacy-static-label[data-owner-disabled="true"] { color: var(--line-strong); }
.field-groups[data-field-layout="modern-form"] .modern-run > .staff-license-file { margin: 0; padding: 2px 8px; }
/* 画面が枠の見出しの直後・入力の直後へ差し込む部品（銀行の支店一覧とクリア・更新・削除）。 */
.field-groups[data-field-layout="modern-form"] .field-group > .embedded-grid { margin: 14px 18px 0; }
.field-groups[data-field-layout="modern-form"] .modern-group-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; }
.field-groups[data-field-layout="modern-form"] .field-disabled { background: transparent; }
.field-groups[data-field-layout="modern-form"] .field-disabled input[type="text"],
.field-groups[data-field-layout="modern-form"] .field-disabled input[type="date"],
.field-groups[data-field-layout="modern-form"] .field-disabled textarea,
.field-groups[data-field-layout="modern-form"] .field-disabled select,
.field-groups[data-field-layout="modern-form"] .field-disabled .legacy-autocomplete-input { background: var(--surface-dim); border-style: dashed; border-color: var(--line-soft); color: var(--muted); }
.field-groups[data-field-layout="modern-form"] .field-action > .command { width: auto; }

/* 工事台帳は、工事内容を確認しながら発注・請求まで進める作業面。旧フォームの座標由来の
   空白をなくし、現場の工事台帳らしく「見出しの帯 → 記入面 → 明細」という骨格を強める。
   ここは EditKouji のみの opt-in なので、同じ共通 editor を使う他画面には波及しない。 */
.kouji-editor {
    --kouji-blue: var(--navy);
    --kouji-blue-soft: var(--row-selected);
    --kouji-amber: var(--focus);
    --kouji-amber-soft: var(--disabled);
}
.kouji-editor .page-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto 12px;
    padding: 22px 24px 18px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--kouji-blue);
    background: linear-gradient(105deg, var(--surface) 0%, var(--surface-dim) 68%, var(--kouji-blue-soft) 100%);
}
.kouji-editor .page-header h1 { margin: 2px 0 3px; color: var(--kouji-blue); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .08em; }
.kouji-editor .page-header p { margin: 0; color: var(--muted); }
.kouji-page-kicker { color: var(--kouji-blue) !important; font: 700 10px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .12em; }
.kouji-record-state { flex: 0 0 auto; padding: 5px 9px !important; border: 1px solid var(--line-warm); background: var(--kouji-amber-soft); color: var(--kouji-amber) !important; font: 700 11px/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: nowrap; }
.kouji-editor .edit-surface { max-width: 1440px; border-color: var(--line); box-shadow: 0 5px 18px color-mix(in srgb, var(--navy) 8%, transparent); }
.kouji-editor .edit-surface .field-groups[data-field-layout="modern-form"] { gap: 0; padding: 0; background: var(--surface); }
.kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist { padding: 0 14px; background: var(--kouji-blue); }
.kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist::after { display: none; }
.kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab { min-height: 40px; padding: 10px 16px 8px; color: var(--line-soft); font-size: 13px; }
.kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab:hover { background: color-mix(in srgb, var(--surface) 8%, transparent); color: var(--surface); }
.kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab.selected { border-bottom-color: var(--disabled); background: color-mix(in srgb, var(--surface) 12%, transparent); color: var(--surface); }
.kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab:focus-visible { outline-color: var(--focus); }
.kouji-editor .edit-surface .field-tabpanel { border-top: 3px solid var(--disabled); }
.kouji-editor .edit-surface .field-grid[data-field-layout="modern-form"] { gap: 12px 16px; padding: 20px 24px 24px; }
.kouji-editor .edit-surface .field { min-height: 30px; }
.kouji-editor .edit-surface .field-control-line { width: min(var(--modern-input-width, 18rem), 100%); }
.kouji-editor .edit-surface .field input[type="text"],
.kouji-editor .edit-surface .field input[type="date"],
.kouji-editor .edit-surface .field select,
.kouji-editor .edit-surface .field .legacy-autocomplete-input { min-height: 32px; border-color: var(--line-strong); background: var(--surface); }
.kouji-editor .edit-surface .field textarea { min-height: 112px; border-color: var(--line-strong); background: var(--surface); }
.kouji-editor .edit-surface .legacy-static-label { color: var(--kouji-blue); font-size: 12px; }
.kouji-editor .edit-surface .field-disabled input[type="text"],
.kouji-editor .edit-surface .field-disabled input[type="date"],
.kouji-editor .edit-surface .field-disabled textarea,
.kouji-editor .edit-surface .field-disabled select,
.kouji-editor .edit-surface .field-disabled .legacy-autocomplete-input { background: var(--surface-dim); border-color: var(--line-soft); }
.kouji-editor .edit-surface .embedded-grid { margin: 0; border-top: 1px solid var(--line); }
.kouji-editor .edit-surface .embedded-grid[data-yosan-record-grid="true"]::before { content: "発注先・工事明細"; display: block; padding: 8px 24px; border-bottom: 1px solid var(--line); background: var(--kouji-blue-soft); color: var(--kouji-blue); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.kouji-editor .edit-surface .sengu-record-grid-head { background: var(--kouji-blue); }
.kouji-editor .edit-surface .sengu-record-grid-row.selected { outline-color: var(--kouji-amber); }
@media (max-width: 760px) {
    .kouji-editor .page-header { align-items: start; flex-direction: column; padding: 18px; }
    .kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist { padding: 0 4px; }
    .kouji-editor .edit-surface .field-tabset:not(:where(.field-tabset .field-tabset)) > .field-tablist > .field-tab { padding-inline: 11px; }
    .kouji-editor .edit-surface .field-grid[data-field-layout="modern-form"] { padding: 16px; }
}

/* Why: 支払指示・支払確定の検索欄（旧 Panel1、幅 972px）を旧座標の 24 列に置くと、狭い旧枠に長い文言を持つ
   「支払指示書」「支払元で絞り込む場合は選択してください →」が 24 列すべての最小幅を 68px・64px へ押し上げ、
   欄の幅が 1,657px・1,561px になる。1,280px 幅（左メニューを開く）の本文は約 920px しかなく、検索・閉じる・
   一般／工事／敷金精算が欄の横スクロールの先に隠れた。一覧は検索を押すまで空なので、利用者は横に送って検索を
   探すしかなかった（SNG-874、2026-09-26、bUnit 描画＋app.css の静的ページで計測）。
   DOM 順（Tab 順・読み上げ順）は旧のまま、見える並びだけを折り返す。 */
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; padding: 2px 14px 12px; overflow-x: visible; background: var(--surface); }
/* 行の間は row-gap ではなく各欄の上の余白で空ける。下の改行（高さ 0 の ::after）の行にも row-gap が付き、
   組の前だけ行間が 2 倍になるため。 */
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > * { margin-top: 10px; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field { padding: 0; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field-action > .command { width: auto; }
/* Why: 折り返しの並びでは欄が入力欄の既定の幅（約 182px）まで縮み、選んだ業者名・部課名・支払元が欄の中で切れた
   （SNG-874。手元 DB の業者名 21,623 件のうち 3,393 件が 12 字を超える）。各欄の data-legacy-width（旧 Designer の幅。
   cmbBuka 264・cmbKamoku 190・cmbGyousya 460 は ShiharaiShiji.Designer.vb:275,180,225、cmbBuka・cmbMoto 285 は
   ShiharaiKeiri.Designer.vb:246,135、dateYM・cmbFind 74、txtDay 49）を下限の元にする。旧の字は 9pt（12px）で、
   欄に入る全角の字数は 旧の幅 ÷ 12。web の入力欄の字は 14px なので、旧の幅をそのまま下限にすると旧より 1〜5 字
   少なくなる。同じ字数が入るよう 旧の幅 × 14 ÷ 12 に入力欄の左右の余白と枠 18px を足した幅（切り上げ）を下限にする。
   候補一覧（.legacy-autocomplete-candidates）は入力欄の左右いっぱいに開くので、同じ幅になる。
   欄ごとに旧の幅を下回らないことは Sng874PaymentSearchLayoutTests が確かめる。 */
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field[data-legacy-width="49"] { min-width: 76px; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field[data-legacy-width="74"] { min-width: 105px; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field[data-legacy-width="190"] { min-width: 240px; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field[data-legacy-width="264"] { min-width: 326px; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field[data-legacy-width="285"] { min-width: 351px; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid > .field[data-legacy-width="460"] { min-width: 555px; }
/* Why: 折り返しの並びは DOM の順（Tab 順）に従い、行の終わりに入りきらない欄だけが次の行の左端へ落ちる。
   旧で隣り合う組が別の行に分かれないよう、DOM は動かさず order で並べ替え、組の前で行を改める（::after・::before を
   幅 100% の改行にする）。支払指示の組（選択肢 3 つと 検索・閉じる）は 555px 未満なので途中で分かれない。支払確定の
   Label3・支払元・Label4 の組は約 850px あり、検索欄がそれより狭い幅（左メニューを開いた 1,100〜1,200px の窓）では
   Label4 だけが次の行へ落ちる。それでも Label3 の矢印は支払元のすぐ左に残る。
   - 支払指示: 旧は 一般・工事・敷金精算 の下に 検索・閉じる を並べた右端のひとまとまりにする（ShiharaiShiji.Designer.vb:
     130,139 の 検索 793,26・閉じる 889,26 と、一般 793,6・工事 846,6・敷金精算 899,6）。部課 326px・支払先 555px の幅
     しだいで 閉じる だけ（1,280px・1,536px など）や 敷金精算 だけ（1,366px）が次の行の左端へ落ちた。選択肢の前で行を
     改め、選択肢 3 つと 検索・閉じる を 1 行に並べる。
   - 支払確定: 旧は「支払元で絞り込む場合は選択してください →」（Label3）・支払元（cmbMoto）・「※無指定時は、事業部全体が
     表示されます」（Label4）を横に並べ（ShiharaiKeiri.Designer.vb の 77,34／301,31／592,34）、検索・指示⇒実績・
     チェックリスト・閉じる を 1 行に並べる（592,3／689,3／785,3／889,3）。Label3 だけが前の行の右端に残って矢印が
     何も無い所を指し、Label4 は 閉じる の後ろに出た。Label3 の前と 検索 の前で行を改める。 */
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="cmbGyousya"])::after,
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="Label4"])::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="Label4"])::before { content: ""; order: 3; flex-basis: 100%; height: 0; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="cmbGyousya"]) > .field:has([data-legacy-control="optIppan"], [data-legacy-control="optKouji"], [data-legacy-control="optShikikinSeisan"]),
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="cmbGyousya"]) > .field-action:has([data-legacy-control="btnFind"], [data-legacy-control="btnClose"]),
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="Label4"]) > .field-action:has([data-legacy-control="Label3"], [data-legacy-control="Label4"]),
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="Label4"]) > .field:has([data-legacy-control="cmbMoto"]) { order: 2; }
.shiharai-search .field-group[data-field-key="Panel1"] > .field-grid:has([data-legacy-control="Label4"]) > .field-action:has([data-legacy-control="btnFind"], [data-legacy-control="btnCopy"], [data-legacy-control="btnPrint"], [data-legacy-control="btnClose"]) { order: 4; }

/* 8 まとまり以上は 430px の積が 3,440px を超え、実在する画面幅では横に並びきらない。幅を問わず積む。
   ここに規則が無いと、工事台帳で画面の状態により見えるラベルが増えて 8 まとまりになった工事だけ、
   8 まとまりを横へ並べたまま描き、項目が散らばって読めなかった（SNG-821、工事ID 140746）。 */
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count]:not([data-modern-cluster-count="3"], [data-modern-cluster-count="4"], [data-modern-cluster-count="5"], [data-modern-cluster-count="6"], [data-modern-cluster-count="7"]) { grid-template-columns: max-content minmax(0, 1fr); }
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count]:not([data-modern-cluster-count="3"], [data-modern-cluster-count="4"], [data-modern-cluster-count="5"], [data-modern-cluster-count="6"], [data-modern-cluster-count="7"]) > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count]:not([data-modern-cluster-count="3"], [data-modern-cluster-count="4"], [data-modern-cluster-count="5"], [data-modern-cluster-count="6"], [data-modern-cluster-count="7"]) > [data-modern-area="caption"] { grid-column: 1 !important; }
.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count]:not([data-modern-cluster-count="3"], [data-modern-cluster-count="4"], [data-modern-cluster-count="5"], [data-modern-cluster-count="6"], [data-modern-cluster-count="7"]) > [data-modern-area="value"] { grid-column: 2 !important; }
/* 1 まとまり当たり 430px（社員の 2 まとまりで既存の 860px）を必要幅とする。3〜7 まとまりの
   旧定義では、この積で折り返す。画面名ではなく、配置計算が出したまとまり数だけを見る。 */
@container (max-width: 3010px) {
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="7"] { grid-template-columns: max-content minmax(0, 1fr); }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="7"] > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="7"] > [data-modern-area="caption"] { grid-column: 1 !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="7"] > [data-modern-area="value"] { grid-column: 2 !important; }
}
@container (max-width: 2580px) {
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="6"] { grid-template-columns: max-content minmax(0, 1fr); }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="6"] > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="6"] > [data-modern-area="caption"] { grid-column: 1 !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="6"] > [data-modern-area="value"] { grid-column: 2 !important; }
}
@container (max-width: 2150px) {
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="5"] { grid-template-columns: max-content minmax(0, 1fr); }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="5"] > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="5"] > [data-modern-area="caption"] { grid-column: 1 !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="5"] > [data-modern-area="value"] { grid-column: 2 !important; }
}
@container (max-width: 1720px) {
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="4"] { grid-template-columns: max-content minmax(0, 1fr); }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="4"] > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="4"] > [data-modern-area="caption"] { grid-column: 1 !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="4"] > [data-modern-area="value"] { grid-column: 2 !important; }
}
@container (max-width: 1290px) {
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="3"] { grid-template-columns: max-content minmax(0, 1fr); }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="3"] > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="3"] > [data-modern-area="caption"] { grid-column: 1 !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"])[data-modern-cluster-count="3"] > [data-modern-area="value"] { grid-column: 2 !important; }
}

/* 左右 1〜2 まとまりは既存の 860px 規則を保つ。これより狭い面では、まとまりを縦に積む。 */
@container (max-width: 860px) {
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) { grid-template-columns: max-content minmax(0, 1fr); }
    /* 積む順は DOM（旧 TabIndex）順のまま。order で左のまとまりを先に並べると、左右を交互に進む Tab が
       ページの上下を往復する。 */
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > [data-modern-area="caption"] { grid-column: 1 !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > [data-modern-area="value"] { grid-column: 2 !important; }
}

/* さらに狭い面では caption を値の上に置き、値に面の幅を渡す。 */
@container (max-width: 480px) {
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 12px 8px; }
    .field-groups[data-field-layout="modern-form"] .field-group > .embedded-grid { margin: 12px 8px 0; }
    .field-groups[data-field-layout="modern-form"] .modern-group-actions { padding: 0 8px 12px; }
    .field-groups[data-field-layout="modern-form"] .field-section > .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) { padding: 0; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > [data-modern-area] { grid-column: 1 / -1 !important; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > [data-modern-area="caption"] { margin-top: 8px; white-space: normal; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > .field-child-group { margin-block: 8px 4px; }
    .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"][data-modern-grid="matrix"] { column-gap: 12px; padding: 12px; }
}

@media (max-width: 560px) {
    .field-groups[data-field-layout="modern-form"] { gap: 10px; padding: 10px; }
}

/* 定期請求は旧座標を共通の24列へ写さず、一覧と入力の二つの業務枠へ組み直す。
   teiki-demand-surface から始め、入金のほかの画面が使う field-grid / command-bar へ波及させない。 */
section.edit-surface.teiki-demand-surface {
    max-width: 1180px;
    margin: 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}
/* 処理結果と削除の確認の枠も、カードの面と同じ幅にそろえる（共通の .notice・.confirmation は 1440px で、
   広い画面ではカードの左右からはみ出す）。どちらも本文の section より前の兄弟なので :has で後ろを見る。 */
.notice:has(~ .edit-surface.teiki-demand-surface),
.confirmation:has(~ .edit-surface.teiki-demand-surface) { max-width: 1180px; }
.teiki-demand-editor {
    display: grid;
    min-width: 0;
    gap: 14px;
}
.teiki-demand-card {
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface);
}
.teiki-demand-card > h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin: 0;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-dim);
    color: var(--navy);
    font-size: 13px;
}
.teiki-demand-card > h2 small { color: var(--muted); font-size: 12px; font-weight: 400; }
.teiki-demand-card-body { min-width: 0; padding: 14px 14px 16px; }

.teiki-demand-list-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.teiki-demand-list-tools > p { margin: 0; color: var(--muted); font-size: 12px; }
.teiki-demand-list-tools > p strong { color: var(--ink); }
/* Why: 更新は選択行、削除はチェック行が対象なので、削除をチェック欄と同じ一覧側に置く。
   赤は共通の .command.danger に任せ、ここでは一覧の上に置く小さめの大きさだけを決める。 */
.teiki-demand-delete-action > .command {
    width: auto;
    min-height: 30px;
    padding: 3px 10px;
    font-size: 13px;
}
.teiki-demand-list-scroll > section { margin: 0; }
/* 一覧の字はモック（teikidemand-mock.html の table.list）と同じ 13px。列幅は EditTeikiDemandGrid が em で渡すので、
   この大きさが 1em になる（見出しと行は同じ一覧の字を受け継ぐため、見出しと列はずれない）。
   行へ焦点を移して送ったとき、行が固定の見出しの下に隠れないよう、送りの上端を見出しの高さ（13px の字で 34.5px）だけ空ける。 */
.teiki-demand-list-scroll .sengu-record-grid { width: 100%; max-width: none; font-size: 13px; scroll-padding-top: 35px; }
.teiki-demand-list-scroll .sengu-record-grid { max-height: min(22rem, 45vh); }
/* 見出しと行の最小幅は共通の max-content のまま（固定の px を列の最小幅の合計より小さくすると、表の内幅が
   足りないとき見出しの紺と行の帯が最後の列の手前で切れる）。ただしセルの文字の長さを列幅に入れると、長い名称の
   行だけ max-content が広がって見出しと列がずれる。セルは列幅に合わせて省略表示するので、文字の長さを
   列幅の計算から外し、見出しと全行を同じ列の最小幅の合計にそろえる。 */
.teiki-demand-list-scroll .sengu-record-grid-head > *,
.teiki-demand-list-scroll .sengu-record-grid-row > * { contain: inline-size; }
/* 見出しの字もモックと同じ大きさ・中太（共通の見出しは 10px・太字）。並べ替えのボタンは共通の
   .sengu-record-grid-head > .grid-sort が後ろにあるので、ボタンだけは詳細度で勝つ選択子を足す。 */
.teiki-demand-list-scroll .sengu-record-grid-head > *,
.teiki-demand-list-scroll .sengu-record-grid-head > .grid-sort { font-size: inherit; font-weight: 500; }
/* 帯（＝更新の対象、画面が選んだ 1 行）はモックの帯の色と左の線。Ctrl/Cmd＋クリック・Ctrl+A で一緒に選んだ
   ほかの行は共通の .selected の枠のまま残し、帯とは別の印にする（＋／－ と Excel「選択行のみ」の対象）。 */
.teiki-demand-list-scroll .sengu-record-grid-row.is-current {
    outline: 0;
    background: var(--row-selected);
}
.teiki-demand-list-scroll .sengu-record-grid-row.is-current > .select-col {
    box-shadow: inset 3px 0 0 var(--teal);
}
/* キーボードで行へ焦点を置いたときの枠。帯の outline: 0 より後に置いて勝たせる。一覧は外へ出る枠を切るので、
   共通表の行（.ichiran-table tbody tr:focus-visible）と同じく内側に描く。 */
.teiki-demand-list-scroll .sengu-record-grid-row:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}
/* 旧 ColumnHeader7（請求金額）は TextAlign = Right で、見出しも値も右寄せ。列の位置ではなく
   列に付く data-grid-text-align で当てる。 */
.teiki-demand-list-scroll .sengu-record-grid-head > [data-grid-text-align="right"],
.teiki-demand-list-scroll .sengu-record-grid-row > [data-grid-text-align="right"] {
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* 入力は「項目名｜欄」の 2 列。広い枠では「名称・番号」「仕訳・金額・期限日」の行が別の grid に
   なるため、項目名の列を max-content にすると行ごとに列幅が変わり、欄の左端がずれる。
   全行で同じ長さの変数を共有して線をそろえる。4.5em は最長の旧ラベル「フリガナ」（13px の 4 字）と
   必須の印が入る幅。 */
.teiki-demand-input-body {
    container-name: teiki-demand-input;
    container-type: inline-size;
}
.teiki-demand-form {
    --teiki-demand-label-width: 4.5em;
    display: grid;
    grid-template-columns: var(--teiki-demand-label-width) minmax(0, 1fr);
    gap: 9px 12px;
    align-items: center;
    max-width: 48em;
}
.teiki-demand-code-field,
.teiki-demand-contractor-field,
.teiki-demand-furigana-field,
.teiki-demand-form-row,
.teiki-demand-form-row > div { display: contents; }
/* 欄の箱（.field）は display: contents で消さず、親の 2 列を受け継ぐ subgrid の行にする。
   誤りの地色（共通の .field-invalid）を塗る箱が要るため。 */
.teiki-demand-form .field {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 0;
}
.teiki-demand-form .field > label:not(.check-field) {
    overflow: visible;
    margin: 0;
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    text-overflow: clip;
    white-space: nowrap;
}
/* 共通の .field-invalid input は .field input[type="text"] に詳細度で負けて枠が赤くならない。
   この枠では地色に加えて枠も誤りの色にし、地色は欄の外へ少しにじませて見つけやすくする。 */
.teiki-demand-form .field-invalid { box-shadow: 0 0 0 4px var(--danger-soft); }
.teiki-demand-form .field-invalid input[type="text"],
.teiki-demand-form .field-invalid .legacy-autocomplete-input { border-color: var(--danger); }
.teiki-demand-form .field-control-line { width: 100%; min-width: 0; }
.teiki-demand-form .field-meta { display: none; }
.teiki-demand-form .field-unit { color: var(--muted); font-size: 12px; font-weight: 400; }
.teiki-demand-code-field .field-control-line { width: 7.5em; }
.teiki-demand-room-field .field-control-line { width: 6em; }
.teiki-demand-kind-field .field-control-line { width: 9em; }
.teiki-demand-amount-field .field-control-line { width: 9.5em; }
.teiki-demand-due-field .field-control-line { width: 5.5em; }
.teiki-demand-contractor-field .field-control-line { gap: 0; }
.teiki-demand-contractor-field .field-control-line > .command {
    flex: 0 0 auto;
    width: auto;
    min-width: 34px;
    min-height: 32px;
    padding-inline: 8px;
    border-left: 0;
    border-radius: 0;
}
/* 旧は青字だがリンクではないため、補足の階層に合わせて灰色にする。 */
.teiki-demand-due-hint { grid-column: 2; color: var(--muted); font-size: 12px; white-space: nowrap; }
.teiki-demand-due-hint > .legacy-static-label { color: inherit; font-size: inherit; font-weight: 400; }

/* viewport ではなく入力カードの実幅で切り替える。DOM と Tab 順は狭いときの積み順のまま。
   行の先頭の列は親と同じ変数の長さにして、項目名の列と欄の左端を全行でそろえる。 */
@container teiki-demand-input (min-width: 660px) {
    .teiki-demand-form-row {
        display: grid;
        grid-column: 1 / -1;
        gap: 9px 12px;
        align-items: center;
        min-width: 0;
    }
    .teiki-demand-name-room-row {
        grid-template-columns: var(--teiki-demand-label-width) minmax(14em, 1fr) max-content 6em;
    }
    .teiki-demand-kind-amount-due-row {
        grid-template-columns: var(--teiki-demand-label-width) 9em max-content 9.5em max-content 5.5em minmax(0, 1fr);
    }
    .teiki-demand-form-row .field { grid-column: span 2; }
    .teiki-demand-due-hint { grid-column: auto; }
}

/* fixed にせず .workbench の中で留める。包みの下余白は増やさず、画面末尾には
   workbench 本来の 46px だけを残す。 */
.teiki-demand-command-bar {
    position: sticky;
    z-index: 30;
    bottom: calc(-1 * var(--workbench-bottom-padding));
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 3px 12px var(--panel-shadow);
    container-name: teiki-demand-command-bar;
    container-type: inline-size;
}
.teiki-demand-command-bar > .command,
.teiki-demand-command-actions > .command { width: auto; }
.teiki-demand-command-spacer { flex: 1 1 auto; }
.teiki-demand-command-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* 狭い画面でも「閉じる｜クリア・追加・更新」を 1 行に収める。共通の .command の左右 13px のままだと
   390px の窓で「更新」が 2 段目に落ちる。バー自身の幅で決める（幅は width: 100% で外から決まる）。 */
@container teiki-demand-command-bar (max-width: 440px) {
    .teiki-demand-command-bar .command { padding-inline: 9px; }
}

/* 契約の明細と日付・金額を同時に扱う面。ここで使う class は画面名ではなく、
   左の作業面と右の要約面を持つ入力レイアウトを opt-in するためのもの。共通の field-grid や
   契約・物件の他画面には一切届かない。 */
.contract-split-surface {
    --contract-split-main-min: 498px;
    --contract-split-side-width: 320px;
    --contract-split-gap: 14px;
    --contract-pair-label-width: 7.5em;
    --contract-pair-gap: 10px;
    --contract-command-bar-clearance: 72px;
    display: grid;
    max-width: 1120px;
    gap: var(--contract-split-gap);
    padding: 0 0 var(--contract-command-bar-clearance);
    border: 0;
    background: transparent;
    box-shadow: none;
    container-type: inline-size;
    container-name: contract-split;
}
/* 入力面を .workbench の末尾に置いて留める。viewport の left/right から幅を逆算しないため、
   通常幅のスクロールバーやサイドバーの開閉後もカードと同じ左右端になる。
   workbench の下余白は他画面の見た目として残し、sticky の inset だけ同じ変数で相殺する。 */
.contract-split-command-bar {
    position: sticky;
    z-index: 30;
    bottom: calc(-1 * var(--workbench-bottom-padding));
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    margin-inline: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 3px 12px var(--panel-shadow);
}
.contract-split-command-spacer { flex: 1 1 auto; }
/* 仮更新は退居と同じ共通の左右配置・下部確定バーを使う。追加の寸法はこの画面だけに閉じる。 */
.edit-surface:has(.kari-modern-surface) { max-width: 1200px; border: 0; background: transparent; box-shadow: none; }
.kari-modern-surface { max-width: 1200px; }
.kari-modern-surface .contract-summary-card > h2 { overflow-wrap: anywhere; }
.kari-contractor-row { display: flex; align-items: end; gap: 8px; padding-inline: 10px; padding-bottom: 10px; }
.kari-contractor-row > .field-groups { flex: 1 1 0; min-width: 0; width: auto; padding: 0; }
.kari-contractor-row > .field-groups > .field-group { min-width: 0; width: 100%; }
.kari-contractor-row > .command { flex: 0 0 auto; }
.kari-modern-surface .contract-detail-card > .edit-surface { margin: 0; border: 0; box-shadow: none; }
.kari-modern-surface .data-grid-wrap { max-width: 100%; overflow-x: auto; }
.kari-modern-surface .data-grid { min-width: 510px; width: 100%; }
.kari-modern-surface .data-grid th:first-child { width: 2.8rem; }
.kari-modern-surface .data-grid td:nth-child(2) { min-width: 10rem; }
.kari-modern-surface .data-grid input,
.kari-modern-surface .data-grid select { min-width: 0; width: 100%; box-sizing: border-box; }
.kari-modern-surface .data-grid-wrap { max-height: none; overflow-y: visible; }
.kari-modern-surface .contract-detail-card > .edit-surface { width: 100%; max-width: none; padding: 0; }
.kari-modern-surface .data-grid { min-width: 0; table-layout: fixed; }
.kari-modern-surface .data-grid th, .kari-modern-surface .data-grid td { padding: 1px 4px; }
.kari-modern-surface .data-grid input, .kari-modern-surface .data-grid select { height: 26px; padding: 2px 5px; }
.kari-modern-surface .data-grid th:nth-child(2) { width: 29%; }
.kari-modern-surface .data-grid th:nth-child(3), .kari-modern-surface .data-grid th:nth-child(4) { width: 13%; }
.kari-modern-surface .data-grid th:nth-child(5) { width: auto; }
.kari-modern-surface .contract-date-card .field:has([data-legacy-control="txtOldChinryo"], [data-legacy-control="txtOldKyouekihi"], [data-legacy-control="txtChinryo"], [data-legacy-control="txtKyouekihi"], [data-legacy-control="txtAzukariShikikin"], [data-legacy-control="txtJimuTesuryo"], [data-legacy-control="txtShikikin"], [data-legacy-control="txtKoushinryo"], [data-legacy-control="txtKikan"]) .field-control-line { width: 9em; max-width: 100%; }
.kari-detail-item { display: block; width: 100%; min-height: 31px; padding: 4px 6px; text-align: left; border: 1px solid transparent; background: transparent; color: inherit; }
.kari-detail-item:not(:disabled):focus-visible { border-color: var(--teal); }
.kari-detail-actions, .kari-billing-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
.kari-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 6px 14px 14px; }
.kari-totals .field-group { margin: 0; border: 0; }
.kari-totals-column { min-width: 0; }
.kari-totals-column > .field-groups { padding: 0; }
.kari-totals-column .field-grid[data-field-layout="modern-form"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0; }
.kari-totals-column .field { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: center; gap: 6px; grid-column: 1; grid-row: auto; }
.kari-totals-column .field-control-line { min-width: 0; }
.kari-tax-note { color: var(--danger-text); font-size: 12px; }
/* 旧 DispTax（KariKoushin.vb:1041-1044）は消費税計が課税分の税と違うと桃色にする。 */
.kari-totals[data-kari-tax-mismatch="true"] [data-legacy-control="txtTax"] input { background: var(--kaigisyo-status-kyakka); }
.kari-modern-surface .contract-summary-side { position: static; }
.kari-modern-surface .contract-documents-card .notice { margin-inline: 14px; }
.kari-billing-note { margin: 2px 14px 14px; color: var(--muted); font-size: 12px; }
.contract-split-card { --contract-card-inline-padding: 14px; min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.contract-split-card > h2 {
    margin: 0;
    padding: 9px var(--contract-card-inline-padding);
    border-bottom: 1px solid var(--line);
    background: var(--surface-dim);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}

/* 請求明細は旧座標を共通の24列へ写さず、業務上の四つの枠へ組み直す。
   edit-demand-surface から始め、入金のほか約20画面が使う field-grid / command-bar へ波及させない。
   操作バーはカード後の通常フロー末尾にあり、自身の高さで最後のカードを隠さない。surface の下余白は
   sticky の親境界を上げるだけなので持たず、スクロール末尾には .workbench の下余白だけを残す。 */
.edit-surface.edit-demand-surface {
    max-width: 1180px;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.edit-demand-content {
    min-width: 0;
    container-name: edit-demand;
    container-type: inline-size;
}
.edit-demand-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.edit-demand-column { display: grid; min-width: 0; gap: 14px; }
.edit-demand-card {
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface);
}
.edit-demand-card > h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin: 0;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-dim);
    color: var(--navy);
    font-size: 13px;
}
.edit-demand-card > h2 small { color: var(--muted); font-size: 12px; font-weight: 400; }
.edit-demand-card-body { min-width: 0; padding: 14px 14px 16px; }
/* 行を四列の subgrid にそろえ、枠が狭いときだけ同じ DOM 順の二列へ畳む。 */
.edit-demand-claim-body { container-name: edit-demand-claim; container-type: inline-size; }
.edit-demand-claim-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(calc(12.5rem + 5px), 1fr);
    gap: 9px 12px;
    align-items: center;
}
.edit-demand-claim-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 9px 12px;
    align-items: center;
    min-width: 0;
}
.edit-demand-claim-row > .field,
.edit-demand-claim-row > .edit-demand-field > .field,
.edit-demand-detail-edit-row > .field,
.edit-demand-detail-edit-row > .edit-demand-field > .field,
.edit-demand-summary-grid > .field,
.edit-demand-transfer-row > .field { display: contents; }
.edit-demand-field { display: contents; }
.edit-demand-claim-row > .field > label:not(.check-field),
.edit-demand-claim-row > .edit-demand-field > .field > label:not(.check-field),
.edit-demand-detail-edit-row > .field > label:not(.check-field),
.edit-demand-detail-edit-row > .edit-demand-field > .field > label:not(.check-field),
.edit-demand-summary-grid > .field > label:not(.check-field),
.edit-demand-transfer-row > .field > label:not(.check-field) {
    overflow: visible;
    margin: 0;
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    text-overflow: clip;
}
.edit-demand-claim-row .field-control-line,
.edit-demand-detail-edit-row .field-control-line,
.edit-demand-summary-grid > .field > .field-control-line,
.edit-demand-transfer-row > .field > .field-control-line { width: 100%; min-width: 0; }
.edit-demand-claim-row .field-meta,
.edit-demand-detail-edit-row .field-meta,
.edit-demand-summary-grid .field-meta { display: none; }
.edit-demand-claim-row input[type="date"] { width: 10.5em; min-width: 10.5em; }
/* #386 の年月は年・月の二つの select。旧 month input の幅指定では効かないため、
   この枠だけ年 6.5rem・月 6rem にし、選択肢と「未指定」を読める幅で四列に収める。 */
.edit-demand-claim-row .year-month-select > select:first-child,
.edit-demand-transfer-row .year-month-select > select:first-child { flex-basis: 6.5rem; min-width: 6.5rem; }
.edit-demand-claim-row .year-month-select > select:last-child,
.edit-demand-transfer-row .year-month-select > select:last-child { flex-basis: 6rem; min-width: 6rem; }
.edit-demand-room-field .field-control-line { max-width: 6em; }
.edit-demand-total-field .field-control-line > input { width: 8.5em; max-width: 8.5em; }
.edit-demand-arrears-field .field-control-line > input { flex: 0 0 3.5em; width: 3.5em; }
.edit-demand-wide-row > .field > .field-control-line { grid-column: 2 / -1; }
.edit-demand-rent-flag {
    grid-column: 3 / -1;
    justify-self: start;
    padding: 3px 10px;
    border: 1px solid var(--teal-muted);
    background: var(--edit-demand-rent-flag);
}
.edit-demand-rent-flag > .field { padding: 0; background: transparent; }
.edit-demand-rent-flag .check-field { min-height: 24px; font-size: 13px; }
.edit-demand-claim-row .field-control-line > .command {
    flex: 0 0 auto;
    min-width: 34px;
    min-height: 32px;
    margin-left: -5px;
    padding-inline: 8px;
    border-left: 0;
    border-radius: 0;
}
.edit-demand-complete-field { flex: 0 0 auto; }
.edit-demand-complete-field > .field { padding: 0; background: transparent; }
.edit-demand-complete-field .check-field { min-height: 32px; font-size: 13px; }

.edit-demand-detail-table > section { margin: 0; }
.edit-demand-detail-table [data-edit-demand-detail-grid="true"],
.edit-demand-detail-table .sengu-record-grid { width: 100%; max-width: none; }
.edit-demand-detail-editor {
    display: grid;
    gap: 9px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    container-name: edit-demand-detail;
    container-type: inline-size;
}
.edit-demand-detail-edit-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    min-width: 0;
}
.edit-demand-detail-item-field .legacy-autocomplete { width: 100%; max-width: 16em; min-width: 8em; }
/* 金額は整数9桁に3桁区切り2つを足した11文字を読める幅にする。
   18px は入力の左右 padding 16px と border 2px。 */
.edit-demand-detail-amount-field .field-control-line > input {
    flex: 0 0 calc(11ch + 18px);
    width: calc(11ch + 18px);
    min-width: calc(11ch + 18px);
}
.edit-demand-detail-ops { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.edit-demand-detail-ops > .command { width: auto; min-width: 0; }

.edit-demand-table-scroll { max-width: 100%; overflow-x: auto; }
.edit-demand-table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.edit-demand-candidate-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.edit-demand-candidate-table col.priority { width: 4.75rem; }
.edit-demand-candidate-table col.candidate { width: auto; }
.edit-demand-candidate-table col.note { width: 32%; }
.edit-demand-candidate-table th {
    padding: 6px 8px;
    background: var(--navy);
    color: var(--surface);
    font-weight: 500;
    text-align: left;
    white-space: normal;
}
.edit-demand-candidate-table th.number,
.edit-demand-candidate-table tbody th { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.edit-demand-candidate-table tbody th {
    border-top: 1px solid var(--line-soft);
    background: var(--surface-dim);
    color: var(--label);
}
.edit-demand-candidate-table td { padding: 4px 6px; border-top: 1px solid var(--line-soft); }
.edit-demand-candidate-table .field { padding: 0; background: transparent; }
.edit-demand-candidate-table .field-control-line,
.edit-demand-candidate-table .field-control-line > input { width: 100%; min-width: 0; }
.edit-demand-candidate-table .field-meta { display: none; }

.edit-demand-summary-body { container-name: edit-demand-summary; container-type: inline-size; }
.edit-demand-summary-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 9px 12px;
    align-items: center;
}
.edit-demand-summary-grid textarea { min-height: 70px; }
.edit-demand-character-limit {
    grid-column: 2;
    margin: -6px 0 0;
    color: var(--muted);
    font-size: 11px;
}
.edit-demand-transfer-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(calc(12.5rem + 5px), max-content);
    gap: 9px 12px;
    align-items: center;
    min-width: 0;
}

/* viewport ではなく本文枠の実幅だけで二列／一列を切り替える。DOM と Tab 順は常に
   請求→明細→振込候補→摘要・送金のまま。 */
@container edit-demand (min-width: 940px) {
    .edit-demand-card-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
/* 4列の最も密な合計行は、ラベル2つ 4em×2（112px）、入力 8.5em+3.5em
   （168px）、単位・完了 約80px、列間36px、欄内の隙間等 約34pxで約430px。
   10pxの余裕を含め、内幅440pxからは4列を維持し、それ未満だけ2列へ畳む。 */
@container edit-demand-claim (max-width: 439px) {
    .edit-demand-claim-grid { grid-template-columns: max-content minmax(0, 1fr); }
    .edit-demand-rent-flag { grid-column: 1 / -1; }
}
/* 3列の明細行は、ラベル28px、11桁の金額欄と単位等142px、操作群約180px、
   列間24pxで約374px。内幅380px未満では操作群を入力欄の下へ送る。 */
@container edit-demand-detail (max-width: 379px) {
    .edit-demand-detail-edit-row { grid-template-columns: max-content minmax(0, 1fr); }
    .edit-demand-detail-ops { grid-column: 2; justify-self: start; justify-content: flex-start; }
}
@container edit-demand-summary (max-width: 420px) {
    .edit-demand-transfer-row { grid-template-columns: max-content minmax(0, 1fr); }
}

.edit-demand-command-bar {
    position: sticky;
    z-index: 30;
    bottom: calc(-1 * var(--workbench-bottom-padding));
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    margin: 14px 0 0;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 3px 12px var(--panel-shadow);
}
.edit-demand-command-bar > .command { width: auto; }
.edit-demand-command-spacer { flex: 1 1 auto; }
.contract-split-workspace { display: grid; grid-template-columns: minmax(var(--contract-split-main-min), 1fr) var(--contract-split-side-width); gap: var(--contract-split-gap); align-items: start; }
.contract-split-main, .contract-summary-side { display: grid; min-width: 0; gap: 14px; }
.contract-summary-side { position: sticky; top: 60px; }

/* MasterFieldGroupEditor を直接使う契約・要約カードも、社員・銀行と同じ label/value の対にする。
   値の幅は親カードに収め、旧 Designer の 24 列由来の横スクロールをここで持ち込まない。 */
.contract-split-surface .pair-form-fields { display: block; padding: 0; container-type: inline-size; }
.contract-split-surface .pair-form-fields .field-group { margin: 0; border: 0; border-radius: 0; overflow: visible; }
.contract-split-surface .pair-form-fields .field-grid[data-field-layout="modern-form"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 14px 16px 16px;
    overflow: visible;
    background: transparent;
}
.contract-split-surface .pair-form-fields .field-grid[data-field-layout="modern-form"] > .field {
    display: grid;
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: var(--contract-pair-label-width) minmax(0, 1fr);
    gap: var(--contract-pair-gap);
    align-items: center;
    min-width: 0;
    padding: 0;
    background: transparent;
}
.contract-split-surface .pair-form-fields .field > label:not(.check-field) {
    margin: 0;
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.contract-split-surface .pair-form-fields .field-control-line { width: 100%; min-width: 0; }
.contract-split-surface .pair-form-fields .field-control-line > input,
.contract-split-surface .pair-form-fields .field-control-line > select,
.contract-split-surface .pair-form-fields .field-control-line > textarea,
.contract-split-surface .pair-form-fields .field-control-line > .legacy-autocomplete { width: 100%; min-width: 0; }
.contract-split-surface .pair-form-fields .check-field {
    grid-column: 1 / -1;
    min-height: 28px;
    font-size: 13px;
}

/* 日付枠は右列の320pxでも、本文が一列になった後の広いカードでも同じ一まとまりにする。
   modern-form共通の860px queryは値項目を外側の2列目へ置くため、補助列を0幅にして値列へ面の全幅を渡す。
   項目名列は最長6文字が収まる6emにし、複数チェックのrunと単独チェックを同じ値列へそろえる。 */
.contract-date-card { --contract-pair-label-width: 6em; }
.contract-split-surface .contract-date-card .pair-form-fields.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] {
    grid-template-columns: 0 minmax(0, 1fr);
    padding-inline: var(--contract-card-inline-padding);
}
.contract-split-surface .contract-date-card .pair-form-fields.field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] > .field {
    grid-template-columns: var(--contract-pair-label-width) minmax(0, 1fr);
    gap: var(--contract-pair-gap);
}
.contract-split-surface .contract-date-card .pair-form-fields.field-groups[data-field-layout="modern-form"] .modern-run[data-modern-run="choice"] {
    box-sizing: border-box;
    padding-inline-start: calc(var(--contract-pair-label-width) + var(--contract-pair-gap));
}
.contract-split-surface .contract-date-card .pair-form-fields.field-groups[data-field-layout="modern-form"] .modern-run[data-modern-run="choice"] > .field:has(> .check-field) {
    display: block;
}
.contract-split-surface .contract-date-card .pair-form-fields.field-groups[data-field-layout="modern-form"] .modern-run[data-modern-run="choice"] > .field:has(> .check-field) > .check-field {
    grid-column: auto;
}
.contract-split-surface .contract-date-card .pair-form-fields.field-groups[data-field-layout="modern-form"] .field:has(> .check-field) > .check-field {
    grid-column: 2;
}

/* 契約コード・更新番号・契約者は、広い面では旧どおり一行。イントラスト情報だけを次の全幅行にする。 */
.contract-summary-card .field-grid[data-field-layout="modern-form"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px 14px;
}
.contract-summary-card .pair-form-fields { container-name: contract-summary; }
.contract-summary-card .field[data-modern-full-row="true"] { align-items: start; }
.contract-summary-card .field[data-modern-full-row="true"] textarea {
    min-height: 44px;
    border-color: var(--line-warm);
    background: var(--disabled);
}

/* 明細は表の後に、同じ高さの操作群と合計を置く。明細 grid 自体に巨大な min-content 幅を持たせない。 */
.contract-detail-card > .field-group { margin: 0; border: 0; background: transparent; }
.contract-detail-card > .field-group > .field-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px var(--contract-card-inline-padding) 14px;
    overflow: visible;
    background: transparent;
}
.contract-detail-card > .field-group > .field-grid > .field-action { flex: 0 0 auto; }
.contract-detail-card > .field-group > .field-grid > .field-action > .command { width: auto; min-width: 0; }
.contract-detail-card > .field-group > .field-grid > .field:has([data-legacy-control="txtTotal"]) {
    display: grid;
    grid-template-columns: max-content minmax(7rem, 9rem);
    gap: 7px;
    align-items: center;
    min-width: 0;
    margin-left: auto;
    padding: 0;
    background: transparent;
}
.contract-detail-card > .field-group > .field-grid > .field:has([data-legacy-control="txtTotal"]) > label { margin: 0; white-space: nowrap; }
.contract-detail-card > .field-group > .field-grid > .field:has([data-legacy-control="txtTotal"]) .field-control-line { width: 100%; }
.contract-detail-workbench { min-width: 0; }
.contract-detail-card .contract-fee-grid { margin: 0; border: 0; }
.contract-detail-card .contract-fee-grid > .sengu-record-grid { max-width: 100%; max-height: none; min-height: 0; overflow-x: auto; overflow-y: hidden; border-inline: 0; }
.contract-detail-card .sengu-record-grid-head,
.contract-detail-card .sengu-record-grid-row { min-width: 520px; grid-template-columns: 2.75rem minmax(8rem, 1fr) minmax(5.5rem, .8fr) minmax(5.5rem, .8fr) minmax(7rem, 1fr) !important; }
.contract-detail-card .sengu-record-grid-head > span,
.contract-detail-card .sengu-record-grid-head > .grid-sort,
.contract-detail-card .sengu-record-grid-row > span { min-width: 0; padding: 6px; white-space: nowrap; }

/* 6 タブは横に送らず折り返し、選択中の内容も label/value の対で読む。長い名称・住所だけは全幅にする。 */
.contract-parties-card {
    --contract-party-label-width: 7.5rem;
    --contract-party-field-gap: 9px;
    --contract-party-compact-input-min: 5.75em;
}
.contract-parties-card > .field-groups[data-field-layout="modern-form"] { gap: 0; padding: 0; container-name: contract-parties; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-tablist { overflow-x: visible; padding-inline: 8px; background: var(--surface-dim); }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-tabpanel { padding: 14px 16px 16px; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-tabpanel > .property-tab-content > .field-section { border: 0; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field {
    display: grid;
    grid-template-columns: var(--contract-party-label-width) minmax(0, 1fr);
    gap: var(--contract-party-field-gap);
    align-items: center;
    min-width: 0;
    padding: 0;
    background: transparent;
}
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field > label:not(.check-field) {
    margin: 0;
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: normal;
    white-space: nowrap;
}
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-control-line { width: 100%; max-width: 100%; min-width: 0; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-control-line > input,
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-control-line > select,
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-control-line > textarea,
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-control-line > .legacy-autocomplete { width: 100%; min-width: 0; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .legacy-static-label { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run { gap: var(--contract-party-field-gap); }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field[data-modern-input-width="content"] {
    grid-template-columns: max-content minmax(min(var(--modern-input-width), var(--contract-party-compact-input-min)), var(--modern-input-width));
}
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field:has(> .check-field) { grid-template-columns: max-content; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field[data-modern-input-width="content"] .field-control-line { width: var(--modern-input-width); max-width: 100%; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field textarea { min-height: 70px; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .check-field { grid-column: 1 / -1; min-height: 28px; font-size: 13px; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-action { text-align: end; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-action > .command { width: auto; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-group-actions { justify-content: flex-end; padding: 0 0 10px; }
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-tabset,
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-tabpanel,
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .property-tab-content,
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-section,
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-grid[data-field-layout="modern-form"],
.contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run { min-width: 0; max-width: 100%; }

.contract-date-card .field-grid[data-field-layout="modern-form"] > .field:has([data-legacy-control="txtChinryo"], [data-legacy-control="txtKyouekihi"], [data-legacy-control="txtAzukariShikikin"]) .field-control-line { max-width: 9em; }
.contract-date-card .field-grid[data-field-layout="modern-form"] > .field:has([data-legacy-control^="date"]) .field-control-line { max-width: 10.5em; }
.contract-date-card .field[data-modern-input-width="content"] .field-control-line { width: var(--modern-input-width); max-width: 100%; }
.contract-date-card .contract-date-separator { width: calc(100% + var(--contract-card-inline-padding) + var(--contract-card-inline-padding)); margin: 2px calc(0px - var(--contract-card-inline-padding)); border: 0; border-top: 1px solid var(--line-soft); }
.contract-document-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.contract-document-actions > [data-legacy-control="btnDispMikanryoSeikyu"],
.contract-document-actions > [data-legacy-control="btnKaisyuIraisyo"] { grid-column: 1 / -1; }
.contract-document-actions > .command { width: 100%; min-width: 0; white-space: normal; }
.contract-document-actions > .contract-demand-list-link { grid-column: 1 / -1; width: 100%; min-width: 0; text-align: center; }

/* 左列498px（タブ内の横並びを保てる実測幅）+ 右列320px + 隙間14px = 832px。
   832px以上は二列を保ち、その1px下からだけ右列を下へ送る。 */
@container contract-split (max-width: 831px) {
    .contract-split-workspace { grid-template-columns: minmax(0, 1fr); }
    .contract-summary-side { position: static; }
}
@container contract-split (max-width: 560px) {
    .contract-split-card { --contract-card-inline-padding: 10px; }
    .contract-split-surface .pair-form-fields .field-grid[data-field-layout="modern-form"],
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .field-tabpanel { padding: 12px 10px; }
    .contract-split-surface .pair-form-fields .field-grid[data-field-layout="modern-form"] > .field,
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .field { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .contract-detail-card > .field-group > .field-grid > .field:has([data-legacy-control="txtTotal"]) { width: 100%; margin-left: 0; }
}

/* 退居の契約行は、幅に余裕がある間は配置計算の同じ行を左から並べる。
   全幅項目も同じ opt-in から判定し、control 名を CSS の配置条件にしない。 */
@container contract-summary (max-width: 700px) {
    .contract-split-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] {
        grid-template-columns: minmax(0, 1fr);
    }
    .contract-split-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] > .field[data-modern-area] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}
@container contract-summary (min-width: 701px) {
    .contract-split-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] {
        grid-template-columns: max-content max-content minmax(12em, 1fr);
        gap: 10px 14px;
    }
    .contract-split-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] > .field[data-modern-area] {
        grid-column: auto !important;
        grid-row: var(--modern-row, auto) !important;
        grid-template-columns: max-content minmax(12em, 1fr);
    }
    .contract-split-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] > .field[data-modern-area][data-modern-input-width="content"] {
        grid-template-columns: max-content minmax(0, var(--modern-input-width));
    }
    .contract-split-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] > .field[data-modern-area][data-modern-full-row="true"] {
        grid-column: 1 / -1 !important;
    }
}

/* 退居のタブは窓ではなくタブカード自身の幅で切り替える。共通の860px規則と別条件で
   columnだけ／rowだけが戻ると左右項目が同じマスへ重なるため、どちらも同じqueryで切り替える。 */
@container contract-parties (min-width: 621px) {
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] {
        grid-template-columns: repeat(var(--modern-clusters, 1), max-content minmax(0, 1fr) 14px);
        gap: 10px 0;
    }
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"][data-modern-grid="vertical-table"] {
        grid-template-columns: repeat(var(--modern-table-columns, 1), max-content minmax(0, 1fr));
        gap: 10px 14px;
    }
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > * {
        grid-column: var(--modern-column, 1 / -1) !important;
        grid-row: var(--modern-row, auto) !important;
    }
    /* 共通の860px規則は data-modern-area 別の列指定を持つ。同じ属性まで含めて詳細度をそろえ、
       named container の幅条件だけで列・行を必ず一緒に旧配置へ戻す。 */
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > [data-modern-area] {
        grid-column: var(--modern-column, 1 / -1) !important;
        grid-row: var(--modern-row, auto) !important;
    }
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"] > .field[data-modern-full-row="true"] {
        grid-column: 1 / -1 !important;
    }
}

@container contract-parties (max-width: 620px) {
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px 0;
    }
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    .contract-split-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:is([data-modern-grid="form"], [data-modern-grid="vertical-table"]) > [data-modern-area] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

/* 一つ目の項目名は通常行と同じ変数を使い、最初の入力の左端を名称・住所とそろえる。
   run内の欄は指定幅から伸ばさず、466pxの枠では必要な分だけ縮み、狭い枠だけ折り返す。 */
@container contract-parties (min-width: 491px) {
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run { flex-wrap: nowrap; }
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field:first-child { display: contents; }
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field:first-child > label:not(.check-field) { flex: 0 0 var(--contract-party-label-width); }
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field:first-child > .field-control-line {
        flex: 0 1 var(--modern-input-width, 18rem);
        width: var(--modern-input-width, 18rem);
        max-width: 100%;
        min-width: min(var(--modern-input-width, 18rem), var(--contract-party-compact-input-min));
    }
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field:not(:first-child) {
        flex: 0 1 auto;
        min-width: min-content;
    }
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field[data-modern-input-width="content"] .field-control-line {
        min-width: min(var(--modern-input-width), var(--contract-party-compact-input-min));
    }
}

@container contract-parties (max-width: 490px) {
    .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run > .field { flex: 1 1 100%; }
}

/* 退居予告は旧座標の24列へ写さず、契約確認→四つの業務枠→書類→通知の順に組み直す。
   taikyo-yokoku-surface から始め、同じ ContractPropertyScreen を使うほかの画面へ波及させない。 */
.edit-surface.taikyo-yokoku-surface {
    --taikyo-yokoku-gap: 14px;
    --taikyo-yokoku-card-padding: 14px;
    display: block;
    max-width: 1180px;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.taikyo-yokoku-editor,
.taikyo-yokoku-content { display: grid; min-width: 0; gap: var(--taikyo-yokoku-gap); }
.taikyo-yokoku-card { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.taikyo-yokoku-card > h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin: 0;
    padding: 9px var(--taikyo-yokoku-card-padding);
    border-bottom: 1px solid var(--line);
    background: var(--surface-dim);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}
.taikyo-yokoku-card-body { min-width: 0; padding: 14px var(--taikyo-yokoku-card-padding) 16px; }

/* MasterFieldEditor の control/state/data-legacy-* は再利用し、配置だけを画面の枠内で外す。
   .taikyo-yokoku-caption は、見出しを入力と別の列へ出す欄（TEL・〒・立会外注先情報）の見える見出し。 */
.taikyo-yokoku-surface .field { min-width: 0; padding: 0; background: transparent; }
.taikyo-yokoku-surface .field > label:not(.check-field),
.taikyo-yokoku-caption {
    align-self: start;
    overflow: visible;
    margin: 0;
    padding-top: 7px;
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    text-overflow: clip;
    white-space: nowrap;
}
.taikyo-yokoku-surface .field-control-line { width: 100%; min-width: 0; }
.taikyo-yokoku-surface .field-control-line > input,
.taikyo-yokoku-surface .field-control-line > select,
.taikyo-yokoku-surface .field-control-line > textarea,
.taikyo-yokoku-surface .field-control-line > .legacy-autocomplete { width: 100%; min-width: 0; max-width: 100%; }
/* 枠線・地・高さは共通の .field input の指定をそのまま使い、内側の余白だけをモックに合わせる。 */
.taikyo-yokoku-surface .field input[type="text"],
.taikyo-yokoku-surface .field input[type="date"],
.taikyo-yokoku-surface .field textarea,
.taikyo-yokoku-surface .field select,
.taikyo-yokoku-surface .field .legacy-autocomplete-input { padding: 5px 8px; }
.taikyo-yokoku-surface .field.field-disabled input[type="text"],
.taikyo-yokoku-surface .field.field-disabled input[type="date"],
.taikyo-yokoku-surface .field.field-disabled textarea,
.taikyo-yokoku-surface .field.field-disabled select,
.taikyo-yokoku-surface .field.field-disabled .legacy-autocomplete-input { background: var(--disabled); color: var(--ink); }
/* 必須・形式の誤りの強調。共通の .field-invalid は .field の地を淡赤にして入力の枠を赤くするが、この画面は
   .field を display: contents にして地が描かれず、枠の色も共通の .field input[type] に詳細度で負ける。
   同じ 2 色を入力そのものへ当て、保存を止めた欄が見て分かるようにする。 */
.taikyo-yokoku-surface .field.field-invalid input[type="text"],
.taikyo-yokoku-surface .field.field-invalid input[type="date"],
.taikyo-yokoku-surface .field.field-invalid textarea,
.taikyo-yokoku-surface .field.field-invalid select,
.taikyo-yokoku-surface .field.field-invalid .legacy-autocomplete-input { border-color: var(--danger); background: var(--danger-soft); }
.taikyo-yokoku-surface .field textarea { resize: vertical; }
.taikyo-yokoku-surface .field-meta { display: none; }
.taikyo-yokoku-surface .check-field {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    min-height: 32px;
    color: var(--ink);
    font-size: 13px;
    white-space: nowrap;
}
.taikyo-yokoku-surface .check-field > input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--teal); }
.taikyo-yokoku-surface .command { width: auto; white-space: nowrap; }

.taikyo-yokoku-subject { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.taikyo-yokoku-subject-field { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.taikyo-yokoku-subject-field > span { color: var(--label); font-size: 13px; font-weight: 500; white-space: nowrap; }
.taikyo-yokoku-subject-field > strong { color: var(--navy); font-variant-numeric: tabular-nums; }
.taikyo-yokoku-subject > .command { margin-left: auto; min-height: 30px; padding-block: 3px; }

/* DOM と Tab は 契約者・入居者→退居関連→解約後→銀行口座。広い枠だけ旧の2段2列へ置く。 */
.taikyo-yokoku-quad-host { min-width: 0; container: taikyo-yokoku-quad / inline-size; }
.taikyo-yokoku-quad { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--taikyo-yokoku-gap); }
@container taikyo-yokoku-quad (min-width: 1070px) {
    .taikyo-yokoku-quad { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .taikyo-yokoku-party-card { grid-area: 1 / 1; }
    .taikyo-yokoku-after-card { grid-area: 1 / 2; }
    .taikyo-yokoku-taikyo-card { grid-area: 2 / 1; }
    .taikyo-yokoku-bank-card { grid-area: 2 / 2; }
}

/* 見出し｜入力 の 2 列。同じ枠の欄はすべてこの 2 列を共有し、入力の左端をそろえる（旧は X=79 でそろう、
   TaikyoYokoku.Designer.vb:795,818,841）。同じ行に並べる欄は入力の列の中の包み（contact-row・postal-row）に入れ、
   見出しと注記を持つ名義の行は subgrid にして列を共有する。 */
.taikyo-yokoku-pair-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 12px; align-items: center; min-width: 0; }
.taikyo-yokoku-pair-field,
.taikyo-yokoku-pair-field > .field { display: contents; }
.taikyo-yokoku-party-grid > h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
}
.taikyo-yokoku-party-grid > .taikyo-yokoku-next-subheading {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}
.taikyo-yokoku-party-grid > .taikyo-yokoku-pair-field .field-control-line { width: 100%; }
.taikyo-yokoku-contact-row,
.taikyo-yokoku-postal-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-width: 0; }
.taikyo-yokoku-contact-primary,
.taikyo-yokoku-inline-field,
.taikyo-yokoku-postal-row > .field { min-width: 0; max-width: 100%; }
.taikyo-yokoku-inline-field > .field { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; }
.taikyo-yokoku-inline-field > .field > label:not(.check-field) { padding-top: 0; }
/* 幅を決めた欄も、枠が狭いとき（窓 320px でサイドバーを畳んだ幅など）は入っている列の幅まで縮めて枠から出さない。 */
.taikyo-yokoku-contact-primary .field-control-line,
.taikyo-yokoku-inline-field .field-control-line { width: 10em; max-width: 100%; }
.taikyo-yokoku-postal-row .field-control-line { width: 7em; max-width: 100%; }
.taikyo-yokoku-postal-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* 退居関連だけを幅判定の container にする。max-content のラベル列を持つ外側には付けない。
   行は各欄の包みが style 属性の --taikyo-yokoku-row で渡す。渡さない要素は自動配置のまま。 */
.taikyo-yokoku-taikyo-body { container: taikyo-yokoku-taikyo / inline-size; }
.taikyo-yokoku-taikyo-grid {
    --taikyo-yokoku-row: auto;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 9px 12px;
    align-items: center;
    min-width: 0;
}
.taikyo-yokoku-taikyo-field,
.taikyo-yokoku-taikyo-field > .field { display: contents; }
.taikyo-yokoku-taikyo-field .field-control-line { justify-self: start; width: 10.5em; max-width: 100%; }
.taikyo-yokoku-taikyo-choice { grid-column: 1 / -1; }
.taikyo-yokoku-taikyo-choice > .field { padding: 0; }
.taikyo-yokoku-taikyo-a .check-field { align-items: flex-start; line-height: 1.45; white-space: pre-line; }
.taikyo-yokoku-taikyo-a .check-field > input { margin-top: 2px; }
.taikyo-yokoku-taikyo-action {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.taikyo-yokoku-taikyo-action > .command { justify-self: start; min-height: 30px; padding-block: 3px; }
.taikyo-yokoku-taikyo-text { grid-column: 1 / -1; min-width: 0; }
.taikyo-yokoku-taikyo-text > .field { padding: 0; }
.taikyo-yokoku-taikyo-text textarea { min-height: 62px; }
@container taikyo-yokoku-taikyo (min-width: 600px) {
    .taikyo-yokoku-taikyo-grid { grid-template-columns: max-content max-content max-content minmax(0, 1fr); }
    .taikyo-yokoku-taikyo-field > .field > label:not(.check-field) { grid-row: var(--taikyo-yokoku-row); }
    .taikyo-yokoku-taikyo-field > .field > .field-control-line { grid-row: var(--taikyo-yokoku-row); }
    .taikyo-yokoku-taikyo-field.taikyo-yokoku-taikyo-a > .field > label:not(.check-field) { grid-column: 1; }
    .taikyo-yokoku-taikyo-field.taikyo-yokoku-taikyo-a > .field > .field-control-line { grid-column: 2; }
    .taikyo-yokoku-taikyo-field.taikyo-yokoku-taikyo-b > .field > label:not(.check-field) { grid-column: 3; margin-left: 14px; }
    .taikyo-yokoku-taikyo-field.taikyo-yokoku-taikyo-b > .field > .field-control-line { grid-column: 4; }
    .taikyo-yokoku-taikyo-choice { grid-row: var(--taikyo-yokoku-row); }
    .taikyo-yokoku-taikyo-choice.taikyo-yokoku-taikyo-a { grid-column: 1 / span 2; }
    .taikyo-yokoku-taikyo-choice.taikyo-yokoku-taikyo-b { grid-column: 3 / span 2; margin-left: 14px; }
    .taikyo-yokoku-taikyo-action {
        display: contents;
    }
    .taikyo-yokoku-taikyo-action > .taikyo-yokoku-caption { grid-column: 3; grid-row: var(--taikyo-yokoku-row); margin-left: 14px; }
    .taikyo-yokoku-taikyo-action > .command { grid-column: 4; grid-row: var(--taikyo-yokoku-row); }
    .taikyo-yokoku-taikyo-text { grid-column: 3 / span 2; grid-row: var(--taikyo-yokoku-row); margin-left: 14px; }
}

.taikyo-yokoku-telephone-field .field-control-line { width: 10em; max-width: 100%; justify-self: start; }
.taikyo-yokoku-bank-name-field .field-control-line { width: 16em; max-width: 100%; }
.taikyo-yokoku-account-kind-field .field-control-line { width: 7em; max-width: 100%; }
.taikyo-yokoku-account-number-field .field-control-line { width: 9em; max-width: 100%; }
.taikyo-yokoku-meigi-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto;
    row-gap: 0;
    align-items: start;
    min-width: 0;
}
.taikyo-yokoku-meigi-row > .field { display: contents; }
.taikyo-yokoku-meigi-row > .field > label:not(.check-field) { grid-column: 1; grid-row: 1; }
.taikyo-yokoku-meigi-row > .field > .field-control-line { grid-column: 2; grid-row: 1 / span 2; width: 16em; max-width: 100%; }
.taikyo-yokoku-meigi-row textarea { min-height: 70px; }
.taikyo-yokoku-note { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 12px; white-space: nowrap; }

.taikyo-yokoku-documents-body { container: taikyo-yokoku-documents / inline-size; }
.taikyo-yokoku-pdf-note {
    margin: 0 0 12px;
    padding: 6px 12px;
    background: var(--teal);
    color: var(--surface);
    font-size: 13px;
    text-align: center;
}
.taikyo-yokoku-documents-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; align-items: center; min-width: 0; }
.taikyo-yokoku-documents-grid > .command { justify-self: start; }
.taikyo-yokoku-document-blank { display: none; }
.taikyo-yokoku-document-value { min-width: 0; margin-bottom: 8px; }
.taikyo-yokoku-radios { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.taikyo-yokoku-radios > .field { padding: 0; }
.taikyo-yokoku-radios .check-field { white-space: normal; }
.taikyo-yokoku-file { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.taikyo-yokoku-file > .field { display: contents; }
.taikyo-yokoku-file > .field > .field-control-line { flex: 1 1 20em; width: auto; max-width: 28em; }
.taikyo-yokoku-file > .command { flex: 0 0 auto; }
.taikyo-yokoku-sheet-note { margin: 0; color: var(--taikyo-yokoku-sheet-note-ink); font-size: 12px; }
@container taikyo-yokoku-documents (min-width: 520px) {
    .taikyo-yokoku-documents-grid { grid-template-columns: max-content minmax(0, 1fr); }
    .taikyo-yokoku-documents-grid > .command { grid-column: 1; justify-self: stretch; }
    .taikyo-yokoku-document-blank { display: block; }
    .taikyo-yokoku-document-value { grid-column: 2; margin-bottom: 0; }
    .taikyo-yokoku-sheet-note { grid-column: 2; }
}
@container taikyo-yokoku-documents (min-width: 860px) {
    .taikyo-yokoku-documents-grid { grid-template-columns: max-content minmax(0, max-content) minmax(12em, 1fr); }
    .taikyo-yokoku-radios { grid-column: 2 / -1; }
    .taikyo-yokoku-file > .field > .field-control-line { flex: 0 0 26em; width: 26em; }
    .taikyo-yokoku-sheet-note { grid-column: 3; grid-row: 3 / span 2; padding-left: 8px; }
}

.taikyo-yokoku-notification { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.taikyo-yokoku-sent-at { color: var(--taikyo-yokoku-sent-ink); font-size: 13px; }

/* 下余白を持つ包みを足さず、通常フローの末尾にある bar 自身を .workbench の下端へ留める。
   最下部で bar の下に残るのは .workbench の既存下余白だけになる。 */
.taikyo-yokoku-command-bar {
    position: sticky;
    z-index: 30;
    bottom: calc(-1 * var(--workbench-bottom-padding));
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 3px 12px var(--panel-shadow);
}
.taikyo-yokoku-command-spacer { flex: 1 1 auto; }
.taikyo-yokoku-command-operations { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-left: auto; }
.taikyo-yokoku-command-bar > .command,
.taikyo-yokoku-command-operations > .command { width: auto; }

/* MasterFieldGroupEditor を単独で使う明細は field-groups の下に無いため、modern-run の
   flex 指定をここで opt-in する。これで旧 GroupBox2 の同じ y の五操作を一行に保つ。 */
.contract-detail-card > .field-group > .field-grid > .modern-run {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.contract-detail-card > .field-group > .field-grid > .modern-run > .field-action { flex: 0 0 auto; }
.contract-detail-card > .field-group > .field-grid > .modern-run > .field-action > .command { width: auto; min-width: 0; }

/* 契約情報は、退居と同じカード・余白・タブの部品を使いながら、旧画面の
   [明細＋現時点の賃料][契約時の内容＋詳しい情報] という読み順を保つ。
   画面幅ではなく、この面自身の幅だけで二列と一列を切り替える。 */
.contract-info-surface {
    --contract-info-main-width: 420px;
    --contract-info-side-min: 560px;
    --contract-info-label-width: 7.5rem;
    max-width: 1180px;
}
.contract-info-command-bar { max-width: 1180px; }
.contract-info-workspace {
    grid-template-columns: minmax(0, var(--contract-info-main-width)) minmax(var(--contract-info-side-min), 1fr);
}
.contract-info-contract-content { display: contents; }
.contract-info-side { position: static; }
.contract-info-main,
.contract-info-side,
.contract-info-summary-card,
.contract-info-current-card,
.contract-at-signing-card,
.contract-info-tabs-card { min-width: 0; }

/* 契約情報の確定操作は下端へ分け、契約SUBと加入札は契約カードの文脈として先頭に置く。 */
.contract-info-summary-context {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    margin-bottom: 10px;
}
.contract-info-summary-context .contract-info-toolbar-field {
    display: block;
    flex: 0 1 23em;
    width: min(23em, 100%);
    min-width: min(23em, 100%);
    padding: 0;
}
.contract-info-summary-context .contract-info-toolbar-field > .field-group {
    margin: 0;
    border: 0;
    overflow: visible;
}
.contract-info-summary-context .contract-info-toolbar-field .field-grid[data-field-layout="modern-form"] {
    display: block;
    padding: 0;
    overflow: visible;
}
.contract-info-summary-context .contract-info-toolbar-field .field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.contract-info-summary-context .contract-info-toolbar-field .field > label:not(.check-field) {
    flex: 0 0 auto;
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.contract-info-summary-context .contract-info-toolbar-field .field-control-line {
    flex: 0 1 var(--modern-input-width);
    width: var(--modern-input-width);
    min-width: min(var(--modern-input-width), 100%);
}
.contract-info-summary-context .contract-info-anshin {
    position: static;
    z-index: auto;
    margin: 0;
    padding: 5px 12px;
    font-size: 12px;
    letter-spacing: normal;
    white-space: nowrap;
}

/* この画面で直接組み直した小さな field group は、外枠をカードへ一本化する。 */
.contract-info-surface .contract-info-field-groups { gap: 0; padding: 0; }
.contract-info-surface .contract-info-field-groups > .field-group,
.contract-info-surface .contract-info-field-groups > .field-group > .field-grid[data-field-layout="modern-form"] {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
.contract-info-surface .contract-info-field-groups .field > label:not(.check-field) {
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}
.contract-info-surface .contract-info-field-groups .check-field { font-size: 13px; }

/* Why: 仮更新の帳票だけは契約情報と同じ field group の余白と見出しを使う。 */
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group { gap: 0; padding: 0; }
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group > .field-section,
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group > .field-section > .field-grid[data-field-layout="modern-form"] {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group .field > label:not(.check-field) {
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group .check-field { font-size: 13px; }

/* 契約の二行は座標 grid の列幅を持ち込まず、項目名と内容幅の入力を一組として折り返す。 */
.contract-info-summary-card { padding: 14px var(--contract-card-inline-padding) 16px; }
.contract-info-summary-card .field-grid[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    padding: 0;
}
.contract-info-summary-card .modern-run { display: contents; }
.contract-info-summary-card .field {
    display: grid;
    flex: 0 1 auto;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}
.contract-info-summary-card .field > label:not(.check-field) { white-space: nowrap; }
.contract-info-summary-card .field-control-line {
    width: var(--modern-input-width, 18rem);
    max-width: 100%;
}
.contract-info-summary-card .contract-info-summary-contractor.field-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
}
.contract-info-summary-card .contract-info-summary-contractor.field-groups > .field-section {
    flex: 0 1 auto;
    min-width: 0;
}
.contract-info-contractor-action { flex: 0 0 auto; }

/* 明細だけは表自身の中で横に送る。精算金額・合計と請求書発行は同じ操作行に置く。 */
.contract-info-detail-body { min-width: 0; padding: 14px var(--contract-card-inline-padding) 16px; }
.contract-info-detail-card .contract-fee-grid { min-width: 0; border: 0; }
.contract-info-detail-card .contract-fee-grid > .sengu-record-grid { border: 1px solid var(--line); }
/* 外枠も field-groups なので、共通の display:grid よりこの面の指定を詳しくして操作を一行に保つ。 */
.contract-info-surface .contract-info-detail-totals.contract-info-field-groups.field-groups[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}
.contract-info-detail-totals > .field-group { min-width: 0; }
.contract-info-detail-totals .field-grid[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    padding: 0;
}
.contract-info-detail-totals .modern-run { display: contents; }
.contract-info-detail-totals .field {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}
.contract-info-detail-totals .field-control-line { width: var(--modern-input-width, 8.5em); }
.contract-info-bill-action { flex: 0 0 auto; }

/* 現時点の賃料は既定を一組ずつの縦並びにする。560pxを取れるときだけ、
   金額4組と条件4組を左右へ置く。二つの group の DOM 順は変えない。 */
.contract-info-current-body {
    min-width: 0;
    padding: 14px var(--contract-card-inline-padding) 16px;
    container-type: inline-size;
    container-name: contract-current;
}
/* contract-info-field-groups の gap:0 より詳しくし、意図した行間を打ち消させない。 */
.contract-info-surface .contract-info-current-columns.contract-info-field-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
}
.contract-info-current-group { min-width: 0; container-type: inline-size; }
.contract-info-surface .contract-info-current-group .field-grid[data-field-layout="modern-form"] {
    gap: 8px;
    padding: 0;
}
.contract-info-surface .contract-info-current-group .field {
    grid-template-columns: var(--contract-info-label-width) minmax(0, 1fr);
}
.contract-info-surface .contract-info-current-group .field-control-line {
    width: var(--modern-input-width, 18rem);
    max-width: 100%;
}
.contract-info-surface .contract-info-current-period.contract-info-field-groups[data-field-layout="modern-form"] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}
.contract-info-surface .contract-info-current-period .field-grid[data-field-layout="modern-form"] { padding: 0; }
.contract-info-current-period .modern-run {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
}
.contract-info-current-period .modern-run > .field:first-child { display: contents; }
.contract-info-current-period .modern-run > .field:first-child > label:not(.check-field) {
    flex: 0 0 var(--contract-info-label-width);
}
.contract-info-current-period .modern-run > .field:first-child > .field-control-line {
    flex: 1 1 var(--modern-input-width, 10.5em);
    width: var(--modern-input-width, 10.5em);
    min-width: 6em;
}
.contract-info-current-period .modern-run > .field:not(:first-child) {
    display: contents;
}
.contract-info-current-period .modern-run > .field:not(:first-child) > .field-control-line {
    flex: 1 1 var(--modern-input-width, 10.5em);
    width: var(--modern-input-width, 10.5em);
    min-width: 6em;
    max-width: 100%;
}
.contract-info-current-period .modern-run > .field > .check-field { flex: 0 0 auto; }

@container contract-current (min-width: 560px) {
    .contract-info-surface .contract-info-current-columns.contract-info-field-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
}

/* 契約時の一段目は旧の四つの列見出しをそのまま使う。二段目の正しい名前は
   DOM の label に残るが visually-hidden なので、一段目の見出しを繰り返さない。 */
.contract-at-signing-body {
    min-width: 0;
    padding: 14px var(--contract-card-inline-padding) 16px;
    container-type: inline-size;
    container-name: contract-at-signing;
}
.contract-at-signing-fields .field-grid[data-field-layout="modern-form"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 14px;
    padding: 0;
}
/* 共通 modern-run の display:flex より詳しい、この枠だけの opt-in。二段とも同じ grid 列を使う。 */
.contract-info-surface .contract-at-signing-fields.field-groups[data-field-layout="modern-form"] .modern-run {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 14px;
}
.contract-at-signing-fields .modern-run > .field {
    display: block;
    max-width: 100%;
}
.contract-at-signing-fields .field > label:not(.check-field) {
    min-height: 1.35em;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.contract-at-signing-fields .field-control-line {
    width: var(--modern-input-width, 10.5em);
    max-width: 100%;
}
.contract-info-surface .contract-at-signing-flags.contract-info-field-groups[data-field-layout="modern-form"] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
}
.contract-info-surface .contract-at-signing-flags .field-grid[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0;
}
.contract-info-surface .contract-at-signing-flags .field-grid[data-field-layout="modern-form"] > :is(.field, .modern-run) { display: contents; }
.contract-info-surface .contract-at-signing-flags .check-field { flex: 0 0 auto; }
.contract-at-signing-memos { margin-top: 12px; }
.contract-info-surface .contract-at-signing-memos .field-grid[data-field-layout="modern-form"] {
    gap: 8px;
    padding: 0;
}
.contract-info-surface .contract-at-signing-memos .field {
    grid-template-columns: var(--contract-info-label-width) minmax(0, 1fr);
}
.contract-info-surface .contract-at-signing-memos .field-control-line { width: 100%; }
.contract-at-signing-memos textarea { min-height: 52px; }

@container contract-at-signing (max-width: 559px) {
    .contract-info-surface .contract-at-signing-fields.field-groups[data-field-layout="modern-form"] .modern-run {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@container contract-at-signing (max-width: 319px) {
    .contract-info-surface .contract-at-signing-fields.field-groups[data-field-layout="modern-form"] .modern-run {
        grid-template-columns: minmax(0, 1fr);
    }
}

.contract-info-tabs-card > .field-groups[data-field-layout="modern-form"] .field-tablist { flex-wrap: wrap; }
.contract-info-documents { min-width: 0; }
.contract-info-documents .legacy-document-images,
.contract-info-documents .contract-document-downloads { max-width: 100%; }

/* 帳票印刷は旧座標の異なる枠を一枚の grid に混ぜず、意味上の一行を三列の表として描く。
   各 field と action は共通の描画を使い、狭いタブ枠では同じ行の中身ごと縦へ送る。 */
.contract-info-surface .contract-info-print {
    min-width: 0;
    container-type: inline-size;
    container-name: contract-info-print;
}
.contract-info-surface .contract-info-print-note {
    margin: 0 0 12px;
    color: var(--muted);
}
.contract-info-surface .contract-info-print-flags { margin-bottom: 12px; }
.contract-info-surface .contract-info-print-flags .field-grid[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0;
}
.contract-info-surface .contract-info-tabs-card .contract-info-print-flags .field-grid[data-field-layout="modern-form"] > :is(.field, .modern-run),
.contract-info-surface .contract-info-tabs-card .contract-info-print-actions .field { display: contents; }
.contract-info-surface .contract-info-tabs-card .contract-info-print-flags .check-field,
.contract-info-surface .contract-info-tabs-card .contract-info-print-actions .check-field {
    display: inline-flex;
    flex: 0 0 auto;
}
.contract-info-surface .contract-info-print-table {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    gap: 8px 12px;
}
.contract-info-surface .contract-info-print-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 12px;
    align-items: center;
    min-width: 0;
}
.contract-info-surface .contract-info-print-row-label {
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
}
.contract-info-surface .contract-info-print-row-label .legacy-static-label {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
/* modern-form の inline-size containment を座標の内側へ持ち込むと、中身が外側の
   max-content 列へ幅を伝えず 0px になる。帳票印刷の座標 wrapper と実 DOM の子だけ解除する。 */
.contract-info-surface .contract-info-tabs-card .contract-info-print .contract-info-print-field-group.field-groups[data-field-layout="modern-form"],
.contract-info-surface .contract-info-tabs-card .contract-info-print .contract-info-print-field-group.field-groups[data-field-layout="modern-form"] * {
    container-type: normal;
}
.contract-info-surface .contract-info-print-field-group,
.contract-info-surface .contract-info-print-field-group > .field-group { min-width: 0; }
.contract-info-surface .contract-info-print-field-group > .field-group,
.contract-info-surface .contract-info-print-field-group > .field-group > .field-grid[data-field-layout="modern-form"] {
    margin: 0;
    border: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
}
.contract-info-surface .contract-info-print-row .contract-info-print-field-group > .field-group > .field-grid[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    width: max-content;
    max-width: none;
}
.contract-info-surface .contract-info-tabs-card .contract-info-print .contract-info-print-field-group .modern-run {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px 10px;
    width: max-content;
}
.contract-info-surface .contract-info-tabs-card .contract-info-print-row .field {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    align-items: center;
    min-width: 0;
}
.contract-info-surface .contract-info-tabs-card .contract-info-print-row .field > label:not(.check-field) {
    flex: 0 0 auto;
    white-space: nowrap;
}
.contract-info-surface .contract-info-tabs-card .contract-info-print .contract-info-print-field-group.field-groups .modern-run > .field > label:not(.check-field) {
    flex: 0 0 auto;
    width: max-content;
}
.contract-info-surface .contract-info-tabs-card .contract-info-print-row .field-control-line {
    flex: 0 0 var(--modern-input-width, 4em);
    width: var(--modern-input-width, 4em);
    min-width: 3em;
}
.contract-info-surface .contract-info-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.contract-info-surface .contract-info-print-row[data-print-row="revision"] > .contract-info-print-field-group { grid-column: 2 / -1; }
.contract-info-surface .contract-info-print-staff { margin-top: 12px; }
.contract-info-surface .contract-info-tabs-card .contract-info-print-staff .field-grid[data-field-layout="modern-form"] { padding: 0; }
.contract-info-surface .contract-info-tabs-card .contract-info-print-staff .field {
    grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
    gap: 8px;
}
.contract-info-surface .contract-info-tabs-card .contract-info-print-staff .field-control-line {
    width: var(--modern-input-width, 18em);
    max-width: 100%;
}

/* 最長の項目名 + X/Y 二組 + 帳票操作を取れる 560px 未満では、三つの組を一列ずつ積む。 */
@container contract-info-print (max-width: 559px) {
    .contract-info-surface .contract-info-print-table { grid-template-columns: minmax(0, 1fr); }
    .contract-info-surface .contract-info-print-row { grid-template-columns: minmax(0, 1fr); }
    .contract-info-surface .contract-info-print-row[data-print-row="revision"] > .contract-info-print-field-group { grid-column: auto; }
    .contract-info-surface .contract-info-print-row > [aria-hidden="true"] { display: none; }
    .contract-info-surface .contract-info-print-row .contract-info-print-field-group > .field-group > .field-grid[data-field-layout="modern-form"],
    .contract-info-surface .contract-info-tabs-card .contract-info-print .contract-info-print-field-group .modern-run {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }
}

/* Why: 仮更新の帳票印刷も三列の行構造を使い、旧座標の違う欄を同じ行へ置く。
   各 field と action は共通の描画を使い、狭いタブ枠では同じ行の中身ごと縦へ送る。 */
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print {
    min-width: 0;
    container-type: inline-size;
    container-name: contract-info-print;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-note {
    margin: 0 0 12px;
    color: var(--muted);
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-flags { margin-bottom: 12px; }
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-flags .field-grid[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 0;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-flags .field-grid[data-field-layout="modern-form"] > :is(.field, .modern-run),
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-flags .modern-run > .field,
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-actions .field { display: contents; }
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-flags .check-field,
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-actions .check-field {
    display: inline-flex;
    flex: 0 0 auto;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-table {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    gap: 8px 12px;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 12px;
    align-items: center;
    min-width: 0;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row-label {
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row-label .legacy-static-label {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}
/* modern-form の inline-size containment を座標の内側へ持ち込むと、中身が外側の
   max-content 列へ幅を伝えず 0px になる。帳票印刷の座標 wrapper と実 DOM の子だけ解除する。 */
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print .contract-info-print-field-group.field-groups[data-field-layout="modern-form"],
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print .contract-info-print-field-group.field-groups[data-field-layout="modern-form"] * {
    container-type: normal;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group,
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group > .field-group { min-width: 0; }
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group > .field-group,
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-field-group > .field-group > .field-grid[data-field-layout="modern-form"] {
    margin: 0;
    border: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .contract-info-print-field-group > .field-group > .field-grid[data-field-layout="modern-form"],
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .contract-info-print-field-group > .field-section > .field-grid[data-field-layout="modern-form"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
    width: max-content;
    max-width: none;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print .contract-info-print-field-group .modern-run {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px 10px;
    width: max-content;
}
/* Why: 仮更新の重説は旧 Y 座標が異なり、更新回数は四つの旧欄で幅を使う。
   帳票の行を旧座標や途中の折返しで分けず、契約情報と同じ一組で読ませる。 */
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .contract-info-print-field-group > .field-section > .field-grid[data-field-layout="modern-form"],
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .contract-info-print-field-group .modern-run {
    flex-wrap: nowrap;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .field {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    align-items: center;
    min-width: 0;
}
/* Why: X・Y を包む行の間隔を座標二欄の共通の 10px にそろえる。 */
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .modern-run > .field {
    display: contents;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .field > label:not(.check-field) {
    flex: 0 0 auto;
    white-space: nowrap;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print .contract-info-print-field-group.field-groups .modern-run > .field > label:not(.check-field) {
    flex: 0 0 auto;
    width: max-content;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .field-control-line {
    flex: 0 0 var(--modern-input-width, 4em);
    width: var(--modern-input-width, 4em);
    min-width: 3em;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-width: 0;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row[data-print-row="revision"] > .contract-info-print-field-group { grid-column: 2 / -1; }
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-staff { margin-top: 12px; }
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-staff .field-grid[data-field-layout="modern-form"] { padding: 0; }
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-staff .field {
    grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
    gap: 8px;
}
.kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-staff .field-control-line {
    width: var(--modern-input-width, 18em);
    max-width: 100%;
}

/* 最長の項目名 + X/Y 二組 + 帳票操作を取れる 560px 未満では、三つの組を一列ずつ積む。 */
@container contract-info-print (max-width: 559px) {
    .kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-table { grid-template-columns: minmax(0, 1fr); }
    .kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row { grid-template-columns: minmax(0, 1fr); }
    .kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row[data-print-row="revision"] > .contract-info-print-field-group { grid-column: auto; }
    .kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row > [aria-hidden="true"] { display: none; }
    .kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .contract-info-print-field-group > .field-group > .field-grid[data-field-layout="modern-form"],
    .kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print-row .contract-info-print-field-group > .field-section > .field-grid[data-field-layout="modern-form"],
    .kari-modern-surface .contract-print-surface.contract-parties-card .contract-info-print .contract-info-print-field-group .modern-run {
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
    }
}

/* 左420px + 右560px + 間隔14px = 994px。994pxを取れる間は承認済みの二列を保ち、
   その1px下からだけ右列を左列の下へ送る。 */
@container contract-split (max-width: 993px) {
    .contract-info-workspace { grid-template-columns: minmax(0, 1fr); }
}

@container contract-split (max-width: 560px) {
    .contract-info-summary-card { padding-inline: var(--contract-card-inline-padding); }
    .contract-info-summary-card .field { flex: 1 1 100%; }
    .contract-info-summary-card .field-control-line { width: 100%; }
    .contract-info-summary-contractor > .field-group { flex: 1 1 100%; }
}

/* 工事台帳の基本項目は、外側の編集面が 860px 前後になるデスクトップでも 2 組を比較して
   読める幅がある。共通の container query はその幅を 1 組へ畳むため、ここだけ旧座標ではなく
   SequentialPairFormOf が付けた組・行を優先する。480px 以下では共通の 1 列表示を使う。 */
@container (min-width: 481px) {
    .kouji-editor .edit-surface .field-groups > section[data-field-container="base"] > .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] {
        /* MasterModernFormLayout の cluster は [caption, value, spacer] の 3 列単位。
           2 組目は 4/5 列へ置くため、4 列定義にすると暗黙列が追加されて行が崩れる。 */
        grid-template-columns: repeat(2, max-content minmax(0, 1fr) minmax(1rem, 1fr));
        gap: 8px 24px;
    }

    .kouji-editor .edit-surface .field-groups > section[data-field-container="base"] > .field-grid[data-field-layout="modern-form"][data-modern-grid="form"] > * {
        grid-column: var(--modern-column, 1 / -1) !important;
        grid-row: var(--modern-row, auto) !important;
    }
}

.staff-avatar-editor { display: grid; grid-template-columns: 150px minmax(240px, 1fr); gap: 14px; align-items: center; padding: 12px; background: #fff; }
.staff-avatar-preview { display: grid; place-items: center; width: 128px; height: 128px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-header); color: #596a76; font: 10px ui-monospace, monospace; }
.staff-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.staff-avatar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.staff-avatar-actions input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.staff-avatar-actions small { flex-basis: 100%; color: var(--muted); }
.staff-avatar-actions .field-error { flex-basis: 100%; color: var(--danger); }
.staff-avatar-actions .disabled { opacity: 1; background: #f1f3f4; border-color: #ced6da; color: #8e9499; cursor: not-allowed; pointer-events: none; }
.staff-license-file { margin: 0 12px 12px; padding: 8px 10px; border-left: 3px solid var(--teal); background: var(--teal-soft); font: 11px ui-monospace, monospace; }

.legacy-collections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.collection-placeholder { display: grid; grid-template-columns: 1fr auto; padding: 12px; border: 1px dashed var(--line-strong); background: var(--surface-dim); }
.collection-placeholder span { color: var(--muted); font: 10px ui-monospace, monospace; }
.collection-placeholder strong { color: var(--navy); }
.collection-placeholder small { grid-column: 1 / 3; margin-top: 10px; color: var(--teal); }
.embedded-grid { margin: 0 12px 12px; border: 1px solid var(--line); background: #fff; }
.embedded-grid > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--line); background: #f6f4ec; }
.embedded-grid h3 { margin: 1px 0 0; font-size: 13px; }
/* この枠で溢れた表は枠の中だけを流す。中に focusable が 1 つも無い枠は、Chrome 152 ではその形の
   ときだけ枠自身が自動で Tab 対象になり、枠内に操作要素が 1 つ増えた瞬間その自動付与は外れて
   枠へ入る手段が消える（どちらも Chrome 152 で実測）。ブラウザと将来の増改築に左右させないため、
   中身が読むだけの表になる枠には razor 側で tabindex="0" と role・aria-label を明示している。
   焦点の枠は :focus-visible（3px var(--focus)）が出す。
   role を伴うのは、div の暗黙ロールが generic で、ARIA 1.2 5.2.8.6 が generic を
   「naming prohibited」に挙げ aria-label / aria-labelledby での命名を MUST NOT としているため。
   role を landmark の region ではなく group にしたのは、11 箇所のうち 10 箇所が名前を持つ
   <section>（= それ自体が region landmark）の内側にあり、region を足すと landmark 一覧に
   親とほぼ同名のものが二重に並ぶから（Chrome の AX ツリーで landmark 3→4 件を実測）。
   ARIA 1.2 の group は「page summary / table of contents に載せない集合」で、
   名前は author から付けられる。名前付き section の外にある取込プレビューも同じ role に揃える。 */
.table-scroll, .data-grid-wrap { overflow: auto; max-height: 340px; }
.embedded-grid table { width: 100%; border-collapse: collapse; font-size: var(--grid-font); }
.embedded-grid th, .embedded-grid td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.embedded-grid th { position: sticky; top: 0; z-index: 1; background: #efede5; color: var(--muted); }
.embedded-grid tbody tr:hover, .embedded-grid tbody tr.selected { background: var(--teal-soft); }
.embedded-grid .empty-cell { padding: 22px; text-align: center; color: var(--muted); cursor: default; }
.embedded-grid td input, .embedded-grid td select { width: 100%; min-width: 92px; border: 1px solid var(--line-warm); border-radius: var(--control-radius); background: #fff; padding: 6px 7px; font: inherit; }
.embedded-grid td .grid-number { min-width: 64px; text-align: right; }
.embedded-grid-actions { display: flex; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--line); background: #faf9f5; }

/* .data-grid は仮更新明細・クレーム一覧・業者選択・物件検索・クレーム集計の 6 画面が使うが
   CSS のどこにも定義が無く、素の HTML テーブルとして出ていた。寸法・枠・見出しの固定は
   上の embedded-grid と同値にして同じ家族に見せる。面の色だけ寒色トークンで置くのは、
   embedded-grid の暖色面（#f6f4ec / #efede5 / #faf9f5）が生値でトークンを持たず、
   生値を増やすと CssRawColorBudgetTests の高水位を超えて落ちるため参照できないから */
.data-grid { width: 100%; border-collapse: collapse; background: var(--surface); font-size: var(--grid-font); }
.data-grid th, .data-grid td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
/* border-collapse: collapse の表では、sticky にした th の border は本文側と共有されたまま
   一緒に流れて見出しの下に残らない。区切り線は内側の影で引き直す */
.data-grid thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-header); box-shadow: inset 0 -1px 0 var(--line); color: var(--label); }
/* 見出しが 2 段ある表（クレーム集計の伝票別）で 2 段目まで top: 0 に貼ると、後から描かれる
   2 段目が 1 段目を覆って伝票名が読めなくなる。2 段目は貼らず 1 段目の下へ潜らせる */
.data-grid thead tr + tr th { position: static; box-shadow: none; }
.data-grid tbody tr:hover { background: var(--hover); }
.data-grid tbody tr.selected { background: var(--row-selected); }
.data-grid tfoot th, .data-grid tfoot td { border-top: 1px solid var(--line); border-bottom: 0; background: var(--surface-dim); }
.data-grid td input, .data-grid td select { width: 100%; min-width: 92px; border: 1px solid var(--line-warm); border-radius: var(--control-radius); background: var(--surface); padding: 6px 7px; font: inherit; }
/* 先頭列の選択欄にまで width: 100% / min-width: 92px が乗ると、チェックとラジオが列いっぱいに
   伸びて選択列が本文列を押し縮める。真偽値の入力だけ素の寸法へ戻す */
.data-grid td input[type="checkbox"], .data-grid td input[type="radio"] { width: auto; min-width: 0; }

/* .link-button の定義は .auth-form 配下にしかなく、その外で使うクレームの 3 画面
   （一覧の受付NO・業者選択の業者名・物件検索の建物名）は素の button のまま出ていた。
   3 つとも上の .data-grid のセルの中にあるため、表の行に既定の分厚いボタンが 1 つだけ盛り上がる。
   押すと対象を開く操作なので、見えは本文リンク（a）と同じ --teal・下線は hover のときだけに揃える。
   font と cursor は上の button 一括指定が既に与えているので繰り返さない。
   .auth-form 側はここで置くプロパティを全て上書きしており、順序も後なのでログイン画面は変わらない */
.link-button { padding: 0; border: 0; background: none; color: var(--teal); }
.link-button:hover { text-decoration: underline; }
.maintenance-grid { margin-top: 12px; }
.maintenance-grid .table-scroll { max-height: 540px; }
.maintenance-grid table { min-width: 1720px; }
.maintenance-grid tbody tr.selected { background: var(--teal-soft); }
.maintenance-grid .vendor-cell { display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 4px; }
.maintenance-grid .grid-check { text-align: center; }
.maintenance-grid .grid-check input { min-width: 0; width: 16px; }
.maintenance-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--line); background: #faf9f5; }
.schedule-grid table { min-width: 1540px; }
.schedule-grid .statutory-row > td:nth-child(2) { background: #96c896; }
.schedule-cell { min-width: 76px; }
.schedule-cell input[type="text"], .schedule-cell > input:not([type]) { min-width: 34px; width: 38px; padding: 5px 3px; text-align: center; }
.schedule-cell label { display: inline-flex; align-items: center; gap: 2px; margin-left: 3px; color: var(--muted); font-size: 10px; }
.schedule-cell label input { min-width: 0; width: 13px; }
.schedule-cell.schedule-incomplete { background: #ffff00; }
.schedule-cell.schedule-complete { background: #ffc0ff; }
.master-search-bar { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; padding: 10px 11px; border-bottom: 1px solid var(--line); background: #faf9f5; }
.master-search-bar > input { flex: 1; min-width: 220px; min-height: 32px; border: 1px solid var(--line-warm); border-radius: var(--control-radius); padding: 4px 9px; }
.master-search-bar > label:not(.master-search-check) { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.master-search-bar select, .master-search-bar label input:not([type="checkbox"]) { min-width: 92px; min-height: 32px; border: 1px solid var(--line-warm); border-radius: var(--control-radius); background: #fff; padding: 4px 8px; }
.master-search-check { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; color: var(--ink); font-size: 11px; }
.transfer-reference-board { border: 1px solid var(--line); background: #fff; }
.reference-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; }
.reference-split .embedded-grid { margin: 0; }
.candidate-row { background: #fff0c7; font-weight: 700; }
.additional-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .postal-selectors { grid-template-columns: 1fr; }
  .account-fields { grid-template-columns: 1fr; }
  .staff-avatar-editor { grid-template-columns: 1fr; }
}

.import-panel { max-width: 1440px; margin: 0 auto 14px; background: #fff; border: 1px solid var(--line); }
.import-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: var(--surface-header); border-bottom: 1px solid var(--line); }
.import-panel h2 { margin: 1px 0 0; color: var(--navy); font-size: 15px; }
.import-panel > header > span { color: #596a76; font-size: 10px; }
.import-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
.import-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.import-controls input[type="file"], .import-controls select { min-height: 32px; padding: 4px 7px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
/* 読むだけの枠なので tabindex と role は razor 側で明示する（理由は .table-scroll と同じ） */
.workbook-preview { overflow: auto; max-height: 260px; margin: 0 14px; border: 1px solid var(--line-soft); }
.workbook-preview table { width: 100%; border-collapse: collapse; font-size: 10px; }
.workbook-preview td { max-width: 220px; padding: 5px 7px; overflow: hidden; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-overflow: ellipsis; white-space: nowrap; }
.workbook-preview tr:first-child { background: var(--navy); color: white; }
.preview-note, .import-error { margin: 7px 14px 11px; color: var(--muted); font-size: 10px; }
.import-error { padding: 7px 9px; color: var(--danger); background: var(--danger-soft); }

.record-panel > header strong { color: var(--teal); font: 13px ui-monospace, monospace; }
.select-col { text-align: center; }
.ichiran-table th.select-col,
.ichiran-table td.select-col,
.data-grid th.select-col,
.data-grid td.select-col,
.embedded-grid th.select-col,
.embedded-grid td.select-col { width: 1%; min-width: 34px; padding-inline: 5px; white-space: nowrap; }
.sengu-record-grid-head > .select-col,
.sengu-record-grid-row > .select-col { padding-inline: 5px; text-align: center; }
.empty-records { display: grid; place-items: center; min-height: 78px; color: var(--muted); }
.grid-help { margin: 0; padding: 8px 12px; color: var(--muted); border-top: 1px solid var(--line-soft); font-size: 10px; }
.grid-export-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 0 0 6px; }
.grid-export-menu { display: inline-flex; gap: 6px; padding: 6px; border: 1px solid var(--line); background: #fff; box-shadow: 0 3px 10px rgb(var(--shadow-rgb) / .12); }
.record-panel:has(> header + .grid-export-toolbar) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.record-panel:has(> header + .grid-export-toolbar) > header { grid-column: 1; grid-row: 1; }
.record-panel:has(> header + .grid-export-toolbar) > .grid-export-toolbar { position: relative; grid-column: 2; grid-row: 1; padding: 6px 15px 6px 0; border-bottom: 1px solid var(--line); background: var(--surface-header); }
.record-panel:has(> header + .grid-export-toolbar) > .grid-export-toolbar .grid-export-menu { position: absolute; top: 100%; right: 15px; z-index: 5; white-space: nowrap; }
.record-panel:has(> header + .grid-export-toolbar) > :not(header):not(.grid-export-toolbar) { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 600px) {
  .record-panel:has(> header + .grid-export-toolbar) { grid-template-columns: minmax(0, 1fr); }
  .record-panel:has(> header + .grid-export-toolbar) > .grid-export-toolbar { grid-column: 1; grid-row: 2; padding: 6px 15px; }
}
.sengu-record-grid { overflow: auto; max-height: 62vh; min-height: 80px; border: 1px solid var(--line); background: #fff; font-size: var(--grid-font); }
.sengu-record-grid-head, .sengu-record-grid-row { display: grid; min-width: max-content; }
/* Why: 見出しと各行は別々の grid で、行ごとに自分の中身から列幅を決める。上の max-content だと 1fr の列が行の中で
   一番長いセルの幅まで広がり、長い件名・支払先を持つ行だけが見出しより広がって、行ごとに違う量だけ列がずれた
   （SNG-874。支払指示の 1,280px 幅で見出し 1,320px に対し行は 1,356〜5,388px、2026-09-26、bUnit 描画＋app.css の
   静的ページで計測）。min-content の計算では 1fr を 0 として列の最小値だけを数える
   （https://www.w3.org/TR/css-grid-1/#algo-flex-tracks）ので、どの行も見出しと同じ幅になる。ただし最小値が
   既定の 110px のままの列では、入らないコード・日付が「…」で切れる（入金の消込・契約履歴一覧で起きた）。
   旧の列幅を下限に渡した一覧（SenguGridColumn.Legacy、data-legacy-width-tracks）だけに絞る。 */
.sengu-record-grid[data-legacy-width-tracks="true"] .sengu-record-grid-head,
.sengu-record-grid[data-legacy-width-tracks="true"] .sengu-record-grid-row { min-width: min-content; }
.sengu-record-grid-head { position: sticky; top: 0; z-index: 2; color: #fff; background: var(--navy); }
.sengu-record-grid-head > span, .sengu-record-grid-head > .grid-sort, .sengu-record-grid-row > span { min-height: 34px; overflow: hidden; padding: 7px 8px; border: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: transparent; color: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.sengu-record-grid-head > .grid-sort { display: flex; align-items: center; justify-content: space-between; gap: 5px; font: inherit; }
/* Why: 列幅を ch（その要素の書体の「0」の幅）で決める一覧（SenguGridColumn.LegacyWidth）は、見出し行と明細行の
   文字の大きさ・太さが違うと同じ calc が別の幅になり、見出しと値の列がずれる（太字の「0」は細字より広い）。
   見出しの 10px・太字は行ではなく見出しのセルに付ける（SNG-874）。 */
.sengu-record-grid-head > *, .sengu-record-grid-head > .grid-sort { font-size: 10px; font-weight: 700; }
.sengu-record-grid-row:nth-child(even) { background: var(--surface-dim); }
.sengu-record-grid-row:hover { background: var(--hover); }
.sengu-record-grid-row.selected { outline: 2px solid var(--teal); outline-offset: -2px; }
.sengu-record-grid-row.related { background: var(--row-related); }
.sengu-record-grid-row.state-paid { background: #dcefed; }
.sengu-record-grid-row.state-rent-due { background: var(--row-rent-due); }
.sengu-record-grid-row.state-rent-paid { background: #fff5c7; }
.sengu-record-grid-row.state-canceled { background: #eee4d3; }
.sengu-record-grid-row.state-difference { color: #155ca8; }
.sengu-record-grid-row.state-managed-out { background: #d9d9d9; }
.sengu-record-grid-row.state-fixed-term { background: #ffffe0; color: #000; }
.sengu-record-grid-row.state-caution { background: #ff8080; color: #571212; }
.sengu-record-grid-row.state-move-out-planned { background: #87ceeb; color: #000080; }
/* 旧 FlexGrid は Rows.Frozen = 1 と Total スタイルを同時に設定する。照合時に常に見える必要があるため、仮想化する明細とは別の固定行として描画する。 */
.sengu-record-grid-row.soukin-total, .sengu-record-grid-row.soukin-total:hover { position: sticky; top: 34px; z-index: 1; background: #ffffc0; color: #000; font-weight: 700; cursor: default; }
/* 左右 12px は embedded-grid の内側余白と同じ値。ボタンの右端を一覧の右端に揃える。 */
.soukin-csv-export { display: flex; justify-content: flex-end; margin: 14px 12px 10px; }
/* Why: JS が同期したネイティブの中間状態をブラウザ標準の表示へ渡す。 */
:where(input[data-sengu-check-all]:indeterminate) { accent-color: var(--teal); }
/* TsFlexGrid の Deleted / SelectDeleteRow / Kessai / Kyakka を、一覧の種別によらず同じ値で再現する。 */
.ichiran-table tr.legacy-deleted > td, .ichiran-table tr.legacy-deleted:hover > td, tr.legacy-deleted > td, .sengu-record-grid-row.legacy-deleted > span { background: #fff; color: #767676; }
.ichiran-table tr.legacy-select-deleted > td, .ichiran-table tr.legacy-select-deleted:hover > td, tr.legacy-select-deleted > td, .sengu-record-grid-row.legacy-select-deleted > span { background: #1259a2; color: #dcdcdc; }
.ichiran-table tr.legacy-kessai > td, .ichiran-table tr.legacy-kessai:hover > td, tr.legacy-kessai > td, .sengu-record-grid-row.legacy-kessai > span { background: #ffffc0; color: #000; }
.ichiran-table tr.legacy-kyakka > td, .ichiran-table tr.legacy-kyakka:hover > td, tr.legacy-kyakka > td, .sengu-record-grid-row.legacy-kyakka > span { background: lightpink; color: #7a2230; }
/* Why: 明細行の min-width: max-content は入力欄の intrinsic width を列幅へ加え、
   パーセント幅は intrinsic size の計算では auto 扱いになるため width: 100% では抑えられない。
   チェック欄以外を width: 0 で計算対象から外し、min-width: 100% でセル幅まで戻す。
   NskYosan/EditKouji.vb:187-230、EditKaigisyo.vb:418-521、
   EditUriage.vb:164-267、Bunkatsu.vb:43-70。 */
.sengu-grid-cell.editable { min-width: 0; padding: 2px; }
.sengu-grid-cell.editable input:not([type=checkbox]), .sengu-grid-cell.editable select { box-sizing: border-box; width: 0; min-width: 100%; }
.sengu-grid-cell.editable input { min-height: 29px; border: 1px solid var(--line-strong); padding: 4px 6px; }
/* 退居・成約の明細の科目セル（SNG-960）。候補一覧（LegacyAutocomplete と同じ見た目）がセルと表の外枠で切れないよう、
   候補つきのセルと、一覧が開いている間の明細の表だけ、はみ出しを許す。名称の長い科目も読めるよう一覧の幅は確保する。 */
.sengu-record-grid-row > span.sengu-grid-choice { overflow: visible; }
.sengu-grid-choice .legacy-autocomplete-candidates { min-width: 12rem; }
.contract-fee-grid > .sengu-record-grid:has(.legacy-autocomplete-candidates),
.contract-detail-card .contract-fee-grid > .sengu-record-grid:has(.legacy-autocomplete-candidates) { overflow: visible; }
/* はみ出しを許す間は表がスクロール容器でなくなり、見出しの sticky が外側の作業面に貼り付いて、見えている行を覆う。
   開いている間は見出しを表の上端に置いたままにする。 */
.contract-fee-grid > .sengu-record-grid:has(.legacy-autocomplete-candidates) .sengu-record-grid-head { position: relative; }
.sengu-grid-actions { display: flex; align-items: center; gap: 4px; overflow: visible !important; white-space: normal !important; }
.sengu-grid-actions .command { min-height: 25px; padding: 3px 6px; font-size: 10px; }
.grid-total { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-top: 0; text-align: right; }

.not-found-card { padding: 28px; }

.main-search-surface, .main-action-bar { max-width: 1440px; margin: 0 auto 10px; border: 1px solid var(--line); background: #fff; }
.main-search-fields { display: grid; grid-template-columns: 150px minmax(220px, 1fr) 120px auto; gap: 8px; align-items: end; padding: 11px; background: var(--surface-header); }
.main-search-fields label { display: grid; gap: 3px; color: var(--label); font-size: 10px; font-weight: 700; }
.main-search-fields input, .main-search-fields select { min-height: 32px; border: 1px solid var(--line-strong); background: #fff; padding: 4px 8px; }
.main-mode-buttons, .main-action-bar { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; }
.main-mode-buttons .command { min-width: 82px; }
.main-mode-buttons .active-mode { border-color: #4e9a68; background: #d8f1de; }
.main-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 8px; }
.legend-chip { border: 1px solid var(--line-strong); border-radius: 2px; padding: 2px 8px; font-size: 11px; color: #596a76; background: var(--surface-dim); }
.main-action-bar { min-height: 50px; }

/* 募集検索・編集は、表で物件を選んでから操作する画面。既存の操作ボタンを並べ替えず、
   表の直後で選択件数と一緒に読める帯へまとめる。 */
.bosyu-main-surface .field-groups { display: flex; flex-wrap: wrap; align-items: stretch; padding: 0; }
.bosyu-main-surface .field-groups > .field-section { flex: 1 0 100%; min-width: 0; }
.bosyu-main-surface .field-groups > .field-action { flex: 0 0 auto; margin: 0; padding: 0 0 10px; }
.bosyu-main-surface .field-groups > .field-action:first-of-type { padding-left: 12px; }
.bosyu-main-surface .field-groups > .field-action > .command { width: auto; min-height: 34px; border-radius: 0; border-right-width: 0; }
.bosyu-main-surface .field-groups > .field-action:last-of-type { padding-right: 12px; }
.bosyu-main-surface .field-groups > .field-action:last-of-type > .command { border-right-width: 1px; }
.bosyu-main-action-status { display: flex; flex: 1 0 100%; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-top: 1px solid var(--line); background: var(--surface-header); color: var(--muted); font-size: 12px; }
.bosyu-main-action-status strong { color: var(--navy); font-size: 13px; }
.bosyu-main-action-status:has(+ .field-action .command:disabled) { border-bottom: 1px solid var(--line-soft); }
.main-screen-guide { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 10px 0; padding: 9px 12px; border-left: 3px solid var(--teal); background: var(--teal-soft); color: var(--muted); font-size: 12px; line-height: 1.55; }
.main-screen-guide strong { color: var(--navy); font-size: 12px; }

/* 家主送金一覧（SoukinMain）。旧の固定座標ではなく「表示条件→表→月次処理」の順を
   画面の枠幅で組み替える。送金の他画面と共通 field-grid には届かせない。 */
.edit-surface.soukin-main-surface {
    max-width: 1180px;
    margin-bottom: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.soukin-main-editor { min-width: 0; }
.soukin-main-editor > .ichiran-search { flex-wrap: wrap; }
/* 共通ペインの .field は横並び用に 220px を flex の基準にする。家主送金は欄を縦に積むため、高さへ転用させない。 */
.soukin-main-editor .ichiran-panel-fields > .field { flex: 0 0 auto; }
.soukin-main-tools,
.soukin-main-row-ops {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.soukin-main-tools { margin-left: auto; }
.soukin-main-command-bar .command,
.soukin-main-list-head .command { width: auto; min-height: 34px; white-space: nowrap; }
/* 欄の地は枠と同じ白なので透明にしない。透明にすると保存エラーの .field-invalid の地（--danger-soft）まで消す */
.soukin-main-month-field > .field {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}
.soukin-main-month-field > .field > label { margin: 0; color: var(--label); font-size: 13px; font-weight: 500; white-space: nowrap; }
/* 日付 1 欄用の 10.5em では、年・月 2 欄の最小幅を確保できない。 */
.soukin-main-month-field .field-control-line { width: 15rem; }
.soukin-main-month-field input { width: 100%; min-height: 32px; }
.soukin-main-month-field .field-meta { display: none; }

.soukin-main-list { min-width: 0; border: 1px solid var(--line); background: var(--surface); }

.soukin-main-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--surface-dim); }
.soukin-main-tabs > .field { position: relative; flex: 0 0 auto; padding: 0; background: transparent; }
.soukin-main-tabs .check-field { display: block; min-height: 0; padding: 0; }
.soukin-main-tabs .check-field > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}
.soukin-main-tabs .check-field > span {
    display: block;
    min-height: 38px;
    padding: 9px 12px 7px;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}
.soukin-main-tabs .check-field > input:checked + span { border-bottom-color: var(--teal); background: var(--surface); color: var(--teal); font-weight: 700; }
.soukin-main-tabs .check-field > input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.soukin-main-list-head {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
}
.soukin-main-summary { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font-size: 13px; }
.soukin-main-summary-label { margin-right: 6px; color: var(--label); font-weight: 500; }
.soukin-main-summary progress { width: 12em; max-width: 100%; }
.soukin-main-row-ops { justify-content: flex-end; }
.soukin-main-checked-count { color: var(--muted); font-size: 12px; }
.soukin-main-row-ops .soukin-csv-export { display: block; margin: 0; }
.soukin-main-grid-surface { min-width: 0; }
/* 共通の .embedded-grid（左右と下に 12px 引っ込めて自分の枠線を持つ）は一覧カードの中で二重の枠になる。
   モックどおり表の枠を一覧カードに直に接させる */
.soukin-main-grid-surface > .embedded-grid { margin: 0; border: 0; }
.soukin-main-grid.sengu-record-grid { display: block; min-height: 0; overflow: visible; border: 0; background: var(--surface); }
/* 送り枠は Tab で止めない（中の並べ替えのボタン・行・ﾚ 欄に焦点が入り、ブラウザはその枠を矢印キーで送る）。
   上に止めた見出し（34px）と合計行（約 33px）の高さを送り枠の上の余白（scroll-padding）にする。無いと、Shift+Tab で
   上へ戻った焦点の行が見出しと合計行の下にあっても「見えている」扱いになり、送られずに隠れたままになる。
   container は空の案内を見える幅で折り返すため（下の .sengu-grid-empty-message） */
.soukin-main-table-scroll {
    min-width: 0;
    max-height: max(320px, calc(100dvh - 240px));
    overflow: auto;
    scroll-padding-top: 34px;
    container: soukin-main-table / inline-size;
}
.soukin-main-table-scroll:has(tbody tr.soukin-total) { scroll-padding-top: 68px; }
.soukin-main-grid table.soukin-main-table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.soukin-main-grid .soukin-main-table thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    height: 34px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-dim);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}
.soukin-main-grid .soukin-main-table td { overflow: hidden; padding: 6px 8px; border-bottom: 1px solid var(--ic-rule); text-overflow: ellipsis; white-space: nowrap; }
.soukin-main-table .num { text-align: right; font-family: var(--ic-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.soukin-main-table .mono { font-family: var(--ic-mono); font-size: 12px; }
/* 明細があるときの合計行は tbody の先頭で見出しの下に止める。明細 0 件のときは空の案内の後ろ（tfoot）に置く。
   tfoot では共通の .sengu-ichiran-adapter .ichiran-table tfoot td（0-2-2、後ろに書かれている）の
   background: inherit に負けないよう 0-3-2 にする */
.soukin-main-grid .soukin-main-table tr.soukin-total > td,
.soukin-main-grid .soukin-main-table tr.soukin-total:hover > td {
    border-bottom: 1px solid var(--line);
    background: var(--grid-total-row);
    font-weight: 700;
}
.soukin-main-grid .soukin-main-table tbody tr.soukin-total > td { position: sticky; z-index: 1; top: 34px; }
.soukin-main-table tbody tr:not(.soukin-total):hover > td { background: var(--ic-accent-soft); }
/* 現在行とチェックした行（削除・宛名印刷の対象）は別物なので、地の色も印も分ける。
   現在行は青の地と左の縦線、チェックした行は緑の地とチェック欄の印を出す。両方の行は緑の地に青の縦線。
   現在行の青の地はチェックしていない行だけに当てる（:not(:has(...)) でチェック済みの行を外す。0-5-3）。詳細度の負けで緑を
   残すと、負けた宣言は黙って捨てられる形になり、状態修飾子の検査（CssStateModifierSpecificityTests）が止める。
   上の hover（0-3-3）と共通の .ichiran-table tr.is-current > td（0-2-2、--row-selected の緑）には勝つ */
.soukin-main-grid .soukin-main-table tbody tr.selected:not(:has(.select-col input:checked)) > td { background: var(--soukin-main-row-chosen); }
.soukin-main-grid .soukin-main-table tbody tr.selected > td:first-child { box-shadow: inset 4px 0 0 var(--soukin-main-row-chosen-mark); }
/* 共通の .sengu-record-grid-row.selected の緑の外枠は ﾚ の緑と紛れるので、この表では付けない（焦点の枠は残す） */
.soukin-main-grid .soukin-main-table tbody tr.selected:not(:focus-visible) { outline: 0; }
.soukin-main-table tbody tr:has(.select-col input:checked) > td { background: var(--row-selected); }
/* ［表示］前・0 件の案内。共通の .ichiran-empty td（0-1-1）は上の .soukin-main-grid .soukin-main-table td（0-2-1）に
   負け、余白が詰まって折り返さない。表は固定の列幅の合計まで広く、案内の枠（td）もその幅なので、中の包みを
   送り枠の見える幅（100cqi）に収めて折り返し、横に送っても左に止める。td の overflow: hidden は止めを td に閉じ込める */
.soukin-main-grid .soukin-main-table tr.ichiran-empty > td { overflow: visible; padding: 26px 12px; text-overflow: clip; white-space: normal; }
.soukin-main-table .sengu-grid-empty-message { position: sticky; left: 12px; display: block; max-inline-size: calc(100cqi - 24px); }
/* 共通の .sengu-ichiran-adapter .ichiran-table .select-col input（0-3-1、後ろに書かれている）の width: auto に
   負けないよう、属性まで書いて 0-4-1 にする */
.soukin-main-grid .soukin-main-table .select-col input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; margin: 0; accent-color: var(--teal); vertical-align: middle; }

.soukin-main-command-bar {
    position: sticky;
    z-index: 30;
    bottom: calc(-1 * var(--workbench-bottom-padding));
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -3px 14px var(--soukin-main-command-bar-shadow);
    /* 狭い幅でボタンを詰める判定は、絞り込みの右余白を除いたバー自身の幅で行う */
    container: soukin-main-command-bar / inline-size;
}
/* 閉じる（バーの先頭）を左、月次の処理を右に寄せる。ボタンをバーの直下に並べるので、狭い幅では
   処理のボタンだけが閉じるの後ろから次の行へ回り、2 段に収まる（モックの .bar.dock > .close） */
.soukin-main-command-bar > :first-child { margin-right: auto; }

/* 380px 前後では月次の処理のボタン 5 つが 3 段に割れて本文を隠すので、余白だけ詰めて 2 段に収める（モック） */
@container soukin-main-command-bar (max-width: 560px) {
    .soukin-main-command-bar .command { padding-inline: 8px; }
}

/* 募集・送金・入金のメイン画面は「表示条件 → 一覧 → 選択後の操作」という一本道。
   旧フォームの control 順を保ったまま、固定座標だけを解除して主操作を横スクロールの
   先へ追い出さない。フォームごとの色・装飾は増やさず、既存の紙面と罫線で層を分ける。 */
.bosyu-main-surface .field-grid[data-field-layout="flow"] > .field-action { grid-column: auto / span 1 !important; align-self: end; }
.bosyu-main-surface .field-grid[data-field-layout="flow"] > .field-action > .command { width: 100%; min-width: 104px; }
.nyukin-main-surface .field-groups[data-field-layout="flow"] { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; }
.nyukin-main-surface .field-groups[data-field-layout="flow"] > .field-section { grid-column: 1 / -1; }
.nyukin-main-surface [data-field-key="GroupBox1"] > .field-grid[data-field-layout="flow"] { grid-template-columns: repeat(auto-fit, minmax(176px, 232px)); align-items: end; }
.nyukin-main-surface [data-field-key="GroupBox1"] > .field-grid[data-field-layout="flow"] > .field-action { grid-column: auto / span 1 !important; align-self: end; }
.nyukin-main-surface [data-field-key="GroupBox2"] > .field-grid[data-field-layout="flow"] { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.nyukin-main-surface [data-field-key="GroupBox2"] > .field-grid[data-field-layout="flow"] > .field-action { grid-column: auto / span 1 !important; }
.nyukin-main-surface [data-field-key="GroupBox2"] .command { width: 100%; }
.nyukin-main-surface [data-legacy-control="btnFind"] { min-width: 132px; }
.nyukin-main-surface [data-field-key="GroupBox1"]::before { display: block; padding: 9px 12px 0; color: var(--navy); content: "表示条件"; font-size: 12px; font-weight: 700; }
.nyukin-main-surface [data-field-key="GroupBox2"]::before { display: block; padding: 9px 12px 0; color: var(--muted); content: "補助操作"; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.nyukin-main-surface .field-groups[data-field-layout="flow"] { grid-template-columns: repeat(auto-fit, minmax(168px, max-content)); column-gap: 12px; }
.nyukin-main-surface .field-groups[data-field-layout="flow"] > .field-action:has(> section),
.nyukin-main-surface .field-groups[data-field-layout="flow"] > .main-screen-action-heading { grid-column: 1 / -1 !important; }
.nyukin-main-surface .field-groups[data-field-layout="flow"] > .field-action:has(> .command[data-legacy-parent="FlowLayoutPanel1"]) { grid-column: auto !important; }
.nyukin-main-surface .field-groups[data-field-layout="flow"] > .field-action:has(> .command[data-legacy-parent="FlowLayoutPanel1"]) > .command { min-width: 168px; }
.main-screen-action-heading { margin: 16px 0 0; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--navy); font-size: 13px; }
.legacy-diagnostic-marker { display: none; }
@media (max-width: 720px) {
  .bosyu-main-surface .field-groups > .field-action { padding-bottom: 6px; }
  .bosyu-main-surface .field-groups > .field-action:first-of-type { padding-left: 8px; }
  .bosyu-main-surface .field-groups > .field-action:last-of-type { padding-right: 8px; }
  .bosyu-main-surface .field-groups > .field-action > .command { font-size: 11px; }
  .bosyu-main-action-status { align-items: flex-start; flex-direction: column; gap: 2px; padding-block: 8px; }
  .main-screen-guide { align-items: flex-start; flex-direction: column; gap: 2px; }
}
/* NSK 一般管理だけは、狭い列で内容を切るより一覧全体を横へ送って読む。ほかの物件・建物一覧は
   共通グリッドの既定挙動を維持する。右側の scrollbar gutter を常に確保し、最後の列まで
   スクロールしたときも縦スクロールバーの下に隠さない。 */
.contract-record-panel .sengu-record-grid { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.contract-record-panel .sengu-record-grid-head,
.contract-record-panel .sengu-record-grid-row { inline-size: max-content; min-inline-size: 100%; }
.contract-record-grid { overflow: auto; max-height: 520px; min-height: 90px; font-size: var(--grid-font); }
.contract-record-head, .contract-record-row { display: grid; grid-template-columns: 56px 120px minmax(180px, 1fr) 80px minmax(180px, 1fr) 120px; min-width: 820px; }
.contract-record-head { position: sticky; top: 0; z-index: 2; background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; }
.contract-record-head span, .contract-record-row > span, .contract-record-row > button { min-height: 34px; overflow: hidden; padding: 7px 8px; border: 0; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: transparent; color: inherit; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.contract-record-row:nth-child(even) { background: var(--surface-dim); }
.contract-record-row.selected { outline: 2px solid var(--teal); outline-offset: -2px; }
.contract-record-row.state-paid { background: #dcefed; }
.contract-record-row.state-rent-due { background: var(--row-rent-due); }
.contract-record-row.state-rent-paid { background: #fff5c7; }
.contract-record-row.state-canceled { background: #eee4d3; }
.contract-record-row.state-difference { color: #155ca8; }
.nyukin-main-grid { overflow: auto; max-height: 62vh; border: 1px solid var(--line); background: #fff; font-size: var(--grid-font); }
.nyukin-main-head, .nyukin-main-row { display: grid; min-width: max-content; }
.nyukin-main-head { position: sticky; top: 0; z-index: 1; color: #fff; background: var(--navy); font-size: 10px; font-weight: 700; }
.nyukin-main-head span, .nyukin-main-row span { min-height: 34px; overflow: hidden; padding: 7px 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-overflow: ellipsis; white-space: nowrap; }
.nyukin-main-row.state-paid { background: #dcefed; }
.nyukin-main-row.state-rent-due { background: var(--row-rent-due); }
.nyukin-main-row.state-rent-paid { background: #fff5c7; }
.nyukin-main-row.state-canceled { background: #eee4d3; }
.nyukin-main-row.state-difference { color: #155ca8; }
.demand-detail-grid { overflow: auto; max-height: 390px; min-height: 80px; background: #fff; font-size: var(--grid-font); }
.demand-detail-head, .demand-detail-row { display: grid; grid-template-columns: 54px minmax(200px, 1fr) 120px; min-width: 420px; }
.demand-detail-head { position: sticky; top: 0; z-index: 2; color: #fff; background: var(--navy); font-size: 10px; font-weight: 700; }
.demand-detail-head span, .demand-detail-row span { min-height: 34px; padding: 7px 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-align: left; }
.demand-detail-row { width: 100%; border: 0; background: transparent; color: inherit; }
.demand-detail-row:nth-child(odd) { background: var(--surface-dim); }
.demand-detail-row.selected { background: var(--row-selected); outline: 2px solid var(--teal); outline-offset: -2px; }
.select-keiyaku-grid { overflow: auto; max-height: 560px; min-height: 100px; background: #fff; font-size: var(--grid-font); }
.select-keiyaku-head, .select-keiyaku-row { display: grid; grid-template-columns: 56px 150px minmax(220px, 1fr) minmax(210px, 1fr); min-width: 720px; }
.select-keiyaku-head { position: sticky; top: 0; z-index: 2; color: #fff; background: var(--navy); font-size: 10px; font-weight: 700; }
.select-keiyaku-head span, .select-keiyaku-row span { min-height: 34px; overflow: hidden; padding: 7px 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-overflow: ellipsis; white-space: nowrap; }
.select-keiyaku-row:nth-child(odd) { background: var(--surface-dim); }
.rireki-contract-grid, .rireki-grid { overflow: auto; max-height: 520px; min-height: 90px; background: #fff; font-size: var(--grid-font); }
.rireki-contract-head, .rireki-contract-row { display: grid; grid-template-columns: 130px minmax(180px, 1fr) 210px 90px 90px minmax(150px, 1fr) minmax(180px, 1fr); min-width: 1050px; }
.rireki-contract-head, .rireki-head { position: sticky; top: 0; z-index: 2; color: #fff; background: var(--navy); font-size: 10px; font-weight: 700; }
.rireki-contract-head span, .rireki-contract-row span, .rireki-head span, .rireki-row span { min-height: 34px; overflow: hidden; padding: 7px 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-overflow: ellipsis; white-space: nowrap; }
.rireki-contract-row:nth-child(odd), .rireki-row:nth-child(odd) { background: var(--surface-dim); }
.demand-ref-board { display: grid; gap: 10px; font-size: var(--grid-font); }
.demand-ref-board > section { overflow: auto; border: 1px solid var(--line); background: #fff; }
.demand-ref-nyukin-head, .demand-ref-nyukin-row { display: grid; grid-template-columns: minmax(180px, 1fr) 110px 100px minmax(180px, 1fr) 90px; min-width: 720px; }
.demand-ref-demand-head, .demand-ref-demand-row { display: grid; grid-template-columns: 120px minmax(180px, 1fr) minmax(160px, 1fr) 130px 100px 80px 100px minmax(160px, 1fr); min-width: 1130px; }
.demand-ref-detail-head, .demand-ref-detail-row { display: grid; grid-template-columns: 54px minmax(240px, 1fr) 110px; min-width: 430px; }
.demand-ref-nyukin-head, .demand-ref-demand-head, .demand-ref-detail-head { color: #fff; background: var(--navy); font-size: 10px; font-weight: 700; }
.demand-ref-board span { min-height: 34px; overflow: hidden; padding: 7px 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-overflow: ellipsis; white-space: nowrap; }
.demand-ref-demand-row { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; }
.demand-ref-demand-row.selected { background: var(--row-selected); outline: 2px solid var(--teal); outline-offset: -2px; }
.ref-bukken-board { max-width: 1440px; margin: 0 12px 12px; border: 1px solid var(--line); background: #fff; }
.ref-bukken-board > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid var(--line); background: var(--surface-header); }
.ref-bukken-board h2 { margin: 1px 0 0; color: var(--navy); font-size: 15px; }
.ref-bukken-board > header strong { color: var(--teal); font: 13px ui-monospace, monospace; }
.ref-bukken-board .sengu-record-grid { border-inline: 0; }
.ref-bukken-board .building-row { background: var(--teal-soft); font-weight: 700; }
.ref-bukken-board > .legacy-image-action { width: 180px; margin: 10px 12px; }
.ref-bukken-image { display: grid; place-items: center; min-height: 120px; background: #eaf4fb; color: var(--muted); font: 11px ui-monospace, monospace; }
.legacy-image-frame { position: relative; }
.legacy-image-delete { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--danger); border-radius: 50%; background: #fff; color: var(--danger); font-size: 20px; line-height: 1; opacity: 0; transition: opacity 120ms ease; }
.legacy-image-frame:hover .legacy-image-delete,
.legacy-image-frame:focus-within .legacy-image-delete,
.legacy-image-delete:focus { opacity: 1; }
.legacy-image-links { display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 5px; font-size: 12px; }
.legacy-image-links a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.legacy-image-link-unavailable { display: grid; flex-basis: 100%; gap: 1px; color: var(--muted); }
.legacy-image-link-unavailable > span { text-decoration: line-through; }
.legacy-image-link-unavailable small { font-size: 10px; line-height: 1.35; }

.view-image { display: grid; gap: 12px; max-width: 880px; }
.view-image-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.view-image-toolbar > span { color: var(--muted); font-size: 12px; }
.view-image-empty, .view-image-document { display: grid; min-height: 520px; place-content: center; gap: 12px; padding: 20px; border: 1px solid var(--line); background: #fff; color: var(--muted); text-align: center; }
.view-image-empty { font-size: clamp(32px, 6vw, 48px); }
.view-image-document strong { color: var(--navy); font-size: 32px; }
.view-image-preview { display: grid; min-height: 520px; place-items: center; padding: 10px; border: 1px solid var(--line); background: #fff; }
.view-image-preview img { max-width: 100%; max-height: 750px; object-fit: contain; }
.view-image-comment { width: fit-content; margin: 0; padding: 5px 8px; background: #fff9c4; }
.launcher-notice, .launcher-group { margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.launcher-notice h2, .launcher-group h2 { margin: 0 0 10px; color: var(--navy); font-size: 16px; }
.launcher-notice p { margin: 0; }
.launcher-links { display: flex; flex-wrap: wrap; gap: 8px; }
.launcher-links form { margin: 0; }
.launcher-unavailable { display: grid; min-width: 180px; gap: 3px; padding: 8px 10px; border: 1px dashed #b7a465; color: var(--muted); background: #fffdf4; font-size: 12px; }
.launcher-unavailable small { max-width: 320px; line-height: 1.4; }
.jpg-gallery > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid var(--line); background: var(--surface-header); }
.jpg-gallery h2, .jpg-gallery h3 { margin: 1px 0 0; color: var(--navy); font-size: 15px; }
.jpg-gallery > section > h3 { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-dim); font-size: 12px; }
.jpg-slot-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; padding: 10px; }
.jpg-slot { display: grid; gap: 6px; padding: 7px; border: 1px solid var(--line); background: #fff; }
.jpg-preview { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #eaf4fb; color: var(--muted); font: 9px ui-monospace, monospace; }
.jpg-preview img { width: 100%; height: 100%; object-fit: contain; }
.jpg-preview-links { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-width: 720px; }
/* Why: 物件の画像の枠（JpgEx・物件詳細）の列数は W1 の依頼範囲外。auto-fill を当てると 1920px で 9 列に増えて
   枠が縮み、1280px で「チェック有りは建物共通」が折り返した（W1 最終確認 G2）。afb3533de の 5 列に戻し、
   auto-fill は契約画像の枠（.jpg-preview-links）だけに使う。 */
.jpg-ex-gallery .jpg-ex-slot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jpg-preview-links .jpg-slot, .jpg-ex-gallery .jpg-slot { min-width: 0; min-height: 0; }
.jpg-preview-links .jpg-slot .legacy-image-action, .jpg-preview-links .jpg-slot .legacy-image-frame,
.jpg-ex-gallery .jpg-slot .legacy-image-action, .jpg-ex-gallery .jpg-slot .legacy-image-frame { min-width: 0; min-height: 0; }
.jpg-preview-links .jpg-preview, .jpg-preview-links .jpg-preview > a, .jpg-preview-links .jpg-draft-preview,
.jpg-ex-gallery .jpg-preview, .jpg-ex-gallery .jpg-preview > a, .jpg-ex-gallery .jpg-draft-preview { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); min-width: 0; min-height: 0; place-items: center; }
.jpg-preview-links .jpg-preview > a, .jpg-preview-links .jpg-draft-preview,
.jpg-ex-gallery .jpg-preview > a, .jpg-ex-gallery .jpg-draft-preview { width: 100%; height: 100%; text-align: center; }
.jpg-preview-links .jpg-preview > a, .jpg-ex-gallery .jpg-preview > a { position: relative; color: inherit; text-decoration: none; }
.jpg-preview-links .jpg-preview > a::after, .jpg-ex-gallery .jpg-preview > a::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.jpg-preview-links .jpg-preview > a:hover, .jpg-ex-gallery .jpg-preview > a:hover { background: color-mix(in srgb, var(--teal-soft) 72%, transparent); }
.jpg-preview-links .jpg-preview > a:hover::after, .jpg-ex-gallery .jpg-preview > a:hover::after { box-shadow: inset 0 0 0 2px var(--teal); }
.jpg-preview-links .jpg-preview > a:focus-visible, .jpg-ex-gallery .jpg-preview > a:focus-visible { outline: 0; }
.jpg-preview-links .jpg-preview > a:focus-visible::after, .jpg-ex-gallery .jpg-preview > a:focus-visible::after { outline: 3px solid var(--navy); outline-offset: -3px; }
.jpg-preview-links .jpg-draft-preview, .jpg-ex-gallery .jpg-draft-preview { cursor: default; }
.jpg-slot input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jpg-ex-old-images { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.jpg-slot input:not([type="file"]) { min-height: 32px; border: 1px solid var(--line-strong); padding: 4px 7px; }
.jpg-preview-links .jpg-slot input:not([type="file"]):not([type="checkbox"]),
.jpg-ex-gallery .jpg-slot input:not([type="file"]):not([type="checkbox"]) { box-sizing: border-box; width: 100%; min-width: 0; }
.jpg-ex-actions, .jpg-order-actions { display: flex; gap: 5px; }
.jpg-ex-actions .button.disabled { opacity: 1; background: #f1f3f4; border-color: #ced6da; color: #8e9499; cursor: not-allowed; pointer-events: none; }
.jpg-ex-slot-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); max-height: 680px; overflow: auto; }
.jpg-common-check { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.jpg-order-actions .button { min-width: 36px; padding-inline: 7px; }
/* Why: EditKeiyakuInfo の AfterControlContent2 は .field-grid の子になる。UI 再レビュー D1 で
   fraXY が 1 セル幅に潰れ、隣の資料リンクを押してしまうことを確認したため、画像枠も行全体を専有させる。 */
.field-grid > [data-legacy-control="fraXY"] { grid-column: 1 / -1; min-width: 0; }
.field-grid > .contract-document-downloads { grid-column: 1 / -1 !important; min-width: 0; }
.contract-document-downloads { margin: 8px 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }
.contract-document-downloads h2 { margin: 0 0 7px; color: var(--navy); font-size: 14px; }
.contract-document-downloads ul { display: grid; gap: 4px; margin: 0; padding-left: 1.25em; overflow-wrap: anywhere; }

.auth-shell { min-height: 100vh; padding: clamp(28px, 7vh, 72px) 18px; background: linear-gradient(145deg, var(--navy-deep), #1d465e 56%, #24706c); }
.auth-brand { display: flex; align-items: center; gap: 12px; width: min(100%, 760px); margin: 0 auto 18px; color: #fff; }
.auth-brand:hover { text-decoration: none; }
.auth-brand strong { display: block; font: 700 15px/1 ui-monospace, monospace; letter-spacing: .16em; }
.auth-brand small { display: block; margin-top: 5px; color: #b9cbd5; font-size: 11px; letter-spacing: .12em; }
.auth-card { width: min(100%, 520px); margin: 0 auto; padding: clamp(24px, 5vw, 42px); border-top: 4px solid var(--teal); background: #fff; box-shadow: 0 18px 48px rgb(var(--shadow-rgb) / .34); }
.auth-card h1 { margin: 4px 0 12px; color: var(--navy); font-size: clamp(26px, 5vw, 38px); line-height: 1.15; letter-spacing: -.035em; }
.auth-card h2 { margin: 30px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 16px; }
.auth-card > p { color: var(--muted); }
.auth-card > form { margin-top: 18px; }
/* 管理者画面も通常の業務画面の workbench 上に置く。認証画面だけの濃色背景・強い影は使わない。 */
.admin-surface { max-width: 960px; padding: clamp(24px, 3vw, 36px); border-top: 3px solid var(--teal); }
.admin-surface h1 { margin: 4px 0 12px; color: var(--navy); font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.admin-surface h2 { margin: 30px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 16px; }
.admin-surface > p { color: var(--muted); }
.auth-form { display: grid; gap: 8px; margin-top: 24px; }
.auth-form label { margin-top: 7px; color: var(--label); font-size: 11px; font-weight: 700; }
.auth-form input, .assignment-row select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.auth-form .button { margin-top: 8px; min-height: 42px; }
.auth-form .link-button { justify-self: start; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--label); font-size: 12px; text-decoration: underline; }
.auth-form .link-button:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.auth-message { min-height: 24px; margin: 10px 0 0; padding: 0; color: var(--muted); }
.auth-message.error, .auth-message.success { padding: 10px 12px; border-left: 4px solid var(--danger); background: var(--danger-soft); color: var(--danger-text); }
.auth-message.success { border-left-color: var(--teal); background: var(--teal-soft); color: #174e4a; }
.auth-status { padding: 24px; }
.assignment-list { display: grid; gap: 7px; }
.assignment-row { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(240px, 1.4fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line-soft); background: var(--surface-dim); }
.assignment-row.linked { grid-template-columns: 1fr auto; }
.assignment-row > div { display: grid; gap: 3px; min-width: 0; }
.assignment-row strong, .assignment-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-row small { color: var(--teal); font-weight: 700; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.admin-actions form { margin: 0; }
.admin-user-page .user-directory-header { margin-bottom: 12px; }
.admin-user-page section + section { margin-top: 30px; }
/* 社員ページでは名簿とアカウントの取り違えを防ぐため、値のまとまりを一覧行ではなく
   名札のような読み取り専用の区画にする。確認段階でも同じ配置を使い、見比べる場所を固定する。 */
.admin-user-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); background: var(--surface-dim); }
.admin-user-facts > div { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.admin-user-facts > div:nth-child(3n) { border-right: 0; }
.admin-user-facts > div:nth-last-child(-n + 3) { border-bottom: 0; }
.admin-user-facts dt { color: var(--label); font-size: 11px; font-weight: 700; }
.admin-user-facts dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--navy); font-weight: 700; }
.admin-user-link-flow { margin-top: 16px; padding: 14px; border-left: 4px solid var(--teal); background: var(--teal-soft); }
.admin-user-link-flow h4 { margin: 0 0 10px; color: var(--navy); }
.admin-user-link-flow .admin-user-facts { background: var(--surface); }
@media (max-width: 700px) {
  .admin-user-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-user-facts > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .admin-user-facts > div:nth-child(2n) { border-right: 0; }
  .admin-user-facts > div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .admin-user-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
}
.user-directory-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.user-directory-header .button { flex: 0 0 auto; margin-top: 4px; }
.user-directory-header > div > p:last-child { margin-bottom: 0; color: var(--muted); }
.user-directory-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.user-directory-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 26px 0 0; border: 1px solid var(--line); border-left: 4px solid var(--teal); background: var(--surface-dim); }
.user-directory-summary span { display: grid; gap: 2px; padding: 12px 14px; color: var(--label); font-size: 11px; font-weight: 700; }
.user-directory-summary span + span { border-left: 1px solid var(--line); }
.user-directory-summary strong { color: var(--navy); font-size: 22px; line-height: 1; }
.user-directory-tools { display: grid; grid-template-columns: auto minmax(210px, 1fr) auto minmax(150px, .45fr) auto; gap: 8px; align-items: center; margin-top: 20px; }
.user-directory-tools label, .user-directory-label { color: var(--label); font-size: 11px; font-weight: 700; }
.user-directory-tools input, .user-directory-tools select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.user-directory-tools .button { min-height: 40px; }
.user-directory-result { margin: 16px 0 8px; color: var(--muted); font-size: 12px; }
.user-directory-list { display: grid; gap: 7px; }
.user-directory-row { display: grid; grid-template-columns: minmax(230px, 1.25fr) minmax(220px, 1fr) auto; gap: 14px; align-items: center; padding: 13px 14px; border: 1px solid var(--line-soft); background: var(--surface-dim); }
.user-directory-identity, .user-directory-roster { display: grid; gap: 3px; min-width: 0; }
.user-directory-identity strong, .user-directory-roster > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-directory-identity small, .user-directory-roster small { color: var(--muted); font-size: 11px; }
.user-directory-state { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.user-state { display: inline-flex; align-items: center; min-height: 25px; padding: 2px 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--label); font-size: 11px; font-weight: 700; white-space: nowrap; }
.user-state.assigned { border-color: var(--user-state-assigned-line); background: var(--teal-soft); color: var(--user-state-assigned-ink); }
.user-state.pending { border-color: var(--user-state-pending-line); background: var(--user-state-pending-bg); color: var(--user-state-pending-ink); }
.user-state.administrator { border-color: var(--user-state-admin-line); background: var(--user-state-admin-bg); color: var(--user-state-admin-ink); }
.user-state.tenant-administrator { border-color: var(--user-state-tenant-admin-line); background: var(--user-state-tenant-admin-bg); color: var(--user-state-tenant-admin-ink); }
.user-directory-empty { margin: 0; padding: 24px; border: 1px dashed var(--line-strong); color: var(--muted); text-align: center; }

#blazor-error-ui { display: none; position: fixed; z-index: 1000; right: 14px; bottom: 14px; padding: 11px 40px 11px 14px; background: var(--danger); color: white; box-shadow: 0 6px 18px rgb(var(--shadow-rgb) / .25); }
#blazor-error-ui a { color: white; text-decoration: underline; }
#blazor-error-ui .dismiss { position: absolute; right: 12px; }

@media (max-width: 1050px) {
    .category-board { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
}

@media (max-width: 544px) {
    .pdf-tab-fallback-notices { top: 76px; }
}

@media (max-width: 760px) {
    .app-shell, .app-shell[data-sidebar-state="collapsed"] { grid-template-columns: minmax(0, 1fr); }
    .app-main { grid-column: 1; }
    .master-rail { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(var(--app-rail-width), 88vw); }
    .app-shell[data-sidebar-state="expanded"] .master-rail { visibility: visible; transform: translateX(0); }
    .app-header-leading { padding: 0 12px; }
    .workbench { --workbench-inline-padding: 12px; --workbench-top-padding: 18px; --workbench-bottom-padding: 34px; padding: var(--workbench-top-padding) var(--workbench-inline-padding) var(--workbench-bottom-padding); }
    .page-header { align-items: flex-start; }
    .field-grid, .category-board, .legacy-collections { grid-template-columns: 1fr; }
    .field-grid > .field { grid-column: 1 !important; }
    .command-bar { overflow-x: auto; }
    .command-spacer { display: none; }
    .assignment-row, .assignment-row.linked { grid-template-columns: 1fr; }
    .user-directory-header { display: grid; }
    .user-directory-header .button { justify-self: start; }
    .user-directory-actions { justify-content: flex-start; }
    .user-directory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-directory-summary span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
    .user-directory-summary span:nth-child(4) { border-top: 1px solid var(--line); }
    .user-directory-tools { grid-template-columns: 1fr; gap: 5px; }
    .user-directory-tools label:not(:first-child) { margin-top: 8px; }
    .user-directory-row { grid-template-columns: 1fr; gap: 9px; }
    .user-directory-state { justify-content: flex-start; }
    .property-detail-surface .property-passport { grid-template-columns: 1fr; padding: 16px; }
    .property-passport-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
    .property-passport-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; }
    .property-detail-surface .field-tabset > .tab-groups { overflow-x: auto; flex-wrap: nowrap; padding-inline: 8px; }
    .property-detail-surface .field-tabset > .tab-groups > .tab-group { flex: 0 0 auto; }
    .property-detail-surface .field-grid[data-field-layout="flow"] { grid-template-columns: 1fr; }
    .property-field-row { grid-template-columns: minmax(6.5rem, .72fr) minmax(0, 1.28fr); }
    .property-field-label, .property-field-value { padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* 督促ワークフローのステッパー（cozci の workflow ページ相当。SNG-302） */
.workflow-stepper { display: flex; gap: 0; list-style: none; margin: 0; padding: 14px 16px 6px; }
.workflow-stepper li { display: flex; align-items: center; gap: 8px; flex: 1; padding: 8px 10px; color: var(--muted); border-bottom: 3px solid var(--line); }
.workflow-stepper li .step-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #dfe7ea; color: var(--label); font-weight: 700; font-size: 12px; }
.workflow-stepper li.current { color: var(--navy); border-bottom-color: var(--teal); font-weight: 700; }
.workflow-stepper li.current .step-no { background: var(--teal); color: #fff; }
.workflow-stepper li.done { color: var(--teal); border-bottom-color: var(--teal-muted); }
.workflow-stepper li.done .step-no { background: var(--teal-muted); color: #fff; }
/* 段の中の作業を順番付きで並べる（丸数字はステッパーと同じ意匠） */
.step-tasks { margin: 0; padding: 8px 16px; list-style: none; counter-reset: task; }
.step-tasks li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.step-tasks li:last-child { border-bottom: 0; }
.step-tasks li::before { counter-increment: task; content: counter(task); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #dfe7ea; color: var(--label); font-weight: 700; font-size: 12px; }
.step-tasks .task-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.step-tasks .task-body small { color: var(--label); }
.memo-block { padding: 10px 16px 14px; }
.memo-block textarea { width: 100%; max-width: 720px; display: block; margin: 6px 0; }
.memo-block pre { white-space: pre-wrap; background: #f4f7f8; border: 1px solid var(--line); padding: 8px; margin: 4px 0 10px; }
.required-mark { color: var(--required-mark); margin-left: 3px; font-weight: 700; }
.sms-recipients { border: 1px solid var(--line); margin: 10px 16px; padding: 8px 12px; }
.sms-recipients legend { font-size: 12px; color: var(--label); padding: 0 4px; }
.sms-recipient { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.sms-recipient.unavailable { color: var(--muted); }
.sms-recipient .recipient-label { min-width: 96px; font-weight: 600; }
.sms-recipient .recipient-number { min-width: 140px; font-variant-numeric: tabular-nums; }
.sms-recipient .recipient-note { font-size: 12px; color: #8a6d3b; }
.sms-recipient .recipient-note.ok { color: var(--teal); }
/* 完了通知のポップアップ（督促ワークフロー）。C# の状態だけで開閉する */
.sengu-popup-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(19, 43, 57, .35); }
.sengu-popup { min-width: 280px; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--teal); box-shadow: 0 12px 40px rgb(var(--shadow-rgb) / .25); padding: 18px 20px; text-align: center; }
.sengu-popup p { margin: 0 0 14px; font-size: 15px; }
.sengu-popup.error { border-top-color: var(--danger); }

/* 退居精算ワークフロー（SNG-455/456/461）。一覧・案件の部品 */
.taikyo-grid { width: 100%; border-collapse: collapse; font-size: var(--grid-font); }
.taikyo-grid th { padding: 7px 10px; background: var(--surface-header); color: var(--label); text-align: left; font-size: 11px; letter-spacing: .06em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.taikyo-grid td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.taikyo-grid tr:hover td { background: var(--hover); }
.taikyo-grid .num { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 案件の基本情報タブ（SNG-565）。ラベル列＋値列 ×2 組の読み取り専用表 */
.kihon-fields { width: 100%; border-collapse: collapse; font-size: var(--grid-font); }
.kihon-fields th { width: 10em; padding: 8px 10px; background: var(--surface-dim); color: var(--label); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.kihon-fields th:empty { background: transparent; }
.kihon-fields td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; font-variant-numeric: tabular-nums; }
.kihon-fields tr:last-child th, .kihon-fields tr:last-child td { border-bottom: none; }
/* 家主の備考など、改行を保ったまま他の項目と同じ表の行で出す（SNG-624。2026-09-03 FB: 別枠の囲みは周りと UI が違うため行に揃えた） */
.kihon-fields td.pre-wrap { white-space: pre-wrap; font-variant-numeric: normal; }
.kihon-fields td:empty::before { content: "—"; color: var(--muted); }
/* 基本情報タブのセクションを役割の色で見分ける（SNG-696・2026-09-08 FB「セクションごとに色分けなどして
   スキャナビリティを向上させる」）。色は一覧の帯トークンをそのまま流用し、新しい生値を入れない。
   帯は見出しの左端 4px で、管理建物・物件一覧の要注意帯（.ichiran-table の inset box-shadow）と同じ語彙 */
.kihon-band > .surface-header { border-left: 4px solid transparent; }
.kihon-band-keiyakusya > .surface-header { border-left-color: var(--ic-band-move-out); }
.kihon-band-yanushi > .surface-header { border-left-color: var(--ic-accent-strong); }
.kihon-band-keiyaku > .surface-header { border-left-color: var(--ic-band-fixed-term); }
.taikyo-chip { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 2px; font-size: 11px; font-weight: 600; line-height: 1.7; white-space: nowrap; }
.taikyo-chip.step { background: var(--teal-soft); color: var(--teal); }
.taikyo-chip.closed { background: #e5e9ec; color: #52616c; }
.taikyo-chip.hold { background: var(--disabled); color: #7a5d00; }
.missing-value { color: var(--missing-value-ink); font-weight: 600; }
/* 未加入など「無い」ことの札。閉じたわけではないので closed より薄く */
.taikyo-chip.off { background: var(--surface-dim); color: var(--muted); font-weight: 500; }
/* 支払指示の前提（署名済書類・入金・契約確定）の並び（SNG-699）。押下は止めず状態だけ見せる。
   済は段チップと同じ緑、未は危険色トークン。生値は増やさない */
.koutei-guard { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.koutei-guard b { font-weight: 500; font-size: 11px; padding: 1px 8px; border-radius: 2px; }
.koutei-guard b.ok { background: var(--teal-soft); color: var(--teal); }
.koutei-guard b.ng { background: var(--danger-soft); color: var(--danger-text); }
/* 要注意（T_契約.要注意）の札（SNG-694）。案件本文では危険色トークンを使う。
   SNG-927 で更新一覧のカードに移した札は、下の .cell-caution で旧セル色を当てる。 */
.taikyo-chip.caution { background: var(--danger-soft); color: var(--danger-text); }
/* 書類印刷期日（解約日の前月末・保証会社リミット）。進行は止めず強調だけする */
.taikyo-due { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.taikyo-due.warn { background: var(--disabled); color: #7a5d00; padding: 1px 6px; border-radius: 2px; font-weight: 700; }
.taikyo-due.over { background: var(--danger-soft); color: var(--danger); padding: 1px 6px; border-radius: 2px; font-weight: 700; }
.taikyo-due.done { color: var(--muted); }
.taikyo-banner { display: block; max-width: 1440px; margin: 0 auto 10px; padding: 9px 13px; border: 1px solid #d8c76a; border-left: 4px solid #c7a500; background: var(--disabled); font-size: 13px; }
.taikyo-fields { display: grid; gap: 9px; margin: 0; padding: 12px 16px; border: 0; }
.taikyo-fields .frow { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; align-items: center; }
.taikyo-fields .frow > label:first-child { color: var(--muted); font-size: 12px; }
.taikyo-fields .frow > *:not(label:first-child) { justify-self: start; }
.taikyo-fields .frow > div, .taikyo-fields .frow input[type="text"] { width: 100%; }
/* ラベル＋複数コントロールの行。2 列グリッドの外に増えた子がラベル列へ落ちないよう 1 つに束ねる */
.taikyo-fields .frow > .fgroup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* 先に開いて使う導線を入力欄の上に置くとき（更新の賃料査定 URL） */
.taikyo-fields .frow > .fgroup.stacked { flex-direction: column; align-items: flex-start; gap: 4px; }
/* 補足（small）は 3 番目の子でもラベル列に落とさず、常に入力列へ置く */
.taikyo-fields .frow > small { grid-column: 2; }
/* 名前系の短い入力（立会業者など）は全幅にしない */
.taikyo-fields .frow input.name-input { width: 20em; max-width: 100%; }
.taikyo-fields input, .taikyo-fields select { min-height: 29px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--control-radius); background: #fff; font-size: 13px; }
.taikyo-fields small, .taikyo-grid small { color: var(--muted); }
.taikyo-check { display: inline-flex; gap: 6px; align-items: center; }
.taikyo-note { padding: 8px 16px 12px; color: var(--muted); font-size: 12px; }

/* 書類チェックの行（SNG-704）。独立した「書類チェック表」をやめ、**状態が変わる作業の直下**へ置く。
   2026-09-10 の指摘（刷る／送る・合意書・通知書の呼び名・ステップ3 の入金）は根が 1 つで、
   同じデータを作業リストと表の 2 か所に出していたこと。作業の中に操作口を置いて鏡を消す。
   色は既存トークンだけで書く — 生値を足すと CssRawColorBudgetTests の高水位（180）に当たる */
.doc-rows { width: 100%; margin: 7px 0 2px; border-collapse: collapse; font-size: var(--grid-font); background: var(--surface-dim); border: 1px solid var(--line-soft); }
.doc-rows th { padding: 4px 9px; background: var(--surface-header); color: var(--muted); text-align: left; font-size: 10px; letter-spacing: .07em; font-weight: 700; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.doc-rows td { padding: 6px 9px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.doc-rows tr:last-child td { border-bottom: 0; }
.doc-rows .name { font-weight: 600; white-space: nowrap; }
.doc-rows select { min-height: 25px; padding: 2px 5px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); font-size: 12px; font-family: inherit; }
.doc-rows .date { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 日付が「送った日」か「返ってきた日」かは種類で変わる。空欄でも節目だけは出す */
.doc-rows .marker { display: inline-block; min-width: 2.6em; margin-right: 6px; padding: 0 5px; border-radius: 2px; background: var(--surface-header); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: center; }
.doc-rows .make > * { margin-right: 8px; }
.doc-rows small { color: var(--muted); }
/* 見出し直下の 1 行。賃上の 3 状態（未決／なし＝1 通／あり＝2 回）を出す */
.hassou-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-dim); font-size: 12.5px; }
.hassou-state.warn { background: var(--disabled); }
/* 発送の区切り（賃上ありのとき 1 回目と 2 回目の間に入る）。番号は消費しない */
.step-tasks > li.hassou-sep { border-bottom: 0; padding: 11px 0 3px; }
.step-tasks > li.hassou-sep::before { content: none; }
.hassou-sep { display: flex; align-items: center; gap: 9px; }
.hassou-sep small { color: var(--muted); }
.hassou-sep b { padding: 2px 9px; border: 1px solid var(--teal-soft); background: var(--teal-soft); color: var(--teal); font-size: 11px; letter-spacing: .08em; }
.hassou-sep i { flex: 1 1 auto; height: 1px; background: var(--line-soft); }

/* 要注意のセルと印。旧 fg.Styles("Caution") と同じ配色。
   .sengu-record-grid-row.state-caution は div グリッド用（display:grid）で、tr に当てると
   セルが縦積みになるため、表には td へ塗る規則を持つ。
   .state-caution は業務チェックシステムの「自動完了する工程」の目印（SmallDomainScreen）、
   .cell-caution は更新一覧の T_契約.要注意。同じ赤でも意味が違うので名前を分ける
   （SNG-693・2026-09-08 FB「要注意は行じゃなくてセル」）。
   SNG-927 で更新一覧はカードの印へ移した。 */
.taikyo-grid td.state-caution { background: #ff8080; color: #571212; }
.koushin-card .cell-caution { background: #ff8080; color: #571212; }
/* 列数の多い一覧は折り返さず横スクロールさせる（旧の一覧グリッドと同じ見え方）。
   幅で潰すと「２０６」が 1 文字ずつ折り返され、建物名称も 2 行に割れて読めなくなる。 */
.taikyo-grid-scroll { overflow-x: auto; }
.taikyo-grid-scroll > .taikyo-grid { min-width: max-content; }
.taikyo-grid-scroll > .taikyo-grid th, .taikyo-grid-scroll > .taikyo-grid td { white-space: nowrap; }
/* 操作列は右端に貼り付けて、横スクロールしなくても押せるようにする。
   スクロールで下に潜らないよう、貼り付けたセルには必ず背景を敷く（行の色も個別に当て直す）。 */
.taikyo-grid-scroll > .taikyo-grid th:last-child,
.taikyo-grid-scroll > .taikyo-grid td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--surface);
    border-left: 1px solid var(--line);
}
.taikyo-grid-scroll > .taikyo-grid thead th:last-child { background: var(--surface-header); z-index: 2; }
.taikyo-grid-scroll > .taikyo-grid tbody tr:hover td:last-child { background: var(--hover); }
.surface-note { padding: 10px 16px 14px; color: var(--muted); }
/* 段1 内の退居予告導線（未登録のときだけ表示。SNG-475 の書き込み解禁までの運用） */
.taikyo-yokoku-note { margin: 0; padding: 9px 16px; border-bottom: 1px solid #d8c76a; background: var(--disabled); font-size: 12px; }
.taikyo-yokoku-note a { font-weight: 700; white-space: nowrap; }
/* 行き先が複数あるときは帯を並べず、1 本の帯の中に箇条書きで並べる（更新の段3） */
.taikyo-yokoku-note ul { margin: 4px 0 0; padding-left: 1.2em; }
.taikyo-yokoku-note li + li { margin-top: 3px; }

/* Issue 風クレーム詳細（/ワークフロー/クレーム/案件/{受付番号}）。本文＋属性の 2 カラム */
.claim-anken-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.claim-anken-grid > main { display: grid; gap: 14px; min-width: 0; align-content: start; }
@media (max-width: 960px) { .claim-anken-grid { grid-template-columns: 1fr; } }
.claim-anken-body { display: grid; gap: 8px; padding: 12px 16px; }
.claim-anken-body .taikyo-fields { padding: 0; }
.claim-anken-body textarea { width: 100%; min-height: 70px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--control-radius); font-size: 13px; resize: vertical; }
.claim-anken-body p { margin: 0; white-space: pre-wrap; }
.claim-chip-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px; color: var(--muted); font-size: 13px; }
/* edit-surface の margin:auto はグリッドの子だと内容幅に縮む。2 カラム内では全幅に固定する */
.claim-anken-grid .edit-surface { margin: 0; max-width: none; width: 100%; }
/* 導出タイトルは長文になり得る。見出しは 2 行で切り、チップはタイトルの下に並べる */
.claim-anken-header { display: block; }
.claim-anken-header h1 { font-size: 19px; line-height: 1.5; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 属性パネル（360px）内で長い値・長い候補ラベルの select がはみ出さないようにする */
.claim-anken-grid aside .taikyo-fields .frow { grid-template-columns: 88px minmax(0, 1fr); align-items: center; }
.claim-anken-grid aside .taikyo-fields input:not([type="checkbox"]),
.claim-anken-grid aside .taikyo-fields select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.claim-anken-grid aside .taikyo-fields .frow > span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.claim-anken-grid aside .taikyo-fields .fgroup { gap: 4px 12px; }
.claim-anken-grid aside .taikyo-fields .fgroup label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; }

/* 読み上げにだけ渡し、画面には出さない文字。RefBukkenBoard の「物件の業務遷移」は
   画像枠の代わりに置く説明で、定義が無いまま本文として画面に出ていた。
   display:none / visibility:hidden は読み上げからも消えるため使わない */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* 読み上げは「既に DOM にある枠の中身が変わったとき」にしか起きない。画面を作り直す通知は、
   初回 DOM の空の枠へ後続描画で文言を入れる。空の枠が旧アプリに無い余白や色帯を作らないよう、
   中身が無い間だけ箱を消す。クラスではなく role で当てるのは、.notice-error のような
   状態修飾子と同じ longhand を奪って詳細度で潰さないため。末尾に置くのは、.auth-message.success の
   ように詳細度が並ぶ規則へ後勝ちで勝つため。 */
/* .auth-message を除くのは、ログイン画面が min-height: 24px で先に高さを確保し、
   Firebase の失敗文言が出た瞬間にフォームが飛び跳ねないようにしているため。
   ここで高さを 0 にすると、その意図を打ち消して入力欄の位置がずれる。 */
[role="status"]:empty:not(.auth-message), [role="alert"]:empty:not(.auth-message) { min-height: 0; margin: 0; padding: 0; border-width: 0; background: none; }
/* 必須項目の追加層: 旧ラベルの赤・太字（.legacy-required-label、検査が完全一致で凍結）の上に、
   色以外の手掛かりとしてアスタリスクを CSS 生成内容で重ねる（WCAG 1.4.1 F81 回避）。
   DOM の Text ノードにしないのは、五軸監査の文言軸（tests/Sengu.Web.Tests/
   LegacyParityDisplayedText.cs）が AngleSharp の Text ノードだけを読む静的パースで、
   生成内容は仕組み上対象外だから。
   content の 2 行目は代替テキスト構文（content: <string> / <string>）で読み上げを空にし、
   入力要素側の aria-required と二重通知にしない。非対応ブラウザは 2 行目を無効宣言として
   捨て、1 行目で表示だけ保つ（読み上げが重複する側へ劣化）。
   印を小さく保つのは、ラベルが .field > label の text-overflow: ellipsis で
   切り詰まる箱の中にあるため。列幅は MasterFieldRowLayout.GridColumnMinimum が
   RequiredMarkWidth（11px）だけ余分に確保しているので、この印を大きくするなら
   あちらの定数も同時に上げること。上げないと列が詰まったとき印そのものが切れる
   （枠付き「必須」バッジ 32px だったとき、必須 166 欄中 58 欄がその状態だった）。 */
.legacy-required-label::after {
    content: "*";
    content: "*" / "";
    margin-left: 3px;
    color: var(--required-mark);
    font-weight: 700;
}

/* 左メニューの二段目は、親グループと同じ字面・左端だと階層を読めない。
   親の summary には触れず、details の内側だけを一段弱く・内側へ寄せる。 */
.master-nav details details > summary {
    padding-left: 18px;
    color: var(--rail-text-muted);
    font-size: 10px;
    font-weight: 600;
}
.master-nav details details > a { padding-left: 22px; }

/* cozci に同じ業務タブがある旧メニュー項目だけを、既存の文字色で線画アイコン付きにする（SNG-541）。 */
.master-nav a.cozci-sidebar-link { display: flex; align-items: center; gap: 7px; }
.master-nav a.cozci-sidebar-link > span { min-width: 0; }
.cozci-sidebar-icon { width: 18px; height: 18px; flex: 0 0 18px; }

/* ===========================================================================
   一覧（管理建物一覧・物件一覧、パネルを持たないユーザー・名簿管理の .is-plain。2026-09-13 に回議書一覧を追加）だけの見た目。2026-09-06。
   ほかの画面へ漏らさないため、参照はすべて .ichiran の内側だけに書く。
   色は :root のトークンを使う（生値を足すと css: 生の色リテラル検査が落ちる）。
   他の一覧へ広げるときは画面ごとの修飾クラスの内側に閉じる（docs/bukken-kanritatemono-ichiran.md、
   回議書一覧は末尾の .kaigisyo-ichiran と docs/kaigisyo-ichiran.md）。
   =========================================================================== */
.ichiran { max-width: 1440px; margin: 0 auto; color: var(--ic-ink); }

/* 絞り込みを開いている間は本文を右へ詰める。覆うと右の列が見えなくなり、
   表を見ながら絞るという目的が崩れるため。表が収まるよう建物名称だけ省略を許す。 */
/* 詰める幅からは .workbench の右 padding を差し引く。差し引かないと、その padding が
   そのまま表とパネルの隙間になる */
.ichiran { padding-right: calc(min(320px, 86vw) - clamp(18px, 3vw, 42px)); }
.ichiran .ichiran-table .col-building { max-width: 22ch; }

/* Why: .ichiran の padding-right は常時開いている絞り込みパネルの居場所。
   パネルを持たない一覧（ユーザー・名簿管理）では右端が空くだけなので戻す。 */
.ichiran.is-plain { padding-right: 0; }
.ichiran.is-plain .ichiran-search { flex-wrap: wrap; }
.ichiran.is-plain .ichiran-search input[type="search"] { flex: 1 1 280px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--ic-line); border-radius: 4px; background: var(--surface); color: var(--ic-ink); font-size: 13px; }
.ichiran.is-plain .ichiran-table td .button { padding: 2px 8px; font-size: 12px; }
/* Why 字の大きさを器ではなく見出しと補足文に置くか: 一覧の「ユーザーを追加」「従業員を追加」は補足文を横に
   並べるためこの器に入っている。器に 11px を置くと中のボタンまで継承し、器の外の「招待状況」より小さい字で
   並んでいた（small も継承した 11px からさらに縮み、9px 台になっていた）。 */
.ichiran.is-plain .ichiran-filter { display: flex; align-items: center; gap: 6px; color: var(--ic-muted); }
.ichiran.is-plain .ichiran-filter > span,
.ichiran.is-plain .ichiran-filter > small { font-size: 11px; }
/* Why: 幅が狭いと器の中で縮むのがボタン側になり、ボタンの字が 2 行に折れて隣のボタンと高さがずれる。縮むのは補足文にする。 */
.ichiran.is-plain .ichiran-filter > .button { flex: none; white-space: nowrap; }
.ichiran.is-plain .ichiran-filter select { min-height: 32px; padding: 4px 8px; border: 1px solid var(--ic-line); border-radius: 4px; background: var(--surface); color: var(--ic-ink); font-size: 13px; }

/* 現在地はヘッダーに置く。出すのは物件一覧・建物一覧と物件詳細だけで、回議書一覧（/approvals）は出さない */
.app-crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--ic-muted); font-size: 12px; }
.app-crumbs a { color: var(--ic-muted); }
.app-crumbs [aria-current="page"] { color: var(--ic-ink); font-weight: 700; }

/* 見出しは読み上げのためだけに置く。表を見る画面なので本文の上に高さを使わない */
.ichiran-title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 状況は絞り込みではなく、引く表そのものを替える。募集→成約→契約→入居→更新→退居の
   順に並べ、停留所として点を打つ。「すべて」は順序に属さないので線の外へ出す。 */
.ichiran-stages { display: flex; align-items: stretch; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--ic-line); }
.ichiran-stages .stage {
    position: relative;
    flex: 0 0 auto;
    padding: 9px 15px 13px;
    border: 0;
    background: transparent;
    color: var(--ic-muted);
    font-size: 12px;
    white-space: nowrap;
}
.ichiran-stages .stage:hover { color: var(--ic-ink); }
.ichiran-stages .stage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border: 1px solid var(--ic-line);
    border-radius: 50%;
    background: var(--paper);
}
.ichiran-stages .stage[aria-current="true"] { color: var(--ic-ink); font-weight: 700; }
.ichiran-stages .stage[aria-current="true"]::before { border-color: var(--teal); background: var(--teal); }
.ichiran-stages .stage-outside { margin-right: 13px; padding-right: 15px; border-right: 1px solid var(--ic-line); }
.ichiran-stages .stage-outside::before { content: none; }

.ichiran-search { display: flex; align-items: center; gap: 8px; padding: 22px 0 12px; }
/* 絞り込みは一覧の隣に置く。開閉しても一覧の操作を遮らない。 */
.ichiran-panel {
    position: fixed;
    z-index: 60;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    padding: 18px 20px;
    overflow-y: auto;
    border-left: 1px solid var(--ic-line);
    background: var(--surface);
}
.ichiran-panel h2 { margin: 0; color: var(--ic-ink); font-size: 14px; }
.ichiran-panel-note { margin: 4px 0 16px; color: var(--ic-muted); font-size: 11px; }
.ichiran-panel-fields { display: flex; flex-direction: column; gap: 14px; }
.ichiran-panel-fields label { display: flex; flex-direction: column; gap: 5px; color: var(--ic-muted); font-size: 11px; }
.ichiran-panel-fields input,
.ichiran-panel-fields select { min-height: 32px; padding: 4px 8px; border: 1px solid var(--ic-line); border-radius: 4px; background: var(--surface); color: var(--ic-ink); font-size: 13px; }


.ichiran-search select,
.ichiran-search input:not([type="checkbox"], [type="radio"], [type="file"]) {
    min-height: 32px;
    /* 表は旧どおり角ゼロのまま。押す・打つ部品だけ丸めて、触れる所を見分けられるようにする */
    border-radius: 4px;
    border: 1px solid var(--ic-line);
    background: var(--surface);
    color: var(--ic-ink);
    padding: 4px 8px;
    font-size: 13px;
}
.ichiran-search > input { flex: 1 1 320px; min-width: 0; }
.ichiran-search input::placeholder { color: var(--ic-hint); }
.ichiran-search .ichiran-run {
    min-height: 32px;
    border-radius: 4px;
    padding: 4px 18px;
    border: 1px solid var(--teal);
    background: var(--teal);
    color: var(--surface);
    font-size: 13px;
    font-weight: 700;
}
.ichiran-search .ichiran-run:hover { background: var(--ic-accent-strong); }
/* 探すと同じ高さに並べるが、主操作は探すなので塗らずに枠だけにする */
.ichiran-search .ichiran-add {
    min-height: 32px;
    border-radius: 4px;
    padding: 4px 14px;
    border: 1px solid var(--teal);
    background: var(--surface);
    color: var(--teal);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.ichiran-search .ichiran-add:hover { background: var(--hover); }
.ichiran :focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* 表は台帳。見出しと本文を 1 つの table に入れ、列幅はブラウザーに決めさせる。
   表の中に独自のスクロール枠を作らない。作ると ウィンドウ → 本文 → 表 の 3 段になり、
   利用者はどれを動かしているのか分からなくなる。本文（.workbench）だけが縦に動き、
   表の見出しも本文と一緒に流す。 */
.ichiran-table-scroll { background: var(--surface); }
.ichiran-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ichiran-table thead th {
    padding: 9px 12px;
    border-bottom: 1px solid var(--ic-line);
    background: var(--surface);
    color: var(--ic-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.ichiran-table td { padding: 7px 12px; border-bottom: 1px solid var(--ic-rule); white-space: nowrap; }
.ichiran-table tbody tr:hover td { background: var(--ic-accent-soft); }
.ichiran-table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ichiran-table .col-code,
.ichiran-table .col-mono { font-family: var(--ic-mono); font-size: 12px; }
.ichiran-table .col-number { font-family: var(--ic-mono); font-variant-numeric: tabular-nums; text-align: right; }
.ichiran-table th.col-number { text-align: right; }
.ichiran-table .col-text,
.ichiran-table .col-building { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; }
/* 余った幅は建物名称が受ける。table-layout: auto は幅指定の無い列へ均等に配るので、
   1 列だけ 100% を宣言して、他の列は内容ぶんに留める */
.ichiran-table .col-building { width: 100%; }
.ichiran-empty td { padding: 26px 12px; color: var(--ic-muted); white-space: normal; }

/* MasterMainForm は一覧ページとして 30 件ずつ読む。340px の縦スクロール枠に閉じると、
   次ページを選んだ後も表の途中から読ませてしまう。/buildings と同じく本文だけを縦に送り、
   列の多いマスタは必要なときだけ横へ送る。 */
.master-main-grid .master-main-table-scroll { max-height: none; overflow-x: auto; overflow-y: visible; }
.master-main-grid .master-main-table { min-width: max-content; }
.master-main-grid .master-main-table thead th { position: static; }
.master-main-grid .master-main-table .select-col input { width: auto; min-width: 0; }

/* 同じ建物の部屋が続いていることを縦に見せる。建物コードと、2 行目以降の建物名称を淡くする */
.ichiran-table .code-building,
.ichiran-table .col-building.is-repeat { color: var(--ic-hint); }
/* 現在の状況に続く「募集中」「契約中」は次の段階なので、いまの状態と字面を分ける */
.ichiran-table .status-next { color: var(--ic-muted); }

/* 旧は行全体を塗って状態を示したが、1,000 行を超えると文字が読めない。
   意味は保ったまま左端の帯へ移し、本文の可読性を戻す */
.ichiran-table tbody tr.state-caution td:first-child { box-shadow: inset 4px 0 0 var(--ic-band-caution); }
.ichiran-table tbody tr.state-fixed-term td:first-child { box-shadow: inset 4px 0 0 var(--ic-band-fixed-term); }
.ichiran-table tbody tr.state-move-out-planned td:first-child { box-shadow: inset 4px 0 0 var(--ic-band-move-out); }
.ichiran-table tbody tr.state-managed-out td:first-child { box-shadow: inset 4px 0 0 var(--ic-band-managed-out); }
.ichiran-table tbody tr.state-canceled td:first-child { box-shadow: inset 4px 0 0 var(--ic-band-canceled); }

.ichiran-pager { display: flex; align-items: center; gap: 10px; padding: 10px 2px 0; color: var(--ic-muted); font-size: 12px; }
.ichiran-range { font-family: var(--ic-mono); font-variant-numeric: tabular-nums; }
.ichiran-pagesize { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ichiran-pagesize select { border-radius: 4px; min-height: 28px; padding: 2px 6px; border: 1px solid var(--ic-line); background: var(--surface); color: var(--ic-ink); font-size: 12px; }
.ichiran-step { border-radius: 4px; min-height: 28px; padding: 3px 14px; border: 1px solid var(--ic-line); background: var(--surface); color: var(--ic-ink); font-size: 12px; }
a.ichiran-step { display: inline-flex; align-items: center; text-decoration: none; }
.ichiran-step:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ic-accent-soft); }
.ichiran-step:disabled, .ichiran-step[aria-disabled="true"] { color: var(--ic-hint); cursor: default; }

/* SNG-807 リクエスト一覧: /buildings の一覧・固定ペインを土台に、ペインを閉じたときは
   表の右を空けない。絞り込みを出す目的は表を見比べながら条件を替えることなので、開いた
   ときだけ表を左へ詰める。 */
.claim-request-list { padding-right: 0; }
.claim-request-list.claim-request-list-panel-open { padding-right: calc(min(320px, 86vw) - clamp(18px, 3vw, 42px)); }
.claim-request-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; }
.claim-request-toolbar .ichiran-search { flex: 1 1 320px; min-width: 0; }
.claim-request-toolbar .ichiran-add { margin-left: auto; }
.claim-filter-panel { top: 64px; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .18s ease, visibility 0s linear .18s; }
.claim-request-list-panel-open .claim-filter-panel { visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform .18s ease; }
.claim-filter-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.claim-filter-date { display: flex; flex-direction: column; gap: 5px; color: var(--ic-muted); font-size: 11px; }
.claim-filter-date-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.claim-filter-date-range label { min-width: 0; }
.claim-filter-date-separator { padding-bottom: 8px; color: var(--ic-muted); }
.claim-filter-check { flex-direction: row !important; align-items: center; gap: 7px !important; min-height: 28px; }
.claim-filter-scope { display: flex; flex-wrap: wrap; gap: 5px 13px; margin: 0; padding: 8px; border: 1px solid var(--ic-line); color: var(--ic-muted); font-size: 11px; }
.claim-filter-scope legend { padding: 0 3px; }
.claim-filter-scope label { flex-direction: row; align-items: center; }
.claim-pending-filters { display: grid; grid-template-columns: 1fr; gap: 5px; width: 100%; }
.claim-pending-filters button { min-height: 30px; border: 1px solid var(--ic-line); border-radius: 4px; background: var(--surface); color: var(--ic-ink); text-align: left; }
.claim-pending-filters button[aria-pressed="true"] { border-color: var(--ic-accent-strong); background: var(--ic-accent-soft); color: var(--ic-accent-strong); font-weight: 700; }
.claim-selection-actions { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.claim-selected-count { min-width: 4.5rem; margin: 0; color: var(--ic-muted); font-size: 11px; }
/* disabled 属性にすると Tab で理由へ届かないため、状態は aria-disabled とイベント側の
   guard で表す。灰色は入力できない／実行できない状態を黄色と混同させないため。 */
.claim-command-inactive { position: relative; border-color: var(--ic-line) !important; background: var(--surface-dim) !important; color: var(--ic-hint) !important; cursor: not-allowed; }
.claim-command-inactive:hover::after,
.claim-command-inactive:focus-visible::after { position: absolute; z-index: 70; bottom: calc(100% + 7px); left: 0; width: max-content; max-width: 240px; padding: 6px 8px; border-radius: 3px; background: var(--ic-ink); color: var(--surface); content: attr(data-tooltip); font-size: 11px; font-weight: 500; line-height: 1.4; white-space: normal; }
.claim-select-all { display: inline-flex; align-items: center; gap: 3px; }
.claim-request-table { min-width: max-content; table-layout: auto; }
.claim-request-table tbody tr { cursor: default; }
.claim-request-table thead th { position: sticky; z-index: 2; top: 0; background: var(--surface-dim); }
.claim-request-table th,
.claim-request-table td { padding: 7px 6px; font-size: 11px; }
.claim-request-table th:first-child,
.claim-request-table td:first-child { width: 34px; text-align: center; }
.claim-request-table td:nth-child(6) { max-width: 26ch; }
.claim-receipt-link { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.claim-request-list .claim-table-scroll { border: 1px solid var(--ic-line); }
.claim-request-utilities { margin-top: 12px; }
.claim-request-utilities .claim-tool-options { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }

@media (max-width: 900px) {
    .claim-request-list.claim-request-list-panel-open { padding-right: 0; }
    .claim-filter-panel { top: 64px; }
}

@media (max-width: 900px) {
    .ichiran-head { flex-wrap: wrap; }
    .ichiran-search { flex-wrap: wrap; }
    .ichiran-search input { flex-basis: 100%; }
}

/* ===========================================================================
   回議書一覧（/approvals、旧 NskYosan.YosanMain）を 建物一覧（/buildings）の見た目に寄せる。
   2026-09-13 主の決定（docs/kaigisyo-ichiran.md）。利用者から見える欄・選択肢・ボタン・旧メニュー・列・文言は
   1 つも足し引きしない約束なので、ここで変えるのは配置・余白・色・罫線・文字の大きさだけに限る。
   DOM の並び（旧 control の順と親子）は照合監査（YosanUiParityAuditTests）の基準なので動かさず、
   見える位置だけを order と position で組み直す。文字や値を見えなくする指定（display:none・visibility・clip・
   0 サイズ）はここでは使わない。共通グリッドのセルは overflow: hidden と末尾の「…」の省略を持ったままなので、
   それが効かないよう、件名／事項名以外の列は中身の幅で取り、縮める件名／事項名だけを折り返す（下の nth-child(4)）。
   代わりに、折り返した行は高くなり、一覧の幅に入らない列は枠の外に出て横に送らないと見えない。固定した検索パネルも
   中身が枠より高ければ縦に送って見る。
   文字が切られた要素は 0（2026-09-13、静的ページ（bUnit 描画＋app.css）で 56 種のページ × 幅 6 通り × 左メニューの開閉の 672 通りを計測）。
   YosanScreen は予算・工事の 32 画面が共有する部品なので、参照はすべて .kaigisyo-ichiran の内側に書く。
   外へ漏れると、旧 Designer の座標で並べている他の画面が崩れる。
   =========================================================================== */
/* 面の枠と影を外し、/buildings と同じく一覧を地の上に直接置く */
.kaigisyo-ichiran .edit-surface { border: 0; background: none; box-shadow: none; }

/* 根元の DOM は旧 Designer の TabIndex 順（検索 → 一覧 → 操作 → ステータス欄・旧メニュー）。
   見る順は 操作 → 旧メニュー → 一覧 → ページ送り → ステータス欄の文字 にする。
   並べ替えの対象として名指ししていない子は最後へ送り、一覧より前に割り込ませない。 */
.kaigisyo-ichiran .field-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.kaigisyo-ichiran .field-groups > * { order: 4; }
.kaigisyo-ichiran .field-groups > .field-section { order: 1; flex: 1 1 100%; min-width: 0; border-bottom: 0; }
.kaigisyo-ichiran .field-groups > .command { order: 2; }
.kaigisyo-ichiran .field-groups > [data-legacy-control="fg"],
.kaigisyo-ichiran .field-groups > .ichiran-pager { order: 3; flex: 1 1 100%; min-width: 0; }
.kaigisyo-ichiran .field-groups > [data-legacy-control="fg"] { margin-top: 8px; }

/* 旧座標の 24 列 grid と inline の grid-column / grid-row は、grid でなくすれば効かなくなる。
   !important で座標を打ち消さずに済み、旧座標の値は DOM に残ったままになる */
.kaigisyo-ichiran .field-groups > .field-section > .field-grid { display: block; padding: 0; overflow: visible; background: none; }
.kaigisyo-ichiran .field-groups > .field-section .field-group { margin: 0; border: 0; background: none; }
.kaigisyo-ichiran .field-groups > .field-section .field-group > .field-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; overflow: visible; background: none; }

/* 押す部品は /buildings のページ送りのボタン（.ichiran-step）と同じ角・余白・字の大きさにそろえる。
   権限の無い旧メニューの無効表示と primary の塗りは既存の規則が担うので、色を替えるのは有効な通常ボタンだけ */
.kaigisyo-ichiran .field-groups .command { min-height: 30px; padding: 3px 14px; border-radius: 4px; font-size: 12px; }
.kaigisyo-ichiran .field-groups .command:not(:disabled):not(.primary) { border-color: var(--ic-line); background: var(--surface); color: var(--ic-ink); }
.kaigisyo-ichiran .field-groups .command:not(:disabled):not(.primary):hover { background: var(--ic-accent-soft); }
/* 検索パネルで押す先は検索（旧 AcceptButton）だけなので、/buildings の実行ボタン（.ichiran-run）と同じ大きさで目立たせる */
.kaigisyo-ichiran .field-groups > .field-section:first-child .command.primary { min-height: 32px; padding: 4px 18px; font-size: 13px; font-weight: 700; }

/* 検索は /buildings の絞り込み（.ichiran-panel）と同じ位置・幅で右に固定する。本文は .ichiran の
   padding-right でパネルの左へ詰まるので、一覧・操作ボタン・通知の上には重ならない */
.kaigisyo-ichiran .field-groups > .field-section:first-child {
    order: 0;
    position: fixed;
    z-index: 60;
    top: 64px;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    padding: 18px 20px;
    overflow-y: auto;
    border-left: 1px solid var(--ic-line);
    background: var(--surface);
}
.kaigisyo-ichiran .field-groups > .field-section:first-child .field-group-heading { margin: 0; padding: 0; border: 0; background: none; color: var(--ic-ink); font-size: 14px; letter-spacing: 0; }
.kaigisyo-ichiran .field-groups > .field-section:first-child .field-group > .field-grid { align-items: flex-end; gap: 12px 10px; margin-top: 16px; }
/* 欄はラベルを上・入力を下に積む。入力欄に最小幅を持たせ、パネル幅では 1 行に 1 欄しか入らないようにする。
   ラジオ・チェックは入力幅を持たないので、入る分だけ同じ行に詰まる */
.kaigisyo-ichiran .field-groups > .field-section:first-child .field { flex: 1 1 auto; padding: 0; }
.kaigisyo-ichiran .field-groups > .field-section:first-child .field-control-line { min-width: 220px; }
.kaigisyo-ichiran .field-groups > .field-section:first-child .field > label:not(.check-field) { margin-bottom: 5px; color: var(--ic-muted); font-weight: 400; }
.kaigisyo-ichiran .field-groups > .field-section:first-child .field-meta:empty { min-height: 0; margin-top: 0; }
.kaigisyo-ichiran .field-groups > .field-section:first-child .check-field { min-height: 28px; gap: 6px; font-weight: 400; }
.kaigisyo-ichiran .field-groups > .field-section:first-child .field input[type="text"],
.kaigisyo-ichiran .field-groups > .field-section:first-child .field input[type="date"],
.kaigisyo-ichiran .field-groups > .field-section:first-child .field .legacy-autocomplete-input { border-radius: 4px; font-size: 13px; }
/* 打った文字の色は建物一覧の入力欄（--ic-ink）にそろえる。使用不可の欄（.field-disabled）は外す。旧で文脈により
   使えなくなる欄は、既存の規則が黄色地・灰色の文字で見分けさせており、ここで色を上書きするとその見分けが薄れる */
.kaigisyo-ichiran .field-groups > .field-section:first-child .field:not(.field-disabled) input[type="text"],
.kaigisyo-ichiran .field-groups > .field-section:first-child .field:not(.field-disabled) input[type="date"],
.kaigisyo-ichiran .field-groups > .field-section:first-child .field:not(.field-disabled) .legacy-autocomplete-input { color: var(--ic-ink); }
/* 検索・クリアは欄を全部見終えた位置（パネルの最後）に出す。DOM では件・事項・業者の前にあるが、
   縦に積むと欄の途中にボタンが挟まり、下にまだ条件が続くことが見えにくくなる */
.kaigisyo-ichiran .field-groups > .field-section:first-child .field-action { order: 1; }
/* 非表示の cmbBukken（旧 Visible=False）は、状態だけを持つ読み上げ用の span を .field-action に包んで出る。
   上の order でボタンの組へ一緒に送られると、幅 0 のまま直前の 内訳指示明細 の行に入り、列の間隔 10px の分だけ
   その欄を他の欄より狭めていた（2026-09-13、静的ページで 269px ／ 他の欄 279px）。流れから外して並びに加えない */
.kaigisyo-ichiran .field-groups > .field-section:first-child .field-action:has(> .legacy-state-control:only-child) { position: absolute; }

/* 一覧は /buildings の表（.ichiran-table）と同じ文字・見出し・罫線・hover にそろえる */
.kaigisyo-ichiran .embedded-grid { margin: 0; border: 0; background: var(--surface); }
/* 表の中に縦のスクロール枠を作らない。ページを替えても枠の途中の位置が残り、先頭の行が見えないまま
   次のページを読むことになる。高さは行数なりにして本文（.workbench）だけを縦に動かし、入らない幅だけ横に送る */
.kaigisyo-ichiran .sengu-record-grid { max-height: none; overflow-x: auto; border: 0; background: var(--surface); font-size: 13px; }
/* 共通グリッドは見出しと各行が別々の grid で、行ごとに自分の内容から均等な列幅を決める。右の検索パネルの分だけ
   一覧が狭まると、長い件名を持つ行だけが見出しより広がり、行ごとに列がずれる。行を subgrid にして列の線を
   一覧全体で共有し、表と同じく各列を一番長いセルの幅にする。
   余りの幅は件名／事項名が受ける。旧 SetColumn・SetColumn4Kouji・SetColumn4ShikikinSeisan のどれでも
   選択列を含めて 4 列目で、旧の列幅も最大（350）だった（spec/screens/NskYosan.YosanMain.json）。
   列の数は最も多い工事の 9 列より多めに取り、使わない列は幅 0 のまま残る。auto の列はセルの overflow: hidden のせいで
   最小幅が 0 になり、一覧が狭いと文字が省略されるので、件名以外の列は max-content で取る。
   件名／事項名だけは縮めてよい列にし、入らない文字は下の規則で折り返す。一番長い件名の幅で取ると、ページに長い件名が
   1 件あるだけで右の 業者名・状態・タイプ が枠の外へ押し出され、横スクロールバーは 30 行分下の枠の下端にしか無い。
   件名以外の列は縮めないので、業者名／契約者名が長いときは同じ理由で状態・タイプが全行で枠の外に出ることがある（docs に計測値）。
   下限 14ch は見出し「件名／事項名」が省略されない幅（2026-09-13、静的ページで計測） */
.kaigisyo-ichiran .sengu-record-grid { display: grid; grid-template-columns: max-content max-content max-content minmax(14ch, 1fr) repeat(9, max-content); align-content: start; }
.kaigisyo-ichiran .sengu-record-grid > * { grid-column: 1 / -1; }
/* 共通グリッドは列幅を行ごとの style 属性（SenguRecordGrid の GridTemplate）に書くため、属性より強い important 指定でしか
   subgrid に切り替えられない。行ごとの列幅のままだと、長い件名の行だけ列がずれて見出しと値が揃わない。
   上の「座標を打ち消さずに済む」は検索欄の旧座標の話で、ここは一覧の行の列幅 */
.kaigisyo-ichiran .sengu-record-grid-head,
.kaigisyo-ichiran .sengu-record-grid-row { grid-template-columns: subgrid !important; min-width: 0; }
/* /buildings の見出しは本文と一緒に流れる（ContractPropertyFlowPresentationTests が sticky を禁じている） */
.kaigisyo-ichiran .sengu-record-grid-head { position: static; background: var(--surface); color: var(--ic-muted); font-size: 11px; font-weight: 600; }
/* 下の余白だけ 8.5px: /buildings の見出し（36.5px。静的ページ（bUnit 描画＋app.css）で計測）は table の border-collapse で下線 1px の半分だけが高さに入る。
   grid のセルは下線を丸ごと自分の高さに持つので、下の余白を 0.5px 減らして同じ高さにする */
.kaigisyo-ichiran .sengu-record-grid-head > span,
.kaigisyo-ichiran .sengu-record-grid-head > .grid-sort { padding: 9px 12px 8.5px; border-right: 0; border-bottom: 1px solid var(--ic-line); }
.kaigisyo-ichiran .sengu-record-grid-head > .grid-sort:hover { color: var(--ic-ink); }
.kaigisyo-ichiran .sengu-record-grid-row > span { min-height: 0; padding: 7px 12px; border-right: 0; border-bottom: 1px solid var(--ic-rule); }
/* 件名／事項名（どの区分でも選択列を含めて 4 列目）は、縮めた列幅に入らない分を折り返して全文を出す。共通グリッドの
   セルは 1 行に収めて末尾を「…」で切るので、そのままだと一覧が狭い幅で件名の末尾（「その7」など）が消え、行を件名で
   見分けられない（2026-09-13、静的ページで工事・左メニューを開いた 1,024px 幅では 30 行すべて「屋上防水工事 …」）。
   全文はマウスを載せたときの title でしか読めず、キーボードやタッチでは読めない。建物一覧に寄せる前の web は、行を件名の
   長さまで広げて全文を出していた。建物一覧は長い名前を「…」で切るが、ここは見えていた文字を CSS で切らない約束
   （上の見出しのコメント）を優先する。列幅は変わらず、入らない件名の行だけが高くなる */
.kaigisyo-ichiran .sengu-record-grid-row > span:nth-child(4) { white-space: normal; overflow-wrap: anywhere; }
/* 行の高さは /buildings の行（34.5px。静的ページ（bUnit 描画＋app.css）で計測）にそろえる（件名を折り返した行は除く）。共通グリッドの min-height 34px に padding が足されるのと、
   チェックの上下 margin で行の箱が膨らむのを外す */
.kaigisyo-ichiran .sengu-record-grid-row > .select-col input { margin-block: 0; vertical-align: middle; }
/* 回議書NO は /buildings のコード列（.col-code、見出しも含む）と同じ字形にする。選択列の次で、旧の 5 区分どの列構成でも 2 列目 */
.kaigisyo-ichiran .sengu-record-grid-head > :nth-child(2),
.kaigisyo-ichiran .sengu-record-grid-row > span:nth-child(2) { font-family: var(--ic-mono); font-size: 12px; }
/* 縞は付けず、hover は行の地で出す。決裁（legacy-kessai）・却下（legacy-kyakka）はセルの地を塗るので、
   セルに hover 色を当てると旧の決裁結果の色が隠れる。行の地なら決裁結果の色が常に上に見える */
.kaigisyo-ichiran .sengu-record-grid-row:nth-child(even) { background: none; }
.kaigisyo-ichiran .sengu-record-grid-row:hover { background: var(--ic-accent-soft); }
/* /buildings では表の下端とページ送りの間に余白を足さない。.field-groups の行間 8px を打ち消す */
.kaigisyo-ichiran .field-groups > .ichiran-pager { margin-top: -8px; }

/* 旧 StatusStrip・MenuStrip の Designer 文言（StatusStrip1・ファイル・Cnt など）。消さずに一覧の下で控えめに並べる */
.legacy-status-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 7px;
    min-height: 26px;
    margin-top: 8px;
    padding: 3px 8px;
    color: var(--muted);
    border: 1px solid var(--line-soft);
    background: var(--surface-dim);
    font-size: 11px;
}
.legacy-status-strip progress { width: 80px; height: 10px; }
.legacy-status-strip output:empty { display: none; }
.legacy-status-strip [role="separator"] { color: var(--line-strong); }
.kaigisyo-ichiran .field-groups > .legacy-static-label { font-size: 11px; }
.kaigisyo-ichiran .field-groups > .legacy-static-label:not([aria-disabled="true"]) { color: var(--ic-muted); }

/* 右に固定した検索パネルの横に残る一覧の幅は、CSS から 幅 − 左メニュー（開いて 256px・畳んで 0）− .workbench の左余白
   clamp(18px, 3vw, 42px) − 320px になる（1024px 幅・左メニューを開くと 417px、1280px 幅・左メニューを開くと 666px）。
   列の最も多い工事（9 列）は件名を下限まで縮めても約 726px を要し（2026-09-13、bUnit 描画＋app.css の静的ページで計測）、
   足りない分は右の列が枠の外に出て、横に送らないと見えない。一覧の高さが行数なりなので、横スクロールバーも 30 行分下にしか無い。
   本文の縦スクロールバーが幅を取る環境の分として 17px を見込み、一覧の幅が 743px（726px＋17px）を割る幅では、回議書一覧だけ検索を先頭の通常の流れへ戻し、
   右の詰めも外す。760px 以下で .workbench の右余白が 12px に減り本文の右端がパネルの下に潜る問題もこれで避けられる。
   左メニューの開閉は幅の media query では分からないので、開いているときの閾値は .app-shell の状態で分ける */
@media (max-width: 1099px) {
    .kaigisyo-ichiran { padding-right: 0; }
    .kaigisyo-ichiran .field-groups > .field-section:first-child { position: static; width: auto; padding: 14px 16px; overflow-y: visible; border: 1px solid var(--ic-line); }
}
@media (max-width: 1359px) {
    .app-shell[data-sidebar-state="expanded"] .kaigisyo-ichiran { padding-right: 0; }
    .app-shell[data-sidebar-state="expanded"] .kaigisyo-ichiran .field-groups > .field-section:first-child { position: static; width: auto; padding: 14px 16px; overflow-y: visible; border: 1px solid var(--ic-line); }
}

/* CSV出力（/CSV出力、SNG-777）: 導線と件数は折り返さず、期間の注記は選択の下に置く */
.csv-export-table .command { white-space: nowrap; }
.csv-export-table td.num { white-space: nowrap; }
.csv-export-note { display: block; margin-top: 4px; color: var(--muted); font-size: .85em; }
.csv-export-section h2 { margin: 18px 0 8px; font-size: 1.1em; }

/* SNG-749: 回議書だけを旧座標から5カードへ組み替える。各カードの実幅で畳み、
   サイドバーの開閉と窓幅が食い違っても列・行を別条件にしない。 */
.kaigisyo-detail {
    --contract-card-inline-padding: 14px;
    max-width: 1216px;
    min-width: 0;
    margin-inline: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    container: kaigisyo-detail / inline-size;
}
.kaigisyo-card { min-width: 0; margin-top: 10px; border: 1px solid var(--line); background: var(--surface); container: kaigisyo-card / inline-size; }
.kaigisyo-card > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin: 0; padding: 8px var(--contract-card-inline-padding); border-bottom: 1px solid var(--line-soft); background: var(--surface-dim); color: var(--ink); font-size: 14px; }
.kaigisyo-card > h2 small { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 400; }
.kaigisyo-card-body { min-width: 0; padding: 10px var(--contract-card-inline-padding) 12px; }
.kaigisyo-detail-utilities { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.kaigisyo-card > h2 .kaigisyo-detail-utilities .command { font-weight: 400; }
.kaigisyo-detail .field { min-width: 0; padding: 0; background: transparent; }
.kaigisyo-detail .field-meta:empty { display: none; }
.kaigisyo-detail .field > label:not(.check-field) { color: var(--label); font-size: 12px; font-weight: 600; }
.kaigisyo-detail .field-control-line, .kaigisyo-detail .legacy-autocomplete { min-width: 0; max-width: 100%; }
.kaigisyo-detail .field-control-line > input, .kaigisyo-detail .field-control-line > select, .kaigisyo-detail .field-control-line > textarea, .kaigisyo-detail .legacy-autocomplete-input { width: 100%; min-width: 0; max-width: 100%; }
/* 回議書の参照値は入力枠で囲まない。薄字にもせず、選択・コピーと長文の読取りを保つ。 */
.kaigisyo-detail .field-readonly { align-self: stretch; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.kaigisyo-detail .field-readonly > label { overflow: visible; white-space: normal; color: var(--muted); }
.kaigisyo-detail .field-readonly-value { display: block; flex: 1 1 auto; min-width: 0; min-height: 32px; padding-block: 4px; color: var(--ink); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.kaigisyo-detail .field-readonly-value.is-numeric { font-variant-numeric: tabular-nums; }
.kaigisyo-detail .field-readonly-reason { display: inline-block; margin-inline-start: 8px; color: var(--muted); font-size: 11px; font-weight: 400; }
.kaigisyo-detail .kaigisyo-readonly-state { display: inline-block; margin-inline-start: 12px; padding: 2px 7px; border: 1px solid var(--line); border-radius: var(--control-radius); color: var(--ink); font-size: 11px; font-weight: 400; }
.kaigisyo-detail .kaigisyo-readonly-note { margin: 0; padding: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.kaigisyo-condition-note { margin: 8px 0 0; padding: 7px 9px; border-left: 3px solid var(--kaigisyo-note-line); background: var(--kaigisyo-note-bg); color: var(--muted); font-size: 12px; }

/* 基本: 主要な入力を左、番号・金額・科目を右。左の値の開始位置は同じ label 幅でそろえる。 */
.kaigisyo-basic-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21.25rem); gap: 14px 32px; align-items: start; }
.kaigisyo-basic-column { display: grid; gap: 10px; min-width: 0; }
.kaigisyo-basic-layout .field { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 6px; }
.kaigisyo-basic-layout .field > label:not(.check-field) { margin: 0; }
.kaigisyo-basic-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.kaigisyo-basic-inline > div { min-width: 0; }
.kaigisyo-basic-inline > div:not(:first-child) .field { grid-template-columns: max-content minmax(0, 1fr); }
.kaigisyo-basic-inline .field:has(> label.visually-hidden) { display: block; }
.kaigisyo-basic-kian-row .kaigisyo-department-field { flex: 1 1 18rem; }
.kaigisyo-basic-period-row .kaigisyo-payment-method-field { flex: 1 1 12rem; }
.kaigisyo-wide-field .field-control-line { width: 100%; }
.kaigisyo-date-field .field-control-line { width: 10.5em; }
.kaigisyo-department-field .field-control-line { width: 19em; }
.kaigisyo-payment-method-field .field-control-line { width: 8em; }
.kaigisyo-number-field .field-control-line { width: 14em; }
.kaigisyo-person-field .field-control-line { width: 12em; }
.kaigisyo-code-field .field-control-line { width: 11em; }
.kaigisyo-money-field .field-control-line { width: 8.5em; }
.kaigisyo-subject-field .field-control-line { width: 15em; }
.kaigisyo-state-label { flex: 0 0 auto; padding: 2px 6px; border: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; white-space: nowrap; }
.kaigisyo-state-label.kaigisyo-warning-label { border-color: var(--danger); background: var(--danger); color: var(--surface); }
.kaigisyo-basic-choice { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 6px; }
.kaigisyo-inline-label { color: var(--label); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* 支払予定・予算・資金繰り: 小枠そのものを単位に折り返す。 */
.kaigisyo-three-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; padding: 10px var(--contract-card-inline-padding) 12px; align-items: start; }
.kaigisyo-mini-panel { min-width: 0; padding: 8px; border: 1px solid var(--line); }
.kaigisyo-mini-panel h3 { margin: -8px -8px 8px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); background: var(--surface-dim); font-size: 13px; }
.kaigisyo-mini-panel .embedded-grid { max-width: 100%; margin: 0; overflow-x: auto; }
.kaigisyo-detail .kaigisyo-payment-message { color: var(--danger); }
.kaigisyo-payment-message:empty { display: none; }
.kaigisyo-mini-fields { display: grid; gap: 8px; }
.kaigisyo-mini-fields .field { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: center; gap: 6px; }
.kaigisyo-mini-fields .field-control-line { width: min(12em, 100%); }
.kaigisyo-panel-actions, .kaigisyo-section-actions, .kaigisyo-table-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.kaigisyo-table-actions { justify-content: flex-start; }
.kaigisyo-budget-grid table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kaigisyo-budget-grid th, .kaigisyo-budget-grid td { padding: 5px 8px; border-top: 1px solid var(--line-soft); }
.kaigisyo-budget-grid tr:first-child th, .kaigisyo-budget-grid tr:first-child td { border-top: 0; }
.kaigisyo-budget-grid th { width: 55%; background: var(--surface-dim); color: var(--label); text-align: left; font-weight: 600; white-space: nowrap; }
.kaigisyo-budget-grid td { text-align: right; font-variant-numeric: tabular-nums; }

/* 負担・請求: 負担者・金額・方法・切替パネルを行の単位にする。 */
.kaigisyo-futan { display: grid; gap: 0; }
.kaigisyo-futan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.kaigisyo-futan-row:first-child { padding-top: 0; border-top: 0; }
.kaigisyo-futan-who { flex: 0 0 6.5em; }
.kaigisyo-futan-amount { flex: 0 1 11.5em; }
.kaigisyo-futan-method { display: flex; flex: 0 1 13.5em; align-items: center; gap: 8px; min-width: 0; }
.kaigisyo-futan-amount .field, .kaigisyo-futan-method .field { display: grid; grid-template-columns: 4em minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.kaigisyo-futan-amount .field-control-line { width: 8em; }
.kaigisyo-futan-method .field { flex: 1 1 auto; }
.kaigisyo-futan-method .field-control-line { width: 8.5em; }
.kaigisyo-futan-panel { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; margin-left: calc(6.5em + 18px); padding-left: 12px; border-left: 3px solid var(--line-soft); }
.kaigisyo-futan-panel[hidden] { display: none; }
.kaigisyo-futan-panel .field { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 6px; }
.kaigisyo-futan-panel .field-control-line { width: 8.5em; }
.kaigisyo-futan-panel .field:has(.year-month-select) .field-control-line { width: auto; }
.kaigisyo-futan-panel .field:has(input[type="date"]) .field-control-line { width: 10.5em; }
.kaigisyo-futan-panel .kaigisyo-count-field .field-control-line { width: 4.5em; }
.kaigisyo-futan-panel .check-field { white-space: nowrap; }
.kaigisyo-futan-row > .kaigisyo-condition-note { flex: 1 1 100%; margin-left: calc(6.5em + 18px); }
.kaigisyo-futan > .kaigisyo-section-actions { margin-top: 0; }

/* 明細だけは表の中で横へ送り、カードとページの幅は押し広げない。 */
.kaigisyo-detail-table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; border: 1px solid var(--line); }
.kaigisyo-detail-table-wrap > section { min-width: 910px; }
.kaigisyo-detail-table-wrap .embedded-grid { margin: 0; border: 0; }

/* 具申は全幅、その下で概評と4段の決裁表を分ける。表の見出しは一度だけ描く。 */
.kaigisyo-approval { display: grid; gap: 14px; }
.kaigisyo-gushin-field .field, .kaigisyo-opinion-fields .field { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: start; gap: 6px; }
.kaigisyo-gushin-field textarea, .kaigisyo-opinion-fields textarea { width: 100%; }
.kaigisyo-approval-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 16px 28px; align-items: start; }
.kaigisyo-opinion-fields { display: grid; gap: 8px; }
.kaigisyo-decision { min-width: 0; }
.kaigisyo-decision-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kaigisyo-decision-table th, .kaigisyo-decision-table td { padding: 5px 6px; border-top: 1px solid var(--line-soft); text-align: left; }
.kaigisyo-decision-table thead th { border-top: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.kaigisyo-decision-table tbody th { color: var(--label); font-weight: 500; white-space: nowrap; }
.kaigisyo-decision-table td { min-width: 0; }
.kaigisyo-decision-table .field-control-line { width: 100%; }
.kaigisyo-decision-table td:last-child { width: 10.5em; }
.kaigisyo-status { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.kaigisyo-status > .field { flex: 1 1 auto; }
.kaigisyo-status .field-control-line { width: 100%; }
.kaigisyo-detail .kaigisyo-status-kyakka .field-readonly-value, .kaigisyo-detail .kaigisyo-status-kessai .field-readonly-value { padding-inline: 8px; }
.kaigisyo-detail .kaigisyo-status-kyakka .field-readonly-value { background: var(--kaigisyo-status-kyakka); }
.kaigisyo-detail .kaigisyo-status-kessai .field-readonly-value { background: var(--kaigisyo-status-kessai); }

/* 確定操作は .workbench の実幅に従う。通常スクロールバーとサイドバーの幅を画面幅から再計算しない。 */
.kaigisyo-command-bar { position: sticky; z-index: 20; bottom: calc(-1 * var(--workbench-bottom-padding)); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; padding: 10px var(--contract-card-inline-padding); border: 1px solid var(--line); background: var(--surface); box-shadow: 0 -3px 14px var(--kaigisyo-command-bar-shadow); }
.kaigisyo-command-actions { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }

/* 1行の下限: 本文左右 28px + 基本3列 31.5em（441px）+ 列間 18px×3（54px）
   + 右欄の線と左余白 15px + 振込欄の max-content 627px = 1165px。 */
@container kaigisyo-card (min-width: 1165px) {
    .kaigisyo-futan-row { display: grid; grid-template-columns: 6.5em 11.5em 13.5em minmax(0, 1fr); }
    .kaigisyo-futan-panel { margin-left: 0; flex-wrap: nowrap; }
    .kaigisyo-futan-row > .kaigisyo-condition-note { grid-column: 4; margin-left: 0; }
}
@container kaigisyo-card (max-width: 820px) {
    .kaigisyo-approval-split { grid-template-columns: minmax(0, 1fr); }
}
@container kaigisyo-card (max-width: 760px) {
    .kaigisyo-basic-layout { grid-template-columns: minmax(0, 1fr); }
}
@container kaigisyo-card (max-width: 560px) {
    .kaigisyo-futan-panel, .kaigisyo-futan-row > .kaigisyo-condition-note { margin-left: 0; padding-left: 0; border-left: 0; }
}
@container kaigisyo-detail (max-width: 560px) {
    .kaigisyo-command-bar { align-items: flex-end; }
    .kaigisyo-command-actions { flex-basis: 100%; }
}

/* SNG-813: 共通にするのは部品。ペインがある一覧だけ、開いている間の幅を確保する。 */
.ichiran.has-filter-pane { padding-right: 0; }
.ichiran.has-filter-pane:has(.ichiran-filter-pane[data-pane-open="true"]) { padding-right: calc(min(320px, 86vw) - var(--workbench-inline-padding, clamp(18px, 3vw, 42px))); }
.ichiran-filter-pane[hidden] { display: none; }
/* SNG-855: 家主送金は確認・処理結果の枠が一覧（.has-filter-pane）の外にあり、開いた絞り込みの下に右端の［実行する］が
   潜って押せなかった。一覧と同じだけ右を空ける。長い確認文でボタンが「実行す／る」と折れないよう、ボタンは縮めない。 */
:is(.notice, .confirmation):has(~ .soukin-main-surface .ichiran-filter-pane[data-pane-open="true"]) { margin-right: calc(min(320px, 86vw) - var(--workbench-inline-padding, clamp(18px, 3vw, 42px))); }
.confirmation:has(~ .soukin-main-surface) > :is(button, .button) { flex: 0 0 auto; white-space: nowrap; }
.ichiran-table-scroll { min-width: 0; overflow-x: auto; }
.ichiran-table[data-row-mode="none"] tbody tr,
.ichiran-table[data-row-mode="actions"] tbody tr { cursor: default; }
.ichiran-table tr.is-current > td { background: var(--row-selected); }
.ichiran-table tr.has-row-style > td,
.ichiran-table tr.has-row-style:hover > td { background: inherit; }
.ichiran-table .ichiran-sort, .ichiran-table .grid-sort { border: 0; background: transparent; color: inherit; padding: 0; font: inherit; text-align: inherit; }
.ichiran-table .num { font-family: var(--ic-mono); font-variant-numeric: tabular-nums; }
.ichiran-table tbody tr.state-contracted td:first-child { box-shadow: inset 4px 0 0 var(--ic-band-contracted); }
.ichiran-table tr td.claim-urgent-attribute, .ichiran-table tr:hover td.claim-urgent-attribute { background: var(--claim-urgent-attribute); }
/* 一覧だけ旧グリッドの表描画を切り替える。明細編集画面の display:grid には波及させない。 */
.sengu-record-grid.sengu-ichiran-adapter { display: block; max-height: none; min-height: 0; overflow: visible; border: 0; background: var(--surface); }
.sengu-ichiran-adapter .ichiran-table tr.sengu-record-grid-row { display: table-row; min-width: 0; inline-size: auto; }
.sengu-ichiran-adapter .ichiran-table .sengu-grid-actions { display: table-cell; }
.sengu-ichiran-adapter .ichiran-table .sengu-grid-actions button { margin: 2px; }
.sengu-ichiran-adapter .ichiran-table .select-col input { width: auto; min-width: 0; }
.sengu-ichiran-adapter .ichiran-table tr[class*="state-"] td,
.sengu-ichiran-adapter .ichiran-table tr[class*="state-"]:hover td { background: inherit; }
.sengu-ichiran-adapter .ichiran-table tfoot td { background: inherit; border-top: 1px solid var(--ic-line); }
.kaigisyo-ichiran .sengu-record-grid.sengu-ichiran-adapter { display: block; }
.kaigisyo-ichiran .legacy-ichiran-table td:nth-child(4) { white-space: normal; overflow-wrap: anywhere; min-width: 14ch; }
/* ワークフローの右端の起票・開く操作は、横へ送っても見失わせない。 */
.ichiran-table.workflow-ichiran th:last-child,
.ichiran-table.workflow-ichiran td:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); border-left: 1px solid var(--line); }
.ichiran-table.workflow-ichiran thead th:last-child { z-index: 2; }
.ichiran-table.workflow-ichiran tbody tr:hover td:last-child { background: var(--ic-accent-soft); }
@media (max-width: 1099px) {
    .kaigisyo-ichiran.has-filter-pane:has(.ichiran-filter-pane[data-pane-open="true"]) { padding-right: 0; }
    .kaigisyo-ichiran.has-filter-pane .ichiran-filter-pane { position: static; width: auto; max-height: none; border-left: 0; border-bottom: 1px solid var(--ic-line); }
}
@media (max-width: 680px) {
    .ichiran.has-filter-pane:has(.ichiran-filter-pane[data-pane-open="true"]) { padding-right: 0; }
    :is(.notice, .confirmation):has(~ .soukin-main-surface .ichiran-filter-pane[data-pane-open="true"]) { margin-right: auto; }
    .ichiran-pager { flex-wrap: wrap; }
}

/* SNG-927: 多項目の更新一覧を 1 件 1 枚にし、絞り込みの基準日を各カードで読めるようにする。 */
/* SNG-927: StepFilter をこの短い器に入れると子の sticky は器の終端で止まる。絞り込みと並べ替えを器ごと貼る。 */
.koushin-list-controls { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 12px 10px; background: var(--surface); }
.koushin-list-controls .command-bar { position: static; margin: 0; }
.koushin-sort { display: flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 6px; color: var(--ic-muted); font-size: 12px; }
.koushin-sort select, .koushin-sort button { min-height: 32px; padding: 4px 8px; border: 1px solid var(--ic-line); border-radius: 4px; background: var(--surface); color: var(--ic-ink); font: inherit; }
.koushin-sort select { max-width: 100%; }
.koushin-sort button:disabled { color: var(--ic-hint); cursor: default; }
.koushin-cards { container-type: inline-size; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 12px; list-style: none; }
.koushin-cards li { min-width: 0; }
.koushin-card { box-sizing: border-box; display: grid; width: 100%; grid-template-columns: minmax(160px, 1.3fr) repeat(5, minmax(90px, 1fr)) 20px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 6px; align-items: start; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface); box-shadow: 0 1px 2px var(--panel-shadow); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.koushin-card:hover { border-color: var(--ic-line); background: var(--hover); box-shadow: 0 2px 7px var(--koushin-card-shadow); color: var(--ink); text-decoration: none; }
.koushin-card-identity { grid-row: 1 / span 2; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.koushin-card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.koushin-card-chips .taikyo-chip { margin-right: 0; }
.koushin-card-building { color: var(--ic-ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.koushin-building-name { overflow-wrap: anywhere; }
.koushin-room-number { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.koushin-card-code { color: var(--ic-muted); font: 11px var(--ic-mono); overflow-wrap: anywhere; }
.koushin-card-field { min-width: 0; display: block; overflow-wrap: anywhere; }
.koushin-card-field > span { display: block; color: var(--ic-muted); font-size: 10px; font-weight: 400; }
.koushin-card-field > strong { display: block; font-size: 13px; font-weight: 400; }
.koushin-card-field:nth-of-type(7) > strong,
.koushin-card-field:nth-of-type(8) > strong,
.koushin-card-field:nth-of-type(9) > strong { white-space: nowrap; }
.koushin-card-next > strong { font-weight: 700; }
.koushin-card-field:nth-of-type(7) { grid-column: 2; }
.koushin-card-arrow { grid-column: 7; grid-row: 1 / span 2; align-self: center; justify-self: end; color: var(--ic-muted); font-size: 25px; line-height: 1; }
/* SNG-927: 2 段の最小幅は 160 + 5×90 + 20 + 6×10 + 内余白24 + 枠2 = 716px（区切りまで4px）。
   折り返し後も矢印専用の末尾列を確保し、項目を DOM 順に流す。 */
@container (width < 720px) {
    .koushin-card { grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; grid-template-rows: none; }
    .koushin-card-identity { grid-row: auto; grid-column: 1 / -1; }
    .koushin-card-field:nth-of-type(7) { grid-column: auto; }
    .koushin-card-arrow { grid-column: 4; grid-row: 2 / span 3; }
}
@container (max-width: 550px) {
    .koushin-card { grid-template-columns: repeat(2, minmax(0, 1fr)) 28px; }
    .koushin-card-arrow { grid-column: 3; grid-row: 2 / span 5; }
}
@container (max-width: 310px) {
    .koushin-card { grid-template-columns: minmax(0, 1fr) 28px; }
    .koushin-card-arrow { grid-column: 2; grid-row: 2 / span 9; }
}
.koushin-confirm { box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: min(100%, 440px); height: fit-content; margin: 0; padding: 24px; border: 0; border-radius: 8px; background: var(--surface); box-shadow: 0 12px 32px var(--koushin-dialog-shadow); }
.sengu-popup-overlay.koushin-confirm-overlay { box-sizing: border-box; align-items: flex-start; overflow-y: auto; padding: min(20vh, 220px) 16px 24px; }
.koushin-confirm { flex: 0 0 auto; }
.koushin-confirm h2 { margin: 0; color: var(--ic-ink); font-size: 17px; }
.koushin-confirm dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--surface-header); }
.koushin-confirm dl > div { display: block; min-width: 0; overflow-wrap: anywhere; }
.koushin-confirm-building { grid-column: 1 / -1; }
.koushin-confirm dt { color: var(--ic-muted); font-size: 10px; }
.koushin-confirm dd { margin: 0; font-size: 13px; }
.koushin-confirm-building dd { font-size: 15px; font-weight: 700; }
.koushin-confirm-building dd span { color: inherit; font-size: inherit; font-weight: inherit; }
.koushin-confirm-next dd { font-weight: 700; }
.koushin-confirm p { margin: 0; line-height: 1.7; }
.koushin-confirm-actions { display: flex !important; justify-content: flex-end; gap: 10px; }
.koushin-confirm-actions button { min-height: 40px; padding: 0 18px; border: 1px solid var(--ic-line); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.koushin-confirm-actions .koushin-start { border-color: var(--ic-accent-strong); background: var(--ic-accent-strong); color: var(--surface); font-weight: 700; }
.koushin-confirm-actions button:disabled { opacity: .6; cursor: default; }

.legacy-ichiran-search { display: block; padding: 0; }
.kaigisyo-ichiran .field-groups > .ichiran-filter-pane { order: 0; flex: 1 1 100%; min-width: 0; }
.ichiran-filter-pane .field-section { min-width: 0; max-width: 100%; margin: 0; }
.ichiran-filter-pane .field-grid[data-field-layout="flow"] { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ichiran-filter-pane .field-grid[data-field-layout="flow"] > * { grid-column: 1 / -1 !important; min-width: 0; }
.ichiran-filter-pane .field-grid input, .ichiran-filter-pane .field-grid select { max-width: 100%; }

/* 共通ペインの中では旧24列座標を使わない。DOM順・旧control属性を保ったまま入力を積む。 */
.ichiran-filter-pane .field-section,
.ichiran-filter-pane .field-group { padding: 0; border: 0; background: none; }
.ichiran-filter-pane .field-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 10px; padding: 0; min-width: 0; overflow: visible; background: none; }
.ichiran-filter-pane .field-grid > .field-child-group { flex: 1 1 100%; min-width: 0; }
.ichiran-filter-pane .field { flex: 1 1 220px; min-width: 0; padding: 0; }
.ichiran-filter-pane .field-control-line { min-width: 0; width: 100%; }
.ichiran-filter-pane .legacy-autocomplete { min-width: 0; max-width: 100%; }
.ichiran-filter-pane .field > label:not(.check-field) { margin-bottom: 5px; color: var(--ic-muted); font-weight: 400; }
/* 使えない欄は入力画面（flow・modern-form）と同じく、面を落として破線にする。基本形の黄色（.field-disabled）が
   残ると、白地の絞り込みでは使えない欄のほうが使える欄より目立ち、どれを触れるのかが逆に伝わる。 */
.ichiran-filter-pane .field.field-disabled { background: transparent; }
.ichiran-filter-pane .field.field-disabled input[type="text"],
.ichiran-filter-pane .field.field-disabled input[type="date"],
.ichiran-filter-pane .field.field-disabled textarea,
.ichiran-filter-pane .field.field-disabled select,
.ichiran-filter-pane .field.field-disabled .legacy-autocomplete-input { background: var(--surface-dim); border-style: dashed; border-color: var(--line-soft); color: var(--muted); }
.ichiran-filter-pane .field.field-disabled > label:not(.check-field) { color: var(--line-strong); }
.ichiran-filter-pane .field-meta:empty { min-height: 0; margin-top: 0; }
.ichiran-filter-pane .check-field { min-height: 28px; gap: 6px; font-weight: 400; }
.ichiran-filter-pane .field-group-heading { margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--ic-ink); font-size: 13px; letter-spacing: 0; }
.ichiran-filter-pane .field-group { margin: 0; }
.ichiran-filter-pane .field-action { min-width: 0; max-width: 100%; }
.ichiran-filter-pane .field-action > .command { max-width: 100%; }
.kaigisyo-ichiran .ichiran-filter-pane .field-action:has(> [data-legacy-control="btnFind"]),
.kaigisyo-ichiran .ichiran-filter-pane .field-action:has(> [data-legacy-control="btnClear"]) { order: 1; }
.ichiran-filter-pane .field:has(> .check-field) { flex: 0 1 auto; }
.ichiran-filter-pane .field-action:has(> .legacy-state-control:only-child) { position: absolute; }

/* EditNKS は旧座標を共通の24列へ写さず、手数料を照合する五つの枠へ組み直す。
   すべて edit-nks から始め、同じ SoukinScreen を使う家主送金一覧・他の編集画面へ波及させない。 */
.edit-surface.edit-nks-surface {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
/* 処理結果・確認の枠（共通の .notice・.confirmation は max-width 1440px）を、本文のカードと同じ左右にそろえる。
   広い画面では 1180px のカードより左右にはみ出す。どちらも SoukinScreen が本文の枠より前に置く兄弟なので、
   後ろにこの面が続くものだけに限り、家主送金一覧・他の編集画面の枠は変えない。 */
.notice:has(~ .edit-nks-surface),
.confirmation:has(~ .edit-nks-surface) { max-width: 1180px; }
.edit-nks-editor,
.edit-nks-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}
.edit-nks-card {
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface);
}
.edit-nks-card > h2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
    margin: 0;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-dim);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
}
.edit-nks-card > h2 small { color: var(--muted); font-size: 12px; font-weight: 400; }
.edit-nks-card-body { min-width: 0; padding: 14px 14px 16px; }

/* 共通 field の上下76pxの箱をこの面だけ label/value の対へ戻す。 */
.edit-nks-editor .field { min-width: 0; padding: 0; background: transparent; }
.edit-nks-editor .field > label:not(.check-field):not(.visually-hidden),
.edit-nks-contractor-label {
    overflow: visible;
    margin: 0;
    color: var(--label);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: clip;
    white-space: nowrap;
}
.edit-nks-editor .field-control-line { width: 100%; min-width: 0; }
.edit-nks-editor .field-control-line > input,
.edit-nks-editor .field-control-line > select,
.edit-nks-editor .field-control-line > textarea,
.edit-nks-editor .field-control-line > .legacy-autocomplete > .legacy-autocomplete-input {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--surface);
    color: var(--ink);
}
.edit-nks-editor .field-control-line > input:disabled,
.edit-nks-editor .field-control-line > select:disabled,
.edit-nks-editor .field-control-line > textarea:disabled,
.edit-nks-editor .field-control-line > .legacy-autocomplete > .legacy-autocomplete-input:disabled {
    background: var(--disabled);
    color: var(--muted);
}
.edit-nks-editor .field-meta { display: none; }
/* 共通の .field-unit は 10px・太字・ラベル色。モックの「円」は 12px・muted で、欄の値より目立たせない。 */
.edit-nks-editor .field-unit { color: var(--muted); font-size: 12px; font-weight: 400; }
/* 共通の .field-invalid（0-1-0）の背景は上の transparent（0-2-0）に、枠色は上の入力欄の border に負ける。
   保存時の賃料エラー（旧 EditNKS.vb:407-412）で欄を見失わないよう、この面の選択子で背景と枠を戻す。 */
.edit-nks-editor .field.field-invalid { background: var(--danger-soft); }
.edit-nks-editor .field-invalid .field-control-line > input,
.edit-nks-editor .field-invalid .field-control-line > select,
.edit-nks-editor .field-invalid .field-control-line > textarea,
.edit-nks-editor .field-invalid .field-control-line > .legacy-autocomplete > .legacy-autocomplete-input { border-color: var(--danger); }
/* 共通のフォーカスの枠色（.field input:focus、0-2-1）は、上のこの面の border（0-2-1、後ろにあるので勝つ）に消される。
   共通と同じく、フォーカス中はエラーの赤枠（.field-invalid input、0-1-1）より teal を先にするため、
   この面の border（0-2-1・0-4-0）とエラーの枠（0-3-1・0-5-0）より強い選択子で枠色だけを戻す（影と outline は共通のまま）。 */
.edit-nks-editor .field .field-control-line > input:focus,
.edit-nks-editor .field .field-control-line > select:focus,
.edit-nks-editor .field .field-control-line > textarea:focus,
.edit-nks-editor .field .field-control-line > .legacy-autocomplete > .legacy-autocomplete-input:focus { border-color: var(--teal); }

/* 物件・契約者は見出しの列を枠の grid が一度だけ持ち、行・組・項目の箱を subgrid で乗せる（A表・B表 の枠と同じ作り）。
   項目ごとに見出しの列を作ると、見出しの字数で欄の左端が行ごとにずれる。狭いときは「見出し｜欄」の 2 列に
   DOM・Tab 順で 1 項目ずつ積み（見出しと欄の間は列の gap の 12px）、720px 以上で物件の三組を 1 行（6 列）にする。
   現契約者の欄は 2 列目から始まり、部屋コードの欄と左端がそろう。 */
.edit-nks-property-body { container-name: edit-nks-property; container-type: inline-size; }
.edit-nks-property-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    min-width: 0;
}
.edit-nks-property-row,
.edit-nks-property-slot,
.edit-nks-property-slot > .field {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-width: 0;
}
.edit-nks-property-row { grid-column: 1 / -1; row-gap: 10px; }
.edit-nks-property-slot { grid-column: span 2; }
.edit-nks-property-slot > .field { grid-column: 1 / -1; }
.edit-nks-code-slot .field-control-line { width: min(100%, 9em); }
.edit-nks-name-slot .field-control-line { width: min(100%, 22em); }
.edit-nks-room-slot .field-control-line { width: min(100%, 5em); }
/* 欄と「…」を一組にし、モックの .joined と同じく欄の右へつなげる（全体で 30em まで）。
   この組は 720px 以上で 2〜6 列目にまたがる。grid はまたがる項目の中身の幅を、中の max-content の列（物件名・番号の
   見出しの列）へ配って広げるので、1440px では見出しの列が 39→90.5px・26→77.5px に広がり、見出しが自分の欄から約 64px
   離れた（独立レビュー 4 回目の軽微 1）。contain: inline-size で組の中身の幅を列の計算から外し、列は物件の三組だけで
   決める。組の幅は列にまたがる枠いっぱい（30em まで）のまま。 */
.edit-nks-contractor-field { display: flex; grid-column: 2 / -1; min-width: 0; max-width: 30em; contain: inline-size; }
.edit-nks-contractor-field > .field { flex: 1 1 auto; }
.edit-nks-contractor-field > .command {
    flex: 0 0 auto;
    min-width: 34px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0;
    background: var(--surface-dim);
    font-size: 13px;
}
.edit-nks-contractor-field > .command:hover { border-color: var(--teal); background: var(--hover); }
/* 1 行に並べたときは、モック（.pairs の gap 12px、.inline の gap 14px、.field の gap 6px）と同じく、物件名・番号の見出しを
   自分の欄のすぐ左（6px）に付け、前の欄とは 14px 空ける。列の gap は 1 つの値しか持てないので 6px にし、差を見出しの
   margin で足す（先頭の列の見出しは右に 6px で欄まで 12px、中の組の見出しは左に 8px で前の欄から 14px）。 */
@container edit-nks-property (min-width: 720px) {
    .edit-nks-property-grid { grid-template-columns: max-content minmax(0, 9em) max-content minmax(0, 22em) max-content minmax(0, 5em); column-gap: 6px; }
    .edit-nks-editor .edit-nks-property-slot:first-child .field > label:not(.check-field):not(.visually-hidden),
    .edit-nks-editor .edit-nks-contractor-label { margin-right: 6px; }
    .edit-nks-editor .edit-nks-property-slot:not(:first-child) .field > label:not(.check-field):not(.visually-hidden) { margin-left: 8px; }
}

/* A/B 表由来の値は旧の六帯を DOM の行として持つ。旧は礼金と管理手数料の欄を同じ X=137 に置き
   （EditNKS.Designer.vb:1306・1649）、上下の金額欄の左端がそろう。項目ごとに見出しの列を作ると
   文字数で欄の位置がずれるため、行・組・項目の箱を subgrid にして見出しと欄の列を枠全体で共有する。
   狭いときは「見出し｜欄」の 2 列に DOM・Tab 順で積み、840px 以上で左・中・右の 3 組 6 列にする。 */
.edit-nks-amount-body { container-name: edit-nks-amounts; container-type: inline-size; }
.edit-nks-amounts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 9px 12px;
    align-items: center;
    min-width: 0;
}
.edit-nks-amount-row,
.edit-nks-amount-slot,
.edit-nks-amount-slot > .field {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-width: 0;
}
.edit-nks-amount-row { grid-column: 1 / -1; row-gap: 9px; }
.edit-nks-amount-slot,
.edit-nks-amount-gap { grid-column: span 2; }
.edit-nks-amount-slot > .field { grid-column: 1 / -1; }
.edit-nks-amount-slot .field-control-line { width: min(100%, 9.5em); }
.edit-nks-date-slot .field-control-line { width: min(100%, 10.5em); }
/* 区分・日割はモックの .w-short（5em）。値は B表 の行から写す（SoukinMain.vb:4192・4196）。区分は 2 字（入居・更新・退居・
   控除。KeToB.vb:289・KoToB.vb:308・KaToB.vb:249・TaToB.vb:242・ExToB.vb:208）、日割は空か「日/月の日数」
   （KeToB.vb:291・KaToB.vb:415。半角 5 字まで）で、どちらも 5em に収まる。 */
.edit-nks-short-slot .field-control-line { width: min(100%, 5em); }
/* 旧 TsLabel4 は高さ 35px の二行（EditNKS.Designer.vb:372 の Size）、モックも「取扱管理料または／保証差益」で折る。
   上の nowrap（0-4-1）に勝つよう同じ枠の選択子で詳細度を上げる（0-5-1）。8.5em は全角 8 字が入り 9 字目で折れる幅。 */
.edit-nks-editor .edit-nks-long-label-slot .field > label:not(.check-field):not(.visually-hidden) { max-width: 8.5em; white-space: normal; }
.edit-nks-amount-gap { display: none; min-width: 0; }
/* 広いときはモック（repeat(6, max-content)、中・右の組の見出しに 22px）と同じく 3 組を左に詰め、余りは右端に残す。
   欄の列を 1fr にすると各組の「円」の後ろに余りが散る。列を max-content にするので、欄の行の幅は % を含まない
   固定の値にする（% を含む幅は列の幅を決める計算では auto 扱いになり、入力の既定の幅で列が広がる）。
   840px の枠には 3 組（約 760px）が収まる。 */
@container edit-nks-amounts (min-width: 840px) {
    .edit-nks-amounts { grid-template-columns: repeat(6, max-content); }
    .edit-nks-amount-gap { display: block; }
    .edit-nks-amount-slot .field-control-line { width: 9.5em; }
    .edit-nks-date-slot .field-control-line { width: 10.5em; }
    .edit-nks-short-slot .field-control-line { width: 5em; }
    .edit-nks-editor .edit-nks-amount-row > .edit-nks-amount-slot:not(:first-child) .field > label:not(.check-field):not(.visually-hidden) { margin-left: 22px; }
}

/* 二つの配分枠と摘要は広いときだけ並べる。container は親から幅が決まる箱に限り、
   max-content で列幅を決める表の包みには付けない。 */
.edit-nks-duo-host { min-width: 0; container-name: edit-nks-duo; container-type: inline-size; }
.edit-nks-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
@container edit-nks-duo (min-width: 900px) {
    .edit-nks-duo { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
}

.edit-nks-table-scroll { max-width: 100%; overflow-x: auto; }
.edit-nks-table { border-collapse: collapse; font-size: 13px; }
.edit-nks-table th { font-weight: 500; text-align: left; white-space: nowrap; }
.edit-nks-table thead th {
    padding: 6px 8px;
    background: var(--navy);
    color: var(--surface);
}
.edit-nks-table td { padding: 4px 6px; border-top: 1px solid var(--line-soft); }
/* 左上の空きセルは見出しの行の一部なので罫線を引かない（モックの .grid thead td）。 */
.edit-nks-table thead td { border-top: 0; }
.edit-nks-table tbody th,
.edit-nks-table tfoot th {
    padding: 6px 8px;
    border-top: 1px solid var(--line-soft);
    background: var(--surface-dim);
    color: var(--label);
}
.edit-nks-table .field { display: block; }
.edit-nks-table .field-control-line { flex-wrap: nowrap; }
.edit-nks-table .field-control-line > input { width: 8em; min-width: 8em; }
/* 比較表は 380px 付近でも横送りが少なくて済むよう、モックと同じくこの表だけ余白を詰める。 */
.edit-nks-share-table td { padding: 4px; }
.edit-nks-share-table tbody th { padding: 6px; }
.edit-nks-empty-cell { background: var(--surface-dim); }
.edit-nks-total-row > th,
.edit-nks-total-row > td,
.edit-nks-company-table tfoot > tr > th,
.edit-nks-company-table tfoot > tr > td { border-top: 1px solid var(--line); }

.edit-nks-summary-grid { display: grid; gap: 10px; min-width: 0; }
.edit-nks-summary-grid > .field,
.edit-nks-month-row > .field {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.edit-nks-month-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-width: 0; }
.edit-nks-month-row > .field { flex: 0 1 auto; }
.edit-nks-month-row .field-control-line { width: 9em; }
/* 摘要カードの年月は年・月の select の最小幅（7.5rem + 6.5rem + gap 5px）を確保する。
   説明文は .edit-nks-month-row の flex-wrap で下段へ送る。 */
.edit-nks-summary-card .edit-nks-month-row > .field { grid-template-columns: max-content minmax(201px, 1fr); }
.edit-nks-summary-card .edit-nks-month-row .field-control-line { width: 100%; }
.edit-nks-month-note { flex: 1 1 18em; min-width: 0; color: var(--hint-accent); font-size: 12px; }

.edit-nks-company-table { width: 100%; min-width: 540px; }
.edit-nks-company-table .edit-nks-number-column { width: 3em; }
.edit-nks-company-table .edit-nks-money-column { width: 11em; }
.edit-nks-company-table tbody th { text-align: right; font-variant-numeric: tabular-nums; }
.edit-nks-company-table tbody td:nth-child(2) .field-control-line > input { width: 100%; min-width: 16em; }
.edit-nks-company-table tfoot th { text-align: right; }

/* viewport ではなく .workbench の中で留めるため、サイドバーへ重ならず本文と左右がそろう。
   バーは通常フローにも残し、最後のカードを隠さない。下余白は workbench の既定値だけにする。 */
.edit-nks-command-bar {
    position: sticky;
    z-index: 30;
    bottom: calc(-1 * var(--workbench-bottom-padding));
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    box-shadow: 0 -3px 14px var(--edit-nks-command-bar-shadow);
}
.edit-nks-command-spacer { flex: 1 1 auto; }

/* 家主送金Ｃ表などの印刷ダイアログ。旧は固定幅の小窓で、座標のまま可変幅へ広げると
   案内の帯と入力が画面端まで伸びて、どこを押すのか分からなくなる。項目・順番・文言・
   Tab 順は変えず、置き場所と余白だけを web の作法へ寄せる。 */
.print-dialog-surface { max-width: 40rem; }
.print-dialog-surface .field-groups[data-field-layout="modern-form"] {
  grid-template-columns: 1fr auto auto; gap: 12px; padding: 18px 20px 20px;
}
/* 旧 control を残すためだけの印は場所を取らせない（DOM からは消さない）。 */
.print-dialog-surface .field-section:has(> .field-grid > .legacy-parity-marker:only-child) { display: contents; }
.print-dialog-surface .field-section { grid-column: 1 / -1; }
/* 「送金日を分けて印刷はできません」は操作ではなく断り書きなので、注記として読ませる。 */
.print-dialog-surface .legacy-static-label[data-legacy-control="lblMsg"] {
  display: block; padding: 8px 12px; border-radius: var(--control-radius);
  background: var(--surface-muted); color: var(--muted); font-size: 12px;
}
.print-dialog-surface .field-control-line { --modern-input-width: 14rem; }
/* 印刷・閉じるは横に並べ、右下へ置く。旧の Tab 順（印刷→閉じる）は DOM 順のまま。 */
.print-dialog-surface .field-groups[data-field-layout="modern-form"] > button.command {
  width: auto; min-width: 8rem; justify-self: end;
}
.print-dialog-surface .field-groups > button.command[data-legacy-control="btnPrint"] { grid-column: 2; }
.print-dialog-surface .field-groups > button.command[data-legacy-control="btnClose"] { grid-column: 3; }
/* 旧 GroupBox も、中身が印だけのときは枠を残さない（旧は隠し枠、web では空箱に見える）。 */
.print-dialog-surface .field-group:not(:has(input, select, textarea, button, label)) {
  border: 0; padding: 0; margin: 0; min-height: 0;
}
.print-dialog-surface .field-section:not(:has(input, select, textarea, button, label, .legacy-static-label)) { display: contents; }
/* 押す先が 1 つだと分かるように、旧の既定ボタン（印刷）を主操作として見せる。 */
.print-dialog-surface .field-groups > button.command[data-legacy-control="btnPrint"] {
  background: var(--teal); border-color: var(--teal); color: var(--surface); font-weight: 600;
}

/* 家主送金Ｃ表は旧帳票の明細10列を、印刷前に画面で照合できる一覧として出す。
   金額列は桁を縦に追えるよう共通一覧の num 表示を使い、狭い画面では表全体を横スクロールする。 */
.soukin-c-list-surface { margin-top: 16px; }
.soukin-c-list-title { margin: 0 0 8px; font-size: 1rem; }
.ichiran-table.soukin-c-list { min-width: 74rem; }
.ichiran-table.soukin-c-list th:nth-child(n + 5),
.ichiran-table.soukin-c-list td:nth-child(n + 5) { text-align: right; white-space: nowrap; }
.ichiran-table.soukin-c-list th:nth-child(1),
.ichiran-table.soukin-c-list td:nth-child(1) { width: 4rem; }
.ichiran-table.soukin-c-list th:nth-child(2),
.ichiran-table.soukin-c-list td:nth-child(2) { min-width: 7rem; }
.ichiran-table.soukin-c-list th:nth-child(3),
.ichiran-table.soukin-c-list td:nth-child(3),
.ichiran-table.soukin-c-list th:nth-child(4),
.ichiran-table.soukin-c-list td:nth-child(4) { min-width: 11rem; }

/* Why: 仮更新の DOM では契約者欄は section.field-section。共通の pair-form-fields の
   display:block より具体的にし、同じ行の選択ボタンを欄の右に保つ。 */
.contract-split-surface.kari-modern-surface .contract-summary-card .kari-contractor-row.field-groups.pair-form-fields {
    display: flex;
    align-items: end;
    padding-inline-start: 30px;
}
.contract-split-surface.kari-modern-surface .kari-contractor-row > section.field-section {
    flex: 0 1 32em;
    width: auto;
    min-width: 0;
}
.contract-split-surface.kari-modern-surface .contract-summary-card .kari-contractor-row.field-groups.pair-form-fields .field-grid[data-field-layout="modern-form"] {
    grid-template-columns: minmax(0, 1fr);
    padding-inline-end: 0;
}
.contract-split-surface.kari-modern-surface .kari-contractor-row .field-grid > .field {
    width: 100%;
}

/* Why: 旧ラベルの対応点は DOM に残し、入力欄の見出しを重複表示しない。 */
.kari-modern-surface .contract-parties-card .legacy-static-label[data-legacy-static-control="TsLabel23"] { display: none; }

/* Why: 共通エディタの top actions は field-grid の前にある。タブの右上に通常フローで置く。 */
.kari-modern-surface .contract-parties-card [data-field-key="TabPage1"] .modern-group-actions,
.kari-modern-surface .contract-parties-card [data-field-key="TabPage2"] .modern-group-actions {
    justify-content: flex-end;
    padding: 0 10px 10px;
}

/* Why: 1 行の見出し列をここで定め、残りを入力列に配る。2・3 番目の見出しは文字幅だけ取る。 */
.kari-modern-surface .contract-parties-card .modern-run:has([data-legacy-control="txtKinmusaki"]) {
    display: grid;
    grid-template-columns: var(--contract-party-label-width) minmax(0, 1fr) max-content 15ch;
    column-gap: 6px;
}
.kari-modern-surface .contract-parties-card .modern-run:has([data-legacy-control="txtCar"]) {
    display: grid;
    grid-template-columns: var(--contract-party-label-width) minmax(6ch, 1fr) max-content minmax(6ch, 1fr) max-content minmax(6ch, 1fr);
    column-gap: 6px;
}
.kari-modern-surface .contract-parties-card .modern-run:has([data-legacy-control="txtKinmusaki"], [data-legacy-control="txtCar"]) > .field {
    display: contents;
}
.kari-modern-surface .contract-parties-card > .field-groups[data-field-layout="modern-form"] .modern-run:has([data-legacy-control="txtKinmusaki"], [data-legacy-control="txtCar"]) > .field .field-control-line {
    width: 100%;
}
@container contract-parties (max-width: 550px) {
    .kari-modern-surface .contract-parties-card .modern-run:has([data-legacy-control="txtKinmusaki"]) {
        grid-template-columns: var(--contract-party-label-width) minmax(0, 1fr);
    }
}
.kari-modern-surface .contract-parties-card > .field-groups[data-field-layout="modern-form"] .field:has([data-legacy-control="txtHosyouninTEL"]) .field-control-line {
    min-width: 17ch;
}
/* Why: 読み上げ用の二行目見出しは absolute で格子から外れる。
   二列のときだけ契約情報の住所二行目と同じ値列へ置き、一列では自然に折り返す。 */
@container contract-parties (min-width: 561px) {
    .kari-modern-surface .contract-parties-card .field:has([data-legacy-control="txtAddress2"]) .field-control-line {
        grid-column: 2;
    }
}
/* Why: 旧保証人区分とクォークは同じ y。共通の狭幅 grid ではチェックが全幅になるので、このタブだけ行を組む。 */
.kari-modern-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:has(> .field #cmbHosyounin) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
}
.kari-modern-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:has(> .field #cmbHosyounin) > .field {
    flex: 0 0 100%;
    min-width: 0;
}
.kari-modern-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:has(> .field #cmbHosyounin) > .field:has(#cmbHosyounin) {
    display: grid;
    grid-template-columns: var(--contract-party-label-width) minmax(0, 1fr);
    flex: 1 1 calc(100% - 7em);
    min-width: 0;
}
.kari-modern-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:has(> .field #cmbHosyounin) > .field:has(#chkQuaq) {
    flex: 0 0 7em;
    min-width: 0;
}
.kari-modern-surface .contract-parties-card .field-grid[data-field-layout="modern-form"]:has(> .field #cmbHosyounin) > .modern-run {
    flex: 0 0 100%;
}
.contract-split-surface.kari-modern-surface .kari-totals-column .pair-form-fields .field-grid[data-field-layout="modern-form"] > .field {
    grid-template-columns: minmax(0, 1fr) 8.5em;
}
.kari-modern-surface .kari-totals-column .field:has([data-legacy-control="txtSeisanTotal"]) > label {
    white-space: normal;
    font-weight: 700;
}
.contract-split-surface.kari-modern-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"] .field:has([data-legacy-control="txtCode"]),
.contract-split-surface.kari-modern-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"] .field:has([data-legacy-control="txtNo"]),
.contract-split-surface.kari-modern-surface .contract-summary-card .pair-form-fields .field-grid[data-field-layout="modern-form"] .field:has([data-legacy-control="txtKeiyakusya"]) {
    display: grid;
    grid-template-columns: 6em minmax(0, 1fr);
    align-items: center;
}